/* growth.css: components added during the 2026-10 growth build.
   Flat CSS (no nesting) so older Android browsers parse it.
   Dark is the default theme; light overrides use :where(html[data-theme="light"]). */

/* ---------- services mega menu (desktop) ---------- */
.headerWrap .headerInner .menuWrap{ position: relative; }
.headerWrap .headerInner .menuWrap > ul > li.peMegaLi{ position: static; }
.headerWrap .headerInner .menuWrap > ul > li .subMenu.peMega{
    left: auto;
    right: 0;
    width: min(1040px, calc(100vw - 80px));
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 10px;
    row-gap: 4px;
    padding: 18px 14px 12px;
}
.peMega .megaCol{ padding: 0 4px; }
.peMega .megaCol > ul{ list-style: none; margin: 0; padding: 0; }
.peMega .megaHead{
    display: block;
    padding: 6px 14px 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgb(255 255 255 / 10%);
    font-family: "Space Mono", monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--m-blue, #0b5fd9);
    text-decoration: none;
}
a.megaHead:hover{ color: #fff; }
.headerWrap .headerInner .menuWrap > ul > li .subMenu.peMega li a{ font-size: 11.5px; padding: 8px 14px; }
.headerWrap .headerInner .menuWrap > ul > li .subMenu.peMega .subAll{ grid-column: 1 / -1; }
:where(html[data-theme="light"]) .peMega .megaHead{ border-bottom-color: rgb(0 0 0 / 10%); }
:where(html[data-theme="light"]) a.megaHead:hover{ color: #000; }

/* ---------- burger + mobile menu (< 992px, where the desktop links are hidden) ---------- */
.peBurger{
    display: none;
    position: relative;
    width: 44px;
    height: 44px;
    border: 1px solid rgb(255 255 255 / 14%);
    border-radius: 12px;
    background: rgb(12 12 12 / 88%);
    cursor: pointer;
}
.peBurger span{
    position: absolute;
    left: 12px;
    right: 12px;
    height: 2px;
    border-radius: 2px;
    background: #f1ede4;
    transition: transform 0.3s ease, top 0.3s ease;
}
.peBurger span:nth-child(1){ top: 16px; }
.peBurger span:nth-child(2){ top: 25px; }
.peBurger[aria-expanded="true"] span:nth-child(1){ top: 21px; transform: rotate(45deg); }
.peBurger[aria-expanded="true"] span:nth-child(2){ top: 21px; transform: rotate(-45deg); }
.peMobileNav{
    position: fixed;
    inset: 0;
    z-index: 98;
    padding: 96px 20px 32px;
    overflow-y: auto;
    background: #0b0b0b;
    -webkit-overflow-scrolling: touch;
}
.peMobileNav[hidden]{ display: none; }
.peMobileInner{ max-width: 560px; margin: 0 auto; }
.peMobileNav details{ border-bottom: 1px solid rgb(255 255 255 / 10%); }
.peMobileNav summary,
.peMobileNav .peMobileTop{
    display: block;
    padding: 18px 4px;
    font-family: "Space Mono", monospace;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #f1ede4;
    text-decoration: none;
    cursor: pointer;
    list-style: none;
}
.peMobileNav summary::-webkit-details-marker{ display: none; }
.peMobileNav summary::after{ content: "+"; float: right; color: var(--m-blue, #0b5fd9); }
.peMobileNav details[open] summary::after{ content: "\2212"; }
.peMobileNav .peMobileTop{ border-bottom: 1px solid rgb(255 255 255 / 10%); }
.peMobileNav details ul{ list-style: none; margin: 0 0 14px; padding: 0; }
.peMobileNav details li a{
    display: block;
    padding: 11px 6px;
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    color: rgb(241 237 228 / 80%);
    text-decoration: none;
}
.peMobileCtas{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 26px; }
.peMobileCtas .pgBtn{ justify-content: center; }
.peMobileCtas .pgBtn.primary{ grid-column: 1 / -1; }
body.peNavOpen{ overflow: hidden; }
@media (max-width: 991px){
    .peBurger{ display: block; }
}
:where(html[data-theme="light"]) .peBurger{ background: rgb(243 243 243 / 96%); border-color: rgb(0 0 0 / 12%); }
:where(html[data-theme="light"]) .peBurger span{ background: #0b0b0b; }
:where(html[data-theme="light"]) .peMobileNav{ background: #f6f6f4; }
:where(html[data-theme="light"]) .peMobileNav summary,
:where(html[data-theme="light"]) .peMobileNav .peMobileTop{ color: #0b0b0b; }
:where(html[data-theme="light"]) .peMobileNav details li a{ color: rgb(14 18 27 / 82%); }
:where(html[data-theme="light"]) .peMobileNav details,
:where(html[data-theme="light"]) .peMobileNav .peMobileTop{ border-bottom-color: rgb(0 0 0 / 10%); }

/* ---------- data tables (pricing ranges, comparisons, channel mixes) ---------- */
.peTableScroll{ overflow-x: auto; margin-top: clamp(24px, 3vw, 44px); border: 1px solid rgb(255 255 255 / 12%); border-radius: 16px; }
.peTable{ width: 100%; min-width: 640px; border-collapse: collapse; font-family: "Montserrat", sans-serif; font-size: 15px; line-height: 1.5; }
.peTable th, .peTable td{ padding: 16px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid rgb(255 255 255 / 10%); color: rgb(241 237 228 / 86%); }
.peTable thead th{ font-family: "Space Mono", monospace; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--m-blue, #0b5fd9); background: rgb(255 255 255 / 3%); }
.peTable tbody th{ color: #fff; font-weight: 700; }
.peTable tbody tr:last-child th, .peTable tbody tr:last-child td{ border-bottom: 0; }
.peTableNote{ margin-top: 14px; font-size: 14px; color: #5a6377; }   /* tech audit 21 Oct: 6:1, no opacity */
:where(html[data-theme="light"]) .peTableScroll{ border-color: rgb(0 0 0 / 12%); }
:where(html[data-theme="light"]) .peTable th, :where(html[data-theme="light"]) .peTable td{ color: rgb(14 18 27 / 86%); border-bottom-color: rgb(0 0 0 / 10%); }
:where(html[data-theme="light"]) .peTable tbody th{ color: #000; }
:where(html[data-theme="light"]) .peTable thead th{ background: rgb(0 0 0 / 3%); }

/* ---------- placeholders awaiting the team (must be zero before go-live) ---------- */
mark.peTodo{
    padding: 0 4px;
    border: 1px dashed #ffb020;
    border-radius: 4px;
    background: rgb(255 176 32 / 16%);
    color: inherit;
    font-size: 0.85em;
    font-family: "Space Mono", monospace;
}

/* ---------- byline / last-updated strip under the hero ---------- */
.peByline{ display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; margin-top: 22px; font-family: "Space Mono", monospace; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.7; }
.peByline a{ color: inherit; }

/* ---------- phones: logo + theme + CTA + burger must fit one row at 360px ---------- */
@media (max-width: 575px){
    .headerWrap .headerInner .logoImg img{ height: 22px; }
    .headerWrap .headerInner .headerRight{ gap: 6px; }
    .headerWrap .headerInner .headerRight .menuWrap{ gap: 6px; }
    .headerWrap.isSticky .headerInner{ padding: 0 12px 0 16px; }
    .peBurger{ width: 40px; height: 40px; border-radius: 10px; }
    .peBurger span{ left: 11px; right: 11px; }
    .peBurger span:nth-child(1){ top: 14px; }
    .peBurger span:nth-child(2){ top: 23px; }
    .peBurger[aria-expanded="true"] span:nth-child(1),
    .peBurger[aria-expanded="true"] span:nth-child(2){ top: 19px; }
}
@media (max-width: 399px){
    .headerWrap .menuWrap .themeSwitch{ display: none; }
}

/* ---------- lead forms ---------- */
.peHp{ position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.peFormDone{ padding: clamp(24px, 3vw, 40px); border: 1px solid rgb(0 117 255 / 45%); border-radius: 18px; background: rgb(0 117 255 / 8%); }
.peFormDone h3{ margin: 0 0 10px; font-family: "Montserrat", sans-serif; font-size: clamp(20px, 2vw, 28px); font-weight: 700; color: #fff; }
.peFormDone p{ margin: 0; font-size: 16px; line-height: 1.6; color: rgb(241 237 228 / 82%); }
.peFormDone a{ color: var(--m-blue, #0b5fd9); }
:where(html[data-theme="light"]) .peFormDone h3{ color: #000; }
:where(html[data-theme="light"]) .peFormDone p{ color: rgb(14 18 27 / 82%); }

/* ---------- long-form documents (legal pages) ---------- */
.peDocWrap{ padding: clamp(48px, 7vw, 110px) 0; }
.peDoc{ max-width: 860px; margin: 0 auto; font-family: "Montserrat", sans-serif; font-size: 17px; line-height: 1.75; color: rgb(241 237 228 / 86%); }
.peDoc h2{ margin: 2.2em 0 0.6em; font-family: "Montserrat", sans-serif; font-size: clamp(22px, 2.2vw, 30px); font-weight: 700; line-height: 1.25; color: #fff; }
.peDoc h3{ margin: 1.6em 0 0.4em; font-size: 19px; font-weight: 700; color: #fff; }
.peDoc p, .peDoc ul{ margin: 0 0 1.1em; }
.peDoc ul{ padding-left: 1.3em; }
.peDoc li{ margin-bottom: 0.45em; }
.peDoc a{ color: var(--m-blue, #0b5fd9); }
.peDocMeta{ font-family: "Space Mono", monospace; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; }
:where(html[data-theme="light"]) .peDoc{ color: rgb(14 18 27 / 86%); }
:where(html[data-theme="light"]) .peDoc h2, :where(html[data-theme="light"]) .peDoc h3{ color: #000; }

/* =====================================================================
   Template library v1 (2026-10-03): utility bar, mega descriptors, phone bar,
   proof strip, buyer problems, price block, takeaways, definition, footer sitemap.
   Source: growth/research/page-patterns.md Parts B, D, E.
   ===================================================================== */

/* ---------- utility bar (desktop only; slides away once the header turns sticky) ---------- */
.peUtility{ position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 34px; background: #050505; border-bottom: 1px solid rgb(255 255 255 / 8%); transition: transform 0.4s ease; }
.peUtilityInner{ display: flex; align-items: center; justify-content: flex-end; gap: 22px; height: 100%; padding: 0 80px; font-family: "Space Mono", monospace; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; }
.peUtilityHq{ margin-right: auto; color: rgb(241 237 228 / 60%); }
.peUtilityLink{ font-size: 11.5px; color: rgb(241 237 228 / 85%); text-decoration: none; }
.peUtilityLink:hover{ color: var(--m-blue, #0b5fd9); }
.headerWrap{ top: 34px; transition: top 0.4s ease, padding 0.4s ease, background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease; }
.headerWrap.isSticky{ top: 0; }
body.peHdrSticky .peUtility{ transform: translateY(-100%); }
@media (max-width: 991px){
    .peUtility{ display: none; }
    .headerWrap{ top: 0; }
}
:where(html[data-theme="light"]) .peUtility{ background: #f2f2ef; border-bottom-color: rgb(0 0 0 / 8%); }
:where(html[data-theme="light"]) .peUtilityHq{ color: rgb(14 18 27 / 60%); }
:where(html[data-theme="light"]) .peUtilityLink{ color: rgb(14 18 27 / 85%); }

/* call icon in the header on phones */
.peHeadCall{ display: none; width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgb(255 255 255 / 14%); background: rgb(12 12 12 / 88%); color: #f1ede4; align-items: center; justify-content: center; }
.peHeadCall svg{ width: 18px; height: 18px; }
@media (max-width: 991px){ .peHeadCall{ display: inline-flex; } }
:where(html[data-theme="light"]) .peHeadCall{ background: rgb(243 243 243 / 96%); border-color: rgb(0 0 0 / 12%); color: #0b0b0b; }

/* ---------- mega menu: pillar promise + one-line outcome per service ---------- */
.peMega .megaPromise{ margin: 0 14px 6px; font-family: "Montserrat", sans-serif; font-size: 12.5px; line-height: 1.4; color: rgb(241 237 228 / 62%); text-transform: none; letter-spacing: 0; }
.headerWrap .headerInner .menuWrap > ul > li .subMenu.peMega li a{ display: block; }
.peMega .megaItem{ display: block; }
.peMega li a small{ display: block; margin-top: 2px; font-family: "Montserrat", sans-serif; font-size: 11.5px; font-weight: 500; line-height: 1.35; letter-spacing: 0; text-transform: none; color: rgb(241 237 228 / 55%); }
.peMega .megaMore a{ color: var(--m-blue, #0b5fd9) !important; }
.headerWrap .headerInner .menuWrap > ul > li .subMenu.peMega .megaFoot{ grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; margin-top: 8px; padding: 12px 14px 4px; border-top: 1px solid rgb(255 255 255 / 10%); font-family: "Montserrat", sans-serif; font-size: 13px; color: rgb(241 237 228 / 70%); }
.headerWrap .headerInner .menuWrap > ul > li .subMenu.peMega .megaFoot a{ display: inline; padding: 0; color: var(--m-blue, #0b5fd9); }
.headerWrap .headerInner .menuWrap > ul > li .subMenu.peMega.isTwo{ width: min(760px, calc(100vw - 80px)); grid-template-columns: 2fr 1fr; }
.peMega .megaGrid{ display: grid; grid-template-columns: 1fr 1fr; list-style: none; margin: 0; padding: 0; }
:where(html[data-theme="light"]) .peMega .megaPromise, :where(html[data-theme="light"]) .peMega li a small{ color: rgb(14 18 27 / 60%); }
:where(html[data-theme="light"]) .headerWrap .headerInner .menuWrap > ul > li .subMenu.peMega .megaFoot{ border-top-color: rgb(0 0 0 / 10%); color: rgb(14 18 27 / 70%); }

/* ---------- phone bar: Call | WhatsApp | Growth plan (replaces the floating button and side tab on phones) ---------- */
.peBar{ display: none; }
@media (max-width: 767px){
    .peBar{ position: fixed; left: 0; right: 0; bottom: 0; z-index: 96; display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 8px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: rgb(8 8 8 / 96%); border-top: 1px solid rgb(255 255 255 / 10%); backdrop-filter: blur(12px); }
    .peBarBtn{ display: flex; align-items: center; justify-content: center; min-height: 46px; border-radius: 12px; border: 1px solid rgb(255 255 255 / 16%); font-family: "Montserrat", sans-serif; font-size: 14px; font-weight: 700; color: #f1ede4; text-decoration: none; }
    .peBarBtn.isWa{ border-color: #25d366; color: #0e7a3c; }   /* tech audit 21 Oct: 5.0:1 (was 1.8:1) */
    .peBarBtn.isCta{ background: var(--m-blue, #0b5fd9); border-color: var(--m-blue, #0b5fd9); color: #fff; }
    body{ padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
    .waFloat, .qcTab{ display: none !important; }
    .ftTop{ bottom: calc(76px + env(safe-area-inset-bottom)) !important; }
}
:where(html[data-theme="light"]) .peBar{ background: rgb(246 246 244 / 96%); border-top-color: rgb(0 0 0 / 10%); }
:where(html[data-theme="light"]) .peBarBtn{ color: #0b0b0b; border-color: rgb(0 0 0 / 16%); }

/* ---------- proof strip (verified numbers + cleared logos) ---------- */
.peProof{ padding: clamp(28px, 4vw, 48px) 0; border-top: 1px solid rgb(255 255 255 / 8%); border-bottom: 1px solid rgb(255 255 255 / 8%); }
.peProofList{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; list-style: none; margin: 0; padding: 0; }
.peProofItem b{ display: block; font-family: "Archivo", "Montserrat", sans-serif; font-size: clamp(30px, 3.4vw, 48px); font-weight: 800; line-height: 1; color: #fff; }
.peProofItem span{ display: block; margin-top: 8px; font-family: "Montserrat", sans-serif; font-size: 13.5px; line-height: 1.45; color: rgb(241 237 228 / 68%); }
.peLogos{ display: flex; flex-wrap: wrap; gap: 18px 34px; align-items: center; list-style: none; margin: 26px 0 0; padding: 0; }
.peLogos img{ height: 30px; width: auto; opacity: 0.8; filter: grayscale(1); }
@media (max-width: 767px){ .peProofList{ grid-template-columns: 1fr 1fr; } }
:where(html[data-theme="light"]) .peProofItem b{ color: #000; }
:where(html[data-theme="light"]) .peProofItem span{ color: rgb(14 18 27 / 68%); }

/* ---------- buyer problems ---------- */
.peProblem .peProblemQ{ margin: 0 0 12px; font-family: "Montserrat", sans-serif; font-size: clamp(17px, 1.5vw, 20px); font-weight: 700; line-height: 1.35; color: #fff; }
:where(html[data-theme="light"]) .peProblem .peProblemQ{ color: #000; }

/* ---------- price block ---------- */
.pePriceFrom{ max-width: 860px; margin: clamp(18px, 2.5vw, 30px) 0 0; font-family: "Montserrat", sans-serif; font-size: clamp(18px, 1.7vw, 23px); font-weight: 600; line-height: 1.45; color: #fff; }
.pePriceSub{ margin: 28px 0 10px; font-family: "Space Mono", monospace; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--m-blue, #0b5fd9); }
.pePriceFactors{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 28px; margin: 0; padding-left: 1.2em; font-family: "Montserrat", sans-serif; font-size: 16px; line-height: 1.55; color: rgb(241 237 228 / 84%); }
@media (max-width: 767px){ .pePriceFactors{ grid-template-columns: 1fr; } }
:where(html[data-theme="light"]) .pePriceFrom{ color: #000; }
:where(html[data-theme="light"]) .pePriceFactors{ color: rgb(14 18 27 / 84%); }

/* ---------- boxes: key takeaways, definition ---------- */
.peTakeaways, .peDefine{ padding: clamp(24px, 3.5vw, 48px) 0; }
.peBox{ max-width: 920px; padding: clamp(22px, 3vw, 38px); border: 1px solid rgb(0 117 255 / 40%); border-radius: 18px; background: rgb(0 117 255 / 7%); }
.peBox ul{ margin: 12px 0 0; padding-left: 1.2em; font-family: "Montserrat", sans-serif; font-size: 17px; line-height: 1.6; color: rgb(241 237 228 / 88%); }
.peBox li{ margin-bottom: 6px; }
.peDefineText{ margin: 12px 0 0; font-family: "Montserrat", sans-serif; font-size: clamp(19px, 1.9vw, 25px); font-weight: 600; line-height: 1.45; color: #fff; }
:where(html[data-theme="light"]) .peBox ul{ color: rgb(14 18 27 / 88%); }
:where(html[data-theme="light"]) .peDefineText{ color: #000; }

/* ---------- footer: plan button, fact strip, sitemap columns, fraud note ---------- */
.ftPlanBtn{ display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 100px; background: var(--m-blue, #0b5fd9); color: #fff !important; font-family: "Montserrat", sans-serif; font-size: 14px; font-weight: 700; text-decoration: none; }
.ftFacts{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; list-style: none; margin: 36px 0 0; padding: 26px 0 0; border-top: 1px solid rgb(255 255 255 / 10%); }
.ftFacts b{ display: block; font-family: "Archivo", "Montserrat", sans-serif; font-size: clamp(26px, 2.6vw, 38px); font-weight: 800; color: #fff; line-height: 1; }
.ftFacts span{ display: block; margin-top: 6px; font-size: 13px; line-height: 1.4; color: #9a9a9a; }
.ftSitemap{ padding: 56px 0 10px; border-top: 1px solid rgb(255 255 255 / 8%); }
.ftSiteGrid{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 28px; }
.ftSiteTitle{ margin: 0 0 16px; font-family: "Space Mono", monospace; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--m-blue, #0b5fd9); }
.ftSiteCol ul{ list-style: none; margin: 0; padding: 0; }
.ftSiteCol li{ margin-bottom: 10px; }
.ftSiteCol .ftLink{ color: #bdbdbd; font-size: 14px; text-decoration: none; }
.ftSiteCol .ftLink:hover{ color: #fff; }
.ftSiteCol .ftLink i{ display: none; }
.ftFraud{ margin: 0 0 10px; font-size: 12.5px; color: #8a8a8a; text-align: center; }
@media (max-width: 991px){ .ftSiteGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .ftFacts{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px){ .ftSiteGrid{ gap: 28px 16px; } }
/* phones: the bottom bar carries "Growth plan", so the header keeps logo + call + menu only */
@media (max-width: 767px){ .headerWrap .headerInner .menuWrap .menuCta{ display: none; } .headerWrap .headerInner .headerRight{ gap: 8px; } }
/* core pages (B-261004-09): team people cards, client quotes, open roles, cost-slot extras */
.pePerson{ display: flex; flex-direction: column; gap: 6px; }
.pePersonImg{ display: block; width: 96px; height: 96px; margin-bottom: 10px; border-radius: 50%; object-fit: cover; background: #1a1f2b; }
.pePersonImg.isBlank{ display: flex; align-items: center; justify-content: center; font-family: "Montserrat", sans-serif; font-size: 34px; font-weight: 800; color: var(--m-blue, #0b5fd9); }
.pePerson h3 a{ font-size: inherit; color: inherit; }
.pePersonRole{ margin: 0; font-family: "Space Mono", monospace; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--m-blue, #0b5fd9); }
.pePersonLink{ margin-top: auto; font-size: 14px; font-weight: 700; color: var(--m-blue, #0b5fd9); text-decoration: underline; }
.peQuoteCard{ display: flex; flex-direction: column; gap: 14px; margin: 0; }
.peQuoteCard blockquote{ margin: 0; }
.peQuoteCard blockquote p{ font-size: 18px; line-height: 1.55; }
.peQuoteCard figcaption{ display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.peQuoteCard figcaption span{ opacity: 0.7; }
.pePriceText{ max-width: 860px; margin: 0; font-family: "Montserrat", sans-serif; font-size: 16px; line-height: 1.6; color: rgb(241 237 228 / 84%); }
.pePriceSteps{ list-style: decimal; }
.pePriceCta{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
:where(html[data-theme="light"]) .pePersonImg{ background: #e9e9e6; }
:where(html[data-theme="light"]) .pePriceText{ color: rgb(14 18 27 / 84%); }
/* accessibility (B-261004-23 audit): footer titles are h2 now (same look), skip link, underlined breadcrumbs */
.ftSiteTitle, .ftWrap .ftTitle{ line-height: 1.2; }  /* same as the old h5 */
.pgCrumb a{ text-decoration: underline !important; text-underline-offset: 3px; }  /* reset.css forces none !important */
.peSkip{ position: absolute; left: 12px; top: -60px; z-index: 1000; padding: 10px 16px; border-radius: 8px; background: var(--m-blue, #0b5fd9); color: #fff; font-size: 14px; font-weight: 700; }
.peSkip:focus{ top: 12px; color: #fff; }
/* middle nudge band (voice guide Part 15; B-261004-36): same look as the home page nudge (C1) */
.peNudge{ background: var(--m-blue, #0b5fd9); color: #fff; padding: clamp(28px, 4vw, 56px) 16px; }
.peNudgeIn{ max-width: 1200px; margin: 0 auto; display: flex; gap: 24px 40px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.peNudgeText{ margin: 0; max-width: 640px; font: 400 clamp(16px, 1.3vw, 21px)/1.5 "Montserrat", sans-serif; color: #fff; }
.peNudgeText strong{ display: block; font-weight: 800; font-size: 1.25em; margin-bottom: 4px; }
.peNudgeBtns{ display: flex; gap: 12px; flex-wrap: wrap; }
.peNudgeBtn{ display: inline-flex; align-items: center; height: 52px; padding: 0 24px; border: 1.5px solid #fff; border-radius: 999px; color: #fff; font: 700 13px/1 "Montserrat", sans-serif; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; }
.peNudgeBtn:hover{ color: #fff; }
.peNudgeBtn.solid{ background: #fff; color: #0e121b; }
.peNudgeBtn.solid:hover{ color: #0e121b; }
/* World of Marketing pager (blog hubs, 30 per page) */
.pePager{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 36px; }
.pePager ol{ display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pePager li a, .pePager li span{ display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 10px; border: 1px solid rgb(255 255 255 / 16%); border-radius: 10px; font-size: 15px; font-weight: 700; color: inherit; }
.pePager li span.isOn{ background: var(--m-blue, #0b5fd9); border-color: var(--m-blue, #0b5fd9); color: #fff; }
:where(html[data-theme="light"]) .pePager li a, :where(html[data-theme="light"]) .pePager li span{ border-color: rgb(0 0 0 / 16%); }
.peProofMore{ display: inline-block; margin-top: 14px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--m-blue, #0b5fd9); text-decoration: underline; text-underline-offset: 3px; }
/* free tools (/tools/): form, live result, call-back step */
.peToolBox{ margin-top: 24px; }
.peToolOut{ margin-top: 20px; }
.peToolHint{ margin: 0; font-size: 15px; color: rgb(241 237 228 / 70%); }
.peToolLink code{ display: block; padding: 14px 16px; border-radius: 10px; background: rgb(255 255 255 / 6%); font-size: 15px; word-break: break-all; color: #fff; }
.peToolActions{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.peToolActions button.pgBtn{ cursor: pointer; }
.peToolNext{ margin-top: 32px; padding: clamp(20px, 3vw, 32px); border-radius: 16px; border: 1px solid rgb(0 117 255 / 40%); background: rgb(0 117 255 / 8%); }
.peToolNext p{ margin: 0; font-size: 17px; line-height: 1.5; }
:where(html[data-theme="light"]) .peToolHint{ color: rgb(14 18 27 / 70%); }
:where(html[data-theme="light"]) .peToolLink code{ background: rgb(0 0 0 / 5%); color: #0b0b0b; }
.peToolNext p{ color: #f1ede4; }
:where(html[data-theme="light"]) .peToolNext p{ color: #0b0b0b; }
/* phones: each result row stacks (number, result, meaning) instead of a sideways-scrolling table */
@media (max-width: 575px){
  .peToolOut .peTable thead{ display: none; }
  .peToolOut .peTable, .peToolOut .peTable tbody, .peToolOut .peTable tr, .peToolOut .peTable th, .peToolOut .peTable td{ display: block; width: 100%; }
  .peToolOut .peTable tr{ padding: 14px 16px; border-bottom: 1px solid rgb(255 255 255 / 10%); }
  .peToolOut .peTable th, .peToolOut .peTable td{ padding: 2px 0; border: 0; white-space: normal; min-width: 0; }
  .peToolOut .peTableScroll{ overflow-x: visible; }
  .peToolOut .peTable{ min-width: 0; table-layout: auto; }
  .peToolOut .peTable td b{ font-size: 22px; }
}
/* phone bar "Growth plan": 19px bold = WCAG "large text", so white on var(--m-blue, #0b5fd9) (4.0:1) passes (Boss decision (a), D23 keeps the colour) */
@media (max-width: 767px){ .peBar{ grid-template-columns: 1fr 1fr 1.6fr; } .peBarBtn.isCta{ font-size: 19px; font-weight: 800; } }
/* in-page anchors (e.g. #society-activation, #tool): land below the fixed header instead of under it */
:target{ scroll-margin-top: 120px; }

/* Closing block: a writer's longer line ("We'll show you where the appointments are.") wraps instead of
   pushing the page sideways on phones; short lines look the same (home.css sets .ctaIn nowrap for "LET'S MOVE IT."). */
.ctaWrap .ctaTitle .ctaIn{ white-space: normal; }
.ctaWrap .ctaInner > *{ min-width: 0; }
/* Contact: the international line (user D45) */
.peIntlLine{ margin: 24px 0 0; font-size: 15px; color: rgb(255 255 255 / 70%); }
.peIntlLine a{ color: var(--blue, var(--m-blue, #0b5fd9)); border-bottom: 1px solid currentColor; }
:where(html[data-theme="light"]) .peIntlLine{ color: rgb(0 0 0 / 70%); }

/* ================================================================
   Lighter pages (user D41, 9 Oct 2026): "too heavy ... spacing and font sizes are heavy ... has to be mobile friendly".
   Same brand colours, type families and animations (D23); smaller hero and intro, normal-weight intro, tighter
   sections, body 16-18 px. Phones fold long lists behind "Show all" (assets/js/lighter.js).
   ================================================================ */
.pgHeroTitle{ font-size: clamp(36px, 5.6vw, 112px); line-height: 1; }
.pgHero.isSmall .pgHeroTitle{ font-size: clamp(32px, 4.8vw, 92px); }
.pgHero.isLong .pgHeroTitle{ font-size: clamp(32px, 4.8vw, 96px); }
.pgHero.isXLong .pgHeroTitle{ font-size: clamp(28px, 4vw, 80px); }
.pgHeroLead{ font-size: clamp(16px, 1.15vw, 20px); line-height: 1.55; max-width: 60ch; }
.pgScrub{ font-weight: 500; font-size: clamp(18px, 1.55vw, 27px); line-height: 1.5; letter-spacing: 0; max-width: 62ch; }
.pgScrub b, .pgScrub strong{ font-weight: 700; }
.pgScrub.isBig{ font-size: clamp(20px, 2vw, 34px); }
.pgScrub.isQuote{ font-size: clamp(20px, 2.1vw, 36px); }
.pgScrub.isQuote.isLong{ font-size: clamp(17px, 1.5vw, 26px); }
.pgTitle{ font-size: clamp(26px, 3.4vw, 64px); }
.pgStateTitle{ font-size: clamp(22px, 2vw, 36px); }
.pgText, .pgProse p{ font-size: clamp(16px, 1.1vw, 18px); line-height: 1.6; }
.pgHead{ margin-bottom: clamp(24px, 2.8vw, 48px); }
.pgIntro, .pgState, .pgCards, .pgHow, .pgWins, .pgLinks, .peNudge, .peTakeaways, .peDefine{
    padding-top: clamp(48px, 6vw, 112px); padding-bottom: clamp(48px, 6vw, 112px);
}
.pgCard{ padding: clamp(22px, 2vw, 36px) clamp(20px, 1.8vw, 32px) clamp(26px, 2.2vw, 40px); }
.pgIntroGrid, .pgStateGrid{ gap: clamp(20px, 4vw, 80px); }
@media (max-width: 767px){
    .pgHero{ min-height: 0; }
    .pgHeroTitle{ font-size: 9vw; }
    .pgHero.isSmall .pgHeroTitle, .pgHero.isLong .pgHeroTitle{ font-size: 8.4vw; }
    .pgHero.isXLong .pgHeroTitle{ font-size: 7.6vw; }
    .pgScrub{ font-size: 18px; }
    .pgTitle{ font-size: 26px; }
    .pgIntro, .pgState, .pgCards, .pgHow, .pgWins, .pgLinks, .peNudge, .peTakeaways, .peDefine{ padding-top: 44px; padding-bottom: 44px; }
    .pgHead{ margin-bottom: 20px; }
    .pgGrid{ gap: 12px; }
    .pgCard{ padding: 20px 18px 22px; }
}
/* folded items and the button that opens them (phones only; lighter.js) */
.peFold{ display: none !important; }
.peMoreBtn{
    display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 10px 18px;
    border: 1px solid rgb(255 255 255 / 25%); border-radius: 999px; background: transparent;
    color: #fff; font: 600 14px/1 "Montserrat", sans-serif; letter-spacing: 0.02em; cursor: pointer;
}
.peMoreBtn::after{ content: "+"; color: var(--blue, var(--m-blue, #0b5fd9)); font-size: 16px; }
.peMoreBtn[aria-expanded="true"]::after{ content: "\2212"; }
:where(html[data-theme="light"]) .peMoreBtn{ color: #000; border-color: rgb(0 0 0 / 25%); }
/* footer columns open on tap (phones; lighter.js adds .peFoldHead) */
.ftSiteTitle.peFoldHead{ display: flex; justify-content: space-between; align-items: center; cursor: pointer; padding: 14px 0; margin: 0; border-bottom: 1px solid rgb(255 255 255 / 10%); }
.ftSiteTitle.peFoldHead::after{ content: "+"; color: var(--blue, var(--m-blue, #0b5fd9)); font-size: 20px; line-height: 1; }
.ftSiteTitle.peFoldHead[aria-expanded="true"]::after{ content: "\2212"; }
@media (max-width: 767px){
    .ftSiteGrid{ gap: 0 !important; }
    .ftSiteCol{ margin: 0 !important; }
    .ctaTitle{ font-size: 30px !important; }
    .ctaWrap{ padding-top: 48px; padding-bottom: 48px; }
    .pgWin{ min-height: 0; }
}
@media (max-width: 767px){
    .pgWinPoster{ max-height: 200px; overflow: hidden; }
    .pgWinPoster img{ height: 200px; width: 100%; object-fit: cover; }
    .ftCta{ padding-top: 40px !important; padding-bottom: 32px !important; }
    .ftMail{ font-size: 22px !important; }
    .ftFacts{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
    .ftMain{ padding-top: 32px !important; padding-bottom: 24px !important; }
}
@media (max-width: 767px){
    .pgHero, .pgHero.isSmall{ min-height: 0; padding-top: 112px; padding-bottom: 40px; }
    .pgHero .pgScrollCue{ display: none; }
}
/* intro lead (user D41/D42): two calm sentences in normal weight, no scroll-lit words */
.pgIntroLead{ margin: 0 0 clamp(16px, 1.6vw, 24px); font-family: "Montserrat", sans-serif; font-weight: 500; font-size: clamp(18px, 1.45vw, 25px); line-height: 1.5; color: #fff; max-width: 60ch; }
.pgIntroLead a{ color: var(--blue, var(--m-blue, #0b5fd9)); }
:where(html[data-theme="light"]) .pgIntroLead{ color: #000; }
@media (max-width: 767px){ .pgIntroLead{ font-size: 18px; } }
/* Contact: what happens after you send the form (client's-eye review, B-261009-13) */
.peAfterForm{ margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.peAfterForm li{ position: relative; padding-left: 22px; font-size: 15px; line-height: 1.5; color: rgb(255 255 255 / 75%); }
.peAfterForm li::before{ content: ""; position: absolute; left: 0; top: 0.6em; width: 8px; height: 8px; border-radius: 50%; background: var(--blue, var(--m-blue, #0b5fd9)); }
:where(html[data-theme="light"]) .peAfterForm li{ color: rgb(0 0 0 / 75%); }
/* "What happens after you ask" (user D47) */
.peNext{ padding-top: clamp(48px, 6vw, 112px); padding-bottom: clamp(48px, 6vw, 112px); background: #050505; border-top: 1px solid rgb(255 255 255 / 8%); }
.peNextList{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 28px); }
.peNextStep{ padding: clamp(20px, 2vw, 32px); border: 1px solid rgb(255 255 255 / 12%); border-radius: 16px; }
.peNextStep h3{ margin: 10px 0 8px; font: 700 clamp(18px, 1.4vw, 22px)/1.25 "Montserrat", sans-serif; color: #fff; }
.peNextStep p{ margin: 0; font-size: 16px; line-height: 1.55; color: rgb(255 255 255 / 75%); }
.peNextNum{ font: 700 13px/1 "Space Mono", monospace; color: var(--blue, var(--m-blue, #0b5fd9)); letter-spacing: 0.1em; }
.peNextNote{ margin: 18px 0 0; font-size: 14px; color: rgb(255 255 255 / 60%); }
@media (max-width: 767px){ .peNextList{ grid-template-columns: minmax(0, 1fr); } .peNext{ padding-top: 44px; padding-bottom: 44px; } }
:where(html[data-theme="light"]) .peNext{ background: #f6f6f3; border-top-color: rgb(0 0 0 / 8%); }
:where(html[data-theme="light"]) .peNextStep{ border-color: rgb(0 0 0 / 12%); }
:where(html[data-theme="light"]) .peNextStep h3{ color: #000; }
:where(html[data-theme="light"]) .peNextStep p, :where(html[data-theme="light"]) .peNextNote{ color: rgb(0 0 0 / 70%); }
/* reference box: dense data folded away under a short summary (table "fold": True) */
.peRefSummary{ margin: 0 0 14px; font-size: 16px; line-height: 1.6; max-width: 70ch; }
.peRef{ border: 1px solid rgb(255 255 255 / 15%); border-radius: 14px; padding: 0 16px; }
.peRef > summary{ cursor: pointer; padding: 14px 0; font: 600 15px/1.3 "Montserrat", sans-serif; list-style: none; display: flex; justify-content: space-between; }
.peRef > summary::-webkit-details-marker{ display: none; }
.peRef > summary::after{ content: "+"; color: var(--blue, var(--m-blue, #0b5fd9)); font-size: 18px; }
.peRef[open] > summary::after{ content: "\2212"; }
.peRef[open]{ padding-bottom: 16px; }
:where(html[data-theme="light"]) .peRef{ border-color: rgb(0 0 0 / 15%); }
.peAfterLead{ margin: 16px 0 0; font-size: 14px; color: rgb(255 255 255 / 65%); }
:where(html[data-theme="light"]) .peAfterLead{ color: rgb(0 0 0 / 65%); }
/* /facts/: lists inside table cells, one item per line (compact columns on wide screens) */
.peFactList{ margin: 0; padding: 0; list-style: none; columns: 2 220px; column-gap: 24px; }
.peFactList li{ break-inside: avoid; padding: 2px 0; }
/* "Services for <industry>" cards with platform chips (user D50) */
.peSvcGrid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); }
.peSvcCard{ display: flex; flex-direction: column; gap: 8px; padding: clamp(18px, 1.8vw, 28px); border: 1px solid rgb(255 255 255 / 12%); border-radius: 16px; color: inherit; text-decoration: none; }
a.peSvcCard:hover{ border-color: var(--blue, var(--m-blue, #0b5fd9)); }
.peSvcCard h3{ margin: 0; font: 700 clamp(17px, 1.3vw, 20px)/1.3 "Montserrat", sans-serif; color: #fff; }
.peSvcCard p{ margin: 0; font-size: 16px; line-height: 1.55; color: rgb(255 255 255 / 75%); }
.peSvcIcon{ color: var(--blue, var(--m-blue, #0b5fd9)); font-size: 22px; min-height: 22px; }
.pePlats{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 8px; }
.pePlat{ display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid rgb(255 255 255 / 18%); border-radius: 999px; font-size: 13px; color: rgb(255 255 255 / 85%); }
.pePlat i{ font-size: 14px; }
@media (max-width: 991px){ .peSvcGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px){
    .peSvcGrid{ display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
    .peSvcCard{ flex: 0 0 82%; scroll-snap-align: start; }
}
:where(html[data-theme="light"]) .peSvcCard{ border-color: rgb(0 0 0 / 12%); }
:where(html[data-theme="light"]) .peSvcCard h3{ color: #000; }
:where(html[data-theme="light"]) .peSvcCard p{ color: rgb(0 0 0 / 72%); }
:where(html[data-theme="light"]) .pePlat{ color: rgb(0 0 0 / 80%); border-color: rgb(0 0 0 / 18%); }
/* D53 writer components: "Go deeper" fold, lesson callout, brand note */
.peDeeper{ padding: 8px 0; }
.peDeeperBox{ border: 1px solid rgb(255 255 255 / 14%); border-radius: 14px; padding: 0 18px; }
.peDeeperBox > summary{ cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 12px; padding: 16px 0;
    font: 700 clamp(16px, 1.2vw, 19px)/1.35 "Montserrat", sans-serif; color: #fff; }
.peDeeperBox > summary::-webkit-details-marker{ display: none; }
.peDeeperBox > summary::after{ content: "+"; color: var(--blue, var(--m-blue, #0b5fd9)); font-size: 22px; line-height: 1; }
.peDeeperBox[open] > summary::after{ content: "\2212"; }
.peDeeperBox[open]{ padding-bottom: 14px; }
.peDeeperList{ margin: 0; padding-left: 20px; } .peDeeperList li{ margin: 4px 0; }
.peLesson{ padding: 8px 0; }
.peLessonBox{ display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-left: 3px solid var(--blue, var(--m-blue, #0b5fd9));
    background: rgb(255 255 255 / 4%); border-radius: 0 12px 12px 0; max-width: 820px; }
.peLessonBox > i{ color: var(--blue, var(--m-blue, #0b5fd9)); font-size: 20px; margin-top: 3px; }
.peLessonText{ margin: 0; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.55; }
.peLessonSrc{ margin: 6px 0 0; font-size: 13px; color: rgb(255 255 255 / 60%); } .peLessonSrc cite{ font-style: italic; }
.peBrandNote{ padding: 6px 0; } .peBrandNote p{ margin: 0; font-size: 13px; line-height: 1.5; color: rgb(255 255 255 / 55%); max-width: 820px; }
:where(html[data-theme="light"]) .peDeeperBox{ border-color: rgb(0 0 0 / 14%); }
:where(html[data-theme="light"]) .peDeeperBox > summary{ color: #000; }
:where(html[data-theme="light"]) .peLessonBox{ background: rgb(0 0 0 / 4%); }
:where(html[data-theme="light"]) .peLessonSrc, :where(html[data-theme="light"]) .peBrandNote p{ color: rgb(0 0 0 / 60%); }
.peDeeperSummary{ margin: 0 0 10px; font-size: 16px; line-height: 1.6; max-width: 70ch; color: rgb(255 255 255 / 80%); }
.peDeeperPart{ margin: 14px 0; } .peDeeperPart h3{ margin: 0 0 6px; font: 700 16px/1.3 "Montserrat", sans-serif; }
.peDeeperSrc{ margin: 4px 0 0; font-size: 13px; color: rgb(255 255 255 / 55%); }
.peDeeperSteps{ margin: 10px 0 0; padding-left: 20px; } .peDeeperSteps li{ margin: 6px 0; } .peDeeperSee{ color: rgb(255 255 255 / 60%); }
:where(html[data-theme="light"]) .peDeeperSummary{ color: rgb(0 0 0 / 75%); }
:where(html[data-theme="light"]) .peDeeperSrc, :where(html[data-theme="light"]) .peDeeperSee{ color: rgb(0 0 0 / 55%); }
/* YouTube references (D54): a thumbnail until tapped */
.peVideoGrid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.peVideo{ margin: 0; }
.peVideoPlay, .peVideoFrame{ position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; border-radius: 14px; overflow: hidden; background: #111; cursor: pointer; }
.peVideoPlay img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.peVideoBtn{ position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%; background: rgb(0 0 0 / 65%); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 22px; }
.peVideo figcaption{ margin-top: 8px; font-size: 15px; line-height: 1.45; } .peVideo figcaption b{ display: block; }
.peVideo figcaption span{ font-size: 13px; color: rgb(255 255 255 / 60%); }
:where(html[data-theme="light"]) .peVideo figcaption span{ color: rgb(0 0 0 / 60%); }
@media (max-width: 767px){ .peVideoGrid{ display: flex; overflow-x: auto; scroll-snap-type: x mandatory; } .peVideo{ flex: 0 0 84%; scroll-snap-align: start; } }
/* hook: one-line invitation (D54) */
.peHook{ padding: 10px 0; }
.peHookLine{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0; padding: 14px 18px; border-radius: 14px;
    background: rgb(0 117 255 / 10%); font-size: 16px; line-height: 1.5; }
.peHookBtn{ display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--blue, var(--m-blue, #0b5fd9));
    color: #fff !important; font: 600 14px/1 "Montserrat", sans-serif; text-decoration: none; white-space: nowrap; }

/* ================================================================
   D50 phone-first (user 2026-10-10): "Content is not readable. Scrolling never ends ... Once the scroll begins,
   should reach the final screen." Phones: 17 px body at 1.6, ~65 characters a line, calmer headings, card lists
   swipe sideways, secondary sections fold (lighter.js), one call to action per screen. Desktop unchanged (D23).
   ================================================================ */
@media (max-width: 767px){
    body{ -webkit-text-size-adjust: 100%; }
    .pgText, .pgProse p, .pgIntroLead, .pgCard p, .peSvcCard p, .peNextStep p, .faqA p, .peTable td, .peTable th{ font-size: 17px; line-height: 1.6; }
    .pgProse, .pgText, .pgIntroLead{ max-width: 65ch; }
    .pgIntroLead{ font-size: 18px; }
    .pgHeroTitle, .pgHero.isSmall .pgHeroTitle, .pgHero.isLong .pgHeroTitle, .pgHero.isXLong .pgHeroTitle{ font-size: 8vw; line-height: 1.05; }
    .pgHeroLead{ font-size: 17px; }
    .pgTitle, .pgStateTitle{ font-size: 23px; line-height: 1.15; }
    .pgCard h3, .peSvcCard h3, .peNextStep h3{ font-size: 18px; }
    .pgIntro, .pgState, .pgCards, .pgHow, .pgWins, .pgLinks, .peNext, .peTakeaways, .peDefine{ padding-top: 36px; padding-bottom: 36px; }
    .pgIntroGrid, .pgStateGrid{ gap: 12px; }
    /* card lists swipe sideways instead of stacking (problems, what's included, why us, industries, cases) */
    .pgCards .pgGrid, .pgWins .pgWinGrid{ display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px;
        padding-bottom: 10px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .pgCards .pgGrid::-webkit-scrollbar, .pgWins .pgWinGrid::-webkit-scrollbar{ display: none; }
    .pgCards .pgGrid > *, .pgWins .pgWinGrid > *{ flex: 0 0 84%; scroll-snap-align: start; min-width: 0; }
    .pgCards .pgGrid::after, .pgWins .pgWinGrid::after{ content: ""; flex: 0 0 1px; }
    /* folded secondary sections: the title is the switch */
    .peSecFold .pgHead, .peSecFold .pgStateSide{ display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; cursor: pointer; margin-bottom: 0; }
    .peSecFold .pgHead::after, .peSecFold .pgStateSide::after{ content: "+"; flex: 0 0 auto; color: var(--blue, var(--m-blue, #0b5fd9)); font: 400 28px/1 "Montserrat", sans-serif; }
    .peSecFold .pgHead[aria-expanded="true"]::after, .peSecFold .pgStateSide[aria-expanded="true"]::after{ content: "\2212"; }
    .peSecFold .pgHead[aria-expanded="true"], .peSecFold .pgStateSide[aria-expanded="true"]{ margin-bottom: 16px; }
    .peSecFold{ padding-top: 22px !important; padding-bottom: 22px !important; border-top: 1px solid rgb(255 255 255 / 8%); }
    .peSecFold .pgText{ display: none; }
    .peSecFold [aria-expanded="true"] .pgText{ display: block; }
    /* one call to action at a time: the phone bar and "what happens next" already carry it */
    .peNudge{ display: none !important; }
    .peProof{ padding-top: 20px; padding-bottom: 20px; }
}
:where(html[data-theme="light"]) .peSecFold{ border-top-color: rgb(0 0 0 / 8%); }
/* reduced motion everywhere: no smooth reveals */
@media (prefers-reduced-motion: reduce){
    *{ scroll-behavior: auto !important; }
}
/* D50 home on phones, once lighter.js has switched off the pinned stories (html.peStill): plain, finished sections */
@media (max-width: 767px){
    html.peStill .bannerWrap{ height: auto; min-height: 88svh; }
    html.peStill .bannerWrap .bannerReveal, html.peStill .bannerWrap .bannerStats{ display: none; } /* the same facts sit in the proof strip */
    html.peStill .bannerWrap .bannerBelt{ visibility: visible; }
    html.peStill .svcWrap{ height: auto; min-height: 0; padding: 40px 0 32px; overflow: visible; }
    html.peStill .svcWrap .svcStage{ position: static; }
    html.peStill .svcWrap .svcVideo{ display: none; }
    html.peStill .svcWrap .svcHead{ position: static; visibility: visible; opacity: 1; transform: none; padding: 0 16px 16px; text-align: left; }
    html.peStill .svcWrap .svcMore{ visibility: visible; opacity: 1; position: static; transform: none; padding: 8px 16px 0; }
    html.peStill .svcWrap .svcGrid{ position: static; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px;
        padding: 0 16px 10px; grid-template-columns: none; scrollbar-width: none; }
    html.peStill .svcWrap .svcGrid::-webkit-scrollbar{ display: none; }
    html.peStill .svcWrap .svcCard{ position: relative; visibility: visible; opacity: 1; transform: none; flex: 0 0 80%; width: auto; height: auto;
        min-height: 0; scroll-snap-align: start; left: auto; top: auto; }
    html.peStill .wwaWrap .wwaCont, html.peStill .wwaWrap .wwaStats{ visibility: visible; opacity: 1; transform: none; }
}
@media (max-width: 767px){
    html.peStill .wwaWrap{ height: auto; min-height: 0; }
    html.peStill .wwaWrap .wwaStage{ position: relative; height: auto; min-height: 0; }
    html.peStill .wwaWrap .wwaVideo{ position: absolute; inset: 0; width: 100%; height: 100%; transform: none; }
    html.peStill .wwaWrap .wwaCont{ position: relative; z-index: 2; inset: auto; padding: 56px 16px 40px; height: auto; }
    html.peStill .wwaWrap .wwaStats{ position: static; grid-template-columns: repeat(2, 1fr); margin-top: 20px; }
}
@media (max-width: 767px){
    /* folded-section headers are a row (title + "+"): let long titles wrap instead of widening the page */
    .peSecFold .pgHead > *, .peSecFold .pgStateSide > *{ min-width: 0; flex: 1 1 auto; }
    .peSecFold .pgTitle, .peSecFold .pgStateTitle{ overflow-wrap: anywhere; }
    .peSecFold .pgHead, .peSecFold .pgStateSide{ flex-wrap: nowrap; }
}

/* ================================================================
   D57 + Boss review (10 Oct): light by default (build.THEME_LIGHT_FIRST), calmer headings, no overlaps
   ================================================================ */
/* H2 and below read in sentence case on every screen; the hero headline keeps its brand capitals */
.pgTitle, .pgStateTitle, .ctaTitle, .pgCard h3, .peSvcCard h3{ text-transform: none; font-family: "Montserrat", sans-serif;
    font-stretch: normal; font-variation-settings: normal; letter-spacing: -0.01em; }
.pgTitle, .ctaTitle{ font-weight: 700; }
/* proof cards: results as plain, readable text */
.pgWinRes small{ font-family: "Montserrat", sans-serif; font-size: 15px; letter-spacing: 0; text-transform: none; line-height: 1.45; }
@media (max-width: 767px){
    /* folded section headers: label above the heading, "+" on the right, nothing side by side */
    .peSecFold .pgHead, .peSecFold .pgStateSide{ display: block; position: relative; padding-right: 40px; }
    .peSecFold .pgHead::after, .peSecFold .pgStateSide::after{ position: absolute; right: 0; bottom: 2px; }
    .peSecFold .pgEyebrow{ display: block; margin-bottom: 6px; }
    /* template hero: text on a clean background, the picture below it */
    .pgHero{ display: flex; flex-direction: column; justify-content: flex-start; }
    .pgHero .pgHeroInner{ order: 1; }
    .pgHero .pgCircle{ order: 2; position: relative; left: auto; top: auto; width: 62vw; height: 62vw; margin: 22px auto 0;
        transform: none !important; opacity: 1 !important; visibility: visible !important; }
    .pgHero .pgCircle img{ border-radius: 50%; }
}
@media (max-width: 767px){
    .peSecFold .pgHead, .peSecFold .pgStateSide{ top: auto !important; }   /* desktop sticky offset must not apply when relative */
}
.pgWins .pgWin .pgWinRes small, .pgWinRes small{ font-family: "Montserrat", sans-serif !important; font-size: 15px !important;
    letter-spacing: 0 !important; text-transform: none !important; line-height: 1.45; }

/* ================================================================
   D57 home directions (preview pages /preview/home-a/ and /preview/home-b/)
   A "Calm premium": generous white space, refined type, quiet colour.  B "Bold editorial": big type, an image band, contrast.
   ================================================================ */
.homeA .pgHero, .homeB .pgHero{ min-height: 0; padding-top: 140px; padding-bottom: 56px; }
.homeA .pgHeroTitle{ font-family: "Montserrat", sans-serif; font-weight: 700; text-transform: none; letter-spacing: -0.02em;
    font-size: clamp(34px, 5vw, 76px); line-height: 1.08; }
.homeA .pgHeroLead{ font-size: clamp(17px, 1.35vw, 21px); max-width: 58ch; }
.homeA .pgHero .pgHeroBtns .pgBtn.ghost{ display: none; }   /* one call to action on the first screen */
.homeA section{ padding-top: clamp(48px, 7vw, 120px); padding-bottom: clamp(48px, 7vw, 120px); }
.homeA .peSvcCard{ border-radius: 20px; }
.homeB .pgHeroTitle{ font-size: clamp(40px, 7vw, 120px); line-height: 0.98; }
.homeB .pgHeroLead{ font-size: clamp(18px, 1.5vw, 23px); max-width: 52ch; font-weight: 500; }
.peBand{ padding: 0 clamp(16px, 4vw, 48px); }
.peBand figure{ margin: 0; position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 21 / 9; }
.peBand img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.peBand figcaption{ position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 22px; color: #fff; font: 600 clamp(16px, 1.4vw, 22px)/1.35 "Montserrat", sans-serif;
    background: linear-gradient(transparent, rgb(0 0 0 / 70%)); }
@media (max-width: 767px){
    .homeA .pgHero, .homeB .pgHero{ padding-top: 104px; padding-bottom: 32px; }
    .homeA .pgHeroTitle{ font-size: 9vw; }
    .homeB .pgHeroTitle{ font-size: 11vw; }
    .peBand figure{ aspect-ratio: 4 / 3; border-radius: 18px; }
    .homeA section, .homeB section{ padding-top: 36px; padding-bottom: 36px; }
}
.peHookLine{ color: #fff; }
:where(html[data-theme="light"]) .peHookLine{ color: #10151c; background: rgb(0 117 255 / 9%); }

/* ================================================================
   Boss review 2 (10 Oct, light screens + home A/B)
   ================================================================ */
/* closing block + FAQ headings: solid sentence case like every other H2 (no outlined caps) */
.ctaWrap .ctaTitle, .ctaWrap .faqTitle{ text-transform: none; font-family: "Montserrat", sans-serif; font-stretch: normal;
    font-variation-settings: normal; font-weight: 700; letter-spacing: -0.01em; }
.ctaWrap .ctaTitle .outline{ color: var(--blue, var(--m-blue, #0b5fd9)); -webkit-text-stroke: 0; text-shadow: none; }
/* "Updated ..." under the hero: readable */
.peByline{ opacity: 1; font-size: 13px; color: rgb(255 255 255 / 82%); }
:where(html[data-theme="light"]) .peByline{ color: #4a505c; }
/* proof cards: the result sits on a solid panel, not on the photo */
.pgWin .pgWinRes{ margin: 0 calc(-0.5 * clamp(18px, 1.6vw, 28px)) calc(-0.5 * clamp(18px, 1.6vw, 28px));
    padding: 12px 14px; border-radius: 12px; background: rgb(8 10 16 / 88%); }
:where(html[data-theme="light"]) .pgWin .pgWinRes{ background: rgb(255 255 255 / 96%); box-shadow: 0 2px 10px rgb(0 0 0 / 12%); }
/* footer facts: numbers were white on the light footer */
:where(html[data-theme="light"]) .ftFacts b{ color: #0e121b; }
:where(html[data-theme="light"]) .ftFacts span{ color: #4a505c; }
/* "See all 12" link under a takeaways box */
.peBoxMore{ margin: 14px 0 0; font-weight: 700; }
.peBoxMore a{ color: var(--blue, var(--m-blue, #0b5fd9)); }
/* D60 brand basics checklist */
.peCheckGrid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(14px, 2vw, 28px); }
.peCheckGroup summary{ display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 10px; list-style: none; cursor: pointer; }
.peCheckGroup summary::-webkit-details-marker{ display: none; }
.peCheckGroup summary::after{ content: "\2212"; font: 700 18px/1 "Montserrat", sans-serif; color: var(--blue, var(--m-blue, #0b5fd9)); }
.peCheckGroup:not([open]) summary::after{ content: "+"; }
.peCheckGroup h3{ margin: 0; flex: 1 1 auto; font: 700 17px/1.3 "Montserrat", sans-serif; }
.peCheckCount{ font-size: 13px; opacity: 0.7; white-space: nowrap; }
.peTick{ flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: -2px -4px 0 -6px;
    padding: 0; border: 0; border-radius: 50%; background: none; color: var(--blue, var(--m-blue, #0b5fd9)); font-size: 18px; cursor: pointer; }
.peTick:focus-visible{ outline: 2px solid var(--blue, var(--m-blue, #0b5fd9)); outline-offset: 1px; }
.peCheckGroup li.isDone > span > a, .peCheckGroup li.isDone > span{ opacity: 0.75; }
.peCheckTools{ margin: 18px 0 0; }
.peCheckPrint{ display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: 1px solid currentColor;
    background: none; color: var(--blue, var(--m-blue, #0b5fd9)); font: 600 14px/1 "Montserrat", sans-serif; cursor: pointer; }
.peCheckGroup ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.peCheckGroup li{ display: flex; gap: 10px; align-items: flex-start; font-size: 16px; line-height: 1.5; }
.peCheckGroup li > i{ color: var(--blue, var(--m-blue, #0b5fd9)); margin-top: 4px; }
.peCheckGroup li a{ color: inherit; border-bottom: 1px solid rgb(0 117 255 / 50%); }
.peCheckNote{ display: block; font-size: 13px; color: rgb(255 255 255 / 60%); }
:where(html[data-theme="light"]) .peCheckNote{ color: rgb(0 0 0 / 60%); }
@media (max-width: 767px){
    .peCheckGroup{ padding: 12px 0; border-top: 1px solid rgb(128 128 128 / 25%); }
    .peCheckGroup li{ font-size: 15px; }
    .peCheckNote{ font-size: 12.5px; }
}
/* print: black on white, empty boxes to tick on paper (ticked ones print ticked); the button prints only the checklist */
@media print{
    .peCheck{ color: #000 !important; background: #fff !important; padding: 0 !important; }
    .peCheck .pgTitle, .peCheck .pgEyebrow, .peCheck p, .peCheck a, .peCheckGroup h3{ color: #000 !important; }
    .peCheck a{ border: 0 !important; text-decoration: none !important; }
    .peCheckGroup{ break-inside: avoid; }
    .peCheckGroup summary::after, .peCheckCount, .peCheckTools, .peTick i, .peCheckGroup li > i{ display: none !important; }
    .peTick{ width: 14px; height: 14px; margin: 4px 0 0; border: 1.5px solid #000 !important; border-radius: 3px; font-size: 11px; }
    .peCheckGroup li.isDone .peTick::after{ content: "\2713"; line-height: 1; }
    .peCheckNote{ color: #444 !important; }
    html.pePrintCheck, html.pePrintCheck body{ background: #fff !important; }
    html.pePrintCheck body *{ visibility: hidden !important; }
    html.pePrintCheck .peCheck.isPrinting, html.pePrintCheck .peCheck.isPrinting *{ visibility: visible !important; }
    html.pePrintCheck .peCheck.isPrinting{ position: absolute; left: 0; top: 0; width: 100%; }
    html.pePrintCheck .peCheck.isPrinting .peCheckTools{ display: none !important; }
}
/* footer facts: the numbers were white on the light footer */
:where(html[data-theme="light"]) .ftFacts{ border-top-color: rgb(0 0 0 / 10%); }
:where(html[data-theme="light"]) .ftFacts b{ color: #0e121b; }
:where(html[data-theme="light"]) .ftFacts span{ color: #4a505c; }
/* light mode: inline links inside text read as links (blue underline), not as plain words */
:where(html[data-theme="light"]) :is(p, li, td, th, dd) > a:not([class]){ text-decoration: underline; text-decoration-color: rgb(0 117 255 / 55%); text-underline-offset: 2px; }
/* D61 home pictures: real work at its own shape, caption + case link below the picture */
.peBand.isOwn figure{ margin: 0 auto; border-radius: 18px; overflow: visible; }
.peBand.isOwn img{ border-radius: 18px; height: auto; aspect-ratio: inherit; }
.peBand.isOwn figcaption{ position: static; padding: 12px 2px 0; background: none; color: inherit; font: 500 15px/1.5 "Montserrat", sans-serif; }
.peBand.isOwn figcaption a{ color: var(--blue, var(--m-blue, #0b5fd9)); font-weight: 700; white-space: nowrap; }
.homeA .peBand{ padding-top: clamp(20px, 3vw, 40px); padding-bottom: clamp(20px, 3vw, 40px); }
@media (min-width: 768px){ .homeA .peVideoGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 1040px; } }
/* D63 case template: tag chips + work gallery */
.peTags{ padding: 8px 0 0; }
.peTagRow{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 14px; }
.peTagRow b{ min-width: 82px; font-weight: 700; }
.peTag{ display: inline-block; padding: 5px 12px; border-radius: 999px; border: 1px solid rgb(0 117 255 / 45%); color: inherit; text-decoration: none; }
.peGalGrid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.peGalItem{ margin: 0; }
.peGalItem img{ width: 100%; height: auto; border-radius: 14px; display: block; }
.peGalItem figcaption{ margin-top: 8px; font-size: 14px; line-height: 1.45; }
/* glossary terms: related cards are a plain list, no "01" counter (04/01, 11 Oct) */
.glossaryTermPage .pgRow > i{ display: none; }

/* ================================================================
   D70/D71 navigation mock (branch build/d70-nav; not on staging until the user's final yes)
   ================================================================ */
.headerWrap .headerInner .menuWrap > ul > li .subMenu.peMega.isSvc{ width: min(1080px, calc(100vw - 80px)); }
.peMega .megaPopular{ grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 2px 14px 14px; margin-bottom: 6px;
    border-bottom: 1px solid rgb(255 255 255 / 10%); }
.peMega .megaPopHead{ font-family: "Space Mono", monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--m-blue, #0b5fd9); margin-right: 6px; }
.peMega .megaPopular ul{ display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.headerWrap .headerInner .menuWrap > ul > li .subMenu.peMega .megaPopular li a{ display: inline-block; padding: 6px 12px; border-radius: 999px;
    border: 1px solid rgb(0 117 255 / 40%); font-size: 12px; }
.headerWrap .headerInner .menuWrap > ul > li .subMenu.peMega.isInd,
.headerWrap .headerInner .menuWrap > ul > li .subMenu.peMega.isLoc{ width: min(620px, calc(100vw - 80px)); grid-template-columns: 1fr; }
.peMega .megaAll{ margin: 6px 14px 4px; }
.peMega .megaAll a{ color: var(--m-blue, #0b5fd9) !important; font-weight: 700; padding: 0 !important; }
:where(html[data-theme="light"]) .peMega .megaPopular{ border-bottom-color: rgb(0 0 0 / 10%); }
/* call + WhatsApp icons inside the menu bar, before the one button (desktop); next to the menu button on phones */
.peNavIcon{ display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px;
    border: 1px solid rgb(255 255 255 / 14%); color: #f1ede4; font-size: 15px; text-decoration: none; }
.peNavIcon.isWa, .peHeadCall.isWa{ color: #25d366 !important; }
:where(html[data-theme="light"]) .peNavIcon{ border-color: rgb(0 0 0 / 12%); color: #0b0b0b; }
:where(html[data-theme="light"]) .peNavIcon.isWa, :where(html[data-theme="light"]) .peHeadCall.isWa{ color: #128c4b !important; }
.peHeadCall i{ font-size: 16px; }
@media (max-width: 991px){ .peNavIcon{ display: none; } }
/* phone menu */
.peMobileNav .peMobPop{ display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px !important; }
.peMobileNav .peMobPop li a{ display: inline-block; padding: 7px 12px !important; border-radius: 999px; border: 1px solid rgb(0 117 255 / 40%); }
.peMobileNav details.peMobSub{ border-bottom: 0; margin-left: 4px; }
.peMobileNav details.peMobSub > summary{ font-size: 16px; padding-top: 10px; padding-bottom: 10px; min-height: 48px; }
.peMobileNav .peMobGrid{ display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
.peMobileNav .peMobAll a{ color: var(--m-blue, #0b5fd9) !important; font-weight: 700; }
/* footer: five columns */
.ftSiteGrid.isFive{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 991px){ .ftSiteGrid.isFive{ grid-template-columns: 1fr 1fr; } }
.headerWrap .headerInner .menuWrap > ul > li > a{ white-space: nowrap; }
@media (min-width: 992px) and (max-width: 1365px){ .headerWrap .headerInner .menuWrap > ul{ gap: 18px; } .headerWrap .headerInner .menuWrap .menuCta{ padding: 0 18px; letter-spacing: 0.06em; } }
.peMobileNav details.peMobSub:not([open]) > summary::after{ content: "+"; }
.peMobileNav details.peMobSub[open] > summary::after{ content: "\2212"; }
/* light mode: footer sitemap links were pale grey on white */
:where(html[data-theme="light"]) .ftSiteCol .ftLink{ color: #3d4250; }
:where(html[data-theme="light"]) .ftSiteCol .ftLink:hover{ color: var(--m-blue, #0b5fd9); }
@media (max-width: 767px){ .ftSiteGrid.isFive{ grid-template-columns: 1fr; } }
/* D75 bylines: author link + the advice note on legal/tax pages */
.peByline a[rel="author"], .peByline a{ color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.peAdviceNote{ margin: 10px auto 0; max-width: 60ch; font-size: 13px; line-height: 1.5; opacity: 0.85; text-align: center; }

/* ---------- D195 item 4: "Free plan" bottom sheet (phones; built by growth.js) ---------- */
.peSheet{ position: fixed; inset: 0; z-index: 1200; font-family: var(--m-font, "Plus Jakarta Sans", system-ui, sans-serif); }
.peSheet[hidden]{ display: none; }
html.peSheetOn, html.peSheetOn body{ overflow: hidden; }
.peSheetBack{ position: absolute; inset: 0; background: rgb(16 24 40 / 46%); opacity: 0; transition: opacity 0.24s ease; }
.peSheetPanel{ position: absolute; left: 0; right: 0; bottom: 0; max-height: 92vh; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain;
    background: #fff; color: var(--m-ink, #1b2333); border-radius: 22px 22px 0 0; box-shadow: 0 -12px 40px rgb(16 24 40 / 18%);
    padding: 6px 18px calc(20px + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform 0.26s cubic-bezier(.2, .8, .2, 1); }
.peSheet.isIn .peSheetBack{ opacity: 1; }
.peSheet.isIn .peSheetPanel{ transform: translateY(0); }
.peSheetGrip{ display: flex; justify-content: center; padding: 6px 0 10px; cursor: grab; }
.peSheetGrip span{ width: 40px; height: 4px; border-radius: 4px; background: var(--m-line, #e3e8f0); }
.peSheet .peSheetX{ position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--m-surface, #f5f7fb);
    color: var(--m-ink-2, #46506a); font: 400 26px/1 var(--m-font, sans-serif); cursor: pointer; }
.peSheet .peSheetTitle{ margin: 4px 48px 6px 0 !important; font: 800 22px/1.2 var(--m-font, sans-serif) !important; letter-spacing: -0.01em !important;
    color: var(--m-ink, #1b2333) !important; text-transform: none !important; outline: none; }
.peSheet .peSheetSub{ margin: 0 0 16px !important; font: 500 15px/1.5 var(--m-font, sans-serif) !important; color: var(--m-ink-2, #46506a) !important; }
.peSheet .peSheetForm{ display: grid; gap: 12px; margin: 0; padding: 0; background: none; border: 0; }
.peSheet .peSheetForm label{ display: grid !important; gap: 6px; margin: 0 !important; font: 600 14px/1.3 var(--m-font, sans-serif) !important;
    letter-spacing: normal !important; text-transform: none !important; color: var(--m-ink-2, #46506a) !important; }
.peSheet .peSheetForm label[hidden], .peSheet .peSheetChip[hidden], .peSheet .peSheetAdd[hidden]{ display: none !important; }
.peSheet .peSheetForm input:not([type=hidden]), .peSheet .peSheetForm select{ width: 100%; height: 50px; margin: 0; padding: 0 14px; box-sizing: border-box;
    border: 1px solid var(--m-line, #e3e8f0) !important; border-radius: 12px !important; background: var(--m-surface, #f5f7fb) !important;
    font: 500 16px var(--m-font, sans-serif) !important; color: var(--m-ink, #1b2333) !important; -webkit-appearance: none; appearance: none; }
.peSheet .peSheetForm select{ background-image: linear-gradient(45deg, transparent 50%, #46506a 50%), linear-gradient(135deg, #46506a 50%, transparent 50%) !important;
    background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px !important; background-size: 6px 6px !important; background-repeat: no-repeat !important; padding-right: 36px; }
.peSheet .peSheetForm input:focus, .peSheet .peSheetForm select:focus{ outline: 2px solid var(--m-blue, #0b5fd9); outline-offset: 1px; background-color: #fff !important; }
.peSheet .peSheetForm input.isError{ border-color: #c62828 !important; outline: 2px solid #c62828; outline-offset: 1px; }
.peSheet .peSheetHint{ display: none; font: 500 13px/1.4 var(--m-font, sans-serif); color: #b3261e; }
.peSheet input.isError + .peSheetHint{ display: block; }
.peSheet .peSheetAdd, .peSheet .peSheetChange{ justify-self: start; padding: 4px 0; border: 0; background: none; font: 600 14px var(--m-font, sans-serif);
    color: var(--m-blue, #0b5fd9); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.peSheet .peSheetChip{ display: flex; align-items: center; gap: 10px; margin: 0 !important; font: 600 14px var(--m-font, sans-serif) !important; }
.peSheet .peSheetChip span{ padding: 7px 12px; border-radius: 999px; background: var(--m-blue-soft, #e5f0ff); color: var(--m-ink, #1b2333); }
.peSheet .peSheetChip b{ color: var(--m-blue, #0b5fd9); }
.peSheet .peSheetGo{ width: 100%; min-height: 52px; justify-content: center; margin-top: 4px; font-size: 17px !important; }
.peSheet .peSheetNote{ margin: 0 !important; font: 500 13px/1.5 var(--m-font, sans-serif) !important; color: var(--m-ink-3, #6b7489) !important; }
.peSheet .peSheetNote a{ color: inherit; text-decoration: underline; }
.peSheet .peFormDone{ padding: 8px 0 12px; }
.peSheet .peFormDone h3{ margin: 0 0 12px !important; font: 800 20px/1.3 var(--m-font, sans-serif) !important; color: var(--m-ink, #1b2333) !important; }
.peSheet .peSheetWa{ display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; border: 1px solid #1ea952; border-radius: 12px;
    font: 700 15px var(--m-font, sans-serif); color: #12813d; text-decoration: none; }
@media (prefers-reduced-motion: reduce){ .peSheetBack, .peSheetPanel{ transition: none; } }
/* D193: a picture band that plays a video after a tap (home) */
.peBand.isVideo figure{ max-width: 860px; margin: 0 auto; aspect-ratio: auto; overflow: visible; border-radius: 0; }
.peBand.isVideo figcaption{ position: static; padding: 10px 2px 0; background: none; color: inherit; font: 500 15px/1.45 var(--m-font, sans-serif); text-shadow: none; }
.peBand.isVideo .peVideoPlay{ border-radius: 18px; }
.peBand.isVideo .peVideoPlay img{ aspect-ratio: 16 / 9; }
/* sheet: policy links read at the same size as the line; the "Done" box has room inside */
.peSheet .peSheetNote a{ font: inherit !important; letter-spacing: inherit !important; }
.peSheet .peFormDone{ padding: 16px 16px 18px !important; border-radius: 14px; }
/* D229: company name and the optional details (service, budget) */
.peSheet .peSheetMore{ display: grid; gap: 12px; }
.peSheet .peSheetMore[hidden]{ display: none !important; }
.peSheet .peSheetOpt{ font-style: normal; font-weight: 500; color: var(--m-ink-3, #6b7489); }
/* D229 "jerks" (iPhone Safari): one fixed panel height that never changes while the form is used (the extra fields and the
   error lines scroll inside it), the panel sits above the keyboard (--peKb from visualViewport), and the page behind is pinned
   by growth.js (body position: fixed), not by overflow: hidden */
html.peSheetOn, html.peSheetOn body{ overflow: visible; }
.peSheet .peSheetPanel{ bottom: var(--peKb, 0px); height: min(640px, calc(var(--peVh, 100dvh) - 32px)); max-height: none; -webkit-overflow-scrolling: touch; }
.peSheetBack{ touch-action: none; }
.peSheet .peSheetHint{ display: block; visibility: hidden; min-height: 18px; }
.peSheet input.isError + .peSheetHint{ visibility: visible; }
/* D254: the form answer in place: a tick, the reference, what happens next */
.peFormDone .peTick{ display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-right: 10px; border-radius: 50%; background: #1ea952; color: #fff; font-size: 16px; vertical-align: -4px; }
.peFormDone .peDoneRef{ margin: 6px 0; font-size: 15px; }
.peFormDone:focus{ outline: 2px solid var(--m-blue, #0b5fd9); outline-offset: 3px; }

/* D175 timed nudge: a small card, fixed (no layout shift), above the phone bar on phones */
.peNudgeToast{ position: fixed; z-index: 95; right: 76px; bottom: 24px; max-width: 360px; display: grid; grid-template-columns: 1fr auto; gap: 10px 12px; align-items: center;
    padding: 14px 14px 14px 16px; border-radius: 16px; background: #fff; color: #172033; border: 1px solid #dfe5ef; box-shadow: 0 12px 32px rgb(16 24 40 / 16%);
    opacity: 0; transform: translateY(8px); transition: opacity 0.25s ease, transform 0.25s ease; }
.peNudgeToast.isIn{ opacity: 1; transform: none; }
.peNudgeToast p{ grid-column: 1 / -1; margin: 0; padding-right: 22px; font-size: 15px; line-height: 1.45; color: #172033; }
.peNudgeGo{ justify-self: start; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: #0b5fd9; color: #fff !important; font-weight: 700; font-size: 15px; }
.peNudgeGo:hover, .peNudgeGo:focus-visible{ background: #0a4fb6; }
.peNudgeX{ position: absolute; top: 6px; right: 6px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: #4a5568; font-size: 22px; line-height: 1; cursor: pointer; }
.peNudgeX:hover, .peNudgeX:focus-visible{ background: #eef2f8; }
@media (max-width: 767px){ .peNudgeToast{ left: 12px; right: 12px; max-width: none; bottom: calc(72px + env(safe-area-inset-bottom)); } }
@media (prefers-reduced-motion: reduce){ .peNudgeToast{ transition: none; transform: none; } }
/* checklist print: the page address and promotedge.com under the list (filled in by growth.js); only in print */
.peCheckPrintFoot{ display: none; }
@media print{
    html.pePrintCheck .peCheck.isPrinting .peCheckPrintFoot{ display: block !important; margin-top: 18px; font-size: 11px; color: #444 !important; }
    html.pePrintCheck .peCheck.isPrinting .peCheckGroup:not([open]) > *:not(summary){ display: block !important; }
}
/* a ticked item (the m3 icon is an SVG): show the tick state */
.peCheckGroup li.isDone .peTick{ color: var(--m-blue, #0b5fd9); }
.peCheckGroup li.isDone .peTick svg{ opacity: 1; }
@media print{ .peTick svg{ display: none !important; } .peTick{ display: inline-flex; align-items: center; justify-content: center; flex: 0 0 14px; } }
/* footer fact line: the Kolkata link reads as part of the sentence (23 Oct, 03b) */
.ftFacts span a{ font: inherit; font-weight: 600; color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ftFacts span a:hover{ color: var(--m-blue, #1452a4); }

/* D310 lead bar, desktop only: fixed under the sticky header (never moves the page), shown after the first screen */
.peDesk{ display: none; }
@media (min-width: 1024px){
    .peDesk{ display: block; position: fixed; left: 0; right: 0; top: var(--pe-desk-top, 72px); z-index: 95; background: rgb(255 255 255 / 97%);
             border-bottom: 1px solid rgb(0 0 0 / 9%); box-shadow: 0 6px 18px rgb(0 0 0 / 6%); transform: translateY(-120%); opacity: 0;
             transition: transform 0.3s ease, opacity 0.3s ease; pointer-events: none; }
    .peDesk.isOn{ transform: none; opacity: 1; pointer-events: auto; }
    .peDesk[hidden]{ display: none; }
    .peDeskIn{ max-width: 1280px; margin: 0 auto; padding: 8px 24px; display: flex; align-items: center; gap: 18px; font-size: 14px; color: #0b0b0b; }
    .peDeskCall{ margin: 0; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
    .peDeskCall span{ color: rgb(0 0 0 / 60%); }
    .peDeskCall a{ font-weight: 700; color: #0b0b0b; text-decoration: none; font-variant-numeric: tabular-nums; }
    .peDeskCopy, .peDeskX{ font: inherit; font-size: 12.5px; background: none; border: 1px solid rgb(0 0 0 / 16%); border-radius: 8px; padding: 3px 9px; cursor: pointer; color: #0b0b0b; }
    .peDeskCopy.isDone{ border-color: #0e7a3c; color: #0e7a3c; }
    .peDeskWa{ color: #0e7a3c; font-weight: 700; text-decoration: none; white-space: nowrap; }
    .peDeskForm{ margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; position: relative; }
    .peDeskForm input{ font: inherit; font-size: 14px; height: 36px; width: 150px; padding: 0 10px; border: 1px solid rgb(0 0 0 / 18%); border-radius: 8px; background: #fff; color: #0b0b0b; }
    .peDeskForm input.isError{ border-color: #c62828; }
    .peDeskForm button{ font: inherit; font-size: 14px; font-weight: 700; height: 36px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--m-blue, #0b5fd9); background: #fff; color: var(--m-blue, #0b5fd9); cursor: pointer; white-space: nowrap; }
    .peDeskForm small{ position: absolute; left: 0; top: 100%; font-size: 11px; color: rgb(0 0 0 / 55%); white-space: nowrap; }
    .peDeskForm small a{ color: inherit; font-size: inherit; }
    .peDesk .peFormDone{ margin-left: auto; font-size: 14px; }
    .peDesk .peFormDone h3{ font-size: 14px; margin: 0; }
    .peDesk .peFormDone p{ display: none; }
    .peDeskPlan{ height: 36px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 8px; background: var(--m-blue, #0b5fd9); color: #fff; font-weight: 700; text-decoration: none; white-space: nowrap; }
    .peDeskX{ border: 0; font-size: 20px; line-height: 1; padding: 2px 6px; color: rgb(0 0 0 / 55%); }
    .peDeskIn{ padding-bottom: 18px; }   /* room for the privacy line under the form */
}
@media (min-width: 1024px) and (max-width: 1239px){ .peDeskCall span, .peDeskWa{ display: none; } .peDeskForm input{ width: 128px; } }
:where(html[data-theme="dark"]) .peDesk{ background: rgb(12 12 12 / 96%); border-bottom-color: rgb(255 255 255 / 10%); }
:where(html[data-theme="dark"]) .peDeskIn, :where(html[data-theme="dark"]) .peDeskCall a, :where(html[data-theme="dark"]) .peDeskCopy{ color: #f1ede4; }
:where(html[data-theme="dark"]) .peDeskForm input{ background: #111; color: #f1ede4; border-color: rgb(255 255 255 / 18%); }

/* D310 "New this week": plain links, newest first; a site-wide navigation block */
.peNew{ padding: 36px 0 40px; border-top: 1px solid rgb(0 0 0 / 8%); }
.peNewIn{ max-width: 1168px; margin: 0 auto; padding: 0 20px; }
.peNewH{ font-size: 18px; font-weight: 700; margin: 0 0 14px; }
.peNewList{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 28px; }
.peNewList a{ display: block; padding: 6px 0; color: var(--m-blue, #0b5fd9); text-decoration: underline; text-decoration-color: rgb(0 0 0 / 25%); text-underline-offset: 3px; line-height: 1.4; }
.peNewList a:hover{ color: var(--m-blue, #0b5fd9); text-decoration-color: currentColor; }
@media (max-width: 767px){ .peNew{ padding: 28px 0 32px; } .peNewList{ grid-template-columns: 1fr; gap: 0; } .peNewList a{ padding: 10px 0; } }
:where(html[data-theme="dark"]) .peNew{ border-top-color: rgb(255 255 255 / 10%); }

/* D353 B: the desktop lead bar, the corner pop-up and the side call-back tab are removed (their code too); nothing to show */
.peDesk, .peNudgeToast, .qcTab, .qcPanel, .qcOverlay{ display: none !important; }

/* Architecture audit 29 Oct #9 (Boss): a card's link is its title only (build.title_links). The title link's ::after covers the
   card, so the whole card still taps; :where() keeps what the old <a> wrapper gave the card (colour, size) at zero weight */
:where(.peStretch){ color: #131313; font-size: 16px; transition: all 0.5s; }
.peStretch{ position: relative; }
.peStretch .peCardLink{ color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-decoration: none !important; transition: none; }
.peStretch .peCardLink::after{ content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
.peStretch a:not(.peCardLink){ position: relative; z-index: 4; }   /* a link in the card's text stays clickable above the card link */
.peStretch .peCardLink:not([href])::after{ content: none; }   /* a card whose page is not released yet: words only */
.peStretch .peCardLink:focus-visible{ outline: none; }
.peStretch:focus-within{ outline: 2px solid var(--m-blue, #0b5fd9); outline-offset: 2px; }
.peSvcCard.peStretch:hover{ border-color: var(--blue, var(--m-blue, #0b5fd9)); }
body.isM3 .pgCard.peStretch:hover{ transform: translateY(-3px); box-shadow: var(--m-shadow-up) !important; }
body.isM3 .pgCard.peStretch:hover .pgCardIcon svg{ transform: rotate(-10deg) scale(1.12); }
@media (prefers-reduced-motion: reduce){ body.isM3 .pgCard.peStretch:hover .pgCardIcon svg{ transform: none; } }
/* CRO audit (Boss 29 Oct, D290): the error in words under a field (growth.js setErr, role="alert") and the phone format hint */
.peErr{ display: block; margin: 2px 0 0; font: 600 13px/1.4 var(--m-font, "Plus Jakarta Sans", system-ui, sans-serif); letter-spacing: normal; text-transform: none; color: #b3261e; }
.peHint{ display: block; margin: 0; font: 500 12px/1.4 var(--m-font, "Plus Jakarta Sans", system-ui, sans-serif); letter-spacing: normal; text-transform: none; color: var(--m-ink-3, #6b7489); }
:where(html[data-theme="dark"]) .peErr{ color: #ff8a80; }
:where(html[data-theme="dark"]) .peHint{ color: rgb(241 237 228 / 62%); }
body:not(.isM3) .pgForm .peErr{ color: #ff8a80; }
body:not(.isM3) .pgForm .peHint{ color: rgb(241 237 228 / 62%); }
.peSheet .peErr, .peSheet .peHint, .m3QuickForm .peErr, .m3QuickForm .peHint{ margin-top: -2px; }
@media (min-width: 1024px){
    .peDeskForm .peHint{ display: none; }
    .peDeskForm .peErr{ position: absolute; left: 0; top: auto; bottom: calc(100% + 4px); padding: 2px 8px; border-radius: 6px; background: #fff; font-size: 12px; white-space: nowrap; box-shadow: 0 2px 8px rgb(0 0 0 / 12%); }
}
/* CRO audit (D290): the sheet at 375 x 812: compact fields, and the send button (with call / WhatsApp) pinned at the bottom of the panel */
.peSheet .peSheetPanel{ scroll-padding-bottom: 130px; padding-bottom: 0; }
.peSheet .peSheetSub{ margin-bottom: 12px !important; font-size: 14px !important; }
.peSheet .peSheetForm, .peSheet .peSheetMore{ gap: 10px; }
.peSheet .peSheetForm label{ gap: 4px; font-size: 13px !important; }
.peSheet .peSheetForm input:not([type=hidden]), .peSheet .peSheetForm select{ height: 46px; }
.peSheet .peSheetForm select{ background-position: calc(100% - 20px) 20px, calc(100% - 14px) 20px !important; }
.peSheet .peSheetFoot{ position: sticky; bottom: 0; z-index: 2; display: grid; gap: 6px; margin: 0 -18px; padding: 10px 18px calc(10px + env(safe-area-inset-bottom));
    background: #fff; box-shadow: 0 -8px 16px -10px rgb(16 24 40 / 30%); }
.peSheet .peSheetFoot .peSheetGo{ margin-top: 0; }
.peSheet .peSheetTalk{ margin: 0 !important; text-align: center; font: 500 14px/1.4 var(--m-font, sans-serif) !important; color: var(--m-ink-2, #46506a) !important; }
.peSheet .peSheetTalk a{ font-weight: 700; color: var(--m-blue, #0b5fd9); text-decoration: underline; text-underline-offset: 3px; }
.peSheet .peSheetNote{ padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
.peSheet .peFormDone{ margin-bottom: 20px; }
/* 03's CRO offer spec (Boss 29 Oct, D290): the no-risk line, the 3-line offer, the sample plan in place, the free-audit lines */
.peRisk{ margin: 8px 0 0 !important; font: 600 13px/1.45 var(--m-font, "Plus Jakarta Sans", system-ui, sans-serif) !important; letter-spacing: normal !important; text-transform: none !important; color: var(--m-ink-2, #46506a); }
.pgHero .peRisk{ margin-top: 10px !important; }
form .peRisk{ margin-top: -4px !important; }
:where(html[data-theme="dark"]) .peRisk, body:not(.isM3) .peRisk{ color: rgb(241 237 228 / 75%); }
.peOffer{ margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 6px; }
.peOffer li{ position: relative; padding-left: 22px; font: 500 15px/1.45 var(--m-font, sans-serif); color: var(--m-ink, #1b2333); }
.peOffer li::before{ content: ""; position: absolute; left: 2px; top: 0.45em; width: 10px; height: 6px; border-left: 2px solid #1ea952; border-bottom: 2px solid #1ea952; transform: rotate(-45deg); }
form .peOffer{ margin: 0; }
.peSample{ margin: 0 0 14px; border: 1px solid var(--m-line, #e3e8f0); border-radius: 12px; background: var(--m-surface, #f5f7fb); }
form .peSample{ margin: 0; }
.peSample > summary{ display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; list-style: none; font: 700 14px/1.3 var(--m-font, sans-serif); color: var(--m-blue, #0b5fd9); }
.peSample > summary::-webkit-details-marker{ display: none; }
.peSampleDoc{ flex: none; width: 28px; height: 36px; border-radius: 4px; background: #fff; border: 1px solid var(--m-line, #e3e8f0);
    background-image: linear-gradient(var(--m-line, #e3e8f0) 2px, transparent 2px); background-size: 100% 6px; background-position: 0 8px; background-clip: content-box; padding: 6px 5px; box-sizing: border-box; }
.peSampleBody{ max-height: 60vh; overflow: auto; padding: 0 14px 14px; font-size: 14px; }
.peSampleDocBody section{ padding: 0 !important; margin: 0 0 12px !important; background: none !important; }
.peSampleDocBody .pgWrap{ padding: 0 !important; max-width: none !important; }
.peAuditGo{ margin: 0 0 4px !important; }
.peAuditGo .pgBtn{ width: 100%; justify-content: center; }
.peAuditLine{ margin: 12px 0 0 !important; font: 500 14px/1.5 var(--m-font, sans-serif) !important; color: var(--m-ink-2, #46506a); }
.peAuditLine a{ color: var(--m-blue, #0b5fd9); text-decoration: underline; text-underline-offset: 3px; }
.peAuditWrap{ padding-top: 0; padding-bottom: 8px; }
/* Boss ruling 2 (29 Oct): the audit-only block on SEO and website pages: one column, the button, one plain "Prefer to talk?" line */
.peAuditBlock .d354TalkGrid{ grid-template-columns: minmax(0, 720px); }
.peAuditOffer{ display: grid; gap: 12px; align-content: start; }
.peAuditOffer .peOffer, .peAuditOffer .peAuditGo{ margin: 0 !important; }
.peAuditOffer .peAuditGo .pgBtn{ width: auto; }
@media (max-width: 767px){ .peAuditOffer .peAuditGo .pgBtn{ width: 100%; } }
.peAuditTalk{ margin: 0 !important; font: 500 15px/1.5 var(--m-font, sans-serif) !important; color: var(--m-ink-2, #46506a); }
.peAuditTalk a{ font-weight: 700; color: var(--m-blue, #0b5fd9); text-decoration: underline; text-underline-offset: 3px; }