/* OSC Bridge pages: landing and support, privacy, terms. Builds on /homepage.css. */
.app-hero { display: flex; align-items: center; gap: 28px; padding-block: 64px 40px; }
.app-icon { width: 96px; height: 96px; flex-shrink: 0; border-radius: 22px; box-shadow: 0 16px 50px rgba(0, 0, 0, .35); }
.app-hero h1 { font-size: clamp(40px, 5vw, 60px); letter-spacing: -2px; }
.app-hero .lead { margin-top: 12px; color: var(--muted); font-size: 17px; }
.app-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.app-nav a { padding: 7px 13px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); font-size: 13px; text-decoration: none; }
.app-nav a:hover, .app-nav a[aria-current="page"] { border-color: var(--brand); color: var(--ink); }

.prose { padding-bottom: 90px; }
.prose > * { max-width: 760px; }
.prose .updated { color: var(--muted); font-family: var(--mono); font-size: 11px; letter-spacing: .8px; text-transform: uppercase; }
.prose .summary { margin-top: 26px; padding: 20px 24px; border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: 8px; background: var(--surface); font-size: 15px; }
.prose h2 { margin-top: 48px; font-size: 24px; letter-spacing: -.5px; }
.prose h3 { margin-top: 26px; font-size: 17px; font-weight: 550; }
.prose p, .prose li { color: var(--muted); font-size: 15px; line-height: 1.8; }
.prose p { margin-top: 14px; }
.prose ul { margin: 14px 0 0; padding-left: 22px; }
.prose li + li { margin-top: 6px; }
.prose strong { color: var(--ink); font-weight: 550; }
.prose a { color: var(--brand); }
.prose code { padding: 1px 5px; border-radius: 4px; background: var(--surface); color: var(--ink); font-family: var(--mono); font-size: 13px; }
.prose address { font-style: normal; }

@media (max-width: 760px) {
    .app-hero { padding-block: 44px 28px; gap: 20px; }
    .app-icon { width: 72px; height: 72px; border-radius: 17px; }
}
@media (max-width: 480px) {
    .app-hero { flex-direction: column; align-items: flex-start; }
}
@media print {
    .app-nav { display: none; }
    .prose .summary { background: white; }
}

/* ---------- App landing page (body.app-page) ---------- */
.app-page {
    --blue: #6fb4ee;
    --green: #5fdc7c;
    --amber: #f1d54a;
    --red: #ef7f86;
    --violet: #c49bff;
    --slate: #2c313a;
    background-color: #111317;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(237, 244, 247, .05) 1px, transparent 1.2px),
        radial-gradient(ellipse at 85% 0%, rgba(111, 180, 238, .20), transparent 55%),
        radial-gradient(ellipse at 0% 30%, rgba(241, 213, 74, .16), transparent 55%),
        radial-gradient(ellipse at 60% 75%, rgba(95, 220, 124, .10), transparent 60%);
    background-size: 26px 26px, 100% 1100px, 100% 1500px, 100% 2400px;
    background-repeat: repeat, no-repeat, no-repeat, no-repeat;
}
.app-page::before { background: linear-gradient(90deg, var(--amber), var(--blue) 40%, var(--green) 75%, var(--red)); }
.app-page .eyebrow { color: var(--blue); }
.app-page .site-header { border-bottom-color: rgba(111, 180, 238, .18); }

