/* SystemFlow - upgrade modal (v3, showcase + plan accents)
   One centred two-pane dialog over a dimmed canvas. The left pane is an
   auto-cycling showcase of what the selected tier unlocks; the right pane
   is the decision. Plan chrome (cards, CTA, ribbon) carries the tier's
   accent:
     Pro  = Anthropic orange  (--upg-pro)
     Team = yellow            (--upg-team)
   Each showcase slide additionally carries its own accent (--sa, set inline
   per slide) so the art/badge/progress fill cycle through distinct hues
   instead of repeating one flat tier color.
   Motion budget: transform/opacity only (the deck rule) - nothing here
   animates paint. Reduced-motion kill-switch at the end of the file. */

:root {
  --upg-pro:      #d97757;
  --upg-pro-ink:  #ffffff;
  --upg-team:     #eab308;
  --upg-team-ink: #1a1206;
}
html.light, [data-theme="light"] {
  --upg-pro:      #c15f3c;
  --upg-team:     #a16207;
  --upg-team-ink: #ffffff;
}

/* ══════════════════════ overlay + card ══════════════════════ */

.upg-overlay {
  --u-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --u-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --u-soft:   cubic-bezier(0.4, 0, 0.2, 1);

  position: fixed; inset: 0; z-index: 460;
  display: grid; place-items: center;
  padding: 24px;
  overflow-y: auto;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  font-family: var(--sans);
  color: var(--text);
  animation: upg-fade 0.24s var(--u-soft) both;
}
html.light .upg-overlay { background: rgba(20,20,24,0.38); }
@keyframes upg-fade { from { opacity: 0; } }

.upg-overlay.leaving { animation: upg-fade-out 0.2s var(--u-soft) both; pointer-events: none; }
@keyframes upg-fade-out { to { opacity: 0; } }
.upg-overlay.leaving .upg-card { animation: upg-card-out 0.2s var(--u-soft) both; }
@keyframes upg-card-out { to { opacity: 0; transform: translateY(14px) scale(0.97); } }

.upg-card {
  position: relative;
  width: min(920px, 96vw);
  max-height: min(660px, 92vh);
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 20px;
  box-shadow: 0 40px 90px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
  color: var(--text);
  animation: upg-pop 0.36s var(--u-spring) both;
}
html.light .upg-card { box-shadow: 0 40px 90px rgba(20,20,24,0.25), inset 0 1px 0 #fff; }
@keyframes upg-pop {
  0%   { opacity: 0; transform: scale(0.94) translateY(14px); }
  100% { opacity: 1; transform: none; }
}

.upg-close {
  position: absolute; top: 14px; right: 14px; z-index: 5;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 1px solid var(--border2);
  border-radius: 9px;
  background: var(--surface2);
  color: var(--text-sec);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.upg-close:hover { color: var(--text); border-color: var(--border3); background: var(--surface3); }

/* ══════════════════════ split layout ══════════════════════ */

.upg-split {
  display: grid;
  grid-template-columns: 44% 56%;
  min-height: 540px;
}

/* ══════════════════════ showcase pane ══════════════════════ */

.upg-show {
  position: relative;
  display: flex; flex-direction: column;
  gap: 14px;
  padding: 26px 24px 22px;
  background: var(--bg-2);
  border-right: 1px solid var(--border);
  border-radius: 20px 0 0 20px;
  overflow: hidden;
  animation: upg-in-l 0.4s 0.05s var(--u-out) backwards;
}
.upg-show.pro  { --pa: var(--upg-pro);  --pa-ink: var(--upg-pro-ink); }
.upg-show.team { --pa: var(--upg-team); --pa-ink: var(--upg-team-ink); }

@keyframes upg-in-l { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }

.upg-show-head { display: flex; align-items: center; gap: 10px; }
.upg-show-plan {
  font: 700 10.5px/1 var(--sans);
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--pa-ink);
  background: var(--pa);
  padding: 5px 9px; border-radius: 999px;
}
.upg-show-what { font: 600 12px/1 var(--sans); color: var(--text-sec); }

.upg-slide {
  flex: 1; display: flex; flex-direction: column; gap: 16px;
  animation: upg-slide-in 0.38s var(--u-out) both;
}
@keyframes upg-slide-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.upg-slide-txt { display: flex; flex-direction: column; gap: 7px; }
.upg-slide-ico {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 9px;
  color: var(--sa, var(--pa));
  background: color-mix(in srgb, var(--sa, var(--pa)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--sa, var(--pa)) 34%, transparent);
}
.upg-slide-txt h3 { margin: 2px 0 0; font: 700 17px/1.25 var(--sans); letter-spacing: -0.01em; color: var(--text); }
.upg-slide-txt p  { margin: 0; font: 400 12.5px/1.6 var(--sans); color: var(--text-sec); }

/* progress segments - the active one fills over the slide duration */
.upg-progress { display: flex; gap: 6px; }
.upg-seg {
  flex: 1; height: 14px; padding: 5.5px 0;
  background: none; border: none; cursor: pointer;
}
.upg-seg i {
  display: block; height: 3px; border-radius: 999px;
  background: var(--border2);
  overflow: hidden; position: relative;
}
.upg-seg i::after {
  content: ""; position: absolute; inset: 0;
  background: var(--sa, var(--pa));
  transform: scaleX(0); transform-origin: left;
  border-radius: inherit;
}
.upg-seg.done i::after { transform: scaleX(1); }
.upg-seg.on i::after {
  /* duration + play-state come from the inline style on <i> */
  animation: upg-fill 4.2s linear both;
  animation-duration: inherit;
  animation-play-state: inherit;
}
@keyframes upg-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ══════════════════════ the animated vignettes ══════════════════════ */

.upg-art {
  position: relative;
  height: 158px;
  border-radius: 14px;
  background:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px),
    var(--surface);
  background-size: 22px 22px, 22px 22px, auto;
  border: 1px solid var(--border);
  overflow: hidden;
}

