/* ==========================================================================
   New site look (ps_new.asp). Loaded after styles.css and scoped to body.newui,
   so it only applies to pages rendered by ps_new.asp. Merges into styles.css at rollout.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
    --navy: #153854;
    --navy-deep: #0f2a40;
    --steel: #426F96;
    --steel-dark: #2f5578;
    --sky: #9dbee1;
    --gold: #FFD044;
    --ground: #EFF6FC;
    --panel-blue: #dfeaf5;
    --panel-grey: #e7eaee;
    --card: #f4f8fc;
    --card-hover: #e6f0fa;
    --line: #c9d6e3;
    --ink: #24313d;
    --ink-soft: #52606d;
    --radius: 10px;
    --gap: 16px;
}

body.newui {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font: 15px/1.55 'Open Sans', 'Segoe UI', Arial, sans-serif;
}

.newui *, .newui *::before, .newui *::after {
    box-sizing: border-box;
}

/* Links: no more white-on-blue hover block */
.newui a {
    color: var(--steel);
    font-weight: 600;
    text-decoration: none;
    transition: color .08s ease-in;
}

.newui a:hover {
    color: var(--steel-dark);
    background: transparent;
    text-decoration: underline;
}

.newui a.nolink:hover {
    text-decoration: none;
}

/* Old link classes whose styles.css hover turned the text white on a blue block: in the new
   look every text link hovers the same way (darker color + underline) */
.newui a.ablue:hover,
.newui .rightmenu a:hover,
.newui .heading-text a.override:hover {
    color: var(--steel-dark);
    background: none;
    text-decoration: underline;
}

.newui a.ared:hover {
    color: #a30000;
    background: none;
    text-decoration: underline;
}

.newui a.awhite:hover {
    color: var(--sky);
    background: none;
    text-decoration: underline;
}

.newui .more-toggle:hover {
    color: var(--steel-dark);
    background: none;
    padding: 4px 0 2px 0;
    text-decoration: underline;
}

.newui :focus-visible {
    outline: 3px solid var(--sky);
    outline-offset: 2px;
    border-radius: 4px;
}

.newui .material-symbols-outlined {
    font-size: 18px;
    vertical-align: -4px;
}

/* ---------- Shell: page width ---------- */
.newui .wrap {
    max-width: 1240px;
    margin: 0 auto;
    padding-left: 16px;
    padding-right: 16px;
}

/* ---------- Shell: header ---------- */
.newui .site-header {
    background: #f8fbfe;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 1px 6px rgba(21, 56, 84, .06);
}

.newui .site-header .wrap {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 68px;
}

.newui .site-header .logo img {
    height: 40px;
    width: auto;
    display: block;
}

.newui .main-nav {
    display: flex;
    gap: 4px;
    flex: 1;
}

.newui .main-nav a {
    color: var(--ink);
    font-size: 14px;
    padding: 8px 12px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: .4px;
    white-space: nowrap;
}

.newui .main-nav a:hover {
    background: var(--panel-blue);
    color: var(--navy);
    text-decoration: none;
}

.newui .main-nav a.current {
    background: var(--navy);
    color: #fff;
}

.newui .header-tools {
    display: flex;
    align-items: center;
    gap: 10px;
}

.newui .site-header .search {
    position: relative;
    float: none;
    margin: 0;
}

.newui .site-header .search input {
    font: inherit;
    font-size: 13px;
    width: 170px;
    padding: 6px 30px 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
}

.newui .site-header .search button {
    position: absolute;
    right: 4px;
    top: 3px;
    border: 0;
    background: none;
    padding: 2px;
    color: #8796a5;
    cursor: pointer;
}

/* ---------- Buttons (one system for the whole site) ---------- */
.newui .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: 700;
    font-size: 14px;
    padding: 9px 16px;
    border-radius: 7px;
    border: 1px solid transparent;
    white-space: nowrap;
    cursor: pointer;
    font-family: inherit;
}

.newui .btn:hover {
    text-decoration: none;
}

.newui .btn-primary { background: var(--sky); color: var(--navy-deep); border-color: #b9d2ec; }
.newui .btn-primary:hover { background: #b6cfea; color: var(--navy-deep); }
.newui .btn-outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.newui .btn-outline:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.newui .btn-steel { background: var(--steel); color: #fff; }
.newui .btn-steel:hover { background: var(--steel-dark); color: #fff; }
.newui .btn-ghost { background: var(--card); color: var(--steel); border-color: var(--line); }
.newui .btn-ghost:hover { background: var(--card-hover); color: var(--steel-dark); }
.newui .btn-lg { font-size: 16px; padding: 12px 22px; }

/* Existing .button markup inside page bodies, restyled to match */
.newui .button a {
    border-radius: 7px;
    font-weight: 700;
}

.newui .button.lightblue a,
.newui .button.lightblue.roundcorners a {
    background: var(--sky);
    color: var(--navy-deep);
    border: 1px solid #b9d2ec;
    border-radius: 7px;
}

.newui .button.lightblue a:hover,
.newui .button.lightblue.roundcorners a:hover {
    background: #b6cfea;
    color: var(--navy-deep);
    border: 1px solid #b9d2ec;
    text-decoration: none;
}

.newui .button.darkblue a,
.newui .button.darkblue.roundcorners a {
    background: var(--steel);
    color: #fff;
    border: 1px solid var(--steel);
    border-radius: 7px;
}

.newui .button.darkblue a:hover,
.newui .button.darkblue.roundcorners a:hover {
    background: var(--steel-dark);
    border-color: var(--steel-dark);
    color: #fff;
    text-decoration: none;
}

.newui .button.grey a {
    background: var(--panel-grey);
    border-radius: 7px;
}

.newui .button.grey a:hover {
    background: #d3d9e0;
    color: var(--ink);
    text-decoration: none;
}

.newui .primary-download a {
    background: var(--sky);
    border-color: #b9d2ec;
    border-radius: 7px;
}

.newui .primary-download a:hover {
    background: #b6cfea;
    color: var(--navy-deep);
    text-decoration: none;
}

.newui .primary-download a:hover .btn-sub {
    color: #444;
}

/* ---------- Shell: body layout (left menu + content) ---------- */
.newui #mainBodyContainer.layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 20px;
    padding-top: 20px;
    padding-bottom: 32px;
    align-items: start;
    clear: none;
}

.newui #mainBodyContainer.layout.no-left-menu {
    grid-template-columns: minmax(0, 1fr);
}

.newui #mainBodyContainer #leftMenu,
.newui #mainBodyContainer #leftMenuContent,
.newui #mainBodyContainer #fullScreenContent {
    float: none;
    width: auto;
    padding: 0;
}

.newui .content {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    min-width: 0;
}

/* Old per-panel margins are replaced by the content gap */
.newui .content > div,
.newui .content > div > .floatContainer,
.newui .content > .leftMenuVisible > .floatContainer {
    margin-top: 0;
    margin-bottom: 0;
}

/* ---------- Left menu (GenLinks markup unchanged) ---------- */
.newui #leftMenu {
    position: sticky;
    top: 12px;
}

