/* SIMUL8OR UPGRADE SUCCESS v2 — Option A member card.
   Load after s8-content.css (its body:has(.s8c) block releases the shell so the page scrolls).
   Gold = reward surface, blue = primary action, green = confirmation only. */

/* --s8-gold-fg is a kit v0.3 token that s8-tokens.css (v0.1) / s8-celebrate.css don't define yet. */
.su{--s8-gold-fg:#FFD489;position:relative;overflow:hidden;font-feature-settings:var(--s8-num-feat)}
.su *{box-sizing:border-box}
.su a{color:var(--s8-accent-fg);text-decoration:none;transition:color var(--s8-t)}
.su a:hover{color:#fff}
.su-wrap{position:relative}
.su-i{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* type */
.su-eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:var(--s8-fs-micro);font-weight:600;letter-spacing:var(--s8-ls-caps);text-transform:uppercase;color:var(--s8-gold-fg)}
.su-eyebrow::before{content:"";width:16px;height:1px;background:var(--s8-gold-line)}
.su-eyebrow--blue{color:var(--s8-accent-fg)}
.su-eyebrow--blue::before{background:var(--s8-accent-line)}
.su-h1{margin:var(--s8-4) 0 0;font-size:clamp(34px,4.6vw,58px);line-height:1.02;letter-spacing:-.028em;font-weight:600;color:#fff;text-wrap:balance}
.su-h1 em{font-style:normal;background:linear-gradient(180deg,#FFE2A8,var(--s8-gold) 60%,var(--s8-gold-lo));-webkit-background-clip:text;background-clip:text;color:transparent}
.su-h2{margin:var(--s8-3) 0 0;font-size:var(--s8-fs-3xl);line-height:1.15;letter-spacing:var(--s8-ls-tight);font-weight:600;color:#fff;text-wrap:balance}
.su-lede{margin:var(--s8-5) 0 0;max-width:52ch;font-size:clamp(16px,1.4vw,19px);line-height:1.55;color:var(--s8-fg-2);text-wrap:pretty}

/* buttons */
.su-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:46px;padding:0 22px;border:1px solid transparent;border-radius:var(--s8-r-lg);background:var(--s8-panel-2);font:inherit;font-size:var(--s8-fs-base);font-weight:600;white-space:nowrap;cursor:pointer;transition:background var(--s8-t) var(--s8-ease),border-color var(--s8-t),transform var(--s8-t),box-shadow var(--s8-t)}
.su-btn:focus-visible{outline:none;box-shadow:var(--s8-focus)}
.su a.su-btn--pri,.su a.su-btn--pri:hover{color:#fff}
.su-btn--pri{background:var(--s8-accent);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 28px -12px rgba(43,143,224,.8)}
.su-btn--pri:hover{background:var(--s8-accent-hi);transform:translateY(-1px)}
.su-btn--pri .su-i{transition:transform var(--s8-t)}
.su-btn--pri:hover .su-i{transform:translateX(3px)}
.su a.su-btn--line,.su a.su-btn--line:hover{color:var(--s8-fg)}
.su-btn--line{background:transparent;border-color:var(--s8-line-2)}
.su-btn--line:hover{background:var(--s8-hover);border-color:var(--s8-line-3)}
.su-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s8-3);margin-top:var(--s8-7)}

/* secure-account band: ask → done (signed in) / skip (collapsed reminder) */
.su-sec{position:relative;border:1px solid var(--s8-gold-line);border-radius:14px;background:linear-gradient(180deg,rgba(245,177,74,.07),rgba(245,177,74,.02) 60%),var(--s8-panel);transition:border-color .4s,background .4s}
.su-sec__k{display:inline-flex;align-items:center;gap:8px;font-size:var(--s8-fs-micro);font-weight:600;letter-spacing:var(--s8-ls-caps);text-transform:uppercase;color:var(--s8-gold-fg)}
.su-sec__k .su-i{width:14px;height:14px}
.su-sec h2{margin:6px 0 0;font-size:var(--s8-fs-xl);line-height:1.25;letter-spacing:var(--s8-ls-tight);font-weight:600;color:#fff;text-wrap:balance}
.su-sec p{margin:var(--s8-2) 0 0;font-size:var(--s8-fs-sm);line-height:1.55;color:var(--s8-fg-3);text-wrap:pretty}
/* buttons are the shared .s8-provider (s8-ui.css), stacked like the sign-in modal */
.su-oauth{display:grid;gap:var(--s8-3)}
/* warm the cool panel-2 surface so the buttons sit on the gold band instead of fighting it */
.su-sec .s8-provider{height:42px;border-color:rgba(245,177,74,.22);background:rgba(245,177,74,.05)}
.su-sec .s8-provider:hover{border-color:var(--s8-gold-line);background:rgba(245,177,74,.11)}
.su-skip{padding:0;border:0;background:none;color:var(--s8-fg-4);font:inherit;font-size:var(--s8-fs-xs);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.su-skip:hover{color:var(--s8-fg-2)}
.su-sec__done{display:none;align-items:center;gap:var(--s8-3)}
.su-sec__done .ok{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:50%;background:var(--s8-up-tint);box-shadow:inset 0 0 0 1px var(--s8-up-line);color:var(--s8-up)}
.su-sec__done b{display:block;font-size:var(--s8-fs-md);font-weight:600;color:#fff}
.su-sec__done span{display:block;font-size:var(--s8-fs-sm);color:var(--s8-fg-3)}
.su-sec.is-done{border-color:var(--s8-up-line);background:linear-gradient(180deg,rgba(62,214,155,.06),transparent 70%),var(--s8-panel)}
.su-sec.is-done .su-sec__ask{display:none}
.su-sec.is-done .su-sec__done{display:flex;animation:su-in .45s var(--s8-ease)}
.su-sec.is-skip{border-color:var(--s8-line);background:var(--s8-panel)}
.su-sec.is-skip .su-sec__ask{display:none}
.su-sec__mini{display:none;align-items:center;gap:var(--s8-3);flex-wrap:wrap;font-size:var(--s8-fs-sm);color:var(--s8-fg-3)}
.su-sec__mini .su-i{color:var(--s8-gold)}
.su-sec__mini button{margin-left:auto;padding:0;border:0;background:none;color:var(--s8-accent-fg);font:inherit;font-weight:600;cursor:pointer}
.su-sec.is-skip .su-sec__mini{display:flex;animation:su-in .35s var(--s8-ease)}
@keyframes su-in{from{opacity:0;transform:translateY(6px)}}

/* hero + member card */
.sua__hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:clamp(32px,5vw,80px);align-items:center;padding:clamp(48px,7vw,104px) 0 clamp(40px,5vw,72px)}
.sua__glow{position:absolute;right:-10%;top:-30%;width:900px;height:700px;background:radial-gradient(closest-side,rgba(245,177,74,.13),transparent);pointer-events:none}
.sua__stage{perspective:1100px;display:grid;justify-items:center;gap:var(--s8-4)}
.mcard{position:relative;width:100%;max-width:460px;aspect-ratio:1.586;border-radius:20px;padding:26px 28px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;overflow:hidden;transform:rotateX(var(--rx,6deg)) rotateY(var(--ry,-12deg));transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.8,.2,1);background:radial-gradient(120% 90% at 0% 0%,#3A2A12 0%,transparent 55%),radial-gradient(90% 80% at 100% 100%,#2B1D08 0%,transparent 60%),linear-gradient(140deg,#1E1A14,#0F0E0C 70%);box-shadow:0 0 0 1px rgba(255,201,107,.32),inset 0 1px 0 rgba(255,226,168,.25),0 40px 80px -30px rgba(0,0,0,.9),0 30px 70px -30px rgba(245,177,74,.35);animation:su-cardin 1.1s cubic-bezier(.2,.8,.2,1) both}
.mcard.is-live{transition:transform .08s linear}
.mcard::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.018) 0 2px,transparent 2px 6px);pointer-events:none}
.mcard::after{content:"";position:absolute;inset:-40%;background:linear-gradient(105deg,transparent 40%,rgba(255,226,168,.20) 48%,rgba(255,255,255,.08) 50%,transparent 58%);transform:translateX(var(--sx,-60%));transition:transform .6s;pointer-events:none;mix-blend-mode:screen}
.mcard.is-live::after{transition:none}
@keyframes su-cardin{from{opacity:0;transform:rotateX(24deg) rotateY(-30deg) translateY(40px) scale(.92)}}
.mcard__top{position:relative;display:flex;align-items:center;justify-content:space-between}
.mcard__top img{height:22px;display:block}
.mcard__lvl{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--s8-gold-fg)}
.mcard__chip{position:relative;width:46px;height:34px;border-radius:7px;background:linear-gradient(135deg,#FFE2A8,#C8862A 55%,#FFD489);box-shadow:inset 0 0 0 1px rgba(74,47,4,.4)}
.mcard__chip::before{content:"";position:absolute;inset:8px 0;border-top:1px solid rgba(74,47,4,.45);border-bottom:1px solid rgba(74,47,4,.45)}
.mcard__chip::after{content:"";position:absolute;inset:0 15px;border-left:1px solid rgba(74,47,4,.45);border-right:1px solid rgba(74,47,4,.45)}
.mcard__big{position:relative;font-size:clamp(40px,5.4vw,58px);font-weight:700;letter-spacing:.06em;line-height:1;background:linear-gradient(180deg,#FFF1D2,#F5B14A 55%,#B97A22);-webkit-background-clip:text;background-clip:text;color:transparent}
.mcard__row{position:relative;display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s8-4)}
.mcard__row--mid{align-items:center}
.mcard__row small{display:block;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,226,168,.62)}
.mcard__row b{display:block;margin-top:3px;font-size:var(--s8-fs-md);font-weight:600;letter-spacing:.02em;color:#FFF3DC;font-variant-numeric:tabular-nums}
.mcard__name{min-width:0}
.mcard__name b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mcard__since{text-align:right}
.sua__cap{font-size:var(--s8-fs-xs);color:var(--s8-fg-4);text-align:center}

/* account band */
.sua__sec{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:var(--s8-6) var(--s8-8);align-items:center;padding:var(--s8-6) var(--s8-7)}
.sua__sec .su-sec__right{display:grid;gap:var(--s8-3)}
.sua__sec .su-skip{justify-self:center}
.sua__sec .su-sec__done,.sua__sec .su-sec__mini{grid-column:1/-1}

/* unlocked grid */
.sua__feat{padding:clamp(56px,7vw,96px) 0 0}
.sua__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-top:var(--s8-7);background:var(--s8-line);border:1px solid var(--s8-line);border-radius:14px;overflow:hidden}
.ft{position:relative;display:flex;flex-direction:column;gap:var(--s8-2);padding:var(--s8-6);background:var(--s8-bg);transition:background var(--s8-t)}
.ft:hover{background:#0E1115}
.ft__n{display:flex;align-items:center;justify-content:space-between;font-size:var(--s8-fs-micro);font-weight:600;letter-spacing:var(--s8-ls-caps);color:var(--s8-fg-4)}
.ft__n .new{color:var(--s8-gold-fg)}
.ft h3{margin:var(--s8-3) 0 0;font-size:var(--s8-fs-lg);font-weight:600;letter-spacing:var(--s8-ls-tight);color:#fff}
.ft p{margin:0;font-size:var(--s8-fs-sm);color:var(--s8-fg-3);text-wrap:pretty}
.ft a{margin-top:auto;padding-top:var(--s8-3);display:inline-flex;align-items:center;gap:6px;font-size:var(--s8-fs-sm);font-weight:600}
.ft a .su-i{width:14px;height:14px;transition:transform var(--s8-t)}
.ft:hover a .su-i{transform:translateX(3px)}

@media (max-width:1100px){.sua__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:960px){.sua__hero,.sua__sec{grid-template-columns:minmax(0,1fr)}.sua__sec .su-sec__right{max-width:340px}.mcard{--rx:0deg;--ry:0deg}}
@media (max-width:600px){.sua__grid{grid-template-columns:minmax(0,1fr)}.sua__sec{padding:var(--s8-5)}.mcard{padding:20px 22px}}
@media (prefers-reduced-motion:reduce){.su *{animation:none!important;transition:none!important}}