@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url(assets/fonts/hanken-grotesk.woff2) format('woff2')}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:300 500;font-display:swap;src:url(assets/fonts/newsreader.woff2) format('woff2')}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:300 500;font-display:swap;src:url(assets/fonts/newsreader-italic.woff2) format('woff2')}
*,*::before,*::after{box-sizing:border-box}
body{margin:0}
img{max-width:100%}
a{color:inherit}
.btn{transition:filter .2s ease, background-color .2s ease}
.btn-p:hover{filter:brightness(0.78)}
.btn-o:hover{background-color:rgba(15,76,82,0.07)}
.btn-w:hover{background-color:#E3EEEC}
.btn:focus-visible,.tl:focus-visible,.nav:focus-visible,a:focus-visible{outline:2px solid #0F4C52;outline-offset:3px}
.btn-w:focus-visible{outline-color:#FFFFFF}
.tl{text-decoration-thickness:1px;text-underline-offset:6px}
.tl:hover{opacity:.72}
.nav:hover{color:#13201F}
.card{transition:background-color .25s ease}
.card:hover{background-color:#F3F7F6}
.page{font-family: 'Hanken Grotesk', system-ui, sans-serif; color: rgb(19, 32, 31); background: rgb(255, 255, 255); -webkit-font-smoothing: antialiased}
.hdr{position: sticky; top: 0px; z-index: 20; background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(10px); border-bottom: 1px solid rgb(227, 232, 231)}
.hdr-in{max-width: 1312px; margin: 0px auto; padding: 0px 64px; height: 80px; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box}
.c4{display: flex; align-items: center; gap: 14px; text-decoration: none}
.c5{width: 40px; height: 40px; border: 1px solid rgb(15, 76, 82); display: flex; align-items: center; justify-content: center; font-family: Newsreader, serif; font-size: 22px; color: rgb(15, 76, 82); box-sizing: border-box}
.c6{display: flex; flex-direction: column; gap: 3px}
.c7{font-family: Newsreader, serif; font-size: 22px; line-height: 1; letter-spacing: -0.01em; color: rgb(19, 32, 31)}
.c8{font-size: 10.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: rgb(95, 109, 107)}
.c9{display: flex; align-items: center; gap: 40px}
.c10{display: flex; gap: 36px; font-size: 15px; font-weight: 500}
.c11{text-decoration: none; color: rgb(74, 89, 87)}
.c12{display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0px 20px; background: rgb(15, 76, 82); color: rgb(255, 255, 255); text-decoration: none; font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 3px}
.c13{position: relative}
.hero-in{max-width: 1312px; margin: 0px auto; padding: 72px 64px 112px; box-sizing: border-box; display: grid; grid-template-columns: repeat(12, minmax(0px, 1fr)); column-gap: 32px; align-items: center}
.hero-txt{grid-column: 1 / span 7; padding-right: 40px; display: flex; flex-direction: column}
.c16{display: flex; align-items: center; gap: 14px}
.c17{width: 32px; height: 1px; background: rgb(15, 76, 82)}
.c18{margin: 0px; font-size: 13px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(15, 76, 82)}
.hero-title{margin: 32px 0px 0px; font-family: Newsreader, serif; font-weight: 400; font-size: 76px; line-height: 1.02; letter-spacing: -0.025em; color: rgb(19, 32, 31)}
.c20{font-style: italic; color: rgb(15, 76, 82)}
.c21{margin: 32px 0px 0px; max-width: 520px; font-size: 19px; line-height: 1.6; color: rgb(71, 86, 84)}
.c22{margin-top: 36px; display: flex; align-items: stretch; gap: 0px; border-top: 1px solid rgb(227, 232, 231); border-bottom: 1px solid rgb(227, 232, 231); max-width: 560px}
.c23{flex: 1 1 0%; padding: 18px 24px 18px 0px; display: flex; flex-direction: column; gap: 4px}
.c24{font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(107, 120, 118)}
.c25{font-family: Newsreader, serif; font-size: 22px; line-height: 1.2}
.c26{flex: 1 1 0%; padding: 18px 0px 18px 24px; border-left: 1px solid rgb(227, 232, 231); display: flex; flex-direction: column; gap: 4px}
.hero-cta{margin-top: 40px; display: flex; align-items: center; gap: 32px}
.c28{display: inline-flex; align-items: center; gap: 12px; height: 58px; padding: 0px 30px; background: rgb(15, 76, 82); color: rgb(255, 255, 255); text-decoration: none; font-size: 14px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; border-radius: 3px}
.c29{font-size: 16px; font-weight: 600; color: rgb(19, 32, 31); text-decoration: underline rgb(185, 199, 197)}
.c30{margin-top: 22px; display: flex; align-items: center; gap: 20px; font-size: 14.5px; color: rgb(95, 109, 107)}
.c31{display: inline-flex; align-items: center; gap: 8px}
.c32{width: 6px; height: 6px; border-radius: 50%; background: rgb(15, 76, 82)}
.c33{width: 1px; height: 14px; background: rgb(211, 219, 218)}
.hero-fig{grid-column: 8 / span 5; position: relative; padding: 0px 0px 48px}
.hero-bg{position: absolute; inset: 72px -40px 0px 56px; background: rgb(233, 241, 240)}
.hero-line{position: absolute; top: 72px; right: -40px; width: 1px; bottom: 0px; background: rgb(15, 76, 82); opacity: 0.25}
.c37{position: relative; z-index: 1; width: calc(100% - 24px); aspect-ratio: 4 / 5; background: repeating-linear-gradient(135deg, rgba(19, 32, 31, 0.043) 0px, rgba(19, 32, 31, 0.043) 1px, transparent 1px, transparent 14px), rgb(243, 239, 232); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 0px; box-sizing: border-box; overflow: hidden}
.c38{display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center}
.c39{position: absolute; top: 16px; left: 16px; width: 18px; height: 18px; border-top: 1px solid rgb(169, 157, 140); border-left: 1px solid rgb(169, 157, 140)}
.c40{position: absolute; top: 16px; right: 16px; width: 18px; height: 18px; border-top: 1px solid rgb(169, 157, 140); border-right: 1px solid rgb(169, 157, 140)}
.c41{position: absolute; bottom: 16px; left: 16px; width: 18px; height: 18px; border-bottom: 1px solid rgb(169, 157, 140); border-left: 1px solid rgb(169, 157, 140)}
.c42{position: absolute; bottom: 16px; right: 16px; width: 18px; height: 18px; border-bottom: 1px solid rgb(169, 157, 140); border-right: 1px solid rgb(169, 157, 140)}
.hero-badge{position: absolute; z-index: 2; left: -36px; bottom: 88px; background: rgb(255, 255, 255); border: 1px solid rgb(227, 232, 231); padding: 18px 22px; display: flex; flex-direction: column; gap: 4px; box-shadow: rgba(10, 51, 55, 0.35) 0px 18px 40px -24px}
.c44{font-family: Newsreader, serif; font-size: 20px; line-height: 1.2}
.c45{font-size: 13px; color: rgb(95, 109, 107)}
.hero-side{position: absolute; z-index: 2; right: -28px; top: 72px; transform-origin: right top; transform: rotate(-90deg) translateY(-100%); white-space: nowrap; font-size: 11px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: rgb(107, 120, 118)}
.c47{border-top: 1px solid rgb(227, 232, 231); border-bottom: 1px solid rgb(227, 232, 231)}
.trust-in{max-width: 1312px; margin: 0px auto; padding: 0px 64px; box-sizing: border-box; display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr))}
.c49{padding: 34px 28px 34px 0px; display: flex; gap: 16px; align-items: flex-start}
.c50{display: flex; flex-direction: column; gap: 6px}
.c51{font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase}
.c52{font-size: 14.5px; color: rgb(95, 109, 107)}
.c53{padding: 34px 28px; border-left: 1px solid rgb(227, 232, 231); display: flex; gap: 16px; align-items: flex-start}
.c54{padding: 34px 0px 34px 28px; border-left: 1px solid rgb(227, 232, 231); display: flex; gap: 16px; align-items: flex-start}
.c55{background: rgb(246, 243, 238)}
.appr-in{max-width: 1312px; margin: 0px auto; padding: 128px 64px; box-sizing: border-box; display: grid; grid-template-columns: repeat(12, minmax(0px, 1fr)); gap: 72px 32px}
.appr-head{grid-column: 1 / span 5; display: flex; flex-direction: column; gap: 24px}
.c58{font-size: 12.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(15, 76, 82)}
.h2-54{margin: 0px; font-family: Newsreader, serif; font-weight: 400; font-size: 54px; line-height: 1.06; letter-spacing: -0.02em}
.appr-lead{grid-column: 7 / span 6; align-self: end}
.c61{margin: 0px; font-size: 21px; line-height: 1.6; color: rgb(57, 71, 69)}
.appr-img{grid-column: 1 / span 5; min-height: 440px; position: relative; background: repeating-linear-gradient(135deg, rgba(19, 32, 31, 0.05) 0px, rgba(19, 32, 31, 0.05) 1px, transparent 1px, transparent 14px), rgb(236, 230, 220); display: flex; flex-direction: column; justify-content: flex-end; padding: 0px; box-sizing: border-box; gap: 6px; overflow: hidden}
.c63{display: block; width: 100%; height: 440px; object-fit: cover; object-position: center center}
.appr-list{grid-column: 7 / span 6; display: flex; flex-direction: column}
.c65{display: grid; grid-template-columns: 64px 1fr; gap: 24px; padding: 32px 0px; border-top: 1px solid rgb(220, 212, 199)}
.c66{font-family: Newsreader, serif; font-size: 22px; color: rgb(15, 76, 82)}
.c67{display: flex; flex-direction: column; gap: 8px}
.c68{margin: 0px; font-family: Newsreader, serif; font-weight: 400; font-size: 28px; line-height: 1.2}
.c69{margin: 0px; font-size: 16.5px; line-height: 1.6; color: rgb(71, 86, 84); max-width: 460px}
.c70{display: grid; grid-template-columns: 64px 1fr; gap: 24px; padding: 32px 0px; border-top: 1px solid rgb(220, 212, 199); border-bottom: 1px solid rgb(220, 212, 199)}
.derm-in{max-width: 1312px; margin: 0px auto; padding: 128px 64px; box-sizing: border-box}
.derm-head{display: grid; grid-template-columns: repeat(12, minmax(0px, 1fr)); column-gap: 32px; align-items: end}
.derm-title{grid-column: 1 / span 6; display: flex; flex-direction: column; gap: 24px}
.derm-lead{grid-column: 8 / span 5; margin: 0px; font-size: 17px; line-height: 1.65; color: rgb(71, 86, 84)}
.cards{margin-top: 64px; display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); border-top: 1px solid rgb(221, 228, 227); border-left: 1px solid rgb(221, 228, 227)}
.card-i{min-height: 300px; padding: 40px; box-sizing: border-box; border-right: 1px solid rgb(221, 228, 227); border-bottom: 1px solid rgb(221, 228, 227); display: flex; flex-direction: column; justify-content: space-between; gap: 40px}
.c77{display: flex; justify-content: space-between; align-items: flex-start}
.c78{font-size: 12.5px; font-weight: 600; letter-spacing: 0.14em; color: rgb(107, 120, 118)}
.c79{display: flex; flex-direction: column; gap: 12px}
.c80{margin: 0px; font-family: Newsreader, serif; font-weight: 400; font-size: 29px; line-height: 1.15}
.c81{margin: 0px; font-size: 16px; line-height: 1.6; color: rgb(71, 86, 84)}
.derm-cta{margin-top: 48px; padding: 28px 32px 28px 36px; background: rgb(242, 247, 246); display: flex; align-items: center; justify-content: space-between; gap: 32px}
.c83{display: flex; flex-direction: column; gap: 4px}
.c84{font-family: Newsreader, serif; font-size: 25px; line-height: 1.25}
.c85{font-size: 16px; color: rgb(71, 86, 84)}
.derm-btn{flex-shrink: 0; display: inline-flex; align-items: center; gap: 12px; height: 54px; padding: 0px 28px; background: rgb(15, 76, 82); color: rgb(255, 255, 255); text-decoration: none; font-size: 13.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; border-radius: 3px}
.c87{border-top: 1px solid rgb(227, 232, 231)}
.tric-in{max-width: 1312px; margin: 0px auto; padding: 128px 64px; box-sizing: border-box; display: grid; grid-template-columns: repeat(12, minmax(0px, 1fr)); column-gap: 32px; align-items: stretch}
.tric-txt{grid-column: 1 / span 6; display: flex; flex-direction: column; padding-right: 24px}
.h2-60{margin: 24px 0px 0px; font-family: Newsreader, serif; font-weight: 400; font-size: 60px; line-height: 1.04; letter-spacing: -0.02em}
.c91{margin: 28px 0px 0px; font-size: 19px; line-height: 1.6; color: rgb(71, 86, 84); max-width: 480px}
.c92{margin-top: 48px; padding-left: 28px; border-left: 1px solid rgb(15, 76, 82); display: flex; flex-direction: column; gap: 14px; max-width: 500px}
.c93{margin: 0px; font-family: Newsreader, serif; font-style: italic; font-size: 30px; line-height: 1.25; color: rgb(19, 32, 31)}
.c94{margin: 0px; font-size: 16.5px; line-height: 1.6; color: rgb(71, 86, 84)}
.c95{margin-top: auto; padding-top: 48px}
.c96{display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0px 28px; background: rgb(15, 76, 82); color: rgb(255, 255, 255); text-decoration: none; font-size: 13.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; border-radius: 3px}
.tric-panel{grid-column: 8 / span 5; background: rgb(10, 51, 55); color: rgb(255, 255, 255); padding: 48px 44px 44px; box-sizing: border-box; display: flex; flex-direction: column; gap: 36px}
.c98{margin: 0px; display: flex; flex-direction: column; gap: 14px}
.c99{font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72)}
.c100{display: flex; flex-direction: column}
.c101{font-size: 12.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.78); padding-bottom: 14px}
.c102{padding: 15px 0px; border-top: 1px solid rgba(255, 255, 255, 0.18); font-size: 17px}
.c103{padding: 15px 0px; border-top: 1px solid rgba(255, 255, 255, 0.18); border-bottom: 1px solid rgba(255, 255, 255, 0.18); font-size: 17px}
.doc-in{max-width: 1312px; margin: 0px auto; padding: 128px 64px; box-sizing: border-box; display: grid; grid-template-columns: repeat(12, minmax(0px, 1fr)); column-gap: 32px; align-items: center}
.doc-img{grid-column: 1 / span 6; position: relative}
.c106{position: relative; aspect-ratio: 4 / 5; background: repeating-linear-gradient(135deg, rgba(19, 32, 31, 0.05) 0px, rgba(19, 32, 31, 0.05) 1px, transparent 1px, transparent 14px), rgb(236, 230, 220); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 0px; box-sizing: border-box; overflow: hidden}
.c107{position: absolute; top: 18px; left: 18px; width: 20px; height: 20px; border-top: 1px solid rgb(169, 157, 140); border-left: 1px solid rgb(169, 157, 140)}
.c108{position: absolute; top: 18px; right: 18px; width: 20px; height: 20px; border-top: 1px solid rgb(169, 157, 140); border-right: 1px solid rgb(169, 157, 140)}
.c109{position: absolute; bottom: 18px; left: 18px; width: 20px; height: 20px; border-bottom: 1px solid rgb(169, 157, 140); border-left: 1px solid rgb(169, 157, 140)}
.c110{position: absolute; bottom: 18px; right: 18px; width: 20px; height: 20px; border-bottom: 1px solid rgb(169, 157, 140); border-right: 1px solid rgb(169, 157, 140)}
.doc-txt{grid-column: 8 / span 5; display: flex; flex-direction: column}
.h2-68{margin: 24px 0px 0px; font-family: Newsreader, serif; font-weight: 400; font-size: 68px; line-height: 1; letter-spacing: -0.025em}
.c113{margin: 14px 0px 0px; font-family: Newsreader, serif; font-style: italic; font-size: 28px; line-height: 1.3; color: rgb(15, 76, 82)}
.c114{margin: 32px 0px 0px; font-size: 17.5px; line-height: 1.7; color: rgb(57, 71, 69)}
.doc-dl{margin: 40px 0px 0px; display: grid; grid-template-columns: 150px 1fr; border-top: 1px solid rgb(220, 212, 199)}
.c116{padding: 16px 0px; border-bottom: 1px solid rgb(220, 212, 199); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(107, 120, 118)}
.c117{margin: 0px; padding: 14px 0px; border-bottom: 1px solid rgb(220, 212, 199); font-size: 16.5px}
.doc-cta{margin-top: 40px; display: flex; align-items: center; gap: 28px}
.c119{font-size: 15px; color: rgb(95, 109, 107)}
.tx-in{max-width: 1312px; margin: 0px auto; padding: 112px 64px; box-sizing: border-box; display: grid; grid-template-columns: repeat(12, minmax(0px, 1fr)); gap: 56px 32px}
.tx-head{grid-column: 1 / span 4; display: flex; flex-direction: column; gap: 22px}
.h2-46{margin: 0px; font-family: Newsreader, serif; font-weight: 400; font-size: 46px; line-height: 1.08; letter-spacing: -0.02em}
.tx-lead{grid-column: 6 / span 7; display: flex; flex-direction: column; gap: 28px; align-self: end}
.c124{margin: 0px; font-size: 19px; line-height: 1.6; color: rgb(57, 71, 69); max-width: 600px}
.c125{display: flex; gap: 28px; align-items: center}
.c126{display: inline-flex; align-items: center; gap: 12px; height: 52px; padding: 0px 24px; border: 1px solid rgb(15, 76, 82); color: rgb(15, 76, 82); text-decoration: none; font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; border-radius: 3px; box-sizing: border-box}
.c127{font-size: 15.5px; font-weight: 600; text-decoration: underline rgb(185, 199, 197)}
.steps{grid-column: 1 / span 12; display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); column-gap: 32px}
.c129{display: flex; flex-direction: column; gap: 12px; padding-top: 24px; border-top: 1px solid rgb(15, 76, 82)}
.c130{font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(15, 76, 82)}
.c131{margin: 0px; font-family: Newsreader, serif; font-weight: 400; font-size: 26px}
.c132{margin: 0px; font-size: 16px; line-height: 1.6; color: rgb(71, 86, 84); max-width: 340px}
.c133{display: flex; flex-direction: column; gap: 12px; padding-top: 24px; border-top: 1px solid rgb(201, 214, 212)}
.c134{font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(95, 109, 107)}
.how-in{max-width: 1312px; margin: 0px auto; padding: 128px 64px; box-sizing: border-box; display: grid; grid-template-columns: repeat(12, minmax(0px, 1fr)); gap: 56px 32px}
.how-ol{grid-column: 5 / span 8; margin: 0px; padding: 0px; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); column-gap: 32px}
.c137{display: flex; flex-direction: column; gap: 18px; padding-top: 22px; border-top: 1px solid rgb(221, 228, 227)}
.how-num{font-family: Newsreader, serif; font-size: 64px; line-height: 1; color: rgb(15, 76, 82)}
.c139{font-size: 18px; line-height: 1.5; font-weight: 500}
.how-note{grid-column: 5 / span 8; display: flex; align-items: center; gap: 16px; padding: 20px 24px; background: rgb(242, 247, 246)}
.c141{font-size: 16px; color: rgb(57, 71, 69)}
.c142{background: rgb(10, 51, 55); color: rgb(255, 255, 255)}
.cta-in{max-width: 1312px; margin: 0px auto; padding: 120px 64px; box-sizing: border-box; display: grid; grid-template-columns: repeat(12, minmax(0px, 1fr)); column-gap: 32px; align-items: end}
.cta-txt{grid-column: 1 / span 7; display: flex; flex-direction: column; gap: 28px}
.c145{font-size: 12.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75)}
.h2-64{margin: 0px; font-family: Newsreader, serif; font-weight: 400; font-size: 64px; line-height: 1.04; letter-spacing: -0.02em}
.c147{margin: 0px; font-size: 19px; line-height: 1.6; color: rgba(255, 255, 255, 0.82); max-width: 520px}
.cta-side{grid-column: 9 / span 4; display: flex; flex-direction: column; gap: 24px; padding-left: 32px; border-left: 1px solid rgba(255, 255, 255, 0.2)}
.c149{display: flex; align-items: center; justify-content: center; gap: 12px; height: 60px; padding: 0px 28px; background: rgb(255, 255, 255); color: rgb(10, 51, 55); text-decoration: none; font-size: 14px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; border-radius: 3px}
.c150{font-family: Newsreader, serif; font-size: 30px; line-height: 1.1}
.c151{font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, 0.75)}
.c152{background: rgb(255, 255, 255)}
.ft-in{max-width: 1312px; margin: 0px auto; padding: 72px 64px 40px; box-sizing: border-box}
.ft-grid{display: grid; grid-template-columns: repeat(12, minmax(0px, 1fr)); column-gap: 32px}
.c155{grid-column: 1 / span 4; display: flex; flex-direction: column; gap: 18px}
.c156{font-family: Newsreader, serif; font-size: 22px; line-height: 1}
.c157{font-size: 15px; line-height: 1.6; color: rgb(95, 109, 107); max-width: 300px}
.c158{grid-column: 5 / span 3; display: flex; flex-direction: column; gap: 12px; font-size: 15px; line-height: 1.5; color: rgb(57, 71, 69)}
.c159{font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(107, 120, 118); margin-bottom: 4px}
.c160{text-decoration: none}
.c161{grid-column: 8 / span 2; display: flex; flex-direction: column; gap: 12px; font-size: 15px; color: rgb(57, 71, 69)}
.c162{grid-column: 10 / span 3; display: flex; flex-direction: column; gap: 12px; font-size: 15px; line-height: 1.5; color: rgb(57, 71, 69)}
.ft-bottom{margin-top: 56px; padding-top: 24px; border-top: 1px solid rgb(227, 232, 231); display: flex; justify-content: space-between; gap: 32px; font-size: 13.5px; color: rgb(107, 120, 118)}

