/* UmAh guides: article pages, the guides hub, Privacy, Support and 404. Tokens from /styles.css. */
.guide { background: var(--canvas); }
.guide-header { position: static; display: flex; align-items: center; justify-content: space-between; padding: max(22px, env(safe-area-inset-top)) var(--gutter) 0; }
.guide-header-link { font-size: 0.9375rem; font-weight: 600; color: var(--ink-2); text-decoration: none; }
.guide-header-link:hover { color: var(--ink); text-decoration: underline; }
.guide-article { max-width: 44rem; margin: 0 auto; padding: clamp(32px, 6vw, 56px) clamp(20px, 5vw, 32px) 72px; color: var(--ink); }
.guide-article .eyebrow a { color: var(--ink-2); text-decoration: none; }
.guide-article .eyebrow a:hover { color: var(--ink); }
.guide-article h1 { margin: 0 0 18px; font: 500 clamp(2rem, 5vw, 2.875rem)/1.08 var(--serif); letter-spacing: -0.02em; text-wrap: balance; }
.guide-article .answer { margin: 0 0 32px; font-size: clamp(1.125rem, 2.2vw, 1.25rem); line-height: 1.55; text-wrap: pretty; }
.guide-article h2 { margin: 40px 0 12px; font: 500 clamp(1.375rem, 3vw, 1.625rem)/1.2 var(--serif); letter-spacing: -0.01em; }
.guide-article h3 { margin: 28px 0 8px; font: 600 1.125rem/1.3 var(--sans); }
.guide-article p, .guide-article li { line-height: 1.65; text-wrap: pretty; }
.guide-article p { margin: 0 0 16px; }
.guide-article ul, .guide-article ol { margin: 0 0 18px; padding-left: 1.3em; }
.guide-article li { margin: 0 0 8px; }
.guide-article a { color: var(--ink); text-decoration-color: var(--coral); text-underline-offset: 2px; }
.guide-article a:hover { color: var(--coral); }
.guide-article sup { font-size: 0.7em; line-height: 0; margin-left: 1px; }
.guide-article sup a { text-decoration: none; padding: 0 1px; color: var(--coral); }
.table-wrap { overflow-x: auto; margin: 8px 0 24px; }
.guide-article table { width: 100%; border-collapse: collapse; font-size: 0.9688rem; }
.guide-article th, .guide-article td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.guide-article thead th { font-weight: 600; color: var(--ink-2); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; }
.guide-article tbody th { font-weight: 600; }
.in-short { margin: 40px 0 0; padding: 20px 24px 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m); }
.in-short h2 { margin: 0 0 10px; font: 600 0.75rem/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
/* the app card: the one coral block on a guide page */
.app-card { margin: 32px 0 0; padding: 22px 24px; border-radius: var(--radius-m); background: linear-gradient(135deg, var(--coral-soft), var(--coral)); color: #fff; }
.app-card p { margin: 0 0 14px; color: rgba(255, 255, 255, 0.92); }
.app-card .app-card-name { margin: 0 0 6px; font: 500 1.375rem/1.1 var(--serif); color: #fff; }
.app-card .app-card-actions { margin: 0; display: flex; gap: 10px; flex-wrap: wrap; }
.app-card .app-card-link, .app-card .app-card-soon { display: inline-block; padding: 11px 18px; border-radius: 999px; font: 600 0.9375rem/1 var(--sans); text-decoration: none; }
.app-card .app-card-link { background: #fff; color: var(--ink); }
.app-card .app-card-link:hover { background: var(--coral-wash); }
.app-card .app-card-soon { border: 1px solid rgba(255, 255, 255, 0.6); color: #fff; }
.more-guides h2, .sources h2 { font-size: 1.25rem; }
.more-guides ul { list-style: none; padding: 0; }
.sources ol { padding-left: 1.4em; }
.sources li { font-size: 0.875rem; color: var(--ink-2); line-height: 1.5; overflow-wrap: anywhere; }
.sources li:target { background: var(--coral-wash); }
.hub-group { margin-top: 24px; }
.hub-list { list-style: none; padding: 0 !important; display: grid; gap: 12px; }
.hub-list li { margin: 0; padding: 16px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }
.hub-list a { font: 600 1.0625rem/1.3 var(--sans); color: var(--ink); text-decoration: none; }
.hub-list a:hover { text-decoration: underline; }
.hub-list p { margin: 4px 0 0; font-size: 1rem; color: var(--ink-2); }
.date { margin: -8px 0 20px; font-size: 0.9375rem; }