/* =========================================================================
   GroLayer product pages - shared UI pass
   Loaded last on every page whose body carries .ui2 (Commerce, POS). Every
   selector is scoped to .lms.ui2, so the LMS page and the rest of the site
   are untouched until they opt in by adding the class.

   This is not a re-theme. The ground, the accent, the two typefaces and the
   content are the ones that were already here. What changes is the part that
   made the page read as generated rather than designed:

     1. Container inflation. Almost every group was a 18-22px rounded panel with
        a translucent white gradient and a border, often nested two or three
        deep (section > diagram card > flow > icon tile). Groups are now made
        with rules, spacing and type. A box is used only where something really
        sits on its own ground - the product mockups, the hero panel over a
        photograph, the dialog.
     2. Icon tiles. The same 44-54px rounded square with a cyan glyph appeared
        about forty times and carried no information. Removed. Icons are kept
        where they mean something: the app bar, the buttons, the yes/no lists,
        and inside the drawn product UI.
     3. Accent spread. Cyan was on every icon, eyebrow, pill border, hover
        border and section glow, which is the same as having no accent. It is
        now reserved for the primary action, links, and one emphasis per
        section.
     4. Ornament. Radial "aurora" glows, corner halos, gradient panel fills and
        the sweep across the primary button did no work. Gone.
     5. Badge inflation. 244 of the feature chips were pills. They are now what
        they always were - a list - set in columns.
     6. Scale. A 66px headline, 112px ghost numerals, 54px buttons and 112px
        section padding all stepped down to sizes a product team would ship.
   ========================================================================= */

.lms.ui2 {
    /* One radius scale, and it is small. 10px is the largest thing on the page
       apart from the drawn phone, which is round because phones are. */
    --r-xs: 3px;
    --r-sm: 6px;
    --r-md: 10px;

    /* Two rules and one raised ground, instead of six translucent gradients */
    --rule: rgba(255, 255, 255, .085);
    --rule-2: rgba(255, 255, 255, .15);
    --surface: rgba(255, 255, 255, .028);
    --surface-2: rgba(255, 255, 255, .05);

    /* Text ramp: four steps, used consistently. The two quiet steps were
       measured against both section grounds rather than picked by eye - at the
       old .45 / .34 the small labels came out at 2.8:1, which is unreadable
       and fails AA. These land at 6.7:1 and 5.0:1. */
    --t-1: #F2F6FC;
    --t-2: rgba(234, 240, 248, .72);
    --t-3: rgba(234, 240, 248, .62);
    --t-4: rgba(234, 240, 248, .52);

    --pad-sec: 88px;
}

/* =========================================================================
   1. GROUNDS AND RHYTHM
   Sections were separated by two nearly identical dark values plus a glow.
   A hairline does the job honestly and costs nothing.
   ========================================================================= */
.lms.ui2 .sec {
    padding: var(--pad-sec) 0;
    border-top: 1px solid var(--rule);
}
.lms.ui2 .sec.g-glow::before { display: none; }       /* radial aurora */
.lms.ui2 .sec.g-grid::after { background-size: 78px 78px; opacity: .55; }
.lms.ui2 .sec.g-lattice::after { opacity: .045; }
.lms.ui2 .sec-head { max-width: 640px; margin-bottom: 40px; }

/* =========================================================================
   2. TYPE
   The old scale topped out at 66/46px with clamp minimums that jumped a long
   way on resize. This is a tighter ramp with a real relationship between
   steps, and line lengths that stay readable.
   ========================================================================= */
.lms.ui2 h1 {
    font-size: clamp(33px, 4.6vw, 49px);
    line-height: 1.07;
    letter-spacing: -.035em;
    max-width: 19ch;
}
.lms.ui2 h2 {
    font-size: clamp(24px, 3vw, 32px);
    line-height: 1.18;
    letter-spacing: -.024em;
}
.lms.ui2 h3 { font-size: 16.5px; letter-spacing: -.012em; }
.lms.ui2 .intro {
    font-size: 16.5px;
    line-height: 1.66;
    color: var(--t-2);
    max-width: 58ch;
    margin-top: 13px;
}

/* The eyebrow gives up the accent colour. Eight cyan eyebrows on one page is
   what makes an accent stop meaning anything. */
.lms.ui2 .tag {
    font-size: 10.5px;
    letter-spacing: .14em;
    color: var(--t-3);
    gap: 9px;
    margin-bottom: 14px;
}
.lms.ui2 .tag::before { width: 16px; opacity: .5; }

