@font-face {
  font-family:Inter;
  src:url('/assets/landing/fonts/Inter-Regular.otf') format('opentype');
  font-weight:400;
  font-display:swap
}

@font-face {
  font-family:Inter;
  src:url('/assets/landing/fonts/Inter-SemiBold.otf') format('opentype');
  font-weight:600;
  font-display:swap
}

@font-face {
  font-family:Inter;
  src:url('/assets/landing/fonts/Inter-Bold.otf') format('opentype');
  font-weight:700;
  font-display:swap
}

:root {
  color-scheme:dark;
  --bg:#101114;
  --panel:#18191d;
  --text:#f5f5f6;
  --muted:#a5a6ae;
  --line:#2b2c32;
  --accent:#beb1ff;
  --green:#a4e1af
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:35px
}

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,Arial,sans-serif;
  font-size:16px;
  line-height:1.6
}

a {
  color:inherit;
  text-decoration:none
}

button {
  font:inherit
}

img {
  max-width:100%;
  display:block
}

a,button {
  -webkit-tap-highlight-color:transparent
}

a:focus-visible,button:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:6px
}

::selection {
  background:#70629e;
  color:white
}

.wrap {
  width:min(1192px,calc(100% - 96px));
  margin-inline:auto
}

.site-header {
  height:104px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  border-bottom:1px solid var(--line)
}

.brand {
  display:flex;
  align-items:center;
  font-weight:700;
  font-size:25px;
  letter-spacing:-1px;
  line-height:1
}

.brand img {
  margin-right:10px;
  border-radius:9px
}

.brand-dot {
  color:var(--accent)
}

.site-header nav {
  display:flex;
  gap:29px;
  font-size:13px;
  color:#b3b3bd
}

.site-header nav a:hover,.text-link:hover,.site-footer a:hover {
  color:var(--accent)
}

.header-link {
  font-size:12px;
  font-weight:600;
  white-space:nowrap
}

.header-link span {
  padding-left:12px;
  font-size:20px;
  color:var(--accent)
}

.eyebrow {
  text-transform:uppercase;
  font-size:10px;
  letter-spacing:2px;
  font-weight:600;
  line-height:1.7;
  color:var(--muted);
  margin:0 0 28px
}

.status-dot {
  display:inline-block;
  width:6px;
  height:6px;
  background:var(--green);
  border-radius:50%;
  margin-right:8px;
  vertical-align:1px
}

.hero {
  min-height:730px;
  display:grid;
  grid-template-columns:1.1fr 1fr;
  align-items:center;
  gap:20px;
  padding-top:60px;
  padding-bottom:64px
}

.hero-copy {
  position:relative;
  z-index:2
}

.hero h1 {
  font-size:clamp(45px,5.2vw,72px);
  font-weight:600;
  letter-spacing:-4px;
  line-height:1.07;
  margin:0 0 30px
}

.hero h1 span {
  color:var(--accent)
}

.hero-description {
  font-size:15px;
  line-height:1.85;
  color:var(--muted);
  max-width:400px;
  margin:0 0 32px
}

.hero-actions {
  display:flex;
  align-items:center;
  gap:25px;
  flex-wrap:wrap
}

.button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:20px;
  border:1px solid transparent;
  border-radius:6px;
  padding:16px 23px;
  font-size:12px;
  font-weight:600;
  line-height:1.5;
  transition:background .2s,transform .2s
}

.button:hover {
  transform:translateY(-2px)
}

.button-primary {
  background:var(--accent);
  color:#15121f
}

.button-primary:hover {
  background:#cebdff
}

.button span {
  font-size:20px;
  line-height:1
}

.button-outline {
  border-color:var(--line);
  background:var(--panel)
}

.text-link {
  font-size:12px;
  font-weight:600
}

.text-link span {
  margin-left:9px
}

.hero-footnote {
  display:flex;
  align-items:center;
  gap:10px;
  color:#81828c;
  font-size:10px;
  margin-top:42px
}

.platform-mark {
  font-size:16px;
  color:#c7c7cf
}