.newui #leftLinks {
    list-style: none;
    margin: 0;
    padding: 8px;
    background: var(--panel-grey);
    border-radius: var(--radius);
    font-size: 14px;
}

.newui #leftLinks ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.newui #leftLinks li {
    margin: 0;
}

.newui #leftLinks > li + li {
    margin-top: 6px;
}

/* Group headers */
.newui #leftLinks > li > a {
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    color: var(--ink-soft);
    font-size: 13px;
    font-weight: 700;
    padding: 6px 8px !important;
    border: 0;
    border-radius: 6px;
}

.newui #leftLinks > li > a:hover {
    background: rgba(66, 111, 150, .08);
    color: var(--ink);
    text-decoration: none;
}

.newui #leftLinks .leftLinkArrowDown,
.newui #leftLinks .leftLinkArrowRight {
    margin-left: 0 !important;
    font-size: 10px;
    color: var(--steel);
    width: 10px;
}

/* Items */
.newui #leftLinks ul a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    color: var(--ink);
    font-weight: 500;
    font-size: 14px;
    padding: 5px 10px 5px 24px;
    border: 0;
    border-radius: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.newui #leftLinks ul a:hover {
    background: var(--card-hover);
    color: var(--steel-dark);
    text-decoration: none;
}

.newui #leftLinks ul a.current {
    background: var(--steel);
    color: #fff;
}

.newui #leftLinks ul a .material-symbols-outlined {
    font-size: 16px !important;
    opacity: .7;
}

.newui #leftLinks .newFeature {
    margin-left: 6px;
}

.newui .mobile-menu-btn {
    display: none;
}

/* ---------- Page title (GenTitle output: h1.bigtitle + span.breadcrumb) ---------- */
.newui .titletable {
    background: transparent;
    margin: 0;
    padding: 4px 4px 0;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
}

.newui .titletable .bigtitle {
    color: var(--ink);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -.3px;
    line-height: 1.25;
    margin: 2px 0 0;
    padding: 0;
    text-wrap: balance;
}

/* The page trail (span.breadcrumb from GenTitle) is not shown in the new look: the top menu,
   the left menu, and the page title already say where you are, and "Home" is the logo. */
.newui .titletable .breadcrumb {
    display: none;
}

/* ---------- Content panels ---------- */
.newui .bigpanel {
    border-radius: var(--radius);
}

.newui .bigpanel a {
    color: #fff;
}

.newui .bigpanel a:hover {
    color: var(--sky);
}

.newui .bigpanel_price a {
    color: var(--gold);
}

/* Consent footer link on its dark background */
.newui .footer a {
    color: var(--sky);
}

.newui .bigpanel_light {
    background: var(--panel-grey);
    color: var(--ink);
}

.newui .bigpanel_light_alt {
    background: var(--panel-blue);
    color: var(--ink);
}

/* Rounded corners on the outer panel only (inner nested panels share its background) */
.newui .content .bigpanel_light,
.newui .content .bigpanel_light_alt,
.newui .content .panelContainer {
    border-radius: var(--radius);
}

.newui .bigpanel_light a,
.newui .bigpanel_light_alt a {
    color: var(--steel);
}

.newui .bigpanel_light a:hover,
.newui .bigpanel_light_alt a:hover {
    color: var(--steel-dark);
}

.newui .bigpanel_light_title {
    color: var(--ink);
    font-size: 24px;
    font-weight: 700;
}

/* Old section headings (.heading bars): plain section titles, like the new panels' titles */
.newui .heading,
.newui .heading-history {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
}

.newui .heading-history {
    margin: 22px 0 6px;
}

.newui .heading-text,
.newui .heading-news-text {
    color: var(--ink);
    font-size: 22px;
    font-weight: 700;
    padding: 0;
    line-height: 1.3;
}

.newui .heading-news-text {
    font-size: 19px;
}

/* Right-aligned link inside a heading (e.g. "Build history" on the History page) */
.newui .heading-text a.override {
    color: var(--steel);
    font-size: 14px;
    font-weight: 600;
    top: 6px;
    right: 0;
}

.newui .heading-text a.override:hover {
    color: var(--steel-dark);
    background: none;
}

/* News items: icon beside the title (not floated, so text doesn't wrap around it), smaller
   normal-weight date, and the text aligned under the title */
.newui .psNewsItem .heading {
    display: flex;
    align-items: center;
    gap: 10px;
}

.newui .heading .news-img {
    float: none;
    padding: 0;
    flex: none;
}

.newui .heading-news-text .title {
    font-size: 14px;
    font-weight: 400;
    color: var(--ink-soft);
    margin-left: 4px;
    white-space: nowrap;
}

.newui .psNewsItem > div:not(.heading) {
    padding-left: 38px;
}

/* Cards that used heavy offset shadows */
.newui .benefit,
.newui .whatsNewCard,
.newui .whatsNewPanel,
.newui .addBenefits {
    box-shadow: none;
    border-radius: 8px;
    background-color: var(--card);
    border: 1px solid transparent;
}

.newui .benefit:hover,
.newui .whatsNewCard:hover {
    background-color: var(--card-hover);
    border-color: var(--line);
}

/* ---------- Tables (TableAlt*) ---------- */
.newui .TableAltHead,
.newui .TableAltHeadInfo {
    background: var(--steel);
}

.newui .TableAltHead a {
    color: #fff;
}

.newui .TableAltSubHead {
    background: var(--panel-blue);
}

.newui .TableAltFirst {
    background: var(--card);
}

.newui .TableAltSecond {
    background: #eaf1f8;
}

.newui .TableAltFirst,
.newui .TableAltSecond,
.newui .TableAltFirst td,
.newui .TableAltSecond td {
    border-bottom-color: #dde6ef;
}

/* ---------- Footer ---------- */
.newui .site-footer {
    background: var(--navy-deep);
    color: #b9c9d8;
    font-size: 14px;
}

.newui .site-footer .cols {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    padding-top: 32px;
    padding-bottom: 20px;
}

.newui .site-footer h3 {
    color: #fff;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .8px;
    margin: 0 0 10px;
}

.newui .site-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}

.newui .site-footer a {
    color: #d8e5f2;
    font-weight: 500;
}

.newui .site-footer a:hover {
    color: #fff;
}

.newui .site-footer .legal > span:last-child {
    display: flex;
    gap: 20px;
}

