/* Master Transport public site: the WHITE marketing page with a navy hero band.
   Section rhythm on the home page (index.php):
     nav            white, sticky, the full logo lockup
     hero           navy band with a decorative green route and stop markers
     proof strip    navy 900, numbers
     how it works   three stops (Book, Board, Track) connected by a route line
     features       role cards (owner, driver, client) on white
     feature list   hairline rows, two up
     pricing        light grey, Premier highlighted
     FAQ            accordion
     closing CTA    navy band
     footer         navy 950, Product / Legal / Support columns, suite line

   Markup contract for index.php and the other public pages:
     <header class="pub-nav" id="pub-nav"><div class="pub-nav-inner"> .pub-brand, .nav-burger, nav.nav-links (+ .nav-cta) </div></header>
     <section class="pub-hero"><div class="pub-hero-inner"> <div> .hero-eyebrow, h1, .hero-sub, .hero-cta, .hero-points </div> <div class="hero-stage"> .mock-card (+ .mock-float) </div> </div></section>
     <section class="proof-strip"><div class="pub-inner proof-inner"> .proof > .proof-n + .proof-l </div></section>
     <section class="pub-section" id="how"><div class="pub-inner"> .sec-head ... <ol class="how-route"><li class="how-stop"> .how-dot, h3, p </li>... </ol></div></section>
     <section class="pub-section alt" id="features"> .role-grid > .role-card ( .role-ic, h3, p, ul.role-list ) ; .feat-list > li ( .ic, div > h4 + p ) </section>
     <section class="pub-section pricing-section" id="pricing"> .price-grid > .price-card (.hot) (theme.css) ; .vat-note </section>
     <section class="pub-section" id="faq"> .faq-list > .faq-item > button.faq-q + .faq-a </section>
     <section class="closing-cta"><div class="cta-inner"> h2, p, .hero-cta.cta-buttons </div></section>
   landing.js runs the burger, the sticky-nav shadow and the FAQ accordion. */

body.pub { background: #fff; }

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

/* ---------------------------------------------------------------- nav */
.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); }
/* The bar's CONTENT box lines up with .pub-inner, the content column of every section:
   box-sizing is border-box, so a max-width of --pub-w put the logo 20px (the padding)
   inside the column's left edge on a wide screen. The padding is added to the cap, so
   the logo and the column share one left edge at every width. */
.pub-nav-inner {
    max-width: calc(var(--pub-w) + 40px); margin: 0 auto;
    display: flex; align-items: center; gap: 24px;
    padding: 10px 20px; min-height: 70px;
}
.pub-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ms-navy-900); min-width: 0; }
.pub-brand img { height: 44px; width: auto; display: block; }
.pub-brand-name { font-weight: 800; font-size: 19px; line-height: 1.15; letter-spacing: -.01em; max-width: min(46vw, 420px); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.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: 999px;
    min-height: 44px; display: inline-flex; align-items: center;
    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; margin-left: 6px; }
.nav-links a.nav-cta:hover { background: var(--ms-navy-700); }
/* Install pill: pwa.js adds .available once the browser actually offers an install.
   A green action, so it carries the same glaze as .btn-green. */
#pwa-install-btn {
    position: relative; overflow: hidden;
    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 { display: none; }
#pwa-install-btn.available { display: inline-flex; }
#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::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: 50%;
    min-width: 44px; min-height: 44px;
    align-items: center; justify-content: center;
}
.nav-burger:hover { background: var(--ms-navy-50); }
/* Bars while the menu is shut, a cross while it is open. Keyed on aria-expanded, which
   landing.js sets together with the "Open menu" / "Close menu" label. */
.nav-burger .nb-close { display: none; }
.nav-burger[aria-expanded="true"] .nb-open { display: none; }
.nav-burger[aria-expanded="true"] .nb-close { display: block; }
@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 16px; font-size: 15.5px; }
    .nav-links a.nav-cta { margin-left: 0; justify-content: center; }
    #pwa-install-btn.available { display: flex; justify-content: center; }
    .pub-brand img { height: 38px; }
}
.pub-flash { max-width: var(--pub-w); margin: 14px auto 0; }

