/* ============================================================
   SkinSignal - THE BUTTON SYSTEM

   One button for every call to action on the site. It used to be six:
   a square blue block for Analyse, rounded blue blocks for pricing, a
   blue outline pill in The Game, a green pill in The Intelligence, and
   small uppercase blue blocks on the dashboard, account and forum
   pages. Six shapes for one job reads as a site assembled in pieces.

   THE SHAPE IS THE SYSTEM. A lit pill: a top-light gradient, a hairline
   of light along the top edge, a soft drop in its own colour, and a
   halo that breathes. Same radius, weight, type and hover everywhere.

   THE COLOUR IS THE MEANING. Two variants, chosen by what pressing the
   button does, never by where it sits or what looks nicer beside it:

     .cta--go        green   starts something or moves toward paying:
                             the landing hero's Sign in with Steam (the
                             one thing that page exists for), Find my
                             money, Unlock the full read, See the plans,
                             Upgrade to post
     .cta--explore   blue    goes to look at something, signs in, or
                             acts inside the product: See every card,
                             Build your profile, Sign in with Steam,
                             Manage or cancel your plan, Post it, and, as
                             a ghost, Start Monthly beside Get Lifetime

   Green pulses livelier than blue, because the money actions are the
   ones the page is asking for. Blue breathes, slower and dimmer.

     .cta--gold      legendary gold, for exactly one button: Get
                     Lifetime. Gold is what legendary means everywhere
                     on this site, so the membership that never runs out
                     wears it. It pulses hardest of the three.

     .cta--steam     THE STEAM DOOR, for every Sign in with Steam: a solid
                     brand blue rounded rectangle (not a pill), white type,
                     the Steam mark on the left as a flat white glyph, and
                     the arrow on the right. It does not breathe: the
                     one button every signed out page leads to is steady.
                     The icon shows only while the link goes to Steam
                     (href auth-login), so the footer and the hero, which
                     turn into "Open your dashboard" for somebody signed in,
                     drop it by themselves. The header's small sign in is
                     not this: it is the quiet outlined .auth__signin (css/header.css).

     .cta--solid     the Steam door's look for a way on that is not a
                     sign in: the same solid blue rounded rectangle, white
                     type and arrow, and no Steam mark. See every calling
                     card, on the landing.

     .cta--line      the Steam door's quiet sibling: the same rounded
                     rectangle, outlined in brand blue on dark glass, white
                     type, no halo. For a secondary way on that should be
                     clear without competing: Explore market tools under
                     the landing's market terminal.

     .cta--silver    neutral, for a way in that should be present without
                     asking loudly: Sign in free on the Free pricing card,
                     where green would compete with the gold beside it.
                     Used as a ghost there, and it breathes like blue.

   Two modifiers go with any variant:

     .cta--ghost     the outline version, for the anchor beside a hero
                     button (Start Monthly next to Get Lifetime)
     .cta--arrow     the arrow drawn in CSS rather than inline SVG, for
                     buttons whose text a script replaces while they
                     work (checkout), so the arrow survives the swap

   SIZES are a scale, not per page choices:

     (default)       46px   in page copy
     .cta--lg        52px   the hero form and the pricing cards
     .cta--sm        38px   inside app cards: dashboard, account, forum
     .cta--block            full width of its container

   CHEAP. The halo is one pseudo element per button animating opacity
   only. Hover moves one pixel. Nothing follows the mouse. Reduced
   motion gets the same buttons holding still.

   HOOKS STAY. Every button keeps its old class (beat__cta, intel__cta,
   tier__btn, teaser__cta, acct__cta, acct__manage, compose__cta) for
   the scripts and tests that find it and for its placement in its own
   section. None of those classes carries any visual styling now: if a
   button looks different from the others, the difference is a bug.

   Loaded last on every page, so it is the final word on how a button
   looks.
   ============================================================ */

