/*
 * tugger-motion theme: page components.
 *
 * Loaded on full-theme pages only (ViewBag.TuggerMotionPage = true), so nothing here has to compete with
 * style-6.x. Each component is a tm- block that any redesigned page can use. Colours come from tokens.css.
 */

/* in-page links (e.g. a legal page's contents list) glide to their section; only full-theme pages load this
   file, and reduced motion keeps the instant jump */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* ---------- layout ---------- */

.tm-container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 32px;
}

.tm-section {
    padding: 92px 0;
}

.tm-hl {
    color: var(--tm-accent);
}

.tm-eyebrow {
    display: inline-block;
    margin-bottom: 16px;
    font-family: var(--tm-font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--tm-accent);
}

/* ---------- hero ---------- */

.tm-hero {
    position: relative;
    overflow: hidden;
    padding: 104px 0 72px;
}

.tm-hero-grid {
    display: grid;
    grid-template-columns: 1.12fr 0.88fr;
    gap: 56px;
    align-items: center;
}

.tm-hero h1 {
    font-size: clamp(52px, 7.2vw, 94px);
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: -0.018em;
}

.tm-hero-sub {
    margin-top: 22px;
    font-size: 23px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--tm-accent-strong);
}

.tm-hero-lede {
    max-width: 52ch;
    margin-top: 18px;
    font-size: 18.5px;
}

.tm-hero-ctas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-top: 34px;
}

/* ---------- "compatible with" pills ---------- */

.tm-compat {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 26px;
}

/* the line under the AI tool pills naming them and "any MCP-compatible assistant" */
.tm-compat-note {
    margin-top: 12px;
    font-size: 14px;
    color: var(--tm-text-muted);
}

.tm-compat-label {
    font-family: var(--tm-font-mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tm-text-muted);
}

.tm-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 10px;
    border: 1px solid var(--tm-border);
    border-radius: 999px;
    background: var(--tm-surface-raised);
    font-size: 14px;
    font-weight: 600;
    color: var(--tm-text);
}

.tm-pill-plain {
    padding: 6px 12px;
}

.tm-pill img {
    display: block;
    width: auto;
    height: 16px;
}

/* ---------- AI chat demo ----------
   Static in the markup (question, answer, sources) and animated by components.js, which types the
   questions in turn. Without JS, or with reduced motion, it shows the first answer and stays still. */

/* the rings' angle (--tm-ring-angle) and the tm-ring-spin animation are in public.css, shared with the plan cards */

.tm-chat-shell {
    position: relative;
}

.tm-chat-halo,
.tm-feature-halo {
    position: absolute;
    inset: -9px -9px 33px -9px;
    border-radius: 31px;
    pointer-events: none;
    opacity: .8;
    filter: blur(17px);
    background: conic-gradient(from var(--tm-ring-angle), var(--tm-transparent) 0deg 118deg, var(--tm-ring-dark) 172deg, var(--tm-accent) 212deg, var(--tm-ring-light) 248deg, var(--tm-accent) 288deg, var(--tm-ring-dark) 322deg, var(--tm-transparent) 356deg 360deg);
    animation: tm-ring-spin 9s linear infinite;
}

.tm-chat-frame,
.tm-feature-frame {
    position: relative;
    padding: 3px;
    border-radius: 23px;
    background: conic-gradient(from var(--tm-ring-angle), var(--tm-divider) 0deg 118deg, var(--tm-ring-mid) 172deg, var(--tm-accent) 212deg, var(--tm-ring-pale) 248deg, var(--tm-accent) 288deg, var(--tm-ring-mid) 322deg, var(--tm-divider) 356deg);
    animation: tm-ring-spin 9s linear infinite;
}

.tm-chat {
    padding: 26px;
    border-radius: 20px;
    background: var(--tm-surface-raised);
    box-shadow: 0 0 28px var(--tm-accent-soft-glow);
}

.tm-chat-head {
    padding-bottom: 16px;
    border-bottom: 1px dashed var(--tm-border);
}

.tm-chat-model {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 3px 11px 3px 7px;
    border: 1px solid var(--tm-border);
    border-radius: 999px;
    background: var(--tm-surface);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--tm-text);
}

.tm-chat-model img {
    display: block;
    width: auto;
    height: 14px;
}

.tm-chat-body {
    min-height: 262px;
}

.tm-chat-question {
    width: fit-content;
    max-width: 92%;
    margin: 18px 0 0 auto;
    padding: 16px 18px;
    border-radius: 14px 4px 14px 14px;
    background: var(--tm-surface-elevated);
    color: var(--tm-text-strong);
    font-size: 15.5px;
    line-height: 1.55;
}

.tm-chat-caret {
    display: none;
    width: 2px;
    height: 1.05em;
    margin-left: 2px;
    vertical-align: -3px;
    background: var(--tm-accent);
}

.tm-chat.is-typing .tm-chat-caret {
    display: inline-block;
    animation: tm-caret 1s steps(1) infinite;
}

@keyframes tm-caret {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

.tm-chat-turn {
    display: flex;
    gap: 13px;
    margin-top: 22px;
    transition: opacity .4s ease, transform .4s ease;
}

.tm-chat-avatar {
    display: flex;
    flex: 0 0 29px;
    align-items: center;
    justify-content: center;
    width: 29px;
    height: 29px;
    border: 1px solid var(--tm-cta-tint-border);
    border-radius: 9px;
    background: var(--tm-cta-tint);
    color: var(--tm-cta);
}

.tm-chat-avatar svg {
    display: block;
    width: 16px;
    height: 16px;
}

.tm-chat-turn-body {
    flex: 1;
    min-width: 0;
    padding-top: 3px;
}

.tm-chat-thinking {
    display: none;
    align-items: center;
    gap: 6px;
    height: 14px;
    margin-top: 5px;
}

.tm-chat-thinking span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tm-text-muted);
    opacity: .35;
    animation: tm-think 1.25s ease-in-out infinite;
}

.tm-chat-thinking span:nth-child(2) { animation-delay: .16s; }
.tm-chat-thinking span:nth-child(3) { animation-delay: .32s; }

@keyframes tm-think {
    0%, 100% { opacity: .28; transform: translateY(0); }
    45% { opacity: 1; transform: translateY(-4px); }
}

.tm-chat-answer {
    transition: opacity .4s ease;
}

/* states driven by components.js */
.tm-chat.is-asking .tm-chat-turn {
    opacity: 0;
    transform: translateY(8px);
}

.tm-chat.is-thinking .tm-chat-thinking {
    display: flex;
}

.tm-chat.is-asking .tm-chat-answer,
.tm-chat.is-thinking .tm-chat-answer {
    opacity: 0;
}

.tm-chat-figure {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--tm-text-strong);
}

.tm-chat-delta {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--tm-accent-strong);
}

.tm-chat-text {
    margin-top: 8px;
    font-size: 14.5px;
    line-height: 1.62;
    color: var(--tm-text);
}

.tm-chat-sources {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.tm-chat-sources span {
    padding: 3px 10px;
    border: 1px solid var(--tm-border);
    border-radius: 999px;
    font-family: var(--tm-font-mono);
    font-size: 11.5px;
    color: var(--tm-text-muted);
}

.tm-chat-input {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    padding: 10px 10px 10px 16px;
    border: 1px solid var(--tm-border);
    border-radius: 14px;
    background: var(--tm-surface);
}

.tm-chat-placeholder {
    flex: 1;
    font-size: 14.5px;
    color: var(--tm-text-muted);
}

.tm-chat-send {
    display: flex;
    flex: 0 0 31px;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    border-radius: 10px;
    background: linear-gradient(180deg, var(--tm-cta-gradient-top), var(--tm-cta-gradient-bottom));
    color: var(--tm-text-strong);
}

.tm-chat-send svg {
    display: block;
    width: 16px;
    height: 16px;
}

/* progress bar under the chat: one segment per example question */
.tm-chat-progress {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
}

.tm-chat-progress button {
    position: relative;
    width: 58px;
    height: 18px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

.tm-chat-progress button::before,
.tm-chat-progress-fill {
    position: absolute;
    top: 8px;
    left: 0;
    height: 2.5px;
    border-radius: 2px;
}

.tm-chat-progress button::before {
    content: "";
    right: 0;
    background: var(--tm-divider);
}

.tm-chat-progress button:hover::before {
    background: var(--tm-border);
}

.tm-chat-progress-fill {
    width: 0;
    background: var(--tm-accent);
}

/* a tag after the source tags, e.g. "about 10 seconds" */
.tm-chat-sources span.tm-chat-sources-note {
    border-color: var(--tm-accent-tint-border);
    color: var(--tm-accent-strong);
}

/* flow (_ChatDemo with ShowFlow): system tiles joined by lines to the Tugger hub, lit in turn by components.js */
.tm-chat-shell-flow .tm-chat-body {
    min-height: 0;
}

.tm-chat-flow {
    margin-top: 20px;
}

.tm-chat-systems {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
    gap: 10px;
}

.tm-chat-system {
    padding: 12px 8px 10px;
    border: 1.5px solid var(--tm-border);
    border-radius: 14px;
    background: var(--tm-surface-raised);
    text-align: center;
    transition: border-color .35s, box-shadow .35s;
}

.tm-chat-system img {
    display: block;
    width: auto;
    max-width: 72%;
    height: 30px;
    margin: 0 auto;
    object-fit: contain;
}

.tm-chat-system b {
    display: block;
    margin-top: 7px;
    font-size: 13.5px;
    color: var(--tm-text-strong);
}

.tm-chat-system span {
    display: block;
    font-size: 12px;
    line-height: 1.35;
    color: var(--tm-text-muted);
}

.tm-chat-lines {
    display: block;
    width: 100%;
    height: 56px;
    overflow: visible;
}

.tm-chat-lines path {
    fill: none;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.tm-chat-line {
    stroke: var(--tm-border);
}

.tm-chat-lines .tm-chat-line-run {
    stroke: var(--tm-accent);
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-dasharray: .22 .78;
    stroke-dashoffset: .22;
    opacity: 0;
}

.tm-chat-flow.is-running .tm-chat-line-run {
    opacity: 1;
    animation: tm-chat-run 1.15s linear forwards;
}

.tm-chat-flow.is-running .tm-chat-line-run:nth-of-type(5) {
    animation-delay: .15s;
}

.tm-chat-flow.is-running .tm-chat-line-run:nth-of-type(6) {
    animation-delay: .3s;
}

@keyframes tm-chat-run {
    from { stroke-dashoffset: .22; }
    to { stroke-dashoffset: -1; }
}

.tm-chat-hub {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: fit-content;
    margin: 0 auto;
    padding: 8px 18px;
    border: 1.5px solid var(--tm-border);
    border-radius: 999px;
    background: var(--tm-surface-raised);
    font-size: 13px;
    white-space: nowrap;
    color: var(--tm-text-muted);
    transition: border-color .35s, box-shadow .35s;
}

.tm-chat-hub img {
    display: block;
    width: auto;
    height: 22px;
}

.tm-chat-system.is-lit,
.tm-chat-hub.is-lit {
    border-color: var(--tm-accent);
    box-shadow: 0 0 22px var(--tm-accent-glow);
}

.tm-chat-shell-flow .tm-chat-turn {
    margin-top: 18px;
}

.tm-chat-shell-flow .tm-chat-text {
    margin-top: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--tm-text-strong);
}

/* the orange ring (_ChatDemo with CtaRing): ring, glow, caret, thinking dots, lit tiles and progress in the
   call-to-action orange; the send button turns Tugger blue so it stands apart */
.tm-chat-shell-cta .tm-chat-halo {
    opacity: .62;
    background: conic-gradient(from var(--tm-ring-angle), var(--tm-transparent) 0deg 118deg, var(--tm-cta-ring-dark) 172deg, var(--tm-cta) 212deg, var(--tm-cta-ring-light) 248deg, var(--tm-cta) 288deg, var(--tm-cta-ring-dark) 322deg, var(--tm-transparent) 356deg 360deg);
}

.tm-chat-shell-cta .tm-chat-frame {
    background: conic-gradient(from var(--tm-ring-angle), var(--tm-cta-ring-rest) 0deg 118deg, var(--tm-cta-gradient-bottom) 172deg, var(--tm-cta-ring-mid) 212deg, var(--tm-cta-ring-pale) 248deg, var(--tm-cta-ring-mid) 288deg, var(--tm-cta-gradient-bottom) 322deg, var(--tm-cta-ring-rest) 356deg);
}

.tm-chat-shell-cta .tm-chat {
    box-shadow: 0 0 28px var(--tm-cta-block-glow-warm);
}

.tm-chat-shell-cta .tm-chat-caret,
.tm-chat-shell-cta .tm-chat-thinking span,
.tm-chat-shell-cta .tm-chat-progress-fill {
    background: var(--tm-cta);
}

.tm-chat-shell-cta .tm-chat-send {
    background: linear-gradient(180deg, var(--tm-accent-btn-top), var(--tm-accent-btn-bottom));
    color: var(--tm-text-inverse);
}

.tm-chat-shell-cta .tm-chat-system.is-lit,
.tm-chat-shell-cta .tm-chat-hub.is-lit {
    border-color: var(--tm-cta);
    box-shadow: 0 0 22px var(--tm-cta-glow);
}

.tm-chat-shell-cta .tm-chat-line-run {
    stroke: var(--tm-cta);
}

.tm-chat-shell-cta .tm-chat-sources span.tm-chat-sources-note {
    border-color: var(--tm-cta-tint-border);
    color: var(--tm-cta-strong);
}

/* a static worked example (_ChatDemo with Example): a plain glowing window, sources as tags in the header, the
   reply box pinned to the bottom so two side by side line up */
.tm-chat-examples {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 40px;
}

.tm-chat-examples > div,
.tm-chat-shell-example,
.tm-chat-shell-example .tm-chat-frame {
    display: flex;
}

.tm-chat-shell-example,
.tm-chat-shell-example .tm-chat-frame,
.tm-chat-shell-example .tm-chat {
    flex: 1;
}

.tm-chat-shell-example .tm-chat-halo {
    display: none;
}

.tm-chat-shell-example .tm-chat-frame {
    padding: 0;
    background: none;
    animation: none;
}

.tm-chat-shell-example .tm-chat {
    display: flex;
    flex-direction: column;
    padding: 18px 20px 16px;
    border: 1px solid var(--tm-border);
    box-shadow: 0 0 0 1px var(--tm-accent-soft-glow), 0 0 36px var(--tm-window-glow);
}

.tm-chat-shell-example .tm-chat-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 12px;
}

.tm-chat-shell-example .tm-chat-head .tm-chat-sources {
    gap: 7px;
    margin-top: 0;
}

.tm-chat-shell-example .tm-chat-head .tm-chat-sources span {
    padding: 3px 11px;
    border-color: var(--tm-accent-chip-border);
    background: var(--tm-accent-tint);
    font-family: var(--tm-font-display);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--tm-accent-strong);
}

.tm-chat-shell-example .tm-chat-body {
    min-height: 0;
}

.tm-chat-shell-example .tm-chat-question {
    max-width: 88%;
    margin-top: 16px;
    padding: 13px 16px;
    font-size: 16.5px;
    font-weight: 500;
    line-height: 1.5;
}

.tm-chat-shell-example .tm-chat-turn {
    gap: 12px;
    margin: 16px 0;
}

.tm-chat-shell-example .tm-chat-text {
    margin-top: 0;
    font-size: 15.5px;
    line-height: 1.5;
    color: var(--tm-text-strong);
}

.tm-chat-shell-example .tm-chat-input {
    margin-top: auto;
    padding: 7px 7px 7px 14px;
    border-radius: 12px;
}

.tm-chat-shell-example .tm-chat-placeholder {
    font-size: 14px;
}

.tm-chat-shell-example .tm-chat-send {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: linear-gradient(180deg, var(--tm-accent-btn-top), var(--tm-accent-btn-bottom));
    color: var(--tm-text-inverse);
}

.tm-chat-shell-example .tm-chat-send svg {
    width: 14px;
    height: 14px;
}

@media (max-width: 820px) {
    .tm-chat-examples {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .tm-chat-system span {
        display: none;
    }
}

/* ---------- video ---------- */

.tm-video-section {
    padding: 0 0 92px;
}

.tm-video {
    position: relative;
    display: block;
    max-width: 880px;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--tm-border);
    border-radius: 22px;
    background: var(--tm-surface-inverse);
    box-shadow: 0 0 70px var(--tm-accent-faint-glow);
    cursor: pointer;
}

.tm-video img {
    display: block;
    width: 100%;
    height: auto;
}

.tm-video iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
}

.tm-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 86px;
    height: 86px;
    overflow: hidden;
    border: 4px solid var(--tm-cta);
    border-radius: 50%;
    background: transparent;
    box-shadow: 0 0 16px 3px var(--tm-highlight-glow), 0 0 30px var(--tm-cta-glow);
    transform: translate(-50%, -50%);
    transition: transform .15s;
}

.tm-video-play svg {
    margin-left: 5px;
    fill: var(--tm-cta);
}

.tm-video:hover .tm-video-play {
    transform: translate(-50%, -50%) scale(1.06);
}

.tm-video-play::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transform: scale(0);
    background: radial-gradient(circle, var(--tm-transparent) 0%, var(--tm-highlight-glow) 38%, var(--tm-transparent) 66%);
}

.tm-video:hover .tm-video-play::after {
    animation: tm-play-pulse .85s ease-out;
}

@keyframes tm-play-pulse {
    0% { transform: scale(.15); opacity: 1; }
    70% { opacity: .85; }
    100% { transform: scale(1.45); opacity: 0; }
}

.tm-video-caption {
    margin-top: 20px;
    text-align: center;
    font-family: var(--tm-font-mono);
    font-size: 12.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tm-text-muted);
}

/* ---------- section heads and dividers ---------- */

.tm-section-line {
    border-top: 1px solid var(--tm-divider);
}

.tm-sec-head {
    max-width: 680px;
}

.tm-sec-head h2 {
    font-size: clamp(34px, 4.8vw, 52px);
    font-weight: 700;
    line-height: 1.04;
}

.tm-sec-sub {
    margin-top: 12px;
    font-size: 20px;
    font-weight: 600;
    color: var(--tm-accent-strong);
}

.tm-sec-body {
    margin-top: 14px;
}

/* a closing line or link under a section's content */
.tm-sec-foot {
    margin-top: 30px;
}

.tm-sec-foot strong {
    font-size: 16.5px;
    font-weight: 600;
    color: var(--tm-text-strong);
}

a.tm-arrow-link:link,
a.tm-arrow-link:visited {
    font-weight: 700;
    color: var(--tm-accent);
}

/* ---------- connector marquee ----------
   Two rows of square connector tiles drifting in opposite directions. Each row renders its tiles twice
   (the second copy aria-hidden) and slides by half its width, so the loop is seamless. One clipping band
   wraps both rows; its vertical padding leaves room for a tile's hover lift and glow. */

.tm-marquee-band {
    position: relative;
    margin: -2px -32px -38px;
    padding: 38px 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, var(--tm-transparent) 0, var(--tm-mask-solid) 7%, var(--tm-mask-solid) 93%, var(--tm-transparent) 100%);
    mask-image: linear-gradient(90deg, var(--tm-transparent) 0, var(--tm-mask-solid) 7%, var(--tm-mask-solid) 93%, var(--tm-transparent) 100%);
}

.tm-marquee + .tm-marquee {
    margin-top: 28px;
}

.tm-marquee-track {
    display: flex;
    width: max-content;
    animation: tm-marquee-left 52s linear infinite;
}

.tm-marquee-reverse .tm-marquee-track {
    animation-name: tm-marquee-right;
}

.tm-marquee:hover .tm-marquee-track,
.tm-marquee:focus-within .tm-marquee-track {
    animation-play-state: paused;
}

.tm-marquee-group {
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
    padding-right: 10px;
}

@keyframes tm-marquee-left {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-50%, 0, 0); }
}

@keyframes tm-marquee-right {
    from { transform: translate3d(-50%, 0, 0); }
    to { transform: translate3d(0, 0, 0); }
}

.tm-connector-tile {
    display: flex;
    flex: 0 0 76px;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    padding: 15px;
    border: 1.5px solid var(--tm-border);
    border-radius: 18px;
    background: var(--tm-surface-raised);
    transition: border-color .3s, box-shadow .3s, transform .3s;
}

.tm-connector-tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: filter .35s;
}

.tm-connector-tile:hover {
    border-color: var(--tm-accent);
    box-shadow: 0 0 26px var(--tm-accent-glow);
    transform: translateY(-3px);
}

.tm-connector-tile:hover img {
    filter: saturate(1.12) brightness(1.06);
}

/* ---------- content cards ---------- */

.tm-card {
    border: 1px solid var(--tm-border);
    background: linear-gradient(165deg, var(--tm-surface-raised), var(--tm-card-wash));
    box-shadow: 0 1px 2px var(--tm-card-shadow);
}

.tm-card-lift {
    transition: transform .18s, border-color .18s;
}

.tm-card-lift:hover {
    border-color: var(--tm-accent);
    transform: translateY(-3px);
}

/* ---------- "just ask" question cards ---------- */

.tm-questions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 40px;
}

.tm-question-card {
    padding: 22px 24px;
    border-radius: 16px;
}

.tm-question-tags {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.tm-question-tags span {
    padding: 3px 11px;
    border: 1px solid var(--tm-cta-tag-border);
    border-radius: 999px;
    background: var(--tm-cta-tint);
    font-family: var(--tm-font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--tm-cta-strong);
}

.tm-question-card p {
    font-size: 16.5px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--tm-text-strong);
}

/* ---------- two ways ---------- */

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

.tm-way {
    padding: 34px;
    border-radius: 20px;
}

.tm-way h3 {
    margin-bottom: 12px;
    font-size: 24px;
    letter-spacing: -0.018em;
}

.tm-way p {
    font-size: 16px;
}

.tm-way a.tm-arrow-link:link,
.tm-way a.tm-arrow-link:visited {
    display: inline-block;
    margin-top: 20px;
    color: var(--tm-accent-strong);
}

.tm-ticks {
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.tm-ticks li {
    position: relative;
    padding: 7px 0 7px 30px;
    font-size: 15.5px;
}

.tm-ticks li::before {
    content: "";
    position: absolute;
    top: 13px;
    left: 1px;
    width: 13px;
    height: 8px;
    border-bottom: 2.6px solid var(--tm-accent);
    border-left: 2.6px solid var(--tm-accent);
    border-radius: 1px;
    transform: rotate(-48deg);
}

/* compact, static chat demo (_ChatDemo with Compact = true), with the mascot peeking over it */
.tm-chat-shell-mini {
    max-width: 344px;
    margin: 62px auto 0;
}

.tm-chat-shell-mini .tm-chat-halo {
    inset: -10px;
    border-radius: 30px;
    opacity: .55;
    filter: blur(20px);
    animation-duration: 13s;
}

.tm-chat-shell-mini .tm-chat-frame {
    padding: 2px;
    border-radius: 22px;
    animation-duration: 13s;
}

.tm-chat-shell-mini .tm-chat { padding: 15px; }
.tm-chat-shell-mini .tm-chat-head { padding-bottom: 11px; }
.tm-chat-shell-mini .tm-chat-model { gap: 6px; padding: 2px 9px 2px 6px; font-size: 11.5px; }
.tm-chat-shell-mini .tm-chat-model img { height: 12px; }
.tm-chat-shell-mini .tm-chat-body { min-height: 0; }
.tm-chat-shell-mini .tm-chat-question { margin-top: 11px; padding: 9px 12px; border-radius: 10px; font-size: 13px; }
.tm-chat-shell-mini .tm-chat-turn { gap: 10px; margin-top: 14px; }
.tm-chat-shell-mini .tm-chat-avatar { flex: 0 0 23px; width: 23px; height: 23px; border-radius: 7px; }
.tm-chat-shell-mini .tm-chat-avatar svg { width: 13px; height: 13px; }
.tm-chat-shell-mini .tm-chat-figure { font-size: 16px; }
.tm-chat-shell-mini .tm-chat-delta { font-size: 12px; }
.tm-chat-shell-mini .tm-chat-text { margin-top: 5px; font-size: 12.5px; }
.tm-chat-shell-mini .tm-chat-sources { margin-top: 10px; }
.tm-chat-shell-mini .tm-chat-sources span { padding: 2px 8px; font-size: 10.5px; }
.tm-chat-shell-mini .tm-chat-input { margin-top: 14px; padding: 7px 7px 7px 12px; border-radius: 11px; }
.tm-chat-shell-mini .tm-chat-placeholder { font-size: 12.5px; }
.tm-chat-shell-mini .tm-chat-send { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 7px; }
.tm-chat-shell-mini .tm-chat-send svg { width: 13px; height: 13px; }

.tm-chat-mascot {
    position: absolute;
    top: -42px;
    right: -34px;
    z-index: 3;
    width: 136px;
    height: auto;
    pointer-events: none;
    filter: drop-shadow(0 12px 26px var(--tm-shadow));
    animation: tm-mascot-float 5.5s ease-in-out infinite;
}

@keyframes tm-mascot-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

/* ---------- three steps ----------
   The steps climb from left to right under a rising arrow, with a light travelling along it that flashes
   the arrowhead on arrival. */

.tm-climb {
    position: relative;
    margin-top: 64px;
}

.tm-climb-line {
    position: absolute;
    top: 6px;
    right: 4%;
    left: 4%;
    height: 110px;
    pointer-events: none;
}

.tm-climb-line svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.tm-climb-path {
    stroke: var(--tm-climb);
    stroke-width: 7.2;
    stroke-linecap: round;
}

.tm-climb-head {
    fill: var(--tm-climb);
    stroke: var(--tm-climb);
    stroke-width: 3.5;
    stroke-linejoin: round;
    animation: tm-climb-head 5s linear infinite;
}

.tm-climb-dot {
    stroke-linecap: round;
    stroke-dasharray: 40 1500;
    stroke-dashoffset: 40;
    animation: tm-climb-dot 5s linear infinite;
}

.tm-climb-dot-glow {
    stroke: var(--tm-accent);
    stroke-width: 18;
    opacity: .95;
}

.tm-climb-dot-core {
    stroke: var(--tm-climb-flash);
    stroke-width: 6.5;
}

@keyframes tm-climb-dot {
    from { stroke-dashoffset: 40; }
    to { stroke-dashoffset: -1500; }
}

/* the light reaches the end of the path at 88.6% of the cycle; the head holds its resting colour until then */
@keyframes tm-climb-head {
    0%, 86.1% { fill: var(--tm-climb); stroke: var(--tm-climb); filter: drop-shadow(0 0 0 var(--tm-transparent)); }
    89.1% { fill: var(--tm-climb-flash); stroke: var(--tm-climb-flash); filter: drop-shadow(0 0 4px var(--tm-accent)) drop-shadow(0 0 12px var(--tm-climb-flash-glow)); }
    97.6%, 100% { fill: var(--tm-climb); stroke: var(--tm-climb); filter: drop-shadow(0 0 0 var(--tm-transparent)); }
}

.tm-steps {
    position: relative;
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

.tm-step {
    text-align: center;
}

.tm-step:nth-child(1) { margin-top: 76px; }
.tm-step:nth-child(2) { margin-top: 38px; }

.tm-step-num {
    display: block;
    margin-bottom: 12px;
    font-family: var(--tm-font-mono);
    font-size: 12px;
    letter-spacing: 0.15em;
    color: var(--tm-cta);
}

.tm-step img {
    display: block;
    width: 112px;
    height: 112px;
    margin: 0 auto;
}

.tm-step h3 {
    margin-top: 16px;
    font-size: 22px;
    letter-spacing: -0.018em;
}

.tm-step p {
    max-width: 28ch;
    margin: 6px auto 0;
    font-size: 15px;
    color: var(--tm-text-muted);
}

/* ---------- reasons to tug ---------- */

.tm-reasons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 44px;
}

.tm-reason {
    padding: 28px;
    border-radius: 16px;
}

.tm-reason img {
    display: block;
    width: 84px;
    height: 84px;
    margin: -6px 0 12px -8px;
}

.tm-reason h3 {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.018em;
}

.tm-reason p {
    margin-top: 8px;
    font-size: 15px;
    color: var(--tm-text-muted);
}

/* ---------- customer success stories (_StoryCard) ---------- */

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

.tm-story {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 34px;
    border-radius: 20px;
}

.tm-story-image {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border-bottom: 1px solid var(--tm-border);
    background: var(--tm-surface-page);
}

/* ---------- item image (#2621, _ItemImage): a card's hero, section image or fallback tile, filling its 16:9 box ---------- */

.tm-item-picture {
    display: block;
    width: 100%;
    height: 100%;
}

.tm-item-photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* no image at all: the reversed logo on navy, so the card keeps its shape */
.tm-item-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--tm-surface-inverse);
}

.tm-item-fallback img {
    width: 34%;
    max-width: 180px;
    height: auto;
}

.tm-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tm-pills span {
    padding: 4px 13px;
    border: 1px solid var(--tm-accent);
    border-radius: 999px;
    font-family: var(--tm-font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tm-accent-strong);
}

/* a connector's registered mark in a pill (_StoryPills): normal weight and no letter-spacing, so the small uppercase
   pill reads SIMPRO® rather than a bold blob after the name */
.tm-pill-reg {
    margin-left: 1px;
    font-size: 1em;
    font-weight: 400;
    letter-spacing: 0;
}

/* "+N" after a story's first few connector pills (_StoryPills): a pill like the rest, outlined dashed and on white so
   it reads as a count, not a connector */
.tm-story .tm-pills span.tm-pill-more,
.tm-listing-feature .tm-pills span.tm-pill-more {
    border-style: dashed;
    background: var(--tm-surface-raised);
}

/* over a card's image (home page): solid, outlined in orange and bolder, so they read over the illustration */
.tm-story-image .tm-pills {
    position: absolute;
    top: 14px;
    left: 14px;
}

.tm-story-image .tm-pills span {
    padding: 7px 16px;
    border: 1.5px solid var(--tm-cta-pill-border);
    border-radius: 999px;
    background: var(--tm-surface-raised);
    font-family: var(--tm-font-mono);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tm-cta-strong);
}

.tm-story-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 26px 34px 0;
}

.tm-story h3 {
    font-size: 21px;
    line-height: 1.3;
    letter-spacing: -0.018em;
}

.tm-story p {
    flex: 1;
    margin-top: 12px;
    font-size: 15.5px;
    color: var(--tm-text-muted);
}

.tm-story-link,
a.tm-cta-link:link,
a.tm-cta-link:visited {
    font-weight: 700;
    color: var(--tm-cta-strong);
}

.tm-story-link {
    margin-top: 18px;
}

/* the whole card is one link: the title's link is stretched over the card (_StoryCard, the latest-story feature) */
a.tm-story-title:link,
a.tm-story-title:visited,
a.tm-story-title:hover {
    color: inherit;
    text-decoration: none;
}

a.tm-story-title::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    border-radius: inherit;
}

a.tm-story-title:focus-visible {
    outline: none;
}

a.tm-story-title:focus-visible::after {
    outline: 2px solid var(--tm-accent);
    outline-offset: -2px;
}

/* the image pushes in behind the copy when the card is hovered */
.tm-item-photo {
    transition: transform .65s cubic-bezier(.22, .61, .36, 1);
}

.tm-story:hover .tm-item-photo,
.tm-feature-card:hover .tm-item-photo {
    transform: scale(1.055);
}

/* ---------- pricing ---------- */

.tm-price {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    margin-top: 40px;
    padding: 44px;
    border: 2px solid var(--tm-accent);
    border-radius: 20px;
    background: var(--tm-surface-raised);
    box-shadow: 0 0 28px var(--tm-feature-glow);
}

.tm-price-from {
    font-family: var(--tm-font-mono);
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tm-text-muted);
}

.tm-price-amount {
    font-size: 58px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--tm-text-strong);
}

.tm-price-amount small {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--tm-text);
}

.tm-price-includes {
    margin-top: 6px;
    font-size: 15.5px;
    color: var(--tm-text-muted);
}

/* ---------- final call to action ----------
   The hero chat's rotating ring, slower and dimmer so it reads as secondary to the hero. Orange by default;
   tm-final-blue switches it to Tugger blue, for pages whose section above is already orange-led. */

.tm-final {
    position: relative;
}

.tm-final-halo,
.tm-final-frame {
    animation: tm-ring-spin 11s linear infinite;
}

.tm-final-halo {
    position: absolute;
    inset: -16px;
    border-radius: 44px;
    pointer-events: none;
    opacity: .62;
    filter: blur(30px);
    background: conic-gradient(from var(--tm-ring-angle), var(--tm-transparent) 0deg 118deg, var(--tm-cta-ring-dark) 172deg, var(--tm-cta) 212deg, var(--tm-cta-ring-light) 248deg, var(--tm-cta) 288deg, var(--tm-cta-ring-dark) 322deg, var(--tm-transparent) 356deg 360deg);
}

.tm-final-frame {
    position: relative;
    padding: 2.5px;
    border-radius: 28.5px;
    background: conic-gradient(from var(--tm-ring-angle), var(--tm-cta-ring-rest) 0deg 118deg, var(--tm-cta-gradient-bottom) 172deg, var(--tm-cta-ring-mid) 212deg, var(--tm-cta-ring-pale) 248deg, var(--tm-cta-ring-mid) 288deg, var(--tm-cta-gradient-bottom) 322deg, var(--tm-cta-ring-rest) 356deg);
}

