:root{
  --ink:#292722;
  --muted:#67615a;
  --paper:#faf8f4;
  --red:#a32127;
  --line:#ded8cf;
  --cream:#eee9df}
*{
  box-sizing:border-box}
html{
  scroll-behavior:auto}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans",sans-serif;
  line-height:1.75}
a{
  color:inherit;
  text-underline-offset:5px}
a:focus-visible,summary:focus-visible{
  outline:3px solid var(--red);
  outline-offset:5px}
.wrap{
  max-width:1180px;
  margin:auto;
  padding:0 38px}
.preview{
  padding:8px 20px;
  text-align:center;
  font-size:12px;
  background:#eee6dc;
  color:#51483f}
.top{
  flex-wrap:wrap;
  padding:18px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:100px;
  border-bottom:1px solid var(--line)}
.brand{
  display:flex;
  gap:11px;
  align-items:center;
  text-decoration:none;
  font-size:21px;
  font-weight:750;
  letter-spacing:-.7px}
.brand img{
  border-radius:10px;
  width:37px;
  height:37px}
.brand small{
  display:block;
  font-size:10px;
  letter-spacing:1px;
  font-weight:500;
  line-height:1.1}
.nav{
  flex-wrap:wrap;
  display:flex;
  gap:23px;
  align-items:center;
  font-size:13px}
.nav a{
  min-height:44px;
  display:flex;
  align-items:center;
  text-decoration:none}
.nav .lang{
  border:1px solid var(--line);
  padding:0 14px;
  border-radius:24px}
.eyebrow{
  font-size:11px;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--red)}
.hero{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:50px;
  align-items:center;
  padding:70px 0 65px}
.hero h1{
  font-size:clamp(38px,4.8vw,66px);
  font-weight:750;
  letter-spacing:-3px;
  line-height:1.2;
  margin:21px 0 27px;
  overflow-wrap:anywhere}
.hero h1 span{
  color:var(--red)}
.lead{
  max-width:480px;
  font-size:17px;
  color:var(--muted)}
.actions{
  display:flex;
  gap:20px;
  align-items:center;
  flex-wrap:wrap;
  margin:29px 0 16px}
.cta{
  min-height:54px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  padding:12px 25px;
  background:var(--red);
  color:white;
  border-radius:7px;
  font-size:14px;
  text-decoration:none;
  font-weight:700}
.secondary{
  display:inline-flex;
  min-height:44px;
  align-items:center;
  font-size:13px}
.fine{
  font-size:12px;
  color:var(--muted);
  max-width:450px}
.fine a{
  display:inline-block;
  min-height:44px;
  padding-top:6px}
