/* Enhancer Fitness marketing. Motion is progressive; all content is visible without JS. */
:root {
  --ink:#1a1517;
  --ink-2:#584e51;
  --ink-3:#705f65;
  --paper:#faf8f9;
  --wash:#f2ebed;
  --line:#e0d4d8;
  --dark:#120f10;
  --accent:#a8083f;
  --accent-d:#8f0735;
  /* The crimson reads on white and on the brand panels; on near-black it does
     not, so text and strokes on dark surfaces use this lighter tint instead. */
  --accent-light:#ff8fb1;
  --script:'IBM Plex Sans';
  --sans:var(--script),'IBM Plex Sans',system-ui,sans-serif;
  --display:'Barlow Condensed','Arial Narrow',sans-serif;
  --wrap:1280px
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:100px
}
body {
  margin:0;
  font:16px/1.6 var(--sans);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased
}
h1,h2,h3,p {
  margin:0
}
h1,h2,h3 {
  line-height:1.12;
  letter-spacing:-.025em
}
ul,ol {
  list-style:none;
  padding:0;
  margin:0
}
button,select {
  font:inherit
}
button {
  cursor:pointer
}
a {
  color:inherit
}
img,svg {
  max-width:100%
}
:focus-visible {
  outline:3px solid #b80f47;
  outline-offset:5px
}
::selection {
  background:var(--accent);
  color:#fff
}
[hidden] {
  display:none!important
}
.wrap {
  max-width:var(--wrap);
  padding-inline:48px;
  margin-inline:auto;
  width:100%
}
.wrap.narrow {
  max-width:850px
}
.skip {
  position:fixed;
  left:16px;
  top:-100px;
  z-index:100;
  background:var(--accent);
  padding:12px 20px;
  color:#fff
}
.skip:focus {
  top:12px
}
.scroll-progress {
  position:fixed;
  top:0;
  left:0;
  height:3px;
  width:100%;
  transform:scaleX(0);
  transform-origin:left;
  background:var(--accent);
  z-index:80;
  pointer-events:none
}
.nav {
  position:sticky;
  top:0;
  z-index:50;
  background:#120f10f5;
  color:#f6f0f2;
  border-bottom:1px solid #ffffff16;
  backdrop-filter:blur(18px)
}
.nav-in {
  min-height:88px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px
}
.brand {
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:'IBM Plex Sans',sans-serif;
  font-size:26px;
  font-weight:700;
  letter-spacing:-1.5px;
  text-decoration:none;
  white-space:nowrap
}
.mark {
  position:relative;
  display:inline-block;
  width:24px;
  height:29px;
  background:currentColor;
  clip-path:none;
  flex-shrink:0;
  -webkit-mask:url(/mark.svg) center/contain no-repeat;
  mask:url(/mark.svg) center/contain no-repeat
}
.nav-links {
  display:flex;
  align-items:center;
  gap:26px
}
.nav-links a {
  font-size:13px;
  text-decoration:none;
  color:#c9c0c3;
  white-space:nowrap
}
.nav-links a:hover {
  color:var(--accent-light)
}
.nav-cta {
  display:flex;
  align-items:center;
  gap:20px
}
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  padding:12px 22px;
  border:1px solid transparent;
  border-radius:3px;
  font-weight:600;
  font-size:14px;
  line-height:1.4;
  text-decoration:none;
  transition:background .2s,transform .2s,box-shadow .2s;
  color:inherit;
  white-space:normal;
  text-align:center
}
.btn.solid {
  background:var(--accent);
  color:#fff;
  border-color:var(--accent)
}
.btn.solid:hover {
  background:#a8083f;
  transform:translateY(-2px);
  box-shadow:0 8px 25px #c0144f20
}
.btn.ghost {
  background:transparent;
  border-color:var(--line)
}
.btn.ghost:hover {
  background:#80808010
}
.nav .btn.ghost {
  border:0;
  padding-inline:0;
  color:#f3ebee
}
.btn.lg {
  padding:17px 25px;
  font-size:15px
}
.btn.w {
  width:100%;
  margin-top:auto
}
.btn span[aria-hidden] {
  font-size:20px;
  line-height:1
}
.lang {
  position:relative
}
.lang>summary {
  list-style:none;
  display:flex;
  align-items:center;
  gap:6px;
  padding:10px 0;
  cursor:pointer;
  color:#c9c0c3
}
.lang>summary::-webkit-details-marker {
  display:none
}
.lang>summary::marker {
  content:''
}
.lang-now {
  font-size:12px
}
.lang[open] .chev {
  transform:rotate(180deg)
}
.lang-menu {
  position:absolute;
  top:100%;
  inset-inline-end:0;
  min-width:210px;
  padding:8px;
  background:#231c1e;
  border:1px solid #4a3b40;
  box-shadow:0 15px 40px #0005;
  border-radius:6px;
  display:grid;
  gap:2px
}
.lang:not([open]) .lang-menu {
  display:none
}
.lang-menu a {
  display:flex;
  flex-direction:column;
  padding:9px 12px;
  text-decoration:none;
  border-radius:3px
}
.lang-menu a:hover,.lang-menu a.on {
  background:#a8083f18
}
.endonym {
  color:#f6f2f3;
  font-size:14px
}
.exonym {
  font:11px/1.5 'IBM Plex Sans',sans-serif;
  color:#c3a6b0
}
.lang-menu a>span {
  text-align:left
}
[dir=rtl] .lang-menu a>span {
  text-align:right
}
.menu-toggle {
  display:none;
  background:transparent;
  color:inherit;
  border:1px solid #604d53;
  padding:8px;
  border-radius:3px;
  font-size:12px
}
.hero {
  isolation:isolate;
  position:relative;
  background:var(--accent);
  color:#fff;
  overflow:hidden;
  min-height:730px
}
.hero-media {
  position:absolute;
  inset:0;
  z-index:-2;
  will-change:transform;
  pointer-events:none
}
.hero-media img {
  display:none
}
.hero::before {
  content:none
}
.hero-lines {
  display:none
}
.hero-lines::after {
  content:none
}
.hero-in {
  min-height:646px;
  position:relative;
  display:flex;
  align-items:center;
  padding-top:58px;
  padding-bottom:84px
}
.hero-copy {
  width:57%;
  max-width:665px
}
.eyebrow {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  line-height:1.7;
  color:var(--accent-d);
  margin-bottom:20px
}
.hero .eyebrow {
  color:#fbe3ea;
  letter-spacing:.14em;
  font-size:10px
}
.live-dot {
  width:6px;
  height:6px;
  background:#fff;
  border-radius:50%;
  box-shadow:0 0 0 5px #ffffff26;
  flex-shrink:0
}
.hero h1 {
  font-size:clamp(66px,8.4vw,116px);
  line-height:.92;
  font-family:var(--display);
  font-weight:700;
  letter-spacing:-.01em;
  text-transform:none
}
.hero h1>span {
  display:block
}
.accent {
  color:var(--accent)
}
.lede {
  margin-top:29px;
  max-width:395px;
  color:#fbe3ea;
  font-size:16px;
  line-height:1.75
}
.hero-actions {
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin-top:29px
}
.hero .btn.ghost {
  border-color:#ffffff80;
  color:white;
  gap:10px
}
.hero .btn.ghost:hover {
  background:#ffffff16
}
.fine {
  font-size:12px;
  color:var(--ink-3);
  line-height:1.8
}
.hero-copy>.fine {
  margin-top:17px;
  color:#f4cbd8
}
.hero-signal {
  position:absolute;
  inset-inline-end:48px;
  bottom:90px;
  display:flex;
  align-items:center;
  gap:14px;
  padding:20px 22px;
  background:#191315d9;
  border:1px solid #ba929f38;
  backdrop-filter:blur(16px);
  box-shadow:0 12px 35px #0003;
  border-radius:5px;
  max-width:390px
}
.signal-icon {
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  flex-shrink:0;
  border-radius:50%;
  background:#ff8fb11f;
  color:var(--accent-light);
  font-size:20px
}
.hero-signal>div {
  display:flex;
  flex-direction:column;
  gap:3px
}
.signal-label {
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:#c7b6bc
}
.hero-signal strong {
  font-size:18px;
  letter-spacing:-.5px
}
.hero-signal>div>span:last-child {
  font-size:10px;
  color:#c6b7bc
}
.signal-dot {
  color:var(--accent-light);
  padding-inline:4px
}
.pulse {
  width:60px;
  margin-inline-start:5px;
  flex-shrink:0
}
.pulse path {
  stroke:var(--accent-light);
  stroke-width:2;
  stroke-dasharray:180;
  animation:signal-draw 3.8s ease-in-out infinite
}
.hero-bottom {
  min-height:70px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-top:1px solid #ffffff33;
  position:relative
}
.hero-bottom>a {
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#fff;
  text-decoration:none;
  display:flex;
  gap:24px;
  align-items:center
}
.hero-bottom>a span {
  font-size:20px;
  color:#fff
}
.hero-coordinates {
  font:10px/1 'IBM Plex Sans',sans-serif;
  letter-spacing:.12em;
  color:#f4cbd8
}
.motion-toggle {
  padding:10px 0;
  border:0;
  border-bottom:1px solid #ffffff66;
  background:transparent;
  color:#fbe3ea;
  font-size:10px;
  min-width:80px
}
.motion-toggle::before {
  content:'Ⅱ';
  margin-inline-end:7px;
  color:#fff
}
.motion-toggle[aria-pressed=true]::before {
  content:'▷'
}
.strip {
  background:var(--accent);
  color:#fff
}
.strip-in {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
  padding-block:25px
}
.strip-in>div {
  position:relative;
  padding-inline-start:28px;
  display:flex;
  flex-direction:column;
  gap:4px
}
.strip-in>div::before {
  position:absolute;
  inset-inline-start:0;
  top:0;
  content:'↗';
  font-size:20px
}
.strip-in strong {
  font-size:14px;
  font-weight:700
}
.strip-in span {
  color:#670828;
  font-size:11px;
  line-height:1.6;
  max-width:310px
}
.sec {
  padding-block:110px
}
.sec-h {
  font-size:clamp(36px,4.2vw,58px);
  font-weight:600;
  letter-spacing:-.05em;
  max-width:860px
}
.sec-sub {
  margin-top:20px;
  color:var(--ink-2);
  font-size:15px;
  max-width:640px;
  line-height:1.8
}
.platform {
  overflow:hidden
}
.platform-grid {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:75px;
  align-items:center
}
.platform-copy .sec-h {
  max-width:430px
}
.demo-tabs {
  display:grid;
  margin-top:32px
}
.demo-tab {
  text-align:start;
  color:var(--ink);
  background:transparent;
  border:0;
  border-top:1px solid var(--line);
  display:flex;
  gap:18px;
  padding:20px 0;
  align-items:baseline;
  transition:opacity .2s
}
.demo-tab:last-child {
  border-bottom:1px solid var(--line)
}
.tab-number {
  font:11px/1.5 'IBM Plex Sans',sans-serif;
  color:var(--ink-3)
}
.demo-tab strong {
  display:block;
  font-size:17px;
  letter-spacing:-.02em
}
.tab-body {
  display:block;
  max-width:380px;
  font-size:13px;
  color:var(--ink-2);
  margin-top:9px;
  line-height:1.7
}
.demo-tabs.enhanced .demo-tab:not([aria-pressed=true]) .tab-body {
  display:none
}
.demo-tabs.enhanced .demo-tab:not([aria-pressed=true]) {
  color:#786a6f
}
.demo-tab[aria-pressed=true] .tab-number {
  color:var(--accent-d)
}
.tab-arrow {
  margin-inline-start:auto;
  font-size:22px
}
.demo-tab[aria-pressed=true] .tab-arrow {
  color:var(--accent-d)
}
.demo-tab:hover strong {
  text-decoration:underline;
  text-underline-offset:5px
}
.demo-stage {
  position:relative;
  padding:60px 0 60px 14px;
  perspective:1400px
}
.stage-grid {
  position:absolute;
  inset:0 -70px 0 -30px;
  background-image:linear-gradient(#906e7917 1px,transparent 1px),linear-gradient(90deg,#906e7917 1px,transparent 1px);
  background-size:35px 35px;
  mask-image:radial-gradient(ellipse,#000,transparent 73%)
}
.demo-window {
  position:relative;
  background:#fff;
  border:1px solid #daced2;
  border-radius:9px;
  box-shadow:0 28px 70px #4f061f16,0 3px 12px #4f061f0a;
  transform:rotate(-2deg);
  overflow:hidden;
  transition:transform .35s
}
.window-bar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 24px;
  border-bottom:1px solid #ebe0e4
}
.window-bar .brand {
  font-size:19px;
  letter-spacing:-1px
}
.window-bar .mark {
  width:22px;
  height:22px;
  background:#28191e
}
.window-status {
  display:flex;
  gap:6px;
  align-items:center;
  font-size:10px;
  color:#765761
}
.window-status i {
  width:5px;
  height:5px;
  background:#8e0c37;
  border-radius:50%
}
.demo-screen {
  padding:24px;
  min-height:355px
}
.screen-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px
}
.screen-kicker {
  font-size:17px;
  font-weight:600
}
.screen-icon {
  width:28px;
  height:28px;
  text-align:center;
  background:var(--wash);
  border-radius:4px
}
.q-row {
  display:flex;
  align-items:center;
  gap:10px;
  padding:15px 0;
  border-bottom:1px solid #f0e9eb;
  font-size:12px
}
.q-row>div {
  flex:1
}
.q-row strong {
  display:block;
  font-weight:600
}
.q-sub {
  font-size:10px;
  display:block;
  color:#715d64;
  margin-top:2px
}
.avatar {
  display:grid;
  place-items:center;
  flex-shrink:0;
  background:#f0e9dd;
  color:#ac9266;
  width:28px;
  height:28px;
  border-radius:50%;
  font-size:9px
}
.q-row:nth-child(2) .avatar {
  background:#e8dce0;
  color:#956b79
}
.q-row:nth-child(3) .avatar {
  background:#e6e1ee;
  color:#9982b0
}
.q-row:nth-child(4) .avatar {
  background:#e3e9ed;
  color:#8a9fad
}
.pill {
  font-size:9px;
  font-weight:500;
  padding:4px 8px;
  border-radius:3px;
  background:#f2ebed;
  color:#6a585e;
  white-space:nowrap
}
.pill.late {
  background:#fff0ed;
  color:#ad503c
}
.pill.soon {
  background:#efe5e8;
  color:#5c3b46
}
.pill.ok {
  background:#f9dbe5;
  color:#780a2e
}
.queue-bars {
  display:flex;
  align-items:end;
  gap:6px;
  height:40px;
  margin-top:24px;
  opacity:.8
}
.queue-bars i {
  background:#f7d4e0;
  flex:1;
  height:42%;
  transform-origin:bottom
}
.queue-bars i:nth-child(3n) {
  height:80%;
  background:#a8083f
}
.queue-bars i:nth-child(4n) {
  height:62%
}
.queue-bars i:nth-child(5n) {
  height:100%;
  background:#c0144f
}
.demo-caption {
  text-align:center;
  padding:13px 15px;
  background:#f6f1f3;
  border-top:1px solid #eadde1;
  color:#71565f;
  font-size:10px;
  letter-spacing:.03em
}
.stage-stamp {
  position:absolute;
  right:-10px;
  bottom:0;
  color:#896c76;
  font:10px/1 'IBM Plex Sans',sans-serif;
  letter-spacing:.3em
}
.payment-screen,.door-screen {
  text-align:center
}
.receipt-check {
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  margin:0 auto 16px;
  background:#f8d5e1;
  color:#7f0a31;
  border-radius:50%;
  font-size:24px
}
.demo-screen h3 {
  font-size:22px
}
.demo-screen>p {
  font-size:12px;
  color:var(--ink-2);
  margin-top:8px
}
.receipt {
  margin-top:24px;
  display:grid;
  grid-template-columns:1fr 1fr;
  text-align:start;
  gap:18px;
  font-size:12px;
  border-block:1px dashed #d6bfc7;
  padding-block:20px
}
.receipt strong {
  text-align:end
}
.receipt-ok {
  color:#8a0b35
}
.receipt-stamp {
  display:inline-block;
  margin-top:23px;
  color:#950c3a;
  border:1px solid #cfb4bd;
  padding:5px 14px;
  font-size:10px;
  transform:rotate(-5deg);
  text-transform:uppercase;
  letter-spacing:.08em
}
.door-symbol {
  font-size:38px;
  color:#af0e44
}
.member-entry {
  display:flex;
  flex-direction:column;
  border:1px solid var(--line);
  margin-block:20px;
  padding:13px;
  gap:3px;
  border-radius:4px
}
.member-entry>span {
  font-size:11px;
  color:var(--ink-3)
}
.member-entry strong {
  font-size:23px;
  letter-spacing:.09em
}
.door-screen .btn {
  padding:12px
}
.checkin-result {
  min-height:20px
}
.door-screen.confirmed {
  background:#fcebf1
}
.member-section {
  background:#191416;
  color:#f5f0f2;
  overflow:hidden;
  padding-block:95px
}
.member-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:110px;
  align-items:center
}
.member-copy .eyebrow {
  color:var(--accent-light)
}
.member-copy .sec-h {
  font-size:clamp(36px,4.1vw,56px)
}
.member-copy .sec-sub {
  color:#bca7ae
}
.member-benefits {
  display:flex;
  flex-direction:column;
  margin-top:30px;
  max-width:370px
}
.member-benefits li {
  padding:14px 0;
  border-bottom:1px solid #ffffff1c;
  font-size:15px;
  display:flex;
  gap:25px
}
.member-benefits li span {
  font-size:10px;
  color:#ae8a96;
  align-self:center
}
.app-note {
  font-size:11px;
  color:#b99fa8;
  margin-top:25px;
  line-height:1.9;
  max-width:450px
}
.tag {
  display:inline-flex;
  vertical-align:middle;
  font-size:9px;
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:3px 7px;
  border:1px solid #ddcad0;
  border-radius:3px;
  line-height:1.5
}
.tag.soon {
  color:#800a32;
  background:#f8d4e0;
  border-color:#f7d4e0
}
.tag.live {
  color:#760a2e;
  background:#f9dee7;
  border-color:#f7d4e0
}
.app-note .tag {
  margin-inline-end:9px;
  color:#a8083f;
  background:#a8083f10;
  border-color:#86566655
}
.text-link {
  display:inline-flex;
  align-items:center;
  gap:32px;
  color:var(--accent);
  font-size:13px;
  font-weight:500;
  text-decoration:none;
  border-bottom:1px solid #a8083f60;
  padding-bottom:10px;
  margin-top:32px
}
.text-link span {
  font-size:22px
}
.phone-stage {
  min-height:590px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  perspective:1200px
}
.phone-backword {
  position:absolute;
  color:#a8083f;
  font:700 370px/1 var(--display);
  transform:rotate(-12deg);
  opacity:.12;
  letter-spacing:-.02em;
  left:-25px;
  top:110px
}
.orbit {
  position:absolute;
  border:1px solid #f7d4e015;
  width:520px;
  height:520px;
  border-radius:50%;
  transform:rotateX(35deg) rotateZ(-20deg)
}
.orbit-two {
  width:680px;
  height:680px;
  border-style:dashed;
  opacity:.5
}
.orbit-one::after {
  content:'';
  position:absolute;
  top:65px;
  right:42px;
  width:9px;
  height:9px;
  background:var(--accent);
  box-shadow:0 0 30px #a8083f60;
  border-radius:50%
}
.phone {
  position:relative;
  width:266px;
  flex-shrink:0;
  background:#f5eff1;
  border:7px solid #3a2e32;
  border-radius:40px;
  padding:8px 16px 17px;
  color:#261a1e;
  box-shadow:25px 40px 70px #0007,inset 0 0 0 1px #ffffff80;
  transform:rotate(7deg);
  transition:transform .4s
}
.phone-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font:9px/1.3 'IBM Plex Sans',sans-serif;
  padding:3px 0 18px;
  position:relative
}
.phone-island {
  background:#282023;
  border-radius:12px;
  width:75px;
  height:18px;
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:0
}
.phone-brand {
  font:700 17px/1.5 'IBM Plex Sans',sans-serif;
  letter-spacing:-1px;
  display:flex;
  align-items:center;
  gap:4px;
  margin-bottom:20px
}
.phone-brand .mark {
  width:18px;
  height:18px;
  background:#311f25
}
.phone-brand>span:last-child {
  margin-inline-start:auto;
  width:24px;
  height:24px;
  border:1px solid #c4a2ad;
  border-radius:50%;
  text-align:center;
  font-size:16px
}
.phone-greeting {
  font-size:12px;
  font-weight:500;
  margin-bottom:10px
}
.membership-card {
  background:var(--accent);
  border-radius:12px;
  padding:16px;
  position:relative;
  overflow:hidden;
  color:#fff
}
.membership-card::after {
  content:'';
  position:absolute;
  width:150px;
  height:170px;
  border:1px solid #ffffff40;
  right:-50px;
  top:-50px;
  transform:rotate(30deg);
  pointer-events:none
}
.membership-card>span {
  font-size:9px
}
.membership-card>strong {
  font:700 48px/.95 var(--display);
  display:block;
  letter-spacing:-1px;
  margin-top:6px
}
.member-card-bottom {
  display:flex;
  align-items:end;
  justify-content:space-between;
  margin-top:18px
}
.member-card-bottom>span {
  font:9px/1.8 'IBM Plex Sans',var(--sans)
}
.member-code {
  width:41px;
  height:41px;
  border:4px solid #f7d4e0;
  background:#f7d4e0;
  position:relative
}
.phone-section-label {
  display:flex;
  justify-content:space-between;
  font-size:11px;
  font-weight:600;
  margin:18px 0 8px
}
.phone-section-label>span {
  font-size:15px
}
.workout-row {
  background:white;
  border:1px solid #e9dce0;
  border-radius:8px;
  padding:12px 8px;
  display:flex;
  align-items:center;
  gap:7px;
  font-size:10px
}
.workout-row>div {
  display:flex;
  flex-direction:column;
  gap:4px
}
.workout-row>div>span {
  font:9px/1.5 'IBM Plex Sans',sans-serif;
  color:#846670
}
.workout-icon {
  display:grid;
  place-items:center;
  background:#f9dee7;
  width:28px;
  height:32px;
  border-radius:4px;
  font-size:19px
}
.workout-check {
  margin-inline-start:auto;
  color:#b20e45;
  font-size:15px
}
.progress-chart {
  width:100%;
  height:70px;
  overflow:visible
}
.chart-grid {
  stroke:#e4d6db;
  stroke-width:1;
  stroke-dasharray:3 4
}
.chart-line {
  stroke:#a70e41;
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-dasharray:280
}
.progress-chart circle {
  fill:#a70e41
}
.phone-nav {
  display:flex;
  justify-content:space-around;
  border-top:1px solid #dfcfd4;
  padding-top:12px;
  margin-top:8px;
  font-size:19px;
  color:#998189
}
.phone-nav span:first-child {
  color:#650827
}
.phone-note {
  position:absolute;
  bottom:45px;
  left:0;
  padding:16px 20px;
  background:#302629;
  border:1px solid #77576250;
  box-shadow:0 10px 25px #0003;
  display:flex;
  align-items:center;
  gap:15px;
  font-size:12px;
  transform:rotate(-4deg)
}
.phone-note>span {
  color:var(--accent-light);
  font-size:24px
}
.phone-note b {
  font-size:9px;
  letter-spacing:.05em;
  color:var(--accent-light);
  font-weight:400
}
#features .sec-h {
  max-width:760px
}
.grid {
  margin-top:50px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
  border-inline-start:1px solid var(--line)
}
.card {
  padding:27px 30px 30px;
  border-inline-end:1px solid var(--line);
  border-bottom:1px solid var(--line);
  transition:background .25s
}
.card:hover {
  background:#f9e0e8
}
.feature-number {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font:11px/1.6 'IBM Plex Sans',sans-serif;
  color:#815d69;
  margin-bottom:25px
}
.feature-number span {
  font-size:20px;
  color:#724957
}
.card h3 {
  font-size:18px;
  font-weight:600;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap
}
.card p {
  font-size:12px;
  line-height:1.85;
  margin-top:14px;
  color:var(--ink-2)
}
.sec.alt {
  background:var(--wash)
}
.pricing-section {
  border-block:1px solid var(--line)
}
.cur-row {
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:34px;
  font-size:12px;
  color:var(--ink-2)
}
.cur-row select {
  background:#fff;
  border:1px solid #d1bac2;
  border-radius:4px;
  padding:10px 13px;
  color:var(--ink);
  font-size:12px;
  max-width:100%
}
.cur-note {
  font-size:11px
}
.tiers {
  margin-top:32px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  align-items:stretch
}
.tier {
  position:relative;
  background:#fef8fa;
  padding:28px 22px;
  border:1px solid #dfd0d5;
  border-radius:6px;
  display:flex;
  flex-direction:column;
  gap:15px;
  min-width:0
}
.tier.free {
  grid-column:1/-1;
  display:grid;
  grid-template-columns:1.2fr .8fr 1.3fr 1fr;
  align-items:center;
  gap:10px 25px;
  padding:26px 30px;
  background:#f7d4e0;
  border-color:#caabb5;
  margin-bottom:10px
}
.tier.free h3 {
  grid-column:1;
  grid-row:1;
  font-size:18px;
  font-weight:600
}
.tier.free .price {
  grid-column:2;
  grid-row:1/3
}
.tier.free .cap {
  grid-column:1;
  grid-row:2
}
.tier.free ul {
  grid-column:3;
  grid-row:1/3
}
.tier.free .btn {
  grid-column:4;
  grid-row:1/3;
  margin:auto 0;
  background:#221519;
  border-color:#221519;
  color:#f8d6e1
}
.tier.best {
  border-color:#580722;
  box-shadow:0 0 0 1px #580722
}
.badge {
  position:absolute;
  top:-12px;
  inset-inline-start:20px;
  background:#570722;
  color:#fae1e9;
  font-size:9px;
  padding:4px 12px;
  border-radius:3px;
  letter-spacing:.06em;
  text-transform:uppercase
}
.tier h3 {
  font-size:15px;
  font-weight:500
}
.price {
  display:flex;
  align-items:baseline;
  gap:4px;
  flex-wrap:wrap
}
.amt {
  font:600 clamp(26px,2.5vw,37px)/1.2 'IBM Plex Sans',sans-serif;
  letter-spacing:-1.5px;
  overflow-wrap:anywhere
}
.per {
  font-size:11px;
  color:var(--ink-3)
}
.cap {
  font-size:11px;
  color:var(--ink-2)
}
.tier ul {
  display:grid;
  gap:9px;
  margin-block:5px 14px
}
.tier li {
  position:relative;
  padding-inline-start:17px;
  font-size:11px;
  color:var(--ink-2)
}
.tier li::before {
  content:'✓';
  position:absolute;
  inset-inline-start:0;
  color:#8d0b36
}
.tier.best>.btn {
  background:#271a1e;
  color:#fff;
  border-color:#271a1e
}
.fine.mid {
  text-align:center;
  margin-top:25px
}
.rail-wrap {
  margin-top:45px
}
.rail-h {
  font-size:13px;
  margin-bottom:16px;
  font-weight:500
}
.rail {
  display:flex;
  gap:10px;
  overflow-x:auto;
  scroll-snap-type:x proximity;
  padding-bottom:13px;
  scrollbar-width:thin;
  scrollbar-color:#b38e9a transparent
}
.rail-card {
  flex:0 0 155px;
  scroll-snap-align:start;
  border:1px solid #e2d1d7;
  background:#fcf1f5;
  padding:17px;
  display:flex;
  flex-direction:column;
  gap:5px;
  border-radius:4px
}
.rail-country,.rail-code {
  font-size:10px;
  color:#72535d
}
.rail-price {
  font:500 22px/1.4 'IBM Plex Sans',sans-serif;
  letter-spacing:-.6px
}
.rail-wrap>.fine {
  font-size:11px;
  max-width:800px
}
.compare {
  border-top:1px solid #dcc9cf;
  margin-top:50px;
  padding-top:30px;
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:80px;
  align-items:start
}
.compare h3 {
  font-size:21px;
  grid-column:1
}
.compare>p {
  font-size:12px;
  color:var(--ink-2);
  margin-top:10px;
  grid-column:1
}
.cmp {
  grid-column:2;
  grid-row:1/4;
  display:flex;
  flex-direction:column
}
.cmp li {
  display:flex;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid var(--line);
  padding:10px 0;
  font-size:12px
}
.cmp b {
  text-align:end;
  font-weight:500;
  white-space:nowrap
}
.cmp li:first-child {
  color:#640827;
  font-weight:600
}
.compare>.fine {
  font-size:10px;
  margin-top:18px
}
.steps {
  margin-top:50px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:32px
}
.steps li {
  border-top:1px solid var(--line);
  padding-top:20px
}
.step-n {
  display:block;
  font:600 50px/1 var(--display);
  color:#996576;
  margin-bottom:25px
}
.steps h3 {
  font-size:16px;
  font-weight:500
}
.steps p {
  font-size:12px;
  margin-top:12px;
  color:var(--ink-2);
  line-height:1.85
}
.audience-section {
  padding-block:60px!important
}
.audience-section .sec-h {
  font-size:28px;
  letter-spacing:-.03em
}
.who {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:36px;
  margin-top:35px
}
.who h3 {
  font-size:14px;
  font-weight:500
}
.who p {
  font-size:12px;
  color:var(--ink-2);
  line-height:1.8;
  margin-top:10px
}
.who>div {
  border-inline-start:2px solid #b68e9b;
  padding-inline-start:20px
}
#faq .sec-h {
  font-size:42px
}
#faq details {
  border-bottom:1px solid var(--line);
  padding:21px 0
}
#faq details:first-of-type {
  border-top:1px solid var(--line);
  margin-top:35px
}
#faq summary {
  list-style:none;
  cursor:pointer;
  font-size:15px;
  font-weight:500;
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center
}
#faq summary::-webkit-details-marker {
  display:none
}
#faq summary::after {
  content:'+';
  font-size:24px;
  font-weight:400;
  color:#7f5c68
}
#faq details[open] summary::after {
  content:'−'
}
#faq details p {
  font-size:13px;
  color:var(--ink-2);
  line-height:1.85;
  margin-top:14px;
  padding-inline-end:30px
}
.cta {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  text-align:center;
  background:var(--accent);
  color:#fff;
  padding:85px 0 90px
}
.cta::before,.cta::after {
  content:'';
  position:absolute;
  width:360px;
  height:800px;
  border:1px solid #c5104c40;
  transform:rotate(35deg);
  top:-300px;
  z-index:-1
}
.cta::before {
  left:-180px
}
.cta::after {
  right:-180px
}
.cta h2 {
  font:700 clamp(50px,6vw,80px)/.98 var(--display);
  text-transform:uppercase;
  letter-spacing:-.015em
}
.cta>.wrap>p {
  font-size:14px;
  color:#4f323c;
  margin:23px auto 0;
  max-width:550px
}
.cta-actions {
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:30px
}
.cta .btn.solid {
  background:#fff;
  color:var(--accent);
  border-color:#fff
}
.cta .btn.ghost {
  border-color:#ffffff80
}
.cta>.wrap>.fine {
  font-size:11px;
  color:#573842;
  margin-top:20px
}
.foot {
  background:#140e10;
  color:#b8a3aa;
  padding:48px 0
}
.foot-in {
  display:flex;
  justify-content:space-between;
  gap:40px;
  align-items:center
}
.foot .brand {
  color:#fbeaf0
}
.foot .fine {
  margin-top:10px;
  color:#a68c95;
  font-size:11px
}
.foot nav {
  display:flex;
  gap:24px;
  flex-wrap:wrap;
  max-width:600px;
  justify-content:flex-end
}
.foot nav a {
  font-size:11px;
  text-decoration:none
}
.foot nav a:hover {
  color:var(--accent-light)
}
@keyframes signal-draw {
  0%,12% {
    stroke-dashoffset:180
  }
  65%,100% {
    stroke-dashoffset:0
  }

}
@keyframes phone-float {
  0%,100% {
    translate:0 0
  }
  50% {
    translate:0 -12px
  }

}
.motion-ready .phone {
  animation:phone-float 7s ease-in-out infinite
}
.motion-paused * {
  animation-play-state:paused!important;
  scroll-behavior:auto!important
}
.motion-paused .hero-media {
  will-change:auto
}
html:not([lang=en]) .hero h1:not([lang=en]) {
  font-family:var(--sans);
  font-size:clamp(40px,4.4vw,65px);
  line-height:1.5;
  letter-spacing:-.03em;
  text-transform:none
}
html:not([lang=en]) .cta h2 {
  font-family:var(--sans);
  font-size:clamp(34px,4vw,52px);
  line-height:1.45;
  text-transform:none
}
html:not([lang=en]) .sec-h {
  font-size:clamp(28px,3vw,44px);
  line-height:1.4
}
html:not([lang=en]) .eyebrow {
  letter-spacing:.02em
}
html:not([lang=en]) .hero-copy {
  width:60%
}
html:not([lang=en]) .nav-links {
  gap:14px
}
html:not([lang=en]) .nav-links a {
  font-size:11px
}
html:not([lang=en]) .nav-cta {
  gap:13px
}
html[lang=ur] {
  line-height:2.05
}
html[lang=ur] h1,html[lang=ur] h2,html[lang=ur] h3 {
  line-height:1.85
}
html[lang=ur] .tag,html[lang=ur] .btn {
  line-height:1.9
}
html[lang=ur] .q-sub {
  line-height:2.2
}
html[lang=ur] .demo-screen {
  min-height:400px
}
[dir=rtl] .hero-media {
  transform:scaleX(-1)
}
[dir=rtl] .hero::before {
  background:linear-gradient(270deg,#120f10fa,#120f10d9 29%,#120f1028 64%,#120f100a),linear-gradient(0deg,#120f10dc,transparent 38%)
}
[dir=rtl] .hero-lines {
  right:auto;
  left:8%;
  transform:skew(20deg)
}
[dir=rtl] .price,[dir=rtl] .amt,[dir=rtl] .rail-price,[dir=rtl] .rail-code,[dir=rtl] .cmp b,[dir=rtl] .member-entry strong {
  direction:ltr;
  unicode-bidi:isolate
}
@media(min-width:1500px) {
  .hero {
    min-height:800px
  }
  .hero-in {
    min-height:710px
  }
  .hero-media img {
    object-position:center 40%
  }

}
@media(max-width:1150px) {
  .wrap {
    padding-inline:30px
  }
  .nav-in {
    gap:18px
  }
  .nav-links {
    gap:18px
  }
  .nav-cta {
    gap:14px
  }
  .lang-now {
    display:none
  }
  .platform-grid {
    gap:40px
  }
  .member-grid {
    gap:60px
  }
  .hero-signal {
    inset-inline-end:30px;
    max-width:350px;
    padding:17px
  }
  .pulse {
    width:40px
  }
  .hero-copy {
    width:60%
  }
  .hero .btn.lg {
    padding:15px 18px;
    gap:12px
  }
  .hero-actions {
    gap:10px
  }
  .demo-screen {
    padding:20px
  }
  .q-row {
    gap:7px
  }
  .q-row strong {
    font-size:11px
  }
  .q-sub {
    font-size:9px
  }
  .pill {
    font-size:8px;
    padding:4px 6px
  }
  .tier {
    padding-inline:16px
  }
  .tier.free {
    padding-inline:24px
  }
  .steps {
    gap:22px
  }

}
@media(max-width:940px) {
  .nav-in {
    min-height:74px
  }
  .nav-links {
    gap:18px
  }
  .nav-links a {
    font-size:11px
  }
  .nav-links a:last-child {
    display:none
  }
  .nav-cta>.btn.ghost {
    display:none
  }
  .nav .btn.solid {
    padding:11px 16px
  }
  .hero-in {
    min-height:650px
  }
  .hero h1 {
    font-size:82px
  }
  .hero-copy {
    width:67%
  }
  .hero-signal {
    bottom:48px;
    max-width:300px
  }
  .hero-signal strong {
    font-size:15px
  }
  .hero-signal .pulse {
    display:none
  }
  .hero-bottom {
    min-height:65px
  }
  .hero-coordinates {
    display:none
  }
  .platform-grid {
    grid-template-columns:1fr;
    gap:25px
  }
  .platform-copy {
    max-width:720px
  }
  .platform-copy .sec-h {
    max-width:620px
  }
  .demo-tabs {
    grid-template-columns:repeat(3,1fr);
    gap:20px
  }
  .demo-tab {
    padding:18px 0;
    gap:10px;
    align-items:start
  }
  .demo-tab .tab-body {
    display:none!important
  }
  .demo-tab:last-child {
    border-bottom:0
  }
  .demo-tab strong {
    font-size:14px
  }
  .tab-arrow {
    font-size:17px
  }
  .demo-tab[aria-pressed=true] {
    border-top:2px solid #b00e44
  }
  .demo-stage {
    max-width:580px;
    width:100%;
    margin:auto;
    padding:20px 0 40px
  }
  .demo-window {
    transform:rotate(-1deg)
  }
  .demo-screen {
    padding:28px;
    min-height:345px
  }
  .q-row strong {
    font-size:13px
  }
  .q-sub {
    font-size:11px
  }
  .pill {
    font-size:10px
  }
  .member-grid {
    gap:35px
  }
  .phone {
    width:245px;
    padding-inline:13px
  }
  .phone-stage {
    min-height:550px
  }
  .phone-note {
    left:-5px;
    font-size:10px;
    padding:13px;
    gap:10px
  }
  .phone-backword {
    font-size:300px
  }
  .orbit {
    width:400px;
    height:400px
  }
  .orbit-two {
    width:530px;
    height:530px
  }
  .member-copy .sec-h {
    font-size:38px
  }
  .grid {
    grid-template-columns:repeat(2,1fr)
  }
  .tiers {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px
  }
  .tier {
    padding:27px
  }
  .tier.free {
    grid-template-columns:1fr 1fr;
    gap:15px
  }
  .tier.free .price {
    grid-column:2;
    grid-row:1/3;
    justify-self:end
  }
  .tier.free ul {
    grid-column:1;
    grid-row:3
  }
  .tier.free .btn {
    grid-column:2;
    grid-row:3
  }
  .amt {
    font-size:36px
  }
  .steps,.who {
    grid-template-columns:repeat(2,1fr);
    gap:35px
  }
  .foot-in {
    align-items:start
  }
  .foot nav {
    gap:16px
  }
  .compare {
    column-gap:30px
  }
  .sec {
    padding-block:80px
  }
  html:not([lang=en]) .nav-links {
    display:none
  }

}
@media(max-width:640px) {
  .wrap {
    padding-inline:22px
  }
  .nav-in {
    gap:15px;
    min-height:70px;
    flex-wrap:wrap
  }
  .brand {
    font-size:23px
  }
  .mark {
    width:26px;
    height:26px
  }
  .nav-cta {
    gap:11px;
    margin-inline-start:auto
  }
  .nav .btn.solid {
    font-size:11px;
    padding:10px 13px;
    max-width:115px
  }
  .lang>summary {
    gap:3px
  }
  .lang>summary .globe {
    width:16px
  }
  .lang>summary .chev {
    width:10px
  }
  .menu-toggle {
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:0;
    padding:9px 7px;
    min-height:36px
  }
  .menu-toggle>span {
    font-size:13px
  }
  .nav-links,html:not([lang=en]) .nav-links {
    order:3;
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    width:100%;
    padding-block:10px 18px
  }
  .nav-links a,.nav-links a:last-child {
    display:block;
    font-size:12px
  }
  .nav-links.enhanced:not(.open) {
    display:none
  }
  .nav-links.open {
    display:flex
  }
  .hero {
    min-height:0
  }
  .hero-in {
    min-height:690px;
    align-items:flex-start;
    padding-top:54px;
    padding-bottom:150px
  }
  .hero-media {
    inset:0 -40% 0 -15%
  }
  .hero-media img {
    object-position:69% center;
    opacity:.62
  }
  .hero::before {
    background:linear-gradient(90deg,#120f10e8,#120f107a 65%,#120f1000),linear-gradient(0deg,#120f10 2%,#120f1000 50%)
  }
  .hero-copy,html:not([lang=en]) .hero-copy {
    width:100%;
    max-width:440px
  }
  .hero .eyebrow {
    font-size:9px;
    max-width:270px;
    letter-spacing:.09em;
    margin-bottom:26px
  }
  .hero h1 {
    font-size:clamp(65px,16vw,92px)
  }
  .lede {
    font-size:14px;
    line-height:1.8;
    max-width:305px;
    margin-top:25px
  }
  .hero-actions {
    margin-top:25px;
    gap:10px
  }
  .hero .btn.lg {
    font-size:12px;
    padding:14px 17px;
    gap:9px
  }
  .hero-copy>.fine {
    font-size:10px
  }
  .hero-signal {
    bottom:25px;
    inset-inline:22px;
    max-width:350px;
    padding:16px;
    gap:12px
  }
  .hero-signal strong {
    font-size:16px
  }
  .hero-signal .pulse {
    display:block;
    width:52px;
    margin-inline-start:auto
  }
  .hero-signal>div>span:last-child {
    font-size:9px
  }
  .hero-bottom {
    gap:10px;
    min-height:65px
  }
  .hero-bottom>a {
    font-size:9px;
    letter-spacing:.06em;
    gap:14px
  }
  .motion-toggle {
    font-size:9px;
    min-width:auto
  }
  .strip-in {
    grid-template-columns:1fr;
    gap:19px;
    padding-block:25px
  }
  .strip-in>div {
    padding-inline-start:26px
  }
  .strip-in strong {
    font-size:13px
  }
  .strip-in span {
    font-size:10px;
    max-width:none
  }
  .sec {
    padding-block:65px
  }
  .sec-h {
    font-size:37px;
    letter-spacing:-.045em
  }
  .eyebrow {
    font-size:9px;
    letter-spacing:.08em;
    margin-bottom:16px
  }
  .sec-sub {
    font-size:14px;
    margin-top:17px
  }
  .platform-grid {
    gap:16px
  }
  .demo-tabs {
    gap:13px;
    margin-top:26px
  }
  .demo-tab {
    gap:7px
  }
  .demo-tab strong {
    font-size:12px;
    line-height:1.5
  }
  .tab-number {
    font-size:9px;
    line-height:2
  }
  .tab-arrow {
    display:none
  }
  .demo-stage {
    padding:10px 0 30px
  }
  .window-bar {
    padding:18px
  }
  .demo-screen {
    padding:20px 15px;
    min-height:350px
  }
  .screen-kicker {
    font-size:16px
  }
  .q-row {
    gap:7px;
    padding:16px 0
  }
  .avatar {
    width:23px;
    height:23px
  }
  .q-row strong {
    font-size:11px
  }
  .q-sub {
    font-size:9px
  }
  .pill {
    font-size:8px;
    padding:4px 6px
  }
  .demo-caption {
    font-size:9px
  }
  .member-grid {
    grid-template-columns:1fr;
    gap:15px
  }
  .member-copy {
    grid-row:1
  }
  .member-copy .sec-h {
    font-size:37px;
    max-width:400px
  }
  .member-benefits {
    flex-direction:row;
    gap:20px;
    max-width:none
  }
  .member-benefits li {
    flex-direction:column;
    gap:8px;
    font-size:11px;
    flex:1
  }
  .member-benefits li span {
    align-self:flex-start;
    font-size:9px
  }
  .app-note {
    font-size:10px;
    line-height:1.9
  }
  .text-link {
    font-size:12px;
    margin-top:22px
  }
  .phone-stage {
    min-height:550px;
    margin-top:20px
  }
  .phone {
    width:258px
  }
  .phone-note {
    left:3%;
    bottom:30px
  }
  .phone-backword {
    font-size:360px;
    top:100px;
    left:0
  }
  .grid {
    margin-top:34px
  }
  .card {
    padding:22px 17px
  }
  .feature-number {
    margin-bottom:20px
  }
  .card h3 {
    font-size:15px
  }
  .card p {
    font-size:11px;
    line-height:1.8
  }
  .tag {
    font-size:8px
  }
  .tiers {
    gap:18px 12px
  }
  .tier {
    padding:24px 15px;
    gap:13px
  }
  .tier.free {
    padding:22px 18px
  }
  .tier.free h3 {
    font-size:16px
  }
  .tier.free .btn {
    font-size:12px
  }
  .tier ul {
    gap:9px
  }
  .tier li {
    font-size:10px
  }
  .amt {
    font-size:29px;
    letter-spacing:-1px
  }
  .tier h3 {
    font-size:14px
  }
  .cap,.per {
    font-size:10px
  }
  .tier .btn {
    font-size:11px;
    padding:11px 12px
  }
  .badge {
    inset-inline-start:12px;
    font-size:8px
  }
  .fine.mid {
    font-size:10px
  }
  .cur-row {
    margin-top:27px
  }
  .compare {
    grid-template-columns:1fr;
    gap:0
  }
  .cmp {
    grid-column:1;
    grid-row:auto;
    margin-top:22px
  }
  .compare>.fine {
    grid-row:4
  }
  .steps {
    gap:30px 22px;
    margin-top:35px
  }
  .steps h3 {
    font-size:15px
  }
  .steps p {
    font-size:11px
  }
  .step-n {
    font-size:44px;
    margin-bottom:20px
  }
  .who {
    gap:25px
  }
  .who h3 {
    font-size:13px
  }
  .who p {
    font-size:11px
  }
  .who>div {
    padding-inline-start:13px
  }
  .audience-section .sec-h {
    font-size:26px
  }
  #faq .sec-h {
    font-size:33px
  }
  #faq summary {
    font-size:13px
  }
  #faq details p {
    font-size:12px
  }
  .cta {
    padding:65px 0
  }
  .cta h2 {
    font-size:57px
  }
  .cta>.wrap>p {
    font-size:13px
  }
  .cta .btn.lg {
    padding:15px 19px;
    font-size:12px
  }
  .cta>.wrap>.fine {
    font-size:10px
  }
  .foot {
    padding-block:35px
  }
  .foot-in {
    flex-direction:column;
    gap:25px
  }
  .foot nav {
    justify-content:flex-start;
    gap:18px
  }
  .foot nav a {
    font-size:10px
  }
  html:not([lang=en]) .hero h1:not([lang=en]) {
    font-size:clamp(34px,9vw,53px);
    line-height:1.6
  }
  html:not([lang=en]) .hero-in {
    min-height:720px
  }
  html:not([lang=en]) .hero-actions {
    flex-direction:column;
    align-items:flex-start
  }
  html:not([lang=en]) .nav-links a {
    font-size:11px
  }
  [dir=rtl] .hero::before {
    background:linear-gradient(270deg,#120f10e8,#120f107a 65%,transparent),linear-gradient(0deg,#120f10 2%,transparent 50%)
  }

}
@media(max-width:360px) {
  .wrap {
    padding-inline:17px
  }
  .nav-in {
    gap:8px
  }
  .brand {
    font-size:21px
  }
  .nav-cta {
    gap:8px
  }
  .nav .btn.solid {
    padding:10px;
    font-size:10px
  }
  .nav .mark {
    width:22px;
    height:24px
  }
  .hero h1 {
    font-size:65px
  }
  .hero .btn.lg {
    padding:13px;
    font-size:11px
  }
  .tiers {
    grid-template-columns:1fr
  }
  .tier.free {
    grid-column:1;
    grid-template-columns:1fr 1fr
  }
  .grid {
    grid-template-columns:1fr
  }
  .member-benefits {
    gap:12px
  }
  .hero-signal {
    inset-inline:17px
  }
  .pulse {
    display:none!important
  }

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

}
/* Pause decorative loops while offscreen, and retain readable supporting copy. */
.offscreen .phone,.offscreen .pulse path {
  animation-play-state:paused
}
/* Long translated words must not impose an intrinsic minimum on grid tracks. */
.platform-grid > *, .member-grid > *, .demo-tab > *, .who > *, .steps > * {
  min-width: 0;
}
h1, h2, h3, p, .demo-tab, .member-benefits, .who {
  overflow-wrap: anywhere;
}
.demo-tabs.enhanced .demo-tab:disabled {
  cursor: default;
}
@media (max-width: 940px) {
  .demo-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .who, .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 360px) {
  .nav-cta, html:not([lang=en]) .nav-cta { gap: 6px; }
  .nav .brand { font-size: 20px; gap: 6px; }
  .nav .btn.solid { max-width: 85px; font-size: 9px; padding: 8px; }
  .nav .mark { width: 20px; height: 23px; }
}
.card p,.steps p,.who p {
  font-size:14px
}
.tier li,.cap {
  font-size:12px
}
.tier .btn {
  font-size:13px
}
@media(max-width:640px) {
  .card p,.steps p,.who p {
    font-size:12px
  }
  .tier li,.cap {
    font-size:11px
  }
  .tier .btn {
    font-size:12px
  }

}

