.surface-card{--surface-accent:var(--text-warm-white);border:1px solid var(--border-secondary);background:linear-gradient(180deg, color-mix(in srgb, var(--ds-white) 3.5%, var(--bg-card)) 0%, var(--bg-card) 55%);box-shadow:inset 0 1px 0 0 color-mix(in srgb, var(--ds-white) 6%, transparent), 0 1px 2px 0 #0006, 0 14px 30px -18px #0000008c;transition:border-color .4s var(--ease-out), box-shadow .4s var(--ease-out);position:relative;overflow:hidden}.surface-card:hover{border-color:var(--border-primary);box-shadow:inset 0 1px 0 0 color-mix(in srgb, var(--ds-white) 9%, transparent), 0 1px 2px 0 #00000073, 0 22px 42px -20px #000000a6}.surface-card-glow{pointer-events:none;opacity:0;transition:opacity 1.1s var(--ease-out);background:radial-gradient(125% 125% at 100% 100%, color-mix(in srgb, var(--surface-accent) 9%, transparent), transparent 60%);position:absolute;inset:0}.surface-card:hover .surface-card-glow{opacity:1}.surface-card-cta{z-index:1;padding:var(--spacing-sm) var(--spacing-xl);border-radius:var(--radius-xs);background:var(--text-warm-white);font-size:var(--font-size-sm);color:var(--ds-brand-950);clip-path:inset(0 100% 0 0 round var(--radius-xs));opacity:0;transition:clip-path .46s var(--ease-out), opacity .28s var(--ease-out), transform .46s var(--ease-out), background .25s var(--ease-out);border:none;align-self:flex-start;align-items:center;margin-top:auto;font-weight:500;text-decoration:none;display:inline-flex;position:relative;transform:translate(-6px)}.surface-card:hover .surface-card-cta,.surface-card:focus-within .surface-card-cta{clip-path:inset(0 0 0 0 round var(--radius-xs));opacity:1;transform:translate(0)}.surface-card-cta:hover{background:var(--ds-white)}.surface-card-cta-arrow{margin-left:var(--spacing-sm)}@property --surface-mx{syntax:"<length>";inherits:true;initial-value:0}@property --surface-my{syntax:"<length>";inherits:true;initial-value:0}.surface-card--cursor{transition:border-color .4s var(--ease-out), box-shadow .4s var(--ease-out), --surface-mx .28s var(--ease-out), --surface-my .28s var(--ease-out)}.surface-card--cursor .surface-card-glow{background:radial-gradient(ellipse 90% 75% at var(--surface-mx,50%) var(--surface-my,50%), color-mix(in srgb, var(--surface-accent) 6%, transparent) 0%, color-mix(in srgb, var(--surface-accent) 2.5%, transparent) 38%, transparent 80%)}.surface-card--muted{opacity:.62}.surface-card--muted:hover{border-color:var(--border-secondary);box-shadow:inset 0 1px 0 0 color-mix(in srgb, var(--ds-white) 6%, transparent), 0 1px 2px 0 #0006, 0 14px 30px -18px #0000008c}.surface-card--muted .surface-card-glow{display:none}