/* ==========================================================================
   public-modern.css  —  Positive Proximity public site refresh
   --------------------------------------------------------------------------
   Loaded AFTER layout.css, and everything is scoped to  body.pub-modern  so
   the refresh is opt-in: remove the class in /includes/header_inc.asp and the
   site renders exactly as it did before.

   Phase 1 (8/16/2026) is the HEADER and MAIN MENU only. Page content is
   deliberately untouched — that is the next phase.

   The design language is the one already built for /mytools/ (admin-modern.css)
   so the marketing site and the signed-in portal read as one product: the same
   greens and neutrals, the same 10px radius, the same pill navigation with a
   ring on the current item.

   NOTE: /mytools/ is NOT affected by this file. It is only linked from the
   public header include.
   ========================================================================== */

body.pub-modern {
    /* brand — same values as admin-modern.css */
    --pp-green:        #36b44b;
    --pp-green-dark:   #2a9c3d;
    --pp-green-soft:   #eaf7ec;

    /* neutrals */
    --pp-text:         #23282d;
    --pp-muted:        #6b7280;
    --pp-faint:        #98a1ac;
    --pp-line:         #e3e7ec;
    --pp-line-soft:    #eef1f5;
    --pp-surface:      #ffffff;
    --pp-canvas:       #f5f7fa;
    --pp-hover:        #f2f5f8;

    --pp-radius:       10px;
    --pp-radius-sm:    6px;
    --pp-shadow-sm:    0 1px 2px rgba(16,24,40,.06);
    --pp-shadow:       0 8px 24px rgba(16,24,40,.10), 0 2px 6px rgba(16,24,40,.06);

    --pp-navfont:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                       "Helvetica Neue", Arial, sans-serif;
}

/* ==========================================================================
   1. The header shell
   The old header was a 5px grey slab over a white row, with a dark
   #signup_login bar under it carrying the menu. One white surface now, with a
   hairline under it and the menu on the same field as the logo.
   ========================================================================== */

body.pub-modern #header {
    border-top: 3px solid var(--pp-green);
    background: var(--pp-surface);
}
body.pub-modern #header .row { border: none; }

/* ---------- one horizontal band ----------
   The header used to be two stacked bands: a row with the logo, and a separate
   #signup_login bar under it holding the menu. #signup_login now sits inside
   the row's right-hand column (see header_inc.asp), so the whole header is one
   line: logo and tagline left, Contact/Login over the menu on the right.

   The two columns ship as .span6, a fixed 300px each. That is nowhere near
   enough for five menu options, so the row is a flex pair instead: the logo
   takes what it needs and the nav side takes the rest. */
body.pub-modern #header > .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
body.pub-modern #header > .row > .span6 {
    width: auto;
    margin: 0;
    box-sizing: border-box;
}
body.pub-modern #header > .row > .span6:first-child { flex: 0 0 auto; }
body.pub-modern #header > .row > .span6:last-child {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    justify-content: flex-end;
}

/* layout.css caps this bar at 40px (and 38px under 767px) because it used to
   be a single strip of buttons. It holds two stacked rows now, so the caps
   have to go — they are id selectors, hence the !importants. */
body.pub-modern #signup_login {
    background: transparent !important;
    max-height: none !important;
    height: auto !important;
    border: none;
    box-sizing: border-box;
    padding: 10px 0;
}
/* Contact/Login above, menu below, both hard right */
body.pub-modern #signup_login .row {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    width: auto;
    margin: 0;
    padding: 0 !important;
}
body.pub-modern #signup_login #login {
    height: auto;
    float: none;
    margin: 0;
}
body.pub-modern #signup_login #buttons {
    float: none;
    margin: 0;
    display: flex;
    gap: 8px;
}

/* the menu's own column ships as a percentage-width .span10 */
body.pub-modern #signup_login .span10 {
    width: auto;
    flex: 0 0 auto;
    min-width: 0;
    margin: 0;
}

/* Logo + tagline
   The file is 2048x768. The width/height attributes in the markup are the
   intrinsic size — they give the browser the aspect ratio so the header does
   not reflow while the image loads — and the display size is set here.

   Both boxes ship as floats, so their vertical relationship was whatever two
   hand-tuned margins happened to produce (12px on the logo, 22px on the
   tagline). Their container is a flex row instead, which centres the tagline
   against the logo whatever either one's height turns out to be — including
   after the logo is replaced again. */
body.pub-modern #header .row > .span6:first-child {
    display: flex;
    align-items: center;
    gap: 0;
}
body.pub-modern #logo {
    float: none !important;
    flex: 0 0 auto;
    margin: 12px 0;
    padding: 0 !important;
}
body.pub-modern #logo img {
    display: block;
    width: 150px;
    height: auto;
    max-width: 100%;
}
body.pub-modern #tagline {
    float: none;
    flex: 0 1 auto;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 2px 0 2px 16px;
    margin-left: 16px;
    border-left: 1px solid var(--pp-line);
    color: var(--pp-text);
    font-family: var(--pp-navfont);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
}
body.pub-modern #tagline div { padding: 0 !important; }
body.pub-modern #tagline span {
    color: var(--pp-text);
    font-size: 16px;
    font-weight: 500;
    font-style: normal;
}