.tm-final-block {
    padding: 84px 40px;
    border-radius: 26px;
    text-align: center;
    background:
        radial-gradient(700px 400px at 50% -30%, var(--tm-cta-block-glow-cool), var(--tm-transparent) 65%),
        radial-gradient(520px 320px at 82% 110%, var(--tm-cta-block-glow-warm), var(--tm-transparent) 60%),
        linear-gradient(165deg, var(--tm-surface-raised), var(--tm-cta-block-wash));
}

.tm-final-blue .tm-final-halo {
    background: conic-gradient(from var(--tm-ring-angle), var(--tm-transparent) 0deg 118deg, var(--tm-ring-dark) 172deg, var(--tm-accent) 212deg, var(--tm-ring-light) 248deg, var(--tm-accent) 288deg, var(--tm-ring-dark) 322deg, var(--tm-transparent) 356deg 360deg);
}

.tm-final-blue .tm-final-frame {
    background: conic-gradient(from var(--tm-ring-angle), var(--tm-cta-ring-rest) 0deg 118deg, var(--tm-ring-mid) 172deg, var(--tm-accent) 212deg, var(--tm-ring-pale) 248deg, var(--tm-accent) 288deg, var(--tm-ring-mid) 322deg, var(--tm-cta-ring-rest) 356deg);
}

.tm-final-blue .tm-final-block {
    background:
        radial-gradient(700px 400px at 50% -30%, var(--tm-cta-block-glow-cool), var(--tm-transparent) 65%),
        radial-gradient(520px 320px at 82% 110%, var(--tm-accent-soft-glow), var(--tm-transparent) 60%),
        linear-gradient(165deg, var(--tm-surface-raised), var(--tm-cta-block-wash));
}

.tm-final-block h2 {
    font-size: clamp(40px, 5.8vw, 68px);
    font-weight: 700;
    line-height: 0.99;
}

.tm-final-block p {
    max-width: 46ch;
    margin: 20px auto 0;
    font-size: 19px;
}

.tm-final-block p.tm-final-just {
    margin-top: 14px;
    font-family: var(--tm-font-mono);
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tm-accent-strong);
}

.tm-final-ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin-top: 34px;
}

/* ---------- testimonials section (the card itself is in public.css) ---------- */

.tm-section-quotes {
    padding-top: 76px;
}

/* ---------- app partners ---------- */

.tm-app-partners {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 36px;
}

.tm-platform-ask {
    margin-top: 26px;
    font-size: 16px;
}

.tm-platform-ask strong {
    font-weight: 600;
    color: var(--tm-text-strong);
}

/* ---------- legal documents (tm-legal) ----------
   Terms, Privacy, Cookie, Data Processing and Support policies, styling the document's own headings,
   paragraphs, lists and tables so the legal text itself stays untouched. The page uses the site's 1120px
   container, so it lines up with the header and other pages; the document column is capped at a readable
   line length and left-aligned. Documents marked data-tm-toc (all five) get a contents list in the space to the right,
   built by components.js. */

.tm-legal {
    padding: 72px 0 96px;
}

.tm-legal-inner {
    display: flex;
    align-items: flex-start;
    gap: 64px;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 32px;
}

.tm-legal-doc {
    flex: 0 1 760px;
    min-width: 0;
}

.tm-legal h1 {
    font-size: clamp(40px, 5.6vw, 60px);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.018em;
}

.tm-legal-updated {
    margin-top: 14px;
    font-family: var(--tm-font-mono);
    font-size: 12.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tm-text-muted);
}

.tm-legal h2 {
    margin-top: 44px;
    scroll-margin-top: 96px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

/* "Part A / Operative provisions": a division of the whole document, so set apart from its sections */
.tm-legal h2.tm-legal-part {
    margin-top: 56px;
    padding-top: 28px;
    border-top: 1px solid var(--tm-divider);
}

.tm-legal p,
.tm-legal ul,
.tm-legal ol {
    margin-top: 14px;
    font-size: 17px;
    line-height: 1.7;
}

.tm-legal ul,
.tm-legal ol {
    margin-bottom: 0;
    padding-left: 24px;
}

.tm-legal li + li {
    margin-top: 6px;
}

.tm-legal li::marker {
    color: var(--tm-accent);
}

.tm-legal ul ul {
    margin-top: 8px;
    font-size: inherit;
}

/* a sub-list that carries its own lettering, e.g. "(a)" */
.tm-legal ul.tm-legal-plain-list {
    padding-left: 0;
    list-style: none;
}

.tm-legal b,
.tm-legal strong {
    font-weight: 700;
    color: var(--tm-text-strong);
}

/* data tables: the blog body's table styling (see .tm-rt table), so they scroll sideways in their own blue-framed box;
   the cells hold sentences, so they align to the top with a little more line height */
.tm-legal-table td {
    line-height: 1.55;
    vertical-align: top;
}

/* clause tables (Data Processing Agreement): numbered clauses laid out in columns, not data, so no box */
.tm-legal-clauses {
    width: 100%;
    margin-top: 20px;
    border-collapse: collapse;
    font-size: 16px;
    line-height: 1.65;
}

.tm-legal-clauses th,
.tm-legal-clauses td {
    padding: 0 16px 16px 0;
    text-align: left;
    vertical-align: top;
}

.tm-legal-clauses th {
    font-weight: 700;
    color: var(--tm-text-strong);
}

.tm-legal-clauses tr > :first-child {
    width: 48px;
    font-family: var(--tm-font-mono);
    font-size: 13.5px;
    color: var(--tm-text-muted);
}

/* contents list (components.js), sticky beside the document on wide screens */
.tm-legal-toc {
    position: sticky;
    top: 96px;
    flex: 0 0 260px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    padding-top: 8px;
}

.tm-legal-toc-title {
    margin-bottom: 12px;
    font-family: var(--tm-font-mono);
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tm-text-muted);
}

.tm-legal-toc ol {
    margin: 0;
    padding: 0 0 0 14px;
    border-left: 1px solid var(--tm-border);
    list-style: none;
}

.tm-legal-toc li + li {
    margin-top: 8px;
}

/* documents listed by clause: the part headings group their clauses */
.tm-legal-toc li.tm-legal-toc-group {
    font-weight: 600;
}

.tm-legal-toc li.tm-legal-toc-group + li {
    margin-top: 6px;
}

.tm-legal-toc li.tm-legal-toc-sub + li.tm-legal-toc-group {
    margin-top: 16px;
}

.tm-legal-toc li.tm-legal-toc-sub {
    padding-left: 12px;
}

.tm-legal-clause-head {
    scroll-margin-top: 96px;
}

:where(.tm-full .body-content) .tm-legal-toc a:link,
:where(.tm-full .body-content) .tm-legal-toc a:visited {
    font-size: 14.5px;
    line-height: 1.4;
    color: var(--tm-text);
}

:where(.tm-full .body-content) .tm-legal-toc a:hover {
    color: var(--tm-accent-strong);
}

@media (max-width: 1000px) {
    .tm-legal-inner {
        flex-direction: column;
        gap: 0;
    }

    .tm-legal-doc {
        flex-basis: auto;
        width: 100%;
        max-width: 760px;
    }

    /* no room beside the document, and above it the list would push the title down a screen: left out */
    .tm-legal-toc {
        display: none;
    }
}

/* ---------- page hero (pages other than home) ---------- */

.tm-page-hero {
    padding-bottom: 64px;
}

.tm-page-hero-small {
    padding: 72px 0 40px;
}

.tm-page-hero-small h1 {
    font-size: clamp(40px, 5.6vw, 64px);
}

.tm-section-snug {
    padding-top: 64px;
}

/* ---------- latest story feature ---------- */

/* a full-width 16:9 image band above the copy (#2621): beside the copy, the image stretched to the text's height and
   cropped a 16:9 photo to a portrait. Capped at ItemImage.FEATURED_MAX_WIDTH, which its sizes attribute assumes. */
.tm-feature {
    position: relative;
    max-width: 820px;
    margin: 44px auto 0;
}

.tm-feature-halo {
    inset: -9px;
}

.tm-feature-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 20px;
    background: var(--tm-surface-raised);
    box-shadow: 0 0 28px var(--tm-accent-soft-glow);
}

.tm-feature-image {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border-bottom: 1px solid var(--tm-border);
    background: var(--tm-surface-page);
}

.tm-feature-body {
    display: flex;
    flex-direction: column;
    padding: 42px 46px;
}

.tm-latest-pill {
    padding: 5px 14px;
    border-radius: 999px;
    background: var(--tm-accent);
    font-family: var(--tm-font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tm-text-strong);
}

.tm-read-time {
    font-family: var(--tm-font-mono);
    font-size: 11.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tm-text-muted);
}

.tm-feature h2 {
    font-size: clamp(23px, 2.6vw, 31px);
    line-height: 1.25;
    letter-spacing: -0.018em;
}

.tm-feature-body p {
    flex: 1;
    margin-top: 14px;
    font-size: 16px;
    color: var(--tm-text-muted);
}

/* ---------- listing hero and its featured item (#2581: Blogs, Customer Success Stories, Guides, Webinars) ---------- */

.tm-listing-hero {
    padding: 84px 0 96px;
}

.tm-listing-hero h1 {
    font-size: clamp(48px, 6.6vw, 84px);
}

.tm-listing-hero .tm-hero-lede {
    max-width: 56ch;
    margin-top: 20px;
    font-size: 19px;
}

/* the webinar feature (_WebinarFeature) keeps its stacked card and moving ring, under the hero's copy */
.tm-listing-hero .tm-feature {
    margin-top: 52px;
}

/* Blogs, Stories and Guides (_FeatureCard): image left, words right, in a still blue ring that brightens on hover */
.tm-listing-feature {
    position: relative;
    margin-top: 52px;
}

.tm-listing-feature-halo {
    position: absolute;
    inset: -9px;
    border-radius: 31px;
    pointer-events: none;
    opacity: .28;
    filter: blur(18px);
    background: var(--tm-accent);
    transition: opacity .25s ease;
}

.tm-listing-feature-frame {
    position: relative;
    padding: 3px;
    border-radius: 25px;
    background: var(--tm-listing-feature-ring);
    transition: background .25s ease, box-shadow .25s ease;
}

.tm-listing-feature:hover .tm-listing-feature-halo {
    opacity: .7;
}

.tm-listing-feature:hover .tm-listing-feature-frame {
    background: var(--tm-accent);
    box-shadow: 0 0 0 1px var(--tm-accent), 0 0 34px var(--tm-accent-frame-glow-tight);
}

.tm-listing-feature-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    overflow: hidden;
    border-radius: 22px;
    background: var(--tm-surface-raised);
}

/* fills the card's height, cropped from the centre, so there is no white gap under it; never shorter than 16:9, so short
   words beside it don't letterbox it. The words are kept short (three-line intro, the guide's facts on one line) so the
   crop stays small. The dividing line is on the words' side. */
.tm-listing-feature-image {
    position: relative;
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: stretch;
    min-width: 0;
    overflow: hidden;
    background: var(--tm-surface-inverse);
}

/* the 16:9 minimum: a spacer as tall as 9/16 of the column's width (an aspect-ratio on the stretched box would widen
   the column instead) */
.tm-listing-feature-image::before {
    content: "";
    display: block;
    padding-top: 56.25%;
}

.tm-listing-feature-image > .tm-item-picture,
.tm-listing-feature-image > .tm-item-photo,
.tm-listing-feature-image > .tm-item-fallback {
    position: absolute;
    inset: 0;
}

.tm-listing-feature-card:hover .tm-item-photo {
    transform: scale(1.055);
}

/* a blog post's "Latest", on the image's corner */
.tm-listing-feature-art-pill {
    position: absolute;
    z-index: 1;
    top: 12px;
    left: 12px;
    padding: 4px 12px;
    border: 1.5px solid var(--tm-listing-art-pill-border);
    border-radius: 999px;
    background: var(--tm-surface-raised);
    box-shadow: 0 2px 10px var(--tm-shadow);
    font-family: var(--tm-font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tm-accent-strong);
}

.tm-listing-feature-body {
    grid-column: 2;
    grid-row: 1;
    padding: 34px 36px 0;
}

.tm-listing-feature-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* "Latest story", "Most downloaded": white on blue, with a lit dot */
.tm-listing-feature-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px 6px 12px;
    border-radius: 999px;
    background: var(--tm-accent);
    box-shadow: 0 0 16px var(--tm-accent-frame-glow-tight);
    font-family: var(--tm-font-mono);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tm-text-inverse);
}

.tm-listing-feature-label::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--tm-text-inverse);
    box-shadow: 0 0 6px var(--tm-listing-label-dot-glow);
}

.tm-listing-feature h2 {
    margin-top: 16px;
    font-size: clamp(26px, 2.6vw, 34px);
    line-height: 1.12;
    letter-spacing: -0.018em;
}

.tm-listing-feature-body p {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 14px;
    font-size: 16px;
    color: var(--tm-text-muted);
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.tm-listing-feature-body,
.tm-listing-feature-side {
    border-left: 1px solid var(--tm-border);
}

.tm-listing-feature-side {
    display: flex;
    grid-column: 2;
    grid-row: 2;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 36px 32px;
}

.tm-listing-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
    margin: 0;
}

.tm-listing-facts dt {
    font-family: var(--tm-font-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tm-cta);
}

.tm-listing-facts dd {
    margin: 3px 0 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--tm-text-strong);
}

/* above the title's stretched link, so it is its own target */
.tm-listing-feature-cta {
    position: relative;
    z-index: 2;
    flex: none;
}

@media (max-width: 900px) {
    .tm-listing-feature-card {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .tm-listing-feature-image {
        grid-row: auto;
        border-bottom: 1px solid var(--tm-border);
    }

    .tm-listing-feature-body,
    .tm-listing-feature-side {
        grid-column: 1;
        grid-row: auto;
        border-left: none;
    }

    .tm-listing-feature-body {
        padding: 26px 24px 0;
    }

    .tm-listing-feature-side {
        flex-wrap: wrap;
        padding: 18px 24px 28px;
    }
}

@media (max-width: 640px) {
    .tm-listing-hero {
        padding: 56px 0 64px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tm-listing-feature-halo,
    .tm-listing-feature-frame {
        transition: none;
    }
}

/* ---------- story grid (Customer Success Stories): three smaller cards, pills above the title ---------- */

.tm-stories-grid {
    grid-template-columns: repeat(3, 1fr);
    margin-top: 34px;
}

/* white, framed in pale blue; on hover the frame turns Tugger blue with a soft glow (the designs' .wcard) */
.tm-story-compact {
    padding-bottom: 28px;
    border: 1.5px solid var(--tm-card-frame);
    background: var(--tm-surface-raised);
    transition: transform .18s, border-color .18s, box-shadow .18s;
}

.tm-story-compact:hover {
    border-color: var(--tm-accent);
    box-shadow: 0 0 26px var(--tm-card-frame-glow);
}

.tm-story-compact .tm-story-body {
    padding: 22px 26px 0;
}

/* the listing card's pills and the listing feature's (#2581): pale blue topic tags, the same as the one tag pill */
.tm-story-compact .tm-pills span,
.tm-listing-feature .tm-pills span,
.tm-topic-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border: 1px solid var(--tm-accent-chip-border);
    border-radius: 999px;
    background: var(--tm-accent-tint);
    font-family: var(--tm-font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tm-accent-strong);
}

.tm-story-compact h3 {
    font-size: 18.5px;
    line-height: 1.35;
}

.tm-story-compact p {
    display: -webkit-box;
    flex: none;
    overflow: hidden;
    margin-top: 10px;
    font-size: 15px;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* the listing card's meta row (#2581): a story's connector pills or the one tag pill, a badge, a blog's reading time */
.tm-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-bottom: 12px;
}

/* a card's small fact with its icon: a reading time or a guide's length */
.tm-card-fact {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--tm-font-mono);
    font-size: 11.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tm-text-muted);
}

.tm-card-fact svg {
    width: 13px;
    height: 13px;
    flex: none;
    color: var(--tm-cta);
}

/* the foot: the call to action on the left (blog posts, as the designs have it); a story's and a guide's on the right,
   a guide's length on the left (tm-card-foot-end) */
.tm-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 16px;
}

/* Tugger blue, deepening when the card is hovered (the designs' .wcard .go) */
.tm-story-compact .tm-story-link {
    margin: 0;
    color: var(--tm-accent);
    transition: color .18s;
}

.tm-story-compact:hover .tm-story-link {
    color: var(--tm-accent-strong);
}

.tm-card-foot-end .tm-story-link {
    margin-left: auto;
}

/* the "more" card closing a first-page grid (_MoreCard): the same box as the cards beside it, pale blue, the way on
   to page 2 */
a.tm-more-card,
a.tm-more-card:link,
a.tm-more-card:visited,
a.tm-more-card:hover {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 280px;
    padding: 34px 26px;
    border: 1.5px dashed var(--tm-accent);
    border-radius: 20px;
    background: var(--tm-accent-tint);
    text-align: center;
    text-decoration: none;
    color: var(--tm-text-strong);
    transition: background .2s, border-color .2s, box-shadow .2s;
}

a.tm-more-card:hover {
    border-style: solid;
    background: var(--tm-surface-raised);
    box-shadow: 0 0 26px var(--tm-accent-frame-glow);
}

a.tm-more-card:focus-visible {
    outline: 2px solid var(--tm-accent);
    outline-offset: 3px;
}

.tm-more-card-label {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.15;
}

.tm-more-card-note {
    font-family: var(--tm-font-mono);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tm-text-muted);
}

.tm-more-card-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-top: 8px;
    border-radius: 50%;
    background: var(--tm-accent);
    font-size: 22px;
    color: var(--tm-text-inverse);
}

/* a card's badge (White Paper, Upcoming) and meta line (a webinar's date, an article's reading time), above the pills */
.tm-story-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-bottom: 12px;
}

/* ---------- tag chips (_TagChips) ---------- */

.tm-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
    margin-top: 30px;
}

.tm-chip,
a.tm-chip:link,
a.tm-chip:visited,
a.tm-chip:hover {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border: 1px solid var(--tm-border);
    border-radius: 999px;
    background: var(--tm-surface-raised);
    font-family: var(--tm-font-display);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--tm-text);
    text-decoration: none;
    cursor: pointer;
    transition: border-color .2s, color .2s, box-shadow .2s;
}

.tm-chip:hover,
a.tm-chip:hover {
    border-color: var(--tm-accent);
    color: var(--tm-text-strong);
    box-shadow: 0 0 18px var(--tm-accent-frame-glow);
}

.tm-chip-n {
    font-family: var(--tm-font-mono);
    font-size: 11.5px;
    font-weight: 500;
    color: var(--tm-text-muted);
}

/* the listing you are on: not a link (_TagChips), so no hover and no pointer */
span.tm-chip[aria-current="page"] {
    border-color: var(--tm-accent);
    background: var(--tm-accent);
    box-shadow: none;
    color: var(--tm-text-inverse);
    cursor: default;
}

span.tm-chip[aria-current="page"] .tm-chip-n {
    color: var(--tm-text-inverse);
}

/* More / Fewer (components.js, data-tm-chips): hidden until the script runs, as every chip shows without it */
.tm-chip[hidden] {
    display: none;
}

.tm-chips-collapsible:not(.tm-chips-open) .tm-chip-extra {
    display: none;
}

/* ---------- newsletter block ---------- */

/* at the foot of a listing's section (#2581), outlined in orange */
.tm-news-block {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    margin-top: 48px;
    padding: 44px 48px;
    border: 1.5px solid var(--tm-cta);
    border-radius: 22px;
    background: var(--tm-surface-raised);
    transition: box-shadow .3s ease;
}

.tm-news-block:hover {
    box-shadow: 0 0 0 1px var(--tm-cta), 0 0 26px var(--tm-cta-frame-glow-tight), 0 0 60px var(--tm-cta-frame-glow-wide);
}

.tm-news-block-sub {
    margin-top: 10px;
    font-size: 16px;
    color: var(--tm-text-muted);
}

.tm-news-block .tm-news-form input#MailingListEmail:focus {
    outline: none;
    border-color: var(--tm-accent);
    box-shadow: 0 0 0 3px var(--tm-accent-focus-halo);
}

.tm-news-block h2 {
    font-size: clamp(26px, 3.4vw, 38px);
    line-height: 1.15;
}

.tm-news-block-form {
    flex: 1;
    min-width: 320px;
    max-width: 440px;
}

.tm-news-block .tm-news-form {
    margin-top: 0;
}

/* ---------- pager ---------- */

.tm-pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 40px;
}

.tm-pager a:link,
.tm-pager a:visited,
.tm-pager a:hover,
.tm-pager span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--tm-border);
    border-radius: 999px;
    background: var(--tm-surface-raised);
    font-family: var(--tm-font-mono);
    font-size: 14px;
    color: var(--tm-text);
    text-decoration: none;
}

.tm-pager a:hover {
    border-color: var(--tm-accent);
}

.tm-pager span.tm-pager-current {
    border-color: var(--tm-accent);
    background: var(--tm-accent);
    font-weight: 600;
    color: var(--tm-text-inverse);
}

.tm-pager span.tm-pager-gap {
    min-width: 0;
    padding: 0 4px;
    border: none;
    background: none;
    color: var(--tm-text-muted);
}

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

@media (max-width: 880px) {
    .tm-feature-body {
        padding: 30px 26px;
    }
}

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

@media (max-width: 640px) {
    .tm-news-block {
        padding: 36px 26px;
    }

    .tm-news-block-form {
        min-width: 0;
        width: 100%;
    }

    .tm-page-hero-small {
        padding: 56px 0 32px;
    }
}

/* ---------- page furniture from deferred-style.css ----------
   Full-theme pages don't load deferred-style.css (portal and onboarding pages still do), so the parts of it that
   show on every page are styled here: flash messages, form errors and the trial banner. The markup is shared with
   the portal, so these rules use its existing ids and classes. */

/* flash messages (flash-message.js): hidden until a message fades in over the top of the page; a click dismisses */
#flash-message,
#flash-error-message {
    display: none;
    position: fixed;
    z-index: 120;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px 16px;
    box-sizing: border-box;
    background: var(--tm-surface-inverse);
    font-family: var(--tm-font-display);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    color: var(--tm-text-inverse);
    cursor: pointer;
}

#flash-error-message {
    border-bottom: 2px solid var(--tm-text-error);
    background: var(--tm-surface-raised);
    color: var(--tm-text-error);
}

/* form errors (Html.ValidationMessage, Html.ValidationSummary) */
.validation-summary-errors,
.field-validation-error {
    display: block;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--tm-text-error);
}

/* the trial banner (logged-in trial users): shown by the layout's script with fadeIn */
#trial-banner {
    display: none;
    background: var(--tm-accent);
    font-family: var(--tm-font-display);
    font-size: 15px;
    color: var(--tm-text-strong);
}

#trial-banner .trial-banner-section {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 22px;
    max-width: 1250px;
    margin: 0 auto;
    padding: 12px 32px;
    box-sizing: border-box;
}

/* the portal's arrow icon is a CSS background image, which the theme does not use; the text carries the message */
#trial-banner .trial-icon {
    display: none;
}

#trial-banner a.button:link,
#trial-banner a.button:visited,
#trial-banner a.button:hover {
    padding: 7px 20px;
    border-radius: 999px;
    background: var(--tm-surface-inverse);
    font-weight: 700;
    color: var(--tm-text-inverse);
    text-decoration: none;
}

#trial-banner .trial-banner-help a:link,
#trial-banner .trial-banner-help a:visited,
#trial-banner .trial-banner-help a:hover {
    font-weight: 700;
    color: var(--tm-text-strong);
    text-decoration: underline;
}

/* ---------- visually hidden: read by screen readers, not shown (e.g. a section heading the design leaves out) ---------- */

.tm-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------- pricing page ---------- */

.tm-pricing-hero {
    padding-bottom: 44px;
}

/* the "every plan includes" strip under the hero copy; its items come in one after another on load */
.tm-every-plan {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 22px;
    margin: 34px 0 0;
    padding: 0;
    list-style: none;
}

.tm-every-plan li {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 15px;
    font-weight: 600;
    color: var(--tm-text);
    animation: tm-every-plan-in .5s cubic-bezier(.22, .61, .36, 1) both;
}

.tm-every-plan li.tm-every-plan-label {
    margin-right: 4px;
    font-family: var(--tm-font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tm-text-brand-grey);
    animation: none;
}

.tm-every-plan li:nth-child(3) {
    animation-delay: .08s;
}

.tm-every-plan li:nth-child(4) {
    animation-delay: .16s;
}

.tm-every-plan li:nth-child(5) {
    animation-delay: .24s;
}

.tm-every-plan li:nth-child(6) {
    animation-delay: .32s;
}

.tm-every-plan li:nth-child(7) {
    animation-delay: .40s;
}

@keyframes tm-every-plan-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
}

.tm-tick {
    display: inline-block;
    flex: none;
    width: 13px;
    height: 8px;
    border-bottom: 2.6px solid var(--tm-cta);
    border-left: 2.6px solid var(--tm-cta);
    border-radius: 1px;
    transform: rotate(-45deg) translateY(-2px);
}

.tm-section-plans {
    padding: 24px 0 80px;
}

/* what's included with every plan: icon beside title and text, two columns */
.tm-included {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 52px 72px;
    margin-top: 52px;
}

.tm-included-item {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
    align-items: start;
    column-gap: 16px;
}

.tm-included-glyph {
    grid-row: 1 / 3;
    display: block;
    width: 112px;
    height: 112px;
    margin: -16px 0 0 -20px;
    object-fit: contain;
    transition: filter .3s ease;
}

.tm-included-item:hover .tm-included-glyph {
    filter: drop-shadow(0 0 10px var(--tm-accent-glow-strong)) drop-shadow(0 0 24px var(--tm-accent-btn-glow));
}

.tm-included-item h3 {
    margin: 6px 0 8px;
    font-size: 19px;
}

.tm-included-item p {
    max-width: 44ch;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--tm-text-muted);
}

@media (max-width: 760px) {
    .tm-included {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

@media (max-width: 480px) {
    .tm-included-glyph {
        width: 84px;
        height: 84px;
        margin: -10px 0 0 -12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tm-every-plan li {
        animation: none;
    }

    .tm-included-glyph {
        transition: none;
    }
}

/* ---------- frequently asked questions (details/summary, no script; Views/Shared/TuggerMotion/_FaqList) ---------- */

.tm-faq {
    max-width: 760px;
    margin-top: 44px;
}

.tm-faq details {
    margin-bottom: 12px;
    border: 1px solid var(--tm-border);
    border-radius: 14px;
    background: linear-gradient(165deg, var(--tm-surface-raised), var(--tm-plan-card-end));
    box-shadow: 0 1px 2px var(--tm-surface-sunken);
    transition: border-color .18s;
}

.tm-faq details:hover,
.tm-faq details[open] {
    border-color: var(--tm-accent);
}

.tm-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    font-size: 17px;
    font-weight: 600;
    color: var(--tm-text-strong);
    list-style: none;
    cursor: pointer;
}

.tm-faq-q {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: 1.35;
    color: inherit;
}

.tm-faq summary::-webkit-details-marker {
    display: none;
}

.tm-faq summary:focus-visible {
    outline: 2px solid var(--tm-accent);
    outline-offset: 3px;
    border-radius: 14px;
}

.tm-faq-chev {
    flex: none;
    width: 10px;
    height: 10px;
    margin-top: -4px;
    border-right: 2.2px solid var(--tm-cta);
    border-bottom: 2.2px solid var(--tm-cta);
    transform: rotate(45deg);
    transition: transform .18s;
}

.tm-faq details[open] .tm-faq-chev {
    margin-top: 4px;
    transform: rotate(225deg);
}

.tm-faq-a {
    max-width: 66ch;
    padding: 0 24px 22px;
    font-size: 15.5px;
}

.tm-faq-a > * + * {
    margin-top: 12px;
}

.tm-faq-a ul {
    padding-left: 20px;
    list-style: disc;
}

.tm-faq-a li + li {
    margin-top: 6px;
}

.tm-faq-a li::marker {
    color: var(--tm-cta);
}

.tm-faq-a a:link,
.tm-faq-a a:visited {
    color: var(--tm-accent-strong);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.tm-faq-a a:hover {
    color: var(--tm-accent);
}

.tm-faq details[open] > .tm-faq-a {
    animation: tm-faq-in .3s ease;
}

/* FAQ page: one group per section heading, reached from the section links in the hero */
.tm-faq-group {
    scroll-margin-top: 96px;
}

.tm-faq-group + .tm-faq-group {
    margin-top: 64px;
}

.tm-faq-group .tm-faq {
    margin-top: 24px;
}

.tm-faq-heading {
    font-size: clamp(28px, 3.6vw, 38px);
    font-weight: 700;
    line-height: 1.1;
}

.tm-faq-jump {
    margin-top: 28px;
}

@keyframes tm-faq-in {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tm-faq details,
    .tm-faq-chev {
        transition: none;
    }

    .tm-faq details[open] > .tm-faq-a {
        animation: none;
    }
}

/* ---------- FAQ page (Views/Faq/Index): search in the hero, good places to start, the topics alongside the
   questions and a demo prompt on the right. components.js ([data-tm-faq-finder]) runs the search and topics. ---------- */

.tm-faq-hero-grid {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: 48px;
    align-items: start;
}

.tm-faq-hero h1 {
    font-size: clamp(44px, 5.4vw, 64px);
    line-height: 1.04;
}

.tm-faq-search {
    position: relative;
    max-width: 540px;
    margin-top: 88px;
}

.tm-faq-search-icon {
    position: absolute;
    top: 50%;
    left: 21px;
    width: 21px;
    height: 21px;
    transform: translateY(-50%);
    fill: none;
    stroke: var(--tm-cta);
    stroke-width: 2.2;
    stroke-linecap: round;
    pointer-events: none;
}

.tm-faq-search input {
    width: 100%;
    height: 60px;
    padding: 0 56px 0 54px;
    border: 1.5px solid var(--tm-border);
    border-radius: 999px;
    background: var(--tm-surface-raised);
    font-family: var(--tm-font-display);
    font-size: 17.5px;
    color: var(--tm-text-strong);
    box-shadow: 0 0 0 1px var(--tm-accent-soft-glow), 0 0 40px var(--tm-accent-faint-glow);
    transition: border-color .18s, box-shadow .18s;
    -webkit-appearance: none;
    appearance: none;
}

.tm-faq-search input::placeholder {
    color: var(--tm-text-muted);
}

.tm-faq-search input::-webkit-search-cancel-button {
    display: none;
}

.tm-faq-search input:focus {
    outline: none;
    border-color: var(--tm-accent);
    box-shadow: 0 0 0 3px var(--tm-accent-focus-halo), 0 0 44px var(--tm-accent-frame-glow);
}

.tm-faq-search-clear {
    position: absolute;
    top: 50%;
    right: 10px;
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--tm-text-muted);
    transform: translateY(-50%);
    cursor: pointer;
}

.tm-faq-search-clear:hover {
    background: var(--tm-surface-sunken);
    color: var(--tm-text-strong);
}

.tm-faq-search-clear svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
}

.tm-faq-search.has-text .tm-faq-search-clear {
    display: flex;
}

.tm-faq-count {
    min-height: 1.5em;
    margin-top: 14px;
    font-size: 15px;
    color: var(--tm-text-muted);
}

.tm-faq-count b {
    color: var(--tm-text-strong);
}

/* good places to start: a card in the slow blue ring, the bot peering over its top edge */
.tm-faq-start-shell {
    position: relative;
    width: 100%;
    max-width: 540px;
    margin-left: auto;
    padding-top: 136px;
}

.tm-faq-start-bot {
    position: absolute;
    top: 0;
    right: 24px;
    z-index: 3;
    width: 200px;
    height: auto;
    pointer-events: none;
    filter: drop-shadow(0 12px 26px var(--tm-shadow));
    animation: tm-mascot-float 5.5s ease-in-out infinite;
}

.tm-faq-start-halo {
    position: absolute;
    inset: 127px -9px -9px -9px;
    border-radius: 31px;
    pointer-events: none;
    opacity: .8;
    filter: blur(17px);
    background: conic-gradient(from var(--tm-ring-angle), var(--tm-transparent) 0deg 118deg, var(--tm-ring-dark) 172deg, var(--tm-accent) 212deg, var(--tm-ring-light) 248deg, var(--tm-accent) 288deg, var(--tm-ring-dark) 322deg, var(--tm-transparent) 356deg 360deg);
    animation: tm-ring-spin 9s linear infinite;
}

.tm-faq-start-frame {
    position: relative;
    padding: 3px;
    border-radius: 23px;
    background: conic-gradient(from var(--tm-ring-angle), var(--tm-divider) 0deg 118deg, var(--tm-ring-mid) 172deg, var(--tm-accent) 212deg, var(--tm-ring-pale) 248deg, var(--tm-accent) 288deg, var(--tm-ring-mid) 322deg, var(--tm-divider) 356deg);
    animation: tm-ring-spin 9s linear infinite;
}

.tm-faq-start {
    padding: 28px 30px 14px;
    border-radius: 20px;
    background: var(--tm-surface-raised);
}

.tm-faq-start-head {
    padding-bottom: 14px;
    border-bottom: 1px dashed var(--tm-dashed-border);
    font-family: var(--tm-font-mono);
    font-size: 14.5px;
    font-weight: 500;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--tm-text-strong);
}

.tm-faq-start a:link,
.tm-faq-start a:visited {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px dashed var(--tm-dashed-border);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--tm-text-strong);
    text-decoration: none;
}

.tm-faq-start a:last-child {
    border-bottom: none;
}

.tm-faq-start a:hover {
    color: var(--tm-accent-strong);
}

.tm-faq-start svg {
    flex: none;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--tm-accent);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .18s;
}

