:root,
[data-theme="light"] {
  --bg:#f5f7f6; --bg-2:#e8efeb; --surface:#ffffff;
  --text:#142822; --text-soft:#52645c;
  --accent:#176b60; --accent-2:#1f8577; --accent-ink:#ffffff;
  --accent-text:#176b60;
  --line:#d5ded8;
  --verified:#176b60; --caution:#a34208; --caution-text:#7a3309;
  --table:#184c8f; --table-line:#ffffff; --ball:#ffad66;
  --blue-soft:#e8f0ff; --on-blue-soft:#173e78;
  --orange-soft:#fff0df; --on-orange-soft:#7a3309;
  --halo: radial-gradient(58% 55% at 80% -10%,
            color-mix(in oklab, var(--accent) 12%, transparent), transparent 70%);
}


[data-theme="dark"] {
  --bg:#101c19; --bg-2:#1b2b26; --surface:#182722;
  --text:#edf5f0; --text-soft:#b2c3ba;
  --accent:#72c9b8; --accent-2:#8dd6c7; --accent-ink:#10251f;
  --accent-text:#72c9b8;
  --line:#34483e;
  --verified:#72c9b8; --caution:#ffad66; --caution-text:#ffddbb;
  --chip-bg:#1b2b26;
  --table:#184c8f; --table-line:#ffffff; --ball:#ffad66;
  --blue-soft:#182f4b; --on-blue-soft:#dce9ff;
  --orange-soft:#3b2818; --on-orange-soft:#ffddbb;
  --halo: radial-gradient(58% 55% at 80% -10%,
            color-mix(in oklab, var(--accent) 18%, transparent), transparent 72%);
}


@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg:#101c19; --bg-2:#1b2b26; --surface:#182722;
    --text:#edf5f0; --text-soft:#b2c3ba;
    --accent:#72c9b8; --accent-2:#8dd6c7; --accent-ink:#10251f;
    --accent-text:#72c9b8;
    --line:#34483e;
    --verified:#72c9b8; --caution:#ffad66; --caution-text:#ffddbb;
    --chip-bg:#1b2b26;
    --blue-soft:#182f4b; --on-blue-soft:#dce9ff;
    --orange-soft:#3b2818; --on-orange-soft:#ffddbb;
    --halo: radial-gradient(58% 55% at 80% -10%,
              color-mix(in oklab, var(--accent) 18%, transparent), transparent 72%);
  }
}


.rl-col { width: min(100% - 2.5rem, 46rem); margin-inline: auto; }


.rl-table { position: relative; height: 10px; border-radius: 3px; background: var(--table);
  margin: clamp(2.5rem, 6vw, 4rem) auto 0; width: min(100% - 2.5rem, 46rem); }
.rl-table::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px;
  margin-left: -1px; background: var(--table-line); opacity: .9; }
.rl-table::after { content: ""; position: absolute; top: -9px; left: 68%; width: 12px; height: 12px;
  border-radius: 50%; background: var(--ball); box-shadow: 0 1px 2px rgb(0 0 0 / .25); }


.rl-hero { padding: clamp(3.5rem, 8vw, 7rem) 0 0; }
.rl-hero h1 { margin-bottom: var(--sp-3); max-width: 17ch; }
.rl-lede { font-size: var(--step-1); line-height: var(--lh-snug); color: var(--text-soft);
  max-width: 38ch; margin-bottom: var(--sp-4); }
.rl-cta, .rl-cta .launch-live, .rl-cta .launch-prelaunch { display: flex; flex-wrap: wrap;
  gap: 1rem; align-items: center; }
.rl-coming { color: var(--text-soft); font-size: var(--step-0); }
.rl-note { font-size: var(--step--1); color: var(--text-soft); margin-top: var(--sp-3);
  max-width: var(--measure); }
.rl-store { display: inline-flex; align-items: center; gap: .7rem; text-align: left;
  padding: .6rem 1.15rem; border-radius: 12px; background: var(--text); color: var(--bg);
  text-decoration: none; transition: transform var(--dur-1) var(--ease-out); }