/* ==========================================================================
   2. The main menu — pills, matching the portal
   ========================================================================== */

body.pub-modern .sf-menu {
    float: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;   /* the menu sits to the right, by Login */
    flex-wrap: wrap;
    gap: 0;
    font-family: var(--pp-navfont);
}
body.pub-modern .sf-menu > li {
    float: none;
    display: flex;
    align-items: center;
    margin: 0;
    border: none !important;    /* the old menu drew 1px dividers between items */
    text-align: left;
}
/* Contact and Login are in the list for the mobile clone only — they are
   buttons above the menu on desktop. layout.css hides them with
   `.display-mobile{display:none}`, which the rule above was outranking, so
   they showed up twice. Restated here at the weight it takes to win.
   The mobile menu is unaffected: scripts.js replaces the clone's class
   attribute, so #mobile-menu is not .sf-menu. */
body.pub-modern .sf-menu > li.display-mobile { display: none; }

/* (Green dot separators between the options were tried on 8/16/2026 and
   removed — they read as clutter next to the pills, which already separate the
   options on their own. The old 1px dividers are gone too; spacing does the
   work.) */
body.pub-modern .sf-menu > li + li { margin-left: 2px; }
body.pub-modern .sf-menu a {
    font-family: var(--pp-navfont);
    color: var(--pp-text);
}
body.pub-modern .sf-menu > li > a,
body.pub-modern .sf-menu > li.dropdown > a {
    color: var(--pp-text) !important;
    font-size: 14.5px;
    font-weight: 600;
}
body.pub-modern .sf-menu > li > a > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 14px;
    border: 1px solid transparent;
    border-radius: var(--pp-radius);
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
body.pub-modern .sf-menu > li > a:hover > span,
body.pub-modern .sf-menu > li.sfHover > a > span {
    color: var(--pp-text) !important;
    background-color: var(--pp-hover) !important;
}
/* the current section */
body.pub-modern .sf-menu > li.active > a > span {
    color: var(--pp-text) !important;
    background-color: var(--pp-surface) !important;
    border-color: var(--pp-green);
    border-width: 1.5px;
    box-shadow: 0 1px 2px rgba(16,24,40,.08), 0 0 0 3px rgba(54,180,75,.12);
}
body.pub-modern .sf-menu > li > a:focus-visible {
    outline: 2px solid var(--pp-green);
    outline-offset: 2px;
}

/* a section with a sub-menu opens it rather than navigating, so it should not
   offer the pointer of a link */
body.pub-modern .sf-menu > li.dropdown > a { cursor: default; }

/* the caret on a section that has a sub-menu, drawn rather than a font icon */
body.pub-modern .sf-menu > li.dropdown > a > span:after {
    content: "";
    width: 0;
    height: 0;
    margin-left: 2px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid var(--pp-faint);
    transition: transform .15s ease;
}
body.pub-modern .sf-menu > li.dropdown:hover > a > span:after,
body.pub-modern .sf-menu > li.dropdown.sfHover > a > span:after { transform: rotate(180deg); }

/* ---------- sub-menus ----------
   Two things about the open/close, both of which broke it:

   1. THE GAP. Sitting the panel 4px below the pill looked right and killed it:
      the panel only stays open while the cursor is inside the parent <li>, and
      that gap is outside it. The panel keeps its gap, and the :before below is
      a transparent bridge across it — the bridge is a descendant of the <li>,
      so hovering it counts as hovering the parent.

   2. THE EDGE. layout.css anchors sub-menus with `left:0`, which was written
      for a left-aligned menu. This menu is right-justified, so a 300px panel
      hanging off the last options ran past the edge of the page. They hang
      from the right edge of their parent instead. */
body.pub-modern .sf-menu li.dropdown ul {
    min-width: 260px;
    max-width: 340px;
    padding: 6px;
    border: 1px solid var(--pp-line);
    border-radius: var(--pp-radius);
    background-color: var(--pp-surface) !important;
    box-shadow: var(--pp-shadow);
    top: calc(100% + 6px);
    left: auto;
    right: 0;
}
body.pub-modern .sf-menu li.dropdown li,
body.pub-modern .sf-menu li.dropdown li a { background-color: transparent; }
body.pub-modern .sf-menu li.dropdown > ul:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -10px;
    height: 10px;
}
body.pub-modern .sf-menu li.dropdown li {
    padding: 0;
    border: none;
    background: transparent;
    text-align: left;
}
body.pub-modern .sf-menu li.dropdown li a {
    display: block;
    padding: 10px 12px;
    border-radius: var(--pp-radius-sm);
    color: var(--pp-text) !important;
    font-size: 13.5px;   /* one step under the top-level options */
    font-weight: 500;
    line-height: 1.35;
}
body.pub-modern .sf-menu li.dropdown li a:hover { background-color: var(--pp-hover); }