/* ---------- Responsive (same design, adapted grid/scale) ---------- */
body{overflow-x:clip}
.page{overflow-x:clip}
@media (max-width:1180px){
  .hdr-in,.hero-in,.trust-in,.appr-in,.derm-in,.tric-in,.doc-in,.tx-in,.how-in,.cta-in,.ft-in{padding-left:40px;padding-right:40px}
  .hero-title{font-size:62px}
  .h2-54{font-size:46px}.h2-60{font-size:50px}.h2-68{font-size:56px}.h2-46{font-size:40px}.h2-64{font-size:54px}
  .card-i{padding:32px}
  .hdr-in nav>div{gap:24px}
}
@media (max-width:920px){
  .hdr-in{padding-left:24px;padding-right:24px;height:68px}
  .hdr-in nav>div{display:none}
  .hero-in,.appr-in,.derm-in>div:first-child,.tric-in,.doc-in,.tx-in,.how-in,.cta-in{display:grid;grid-template-columns:minmax(0,1fr)}
  .hero-in,.derm-head,.appr-in,.tric-in,.doc-in,.tx-in,.how-in,.cta-in{grid-template-columns:minmax(0,1fr)}
  .hero-in>*,.derm-head>*,.appr-in>*,.tric-in>*,.doc-in>*,.tx-in>*,.how-in>*,.cta-in>*{grid-column:1 / -1}
  .hero-in,.appr-in,.tric-in,.doc-in,.tx-in,.how-in,.cta-in{row-gap:48px}
  .derm-head{row-gap:20px}
  .hero-in{padding-top:40px;padding-bottom:72px}
  .hero-txt{padding-right:0}
  .appr-in,.derm-in,.tric-in,.doc-in,.how-in,.cta-in{padding-top:80px;padding-bottom:80px}
  .tx-in{padding-top:72px;padding-bottom:72px}
  .hero-fig{max-width:560px;width:100%;margin:0 auto}
  .hero-side{display:none}
  .hero-line{right:0}
  .hero-bg{right:-20px}
  .hero-badge{left:-12px}
  .doc-img{max-width:560px}
  .tx-lead{align-self:start}
  .appr-lead{align-self:start}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trust-in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trust-in>div:nth-child(odd){border-left:0;padding-left:0}
  .trust-in>div:nth-child(n+3){border-top:1px solid #E3E8E7}
  .tric-txt{padding-right:0}
  .tric-txt>div:last-child{padding-top:40px}
  .cta-side{border-left:0;padding-left:0;border-top:1px solid rgba(255,255,255,0.2);padding-top:32px}
  .ft-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}
  .ft-grid>*{grid-column:auto}
  .ft-grid>:first-child{grid-column:1 / -1}
}
@media (max-width:600px){
  .hdr-in,.hero-in,.trust-in,.appr-in,.derm-in,.tric-in,.doc-in,.tx-in,.how-in,.cta-in,.ft-in{padding-left:20px;padding-right:20px}
  .hdr-in{height:64px}
  .hdr-in>a:first-child{gap:10px}
  .hdr-in nav{gap:0}
  .hdr-in nav>a.btn{height:40px;padding:0 14px;font-size:11.5px;letter-spacing:.08em}
  .hero-in{padding-top:28px;padding-bottom:56px}
  .hero-title{font-size:44px;margin-top:22px}
  .hero-txt h1{font-size:12px;letter-spacing:.14em}
  .hero-txt>p:nth-of-type(2){font-size:17px;margin-top:22px}
  .hero-txt>div:nth-of-type(2){margin-top:28px}
  .hero-cta{flex-direction:column;align-items:stretch;gap:20px;margin-top:28px;text-align:center}
  .hero-cta .btn{justify-content:center;width:100%}
  .hero-txt>div:last-child{flex-wrap:wrap;gap:8px 16px;margin-top:20px}
  .hero-txt>div:last-child>span:nth-child(2){display:none}
  .hero-fig{padding-bottom:36px}
  .hero-bg{top:40px;left:24px;right:-20px}
  .hero-line{top:40px}
  .hero-badge{left:-8px;bottom:64px;padding:14px 16px}
  .hero-badge span:first-child{font-size:18px}
  .hero-badge span:last-child{font-size:12px}
  .trust-in{grid-template-columns:minmax(0,1fr)}
  .trust-in>div{padding:22px 0 !important;border-left:0 !important}
  .trust-in>div:nth-child(n+2){border-top:1px solid #E3E8E7}
  .appr-in,.derm-in,.tric-in,.doc-in,.how-in,.cta-in{padding-top:64px;padding-bottom:64px}
  .tx-in{padding-top:56px;padding-bottom:56px}
  .hero-title{font-size:44px}
  .h2-54,.h2-46{font-size:34px}.h2-60{font-size:36px}.h2-68{font-size:44px}.h2-64{font-size:38px}
  .appr-lead p{font-size:18px}
  .appr-img{min-height:0}
  .appr-img img{height:300px}
  .appr-list>div{grid-template-columns:44px minmax(0,1fr);gap:14px;padding:24px 0}
  .appr-list h3{font-size:24px}
  .cards{grid-template-columns:minmax(0,1fr);margin-top:40px}
  .card-i{min-height:0;padding:28px 24px;gap:28px}
  .derm-cta{flex-direction:column;align-items:flex-start;padding:24px}
  .derm-btn{width:100%;justify-content:center}
  .derm-lead{font-size:16px}
  .tric-txt>p:nth-of-type(1){font-size:17px}
  .tric-txt>div:nth-of-type(1) p:first-child{font-size:25px}
  .tric-txt .btn{width:100%;justify-content:center}
  .tric-panel{padding:32px 24px}
  .doc-dl{grid-template-columns:128px minmax(0,1fr)}
  .doc-dl dt{letter-spacing:.08em;font-size:11px}
  .doc-txt>p:nth-of-type(1){font-size:24px}
  .doc-cta{flex-direction:column;align-items:stretch;gap:16px;text-align:center}
  .doc-cta .btn{width:100%;justify-content:center}
  .tx-head+div,.tx-lead{gap:22px}
  .tx-lead>div{flex-direction:column;align-items:stretch;gap:20px;text-align:center}
  .tx-lead .btn{width:100%;justify-content:center}
  .steps{grid-template-columns:minmax(0,1fr);row-gap:32px}
  .how-ol{grid-template-columns:minmax(0,1fr);row-gap:28px}
  .how-ol li{flex-direction:row;align-items:baseline;gap:20px}
  .how-num{font-size:48px;min-width:36px}
  .how-note{padding:18px 20px}
  .cta-txt p{font-size:17px}
  .cta-side .btn{height:56px;padding:0 16px;font-size:13px}
  .ft-grid{grid-template-columns:minmax(0,1fr)}
  .ft-grid>*{grid-column:1 / -1}
  .ft-bottom{flex-direction:column;gap:12px}
  .ft-in{padding-top:56px}
}
picture{display:block;width:100%;height:100%}
.appr-img picture{height:auto}