/* Mobbin-inspired centered presentation, using Cliq's own brand and assets. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+Thai:wght@400;500;600;700&display=swap');
:root{--blue:#0558d8;--deep:#112444;--muted:#718096;--line:#e3eaf3;font-family:'DM Sans','Noto Sans Thai',sans-serif;background:#fff}
body{background:#fff;-webkit-font-smoothing:antialiased}.container{width:min(1180px,calc(100% - 64px))}h1,h2,h3{letter-spacing:-.045em}h2{font-size:clamp(32px,4.5vw,56px);font-weight:600;line-height:1.4}h3{font-weight:600}
.site-header,.site-header.nav-on-dark{inset:24px auto auto 50%;transform:translateX(-50%);width:min(850px,calc(100% - 40px));height:62px;padding:0 22px;background:#f1f5faf0;border:1px solid #eaf0f7;border-radius:999px;color:#112444;backdrop-filter:blur(20px);pointer-events:auto}
.site-header:before{display:none}.navigation{height:60px;min-height:60px;width:100%;padding:0;gap:20px}.navigation .brand{font-size:27px;letter-spacing:-1.5px;gap:8px;color:#0558d8}.brand img{width:32px;height:32px;border-radius:9px}.brand-dot{display:none}
.nav-links a{font-size:12px;padding:12px 0;font-weight:500}.nav-links a:hover{color:#0558d8}
.navigation>.button-small,.nav-on-dark .navigation>.button-small{display:inline-flex;background:#0558d8;color:white;padding:11px 16px;font-size:11px;margin-left:0;gap:10px}.button{border-radius:999px;font-size:14px;font-weight:500;padding:14px 23px;background:#0558d8}.button:hover{background:#0349b7}.text-link{font-size:14px;font-weight:500}.hero .text-link{border:1px solid #dce5f0;border-radius:999px;padding:13px 23px;color:#112444}
.hero.container{display:block;width:min(1180px,calc(100% - 40px));min-height:0;margin:0 auto;padding:165px 0 68px;background:white;color:#112444;text-align:center;border-radius:0;overflow:visible}.hero-copy{max-width:940px;margin:auto}.hero-brand-icon{width:88px;height:88px;margin:0 auto 32px;border-radius:24px;box-shadow:0 0 0 8px #f2f7ff,0 0 0 15px #fafcff}.hero .eyebrow{font-size:11px;letter-spacing:.07em;color:#718096;font-weight:500;margin-bottom:17px}.status-dot{display:none}.hero h1{font-size:clamp(46px,6.1vw,78px);font-weight:650;line-height:1.25;letter-spacing:-.055em;white-space:normal}.hero h1>span{color:#0558d8}.hero-description{font-size:20px;font-weight:500;margin-top:24px;color:#51647e}.lead{font-size:16px;line-height:1.8;max-width:600px;margin:9px auto 0;color:#718096}.actions{justify-content:center;gap:12px;margin-top:30px}.release-note{justify-content:center;margin-top:25px;font-size:10px;color:#718096}.release-label{background:#f1f6fd;font-weight:500}.hero-visual{display:none}
.platform-strip{background:white;border:0}.platform-grid{width:min(860px,calc(100% - 48px));text-align:center;padding:30px 0 45px;gap:20px;border-bottom:1px solid #e3eaf3}.platform-grid>div,.platform-grid>div:first-child{padding:0;border:0}.platform-grid span{font-size:11px;color:#8895a6}.platform-grid strong{font-size:14px;font-weight:500}
.section{padding-block:85px}.section-heading{display:block;text-align:center;margin-bottom:45px}.section-heading>p{margin-top:18px;font-size:16px;line-height:1.75}.eyebrow{font-size:10px;font-weight:500;letter-spacing:.09em;color:#718096;margin-bottom:18px}.feature-grid{gap:18px}.feature{padding:28px;border:0;border-radius:22px;background:#f5f8fc}.feature h3{font-size:21px;margin:17px 0 10px}.feature-number{font-weight:500;font-size:10px;color:#718096}.feature p{font-size:14px}.showcase-heading{display:block;text-align:center;margin-top:65px;margin-bottom:30px}.showcase-heading h3{font-size:25px}.showcase-heading span{display:block;margin-top:10px;font-size:11px}
.screenshot-grid{padding:24px;background:#f5f8fc;border:0;border-radius:28px;gap:24px}.screenshot-grid img{border-radius:18px;border:1px solid #e5edf7}.screenshot-grid figcaption{font-size:12px;font-weight:500;padding-top:18px;color:#51647e}
.journey-section{background:#f6f9fe;border:0}.journey-section .eyebrow,.journey-section h2{text-align:center}.section-intro{text-align:center;margin:18px auto 0;max-width:700px}.journey{gap:30px;margin-top:48px}.step{background:#0558d8;color:white;border:0}.journey h3{font-size:19px}.journey-note{text-align:center;font-size:12px}.ai-panel{gap:70px}.ai-explanation{background:#f4f8fe;border:0;border-radius:24px;padding:34px}.outline-label{border-radius:999px;background:white;color:#0558d8;border-color:#dce7f7}.ai-explanation h3{font-size:23px}
.clinic-section{background:#f6f9fe;color:#112444}.clinic-section .eyebrow{color:#718096}.clinic-section .section-heading>p{color:#718096}.clinic-overview{border:1px solid #e0eaf7;box-shadow:none;border-radius:26px;padding:30px}.workspace-map>div{border-radius:12px;background:#f3f7fd}.clinic-features article{border-color:#dfe8f4}.clinic-features h3{font-size:22px}.clinic-features p{color:#718096}.button-white{background:#0558d8;color:white}.button-white:hover{background:#0349b7}.clinic-onboarding{border-color:#dfe8f4}.clinic-onboarding p{color:#718096}.clinic-onboarding strong{font-weight:500}
.trust-grid{gap:18px}.resource-card{background:#f5f8fc;border:0;border-radius:22px;padding:28px}.resource-card h3{font-size:20px}.resource-index{font-weight:500;color:#718096}.faq-section{border-top:1px solid #e3eaf3;gap:60px}.faq-section h2{font-size:42px}.faq-list summary{font-size:16px;font-weight:500}.closing{background:#eef5ff;border:0;border-radius:28px;display:flex;flex-direction:column;text-align:center;padding:64px 30px;gap:24px}.closing>img{align-self:center;width:64px;height:64px;border-radius:18px}.closing h2{font-size:46px}.closing .eyebrow{font-size:10px;color:#718096}.closing p:not(.eyebrow){font-size:14px;color:#718096}.closing .button{margin:0;background:#0558d8;color:white}.emergency{font-size:11px}.site-footer{background:white;padding-top:50px}.footer-main .brand{color:#0558d8}
@media(max-width:1000px){.nav-links,.nav-compact .nav-links{gap:16px}.navigation{gap:16px}.ai-panel{gap:35px}.hero.container{padding-top:150px}.hero h1{font-size:65px}}
@media(max-width:780px){.container{width:calc(100% - 40px)}.site-header,.site-header.nav-on-dark{width:calc(100% - 32px);inset:16px auto auto 50%;height:60px;padding:0 17px}.navigation{height:58px;min-height:58px;flex-wrap:nowrap}.nav-links,.nav-compact .nav-links{display:none}.navigation>.button-small{display:none}.menu-toggle{display:grid;margin-left:auto;width:36px;height:36px;padding:9px;background:white;border-color:#e3eaf3}.menu-toggle span{background:#0558d8}.mobile-nav{top:67px;right:0;background:white;border-radius:22px;max-height:calc(100svh - 105px)}.mobile-nav a{font-size:20px}.hero.container{padding:135px 0 45px;width:calc(100% - 40px)}.hero-brand-icon{width:72px;height:72px;border-radius:21px;margin-bottom:30px}.hero h1{font-size:clamp(40px,8vw,59px);line-height:1.3}.hero-description{font-size:18px;margin-top:22px}.lead{font-size:14px;max-width:470px}.hero .eyebrow{font-size:10px}.actions{gap:10px;margin-top:25px}.hero .button,.hero .text-link{font-size:12px;padding:13px 17px}.release-note{font-size:9px;gap:8px}.platform-grid{padding:22px 0 35px;gap:14px}.platform-grid strong{font-size:11px}.platform-grid span{font-size:9px}.section{padding-block:60px}h2{font-size:34px}.section-heading>p{font-size:14px}.feature-grid{gap:14px}.feature{padding:26px}.showcase-heading{margin-top:40px}.showcase-heading h3{font-size:22px}.screenshot-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding:20px;gap:18px;max-width:100%;border-radius:22px}.screenshot-grid figure{flex:0 0 min(72vw,290px);scroll-snap-align:center}.screenshot-grid img{border-radius:14px}.journey{gap:24px}.journey h3{font-size:18px}.section-intro{font-size:14px}.ai-panel{gap:30px}.clinic-layout{gap:30px}.clinic-overview{padding:24px}.clinic-features h3{font-size:21px}.resource-card{padding:26px}.faq-section{gap:30px}.faq-section h2{font-size:34px}.closing{padding:45px 25px;gap:22px}.closing>img{display:block}.closing h2{font-size:34px}.closing .button{width:auto}.footer-main .brand{font-size:32px}}
@media(max-width:360px){.hero h1{font-size:36px}.hero .button,.hero .text-link{font-size:11px;padding:12px 14px}.actions{gap:8px}.platform-grid{width:calc(100% - 32px);gap:8px}.platform-grid strong{font-size:10px}.release-note{font-size:8px}.navigation .brand{font-size:25px}}