/*
 * tugger-motion theme: public pages.
 *
 * Loaded on public pages only (PageAudienceFilter), after the old style-6.x stylesheet, which public pages
 * still need until each one is redesigned. This file moves the shared legacy pieces towards the new brand
 * without touching page layout:
 *
 * - Buttons (a.button and its variants): new colours, pill shape and the hover highlight.
 * - Headings: the design's weight and letter spacing, but not their colour or size.
 *
 * Deliberately NOT restyled here: text colours set on bare elements (body, div, p) and .section backgrounds.
 * The old stylesheet sets white text and coloured backgrounds on dark sections with class rules, and any rule
 * here strong enough to recolour every page would also beat those. They change with each page's redesign.
 *
 * :where(.tm-public) adds no specificity, so these rules only beat the old bare-element and base-class rules
 * (by loading later) and never a page's own, more specific rule.
 */

/* ---------- full-theme pages ----------
   A redesigned page (ViewBag.TuggerMotionPage = true, body class tm-full) has no style-6.x underneath, so it
   gets its base type and colours here. These rules apply to tm-full pages only, and the element resets use
   :where() so they have no specificity: any component rule (e.g. a heading's or paragraph's margin) wins. */

body.tm-full {
    margin: 0;
    background: radial-gradient(1300px 900px at 88% -200px, var(--tm-surface-page-glow) 0%, var(--tm-transparent) 60%), var(--tm-surface-page);
    color: var(--tm-text);
    font-family: var(--tm-font-display);
    font-size: 17.5px;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
}

:where(.tm-full) *,
:where(.tm-full) *::before,
:where(.tm-full) *::after {
    box-sizing: border-box;
}

:where(.tm-full) h1,
:where(.tm-full) h2,
:where(.tm-full) h3,
:where(.tm-full) h4 {
    margin: 0;
    color: var(--tm-text-strong);
}

:where(.tm-full) p {
    margin: 0;
}

:where(.tm-full) img {
    max-width: 100%;
}

/* Plain text links in the page body. :where() keeps this weaker than the header, footer and button rules,
   and buttons (tm-btn) are excluded outright. */
:where(.tm-full .body-content) a:not(.tm-btn):link,
:where(.tm-full .body-content) a:not(.tm-btn):visited {
    color: var(--tm-accent-strong);
    text-decoration: none;
}

:where(.tm-full .body-content) a:not(.tm-btn):hover {
    text-decoration: underline;
}

/* ---------- rotating ring ----------
   The angle a rotating conic ring turns through: the hero chat, latest-story and final call-to-action rings
   (components.css) and the plan cards below. Registered here because the plan cards also show on pages not
   yet redesigned, which don't load components.css. */

@property --tm-ring-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes tm-ring-spin {
    to { --tm-ring-angle: 360deg; }
}

/* ---------- pricing plan cards (_PlanCards, plans.js) ----------
   A shared component: the Pricing page and the connector pages. Here rather than in components.css
   because connector pages are not redesigned yet, so every property the old stylesheet might set on bare
   elements (h3, ul, li, p, button) is set explicitly. A row of four cards on wide screens, a scroll-snap
   carousel with arrows below 1000px. Each card has its own colour; one card at a time glows (the hovered
   one, else the one the carousel has centred, else the featured plan). */

.tm-plans {
    font-family: var(--tm-font-display);
    color: var(--tm-text);
    text-align: left;
}

.tm-plans-toggle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin: 0 0 14px;
}

/* shown by plans.js; without script the page shows the monthly prices only */
.tm-plans-toggle[hidden] {
    display: none;
}

.tm-plans-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--tm-font-mono);
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tm-text-muted);
    cursor: pointer;
    transition: color .15s;
}

.tm-plans-label.is-on {
    font-weight: 600;
    color: var(--tm-text-strong);
}

.tm-plans-save {
    padding: 4px 12px;
    border: 1px solid var(--tm-accent-chip-border);
    border-radius: 999px;
    background: var(--tm-accent-faint-glow);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--tm-accent-strong);
    transition: transform .2s ease, box-shadow .2s ease;
}

.tm-plans-label.is-on .tm-plans-save {
    transform: scale(1.06);
    box-shadow: 0 0 16px var(--tm-accent-btn-glow);
}

