:root {
            --ocean: #1A6EED;
            --bg: #FAFBFC;
            --card: #FFFFFF;
            --ink: #1A1A2E;
            --secondary: #6B7280;
        }
        @media (prefers-color-scheme: dark) {
            :root {
                --bg: #0F0F14;
                --card: #1C1C24;
                --ink: #F0F0F5;
                --secondary: #9CA3AF;
            }
        }
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
            background: var(--bg);
            color: var(--ink);
            line-height: 1.6;
            padding: 24px 16px 64px;
            max-width: 680px;
            margin: 0 auto;
        }
        h1 {
            font-size: 32px;
            font-weight: 700;
            margin-bottom: 8px;
            text-align: center;
        }
        .tagline {
            text-align: center;
            color: var(--secondary);
            font-size: 16px;
            margin-bottom: 32px;
        }
        h2 {
            font-size: 18px;
            font-weight: 600;
            margin-top: 32px;
            margin-bottom: 12px;
            color: var(--ocean);
        }
        p, li {
            font-size: 15px;
            color: var(--ink);
            margin-bottom: 12px;
        }
        ul {
            padding-left: 20px;
            margin-bottom: 16px;
        }
        .badge {
            display: block;
            text-align: center;
            margin-bottom: 32px;
        }
        .badge span {
            display: inline-block;
            background: rgba(26, 110, 237, 0.1);
            color: var(--ocean);
            font-size: 13px;
            font-weight: 600;
            padding: 4px 12px;
            border-radius: 20px;
        }
        .card {
            background: var(--card);
            border-radius: 12px;
            padding: 20px;
            margin: 16px 0;
            box-shadow: 0 1px 4px rgba(0,0,0,0.06);
        }
        .card p:last-child { margin-bottom: 0; }
        .feature-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            margin: 16px 0;
        }
        .feature-card {
            background: var(--card);
            border-radius: 12px;
            padding: 16px;
            box-shadow: 0 1px 4px rgba(0,0,0,0.06);
            text-align: center;
        }
        .feature-card .emoji {
            font-size: 28px;
            margin-bottom: 8px;
        }
        .feature-card h3 {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 4px;
        }
        .feature-card p {
            font-size: 13px;
            color: var(--secondary);
            margin-bottom: 0;
        }
        .links {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-top: 24px;
        }
        .link-card {
            display: flex;
            align-items: center;
            gap: 12px;
            background: var(--card);
            border-radius: 12px;
            padding: 16px 20px;
            box-shadow: 0 1px 4px rgba(0,0,0,0.06);
            text-decoration: none;
            color: var(--ink);
            transition: box-shadow 0.2s;
        }
        .link-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
        .link-card .emoji { font-size: 24px; }
        .link-card .label {
            font-size: 15px;
            font-weight: 600;
        }
        .link-card .desc {
            font-size: 13px;
            color: var(--secondary);
            margin-bottom: 0;
        }
        .app-store-btn {
            display: block;
            text-align: center;
            margin-top: 32px;
        }
        .app-store-btn a {
            display: inline-block;
            background: var(--ocean);
            color: #FFFFFF;
            font-size: 16px;
            font-weight: 600;
            padding: 14px 32px;
            border-radius: 14px;
            text-decoration: none;
            transition: opacity 0.2s;
        }
        .app-store-btn a:hover { opacity: 0.85; }
        footer {
            margin-top: 48px;
            text-align: center;
            color: var(--secondary);
            font-size: 13px;
        }
        footer a { color: var(--ocean); text-decoration: none; }
        footer a:hover { text-decoration: underline; }
    
:root { --ocean: #175bc5; }
@media(prefers-color-scheme: dark) { :root { --ocean: #8abbff; } }
body { max-width: 920px; padding: 24px 24px 48px; }
nav { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:64px; }
nav a { color:var(--ink); text-underline-offset:4px; padding:8px 0; }
nav strong { font-size:22px; letter-spacing:-.5px; }
h1 { font-size:clamp(34px,6vw,58px); line-height:1.1; letter-spacing:-1.6px; max-width:760px; margin:0 auto 24px; text-wrap:balance; }
.tagline { max-width:650px; margin:0 auto 24px; font-size:18px; }
.eyebrow { text-align:center; color:var(--ocean); font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-bottom:20px; }
.app-store-btn { margin:0 0 12px; }
.app-store-btn a { background:#175bc5; min-height:48px; }
.price-note { text-align:center; color:var(--secondary); font-size:13px; margin-bottom:44px; }
.feature-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.feature-card { text-align:left; padding:24px; border:1px solid color-mix(in srgb,var(--ink) 10%,transparent); box-shadow:none; }
.feature-card h3 { font-size:19px; line-height:1.3; margin-bottom:12px; }
.feature-card p { font-size:15px; }
.number { font-size:13px; font-weight:700; color:var(--ocean); margin-bottom:24px; display:block; }
h2 { font-size:25px; letter-spacing:-.5px; color:var(--ink); margin-top:52px; }
.card { padding:28px; box-shadow:none; border:1px solid color-mix(in srgb,var(--ink) 10%,transparent); }
.card p { max-width:740px; }
summary { cursor:pointer; font-weight:600; padding:18px 0; }
details { border-bottom:1px solid color-mix(in srgb,var(--ink) 16%,transparent); }
details p { color:var(--secondary); }
a:focus-visible,summary:focus-visible { outline:3px solid var(--ocean); outline-offset:5px; border-radius:4px; }
.skip { position:absolute; top:-100px; }
.skip:focus { top:8px; background:var(--card); padding:12px; z-index:2; }
footer { margin-top:56px; }
footer p { font-size:13px; color:var(--secondary); }
@media(max-width:620px) { .feature-grid { grid-template-columns:1fr; } nav { margin-bottom:44px; } body { padding-inline:20px; } .feature-card { padding:22px; } .number { margin-bottom:12px; } }