/* Line 21575 (giving-agents-home-page-live-host-causes-and-three-ways-in-r1): the Giving Agents home page. Google path:
   the .ns-gp token set from ns-tokens.css (light by default, dark under prefers-color-scheme: dark), one column at
   375 px, the host beside the hero line from 840 px. */
body.ga-body { margin: 0; background: var(--ns-bg); }
.ga {
    font-family: var(--ns-font, Roboto, 'Segoe UI', system-ui, -apple-system, Arial, sans-serif);
    color: var(--ns-text);
    background: var(--ns-bg);
    line-height: 1.55;
    max-width: 1080px;
    margin: 0 auto;
    padding: 16px;
    box-sizing: border-box;
}
.ga *, .ga *::before, .ga *::after { box-sizing: border-box; }
.ga a { color: var(--ns-gold-light); }
.ga a:focus-visible, .ga-button:focus-visible { outline: 3px solid var(--ns-gold); outline-offset: 2px; }
.ga h1 { font-size: clamp(1.75rem, 6vw, 2.75rem); line-height: 1.15; margin: 0 0 12px; font-weight: 600; letter-spacing: -.01em; }
.ga h2 { font-size: 1.5rem; margin: 0 0 16px; font-weight: 600; }
.ga h3 { font-size: 1.1rem; margin: 0 0 6px; font-weight: 600; }
.ga-kicker { margin: 0 0 8px; color: var(--ns-text-2); font-size: .9rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.ga-lead { font-size: 1.1rem; color: var(--ns-text-2); margin: 0 0 20px; max-width: 60ch; }
.ga-muted { color: var(--ns-text-2); }
.ga-small { font-size: .9rem; margin-top: 16px; }
.ga-button {
    display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 22px;
    border-radius: 999px; background: var(--ns-gold); color: var(--ns-on-accent) !important; text-decoration: none; font-weight: 600;
}
.ga-button:hover { filter: brightness(1.06); }

.ga-hero { display: grid; gap: 20px; padding: 24px 0 32px; }
.ga-host { display: grid; justify-items: center; gap: 8px; }
.ga-host alive-agent { --alive-agent-size: 240px; width: 240px; height: 240px; display: block; }
.ga-host-note { margin: 0; font-size: .9rem; color: var(--ns-text-2); text-align: center; max-width: 34ch; }

.ga-section { padding: 28px 0; border-top: 1px solid var(--ns-border); }
.ga-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.ga-steps li, .ga-cause, .ga-way, .ga-receipt, .ga-stat {
    background: var(--ns-card); border: 1px solid var(--ns-border); border-radius: var(--ns-radius); padding: 16px;
}
.ga-steps li { display: grid; gap: 4px; }
.ga-steps span { color: var(--ns-text-2); }

.ga-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.ga-stat { display: grid; gap: 2px; text-align: center; }
.ga-stat b { font-size: 1.5rem; }
.ga-stat span { color: var(--ns-text-2); font-size: .9rem; }
.ga-causes, .ga-receipts { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.ga-cause p { margin: 0; }
.ga-sub { margin-top: 24px !important; }
.ga-receipt { display: grid; gap: 2px; overflow-wrap: anywhere; }
.ga-receipt code { font-size: .85em; }

.ga-ways { display: grid; gap: 12px; }
.ga-way { display: grid; gap: 8px; align-content: start; }
.ga-way p { margin: 0 0 8px; color: var(--ns-text-2); }
.ga-way .ga-button { justify-self: start; }

.ga-foot { padding: 24px 0 8px; border-top: 1px solid var(--ns-border); color: var(--ns-text-2); font-size: .9rem; }

@media (min-width: 840px) {
    .ga { padding: 24px 32px; }
    .ga-hero { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; padding: 48px 0; }
    .ga-host alive-agent { --alive-agent-size: 320px; width: 320px; height: 320px; }
    .ga-steps, .ga-ways { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ga-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .ga-causes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}