/*
 * tugger-motion theme: site chrome (header, menus, footer).
 *
 * Loaded on every page, public and portal, so the header and footer look the same everywhere.
 * Colours come from tokens.css only.
 *
 * The old style-6.x stylesheet still loads on every page and styles bare elements (nav, footer, a:link, div, p), so
 * rules here that must win against it are written with enough specificity (a.tm-btn:link,
 * .tm-footer a:link, ...) rather than relying on load order.
 */

/* ---------- shared ---------- */

.tm-wrap {
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 32px;
    box-sizing: border-box;
}

.tm-header *,
.tm-footer * {
    box-sizing: border-box;
}

a.tm-btn,
a.tm-btn:link,
a.tm-btn:visited,
a.tm-btn:hover,
button.tm-btn {
    display: inline-block;
    font-family: var(--tm-font-display);
    font-weight: 700;
    font-size: 16.5px;
    line-height: 1.62; /* matches the design, where buttons take the body line height */
    padding: 15px 32px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: filter .15s, background .15s;
}

/* the :link/:visited/:hover forms match the base rule's specificity, so the small size wins on links too */
a.tm-btn-small,
a.tm-btn-small:link,
a.tm-btn-small:visited,
a.tm-btn-small:hover,
button.tm-btn-small {
    padding: 11px 24px;
    font-size: 15px;
}

a.tm-btn-primary,
a.tm-btn-primary:link,
a.tm-btn-primary:visited,
a.tm-btn-primary:hover,
button.tm-btn-primary {
    background: linear-gradient(180deg, var(--tm-cta-gradient-top), var(--tm-cta-gradient-bottom));
    color: var(--tm-text-strong);
    box-shadow: 0 0 30px var(--tm-cta-glow);
}

a.tm-btn-primary:hover,
button.tm-btn-primary:hover,
a.tm-btn-accent:hover,
button.tm-btn-accent:hover {
    filter: brightness(1.08);
}

/* hover: a highlight sweeps across the button (from the design); the blue accent button shares it */
.tm-btn-primary,
.tm-btn-accent {
    position: relative;
    overflow: hidden;
}

.tm-btn-primary::after,
.tm-btn-accent::after {
    content: "";
    position: absolute;
    top: 0;
    left: -70%;
    width: 42%;
    height: 100%;
    pointer-events: none;
    transform: skewX(-18deg);
    background: linear-gradient(100deg, transparent, var(--tm-cta-sheen), transparent);
}

.tm-btn-primary:hover::after,
.tm-btn-accent:hover::after {
    animation: tm-btn-sheen .75s ease-out;
}

@keyframes tm-btn-sheen {
    from { left: -70%; }
    to { left: 125%; }
}

/* busy: shown while a button's request is in flight (e.g. newsletter Subscribe) */
button.tm-btn[aria-busy="true"] {
    cursor: progress;
    filter: none;
}

button.tm-btn[aria-busy="true"]::after {
    display: none;
}

.tm-btn-spinner {
    display: none;
    width: 14px;
    height: 14px;
    margin-right: 8px;
    vertical-align: -2px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: tm-spin .7s linear infinite;
}

button.tm-btn[aria-busy="true"] .tm-btn-spinner {
    display: inline-block;
}

@keyframes tm-spin {
    to { transform: rotate(360deg); }
}

a.tm-btn-outline,
a.tm-btn-outline:link,
a.tm-btn-outline:visited,
a.tm-btn-outline:hover {
    background: transparent;
    color: var(--tm-accent);
    border: 1.5px solid var(--tm-accent);
}

a.tm-btn-outline:hover {
    background: var(--tm-menu-hover);
}

/* blue primary: a main action inside a block that is already the page's focus (the pricing box) */
a.tm-btn-accent,
a.tm-btn-accent:link,
a.tm-btn-accent:visited,
a.tm-btn-accent:hover,
button.tm-btn-accent {
    background: linear-gradient(180deg, var(--tm-accent-btn-top), var(--tm-accent-btn-bottom));
    color: var(--tm-text-inverse);
    box-shadow: 0 0 30px var(--tm-accent-btn-glow);
}

a.tm-btn-accent:hover,
button.tm-btn-accent:hover {
    box-shadow: 0 0 42px var(--tm-accent-btn-glow-strong);
}

/* orange outline: a secondary call to action that sits apart from the blue links around it */
a.tm-btn-outline-cta,
a.tm-btn-outline-cta:link,
a.tm-btn-outline-cta:visited,
a.tm-btn-outline-cta:hover {
    background: transparent;
    color: var(--tm-cta-strong);
    border: 1.5px solid var(--tm-cta);
}

