/* ==========================================================================
   Richscripts — legacy section skin
   --------------------------------------------------------------------------
   Re-skins the 2006-era product-section markup (#header / #navigation /
   #content / #footer, and the #Common* + #CommonTabBar family) using the same
   design tokens as the modern pages.

   Load order on a legacy page must be:
       1. the section's own stylesheet (chat.css, gallery.css, ...)
       2. richscripts-2026.css   -> design tokens, typography, dark mode
       3. this file              -> overrides the legacy layout

   Everything here is written to beat the legacy selectors it replaces, so the
   specificity is deliberately matched (e.g. "#content #leftcol", not
   ".leftcol"). Avoid lowering it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Base
   -------------------------------------------------------------------------- */

.rs-legacy-page *,
.rs-legacy-page *::before,
.rs-legacy-page *::after {
    box-sizing: border-box;
}

.rs-legacy-page {
    background-color: var(--rs-bg);
    color: var(--rs-text);
    font-family: var(--rs-font-sans);
    font-size: 16px;
    line-height: 1.65;
    margin: 0;
    /* Legacy pages set fixed pixel widths; never let them force a sideways scroll. */
    overflow-x: hidden;
}

.rs-legacy-page img {
    max-width: 100%;
    height: auto;
}

.rs-legacy-page a {
    color: var(--rs-link);
    text-decoration: none;
}

.rs-legacy-page a:hover {
    color: var(--rs-link-hover);
    text-decoration: underline;
}

.rs-legacy-page h1,
.rs-legacy-page h2,
.rs-legacy-page h3,
.rs-legacy-page h4,
.rs-legacy-page h5,
.rs-legacy-page h6 {
    font-family: var(--rs-font-display);
    color: var(--rs-text);
    letter-spacing: -.02em;
    line-height: 1.2;
    font-weight: 700;
}

.rs-legacy-page h1 {
    font-size: 2rem;
    margin: 0 0 1rem;
}

.rs-legacy-page h2 {
    font-size: 1.6rem;
    margin: 2rem 0 .75rem;
}

.rs-legacy-page h3 {
    font-size: 1.25rem;
    margin: 1.75rem 0 .5rem;
}

.rs-legacy-page h4 {
    font-size: 1.05rem;
    margin: 1.25rem 0 .35rem;
}

.rs-legacy-page p,
.rs-legacy-page li,
.rs-legacy-page td {
    color: var(--rs-text-muted);
}

/* Legacy content areas are full-width, so prose ran to ~120 characters a line.
   Cap the measure for readability; it is a max, so narrow cells are unaffected.
   Table cells are excluded -- a measure there would fight the column widths. */
.rs-legacy-page #content p,
.rs-legacy-page #content li,
.rs-legacy-page #Common p,
.rs-legacy-page #Common li,
.rs-legacy-page #leftcol p,
.rs-legacy-page #leftcol li {
    max-width: 74ch;
}

.rs-legacy-page td p,
.rs-legacy-page td li,
.rs-legacy-page .Grid p,
.rs-legacy-page .datatable p {
    max-width: none;
}

.rs-legacy-page hr {
    border: 0;
    border-top: 1px solid var(--rs-border);
    margin: 2rem 0;
}

