/* The Vitru page language for a whole page (components/glass/GlassPage + GlassCard): an ink field, the kit's aurora (.aurora in kit.css) drifting behind it, the sections as glass cards.
   Tokens only (SP-14.09: no colour literals). Text is ink on a near-opaque paper tint, so it holds WCAG AA over any aurora colour; where backdrop-filter is not supported the tint turns opaque.
   prefers-reduced-motion is the kit's: it stops the drift. Logical properties throughout (he = rtl, en = ltr). */
.glass-page { position: relative; isolation: isolate; overflow: hidden; margin-block: 0; padding: clamp(24px, 5vw, 64px) clamp(12px, 4vw, 48px); background: var(--vit-ink); }
.glass-page .gp-inner { position: relative; max-width: 860px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--vit-space-5); }
.gp-card { color: var(--vit-ink); background: color-mix(in srgb, var(--vit-paper) 94%, transparent); border: 1px solid color-mix(in srgb, var(--vit-paper) 60%, transparent); border-radius: 14px; padding: clamp(18px, 3vw, var(--vit-space-6)); }
@supports (backdrop-filter: blur(1px)) { .gp-card { background: color-mix(in srgb, var(--vit-paper) 86%, transparent); backdrop-filter: blur(14px) saturate(1.2); } }
.gp-card > :first-child { margin-top: 0; }
.gp-card > :last-child { margin-bottom: 0; }
.gp-card h1 { font-size: clamp(26px, 5vw, 40px); line-height: 1.2; margin-bottom: var(--vit-space-3); }
.gp-card h2 { font-size: 22px; line-height: 1.25; margin-bottom: var(--vit-space-2); }
.gp-card p { max-width: none; }
.gp-card [data-badge] { display: inline-block; margin-inline-start: var(--vit-space-2); padding: 1px 10px; border: 1.5px solid var(--vit-ink); border-radius: 999px; font-size: 14px; font-weight: 700; background: var(--vit-paper); vertical-align: middle; }
.gp-card [data-badge="recommended"] { background: var(--vit-clay); color: var(--vit-on-clay, var(--vit-ink)); }
.gp-card .gp-steps { padding-inline-start: 1.4em; }
.gp-card .gp-demo { display: flex; flex-direction: column; gap: var(--vit-space-2); margin: var(--vit-space-3) 0; }
.gp-card .gp-bubble { max-width: 38rem; padding: var(--vit-space-3) var(--vit-space-4); border-radius: 12px; border: 1px solid var(--vit-ink); background: var(--vit-paper); }
.gp-card .gp-bubble.gp-q { align-self: flex-start; }
.gp-card .gp-bubble.gp-a { align-self: flex-end; background: color-mix(in srgb, var(--vit-clay) 22%, var(--vit-paper)); }