.tm-faq-start a:hover svg {
    transform: translateX(3px);
}

/* the questions, with the topics on the left and the demo prompt on the right, both following the reader */
.tm-faq-main .tm-faq-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) 292px;
    gap: 44px;
    align-items: start;
    max-width: 1290px;
}

.tm-faq-layout > * {
    min-width: 0;
}

.tm-faq-side {
    position: sticky;
    top: 106px;
    padding-top: 10px;
}

.tm-faq-side-head {
    margin: 0 0 8px 12px;
    font-family: var(--tm-font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--tm-cta);
}

.tm-faq-topics {
    display: grid;
    gap: 2px;
}

.tm-faq-topics a:link,
.tm-faq-topics a:visited {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--tm-text);
    text-decoration: none;
    transition: color .18s;
}

.tm-faq-topics a:hover,
.tm-faq-topics a.is-current {
    color: var(--tm-text-strong);
}

.tm-faq-topics a.is-current {
    font-weight: 700;
}

.tm-faq-topics a.is-empty {
    opacity: .4;
    pointer-events: none;
}

.tm-faq-topic-dot {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--tm-accent-chip-border);
    transition: background .25s;
}

.tm-faq-topics a:hover .tm-faq-topic-dot {
    background: var(--tm-accent-tint-border);
}

.tm-faq-topics a.is-current .tm-faq-topic-dot {
    background: var(--tm-accent);
    animation: tm-faq-dot 2.2s ease-in-out infinite;
}

@keyframes tm-faq-dot {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 var(--tm-accent-glow-strong), 0 0 8px var(--tm-accent-glow-strong);
    }

    50% {
        transform: scale(1.18);
        box-shadow: 0 0 0 5px var(--tm-transparent), 0 0 12px var(--tm-accent-glow-strong);
    }
}

.tm-faq-toggle {
    margin: 18px 0 0 12px;
    padding: 0;
    border: none;
    background: none;
    font-family: var(--tm-font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--tm-accent-strong);
    cursor: pointer;
}

.tm-faq-toggle:hover {
    text-decoration: underline;
}

/* the shared list, as this page shows it: a plus that turns to a dash, blue borders, wider answers */
.tm-faq-results .tm-faq-group {
    scroll-margin-top: 104px;
}

.tm-faq-results .tm-faq-group + .tm-faq-group {
    margin-top: 68px;
}

.tm-faq-results .tm-faq-heading {
    font-size: clamp(28px, 3vw, 36px);
    line-height: 1.08;
}

.tm-faq-results .tm-faq {
    max-width: none;
    margin-top: 22px;
}

.tm-faq-results .tm-faq details {
    margin-bottom: 14px;
    border: 1.5px solid var(--tm-accent-chip-border);
    border-radius: 16px;
    scroll-margin-top: 110px;
}

.tm-faq-results .tm-faq details:hover,
.tm-faq-results .tm-faq details[open] {
    border-color: var(--tm-accent);
}

.tm-faq-results .tm-faq details.is-flash {
    border-color: var(--tm-accent);
    box-shadow: 0 0 0 3px var(--tm-accent-focus-halo);
}

.tm-faq-results .tm-faq summary {
    padding: 22px 26px;
    font-size: 18px;
    font-weight: 700;
}

.tm-faq-results .tm-faq-chev {
    width: auto;
    height: auto;
    margin: 0;
    border: none;
    transform: none;
    font-family: var(--tm-font-mono);
    font-size: 22px;
    font-weight: 500;
    line-height: 1;
    color: var(--tm-accent);
}

.tm-faq-results .tm-faq-chev::before {
    content: "+";
}

.tm-faq-results .tm-faq details[open] .tm-faq-chev {
    margin: 0;
    transform: scale(1.1);
}

.tm-faq-results .tm-faq details[open] .tm-faq-chev::before {
    content: "\2013";
}

.tm-faq-results .tm-faq-a {
    max-width: 74ch;
    padding: 0 26px 24px;
    font-size: 16.5px;
}

.tm-faq-results [hidden] {
    display: none;
}

.tm-faq-empty {
    padding: 30px 28px;
    border: 1.5px dashed var(--tm-border);
    border-radius: 16px;
    background: var(--tm-surface-raised);
    font-size: 17px;
}

.tm-faq-empty a:link,
.tm-faq-empty a:visited {
    font-weight: 700;
    color: var(--tm-accent-strong);
}

.tm-faq-demo {
    position: sticky;
    top: 106px;
}

.tm-faq-demo-card {
    padding: 26px 24px 24px;
    border: 2px solid var(--tm-accent);
    border-radius: 20px;
    background: linear-gradient(180deg, var(--tm-callout-wash) 0%, var(--tm-surface-raised) 62%);
    box-shadow: 0 0 28px var(--tm-accent-frame-glow);
}

.tm-faq-demo-kicker {
    font-family: var(--tm-font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--tm-accent-strong);
}

.tm-faq-demo h2 {
    margin-top: 10px;
    font-size: 24px;
    line-height: 1.15;
}

.tm-faq-demo-card > p:not(.tm-faq-demo-kicker) {
    margin-top: 12px;
    font-size: 15.5px;
}

.tm-faq-demo-points {
    margin: 16px 0 22px;
    padding: 14px 0 0;
    border-top: 1px dashed var(--tm-dashed-border);
    list-style: none;
}

.tm-faq-demo-points li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 5px 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--tm-text-strong);
}

.tm-faq-demo-points svg {
    flex: none;
    width: 17px;
    height: 17px;
    margin-top: 3px;
    fill: none;
    stroke: var(--tm-cta);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tm-faq-demo .tm-btn {
    display: block;
    width: 100%;
    text-align: center;
}

@media (max-width: 1180px) {
    .tm-faq-main .tm-faq-layout {
        grid-template-columns: 220px minmax(0, 1fr);
    }

    .tm-faq-demo {
        position: static;
        grid-column: 2;
        margin-top: 24px;
    }

    .tm-faq-demo-card {
        max-width: 560px;
    }

    .tm-faq-demo .tm-btn {
        display: inline-block;
        width: auto;
    }
}

@media (max-width: 960px) {
    .tm-faq-hero-grid {
        grid-template-columns: 1fr;
    }

    .tm-faq-search {
        margin-top: 40px;
    }

    .tm-faq-start-shell {
        margin-left: 0;
    }
}

/* phones and small tablets: the topics become a sticky row of pills under the header */
@media (max-width: 900px) {
    .tm-section.tm-faq-main {
        padding-top: 0;
    }

    .tm-faq-main .tm-faq-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .tm-faq-demo {
        grid-column: 1;
        margin-top: 8px;
    }

    .tm-faq-side {
        top: 74px;
        z-index: 20;
        margin: 0 -32px;
        padding: 12px 32px;
        border-bottom: 1px solid var(--tm-divider);
        background: var(--tm-surface-header);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
    }

    .tm-faq-side-head,
    .tm-faq-toggle {
        display: none;
    }

    .tm-faq-topics {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .tm-faq-topics::-webkit-scrollbar {
        display: none;
    }

    .tm-faq-topics a:link,
    .tm-faq-topics a:visited {
        flex: none;
        gap: 9px;
        padding: 8px 15px 8px 13px;
        border: 1px solid var(--tm-border);
        border-radius: 999px;
        background: var(--tm-surface-raised);
        font-size: 14.5px;
    }

    .tm-faq-topics a.is-current {
        border-color: var(--tm-accent);
    }

    .tm-faq-topic-dot {
        width: 8px;
        height: 8px;
    }

    .tm-faq-results .tm-faq-group,
    .tm-faq-results .tm-faq details {
        scroll-margin-top: 150px;
    }
}

@media (max-width: 520px) {
    .tm-faq-start-shell {
        padding-top: 90px;
    }

    .tm-faq-start-halo {
        top: 81px;
    }

    .tm-faq-start-bot {
        width: 132px;
    }

    .tm-faq-start {
        padding: 22px 22px 8px;
    }

    .tm-faq-start a:link,
    .tm-faq-start a:visited {
        padding: 15px 0;
        font-size: 16.5px;
    }
}

/* the container's gutter is 20px from 700px down */
@media (max-width: 700px) {
    .tm-faq-side {
        margin: 0 -20px;
        padding: 12px 20px;
    }
}

@media (max-width: 480px) {
    .tm-faq-results .tm-faq summary {
        padding: 18px 20px;
        font-size: 17px;
    }

    .tm-faq-results .tm-faq-a {
        padding: 0 20px 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tm-faq-start-bot,
    .tm-faq-start-frame,
    .tm-faq-topics a.is-current .tm-faq-topic-dot {
        animation: none;
    }

    .tm-faq-start-halo {
        display: none;
    }

    .tm-faq-start-frame {
        background: var(--tm-border);
    }
}

/* ---------- your data, your boundaries (home): what the AI can see, beside an illustrative settings panel ---------- */

.tm-guard {
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    align-items: center;
    gap: 56px;
    margin-top: 42px;
}

.tm-guard-copy h3 {
    font-size: 24px;
}

.tm-guard-copy > p {
    margin-top: 10px;
    font-size: 16.5px;
}

.tm-guard-points {
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.tm-guard-points li {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 13px 0;
    border-top: 1px solid var(--tm-divider);
}

.tm-guard-points li:last-child {
    border-bottom: 1px solid var(--tm-divider);
}

.tm-guard-tick {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    fill: none;
    stroke: var(--tm-cta);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tm-guard-points strong {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--tm-text-strong);
}

.tm-guard-points span {
    display: block;
    margin-top: 1px;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--tm-text-muted);
}

.tm-guard-more {
    margin-top: 22px;
    font-size: 15.5px;
}

.tm-pd-panel {
    padding: 24px 26px;
    border: 1px solid var(--tm-border);
    border-radius: 20px;
    background: var(--tm-surface-raised);
    box-shadow: 0 0 0 1px var(--tm-accent-faint-glow), 0 0 44px var(--tm-accent-glow);
}

.tm-pd-head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding-bottom: 18px;
    border-bottom: 1px dashed var(--tm-divider);
    font-family: var(--tm-font-mono);
    font-size: 14.5px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--tm-text-strong);
}

.tm-pd-dot {
    flex: none;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--tm-cta);
    animation: tm-pd-pulse 2.6s ease-in-out infinite;
}

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

.tm-pd-row {
    display: grid;
    grid-template-columns: 1fr 92px 92px;
    align-items: center;
    gap: 10px;
    padding: 14px 0;
    border-bottom: 1px dashed var(--tm-divider);
}

.tm-pd-row:last-of-type {
    padding-bottom: 4px;
    border-bottom: none;
}

.tm-pd-row.tm-pd-cols {
    padding: 10px 0 2px;
    border-bottom: none;
    font-family: var(--tm-font-mono);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-align: center;
    text-transform: uppercase;
    color: var(--tm-text-muted);
}

.tm-pd-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--tm-text-strong);
}

.tm-pd-state {
    padding: 4px 12px;
    border: 1px solid var(--tm-border);
    border-radius: 999px;
    background: var(--tm-surface-sunken);
    font-family: var(--tm-font-mono);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-align: center;
    text-transform: uppercase;
    color: var(--tm-text-muted);
}

.tm-pd-state.is-visible {
    border-color: var(--tm-cta-tint-border);
    background: var(--tm-cta-tint);
    color: var(--tm-cta-strong);
}

.tm-pd-foot {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--tm-divider);
    font-size: 14px;
    color: var(--tm-text-muted);
}

@media (max-width: 900px) {
    .tm-guard {
        grid-template-columns: 1fr;
        gap: 38px;
    }
}

@media (max-width: 460px) {
    .tm-pd-panel {
        padding: 20px 18px;
    }

    .tm-pd-row {
        grid-template-columns: 1fr 78px 78px;
    }

    .tm-pd-state {
        padding: 4px 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tm-pd-dot {
        animation: none;
    }
}

/* ---------- connectors page (Tugger/OurTuggers, connectors.js) ----------
   Light version of Georgina's navy design: the search and category panel inside a slow rotating ring, Most Popular,
   the connectors grouped by category, Coming Soon and the request block. Every card is one link (the name's link is
   stretched over it). */

.tm-conn-hero {
    padding-bottom: 56px;
}

.tm-conn-filter-section {
    padding: 0 0 8px;
}

/* the panel is the working heart of the page, so it takes the ring: slower and tighter to the edge than the
   feature cards', so the perimeter lights up without a wash around the box */
.tm-conn-filter-shell {
    position: relative;
}

.tm-conn-filter-halo {
    position: absolute;
    inset: -3px;
    border-radius: 21px;
    pointer-events: none;
    opacity: .62;
    filter: blur(7px);
    background: conic-gradient(from var(--tm-ring-angle), var(--tm-transparent) 0deg 138deg, var(--tm-cta-ring-dark) 180deg, var(--tm-cta) 208deg, var(--tm-cta-ring-light) 232deg, var(--tm-cta) 256deg, var(--tm-cta-ring-dark) 284deg, var(--tm-transparent) 326deg 360deg);
    animation: tm-ring-spin 15s linear infinite;
}

.tm-conn-filter-frame {
    position: relative;
    padding: 1.5px;
    border-radius: 19.5px;
    background: conic-gradient(from var(--tm-ring-angle), var(--tm-divider) 0deg 138deg, var(--tm-cta-gradient-bottom) 180deg, var(--tm-cta-ring-mid) 208deg, var(--tm-cta-ring-pale) 232deg, var(--tm-cta-ring-mid) 256deg, var(--tm-cta-gradient-bottom) 284deg, var(--tm-divider) 326deg);
    animation: tm-ring-spin 15s linear infinite;
}

.tm-conn-filter {
    padding: 36px 32px;
    border-radius: 18px;
    background: linear-gradient(165deg, var(--tm-surface-raised), var(--tm-card-wash));
}

.tm-conn-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
}

.tm-conn-search {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 12px;
    min-width: 240px;
    padding: 14px 22px;
    border: 1px solid var(--tm-border);
    border-radius: 999px;
    background: var(--tm-surface-page);
    transition: border-color .25s, box-shadow .25s;
}

.tm-conn-search:focus-within {
    border-color: var(--tm-accent);
    box-shadow: 0 0 26px var(--tm-accent-glow);
}

.tm-conn-search svg {
    flex: none;
    fill: none;
    stroke: var(--tm-cta);
    stroke-width: 1.8;
    stroke-linecap: round;
    transition: stroke .25s;
}

.tm-conn-search:focus-within svg {
    stroke: var(--tm-accent);
}

.tm-conn-search input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font-family: var(--tm-font-display);
    font-size: 15.5px;
    color: var(--tm-text-strong);
    outline: none;
}

.tm-conn-search input::placeholder {
    color: var(--tm-text-muted);
}

.tm-conn-avail {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-family: var(--tm-font-mono);
    font-size: 12.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--tm-text);
}

.tm-conn-avail b {
    display: inline-block;
    min-width: 2ch;
    font-family: var(--tm-font-display);
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    text-align: center;
    color: var(--tm-accent);
}

.tm-conn-sep {
    color: var(--tm-border);
}

.tm-chips.tm-conn-cats {
    margin-top: 28px;
}

button.tm-chip {
    font-family: var(--tm-font-display);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

button.tm-chip:hover {
    background: var(--tm-accent-tint);
}

button.tm-chip[aria-pressed="true"] {
    border-color: var(--tm-transparent);
    background: linear-gradient(180deg, var(--tm-accent-btn-top), var(--tm-accent-btn-bottom));
    box-shadow: 0 0 18px var(--tm-accent-btn-glow);
    color: var(--tm-text-inverse);
    font-weight: 700;
}

.tm-conn-cats .tm-chip-n {
    margin-left: 4px;
    color: inherit;
}

.tm-conn-cats .tm-chip-n::before {
    content: "(";
}

.tm-conn-cats .tm-chip-n::after {
    content: ")";
}

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

.tm-conn-works {
    margin-top: 28px;
    font-size: 15px;
    line-height: 1.8;
    color: var(--tm-text-muted);
}

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

.tm-conn-grid-section {
    padding: 48px 0 80px;
}

.tm-conn-block {
    margin-bottom: 56px;
}

.tm-conn-block > h2,
.tm-conn-block > h3 {
    margin-bottom: 22px;
}

.tm-conn-block > h2 {
    font-size: clamp(30px, 4vw, 42px);
}

.tm-conn-block > h3 {
    font-size: 24px;
}

.tm-conn-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 18px;
}

.tm-conn-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 32px 28px;
    border: 1px solid var(--tm-border);
    border-radius: 16px;
    background: linear-gradient(165deg, var(--tm-surface-raised), var(--tm-card-wash));
    box-shadow: 0 1px 2px var(--tm-card-shadow);
    transition: transform .18s, border-color .18s;
}

.tm-conn-card:hover {
    border-color: var(--tm-accent);
}

.tm-conn-popular {
    min-height: 380px;
    padding: 64px 32px 44px;
}

.tm-conn-top {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.tm-conn-popular .tm-conn-top {
    margin-bottom: 24px;
}

.tm-conn-logo {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    padding: 10px;
    border: 1.5px solid var(--tm-border);
    border-radius: 18px;
    background: var(--tm-surface-raised);
    transition: border-color .3s, box-shadow .3s, transform .3s;
}

.tm-conn-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tm-conn-card:hover .tm-conn-logo,
.tm-conn-soon:hover .tm-conn-logo {
    border-color: var(--tm-accent);
    box-shadow: 0 0 6px var(--tm-accent-frame-glow-tight), 0 0 28px var(--tm-accent-glow-strong);
}

.tm-conn-card h4,
.tm-conn-soon h4 {
    font-size: 19px;
    line-height: 1.25;
}

a.tm-conn-link:link,
a.tm-conn-link:visited,
a.tm-conn-link:hover {
    color: inherit;
    text-decoration: none;
}

/* the whole card is one link */
a.tm-conn-link::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    border-radius: inherit;
}

a.tm-conn-link:focus-visible {
    outline: none;
}

a.tm-conn-link:focus-visible::after {
    outline: 2px solid var(--tm-accent);
    outline-offset: -2px;
}

.tm-conn-pop {
    position: absolute;
    top: 24px;
    right: 24px;
    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-conn-sector {
    display: inline-block;
    margin-bottom: 4px;
    font-family: var(--tm-font-mono);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tm-accent-strong);
}

.tm-conn-card p {
    display: -webkit-box;
    overflow: hidden;
    min-height: calc(3 * 1.62em);
    font-size: 14.5px;
    color: var(--tm-text-muted);
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* the badges take up any spare height, so the intro never stretches past its three lines */
.tm-conn-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding-top: 20px;
}

.tm-conn-popular .tm-conn-badges {
    padding-top: 24px;
}

.tm-conn-badges span {
    padding: 3px 10px;
    border: 1px solid var(--tm-accent-tint-border);
    border-radius: 999px;
    background: var(--tm-accent-tint);
    font-family: var(--tm-font-mono);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tm-accent-strong);
}

.tm-conn-go {
    display: inline-block;
    margin-top: 20px;
    font-size: 15px;
    font-weight: 700;
    color: var(--tm-accent-strong);
    transition: color .18s;
}

.tm-conn-soon-intro {
    margin-bottom: 22px;
}

.tm-conn-soon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}

.tm-conn-soon {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border: 1.5px dashed var(--tm-border);
    border-radius: 14px;
    transition: border-color .18s, transform .18s, background .18s;
}

.tm-conn-soon:hover {
    border-color: var(--tm-accent);
    background: var(--tm-menu-hover);
}

.tm-conn-soon h4 {
    margin-bottom: 4px;
    font-size: 17px;
}

.tm-conn-soon .tm-conn-go {
    margin-top: 0;
    font-size: 14px;
}

.tm-conn-none {
    margin-bottom: 56px;
    padding: 38px;
    border: 1.5px dashed var(--tm-border);
    border-radius: 16px;
    text-align: center;
    color: var(--tm-text-muted);
}

.tm-conn-none strong {
    display: block;
    margin-bottom: 6px;
    font-size: 19px;
    color: var(--tm-text-strong);
}

.tm-conn-request {
    padding: 48px 40px;
    border: 2px solid var(--tm-accent);
    border-radius: 22px;
    background: var(--tm-surface-raised);
    box-shadow: 0 0 28px var(--tm-accent-frame-glow);
    text-align: center;
    transition: box-shadow .25s;
}

.tm-conn-request:hover {
    box-shadow: 0 0 6px var(--tm-accent-frame-glow-tight), 0 0 34px var(--tm-accent-glow-strong);
}

.tm-conn-request a.tm-btn-outline-cta,
.tm-conn-request a.tm-btn-outline-cta:link,
.tm-conn-request a.tm-btn-outline-cta:visited {
    border-color: var(--tm-cta-tag-border);
    background: var(--tm-cta-tint);
    color: var(--tm-cta-strong);
}

.tm-conn-request a.tm-btn-outline-cta:hover {
    border-color: var(--tm-cta);
    background: var(--tm-cta-tint-strong);
}

.tm-conn-request h2 {
    font-size: clamp(28px, 3.8vw, 40px);
}

.tm-conn-request p {
    max-width: 52ch;
    margin: 12px auto 26px;
}

/* the filter hides with the hidden attribute; these components set their own display, so it needs restating */
.tm-conn-card[hidden],
.tm-conn-soon[hidden],
.tm-conn-block[hidden],
.tm-conn-none[hidden] {
    display: none;
}

/* cards that remain after a filter fade back in, staggered (connectors.js sets the delay) */
.tm-conn-in {
    animation: tm-conn-in .42s cubic-bezier(.22, .61, .36, 1) both;
}

@keyframes tm-conn-in {
    from {
        opacity: 0;
        transform: translateY(14px) scale(.985);
    }
}

@media (max-width: 560px) {
    .tm-conn-filter {
        padding: 26px 20px;
    }

    .tm-conn-avail {
        flex-wrap: wrap;
        white-space: normal;
    }

    .tm-conn-avail b {
        font-size: 19px;
    }

    .tm-conn-grid {
        grid-template-columns: 1fr;
    }

    .tm-conn-popular {
        min-height: 0;
        padding: 56px 24px 32px;
    }

    .tm-conn-request {
        padding: 36px 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tm-conn-filter-halo {
        display: none;
    }

    .tm-conn-filter-frame {
        background: var(--tm-border);
        animation: none;
    }

    .tm-conn-card,
    .tm-conn-logo,
    .tm-conn-go,
    .tm-conn-soon,
    .tm-conn-search,
    .tm-conn-request {
        transition: none;
    }

    .tm-conn-card:hover,
    .tm-conn-soon:hover,
    .tm-conn-card:hover .tm-conn-logo,
    .tm-conn-soon:hover .tm-conn-logo {
        transform: none;
    }

    .tm-conn-in {
        animation: none;
    }
}

/* ---------- Our Platform pages (Security and Compliance, How it Works) ----------
   A smaller page hero, reading-width prose, two-column splits, white panels in grids, an info
   callout and the "also worth a look" links. Security and Compliance adds the certificate card, the read-only
   flow diagram, the data regions and the legal fact table. */

.tm-platform-hero {
    padding: 72px 0 84px;
}

.tm-platform-hero h1 {
    font-size: clamp(42px, 5.2vw, 66px);
    line-height: 1.02;
}

.tm-platform-hero .tm-hero-lede {
    max-width: 50ch;
    margin-top: 22px;
}

.tm-platform-hero .tm-hero-lede + .tm-hero-lede {
    margin-top: 14px;
}

.tm-prose {
    max-width: 66ch;
}

.tm-sec-head + .tm-prose {
    margin-top: 22px;
}

.tm-prose p {
    font-size: 17.5px;
}

.tm-prose p + p {
    margin-top: 14px;
}

.tm-prose-after {
    margin-top: 34px;
}

.tm-prose strong,
.tm-split strong,
.tm-callout strong {
    font-weight: 600;
    color: var(--tm-text-strong);
}

/* two columns, each a sub-heading and its paragraphs */
.tm-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 56px;
}

.tm-sec-head + .tm-split {
    margin-top: 42px;
}

.tm-sub-h {
    font-size: clamp(30px, 3.6vw, 40px);
    font-weight: 700;
    line-height: 1.08;
}

.tm-split p {
    margin-top: 12px;
}

.tm-split .tm-sub-h + p {
    margin-top: 14px;
}

/* white panels: a plain card with a heading, in a grid of four or two */
.tm-panel {
    padding: 32px;
    border: 1px solid var(--tm-border);
    border-radius: 20px;
    background: var(--tm-surface-raised);
    box-shadow: 0 1px 2px var(--tm-card-shadow);
}

.tm-panel h3 {
    font-size: 22px;
}

.tm-panel p {
    margin-top: 10px;
    font-size: 16px;
}

.tm-panel-after {
    margin-top: 22px;
}

.tm-panels {
    display: grid;
    gap: 20px;
}

.tm-panels-four {
    grid-template-columns: repeat(4, 1fr);
    margin-top: 42px;
}

.tm-panels-two {
    grid-template-columns: 1fr 1fr;
    margin-top: 40px;
}

.tm-panels-four .tm-panel {
    padding: 26px;
}

.tm-panels-four h3 {
    font-size: 19px;
}

.tm-panels-four .tm-ticks li {
    font-size: 15px;
}

.tm-panels-four .tm-panel p {
    margin-top: 14px;
    font-size: 15px;
}

/* information callout: a round "i" beside a short note */
.tm-callout {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-top: 24px;
    padding: 18px 22px 18px 18px;
    border: 1px solid var(--tm-callout-border);
    border-radius: 16px;
    background: linear-gradient(135deg, var(--tm-callout-wash) 0%, var(--tm-surface-raised) 70%);
    box-shadow: 0 0 26px var(--tm-accent-faint-glow);
    font-size: 16px;
    line-height: 1.55;
}

.tm-callout > div {
    padding-top: 2px;
}

.tm-callout-icon {
    display: flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1.5px solid var(--tm-accent);
    border-radius: 50%;
    background: var(--tm-surface-raised);
    box-shadow: 0 0 14px var(--tm-accent-frame-glow-wide);
    color: var(--tm-accent);
}

.tm-callout-icon svg {
    display: block;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.7;
    stroke-linecap: round;
}

.tm-callout-icon circle {
    fill: currentColor;
    stroke: none;
}

/* "Also worth a look": links separated by dots, under a final call to action */
.tm-final-block p.tm-related {
    margin-top: 28px;
    color: var(--tm-text-muted);
}

.tm-related a:not(.tm-btn):link,
.tm-related a:not(.tm-btn):visited {
    font-weight: 600;
    white-space: nowrap;
    color: var(--tm-accent-strong);
}

.tm-related a + a::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    margin: 0 12px 3px;
    border-radius: 50%;
    background: var(--tm-border);
}

/* a final call to action with more to say: wider paragraphs, the second closer to the first */
.tm-final-wide p {
    max-width: 66ch;
}

.tm-final-block.tm-final-wide p + p {
    margin-top: 12px;
}

/* an orange-led section: highlights in the call-to-action orange, and the settings panel framed in slate */
.tm-section-cta-led .tm-hl {
    color: var(--tm-cta);
}

.tm-section-cta-led .tm-pd-panel {
    border: 2px solid var(--tm-frame-strong);
    box-shadow: 0 0 0 1px var(--tm-frame-strong-ring), 0 0 44px var(--tm-frame-strong-glow);
}

/* copy beside an illustrative panel */
.tm-ai-teaser {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    align-items: center;
    gap: 40px;
}

.tm-ai-teaser .tm-prose {
    margin-top: 18px;
}

.tm-ai-teaser .tm-prose p + p {
    margin-top: 12px;
}

.tm-ai-teaser .tm-btn {
    margin-top: 22px;
}

/* hero certificate card */
.tm-cert {
    padding: 30px;
    border: 2px solid var(--tm-frame-strong);
    border-radius: 22px;
    background: var(--tm-surface-raised);
    box-shadow: 0 0 0 1px var(--tm-frame-strong-ring), 0 0 44px var(--tm-frame-strong-glow);
}

.tm-cert-top {
    display: flex;
    align-items: center;
    gap: 22px;
    padding-bottom: 22px;
    border-bottom: 1px dashed var(--tm-divider);
}

.tm-cert-top img {
    display: block;
    flex: none;
    width: 104px;
    height: auto;
}

.tm-cert-top b {
    display: block;
    font-size: 22px;
    line-height: 1.2;
    color: var(--tm-text-strong);
}

.tm-cert-top span {
    display: block;
    margin-top: 4px;
    font-size: 15px;
    color: var(--tm-text-muted);
}

.tm-cert ul {
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}

.tm-cert li {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 0;
    border-bottom: 1px dashed var(--tm-divider);
    font-size: 15.5px;
}

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

.tm-cert li span {
    color: var(--tm-text-muted);
}

.tm-cert li b {
    text-align: right;
    color: var(--tm-text-strong);
}

.tm-cert-ask {
    margin-top: 8px;
    font-size: 14.5px;
}

/* read-only flow: three boxes joined by a forward arrow and a crossed-out return arrow */
.tm-dir {
    display: grid;
    grid-template-columns: 1fr 150px 1fr 150px 1fr;
    align-items: center;
    margin-top: 40px;
}

.tm-dir-node {
    padding: 22px 20px;
    border: 1px solid var(--tm-border);
    border-radius: 18px;
    background: var(--tm-surface-raised);
    text-align: center;
}

.tm-dir-node b {
    display: block;
    font-size: 21px;
    line-height: 1.2;
    color: var(--tm-text-strong);
}

.tm-dir-node span {
    display: block;
    margin-top: 5px;
    font-size: 15.5px;
    line-height: 1.4;
    color: var(--tm-text-muted);
}

.tm-dir-tugger {
    border: 2px solid var(--tm-accent);
    box-shadow: 0 0 28px var(--tm-accent-frame-glow);
}

.tm-dir-tugger img {
    display: block;
    width: auto;
    height: 34px;
    margin: 0 auto 6px;
}

.tm-dir-arrow {
    position: relative;
    align-self: stretch;
    min-height: 64px;
}

.tm-dir-arrow > svg:first-child {
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: 100%;
    height: 64px;
    overflow: visible;
    transform: translateY(-50%);
}

.tm-dir-arrow path {
    fill: none;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.tm-dir-fwd {
    stroke: var(--tm-accent);
}

/* the dot running along the forward arrow */
.tm-dir-run {
    stroke: var(--tm-surface-raised);
    stroke-dasharray: .16 1.4;
    animation: tm-dir-run 2.4s linear infinite;
}

.tm-dir-run-late {
    animation-delay: 1.2s;
}

@keyframes tm-dir-run {
    from { stroke-dashoffset: .16; }
    to { stroke-dashoffset: -1; }
}

.tm-dir-arrow .tm-dir-back,
.tm-dir-arrow .tm-dir-backhead {
    stroke: var(--tm-line-muted);
    stroke-width: 2;
}

.tm-dir-back {
    stroke-dasharray: 4 5;
}

/* the cross on the return arrow: centred on it (the return line sits 12px below the arrow's middle) */
.tm-dir-x {
    position: absolute;
    top: calc(50% + 5px);
    left: calc(50% - 6px);
    width: 12px;
    height: 14px;
    overflow: visible;
    stroke: var(--tm-cta);
}

.tm-dir-tag {
    position: absolute;
    right: 0;
    bottom: 1px;
    left: 0;
    font-family: var(--tm-font-mono);
    font-size: 11px;
    line-height: 1;
    letter-spacing: .1em;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--tm-text-muted);
}

/* where your data lives: one tile per region, the on-request one dashed */
.tm-regions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 24px;
}

.tm-split .tm-regions + p {
    margin-top: 20px;
}

.tm-region {
    flex: 1 1 200px;
    padding: 18px 20px;
    border: 1px solid var(--tm-border);
    border-radius: 16px;
    background: var(--tm-surface-raised);
}

.tm-region span {
    font-size: 13.5px;
    color: var(--tm-text-muted);
}

.tm-region b {
    display: block;
    margin-top: 2px;
    font-size: 20px;
    color: var(--tm-text-strong);
}

.tm-region-option {
    border-style: dashed;
}

/* a two-column fact table (label, value) that stacks on a phone */
.tm-fact-table {
    width: 100%;
    margin-top: 30px;
    overflow: hidden;
    border: 1px solid var(--tm-border);
    border-radius: 18px;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--tm-surface-raised);
}

.tm-fact-table th,
.tm-fact-table td {
    padding: 16px 22px;
    border-bottom: 1px solid var(--tm-border);
    font-size: 16px;
    text-align: left;
    vertical-align: top;
}

.tm-fact-table tr:last-child th,
.tm-fact-table tr:last-child td {
    border-bottom: none;
}

.tm-fact-table th {
    width: 220px;
    font-weight: 700;
    color: var(--tm-text-strong);
    background: var(--tm-surface-sunken);
}