/* buttons used on dark bands */
.btn-on-dark { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.45); color: #fff; }
.btn-on-dark:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.7); color: #fff; }

/* ------------------------------------------------------------------- hero
   Navy band. The decorative route runs from the bottom left to the top right behind
   the copy, drawn once as an SVG background so it costs nothing and loads nothing. */
.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: 84px 20px 96px;
}
.pub-hero::before {
    content: "";
    position: absolute; inset: 0;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 700' preserveAspectRatio='xMidYMid slice'><path d='M-40 640 C 220 560, 300 700, 520 540 S 900 300, 1100 260 S 1300 160, 1460 40' fill='none' stroke='%234ab653' stroke-width='3' stroke-linecap='round' stroke-dasharray='0'/><circle cx='120' cy='612' r='10' fill='%234ab653'/><circle cx='520' cy='540' r='10' fill='%23081b33' stroke='%234ab653' stroke-width='3'/><circle cx='1100' cy='260' r='10' fill='%23081b33' stroke='%234ab653' stroke-width='3'/><circle cx='1400' cy='90' r='10' fill='%234ab653'/></svg>") no-repeat center / cover;
    opacity: .22;
    pointer-events: none;
}
.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); }

/* The hero picture: a white "trip" card with a real .route-line inside it (theme.css
   draws the timeline), a status chip and a small floating card hanging off it. */
/* The stage reserves the toast's height under the card so the toast hangs off the
   card's bottom edge without covering the ETA line (the hero's proof line): the toast
   is anchored from the top of the stage, so its overlap with the card is a fixed 6px
   inside the foot's bottom padding whatever height its text wraps to. */
.hero-stage { position: relative; padding-bottom: 116px; display: flex; justify-content: center; }
.mock-card {
    width: 100%; max-width: 440px;
    background: #fff;
    color: var(--ms-ink);
    border-radius: 18px;
    box-shadow: 0 30px 70px rgba(4,13,26,.5);
    overflow: hidden;
    position: relative;
}
.mock-bar {
    display: flex; align-items: center; gap: 10px;
    background: var(--ms-navy-900);
    color: #fff;
    padding: 12px 16px;
    font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.mock-bar .live-dot { background: var(--ms-green-400); }
.mock-bar .mock-right { margin-left: auto; color: rgba(255,255,255,.55); letter-spacing: .03em; font-variant-numeric: tabular-nums; }
.mock-body { padding: 16px 18px 12px; }
.mock-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.mock-title b { font-size: 16px; color: var(--ms-navy-900); }
.mock-title small { display: block; color: var(--ms-muted); font-size: 12.5px; font-weight: 500; }
.mock-body .route-line { padding-top: 0; }
.mock-body .rl-item { padding-bottom: 12px; }
.mock-body .rl-item:last-child { padding-bottom: 2px; }
/* The sentence is one <span> beside the icon, so it wraps as prose rather than as
   separate flex items (which orphaned the comma after the time). */
.mock-foot { display: flex; align-items: flex-start; gap: 10px; padding: 10px 18px 14px; border-top: 1px solid var(--ms-line); font-size: 13px; line-height: 1.45; color: var(--ms-muted); }
.mock-foot .ic-sm { color: var(--ms-green-600); margin-top: 1px; }
.mock-foot span { min-width: 0; }
.mock-foot b { color: var(--ms-navy-900); }
.mock-float {
    position: absolute; left: -30px; top: calc(100% - 122px);
    display: flex; align-items: flex-start; gap: 11px;
    background: #fff;
    border: 1px solid var(--ms-line);
    border-top: 3px solid var(--ms-green-500);
    border-radius: 14px;
    padding: 12px 15px;
    max-width: 280px;
    box-shadow: 0 18px 40px rgba(4,13,26,.35);
    color: var(--ms-ink);
}
.mock-float .hf-ic { color: var(--ms-green-600); display: flex; padding-top: 1px; }
.mock-float strong { display: block; color: var(--ms-navy-900); font-size: 13.5px; }
.mock-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: 26ch; }