.stage{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:570px;
  background:radial-gradient(ellipse,#e5dacf 0,transparent 68%)}
.orbit{
  position:absolute;
  border:1px solid #d6c8ba;
  border-radius:50%;
  width:440px;
  height:440px;
  max-width:100%;
  transform:none}
.phone{
  position:relative;
  width:242px;
  background:#232722;
  border:7px solid #232722;
  border-radius:33px;
  box-shadow:22px 30px 55px #493a2926;
  overflow:hidden}
.phone img{
  width:100%;
  display:block;
  height:auto}
.tag{
  position:absolute;
  right:-4px;
  bottom:73px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:8px;
  padding:14px 19px;
  box-shadow:0 8px 20px #493a2910;
  font-size:13px}
.tag b{
  display:block;
  color:#006d62}
.stripe{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:25px;
  padding:22px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  font-size:13px}
.stripe div:not(:first-child){
  border-left:1px solid var(--line);
  padding-left:28px}
.stripe b{
  display:block;
  font-size:15px;
  margin-bottom:3px}
.stripe span{
  color:var(--muted)}
section{
  padding:85px 0}
.intro{
  max-width:650px}
.intro h2,.steps h2,.compat h2{
  font-size:clamp(29px,3.2vw,43px);
  line-height:1.4;
  letter-spacing:-1.5px;
  margin:15px 0 20px}
.intro p{
  color:var(--muted)}
.steps{
  padding-top:0}
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:30px;
  margin-bottom:28px}
.section-head h2{
  margin-bottom:0}
.section-head p{
  font-size:14px;
  color:var(--muted);
  max-width:300px}
.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:17px}
.card{
  padding:28px 27px;
  background:white;
  border:1px solid var(--line);
  border-radius:10px}
.num{
  font-size:11px;
  letter-spacing:2px;
  color:var(--red)}
.card h3{
  font-size:22px;
  letter-spacing:-.5px;
  margin:12px 0}
.card p{
  font-size:14px;
  color:var(--muted)}
.mini{
  height:208px;
  margin:27px -10px -28px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:15px 15px 0 0;
  background:#f1f5f4}
.mini img{
  display:block;
  width:100%;
  height:auto}
.example{
  padding:22px;
  background:#f3f6f4;
  border-left:3px solid #006e62;
  font-size:15px;
  color:#264d44;
  margin:28px 0 20px}
.example-label{
  font-size:11px;
  color:var(--muted)}
.trust{
  background:#292c28;
  color:#f9f8f4;
  border-radius:13px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
  padding:47px 48px;
  margin-bottom:80px}
.trust h2{
  font-size:29px;
  line-height:1.45;
  margin:0}
.trust p{
  margin:0;
  color:#d3d7d0;
  font-size:14px}
.trust a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  color:#fff;
  font-size:13px}
.compat{
  padding-top:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:55px}
.compat p,.compat li{
  font-size:14px;
  color:var(--muted)}
.requirements{
  margin:0;
  padding:0;
  list-style:none;
  border-top:1px solid var(--line)}
.requirements li{
  padding:14px 0;
  border-bottom:1px solid var(--line)}
.requirements b{
  display:block;
  color:var(--ink)}
details{
  font-size:13px;
  border-bottom:1px solid var(--line);
  padding:13px 0}
summary{
  cursor:pointer;
  min-height:44px;
  display:list-item;
  align-content:center}
.end{
  border-top:1px solid var(--line);
  padding:65px 0;
  text-align:center}
.end h2{
  font-size:35px;
  line-height:1.4;
  letter-spacing:-1px;
  margin:0 0 25px}
.end p{
  font-size:12px;
  color:var(--muted)}
.support{
  background:var(--cream);
  padding:28px;
  border-radius:9px;
  font-size:13px;
  margin-bottom:65px}
.support h2{
  font-size:19px;
  margin:0 0 9px}
.support a{
  display:inline-flex;
  min-height:44px;
  align-items:center;
  margin-right:23px}
footer{
  padding:24px 0 36px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:12px;
  color:var(--muted)}
footer a{
  display:inline-flex;
  min-height:44px;
  align-items:center;
  margin-left:15px}
@media(max-width:800px){
  .wrap{
  padding:0 24px}
.nav{
  gap:15px}
.nav .optional{
  display:none}
.hero{
  grid-template-columns:1fr;
  gap:15px;
  padding:45px 0}
.hero h1{
  letter-spacing:-1.5px;
  font-size:42px}
.stage{
  min-height:490px}
.phone{
  width:210px}
.orbit{
  width:330px;
  height:330px}
.tag{
  right:0;
  bottom:65px}
.stripe{
  grid-template-columns:1fr;
  gap:13px;
  padding:20px 0}
.stripe div:not(:first-child){
  border-left:0;
  border-top:1px solid var(--line);
  padding:13px 0 0}
.stripe b{
  display:inline;
  margin-right:10px}
.stripe span{
  font-size:12px}
section{
  padding:55px 0}
.section-head{
  display:block}
.cards{
  grid-template-columns:1fr}
.card{
  padding:24px}
.mini{
  height:210px;
  max-width:280px;
  margin:22px auto -24px}
.trust{
  grid-template-columns:1fr;
  gap:22px;
  padding:30px 26px;
  margin-bottom:55px}
.compat{
  grid-template-columns:1fr;
  gap:24px}
.end{
  padding:45px 0}
.end h2{
  font-size:29px}
footer{
  display:block}
.preview{
  font-size:11px}
.top{
  min-height:83px}
.brand{
  font-size:19px}
.lead{
  font-size:16px}
}
@media(max-width:360px){
  .wrap{
  padding:0 18px}
.brand small{
  font-size:9px}
.nav{
  gap:9px}
.nav .optional-small{
  display:none}
.hero h1{
  font-size:36px}
.tag{
  font-size:11px;
  padding:10px}
.actions{
  gap:10px}
.stripe b{
  display:block}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
  animation:none!important;
  transition:none!important;
  scroll-behavior:auto!important}
}