@media (max-width: 1060px) {
    .tm-panels-four {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 900px) {
    .tm-split {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .tm-ai-teaser {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    .tm-panels-two {
        grid-template-columns: 1fr;
    }

    .tm-dir {
        grid-template-columns: 1fr;
    }

    /* turned to point down: the box is 76px long once rotated but only 64px tall in the layout, so the
       vertical margin covers the 6px it overhangs at each end and leaves a clear gap to the boxes */
    .tm-dir-arrow {
        align-self: center;
        width: 76px;
        height: 64px;
        min-height: 0;
        margin: 16px auto;
        transform: rotate(90deg);
    }

    .tm-dir-tag {
        display: none;
    }
}

@media (max-width: 640px) {
    .tm-hero.tm-platform-hero {
        padding: 48px 0 60px;
    }

    .tm-panel,
    .tm-panels-four .tm-panel {
        padding: 24px;
    }

    .tm-fact-table th,
    .tm-fact-table td {
        display: block;
        padding: 12px 18px;
    }

    .tm-fact-table th {
        width: auto;
        padding-bottom: 0;
        border-bottom: none;
        background: none;
    }
}

@media (max-width: 620px) {
    .tm-panels-four {
        grid-template-columns: 1fr;
    }
}

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

/* ---------- How it Works ----------
   Three numbered steps down a line, a light running down it from step to step; the "two things" cards; the
   Power BI panel with an illustrative dashboard; the direct-MCP comparison with the presenter; the build-it-
   yourself aside. Strong text in the hero ledes, and a link inside a callout. */

.tm-platform-hero strong {
    font-weight: 600;
    color: var(--tm-text-strong);
}

.tm-callout a:not(.tm-btn):link,
.tm-callout a:not(.tm-btn):visited {
    font-weight: 700;
}

.tm-seq {
    position: relative;
    margin: 48px 0 0;
    padding: 0;
    list-style: none;
}

.tm-seq-step {
    position: relative;
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 34px;
    padding-bottom: 56px;
}

.tm-seq-step:last-child {
    padding-bottom: 0;
}

.tm-seq-mark {
    position: relative;
    width: 120px;
    height: 120px;
}

.tm-seq-mark img {
    position: relative;
    display: block;
    width: 120px;
    height: 120px;
}

/* the glow round an icon as the light leaves or reaches it */
.tm-seq-glow {
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    box-shadow: 0 0 28px 6px var(--tm-climb-flash-glow);
    opacity: 0;
}

/* the line from one icon down to the next, and the light that runs along it */
.tm-seq-line {
    position: absolute;
    top: 120px;
    bottom: 6px;
    left: 58px;
    width: 4px;
    overflow: hidden;
}

.tm-seq-line::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 1px;
    width: 2px;
    background: linear-gradient(180deg, var(--tm-accent), var(--tm-step-line-fade));
}

.tm-seq-light {
    position: absolute;
    inset: 0;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--tm-transparent) calc(100% - 90px), var(--tm-accent) calc(100% - 27px), var(--tm-surface-raised) 100%);
    transform: translateY(-100%);
}

.tm-seq-num {
    display: block;
    margin-top: 12px;
    font-family: var(--tm-font-mono);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--tm-cta);
}

.tm-seq-step h3 {
    margin-top: 4px;
    font-size: clamp(26px, 3vw, 32px);
    line-height: 1.1;
}

.tm-seq-body p {
    max-width: 64ch;
    margin-top: 12px;
    font-size: 17px;
}

.tm-seq-body p.tm-seq-after {
    margin-top: 22px;
}

.tm-seq-body .tm-callout {
    max-width: 640px;
}

.tm-seq-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.tm-seq-pills .tm-pill {
    padding: 7px 16px;
    font-size: 14.5px;
}

.tm-seq-pills .tm-pill img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

a.tm-pill-link:link,
a.tm-pill-link:visited {
    border-color: var(--tm-accent);
    background: transparent;
    color: var(--tm-accent-strong);
}

/* each light takes its turn: step 1 to 2, then 2 to 3, then the last icon glows as it arrives */
@media (prefers-reduced-motion: no-preference) {
    .tm-seq-step:nth-child(1) .tm-seq-light {
        animation: tm-seq-first 4.4s linear infinite;
    }

    .tm-seq-step:nth-child(2) .tm-seq-light {
        animation: tm-seq-second 4.4s linear infinite;
    }

    .tm-seq-step:nth-child(1) .tm-seq-glow {
        animation: tm-seq-leave 4.4s linear infinite;
    }

    .tm-seq-step:nth-child(2) .tm-seq-glow {
        animation: tm-seq-pass 4.4s linear infinite;
    }

    .tm-seq-step:nth-child(3) .tm-seq-glow {
        animation: tm-seq-arrive 4.4s linear infinite;
    }
}

@keyframes tm-seq-first {
    0% { transform: translateY(-100%); }
    45%, 100% { transform: translateY(100%); }
}

@keyframes tm-seq-second {
    0%, 45% { transform: translateY(-100%); }
    90%, 100% { transform: translateY(100%); }
}

@keyframes tm-seq-leave {
    0%, 100% { opacity: 1; }
    6%, 94% { opacity: 0; }
}

@keyframes tm-seq-pass {
    0%, 40% { opacity: 0; }
    46% { opacity: 1; }
    54%, 100% { opacity: 0; }
}

@keyframes tm-seq-arrive {
    0%, 86% { opacity: 0; }
    92% { opacity: 1; }
    100% { opacity: 0; }
}

/* the "two things" cards: orange outline and number; the first with the mascot floating in its corner */
.tm-card.tm-way-cta {
    border: 1.5px solid var(--tm-cta-tag-border);
}

.tm-way-num {
    display: block;
    margin-bottom: 8px;
    font-family: var(--tm-font-mono);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--tm-cta);
}

.tm-way-cta p + p {
    margin-top: 12px;
}

.tm-way-cta strong {
    font-weight: 600;
    color: var(--tm-text-strong);
}

.tm-way-mascot {
    position: relative;
    overflow: hidden;
}

.tm-way-bot {
    position: absolute;
    right: 26px;
    bottom: 14px;
    width: 188px;
    height: auto;
    pointer-events: none;
    filter: drop-shadow(0 14px 22px var(--tm-shadow));
}

@media (prefers-reduced-motion: no-preference) {
    .tm-way-bot {
        animation: tm-mascot-float 3.2s ease-in-out infinite;
    }
}

/* Power BI and Tableau, beside an illustrative dashboard */
.tm-bi {
    display: grid;
    grid-template-columns: 1fr 300px;
    align-items: center;
    gap: 36px;
    margin-top: 22px;
    padding: 24px 28px;
    box-shadow: none;
}

.tm-panel.tm-bi h3 {
    font-size: 19px;
}

.tm-panel.tm-bi p {
    font-size: 15.5px;
    color: var(--tm-text-muted);
}

.tm-bi strong {
    font-weight: 600;
    color: var(--tm-text);
}

.tm-dash {
    padding: 10px;
    border: 1px solid var(--tm-chart-frame);
    border-radius: 12px;
    background: var(--tm-surface-raised);
    opacity: .9;
}

.tm-dash-bar {
    display: flex;
    align-items: center;
    gap: 5px;
    padding-bottom: 9px;
    border-bottom: 1px dashed var(--tm-divider);
    font-size: 13px;
}

.tm-dash-bar i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--tm-chart-dot);
}

.tm-dash-bar span {
    margin-left: 6px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--tm-text);
}

.tm-dash-bar img {
    display: block;
    width: auto;
    height: 26px;
    margin-left: auto;
}

.tm-dash-chart {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 10px;
}

.tm-dash-col {
    fill: var(--tm-chart-bar);
}

.tm-dash-col-now {
    fill: var(--tm-accent);
}

.tm-dash-trend {
    fill: none;
    stroke: var(--tm-cta);
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tm-dash-point {
    fill: var(--tm-surface-raised);
    stroke: var(--tm-cta);
    stroke-width: 2.2;
}

.tm-dash-axis {
    stroke: var(--tm-border);
}

/* direct MCP connections against Tugger */
.tm-vs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 22px;
    margin-top: 42px;
}

.tm-vs .tm-panel h3 {
    margin-bottom: 6px;
    font-size: 21px;
}

.tm-guard-points-tight li {
    padding: 15px 0;
}

.tm-guard-cross {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    fill: none;
    stroke: var(--tm-text-muted);
    stroke-width: 2.2;
    stroke-linecap: round;
}

.tm-panel-keyline {
    border: 2px solid var(--tm-accent);
    box-shadow: 0 0 28px var(--tm-accent-frame-glow);
}

/* the presenter stands at the bottom right with the text wrapped down her left side (components.js gives her
   her outline as shape-outside); a zero-width float pushes her down to the bottom of the box */
.tm-vs-answer {
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
    overflow: hidden;
}

.tm-vs-body {
    position: relative;
    display: flow-root;
    flex: 1 0 auto;
    margin-top: 6px;
}

.tm-vs-body::before {
    content: "";
    float: right;
    width: 0;
    height: calc(100% - 420px);
}

.tm-vs-body p {
    font-size: 16px;
}

.tm-panel .tm-vs-body p + p {
    margin-top: 12px;
}

.tm-vs-presenter {
    float: right;
    clear: right;
    width: 380px;
    height: 420px;
    margin: 0 -16px 0 0;
    shape-image-threshold: .3;
    shape-margin: 16px;
}

/* sparkles in her eyes, positioned on her catchlights */
.tm-vs-eyes {
    position: absolute;
    right: -16px;
    bottom: 0;
    width: 380px;
    height: 420px;
    pointer-events: none;
}

.tm-sparkle {
    position: absolute;
    top: 24.1%;
    width: 13px;
    height: 13px;
    margin: -6.5px 0 0 -6.5px;
    pointer-events: none;
    opacity: 0;
    filter: drop-shadow(0 0 3px var(--tm-text-inverse)) drop-shadow(0 0 6px var(--tm-sparkle-glow));
    transform: scale(0);
}

.tm-sparkle svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: var(--tm-text-inverse);
}

.tm-sparkle-left {
    left: 59.1%;
}

.tm-sparkle-right {
    left: 74.7%;
}

@media (prefers-reduced-motion: no-preference) {
    .tm-sparkle {
        animation: tm-sparkle 3.6s ease-in-out infinite;
    }

    .tm-sparkle-right {
        animation-delay: .18s;
    }
}

@keyframes tm-sparkle {
    0%, 62%, 100% { transform: scale(0) rotate(0deg); opacity: 0; }
    72% { transform: scale(1) rotate(45deg); opacity: 1; }
    84% { transform: scale(.25) rotate(90deg); opacity: .6; }
}

/* building it yourself: a dashed aside under the comparison */
.tm-build {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 22px;
    margin-top: 22px;
    padding: 26px 30px;
    border: 1px dashed var(--tm-dashed-border);
    border-radius: 18px;
    background: var(--tm-surface-sunken);
}

.tm-build h3 {
    font-size: 19px;
    white-space: nowrap;
}

.tm-build p {
    font-size: 16px;
}

.tm-build p + p {
    margin-top: 10px;
}

.tm-build strong {
    font-weight: 600;
    color: var(--tm-text-strong);
}

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

    .tm-vs-eyes,
    .tm-vs-presenter {
        width: 300px;
        height: 332px;
    }

    .tm-vs-body::before {
        height: calc(100% - 332px);
    }
}

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

    .tm-bi .tm-dash {
        max-width: 320px;
    }

    /* room under the text for the mascot; two classes so the phone padding on .tm-way doesn't undo it */
    .tm-way.tm-way-mascot {
        padding-bottom: 220px;
    }
}

@media (max-width: 760px) {
    .tm-build {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .tm-build h3 {
        white-space: normal;
    }
}

@media (max-width: 700px) {
    .tm-seq-step {
        grid-template-columns: 64px 1fr;
        gap: 18px;
    }

    .tm-seq-mark,
    .tm-seq-mark img {
        width: 64px;
        height: 64px;
    }

    .tm-seq-glow {
        inset: 4px;
    }

    .tm-seq-line {
        top: 66px;
        left: 30px;
    }
}

@media (max-width: 560px) {
    .tm-vs-body {
        display: flex;
        flex-direction: column;
    }

    .tm-vs-body::before {
        display: none;
    }

    .tm-vs-presenter {
        order: 99;
        float: none;
        display: block;
        width: 260px;
        height: 288px;
        margin: 18px auto 0;
    }

    .tm-vs-eyes {
        right: calc(50% - 130px);
        width: 260px;
        height: 288px;
    }
}

/* ---------- Performance and Reliability ----------
   The 24-hour refresh ring in the hero (components.js sweeps it to the viewer's hour), the infrastructure stack,
   the status panel, the storage ladder (one bar per priced plan, then Enterprise) and the support response table. */

.tm-platform-note {
    margin-top: 16px;
    font-size: 16px;
    color: var(--tm-text-muted);
}

.tm-platform-note a:not(.tm-btn):link,
.tm-platform-note a:not(.tm-btn):visited {
    font-weight: 700;
}

.tm-sub-h.tm-sub-h-small {
    font-size: clamp(28px, 3.4vw, 38px);
    line-height: 1.1;
}

.tm-split.tm-split-end {
    align-items: end;
}

.tm-sec-head + .tm-prose.tm-prose-snug {
    margin-top: 18px;
}

/* a highlight that stays on one line where there is room for it */
@media (min-width: 601px) {
    .tm-nowrap-wide {
        white-space: nowrap;
    }
}

/* the hero's ring card, framed in dark slate like the certificate card */
.tm-ring-card {
    max-width: 440px;
    margin-left: auto;
    padding: 30px 30px 26px;
    border: 2px solid var(--tm-frame-strong);
    border-radius: 24px;
    background: var(--tm-surface-raised);
    box-shadow: 0 0 0 1px var(--tm-frame-strong-ring), 0 0 44px var(--tm-frame-strong-glow);
}

.tm-ring {
    position: relative;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
    aspect-ratio: 1;
}

.tm-ring svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.tm-ring-seg {
    fill: none;
    stroke: var(--tm-ring-idle);
    stroke-width: 16;
    transition: stroke .5s;
}

.tm-ring-seg.is-done {
    stroke: var(--tm-ring-done);
}

.tm-ring-seg.is-now {
    stroke: var(--tm-accent);
    filter: drop-shadow(0 0 6px var(--tm-accent-glow-strong));
}

.tm-ring-hour {
    font-family: var(--tm-font-mono);
    font-size: 10px;
    letter-spacing: .06em;
    fill: var(--tm-text-muted);
}

.tm-ring-mid {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.tm-ring-mid b {
    font-size: 64px;
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--tm-text-strong);
}

.tm-ring-mid span {
    max-width: 16ch;
    margin-top: 6px;
    font-size: 15px;
    line-height: 1.35;
    color: var(--tm-text-muted);
}

.tm-ring-foot {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px dashed var(--tm-divider);
    font-size: 14.5px;
}

.tm-ring-foot span {
    color: var(--tm-text-muted);
}

.tm-ring-foot b {
    color: var(--tm-text-strong);
}

.tm-ring-cap {
    margin-top: 10px;
    font-size: 13px;
    color: var(--tm-text-muted);
}

/* the layers that keep it running */
.tm-stack {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tm-stack li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    border: 1px solid var(--tm-border);
    border-radius: 14px;
    background: var(--tm-surface-raised);
}

.tm-stack b {
    font-size: 16.5px;
    color: var(--tm-text-strong);
}

.tm-stack span {
    font-size: 14px;
    text-align: right;
    color: var(--tm-text-muted);
}

/* the status page panel: copy and what it covers beside the button, outlined in orange */
.tm-panel.tm-status {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 34px;
    border: 2px solid var(--tm-cta);
    box-shadow: 0 0 28px var(--tm-cta-tint-strong);
}

.tm-panel.tm-status p {
    margin-top: 12px;
    font-size: 17px;
}

.tm-status-covers {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
}

.tm-status-covers-label {
    margin-right: 4px;
    font-family: var(--tm-font-mono);
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tm-text-strong);
}

.tm-pill.tm-pill-accent {
    border-color: var(--tm-accent-chip-border);
    background: var(--tm-accent-tint);
    color: var(--tm-accent-strong);
}

/* storage ladder: rising bars, the last (Enterprise) striped and dashed */
.tm-ladder-box {
    margin-top: 26px;
}

.tm-ladder,
.tm-ladder-labels {
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    gap: 10px;
}

.tm-ladder {
    align-items: end;
    height: 190px;
    margin-top: 6px;
}

.tm-rung {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 22%;
    padding: 12px 6px;
    border: 1px solid var(--tm-bar-border);
    border-radius: 12px 12px 4px 4px;
    background: linear-gradient(180deg, var(--tm-accent-frame-glow), var(--tm-accent-soft-glow));
}

.tm-rung:nth-child(2) {
    height: 40%;
}

.tm-rung:nth-child(3) {
    height: 72%;
}

.tm-rung.tm-rung-enterprise {
    height: 100%;
    border-style: dashed;
    background: repeating-linear-gradient(135deg, var(--tm-accent-soft-glow) 0 8px, var(--tm-transparent) 8px 16px);
}

.tm-rung b {
    font-size: 18px;
    color: var(--tm-text-strong);
}

.tm-ladder-labels {
    margin-top: 8px;
    font-size: 13px;
    text-align: center;
    color: var(--tm-text-muted);
}

.tm-split p.tm-ladder-after {
    margin-top: 22px;
}

/* a callout with its own heading */
.tm-callout.tm-callout-titled {
    padding: 20px 22px 20px 18px;
}

.tm-callout-titled > div {
    padding-top: 6px;
}

.tm-callout-titled h3 {
    font-size: 19px;
}

.tm-split .tm-callout-titled p {
    margin-top: 6px;
    font-size: 16px;
}

/* support: hours, contact and escalation beside the response table and the P1 panel */
.tm-support {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    align-items: start;
    gap: 48px;
    margin-top: 40px;
}

.tm-support-item + .tm-support-item {
    margin-top: 26px;
}

.tm-support-item h3 {
    font-size: 19px;
}

.tm-support-item p {
    margin-top: 6px;
    font-size: 16.5px;
}

.tm-support-more {
    margin-top: 22px;
    font-size: 16px;
}

.tm-support-more a:not(.tm-btn):link,
.tm-support-more a:not(.tm-btn):visited {
    font-weight: 700;
}

.tm-sla {
    width: 100%;
    margin-top: 6px;
    overflow: hidden;
    border: 1.5px solid var(--tm-table-frame);
    border-radius: 18px;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--tm-surface-raised);
}

.tm-sla th,
.tm-sla td {
    padding: 15px 20px;
    border-bottom: 1px solid var(--tm-border);
    font-size: 15.5px;
    text-align: left;
    vertical-align: top;
}

.tm-sla tr:last-child td {
    border-bottom: none;
}

.tm-sla thead th {
    background: var(--tm-surface-sunken);
    font-family: var(--tm-font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tm-text-muted);
}

.tm-sla td:first-child {
    font-weight: 700;
    color: var(--tm-text-strong);
}

.tm-sla td:nth-child(2) {
    font-weight: 700;
    white-space: nowrap;
    color: var(--tm-accent-strong);
}

.tm-sla tr.tm-sla-critical td {
    background: var(--tm-table-row-cta);
}

.tm-sla tr.tm-sla-critical td:nth-child(2) {
    color: var(--tm-cta-strong);
}

.tm-panel.tm-panel-cta-edge {
    margin-top: 18px;
    border-color: var(--tm-cta-tag-border);
}

@media (max-width: 960px) {
    .tm-ring-card {
        margin: 0 auto;
    }
}

@media (max-width: 900px) {
    .tm-support {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

@media (max-width: 820px) {
    .tm-panel.tm-status {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .tm-sla td:nth-child(2) {
        white-space: normal;
    }

    .tm-sla th,
    .tm-sla td {
        padding: 12px 14px;
        font-size: 14.5px;
    }
}

/* ---------- AI Privacy Controls ----------
   The interactive personal data panel (_PersonalDataPanel with Interactive and CtaFrame), the wanted-versus-
   sensitive panel, the nested rule levels, the withholdable categories, the five blocked routes, the
   illustrative query history record, three panels, the access gate list. */

/* interactive panel: framed in orange; the settings are buttons; the sample record under it */
.tm-pd-panel.tm-pd-panel-cta {
    padding: 22px 24px 20px;
    border: 2px solid var(--tm-cta);
    box-shadow: 0 0 0 1px var(--tm-cta-tint), 0 0 44px var(--tm-cta-glow);
}

.tm-pd-panel-cta .tm-pd-row {
    padding: 11px 0;
}

button.tm-pd-state {
    font-family: var(--tm-font-mono);
    line-height: inherit;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
}

button.tm-pd-state:hover {
    border-color: var(--tm-accent);
}

button.tm-pd-state:focus-visible {
    outline: 2px solid var(--tm-accent);
    outline-offset: 2px;
}

.tm-pd-receives {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--tm-divider);
}

.tm-pd-receives-head {
    margin-bottom: 10px;
    font-size: 13.5px;
    color: var(--tm-text-muted);
}

.tm-pd-receives-head b {
    color: var(--tm-text-strong);
}

.tm-pd-sample {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}

.tm-pd-sample-who {
    flex: none;
    width: 68px;
    font-family: var(--tm-font-mono);
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tm-text-muted);
}

.tm-pd-field {
    padding: 4px 9px;
    border: 1px solid var(--tm-accent-chip-border);
    border-radius: 8px;
    background: var(--tm-accent-tint);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--tm-accent-strong);
    transition: background .25s, color .25s, border-color .25s;
}

.tm-pd-field.is-withheld {
    border-style: dashed;
    border-color: var(--tm-line-muted);
    background: transparent;
    color: var(--tm-field-placeholder);
    text-decoration: line-through;
}

/* rows of plain pills */
.tm-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.tm-chip-row .tm-pill {
    padding: 6px 13px;
    font-size: 13.5px;
}

/* what you want the AI to read, beside what sits next to it, with a caption across both */
.tm-side-by-side {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 34px;
    overflow: hidden;
    border: 1.5px solid var(--tm-table-frame);
    border-radius: 20px;
    background: var(--tm-surface-raised);
}

.tm-side-by-side > div {
    padding: 26px 28px;
}

.tm-side-by-side > div + div {
    border-left: 1px dashed var(--tm-table-frame);
}

.tm-side-by-side h3 {
    font-size: 17px;
}

.tm-side-wanted .tm-pill {
    border-color: var(--tm-cta-tag-border);
    color: var(--tm-cta-strong);
}

.tm-side-caption {
    grid-column: 1 / -1;
    padding: 16px 28px;
    border-top: 1px solid var(--tm-table-frame);
    background: var(--tm-surface-sunken);
    font-size: 15px;
}

.tm-side-caption strong {
    font-weight: 600;
    color: var(--tm-text-strong);
}

/* how it works: blocks of sub-heading and paragraphs, the left column a little wider */
.tm-split.tm-split-wide-left {
    grid-template-columns: 1.1fr .9fr;
}

.tm-rule-block + .tm-rule-block {
    margin-top: 44px;
}

.tm-rule-block .tm-sub-h {
    font-size: 24px;
}

.tm-rule-block p {
    max-width: 64ch;
    margin-top: 12px;
    font-size: 17px;
}

.tm-rule-block .tm-sub-h + p {
    margin-top: 10px;
}

/* the three levels of rule, each nested inside the one it overrides */
.tm-levels {
    margin-top: 22px;
}

.tm-level {
    padding: 18px 20px 20px;
    border: 1.5px solid var(--tm-border);
    border-radius: 18px;
    background: var(--tm-surface-raised);
}

.tm-levels > .tm-level {
    border-color: var(--tm-table-frame);
}

.tm-level .tm-level {
    margin-top: 14px;
    background: var(--tm-surface-page);
}

.tm-level .tm-level .tm-level {
    border-color: var(--tm-accent);
    background: var(--tm-surface-raised);
    box-shadow: 0 0 22px var(--tm-accent-frame-glow);
}

.tm-level b {
    display: block;
    font-size: 16.5px;
    color: var(--tm-text-strong);
}

.tm-level span {
    display: block;
    margin-top: 2px;
    font-size: 14.5px;
    color: var(--tm-text-muted);
}

.tm-level span.tm-level-overrides {
    margin-top: 0;
    font-family: var(--tm-font-mono);
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tm-cta-strong);
}

.tm-rule-block p.tm-levels-after {
    margin-top: 20px;
}

/* what you can withhold */
.tm-rule-block.tm-withhold {
    margin-top: 36px;
}

.tm-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 900px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.tm-categories li {
    padding: 7px 13px;
    border: 1px solid var(--tm-border);
    border-radius: 10px;
    background: var(--tm-surface-raised);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--tm-text);
}

.tm-callout.tm-callout-wide {
    max-width: 900px;
}

.tm-callout-wide p {
    font-size: 16px;
}

.tm-callout .tm-chip-row {
    margin-top: 10px;
}

/* hidden means hidden: five routes, three then two across */
.tm-routes {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    margin-top: 40px;
}

.tm-route {
    grid-column: span 2;
    padding: 24px;
    border: 1px solid var(--tm-border);
    border-radius: 16px;
    background: var(--tm-surface-raised);
}

.tm-route:nth-child(4),
.tm-route:nth-child(5) {
    grid-column: span 3;
}

.tm-route-lock {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-bottom: 14px;
    border: 1px solid var(--tm-bar-border);
    border-radius: 10px;
    background: var(--tm-accent-tint);
    color: var(--tm-accent-strong);
}

.tm-route-lock svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tm-route h3 {
    font-size: 17.5px;
    line-height: 1.25;
}

.tm-route p {
    margin-top: 8px;
    font-size: 15.5px;
    color: var(--tm-text-muted);
}

.tm-panel p.tm-panel-wide-text {
    max-width: 80ch;
}

/* the evidence section's two columns sit under its heading */
.tm-sec-head + .tm-split.tm-split-after-head {
    margin-top: 42px;
}

/* an illustrative AI Query History record */
.tm-query-record {
    padding: 22px 24px;
    border: 1px solid var(--tm-border);
    border-radius: 20px;
    background: var(--tm-surface-raised);
    box-shadow: 0 0 0 1px var(--tm-accent-soft-glow), 0 0 44px var(--tm-accent-frame-glow);
}

.tm-query-record-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 14px;
    border-bottom: 1px dashed var(--tm-divider);
    font-family: var(--tm-font-mono);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tm-text-strong);
}

.tm-query-record-head span {
    padding: 3px 10px;
    border: 1px solid var(--tm-accent-chip-border);
    border-radius: 999px;
    background: var(--tm-accent-tint);
    font-size: 11px;
    letter-spacing: .1em;
    color: var(--tm-accent-strong);
}

.tm-query-record dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px 18px;
    margin: 16px 0 0;
    font-size: 14.5px;
}

.tm-query-record dt {
    color: var(--tm-text-muted);
}

.tm-query-record dd {
    margin: 0;
    font-weight: 600;
    color: var(--tm-text-strong);
}

.tm-query-record code {
    display: inline-block;
    margin: 0 4px 4px 0;
    padding: 2px 7px;
    border-radius: 6px;
    background: var(--tm-surface-sunken);
    font-family: var(--tm-font-mono);
    font-size: 12.5px;
    font-weight: 500;
}

.tm-query-record-foot {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--tm-divider);
    font-size: 13.5px;
    color: var(--tm-text-muted);
}

/* three panels across; in an orange-led section they take an orange outline */
.tm-panels-three {
    grid-template-columns: repeat(3, 1fr);
    margin-top: 40px;
}

.tm-panels-three h3 {
    font-size: 19px;
}

.tm-panels-three .tm-panel p {
    font-size: 15.5px;
}

.tm-section-cta-led .tm-panels-three .tm-panel {
    border: 1.5px solid var(--tm-cta-tag-border);
}

/* ruled points with the tick in Tugger blue rather than orange */
.tm-guard-points.tm-guard-points-accent .tm-guard-tick {
    stroke: var(--tm-accent);
}

/* three conditions, numbered in circles */
.tm-gate {
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: tm-gate;
}

.tm-gate li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
    border-top: 1px solid var(--tm-divider);
    font-size: 16px;
}

.tm-gate li:last-child {
    border-bottom: 1px solid var(--tm-divider);
}

.tm-gate li::before {
    content: counter(tm-gate);
    counter-increment: tm-gate;
    display: flex;
    flex: 0 0 28px;
    align-items: center;
    justify-content: center;
    height: 28px;
    border: 1.5px solid var(--tm-accent);
    border-radius: 50%;
    font-size: 14px;
    font-weight: 700;
    color: var(--tm-accent-strong);
}

.tm-split p.tm-gate-after {
    margin-top: 18px;
    font-size: 16px;
}

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

    .tm-route,
    .tm-route:nth-child(4),
    .tm-route:nth-child(5) {
        grid-column: auto;
    }
}

@media (max-width: 900px) {
    .tm-split.tm-split-wide-left {
        grid-template-columns: 1fr;
    }
}

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

@media (max-width: 760px) {
    .tm-side-by-side {
        grid-template-columns: 1fr;
    }

    .tm-side-by-side > div + div {
        border-top: 1px dashed var(--tm-table-frame);
        border-left: none;
    }
}

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

/* ---------- forms (tm-form) ----------
   A form in a card framed by the slow blue ring (Sign In, Forgotten password, later Contact): heading and intro,
   an optional single sign-on button and "or" divider, an error alert, labelled fields with an inline message
   each (shown when the field gets is-invalid), a password show/hide toggle, and a full-width submit button. */

.tm-form-shell {
    position: relative;
}

.tm-form-halo {
    position: absolute;
    inset: -9px;
    border-radius: 30px;
    pointer-events: none;
    opacity: .7;
    filter: blur(17px);
    background: conic-gradient(from var(--tm-ring-angle), var(--tm-transparent) 0deg 118deg, var(--tm-ring-dark) 172deg, var(--tm-accent) 212deg, var(--tm-ring-light) 248deg, var(--tm-accent) 288deg, var(--tm-ring-dark) 322deg, var(--tm-transparent) 356deg 360deg);
    animation: tm-ring-spin 9s linear infinite;
}

.tm-form-frame {
    position: relative;
    padding: 3px;
    border-radius: 25px;
    background: conic-gradient(from var(--tm-ring-angle), var(--tm-divider) 0deg 118deg, var(--tm-ring-mid) 172deg, var(--tm-accent) 212deg, var(--tm-ring-pale) 248deg, var(--tm-accent) 288deg, var(--tm-ring-mid) 322deg, var(--tm-divider) 356deg);
    animation: tm-ring-spin 9s linear infinite;
}

.tm-form-card {
    padding: 34px 32px 30px;
    border-radius: 22px;
    background: var(--tm-surface-raised);
}

.tm-form-card h1 {
    font-size: 30px;
    line-height: 1.12;
    letter-spacing: -0.02em;
}

.tm-form-intro {
    margin-top: 8px;
    font-size: 16px;
}

.tm-form-intro a:not(.tm-btn):link,
.tm-form-intro a:not(.tm-btn):visited {
    font-weight: 700;
}

/* a sign-in method button ("Sign in with Xero", "Sign in with email") */
a.tm-sso-btn:link,
a.tm-sso-btn:visited,
button.tm-sso-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    margin-top: 24px;
    padding: 7px 20px;
    border: 1.5px solid var(--tm-border);
    border-radius: 999px;
    background: var(--tm-surface-raised);
    font-family: var(--tm-font-display);
    font-size: 17px;
    font-weight: 700;
    color: var(--tm-text-strong);
    text-decoration: none;
    cursor: pointer;
    transition: border-color .18s, box-shadow .18s;
}

a.tm-sso-btn:hover {
    border-color: var(--tm-sso-xero);
    box-shadow: 0 0 0 3px var(--tm-sso-xero-halo);
    text-decoration: none;
}

/* the provider's mark large enough that its own wordmark (the "xero" inside Xero's circle) stays readable */
.tm-sso-btn img {
    display: block;
    width: 44px;
    height: 44px;
}

/* a second choice after the "or" divider sits straight under it */
.tm-form-or + a.tm-sso-btn:link,
.tm-form-or + a.tm-sso-btn:visited,
.tm-form-or + button.tm-sso-btn {
    margin-top: 0;
}

/* the email choice: an envelope in a circle the size of the Xero mark, so the two buttons line up; Tugger blue on
   hover rather than Xero's */

.tm-sso-btn-email svg {
    display: block;
    flex: none;
    width: 44px;
    height: 44px;
    padding: 10px;
    border-radius: 50%;
    background: var(--tm-accent-tint);
    fill: none;
    stroke: var(--tm-accent-strong);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

button.tm-sso-btn.tm-sso-btn-email:hover {
    border-color: var(--tm-accent);
    box-shadow: 0 0 0 3px var(--tm-accent-focus-halo);
}

/* under the two choices: the nudge for people who signed up with Xero */
.tm-signin-choose-note {
    margin-top: 16px;
    font-size: 14px;
    text-align: center;
    color: var(--tm-text-muted);
}

.tm-signin-choose-note strong {
    font-weight: 600;
    color: var(--tm-text-strong);
}

/* back from the email form to the choice */
button.tm-form-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 22px 0 18px;
    padding: 0;
    border: none;
    background: none;
    font-family: var(--tm-font-display);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--tm-text-muted);
    cursor: pointer;
    transition: color .18s;
}

button.tm-form-back:hover {
    color: var(--tm-accent-strong);
}

.tm-form-back svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .18s;
}

button.tm-form-back:hover svg {
    transform: translateX(-3px);
}

.tm-form-or {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 22px 0 18px;
    font-size: 13.5px;
    color: var(--tm-text-muted);
}

.tm-form-or::before,
.tm-form-or::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--tm-border);
}

/* the error alert above the fields (e.g. a failed sign in); the hidden attribute hides it */
.tm-form-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1.5px solid var(--tm-alert-border);
    border-radius: 12px;
    background: var(--tm-alert-wash);
    font-size: 14.5px;
    line-height: 1.45;
    color: var(--tm-alert-text);
}

.tm-form-alert[hidden] {
    display: none;
}

.tm-form-alert svg {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.tm-field {
    margin-bottom: 14px;
}

.tm-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--tm-text);
}