/* layout.css paints the panel GREEN the moment it opens
   (`.sf-menu li.dropdown:hover > ul { background-color: green }`), and it
   paints every item black. Both have to be answered — but the reset has to
   name the surface, not `transparent`: blanking it left the open panel see-
   through over the page behind it, which is the state you actually look at. */
body.pub-modern .sf-menu li.dropdown:hover > ul,
body.pub-modern .sf-menu li.dropdown.sfHover > ul {
    background-color: var(--pp-surface) !important;
}
body.pub-modern .sf-menu li.dropdown > ul li:hover { background-color: transparent; }

/* The self-service option is a different kind of thing from the full-service
   ones above it - a separate product, on a separate site - so it is set apart:
   a rule across the panel and a shaded row, rather than reading as one more
   item in the same list. */
body.pub-modern .sf-menu li.dropdown li.is-alt {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--pp-line);
}
body.pub-modern .sf-menu li.dropdown li.is-alt > a {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: var(--pp-canvas);
    color: var(--pp-text) !important;   /* the shade sets it apart, not the type colour */
}
/* a small mark on the self-service option - it is the quick, do-it-yourself
   route, so a bolt. Inline SVG, so it takes the row's own colour. */
body.pub-modern .pp-mi {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    color: var(--pp-green);
}
body.pub-modern .sf-menu li.dropdown li.is-alt > a:hover {
    background-color: var(--pp-hover);
    color: var(--pp-text) !important;
}
/* in the mobile clone the panel is a flat list, so the rule alone does it */
body.pub-modern #mobile-menu li.is-alt > a {
    display: flex;
    align-items: center;
    gap: 10px;
    border-top: 1px solid var(--pp-line);
    background-color: var(--pp-canvas);
}
body.pub-modern #mobile-menu .pp-mi { width: 16px; height: 16px; }

/* the small note under an option, e.g. the product name for the self-service
   tools */
body.pub-modern .sf-menu li.dropdown li em {
    display: block;
    font-style: normal;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--pp-green-dark);
    padding-top: 2px;
}

/* an option that is not live yet. Shown, so the shape of the range is visible,
   but inert. (Nothing uses this at the moment - both self-service options went
   live with /proxexpress.asp on 8/16/2026 - it is kept for the next one.) */
body.pub-modern .sf-menu li.dropdown li.is-disabled > a,
body.pub-modern .sf-menu li.dropdown li.is-disabled > a:hover {
    color: var(--pp-faint) !important;
    background: transparent;
    cursor: not-allowed;
}
body.pub-modern .sf-menu li.is-disabled em {
    display: block;
    font-style: normal;
    font-size: 11px;
    color: var(--pp-faint);
    padding-top: 2px;
}

/* ---------- Contact + Login, above the menu ----------
   Deliberately smaller than the menu pills: they are secondary to the sections
   and sit on the line above them. */
body.pub-modern #signup_login #login .btn,
body.pub-modern .sf-menu > li.login > a > span {
    /* the anchor is the flex box, not just the span inside it: as an
       inline-block its baseline sat against the label, which pushed the icon
       and the text a pixel apart vertically */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 11px !important;
    border-radius: var(--pp-radius-sm) !important;
    background-color: var(--pp-green) !important;
    border: none !important;
    color: #fff !important;
    font-family: var(--pp-navfont);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.35;
    text-shadow: none;
}
body.pub-modern #signup_login #login .btn:hover,
body.pub-modern .sf-menu > li.login > a:hover > span {
    background-color: var(--pp-green-dark) !important;
    color: #fff !important;
}
body.pub-modern #signup_login #login .btn span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;          /* no leading to centre against */
    color: #fff !important;
}
/* the icon is one step lighter than the label, so the label still leads.
   display:block kills the inline baseline gap under the svg, which is what
   made it sit a hair high next to the text. */
body.pub-modern .pp-btn-ico {
    display: block;
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
    opacity: .85;
}
body.pub-modern #signup_login #login .btn:hover .pp-btn-ico { opacity: 1; }

/* Optical nudges (8/16/2026). The label is wrapped in its own element so each
   button's text can be moved without taking the icon with it — the two sit
   differently because one is an outline button and one is solid.
   position:relative so nothing reflows around them. */
body.pub-modern .pp-btn-txt {
    position: relative;
    font-weight: inherit;
}
body.pub-modern #signup_login #login .btn.accent-color-1 .pp-btn-txt { top: 0; }
body.pub-modern #signup_login #login #contact_btn .pp-btn-txt { top: 2px; }
/* the envelope rides a touch high against its label */
body.pub-modern #signup_login #login #contact_btn .pp-btn-ico {
    position: relative;
    top: 2px;
}

/* Contact sits beside Login rather than in the menu. layout.css hides
   #contact_btn below 1400px — it was competing for room with the old wide
   menu; it has its own line now, so it stays. */