.newui .site-footer .legal {
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding-top: 14px;
    padding-bottom: 14px;
    font-size: 12.5px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

/* ---------- Old home page (ps_home.asp): Our Clients + Latest News side by side ---------- */
/* Panels size to their content instead of the fixed 280px height; "More news" flows after the news */
.newui .mainPanelHome {
    height: auto !important;
    display: flex;
    gap: var(--gap);
    margin: var(--gap) 2px 0;   /* same 2px side inset as the product panels above it */
}

/* The old float clearfix would become an empty flex item and eat one gap on the right */
.newui .mainPanelHome::after {
    display: none;
}

.newui .mainPanelHome > .subPanel {
    position: static;
    left: auto;
    right: auto;
    float: none;
    width: auto;
    height: auto;
    flex: 1 1 0;
    min-width: 0;
    padding-bottom: 16px;
}

.newui #newsMore {
    position: static;
    text-align: right;
    padding: 8px 20px 0;
}

@media screen and (max-width: 900px) {
    .newui .mainPanelHome {
        flex-direction: column;
    }
}

/* ==========================================================================
   Components for redesigned page bodies (newui/*.asp). Pages are built from
   these; add page-specific rules only for something truly unique.
     panel, panelHead   light section (panel-grey / panel-blue)
     hero               navy two-column section: text + heroShot (or heroAside)
     banner             navy one-row section: text + actions
     checks             list with check icons
     actions            row of buttons and links
     cards              grid of tinted cards (c2 / c3 / c4 / auto); card, cardImg, caption, more
     rows               table-like rows of buttons (label + items)
     list, plainList    bullet list with steel markers / list without bullets
     logos, codeTable, bigButton, formRow, iconPanel, note, lead, price
   ========================================================================== */

/* ---------- panel ---------- */
.newui .panel {
    border-radius: var(--radius);
    padding: 24px 28px;
}

.newui .panel-grey {
    background: var(--panel-grey);
}

.newui .panel-blue {
    background: var(--panel-blue);
}

.newui .panel .bigpanel_light_title {
    margin: 0 0 14px;
}

.newui .panel h3 {
    font-size: 17px;
    margin: 20px 0 8px;
}

.newui .panel p {
    margin: 0 0 14px;
    padding: 0;
}

.newui .iconPanel p {
    font-size: 16px;
}

.newui a.plainLink {
    color: var(--ink);
}

.newui .panelHead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.newui .panelHead .bigpanel_light_title,
.newui .panelHead h3 {
    margin: 0;
}

.newui .panelHead h3 {
    font-size: 14px;
    color: var(--ink-soft);
}

.newui .panelHead a {
    font-size: 14px;
}

/* A panel with a large icon at the left */
.newui .iconPanel {
    display: flex;
    gap: 20px;
    align-items: center;
}

.newui .iconPanel > .material-symbols-outlined {
    font-size: 44px;
    color: var(--steel);
    vertical-align: 0;
}

/* ---------- hero / banner (navy) ---------- */
.newui .hero,
.newui .banner {
    background: var(--navy);
    color: #dbe7f2;
    border-radius: var(--radius);
    padding: 28px;
}

.newui .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 28px;
    align-items: center;
}

.newui .banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.newui .hero h1 {
    color: #fff;
    font-size: 36px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -.5px;
    margin: 0 0 8px;
    text-wrap: balance;
}

.newui .hero h2 {
    color: #fff;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 800;
    margin: 0 0 12px;
}

.newui .banner h2 {
    color: #fff;
    font-size: 22px;
    margin: 0 0 4px;
}

.newui .hero h3 {
    color: #fff;
    font-size: 16px;
    margin: 0 0 8px;
}

.newui .hero .bigpanel_subtitle {
    color: var(--sky);
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 16px;
}

.newui .hero p,
.newui .banner p {
    margin: 0 0 16px;
    padding: 0;
}

.newui .banner p {
    margin: 0;
    font-size: 14px;
}

.newui .hero a,
.newui .banner a {
    color: #fff;
}

.newui .hero strong {
    color: #fff;
}

.newui .hero .btn-primary,
.newui .banner .btn-primary {
    color: var(--navy-deep);
}

/* Screenshot on the right side of a hero */
.newui .heroShot {
    display: block;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .08);
}

.newui .heroShot img {
    display: block;
    width: 100%;
    height: auto;
}

/* Boxed text on the right side of a hero */
.newui .heroAside {
    background: rgba(255, 255, 255, .06);
    border-radius: 8px;
    padding: 18px 20px;
}

.newui .heroAside ul {
    margin: 0 0 10px;
    padding-left: 18px;
    font-size: 14px;
    display: grid;
    gap: 4px;
}

.newui .heroAside > a {
    font-size: 14px;
}

/* Small line under the hero buttons (product, prices, latest build) */
.newui .heroMeta {
    margin-top: 16px;
    font-size: 13.5px;
    display: flex;
    gap: 6px 16px;
    flex-wrap: wrap;
    align-items: center;
}

.newui .hero .heroFine {
    margin: 6px 0 0;
    font-size: 12.5px;
    color: #a9bdd1;
}

.newui .product {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-weight: 600;
}

.newui .product img {
    width: 18px;
    height: auto;
}

.newui a.price,
.newui a.price:hover {
    color: var(--gold);
    font-weight: 700;
}

.newui .lead {
    font-size: 15.5px;
}

/* ---------- checks ---------- */
.newui .checks {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
    display: grid;
    gap: 7px;
}

.newui .checks li {
    display: flex;
    gap: 8px;
    font-size: 15px;
}

.newui .checks .material-symbols-outlined {
    color: var(--steel);
    font-size: 20px;
    vertical-align: 0;
}

.newui .hero .checks .material-symbols-outlined {
    color: var(--sky);
}

.newui .hero .checks a {
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, .4);
}

/* ---------- actions ---------- */
.newui .actions {
    display: flex;
    align-items: center;
    gap: 12px 20px;
    flex-wrap: wrap;
}

.newui .hero .actions,
.newui .banner .actions {
    gap: 12px;
}

.newui .cards + .actions,
.newui .rows + .actions {
    margin-top: 16px;
}

.newui .actions .btn small {
    font-weight: 400;
    opacity: .8;
}

/* A row with content at both ends */
.newui .splitRow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px 24px;
    flex-wrap: wrap;
    padding: 4px 4px 0;
}

/* Big download button with a second line */
.newui a.bigButton {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    background: var(--sky);
    color: var(--navy-deep);
    border-radius: 8px;
    padding: 14px 22px;
    font-size: 18px;
    font-weight: 700;
}

.newui a.bigButton:hover {
    background: #b6cfea;
    color: var(--navy-deep);
    text-decoration: none;
}

.newui .bigButton .material-symbols-outlined {
    font-size: 30px;
    vertical-align: 0;
}

.newui .bigButton small {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #2f4a63;
}