.rl-store:hover { color: var(--bg); transform: translateY(-1px); }
.rl-store small { display: block; font-size: 10px; font-weight: 500; letter-spacing: .03em;
  line-height: 1.15; }
.rl-store b { display: block; font-size: 16px; font-weight: 650; line-height: 1.15; }


[data-launch="prelaunch"] .launch-live { display: none; }
[data-launch="live"] .launch-prelaunch { display: none; }
[data-store-badge="prelaunch"], [data-store-badge="absent"] { display: none; }


.rl-figure { display: grid; justify-items: center; margin: var(--sp-4) 0 0; }
.rl-figure .device { --rot: 0deg; }
.rl-figure .device.dv-iphone { --dv-scale: .66; }
.rl-figure .device.dv-ipad { --dv-scale: .8; }
.rl-figure figcaption { margin-top: var(--sp-2); font-size: var(--step--1); color: var(--text-soft);
  text-align: center; max-width: 40ch; }


.rl-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4);
  padding: var(--sp-4) 0; margin-top: var(--sp-5); border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line); }
.rl-step { display: grid; gap: .6rem; align-content: start; }
.rl-idx { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--accent-text); }
.rl-step h3 { font-size: var(--step-1); }
.rl-step p { margin: 0; font-size: var(--step--1); line-height: var(--lh-body); color: var(--text-soft); }


.rl-count { display: grid; gap: .5rem; margin: var(--sp-4) 0 0; padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius); background: var(--blue-soft); color: var(--on-blue-soft); }
.rl-count b { font-size: var(--step-2); line-height: 1.1; }
.rl-count span { font-size: var(--step--1); }


.rl-limit { margin: var(--sp-3) 0 0; padding: var(--sp-3) var(--sp-4); border-radius: var(--radius);
  background: var(--orange-soft); color: var(--on-orange-soft); font-size: var(--step--1); }
.rl-limit b { display: block; margin-bottom: .25rem; }


.rl-section { padding: clamp(3.5rem, 8vw, 6.5rem) 0 0; }
.rl-section + .faq { margin-top: 0; }
.rl-close { padding: clamp(3rem, 7vw, 5rem) 0 clamp(3.5rem, 8vw, 6.5rem); display: grid;
  gap: var(--sp-3); justify-items: start; }
.rl-close h2 { margin: 0; }


:lang(ja), :lang(zh) { line-break: strict; }
:lang(ja) h1, :lang(ja) h2, :lang(ja) h3, :lang(ja) .rl-lede { word-break: auto-phrase; }
:lang(ja) .rl-hero h1, :lang(zh) .rl-hero h1, :lang(ko) .rl-hero h1 { max-width: 16em; }
:lang(ja) .rl-lede, :lang(zh) .rl-lede { max-width: 30em; }
:lang(ko) p, :lang(ko) h1, :lang(ko) h2, :lang(ko) h3, :lang(ko) summary { word-break: keep-all; }