.cta {
  --cta-rgb: 31, 214, 125;
  --cta-fill: linear-gradient(180deg, #25e38c 0%, #15b866 100%);
  --cta-fill-hover: linear-gradient(180deg, #36ed99 0%, #19c470 100%);
  --cta-ink: #03140a;

  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 46px;
  padding: 0 20px 0 22px;
  border: 1px solid rgba(var(--cta-rgb), 0.9);
  border-radius: 999px;
  background: var(--cta-fill);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 0 0 1px rgba(var(--cta-rgb), 0.25),
    0 10px 26px -10px rgba(var(--cta-rgb), 0.55);
  -webkit-appearance: none;
          appearance: none;
  font-family: var(--font-display);
  font-stretch: var(--display-header);
  font-weight: 700;
  font-size: 13.5px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: none;
  text-decoration: none;
  color: var(--cta-ink);
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    box-shadow 240ms ease,
    transform 240ms cubic-bezier(0.16, 0.84, 0.32, 1),
    filter 200ms ease;
}

/* The two meanings. Blue carries dark ink too: on the accent's mid
   tone dark type measures above 5 where white measures under 4. */
.cta--go {
  --cta-rgb: 31, 214, 125;
  --cta-fill: linear-gradient(180deg, #25e38c 0%, #15b866 100%);
  --cta-fill-hover: linear-gradient(180deg, #36ed99 0%, #19c470 100%);
  --cta-ink: #03140a;
}

.cta--explore {
  --cta-rgb: 61, 127, 255;
  --cta-fill: linear-gradient(180deg, #6a9fff 0%, #3d7fff 55%, #2f6ae0 100%);
  --cta-fill-hover: linear-gradient(180deg, #7eacff 0%, #4a89ff 55%, #3a75e8 100%);
  --cta-ink: #030b1c;
}

/* Legendary. Dark ink, for the same contrast reason as the others. */
.cta--gold {
  --cta-rgb: 240, 180, 41;
  --cta-fill: linear-gradient(180deg, #ffe08a 0%, #f5c451 40%, #f0b429 64%, #c98a12 100%);
  --cta-fill-hover: linear-gradient(180deg, #ffeaad 0%, #f8d06a 40%, #f3bd3f 64%, #d6961a 100%);
  --cta-ink: #1a1102;
}

/* Neutral. The same lit pill with no hue in it. */
.cta--silver {
  --cta-rgb: 222, 220, 214;
  --cta-fill: linear-gradient(180deg, #faf8f3 0%, #e4e2dc 55%, #cbc9c3 100%);
  --cta-fill-hover: linear-gradient(180deg, #ffffff 0%, #eceae4 55%, #d6d4ce 100%);
  --cta-ink: #0b0b0c;
}

/* The outline. A tint of the variant as the fill and a clear edge, so it
   reads as a real button that has chosen not to shout. */
.cta--ghost {
  --cta-fill: rgba(var(--cta-rgb), 0.08);
  --cta-fill-hover: rgba(var(--cta-rgb), 0.16);
  border-color: rgba(var(--cta-rgb), 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 1px rgba(var(--cta-rgb), 0.08);
}

.cta--explore.cta--ghost { --cta-ink: #a8c4ff; }
.cta--go.cta--ghost      { --cta-ink: #7ef0b4; }
.cta--gold.cta--ghost    { --cta-ink: #ffd36b; }
.cta--silver.cta--ghost  { --cta-ink: #ecebe6; }

.cta svg {
  width: 15px;
  height: 15px;
  flex: none;
  transition: transform 260ms cubic-bezier(0.16, 0.84, 0.32, 1);
}

/* ---------- The halo ---------- */

.cta::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.35;
  box-shadow:
    0 0 0 1px rgba(var(--cta-rgb), 0.35),
    0 0 18px 2px rgba(var(--cta-rgb), 0.45),
    0 0 44px 6px rgba(var(--cta-rgb), 0.22);
  animation: ctaPull 2.4s ease-in-out infinite;
}

.cta--explore::before {
  opacity: 0.25;
  box-shadow:
    0 0 0 1px rgba(var(--cta-rgb), 0.3),
    0 0 16px 1px rgba(var(--cta-rgb), 0.36),
    0 0 36px 4px rgba(var(--cta-rgb), 0.16);
  animation: ctaBreathe 3.6s ease-in-out infinite;
}

@keyframes ctaPull {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 1; }
}

@keyframes ctaBreathe {
  0%, 100% { opacity: 0.22; }
  50%      { opacity: 0.6; }
}

/* Gold pulses hardest: a wider halo on a faster beat. */
.cta--gold::before {
  opacity: 0.4;
  box-shadow:
    0 0 0 1px rgba(var(--cta-rgb), 0.45),
    0 0 22px 3px rgba(var(--cta-rgb), 0.55),
    0 0 56px 10px rgba(var(--cta-rgb), 0.3);
  animation: ctaLegend 2s ease-in-out infinite;
}

@keyframes ctaLegend {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}

/* Silver breathes like blue, dimmer again: it has no hue to glow with. */
.cta--silver::before {
  opacity: 0.2;
  box-shadow:
    0 0 0 1px rgba(var(--cta-rgb), 0.25),
    0 0 14px 1px rgba(var(--cta-rgb), 0.2),
    0 0 30px 3px rgba(var(--cta-rgb), 0.08);
  animation: ctaBreathe 3.6s ease-in-out infinite;
}

/* A ghost's halo is quieter still: it is the anchor. */
.cta--ghost::before { opacity: 0.18; }

/* ---------- Interaction ---------- */

.cta:hover,
.cta:focus-visible {
  background: var(--cta-fill-hover);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 0 0 1px rgba(var(--cta-rgb), 0.4),
    0 12px 34px -8px rgba(var(--cta-rgb), 0.7);
  transform: translate3d(0, -1px, 0);
}

/* Held solid under a cursor, so hovering reads as the button waking up
   rather than as a flicker caught mid breath. */
.cta:hover::before,
.cta:focus-visible::before {
  animation: none;
  opacity: 1;
}

.cta:hover svg,
.cta:focus-visible svg { transform: translate3d(4px, 0, 0); }

/* The arrow, drawn in CSS so a script replacing the label keeps it. */
.cta--arrow::after {
  content: '';
  flex: none;
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8h10M9 4.5 12.5 8 9 11.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8h10M9 4.5 12.5 8 9 11.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 260ms cubic-bezier(0.16, 0.84, 0.32, 1);
}

.cta--arrow:hover::after,
.cta--arrow:focus-visible::after { transform: translate3d(4px, 0, 0); }

.cta--arrow:disabled::after { opacity: 0.5; transform: none; }

.cta:active {
  transform: translate3d(0, 0, 0) scale(0.985);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(var(--cta-rgb), 0.35),
    0 6px 18px -8px rgba(var(--cta-rgb), 0.55);
}

.cta:focus-visible {
  outline: 2px solid rgba(var(--cta-rgb), 0.85);
  outline-offset: 3px;
}

/* Waiting on something (checkout, Stripe, a post): the button is still
   itself, just quieter, and it stops asking. */
.cta:disabled,
.cta[aria-disabled="true"] {
  cursor: default;
  filter: saturate(0.55) brightness(0.8);
  transform: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.cta:disabled::before,
.cta[aria-disabled="true"]::before {
  animation: none;
  opacity: 0;
}

/* ---------- Sizes ---------- */

.cta--sm {
  gap: 7px;
  height: 38px;
  padding: 0 16px 0 18px;
  font-size: 12.5px;
}

.cta--lg {
  height: 52px;
  padding: 0 26px 0 28px;
  font-size: 14.5px;
}

.cta--block {
  display: flex;
  width: 100%;
}

/* ---------- The Steam door ----------

   Solid brand blue, a rounded rectangle, white type (Inter 700), the
   Steam mark left and the arrow right. No halo and no pulse: a soft
   blue drop and a hairline of light along the top, and on hover one
   pixel of lift, a touch brighter, a touch more shadow.

   THE MARK IS A FLAT WHITE GLYPH: the standard monochrome Steam logo,
   the disc with the valve cut out of it, so the button's own blue shows
   through the cut. Vector (an SVG mask), so it is crisp at every size,
   and coloured by the button, never a picture pasted on it.

   It is drawn in the button's ::before (free here: this variant has no
   halo), not an element inside it, so every Sign in with Steam on the
   site (markup, js/signin.js's plate, the pages that draw their own)
   gets it from this one class. And it goes away with the href: a button
   that now leads to the dashboard is still the blue door, without the
   mark. The header's quiet sign in draws the same glyph inline
   (js/auth.js). */
.cta--steam,
.cta--solid {
  --cta-rgb: 61, 127, 255;
  --steam-fill: linear-gradient(180deg, #4c8dff 0%, #3478f6 100%);
  --steam-fill-hover: linear-gradient(180deg, #5c97ff 0%, #3f82fb 100%);
  --cta-fill: var(--steam-fill);
  --cta-fill-hover: var(--steam-fill-hover);
  --cta-ink: #ffffff;
  --steam-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.979 0C5.678 0 .511 4.86.022 11.037l6.432 2.658c.545-.371 1.203-.59 1.912-.59.063 0 .125.004.188.006l2.861-4.142V8.91c0-2.495 2.028-4.524 4.524-4.524 2.494 0 4.524 2.031 4.524 4.527s-2.03 4.525-4.524 4.525h-.105l-4.076 2.911c0 .052.004.105.004.159 0 1.875-1.515 3.396-3.39 3.396-1.635 0-3.016-1.173-3.331-2.727L.436 15.27C1.862 20.307 6.486 24 11.979 24c6.627 0 11.999-5.373 11.999-12S18.605 0 11.979 0zM7.54 18.21l-1.473-.61c.262.543.714.999 1.314 1.25 1.297.539 2.793-.076 3.332-1.375.263-.63.264-1.319.005-1.949s-.75-1.121-1.377-1.383c-.624-.26-1.29-.249-1.878-.03l1.523.63c.956.4 1.409 1.5 1.009 2.455-.397.957-1.497 1.41-2.454 1.012H7.54zm11.415-9.303c0-1.662-1.353-3.015-3.015-3.015-1.665 0-3.015 1.353-3.015 3.015 0 1.665 1.35 3.015 3.015 3.015 1.663 0 3.015-1.35 3.015-3.015zm-5.273-.005c0-1.252 1.013-2.266 2.265-2.266 1.249 0 2.266 1.014 2.266 2.266 0 1.251-1.017 2.265-2.266 2.265-1.253 0-2.265-1.014-2.265-2.265z'/%3E%3C/svg%3E");
  --steam-size: 20px;
  --steam-x: 17px;

  gap: 12px;
  height: 48px;
  padding: 0 18px;
  border-color: rgba(118, 166, 255, 0.35);
  border-radius: 10px;
  box-shadow:
    0 12px 36px rgba(61, 127, 255, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  font-family: var(--font-body);
  font-stretch: normal;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0;
  text-shadow: 0 1px 1px rgba(8, 22, 58, 0.3);
}

.cta--steam[href*="auth-login"] {
  padding-left: calc(var(--steam-x) + var(--steam-size) + 12px);
}

/* No halo. The pseudo element carries the mark instead, and only while
   the button goes to Steam. */
.cta--steam::before,
.cta--solid::before { display: none; }

.cta--steam[href*="auth-login"]::before {
  display: block;
  top: 50%;
  right: auto;
  bottom: auto;
  left: var(--steam-x);
  z-index: 0;
  width: var(--steam-size);
  height: var(--steam-size);
  margin-top: calc(var(--steam-size) / -2);
  border-radius: 0;
  opacity: 1;
  box-shadow: none;
  animation: none;
  background: #ffffff;
  -webkit-mask: var(--steam-glyph) center / contain no-repeat;
          mask: var(--steam-glyph) center / contain no-repeat;
  filter: drop-shadow(0 1px 1px rgba(8, 22, 58, 0.3));
}

.cta--steam:hover,
.cta--steam:focus-visible,
.cta--solid:hover,
.cta--solid:focus-visible {
  box-shadow:
    0 16px 40px rgba(61, 127, 255, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

.cta--steam:active,
.cta--solid:active {
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.22),
    0 8px 22px rgba(61, 127, 255, 0.2);
}

/* The same door at every size on the scale. */
.cta--steam.cta--sm {
  --steam-size: 17px;
  --steam-x: 13px;
  gap: 9px;
  height: 40px;
  padding-right: 14px;
  border-radius: 9px;
  font-size: 13.5px;
}
.cta--steam.cta--sm[href*="auth-login"] { padding-left: calc(var(--steam-x) + var(--steam-size) + 9px); }

.cta--steam.cta--lg,
.cta--solid.cta--lg {
  --steam-size: 22px;
  --steam-x: 19px;
  height: 54px;
  padding-right: 22px;
  font-size: 16px;
}

/* The landing hero's one door: the big primary. Its width is set where
   it is placed (css/hero.css); the label takes the room, so the arrow
   sits at the far edge. */
.cta--steam.cta--xl {
  --steam-size: 24px;
  --steam-x: 24px;
  gap: 14px;
  height: 70px;
  padding-right: 24px;
  border-radius: 11px;
  font-size: 18px;
}
.cta--steam.cta--xl[href*="auth-login"] { padding-left: calc(var(--steam-x) + var(--steam-size) + 14px); }
.cta--steam.cta--xl::after { width: 18px; height: 18px; }

/* ---------- The outlined door ----------

   The same shape as the Steam door, outlined: dark glass, a 1px brand
   blue edge, white type and a faint blue ambient. It reads as a real
   button that has chosen not to shout. No halo. */
.cta--line {
  --cta-rgb: 76, 141, 255;
  --cta-fill: rgba(10, 18, 34, 0.6);
  --cta-fill-hover: rgba(18, 32, 60, 0.8);
  --cta-ink: #ffffff;

  gap: 12px;
  height: 48px;
  padding: 0 20px 0 22px;
  border-color: rgba(76, 141, 255, 0.55);
  border-radius: 10px;
  box-shadow:
    0 0 22px -8px rgba(61, 127, 255, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  font-family: var(--font-body);
  font-stretch: normal;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0;
}
.cta--line::before { display: none; }
.cta--line:hover,
.cta--line:focus-visible {
  border-color: rgba(118, 166, 255, 0.9);
  box-shadow:
    0 0 26px -6px rgba(61, 127, 255, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* THE HEADER'S SIGN IN (.auth__signin), the quiet outlined one, is drawn
   by css/header.css with the rest of the header. */

/* ---------- Reduced motion ----------

   The same buttons, holding still: no breathing halo, no lift, no
   nudge. The halo stays at its resting glow so the button is no less
   findable. */
@media (prefers-reduced-motion: reduce) {
  .cta,
  .cta svg,
  .cta::before,
  .cta::after {
    transition: none !important;
    animation: none !important;
  }

  .cta:hover,
  .cta:focus-visible,
  .cta:active,
  .cta:hover svg,
  .cta:focus-visible svg,
  .cta--arrow:hover::after,
  .cta--arrow:focus-visible::after {
    transform: none;
  }

}