.footnote-divider {
  width:1px;
  height:12px;
  background:#404149;
  margin-inline:3px
}

.hero-visual {
  height:570px;
  position:relative;
  isolation:isolate;
  min-width:0
}

.phone {
  padding:7px;
  border:1px solid #45454f;
  background:#232328;
  border-radius:33px;
  box-shadow:0 20px 55px #0005;
  overflow:hidden;
  max-width:100%
}

.phone img {
  width:100%;
  height:auto;
  border-radius:26px;
  background:#131313
}

.hero-visual .phone {
  width:238px;
  position:absolute
}

.phone-front {
  z-index:3;
  top:18px;
  right:3px;
  transform:rotate(8deg)
}

.phone-back {
  z-index:2;
  left:4px;
  top:58px;
  transform:rotate(-11deg)
}

.orbit {
  position:absolute;
  border:1px solid #50485f55;
  border-radius:50%;
  width:480px;
  height:480px;
  left:-10px;
  top:40px;
  z-index:0
}

.orbit-two {
  width:365px;
  height:365px;
  left:49px;
  top:98px;
  border-style:dashed;
  border-color:#50485f44
}

.hero-visual:before {
  content:'';
  position:absolute;
  width:320px;
  height:320px;
  left:80px;
  top:150px;
  border-radius:50%;
  background:#8c6ec81a;
  filter:blur(60px);
  z-index:0
}

.visual-label {
  position:absolute;
  color:#83808f;
  font-size:10px;
  letter-spacing:.6px
}

.visual-label-top {
  top:-17px;
  right:15px
}

.visual-caption {
  position:absolute;
  bottom:-3px;
  left:65px;
  color:#8a8794;
  font-size:10px;
  display:flex;
  align-items:center;
  gap:12px
}

.caption-line {
  width:31px;
  height:1px;
  background:#8a789e
}

.feature-strip {
  border-block:1px solid var(--line)
}

.strip-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:77px;
  font-size:12px;
  font-weight:600;
  color:#b5b4be
}

.strip-inner i {
  font-style:normal;
  font-size:18px;
  color:#746983
}

.section-space {
  padding-top:110px;
  padding-bottom:110px
}

.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:30px;
  margin-bottom:55px
}

.section-heading .eyebrow {
  margin-bottom:17px
}

h2 {
  font-size:42px;
  letter-spacing:-1.8px;
  font-weight:600;
  line-height:1.17;
  margin:0
}

.section-heading>p {
  font-size:13px;
  color:var(--muted);
  line-height:1.85;
  margin:0 0 4px;
  max-width:330px
}

.feature-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px
}

.feature {
  position:relative;
  min-height:294px;
  background:var(--panel);
  border:1px solid #2c2d33;
  border-radius:12px;
  padding:32px;
  overflow:hidden
}

