/* ═════════════════════════════════════════════════════════════════
   SeaFly content pages (services, about, contact, FAQ, legal) — on top of index3.css + index4.css (body.x3-ui.x4-ui.pg-ui · prefix pg-).
═════════════════════════════════════════════════════════════════ */
body.pg-ui .hero { padding: 84px 20px 20px; }
body.pg-ui .hero-content { max-width: 820px; }
.pg-crumbs { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px; padding: 5px 12px 5px 6px; border-radius: 999px; border: 1px solid var(--border); background: var(--x3-side); font-size: .8rem; color: var(--text-2); }
.pg-crumbs a { display: inline-flex; align-items: center; gap: 7px; color: var(--text-1); text-decoration: none; font-weight: 600; }
.pg-crumbs img { border-radius: 6px; }
.pg-crumbs span[aria-hidden] { color: var(--text-3); }
h1.pg-title { font-size: clamp(2rem, 4.8vw, 3.2rem); letter-spacing: -.04em; line-height: 1.08; margin-bottom: 16px; }
.pg-lead { max-width: 660px; margin-bottom: 22px; }

.pg-examples { grid-template-columns: repeat(3, 1fr); }
.pg-examples .x3-starter small { color: var(--text-1); font-size: .88rem; }
.pg-cards { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pg-cards li { display: flex; gap: 14px; align-items: flex-start; padding: 20px; border-radius: 18px; border: 1px solid var(--border); background: var(--bg-card); }
.pg-cards .x3-ic { flex-shrink: 0; width: 38px; height: 38px; border-radius: 11px; color: var(--accent); }
.pg-cards p { margin: 2px 0 0; font-size: .92rem; }
.pg-cards a { color: var(--accent); text-decoration: none; font-weight: 600; }
.pg-two { align-items: start; }
.pg-needs { padding: 26px; border-radius: 22px; border: 1px solid var(--border); background: var(--x3-side); }
.pg-needs h3 { font-size: 1.05rem; }
.pg-btn { border: 0; cursor: pointer; font: inherit; font-weight: 600; margin-top: 20px; }
.pg-small { font-size: .82rem !important; color: var(--text-3) !important; margin: 10px 0 0; }
.pg-more { margin: 22px 0 0; font-size: .92rem; }
.pg-more a { color: var(--accent); font-weight: 600; text-decoration: none; }
.pg-more a:hover, .pg-cards a:hover { text-decoration: underline; }
.pg-links { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.pg-links a { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-1); text-decoration: none; font-weight: 600; font-size: .93rem; transition: background .15s, border-color .15s; }
.pg-links a:hover { background: var(--x3-side); border-color: var(--border-lit); }
.pg-links a > span:nth-child(2) { flex: 1; }
.pg-links a > svg { color: var(--text-3); }
.pg-links .x3-ic { width: 38px; height: 38px; border-radius: 11px; }
.pg-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pg-facts li { display: flex; gap: 14px; align-items: center; padding: 18px; border-radius: 18px; border: 1px solid var(--border); background: var(--bg-card); }
.pg-facts .x3-ic { flex-shrink: 0; color: var(--accent); }
.pg-facts .pg-fact { display: block; font-size: 1.1rem; letter-spacing: -.02em; color: var(--text-1); }
.pg-facts span:not(.x3-ic) { font-size: .9rem; color: var(--text-2); }
.pg-address { margin-top: 18px; display: flex; align-items: center; gap: 8px; font-style: normal; font-size: .92rem; color: var(--text-2); }

/* legal texts: calm reading page, the chat stays available via its button */
body.pg-ui .pg-legal ~ * { }
body.pg-ui.pg-legal-ui .hero { padding-bottom: 0; }
body.pg-ui.pg-legal-ui #chatInterface:not(.chat-popped) { display: none; }
.pg-legal .x3-sec { padding-top: 24px; }
.pg-note { padding: 12px 16px; border-radius: 12px; background: var(--x3-side); border: 1px solid var(--border); font-size: .88rem !important; }
.pg-note a { color: var(--accent); }
.pg-legal-body { color: var(--text-2); line-height: 1.7; font-size: .97rem; }
.pg-legal-body h2 { font-size: 1.2rem; margin: 34px 0 10px; letter-spacing: -.01em; }
.pg-legal-body p, .pg-legal-body li { color: var(--text-2); }
.pg-legal-body a { color: var(--accent); }
.pg-legal-body ul { padding-left: 20px; }
.pg-legal-body .modal-badge { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; padding: 4px 10px; border-radius: 999px; background: var(--x3-side); border: 1px solid var(--border); }

@media (max-width: 960px) {
    .pg-cards { grid-template-columns: 1fr 1fr; }
    .pg-examples { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    body.pg-ui .hero { padding: 70px 16px 16px; }
    .pg-cards { grid-template-columns: 1fr; }
    .pg-needs { padding: 20px; }
}
.pg .x4-reveal > p + p, .pg .x3-two > div > p + p { margin-top: 12px; }