.tm-plans-switch {
    position: relative;
    flex: none;
    width: 58px;
    height: 30px;
    margin: 0;
    padding: 0;
    border: 1.5px solid var(--tm-border);
    border-radius: 999px;
    background: var(--tm-surface-raised);
    cursor: pointer;
    transition: border-color .15s;
}

.tm-plans-switch:hover,
.tm-plans-switch:focus-visible {
    border-color: var(--tm-accent);
}

.tm-plans-switch:focus-visible {
    outline: 2px solid var(--tm-accent);
    outline-offset: 3px;
}

.tm-plans-knob {
    position: absolute;
    top: 3px;
    left: 4px;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--tm-accent-btn-top), var(--tm-accent-btn-bottom));
    box-shadow: 0 0 10px var(--tm-accent-btn-glow);
    transition: transform .22s cubic-bezier(.34, 1.4, .5, 1);
}

.tm-plans-switch[aria-checked="true"] .tm-plans-knob {
    transform: translateX(26px);
}

.tm-plans-wrap {
    position: relative;
}

.tm-plans-track {
    display: flex;
    gap: 18px;
    margin: 0;
    padding: 36px 42px 32px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 42px;
    scrollbar-width: none;
}

.tm-plans-track::-webkit-scrollbar {
    display: none;
}

.tm-plans-track:focus-visible {
    outline: 2px solid var(--tm-accent);
    outline-offset: 4px;
    border-radius: 8px;
}

.tm-plan-shell {
    --tm-plan-deep: var(--tm-plan2-deep);
    --tm-plan-mid: var(--tm-plan2-mid);
    --tm-plan-bright: var(--tm-plan2-bright);
    --tm-plan-frame: var(--tm-plan2-frame);
    --tm-plan-wash: var(--tm-plan2-wash);
    --tm-plan-edge: var(--tm-plan2-edge);
    --tm-plan-base: var(--tm-plan2-base);
    --tm-plan-glow-op: 0.85;
    position: relative;
    display: flex;
    flex: 0 0 calc((100% - 36px) / 3);
    scroll-snap-align: start;
}

.tm-plan-shell:nth-child(1) {
    --tm-plan-deep: var(--tm-plan1-deep);
    --tm-plan-mid: var(--tm-plan1-mid);
    --tm-plan-bright: var(--tm-plan1-bright);
    --tm-plan-frame: var(--tm-plan1-frame);
    --tm-plan-wash: var(--tm-plan1-wash);
    --tm-plan-edge: var(--tm-plan1-edge);
    --tm-plan-base: var(--tm-plan1-base);
}

.tm-plan-shell:nth-child(3) {
    --tm-plan-deep: var(--tm-plan3-deep);
    --tm-plan-mid: var(--tm-plan3-mid);
    --tm-plan-bright: var(--tm-plan3-bright);
    --tm-plan-frame: var(--tm-plan3-frame);
    --tm-plan-wash: var(--tm-plan3-wash);
    --tm-plan-edge: var(--tm-plan3-edge);
    --tm-plan-base: var(--tm-plan3-base);
    --tm-plan-glow-op: 1;
}

.tm-plan-shell.tm-plan-shell-enterprise {
    --tm-plan-deep: var(--tm-plan4-deep);
    --tm-plan-mid: var(--tm-plan4-mid);
    --tm-plan-bright: var(--tm-plan4-bright);
    --tm-plan-frame: var(--tm-plan4-frame);
    --tm-plan-wash: var(--tm-plan4-wash);
    --tm-plan-edge: var(--tm-plan4-edge);
    --tm-plan-base: var(--tm-plan4-base);
    --tm-plan-glow-op: 1;
}

/* the rotating glow behind the card, and the lit border over the resting one; both fade in on the live card */
.tm-plan-glow {
    position: absolute;
    z-index: 0;
    inset: -7px;
    border-radius: 26px;
    pointer-events: none;
    opacity: 0;
    filter: blur(13px);
    background: conic-gradient(from var(--tm-ring-angle), var(--tm-plan-base) 0deg 150deg, var(--tm-plan-deep) 196deg, var(--tm-plan-mid) 228deg, var(--tm-plan-bright) 252deg, var(--tm-plan-mid) 278deg, var(--tm-plan-deep) 310deg, var(--tm-plan-base) 352deg 360deg);
    transition: opacity .35s ease;
    animation: tm-ring-spin 9s linear infinite;
}

