/* ══════════════════════════════════════════════
   Qiia public site: page-level layout on top of the shared
   design system (css/styles.css, copied from apps/ux).
   Replaces the mockups' inline styles so the CSP needs no
   'unsafe-inline'. Tokens only, except the Telegram mock
   overrides below (contrast).
   ══════════════════════════════════════════════ */

/* Skip link: hidden until focused */
.skip-link { position: absolute; left: 16px; top: -64px; z-index: 30; padding: 8px 16px; border-radius: var(--radius); background: var(--accent); color: var(--on-accent); font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 16px; }

/* Header */
.brand-link { padding: 0; text-decoration: none; color: var(--text); }
.web-nav .links a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; }
.web-nav .links a[aria-current="page"] { color: var(--text); font-weight: 600; }

/* 44 px touch targets (architecture-ref → Design Standards) */
.web .btn { min-height: 44px; }
.web .btn-lg { min-height: 48px; }

/* Section titles on the public pages */
.web .section-title { font-size: 1.5rem; margin-bottom: 16px; }

/* Landing */
.hero .badge + h1 { margin-top: 16px; }
.hero .phone { justify-self: center; width: 100%; }
/* .hero p (lead text) must not restyle the paragraphs inside the Telegram mock */
.hero .phone p { font-size: inherit; color: inherit; margin: 0; }
.hero .phone p + p { margin-top: 6px; }
/* Column minimums capped at 100% so grids reflow down to 320 px */
.features { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.web .grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.web .grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.split-card { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 24px; align-items: center; }
.split-card .section-lead { margin: 8px 0 0; }
.cta { text-align: center; padding: 24px 0 16px; }
.cta .section-lead { margin: 8px auto 24px; }

/* Legal */
.prose h1 { font-size: 1.875rem; }
.prose .updated { color: var(--text-2); }
.prose .note { margin-bottom: 24px; }

/* Footer: --text-3 is below 4.5:1 on --bg, so the footer uses --text-2 */
.web-foot { color: var(--text-2); }
.web-foot a { display: inline-flex; align-items: center; min-height: 44px; }
.foot-note { margin-top: 8px; }

/* Telegram mock on the landing page: the design hub's muted mock colours are below
   4.5:1, so the public page darkens (light) or lightens (dark) them. */
.web .phone { --tg-meta: #5C6957; --tg-link: #22669C; --tg-name-bot: #2E7A2A; }
@media (prefers-color-scheme: dark) {
    .web .phone { --tg-meta: #98A7B5; --tg-link: #71BAFA; --tg-name-bot: #7BC862; }
}

@media (max-width: 760px) {
    /* the 44 px rule above outranks styles.css's .hide-sm; hide the section links again */
    .web-nav .links a.hide-sm { display: none; }
    .web-nav, .web-main { padding-left: 16px; padding-right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .web .btn { transition: none; }
}