/* Legacy pages lean on <b>/.strong for section labels. */
.rs-legacy-page .strong {
    font-family: var(--rs-font-display);
    color: var(--rs-text);
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   1a. Light skin for demo + documentation pages
   --------------------------------------------------------------------------
   The CuteEditor demos and the generated WebHelp guides lay themselves out
   with fixed-size tables and inline pixel maths. Restyling their layout breaks
   them, so those pages get .rs-legacy-doc instead of .rs-legacy-page: shared
   typography, colour and chrome only -- deliberately no box-sizing change, no
   table rules, no float or width overrides.
   -------------------------------------------------------------------------- */

.rs-legacy-doc {
    background-color: var(--rs-bg);
    color: var(--rs-text);
    font-family: var(--rs-font-sans);
    line-height: 1.6;
}

/* These use :where() so they carry ZERO specificity and only supply a default.
   Written as ".rs-legacy-doc a" they scored (0,2,0) and beat Bootstrap's own
   ".btn-primary { color: #fff }" (0,1,0), repainting every button's label with
   the link colour -- blue text on a blue button. Any component class now wins. */
:where(.rs-legacy-doc) h1,
:where(.rs-legacy-doc) h2,
:where(.rs-legacy-doc) h3,
:where(.rs-legacy-doc) h4 {
    font-family: var(--rs-font-display);
    color: var(--rs-text);
    letter-spacing: -.02em;
    font-weight: 700;
}

:where(.rs-legacy-doc) a {
    color: var(--rs-link);
}

:where(.rs-legacy-doc) a:hover {
    color: var(--rs-link-hover);
}

/* --------------------------------------------------------------------------
   1a-ii. Light-only sections
   --------------------------------------------------------------------------
   Pages built on theme.min.css (the Bootstrap "Front" template) have no dark
   variants: their navbars, cards and tables are all authored light. Letting the
   global theme darken only the page background produced a dark page wrapped
   around light components. These sections opt out by re-declaring the light
   tokens locally, so they stay internally consistent whatever the site theme.
   -------------------------------------------------------------------------- */

[data-theme="dark"] .rs-force-light {
    --rs-bg: #ffffff;
    --rs-bg-subtle: var(--rs-slate-50);
    --rs-bg-inset: var(--rs-slate-100);
    --rs-surface: #ffffff;
    --rs-surface-raised: #ffffff;
    --rs-border: var(--rs-slate-200);
    --rs-border-strong: var(--rs-slate-300);
    --rs-text: var(--rs-slate-900);
    --rs-text-muted: var(--rs-slate-600);
    --rs-text-subtle: var(--rs-slate-500);
    --rs-link: var(--rs-accent);
    --rs-link-hover: var(--rs-accent-strong);
    --rs-accent: #2563eb;
    --rs-accent-strong: #1d4ed8;
    color-scheme: light;
}

/* The toggle would be a dead control on a light-only page. */
.rs-force-light .rs-legacy-bar__theme {
    display: none;
}

/* These templates end in a dark navy footer. The site-wide "a { color: link }"
   rule painted its links accent-blue on that ground (2.4:1), and Bootstrap's
   own .text-white-50 only reached 4.4:1. Both are lifted here. */
.rs-legacy-doc .bg-dark a,
.rs-legacy-doc .bg-dark a:hover {
    color: var(--rs-slate-100);
}

.rs-legacy-doc .bg-dark .text-white-50 {
    color: rgba(255, 255, 255, .74) !important;
}

/* --------------------------------------------------------------------------
   1b. Global site bar
   --------------------------------------------------------------------------
   Legacy product sections had no route back to the main site. This slim bar
   sits above each section's own masthead and carries the shared identity.
   -------------------------------------------------------------------------- */

.rs-legacy-bar {
    background: var(--rs-inverse-bg);
    border-bottom: 1px solid var(--rs-inverse-border);
    font-family: var(--rs-font-sans);
}

.rs-legacy-bar__inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: .5rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.rs-legacy-bar__brand {
    font-family: var(--rs-font-display);
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: -.01em;
    color: #fff;
    margin-right: auto;
}

.rs-legacy-bar__brand:hover {
    color: #fff;
    text-decoration: none;
    opacity: .85;
}

.rs-legacy-bar__nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .25rem 1.1rem;
}

.rs-legacy-bar__nav a {
    color: var(--rs-inverse-muted);
    font-size: .85rem;
    font-weight: 500;
}

.rs-legacy-bar__nav a:hover {
    color: #fff;
    text-decoration: none;
}

.rs-legacy-bar__theme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    border-radius: 999px;
    border: 1px solid var(--rs-inverse-border);
    background: transparent;
    color: var(--rs-inverse-text);
    cursor: pointer;
    flex-shrink: 0;
}

.rs-legacy-bar__theme:hover {
    background: var(--rs-inverse-border);
    color: #fff;
}