/* ---------- cards ---------- */
.newui .cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.newui .cards.c2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.newui .cards.c4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.newui .cards.auto {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.newui .card {
    background: var(--card);
    border-radius: 8px;
    padding: 16px 18px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: hidden;
    color: var(--ink);
}

/* Screenshot on top of a card, edge to edge */
.newui .card .cardImg {
    display: block;
    width: calc(100% + 36px);
    max-width: none;
    margin: -16px -18px 8px;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: left top;
    background: #cfdbe7;
}

.newui .card h3 {
    font-size: 16px;
    line-height: 1.35;
    margin: 0;
    display: flex;
    gap: 8px;
    align-items: center;
}

.newui .card h3 .material-symbols-outlined {
    color: var(--steel);
    font-size: 22px;
    vertical-align: 0;
}

.newui .card p {
    font-size: 14px;
    color: var(--ink-soft);
    margin: 0;
    padding: 0;
    flex: 1;
}

.newui .card .more {
    font-size: 14px;
    margin-top: 4px;
}

.newui .card .caption {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
}

/* A whole card that is a link (e.g. opens a screenshot in fancybox) */
.newui a.card {
    border: 1px solid transparent;
    cursor: zoom-in;
    transition: border-color .12s, transform .12s;
}

.newui a.card:hover {
    border-color: var(--steel);
    color: var(--ink);
    text-decoration: none;
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    .newui a.card {
        transition: none;
    }

    .newui a.card:hover {
        transform: none;
    }
}

/* Lists and quotes inside cards */
.newui .card ul {
    margin: 0;
    padding-left: 18px;
    font-size: 14px;
    color: var(--ink-soft);
    display: grid;
    gap: 4px;
}

.newui .card li::marker {
    color: var(--steel);
}

.newui .card strong {
    color: var(--ink);
}

.newui .card blockquote {
    margin: 0;
    font-size: 14.5px;
    position: relative;
    padding-top: 18px;
    flex: 1;
}

.newui .card blockquote::before {
    content: "\201C";
    position: absolute;
    top: -14px;
    left: -2px;
    font-size: 52px;
    line-height: 1;
    color: var(--sky);
    font-family: Georgia, serif;
}

.newui .card figcaption {
    margin-top: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink-soft);
}

/* ---------- rows (e.g. download table) ---------- */
.newui .rows {
    display: grid;
    gap: 8px;
}

.newui .rows > div {
    display: grid;
    grid-template-columns: 190px repeat(3, minmax(0, 1fr));
    gap: 10px;
    align-items: center;
    background: var(--card);
    border-radius: 8px;
    padding: 10px 14px;
}

.newui .rows .label {
    font-weight: 700;
}

.newui .rows .btn {
    justify-content: flex-start;
    font-weight: 600;
}

.newui .rows .btn small {
    font-weight: 400;
    color: var(--ink-soft);
    margin-left: auto;
}

/* ---------- lists, notes, tables ---------- */
.newui .list {
    margin: 0;
    padding-left: 20px;
    display: grid;
    gap: 6px;
    font-size: 14.5px;
}

.newui .list li::marker {
    color: var(--steel);
}

.newui .plainList {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 4px;
    font-size: 14px;
    color: var(--ink-soft);
}

.newui .note {
    margin: 12px 0 0;
    padding: 0;
    font-size: 14px;
    color: var(--ink-soft);
}

.newui .content > .note {
    margin: 0;
    padding: 0 4px;
}

/* Spacing between stacked components inside a panel */
.newui .panel .note,
.newui .actions + .plainList,
.newui .actions + .list {
    margin-top: 14px;
}

.newui .panel .note:last-child {
    margin-bottom: 0;
}

.newui .codeTable {
    border-collapse: collapse;
    background: var(--card);
    border-radius: 8px;
    overflow: hidden;
    font-size: 14px;
    margin-bottom: 10px;
}

.newui .codeTable td {
    padding: 6px 14px;
    border-bottom: 1px solid #dde6ef;
}

.newui .codeTable tr:last-child td {
    border-bottom: 0;
}

.newui code {
    font-family: Consolas, 'Cascadia Mono', monospace;
    font-size: 13.5px;
    white-space: nowrap;
}

/* ---------- logos ---------- */
.newui .logos {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}

.newui .logos div {
    background: var(--card);
    border-radius: 8px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
}

.newui .logos img {
    max-height: 34px;
    max-width: 100%;
    filter: grayscale(1);
    opacity: .75;
}

/* ---------- cards used as standalone sections (outside a panel) ---------- */
.newui .content > .cards > .card {
    padding: 22px 24px;
    background: var(--panel-grey);
}

.newui .card h2 {
    font-size: 22px;
    color: var(--ink);
    margin: 0;
}

.newui .card .actions {
    margin-top: 12px;
}

/* A large figure, e.g. a price */
.newui .bigNumber {
    font-size: 32px;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.2;
}

.newui .bigNumber small {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-soft);
}

/* ---------- dataTable: numeric table (e.g. volume prices) ---------- */
.newui .dataTable {
    width: 100%;
    border-collapse: collapse;
    background: var(--card);
    border-radius: 8px;
    overflow: hidden;
    font-size: 14.5px;
    font-variant-numeric: tabular-nums;
}

.newui .dataTable th {
    background: var(--steel);
    color: #fff;
    font-weight: 700;
    padding: 8px 12px;
    text-align: center;
}

.newui .dataTable thead tr + tr th {
    background: var(--steel-dark);
    font-weight: 600;
    font-size: 13.5px;
}

.newui .dataTable td {
    padding: 8px 12px;
    text-align: center;
    border-bottom: 1px solid #dde6ef;
}

.newui .dataTable td:first-child {
    font-weight: 700;
}

.newui .dataTable tbody tr:nth-child(even) td {
    background: #eaf1f8;
}

.newui .dataTable tbody tr:last-child td {
    border-bottom: 0;
}

/* ---------- Purchase, upgrade, and invoice forms (body.purchasePage; page markup unchanged) ---------- */
.newui.purchasePage .genericBodyDiv {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.newui.purchasePage .genericBodyDiv > .heading {
    margin: 12px 0 0;
}

.newui.purchasePage .genericBodyDiv > .heading:first-child {
    margin-top: 0;
}

/* The form becomes a distinct card */
.newui.purchasePage .invoiceFormTable {
    width: 100% !important;
    max-width: 920px;
    margin: 0 auto;
    background: var(--panel-blue);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px 22px 22px;
    box-shadow: 0 4px 16px rgba(21, 56, 84, .08);
}

.newui.purchasePage .invoiceFormTable table {
    float: none !important;
    width: auto !important;
    margin: 0 auto;
}

.newui.purchasePage .purchase-form input[type="text"],
.newui.purchasePage .purchase-form input[type="number"],
.newui.purchasePage .purchase-form select,
.newui.purchasePage .invoiceFormTable input[type="text"],
.newui.purchasePage .invoiceFormTable input[type="number"],
.newui.purchasePage .invoiceFormTable select {
    height: 36px;
    font-size: 14px;
    border-radius: 6px;
    border-color: var(--line);
    background: #fff;
}

/* Computed, read-only values read as text, not as disabled fields */
.newui.purchasePage input.readonly {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--ink-soft);
    box-shadow: none !important;
}

