:root { color-scheme: light; --bg: #f6f3eb; --ink: #17201c; --muted: #59645e; --paper: #fffdf8; --line: #d9d7cd; --accent: #1d6f52; --accent-ink: #fff; --tint: #e2eee8; --shadow: 0 24px 70px rgba(30,43,37,.12); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.calfluent { --bg:#f5f7ff; --ink:#15192c; --muted:#616a85; --paper:#ffffff; --line:#dce1f1; --accent:#5b49d8; --accent-ink:#fff; --tint:#ebe8ff; --shadow:0 24px 70px rgba(44,40,100,.14); }
.mailtocrm { --bg:#f7f5f0; --ink:#1d2524; --muted:#60706d; --paper:#fff; --line:#d9dfdd; --accent:#e05f3d; --accent-ink:#fff; --tint:#fff0e9; --shadow:0 24px 70px rgba(72,48,38,.12); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background:var(--bg); color:var(--ink); line-height:1.55; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline:3px solid color-mix(in srgb,var(--accent),white 25%); outline-offset:3px; }
.shell { width:min(1120px,calc(100% - 40px)); margin-inline:auto; }
.nav { min-height:78px; display:flex; justify-content:space-between; align-items:center; }
.brand { display:flex; align-items:center; gap:10px; font-size:1.03rem; font-weight:800; text-decoration:none; letter-spacing:-.02em; }
.brand-mark { width:34px; height:34px; border-radius:11px; background:var(--accent); color:var(--accent-ink); display:grid; place-items:center; font-size:.9rem; box-shadow:0 6px 18px color-mix(in srgb,var(--accent),transparent 75%); }
.small-link { font-weight:700; color:var(--muted); text-underline-offset:4px; }
.hero { min-height:690px; display:grid; grid-template-columns:1fr .92fr; gap:clamp(50px,8vw,100px); align-items:center; padding-block:80px 110px; }
.eyebrow { margin:0 0 16px; color:var(--accent); text-transform:uppercase; font-size:.76rem; letter-spacing:.14em; font-weight:850; }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:clamp(3.2rem,7.3vw,6.7rem); letter-spacing:-.065em; line-height:.91; margin-bottom:28px; max-width:10ch; }
.claimlark h1 { font-family:Georgia,"Times New Roman",serif; font-weight:500; letter-spacing:-.055em; }
h2 { font-size:clamp(2.1rem,4.2vw,3.7rem); line-height:1; letter-spacing:-.045em; margin-bottom:22px; }
h3 { font-size:1.18rem; line-height:1.2; margin-bottom:10px; }
.lede { color:var(--muted); font-size:clamp(1.07rem,1.7vw,1.28rem); max-width:580px; margin-bottom:32px; }
.button { display:inline-flex; align-items:center; gap:18px; background:var(--accent); color:var(--accent-ink); text-decoration:none; font-weight:800; padding:15px 20px; border-radius:12px; box-shadow:0 10px 24px color-mix(in srgb,var(--accent),transparent 78%); }
.button:hover { transform:translateY(-1px); }
.button.secondary { background:var(--ink); white-space:nowrap; }
.stage-card { background:var(--paper); border:1px solid var(--line); border-radius:24px; padding:26px; box-shadow:var(--shadow); transform:rotate(1deg); }
.calendar-card { transform:rotate(-1deg); }
.card-top { display:flex; justify-content:space-between; gap:12px; align-items:center; font-size:.74rem; font-weight:850; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.status { color:var(--accent); background:var(--tint); padding:6px 9px; border-radius:999px; white-space:nowrap; }
blockquote { margin:24px 0; border-left:3px solid var(--accent); padding-left:18px; font-size:1.12rem; line-height:1.55; }
.summary-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.summary-grid>div { padding:13px; border-radius:12px; background:var(--bg); border:1px solid color-mix(in srgb,var(--line),transparent 30%); }
small { display:block; color:var(--muted); font-size:.7rem; text-transform:uppercase; letter-spacing:.07em; margin-bottom:3px; }
strong { display:block; line-height:1.3; }
.example-note { margin:18px 0 0; color:var(--muted); font-size:.76rem; }
.demo-actions { display:flex; gap:9px; margin-top:18px; }
.demo-actions button { border:0; border-radius:9px; padding:10px 13px; background:var(--accent); color:white; font:inherit; font-weight:800; cursor:pointer; }
.demo-actions button.quiet { background:var(--bg); color:var(--ink); border:1px solid var(--line); }
.record-list { display:grid; gap:9px; }
.record-list>div { display:flex; gap:12px; align-items:center; background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:11px; }
.record-list p { margin:0; }
.record-icon { width:34px; height:34px; border-radius:9px; display:grid; place-items:center; flex:0 0 auto; background:var(--accent); color:#fff; font-weight:900; font-size:.75rem; }
.section { border-top:1px solid var(--line); padding-block:105px; }
.section>h2 { max-width:720px; }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:50px; }
.steps article { background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:26px; min-height:230px; }
.steps article>span { display:inline-grid; place-items:center; width:38px; height:38px; border-radius:12px; background:var(--tint); color:var(--accent); font-weight:900; font-size:.75rem; margin-bottom:40px; }
.steps p,.notice p,.founder p { color:var(--muted); margin-bottom:0; }
.split { display:grid; grid-template-columns:.9fr 1.1fr; gap:80px; align-items:start; }
.notice { background:var(--tint); border-radius:18px; padding:30px; }
.notice strong { margin-bottom:8px; }
.founder { display:grid; grid-template-columns:auto 1fr auto; gap:22px; align-items:center; padding-block:80px; }
.founder h2 { font-size:2rem; margin:0 0 6px; }
.founder .eyebrow { margin-bottom:6px; }
.avatar { width:66px; height:66px; border-radius:22px; background:var(--ink); color:var(--bg); display:grid; place-items:center; font-weight:900; }
footer { border-top:1px solid var(--line); min-height:100px; display:flex; align-items:center; justify-content:space-between; gap:20px; color:var(--muted); font-size:.86rem; }
footer a { text-underline-offset:3px; }
@media (max-width:820px) { .hero { grid-template-columns:1fr; min-height:auto; padding-block:60px 80px; } .stage-card { transform:none; } .steps { grid-template-columns:1fr; } .steps article { min-height:0; } .steps article>span { margin-bottom:24px; } .split { grid-template-columns:1fr; gap:28px; } .founder { grid-template-columns:auto 1fr; } .founder .button { grid-column:1/-1; justify-content:center; } }
@media (max-width:520px) { .shell { width:min(100% - 28px,1120px); } h1 { font-size:3.55rem; } .summary-grid { grid-template-columns:1fr; } .stage-card { padding:19px; border-radius:18px; } .section { padding-block:72px; } footer { align-items:flex-start; flex-direction:column; justify-content:center; } }
@media (prefers-reduced-motion:no-preference) { .button { transition:transform .18s ease; } .stage-card { animation:arrive .55s ease both; } @keyframes arrive { from { opacity:0; transform:translateY(14px) rotate(0); } } }