html[lang="ko"] .hero h1,
html[lang="ja"] .hero h1,
html[lang="zh"] .hero h1{
line-height:1.02!important;
letter-spacing:-.052em!important;
}
.statement p,
.section-head p,
.booking-side p,
.security .copy,
.photo-overlay p,
.policy-card p,
.process-row p,
.sec p,
details p{
line-height:1.78!important;
}
.process-row{
padding-top:32px!important;
padding-bottom:32px!important;
}
.process-row h3{
line-height:1.15!important;
margin-bottom:8px!important;
}
.device-meta b{
line-height:1.18!important;
}
.device-meta small{
line-height:1.7!important;
}
.case b{
line-height:1.18!important;
}
.case-result p{
line-height:1.7!important;
}
.policy-card h3{
line-height:1.14!important;
margin-bottom:16px!important;
}
.sec b{
line-height:1.22!important;
}
.sec p{
margin-top:8px!important;
}
summary{
line-height:1.5!important;
padding-top:24px!important;
padding-bottom:24px!important;
}
details p{
margin-top:0!important;
margin-bottom:24px!important;
}
.final p{
line-height:1.72!important;
}
.eyebrow,
.hero-note,
.device-meta span,
.case .n{
line-height:1.35!important;
}
@media(max-width:700px){
.hero h1{
line-height:.98!important;
}
html[lang="ko"] .hero h1,
html[lang="ja"] .hero h1,
html[lang="zh"] .hero h1{
line-height:1.08!important;
}
.statement h2,
.section-head h2,
.security h2,
.faq-grid h2,
.photo-overlay h2,
.booking-side h2,
.final h2{
line-height:1.05!important;
}
html[lang="ko"] .statement h2,
html[lang="ko"] .section-head h2,
html[lang="ko"] .security h2,
html[lang="ko"] .faq-grid h2,
html[lang="ko"] .photo-overlay h2,
html[lang="ko"] .booking-side h2,
html[lang="ko"] .final h2,
html[lang="ja"] .statement h2,
html[lang="ja"] .section-head h2,
html[lang="ja"] .security h2,
html[lang="ja"] .faq-grid h2,
html[lang="ja"] .photo-overlay h2,
html[lang="ja"] .booking-side h2,
html[lang="ja"] .final h2,
html[lang="zh"] .statement h2,
html[lang="zh"] .section-head h2,
html[lang="zh"] .security h2,
html[lang="zh"] .faq-grid h2,
html[lang="zh"] .photo-overlay h2,
html[lang="zh"] .booking-side h2,
html[lang="zh"] .final h2{
line-height:1.12!important;
}
}
:root{
--ref-dark:#0b0d0d;
--ref-dark-2:#111414;
--ref-cream:#f3f0e8;
--ref-card:#faf8f3;
--ref-ink:#0d0f0f;
--ref-copy:#4d504d;
--ref-line:rgba(13,15,15,.16);
--ref-line-dark:rgba(255,255,255,.18);
--ref-mint:#9cf0c4;
--ref-mint-strong:#7ee8ad;
--ref-yellow:#ffd765;
}
body{
background:var(--ref-dark)!important;
color:#fff!important;
}
.shell{width:min(calc(100% - 64px),1380px)!important}
.pointer-glow{
--gx:-300px;
--gy:-300px;
--glow:rgba(126,232,173,.28);
position:fixed;
left:0;top:0;
width:180px;height:180px;
transform:translate3d(calc(var(--gx) - 90px),calc(var(--gy) - 90px),0);
border-radius:50%;
pointer-events:none;
z-index:9997;
opacity:0;
background:radial-gradient(circle at center,
var(--glow) 0%,
color-mix(in srgb,var(--glow) 58%,transparent) 24%,
color-mix(in srgb,var(--glow) 22%,transparent) 48%,
transparent 72%);
filter:blur(12px);
transition:opacity .22s ease,background .28s ease,filter .28s ease;
will-change:transform;
mix-blend-mode:screen;
}
.pointer-glow.on{opacity:1}
.pointer-glow[data-tone="light"]{
--glow:rgba(255,206,76,.33);
mix-blend-mode:multiply;
filter:blur(11px);
}
.pointer-glow[data-tone="dark"]{
--glow:rgba(85,255,156,.27);
mix-blend-mode:screen;
}
header{
background:rgba(8,10,10,.86)!important;
border-bottom:1px solid var(--ref-line-dark)!important;
color:#fff!important;
backdrop-filter:blur(20px) saturate(120%)!important;
}
.brand,.navlinks a{color:#fff!important}
.navcta{
background:var(--ref-mint)!important;
color:#0b130f!important;
box-shadow:0 0 0 1px rgba(255,255,255,.08),0 8px 28px rgba(101,239,165,.12)!important;
}
.navcta:hover{background:#b8f7d4!important}
.lang button{color:#fff!important;border-color:rgba(255,255,255,.42)!important}
.hero{
background:var(--ref-dark)!important;
color:#fff!important;
}
.hero:after{
background:
linear-gradient(90deg,rgba(4,6,6,.92) 0%,rgba(4,6,6,.72) 38%,rgba(4,6,6,.28) 68%,rgba(4,6,6,.12) 100%)!important;
}
.hero h1{
color:#fff!important;
max-width:1030px!important;
font-weight:500!important;
letter-spacing:-.062em!important;
}
.hero h1 .accent{color:#b9f4d6!important}
.hero-copy{color:#e7e7e3!important;max-width:640px!important}
.hero-note{color:#aaaead!important}
.btn-light{
background:var(--ref-mint)!important;
color:#0b130f!important;
box-shadow:0 10px 32px rgba(83,244,154,.14)!important;
}
.btn-light:hover{background:#baf7d6!important}
.statement,
.manifesto-line,
#devices,
#case-check,
.policy-theme,
#faq{
background:var(--ref-cream)!important;
color:var(--ref-ink)!important;
}
.statement h2,
.statement p,
#devices h2,#devices p,
#case-check h2,#case-check p,
#faq h2,#faq p{
color:var(--ref-ink)!important;
}
.statement p,#devices .section-head p,#case-check .section-head p,#faq details p{color:var(--ref-copy)!important}
.statement,
#devices,
#case-check,
#faq,
.policy-theme{
position:relative;
isolation:isolate;
}
.statement:before,
#devices:before,
#case-check:before,
#faq:before,
.policy-theme:before{
content:"";
position:absolute;
inset:0;
z-index:-1;
pointer-events:none;
background:
radial-gradient(540px 340px at 28% 22%,rgba(255,221,125,.08),transparent 70%),
linear-gradient(180deg,rgba(255,255,255,.22),transparent 32%);
}
.device-card{
box-shadow:0 16px 44px rgba(16,14,10,.08)!important;
}
.device-card img{filter:saturate(.68) contrast(1.07) brightness(.82)!important}
.device-card:hover img{filter:saturate(.82) contrast(1.08) brightness(.9)!important}
.case{
background:rgba(255,255,255,.16)!important;
}
.case:hover,.case.active{
background:#111414!important;
color:#fff!important;
}
.case.bad:hover,.case.bad.active{
background:#e69090!important;
color:#111!important;
}
.case-result{
background:#fff!important;
color:#111!important;
}
.case-result p,.case-result strong{color:#111!important}
.case-result.good{background:var(--ref-mint)!important}
.case-result.warn{background:#f2d183!important}
.case-result.bad{background:#eda1a7!important}
.process{
background:var(--ref-dark)!important;
color:#fff!important;
}
.process .section-head h2,
.process .eyebrow,
.process-row h3{color:#fff!important}
.process-row p{color:#b5bab7!important}
.process-row:hover{background:rgba(142,235,188,.035)!important}
.process-row:hover h3{color:#b9f4d6!important}
.photo-break:after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
box-shadow:inset 0 0 100px rgba(0,0,0,.24);
}
.policy-theme{
padding:78px 0!important;
border:0!important;
}
.policy-theme .section-head h2,
.policy-theme .section-head .eyebrow{
color:#101111!important;
}
.policy-theme .section-head p{
color:#50534f!important;
}
.policy-theme .policy-grid{
border-color:rgba(10,10,10,.13)!important;
gap:16px!important;
border:0!important;
}
.policy-theme .policy-card{
border:1px solid rgba(13,15,15,.12)!important;
background:rgba(255,255,255,.60)!important;
color:#101111!important;
min-height:300px!important;
padding:30px!important;
box-shadow:0 12px 34px rgba(30,24,13,.045)!important;
border-radius:10px!important;
}
.policy-theme .policy-card:last-child{
background:rgba(255,255,255,.72)!important;
}
.policy-theme .policy-card span{
display:inline-grid!important;
place-items:center!important;
width:52px;height:52px!important;
border-radius:50%!important;
background:#ffe19a!important;
color:#111!important;
font-size:12px!important;
font-weight:700!important;
}
.policy-theme .policy-card:last-child span{
background:var(--ref-mint)!important;
}
.policy-theme .policy-card h3{
margin:30px 0 14px!important;
color:#0b0d0d!important;
font-size:30px!important;
line-height:1.15!important;
font-weight:600!important;
}
.policy-theme .policy-card p{
color:#3e423e!important;
font-size:15px!important;
line-height:1.72!important;
}
.policy-theme .policy-card *,
.policy-theme .policy-card h3,
.policy-theme .policy-card p,
.policy-theme .policy-card small,
.policy-theme .policy-card strong{
text-shadow:none!important;
}
.booking{
background:var(--ref-dark-2)!important;
color:#fff!important;
border:0!important;
}
.booking-side .eyebrow{color:#b9f4d6!important}
.booking-side h2{color:#fff!important}
.booking-side p{color:#c0c5c2!important}
.booking-points div{
color:#fff!important;
border-color:var(--ref-line-dark)!important;
}
.embed{
border:1px solid rgba(255,255,255,.12)!important;
box-shadow:0 24px 80px rgba(0,0,0,.26)!important;
}
.embed-loader{color:#505050!important}
.security{
background:#0e1110!important;
color:#fff!important;
border-top:1px solid rgba(255,255,255,.12)!important;
}
.security h2,.security .eyebrow,.sec b{color:#fff!important}
.security .copy,.sec p{color:#b3b8b5!important}
#faq{
border-top:0!important;
}
#faq .eyebrow,#faq h2,#faq summary{color:#101111!important}
#faq .faq-list,#faq details{border-color:rgba(13,15,15,.16)!important}
#faq summary:after{color:#111!important}
.final{
background:var(--ref-mint)!important;
color:#0b0d0d!important;
}
.final h2,.final p{color:#0b0d0d!important}
.final .btn{background:#111!important;color:#fff!important}
footer{
background:#0a0c0b!important;
color:#fff!important;
border-top:1px solid rgba(255,255,255,.12)!important;
}
.section{padding:72px 0!important}
.statement{padding-top:78px!important;padding-bottom:78px!important}
.process,.booking,.security{padding-top:80px!important;padding-bottom:80px!important}
#faq{padding-top:74px!important;padding-bottom:78px!important}
.section-head{margin-bottom:34px!important}
.photo-break{min-height:590px!important;height:min(68vw,790px)!important}
.section-head h2,
.statement h2,
.booking-side h2,
.security h2,
.faq-grid h2,
.final h2{
line-height:1.03!important;
}
.hero h1{line-height:.97!important}
html[lang="ko"] .hero h1,
html[lang="ja"] .hero h1,
html[lang="zh"] .hero h1{
line-height:1.07!important;
}
a:focus-visible,button:focus-visible,summary:focus-visible{
outline:3px solid #ffd765!important;
outline-offset:4px!important;
}
@media(prefers-reduced-motion:reduce){
.pointer-glow{display:none!important}
}
@media(max-width:700px){
.pointer-glow{display:none!important}
.shell{width:calc(100% - 26px)!important}
.policy-theme .policy-grid{grid-template-columns:1fr!important;gap:12px!important}
.policy-theme .policy-card{min-height:250px!important}
.policy-theme .policy-card h3{font-size:26px!important}
.section{padding:58px 0!important}
.process,.booking,.security{padding:64px 0!important}
.photo-break{height:620px!important;min-height:620px!important}
}
#case-check.section{
padding-top:62px!important;
padding-bottom:62px!important;
}
#case-check .section-head{
margin-bottom:24px!important;
gap:52px!important;
}
#case-check .section-head h2{
margin-bottom:0!important;
}
#case-check .section-head p{
max-width:560px!important;
}
.case-grid{
grid-template-columns:repeat(3,1fr)!important;
}
.case{
min-height:126px!important;
padding:16px 18px 18px!important;
display:flex!important;
flex-direction:column!important;
justify-content:space-between!important;
}
.case .n{
margin-bottom:10px!important;
font-size:9px!important;
}
.case b{
font-size:21px!important;
line-height:1.12!important;
display:block!important;
max-width:95%!important;
}
.case-result{
min-height:74px!important;
padding:14px 16px!important;
grid-template-columns:200px 1fr auto!important;
gap:16px!important;
}
.case-result strong{
font-size:14px!important;
line-height:1.25!important;
}
.case-result p{
font-size:13px!important;
line-height:1.5!important;
}
#caseResultBtn{
min-height:44px!important;
padding:0 16px!important;
font-size:13px!important;
}
@media(max-width:900px){
.case-grid{
grid-template-columns:repeat(2,1fr)!important;
}
.case{
min-height:118px!important;
}
.case-result{
grid-template-columns:1fr!important;
gap:10px!important;
min-height:auto!important;
}
#caseResultBtn{
justify-self:start!important;
}
}
@media(max-width:700px){
#case-check.section{
padding-top:52px!important;
padding-bottom:52px!important;
}
#case-check .section-head{
margin-bottom:18px!important;
gap:20px!important;
}
.case-grid{
grid-template-columns:1fr!important;
}
.case{
min-height:94px!important;
padding:14px 16px!important;
}
.case .n{
margin-bottom:8px!important;
}
.case b{
font-size:19px!important;
line-height:1.12!important;
}
.case-result{
padding:13px 14px!important;
gap:8px!important;
}
}
.navlinks{
gap:6px!important;
}
.navlinks > a:not(.navcta){
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
min-height:48px!important;
padding:0 14px!important;
margin:0!important;
border-radius:999px!important;
position:relative!important;
cursor:pointer!important;
}
.navlinks > a:not(.navcta):hover{
background:rgba(255,255,255,.07)!important;
}