.newui.purchasePage input#price {
    font-size: 26px;
    font-weight: 800;
    color: var(--ink);
    height: 40px;
    padding-left: 0;
}

.newui.purchasePage .invoiceFormTable label.error {
    font-size: 13px;
}

.newui.purchasePage #sbmt {
    padding-top: 6px;
}

.newui.purchasePage .pay-btn {
    border-radius: 8px;
}

/* Invoice page: the form table is .invoiceFormTable itself. Shrink it to its content and size
   every control to the reCAPTCHA box, which is a fixed 304px wide. */
.newui.purchasePage .invoiceBody {
    width: auto;
}

/* A fixed width: label 170 + gap 20 + 304px controls + help icons + padding. (Width auto
   would stretch, since some cells hold long hidden text that counts toward max-content.) */
.newui.purchasePage .invoiceBody table.invoiceFormTable {
    width: 660px !important;
    max-width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
    padding: 14px 32px 20px;
}

.newui.purchasePage .invoiceBody .invoiceFormTable td {
    padding: 0;
    vertical-align: middle;
}

.newui.purchasePage .invoiceBody .invoiceFormTable td:first-child:not([colspan]) {
    width: 170px;
    padding-right: 20px;
}

/* Upgrade note box spans the whole form */
.newui.purchasePage .invoiceBody .invoiceFormTable td[colspan="3"] > div {
    max-width: none;
    margin-bottom: 4px !important;
}

/* The "Qty" / "Price Per Seat" captions: small, left-aligned over their fields, close to them */
.newui.purchasePage .invoiceBody .invoiceFormTable tr#qty_caption td {
    font-size: 13px;
    color: var(--ink-soft);
    text-align: left;
    vertical-align: bottom;
    padding: 0 !important;
}

.newui.purchasePage .invoiceBody .invoiceFormTable tr#qty_caption td span[style] {
    margin-left: 8px !important;
}

.newui.purchasePage .invoiceBody .invoiceFormTable tr#qty_caption + tr td {
    padding-top: 0 !important;
}

.newui.purchasePage .invoiceBody #edition,
.newui.purchasePage .invoiceBody #contact {
    width: 304px;
    box-sizing: border-box;
}

.newui.purchasePage .invoiceBody .invoiceFormTable td:not(:first-child) {
    white-space: nowrap;
}

/* ...but tooltip text in those cells wraps. The tips open below their icon, starting under the
   304px field column (icon is 8px past it, 20px wide), not to the right where they would run
   off a 1280px screen */
.newui.purchasePage .invoiceBody .tooltip {
    white-space: normal;
    margin: 46px 0 0 -332px;
}

/* "Secure payment" note: text stays in its own column beside the floated lock icon
   instead of wrapping under it */
.newui.purchasePage td:has(> div > img[src*="lock.png"]) > div + div {
    overflow: hidden;
}

/* Price tables inside purchase/upgrade tooltips: keep them real tables (the phone rules turn
   form cells into blocks) and don't inherit the form rows' 40-50px left indent */
.newui.purchasePage .purchase-form .tooltip table {
    display: table;
    width: auto !important;
}

.newui.purchasePage .purchase-form .tooltip tr {
    display: table-row;
    margin: 0;
}

.newui.purchasePage .purchase-form .tooltip td,
.newui.purchasePage .purchase-form .tooltip th {
    display: table-cell;
    width: auto !important;
    padding: 2px 10px 2px 0;
    white-space: nowrap;
}

.newui.purchasePage .invoiceBody #qty_new,
.newui.purchasePage .invoiceBody #qty_upg,
.newui.purchasePage .invoiceBody #years {
    width: 90px !important;
}

.newui.purchasePage .invoiceBody #licenses_new,
.newui.purchasePage .invoiceBody #licenses_upg {
    width: 206px !important;
    margin-left: 8px;
}

/* Every field row ends at the same 304px edge, so the "?" icons after them form one column */
.newui.purchasePage .invoiceBody #savings {
    width: 210px !important;
    box-sizing: border-box;
}

.newui.purchasePage .invoiceBody #edition_help,
.newui.purchasePage .invoiceBody #qty_help,
.newui.purchasePage .invoiceBody #maint_help {
    height: 20px !important;
    margin: 0 0 -5px 8px !important;
    cursor: help;
}

.newui.purchasePage .invoiceBody #contact {
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 8px 10px;
    font: inherit;
    font-size: 14px;
}

.newui.purchasePage .invoiceBody #gen_invoice {
    width: 304px !important;
    height: 42px !important;
    margin: 6px 0 0 !important;
    border-radius: 7px;
    font-weight: 700;
    text-transform: none;
}

/* Field labels that are links (e.g. "Edition", linking to Features) look like the other labels */
.newui.purchasePage .invoiceFormTable td:first-child a {
    color: var(--ink);
}

.newui.purchasePage .invoiceFormTable td:first-child a:hover {
    color: var(--steel-dark);
}

/* "Notify me" opt-in: checkbox lines up with the field labels (rows indent 50px, 40px on the
   upgrade forms); wrapped lines hang under the text, not under the checkbox */
.newui.purchasePage .purchase-form td:has(> #mailing_list) {
    padding-left: 70px !important;
    text-indent: -20px;
}

.newui.purchasePage .purchase-form table:has(tr.padding-row-left-small) td:has(> #mailing_list) {
    padding-left: 60px !important;
}

.newui.purchasePage #mailing_list {
    width: 13px;
    margin: 0 7px 0 0;
    vertical-align: -1px;
}

/* Invoice: no extra space above Maintenance or between the reCAPTCHA and the button */
.newui.purchasePage .invoiceBody .invoiceFormTable tr:has(#years) > td {
    padding-top: 0 !important;
}

.newui.purchasePage .invoiceBody td:has(> #gen_invoice) > br {
    display: none;
}

/* ---------- Contact-style forms: ps_email, ps_vote, ps_uninstall, ps_subscribe ----------
   Same look as the purchase/invoice forms: a card, 36px rounded fields, and one 304px field
   column (the reCAPTCHA's fixed width). Page markup unchanged; its inline field styles
   (11px bold Arial, 300px) are overridden. */
.newui :is(.emailBody, .supportBody, .uninstallBody) form.contactForm > table,
.newui :is(.subscribeFormLeft, .subscribeFormRight) form.contactForm > table {
    width: auto !important;
    margin: 6px auto 0;
    border-collapse: separate;
    border-spacing: 0 10px;
    background: var(--panel-blue);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 12px 32px 18px;
    box-shadow: 0 4px 16px rgba(21, 56, 84, .08);
}