/* =========================================================================
   3. CONTROLS
   54px tall, 14px round, with a light sweeping across the primary on hover.
   Now 46px, 8px, and it simply changes colour - which is what a button does.
   ========================================================================= */
.lms.ui2 .btn {
    min-height: 46px;
    padding: 0 20px;
    border-radius: var(--r-sm);
    font-size: 15px;
    font-weight: 600;
    gap: 9px;
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.lms.ui2 .btn:hover { transform: none; }
.lms.ui2 .btn:active { transform: none; }
.lms.ui2 .btn i.ph { font-size: 16px; }

.lms.ui2 .btn-primary {
    background: var(--cyan);
    color: #042630;
    box-shadow: none;
}
.lms.ui2 .btn-primary:hover { background: #29CCE4; box-shadow: none; }
.lms.ui2 .btn-primary::after { display: none; }        /* the shine */

.lms.ui2 .btn-ghost {
    background: transparent;
    border: 1px solid var(--rule-2);
    color: var(--t-1);
}
.lms.ui2 .btn-ghost:hover { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .28); }

/* Real focus. There was none: keyboard users got the browser default over a
   dark ground, which is close to invisible. */
.lms.ui2 a:focus-visible,
.lms.ui2 button:focus-visible,
.lms.ui2 summary:focus-visible,
.lms.ui2 input:focus-visible,
.lms.ui2 select:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
    border-radius: var(--r-xs);
}
.lms.ui2 .btn:disabled,
.lms.ui2 .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

/* =========================================================================
   4. APP BAR
   ========================================================================= */
.lms.ui2 .appbar-live,
.lms.ui2 .icon-btn {
    height: 38px;
    border-radius: var(--r-sm);
    border-color: var(--rule-2);
    background: rgba(255, 255, 255, .04);
}
.lms.ui2 .icon-btn { width: 38px; }
.lms.ui2 .icon-btn:hover { transform: none; background: rgba(255, 255, 255, .1); }
.lms.ui2 .appbar-live { font-size: 14px; padding: 0 14px; }
.lms.ui2 .appbar-live i.ph { color: var(--t-2); }

/* =========================================================================
   5. HERO
   The panel keeps its own ground because it sits over a photograph and would
   be unreadable without one. What goes is the blurred cyan halo behind it, the
   double gradient fill, the 22px radius and the inset highlight.
   ========================================================================= */
.lms.ui2 .lhero { padding: 64px 0; }
.lms.ui2 .signal-wrap::before { display: none; }
.lms.ui2 .signal-card {
    border-radius: var(--r-md);
    padding: 22px 20px 18px;
    background: rgba(7, 20, 43, .94);
    border: 1px solid var(--rule-2);
    box-shadow: 0 18px 44px -28px rgba(0, 0, 0, .9);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.lms.ui2 .sc-k { color: var(--t-3); letter-spacing: .13em; margin-bottom: 14px; }
.lms.ui2 .sc-row { padding: 13px 0; border-top-color: var(--rule); }
.lms.ui2 .sc-trigger { font-size: 11px; letter-spacing: .08em; color: rgba(240, 165, 140, .9); }
.lms.ui2 .sc-desk { font-size: 14.5px; }
.lms.ui2 .sc-desk i.ph { font-size: 15px; color: var(--t-3); }
.lms.ui2 .sc-arrow i.ph { font-size: 13px; }
.lms.ui2 .sc-foot {
    margin: 14px -20px -18px;
    padding: 13px 20px;
    border-radius: 0 0 var(--r-md) var(--r-md);
    background: rgba(255, 255, 255, .04);
    border-top-color: var(--rule);
    font-size: 13.5px;
}
.lms.ui2 .sc-foot i.ph { font-size: 16px; }

.lms.ui2 .lhero-product { font-size: 13.5px; margin-top: 0; }
.lms.ui2 .lhero h1 { margin-top: 16px; }
.lms.ui2 .lhero-cta { margin-top: 26px; max-width: 420px; }

/* The counters are facts, not a scoreboard. */
.lms.ui2 .hstrip { margin-top: 48px; padding-top: 24px; border-top-color: var(--rule); }
.lms.ui2 .hstrip div b { font-size: clamp(21px, 3.2vw, 27px); letter-spacing: -.028em; }
.lms.ui2 .hstrip div span { font-size: 10px; letter-spacing: .1em; color: var(--t-4); margin-top: 7px; }
.lms.ui2 .hstrip-note { font-size: 12.5px; color: var(--t-4); }

/* =========================================================================
   6. PROBLEM ROWS
   Five identical bordered cards, each with a ghost numeral at 112px, a circular
   arrow hinge in the middle and a cyan pill at the bottom. It is now a table of
   five rows: complaint on the left, answer on the right, one hairline between.
   ========================================================================= */
.lms.ui2 .probs { gap: 0; }
.lms.ui2 .pcase {
    border: 0;
    border-top: 1px solid var(--rule);
    border-radius: 0;
    background: none;
    transition: background .18s ease;
}
.lms.ui2 .pcase:first-child { border-top: 0; }
.lms.ui2 .pcase:hover { background: rgba(255, 255, 255, .018); transform: none; box-shadow: none; }
.lms.ui2 .pcase-was,
.lms.ui2 .pcase-now { padding: 26px 0; background: none; border: 0; }
.lms.ui2 .pcase-arrow { display: none; }
.lms.ui2 .pcase-ico { display: none; }

/* the index becomes what it always was - an index */
.lms.ui2 .pcase-n {
    position: static;
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--t-4);
    margin-bottom: 9px;
}
.lms.ui2 .pcase-k { display: none; }
.lms.ui2 .pcase-q {
    font-size: clamp(17.5px, 2.2vw, 21px);
    line-height: 1.38;
    letter-spacing: -.02em;
    color: var(--t-1);
    margin: 0;
    max-width: 26ch;
}
.lms.ui2 .pcase-nh { margin-bottom: 11px; }
.lms.ui2 .pcase-desk { font-size: 10.5px; letter-spacing: .13em; color: var(--t-3); }
.lms.ui2 .pcase-a { font-size: 14.8px; line-height: 1.68; }