.tm-field input[type="email"],
.tm-field input[type="text"],
.tm-field input[type="tel"],
.tm-field input[type="password"],
.tm-field textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1.5px solid var(--tm-border);
    border-radius: 12px;
    background: var(--tm-surface-raised);
    font-family: var(--tm-font-display);
    font-size: 16px;
    color: var(--tm-text-strong);
    transition: border-color .15s, box-shadow .15s;
}

.tm-field input::placeholder,
.tm-field textarea::placeholder {
    color: var(--tm-field-placeholder);
}

.tm-field input:hover,
.tm-field textarea:hover {
    border-color: var(--tm-field-hover);
}

.tm-field input:focus,
.tm-field textarea:focus {
    outline: none;
    border-color: var(--tm-accent);
    box-shadow: 0 0 0 3px var(--tm-accent-focus-halo);
}

.tm-field textarea {
    display: block;
    min-height: 128px;
    line-height: 1.5;
    resize: vertical;
}

/* a drop-down list: the text box's look, with a chevron drawn by two gradients (theme CSS never loads images) */
.tm-field select {
    width: 100%;
    padding: 12px 44px 12px 15px;
    border: 1.5px solid var(--tm-border);
    border-radius: 12px;
    background-color: var(--tm-surface-raised);
    background-image: linear-gradient(45deg, transparent 50%, var(--tm-text-muted) 50%), linear-gradient(135deg, var(--tm-text-muted) 50%, transparent 50%);
    background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
    background-size: 6px 6px;
    background-repeat: no-repeat;
    font-family: var(--tm-font-display);
    font-size: 16px;
    color: var(--tm-text-strong);
    appearance: none;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}

.tm-field select:hover {
    border-color: var(--tm-field-hover);
}

.tm-field select:focus {
    outline: none;
    border-color: var(--tm-accent);
    box-shadow: 0 0 0 3px var(--tm-accent-focus-halo);
}

.tm-field select[hidden] {
    display: none;
}

.tm-field.is-invalid select {
    border-color: var(--tm-field-invalid);
    box-shadow: 0 0 0 3px var(--tm-field-invalid-halo);
}

/* a required tick box (the terms): the consent row, with its error under it */
.tm-field-consent .tm-form-consent {
    margin-bottom: 0;
}

.tm-field-consent {
    margin: 4px 0 12px;
}

.tm-field-consent.is-invalid .tm-form-consent input {
    outline: 2px solid var(--tm-field-invalid);
    outline-offset: 2px;
}

/* a type-to-search picker drawn over a select (Sign Up's lead source): the text box, a chevron button and the
   matching answers in a list under it */
.tm-combo {
    position: relative;
}

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

.tm-field .tm-combo input[type="text"] {
    padding-right: 48px;
}

.tm-combo-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 9px;
    background: none;
    color: var(--tm-text-muted);
    cursor: pointer;
    transform: translateY(-50%);
}

.tm-combo-toggle:hover {
    color: var(--tm-accent-strong);
    background: var(--tm-accent-soft-glow);
}

.tm-combo-toggle svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .2s;
}

.tm-combo.is-open .tm-combo-toggle svg {
    transform: rotate(180deg);
}

.tm-combo-list {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 30;
    max-height: 264px;
    margin: 0;
    padding: 6px;
    overflow-y: auto;
    list-style: none;
    border: 1.5px solid var(--tm-border);
    border-radius: 12px;
    background: var(--tm-surface-raised);
    box-shadow: 0 14px 34px var(--tm-shadow);
}

.tm-combo.is-open .tm-combo-list {
    display: block;
}

.tm-combo-list li {
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 15.5px;
    line-height: 1.3;
    color: var(--tm-text-strong);
    cursor: pointer;
}

.tm-combo-list li:hover,
.tm-combo-list li.is-active {
    background: var(--tm-accent-soft-glow);
}

.tm-combo-list li[aria-selected="true"] {
    font-weight: 700;
}

.tm-combo-list li.tm-combo-none {
    font-size: 14.5px;
    color: var(--tm-text-muted);
    cursor: default;
}

.tm-combo-list li.tm-combo-none:hover {
    background: none;
}

/* two short fields side by side (first and last name), stacked on the narrowest phones. A flex row rather than a
   grid: password managers (NordPass and others) slip their own elements in beside the inputs, and in a grid each of
   those takes a cell and pushes the second field onto a new line; here they just sit in the row. */
.tm-field-pair {
    display: flex;
    gap: 14px;
}

.tm-field-pair > .tm-field {
    flex: 1 1 0;
    min-width: 0;
}

@media (max-width: 350px) {
    .tm-field-pair {
        flex-direction: column;
        gap: 0;
    }
}

/* the required marker after a label, and the "* Required field" key above the form */
.tm-req {
    margin-left: 3px;
    font-weight: 700;
    color: var(--tm-field-invalid);
}

.tm-form-key {
    margin-top: 14px;
    font-size: 13px;
    color: var(--tm-text-muted);
}

.tm-form-key .tm-req {
    margin: 0 3px 0 0;
}

/* inside a step, the key sits just above the first field */
.tm-form-step > .tm-form-key {
    margin-bottom: 14px;
}

/* a form in steps (fieldset[data-tm-step], components.js): the fieldsets carry no box of their own, the step bar
   lights up as each step is reached, and the rule between steps goes once only one shows at a time. Without the
   script every step shows and the bar stays hidden. */
.tm-form-step {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.tm-form-step[hidden] {
    display: none;
}

.tm-form-steps {
    display: none;
    gap: 8px;
    margin-bottom: 18px;
}

.tm-form.is-stepped .tm-form-steps {
    display: flex;
}

.tm-form-steps span {
    flex: 1;
    padding-top: 9px;
    border-top: 3px solid var(--tm-border);
    font-family: var(--tm-font-mono);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tm-text-muted);
    transition: color .2s, border-color .2s;
}

.tm-form-steps span.is-on {
    border-top-color: var(--tm-accent);
    font-weight: 600;
    color: var(--tm-accent-strong);
}

.tm-form.is-stepped .tm-form-rule {
    display: none;
}

/* the required-field key sits under the step bar, just above the first field */
.tm-form-steps + .tm-form-key {
    margin: 0 0 14px;
}

button.tm-btn.tm-form-submit[data-tm-step-next] {
    margin-top: 8px;
}

/* a consent tick box with its sentence beside it */
.tm-form-consent {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 4px 0 20px;
}

.tm-form-consent input {
    flex: none;
    width: 19px;
    height: 19px;
    margin: 2px 0 0;
    accent-color: var(--tm-accent);
}

.tm-form-consent label {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--tm-text-muted);
}

/* the small print under the submit button (privacy) */
.tm-form-note {
    margin-top: 14px;
    font-size: 13px;
    line-height: 1.55;
    text-align: center;
    color: var(--tm-text-muted);
}

.tm-form-note a:not(.tm-btn):link,
.tm-form-note a:not(.tm-btn):visited {
    color: var(--tm-accent-strong);
}

.tm-field.is-invalid input,
.tm-field.is-invalid textarea {
    border-color: var(--tm-field-invalid);
    box-shadow: 0 0 0 3px var(--tm-field-invalid-halo);
}

.tm-field-error {
    display: none;
    margin-top: 5px;
    font-size: 12.5px;
    color: var(--tm-field-error-text);
}

.tm-field.is-invalid .tm-field-error {
    display: block;
}

/* what a field needs, under it (e.g. the password rules) */
.tm-field-note {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--tm-text-muted);
}

/* a short note under a field, e.g. "Caps Lock is on" (hidden attribute until needed) */
.tm-field-hint {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--tm-cta-strong);
}

.tm-field-hint[hidden] {
    display: none;
}

/* a label with a link on the same line, e.g. Password / Forgot password? */
.tm-field-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.tm-field-label-row a:not(.tm-btn):link,
.tm-field-label-row a:not(.tm-btn):visited {
    margin-bottom: 6px;
    font-size: 13.5px;
    font-weight: 600;
}

.tm-password {
    position: relative;
}

.tm-field .tm-password input {
    padding-right: 54px;
}

.tm-password-toggle {
    position: absolute;
    top: 50%;
    right: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 9px;
    background: none;
    color: var(--tm-text-muted);
    cursor: pointer;
    transform: translateY(-50%);
    transition: color .15s, background .15s;
}

.tm-password-toggle:hover {
    background: var(--tm-accent-tint);
    color: var(--tm-accent-strong);
}

.tm-password-toggle svg {
    display: block;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tm-password-toggle .tm-password-hide,
.tm-password-toggle[aria-pressed="true"] .tm-password-show {
    display: none;
}

.tm-password-toggle[aria-pressed="true"] .tm-password-hide {
    display: block;
}

/* Google's reCAPTCHA checkbox (drawn by Google at its own fixed size) */
.tm-field-captcha {
    margin: 4px 0 18px;
}

button.tm-btn.tm-form-submit {
    width: 100%;
    margin-top: 4px;
    text-align: center;
}

.tm-form-secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
    font-size: 13px;
    color: var(--tm-text-muted);
}

.tm-form-secure svg {
    flex: none;
    width: 15px;
    height: 15px;
    fill: none;
    stroke: var(--tm-accent);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* a full-width link styled as the submit button (e.g. "Back to sign in" after a reset is sent) */
a.tm-btn.tm-form-submit:link,
a.tm-btn.tm-form-submit:visited {
    display: block;
    width: 100%;
    margin-top: 24px;
    text-align: center;
}

/* a line under a form ("Remembered it? Back to sign in"); the ruled variant sits apart above the card's foot */
.tm-form-foot {
    margin-top: 18px;
    font-size: 15px;
    text-align: center;
}

.tm-form-foot a:not(.tm-btn):link,
.tm-form-foot a:not(.tm-btn):visited {
    font-weight: 700;
}

.tm-form-foot-rule {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--tm-border);
    font-size: 14px;
    color: var(--tm-text-muted);
}

.tm-form-foot-rule img {
    display: inline-block;
    width: 28px;
    height: 28px;
    margin-right: 8px;
    vertical-align: middle;
}

/* a button that reads as a text link ("send it again") */
button.tm-link-btn {
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-weight: 700;
    color: var(--tm-accent-strong);
    cursor: pointer;
}

button.tm-link-btn:hover {
    text-decoration: underline;
}

/* Forgotten password: the intro kept to a readable width, and the "Check your inbox" step that replaces the form */
.tm-reset-intro {
    max-width: 36ch;
}

.tm-reset-form {
    margin-top: 24px;
}

.tm-reset-sent {
    text-align: center;
}

.tm-reset-sent-icon {
    display: block;
    width: 110px;
    height: 110px;
    margin: -10px auto 4px;
}

.tm-reset-sent h1,
.tm-reset-sent h2 {
    font-size: 30px;
    line-height: 1.12;
    letter-spacing: -0.02em;
}

.tm-reset-sent h2:focus {
    outline: none;
}

.tm-reset-sent > p.tm-form-foot {
    margin-top: 18px;
    font-size: 15px;
}

.tm-reset-sent > p {
    margin-top: 12px;
    font-size: 16px;
    line-height: 1.55;
}

.tm-reset-sent b {
    display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere;
    color: var(--tm-text-strong);
}

.tm-reset-sent > p.tm-reset-small {
    font-size: 14.5px;
    color: var(--tm-text-muted);
}

@media (prefers-reduced-motion: no-preference) {
    .tm-reset-sent:not([hidden]) {
        animation: tm-reset-in .45s cubic-bezier(.2, .7, .2, 1) both;
    }
}

@keyframes tm-reset-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 560px) {
    .tm-form-card {
        padding: 28px 22px 24px;
    }
}

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

    .tm-form-frame {
        background: var(--tm-border);
        animation: none;
    }
}

/* ---------- Sign In (User/Login) ----------
   Welcome copy and three ruled links (next live webinar or the webinars page, documentation, contact) beside the
   sign-in card; on a phone the card comes first and the welcome copy goes. Then "New to Tugger?" and testimonials. */

.tm-signin-hero {
    padding: 72px 0 96px;
}

.tm-signin-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 460px;
    align-items: center;
    gap: 76px;
}

.tm-signin-hi {
    font-size: clamp(54px, 7.4vw, 96px);
    font-weight: 700;
    line-height: .95;
    letter-spacing: -0.03em;
    color: var(--tm-text-strong);
}

.tm-signin-sub {
    max-width: 34ch;
    margin-top: 18px;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--tm-accent-strong);
}

.tm-signin-defs {
    position: absolute;
}

.tm-signin-links {
    max-width: 560px;
    margin: 40px 0 0;
    padding: 0;
    list-style: none;
}

.tm-signin-links li {
    border-top: 1px solid var(--tm-divider);
}

.tm-signin-links li:last-child {
    border-bottom: 1px solid var(--tm-divider);
}

.tm-signin-links a:link,
.tm-signin-links a:visited {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 2px;
    color: var(--tm-text);
    text-decoration: none;
}

.tm-signin-icon {
    display: block;
    flex: 0 0 84px;
    width: 84px;
    height: 84px;
    margin: -14px -8px -14px -14px;
}

.tm-signin-icon-glow {
    fill: var(--tm-accent);
    opacity: .38;
}

.tm-signin-icon-ring {
    fill: var(--tm-surface-raised);
    stroke: var(--tm-accent);
    stroke-width: 3.2;
}

.tm-signin-icon-art {
    fill: none;
    stroke: var(--tm-accent);
    stroke-width: 3.1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tm-signin-icon-art .tm-signin-icon-dots {
    stroke-width: 4.4;
}

.tm-signin-link-live .tm-signin-icon-glow {
    fill: var(--tm-cta);
    opacity: .34;
}

.tm-signin-link-live .tm-signin-icon-ring {
    stroke: var(--tm-cta);
}

.tm-signin-icon-dot-glow {
    fill: var(--tm-cta);
    opacity: .45;
}

.tm-signin-icon-dot {
    fill: var(--tm-cta);
}

@media (prefers-reduced-motion: no-preference) {
    .tm-signin-pulse {
        animation: tm-pd-pulse 2.6s ease-in-out infinite;
    }
}

.tm-signin-link-text {
    flex: 1;
    min-width: 0;
}

.tm-signin-link-text b {
    display: block;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--tm-text-strong);
    transition: color .18s;
}

.tm-signin-link-desc {
    display: block;
    margin-top: 1px;
    font-size: 14.5px;
    line-height: 1.45;
    color: var(--tm-text-muted);
}

.tm-signin-when {
    display: block;
    font-family: var(--tm-font-mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tm-cta);
}

.tm-signin-go {
    flex: none;
    color: var(--tm-accent);
    transition: transform .18s;
}

.tm-signin-go svg {
    display: block;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tm-signin-links a:hover .tm-signin-go {
    transform: translateX(3px);
}

.tm-signin-links a:hover b {
    color: var(--tm-accent-strong);
}

.tm-signin-link-live .tm-signin-go {
    color: var(--tm-cta);
}

.tm-signin-links .tm-signin-link-live a:hover b {
    color: var(--tm-cta-strong);
}

.tm-signin-shell {
    width: 100%;
}

/* New to Tugger? (the newsletter block's frame, with two buttons instead of the form) */
.tm-signin-new-copy {
    flex: 1 1 380px;
}

.tm-signin-new-copy p {
    max-width: 52ch;
    margin-top: 10px;
    font-size: 16px;
    color: var(--tm-text-muted);
}

.tm-signin-new-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* the block keeps its own space below, so the page ends well whether or not testimonials follow */
.tm-signin-new {
    padding-bottom: 96px;
}

.tm-signin-new + .tm-section-quotes {
    padding-top: 0;
}

/* desktop: the card's top lines up with the welcome heading, so opening the email form only grows the card
   downwards; the ruled links sit at the bottom of the hero */
@media (min-width: 981px) {
    .tm-signin-grid {
        align-items: stretch;
    }

    .tm-signin-shell {
        align-self: start;
    }

    .tm-signin-left {
        display: flex;
        flex-direction: column;
    }

    .tm-signin-links {
        margin-top: auto;
        padding-top: 40px;
    }
}

@media (max-width: 980px) {
    .tm-signin-hero {
        padding: 32px 0 64px;
    }

    .tm-signin-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .tm-signin-shell {
        order: -1;
        max-width: 520px;
        margin: 0 auto;
    }

    .tm-signin-hi,
    .tm-signin-sub {
        display: none;
    }

    .tm-signin-links {
        width: 100%;
        max-width: 520px;
        margin: 0 auto;
    }
}

/* ---------- Contact (Contact/Index, Contact/ThankYou) ----------
   The Sign In layout with a wider card: the ruled links (with the address as a plain row) beside the contact form,
   the colleague's portrait in the card's top corner with the heading flowing round it. Thank you swaps the form for
   the success card, the thumbs-up portrait centred above it. */

.tm-signin-links .tm-signin-link-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 2px;
    color: var(--tm-text);
}

.tm-signin-link-row .tm-signin-link-desc {
    line-height: 1.5;
}

/* the 24-unit drawings (support, phone, location), scaled up 2x: half the stroke to match the others */
.tm-signin-icon-art.tm-signin-icon-art-small {
    stroke-width: 1.55;
}

@media (min-width: 981px) {
    .tm-signin-grid.tm-signin-grid-wide {
        grid-template-columns: minmax(0, 1fr) 540px;
        gap: 60px;
    }

    /* the short success card sits at the top beside "Get in touch" rather than dropping to the bottom */
    .tm-signin-grid-wide .tm-signin-shell {
        align-self: end;
    }

    .tm-signin-grid-wide .tm-signin-shell:has(.tm-contact-sent) {
        align-self: start;
    }
}

@media (max-width: 980px) {
    .tm-signin-grid-wide .tm-signin-shell,
    .tm-signin-grid-wide .tm-signin-links {
        max-width: 580px;
    }
}

.tm-contact-avatar {
    float: right;
    display: block;
    width: 136px;
    height: 136px;
    margin: -12px -12px 6px 8px;
    border: 3px solid var(--tm-accent);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 35%, var(--tm-surface-raised) 0%, var(--tm-surface-elevated) 70%);
    box-shadow: 0 0 22px var(--tm-callout-border);
    object-fit: cover;
    object-position: 50% 0;
    shape-outside: circle(50%);
    shape-margin: 6px;
    pointer-events: none;
}

.tm-contact-form {
    clear: both;
    margin-top: 18px;
}

.tm-field-captcha.is-invalid .g-recaptcha {
    display: inline-block;
    border-radius: 3px;
    box-shadow: 0 0 0 3px var(--tm-field-invalid-halo), 0 0 0 1px var(--tm-field-invalid);
}

/* thank you: the portrait centred over the message, then the buttons */
.tm-contact-sent {
    text-align: center;
}

.tm-contact-sent .tm-contact-avatar {
    float: none;
    margin: 0 auto 18px;
}

.tm-contact-sent h1 {
    font-size: 30px;
}

.tm-contact-sent > p:not(.tm-form-foot):not(.tm-form-secure) {
    margin-top: 12px;
    font-size: 16px;
    line-height: 1.55;
}

a.tm-btn.tm-form-submit.tm-contact-home:link,
a.tm-btn.tm-form-submit.tm-contact-home:visited {
    margin-top: 12px;
}

@media (max-width: 560px) {
    .tm-contact-avatar {
        width: 96px;
        height: 96px;
        margin: -10px -8px 6px 10px;
    }

    .tm-contact-card h1 {
        font-size: 26px;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .tm-contact-sent > * {
        animation: tm-contact-in .45s cubic-bezier(.2, .7, .2, 1) both;
    }
}

@keyframes tm-contact-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
}

/* ---------- Connector Request (ConnectorRequest/Index, ConnectorRequest/ThankYou) ----------
   The Contact layout: the request card's icon is a puzzle piece in a ringed circle (a tick on the thank you page); a note under the software box says when we already connect to it,
   or it's on its way; then "Already on its way" (the shared coming soon grid) and testimonials. */

.tm-request-tile {
    float: right;
    display: block;
    width: 112px;
    height: 112px;
    margin: -20px -16px 0 6px;
    overflow: visible;
    shape-outside: circle(50%);
}

.tm-request-tile .tm-signin-icon-glow {
    opacity: .6;
}

.tm-request-tile-piece {
    fill: none;
    stroke: var(--tm-accent);
    stroke-width: 1.3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tm-request-tile-tick {
    display: none;
    fill: none;
    stroke: var(--tm-accent);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tm-request-tile.is-sent {
    float: none;
    margin: -14px auto 4px;
}

.tm-request-tile.is-sent .tm-request-tile-piece {
    display: none;
}

.tm-request-tile.is-sent .tm-request-tile-tick {
    display: inline;
}

/* we already connect to it (or it's coming): a tick in a circle, the names in bold, a link to the connector */
.tm-request-match {
    position: relative;
    margin-top: 10px;
    padding: 12px 14px 12px 44px;
    border: 1.5px solid var(--tm-callout-border);
    border-radius: 12px;
    background: var(--tm-callout-wash);
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--tm-text);
}

.tm-request-match[hidden] {
    display: none;
}

.tm-request-match::before {
    content: "";
    position: absolute;
    top: 13px;
    left: 14px;
    width: 20px;
    height: 20px;
    border: 1.5px solid var(--tm-accent);
    border-radius: 50%;
    background: var(--tm-surface-raised);
}

.tm-request-match::after {
    content: "";
    position: absolute;
    top: 19px;
    left: 20.5px;
    width: 8px;
    height: 4.5px;
    border-bottom: 1.8px solid var(--tm-accent);
    border-left: 1.8px solid var(--tm-accent);
    transform: rotate(-45deg);
}

.tm-request-match b {
    color: var(--tm-text-strong);
}

.tm-request-match a:link,
.tm-request-match a:visited {
    font-weight: 700;
    white-space: nowrap;
    color: var(--tm-accent-strong);
}

.tm-request-match-more {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    color: var(--tm-text-muted);
}

/* the rule between the request and the person asking */
.tm-form-rule {
    margin: 6px 0 20px;
    border: none;
    border-top: 1px solid var(--tm-divider);
}

.tm-request-soon .tm-sec-sub {
    max-width: 52ch;
}

.tm-request-soon .tm-conn-soon-grid {
    margin-top: 36px;
}

.tm-request-soon-foot {
    margin-top: 26px;
    font-size: 15.5px;
    color: var(--tm-text-muted);
}

.tm-request-soon-foot a:link,
.tm-request-soon-foot a:visited {
    font-weight: 700;
    color: var(--tm-accent-strong);
}

.tm-request-soon + .tm-section-quotes {
    padding-top: 0;
}

@media (max-width: 560px) {
    .tm-request-tile {
        width: 92px;
        height: 92px;
        margin: -16px -12px 0 4px;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .tm-request-match:not([hidden]) {
        animation: tm-contact-in .3s cubic-bezier(.2, .7, .2, 1) both;
    }
}

/* ---------- numbered cards ("01 AI Insights, live"): Book a Demo's "What you'll see" and the booked page's "Before
   the call" ---------- */
.tm-numbered {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 36px;
}

.tm-numbered-card {
    display: flex;
    flex-direction: column;
    padding: 26px 28px;
    border: 1.5px solid var(--tm-accent-tint-border);
    border-radius: 20px;
    background: var(--tm-surface-raised);
    transition: transform .2s, border-color .2s, box-shadow .2s;
}

.tm-numbered-card:hover {
    border-color: var(--tm-accent);
    box-shadow: 0 0 26px var(--tm-accent-frame-glow);
    transform: translateY(-3px);
}

.tm-numbered-num {
    display: block;
    font-family: var(--tm-font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .15em;
    color: var(--tm-cta);
}

.tm-numbered-card h3 {
    margin-top: 8px;
    font-size: 19px;
    line-height: 1.3;
}

.tm-numbered-card p {
    margin-top: 8px;
    font-size: 15.5px;
    color: var(--tm-text-muted);
}

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

@media (prefers-reduced-motion: reduce) {
    .tm-numbered-card,
    .tm-numbered-card:hover {
        transition: none;
        transform: none;
    }
}

/* ---------- Sign Up (SignUp/Index) ----------
   The Sign In layout: the promise, an AI Insights example (paused while the form is in use) and three facts beside
   the two-step sign-up card. On a phone the card comes first, under a one-line version of the promise. Then "Not
   ready to start a trial?" and testimonials two across. */

.tm-signup-hi {
    font-size: clamp(46px, 5.9vw, 78px);
    font-weight: 700;
    line-height: .95;
    letter-spacing: -0.03em;
    color: var(--tm-text-strong);
}

.tm-signup-mob {
    display: none;
}

.tm-signup-proof {
    max-width: 430px;
    margin-top: 36px;
}

.tm-signup-facts {
    max-width: 48ch;
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
}

.tm-signup-facts li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 9px 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--tm-text);
}

.tm-signup-facts li + li {
    border-top: 1px solid var(--tm-divider);
}

.tm-signup-tick {
    flex: none;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--tm-accent);
    border-radius: 50%;
    background: var(--tm-surface-raised);
    color: var(--tm-accent);
}

.tm-signup-tick svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tm-signup-card h1 {
    font-size: 30px;
    line-height: 1.12;
    letter-spacing: -0.02em;
}

.tm-signup-lede {
    margin-top: 9px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--tm-text);
}

.tm-signup-card .tm-form-intro {
    margin-bottom: 22px;
}

/* the password's error repeats its rules, so the note under it steps aside */
.tm-signup-form .tm-field.is-invalid .tm-field-note {
    display: none;
}

/* step 2: who the account is for, with Edit details */
.tm-signup-who {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding: 11px 15px;
    border: 1px solid var(--tm-callout-border);
    border-radius: 12px;
    background: var(--tm-callout-wash);
    font-size: 15px;
}

.tm-signup-who[hidden] {
    display: none;
}

.tm-signup-who b {
    color: var(--tm-text-strong);
}

.tm-signup-who button.tm-link-btn {
    font-size: 14px;
    font-weight: 600;
}

.tm-signup-after {
    margin-top: 16px;
    font-size: 13.5px;
    line-height: 1.55;
    text-align: center;
    color: var(--tm-text);
}

.tm-signup-after a:link,
.tm-signup-after a:visited {
    font-weight: 700;
    color: var(--tm-accent-strong);
}

.tm-signup-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 16px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.tm-signup-trust li {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--tm-text-muted);
}

.tm-signup-trust svg {
    flex: none;
    width: 14px;
    height: 14px;
    fill: none;
    stroke: var(--tm-accent);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* desktop: the card's top lines up with the headline, as on Sign In; the left column's own flex layout from Sign In
   would push the facts to the bottom, so it flows normally here */
@media (min-width: 981px) {
    .tm-signup-left {
        display: block;
    }
}

@media (max-width: 980px) {
    .tm-signup-mob {
        display: block;
        order: -2;
        max-width: 520px;
        margin: 0 auto;
        font-size: 27px;
        font-weight: 700;
        line-height: 1.1;
        letter-spacing: -0.02em;
        text-align: center;
        color: var(--tm-text-strong);
    }

    .tm-signup-hi {
        display: none;
    }

    .tm-signup-proof {
        max-width: 520px;
        margin: 0 auto;
    }

    .tm-signup-facts {
        max-width: 520px;
        margin-left: auto;
        margin-right: auto;
    }

    .tm-signup-grid {
        gap: 32px;
    }
}

/* ---------- Book a Demo (Demo/Index) ----------
   What the demo is beside the booking card: step 1 takes the booking form's details, step 2 holds HubSpot's calendar
   filled in with them. Then what you'll see, a customer's words beside the chat card, and "Not ready for a demo?". */

.tm-demo-hero {
    padding: 76px 0 88px;
}

.tm-demo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
}

.tm-demo-hero h1 {
    font-size: clamp(46px, 6vw, 76px);
    line-height: .99;
}

.tm-demo-sub {
    max-width: 30ch;
    margin-top: 18px;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--tm-accent-strong);
}

/* length, format, hard sell: small labels over bold values, between two dashed rules */
.tm-demo-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 34px;
    margin: 30px 0 0;
    padding: 18px 0;
    border-top: 1px dashed var(--tm-dashed-border);
    border-bottom: 1px dashed var(--tm-dashed-border);
}

.tm-demo-facts dt {
    font-family: var(--tm-font-mono);
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tm-text-muted);
}

.tm-demo-facts dd {
    margin: 3px 0 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--tm-text-strong);
}

.tm-demo-lede {
    max-width: 54ch;
    margin-top: 24px;
    font-size: 19px;
}

.tm-demo-intro .tm-compat {
    margin-top: 28px;
}

.tm-demo-intro .tm-compat-label {
    flex: 1 1 100%;
    margin-bottom: -2px;
}

/* the booking card stays in view beside the copy on a desktop */
.tm-demo-shell {
    position: sticky;
    top: 104px;
}

.tm-demo-shell .tm-form-card {
    padding: 40px 40px 34px;
}

.tm-demo-form h2 {
    font-size: 28px;
    line-height: 1.15;
}

.tm-field-optional {
    margin-left: 4px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--tm-field-placeholder);
}

.tm-demo-who {
    margin-top: 6px;
    font-size: 16px;
}

.tm-demo-who[hidden] {
    display: none;
}

.tm-demo-who b {
    color: var(--tm-text-strong);
}

/* HubSpot's calendar, edge to edge in the card */
.tm-demo-embed {
    min-height: 640px;
    margin: 14px -14px 0;
    overflow: hidden;
    border-radius: 14px;
}

/* while HubSpot's calendar loads: a spinner where it will appear */
.tm-demo-embed {
    position: relative;
}

.tm-demo-loading {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    border-radius: 14px;
    background: var(--tm-surface);
    font-size: 15px;
    color: var(--tm-text-muted);
}

.tm-demo-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--tm-accent-tint-border);
    border-top-color: var(--tm-accent);
    border-radius: 50%;
    animation: tm-spin .8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .tm-demo-spinner {
        animation: none;
    }
}

.tm-demo-embed .meetings-iframe-container {
    width: 100%;
}

.tm-demo-embed iframe {
    display: block;
    width: 100% !important;
    border: 0;
}

.tm-demo-logos {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 18px;
}

.tm-demo-logos img {
    display: block;
    width: 34px;
    height: 34px;
    padding: 5px;
    border: 1px solid var(--tm-border);
    border-radius: 10px;
    background: var(--tm-surface-raised);
    object-fit: contain;
}

.tm-demo-logos span {
    margin-left: 2px;
    font-family: var(--tm-font-mono);
    font-size: 12px;
    font-weight: 500;
    color: var(--tm-accent-strong);
}

/* a customer's words beside the chat card */
.tm-demo-proof {
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    gap: 56px;
    align-items: center;
    margin-top: 84px;
}

.tm-demo-proof .tm-quote {
    margin: 0;
}

/* not ready: the next live webinar as a small card, or a button to the webinars page */
.tm-demo-notready {
    align-items: center;
    margin-top: 72px;
}

.tm-demo-notready-copy {
    flex: 1 1 360px;
}

.tm-demo-notready-copy p {
    max-width: 52ch;
    margin-top: 10px;
    font-size: 16px;
    color: var(--tm-text-muted);
}

p.tm-demo-notready-ask {
    margin-top: 16px;
    font-size: 15px;
}

.tm-demo-notready-ask a:link,
.tm-demo-notready-ask a:visited {
    font-weight: 600;
    color: var(--tm-accent-strong);
}

a.tm-demo-webinar:link,
a.tm-demo-webinar:visited {
    display: flex;
    flex: 0 1 430px;
    align-items: stretch;
    overflow: hidden;
    border: 2px solid var(--tm-cta);
    border-radius: 18px;
    background: var(--tm-surface-raised);
    color: var(--tm-text);
    text-decoration: none;
    transition: transform .2s, box-shadow .2s;
}

a.tm-demo-webinar:hover {
    box-shadow: 0 0 30px var(--tm-upcoming-glow);
    transform: translateY(-3px);
}

.tm-demo-webinar-image {
    position: relative;
    flex: 0 0 42%;
    background: var(--tm-surface-inverse);
}

.tm-demo-webinar-image img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tm-demo-webinar-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 16px 18px;
}

.tm-demo-webinar-date {
    margin-top: 2px;
    font-family: var(--tm-font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tm-cta);
}

.tm-demo-webinar-body b {
    font-size: 16.5px;
    line-height: 1.25;
    color: var(--tm-text-strong);
}

.tm-demo-webinar-go {
    margin-top: auto;
    padding-top: 4px;
    font-size: 15px;
    font-weight: 700;
    color: var(--tm-cta);
}

@media (max-width: 980px) {
    .tm-demo-hero {
        padding: 32px 0 64px;
    }

    .tm-demo-grid,
    .tm-demo-proof {
        grid-template-columns: 1fr;
    }

    .tm-demo-shell {
        position: relative;
        top: auto;
        width: 100%;
        max-width: 580px;
    }
}

@media (max-width: 560px) {
    .tm-demo-shell .tm-form-card {
        padding: 30px 22px 26px;
    }

    .tm-demo-facts {
        display: grid;
        grid-template-columns: repeat(3, auto);
        justify-content: start;
        gap: 14px;
    }

    .tm-demo-facts dd {
        font-size: 15px;
        white-space: nowrap;
    }

    .tm-demo-lede {
        font-size: 17.5px;
    }

    a.tm-demo-webinar:link,
    a.tm-demo-webinar:visited {
        flex-direction: column;
    }

    .tm-demo-webinar-image {
        flex: none;
        aspect-ratio: 16 / 9;
    }
}

@media (prefers-reduced-motion: reduce) {
    a.tm-demo-webinar:hover {
        transform: none;
    }
}

/* ---------- status header (_StatusHero) ----------
   Demo booked, Page not found, Error and Billing Cancelled: a ringed drawing drawn on as the page opens, the eyebrow,
   heading, a line in the accent colour and an optional paragraph, centred. */

