:root { --ink: #161B3D; --ink-soft: #2C325C; --ink-muted: #4A4F61; --line: #DCE6F0; --line-soft: #ECF2F8; --paper: #FFFFFF; --paper-deep: #F3F7FC; --blue: #0878D8; --blue-deep: #0A4E94; --blue-soft: #E4F1FB; --blue-mid: #55A6E5; --sand: #D6E6F5; --sand-soft: #EAF2FA; --green-ok: #2F6B3E; --coral: #F26B5C; --coral-soft: rgba(242,107,92,0.15); --coral-ink: #B73A2A; --shadow-sm: 0 1px 2px rgba(22,27,61,0.04), 0 1px 1px rgba(22,27,61,0.03); --shadow-md: 0 4px 12px rgba(22,27,61,0.06), 0 1px 3px rgba(22,27,61,0.04); --shadow-lg: 0 24px 48px -16px rgba(22,27,61,0.12), 0 8px 20px -8px rgba(22,27,61,0.06); --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --radius-xl: 24px; /* Vertical rhythm — must match index.html so shared section components (Problem, Services, HumanInLoop, HowItWorks, Fit, Packages, Story, FAQ, CTA) get the same padding on ICP pages as on the homepage. Without these, padding: var(--section-y) 32px resolves to invalid and collapses to 0, causing sections to touch each other. */ --section-y: 64px; --section-y-lg: 80px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--paper); color: var(--ink); font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-feature-settings: 'cv11', 'ss01', 'ss03'; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; line-height: 1.5; } body { overflow-x: clip; } .serif { font-family: 'Outfit', system-ui, sans-serif; font-weight: 600; letter-spacing: -0.01em; } .mono { font-family: 'Outfit', system-ui, sans-serif; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; } ::selection { background: var(--blue); color: #fff; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; padding: 0; color: inherit; } h1, h2, h3, h4, h5, p { margin: 0; } /* ===== Nav ===== */ .nav { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--line-soft); background: rgba(255,255,255,0.82); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); } /* ICP-page-only fix for the scroll-hide nav. The shared Nav.jsx renders a
inside #nav-mount. On the homepage, Nav is mounted inside 's wrapping
which spans the whole page — so the sticky parent is tall and the scroll-down-hide / scroll-up-show behavior works. On ICP pages, #nav-mount is a standalone
whose only child is the header, so the sticky parent equals the nav's own height and the sticky behavior immediately fails. Making #nav-mount itself a sticky element (with as its parent) gives sticky room again. pointer-events:none on the band prevents the empty 60px area from trapping clicks once the inner header has translated off-screen. IMPORTANT: Nav.jsx renders TWO siblings into #nav-mount — the
and the
(position:fixed inset:0, covers the viewport). Restrict the pointer-events:auto rule to the
only — if we use `#nav-mount > *`, this selector's specificity (1,0,0) beats `.bm-mobile-drawer` (0,1,0) and forces the closed drawer to pointer-events:auto, which makes the invisible drawer trap ALL clicks on the page. */ #nav-mount { position: sticky; top: 0; z-index: 50; pointer-events: none; } #nav-mount > header { pointer-events: auto; } .nav-inner { max-width: 1280px; margin: 0 auto; padding: 14px 32px; display: flex; align-items: center; justify-content: space-between; gap: 32px; } .nav-logo { display: flex; align-items: center; gap: 10px; } .nav-logo img { display: block; height: 38px; width: auto; } .nav-links { display: flex; align-items: center; gap: 28px; font-size: 14px; color: var(--ink-soft); font-weight: 500; } .nav-links a:hover { color: var(--ink); } .nav-cta { background: var(--ink); color: var(--paper); padding: 12px 20px; border-radius: 12px; font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; transition: background .2s; } .nav-cta:hover { background: var(--blue); } /* ===== Hero ===== */ .hero { position: relative; padding: 80px 32px 100px; overflow: hidden; } .hero-bg { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 50% at 80% 30%, rgba(29,78,137,0.06) 0%, transparent 60%), radial-gradient(40% 40% at 10% 80%, rgba(232,220,196,0.35) 0%, transparent 70%); } .hero-inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 80px; align-items: center; position: relative; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--coral-ink); font-weight: 500; padding: 6px 12px; border-radius: 999px; background: var(--coral-soft); border: 1px solid rgba(242,107,92,0.18); margin-bottom: 28px; } .eyebrow .dot { width: 6px; height: 6px; border-radius: 3px; background: var(--coral); } .hero h1 { font-family: 'Outfit', sans-serif; font-size: 64px; line-height: 1.05; letter-spacing: -0.04em; font-weight: 600; color: var(--ink); margin-bottom: 24px; } .hero h1 .accent { color: var(--blue); font-weight: 600; } .hero .sub { font-size: 19px; line-height: 1.5; color: var(--ink-muted); max-width: 520px; margin-bottom: 36px; } .hero-ctas { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; flex-wrap: wrap; } .btn-primary { background: var(--ink); color: var(--paper); padding: 16px 24px; border-radius: 12px; font-size: 15px; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; transition: background .2s, transform .15s, box-shadow .2s; } .btn-primary:hover { background: var(--blue); } .btn-primary-lg { padding: 20px 32px; font-size: 17px; font-weight: 600; border-radius: 14px; letter-spacing: -0.005em; gap: 10px; box-shadow: 0 10px 24px -12px rgba(8,18,38,0.35); } .btn-primary-lg:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -12px rgba(8,18,38,0.45); } .btn-secondary { background: transparent; color: var(--ink); padding: 16px 20px; border-radius: 12px; font-size: 15px; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); transition: background .2s; } .btn-secondary:hover { background: var(--paper-deep); } .hero-trust { display: flex; align-items: center; gap: 18px; margin-bottom: 32px; flex-wrap: wrap; } .hero-trust-item { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-soft); font-weight: 500; } .hero-trust-check { width: 16px; height: 16px; border-radius: 50%; background: var(--coral-soft); color: var(--coral-ink); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; } .hero-proof { display: flex; align-items: center; gap: 16px; font-size: 13px; color: var(--ink-muted); } .hero-avatars { display: flex; } .hero-avatars span { width: 28px; height: 28px; border-radius: 14px; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; font-size: 9.5px; font-weight: 600; color: var(--ink-soft); letter-spacing: -0.02em; } .hero-avatars span + span { margin-left: -8px; } .hero-avatars span:nth-child(1) { background: #C5D4E8; } .hero-avatars span:nth-child(2) { background: #E8DCC4; } .hero-avatars span:nth-child(3) { background: #B8C9DC; } .hero-avatars span:nth-child(4) { background: #D4C4A8; } .hero-avatars span:nth-child(5) { background: #C5D4E8; } .hero-stars { display: flex; gap: 2px; color: #E4A72B; } /* Task list card (hero right) */ .hero-card { background: #fff; border: 1px solid var(--line-soft); border-radius: 20px; padding: 28px; box-shadow: var(--shadow-lg); position: relative; } .hero-card-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid var(--line-soft); margin-bottom: 18px; } .hero-card-title { font-size: 13px; color: var(--ink-muted); font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; } .hero-card-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--coral-ink); padding: 4px 10px; border-radius: 999px; background: var(--coral-soft); } .hero-card-pulse { width: 6px; height: 6px; border-radius: 3px; background: var(--coral); animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(242,107,92,0.45); } 70% { box-shadow: 0 0 0 8px rgba(242,107,92,0); } 100% { box-shadow: 0 0 0 0 rgba(242,107,92,0); } } .hero-card-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; } .hero-card-row + .hero-card-row { border-top: 1px dashed var(--line-soft); } .hero-card-check { width: 18px; height: 18px; border-radius: 9px; background: var(--blue-soft); color: var(--blue-deep); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex: none; margin-top: 2px; } .hero-card-task { font-size: 14px; color: var(--ink); font-weight: 500; } .hero-card-time { font-size: 12px; color: var(--ink-muted); margin-top: 3px; } /* ===== Section base ===== */ section.section { padding: var(--section-y) 32px; } .section-inner { max-width: 1280px; margin: 0 auto; } .section-eyebrow { font-size: 12px; color: var(--ink-muted); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; margin-bottom: 20px; } .section-h { font-family: 'Outfit', system-ui, sans-serif; font-size: 48px; line-height: 1.08; letter-spacing: -0.03em; font-weight: 600; color: var(--ink); margin-bottom: 16px; max-width: 820px; } .section-h .accent { color: var(--blue); } .section-sub { font-size: 17px; line-height: 1.55; color: var(--ink-muted); max-width: 680px; margin-bottom: 56px; } /* ===== Proof band ===== */ .proof-band { background: var(--paper-deep); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); padding: 28px 32px; } .proof-band-inner { max-width: 1280px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; } .proof-stat { font-size: 14px; color: var(--ink-soft); } .proof-stat strong { font-family: 'Outfit', system-ui, sans-serif; color: var(--ink); font-weight: 600; } /* ===== Pain + TimeBack shared dark wrapper (matches homepage) ===== Solid indigo (var(--ink) = #161B3D) so Pain and TimeBack read as one continuous beat. Previously a gradient (#1E1B38 → #3B3870), but TimeBack is transparent and Pain is solid var(--ink) — the gradient showed through TimeBack and made the two sections look like different colors. */ .pain-timeback-wrap { background: var(--ink); position: relative; overflow: hidden; isolation: isolate; } /* Pinstripes removed — were creating visible diagonal texture on TimeBack that didn't match the Pain section. Element is kept in the DOM (in case we want to bring them back) but rendered invisible. */ .pain-timeback-pinstripes { display: none; } .pain-timeback-wrap > .pain, .pain-timeback-wrap > #timeback-mount { position: relative; z-index: 1; } .pain-timeback-wrap > .pain { background: transparent; } /* ===== Pain section (dark — visual rhythm break) ===== Animated tag cloud of "the work that fills your week". Centre-aligned headline + sub + tail, pills wrap and fade into the dark wrapper. Padding mirrors the homepage Pain.jsx (100px top, 0 bottom) so TimeBack's own top padding owns the gap between the two sections. Selector is `section.section.pain` so it outranks `section.section`. */ section.section.pain { background: var(--ink); color: #fff; padding: 72px 24px 0; } .pain { background: var(--ink); color: #fff; } .pain .section-inner { text-align: center; max-width: 960px; } .pain .section-eyebrow { color: rgba(255,255,255,0.85); } .pain .section-h { color: #fff; max-width: 760px; margin-left: auto; margin-right: auto; /* Bottom margin compensates for the removed section-sub paragraph (which used to sit between the headline and the scrolling cloud). */ margin-bottom: 48px; } .pain .section-h .accent { color: var(--blue-mid); } .bm-pain-cloud .bm-cloud-outer { position: relative; max-width: 960px; margin: 0 auto; } .bm-pain-cloud .bm-cloud-viewport { position: relative; height: 200px; overflow: hidden; /* Fade rows in/out at top + bottom by masking the pill layer itself, so the wrapper's gradient + pinstripes show through cleanly. */ -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%); } .bm-pain-cloud .bm-cloud-track { display: flex; flex-direction: column; gap: 10px; will-change: transform; animation: bm-cloud-scroll 30s linear infinite; } .bm-pain-cloud .bm-cloud-strip { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; } .bm-pain-cloud .bm-cloud-row { display: flex; justify-content: center; gap: 14px; } @keyframes bm-cloud-scroll { from { transform: translateY(0); } to { transform: translateY(-50%); } } .bm-pain-cloud .bm-pill { font-family: 'Inter', system-ui, sans-serif; font-size: 14px; font-weight: 400; color: rgba(255,255,255,0.92); background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.22); border-radius: 999px; padding: 8px 16px; white-space: nowrap; line-height: 1; } @media (prefers-reduced-motion: reduce) { .bm-pain-cloud .bm-cloud-track { animation: none; } } /* ===== Tasks section ===== */ .tasks { background: var(--paper); border-top: 1px solid var(--line-soft); } .tasks-items { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 56px; row-gap: 40px; max-width: 1180px; } .task-item { display: block; } .task-item-ico { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); display: grid; place-items: center; color: var(--blue); margin-bottom: 16px; } .task-item-ico .lu { width: 22px; height: 22px; stroke: currentColor; fill: none; } .task-item-text { font-size: 15px; line-height: 1.55; color: var(--ink-muted); } .task-item-text b { font-family: 'Outfit', system-ui, sans-serif; color: var(--ink); font-weight: 600; letter-spacing: -0.005em; display: block; font-size: 18px; margin-bottom: 8px; } /* ===== How it works ===== */ .how { background: var(--paper); } .how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .how-step { position: relative; } .how-step-num { font-family: 'Outfit', system-ui, sans-serif; font-size: 56px; line-height: 1; font-weight: 600; color: var(--blue-soft); letter-spacing: -0.03em; margin-bottom: 16px; } .how-step h3 { font-family: 'Outfit', system-ui, sans-serif; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 10px; } .how-step p { font-size: 15px; line-height: 1.55; color: var(--ink-muted); } /* ===== Testimonial ===== */ .testimonial { background: var(--paper-deep); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); padding: var(--section-y) 32px; } .testimonial-inner { max-width: 880px; margin: 0 auto; text-align: center; } .testimonial blockquote { font-family: 'Outfit', system-ui, sans-serif; font-size: 36px; line-height: 1.25; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 28px; } .testimonial cite { font-style: normal; font-size: 14px; color: var(--ink-muted); } /* ===== FAQ ===== */ .faq { background: var(--paper); } .faq-inner { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.6fr; gap: 80px; align-items: start; } .faq-list { border-top: 1px solid var(--line); } .faq details { border-bottom: 1px solid var(--line); } .faq summary { list-style: none; cursor: pointer; padding: 22px 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 17px; font-weight: 500; color: var(--ink); letter-spacing: -0.01em; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ''; width: 28px; height: 28px; border-radius: 14px; border: 1px solid var(--line); flex-shrink: 0; transition: transform .25s, background .2s; background-image: url("data:image/svg+xml;utf8,"); background-size: 12px 12px; background-repeat: no-repeat; background-position: center; } .faq details[open] summary::after { transform: rotate(180deg); background-color: var(--ink); background-image: url("data:image/svg+xml;utf8,"); } .faq .faq-body { padding: 0 0 24px; font-size: 15px; line-height: 1.6; color: var(--ink-soft); max-width: 720px; } .faq-closing { grid-column: 1 / -1; margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; } .faq-closing-line { font-family: 'Outfit', system-ui, sans-serif; font-size: 22px; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); margin: 0; max-width: 540px; } .faq-closing-line .accent { color: var(--blue); } .faq-closing-cta { background: var(--ink); color: var(--paper); padding: 14px 22px; border-radius: 12px; font-size: 15px; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; transition: background .15s, transform .15s; text-decoration: none; } .faq-closing-cta:hover { background: var(--blue); transform: translateY(-1px); } /* ===== Mid-page banner CTA (between How it works and Is this right for you) ===== */ .icp-banner-cta { background: var(--ink); color: #fff; position: relative; overflow: hidden; isolation: isolate; } .icp-banner-cta::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 24px); } .icp-banner-cta::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(50% 80% at 100% 50%, rgba(8,120,216,0.22) 0%, transparent 65%), radial-gradient(35% 70% at 0% 50%, rgba(85,166,229,0.10) 0%, transparent 70%); } .icp-banner-cta-inner { max-width: 1280px; margin: 0 auto; padding: 56px 32px; display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 40px; align-items: center; position: relative; z-index: 1; } .icp-banner-cta-eyebrow { font-family: 'Outfit', system-ui, sans-serif; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-mid); font-weight: 500; margin-bottom: 14px; } .icp-banner-cta-h { font-family: 'Outfit', system-ui, sans-serif; font-size: 38px; line-height: 1.12; letter-spacing: -0.025em; font-weight: 600; color: #fff; max-width: 760px; } .icp-banner-cta-h .accent { color: var(--blue-mid); } .icp-banner-cta-btn { background: #fff; color: var(--ink); padding: 16px 24px; border-radius: 12px; font-size: 15px; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; transition: background .2s, color .2s, transform .2s; white-space: nowrap; } .icp-banner-cta-btn:hover { background: var(--blue); color: #fff; transform: translateY(-1px); } @media (max-width: 768px) { .icp-banner-cta-inner { grid-template-columns: 1fr; padding: 48px 24px; gap: 24px; } .icp-banner-cta-h { font-size: 28px; } } /* ===== CTA ===== */ .cta { padding: var(--section-y) 32px var(--section-y-lg); } .cta-inner { max-width: 1280px; margin: 0 auto; background: var(--blue); color: #fff; border-radius: 24px; overflow: hidden; position: relative; padding: 72px; display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 56px; align-items: stretch; } .cta-bg { position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 24px); } .cta-text { position: relative; } .cta-eyebrow { font-size: 12px; color: #D6E6F5; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; margin-bottom: 20px; } .cta h2 { font-family: 'Outfit', system-ui, sans-serif; font-size: 52px; line-height: 1.05; letter-spacing: -0.03em; font-weight: 600; margin-bottom: 22px; } .cta h2 .accent { color: #EAF2FA; } .cta-p { font-size: 17px; line-height: 1.55; color: rgba(255,255,255,0.88); margin-bottom: 32px; max-width: 520px; } .cta-stats { display: flex; gap: 32px; flex-wrap: wrap; margin-bottom: 28px; } .cta-stat-n { font-family: 'Outfit', system-ui, sans-serif; font-size: 32px; color: #EAF2FA; line-height: 1; } .cta-stat-l { font-size: 13px; color: rgba(255,255,255,0.92); margin-top: 4px; } .cta-bullets { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .cta-bullets li { display: flex; gap: 10px; align-items: center; font-size: 14px; color: rgba(255,255,255,0.96); } .cta-bullets li::before { content: '✓'; width: 16px; height: 16px; border-radius: 8px; background: rgba(255,255,255,0.25); color: #fff; display: grid; place-items: center; flex: none; font-size: 10px; } .cta-card { background: #fff; border-radius: 20px; padding: 18px; box-shadow: 0 24px 48px -16px rgba(0,0,0,0.25); min-height: 560px; position: relative; overflow: hidden; } .cta-card-header { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px 14px; border-bottom: 1px solid var(--line-soft); margin-bottom: 12px; } .cta-card-title { font-size: 13px; color: var(--ink); font-weight: 600; letter-spacing: -0.01em; } .cta-card-sub { font-size: 12px; color: var(--ink-muted); } .cta-card-label { font-size: 11px; color: var(--blue); font-family: 'Outfit', system-ui, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; } /* ===== Mid-page CTA banner ===== Compact CTA inserted between How It Works and Is This Right For You. Scrolls to the full booking widget at #cta. */ .mid-cta { padding: 48px 32px; } .mid-cta-inner { max-width: 1280px; margin: 0 auto; background: var(--ink); color: #fff; border-radius: 24px; padding: 44px 56px; position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; } .mid-cta-bg { position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 24px); } .mid-cta-text { position: relative; } .mid-cta-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: 'Outfit', system-ui, sans-serif; font-size: 12px; color: var(--blue-mid); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; margin-bottom: 14px; } .mid-cta-dot { width: 6px; height: 6px; border-radius: 3px; background: var(--blue-mid); box-shadow: 0 0 0 4px rgba(85,166,229,0.18); } .mid-cta-h { font-family: 'Outfit', system-ui, sans-serif; font-size: 34px; line-height: 1.12; letter-spacing: -0.02em; font-weight: 600; color: #fff; margin: 0; max-width: 640px; } .mid-cta-h .accent { color: var(--blue-mid); } .mid-cta-h .tail { display: block; margin-top: 10px; font-size: 0.62em; font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; color: rgba(255,255,255,0.95); } .mid-cta-p { font-size: 16px; line-height: 1.55; color: rgba(255,255,255,0.92); margin: 0; max-width: 560px; } .mid-cta-actions { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; } .mid-cta-btn { background: #fff; color: var(--ink); padding: 16px 24px; border-radius: 12px; font-size: 15px; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; transition: background .2s, color .2s, transform .2s; } .mid-cta-btn:hover { background: var(--blue); color: #fff; } .mid-cta-meta { font-size: 13px; color: rgba(255,255,255,0.88); } /* ===== Footer ===== */ .foot { background: var(--ink); color: rgba(255,255,255,0.92); padding: 64px 32px 40px; } .foot-inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 48px; } .foot h4 { font-size: 12px; color: rgba(255,255,255,0.85); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; margin-bottom: 16px; } .foot ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; } .foot ul a:hover { color: #fff; } .foot-brand { font-family: 'Outfit', system-ui, sans-serif; font-size: 18px; font-weight: 600; color: #fff; margin-bottom: 16px; letter-spacing: -0.01em; } .foot-tag { font-size: 14px; line-height: 1.55; max-width: 280px; } .foot-base { max-width: 1280px; margin: 48px auto 0; padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.2); display: flex; justify-content: space-between; align-items: center; gap: 24px; font-size: 13px; color: rgba(255,255,255,0.85); flex-wrap: wrap; } .foot-base a:hover { color: #fff; } /* ===== Responsive ===== */ @media (max-width: 1024px) { :root { --section-y: 56px; --section-y-lg: 72px; } .hero { padding: 56px 24px 64px; } .hero h1 { font-size: 48px; } .hero-inner { grid-template-columns: 1fr; gap: 32px; } /* Flatten the two column wrappers so we can interleave the calculator between the sub-headline and the CTAs on narrow viewports. */ .hero-inner > div { display: contents; } .hero-inner .eyebrow { order: 1; justify-self: start; } .hero-inner h1 { order: 2; } .hero-inner .sub { order: 3; } .hero-inner .hero-calc-wrap { order: 4; } .hero-inner .hero-ctas { order: 5; } .hero-inner .hero-trust { order: 6; } .hero-inner .hero-proof { order: 7; } section.section { padding: var(--section-y) 24px; } .section-h { font-size: 36px; } .bm-pain-cloud .bm-pill { font-size: 13px; padding: 7px 13px; max-width: calc(100vw - 32px); } .bm-pain-cloud .bm-cloud-viewport { height: 200px; } /* Stack to one pill per row so long labels (e.g. 'Resolving scheduling conflicts across calendars') don't overflow narrow viewports. */ .bm-pain-cloud .bm-cloud-row { flex-direction: column; align-items: center; gap: 8px; } .tasks-items { grid-template-columns: 1fr 1fr; column-gap: 40px; row-gap: 32px; } .faq-inner { grid-template-columns: 1fr; gap: 32px; } .cta-inner { grid-template-columns: 1fr; padding: 48px 32px; } .cta h2 { font-size: 36px; } .mid-cta { padding: 32px 24px; } .mid-cta-inner { grid-template-columns: 1fr; padding: 36px 32px; gap: 24px; } .mid-cta-actions { align-items: flex-start; } .mid-cta-h { font-size: 28px; } .foot-inner { grid-template-columns: 1fr 1fr; gap: 32px; } } @media (max-width: 640px) { :root { --section-y: 44px; --section-y-lg: 56px; } .hero { padding: 40px 20px 48px; } .hero h1 { font-size: 38px; } .hero .sub { font-size: 17px; } .nav-inner { padding: 12px 20px; } .nav-links { display: none; } section.section { padding: var(--section-y) 20px; } .section-h { font-size: 30px; } .tasks-items { grid-template-columns: 1fr; row-gap: 28px; } .cta { padding: var(--section-y) 20px var(--section-y-lg); } .cta-inner { padding: 40px 24px; } .cta h2 { font-size: 30px; } .mid-cta { padding: 24px 20px; } .mid-cta-inner { padding: 32px 24px; border-radius: 20px; } .mid-cta-h { font-size: 24px; } .mid-cta-p { font-size: 15px; } .foot { padding: 48px 20px 32px; } .foot-inner { grid-template-columns: 1fr; gap: 32px; } } /* scroll reveal */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity .8s ease, transform .8s ease; } .reveal.in { opacity: 1; transform: translateY(0); } /* Hero floating accent cards (around the calculator) */ .hero-float-card { position: absolute; background: #fff; border: 1px solid var(--line-soft); border-radius: 14px; padding: 12px 16px; box-shadow: var(--shadow-md); font-size: 13px; display: flex; align-items: center; gap: 10px; white-space: nowrap; z-index: 2; } .hero-float-tl { top: -22px; left: -28px; animation: heroFloat1 5s ease-in-out infinite; } .hero-float-br { bottom: -22px; right: -28px; animation: heroFloat2 6s ease-in-out infinite; } @keyframes heroFloat1 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(0,-6px); } } @keyframes heroFloat2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(0,-4px); } } @media (max-width: 1024px) { .hero-float-tl { left: -8px; } .hero-float-br { right: -8px; } } @media (max-width: 640px) { .hero-float-card { display: none; } } @media (prefers-reduced-motion: reduce) { .hero-float-tl, .hero-float-br { animation: none; } }