body.pub-modern #signup_login #login #contact_btn {
    display: inline-block !important;
    background-color: transparent !important;
    border: 1px solid var(--pp-line) !important;
    color: var(--pp-text) !important;
}
body.pub-modern #signup_login #login #contact_btn span { color: var(--pp-text) !important; }
body.pub-modern #signup_login #login #contact_btn .pp-btn-ico { color: var(--pp-green); opacity: 1; }
body.pub-modern #signup_login #login #contact_btn:hover {
    background-color: var(--pp-hover) !important;
}

/* ==========================================================================
   3. The home page's H1 block (8/16/2026, SEO phase 1)
   The one heading that says what the company does, with the services named
   under it. Sized to lead the page without competing with the slider above it.
   ========================================================================== */

/* ---------- the mobile banner, de-headinged ----------
   `Attendance Tracking` / `& Event Management` were an H2 and an H3 sitting
   ABOVE the page's H1 in source order, so the first two headings a crawler met
   were half a phrase each. They are divs now. These rules are copied from the
   #homebanner_mobile h2/h3 rules in layout.css so nothing moves or resizes,
   including the calc() sizes and the 500px step-down.
   Same for the section banners, which were H2s over a background image. */
body.pub-modern #homebanner_mobile .hb-title,
body.pub-modern #homebanner_mobile .hb-sub,
body.pub-modern .hb-section {
    text-align: center;
    color: #fff;
}
body.pub-modern #homebanner_mobile .hb-title {
    font-size: calc(2.4em + 1vw);
    line-height: 30px;
    margin-bottom: 0px;
    font-family: 'open_sansbold', sans-serif;
}
body.pub-modern #homebanner_mobile .hb-sub {
    font-size: calc(1.4em + 1vw);
    line-height: 28px;
    margin-bottom: 15px;
    font-family: 'open_sansregular', sans-serif;
}
@media (max-width: 500px) {
    body.pub-modern #homebanner_mobile .hb-title { font-size: calc(2.1em + 1vw); }
    body.pub-modern #homebanner_mobile .hb-sub   { font-size: calc(1.6em + 1vw); }
}
body.pub-modern .hb-section {
    font-size: calc(1.9em + 1vw);
    line-height: 1.15;
    margin-bottom: 0px;
    font-family: 'open_sansbold', sans-serif;
}
/* the blurb under each banner was an H5, which left the page outline jumping
   from H1 straight to H5. Same declarations as the `#sectionN h5` rules in
   layout.css, on a div. */
body.pub-modern .hb-blurb {
    text-align: center;
    color: #fff;
    font-size: 16px;
    font-weight: normal;
    text-transform: none;
    line-height: 20px;
}

/* the H2 that opens the home page's main explanatory section */
body.pub-modern .hp-section-h2 {
    max-width: 100%;
    margin: 0 0 16px;
    padding: 0;
    text-align: left;
    color: var(--pp-text);
    font-family: 'Source Sans Pro', Arial, sans-serif;
    font-size: 24px;
    line-height: 1.3;
    font-weight: 600;
    text-indent: 0;
    height: auto;
    float: none;
    border: none;
}
@media (max-width: 767px) {
    body.pub-modern .hp-section-h2 { font-size: 20px; }
}

body.pub-modern .hp-intro {
    padding-top: 34px;
    padding-bottom: 6px;
    text-align: center;
}
body.pub-modern .hp-intro h1 {
    display: block;
    max-width: none;
    margin: 0 auto 22px;
    padding: 0;
    text-align: center;      /* stated on the element, not inherited */
    color: var(--pp-text);
    font-family: var(--pp-navfont);
    font-size: 32px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.4px;
    text-indent: 0;         /* layout.css indents h1 off-screen for the header copy */
    height: auto;
    float: none;
    border: none;
    white-space: nowrap;    /* the statement reads as one line */
}
body.pub-modern .hp-intro .hp-lede {
    display: block;
    max-width: 880px;
    margin: 0 auto;
    padding: 8px 0 18px;    /* air above and below the service list */
    text-align: center;
    color: var(--pp-muted);
    font-size: 17px;
    line-height: 1.6;
}

@media (max-width: 1240px) {
    /* the H1 no longer fits on one line here, so let it wrap rather than
       overflow the page */
    body.pub-modern .hp-intro h1 { white-space: normal; font-size: 29px; }
}
@media (max-width: 979px) {
    body.pub-modern .hp-intro { padding-top: 26px; }
    body.pub-modern .hp-intro h1 { font-size: 26px; margin-bottom: 16px; }
    body.pub-modern .hp-intro .hp-lede { font-size: 15.5px; padding: 4px 0 14px; }
}

/* ==========================================================================
   4. Promoted heading levels (8/16/2026, SEO phase 1)
   Every page banner used an <h3> for its name and an <h4> under it, and every
   content section used an <h3> — so no page had an H1, and the section
   headings all sat at the same level as the page's own title.

   The tags are now H1 (page) and H2 (sections), which is the structure a
   crawler reads as "this page is about X, and here are its parts". Nothing
   should LOOK different: these rules teach the new tags the styles that
   layout.css gives the old ones, breakpoint for breakpoint.
   ========================================================================== */