.rs-legacy-bar__theme svg {
    width: 1rem;
    height: 1rem;
    display: block;
}

/* Show the icon for the theme you'd switch *to*. */
.rs-legacy-bar__theme .rs-legacy-bar__sun {
    display: none;
}

[data-theme="dark"] .rs-legacy-bar__theme .rs-legacy-bar__sun {
    display: block;
}

[data-theme="dark"] .rs-legacy-bar__theme .rs-legacy-bar__moon {
    display: none;
}

@media (max-width: 768px) {
    .rs-legacy-bar__nav {
        gap: .25rem .85rem;
    }

    .rs-legacy-bar__nav a {
        font-size: .8rem;
    }
}

/* --------------------------------------------------------------------------
   2. Masthead
   -------------------------------------------------------------------------- */

.rs-legacy-page #header,
.rs-legacy-page #CommonHeader {
    background-color: var(--rs-surface);
    border-bottom: 1px solid var(--rs-border);
    height: auto;
    padding: .85rem 0;
    margin: 0;
    width: auto;
}

.rs-legacy-page #header-wrapper {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

/* The legacy masthead hid its wordmark behind a background image and
   text-indent: -4000px. Restore it as real, readable text. */
.rs-legacy-page #header-wrapper h1 {
    margin: 0;
    font-size: 1.15rem;
    order: -1;
}

.rs-legacy-page #header-wrapper h1 a {
    background: none;
    text-indent: 0;
    display: inline-block;
    height: auto;
    color: var(--rs-text);
    font-family: var(--rs-font-display);
    font-weight: 700;
    letter-spacing: -.02em;
}

.rs-legacy-page #header-wrapper h1 a:hover {
    color: var(--rs-link);
    text-decoration: none;
}

.rs-legacy-page #header-wrapper .info-links {
    float: none;
    display: block;
}

.rs-legacy-page #header-wrapper .info-links ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem 1rem;
    margin: 0;
    padding: 0;
}

.rs-legacy-page #header-wrapper .info-links li {
    float: none;
    margin: 0;
    font-size: .85rem;
    color: var(--rs-text-subtle);
}

/* Kill the "•" pseudo-separators; the flex gap handles spacing now. */
.rs-legacy-page #header-wrapper .info-links li:after {
    content: none;
    margin: 0;
}

.rs-legacy-page #header-wrapper .info-links li a {
    color: var(--rs-text-muted);
}

.rs-legacy-page #header-wrapper .info-links li a:hover {
    color: var(--rs-link);
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   2b. Product masthead
   --------------------------------------------------------------------------
   Replaces the layout tables the chat / messenger / live-support banners used
   to position their logo, utility links and CTA.
   -------------------------------------------------------------------------- */

.rs-legacy-masthead {
    max-width: 1180px;
    margin: 0 auto;
    padding: .35rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.rs-legacy-masthead__brand {
    display: inline-flex;
    align-items: center;
    gap: .9rem;
    text-decoration: none;
}

.rs-legacy-masthead__brand:hover {
    text-decoration: none;
}

.rs-legacy-masthead__brand img {
    max-height: 44px;
    width: auto;
}

.rs-legacy-masthead__text {
    display: block;
    line-height: 1.25;
}

.rs-legacy-masthead__title {
    display: block;
    font-family: var(--rs-font-display);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--rs-text);
}

.rs-legacy-masthead__desc {
    display: block;
    font-size: .85rem;
    color: var(--rs-text-subtle);
}

