/* Painel da marca no cadastro (register.php). Carregado só nessa página, depois de design-system.css.
   Cada produto define os tokens --ss-* em [data-story]; a ilustração vem de partials/signup_story/<marca>.php
   e é toda em "em", para encolher junto com .ss-visual em telas baixas ou estreitas.
   Regra de construção: o estado final é o valor padrão de cada regra e os keyframes de entrada só definem o
   "from"; os ciclos infinitos partem e terminam no estado padrão. Com movimento reduzido nada fica invisível. */

/* ===== Tokens por marca ===== */
.signup-story {
  --ss-bg: radial-gradient(120% 90% at 80% 0%, #1b62f0 0%, #0054c2 45%, #0636a8 100%);
  --ss-ink: #ffffff; --ss-body: #ffffffd9; --ss-muted: #ffffffb3; --ss-line: #ffffff2e;
  --ss-accent: #4ade80; --ss-accent-text: #4ade80; --ss-on-accent: #0b2a17; --ss-glow: #001a4d;
  --ss-card: #ffffff1f; --ss-card-ink: #ffffff; --ss-card-muted: #ffffffbf; --ss-soft: #ffffff24;
  --ss-pill: #ffffff1f; --ss-blob-1: #4f8dff; --ss-blob-2: #22d3ee; --ss-blob-3: #4ade80;
  --ss-pattern: none; --ss-pattern-size: auto;
}
.signup-story[data-story="gestorprint"] {
  --ss-bg: radial-gradient(ellipse 90% 46% at 50% 0%, #dcebff 0%, #dcebff00 72%), #f8fafe;
  --ss-ink: #0b1020; --ss-body: #475569; --ss-muted: #64748b; --ss-line: #e0e8f3;
  --ss-accent: #0074fc; --ss-accent-text: #0059c7; --ss-on-accent: #ffffff; --ss-glow: #0059c7;
  --ss-grad: linear-gradient(90deg, #0a9bff 0%, #0074fc 20%, #8b5cf6 52%, #ec4899 82%, #f472b6 100%);
  --ss-card: #ffffffeb; --ss-card-ink: #0b1020; --ss-card-muted: #64748b; --ss-soft: #f1f6fd;
  --ss-pill: #ffffffc7; --ss-blob-1: #0a9bff; --ss-blob-2: #8b5cf6; --ss-blob-3: #ec4899;
  --ss-pattern: linear-gradient(#0b10200d 1px, transparent 1px), linear-gradient(90deg, #0b10200d 1px, transparent 1px);
  --ss-pattern-size: 48px 48px;
}
.signup-story[data-story="veloja"] {
  --ss-bg: radial-gradient(ellipse 95% 50% at 50% 0%, #eddcff 0%, #eddcff00 72%), #fbf9ff;
  --ss-ink: #140a24; --ss-body: #5b5470; --ss-muted: #6f6885; --ss-line: #ece6f7;
  --ss-accent: #a85dee; --ss-accent-text: #8240b7; --ss-on-accent: #ffffff; --ss-glow: #6d28d9;
  --ss-grad: linear-gradient(90deg, #a85dee 0%, #7c3aed 35%, #c026d3 70%, #ec4899 100%);
  --ss-card: #ffffffeb; --ss-card-ink: #140a24; --ss-card-muted: #6f6885; --ss-soft: #f7f1ff;
  --ss-pill: #ffffffc7; --ss-blob-1: #a85dee; --ss-blob-2: #ec4899; --ss-blob-3: #6366f1;
  --ss-pattern: radial-gradient(#3b1d6b2e 1px, transparent 1.4px);
  --ss-pattern-size: 22px 22px;
}
.signup-story[data-story="vechat"] {
  --ss-bg: radial-gradient(ellipse 95% 50% at 50% 0%, #d3f6e0 0%, #d3f6e000 72%), #f8fcf9;
  --ss-ink: #0b1a12; --ss-body: #4b5f53; --ss-muted: #64786b; --ss-line: #e1efe6;
  --ss-accent: #22c55e; --ss-accent-text: #15703a; --ss-on-accent: #052e14; --ss-glow: #15803d;
  --ss-grad: linear-gradient(90deg, #15803d 0%, #16a34a 30%, #0d9488 70%, #0e7490 100%);
  --ss-card: #ffffffeb; --ss-card-ink: #0b1a12; --ss-card-muted: #64786b; --ss-soft: #effaf3;
  --ss-pill: #ffffffc7; --ss-blob-1: #22c55e; --ss-blob-2: #14b8a6; --ss-blob-3: #a3e635;
  --ss-pattern: repeating-radial-gradient(circle at 50% 64%, transparent 0 47px, #0f3d2414 47px 48px);
  --ss-pattern-size: auto;
}

/* ===== Estrutura ===== */
/* (0,4,2): precisa vencer o fundo que design-system.css dá a .signup-right. */
html[data-ui="graviti"] body.graviti-auth .signup-right.signup-story { background: var(--ss-bg); color: var(--ss-ink); }
.signup-story { position: relative; display: flex; flex-direction: column; overflow: hidden auto; border-left: 1px solid var(--ss-line); box-sizing: border-box; }
.signup-story *, .signup-story *::before, .signup-story *::after { box-sizing: border-box; }
.signup-story :is(b, em, i, u, small) { font-style: normal; font-weight: inherit; text-decoration: none; }

.signup-story-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.signup-story-bg::before { content: ''; position: absolute; inset: 0; background-image: var(--ss-pattern); background-size: var(--ss-pattern-size); background-position: center; -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 46%, #000 25%, transparent 100%); mask-image: radial-gradient(ellipse 80% 70% at 50% 46%, #000 25%, transparent 100%); }
.signup-story-bg span { position: absolute; aspect-ratio: 1; border-radius: 50%; filter: blur(76px); will-change: transform; animation: ss-drift 24s ease-in-out infinite alternate; }
.signup-story-bg span:nth-child(1) { width: 46%; top: -14%; right: -8%; background: var(--ss-blob-1); opacity: .28; }
.signup-story-bg span:nth-child(2) { width: 40%; top: 42%; left: -16%; background: var(--ss-blob-2); opacity: .16; animation-duration: 30s; animation-delay: -10s; animation-direction: alternate-reverse; }
.signup-story-bg span:nth-child(3) { width: 38%; bottom: -16%; right: 10%; background: var(--ss-blob-3); opacity: .15; animation-duration: 36s; animation-delay: -18s; }

.signup-topbar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: flex-end; gap: 18px; padding: 26px 48px 0; flex-shrink: 0; }
.signup-topbar a { display: inline-flex; align-items: center; gap: 7px; color: var(--ss-body); text-decoration: none; transition: color .15s, background .15s; }
.signup-back { font-size: 13px; font-weight: 600; }
.signup-back svg { width: 15px; height: 15px; transition: transform .2s; }
.signup-back:hover { color: var(--ss-ink); }
.signup-back:hover svg { transform: translateX(-3px); }
.signup-topbar a:focus-visible { outline: 2px solid var(--ss-accent); outline-offset: 4px; border-radius: 6px; }
.signup-social { display: inline-flex; gap: 8px; }
.signup-social a { width: 28px; height: 28px; justify-content: center; border-radius: 8px; }
.signup-social a:hover { background: var(--ss-soft); color: var(--ss-ink); }
.signup-social svg { width: 20px; height: 20px; }

.signup-hero { position: relative; z-index: 2; flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; max-width: 780px; margin: 0 auto; padding: 16px 48px 40px; text-align: center; }
.signup-hero > * { animation: ss-rise .8s cubic-bezier(.2, .7, .2, 1) both; }
.signup-hero > .signup-headline { animation-delay: .08s; }
.signup-hero > .signup-description { animation-delay: .16s; }
.signup-hero > .ss-visual { animation-delay: .26s; }
.signup-hero > .signup-points { animation-delay: .4s; }

.signup-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 20px; padding: 7px 14px 7px 12px; border: 1px solid color-mix(in srgb, var(--ss-accent) 24%, transparent); border-radius: 999px; background: var(--ss-pill); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--ss-body); font-size: 11px; font-weight: 700; letter-spacing: .13em; line-height: 1.4; box-shadow: 0 1px 2px #0b10200a; }
.signup-eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ss-accent); flex-shrink: 0; animation: ss-pulse 2.6s ease-out infinite; }

/* !important: o CSS global do app define h2 com seletor mais específico. */
.signup-story .signup-headline { max-width: 15em; margin: 0; font-size: clamp(26px, min(2.75vw, 5.2vh), 46px) !important; line-height: 1.1 !important; font-weight: 800 !important; letter-spacing: -.04em; color: var(--ss-ink) !important; text-wrap: balance; }
.signup-story .signup-headline em { font-style: normal; color: var(--ss-accent-text); }
.signup-story:not([data-story="graviti"]) .signup-headline em { padding-bottom: .08em; background: var(--ss-grad); background-size: 140% 100%; background-position: 0% 50%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: ss-sheen 9s ease-in-out infinite alternate; }
.signup-description { max-width: 520px; margin: 18px 0 0; font-size: clamp(14px, 1.9vh, 16px); line-height: 1.65; color: var(--ss-body); text-wrap: balance; }

.signup-points { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 460px; margin: 30px 0 0; padding: 0; list-style: none; }
.signup-points li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px 7px 10px; border: 1px solid var(--ss-line); border-radius: 999px; background: var(--ss-pill); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--ss-ink); box-shadow: 0 1px 2px #0b10200a; }
.signup-points svg { width: 14px; height: 14px; color: var(--ss-accent-text); flex-shrink: 0; }

/* ===== Ilustração: peças comuns ===== */
.ss-visual { position: relative; width: 34em; max-width: 100%; margin: 2.4em auto 0; padding: 0 2.25em 1.9em; font-size: clamp(10px, min(1.18vw, 1.95vh), 18px); text-align: left; flex-shrink: 0; }
.ss-card { position: relative; padding: 1.1em 1.25em 2.5em; border: 1px solid var(--ss-line); border-radius: 1.15em; background: var(--ss-card); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--ss-card-ink); box-shadow: 0 1.75em 3.5em -1.75em color-mix(in srgb, var(--ss-glow) 34%, transparent), 0 2px 6px #0b10200a; animation: ss-float 7s ease-in-out infinite alternate; }
.ss-head { display: flex; align-items: center; justify-content: space-between; gap: .75em; }
.ss-head > span:first-child { font-size: .8125em; font-weight: 700; color: var(--ss-card-ink); }
.ss-tag { padding: .3em .7em; border-radius: 999px; background: color-mix(in srgb, var(--ss-accent) 13%, white); color: var(--ss-accent-text); font-size: .6875em; font-weight: 700; white-space: nowrap; }
.ss-live { display: inline-flex; align-items: center; gap: .55em; font-size: .625em; font-weight: 700; letter-spacing: .12em; color: var(--ss-card-muted); }
.ss-live i { width: .6em; height: .6em; border-radius: 50%; background: #10b981; --ss-pulse: #10b98166; animation: ss-pulse 2s ease-out infinite; }

.ss-chip { position: absolute; z-index: 2; bottom: 0; display: flex; align-items: center; gap: .7em; padding: .62em .95em .62em .7em; border: 1px solid var(--ss-line); border-radius: .9em; background: #ffffff; color: #0b1020; box-shadow: 0 1.1em 2.25em -1em color-mix(in srgb, var(--ss-glow) 40%, transparent), 0 2px 6px #0b10200f; white-space: nowrap; animation: ss-pop .5s 1.1s cubic-bezier(.3, 1.5, .5, 1) both, ss-float 6s -2s ease-in-out infinite alternate; }
.ss-chip:nth-of-type(odd) { animation-delay: 1.5s, -4s; }
.ss-chip b { display: block; font-size: .78em; font-weight: 700; line-height: 1.3; }
.ss-chip small { display: block; font-size: .66em; line-height: 1.4; color: #64748b; }
.ss-chip-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.1em; height: 2.1em; border-radius: .65em; background: var(--ss-accent); color: var(--ss-on-accent); flex-shrink: 0; }
.ss-chip-icon svg { width: 1.05em; height: 1.05em; }

/* ===== GestorPrint: orçamento aprovado ===== */
.ss-gp-items { margin: .7em 0 0; padding: 0; list-style: none; }
.ss-gp-items li { display: flex; align-items: center; gap: .7em; padding: .5em 0; border-bottom: 1px solid var(--ss-line); animation: ss-rise .6s .55s cubic-bezier(.2, .7, .2, 1) both; }
.ss-gp-items li:nth-child(2) { animation-delay: .7s; }
.ss-gp-items li:nth-child(3) { animation-delay: .85s; }
.ss-gp-thumb { display: inline-flex; align-items: center; justify-content: center; width: 2.1em; height: 2.1em; border-radius: .6em; background: var(--ss-soft); color: var(--ss-accent); flex-shrink: 0; }
.ss-gp-thumb svg { width: 1.15em; height: 1.15em; }
.ss-gp-items li > span:nth-child(2) { flex: 1; min-width: 0; }
.ss-gp-items b { display: block; font-size: .8125em; font-weight: 700; line-height: 1.3; }
.ss-gp-items small { display: block; font-size: .6875em; line-height: 1.4; color: var(--ss-card-muted); }
.ss-gp-items em { font-size: .8125em; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ss-gp-total { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; margin-top: .7em; }
.ss-gp-total span { font-size: .75em; font-weight: 600; color: var(--ss-card-muted); }
.ss-gp-total b { font-size: 1.5em; font-weight: 800; letter-spacing: -.04em; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--ss-accent); background: var(--ss-grad); background-size: 140% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: ss-sheen 7s ease-in-out infinite alternate; }
.ss-gp-state { display: grid; justify-items: end; align-items: center; }
.ss-gp-state > * { grid-area: 1 / 1; }
.ss-gp-state .ss-tag { opacity: 0; animation: ss-gp-sent 9s 1.2s ease-in-out infinite both; }
.ss-gp-approve { display: inline-flex; align-items: center; gap: .45em; padding: .3em .8em .3em .6em; border-radius: 999px; background: #dcfce7; color: #166534; font-size: .6875em; font-weight: 700; white-space: nowrap; animation: ss-gp-approve 9s 1.2s ease-in-out infinite both; }
.ss-gp-approve svg { width: 1.1em; height: 1.1em; }
.ss-gp-chip-a { left: 0; bottom: .5em; }
.ss-gp-chip-b { right: 0; bottom: 0; }

/* ===== Veloja: vitrine recebendo pedidos ===== */
.ss-vl-store { padding: 0 0 2.6em; overflow: hidden; }
.ss-vl-bar { display: flex; align-items: center; gap: .4em; padding: .65em .9em; border-bottom: 1px solid var(--ss-line); background: var(--ss-soft); }
.ss-vl-bar > i { width: .55em; height: .55em; border-radius: 50%; background: #d9cdea; }
.ss-vl-bar > span { flex: 1; max-width: 17em; margin: 0 auto 0 .7em; padding: .32em 1em; border-radius: 999px; background: #ffffff; font-size: .6875em; font-weight: 600; color: var(--ss-card-muted); text-align: center; }
.ss-vl-cart { position: relative; display: inline-flex; color: var(--ss-accent-text); }
.ss-vl-cart svg { width: 1.2em; height: 1.2em; }
.ss-vl-cart u { position: absolute; top: -.7em; right: -.8em; min-width: 1.6em; padding: 0 .35em; border-radius: 999px; background: #ec4899; color: #fff; font-size: .56em; font-weight: 800; line-height: 1.6; text-align: center; animation: ss-bump 6s 2.4s ease-in-out infinite; }
.ss-vl-banner { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin: .9em .9em 0; padding: .95em 1.1em; border-radius: .8em; background: linear-gradient(110deg, #7c3aed 0%, #a85dee 45%, #ec4899 100%); background-size: 160% 100%; color: #fff; animation: ss-sheen 10s ease-in-out infinite alternate; }
.ss-vl-banner b { display: block; font-size: 1em; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; }
.ss-vl-banner small { display: block; margin-top: .15em; font-size: .6875em; line-height: 1.4; color: #ffffffd9; }
.ss-vl-banner em { padding: .45em .95em; border-radius: 999px; background: #ffffff; color: #6d28d9; font-size: .6875em; font-weight: 700; white-space: nowrap; }
.ss-vl-products { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7em; margin: .8em .9em 0; padding: 0; list-style: none; }
.ss-vl-products li { position: relative; padding: .5em .5em .6em; border: 1px solid var(--ss-line); border-radius: .8em; background: #fff; animation: ss-rise .6s .6s cubic-bezier(.2, .7, .2, 1) both; }
.ss-vl-products li:nth-child(2) { animation-delay: .75s; }
.ss-vl-products li:nth-child(3) { animation-delay: .9s; }
.ss-vl-products li.is-hot { border-color: color-mix(in srgb, var(--ss-accent) 55%, white); box-shadow: 0 .6em 1.4em -.8em #6d28d980; }
.ss-vl-thumb { display: flex; align-items: center; justify-content: center; height: 4.1em; margin-bottom: .45em; border-radius: .55em; background: var(--ss-soft); color: var(--ss-accent); }
.ss-vl-products li:nth-child(1) .ss-vl-thumb { background: #eef2ff; color: #6366f1; }
.ss-vl-products li:nth-child(3) .ss-vl-thumb { background: #fdf2f8; color: #db2777; }
.ss-vl-thumb svg { width: 2em; height: 2em; }
.ss-vl-products b { display: block; font-size: .72em; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-vl-products small { display: block; font-size: .72em; font-weight: 600; color: var(--ss-card-muted); font-variant-numeric: tabular-nums; }
.ss-vl-products em { position: absolute; right: .5em; bottom: .55em; padding: .3em .7em; border-radius: 999px; background: var(--ss-accent); color: #fff; font-size: .6em; font-weight: 700; --ss-pulse: #a85dee73; animation: ss-pulse 2.4s 2s ease-out infinite; }
.ss-vl-chip-a { left: 0; bottom: 0; }
.ss-vl-chip-b { right: 0; bottom: .6em; }

/* ===== Vechat: uma caixa de entrada para todos os canais ===== */
.ss-vc-tabs { display: flex; gap: .4em; margin: .7em 0 0; padding: 0; list-style: none; }
.ss-vc-tabs li { display: inline-flex; align-items: center; gap: .45em; padding: .34em .8em; border-radius: 999px; background: var(--ss-soft); font-size: .6875em; font-weight: 600; color: var(--ss-card-muted); }
.ss-vc-tabs li.is-on { background: var(--ss-accent); color: var(--ss-on-accent); }
.ss-vc-tabs u { font-weight: 800; opacity: .8; }
.ss-vc-list { margin: .5em -.5em 0; padding: 0; list-style: none; }
.ss-vc-list li { display: flex; align-items: center; gap: .7em; padding: .5em; border-radius: .75em; animation: ss-rise .6s .55s cubic-bezier(.2, .7, .2, 1) both, ss-vc-focus-1 12s 2s ease-in-out infinite; }
.ss-vc-list li:nth-child(2) { animation-name: ss-rise, ss-vc-focus-2; animation-delay: .68s, 2s; }
.ss-vc-list li:nth-child(3) { animation-name: ss-rise, ss-vc-focus-3; animation-delay: .81s, 2s; }
.ss-vc-list li:nth-child(4) { animation-name: ss-rise, ss-vc-focus-4; animation-delay: .94s, 2s; }
.ss-vc-avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.9em; height: 2.9em; border-radius: 50%; background: var(--av); color: var(--avc); font-size: .75em; font-weight: 800; flex-shrink: 0; }
.ss-vc-avatar img { position: absolute; right: -.3em; bottom: -.3em; width: 1.45em; height: 1.45em; border-radius: 50%; background: #fff; box-shadow: 0 0 0 .14em #fff; object-fit: contain; }
.ss-vc-list li > span:nth-child(2) { flex: 1; min-width: 0; }
.ss-vc-list b { display: block; font-size: .8125em; font-weight: 700; line-height: 1.3; }
.ss-vc-list small { display: block; font-size: .7em; line-height: 1.4; color: var(--ss-card-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-vc-list em { display: flex; flex-direction: column-reverse; align-items: flex-end; gap: .25em; font-size: .625em; font-weight: 600; color: var(--ss-card-muted); white-space: nowrap; }
.ss-vc-list em u { min-width: 1.7em; padding: 0 .4em; border-radius: 999px; background: var(--ss-accent); color: var(--ss-on-accent); font-weight: 800; line-height: 1.7; text-align: center; }
.ss-vc-list li:first-child em u { animation: ss-bump 6s 3s ease-in-out infinite; }
.ss-vc-owner { padding: .1em .6em; border-radius: 999px; background: var(--ss-soft); color: var(--ss-accent-text); font-weight: 700; line-height: 1.6; }
.ss-vc-team { display: inline-flex; padding-left: .5em; }
.ss-vc-team i { display: inline-flex; align-items: center; justify-content: center; width: 2.35em; height: 2.35em; margin-left: -.65em; border: .16em solid #fff; border-radius: 50%; background: var(--av); color: #14532d; font-size: .75em; font-weight: 800; }
.ss-vc-chip-a { left: 0; bottom: 0; }
.ss-vc-chip-b { right: 0; bottom: .7em; }

/* ===== Plataforma (host sem produto ativo) ===== */
.ss-gv { display: grid; gap: .8em; width: 26em; padding: 0; }
.ss-gv-item { display: flex; align-items: center; gap: .9em; padding: .9em 1.1em; }
.ss-gv-item:nth-child(2) { margin-left: 1.6em; margin-right: -1.6em; animation-delay: -2.5s; }
.ss-gv-item:nth-child(3) { animation-delay: -5s; }
.ss-gv-item b { display: block; font-size: .9em; font-weight: 700; line-height: 1.3; }
.ss-gv-item small { display: block; font-size: .75em; line-height: 1.4; color: var(--ss-card-muted); }

/* ===== Esquerda: links na cor do produto ===== */
html[data-ui="graviti"][data-ui-product] .graviti-auth :is(.signup-login a, .signup-consent a, .google-chip a) { color: var(--ui-product-text); }
html[data-ui="graviti"][data-ui-product] .graviti-auth .google-btn:hover { border-color: var(--ui-product); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-product) 14%, transparent); }
html[data-ui="graviti"][data-ui-product] .graviti-auth .google-chip { background: color-mix(in srgb, var(--ui-product) 8%, white); border-color: color-mix(in srgb, var(--ui-product) 28%, white); color: var(--ui-text-primary); }

/* ===== Keyframes ===== */
@keyframes ss-drift { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(9%, 7%, 0) scale(1.12); } 100% { transform: translate3d(-6%, 13%, 0) scale(.94); } }
@keyframes ss-sheen { to { background-position: 100% 50%; } }
@keyframes ss-rise { from { opacity: 0; transform: translate3d(0, 16px, 0); } }
@keyframes ss-pop { from { opacity: 0; transform: translate3d(0, 10px, 0) scale(.9); } }
@keyframes ss-float { to { transform: translate3d(0, -7px, 0); } }
@keyframes ss-pulse { 0%, 100% { box-shadow: 0 0 0 0 var(--ss-pulse, color-mix(in srgb, var(--ss-accent) 40%, transparent)); } 50% { box-shadow: 0 0 0 6px transparent; } }
@keyframes ss-bump { 0%, 8%, 100% { transform: none; } 3% { transform: scale(1.45); } }
@keyframes ss-gp-sent { 0%, 28% { opacity: 1; } 33%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ss-gp-approve { 0%, 31% { opacity: 0; transform: scale(.7); } 36% { opacity: 1; transform: scale(1.08); } 39%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(.9); } }
@keyframes ss-vc-focus-1 { 0%, 22%, 100% { background: transparent; } 3%, 19% { background: var(--ss-soft); } }
@keyframes ss-vc-focus-2 { 0%, 25%, 47%, 100% { background: transparent; } 28%, 44% { background: var(--ss-soft); } }
@keyframes ss-vc-focus-3 { 0%, 50%, 72%, 100% { background: transparent; } 53%, 69% { background: var(--ss-soft); } }
@keyframes ss-vc-focus-4 { 0%, 75%, 97%, 100% { background: transparent; } 78%, 94% { background: var(--ss-soft); } }

/* ===== Responsivo ===== */
@media (max-width: 1100px) {
  .signup-topbar { padding: 22px 32px 0; }
  .signup-hero { padding: 12px 32px 32px; }
  .signup-eyebrow { font-size: 10px; letter-spacing: .09em; }
}
/* Notebook (altura útil de 600 a 760 px): uma linha de selos e ilustração menor, para o painel não rolar. */
@media (max-height: 760px) and (min-width: 901px) {
  .signup-topbar { padding-top: 16px; }
  .signup-hero { padding-top: 8px; padding-bottom: 20px; }
  .signup-eyebrow { margin-bottom: 12px; padding: 5px 12px 5px 10px; }
  .signup-description { margin-top: 12px; }
  .ss-visual { margin-top: 1.8em; font-size: clamp(10px, min(1.18vw, 1.8vh), 16px); }
  .signup-points { margin-top: 18px; max-width: none; }
  .signup-points li { padding: 5px 11px 5px 8px; font-size: 12px; }
  .signup-points li:nth-child(n+3) { display: none; }
}
/* Abaixo disso a descrição sai antes de a ilustração ficar ilegível. */
@media (max-height: 640px) and (min-width: 901px) {
  .signup-description { display: none; }
}
@media (max-width: 900px) { .signup-right.signup-story { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .signup-story, .signup-story *, .signup-story *::before, .signup-story *::after { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  .signup-story .signup-headline em, .ss-gp-total b { -webkit-text-fill-color: currentColor; background: none; }
}