. ── */ .sec-aurora { background: radial-gradient(115% 85% at 12% -10%, rgba(0, 0, 128, 0.30) 0%, rgba(6, 6, 12, 0) 55%), var(--canvas); } .sec-ember { background: radial-gradient(120% 90% at 88% -10%, rgba(255, 145, 77, 0.12) 0%, rgba(6, 6, 12, 0) 55%), var(--canvas); } .sec-deep { background: linear-gradient(180deg, var(--surface-2) 0%, var(--canvas) 70%); } .rule { border: 0; border-top: 0.5px solid var(--rule); margin: var(--space-5) 0; } .section.alt { background: var(--surface); } .section.dark { background: var(--navy); color: #fff; } .section.dark h1, .section.dark h2, .section.dark h3 { color: #fff; } .section.dark .eyebrow { color: var(--yellow); } /* Sunrise arc — reusable thin curved divider, the brand's recurring motif. Drop into any section as . */ .sunrise-arc { display: block; width: 100%; max-width: 720px; height: auto; margin: var(--space-5) auto; color: var(--orange); } .sunrise-arc.dark { color: var(--yellow); } .sunrise-arc.small { max-width: 320px; margin: var(--space-3) auto; } /* ── NAV ───────────────────────────────────────────── */ .nav { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(140%) blur(8px); border-bottom: 0.5px solid var(--rule); } .nav-inner { max-width: var(--max-w); margin: 0 auto; padding: 12px var(--pad-x); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); } /* Brand mark — icon SVG + "biad" wordmark */ .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--navy); } .brand-icon { /* New lockup PNG: wordmark + logo combined. Width is auto so the image preserves its natural aspect; fixed height controls size. 2026-06-07 logo bump: height was 42px and .nav-inner vertical padding was 16px; both changed to enlarge the mark while keeping the nav the same height (42 + 32 = 74px, now 50 + 24 = 74px). Revert both to undo. */ height: 50px; width: auto; flex-shrink: 0; } .brand-word { font-family: 'Inter', sans-serif; font-variation-settings: 'opsz' 32; font-weight: 800; font-size: 28px; letter-spacing: -0.06em; color: var(--navy); line-height: 1; } .nav-links { display: flex; gap: var(--space-4); align-items: center; font-size: 15px; font-weight: 500; } .nav-links a { color: var(--text-muted); transition: color .15s; } .nav-links a:hover, .nav-links a.active { color: var(--navy); } .nav-links a.active { font-weight: 600; } .nav-cta { background: var(--orange); color: var(--btn-ink) !important; padding: 10px 18px; border-radius: var(--radius); font-weight: 600; font-size: 14px; transition: background .15s, transform .15s; } .nav-cta:hover { background: var(--orange-deep); transform: translateY(-1px); } /* Home only: in the hero the sticky nav CTA is an inverted outline button (orange outline + orange text, dark fill); once the hero is scrolled past it transitions to the normal filled orange button. JS toggles .cta-shown on via a scroll listener on .hero. The hero still carries the primary Book CTA. History: 2026-06-07 hide-until-scrolled; 2026-06-09 changed to invert-then-fill. To revert to plain-always-filled, delete these three rules (the default .nav-cta styles already render the filled button). */ .is-home .nav-cta { background: transparent; color: var(--orange) !important; border: 1.5px solid var(--orange); box-shadow: none; transition: background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease, transform .15s ease; } .is-home:not(.cta-shown) .nav-cta:hover { background: rgba(255, 145, 77, 0.12); color: var(--orange) !important; box-shadow: none; transform: translateY(-1px); } .is-home.cta-shown .nav-cta { background: var(--orange); color: var(--btn-ink) !important; border-color: transparent; box-shadow: var(--shadow-orange); } /* Mobile nav — CSS-only

hamburger. Hidden above 800px. */ .nav-toggle { display: none; } @media (max-width: 800px) { .nav-links { display: none; } .nav-toggle { display: block; position: relative; margin-left: auto; } .nav-toggle > summary { list-style: none; cursor: pointer; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius); color: var(--navy); transition: background .15s; } .nav-toggle > summary::-webkit-details-marker { display: none; } .nav-toggle > summary:hover { background: var(--surface); } .nav-toggle > summary svg { width: 22px; height: 22px; } .nav-toggle[open] > summary svg .line-top { transform: translateY(7px) rotate(45deg); } .nav-toggle[open] > summary svg .line-mid { opacity: 0; } .nav-toggle[open] > summary svg .line-bot { transform: translateY(-7px) rotate(-45deg); } .nav-toggle > summary svg line { transition: transform .2s ease, opacity .15s; transform-origin: center; } .nav-drawer { position: absolute; top: calc(100% + 8px); right: 0; min-width: 240px; background: var(--canvas); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: var(--space-2); display: flex; flex-direction: column; gap: 2px; z-index: 60; } .nav-drawer a { padding: 12px var(--space-3); font-size: 15px; font-weight: 500; color: var(--text-muted); border-radius: var(--radius); } .nav-drawer a:hover, .nav-drawer a.active { background: var(--surface); color: var(--navy); } .nav-drawer a.active { font-weight: 600; } } @media (max-width: 500px) { .brand-icon { height: 36px; width: auto; } .brand-word { font-size: 24px; } .nav-cta { padding: 9px 14px; font-size: 13px; } .nav-inner { padding: 14px 20px; gap: var(--space-2); } } /* ── BUTTON ───────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 12px; padding: 18px 28px; background: var(--orange); color: var(--btn-ink); font-weight: 600; font-size: 16px; letter-spacing: -0.01em; border: 0; border-radius: var(--radius); cursor: pointer; transition: background .15s, transform .15s, box-shadow .15s; box-shadow: var(--shadow-sm); } .btn:hover { background: var(--orange-deep); transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn-arrow { font-weight: 400; transition: transform .2s; } .btn:hover .btn-arrow { transform: translateX(4px); } .btn.secondary { background: transparent; color: var(--navy); border: 1.5px solid var(--navy); box-shadow: none; } .btn.secondary:hover { background: var(--navy); color: #fff; } .btn.dark { background: var(--navy); color: #fff; } .btn.dark:hover { background: var(--navy-deep); } .btn.amber { background: var(--orange); color: var(--btn-ink); } /* legacy alias */ .btn.amber:hover { background: var(--orange-deep); } .btn-subline { display: block; margin-top: 14px; font-size: 14px; color: var(--text-muted); font-style: italic; } /* ── HERO ──────────────────────────────────────────── */ .hero { padding: var(--space-7) 0 var(--space-7); position: relative; overflow: hidden; } .hero-inner { position: relative; display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--space-6); align-items: center; z-index: 1; } .hero-text { min-width: 0; } .hero-eyebrow { margin-bottom: var(--space-3); } .hero h1 { margin-bottom: var(--space-4); max-width: 18ch; font-size: clamp(44px, 6.6vw, 92px); letter-spacing: -0.028em; line-height: 1.02; font-weight: 800; } .hero h1 .amber, .hero h1 .accent { color: var(--orange); } .hero h1 .navy { color: var(--navy); } .hero-subhead { font-size: clamp(20px, 2vw, 28px); line-height: 1.4; color: var(--text); max-width: 36ch; margin-bottom: var(--space-4); letter-spacing: -0.012em; font-weight: 500; } .hero-tagline { font-size: 16px; color: var(--text-muted); margin-bottom: var(--space-5); max-width: 44ch; font-style: italic; line-height: 1.55; } .hero-image { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/5; background: var(--surface); border: 1px solid var(--rule); box-shadow: var(--shadow-lg); } .hero-image::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6); pointer-events: none; } .hero-image svg, .hero-image img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 900px) { .hero-inner { grid-template-columns: 1fr; gap: var(--space-4); } .hero-text { order: 1; } .hero-image { order: 2; aspect-ratio: 4/3; max-width: 460px; margin: var(--space-3) auto 0; } .hero h1 { font-size: clamp(40px, 9vw, 60px); max-width: 18ch; } } @media (max-width: 500px) { .hero-image { aspect-ratio: 5/4; max-width: 100%; } } /* Slim hero for inner pages */ .hero.slim { padding: var(--space-6) 0 var(--space-5); } .hero.slim .hero-inner { grid-template-columns: 1fr; } .hero.slim h1 { font-size: clamp(36px, 5vw, 64px); max-width: 22ch; } .hero.slim .hero-subhead { font-size: clamp(18px, 1.6vw, 22px); margin-bottom: var(--space-3); max-width: 50ch; } /* ── DARK-SUN HERO (homepage) ────────────────────────── Particle wave canvas behind centred text. The CSS gradient is a fallback (paints instantly) and a depth backdrop that holds even when the canvas is mid-boot. Canvas script lives inline at the bottom of index.html. */ .hero.dark-sun { background: radial-gradient(ellipse 75% 90% at 12% 105%, rgba(40, 50, 140, 0.55) 0%, rgba(20, 25, 80, 0.30) 28%, rgba(2, 2, 10, 0) 65%), #02020A; min-height: 86vh; padding: 0; display: flex; align-items: center; color: #fff; overflow: hidden; } .hero.dark-sun .hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; pointer-events: none; } .hero.dark-sun .hero-vignette { position: absolute; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(2,2,10,0.45) 0%, rgba(2,2,10,0) 75%), linear-gradient(180deg, rgba(2,2,10,0.35) 0%, rgba(2,2,10,0) 26%, rgba(2,2,10,0) 68%, rgba(2,2,10,0.92) 100%); } .hero.dark-sun .hero-inner { /* flex-item shrinks to content by default; force full width so the centred text actually sits in the middle of the viewport, not the middle of its own content box */ display: block; width: 100%; text-align: center; z-index: 2; padding: var(--space-7) 0; } .hero.dark-sun .hero-text { /* On mobile we want readable column width (40-ish ch). On desktop we widen so the h1 can render in two natural lines ("A live business." / "In one day.") instead of wrapping to three. The subhead/tagline keep their own narrower max-widths below for readability. */ max-width: 42ch; margin: 0 auto; } @media (min-width: 900px) { .hero.dark-sun .hero-text { max-width: 780px; } } .hero.dark-sun .hero-eyebrow { color: var(--yellow); } .hero.dark-sun h1 { color: #fff; margin-left: auto; margin-right: auto; max-width: 18ch; } .hero.dark-sun h1 .spark { color: #fff; } .hero.dark-sun .spark::before { opacity: 0.85; } .hero.dark-sun .hero-subhead { color: rgba(255, 255, 255, 0.88); max-width: 44ch; margin-left: auto; margin-right: auto; } .hero.dark-sun .hero-tagline { color: rgba(255, 255, 255, 0.55); max-width: 48ch; margin-left: auto; margin-right: auto; font-style: italic; } .hero.dark-sun .btn { box-shadow: 0 4px 24px rgba(255, 145, 77, 0.45); } .hero.dark-sun .btn-subline { color: rgba(255, 255, 255, 0.65); } @media (max-width: 900px) { .hero.dark-sun { min-height: 90vh; } .hero.dark-sun .hero-inner { padding: var(--space-6) 0; } } /* ── SECTION HEADERS ───────────────────────────────── */ .section-head { margin-bottom: var(--space-5); max-width: 720px; } .section-head .eyebrow { margin-bottom: var(--space-2); } .section-head h2 { margin-bottom: var(--space-3); } .section-head .lead { color: var(--text-muted); } /* ── PROBLEM SECTION ───────────────────────────────── */ .problem { background: var(--surface); padding: var(--space-7) 0; } .problem-grid { display: grid; grid-template-columns: 0.9fr 1fr 1.4fr; gap: var(--space-5); align-items: center; } .problem-illus { max-width: 320px; width: 100%; } .problem-illus img { width: 100%; height: auto; display: block; mix-blend-mode: multiply; } .problem h2 { max-width: 14ch; } .problem-body p { font-size: 19px; line-height: 1.7; margin-bottom: var(--space-3); color: var(--text); } .problem-body p:last-child { color: var(--text-muted); font-style: italic; } @media (max-width: 900px) { .problem-grid { grid-template-columns: 1fr; gap: var(--space-4); } .problem-illus { max-width: 220px; } } /* ── DELIVERABLES GRID ─────────────────────────────── */ .deliverables-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-2); margin-bottom: var(--space-5); } .deliverable { background: var(--canvas); border: 1px solid var(--rule); padding: var(--space-4); border-radius: var(--radius); transition: border-color .15s, box-shadow .15s, transform .15s; } .deliverable:hover { border-color: var(--orange); box-shadow: var(--shadow-md); transform: translateY(-2px); } .deliverable-num { font-size: 12px; letter-spacing: 0.22em; color: var(--orange); font-weight: 700; margin-bottom: var(--space-2); } .deliverable h3 { font-size: 19px; margin-bottom: 6px; } .deliverable p { font-size: 15px; color: var(--text-muted); line-height: 1.55; } .deliverable.highlight { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%); border-color: var(--navy); color: #fff; } .deliverable.highlight h3 { color: #fff; } .deliverable.highlight p { color: rgba(255,255,255,0.78); } .deliverable.highlight .deliverable-num { color: var(--yellow); } .grow-card { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%); color: #fff; padding: var(--space-5); border-radius: var(--radius); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-4); box-shadow: var(--shadow-navy); } .grow-card .deliverable-num { color: var(--lime); } .grow-card h3 { color: #fff; margin-bottom: 4px; } .grow-card p { color: rgba(255,255,255,0.82); font-size: 15px; max-width: 60ch; } .grow-card .btn.secondary { color: #fff; border-color: rgba(255,255,255,0.6); background: transparent; white-space: nowrap; } .grow-card .btn.secondary:hover { background: #fff; color: var(--navy); border-color: #fff; } @media (max-width: 800px) { .grow-card { grid-template-columns: 1fr; } } .deliverables-closer { margin-top: var(--space-5); font-size: 17px; color: var(--text-muted); font-style: italic; text-align: center; } /* ── AI-VISIBLE CALLOUT ────────────────────────────── */ .ai-callout { background: var(--surface); padding: var(--space-5); border-radius: var(--radius); margin: var(--space-5) 0; position: relative; overflow: hidden; } .ai-callout::before { content: ""; position: absolute; top: 0; left: 0; width: 64px; height: 4px; background: var(--lime); border-radius: var(--radius) 0 var(--radius) 0; } .ai-callout .eyebrow { color: var(--lime-deep); margin-bottom: var(--space-2); } .ai-callout h3 { font-size: clamp(22px, 2.4vw, 30px); margin-bottom: var(--space-3); max-width: 28ch; } .ai-callout p { font-size: 17px; line-height: 1.65; color: var(--text); margin-bottom: var(--space-2); max-width: 70ch; } .ai-callout p:last-of-type { margin-bottom: 0; } .ai-callout em { font-style: italic; color: var(--text-muted); } /* ── HOW IT WORKS (home 3-col) ─────────────────────── */ .how { background: var(--navy); color: #fff; padding: var(--space-7) 0; } .how h2 { color: #fff; } .how .eyebrow { color: var(--yellow); } .how-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-top: var(--space-5); } .how-step { position: relative; padding-top: var(--space-3); border-top: 2px solid var(--orange); } .how-step .step-num { font-size: 14px; letter-spacing: 0.22em; color: var(--orange); font-weight: 700; margin-bottom: var(--space-3); } .how-step-icon { width: 72px; height: 72px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius); margin-bottom: var(--space-3); display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 800; letter-spacing: -0.04em; color: var(--yellow); } .how-step-icon img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 12px; } .how-step h3 { font-size: 22px; color: #fff; margin-bottom: var(--space-2); } .how-step p { font-size: 16px; color: rgba(255,255,255,0.78); line-height: 1.6; } @media (max-width: 800px) { .how-steps { grid-template-columns: 1fr; } } .how-link { margin-top: var(--space-5); display: inline-block; color: var(--yellow); font-weight: 500; border-bottom: 1px solid var(--yellow); padding-bottom: 2px; } .how-link:hover { color: #fff; border-color: #fff; } /* ── PROOF CARD ────────────────────────────────────── */ .proof-card { background: var(--canvas); border: 1px solid var(--rule); padding: var(--space-6); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: center; border-radius: var(--radius); box-shadow: var(--shadow-md); } .proof-image { background: var(--surface); aspect-ratio: 4/3; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-style: italic; font-size: 14px; } .proof-quote { font-size: 22px; line-height: 1.45; color: var(--navy); letter-spacing: -0.012em; margin-bottom: var(--space-3); } .proof-meta { font-size: 14px; color: var(--text-muted); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: var(--space-4); } .proof-link { color: var(--orange); font-weight: 600; border-bottom: 1px solid var(--orange); padding-bottom: 2px; font-size: 15px; } .proof-link:hover { color: var(--navy); border-color: var(--navy); } @media (max-width: 800px) { .proof-card { grid-template-columns: 1fr; padding: var(--space-4); } } /* ── PRICING ───────────────────────────────────────── */ .pricing { background: var(--surface); } .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-top: var(--space-5); align-items: stretch; } .price-card { background: var(--canvas); border: 1px solid var(--rule); padding: var(--space-5); border-radius: var(--radius); display: flex; flex-direction: column; } .price-card.featured { background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%); color: #fff; border-color: var(--navy); transform: translateY(-12px); box-shadow: var(--shadow-navy); } .price-card .tier-name { font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; color: var(--text-muted); margin-bottom: var(--space-2); } .price-card.featured .tier-name { color: var(--yellow); } .price-card .tier-tag { display: inline-block; background: var(--orange); color: var(--btn-ink); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; padding: 5px 12px; border-radius: 999px; margin-bottom: var(--space-2); } .price-card h3 { font-size: 22px; margin-bottom: var(--space-2); color: var(--navy); } .price-card.featured h3 { color: #fff; } .price-card .price-line { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: var(--space-1); color: var(--navy); display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .price-card.featured .price-line { color: #fff; } .price-card .price-line .price-suffix { font-size: 14px; font-weight: 500; color: var(--text-muted); letter-spacing: 0; } .price-card.featured .price-line .price-suffix { color: rgba(255,255,255,0.7); } .price-card .price-strike { font-size: 22px; font-weight: 500; color: var(--text-muted); text-decoration: line-through; text-decoration-thickness: 1.5px; text-decoration-color: var(--orange); } .price-card.featured .price-strike { color: rgba(255,255,255,0.55); text-decoration-color: var(--orange); } .price-card .price-or { font-size: 14px; color: var(--text-muted); margin-bottom: var(--space-4); } .price-card.featured .price-or { color: rgba(255,255,255,0.72); } .price-card .price-or .strike-mo { text-decoration: line-through; text-decoration-color: var(--orange); margin-right: 4px; } .price-card .intro-flag { display: inline-block; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--orange); margin-bottom: 6px; } .price-card.featured .intro-flag { color: var(--yellow); } .price-card .desc { font-size: 16px; color: var(--text); margin-bottom: var(--space-4); line-height: 1.5; } .price-card.featured .desc { color: rgba(255,255,255,0.85); } .price-card ul { list-style: none; margin-bottom: var(--space-5); flex-grow: 1; } .price-card li { font-size: 15px; padding: 6px 0 6px 24px; position: relative; color: var(--text); line-height: 1.5; } .price-card.featured li { color: rgba(255,255,255,0.92); } .price-card li::before { content: ""; position: absolute; left: 0; top: 12px; width: 14px; height: 9px; border-left: 2px solid var(--lime); border-bottom: 2px solid var(--lime); transform: rotate(-45deg); } .price-card .btn { width: 100%; justify-content: center; } .price-card.featured .btn { background: var(--orange); box-shadow: none; } .price-card.featured .btn:hover { background: #fff; color: var(--navy); } .pricing-fineprint { margin-top: var(--space-5); font-size: 14px; color: var(--text-muted); font-style: italic; max-width: 70ch; } .pricing-fineprint a { color: var(--orange); border-bottom: 1px solid var(--orange); font-weight: 600; } @media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; } .price-card.featured { transform: none; } } /* ── MONTHLY (home + pricing) ──────────────────────── */ .monthly-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-5); } .monthly-card { padding: var(--space-5); border-radius: var(--radius); border: 1px solid var(--rule); background: var(--canvas); } .monthly-card.grow { background: linear-gradient(135deg, var(--lime) 0%, var(--lime-deep) 100%); color: var(--navy); border-color: var(--lime-deep); } .monthly-card.grow h3 { color: var(--navy); } .monthly-card.grow p { color: rgba(0, 0, 80, 0.78); } .monthly-card .tier-name { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; margin-bottom: var(--space-2); } .monthly-card.grow .tier-name { color: rgba(0, 0, 80, 0.72); } .monthly-card h3 { font-size: 24px; margin-bottom: var(--space-2); } .monthly-card p { font-size: 16px; line-height: 1.6; color: var(--text-muted); } .monthly-card .m-price { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; color: var(--navy); margin: var(--space-2) 0 var(--space-3); line-height: 1.1; } .monthly-card.grow .m-price { color: var(--navy); } .monthly-card .m-price .m-suffix { font-size: 14px; font-weight: 500; color: var(--text-muted); margin-left: 4px; letter-spacing: 0; } .monthly-card.grow .m-price .m-suffix { color: rgba(0, 0, 80, 0.65); } @media (max-width: 800px) { .monthly-grid { grid-template-columns: 1fr; } } /* ── TRUST STRIP ───────────────────────────────────── */ .trust { padding: var(--space-6) 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--canvas); } .trust-grid { display: grid; grid-template-columns: 1fr 1.5fr 1fr; gap: var(--space-5); align-items: center; } .trust-item .label { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--orange); margin-bottom: var(--space-1); font-weight: 700; } .trust-item .value { font-size: 16px; color: var(--navy); line-height: 1.5; font-weight: 500; } .trust-quote { font-style: italic; color: var(--navy); font-size: 18px; line-height: 1.5; } .trust-quote-attr { display: block; font-style: normal; font-size: 13px; color: var(--text-muted); margin-top: var(--space-2); letter-spacing: 0.04em; } @media (max-width: 800px) { .trust-grid { grid-template-columns: 1fr; } } /* ── FINAL CTA ─────────────────────────────────────── */ .final-cta { text-align: center; padding: var(--space-8) 0; background: var(--navy); color: #fff; position: relative; overflow: hidden; } .final-cta .sunrise-arc { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(720px, 90%); height: 200px; pointer-events: none; opacity: 0.55; } .final-cta .container { position: relative; z-index: 1; } .final-cta h2 { color: #fff; margin-bottom: var(--space-4); max-width: 22ch; margin-left: auto; margin-right: auto; } .final-cta h2 .amber, .final-cta h2 .accent { color: var(--orange); } .final-cta .btn { background: var(--orange); } .final-cta .btn:hover { background: #fff; color: var(--navy); } .final-cta .btn-subline { color: rgba(255,255,255,0.75); font-style: normal; } .final-cta .problem-led { font-size: 17px; color: var(--yellow); font-weight: 500; margin-bottom: var(--space-3); letter-spacing: 0.01em; } /* ── FOOTER ────────────────────────────────────────── */ footer { background: var(--canvas); padding: var(--space-6) 0 var(--space-4); font-size: 14px; color: var(--text-muted); border-top: 1px solid var(--rule); } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: var(--space-5); margin-bottom: var(--space-5); } .footer-col h4 { font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--orange); margin-bottom: var(--space-3); font-weight: 700; } .footer-col ul { list-style: none; } .footer-col li { margin-bottom: 8px; } .footer-col a { color: var(--text-muted); transition: color .15s; } .footer-col a:hover { color: var(--navy); } .footer-blurb { margin-top: 14px; font-size: 14px; color: var(--text-muted); max-width: 34ch; line-height: 1.55; } .footer-tagline { margin-top: var(--space-3); font-style: italic; color: var(--text-muted); } .footer-disclosure { padding-top: var(--space-4); border-top: 1px solid var(--rule); font-size: 12px; line-height: 1.7; color: var(--text-muted); } .footer-disclosure strong { color: var(--navy); font-weight: 700; } .footer-disclosure a { color: var(--orange); } @media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 500px) { .footer-grid { grid-template-columns: 1fr; } } /* ── DRAFT BANNER ──────────────────────────────────── */ .draft-banner { background: var(--yellow); color: var(--navy); text-align: center; padding: 8px var(--pad-x); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; } /* ── SCARCITY STRIP ────────────────────────────────── */ .scarcity-strip { background: var(--navy); color: #fff; text-align: center; padding: 11px var(--pad-x); font-size: 14px; font-weight: 500; line-height: 1.5; border-bottom: 1px solid var(--orange); } .scarcity-strip strong { color: var(--yellow); font-weight: 700; letter-spacing: 0.08em; } .scarcity-strip .sep { margin: 0 10px; opacity: 0.5; } .scarcity-strip a { color: #fff; border-bottom: 1px solid var(--orange); font-weight: 600; margin-left: 14px; padding-bottom: 1px; white-space: nowrap; transition: color .15s, border-color .15s; } .scarcity-strip a:hover { color: var(--yellow); border-color: var(--yellow); } @media (max-width: 600px) { .scarcity-strip { font-size: 12px; padding: 9px 16px; letter-spacing: 0; } .scarcity-strip .sep { margin: 0 6px; } .scarcity-strip a { margin-left: 8px; display: inline-block; } } /* ========================================================= INNER-PAGE COMPONENTS ========================================================= */ /* ── PROSE BODY ────────────────────────────────────── */ .prose { max-width: 70ch; } .prose p { margin-bottom: var(--space-3); font-size: 18px; line-height: 1.65; } .prose p:last-child { margin-bottom: 0; } .prose strong { color: var(--navy); font-weight: 700; } .prose em { font-style: italic; color: var(--text-muted); } .prose a { color: var(--orange); border-bottom: 1px solid var(--orange); font-weight: 500; } .prose a:hover { color: var(--navy); border-color: var(--navy); } .prose ul, .prose ol { margin: var(--space-3) 0; padding-left: 24px; } .prose li { margin-bottom: 8px; line-height: 1.6; } .prose blockquote { border-left: 2px solid var(--orange); padding-left: var(--space-3); font-size: 19px; color: var(--navy); font-style: italic; margin: var(--space-4) 0; } .callout { background: var(--surface); padding: var(--space-3) var(--space-4); border-radius: var(--radius); margin: var(--space-4) 0; font-style: italic; font-size: 17px; color: var(--navy); position: relative; overflow: hidden; } .callout::before { content: ""; position: absolute; top: 0; left: 0; width: 48px; height: 3px; background: var(--orange); border-radius: var(--radius) 0 var(--radius) 0; } .callout strong { font-style: normal; color: var(--navy); } /* ── NUMBERED VERTICAL STEPS ──────────────────────── */ .steps-vert { display: flex; flex-direction: column; gap: var(--space-5); counter-reset: step; } .step-vert { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: start; padding: var(--space-4) 0; border-top: 1px solid var(--rule); } .step-vert:first-child { border-top: 0; padding-top: 0; } .step-vert .step-mark { font-size: 13px; letter-spacing: 0.22em; color: var(--orange); font-weight: 700; text-transform: uppercase; white-space: nowrap; padding-top: 6px; min-width: 80px; } .step-vert h3 { margin-bottom: var(--space-2); font-size: 26px; } .step-vert p { font-size: 18px; line-height: 1.6; color: var(--text); margin-bottom: var(--space-2); } .step-vert .step-aside { font-size: 15px; color: var(--text-muted); font-style: italic; margin-top: var(--space-2); } @media (max-width: 700px) { .step-vert { grid-template-columns: 1fr; gap: var(--space-2); } } /* ── 2-COL TEXT BLOCKS (path A / path B) ───────────── */ .path-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin-top: var(--space-5); } .path-card { background: var(--canvas); border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--space-5); box-shadow: var(--shadow-sm); } .path-card.alt { background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%); color: #fff; border-color: var(--navy); box-shadow: var(--shadow-navy); } .path-card.alt h3, .path-card.alt h2 { color: #fff; } .path-card.alt p, .path-card.alt li { color: rgba(255,255,255,0.85); } .path-card .path-tag { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; color: var(--orange); margin-bottom: var(--space-2); } .path-card.alt .path-tag { color: var(--yellow); } .path-card h3 { font-size: 26px; margin-bottom: var(--space-3); } .path-card .path-need { display: grid; grid-template-columns: auto 1fr; gap: 12px var(--space-2); margin-bottom: var(--space-3); font-size: 16px; } .path-card .path-need dt { color: var(--text-muted); font-weight: 700; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; padding-top: 2px; } .path-card.alt .path-need dt { color: rgba(255,255,255,0.7); } .path-card .path-need dd { color: var(--navy); } .path-card.alt .path-need dd { color: #fff; } .path-card p { font-size: 16px; line-height: 1.6; margin-bottom: var(--space-3); } .path-card ul { list-style: none; margin: var(--space-3) 0; } .path-card li { font-size: 15px; padding: 4px 0 4px 22px; position: relative; line-height: 1.5; } .path-card li::before { content: "—"; position: absolute; left: 0; color: var(--orange); } .path-card.alt li::before { color: var(--yellow); } .path-card h4 { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; color: var(--text-muted); margin-top: var(--space-3); margin-bottom: var(--space-2); } .path-card.alt h4 { color: rgba(255,255,255,0.7); } .path-card .btn { margin-top: var(--space-3); } @media (max-width: 800px) { .path-grid { grid-template-columns: 1fr; } } /* ── COMPARISON TABLE ──────────────────────────────── */ .compare-table { width: 100%; border-collapse: collapse; margin-top: var(--space-4); font-size: 15px; } .compare-table th, .compare-table td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--rule); vertical-align: middle; } .compare-table th { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--text); background: var(--surface); border-bottom: 2px solid var(--rule-strong); } .compare-table th.highlight { color: var(--orange); } .compare-table td:first-child { font-weight: 500; color: var(--text); } .compare-table td.tick { color: var(--lime); font-weight: 800; text-align: center; font-size: 18px; } .compare-table td.dash { color: var(--text-soft); text-align: center; } .compare-table td.center { text-align: center; } .compare-table tr:hover { background: var(--surface); } .compare-table-wrap { overflow-x: auto; } /* ── FAQ ───────────────────────────────────────────── */ .faq-group { margin-bottom: var(--space-6); } .faq-group-head { font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--orange); font-weight: 700; margin-bottom: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--rule); } .faq-item { border-bottom: 1px solid var(--rule); padding: var(--space-3) 0; } .faq-item:last-child { border-bottom: 0; } .faq-q { font-size: 19px; font-weight: 600; color: var(--navy); margin-bottom: var(--space-2); letter-spacing: -0.012em; cursor: pointer; list-style: none; display: flex; align-items: flex-start; gap: var(--space-2); line-height: 1.4; } .faq-q::-webkit-details-marker { display: none; } .faq-q::before { content: "+"; color: var(--orange); font-weight: 400; font-size: 24px; line-height: 1; flex-shrink: 0; margin-top: -2px; transition: transform .15s; } details[open] .faq-q::before { content: "−"; } .faq-a { font-size: 17px; line-height: 1.6; color: var(--text); padding: var(--space-2) 0 var(--space-2) 28px; max-width: 70ch; } .faq-a p { margin-bottom: var(--space-2); } .faq-a p:last-child { margin-bottom: 0; } .faq-a a { color: var(--orange); border-bottom: 1px solid var(--orange); font-weight: 500; } /* ── FORMS ─────────────────────────────────────────── */ .form-card { background: var(--canvas); border: 1px solid var(--rule); padding: var(--space-5); border-radius: var(--radius); max-width: 640px; box-shadow: var(--shadow-sm); } .form-row { margin-bottom: var(--space-3); } .form-row label { display: block; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 700; color: var(--navy); margin-bottom: 6px; } .form-row input, .form-row select, .form-row textarea { width: 100%; font-family: inherit; font-size: 16px; padding: 12px 14px; border: 1.5px solid var(--rule); border-radius: var(--radius); background: #fff; color: var(--navy); transition: border-color .15s, box-shadow .15s; } .form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255, 145, 77, 0.18); } .form-row .help { font-size: 13px; color: var(--text-muted); margin-top: 4px; font-style: italic; } .form-row .radio-group { display: flex; gap: var(--space-3); margin-top: 6px; } .form-row .radio-group label { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--navy); cursor: pointer; } .form-placeholder { background: var(--surface); border: 1px dashed var(--rule); padding: var(--space-4); border-radius: var(--radius); text-align: center; color: var(--text-muted); font-style: italic; font-size: 15px; } /* ── NOTE BLOCKS ───────────────────────────────────── */ .note-block { background: var(--surface); padding: var(--space-5); border-radius: var(--radius); margin-top: var(--space-4); position: relative; overflow: hidden; } .note-block::before { content: ""; position: absolute; top: 0; left: 0; width: 64px; height: 3px; background: var(--lime); border-radius: var(--radius) 0 var(--radius) 0; } .note-block h3 { font-size: 22px; margin-bottom: var(--space-2); } .note-block p { font-size: 16px; line-height: 1.6; color: var(--text); margin-bottom: var(--space-2); } .note-block p:last-child { margin-bottom: 0; } /* ── EXAMPLE/CASE-STUDY CARDS ──────────────────────── */ .case-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); margin-top: var(--space-5); } .case-card { background: var(--canvas); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); transition: transform .15s, box-shadow .15s; } .case-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } .case-card-image { background: var(--surface); aspect-ratio: 16/10; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-style: italic; font-size: 14px; } .case-card-body { padding: var(--space-4); display: flex; flex-direction: column; flex-grow: 1; } .case-card-meta { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--orange); font-weight: 700; margin-bottom: var(--space-2); } .case-card h3 { font-size: 22px; margin-bottom: var(--space-2); } .case-card p { font-size: 15px; color: var(--text-muted); line-height: 1.55; margin-bottom: var(--space-3); flex-grow: 1; } .case-card .case-link { color: var(--orange); border-bottom: 1px solid var(--orange); font-size: 14px; font-weight: 600; align-self: flex-start; } .case-card-image > img { width: 100%; height: 100%; object-fit: cover; display: block; } .case-card .case-soon { font-size: 14px; font-weight: 600; color: var(--text-soft); align-self: flex-start; } @media (max-width: 800px) { .case-grid { grid-template-columns: 1fr; } } /* ── CHECKLIST PHASE BLOCKS ────────────────────────── */ .phase { margin-bottom: var(--space-7); } .phase-head { display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-3); padding-bottom: var(--space-2); border-bottom: 2px solid var(--navy); } .phase-tag { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--orange); font-weight: 700; white-space: nowrap; } .phase h2 { font-size: clamp(28px, 3vw, 40px); margin: 0; } .phase-sub { font-size: 17px; color: var(--text-muted); margin-bottom: var(--space-4); font-style: italic; } .phase-item { margin-bottom: var(--space-4); } .phase-item h3 { font-size: 22px; margin-bottom: var(--space-2); } .phase-item .phase-context { font-size: 16px; color: var(--text); margin-bottom: var(--space-3); line-height: 1.6; } .phase-options { list-style: none; margin: 0; padding: 0; } .phase-options li { padding: 10px 0 10px 22px; position: relative; font-size: 16px; line-height: 1.55; border-bottom: 1px dashed var(--rule); } .phase-options li:last-child { border-bottom: 0; } .phase-options li::before { content: "—"; position: absolute; left: 0; top: 10px; color: var(--orange); } .phase-options strong { color: var(--navy); } .phase-options .affiliate { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lime-deep); font-weight: 700; margin-left: 6px; } .phase-meta { font-size: 14px; color: var(--text-muted); font-style: italic; margin-top: var(--space-2); } /* ── LEGAL ─────────────────────────────────────────── */ .legal-section { padding: var(--space-5) 0; border-bottom: 1px solid var(--rule); } .legal-section:last-child { border-bottom: 0; } .legal-section h2 { font-size: 28px; margin-bottom: var(--space-3); } .legal-section h3 { font-size: 18px; margin-top: var(--space-3); margin-bottom: var(--space-2); } .legal-section p, .legal-section li { font-size: 16px; line-height: 1.65; } .legal-section p { margin-bottom: var(--space-2); } .legal-section ul { padding-left: 24px; margin-bottom: var(--space-3); } .legal-section li { margin-bottom: 6px; } /* ── BOOK PAGE TIER SELECTOR ───────────────────────── */ .tier-mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-top: var(--space-5); } .tier-mini { background: var(--canvas); border: 1px solid var(--rule); padding: var(--space-4); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .tier-mini.featured { border-color: var(--orange); border-width: 2px; box-shadow: var(--shadow-md); } .tier-mini .tier-mini-name { font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; margin-bottom: 6px; } .tier-mini.featured .tier-mini-name { color: var(--orange); } .tier-mini h3 { font-size: 20px; margin-bottom: var(--space-2); } .tier-mini .tier-mini-price { font-size: 18px; color: var(--navy); font-weight: 800; margin-bottom: var(--space-3); } .tier-mini p { font-size: 14px; color: var(--text-muted); line-height: 1.5; margin-bottom: var(--space-3); } @media (max-width: 800px) { .tier-mini-grid { grid-template-columns: 1fr; } } /* ── SCARCITY / NEXT-SLOT NOTE ─────────────────────── */ .scarcity { background: var(--surface); padding: var(--space-4) var(--space-5); border-radius: var(--radius); margin: var(--space-4) 0; font-size: 15px; color: var(--navy); font-style: italic; position: relative; overflow: hidden; } .scarcity::before { content: ""; position: absolute; top: 0; left: 0; width: 56px; height: 3px; background: var(--orange); border-radius: var(--radius) 0 var(--radius) 0; } .scarcity strong { color: var(--orange); font-style: normal; font-weight: 700; } /* ── FIVE EMPLOYEES (home + what-you-get) ──────────── */ /* No card-shapes. Numbered rows separated by rule lines — a deliberate counter-rhythm to the deliverables/pricing grids. */ .employees { background: var(--surface); padding: var(--space-7) 0; } .employees-list { margin-top: var(--space-5); border-top: 1px solid var(--rule); } .employee { display: grid; grid-template-columns: 64px 1fr auto; align-items: baseline; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--rule); } .employee-num { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; color: var(--navy); line-height: 1; font-variant-numeric: tabular-nums; } .employee-body h3 { font-size: 22px; margin-bottom: 6px; letter-spacing: -0.015em; } .employee-body p { font-size: 16px; color: var(--text-muted); line-height: 1.55; max-width: 62ch; } .employee-plan { display: inline-flex; align-items: center; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; } .employee-plan.live { background: rgba(255, 255, 255, 0.06); color: var(--text); border: 1px solid var(--rule); } .employee-plan.grow { background: var(--lime); color: var(--navy); } @media (max-width: 700px) { .employee { grid-template-columns: 48px 1fr; gap: var(--space-3); } .employee-num { font-size: 22px; } .employee-plan { grid-column: 2; justify-self: start; margin-top: var(--space-1); } } /* ========================================================= DARK-MODE COMPONENT REFRESH — May 2026 Sits at the bottom of the cascade so it overrides the older light-default component rules without rewriting them. When the light-mode toggle ships, these rules will be guarded by :root:not([data-theme="light"]). Until then, dark is the default — and the only — mode. Aesthetic references: Linear (soft ambient glow on dark, gradient borders), Vercel (geometric grids, monochrome with single accent moments), Resend (glass cards), PostHog (bento), Stripe (dark hero into light, narrative scroll), Anthropic (warm dark, type-led). ========================================================= */ /* ── BODY: ATMOSPHERE ──────────────────────────────── */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; /* Two faint warm glows in opposing corners — gives the page depth no matter where you scroll. The dark-sun hero adds its own glow on top during the hero section. */ background: radial-gradient(ellipse 700px 500px at 10% 100%, rgba(58, 74, 200, 0.06) 0%, transparent 70%), radial-gradient(ellipse 800px 600px at 90% 0%, rgba(255, 145, 77, 0.04) 0%, transparent 70%); } /* ── NAV: dark glass ──────────────────────────────── */ .nav { background: rgba(6, 6, 12, 0.78); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--rule); } .brand, .brand-word { color: var(--text); } .nav-links a { color: var(--text-muted); } .nav-links a:hover, .nav-links a.active { color: var(--text); } .nav-cta { box-shadow: var(--shadow-orange); } .nav-cta:hover { box-shadow: 0 12px 32px rgba(255, 145, 77, 0.50); } .nav-toggle > summary { color: var(--text); } .nav-toggle > summary:hover { background: var(--surface-2); } .nav-drawer { background: var(--surface-2); border: 1px solid var(--rule); backdrop-filter: blur(20px); } .nav-drawer a { color: var(--text-muted); } .nav-drawer a:hover, .nav-drawer a.active { background: var(--surface-3); color: var(--text); } /* ── BUTTON: with orange glow ─────────────────────── */ .btn { box-shadow: var(--shadow-orange); } .btn:hover { box-shadow: 0 12px 36px rgba(255, 145, 77, 0.55), 0 4px 12px rgba(255, 145, 77, 0.30); } .btn.secondary { background: rgba(255, 255, 255, 0.04); color: var(--text); border: 1px solid var(--rule-strong); box-shadow: none; backdrop-filter: blur(8px); } .btn.secondary:hover { background: rgba(255, 255, 255, 0.10); border-color: var(--rule-bright); color: var(--text); } /* ── SECTIONS: soft fade transitions ──────────────── */ section, .section, .problem, .pricing, .trust, .employees, .how, .final-cta { position: relative; } /* Each section that isn't the hero gets a faint glow seam at its top. Creates a gentle "light from above" effect instead of hard section cuts. */ .problem::before, .section.alt::before, .section.dark::before, .pricing::before, .trust::before, .employees::before, .how::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 240px; pointer-events: none; background: radial-gradient(ellipse 80% 240px at 50% 0%, rgba(58, 74, 200, 0.10) 0%, transparent 80%); z-index: 0; } .problem > .container, .section.alt > .container, .pricing > .container, .trust > .container, .employees > .container, .how > .container { position: relative; z-index: 1; } .section.alt { background: var(--surface); } .section.dark { background: var(--navy); color: #fff; } /* ── SECTION HEAD POLISH ─────────────────────────── */ .section-head h2 { color: var(--text); margin-bottom: var(--space-3); } .section-head .lead { color: var(--text-muted); } /* ── PROBLEM: glass cards with subtle borders ──────── */ .problem { background: var(--surface); padding: var(--space-8) 0; } .problem-grid { /* drop the 3-col split — flow into a 2-col where prose carries the weight */ grid-template-columns: 1fr 1.4fr; } .problem-illus { display: none; } /* old illustration retired; the dark-sun hero already sets the mood */ .problem h2 { color: var(--text); max-width: 16ch; } .problem h2 .accent { color: var(--orange); } .problem-body p { color: var(--text); } .problem-body p:last-child { color: var(--text-muted); } @media (max-width: 900px) { .problem-grid { grid-template-columns: 1fr; } } /* ── DELIVERABLES: bento grid ─────────────────────── */ .deliverables-grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(180px, auto); gap: var(--space-2); } .deliverable { /* glass card with subtle inner highlight, like Linear/Resend */ background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: var(--space-4); color: var(--text); position: relative; overflow: hidden; grid-column: span 2; display: flex; flex-direction: column; justify-content: flex-end; transition: transform .25s ease, border-color .25s, background .25s; } /* Bento layout — 8 cards across 6 columns: Row 1: Brand (3) + Website (3) Row 2: Email (2) + Social (2) + Strategy (2) Row 3: AI starter (3) + Hosting (3) Row 4: Born AI-visible (6, featured) The eye sweeps wide-narrow-wide-WIDE for rhythm. */ .deliverable:nth-child(1), .deliverable:nth-child(2) { grid-column: span 3; } .deliverable:nth-child(3), .deliverable:nth-child(4), .deliverable:nth-child(5) { grid-column: span 2; } .deliverable:nth-child(6), .deliverable:nth-child(7) { grid-column: span 3; } .deliverable:nth-child(8) { grid-column: span 6; min-height: 220px; } .deliverable:nth-child(8) h3 { font-size: clamp(22px, 2.4vw, 30px); } .deliverable:nth-child(8) p { font-size: 17px; max-width: 70ch; } .deliverable::before { /* subtle gradient halo from the accent corner of the card */ content: ""; position: absolute; top: -40%; right: -20%; width: 70%; height: 70%; background: radial-gradient(circle, rgba(255, 145, 77, 0.10) 0%, transparent 70%); pointer-events: none; transition: opacity .25s; opacity: 0; } .deliverable:hover { transform: translateY(-3px); border-color: var(--rule-bright); background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%); } .deliverable:hover::before { opacity: 1; } .deliverable .deliverable-num { color: var(--orange); margin-bottom: var(--space-2); } .deliverable h3 { font-size: 20px; color: var(--text); margin-bottom: 8px; } .deliverable p { color: var(--text-muted); font-size: 15px; } .deliverable.highlight { /* signature card — gradient border using mask trick (Linear style) */ background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%), radial-gradient(ellipse 100% 60% at 0% 100%, rgba(58, 74, 200, 0.30) 0%, transparent 70%); border-color: rgba(255, 222, 89, 0.30); } .deliverable.highlight::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); padding: 1px; background: var(--gradient-border-cool); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .deliverable.highlight .deliverable-num { color: var(--yellow); } @media (max-width: 900px) { .deliverables-grid { grid-template-columns: repeat(2, 1fr); } .deliverable, .deliverable:nth-child(n) { grid-column: span 1; } } @media (max-width: 600px) { .deliverables-grid { grid-template-columns: 1fr; } } /* ── GROW CARD: keep brand-warm but reframe on dark ── */ .grow-card { background: linear-gradient(135deg, var(--navy-soft) 0%, var(--navy) 50%, var(--navy-deep) 100%); border: 1px solid rgba(255, 222, 89, 0.20); border-radius: var(--radius-lg); box-shadow: var(--shadow-navy); position: relative; overflow: hidden; } .grow-card::before { content: ""; position: absolute; top: 0; right: 0; width: 360px; height: 360px; background: radial-gradient(circle, rgba(255, 222, 89, 0.18) 0%, transparent 60%); pointer-events: none; } .grow-card > * { position: relative; } /* ── AI CALLOUT: dark surface with lime accent stripe ── */ .ai-callout { background: linear-gradient(180deg, rgba(152, 200, 49, 0.06) 0%, rgba(152, 200, 49, 0) 50%), var(--surface-2); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: var(--space-5); } .ai-callout::before { width: 80px; height: 3px; background: var(--lime); border-radius: 2px; } .ai-callout .eyebrow { color: var(--lime); } .ai-callout h3 { color: var(--text); } .ai-callout p { color: var(--text); } .ai-callout em { color: var(--text-muted); } /* ── HOW: refined vertical-feel timeline ──────────── */ .how { background: var(--canvas); padding: var(--space-8) 0; } .how h2 { color: var(--text); } .how .eyebrow { color: var(--orange); } .how-step { border-top: 0; padding-top: 0; background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, transparent 100%); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: var(--space-4); position: relative; overflow: hidden; transition: border-color .25s, transform .25s; } .how-step:hover { border-color: var(--rule-bright); transform: translateY(-2px); } .how-step::before { /* connecting line on desktop — a thin orange thread between steps */ content: ""; position: absolute; top: 40px; right: -28px; width: 28px; height: 1px; background: linear-gradient(90deg, var(--orange) 0%, transparent 100%); } .how-step:last-child::before { display: none; } .how-step .step-num { font-size: 12px; letter-spacing: 0.22em; color: var(--orange); } .how-step-icon { background: rgba(255, 145, 77, 0.10); border: 1px solid rgba(255, 145, 77, 0.25); color: var(--orange); width: 56px; height: 56px; border-radius: 12px; font-size: 22px; } .how-step h3 { color: var(--text); } .how-step p { color: var(--text-muted); } .how-link { color: var(--orange); border-color: var(--orange); } .how-link:hover { color: var(--yellow); border-color: var(--yellow); } @media (max-width: 800px) { .how-step::before { display: none; } } /* ── PROOF: type-led pull quote ───────────────────── */ .proof-card { background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-md); } .proof-image { background: var(--surface-2); border: 1px solid var(--rule); color: var(--text-muted); } .proof-quote { color: var(--text); font-size: clamp(20px, 1.8vw, 26px); } .proof-quote::before { /* big orange opening quote, Linear/Anthropic style */ content: "\201C"; display: block; font-size: 56px; line-height: 0.6; color: var(--orange); margin-bottom: 12px; font-family: Georgia, serif; } .proof-meta { color: var(--text-muted); } .proof-link { color: var(--orange); border-color: var(--orange); } .proof-link:hover { color: var(--yellow); border-color: var(--yellow); } /* ── PRICING: dark premium cards with gradient border on featured ── */ .pricing { background: var(--surface); } .pricing h2 { color: var(--text); } .price-card { background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%); border: 1px solid var(--rule); color: var(--text); border-radius: var(--radius-lg); padding: var(--space-5); position: relative; overflow: hidden; transition: border-color .25s, transform .25s; } .price-card:hover { border-color: var(--rule-bright); } .price-card .tier-name { color: var(--text-muted); } .price-card h3 { color: var(--text); } .price-card .price-line { color: var(--text); } .price-card .price-line .price-suffix { color: var(--text-muted); } .price-card .price-strike { color: var(--text-soft); text-decoration-color: var(--orange); } .price-card .price-or { color: var(--text-muted); } .price-card .desc { color: var(--text); } .price-card li { color: var(--text); } .price-card.featured { /* gradient-border premium card, the headline pricing moment */ background: linear-gradient(180deg, rgba(255, 145, 77, 0.08) 0%, rgba(58, 74, 200, 0.06) 100%), var(--surface-2); border-color: transparent; transform: translateY(-12px); box-shadow: 0 24px 60px rgba(0,0,0,0.50), var(--shadow-orange); } .price-card.featured::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); padding: 1.5px; background: var(--gradient-border-warm); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .price-card.featured > * { position: relative; } .price-card.featured .tier-name { color: var(--yellow); } .price-card.featured h3 { color: var(--text); } .price-card.featured .price-line { color: var(--text); } .price-card.featured .price-line .price-suffix { color: var(--text-muted); } .price-card.featured .price-strike { color: var(--text-soft); } .price-card.featured .price-or { color: var(--text-muted); } .price-card.featured .intro-flag { color: var(--yellow); } .price-card.featured .desc { color: var(--text); } .price-card.featured li { color: var(--text); } .price-card.featured .btn { background: var(--orange); box-shadow: var(--shadow-orange); } .price-card.featured .btn:hover { background: var(--orange-deep); box-shadow: 0 12px 36px rgba(255, 145, 77, 0.60); color: #fff; } .pricing-fineprint { color: var(--text-muted); } .pricing-fineprint a { color: var(--orange); } /* ── MONTHLY: matched dark cards + lime accent ─────── */ .monthly-card { background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%); border: 1px solid var(--rule); border-radius: var(--radius-lg); color: var(--text); } .monthly-card .tier-name { color: var(--text-muted); } .monthly-card h3 { color: var(--text); } .monthly-card p { color: var(--text-muted); } .monthly-card .m-price { color: var(--text); } .monthly-card .m-price .m-suffix { color: var(--text-muted); } .monthly-card.grow { /* keep lime — it's the brand growth signature */ background: linear-gradient(135deg, var(--lime) 0%, var(--lime-deep) 100%); border: 1px solid var(--lime-deep); color: var(--navy); } .monthly-card.grow .tier-name, .monthly-card.grow h3, .monthly-card.grow p, .monthly-card.grow .m-price, .monthly-card.grow .m-price .m-suffix { color: var(--navy); } /* ── TRUST: clean dark strip ──────────────────────── */ .trust { background: var(--canvas); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .trust-item .label { color: var(--orange); } .trust-item .value { color: var(--text); } .trust-quote { color: var(--text); } .trust-quote-attr { color: var(--text-muted); } /* ── FINAL CTA: confident centred dark moment ─────── */ .final-cta { background: radial-gradient(ellipse 80% 100% at 50% 0%, rgba(58, 74, 200, 0.20) 0%, transparent 70%), var(--surface); } .final-cta h2 { color: var(--text); } .final-cta .problem-led { color: var(--yellow); } .final-cta .btn:hover { background: var(--orange-deep); color: #fff; } .final-cta .btn-subline { color: var(--text-muted); } /* ── FOOTER: dark ─────────────────────────────────── */ footer { background: var(--canvas); border-top: 1px solid var(--rule); color: var(--text-muted); } .footer-col h4 { color: var(--orange); } .footer-col a { color: var(--text-muted); } .footer-col a:hover { color: var(--text); } .footer-blurb { color: var(--text-muted); } .footer-tagline { color: var(--text-muted); } .footer-disclosure { border-top: 1px solid var(--rule); color: var(--text-muted); } .footer-disclosure strong { color: var(--text); } .footer-disclosure a { color: var(--orange); } /* ── EMPLOYEES: cleaner dark list ─────────────────── */ .employees { background: var(--surface); } .employees h2 { color: var(--text); } .employees-list { border-top: 1px solid var(--rule); } .employee { border-bottom: 1px solid var(--rule); transition: background .2s; } .employee:hover { background: rgba(255, 255, 255, 0.02); } .employee-num { color: var(--orange); } .employee-body h3 { color: var(--text); } .employee-body p { color: var(--text-muted); } /* ── SCARCITY STRIP: refined dark ─────────────────── */ .scarcity-strip { background: var(--surface-2); border-bottom: 1px solid var(--rule); color: var(--text); } .scarcity-strip strong { color: var(--yellow); } .scarcity-strip a { color: var(--orange); border-bottom-color: var(--orange); } .scarcity-strip a:hover { color: var(--yellow); border-bottom-color: var(--yellow); } /* ── DRAFT BANNER: unchanged (yellow with navy text on a yellow stripe still works) ── */ /* ── HERO BOTTOM FADE: bleed into next section ────── */ /* Soften the hard cut from the dark-sun hero to the section below. The hero already fades its own bottom to near-black via the vignette; we add a matching radial glow at the TOP of the next section so the eye registers a continuous atmosphere rather than a hard edge. */ .hero.dark-sun + section, .hero.dark-sun + header + section, .hero.dark-sun ~ .problem { background: linear-gradient(180deg, #02020A 0%, var(--surface) 35%, var(--surface) 100%); } .hero.dark-sun ~ .problem::before { background: radial-gradient(ellipse 90% 320px at 50% 0%, rgba(58, 74, 200, 0.18) 0%, transparent 70%); height: 320px; } /* ── HERO TYPE POLISH: better letter-spacing on dark ── */ .hero.dark-sun h1 { letter-spacing: -0.034em; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.4); } .hero.dark-sun .hero-subhead { font-weight: 400; letter-spacing: -0.015em; } .hero.dark-sun .hero-tagline { /* Tagline is now a value claim (was a competitive jab). Removed italic, bumped size + brightness so it sits as a confident second beat after the pillars row. */ font-size: clamp(18px, 1.7vw, 22px); font-style: normal; font-weight: 400; letter-spacing: -0.01em; text-transform: none; color: rgba(255, 255, 255, 0.85); line-height: 1.4; max-width: 52ch; } /* ── HERO PILLARS: scannable feature row ── Sits between H1 and tagline. Five items separated by interpuncts. Smaller and quieter than the tagline — these are the chapter list, the tagline is the editorial that follows. */ .hero.dark-sun .hero-pillars { font-size: clamp(15px, 1.3vw, 17px); font-weight: 500; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.72); margin: calc(var(--space-3) * -0.4) auto var(--space-3); max-width: 640px; text-align: center; line-height: 1.7; } .hero.dark-sun .btn { box-shadow: 0 8px 28px rgba(255, 145, 77, 0.45), 0 2px 8px rgba(255, 145, 77, 0.30); } .hero.dark-sun .btn:hover { box-shadow: 0 14px 40px rgba(255, 145, 77, 0.60), 0 4px 14px rgba(255, 145, 77, 0.40); } /* ── HERO SUB-CTA: quiet proof link under the primary CTA ── Sits below .btn-subline as a low-emphasis text link with a nudging arrow on hover. Skeptic-friendly path to /examples that does not compete visually with the primary "Book your day" button. */ .hero.dark-sun .hero-sub-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-3); font-size: 15px; font-weight: 600; letter-spacing: 0.01em; color: rgba(255, 255, 255, 0.75); /* Subtle constant underline so it reads as a tappable link, not just decorative text. Brightens on hover. Universal signal for "this is clickable" without competing with the orange primary CTA. */ padding-bottom: 3px; border-bottom: 1px solid rgba(255, 255, 255, 0.22); transition: color .2s ease, gap .2s ease, border-bottom-color .2s ease; } .hero.dark-sun .hero-sub-cta .arrow { display: inline-block; transition: transform .2s ease; font-weight: 400; } .hero.dark-sun .hero-sub-cta:hover { color: #fff; gap: 10px; border-bottom-color: rgba(255, 255, 255, 0.55); } .hero.dark-sun .hero-sub-cta:hover .arrow { transform: translateX(2px); } .hero.dark-sun .hero-sub-cta:focus-visible { outline: 2px solid var(--yellow); outline-offset: 6px; border-radius: 2px; } /* ── SUNRISE ARC: glow on dark, used in final-cta ─── */ .sunrise-arc.dark { color: var(--yellow); filter: drop-shadow(0 0 16px rgba(255, 222, 89, 0.45)); } /* ── HOW SECTION: subtle navy "stage" backdrop ────── */ /* Replace the canvas bg with a hint of navy + radial glow, so the how-it-works moment feels like a specific feature stage rather than just another section. */ .how { background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(58, 74, 200, 0.18) 0%, transparent 70%), radial-gradient(ellipse 60% 40% at 50% 100%, rgba(255, 145, 77, 0.08) 0%, transparent 70%), var(--surface); } .how::before { display: none; } /* the radials in bg already provide the glow seam */ /* ── PROBLEM SECTION: type drama ──────────────────── */ .problem h2 { font-size: clamp(36px, 5vw, 64px); letter-spacing: -0.030em; line-height: 1.04; margin-bottom: var(--space-4); } .problem-body p { font-size: clamp(18px, 1.4vw, 21px); line-height: 1.7; max-width: 56ch; } .problem-body p:last-child { margin-top: var(--space-3); font-style: italic; } /* ── SECTION HEADERS: more confident type ─────────── */ .section-head { max-width: 760px; } .section-head .eyebrow { color: var(--orange); margin-bottom: var(--space-2); display: inline-block; } .section-head h2 { font-size: clamp(36px, 4.6vw, 58px); margin-bottom: var(--space-3); } .section-head .lead { font-size: clamp(19px, 1.6vw, 23px); color: var(--text-muted); max-width: 60ch; } /* ── FINAL CTA: bigger type, dramatic glow ───────── */ .final-cta { padding: var(--space-8) 0 var(--space-7); } .final-cta h2 { font-size: clamp(40px, 5.6vw, 72px); letter-spacing: -0.032em; } .final-cta .problem-led { font-size: 15px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; } .final-cta .btn { padding: 20px 32px; font-size: 17px; } /* ── BUTTON: better focus ring + slight rise on hover ─ */ .btn:focus-visible { outline: 2px solid var(--yellow); outline-offset: 4px; } /* ── LINKS in body text ───────────────────────────── */ a:hover { color: var(--orange); } /* ── SCROLL POLISH ─────────────────────────────────── */ html { scroll-padding-top: 80px; } /* offset for sticky nav */ /* ── PROCESS STRIP ──────────────────────────────────── Slim 3-step horizontal strip that sits directly above the final CTA. Replaces the dedicated "How it works" section on the home page — the dedicated /how-it-works page used to carry the full version; that page has been retired. Process strip is now the only on-home reminder that this is a 3-step service. */ .process-strip { padding: var(--space-6) 0 var(--space-3); background: transparent; position: relative; } .process-strip .process-list { list-style: none; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--space-3) var(--space-5); margin: 0; padding: 0; } .process-strip .process-list li { display: inline-flex; align-items: center; gap: 12px; color: var(--text); font-size: 15px; font-weight: 500; letter-spacing: -0.005em; } .process-strip .process-list li + li::before { content: ""; display: inline-block; width: 36px; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.25) 50%, transparent 100%); margin-right: 4px; } .process-strip .num { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; color: var(--orange); font-variant-numeric: tabular-nums; } .process-strip .label { color: var(--text-muted); } @media (max-width: 700px) { .process-strip .process-list { flex-direction: column; gap: var(--space-2); } .process-strip .process-list li + li::before { display: none; } } /* ── MONTHLY SUB-HEAD (inside Pricing section) ──────── The Monthly section was merged into Pricing as a second part. This is the small heading that introduces the launch / monthly split. */ .monthly-sub-head { margin: var(--space-6) 0 var(--space-3); text-align: center; } .monthly-sub-head h3 { font-size: clamp(20px, 2vw, 26px); color: var(--text); margin-bottom: var(--space-1); letter-spacing: -0.02em; } .monthly-sub-head p { font-size: 16px; color: var(--text-muted); max-width: 50ch; margin: 0 auto; } /* ════════════════════════════════════════════════════════════ 2026-05-23 REFINEMENTS (appended so they win the cascade) ════════════════════════════════════════════════════════════ */ /* (1) Navy-on-dark legibility. #000080 is a background colour on this theme; as text it disappears on the dark canvas. The dark-mode pass missed these content selectors, so force them to white. Also define the brand light-blue (Trustworthy #38B6FF) for any future blue accents. The Grow card is excluded: it sits on a lime background where navy reads. */ :root { --blue: #38B6FF; } .prose strong, .callout strong, .proof-quote, .trust-quote, .trust-item .value, .path-card .path-need dd, .footer-disclosure strong, .phase-options strong, .tier-mini .tier-mini-price { color: var(--text); } .prose a:hover, .footer-col a:hover, .proof-link:hover { color: var(--orange); border-color: var(--orange); } /* (2) Pricing density: fit the three tiers in roughly one viewport, with the monthly plans sitting close beneath rather than a scroll away. */ .pricing { padding-top: var(--space-6); padding-bottom: var(--space-6); } .pricing .section-head { margin-bottom: 0; } .pricing .section-head h2 { font-size: clamp(28px, 3.2vw, 42px); margin-bottom: 0; } .pricing-grid { margin-top: var(--space-4); gap: var(--space-3); } .price-card { padding: var(--space-4); } .price-card h3 { font-size: 19px; margin-bottom: 6px; } .price-card .price-line { font-size: 27px; margin-bottom: 2px; } .price-card .intro-flag { margin-bottom: 4px; } .price-card .price-or { margin-bottom: var(--space-3); } .price-card .desc { font-size: 15px; margin-bottom: var(--space-3); } .price-card ul { margin-bottom: var(--space-4); } .price-card li { font-size: 14px; padding: 4px 0 4px 22px; line-height: 1.45; } .price-card li::before { top: 9px; } .monthly-sub-head { margin: var(--space-4) 0 var(--space-2); } .monthly-grid { margin-top: var(--space-3); } .monthly-card { padding: var(--space-4); } .pricing-fineprint { margin-top: var(--space-4); } /* (3) Yellow highlight consistency: the hero's "live" band uses the muted 0.85 Joy yellow (brand kit). Match every .spark band to it so the highlight tone is identical everywhere, not a brighter lemon on the lighter sections. (The hero's own rule already sets 0.85; this brings the non-hero sparks, e.g. "You"/"We", in line.) */ .spark::before { opacity: 0.85; } /* ════════════════════════════════════════════════════════════ 2026-05-23 ROUND 2: table header centring, denser headings + deliverables, richer 3-step process, one more navy leak. ════════════════════════════════════════════════════════════ */ /* Comparison table: centre the comparison headers. (.compare-table th was explicitly left-aligned and .center was only defined for td, so th.center did nothing.) First column header stays left over its left-aligned labels. */ .compare-table th { text-align: center; } .compare-table th:first-child { text-align: left; } /* One more navy-on-dark leak (FAQ accordion question, if used). */ .faq-q { color: var(--text); } /* Headings were running large; bring section H2s down a notch so more of each section is visible at a glance (pricing keeps its own smaller size). */ .section-head h2 { font-size: clamp(31px, 3.6vw, 46px); } /* Deliverables: a touch denser. */ .deliverables-grid { margin-bottom: var(--space-4); } .deliverable { padding: var(--space-3) var(--space-4); } /* Process: a real 3-step "how it works" instead of the bland strip. */ .process-strip { padding: var(--space-6) 0; } .process-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } .process-steps li { padding-top: var(--space-3); border-top: 2px solid var(--rule-strong); } .process-step-num { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; color: var(--orange); font-variant-numeric: tabular-nums; } .process-steps h3 { font-size: 20px; margin: 8px 0 6px; letter-spacing: -0.01em; } .process-steps p { font-size: 15px; color: var(--text-muted); line-height: 1.55; } @media (max-width: 760px) { .process-steps { grid-template-columns: 1fr; gap: var(--space-3); } } /* ── Process timeline (About: How it works; replaces the 3-step strip) ── */ .timeline { list-style: none; margin: var(--space-5) 0 0; padding: 0; max-width: 720px; } .timeline-step { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: var(--space-3); padding-bottom: var(--space-5); } .timeline-step:last-child { padding-bottom: 0; } .timeline-step::before { content: ""; position: absolute; left: 23px; top: 52px; bottom: -4px; width: 2px; background: var(--rule-strong); } .timeline-step:last-child::before { display: none; } .timeline-marker { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--surface-2); border: 2px solid var(--rule-bright); position: relative; z-index: 1; } .timeline-num { font-size: 18px; font-weight: 700; color: var(--orange); font-variant-numeric: tabular-nums; } .timeline-body { padding-top: 8px; min-width: 0; } .timeline-body h3 { font-size: 20px; margin: 0 0 6px; letter-spacing: -0.01em; } .timeline-body p { font-size: 15px; color: var(--text-muted); line-height: 1.6; margin: 0 0 10px; } .timeline-body p:last-child { margin-bottom: 0; } .timeline-tier { font-size: 14px; background: var(--surface); border-left: 3px solid var(--orange); padding: 8px 14px; border-radius: 0 var(--radius) var(--radius) 0; } .timeline-tier strong { color: var(--text); } .timeline-sublist { margin: 4px 0 0; padding-left: 20px; } .timeline-sublist li { font-size: 15px; color: var(--text-muted); line-height: 1.6; margin-bottom: 4px; } @media (max-width: 600px) { .timeline-step { grid-template-columns: 40px 1fr; gap: var(--space-2); } .timeline-step::before { left: 19px; top: 44px; } .timeline-marker { width: 40px; height: 40px; } .timeline-num { font-size: 16px; } } /* Booking-form labels were navy (illegible on dark). Field labels -> muted white; radio option text -> full white. Fixes book / audit / coming-soon. */ .form-row label { color: var(--text-muted); } .form-row .radio-group label { color: var(--text); } /* About-page legibility: callout + blockquote body were navy on dark. */ .callout { color: var(--text); } blockquote { color: var(--text); } /* Path-card list bullets were em dashes; use a dot instead. */ .path-card li::before { content: "\2022"; } /* About: founder + designer as two side-by-side cards under the header. */ .team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-top: var(--space-4); } .team-card { background: var(--canvas); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; } .team-photo { width: 100%; height: 300px; object-fit: cover; display: block; background: var(--surface); border-bottom: 1px solid var(--rule-strong); } .team-bio { padding: var(--space-5); } .team-role { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--orange); font-weight: 700; margin-bottom: 4px; } .team-card h3 { font-size: 24px; margin-bottom: var(--space-2); } .team-card p { color: var(--text-muted); line-height: 1.65; font-size: 15.5px; } @media (max-width: 700px) { .team-grid { grid-template-columns: 1fr; } .team-photo { height: 260px; } } /* ── DELIVERABLES: compress section to fit one viewport (2026-05-26) ── Sinks removed: full section padding (128px), 180px row floor (dead space under bottom-aligned content), and the 220px full-width "08" banner. Bento goes 4 rows → 3: 01-06 as 3+3, then 07 + 08 share the last row. */ .deliverables { padding: var(--space-5) 0; } .deliverables .section-head { margin-bottom: var(--space-4); } .deliverables .section-head h2 { font-size: clamp(25px, 2.8vw, 35px); } .deliverables-grid { grid-auto-rows: minmax(0, auto); margin-bottom: var(--space-4); } .deliverable { padding: var(--space-2) var(--space-4); display: flex; flex-direction: column; justify-content: flex-start; } .deliverable .deliverable-num { margin-bottom: 6px; } .deliverable h3 { font-size: 18px; margin-bottom: 4px; } .deliverable p { font-size: 14.5px; line-height: 1.5; } /* 08 is no longer a tall full-width banner; it sits beside 07 on row 3, still flagged by its highlight border + yellow number. */ .deliverable:nth-child(8) { min-height: 0; } .deliverable:nth-child(8) h3 { font-size: 18px; } .deliverable:nth-child(8) p { font-size: 14.5px; } @media (min-width: 901px) { .deliverables-grid .deliverable:nth-child(1), .deliverables-grid .deliverable:nth-child(2), .deliverables-grid .deliverable:nth-child(3), .deliverables-grid .deliverable:nth-child(4), .deliverables-grid .deliverable:nth-child(5), .deliverables-grid .deliverable:nth-child(6) { grid-column: span 2; } .deliverables-grid .deliverable:nth-child(7), .deliverables-grid .deliverable:nth-child(8) { grid-column: span 3; } } .grow-card { padding: var(--space-3) var(--space-4); gap: var(--space-3); } .grow-card p { font-size: 14.5px; line-height: 1.5; } .deliverables-closer { margin-top: var(--space-3); font-size: 15px; } /* ── EXAMPLES: free-to-start CTA duo (audit + checklist, 2026-05-26) ── */ .cta-duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-4); } .cta-duo-card { background: var(--canvas); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: var(--space-5); display: flex; flex-direction: column; align-items: flex-start; } .cta-duo-card h3 { font-size: 22px; margin: 4px 0 var(--space-2); } .cta-duo-card p { color: var(--text-muted); line-height: 1.6; margin-bottom: var(--space-4); flex-grow: 1; } @media (max-width: 700px) { .cta-duo { grid-template-columns: 1fr; } } /* ── Live animated hero preview embedded in example cards (2026-05-30). Renders the client's REAL site at a 1280px desktop viewport, scaled to fill the 16:10 card via container-query units, so it reads as the desktop hero (not a cramped mobile render). pointer-events off so the card doesn't trap scroll; the client heroes animate on their own. ── */ .case-card-image.is-embed { padding: 0; background: var(--canvas); position: relative; overflow: hidden; container-type: inline-size; } .case-embed { position: absolute; top: 0; left: 0; width: 1280px; height: 800px; border: 0; transform: scale(calc(100cqw / 1280px)); transform-origin: top left; pointer-events: none; } /* Respect OS reduce-motion: drop smooth scrolling. The hero canvas does its own reduce handling in JS (half-speed drift, no cursor repel). */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ── Proof carousel: rolling strip of live client heroes on Home (2026-05-30). Each slide's iframe reuses .case-embed (desktop render scaled to fit via the container query on .proof-embed). Auto-advances; see the inline script. ── */ .proof-carousel { margin-top: var(--space-5); overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .proof-carousel::-webkit-scrollbar { display: none; } .proof-track { display: flex; gap: var(--space-4); padding-bottom: 4px; } .proof-slide { flex: 0 0 calc(50% - var(--space-4) / 2); scroll-snap-align: center; } .proof-embed { position: relative; overflow: hidden; container-type: inline-size; aspect-ratio: 16 / 10; border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--canvas); box-shadow: var(--shadow-md); } .proof-slide-cap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-3); } .proof-slide-cap h3 { font-size: 20px; letter-spacing: -0.01em; } @media (max-width: 700px) { .proof-slide { flex-basis: 88%; } } /* ── In-content links on the Founder's Checklist (visible on dark) (2026-05-30) ── */ .phase a { color: var(--orange); border-bottom: 1px solid rgba(255, 145, 77, 0.45); font-weight: 500; } .phase a:hover { border-color: var(--orange); color: var(--orange-deep); } /* ── Pull-quote (Founder's Checklist value-chain section) (2026-05-31) ── */ blockquote.pullquote { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.4; font-weight: 500; color: var(--text); letter-spacing: -0.01em; margin: var(--space-5) 0; padding-left: var(--space-4); border-left: 3px solid var(--orange); } /* ── Slow-drifting brand-colour aurora behind a slim hero (2026-05-30). Originally the Book hero; generalised to a reusable .hero-aurora class (2026-05-31) and applied to the Examples and Checklist heroes too. ── */ .hero.slim.book-hero, .hero.slim.hero-aurora { position: relative; overflow: hidden; isolation: isolate; } .hero.slim.book-hero::before, .hero.slim.hero-aurora::before { content: ""; position: absolute; inset: -40%; z-index: -1; background: radial-gradient(38% 48% at 22% 30%, rgba(0, 0, 128, 0.55), transparent 62%), radial-gradient(32% 42% at 78% 22%, rgba(255, 145, 77, 0.26), transparent 60%), radial-gradient(42% 52% at 62% 82%, rgba(152, 200, 49, 0.20), transparent 60%), radial-gradient(40% 50% at 35% 78%, rgba(255, 222, 89, 0.14), transparent 60%); filter: blur(26px); animation: bookAurora 22s ease-in-out infinite alternate; } .hero.slim.book-hero .hero-inner, .hero.slim.hero-aurora .hero-inner { position: relative; z-index: 1; } @keyframes bookAurora { 0% { transform: translate3d(-5%, -3%, 0) scale(1.05) rotate(0deg); } 50% { transform: translate3d(4%, 3%, 0) scale(1.14) rotate(4deg); } 100% { transform: translate3d(-2%, 4%, 0) scale(1.07) rotate(-3deg); } } @media (prefers-reduced-motion: reduce) { .hero.slim.book-hero::before, .hero.slim.hero-aurora::before { animation: none; } } /* ── Value-chain "house" diagram (Founder's Checklist: What a business actually is) (2026-05-31) ── A simple stacked house: the margin/outcome caps the top, the core (operations + sales/marketing/credibility) is the lit tier where you win, the foundation (compliance/support) is the muted base. Real text, responsive, aria-labelled. */ .vchain { max-width: 560px; margin: var(--space-6) auto; } .vchain-margin { position: relative; z-index: 2; width: 78%; margin: 0 auto -8px; padding: 11px var(--space-4) 14px; text-align: center; font-size: 13.5px; font-weight: 700; letter-spacing: 0.02em; color: var(--btn-ink); background: linear-gradient(180deg, var(--orange) 0%, var(--orange-deep) 100%); clip-path: polygon(11% 0, 89% 0, 100% 100%, 0 100%); box-shadow: 0 -2px 18px rgba(255, 145, 77, 0.30); } .vchain-tier { border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: var(--space-4); } .vchain-core { position: relative; z-index: 1; padding-top: var(--space-5); border-color: rgba(255, 145, 77, 0.30); background: linear-gradient(180deg, rgba(255, 145, 77, 0.08) 0%, rgba(255, 255, 255, 0.01) 70%), var(--surface-2); box-shadow: var(--shadow-md); } .vchain-base { margin-top: var(--space-2); border-style: dashed; border-color: var(--rule-strong); background: var(--surface); } .vchain-tier-tag { display: block; text-align: center; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; color: var(--orange); margin-bottom: var(--space-3); } .vchain-tier-tag.is-muted { color: var(--text-soft); } .vchain-cells { display: flex; gap: var(--space-2); } .vchain-cell { flex: 1 1 0; text-align: center; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--space-3) var(--space-2); } .vchain-cell strong { display: block; color: var(--text); font-size: 15.5px; letter-spacing: -0.01em; margin-bottom: 5px; } .vchain-cell span { font-size: 13px; color: var(--text-muted); line-height: 1.45; } .vchain-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .vchain-chips span { font-size: 12.5px; color: var(--text-muted); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--rule); border-radius: 999px; padding: 5px 12px; } @media (max-width: 560px) { .vchain { max-width: 100%; } .vchain-cells { flex-direction: column; } } /* ════════════════════════════════════════════════════════════ 2026-05-31 — Founder's Checklist: tighter section rhythm, a hero download CTA, and a sticky section nav (labelled left rail on desktop, progress-dot capsule on mobile). All scoped to .checklist-page so no other page is affected. ════════════════════════════════════════════════════════════ */ /* Tighter vertical rhythm on the long-form resource (was space-8 each side). */ .checklist-page section { padding-top: var(--space-5); padding-bottom: var(--space-5); } .checklist-page .problem { padding-top: var(--space-5); padding-bottom: var(--space-5); } .checklist-page .final-cta { padding-top: var(--space-6); padding-bottom: var(--space-6); } /* Hero: a download CTA sits to the right of the intro copy. */ .hero.slim.checklist-hero .hero-inner { grid-template-columns: 1fr auto; gap: var(--space-5); align-items: center; } .checklist-hero .hero-aside { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); } .checklist-hero .hero-aside .btn { white-space: nowrap; } .checklist-hero .hero-aside-note { font-size: 13px; color: var(--text-muted); font-style: italic; max-width: 24ch; line-height: 1.5; } @media (max-width: 760px) { .hero.slim.checklist-hero .hero-inner { grid-template-columns: 1fr; gap: var(--space-3); } } /* Section nav — base. Hidden until you scroll past the hero (set by JS), so it never overlaps the hero text. */ .checklist-toc { position: fixed; z-index: 40; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s ease, visibility .3s ease; } .checklist-toc.is-visible { opacity: 1; visibility: visible; pointer-events: auto; } .checklist-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .checklist-toc a { display: flex; align-items: center; gap: 12px; color: var(--text-muted); transition: color .2s; } .checklist-toc .toc-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; border: 2px solid var(--rule-bright); background: transparent; transition: background .2s, border-color .2s, box-shadow .2s, transform .2s; } .checklist-toc .toc-label { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; } .checklist-toc a:hover { color: var(--text); } .checklist-toc a:hover .toc-dot { border-color: var(--orange); } .checklist-toc a.active { color: var(--text); } .checklist-toc a.active .toc-dot { background: var(--orange); border-color: var(--orange); box-shadow: 0 0 0 4px rgba(255, 145, 77, 0.18); transform: scale(1.05); } /* Desktop >=1200px: labelled rail tucked into the left gutter beside the 820px column. */ @media (min-width: 1200px) { .checklist-toc { top: 50%; transform: translateY(-50%); left: max(16px, calc((100vw - 820px) / 2 - 184px)); } .checklist-toc ul { gap: var(--space-3); } } /* Below 1200px: collapse to a floating capsule of progress dots on the right edge. */ @media (max-width: 1199px) { .checklist-toc { top: 50%; right: 12px; transform: translateY(-50%); background: rgba(13, 13, 23, 0.62); border: 1px solid var(--rule); border-radius: 999px; padding: 10px 7px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .checklist-toc ul { gap: 6px; } .checklist-toc .toc-label { display: none; } .checklist-toc a { padding: 5px; } } @media (prefers-reduced-motion: reduce) { .checklist-toc a.active .toc-dot { transform: none; } } /* ── "Free" nav dropdown (2026-05-31): groups the free lead magnets. Hover/focus on desktop; the mobile drawer lists the items flat under a "Free" label. ── */ .nav-dd { position: relative; display: flex; align-items: center; } .nav-dd-trigger { font: inherit; font-size: 15px; font-weight: 500; color: var(--text-muted); background: none; border: 0; cursor: pointer; padding: 0; display: inline-flex; align-items: center; gap: 5px; transition: color .15s; } .nav-dd:hover .nav-dd-trigger, .nav-dd:focus-within .nav-dd-trigger { color: var(--text); } .nav-dd-caret { font-size: 10px; transition: transform .2s; } .nav-dd:hover .nav-dd-caret, .nav-dd:focus-within .nav-dd-caret { transform: rotate(180deg); } .nav-dd-menu { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(-6px); min-width: 210px; background: var(--surface-2); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: var(--space-1); display: flex; flex-direction: column; gap: 2px; z-index: 5; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s ease, transform .18s ease, visibility .18s; } /* Invisible bridge so the cursor can cross the gap from trigger to menu. */ .nav-dd-menu::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; } .nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } .nav-dd-menu a { padding: 9px 14px; border-radius: 6px; font-size: 14px; font-weight: 500; color: var(--text-muted); white-space: nowrap; } .nav-dd-menu a:hover, .nav-dd-menu a.active { background: var(--surface-3); color: var(--text); } /* Mobile drawer: small label above the grouped free items. */ .nav-drawer-label { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-soft); font-weight: 700; padding: var(--space-2) var(--space-3) 4px; } /* ── Audit hero: a diagnostic "scan" effect (2026-05-31) — a faint technical grid plus a glowing beam that sweeps down the hero, as if scanning a site. A deliberately different treatment from the .hero-aurora used on Book/Examples/Checklist. Reduced-motion aware. ── */ .hero.slim.audit-hero { position: relative; overflow: hidden; isolation: isolate; } .hero.slim.audit-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 100% 44px, linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 44px 100%, radial-gradient(120% 95% at 50% -25%, rgba(0, 0, 128, 0.40) 0%, rgba(6, 6, 12, 0) 62%), var(--canvas); -webkit-mask-image: radial-gradient(135% 105% at 50% 0%, #000 35%, transparent 82%); mask-image: radial-gradient(135% 105% at 50% 0%, #000 35%, transparent 82%); } .hero.slim.audit-hero::after { content: ""; position: absolute; left: 0; right: 0; top: -140px; height: 140px; z-index: -1; background: linear-gradient(180deg, transparent 0%, rgba(255, 145, 77, 0.12) 40%, rgba(255, 222, 89, 0.22) 50%, rgba(255, 145, 77, 0.12) 60%, transparent 100%); filter: blur(3px); animation: auditScan 5.5s cubic-bezier(.45, 0, .25, 1) infinite; } @keyframes auditScan { 0% { top: -140px; opacity: 0; } 14% { opacity: 1; } 86% { opacity: 1; } 100% { top: 100%; opacity: 0; } } .hero.slim.audit-hero .hero-inner { position: relative; z-index: 1; } @media (prefers-reduced-motion: reduce) { .hero.slim.audit-hero::after { animation: none; opacity: 0; } } /* ════════════════════════════════════════════════════════════ 2026-06-01 — BOOKING PAGE REDESIGN + shared form-wiring states. Tier selector becomes a real radio-card group (Pro / Designer / Custom Build); the intake form becomes a grouped, two-column, guided flow with consent. Scoped to .book-page, except the shared .hp-field / .form-success / .form-error / .form-reassure used by the audit and checklist forms too. ════════════════════════════════════════════════════════════ */ /* Tier cards: whole card is the click target; selection drives the ring. */ .book-page .tier-mini { position: relative; display: block; cursor: pointer; padding-right: var(--space-5); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease; } .book-page .tier-mini:hover { border-color: var(--rule-bright); transform: translateY(-2px); } .book-page .tier-mini.featured { border-color: var(--rule); border-width: 1px; box-shadow: var(--shadow-sm); } .book-page .tier-mini input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } .book-page .tier-mini .tier-radio { position: absolute; top: var(--space-4); right: var(--space-4); width: 22px; height: 22px; border-radius: 999px; border: 2px solid var(--rule-bright); transition: border-color .18s ease, background .18s ease; } .book-page .tier-mini .tier-radio::after { content: ""; position: absolute; inset: 4px; border-radius: 999px; background: var(--btn-ink); opacity: 0; transition: opacity .18s ease; } .book-page .tier-mini.is-selected { border-color: var(--orange); border-width: 2px; background: var(--surface); box-shadow: var(--shadow-orange); } .book-page .tier-mini.is-selected .tier-radio { border-color: var(--orange); background: var(--orange); } .book-page .tier-mini.is-selected .tier-radio::after { opacity: 1; } .book-page .tier-mini:focus-within { outline: 2px solid var(--orange); outline-offset: 3px; } .book-page .tier-mini .tier-unit { font-size: 14px; font-weight: 600; color: var(--text-muted); } .book-page .tier-mini .tier-mini-was { font-size: 13px; font-weight: 500; color: var(--text-muted); margin: -12px 0 var(--space-3); line-height: 1.4; } /* Custom Build is bespoke, not a fixed price: give it the Trustworthy-blue spark. */ .book-page .tier-mini.tier-custom .tier-mini-name { color: var(--blue); } .book-page .tier-mini.tier-custom.is-selected { border-color: var(--blue); box-shadow: 0 8px 28px rgba(56, 182, 255, 0.22); } .book-page .tier-mini.tier-custom.is-selected .tier-radio { border-color: var(--blue); background: var(--blue); } .book-page .tier-foot { text-align: center; font-size: 14px; color: var(--text-muted); margin: var(--space-4) auto 0; max-width: 62ch; } /* Selection summary above the form. */ .book-page .book-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 660px; margin: 0 auto var(--space-3); padding: 12px 18px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); font-size: 15px; color: var(--text-muted); } .book-page .book-summary strong { color: var(--text); } .book-page .book-summary-sep { color: var(--text-soft); } .book-page .book-summary-change { margin-left: auto; color: var(--orange); border-bottom: 1px solid var(--orange); font-weight: 600; font-size: 14px; } /* The form card, centred to match the summary. */ .book-page .form-card { max-width: 660px; margin-left: auto; margin-right: auto; } /* Grouped fieldsets with a hairline rule between groups. */ .book-page .fieldset-label { font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--orange); margin: var(--space-4) 0 var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--rule); } .book-page .form-card > .fieldset-label:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; } .book-page .fieldset-label .lbl-note { color: var(--text-soft); font-weight: 500; text-transform: none; letter-spacing: 0; } .book-page .lbl-note { font-size: 11px; font-weight: 600; color: var(--text-soft); text-transform: none; letter-spacing: 0.02em; } /* Two-up rows on desktop, stacked on narrow screens. */ .book-page .form-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-3); } @media (max-width: 560px) { .book-page .form-duo { grid-template-columns: 1fr; } } /* Segmented New / Refresh control (replaces the plain radio pair). */ .book-page .segmented { display: inline-flex; border: 1.5px solid var(--rule); border-radius: var(--radius); overflow: hidden; background: #fff; } .book-page .segmented .seg { display: flex; align-items: center; padding: 10px 22px; margin: 0; font-size: 15px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--navy); cursor: pointer; transition: background .15s ease, color .15s ease; } .book-page .segmented .seg + .seg { border-left: 1px solid var(--rule); } .book-page .segmented .seg input { position: absolute; opacity: 0; width: 1px; height: 1px; } .book-page .segmented .seg.is-selected { background: var(--orange); color: var(--btn-ink); } /* Consent / terms checkboxes. */ .book-page .check-row { display: flex; align-items: flex-start; gap: 10px; margin-top: var(--space-3); } .book-page .check-row input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--orange); } .book-page .check-row label { font-size: 14px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-muted); line-height: 1.5; margin: 0; } .book-page .check-row a { color: var(--orange); border-bottom: 1px solid var(--orange); } /* ── Shared form states (book + audit + checklist) ── */ .hp-field { position: absolute !important; left: -9999px; top: -9999px; width: 1px; height: 1px; opacity: 0; overflow: hidden; } .form-reassure { text-align: center; font-size: 13px; color: var(--text-soft); margin-top: var(--space-3); line-height: 1.5; } .form-reassure a { color: var(--orange); border-bottom: 1px solid var(--orange); } .form-success { background: var(--surface); border: 1px solid var(--lime); border-radius: var(--radius); padding: var(--space-5); text-align: center; } .form-success h3 { color: var(--text); margin-bottom: var(--space-2); } .form-success p { color: var(--text-muted); font-size: 16px; margin: 0; } .form-error { background: rgba(255, 145, 77, 0.08); border: 1px solid var(--orange); border-radius: var(--radius); padding: 14px 18px; margin-top: var(--space-3); font-size: 14px; color: var(--text); } .form-is-sending { opacity: 0.7; } /* ── FAQ "bubbles": each question in its own card (home "Honest answers", 2026-06-01). Replaces the flat prose list. Reusable on the About page if Sean likes it. ── */ .qa-bubbles { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-5); } .qa-bubble { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); transition: border-color .18s ease, transform .18s ease; } .qa-bubble:hover { border-color: var(--rule-strong); transform: translateY(-2px); } .qa-bubble h3 { font-size: 20px; color: var(--text); margin-bottom: var(--space-2); letter-spacing: -0.015em; line-height: 1.3; } .qa-bubble p { font-size: 16.5px; line-height: 1.6; color: var(--text-muted); margin: 0; } .qa-bubble p strong { color: var(--text); } @media (max-width: 560px) { .qa-bubble { padding: var(--space-3) var(--space-4); } } /* ── Comparison table pizazz (About "How BiaD compares"), 2026-06-01: a contained card, highlighted BiaD columns, and zebra rows. Cell padding tightened so the whole table stays on one screen. ── */ .compare-table-wrap { margin-top: var(--space-4); border: 1px solid var(--rule-strong); border-radius: var(--radius-lg); overflow-x: auto; background: var(--surface); box-shadow: var(--shadow-lg); } .compare-table { margin-top: 0; } .compare-table th, .compare-table td { padding: 11px 14px; } .compare-table thead th { background: var(--surface-2); } .compare-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.02); } .compare-table tbody tr:hover { background: var(--surface-3); } .compare-table th:nth-child(2), .compare-table th:nth-child(3), .compare-table td:nth-child(2), .compare-table td:nth-child(3) { background: rgba(255, 145, 77, 0.07); } .compare-table thead th:nth-child(2), .compare-table thead th:nth-child(3) { background: rgba(255, 145, 77, 0.14); } /* ── Consent checkbox for the lead-magnet forms (audit / checklist / waitlist), 2026-06-01. Mirrors the booking form's .check-row but un-scoped so it works on any page. ── */ .consent-check { display: flex; align-items: flex-start; gap: 10px; margin: var(--space-3) 0; text-align: left; } .consent-check input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--orange); } .consent-check label { font-size: 13.5px; font-weight: 400; color: var(--text-muted); line-height: 1.5; } .consent-check a { color: var(--orange); border-bottom: 1px solid var(--orange); }