/* softcupid.com marketing site — one stylesheet for every marketing page.
   1 tokens, base, header + mega menus, homepage sections, footer (from the redesign)
   2 shared inner-page rules  3 site additions  4 the two preserved original sections (.classic)
   Service / AI / process / directory layouts are in pages.css (loaded only there). */
/* Softcupid — a little software, a lot of heart. */
:root{--paper:#f8f8f2;--ink:#26322d;--muted:#727971;--brand:#1BCEDF;--brand-blue:#5B7FEA;--brand-deep:#0B6F80;--brand-blue-deep:#3A5CCC;--brand-ink:#111735;--brand-grad:linear-gradient(135deg,#1BCEDF 0%,#5B7FEA 100%);--brand-grad-hover:linear-gradient(135deg,#17AEC0 0%,#5B7FEA 100%);--brand-grad-deep:linear-gradient(135deg,#0B6F80 0%,#3A5CCC 100%);--brand-wash:#e0f5f8;--brand-tint:#bdeef4;--on-brand-deep:#f4fdff;--on-brand-deep-soft:#dcf3f6;--on-brand-deep-line:#c8f1f6;--line:#dedfd6;--serif:Georgia,'Times New Roman',serif;--ease:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:110px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif;line-height:1.65;-webkit-font-smoothing:antialiased}
body.menu-open{overflow:hidden}
::selection{background:var(--brand-tint);color:var(--ink)}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}
button{color:inherit;cursor:pointer}
button:disabled{cursor:default}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--brand-blue-deep);outline-offset:5px}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--brand-blue-deep);outline-offset:3px}
svg{display:block}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-family:'Manrope',sans-serif}
h2{font-size:clamp(36px,3.5vw,52px);font-weight:500;letter-spacing:-2.5px;line-height:1.18}
h3{font-weight:650;line-height:1.35}
.container,.wrap{width:min(1180px,calc(100% - 48px));margin-inline:auto}
.section{padding-block:112px}
.eyebrow{font-size:10px;font-weight:650;letter-spacing:1.8px;display:flex;align-items:center;gap:10px;line-height:1.5}
.serif-word{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-2px}
.muted{color:#8a9085}
.status-dot{display:inline-block;flex:none;width:6px;height:6px;border-radius:50%;background:#729573;box-shadow:0 0 0 4px #72957312}
.button{display:inline-flex;align-items:center;justify-content:center;gap:25px;min-height:49px;border-radius:6px;padding:13px 21px;font-size:12px;line-height:1.5;font-weight:550;border:1px solid transparent;transition:background .25s,transform .25s,box-shadow .25s}
.button>span{font-size:19px;font-weight:400;line-height:1}
.button:hover{transform:translateY(-3px);box-shadow:0 6px 15px #27352c12}
.button-dark{background:var(--ink);color:white}
.button-dark:hover{background:#3b4d40}
.button-brand{background:var(--brand-grad);color:var(--brand-ink)}
.button-brand:hover{background:var(--brand-grad-hover)}
.button-cream{background:var(--paper);color:var(--ink)}
.button-outline{background:transparent;border-color:#d4d8cf}
.button-outline:hover{background:#eeefe7}
.text-button{font-size:12px;display:inline-flex;align-items:center;gap:16px;font-weight:550}
.text-button>span{font-size:18px;transition:transform .25s}
.text-button:hover>span{transform:translate(3px,-2px)}
.skip-link{position:fixed;z-index:100;top:-80px;left:20px;padding:12px 20px;background:var(--ink);color:#fff}
.skip-link:focus{top:10px}
.scroll-progress{position:fixed;top:0;left:0;width:100%;height:2px;background:var(--brand-grad);transform-origin:left;transform:scaleX(0);z-index:60}
/* Navigation */
.header{height:98px;position:sticky;top:0;z-index:40;background:#f8f8f2ee;backdrop-filter:blur(16px);transition:box-shadow .3s,height .3s}
.header.scrolled{height:78px;box-shadow:0 1px var(--line)}
.nav-wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:30px}
.brand{display:inline-flex;align-items:center;gap:10px;flex:none}
.brand>span{font-size:26px;font-weight:650;letter-spacing:-1.4px;line-height:1}
.brand-dot{color:var(--brand-deep)}
.brand-symbol{width:33px;height:33px;fill:none;stroke:var(--brand-deep);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.navigation{display:flex;align-items:center}
.navigation>a{position:relative}
.navigation>a:after{content:'';position:absolute;bottom:-5px;left:0;width:100%;height:1px;background:var(--brand-grad);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.navigation>a:hover:after,.navigation>a.active:after{transform:scaleX(1)}
.nav-cta{min-height:42px;padding:10px 18px;gap:30px}
.mobile-contact,.menu-toggle{display:none}
/* The opening act */
.hero{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:36px}
.hero-copy{padding-bottom:25px;position:relative;z-index:2}
.hero .eyebrow{margin-bottom:27px;font-size:10px}
.hero h1{line-height:1.06;letter-spacing:-4.5px;font-weight:500;margin-bottom:29px}
.hero h1 .serif-word{color:var(--brand-deep);position:relative;display:inline-block;font-size:1.07em;letter-spacing:-4.5px}
.hero h1 .serif-word svg{position:absolute;bottom:-15px;left:-2px;width:100%;height:17px;fill:none;stroke:var(--brand);stroke-width:1.6;opacity:.6}
.hero-description{color:#778075;margin-bottom:28px}
.hero-actions{display:flex;align-items:center}
.hero-actions .button{gap:22px}
.hero-actions .text-button{font-size:11px;gap:12px}
/* A living workflow, made from real interface elements */
.workflow-scene{aspect-ratio:560/510;position:relative;isolation:isolate;background-image:radial-gradient(#bec8b97a .75px,transparent .75px);background-size:17px 17px;margin-top:-18px}
.workflow-scene:before{content:'';position:absolute;inset:10% 8%;background:radial-gradient(ellipse,#e7eadd70,transparent 70%);z-index:-1}
.orbit{position:absolute;border:1px solid #dce1d270;left:50%;top:50%;translate:-50% -50%;border-radius:50%;z-index:-1}
.orbit-one{width:59%;aspect-ratio:1}
.orbit-two{width:91%;aspect-ratio:1}
.workflow-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.line-base{stroke:#c8cfbf;stroke-width:1.4}
.line-moving{stroke:#8da078;stroke-width:2;stroke-dasharray:5 300;stroke-linecap:round;animation:flow 12s linear infinite}
.flow-card{position:absolute;background:#fffefb;border:1px solid #e0e3d8;box-shadow:0 10px 28px #3f503a08,0 2px 3px #3f503a05;border-radius:10px;transition:transform .4s var(--ease),box-shadow .4s}
.flow-card:hover{transform:translateY(-5px);box-shadow:0 17px 35px #3f503a14}
.lead-card{display:flex;align-items:center;padding:18px}
.flow-card strong{display:block;font-weight:550}
.app-icon{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;flex:none}
.app-icon svg,.service-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.icon-brand{background:var(--brand-wash);color:var(--brand-deep)}
.icon-blue{background:#eef2fa;color:#8b9dbc}
.icon-purple{background:#f2eefa;color:#9d8cac}
.tiny-check{background:#edf2e7;display:grid;place-items:center;border-radius:50%;color:#759361;margin-left:auto}
.hub{position:absolute;left:43%;top:43%;width:70px;height:70px;border-radius:19px;background:var(--brand-grad);box-shadow:0 0 0 9px var(--brand-wash),0 0 0 10px #dce0d1,0 10px 22px #1BCEDF33;display:grid;place-items:center;z-index:3;transform:rotate(-6deg)}
.hub .brand-symbol{width:42px;height:42px;stroke:var(--brand-ink);stroke-width:3.5}
.hub-pulse{position:absolute;inset:-12px;border:1px solid #1BCEDF66;border-radius:26px;animation:pulse 4s ease-out infinite;z-index:-1}
.followup-card{transform:rotate(-3deg)}
.meeting-card{transform:rotate(3deg)}
.flow-card-top{display:flex;align-items:center;justify-content:space-between}
.flow-card-top .app-icon{border-radius:8px}
.flow-card-top .app-icon svg{width:18px;height:18px}
.flow-card p{font-size:10px;line-height:1.7;color:#969a8e;margin-top:6px}
.hero-enter{animation:hero-in 1s var(--ease) both}
.hero .eyebrow{animation-delay:.1s}
.hero h1{animation-delay:.17s}
.hero-description{animation-delay:.25s}
.hero-actions{animation-delay:.32s}
.workflow-scene{animation-delay:.25s}
/* Familiar tools */
.integrations{border-block:1px solid var(--line)}
.integrations-inner{display:flex;align-items:center;justify-content:space-between;min-height:112px}
.integrations-inner>p{font-size:10px;line-height:1.8;color:#93978a;white-space:nowrap}
.integrations-inner>p strong{font-weight:450;color:#727968}
.tool-logos{display:flex;align-items:center;justify-content:space-between;gap:30px;flex:1;color:#78816e}
.tool-logo{display:flex;align-items:center;font-size:25px;font-weight:650;letter-spacing:-1px;line-height:1}
.hubspot{font-size:24px;font-weight:550;letter-spacing:-1.2px}
.hubspot-o{position:relative}
.hubspot-o:after{content:'';position:absolute;width:3px;height:10px;background:currentColor;left:8px;top:-6px;transform:rotate(-25deg)}
.shopify{font-size:24px;font-style:italic;gap:5px}
.shopify svg{width:22px;height:28px}
.google{font-weight:500;font-size:26px;letter-spacing:-1.5px}
.slack{gap:6px;font-weight:700;letter-spacing:-1px}
.slack svg{width:20px;height:20px}
.stripe{font-weight:750;font-size:29px;letter-spacing:-1.6px}
.make{font-size:26px;gap:3px}
.make i{height:18px;width:6px;background:currentColor;transform:rotate(20deg);border-radius:1px}
.make i:nth-child(3){margin-right:5px;opacity:.55}
.make i:nth-child(2){opacity:.8}
/* Service cards */
.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:50px;margin-bottom:43px}
.section-heading .eyebrow{margin-bottom:20px}
.section-heading>p{max-width:300px;color:#7f8679;font-size:13px;line-height:1.85;padding-bottom:6px}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.service-card{border:1px solid var(--line);border-radius:9px;background:#fcfcf780;display:flex;flex-direction:column;transition:border-color .3s,box-shadow .3s,translate .3s}
.service-card:hover{border-color:#bac2af;box-shadow:0 10px 28px #35482b08;translate:0 -5px}
.service-top{display:flex;align-items:center;justify-content:space-between}
.service-icon{display:grid;place-items:center}
.cyan{background:var(--brand-wash);color:var(--brand-deep)}
.lavender{background:#ece8f2;color:#a08aad}
.blue{background:#e5edf1;color:#7d9caa}
.service-card h3{margin-bottom:13px}
.service-card>p{color:#83897b;line-height:1.85;max-width:290px}
.service-link{border:0;border-top:1px solid #e4e6da;background:none;text-align:left;display:flex;align-items:center;justify-content:space-between;width:100%;padding:14px 0 0;margin-top:auto;font-weight:500}
.service-link>span{font-size:17px;color:#8b937d;transition:transform .25s}
.service-link:hover>span{transform:translate(3px,-3px);color:var(--brand-deep)}
/* The quiet engine */
.showcase{background:#283c31;color:#f5f4e9;padding-block:96px;overflow:hidden;position:relative}
.showcase:before{content:'';position:absolute;width:750px;height:750px;right:-260px;top:-430px;border:1px solid #b7c3a21a;border-radius:50%;box-shadow:0 0 0 90px #b7c3a206,0 0 0 180px #b7c3a204}
.showcase-grid{display:grid;align-items:center;position:relative}
.showcase .eyebrow{color:#bdc7b2;margin-bottom:23px}
.showcase h2{font-size:43px;margin-bottom:26px;line-height:1.2}
.showcase .serif-word{color:#ccdbb4;font-size:1.08em}
.showcase-copy>p{font-size:12px;color:#aebcaa;max-width:325px;line-height:1.9;margin-bottom:12px}
.showcase-benefits{display:flex;flex-direction:column;margin-block:26px 29px}
.showcase-benefits>span{font-size:10px;color:#d2d9c8;display:flex;align-items:center;gap:10px}
.showcase-benefits i{font-style:normal;border:1px solid #667e59;border-radius:50%;display:grid;place-items:center;color:#b9cca4}
.showcase .button{font-size:11px}
.dashboard{background:#fbfbf5;color:var(--ink);border-radius:11px;box-shadow:0 20px 50px #16201b22;transform:rotate(-1.5deg);position:relative}
.dashboard-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}
.dashboard-header>span:first-child{display:flex;align-items:center;gap:8px;font-weight:550}
.small-brand{color:var(--brand-deep);font-size:22px;line-height:1}
.live-pill{display:flex;align-items:center;gap:5px;background:#edf1e7;color:#849670;border:1px solid #dbe3d1;border-radius:20px}
.live-pill i{width:4px;height:4px;border-radius:50%;background:#849670}
.dashboard-body{padding:24px}
.dashboard-metrics{display:grid;grid-template-columns:1fr 1fr;margin-block:24px}
.dashboard-metrics>div{background:#f0f2e9;border:1px solid #e8ebdf;border-radius:7px;padding:14px 16px}
.dashboard-metrics small{color:#7d8971}
.dashboard-metrics strong{font-family:'Manrope',sans-serif;font-weight:550;align-items:baseline;gap:10px;letter-spacing:-1px;margin-top:3px}
.dashboard-metrics strong>span{font-family:'DM Sans',sans-serif;font-size:7px;color:#829871;letter-spacing:0;font-weight:400}
.activity{display:flex;align-items:center;padding:14px 0;border-bottom:1px solid #e9ecdf}
.activity-icon{display:grid;place-items:center;font-size:14px;flex:none}
.activity strong{font-weight:500;display:block}
.activity small{font-size:7px;color:#99a08d;display:block}
/* A simple path */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;margin-top:57px}
.step-track{display:flex;align-items:center;justify-content:space-between;position:relative;padding-bottom:25px;margin-bottom:25px;border-bottom:1px solid #d9dfce}
.step-track>span{font-family:var(--serif);font-size:38px;font-style:italic;line-height:1;color:#aeb7a0}
.step-track>i{font-style:normal;font-size:20px;color:#a2ad91}
.step:last-child .step-track>i{font-size:14px}
.step h3{letter-spacing:-.5px;margin-bottom:14px}
.step p{color:#818a76}
/* Packages */
.pricing-section{padding-block:100px;background:#eff1e8;border-block:1px solid #e6e9dd}
.center-heading{text-align:center;margin-bottom:56px}
.center-heading .eyebrow{justify-content:center;margin-bottom:19px}
.center-heading h2{margin-bottom:20px}
.center-heading p{line-height:1.9;color:#838c78}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.price-card{position:relative;background:#fafbf5;border:1px solid #dce1d2;border-radius:9px;display:flex;flex-direction:column}
.price-card h3{letter-spacing:-.6px}
.plan-description{font-size:11px;color:#8e9583;margin-top:6px}
.price{font-family:'Manrope',sans-serif;font-weight:550;line-height:1.3;margin-top:25px;white-space:nowrap}
.price>span{font-size:24px;color:#808a72;letter-spacing:-1px;margin-left:6px}
.setup-label{color:#979e8a;margin-top:6px}
.price-card .button{margin-top:23px;justify-content:space-between;font-size:11px}
.price-card ul{list-style:none;margin:26px 0 25px;padding:0;display:flex;flex-direction:column;color:#757f68}
.price-card li{display:flex;gap:10px}
.price-card li:before{color:#8ca577;font-size:12px}
.featured{border-color:var(--brand);background:#fffef7;box-shadow:0 8px 24px #45512e05}
.recommended{position:absolute;left:50%;transform:translateX(-50%);padding:5px 14px;font-weight:600;letter-spacing:1.2px;white-space:nowrap;color:var(--brand-ink);background:var(--brand-grad);border-radius:4px;line-height:1.8}
.recommended>span{margin-right:6px;font-size:10px}
.pricing-note{text-align:center;color:#8d9780;margin-top:31px}
.pricing-note strong{font-weight:500;color:#68775b}
.pricing-note a{color:#56694c;border-bottom:1px solid #abb49d;padding-bottom:2px}
/* Clear answers */
.faq-layout{display:grid;grid-template-columns:1fr 1.15fr;gap:100px}
.faq-intro .eyebrow{margin-bottom:23px}
.faq-intro h2{font-size:42px}
.faq-intro p{color:#8b937e;line-height:1.9;margin-block:24px 17px}
.faq-intro .text-button{font-size:12px;gap:20px}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list details:first-child{border-top:1px solid var(--line)}
.faq-list summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:23px 0;cursor:pointer;font-weight:500}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary>span{font-size:22px;font-weight:400;color:#929d82;line-height:1;transition:transform .25s}
.faq-list details[open] summary>span{transform:rotate(45deg)}
.faq-list details p{color:#89927d;padding:0 35px 23px 0;animation:answer-in .35s ease-out}
.faq-list summary:hover{color:var(--brand-deep)}
/* Let's make it happen */
.contact-section{background:var(--brand-grad-deep);color:var(--on-brand-deep);padding-block:80px;position:relative;overflow:hidden}
.contact-section:before{content:'';position:absolute;left:-220px;bottom:-690px;width:1050px;height:1050px;border:1px solid #ffffff24;border-radius:50%;box-shadow:0 0 0 70px #ffffff0a,0 0 0 140px #ffffff06}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;position:relative}
.contact-copy .eyebrow{font-size:9px;color:var(--on-brand-deep-soft);margin-bottom:24px;letter-spacing:1.3px}
.contact-copy .status-dot{background:var(--brand);box-shadow:0 0 0 4px #1BCEDF33}
.contact-copy h2{font-size:58px;letter-spacing:-3px;line-height:1.08}
.contact-copy h2 .serif-word{font-size:1.08em}
.contact-copy>p{font-size:13px;line-height:1.9;margin-block:24px;color:var(--on-brand-deep-soft)}
.contact-email{display:inline-flex;align-items:center;gap:35px;border-bottom:1px solid #c8f1f670;padding-bottom:7px}
.contact-email>span{font-size:22px}
.contact-form{background:#ffffff0a;border:1px solid #c8f1f63d;border-radius:9px;display:flex;flex-direction:column}
.contact-form label{display:flex;flex-direction:column;gap:7px;color:var(--on-brand-deep)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.contact-form input,.contact-form select,.contact-form textarea{border:1px solid #c8f1f655;background:#0a1a3a1f;color:var(--on-brand-deep);border-radius:4px;min-width:0;width:100%;padding:11px 12px;font-size:11px;line-height:1.5}
.contact-form textarea{resize:vertical;min-height:83px;max-height:240px}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:#d0ecf1}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline-color:var(--on-brand-deep);border-color:var(--on-brand-deep)}
.contact-form select{cursor:pointer}
.contact-form select option{color:var(--ink);background:var(--paper)}
.contact-form .button{width:100%;justify-content:space-between;margin-top:2px}
.form-note{text-align:center;color:var(--on-brand-deep-soft);line-height:1.7;margin-top:-7px}
.form-note a{text-decoration:underline}
.footer-top{display:flex;gap:30px}
.footer-top .brand>span{font-size:23px}
.footer-top .brand-symbol{width:29px;height:29px}
.footer-top>p{margin-right:auto;margin-left:12px}
.footer-top>a:not(.brand){font-size:10px;white-space:nowrap}
.footer-top>a:hover{color:var(--brand-deep)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;color:#9aa28e;padding-top:22px}
.footer-bottom>div{display:flex;align-items:center;gap:20px}
.back-top{font-size:14px;border:1px solid var(--line);display:grid;place-items:center}
/* Service detail overlay */
/* Motion always enhances the content; it never gates it. */
.reveal{opacity:1;transform:none}
.motion-ready .reveal:not(.visible){opacity:0;transform:translateY(27px)}
.motion-ready .reveal.visible{transition:opacity .85s var(--ease) var(--delay,0ms),transform .85s var(--ease) var(--delay,0ms)}
.motion-ready .dashboard.visible{transform:rotate(-1.5deg)}
@keyframes hero-in{from{opacity:0;transform:translateY(24px)}
to{opacity:1;transform:translateY(0)}
}
@keyframes flow{to{stroke-dashoffset:-610}
}
@keyframes pulse{0%{scale:.95;opacity:0}
20%{opacity:.6}
100%{scale:1.5;opacity:0}
}
@keyframes answer-in{from{opacity:0;transform:translateY(-5px)}
to{opacity:1;transform:translateY(0)}
}
/* Smaller screens get the same care. */
@media(min-width:1500px){.workflow-scene{margin-top:0}
.hero-actions .button{font-size:13px}
.hero-actions .text-button{font-size:12px}
}
@media(max-width:1200px){.hero{gap:20px;padding-top:45px}
.hero-actions .button{font-size:11px}
.tool-logos{gap:22px}
.tool-logo{font-size:22px}
.showcase h2{font-size:38px}
.price-card{padding-inline:23px}
.price>span{font-size:21px}
.faq-layout{gap:70px}
.contact-copy h2{font-size:52px}
.footer-top{gap:22px}
.footer-top>p{margin-left:0}
.lead-card{padding:15px}
}
@media(max-width:980px){.section{padding-block:80px}
.nav-cta{gap:16px}
.brand>span{font-size:24px}
.brand-symbol{width:30px;height:30px}
.hero{padding-bottom:85px;gap:18px}
.hero h1{letter-spacing:-3px}
.hero h1 .serif-word{letter-spacing:-3px}
.hero .eyebrow{font-size:8px}
.workflow-scene{margin-top:0;aspect-ratio:560/540}
.lead-card .app-icon{width:29px;height:29px;border-radius:7px}
.app-icon svg{width:17px;height:17px}
.lead-card{padding:12px}
.hub{width:57px;height:57px;border-radius:15px;left:42%}
.hub .brand-symbol{width:34px;height:34px}
.flow-card p{font-size:8px}
.integrations-inner{min-height:100px}
.tool-logos{gap:20px}
.tool-logo{font-size:20px}
.shopify svg{width:18px}
.slack svg{width:16px}
.integrations-inner>p{font-size:8px}
.make i{height:14px;width:4px}
.section-heading h2{font-size:40px}
.section-heading>p{font-size:12px;max-width:250px}
.showcase{padding-block:80px}
.showcase h2{font-size:33px;letter-spacing:-1.5px}
.showcase-copy>p{font-size:11px}
.showcase .eyebrow{font-size:8px}
.dashboard-body{padding:17px}
.dashboard-metrics{margin-block:19px}
.dashboard-metrics>div{padding:11px}
.dashboard-metrics strong{line-height:1.6}
.dashboard-metrics strong>span{font-size:6px;margin-left:7px}
.activity small{font-size:6px}
.steps{gap:30px}
.price>span{font-size:17px;letter-spacing:-.7px;margin-left:3px}
.price-card .button{gap:7px}
.plan-description{font-size:10px}
.pricing-section{padding-block:80px}
.faq-layout{gap:40px}
.faq-intro h2{font-size:36px}
.contact-copy h2{font-size:48px}
}
@media(max-width:760px){html{scroll-padding-top:95px}
.header{height:79px}
.header.scrolled{height:69px}
.nav-wrap{gap:20px}
.nav-cta{margin-left:auto;padding:8px 13px;gap:17px}
.menu-toggle{display:flex;position:relative;z-index:42;width:30px;height:34px;align-items:center;justify-content:center;flex-direction:column;gap:6px;background:none;border:0;padding:2px}
.menu-toggle>span{height:1px;width:22px;background:var(--ink);transition:transform .25s}
.menu-toggle[aria-expanded=true]>span:first-child{transform:translateY(3.5px) rotate(45deg)}
.menu-toggle[aria-expanded=true]>span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.navigation{display:none;position:fixed;inset:79px 0 auto;background:var(--paper);padding:23px 24px 32px;border-bottom:1px solid var(--line);box-shadow:0 25px 30px #1f322719;max-height:calc(100dvh - 79px);overflow:auto}
.scrolled .navigation{top:69px}
.navigation.is-open{display:flex;flex-direction:column;align-items:stretch;gap:0}
.navigation>a{padding-block:13px;border-bottom:1px solid #e5e8dc}
.navigation .mobile-contact{display:flex;justify-content:space-between;color:var(--brand-deep);border:0}
.navigation>a:after{display:none}
.hero{grid-template-columns:1fr;padding-top:35px;padding-bottom:77px;gap:15px}
.hero-copy{padding-bottom:0;text-align:center}
.hero .eyebrow{justify-content:center;margin-bottom:23px;font-size:8px}
.hero h1{line-height:1.07;letter-spacing:-3px;margin-bottom:32px}
.hero h1 .serif-word{letter-spacing:-3px}
.hero-description{margin-inline:auto;margin-bottom:23px}
.hero-actions{justify-content:center}
.hero-actions .button{font-size:11px;padding:13px 18px;min-height:46px}
.hero-actions .text-button{font-size:10px}
.workflow-scene{width:min(470px,100%)}
.lead-card{padding:17px}
.lead-card .app-icon{width:34px;height:34px}
.hub{width:62px;height:62px}
.hub .brand-symbol{width:38px;height:38px}
.followup-card{padding:16px}
.meeting-card{padding:16px}
.flow-card p{font-size:9px}
.integrations-inner{flex-direction:column;padding-block:25px}
.integrations-inner>p{text-align:center;font-size:10px;line-height:1.5}
.integrations-inner>p br{display:none}
.integrations-inner>p strong{margin-left:4px}
.tool-logos{width:100%;flex-wrap:wrap;justify-content:center}
.tool-logo{font-size:21px}
.tool-logos .make{font-size:22px}
.section{padding-block:65px}
.section-heading{gap:20px;align-items:flex-start;flex-direction:column;margin-bottom:30px}
.section-heading .eyebrow{margin-bottom:16px}
.section-heading h2{font-size:38px;letter-spacing:-2px}
.section-heading>p{max-width:350px;font-size:12px;padding:0}
.showcase{padding-block:65px 78px}
.showcase h2{font-size:39px;letter-spacing:-2px}
.showcase-copy>p{max-width:400px;font-size:12px}
.showcase .eyebrow{font-size:9px}
.showcase-benefits{margin-block:23px}
.dashboard{justify-self:center}
.dashboard-body{padding:23px}
.dashboard-metrics strong>span{font-size:8px}
.dashboard-metrics>div{padding:15px}
.activity small{font-size:8px}
.steps{grid-template-columns:1fr;gap:30px;margin-top:35px}
.step{position:relative;padding-left:70px}
.step-track{position:absolute;left:0;top:0;border:0;padding:0;margin:0}
.step-track>span{font-size:36px}
.step-track>i{display:none}
.step:not(:last-child):before{content:'';position:absolute;left:23px;top:55px;bottom:-9px;width:1px;background:var(--line)}
.step h3{margin-bottom:9px}
.pricing-section{padding-block:65px}
.center-heading{margin-bottom:43px}
.center-heading h2{font-size:37px;letter-spacing:-2px}
.center-heading .eyebrow{font-size:8px}
.pricing-grid{grid-template-columns:1fr;max-width:470px;margin-inline:auto}
.plan-description{font-size:12px}
.price{margin-top:22px}
.price>span{font-size:25px;margin-left:8px}
.price-card ul{margin-block:24px}
.pricing-note{margin-top:23px}
.faq-layout{grid-template-columns:1fr;gap:30px}
.faq-intro h2{font-size:38px}
.faq-intro p{margin-block:20px 12px}
.faq-list details p{padding-right:10px}
.contact-section{padding-block:60px}
.contact-grid{grid-template-columns:1fr}
.contact-copy h2{font-size:53px;letter-spacing:-2.5px}
.contact-copy .eyebrow{font-size:8px}
.contact-copy>p{font-size:12px;margin-block:22px}
.contact-form input,.contact-form select,.contact-form textarea{font-size:16px;padding:11px 10px}
.contact-form input::placeholder,.contact-form textarea::placeholder{font-size:11px}
.contact-form select{font-size:13px;min-height:47px}
.footer{padding-top:32px}
.footer-top{flex-wrap:wrap}
.footer-top .brand{width:100%;margin-bottom:5px}
.footer-top>a:not(.brand){font-size:10px}
.footer-bottom{flex-wrap:wrap;gap:16px}
.footer-bottom>div{margin-left:auto;gap:15px}
.eyebrow{font-size:9px}
}
@media(max-width:420px){.brand>span{font-size:22px}
.brand{gap:7px}
.brand-symbol{width:27px;height:27px}
.hero{padding-top:26px}
.hero-actions .button{font-size:10px;gap:17px}
.hero-actions .text-button{font-size:9px;gap:7px}
.workflow-scene{margin-top:17px}
.hub{width:52px;height:52px;border-radius:15px}
.hub .brand-symbol{width:31px;height:31px}
.followup-card{padding:13px}
.meeting-card{padding:13px}
.flow-card p{font-size:8px}
.service-card>p{max-width:none}
.section-heading h2{font-size:35px}
.showcase h2{font-size:35px}
.dashboard-body{padding:18px}
.dashboard-metrics>div{padding:12px}
.dashboard-metrics strong>span{font-size:6px;margin-left:6px}
.activity small{font-size:6px}
.footer-bottom>div{margin-left:0}
.center-heading h2{font-size:34px}
.tool-logos{max-width:300px}
.tool-logos>span{min-width:65px;justify-content:center}
.tool-logos .shopify{min-width:85px}
}
/* Keep supporting copy readable, even on a softly coloured canvas. */
.hero-description,.section-heading>p,.service-card>p,.step p,.center-heading p,.faq-intro p,.faq-list details p{color:#68745f}
.service-link,.setup-label,.plan-description,.price-card ul,.pricing-note{color:#68745f}
.integrations-inner>p,.integrations-inner>p strong,.footer-top>p,.footer-bottom{color:#737e67}
.navigation>a{font-size:13px}
.service-card>p{font-size:13px}
@media(max-width:1200px){.service-card>p{font-size:12px}
}
@media(max-width:980px){.navigation>a{font-size:11px}
.service-card>p{font-size:11px}
}
@media(max-width:760px){.navigation>a{font-size:19px}
.workflow-scene{aspect-ratio:auto}
.service-card>p{font-size:12px}
}
@media(max-width:420px){.service-card>p{font-size:13px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,*:before,*:after{animation:none!important;transition:none!important}
.motion-ready .reveal:not(.visible){opacity:1;transform:none}
.hub-pulse{display:none}
.line-moving{display:none}
.hero-enter{opacity:1;transform:none}
}
/* Readable type and a quieter content hierarchy. */
:root { --body-size: 18px; --small-size: 15px; }
body { font-size: var(--body-size); }
.navigation > a { font-size: 16px; }
.navigation { margin-left: 0; }
.button, .text-button, .hero-actions .button, .hero-actions .text-button, .showcase .button, .price-card .button, .faq-intro .text-button { font-size: 16px; min-height: 52px; }
.hero-actions { flex-wrap: wrap; gap: 18px 24px; }
.hero-actions .button { padding-inline: 22px; }
.eyebrow, .hero .eyebrow, .showcase .eyebrow, .center-heading .eyebrow { font-size: 12px; letter-spacing: 1.5px; }
.hero { min-height: 640px; padding-block: 60px; }
.hero-description { font-size: 21px; line-height: 1.65; max-width: 460px; }
.hero h1 { font-size: clamp(58px, 5.7vw, 82px); }
.integrations-inner > p { font-size: 16px; white-space: normal; max-width: 190px; line-height: 1.5; }
.integrations-inner { gap: 35px; }
.tool-logos { margin-inline: 0; }
.section-heading h2, .center-heading h2, .faq-intro h2, .showcase h2 { font-size: clamp(40px, 3.8vw, 56px); }
.service-grid { gap: 22px; }
.service-card { padding: 30px; }
.service-top { margin-bottom: 24px; }
.service-card h3 { font-size: 25px; letter-spacing: -.8px; }
.service-card > p { font-size: var(--body-size); line-height: 1.65; max-width: none; margin-bottom: 28px; }
.service-link { font-size: 16px; padding-top: 18px; }
.service-link > span { font-size: 23px; }
.showcase-grid { gap: 64px; grid-template-columns: 1fr 1fr; }
.showcase-copy > p { font-size: var(--body-size); line-height: 1.7; max-width: 470px; }
.showcase-benefits { gap: 14px; }
.showcase-benefits > span { font-size: 16px; }
.showcase-benefits i { font-size: 12px; flex: none; }
.dashboard-header { padding: 22px; font-size: 17px; gap: 15px; }
.live-pill { font-size: 12px; padding: 5px 9px; white-space: nowrap; }
.dashboard-metrics { margin-top: 0; gap: 14px; }
.dashboard-metrics small { font-size: 14px; }
.dashboard-metrics strong { display: block; font-size: 40px; }
.dashboard-metrics strong > span { display: block; font-size: 14px; margin: 0; }
.activity { padding-block: 19px; gap: 14px; }
.activity strong { font-size: 17px; line-height: 1.5; }
.activity:last-child { border-bottom: 0; }
.step h3 { font-size: 26px; }
.step p { font-size: var(--body-size); line-height: 1.7; max-width: none; }
.center-heading p { font-size: var(--body-size); }
.price-card { padding: 34px 28px; }
.price-card h3 { font-size: 29px; }
.price { font-size: 39px; letter-spacing: -1.5px; }
.price > span { font-size: 25px; }
.setup-label { font-size: 15px; }
.price-card ul { font-size: 17px; gap: 13px; }
.price-card li { align-items: baseline; }
.price-card li:before { flex: none; }
.recommended { font-size: 11px; top: -16px; }
.pricing-note { font-size: 15px; line-height: 1.8; max-width: 660px; margin: 30px auto 0; }
.faq-intro p { font-size: var(--body-size); }
.faq-list summary { font-size: 19px; line-height: 1.5; padding-block: 25px; }
.faq-list details p { font-size: 17px; line-height: 1.75; }
.contact-grid { gap: 70px; }
.contact-copy > p { font-size: 21px; }
.contact-email { font-size: 23px; }
.contact-form { padding: 30px; gap: 22px; }
.contact-form label { font-size: 16px; }
.contact-form input, .contact-form select, .contact-form textarea, .contact-form input::placeholder, .contact-form textarea::placeholder { font-size: 16px; }
.contact-form input, .contact-form select { min-height: 48px; }
.form-note { font-size: 13px; }
.footer-top > a:not(.brand) { font-size: 15px; }
.footer-top .brand { margin-right: auto; }
.footer-bottom { font-size: 13px; }
/* Three clear events replace the miniature interface annotations. */
.workflow-scene { mask-image: none; }
.flow-card { padding: 24px; }
.flow-card strong { font-size: 20px; line-height: 1.4; }
.lead-card { top: 16%; left: 8%; width: 80%; gap: 16px; }
.followup-card { top: 66%; left: 3%; width: 44%; }
.meeting-card { top: 61%; left: 53%; width: 44%; }
.flow-card-top { margin-bottom: 18px; }
.flow-card-top .app-icon { width: 37px; height: 37px; }
.tiny-check { width: 22px; height: 22px; font-size: 12px; flex: none; }
@media (max-width: 1100px) {
  .navigation > a { font-size: 14px; }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { gap: 15px; }
  .price-card { padding-inline: 22px; }
  .price { font-size: 33px; }
  .price > span { font-size: 21px; }
  .price-card .button { font-size: 15px; padding-inline: 13px; }
  .price-card ul { font-size: 16px; }
  .showcase-grid { gap: 35px; }
  .dashboard-header { font-size: 15px; padding: 18px; }
  .dashboard-metrics > div { padding: 13px; }
  .dashboard-metrics small { font-size: 13px; }
  .activity strong { font-size: 15px; }
  .contact-grid { gap: 35px; }
  .contact-form { padding: 23px; }
  .form-row { grid-template-columns: 1fr; }
  .flow-card { padding: 18px; }
  .flow-card strong { font-size: 18px; }
}
@media (max-width: 900px) and (min-width: 761px) {
  .nav-wrap { gap: 15px; }
  .navigation > a { font-size: 13px; }
  .nav-cta { padding-inline: 13px; font-size: 14px; gap: 10px; }
  .hero { grid-template-columns: 1.1fr 1fr; gap: 12px; }
  .hero h1 { font-size: 54px; }
  .hero-description { font-size: 19px; }
  .flow-card strong { font-size: 16px; }
  .integrations-inner { flex-direction: column; padding-block: 25px; gap: 20px; }
  .integrations-inner > p { max-width: none; }
  .tool-logos { width: 100%; }
  .pricing-grid { grid-template-columns: 1fr; max-width: 530px; margin-inline: auto; gap: 30px; }
  .price-card { padding: 32px; }
  .price { font-size: 40px; }
  .price > span { font-size: 28px; }
  .price-card ul { font-size: 18px; }
  .price-card .button { font-size: 16px; }
}
@media (max-width: 760px) {
  :root { --body-size: 17px; }
  .nav-cta { font-size: 15px; min-height: 44px; }
  .menu-toggle { min-width: 38px; min-height: 44px; }
  .hero { padding-block: 35px 40px; }
  .hero h1 { font-size: clamp(48px, 10vw, 72px); }
  .hero-description { font-size: 19px; max-width: 430px; }
  .hero-actions .button, .hero-actions .text-button { font-size: 16px; }
  .hero-actions { gap: 12px; flex-direction: column; }
  .integrations-inner > p { max-width: none; font-size: 16px; }
  .tool-logos { gap: 25px; }
  .service-card { padding: 28px; }
  .service-card h3 { font-size: 24px; }
  .service-card > p { font-size: 17px; }
  .section-heading h2, .center-heading h2, .faq-intro h2, .showcase h2 { font-size: 42px; }
  .showcase-grid { grid-template-columns: 1fr; }
  .showcase-copy > p { font-size: 18px; }
  .showcase-benefits > span { font-size: 16px; }
  .dashboard { width: 100%; }
  .dashboard-header { font-size: 16px; }
  .dashboard-metrics strong { font-size: 39px; }
  .activity strong { font-size: 16px; }
  .step h3 { font-size: 25px; }
  .step p { font-size: 17px; }
  .price-card { padding: 30px; }
  .price { font-size: 39px; }
  .price > span { font-size: 26px; }
  .price-card .button { font-size: 16px; }
  .price-card ul { font-size: 17px; }
  .faq-list summary { font-size: 18px; }
  .faq-list details p { font-size: 17px; }
  .contact-copy > p { font-size: 19px; }
  .contact-email { font-size: 22px; }
  .footer-top > a:not(.brand) { font-size: 15px; }
  .footer-bottom { font-size: 12px; }
  .workflow-scene { height: 350px; max-width: 470px; margin: 15px auto 0; }
  .lead-card { top: 8%; left: 8%; width: 84%; }
  .hub { top: 40%; left: 43%; }
  .followup-card { top: 68%; left: 2%; width: 45%; }
  .meeting-card { top: 64%; left: 53%; width: 45%; }
  .workflow-lines { height: 100%; }
  .flow-card { padding: 19px; }
  .flow-card strong { font-size: 18px; }
}
@media (max-width: 600px) {
  .service-grid { grid-template-columns: 1fr; }
  .service-card > p { margin-bottom: 22px; }
}
@media (max-width: 420px) {
  .nav-wrap { gap: 10px; }
  .nav-cta { padding-inline: 12px; gap: 10px; font-size: 14px; }
  .hero h1 { font-size: clamp(43px, 12.7vw, 53px); }
  .hero-description { font-size: 18px; }
  .hero .eyebrow { font-size: 11px; }
  .section-heading h2, .center-heading h2, .faq-intro h2, .showcase h2 { font-size: 38px; }
  .flow-card { padding: 16px; }
  .flow-card strong { font-size: 16px; }
  .lead-card { padding: 18px 14px; gap: 10px; }
  .lead-card .tiny-check { display: none; }
  .dashboard-header { flex-wrap: wrap; font-size: 15px; }
  .dashboard-metrics { gap: 9px; }
  .dashboard-metrics strong { font-size: 34px; }
  .dashboard-metrics small, .dashboard-metrics strong > span { font-size: 13px; }
  .activity strong { font-size: 15px; }
  .price-card { padding: 27px 23px; }
  .price { font-size: 36px; }
  .price > span { font-size: 23px; }
  .contact-copy h2 { font-size: 46px; }
  .contact-email { font-size: 20px; }
  .contact-form { padding: 20px; }
  .contact-form label { font-size: 15px; }
  .contact-form .button { gap: 14px; }
}

/* A consistent, rounded, two-tone icon family. */
.soft-icon { width: 22px; height: 22px; flex: none; overflow: visible; }
.soft-icon .icon-wash { fill: currentColor; fill-opacity: .13; stroke: none; }
.service-icon {
  width: 58px; height: 58px; border-radius: 19px;
  box-shadow: inset 0 1px 1px #ffffffba, 0 4px 10px #26322d04;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.service-icon .soft-icon { width: 29px; height: 29px; stroke-width: 1.65; }
.service-card:hover .service-icon {
  transform: translateY(-2px) rotate(-4deg);
  box-shadow: inset 0 1px 1px #ffffffba, 0 7px 16px #26322d09;
}
.cyan, .icon-brand { background: var(--brand-wash); color: var(--brand-deep); }
.lavender, .icon-purple { background: #eee8f5; color: #9980b1; }
.sage { background: #e9efe1; color: #819963; }
.yellow { background: #f7eedb; color: #b79b52; }
.blue, .icon-blue { background: #e7eef9; color: #7b97bd; }
.pink { background: #f5e6ec; color: #b78395; }
.app-icon, .flow-card-top .app-icon {
  width: 44px; height: 44px; border-radius: 15px;
  box-shadow: inset 0 1px 1px #ffffffa0;
}
.app-icon .soft-icon, .flow-card-top .app-icon .soft-icon { width: 25px; height: 25px; stroke-width: 1.65; }
.activity-icon { width: 40px; height: 40px; border-radius: 13px; }
.activity-icon .soft-icon { width: 23px; height: 23px; }
.button > span, .text-button > span, .service-link > span, .contact-email > span, .mobile-contact > span { display: inline-flex; flex: none; align-items: center; justify-content: center; }
.button .soft-icon, .text-button .soft-icon, .service-link .soft-icon { width: 20px; height: 20px; }
.tiny-check .soft-icon { width: 14px; height: 14px; stroke-width: 2; }
.showcase-benefits i { width: 23px; height: 23px; background: #d9e9bd0d; border-color: #b8cf9940; }
.showcase-benefits i .soft-icon { width: 14px; height: 14px; stroke-width: 1.8; }
.faq-list summary > span {
  width: 32px; height: 32px; display: grid; place-items: center; flex: none;
  border-radius: 50%; background: #edf0e6; color: #7d8b6e;
}
.faq-list summary .soft-icon { width: 17px; height: 17px; }
.back-top { width: 38px; height: 38px; border-radius: 12px; }
.back-top .soft-icon { width: 18px; height: 18px; }
.recommended { display: flex; align-items: center; gap: 7px; }
.recommended > span { display: inline-flex; margin: 0; }
.recommended .soft-icon { width: 15px; height: 15px; }
.small-brand .soft-icon { width: 24px; height: 24px; }
.pricing-note a > .soft-icon, .footer-top > a > .soft-icon { display: inline-block; vertical-align: -.2em; width: 17px; height: 17px; margin-left: 5px; }
.price-card li:before {
  content: ''; display: inline-block; width: 17px; height: 17px;
  background: #879d74; vertical-align: -.15em;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12 4.5 4.5L19 7' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12 4.5 4.5L19 7' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (max-width: 420px) {
  .lead-card .app-icon { width: 37px; height: 37px; border-radius: 12px; }
  .lead-card .app-icon .soft-icon { width: 22px; height: 22px; }
}

/* Image-led navigation disclosures. */
.nav-wrap { position: relative; }
.nav-dropdown { position: static; }
.dropdown-toggle {
  display: flex; align-items: center; gap: 7px; padding: 10px 0;
  border: 0; background: none; font-size: 16px; white-space: nowrap;
  transition: color .2s;
}
.dropdown-toggle:hover, .dropdown-toggle[aria-expanded=true] { color: var(--brand-deep); }
.dropdown-chevron { width: 15px; height: 15px; transition: transform .25s var(--ease); }
.dropdown-toggle[aria-expanded=true] .dropdown-chevron { transform: rotate(180deg); }
.dropdown-panel {
  position: absolute; left: 50%; top: calc(100% - 5px); transform: translateX(-50%);
  width: min(100%, 1080px); display: grid; grid-template-columns: 1fr 300px;
  background: #fffef9; border: 1px solid #dfe3d6; border-radius: 20px;
  box-shadow: 0 24px 65px #24352a1c, 0 4px 12px #24352a06;
  overflow: hidden; text-align: left; z-index: 45;
  max-height: calc(100dvh - 115px); overflow-y: auto;
}
.dropdown-panel[hidden] { display: none; }
.dropdown-panel:not([hidden]) { animation: dropdown-in .25s var(--ease) both; }
.dropdown-main { padding: 28px; min-width: 0; }
.dropdown-label { font-size: 12px; font-weight: 550; letter-spacing: .8px; color: #75816c; line-height: 1.5; }
.dropdown-main > .dropdown-label { padding: 0 12px; margin-bottom: 18px; }
.dropdown-services { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.dropdown-item {
  display: flex; align-items: center; gap: 14px; padding: 15px 12px; width: 100%;
  border: 0; border-radius: 13px; background: transparent; text-align: left;
  transition: background .2s; min-width: 0; color: var(--ink);
}
.dropdown-item:hover, .dropdown-item:focus-visible { background: #f0f3e9; }
.dropdown-item .service-icon { width: 45px; height: 45px; border-radius: 15px; flex: none; }
.dropdown-item .service-icon .soft-icon { width: 25px; height: 25px; }
.dropdown-item > span:not(.service-icon) { min-width: 0; }
.dropdown-item strong { display: block; font-size: 16px; font-weight: 550; line-height: 1.45; }
.dropdown-item small { display: block; font-size: 13px; color: #737e68; line-height: 1.5; margin-top: 4px; }
.dropdown-item > .soft-icon { width: 16px; height: 16px; margin-left: auto; color: #88977a; opacity: 0; transition: opacity .2s, transform .2s; }
.dropdown-item:hover > .soft-icon, .dropdown-item:focus-visible > .soft-icon { opacity: 1; transform: translate(2px, -2px); }
.dropdown-overview {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid #e3e7da; padding: 18px 12px 0; margin-top: 20px;
  font-size: 15px; font-weight: 550;
}
.dropdown-overview .soft-icon, .dropdown-feature > a .soft-icon { width: 18px; height: 18px; }
.dropdown-overview:hover, .dropdown-feature > a:hover { color: var(--brand-deep); }
.dropdown-feature { padding: 22px; background: #f1f3e9; border-left: 1px solid #e1e5d7; }
.dropdown-feature > img { display: block; width: 100%; height: auto; border-radius: 13px; margin-bottom: 23px; }
.dropdown-feature > .dropdown-label { font-size: 10px; letter-spacing: 1.2px; }
.dropdown-feature h3 { font-size: 22px; letter-spacing: -.6px; margin-top: 8px; }
.dropdown-feature p { font-size: 15px; color: #6f7e62; margin-top: 10px; line-height: 1.6; }
.dropdown-feature > a { display: inline-flex; align-items: center; gap: 14px; font-size: 15px; font-weight: 550; margin-top: 20px; }
.dropdown-feature ul { list-style: none; padding: 0; margin: 14px 0 0; font-size: 14px; color: #6f7e62; }
.dropdown-feature li { display: flex; gap: 9px; align-items: center; margin-top: 8px; }
.dropdown-feature li:before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #9aa98a; flex: none; }
.process-panel { width: min(100%, 850px); grid-template-columns: 1fr 310px; }
.process-panel .dropdown-main { padding: 28px; }
.process-panel .dropdown-item { padding-block: 18px; }
@keyframes dropdown-in { from { opacity: 0; translate: 0 -7px; }
 to { opacity: 1; translate: 0 0; }
 }
@media (max-width: 1100px) {
  .dropdown-toggle { font-size: 14px; gap: 4px; }
  .dropdown-panel { grid-template-columns: 1fr 260px; }
  .dropdown-main { padding: 21px 15px; }
  .dropdown-item { padding: 13px 9px; gap: 10px; }
  .dropdown-item strong { font-size: 15px; }
  .dropdown-item small { font-size: 12px; }
  .dropdown-item > .soft-icon { display: none; }
  .dropdown-feature { padding: 20px; }
}
@media (max-width: 900px) and (min-width: 761px) {
  .dropdown-toggle { font-size: 13px; gap: 3px; }
  .dropdown-chevron { width: 12px; }
  .dropdown-panel { grid-template-columns: 1fr 230px; }
  .dropdown-services { gap: 0; }
  .dropdown-item { gap: 9px; padding: 15px 6px; align-items: flex-start; }
  .dropdown-item .service-icon { width: 34px; height: 34px; border-radius: 11px; }
  .dropdown-item .service-icon .soft-icon { width: 21px; height: 21px; }
  .dropdown-item strong { font-size: 14px; }
  .dropdown-item small { font-size: 12px; }
  .dropdown-feature h3 { font-size: 20px; }
}
@media (max-width: 760px) {
  .nav-dropdown { border-bottom: 1px solid #e5e8dc; }
  .dropdown-toggle { width: 100%; justify-content: space-between; padding: 15px 0; }
  .dropdown-chevron { width: 20px; height: 20px; }
  .dropdown-panel, .process-panel {
    position: static; transform: none; width: 100%; max-height: none; overflow: visible;
    grid-template-columns: 1fr; border-radius: 14px; box-shadow: none; margin-bottom: 20px;
  }
  .dropdown-services { grid-template-columns: 1fr 1fr; }
  .dropdown-main, .process-panel .dropdown-main { padding: 18px 12px; }
  .dropdown-main > .dropdown-label { font-size: 12px; padding-inline: 8px; margin-bottom: 8px; }
  .dropdown-item { padding: 13px 8px; gap: 12px; }
  .dropdown-item strong { font-size: 16px; }
  .dropdown-item small { font-size: 13px; }
  .dropdown-overview { font-size: 15px; padding: 17px 8px 2px; margin-top: 12px; }
  .dropdown-feature {
    display: grid; grid-template-columns: 120px 1fr; column-gap: 18px;
    padding: 20px; border-left: 0; border-top: 1px solid #e1e5d7;
    border-radius: 0 0 14px 14px; align-items: center;
  }
  .dropdown-feature > img { grid-column: 1; grid-row: 1 / 5; margin: 0; border-radius: 10px; }
  .dropdown-feature > .dropdown-label, .dropdown-feature > p, .dropdown-feature > ul { display: none; }
  .dropdown-feature > h3 { grid-column: 2; font-size: 19px; margin: 0; }
  .dropdown-feature > a { grid-column: 2; margin-top: 8px; font-size: 14px; gap: 8px; }
  .navigation { overscroll-behavior: contain; }
}
@media (max-width: 520px) {
  .dropdown-services { grid-template-columns: 1fr; }
  .dropdown-item .service-icon { width: 42px; height: 42px; }
  .dropdown-feature { grid-template-columns: 90px 1fr; column-gap: 13px; padding: 17px 14px; }
  .dropdown-feature > h3 { font-size: 17px; }
  .dropdown-feature > a { font-size: 13px; }
}

@media(max-width:600px){.container,.wrap{width:min(100% - 30px,1180px)}
}

/* 2 shared inner-page rules */

.inner-page { --page-accent: #e9dfcf; --page-ink: #344d3d; }

.inner-page h1, .inner-page h2, .inner-page h3 { color: #344d3d; }

.inner-page h2 { font-size: clamp(32px, 3.2vw, 48px); line-height: 1.16; letter-spacing: -1.8px; font-weight: 550; }

.inner-page h3 { letter-spacing: -.5px; }

.inner-page p { line-height: 1.7; }

.inner-page .section { padding-block: 90px; }

.breadcrumb { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 30px; color: #64705d; font-size: 13px; }

.breadcrumb a:hover { color: var(--brand-deep); }

.breadcrumb [aria-current] { color: #344d3d; }

.page-faq { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; border-top: 1px solid #dfe4d6; }

.page-faq h2 { margin-top: 18px; }

.page-faq .faq-list p { font-size: 16px; }

.page-cta { padding-block: 80px; }

.page-cta > div { display: flex; justify-content: space-between; align-items: center; gap: 50px; }

.page-cta h2 { max-width: 760px; margin-top: 20px; }

.page-cta p { margin-top: 18px; font-size: 16px; color: #627056; }

.page-cta .button { flex: none; }

.ai-navigation-panel { width: min(100%, 610px); grid-template-columns: 1fr; }

.ai-menu-number { display: grid; place-items: center; width: 32px; height: 32px; background: #f2edcf; border-radius: 7px; font-size: 10px; flex: none; }

.navigation { gap: 18px; }

.navigation > a, .dropdown-toggle { font-size: 14px; }

.inner-page :focus-visible, .ai-navigation-panel :focus-visible { outline: 2px solid var(--brand-blue-deep); outline-offset: 4px; }

@media (max-width: 1100px) {
  .navigation { gap: 12px; }
  .navigation > a, .dropdown-toggle { font-size: 13px; }
}

@media (max-width: 900px) {
  .navigation { gap: 10px; }
  .navigation > a, .dropdown-toggle { font-size: 12px; }
}

@media (max-width: 760px) {
  .inner-page .section { padding-block: 55px; }
  .inner-page h2 { font-size: 34px; letter-spacing: -1.2px; }
  .breadcrumb { padding-top: 22px; font-size: 12px; }
  .page-cta > div { flex-direction: column; align-items: flex-start; gap: 26px; }
  .navigation { gap: 0; }
  .navigation > a { font-size: 20px; }
  .dropdown-toggle { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .inner-page *, .inner-page *:before, .inner-page *:after { animation: none!important; transition: none!important; scroll-behavior: auto!important; }
}

/* 3 site additions */

/* Brand: the Softcupid mark with the redesign's wordmark */

.brand-mark{display:block;width:auto;height:36px}

.footer .brand-mark{height:30px}

/* Mega menus also open on hover (main.js); this keeps the pointer's path from the button to the panel inside the dropdown */

.dropdown-toggle{position:relative}

.dropdown-toggle[aria-expanded=true]:after{content:'';position:absolute;left:-16px;right:-16px;top:100%;height:34px}

@media(max-width:760px){.dropdown-toggle[aria-expanded=true]:after{display:none}
}

/* Footer */

.footer{border-top:1px solid var(--line);padding-block:64px 26px}

.footer-top{border-bottom:0;padding-bottom:0;align-items:flex-start;justify-content:space-between}

.footer-top>p{margin:0;max-width:360px;font-size:15px;line-height:1.7;color:#68745f;display:block}

.footer-links{display:grid;grid-template-columns:1fr 1fr 1fr 1.3fr;gap:40px;padding-block:48px;border-bottom:1px solid var(--line)}

.footer-links h2{font-size:12px;font-weight:650;letter-spacing:1.5px;text-transform:uppercase;color:#7c8873;margin-bottom:16px;line-height:1.5}

.footer-links a{display:block;width:max-content;max-width:100%;font-size:15px;margin:10px 0;transition:color .2s}

.footer-links a:hover{color:var(--brand-deep)}

.footer-links .footer-email{font:600 19px/1.4 'Manrope',sans-serif;letter-spacing:-.4px}

.footer-links .button{display:inline-flex;margin-top:16px;color:#fff;font-size:15px;min-height:46px}

.footer-links .button:hover{color:#fff}

.footer-bottom>div a:not(.back-top):hover{color:var(--brand-deep)}

@media(max-width:900px){.footer-links{grid-template-columns:1fr 1fr}
.footer-top{flex-direction:column;gap:18px}
}

@media(max-width:600px){.footer-links{gap:28px 20px}
.footer-contact{grid-column:1/-1}
}

/* Simple inner pages (about, FAQ, contact, order, privacy, terms) */

.page-header{padding-block:64px 36px}

.page-header .eyebrow{margin-bottom:22px}

.page-header h1{font-size:clamp(42px,4.25vw,66px);line-height:1.07;letter-spacing:-2.8px;font-weight:550;max-width:820px;color:#344d3d}

.page-header .serif-word{color:var(--brand-deep);letter-spacing:-1.5px}

.page-header>p{max-width:620px;font-size:19px;line-height:1.7;color:#616e59;margin-top:22px}

.page-header>p a,.prose a,.faq-list details p a,.form-note a,.process-notes a{text-decoration:underline;text-decoration-color:var(--brand);text-underline-offset:3px}

.prose{padding-bottom:100px}

.prose>*{max-width:780px}

.prose h2{font-size:clamp(26px,2.4vw,32px);letter-spacing:-.8px;line-height:1.25;margin:52px 0 14px;font-weight:600}

.prose h2:first-child{margin-top:0}

.prose p,.prose li{color:#4f5a49;line-height:1.75;font-size:17px}

.prose p{margin-block:0 16px}

.prose ul,.prose ol{padding-left:22px;margin:14px 0}

.prose li{margin:10px 0}

.prose strong{color:var(--ink);font-weight:650}

.prose .updated{color:#7c8873;font-size:14px;margin-bottom:24px}

.faq-page{padding-bottom:100px}

.faq-page>.faq-list{max-width:900px}

.faq-intro-links{display:flex;flex-wrap:wrap;gap:12px 30px}

.steps-more{margin-top:48px}

.order-packages{padding-block:56px}

/* Forms: /contact and /order on a card; the homepage's contact section keeps the redesign's brand-gradient variant */

.form-wrap{padding-bottom:110px}

.form-card{max-width:720px;background:#fffef9;border:1px solid var(--line);border-radius:18px;padding:40px;box-shadow:0 18px 48px -30px #344d3d45}

.form-card .contact-form{padding:0;background:none;border:0}

.form-card .contact-form label{color:var(--ink)}

.form-card .contact-form input,.form-card .contact-form select,.form-card .contact-form textarea{background:#f8f8f2;border-color:#d6dacd;color:var(--ink);border-radius:8px}

.form-card .contact-form input::placeholder,.form-card .contact-form textarea::placeholder{color:#8a9085}

.form-card .contact-form input:focus,.form-card .contact-form select:focus,.form-card .contact-form textarea:focus{outline-color:var(--brand-blue-deep);border-color:var(--brand-blue-deep)}

.form-card .form-note{color:#68745f;margin-top:0}

.form-shield{margin-block:2px}

.contact-section .bs-checkbox-widget{background:#0a1a3a1f;border-color:#c8f1f655}

.contact-section .bs-checkbox-widget.is-checked{background:#0a1a3a33;border-color:var(--on-brand-deep)}

.contact-section .bs-checkbox-label{color:var(--on-brand-deep)}

.contact-section .bs-checkbox-footer{color:var(--on-brand-deep-soft)}

.contact-section a:focus-visible,.contact-section button:focus-visible,.contact-section input:focus-visible,.contact-section select:focus-visible,.contact-section textarea:focus-visible{outline-color:var(--on-brand-deep)}

.field-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

button.button:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}

@media(max-width:600px){.form-card{padding:26px 20px}
.page-header{padding-block:40px 24px}
.page-header>p{font-size:17px}
}

/* BotShield's widget row is a <label>: keep it a row inside the form's column labels */

.contact-form .bs-checkbox-row{flex-direction:row;gap:12px;font-size:inherit}

.contact-form .bs-checkbox-widget{max-width:300px;position:relative}

.contact-form .bs-checkbox-input{width:0;height:0;min-height:0;padding:0;border:0}

/* /how-it-works: after-launch notes */

.process-notes{display:grid;grid-template-columns:1fr 1fr;gap:64px}

.process-notes h2{margin-block:16px 18px}

.process-notes p{font-size:17px;line-height:1.75;color:#4f5a49}

@media(max-width:900px){.process-notes{grid-template-columns:1fr;gap:40px}
}

/* Warehouse automation: the brand icon tone, the warehouse phone (homepage #warehouse + its service page) and the homepage section */

.tone-brand { background: var(--brand-wash); color: var(--brand-blue-deep); }
.dropdown-services > .dropdown-item:last-child:nth-child(odd) { grid-column: 1 / -1; }

.wh-phone { --wh-p: 8%; width: 292px; max-width: 100%; margin-inline: auto; padding: 9px; border-radius: 40px; background: var(--brand-ink); box-shadow: 0 34px 60px -34px color-mix(in srgb, var(--brand-ink) 70%, transparent), 0 2px 0 1px color-mix(in srgb, var(--brand-ink) 20%, transparent); text-align: left; }
.wh-phone-screen { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 34px 14px 14px; border-radius: 32px; background: var(--paper); color: var(--ink); line-height: 1.4; }
.wh-phone-screen:before { content: ''; position: absolute; top: 11px; left: 50%; width: 74px; height: 18px; translate: -50% 0; border-radius: 10px; background: var(--brand-ink); }
.wh-phone-head strong { display: block; font-family: 'Manrope', sans-serif; font-size: 17px; font-weight: 700; letter-spacing: -.3px; }
.wh-phone-head small { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.wh-progress { font-size: 11px; color: var(--muted); }
.wh-progress i { display: block; height: 5px; margin-top: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.wh-progress b { display: block; height: 100%; width: var(--wh-p); border-radius: inherit; background: var(--brand-grad); transition: width .5s var(--ease); }
.wh-prompt { padding: 9px 12px; border-radius: 11px; background: var(--brand-wash); color: var(--brand-deep); font-size: 12px; font-weight: 600; min-height: 36px; }
.wh-swap > [data-for] { display: none; }
[data-step="0"] .wh-swap > [data-for~="s0"], [data-step="1"] .wh-swap > [data-for~="s1"], [data-step="2"] .wh-swap > [data-for~="s2"],
[data-step="3"] .wh-swap > [data-for~="s3"], [data-step="4"] .wh-swap > [data-for~="s4"] { display: inline; }
[data-step="1"] .wh-phone { --wh-p: 16%; } [data-step="2"] .wh-phone { --wh-p: 24%; } [data-step="3"] .wh-phone { --wh-p: 40%; } [data-step="4"] .wh-phone { --wh-p: 100%; }
.wh-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.wh-step { display: flex; align-items: flex-start; gap: 11px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; opacity: .55; transition: opacity .3s, border-color .3s, box-shadow .3s; }
.wh-step > div { min-width: 0; }
.wh-step small { display: block; font-size: 9px; font-weight: 650; letter-spacing: 1.2px; color: var(--muted); }
.wh-step strong { display: block; font-size: 14px; font-weight: 650; margin-top: 2px; }
.wh-step .wh-mono { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 21px; letter-spacing: 1px; }
.wh-meta { display: block; font-size: 10px; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; }
.wh-qty { display: inline-flex; align-items: center; margin-top: 7px; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; font-size: 13px; }
.wh-qty i, .wh-qty b { display: grid; place-items: center; width: 30px; height: 26px; font-style: normal; }
.wh-qty b { border-inline: 1px solid var(--line); }
.wh-step-n { position: relative; display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); font-size: 11px; color: var(--muted); background: var(--paper); }
.wh-step-n .soft-icon { position: absolute; width: 15px; height: 15px; stroke-width: 2.2; opacity: 0; }
[data-step="0"] .wh-step:nth-child(1), [data-step="1"] .wh-step:nth-child(2), [data-step="2"] .wh-step:nth-child(3) { opacity: 1; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-wash); }
[data-step="0"] .wh-step:nth-child(1) .wh-step-n, [data-step="1"] .wh-step:nth-child(2) .wh-step-n, [data-step="2"] .wh-step:nth-child(3) .wh-step-n { border-color: var(--brand); color: var(--brand-deep); }
[data-step="1"] .wh-step:nth-child(-n+1), [data-step="2"] .wh-step:nth-child(-n+2), [data-step="3"] .wh-step, [data-step="4"] .wh-step { opacity: 1; }
[data-step="1"] .wh-step:nth-child(-n+1) .wh-step-n, [data-step="2"] .wh-step:nth-child(-n+2) .wh-step-n, [data-step="3"] .wh-step .wh-step-n, [data-step="4"] .wh-step .wh-step-n { background: var(--brand-grad); border-color: transparent; color: var(--brand-ink); }
[data-step="1"] .wh-step:nth-child(-n+1) .wh-step-n b, [data-step="2"] .wh-step:nth-child(-n+2) .wh-step-n b, [data-step="3"] .wh-step .wh-step-n b, [data-step="4"] .wh-step .wh-step-n b { opacity: 0; }
[data-step="1"] .wh-step:nth-child(-n+1) .soft-icon, [data-step="2"] .wh-step:nth-child(-n+2) .soft-icon, [data-step="3"] .wh-step .soft-icon, [data-step="4"] .wh-step .soft-icon { opacity: 1; }
.wh-phone-scan { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; border-radius: 12px; background: var(--brand-grad); color: var(--brand-ink); font-size: 14px; font-weight: 650; }
.wh-phone-scan svg { width: 22px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; }

/* Homepage #warehouse */
.wh-home { padding-block: 112px; background: linear-gradient(180deg, var(--paper), var(--brand-wash) 55%, var(--paper)); overflow: hidden; }
.wh-home-grid { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 64px; }
.wh-home .eyebrow { margin-bottom: 20px; color: var(--brand-deep); }
.wh-home h2 { font-size: clamp(40px, 3.8vw, 56px); }
.wh-home h2 .serif-word { color: var(--brand-deep); }
.wh-home-copy > p { margin-top: 24px; max-width: 520px; color: #68745f; }
.wh-points { list-style: none; padding: 0; margin: 30px 0 32px; display: flex; flex-direction: column; gap: 14px; }
.wh-points li { display: flex; align-items: flex-start; gap: 12px; font-size: 17px; line-height: 1.5; }
.wh-points li > span { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--brand-wash); color: var(--brand-deep); margin-top: 1px; }
.wh-points .soft-icon { width: 15px; height: 15px; stroke-width: 2; }
.wh-home-visual { position: relative; display: grid; place-items: center; padding-block: 10px; }
.wh-home-visual:before { content: ''; position: absolute; width: min(460px, 100%); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--brand) 16%, transparent), transparent 68%); border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent); }
.wh-home-visual .wh-phone { position: relative; }
@media (max-width: 980px) { .wh-home { padding-block: 80px; } .wh-home-grid { gap: 40px; } }
@media (max-width: 900px) { .wh-home-grid { grid-template-columns: 1fr; } .wh-home-copy > p { max-width: 640px; } }
@media (max-width: 760px) { .wh-home { padding-block: 65px; } .wh-home h2 { font-size: 38px; letter-spacing: -2px; } .wh-points li { font-size: 16px; } }
@media (max-width: 420px) { .wh-home h2 { font-size: 35px; } .wh-phone { width: 272px; } }

/* 4 "What we automate" (#teenused) and "What running on autopilot looks like" (#examples): the original
   rules, unchanged, scoped to .classic so the redesign cannot restyle them (and they cannot leak out) */

/* The original site's tokens and type defaults, restored for the preserved sections only */

.classic{--ink:#111735;--muted:#5e6375;--lime:#1BCEDF;--radius:28px;background:#fff;color:var(--ink);font-size:16px;line-height:normal;-webkit-font-smoothing:auto}

.classic p{margin:1em 0}

.classic h2,.classic h3,.classic h4{font-weight:700;line-height:normal;letter-spacing:normal}

.classic svg{display:revert}

.classic button{font:revert;cursor:revert}

.classic :is(.lime,.peach,.blue,.cream,.lavender,.mint){color:inherit}

.motion-ready .classic .cat-card.reveal.visible{transition:transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s}

.classic a{color:inherit;text-decoration:none}

.classic .wrap{width:min(1180px,calc(100% - 48px));margin:auto}

.classic .kicker{text-transform:uppercase;font:700 12px/1 'Manrope';letter-spacing:1.7px;align-items:center;gap:9px}

.classic h2,.classic h3,.classic h4{font-family:'Manrope',sans-serif;margin:0}

.classic .shop-ui button{border:0;border-radius:30px;background:#222;color:white;padding:11px 16px}

.classic .section{padding-top:125px;padding-bottom:125px}

.classic .section-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:55px}

.classic .section-head h2{font-size:clamp(42px,5vw,66px);line-height:1.03;letter-spacing:-3.5px}

.classic .section-head>p{max-width:430px;font-size:17px;line-height:1.6;color:var(--muted);margin:0 0 5px}

.classic .kicker{color:#6d7380}

.classic .kicker:before{content:'';width:18px;height:2px;background:currentColor}

.classic .feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}

.classic .feature-card{min-height:610px;border-radius:var(--radius);padding:42px;overflow:hidden;display:flex;flex-direction:column;position:relative}

.classic .lime{background:#cdf3f5}

.classic .peach{background:#ffdfcd}

.classic .blue{background:#dfeaf7}

.classic .cream{background:#f0eee5}

.classic .card-copy{max-width:440px;position:relative;z-index:2}

.classic .num{font-size:12px;font-weight:700;border:1px solid rgba(17,23,53,.25);padding:6px 9px;border-radius:20px}

.classic .card-copy h3{font-size:30px;line-height:1.15;letter-spacing:-1.3px;margin:25px 0 14px}

.classic .card-copy p{color:#53596b;line-height:1.55;margin:0 0 22px}

.classic .card-copy a{font-size:14px;font-weight:700;border-bottom:1px solid;padding-bottom:4px}

.classic .mini-web,.classic .shop-ui,.classic .calendar,.classic .support-ui{margin:auto -5px -100px 38px;background:white;border:6px solid white;border-radius:17px 17px 0 0;box-shadow:0 25px 50px rgba(17,23,53,.13);height:300px;transform:rotate(-2deg);padding:22px;overflow:hidden}

.classic .mini-bar{display:flex;justify-content:space-between;font-size:9px}

.classic .mini-web h4{font-size:27px;margin:35px 0 18px;letter-spacing:-1px}

.classic .mini-pic{height:120px;background:linear-gradient(130deg,#15243f 40%,#caef52 40%);border-radius:8px}

.classic .shop-ui{background:#fffbf6;display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:center;transform:rotate(2deg);margin-left:25px}

.classic .product-art{height:210px;background:#f29a68;border-radius:100px 100px 15px 15px;display:grid;place-items:center;font-size:100px;color:#ffd4ba}

.classic .shop-ui small{font-size:8px;letter-spacing:1px}

.classic .shop-ui h4{font-size:27px;line-height:1.1;margin:12px 0 22px}

.classic .calendar{transform:rotate(-1deg);margin-left:20px;padding:27px}

.classic .cal-head{display:flex;justify-content:space-between}

.classic .cal-head span{font-size:11px;color:#777}

.classic .cal-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:11px;text-align:center;margin:25px 0}

.classic .cal-grid span{font-size:9px;color:#aaa}

.classic .cal-grid i{font-style:normal;font-size:11px;padding:8px}

.classic .cal-grid i.active{background:var(--ink);color:white;border-radius:50%}

.classic .slots{display:flex;gap:8px}

.classic .slots b{flex:1;border:1px solid #ddd;border-radius:8px;padding:10px;text-align:center;font-size:10px}

.classic .support-ui{transform:rotate(2deg);margin-left:30px;background:#f8f9f9}

.classic .support-top{display:flex;align-items:center;border-bottom:1px solid #eee;padding-bottom:15px}

.classic .support-avatar{width:35px;height:35px;border-radius:10px;background:var(--ink);color:var(--lime);display:grid;place-items:center;font-weight:800}

.classic .support-top p{margin:0 0 0 10px;font-size:12px}

.classic .support-top small{display:block;color:#6e9a55}

.classic .support-top span{margin-left:auto;color:#65b14c}

.classic .bubble{background:white;border-radius:5px 14px 14px 14px;padding:12px;margin:25px 50px 10px 0;font-size:12px}

.classic .bubble.user{background:var(--lime);margin-left:80px;margin-right:0;border-radius:14px 5px 14px 14px}

.classic .typing{color:#999;letter-spacing:4px;margin-top:20px}

@media(max-width:900px){.classic .section-head{display:block}
.classic .section-head>p{margin-top:25px}
.classic .feature-grid{grid-template-columns:1fr}
}

@media(max-width:600px){.classic .wrap{width:min(100% - 30px,1180px)}
.classic .section{padding-top:80px;padding-bottom:80px}
.classic .section-head h2{font-size:39px;letter-spacing:-2.2px}
.classic .feature-card{padding:28px;min-height:560px}
.classic .card-copy h3{font-size:25px}
.classic .mini-web,.classic .shop-ui,.classic .calendar,.classic .support-ui{margin-left:0}
}

.classic .kicker{display:none}

.classic .section-head h2{margin-top:0}

.classic #teenused .kicker{
  display:inline-flex;
  align-items:center;
  width:max-content;
  gap:10px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--ink);
  font:700 11px/1 'Manrope',sans-serif;
  letter-spacing:1.8px;
  text-transform:uppercase;
}

.classic #teenused .kicker:before{
  content:'';
  width:9px;
  height:9px;
  border:0;
  border-radius:2px;
  background:currentColor;
  transform:rotate(45deg);
}

.classic #teenused .section-head h2{margin-top:18px}

.classic .cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

.classic .cat-card{
  border-radius:var(--radius);padding:34px;display:flex;flex-direction:column;
  min-height:340px;position:relative;overflow:hidden;
  transition:transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s;
}

.classic .cat-card:hover{transform:translateY(-5px);box-shadow:0 24px 48px -20px rgba(17,23,53,.28)}

.classic .cat-card .cat-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}

.classic .cat-icon{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:rgba(17,23,53,.08);
}

.classic .cat-icon svg{width:23px;height:23px;stroke:var(--ink)}

.classic .cat-card .num{font-size:12px;font-weight:700;color:rgba(17,23,53,.4);letter-spacing:.5px}

.classic .cat-card h3{font-size:21px;line-height:1.15;letter-spacing:-.5px;margin:0 0 10px}

.classic .cat-card>p{color:#53596b;line-height:1.55;margin:0 0 22px;font-size:14.5px}

.classic .tag-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}

.classic .tag-list span{
  display:inline-flex;align-items:center;gap:5px;
  background:rgba(255,255,255,.55);border:1px solid rgba(17,23,53,.14);border-radius:20px;
  padding:6px 12px 6px 9px;font-size:12px;font-weight:600;line-height:1;
}

.classic .tag-list span:before{content:'';width:5px;height:5px;border-radius:50%;background:var(--ink);opacity:.35;flex-shrink:0}

.classic .lavender{background:#e6e0fb}

.classic .mint{background:#d9f5e6}

@media(max-width:900px){.classic .cat-grid{grid-template-columns:1fr 1fr}
}

@media(max-width:600px){.classic .cat-grid{grid-template-columns:1fr}
.classic .cat-card{min-height:0}
}