/* Measured against themochi.app at 390, 1440 and 1920 CSS pixels. */
:root{--font-body:Inter,Arial,sans-serif}
body{font-family:var(--font-body)}
.hero h1{font:600 64px/1.1 'Clash Display',Inter,sans-serif}
.hero-description{font:400 20px/1.4 Inter,Arial,sans-serif}
.section-heading h2,.faq h2,#services .buying-copy h2,#reporting .reporting-intro h2,#the-difference>#change-heading,.client-wall-heading h2,#pricing .pricing-heading-row h2,.getting-heading h2{font:600 48px/1.1 'Clash Display',Inter,sans-serif;letter-spacing:0}
#services #buying-eyebrow,.reporting-intro .eyebrow{font:500 20px/1.4 Inter,Arial,sans-serif;text-transform:none}
#services .buying-copy h2{margin:24px 0;max-width:540px}
#services #buying-description,.reporting-intro>p,.section-heading>p:last-child,#pricing .pricing-heading-row p{font:400 20px/1.4 Inter,Arial,sans-serif}
.hero-note,.meetings-label,.client-all{font-size:16px;line-height:1.4}
body .button,body .button.secondary,body .hero .button,#services .buying-copy .button,#pricing .plan .button,.getting-heading .button.secondary{font:500 18px/1.45 Inter,Arial,sans-serif;min-height:50px;padding:12px 20px;border-radius:12px}
body .header nav{font:400 16px/1.4 Inter,Arial,sans-serif}
body .header .button.small,body .header .login{font:500 16px/1.5 Inter,Arial,sans-serif;min-height:36px;padding:6px 12px;border-radius:100px}
#pricing .plan h3{font:500 20px/1.4 Inter,Arial,sans-serif}
#pricing .plan>p:not(.unit-price),#pricing .plan li{font:400 16px/1.4 Inter,Arial,sans-serif}
#pricing .plan-price bdi{font:600 32px/1 'Clash Display',Inter,sans-serif}
#pricing .plan-price>span{font-size:12px;line-height:1.4}
#pricing .unit-price,#pricing .billing-link,.pricing-note{font-size:14px;line-height:1.5}
#pricing .plan-badge,#pricing .currency-switcher button,.pricing-assurance{font-size:16px;line-height:1.4}
.credit-policy summary,.credit-policy>div{font-size:16px;line-height:1.5}
.faq summary{font:500 20px/1.4 Inter,Arial,sans-serif}
.faq details p,.faq>div>p:last-child{font:400 16px/1.5 Inter,Arial,sans-serif}
.getting-steps h3{font:500 18px/1.45 Inter,Arial,sans-serif}
.getting-steps p{font:400 16px/1.4 Inter,Arial,sans-serif}
.footer-columns h2{font:500 16px/1.5 Inter,Arial,sans-serif}
.footer-columns a,.footer-contact p,.footer-legal{font:400 16px/1.4 Inter,Arial,sans-serif}
.client-note strong{font-size:16px}.client-note small,.client-note a,.client-note-label{font-size:14px;line-height:1.4}
.client-note blockquote{font-size:18px;line-height:1.45}.note-context p{font-size:16px;line-height:1.4}

