/* One button definition for the whole site.
   Geometry is identical everywhere — padding, radius, weight, size, shadow — and only the colour
   changes, because the colour is what carries the meaning:
     green  = try it free
     red    = pay
     blue   = open a guide
     outline = the secondary language of the same guide
   Linked last on each page so it wins over buyaudio.css, which carries its own older copy of
   .audio-banner-cta-demo from the page it was copied from. */

.audio-banner-cta-demo,
.sg-buy-cta,
.sg-cta,
.sg-tram-btn,
.tg-cta {
    display: inline-block;
    padding: 12px 26px;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    color: #fff !important;
    margin: 4px 8px 4px 0;
    box-shadow: 0 2px 8px rgba(16, 35, 58, 0.22);
    transition: background .18s, transform .15s;
    animation: none;
}

.audio-banner-cta-demo { background: #16a34a; }
.audio-banner-cta-demo:hover { background: #15803d; transform: translateY(-1px); }

.sg-buy-cta, .sg-tram-btn { background: #e2231a; }
.sg-buy-cta:hover, .sg-tram-btn:hover { background: #c31d14; transform: translateY(-1px); }

.sg-cta { background: #004890; }
.sg-cta:hover { background: #0a5cb0; transform: translateY(-1px); }

/* Outline variant. The ring is an inset shadow, not a border, so the box stays exactly the same
   size as a filled button — a 2px border made it 4px wider and that is what looked mismatched. */
.sg-cta.alt {
    background: #fff;
    color: #004890 !important;
    box-shadow: inset 0 0 0 2px #004890, 0 2px 8px rgba(16, 35, 58, 0.14);
}
.sg-cta.alt:hover { background: #eaf1fb; transform: translateY(-1px); }

/* Technology page: the same three roles, so a visitor moving between pages sees one button. */
.tg-cta { background: #e2231a; }
.tg-cta:hover { background: #c31d14; transform: translateY(-1px); }
.tg-cta.tg-doc { background: #16a34a; }
.tg-cta.tg-doc:hover { background: #15803d; }
.tg-cta.tg-alt { background: #004890; }
.tg-cta.tg-alt:hover { background: #0a5cb0; }