/* chaos - three nodes, the middle one dies, a shockwave ring ripples */
.art-chaos .ac-node {
  position: absolute; top: 50%; width: 26px; height: 26px; margin-top: -13px;
  border-radius: 8px; background: var(--surface3);
  border: 1px solid var(--border3);
}
.art-chaos .ac-node.a { left: 18%; }
.art-chaos .ac-node.b { left: 50%; margin-left: -13px; }
.art-chaos .ac-node.c { right: 18%; }
.art-chaos .ac-node.dying { animation: ac-die 4.2s ease-in-out infinite; }
@keyframes ac-die {
  0%, 30%  { opacity: 1; transform: none; }
  38%, 46% { opacity: 0.25; transform: scale(0.82) rotate(-6deg); }
  42%      { opacity: 0.9; }
  60%, 100%{ opacity: 0.25; transform: scale(0.82) rotate(-6deg); }
}
.art-chaos .ac-wire {
  position: absolute; top: 50%; height: 2px; width: 14%;
  background: var(--border3);
}
.art-chaos .ac-wire.w1 { left: calc(18% + 28px); }
.art-chaos .ac-wire.w2 { right: calc(18% + 28px); }
.art-chaos .ac-wire.cut { animation: ac-cut 4.2s ease-in-out infinite; }
@keyframes ac-cut {
  0%, 34%  { opacity: 1; }
  40%, 100%{ opacity: 0.18; }
}
.art-chaos .ac-ring {
  position: absolute; top: 50%; left: 50%;
  width: 26px; height: 26px; margin: -13px 0 0 -13px;
  border: 2px solid var(--sa, var(--pa)); border-radius: 12px;
  opacity: 0;
  animation: ac-ring 4.2s ease-out infinite;
}
@keyframes ac-ring {
  0%, 34%  { opacity: 0; transform: scale(1); }
  40%      { opacity: 0.9; }
  70%, 100%{ opacity: 0; transform: scale(3.4); }
}

/* advisor - review lines type themselves, a spark badge lands */
.art-advisor { padding: 26px 22px; }
.art-advisor .aa-line {
  display: block; height: 10px; border-radius: 999px;
  background: var(--surface3); border: 1px solid var(--border2);
  margin-bottom: 12px;
  transform-origin: left center;
  animation: aa-type 4.2s var(--u-out) infinite;
}
.art-advisor .aa-line.l1 { width: 72%; }
.art-advisor .aa-line.l2 { width: 48%; animation-delay: 0.35s; }
.art-advisor .aa-line.l3 { width: 60%; animation-delay: 0.7s; }
@keyframes aa-type {
  0%       { transform: scaleX(0); opacity: 0; }
  14%      { transform: scaleX(1); opacity: 1; }
  88%      { transform: scaleX(1); opacity: 1; }
  100%     { transform: scaleX(1); opacity: 0; }
}
.art-advisor .aa-badge {
  position: absolute; right: 18px; bottom: 16px;
  width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 999px; color: var(--sa-ink, var(--pa-ink)); background: var(--sa, var(--pa));
  animation: aa-badge 4.2s var(--u-spring) infinite;
}
@keyframes aa-badge {
  0%, 24%  { opacity: 0; transform: scale(0.4); }
  34%      { opacity: 1; transform: scale(1.08); }
  40%, 88% { opacity: 1; transform: scale(1); }
  100%     { opacity: 0; transform: scale(0.6); }
}