/* Was a cyan outlined pill. Now a quiet note hung off a rule - and in sentence
   case, because .pcase-desk directly above it is already mono caps and two
   uppercase labels a row is one too many. */
.lms.ui2 .pcase-proof {
    display: block;
    margin-top: 14px;
    padding: 0 0 0 13px;
    border: 0;
    border-left: 2px solid rgba(0, 184, 212, .5);
    border-radius: 0;
    background: none;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--t-3);
}
.lms.ui2 .pcase-proof i.ph { display: none; }

/* =========================================================================
   7. FLOW AND DIAGRAM SHELL
   The shell was a bordered, gradient-filled card wrapping a flow whose every
   step carried a 44px cyan tile. The shell goes; the steps get a marker.
   ========================================================================= */
.lms.ui2 .diagram {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
}
.lms.ui2 .diagram-k { color: var(--t-3); letter-spacing: .13em; margin-bottom: 18px; }

.lms.ui2 .fstep { grid-template-columns: 26px minmax(0, 1fr); gap: 18px; padding: 15px 0; }
.lms.ui2 .fstep::before { left: 12px; width: 1px; background: var(--rule-2); }
.lms.ui2 .fstep:first-child::before { top: 26px; }
.lms.ui2 .fstep:last-child::before { bottom: calc(100% - 26px); }
.lms.ui2 .fstep-ic {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--d1);
    border: 1px solid var(--rule-2);
    box-shadow: none;
    color: var(--t-3);
}
/* A number, not a glyph. The point of a flow is the order of the steps, and a
   13px icon inside a 26px disc was unreadable anyway. */