.tm-status-hero {
    padding: 96px 0 84px;
    text-align: center;
}

.tm-status-icon {
    display: block;
    width: 110px;
    height: 110px;
    margin: 0 auto 14px;
    overflow: visible;
}

.tm-status-icon-glow {
    fill: var(--tm-accent-faint-glow);
}

.tm-status-icon-ring {
    fill: var(--tm-surface-raised);
    stroke: var(--tm-accent);
    stroke-width: 3.2;
}

.tm-status-icon-mark {
    fill: none;
    stroke: var(--tm-accent);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: tm-status-draw .7s .25s cubic-bezier(.4, 0, .2, 1) forwards;
}

@keyframes tm-status-draw {
    to {
        stroke-dashoffset: 0;
    }
}

.tm-status-hero h1 {
    max-width: 16ch;
    margin: 0 auto;
    font-size: clamp(44px, 6vw, 76px);
    line-height: 1;
}

.tm-status-sub {
    max-width: 44ch;
    margin: 18px auto 0;
    font-size: 21px;
    font-weight: 600;
    color: var(--tm-accent-strong);
}

.tm-status-lede {
    max-width: 52ch;
    margin: 16px auto 0;
    font-size: 18px;
}

@media (max-width: 640px) {
    .tm-status-hero {
        padding: 56px 0 56px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tm-status-icon-mark {
        animation: none;
        stroke-dashoffset: 0;
    }
}

.tm-status-lede a:link,
.tm-status-lede a:visited {
    font-weight: 600;
    color: var(--tm-accent-strong);
}

/* the ruled links as tiles across the page (SideLinksModel.Grid: Page not found, Error, Billing Cancelled): each
   link a bordered tile, three to a row, two on a tablet, one on a phone */
.tm-signin-links.tm-signin-links-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    max-width: none;
    margin: 0;
    padding-top: 0;
}

/* under a section heading (Page not found, Billing Cancelled) at every width: Sign In's desktop-only padding-top
   would otherwise leave the tiles touching the heading on a tablet or phone */
.tm-sec-head ~ .tm-signin-links.tm-signin-links-grid {
    margin-top: 40px;
}

.tm-signin-links-grid li,
.tm-signin-links-grid li:last-child {
    border: 1px solid var(--tm-border);
    border-radius: 16px;
    background: var(--tm-surface-raised);
    transition: border-color .15s, box-shadow .15s;
}

.tm-signin-links-grid li:hover {
    border-color: var(--tm-accent);
    box-shadow: 0 10px 28px var(--tm-shadow);
}

.tm-signin-links.tm-signin-links-grid a:link,
.tm-signin-links.tm-signin-links-grid a:visited {
    height: 100%;
    padding: 16px 18px 16px 12px;
}

@media (max-width: 980px) {
    .tm-signin-links.tm-signin-links-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .tm-signin-links.tm-signin-links-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- Demo booked (Demo/DemoBooked) ---------- */

.tm-booked-move {
    margin-top: 30px;
    font-size: 16.5px;
}

.tm-booked-move a:link,
.tm-booked-move a:visited {
    font-weight: 600;
    color: var(--tm-accent-strong);
}

/* ---------- scroll reveal ----------
   Opt-in with data-tm-reveal. Only armed once components.js adds tm-reveal-on to <html>, so without
   JavaScript (or with reduced motion) nothing is ever hidden. */

.tm-reveal-on [data-tm-reveal] {
    opacity: 0;
    transform: translateY(38px) scale(.985);
    transition: opacity .5s cubic-bezier(.22, .61, .36, 1), transform .55s cubic-bezier(.22, .61, .36, 1);
}

.tm-reveal-on [data-tm-reveal].is-revealed {
    opacity: 1;
    transform: none;
}

/* ---------- responsive ---------- */

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

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

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

    .tm-chat-body {
        min-height: 0;
    }
}

@media (max-width: 760px) {
    .tm-questions,
    .tm-steps {
        grid-template-columns: 1fr;
    }

    .tm-climb-line {
        display: none;
    }

    .tm-step:nth-child(n) {
        margin-top: 0;
    }
}

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

    .tm-marquee-band {
        margin-right: -20px;
        margin-left: -20px;
    }

    .tm-way {
        padding: 26px 22px;
    }

    .tm-story-body {
        padding: 22px 22px 0;
    }

    .tm-story {
        padding-bottom: 26px;
    }

    .tm-price {
        gap: 24px;
        padding: 30px 24px;
    }

    .tm-price-amount {
        font-size: 46px;
    }

    .tm-final-block {
        padding: 56px 22px;
    }

    .tm-legal {
        padding: 48px 0 72px;
    }

    .tm-legal-inner {
        padding: 0 20px;
    }

    .tm-legal h2 {
        margin-top: 36px;
        font-size: 21px;
    }

    .tm-chat-mascot {
        right: -14px;
        width: 112px;
    }
}

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

@media (max-width: 640px) {
    .tm-section {
        padding: 64px 0;
    }

    .tm-hero {
        padding: 72px 0 52px;
    }

    .tm-chat {
        padding: 18px;
    }
}

/* ---------- webinars (#2626): the featured session, status pills and webinar cards ---------- */

/* an upcoming session's feature ring turns orange, as the orange chat ring does: orange only ever means upcoming */
.tm-feature-upcoming .tm-feature-halo {
    opacity: .62;
    background: conic-gradient(from var(--tm-ring-angle), var(--tm-transparent) 0deg 118deg, var(--tm-cta-ring-dark) 172deg, var(--tm-cta) 212deg, var(--tm-cta-ring-light) 248deg, var(--tm-cta) 288deg, var(--tm-cta-ring-dark) 322deg, var(--tm-transparent) 356deg 360deg);
}

.tm-feature-upcoming .tm-feature-frame {
    background: conic-gradient(from var(--tm-ring-angle), var(--tm-cta-ring-rest) 0deg 118deg, var(--tm-cta-gradient-bottom) 172deg, var(--tm-cta-ring-mid) 212deg, var(--tm-cta-ring-pale) 248deg, var(--tm-cta-ring-mid) 288deg, var(--tm-cta-gradient-bottom) 322deg, var(--tm-cta-ring-rest) 356deg);
}

.tm-feature-upcoming .tm-feature-card {
    box-shadow: 0 0 28px var(--tm-cta-block-glow-warm);
}

/* the status pill sits on the featured image's top-left corner */
.tm-webinar-feature .tm-feature-image .tm-webinar-status {
    position: absolute;
    z-index: 1;
    top: 14px;
    left: 14px;
    box-shadow: 0 2px 10px var(--tm-card-shadow);
}

.tm-webinar-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.tm-webinar-free {
    padding: 5px 14px;
    border: 1.5px solid var(--tm-cta);
    border-radius: 999px;
    background: var(--tm-surface-raised);
    box-shadow: 0 0 14px var(--tm-cta-tint-strong);
    font-family: var(--tm-font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tm-cta-strong);
}

/* Date, Time, Length, Starts in: two by two */
.tm-webinar-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;
    margin: 24px 0 0;
    padding-top: 20px;
    border-top: 1px dashed var(--tm-dashed-border);
}

.tm-webinar-facts dt {
    font-family: var(--tm-font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tm-text-muted);
}

.tm-webinar-facts dd {
    margin: 3px 0 0;
    font-size: 16.5px;
    font-weight: 700;
    color: var(--tm-text-strong);
}

/* above the title's stretched link, so they stay clickable */
.tm-webinar-ctas {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

/* status pills: Upcoming live (orange, with the pulsing dot) and On demand (blue) */
.tm-webinar-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--tm-surface-raised);
    font-family: var(--tm-font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.tm-webinar-status-up {
    border: 1.5px solid var(--tm-cta-pill-border);
    color: var(--tm-cta-strong);
}

.tm-webinar-status-rec {
    border: 1.5px solid var(--tm-accent-tint-border);
    color: var(--tm-accent-strong);
}

.tm-live-dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tm-cta);
    box-shadow: 0 0 10px var(--tm-cta-glow);
}

@media (prefers-reduced-motion: no-preference) {
    .tm-live-dot {
        animation: tm-live-pulse 2.6s ease-in-out infinite;
    }
}

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

    50% {
        opacity: .45;
        transform: scale(.8);
    }
}

/* the webinar card: a recording framed in blue, an upcoming session in orange */
.tm-webinar-card {
    padding-bottom: 28px;
    border: 1.5px solid var(--tm-recorded-frame);
}

.tm-webinar-card:hover {
    border-color: var(--tm-accent);
    box-shadow: 0 0 26px var(--tm-card-frame-glow);
}

.tm-webinar-card .tm-story-body {
    padding: 22px 26px 0;
}

.tm-webinar-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.tm-webinar-card p.tm-webinar-when {
    flex: none;
    margin-top: 0;
    font-family: var(--tm-font-mono);
    font-size: 11.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tm-text-muted);
}

.tm-webinar-card h3 {
    margin-top: 8px;
    font-size: 19px;
    line-height: 1.3;
}

.tm-webinar-card p.tm-webinar-intro {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 10px;
    font-size: 15px;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.tm-webinar-card .tm-story-link {
    color: var(--tm-accent);
    transition: color .18s;
}

.tm-webinar-card:hover .tm-story-link {
    color: var(--tm-accent-strong);
}

/* an upcoming session's card sits in a spinning orange ring: the featured card's halo and frame, smaller */
.tm-webinar-ring {
    position: relative;
    display: flex;
    transition: transform .18s;
}

.tm-webinar-ring:hover {
    transform: translateY(-3px);
}

.tm-webinar-ring-halo {
    position: absolute;
    inset: -8px;
    border-radius: 28px;
    pointer-events: none;
    opacity: .55;
    filter: blur(16px);
    background: conic-gradient(from var(--tm-ring-angle), var(--tm-transparent) 0deg 118deg, var(--tm-cta-ring-dark) 172deg, var(--tm-cta) 212deg, var(--tm-cta-ring-light) 248deg, var(--tm-cta) 288deg, var(--tm-cta-ring-dark) 322deg, var(--tm-transparent) 356deg 360deg);
    animation: tm-ring-spin 9s linear infinite;
}

.tm-webinar-ring-frame {
    position: relative;
    display: flex;
    flex: 1;
    padding: 2.5px;
    border-radius: 22.5px;
    background: conic-gradient(from var(--tm-ring-angle), var(--tm-cta-ring-rest) 0deg 118deg, var(--tm-cta-gradient-bottom) 172deg, var(--tm-cta-ring-mid) 212deg, var(--tm-cta-ring-pale) 248deg, var(--tm-cta-ring-mid) 288deg, var(--tm-cta-gradient-bottom) 322deg, var(--tm-cta-ring-rest) 356deg);
    animation: tm-ring-spin 9s linear infinite;
}

.tm-webinar-ring-frame .tm-webinar-upcoming {
    flex: 1;
    border: none;
    background: var(--tm-surface-raised);
    box-shadow: 0 0 26px var(--tm-upcoming-glow);
}

.tm-webinar-upcoming p.tm-webinar-when,
.tm-webinar-upcoming .tm-story-link,
.tm-webinar-upcoming:hover .tm-story-link {
    color: var(--tm-cta-strong);
}

/* ---------- reduced motion: final state, nothing moving ---------- */

@media (prefers-reduced-motion: reduce) {
    .tm-chat-halo,
    .tm-feature-halo {
        display: none;
    }

    .tm-chat-frame,
    .tm-feature-frame,
    .tm-chat-shell-cta .tm-chat-frame {
        background: var(--tm-border);
        animation: none;
    }

    .tm-chat-shell-example .tm-chat-frame {
        background: none;
    }

    .tm-feature-upcoming .tm-feature-frame,
    .tm-webinar-ring-frame {
        background: var(--tm-cta);
        animation: none;
    }

    .tm-webinar-ring-halo {
        display: none;
    }

    .tm-webinar-ring,
    .tm-webinar-ring:hover {
        transition: none;
        transform: none;
    }

    .tm-chat-turn,
    .tm-chat-answer,
    .tm-video-play,
    .tm-video-play::after {
        transition: none;
        animation: none;
    }

    .tm-chat.is-typing .tm-chat-caret {
        display: none;
    }

    /* connectors: every tile shown at once, wrapped, nothing sliding */
    .tm-marquee-band {
        margin: 36px 0 0;
        padding: 0;
        overflow: visible;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .tm-marquee-track {
        width: auto;
        flex-wrap: wrap;
        animation: none;
    }

    .tm-marquee-group {
        flex: 1 1 100%;
        flex-wrap: wrap;
        min-width: 0;
        padding-right: 0;
    }

    .tm-marquee-group[aria-hidden="true"] {
        display: none;
    }

    .tm-marquee + .tm-marquee {
        margin-top: 10px;
    }

    .tm-connector-tile,
    .tm-connector-tile img,
    .tm-card-lift,
    .tm-item-photo,
    .tm-chat-mascot,
    .tm-climb-head {
        transition: none;
        animation: none;
    }

    .tm-story:hover .tm-item-photo,
    .tm-feature-card:hover .tm-item-photo {
        transform: none;
    }

    .tm-climb-dot {
        display: none;
    }

    .tm-final-halo {
        display: none;
    }

    .tm-final-frame {
        background: var(--tm-border);
        animation: none;
    }
}

/* ---------- partner programme (/Partners, #2580) ----------
   The hero's earnings card in an orange ring, the ring-icon cards, the four-step timeline, and the phones' sticky bar
   (tm-mbar, generic: the Apply page uses it too). The figures in the markup come from the agreement and Schedule 1. */

/* the hero holds the glow round the earnings card, which would otherwise run past a phone's edge */
.tm-pp-hero {
    overflow-x: clip;
}

/* the earnings card's ring is orange, as the closing box's */
.tm-pp-earn-shell .tm-form-halo {
    opacity: .6;
    background: conic-gradient(from var(--tm-ring-angle), var(--tm-transparent) 0deg 118deg, var(--tm-cta-ring-dark) 172deg, var(--tm-cta) 212deg, var(--tm-cta-ring-light) 248deg, var(--tm-cta) 288deg, var(--tm-cta-ring-dark) 322deg, var(--tm-transparent) 356deg 360deg);
}

.tm-pp-earn-shell .tm-form-frame {
    background: conic-gradient(from var(--tm-ring-angle), var(--tm-cta-ring-rest) 0deg 118deg, var(--tm-cta-gradient-bottom) 172deg, var(--tm-cta-ring-mid) 212deg, var(--tm-cta-ring-pale) 248deg, var(--tm-cta-ring-mid) 288deg, var(--tm-cta-gradient-bottom) 322deg, var(--tm-cta-ring-rest) 356deg);
}

.tm-pp-earn {
    margin: 0;
    padding: 22px 24px 20px;
    border-radius: 22px;
    background: var(--tm-surface-raised);
}

.tm-pp-earn-head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding-bottom: 14px;
    border-bottom: 1px dashed var(--tm-dashed-border);
    font-family: var(--tm-font-mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--tm-text-strong);
}

.tm-pp-earn-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tm-cta);
    box-shadow: 0 0 10px var(--tm-cta-glow);
}

/* one dot per Full Rate month, then half as many fading out for the residual; each part is as wide as its dots */
.tm-pp-run {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3px;
    margin-top: 20px;
}

.tm-pp-dots {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: 3px;
}

.tm-pp-dots i {
    display: block;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--tm-cta);
}

/* the residual dots fade out to the right (components.js sets --f from 0 to 1; without it they sit at a steady half) */
.tm-pp-run-after .tm-pp-dots i {
    opacity: calc(.55 - var(--f, .2) * .5);
}

.tm-pp-run-label {
    display: block;
    margin-top: 12px;
    padding-right: 10px;
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--tm-text-muted);
}

.tm-pp-run-label b {
    display: block;
    font-size: 14.5px;
    color: var(--tm-text-strong);
}

.tm-pp-tiers {
    width: 100%;
    margin: 18px 0 4px;
    border: 1.5px solid var(--tm-border);
    border-radius: 14px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    font-size: 15px;
}

.tm-pp-tiers th {
    padding: 12px 10px;
    background: var(--tm-surface-elevated);
    font-family: var(--tm-font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-align: center;
    color: var(--tm-text-muted);
}

.tm-pp-tiers th:first-child {
    text-align: left;
}

.tm-pp-tiers td {
    padding: 13px 10px;
    border-top: 1px solid var(--tm-border);
    font-weight: 600;
    text-align: center;
    color: var(--tm-text-strong);
}

.tm-pp-tiers td:first-child {
    font-weight: 500;
    text-align: left;
    color: var(--tm-text);
}

.tm-pp-tiers td.tm-pp-hi {
    color: var(--tm-cta-strong);
}

.tm-pp-tiers td.tm-pp-soft {
    font-size: 14px;
    font-weight: 500;
    color: var(--tm-text);
}

.tm-pp-tiers td.tm-pp-none {
    font-weight: 500;
    color: var(--tm-line-muted);
}

.tm-pp-earn-foot {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--tm-dashed-border);
    font-size: 14.5px;
    color: var(--tm-text-muted);
}

@media (prefers-reduced-motion: no-preference) {
    /* the dots switch on one by one, left to right, with a small pop (components.js adds is-playing and sets --i) */
    .tm-pp-run.is-playing .tm-pp-dots i {
        animation: tm-pp-dot-on .45s cubic-bezier(.3, .7, .4, 1.4) both;
        animation-delay: calc(var(--i, 0) * 70ms);
    }

    .tm-pp-earn-dot {
        animation: tm-pp-dot-pulse 2.4s ease-in-out infinite;
    }
}

@keyframes tm-pp-dot-on {
    0% {
        background: var(--tm-ring-idle);
        transform: scale(.55);
    }

    100% {
        background: var(--tm-cta);
        transform: none;
    }
}

@keyframes tm-pp-dot-pulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: .55;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tm-pp-earn-shell .tm-form-frame {
        background: var(--tm-cta);
    }
}

/* section text widths and the line under a section's cards */
.tm-pp-sec .tm-sec-body {
    max-width: 62ch;
}

.tm-pp-kicker {
    max-width: 60ch;
    margin-top: 30px;
    font-size: 18px;
    font-weight: 600;
    color: var(--tm-text-strong);
}

.tm-pp-kicker.tm-pp-kicker-quiet {
    margin-top: 40px;
    font-size: 16.5px;
    font-weight: 500;
    color: var(--tm-text-muted);
}

/* four question cards across (two on a tablet, one on a phone) */
.tm-questions.tm-questions-four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

/* cards with a ring icon beside the heading */
.tm-pp-card {
    display: flex;
    flex-direction: column;
}

.tm-pp-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.tm-pp-head h3 {
    margin: 0;
    font-size: 21px;
    line-height: 1.25;
}

.tm-pp-ico {
    flex: none;
    width: 52px;
    height: 52px;
    margin: -4px 0 -4px -4px;
    filter: drop-shadow(0 0 5px var(--tm-accent-glow));
}

.tm-pp-ico circle,
.tm-pp-ico g {
    fill: none;
    stroke: var(--tm-accent);
    stroke-width: 2.05;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tm-pp-ico > circle {
    fill: var(--tm-surface-raised);
    stroke-width: 2.4;
}

/* "You bring the client" is the orange section */
.tm-pp-orange .tm-hl {
    color: var(--tm-cta);
}

.tm-pp-orange .tm-sec-sub {
    color: var(--tm-text-strong);
}

.tm-pp-orange .tm-pp-ico {
    filter: drop-shadow(0 0 5px var(--tm-cta-glow));
}

.tm-pp-orange .tm-pp-ico circle,
.tm-pp-orange .tm-pp-ico g {
    stroke: var(--tm-cta);
}

.tm-pp-orange .tm-ticks li::before {
    border-color: var(--tm-cta);
}

/* four steps on a dashed line; when in view a light runs along it and each step lights as it arrives, all four
   hold, then reset together (a 6s loop; components.js adds is-playing) */
.tm-pp-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin: 48px 0 0;
    padding: 0;
    list-style: none;
}

.tm-pp-steps::before {
    content: "";
    position: absolute;
    top: 29px;
    right: 12.5%;
    left: 12.5%;
    border-top: 2px dashed var(--tm-accent);
    opacity: .55;
}

.tm-pp-step {
    position: relative;
    z-index: 1;
    text-align: center;
}

.tm-pp-node {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin: 0 auto;
    border: 2px solid var(--tm-accent);
    border-radius: 50%;
    background: var(--tm-surface-raised);
    box-shadow: 0 0 0 6px var(--tm-surface-page), 0 0 22px var(--tm-accent-glow);
    font-family: var(--tm-font-mono);
    font-size: 14px;
    font-weight: 600;
    color: var(--tm-accent-strong);
}

.tm-pp-step h3 {
    margin-top: 18px;
    font-size: 20px;
}

.tm-pp-step p {
    max-width: 26ch;
    margin: 6px auto 0;
    font-size: 15px;
    color: var(--tm-text-muted);
}

.tm-pp-steps::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: 28px;
    left: 12.5%;
    width: 110px;
    height: 4px;
    margin-left: -110px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--tm-transparent), var(--tm-accent) 88%, var(--tm-climb-flash));
    box-shadow: 0 0 12px var(--tm-accent-glow);
    opacity: 0;
    pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
    .tm-pp-steps.is-playing::after {
        animation: tm-pp-comet 6s linear infinite;
    }

    .tm-pp-steps.is-playing .tm-pp-node {
        animation: 6s ease-out infinite;
    }

    .tm-pp-steps.is-playing .tm-pp-step:nth-child(1) .tm-pp-node {
        animation-name: tm-pp-hit-1;
    }

    .tm-pp-steps.is-playing .tm-pp-step:nth-child(2) .tm-pp-node {
        animation-name: tm-pp-hit-2;
    }

    .tm-pp-steps.is-playing .tm-pp-step:nth-child(3) .tm-pp-node {
        animation-name: tm-pp-hit-3;
    }

    .tm-pp-steps.is-playing .tm-pp-step:nth-child(4) .tm-pp-node {
        animation-name: tm-pp-hit-4;
    }
}

/* the light crosses the line in the first 60% of the loop: step 1 at 0%, 2 at 20%, 3 at 40%, 4 at 60% */
@keyframes tm-pp-comet {
    0% {
        left: 12.5%;
        opacity: 0;
    }

    4% {
        opacity: 1;
    }

    60% {
        left: 87.5%;
        opacity: 1;
    }

    66%, 100% {
        left: 87.5%;
        opacity: 0;
    }
}

/* each step lights as the light reaches it and stays lit until all four reset together near the end of the loop */
@keyframes tm-pp-hit-1 {
    0%, 92% {
        border-color: var(--tm-accent);
        background: var(--tm-accent);
        color: var(--tm-text-inverse);
    }
}

@keyframes tm-pp-hit-2 {
    0%, 19% {
        background: var(--tm-surface-raised);
        color: var(--tm-accent-strong);
    }

    20%, 92% {
        background: var(--tm-accent);
        color: var(--tm-text-inverse);
    }
}

@keyframes tm-pp-hit-3 {
    0%, 39% {
        background: var(--tm-surface-raised);
        color: var(--tm-accent-strong);
    }

    40%, 92% {
        background: var(--tm-accent);
        color: var(--tm-text-inverse);
    }
}

@keyframes tm-pp-hit-4 {
    0%, 59% {
        background: var(--tm-surface-raised);
        color: var(--tm-accent-strong);
    }

    60%, 92% {
        background: var(--tm-accent);
        color: var(--tm-text-inverse);
    }
}

/* ---------- sticky bar for phones (tm-mbar) ----------
   A call to action fixed to the foot of the screen below 980px, slid away while the element named by
   data-tm-mbar is on screen (components.js). Without the script it simply stays. */
.tm-mbar {
    display: none;
}

@media (max-width: 980px) {
    .tm-mbar {
        position: fixed;
        z-index: 55;
        right: 0;
        bottom: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--tm-border);
        background: var(--tm-surface-menu);
        box-shadow: 0 -8px 30px -18px var(--tm-shadow);
        transition: transform .25s ease;
    }

    .tm-mbar.is-away {
        transform: translateY(110%);
    }
}

.tm-mbar-text {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.3;
    color: var(--tm-text-muted);
}

.tm-mbar-text b {
    display: block;
    font-size: 14.5px;
    color: var(--tm-text-strong);
}

.tm-mbar a.tm-btn {
    padding: 11px 22px;
    font-size: 15px;
    white-space: nowrap;
}

@media (max-width: 980px) {
    .tm-questions.tm-questions-four {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 760px) {
    .tm-pp-steps {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .tm-pp-steps::before {
        top: 30px;
        right: auto;
        bottom: 30px;
        left: 29px;
        border-top: none;
        border-left: 2px dashed var(--tm-accent);
    }

    .tm-pp-steps::after {
        display: none;
    }

    .tm-pp-step {
        display: grid;
        grid-template-columns: 60px 1fr;
        column-gap: 20px;
        align-items: start;
        text-align: left;
    }

    .tm-pp-node {
        grid-row: 1 / 3;
        margin: 0;
    }

    .tm-pp-step h3 {
        margin-top: 4px;
    }

    .tm-pp-step p {
        max-width: none;
        margin: 4px 0 0;
    }
}

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

    .tm-pp-dots,
    .tm-pp-run {
        gap: 2px;
    }

    .tm-pp-run-label {
        font-size: 12.5px;
    }

    .tm-pp-run-label b {
        font-size: 13.5px;
    }

    .tm-pp-tiers {
        font-size: 14px;
    }

    .tm-pp-tiers th {
        padding: 11px 6px;
        font-size: 10.5px;
        letter-spacing: .06em;
    }

    .tm-pp-tiers td {
        padding: 12px 7px;
    }

    .tm-pp-tiers td.tm-pp-soft {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .tm-pp-earn {
        padding: 18px 16px 16px;
    }
}

/* ---------- partner application (/Partners/Apply, #2580) ----------
   Sign Up's hero and card, with the programme's facts on the left, a live count under the first-client answer, and
   the confirmation shown in the card in place of the form. */

.tm-apply-title {
    font-size: clamp(40px, 5vw, 64px);
    line-height: 1.02;
}

.tm-apply-look {
    margin-top: 28px;
}

.tm-apply-look-label {
    display: block;
    font-family: var(--tm-font-mono);
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tm-text-muted);
}

.tm-apply-look .tm-signup-facts {
    margin-top: 10px;
}

/* the first-client help sits above its box, the count below it */
.tm-field .tm-apply-help {
    margin: 0 0 8px;
}

.tm-apply-count {
    display: block;
    margin-top: 6px;
    font-size: 13.5px;
    color: var(--tm-text-muted);
}

.tm-apply-count.is-done {
    color: var(--tm-accent-strong);
}

/* sent: the card's receipt */
.tm-apply-done {
    text-align: center;
}

.tm-apply-done:focus {
    outline: none;
}

.tm-apply-done-tick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 16px;
    border: 2px solid var(--tm-accent);
    border-radius: 50%;
    box-shadow: 0 0 22px var(--tm-accent-glow);
}

.tm-apply-done-tick svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: var(--tm-accent);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tm-apply-done h2 {
    font-size: 28px;
}

.tm-apply-done p {
    margin-top: 12px;
    font-size: 16px;
    line-height: 1.55;
}

/* a page with the phones' sticky bar keeps its foot clear of it */
@media (max-width: 980px) {
    body:has(.tm-mbar) {
        padding-bottom: 78px;
    }
}

/* ---------- Brand page (/Brand, #2583) ----------
   For partners, customers and press: the logos and T mark, the header images, the colours (a swatch copies its hex),
   the type, the rules, how to describe us, and the downloads. Copy buttons and swatches are wired by the page. */

.tm-brand-hero {
    padding: 56px 0 10px;
}

.tm-brand-hero h1 {
    font-size: clamp(44px, 6vw, 76px);
    line-height: 1.02;
    letter-spacing: -0.025em;
}

.tm-brand-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 48px;
    align-items: center;
}

.tm-brand-lede {
    max-width: 58ch;
    margin-top: 18px;
    font-size: 19px;
    line-height: 1.55;
}

.tm-brand-hero .tm-hero-ctas {
    margin-top: 28px;
}

/* the jump links: small mono pills */
.tm-brand-jump {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 30px;
}

.tm-brand-jump a:link,
.tm-brand-jump a:visited {
    display: inline-flex;
    align-items: center;
    padding: 7.5px 14px 6.5px;
    border: 1px solid var(--tm-brand-jump-border);
    border-radius: 999px;
    background: var(--tm-brand-jump-wash);
    font-family: var(--tm-font-mono);
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--tm-accent-strong);
    transition: border-color .2s, box-shadow .2s;
}

.tm-brand-jump a:hover {
    border-color: var(--tm-accent);
    box-shadow: 0 0 0 1px var(--tm-accent), 0 0 18px var(--tm-brand-card-glow-hover);
}

/* the Tugger bot, bobbing gently */
.tm-brand-bot {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0 26px;
}

.tm-brand-bot img {
    display: block;
    width: 100%;
    max-width: 300px;
    height: auto;
}

.tm-brand-bot-shadow {
    display: block;
    width: 58%;
    height: 16px;
    margin-top: -2px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, var(--tm-brand-bot-shadow), var(--tm-transparent) 70%);
}

@media (prefers-reduced-motion: no-preference) {
    .tm-brand-bot img {
        animation: tm-brand-bob 3.6s ease-in-out infinite;
    }

    .tm-brand-bot-shadow {
        animation: tm-brand-bob-shadow 3.6s ease-in-out infinite;
    }
}

@keyframes tm-brand-bob {
    0%, 100% {
        transform: translateY(0) rotate(-1.5deg);
    }

    50% {
        transform: translateY(-14px) rotate(1.5deg);
    }
}

@keyframes tm-brand-bob-shadow {
    0%, 100% {
        transform: scaleX(1);
        opacity: 1;
    }

    50% {
        transform: scaleX(.82);
        opacity: .6;
    }
}

/* sections sit closer than the theme's usual rhythm; a jump lands below the sticky header */
.tm-section.tm-brand-sec {
    padding: 84px 0 0;
    scroll-margin-top: 90px;
}

.tm-section.tm-brand-sec#logos {
    padding-top: 64px;
}

.tm-section.tm-brand-sec-tmark {
    padding-top: 26px;
}

.tm-section.tm-brand-sec-last {
    padding-bottom: 92px;
}

.tm-brand-sec .tm-sec-sub {
    max-width: 60ch;
}

.tm-brand-note {
    max-width: 72ch;
    margin-top: 20px;
    font-size: 15.5px;
    color: var(--tm-text-muted);
}

.tm-brand-note a:link,
.tm-brand-note a:visited,
.tm-brand-links a:link,
.tm-brand-links a:visited,
.tm-brand-ask a:link,
.tm-brand-ask a:visited {
    font-weight: 700;
    color: var(--tm-accent-strong);
}

/* logo tiles */
.tm-brand-logos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 30px;
}

.tm-brand-tile,
.tm-brand-tmark {
    border: 1.5px solid var(--tm-brand-card-border);
    background: var(--tm-surface-raised);
    box-shadow: 0 0 22px var(--tm-brand-card-glow);
    transition: border-color .2s, box-shadow .2s;
}

.tm-brand-tile:hover,
.tm-brand-tmark:hover {
    border-color: var(--tm-brand-card-border-hover);
    box-shadow: 0 0 34px var(--tm-brand-card-glow-hover);
}

.tm-brand-tile {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 18px;
}

.tm-brand-tile-view {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
    padding: 26px;
    border-bottom: 1px solid var(--tm-border);
}

.tm-brand-tile-view img {
    display: block;
    width: auto;
    max-width: 78%;
    height: auto;
    max-height: 60px;
}

.tm-brand-tile-view.tm-brand-tile-dark {
    background: var(--tm-brand-tile-dark);
}

.tm-brand-tile-view.tm-brand-tile-grey {
    background: var(--tm-brand-tile-grey);
}

.tm-brand-tile-meta {
    padding: 16px 18px 18px;
}

.tm-brand-tile-meta b {
    display: block;
    font-size: 16px;
    color: var(--tm-text-strong);
}

.tm-brand-tile-meta > span {
    display: block;
    margin-top: 2px;
    font-size: 14px;
    color: var(--tm-text-muted);
}

.tm-brand-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 12px;
    font-size: 14px;
}

.tm-brand-links a:link,
.tm-brand-links a:visited {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}

.tm-brand-links a:hover {
    text-decoration: underline;
}

.tm-brand-links svg,
.tm-brand-sizes svg,
.tm-brand-dl-icon svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tm-brand-links svg {
    width: 14px;
    height: 14px;
    stroke-width: 1.9;
}

/* the T mark */
.tm-brand-tmark {
    display: grid;
    grid-template-columns: 184px minmax(0, 1fr);
    gap: 44px;
    align-items: center;
    padding: 44px;
    border-radius: 20px;
}

.tm-brand-tmark img {
    display: block;
    width: 184px;
    height: 184px;
    margin: 0 auto;
    border-radius: 28px;
}

.tm-brand-tmark h2 {
    font-size: clamp(28px, 3.4vw, 38px);
}

.tm-brand-tmark p {
    max-width: 56ch;
    margin-top: 10px;
}

/* header images: the wide one beside the five sizes */
.tm-brand-headers {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 16px;
    margin-top: 30px;
}

.tm-brand-header-view {
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--tm-border);
    border-radius: 18px;
    background: var(--tm-surface-inverse);
}

.tm-brand-header-view img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tm-brand-sizes {
    padding: 8px 6px;
    border: 1px solid var(--tm-border);
    border-radius: 18px;
    background: var(--tm-surface-raised);
}

