/* Approved prototype: community-comes-back-mobile.html */
#tg-community-mobile-preview {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  #tg-community-mobile-preview .tg-mobile-canvas {
    width: min(100%, 390px);
    min-width: 0;
  }

  #tg-community-intro {
    --tg-motion: cubic-bezier(.22, .78, .22, 1);
    display: grid;
    gap: 20px;
    width: 100%;
    color: var(--foreground);
  }

  #tg-community-intro .tg-intro-topline,
  #tg-community-intro .tg-intro-progress,
  #tg-community-intro .tg-intro-actions,
  #tg-community-intro .tg-next-peek {
    display: flex;
    align-items: center;
  }

  #tg-community-intro .tg-intro-topline {
    justify-content: space-between;
    gap: 16px;
  }

  #tg-community-intro .tg-intro-progress {
    gap: 7px;
  }

  #tg-community-intro .tg-intro-progress-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--border);
  }

  #tg-community-intro .tg-intro-progress-dot.is-current {
    width: 24px;
    background: var(--viz-series-1);
  }

  #tg-community-intro .tg-intro-copy {
    display: grid;
    justify-items: center;
    gap: 12px;
    text-align: center;
    max-width: 620px;
    margin-inline: auto;
  }

  #tg-community-intro .tg-intro-copy h2 {
    margin: 0;
    max-width: 560px;
    text-wrap: balance;
  }

  #tg-community-intro .tg-intro-stage {
    position: relative;
    min-height: 390px;
    overflow: hidden;
    isolation: isolate;
  }

  #tg-community-intro .tg-intro-stage::before {
    content: "";
    position: absolute;
    inset: 12% 18%;
    z-index: -1;
    border-radius: 999px;
    background: radial-gradient(circle, color-mix(in srgb, var(--viz-series-1) 16%, transparent), transparent 68%);
    opacity: .75;
  }

  #tg-community-intro .tg-intro-paths {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    color: var(--border);
    overflow: visible;
  }

  #tg-community-intro .tg-path {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
  }

  #tg-community-intro .tg-path-out,
  #tg-community-intro .tg-path-back {
    opacity: .72;
  }

  #tg-community-intro .tg-path-glow {
    color: var(--viz-series-1);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 780;
    stroke-dashoffset: 780;
    opacity: 0;
  }

  #tg-community-intro .tg-person,
  #tg-community-intro .tg-choice {
    position: absolute;
    top: 46%;
    display: grid;
    place-items: center;
    gap: 8px;
    transform: translateY(-50%);
    text-align: center;
  }

  #tg-community-intro .tg-person-giver {
    left: 4%;
  }

  #tg-community-intro .tg-person-shopper {
    right: 3%;
  }

  #tg-community-intro .tg-choice {
    left: 50%;
    top: 41%;
    transform: translate(-50%, -50%);
  }

  #tg-community-intro .tg-avatar,
  #tg-community-intro .tg-choice-product,
  #tg-community-intro .tg-action-token,
  #tg-community-intro .tg-choice-check {
    display: grid;
    place-items: center;
    border-radius: 999px;
  }

  #tg-community-intro .tg-avatar {
    width: 64px;
    height: 64px;
    color: var(--card-foreground);
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: 0 10px 28px color-mix(in srgb, var(--foreground) 11%, transparent);
  }

  #tg-community-intro .tg-avatar svg {
    width: 24px;
    height: 24px;
  }

  #tg-community-intro .tg-person-label,
  #tg-community-intro .tg-choice-label {
    color: var(--muted-foreground);
    white-space: nowrap;
  }

  #tg-community-intro .tg-level-ring {
    position: absolute;
    top: -8px;
    width: 80px;
    height: 80px;
    border-radius: 999px;
    border: 3px solid color-mix(in srgb, var(--viz-series-1) 22%, var(--border));
    opacity: 0;
    transform: scale(.7) rotate(-22deg);
  }

  #tg-community-intro .tg-level-ring::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    border-top: 3px solid var(--viz-series-1);
    border-right: 3px solid var(--viz-series-1);
    transform: rotate(26deg);
  }

  #tg-community-intro .tg-wallet-return {
    position: absolute;
    top: -58px;
    left: 50%;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    color: var(--primary-foreground);
    background: var(--primary);
    border-radius: 999px;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, 12px) scale(.88);
  }

  #tg-community-intro .tg-choice-product {
    width: 72px;
    height: 72px;
    color: var(--card-foreground);
    background: color-mix(in srgb, var(--viz-series-2) 18%, var(--card));
    border: 1px solid color-mix(in srgb, var(--viz-series-2) 35%, var(--border));
  }

  #tg-community-intro .tg-choice-product svg {
    width: 28px;
    height: 28px;
  }

  #tg-community-intro .tg-choice-check {
    position: absolute;
    top: -4px;
    right: -7px;
    width: 26px;
    height: 26px;
    color: var(--primary-foreground);
    background: var(--primary);
    opacity: 0;
    transform: scale(.4) rotate(-24deg);
  }

  #tg-community-intro .tg-action-token {
    position: absolute;
    left: 13%;
    top: 52%;
    width: 34px;
    height: 34px;
    color: var(--foreground);
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--foreground) 9%, transparent);
    opacity: 0;
    transform: translate(-50%, -50%) scale(.55);
  }

  #tg-community-intro .tg-return-token {
    position: absolute;
    right: 13%;
    top: 62%;
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--foreground);
    opacity: 0;
    transform: translate(50%, -50%) scale(.6);
  }

  #tg-community-intro .tg-return-token span {
    color: var(--muted-foreground);
  }

  #tg-community-intro .tg-stage-message {
    position: absolute;
    left: 50%;
    bottom: 20px;
    width: min(90%, 520px);
    min-height: 28px;
    transform: translateX(-50%);
    text-align: center;
    color: var(--muted-foreground);
  }

  #tg-community-intro .tg-stage-message span {
    position: absolute;
    inset-inline: 0;
    opacity: 0;
    transform: translateY(8px);
  }

  #tg-community-intro .tg-intro-actions {
    justify-content: center;
    gap: 10px;
  }

  #tg-community-intro .tg-intro-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  #tg-community-intro .tg-next-peek {
    justify-content: center;
    gap: 10px;
    color: var(--muted-foreground);
  }

  #tg-community-intro .tg-next-peek.is-visible {
    animation: tg-peek-in .42s var(--tg-motion) both;
  }

  #tg-community-intro .tg-intro-stage.is-playing .tg-action-token {
    animation: tg-give 1.85s var(--tg-motion) both;
  }

  #tg-community-intro .tg-intro-stage.is-playing .tg-token-purchase { animation-delay: .35s; }
  #tg-community-intro .tg-intro-stage.is-playing .tg-token-review { animation-delay: .55s; }
  #tg-community-intro .tg-intro-stage.is-playing .tg-token-like { animation-delay: .75s; }
  #tg-community-intro .tg-intro-stage.is-playing .tg-token-comment { animation-delay: .95s; }
  #tg-community-intro .tg-intro-stage.is-playing .tg-token-refer { animation-delay: 1.15s; }

  #tg-community-intro .tg-intro-stage.is-playing .tg-choice-check {
    animation: tg-choice-made .62s var(--tg-motion) 2.45s both;
  }

  #tg-community-intro .tg-intro-stage.is-playing .tg-path-glow {
    animation: tg-return-path 1.35s var(--tg-motion) 2.7s both;
  }

  #tg-community-intro .tg-intro-stage.is-playing .tg-return-token {
    animation: tg-return 1.55s var(--tg-motion) both;
  }

  #tg-community-intro .tg-intro-stage.is-playing .tg-return-one { animation-delay: 2.75s; }
  #tg-community-intro .tg-intro-stage.is-playing .tg-return-two { animation-delay: 2.95s; }
  #tg-community-intro .tg-intro-stage.is-playing .tg-return-three { animation-delay: 3.15s; }

  #tg-community-intro .tg-intro-stage.is-playing .tg-level-ring {
    animation: tg-level-up .8s var(--tg-motion) 4.05s both;
  }

  #tg-community-intro .tg-intro-stage.is-playing .tg-wallet-return {
    animation: tg-wallet-in .68s var(--tg-motion) 4.48s both;
  }

  #tg-community-intro .tg-intro-stage.is-playing .tg-message-give {
    animation: tg-message-first 2.4s var(--tg-motion) .25s both;
  }

  #tg-community-intro .tg-intro-stage.is-playing .tg-message-return {
    animation: tg-message-last .52s var(--tg-motion) 4.25s both;
  }

  @keyframes tg-give {
    0% { left: 13%; top: 52%; opacity: 0; transform: translate(-50%, -50%) scale(.55); }
    16% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    52% { left: 50%; top: 26%; opacity: 1; transform: translate(-50%, -50%) scale(1); }
    84% { opacity: 1; }
    100% { left: 87%; top: 52%; opacity: 0; transform: translate(-50%, -50%) scale(.65); }
  }

  @keyframes tg-choice-made {
    0% { opacity: 0; transform: scale(.4) rotate(-24deg); }
    70% { opacity: 1; transform: scale(1.14) rotate(4deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
  }

  @keyframes tg-return-path {
    0% { stroke-dashoffset: 780; opacity: 0; }
    10% { opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: .85; }
  }

  @keyframes tg-return {
    0% { right: 13%; top: 62%; opacity: 0; transform: translate(50%, -50%) scale(.6); }
    18% { opacity: 1; transform: translate(50%, -50%) scale(1); }
    52% { right: 50%; top: 88%; opacity: 1; }
    86% { opacity: 1; }
    100% { right: 87%; top: 62%; opacity: 0; transform: translate(50%, -50%) scale(.65); }
  }

  @keyframes tg-level-up {
    0% { opacity: 0; transform: scale(.7) rotate(-22deg); }
    70% { opacity: 1; transform: scale(1.08) rotate(3deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
  }

  @keyframes tg-wallet-in {
    0% { opacity: 0; transform: translate(-50%, 12px) scale(.88); }
    70% { opacity: 1; transform: translate(-50%, -2px) scale(1.03); }
    100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  }

  @keyframes tg-message-first {
    0% { opacity: 0; transform: translateY(8px); }
    16%, 78% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-6px); }
  }

  @keyframes tg-message-last {
    0% { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
  }

  @keyframes tg-peek-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @media (max-width: 560px) {
    #tg-community-intro {
      gap: 16px;
    }

    #tg-community-intro .tg-intro-stage {
      min-height: 430px;
    }

    #tg-community-intro .tg-person-giver {
      left: 5%;
    }

    #tg-community-intro .tg-person-shopper {
      right: 1%;
    }

    #tg-community-intro .tg-choice {
      top: 38%;
    }

    #tg-community-intro .tg-avatar {
      width: 52px;
      height: 52px;
    }

    #tg-community-intro .tg-level-ring {
      top: -7px;
      width: 66px;
      height: 66px;
    }

    #tg-community-intro .tg-choice-product {
      width: 58px;
      height: 58px;
    }

    #tg-community-intro .tg-person-label,
    #tg-community-intro .tg-choice-label {
      white-space: normal;
      max-width: 92px;
    }

    #tg-community-intro .tg-wallet-return {
      top: -61px;
    }

    #tg-community-intro .tg-stage-message {
      bottom: 22px;
    }
  }

  #tg-community-mobile-preview #tg-community-intro {
    gap: 16px;
  }

  #tg-community-mobile-preview #tg-community-intro .tg-intro-stage {
    min-height: 430px;
  }

  #tg-community-mobile-preview #tg-community-intro .tg-person-giver {
    left: 5%;
  }

  #tg-community-mobile-preview #tg-community-intro .tg-person-shopper {
    right: 1%;
  }

  #tg-community-mobile-preview #tg-community-intro .tg-choice {
    top: 38%;
  }

  #tg-community-mobile-preview #tg-community-intro .tg-avatar {
    width: 52px;
    height: 52px;
  }

  #tg-community-mobile-preview #tg-community-intro .tg-level-ring {
    top: -7px;
    width: 66px;
    height: 66px;
  }

  #tg-community-mobile-preview #tg-community-intro .tg-choice-product {
    width: 58px;
    height: 58px;
  }

  #tg-community-mobile-preview #tg-community-intro .tg-person-label,
  #tg-community-mobile-preview #tg-community-intro .tg-choice-label {
    white-space: normal;
    max-width: 92px;
  }

  #tg-community-mobile-preview #tg-community-intro .tg-wallet-return {
    top: -61px;
  }

  #tg-community-mobile-preview #tg-community-intro .tg-stage-message {
    bottom: 22px;
  }

  @media (prefers-reduced-motion: reduce) {
    #tg-community-intro *,
    #tg-community-intro *::before,
    #tg-community-intro *::after {
      animation-duration: .01ms !important;
      animation-delay: 0ms !important;
      transition-duration: .01ms !important;
    }

    #tg-community-intro .tg-action-token,
    #tg-community-intro .tg-return-token,
    #tg-community-intro .tg-message-give {
      display: none;
    }

    #tg-community-intro .tg-choice-check,
    #tg-community-intro .tg-level-ring,
    #tg-community-intro .tg-wallet-return,
    #tg-community-intro .tg-message-return {
      opacity: 1;
      transform: none;
    }

    #tg-community-intro .tg-wallet-return {
      transform: translateX(-50%);
    }

    #tg-community-intro .tg-path-glow {
      opacity: .85;
      stroke-dashoffset: 0;
    }
  }