/* ---------- the page banners ----------
   Every sub-page pins its banner to `min-height:290px` in its own <style>
   block. These rules outrank that (a class plus an id beats a bare id), so all
   of them shorten together and any page added later inherits it.

   The scrim is an overlay rather than a darkened photograph: the same images
   are used elsewhere, and white type over an untreated conference photo is
   never reliably legible. */
body.pub-modern #page-header-new {
    position: relative;
    min-height: 0 !important;
    padding: 46px 0 !important;
}
body.pub-modern #page-header-new:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, .58);
}
body.pub-modern #page-header-new > .row,
body.pub-modern #page-header-content {
    position: relative;
    z-index: 2;
}
/* The content box ships at width:60% of the row (and 75-80% in the page-level
   media queries), which is narrower than the H1s these pages now carry -
   "Conference Attendance & Session Tracking" was breaking onto two lines. Wide
   enough to hold them on one, and the H1 rule below stops it wrapping. */
body.pub-modern #page-header-content {
    width: 92% !important;
    max-width: 1000px;
    margin: 0 auto;
}
body.pub-modern #page-header-new p {
    max-width: 760px;
    margin: 12px auto 0;
    font-size: 16px;
    line-height: 1.5;
}
body.pub-modern #page-header-new .btn-large { margin-top: 14px; }

@media (max-width: 979px) {
    body.pub-modern #page-header-new {
        padding: 30px 0 !important;
        /* fixed attachment is unreliable on touch browsers and costs a repaint
           on every scroll frame */
        background-attachment: scroll !important;
    }
}

body.pub-modern #page-header-new h1 {
    margin: 0;
    padding: 0;
    height: auto;
    float: none;
    border: none;
    text-indent: 0;
    font-size: 40px;
    font-weight: bold;
    line-height: 1.15;
    text-align: center;
    color: #fff;
    text-shadow: none;
    font-family: 'Source Sans Pro', Arial, sans-serif;
    white-space: nowrap;   /* the page name reads as one line */
}
@media (max-width: 1100px) {
    /* below this there is not room for the longer names, so let them wrap
       rather than overflow the banner */
    body.pub-modern #page-header-new h1 { white-space: normal; }
}
body.pub-modern #page-header-new h2 {
    margin: 0;
    padding: 0;
    height: auto;
    float: none;
    border: none;
    text-indent: 0;
    font-size: 24px;
    line-height: 28px;
    font-weight: 400;
    text-align: center;
    color: #fff;
    text-shadow: none;
    font-family: 'Source Sans Pro', Arial, sans-serif;
}
/* the plain page-title bar (FAQ, News, Contact) - its heading is an H1 now,
   and layout.css only styles the H3 that used to be there */
body.pub-modern #page-header h1 {
    margin: 0;
    padding: 0;
    height: auto;
    float: none;
    border: none;
    text-indent: 0;
    font-size: 28px;
    line-height: 1.25;
    font-weight: 600;
    color: var(--pp-text);
    font-family: 'Source Sans Pro', Arial, sans-serif;
}
@media (max-width: 767px) {
    body.pub-modern #page-header h1 { font-size: 22px; }
}

body.pub-modern .headline2 h2 {
    text-align: center;
    color: #555;
    font-size: 30px;
    line-height: 36px;
    font-weight: 500;
    font-family: 'Source Sans Pro', Arial, sans-serif;
    text-indent: 0;
    height: auto;
    float: none;
    border: none;
}
/* the sub-heading that names the product behind a capability, e.g.
   "Powered by IntelliTrak®" under a plain-language H2 */
body.pub-modern .headline2 .brandline {
    display: block;
    margin: -6px 0 14px;
    text-align: center;
    color: var(--pp-muted);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .02em;
}
/* the numbered explainer on the lead retrieval page */
body.pub-modern .pp-steps {
    max-width: 820px;
    margin: 14px auto 16px;
    padding: 0 0 0 22px;
    text-align: left;
    list-style: decimal;
}
body.pub-modern .pp-steps li {
    padding: 0 0 10px;
    line-height: 1.6;
}

/* A section linked from the menu anchors on the whole block, image included,
   not on its heading - jumping to the heading landed you underneath the
   picture. scroll-margin-top leaves room for the sticky header so the first
   line is not tucked under it. */
body.pub-modern .headline2[id] { scroll-margin-top: 96px; }
@media (max-width: 979px) {
    body.pub-modern .headline2[id] { scroll-margin-top: 20px; }
}

/* ---------- the question lists under each section ----------
   These belong to the section they sit in: the RFID questions live under the
   RFID heading, the scanner questions under the scanner heading. They are the
   same accordion as the FAQ page, so the styling is shared from here rather
   than copied into each page.

   <details>/<summary>: no JavaScript, and the answers are in the HTML whether
   an item is open or shut, so a crawler reads all of them. An accordion built
   from JS and hidden divs is the version that costs you the content. */
