/* Master Security — public site. Dark command aesthetic, distinct from the
   siblings' white marketing pages.

   Section rhythm on the home page, so it never reads as one card grid repeated:
     hero (navy, gradient + grid texture)
     proof strip (navy 900, hairline dividers, numbers)
     capabilities (white, alternating wide rows with product mock-ups)
     short feature list (hairline rows, two up)
     how it works (navy, connected rail)
     South African conditions (green-tinted panel on white)
     pricing (light grey, Premier as a dark card)
     closing call to action (navy, full bleed)
*/

body.pub { background: #fff; }

:root { --pub-w: 1240px; }

/* nav */
/* The standard Master Suite top bar: white, the full logo lockup on the left, the
   install pill and the sign-in pill on the right. The hero below is navy, so the
   white bar reads as a lid on it rather than a break. */
.pub-nav {
    position: sticky; top: 0; z-index: 100;
    background: #fff; border-bottom: 1px solid transparent;
    transition: box-shadow .2s, border-color .2s;
}
.pub-nav.scrolled { box-shadow: 0 4px 18px rgba(12,35,64,.12); border-bottom-color: var(--ms-line); }
.pub-nav-inner {
    max-width: var(--pub-w); margin: 0 auto;
    display: flex; align-items: center; gap: 24px;
    padding: 10px 20px; min-height: 70px;
}
.pub-brand { display: flex; align-items: center; text-decoration: none; }
.pub-brand img { height: 44px; width: auto; display: block; }
.nav-links { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.nav-links a {
    color: var(--ms-navy-800);
    font-weight: 700; font-size: 14.5px;
    padding: 10px 13px; border-radius: 10px;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.nav-links a:hover { background: var(--ms-navy-50); text-decoration: none; }
.nav-links a.active { color: var(--ms-green-700); }
.nav-links a.nav-cta {
    background: var(--ms-navy-900); color: #fff;
    padding: 10px 20px; border-radius: 999px; margin-left: 6px;
}
.nav-links a.nav-cta:hover { background: var(--ms-navy-700); }

/* Install pill. pwa.js adds .available only once the browser actually offers an
   install, so it is never a button that does nothing.
   It is a green action, so it carries the same glaze as .btn-green in theme.css:
   the identical face gradient, the identical inset highlight and shadow line, and
   the same band of light crossing once on hover. The gradient stops are the ones
   from theme.css unchanged, so on a 40px pill the label sits over green-700 or
   darker and keeps its contrast against white. */
#pwa-install-btn {
    position: relative;
    overflow: hidden;
    display: none; align-items: center; gap: 7px;
    background-color: var(--ms-green-700); color: #fff;
    background-image: linear-gradient(180deg,
        var(--ms-green-600) 0%,
        var(--ms-green-700) 32%,
        var(--ms-green-800) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.18);
    border: 0; border-radius: 999px;
    padding: 9px 16px; min-height: 40px;
    font-family: var(--ms-font); font-weight: 700; font-size: 13.5px;
    cursor: pointer; white-space: nowrap;
}
#pwa-install-btn:hover {
    background-color: var(--ms-green-800);
    background-image: linear-gradient(180deg,
        var(--ms-green-700) 0%,
        var(--ms-green-800) 32%,
        var(--ms-green-900) 100%);
}
#pwa-install-btn.available { display: inline-flex; }
/* The sweep, sized for a pill: parked off the left edge, no transition at rest so
   it returns instantly instead of crossing the face a second time on the way out. */
#pwa-install-btn::after {
    content: "";
    position: absolute;
    top: -1px; bottom: -1px;
    left: -55%;
    width: 40%;
    background: linear-gradient(90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.14) 50%,
        rgba(255,255,255,0) 100%);
    transform: translateX(0) skewX(-18deg);
    transition: transform 0s;
    pointer-events: none;
}
#pwa-install-btn:hover::after,
#pwa-install-btn:focus-visible::after {
    transform: translateX(430%) skewX(-18deg);
    transition: transform .62s cubic-bezier(.3,.72,.32,1);
}

.nav-burger {
    display: none; margin-left: auto;
    background: none; border: 0; color: var(--ms-navy-900);
    cursor: pointer; padding: 10px; border-radius: 10px;
    min-width: 44px; min-height: 44px;
    align-items: center; justify-content: center;
}
.nav-burger:hover { background: var(--ms-navy-50); }
@media (max-width: 900px) {
    .nav-burger { display: flex; }
    .nav-links {
        display: none;
        position: absolute; top: 100%; left: 0; right: 0;
        background: #fff;
        flex-direction: column; align-items: stretch;
        padding: 12px 18px 18px; gap: 4px;
        border-bottom: 1px solid var(--ms-line);
        box-shadow: 0 18px 34px rgba(12,35,64,.16);
    }
    .nav-links.open { display: flex; }
    .nav-links a { padding: 13px 14px; font-size: 15.5px; }
    .nav-links a.nav-cta { margin-left: 0; text-align: center; }
    #pwa-install-btn.available { display: flex; justify-content: center; }
}
.pub-flash { max-width: var(--pub-w); margin: 14px auto 0; }

