/* Paddlers Cove - Get the app page (loads after auth.css) */
.page-app .icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.app-hero .eyebrow { display: inline-flex; align-items: center; gap: 8px; }
.app-hero .eyebrow .icon { width: 17px; height: 17px; }
.app-hero-row { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 50px; align-items: center; }
.app-cta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.app-done { display: none; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: rgba(122, 190, 110, .22); color: #cfeac7; font-weight: 700; }

/* show only what applies */
.only-installable, .only-ios { display: none !important; }
html.can-install .only-installable { display: inline-flex !important; }
html[data-os="ios"]:not(.is-app) .only-ios { display: inline-flex !important; }
html.is-app .app-done, html.app-installed .app-done { display: inline-flex; }
html.is-app .only-installable, html.is-app .only-ios { display: none !important; }

/* the phone mock */
.phone { justify-self: center; width: 230px; aspect-ratio: 9 / 18.5; border-radius: 38px; padding: 12px; background: #0b1b2e; box-shadow: 0 30px 60px rgba(0, 0, 0, .45), inset 0 0 0 2px rgba(255, 255, 255, .12); }
.phone-screen { height: 100%; border-radius: 28px; padding: 38px 14px; box-sizing: border-box; display: grid; align-content: start; gap: 18px;
  background: linear-gradient(180deg, rgba(10, 32, 56, .25), rgba(10, 32, 56, .55)), url("../img/about-lake.jpg") center / cover; }
.ps-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ps-icon { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ps-icon img, .ps-icon i { width: 42px; height: 42px; border-radius: 11px; display: block; background: #fff; }
.ps-icon img { box-shadow: 0 0 0 2px var(--pc-gold-soft, #e3bb67), 0 6px 16px rgba(0, 0, 0, .35); animation: pop 2.4s ease-in-out infinite; }
.ps-icon.ghost i { background: rgba(255, 255, 255, .35); }
.ps-icon small { font-size: 8.5px; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); white-space: nowrap; }
.ps-icon.ghost small { opacity: .7; }
@keyframes pop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* steps */
.steps-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.steps-grid .pc-card + .pc-card { margin-top: 0; }
html[data-os="ios"] .os-ios, html[data-os="android"] .os-android, html[data-os="desktop"] .os-desktop { order: -1; border: 2px solid var(--pc-gold-soft, #e3bb67); }
.os-card .btn { margin: 4px 0 14px; }
.how-steps { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; }
.how-steps li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.5; color: #33404c; }
.how-steps b { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; background: var(--pc-navy, #123a63); color: #fff; font-size: 14px; }
.how-steps strong { color: var(--pc-navy, #123a63); }
.icon.inline { display: inline-block; width: 17px; height: 17px; vertical-align: -3px; color: var(--pc-teal, #1c6b8c); }

.perk-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 26px 0; }
.perk { display: flex; gap: 12px; align-items: flex-start; background: #fff; border-radius: 16px; padding: 18px; border: 1px solid var(--pc-line, #e4e1d9); }
.perk > .icon { width: 36px; height: 36px; padding: 8px; box-sizing: border-box; border-radius: 10px; background: #fbf4e6; color: var(--pc-gold, #c38d2c); }
.perk strong { display: block; color: var(--pc-navy, #123a63); }
.perk span { color: var(--pc-muted, #5d6873); font-size: 14px; line-height: 1.45; }

.fb-card { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; background: linear-gradient(90deg, #eef4fe, #fff) !important; border-color: #cddcf6 !important; }
.fb-logo { width: 56px; height: 56px; flex: 0 0 56px; filter: drop-shadow(0 4px 12px rgba(24, 119, 242, .35)); }
.fb-card > div { flex: 1; min-width: 240px; }
.fb-card h2 { margin: 0 0 4px; font-family: var(--pc-serif, Georgia, serif); color: var(--pc-navy, #123a63); font-size: 24px; }
.fb-card p { margin: 0; color: var(--pc-muted, #5d6873); }
.btn-fb { background: #1877f2; color: #fff; }
.btn-fb:hover { background: #166fe0; }
.app-fine { display: flex; gap: 8px; align-items: flex-start; margin-top: 18px; }
.app-fine .icon { width: 16px; height: 16px; margin-top: 2px; }

@media (max-width: 1080px) {
  .steps-grid { grid-template-columns: minmax(0, 1fr); }
  .perk-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .app-hero-row { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .phone { width: 190px; }
  .perk-row { grid-template-columns: minmax(0, 1fr); }
}