.landing-hero { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding-block: 72px 40px; }
.landing-hero .app-icon { width: 112px; height: 112px; border-radius: 26px; box-shadow: 0 0 0 1px rgba(111, 180, 238, .25), 0 24px 70px rgba(111, 180, 238, .22); }
.landing-hero .eyebrow { margin: 30px 0 18px; }
.landing-hero h1 { max-width: 900px; font-size: clamp(42px, 6vw, 78px); letter-spacing: -2.6px; line-height: 1.04; }
.grad { background: linear-gradient(95deg, var(--blue), var(--amber) 45%, var(--green)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.landing-hero .lead { max-width: 640px; margin-top: 24px; color: var(--muted); font-size: 18px; line-height: 1.75; }
.pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 1px solid rgba(237, 244, 247, .14); border-radius: 999px; background: rgba(237, 244, 247, .04); color: #e2e5ea; font-size: 13px; }
.pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--blue)); box-shadow: 0 0 10px var(--c, var(--blue)); }
.cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 34px; }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: 10px; font-size: 15px; font-weight: 550; text-decoration: none; }
.btn-primary { background: var(--blue); color: #0f1114; }
.btn-primary:hover { background: #98caf3; color: #0f1114; }
.btn-ghost { border: 1px solid rgba(237, 244, 247, .2); color: var(--ink); }
.btn-ghost:hover { border-color: var(--blue); color: var(--ink); }
.btn small { color: inherit; opacity: .7; font-size: 12px; font-weight: 400; }

.shot { position: relative; margin-top: 56px; }
.shot::before { content: ""; position: absolute; inset: 8% 4% -4%; z-index: -1; border-radius: 40px; background: linear-gradient(110deg, rgba(241, 213, 74, .35), rgba(111, 180, 238, .30) 45%, rgba(95, 220, 124, .25)); filter: blur(60px); }
.window { overflow: hidden; border: 1px solid rgba(237, 244, 247, .14); border-radius: 14px; background: #15171b; box-shadow: 0 40px 120px rgba(0, 0, 0, .55); }
.window-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid rgba(237, 244, 247, .08); background: #1d2026; }
.window-bar span { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
.window-bar span:nth-child(2) { background: #febc2e; }
.window-bar span:nth-child(3) { background: #28c840; }
.window-bar p { margin-left: 10px; color: #9aa0aa; font-size: 12px; }
.window img { width: 100%; height: auto; }
.shot figcaption { margin-top: 18px; color: var(--muted); font-size: 13px; text-align: center; }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 90px; }
.stat { text-align: left; padding: 22px 24px; border: 1px solid rgba(237, 244, 247, .1); border-radius: 14px; background: rgba(29, 32, 38, .7); }
.stat strong { display: block; color: var(--c); font-size: 30px; font-weight: 600; letter-spacing: -1px; line-height: 1.2; }
.stat span { display: block; margin-top: 6px; color: var(--muted); font-size: 13px; }

.features { padding-block: 100px 30px; }
.features .section-heading > p { max-width: 420px; }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.feature { position: relative; overflow: hidden; padding: 26px; border: 1px solid rgba(237, 244, 247, .1); border-radius: 16px; background: linear-gradient(160deg, rgba(29, 32, 38, .95), rgba(21, 23, 27, .95)); }
.feature::after { content: ""; position: absolute; top: -40px; right: -40px; width: 120px; height: 120px; border-radius: 50%; background: var(--c); opacity: .10; filter: blur(20px); }
.feature-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); }
.feature-icon svg { width: 24px; height: 24px; }
.feature h3 { margin-top: 18px; font-size: 18px; font-weight: 550; letter-spacing: -.3px; }
.feature p { margin-top: 10px; color: var(--muted); font-size: 14px; line-height: 1.75; }

.app-page .prose { padding-top: 70px; }
.app-page .prose a { color: var(--blue); }
.help-card { margin-top: 26px; padding: 24px 26px; border: 1px solid rgba(111, 180, 238, .3); border-radius: 14px; background: rgba(111, 180, 238, .06); }
.help-card p:first-child { margin-top: 0; }

@media (max-width: 1050px) {
    .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .landing-hero { padding-block: 48px 24px; }
    .landing-hero .lead { font-size: 16px; }
    .feature-grid { grid-template-columns: 1fr; }
    .stats { margin-top: 60px; }
    .features { padding-block: 70px 10px; }
    .window-bar p { display: none; }
}
@media (max-width: 480px) {
    .stats { grid-template-columns: 1fr; }
}