/* --------------------------------------------------------------- sections */
.pub-section { padding: 78px 20px; }
.pub-section.alt { background: var(--ms-bg); }
.pub-inner { max-width: var(--pub-w); margin: 0 auto; }
.pub-narrow { max-width: 780px; 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: 700px; margin-bottom: 46px; }
.sec-head .sec-sub { margin-bottom: 0; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.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); }

/* ------------------------------------------------------------ how it works
   Three stops on one route: Book, Board, Track. The line runs behind the dots. */
.how-route {
    list-style: none; padding: 0; margin: 0;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;
    counter-reset: stop;
    position: relative;
}
.how-route::before {
    content: "";
    position: absolute; top: 28px; left: 10%; right: 10%;
    height: 3px; border-radius: 3px;
    background: linear-gradient(90deg, var(--ms-green-500), var(--ms-green-400) 50%, var(--ms-green-500));
    opacity: .6;
}
.how-stop { position: relative; text-align: center; padding: 0 10px; }
.how-dot {
    position: relative; z-index: 1;
    width: 58px; height: 58px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff;
    border: 3px solid var(--ms-green-500);
    color: var(--ms-green-700);
    margin-bottom: 18px;
    box-shadow: 0 0 0 8px #fff, 0 10px 24px rgba(12,35,64,.1);
}
.how-dot .ic { width: 26px; height: 26px; }
.how-stop h3 { font-size: 19px; margin-bottom: 6px; }
.how-stop h3::before {
    counter-increment: stop;
    content: "Stop " counter(stop, decimal-leading-zero);
    display: block;
    font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ms-green-700);
    margin-bottom: 5px;
}
.how-stop p { color: var(--ms-muted); font-size: 14.5px; margin: 0 auto; max-width: 34ch; }
.how-stop .how-who { display: inline-block; margin-top: 10px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ms-navy-800); background: var(--ms-navy-50); border-radius: 999px; padding: 4px 11px; }

/* ------------------------------------------------------------ role cards */
.role-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.role-card {
    background: #fff;
    border: 1px solid rgba(221,228,236,.8);
    border-top: 3px solid var(--ms-green-600);
    border-radius: var(--mt-radius);
    box-shadow: var(--mt-shadow);
    padding: 26px 24px;
    display: flex; flex-direction: column;
    min-width: 0;
}
.role-card.navy { border-top-color: var(--ms-navy-700); }
.role-ic {
    width: 48px; height: 48px; border-radius: 14px;
    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;
    margin-bottom: 14px;
}
.role-ic .ic { width: 24px; height: 24px; }
.role-card.navy .role-ic { background: var(--ms-navy-50); border-color: var(--ms-navy-100); color: var(--ms-navy-700); }
.role-card h3 { font-size: 20px; margin-bottom: 6px; }
.role-card .role-for { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ms-green-700); margin-bottom: 8px; }
.role-card.navy .role-for { color: var(--ms-navy-600); }
.role-card p { color: var(--ms-muted); font-size: 14.5px; }
.role-list { list-style: none; padding: 0; margin: 4px 0 0; }
.role-list li { padding: 7px 0 7px 26px; position: relative; font-size: 14.5px; border-top: 1px solid #edf1f6; }
.role-list li:first-child { border-top: 0; }
.role-list li::before { content: ""; position: absolute; left: 0; top: 11px; width: 14px; height: 14px; background: var(--ms-green-100); border-radius: 50%; }
.role-list 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); }

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

/* ------------------------------------------------------------- SA band */
.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: var(--mt-radius); 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); }
.pricing-section .price-card { border: 1px solid var(--ms-line); }

