:root { /* Line 1: documents this style line. */
  --black: #030303; /* Line 2: documents this style line. */
  --panel: #121211; /* Line 3: documents this style line. */
  --paper: #ebe7dc; /* Line 4: documents this style line. */
  --paper-2: #f5f0e6; /* Line 5: documents this style line. */
  --text: #f4f0e8; /* Line 6: documents this style line. */
  --muted: #b9b3aa; /* Line 7: documents this style line. */
  --ink: #191816; /* Line 8: documents this style line. */
  --mint: #a8f5df; /* Line 9: documents this style line. */
  --red: #f3564c; /* Line 10: documents this style line. */
  --line: rgba(255, 255, 255, 0.16); /* Line 11: documents this style line. */
} /* Line 12: documents this style line. */

* { /* Line 14: documents this style line. */
  box-sizing: border-box; /* Line 15: documents this style line. */
} /* Line 16: documents this style line. */

html { /* Line 18: documents this style line. */
  scroll-behavior: smooth; /* Line 19: documents this style line. */
} /* Line 20: documents this style line. */

body { /* Line 22: documents this style line. */
  margin: 0; /* Line 23: documents this style line. */
  min-height: 100vh; /* Line 24: documents this style line. */
  overflow-x: hidden; /* Keeps mobile layouts from creating sideways page scroll. */
  color: var(--text); /* Line 25: documents this style line. */
  background: var(--black); /* Line 26: documents this style line. */
  font-family: "Inter", Arial, sans-serif; /* Line 27: documents this style line. */
} /* Line 28: documents this style line. */

button, /* Line 30: documents this style line. */
input { /* Line 31: documents this style line. */
  font: inherit; /* Line 32: documents this style line. */
} /* Line 33: documents this style line. */

a { /* Line 35: documents this style line. */
  color: inherit; /* Line 36: documents this style line. */
} /* Line 37: documents this style line. */

.notice { /* Line 39: documents this style line. */
  min-height: 38px; /* Line 40: documents this style line. */
  display: grid; /* Line 41: documents this style line. */
  place-items: center; /* Line 42: documents this style line. */
  border-bottom: 1px solid rgba(255, 255, 255, 0.06); /* Line 43: documents this style line. */
  background: #000; /* Line 44: documents this style line. */
} /* Line 45: documents this style line. */

.notice-link { /* Line 47: documents this style line. */
  color: var(--text); /* Line 48: documents this style line. */
  font-family: "Space Mono", monospace; /* Line 49: documents this style line. */
  font-size: 0.72rem; /* Line 50: documents this style line. */
  letter-spacing: 0; /* Line 51: documents this style line. */
  text-transform: uppercase; /* Line 52: documents this style line. */
  text-decoration: none; /* Line 53: documents this style line. */
  opacity: 0.78; /* Line 54: documents this style line. */
} /* Line 55: documents this style line. */