/* ── Enhancer: the hero's bars ─────────────────────────────────────────────
   The social kit's banner: two wide rounded bars a shade darker than the
   crimson, the upper one raised like the mark, and the mark itself in white.
   They live in .hero-media so motion.js still gives them the parallax the
   photo used to have. */
.hero-media>span {
  position:absolute;
  display:block;
  background:#8f0735;
  border-radius:999px
}
.hero-media>span:first-child {
  width:68%;
  height:300px;
  inset-inline-end:-14%;
  top:-150px;
  transform:rotate(-20deg);
  transform-origin:center
}
.hero-media>span:last-child {
  width:62%;
  height:280px;
  inset-inline-end:-18%;
  bottom:30px
}
.hero .accent {
  color:#fff
}
.hero .btn.solid {
  background:#fff;
  color:var(--accent);
  border-color:#fff
}
.hero .btn.solid:hover {
  background:#fbe3ea
}
.hero-mark {
  position:absolute;
  inset-inline-end:7%;
  top:50%;
  width:clamp(150px,15vw,215px);
  aspect-ratio:241/296;
  transform:translateY(-78%);
  color:#fff;
  background:currentColor;
  -webkit-mask:url(/mark.svg) center/contain no-repeat;
  mask:url(/mark.svg) center/contain no-repeat;
  z-index:-1
}
[dir=rtl] .hero-mark {
  transform:translateY(-78%) scaleX(-1)
}
@media (max-width:900px) {
  .hero-mark { display:none }
  .hero-media>span:first-child { width:120%; height:200px; top:-120px }
  .hero-media>span:last-child { width:110%; height:180px; bottom:-40px }
}
/* In the product previews the mark sits on white, so it takes the brand colour. */
.window-bar .mark,
.phone-brand .mark {
  color:var(--accent)
}
/* The wordmark is the kit's own lettering, cut out as a mask so it takes the
   colour of whatever it sits on: white in the dark nav and footer. */
.wordmark {
  display:inline-block;
  height:21px;
  aspect-ratio:790/145;
  background:currentColor;
  -webkit-mask:url(/wordmark.png) center/contain no-repeat;
  mask:url(/wordmark.png) center/contain no-repeat
}
.brand .mark {
  height:30px
}
/* The member-app section is near-black: its link and badge take the light tint. */
.member-copy .text-link {
  color:var(--accent-light)
}
.member-copy .tag.soon {
  color:var(--accent-light);
  border-color:#ff8fb166
}
/* "Raise the bar." is the brand line and stays English on every page, so it
   keeps the display face and its own leading even inside an Urdu page. */
html[lang=ur] .hero h1[lang=en] {
  line-height:.92
}