:root{
  --paper:#fbf9f4;
  --ink:#282923;
  --muted:#75756c;
  --line:#e4e2da;
  --coral:#ee7658;
  --violet:#6750ef;
  --cream:#f0eadc;
  --radius:28px}
*{
  box-sizing:border-box}
html{
  scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Noto Sans KR',sans-serif;
  letter-spacing:-.025em;
  line-height:1.6}
a{
  color:inherit;
  text-decoration:none}
button,a{
  -webkit-tap-highlight-color:transparent}
a:focus-visible{
  outline:3px solid var(--coral);
  outline-offset:6px}
img{
  max-width:100%;
  display:block}
.wrap{
  width:min(1160px,calc(100% - 64px));
  margin:auto}
.top{
  height:94px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line)}
.brand{
  font-size:25px;
  font-weight:800;
  letter-spacing:-1.3px;
  display:inline-flex;
  align-items:center;
  gap:11px}
.brand-mark{
  display:grid;
  grid-template-columns:repeat(2,9px);
  gap:3px;
  transform:rotate(-12deg)}
.brand-mark i{
  width:9px;
  height:9px;
  background:var(--coral);
  border-radius:50%}
.brand-mark i:nth-child(2){
  border-radius:50% 50% 15% 50%}
.top nav{
  display:flex;
  gap:32px;
  font-size:14px;
  font-weight:550}
.top nav a:hover,.text-link:hover{
  color:var(--coral)}
.eyebrow{
  font-size:12px;
  font-weight:750;
  letter-spacing:.12em;
  color:var(--muted);
  margin:0 0 20px;
  text-transform:uppercase}
h1,h2,h3,p{
  margin-top:0}
h1{
  font-size:clamp(42px,5.4vw,72px);
  line-height:1.18;
  font-weight:750;
  letter-spacing:-.065em;
  margin-bottom:26px}
h2{
  font-size:36px;
  line-height:1.3;
  letter-spacing:-.05em;
  margin-bottom:18px}
h3{
  font-size:22px;
  line-height:1.35;
  margin-bottom:10px}
p{
  word-break:keep-all}
.muted{
  color:var(--muted)}
.intro{
  display:grid;
  grid-template-columns:1.6fr 1fr;
  gap:80px;
  padding:86px 0 72px;
  align-items:end}
.intro h1 span{
  color:var(--coral)}
.intro-copy{
  max-width:330px;
  padding-bottom:4px;
  font-size:17px;
  color:var(--muted)}
.intro-copy p{
  margin-bottom:20px}
.text-link{
  font-size:14px;
  font-weight:650;
  display:inline-flex;
  align-items:center;
  gap:24px}
.feature{
  background:#eee9fe;
  border-radius:var(--radius);
  display:grid;
  grid-template-columns:1.1fr 1fr;
  min-height:410px;
  overflow:hidden;
  position:relative}
.feature-copy{
  padding:48px 0 48px 48px;
  z-index:1}
.pill{
  display:inline-flex;
  font-size:11px;
  font-weight:650;
  padding:6px 12px;
  border-radius:30px;
  background:white;
  color:var(--violet);
  margin-bottom:24px;
  letter-spacing:.02em}
.feature h2{
  font-size:46px;
  line-height:1.25;
  letter-spacing:-.05em}
.feature h2 small{
  font-size:17px;
  display:block;
  margin-bottom:12px;
  font-weight:550;
  color:var(--violet)}
.feature p{
  font-size:15px;
  color:#71658d;
  max-width:360px;
  margin-bottom:26px}
.button{
  display:inline-flex;
  gap:26px;
  justify-content:center;
  align-items:center;
  padding:14px 21px;
  border-radius:13px;
  background:var(--ink);
  color:white;
  font-size:14px;
  font-weight:650;
  transition:transform .2s}
.button:hover{
  transform:translateY(-2px)}
.button.violet{
  background:var(--violet)}
.button.light{
  background:white;
  color:var(--ink);
  border:1px solid var(--line)}