/* Approved prototype: one-line-five-ways-mobile-v2.html */
#tg-one-line-five-ways-mobile-v2 {
    display: flex;
    justify-content: center;
    width: 100%;
    color: var(--foreground);
  }

  #tg-one-line-five-ways-mobile-v2 .tg-mobile-canvas {
    width: min(100%, 390px);
    min-width: 0;
  }

  #tg-one-line-five-ways-mobile-v2 .tg-morph-story {
    --tg-motion: cubic-bezier(.22, .78, .22, 1);
    display: grid;
    gap: 16px;
    width: 100%;
  }

  #tg-one-line-five-ways-mobile-v2 .tg-topline,
  #tg-one-line-five-ways-mobile-v2 .tg-progress,
  #tg-one-line-five-ways-mobile-v2 .tg-actions,
  #tg-one-line-five-ways-mobile-v2 .tg-next,
  #tg-one-line-five-ways-mobile-v2 .tg-word-trail {
    display: flex;
    align-items: center;
  }

  #tg-one-line-five-ways-mobile-v2 .tg-topline {
    justify-content: space-between;
    gap: 16px;
  }

  #tg-one-line-five-ways-mobile-v2 .tg-progress {
    gap: 7px;
  }

  #tg-one-line-five-ways-mobile-v2 .tg-progress-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--border);
  }

  #tg-one-line-five-ways-mobile-v2 .tg-progress-dot.is-current {
    width: 24px;
    background: var(--viz-series-1);
  }

  #tg-one-line-five-ways-mobile-v2 .tg-copy {
    display: grid;
    justify-items: center;
    gap: 10px;
    text-align: center;
  }

  #tg-one-line-five-ways-mobile-v2 .tg-copy h2,
  #tg-one-line-five-ways-mobile-v2 .tg-copy p {
    margin: 0;
    text-wrap: balance;
  }

  #tg-one-line-five-ways-mobile-v2 .tg-copy p {
    color: var(--muted-foreground);
  }

  #tg-one-line-five-ways-mobile-v2 .tg-morph-stage {
    position: relative;
    min-height: 475px;
    isolation: isolate;
  }

  #tg-one-line-five-ways-mobile-v2 .tg-morph-stage::before {
    content: "";
    position: absolute;
    inset: 7% 8% 28%;
    z-index: -1;
    border-radius: 999px;
    background: radial-gradient(circle, color-mix(in srgb, var(--viz-series-1) 17%, transparent), transparent 70%);
  }

  #tg-one-line-five-ways-mobile-v2 .tg-morph-canvas {
    display: block;
    width: 100%;
    height: 330px;
    overflow: visible;
  }

  #tg-one-line-five-ways-mobile-v2 .tg-shape-library {
    opacity: 0;
    pointer-events: none;
  }

  #tg-one-line-five-ways-mobile-v2 .tg-living-line {
    fill: none;
    stroke: var(--viz-series-1);
    stroke-width: 6;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 9px 12px color-mix(in srgb, var(--viz-series-1) 30%, transparent));
  }

  #tg-one-line-five-ways-mobile-v2 .tg-shape-copy {
    position: absolute;
    left: 50%;
    bottom: 48px;
    display: grid;
    justify-items: center;
    gap: 5px;
    width: min(92%, 350px);
    min-height: 72px;
    transform: translateX(-50%);
    text-align: center;
  }

  #tg-one-line-five-ways-mobile-v2 .tg-shape-copy span {
    color: var(--muted-foreground);
  }

  #tg-one-line-five-ways-mobile-v2 .tg-shape-copy small {
    color: var(--foreground);
  }

  #tg-one-line-five-ways-mobile-v2 .tg-shape-copy.is-changing {
    animation: tg-copy-change .48s var(--tg-motion) both;
  }

  #tg-one-line-five-ways-mobile-v2 .tg-word-trail {
    position: absolute;
    left: 50%;
    bottom: 18px;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px 11px;
    width: min(94%, 360px);
    transform: translateX(-50%);
    color: var(--muted-foreground);
    opacity: 0;
  }

  #tg-one-line-five-ways-mobile-v2 .tg-word-trail.is-visible {
    animation: tg-words-in .55s var(--tg-motion) both;
  }

  #tg-one-line-five-ways-mobile-v2 .tg-actions {
    justify-content: center;
    gap: 10px;
  }

  #tg-one-line-five-ways-mobile-v2 .tg-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  #tg-one-line-five-ways-mobile-v2 .tg-next {
    justify-content: center;
    gap: 10px;
    text-align: center;
    color: var(--muted-foreground);
  }

  #tg-one-line-five-ways-mobile-v2 .tg-next.is-visible {
    animation: tg-next-in .42s var(--tg-motion) both;
  }

  @keyframes tg-copy-change {
    0% { opacity: 1; transform: translateX(-50%) translateY(0); }
    45% { opacity: 0; transform: translateX(-50%) translateY(-6px); }
    55% { opacity: 0; transform: translateX(-50%) translateY(6px); }
    100% { opacity: 1; transform: translateX(-50%) translateY(0); }
  }

  @keyframes tg-words-in {
    from { opacity: 0; transform: translateX(-50%) translateY(8px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
  }

  @keyframes tg-next-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @media (prefers-reduced-motion: reduce) {
    #tg-one-line-five-ways-mobile-v2 *,
    #tg-one-line-five-ways-mobile-v2 *::before,
    #tg-one-line-five-ways-mobile-v2 *::after {
      animation-duration: .01ms !important;
      animation-delay: 0ms !important;
      transition-duration: .01ms !important;
    }
  }

/* Approved prototype: expanding-capacity-levels-mobile.html */
#tg-expanding-capacity-mobile {
    display: flex;
    justify-content: center;
    width: 100%;
    color: var(--foreground);
  }

  #tg-expanding-capacity-mobile .tg-mobile-canvas {
    width: min(100%, 390px);
    min-width: 0;
  }

  #tg-expanding-capacity-mobile .tg-constellation-story {
    --tg-motion: cubic-bezier(.22, .78, .22, 1);
    display: grid;
    gap: 16px;
    width: 100%;
  }

  #tg-expanding-capacity-mobile .tg-topline,
  #tg-expanding-capacity-mobile .tg-progress,
  #tg-expanding-capacity-mobile .tg-actions,
  #tg-expanding-capacity-mobile .tg-next,
  #tg-expanding-capacity-mobile .tg-level-trail {
    display: flex;
    align-items: center;
  }

  #tg-expanding-capacity-mobile .tg-topline {
    justify-content: space-between;
    gap: 16px;
  }

  #tg-expanding-capacity-mobile .tg-progress {
    gap: 7px;
  }

  #tg-expanding-capacity-mobile .tg-progress-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--border);
  }

  #tg-expanding-capacity-mobile .tg-progress-dot.is-current {
    width: 24px;
    background: var(--viz-series-1);
  }

  #tg-expanding-capacity-mobile .tg-copy {
    display: grid;
    justify-items: center;
    gap: 10px;
    text-align: center;
  }

  #tg-expanding-capacity-mobile .tg-copy h2 {
    margin: 0;
    max-width: 340px;
    text-wrap: balance;
  }

  #tg-expanding-capacity-mobile .tg-constellation-stage {
    position: relative;
    min-height: 500px;
    isolation: isolate;
  }

  #tg-expanding-capacity-mobile .tg-constellation-stage::before {
    content: "";
    position: absolute;
    inset: 2% 4% 30%;
    z-index: -1;
    border-radius: 999px;
    background: radial-gradient(circle, color-mix(in srgb, var(--viz-series-1) 18%, transparent), transparent 72%);
  }

  #tg-expanding-capacity-mobile .tg-constellation-canvas {
    display: block;
    width: 100%;
    height: 340px;
    overflow: visible;
  }

  #tg-expanding-capacity-mobile .tg-shape-library {
    opacity: 0;
    pointer-events: none;
  }

  #tg-expanding-capacity-mobile .tg-living-orbit {
    fill: none;
    stroke: var(--viz-series-1);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 9px 12px color-mix(in srgb, var(--viz-series-1) 27%, transparent));
  }

  #tg-expanding-capacity-mobile .tg-action-sparks circle {
    fill: var(--primary-foreground);
    stroke: var(--viz-series-1);
    stroke-width: 4;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    vector-effect: non-scaling-stroke;
  }

  #tg-expanding-capacity-mobile .tg-action-sparks circle.is-visible {
    animation: tg-spark-in .48s var(--tg-motion) both;
  }

  #tg-expanding-capacity-mobile .tg-level-copy {
    position: absolute;
    left: 50%;
    top: 126px;
    display: grid;
    justify-items: center;
    gap: 2px;
    width: 210px;
    transform: translateX(-50%);
    text-align: center;
  }

  #tg-expanding-capacity-mobile .tg-level-copy span,
  #tg-expanding-capacity-mobile .tg-level-copy small,
  #tg-expanding-capacity-mobile .tg-benefit-message span,
  #tg-expanding-capacity-mobile .tg-level-trail {
    color: var(--muted-foreground);
  }

  #tg-expanding-capacity-mobile .tg-level-copy.is-changing {
    animation: tg-copy-change .5s var(--tg-motion) both;
  }

  #tg-expanding-capacity-mobile .tg-benefit-message {
    position: absolute;
    left: 50%;
    bottom: 46px;
    display: grid;
    justify-items: center;
    gap: 4px;
    width: min(92%, 350px);
    transform: translateX(-50%) translateY(10px);
    text-align: center;
    opacity: 0;
  }

  #tg-expanding-capacity-mobile .tg-benefit-message.is-visible {
    animation: tg-benefit-in .6s var(--tg-motion) both;
  }

  #tg-expanding-capacity-mobile .tg-level-trail {
    position: absolute;
    left: 50%;
    bottom: 18px;
    justify-content: center;
    gap: 7px;
    width: min(96%, 370px);
    transform: translateX(-50%);
    opacity: 0;
  }

  #tg-expanding-capacity-mobile .tg-level-trail i {
    font-style: normal;
  }

  #tg-expanding-capacity-mobile .tg-level-trail.is-visible {
    animation: tg-trail-in .52s var(--tg-motion) both;
  }

  #tg-expanding-capacity-mobile .tg-actions {
    justify-content: center;
    gap: 10px;
  }

  #tg-expanding-capacity-mobile .tg-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  #tg-expanding-capacity-mobile .tg-next {
    justify-content: center;
    gap: 10px;
    text-align: center;
    color: var(--muted-foreground);
  }

  #tg-expanding-capacity-mobile .tg-next.is-visible {
    animation: tg-next-in .42s var(--tg-motion) both;
  }

  @keyframes tg-spark-in {
    from { opacity: 0; transform: scale(.4); }
    to { opacity: 1; transform: scale(1); }
  }

  @keyframes tg-copy-change {
    0% { opacity: 1; transform: translateX(-50%) translateY(0); }
    45% { opacity: 0; transform: translateX(-50%) translateY(-6px); }
    55% { opacity: 0; transform: translateX(-50%) translateY(6px); }
    100% { opacity: 1; transform: translateX(-50%) translateY(0); }
  }

  @keyframes tg-benefit-in {
    from { opacity: 0; transform: translateX(-50%) translateY(10px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
  }

  @keyframes tg-trail-in {
    from { opacity: 0; transform: translateX(-50%) translateY(10px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
  }

  @keyframes tg-next-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @media (prefers-reduced-motion: reduce) {
    #tg-expanding-capacity-mobile *,
    #tg-expanding-capacity-mobile *::before,
    #tg-expanding-capacity-mobile *::after {
      animation-duration: .01ms !important;
      animation-delay: 0ms !important;
      transition-duration: .01ms !important;
    }
  }

/* Approved prototype: monthly-podium-continuity-mobile.html */
#tg-monthly-podium-mobile {
    display: flex;
    justify-content: center;
    width: 100%;
    color: var(--foreground);
  }

  #tg-monthly-podium-mobile .tg-mobile-canvas {
    width: min(100%, 390px);
    min-width: 0;
  }

  #tg-monthly-podium-mobile .tg-month-story {
    --tg-motion: cubic-bezier(.22, .78, .22, 1);
    display: grid;
    gap: 16px;
    width: 100%;
  }

  #tg-monthly-podium-mobile .tg-topline,
  #tg-monthly-podium-mobile .tg-progress,
  #tg-monthly-podium-mobile .tg-actions,
  #tg-monthly-podium-mobile .tg-ready,
  #tg-monthly-podium-mobile .tg-month-labels {
    display: flex;
    align-items: center;
  }

  #tg-monthly-podium-mobile .tg-topline {
    justify-content: space-between;
    gap: 16px;
  }

  #tg-monthly-podium-mobile .tg-progress {
    gap: 7px;
  }

  #tg-monthly-podium-mobile .tg-progress-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--border);
  }

  #tg-monthly-podium-mobile .tg-progress-dot.is-current {
    width: 24px;
    background: var(--viz-series-1);
  }

  #tg-monthly-podium-mobile .tg-copy {
    display: grid;
    justify-items: center;
    gap: 10px;
    text-align: center;
  }

  #tg-monthly-podium-mobile .tg-copy h2 {
    margin: 0;
    max-width: 340px;
    text-wrap: balance;
  }

  #tg-monthly-podium-mobile .tg-month-stage {
    position: relative;
    min-height: 500px;
    isolation: isolate;
  }

  #tg-monthly-podium-mobile .tg-month-stage::before {
    content: "";
    position: absolute;
    inset: 5% 4% 31%;
    z-index: -1;
    border-radius: 999px;
    background: radial-gradient(circle, color-mix(in srgb, var(--viz-series-1) 17%, transparent), transparent 72%);
  }

  #tg-monthly-podium-mobile .tg-month-canvas {
    display: block;
    width: 100%;
    height: 350px;
    overflow: visible;
  }

  #tg-monthly-podium-mobile .tg-shape-library {
    opacity: 0;
    pointer-events: none;
  }

  #tg-monthly-podium-mobile .tg-living-line {
    fill: none;
    stroke: var(--viz-series-1);
    stroke-width: 6;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 9px 12px color-mix(in srgb, var(--viz-series-1) 28%, transparent));
  }

  #tg-monthly-podium-mobile .tg-rank-marker {
    fill: var(--primary);
    stroke: var(--primary-foreground);
    stroke-width: 2;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
  }

  #tg-monthly-podium-mobile .tg-rank-number {
    fill: var(--primary-foreground);
    opacity: 0;
  }

  #tg-monthly-podium-mobile .tg-rank-marker.is-visible,
  #tg-monthly-podium-mobile .tg-rank-number.is-visible {
    animation: tg-rank-in .48s var(--tg-motion) both;
  }

  #tg-monthly-podium-mobile .tg-carry-points circle {
    fill: var(--primary-foreground);
    stroke: var(--viz-series-1);
    stroke-width: 4;
    opacity: 0;
    vector-effect: non-scaling-stroke;
  }

  #tg-monthly-podium-mobile .tg-stage-copy {
    position: absolute;
    left: 50%;
    bottom: 45px;
    display: grid;
    justify-items: center;
    gap: 4px;
    width: min(94%, 360px);
    min-height: 52px;
    transform: translateX(-50%);
    text-align: center;
  }

  #tg-monthly-podium-mobile .tg-stage-copy span,
  #tg-monthly-podium-mobile .tg-month-labels,
  #tg-monthly-podium-mobile .tg-ready {
    color: var(--muted-foreground);
  }

  #tg-monthly-podium-mobile .tg-stage-copy.is-changing {
    animation: tg-copy-change .52s var(--tg-motion) both;
  }

  #tg-monthly-podium-mobile .tg-month-labels {
    position: absolute;
    left: 50%;
    bottom: 18px;
    justify-content: space-between;
    width: min(86%, 325px);
    transform: translateX(-50%);
    opacity: 0;
  }

  #tg-monthly-podium-mobile .tg-month-labels.is-visible {
    animation: tg-months-in .5s var(--tg-motion) both;
  }

  #tg-monthly-podium-mobile .tg-actions {
    justify-content: center;
    gap: 10px;
  }

  #tg-monthly-podium-mobile .tg-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  #tg-monthly-podium-mobile .tg-ready {
    justify-content: center;
    gap: 10px;
    text-align: center;
  }

  #tg-monthly-podium-mobile .tg-ready.is-visible {
    animation: tg-ready-in .42s var(--tg-motion) both;
  }

  @keyframes tg-rank-in {
    from { opacity: 0; transform: scale(.4); }
    to { opacity: 1; transform: scale(1); }
  }

  @keyframes tg-copy-change {
    0% { opacity: 1; transform: translateX(-50%) translateY(0); }
    45% { opacity: 0; transform: translateX(-50%) translateY(-6px); }
    55% { opacity: 0; transform: translateX(-50%) translateY(6px); }
    100% { opacity: 1; transform: translateX(-50%) translateY(0); }
  }

  @keyframes tg-months-in {
    from { opacity: 0; transform: translate(-50%, 8px); }
    to { opacity: 1; transform: translate(-50%, 0); }
  }

  @keyframes tg-ready-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @media (prefers-reduced-motion: reduce) {
    #tg-monthly-podium-mobile *,
    #tg-monthly-podium-mobile *::before,
    #tg-monthly-podium-mobile *::after {
      animation-duration: .01ms !important;
      animation-delay: 0ms !important;
      transition-duration: .01ms !important;
    }
  }