.tm-plan-frame {
    position: relative;
    display: flex;
    flex: 1;
    padding: 2px;
    border-radius: 20px;
    background: linear-gradient(165deg, var(--tm-plan-edge), var(--tm-plan-rest-mid) 45%, var(--tm-plan-rest-end));
}

.tm-plan-frame::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    background: conic-gradient(from var(--tm-ring-angle), var(--tm-plan-rest) 0deg 118deg, var(--tm-plan-frame) 172deg, var(--tm-plan-mid) 212deg, var(--tm-plan-bright) 248deg, var(--tm-plan-mid) 288deg, var(--tm-plan-frame) 322deg, var(--tm-plan-rest) 356deg);
    transition: opacity .35s ease;
    animation: tm-ring-spin 9s linear infinite;
}

.tm-plan-shell-featured .tm-plan-glow,
.tm-plan-shell.is-centered .tm-plan-glow {
    opacity: var(--tm-plan-glow-op);
}

.tm-plan-shell-featured .tm-plan-frame::after,
.tm-plan-shell.is-centered .tm-plan-frame::after {
    opacity: 1;
}

.tm-plans-track:has(.is-centered) .tm-plan-shell:not(.is-centered) .tm-plan-glow,
.tm-plans-track:has(.is-centered) .tm-plan-shell:not(.is-centered) .tm-plan-frame::after,
.tm-plans-track:has(.tm-plan-shell:hover) .tm-plan-shell:not(:hover) .tm-plan-glow,
.tm-plans-track:has(.tm-plan-shell:hover) .tm-plan-shell:not(:hover) .tm-plan-frame::after {
    opacity: 0;
}

.tm-plans-track:has(.tm-plan-shell:hover) .tm-plan-shell:hover .tm-plan-glow {
    opacity: var(--tm-plan-glow-op);
}

.tm-plans-track:has(.tm-plan-shell:hover) .tm-plan-shell:hover .tm-plan-frame::after {
    opacity: 1;
}

.tm-plan {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
    padding: 64px 32px 46px;
    border-radius: 18px;
    background: radial-gradient(520px 300px at 50% -20%, var(--tm-plan-wash), var(--tm-transparent) 65%), linear-gradient(165deg, var(--tm-surface-raised), var(--tm-plan-card-end));
    text-align: center;
}

.tm-plan > * {
    position: relative;
    z-index: 2;
}

.tm-plans .tm-plan h3 {
    margin: 0;
    font-family: var(--tm-font-display);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--tm-text-strong);
}

.tm-plan-pop {
    position: absolute;
    z-index: 3;
    top: 22px;
    right: 22px;
    padding: 5px 14px;
    border: 1px solid var(--tm-cta-tint-border);
    border-radius: 999px;
    background: var(--tm-cta-tint);
    font-family: var(--tm-font-mono);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tm-cta-strong);
}

.tm-plan-price {
    margin-top: 14px;
}

.tm-plan-amt {
    display: block;
    font-size: clamp(42px, 4.6vw, 56px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--tm-text-strong);
}

.tm-plan-per {
    display: block;
    margin-top: 8px;
    font-family: var(--tm-font-mono);
    font-size: 12.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tm-text-muted);
}

.tm-plans .tm-plan-works {
    margin: 10px 0 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--tm-accent-strong);
}

/* monthly prices by default; plans.js switches the whole block to annual */
.tm-plan-annual,
.tm-plans[data-billing="annual"] .tm-plan-monthly {
    display: none;
}

.tm-plans[data-billing="annual"] .tm-plan-annual {
    display: block;
}

.tm-plan-bump .tm-plan-price,
.tm-plan-bump .tm-plan-works {
    animation: tm-plan-price-in .34s cubic-bezier(.22, .61, .36, 1);
}

@keyframes tm-plan-price-in {
    from {
        opacity: 0;
        transform: translateY(9px) scale(.97);
    }
}

.tm-plans .tm-plan ul {
    flex: 1;
    margin: 26px 0 30px;
    padding: 0;
    list-style: none;
    text-align: left;
}

.tm-plans .tm-plan li {
    position: relative;
    margin: 0;
    padding: 9px 0 9px 28px;
    border-bottom: 1px dashed var(--tm-plan-rest-mid);
    background: none;
    font-size: 15px;
    line-height: 1.5;
    color: var(--tm-text);
}