/* The first connection is a short, visible sequence rather than a promise of instant setup. */
.setup{padding-top:0}
.setup h2{font-size:clamp(25px,3vw,36px);line-height:1.4;letter-spacing:-1px;margin:15px 0 25px}
.setup-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:0;list-style:none;counter-reset:setup}
.setup-steps li{counter-increment:setup;border-top:1px solid var(--line);padding-top:18px}
.setup-steps li::before{content:"0" counter(setup);display:block;color:var(--red);font-size:12px;letter-spacing:2px;margin-bottom:10px}
.setup-steps b{display:block;font-size:17px;margin-bottom:8px}
.setup-steps span{display:block;color:var(--muted);font-size:14px}
.compat-note{border-left:3px solid var(--line);padding-left:12px}
.end .next-step{font-size:15px;margin:0 0 24px}
.cta{max-width:100%;gap:12px;padding-left:20px;padding-right:20px}
@media(max-width:800px){.setup-steps{grid-template-columns:1fr;gap:12px}html:lang(ja) .hero h1{font-size:clamp(30px,8.2vw,42px)}}

.pricing-note,.end .pricing-note{font-size:13px;line-height:1.7;color:var(--muted);max-width:460px;margin:12px 0 0}.end .pricing-note{margin:12px auto 0}

/* Dedicated support and privacy previews share the landing page's palette and typography. */
.help-heading{padding:60px 0 32px;max-width:760px}
.help-heading h1{font-size:clamp(30px,4vw,48px);line-height:1.35;margin:14px 0}
.help-heading p{color:var(--muted)}
.help-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:55px}
.help-cards a{display:flex;align-items:center;gap:16px;padding:25px;background:white;border:1px solid var(--line);border-radius:10px;text-decoration:none}
.help-cards a:hover{border-color:var(--red)}
.help-cards span{color:var(--red);font-size:12px}.help-cards span:last-child{margin-left:auto}
.help-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:60px;padding-bottom:65px}
.help-toc{align-self:start;position:sticky;top:24px;border-left:2px solid var(--line);padding-left:18px}
.help-toc a{display:flex;align-items:center;min-height:44px;font-size:13px;text-decoration:none;padding:7px 0}
.help-article{max-width:740px;min-width:0;overflow-wrap:anywhere}
.help-article section{padding:0 0 32px;margin-bottom:28px;border-bottom:1px solid var(--line);scroll-margin-top:24px}
.help-article h2{font-size:25px;line-height:1.45;margin:0 0 22px;scroll-margin-top:24px}
.help-article p,.help-article li,.help-article dd{font-size:15px;line-height:1.9}
.help-article ul,.help-article ol{padding-left:24px}.help-article li{margin-bottom:10px}
.help-article dt{font-weight:650;margin-top:25px}.help-article dd{margin:8px 0 24px;color:var(--muted)}
.help-article a{color:var(--red)}.help-article .button{display:inline-flex;min-height:44px;align-items:center}
.nav a[aria-current=page]{color:var(--red);font-weight:700}
@media(max-width:800px){.help-heading{padding-top:35px}.help-layout{grid-template-columns:1fr;gap:30px}.help-toc{position:static;display:flex;flex-wrap:wrap;gap:0 20px}.help-cards{grid-template-columns:1fr;gap:10px;margin-bottom:30px}.help-cards a{padding:17px 20px}.help-article h2{font-size:23px}}
.legacy-links,.footer-languages{display:flex;flex-wrap:wrap;gap:10px 24px;padding:20px 0;font-size:13px}.legacy-links a,.footer-languages a{display:inline-flex;align-items:center;min-height:44px}.legacy-links a:target{outline:2px solid var(--red);outline-offset:4px}.help-article .table{overflow-x:auto}.help-article table{width:100%;border-collapse:collapse}.help-article th,.help-article td{text-align:left;vertical-align:top;padding:14px;border-bottom:1px solid var(--line);font-size:14px}.help-article th{background:var(--cream)}.card .mini{margin-bottom:0}.example-label{margin-top:12px}

