/* ChatUp: shared styles */
:root{
  --paper:#F5F7FB; --card:#FFFFFF; --card2:#EDF1F8; --ink:#14213D; --ink2:#1F2E50;
  --body:#3A4459; --muted:#4A5468; --soft:#667085; --line:#DDE3EE; --line2:#CDD5E3;
  --green:#2E5BD8; --marker:#D4E0FF; --cta:#3B6FF0; --cta2:#6E97FF; --red:#A8412E; --dim:#B4BCCB; --dim2:#D3D9E4;
  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --text:'Instrument Sans',system-ui,sans-serif;
  --hand:'Caveat',cursive;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --pad:80px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--text);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--ink)}a:hover{color:var(--green)}
img,svg{display:block}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:600;letter-spacing:-.03em;color:var(--ink)}
p{margin:0}
:focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--paper);padding:8px 14px;border-radius:8px;z-index:50}
.skip:focus{left:12px}
.wrap{max-width:1280px;margin:0 auto;padding:0 var(--pad)}
.mk{background-image:linear-gradient(transparent 58%,var(--marker) 58%,var(--marker) 92%,transparent 92%);background-repeat:no-repeat;background-size:100% 100%;padding:0 4px}
.eyebrow{font-size:15px;font-weight:600;color:var(--green)}
.band{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
section{scroll-margin-top:96px}

/* nav */
.navwrap{position:sticky;top:16px;z-index:20;padding:16px 64px 0;max-width:1408px;margin:0 auto}
.nav{display:flex;justify-content:space-between;align-items:center;background:var(--ink);border:1px solid rgba(245,247,251,.14);border-radius:999px;padding:8px 8px 8px 30px;box-shadow:0 18px 40px -24px rgba(20,33,61,.6)}
.logo{text-decoration:none;font-family:var(--display);font-weight:700;font-size:26px;letter-spacing:-.035em;color:var(--paper);line-height:1}
.logo:hover{color:var(--paper)}
.logo .lee{position:relative;display:inline-block}
.logo .lee svg{position:absolute;left:-3px;bottom:-6px;width:calc(100% + 6px);height:8px;overflow:visible}
.navlinks{display:flex;align-items:center;gap:30px;font-size:16px}
.navlinks a.l{text-decoration:none;color:var(--dim2)}
.navlinks a.l:hover{color:#fff}
.pill{text-decoration:none;background:var(--cta);color:#fff;padding:6px 6px 6px 24px;border-radius:999px;font-weight:600;display:flex;align-items:center;gap:16px;white-space:nowrap}
.pill:hover{color:#fff}
.pill .dot{width:44px;height:44px;border-radius:22px;background:var(--ink);display:flex;align-items:center;justify-content:center}
.btn{transition:transform .2s ease,box-shadow .2s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 22px -14px rgba(20,33,61,.55)}
.btn svg{transition:transform .2s ease}.btn:hover svg{transform:translateX(3px)}

/* hero */
.hero{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding-top:48px;padding-bottom:96px;align-items:start}
.hero-copy{grid-column:span 7;display:flex;flex-direction:column;gap:24px;padding-top:16px}
.hero h1{font-size:68px;line-height:1.02;letter-spacing:-.035em}
.hero .lede{font-size:20px;line-height:1.55;color:var(--muted);max-width:560px}
.cta-row{display:flex;flex-direction:column;gap:12px}
.cta-line{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.micro{padding-left:26px;font-size:14px;color:var(--soft)}
.trust{display:flex;flex-wrap:wrap;gap:10px 24px;font-size:15px;color:var(--muted)}
.trust span{display:flex;align-items:center;gap:8px}
.hero-art{grid-column:span 5;display:flex;flex-direction:column;gap:14px}
.mail{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 30px 50px -34px rgba(20,33,61,.35);transform:rotate(-1.2deg)}
.mail-top{padding:10px 18px;background:#E8EDF5;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px}
.mail-top b{font-weight:600;color:var(--muted)}.mail-top span{color:var(--soft)}
.mail-from{padding:16px 20px;border-bottom:1px solid #E8EDF5;display:flex;align-items:center;gap:12px}
.avatar{width:36px;height:36px;flex-shrink:0;border-radius:18px;background:#DFE8FC;color:var(--green);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px}
.mail-from .who{flex-grow:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.mail-from .who b{font-size:15px;font-weight:600}.mail-from .who span{font-size:13px;color:var(--soft)}
.mail-from time{font-family:var(--mono);font-size:11px;color:var(--soft)}
.mail-body{padding:20px;display:flex;flex-direction:column;gap:12px;font-size:16px;line-height:1.6;color:var(--ink2)}
.mail-body .subj{font-weight:600;color:var(--ink)}
.hl{background-image:linear-gradient(transparent 12%,var(--marker) 12%,var(--marker) 92%,transparent 92%);background-repeat:no-repeat;background-size:100% 100%;padding:1px 3px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hand{padding-left:24px;font-family:var(--hand);font-size:26px;line-height:1.1;color:var(--green);transform:rotate(-2deg)}
.reply{align-self:flex-end;width:80%;margin-top:6px;background:var(--ink);color:var(--paper);border-radius:16px 16px 4px 16px;padding:16px 18px;display:flex;gap:12px;box-shadow:0 20px 36px -24px rgba(20,33,61,.55)}
.reply .a{width:32px;height:32px;flex-shrink:0;border-radius:16px;background:#3A4459;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600}
.reply small{display:block;font-size:13px;color:var(--dim);margin-bottom:6px}
.reply p{font-size:16px;line-height:1.5}

/* slider: transforms only, so it stays on the GPU and glides */
.slide{--p:0;--travel:338px;position:relative;display:block;flex-shrink:0;width:400px;height:62px;border-radius:999px;background:var(--ink);overflow:hidden;text-decoration:none;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab;box-shadow:0 14px 26px -18px rgba(20,33,61,.7);-webkit-tap-highlight-color:transparent;isolation:isolate;-webkit-mask-image:-webkit-radial-gradient(white,black)}
.slide:active{cursor:grabbing}
.slide .lbl{position:absolute;top:0;bottom:0;left:68px;right:18px;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:16px;white-space:nowrap;pointer-events:none}
.slide .base{color:#D3D9E4;animation:breathe 2.8s ease-in-out infinite}
.slide .trail{position:absolute;top:0;bottom:0;left:0;width:100%;background:var(--cta);border-radius:999px;overflow:hidden;transform:translate3d(calc(-1 * var(--travel) * (1 - var(--p))),0,0);will-change:transform}
.slide .trail .lbl{color:#fff;animation:none;transform:translate3d(calc(var(--travel) * (1 - var(--p))),0,0);will-change:transform}
.slide .donelbl{position:absolute;top:0;bottom:0;left:18px;right:68px;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:16px;color:#fff;opacity:0;pointer-events:none;white-space:nowrap;transition:opacity .25s ease .15s}
.slide .knob{position:absolute;top:6px;left:6px;width:50px;height:50px;border-radius:25px;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,.35);pointer-events:none;transform:translate3d(calc(var(--travel) * var(--p)),0,0);will-change:transform}
.slide .knob .ok{display:none}
.slide .trail,.slide .trail .lbl,.slide .knob{transition:transform .5s cubic-bezier(.22,1,.36,1)}
.slide.hovering .trail,.slide.hovering .trail .lbl,.slide.hovering .knob{transition:transform .45s cubic-bezier(.22,1,.36,1)}
.slide.dragging .trail,.slide.dragging .trail .lbl,.slide.dragging .knob{transition:none}
.slide.done .trail,.slide.done .trail .lbl,.slide.done .knob{transition:transform .35s cubic-bezier(.22,1,.36,1)}
.slide.idle .knob{animation:nudge 3.2s ease-in-out 2.6s infinite}
.slide .trail .lbl,.slide .base{transition:opacity .2s ease}
.slide.done .trail .lbl,.slide.done .base{opacity:0}
.slide.done .donelbl{opacity:1}
.slide.done .knob .go{display:none}.slide.done .knob .ok{display:block}
.slide .t{display:none}
@media (hover:none){.slide .m{display:none}.slide .t{display:inline}}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.62}}
@keyframes nudge{0%,68%,100%{translate:0 0}76%{translate:12px 0}84%{translate:0 0}90%{translate:6px 0}}

/* sections */
.problem{padding:104px 0}
.problem .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
.problem h2{grid-column:span 5;font-size:52px;line-height:1.05}
.problem .txt{grid-column:7/span 6;display:flex;flex-direction:column;gap:20px;font-size:19px;line-height:1.65;color:var(--body)}
.problem .kicker{font-family:var(--display);font-size:26px;font-weight:600;color:var(--ink);letter-spacing:-.02em}
.sec{padding:104px 0}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:48px}
.sec-head h2{font-size:52px;line-height:1.05;max-width:720px}
.sec-head p{font-size:18px;color:var(--muted);max-width:360px;line-height:1.55}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:28px;display:flex;flex-direction:column;gap:14px;transition:translate .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease}
.card:hover{translate:0 -4px;box-shadow:0 22px 40px -30px rgba(20,33,61,.4)}
.card .n{font-family:var(--display);font-size:44px;font-weight:600;color:var(--green);line-height:1}
.card .when{font-size:14px;font-weight:600;color:var(--soft)}
.card h3{font-size:23px;letter-spacing:-.015em}
.card p{font-size:16px;line-height:1.55;color:var(--muted)}
.expect{margin-top:48px;border-top:1px solid var(--line2);padding-top:36px;display:flex;flex-direction:column;gap:10px;max-width:640px}
.expect div{font-family:var(--display);font-size:28px;font-weight:600;letter-spacing:-.02em;line-height:1.25}
.compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.cmp{border-radius:20px;padding:30px;display:flex;flex-direction:column;gap:18px}
.cmp.bad{background:var(--card2);border:1px dashed #C3CBDA}
.cmp.good{position:relative;background:#fff;border:1px solid var(--line);box-shadow:0 30px 50px -40px rgba(20,33,61,.4)}
.cmp .tag{font-size:14px;font-weight:600;color:var(--soft)}.cmp.good .tag{color:var(--green)}
.cmp .msg{border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:10px;font-size:16px;line-height:1.6}
.cmp.bad .msg{background:#F9FAFD;color:var(--soft)}
.cmp.good .msg{background:var(--card);border:1px solid #E8EDF5;color:var(--ink2)}
.cmp .msg b{font-weight:600}.cmp.good .msg b{color:var(--ink)}
.ticks{display:flex;flex-direction:column;gap:10px;font-size:16px}
.ticks div{display:flex;gap:10px;align-items:flex-start}
.ticks svg{flex-shrink:0;margin-top:4px}
.cmp.bad .ticks{color:var(--muted)}.cmp.good .ticks{color:var(--ink2)}
.cmp .note{position:absolute;right:26px;top:20px;font-family:var(--hand);font-size:24px;color:var(--green);transform:rotate(-3deg)}
.principles{margin-top:36px;border-top:1px solid var(--line);padding-top:36px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.principles h3{font-size:21px;margin-bottom:6px}
.principles p{font-size:16px;color:var(--muted)}
.guarantee{padding:104px 0 0}
.gbox{background:var(--ink);color:var(--paper);border-radius:32px;padding:72px 64px 60px;display:flex;flex-direction:column;gap:40px}
.gtop{display:flex;justify-content:space-between;align-items:flex-end;gap:32px}
.gtop .eyebrow{color:var(--dim);margin-bottom:18px}
.gbox h2{font-size:64px;line-height:1.02;letter-spacing:-.035em;color:var(--paper);max-width:760px}
.gbox h2 .mk{color:var(--ink);background-image:linear-gradient(transparent 10%,var(--marker) 10%,var(--marker) 94%,transparent 94%);padding:0 8px;border-radius:4px}
.lightbtn{text-decoration:none;background:var(--paper);color:var(--ink);padding:18px 32px;border-radius:999px;font-weight:600;font-size:17px;white-space:nowrap}
.lightbtn:hover{color:var(--ink)}
.qual{border-top:1px solid #3A4459;padding-top:28px;display:flex;flex-direction:column;gap:18px}
.qual-head{display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap}
.qual-head h3{font-size:24px;color:var(--paper)}
.qual-head span{font-size:14px;color:var(--dim)}
.qual-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.qual-grid div{display:flex;gap:10px;font-size:16px;line-height:1.5}
.qual-grid svg{flex-shrink:0;margin-top:3px}
.terms{font-size:14px;line-height:1.5;color:var(--dim)}
.fit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-top:40px}
.fitcard{border-radius:20px;padding:30px 32px;display:flex;flex-direction:column;gap:16px}
.fitcard.yes{background:var(--card);border:1px solid var(--line)}
.fitcard.no{border:1px dashed #C3CBDA}
.fitcard h3{font-size:22px}
.fitcard div{display:flex;gap:12px;font-size:17px;line-height:1.5;color:var(--ink2)}
.fitcard.no div{color:var(--muted)}
.fitcard svg{flex-shrink:0;margin-top:4px}
.faq{border-top:1px solid var(--line);padding:104px 0}
.faq .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
.faq-head{grid-column:span 5;display:flex;flex-direction:column;gap:16px}
.faq-head h2{font-size:52px;line-height:1.05}
.faq-head p{color:var(--muted)}
.faq-list{grid-column:7/span 6;border-top:1px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;min-height:64px;padding:18px 8px 18px 0;display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:18px;font-weight:600;transition:background-color .2s ease}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:#E8EDF5}
.faq summary::after{content:"+";font-size:26px;font-weight:400;color:var(--soft);width:26px;text-align:center;flex-shrink:0}
.faq details[open] summary::after{content:"\2212";color:var(--green)}
.faq details p{padding:0 48px 22px 0;font-size:17px;line-height:1.6;color:var(--muted)}
.book{padding:0 0 104px}
.bookbox{background:var(--card);border:1px solid var(--line);border-radius:32px;padding:64px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start}
.book-left{grid-column:span 5;display:flex;flex-direction:column;gap:22px;padding-top:12px}
.book-left h2{font-size:60px;line-height:1.02;letter-spacing:-.035em}
.book-left>p{font-size:18px;line-height:1.6;color:var(--muted)}
.oncall{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:14px;transform:rotate(-.8deg)}
.oncall h3{font-size:20px}.oncall small{display:block;font-size:14px;color:var(--soft);margin-top:4px}
.oncall div{display:flex;gap:12px;font-size:16px;line-height:1.5}
.oncall i{font-style:normal;font-family:var(--hand);font-size:24px;color:var(--green);line-height:1}
.later{border:1px dashed #C3CBDA;border-radius:18px;padding:20px 22px;display:flex;flex-direction:column;gap:10px}
.later h3{font-size:19px}
.later p{font-size:16px;line-height:1.55;color:var(--muted)}
.later a.mail5{align-self:flex-start;text-decoration:none;font-weight:600;display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:2px solid var(--cta)}
.later small{font-size:14px;line-height:1.5;color:var(--soft)}
.book-right{grid-column:7/span 6}
.cal{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 30px 50px -40px rgba(20,33,61,.45)}
.cal-head{padding:16px 22px;border-bottom:1px solid #E8EDF5;font-family:var(--display);font-weight:600;font-size:19px}
.cal .calendly-inline-widget{min-width:320px;height:700px}
.cal-foot{padding:14px 22px;border-top:1px solid #E8EDF5;display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:14px;color:var(--soft)}
.cal-foot a{font-weight:600;padding:6px 0;white-space:nowrap}
footer.site{border-top:1px solid var(--line);padding:32px 0}
footer.site .wrap{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;font-size:14px;color:var(--soft)}
footer.site .flogo{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.03em;color:var(--ink);margin-bottom:10px}
footer.site .flogo{line-height:1}
footer.site .flogo .lee{position:relative;display:inline-block}
footer.site .flogo .lee svg{position:absolute;left:-2px;bottom:-5px;width:calc(100% + 4px);height:7px;overflow:visible}
footer.site .flogo .lee path{stroke:#3B6FF0}
footer.site a{color:var(--soft)}
footer.site .links{display:flex;gap:24px}
footer.site .col{display:flex;flex-direction:column;gap:8px}

/* simple pages */
.doc{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding-top:88px;padding-bottom:104px}
.toc{grid-column:span 3;display:flex;flex-direction:column;gap:12px;font-size:15px;padding-top:12px;position:sticky;top:120px;align-self:start}
.toc b{font-size:14px;color:var(--green);margin-bottom:4px}
.toc a{color:var(--muted);text-decoration:none}
.doc main{grid-column:5/span 8;display:flex;flex-direction:column;gap:48px;font-size:17px;line-height:1.7;color:var(--body)}
.doc h1{font-size:64px;line-height:1.02;letter-spacing:-.035em}
.doc h2{font-size:30px;letter-spacing:-.02em}
.doc section{display:flex;flex-direction:column;gap:14px}
.doc ul{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:8px}
.legal{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 26px;display:grid;grid-template-columns:1fr 2fr;gap:10px 24px;font-size:16px}
.legal dt{color:var(--soft)}.legal dd{margin:0}
.simple{min-height:70vh;display:flex;flex-direction:column;justify-content:center;gap:24px;padding-top:80px;padding-bottom:80px;max-width:760px}
.simple h1{font-size:72px;line-height:1.02;letter-spacing:-.035em}
.simple p{font-size:20px;color:var(--muted);line-height:1.6}

/* entrance + scroll animation */
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes sweep{from{background-size:0% 100%}to{background-size:100% 100%}}
@keyframes write{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes pop{from{opacity:0;transform:translateY(10px) rotate(-1deg) scale(.97)}to{opacity:1;transform:none}}
.in{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.d1{animation-delay:.05s}.d2{animation-delay:.15s}.d3{animation-delay:.25s}.d4{animation-delay:.35s}.d5{animation-delay:.45s}
.mk-now{animation:sweep .9s cubic-bezier(.6,0,.2,1) .7s both}
.hl-now{animation:sweep 1s cubic-bezier(.6,0,.2,1) 1.2s both}
.hand{animation:write 1s ease 1.9s both}
.reply{animation:pop .7s cubic-bezier(.2,.7,.2,1) 2.3s both}
@supports (animation-timeline: view()){
  .rv{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
  .mk-rv{animation:sweep linear both;animation-timeline:view();animation-range:entry 40% cover 40%}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}

/* tablet */
@media (max-width:1100px){
  :root{--pad:40px}
  .navwrap{padding:12px 24px 0}
  .navlinks{gap:20px}
  .hero h1{font-size:58px}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gbox h2{font-size:52px}
}
/* phone */
@media (max-width:860px){
  :root{--pad:20px}
  body{font-size:16px}
  .navwrap{top:10px;padding:10px 12px 0}
  .nav{padding:5px 5px 5px 20px}
  .logo{font-size:22px}
  .navlinks a.l{display:none}
  .pill{font-size:15px;padding:5px 5px 5px 16px;gap:10px}
  .pill .dot{width:36px;height:36px;border-radius:18px}
  .hero{grid-template-columns:1fr;padding-top:28px;padding-bottom:40px;row-gap:28px}
  .hero-copy,.hero-art{grid-column:1/-1}
  .hero-copy{gap:18px;padding-top:0}
  .hero h1{font-size:44px}
  .hero .lede{font-size:18px}
  .cta-line{flex-direction:column;align-items:stretch;gap:14px}
  .cta-line>a:not(.slide){display:none}
  .slide{width:100%;height:60px}
  .slide .knob{width:48px;height:48px;border-radius:24px}
  .slide .lbl,.slide .donelbl{font-size:15px}
  .micro{padding-left:0;text-align:center}
  .trust{flex-direction:column}
  .mail{transform:rotate(-1deg)}
  .mail-body{font-size:15px}
  .hand{font-size:23px}
  .reply{width:88%}
  .problem{padding:48px 0}
  .problem .wrap{grid-template-columns:1fr;row-gap:16px}
  .problem h2,.problem .txt{grid-column:1/-1}
  .problem h2{font-size:34px;line-height:1.06}
  .problem .txt{font-size:17px;gap:14px}
  .problem .kicker{font-size:22px}
  .sec{padding:48px 0}
  .sec-head{flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:24px}
  .sec-head h2{font-size:34px;line-height:1.06}
  .sec-head p{font-size:16px}
  .steps{grid-template-columns:1fr;gap:12px}
  .card{padding:20px;gap:6px;display:grid;grid-template-columns:34px 1fr;column-gap:14px}
  .card .n{font-size:32px;grid-row:1/span 3}
  .card>*:not(.n){grid-column:2}
  .card h3{font-size:19px}.card p{font-size:15px}
  .expect{margin-top:24px;padding-top:24px}
  .expect div{font-size:22px}
  .compare{grid-template-columns:1fr;gap:16px}
  .cmp{padding:18px;gap:12px}
  .cmp .msg{padding:14px;font-size:15px}
  .cmp .note{position:static;align-self:flex-start;font-size:21px}
  .principles{grid-template-columns:1fr;gap:16px;margin-top:22px;padding-top:22px}
  .principles h3{font-size:18px}
  .guarantee{padding:48px 0 0}
  .guarantee .wrap{padding:0 12px}
  .gbox{border-radius:28px;padding:34px 24px 28px;gap:24px}
  .gtop{flex-direction:column;align-items:stretch;gap:20px}
  .gbox h2{font-size:38px;line-height:1.05}
  .lightbtn{text-align:center;font-size:16px;padding:16px}
  .qual-grid{grid-template-columns:1fr;gap:12px}
  .qual-head h3{font-size:20px}
  .qual-grid div{font-size:15px}
  .fit{grid-template-columns:1fr;gap:16px;margin-top:20px}
  .fitcard{padding:20px;gap:12px}
  .fitcard h3{font-size:19px}.fitcard div{font-size:16px}
  .faq{padding:48px 0}
  .faq .wrap{grid-template-columns:1fr;row-gap:16px}
  .faq-head,.faq-list{grid-column:1/-1}
  .faq-head h2{font-size:34px;line-height:1.06}
  .faq summary{font-size:16px;min-height:56px;padding:16px 0}
  .faq details p{padding:0 0 18px;font-size:15px}
  .book{padding:48px 0}
  .book .wrap{padding:0 12px}
  .bookbox{grid-template-columns:1fr;padding:28px 14px 20px;row-gap:18px;border-radius:28px}
  .book-left,.book-right{grid-column:1/-1}
  .book-left{padding:0 6px;gap:16px}
  .book-left h2{font-size:40px}
  .book-left>p{font-size:16px}
  .oncall{padding:18px;transform:rotate(.6deg)}
  .oncall div{font-size:15px}
  .cal-head{padding:14px 16px;font-size:18px}
  .cal-foot{padding:12px 16px}
  footer.site .wrap{flex-direction:column;gap:12px}
  .doc{grid-template-columns:1fr;padding-top:40px;padding-bottom:56px}
  .toc{display:none}
  .doc main{grid-column:1/-1;gap:36px;font-size:16px}
  .doc h1{font-size:44px}
  .doc h2{font-size:24px}
  .legal{grid-template-columns:1fr;gap:2px}
  .legal dd{margin-bottom:10px}
  .simple h1{font-size:46px}
  .simple p{font-size:17px}
}
.doc header{display:flex;flex-direction:column;gap:18px}
.doc header p:last-child{font-size:19px}
@media (max-width:860px){.doc header p:last-child{font-size:17px}}
.card.result{background:var(--ink);border-color:var(--ink);box-shadow:0 30px 50px -30px rgba(20,33,61,.55)}
.card.result .n{color:var(--cta2)}
.card.result .when{color:var(--dim)}
.card.result h3{color:var(--paper)}
.card.result p{color:var(--dim2)}
.why{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-bottom:56px}
.whyc{border-top:2px solid var(--ink);padding-top:18px;display:flex;flex-direction:column;gap:10px}
.whyc .wn{font-family:var(--display);font-weight:600;font-size:15px;color:var(--ink);background:var(--marker);width:28px;height:28px;border-radius:14px;display:flex;align-items:center;justify-content:center}
.whyc h3{font-size:22px;letter-spacing:-.015em}
.whyc p{font-size:16px;line-height:1.55;color:var(--muted)}
.proof-label{font-family:var(--hand);font-size:26px;color:var(--green);margin-bottom:16px;transform:rotate(-1deg);transform-origin:left}
.principles.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1100px){.why{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}}
@media (max-width:860px){.why{grid-template-columns:1fr;gap:22px;margin-bottom:32px}.whyc h3{font-size:19px}.whyc p{font-size:15px}.proof-label{font-size:23px;margin-bottom:12px}.principles.two{grid-template-columns:1fr}}
.fastnote{display:flex;align-items:flex-start;gap:10px;margin-top:20px;font-size:15px;line-height:1.5;color:var(--muted)}
.fastnote svg{flex-shrink:0;margin-top:2px}
@media (max-width:860px){.fastnote{font-size:14px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-top:14px}}

/* nav "Book a call" waits until the hero slider has scrolled away */
.pill.late{--pw:220px;max-width:var(--pw);overflow:hidden;justify-content:flex-end;
  transition:max-width 1s cubic-bezier(.65,0,.35,1),padding 1s cubic-bezier(.65,0,.35,1),margin 1s cubic-bezier(.65,0,.35,1),opacity .7s ease .3s,gap .5s cubic-bezier(.22,1,.36,1),font-size .5s cubic-bezier(.22,1,.36,1),transform .2s ease,box-shadow .2s ease}
.js .pill.late:not(.show){max-width:0;opacity:0;padding-left:0;padding-right:0;margin-left:-30px;overflow:hidden;pointer-events:none;
  transition:max-width .9s cubic-bezier(.65,0,.35,1),padding .9s cubic-bezier(.65,0,.35,1),margin .9s cubic-bezier(.65,0,.35,1),opacity .45s ease .05s}
.nav{overflow:hidden;transition:padding .9s cubic-bezier(.65,0,.35,1)}
.nav:not(.cta-off){transition:padding 1s cubic-bezier(.65,0,.35,1)}
.js .nav.cta-off{padding-right:30px}
.nav .navlinks{min-height:56px}

/* example email: sits lower, softly out of focus, and clears over the first few % of scrolling */
@media (min-width:861px){
  .hero-art{padding-top:clamp(28px,7vh,72px)}
  .js .hero-art.soft>*{
    filter:blur(calc((1 - var(--k,0)) * 1.2px));
    opacity:calc(.62 + .38 * var(--k,0));
    translate:0 calc((1 - var(--k,0)) * 18px);
    transition:filter .45s ease-out,opacity .45s ease-out,translate .6s cubic-bezier(.22,1,.36,1)
  }
}
@media (max-width:860px){
  .js .nav.cta-off{padding-right:20px}
  .js .pill.late:not(.show){margin-left:-20px}
  .nav .navlinks{min-height:46px}
}
@media (prefers-reduced-motion: reduce){
  .pill.late,.js .pill.late:not(.show),.nav{transition:none}
  .js .hero-art.soft>*{filter:none;opacity:1;translate:0 0}
}
@media (max-width:520px){ .mail-top span{display:none} }
.pill.late .dot{flex-shrink:0}

/* compact menu once the visitor scrolls (the class is set by site.js) */
.navwrap{transition:top .5s cubic-bezier(.22,1,.36,1),max-width .6s cubic-bezier(.22,1,.36,1),padding-top .5s cubic-bezier(.22,1,.36,1)}
.nav{transition:padding-top .5s cubic-bezier(.22,1,.36,1),padding-bottom .5s cubic-bezier(.22,1,.36,1),padding-left .5s cubic-bezier(.22,1,.36,1),padding-right .9s cubic-bezier(.65,0,.35,1)}
.nav:not(.cta-off){transition:padding-top .5s cubic-bezier(.22,1,.36,1),padding-bottom .5s cubic-bezier(.22,1,.36,1),padding-left .5s cubic-bezier(.22,1,.36,1),padding-right 1s cubic-bezier(.65,0,.35,1)}
.logo{transition:font-size .5s cubic-bezier(.22,1,.36,1)}
.nav .navlinks{transition:gap .5s cubic-bezier(.22,1,.36,1),font-size .5s cubic-bezier(.22,1,.36,1),min-height .5s cubic-bezier(.22,1,.36,1)}
.pill .dot{transition:width .5s cubic-bezier(.22,1,.36,1),height .5s cubic-bezier(.22,1,.36,1)}
.pill:not(.late){transition:padding .5s cubic-bezier(.22,1,.36,1),gap .5s cubic-bezier(.22,1,.36,1),font-size .5s cubic-bezier(.22,1,.36,1),transform .2s ease,box-shadow .2s ease}
@media (min-width:861px){
  .nav-compact .navwrap{top:10px;padding-top:10px}
  .nav-compact .nav{padding-top:5px;padding-bottom:5px}
  .nav-compact .nav:not(.cta-off){padding-right:5px}
  .nav-compact .nav .navlinks{min-height:44px}
  .nav-compact .pill{padding-top:4px;padding-bottom:4px;padding-right:4px}
  .nav-compact .pill .dot{width:36px;height:36px}
}
@media (max-width:860px){
  .nav-compact .navwrap{top:6px;padding-top:6px}
  .nav-compact .nav{padding-top:3px;padding-bottom:3px}
  .nav-compact .nav:not(.cta-off){padding-right:3px}
  .nav-compact .nav .navlinks{min-height:40px}
  .nav-compact .pill{padding-top:3px;padding-bottom:3px;padding-right:3px}
  .nav-compact .pill .dot{width:32px;height:32px}
}
@media (prefers-reduced-motion: reduce){
  .navwrap,.nav,.nav:not(.cta-off),.logo,.nav .navlinks,.pill .dot,.pill:not(.late){transition:none}
}

/* frosted band behind the menu: content scrolling past the top gets blurred.
   Its strength follows the scroll position (--fb from site.js), so it fades in and out gradually. */
.navwrap::before{content:"";position:fixed;left:0;right:0;top:0;height:84px;z-index:-1;pointer-events:none;
  background:rgba(245,247,251,.55);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);
  -webkit-mask-image:linear-gradient(#000 0%,#000 45%,rgba(0,0,0,.75) 62%,rgba(0,0,0,.4) 78%,rgba(0,0,0,.12) 90%,transparent 100%);
  mask-image:linear-gradient(#000 0%,#000 45%,rgba(0,0,0,.75) 62%,rgba(0,0,0,.4) 78%,rgba(0,0,0,.12) 90%,transparent 100%);
  opacity:0}
@media (max-width:860px){ .navwrap::before{height:70px} }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .navwrap::before{background:rgba(245,247,251,.92)}
}
/* the smaller menu sits higher */
@media (min-width:861px){ .nav-compact .navwrap{top:0;padding-top:4px} }
@media (max-width:860px){ .nav-compact .navwrap{top:0;padding-top:4px} }

/* ---------- one timing for everything in the menu ----------
   The menu shrinking, moving up, the blur behind it and the "Book a call" button
   all use the same easing, so they move together as one piece. */
:root{--nav-ease:cubic-bezier(.4,0,.2,1);--nav-dur:.45s}
.nav-compact .navwrap::before{opacity:1}
.navwrap::before{transition:opacity var(--nav-dur) var(--nav-ease)}
.navwrap{transition:top var(--nav-dur) var(--nav-ease),max-width var(--nav-dur) var(--nav-ease),padding-top var(--nav-dur) var(--nav-ease)}
.nav,.nav:not(.cta-off){transition:padding var(--nav-dur) var(--nav-ease)}
.logo{transition:font-size var(--nav-dur) var(--nav-ease)}
.nav .navlinks{transition:gap var(--nav-dur) var(--nav-ease),font-size var(--nav-dur) var(--nav-ease),min-height var(--nav-dur) var(--nav-ease)}
.pill .dot{transition:width var(--nav-dur) var(--nav-ease),height var(--nav-dur) var(--nav-ease)}
.pill:not(.late){transition:padding var(--nav-dur) var(--nav-ease),gap var(--nav-dur) var(--nav-ease),font-size var(--nav-dur) var(--nav-ease),transform .2s ease,box-shadow .2s ease}
.pill.late{transition:max-width var(--nav-dur) var(--nav-ease),padding var(--nav-dur) var(--nav-ease),margin var(--nav-dur) var(--nav-ease),gap var(--nav-dur) var(--nav-ease),font-size var(--nav-dur) var(--nav-ease),opacity .6s ease .2s,transform .2s ease,box-shadow .2s ease}
.js .pill.late:not(.show){transition:max-width var(--nav-dur) var(--nav-ease),padding var(--nav-dur) var(--nav-ease),margin var(--nav-dur) var(--nav-ease),opacity .4s ease}
@media (prefers-reduced-motion: reduce){
  .navwrap::before,.navwrap,.nav,.nav:not(.cta-off),.logo,.nav .navlinks,.pill .dot,.pill:not(.late),.pill.late,.js .pill.late:not(.show){transition:none}
}

/* the menu keeps a fixed amount of space in the page, so shrinking it never moves the content */
.navwrap{height:90px;pointer-events:none}
.navwrap .nav{pointer-events:auto}
@media (max-width:1100px){ .navwrap{height:86px} }
@media (max-width:860px){ .navwrap{height:68px} }
/* no menu animation while the page is still loading or restoring its scroll position */
.nav-instant .navwrap,.nav-instant .navwrap::before,.nav-instant .nav,.nav-instant .logo,.nav-instant .navlinks,.nav-instant .pill,.nav-instant .pill .dot{transition:none!important}

/* "Our approach": four separate qualities (cards with icons), not numbered steps */
.whyc{border-top:0;padding:26px 24px;background:var(--paper);border:1px solid var(--line);border-radius:20px}
.whyc .wi{width:44px;height:44px;border-radius:12px;background:var(--marker);display:flex;align-items:center;justify-content:center;margin-bottom:4px}
@media (max-width:860px){ .whyc{padding:18px;border-radius:16px} .whyc .wi{width:38px;height:38px;border-radius:11px} .whyc .wi svg{width:20px;height:20px} }

/* the menu change on scroll is kept quiet: same width, same text size, it only gets a little
   slimmer and moves up, quickly. The "Book a call" button keeps its slower entrance. */
.pill.late{transition:max-width .8s cubic-bezier(.45,0,.2,1),padding .45s var(--nav-ease),margin .8s cubic-bezier(.45,0,.2,1),opacity .6s ease .2s,transform .2s ease,box-shadow .2s ease}
.js .pill.late:not(.show){transition:max-width .8s cubic-bezier(.45,0,.2,1),padding .8s cubic-bezier(.45,0,.2,1),margin .8s cubic-bezier(.45,0,.2,1),opacity .4s ease}
.nav.cta-off,.nav:not(.cta-off){transition:padding-top var(--nav-dur) var(--nav-ease),padding-bottom var(--nav-dur) var(--nav-ease),padding-right .8s cubic-bezier(.45,0,.2,1)}

/* the no-risk explanation under the guarantee is part of the promise, so it is readable, not small print */
.gbox .terms{font-size:17px;line-height:1.55;color:#E3E8F1;max-width:820px}
@media (max-width:860px){ .gbox .terms{font-size:15px} }
.gsub{margin-top:20px;font-size:18px;line-height:1.55;color:#E3E8F1;max-width:640px}
@media (max-width:860px){ .gsub{margin-top:14px;font-size:16px} }

/* guarantee: button with a quiet note, and a caption over the example replies */
.gcta{display:flex;flex-direction:column;align-items:center;gap:10px;flex-shrink:0}
.gcta small{font-size:13px;color:var(--dim)}
.cv-cap{font-size:14px;font-weight:600;color:var(--dim);margin-bottom:12px}
@media (max-width:860px){ .gcta{width:100%;align-items:stretch;text-align:center} }
.gtop>div:first-child{flex:1 1 0;min-width:0}
.gcta{flex-direction:row;align-items:center;gap:18px;margin-top:28px}
@media (max-width:860px){ .gcta{flex-direction:column;align-items:stretch;gap:10px;margin-top:20px} }

/* quick questions before the calendar */
.cal-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.qz-step{font-family:var(--text);font-size:14px;font-weight:500;color:var(--soft);white-space:nowrap}
.qz{padding:30px 26px 22px;min-height:460px;display:flex;flex-direction:column}
.qz fieldset{border:0;margin:0;padding:0;min-width:0}
.qz-q:not([hidden]){animation:qzIn .35s cubic-bezier(.22,1,.36,1) both}
@keyframes qzIn{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
.qz legend{font-family:var(--display);font-weight:600;font-size:24px;letter-spacing:-.015em;line-height:1.2;margin-bottom:20px;padding:0}
.qz-opts{display:flex;flex-direction:column;gap:10px}
.qz-opt{text-align:left;font:inherit;font-size:17px;color:var(--ink);padding:16px 18px;border-radius:14px;border:1px solid var(--line);background:var(--card);cursor:pointer;transition:border-color .2s ease,background-color .2s ease}
.qz-opt:hover{border-color:var(--ink)}
.qz-opt[aria-pressed="true"]{background:var(--marker);border-color:var(--marker)}
.qz-opt:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.qz-foot{margin-top:auto;padding-top:22px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.qz-back,.qz-skip,.qz-anyway{background:none;border:0;padding:6px 0;font:inherit;font-size:15px;color:var(--soft);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.qz-back:hover,.qz-skip:hover,.qz-anyway:hover{color:var(--ink)}
.qz-skip{margin-left:auto}
.qz-no{padding:30px 26px;display:flex;flex-direction:column;align-items:flex-start;gap:14px;min-height:460px}
.qz-no h3{font-size:24px;letter-spacing:-.015em}
.qz-no p{font-size:16px;line-height:1.55;color:var(--muted)}
.cal-slot{min-width:320px;height:700px}
@media (max-width:860px){
  .qz{padding:22px 16px 16px;min-height:0}
  .qz legend{font-size:21px;margin-bottom:16px}
  .qz-opt{font-size:16px;padding:14px 16px}
  .qz-no{padding:22px 16px;min-height:0}
}
@media (prefers-reduced-motion: reduce){ .qz-q:not([hidden]){animation:none} }
[hidden]{display:none!important}
.cal .calendly-inline-widget{height:560px!important}

/* results from past campaigns (placeholders to fill in) */
.results{padding:104px 0 0}
.res-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:40px}
.res-head h2{font-size:52px;line-height:1.05;max-width:720px}
.res-head p{font-size:16px;color:var(--soft);max-width:320px}
.res-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.res{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:36px 34px;display:flex;flex-direction:column;gap:10px}
.res-num{font-family:var(--display);font-weight:700;font-size:72px;line-height:1;letter-spacing:-.04em;color:var(--green)}
.res-what{font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:-.015em;color:var(--ink)}
.res-quote{margin-top:10px;font-size:17px;line-height:1.6;color:var(--muted)}
.res-who{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);font-size:14px;font-weight:600;color:var(--soft)}
@media (max-width:860px){
  .results{padding:56px 0 0}
  .res-head{flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:24px}
  .res-head h2{font-size:34px}
  .res-grid{grid-template-columns:1fr;gap:16px}
  .res{padding:26px 22px}
  .res-num{font-size:56px}
  .res-what{font-size:19px}
}