/* Readable page layout; optical models keep their own rendering coordinates. */
.site{width:100%;max-width:1280px}
main{padding:0 clamp(16px,3.5vw,48px)}
.topbar{height:80px;padding:0 32px;gap:32px}
.small-logo{width:148px;height:45px;transform:none}
.mobile-apk-download{display:none}
.mobile-apk-download[hidden]{display:none!important}
.apk-download-status{display:none}
.apk-download-status[hidden]{display:none!important}
.topbar nav{gap:22px;font-size:13px;letter-spacing:1.2px}
.topbar nav [data-nav]{min-height:44px}
.topbar nav [data-nav]::after{right:1px;bottom:4px;height:2px}
.learn-more{width:160px;height:44px;gap:14px;font-size:14px;border-radius:8px}
.learn-more .learn-more-label{font-size:inherit;line-height:1;white-space:nowrap}
.learn-more-arrow{display:block;flex:none;width:1em;height:1em;font-size:24px}
.hero{height:auto;min-height:410px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;padding:48px 16px}
.brand{width:100%;max-width:450px;height:auto}
.hero h1{margin-top:22px;font-size:clamp(25px,2.7vw,35px);line-height:1.5;letter-spacing:7px}
.video-card{width:100%;height:auto;aspect-ratio:1.45;max-width:530px;margin:0;align-self:center;border-radius:18px;border-width:1px}
.play{width:88px;height:88px}
.benefits{height:auto;min-height:76px;gap:16px;flex-wrap:wrap;padding:20px 12px;font-size:14px;line-height:1.5;border-width:1px;color:#a2a2a2}
.feature{height:auto;min-height:0;grid-template-columns:minmax(0,2.3fr) minmax(0,1fr);gap:32px;padding:42px 8px;border-bottom-width:1px}
.feature.reverse{grid-template-columns:minmax(0,1fr) minmax(0,2.3fr)}
.feature p,.feature.reverse p,.feature-vr p,.feature-tryon p{margin:0;transform:none;white-space:normal;font-size:clamp(20px,2vw,26px);line-height:1.45;letter-spacing:0}
.inline-action{display:inline;min-height:0}
.feature>.demo-card,#presentationContent>.demo-card{width:100%;height:auto;aspect-ratio:var(--demo-ratio,817 / 464);transform:none;border-radius:18px;container-type:inline-size;--u:calc(100cqw / 817)}
.treatment-card{--demo-ratio:817 / 545}
.thickness-card{--demo-ratio:813 / 460}
.tryon-card{--demo-ratio:817 / 522}
.vr-image{--demo-ratio:813 / 545;object-fit:contain}
.lens-buttons button,.lens-buttons button.active{font-size:clamp(14px,calc(24.36 * var(--u)),25px);white-space:nowrap}
[data-thickness-demo] .range-labels{font-size:clamp(12px,calc(14 * var(--u)),14px)}
[data-treatment-demo] [data-divider]{width:clamp(36px,6%,52px)}
[data-tryon-demo] [data-tryon-start]{font-size:13px;min-height:34px;padding:6px 8px}
[data-tryon-demo] .tryon-status{font-size:12px;line-height:1.4;bottom:20%}
[data-tryon-demo] .tryon-controls{height:40px;gap:6px;padding:4px}
[data-tryon-demo] .tryon-controls button{width:32px}
[data-tryon-demo] .tryon-size input{height:30px}
.tools-section,.hardware-section,.included-section,.customer-section{height:auto;padding:40px 8px;border-bottom-width:1px}
h2,.included-section h2,.customer-section h2{font-size:clamp(24px,2.6vw,34px);line-height:1.35;white-space:normal;color:#a4a4a4}
.included-section h2{color:var(--blue);font-weight:700}
.hardware-section img,.included-section img,.customer-section img{width:100%;height:auto;max-width:920px;object-fit:contain;margin:28px auto 0}
.customer-section img{max-width:1000px;border-radius:18px}
.tools-honeycomb{width:min(100%,940px);height:auto;aspect-ratio:1151 / 476;margin:24px auto 0}
.hex-row{gap:clamp(6px,1.2vw,16px)}
.hex-row span{width:clamp(30px,8vw,116px);height:auto;aspect-ratio:145 / 161}
.cta-section{height:auto;padding:40px 8px 48px}
.budget-cta{height:100px;font-size:clamp(20px,2.7vw,34px);border-radius:18px}
dialog{max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow:auto;padding:24px}
.presentation-dialog{width:min(1000px,calc(100vw - 24px));padding:48px 24px 24px}
.presentation-dialog .demo-card input[type="range"]{min-height:0;padding:0;border:0;background:transparent}
.presentation-dialog .tryon-size{margin:0;gap:0}
.presentation-stage{height:auto;aspect-ratio:auto!important}
#presentationContent{height:auto}
#presentationContent>img{width:100%;height:auto}
.presentation-caption{font-size:18px;line-height:1.4}
.dialog-close{width:40px;height:40px;right:8px;top:8px;z-index:20}
#orcamentoDialog #quoteTitle{padding-right:32px;text-wrap:pretty}
.presentation-controls button{min-width:44px;min-height:44px}

@media(min-width:1001px){
  .topbar nav{font-size:18px}
  .benefits{font-size:30px}
  .learn-more{font-size:calc(19.8 * var(--u))}
  .learn-more-arrow{font-size:calc(38 * var(--u))}
}
@media(max-width:1000px){
  .topbar{padding:0 20px;gap:18px}
  .small-logo{width:128px;height:39px}
  .topbar nav{gap:16px;font-size:12px;letter-spacing:.6px}
  .learn-more{width:135px;font-size:13px}
  .hero{gap:24px;padding:36px 8px;min-height:340px}
  .hero h1{font-size:26px;letter-spacing:5px}
}
@media(max-width:900px){
  .feature,.feature.reverse{grid-template-columns:minmax(0,1fr);gap:20px;padding:32px 0}
  .feature p,.feature.reverse p,.feature-vr p,.feature-tryon p{order:-1;font-size:22px;max-width:54ch}
  .feature>.demo-card{max-width:817px;justify-self:center}
}
@media(max-width:640px){
  main{padding:0 16px}
  .topbar{height:auto;min-height:100px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;padding:10px 16px 6px}
  .small-logo{width:108px;height:33px}
  .learn-more{width:120px;height:40px;gap:10px;font-size:12px}
  .learn-more-arrow{font-size:21px}
  .topbar nav{grid-row:2;grid-column:1 / -1;width:100%;gap:8px;justify-content:space-between;font-size:12px;letter-spacing:.3px}
  .topbar nav [data-nav]{min-height:40px}
  .topbar nav [data-nav]::after{bottom:3px}
  .hero{min-height:0;grid-template-columns:minmax(0,1fr);gap:24px;padding:32px 0}
  .brand{width:min(100%,300px)}
  .hero h1{font-size:25px;letter-spacing:4px;line-height:1.5;margin-top:16px}
  .video-card{max-width:none;aspect-ratio:1.8;border-radius:14px}
  .play{width:64px;height:64px}
  .benefits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 8px;padding:18px 0;font-size:12px;text-align:center;white-space:normal}
  .feature,.feature.reverse{padding:28px 0;gap:16px}
  .feature p,.feature.reverse p,.feature-vr p,.feature-tryon p{font-size:18px;line-height:1.5;max-width:none}
  .feature>.demo-card,#presentationContent>.demo-card{border-radius:14px}
  [data-progressive-demo]{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:44px auto;gap:10px;padding:12px;aspect-ratio:auto!important}
  [data-progressive-demo] .lens-buttons{position:static;grid-row:1;width:auto;height:auto;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
  [data-progressive-demo] .lens-buttons button{min-width:0;min-height:44px;font-size:clamp(10px,calc(30 * var(--u)),12px);padding-left:3px;border-radius:8px;text-shadow:0 1px 2px #000b}
  [data-progressive-demo] .lens-buttons button::before{width:3px;border-radius:0 2px 2px 0}
  [data-progressive-stage]{position:relative;grid-row:2;left:auto;top:auto;width:100%;height:auto;aspect-ratio:900 / 640;border-radius:10px}
  [data-progressive-stage] svg{position:absolute;inset:0}
  [data-thickness-demo]{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;aspect-ratio:auto!important;--thickness-padding:12px;--thickness-gap:12px}
  [data-thickness-demo].thickness-card .thickness-controls{grid-column:1;grid-row:1;height:auto;display:grid;grid-template-columns:82px minmax(0,1fr);grid-template-rows:44px 38px auto;gap:8px 12px;padding:0;background:transparent;border:0;box-shadow:none}
  [data-thickness-demo] .index-buttons{--index-padding:0px;--index-border:0px;grid-column:1 / -1;grid-row:1;min-height:44px;height:44px;padding:0;gap:4px;border:0;border-radius:var(--thickness-radius)}
  [data-thickness-demo] .index-buttons button{min-height:44px;font-size:14px;border-radius:var(--index-button-radius)}
  [data-thickness-demo] .thickness-controls output{grid-column:1;grid-row:2 / 4;align-self:center;font-size:30px;line-height:1;margin:0;padding:0;display:block;min-height:0}
  [data-thickness-demo] .thickness-controls>[data-power]{grid-column:2;grid-row:2;align-self:center;height:38px;margin:0;width:100%}
  [data-thickness-demo] .range-labels{grid-column:2;grid-row:3;font-size:12px;line-height:1.2}
  [data-thickness-demo] [data-lens-stage]{grid-column:1;grid-row:2;width:100%;height:auto;min-height:0;aspect-ratio:1.15;border-radius:var(--thickness-radius)}
  [data-tryon-demo]{--tryon-choice-height:72px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:var(--tryon-choice-height) auto;gap:12px;padding:12px;aspect-ratio:auto!important}
  [data-tryon-demo] [data-frame]{position:static;width:auto;height:var(--tryon-choice-height);min-width:0;grid-row:1;border-radius:10px}
  [data-tryon-demo] [data-frame="0"]{grid-column:1}
  [data-tryon-demo] [data-frame="1"]{grid-column:2}
  [data-tryon-demo] [data-frame="2"]{grid-column:3}
  [data-tryon-demo] [data-tryon-stage]{position:relative;grid-column:1 / -1;grid-row:2;left:auto;top:auto;width:100%;height:auto;min-height:0;aspect-ratio:1;border-radius:10px}
  [data-tryon-demo] [data-tryon-start]{left:auto;right:24px;top:calc(var(--tryon-choice-height) + 36px);width:calc(100% - 48px);height:36px;min-height:36px;font-size:13px;padding:6px}
  [data-tryon-demo] .tryon-controls{left:10px;right:10px;bottom:10px;height:40px;gap:4px;padding:4px}
  [data-tryon-demo] .tryon-controls button{width:30px}
  [data-tryon-demo] .tryon-status{bottom:62px;font-size:12px;line-height:1.3}
  .tools-section,.hardware-section,.included-section,.customer-section{padding:28px 0}
  h2,.included-section h2,.customer-section h2{font-size:24px}
  .hardware-section img,.included-section img,.customer-section img{margin-top:20px}
  .customer-section img{border-radius:12px}
  .cta-section{padding:28px 0 32px}
  .budget-cta{height:76px;font-size:22px;border-radius:14px}
  dialog{padding:20px 14px;max-height:calc(100dvh - 16px)}
  .presentation-dialog{padding:48px 12px 16px}
  .presentation-controls{gap:8px}
  .presentation-controls button{font-size:16px;padding:8px 12px}
  .presentation-caption{font-size:16px}
}
.feature>.thickness-card,#presentationContent>.thickness-card{border-radius:var(--thickness-radius)}
/* Slightly smaller page copy; demo controls retain their own typography. */
.hero h1{font-size:calc(37.8 * var(--u));line-height:1.46}
.feature>p,.feature.reverse>p{font-size:calc(45 * var(--u));line-height:1.3;text-wrap:pretty}
.feature>p .text-ending{white-space:nowrap}
.feature.feature-treatment>p{font-size:calc(46.8 * var(--u))}
.feature.feature-tryon>p{font-size:calc(42.3 * var(--u))}
.feature.feature-vr>p{font-size:calc(37.8 * var(--u))}
main h2,main .included-section h2,main .customer-section h2{font-size:calc(54 * var(--u));line-height:1.3;text-wrap:balance}
.budget-cta{font-size:calc(62.1 * var(--u))}
.presentation-caption{font-size:18px}
.presentation-controls button{font-size:16.2px}
/* Keep the label left and the arrow right, with equal space at both edges. */
:where(html[data-device="desktop"]) .topbar .learn-more{width:clamp(150px,calc(190 * var(--u)),190px);justify-content:space-between;gap:10px;padding:0 14px}
.topbar .learn-more-arrow{font-size:26px}
/* A narrow computer window stays desktop, with readable page typography. */
@media(max-width:640px){
  :where(html[data-device="desktop"]) .hero h1{font-size:25px;line-height:1.5}
  :where(html[data-device="desktop"]) .feature>p,
  :where(html[data-device="desktop"]) .feature.reverse>p,
  :where(html[data-device="desktop"]) .feature.feature-treatment>p,
  :where(html[data-device="desktop"]) .feature.feature-tryon>p,
  :where(html[data-device="desktop"]) .feature.feature-vr>p{font-size:18px;line-height:1.5}
  :where(html[data-device="desktop"]) main h2,
  :where(html[data-device="desktop"]) main .included-section h2,
  :where(html[data-device="desktop"]) main .customer-section h2{font-size:24px}
  :where(html[data-device="desktop"]) .budget-cta{font-size:22px}
}