/* ---------------------------------------------------------------------- FAQ */
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--ms-line); }
.faq-item:first-child { border-top: 1px solid var(--ms-line); }
.faq-q {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    width: 100%;
    padding: 18px 4px;
    min-height: 56px;
    background: none; border: 0;
    font-family: var(--ms-font); font-size: 16.5px; font-weight: 700;
    color: var(--ms-navy-900);
    text-align: left; cursor: pointer;
}
.faq-q:hover { color: var(--ms-green-700); }
.faq-q:focus-visible { outline: 3px solid var(--ms-green-400); outline-offset: 2px; border-radius: 8px; }
.faq-chev {
    flex: 0 0 auto;
    width: 32px; height: 32px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--ms-navy-50); color: var(--ms-navy-800);
    transition: transform .2s ease, background .15s;
}
.faq-chev .ic-sm { width: 16px; height: 16px; }
.faq-item.open .faq-chev { transform: rotate(180deg); background: var(--ms-green-100); color: var(--ms-green-800); }
.faq-a { display: none; padding: 0 44px 20px 4px; color: var(--ms-muted); font-size: 15px; line-height: 1.6; }
.faq-a p:last-child { margin-bottom: 0; }
.faq-item.open .faq-a { display: block; animation: mt-slide .22s ease both; }

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

/* ------------------------------------------------------------- public pages
   Sign-up, Elite enquiry, support, terms, privacy: a narrow column on white. */
.pub-page { padding: 44px 20px 70px; }
.pub-page h1 { font-size: 30px; margin-bottom: 8px; }
.pub-page .lead { color: var(--ms-muted); font-size: 16px; margin-bottom: 26px; }
.pub-form-card {
    background: #fff;
    border: 1px solid rgba(221,228,236,.8);
    border-top: 3px solid var(--ms-green-600);
    border-radius: var(--mt-radius);
    box-shadow: var(--mt-shadow);
    padding: 26px 26px 22px;
    margin-bottom: 18px;
}
.pub-form-card h2 { font-size: 18px; margin-bottom: 14px; }
/* A card heading led by an icon (/support "Send us your query"): one row, the icon
   centred on the text rather than sitting on the baseline. */
.pub-form-card h2.h-ic { display: inline-flex; align-items: center; gap: 8px; }
.pub-form-card h2.h-ic .ic { flex: 0 0 auto; }
/* Example text in a public form is lighter than anything typed, and every example
   starts "e.g.", so a form full of placeholders never reads as already filled in. */
