@font-face { font-family: "Inter"; src: url('/assets/Inter-Variable.ttf') format('truetype'); font-style: normal; font-weight: 100 900; font-display: swap; }
:root { --red: #e30613; --red-dark: #b91c1c; --red-soft: #ff4a55; --ink: #231a19; --muted: #6e5651; --page-start: #fef2f6; --page-end: #f4efee; --cream: var(--page-start); --paper: #fffdfc; --surface-container: #fff4f3; --primary-container: #ffdad6; --blue: #0f5bff; --slate: #475569; --green: #087b4a; --orange: #ff6b00; --line: #eacfc8; --outline: #a98b84; --maxw: 1180px; }
* { box-sizing: border-box; }
button, input, textarea, select { font: inherit; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: linear-gradient(135deg, var(--page-start), var(--page-end)); color: var(--ink); font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-synthesis: none; line-height: 1.55; font-size: 16px; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }
.section-shell { max-width: var(--maxw); margin: 0 auto; padding-left: 28px; padding-right: 28px; }
.site-header { position: relative; z-index: 3; border-bottom: 1px solid rgba(234, 207, 200, .8); background: rgb(254 242 246 / 88%); }
.nav-shell, .footer-inner { max-width: var(--maxw); margin: 0 auto; padding: 18px 28px; display: flex; align-items: center; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -.025em; }
.brand img { border-radius: 11px; box-shadow: 0 6px 16px rgba(127, 20, 32, .13); }
.nav-shell .links, .footer-inner .links { margin-left: auto; display: flex; align-items: center; gap: 24px; color: var(--muted); font-size: .91rem; font-weight: 600; }
.nav-shell .links a:hover, .footer-inner .links a:hover { color: var(--red); }
.hero { min-height: 680px; padding-top: 88px; padding-bottom: 88px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(440px, 1.1fr); align-items: center; gap: 44px; }
.eyebrow, .section-kicker { margin: 0 0 18px; text-transform: uppercase; letter-spacing: .11em; font-size: .72rem; font-weight: 600; color: var(--red); }
.eyebrow { display: flex; align-items: center; gap: 9px; }
.eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--red); box-shadow: 0 0 0 5px rgba(227, 6, 19, .1); }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 620px; margin-bottom: 26px; font-size: clamp(3.4rem, 6.2vw, 6.8rem); line-height: .94; letter-spacing: -.055em; font-weight: 700; }
h1 em, h2 span, .cta h2 em { color: var(--red); font-style: normal; }
.hero-lead { max-width: 500px; margin-bottom: 14px; font-size: 1.3rem; line-height: 1.35; letter-spacing: -.02em; font-weight: 500; }
.hero-body { max-width: 500px; margin-bottom: 28px; color: var(--muted); font-size: 1rem; }
.hero-body em, .proof-inner em, .disclaimer em { color: var(--ink); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.button { display: inline-flex; align-items: center; gap: 14px; min-height: 48px; padding: 13px 18px; border-radius: 5px; font-size: .86rem; font-weight: 600; letter-spacing: -.01em; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(45, 23, 25, .14); }
.button span { font-size: 1rem; }
.button-primary { background: var(--red); color: white; }
.button-secondary { border: 1px solid var(--outline); color: var(--ink); background: var(--paper); }
.fine-print { margin: 16px 0 0; color: var(--muted); font-size: .75rem; }
.hero-art { position: relative; min-height: 450px; display: flex; align-items: center; justify-content: center; }
.hero-sun { position: absolute; top: 2%; right: 3%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: var(--primary-container); opacity: .72; }
.hero-card { position: relative; z-index: 1; width: min(100%, 660px); transform: rotate(2.5deg); border: 8px solid var(--paper); background: var(--paper); box-shadow: 0 26px 55px rgba(88, 35, 35, .18); }
.hero-card img { width: 100%; }
.hero-stamp { position: absolute; z-index: 2; bottom: 1%; left: 0; width: 142px; height: 142px; padding: 23px 12px; border-radius: 50%; background: var(--blue); color: white; text-align: center; transform: rotate(-10deg); box-shadow: 0 14px 28px rgba(15, 91, 255, .22); }
.hero-stamp span { display: block; font-size: .64rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; opacity: .8; }
.hero-stamp strong { display: block; margin-top: 8px; font-size: 1.05rem; line-height: 1.05; letter-spacing: -.04em; }
.proof-strip { overflow: hidden; background: var(--red); color: white; }
.proof-inner { max-width: 1280px; margin: 0 auto; padding: 18px 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: .78rem; letter-spacing: .03em; font-weight: 650; }
.proof-inner em { color: #fff5e7; }
.proof-separator { color: #f3b7a7; }
.intro { padding-top: 120px; padding-bottom: 125px; }
.intro-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 60px; align-items: end; }
h2 { margin-bottom: 20px; font-size: clamp(2.6rem, 5vw, 5rem); line-height: .97; letter-spacing: -.05em; font-weight: 700; }
.intro-grid p, .screens-heading > p { max-width: 420px; margin-bottom: 10px; color: var(--muted); font-size: 1.05rem; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 58px; }
.feature-card { min-height: 300px; padding: 26px; border-radius: 3px; position: relative; overflow: hidden; }
.feature-card-red { background: var(--red); color: white; }
.feature-card-cream { background: var(--surface-container); }
.feature-card-blue { background: #e2e8f0; }
.feature-number { font-size: .72rem; font-weight: 800; letter-spacing: .1em; opacity: .65; }
.feature-icon { position: absolute; top: 21px; right: 25px; font-size: 2.4rem; font-weight: 300; }
.feature-card h3 { max-width: 230px; margin: 78px 0 12px; font-size: 1.45rem; line-height: 1.08; letter-spacing: -.035em; font-weight: 600; }
.feature-card p { max-width: 260px; margin-bottom: 0; font-size: .9rem; line-height: 1.45; opacity: .78; }
.screens-section { padding: 110px 0 130px; background: var(--surface-container); color: var(--ink); }
.screens-heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; }
.screens-heading .section-kicker { color: var(--red); }
.screens-heading h2 { margin-bottom: 0; }
.screens-heading h2 span { color: var(--red); }
.screens-heading > p { color: var(--muted); margin-bottom: 4px; }
.screens-row { display: flex; gap: 20px; overflow-x: auto; padding: 58px 0 24px; scrollbar-color: var(--outline) transparent; scrollbar-width: thin; }
.screen-card { flex: 0 0 220px; margin: 0; }
.screen-card img { width: 100%; border: 1px solid var(--line); border-radius: 2px; box-shadow: 0 18px 35px rgba(35, 26, 25, .13); background: var(--paper); }
.screen-card figcaption { display: flex; align-items: baseline; gap: 12px; padding: 16px 2px 0; color: var(--muted); font-size: .8rem; }
.screen-card figcaption strong { color: var(--red); font-size: .72rem; letter-spacing: .1em; }
.screen-card figcaption span { line-height: 1.25; }
.promise { display: grid; grid-template-columns: .85fr 1.15fr; gap: 80px; align-items: center; padding-top: 130px; padding-bottom: 130px; }
.promise h2 { margin-bottom: 16px; }
.promise p { max-width: 590px; color: var(--muted); font-size: 1.1rem; }
.promise-list { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 26px; color: var(--ink); font-size: .84rem; font-weight: 600; }
.promise-mark { width: 260px; height: 260px; position: relative; margin: auto; border-radius: 50%; background: var(--red); box-shadow: 22px 18px 0 var(--primary-container); }
.promise-mark::before { content: ""; position: absolute; left: 50%; top: 31px; width: 15px; height: 165px; border-radius: 100%; background: var(--paper); transform: translateX(-50%) rotate(-20deg); }
.promise-mark::after { content: ""; position: absolute; left: 76px; top: 48px; width: 96px; height: 96px; border: 15px solid var(--paper); border-left-color: transparent; border-bottom-color: transparent; transform: rotate(-20deg); }
.cta { padding-bottom: 110px; }
.cta-inner { position: relative; overflow: hidden; padding: 80px clamp(28px, 7vw, 100px); background: var(--red); color: white; }
.cta-inner::after { content: "✦"; position: absolute; right: 9%; top: 14%; color: rgba(255, 218, 214, .88); font-size: 12rem; line-height: 1; transform: rotate(12deg); }
.eyebrow-light { position: relative; z-index: 1; color: #ffd3c1; }
.eyebrow-light .eyebrow-dot { background: #ffd3c1; box-shadow: 0 0 0 5px rgba(255, 211, 193, .16); }
.cta h2 { position: relative; z-index: 1; margin-bottom: 18px; color: white; font-size: clamp(3rem, 6vw, 5.7rem); }
.cta h2 em { color: #ffe2ca; }
.cta p:not(.eyebrow) { position: relative; z-index: 1; max-width: 400px; color: #ffd9ce; }
.cta .hero-actions { position: relative; z-index: 1; margin-top: 26px; }
.button-light { background: var(--paper); color: var(--red-dark); }
.button-outline-light { border: 1px solid rgba(255, 255, 255, .55); color: white; }
.disclaimer { padding-bottom: 36px; }
.disclaimer p { max-width: 760px; margin: 0; color: var(--muted); font-size: .78rem; }
.site-footer { border-top: 1px solid var(--line); }
.footer-inner { min-height: 88px; font-size: .82rem; }
.footer-brand { font-size: .9rem; }
.footer-brand img { border-radius: 8px; }
.footer-note { color: var(--muted); }
.marketing-page .site-footer { background: rgb(244 239 238 / 62%); }
/* Shared document-page styles keep support, privacy, and terms consistent with the marketing page. */
body:not(.marketing-page) { background: linear-gradient(135deg, var(--page-start), var(--page-end)); }
body:not(.marketing-page) header.site { border-bottom: 1px solid var(--line); background: rgb(254 242 246 / 90%); }
body:not(.marketing-page) header.site nav { max-width: var(--maxw); margin: 0 auto; padding: 18px 28px; display: flex; align-items: center; gap: 18px; }
body:not(.marketing-page) header.site .brand { color: var(--ink); }
body:not(.marketing-page) header.site .brand img { border-radius: 11px; box-shadow: 0 6px 16px rgba(127, 20, 32, .13); }
body:not(.marketing-page) header.site nav .links { margin-left: auto; display: flex; gap: 20px; color: var(--muted); font-size: .9rem; font-weight: 600; }
body:not(.marketing-page) main { max-width: 800px; margin: 0 auto; padding: 80px 28px 110px; }
body:not(.marketing-page) h1 { font-size: clamp(2.5rem, 5vw, 4.7rem); line-height: 1; margin: 0 0 15px; }
body:not(.marketing-page) h2 { font-size: 1.5rem; line-height: 1.15; margin: 38px 0 9px; }
body:not(.marketing-page) p { margin: 11px 0; }
body:not(.marketing-page) a { color: var(--red); }
body:not(.marketing-page) .lead { color: var(--muted); font-size: 1.18rem; }
body:not(.marketing-page) .updated { color: var(--muted); font-size: .88rem; margin-bottom: 32px; }
body:not(.marketing-page) ul { padding-left: 1.25em; }
body:not(.marketing-page) li { margin: 9px 0; }
body:not(.marketing-page) .note { color: var(--muted); font-size: .9rem; }
body:not(.marketing-page) footer.site { border-top: 1px solid var(--line); }
body:not(.marketing-page) footer.site .inner { max-width: var(--maxw); margin: 0 auto; padding: 22px 28px; color: var(--muted); font-size: .88rem; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
body:not(.marketing-page) footer.site .links { margin-left: auto; display: flex; gap: 20px; }
body:not(.marketing-page) footer.site a { color: var(--muted); }
@media (max-width: 840px) { .hero { grid-template-columns: 1fr; padding-top: 64px; } .hero-copy { max-width: 670px; } .hero-art { min-height: 380px; } .intro-grid, .promise { grid-template-columns: 1fr; gap: 28px; } .promise-mark { order: 2; width: 190px; height: 190px; margin: 12px 0 0 30px; } .promise-mark::before { top: 23px; height: 122px; } .promise-mark::after { left: 56px; top: 35px; width: 70px; height: 70px; border-width: 11px; } }
@media (max-width: 620px) { .nav-shell, .footer-inner, body:not(.marketing-page) header.site nav { padding-left: 20px; padding-right: 20px; } .nav-shell .links { width: 100%; margin-left: 0; justify-content: space-between; gap: 10px; font-size: .78rem; } .section-shell { padding-left: 20px; padding-right: 20px; } .hero { padding-top: 52px; padding-bottom: 68px; gap: 20px; } h1 { font-size: clamp(3.25rem, 17vw, 5.1rem); } .hero-art { min-height: 260px; } .hero-stamp { width: 100px; height: 100px; padding: 17px 7px; bottom: -2%; font-size: .75rem; } .hero-stamp strong { margin-top: 5px; font-size: .75rem; } .proof-inner { justify-content: flex-start; white-space: nowrap; overflow-x: auto; padding-left: 20px; padding-right: 20px; font-size: .7rem; } .proof-separator { display: none; } .intro, .promise { padding-top: 78px; padding-bottom: 82px; } .feature-grid { grid-template-columns: 1fr; margin-top: 36px; } .feature-card { min-height: 245px; } .feature-card h3 { margin-top: 56px; } .screens-section { padding: 78px 0 88px; } .screens-heading { display: block; } .screens-heading > p { margin-top: 25px; } .screens-row { padding-top: 38px; gap: 14px; margin-right: -20px; } .screen-card { flex-basis: 180px; } .cta { padding-bottom: 78px; } .cta-inner { padding: 58px 24px; } .cta-inner::after { right: -5%; top: 16%; font-size: 8rem; } .footer-inner { align-items: flex-start; flex-wrap: wrap; } .footer-note { width: 100%; order: 3; } .footer-inner .links { margin-left: 0; gap: 14px; } body:not(.marketing-page) main { padding: 58px 20px 80px; } body:not(.marketing-page) header.site nav { flex-wrap: wrap; } body:not(.marketing-page) header.site nav .links { width: 100%; margin-left: 0; justify-content: space-between; font-size: .78rem; } body:not(.marketing-page) footer.site .inner { padding-left: 20px; padding-right: 20px; } }