.tm-brand-sizes a:link,
.tm-brand-sizes a:visited {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--tm-text);
    transition: background .18s;
}

.tm-brand-sizes a:hover {
    background: var(--tm-brand-row-hover);
}

.tm-brand-size-px {
    font-family: var(--tm-font-mono);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--tm-text-strong);
}

.tm-brand-size-use b {
    display: block;
    font-size: 15px;
    color: var(--tm-text-strong);
}

.tm-brand-size-use span {
    font-size: 13.5px;
    color: var(--tm-text-muted);
}

.tm-brand-sizes svg {
    width: 18px;
    height: 18px;
    stroke-width: 1.9;
    color: var(--tm-accent);
}

/* colour: five columns, grouped under mono labels */
.tm-brand-colours {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-top: 30px;
}

.tm-brand-group {
    margin-top: 6px;
    font-family: var(--tm-font-mono);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tm-text-strong);
}

.tm-brand-span-1 {
    grid-column: span 1;
}

.tm-brand-span-2 {
    grid-column: span 2;
}

.tm-brand-span-3 {
    grid-column: span 3;
}

.tm-brand-swatch {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--tm-border);
    border-radius: 18px;
    background: var(--tm-surface-raised);
    font: inherit;
    text-align: left;
    cursor: pointer;
    appearance: none;
    transition: border-color .2s, box-shadow .2s;
}

.tm-brand-swatch:hover,
.tm-brand-swatch:focus-visible {
    border-color: var(--tm-brand-card-border-hover);
    box-shadow: 0 0 22px var(--tm-brand-card-glow);
}

.tm-brand-chip {
    display: block;
    width: 100%;
    height: 84px;
    border-bottom: 1px solid var(--tm-border);
}

.tm-brand-chip-blue {
    background: var(--tm-brand-swatch-blue);
}

.tm-brand-chip-navy {
    background: var(--tm-brand-swatch-navy);
}

.tm-brand-chip-white {
    background: var(--tm-brand-swatch-white);
}

.tm-brand-chip-orange {
    background: var(--tm-brand-swatch-orange);
}

.tm-brand-chip-page-tint {
    background: var(--tm-brand-swatch-page-tint);
}

.tm-brand-chip-light-blue {
    background: var(--tm-brand-swatch-light-blue);
}

.tm-brand-chip-light-grey {
    background: var(--tm-brand-swatch-light-grey);
}

.tm-brand-chip-dark-grey {
    background: var(--tm-brand-swatch-dark-grey);
}

.tm-brand-chip-chart-navy {
    background: var(--tm-brand-swatch-chart-navy);
}

.tm-brand-swatch-info {
    display: block;
    padding: 12px 14px 14px;
}

.tm-brand-swatch-info b {
    display: block;
    font-size: 15.5px;
    color: var(--tm-text-strong);
}

.tm-brand-swatch-info code {
    font-family: var(--tm-font-mono);
    font-size: 13px;
    color: var(--tm-text-muted);
}

.tm-brand-swatch.is-copied .tm-brand-swatch-hex {
    color: var(--tm-accent-strong);
}

/* type */
.tm-brand-type {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    margin-top: 30px;
}

.tm-brand-spec {
    padding: 30px 32px;
    border: 1px solid var(--tm-border);
    border-radius: 20px;
    background: var(--tm-surface-raised);
    color: var(--tm-text-strong);
}

.tm-brand-aa {
    font-size: 96px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
}

.tm-brand-aa span {
    font-weight: 400;
    color: var(--tm-accent);
}

.tm-brand-abc {
    margin-top: 16px;
    font-size: 20px;
    line-height: 1.6;
    word-break: break-word;
    color: var(--tm-text);
}

.tm-brand-weights {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    margin-top: 20px;
    font-size: 18px;
}

.tm-brand-weights b {
    display: block;
    font-weight: 700;
}

.tm-brand-weights b.tm-brand-semibold {
    font-weight: 600;
}

.tm-brand-weights b.tm-brand-regular {
    font-weight: 400;
}

.tm-brand-weights span {
    display: block;
    margin-top: 2px;
    font-family: var(--tm-font-mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tm-text-muted);
}

/* a copy card: the type note and the two descriptions */
.tm-brand-copy {
    display: flex;
    flex-direction: column;
    padding: 24px 26px;
    border: 1px solid var(--tm-border);
    border-radius: 20px;
    background: var(--tm-surface-raised);
}

.tm-brand-copy-label {
    font-family: var(--tm-font-mono);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tm-text-strong);
}

.tm-brand-copy-label.tm-brand-copy-label-cta {
    color: var(--tm-cta-strong);
}

.tm-brand-copy p {
    margin-top: 12px;
    font-size: 17px;
    color: var(--tm-text-strong);
}

.tm-brand-copy p.tm-brand-copy-small {
    margin-top: 10px;
    font-size: 15.5px;
    color: var(--tm-text);
}

a.tm-btn.tm-brand-copy-btn:link,
a.tm-btn.tm-brand-copy-btn:visited {
    align-self: flex-start;
    margin-top: auto;
}

.tm-brand-copy p + a.tm-btn.tm-brand-copy-btn {
    margin-top: 20px;
}

.tm-brand-copy-button {
    align-self: flex-start;
    margin-top: auto;
    padding: 9px 18px;
    border: 1.5px solid var(--tm-accent);
    border-radius: 999px;
    background: transparent;
    font: inherit;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--tm-accent-strong);
    cursor: pointer;
    transition: background .2s, box-shadow .2s;
}

.tm-brand-copy p + .tm-brand-copy-button {
    margin-top: 18px;
}

.tm-brand-copy-button:hover,
.tm-brand-copy-button:focus-visible {
    background: var(--tm-surface-raised);
    box-shadow: 0 0 0 1px var(--tm-accent), 0 0 22px var(--tm-brand-card-glow-hover);
}

/* rules: a tick for do, a cross for don't */
.tm-brand-rules {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px 40px;
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
}

.tm-brand-rules li {
    position: relative;
    padding: 8px 0 8px 32px;
    border-bottom: 1px dashed var(--tm-dashed-border);
}

.tm-brand-rules li::before,
.tm-brand-rules li::after {
    content: "";
    position: absolute;
    top: 21px;
    left: 2px;
    width: 14px;
    height: 2px;
    background: var(--tm-cta);
}

.tm-brand-rules li.tm-brand-dont::before {
    transform: rotate(45deg);
}

.tm-brand-rules li.tm-brand-dont::after {
    transform: rotate(-45deg);
}

.tm-brand-rules li.tm-brand-do::before {
    top: 13px;
    width: 13px;
    height: 8px;
    border-bottom: 2.6px solid var(--tm-accent);
    border-left: 2.6px solid var(--tm-accent);
    background: none;
    transform: rotate(-48deg);
}

.tm-brand-rules li.tm-brand-do::after {
    display: none;
}

.tm-brand-tm {
    margin-top: 30px;
    padding: 20px 24px;
    border-radius: 16px;
    background: var(--tm-brand-tm-wash);
    font-size: 16px;
}

.tm-brand-tm p + p {
    margin-top: 10px;
}

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

/* how to describe us */
.tm-brand-desc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 16px;
    margin-top: 30px;
}

.tm-brand-four {
    margin-top: 20px;
    padding: 24px 26px;
    border: 1px solid var(--tm-cta-tint-border);
    border-radius: 20px;
    background: var(--tm-surface-raised);
}

.tm-brand-four h3 {
    font-size: 19px;
}

.tm-brand-four ul {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px 30px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.tm-brand-four li {
    position: relative;
    padding-left: 26px;
    font-size: 15.5px;
}

.tm-brand-four li::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--tm-cta);
}

/* downloads: two cards in a soft blue ring that brightens on hover */
.tm-brand-dl {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    margin-top: 30px;
}

.tm-brand-dl-shell {
    position: relative;
    display: flex;
}

.tm-brand-dl-halo {
    position: absolute;
    inset: -8px;
    border-radius: 30px;
    background: var(--tm-accent);
    opacity: .22;
    filter: blur(18px);
    pointer-events: none;
    transition: opacity .25s;
}

.tm-brand-dl-frame {
    position: relative;
    display: flex;
    flex: 1;
    padding: 2px;
    border-radius: 24px;
    background: var(--tm-brand-dl-frame);
    transition: background .25s, box-shadow .25s;
}

.tm-brand-dl-shell:hover .tm-brand-dl-halo {
    opacity: .6;
}

.tm-brand-dl-shell:hover .tm-brand-dl-frame {
    background: var(--tm-brand-card-border-hover);
    box-shadow: 0 0 30px var(--tm-brand-card-glow-hover);
}

a.tm-brand-dl-card:link,
a.tm-brand-dl-card:visited {
    display: flex;
    flex: 1;
    gap: 18px;
    align-items: flex-start;
    padding: 26px 28px;
    border-radius: 22px;
    background: var(--tm-surface-raised);
    text-decoration: none;
    color: var(--tm-text);
}

.tm-brand-dl-icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--tm-brand-jump-wash);
    color: var(--tm-accent);
}

.tm-brand-dl-icon svg {
    width: 26px;
    height: 26px;
    stroke-width: 1.6;
}

.tm-brand-dl-card b {
    display: block;
    font-size: 20px;
    color: var(--tm-text-strong);
}

.tm-brand-dl-size {
    display: block;
    margin-top: 4px;
    font-family: var(--tm-font-mono);
    font-size: 11.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tm-cta-strong);
}

.tm-brand-dl-text {
    display: block;
    margin-top: 8px;
    font-size: 15.5px;
}

.tm-brand-ask {
    margin-top: 28px;
    font-size: 17px;
}

@media (max-width: 1000px) {
    .tm-brand-logos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .tm-brand-headers,
    .tm-brand-desc {
        grid-template-columns: minmax(0, 1fr);
    }

    .tm-brand-colours {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tm-brand-colours .tm-brand-group {
        grid-column: 1 / -1;
    }

    .tm-brand-fill {
        display: none;
    }
}

@media (max-width: 860px) {
    .tm-brand-hero-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .tm-brand-bot {
        display: none;
    }
}

@media (max-width: 800px) {
    .tm-brand-type,
    .tm-brand-rules,
    .tm-brand-four ul,
    .tm-brand-dl {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .tm-brand-tmark {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        padding: 30px;
    }
}

@media (max-width: 560px) {
    .tm-brand-logos {
        grid-template-columns: minmax(0, 1fr);
    }

    .tm-brand-aa {
        font-size: 72px;
    }

    .tm-brand-sizes a:link,
    .tm-brand-sizes a:visited {
        grid-template-columns: 92px minmax(0, 1fr) auto;
        gap: 10px;
    }
}

/* ==========================================================================
   Detail pages (#2582): blog post, customer success story, webinar, guide
   ========================================================================== */

/* ---------- back link ---------- */

a.tm-back:link,
a.tm-back:visited,
a.tm-back:hover {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    color: var(--tm-text-muted);
    transition: color .18s;
}

a.tm-back:hover {
    color: var(--tm-accent-strong);
}

.tm-back svg {
    width: 15px;
    height: 15px;
    transition: transform .18s;
}

a.tm-back:hover svg {
    transform: translateX(-3px);
}

/* ---------- detail hero (blog post) ---------- */

.tm-detail-hero {
    padding: 46px 0 0;
}

.tm-detail-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
}

.tm-detail-hero h1 {
    max-width: 20ch;
    margin-top: 18px;
    font-size: clamp(36px, 4.8vw, 60px);
    line-height: 1.04;
    letter-spacing: -0.022em;
}

/* a long title steps down a size so the hero still balances */
.tm-detail-hero h1.tm-detail-long {
    max-width: 24ch;
    font-size: clamp(34px, 4.2vw, 52px);
}

.tm-detail-lede {
    max-width: 60ch;
    margin-top: 18px;
    font-size: 19px;
    line-height: 1.55;
}

.tm-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-top: 22px;
}

.tm-detail-meta .tm-card-fact {
    padding: 6px 14px 6px 11px;
    border: 1px solid var(--tm-border);
    border-radius: 999px;
    background: var(--tm-surface-raised);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--tm-text-strong);
}

.tm-detail-meta .tm-card-fact svg {
    width: 15px;
    height: 15px;
}

.tm-detail-image {
    position: relative;
    overflow: hidden;
    max-width: 980px;
    margin-top: 40px;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--tm-border);
    border-radius: 22px;
    background: var(--tm-surface-inverse);
    box-shadow: 0 0 60px var(--tm-accent-faint-glow);
}

.tm-detail-image > .tm-item-picture,
.tm-detail-image > .tm-item-photo,
.tm-detail-image > .tm-item-fallback {
    position: absolute;
    inset: 0;
}

/* ---------- body and the card beside it ---------- */

.tm-detail-body {
    padding: 64px 0 96px;
}

.tm-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 740px) 290px;
    gap: 64px;
    align-items: start;
}

/* no card beside the body (a short post with no contents list, components.js): the body alone, at its reading width */
.tm-detail-grid-single {
    grid-template-columns: minmax(0, 740px);
}

.tm-detail-aside {
    position: sticky;
    top: 106px;
}

.tm-detail-aside-card {
    padding: 26px 24px 24px;
    border: 2px solid var(--tm-accent);
    border-radius: 20px;
    background: var(--tm-surface-raised);
    box-shadow: 0 0 28px var(--tm-accent-frame-glow);
}

.tm-detail-aside-k {
    font-family: var(--tm-font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tm-accent-strong);
}

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

.tm-toc-list {
    margin: 14px 0 22px;
    padding-top: 12px;
    border-top: 1px dashed var(--tm-divider);
}

.tm-toc-list a:link,
.tm-toc-list a:visited,
.tm-toc-list a:hover {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
    color: var(--tm-text-strong);
}

.tm-toc-list a::before {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    margin-top: 7px;
    border-radius: 50%;
    background: var(--tm-accent-chip-border);
    transition: background .15s, box-shadow .15s;
}

.tm-toc-list a:hover,
.tm-toc-list a.tm-toc-current {
    color: var(--tm-accent-strong);
}

.tm-toc-list a.tm-toc-current::before {
    background: var(--tm-accent);
    box-shadow: 0 0 0 3px var(--tm-accent-focus-halo);
}

/* a story's connectors, each a link to its page */
.tm-detail-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 22px;
    padding-top: 14px;
    border-top: 1px dashed var(--tm-divider);
}

.tm-detail-chips a:link,
.tm-detail-chips a:visited,
.tm-detail-chips a:hover {
    padding: 4px 12px;
    border: 1px solid var(--tm-accent-chip-border);
    border-radius: 999px;
    background: var(--tm-accent-tint);
    font-family: var(--tm-font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--tm-accent-strong);
    transition: border-color .15s;
}

.tm-detail-chips a:hover {
    border-color: var(--tm-accent);
}

a.tm-detail-aside-cta {
    display: block;
    width: 100%;
    text-align: center;
}

@media (max-width: 1060px) {
    .tm-detail-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .tm-detail-aside {
        display: none;
    }
}

/* ---------- the blog editor's HTML (_DetailBody) ---------- */

.tm-rt {
    max-width: 740px;
    font-size: 17px;
}

.tm-rt > :first-child {
    margin-top: 0;
}

.tm-rt h2 {
    margin: 56px 0 16px;
    font-size: clamp(28px, 3.4vw, 38px);
    line-height: 1.1;
    scroll-margin-top: 96px;
}

.tm-rt h3 {
    margin: 36px 0 10px;
    font-size: 22px;
    line-height: 1.3;
}

/* the contents list can link to these too, when a post has too few H2s (components.js) */
.tm-rt h3,
.tm-rt p.tm-rt-sub {
    scroll-margin-top: 96px;
}

.tm-rt p {
    margin-top: 14px;
}

/* the deeper blue rather than the designs' brighter one: as body text the brighter blue is too pale to read (about 2.6:1
   against the page). On hover the link darkens and its underline thickens and moves up to meet it */
.tm-rt a:link,
.tm-rt a:visited {
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--tm-accent-chip-border);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    color: var(--tm-accent-strong);
    transition: color .15s, text-decoration-color .15s, text-underline-offset .15s;
}

.tm-rt a:hover {
    text-decoration-color: currentColor;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
    color: var(--tm-text-strong);
}

.tm-rt a:focus-visible {
    border-radius: 3px;
    outline: 2px solid var(--tm-accent);
    outline-offset: 2px;
}

.tm-rt strong,
.tm-rt b {
    color: var(--tm-text-strong);
}

.tm-rt img {
    max-width: 100%;
    height: auto;
    border-radius: 14px;
}

/* a paragraph that is nothing but bold text is an old-style heading (components.js marks it) */
.tm-rt p.tm-rt-sub {
    margin: 56px 0 16px;
    font-size: clamp(28px, 3.4vw, 38px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.018em;
    color: var(--tm-text-strong);
}

.tm-rt > p.tm-rt-sub:first-child {
    margin-top: 0;
}

.tm-rt p.tm-rt-sub + p {
    margin-top: 0;
}

/* in a story, a bold-only line is a pull line, not a heading */
.tm-rt-story p.tm-rt-sub {
    margin: 14px 0 0;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: 0;
}

.tm-rt-story p.tm-rt-sub + p {
    margin-top: 14px;
}

/* plain lists: the orange tick */
.tm-rt ul {
    margin-top: 16px;
    padding: 0;
    list-style: none;
}

.tm-rt ul > li {
    position: relative;
    padding: 6px 0 6px 30px;
}

.tm-rt ul > li::before {
    content: "";
    position: absolute;
    top: 13px;
    left: 1px;
    width: 13px;
    height: 8px;
    border-bottom: 2.6px solid var(--tm-cta);
    border-left: 2.6px solid var(--tm-cta);
    border-radius: 1px;
    transform: rotate(-48deg);
}

/* numbered lists: the number in a pale blue disc */
.tm-rt ol {
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: tm-rt-n;
}

.tm-rt ol > li {
    position: relative;
    padding: 4px 0 10px 46px;
    counter-increment: tm-rt-n;
}

.tm-rt ol > li::before {
    content: counter(tm-rt-n);
    position: absolute;
    top: 4.5px;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--tm-accent-tint);
    font-size: 14.5px;
    font-weight: 700;
    color: var(--tm-accent-strong);
}

/* a list whose items all open with a bold phrase becomes cards (components.js marks it) */
.tm-rt ul.tm-rt-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 26px;
}

.tm-rt ul.tm-rt-cards > li {
    padding: 22px 24px;
    border: 1.5px solid var(--tm-accent-tint-border);
    border-radius: 18px;
    background: var(--tm-surface-raised);
    font-size: 15.5px;
    color: var(--tm-text-muted);
}

.tm-rt ul.tm-rt-cards > li::before {
    display: none;
}

.tm-rt ul.tm-rt-cards > li > :is(strong, b):first-child {
    display: block;
    margin-bottom: 6px;
    font-size: 18px;
    line-height: 1.3;
}

.tm-rt ul.tm-rt-cards > li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

/* a list of questions becomes speech bubbles (components.js marks it) */
.tm-rt ul.tm-rt-asks {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 18px;
    margin-top: 18px;
}

.tm-rt ul.tm-rt-asks > li,
.tm-rt p.tm-rt-ask {
    position: relative;
    width: fit-content;
    max-width: 88%;
    margin-right: 16px;
    padding: 12px 18px;
    border-radius: 20px 20px 4px 20px;
    background: var(--tm-bubble);
    font-size: 16.5px;
    line-height: 1.45;
    color: var(--tm-text-strong);
}

/* the bubble's tail, bottom right: the sender's side */
.tm-rt ul.tm-rt-asks > li::after,
.tm-rt p.tm-rt-ask::after {
    content: "";
    position: absolute;
    right: -14px;
    bottom: 0;
    width: 18px;
    height: 18px;
    background: var(--tm-bubble);
    clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.tm-rt ul.tm-rt-asks > li::before {
    display: none;
}

/* an example prompt in italics is a message you'd send */
.tm-rt p.tm-rt-ask {
    margin: 22px 16px 0 auto;
}

.tm-rt p.tm-rt-ask em {
    font-style: normal;
}

.tm-rt p.tm-rt-ask + p {
    margin-top: 22px;
}

/* a list of nothing but links becomes a link grid (components.js marks it) */
.tm-rt ul.tm-rt-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 6px;
    margin-top: 22px;
    padding: 10px;
    border: 1px solid var(--tm-menu-border);
    border-radius: 20px;
    background: var(--tm-surface-raised);
    box-shadow: 0 26px 70px var(--tm-links-shadow);
}

.tm-rt ul.tm-rt-links > li {
    padding: 0;
}

.tm-rt ul.tm-rt-links > li::before {
    display: none;
}

.tm-rt ul.tm-rt-links a:link,
.tm-rt ul.tm-rt-links a:visited {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 13px;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    color: var(--tm-text);
    transition: background .18s, color .18s;
}

.tm-rt ul.tm-rt-links a:hover {
    background: var(--tm-menu-hover);
    color: var(--tm-text-strong);
}

/* the arrow (components.js adds it), drawn again when the link is hovered */
.tm-rt ul.tm-rt-links a svg {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    color: var(--tm-accent);
}

.tm-rt ul.tm-rt-links a svg path {
    stroke-dasharray: 1 1;
    stroke-dashoffset: 0;
}

.tm-rt ul.tm-rt-links a:hover svg path {
    animation: tm-link-draw .6s cubic-bezier(.4, 0, .2, 1) both;
}

.tm-rt ul.tm-rt-links a:hover svg path:last-child {
    animation-delay: .15s;
}

@keyframes tm-link-draw {
    from {
        stroke-dashoffset: 1;
    }

    to {
        stroke-dashoffset: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tm-rt ul.tm-rt-links a:hover svg path {
        animation: none;
    }
}

/* tables scroll in their own box on narrow screens (components.js wraps them) */
/* the editor saves tables with border="1", cellpadding and cellspacing: rows are ruled, columns are not. The legal pages'
   data tables (tm-legal-table) share this styling */
.tm-rt table,
.tm-legal-table table {
    width: 100%;
    margin-top: 22px;
    border: 0;
    border-collapse: collapse;
    font-size: 15px;
}

.tm-rt th,
.tm-rt td,
.tm-legal-table th,
.tm-legal-table td {
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid var(--tm-border);
    text-align: left;
}

/* a minimum height (a table cell's height is its minimum), so a one-line heading sits centred in the header row rather
   than tucked into the corner */
.tm-rt th,
.tm-legal-table th {
    height: 48px;
    padding: 12px 14px;
    vertical-align: middle;
    font-family: var(--tm-font-mono);
    font-size: 11.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tm-text-muted);
}

.tm-rt .tm-rt-table,
.tm-legal-table {
    overflow-x: auto;
    margin-top: 22px;
    border: 1.5px solid var(--tm-accent);
    border-radius: 14px;
    background: var(--tm-surface-raised);
    box-shadow: 0 0 22px var(--tm-window-glow);
}

.tm-rt .tm-rt-table table,
.tm-legal-table table {
    min-width: 560px;
    margin: 0;
}

.tm-rt .tm-rt-table th,
.tm-legal-table th {
    border-bottom: 1.5px solid var(--tm-accent-chip-border);
    background: var(--tm-surface-elevated);
    color: var(--tm-accent-strong);
}

.tm-rt .tm-rt-table tr:last-child td,
.tm-legal-table tr:last-child td {
    border-bottom: none;
}

.tm-rt blockquote {
    margin-top: 22px;
    padding: 4px 0 4px 20px;
    border-left: 3px solid var(--tm-cta);
    font-size: 19px;
    color: var(--tm-text-strong);
}

/* a divider between sections: a thin rule that fades out at both ends, in place of the browser's grey bevel; the
   heading after it doesn't add its own space as well */
.tm-rt hr {
    height: 1px;
    margin: 48px 0;
    border: 0;
    background: linear-gradient(90deg, var(--tm-transparent), var(--tm-accent-chip-border) 18%, var(--tm-accent-chip-border) 82%, var(--tm-transparent));
}

.tm-rt hr + h2,
.tm-rt hr + h3 {
    margin-top: 0;
}

/* the editor wraps a quote's words in a paragraph: no gap above the first line */
.tm-rt blockquote > :first-child {
    margin-top: 0;
}

/* an image section */
.tm-rt-figure {
    margin: 28px 0 0;
}

.tm-rt-figure img {
    display: block;
    width: 100%;
    border: 1px solid var(--tm-border);
    border-radius: 16px;
}

/* a quote section: a speech bubble from the customer's side, the name under it */
.tm-rt-quote {
    margin: 38px 0 0;
}

.tm-rt-quote blockquote {
    position: relative;
    margin: 0 0 0 16px;
    padding: 22px 26px;
    border: none;
    border-radius: 20px 20px 20px 4px;
    background: var(--tm-bubble);
    font-size: clamp(18px, 1.9vw, 20px);
    font-weight: 600;
    line-height: 1.5;
    color: var(--tm-text-strong);
}

.tm-rt-quote blockquote::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: -14px;
    width: 18px;
    height: 18px;
    background: var(--tm-bubble);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.tm-rt-quote figcaption {
    margin: 14px 0 0 16px;
}

.tm-rt-quote figcaption b {
    display: block;
    font-size: 15.5px;
}

.tm-rt-quote figcaption span {
    display: block;
    font-size: 13.5px;
    color: var(--tm-text-muted);
}

/* a stat section: up to three white tiles, the figure in orange (the story template's final "orange theme") */
.tm-rt-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-top: 38px;
}

.tm-rt-stat {
    padding: 24px 22px;
    border: 1px solid var(--tm-cta-tint-border);
    border-radius: 18px;
    background: var(--tm-surface-raised);
}

.tm-rt-stat-value {
    display: block;
    font-size: clamp(28px, 2.9vw, 36px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    white-space: nowrap;
    color: var(--tm-cta-strong);
}

.tm-rt-stat p {
    margin-top: 10px;
    font-size: 14.5px;
    line-height: 1.45;
    color: var(--tm-text);
}

/* in a story, two or more short bold-led paragraphs in a row ("The incident. ...") are a timeline (components.js wraps
   them): a circle at each, joined by a blue line that stops at the last */
.tm-rt-tl {
    position: relative;
    margin-top: 24px;
    padding-left: 34px;
    isolation: isolate;
}

.tm-rt .tm-rt-tl > p {
    position: relative;
    z-index: 0;
    margin-top: 0;
    padding: 0 0 18px;
}

.tm-rt-tl > p::before {
    content: "";
    position: absolute;
    top: 6px;
    left: -30px;
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    border: 2.5px solid var(--tm-accent);
    border-radius: 50%;
    background: var(--tm-surface-raised);
}

.tm-rt-tl > p:not(:last-child)::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 13px;
    bottom: -13px;
    left: -24px;
    width: 2px;
    background: var(--tm-accent);
}

.tm-rt-tl > p > :is(strong, b):first-child {
    display: block;
    font-size: 17px;
    color: var(--tm-text-strong);
}

/* a video: the poster with a play button, the player loads on click (components.js) */
.tm-yt {
    position: relative;
    overflow: hidden;
    margin-top: 22px;
    aspect-ratio: 16 / 9;
    border-radius: 18px;
    background: var(--tm-surface-inverse);
}

.tm-yt-play {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.tm-yt-play img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tm-yt-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--tm-surface-raised);
    box-shadow: 0 0 34px var(--tm-accent-glow-strong);
    transform: translate(-50%, -50%);
    transition: transform .2s;
}

.tm-yt-icon svg {
    margin-left: 5px;
    fill: var(--tm-accent);
}

.tm-yt-play:hover .tm-yt-icon {
    transform: translate(-50%, -50%) scale(1.06);
}

.tm-yt-play:focus-visible {
    outline: 3px solid var(--tm-accent);
    outline-offset: -3px;
}

.tm-yt iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* a closing "Get started" section gets the call-to-action box, in the moving orange ring (components.js wraps it) */
.tm-rt-cta {
    position: relative;
    display: flex;
    margin-top: 64px;
}

.tm-rt-cta-halo {
    position: absolute;
    inset: -8px;
    border-radius: 30px;
    pointer-events: none;
    opacity: .55;
    filter: blur(16px);
    background: conic-gradient(from var(--tm-ring-angle), var(--tm-transparent) 0deg 118deg, var(--tm-cta-ring-dark) 172deg, var(--tm-cta) 212deg, var(--tm-cta-ring-light) 248deg, var(--tm-cta) 288deg, var(--tm-cta-ring-dark) 322deg, var(--tm-transparent) 356deg 360deg);
    animation: tm-ring-spin 9s linear infinite;
}

.tm-rt-cta-frame {
    position: relative;
    display: flex;
    flex: 1;
    padding: 2.5px;
    border-radius: 24px;
    background: conic-gradient(from var(--tm-ring-angle), var(--tm-cta-ring-rest) 0deg 118deg, var(--tm-cta-gradient-bottom) 172deg, var(--tm-cta-ring-mid) 212deg, var(--tm-cta-ring-pale) 248deg, var(--tm-cta-ring-mid) 288deg, var(--tm-cta-gradient-bottom) 322deg, var(--tm-cta-ring-rest) 356deg);
    animation: tm-ring-spin 9s linear infinite;
}

.tm-rt-cta-box {
    flex: 1;
    padding: 34px 36px 32px;
    border-radius: 21.5px;
    background: var(--tm-surface-raised);
}

.tm-rt .tm-rt-cta-box h2 {
    margin-top: 0;
}

.tm-rt-cta-box p {
    font-size: 18px;
}

.tm-rt .tm-rt-cta-box a:link,
.tm-rt .tm-rt-cta-box a:visited {
    text-decoration-color: var(--tm-cta-tint-border);
    color: var(--tm-cta-strong);
}

/* in the "Get started" box the links brighten to orange on hover, as the designs have it */
.tm-rt .tm-rt-cta-box a:hover {
    text-decoration-color: currentColor;
    color: var(--tm-cta);
}