/* lab - load bars climb; one breaks the capacity line */
.art-lab { display: flex; align-items: flex-end; gap: 12px; padding: 20px 26px 0; }
.art-lab .al-bar {
  flex: 1; border-radius: 6px 6px 0 0;
  background: var(--surface3); border: 1px solid var(--border2); border-bottom: none;
  transform-origin: bottom;
  animation: al-grow 4.2s var(--u-out) infinite;
}
.art-lab .al-bar.b0 { height: 34%; }
.art-lab .al-bar.b1 { height: 52%; animation-delay: 0.12s; }
.art-lab .al-bar.b2 { height: 44%; animation-delay: 0.24s; }
.art-lab .al-bar.b3 { height: 86%; animation-delay: 0.36s; background: var(--sa, var(--pa)); border-color: var(--sa, var(--pa)); opacity: 0.9; }
.art-lab .al-bar.b4 { height: 62%; animation-delay: 0.48s; }
@keyframes al-grow {
  0%        { transform: scaleY(0); }
  18%       { transform: scaleY(1.04); }
  24%, 90%  { transform: scaleY(1); }
  100%      { transform: scaleY(0); }
}
.art-lab .al-cap {
  position: absolute; left: 14px; right: 14px; top: 34%;
  border-top: 2px dashed color-mix(in srgb, var(--sa, var(--pa)) 55%, transparent);
}

/* interview - rubric rows tick, a grade pops */
.art-interview { padding: 22px; }
.art-interview .ai-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.art-interview .ai-row i {
  width: 14px; height: 14px; border-radius: 999px;
  border: 2px solid var(--border3); flex: none;
  animation: ai-tick 4.2s ease infinite;
}
.art-interview .ai-row b {
  height: 8px; border-radius: 999px; background: var(--surface3);
  border: 1px solid var(--border2); flex: 1;
}
.art-interview .ai-row.r1 i { animation-delay: 0.2s; }
.art-interview .ai-row.r2 i { animation-delay: 0.7s; }
.art-interview .ai-row.r2 b { max-width: 70%; }
.art-interview .ai-row.r3 i { animation-delay: 1.2s; }
.art-interview .ai-row.r3 b { max-width: 84%; }
@keyframes ai-tick {
  0%, 8%   { background: transparent; border-color: var(--border3); }
  16%, 88% { background: var(--sa, var(--pa)); border-color: var(--sa, var(--pa)); }
  100%     { background: transparent; border-color: var(--border3); }
}
.art-interview .ai-score {
  position: absolute; right: 18px; bottom: 14px;
  font: 800 15px/1 var(--sans); letter-spacing: -0.02em;
  color: var(--sa-ink, var(--pa-ink)); background: var(--sa, var(--pa));
  padding: 7px 10px; border-radius: 10px;
  animation: aa-badge 4.2s var(--u-spring) infinite;
  animation-delay: 0.5s;
}

/* projects - a stack of cards fans out */
.art-projects .ap-card {
  position: absolute; left: 50%; top: 50%;
  width: 92px; height: 62px; margin: -31px 0 0 -46px;
  border-radius: 10px; background: var(--surface2);
  border: 1px solid var(--border3);
  box-shadow: 0 8px 18px rgba(0,0,0,0.18);
}
.art-projects .ap-card.c1 { animation: ap-fan1 4.2s var(--u-out) infinite; }
.art-projects .ap-card.c2 { animation: ap-fan2 4.2s var(--u-out) infinite; background: var(--surface3); }
.art-projects .ap-card.c3 {
  animation: ap-fan3 4.2s var(--u-out) infinite;
  background: color-mix(in srgb, var(--sa, var(--pa)) 22%, var(--surface3));
  border-color: var(--sa, var(--pa));
}
@keyframes ap-fan1 { 0%,12% { transform: none; } 30%,86% { transform: translateX(-56px) rotate(-8deg); } 100% { transform: none; } }
@keyframes ap-fan2 { 0%,12% { transform: none; } 30%,86% { transform: translateY(-8px); } 100% { transform: none; } }
@keyframes ap-fan3 { 0%,12% { transform: none; } 30%,86% { transform: translateX(56px) rotate(8deg); } 100% { transform: none; } }