/* buttons used on dark bands */
.btn-big { padding: 13px 24px; min-height: 50px; font-size: 15.5px; }
.btn-on-dark {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.4);
    color: #fff;
}
.btn-on-dark:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.65); }

/* faint blueprint texture used on the navy bands */
.hero-grid-tex {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 10%, transparent 72%);
    mask-image: radial-gradient(120% 90% at 50% 0%, #000 10%, transparent 72%);
    pointer-events: none;
}

/* ------------------------------------------------------------------- hero */
.pub-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(1100px 560px at 88% -20%, rgba(35,132,46,.22), transparent 60%),
        radial-gradient(900px 500px at -15% 115%, rgba(29,79,136,.3), transparent 55%),
        var(--ms-navy-950);
    color: #fff;
    padding: 80px 20px 92px;
}
.pub-hero-inner {
    position: relative; z-index: 1;
    max-width: var(--pub-w); margin: 0 auto;
    display: grid; grid-template-columns: 1.02fr .98fr; gap: 54px; align-items: center;
}
.pub-hero h1 { color: #fff; font-size: 44px; line-height: 1.12; margin-bottom: 18px; letter-spacing: -.015em; }
.pub-hero h1 span { color: var(--ms-green-400); }
.pub-hero .hero-sub { color: rgba(255,255,255,.75); font-size: 17px; margin-bottom: 28px; max-width: 540px; }
.hero-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    border: 1px solid rgba(74,182,83,.4);
    background: rgba(35,132,46,.15);
    color: var(--ms-green-400);
    border-radius: 999px;
    font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
    padding: 6px 14px; margin-bottom: 18px;
}
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-points { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 28px; color: rgba(255,255,255,.7); font-size: 13.5px; font-weight: 600; }
.hero-points span { display: flex; gap: 7px; align-items: center; }
.hero-points .ic-sm { color: var(--ms-green-400); }