.rs-legacy-masthead__meta {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.rs-legacy-masthead__links {
    display: flex;
    align-items: center;
    gap: .25rem 1.1rem;
    flex-wrap: wrap;
}

.rs-legacy-masthead__links a {
    font-size: .85rem;
    font-weight: 500;
    color: var(--rs-text-muted);
}

.rs-legacy-masthead__links a:hover {
    color: var(--rs-text);
    text-decoration: none;
}

.rs-legacy-masthead__actions {
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* The .rs-legacy-cta--ghost variant is defined further down, immediately after
   the base .rs-legacy-cta rule — declaring it here (before the base) meant the
   base's background won on source order and the ghost button was never ghosted. */

@media (max-width: 768px) {
    .rs-legacy-masthead {
        justify-content: center;
        text-align: center;
        gap: .85rem;
    }

    .rs-legacy-masthead__meta {
        justify-content: center;
        width: 100%;
    }

    .rs-legacy-masthead__brand img {
        max-height: 36px;
    }
}

/* --------------------------------------------------------------------------
   3. Product navigation
   -------------------------------------------------------------------------- */

.rs-legacy-page #navigation,
.rs-legacy-page #CommonTabBar {
    background: var(--rs-bg-subtle);
    background-image: none;
    border-bottom: 1px solid var(--rs-border);
    height: auto;
    overflow: visible;
    margin: 0 0 2rem;
}

.rs-legacy-page #nav,
.rs-legacy-page #CommonTabBar > div {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

.rs-legacy-page #navigation ul,
.rs-legacy-page #CommonTabBar ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .15rem;
    float: none;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rs-legacy-page #navigation li,
.rs-legacy-page #CommonTabBar li {
    float: none;
    list-style: none;
    padding: 0;
    margin: 0;
    background: none;
    white-space: nowrap;
}

.rs-legacy-page #navigation li a,
.rs-legacy-page #CommonTabBar li a {
    display: block;
    padding: .7rem .85rem;
    color: var(--rs-text-muted);
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

.rs-legacy-page #navigation li a:hover,
.rs-legacy-page #CommonTabBar li a:hover {
    color: var(--rs-text);
    border-bottom-color: var(--rs-border-strong);
    text-decoration: none;
}

.rs-legacy-page #navigation li a.current,
.rs-legacy-page #navigation li a[aria-current="page"],
.rs-legacy-page #CommonTabBar li a.current,
.rs-legacy-page #CommonTabBar li a[aria-current="page"] {
    color: var(--rs-text);
    border-bottom-color: var(--rs-accent);
}

/* Image Gallery uses a flat .nav strip with "|" separators instead of a list. */
.rs-legacy-page #CommonHeader .nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .15rem;
    max-width: 1180px;
    margin: .5rem auto 0;
    padding: 0 1.25rem;
}

.rs-legacy-page #CommonHeader .nav a {
    padding: .55rem .7rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--rs-text-muted);
    border-bottom: 2px solid transparent;
}

.rs-legacy-page #CommonHeader .nav a:hover,
.rs-legacy-page #CommonHeader .nav a.current {
    color: var(--rs-text);
    border-bottom-color: var(--rs-accent);
    text-decoration: none;
}

.rs-legacy-page #CommonHeader .nav .Accent {
    display: none; /* the "|" separators */
}

/* --------------------------------------------------------------------------
   4. Content shell
   -------------------------------------------------------------------------- */

.rs-legacy-page #content,
.rs-legacy-page #CommonBody {
    clear: both;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto 4rem;
    padding: 0 1.25rem;
    background: transparent;
    border: 0;
    overflow: visible;
}

/* The chat / messenger / gallery sections wrap everything in #Common at a hard
   1050px or 820px, and paint .container and #CommonBody a fixed dark grey. */
.rs-legacy-page #Common {
    width: auto;
    max-width: 1180px;
    margin: 0 auto;
    background-color: transparent;
    text-align: left;
}

.rs-legacy-page #Common .container,
.rs-legacy-page #CommonBody,
.rs-legacy-page #CommonHeader.container {
    width: auto;
    max-width: 100%;
    background-color: transparent;
}

/* Legacy float helpers: fine on desktop, must release on small screens. */
.rs-legacy-page .left {
    float: left;
}

.rs-legacy-page .right {
    float: right;
}

/* Two-column product pages: content + sidebar. */
.rs-legacy-page .cols {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 2.5rem;
}

.rs-legacy-page #content #leftcol,
.rs-legacy-page #leftcol {
    float: none;
    display: block;
    width: auto;
    flex: 1 1 34rem;
    min-width: 0;
}

