.v3 .sa-def { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-4); align-items: start; margin-block: var(--s-4); max-inline-size: 36em; }
.v3 .sa-def .lp-l4 { margin: 0; font-size: var(--t-body); }
.v3 .sa-moss { display: block; inline-size: 48px; block-size: 48px; flex: none; } .v3 .sa-moss svg, .v3 .sa-face svg { display: block; inline-size: 100%; block-size: 100%; }
.v3 .sa-moss-cap { margin: var(--s-2) 0 0; color: var(--c-muted); font-size: var(--t-small); }
.v3 .lp-st { margin-block: 0 var(--s-5); color: var(--c-text); font-weight: var(--w-strong); }
.v3 .sa-doors { display: grid; gap: var(--s-3); margin: 0; padding: 0; list-style: none; max-inline-size: 36em; }
.v3 .sa-doors .btn { inline-size: 100%; min-height: 48px; justify-content: center; }
@media (min-width: 43.75em) { .v3 .sa-doors { grid-template-columns: repeat(3, auto); justify-content: start; } .v3 .sa-doors .btn { inline-size: auto; padding-inline: var(--s-6); } }
.v3 .sa-you { max-inline-size: 36em; margin-block-start: var(--s-8); } .v3 .sa-you[hidden] { display: none; }
.v3 .sa-you-h { font-size: var(--t-stat); margin-block: 0 var(--s-3); }
.v3 .sa-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-4); padding: var(--s-4); background: var(--c-surface); border: 1px dashed var(--c-edge); border-radius: var(--step); }
.v3 .sa-face { display: block; inline-size: 64px; block-size: 64px; }
.v3 .sa-card h3 { margin: 0; font-size: var(--t-stat); overflow-wrap: anywhere; } .v3 .sa-card h4 { margin: var(--s-4) 0 var(--s-1); font-size: var(--t-small); color: var(--c-muted); }
.v3 .sa-card p, .v3 .sa-card ul { margin: var(--s-2) 0 0; } .v3 .sa-card ul { padding-inline-start: var(--s-5); overflow-wrap: anywhere; }
.v3 .sa-line { color: var(--c-text-read); font-size: var(--t-small); }
.v3 .sa-in { animation: sa-in .32s cubic-bezier(.23, 1, .32, 1) both; }
@keyframes sa-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .v3 .sa-in { animation: none; } }
.v3 .sa-done .ctas, .v3 .sa-form .ctas { margin-block: var(--s-4) 0; display: flex; flex-wrap: wrap; gap: var(--s-3); }
.v3 .sa-done .btn, .v3 .sa-form .btn { min-height: 48px; }
.v3 .sa-form { display: grid; gap: var(--s-3); max-inline-size: 36em; }
.v3 .sa-step { margin: 0; color: var(--c-muted); font-size: var(--t-small); }
.v3 .sa-f { display: grid; gap: var(--s-2); }
.v3 .sa-f label, .v3 .sa-lbl { font-weight: var(--w-strong); margin: 0; } .v3 .sa-help { margin: 0; color: var(--c-muted); font-size: var(--t-small); }
.v3 .sa-f :is(input, textarea) { inline-size: 100%; min-height: 48px; padding: var(--s-3) var(--s-4); background: var(--c-surface-2); color: var(--c-text); border: 1px solid var(--c-control); border-radius: var(--step); font: inherit; }
.v3 .sa-f :is(input, textarea):focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.v3 .sa-f :is(input, textarea)[aria-invalid="true"] { border-color: var(--c-danger, #e5484d); }
.v3 .sa-err { margin: 0; color: var(--c-text); font-weight: var(--w-strong); } .v3 .sa-err[hidden] { display: none; }
.v3 .sa-prev { display: block; inline-size: 64px; block-size: 64px; margin-block-start: var(--s-3); }
.v3 .sa-fees { margin-block: var(--s-4) 0; }
.v3 .sa-sec { margin-block-start: var(--s-5); } .v3 .sa-sec[hidden], .v3 [data-for][hidden] { display: none; }
.v3 .sa-sec h2 { font-size: var(--t-stat); margin-block: 0 var(--s-3); }
.v3 .sa-band { position: sticky; top: calc(var(--hd-h, 56px) + var(--ribbon-now, 0px)); z-index: 5; margin-block: var(--s-4) 0; padding: var(--s-3) var(--s-4); background: var(--c-surface-2); border: 1px solid var(--c-edge); border-radius: var(--step); }
.v3 .sa-list { margin: 0; padding-inline-start: var(--s-5); } .v3 .sa-empty { color: var(--c-muted); }
.v3 .sa-next { margin-block: var(--s-3) 0; }
.sa-nav .sa-dot::after { content: ""; display: inline-block; inline-size: 6px; block-size: 6px; margin-inline-start: var(--s-2); background: var(--warm-amber); vertical-align: middle; }
.ux-demo.sa-strip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.ux-demo.sa-strip .tlink { margin-inline-start: auto; font-weight: var(--w-strong); }
.sa-all-l { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); margin: var(--s-3) 0 0; padding: 0; list-style: none; }
.sa-all-l a { display: inline-flex; align-items: center; min-height: 44px; }