/* seats - ten seats light up one by one */
.art-seats {
  display: grid; grid-template-columns: repeat(5, 26px);
  gap: 14px; place-content: center;
}
.art-seats .as-dot {
  width: 26px; height: 26px; border-radius: 999px;
  background: var(--surface3); border: 1px solid var(--border3);
  animation: as-on 4.2s ease infinite;
  animation-delay: calc(var(--i) * 0.16s);
}
@keyframes as-on {
  0%, 6%   { background: var(--surface3); border-color: var(--border3); transform: scale(1); }
  12%      { transform: scale(1.14); }
  16%, 86% { background: var(--sa, var(--pa)); border-color: var(--sa, var(--pa)); transform: scale(1); }
  100%     { background: var(--surface3); border-color: var(--border3); }
}

/* workspace - shared canvas tiles with two live cursors */
.art-workspace .aw-tile {
  position: absolute; width: 64px; height: 44px; border-radius: 8px;
  background: var(--surface2); border: 1px solid var(--border2);
}
.art-workspace .aw-tile.t1 { left: 14%; top: 18%; }
.art-workspace .aw-tile.t2 { right: 16%; top: 26%; background: var(--surface3); }
.art-workspace .aw-tile.t3 { left: 22%; bottom: 16%; background: var(--surface3); }
.art-workspace .aw-tile.t4 { right: 24%; bottom: 12%; }
.art-workspace .aw-cursor {
  position: absolute; left: 0; top: 0;
  width: 10px; height: 10px;
  border-radius: 999px 999px 999px 2px;
  background: var(--sa, var(--pa));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sa, var(--pa)) 25%, transparent);
}
.art-workspace .aw-cursor.c1 { animation: aw-c1 4.2s ease-in-out infinite; }
.art-workspace .aw-cursor.c2 { animation: aw-c2 4.2s ease-in-out infinite; opacity: 0.6; }
@keyframes aw-c1 {
  0%   { transform: translate(30px, 26px); }
  35%  { transform: translate(150px, 40px); }
  70%  { transform: translate(90px, 96px); }
  100% { transform: translate(30px, 26px); }
}
@keyframes aw-c2 {
  0%   { transform: translate(180px, 100px); }
  40%  { transform: translate(60px, 80px); }
  75%  { transform: translate(160px, 30px); }
  100% { transform: translate(180px, 100px); }
}

/* billing - one invoice, one tick */
.art-billing .ab-doc {
  position: absolute; left: 50%; top: 50%;
  width: 96px; height: 104px; margin: -52px 0 0 -58px;
  border-radius: 10px; background: var(--surface2);
  border: 1px solid var(--border3);
  padding: 14px 12px; display: flex; flex-direction: column; gap: 10px;
  animation: ab-float 4.2s ease-in-out infinite;
}
.art-billing .ab-doc i { display: block; height: 7px; border-radius: 999px; background: var(--surface3); border: 1px solid var(--border2); }
.art-billing .ab-doc i:nth-child(2) { width: 70%; }
.art-billing .ab-doc i:nth-child(3) { width: 46%; }
@keyframes ab-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.art-billing .ab-check {
  position: absolute; left: 50%; top: 50%; margin: 14px 0 0 22px;
  width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: 999px; color: var(--sa-ink, var(--pa-ink)); background: var(--sa, var(--pa));
  border: 2px solid var(--surface);
  animation: aa-badge 4.2s var(--u-spring) infinite;
  animation-delay: 0.4s;
}

/* support - a steady core with sonar pings */
.art-support .asu-core {
  position: absolute; left: 50%; top: 50%;
  width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 999px; background: var(--sa, var(--pa));
}
.art-support .asu-ping {
  position: absolute; left: 50%; top: 50%;
  width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 999px; border: 2px solid var(--sa, var(--pa));
  opacity: 0;
  animation: asu-ping 2.1s ease-out infinite;
}
.art-support .asu-ping.p2 { animation-delay: 1.05s; }
@keyframes asu-ping {
  0%   { opacity: 0.8; transform: scale(1); }
  100% { opacity: 0; transform: scale(4.6); }
}