a.tm-btn-outline-cta:hover {
    background: var(--tm-cta-tint);
}

/* ---------- header ---------- */

.tm-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--tm-surface-header);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--tm-divider);
    font-family: var(--tm-font-display);
}

.tm-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 74px;
}

.tm-logo {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.tm-logo img {
    display: block;
    height: 42px;
    width: auto;
}

/* the old stylesheet styles every <nav>; reset it for ours */
.tm-nav {
    position: static;
    width: auto;
    background: none;
    box-shadow: none;
    z-index: auto;
    align-self: stretch;
    display: flex;
}

.tm-nav-links {
    display: flex;
    align-items: stretch;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.tm-nav-item {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.tm-nav-links > .tm-nav-item > a,
.tm-nav-links > .tm-nav-item > a:link,
.tm-nav-links > .tm-nav-item > a:visited,
.tm-nav-trigger {
    /* links and dropdown buttons share one box, so their labels sit on the same baseline (#2625) */
    display: inline-flex;
    align-items: center;
    line-height: normal;
    font-family: var(--tm-font-display);
    font-size: 15.5px;
    font-weight: 500;
    color: var(--tm-text);
    text-decoration: none;
    white-space: nowrap;
    transition: color .18s;
}

.tm-nav-links > .tm-nav-item > a:hover {
    color: var(--tm-text-strong);
    text-decoration: none;
}

.tm-nav-trigger {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.tm-chev {
    width: 11px;
    height: 11px;
    opacity: .75;
    transition: transform .22s ease, color .18s;
}

.tm-nav-item:hover .tm-nav-trigger,
.tm-nav-item.tm-open .tm-nav-trigger,
.tm-nav-trigger:focus-visible {
    color: var(--tm-text-strong);
}

.tm-nav-item:hover .tm-chev,
.tm-nav-item.tm-open .tm-chev {
    transform: rotate(180deg);
    color: var(--tm-accent);
    opacity: 1;
}

/* ---------- dropdowns ---------- */

/* Measured from the middle of the menu item (whose box is the full header height) so the panel opens just
   under the menu text, not under the header. The top padding only spaces the panel down: it ignores the
   pointer, since it is as wide as the panel and would otherwise sit over the neighbouring links' text and
   make them hard to hover and click. No bridge is needed, as the panel starts inside the menu item's own
   box, so the pointer never leaves the item on its way down. Only the visible panel takes the pointer. */
.tm-dd {
    position: absolute;
    top: 50%;
    padding-top: 22px;
    z-index: 110;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

.tm-dd-left {
    left: -18px;
}

.tm-dd-right {
    right: -18px;
}

.tm-nav-item:hover .tm-dd,
.tm-nav-item:focus-within .tm-dd,
.tm-nav-item.tm-open .tm-dd {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.tm-nav-item:hover .tm-dd-panel,
.tm-nav-item:focus-within .tm-dd-panel,
.tm-nav-item.tm-open .tm-dd-panel {
    pointer-events: auto;
}

.tm-dd-panel {
    display: grid;
    gap: 2px 10px;
    list-style: none;
    margin: 0;
    padding: 14px;
    background: var(--tm-surface-menu);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid var(--tm-menu-border);
    border-radius: 20px;
    box-shadow: 0 26px 70px var(--tm-shadow);
}

.tm-dd-panel li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tm-dd-cols-1 {
    grid-auto-flow: row;
    grid-template-columns: minmax(max-content, 1fr);
}

.tm-dd-cols-2 {
    grid-auto-flow: column;
    grid-template-columns: repeat(2, minmax(max-content, 1fr));
}

.tm-dd-rows-2 { grid-template-rows: repeat(2, auto); }
.tm-dd-rows-3 { grid-template-rows: repeat(3, auto); }
.tm-dd-rows-4 { grid-template-rows: repeat(4, auto); }
.tm-dd-rows-5 { grid-template-rows: repeat(5, auto); }

.tm-dd-panel a,
.tm-dd-panel a:link,
.tm-dd-panel a:visited {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 16px;
    border-radius: 13px;
    font-size: 15.5px;
    font-weight: 500;
    color: var(--tm-text);
    text-decoration: none;
    white-space: nowrap;
    transition: background .18s, color .18s;
}

.tm-dd-panel a:hover {
    background: var(--tm-menu-hover);
    color: var(--tm-text-strong);
    text-decoration: none;
}

.tm-dd-ico {
    display: flex;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    color: var(--tm-accent);
}

.tm-dd-ico svg {
    display: block;
    width: 22px;
    height: 22px;
}

/* line icons redraw themselves on hover */
.tm-dd-ico svg * {
    stroke-dasharray: 1 1;
    stroke-dashoffset: 0;
}

.tm-dd-panel a:hover .tm-dd-ico svg * {
    animation: tm-dd-draw .6s cubic-bezier(.4, 0, .2, 1) both;
}

@keyframes tm-dd-draw {
    from { stroke-dashoffset: 1; }
    to { stroke-dashoffset: 0; }
}

/* ---------- header right-hand side ---------- */

.tm-nav-cta {
    display: flex;
    align-items: center;
    gap: 13px;
    flex: 0 0 auto;
}

a.tm-signin,
a.tm-signin:link,
a.tm-signin:visited {
    color: var(--tm-text);
    font-size: 15.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

a.tm-demo-link,
a.tm-demo-link:link,
a.tm-demo-link:visited {
    color: var(--tm-accent);
    font-size: 15.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

a.tm-signin:hover,
a.tm-demo-link:hover {
    color: var(--tm-text-strong);
    text-decoration: none;
}

.tm-account {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    font-size: 13px;
    color: var(--tm-text-muted);
    white-space: nowrap;
}

.tm-account .tm-account-hi {
    color: var(--tm-text-strong);
    font-weight: 600;
    font-size: 14px;
}

.tm-account strong {
    color: var(--tm-text);
}

.tm-nav-toggle {
    display: none;
    position: relative;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--tm-border);
    border-radius: 12px;
    background: var(--tm-surface-raised);
    cursor: pointer;
}

.tm-nav-toggle span,
.tm-nav-toggle span::before,
.tm-nav-toggle span::after {
    position: absolute;
    left: 50%;
    width: 18px;
    height: 2px;
    margin-left: -9px;
    background: var(--tm-text-strong);
    border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
}

.tm-nav-toggle span {
    top: 50%;
    margin-top: -1px;
}

.tm-nav-toggle span::before,
.tm-nav-toggle span::after {
    content: "";
    left: 0;
    margin-left: 0;
}

.tm-nav-toggle span::before {
    top: -6px;
}

.tm-nav-toggle span::after {
    top: 6px;
}

.tm-nav-toggle[aria-expanded="true"] span {
    background: transparent;
}

.tm-nav-toggle[aria-expanded="true"] span::before {
    transform: translateY(6px) rotate(45deg);
}

.tm-nav-toggle[aria-expanded="true"] span::after {
    transform: translateY(-6px) rotate(-45deg);
}

/* ---------- mobile menu ---------- */

.tm-mobile-menu {
    border-top: 1px solid var(--tm-divider);
    background: var(--tm-surface-raised);
    padding: 12px 32px 28px;
    max-height: calc(100vh - 74px);
    overflow-y: auto;
}

.tm-mobile-menu[hidden] {
    display: none;
}

.tm-mobile-links,
.tm-mobile-links ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tm-mobile-links li {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--tm-border);
}

.tm-mobile-links ul li {
    border-bottom: none;
}

.tm-mobile-links a,
.tm-mobile-links a:link,
.tm-mobile-links a:visited,
.tm-mobile-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 0;
    font-family: var(--tm-font-display);
    font-size: 17px;
    font-weight: 600;
    color: var(--tm-text-strong);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
}

.tm-mobile-links ul a,
.tm-mobile-links ul a:link,
.tm-mobile-links ul a:visited {
    padding: 10px 0 10px 16px;
    font-size: 16px;
    font-weight: 500;
    color: var(--tm-text);
}

.tm-mobile-group[aria-expanded="true"] .tm-chev {
    transform: rotate(180deg);
    color: var(--tm-accent);
    opacity: 1;
}

.tm-mobile-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

.tm-account-mobile {
    margin-top: 22px;
}

/* ---------- header breakpoints ---------- */

@media (max-width: 1300px) {
    .tm-nav-links {
        gap: 16px;
    }

    /* the :link and :visited forms too, or the base rule's wins for links (#2625) */
    .tm-nav-links > .tm-nav-item > a,
    .tm-nav-links > .tm-nav-item > a:link,
    .tm-nav-links > .tm-nav-item > a:visited,
    .tm-nav-trigger {
        font-size: 15px;
    }
}

@media (max-width: 1200px) {
    a.tm-demo-link {
        display: none;
    }
}

/* below this the links move into the mobile menu */
@media (max-width: 1080px) {
    .tm-nav,
    a.tm-signin {
        display: none;
    }

    .tm-nav-toggle {
        display: inline-block;
    }
}

/* the logged-in menu is longer, so it moves into the mobile menu sooner */
@media (max-width: 1360px) {
    .tm-header-account .tm-nav,
    .tm-header-account a.tm-signin {
        display: none;
    }

    .tm-header-account .tm-nav-toggle {
        display: inline-block;
    }
}

@media (max-width: 700px) {
    .tm-wrap {
        padding: 0 20px;
    }

    .tm-logo img {
        height: 32px;
    }

    .tm-mobile-menu {
        padding: 12px 20px 24px;
    }

    .tm-account:not(.tm-account-mobile),
    .tm-nav-cta #admin-link {
        display: none;
    }
}

/* Sign Up stays in the header on phones (as in the design); at the narrowest widths it and the logo shrink to fit */
@media (max-width: 420px) {
    .tm-header-inner {
        gap: 10px;
    }

    .tm-nav-cta {
        gap: 10px;
    }

    .tm-logo img {
        height: 28px;
    }

    .tm-nav-cta a.tm-btn-small {
        padding: 9px 16px;
        font-size: 14px;
    }
}

@media (max-width: 360px) {
    .tm-wrap {
        padding: 0 14px;
    }

    .tm-header-inner,
    .tm-nav-cta {
        gap: 8px;
    }

    .tm-logo img {
        height: 24px;
    }

    .tm-nav-cta a.tm-btn-small {
        padding: 8px 12px;
        font-size: 13px;
    }
}

/* ---------- webinar banner ----------
   The upcoming-webinar strip under the header (logged-out visitors), from Georgina's design
   (tugger-homepage-light-v1-motion-banner): a Tugger blue band, a white disc with a pulsing megaphone and a ring
   rippling out, the copy in white and a white Register Now pill with the sheen on hover. */

.tm-event-banner {
    position: relative;
    background: var(--tm-accent);
    font-family: var(--tm-font-display);
}

.tm-event-session {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 26px;
    max-width: 1120px;
    padding-top: 17px;
    padding-bottom: 17px;
}

/* the banner script hides all but the best-timed session with this class */
.tm-event-banner .hidden {
    display: none;
}

.tm-event-icon {
    position: relative;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--tm-surface-raised);
    box-shadow: 0 0 18px var(--tm-event-glow);
    color: var(--tm-accent-strong);
}

.tm-event-icon svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    animation: tm-event-pulse 2.4s ease-in-out infinite;
}

.tm-event-icon::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid var(--tm-event-ring);
    border-radius: 50%;
    pointer-events: none;
    animation: tm-event-ring 2.4s ease-out infinite;
}

@keyframes tm-event-pulse {
    0%, 36%, 100% {
        transform: scale(1);
    }

    18% {
        transform: scale(1.14);
    }
}

@keyframes tm-event-ring {
    0% {
        opacity: .9;
        transform: scale(1);
    }

    70%, 100% {
        opacity: 0;
        transform: scale(1.6);
    }
}

.tm-event-banner .tm-event-text {
    max-width: 56ch;
    margin: 0;
    font-size: 16px;
    line-height: 1.45;
    color: var(--tm-text-inverse);
}

.tm-event-banner .tm-event-text strong {
    display: block;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--tm-text-inverse);
}