.feature-art{
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative}
.feature-art:before{
  content:'';
  position:absolute;
  width:370px;
  height:370px;
  border-radius:50%;
  background:#ddd3fb}
.feature-art img{
  width:265px;
  border-radius:57px;
  transform:rotate(8deg);
  position:relative;
  box-shadow:0 25px 45px #64519628}
.art-note{
  position:absolute;
  bottom:43px;
  right:34px;
  z-index:2;
  background:#fffdf7;
  padding:9px 15px;
  border-radius:8px;
  transform:rotate(-7deg);
  font-size:13px;
  color:#75658c;
  box-shadow:0 8px 18px #64519615}
.section{
  padding:88px 0}
.section-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  margin-bottom:30px}
.section-head h2{
  margin-bottom:0}
.section-head p{
  font-size:14px;
  margin:0;
  color:var(--muted)}
.app-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px}
.app-card{
  padding:26px;
  background:white;
  border:1px solid var(--line);
  border-radius:20px;
  display:flex;
  flex-direction:column;
  min-height:270px}
.app-glyph{
  height:49px;
  width:49px;
  display:grid;
  place-items:center;
  font-size:23px;
  font-weight:700;
  border-radius:14px;
  background:#f3eadb;
  margin-bottom:27px;
  letter-spacing:-1px}
.app-glyph.orange{
  background:#fff0df;
  color:#bb6d25}
.app-glyph.pink{
  background:#fce8ef;
  color:#bd6079}
.app-glyph.blue{
  background:#e9eff8;
  color:#627e9c}
.app-glyph.dark{
  background:#ede9e4;
  color:#4d4540}
.app-card h3{
  font-size:18px}
.app-card p{
  font-size:14px;
  color:var(--muted);
  margin-bottom:22px;
  flex:1}
.card-bottom{
  display:flex;
  gap:18px;
  align-items:center;
  font-size:12px;
  font-weight:650}
.tag{
  color:var(--muted);
  font-size:11px;
  font-weight:500}
.support{
  padding:44px;
  border:1px solid var(--line);
  border-radius:24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  background:#f2eee4}
.support h2{
  font-size:28px;
  margin-bottom:10px}
.support p{
  font-size:14px;
  max-width:560px;
  color:var(--muted);
  margin-bottom:0}
.footer{
  padding:34px 0 40px;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  color:var(--muted);
  font-size:12px}
.footer-links{
  display:flex;
  gap:22px}
.preview-note{
  padding:9px 16px;
  background:#2c2d27;
  color:#faf7ef;
  text-align:center;
  font-size:11px;
  letter-spacing:0}
.product-hero{
  padding:74px 0 80px;
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:80px;
  align-items:center}
.product-hero h1{
  font-size:64px}
.product-icon{
  width:74px;
  border-radius:17px;
  margin-bottom:25px}
.product-hero .eyebrow{
  color:var(--violet)}
.product-hero .lead{
  max-width:425px;
  color:var(--muted);
  font-size:17px;
  line-height:1.8}
.product-links{
  display:flex;
  gap:16px;
  align-items:center;
  margin:30px 0 22px}
.release{
  font-size:13px;
  padding:12px 16px;
  background:#eae4fa;
  border-radius:12px;
  color:var(--violet)}
.compat{
  font-size:12px;
  color:var(--muted)}
.product-art{
  background:#ece6fc;
  border-radius:42px;
  padding:30px;
  position:relative;
  display:flex;
  justify-content:center}
.product-art>img{
  width:230px;
  border-radius:20px;
  box-shadow:0 20px 45px #54418525;
  border:4px solid white}
.float-note{
  position:absolute;
  bottom:50px;
  left:-30px;
  background:#fffdf8;
  border:1px solid #e7e0cf;
  border-radius:15px;
  padding:15px 20px;
  box-shadow:0 8px 25px #55458013;
  font-size:13px;
  line-height:1.5;
  transform:rotate(-5deg)}
.float-note strong{
  display:block;
  color:var(--violet)}
.promise{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:35px;
  padding:37px 0}
.promise span{
  font-size:12px;
  color:var(--muted);
  display:block;
  margin-top:8px}
.promise strong{
  font-size:20px;
  font-weight:650}
.product-section{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:100px;
  padding:94px 0}
.screen-mat{
  padding:30px;
  background:#eee9fa;
  border-radius:30px;
  display:flex;
  justify-content:center}
.screen-mat img{
  max-width:240px;
  border-radius:14px;
  box-shadow:0 12px 30px #51477916}
.product-section .copy p{
  color:var(--muted);
  font-size:16px}
.step-list{
  list-style:none;
  padding:0;
  margin:25px 0 0;
  counter-reset:step}
.step-list li{
  counter-increment:step;
  padding:14px 0;
  border-top:1px solid var(--line);
  font-size:14px}
.step-list li:before{
  content:'0' counter(step);
  color:var(--violet);
  font-size:11px;
  margin-right:17px}
.faq{
  border-top:1px solid var(--line);
  padding:58px 0 75px}
.faq h2{
  margin-bottom:30px}
details{
  border-top:1px solid var(--line);
  padding:21px 0;
  font-size:15px}
details:last-child{
  border-bottom:1px solid var(--line)}
summary{
  cursor:pointer;
  font-weight:650}
details p{
  padding-top:17px;
  font-size:14px;
  max-width:800px;
  color:var(--muted);
  margin-bottom:3px}
.policy{
  max-width:800px;
  padding:68px 0 80px}
.policy h1{
  font-size:43px}
.policy h2{
  font-size:24px;
  margin-top:38px}
.policy p{
  font-size:15px;
  line-height:1.9;
  color:#585b51}
.policy a{
  color:var(--violet);
  text-decoration:underline}
.policy .pill{
  margin-bottom:20px}
.bottom-cta{
  padding:40px;
  text-align:center;
  background:#eee9fc;
  border-radius:24px;
  margin-bottom:80px}
.bottom-cta p{
  color:#73678b;
  font-size:14px}
.bottom-cta h2{
  font-size:30px}
@media(prefers-reduced-motion:reduce){
  html{
  scroll-behavior:auto}
.button{
  transition:none}
}
@media(max-width:850px){
  .intro{
  gap:32px}
.app-grid{
  grid-template-columns:repeat(2,1fr)}
.feature-copy{
  padding-left:32px}
.feature h2{
  font-size:38px}
.feature-art img{
  width:210px}
.feature-art:before{
  width:280px;
  height:280px}
.product-hero{
  gap:36px}
.product-hero h1{
  font-size:48px}
.product-section{
  gap:45px}
}
@media(max-width:600px){
  .wrap{
  width:calc(100% - 36px)}
.top{
  height:77px}
.brand{
  font-size:23px}
.top nav{
  gap:18px;
  font-size:12px}
.top nav .desktop{
  display:none}
.intro{
  grid-template-columns:1fr;
  padding:48px 0 40px;
  gap:12px}
.intro h1{
  font-size:46px;
  margin-bottom:10px}
.intro-copy{
  max-width:100%;
  font-size:15px}
.intro-copy p{
  margin-bottom:14px}
.feature{
  grid-template-columns:1fr}
.feature-copy{
  padding:30px 26px 0}
.feature h2{
  font-size:36px}
.feature p{
  font-size:14px}
.feature-art{
  min-height:270px}
.feature-art img{
  width:190px;
  border-radius:42px}
.feature-art:before{
  width:260px;
  height:260px}
.art-note{
  bottom:30px;
  right:22px}
.section{
  padding:56px 0}
.section-head{
  align-items:start;
  flex-direction:column;
  gap:14px}
.section-head h2{
  font-size:30px}
.app-grid{
  grid-template-columns:1fr}
.app-card{
  min-height:220px;
  padding:24px}
.app-glyph{
  margin-bottom:22px}
.support{
  padding:26px;
  align-items:start;
  flex-direction:column}
.support h2{
  font-size:25px}
.footer{
  align-items:start;
  flex-direction:column;
  gap:14px}
.footer p{
  margin-bottom:0}
.product-hero{
  grid-template-columns:1fr;
  gap:34px;
  padding:42px 0 44px}
.product-icon{
  width:62px}
.product-hero h1{
  font-size:44px}
.product-hero .lead{
  font-size:15px}
.product-art{
  margin:0 18px;
  padding:25px}
.product-art>img{
  width:210px}
.float-note{
  left:-15px;
  bottom:38px}
.promise{
  gap:20px;
  padding:28px 0}
.promise strong{
  font-size:15px}
.promise span{
  font-size:11px}
.product-section{
  grid-template-columns:1fr;
  gap:30px;
  padding:55px 0}
.product-section .copy{
  order:-1}
.product-section h2{
  font-size:30px}
.product-section .copy p{
  font-size:15px}
.screen-mat img{
  max-width:225px}
.faq{
  padding-top:42px}
.faq h2{
  font-size:29px}
.policy{
  padding-top:45px}
.policy h1{
  font-size:34px}
.preview-note{
  font-size:10px}
.bottom-cta{
  padding:28px 20px}
.bottom-cta h2{
  font-size:25px}
}

.device-section{
  padding:65px 0 0}
.device-section>p{
  color:var(--muted);
  font-size:15px}
.device-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1.2fr;
  gap:18px;
  margin-top:28px}
.device-card{
  background:#f1edf8;
  border:1px solid #e6e0f0;
  border-radius:23px;
  padding:25px 18px;
  display:flex;
  flex-direction:column}
.device-card h3{
  font-size:19px;
  margin:0}
.device-card>p{
  font-size:12px;
  color:var(--muted);
  margin-top:5px}
.device-images{
  height:320px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px}
.device-images img{
  max-height:300px;
  max-width:100%;
  object-fit:contain;
  filter:drop-shadow(0 8px 13px #54418518)}
.device-images .phone{
  max-height:310px}
.device-images .pad{
  max-height:290px}
.device-images .duo{
  max-width:45%;
  max-height:270px}
.device-caption{
  text-align:center;
  font-size:11px;
  color:var(--muted);
  margin:14px 0 0}
.device-note{
  font-size:12px;
  color:var(--muted);
  margin-top:18px}
@media(max-width:850px){
  .device-grid{
  grid-template-columns:1fr}
.device-images{
  height:370px}
.device-images img{
  max-height:350px}
.device-images .duo{
  max-height:330px}
}
@media(max-width:600px){
  .device-section{
  padding-top:45px}
.device-section h2{
  font-size:30px}
.device-images{
  height:340px}
.device-images .phone{
  max-height:320px}
.device-images .pad{
  max-height:310px}
.device-images .duo{
  max-height:290px}
}


/* Existing app privacy URLs remain stable after the brand renewal. */
.privacy-list.policy{max-width:none;padding:0}
.privacy-item{padding:24px 0;border-top:1px solid var(--line)}
.card-bottom,.footer-links{flex-wrap:wrap}

.top{height:auto;min-height:94px;padding:18px 0;gap:16px;flex-wrap:wrap}
.top nav{gap:18px;flex-wrap:wrap}
.language-switch{color:var(--violet);white-space:nowrap}
.simple-product{max-width:850px;padding:70px 0 0}
.simple-product .lead{font-size:20px;color:var(--muted);max-width:700px}
.simple-product .app-glyph{margin:26px 0}
.simple-product .bottom-cta{margin-top:70px}
.product-links{flex-wrap:wrap}
html[lang="en"] p{word-break:normal}
@media(max-width:600px){
  .top{min-height:77px}
  .top nav{width:100%;gap:16px;font-size:12px}
  .simple-product{padding-top:42px}
  .simple-product h1{font-size:40px}
  .simple-product .lead{font-size:17px}
}

html[lang="en"]{letter-spacing:-.01em}
html[lang="en"] h1,html[lang="en"] h2{letter-spacing:-.04em}
@media(min-width:851px){.app-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}