body.pub-modern .qa-block {
    margin-top: 34px;
    padding-top: 26px;
    border-top: 1px solid var(--pp-line-soft);
}
body.pub-modern .qa-title {
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--pp-muted);
}
body.pub-modern .faq-item { border-bottom: 1px solid var(--pp-line); }
body.pub-modern .faq-item summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 2px;
    cursor: pointer;
    list-style: none;
    font-family: 'Source Sans Pro', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 600;
    text-align: left;
    color: var(--pp-text);
}
body.pub-modern .faq-item summary::-webkit-details-marker { display: none; }
body.pub-modern .faq-item summary:hover { color: var(--pp-green-dark); }
body.pub-modern .faq-item summary:after {
    content: "";
    flex: 0 0 auto;
    width: 0;
    height: 0;
    margin-top: 7px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid var(--pp-green);
    transition: transform .15s ease;
}
body.pub-modern .faq-item[open] summary:after { transform: rotate(180deg); }
body.pub-modern .faq-answer {
    padding: 0 2px 18px;
    text-align: left;
    font-size: 15px;
    line-height: 1.65;
    color: #555;
}
body.pub-modern .faq-answer p { margin: 0 0 12px; }
body.pub-modern .faq-answer p:last-child { margin-bottom: 0; }
body.pub-modern .faq-answer ul { margin: 0 0 12px 18px; }
body.pub-modern .faq-answer li { padding-bottom: 4px; }
@media (max-width: 767px) {
    body.pub-modern .faq-item summary { font-size: 15px; }
    body.pub-modern .faq-answer { font-size: 14.5px; }
}
body.pub-modern .qa-block h3 {
    margin: 22px 0 6px;
    text-align: left;
    color: var(--pp-text);
    font-size: 18px;
    line-height: 1.35;
    font-weight: 700;
    font-family: 'Source Sans Pro', Arial, sans-serif;
    text-indent: 0;
    height: auto;
    float: none;
    border: none;
}
body.pub-modern .qa-block p { margin: 0 0 10px; }

@media (max-width: 979px) {
    body.pub-modern #page-header-new h1 { font-size: 34px; line-height: 38px; }
    body.pub-modern #page-header-new h2 { font-size: 19px; line-height: 23px; }
    body.pub-modern .headline2 h2 { font-size: 26px; line-height: 28px; }
    body.pub-modern .qa-block h3 { font-size: 17px; }
}
@media (max-width: 767px) {
    body.pub-modern #page-header-new h1 { font-size: 28px; line-height: 32px; }
    body.pub-modern .headline2 h2 { font-size: 20px; line-height: 24px; }
}

/* ==========================================================================
   5. Login (8/16/2026)
   One card, centred. It used to be a 400px background image (loginbg_tall.png)
   with the form laid out in nested tables inside it, which meant the frame was
   a picture rather than a box and could not follow the field widths.
   ========================================================================== */

body.pub-modern #login-form {
    display: flex;
    justify-content: center;
    padding: 40px 16px 60px;
}
body.pub-modern .pp-login-card {
    width: 100%;
    max-width: 420px;
    padding: 30px 30px 26px;
    background: var(--pp-surface);
    border: 1px solid var(--pp-line);
    border-radius: var(--pp-radius);
    box-shadow: 0 8px 24px rgba(16,24,40,.08), 0 2px 6px rgba(16,24,40,.04);
    box-sizing: border-box;
}
body.pub-modern .pp-login-head {
    text-align: center;
    margin-bottom: 24px;
}
body.pub-modern .pp-login-avatar {
    display: block;
    width: 56px;
    height: auto;
    margin: 0 auto 14px;
    opacity: .8;
}
body.pub-modern .pp-login-card h1 {
    margin: 0 0 6px;
    padding: 0;
    height: auto;
    float: none;
    border: none;
    text-indent: 0;
    font-family: var(--pp-navfont);
    font-size: 22px;
    line-height: 1.25;
    font-weight: 700;
    color: var(--pp-text);
}
body.pub-modern .pp-login-sub {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--pp-muted);
}
body.pub-modern .pp-login-field { margin-bottom: 16px; }
body.pub-modern .pp-login-field label {
    display: block;
    margin-bottom: 6px;
    font-family: var(--pp-navfont);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--pp-muted);
}
body.pub-modern .pp-login-field input {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 12px;
    border: 1px solid var(--pp-line);
    border-radius: var(--pp-radius-sm);
    background: var(--pp-surface);
    font-size: 15px;
    color: var(--pp-text);
}
body.pub-modern .pp-login-field input:focus {
    border-color: var(--pp-green);
    outline: none;
    box-shadow: 0 0 0 3px rgba(54,180,75,.12);
}
/* the reCAPTCHA widget is a fixed 304px wide; centre it and let it shrink out
   of the card's padding rather than overflow it on a narrow phone */