/* ------------------------------------------------- app mock-up primitives */
.mock {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 26px 60px rgba(4,13,26,.45);
}
.mock-bar {
    display: flex; align-items: center; gap: 10px;
    background: var(--ms-navy-900);
    border-bottom: 1px solid rgba(255,255,255,.12);
    padding: 11px 14px;
}
.mock-mark {
    width: 26px; height: 26px; border-radius: 7px; flex: 0 0 auto;
    background: var(--ms-green-600); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800; letter-spacing: .04em;
}
.mock-bar-title { color: #fff; font-weight: 800; font-size: 13.5px; letter-spacing: .06em; text-transform: uppercase; }
.mock-bar-icons { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; color: rgba(255,255,255,.55); font-size: 12px; font-weight: 700; }
.mock-body { padding: 16px; }

.mock-cmd { backdrop-filter: blur(4px); }
.hc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; color: rgba(255,255,255,.75); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hc-head .live-dot { background: var(--ms-green-400); }
.hc-head .hc-date { margin-left: auto; color: rgba(255,255,255,.45); letter-spacing: .04em; }
.hc-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-bottom: 12px; }
.hc-tile { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09); border-radius: 11px; padding: 11px 10px; }
.hc-tile .n { font-size: 22px; font-weight: 800; color: #fff; line-height: 1.1; }
.hc-tile .l { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-top: 2px; }
.hc-tile.green .n { color: var(--ms-green-400); }
.hc-tile.red .n { color: #ff9d9d; }
.hc-tile.amber .n { color: #f6c26b; }
.hc-rows { display: flex; flex-direction: column; gap: 8px; }
.hc-row { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.05); border-radius: 9px; padding: 9px 12px; font-size: 13px; color: rgba(255,255,255,.85); font-weight: 600; }
.hc-row .ic-sm { color: var(--ms-green-400); flex: 0 0 auto; }
.hc-row .hc-time { margin-left: auto; color: rgba(255,255,255,.5); font-variant-numeric: tabular-nums; font-size: 12px; }

.hero-stage { position: relative; padding-bottom: 30px; }
.hero-float {
    /* Anchored to the console's bottom edge by its top, not its height, so a longer
       line can never creep up and cover an event row. */
    position: absolute; left: -30px; top: 100%; margin-top: -40px;
    display: flex; align-items: flex-start; gap: 11px;
    background: #fff;
    border: 1px solid var(--ms-line);
    border-left: 3px solid var(--msec-amber);
    border-radius: 12px;
    padding: 12px 15px;
    max-width: 290px;
    box-shadow: 0 18px 40px rgba(4,13,26,.35);
}
.hero-float .hf-ic { color: var(--msec-amber); display: flex; padding-top: 1px; }
.hero-float strong { display: block; color: var(--ms-navy-900); font-size: 13.5px; }
.hero-float span { display: block; color: var(--ms-muted); font-size: 12.5px; line-height: 1.4; }

/* ----------------------------------------------------------- proof strip */
.proof-strip {
    background: var(--ms-navy-900);
    border-top: 1px solid rgba(255,255,255,.1);
    padding: 30px 20px;
}
.proof-inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
    gap: 0;
}
.proof { padding: 6px 24px; border-left: 1px solid rgba(255,255,255,.12); }
.proof:first-child { border-left: 0; padding-left: 0; }
.proof-n {
    display: block;
    font-size: 34px; font-weight: 800; line-height: 1.05;
    color: var(--ms-green-400);
    font-variant-numeric: tabular-nums;
}
.proof-n.word { font-size: 21px; letter-spacing: .02em; padding-top: 8px; }
.proof-l { display: block; color: rgba(255,255,255,.66); font-size: 13px; margin-top: 6px; max-width: 24ch; }

/* --------------------------------------------------------------- sections */
.pub-section { padding: 78px 20px; }
.pub-section.alt { background: var(--ms-bg); }
.pub-inner { max-width: var(--pub-w); margin: 0 auto; }
.sec-eyebrow { color: var(--ms-green-700); font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; }
.pub-section h2 { font-size: 32px; margin-bottom: 10px; letter-spacing: -.01em; }
.sec-sub { color: var(--ms-muted); max-width: 640px; margin-bottom: 34px; font-size: 16px; }
.sec-head { max-width: 680px; margin-bottom: 46px; }
.sec-head .sec-sub { margin-bottom: 0; }
.sec-head.light h2 { color: #fff; }
.sec-head.light .sec-eyebrow { color: var(--ms-green-400); }
.sec-head.light .sec-sub { color: rgba(255,255,255,.68); }

/* ------------------------------------------------- hero capabilities rows */
.caps { display: flex; flex-direction: column; gap: 26px; }
.cap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 52px;
    align-items: center;
    padding: 18px 0;
}
.cap.tinted {
    background: linear-gradient(140deg, var(--ms-navy-50), var(--ms-bg));
    border: 1px solid var(--ms-line);
    border-radius: 22px;
    padding: 40px;
}
.cap.tinted .cap-visual { order: -1; }
.cap-num {
    font-size: 13px; font-weight: 800; letter-spacing: .12em;
    color: var(--ms-green-600);
    margin-bottom: 10px;
}
.cap-copy h3 {
    display: flex; align-items: center; gap: 12px;
    font-size: 25px; line-height: 1.2; margin-bottom: 12px;
    letter-spacing: -.01em;
}
.cap-ic {
    width: 42px; height: 42px; flex: 0 0 auto;
    border-radius: 11px;
    background: var(--ms-green-50);
    border: 1px solid var(--ms-green-100);
    color: var(--ms-green-700);
    display: inline-flex; align-items: center; justify-content: center;
}
.cap-copy p { color: var(--ms-muted); font-size: 15.5px; max-width: 46ch; }
.cap-note { font-size: 14.5px; border-left: 3px solid var(--ms-green-100); padding-left: 14px; }
.cap-facts { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cap-facts li {
    background: #fff;
    border: 1px solid var(--ms-line);
    border-radius: 999px;
    padding: 6px 13px 6px 26px;
    font-size: 13px; font-weight: 600; color: var(--ms-navy-900);
    position: relative;
}
.cap-facts li::before {
    content: ""; position: absolute; left: 11px; top: 50%;
    width: 6px; height: 6px; margin-top: -3px;
    border-radius: 50%; background: var(--ms-green-500);
}
.method-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.method {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--ms-navy-50);
    border: 1px solid var(--ms-navy-100);
    border-radius: 10px;
    padding: 8px 13px;
    font-size: 13.5px; color: var(--ms-navy-800);
}
.method .ic-sm { color: var(--ms-green-600); }
.method b { color: var(--ms-navy-900); }

.cap-visual { display: flex; justify-content: center; min-width: 0; }

/* credential watch mock */
.mock-panel {
    width: 100%; max-width: 420px;
    background: #fff;
    border: 1px solid var(--ms-line);
    box-shadow: 0 18px 44px rgba(12,35,64,.13);
}
.mock-panel-head {
    display: flex; align-items: center; gap: 9px;
    background: var(--ms-navy-950); color: #fff;
    padding: 12px 16px;
    font-size: 12.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
}
.mock-panel-head .ic-sm { color: #f6c26b; }
.mock-panel-body { padding: 6px 16px 16px; }
.cred-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--ms-line);
}
.cred-name { font-size: 14px; font-weight: 700; color: var(--ms-navy-900); }
.cred-name em { display: block; font-style: normal; font-weight: 500; font-size: 12.5px; color: var(--ms-muted); }
.cred-block {
    display: flex; align-items: center; gap: 9px;
    margin-top: 14px;
    background: var(--msec-red-bg);
    color: var(--ms-danger);
    border-radius: 9px;
    padding: 10px 13px;
    font-size: 13px; font-weight: 700;
}
.cred-ladder {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    margin-top: 14px;
}
.cred-ladder .micro { width: 100%; margin-bottom: 2px; }
.cred-ladder b {
    min-width: 34px; text-align: center;
    background: var(--ms-navy-50); color: var(--ms-navy-700);
    border: 1px solid var(--ms-navy-100);
    border-radius: 7px;
    padding: 4px 0;
    font-size: 13px; font-variant-numeric: tabular-nums;
}
.cred-ladder b.hot { background: var(--msec-amber-bg); color: var(--msec-amber); border-color: #f3ddb0; }

/* guard phone mock */
.phone {
    width: 288px; max-width: 100%;
    background: var(--ms-navy-950);
    border: 1px solid var(--ms-navy-700);
    border-radius: 34px;
    padding: 10px;
    box-shadow: 0 24px 54px rgba(12,35,64,.28);
}
.phone-screen { background: #fff; border-radius: 26px; overflow: hidden; padding: 10px; }
.ph-bar { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 800; color: var(--ms-muted); padding: 2px 8px 8px; }
.ph-bar-r { color: var(--ms-green-600); display: inline-flex; }
.ph-hero {
    background: linear-gradient(160deg, var(--ms-navy-950), var(--ms-navy-800));
    color: #fff; border-radius: 14px; padding: 14px;
}
.ph-hero .micro { color: rgba(255,255,255,.55); }
.ph-site { font-size: 18px; font-weight: 800; margin: 4px 0 1px; }
.ph-post { font-size: 13px; color: rgba(255,255,255,.8); }
.ph-time { color: var(--ms-green-400); font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; margin-top: 2px; }
.ph-chips { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.ph-chips .chip { font-size: 11.5px; padding: 3px 8px; }
.ph-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.ph-act {
    display: flex; align-items: center; gap: 7px;
    border: 1px solid var(--ms-line); border-radius: 11px;
    padding: 11px 10px;
    font-size: 12px; font-weight: 700; color: var(--ms-navy-900);
    min-height: 46px;
}
.ph-act .ic-sm { color: var(--ms-green-600); flex: 0 0 auto; }
.ph-panic {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--ms-danger); color: #fff;
    border-radius: 11px; margin-top: 8px; padding: 12px;
    font-weight: 800; font-size: 13px; letter-spacing: .06em;
}
.ph-hint { display: flex; align-items: center; gap: 7px; color: var(--ms-muted); font-size: 11.5px; padding: 9px 4px 3px; }
.ph-hint .ic-sm { color: var(--ms-green-600); }

/* printable patrol checkpoint label mock */
.cp-mock {
    width: 260px; max-width: 100%;
    background: #fff;
    border: 1px solid var(--ms-line);
    border-radius: 14px;
    padding: 20px 18px 16px;
    text-align: center;
    transform: rotate(-1.6deg);
    box-shadow: 0 20px 48px rgba(12,35,64,.16);
}
.cp-mock-name { font-size: 18px; font-weight: 800; color: var(--ms-navy-900); }
.cp-mock-where { font-size: 13px; color: var(--ms-muted); margin-bottom: 12px; }
.cp-mock-qr svg { display: block; width: 156px; height: auto; margin: 0 auto; }
.cp-mock-code {
    font-size: 25px; font-weight: 800; letter-spacing: .22em;
    color: var(--ms-navy-900);
    margin: 10px 0 4px; padding-left: .22em;
}
.cp-mock-howto { font-size: 12.5px; color: var(--ms-muted); margin: 0 0 12px; }
.cp-mock-foot { border-top: 1px solid var(--ms-line); padding-top: 9px; }

/* client portal mock */
.mock-portal {
    width: 100%; max-width: 430px;
    background: #fff;
    border: 1px solid var(--ms-line);
    box-shadow: 0 18px 44px rgba(12,35,64,.13);
}
.mock-bar.light { background: var(--ms-navy-950); }
.pt-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.pt-tile { background: var(--ms-bg); border: 1px solid var(--ms-line); border-radius: 11px; padding: 11px 12px; }
.pt-n { display: block; font-size: 24px; font-weight: 800; color: var(--ms-navy-900); line-height: 1.15; }
.pt-n.ok { color: var(--ms-green-700); }
.pt-list { margin-top: 10px; display: flex; flex-direction: column; gap: 7px; }
.pt-item {
    display: flex; align-items: center; gap: 9px;
    border: 1px solid var(--ms-line); border-radius: 10px;
    padding: 9px 11px;
    font-size: 12.5px; font-weight: 600; color: var(--ms-navy-900);
}
.pt-item .ic-sm { color: var(--ms-green-600); flex: 0 0 auto; }
.pt-item .chip { margin-left: auto; font-size: 11px; padding: 3px 8px; flex: 0 0 auto; }

/* ------------------------------------------------- short feature list */
.more-feats {
    margin-top: 58px;
    border-top: 1px solid var(--ms-line);
    padding-top: 34px;
}
.more-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }
.more-head h3 { font-size: 19px; margin: 0; }
.more-head p { color: var(--ms-muted); font-size: 14.5px; margin: 0; }
.feat-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 44px; }
.feat-list li {
    display: flex; gap: 14px;
    padding: 20px 0;
    border-bottom: 1px solid var(--ms-line);
}
.feat-list .ic { color: var(--ms-green-600); flex: 0 0 auto; margin-top: 2px; }
.feat-list h4 { font-size: 16px; margin: 0 0 4px; color: var(--ms-navy-900); }
.feat-list p { color: var(--ms-muted); font-size: 14px; margin: 0; }