body.pub .field input::placeholder, body.pub .field textarea::placeholder { color: #98a3b0; opacity: 1; }
/* Tier choice on the sign-up page: big radio cards */
.plan-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.plan-pick label {
    position: relative;
    display: block;
    border: 2px solid var(--ms-line);
    border-radius: var(--mt-radius);
    padding: 16px 16px 14px 48px;
    cursor: pointer;
    background: #fff;
    min-height: 44px;
}
.plan-pick label:hover { border-color: var(--ms-navy-500); }
.plan-pick input { position: absolute; left: 16px; top: 20px; width: 20px; height: 20px; accent-color: var(--ms-green-600); margin: 0; }
.plan-pick label b { display: block; font-size: 16px; color: var(--ms-navy-900); }
.plan-pick label .price { font-weight: 800; color: var(--ms-green-700); font-size: 18px; }
.plan-pick label small { display: block; color: var(--ms-muted); font-size: 12.5px; margin-top: 3px; }
.plan-pick label:has(input:checked) { border-color: var(--ms-green-500); background: var(--ms-green-50); box-shadow: 0 0 0 3px var(--ms-green-100); }
.cycle-toggle { display: inline-flex; background: var(--ms-navy-50); border-radius: 999px; padding: 4px; margin-bottom: 16px; }
.cycle-toggle label { position: relative; padding: 9px 18px; min-height: 40px; display: inline-flex; align-items: center; border-radius: 999px; font-weight: 700; font-size: 14px; color: var(--ms-navy-800); cursor: pointer; }
.cycle-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cycle-toggle label:has(input:checked) { background: var(--ms-navy-900); color: #fff; }
.cycle-toggle .save { margin-left: 6px; font-size: 11px; font-weight: 800; color: var(--ms-green-400); }
.cycle-toggle label:not(:has(input:checked)) .save { color: var(--ms-green-700); }
.order-sum { background: var(--ms-navy-50); border-radius: var(--mt-radius-sm); padding: 14px 16px; margin: 16px 0; }
.order-sum .row { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 14.5px; }
.order-sum .row.total { border-top: 1px solid var(--ms-navy-100); margin-top: 6px; padding-top: 8px; font-weight: 800; font-size: 16px; color: var(--ms-navy-900); }
/* The consultant's promo code on the sign-up page: the box and its Apply button on one row, the
   discount line in the order summary in green once a code is applied (signup.js). */
.promo-field { margin-bottom: 6px; }
.promo-row { display: flex; gap: 8px; align-items: stretch; }
.promo-row input { flex: 1 1 auto; min-width: 0; text-transform: uppercase; }
.promo-row input::placeholder { text-transform: none; }
.promo-row .btn { flex: 0 0 auto; min-height: 44px; }
.promo-field[data-promo-state="checking"] .promo-row .btn { opacity: .6; }
.order-sum .row.discount { color: var(--ms-green-700); font-weight: 700; }
@media (max-width: 640px) { .plan-pick { grid-template-columns: 1fr; } }
/* Long legal text */
.legal h2 { font-size: 20px; margin-top: 32px; }
.legal h3 { font-size: 16px; margin-top: 22px; }
.legal p, .legal li { font-size: 15px; line-height: 1.65; }
.legal .toc { background: var(--ms-bg); border-radius: var(--mt-radius); padding: 16px 20px; margin-bottom: 22px; }
.legal .toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 30px; }
.legal .toc li { font-size: 14px; padding: 2px 0; }
@media (max-width: 640px) { .legal .toc ol { columns: 1; } }
.legal-updated { color: var(--ms-muted); font-size: 13px; margin-bottom: 18px; }

/* ------------------------------------------------------------------- footer */
.pub-footer { background: var(--ms-navy-950); color: rgba(255,255,255,.75); padding: 50px 20px 26px; }
.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: 10px; padding: 6px 10px; margin-bottom: 12px; }
.pub-footer-brand p { font-size: 14px; max-width: 340px; }
.pub-footer-brand-name { display: block; font-weight: 800; font-size: 20px; line-height: 1.2; color: #fff; 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; min-height: 28px; display: inline-flex; align-items: center; }
.pub-footer-col a:hover { color: #fff; }
.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; line-height: 1.6; }
.pub-footer-line a { color: var(--ms-green-400); }
.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; }
/* A client's own address (Jodey, 16/10/2026): a white footer with their logo in the centre. The
   Master Suite line below it always stays, in colours that read on white. */