a.tm-event-btn,
a.tm-event-btn:link,
a.tm-event-btn:visited,
a.tm-event-btn:hover {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    overflow: hidden;
    padding: 12px 30px;
    border-radius: 999px;
    background: var(--tm-surface-raised);
    box-shadow: 0 4px 18px var(--tm-event-btn-shadow);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--tm-text-brand-grey);
    text-decoration: none;
    transition: box-shadow .15s;
}

a.tm-event-btn:hover {
    box-shadow: 0 0 28px var(--tm-event-glow-strong);
}

a.tm-event-btn:focus-visible {
    outline: 2px solid var(--tm-text-brand-grey);
    outline-offset: 3px;
}

/* the sheen across the button on hover, as on the site's primary buttons */
a.tm-event-btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: -70%;
    width: 42%;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(100deg, var(--tm-transparent), var(--tm-accent-btn-glow), var(--tm-transparent));
    transform: skewX(-18deg);
}

a.tm-event-btn:hover::after {
    animation: tm-event-sheen .75s ease-out;
}

@keyframes tm-event-sheen {
    from {
        left: -70%;
    }

    to {
        left: 125%;
    }
}

@media (max-width: 760px) {
    .tm-event-session {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 12px 14px;
        padding: 14px 20px 16px;
    }

    .tm-event-icon {
        width: 40px;
        height: 40px;
    }

    .tm-event-icon svg {
        width: 26px;
        height: 26px;
    }

    .tm-event-banner .tm-event-text {
        flex: 1 1 0;
        min-width: 0;
        font-size: 15px;
    }

    a.tm-event-btn {
        width: 100%;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tm-event-icon svg,
    a.tm-event-btn:hover::after {
        animation: none;
    }

    .tm-event-icon::after,
    a.tm-event-btn::after {
        display: none;
    }
}

/* ---------- footer ---------- */

/* the old stylesheet styles every <footer> (black, large type); reset it for ours */
.tm-footer {
    background: transparent;
    margin: 0;
    padding: 64px 0 72px;
    border-top: 1px solid var(--tm-divider);
    font-family: var(--tm-font-display);
    font-size: 14.5px;
    line-height: 1.8;
}

.tm-footer .tm-wrap {
    max-width: 1120px;
}

.tm-foot-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr 0.9fr 1.2fr;
    gap: 40px;
}