body.pub-modern #captcha {
    display: flex;
    justify-content: center;
    margin: 4px 0 18px;
    max-width: 100%;
    overflow: hidden;
}
body.pub-modern #signInSubmit,
body.pub-modern #signInSubmit:link {
    display: block;
    width: 100%;
    padding: 12px 16px !important;
    border: none !important;
    border-radius: var(--pp-radius-sm) !important;
    background-color: var(--pp-green) !important;
    color: #fff !important;
    font-family: var(--pp-navfont);
    font-size: 15px;
    font-weight: 600;
    text-shadow: none;
    cursor: pointer;
}
body.pub-modern #signInSubmit:hover {
    background-color: var(--pp-green-dark) !important;
    color: #fff !important;
}
body.pub-modern .pp-login-foot {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--pp-line-soft);
    text-align: center;
    font-size: 13px;
    color: var(--pp-muted);
}
body.pub-modern .pp-login-foot a { color: var(--pp-green-dark); font-weight: 600; }

@media (max-width: 480px) {
    body.pub-modern #login-form { padding: 24px 12px 40px; }
    body.pub-modern .pp-login-card { padding: 24px 20px 20px; }
}

/* ==========================================================================
   6. Mobile
   scripts.js clones #menu into #mobile-menu below 979px, so the sub-menus and
   their arrows come along; these are the colours for that clone.
   ========================================================================== */

body.pub-modern #mobile-menu-trigger {
    color: var(--pp-text);
    font-size: 30px;
}
body.pub-modern #mobile-menu li { background-color: var(--pp-surface); }
body.pub-modern #mobile-menu li a {
    padding: 14px 16px;
    border-top: 1px solid var(--pp-line-soft);
    color: var(--pp-text);
    font-family: var(--pp-navfont);
    font-size: 15px;
    font-weight: 600;
}
body.pub-modern #mobile-menu ul a {
    padding-left: 32px;
    font-weight: 500;
    font-size: 14px;
    color: var(--pp-muted);
}
body.pub-modern #mobile-menu li:hover,
body.pub-modern #mobile-menu li a:hover {
    background-color: var(--pp-hover);
    color: var(--pp-text);
}
body.pub-modern #mobile-menu li.is-disabled a,
body.pub-modern #mobile-menu li.is-disabled a:hover {
    color: var(--pp-faint);
    background: transparent;
    cursor: not-allowed;
}
body.pub-modern #mobile-menu .mobile-menu-submenu-arrow {
    width: 56px;
    border-left: 1px solid var(--pp-line-soft);
    color: var(--pp-muted);
    line-height: 48px;
}
body.pub-modern #mobile-menu .mobile-menu-submenu-arrow:hover {
    background-color: var(--pp-hover);
    color: var(--pp-text);
}

@media (max-width: 979px) {
    /* the desktop menu is replaced by the #mobile-menu clone, so the right-hand
       column carries only the trigger and the two buttons */
    body.pub-modern #header > .row {
        flex-wrap: wrap;
        align-items: flex-start;
    }
    body.pub-modern #header > .row > .span6:last-child {
        align-items: center;
        gap: 12px;
    }
    body.pub-modern #signup_login { padding: 0; }
    body.pub-modern #signup_login .row { align-items: flex-end; }
    body.pub-modern #tagline { display: none; }
}

/* ---------------------------------------------------------------------------
   Home page banner - navigation off  (8/17/2026)

   The banner is a single, non-cycling slide now, so the Revolution Slider's
   next/prev arrows and the bullet row along the bottom point at nothing. They
   are switched off at the source in js/plugins.js (navigationType and
   navigationArrows are both "none" for .fullwidthbanner). These rules are the
   belt to that pair of braces: the plugin builds its nav markup from its own
   templates and some builds emit the containers regardless of the option, so
   anything that does get injected is hidden here rather than left to sit over
   the photo.

   Scoped to .fullwidthbanner-container on purpose. .fullwidthbanner2 is a
   separate slider with its own settings and its navigation is untouched.
   --------------------------------------------------------------------------- */
body.pub-modern .fullwidthbanner-container .tp-bullets,
body.pub-modern .fullwidthbanner-container .tparrows,
body.pub-modern .fullwidthbanner-container .tp-leftarrow,
body.pub-modern .fullwidthbanner-container .tp-rightarrow {
    display: none !important;
}

/* ---------------------------------------------------------------------------
   Home page banner - fade up out of black  (8/17/2026)

   The container carries the black. The slider sizes it as soon as the DOM is
   ready, so the band is there and filled long before the photo arrives.

   The photo starts at opacity 0 and is transitioned to 1 when slide_inc.asp
   adds .is-in, which it does on window "load" - i.e. once the image has
   finished downloading. registration-wide.png is 2.3 MB, so without that wait
   a visitor would watch a half-drawn picture ease in.

   .js-fade is the safety net, and it is why the hiding rule is keyed on it
   rather than on .pp-fade alone: the script adds .js-fade itself, inline and
   immediately after the markup. So the photo is only ever hidden by a script
   that is definitely running and will definitely un-hide it. If the script
   never runs - JS off, an error above it, a blocked inline script - .js-fade
   is never added, nothing sets opacity 0, and the banner simply appears with
   no fade. It cannot get stuck invisible.
   --------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
   Home page hero  (8/17/2026)

   A plain block, not the Revolution Slider - see the note at the top of
   includes/slide_inc.asp for why the plugin had to go. The rules below are the
   whole thing: a fixed-height black box, a photo cropped to fill it, and a
   fade.

   THE HEIGHT IS HERE AND ONLY HERE. It is reserved before the photo loads, so
   nothing moves when it arrives - that reservation is what stopped the banner
   jumping up under the header.

   The photo is 1916x821. At full window width it has to lose roughly 175px of
   height to fill a 640px band, and object-position decides from where:
   "center" splits the loss between top and bottom. "top" would take it all off
   the bottom; "bottom" would take it all off the top, which is the sliced
   heads that were visible earlier.
   --------------------------------------------------------------------------- */