.tm-plans .tm-plan li:last-child {
    border-bottom: none;
}

.tm-plans .tm-plan li::before {
    content: "";
    position: absolute;
    top: 16px;
    left: 2px;
    width: 12px;
    height: 7px;
    border-bottom: 2.6px solid var(--tm-accent);
    border-left: 2.6px solid var(--tm-accent);
    border-radius: 1px;
    background: none;
    transform: rotate(-45deg);
}

.tm-plan .tm-btn {
    align-self: center;
}

/* Enterprise: a filled card like the others, in its own colour, with its short copy centred */
.tm-plan.tm-plan-enterprise {
    justify-content: center;
}

.tm-plans .tm-plan-enterprise p {
    max-width: 26ch;
    margin: 14px auto 28px;
    font-size: 17px;
    line-height: 1.6;
    color: var(--tm-text);
}

/* the arrows sit below the row: a disc over a card would clip that card's glow */
.tm-plans-nav {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-top: 26px;
}

.tm-plans-nav[hidden] {
    display: none;
}

.tm-plans-btn {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin: 0;
    padding: 0;
    border: 2px solid var(--tm-accent);
    border-radius: 50%;
    background: var(--tm-surface-raised);
    box-shadow: 0 0 18px var(--tm-accent-faint-glow);
    color: var(--tm-accent-strong);
    cursor: pointer;
    transition: background .15s, color .15s, box-shadow .15s, opacity .15s;
}

.tm-plans-btn:hover:not([disabled]),
.tm-plans-btn:focus-visible:not([disabled]) {
    background: linear-gradient(180deg, var(--tm-accent-btn-top), var(--tm-accent-btn-bottom));
    box-shadow: 0 0 26px var(--tm-accent-btn-glow);
    color: var(--tm-text-inverse);
}

.tm-plans-btn:focus-visible {
    outline: 2px solid var(--tm-accent);
    outline-offset: 3px;
}

.tm-plans-btn[disabled] {
    border-color: var(--tm-border);
    box-shadow: none;
    opacity: .45;
    cursor: default;
}

.tm-plans-btn svg {
    display: block;
}

.tm-plans-notes {
    margin-top: 40px;
}

.tm-plans .tm-plans-notes p {
    max-width: 76ch;
    margin: 0;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--tm-text-muted);
}

.tm-plans .tm-plans-notes p + p {
    margin-top: 6px;
}

@media (max-width: 900px) {
    .tm-plan-shell {
        flex-basis: calc((100% - 18px) / 2);
    }
}

@media (max-width: 620px) {
    .tm-plan-shell {
        flex-basis: 100%;
    }

    .tm-plans-track {
        padding-right: 24px;
        padding-left: 24px;
        scroll-padding: 0 24px;
    }
}

/* wide screens: all four cards in one row, no scrolling; the row bleeds into the container's gutter so the cards
   keep a usable width */