.tm-footer div,
.tm-footer p,
.tm-footer li {
    color: var(--tm-text-muted);
    font-size: 14.5px;
    line-height: 1.8;
}

.tm-footer p {
    margin: 0 0 10px;
}

.tm-footer h5 {
    margin: 0 0 16px;
    padding: 0;
    font-family: var(--tm-font-mono);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tm-accent);
}

.tm-footer h5.tm-foot-follow {
    margin-top: 26px;
}

.tm-footer h5.tm-news-heading {
    color: var(--tm-text-brand-grey);
}

.tm-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tm-footer li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tm-footer a:not(.tm-btn),
.tm-footer a:not(.tm-btn):link,
.tm-footer a:not(.tm-btn):visited {
    color: var(--tm-text-muted);
    text-decoration: none;
}

.tm-footer a:not(.tm-btn):hover {
    color: var(--tm-accent);
    text-decoration: none;
}

/* the contact links use the design's default link colour, not the grey of the footer lists */
.tm-footer .tm-foot-contact a:link,
.tm-footer .tm-foot-contact a:visited {
    color: var(--tm-accent);
}

.tm-footer .tm-foot-contact a:hover {
    color: var(--tm-accent-strong);
}

.tm-foot-logo {
    display: inline-block;
    margin-bottom: 18px;
}