.lms.ui2 .flow { counter-reset: fstep; }
.lms.ui2 .fstep-ic i.ph { display: none; }
.lms.ui2 .fstep-ic::before {
    counter-increment: fstep;
    content: counter(fstep);
    font-family: "IBM Plex Mono", monospace;
    font-size: 11.5px;
    font-weight: 500;
}
.lms.ui2 .fstep-ic.accent { background: var(--cyan); border-color: var(--cyan); color: #042630; box-shadow: none; }
.lms.ui2 .fstep-b b { font-size: 15.5px; }
.lms.ui2 .fstep-k { font-size: 9.5px; letter-spacing: .13em; color: var(--t-4); }
.lms.ui2 .fstep-d { font-size: 14.2px; }

/* the takeaway under a flow: a left rule, not a tinted box */
.lms.ui2 .ladder-out {
    padding: 0 0 0 16px;
    border: 0;
    border-left: 2px solid rgba(0, 184, 212, .5);
    border-radius: 0;
    background: none;
    font-size: 14.2px;
    color: var(--t-2);
    align-items: flex-start;
    gap: 0;
}
.lms.ui2 .ladder-out i.ph { display: none; }
.lms.ui2 .ladder-out b { color: var(--t-1); }

/* =========================================================================
   8. MODULES
   Twelve equal rounded cards, each with an icon tile and a footer that set
   words like "Yours" and "Timed" in 21px bold as though they were figures.
   Two of the cards spanned two columns, which left two holes in the grid.
   It is a list of twelve things, so it is now a list of twelve things.
   ========================================================================= */
.lms.ui2 .modlist {
    display: grid;
    gap: 0;
    border-top: 1px solid var(--rule);
}
.lms.ui2 .modrow { padding: 22px 0; border-bottom: 1px solid var(--rule); }
.lms.ui2 .modrow h3 { margin: 0 0 7px; color: var(--t-1); }
.lms.ui2 .modrow p { margin: 0; font-size: 14.6px; line-height: 1.62; color: var(--t-2); max-width: 54ch; }
/* Sentence case, not mono caps. Twelve of these in a column, all shouting,
   was the old stat footer in a different costume. */
.lms.ui2 .modrow-note {
    margin-top: 9px !important;
    font-size: 12.8px !important;
    line-height: 1.5;
    color: var(--t-4) !important;
}
.lms.ui2 .modrow-note b { font-weight: 600; color: var(--t-3); }

/* =========================================================================
   9. FEATURE LISTS
   .feat was an icon plus two lines, repeated up to eight times a section. The
   icon said nothing the heading did not. A rule groups them just as well.
   ========================================================================= */
.lms.ui2 .feats { gap: 0 40px; }
.lms.ui2 .feat {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 16px 0;
    border-top: 1px solid var(--rule);
}
.lms.ui2 .feat > i.ph { display: none; }
.lms.ui2 .feat b { font-size: 15px; margin-bottom: 4px; }
.lms.ui2 .feat span { font-size: 14.2px; line-height: 1.58; color: var(--t-2); }

.lms.ui2 .stay-head { margin-top: 44px; padding-top: 30px; border-top-color: var(--rule); }
.lms.ui2 .stay-head h3 { font-size: clamp(18px, 2.4vw, 22px); }
.lms.ui2 .deg-feats,
.lms.ui2 .fee-feats { border-top-color: var(--rule); }

/* =========================================================================
   10. THE FULL MENUS
   Two sections listed 244 features and every one of them was a pill with its
   own border and full radius. Set as columns they read faster, take less room
   and stop shouting.
   ========================================================================= */
.lms.ui2 .cluster { padding: 24px 0; border-top-color: var(--rule); }
.lms.ui2 .cluster-h { gap: 10px; margin-bottom: 13px; align-items: baseline; }
.lms.ui2 .cluster-h i.ph { display: none; }
.lms.ui2 .cluster-h h3 { font-size: 15.5px; }
.lms.ui2 .cluster-h span { font-size: 12.5px; letter-spacing: 0; text-transform: none; font-family: "IBM Plex Sans", sans-serif; color: var(--t-3); margin-left: 0; }

.lms.ui2 .chips2 {
    display: block;
    columns: 2;
    column-gap: 40px;
}
.lms.ui2 .chips2 span {
    display: block;
    break-inside: avoid;
    padding: 4px 0 4px 15px;
    position: relative;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: 13.8px;
    line-height: 1.45;
    color: var(--t-2);
}
/* a 3px tick, so the eye can find the start of each item without an icon */
.lms.ui2 .chips2 span::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    width: 5px;
    height: 1px;
    background: var(--rule-2);
}

/* =========================================================================
   11. SALES BLOCK
   ========================================================================= */
/* align-items was centre, which floated the short left column in the middle of
   a tall right one and opened ~150px of dead space above and below it. */
.lms.ui2 .refer {
    border-radius: var(--r-md);
    padding: 30px 26px;
    background: var(--surface);
    border: 1px solid var(--rule);
    gap: 28px;
    align-items: start;
}
.lms.ui2 .refer::after { display: none; }              /* corner halo */
.lms.ui2 .refer-ic { display: none; }
.lms.ui2 .refer-l h3 { font-size: clamp(18px, 2.4vw, 22px); margin-bottom: 11px; }
.lms.ui2 .refer-l p { font-size: 15px; line-height: 1.68; }
.lms.ui2 .refer-r li { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 14px 0; border-top-color: var(--rule); }
.lms.ui2 .refer-r li > i.ph { display: none; }
.lms.ui2 .refer-r b { font-size: 14.8px; margin-bottom: 4px; }
.lms.ui2 .refer-r span { font-size: 14px; color: var(--t-2); }

