@import url("../vision-fonts.css");
/* 2026-10-18 final handoff. Actual Vision cascade is authoritative:
   h2/h3 remain 400/-0.02em; system-card titles remain 500. */
:root{--page-w:var(--dock-w,1044px);--page-gutter:clamp(36px,5.6vw,80px);--section-gap:clamp(160px,18vw,260px)}
main h1,main h2,main h3{font-weight:400;letter-spacing:-.02em;color:#323232}
main h2,.section h2{font-size:clamp(26px,2.6vw,32px);line-height:1.5;font-weight:400}
main h3,.section h3{font-size:clamp(17px,1.7vw,20px);line-height:1.55;font-weight:400}
main p{letter-spacing:-.02em;line-height:1.85;color:#323232}
.section{margin-top:var(--section-gap);padding-block:0}
.section-heading{margin-bottom:clamp(40px,5vw,64px)}
.section-heading h2{margin-bottom:12px}.section-heading p{font-size:19px;line-height:1.85;color:#323232}
.card h3{letter-spacing:-.02em}.card p{font-size:15px;line-height:1.85}
.site-footer{margin-top:clamp(96px,12vw,168px);padding:clamp(56px,7vw,96px) 0;background:#f5f5f5}
.footer-inner{width:min(1200px,calc(100% - var(--page-gutter)));margin-inline:auto}
.contact>a{font-size:clamp(36px,4.4vw,56px);letter-spacing:-.03em}.contact p,.contact>span{color:#323232}
.footer-columns a,.footer-columns button{position:relative;isolation:isolate;padding:7px 14px;margin:-7px -14px;font-size:13px;color:#323232;line-height:1.6}
.footer-columns a::before,.footer-columns button::before{content:'';position:absolute;inset:0;z-index:-1;background:rgba(17,17,16,.08);opacity:0;transition:opacity .25s cubic-bezier(.4,0,.2,1)}
.footer-columns a:hover::before,.footer-columns a:focus-visible::before,.footer-columns button:hover::before,.footer-columns button:focus-visible::before{opacity:1}
.footer-bottom{border-color:#e5e5e5}.footer-bottom p{font-size:13px;line-height:1.8;color:#323232}
.top-button{width:40px;height:40px;background:transparent;color:#111110;border:1px solid #111110;transition:background .25s cubic-bezier(.4,0,.2,1),color .25s cubic-bezier(.4,0,.2,1)}
.top-button:hover{background:#111110;color:#fff}
.fields>label,.fields>.select-field{border-bottom:2px solid #0FDFDD;padding-bottom:6px}
.fields input,.fields select,.bv-sel-btn{height:42px;line-height:42px;border:0;font-size:16px;letter-spacing:-.01em;background:transparent}
.fields input:focus-visible{outline:2px solid #087b85;outline-offset:2px}.bv-sel-btn:focus-visible{outline:0}
.select-field::after{width:12px;height:12px;border-width:2px;right:3px;top:12px;transition:transform .25s cubic-bezier(.4,0,.2,1)}
.select-field.is-open::after{top:18px}.fields .bv-err{border-bottom-color:#d9442f}
.bv-sel-opt:hover,.bv-sel-opt:focus-visible{background:#111110;color:#fff;outline:0}
.bv-sel-panel:not([hidden]){animation:handoff-panel .18s cubic-bezier(.16,1,.3,1) both}
@keyframes handoff-panel{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes handoff-nudge{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-3px)}40%,60%{transform:translateX(3px)}}
.fields .bv-err{animation:handoff-nudge .35s cubic-bezier(.36,.07,.19,.97)}
.image-caption,.clinical-figure figcaption,.note,.image-source-link{font-size:14px;color:#6f6e69;line-height:1.7}
.handoff-textbtn{display:inline-flex;align-items:center;gap:10px;position:relative;isolation:isolate;padding:7px 14px;margin:-7px -14px;font-size:14px;font-weight:700;line-height:1.5;white-space:nowrap}
.handoff-textbtn::before{content:'';position:absolute;inset:0;background:rgba(17,17,16,.08);opacity:0;z-index:-1;transition:opacity .25s cubic-bezier(.4,0,.2,1)}
.handoff-textbtn:hover::before,.handoff-textbtn:focus-visible::before{opacity:1}
.handoff-story-viewport{position:relative;min-width:0;width:100%}
.handoff-story-track{display:flex;gap:clamp(16px,2.6vw,32px);width:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;scroll-behavior:smooth}
.handoff-story-track::-webkit-scrollbar{display:none}
.handoff-story-track>.related-card{position:relative;display:block;flex:0 0 calc((100% - 3 * clamp(16px,2.6vw,32px))/4);min-width:0;padding:0;background:transparent;border:0;height:auto;scroll-snap-align:start;text-align:left}
.handoff-story-image{position:relative;display:block;overflow:hidden;aspect-ratio:4/3;background:#f0efec}
.handoff-story-image img{display:block;width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;margin:0}
.handoff-story-tag{position:absolute;left:0;right:0;top:0;height:76px;background:linear-gradient(#ffffffeb,transparent);padding:16px;opacity:0;transition:opacity .45s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.handoff-story-tag span{display:inline-block;background:#111110;color:#fff;padding:5px 8px;font-size:12px;line-height:1.4}
.related-card:hover .handoff-story-tag,.related-card:focus-visible .handoff-story-tag{opacity:1}
.handoff-story-track .related-card h3{font-size:17px;line-height:1.5;font-weight:400;margin:20px 0 0;min-height:3em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.handoff-story-track .related-card .sr-only{position:absolute}
.handoff-story-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 28px;margin-bottom:40px;flex-wrap:wrap}
.handoff-story-heading .section-heading{margin:0}.handoff-story-heading h2{margin:0}
.handoff-story-tools{display:flex;align-items:center;gap:24px}.handoff-story-arrows{display:flex;gap:6px}
.handoff-story-arrows button{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid #111110;color:#111110;background:transparent;transition:background .25s cubic-bezier(.4,0,.2,1),color .25s cubic-bezier(.4,0,.2,1)}
.handoff-story-arrows i{width:8px;height:8px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:translateX(-1.5px) rotate(45deg)}
.handoff-story-arrows [data-story-prev] i{transform:translateX(1.5px) rotate(-135deg)}
.handoff-story-arrows button:not(:disabled):hover,.handoff-story-arrows button:not(:disabled):focus-visible{background:#111110;color:#fff}
.handoff-story-arrows button:disabled{opacity:.35;cursor:default;background:transparent;color:#111110}
@media(max-width:799px){
 .section-heading p{font-size:16px}.section-heading{margin-bottom:clamp(40px,5vw,64px)}
 main p,.card p{font-size:15px}.site-footer{padding-bottom:calc(56px + env(safe-area-inset-bottom,0px))}.footer-columns a,.footer-columns button,.footer-bottom p,.contact p,.contact>span{font-size:14px}
 .handoff-story-track{gap:12px}.handoff-story-track>.related-card{flex-basis:calc((100% - 12px)/1.2)}
 .handoff-story-track .related-card h3{font-size:19px}
 .handoff-story-arrows{display:none}
 .handoff-story-viewport::before,.handoff-story-viewport::after{content:'';position:absolute;top:0;bottom:0;width:64px;z-index:2;pointer-events:none;opacity:0;transition:opacity .25s cubic-bezier(.4,0,.2,1)}
 .handoff-story-viewport::before{left:0;background:linear-gradient(90deg,#fff,transparent)}.handoff-story-viewport::after{right:0;background:linear-gradient(270deg,#fff,transparent)}
 .handoff-story-viewport[data-left=true]::before,.handoff-story-viewport[data-right=true]::after{opacity:1}
 .handoff-story-tag{display:none}
}
@media(prefers-reduced-motion:reduce){.handoff-story-track{scroll-behavior:auto}.bv-sel-panel:not([hidden]),.fields .bv-err{animation:none}.handoff-story-tag,.handoff-story-viewport::before,.handoff-story-viewport::after{transition:none}}

.wrap{width:min(var(--page-w),calc(100% - var(--page-gutter)))}
#related>.wrap,#consultation>.wrap{width:min(1200px,calc(100% - var(--page-gutter)))}
#planning>.wrap,#faq>.wrap{width:min(960px,calc(100% - var(--page-gutter)))}
.cover{width:min(1200px,calc(100% - var(--page-gutter)));margin-inline:auto;background:#fff;padding-top:144px;padding-bottom:56px}
.cover>.wrap{width:min(var(--page-w),100%)}.cover-grid{gap:32px}.cover h1{font-size:clamp(28px,3vw,38px);font-weight:400;line-height:1.45}.cover-description p{font-size:17px}
.cards{column-gap:clamp(16px,2.6vw,32px);row-gap:clamp(28px,2.8vw,40px)}
#principle .cards{gap:12px}#principle .card,#principle .card:last-child{background:#f5f5f5}#principle .card:last-child p{color:#6f6e69}
#principle .card h3{font-size:19px;font-weight:400}.products .card{background:transparent;padding:24px 20px}
.product-link:hover,.product-link:focus-visible{background:#f5f5f5}.product-link:hover h3::after,.product-link:focus-visible h3::after{background:#111110;color:#fff}
.product-link,.product-link h3::after{transition:background .25s cubic-bezier(.4,0,.2,1),color .25s cubic-bezier(.4,0,.2,1)}
.criteria .card{transition:background .25s cubic-bezier(.4,0,.2,1)}.criteria .card:hover{background:#f5f5f5}
.system-card h3{font-size:clamp(20px,2vw,26px);font-weight:500;line-height:1.45;letter-spacing:-.03em}.system-body p{font-size:15px}
.system-grid{gap:24px}
.square-toggle,.square-more,.faq-more{transition:background .25s cubic-bezier(.4,0,.2,1),color .25s cubic-bezier(.4,0,.2,1)}
.square-toggle:hover,.square-toggle:focus-visible,.square-more:hover,.square-more:focus-visible,.faq-more:hover{background:#111110;color:#fff}
.faq-answer>b{background:#0FDFDD;color:#111110}.faq-answer p{font-size:15px}.faq-question>span:nth-child(2){font-size:clamp(17px,1.7vw,20px);font-weight:400}
.comparison-row>:first-child{color:#6f6e69}.comparison-row>:not(:first-child){font-size:15px}.comparison-head>:not(:first-child){font-size:18px}
.button{background:#0FDFDD;color:#111110;font-size:16px;font-weight:600;line-height:1;transition:background .25s cubic-bezier(.4,0,.2,1),color .25s cubic-bezier(.4,0,.2,1)}
.button:hover,.button:focus-visible{background:#111110;color:#fff}
.button.secondary{height:46px;min-height:46px;min-width:0;padding:0 18px;background:#fff;color:#111110;border:1px solid #111110;font-size:14px;font-weight:600;white-space:nowrap}
.button.secondary:hover,.button.secondary:focus-visible{background:#111110;color:#fff}.preparation-links .button{flex:1}
.consult-form{grid-template-columns:minmax(0,1fr) auto;box-shadow:0 18px 44px rgba(17,17,16,.14),0 2px 6px rgba(17,17,16,.06);gap:24px}
.consult-form h2{font-size:26px;font-weight:400}.consult-form>.button{height:52px;min-height:52px;font-size:17px;font-weight:600;box-shadow:0 12px 30px rgba(15,223,221,.38),0 3px 8px rgba(15,223,221,.22)}
.consult-form>.button:hover{box-shadow:0 12px 30px rgba(17,17,16,.32),0 3px 8px rgba(17,17,16,.2)}
.text-link{display:inline-flex;padding:7px 14px;margin-inline:-14px;transition:background .25s cubic-bezier(.4,0,.2,1)}.text-link:hover,.text-link:focus-visible{background:rgba(17,17,16,.08)}
@media(max-width:799px){
 .cover{padding-top:116px;padding-bottom:0}.cover>.wrap{width:100%}.cover-grid{gap:24px}.cover-grid>div:first-child{padding-inline:10px}.hero-image{height:240px}
 #principle .card h3{font-size:20px}.criteria .card p,.system-body p{font-size:15px}.system-card h3{font-size:19px}
 .comparison-row>:first-child{font-size:14px}.comparison-head>:not(:first-child){font-size:17px}
 .consult-form{grid-template-columns:1fr;padding:24px 20px 20px}.consult-form h2{font-size:26px}
 .fields{grid-template-columns:1fr;gap:24px}.fields input,.fields select{font-size:16px}
 .preparation-links{display:flex;flex-direction:row;gap:12px}.preparation-links .button{padding-inline:10px;font-size:14px}
}
@media(max-width:399px){.preparation-links .button{font-size:13px}}

/* Local field specificity intentionally follows the final Vision input exception. */
html body .fields input:focus-visible{outline:2px solid #087b85;outline-offset:2px}
html body .fields .bv-sel-btn:focus-visible{outline:0}
html body .fields .bv-sel-opt:focus-visible{outline:0;background:#111110;color:#fff}
html body .fields .bv-err input,html body .fields .bv-err select,html body .fields .bv-err .bv-sel-btn,html body .fields .bv-err input::placeholder{color:#d9442f}
main .breadcrumb,main .breadcrumbs,main .medical-review,main .note{color:#6f6e69}
@media(max-width:799px){.feature-illustration figcaption,.exchange-caption,.clinical-figure figcaption,.image-caption,.image-source-link,.medical-review{font-size:14px}}

/* 2026-10-19: exact Vision desktop cover height; mobile follows its auto-content + 240px visual rule. */
:root{--vision-cover-height:calc(clamp(520px,42vw,620px) + 106px + clamp(16px,2vw,28px));--vision-cover-offset:calc(106px + clamp(16px,2vw,28px))}
main{padding-top:0}
.hero{height:var(--vision-cover-height);min-height:0;margin-top:0;margin-bottom:0;padding:0;background:#fff}
.hero>.container{width:min(1200px,calc(100% - var(--page-gutter)));height:100%;min-height:0;margin-inline:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:32px;padding-block:var(--vision-cover-offset) 0;padding-inline:max(0px,calc((min(1200px,100vw - var(--page-gutter)) - var(--page-w))/2))}
.hero-copy{min-width:0}.hero .hero-image{width:100%;height:440px;object-fit:contain;margin:0}
.local-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:24px;margin-bottom:0;padding:0 0 24px;border-bottom:1px solid #e5e5e5}
.breadcrumbs{display:flex;flex-wrap:wrap;gap:8px;color:#6f6e69;font-size:14px;line-height:24px;letter-spacing:-.02em}.breadcrumbs [aria-current=page]{color:#323232}
.sub-link{display:inline-block;margin:0;font-size:14px;line-height:24px;white-space:nowrap}
@media(max-width:799px){
 .hero{width:min(640px,calc(100% - var(--page-gutter)));height:auto;min-height:0;margin:var(--vision-cover-offset) auto 0;padding:0}
 .hero>.container{width:100%;height:auto;min-height:0;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0}
 .hero .hero-copy{padding:clamp(28px,4vw,56px) clamp(28px,4vw,56px) 0}
 .hero .hero-image{height:240px;min-height:240px;margin:0;object-fit:contain}
 .local-nav{display:block;margin-top:32px;padding-bottom:24px}.sub-link{margin-top:16px}
}

/* Lens uses EVO's cover/location composition, retaining Vision type roles. */
.cover.hero{width:auto;padding:0;min-height:0}.cover.hero>.wrap{width:min(1200px,calc(100% - var(--page-gutter)))}
.cover.hero h1{margin:0;font-size:clamp(28px,3vw,38px);line-height:1.45;font-weight:400;letter-spacing:-.02em}
.cover.hero .eyebrow{margin:0 0 16px;font-size:17px;font-weight:700;line-height:1;color:#0FDFDD}
.cover-description{margin-top:24px;max-width:460px}.cover-description p{font-size:17px;line-height:1.8}
@media(max-width:799px){.cover.hero{width:min(640px,calc(100% - var(--page-gutter)));margin-top:var(--vision-cover-offset)}.cover.hero>.wrap{width:100%}.cover.hero h1{font-size:28px}}

/* (new) author: jd — Vision final rendered typography, 2026-10-19.
   Role-specific rules follow the original !important and inline cascade. */
body{-webkit-font-smoothing:antialiased;letter-spacing:-.02em}
/* Vision #criteria supporting copy: keep one 27.2px rhythm across wrapped
   lines and consecutive intro paragraphs; preserve the heading's 12px gap. */
.section-heading>p{font-size:16px;font-weight:400;line-height:1.7;letter-spacing:-.02em;color:#6f6e69}
.section-heading>p+p{margin-top:0}
.definition h3{font-size:clamp(16px,1.6vw,19px);font-weight:500;line-height:1.6;letter-spacing:-.02em}
#principle .card h3{font-size:clamp(17px,1.6vw,19px);line-height:1.45;font-weight:400}
#principle .card p{font-size:14px;line-height:1.75;color:#6f6e69}
#principle .card .step{letter-spacing:.02em}
.criteria .card p{font-size:13px;line-height:1.7;color:#6f6e69}
.system-card h3{letter-spacing:-.02em}.system-label{letter-spacing:-.01em}
.button,.button.secondary{letter-spacing:-.01em}
.handoff-textbtn{font-weight:400}.handoff-story-tag span{font-weight:500;line-height:1;letter-spacing:-.01em}
.comparison-row>:not(:first-child){font-size:clamp(13px,1.3vw,15px);letter-spacing:-.02em}
.comparison-head>:not(:first-child){font-size:clamp(15px,1.5vw,18px)}
@media(max-width:799px){
 #principle .card h3{font-size:20px;line-height:1.45}
 #principle .card p,.criteria .card p{font-size:15px}
}
@media(max-width:720px){
 .comparison-row>:first-child{font-size:14px;line-height:1.5;color:#8a8984}
 .comparison-row>:not(:first-child){font-size:15px;line-height:1.6;color:#111110}
 .comparison-head>:not(:first-child){font-size:17px}
}

.handoff-story-track .related-card h3{font-size:clamp(15px,1.3vw,17px)}
.button,.button.secondary{line-height:normal}
@media(max-width:799px){.handoff-story-track .related-card h3{font-size:19px}}
/* Vision comparison typography switches at 720, independently of page layout. */
@media(min-width:721px) and (max-width:799px){
 .comparison-row>:first-child{font-size:13px;line-height:1.7;color:#6f6e69}
 .comparison-row>:not(:first-child){font-size:clamp(13px,1.3vw,15px);line-height:1.7;color:#323232}
 .comparison-head>:not(:first-child){font-size:clamp(15px,1.5vw,18px)}
}

/* Same-row card height follows the open neighbour, without opening its content. */
#planning .system-grid{align-items:stretch;grid-auto-rows:auto}
#planning .system-grid>.system-card{align-self:stretch}

/* Equal visible cover artwork: preserve EVO's native 1524:1032 aspect ratio.
   Lens crops only peripheral background/cornea; core ICL and crystalline lens remain intact. */
.hero .hero-visual{display:flex;align-items:center;justify-content:center;min-width:0;width:100%;height:440px}
.hero .hero-visual>.hero-image{display:block;width:100%;height:auto;min-height:0;max-height:100%;aspect-ratio:1524/1032;object-fit:cover;object-position:50% 50%;margin:0}
@media(max-width:799px){.hero .hero-visual{height:240px;min-height:240px}.hero .hero-visual>.hero-image{height:auto;min-height:0}}

/* Chrome computed-style follow-up: Vision body tracking is inherited from
   its 16px parent (-.32px), not recalculated against each paragraph size. */
.system-card h3{color:#111110}
.system-body p,.criteria .card p,#principle .card p,.faq-answer p,.cover-description p,.split p{letter-spacing:inherit}
.comparison-row:not(.comparison-head)>:not(:first-child){letter-spacing:inherit}

/* Same delivered Vision font files and rendering, across all content roles. */
body{font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-weight:400;font-synthesis:none;-webkit-font-smoothing:antialiased}

/* Typography roles follow final Vision; comparison shifts at 720px. */
.cover-description p,.split p,.system-label{color:#323232}
#principle .card .step{line-height:1.2;letter-spacing:-.02em}
.comparison-head>:not(:first-child){color:#111110}
@media(min-width:800px){.comparison-head>:not(:first-child){line-height:1.2}}
@media(min-width:721px) and (max-width:799px){.comparison-head>:not(:first-child){line-height:normal}}

#principle .card p{color:#6f6e69}

.consult-form h2{line-height:1.45}

.consult-form h2{font-size:clamp(26px,2.6vw,32px);line-height:1.5}

/* Lens component audit, 2026-10-19: shared roles and documented content variants. */
.cards.criteria{gap:8px;align-items:stretch}
.criteria .card{display:grid;grid-template-rows:subgrid;grid-row:span 3;row-gap:0;justify-items:center;align-items:start}
.criteria .card h3{align-self:start}
.criteria .card p{margin:0}
#planning .system-grid{gap:24px}
#principle .card .step,.flow .card .step{font-size:13px;font-weight:600;line-height:1.2;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.faq-question .q,.faq-answer>b{font-size:15px;font-weight:600;line-height:1;letter-spacing:-.02em}

.products .product-visual{background:#f0efec}
.products .product-visual .card-image{width:100%;height:100%}
.booking-box .button.booking-secondary{background:transparent;border:1px solid #111110;color:#111110}
.booking-box .button.booking-secondary:hover,.booking-box .button.booking-secondary:focus-visible{background:#111110;color:#fff}
#notice-dialog{width:min(420px,calc(100% - 40px));max-height:calc(100svh - 40px);padding:64px 32px 32px;background:#fff;color:#111110;overflow:auto}
#notice-dialog h2{font-size:clamp(22px,2.6vw,28px);font-weight:500;line-height:1.45;letter-spacing:-.02em;color:#111110}
#notice-dialog p{margin:20px 0 32px;font-size:14px;font-weight:400;line-height:1.7;letter-spacing:-.02em;color:#323232}
#notice-dialog .dialog-close{top:12px;right:12px;width:40px;height:40px;padding:0;display:grid;place-items:center;border:1px solid #111110;color:#111110;background:#fff}
.dialog-close-glyph{position:relative;display:block;width:16px;height:16px}
.dialog-close-glyph::before,.dialog-close-glyph::after{content:'';position:absolute;top:50%;left:0;width:16px;height:1.5px;background:currentColor;transform:rotate(45deg)}
.dialog-close-glyph::after{transform:rotate(-45deg)}
#notice-dialog .dialog-close:hover,#notice-dialog .dialog-close:focus-visible{background:#111110;color:#fff}
@media(max-width:799px){
 #planning .system-grid{gap:12px}
 html body header.site-header{transition:transform .32s cubic-bezier(.2,.8,.2,1)}
 html body header.site-header.gnb-hide{transform:translate(-50%,calc(-100% - 24px))!important}
 .mobile-quick{bottom:calc(12px + env(safe-area-inset-bottom,0px));left:max(20px,env(safe-area-inset-left,0px));right:max(20px,env(safe-area-inset-right,0px))}
 .mobile-quick>a,.mobile-quick>button{line-height:1.2;letter-spacing:-.02em;min-height:78px}
 html.quick-visible{scroll-padding-bottom:calc(102px + env(safe-area-inset-bottom,0px))}
 #main :is(a,button,input,select){scroll-margin-bottom:calc(102px + env(safe-area-inset-bottom,0px))}
 .site-footer{padding-bottom:calc(56px + env(safe-area-inset-bottom,0px))}
 #notice-dialog{padding:64px 24px 24px}
 #notice-dialog h2{font-size:22px}
}
@media(prefers-reduced-motion:reduce){html body header.site-header{transition:none}}

/* 2026-10-19 Lens review: composed sections use the delivered Vision spacing.
   The second selection heading is a separate topic, not a compact prep block. */
:root{--subsection-gap:var(--section-gap);--heading-content-gap:clamp(40px,5vw,64px)}
#principle>.wrap>.section-heading,#lenses>.wrap>.section-heading{text-align:center}
.section-heading{margin-bottom:var(--heading-content-gap)}
#selection .selection-subsection{margin-top:var(--subsection-gap)}
#selection .selection-subsection>.section-heading{text-align:center;margin-bottom:var(--heading-content-gap)}
#principle .principle-visual{display:flex;align-items:center;justify-content:center;aspect-ratio:3/2;background:#fff}
#principle .principle-visual .card-image{position:static;display:block;width:100%;height:100%;max-width:100%;object-fit:contain;object-position:center;transform:none}
.products .product-link{width:100%;text-align:left;font:inherit;color:inherit;appearance:none;border:0;border-radius:0}

/* Vision comparison: transparent background, inset rules and mint title baseline.
   Lens compares two fixed methods; headings are labels rather than fake selects. */
#comparison .comparison-scroll{overflow-x:auto;scrollbar-width:thin;outline-offset:2px}
#comparison .comparison-table{position:relative;min-width:620px;background:transparent}
#comparison .comparison-row{display:grid;grid-template-columns:150px repeat(2,minmax(0,1fr));gap:0 24px;padding:0;border:0;box-shadow:none}
#comparison .comparison-row>*{display:block;padding:18px 28px;line-height:1.7;font-weight:400;word-break:keep-all;overflow-wrap:anywhere}
#comparison .comparison-row>:first-child{align-self:center;padding:18px 0;font-size:13px;color:#6f6e69}
#comparison .comparison-row>:not(:first-child){background:transparent;box-shadow:inset 0 -1px 0 #e5e5e5;color:#323232}
#comparison .comparison-head{position:relative;z-index:3;align-items:center}
#comparison .comparison-head>:not(:first-child){padding:24px 28px 14px;box-shadow:none}
#comparison .comparison-title{display:flex;align-items:center;min-width:0;min-height:48px;padding:0 2px 0 0;border-bottom:2px solid #0FDFDD;color:#111110;font-size:clamp(15px,1.5vw,18px);font-weight:500;line-height:1.2;letter-spacing:-.02em}
#comparison .comparison-row:last-child>:not(:first-child){box-shadow:none;padding-bottom:28px}
@media(max-width:720px){
 #comparison .comparison-table{min-width:0}
 #comparison .comparison-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px;padding:16px 0 18px;box-shadow:inset 0 -1px 0 #e5e5e5}
 #comparison .comparison-row>:first-child{grid-column:1/-1;align-self:start;padding:0 0 8px;font-size:14px;line-height:1.5;color:#8a8984}
 #comparison .comparison-row>:not(:first-child){padding:0;box-shadow:none;font-size:15px;line-height:1.6;color:#111110;text-wrap:pretty}
 #comparison .comparison-head{padding:0 0 4px;box-shadow:none}
 #comparison .comparison-head>:first-child{display:none}
 #comparison .comparison-head>:not(:first-child){padding:0;box-shadow:none}
 #comparison .comparison-title{min-height:48px;font-size:17px}
 #comparison .comparison-row:last-child{box-shadow:none}
 #comparison .comparison-row:last-child>:not(:first-child){padding-bottom:0}
}

/* Vision's related-story shell: desktop four cards at every desktop width,
   mobile 1.2 cards with 12px gutters, same white veil and tag timing. */
#related .handoff-story-tools{flex:none}
#related .handoff-story-track{padding-top:6px;margin-top:-6px}
#related .handoff-story-track>.related-card{align-self:start}
#related .handoff-story-track .related-card h3{text-wrap:pretty}
#related .handoff-story-tag{display:flex;align-items:flex-start;padding:14px;z-index:1;background:linear-gradient(180deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.7) 45%,rgba(255,255,255,0) 100%);transition:opacity .25s cubic-bezier(.4,0,.2,1)}
#related .handoff-story-tag span{padding:7px 10px;font-size:12px;font-weight:500;line-height:1;letter-spacing:-.01em;opacity:0;transition:opacity .25s cubic-bezier(.4,0,.2,1)}
#related .related-card:hover .handoff-story-tag span,#related .related-card:focus-visible .handoff-story-tag span{opacity:1;transition-delay:0s} /* 10/29: 흐림과 라벨이 함께 나타남 */
#related .handoff-textbtn::before{transform:scale(.9);transition:opacity .25s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.2,.8,.2,1)}
#related .handoff-textbtn:hover::before,#related .handoff-textbtn:focus-visible::before{transform:scale(1)}
#related .handoff-story-arrows button{transition:background .25s cubic-bezier(.4,0,.2,1),color .25s cubic-bezier(.4,0,.2,1),opacity .2s}
@media(max-width:799px){
 #related .handoff-story-heading{flex-wrap:nowrap}
 #related .handoff-story-heading>.section-heading{flex:1;min-width:0}
 #related .handoff-story-tools{flex:none}
 #related .handoff-story-track{padding-top:0;margin-top:0;padding-bottom:4px;-webkit-overflow-scrolling:touch}
 #related .handoff-story-viewport::before{left:-1px;background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.85) 35%,transparent 100%)}
 #related .handoff-story-viewport::after{right:-1px;background:linear-gradient(270deg,#fff 0%,rgba(255,255,255,.85) 35%,transparent 100%)}
}

/* Consultation uses the shared .section spacing between full sections. */
#consultation .consult-form{margin-top:0}
.consult-heading{grid-column:1/-1}
.consult-heading h2{margin:0}
.consult-heading>p{margin-top:12px;font-size:16px;line-height:1.85;color:#6f6e69}
@media(prefers-reduced-motion:reduce){#related .handoff-story-tag,#related .handoff-story-tag span,#related .handoff-textbtn::before{transition:none}}
/* A stretched action keeps product headings outside button phrasing content. */
.products .product-card-trigger{position:absolute;inset:0;z-index:1;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:pointer}
.products .product-link:focus-within{background:#f5f5f5}
.products .product-link:focus-within h3::after{background:#111110;color:#fff}

/* Main star-review rules, copied verbatim from pages/home/index.html. */
.bv-celeb-fill{position:absolute;left:0;right:0;bottom:0;height:156px;display:flex;align-items:flex-end;justify-content:flex-end;padding:0 16px 16px;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.28));-webkit-backdrop-filter:blur(12px) saturate(1.1);backdrop-filter:blur(12px) saturate(1.1);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 46%);mask-image:linear-gradient(180deg,transparent 0,#000 46%);
  color:#fff;font-size:13px;font-weight:600;letter-spacing:-0.01em;white-space:nowrap;
  opacity:0;transition:opacity .3s cubic-bezier(.4,0,.2,1)}
.bv-celeb-fill b{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;background:#111110;color:#fff;font-size:12px;font-weight:600;transition:transform .3s cubic-bezier(.2,.8,.2,1)} /* "더보기" 글자 삭제, 화살표만(대표 지시 10/18) */
.bv-celeb:hover .bv-celeb-fill b{transform:none}
.bv-celeb-fill i{font-style:normal;font-size:13px;line-height:1;margin-left:0;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.bv-celeb:hover .bv-celeb-fill{opacity:1}
.bv-celeb:hover .bv-celeb-fill i{transform:translateX(2px)}
@media(prefers-reduced-motion:reduce){.bv-celeb-fill,.bv-celeb-fill i{transition:none}}

/* Keep the AI history viewport; widen the review edge fade slightly.
   Important overrides only the inherited Main inline viewport geometry. */
#reviews .bv-stars{
 --history-edge:clamp(20px,4.2vw,56px);
 width:min(var(--page-w),calc(100% - var(--page-gutter)))!important;
 padding-inline:var(--history-edge);
 scroll-padding-inline:var(--history-edge);
 -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--history-edge),#000 calc(100% - var(--history-edge)),transparent 100%)!important;
 mask-image:linear-gradient(90deg,transparent 0,#000 var(--history-edge),#000 calc(100% - var(--history-edge)),transparent 100%)!important;
}

/* Main's mobile star treatment. */
@media(max-width:799px){
 #reviews .bv-celeb small{font-size:13px!important}
 #reviews .bv-stars{scroll-snap-type:x proximity}
 #reviews .bv-stars::-webkit-scrollbar{display:none}
 #reviews .bv-stars .bv-celeb{scroll-snap-align:start}
}

/* Existing 14px / 1.7 note role, placed below the selection explanation. */
#selection .vault-note{display:block;margin-top:16px;font-weight:400;letter-spacing:-.02em}

/* Planning keeps its existing 960px section width and card surface in one column. */
#planning .system-grid{grid-template-columns:minmax(0,1fr)}
#planning .system-card>h3{min-height:0}
#planning .plan-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);align-items:start;gap:clamp(24px,3vw,40px)}
#planning .plan-copy{min-width:0}
#planning .plan-layout>.system-image{display:block;margin:0;max-height:none;height:auto;object-fit:contain;object-position:center top}
#planning .plan-card-01 .system-image,#planning .plan-card-03 .system-image{aspect-ratio:4/3;object-fit:cover;object-position:center}
#planning .plan-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 24px;margin:20px 0 0;padding-left:20px;font-size:15px;font-weight:400;line-height:1.85;color:#323232;letter-spacing:-.02em}
#planning .plan-intro p+p{margin-top:0}
#planning .system-body .flow{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:32px;padding:0;list-style:none}
#planning .plan-flow .card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:20px}
#planning .plan-flow .plan-flow-title{display:flex;align-items:baseline;gap:12px;width:100%;min-width:0}
#planning .plan-flow .plan-flow-title .step{flex:none;margin:0;background:transparent}
#planning .plan-flow .plan-flow-image{display:block;align-self:center;flex:none;width:100%;max-width:270px;height:auto;aspect-ratio:3/2;object-fit:contain;margin:0}
#planning .plan-flow .card h3{font-size:17px;min-height:0;margin:0}
#planning .plan-flow .card p{font-size:15px;margin:0}
#planning .plan-flow .card:not(:last-child)::after{content:'';position:absolute;top:50%;right:-20px;width:8px;height:8px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:translateY(-50%) rotate(45deg)}
@media(max-width:799px){
 #planning .plan-layout,#planning .system-body .flow{grid-template-columns:minmax(0,1fr)}
 #planning .plan-layout{gap:24px}
 #planning .plan-flow .card:not(:last-child)::after{top:auto;right:50%;bottom:-20px;transform:translateX(50%) rotate(135deg)}
}
@media(max-width:479px){#planning .plan-checks{grid-template-columns:minmax(0,1fr)}}

/* The Vault marker is a removable overlay; the original image remains untouched. */
#selection .vault-visual{position:relative;width:100%;line-height:0}
#selection .vault-visual>.split-image{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain;margin:0}
#selection .vault-visual>.vault-overlay{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;pointer-events:none}

/* Keep the natural body height. Scroll selection uses a separate measured
   reference in lens.js, so short plans do not inherit another plan's whitespace. */
#planning .system-grid{overflow-anchor:none}
html.planning-scroll-active{overflow-anchor:none}
#planning .system-body{min-height:0}
@media(prefers-reduced-motion:reduce){#planning .system-fold,#planning .square-toggle .plus-bars{transition:none!important}}

/* Delivered Vision related stories and consultation, with Lens content retained. */
#related .handoff-story-heading{flex-wrap:wrap;margin-bottom:40px}
#related .handoff-story-track .related-card h3{font-size:clamp(15px,1.3vw,17px);font-weight:400;line-height:1.5;margin-top:20px}
#related .handoff-textbtn{font-weight:400}
/* Story keeps desktop arrow controls visible, including their disabled endpoints. */
#consultation{margin-top:clamp(40px,5vw,64px);scroll-margin-top:40px;position:relative}
#consultation .consult-panel{display:flex;flex-wrap:wrap;align-items:center;row-gap:24px;column-gap:56px;padding:30px 56px;border:0;border-radius:0;color:#111110;position:relative;background:linear-gradient(180deg,rgba(255,255,255,.58),rgba(255,255,255,.4));box-shadow:0 18px 44px rgba(17,17,16,.14),0 2px 6px rgba(17,17,16,.06),inset 0 1px 1px rgba(255,255,255,.9),inset 0 -10px 22px rgba(255,255,255,.2),inset 0 0 0 1px rgba(255,255,255,.55);backdrop-filter:blur(18px) saturate(1.4)}
#consultation .consult-panel:has(.select-field.is-open){z-index:5}
#consultation .consult-panel.lg-fallback{background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.62))}
#consultation .consult-heading{flex:none;max-width:100%;margin:0}
html body #main #consultation #consult-title{font-size:clamp(26px,2.6vw,32px);font-weight:400;line-height:1.5!important;letter-spacing:-.02em}
#consultation .consult-form{display:block;flex:1 1 600px;min-width:0;padding:0;margin:0;background:transparent;box-shadow:none;backdrop-filter:none}
#consultation .fields{display:grid;grid-template-columns:1.1fr .7fr 1.2fr 1.35fr 1.05fr;align-items:center;gap:24px}
#consultation .fields>label,#consultation .fields>.select-field{display:block;min-width:0;position:relative;padding-bottom:5px;border-bottom:2px solid #0fdfdd}
#consultation .fields input,#consultation .fields select,#consultation .bv-sel-btn{height:42px;line-height:42px;font-size:16px;padding-top:0;padding-bottom:0;display:block}
#consultation .fields input::placeholder{opacity:1;color:#8a8984}
#consultation .select-field::after{right:6px;top:13px}
#consultation .select-field.is-open::after{top:20px}
#consultation .fields>.button{display:flex;align-items:center;justify-content:center;gap:12px;height:52px;min-height:52px;padding:0 30px;font-size:17px;font-weight:600;white-space:nowrap;letter-spacing:-.02em;box-shadow:0 12px 30px rgba(15,223,221,.38),0 3px 8px rgba(15,223,221,.22)}
#consultation .fields>.button:hover{box-shadow:0 12px 30px rgba(17,17,16,.32),0 3px 8px rgba(17,17,16,.2)}
#consultation .fields .bv-err{margin-bottom:0;border-bottom-color:#d9442f}
@media(min-width:800px){#consultation .select-field.is-enhanced select{display:block;height:1px}}
@media(max-width:900px){#consultation .consult-panel{padding:24px 20px 20px}#consultation .fields .bv-err{margin-bottom:14px}}
@media(max-width:799px){
 #related .handoff-story-heading{flex-wrap:nowrap}
 #related .handoff-story-heading>.section-heading{flex:1;min-width:0}
 #related .handoff-story-track .related-card h3{font-size:19px}
 #consultation .bv-sel-btn{display:none}
}
@media(max-width:640px){#consultation .fields{grid-template-columns:1fr 1fr}#consultation .fields>.button{grid-column:1/-1;width:100%}}



/* Main review-more control, scoped to Lens reviews. */
#reviews .bv-plus-bars{display:block;position:relative;width:var(--s,12px);height:var(--s,12px)}
#reviews .bv-plus-bars::before,#reviews .bv-plus-bars::after{content:"";position:absolute;background:currentColor;border-radius:0}
#reviews .bv-plus-bars::before{left:0;right:0;top:50%;height:var(--w,1.5px);transform:translateY(-50%)}
#reviews .bv-plus-bars::after{top:0;bottom:0;left:50%;width:var(--w,1.5px);transform:translateX(-50%)}
#reviews .bv-textbtn{position:relative;isolation:isolate;padding:7px 14px;margin:-7px -14px;border-radius:0;cursor:pointer}
#reviews .bv-textbtn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:0;background:rgba(17,17,16,.08);opacity:0;transform:scale(.9);transition:opacity .25s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.2,.8,.2,1)}
#reviews .bv-textbtn:hover::before,#reviews .bv-textbtn:focus-visible::before{opacity:1;transform:scale(1)}
#reviews .bv-plus-sq{width:28px;height:28px;display:grid;place-items:center;border:1px solid #111110;color:#111110;transition:background .25s cubic-bezier(.4,0,.2,1),color .25s cubic-bezier(.4,0,.2,1)}
#reviews .bv-plus-sq .bv-plus-bars{transition:transform .45s cubic-bezier(.2,.8,.2,1)}
#reviews .bv-textbtn:hover .bv-plus-sq,#reviews .bv-textbtn:focus-visible .bv-plus-sq{background:#111110;color:#fff}
#reviews .bv-textbtn:hover .bv-plus-sq .bv-plus-bars,#reviews .bv-textbtn:focus-visible .bv-plus-sq .bv-plus-bars{transform:rotate(90deg)}
@media(prefers-reduced-motion:reduce){#reviews .bv-plus-sq .bv-plus-bars{transition:none}}

/* Story rail drag feedback and pointer capture use the same interaction contract. */
#related .handoff-story-track{cursor:grab}
#related .handoff-story-track.is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;user-select:none}
#related .handoff-story-track.is-dragging *{cursor:grabbing}

/* Lens-only mobile refinements. The continuation wrapper exclusion also prevents
   this page-specific block from entering the EVO continuation generator. */
@media(max-width:799px){
 body:not(:has(#lens-continuation)) #main .cover.hero>.container{gap:32px}
 body:not(:has(#lens-continuation)) #main #definition .split>div{order:-1}
 body:not(:has(#lens-continuation)) #main #principle .section-heading,
 body:not(:has(#lens-continuation)) #main #lenses .section-heading{text-align:left}
 body:not(:has(#lens-continuation)) #main #planning .plan-card-02 .plan-flow .card{display:grid;grid-template-columns:minmax(64px,30%) minmax(0,1fr);align-items:center;gap:8px 12px;padding:16px;border-top:0}
 body:not(:has(#lens-continuation)) #main #planning .plan-card-02 .plan-flow-image{grid-column:1;grid-row:1;align-self:center;width:100%;max-width:none}
 body:not(:has(#lens-continuation)) #main #planning .plan-card-02 .plan-flow .card:has(>p) .plan-flow-image{grid-row:1/3}
 body:not(:has(#lens-continuation)) #main #planning .plan-card-02 .plan-flow-title{grid-column:2;grid-row:1;gap:8px}
 body:not(:has(#lens-continuation)) #main #planning .plan-card-02 .plan-flow .card>p{grid-column:2;grid-row:2}
}

/* Lens mobile prediction cards: introductory-body title scale and equal natural rows. */
@media(max-width:799px){
 body:not(:has(#lens-continuation)) #main #planning .plan-card-02 .plan-flow{grid-auto-rows:1fr;align-items:stretch}
 body:not(:has(#lens-continuation)) #main #planning .plan-card-02 .plan-flow .card h3{font-size:15px;color:#323232}
 body:not(:has(#lens-continuation)) #main #planning .plan-card-02 .plan-flow .card>p{font-size:14px;line-height:1.5!important}
}

/* Approved final audit alignment: shared FAQ more-button typography. */
.faq-more{line-height:1.2;letter-spacing:-.02em}
/* 10/29 사용자 지정: '더 알아보기' 카드가 4개 이하이면 넘기기 버튼을 만들지 않음(이벤트 허브·Story·렌즈·EVO ICL 공통) */
#related:not(:has(.related-track > :nth-child(5))) .handoff-story-arrows{display:none}