/* Natural-height comparison cards, with viewport travel handled by the scene. */
#the-difference .change-stage{justify-content:flex-start;gap:16px;padding:8px 0 16px;overflow:hidden}
#the-difference .change-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:24px;max-width:1000px;max-height:none;flex:1;min-height:0;overflow:clip;padding-bottom:20px}
#the-difference .change-card{position:relative;inset:auto;display:flex;flex-direction:column;justify-content:flex-start;min-height:0;height:auto;padding:48px 16px 16px;border:0;border-radius:32px;background:#f2f2f2;transform:translate(calc(var(--stack-progress)*50% + var(--stack-progress)*12px),var(--before-read,0px));opacity:calc(1 - var(--stack-progress)*.8)}
#the-difference .change-after{background:#fff;box-shadow:inset 0 0 0 1px #e5e5e7,0 6px 12px #201b300d;opacity:1;transform:translate(calc(var(--stack-progress)*-50% - var(--stack-progress)*12px),var(--after-read,0px))}
#the-difference .change-card h3{font:600 32px/1.2 'Clash Display',Inter,sans-serif;white-space:normal;margin:0 16px 8px;color:#858585}
#the-difference .change-after h3{color:var(--comparison-accent)}
#the-difference .change-card>p{font:500 16px/1.5 Inter,Arial,sans-serif;color:#111;margin:0 16px 32px}
#the-difference .change-card ul{display:grid;gap:20px;margin:0 16px 32px;padding:0;list-style:none}
#the-difference .change-card li{display:flex;align-items:flex-start;gap:12px;padding:0;font:400 18px/1.45 Inter,Arial,sans-serif;color:#111}
#the-difference .change-card li:before{content:none}
#the-difference .comparison-check{display:grid;place-items:center;flex:none;width:24px;height:24px;margin-top:1px;border-radius:8px;background:#ddd;color:#858585;font:700 17px/1 Inter,Arial,sans-serif}
#the-difference .comparison-check:before{content:'?'}
#the-difference .change-after .comparison-check{background:var(--comparison-accent);color:white}
#the-difference .change-after .comparison-check:before{content:none}
.comparison-check svg{width:24px;height:24px}
#the-difference .comparison-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0}
#the-difference .comparison-details>div{padding:16px;border-radius:16px;background:white;min-width:0;min-height:92px}
#the-difference .comparison-details dt{font:500 16px/1.5 Inter,Arial,sans-serif;margin:0 0 12px}
#the-difference .comparison-details dd{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;min-height:24px;margin:0}
#the-difference .comparison-details strong{font:500 24px/1 Inter,Arial,sans-serif;overflow-wrap:normal}
#the-difference .comparison-details dd>span{font:400 16px/1 Inter,Arial,sans-serif;padding:4px 8px;border-radius:24px;background:#e2f6ed;color:#209969;white-space:normal}
#the-difference .comparison-focus{min-height:108px;grid-column:1/-1}
#the-difference .comparison-focus strong{font-size:28px;line-height:1.15}
#the-difference .change-terms{font:400 12px/1.5 Inter,Arial,sans-serif;color:#82828a;max-width:780px;flex:none}
@media(min-width:761px) and (max-width:1100px){
 #the-difference .change-card h3{font-size:28px}
 #the-difference .change-card ul{margin-inline:8px}
 #the-difference .change-card{padding-top:36px}
 #services .buying-copy h2{font-size:40px}
 .client-composition{grid-template-columns:1fr 1fr}
 .client-wall-heading{grid-column:1/-1;grid-row:1}
 .note-martyn,.note-tyler,.note-marco,.note-context{grid-column:auto;grid-row:auto}
}
@media(max-width:760px){
 .hero h1{font-size:42px;line-height:1.1}
 .hero-description{font-size:16px;line-height:1.4}
 .section-heading h2,.faq h2,#services .buying-copy h2,#reporting .reporting-intro h2,#the-difference>#change-heading,.client-wall-heading h2,#pricing .pricing-heading-row h2,.getting-heading h2{font-size:32px;line-height:1.1}
 #services #buying-eyebrow,.reporting-intro .eyebrow{font-size:16px}
 #services #buying-description,.reporting-intro>p,.section-heading>p:last-child,#pricing .pricing-heading-row p{font-size:16px;line-height:1.4}
 .hero-note,.meetings-label{font-size:14px}
 #pricing .plan h3{font-size:16px}
 #pricing .plan>p:not(.unit-price),#pricing .plan li{font-size:15px;line-height:1.4}
 .faq summary{font-size:16px}.faq details p,.faq>div>p:last-child{font-size:15px}
 .getting-steps h3{font-size:16px}.getting-steps p{font-size:14px}
 .footer-columns a,.footer-contact p,.footer-legal{font-size:15px}
 .footer-legal nav{gap:14px}
 #the-difference .change-cards{max-width:430px;grid-template-columns:minmax(0,1fr);gap:0}
 #the-difference .change-card{grid-column:1;grid-row:1;padding:32px 16px 16px;border-radius:32px;transform:translateY(var(--before-read,0px))}
 #the-difference .change-after{transform:translateY(calc((1 - var(--stack-progress))*110% + var(--after-read,0px)))}
 #the-difference .change-card h3{font-size:20px;line-height:1.2;margin-inline:0}
 #the-difference .change-card>p{font-size:15px;line-height:1.5;margin:0 0 32px}
 #the-difference .change-card ul{margin:0 0 32px;gap:20px}
 #the-difference .change-card li{font-size:15px;line-height:1.45;gap:12px}
 #the-difference .comparison-details dt{font-size:15px;line-height:1.5}
 #the-difference .comparison-details>div{padding:16px 12px}
 #the-difference .comparison-details strong{font-size:24px;line-height:1.15}
 #the-difference .comparison-details dd>span{font-size:16px}
 #the-difference .comparison-focus strong{font-size:24px}
 #the-difference .change-terms{font-size:11px}
}
@media(prefers-reduced-motion:reduce){
 #the-difference .change-stage{height:auto;overflow:visible}
 #the-difference .change-cards{flex:none;overflow:visible;align-items:stretch}
 #the-difference .change-card{transform:none;opacity:1}
}
@media(max-width:760px) and (prefers-reduced-motion:reduce){
 #the-difference .change-cards{gap:24px}
 #the-difference .change-card{grid-row:auto}
}