.lms.ui2 .sales-reach { margin-top: 20px; gap: 8px 24px; }
.lms.ui2 .sales-reach a { font-size: 14px; }
.lms.ui2 .sales-reach i.ph { font-size: 15px; color: var(--t-3); }

/* included / not included: two columns, one rule between them */
.lms.ui2 .incl-grid { gap: 0; margin-top: 34px !important; border-top: 1px solid var(--rule); }
.lms.ui2 .incl { background: none; border: 0; border-radius: 0; padding: 26px 0 4px; }
.lms.ui2 .incl h3 { font-size: 15px; margin-bottom: 16px; }
.lms.ui2 .incl h3 i.ph { font-size: 16px; }
.lms.ui2 .incl ul { gap: 11px; }
.lms.ui2 .incl li { font-size: 14.2px; grid-template-columns: 14px 1fr; gap: 10px; }
.lms.ui2 .incl li i.ph { font-size: 12px; margin-top: 4px; }
.lms.ui2 .incl.yes li i.ph { color: rgba(63, 214, 155, .7); }
.lms.ui2 .incl.no li i.ph { color: rgba(232, 139, 111, .62); }

/* =========================================================================
   12. STEPS, PROOF, FAQ, CLOSING
   ========================================================================= */
.lms.ui2 .stepx { grid-template-columns: 30px minmax(0, 1fr); gap: 20px; padding: 22px 0; border-top-color: var(--rule); }
.lms.ui2 .stepx-n {
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    background: none;
    font-family: "IBM Plex Mono", monospace;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--t-3);
    justify-items: start;
    padding-top: 3px;
}
.lms.ui2 .stepx h3 { font-size: 16.5px; margin-bottom: 5px; }
.lms.ui2 .stepx p { font-size: 14.6px; }

.lms.ui2 .proof-nums {
    gap: 0;
    background: none;
    border: 0;
    border-top: 1px solid var(--rule);
    border-radius: 0;
    margin-top: 26px;
}
.lms.ui2 .proof-nums div { background: none; padding: 18px 0; border-bottom: 1px solid var(--rule); }
/* "Live" and "Pan-India" are not figures. Dropped from 32px so the row reads
   as three short facts rather than a scoreboard with two broken numbers. */
.lms.ui2 .proof-nums b { font-size: 20px; letter-spacing: -.02em; }
.lms.ui2 .proof-nums span { font-size: 10px; color: var(--t-4); }

/* the photograph: same radius as everything else, and a label that is a label */
.lms.ui2 .proof-shot { border-radius: var(--r-md); border-color: var(--rule-2); box-shadow: none; }
.lms.ui2 .proof-cap {
    left: 12px;
    bottom: 12px;
    border-radius: var(--r-xs);
    padding: 6px 10px;
    background: rgba(5, 14, 32, .82);
    border-color: var(--rule-2);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    font-size: 10px;
}
.lms.ui2 .proof-cap i { color: var(--t-3); }

.lms.ui2 .faq {
    background: none;
    border: 0;
    border-top: 1px solid var(--rule);
    border-radius: 0;
    margin-bottom: 0;
}
.lms.ui2 .faq summary { font-size: 15.5px; padding: 18px 44px 18px 0; }
.lms.ui2 .faq summary::after { right: 6px; width: 9px; height: 9px; }
.lms.ui2 .faq[open] summary { color: var(--t-1); }
.lms.ui2 .faq-body { padding: 0 44px 18px 0; font-size: 14.6px; line-height: 1.68; }

.lms.ui2 .closing { padding: 76px 0; }
/* .closing-in IS the .wrap, so a max-width here would centre the block and
   break the left gutter every other section aligns to. Constrain the child. */
.lms.ui2 .closing-in { display: block; }
.lms.ui2 .closing-in > div { max-width: 660px; }
.lms.ui2 .closing p { font-size: 16px; }
.lms.ui2 .closing-cta { margin-top: 28px; max-width: 420px; }
.lms.ui2 .closing-call { margin-top: 30px; padding-top: 24px; border-top-color: var(--rule); }
.lms.ui2 .closing-call i.ph { font-size: 22px; color: var(--t-3); }
.lms.ui2 .closing-call b { font-size: clamp(19px, 3vw, 25px); }

.lms.ui2 .band { padding: 56px 0; min-height: 0; }
.lms.ui2 .band q { font-size: clamp(19px, 3vw, 27px); }