@media (max-width: 860px) {
  .nav nav { flex: 1 0 100%; margin-left: 0; gap: 1rem 1.1rem; }
}
@media (max-width: 720px) {
  .rl-steps { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  .rl-figure .device.dv-ipad { --dv-scale: .78; }
}
@media (max-width: 560px) {
  .rl-figure .device.dv-iphone { --dv-scale: .6; }
  .rl-figure .device.dv-ipad { --dv-scale: .56; }
}
@media (max-width: 440px) {
  
  .site-langs .sl-flag { width: 31px; }
  
  footer .links { flex-wrap: wrap; gap: .4rem 1.2rem; }
  .rl-hero h1 { font-size: 2.3rem; }
  .rl-figure .device.dv-iphone { --dv-scale: .56; }
  .rl-figure .device.dv-ipad { --dv-scale: .46; }
}
@media (prefers-reduced-motion: reduce) {
  .rl-store { transition: none; }
}


body:has(.rl-hero) main{ max-width:none; padding-inline:0; }
body:has(.rl-hero) .site-langs-wrap{ position:absolute; top:0; left:0; right:0; z-index:40; max-width:none; padding:0; }
body:has(.rl-hero) > header.nav{ position:absolute; top:3.3rem; left:0; right:0; z-index:40; margin-inline:auto; --text:#edf5f0; --text-soft:#b7c9d6; }
body:has(.rl-hero) > header.nav .brand{ color:#fff; }
body:has(.rl-hero){ position:relative; }


.site-langs-wrap{ max-width:none; padding:0; background:#07121a; border-bottom:1px solid #1f4660; }
.site-langs{ max-width:72rem; margin-inline:auto; padding:.5rem 1.25rem; gap:.35rem; flex-wrap:wrap; justify-content:flex-start; }
.site-langs .sl-flag{ width:auto; height:2.25rem; display:inline-flex; align-items:center; gap:.5rem; padding:0 .8rem 0 .6rem; opacity:1; border-radius:4px;
  background:#0d2230; border:1px solid #1f4660; color:#cfe6f3; font:600 .82rem/1 var(--mono); letter-spacing:.01em; white-space:nowrap; text-decoration:none;
  box-shadow:inset 0 -2px 0 #05101a; transition:background .15s, border-color .15s, color .15s; }
.site-langs .sl-flag::after{ content:attr(aria-label); position:static; width:auto; height:auto; background:none; }
.site-langs .sl-flag svg{ width:20px; height:13.5px; border-radius:2px; flex:none; box-shadow:0 0 0 1px #0006; }
.site-langs a.sl-flag:hover, .site-langs a.sl-flag:focus-visible{ border-color:#ff9a4d; color:#fff; }
.site-langs .sl-cur{ background:#ff9a4d; border-color:#ff9a4d; color:#1a0d03; box-shadow:inset 0 -2px 0 #b8611c; }
.app-langs{ margin-top:1.6rem; }
.app-langs-lead{ font:600 .72rem/1.2 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--accent-text); }
.rl-hero .app-langs-flags{ gap:.35rem; }
.rl-hero .app-langs .lang-flag{ width:auto; height:auto; overflow:visible; box-shadow:none; display:inline-flex; align-items:center; gap:.4rem; padding:.28rem .6rem .28rem .45rem;
  border-radius:3px; background:#0d2230; border:1px solid #1f4660; font:600 .74rem/1.1 var(--mono); color:#cfe6f3; }
.rl-hero .app-langs .lang-flag::after{ content:attr(aria-label); }
.rl-hero .app-langs .lang-flag svg{ width:18px; height:12px; border-radius:2px; }
@media (max-width:860px){
  .site-langs{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
  .site-langs::-webkit-scrollbar{ display:none; }
}


.rl-hero.rl-col{ width:100%; max-width:none; margin:0; }
.rl-hero{ --text:#edf5f0; --text-soft:#b7c9d6; --bg:#0a1620; --surface:#122a3a; --line:#24455b; --accent:#ff9a4d; --accent-2:#ffb27a; --accent-ink:#1a0d03; --accent-text:#ffb27a;
  position:relative; isolation:isolate; overflow:hidden; color:var(--text);
  background:radial-gradient(70rem 34rem at 72% -8%, rgba(96,164,255,.30), transparent 62%), radial-gradient(40rem 26rem at 0% 100%, rgba(255,154,77,.12), transparent 60%), linear-gradient(180deg,#0a1620,#0d2231);
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); column-gap:clamp(1.5rem,4vw,4rem); align-content:center; align-items:start;
  padding:clamp(9rem,17vh,12rem) max(1.25rem, calc((100% - 72rem)/2 + 1.25rem)) clamp(4rem,8vh,6rem); }
.rl-hero > *{ grid-column:1; position:relative; z-index:2; }
.rl-hero .eyebrow{ font:600 .74rem/1.2 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:#ffb27a; justify-self:start; }
.rl-hero h1{ font-size:clamp(2.6rem,4.9vw,4.7rem); font-weight:850; line-height:1; letter-spacing:-.045em; max-width:12ch; margin:1.1rem 0 1.4rem; color:#fff; }
.rl-hero .rl-lede{ color:#c3d4df; }
.rl-hero .btn.primary{ background:#ff9a4d; color:#1a0d03; border-color:#ff9a4d; box-shadow:0 12px 28px -12px #ff9a4d; }
.rl-hero .rl-store{ background:#edf5f0; color:#0a1620; }
.rl-hero .rl-note{ color:#9fb6c5; }
.rl-arena{ grid-column:2; grid-row:1 / span 8; position:relative; align-self:center; min-height:26rem; }
.rl-lamp{ position:absolute; left:50%; top:-14rem; width:42rem; height:34rem; transform:translateX(-50%); pointer-events:none; z-index:0;
  background:conic-gradient(from 180deg at 50% 0, transparent 160deg, rgba(190,220,255,.16) 172deg, rgba(190,220,255,.16) 188deg, transparent 200deg); filter:blur(14px); }
.rl-stage{ position:relative; z-index:1; }
.rl-tbl{ display:block; width:100%; height:auto; transform:perspective(1100px) rotateX(52deg) rotateZ(-9deg) scale(.96); transform-origin:50% 60%;
  filter:drop-shadow(0 40px 30px rgba(0,0,0,.55)); overflow:visible; }
.tb-leg{ fill:#0c1f30; } .tb-edge{ fill:none; stroke:#fff; stroke-width:5; stroke-opacity:.92; }
.tb-line{ stroke:#fff; stroke-width:3; stroke-opacity:.9; } .tb-net{ opacity:.85; }
.tb-arc{ fill:none; stroke:#ffd0a5; stroke-width:2.5; stroke-dasharray:3 9; stroke-linecap:round; opacity:.7; }
.tb-shadow{ fill:#000; opacity:.35; } .tb-ball{ fill:#ff9a4d; stroke:#fff3e6; stroke-width:2; filter:drop-shadow(0 0 10px rgba(255,154,77,.9)); }
.rl-timeline{ display:flex; gap:4px; height:1.7rem; margin:1.6rem 4% 0; padding:.25rem; border-radius:8px; background:#0b1d2b; border:1px solid #1f4660; }
.rl-timeline i{ display:block; border-radius:3px; background:#3ec3aa; }
.rl-timeline i.lost{ background:#ff9a4d; box-shadow:0 0 12px rgba(255,154,77,.55); }
.rl-hero .rl-figure{ position:absolute; right:max(1rem, calc((100vw - 72rem)/2)); bottom:clamp(2rem,5vh,4rem); grid-column:2; margin:0; z-index:3; filter:drop-shadow(0 30px 34px rgba(0,0,0,.6)); }
.rl-hero .rl-figure .device.dv-iphone{ --dv-scale:.46; --rot:3deg; }
@media (prefers-reduced-motion:no-preference){
  .rl-timeline i{ animation:rl-bar .7s calc(var(--i)*45ms + .2s) cubic-bezier(.2,.9,.3,1) both; transform-origin:left; }
  .rl-timeline i.lost{ animation-name:rl-bar, rl-pulse; animation-duration:.7s, 2.6s; animation-delay:calc(var(--i)*45ms + .2s), 1.4s; animation-iteration-count:1, infinite; }
  .rl-hero > *:not(.rl-arena):not(.rl-figure){ animation:rl-rise .8s cubic-bezier(.2,.8,.2,1) both; }
  @keyframes rl-bar{ from{ transform:scaleY(.1); opacity:0; } to{ transform:none; opacity:1; } }
  @keyframes rl-pulse{ 50%{ box-shadow:0 0 22px rgba(255,154,77,.9); } }
  @keyframes rl-rise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
}


.rl-steps{ width:min(100% - 2.5rem, 72rem); margin-top:clamp(3rem,7vw,5rem); }
.rl-step{ position:relative; padding:1.6rem 1.5rem 1.5rem; border-radius:14px; background:var(--surface); border:1px solid var(--line); overflow:hidden; }
.rl-step::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--accent); }
.rl-idx{ font:850 3.4rem/1 var(--sans); letter-spacing:-.06em; color:color-mix(in srgb,var(--accent) 35%,transparent); }
.rl-step:nth-child(2) .rl-idx{ color:color-mix(in srgb,#ff9a4d 55%,transparent); }
.rl-step h3{ font-size:var(--step-1); font-weight:800; letter-spacing:-.02em; }
.rl-table{ width:min(100% - 2.5rem,72rem); height:14px; }


@media (min-width:900px){
  .rl-section.rl-col{ width:min(100% - 2.5rem, 72rem); display:grid; grid-template-columns:minmax(0,1fr) 22rem; column-gap:clamp(2rem,6vw,5rem); align-items:start; }
  .rl-section > *{ grid-column:1; }
  .rl-section > .rl-figure{ grid-column:2; grid-row:1 / span 8; margin:0; align-self:center; position:sticky; top:3rem; }
  .rl-section:nth-of-type(even) > *{ grid-column:2; }
  .rl-section:nth-of-type(even) > .rl-figure{ grid-column:1; }
  .rl-section:nth-of-type(even){ grid-template-columns:22rem minmax(0,1fr); }
  .rl-section h2{ font-size:clamp(2rem,3.6vw,3.1rem); font-weight:800; letter-spacing:-.035em; }
  .rl-section > .eyebrow{ font:600 .74rem/1.2 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--accent-text); }
  .rl-section .rl-figure .device.dv-iphone{ --dv-scale:.6; --rot:0deg; }
  .rl-section .rl-figure .device.dv-ipad{ --dv-scale:.5; }
}
.rl-count{ position:relative; background:#0d2231; color:#fff; border:1px solid #24455b; border-left:6px solid #ff9a4d; border-radius:12px; }
.rl-count b{ font-size:clamp(1.6rem,3vw,2.3rem); font-weight:850; letter-spacing:-.03em; color:#ff9a4d; }
.rl-count span{ color:#b7c9d6; }

@media (max-width:899px){
  .rl-hero{ grid-template-columns:minmax(0,1fr); padding-top:10.5rem; }
  .rl-arena{ grid-column:1; grid-row:auto; min-height:0; order:20; margin-top:2rem; }
  .rl-hero > .rl-figure{ position:relative; right:auto; bottom:auto; grid-column:1; order:21; justify-self:end; margin:-7rem 0 0; }
  .rl-hero .rl-figure .device.dv-iphone{ --dv-scale:.4; }
  .rl-lamp{ display:none; }
  body:has(.rl-hero) > header.nav{ top:3.3rem; }
}
.rl-section > h2{ margin:.7rem 0 1.1rem; }
.rl-section > p{ margin:0 0 1rem; color:var(--text-soft); line-height:1.65; max-width:36rem; }



body:has(.rl-hero) main{ counter-reset:rls; overflow-x:clip; }
.rl-section.rl-col{ --band:#0a1620; --text:#edf5f0; --text-soft:#b7c9d6; --accent-text:#ffb27a; --surface:#122a3a; --line:#24455b;
  position:relative; isolation:isolate; color:var(--text); padding-block:clamp(3.5rem,7vw,5.5rem) 0;
  box-shadow:0 0 0 100vmax var(--band); clip-path:inset(0 -100vmax); background:var(--band); margin-top:0; }
.rl-section.rl-col::before{ counter-increment:rls; content:counter(rls,decimal-leading-zero); position:absolute; z-index:-1; right:-.04em; top:.05em;
  font:900 clamp(9rem,26vw,22rem)/.8 var(--sans); letter-spacing:-.07em; color:transparent; -webkit-text-stroke:2px rgba(255,255,255,.08); pointer-events:none; }
#label.rl-col, #practice.rl-col, #privacy.rl-col{ --band:#12417a; --surface:#0e3564; --line:#2f61a0; --text-soft:#c9dcf3; }
#label.rl-col::before, #practice.rl-col::before, #privacy.rl-col::before{ -webkit-text-stroke-color:rgba(255,255,255,.14); }
#privacy.rl-col{ padding-bottom:clamp(3.5rem,7vw,5.5rem); }
.rl-section h2{ color:#fff; }
.rl-section .eyebrow{ color:#ffb27a; }
.rl-section a{ color:#ffd0a5; }
.rl-limit{ background:rgba(255,154,77,.14); color:#ffddbb; border:1px solid rgba(255,154,77,.4); }
.rl-count{ background:rgba(0,0,0,.28); }
.rl-table{ display:none; }
.rl-steps{ margin-bottom:clamp(3rem,6vw,4.5rem); }
.rl-section > .rl-figure{ margin-bottom:-11rem; }
.rl-section#devices > .rl-figure{ margin-bottom:-6rem; }
@media (min-width:900px){
  .rl-section.rl-col{ grid-template-columns:minmax(0,1fr) 20rem; align-items:start; }
  .rl-section > .rl-figure{ position:relative; top:auto; align-self:end; grid-row:1 / span 8; margin-block:0 -11rem; }
  .rl-section:nth-of-type(even) > *{ grid-column:1; }
  .rl-section:nth-of-type(even) > .rl-figure{ grid-column:2; }
  .rl-section:nth-of-type(even){ grid-template-columns:minmax(0,1fr) 20rem; }
  #label.rl-col, #practice.rl-col{ grid-template-columns:20rem minmax(0,1fr); }
  #label.rl-col > *, #practice.rl-col > *{ grid-column:2; }
  #label.rl-col > .rl-figure, #practice.rl-col > .rl-figure{ grid-column:1; }
  .rl-section .rl-figure .device.dv-iphone{ --dv-scale:.62; }
  #devices .rl-figure{ grid-column:2; }
  .rl-section:not(#privacy){ min-height:34rem; }
}
@media (max-width:899px){
  .rl-section.rl-col{ display:block; padding-inline:0; }
  .rl-section.rl-col{ padding-bottom:3.5rem; }
  .rl-section > .rl-figure{ margin:2rem 0 1rem; }
}


@media (max-width:860px){
  body .site-langs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.3rem; overflow:visible; flex-wrap:wrap; padding:.5rem .75rem; }
  .site-langs .sl-flag{ height:2.2rem; padding:0 .5rem; justify-content:flex-start; font-size:.72rem; min-width:0; overflow:hidden; }
  .site-langs .sl-flag::after{ overflow:hidden; text-overflow:ellipsis; }
  body:has(.rl-hero) > header.nav{ top:7.4rem; }
  .rl-hero{ padding-top:14.5rem; }
}
@media (max-width:440px){ .site-langs .sl-flag{ width:auto; } }


@media (min-width:900px){
  .rl-hero{ grid-template-columns:minmax(0,1fr); justify-items:center; text-align:center; padding-bottom:clamp(3rem,6vh,5rem); }
  .rl-hero > *{ grid-column:1; }
  .rl-hero h1{ font-size:clamp(3.2rem,7.4vw,7rem); max-width:13ch; margin-inline:auto; letter-spacing:-.05em; }
  .rl-hero .rl-lede{ margin-inline:auto; max-width:44ch; }
  .rl-hero .rl-cta, .rl-hero .rl-note{ justify-content:center; margin-inline:auto; }
  .rl-hero .rl-note{ max-width:46ch; }
  .rl-hero .app-langs{ align-items:center; }
  .rl-arena{ grid-column:1; grid-row:auto; width:min(64rem,92%); margin-top:2.5rem; min-height:0; }
  .rl-hero .rl-figure{ right:max(1rem, calc((100vw - 76rem)/2)); bottom:clamp(1.5rem,3vh,2.5rem); }
  .rl-hero .rl-figure .device.dv-iphone{ --dv-scale:.5; }
}
@media (min-width:900px){ .rl-hero .eyebrow{ justify-self:center; } }