.feature-wide {
  grid-column:span 2;
  background:linear-gradient(112deg,#24202e,#1b1b21 80%);
  padding-right:210px
}

.feature-number {
  position:absolute;
  top:25px;
  right:28px;
  color:#77747e;
  font-size:10px
}

.feature h3 {
  font-size:18px;
  line-height:1.35;
  font-weight:600;
  letter-spacing:-.4px;
  margin:16px 0 12px
}

.feature-wide h3 {
  font-size:26px;
  letter-spacing:-.8px;
  margin-top:3px
}

.feature p {
  font-size:12px;
  color:var(--muted);
  line-height:1.85;
  margin:0;
  max-width:400px
}

.feature-symbol {
  font-size:37px;
  color:#b8a3d6;
  line-height:1.2;
  width:42px;
  height:45px
}

.feature-wide .feature-symbol {
  position:absolute;
  font-size:145px;
  width:auto;
  height:auto;
  right:54px;
  top:65px;
  transform:rotate(14deg);
  color:#9b88b955
}

.feature-tag {
  display:inline-block;
  border:1px solid #4a4356;
  border-radius:4px;
  color:#c3b9d3;
  font-size:9px;
  line-height:1.6;
  padding:4px 8px;
  margin-top:25px
}

.symbol-purple {
  color:#c2a6e3
}

.symbol-blue {
  color:#8fa9ed
}

.symbol-gold {
  color:#d7bb78
}

.feature-leader {
  background:linear-gradient(120deg,#27231e,#1b1b20)
}

.feature-leader .feature-tag {
  border-color:#504839;
  color:#d7bb78;
  margin-top:18px
}

.mini-rings {
  width:42px;
  height:42px;
  border:4px solid #a4e1af;
  border-right-color:transparent;
  border-radius:50%;
  transform:rotate(-30deg);
  display:grid;
  place-items:center
}

.mini-rings span {
  width:24px;
  height:24px;
  border:3px solid #e8cf82;
  border-left-color:transparent;
  border-radius:50%
}

.screens-section {
  background:#15161a;
  border-block:1px solid #25262c
}

.screen-gallery {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:65px;
  padding-inline:35px
}

.screen-gallery figure {
  margin:0;
  min-width:0
}

.screen-link {
  display:block;
  position:relative;
  max-width:275px;
  margin-inline:auto
}

.screen-link .phone {
  transition:transform .25s
}

.screen-link:hover .phone {
  transform:translateY(-5px)
}

.zoom-hint {
  position:absolute;
  bottom:16px;
  right:14px;
  background:#d0c5f1;
  color:#16121f;
  width:30px;
  height:30px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:16px;
  box-shadow:0 2px 15px #0006
}

.screen-gallery figcaption {
  padding-top:26px
}

.screen-gallery figcaption>span {
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:1.5px;
  color:#8c8797
}

.screen-gallery h3 {
  font-size:17px;
  letter-spacing:-.3px;
  font-weight:600;
  margin:8px 0 5px
}

.screen-gallery p {
  font-size:11px;
  color:var(--muted);
  margin:0
}

.preview-note {
  font-size:10px;
  line-height:1.8;
  text-align:center;
  color:#919099;
  margin:40px 0 0
}

.steps {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:45px;
  list-style:none;
  padding:0;
  margin:0
}

.steps li {
  position:relative;
  border-top:1px solid #4a434e;
  padding-top:25px
}

.steps li>span {
  display:block;
  color:var(--accent);
  font-size:12px;
  font-weight:600;
  margin-bottom:24px
}

.steps h3 {
  font-size:18px;
  font-weight:600;
  letter-spacing:-.5px;
  line-height:1.4;
  margin:0 0 13px
}

.steps p {
  color:var(--muted);
  font-size:12px;
  line-height:1.9;
  max-width:280px;
  margin:0
}

.closing {
  margin-top:5px;
  margin-bottom:85px;
  border:1px solid #474051;
  border-radius:14px;
  padding:52px 60px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
  background:radial-gradient(ellipse at 90% 100%,#33283e,#201b28 75%)
}

.closing .eyebrow {
  font-size:9px;
  color:#a69bb6;
  margin-bottom:22px
}

.closing h2 {
  font-size:43px
}

.closing h2 span {
  color:#b4a7cc
}

.closing p:last-child {
  font-size:12px;
  color:var(--muted);
  margin:22px 0 0
}

.closing .button {
  white-space:nowrap
}

.site-footer {
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  min-height:105px;
  color:#93909b;
  font-size:10px
}

.site-footer .brand {
  font-size:21px;
  color:#e6e3eb
}

.site-footer>span {
  margin-right:auto;
  margin-left:30px
}

.skip-link {
  position:fixed;
  z-index:20;
  left:16px;
  top:16px;
  padding:12px;
  background:var(--accent);
  color:#111;
  transform:translateY(-200%);
  font-size:14px
}

.skip-link:focus {
  transform:translateY(0)
}

dialog {
  padding:18px;
  border:1px solid #57505f;
  background:#17171b;
  color:white;
  border-radius:16px;
  width:min(430px,calc(100% - 24px));
  max-height:95dvh
}

dialog::backdrop {
  background:#06060be8;
  backdrop-filter:blur(8px)
}

.dialog-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin-bottom:14px
}

.dialog-heading h2 {
  font-size:15px;
  letter-spacing:0;
  line-height:1.4
}

.dialog-heading button {
  background:#33333a;
  border:0;
  color:white;
  border-radius:50%;
  width:32px;
  height:32px;
  font-size:24px;
  line-height:1;
  cursor:pointer;
  flex-shrink:0
}

dialog>img {
  width:auto;
  max-height:calc(95dvh - 118px);
  max-width:100%;
  margin:auto;
  border-radius:12px
}

dialog>p {
  font-size:9px;
  text-align:center;
  color:var(--muted);
  margin:10px 0 0
}

body:has(dialog[open]) {
  overflow:hidden
}

.legal {
  max-width:830px;
  padding-block:75px 100px
}

.legal h1 {
  font-size:clamp(27px,4.4vw,48px);
  font-weight:600;
  letter-spacing:-1.8px;
  line-height:1.2;
  margin:0 0 20px;
  overflow-wrap:anywhere
}

.legal-date {
  font-size:12px;
  color:var(--muted)
}

.legal-intro {
  color:var(--muted);
  font-size:16px;
  max-width:620px
}

.legal-note {
  background:#211e2b;
  border:1px solid #474051;
  border-radius:10px;
  padding:20px 24px;
  margin:28px 0;
  font-size:13px;
  line-height:1.85;
  color:#c2bacd
}

.legal-note strong {
  display:block;
  margin-bottom:7px
}

.legal-note a,.legal section p a,.legal-inline-link {
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:3px
}

.legal-cards {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin:30px 0
}

.legal-cards>a {
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:24px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:10px;
  transition:border-color .2s
}

.legal-cards>a:hover {
  border-color:var(--accent)
}

.legal-cards span {
  font-size:9px;
  letter-spacing:1px;
  color:var(--muted);
  text-transform:uppercase
}

.legal-cards strong {
  font-size:16px;
  line-height:1.45
}

.legal-cards small {
  color:var(--muted);
  font-size:11px
}

.legal-toc,.legal-document-links {
  display:flex;
  flex-wrap:wrap;
  gap:12px 22px;
  font-size:11px;
  line-height:1.7;
  color:var(--accent);
  border-block:1px solid var(--line);
  padding-block:18px;
  margin:28px 0 40px
}

.legal-table-wrap {
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden
}

.legal-table {
  width:100%;
  border-collapse:collapse;
  text-align:left;
  font-size:13px;
  line-height:1.7
}

.legal-table th,.legal-table td {
  padding:17px 19px;
  vertical-align:top;
  border-bottom:1px solid var(--line)
}

.legal-table th {
  font-weight:600;
  width:38%
}

.legal-table td {
  color:#bbb9c2
}

.legal-table thead {
  background:var(--panel);
  color:#d4c8e5
}

.legal-table tr:last-child>* {
  border-bottom:0
}

.legal-inline-link {
  font-size:12px
}

.legal-contact {
  border:1px solid #474051;
  border-radius:12px;
  padding:28px;
  background:#201b28
}

.legal-contact .eyebrow {
  margin-bottom:13px
}

.legal-original h2 {
  margin:35px 0 15px
}

.legal-original p {
  color:#bbb9c2;
  font-size:14px;
  line-height:1.95;
  overflow-wrap:anywhere
}

.legal-original h1 {
  margin-bottom:35px
}

@media(max-width:600px) {
  .legal-cards {
    grid-template-columns:1fr
  }
  .legal-note,.legal-cards>a {
    padding:20px
  }
  .legal-intro {
    font-size:14px
  }
  .legal-toc,.legal-document-links {
    gap:12px 16px;
    font-size:10px
  }
  .legal-table {
    font-size:11px
  }
  .legal-table th,.legal-table td {
    padding:13px 11px
  }
  .legal-contact {
    padding:22px
  }
  .official-legal .legal-original h1 {
    font-size:27px
  }
  .legal-original p {
    font-size:13px
  }
  .official-legal .legal-original h2 {
    font-size:19px
  }
}

.draft-notice {
  background:#2d261c;
  border:1px solid #6b5431;
  border-radius:8px;
  color:#ddcda9;
  padding:20px 24px;
  font-size:13px;
  line-height:1.8;
  margin:35px 0 50px
}

.draft-notice strong {
  display:block;
  margin-bottom:7px
}

.legal section {
  margin:36px 0
}

.legal h2 {
  font-size:21px;
  letter-spacing:-.4px;
  line-height:1.4;
  margin-bottom:13px
}

.legal section p,.legal li {
  font-size:14px;
  color:#bbb9c2;
  line-height:1.9
}

.legal li {
  margin-bottom:8px
}

.legal strong {
  font-weight:600;
  color:#e3dce8
}

.legal .button {
  margin-top:25px
}

@media(min-width:1450px) {
  .hero {
    min-height:790px
  }
  .hero-visual {
    height:610px
  }
  .hero-visual .phone {
    width:252px
  }
  .phone-front {
    right:0
  }
  .phone-back {
    left:5px
  }
  .orbit {
    left:-4px;
    top:65px
  }
  .orbit-two {
    left:50px;
    top:122px
  }
}

@media(max-width:1150px) {
  .wrap {
    width:calc(100% - 64px)
  }
  .hero {
    gap:10px;
    min-height:680px
  }
  .hero h1 {
    font-size:56px;
    letter-spacing:-3px
  }
  .hero-visual {
    height:510px
  }
  .hero-visual .phone {
    width:205px
  }
  .phone-front {
    right:0;
    top:25px
  }
  .phone-back {
    left:0;
    top:65px
  }
  .orbit {
    width:390px;
    height:390px;
    top:80px;
    left:-5px
  }
  .orbit-two {
    width:300px;
    height:300px;
    left:40px;
    top:125px
  }
  .visual-caption {
    left:30px;
    bottom:-6px
  }
  .hero-actions {
    gap:20px
  }
  .hero-footnote {
    flex-wrap:wrap
  }
  .feature {
    padding:26px
  }
  .feature-wide {
    padding-right:150px
  }
  .feature-wide .feature-symbol {
    font-size:110px;
    right:32px;
    top:85px
  }
  .screen-gallery {
    gap:45px;
    padding-inline:10px
  }
  .site-header nav {
    gap:20px
  }
  .header-link {
    display:none
  }
}

@media(max-width:850px) {
  .hero {
    grid-template-columns:1fr 1fr
  }
  .hero h1 {
    font-size:46px;
    letter-spacing:-2.5px
  }
  .hero .eyebrow {
    font-size:9px;
    letter-spacing:1.2px
  }
  .hero-description {
    font-size:13px
  }
  .hero-visual .phone {
    width:175px
  }
  .hero-visual {
    height:445px
  }
  .phone-front {
    top:25px
  }
  .phone-back {
    top:65px;
    left:0
  }
  .orbit {
    width:300px;
    height:300px;
    top:80px;
    left:0
  }
  .orbit-two {
    width:220px;
    height:220px;
    left:40px;
    top:120px
  }
  .hero-visual:before {
    width:220px;
    height:220px;
    left:25px;
    top:135px
  }
  .hero-footnote {
    font-size:9px
  }
  .hero-footnote .footnote-divider,.hero-footnote span:last-child {
    display:none
  }
  .hero {
    min-height:610px
  }
  .visual-caption {
    left:12px;
    bottom:-20px;
    font-size:8px
  }
  .visual-label {
    font-size:8px
  }
  .feature-strip .strip-inner {
    font-size:10px;
    gap:10px
  }
  .section-space {
    padding-block:80px
  }
  h2 {
    font-size:35px
  }
  .section-heading>p {
    font-size:11px
  }
  .feature-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .feature-wide {
    grid-column:span 2;
    min-height:270px;
    padding-right:200px
  }
  .feature-wide .feature-symbol {
    right:70px;
    top:50px;
    font-size:140px
  }
  .screen-gallery {
    gap:25px;
    padding:0
  }
  .screen-gallery .phone {
    padding:5px;
    border-radius:24px
  }
  .screen-gallery .phone img {
    border-radius:19px
  }
  .screen-gallery h3 {
    font-size:14px
  }
  .screen-gallery p {
    font-size:10px
  }
  .screen-gallery figcaption>span {
    font-size:8px
  }
  .steps {
    gap:25px
  }
  .steps h3 {
    font-size:16px
  }
  .closing {
    padding:40px
  }
  .closing h2 {
    font-size:34px
  }
  .closing .button {
    font-size:10px;
    padding:14px
  }
  .site-footer>span {
    display:none
  }
}

@media(max-width:600px) {
  .wrap {
    width:calc(100% - 40px)
  }
  .site-header {
    height:82px;
    gap:15px
  }
  .brand {
    font-size:22px
  }
  .brand img {
    width:30px;
    height:30px
  }
  .site-header nav {
    gap:16px;
    font-size:10px
  }
  .site-header nav a:last-child {
    display:none
  }
  .hero {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:35px;
    padding-block:45px 60px;
    min-height:0
  }
  .hero-copy {
    max-width:420px
  }
  .hero h1 {
    font-size:clamp(39px,10.7vw,60px);
    line-height:1.08;
    letter-spacing:-2.4px;
    margin-bottom:24px
  }
  .hero .eyebrow {
    font-size:8px;
    letter-spacing:1.4px;
    margin-bottom:24px
  }
  .hero-description {
    font-size:13px;
    line-height:1.9;
    max-width:345px;
    margin-bottom:25px
  }
  .hero-actions {
    gap:20px
  }
  .button {
    font-size:11px;
    padding:15px 19px;
    gap:15px
  }
  .hero-actions>.text-link {
    font-size:10px
  }
  .hero-footnote {
    margin-top:25px;
    font-size:9px
  }
  .hero-visual {
    width:min(370px,100%);
    height:470px;
    margin:10px auto 0
  }
  .hero-visual .phone {
    width:193px
  }
  .phone-front {
    right:0;
    top:5px
  }
  .phone-back {
    left:0;
    top:40px
  }
  .orbit {
    width:320px;
    height:320px;
    left:5px;
    top:50px
  }
  .orbit-two {
    width:240px;
    height:240px;
    left:45px;
    top:90px
  }
  .visual-label-top {
    top:-25px;
    right:10px
  }
  .visual-caption {
    bottom:-10px;
    left:30px;
    font-size:9px
  }
  .hero-visual:before {
    width:260px;
    height:260px;
    left:40px;
    top:80px
  }
  .strip-inner {
    display:grid;
    grid-template-columns:1fr 1fr;
    padding-block:23px;
    gap:14px;
    font-size:10px
  }
  .strip-inner i {
    display:none
  }
  .strip-inner span:before {
    content:'✦';
    font-size:11px;
    color:#837094;
    margin-right:9px
  }
  .section-space {
    padding-block:64px
  }
  .section-heading {
    display:block;
    margin-bottom:32px
  }
  .section-heading .eyebrow {
    font-size:9px;
    margin-bottom:17px
  }
  h2 {
    font-size:33px;
    letter-spacing:-1.3px
  }
  .section-heading>p {
    font-size:12px;
    line-height:1.85;
    margin-top:22px
  }
  .feature-grid {
    display:block
  }
  .feature {
    margin-top:13px;
    min-height:235px;
    padding:26px
  }
  .feature-wide {
    padding-right:85px;
    min-height:285px
  }
  .feature-wide h3 {
    font-size:24px;
    position:relative;
    z-index:1
  }
  .feature-wide .feature-symbol {
    font-size:95px;
    top:110px;
    right:15px
  }
  .feature-wide p {
    position:relative;
    z-index:1
  }
  .feature h3 {
    font-size:20px;
    margin-top:18px
  }
  .feature-wide h3 {
    margin-top:10px
  }
  .feature p {
    font-size:12px
  }
  .feature-number {
    top:23px;
    right:24px
  }
  .feature-tag {
    margin-top:20px
  }
  .feature-leader {
    min-height:265px
  }
  .screen-gallery {
    grid-template-columns:1fr;
    gap:46px
  }
  .screen-gallery figure {
    display:grid;
    grid-template-columns:1fr .9fr;
    gap:25px;
    align-items:center
  }
  .screen-link {
    max-width:235px;
    width:100%
  }
  .screen-gallery figure:nth-child(2) .screen-link {
    order:2
  }
  .screen-gallery figure:nth-child(2) figcaption {
    order:1
  }
  .screen-gallery .phone {
    padding:5px;
    border-radius:23px
  }
  .screen-gallery .phone img {
    border-radius:18px
  }
  .screen-gallery figcaption {
    padding:0
  }
  .screen-gallery h3 {
    font-size:18px;
    line-height:1.3;
    margin-block:10px
  }
  .screen-gallery p {
    font-size:11px;
    line-height:1.8
  }
  .screen-gallery figcaption>span {
    font-size:8px;
    letter-spacing:1px
  }
  .zoom-hint {
    width:24px;
    height:24px;
    font-size:14px;
    bottom:10px;
    right:9px
  }
  .preview-note {
    font-size:9px;
    text-align:left;
    margin-top:32px
  }
  .steps {
    display:block
  }
  .steps li {
    padding-top:20px;
    padding-left:38px;
    margin-top:26px
  }
  .steps li>span {
    position:absolute;
    left:0;
    top:22px;
    font-size:10px
  }
  .steps h3 {
    font-size:18px
  }
  .steps p {
    font-size:12px;
    max-width:100%
  }
  .closing {
    display:block;
    padding:30px 25px;
    margin-bottom:50px
  }
  .closing .eyebrow {
    font-size:8px;
    letter-spacing:1px
  }
  .closing h2 {
    font-size:32px
  }
  .closing .button {
    margin-top:27px;
    font-size:11px;
    padding:15px 20px
  }
  .site-footer {
    min-height:115px;
    flex-wrap:wrap;
    gap:15px;
    padding-block:25px;
    font-size:9px
  }
  .site-footer .brand {
    font-size:21px
  }
  .legal {
    padding-block:45px 60px
  }
  .legal h1 {
    font-size:clamp(24px,6.1vw,36px);
    letter-spacing:-1px
  }
  .legal .eyebrow {
    font-size:8px;
    letter-spacing:1px
  }
  .legal-page .site-header .text-link {
    font-size:10px
  }
  .draft-notice {
    padding:18px;
    font-size:12px;
    margin-block:26px 35px
  }
  .legal h2 {
    font-size:19px
  }
  .legal section p,.legal li {
    font-size:13px
  }
  .legal ul {
    padding-left:20px
  }
}

@media(max-width:360px) {
  .wrap {
    width:calc(100% - 32px)
  }
  .brand {
    font-size:20px
  }
  .site-header nav {
    gap:12px;
    font-size:9px
  }
  .hero-visual {
    height:420px
  }
  .hero-visual .phone {
    width:169px
  }
  .hero h1 {
    font-size:38px
  }
  .hero-actions {
    gap:16px
  }
  .hero-actions>.text-link {
    font-size:9px
  }
  .orbit {
    width:270px;
    height:270px;
    left:5px
  }
  .orbit-two {
    width:210px;
    height:210px;
    left:35px;
    top:80px
  }
  .screen-gallery figure {
    gap:18px
  }
  .screen-gallery h3 {
    font-size:16px
  }
  .screen-gallery figcaption>span {
    font-size:7px
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    transition:none!important
  }
}

@media(max-width:600px) {
  .hero-visual .phone {
    width:clamp(145px,46vw,180px)
  }
  .hero-visual .phone-back {
    left:24px
  }
  .hero-visual .phone-front {
    right:26px
  }
  .hero-visual:before {
    width:70%;
    left:15%
  }
}