@media (min-width: 1000px) {
    .tm-plans-wrap {
        margin: 0 -42px;
    }

    .tm-plan-shell {
        flex-basis: calc((100% - 54px) / 4);
    }

    .tm-plan {
        padding-right: 24px;
        padding-left: 24px;
    }

    .tm-plan-amt {
        font-size: clamp(40px, 3.9vw, 50px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tm-plan-glow {
        display: none;
    }

    .tm-plan-frame::after {
        animation: none;
        background: var(--tm-plan-mid);
    }

    .tm-plan-bump .tm-plan-price,
    .tm-plan-bump .tm-plan-works {
        animation: none;
    }

    .tm-plans-label,
    .tm-plans-save,
    .tm-plans-knob,
    .tm-plans-btn {
        transition: none;
    }
}

/* ---------- testimonials (_Testimonial, _Testimonials) ----------
   A shared component, here rather than in components.css because it also shows on pages not yet redesigned
   (the Demo page, connector pages). Its properties are set explicitly, so the old
   stylesheet's blockquote and text rules underneath do not leak in. */

.tm-quotes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin-top: 44px;
}

.tm-quote {
    margin: 0;
    padding: 34px;
    border: 1.5px solid var(--tm-quote-border);
    border-radius: 20px;
    background: linear-gradient(165deg, var(--tm-surface-raised), var(--tm-card-wash));
    box-shadow: 0 1px 2px var(--tm-card-shadow);
    font-family: var(--tm-font-display);
    text-align: left;
}

.tm-quote blockquote {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: -0.005em;
    color: var(--tm-text-strong);
    quotes: none;
}

.tm-quote blockquote::before {
    content: "\201C";
    margin-right: 8px;
    font-size: 64px;
    font-weight: 700;
    line-height: 0;
    vertical-align: -24px;
    color: var(--tm-cta);
}

.tm-quote blockquote::after {
    content: none;
}

.tm-quote figcaption {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    font-family: var(--tm-font-mono);
    font-size: 12.5px;
    line-height: 1.8;
    letter-spacing: 0.08em;
    color: var(--tm-text-muted);
}

.tm-quote figcaption strong {
    font-family: var(--tm-font-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--tm-accent-strong);
}

.tm-quote-image {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

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

/* three across in one row (_Testimonials with ViewData "QuoteColumns" = 3: Sign In, Forgotten password); one
   column below 1000px, where three would be too narrow */
.tm-quotes.tm-quotes-three {
    grid-template-columns: repeat(3, 1fr);
}

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

@media (max-width: 640px) {
    .tm-quote {
        padding: 26px 22px;
    }
}

/* ---------- headings ---------- */

:where(.tm-public) h1,
:where(.tm-public) h2 {
    font-weight: 700;
    letter-spacing: -0.018em;
}

:where(.tm-public) h3 {
    letter-spacing: -0.01em;
}

/* ---------- buttons ---------- */

/* The old a.button colours are all !important, so these have to be too. Only background-color is set (no
   gradient image), so the page-specific overrides that set background-color still show through. */
:where(.tm-public) a.button,
:where(.tm-public) a.button:link,
:where(.tm-public) a.button:visited {
    position: relative;
    overflow: hidden;
    background-color: var(--tm-cta) !important;
    color: var(--tm-text-strong);
    border-radius: 999px;
    font-weight: 700;
    box-shadow: 0 0 30px var(--tm-cta-glow);
    transition: filter .15s, background-color .15s;
}

:where(.tm-public) a.button:hover {
    background-color: var(--tm-cta) !important;
    color: var(--tm-text-strong);
    filter: brightness(1.08);
}

/* variants on dark or coloured backgrounds that never set their own text colour keep white text */
:where(.tm-public) a.button.alt-button,
:where(.tm-public) a.button.alt-button:link,
:where(.tm-public) a.button.alt-button:visited,
:where(.tm-public) a.button.alt-button:hover,
:where(.tm-public) a.button.cancel-button,
:where(.tm-public) a.button.cancel-button:link,
:where(.tm-public) a.button.cancel-button:visited,
:where(.tm-public) a.button.delete-button,
:where(.tm-public) a.button.delete-button:link,
:where(.tm-public) a.button.delete-button:visited {
    color: var(--tm-text-inverse);
    box-shadow: none;
}

/* the old "alt" (dark grey) button becomes the design's secondary: blue outline */
:where(.tm-public) a.button.alt-button,
:where(.tm-public) a.button.alt-button:link,
:where(.tm-public) a.button.alt-button:visited {
    background-color: transparent !important;
    color: var(--tm-accent-strong);
    border: 1.5px solid var(--tm-accent);
}

:where(.tm-public) a.button.alt-button:hover {
    background-color: var(--tm-menu-hover) !important;
    color: var(--tm-accent-strong);
}

/* the other coloured variants keep their own colours; they only lose the orange glow */
:where(.tm-public) a.button.alt-button-2,
:where(.tm-public) a.button.button-yellow,
:where(.tm-public) a.button.button-dark,
:where(.tm-public) a.button.button-blue,
:where(.tm-public) a.button.button-outline-dark,
:where(.tm-public) a.button.button-outline-light,
:where(.tm-public) a.button.mobile-button {
    box-shadow: none;
}

/* hover highlight from the design, on every a.button */
:where(.tm-public) a.button::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);
}

:where(.tm-public) a.button:hover::after {
    animation: tm-btn-sheen .75s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    :where(.tm-public) a.button,
    :where(.tm-public) a.button::after {
        transition: none !important;
        animation: none !important;
    }
}