/* ══════════════════════ pick pane ══════════════════════ */

.upg-pick {
  display: flex; flex-direction: column;
  gap: 14px;
  padding: 26px 26px 20px;
}

.upg-head { display: flex; flex-direction: column; gap: 8px; }
.upg-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font: 700 10.5px/1 var(--sans);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-sec);
  animation: upg-rise 0.4s 0.08s var(--u-out) backwards;
}
.upg-eyebrow i { width: 6px; height: 6px; border-radius: 999px; background: var(--text-sec); }
.upg-title {
  margin: 0;
  font: 800 24px/1.15 var(--sans);
  letter-spacing: -0.02em;
  color: var(--text);
  animation: upg-rise 0.4s 0.12s var(--u-out) backwards;
}
.upg-sub {
  margin: 0; font: 400 12.5px/1.6 var(--sans); color: var(--text-sec);
  animation: upg-rise 0.4s 0.16s var(--u-out) backwards;
}
@keyframes upg-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* billing cycle toggle */
.upg-toggle {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  width: 100%;
  padding: 3px;
  border: 1px solid var(--border2);
  border-radius: 11px;
  background: var(--bg-2);
  animation: upg-rise 0.4s 0.16s var(--u-out) backwards;
}
.upg-toggle-thumb {
  position: absolute; top: 3px; bottom: 3px; left: 3px;
  width: calc(50% - 3px);
  border-radius: 8px;
  background: var(--surface3);
  border: 1px solid var(--border2);
  transition: transform 0.24s var(--u-spring);
}
.upg-toggle-thumb.yr { transform: translateX(100%); }
.upg-toggle button {
  position: relative; z-index: 1;
  padding: 7px 0;
  background: none; border: none; cursor: pointer;
  font: 600 12px/1 var(--sans);
  color: var(--text-sec);
  transition: color 0.15s;
}
.upg-toggle button.on { color: var(--text); }
.upg-toggle button em {
  font-style: normal; font-weight: 700; font-size: 10px;
  color: var(--text);
  background: var(--border2);
  border-radius: 999px; padding: 2px 6px; margin-left: 4px;
}

/* plan option cards */
.upg-plans { display: flex; flex-direction: column; gap: 10px; }
.upg-plan {
  position: relative;
  padding: 13px 14px 12px;
  border: 1px solid var(--border2);
  border-radius: 14px;
  background: var(--surface1);
  cursor: pointer;
  transition: border-color 0.16s, box-shadow 0.16s, background 0.16s, transform 0.16s;
  animation: upg-rise 0.4s var(--d, 0.2s) var(--u-out) backwards;
}
.upg-plan.pro  { --pa: var(--upg-pro);  --pa-ink: var(--upg-pro-ink); }
.upg-plan.team { --pa: var(--upg-team); --pa-ink: var(--upg-team-ink); }
.upg-plan:hover { border-color: var(--border3); transform: translateY(-1px); }
.upg-plan.on {
  border-color: var(--pa);
  box-shadow: 0 0 0 1px var(--pa), 0 10px 26px color-mix(in srgb, var(--pa) 16%, transparent);
  background: color-mix(in srgb, var(--pa) 5%, var(--surface1));
}
.upg-plan:focus-visible { outline: 2px solid var(--pa); outline-offset: 2px; }

.upg-ribbon {
  position: absolute; top: -8px; right: 12px;
  font: 700 9.5px/1 var(--sans);
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--upg-pro-ink);
  background: var(--upg-pro);
  padding: 4px 8px; border-radius: 999px;
}

.upg-plan-top { display: flex; align-items: center; gap: 9px; }
.upg-plan-mark {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 8px;
  color: var(--text-sec);
  background: var(--surface2);
  border: 1px solid var(--border2);
  transition: color 0.16s, background 0.16s, border-color 0.16s;
}
.upg-plan.on .upg-plan-mark { color: var(--pa-ink); background: var(--pa); border-color: var(--pa); }
.upg-plan-top b { font: 700 14px/1 var(--sans); color: var(--text); }
.upg-plan-top i {
  font: 600 10.5px/1 var(--sans); font-style: normal;
  color: var(--text-sec);
  border: 1px solid var(--border2); border-radius: 999px;
  padding: 3px 7px;
}
.upg-radio {
  margin-left: auto;
  width: 16px; height: 16px; border-radius: 999px;
  border: 2px solid var(--border3);
  transition: border-color 0.16s, box-shadow 0.16s;
}
.upg-plan.on .upg-radio {
  border-color: var(--pa);
  box-shadow: inset 0 0 0 3.5px var(--pa);
}

