:root {
      color-scheme: dark;
      --page: #061223;
      --panel: #0c2038;
      --panel-2: #102943;
      --line: #264765;
      --text: #f5f8fb;
      --muted: #a9bfd3;
      --blue: #79c8fa;
      --blue-strong: #4ea7e1;
      --silver: #dce7ee;
      --android: #90d7c2;
      --iphone: #b7c8ff;
      --shadow: 0 22px 60px rgba(0, 0, 0, .32);
      --radius: 24px;
    }

    * { box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      min-width: 320px;
      background:
        radial-gradient(circle at 16% 4%, rgba(71, 161, 220, .20), transparent 28rem),
        radial-gradient(circle at 84% 24%, rgba(114, 196, 242, .09), transparent 24rem),
        var(--page);
      color: var(--text);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", sans-serif;
      line-height: 1.55;
    }

    a { color: inherit; }

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

    .shell {
      width: min(1120px, calc(100% - 32px));
      margin: 0 auto;
    }

    .topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 78px;
      border-bottom: 1px solid rgba(142, 187, 218, .16);
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
      letter-spacing: .13em;
      font-size: .94rem;
    }

    .brand-mark,
    .app-icon {
      display: grid;
      place-items: center;
      border: 1px solid rgba(215, 232, 243, .34);
      color: #e5f2fa;
      background:
        radial-gradient(circle at 34% 30%, rgba(143, 218, 255, .9), transparent 10%),
        radial-gradient(circle at 50% 45%, #204f71, #06111e 66%);
      box-shadow:
        inset 0 0 18px rgba(131, 212, 255, .24),
        0 0 18px rgba(105, 195, 244, .22);
      font-family: Georgia, serif;
      font-weight: 500;
    }

    .brand-mark {
      width: 40px;
      height: 40px;
      border-radius: 13px;
      font-size: 1.35rem;
    }

    .top-link {
      color: var(--muted);
      font-size: .9rem;
      text-underline-offset: 4px;
    }

    .hero {
      padding: clamp(64px, 10vw, 112px) 0 64px;
      text-align: center;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin: 0 0 20px;
      padding: 8px 13px;
      border: 1px solid rgba(121, 200, 250, .28);
      border-radius: 999px;
      color: var(--blue);
      background: rgba(32, 91, 129, .18);
      font-size: .84rem;
      font-weight: 700;
      letter-spacing: .04em;
    }

    h1, h2, h3, p { margin-top: 0; }

    h1 {
      font-family: inherit;
      font-weight: 400;
      max-width: 780px;
      margin-inline: auto;
      margin-bottom: 20px;
      font-size: clamp(2.25rem, 6vw, 4.65rem);
      line-height: 1.04;
      letter-spacing: -.045em;
    }

    .hero-copy {
      max-width: 650px;
      margin: 0 auto 32px;
      color: var(--muted);
      font-size: clamp(1.05rem, 2vw, 1.25rem);
    }

    .install-start {
      display: grid;
      justify-items: center;
      gap: 9px;
      margin: 0 auto 24px;
    }

    .install-start p {
      margin: 0;
      color: var(--muted);
      font-size: .94rem;
    }

    .install-button {
      width: min(100%, 340px);
      min-height: 54px;
      font-size: 1.08rem;
      box-shadow:
        0 14px 34px rgba(35, 112, 163, .34),
        0 0 24px rgba(105, 195, 244, .12);
    }

    .platform-nav {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 12px;
    }

    .button {
      display: inline-flex;
      min-height: 48px;
      align-items: center;
      justify-content: center;
      gap: 9px;
      padding: 12px 18px;
      border: 1px solid rgba(121, 200, 250, .36);
      border-radius: 14px;
      background: linear-gradient(135deg, #4a9bd0, #347fb4);
      color: white;
      font-weight: 750;
      text-decoration: none;
      box-shadow: 0 10px 26px rgba(35, 112, 163, .25);
    }

    .button.secondary {
      background: rgba(16, 41, 67, .7);
      color: var(--silver);
      box-shadow: none;
    }

    .step-link {
      display: inline-block;
      margin-top: 8px;
      color: var(--blue);
      font-weight: 750;
      text-decoration-thickness: 1px;
      text-underline-offset: 4px;
    }

    #iphone .step-link {
      color: var(--iphone);
    }

    .quick-note {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      max-width: 820px;
      margin: 52px auto 0;
    }

    .quick-note div {
      padding: 16px;
      border: 1px solid rgba(116, 165, 199, .17);
      border-radius: 16px;
      background: rgba(8, 27, 48, .62);
      color: var(--muted);
      font-size: .9rem;
    }

    .quick-note b {
      display: block;
      margin-bottom: 3px;
      color: var(--text);
    }

    .platform {
      padding: 78px 0;
      scroll-margin-top: 12px;
    }

    .platform + .platform {
      border-top: 1px solid rgba(142, 187, 218, .13);
    }

    .section-heading {
      max-width: 720px;
      margin: 0 auto 36px;
      text-align: center;
    }

    .section-heading h2 {
      font-family: inherit;
      font-weight: 400;
    }

    .platform-label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 12px;
      color: var(--android);
      font-size: .88rem;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    #iphone .platform-label { color: var(--iphone); }

    h2 {
      margin-bottom: 12px;
      font-size: clamp(1.8rem, 4vw, 3rem);
      line-height: 1.12;
      letter-spacing: -.025em;
    }

    .section-heading p { color: var(--muted); }

    .steps {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
      counter-reset: step;
    }

    .step {
      counter-increment: step;
      position: relative;
      overflow: hidden;
      min-height: 445px;
      padding: 20px;
      border: 1px solid rgba(117, 170, 207, .22);
      border-radius: var(--radius);
      background: linear-gradient(180deg, rgba(17, 45, 73, .92), rgba(8, 27, 47, .92));
      box-shadow: var(--shadow);
    }

    .step::before {
      content: counter(step);
      position: absolute;
      top: 16px;
      right: 16px;
      display: grid;
      width: 31px;
      height: 31px;
      place-items: center;
      border-radius: 50%;
      color: #061321;
      background: var(--android);
      font-weight: 900;
    }

    #iphone .step::before { background: var(--iphone); }

    .step h3 {
      max-width: calc(100% - 38px);
      margin-bottom: 8px;
      font-size: 1.05rem;
    }

    .step > p {
      min-height: 66px;
      margin-bottom: 18px;
      color: var(--muted);
      font-size: .9rem;
    }

    .phone {
      position: relative;
      width: min(190px, 100%);
      height: 270px;
      margin: 0 auto;
      overflow: hidden;
      border: 5px solid #020a13;
      border-radius: 28px;
      background: #e9eff4;
      color: #132132;
      box-shadow: 0 16px 30px rgba(0, 0, 0, .3);
    }

    .phone::before {
      content: "";
      position: absolute;
      z-index: 5;
      top: 6px;
      left: 50%;
      width: 54px;
      height: 12px;
      border-radius: 20px;
      background: #050a10;
      transform: translateX(-50%);
    }

    .status {
      display: flex;
      height: 26px;
      align-items: center;
      justify-content: space-between;
      padding: 7px 12px 0;
      font-size: 8px;
      font-weight: 800;
    }

    .browser-bar {
      display: flex;
      height: 36px;
      align-items: center;
      gap: 6px;
      padding: 5px 8px;
      background: #fff;
      border-bottom: 1px solid #d7dee4;
    }

    .address {
      flex: 1;
      overflow: hidden;
      padding: 5px 7px;
      border-radius: 12px;
      background: #edf1f4;
      font-size: 8px;
      white-space: nowrap;
    }

    .dots {
      display: grid;
      width: 23px;
      height: 23px;
      place-items: center;
      border-radius: 50%;
      color: #1e2d3b;
      font-size: 18px;
      font-weight: 800;
      line-height: 1;
    }

    .mini-app {
      display: grid;
      height: 208px;
      place-items: center;
      align-content: center;
      gap: 9px;
      padding: 18px;
      background:
        radial-gradient(circle at 50% 35%, rgba(87, 170, 224, .35), transparent 56%),
        #07182a;
      color: white;
      text-align: center;
    }

    .app-icon {
      width: 58px;
      height: 58px;
      border-radius: 17px;
      font-size: 2rem;
    }

    .mini-app strong { font-size: 13px; letter-spacing: .08em; }
    .mini-app small { color: #a9c2d6; font-size: 8px; }

    .tap {
      position: absolute;
      z-index: 8;
      width: 30px;
      height: 30px;
      border: 3px solid #fff;
      border-radius: 50%;
      background: rgba(45, 160, 227, .75);
      box-shadow: 0 0 0 7px rgba(45, 160, 227, .2);
    }

    .tap.top-right { top: 31px; right: 3px; }
    .tap.bottom-center { bottom: 2px; left: 50%; transform: translateX(-50%); }

    .android-menu,
    .share-sheet,
    .install-dialog {
      position: absolute;
      z-index: 6;
      right: 7px;
      left: 36px;
      border-radius: 10px;
      background: white;
      box-shadow: 0 9px 25px rgba(0, 0, 0, .28);
      font-size: 9px;
    }

    .android-menu { top: 53px; padding: 8px 0; }

    .menu-row {
      display: flex;
      min-height: 28px;
      align-items: center;
      gap: 8px;
      padding: 6px 10px;
    }

    .menu-row.active {
      background: #dff3ff;
      color: #0a5a8b;
      font-weight: 800;
    }

    .install-dialog {
      inset: auto 12px 53px;
      padding: 14px;
      text-align: left;
    }

    .dialog-title {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 10px;
      font-size: 11px;
      font-weight: 850;
    }

    .tiny-icon {
      display: grid;
      width: 28px;
      height: 28px;
      place-items: center;
      border-radius: 8px;
      background: #0a2037;
      color: #dceefa;
      font-family: Georgia, serif;
      font-size: 15px;
    }

    .dialog-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      margin-top: 14px;
      color: #1774ac;
      font-weight: 850;
    }

    .home-screen {
      display: grid;
      height: 244px;
      grid-template-columns: repeat(3, 1fr);
      align-content: start;
      gap: 17px 10px;
      padding: 34px 14px 16px;
      background: linear-gradient(150deg, #173a5e, #06111f 70%);
    }

    .home-app {
      display: grid;
      justify-items: center;
      gap: 4px;
      color: white;
      font-size: 7px;
      text-align: center;
    }

    .fake-icon {
      width: 38px;
      height: 38px;
      border-radius: 11px;
      background: rgba(206, 225, 240, .26);
    }

    .home-app.mente .fake-icon {
      display: grid;
      place-items: center;
      border: 1px solid #8ac9ee;
      background: radial-gradient(circle at 40% 35%, #3e88b7, #071423 70%);
      box-shadow: 0 0 16px rgba(100, 196, 245, .6);
      font-family: Georgia, serif;
      font-size: 21px;
    }

    .safari-bar {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      display: flex;
      height: 46px;
      align-items: center;
      justify-content: space-around;
      border-top: 1px solid #d3dce3;
      background: rgba(249, 251, 252, .97);
      color: #1777b6;
      font-size: 17px;
    }

    .share-icon {
      position: relative;
      width: 18px;
      height: 15px;
      border: 1.8px solid currentColor;
      border-top: 0;
      border-radius: 3px;
    }

    .share-icon::before {
      content: "↑";
      position: absolute;
      top: -12px;
      left: 3px;
      font-size: 16px;
      font-weight: 700;
    }

    .share-sheet {
      inset: 51px 7px 7px;
      overflow: hidden;
      border-radius: 18px;
      background: #f3f4f7;
    }

    .sheet-head {
      display: flex;
      justify-content: space-between;
      padding: 13px;
      border-bottom: 1px solid #d8dbe0;
      font-weight: 800;
    }

    .sheet-list { padding: 7px; }

    .sheet-row {
      display: flex;
      min-height: 35px;
      align-items: center;
      justify-content: space-between;
      padding: 8px 10px;
      border-bottom: 1px solid #dddfe2;
      background: white;
    }

    .sheet-row:first-child { border-radius: 10px 10px 0 0; }
    .sheet-row:last-child { border: 0; border-radius: 0 0 10px 10px; }
    .sheet-row.active { color: #086da9; font-weight: 850; }

    .ios-add {
      padding: 14px 12px;
      background: #f5f6f8;
    }

    .ios-add-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 4px 0 18px;
      color: #0b76bc;
      font-size: 9px;
      font-weight: 800;
    }

    .ios-preview {
      display: flex;
      align-items: center;
      gap: 9px;
      margin-bottom: 16px;
      text-align: left;
    }

    .ios-preview strong { font-size: 10px; }
    .ios-preview small { display: block; color: #6f7c87; font-size: 7px; }

    .toggle-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px;
      border-radius: 9px;
      background: white;
      font-size: 9px;
      font-weight: 700;
    }

    .toggle {
      position: relative;
      width: 32px;
      height: 19px;
      border-radius: 999px;
      background: #34c759;
    }

    .toggle::after {
      content: "";
      position: absolute;
      top: 2px;
      right: 2px;
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background: white;
      box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
    }

    .flow-line {
      display: flex;
      max-width: 790px;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin: 34px auto 0;
      color: var(--muted);
      font-size: .86rem;
      text-align: center;
    }

    .flow-pill {
      padding: 8px 11px;
      border: 1px solid rgba(129, 182, 217, .23);
      border-radius: 999px;
      background: rgba(14, 40, 66, .75);
    }

    .flow-arrow { color: var(--blue); font-weight: 900; }

    .help {
      padding: 70px 0 96px;
      border-top: 1px solid rgba(142, 187, 218, .13);
    }

    .help-grid {
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 22px;
    }

    .help-card {
      padding: clamp(22px, 4vw, 34px);
      border: 1px solid rgba(117, 170, 207, .22);
      border-radius: var(--radius);
      background: rgba(12, 32, 56, .84);
    }

    .help-card h2 { font-size: 1.55rem; }

    .help-card ul {
      margin: 0;
      padding-left: 1.2rem;
      color: var(--muted);
    }

    .help-card li + li { margin-top: 10px; }
    .help-card strong { color: var(--text); }

    .ready {
      display: grid;
      align-content: center;
      justify-items: start;
      background:
        radial-gradient(circle at 90% 12%, rgba(110, 201, 251, .19), transparent 14rem),
        rgba(12, 32, 56, .84);
    }

    .ready p { color: var(--muted); }

    footer {
      padding: 28px 0 calc(28px + env(safe-area-inset-bottom));
      border-top: 1px solid rgba(142, 187, 218, .13);
      color: #7894ab;
      font-size: .78rem;
    }

    footer .shell {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 12px;
    }

    footer a { text-underline-offset: 3px; }

    @media (max-width: 960px) {
      .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .step { min-height: 425px; }
    }

    @media (max-width: 650px) {
      .shell { width: min(100% - 22px, 1120px); }
      .topbar { min-height: 68px; }
      .top-link { display: none; }
      .hero { padding-top: 54px; }
      .quick-note { grid-template-columns: 1fr; }
      .platform { padding: 58px 0; }
      .steps { grid-template-columns: 1fr; }
      .step {
        display: grid;
        min-height: 0;
        grid-template-columns: 1fr minmax(145px, 190px);
        column-gap: 12px;
        align-items: start;
      }
      .step h3, .step > p { grid-column: 1; }
      .step > p { min-height: 0; margin-bottom: 0; }
      .phone { grid-column: 2; grid-row: 1 / span 2; height: 250px; }
      .mini-app { height: 188px; }
      .home-screen { height: 224px; }
      .flow-line { flex-wrap: wrap; }
      .flow-arrow:nth-of-type(3) { display: none; }
      .help-grid { grid-template-columns: 1fr; }
    }

    @media (max-width: 470px) {
      h1 { font-size: 2.3rem; }
      .platform-nav { display: grid; grid-template-columns: 1fr 1fr; }
      .button { padding-inline: 10px; }
      .step { display: block; }
      .step h3 { margin-top: 2px; }
      .step > p { margin-bottom: 18px; }
      .phone { height: 270px; }
      .mini-app { height: 208px; }
      .home-screen { height: 244px; }
      footer .shell { display: block; }
      footer p:last-child { margin-bottom: 0; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
    }

    @media print {
      :root { color-scheme: light; }
      body { background: white; color: #122033; }
      .topbar, .platform-nav, .ready .button, footer { display: none; }
      .hero { padding: 30px 0; }
      .hero-copy, .section-heading p, .step > p, .help-card ul, .ready p { color: #42566b; }
      .quick-note div, .step, .help-card {
        break-inside: avoid;
        border-color: #c9d5df;
        background: white;
        box-shadow: none;
      }
      .steps { grid-template-columns: repeat(2, 1fr); }
      .platform, .help { padding: 32px 0; }
    }