:root{--sv:linear-gradient(115deg,#e9ecf0 0%,#cfd4dc 20%,#f7f8fa 38%,#bcc3cd 56%,#e6e9ee 76%,#c7ccd5 100%);--gd:linear-gradient(115deg,#d6ab45 0%,#f3d98a 19%,#fff0bf 34%,#c99a2b 52%,#ecc866 72%,#b3841f 100%)}
.tier{position:relative;isolation:isolate;overflow:hidden;transition:box-shadow .3s}
.tier__n{display:block;font-size:.78rem;line-height:1.35}
/* metal faces: brushed lines over a banded gradient, bevel edges, soft shadow; no flat colours */
.tier--silver{background:repeating-linear-gradient(90deg,rgba(255,255,255,.2) 0 1px,rgba(70,78,92,.03) 1px 2px),var(--sv);border-color:#aab1bd;color:#1b1e24;box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(80,88,104,.28),0 10px 24px -14px rgba(50,58,74,.55)}
.tier--gold{background:repeating-linear-gradient(90deg,rgba(255,250,222,.22) 0 1px,rgba(110,72,0,.05) 1px 2px),var(--gd);border-color:#a37719;color:#2b1d03;box-shadow:inset 0 1px 0 rgba(255,248,214,.9),inset 0 -1px 0 rgba(120,80,0,.35),0 12px 28px -14px rgba(130,90,10,.6)}
.tier--silver p,.tier--silver small{color:#3a3f49}
.tier--gold p,.tier--gold small{color:#2b1d03}
.tier--silver .btn{background:#1b1e24;border-color:#1b1e24;color:#eef0f3}
.tier--gold .btn{background:#2b1d03;border-color:#2b1d03;color:#f6e3a4}
.tier--silver .btn--ghost{background:none;color:#1b1e24}
.tier--gold .btn--ghost{background:none;color:#2b1d03}
/* scroll-linked light: JS sets --p (0 to 1) only while the card is near the screen */
.tier--silver::after,.tier--gold::after,.tier--gold::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .7s;will-change:transform}
.tier--silver::after{background:linear-gradient(105deg,transparent 36%,rgba(255,255,255,0) 41%,rgba(255,255,255,.85) 50%,rgba(255,255,255,0) 59%,transparent 64%)}
.tier--gold::after{background:linear-gradient(105deg,transparent 34%,rgba(255,252,235,0) 40%,rgba(255,252,235,.9) 50%,rgba(255,252,235,0) 60%,transparent 66%)}
.tier--gold::before{background:radial-gradient(55% 80% at 50% 0%,rgba(255,244,196,.55),transparent 70%);transform:translate3d(calc(var(--p,0)*60% - 30%),0,0)}
.tier--silver::after,.tier--gold::after{transform:translate3d(calc(var(--p,0)*240% - 120%),0,0)}
.lv-near.tier--silver::after,.lv-near.tier--gold::after,.lv-near.tier--gold::before{opacity:1}
/* tap: one clean gleam crosses the card, then the form opens */
.lv-beam{position:absolute;inset:0;z-index:-1;pointer-events:none;transform:translate3d(-110%,0,0);background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,0) 32%,rgba(255,255,255,.95) 50%,rgba(255,255,255,0) 68%,transparent 80%);animation:lvb .7s cubic-bezier(.45,0,.2,1) forwards}
.lv-go-g .lv-beam{background:linear-gradient(105deg,transparent 20%,rgba(255,250,225,0) 32%,rgba(255,250,225,1) 50%,rgba(255,250,225,0) 68%,transparent 80%);animation-duration:.8s}
@keyframes lvb{to{transform:translate3d(110%,0,0)}}
.lv-go-s{box-shadow:inset 0 1px 0 #fff,0 0 0 1px #c5cbd5,0 0 26px rgba(190,198,214,.75)}
.lv-go-g{box-shadow:inset 0 1px 0 rgba(255,248,214,.9),0 0 0 1px #d2a53a,0 0 30px rgba(236,196,90,.7)}
/* the form follows the level chosen: chips, send button and focus ring take the metal */
.brief[data-lv=p] .chip[aria-pressed=true]{background:#e9ecf0;border-color:#aab1bd;color:#1b1e24}
.brief[data-lv=p] .chip::before{background:var(--sv)}
.brief[data-lv=g] .chip[aria-pressed=true]{background:#f3d98a;border-color:#b3841f;color:#2b1d03}
.brief[data-lv=g] .chip::before{background:var(--gd)}
.brief[data-lv=p] .btn:not(.btn--ghost){background:var(--sv);border-color:#aab1bd;color:#1b1e24}
.brief[data-lv=g] .btn:not(.btn--ghost){background:var(--gd);border-color:#a37719;color:#2b1d03}
.brief[data-lv=p] input:focus-visible,.brief[data-lv=p] textarea:focus-visible{outline-color:#8a93a3}
.brief[data-lv=g] input:focus-visible,.brief[data-lv=g] textarea:focus-visible{outline-color:#b3841f}
@media (prefers-reduced-motion:reduce){.tier--silver::after,.tier--gold::after,.tier--gold::before{display:none}}