@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Manrope:wght@400;500;600;650;700;750;800&display=swap');
:root{--ink:#192f36;--muted:#758386;--green:#468777;--deep:#132b35;--mint:#dcece3;--paper:#f6f8f6;--line:#e5ebe6;--navy:#141c3b;--white:#fff;--radius:22px;font-family:'DM Sans',sans-serif;color:var(--ink);font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:var(--paper);font-size:14px}button,input,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button{color:inherit}a{color:inherit;text-decoration:none}button:disabled{cursor:not-allowed;opacity:.5}button,input,select,a{outline-offset:5px}:focus-visible{outline:2px solid var(--green)}button{border:0;background:transparent}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:Manrope,sans-serif}h1{font-size:32px;letter-spacing:-1.2px;font-weight:750;line-height:1.25}h2{font-size:21px;letter-spacing:-.6px;font-weight:750}h3{font-size:15px;font-weight:750;letter-spacing:-.25px}p{line-height:1.65}.icon{width:22px;height:22px;fill:none;stroke:currentColor;flex-shrink:0}.skip-link{position:fixed;top:-100px;left:20px;z-index:100;background:white;padding:15px}.skip-link:focus{top:10px}.sidebar{width:244px;position:fixed;inset:0 auto 0 0;background:#fff;border-right:1px solid var(--line);padding:38px 22px 16px;display:flex;flex-direction:column;z-index:20}.brand{display:flex;align-items:center;gap:11px;font-size:16px;font-family:Georgia,serif;white-space:nowrap}.brand small{display:block;font-family:'DM Sans',sans-serif;font-size:7.5px;letter-spacing:2.1px;color:var(--muted);margin-top:7px}.brand-mark{font-style:italic;font-size:43px;letter-spacing:-6px;line-height:1;position:relative;padding-right:9px}.brand-mark>span{color:var(--green);font:16px sans-serif;position:absolute;top:-4px;right:-1px}.sidebar-label{font-size:8.5px;font-weight:700;letter-spacing:1.4px;color:#96a19e;margin:54px 12px 15px}.nav-item{display:flex;gap:13px;align-items:center;padding:14px 16px;margin:5px 0;border-radius:10px;color:#7a8788;font-size:13px;font-weight:500;transition:background .15s}.nav-item:hover{background:#f4f7f4;color:var(--ink)}.nav-item.active{color:#225b4d;background:#e8f0e9;font-weight:700}.nav-item.active:after{content:'';width:5px;height:5px;background:#478b74;border-radius:50%;margin-left:auto}.nav-item .icon{width:20px;height:20px}.sidebar-bottom{margin-top:auto;padding-top:30px}.care-note{padding:24px 17px;background:#f3f6f0;border-radius:17px;overflow:hidden;position:relative}.care-orbit{display:block;font-size:29px;color:#75a28b;margin-bottom:12px}.care-note h3{font-size:17px;line-height:1.4}.care-note p{font-size:11px;color:var(--muted);margin:10px 0 15px;max-width:145px}.text-button{font-size:11px;font-weight:700;padding:0}.text-button span{margin-left:8px}.user-chip{border-top:1px solid var(--line);display:flex;align-items:center;gap:10px;padding:20px 2px 0;margin-top:25px;width:100%;text-align:left}.user-chip>span:nth-child(2){font-weight:700;font-size:11px}.user-chip small{display:block;font-size:9px;font-weight:400;color:var(--muted);margin-top:4px}.user-chip .icon{margin-left:auto;width:15px}.avatar{display:inline-grid;place-items:center;width:38px;height:38px;background:#e8eee6;color:#668574;border-radius:50%;font-size:13px;font-weight:700}.avatar.small{width:34px;height:34px}.workspace{margin-left:244px;min-height:100vh}.demo-bar{height:31px;background:#ecf1eb;color:#6a7c70;display:flex;align-items:center;justify-content:space-between;padding:0 44px;font-size:9px;letter-spacing:.2px}.demo-bar>span{display:flex;align-items:center;gap:6px}.demo-bar button{font-size:9px;padding:6px 0;color:#607465}.status-dot{width:5px;height:5px;border-radius:100%;background:#81a184}.topbar{display:flex;justify-content:space-between;align-items:center;height:83px;border-bottom:1px solid var(--line);padding:0 44px;background:rgba(255,255,255,.65)}.breadcrumb{font-size:11px;color:#9aa3a0}.breadcrumb span{margin:0 15px;color:#c1c9c3}.breadcrumb strong{font-weight:500;color:var(--ink)}.top-actions{display:flex;align-items:center;gap:18px}.icon-button{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;color:#6a7979}.icon-button:hover{background:#e9efe9}.icon-button .icon{width:19px;height:19px}.top-divider{height:24px;width:1px;background:var(--line);margin:0 3px}.cart-trigger{position:relative}.cart-count{position:absolute;right:0;top:-2px;font-size:9px;background:var(--green);color:white;min-width:16px;height:16px;line-height:16px;border-radius:50%}.cart-count[hidden]{display:none}.mobile-brand,.mobile-nav{display:none}main{max-width:1360px;margin:0 auto;padding:34px 44px 40px;min-height:75vh}.page-intro{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px;gap:20px}.eyebrow{font-size:9px;font-weight:700;letter-spacing:1.8px;color:#82a08e;text-transform:uppercase;margin-bottom:10px}.page-intro p{color:var(--muted);font-size:12px;margin-top:10px}.date-pill{display:flex;align-items:center;gap:9px;white-space:nowrap;border:1px solid var(--line);border-radius:9px;background:#fff;padding:11px 13px;font-size:10px;color:#74827c}.date-pill .icon{width:15px;height:15px}.hero{position:relative;background:var(--deep);border-radius:var(--radius);min-height:246px;padding:34px 36px;overflow:hidden;display:flex;align-items:center;color:#fff}.hero:before{content:'';position:absolute;width:380px;height:380px;border:1px solid #7fa59128;border-radius:50%;right:-30px;top:-180px}.hero:after{content:'';position:absolute;width:285px;height:285px;border:1px solid #7fa59128;border-radius:50%;right:17px;top:-132px}.hero-copy{position:relative;z-index:2;max-width:68%}.hero .eyebrow{color:#a9c8b5;font-size:8px;margin-bottom:16px;display:flex;align-items:center;gap:8px}.hero .eyebrow:before{content:'';width:19px;height:1px;background:#9bbbab}.hero h2{font-size:34px;line-height:1.2;font-weight:500;letter-spacing:-1.3px}.hero h2 em{font-family:Georgia,serif;font-weight:400;color:#b4d5c1}.hero p{font-size:11px;color:#a8bcc1;max-width:310px;margin:14px 0 22px}.button{min-height:41px;border-radius:9px;padding:11px 17px;font-size:11px;line-height:1.4;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:11px;background:var(--green);color:#fff;transition:filter .15s,transform .15s}.button:hover{filter:brightness(1.07);transform:translateY(-1px)}.button .icon{width:16px;height:16px}.button.light{background:#dbeada;color:#23483b}.button.outline{border:1px solid var(--line);background:#fff;color:var(--ink)}.button.dark{background:var(--deep)}.button.wide{width:100%}.hero-art{position:absolute;right:50px;top:31px;width:190px;height:190px;display:grid;place-items:center;z-index:1}.orbit{width:160px;height:160px;border-radius:50%;background:radial-gradient(circle at 35% 25%,#709b88,#365e55 60%,#254a45);box-shadow:0 0 0 16px #b5ddbb09,0 0 0 33px #b5ddbb06;display:grid;place-items:center;transform:rotate(-12deg)}.orbit:after{content:'+';font-size:118px;font-family:Manrope,sans-serif;font-weight:400;color:#dae9d7;line-height:1;text-shadow:2px 6px 14px #0b22234d}.floating-label{position:absolute;bottom:7px;right:-15px;background:#ffffff13;backdrop-filter:blur(8px);border:1px solid #ffffff22;border-radius:10px;padding:11px 13px;display:flex;gap:8px;font-size:9px;align-items:center;color:#dbe8df;transform:rotate(0)}.floating-label .icon{width:17px;height:17px;color:#a5cab4}.home-top{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(230px,1fr);gap:21px}.next-card{padding:24px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);display:flex;flex-direction:column}.small-label{font-size:9px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted)}.next-card-heading{display:flex;justify-content:space-between;align-items:center}.next-card-heading .icon{width:18px;height:18px;color:var(--green)}.next-card h3{font-size:18px;margin:24px 0 10px;line-height:1.4;max-width:200px}.next-card p{font-size:11px;color:var(--muted);margin-bottom:21px}.next-card .button{margin-top:auto;background:#f2f6f1;color:#3b6958}.section{margin-top:33px}.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:17px;gap:12px}.section-heading p{color:var(--muted);font-size:11px;margin-top:5px}.section-heading h2{font-size:18px}.inline-link{color:#4a7b66;font-weight:600;font-size:10px;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}.inline-link .icon{width:14px;height:14px}.procedure-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.procedure-card{padding:19px 8px 17px;background:#fff;border:1px solid var(--line);border-radius:14px;text-align:center;transition:border .2s,transform .2s;min-width:0}.procedure-card:hover{border-color:#7caa92;transform:translateY(-3px)}.procedure-icon{display:grid;place-items:center;width:43px;height:43px;border-radius:50%;background:#eff4ed;color:#6a9380;margin:0 auto 14px}.procedure-icon .icon{width:24px;height:24px}.procedure-card span:last-child{font-size:10px;font-weight:500}.home-bottom{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;margin-top:29px}.doctor-preview{display:flex;gap:20px;align-items:center;border:1px solid var(--line);background:#fff;border-radius:19px;padding:22px;min-height:172px}.doctor-monogram{width:94px;min-width:94px;height:122px;border-radius:60px 60px 12px 12px;background:#e5ebe2;display:grid;place-items:center;position:relative;overflow:hidden;color:#678575}.doctor-monogram:before{content:'';position:absolute;width:100px;height:100px;border:1px solid #a1b5a6;opacity:.45;border-radius:50%;top:58px}.doctor-monogram span{font:italic 44px Georgia,serif;letter-spacing:-4px;z-index:1}.doctor-preview .eyebrow{font-size:8px;margin-bottom:7px}.doctor-preview h3{font-size:16px;line-height:1.4}.doctor-preview p{font-size:10px;color:var(--muted);margin:7px 0 14px}.care-banner{border:1px solid #e1e8db;border-radius:19px;background:#ecf1e6;padding:25px;position:relative;overflow:hidden;min-height:172px}.care-banner .eyebrow{font-size:8px;color:#7d9477}.care-banner h3{font-size:19px;font-weight:600;line-height:1.35;max-width:230px}.care-banner p{font-size:10px;color:#7c8a73;margin:8px 0 13px;max-width:245px}.care-banner .care-decoration{position:absolute;right:-16px;bottom:-35px;width:150px;height:150px;border:1px solid #cad5bf;border-radius:50%}.care-decoration:after{content:'✳';color:#a4b696;font-size:90px;position:absolute;inset:0;display:grid;place-items:center}.footer{max-width:1360px;margin:auto;padding:22px 44px 28px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:15px;color:#8d9a92;font-size:10px}.footer>span{font-family:Georgia,serif;font-size:13px;color:#6d8174}.footer-plus{color:var(--green)}.footer p{font-size:9px}.footer button{font-size:9px;color:#819086}.panel{background:white;border:1px solid var(--line);border-radius:20px;padding:27px}.panel h2{margin-bottom:12px}.panel p{font-size:13px;color:var(--muted)}.two-column{display:grid;grid-template-columns:1.2fr 1fr;gap:24px}.profile-hero{display:flex;align-items:center;gap:25px;background:var(--deep);color:white;border-radius:23px;padding:35px;margin-bottom:26px}.profile-hero .doctor-monogram{width:120px;min-width:120px;height:150px;background:#c4d6c4}.profile-hero h1{font-size:30px}.profile-hero p{color:#b7c9c6;margin:12px 0 18px}.tag{display:inline-flex;background:#edf3eb;color:#648071;font-size:10px;border-radius:6px;padding:6px 9px;margin-right:5px}.profile-hero .tag{background:#ffffff12;color:#bdd5c5}.feature-list{list-style:none;padding:0;margin:18px 0;display:grid;gap:16px}.feature-list li{display:flex;gap:12px;align-items:center;font-size:12px;color:#708079}.feature-list .icon{color:#67967c}.notice{font-size:11px;line-height:1.6;color:#819084;background:#f3f6f0;border:1px solid #e6ecdf;border-radius:10px;padding:13px 16px;margin:20px 0}.procedure-list{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.procedure-detail{background:white;border:1px solid var(--line);border-radius:18px;padding:24px}.procedure-detail .procedure-icon{margin:0 0 22px;width:50px;height:50px}.procedure-detail p{font-size:12px;color:var(--muted);margin:12px 0 23px}.shop-hero{background:var(--deep);padding:25px 30px;color:white;border-radius:20px;display:flex;align-items:center;justify-content:space-between;margin:0 0 25px}.shop-hero h2{font-size:27px;max-width:380px;font-weight:500}.shop-hero p{font-size:11px;color:#afc4bb;margin-top:9px}.shop-hero .orbit{width:80px;height:80px;box-shadow:none;margin-right:40px}.shop-hero .orbit:after{font-size:65px}.shop-tools{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:22px;flex-wrap:wrap}.search-field{display:flex;align-items:center;gap:9px;border:1px solid var(--line);background:white;border-radius:10px;padding:0 13px;min-width:220px;flex:0 1 300px}.search-field .icon{width:18px;color:#819285}.search-field input{background:none;border:0;min-width:0;width:100%;padding:13px 0;font-size:12px;outline-offset:0}.filters{display:flex;gap:6px;flex-wrap:wrap}.filter{font-size:11px;padding:10px 13px;border:1px solid transparent;border-radius:30px;color:#8b978d}.filter.active{background:#e5eee2;color:#4d775c;font-weight:600}.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.product-card{background:white;border:1px solid var(--line);border-radius:18px;overflow:hidden;position:relative}.product-visual{background:#f0f4ed;display:block;width:100%;text-align:center;border-radius:0;padding:16px;height:224px}.product-card:nth-child(3n+2) .product-visual{background:#eef2f4}.product-card:nth-child(3n) .product-visual{background:#f3eff2}.product-visual img{height:100%;width:100%;object-fit:contain;transition:transform .25s}.product-visual:hover img{transform:translateY(-5px) rotate(-3deg)}.favorite{position:absolute;top:13px;right:13px;width:30px;height:30px;border-radius:50%;background:#ffffffb3;display:grid;place-items:center;color:#9ca99b}.favorite .icon{width:16px;height:16px}.favorite.selected{color:#ad6b7e;background:#fff}.favorite.selected .icon{fill:#ead3db}.product-info{padding:20px}.product-info .small-label{font-size:8px;letter-spacing:1.2px}.product-info h3{font-size:15px;margin:8px 0}.product-info p{font-size:10px;color:var(--muted)}.product-price{display:flex;align-items:center;justify-content:space-between;margin-top:18px}.price{font-size:18px;font-weight:650;color:var(--ink)}.price small{display:block;font-size:8px;font-weight:400;color:#9da69e;margin-top:5px}.add-button{background:var(--green);border-radius:8px;color:white;width:35px;height:35px;display:grid;place-items:center}.add-button .icon{width:17px}.empty{text-align:center;padding:50px 20px;background:white;border:1px dashed #ccd9cc;border-radius:18px;grid-column:1/-1}.empty .icon{width:40px;height:40px;color:#95b6a0;margin:0 0 20px}.empty p{color:var(--muted);font-size:12px;margin:10px 0 20px}.appointments{display:grid;gap:15px}.appointment-row{display:flex;align-items:center;gap:20px;background:white;border:1px solid var(--line);border-radius:16px;padding:20px}.appointment-date{border-radius:12px;background:#e8f0e4;min-width:62px;padding:12px;text-align:center;color:#527559}.appointment-date strong{font-size:25px;display:block}.appointment-date span{font-size:9px;text-transform:uppercase}.appointment-row p{font-size:12px;color:var(--muted);margin-top:6px}.appointment-row>button{margin-left:auto}.appointment-row .tag{margin-top:9px}.account-panel{max-width:600px;margin:auto;text-align:center;padding:40px}.account-panel>.avatar{height:70px;width:70px;font-size:27px;margin-bottom:25px}.account-panel p{margin:14px 0 22px}.account-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.account-stats{display:grid;grid-template-columns:repeat(2,1fr);margin:25px 0;gap:12px}.account-stat{padding:20px;background:#f3f6f0;border-radius:10px}.account-stat strong{display:block;font-size:25px;font-weight:600}.account-stat span{font-size:11px;color:#819183}dialog{border:0;border-radius:22px;padding:30px;max-width:550px;width:calc(100% - 30px);color:var(--ink);box-shadow:0 24px 100px #0f292e33;max-height:90dvh;overflow:auto}dialog::backdrop{background:#132b3580;backdrop-filter:blur(4px)}.modal-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:23px}.modal-head h2{font-size:21px}.modal-close{width:32px;height:32px;border-radius:50%;background:#f1f5ee;display:grid;place-items:center;flex-shrink:0}.modal-close .icon{width:18px}.modal-copy{font-size:12px;line-height:1.7;color:var(--muted);margin-bottom:20px}.form-grid{display:grid;gap:17px}.field{display:grid;gap:8px;font-size:11px;font-weight:600}.field input,.field select{padding:12px;border:1px solid #dce5db;border-radius:9px;width:100%;background:#fafcf8;min-width:0;color:var(--ink)}.form-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}.form-links{display:flex;justify-content:space-between;font-size:11px;margin-top:18px;color:var(--green)}.form-links button{padding:6px 0}.form-error{color:#a64141;font-size:12px;line-height:1.6}.form-hint{color:#8a968b;font-size:10px;line-height:1.6;margin-top:7px}.success-mark{width:65px;height:65px;display:grid;place-items:center;border-radius:50%;background:#e8f1e4;color:#629474;margin:15px auto 20px}.success-mark .icon{width:30px;height:30px}.success-body{text-align:center}.success-body h3{font-size:23px}.success-body p{font-size:12px;color:#7b8c7f;margin:14px 0 25px}.cart-list{display:grid;gap:15px}.cart-item{display:flex;gap:14px;align-items:center;padding-bottom:15px;border-bottom:1px solid var(--line)}.cart-item img{width:65px;height:75px;object-fit:contain;background:#f3f7ee;border-radius:10px}.cart-item-body{flex:1}.cart-item h3{font-size:12px;margin-bottom:7px}.cart-item p{font-size:11px;color:var(--muted)}.quantity{display:inline-flex;align-items:center;gap:13px;border:1px solid #e2eadd;border-radius:7px;margin-top:9px;font-size:11px}.quantity button{width:27px;height:28px;display:grid;place-items:center}.quantity .icon{width:12px;height:12px}.remove{font-size:9px;color:#ab7474;margin-left:10px}.cart-summary{display:flex;justify-content:space-between;align-items:center;padding:23px 0 8px;font-weight:700}.cart-summary strong{font-size:24px}.dialog-product{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:center}.dialog-product img{width:100%;background:#f1f5ec;border-radius:18px}.dialog-product h3{font-size:20px}.dialog-product p{font-size:11px;color:#82907e;margin:10px 0 15px}.dialog-product .button{margin-top:20px}.toast{position:fixed;bottom:25px;left:calc(50% + 122px);transform:translate(-50%,20px);background:var(--deep);color:white;font-size:12px;padding:14px 22px;border-radius:12px;box-shadow:0 5px 30px #132b3529;z-index:60;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:90vw;text-align:center}.toast.visible{opacity:1;transform:translate(-50%,0)}.faq{border-bottom:1px solid var(--line);padding:16px 0}.faq:last-child{border:0}.faq summary{font-weight:600;font-size:13px;cursor:pointer}.faq p{font-size:12px;color:var(--muted);margin-top:12px;line-height:1.7}.invisible{display:none}
@media(min-width:1600px){main{padding-top:45px}.home-top{gap:26px}.hero{min-height:280px}.hero h2{font-size:40px}.hero-art{right:75px}.hero p{font-size:12px}.procedure-card{padding:25px 10px}}
@media(max-width:1200px){.sidebar{width:214px;padding:30px 17px 16px}.brand{font-size:14px;gap:8px}.brand-mark{font-size:38px}.brand small{font-size:7px;letter-spacing:1.6px}.workspace{margin-left:214px}main{padding:30px}.topbar,.demo-bar{padding-left:30px;padding-right:30px}.hero{padding:28px;min-height:245px}.hero h2{font-size:28px}.hero-art{right:15px;width:145px}.orbit{width:120px;height:120px}.orbit:after{font-size:90px}.floating-label{font-size:8px;right:-3px}.hero-copy{max-width:70%}.hero p{max-width:230px}.home-top{grid-template-columns:minmax(0,1.7fr) minmax(215px,1fr);gap:16px}.next-card{padding:21px}.procedure-grid{gap:8px}.procedure-card span:last-child{font-size:9px}.doctor-preview{padding:17px;gap:15px}.doctor-monogram{min-width:75px;width:75px;height:110px}.doctor-preview h3{font-size:14px}.care-banner{padding:21px}.care-banner h3{font-size:17px}.care-banner .care-decoration{right:-55px}.toast{left:calc(50% + 107px)}.footer{padding-left:30px;padding-right:30px}}
@media(max-width:1000px){.sidebar{width:190px;padding:28px 13px 16px}.workspace{margin-left:190px}.brand{font-size:12px}.brand small{font-size:6px}.sidebar-label{font-size:7px;letter-spacing:1px}.nav-item{font-size:11px;gap:10px;padding:13px}.care-note{padding:20px 13px}.care-note h3{font-size:16px}.user-chip small{font-size:8px}.home-top{grid-template-columns:1fr}.next-card{flex-direction:row;align-items:center;gap:18px;padding:20px}.next-card-heading{display:none}.next-card h3{margin:0;font-size:15px;max-width:none}.next-card p{margin:0;font-size:10px;flex:1}.next-card .button{margin:0;white-space:nowrap}.hero-art{right:50px}.hero-copy{max-width:65%}.hero h2{font-size:33px}.hero p{max-width:320px}.procedure-grid{grid-template-columns:repeat(3,1fr);gap:12px}.procedure-card{padding:16px;display:flex;align-items:center;gap:10px;text-align:left}.procedure-icon{width:34px;height:34px;margin:0;flex-shrink:0}.procedure-icon .icon{width:19px;height:19px}.procedure-card span:last-child{font-size:10px}.home-bottom{grid-template-columns:1fr}.care-banner .care-decoration{right:20px}.procedure-list{grid-template-columns:repeat(2,1fr)}.two-column{grid-template-columns:1fr}.product-grid{grid-template-columns:repeat(2,1fr)}.toast{left:calc(50% + 95px)}.date-pill{display:none}}
@media(max-width:760px){.sidebar{display:none}.workspace{margin-left:0}.demo-bar{height:29px;padding:0 20px;font-size:8px}.demo-bar button{font-size:8px}.topbar{padding:0 20px;height:70px}.breadcrumb{margin-left:16px;flex:1;font-size:10px}.breadcrumb span{margin:0 8px}.mobile-brand{display:block;font:italic 33px Georgia,serif;letter-spacing:-4px;position:relative;padding-right:8px}.mobile-brand>span{font:13px sans-serif;position:absolute;top:0;right:-4px;color:var(--green)}.top-actions{gap:8px}.top-actions .icon-button:first-child,.top-divider{display:none}.avatar{width:32px;height:32px;font-size:11px}main{padding:26px 20px 25px;min-height:75vh}.page-intro{margin-bottom:23px;align-items:flex-start}h1{font-size:27px;letter-spacing:-1px}.page-intro p{font-size:11px;max-width:270px}.eyebrow{font-size:8px;letter-spacing:1.6px}.hero{padding:28px;min-height:254px;border-radius:19px}.hero h2{font-size:32px}.hero-art{right:27px;width:130px}.orbit{width:115px;height:115px}.orbit:after{font-size:86px}.floating-label{right:-8px;font-size:7px;padding:10px}.hero p{max-width:250px}.next-card{gap:13px;padding:18px;border-radius:16px}.next-card h3{font-size:13px;max-width:120px}.next-card p{font-size:10px}.next-card .button{font-size:10px;padding:10px}.section{margin-top:27px}.section-heading h2{font-size:17px}.procedure-grid{grid-template-columns:repeat(3,1fr);gap:9px}.procedure-card{flex-direction:column;text-align:center;gap:11px;padding:17px 6px 15px;border-radius:12px}.procedure-card span:last-child{font-size:10px}.procedure-icon{width:36px;height:36px}.home-bottom{gap:15px;margin-top:24px}.doctor-preview{padding:21px;gap:22px}.doctor-monogram{min-width:85px;width:85px;height:115px}.doctor-preview h3{font-size:17px}.care-banner{padding:25px}.care-banner h3{font-size:21px}.care-banner p{font-size:11px;max-width:220px}.footer{padding:20px 20px 105px;flex-wrap:wrap}.footer p{display:none}.mobile-nav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:30;background:#ffffffed;backdrop-filter:blur(15px);border-top:1px solid var(--line);padding:8px 5px calc(8px + env(safe-area-inset-bottom));justify-content:space-around;min-height:68px}.mobile-nav a{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:57px;padding:6px 4px;border-radius:9px;font-size:8px;color:#8b9a90}.mobile-nav a .icon{width:19px;height:19px}.mobile-nav a.active{color:var(--green);background:#ecf3e7;font-weight:700}.toast{left:50%;bottom:88px}.profile-hero{padding:25px;gap:20px}.profile-hero .doctor-monogram{width:85px;min-width:85px;height:120px}.profile-hero h1{font-size:23px}.profile-hero p{font-size:11px}.tag{font-size:8px}.two-column{gap:16px}.panel{padding:23px}.procedure-list{gap:13px}.procedure-detail{padding:21px}.procedure-detail h3{font-size:14px}.procedure-detail p{font-size:11px}.shop-hero{padding:25px}.shop-hero h2{font-size:24px;max-width:260px}.shop-hero .orbit{margin:0;width:65px;height:65px;min-width:65px}.shop-hero .orbit:after{font-size:50px}.shop-tools{gap:13px}.search-field{flex:1 1 100%;width:100%}.filters{gap:2px}.filter{padding:9px 12px;font-size:10px}.product-grid{gap:12px}.product-visual{height:175px;padding:10px}.product-info{padding:16px}.product-info h3{font-size:13px}.price{font-size:16px}.product-price{gap:7px}.product-card{border-radius:14px}.appointment-row{padding:15px;gap:12px;flex-wrap:wrap}.appointment-row>button{font-size:10px}.appointment-row h3{font-size:12px}.appointment-row p{font-size:10px}.page-intro>.button{font-size:10px;white-space:nowrap;padding:10px}.account-panel{padding:28px 22px}dialog{padding:24px;max-height:85dvh}.modal-head h2{font-size:19px}.form-two{grid-template-columns:1fr}.dialog-product{gap:15px}.dialog-product h3{font-size:17px}.form-links{gap:12px;font-size:10px}}
@media(max-width:430px){.hero{padding:25px 22px;min-height:264px}.hero h2{font-size:29px}.hero-copy{max-width:74%}.hero p{max-width:200px;font-size:10px}.hero-art{width:85px;right:14px;top:50px;opacity:.85}.orbit{width:90px;height:90px}.orbit:after{font-size:68px}.floating-label{display:none}.hero .eyebrow{font-size:7px;letter-spacing:1.2px}.hero .button{font-size:10px;gap:7px}.next-card{flex-wrap:wrap}.next-card h3{max-width:none;flex:1}.next-card p{order:3;flex-basis:100%}.next-card .button{font-size:9px;min-height:35px}.procedure-card span:last-child{font-size:9px}.care-banner .care-decoration{right:-45px}.care-banner h3{font-size:19px;max-width:240px}.shop-hero h2{font-size:23px;max-width:230px}.shop-hero .orbit{display:none}.product-visual{height:150px}.product-info{padding:13px}.product-info h3{font-size:12px}.product-info .small-label{font-size:7px}.price{font-size:15px}.product-info p{font-size:9px}.add-button{width:30px;height:32px}.profile-hero{flex-direction:column;text-align:center}.profile-hero .doctor-monogram{height:110px}.procedure-list{grid-template-columns:1fr}.procedure-detail{display:grid;grid-template-columns:50px 1fr;column-gap:17px}.procedure-detail .procedure-icon{grid-row:1/4}.procedure-detail p{margin:10px 0 15px}.procedure-detail .button{justify-self:start}.demo-detail{display:none}.dialog-product{grid-template-columns:1fr}.dialog-product img{height:180px}.page-intro>.button .icon{display:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Readable type and generous touch targets across the patient portal. */
:root {
  --muted: #5b6c68;
  --green: #326c5c;
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font-size: 16px; line-height: 1.5; }
button, input, select { touch-action: manipulation; }
button, a, input, select { scroll-margin-block: 100px; }
h1, h2, h3, p { overflow-wrap: break-word; }
h1 { font-size: 34px; line-height: 1.22; }
h2 { font-size: 24px; line-height: 1.35; }
h3 { font-size: 20px; line-height: 1.4; }
p { line-height: 1.6; }

.page-intro p, .hero p, .next-card p, .section-heading p,
.doctor-preview p, .care-banner p, .panel p, .profile-hero p,
.procedure-detail p, .shop-hero p, .product-info p, .empty p,
.appointment-row p, .modal-copy, .success-body p, .cart-item p,
.dialog-product p, .faq p { font-size: 16px; line-height: 1.6; }
.eyebrow, .hero .eyebrow, .doctor-preview .eyebrow,
.care-banner .eyebrow, .small-label, .product-info .small-label {
  font-size: 12px; line-height: 1.5; letter-spacing: 1.1px;
}
.eyebrow, .small-label { color: #526c5f; }
.hero .eyebrow, .profile-hero .eyebrow, .shop-hero .eyebrow { color: #bdd8c9; }
.care-banner .eyebrow { color: #526c4c; }
.notice, .form-hint, .form-error, .price small, .tag,
.account-stat span, .appointment-date span, .user-chip small {
  font-size: 14px; line-height: 1.55;
}
.notice, .form-hint, .price small, .account-stat span { color: var(--muted); }
.feature-list { gap: 19px; }
.feature-list li { font-size: 16px; color: var(--muted); align-items: flex-start; }
.feature-list .icon { margin-top: 2px; color: var(--green); }
.tag { padding: 7px 10px; color: #486653; }
.profile-hero .tag { color: #d7e8dd; }

.button, .hero .button, .next-card .button, .page-intro > .button,
.appointment-row > .button {
  min-height: 48px; padding: 12px 18px; font-size: 16px; line-height: 1.4;
  border-radius: 11px; white-space: normal;
}
.button .icon { width: 20px; height: 20px; }
.text-button, .inline-link { font-size: 15px; min-height: 44px; line-height: 1.45; }
.text-button { display: inline-flex; align-items: center; }
.inline-link { white-space: normal; color: var(--green); }
.inline-link .icon { width: 18px; height: 18px; }
.icon-button, button.avatar, .modal-close, .favorite {
  width: 48px; height: 48px; min-width: 48px; min-height: 48px;
}
.icon-button .icon, .modal-close .icon, .favorite .icon { width: 22px; height: 22px; }
button.avatar { font-size: 16px; }
.cart-count { font-size: 12px; min-width: 22px; height: 22px; line-height: 22px; }
.add-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  width: auto; min-width: 48px; height: auto; min-height: 48px;
  padding: 10px 13px; font-size: 15px; font-weight: 600;
}
.add-button .icon { width: 19px; height: 19px; }
.quantity { gap: 9px; font-size: 16px; border-radius: 10px; }
.quantity button { width: 44px; height: 44px; }
.quantity .icon { width: 18px; height: 18px; }
.remove { min-height: 44px; padding: 9px 0; font-size: 14px; color: #934e4e; }
.form-links { font-size: 15px; flex-wrap: wrap; gap: 10px 18px; }
.form-links button { min-height: 44px; padding: 10px 0; text-align: left; }
.filter { min-height: 44px; padding: 10px 16px; font-size: 15px; color: #566a5c; }
.filter.active { color: #365c43; }

.sidebar { width: 256px; padding: 30px 20px 20px; overflow-y: auto; }
.workspace { margin-left: 256px; }
.brand { min-height: 68px; white-space: normal; }
.brand-logo { display: block; width: 190px; max-width: 100%; height: auto; max-height: 86px; object-fit: contain; }
.sidebar-label { font-size: 11px; letter-spacing: 1px; margin: 32px 12px 13px; color: #617567; }
.nav-item { min-height: 52px; font-size: 16px; gap: 13px; padding: 13px 15px; color: var(--muted); }
.nav-item .icon { width: 23px; height: 23px; }
.sidebar-bottom { padding-top: 25px; }
.care-note h3 { font-size: 21px; }
.care-note p { font-size: 14px; max-width: none; }
.user-chip { min-height: 76px; }
.user-chip > span:nth-child(2) { font-size: 15px; }
.user-chip small { font-size: 12px; }
.avatar.small { width: 40px; height: 40px; min-width: 40px; font-size: 14px; }
.demo-bar { height: auto; min-height: 44px; gap: 12px; padding-block: 3px; font-size: 12px; color: #526a58; }
.demo-bar button { min-height: 40px; font-size: 12px; color: #526a58; }
.topbar { height: 84px; }
.top-actions { gap: 12px; }
.breadcrumb { font-size: 14px; color: var(--muted); }
.breadcrumb span { color: #687c6f; }
.date-pill { font-size: 14px; padding: 12px 15px; color: var(--muted); }
.date-pill .icon { width: 18px; height: 18px; }
.page-intro { gap: 22px; align-items: center; }
.page-intro p { max-width: 680px; }
.hero { min-height: 310px; padding: 34px; }
.hero-copy { max-width: 70%; }
.hero h2 { font-size: clamp(32px, 2.5vw, 42px); line-height: 1.2; }
.hero p { max-width: 370px; color: #c1d2d3; margin: 17px 0 24px; }
.hero-art { right: 20px; top: 55px; pointer-events: none; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.floating-label { font-size: 12px; padding: 12px; }
.next-card { padding: 27px; }
.next-card h3 { font-size: 23px; max-width: none; margin: 22px 0 12px; }
.next-card p { margin-bottom: 24px; }
.next-card .button { width: 100%; }
.section-heading { align-items: center; flex-wrap: wrap; gap: 12px 20px; }
.section-heading h2 { font-size: 23px; }
.section-heading .small-label { font-size: 12px; }
.procedure-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.procedure-card { display: flex; align-items: center; gap: 14px; padding: 20px 16px; text-align: left; min-height: 92px; }
.procedure-card .procedure-icon { margin: 0; width: 46px; height: 46px; min-width: 46px; }
.procedure-card span:last-child { font-size: 16px; line-height: 1.4; }
.procedure-icon .icon { width: 26px; height: 26px; }
.doctor-preview { padding: 25px; gap: 23px; }
.doctor-preview h3 { font-size: 21px; }
.doctor-preview p { margin: 10px 0 12px; }
.care-banner { padding: 27px; }
.care-banner h3 { font-size: 25px; max-width: 330px; }
.care-banner p { max-width: 310px; color: #576c50; }
.care-banner .care-decoration { right: -55px; opacity: .6; pointer-events: none; }
.profile-hero h1 { font-size: 34px; }
.profile-hero p { color: #d0dfd8; }
.procedure-detail h3 { font-size: 21px; }
.procedure-detail p { margin: 13px 0 23px; }
.shop-hero h2 { font-size: 32px; max-width: 460px; }
.shop-hero p { color: #c4d7cd; }
.search-field { min-height: 52px; }
.search-field input { font-size: 16px; padding: 14px 0; }
.search-field input::placeholder { color: #61736a; }
.search-field .icon { width: 22px; height: 22px; }
.product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.product-info { padding: 21px; min-width: 0; }
.product-info h3 { font-size: 20px; line-height: 1.35; margin: 10px 0; }
.product-info .small-label { font-size: 12px; }
.product-info p { font-size: 15px; }
.product-price { flex-wrap: wrap; align-items: flex-end; gap: 16px 12px; margin-top: 20px; }
.price { font-size: 23px; }
.price small { font-size: 13px; }
.favorite { top: 12px; right: 12px; color: #5c7566; background: #fff; }
.appointment-row { gap: 20px; flex-wrap: wrap; }
.appointment-row h3 { font-size: 19px; }
.appointment-row p { font-size: 15px; }
.appointment-date { min-width: 70px; }
.appointment-date strong { font-size: 28px; }
.appointment-date span { font-size: 13px; }
.appointment-row .tag { margin-top: 12px; }
.account-stat strong { font-size: 30px; }
.account-stat span { color: var(--muted); }
.footer { font-size: 14px; flex-wrap: wrap; gap: 16px; }
.footer > span { font-size: 16px; color: #526b59; }
.footer p { font-size: 13px; color: var(--muted); }
.footer button { min-height: 44px; font-size: 13px; color: var(--muted); }
dialog { max-width: 620px; padding: 30px; }
.modal-head { align-items: flex-start; gap: 17px; }
.modal-head h2 { font-size: 24px; line-height: 1.35; padding-top: 8px; }
.modal-close { flex: 0 0 48px; }
.field { font-size: 16px; gap: 9px; }
.field input, .field select { font-size: 16px; min-height: 52px; padding: 12px 14px; }
.form-grid { gap: 20px; }
.form-error { font-size: 15px; }
.success-body h3 { font-size: 26px; }
.cart-item { align-items: flex-start; gap: 16px; }
.cart-item-body { min-width: 0; }
.cart-item h3 { font-size: 17px; }
.cart-item p { font-size: 14px; }
.cart-item > strong { font-size: 16px; white-space: nowrap; }
.cart-summary { font-size: 17px; gap: 15px; }
.cart-summary strong { font-size: 27px; white-space: nowrap; }
.dialog-product h3 { font-size: 24px; }
.dialog-product p { font-size: 16px; }
.dialog-product .button { padding-inline: 14px; }
.faq summary { font-size: 16px; min-height: 44px; line-height: 1.5; }
.faq p { margin-top: 7px; }
.toast { left: calc(50% + 128px); font-size: 15px; line-height: 1.5; padding: 15px 20px; }

/* Existing brand assets keep their natural proportions. */
.brands-section { margin-top: 34px; }
.brands-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.brand-card {
  margin: 0; min-width: 0; min-height: 210px; padding: 24px 18px 18px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background: #fff; border: 1px solid var(--line); border-radius: 18px; text-align: center;
  transition: border-color .2s, box-shadow .2s;
}
.brand-card:hover { border-color: #7eaa95; box-shadow: 0 5px 20px #19342b08; }
.logo-image { display: block; width: 100%; max-width: 190px; height: 130px; object-fit: contain; }
.brand-name { display: block; font-size: 14px; line-height: 1.45; font-weight: 600; color: var(--ink); }
.mobile-brand-logo { display: block; width: 170px; max-width: 100%; height: auto; max-height: 48px; object-fit: contain; }

@media (max-width: 1200px) {
  .sidebar { width: 230px; padding-inline: 16px; }
  .workspace { margin-left: 230px; }
  .brand-logo { width: 185px; }
  .home-top { grid-template-columns: minmax(0, 1.5fr) minmax(245px, 1fr); }
  .hero { padding: 30px; }
  .hero-art { right: -15px; opacity: .55; }
  .hero-copy { max-width: 85%; }
  .hero h2 { font-size: 34px; }
  .floating-label { display: none; }
  .next-card { padding: 24px; }
  .next-card h3 { font-size: 22px; }
  .home-bottom { grid-template-columns: 1fr; }
  .care-banner .care-decoration { right: 0; }
  .brands-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toast { left: calc(50% + 115px); }
}

@media (max-width: 1000px) {
  .home-top { grid-template-columns: 1fr; }
  .hero-copy { max-width: 76%; }
  .hero-art { right: 20px; opacity: .8; }
  .next-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 20px; }
  .next-card-heading { display: none; }
  .next-card h3 { max-width: none; margin: 0; font-size: 21px; }
  .next-card p { margin: 0; grid-column: 1; }
  .next-card .button { width: auto; grid-column: 2; grid-row: 1 / 3; margin: 0; }
  .procedure-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .sidebar { display: none; }
  .workspace { margin-left: 0; }
  .demo-bar { padding: 3px 24px; min-height: 44px; }
  .topbar { height: 82px; padding-inline: 24px; gap: 14px; }
  .mobile-brand { display: flex; align-items: center; min-height: 48px; padding: 0; flex-shrink: 0; }
  .breadcrumb { margin-left: 0; flex: 1; font-size: 14px; }
  .breadcrumb span { margin-inline: 8px; }
  .top-actions { gap: 6px; }
  .top-actions .icon-button:first-child, .top-divider { display: none; }
  main { padding: 30px 24px 30px; }
  .mobile-nav {
    display: flex; position: fixed; inset: auto 0 0; z-index: 30;
    justify-content: space-around; gap: 2px; min-height: 80px;
    padding: 7px 7px calc(8px + env(safe-area-inset-bottom));
    background: #ffffffed; backdrop-filter: blur(15px); border-top: 1px solid var(--line);
  }
  .mobile-nav a {
    display: flex; flex: 1; min-width: 0; min-height: 60px; padding: 8px 3px;
    flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    border-radius: 11px; font-size: 12px; line-height: 1.25; color: #52695a;
  }
  .mobile-nav a .icon { width: 24px; height: 24px; }
  .mobile-nav a.active { color: #28563f; background: #e8f1e3; font-weight: 700; }
  .footer { padding: 22px 24px calc(110px + env(safe-area-inset-bottom)); }
  .toast { left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); width: max-content; max-width: calc(100vw - 32px); }
  .date-pill { display: none; }
  .hero { min-height: 300px; }
  .home-bottom { grid-template-columns: 1fr 1fr; }
  .doctor-preview { gap: 17px; padding: 23px; }
  .doctor-preview h3 { font-size: 20px; }
  .care-banner { padding: 24px; }
  .care-banner h3 { font-size: 23px; }
  .care-banner .care-decoration { right: -60px; }
}

@media (max-width: 650px) {
  h1 { font-size: 30px; letter-spacing: -.9px; }
  h2 { font-size: 24px; }
  .demo-bar { padding-inline: 20px; font-size: 12px; gap: 8px; }
  .demo-bar button { font-size: 12px; min-height: 44px; }
  .demo-detail { display: none; }
  .topbar { height: 78px; padding-inline: 20px; gap: 10px; }
  .breadcrumb { display: none; }
  .top-actions { margin-left: auto; gap: 6px; }
  .mobile-brand-logo { width: 170px; }
  main { padding: 27px 20px 30px; }
  .page-intro { flex-wrap: wrap; margin-bottom: 24px; gap: 17px; }
  .page-intro p { max-width: none; margin-top: 12px; font-size: 16px; }
  .page-intro > .button { width: 100%; font-size: 16px; }
  .page-intro > .button .icon { display: block; }
  .hero { min-height: 310px; padding: 28px 24px; }
  .hero-copy { max-width: 100%; }
  .hero h2 { font-size: 34px; max-width: 320px; }
  .hero p { font-size: 16px; max-width: 100%; }
  .hero .eyebrow { font-size: 12px; letter-spacing: 1px; }
  .hero-art { right: 12px; top: 20px; width: 100px; height: 100px; opacity: .16; }
  .hero-art .orbit { width: 100px; height: 100px; }
  .hero .button { font-size: 16px; min-height: 48px; }
  .hero-actions { align-items: stretch; }
  .hero-actions .button { flex: 1 1 auto; }
  .next-card { display: flex; flex-direction: column; align-items: stretch; gap: 14px; padding: 24px; }
  .next-card h3 { font-size: 22px; flex: none; }
  .next-card p { order: initial; flex: none; font-size: 16px; }
  .next-card .button { width: 100%; font-size: 16px; min-height: 48px; }
  .section-heading { gap: 6px 14px; }
  .section-heading h2 { font-size: 23px; }
  .section-heading p { font-size: 16px; }
  .section-heading .inline-link { font-size: 15px; }
  .procedure-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .procedure-card { flex-direction: column; justify-content: center; text-align: center; padding: 20px 12px; gap: 13px; min-height: 130px; }
  .procedure-card span:last-child { font-size: 16px; }
  .home-bottom { grid-template-columns: 1fr; gap: 18px; }
  .doctor-preview { gap: 22px; padding: 24px; }
  .doctor-preview h3 { font-size: 22px; }
  .doctor-preview p { font-size: 16px; }
  .care-banner { padding: 26px; }
  .care-banner h3 { font-size: 25px; max-width: 285px; }
  .care-banner p { font-size: 16px; max-width: 280px; }
  .profile-hero { padding: 27px; gap: 22px; }
  .profile-hero h1 { font-size: 29px; }
  .profile-hero p { font-size: 16px; }
  .profile-hero .tag { font-size: 13px; margin-block: 4px; }
  .procedure-list { grid-template-columns: 1fr; gap: 16px; }
  .procedure-detail { display: block; padding: 25px; }
  .procedure-detail .procedure-icon { margin-bottom: 18px; }
  .procedure-detail h3 { font-size: 22px; }
  .procedure-detail p { font-size: 16px; }
  .procedure-detail .button { min-height: 48px; }
  .shop-hero { padding: 28px; }
  .shop-hero h2 { font-size: 29px; max-width: none; }
  .shop-hero .orbit { display: none; }
  .shop-hero p { font-size: 16px; }
  .shop-tools { gap: 16px; }
  .search-field { flex-basis: 100%; min-width: 0; }
  .search-field input { font-size: 16px; }
  .filters { gap: 7px; }
  .filter { font-size: 14px; min-height: 44px; padding: 10px 14px; }
  .product-grid { gap: 14px; }
  .product-visual { height: 190px; }
  .product-info { padding: 18px; }
  .product-info h3 { font-size: 19px; }
  .product-info p { font-size: 14px; }
  .product-info .small-label { font-size: 12px; }
  .product-price { gap: 14px; }
  .product-price .add-button { width: 100%; }
  .price { font-size: 23px; }
  .price small { font-size: 13px; }
  .appointment-row { padding: 22px; gap: 17px; align-items: flex-start; }
  .appointment-row > div:nth-child(2) { flex: 1; min-width: 150px; }
  .appointment-row h3 { font-size: 18px; }
  .appointment-row p { font-size: 15px; }
  .appointment-row > button { margin: 0; width: 100%; font-size: 15px; }
  .account-panel { padding: 30px 24px; }
  .account-actions { flex-direction: column; }
  .account-actions .button { width: 100%; }
  .account-stat { padding: 17px 12px; }
  .account-stat span { font-size: 14px; }
  dialog { padding: 24px; width: calc(100% - 24px); max-height: 88dvh; }
  .modal-head { gap: 12px; margin-bottom: 21px; }
  .modal-head h2 { font-size: 23px; }
  .modal-copy, .success-body p { font-size: 16px; }
  .form-two { grid-template-columns: 1fr; }
  .form-links { font-size: 15px; }
  .cart-item { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 13px; }
  .cart-item img { width: 60px; height: 80px; }
  .cart-item > strong { grid-column: 2; font-size: 18px; margin-top: -4px; }
  .cart-item h3 { font-size: 18px; }
  .cart-item p { font-size: 14px; }
  .quantity { gap: 8px; }
  .remove { display: block; margin: 5px 0 0; }
  .cart-summary { flex-wrap: wrap; gap: 10px; }
  .cart-summary strong { font-size: 27px; }
  .dialog-product { grid-template-columns: 1fr; gap: 24px; }
  .dialog-product img { height: 210px; object-fit: contain; }
  .dialog-product h3 { font-size: 24px; }
  .dialog-product p { font-size: 16px; }
  .dialog-product .button { width: 100%; }
  .brands-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
  .brand-card { min-height: 200px; padding: 22px 14px 18px; gap: 14px; }
  .brand-card:last-child { grid-column: 1 / -1; }
  .logo-image { height: 112px; }
  .brand-name { font-size: 14px; }
  .footer { padding-inline: 20px; }
}

@media (max-width: 430px) {
  h1 { font-size: 29px; }
  .demo-bar { padding-inline: 16px; }
  .demo-bar button { font-size: 12px; }
  .topbar { padding-inline: 16px; }
  .top-actions { gap: 3px; }
  .mobile-brand-logo { width: 165px; }
  main { padding-inline: 16px; }
  .hero { padding: 27px 22px; }
  .hero h2 { font-size: 33px; }
  .hero .button { width: 100%; }
  .doctor-preview { padding: 22px; gap: 18px; }
  .doctor-monogram { min-width: 68px; width: 68px; }
  .doctor-preview h3 { font-size: 20px; }
  .profile-hero { flex-direction: column; text-align: center; }
  .profile-hero h1 { font-size: 29px; }
  .product-grid { grid-template-columns: 1fr; }
  .product-card { display: grid; grid-template-columns: 108px minmax(0, 1fr); }
  .product-visual { height: 100%; min-height: 250px; padding: 49px 10px 15px; }
  .product-visual img { height: 100%; min-height: 150px; }
  .product-info { padding: 22px 17px; }
  .product-card .favorite { left: 12px; right: auto; }
  .product-info h3 { font-size: 20px; }
  .product-info p { font-size: 15px; }
  .product-price { margin-top: 19px; }
  .product-price .add-button { width: 100%; }
  .notice { padding: 15px; font-size: 14px; }
  .brands-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand-card { min-height: 200px; padding-inline: 12px; }
  .logo-image { height: 112px; }
  .brand-name { font-size: 14px; }
  dialog { padding: 22px; }
  .modal-head h2 { font-size: 22px; }
  .cart-item { grid-template-columns: 50px minmax(0, 1fr); gap: 12px; }
  .cart-item img { width: 50px; height: 74px; }
  .cart-item h3 { font-size: 17px; }
  .cart-item p { font-size: 14px; }
  .cart-item .quantity { gap: 7px; }
}

@media (max-width: 350px) {
  .mobile-brand-logo { width: 145px; }
  .topbar { padding-inline: 14px; }
  .top-actions { gap: 0; }
  .hero h2 { font-size: 30px; }
  .hero { padding-inline: 20px; }
  .hero .eyebrow { font-size: 11px; }
  .product-card { grid-template-columns: 90px minmax(0, 1fr); }
  .product-info { padding: 20px 14px; }
  .product-info h3 { font-size: 18px; }
  .cart-item { grid-template-columns: minmax(0, 1fr); }
  .cart-item img { display: none; }
  .cart-item > strong { grid-column: 1; }
}

@media (min-width: 901px) and (max-height: 760px) {
  .sidebar-label { margin-top: 22px; }
  .sidebar-bottom { padding-top: 15px; }
  .care-note { display: none; }
  .user-chip { margin-top: 12px; }
}

/* Distinct service colors, with bariatric care as the primary specialty. */
.procedure-card, .procedure-detail {
  border-width: 1.5px;
  border-color: #aecab8;
  background: #edf7f0;
}
.procedure-card:hover {
  box-shadow: 0 5px 16px #173e2d0d;
  border-color: #4f8b69;
}
.procedure-card:nth-child(2), .procedure-detail:nth-child(2) {
  background: #edf4ff; border-color: #a9c2e0;
}
.procedure-card:nth-child(3), .procedure-detail:nth-child(3) {
  background: #f3eefb; border-color: #c5b2e1;
}
.procedure-card:nth-child(4), .procedure-detail:nth-child(4) {
  background: #fff1e8; border-color: #dfb99f;
}
.procedure-card:nth-child(5), .procedure-detail:nth-child(5) {
  background: #e9f5f1; border-color: #9dc9bb;
}
.procedure-card:nth-child(6), .procedure-detail:nth-child(6) {
  background: #fff7e5; border-color: #ddc78e;
}
.procedure-card:nth-child(2) .procedure-icon, .procedure-detail:nth-child(2) .procedure-icon {
  background: #d5e5f7; color: #2c5e88;
}
.procedure-card:nth-child(3) .procedure-icon, .procedure-detail:nth-child(3) .procedure-icon {
  background: #e5d9f5; color: #694391;
}
.procedure-card:nth-child(4) .procedure-icon, .procedure-detail:nth-child(4) .procedure-icon {
  background: #f8dccb; color: #96532b;
}
.procedure-card:nth-child(5) .procedure-icon, .procedure-detail:nth-child(5) .procedure-icon {
  background: #cce9df; color: #276d56;
}
.procedure-card:nth-child(6) .procedure-icon, .procedure-detail:nth-child(6) .procedure-icon {
  background: #f1e2b7; color: #7b5d21;
}
.procedure-card.primary-procedure, .procedure-detail.primary-procedure {
  background: #e2f3e7;
  border: 2px solid #2e7b57;
  box-shadow: 0 3px 12px #28623d0b;
}
.procedure-card.primary-procedure:hover { border-color: #164c32; background: #d9efdf; }
.primary-procedure .procedure-icon { background: #28734e; color: #fff; }
.procedure-card.primary-procedure .procedure-label,
.procedure-detail.primary-procedure h3 { color: #17482d; font-weight: 750; }
.procedure-label { min-width: 0; }
.primary-procedure .procedure-badge {
  display: block; width: fit-content; max-width: 100%;
  padding: 4px 8px; margin: 0 0 7px;
  border-radius: 6px; background: #256345; color: #fff;
  font-size: 12px; font-weight: 600; line-height: 1.35; letter-spacing: .1px;
}
.procedure-card.primary-procedure span.procedure-badge { font-size: 12px; line-height: 1.35; }
.procedure-detail.primary-procedure .procedure-badge { margin-bottom: 10px; }
.procedure-detail.primary-procedure .button.outline { color: #245d3d; border-color: #81af92; }
.procedure-detail p { color: #50655b; }

@media (max-width: 650px) {
  .hero h2 { max-width: 100%; font-size: clamp(29px, 8.2vw, 34px); line-height: 1.22; }
  .hero-copy { max-width: 100%; }
  .hero-art { display: none; }
  .procedure-grid .procedure-card { min-height: 116px; }
  .procedure-grid .procedure-card.primary-procedure {
    grid-column: 1 / -1; flex-direction: row; justify-content: flex-start;
    text-align: left; padding: 20px 22px; min-height: 104px; gap: 19px;
  }
  .procedure-card.primary-procedure .procedure-icon { width: 52px; height: 52px; min-width: 52px; }
  .procedure-card.primary-procedure .procedure-label { font-size: 19px; }
  .procedure-card.primary-procedure span.procedure-badge { font-size: 13px; margin-bottom: 7px; }
  .procedure-grid .procedure-card:last-child {
    grid-column: 1 / -1; flex-direction: row; justify-content: flex-start;
    min-height: 84px; padding: 17px 22px; text-align: left;
  }
}