.rs-legacy-page #content #rightcol,
.rs-legacy-page #rightcol,
.rs-legacy-page #rightcolumn {
    float: none;
    width: auto;
    flex: 0 1 19rem;
    margin-left: 0;
    min-width: 0;
}

/* Legacy float-clearing helpers are inert under flex. */
.rs-legacy-page .cl,
.rs-legacy-page .clear {
    display: none;
}

/* --------------------------------------------------------------------------
   5. Sidebar cards
   -------------------------------------------------------------------------- */

.rs-legacy-page .box {
    background-color: var(--rs-surface);
    border: 1px solid var(--rs-border);
    border-radius: var(--rs-radius);
    box-shadow: none;
    margin-bottom: 1.25rem;
    padding: 1.15rem 1.25rem;
}

/* Sliced-image card tops/bottoms from the old theme. */
.rs-legacy-page .boxtop,
.rs-legacy-page .boxbottom {
    display: none;
}

.rs-legacy-page .box p.strong,
.rs-legacy-page .box > p:first-child {
    margin-top: 0;
    font-family: var(--rs-font-display);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--rs-text-subtle);
}

.rs-legacy-page ul.sidebarlist {
    list-style: none;
    padding-left: 0;
    margin: .5rem 0 0;
}

.rs-legacy-page ul.sidebarlist li {
    margin: 0;
    border-top: 1px solid var(--rs-border);
}

.rs-legacy-page ul.sidebarlist li:first-child {
    border-top: 0;
}

.rs-legacy-page ul.sidebarlist li a {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 0;
    font-size: .92rem;
    color: var(--rs-text-muted);
    font-weight: 500;
}

.rs-legacy-page ul.sidebarlist li a:hover {
    color: var(--rs-link);
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   6. Tables
   -------------------------------------------------------------------------- */

.rs-legacy-page .datatable,
.rs-legacy-page table.Grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--rs-border);
    border-radius: var(--rs-radius);
    overflow: hidden;
    font-size: .95rem;
    background: var(--rs-surface);
}

.rs-legacy-page .datatable thead tr,
.rs-legacy-page table.Grid thead tr {
    background: var(--rs-bg-subtle);
}

/* Matched on th directly, not "thead th": these legacy tables put their header
   row straight in the table with no <thead>, so a thead-scoped rule never
   applied and the pricing tables rendered with unstyled headers. */
.rs-legacy-page .datatable th,
.rs-legacy-page table.Grid th {
    text-align: left;
    padding: .8rem 1rem;
    font-family: var(--rs-font-display);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--rs-text-subtle);
    background-color: var(--rs-bg-subtle);
    border-bottom: 1px solid var(--rs-border);
}

.rs-legacy-page .datatable tbody td,
.rs-legacy-page table.Grid tbody td {
    padding: .8rem 1rem;
    border-top: 1px solid var(--rs-border);
    color: var(--rs-text-muted);
    background: none;
}

.rs-legacy-page .datatable tbody tr:first-child td {
    border-top: 0;
}

.rs-legacy-page .datatable tbody tr:hover,
.rs-legacy-page table.Grid tbody tr:hover {
    background: var(--rs-bg-subtle);
}

.rs-legacy-page .datatable h4 {
    margin: 0 0 .2rem;
    font-size: .98rem;
}

/* Wide legacy tables scroll inside their own box rather than the page. */
.rs-legacy-page .rs-legacy-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* The Image Gallery demo widget lays itself out at fixed pixel sizes in JS.
   Leave its internals alone and just stop it stretching the page. */