.newui :is(.emailBody, .supportBody, .uninstallBody) form.contactForm > table > tbody > tr > td {
    padding: 0 !important;
    vertical-align: middle;
}

.newui :is(.emailBody, .supportBody, .uninstallBody) form.contactForm > table > tbody > tr > td:first-child:not([colspan]) {
    width: 190px;
    padding-right: 20px !important;
}

/* The message box's label sits at its top */
.newui :is(.emailBody, .supportBody, .uninstallBody) form.contactForm tr:has(textarea) > td:first-child {
    vertical-align: top;
    padding-top: 8px !important;
}

.newui :is(.emailBody, .supportBody, .uninstallBody, .subscribeFormLeft, .subscribeFormRight) form.contactForm :is(input[type="text"], select, textarea) {
    width: 304px !important;
    height: 36px;
    box-sizing: border-box;
    padding: 0 10px;
    font: 400 14px 'Open Sans', sans-serif !important;
    color: var(--ink) !important;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
}

.newui :is(.emailBody, .supportBody, .uninstallBody) form.contactForm textarea {
    padding: 8px 10px;
}

.newui :is(.emailBody, .supportBody, .uninstallBody, .subscribeFormLeft, .subscribeFormRight) form.contactForm input[type="checkbox"] {
    margin: 4px 6px 4px 0;
    vertical-align: -1px;
}

.newui :is(.emailBody, .supportBody, .uninstallBody) form.contactForm input[type="submit"] {
    width: 304px !important;
    height: 42px !important;
    margin: 4px 0 0;
    border-radius: 7px;
    font-weight: 700;
}

.newui :is(#sendbutton, #votebutton) {
    padding: 0 !important;
}

/* Subscribe / Unsubscribe: two small cards; "Email:" above its field */
/* Card fits its longest line ("Unsubscribe from ExamDiff Pro updates") without wrapping */
.newui :is(.subscribeFormLeft, .subscribeFormRight) form.contactForm > table {
    width: auto !important;
    min-width: 352px;
    padding: 16px 24px 20px;
    border-spacing: 0;
    white-space: nowrap;
}

.newui :is(.subscribeFormLeft, .subscribeFormRight) form.contactForm td > b:first-child {
    display: block;
    margin-bottom: 6px;
}

.newui :is(.subscribeFormLeft, .subscribeFormRight) form.contactForm input[type="submit"] {
    width: 304px !important;
    height: 42px !important;
    border-radius: 7px;
    font-weight: 700;
}

/* Post-purchase invoice: the reference number field looks like the other forms' fields */
.newui .invoicePostFormTable #ref_num {
    height: 36px;
    padding: 0 10px;
    font-size: 14px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    box-sizing: border-box;
}

/* Post-purchase invoice preview: the "To:" address is editable, so show it as a field */
.newui #contactInfo[contenteditable] {
    display: block;
    width: max-content;
    min-width: 280px;
    max-width: calc(100% - 60px);
    padding: 8px 12px;
    border: 1px dashed var(--line);
    border-radius: 6px;
    background: #fff;
}

/* Its tip sits in an .arial (invoice-font) line: use the site font like the other tips */
.newui .arial .tooltip {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    text-align: left;
}

.newui #contactInfo[contenteditable]:focus {
    border-style: solid;
    border-color: var(--steel);
    outline: none;
}

/* Invoice preview: "Buy with credit card" and "Download PDF" side by side, same height,
   icon and label centered; stacked at full, equal width on phones (see the 600px block) */
.newui form[action="ps_invoice_download.asp"] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.newui form[action="ps_invoice_download.asp"] button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: auto !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 20px;
    border-radius: 7px;
}

.newui form[action="ps_invoice_download.asp"] button img,
.newui form[action="ps_invoice_download.asp"] button span {
    float: none !important;
    margin: 0 !important;
}

/* Both buttons the same width; Download PDF outlined so Buy reads as the main action */
.newui form[action="ps_invoice_download.asp"] button {
    width: 240px !important;
}

.newui form[action="ps_invoice_download.asp"] #gen_pdf {
    background: #fff;
    color: var(--steel);
    border: 1px solid var(--steel);
}

.newui form[action="ps_invoice_download.asp"] #gen_pdf:hover {
    background: var(--panel-blue);
    color: var(--steel-dark);
}

/* The download icon is white: tint it steel blue to match the outlined button */
.newui form[action="ps_invoice_download.asp"] #gen_pdf img {
    filter: brightness(0) invert(38%) sepia(23%) saturate(1066%) hue-rotate(166deg) brightness(92%) contrast(88%);
}

/* 30-day guarantee badge column */
.newui.purchasePage .thirtyDaysGuarantee {
    width: 150px;
}

.newui.purchasePage .genericBodyDiv > p,
.newui.purchasePage .genericBodyDiv > ul {
    margin: 0;
    padding-left: 4px;
    padding-right: 4px;
}

/* ---------- Features comparison table (edp_features.asp markup, 9 tables) ---------- */
.newui .edpFeaturesTable {
    border-collapse: separate;
    border-spacing: 0;
    margin: 0 0 14px;
    background: var(--card);
    border-radius: 8px;
    font-size: 14.5px;
}

.newui .edpFeaturesTable .TableAltHead td {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--steel);
    color: #fff;
    font-weight: 700;
    padding: 9px 12px;
}

.newui .edpFeaturesTable .TableAltHead td:first-child {
    border-top-left-radius: 8px;
    font-size: 15.5px;
}

.newui .edpFeaturesTable .TableAltHead td:last-child {
    border-top-right-radius: 8px;
}

.newui .edpFeaturesTable .TableAltHead a {
    color: #fff;
}

.newui .edpFeaturesTable .TableAltFirst td,
.newui .edpFeaturesTable .TableAltSecond td {
    padding: 7px 12px;
    border-bottom: 1px solid #dde6ef;
}

.newui .edpFeaturesTable .TableAltSecond td {
    background: #eaf1f8;
}

.newui .edpFeaturesTable img[src*="checkmark"] {
    width: 18px;
    height: auto;
}

.newui .featuresPanel .genericBodyDiv {
    padding: 0;
}

/* ---------- callout: short highlighted message (good = green, warn = amber) ---------- */
.newui .callout {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 0 0 16px;
    font-size: 14.5px;
}

.newui .callout > .material-symbols-outlined {
    font-size: 22px;
    vertical-align: 0;
}

.newui .callout.good {
    background: #e3f3e6;
    color: #1d4d2b;
}

.newui .callout.good > .material-symbols-outlined {
    color: #2e7d32;
}

.newui .callout.warn {
    background: #fff4dc;
    color: #5c4300;
}

.newui .callout.warn > .material-symbols-outlined {
    color: #b7791f;
}

.newui .callout .btn {
    margin-top: 10px;
}

/* ---------- updates page content from GetUpdateText / GetBuilds / GetHistoryHighlights ---------- */
.newui .updBuilds h3 {
    font-size: 16px;
    margin: 16px 0 4px !important;
}