@media (max-width: 760px) {
    .tm-rt ul.tm-rt-cards,
    .tm-rt ul.tm-rt-links {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .tm-detail-body {
        padding: 48px 0 72px;
    }

    .tm-rt-cta-box {
        padding: 28px 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tm-rt-cta-halo {
        display: none;
    }

    .tm-rt-cta-frame {
        animation: none;
        background: var(--tm-cta);
    }

    .tm-yt-icon,
    a.tm-back svg {
        transition: none;
    }
}

/* ---------- customer story (#2582): the listing feature card as the page's hero, then a fixed "Get started" ---------- */

.tm-detail-hero .tm-listing-feature {
    margin-top: 28px;
}

/* the story itself: its title is the page's H1, and the card leads nowhere, so it doesn't brighten or zoom on hover */
.tm-listing-feature-detail h1 {
    margin-top: 16px;
    font-size: clamp(30px, 3.4vw, 44px);
    line-height: 1.08;
    letter-spacing: -0.02em;
}

.tm-listing-feature-detail:hover .tm-listing-feature-halo {
    opacity: .28;
}

.tm-listing-feature-detail:hover .tm-listing-feature-frame {
    background: var(--tm-listing-feature-ring);
    box-shadow: none;
}

.tm-listing-feature-detail .tm-listing-feature-card:hover .tm-item-photo {
    transform: none;
}

/* a long story title (over DetailPage.LONG_TITLE characters) steps down so it doesn't run to six lines in the card's
   column; never below 38px, and the story's section headings are smaller (.tm-rt-story h2), so it stays the biggest */
.tm-listing-feature-detail h1.tm-detail-long {
    font-size: clamp(28px, 2.9vw, 38px);
    line-height: 1.12;
}

/* and gets more of the card: image and words half and half (from 900px up; below that the card stacks anyway) */
@media (min-width: 901px) {
    .tm-listing-feature-long .tm-listing-feature-card {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

/* a story's section headings sit a step below a blog post's: stories read lighter, and the title stays above them */
.tm-rt-story .tm-rt h2 {
    margin-top: 48px;
    font-size: clamp(24px, 2.6vw, 32px);
}

/* on the story's own page the intro is shown in full, not cut to three lines as on the listing */
.tm-listing-feature-detail .tm-listing-feature-body p {
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
}

/* below 1060px a story's card (contents, "Systems connected", Book a demo) moves above the body rather than going, as
   the story design has it; a blog post's goes (.tm-detail-aside) */
@media (max-width: 1060px) {
    .tm-detail-grid-story .tm-detail-aside {
        display: block;
        position: static;
        order: -1;
        margin-bottom: 8px;
    }
}

/* the story's closing box (the story design's final "blue theme"): the moving ring in Tugger blue rather than the blog
   body's orange, and everything centred */
.tm-detail-cta {
    margin-top: 80px;
}

.tm-detail-cta .tm-rt-cta-halo {
    opacity: .6;
    background: conic-gradient(from var(--tm-ring-angle), var(--tm-transparent) 0deg 118deg, var(--tm-ring-dark) 172deg, var(--tm-accent) 212deg, var(--tm-ring-light) 248deg, var(--tm-accent) 288deg, var(--tm-ring-dark) 322deg, var(--tm-transparent) 356deg 360deg);
}

.tm-detail-cta .tm-rt-cta-frame {
    background: conic-gradient(from var(--tm-ring-angle), var(--tm-ring-rest-blue) 0deg 118deg, var(--tm-ring-mid) 172deg, var(--tm-accent) 212deg, var(--tm-ring-pale) 248deg, var(--tm-accent) 288deg, var(--tm-ring-mid) 322deg, var(--tm-ring-rest-blue) 356deg);
}

.tm-detail-cta .tm-rt-cta-box {
    padding: 38px 40px 36px;
    text-align: center;
}

.tm-detail-cta .tm-rt-cta-box h2 {
    font-size: clamp(28px, 3.4vw, 38px);
    line-height: 1.1;
}

.tm-detail-cta .tm-rt-cta-box p {
    max-width: 60ch;
    margin: 12px auto 0;
    font-size: 18px;
}

.tm-detail-cta-btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 24px;
}

@media (max-width: 640px) {
    .tm-detail-cta .tm-rt-cta-box {
        padding: 28px 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tm-detail-cta .tm-rt-cta-frame {
        background: var(--tm-accent);
    }
}

/* ---------- guide page (Resources/Resource, #2582) ----------
   "Individual guide-template v1": the guide's pills, title, facts, intro and "What's inside" beside the download card
   (the form card in a dark grey moving ring), then its write-up with its 16:9 cover beside it. The two grids share their
   columns, so the cover lines up under the card. Stacked below 980px, the card after the intro. */

.tm-detail-split {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: 56px;
    align-items: start;
    margin-top: 30px;
}

.tm-guide-hero {
    padding-bottom: 84px;
}

.tm-guide-hero .tm-detail-pills {
    margin-top: 0;
}

.tm-guide-hero h1 {
    max-width: none;
}

/* "Free guide": white with a blue outline and glow */
.tm-free-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border: 1.5px solid var(--tm-accent);
    border-radius: 999px;
    background: var(--tm-surface-raised);
    box-shadow: 0 0 14px var(--tm-accent-frame-glow-tight);
    font-family: var(--tm-font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tm-accent-strong);
}

/* Length and Delivery between dashed rules */
.tm-detail-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 34px;
    margin: 28px 0 0;
    padding: 18px 0;
    border-top: 1px dashed var(--tm-divider);
    border-bottom: 1px dashed var(--tm-divider);
}

.tm-detail-facts dt {
    font-family: var(--tm-font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tm-text-muted);
}

.tm-detail-facts dd {
    margin: 3px 0 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--tm-text-strong);
}

.tm-detail-facts dd svg {
    width: 15px;
    height: 15px;
    margin-right: 6px;
    vertical-align: -2px;
    color: var(--tm-accent);
}

.tm-guide-hero .tm-detail-lede {
    margin-top: 24px;
}

.tm-guide-inside {
    margin-top: 26px;
}

.tm-guide-inside h2 {
    font-size: 22px;
    line-height: 1.25;
}

.tm-guide-inside ul {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

/* blue ticks */
.tm-guide-inside li {
    position: relative;
    padding: 6px 0 6px 30px;
    font-size: 16px;
}

.tm-guide-inside li::before {
    content: "";
    position: absolute;
    top: 13px;
    left: 1px;
    width: 13px;
    height: 8px;
    border-bottom: 2.6px solid var(--tm-accent);
    border-left: 2.6px solid var(--tm-accent);
    border-radius: 1px;
    transform: rotate(-48deg);
}

/* the download card: pinned beside the copy while it scrolls, in a dark grey moving ring */
.tm-guide-shell {
    position: sticky;
    top: 104px;
}

.tm-guide-shell .tm-form-halo {
    opacity: .45;
    background: conic-gradient(from var(--tm-ring-angle), var(--tm-transparent) 0deg 118deg, var(--tm-ring-grey-dark) 172deg, var(--tm-ring-grey-rest) 212deg, var(--tm-ring-grey-light) 248deg, var(--tm-ring-grey-rest) 288deg, var(--tm-ring-grey-dark) 322deg, var(--tm-transparent) 356deg 360deg);
}

.tm-guide-shell .tm-form-frame {
    background: conic-gradient(from var(--tm-ring-angle), var(--tm-ring-grey-rest) 0deg 118deg, var(--tm-ring-grey-mid) 172deg, var(--tm-ring-grey-rest) 212deg, var(--tm-ring-grey-pale) 248deg, var(--tm-ring-grey-rest) 288deg, var(--tm-ring-grey-mid) 322deg, var(--tm-ring-grey-rest) 356deg);
}

.tm-guide-shell .tm-form-card h2 {
    font-size: 26px;
    line-height: 1.15;
}

.tm-guide-sub {
    margin-top: 6px;
    font-size: 15px;
    color: var(--tm-text-muted);
}

.tm-guide-sub b {
    font-weight: 600;
    color: var(--tm-accent-strong);
}

.tm-guide-shell .tm-form {
    margin-top: 22px;
}

/* the write-up, and the cover pinned beside it */
/* below a rule across the page, as the design's sections are */
.tm-guide-body {
    padding-top: 84px;
}

.tm-guide-body .tm-detail-split {
    margin-top: 0;
}

.tm-guide-cover {
    position: sticky;
    top: 104px;
}

.tm-guide-cover .tm-detail-image {
    margin-top: 6px;
}

@media (max-width: 980px) {
    .tm-detail-split {
        grid-template-columns: minmax(0, 1fr);
        gap: 38px;
    }

    .tm-guide-hero {
        padding-bottom: 64px;
    }

    .tm-guide-shell,
    .tm-guide-cover {
        position: static;
    }

    /* the cover above the write-up */
    .tm-guide-body .tm-detail-split {
        gap: 0;
    }

    .tm-guide-cover {
        order: -1;
        margin-bottom: 34px;
    }
}

@media (max-width: 560px) {
    .tm-detail-facts dd {
        font-size: 15px;
        white-space: nowrap;
    }

    /* get to the form faster: just "Free guide" */
    .tm-guide-hero .tm-topic-pill {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tm-guide-shell .tm-form-frame {
        background: var(--tm-ring-grey-rest);
    }
}

/* the thank-you page's "Get started" box, close under the card (the hero already ends with its own space) */
.tm-guide-after {
    padding-top: 0;
}

/* the thank-you page's left column: the guide on its way (pill, title, cover, "What's inside") */
.tm-guide-sent .tm-detail-pills {
    margin-top: 0;
}

.tm-guide-sent-title {
    margin-top: 16px;
    font-size: clamp(28px, 3.4vw, 40px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--tm-text-strong);
}

.tm-guide-sent .tm-detail-image {
    margin-top: 26px;
}

/* ---------- webinar page (Webinars/Webinar, #2582) ----------
   Upcoming ("Webinar-detail-Sign Up light-v2"): the session (pills, title, Date/Time/Length, intro, speakers) beside
   the registration card in the orange moving ring; the write-up with the hero image beside it; speaker cards; "Can't
   make the 25th?". On demand ("On Demand webinar" templates): title and intro over the recording in a blue moving ring,
   slides, the write-up, speaker cards, "Try it on your own data". Both share tm-detail-split and tm-detail-facts with
   the guide page. */

.tm-webinar-hero {
    padding-bottom: 84px;
}

.tm-webinar-hero .tm-detail-pills {
    margin-top: 0;
}

.tm-webinar-hero h1 {
    max-width: none;
}

.tm-webinar-hero .tm-detail-lede {
    margin-top: 24px;
}

/* a round headshot (hero hosts and speaker cards) */
.tm-headshot {
    display: block;
    flex: none;
    overflow: hidden;
    border: 1.5px solid var(--tm-card-frame);
    border-radius: 50%;
    background: var(--tm-surface-elevated);
}

.tm-headshot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* the speakers under the hero's intro */
.tm-webinar-hosts {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 40px;
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
}

.tm-webinar-hosts li {
    display: flex;
    align-items: center;
    gap: 16px;
}

.tm-webinar-hosts .tm-headshot {
    width: 76px;
    height: 76px;
}

.tm-webinar-hosts span {
    font-size: 13.5px;
    line-height: 1.35;
    color: var(--tm-text-muted);
}

.tm-webinar-hosts b {
    display: block;
    font-size: 15.5px;
    line-height: 1.3;
    white-space: nowrap;
    color: var(--tm-text-strong);
}

/* the registration card: pinned beside the copy, in the orange moving ring */
.tm-webinar-reg-shell {
    position: sticky;
    top: 104px;
}

.tm-webinar-reg-shell .tm-form-halo {
    opacity: .55;
    background: conic-gradient(from var(--tm-ring-angle), var(--tm-transparent) 0deg 118deg, var(--tm-cta-ring-dark) 172deg, var(--tm-cta) 212deg, var(--tm-cta-ring-light) 248deg, var(--tm-cta) 288deg, var(--tm-cta-ring-dark) 322deg, var(--tm-transparent) 356deg 360deg);
}

.tm-webinar-reg-shell .tm-form-frame {
    background: conic-gradient(from var(--tm-ring-angle), var(--tm-cta-ring-rest) 0deg 118deg, var(--tm-cta-gradient-bottom) 172deg, var(--tm-cta-ring-mid) 212deg, var(--tm-cta-ring-pale) 248deg, var(--tm-cta-ring-mid) 288deg, var(--tm-cta-gradient-bottom) 322deg, var(--tm-cta-ring-rest) 356deg);
}

.tm-webinar-reg-shell .tm-form-card h2 {
    font-size: 28px;
    line-height: 1.15;
}

.tm-webinar-reg-starts {
    margin-top: 8px;
    font-size: 16px;
}

.tm-webinar-reg-starts b {
    font-weight: 700;
    color: var(--tm-cta-strong);
}

.tm-webinar-reg-shell .tm-form {
    margin-top: 22px;
}

/* the write-up, with the hero image pinned beside it at its own shape */
/* below a rule across the page, as the design's sections are */
.tm-webinar-body {
    padding-top: 84px;
}

.tm-webinar-side {
    position: sticky;
    top: 104px;
}

.tm-webinar-side-image {
    overflow: hidden;
    margin-top: 6px;
    border: 1px solid var(--tm-border);
    border-radius: 20px;
    background: var(--tm-surface-inverse);
}

.tm-webinar-side-image img {
    display: block;
    width: 100%;
    height: auto;
}

/* speaker cards */
.tm-webinar-speakers-h {
    margin-top: 72px;
    font-size: clamp(30px, 3.8vw, 42px);
    line-height: 1.08;
}

.tm-webinar-speakers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin-top: 34px;
}

.tm-webinar-speaker {
    display: flex;
    align-items: flex-start;
    gap: 26px;
    padding: 32px;
    border: 1.5px solid var(--tm-card-frame);
    border-radius: 20px;
    background: var(--tm-surface-raised);
    box-shadow: 0 1px 2px var(--tm-card-shadow);
}

.tm-webinar-speaker .tm-headshot {
    width: 140px;
    height: 140px;
}

.tm-webinar-speaker h3 {
    font-size: 21px;
}

.tm-webinar-speaker-role {
    margin-top: 4px;
    font-family: var(--tm-font-mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tm-accent-strong);
}

.tm-webinar-speaker p:not(.tm-webinar-speaker-role) {
    margin-top: 12px;
    font-size: 15.5px;
    color: var(--tm-text-muted);
}

/* "Can't make the 25th?", "Try it on your own data": the newsletter block's box with two buttons */
.tm-webinar-band {
    margin-top: 64px;
}

.tm-webinar-band .tm-news-block-copy {
    flex: 1 1 380px;
}

.tm-webinar-band .tm-news-block-sub {
    max-width: 44ch;
}

.tm-webinar-band-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* on demand: title beside the intro and facts, then the recording */
.tm-webinar-head {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 56px;
    align-items: end;
    margin-top: 30px;
}

.tm-webinar-head .tm-detail-lede {
    margin-top: 0;
}

.tm-webinar-hero-rec {
    padding-bottom: 72px;
}

.tm-webinar-player {
    position: relative;
    max-width: 980px;
    margin: 44px auto 0;
}

.tm-webinar-player-halo {
    position: absolute;
    inset: -9px;
    border-radius: 31px;
    pointer-events: none;
    opacity: .6;
    filter: blur(17px);
    background: conic-gradient(from var(--tm-ring-angle), var(--tm-transparent) 0deg 118deg, var(--tm-ring-dark) 172deg, var(--tm-accent) 212deg, var(--tm-ring-light) 248deg, var(--tm-accent) 288deg, var(--tm-ring-dark) 322deg, var(--tm-transparent) 356deg 360deg);
    animation: tm-ring-spin 9s linear infinite;
}

.tm-webinar-player-frame {
    position: relative;
    padding: 3px;
    border-radius: 25px;
    background: conic-gradient(from var(--tm-ring-angle), var(--tm-ring-rest-blue) 0deg 118deg, var(--tm-ring-mid) 172deg, var(--tm-accent) 212deg, var(--tm-ring-pale) 248deg, var(--tm-accent) 288deg, var(--tm-ring-mid) 322deg, var(--tm-ring-rest-blue) 356deg);
    animation: tm-ring-spin 9s linear infinite;
}

.tm-webinar-video {
    position: relative;
    overflow: hidden;
    margin: 0;
    aspect-ratio: 16 / 9;
    border-radius: 22px;
    background: var(--tm-surface-inverse);
}

.tm-webinar-video > .tm-item-picture,
.tm-webinar-video > .tm-item-photo,
.tm-webinar-video > .tm-item-fallback,
.tm-webinar-video .tm-yt-play > .tm-item-picture,
.tm-webinar-video .tm-yt-play > .tm-item-photo,
.tm-webinar-video .tm-yt-play > .tm-item-fallback {
    position: absolute;
    inset: 0;
}

.tm-webinar-video .tm-yt-icon {
    width: 92px;
    height: 92px;
}

/* the running time on the poster */
.tm-webinar-video-len {
    position: absolute;
    right: 18px;
    bottom: 16px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--tm-surface-inverse);
    font-family: var(--tm-font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--tm-text-inverse);
}

.tm-webinar-under {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 22px;
    margin-top: 28px;
}

a.tm-btn.tm-webinar-slides {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.tm-webinar-slides svg {
    width: 17px;
    height: 17px;
}

/* the recording's write-up at reading width */
.tm-webinar-hero-rec + .tm-webinar-body .tm-rt {
    max-width: 740px;
}

@media (max-width: 980px) {
    .tm-webinar-hero {
        padding-bottom: 64px;
    }

    .tm-webinar-reg-shell,
    .tm-webinar-side {
        position: static;
    }

    /* get to the form faster: the speakers have their own cards further down */
    .tm-webinar-hosts {
        display: none;
    }

    .tm-webinar-side {
        order: -1;
        margin-bottom: 34px;
    }

    .tm-webinar-body .tm-detail-split {
        gap: 0;
    }

    .tm-webinar-head {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .tm-webinar-speakers {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .tm-webinar-band {
        padding: 32px 24px;
    }

    .tm-webinar-speaker {
        flex-direction: column;
        gap: 16px;
        padding: 26px 22px;
    }

    .tm-webinar-video .tm-yt-icon {
        width: 64px;
        height: 64px;
    }
}

@media (max-width: 560px) {
    .tm-webinar-hero .tm-topic-pill {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tm-webinar-reg-shell .tm-form-frame {
        background: var(--tm-cta);
    }

    .tm-webinar-player-halo {
        display: none;
    }

    .tm-webinar-player-frame {
        background: var(--tm-accent);
        animation: none;
    }
}

/* ============================================================
   Connector page (#2573): Views/Shared/_TuggerPage, the same template for every connector. tm-cp- is
   this page's own components; it reuses the hero, section heads, question cards, steps, privacy panel,
   stories, quotes, price block, FAQ, final box and connector cards from elsewhere in this file.
   ============================================================ */

/* hero: the copy alone takes the width when the connector has no chat examples */
.tm-cp-hero-solo > div {
    max-width: 860px;
}

.tm-cp-lockup {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 14px;
    margin-bottom: 26px;
}

.tm-cp-lockup-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    padding: 11px;
    border: 1.5px solid var(--tm-accent);
    border-radius: 18px;
    background: var(--tm-surface-raised);
    box-shadow: 0 0 6px var(--tm-accent-frame-glow-tight), 0 0 28px var(--tm-accent-frame-glow-wide);
}

.tm-cp-lockup-tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tm-cp-lockup-plus {
    font-size: 22px;
    font-weight: 600;
    color: var(--tm-cta);
}

.tm-cp-lockup-tugger {
    display: block;
    width: auto;
    height: 30px;
}

/* request access and coming soon: a status pill over the heading */
.tm-cp-status {
    display: inline-block;
    margin-bottom: 14px;
    padding: 3px 12px;
    border: 1px solid var(--tm-cta-tint-border);
    border-radius: 999px;
    background: var(--tm-cta-tint);
    font-family: var(--tm-font-mono);
    font-size: 11.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tm-cta-strong);
}

.tm-cp-trial {
    margin-top: 14px;
    font-size: 15px;
    font-weight: 600;
    color: var(--tm-text-muted);
}

.tm-cp-trial + .tm-compat {
    margin-top: 22px;
}

.tm-cp-demo-note {
    margin-top: 12px;
    text-align: center;
    font-family: var(--tm-font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tm-text-muted);
}

/* what does the connector do: the definition, and the key data chips beside it */
.tm-cp-define {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: start;
    gap: 56px;
}

.tm-cp-define-solo {
    grid-template-columns: 1fr;
}

.tm-cp-define .tm-sec-head {
    margin-bottom: 0;
}

.tm-cp-answer {
    margin-top: 18px;
    font-size: 21px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--tm-text-strong);
}

.tm-cp-syncs h3 {
    font-size: 19px;
}

.tm-cp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.tm-cp-chip {
    padding: 7px 14px;
    border: 1px solid var(--tm-accent-tint-border);
    border-radius: 999px;
    background: var(--tm-accent-tint);
    font-size: 15px;
    font-weight: 600;
    color: var(--tm-accent-strong);
}

.tm-cp-askmore {
    margin-top: 18px;
    font-size: 16px;
    font-weight: 700;
}

.tm-cp-askmore a:link,
.tm-cp-askmore a:visited {
    color: var(--tm-accent-strong);
}

/* what can you ask: the question pills in Tugger blue here (orange stays the home page's) */
.tm-cp-questions .tm-question-tags span {
    border-color: var(--tm-accent-tint-border);
    background: var(--tm-accent-tint);
    color: var(--tm-accent-strong);
}

/* better with company: logo squares only, no links, so readers stay on the page (the cards at the foot link) */
.tm-cp-company {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    margin-top: 34px;
    padding: 24px 28px;
    border: 1px solid var(--tm-border);
    border-radius: 20px;
    background: var(--tm-surface-raised);
    box-shadow: 0 1px 2px var(--tm-card-shadow);
}

.tm-cp-company-copy h3 {
    font-size: 21px;
}

.tm-cp-company-copy p {
    margin-top: 4px;
    font-size: 15.5px;
    color: var(--tm-text-muted);
}

.tm-cp-company-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.tm-cp-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
    padding: 11px;
    border: 1.5px solid var(--tm-border);
    border-radius: 16px;
    background: var(--tm-surface-raised);
}

.tm-cp-tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tm-cp-tile-more {
    padding: 0;
    font-family: var(--tm-font-mono);
    font-size: 14px;
    font-weight: 600;
    color: var(--tm-accent-strong);
}

.tm-cp-mid-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 34px;
}

a.tm-cp-btn-soft:link,
a.tm-cp-btn-soft:visited {
    border: 1px solid var(--tm-accent-tint-border);
    background: var(--tm-accent-tint);
    color: var(--tm-accent-strong);
}

a.tm-cp-btn-soft:hover {
    border-color: var(--tm-accent);
}

/* MCP: the one-way flow diagram */
.tm-cp-flow {
    margin-top: 44px;
    padding: 34px 30px 26px;
    border: 1px solid var(--tm-border);
    border-radius: 22px;
    background: var(--tm-surface-raised);
    box-shadow: 0 0 0 1px var(--tm-accent-soft-glow), 0 0 44px var(--tm-accent-frame-glow);
}

.tm-cp-flow-row {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 10px;
}

.tm-cp-node {
    flex: 1 1 0;
    min-width: 0;
    padding: 20px 14px;
    border: 1.5px solid var(--tm-border);
    border-radius: 16px;
    background: linear-gradient(165deg, var(--tm-surface-raised), var(--tm-card-wash));
    text-align: center;
}

.tm-cp-node-mcp {
    border-color: var(--tm-cta);
    background: var(--tm-cta-tint);
}

.tm-cp-node-img {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 44px;
    margin-bottom: 10px;
}

.tm-cp-node-img img {
    display: block;
    width: auto;
    max-width: 120px;
    max-height: 44px;
}

.tm-cp-node-ais img {
    height: 26px;
}

.tm-cp-node .tm-cp-node-big {
    display: inline;
    margin-top: 0;
    font-family: var(--tm-font-mono);
    font-size: 26px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--tm-cta-strong);
}

.tm-cp-node b {
    display: block;
    font-size: 16.5px;
    color: var(--tm-text-strong);
}

.tm-cp-node span {
    display: block;
    margin-top: 3px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--tm-text-muted);
}

.tm-cp-arrow {
    flex: 0 0 46px;
    align-self: center;
    width: 46px;
    overflow: visible;
}

.tm-cp-arrow path {
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tm-cp-arrow-track,
.tm-cp-arrow-head {
    stroke: var(--tm-climb);
    stroke-width: 2.6;
}

.tm-cp-arrow-glow {
    stroke: var(--tm-accent);
    stroke-width: 7;
    stroke-dasharray: 10 60;
    opacity: 0;
}

.tm-cp-arrow-core {
    stroke: var(--tm-climb-flash);
    stroke-width: 2.6;
    stroke-dasharray: 10 60;
    opacity: 0;
}

.tm-cp-flow-back {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px dashed var(--tm-dashed-border);
    font-family: var(--tm-font-mono);
    font-size: 12.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
    color: var(--tm-text-muted);
}

.tm-cp-flow-x {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 22px;
    height: 22px;
    border: 1.5px solid var(--tm-cta);
    border-radius: 50%;
    color: var(--tm-cta);
}

.tm-cp-flow-x svg {
    display: block;
}

/* a point of light runs along each arrow in turn and each step lights as it arrives; one direction only */
@media (prefers-reduced-motion: no-preference) {
    .tm-cp-arrow-glow,
    .tm-cp-arrow-core,
    .tm-cp-arrow-head {
        animation-duration: 4s;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
    }

    .tm-cp-arrow-glow {
        animation-name: tm-cp-flow-glow;
    }

    .tm-cp-arrow-core {
        animation-name: tm-cp-flow-core;
    }

    .tm-cp-arrow-head {
        animation-name: tm-cp-flow-head;
        animation-timing-function: linear;
    }

    .tm-cp-arrow-2 path {
        animation-delay: 1s;
    }

    .tm-cp-arrow-3 path {
        animation-delay: 2s;
    }

    .tm-cp-node {
        animation: tm-cp-flow-lit 4s ease-out infinite;
    }

    .tm-cp-node-1 {
        animation-delay: -0.24s;
    }

    .tm-cp-node-2 {
        animation-delay: 0.64s;
    }

    .tm-cp-node-mcp {
        animation-name: tm-cp-flow-lit-mcp;
        animation-delay: 1.64s;
    }

    .tm-cp-node-4 {
        animation-delay: 2.64s;
    }
}

@keyframes tm-cp-flow-glow {
    0% { stroke-dashoffset: 22; opacity: 0; }
    3% { opacity: 0.95; }
    22% { stroke-dashoffset: -32; opacity: 0.95; }
    27%, 100% { stroke-dashoffset: -32; opacity: 0; }
}

@keyframes tm-cp-flow-core {
    0% { stroke-dashoffset: 8; opacity: 0; }
    3% { opacity: 1; }
    22% { stroke-dashoffset: -46; opacity: 1; }
    26%, 100% { stroke-dashoffset: -46; opacity: 0; }
}

@keyframes tm-cp-flow-head {
    0%, 19% { stroke: var(--tm-climb); }
    23% { stroke: var(--tm-climb-flash); }
    32%, 100% { stroke: var(--tm-climb); }
}

@keyframes tm-cp-flow-lit {
    0% { border-color: var(--tm-border); box-shadow: 0 0 0 var(--tm-transparent); }
    6% { border-color: var(--tm-accent); box-shadow: 0 0 6px var(--tm-accent-frame-glow-tight), 0 0 24px var(--tm-accent-frame-glow-tight); }
    28%, 100% { border-color: var(--tm-border); box-shadow: 0 0 0 var(--tm-transparent); }
}

@keyframes tm-cp-flow-lit-mcp {
    0% { box-shadow: 0 0 0 var(--tm-transparent); }
    6% { box-shadow: 0 0 6px var(--tm-cta-glow), 0 0 24px var(--tm-cta-glow); }
    28%, 100% { box-shadow: 0 0 0 var(--tm-transparent); }
}

/* read-only: the slogan beside an orange box like the diagram's MCP step */
.tm-cp-ro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 48px;
    margin-top: 64px;
}

.tm-cp-ro > div {
    padding: 28px 30px;
    border: 1.5px solid var(--tm-cta);
    border-radius: 16px;
    background: linear-gradient(var(--tm-cta-tint), var(--tm-cta-tint)), var(--tm-surface-raised);
}

.tm-cp-ro h3 {
    font-size: clamp(24px, 3vw, 30px);
    line-height: 1.15;
}

.tm-cp-ro p {
    margin-top: 10px;
    font-size: 16.5px;
}

.tm-cp-ro .tm-cp-answer {
    font-size: 19px;
}

.tm-cp-ro .tm-cp-slam {
    margin-top: 0;
    font-size: clamp(38px, 5.2vw, 62px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--tm-text-strong);
}

.tm-cp-slam span {
    display: block;
    color: var(--tm-accent);
}

.tm-cp-why-h {
    margin-top: 56px;
    font-size: 24px;
}

.tm-cp-why {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 48px;
    margin-top: 18px;
    padding: 0;
    list-style: none;
}

.tm-cp-why li {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 16px 0;
    border-top: 1px solid var(--tm-divider);
}

.tm-cp-why .tm-guard-tick {
    color: var(--tm-accent);
    stroke: var(--tm-accent);
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    margin-top: 3px;
}

.tm-cp-why strong {
    display: block;
    font-size: 17px;
    color: var(--tm-text-strong);
}

.tm-cp-why span {
    display: block;
    margin-top: 2px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--tm-text-muted);
}

.tm-cp-native {
    margin-top: 28px;
    padding: 16px 18px;
    border: 1px solid var(--tm-border);
    border-radius: 14px;
    font-size: 15.5px;
    color: var(--tm-text-muted);
}

/* dashboards: copy beside the illustrative mock */
.tm-cp-dashsplit {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: end;
    gap: 56px;
}

.tm-cp-dashsplit-solo {
    grid-template-columns: 1fr;
}

.tm-cp-dashsplit-solo > div {
    max-width: 860px;
}

.tm-cp-dashsplit h2 {
    font-size: clamp(34px, 4.8vw, 52px);
    font-weight: 700;
    line-height: 1.04;
}

.tm-cp-dashsplit p {
    margin-top: 14px;
}

.tm-cp-beats p {
    margin-top: 6px;
    font-size: 18px;
    font-weight: 600;
    color: var(--tm-text-strong);
}

.tm-cp-callout {
    display: flex;
    margin-top: 26px;
    padding: 16px 18px;
    border: 1px solid var(--tm-border);
    border-radius: 14px;
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--tm-text-muted);
}

.tm-cp-callout strong {
    font-weight: 600;
    color: var(--tm-text);
}

.tm-cp-dash {
    padding: 22px;
    border: 1px solid var(--tm-border);
    border-radius: 20px;
    background: var(--tm-surface-raised);
    box-shadow: 0 0 0 1px var(--tm-accent-soft-glow), 0 0 44px var(--tm-accent-frame-glow);
}

/* the request and the reply icon look as they do in the hero's chat demo (.tm-chat-question, .tm-chat-avatar) */
.tm-cp-dash-ask {
    width: fit-content;
    max-width: 94%;
    margin-left: auto;
    padding: 11px 14px;
    border-radius: 14px 4px 14px 14px;
    background: var(--tm-surface-elevated);
    font-size: 14.5px;
    color: var(--tm-text-strong);
}

.tm-cp-dash-built {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    font-size: 14px;
    color: var(--tm-text-muted);
}

.tm-cp-dash-av {
    display: flex;
    flex: 0 0 25px;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border: 1px solid var(--tm-cta-tint-border);
    border-radius: 8px;
    background: var(--tm-cta-tint);
    color: var(--tm-cta);
}

.tm-cp-dash-av svg {
    display: block;
    width: 14px;
    height: 14px;
}

.tm-cp-dash-panel {
    margin-top: 14px;
    padding: 16px;
    border: 1px solid var(--tm-border);
    border-radius: 14px;
}

.tm-cp-dash-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.tm-cp-dash-title b {
    font-size: 16px;
    color: var(--tm-text-strong);
}

.tm-cp-dash-title span {
    padding: 2px 10px;
    border: 1px solid var(--tm-cta-tint-border);
    border-radius: 999px;
    background: var(--tm-cta-tint);
    font-family: var(--tm-font-mono);
    font-size: 11px;
    color: var(--tm-cta-strong);
}

.tm-cp-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 14px;
}

.tm-cp-kpi {
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--tm-surface);
}

.tm-cp-kpi-v {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--tm-text-strong);
}

.tm-cp-kpi-l {
    font-size: 12px;
    line-height: 1.3;
    color: var(--tm-text-muted);
}

.tm-cp-bars {
    display: grid;
    gap: 9px;
    margin-top: 16px;
}

.tm-cp-bar {
    display: grid;
    grid-template-columns: 104px 1fr 56px;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--tm-text);
}

.tm-cp-bar i {
    display: block;
    box-sizing: border-box;
    height: 12px;
    border: 1px solid var(--tm-accent-tint-border);
    border-radius: 6px;
    background: var(--tm-chart-bar);
}

.tm-cp-bar em {
    font-style: normal;
    font-weight: 700;
    text-align: right;
    color: var(--tm-text-strong);
}

/* bar lengths in 5% steps (ConnectorPageModel.BarStep), so no width is ever written inline */
.tm-cp-w5 { width: 5%; } .tm-cp-w10 { width: 10%; } .tm-cp-w15 { width: 15%; } .tm-cp-w20 { width: 20%; }
.tm-cp-w25 { width: 25%; } .tm-cp-w30 { width: 30%; } .tm-cp-w35 { width: 35%; } .tm-cp-w40 { width: 40%; }
.tm-cp-w45 { width: 45%; } .tm-cp-w50 { width: 50%; } .tm-cp-w55 { width: 55%; } .tm-cp-w60 { width: 60%; }
.tm-cp-w65 { width: 65%; } .tm-cp-w70 { width: 70%; } .tm-cp-w75 { width: 75%; } .tm-cp-w80 { width: 80%; }
.tm-cp-w85 { width: 85%; } .tm-cp-w90 { width: 90%; } .tm-cp-w95 { width: 95%; } .tm-cp-w100 { width: 100%; }

.tm-cp-dash-foot {
    margin-top: 14px;
    font-size: 13px;
    color: var(--tm-text-muted);
}

/* the privacy panel's "not held" cell: a muted dash in place of a setting (#2708) */
.tm-pd-state-na {
    border-color: var(--tm-transparent);
    background: none;
    color: var(--tm-line-muted);
}

/* the three steps' climbing line and arrowhead in Tugger blue here, as the connector page design draws them (the home
   page keeps its darker line); the arrowhead's flash keyframes read the same property, so they follow */
.tm-cp-page .tm-climb {
    --tm-climb: var(--tm-accent);
}

/* the closing box's ring rests on warm orange rather than the cool grey, as the design has it; with reduced motion
   (no spinning arc) it is a plain light orange border */
.tm-cp-final .tm-final-frame {
    background: conic-gradient(from var(--tm-ring-angle), var(--tm-cta-ring-rest-warm) 0deg 118deg, var(--tm-cta-gradient-bottom) 172deg, var(--tm-cta-ring-mid) 212deg, var(--tm-cta-ring-pale) 248deg, var(--tm-cta-ring-mid) 288deg, var(--tm-cta-gradient-bottom) 322deg, var(--tm-cta-ring-rest-warm) 356deg);
}

@media (prefers-reduced-motion: reduce) {
    .tm-cp-final .tm-final-frame {
        background: var(--tm-cta-ring-mid);
    }
}

/* the closing box's "Are you?" in orange, as the design has it (the box is the page's one warm moment) */
.tm-cp-final .tm-final-block .tm-hl {
    color: var(--tm-cta);
}

/* this page's links in Tugger blue: the stories' calls to action (orange elsewhere) */
.tm-cp-page .tm-story-link,
.tm-cp-page a.tm-cta-link:link,
.tm-cp-page a.tm-cta-link:visited {
    color: var(--tm-accent-strong);
}

/* explore more: the Connectors page cards, and a card with no landing page (#2707) */
.tm-cp-explore {
    margin-top: 36px;
}

.tm-conn-nopage {
    cursor: default;
}

@media (max-width: 900px) {
    .tm-cp-define,
    .tm-cp-dashsplit,
    .tm-cp-ro {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .tm-cp-dashsplit {
        align-items: start;
    }
}

@media (max-width: 820px) {
    .tm-cp-flow-row {
        flex-direction: column;
    }

    .tm-cp-arrow {
        flex-basis: 30px;
        height: 30px;
        transform: rotate(90deg);
    }

    .tm-cp-why {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .tm-cp-company {
        padding: 22px;
    }

    .tm-cp-tile {
        flex-basis: 52px;
        width: 52px;
        height: 52px;
        padding: 9px;
    }

    .tm-cp-flow {
        padding: 24px 18px 20px;
    }
}

@media (max-width: 460px) {
    .tm-cp-bar {
        grid-template-columns: 84px 1fr 48px;
    }

    .tm-cp-kpi-v {
        font-size: 19px;
    }
}