.pub-footer.is-client { background: #fff; color: #5b6b7e; border-top: 1px solid #e8eef5; padding: 40px 20px 26px; }
.pub-footer.is-client .pub-footer-inner { display: flex; justify-content: center; }
.pub-footer.is-client .pub-footer-brand { display: flex; flex-direction: column; align-items: center; text-align: center; }
.pub-footer.is-client .pub-footer-brand img { background: none; padding: 0; margin: 0; height: 52px; width: auto; }
.pub-footer.is-client .pub-footer-brand-name { color: var(--ms-navy-900); }
.pub-footer.is-client .pub-footer-line { border-top-color: #e8eef5; color: #6b7a8c; margin-top: 26px; }
.pub-footer.is-client .pub-footer-line a { color: var(--ms-green-700); }

/* ------------------------------------------------------------- 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; }
    .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; flex-direction: column; align-items: center; }
    .mock-float { position: static; margin: 14px auto 0; max-width: 440px; width: 100%; box-shadow: var(--mt-shadow); }
    .role-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
    .feat-list { grid-template-columns: 1fr; gap: 0; }
    .how-route { grid-template-columns: 1fr; gap: 34px; max-width: 520px; margin: 0 auto; padding-left: 0; }
    .how-route::before { top: 30px; bottom: 30px; left: 28px; right: auto; width: 3px; height: auto; background: linear-gradient(180deg, var(--ms-green-500), var(--ms-green-400) 50%, var(--ms-green-500)); }
    .how-stop { text-align: left; display: grid; grid-template-columns: 58px 1fr; gap: 0 18px; padding: 0; }
    .how-dot { margin-bottom: 0; grid-row: 1 / span 3; }
    .how-stop p { margin: 0; }
    .closing-cta { padding: 68px 20px 72px; }
    .closing-cta h2 { font-size: 28px; }
    .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; }
    .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; }
    .faq-q { font-size: 15.5px; }
    .faq-a { padding-right: 4px; }
}
@media (max-width: 620px) {
    .pub-footer-inner { grid-template-columns: 1fr; gap: 26px; }
    .pub-footer { padding: 40px 20px 24px; }
}
@media (max-width: 480px) {
    .pub-nav-inner { padding-left: 16px; padding-right: 16px; }   /* the sections' 16px gutter */
    .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%; }
    .mock-body { padding: 14px 14px 10px; }
    .sa-band { padding: 24px 18px; border-radius: 18px; }
    .closing-cta h2 { font-size: 24px; }
    .closing-cta p { font-size: 15.5px; }
    .pub-page { padding: 30px 16px 56px; }
    .pub-form-card { padding: 20px 16px 18px; }
    .how-stop { grid-template-columns: 50px 1fr; gap: 0 14px; }
    .how-dot { width: 50px; height: 50px; }
    .how-route::before { left: 24px; }
}

/* ------------------------------------------------------------------ motion
   The hero card drifts very slowly; the floating card leans as it rises. Nothing
   moves more than a few pixels, and it all stops on hover and for reduced motion. */
@keyframes pub-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes pub-float-tilt { 0%, 100% { transform: translateY(0) rotate(-.5deg); } 50% { transform: translateY(-8px) rotate(.4deg); } }
.mock-card { animation: pub-float 7s ease-in-out infinite; transition: transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s ease; }
.mock-float { animation: pub-float-tilt 6s ease-in-out infinite .9s; }
.mock-card:hover { animation-play-state: paused; transform: translateY(-12px) scale(1.012); box-shadow: 0 34px 70px rgba(4,13,26,.55); }
@keyframes pub-row-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.mock-body .rl-item { animation: pub-row-in .5s ease both; }
.mock-body .rl-item:nth-child(1) { animation-delay: .25s; }
.mock-body .rl-item:nth-child(2) { animation-delay: .40s; }
.mock-body .rl-item:nth-child(3) { animation-delay: .55s; }
.mock-body .rl-item:nth-child(4) { animation-delay: .70s; }
@keyframes pub-num-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.proof-n { animation: pub-num-in .55s ease both; }
.role-card, .sa-item, .feat-list li, .how-dot { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.role-card:hover, .sa-item:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(12,35,64,.12); }
.how-stop:hover .how-dot { transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) {
    .pub-nav, .btn, .nav-links a, .faq-chev { transition: none; }
    #pwa-install-btn:hover::after, #pwa-install-btn:focus-visible::after { transform: translateX(0) skewX(-18deg); }
    .mock-card, .mock-float, .mock-body .rl-item, .proof-n { animation: none !important; }
    .mock-card:hover, .role-card:hover, .sa-item:hover, .how-stop:hover .how-dot { transform: none; }
}