.tm-foot-logo img {
    display: block;
    height: 34px;
    width: auto;
}

.tm-socials {
    display: flex;
    gap: 18px;
    align-items: center;
    margin-top: 8px;
}

.tm-socials a {
    display: flex;
    align-items: center;
    justify-content: center;
}

.tm-socials svg {
    display: block;
    width: 26px;
    height: 26px;
    fill: var(--tm-accent);
    transition: fill .15s;
}

.tm-socials a:hover svg {
    fill: var(--tm-text-brand-grey);
}

.tm-news-form {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}

/* the ids are kept for the newsletter scripts (ajax-forms); the old stylesheet styles them by id, hence the ids here */
.tm-news-form input#MailingListEmailFieldFooter,
.tm-news-form input#MailingListEmail {
    flex: 1;
    min-width: 0;
    padding: 11px 18px;
    border: 1px solid var(--tm-border);
    border-radius: 999px;
    background: var(--tm-surface-raised);
    color: var(--tm-text-strong);
    font-family: var(--tm-font-display);
    font-size: 14px;
    line-height: 1.3;
}

.tm-news-form input::placeholder {
    color: var(--tm-text-muted);
}

.tm-news-form input:focus {
    outline: 2px solid var(--tm-accent);
    outline-offset: 2px;
}

.tm-news-thanks {
    display: none;
    margin-top: 8px;
    color: var(--tm-accent);
    font-weight: 700;
}

.tm-iso {
    display: block;
    width: 100px;
    height: auto;
    margin: 24px 0 0 auto;
}

.tm-foot-legal {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 48px;
    padding-top: 28px;
    border-top: 1px solid var(--tm-divider);
}

.tm-footer .tm-foot-legal p {
    font-size: 13px;
}

.tm-footer .tm-legal-links {
    margin-bottom: 14px;
}

.tm-footer .tm-legal-links a:hover {
    color: var(--tm-accent);
}

@media (max-width: 1000px) {
    .tm-foot-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    .tm-foot-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .tm-iso {
        margin-left: 0;
    }
}

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

@media (prefers-reduced-motion: reduce) {
    .tm-header *,
    .tm-footer *,
    .tm-btn-primary::after,
    .tm-btn-accent::after {
        transition: none !important;
        animation: none !important;
    }

    /* the spinner still has to say "working", so it pulses gently instead of spinning */
    .tm-footer .tm-btn-spinner {
        animation: tm-pulse 1.2s ease-in-out infinite !important;
    }
}

@keyframes tm-pulse {
    50% { opacity: .35; }
}