[data-reference-page] #preloader { transition: opacity 300ms ease; }
  [data-reference-page] .wow { visibility: visible; }
  [data-reference-page] { display: contents; }
  [data-reference-page] img { image-rendering: auto; }
  [data-reference-page] #master-head.reference-navbar {
    background: #fff !important;
    border-bottom: 1px solid rgba(25, 52, 111, .08);
    box-shadow: 0 8px 24px rgba(31, 55, 113, .06);
    direction: ltr;
    min-height: 84px;
    position: sticky !important;
    top: 0;
    z-index: 1000;
  }
  [data-reference-page] #master-head .reference-navbar-container {
    align-items: center;
    display: grid !important;
    flex-wrap: nowrap !important;
    gap: 20px;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    margin: 0 auto;
    max-width: 1440px;
    min-height: 84px;
    padding: 0 clamp(24px, 4vw, 64px);
    width: 100%;
  }
  [data-reference-page] #master-head #main-logo {
    justify-self: start;
    line-height: 1;
    padding: 0;
  }
  /* Complete Netmind lockup; no generated wordmark text. */
  [data-reference-page] #master-head .logo {
    align-items: center;
    display: inline-flex;
    gap: 10px;
  }
  [data-reference-page] #master-head .logo img {
    height: auto;
    max-height: 60px;
    object-fit: contain;
    width: 184px;
  }
  [data-reference-page] #master-head #navigation {
    justify-self: center;
    max-width: none;
    opacity: 1;
    pointer-events: auto;
    position: static;
    transform: none;
    visibility: visible;
    width: auto;
  }
  [data-reference-page] #master-head .menu-primary {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    margin: 0;
    padding: 0;
    white-space: nowrap;
  }
  [data-reference-page] #master-head .menu-primary > li.menu-item {
    display: block;
    flex: 0 0 auto;
    padding: 0;
  }
  [data-reference-page] #master-head .menu-primary > li.menu-item > a,
  [data-reference-page] #master-head .menu-primary > li.menu-item > .store-pending {
    color: #20283e;
    display: block;
    font-size: clamp(12px, 1.05vw, 15px);
    line-height: 84px;
    padding: 0 clamp(6px, .75vw, 12px);
    text-transform: none;
    white-space: nowrap;
  }
  [data-reference-page] #master-head .menu-primary > li.menu-item {
    position: relative;
  }
  [data-reference-page] #master-head .reference-solutions-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    color: #20283e;
    cursor: pointer;
    display: flex;
    font-family: inherit;
    font-size: clamp(12px, 1.05vw, 15px);
    font-weight: inherit;
    gap: 6px;
    height: 84px;
    line-height: 84px;
    padding: 0 clamp(6px, .75vw, 12px);
    white-space: nowrap;
  }
  [data-reference-page] #master-head .reference-solutions-toggle i {
    color: currentColor;
    font-size: 10px;
    transition: transform .2s ease;
  }
  [data-reference-page] #master-head .reference-solutions-submenu {
    background: #fff;
    border: 1px solid rgba(25, 52, 111, .09);
    border-radius: 10px;
    box-shadow: 0 18px 45px rgba(24, 43, 88, .16);
    display: block;
    left: 50%;
    min-width: 230px;
    opacity: 0;
    padding: 8px;
    pointer-events: none;
    position: absolute;
    top: calc(100% - 7px);
    transform: translate(-50%, 8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
    visibility: hidden;
    z-index: 20;
  }
  [data-reference-page] #master-head .reference-solutions-submenu li,
  [data-reference-page] #master-head .reference-solutions-submenu li a {
    display: block;
    float: none;
    margin: 0;
    width: 100%;
  }
  [data-reference-page] #master-head .reference-solutions-submenu li a {
    border-radius: 7px;
    color: #20283e;
    font-size: 14px;
    line-height: 1.35;
    padding: 11px 13px;
    white-space: nowrap;
  }
  [data-reference-page] #master-head .reference-solutions-submenu li.active a,
  [data-reference-page] #master-head .reference-solutions-submenu li a:hover {
    background: #eef3ff;
    color: #315ee8;
  }
  /* Kill the theme's blue accent dash on submenu links: style.css:937-948 gives
     every .sub-menu link an absolute 3px ::before, style.css:952-954 grows it to
     25px on :hover/.active and default-color.css:111-116 paints it blue. The
     theme only hides it below 991px, so it has to die here. */
  [data-reference-page] #master-head .reference-solutions-submenu li a::before {
    content: none;
    display: none;
  }
  [data-reference-page] #master-head .reference-solutions-menu:hover > .reference-solutions-submenu,
  [data-reference-page] #master-head .reference-solutions-menu:focus-within > .reference-solutions-submenu,
  [data-reference-page] #master-head .reference-solutions-menu.solutions-open > .reference-solutions-submenu {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
    visibility: visible;
  }
  [data-reference-page] #master-head .reference-solutions-menu.solutions-open > .reference-solutions-toggle i {
    transform: rotate(180deg);
  }
  [data-reference-page] #master-head .menu-primary > li.menu-item.active > a,
  [data-reference-page] #master-head .menu-primary > li.menu-item > a:hover {
    color: #315ee8;
    opacity: 1;
  }
  [data-reference-page] #master-head .navbar-right {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    justify-self: end;
    min-width: max-content;
  }
  [data-reference-page] #master-head .menu-button,
  [data-reference-page] #master-head .reference-login-link {
    display: block;
    flex: 0 0 auto;
    white-space: nowrap;
  }
  [data-reference-page] #master-head .navbar-toggle,
  [data-reference-page] #master-head #navigation .close-btn {
    background: transparent;
    border: 0;
    padding: 0;
  }
  [data-reference-page] #master-head .reference-login-button {
    align-items: center;
    border: 0;
    border-radius: 7px;
    box-shadow: 0 7px 18px rgba(49, 94, 232, .22);
    display: inline-flex;
    font-size: 14px;
    font-weight: 700;
    height: 38px;
    justify-content: center;
    letter-spacing: 0;
    line-height: 38px;
    min-width: 82px;
    padding: 0 17px;
    text-transform: none;
    white-space: nowrap;
  }
  [data-reference-page] .site-footer .about-info .image-wrapper {
    align-items: center;
    background: transparent;
    border-radius: 0;
    display: inline-flex;
    gap: 10px;
    padding: 0;
  }
  [data-reference-page] .site-footer .about-info .image-wrapper img {
    height: auto;
    max-height: none;
    max-width: 100%;
    width: 216px;
    object-fit: contain;
  }
  [data-reference-page] .site-footer,
  [data-reference-page] .site-footer p,
  [data-reference-page] .site-footer li,
  [data-reference-page] .site-footer a,
  [data-reference-page] .site-footer i,
  [data-reference-page] .site-footer .widget-title h3.title {
    color: #fff !important;
  }
  [data-reference-page] .site-footer .footer-nav li::before {
    color: #fff !important;
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
    font-size: 15px;
    font-weight: 900;
    text-align: center;
    top: 0;
    width: 18px;
  }
  [data-reference-page] .site-footer .reference-footer-nav li::before {
    content: none !important;
    display: none !important;
  }
  [data-reference-page] .site-footer .reference-footer-link {
    align-items: center;
    display: flex;
    gap: 9px;
    min-height: 24px;
  }
  [data-reference-page] .site-footer .reference-footer-link i {
    align-items: center;
    display: inline-flex;
    flex: 0 0 17px;
    font-size: 14px;
    height: 24px;
    justify-content: center;
    line-height: 1;
    text-align: center;
  }
  [data-reference-page] .site-footer .contact-info a {
    color: #fff !important;
  }
  /* The theme indents every footer list to make room for an absolutely
     positioned icon: .footer-nav li has padding-left:30px (style.css:3160) and
     .contact-info li has 35px (style.css:3110). The nav bullet is already
     suppressed above, so that indent only pushed the links out of line with
     their column heading. Both lists now lay the icon out in flow instead, so
     the icon column and the text column line up across all three columns and
     start flush with the heading. */
  [data-reference-page] .site-footer .reference-footer-nav li {
    padding-left: 0;
  }
  [data-reference-page] .site-footer .contact-info li {
    align-items: flex-start;
    display: flex;
    gap: 9px;
    padding-left: 0;
  }
  /* Same 17px box and 14px glyph as .reference-footer-link i, so the contact
     icons stop rendering a size larger than the menu icons above them.
     flex-start keeps the icon on the first line of the address, which wraps. */
  [data-reference-page] .site-footer .contact-info li::before {
    flex: 0 0 17px;
    font-size: 14px;
    line-height: 1.5;
    position: static;
    text-align: center;
    top: auto;
  }
  /* Footer columns share one heading row and one content row, so the three
     headings sit on the same baseline and every column's first link/icon row
     starts at the same y even when a heading wraps (en "Company & policies",
     fr both headings, ja at narrow lg widths). h3's 18px bottom margin is
     zeroed because it currently collapses into .widget-title's 25px
     (style.css:165 and :3100); grid items do not collapse margins, so without
     this the gap under every heading would become 43px. */
  [data-reference-page] .site-footer .main-footer .widget-title h3.title {
    margin-bottom: 0;
  }
  @media (min-width: 992px) {
    [data-reference-page] .site-footer .main-footer > .row {
      display: grid;
      grid-template-columns: 4fr 2fr 2fr 4fr;
      grid-template-rows: auto minmax(0, 1fr);
    }
    [data-reference-page] .site-footer .main-footer > .row > [class*="col-"] {
      display: grid;
      grid-row: span 2;
      grid-template-rows: subgrid;
      max-width: none;
    }
    [data-reference-page] .site-footer .main-footer > .row > [class*="col-"] > .widget {
      display: grid;
      grid-row: span 2;
      grid-template-rows: subgrid;
    }
    [data-reference-page] .site-footer .main-footer > .row > [class*="col-"] > .widget > .text-widget:first-child {
      grid-row: span 2;
    }
  }
  /* app/globals.css:369 ships an unscoped "footer a { font-size: 11px }" meant for
     the legacy .footer-grid footer. It leaks in here and sizes only the two
     anchor-wrapped contact lines, leaving the plain-text address line to inherit
     .main-footer { font-size: 16px; line-height: 1.5 } from the archived theme
     (style.css:2997). Pin all three lines - and the anchors inside two of them -
     to one size/weight/rhythm so the <br> in the address wraps on the same
     baseline grid in every locale. */
  [data-reference-page] .site-footer .contact-info li.email-field,
  [data-reference-page] .site-footer .contact-info li.phone-field,
  [data-reference-page] .site-footer .contact-info li.address-field,
  [data-reference-page] .site-footer .contact-info li.email-field a,
  [data-reference-page] .site-footer .contact-info li.phone-field a {
    /* 甲方 2026-09-14：原来钉在 11px，太小（商务咨询/联系电话看不清）。
       提到 14px，与页脚其它文字一个量级。所有语言共用这条，一次改齐。 */
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
  }
  /* ── 页脚统一收紧与放大（甲方 2026-09-14）────────────────────────────────
     此前只在 zh-CN 首页（HOME_ZH_CN_STYLES）调过，其它语言仍吃主题原始的
     .main-footer{padding:100px 0}，导致「其它语言间距没调成一样的高度」。
     把这几条放到全语言共享的 [data-reference-page] 作用域里，所有语言的页脚
     （首页与内页）就都是同一套间距与字号。 */
  [data-reference-page] .site-footer .main-footer {
    padding-top: 48px;
    padding-bottom: 28px;
  }
  [data-reference-page] .site-footer .about-info > p {
    font-size: 15px;
    line-height: 1.75;
    max-width: 380px;
  }
  [data-reference-page] .site-footer .widget-title h3.title {
    font-size: 17px;
  }
  [data-reference-page] .site-footer .reference-footer-nav a span {
    font-size: 14.5px;
  }
  /* The Chinese about page replaces the archived five-logo partner wall with a
     four-tile capability grid, but the theme lays this grid out five across
     (style.css:2938, flex:0 0 20%) and does not centre it, so the fourth tile
     was followed by an empty fifth column. Four across, centred — which is what
     the theme itself already does at 1198px and below (style.css:4459), so the
     desktop case now simply matches the rest of the breakpoints. */
  [data-reference-page="about"] .reference-capability-grid {
    justify-content: center;
  }
  @media (min-width: 1199px) {
    [data-reference-page="about"] .reference-capability-grid .item {
      flex: 0 0 25%;
      max-width: 25%;
    }
  }
  [data-reference-page="about"] .reference-capability-grid .logo-wrapper {
    align-items: center;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 13px;
    height: 100%;
    justify-content: center;
    min-height: 142px;
    padding: 24px 16px;
  }
  [data-reference-page="about"] .reference-capability-grid .logo-wrapper i {
    color: #315ee8;
    font-size: 32px;
  }
  [data-reference-page="about"] .reference-capability-grid .logo-wrapper span {
    color: #20283e;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.45;
  }
  [data-reference-page] form.wpcf7-form,
  [data-reference-page] form.wpcf7-form > p,
  [data-reference-page] form.wpcf7-form label,
  [data-reference-page] form.wpcf7-form .wpcf7-form-control-wrap {
    box-sizing: border-box;
    display: block;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100%;
  }
  [data-reference-page] form.wpcf7-form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
  [data-reference-page] form.wpcf7-form select,
  [data-reference-page] form.wpcf7-form textarea,
  [data-reference-page] form.wpcf7-form input[type="submit"] {
    box-sizing: border-box;
    max-width: none;
    width: 100% !important;
  }
  [data-reference-page] form.wpcf7-form textarea {
    resize: vertical;
  }
  [data-reference-page] #trial-application,
  [data-reference-page] #consultation-form {
    scroll-margin-top: 100px;
  }
  [data-reference-page] .reference-field-error {
    color: #c62828;
    display: block;
    font-size: 12px;
    line-height: 1.4;
    margin-top: 5px;
  }
  [data-reference-page] .reference-reveal {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    transition: opacity .65s ease, transform .65s cubic-bezier(.2,.65,.3,1);
    visibility: hidden;
    will-change: opacity, transform;
  }
  [data-reference-page] .reference-reveal.reference-reveal-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  /* The footer's four widgets are reveal targets with a staggered
     transition-delay (ReferenceRuntime.tsx:186-188), which makes the three
     headings sit up to 10px apart for the duration of the reveal. Reveal the
     footer band as one block so the headings never drift apart. Beats the
     inline style the runtime sets. */
  [data-reference-page] .site-footer .main-footer .widget {
    transition-delay: 0s !important;
  }
  [data-reference-page] .site-footer .main-footer .row > .col-lg-2:nth-child(2) .footer-nav li:nth-child(1)::before {
    content: "\f57d";
  }
  [data-reference-page] .site-footer .main-footer .row > .col-lg-2:nth-child(2) .footer-nav li:nth-child(2)::before {
    content: "\f519";
  }
  [data-reference-page] .site-footer .main-footer .row > .col-lg-2:nth-child(2) .footer-nav li:nth-child(3)::before {
    content: "\f1ad";
  }
  [data-reference-page] .site-footer .main-footer .row > .col-lg-2:nth-child(2) .footer-nav li:nth-child(4)::before {
    content: "\f544";
  }
  [data-reference-page] .site-footer .main-footer .row > .col-lg-2:nth-child(3) .footer-nav li:nth-child(1)::before {
    content: "\f2b5";
  }
  [data-reference-page] .site-footer .main-footer .row > .col-lg-2:nth-child(3) .footer-nav li:nth-child(2)::before {
    content: "\f05a";
  }
  [data-reference-page] .timeline-slider,
  [data-reference-page] .testimonial-slider {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    position: relative;
  }
  [data-reference-page] .companies-logo:not(.grid-view) {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
  }
  [data-reference-page] .companies-logo:not(.grid-view) > .item {
    flex: 0 0 20%;
    max-width: 20%;
  }
  [data-reference-page] .timeline-slider .timeline-item {
    flex: 0 0 25%;
    max-width: 25%;
  }
  [data-reference-page] .client-testimonial.theme-two .testimonial-slider {
    padding: 30px 0;
  }
  [data-reference-page] .client-testimonial.theme-two .testimonial-slider > .item {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
    padding: 0 15px 30px;
  }
  [data-reference-page] .client-testimonial.theme-four .testimonial-slider > .item {
    flex: 0 0 50%;
    max-width: 50%;
  }
  [data-reference-page] .client-testimonial { position: relative; }
  [data-reference-page] .reference-slider {
    display: block !important;
    overflow: visible !important;
  }
  [data-reference-page] .reference-slider .slick-list { overflow: hidden; }
  [data-reference-page] .reference-slider .slick-track { align-items: flex-start; }
  [data-reference-page] .reference-slider .slick-slide { min-width: 0; }
  [data-reference-page] .reference-slider .slick-slide > div > .timeline-item,
  [data-reference-page] .reference-slider.companies-logo .slick-slide > div > .item {
    display: inline-block;
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
  }
  /* Onboarding steps strip (.timeline.timeline-slider on /, /ai, /live).
     A plain responsive grid: four numbered steps are one sequence, so they are
     all shown at once rather than paged. ReferenceRuntime no longer initialises
     this as a slider, so there is no slick markup to work around here.
     The theme's connecting bar (.timeline::before, style.css:4231) and the dot
     under each numeral (style.css:4246) are dropped; the bar showed only as a
     sliver at the far left and read as a stray mark. Both are absolutely
     positioned, so removing them leaves the columns where they are. */
  [data-reference-page] .timeline-slider {
    display: grid;
    gap: 0 24px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  [data-reference-page] .timeline-slider::before,
  [data-reference-page] .timeline-slider .timeline-item::before {
    display: none;
  }
  [data-reference-page] .timeline-slider .timeline-item {
    flex: none;
    max-width: none;
    padding: 0;
    width: auto;
  }
  /* The archived design staggers even-numbered steps below the line. With the
     line gone and the steps read as a sequence, every column starts level. */
  [data-reference-page] .timeline-slider .timeline-item .timeline-wrapper,
  [data-reference-page] .timeline-slider .timeline-item:nth-child(even) .timeline-wrapper {
    padding-bottom: 0;
    padding-top: 100px;
  }
  [data-reference-page] .timeline-slider .timeline-item .step-number,
  [data-reference-page] .timeline-slider .timeline-item:nth-child(even) .step-number {
    bottom: auto;
    top: 30px;
  }
  [data-reference-page] .timeline-slider .timeline-item .content,
  [data-reference-page] .timeline-slider .timeline-item:nth-child(even) .content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 80px 0 0;
  }
  /* Reserve two lines for the title so the descriptions start on the same line
     whether or not a translation wraps, and so step 1 (whose title is empty and
     which carries a button instead) does not sit higher than the rest. */
  [data-reference-page] .timeline-slider .timeline-item .content h4 {
    min-height: 2.4em;
    min-height: 2lh;
  }
  [data-reference-page] .timeline-slider .timeline-item .content h4:empty {
    display: block;
  }
  @media (max-width: 1198px) {
    [data-reference-page] .timeline-slider {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      row-gap: 32px;
    }
  }
  @media (max-width: 599px) {
    [data-reference-page] .timeline-slider {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  [data-reference-page] .reference-slider-arrow { z-index: 3; }

  /* Counter units. The theme raises the suffix 12px and sizes it 52px against a
     48px number (style.css:2852), so "+" and "%" float up into a superscript,
     and it never sizes the prefix at all, so the "$" fell back to 16px body text
     sitting below the baseline. Both now match the number and share its
     baseline, at each of the theme's two counter sizes. */
  [data-reference-page] .counter-block .counter-number-prefix,
  [data-reference-page] .counter-block .counter-number-suffix {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 48px;
    font-weight: bold;
    line-height: 1;
    position: static;
    top: auto;
    vertical-align: baseline;
  }
  @media (min-width: 1200px) and (max-width: 1359px) {
    [data-reference-page] #master-head .reference-navbar-container {
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 16px;
      padding: 0 24px;
    }
  }
  @media (max-width: 1199px) {
    [data-reference-page] .counter-block .counter-number-prefix,
    [data-reference-page] .counter-block .counter-number-suffix {
      font-size: 42px;
    }
  }

  /* The four "new networking requirements" cards on /office. Their row is a
     flex container, so the columns already stretch to the tallest card on each
     line — but the card itself kept its content height, leaving 268/215 and
     239/215 pairs. Filling the column makes each pair match. */
  [data-reference-page] .features-block.theme-four {
    /* The flex line stretches to the tallest card plus its own 30px
       margin-bottom, so filling 100% would swallow the gap between the two rows
       and the cards would touch. Subtracting that margin keeps both cards on a
       line equal AND leaves the 30px the theme intended. */
    height: calc(100% - 30px);
  }
  [data-reference-page] .features-block.theme-four > .inner-box {
    height: 100%;
  }

  /* Pricing feature lists. The theme makes each row a shrink-to-fit box centred
     with margin:auto and pins the tick at left:0, so the gap to the text was
     already a constant 14px — but every row centred independently, leaving the
     ticks in a ragged column that spanned 61px on the widest card.
     Each row is now a two-column grid, tick then text, and the rows share one
     column width so every tick lands on the same x. The block as a whole stays
     centred in the card. */
  [data-reference-page] .pricing-feature-list {
    display: grid;
    justify-content: center;
    max-width: 100%;
  }
  [data-reference-page] .pricing-feature-list li {
    align-items: start;
    column-gap: 14px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    margin: 15px 0;
    padding: 0;
    text-align: left;
  }
  [data-reference-page] .pricing-feature-list li::before {
    line-height: inherit;
    position: static;
  }

  /* "Why choose" feature pairs (.inner-row on the home page). The archived design
     staggers the right column 80px lower, which only reads correctly when all
     four cards are the same height. They are not: the copy length differs per
     locale, so the vertical gaps drifted apart — 6px against 30px in English,
     and in French the left column overlapped itself by 42px. Simplified Chinese
     looked right only because its approved copy happens to make all four cards
     exactly the same height.
     A grid equalises the cards, and the stagger becomes a transform so it stays
     a visual offset without feeding back into row heights. Both columns then get
     the same 30px gap in every locale. */
  [data-reference-page] .inner-row {
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-bottom: 80px;
  }
  /* The theme offsets children 2 and 3 by +80px and -80px
     (style.css:1903-1908). Those selectors carry more weight than a plain
     descendant rule, so the reset has to match their specificity or the -80
     survives and the left column overlaps itself. */
  [data-reference-page] .features-section .inner-row > [class*="col-"],
  [data-reference-page] .features-section .inner-row > [class*="col-"]:nth-child(2),
  [data-reference-page] .features-section .inner-row > [class*="col-"]:nth-child(3) {
    flex: none;
    margin: 0;
    max-width: none;
    padding: 0;
    width: auto;
  }
  [data-reference-page] .features-section .inner-row > [class*="col-"]:nth-child(even) {
    transform: translateY(80px);
  }
  /* The visible card is .inner-box, nested inside .features-block. Stretching
     only the outer wrapper left each card at its natural height, so the slack
     inside the grid cell differed per column and the gaps came out at 60px and
     108px instead of the row gap. Both levels have to fill the cell. */
  [data-reference-page] .features-section .inner-row > [class*="col-"] > .features-block,
  [data-reference-page] .features-section .inner-row > [class*="col-"] .inner-box {
    height: 100%;
  }
  @media (max-width: 767px) {
    [data-reference-page] .inner-row {
      grid-template-columns: minmax(0, 1fr);
      padding-bottom: 0;
    }
    /* The stagger only means anything with two columns to stagger against. In
       one column it drags every second card 80px down into the one below it,
       so the gaps read 110 / -50 / 110 and two cards overlap outright.
       .features-section has to be in the selector: without it this reset is a
       class less specific than the rule it is undoing, and loses. */
    [data-reference-page] .inner-row > [class*="col-"]:nth-child(even),
    [data-reference-page] .features-section .inner-row > [class*="col-"]:nth-child(even) {
      transform: none;
    }
  }

  /* Partner wall: a fixed set of logos laid out as a grid. It is no longer a
     slider, so there is no slick markup to override here. */
  [data-reference-page] .companies-logo:not(.grid-view) {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 0;
  }
  [data-reference-page] .companies-logo:not(.grid-view) > .item {
    flex: none;
    max-width: none;
    padding: 0;
    width: auto;
  }
  @media (max-width: 1198px) {
    [data-reference-page] .companies-logo:not(.grid-view) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  @media (max-width: 1023px) {
    [data-reference-page] .companies-logo:not(.grid-view) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  @media (max-width: 599px) {
    [data-reference-page] .companies-logo:not(.grid-view) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  /* Office testimonial carousel (.client-testimonial.theme-four, /office only).
     ReferenceRuntime writes an inline width:100% onto every card
     (ReferenceRuntime.tsx:554), so the theme rule
     '.client-testimonial.theme-four .item { … margin: 15px 15px; }'
     (the archived theme stylesheet, style.css:2569) merely offsets the card instead of insetting
     it and consecutive cards end up edge to edge. Give the card the slide
     minus its own gutters, and reset the 'height: 100%' that slick.min.css
     puts on '.slick-slide' so 'align-items: stretch' is allowed to run and the
     row is equal height whatever length the translated copy is. */
  [data-reference-page] .client-testimonial.theme-four .reference-slider .slick-track {
    align-items: stretch;
  }
  [data-reference-page] .client-testimonial.theme-four .reference-slider .slick-slide {
    display: flex;
    height: auto;
  }
  [data-reference-page] .client-testimonial.theme-four .reference-slider .slick-slide > div {
    display: flex;
    width: 100%;
  }
  [data-reference-page] .client-testimonial.theme-four .reference-slider .slick-slide > div > .item {
    flex: 1 1 auto;
    width: auto !important;
  }

  /* Customer Success Stories (home, .client-testimonial.theme-two): make every
     card in the row the same height so the ::after quote badge, which is pinned to
     the card's bottom edge (style.css:2449 -> top:100%; margin-top:-25px), lands at
     the same height on every card. Heights stay content-driven -- the longest quote
     in the row still sets the row height -- so no locale gets clipped. */
  [data-reference-page] .client-testimonial.theme-two .reference-slider .slick-track {
    align-items: stretch;
  }
  [data-reference-page] .client-testimonial.theme-two .reference-slider .slick-slide {
    display: flex;
    /* slick.min.css ships .slick-slide{height:100%}; a non-auto cross size opts the
       slide out of align-items:stretch, so it must be reset to auto. */
    height: auto;
  }
  [data-reference-page] .client-testimonial.theme-two .reference-slider .slick-slide > div {
    display: flex;
    width: 100%;
  }
  [data-reference-page] .client-testimonial.theme-two .testimonial-slider > .item,
  [data-reference-page] .client-testimonial.theme-two .slick-slide > div > .item {
    /* !important beats the inline display:inline-block written by
       ReferenceRuntime.tsx:525 when it builds the slides. */
    display: flex !important;
    flex-direction: column;
  }
  [data-reference-page] .client-testimonial.theme-two .item > .testimonial-text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
  }

  /* /ai "Simple Pricing": the archived row carries Bootstrap's
     .align-items-center (align-items:center!important), so plan cards keep
     their intrinsic heights and end ragged. Stretch the row, let each card
     fill its column, and push the CTA to the card's bottom edge so the button
     baseline holds no matter how many feature rows a locale wraps to. */
  [data-reference-page] .row.pricing-plans-three {
    align-items: stretch !important;
  }
  [data-reference-page] .row.pricing-plans-three > [class*="col-"] {
    display: flex;
  }
  [data-reference-page] .row.pricing-plans-three > [class*="col-"] > .price-card {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    width: 100%;
  }
  [data-reference-page] .pricing-plans-three .price-card > .card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
  }
  /* .card-body is now a flex container, so the list's first/last <li>
     margins (15px, style.css:1823) no longer collapse into the list's own
     45px margins (style.css:1816). 30px + 15px keeps the rendered gap at the
     theme's original 45px. */
  [data-reference-page] .pricing-plans-three .price-card > .card-body > .pricing-feature-list {
    margin-bottom: 30px;
    margin-top: 30px;
  }
  [data-reference-page] .pricing-plans-three .price-card > .card-body > .btn {
    align-self: flex-start;
    margin-top: auto;
  }

  /* /live Service Packages: the theme leaves .price-card at content height inside an
     already-stretched Bootstrap column (style.css:1651), so the CTAs land at three
     different heights. The column cannot use height:100% because the card carries
     margin-top:120px to clear the badge, so make the column the flex context and let
     the card consume the remaining space. */
  [data-reference-page] .pricing-plans-two > [class*="col-"] {
    display: flex;
    flex-direction: column;
  }
  [data-reference-page] .pricing-plans-two .price-card {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
  }
  [data-reference-page] .pricing-plans-two .card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
  }
  [data-reference-page] .pricing-plans-two .card-body > .btn {
    align-self: center;
    margin-top: auto;
  }
  /* The badge now holds a translated plan NAME, not the 2-3 character price the
     theme sized 60px type for (style.css:1714), so it breaks out of the 180px circle
     (style.css:1682) sideways in en/fr and vertically in ja/ko/zh-CN. Keep the circle
     at 180px -- the .price-card:before shadow ring (style.css:1699) and the 120px
     .card-header top padding (style.css:1662) are hard-coded to that size -- and fit
     the text to it: centre it on both axes and drop the type to a size that renders
     every locale's longest name on one line inside a 140px content box. */
  [data-reference-page] .pricing-plans-two .plan-cost-wrapper {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px;
  }
  [data-reference-page] .pricing-plans-two .plan-cost {
    font-size: 22px;
    letter-spacing: 0;
    line-height: 1.15;
    margin-bottom: 6px;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
  }
  [data-reference-page] .pricing-plans-two .plan-cost .plan-cost-prefix:empty {
    display: none;
  }
  [data-reference-page] .pricing-plans-two .plan-validity {
    font-size: 13px;
    line-height: 1.2;
  }
  [data-reference-page] .pricing-plans-one .card-title,
  [data-reference-page] .pricing-plans-two .card-title,
  [data-reference-page] .pricing-plans-three .card-title {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -.6px;
    line-height: 1.2;
  }
  .reference-language {
    order: -1;
    position: relative;
  }
  .reference-language-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: #20283e;
    cursor: pointer;
    display: flex;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    gap: 7px;
    line-height: 1;
    padding: 9px 12px;
    transition: background-color .18s ease;
    white-space: nowrap;
  }
  .reference-language-toggle:hover,
  .reference-language.language-open .reference-language-toggle {
    background: #f1f4fd;
  }
  .reference-language-toggle:focus-visible {
    outline: 2px solid #315ee8;
    outline-offset: 2px;
  }
  .reference-language-globe {
    color: #315ee8;
    flex: 0 0 auto;
  }
  .reference-language-caret {
    flex: 0 0 auto;
    transition: transform .2s ease;
  }
  .reference-language.language-open .reference-language-caret {
    transform: rotate(180deg);
  }
  .reference-language-menu {
    background: #fff;
    border: 1px solid rgba(25, 52, 111, .09);
    border-radius: 14px;
    box-shadow: 0 20px 48px rgba(24, 43, 88, .16);
    list-style: none;
    margin: 0;
    /* Six entries fit without scrolling; the cap only matters on short viewports. */
    max-height: min(70vh, 460px);
    min-width: 210px;
    opacity: 0;
    overflow-y: auto;
    padding: 8px;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
    visibility: hidden;
    z-index: 30;
  }
  .reference-language.language-open .reference-language-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    visibility: visible;
  }
  .reference-language-item {
    margin: 0;
  }
  .reference-language-option {
    border-radius: 9px;
    color: #20283e;
    display: block;
    font-size: 15px;
    line-height: 1.35;
    padding: 11px 14px;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
    white-space: nowrap;
  }
  .reference-language-option:hover {
    background: #f5f7ff;
    color: #20283e;
  }
  .reference-language-option.is-current {
    background: #eef3ff;
    color: #315ee8;
    font-weight: 600;
  }
  @media (max-width: 1199px) {
    [data-reference-page] #master-head.reference-navbar { min-height: 72px; }
    [data-reference-page] #master-head .reference-navbar-container {
      display: flex !important;
      gap: 7px;
      min-height: 72px;
      padding: 0 15px;
    }
    [data-reference-page] #master-head #main-logo {
      flex: 0 0 auto;
      margin-right: auto;
      order: 0;
    }
    [data-reference-page] #master-head .logo img {
      height: auto;
      max-height: 52px;
      width: 156px;
    }
    [data-reference-page] #master-head .navbar-right {
      flex: 0 0 auto;
      gap: 6px;
      min-width: 0;
      order: 1;
    }
    [data-reference-page] #master-head .menu-toggle-btn {
      display: block;
      flex: 0 0 36px;
      margin-left: 1px;
      order: 2;
      width: 36px;
    }
    [data-reference-page] #master-head .navbar-toggle {
      height: 36px;
      width: 36px;
    }
    /* The theme draws the middle bar at the button's full width and the outer
       two at a fixed 2em, then offsets the lower one by 1em: three bars of two
       different lengths, one of them not aligned with the others. Redraw all
       three from the same width, centred, evenly spaced. The outer bars are
       children of the middle one, so their left:0 is already its left edge. */
    [data-reference-page] #master-head .navbar-toggle .burger-lines {
      height: 2px;
      left: 50%;
      margin-left: -11px;
      margin-top: -1px;
      top: 50%;
      width: 22px;
    }
    [data-reference-page] #master-head .navbar-toggle .burger-lines::before,
    [data-reference-page] #master-head .navbar-toggle .burger-lines::after {
      height: 2px;
      left: 0;
      width: 100%;
    }
    [data-reference-page] #master-head .navbar-toggle .burger-lines::before { top: -6px; }
    [data-reference-page] #master-head .navbar-toggle .burger-lines::after { top: 6px; }
    /* Open state: both outer bars ride back onto the middle line so the X is
       centred on the button rather than hanging off its right edge. */
    [data-reference-page] #master-head .active .navbar-toggle .burger-lines::before,
    [data-reference-page] #master-head .active .navbar-toggle .burger-lines::after {
      left: 0;
      top: 0;
    }

    /* The language picker and trial button, once ReferenceRuntime has moved
       them into the drawer. Full width and stacked: a phone header carrying the
       logo, a language menu, a call to action and a burger has no room left for
       any of them to be comfortably tappable. */
    [data-reference-page] #master-head #navigation .navbar-right {
      align-items: stretch;
      border-top: 1px solid rgba(0, 0, 0, .06);
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin: 0;
      min-width: 0;
      padding: 16px;
      width: 100%;
    }
    [data-reference-page] #master-head #navigation .navbar-right .reference-language {
      width: 100%;
    }
    /* space-between on three children strands the globe at one edge and the
       caret at the other with the label adrift in the middle. Keep the globe
       with its label and let only the caret go right. */
    [data-reference-page] #master-head #navigation .reference-language-toggle {
      justify-content: flex-start;
      width: 100%;
    }
    [data-reference-page] #master-head #navigation .reference-language-current {
      margin-right: auto;
      text-align: left;
    }
    /* The last item's rule and the actions block's own top border landed a few
       pixels apart and read as an empty sixth menu row. One divider is enough;
       the list padding below it is the gap between the menu and the actions. */
    [data-reference-page] #master-head #navigation .menu-primary > li.menu-item:last-child {
      border-bottom: 0;
    }
    /* In the drawer the menu expands the panel instead of floating over it, so
       it scrolls with everything else and cannot be clipped by the drawer edge. */
    [data-reference-page] #master-head #navigation .reference-language-menu {
      box-shadow: none;
      left: auto;
      margin-top: 6px;
      max-height: 0;
      opacity: 1;
      overflow: hidden;
      padding: 0;
      pointer-events: auto;
      position: static;
      right: auto;
      top: auto;
      transform: none;
      transition: max-height .25s ease;
      visibility: visible;
      width: 100%;
    }
    [data-reference-page] #master-head #navigation .reference-language.language-open .reference-language-menu {
      max-height: 320px;
    }
    [data-reference-page] #master-head #navigation .navbar-right .menu-button,
    [data-reference-page] #master-head #navigation .navbar-right .reference-login-link {
      display: block;
      width: 100%;
    }
    [data-reference-page] #master-head #navigation .navbar-right .reference-login-button {
      display: block;
      text-align: center;
      width: 100%;
    }
    [data-reference-page] #master-head #navigation .navbar-right .search-option {
      display: none !important;
    }
    [data-reference-page] #master-head #navigation {
      background: #fff;
      box-shadow: -20px 0 30px rgba(20, 38, 83, .15);
      display: block;
      height: 100vh;
      max-width: 360px;
      opacity: 0;
      overflow: auto;
      padding: 80px 0 30px;
      pointer-events: none;
      position: fixed;
      right: 0;
      top: 0;
      transform: translateX(120%);
      transition: transform .35s ease;
      visibility: hidden;
      width: min(92vw, 360px);
      z-index: 3;
    }
    [data-reference-page] #master-head #navigation.open {
      opacity: 1;
      pointer-events: auto;
      transform: translateX(0);
      visibility: visible;
    }
    [data-reference-page] #master-head #navigation .menu-primary {
      display: block;
      padding: 15px 0 30px;
      width: 100%;
    }
    [data-reference-page] #master-head #navigation .menu-primary > li.menu-item {
      border-bottom: 1px solid rgba(0, 0, 0, .06);
      display: block;
      padding: 0;
    }
    [data-reference-page] #master-head #navigation .menu-primary > li.menu-item > a,
    [data-reference-page] #master-head #navigation .menu-primary > li.menu-item > .store-pending {
      color: #20283e;
      display: block;
      font-size: clamp(12px, 3.6vw, 14px);
      line-height: 1.5;
      padding: 13px 16px;
      white-space: nowrap;
    }
    [data-reference-page] #master-head .reference-solutions-toggle {
      font-size: clamp(12px, 3.6vw, 14px);
      height: auto;
      justify-content: space-between;
      line-height: 1.5;
      padding: 13px 16px;
      width: 100%;
    }
    [data-reference-page] #master-head .reference-solutions-submenu {
      border: 0;
      border-radius: 0;
      box-shadow: none;
      display: none;
      left: auto;
      min-width: 0;
      opacity: 1;
      padding: 0 10px 8px 22px;
      pointer-events: auto;
      position: static;
      top: auto;
      transform: none;
      transition: none;
      visibility: visible;
      width: 100%;
    }
    [data-reference-page] #master-head .reference-solutions-menu.solutions-open > .reference-solutions-submenu {
      display: block;
      transform: none;
    }
    [data-reference-page] #master-head .reference-solutions-submenu li a {
      font-size: 13px;
      padding: 10px 12px;
    }
    [data-reference-page] #master-head #navigation .close-btn { z-index: 4; }
    body.navigation-in { overflow: hidden !important; }
  }
  @media (max-width: 1198px) {
  }
  @media (max-width: 1023px) {
    [data-reference-page] .client-testimonial.theme-two .testimonial-slider > .item,
    [data-reference-page] .client-testimonial.theme-four .testimonial-slider > .item {
      flex-basis: 50%;
      max-width: 50%;
    }
  }
  @media (max-width: 990px) {
    [data-reference-page] .client-testimonial.theme-four .testimonial-slider > .item {
      flex-basis: 100%;
      max-width: 100%;
    }
  }
  @media (max-width: 766px) {
    html, body { overflow-x: clip !important; }
    [data-reference-page] .box-wrapper { overflow-x: clip; }
    [data-reference-page] .client-testimonial.theme-two .testimonial-slider > .item {
      flex-basis: 100%;
      max-width: 100%;
    }
    [data-reference-page] .pricing-plans-one .card-title,
    [data-reference-page] .pricing-plans-two .card-title,
    [data-reference-page] .pricing-plans-three .card-title { font-size: 30px; }
  }
  @media (prefers-reduced-motion: reduce) {
    [data-reference-page] .reference-reveal {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
      visibility: visible !important;
    }
  }
  @media (max-width: 599px) {
  }
  @media (max-width: 575px) {
    .reference-language-toggle {
      font-size: 13px;
      gap: 5px;
      padding: 8px 9px;
    }
    .reference-language-menu {
      min-width: 176px;
    }
    .reference-language-option {
      font-size: 14px;
      padding: 10px 12px;
    }
    [data-reference-page] #master-head .reference-login-button {
      min-width: 0;
      padding: 0 12px;
    }
  }
  @media (max-width: 399px) {
  }