.comment-screen{height:270px}.comment-screen img{height:100%;object-fit:cover;object-position:bottom}
.help-heading h1{overflow-wrap:anywhere;hyphens:auto}
html:lang(ko) .hero h1,html:lang(zh-Hant) .hero h1{letter-spacing:-1px}
html:lang(ko) body{word-break:keep-all;overflow-wrap:anywhere}
@media(max-width:800px){html:lang(ko) .hero h1{font-size:clamp(30px,8.2vw,42px)}}

.top>.nav{margin-left:auto}



/* Header controls share a 44px hit area and a 20px text/icon baseline. */
.top{gap:24px;padding:24px 0;min-height:0}
.top .brand{gap:10px;letter-spacing:0;line-height:1.2}
.top .brand>span{display:grid;gap:4px}
.top .brand small{line-height:12px;letter-spacing:.8px}
.top .brand img{display:block;flex:none}
.top>.nav{gap:24px;align-items:center}
.top>.nav>a{line-height:20px;padding:12px 0}
.language-dropdown{position:relative;padding:0;border:0;z-index:20}
.language-dropdown .language-trigger{display:grid;grid-template-columns:18px auto 12px;align-items:center;column-gap:8px;min-height:44px;margin:0;padding:11px 12px;border:1px solid var(--line);border-radius:8px;font-size:13px;line-height:20px;cursor:pointer;list-style:none;user-select:none;background:transparent}
.language-dropdown .language-trigger::-webkit-details-marker{display:none}
.language-dropdown .language-trigger>span{white-space:nowrap}
.language-dropdown svg{display:block;margin:0;flex:none}
.language-dropdown .language-trigger:hover,.language-dropdown .language-trigger[aria-expanded="true"]{background:var(--cream);border-color:#bfb5a9}
.language-dropdown .language-trigger>svg{color:var(--muted)}
.language-trigger[aria-expanded="true"] .language-chevron{transform:rotate(180deg)}
.language-panel{position:absolute;right:0;top:calc(100% + 8px);width:200px;padding:8px;background:#fffdf9;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 36px #29272216,0 2px 6px #29272208}
.language-panel a{display:grid;grid-template-columns:1fr 16px;align-items:center;column-gap:12px;min-height:44px;margin:0;padding:12px;border-radius:6px;font-size:14px;line-height:20px;text-decoration:none}
.language-panel a::after{content:"";width:10px;height:6px;justify-self:center}
.language-panel a:hover,.language-panel a:focus-visible{background:var(--cream)}
.language-panel a[aria-current=page]{color:var(--red);background:#a3212709;font-weight:650}
.language-panel a[aria-current=page]::after{border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(-45deg)}
.language-dropdown .language-trigger:focus-visible,.language-panel a:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.actions{gap:16px 24px}
.cta,.secondary{line-height:20px;gap:8px}
.cta>span,.secondary>span{display:inline-flex;align-items:center;justify-content:center;line-height:20px;flex:none}
.help-cards a{display:grid;grid-template-columns:24px 1fr 16px;align-items:center;gap:12px}
.help-cards span:last-child{margin:0;text-align:center}
@media(max-width:600px){
  .top{display:grid;grid-template-columns:1fr;gap:16px;padding:20px 0 16px}
  .top>.nav{width:100%;margin:0;justify-content:space-between;gap:16px;flex-wrap:nowrap}
  .top .brand{font-size:19px}
  .hero{padding-top:32px}
  .language-panel{width:200px}
}

.language-trigger{font-family:inherit;color:inherit}.language-panel[hidden],.language-trigger[hidden]{display:none}

:lang(ja) .eyebrow, :lang(ko) .eyebrow, :lang(zh-Hant) .eyebrow{text-transform:none}