/* ------------------------------------------------------------ how it works */
.how-section {
    background:
        radial-gradient(900px 480px at 12% -30%, rgba(35,132,46,.2), transparent 60%),
        var(--ms-navy-950);
    color: #fff;
}
.how-rail {
    list-style: none; padding: 0; margin: 0;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px;
    counter-reset: how;
    position: relative;
}
.how-rail::before {
    content: "";
    position: absolute; top: 23px; left: 24px; right: 24px;
    height: 2px;
    background: linear-gradient(90deg, rgba(74,182,83,.55), rgba(74,182,83,.18));
}
.how-node { position: relative; }
.how-dot {
    position: relative; z-index: 1;
    width: 48px; height: 48px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--ms-navy-900);
    border: 2px solid var(--ms-green-500);
    color: var(--ms-green-400);
    margin-bottom: 16px;
}
.how-node h3 { color: #fff; font-size: 17px; margin-bottom: 6px; }
.how-node h3::before {
    counter-increment: how;
    content: "Step " counter(how, decimal-leading-zero);
    display: block;
    font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ms-green-400);
    margin-bottom: 5px;
}
.how-node p { color: rgba(255,255,255,.7); font-size: 14px; margin: 0; }

/* ------------------------------------------- built for South African conditions */
.sa-section { padding-top: 74px; padding-bottom: 74px; }
.sa-band {
    background:
        radial-gradient(700px 340px at 100% 0%, rgba(35,132,46,.1), transparent 62%),
        var(--ms-green-50);
    border: 1px solid var(--ms-green-100);
    border-radius: 24px;
    padding: 44px;
}
.sa-head { max-width: 660px; margin-bottom: 32px; }
.sa-head h2 { margin: 0; font-size: 28px; }
.sa-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.sa-item {
    background: #fff;
    border: 1px solid var(--ms-line);
    border-radius: 14px;
    padding: 20px;
}
.sa-item .ic { color: var(--ms-green-600); margin-bottom: 10px; }
.sa-item h4 { font-size: 15.5px; margin: 0 0 6px; color: var(--ms-navy-900); }
.sa-item p { color: var(--ms-muted); font-size: 13.5px; margin: 0; }