/* =========================================================================
   13. THE DRAWN PRODUCT UI
   These stay - they are the only thing on the page showing the actual product.
   They just stop floating: a smaller radius, a hairline, and a shadow that
   reads as a page element rather than a hovering slab.
   ========================================================================= */
.lms.ui2 .mock {
    border-radius: var(--r-md);
    border: 1px solid var(--rule-2);
    box-shadow: 0 16px 38px -26px rgba(0, 0, 0, .8);
    padding: 22px;
}
.lms.ui2 .mock .win { border-radius: var(--r-sm); box-shadow: none; }
.lms.ui2 .mock .mcard { border-radius: var(--r-xs); }
.lms.ui2 .mock .drop { border-radius: var(--r-xs); }
.lms.ui2 .mock .float { border-radius: var(--r-sm); box-shadow: 0 16px 32px -14px rgba(11, 27, 51, .4); }
.lms.ui2 .mock .ptile { border-radius: var(--r-sm); }
.lms.ui2 .mock .opt { border-radius: var(--r-sm); }
.lms.ui2 .mock .mtile { border-radius: var(--r-sm); }
.lms.ui2 .mock .sw { border-radius: var(--r-xs); }
.lms.ui2 .mock .sz { border-radius: var(--r-xs); }
.lms.ui2 .mock .cd b { border-radius: var(--r-xs); }
.lms.ui2 .mock-note { color: var(--t-4); }
.lms.ui2 .mock-note i.ph { color: var(--t-4); }

/* =========================================================================
   14. THE DIALOG
   ========================================================================= */
.lms.ui2 .modal {
    border-radius: var(--r-md);
    border-color: var(--rule-2);
    box-shadow: 0 40px 100px -40px rgba(0, 0, 0, .9);
}
.lms.ui2 .modal-aside::after { display: none; }
/* The commerce overrides in lms.css cover the hero and the closing band but
   not this one, so the dialog was still opening on the madrasah lattice. */
.lms.commerce .ma-bg {
    background-image: url('/uploads/website-images/commerce-pattern.webp');
    background-position: center 42%;
    opacity: .13;
}
.lms.ui2 .modal-close { border-radius: var(--r-sm); border-color: var(--rule-2); }
.lms.ui2 .ma-product {
    border: 0;
    background: none;
    border-radius: 0;
    padding: 0;
    color: var(--t-3);
}
.lms.ui2 .ma-list li > i.ph { color: var(--t-3); font-size: 14px; }
/* a one-line reassurance, not a boxed banner above the dialog title */
.lms.ui2 .modal .form-card .fc-tag {
    border: 0;
    background: none;
    border-radius: 0;
    padding: 0;
    color: var(--t-3);
    letter-spacing: .11em;
}
.lms.ui2 .modal .form-card .fc-tag i.ph { color: var(--t-3); }
.lms.ui2 .field input,
.lms.ui2 .field select { border-radius: var(--r-sm); min-height: 46px; }

/* =========================================================================
   15. MOTION
   Everything faded up from 16-18px, every card lifted on hover and the primary
   button had a light sweep across it. Motion is now one short fade, used once
   per block, and nothing moves on hover except colour.
   ========================================================================= */
.lms.ui2 .rv { transform: translateY(10px); transition: opacity .38s ease, transform .38s var(--ease); }
.lms.ui2 .up { transform: translateY(10px); animation-duration: .5s; }
.lms.ui2 .rv.d3, .lms.ui2 .rv.d4, .lms.ui2 .rv.d5 { transition-delay: .16s; }
.lms.ui2 .tile:hover,
.lms.ui2 .prog:hover,
.lms.ui2 .mock:hover { transform: none; }

@media (prefers-reduced-motion: reduce) {
    .lms.ui2 *,
    .lms.ui2 *::before,
    .lms.ui2 *::after { animation: none !important; transition: none !important; }
    .lms.ui2 .rv, .lms.ui2 .up { opacity: 1; transform: none; }
}

/* =========================================================================
   16. POS: a page with no photographs
   Commerce runs on a retail photograph, which suits a storefront product. A
   till is software. A stock picture of a shop would say nothing about it and
   is exactly the kind of filler that reads as generated, so this page carries
   no photography at all - the visuals are the interface, drawn.
   ========================================================================= */
