:root { font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:#182639; background:#eef2ed; }
    * { box-sizing:border-box; }
    [hidden] { display:none !important; }
    body { margin:0; min-height:100vh; }
    button, input { font:inherit; }
    button { cursor:pointer; }
    a { color:inherit; }
    :focus-visible { outline:3px solid #167f66; outline-offset:3px; }
    .app { max-width:1380px; margin:auto; padding:28px; }
    .topbar { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:25px; flex-wrap:wrap; }
    .brand { display:flex; align-items:center; gap:12px; font-size:21px; font-weight:850; letter-spacing:-.04em; }
    .mark { display:grid; place-items:center; width:34px; height:34px; border-radius:11px; background:#b6f58b; color:#102327; font-size:22px; font-weight:900; }
    .study { font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#667684; font-weight:750; }
    .top-actions { display:flex; align-items:center; gap:15px; flex-wrap:wrap; }
    .topnav { display:flex; gap:4px; background:#dfe7de; border-radius:11px; padding:4px; }
    .topnav button, .topnav a { border:0; background:transparent; color:#516457; padding:9px 13px; border-radius:8px; font-size:12px; font-weight:800; text-decoration:none; }
    .topnav button[aria-current="page"] { color:#1c392a; background:white; box-shadow:0 1px 5px #1b392019; }
    .layout { display:grid; grid-template-columns:minmax(300px, 355px) minmax(0,1fr); gap:18px; align-items:stretch; }
    .rail { background:#101b29; color:#f6f7f3; border-radius:25px; padding:33px 24px 24px; min-height:700px; display:flex; flex-direction:column; }
    .rail .eyebrow, .eyebrow { font-size:11px; letter-spacing:.17em; text-transform:uppercase; font-weight:800; }
    .rail .eyebrow { color:#b6f58b; }
    .rail h1 { font-size:34px; line-height:1.06; letter-spacing:-.055em; margin:17px 0 13px; max-width:290px; }
    .rail p { color:#afbcc6; line-height:1.55; font-size:14px; margin:0; }
    .progress-label { margin-top:23px; color:#d6e5d4; font-size:12px; font-weight:750; }
    .progress-track { height:5px; background:#354354; border-radius:99px; margin:9px 0 23px; overflow:hidden; }
    .progress-fill { height:100%; background:#b6f58b; width:0; border-radius:99px; transition:width .25s; }
    .steps { list-style:none; padding:0; margin:0; display:grid; gap:5px; }
    .step-button { width:100%; text-align:left; background:transparent; border:1px solid transparent; border-radius:13px; padding:11px 10px; display:flex; align-items:center; gap:12px; color:#b7c4cd; }
    .step-button:hover { background:#1d2b3b; }
    .step-button[aria-current="step"] { border-color:#3f5b5a; color:white; background:#1c313b; }
    .step-number { display:grid; place-items:center; width:29px; height:29px; flex:none; border:1px solid #536574; border-radius:50%; font-size:12px; font-weight:800; }
    .step-button[aria-current="step"] .step-number { background:#b6f58b; border-color:#b6f58b; color:#172328; }
    .step-button[data-status="done"] .step-number { background:#326854; border-color:#326854; color:white; }
    .step-button[data-status="skipped"] .step-number { background:#334252; border-color:#536574; }
    .step-label { display:grid; gap:2px; }
    .step-label strong { font-size:13px; font-weight:700; }
    .step-label small { font-size:11px; color:#8ea0ac; }
    .rail-foot { margin-top:auto; padding-top:24px; border-top:1px solid #304050; font-size:12px; color:#a6b5c1; line-height:1.55; }
    .rail-foot strong { color:#b6f58b; }
    .work { min-width:0; background:#fff; border:1px solid #dee5df; border-radius:25px; padding:clamp(25px,4vw,58px); min-height:700px; display:flex; flex-direction:column; }
    .workhead { display:flex; justify-content:space-between; align-items:center; gap:18px; margin-bottom:27px; }
    .step-kicker { color:#357563; font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:850; }
    .demo-pill { border:1px solid #d6dfd8; background:#f7faf4; color:#536653; padding:8px 11px; border-radius:99px; font-size:11px; font-weight:750; white-space:nowrap; }
    h2 { font-size:clamp(34px,4.2vw,55px); line-height:1.06; letter-spacing:-.065em; margin:0 0 16px; max-width:680px; }
    .lede { color:#586a78; line-height:1.6; font-size:16px; max-width:650px; margin:0 0 26px; }
    .callout { border-left:3px solid #77bb91; background:#f3f8f1; padding:14px 17px; border-radius:0 11px 11px 0; color:#3b5751; line-height:1.5; font-size:14px; margin:20px 0; }
    .callout strong { color:#173e32; }
    .panel { background:#f7f9f6; border:1px solid #e2e8e1; border-radius:16px; padding:22px; margin:0 0 17px; }
    .panel h3 { font-size:18px; letter-spacing:-.025em; margin:0 0 7px; }
    .panel p { margin:0; line-height:1.55; color:#5b6d77; font-size:14px; }
    .form-label { display:block; font-size:13px; font-weight:800; margin:0 0 8px; }
    .input { width:100%; max-width:430px; background:white; border:1px solid #bfcfc8; border-radius:11px; padding:14px 15px; font-size:16px; color:#182639; }
    .input[aria-invalid="true"] { border-color:#b94343; }
    .field-note { color:#687985; font-size:13px; line-height:1.5; margin:9px 0 0; }
    .error { color:#ad3434; font-size:13px; font-weight:700; min-height:20px; margin:9px 0 0; }
    .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; border:1px solid #bac8bf; background:white; border-radius:11px; padding:13px 18px; color:#183128; font-size:14px; font-weight:800; line-height:1.2; min-height:45px; }
    .btn:hover { background:#eff6ed; }
    .btn-primary { border-color:#a6e27f; background:#b6f58b; color:#173025; }
    .btn-primary:hover { background:#a4e77a; }
    .btn-quiet { border-color:transparent; background:transparent; color:#4e665b; }
    .btn-quiet:hover { background:#f3f7f2; }
    .actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:20px; }
    .hint { color:#5c7180; font-size:13px; line-height:1.55; }
    .choice-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; }
    .choice { text-align:left; background:#fbfcfa; border:1px solid #dce5dc; border-radius:15px; padding:17px; min-height:205px; }
    .choice:hover { border-color:#89b99b; }
    .choice[aria-pressed="true"] { border:2px solid #3c9873; background:#f1f9ed; padding:16px; }
    .choice .tier { color:#2c6956; font-weight:850; font-size:15px; }
    .choice .price { display:block; font-size:25px; letter-spacing:-.06em; font-weight:850; margin:13px 0 7px; }
    .choice .desc { display:block; font-size:12px; line-height:1.55; color:#637480; }
    .billing-top { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin:4px 0 14px; }
    .billing-top h3 { margin:0; font-size:17px; letter-spacing:-.03em; }
    .cycle { display:flex; gap:3px; padding:4px; background:#edf2ec; border-radius:11px; }
    .cycle button { border:0; background:transparent; color:#52665c; padding:8px 12px; border-radius:8px; font-size:12px; font-weight:800; }
    .cycle button[aria-pressed="true"] { background:#fff; color:#183c2c; box-shadow:0 1px 5px #1b392019; }
    .plan-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
    .plan-pair .choice { min-height:165px; }
    .plan-pair .choice.plus { border-color:#72af83; }
    .save-tag { color:#346d4e; font-size:11px; font-weight:800; }
    .feature-table { width:100%; border-collapse:collapse; margin:19px 0 7px; font-size:12px; }
    .feature-table th,.feature-table td { padding:9px 10px; border-bottom:1px solid #e0e9df; text-align:left; vertical-align:top; }
    .feature-table thead th { color:#5c6f72; background:#f5f8f3; font-size:11px; text-transform:uppercase; letter-spacing:.06em; }
    .feature-table tbody th { font-weight:650; color:#354d53; width:56%; }
    .feature-table td { text-align:center; font-weight:800; color:#2b7250; }
    .feature-table td.no { color:#a3afa8; }
    .feature-table .group-row th { color:#1d5545; background:#f4f8f2; text-transform:uppercase; letter-spacing:.08em; font-size:10px; padding:8px 10px; }
    .code-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
    .code-row .input { max-width:250px; }
    .qr-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
    .qr-store { display:flex; align-items:center; gap:15px; }
    .qr-store > a:first-child { flex:none; line-height:0; }
    .qr-store > a:first-child img { display:block; width:112px; height:112px; background:white; border:1px solid #dbe6db; border-radius:10px; padding:5px; }
    .store-link { display:inline-flex; align-items:center; min-height:44px; margin-top:6px; }
    .store-link img { display:block; width:120px; height:auto; max-width:none; padding:0; border:0; border-radius:0; background:transparent; }
    .store-link[href*="play.google.com"] img { width:135px; }
    .store-link:focus-visible, .mobile-qr-link:focus-visible { outline:3px solid #4a976e; outline-offset:3px; border-radius:4px; }
    .browser-check { display:inline-flex; gap:8px; align-items:center; padding:9px 12px; border-radius:9px; background:#edf4ec; color:#245d44; font-size:12px; font-weight:750; margin-bottom:14px; }
    .browser-check.warn { background:#fff4dc; color:#7a5a18; }
    .bullets { padding-left:20px; margin:12px 0 0; color:#435b61; line-height:1.6; font-size:14px; }
    .two-col { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
    .status-line { display:flex; align-items:flex-start; gap:11px; padding:15px 0; border-bottom:1px solid #e3e9e3; font-size:14px; }
    .status-line:last-child { border-bottom:0; }
    .status-dot { width:23px; height:23px; display:grid; place-items:center; border-radius:50%; background:#e2ebe4; color:#486859; flex:none; font-size:12px; font-weight:850; }
    .status-line.done .status-dot { background:#d7efcc; color:#32634a; }
    .status-line strong { display:block; }
    .status-line small { color:#647781; line-height:1.45; display:block; margin-top:4px; }
    .checkline { margin-top:13px; color:#35664b; font-size:13px; font-weight:700; }
    .connection-status { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:4px; }
    .connection-badge { display:inline-flex; align-items:center; gap:6px; border:1px solid #a8d8b4; background:#e6f6e9; color:#205c39; padding:8px 12px; border-radius:99px; font-size:13px; font-weight:800; }
    .connection-detail { color:#5b6d77; font-size:13px; overflow-wrap:anywhere; }
    .account-status { display:flex; align-items:center; gap:9px; flex-wrap:wrap; width:fit-content; border-radius:12px; padding:10px 13px; margin-bottom:19px; font-size:13px; }
    .account-status .status-dot { width:22px; height:22px; font-size:12px; }
    .account-waiting { background:#fff5df; color:#755617; }
    .account-waiting .status-dot { background:#f7df9d; color:#755617; }
    .account-verified { background:#eaf7e8; color:#245d3b; }
    .account-verified .status-dot { background:#c7e9be; color:#245d3b; }
    .account-status span:last-child:not(.status-dot) { color:#4d6a58; overflow-wrap:anywhere; }
    .account-code { max-width:190px; font-size:24px; font-weight:750; letter-spacing:.3em; font-variant-numeric:tabular-nums; }
    .account-page[hidden], .layout[hidden] { display:none; }
    .account-page { display:grid; gap:13px; max-width:1180px; margin:0 auto; }
    .account-hero { position:relative; overflow:hidden; background:#101b29; color:#f6f7f3; border-radius:23px; padding:24px 30px; }
    .account-hero::after { content:""; position:absolute; width:340px; height:340px; border:1px solid #385448; border-radius:50%; right:-105px; top:-175px; box-shadow:0 0 0 45px #132638,0 0 0 46px #385448,0 0 0 105px #132638; pointer-events:none; }
    .account-hero > * { position:relative; z-index:1; }
    .account-hero .eyebrow { color:#b6f58b; }
    .account-hero h1 { font-size:clamp(30px,3.3vw,43px); line-height:1.05; letter-spacing:-.055em; margin:6px 0 7px; }
    .account-hero p { color:#b1c2c7; max-width:610px; margin:0; line-height:1.4; font-size:13px; }
    .account-hero-main { display:flex; align-items:center; justify-content:space-between; gap:20px; }
    .account-hero .hero-web-link { background:#b6f58b; color:#173025; border-color:#b6f58b; white-space:nowrap; }
    .account-hero-footer { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:14px; }
    .hero-chip { display:inline-flex; align-items:center; gap:7px; border:1px solid #446154; background:#213a39; border-radius:99px; color:#d7f8cf; padding:8px 12px; font-size:12px; font-weight:800; }
    .hero-email { color:#d8e5e6; font-size:13px; overflow-wrap:anywhere; }
    .account-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; align-items:stretch; }
    .account-card { background:#fff; border:1px solid #dee5df; border-radius:18px; padding:21px 24px; min-width:0; }
    .account-card h2 { font-size:23px; line-height:1.15; letter-spacing:-.045em; margin:0 0 6px; }
    .account-card .card-intro { color:#647581; font-size:13px; line-height:1.45; margin:0 0 12px; max-width:710px; }
    .account-card .eyebrow { color:#388368; margin-bottom:7px; display:block; }
    .membership-price { font-size:30px; font-weight:850; letter-spacing:-.065em; margin:4px 0; }
    .membership-price small { font-size:15px; font-weight:650; letter-spacing:0; color:#71817c; }
    .membership-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 12px; margin:11px 0 0; padding:0; list-style:none; color:#3b5350; font-size:12px; }
    .membership-list li::before { content:"✓"; display:inline-grid; place-items:center; width:17px; height:17px; border-radius:50%; color:#205c39; background:#d7f0d0; margin-right:9px; font-size:11px; font-weight:800; }
    .account-divider { border:0; border-top:1px solid #e2e9e3; margin:23px 0; }
    .account-card .actions { margin-top:12px; }
    .account-card .input { max-width:none; }
    .account-tools, .account-referrals { min-width:0; }
    .account-card .status-line { padding:8px 0; }
    .account-card .btn { min-height:39px; padding:9px 13px; font-size:12px; }
    .account-expand { padding-top:13px; margin-top:13px; border-top:1px solid #e2e9e3; }
    .account-expand[hidden] { display:none; }
    .referral-heading { display:block; }
    .referral-balance { display:flex; align-items:center; gap:9px; margin:7px 0 10px; font-size:12px; font-weight:800; color:#2b6248; white-space:nowrap; }
    .referral-info-button { display:grid; place-items:center; width:24px; height:24px; padding:0; border:1px solid #9db7a4; background:#eef7ed; border-radius:50%; color:#285740; font-size:12px; font-weight:900; }
    .referral-info-text { background:#f0f6ee; border:1px solid #d8e8d7; border-radius:11px; padding:13px; color:#476057; font-size:12px; line-height:1.5; margin-bottom:17px; }
    .referral-info-text[hidden] { display:none; }
    .referral-field { display:flex; gap:8px; align-items:stretch; margin-top:8px; }
    .referral-field .input { min-width:0; flex:1; font-size:12px; }
    .referral-field .btn { flex:none; min-height:0; }
    .referral-copy-note { min-height:18px; color:#406b50; font-size:12px; margin:8px 0 0; }
    .tool-grid { display:grid; grid-template-columns:minmax(0,1fr); }
    .tool-card { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 9px; align-items:center; border-bottom:1px solid #e3eae3; padding:10px 0; }
    .tool-card:last-child { border-bottom:0; padding-bottom:0; }
    .tool-card .eyebrow { display:none; }
    .tool-card h3 { grid-column:1; font-size:15px; letter-spacing:-.035em; margin:0; }
    .tool-card p { grid-column:1; color:#647581; font-size:11px; line-height:1.3; margin:0; }
    .tool-card .tool-status { grid-column:2; grid-row:1; margin:0; color:#315747; font-size:11px; font-weight:800; text-align:right; }
    .tool-card .tool-status.pending { color:#8b6b26; }
    .tool-card .actions { grid-column:2; grid-row:2; margin:0; padding:0; justify-content:flex-end; }
    .tool-card .btn { min-height:36px; padding:8px 11px; font-size:11px; }
    .mobile-block { border-top:1px solid #e3eae3; padding-top:12px; margin-top:2px; }
    .mobile-block-heading { display:flex; align-items:start; justify-content:space-between; gap:8px; }
    .mobile-block h3 { font-size:15px; letter-spacing:-.035em; margin:0 0 3px; }
    .mobile-block p { color:#647581; font-size:11px; line-height:1.35; margin:0 0 10px; }
    .mobile-block .tool-status { flex:none; color:#315747; font-size:11px; font-weight:800; white-space:nowrap; }
    .mobile-block .tool-status.pending { color:#8b6b26; }
    .mobile-downloads { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
    .mobile-download { display:flex; align-items:center; gap:9px; min-width:0; border:1px solid #e0e8df; border-radius:11px; background:#f8faf7; padding:7px; }
    .mobile-download > div { display:grid; align-content:center; min-width:0; }
    .mobile-download strong { font-size:11px; color:#38564d; }
    .mobile-qr-link { flex:none; display:block; line-height:0; }
    .mobile-qr-link img { display:block; width:68px; height:68px; padding:4px; border:1px solid #dbe6db; border-radius:7px; background:#fff; }
    .mobile-download .store-link { min-height:0; margin-top:2px; }
    .mobile-download .store-link img { width:112px; }
    .mobile-download .store-link[href*="play.google.com"] img { width:126px; }
    .account-note { color:#72827b; font-size:12px; line-height:1.5; margin:0; }
    .demo-dialog { position:fixed; inset:0; z-index:20; background:#10202899; display:grid; place-items:center; padding:20px; }
    .demo-dialog[hidden] { display:none; }
    .demo-dialog-box { background:#fff; border-radius:20px; box-shadow:0 24px 80px #0b1d2840; max-width:430px; width:100%; padding:29px; }
    .demo-dialog-box h2 { font-size:27px; margin:0 0 10px; }
    .demo-dialog-box p { color:#586a78; line-height:1.55; font-size:14px; }
    .footnav { display:flex; justify-content:space-between; gap:10px; border-top:1px solid #e4eae4; padding-top:20px; margin-top:auto; }
    .muted { color:#6c7b82; }
    @media (max-width:950px) { .choice-grid,.account-grid { grid-template-columns:1fr; } .choice { min-height:0; } .choice .price { margin:7px 0 4px; } }
    @media (max-width:500px) { .mobile-downloads { grid-template-columns:1fr; } .mobile-block-heading { flex-wrap:wrap; } }
    @media (max-width:760px) { .app { padding:12px; } .topbar { padding:8px; } .layout { grid-template-columns:1fr; } .rail { min-height:0; padding:24px; } .rail h1 { font-size:29px; max-width:none; } .steps { display:flex; overflow-x:auto; padding-bottom:4px; } .step-button { min-width:145px; } .step-label small { display:none; } .rail-foot { display:none; } .work { min-height:620px; padding:25px 20px; } .two-col,.qr-grid { grid-template-columns:1fr; } .plan-pair,.tool-grid,.membership-list,.account-grid { grid-template-columns:1fr; } .account-hero::after { opacity:.45; } .account-hero-main { flex-direction:column; align-items:flex-start; } .referral-heading { flex-wrap:wrap; } .referral-field { flex-wrap:wrap; } .referral-field .input { flex-basis:100%; } .study { display:none; } }
    @media (prefers-reduced-motion:reduce) { .progress-fill { transition:none; } }

/* The next steps are status labels until their real actions are connected. */
.steps .step-button:hover { background:transparent; }
.steps .step-button[aria-current="step"]:hover { background:#1c313b; }