:root { --ink:#15211d; --muted:#5b6661; --cream:#f8f4ea; --paper:#fffdf8; --orange:#ff7a42; --orange-dark:#e9602b; --green:#174c42; --line:rgba(21,33,29,.13); --white:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"DM Sans", sans-serif; line-height:1.5; }
.hero { background:var(--cream); padding:0 clamp(1.25rem,5vw,5rem) clamp(4.5rem,8vw,8rem); overflow:hidden; }
.nav, .hero-grid, .proof, .how-it-works, .pilot, footer { max-width:1180px; margin:0 auto; }
.nav { min-height:84px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { color:var(--ink); display:inline-flex; gap:.55rem; align-items:center; text-decoration:none; font-weight:700; letter-spacing:-.03em; }
.brand-mark { width:26px; height:26px; display:inline-grid; place-items:center; border-radius:8px; background:var(--orange); color:var(--white); font-family:Fraunces,serif; font-size:.95rem; }
.nav-link { color:var(--ink); font-size:.92rem; font-weight:600; text-decoration:none; }
.hero-grid { display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(2.5rem,6vw,7rem); align-items:center; padding-top:clamp(4rem,9vw,8rem); }
.eyebrow { display:flex; align-items:center; gap:.5rem; color:var(--green); font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.eyebrow span { width:16px; height:2px; background:var(--orange); display:inline-block; }
h1,h2,h3,p { margin-top:0; } h1,h2 { font-family:Fraunces, serif; letter-spacing:-.05em; line-height:1.02; }
h1 { font-size:clamp(3.5rem,7vw,6.2rem); margin:.75rem 0 1.25rem; max-width:690px; } h1 em { color:var(--orange); font-style:normal; }
.lede { color:var(--muted); font-size:1.1rem; max-width:545px; margin-bottom:1.85rem; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:.75rem; padding:.9rem 1.15rem; border:0; border-radius:10px; background:var(--orange); color:var(--white); font:700 .9rem "DM Sans",sans-serif; text-decoration:none; cursor:pointer; transition:transform .2s,background .2s; } .button:hover { background:var(--orange-dark); transform:translateY(-2px); }
.microcopy { margin:1rem 0 0; color:var(--muted); font-size:.78rem; }
.hero-card { position:relative; padding:1.1rem; background:var(--white); border:1px solid rgba(21,33,29,.08); border-radius:19px; box-shadow:18px 22px 0 rgba(255,122,66,.18); transform:rotate(2deg); }
.card-top,.card-bottom { display:flex; align-items:center; gap:.45rem; color:var(--muted); font-size:.75rem; font-weight:600; } .card-top .count { margin-left:auto; color:var(--ink); }
.live-dot { width:8px; height:8px; border-radius:50%; background:#3fbf8a; }
.appointment { display:flex; gap:.7rem; align-items:center; padding:1rem 0; border-bottom:1px solid var(--line); } .appointment strong,.appointment small { display:block; } .appointment strong { font-size:.9rem; } .appointment small { color:var(--muted); font-size:.72rem; } .status { margin-left:auto; padding:.26rem .45rem; border-radius:999px; background:#e5f5ed; color:#237855; font-size:.65rem; font-weight:700; }
.avatar { width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:.65rem;font-weight:700; }.amber{background:#ffe7ba}.teal{background:#c7ebe6}
.message-preview { display:flex; gap:.55rem; margin:1rem 0; padding:.8rem; background:#f2f7f4; border-radius:10px; } .mini-mark { flex:0 0 20px;width:20px;height:20px;display:grid;place-items:center;border-radius:6px;background:var(--orange);color:#fff;font:700 .67rem Fraunces,serif; }.message-preview p { margin:0;color:#3e4e47;font-size:.72rem;line-height:1.45; }.card-bottom { border-top:1px solid var(--line);padding-top:.85rem; }.card-bottom span:last-child { margin-left:auto;color:var(--orange);font-size:1rem; }
.proof { padding:clamp(4.5rem,8vw,8rem) clamp(1.25rem,5vw,5rem); }.proof>p { color:var(--muted);font-size:.9rem; }.benefits { display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:2.5rem; }.benefits article { border-top:1px solid var(--line);padding-top:1rem; }.benefit-number { color:var(--orange);font:600 .86rem Fraunces,serif; }.benefits h2 { font-size:1.65rem;margin:.7rem 0; }.benefits p { color:var(--muted);font-size:.9rem; }
.how-it-works { display:grid;grid-template-columns:.9fr 1.1fr;gap:4rem;padding:clamp(4.5rem,8vw,8rem) clamp(1.25rem,5vw,5rem);border-top:1px solid var(--line); }.section-intro h2 { font-size:clamp(2.4rem,4vw,3.6rem);margin:.6rem 0; }.steps { list-style:none;padding:0;margin:0; }.steps li { display:grid;grid-template-columns:42px 1fr;gap:1.1rem;border-bottom:1px solid var(--line);padding:1.1rem 0; }.steps li>span { width:31px;height:31px;border:1px solid var(--ink);border-radius:50%;display:grid;place-items:center;font-size:.78rem;font-weight:700; }.steps h3 { margin:0 0 .25rem;font-size:1.05rem; }.steps p { margin:0;color:var(--muted);font-size:.88rem; }
.pilot { max-width:none;display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,7vw,9rem);background:var(--green);color:var(--white);padding:clamp(4rem,8vw,7rem) max(1.25rem,calc((100vw - 1080px)/2)); }.light { color:#b7d8cd; }.pilot h2 { font-size:clamp(2.6rem,4vw,4rem);margin:.65rem 0 1rem; }.pilot-copy>p:not(.eyebrow) { max-width:480px;color:#d2e2dc; }.privacy-note { display:flex;gap:.75rem;margin-top:2rem;color:#c1d8cf; }.privacy-note p { margin:0;font-size:.78rem; }.pilot-form { padding:1.4rem;background:var(--white);border-radius:14px;color:var(--ink);align-self:start; }.field { margin-bottom:.85rem; }.field label { display:block;margin-bottom:.35rem;font-size:.76rem;font-weight:700; }.field input,.field select { width:100%;padding:.75rem .8rem;border:1px solid #dce3df;border-radius:8px;background:#fff;font:inherit;font-size:.86rem;color:var(--ink); }.field input:focus,.field select:focus { outline:2px solid rgba(255,122,66,.35);border-color:var(--orange); }.two-column { display:grid;grid-template-columns:1fr 1fr;gap:.75rem; }.form-button { width:100%;margin-top:.25rem; }.form-footnote,.form-status { margin:.75rem 0 0;color:#718078;font-size:.72rem;text-align:center; }.form-status { color:#197550;font-weight:600;min-height:1.1em; }
footer { padding:1.5rem clamp(1.25rem,5vw,5rem);display:flex;justify-content:space-between;align-items:center; } footer p { margin:0;color:var(--muted);font-size:.78rem; }
@media (max-width:760px) { .nav { min-height:70px; }.hero-grid,.how-it-works,.pilot { grid-template-columns:1fr; }.hero-card { max-width:430px;margin:1rem auto 0; }.benefits { grid-template-columns:1fr;gap:1rem; }.how-it-works { gap:2rem; }.pilot { padding-left:1.25rem;padding-right:1.25rem; }.two-column { grid-template-columns:1fr;gap:0; } footer { gap:1rem;align-items:flex-start;flex-direction:column; } }