.lms.pos .lhero { background: var(--d1); }
.lms.pos .lhero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
    background-size: 78px 78px;
    -webkit-mask-image: radial-gradient(90% 70% at 50% 35%, #000 20%, transparent 100%);
    mask-image: radial-gradient(90% 70% at 50% 35%, #000 20%, transparent 100%);
    pointer-events: none;
}
.lms.pos .lhero > .wrap { position: relative; z-index: 2; }
.lms.pos .sec.g-lattice::after { display: none; }
.lms.pos .closing { background: var(--d1); }
.lms.pos .closing::before { display: none; }
.lms.pos .closing::after { background: none; border-top: 1px solid var(--rule); }
.lms.pos .ma-bg { display: none; }
.lms.pos .modal-aside { background: var(--d0); }
.lms.pos .lhero .mock { padding: 18px; }

/* the closing CTA gets the one atmospheric photograph on the page */
/* The source is already an evening interior. At .3 under a .82 scrim it went
   to black and the shop was invisible, so the scrim carries the contrast and
   the photograph is allowed to be seen. */
.lms.pos .closing::before {
    display: block;
    background: url('/uploads/website-images/pos-closing.webp') center 56% / cover no-repeat;
    opacity: .62;
}
.lms.pos .closing::after {
    background: linear-gradient(90deg, rgba(5, 14, 32, .93) 0%, rgba(5, 14, 32, .82) 46%, rgba(5, 14, 32, .66) 100%);
    border-top: 1px solid var(--rule);
}

/* ---------- who it is for ----------
   Six real interiors, one per trade. They carry the section, so they get the
   width - but no card, no shadow and no lift: the photograph is the object and
   the two lines sit under it on the page's own ground.
   A single flat scrim over all six is what makes six separately shot rooms
   read as one set instead of six stock pictures. */
.lms.ui2 .trades { display: grid; gap: 30px 26px; }
.lms.ui2 .trade-shot {
    position: relative;
    display: block;
    margin-bottom: 15px;
    border-radius: var(--r-sm);
    overflow: hidden;
    border: 1px solid var(--rule-2);
    background: #0C2444;
}
.lms.ui2 .trade-shot img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    filter: saturate(.82) contrast(1.04);
}
.lms.ui2 .trade-shot::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 26, 53, .28), rgba(8, 26, 53, .48));
    pointer-events: none;
}
.lms.ui2 .trade h3 { margin: 0 0 6px; }
.lms.ui2 .trade p { margin: 0; font-size: 14.4px; line-height: 1.6; color: var(--t-2); max-width: 46ch; }
/* the thumbnail silhouette is a garment on Commerce; on a pharmacy till it
   should read as a box on a shelf */
.lms.pos .pt-img::after { inset: 13px 18% 11px; border-radius: 4px; }

/* =========================================================================
   TASK MANAGEMENT (Vantboard): same rules as POS - the product is software,
   so the visuals are its screens and the ground carries no photograph.
   ========================================================================= */
.lms.tasks .lhero { background: var(--d1); }
.lms.tasks .lhero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
    background-size: 78px 78px;
    -webkit-mask-image: radial-gradient(90% 70% at 50% 35%, #000 20%, transparent 100%);
    mask-image: radial-gradient(90% 70% at 50% 35%, #000 20%, transparent 100%);
    pointer-events: none;
}
.lms.tasks .lhero > .wrap { position: relative; z-index: 2; }
.lms.tasks .lhero .mock { padding: 18px; }
.lms.tasks .sec.g-lattice::after { display: none; }
.lms.tasks .closing { background: var(--d1); }
.lms.tasks .closing::before { display: none; }
.lms.tasks .closing::after { background: none; border-top: 1px solid var(--rule); }
.lms.ui2 .lhero-note { margin: 14px 0 0; font-size: 13.5px; color: var(--t-3); }

/* ---------- plans ----------
   One bordered strip divided by hairlines, the way a real pricing table reads,
   rather than five floating cards competing for attention. */
.lms.ui2 .plans {
    display: grid;
    border: 1px solid var(--rule-2);
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--surface);
}
.lms.ui2 .plan { display: flex; flex-direction: column; padding: 24px 22px; border-top: 1px solid var(--rule); min-width: 0; }
.lms.ui2 .plan:first-child { border-top: 0; }
.lms.ui2 .plan-name { font-family: "Sora", sans-serif; font-size: 15px; font-weight: 600; color: var(--t-1); }
.lms.ui2 .plan-price { margin-top: 10px; font-family: "Sora", sans-serif; font-size: 30px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; color: #fff; }
.lms.ui2 .plan-price small { font-family: "IBM Plex Sans", sans-serif; font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--t-3); }
.lms.ui2 .plan > p { margin: 9px 0 16px; font-size: 13.8px; line-height: 1.55; color: var(--t-2); }
.lms.ui2 .plan ul { list-style: none; margin: 0 0 22px; padding: 16px 0 0; border-top: 1px solid var(--rule); display: grid; gap: 8px; font-size: 13.8px; color: var(--t-2); }
.lms.ui2 .plan li b { color: var(--t-1); font-weight: 600; }
.lms.ui2 .plan .btn { margin-top: auto; width: 100%; min-height: 42px; font-size: 14px; }
.lms.ui2 .plans-note { margin-top: 16px; font-size: 13.5px; color: var(--t-3); }

