/* ==========================================================================
   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; }
}