.rs-legacy-page #GalleryBrowser1,
.rs-legacy-page .GalleryLayout {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* --------------------------------------------------------------------------
   7. FAQ blocks
   -------------------------------------------------------------------------- */

.rs-legacy-page .faq {
    border-top: 1px solid var(--rs-border);
    padding-top: 1.25rem;
    margin-top: 1.25rem;
}

.rs-legacy-page .faq h4,
.rs-legacy-page .faq .strong {
    color: var(--rs-text);
}

.rs-legacy-page .imgBorder {
    border: 1px solid var(--rs-border);
    border-radius: var(--rs-radius-sm, .5rem);
    background: var(--rs-surface);
    padding: .25rem;
}

/* --------------------------------------------------------------------------
   8. Buttons
   -------------------------------------------------------------------------- */

/* Text CTAs that replaced the old ordernow.gif / button-download-now.jpg
   images. Not scoped to .rs-legacy-page so they also work on the doc skin. */
.rs-legacy-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .7rem 1.35rem;
    border-radius: 999px;
    background: var(--rs-accent);
    color: #fff;
    font-family: var(--rs-font-display);
    font-size: .92rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    border: 1px solid var(--rs-accent);
    transition: background-color .15s ease, border-color .15s ease;
}

.rs-legacy-cta:hover {
    background: var(--rs-accent-strong);
    border-color: var(--rs-accent-strong);
    color: #fff;
    text-decoration: none;
}

/* Dark mode lightens --rs-accent, so white label drops below AA; invert. */
[data-theme="dark"] .rs-legacy-cta {
    color: var(--rs-slate-950);
}

[data-theme="dark"] .rs-legacy-cta:hover {
    color: var(--rs-slate-950);
}

/* ".rs-legacy-page a" above scores (0,2,0) and would otherwise beat the (0,1,0)
   button rules, painting each CTA label with the link colour -- i.e. blue text
   on a blue button. The "a.rs-legacy-cta" form scores (0,2,1) and wins back. */
.rs-legacy-page a.rs-legacy-cta,
.rs-legacy-page a.rs-legacy-cta:hover {
    color: #fff;
}

[data-theme="dark"] .rs-legacy-page a.rs-legacy-cta,
[data-theme="dark"] .rs-legacy-page a.rs-legacy-cta:hover {
    color: var(--rs-slate-950);
}

.rs-legacy-page a.rs-legacy-cta--ghost,
.rs-legacy-page a.rs-legacy-cta--ghost:hover,
[data-theme="dark"] .rs-legacy-page a.rs-legacy-cta--ghost,
[data-theme="dark"] .rs-legacy-page a.rs-legacy-cta--ghost:hover {
    color: var(--rs-text);
}

/* Same collision for the skip link, which is white on a dark slate chip. */
.rs-legacy-page a.rs-skip,
.rs-legacy-page a.rs-skip:focus,
.rs-legacy-doc a.rs-skip,
.rs-legacy-doc a.rs-skip:focus {
    color: #fff;
}

/* Full-width variant for the sidebar. */
.rs-legacy-cta--block {
    display: flex;
    width: 100%;
}

/* Secondary CTA sitting beside the filled one. Declared after the base rule so
   it actually overrides the filled background. */
.rs-legacy-cta--ghost,
.rs-legacy-page a.rs-legacy-cta--ghost {
    background: transparent;
    border-color: var(--rs-border-strong);
    color: var(--rs-text);
}

.rs-legacy-cta--ghost:hover,
.rs-legacy-page a.rs-legacy-cta--ghost:hover {
    background: var(--rs-bg-inset);
    border-color: var(--rs-text);
    color: var(--rs-text);
}

[data-theme="dark"] .rs-legacy-cta--ghost,
[data-theme="dark"] .rs-legacy-cta--ghost:hover,
[data-theme="dark"] .rs-legacy-page a.rs-legacy-cta--ghost,
[data-theme="dark"] .rs-legacy-page a.rs-legacy-cta--ghost:hover {
    background: transparent;
    color: var(--rs-text);
}

/* The section landing pages' own .button class (bold 12px Arial with a text
   shadow and float:left) — bring it onto the same pill system. */
.rs-legacy-page .button,
.rs-legacy-page a.button {
    float: none;
    height: auto;
    line-height: 1;
    text-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: .7rem 1.35rem;
    border-radius: 999px;
    border: 1px solid var(--rs-border-strong);
    background: var(--rs-surface);
    color: var(--rs-text);
    font: 600 .92rem/1 var(--rs-font-display);
}

.rs-legacy-page .button:hover {
    border-color: var(--rs-text);
    background: var(--rs-bg-inset);
    color: var(--rs-text);
    text-decoration: none;
}