body.pub-modern .pp-hero {
    position: relative;
    height: 640px;
    overflow: hidden;
    background-color: #000;          /* what shows through while it fades */
    border-bottom: 5px solid var(--pp-green);
}
body.pub-modern .pp-hero-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}
/* .js-fade is added by the script in slide_inc.asp, so the photo can only be
   hidden by something that is definitely running and will definitely show it
   again. No script, no .js-fade, no fade - and the hero simply appears. */
body.pub-modern .pp-hero.js-fade .pp-hero-img {
    opacity: 0;
    transition: opacity 900ms ease-in;
}
body.pub-modern .pp-hero.js-fade.is-in .pp-hero-img {
    opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
    /* selector matched to the rules above on purpose - one class fewer and it
       would lose the cascade to them and do nothing */
    body.pub-modern .pp-hero.js-fade .pp-hero-img,
    body.pub-modern .pp-hero.js-fade.is-in .pp-hero-img {
        opacity: 1;
        transition: none;
    }
}
/* A 640px band is right on a wide monitor and overbearing on a small laptop,
   so it steps down. Below 767px .hidden-phone takes the hero out entirely and
   header_inc.asp shows a static image instead. */
@media (max-width: 1400px) {
    body.pub-modern .pp-hero { height: 540px; }
}
@media (max-width: 1100px) {
    body.pub-modern .pp-hero { height: 440px; }
}

/* ---------- the jump, and the cut-off top (superseded) ----------
   Kept because the rules still apply to any .fullwidthbanner-container that
   carries .pp-fade, and because the caps they answer are the reason the hero
   above is not a slider any more.
   ----------
   The banner grew while it loaded, then snapped up under the header with the
   top of the photo sliced off. Read in the browser, it was one cause with
   three parts:

     · js/revolutionslider/css/custom.min.css carries
           .fullwidthbanner-container { max-height: 485px !important }
       485 was the OLD startheight. Raising startheight in js/plugins.js moved
       the slider to 640 and left the container pinned at 485, so the slider was
       drawing 640px of photo into a 485px hole. That mismatch IS the jump: on
       init the banner takes its new height, the container refuses it, and
       everything settles 155px higher than it was drawn.
     · An `aspect-ratio` was tried here first and could never have worked - a
       computed height loses to a max-height with !important on it. It has to be
       answered on its own terms.
     · Nothing reserved the space beforehand either. Until the slider takes the
       <img> over it is an ordinary image at its natural 1916x821, and
       layout.css hides .fullwidthbanner with `visibility:hidden`, which hides
       it WITHOUT taking it out of the flow - so 821px sat there, invisible,
       until init replaced it with the real height.

   A plain height on the container fixes all three: it reserves the right box
   from the first paint, it matches what the slider will draw, and it overrides
   the cap. The slider does not scale this banner (fullWidth and forceFullWidth
   are both "off"), so startheight is a constant, not a ratio - which is why a
   fixed height is right here and aspect-ratio was not.

   THREE NUMBERS, ONE VALUE. Change the banner height and change all of them:
   startheight in js/plugins.js, and both 640s below. */
body.pub-modern .fullwidthbanner-container.pp-fade {
    background-color: #000;
    height: 640px;
    /* the 485px cap in custom.min.css is !important, so this has to be too */
    max-height: none !important;
    /* the slider writes overflow:visible onto the element's style attribute
       for captions to hang out of; this banner has no captions, and inline
       style is only beaten by !important */
    overflow: hidden !important;
}
body.pub-modern .fullwidthbanner-container.pp-fade .fullwidthbanner {
    height: 640px !important;
}
body.pub-modern .fullwidthbanner-container.pp-fade.js-fade .fullwidthbanner {
    opacity: 0;
    transition: opacity 900ms ease-in;
}
body.pub-modern .fullwidthbanner-container.pp-fade.js-fade.is-in .fullwidthbanner {
    opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
    /* Someone who has asked for less motion gets the photo, not the fade.
       Selector matched to the .js-fade rules above on purpose - written with
       one fewer class it would lose the cascade to them and do nothing. */
    body.pub-modern .fullwidthbanner-container.pp-fade.js-fade .fullwidthbanner,
    body.pub-modern .fullwidthbanner-container.pp-fade.js-fade.is-in .fullwidthbanner {
        opacity: 1;
        transition: none;
    }
}