/* ------------------------------------------------------------------ pricing */
.pricing-section { background: var(--ms-bg); }
/* Premier is deliberately the loudest card: wider column, dark surface, a ribbon,
   and it stands a little proud of the other two top and bottom. */
.price-grid { display: grid; grid-template-columns: 1fr 1.08fr 1fr; gap: 20px; align-items: stretch; }
.price-card {
    background: #fff;
    border: 1px solid var(--ms-line);
    border-radius: 16px;
    padding: 28px 24px;
    display: flex; flex-direction: column;
}
.price-card.hot {
    position: relative;
    margin-block: -18px;
    background: linear-gradient(165deg, var(--ms-navy-950), var(--ms-navy-800));
    border: 1px solid var(--ms-navy-700);
    padding: 40px 28px 34px;
    box-shadow: 0 26px 60px rgba(8,27,51,.28);
}
.price-card.hot::before {
    content: "Most popular";
    position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
    background: var(--ms-green-500); color: #fff;
    font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
    border-radius: 999px; padding: 5px 15px;
    white-space: nowrap;
}
.price-card h3 { font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--ms-green-700); }
.price-card .price { font-size: 36px; font-weight: 800; color: var(--ms-navy-900); margin: 6px 0 0; letter-spacing: -.02em; }
.price-card .price small { font-size: 14px; font-weight: 600; color: var(--ms-muted); }
.price-card .annual-line { color: var(--ms-muted); font-size: 13px; margin-bottom: 18px; }
.price-card.hot h3 { color: var(--ms-green-400); }
.price-card.hot .price { color: #fff; }
.price-card.hot .price small,
.price-card.hot .annual-line { color: rgba(255,255,255,.65); }

.pc-lim { margin-bottom: 7px; }
.price-card.hot .pc-lim { color: rgba(255,255,255,.5); }
.pc-specs {
    display: grid; grid-template-columns: repeat(3, 1fr);
    background: var(--ms-bg);
    border: 1px solid var(--ms-line);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 18px;
}
.pc-spec { padding: 12px 8px; text-align: center; border-left: 1px solid var(--ms-line); }
.pc-spec:first-child { border-left: 0; }
.pc-spec-n { display: block; font-size: 23px; font-weight: 800; color: var(--ms-navy-900); line-height: 1.15; font-variant-numeric: tabular-nums; }
.pc-spec-n.word { font-size: 15px; padding: 4px 0; }
.pc-spec .micro { display: block; margin-top: 2px; }
.price-card.hot .pc-specs { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
.price-card.hot .pc-spec { border-left-color: rgba(255,255,255,.14); }
.price-card.hot .pc-spec-n { color: #fff; }
.price-card.hot .pc-spec .micro { color: rgba(255,255,255,.55); }

.price-card ul { list-style: none; padding: 0; margin: 0 0 22px; flex: 1; }
.price-card ul li { padding: 7px 0 7px 26px; position: relative; font-size: 14.5px; }
.price-card ul li::before {
    content: ""; position: absolute; left: 0; top: 11px;
    width: 14px; height: 14px;
    background: var(--ms-green-100);
    border-radius: 50%;
}
.price-card ul li::after {
    content: ""; position: absolute; left: 4px; top: 15px;
    width: 6px; height: 3.5px;
    border-left: 2px solid var(--ms-green-700);
    border-bottom: 2px solid var(--ms-green-700);
    transform: rotate(-45deg);
}
.price-card.hot ul li { color: rgba(255,255,255,.88); }
.price-card.hot ul li::before { background: rgba(74,182,83,.22); }
.price-card.hot ul li::after { border-left-color: var(--ms-green-400); border-bottom-color: var(--ms-green-400); }
.vat-note { text-align: center; color: var(--ms-muted); font-size: 13px; margin-top: 22px; }

/* --------------------------------------------------------- closing CTA */
.closing-cta {
    position: relative; overflow: hidden;
    background:
        radial-gradient(900px 460px at 78% -25%, rgba(35,132,46,.26), transparent 60%),
        radial-gradient(760px 420px at -10% 120%, rgba(29,79,136,.34), transparent 58%),
        var(--ms-navy-950);
    color: #fff;
    padding: 88px 20px 92px;
    text-align: center;
}
.cta-inner { position: relative; z-index: 1; }
.closing-cta h2 { color: #fff; font-size: 34px; margin: 0 0 10px; letter-spacing: -.015em; }
.closing-cta p { color: rgba(255,255,255,.72); font-size: 17px; margin: 0 auto; max-width: 620px; }
.cta-buttons { justify-content: center; margin-top: 28px; }
.cta-points { justify-content: center; margin-top: 26px; }

/* footer */
.pub-footer { background: var(--ms-navy-950); color: rgba(255,255,255,.75); padding: 50px 20px 26px; }
/* Brand blurb + the three standard Master Suite columns (Product, Legal, Support) */
.pub-footer-inner { max-width: var(--pub-w); margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 34px; }
.pub-footer-brand img { background: #fff; border-radius: 9px; padding: 6px 10px; margin-bottom: 12px; }
.pub-footer-brand p { font-size: 14px; max-width: 320px; }
.pub-footer-col { display: flex; flex-direction: column; gap: 9px; }
.pub-footer-col .micro { color: rgba(255,255,255,.45); margin-bottom: 4px; }
.pub-footer-col a { color: rgba(255,255,255,.8); font-size: 14.5px; }
.pub-footer-line { max-width: var(--pub-w); margin: 34px auto 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); font-size: 12.5px; color: rgba(255,255,255,.5); text-align: center; }

/* ------------------------------------------------------------- responsive */
@media (min-width: 1500px) {
    :root { --pub-w: 1320px; }
    .pub-hero h1 { font-size: 50px; }
    .pub-hero { padding: 96px 20px 108px; }
    .closing-cta h2 { font-size: 38px; }
}

@media (max-width: 1180px) {
    .pub-hero-inner { gap: 40px; }
    .cap { gap: 36px; }
    .cap.tinted { padding: 32px; }
    .sa-band { padding: 34px; }
    .sa-grid { grid-template-columns: 1fr 1fr; }
    .proof-l { max-width: none; }
}

@media (max-width: 980px) {
    .pub-section { padding: 60px 20px; }
    .pub-hero { padding: 62px 20px 76px; }
    .pub-hero-inner { grid-template-columns: 1fr; gap: 46px; }
    .pub-hero h1 { font-size: 34px; }
    .pub-hero .hero-sub { max-width: none; }
    .hero-stage { padding-bottom: 0; }
    .hero-float { position: static; margin: 16px auto 0; max-width: none; box-shadow: none; }
    .cap, .cap.tinted { grid-template-columns: 1fr; gap: 28px; }
    .cap.tinted .cap-visual { order: 0; }
    .cap-copy p { max-width: none; }
    .cap-copy h3 { font-size: 22px; }
    .feat-list { grid-template-columns: 1fr; gap: 0; }
    .how-rail { grid-template-columns: 1fr 1fr; gap: 30px 26px; }
    .how-rail::before { display: none; }
    .price-grid { grid-template-columns: 1fr; gap: 26px; max-width: 480px; margin: 0 auto; }
    .price-card.hot { margin-block: 0; padding: 40px 24px 30px; }
    .closing-cta { padding: 68px 20px 72px; }
    .closing-cta h2 { font-size: 28px; }
    /* The blurb takes the full width and the three menus sit side by side under
       it, so a tablet does not get four tall stacked blocks. */
    .pub-footer-inner { grid-template-columns: repeat(3, 1fr); gap: 30px 20px; }
    .pub-footer-brand { grid-column: 1 / -1; }
    .pub-footer-brand p { max-width: 560px; }
}

@media (max-width: 720px) {
    .pub-section h2 { font-size: 26px; }
    .sec-head { margin-bottom: 32px; }
    .sa-grid { grid-template-columns: 1fr; }
    .sa-head h2 { font-size: 23px; }
    .how-rail { grid-template-columns: 1fr; gap: 26px; }
    .how-dot { margin-bottom: 12px; }
    .proof { padding: 14px 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.18); }
    .proof:first-child { border-top: 0; padding-top: 0; }
    .proof-n { font-size: 28px; }
}

@media (max-width: 620px) {
    /* Below this the three menus would be narrower than their own longest link
       ("Privacy policy (POPIA)"), so they stack one under the other. */
    .pub-footer-inner { grid-template-columns: 1fr; gap: 26px; }
    .pub-footer { padding: 40px 20px 24px; }
}

@media (max-width: 480px) {
    .pub-hero { padding: 48px 16px 62px; }
    .pub-hero h1 { font-size: 28px; }
    .pub-hero .hero-sub { font-size: 15.5px; }
    .pub-section, .proof-strip, .closing-cta { padding-left: 16px; padding-right: 16px; }
    .pub-section { padding-top: 50px; padding-bottom: 50px; }
    .hero-cta .btn, .cta-buttons .btn { width: 100%; }
    .hc-tiles { grid-template-columns: 1fr 1fr; }
    .mock-body { padding: 13px; }
    .hc-row { font-size: 12.5px; padding: 8px 10px; }
    .cap.tinted { padding: 22px 16px; border-radius: 18px; }
    .cap-copy h3 { font-size: 20px; gap: 10px; }
    .cap-ic { width: 36px; height: 36px; }
    .sa-band { padding: 24px 18px; border-radius: 18px; }
    .price-card { padding: 24px 18px; }
    .price-card.hot { padding: 36px 18px 26px; }
    .pc-spec-n { font-size: 20px; }
    .pc-spec-n.word { font-size: 12.5px; }
    .closing-cta h2 { font-size: 24px; }
    .closing-cta p { font-size: 15.5px; }
    .cp-mock { transform: none; }
    .phone { width: 100%; max-width: 300px; }
}

/* ------------------------------------------------------------------ motion
   The mock-ups drift very slowly, each on its own timing, so the page feels alive
   without anything ever pulling the eye off the words. Nothing moves more than a
   few pixels and nothing loops fast enough to notice while reading. */

@keyframes pub-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}
@keyframes pub-float-soft {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}
/* the little warning card hangs off the console, so it leans as it rises */
@keyframes pub-float-tilt {
    0%, 100% { transform: translateY(0) rotate(-.5deg); }
    50%      { transform: translateY(-9px) rotate(.4deg); }
}
/* the printed label sits on a surface, so it lifts and turns like paper */
@keyframes pub-float-card {
    0%, 100% { transform: rotate(-2.2deg) translateY(0); }
    50%      { transform: rotate(-1.2deg) translateY(-11px); }
}

.mock-cmd   { animation: pub-float 7s ease-in-out infinite; }
.hero-float { animation: pub-float-tilt 6s ease-in-out infinite .9s; }
.mock-panel { animation: pub-float-soft 8s ease-in-out infinite .4s; }
.phone      { animation: pub-float 9s ease-in-out infinite .2s; }
.cp-mock    { animation: pub-float-card 8.5s ease-in-out infinite .6s; }
.mock-portal{ animation: pub-float-soft 7.5s ease-in-out infinite 1.1s; }

/* Hovering a mock-up stops its drift and lifts it, so a reader who wants a closer
   look gets a still, slightly larger picture instead of a moving target. */
.mock-cmd, .mock-panel, .phone, .cp-mock, .mock-portal {
    transition: transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s ease;
}
.mock-cmd:hover, .mock-panel:hover, .phone:hover, .mock-portal:hover {
    animation-play-state: paused;
    transform: translateY(-14px) scale(1.012);
    box-shadow: 0 34px 70px rgba(4,13,26,.5);
}
.cp-mock:hover {
    animation-play-state: paused;
    transform: rotate(0deg) translateY(-14px) scale(1.02);
    box-shadow: 0 30px 60px rgba(12,35,64,.28);
}

/* Live rows in the console tick in one after another on first paint. */
@keyframes pub-row-in {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: none; }
}
.hc-rows .hc-row { animation: pub-row-in .5s ease both; }
.hc-rows .hc-row:nth-child(1) { animation-delay: .25s; }
.hc-rows .hc-row:nth-child(2) { animation-delay: .40s; }
.hc-rows .hc-row:nth-child(3) { animation-delay: .55s; }
.hc-rows .hc-row:nth-child(4) { animation-delay: .70s; }

/* The KPI numbers count into place rather than just appearing. */
@keyframes pub-num-in {
    from { opacity: 0; transform: translateY(7px); }
    to   { opacity: 1; transform: none; }
}
.hc-tile .n, .proof-n { animation: pub-num-in .55s ease both; }
.hc-tiles .hc-tile:nth-child(2) .n { animation-delay: .07s; }
.hc-tiles .hc-tile:nth-child(3) .n { animation-delay: .14s; }
.hc-tiles .hc-tile:nth-child(4) .n { animation-delay: .21s; }

/* Cards and rows lift a little when you point at them. */
.feat-list li, .sa-item, .price-card, .how-node, .cap-facts li {
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.feat-list li:hover, .sa-item:hover { transform: translateY(-3px); }
.price-card:hover { transform: translateY(-5px); box-shadow: 0 18px 44px rgba(12,35,64,.14); }
.price-card.hot:hover { transform: translateY(-7px); }

/* The live dot already pulses in theme.css; keep the hero eyebrow in step. */
.hero-eyebrow { transition: border-color .3s ease, background-color .3s ease; }

@media (prefers-reduced-motion: reduce) {
    .pub-nav, .btn, .nav-links a { transition: none; }
    .cp-mock { transform: rotate(-2.2deg); }
    /* Keep the pill's still glaze, drop its sweep, exactly as theme.css does for
       .btn-green: the band stays parked off the edge rather than snapping across. */
    #pwa-install-btn:hover::after,
    #pwa-install-btn:focus-visible::after { transform: translateX(0) skewX(-18deg); }
    /* Everything above is decoration: switch all of it off. */
    .mock-cmd, .hero-float, .mock-panel, .phone, .cp-mock, .mock-portal,
    .hc-rows .hc-row, .hc-tile .n, .proof-n {
        animation: none !important;
    }
    .mock-cmd:hover, .mock-panel:hover, .phone:hover, .mock-portal:hover,
    .cp-mock:hover, .feat-list li:hover, .sa-item:hover, .price-card:hover {
        transform: none;
    }
}

/* The premium badge on the South African band: the supplied artwork, used as it is.
   The file is a JPEG, so it carries a white square behind the medal. multiply drops
   that square against the band's pale tint without touching the badge itself, which is
   all gold and navy and has its own shadow already baked in. Nothing here recolours,
   crops or restyles the artwork. */
.sa-head { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.sa-head > div:first-child { flex: 1 1 320px; min-width: 0; }
.sa-badge { flex: 0 0 auto; width: 168px; }
.sa-badge img { width: 100%; height: auto; display: block; mix-blend-mode: multiply; }

@media (max-width: 700px) {
    .sa-head { gap: 18px; }
    .sa-badge { width: 132px; margin: 0 auto; }
}

/* Company registration and POPIA numbers, smallest type on the page, under the suite line.
   Everything else legal is on the Weram legal page. */
.pub-footer-reg {
    max-width: var(--pub-w);
    margin: 8px auto 0;
    font-size: 11px;
    letter-spacing: .02em;
    color: rgba(255, 255, 255, .38);
    text-align: center;
}