/* The first button in a row is the primary action. */
.rs-legacy-page .button.action,
.rs-legacy-page .button.blue {
    background: var(--rs-accent);
    border-color: var(--rs-accent);
    color: #fff;
}

.rs-legacy-page .button.action:hover,
.rs-legacy-page .button.blue:hover {
    background: var(--rs-accent-strong);
    border-color: var(--rs-accent-strong);
    color: #fff;
}

[data-theme="dark"] .rs-legacy-page .button.action,
[data-theme="dark"] .rs-legacy-page .button.blue {
    color: var(--rs-slate-950);
}

/* The legacy button wraps its text in <span class="label">, and chat.css sets
   ".button.blue .label { color: #FFF !important }". An !important beats any
   specificity, so overriding it needs one too — otherwise the label stayed
   white and sat at 3.7:1 on the lightened dark-mode accent. */
.rs-legacy-page .button .label {
    color: inherit !important;
    font: inherit;
    text-shadow: none !important;
}

/* Replaces a hard-coded <font color="#cc0000"> highlight. */
.rs-legacy-mark {
    color: var(--rs-accent-strong);
    font-weight: 700;
}

/* Replaces bgcolor="#efefef" striped table rows. The hard-coded light grey
   stayed light in dark mode while the text went light too — 1.3:1, unreadable.
   Driving it from a token keeps the stripe legible in both themes. */
.rs-legacy-page tr.rs-legacy-stripe,
.rs-legacy-page tr.rs-legacy-stripe td,
.rs-legacy-page tr.rs-legacy-stripe th {
    background-color: var(--rs-bg-subtle);
}

/* Replaces inline style="background-color:#efefef" call-out panels. */
.rs-legacy-page .rs-legacy-panel {
    background-color: var(--rs-bg-subtle);
    border: 1px solid var(--rs-border);
    border-radius: var(--rs-radius);
    padding: 1rem 1.15rem;
}

/* Small print that previously hard-coded color:#666, which sank to 3.5:1 on the
   dark ground. The subtle token stays legible in both themes. */
.rs-legacy-page .rs-legacy-fineprint {
    color: var(--rs-text-subtle);
}

/* .butons is the legacy typo'd wrapper around the CTA row. */
.rs-legacy-page .butons {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin: 1.25rem 0 0;
}

/* --------------------------------------------------------------------------
   9. Footer
   -------------------------------------------------------------------------- */

.rs-legacy-page #footer,
.rs-legacy-page #CommonFooter {
    background: var(--rs-inverse-bg);
    border-top: 1px solid var(--rs-inverse-border);
    color: var(--rs-inverse-muted);
    margin: 0;
    padding: 2.5rem 1.25rem;
    width: auto;
    clear: both;
}

.rs-legacy-page #footer ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem 1.5rem;
    max-width: 1180px;
    margin: 0 auto 1.25rem;
    padding: 0;
    list-style: none;
}

.rs-legacy-page #footer li {
    float: none;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* #CommonFooter is included here too: the bottom.ascx strip sits on the same
   dark band, but without this its links kept the light-theme link blue and
   dropped to 3.9:1 on the near-black ground. "a" is qualified so it beats
   ".rs-legacy-page a". */
.rs-legacy-page #footer a,
.rs-legacy-page #CommonFooter a,
.rs-legacy-page #footer a:hover,
.rs-legacy-page #CommonFooter a:hover {
    color: var(--rs-inverse-text);
    font-size: .92rem;
    font-weight: 500;
}

.rs-legacy-page #footer a:hover {
    color: #fff;
    text-decoration: none;
}

.rs-legacy-page #footer p {
    max-width: 60rem;
    margin: 0 auto .6rem;
    text-align: center;
    color: var(--rs-inverse-muted);
    font-size: .88rem;
}

/* The old bottom.ascx strip. */
.rs-legacy-page #CommonFooter .container,
.rs-legacy-page #footer .container {
    max-width: 1180px;
    margin: 0 auto;
}