.hero { /* Line 57: documents this style line. */
  position: relative; /* Line 58: documents this style line. */
  min-height: 108vh; /* Line 59: documents this style line. */
  padding: 42px min(7vw, 86px) 0; /* Line 60: documents this style line. */
  overflow: hidden; /* Line 61: documents this style line. */
  text-align: center; /* Line 62: documents this style line. */
  background: /* Line 63: documents this style line. */
    radial-gradient(circle at 50% 16%, rgba(168, 245, 223, 0.08), transparent 22%), /* Line 64: documents this style line. */
    linear-gradient(#000, #050505 64%, var(--paper) 64%); /* Line 65: documents this style line. */
} /* Line 66: documents this style line. */

.brand { /* Line 68: documents this style line. */
  width: fit-content; /* Line 69: documents this style line. */
  margin: 0 auto; /* Line 70: documents this style line. */
  display: flex; /* Line 71: documents this style line. */
  align-items: center; /* Line 72: documents this style line. */
  gap: 9px; /* Line 73: documents this style line. */
  color: var(--text); /* Line 74: documents this style line. */
  font-size: 1rem; /* Line 75: documents this style line. */
  font-weight: 700; /* Line 76: documents this style line. */
  text-decoration: none; /* Line 77: documents this style line. */
} /* Line 78: documents this style line. */

.brand-mark, /* Line 80: documents this style line. */
.mini-logo, /* Line 81: documents this style line. */
.dock-dot { /* Line 82: documents this style line. */
  display: inline-block; /* Line 83: documents this style line. */
  width: 29px; /* Line 84: documents this style line. */
  height: 29px; /* Line 85: documents this style line. */
  border: 7px solid #efede6; /* Line 86: documents this style line. */
  background: var(--black); /* Line 87: documents this style line. */
} /* Line 88: documents this style line. */

.announcement { /* Line 90: documents this style line. */
  width: fit-content; /* Line 91: documents this style line. */
  max-width: calc(100vw - 40px); /* Line 92: documents this style line. */
  margin: 42px auto 42px; /* Line 93: documents this style line. */
  display: flex; /* Line 94: documents this style line. */
  align-items: center; /* Line 95: documents this style line. */
  gap: 12px; /* Line 96: documents this style line. */
  padding: 12px 20px; /* Line 97: documents this style line. */
  border-radius: 9px; /* Line 98: documents this style line. */
  color: #08100d; /* Line 99: documents this style line. */
  background: var(--mint); /* Line 100: documents this style line. */
  font-family: "Space Mono", monospace; /* Line 101: documents this style line. */
  font-size: 0.77rem; /* Line 102: documents this style line. */
  line-height: 1.2; /* Line 103: documents this style line. */
  text-transform: uppercase; /* Line 104: documents this style line. */
  text-decoration: none; /* Line 105: documents this style line. */
  box-shadow: 0 0 40px rgba(168, 245, 223, 0.2); /* Line 106: documents this style line. */
} /* Line 107: documents this style line. */

.hero h1 { /* Line 109: documents this style line. */
  width: min(980px, 100%); /* Line 110: documents this style line. */
  margin: 0 auto; /* Line 111: documents this style line. */
  font-size: clamp(4rem, 8.1vw, 8.9rem); /* Line 112: documents this style line. */
  font-weight: 400; /* Line 113: documents this style line. */
  line-height: 1.06; /* Line 114: documents this style line. */
  letter-spacing: 0; /* Line 115: documents this style line. */
} /* Line 116: documents this style line. */

.service-rotator { /* Line 118: documents this style line. */
  width: clamp(88px, 11vw, 150px); /* Line 119: documents this style line. */
  height: clamp(88px, 11vw, 150px); /* Line 120: documents this style line. */
  margin: 0 0.12em; /* Line 121: documents this style line. */
  display: inline-grid; /* Line 122: documents this style line. */
  place-items: center; /* Line 123: documents this style line. */
  vertical-align: -0.18em; /* Line 124: documents this style line. */
  border: 1px solid rgba(255, 255, 255, 0.14); /* Line 125: documents this style line. */
  border-radius: 30%; /* Line 126: documents this style line. */
  background: rgba(255, 255, 255, 0.08); /* Line 127: documents this style line. */
  box-shadow: 0 22px 70px rgba(168, 245, 223, 0.14); /* Line 128: documents this style line. */
} /* Line 129: documents this style line. */

.service-rotator img { /* Line 131: documents this style line. */
  width: 68%; /* Line 132: documents this style line. */
  height: 68%; /* Line 133: documents this style line. */
  object-fit: contain; /* Line 134: documents this style line. */
  transition: opacity 260ms ease, transform 260ms ease; /* Line 135: documents this style line. */
} /* Line 136: documents this style line. */

.service-rotator img.is-changing { /* Line 138: documents this style line. */
  opacity: 0; /* Line 139: documents this style line. */
  transform: scale(0.86); /* Line 140: documents this style line. */
} /* Line 141: documents this style line. */

.device-frame { /* Line 143: documents this style line. */
  width: min(1080px, 96vw); /* Line 144: documents this style line. */
  min-height: 560px; /* Line 145: documents this style line. */
  margin: 58px auto 0; /* Line 146: documents this style line. */
  padding: 42px 34px 0; /* Line 147: documents this style line. */
  border: 3px solid rgba(255, 255, 255, 0.72); /* Line 148: documents this style line. */
  border-bottom: 0; /* Line 149: documents this style line. */
  border-radius: 46px 46px 0 0; /* Line 150: documents this style line. */
  background: #111; /* Line 151: documents this style line. */
  box-shadow: 0 -40px 120px rgba(255, 255, 255, 0.08); /* Line 152: documents this style line. */
} /* Line 153: documents this style line. */

.app-window { /* Line 155: documents this style line. */
  height: 520px; /* Line 156: documents this style line. */
  display: grid; /* Line 157: documents this style line. */
  grid-template-columns: 84px 1fr; /* Line 158: documents this style line. */
  overflow: hidden; /* Line 159: documents this style line. */
  border-radius: 18px 18px 0 0; /* Line 160: documents this style line. */
  background: #171717; /* Line 161: documents this style line. */
  text-align: left; /* Line 162: documents this style line. */
} /* Line 163: documents this style line. */

.rail { /* Line 165: documents this style line. */
  display: grid; /* Line 166: documents this style line. */
  align-content: start; /* Line 167: documents this style line. */
  justify-items: center; /* Line 168: documents this style line. */
  gap: 22px; /* Line 169: documents this style line. */
  padding-top: 42px; /* Line 170: documents this style line. */
  background: #101010; /* Line 171: documents this style line. */
} /* Line 172: documents this style line. */

.mini-logo { /* Line 174: documents this style line. */
  width: 36px; /* Line 175: documents this style line. */
  height: 36px; /* Line 176: documents this style line. */
  border-width: 8px; /* Line 177: documents this style line. */
} /* Line 178: documents this style line. */

.rail-icon { /* Line 180: documents this style line. */
  width: 38px; /* Line 181: documents this style line. */
  height: 38px; /* Line 182: documents this style line. */
  border: 1px solid rgba(255, 255, 255, 0.08); /* Line 183: documents this style line. */
  border-radius: 11px; /* Line 184: documents this style line. */
  background: #1f1f1f; /* Line 185: documents this style line. */
} /* Line 186: documents this style line. */

.rail-icon.active { /* Line 188: documents this style line. */
  background: linear-gradient(135deg, #3be9b4, #f4d366); /* Line 189: documents this style line. */
} /* Line 190: documents this style line. */

.dashboard { /* Line 192: documents this style line. */
  padding: 38px; /* Line 193: documents this style line. */
} /* Line 194: documents this style line. */

.dashboard-top { /* Line 196: documents this style line. */
  min-height: 86px; /* Line 197: documents this style line. */
  display: flex; /* Line 198: documents this style line. */
  align-items: center; /* Line 199: documents this style line. */
  justify-content: space-between; /* Line 200: documents this style line. */
  gap: 20px; /* Line 201: documents this style line. */
  padding: 0 26px; /* Line 202: documents this style line. */
  color: var(--text); /* Line 203: documents this style line. */
  background: #1d1d1d; /* Line 204: documents this style line. */
  border: 1px solid rgba(255, 255, 255, 0.06); /* Line 205: documents this style line. */
} /* Line 206: documents this style line. */

.kicker, /* Line 208: documents this style line. */
.balance-card span, /* Line 209: documents this style line. */
.details-card span, /* Line 210: documents this style line. */
.flow-card span { /* Line 211: documents this style line. */
  display: block; /* Line 212: documents this style line. */
  color: #9c968e; /* Line 213: documents this style line. */
  font-family: "Space Mono", monospace; /* Line 214: documents this style line. */
  font-size: 0.68rem; /* Line 215: documents this style line. */
  text-transform: uppercase; /* Line 216: documents this style line. */
} /* Line 217: documents this style line. */

.dashboard-top strong { /* Line 219: documents this style line. */
  display: block; /* Line 220: documents this style line. */
  margin-top: 6px; /* Line 221: documents this style line. */
  font-size: 0.92rem; /* Line 222: documents this style line. */
  font-weight: 500; /* Line 223: documents this style line. */
} /* Line 224: documents this style line. */

.dashboard-top button { /* Line 226: documents this style line. */
  border: 1px solid rgba(255, 255, 255, 0.1); /* Line 227: documents this style line. */
  border-radius: 6px; /* Line 228: documents this style line. */
  padding: 12px 18px; /* Line 229: documents this style line. */
  color: var(--text); /* Line 230: documents this style line. */
  background: #151515; /* Line 231: documents this style line. */
  font-size: 0.82rem; /* Line 232: documents this style line. */
  font-weight: 700; /* Line 233: documents this style line. */
} /* Line 234: documents this style line. */

.balance-panel { /* Line 236: documents this style line. */
  min-height: 360px; /* Line 237: documents this style line. */
  padding: 38px; /* Line 238: documents this style line. */
  color: var(--ink); /* Line 239: documents this style line. */
  background: var(--paper-2); /* Line 240: documents this style line. */
} /* Line 241: documents this style line. */

.balance-header { /* Line 243: documents this style line. */
  display: flex; /* Line 244: documents this style line. */
  align-items: center; /* Line 245: documents this style line. */
  justify-content: space-between; /* Line 246: documents this style line. */
  border-bottom: 1px solid rgba(25, 24, 22, 0.13); /* Line 247: documents this style line. */
  padding-bottom: 22px; /* Line 248: documents this style line. */
} /* Line 249: documents this style line. */

.balance-header h2 { /* Line 251: documents this style line. */
  margin: 0; /* Line 252: documents this style line. */
  font-size: 2rem; /* Line 253: documents this style line. */
  font-weight: 500; /* Line 254: documents this style line. */
} /* Line 255: documents this style line. */

.balance-header span { /* Line 257: documents this style line. */
  padding: 7px 10px; /* Line 258: documents this style line. */
  border-radius: 5px; /* Line 259: documents this style line. */
  color: #08734f; /* Line 260: documents this style line. */
  background: rgba(48, 210, 151, 0.16); /* Line 261: documents this style line. */
  font-family: "Space Mono", monospace; /* Line 262: documents this style line. */
  font-size: 0.68rem; /* Line 263: documents this style line. */
  text-transform: uppercase; /* Line 264: documents this style line. */
} /* Line 265: documents this style line. */

.balance-grid { /* Line 267: documents this style line. */
  display: grid; /* Line 268: documents this style line. */
  grid-template-columns: 1fr 1fr; /* Line 269: documents this style line. */
  gap: 42px; /* Line 270: documents this style line. */
  margin-top: 34px; /* Line 271: documents this style line. */
} /* Line 272: documents this style line. */

.balance-card, /* Line 274: documents this style line. */
.details-card { /* Line 275: documents this style line. */
  min-height: 162px; /* Line 276: documents this style line. */
  border: 1px solid rgba(25, 24, 22, 0.11); /* Line 277: documents this style line. */
  padding: 26px; /* Line 278: documents this style line. */
} /* Line 279: documents this style line. */

.balance-card strong { /* Line 281: documents this style line. */
  display: block; /* Line 282: documents this style line. */
  margin: 12px 0 24px; /* Line 283: documents this style line. */
  font-size: clamp(2rem, 4vw, 3rem); /* Line 284: documents this style line. */
  line-height: 1; /* Line 285: documents this style line. */
} /* Line 286: documents this style line. */

.balance-card small, /* Line 288: documents this style line. */
.details-card p { /* Line 289: documents this style line. */
  color: #777066; /* Line 290: documents this style line. */
  font-family: "Space Mono", monospace; /* Line 291: documents this style line. */
  font-size: 0.7rem; /* Line 292: documents this style line. */
  text-transform: uppercase; /* Line 293: documents this style line. */
} /* Line 294: documents this style line. */

.details-card { /* Line 296: documents this style line. */
  display: grid; /* Line 297: documents this style line. */
  grid-template-columns: 1fr auto; /* Line 298: documents this style line. */
  gap: 10px 18px; /* Line 299: documents this style line. */
  align-content: start; /* Line 300: documents this style line. */
} /* Line 301: documents this style line. */

.details-card span { /* Line 303: documents this style line. */
  grid-column: 1 / -1; /* Line 304: documents this style line. */
  margin-bottom: 12px; /* Line 305: documents this style line. */
} /* Line 306: documents this style line. */

.details-card p { /* Line 308: documents this style line. */
  margin: 0; /* Line 309: documents this style line. */
} /* Line 310: documents this style line. */

.details-card strong { /* Line 312: documents this style line. */
  font-size: 0.9rem; /* Line 313: documents this style line. */
} /* Line 314: documents this style line. */

.intro { /* Line 316: documents this style line. */
  padding: 94px min(7vw, 86px) 104px; /* Line 317: documents this style line. */
  display: grid; /* Line 318: documents this style line. */
  gap: 20px; /* Line 319: documents this style line. */
  place-items: center; /* Line 320: documents this style line. */
  color: var(--ink); /* Line 321: documents this style line. */
  background: var(--paper); /* Line 322: documents this style line. */
  text-align: center; /* Line 323: documents this style line. */
} /* Line 324: documents this style line. */

.intro p { /* Line 326: documents this style line. */
  max-width: 860px; /* Line 327: documents this style line. */
  margin: 0; /* Line 328: documents this style line. */
  font-size: clamp(3rem, 7vw, 7rem); /* Line 329: documents this style line. */
  font-weight: 400; /* Line 330: documents this style line. */
  line-height: 1; /* Line 331: documents this style line. */
} /* Line 332: documents this style line. */

.intro span { /* Line 334: documents this style line. */
  max-width: 620px; /* Line 335: documents this style line. */
  color: #6f675e; /* Line 336: documents this style line. */
  font-size: clamp(1.05rem, 2vw, 1.45rem); /* Line 337: documents this style line. */
  line-height: 1.45; /* Line 338: documents this style line. */
} /* Line 339: documents this style line. */

.customers { /* Line 341: documents this style line. */
  padding: 70px min(7vw, 86px); /* Line 342: documents this style line. */
  border-top: 1px solid rgba(25, 24, 22, 0.12); /* Line 343: documents this style line. */
  color: var(--ink); /* Line 344: documents this style line. */
  background: var(--paper); /* Line 345: documents this style line. */
  text-align: center; /* Line 346: documents this style line. */
} /* Line 347: documents this style line. */

.customers p { /* Line 349: documents this style line. */
  margin: 0 0 26px; /* Line 350: documents this style line. */
  color: #706a61; /* Line 351: documents this style line. */
  font-family: "Space Mono", monospace; /* Line 352: documents this style line. */
  font-size: 0.78rem; /* Line 353: documents this style line. */
  text-transform: uppercase; /* Line 354: documents this style line. */
} /* Line 355: documents this style line. */

.customers div { /* Line 357: documents this style line. */
  display: flex; /* Line 358: documents this style line. */
  flex-wrap: wrap; /* Line 359: documents this style line. */
  justify-content: center; /* Line 360: documents this style line. */
  gap: 12px; /* Line 361: documents this style line. */
} /* Line 362: documents this style line. */

.customers span { /* Line 364: documents this style line. */
  padding: 12px 18px; /* Line 365: documents this style line. */
  border: 1px solid rgba(25, 24, 22, 0.15); /* Line 366: documents this style line. */
  border-radius: 999px; /* Line 367: documents this style line. */
  font-weight: 700; /* Line 368: documents this style line. */
} /* Line 369: documents this style line. */

.feature { /* Line 371: documents this style line. */
  min-height: 760px; /* Line 372: documents this style line. */
  display: grid; /* Line 373: documents this style line. */
  grid-template-columns: 1fr 1fr; /* Line 374: documents this style line. */
  align-items: center; /* Line 375: documents this style line. */
  gap: min(8vw, 104px); /* Line 376: documents this style line. */
  padding: 90px min(7vw, 86px); /* Line 377: documents this style line. */
} /* Line 378: documents this style line. */

.feature-dark { /* Line 380: documents this style line. */
  background: var(--black); /* Line 381: documents this style line. */
} /* Line 382: documents this style line. */

.feature-light { /* Line 384: documents this style line. */
  color: var(--ink); /* Line 385: documents this style line. */
  background: var(--paper); /* Line 386: documents this style line. */
} /* Line 387: documents this style line. */

.feature-art { /* Line 389: documents this style line. */
  position: relative; /* Line 390: documents this style line. */
  min-height: 520px; /* Line 391: documents this style line. */
  border-radius: 13px; /* Line 392: documents this style line. */
  overflow: hidden; /* Line 393: documents this style line. */
  background: var(--paper-2); /* Line 394: documents this style line. */
} /* Line 395: documents this style line. */

.flow-card { /* Line 397: documents this style line. */
  position: absolute; /* Line 398: documents this style line. */
  right: 18%; /* Line 399: documents this style line. */
  bottom: 24%; /* Line 400: documents this style line. */
  color: var(--ink); /* Line 401: documents this style line. */
} /* Line 402: documents this style line. */

.flow-card strong { /* Line 404: documents this style line. */
  display: block; /* Line 405: documents this style line. */
  margin-top: 10px; /* Line 406: documents this style line. */
  font-size: clamp(2rem, 4vw, 3.2rem); /* Line 407: documents this style line. */
} /* Line 408: documents this style line. */

.flow-line { /* Line 410: documents this style line. */
  position: absolute; /* Line 411: documents this style line. */
  background: rgba(25, 24, 22, 0.17); /* Line 412: documents this style line. */
} /* Line 413: documents this style line. */

.flow-line.horizontal { /* Line 415: documents this style line. */
  left: 0; /* Line 416: documents this style line. */
  top: 55%; /* Line 417: documents this style line. */
  width: 58%; /* Line 418: documents this style line. */
  height: 1px; /* Line 419: documents this style line. */
} /* Line 420: documents this style line. */

.flow-line.horizontal::after, /* Line 422: documents this style line. */
.flow-line.vertical::after { /* Line 423: documents this style line. */
  content: ""; /* Line 424: documents this style line. */
  position: absolute; /* Line 425: documents this style line. */
  width: 10px; /* Line 426: documents this style line. */
  height: 10px; /* Line 427: documents this style line. */
  border-top: 1px solid rgba(25, 24, 22, 0.35); /* Line 428: documents this style line. */
  border-right: 1px solid rgba(25, 24, 22, 0.35); /* Line 429: documents this style line. */
} /* Line 430: documents this style line. */

.flow-line.horizontal::after { /* Line 432: documents this style line. */
  right: 0; /* Line 433: documents this style line. */
  top: -5px; /* Line 434: documents this style line. */
  transform: rotate(45deg); /* Line 435: documents this style line. */
} /* Line 436: documents this style line. */

.flow-line.vertical { /* Line 438: documents this style line. */
  top: 0; /* Line 439: documents this style line. */
  left: 52%; /* Line 440: documents this style line. */
  width: 1px; /* Line 441: documents this style line. */
  height: 44%; /* Line 442: documents this style line. */
} /* Line 443: documents this style line. */

.flow-line.vertical::after { /* Line 445: documents this style line. */
  left: -5px; /* Line 446: documents this style line. */
  bottom: 0; /* Line 447: documents this style line. */
  transform: rotate(135deg); /* Line 448: documents this style line. */
} /* Line 449: documents this style line. */

.feature-copy { /* Line 451: documents this style line. */
  max-width: 560px; /* Line 452: documents this style line. */
} /* Line 453: documents this style line. */

.segment { /* Line 455: documents this style line. */
  display: flex; /* Line 456: documents this style line. */
  gap: 12px; /* Line 457: documents this style line. */
  margin-bottom: 34px; /* Line 458: documents this style line. */
} /* Line 459: documents this style line. */

.segment span { /* Line 461: documents this style line. */
  min-width: 112px; /* Line 462: documents this style line. */
  padding: 13px 20px; /* Line 463: documents this style line. */
  border: 1px solid var(--line); /* Line 464: documents this style line. */
  border-radius: 999px; /* Line 465: documents this style line. */
  color: var(--muted); /* Line 466: documents this style line. */
  font-family: "Space Mono", monospace; /* Line 467: documents this style line. */
  font-size: 0.76rem; /* Line 468: documents this style line. */
  text-align: center; /* Line 469: documents this style line. */
  text-transform: uppercase; /* Line 470: documents this style line. */
} /* Line 471: documents this style line. */

.feature-light .segment span { /* Line 473: documents this style line. */
  border-color: rgba(25, 24, 22, 0.14); /* Line 474: documents this style line. */
  color: #716b63; /* Line 475: documents this style line. */
} /* Line 476: documents this style line. */

.segment .selected { /* Line 478: documents this style line. */
  color: inherit; /* Line 479: documents this style line. */
  border-color: currentColor; /* Line 480: documents this style line. */
} /* Line 481: documents this style line. */

.feature h2, /* Line 483: documents this style line. */
.access h2 { /* Line 484: documents this style line. */
  margin: 0; /* Line 485: documents this style line. */
  font-size: clamp(5rem, 9vw, 9rem); /* Line 486: documents this style line. */
  font-weight: 400; /* Line 487: documents this style line. */
  line-height: 0.92; /* Line 488: documents this style line. */
} /* Line 489: documents this style line. */

.feature h3 { /* Line 491: documents this style line. */
  max-width: 520px; /* Line 492: documents this style line. */
  margin: 34px 0 0; /* Line 493: documents this style line. */
  font-size: clamp(1.4rem, 2.4vw, 2rem); /* Line 494: documents this style line. */
  font-weight: 400; /* Line 495: documents this style line. */
  line-height: 1.24; /* Line 496: documents this style line. */
} /* Line 497: documents this style line. */

.feature p { /* Line 499: documents this style line. */
  max-width: 570px; /* Line 500: documents this style line. */
  margin: 28px 0 0; /* Line 501: documents this style line. */
  color: var(--muted); /* Line 502: documents this style line. */
  font-size: clamp(1rem, 1.65vw, 1.28rem); /* Line 503: documents this style line. */
  line-height: 1.55; /* Line 504: documents this style line. */
} /* Line 505: documents this style line. */

.feature-light p { /* Line 507: documents this style line. */
  color: #6f675e; /* Line 508: documents this style line. */
} /* Line 509: documents this style line. */

.card-stack { /* Line 511: documents this style line. */
  position: relative; /* Line 512: documents this style line. */
  min-height: 430px; /* Line 513: documents this style line. */
} /* Line 514: documents this style line. */

.wallet-card { /* Line 516: documents this style line. */
  position: absolute; /* Line 517: documents this style line. */
  inset: 50px auto auto 4%; /* Line 518: documents this style line. */
  width: min(480px, 86vw); /* Line 519: documents this style line. */
  aspect-ratio: 1.58; /* Line 520: documents this style line. */
  padding: 34px; /* Line 521: documents this style line. */
  border-radius: 26px; /* Line 522: documents this style line. */
  color: white; /* Line 523: documents this style line. */
  background: /* Line 524: documents this style line. */
    linear-gradient(135deg, rgba(255, 255, 255, 0.22), transparent 38%), /* Line 525: documents this style line. */
    linear-gradient(135deg, #171717, #087862 58%, #e7bf4b); /* Line 526: documents this style line. */
  box-shadow: 0 36px 90px rgba(25, 24, 22, 0.22); /* Line 527: documents this style line. */
} /* Line 528: documents this style line. */

.wallet-card span { /* Line 530: documents this style line. */
  font-family: "Space Mono", monospace; /* Line 531: documents this style line. */
  font-size: 0.82rem; /* Line 532: documents this style line. */
  text-transform: uppercase; /* Line 533: documents this style line. */
} /* Line 534: documents this style line. */

.wallet-card strong { /* Line 536: documents this style line. */
  position: absolute; /* Line 537: documents this style line. */
  left: 34px; /* Line 538: documents this style line. */
  bottom: 34px; /* Line 539: documents this style line. */
  font-size: 1.6rem; /* Line 540: documents this style line. */
} /* Line 541: documents this style line. */

.wallet-card.ghost { /* Line 543: documents this style line. */
  inset: 130px auto auto 16%; /* Line 544: documents this style line. */
  z-index: -1; /* Line 545: documents this style line. */
  background: #171717; /* Line 546: documents this style line. */
  opacity: 0.14; /* Line 547: documents this style line. */
} /* Line 548: documents this style line. */

.access { /* Line 550: documents this style line. */
  min-height: 780px; /* Line 551: documents this style line. */
  padding: 110px min(7vw, 86px) 160px; /* Line 552: documents this style line. */
  display: grid; /* Line 553: documents this style line. */
  place-items: center; /* Line 554: documents this style line. */
  color: var(--text); /* Line 555: documents this style line. */
  background: var(--black); /* Line 556: documents this style line. */
  text-align: center; /* Line 557: documents this style line. */
} /* Line 558: documents this style line. */

.access h2 { /* Line 560: documents this style line. */
  max-width: 920px; /* Line 561: documents this style line. */
} /* Line 562: documents this style line. */

.access p { /* Line 564: documents this style line. */
  max-width: 620px; /* Line 565: documents this style line. */
  margin: 28px 0 0; /* Line 566: documents this style line. */
  color: var(--muted); /* Line 567: documents this style line. */
  font-size: clamp(1.05rem, 2vw, 1.45rem); /* Line 568: documents this style line. */
  line-height: 1.45; /* Line 569: documents this style line. */
} /* Line 570: documents this style line. */

.waitlist-form { /* Line 572: documents this style line. */
  width: min(560px, 100%); /* Line 573: documents this style line. */
  margin-top: 42px; /* Line 574: documents this style line. */
  display: grid; /* Line 575: documents this style line. */
  grid-template-columns: 1fr auto; /* Line 576: documents this style line. */
  gap: 8px; /* Line 577: documents this style line. */
  padding: 8px; /* Line 578: documents this style line. */
  border: 1px solid var(--line); /* Line 579: documents this style line. */
  border-radius: 11px; /* Line 580: documents this style line. */
  background: rgba(255, 255, 255, 0.08); /* Line 581: documents this style line. */
} /* Line 582: documents this style line. */

.waitlist-form input { /* Line 584: documents this style line. */
  min-width: 0; /* Line 585: documents this style line. */
  border: 0; /* Line 586: documents this style line. */
  outline: 0; /* Line 587: documents this style line. */
  padding: 0 14px; /* Line 588: documents this style line. */
  color: var(--text); /* Line 589: documents this style line. */
  background: transparent; /* Line 590: documents this style line. */
} /* Line 591: documents this style line. */

.waitlist-form input::placeholder { /* Line 593: documents this style line. */
  color: #8d8982; /* Line 594: documents this style line. */
} /* Line 595: documents this style line. */

.waitlist-form button, /* Line 597: documents this style line. */
.dock-cta { /* Line 598: documents this style line. */
  border: 0; /* Line 599: documents this style line. */
  border-radius: 8px; /* Line 600: documents this style line. */
  color: white; /* Line 601: documents this style line. */
  background: var(--red); /* Line 602: documents this style line. */
  font-weight: 800; /* Line 603: documents this style line. */
  cursor: pointer; /* Line 604: documents this style line. */
} /* Line 605: documents this style line. */

.waitlist-form button { /* Line 607: documents this style line. */
  min-height: 52px; /* Line 608: documents this style line. */
  padding: 0 24px; /* Line 609: documents this style line. */
} /* Line 610: documents this style line. */

.form-message { /* Line 612: documents this style line. */
  min-height: 24px; /* Line 613: documents this style line. */
  margin: 14px 0 0; /* Line 614: documents this style line. */
  color: var(--mint); /* Line 615: documents this style line. */
  font-weight: 700; /* Line 616: documents this style line. */
} /* Line 617: documents this style line. */

.countdown { /* Line 619: documents this style line. */
  width: min(620px, 100%); /* Line 620: documents this style line. */
  margin-top: 42px; /* Line 621: documents this style line. */
  display: grid; /* Line 622: documents this style line. */
  grid-template-columns: repeat(4, 1fr); /* Line 623: documents this style line. */
  gap: 12px; /* Line 624: documents this style line. */
} /* Line 625: documents this style line. */

.countdown div { /* Line 627: documents this style line. */
  min-width: 0; /* Line 628: documents this style line. */
  padding: 20px 14px; /* Line 629: documents this style line. */
  border: 1px solid var(--line); /* Line 630: documents this style line. */
  border-radius: 10px; /* Line 631: documents this style line. */
  background: rgba(255, 255, 255, 0.05); /* Line 632: documents this style line. */
} /* Line 633: documents this style line. */

.countdown strong, /* Line 635: documents this style line. */
.countdown span { /* Line 636: documents this style line. */
  display: block; /* Line 637: documents this style line. */
} /* Line 638: documents this style line. */

.countdown strong { /* Line 640: documents this style line. */
  font-size: clamp(1.6rem, 3vw, 2.5rem); /* Line 641: documents this style line. */
} /* Line 642: documents this style line. */

.countdown span { /* Line 644: documents this style line. */
  margin-top: 6px; /* Line 645: documents this style line. */
  color: var(--muted); /* Line 646: documents this style line. */
  font-family: "Space Mono", monospace; /* Line 647: documents this style line. */
  font-size: 0.7rem; /* Line 648: documents this style line. */
  text-transform: uppercase; /* Line 649: documents this style line. */
} /* Line 650: documents this style line. */

.dock { /* Line 652: documents this style line. */
  position: fixed; /* Line 653: documents this style line. */
  z-index: 20; /* Line 654: documents this style line. */
  left: 16px; /* Line 655: documents this style line. */
  right: 16px; /* Line 656: documents this style line. */
  bottom: 16px; /* Line 657: documents this style line. */
  min-height: 56px; /* Line 658: documents this style line. */
  display: flex; /* Line 659: documents this style line. */
  align-items: center; /* Line 660: documents this style line. */
  justify-content: flex-end; /* Line 661: documents this style line. */
  gap: clamp(12px, 2.3vw, 30px); /* Line 662: documents this style line. */
  padding: 8px; /* Line 663: documents this style line. */
  border: 1px solid rgba(255, 255, 255, 0.1); /* Line 664: documents this style line. */
  border-radius: 11px; /* Line 665: documents this style line. */
  background: rgba(38, 37, 34, 0.88); /* Line 666: documents this style line. */
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.34); /* Line 667: documents this style line. */
  backdrop-filter: blur(18px); /* Line 668: documents this style line. */
} /* Line 669: documents this style line. */

.dock a { /* Line 671: documents this style line. */
  color: var(--text); /* Line 672: documents this style line. */
  font-weight: 600; /* Line 673: documents this style line. */
  text-decoration: none; /* Line 674: documents this style line. */
} /* Line 675: documents this style line. */

.dock a:first-child { /* Line 677: documents this style line. */
  margin-right: auto; /* Line 678: documents this style line. */
  display: grid; /* Line 679: documents this style line. */
  place-items: center; /* Line 680: documents this style line. */
  width: 42px; /* Line 681: documents this style line. */
  height: 40px; /* Line 682: documents this style line. */
  border-right: 1px solid rgba(255, 255, 255, 0.16); /* Line 683: documents this style line. */
} /* Line 684: documents this style line. */

.dock-dot { /* Line 686: documents this style line. */
  width: 22px; /* Line 687: documents this style line. */
  height: 22px; /* Line 688: documents this style line. */
  border-width: 6px; /* Line 689: documents this style line. */
} /* Line 690: documents this style line. */

.dock-cta { /* Line 692: documents this style line. */
  min-width: 90px; /* Line 693: documents this style line. */
  padding: 14px 22px; /* Line 694: documents this style line. */
  text-align: center; /* Line 695: documents this style line. */
} /* Line 696: documents this style line. */

.sr-only { /* Line 698: documents this style line. */
  position: absolute; /* Line 699: documents this style line. */
  width: 1px; /* Line 700: documents this style line. */
  height: 1px; /* Line 701: documents this style line. */
  padding: 0; /* Line 702: documents this style line. */
  margin: -1px; /* Line 703: documents this style line. */
  overflow: hidden; /* Line 704: documents this style line. */
  clip: rect(0, 0, 0, 0); /* Line 705: documents this style line. */
  white-space: nowrap; /* Line 706: documents this style line. */
  border: 0; /* Line 707: documents this style line. */
} /* Line 708: documents this style line. */

@media (max-width: 900px) { /* Line 710: documents this style line. */
  .hero { /* Line 711: documents this style line. */
    min-height: auto; /* Line 712: documents this style line. */
    padding-top: 34px; /* Line 713: documents this style line. */
  } /* Line 714: documents this style line. */

  .hero h1 { /* Line 716: documents this style line. */
    font-size: clamp(3.3rem, 12vw, 6.7rem); /* Line 717: documents this style line. */
  } /* Line 718: documents this style line. */

  .device-frame { /* Line 720: documents this style line. */
    min-height: 480px; /* Line 721: documents this style line. */
    padding: 26px 18px 0; /* Line 722: documents this style line. */
  } /* Line 723: documents this style line. */

  .app-window { /* Line 725: documents this style line. */
    height: 440px; /* Line 726: documents this style line. */
    grid-template-columns: 58px 1fr; /* Line 727: documents this style line. */
  } /* Line 728: documents this style line. */

  .dashboard { /* Line 730: documents this style line. */
    padding: 22px; /* Line 731: documents this style line. */
  } /* Line 732: documents this style line. */

  .dashboard-top { /* Line 734: documents this style line. */
    align-items: flex-start; /* Line 735: documents this style line. */
    flex-direction: column; /* Line 736: documents this style line. */
    padding: 20px; /* Line 737: documents this style line. */
  } /* Line 738: documents this style line. */

  .balance-panel { /* Line 740: documents this style line. */
    padding: 24px; /* Line 741: documents this style line. */
  } /* Line 742: documents this style line. */

  .balance-grid, /* Line 744: documents this style line. */
  .feature { /* Line 745: documents this style line. */
    grid-template-columns: 1fr; /* Line 746: documents this style line. */
  } /* Line 747: documents this style line. */

  .feature { /* Line 749: documents this style line. */
    min-height: auto; /* Line 750: documents this style line. */
  } /* Line 751: documents this style line. */

  .feature-light .feature-copy { /* Line 753: documents this style line. */
    order: 2; /* Line 754: documents this style line. */
  } /* Line 755: documents this style line. */

  .card-stack { /* Line 757: documents this style line. */
    min-height: 360px; /* Line 758: documents this style line. */
    overflow: hidden; /* Prevents the decorative card shadow layer from creating mobile overflow. */
  } /* Line 759: documents this style line. */
} /* Line 760: documents this style line. */

@media (max-width: 620px) { /* Line 762: documents this style line. */
  .notice { /* Line 763: documents this style line. */
    min-height: 34px; /* Line 764: documents this style line. */
  } /* Line 765: documents this style line. */

  .hero { /* Line 767: documents this style line. */
    min-height: 100svh; /* Keeps the mobile hero close to one screen height on modern phones. */
    padding-top: 24px; /* Reduces top spacing so the mobile hero avoids excess vertical scroll. */
    padding-left: 16px; /* Line 768: documents this style line. */
    padding-right: 16px; /* Line 769: documents this style line. */
    background: linear-gradient(#000, #050505 70%, var(--paper) 70%); /* Line 770: documents this style line. */
  } /* Line 771: documents this style line. */

  .announcement { /* Line 773: documents this style line. */
    margin: 24px auto; /* Reduces mobile badge spacing to shorten the hero. */
    font-size: 0.68rem; /* Line 775: documents this style line. */
  } /* Line 776: documents this style line. */

  .hero h1 { /* Targets the hero headline on phone-width screens. */
    font-size: clamp(2.75rem, 13vw, 4.4rem); /* Keeps the long headline impactful without overfilling the viewport. */
    line-height: 1.02; /* Tightens stacked mobile headline lines. */
  } /* Ends the phone-width hero headline rule. */

  .service-rotator { /* Targets the rotating service logo inside the mobile headline. */
    width: clamp(62px, 18vw, 84px); /* Shrinks the logo tile so it does not make the headline too tall. */
    height: clamp(62px, 18vw, 84px); /* Matches the compact mobile logo tile width. */
    vertical-align: -0.12em; /* Keeps the logo aligned with mobile headline text. */
  } /* Ends the mobile service logo tile rule. */

  .device-frame { /* Line 778: documents this style line. */
    width: 100%; /* Line 779: documents this style line. */
    min-height: 310px; /* Shortens the phone preview area on mobile. */
    margin-top: 34px; /* Pulls the dashboard preview closer to the headline. */
    padding: 18px 12px 0; /* Reduces inner frame padding on mobile. */
    border-radius: 28px 28px 0 0; /* Line 781: documents this style line. */
  } /* Line 782: documents this style line. */

  .app-window { /* Line 784: documents this style line. */
    height: 292px; /* Keeps the mock dashboard visible without forcing a tall hero. */
    grid-template-columns: 44px 1fr; /* Narrows the mock sidebar for phone screens. */
  } /* Line 786: documents this style line. */

  .rail { /* Line 788: documents this style line. */
    gap: 10px; /* Tightens mock sidebar icons on mobile. */
    padding-top: 18px; /* Reduces mock sidebar top spacing on mobile. */
  } /* Line 791: documents this style line. */

  .rail-icon { /* Line 793: documents this style line. */
    width: 26px; /* Shrinks mock sidebar icons on mobile. */
    height: 26px; /* Matches the compact mock sidebar icon width. */
  } /* Line 796: documents this style line. */

  .mini-logo { /* Targets the small dashboard logo on mobile. */
    width: 28px; /* Shrinks the mock dashboard logo on mobile. */
    height: 28px; /* Matches the compact mock dashboard logo width. */
    border-width: 6px; /* Keeps the logo mark proportional at the smaller size. */
  } /* Ends the mobile dashboard logo rule. */

  .dashboard { /* Line 798: documents this style line. */
    padding: 10px; /* Reduces mock dashboard padding on mobile. */
  } /* Line 800: documents this style line. */

  .dashboard-top { /* Targets the mock dashboard header on mobile. */
    min-height: 68px; /* Shortens the mock dashboard header on mobile. */
    padding: 14px; /* Keeps header content readable with less vertical height. */
  } /* Ends the mobile dashboard header rule. */

  .balance-panel { /* Targets the mock dashboard balance panel on mobile. */
    min-height: 214px; /* Shortens the mock balance panel to reduce mobile hero height. */
    padding: 18px; /* Reduces balance panel padding on mobile. */
  } /* Ends the mobile balance panel rule. */

  .balance-header { /* Targets the mock balance heading row on mobile. */
    padding-bottom: 14px; /* Tightens spacing under the balance heading. */
  } /* Ends the mobile balance heading rule. */

  .balance-header h2 { /* Targets the mock balance title on mobile. */
    font-size: 1.55rem; /* Keeps the title readable while saving vertical space. */
  } /* Ends the mobile balance title rule. */

  .balance-header span { /* Targets the mobile money label on mobile. */
    font-size: 0.54rem; /* Helps the Airtel Money and Mpamba label fit on phones. */
  } /* Ends the mobile money label rule. */

  .dashboard-top button, /* Line 802: documents this style line. */
  .details-card { /* Line 803: documents this style line. */
    display: none; /* Line 804: documents this style line. */
  } /* Line 805: documents this style line. */

  .balance-grid { /* Line 807: documents this style line. */
    gap: 0; /* Line 808: documents this style line. */
  } /* Line 809: documents this style line. */

  .balance-card { /* Line 811: documents this style line. */
    min-height: 142px; /* Shortens the mock balance card on mobile. */
    padding: 16px; /* Reduces balance card padding on mobile. */
  } /* Line 814: documents this style line. */

  .intro, /* Line 816: documents this style line. */
  .customers, /* Line 817: documents this style line. */
  .feature, /* Line 818: documents this style line. */
  .access { /* Line 819: documents this style line. */
    padding-left: 18px; /* Line 820: documents this style line. */
    padding-right: 18px; /* Line 821: documents this style line. */
  } /* Line 822: documents this style line. */

  .intro p, /* Line 824: documents this style line. */
  .feature h2, /* Line 825: documents this style line. */
  .access h2 { /* Line 826: documents this style line. */
    font-size: clamp(3.4rem, 18vw, 5.5rem); /* Line 827: documents this style line. */
  } /* Line 828: documents this style line. */

  .feature-art { /* Line 830: documents this style line. */
    min-height: 370px; /* Line 831: documents this style line. */
  } /* Line 832: documents this style line. */

  .wallet-card { /* Targets the visible virtual card mockup on small screens. */
    left: 0; /* Keeps the card inside the mobile viewport. */
    width: min(100%, 360px); /* Prevents the card from exceeding its mobile container. */
  } /* Ends the mobile virtual card mockup rule. */

  .wallet-card.ghost { /* Targets the decorative card layer on small screens. */
    left: 28px; /* Keeps the offset layer visible without pushing sideways. */
    width: min(calc(100% - 28px), 340px); /* Prevents the decorative card from creating horizontal scroll. */
  } /* Ends the mobile decorative card layer rule. */

  .segment { /* Line 834: documents this style line. */
    flex-wrap: wrap; /* Line 835: documents this style line. */
  } /* Line 836: documents this style line. */

  .waitlist-form, /* Line 838: documents this style line. */
  .countdown { /* Line 839: documents this style line. */
    grid-template-columns: 1fr; /* Line 840: documents this style line. */
  } /* Line 841: documents this style line. */

  .waitlist-form input { /* Line 843: documents this style line. */
    min-height: 50px; /* Line 844: documents this style line. */
  } /* Line 845: documents this style line. */

  .countdown { /* Line 847: documents this style line. */
    grid-template-columns: repeat(2, 1fr); /* Line 848: documents this style line. */
  } /* Line 849: documents this style line. */

  .dock { /* Line 851: documents this style line. */
    gap: 10px; /* Line 852: documents this style line. */
    overflow-x: auto; /* Line 853: documents this style line. */
    justify-content: flex-start; /* Line 854: documents this style line. */
  } /* Line 855: documents this style line. */

  .dock a { /* Line 857: documents this style line. */
    flex: 0 0 auto; /* Line 858: documents this style line. */
    font-size: 0.92rem; /* Line 859: documents this style line. */
  } /* Line 860: documents this style line. */
} /* Line 861: documents this style line. */

@supports (position: sticky) { /* Enables the stacked parallax effect in browsers that support sticky positioning. */
  main > section { /* Targets each major page section as a scroll panel. */
    position: sticky; /* Keeps each section pinned while the next one slides over it. */
    top: 0; /* Pins each panel to the top of the viewport during the stacking effect. */
    min-height: 100svh; /* Gives each panel enough height to feel like a full-screen slide. */
    z-index: 1; /* Establishes a base stacking layer for scroll panels. */
    box-shadow: 0 -40px 90px rgba(0, 0, 0, 0.24); /* Adds depth as panels overlap during scroll. */
    transform: translateZ(0); /* Promotes panels for smoother scrolling on modern browsers. */
  } /* Ends the shared scroll panel rule. */

  .hero { /* Targets the first stacked panel. */
    position: sticky; /* Overrides the hero's base relative positioning so it joins the stack. */
    top: 0; /* Pins the hero to the top before the next panel slides over it. */
    z-index: 1; /* Places the hero at the back of the section stack. */
  } /* Ends the hero stack layer rule. */

  .intro { /* Targets the overview panel. */
    z-index: 2; /* Lets the overview slide over the hero. */
  } /* Ends the overview stack layer rule. */

  .customers { /* Targets the customer tag panel. */
    z-index: 3; /* Lets the customer panel slide over the overview. */
    display: grid; /* Centers customer content inside its sticky panel. */
    align-content: center; /* Vertically centers customer content in the full-screen panel. */
  } /* Ends the customer stack layer rule. */

  .feature-dark { /* Targets the wallet transfer panel. */
    z-index: 4; /* Lets the wallet panel slide over the customer panel. */
  } /* Ends the wallet panel stack layer rule. */

  .feature-light { /* Targets the virtual card panel. */
    z-index: 5; /* Lets the card panel slide over the wallet panel. */
  } /* Ends the card panel stack layer rule. */

  .access { /* Targets the final CTA panel. */
    z-index: 6; /* Places the CTA at the top of the stacked sequence. */
  } /* Ends the CTA stack layer rule. */
} /* Ends the sticky parallax support block. */

@media (max-width: 620px) { /* Tunes the stacked scroll effect for phone screens. */
  @supports (position: sticky) { /* Keeps the mobile stacked effect scoped to sticky-capable browsers. */
    main > section { /* Targets each mobile scroll panel. */
      min-height: 100svh; /* Restores full-screen panels after earlier mobile compacting rules. */
    } /* Ends the mobile panel height rule. */

    .feature { /* Targets mobile feature panels. */
      min-height: 100svh; /* Keeps feature panels tall enough for the slide-over effect on phones. */
    } /* Ends the mobile feature panel height rule. */
  } /* Ends the mobile sticky support block. */
} /* Ends the phone-width parallax tuning block. */