.upg-price { display: flex; align-items: baseline; gap: 3px; margin-top: 9px; }
.upg-price em { font: 700 13px/1 var(--sans); font-style: normal; color: var(--text-sec); }
.upg-price b { font: 800 28px/1 var(--sans); letter-spacing: -0.03em; color: var(--text); font-variant-numeric: tabular-nums; }
.upg-price-per {
  display: flex; flex-direction: column;
  margin-left: 7px;
  font: 500 10.5px/1.35 var(--sans); color: var(--text-sec);
}
.upg-price-per i { font-style: normal; color: var(--text-dim); }

.upg-plan-tag { margin: 7px 0 0; font: 500 11.5px/1.45 var(--sans); color: var(--text-sec); }

/* CTA - carries the selected tier's accent */
.upg-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  padding: 12px 0;
  border: none; border-radius: 12px;
  font: 700 13.5px/1 var(--sans);
  cursor: pointer;
  color: var(--surface);
  background: var(--text);
  transition: transform 0.14s var(--u-out), box-shadow 0.18s, filter 0.15s;
  animation: upg-rise 0.4s 0.3s var(--u-out) backwards;
}
.upg-cta.pro  { background: var(--upg-pro);  color: var(--upg-pro-ink);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--upg-pro) 30%, transparent); }
.upg-cta.team { background: var(--upg-team); color: var(--upg-team-ink);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--upg-team) 26%, transparent); }
.upg-cta:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.06); }
.upg-cta:active:not(:disabled) { transform: translateY(0) scale(0.985); }
.upg-cta:disabled { opacity: 0.55; cursor: default; }
.upg-cta svg { flex: none; width: 14px; height: 14px; }
.upg-cta.wide { max-width: 420px; margin: 4px auto 0; }

/* footer */
.upg-foot {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  margin-top: auto; padding-top: 4px;
}
.upg-link {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer;
  font: 600 11.5px/1 var(--sans);
  color: var(--text-sec);
  padding: 5px 8px; border-radius: 8px;
  transition: color 0.15s, background 0.15s;
}
.upg-link:hover { color: var(--text); background: var(--surface2); }
.upg-link.center { margin: 10px auto 0; }
.upg-fine { font: 400 10.5px/1 var(--sans); color: var(--text-dim); }

/* ══════════════════════ code pane ══════════════════════ */

.upg-codepane {
  display: flex; flex-direction: column; gap: 14px;
  max-width: 460px;
  margin: 0 auto;
  padding: 44px 26px 30px;
  min-height: 380px;
  text-align: center;
}
.upg-codepane .upg-head { align-items: center; }
.upg-code {
  width: 100%;
  padding: 13px 15px;
  border-radius: 12px;
  border: 1px solid var(--border2);
  background: var(--bg-2);
  color: var(--text);
  font: 600 14px/1 var(--mono);
  letter-spacing: 0.04em;
  text-align: center;
  transition: border-color 0.16s, box-shadow 0.16s;
}
.upg-code:focus { outline: none; border-color: var(--text-sec); box-shadow: 0 0 0 3px var(--border); }
.upg-code::placeholder { color: var(--text-dim); letter-spacing: 0.02em; }
.upg-err {
  font: 600 11.5px/1.4 var(--sans);
  color: var(--red);
  background: var(--red-dim);
  border: 1px solid color-mix(in srgb, var(--red) 30%, transparent);
  border-radius: 9px;
  padding: 8px 11px;
  animation: upg-rise 0.25s ease both;
}

/* ══════════════════════ responsive ══════════════════════ */

@media (max-width: 780px) {
  .upg-split { grid-template-columns: 1fr; min-height: 0; }
  .upg-show { display: none; }
  .upg-card { max-height: 92vh; }
}

/* ══════════════════════ reduced motion ══════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .upg-overlay, .upg-card, .upg-show, .upg-slide,
  .upg-eyebrow, .upg-title, .upg-sub, .upg-toggle, .upg-plan, .upg-cta,
  .upg-err { animation: none !important; }
  .upg-toggle-thumb { transition: none; }
  .upg-art *, .upg-seg i::after { animation: none !important; }
  .upg-seg.on i::after { transform: scaleX(1); }
  .upg-cta:hover:not(:disabled), .upg-plan:hover { transform: none; }
}