/* --------------------------------------------------------------------------
   10. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 992px) {
    .rs-legacy-page .cols {
        gap: 2rem;
    }

    .rs-legacy-page #content #rightcol,
    .rs-legacy-page #rightcol,
    .rs-legacy-page #rightcolumn {
        flex-basis: 100%;
    }
}

@media (max-width: 768px) {
    .rs-legacy-page {
        font-size: 15px;
    }

    .rs-legacy-page #header-wrapper {
        justify-content: center;
        text-align: center;
    }

    .rs-legacy-page #navigation,
    .rs-legacy-page #CommonTabBar {
        margin-bottom: 1.5rem;
    }

    /* Product nav becomes a horizontally swipeable strip. */
    .rs-legacy-page #navigation ul,
    .rs-legacy-page #CommonTabBar ul,
    .rs-legacy-page #CommonHeader .nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .rs-legacy-page #navigation ul::-webkit-scrollbar,
    .rs-legacy-page #CommonTabBar ul::-webkit-scrollbar,
    .rs-legacy-page #CommonHeader .nav::-webkit-scrollbar {
        display: none;
    }

    .rs-legacy-page h2 {
        font-size: 1.35rem;
    }

    .rs-legacy-page h3 {
        font-size: 1.12rem;
    }

    /* Legacy layout tables must not hold the page open on small screens. */
    .rs-legacy-page #content table[width],
    .rs-legacy-page #CommonBody table[width],
    .rs-legacy-page #Common table[width] {
        width: 100% !important;
        max-width: 100%;
    }

    /* Float columns stack instead of sitting side by side. */
    .rs-legacy-page .left,
    .rs-legacy-page .right {
        float: none;
        width: auto !important;
        max-width: 100%;
    }

    /* Data tables keep their columns but scroll inside their own box.
       Do NOT add white-space: nowrap here -- these cells hold prose, and
       suppressing wrapping makes the table far wider than the viewport. */
    .rs-legacy-page .datatable {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* .Grid is a layout table (feature/spec listings), not tabular data:
       collapse it into stacked blocks rather than scrolling it sideways. */
    .rs-legacy-page table.Grid,
    .rs-legacy-page table.Grid tbody,
    .rs-legacy-page table.Grid tr,
    .rs-legacy-page table.Grid td,
    .rs-legacy-page table.Grid th {
        display: block;
        width: 100% !important;
        max-width: 100%;
        height: auto !important;
    }

    .rs-legacy-page table.Grid td {
        border-top: 1px solid var(--rs-border);
        padding: .75rem 0;
    }

    /* Nested legacy layout tables must not exceed the viewport. */
    .rs-legacy-page #Common table,
    .rs-legacy-page #content table,
    .rs-legacy-page #CommonBody table {
        max-width: 100%;
    }

    .rs-legacy-page #Common td,
    .rs-legacy-page #content td {
        word-break: break-word;
    }

    /* Anything still carrying a hard pixel width gives it up. */
    .rs-legacy-page #Common [width],
    .rs-legacy-page #content [width] {
        max-width: 100%;
    }
}

/* --------------------------------------------------------------------------
   11. Dark mode touch-ups
   -------------------------------------------------------------------------- */

[data-theme="dark"] .rs-legacy-page #header,
[data-theme="dark"] .rs-legacy-page #CommonHeader {
    background-color: var(--rs-surface);
}

/* Legacy markup hard-codes white/near-white backgrounds on layout tables. */
[data-theme="dark"] .rs-legacy-page [bgcolor="#ffffff"],
[data-theme="dark"] .rs-legacy-page [bgcolor="#FFFFFF"],
[data-theme="dark"] .rs-legacy-page [bgcolor="white"] {
    background-color: transparent !important;
}

/* Screenshot art was authored on white; keep it legible on a dark ground. */
[data-theme="dark"] .rs-legacy-page .imgBorder {
    background: var(--rs-slate-100);
}

/* Product banners are replaced by the unified Richscripts top panel. */
.rs-legacy-page #CommonHeader,
.rs-legacy-page #CommonTabBar {
    display: none !important;
}