/* "Coming soon" against a trade that is not fully supported yet. Said plainly,
   because pretending otherwise is how a demo call goes wrong. */
.lms.ui2 .soon {
    display: inline-block;
    margin-left: 9px;
    vertical-align: 1px;
    font-family: "IBM Plex Mono", monospace;
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--t-4);
}

/* =========================================================================
   17. RESPONSIVE
   The same decisions, held at every width.
   ========================================================================= */
@media (max-width: 619px) {
    .lms.ui2 { --pad-sec: 52px; }
    .lms.ui2 .sec-head { margin-bottom: 28px; }
    .lms.ui2 .lhero { padding: 40px 0; }
    .lms.ui2 .lhero h1 { font-size: 31px; }
    .lms.ui2 .pcase-was { padding: 22px 0 0; }
    .lms.ui2 .pcase-now { padding: 14px 0 22px; }
    .lms.ui2 .refer { padding: 24px 20px; }
    .lms.ui2 .chips2 { columns: 1; }
    .lms.ui2 .modrow { padding: 18px 0; }
    .lms.ui2 .signal-card { padding: 18px 16px 16px; }
    .lms.ui2 .sc-foot { margin: 13px -16px -16px; padding: 12px 16px; }
    .lms.ui2 .mock { padding: 14px 12px 16px; }
}

@media (min-width: 620px) {
    .lms.ui2 .trades { grid-template-columns: 1fr 1fr; }
    .lms.ui2 .feats { grid-template-columns: 1fr 1fr; }
    .lms.ui2 .proof-nums { grid-template-columns: repeat(3, 1fr); column-gap: 32px; }
    .lms.ui2 .chips2 { columns: 2; }
}

@media (min-width: 760px) {
    .lms.ui2 .modlist { grid-template-columns: 1fr 1fr; column-gap: 48px; }
    /* the second column needs its own top rule, since the list border only
       covers the first item of each row */
    .lms.ui2 .modrow:nth-child(2) { border-top: 0; }
}

@media (min-width: 900px) {
    /* left column narrower than the right: the complaint is short, the answer
       is not. A 50/50 split left one side half empty on every row. */
    .lms.ui2 .pcase { grid-template-columns: .82fr 1.18fr; column-gap: 56px; }
    .lms.ui2 .pcase-was,
    .lms.ui2 .pcase-now { padding: 30px 0; border: 0; }
    .lms.ui2 .incl-grid { grid-template-columns: 1fr 1fr; column-gap: 56px; }
    .lms.ui2 .incl.no { padding-left: 56px; border-left: 1px solid var(--rule); margin-left: -56px; }
}

@media (min-width: 1000px) {
    .lms.ui2 { --pad-sec: 88px; }
    .lms.ui2 .lhero { padding: 72px 0; }
    .lms.ui2 .lhero-in { gap: 56px; }
    .lms.ui2 .chips2 { columns: 3; }
    .lms.ui2 .trades { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 24px; }
    .lms.ui2 .refer { padding: 34px 32px; gap: 44px; }
    .lms.ui2 .feats { gap: 0 44px; }
    .lms.ui2 .fee-feats { grid-template-columns: repeat(3, 1fr); gap: 0 34px; }
    .lms.ui2 .stay-feats { grid-template-columns: repeat(2, 1fr); gap: 0 44px; }

    /* The till is the hero image, so it takes the full column. As half of a
       split it squeezed a five-column ticket into 250px. */
    .lms.pos .lhero-in, .lms.tasks .lhero-in { grid-template-columns: minmax(0, 1fr); gap: 36px; align-items: start; }
    .lms.pos .lhero-in > div:first-child, .lms.tasks .lhero-in > div:first-child { max-width: 720px; }
    .lms.pos .lhero, .lms.tasks .lhero { padding: 54px 0 62px; }

    .lms.ui2 .plans { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .lms.ui2 .plan { border-top: 0; border-left: 1px solid var(--rule); }
    .lms.ui2 .plan:first-child { border-left: 0; }
}