.newui .updBuilds h3:first-of-type {
    margin-top: 0 !important;
}

.newui .updBuilds ul {
    margin: 4px 0 8px !important;
    padding-left: 20px;
    font-size: 14.5px;
}

.newui .updBuilds li::marker {
    color: var(--steel);
}

.newui .content > .upgradeWhatsNew {
    background: var(--panel-grey);
    border-radius: var(--radius);
    padding: 24px 28px;
    margin: 0;
}

.newui .upgradeWhatsNew .upgradePanelTitle {
    font-size: 24px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 4px;
}

.newui .upgradeWhatsNew ul {
    padding-left: 20px;
    font-size: 14.5px;
}

/* ---------- forms ---------- */
.newui .formRow {
    display: flex;
    align-items: center;
    gap: 10px 12px;
    flex-wrap: wrap;
}

.newui .formRow label {
    font-weight: 700;
}

.newui .formRow input[type="text"] {
    font: inherit;
    width: 320px;
    max-width: 100%;
    height: auto;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
}

.newui .formRow label.error {
    flex-basis: 100%;
    order: 9;
}

/* ---------- Responsive (keep last) ---------- */
@media screen and (max-width: 1100px) {
    .newui .site-header .search input {
        width: 130px;
    }

    .newui .header-tools .btn {
        display: none;
    }

    .newui .hero {
        grid-template-columns: minmax(0, 1fr);
    }

    .newui .heroShot {
        max-width: 560px;
    }

    .newui .cards.c4 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .newui .logos {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media screen and (max-width: 1000px) {
    /* Header becomes two rows: logo + search, then the top menu at full width */
    .newui .site-header .wrap {
        flex-wrap: wrap;
        gap: 8px 16px;
        padding-top: 10px;
        padding-bottom: 8px;
    }

    .newui .header-tools {
        margin-left: auto;
    }

    .newui .main-nav {
        order: 3;
        flex-basis: 100%;
        overflow-x: auto;
        scrollbar-width: thin;
    }
}

@media screen and (max-width: 900px) {
    .newui #mainBodyContainer.layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .newui #leftMenu {
        position: static;
    }

    .newui .mobile-menu-btn {
        display: flex;
        width: 100%;
        justify-content: space-between;
    }

    .newui #leftLinks {
        display: none;
        margin-top: 8px;
    }

    .newui #leftMenu.open #leftLinks {
        display: block;
    }

    .newui .site-footer .cols {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .newui .cards,
    .newui .cards.c2 {
        grid-template-columns: minmax(0, 1fr);
    }

    .newui .cards.c4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .newui .rows > div {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media screen and (max-width: 600px) {
    .newui .site-header .search {
        display: none;
    }

    .newui .titletable .bigtitle {
        font-size: 24px;
    }

    .newui .panel {
        padding: 18px 16px;
    }

    .newui .hero,
    .newui .banner {
        padding: 22px 18px;
    }

    .newui .hero h1 {
        font-size: 27px;
    }

    .newui .cards.c4 {
        grid-template-columns: minmax(0, 1fr);
    }

    .newui .logos {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .newui .hero .actions .btn {
        flex: 1;
    }

    .newui a.bigButton {
        display: flex;
        font-size: 16px;
    }

    /* Big icon next to a panel's text takes too much width on a phone */
    .newui .iconPanel > .material-symbols-outlined {
        display: none;
    }

}

/* Wide tables scroll inside their own box instead of widening the page */
.newui .table-wrap {
    overflow-x: auto;
    max-width: 100%;
}

/* ---------- Phones (about 360-430px wide) ---------- */
@media screen and (max-width: 600px) {
    /* Top menu: wrap onto two rows instead of a sideways-scrolling strip */
    .newui .main-nav {
        flex-wrap: wrap;
        overflow-x: visible;
        gap: 4px;
    }

    .newui .main-nav a {
        font-size: 13px;
        padding: 6px 9px;
    }

    /* Tighter number tables */
    .newui .dataTable {
        font-size: 13px;
    }

    .newui .dataTable th,
    .newui .dataTable td {
        padding: 6px 5px;
    }

    /* Purchase/upgrade form: each label above its field, fields full width */
    .newui.purchasePage .invoiceFormTable {
        padding: 12px 14px 16px;
    }

    .newui.purchasePage .purchase-form table,
    .newui.purchasePage .purchase-form tbody,
    .newui.purchasePage .purchase-form tr,
    .newui.purchasePage .purchase-form td {
        display: block;
        width: auto !important;
    }

    .newui.purchasePage .purchase-form tr {
        margin-bottom: 10px;
    }

    .newui.purchasePage .purchase-form tr.padding-row-left td,
    .newui.purchasePage .purchase-form tr.padding-row-left-small td {
        padding-left: 0;
    }

    .newui.purchasePage .purchase-form td:first-child:not([colspan]) {
        padding-bottom: 4px;
    }

    .newui.purchasePage .purchase-form input[type="text"],
    .newui.purchasePage .purchase-form select {
        width: calc(100% - 34px) !important;
    }

    .newui.purchasePage .purchase-form #qty,
    .newui.purchasePage .purchase-form #qty_add,
    .newui.purchasePage .purchase-form #qty_upg,
    .newui.purchasePage .purchase-form #qty_new,
    .newui.purchasePage .purchase-form #years {
        width: 90px !important;
    }

    /* Fill the rest of the field width so the "?" icon after it lines up with the others:
       90px field + 4px space + this = 100% - 34px */
    .newui.purchasePage .purchase-form #price_per_seat,
    .newui.purchasePage .purchase-form #price_per_seat_add,
    .newui.purchasePage .purchase-form #savings {
        width: calc(100% - 128px) !important;
        box-sizing: border-box;
    }

    /* Tips open across the card instead of running off the screen */
    .newui.purchasePage .invoiceFormTable {
        position: relative;
    }

    /* Invoice preview buttons: stacked, both the full width of the page */
    .newui table:has(form[action="ps_invoice_download.asp"]) {
        width: 100%;
    }

    .newui form[action="ps_invoice_download.asp"] {
        flex-direction: column;
        align-items: stretch;
    }

    .newui form[action="ps_invoice_download.asp"] button {
        width: auto !important;
    }

    /* Below the icon's line, and ignoring touches: a tip under the finger would take the
       hover from the icon and the page's hover-out code would close it at once */
    /* Content never wider than the screen: images and videos shrink (tutorial videos are 500px,
       help screenshots up to ~690px); long URLs and paths wrap. Wide tables get a scrolling
       .table-wrap from the script in ps_new.asp. */
    /* (Not images in table cells: there a % max-width lets the cell collapse, shrinking award
       badges to icons, and height:auto turns 1px vote bars into squares. Too-wide tables
       scroll instead.) */
    .newui .content img:not(td img, th img),
    .newui .content video {
        max-width: 100%;
        height: auto;
    }

    .newui .content {
        overflow-wrap: break-word;
    }

    /* ExamDiff Pro clients: two name columns instead of three */
    .newui .edpClientsList {
        width: 50%;
        overflow-wrap: normal;
    }

    /* Smaller bullet indent so the longest single word ("GlaxoSmithKline") fits */
    .newui .edpClientsList ul {
        padding-left: 14px;
    }

    /* About Us contact box: full width (the 40% column wrapped "Contact PrestoSoft online",
       pushing the Online/Mail labels out of line); the decorative logo goes */
    .newui .aboutContactInfo {
        width: 100%;
    }

    .newui .aboutContactLogo {
        display: none;
    }

    /* Activations search field: fit the screen */
    .newui #search_string {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Labels sit above their fields here, so the extra top space of some rows goes above the
       label only, not again between label and field */
    .newui.purchasePage .purchase-form tr.padding-row-top > td:not(:first-child) {
        padding-top: 0;
    }

    /* "Notify me" opt-in: checkbox at the labels' left edge (rows have no indent here) */
    .newui.purchasePage .purchase-form td:has(> #mailing_list),
    .newui.purchasePage .purchase-form table:has(tr.padding-row-left-small) td:has(> #mailing_list) {
        padding-left: 20px !important;
    }

    /* Upgrade forms' renewal note: same left and right edges as the fields */
    .newui.purchasePage .purchase-form td[colspan] > div[style*="border-left"] {
        margin: 0 0 10px !important;
    }

    /* Contact-style forms: label above field, everything the card's width (304px at 360) */
    .newui :is(.emailBody, .supportBody, .uninstallBody) {
        padding-left: 0;
        padding-right: 0;
    }

    .newui :is(.emailBody, .supportBody, .uninstallBody) form.contactForm > table,
    .newui :is(.subscribeFormLeft, .subscribeFormRight) form.contactForm > table {
        width: 100% !important;
        padding: 10px 11px 16px;
    }

    .newui :is(.emailBody, .supportBody, .uninstallBody) form.contactForm > table > tbody > tr {
        display: block;
        margin-bottom: 12px;
    }

    .newui :is(.emailBody, .supportBody, .uninstallBody) form.contactForm > table > tbody > tr > td {
        display: block;
        width: auto !important;
    }

    .newui :is(.emailBody, .supportBody, .uninstallBody) form.contactForm > table > tbody > tr > td:first-child:not([colspan]) {
        padding: 0 0 6px !important;
    }

    .newui :is(.emailBody, .supportBody, .uninstallBody, .subscribeFormLeft, .subscribeFormRight) form.contactForm :is(input[type="text"], select, textarea, input[type="submit"]) {
        width: 100% !important;
    }

    .newui :is(.subscribeFormLeft, .subscribeFormRight) {
        float: none;
        width: auto;
        margin-top: 12px;
    }

    /* 14px (the fields' size) keeps "Unsubscribe from ExamDiff Pro updates" on one line */
    .newui :is(.subscribeFormLeft, .subscribeFormRight) form.contactForm > table {
        min-width: 0;
        white-space: normal;
        font-size: 14px;
    }

    /* (All pages: the inline margins some tips carry, e.g. ps_invoice_post, are desktop offsets) */
    .newui .tooltip {
        left: 8px;
        right: 8px;
        max-width: none;
        width: auto;
        margin: 40px 0 0 !important;
        white-space: normal;
        pointer-events: none;
    }

    /* Price table in the Seats tip: fit the tip's width (column headers may wrap, values don't) */
    .newui.purchasePage .purchase-form .tooltip table {
        width: 100% !important;
        font-size: 13px;
    }

    .newui.purchasePage .purchase-form .tooltip th {
        white-space: normal;
    }

    .newui.purchasePage .purchase-form .tooltip td,
    .newui.purchasePage .purchase-form .tooltip th {
        padding: 2px 6px 2px 0;
    }

    /* Post-purchase invoice: label above the field, field fits the screen */
    .newui .invoicePostFormTable {
        position: relative;
        width: 100%;
    }

    .newui .invoicePostFormTable > tbody > tr > td {
        display: block;
        text-align: left;
    }

    .newui .invoicePostFormTable #ref_num {
        width: calc(100% - 34px) !important;
        box-sizing: border-box;
    }

    .newui.purchasePage .invoiceFormTable > tbody > tr > td {
        display: block;
    }

    /* Invoice page (its form also has class purchase-form, so undo the rules above).
       Label on its own line, then the field(s); every field row is 272px wide so the "?"
       icons form one column, and the reCAPTCHA is scaled down to the same 272px. */
    .newui.purchasePage .invoiceBody table.invoiceFormTable {
        width: 100% !important;
        padding: 10px 11px 16px;
        position: relative;
    }

    .newui.purchasePage .invoiceBody .invoiceFormTable tr {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        margin-bottom: 12px;
    }

    .newui.purchasePage .invoiceBody .invoiceFormTable td {
        padding: 0 !important;
    }

    .newui.purchasePage .invoiceBody .invoiceFormTable td:first-child:not([colspan]) {
        width: 100% !important;
        padding-bottom: 6px !important;
    }

    .newui.purchasePage .invoiceBody .invoiceFormTable td:not(:first-child) {
        width: auto !important;
    }

    /* Qty / Price captions: not needed once the fields stack */
    .newui.purchasePage .invoiceBody .invoiceFormTable tr#qty_caption {
        display: none !important;
    }

    /* Empty error placeholder rows take no space */
    .newui.purchasePage .invoiceBody .invoiceFormTable tr:has(#seats_error),
    .newui.purchasePage .invoiceBody .invoiceFormTable tr:has(#upgrade_seats_error) {
        margin: -12px 0 0;
    }

    .newui.purchasePage .invoiceBody #edition,
    .newui.purchasePage .invoiceBody #contact,
    .newui.purchasePage .invoiceBody #gen_invoice {
        width: 272px !important;
    }

    .newui.purchasePage .invoiceBody #qty_new,
    .newui.purchasePage .invoiceBody #qty_upg,
    .newui.purchasePage .invoiceBody #years {
        width: 80px !important;
    }

    .newui.purchasePage .invoiceBody #licenses_new,
    .newui.purchasePage .invoiceBody #licenses_upg {
        width: 184px !important;
        margin-left: 8px;
    }

    .newui.purchasePage .invoiceBody #savings {
        width: 188px !important;
    }

    .newui.purchasePage .invoiceBody .g-recaptcha {
        transform: scale(.895);
        transform-origin: 0 0;
        margin-bottom: -8px;
    }

}

/* About Us top section: tinted panel instead of plain white */
.newui .aboutTop {
    background: var(--panel-grey);
    border-radius: var(--radius);
}