/**
* A2P Persona Page — installer prototype v9 (2b visual system), scoped to body.a2p-persona-page.
*
* Hello Elementor caps `body:not([class*=elementor-page-]) .site-main` at 1140px.
* Persona pages unlock full width so `.container` (1440px) matches the prototype.
*/
/*
* Footer Theme Builder: Projects / Articles promo bands + disclaimer.
* UAEL page conditions fail (get_the_ID() = footer doc). Element Cache also makes
* should_render page-conditionals unsafe — always render HTML, hide with CSS.
* Page IDs match former UAEL conditions (Installers 20806 + product pages).
*/
body.a2p-persona-page .projects-section-12,
body.page-id-20806 .projects-section-12,
body.page-id-2847 .projects-section-12,
body.page-id-2858 .projects-section-12,
body.page-id-4791 .projects-section-12,
body.a2p-persona-page .articles-sec-footer,
body.a2p-persona-page .articles-sec.articles-sec-footer,
body.page-id-20806 .articles-sec-footer,
body.page-id-20806 .articles-sec.articles-sec-footer,
body.page-id-2847 .articles-sec-footer,
body.page-id-2847 .articles-sec.articles-sec-footer,
body.page-id-2858 .articles-sec-footer,
body.page-id-2858 .articles-sec.articles-sec-footer {
display: none !important;
}
/* Disclaimer: only Homepage + Installers (former UAEL show-on pages 7 / 20806). */
.elementor-location-footer #disclaimer {
display: none !important;
}
body.home .elementor-location-footer #disclaimer,
body.page-id-7 .elementor-location-footer #disclaimer,
body.page-id-20806 .elementor-location-footer #disclaimer {
display: flex !important;
}
/* Elementor-native persona layout (client-editable widgets) */
body.a2p-persona-page .e-con.a2p-el-page,
body.a2p-persona-page .e-con.a2p-el {
max-width: none;
margin-left: auto;
margin-right: auto;
padding-left: 0;
padding-right: 0;
}
body.a2p-persona-page .e-con.hero,
body.a2p-persona-page .e-con.hero-grid,
body.a2p-persona-page .e-con.hero-copy,
body.a2p-persona-page .e-con.jump {
max-width: none;
padding-left: 0;
padding-right: 0;
}
body.a2p-persona-page .e-con.hero {
--flex-grow: 0;
--min-height: 0px;
flex-grow: 0 !important;
height: auto !important;
min-height: 0 !important;
max-width: none;
padding: 0;
border-bottom: none;
}
body.a2p-persona-page .e-con.hero-grid {
display: grid !important;
max-width: none;
width: 100%;
margin: 0;
padding: 0;
min-height: 0;
}
@media (min-width: 1025px) {
body.a2p-persona-page .e-con.hero-grid {
/* Figma: ~585px copy + ~960px jumps (full-bleed right) */
grid-template-columns: minmax(280px, 585px) minmax(0, 1fr);
padding-left: max(var(--gutter, 24px), calc((100% - 1280px) / 2));
}
}
body.a2p-persona-page .e-con.actions {
flex-direction: row !important;
flex-wrap: wrap;
gap: 16px;
align-items: center;
}
body.a2p-persona-page .a2p-el .elementor-heading-title {
color: var(--ink);
font-family: Roboto, Arial, Helvetica, sans-serif;
}
body.a2p-persona-page .hero .elementor-widget-button .elementor-button {
background: var(--a2p-blue);
color: #fff;
border-radius: 0;
font-weight: 500;
}
body.a2p-persona-page .hero .actions .elementor-widget-button:last-child .elementor-button {
background: transparent;
color: var(--a2p-blue);
padding-left: 0;
}
/* Break out of Hello Elementor’s 1140px .site-main constraint on Persona pages */
body.a2p-persona-page .site-main,
body.page-template-persona .site-main,
body.page-template-page-templatespersona-php .site-main,
body.page-template-page-templates-persona-php .site-main {
max-width: none !important;
width: 100% !important;
margin-inline: 0 !important;
padding-inline: 0 !important;
}
/*
* Cost to Install: keep markup (Elementor #cost / PHP section) but hide on front.
* Toggle via a2p_persona_cost_front_css_hidden() — do not delete client content.
*/
body.a2p-persona-page #cost,
body.a2p-persona-page #cost.e-con.sec.block,
body.a2p-persona-page section#cost.sec {
display: none !important;
}
/* Neutralize Elementor chrome around persona widgets */
body.a2p-persona-page .elementor-section.elementor-section-boxed > .elementor-container,
body.a2p-persona-page .e-con {
max-width: none;
}
body.a2p-persona-page .elementor-widget-a2p-persona-shell-start > .elementor-widget-container,
body.a2p-persona-page .elementor-widget-a2p-persona-shell-end > .elementor-widget-container,
body.a2p-persona-page .elementor-widget-a2p-persona-hero > .elementor-widget-container,
body.a2p-persona-page .elementor-widget-a2p-persona-trust > .elementor-widget-container,
body.a2p-persona-page .elementor-widget-a2p-persona-video > .elementor-widget-container,
body.a2p-persona-page .elementor-widget-a2p-persona-docs > .elementor-widget-container,
body.a2p-persona-page .elementor-widget-a2p-persona-cost > .elementor-widget-container,
body.a2p-persona-page .elementor-widget-a2p-persona-certification > .elementor-widget-container,
body.a2p-persona-page .elementor-widget-a2p-persona-support > .elementor-widget-container,
body.a2p-persona-page .elementor-widget-a2p-persona-faq > .elementor-widget-container,
body.a2p-persona-page .elementor-widget-a2p-persona-cta > .elementor-widget-container {
padding: 0 !important;
margin: 0 !important;
}
body.a2p-persona-page {
--a2p-green: #78bf26;
--a2p-green-ink: #5e9a1c;
--a2p-blue: #0077c8;
--a2p-blue-deep: #005e9e;
--a2p-grey: #58646f;
/* Elementor Site Settings → Global Fonts → Monospace (fallback Roboto Mono). */
--a2p-font-mono: var(--e-global-typography-a2pmono-font-family, "Roboto Mono");
--on-accent: #000;
--bg: #f7f8f9;
--surface: #fff;
--surface-raised: #fff;
--border: #d9dde0;
--border-strong: #c3c9ce;
--ink: #414b54;
--ink-soft: #58646f;
--muted: #758089;
--dark: #2b3238;
--dark-ink: #c8cbce;
--flag: #8a5a12;
--flag-bg: #fff6ec;
--flag-border: #e7b871;
--shadow: rgba(20, 32, 40, 0.12);
--focus: #0077c8;
--container: 1440px;
--gutter: clamp(20px, 5.56vw, 80px);
color: var(--ink);
font-family: "Roboto", Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
background: var(--surface);
}
body.a2p-persona-page *,
body.a2p-persona-page *::before,
body.a2p-persona-page *::after {
box-sizing: border-box;
}
body.a2p-persona-page img,
body.a2p-persona-page svg {
max-width: 100%;
display: block;
}
body.a2p-persona-page a {
color: var(--a2p-blue);
text-decoration: none;
}
body.a2p-persona-page a:hover {
color: #000;
}
/*
* Persona link/icon resets must not paint the global header.
* Otherwise Articles & Papers / Request a Quote arrows inherit --a2p-blue
* via fill:currentColor (visible for logged-out users on /installers/).
*/
body.a2p-persona-page .elementor-location-header a {
color: revert;
/* Keep none — revert restores the UA link underline on CTA chips. */
text-decoration: none;
}
body.a2p-persona-page .elementor-location-header a:hover {
color: revert;
text-decoration: none;
}
body.a2p-persona-page h1,
body.a2p-persona-page h2,
body.a2p-persona-page h3,
body.a2p-persona-page p {
margin: 0;
}
/* Match prototype reset — UA/theme list padding (≈40px) was shrinking grids */
body.a2p-persona-page ul,
body.a2p-persona-page ol {
margin: 0;
padding: 0;
list-style: none;
}
body.a2p-persona-page .container {
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--gutter);
}
/* Buttons — Figma: larger label + trailing icon */
body.a2p-persona-page .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
font-family: "Roboto", sans-serif;
font-weight: 600;
font-size: 16px;
padding: 14px 24px;
min-height: 52px;
border-radius: 0;
text-decoration: none;
border: 2px solid transparent;
cursor: pointer;
}
body.a2p-persona-page .btn-green {
background: var(--a2p-green);
color: #fff;
}
/* S5: match live site — hover is solid black, label stays white */
body.a2p-persona-page .btn-green:hover {
background: #000;
color: #fff;
}
body.a2p-persona-page .btn-blue {
background: var(--a2p-blue);
color: #fff;
}
body.a2p-persona-page .btn-blue:hover {
background: #000;
color: #fff;
}
body.a2p-persona-page .btn-lg {
font-size: 16px;
font-weight: 600;
padding: 16px 24px;
}
body.a2p-persona-page .btn-outline {
border-color: var(--border-strong);
}
body.a2p-persona-page .btn .arw {
font-size: 15px;
line-height: 1;
}
/* Local nav.
The admin bar's margin on html stops position: sticky from holding.
Keep that offset on the body instead, and only on persona pages. */
@media screen {
html:has(body.admin-bar.a2p-persona-page) {
margin-top: 0 !important;
}
body.admin-bar.a2p-persona-page {
margin-top: 32px;
}
}
@media screen and (max-width: 782px) {
body.admin-bar.a2p-persona-page {
margin-top: 46px;
}
}
body.a2p-persona-page nav.local-nav {
position: sticky;
top: var(--header-bottom, 0px);
z-index: 30;
background: var(--surface-raised);
border-bottom: 1px solid var(--border);
/* Flush under global header (body padding matches header bottom edge). */
margin-top: 0;
margin-bottom: 0;
}
/* Persona: keep body offset in sync with real header chrome (see style.php + JS). */
body.a2p-persona-page {
padding-top: 147px !important;
}
body.a2p-persona-page.a2p-utility-hidden {
padding-top: 99px !important;
}
body.admin-bar.a2p-persona-page.a2p-utility-hidden {
/* Admin offset is body margin-top (32/46); keep padding at main-header height only. */
padding-top: 98px !important;
}
/* Sticky local-nav seat when utility collapses. WP puts .admin-bar on body, not html. */
html.a2p-utility-hidden {
--header-bottom: 98px;
}
html:has(body.admin-bar).a2p-utility-hidden {
--header-bottom: 130px;
}
@media screen and (max-width: 782px) {
html:has(body.admin-bar).a2p-utility-hidden {
--header-bottom: 145px;
}
}
/* When utility is gone, pin main header to top (absolute + sticky) so no 48px white band. */
body.a2p-persona-page.a2p-utility-hidden .elementor-location-header .elementor-element-6297004:not(.elementor-sticky__spacer),
body.a2p-persona-page.a2p-utility-hidden .elementor-location-header #main-header-section {
top: 0 !important;
}
body.admin-bar.a2p-persona-page.a2p-utility-hidden .elementor-location-header .elementor-element-6297004:not(.elementor-sticky__spacer),
body.admin-bar.a2p-persona-page.a2p-utility-hidden .elementor-location-header #main-header-section {
top: 32px !important;
}
@media screen and (max-width: 782px) {
body.admin-bar.a2p-persona-page.a2p-utility-hidden .elementor-location-header .elementor-element-6297004:not(.elementor-sticky__spacer),
body.admin-bar.a2p-persona-page.a2p-utility-hidden .elementor-location-header #main-header-section {
top: 46px !important;
}
}
body.a2p-persona-page .local-nav-inner {
display: flex;
align-items: stretch;
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--gutter);
min-height: 52px;
}
body.a2p-persona-page .local-nav-persona {
display: flex;
align-items: stretch;
position: relative;
flex-shrink: 0;
border-right: 1px solid var(--border);
padding-right: 12px;
margin-right: 8px;
}
body.a2p-persona-page .local-nav-persona > button {
background: none;
border: none;
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
font: inherit;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.06em;
color: var(--ink);
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
padding: 0;
min-height: 52px;
height: 100%;
box-sizing: border-box;
white-space: nowrap;
}
body.a2p-persona-page .local-nav-persona > button .current-persona {
color: var(--a2p-blue-deep);
letter-spacing: normal;
}
body.a2p-persona-page .local-nav-persona > button svg {
width: 11px;
height: 11px;
color: var(--a2p-blue-deep);
transition: transform 0.15s ease;
flex-shrink: 0;
margin-left: -3px;
}
body.a2p-persona-page .local-nav-persona > button[aria-expanded="true"] svg {
transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
body.a2p-persona-page .local-nav-persona > button svg {
transition: none;
}
}
body.a2p-persona-page .local-nav-persona.disclosure > button[aria-expanded="true"] + .dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
@media (max-width: 759px) {
body.a2p-persona-page .local-nav-persona {
display: none;
}
}
body.a2p-persona-page .local-nav-scroll {
display: flex;
align-items: stretch;
gap: 4px;
flex: 1;
min-width: 0;
overflow-x: auto;
scrollbar-width: none;
white-space: nowrap;
}
body.a2p-persona-page .local-nav-scroll::-webkit-scrollbar {
display: none;
}
body.a2p-persona-page .local-nav-inner a {
display: inline-flex;
align-items: center;
padding: 1px 14px 0;
min-height: 52px;
height: 100%;
box-sizing: border-box;
font-size: 14px;
font-weight: 500;
line-height: 1.2;
color: var(--ink);
text-decoration: none;
/* Matching top/bottom borders so the 3px active underline does not top-bias the label. */
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
flex-shrink: 0;
}
body.a2p-persona-page .local-nav-inner a:hover {
color: var(--a2p-blue);
}
body.a2p-persona-page .local-nav-scroll a.current {
border-bottom-color: var(--a2p-blue);
color: var(--a2p-blue);
}
/* Persona dropdown (local nav) */
body.a2p-persona-page .local-nav-persona .dropdown {
position: absolute;
top: 100%;
left: 0;
background: var(--surface-raised);
border: 1px solid var(--border);
min-width: 230px;
padding: 8px;
opacity: 0;
visibility: hidden;
box-shadow: 0 12px 28px var(--shadow);
transform: translateY(4px);
transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
z-index: 35;
}
body.a2p-persona-page .local-nav-persona .dd-head {
display: block;
font-family: var(--a2p-font-mono), monospace;
font-size: 14px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink);
padding: 6px 10px 8px;
border-bottom: 1px solid var(--border);
margin-bottom: 4px;
text-align: left;
}
/* Match main-nav Built For: black bold title + regular italic gray subhead */
body.a2p-persona-page .local-nav-persona .dropdown a {
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
gap: 2px;
padding: 9px 10px;
text-decoration: none;
color: #000;
font-size: 16px;
font-weight: 600;
line-height: 1.5;
}
body.a2p-persona-page .local-nav-persona .dropdown a:hover {
background: var(--bg);
color: #000;
}
body.a2p-persona-page .local-nav-persona .dropdown a .sub {
display: block;
font-size: 14px;
font-weight: 400;
font-style: italic;
line-height: 1.4;
color: #666;
text-align: left;
}
body.a2p-persona-page .local-nav-persona .dropdown a:hover .sub {
color: #666;
opacity: 1;
font-style: italic;
font-weight: 400;
}
/* Active audience — match subnav “BUILT FOR:” blue */
body.a2p-persona-page .local-nav-persona .dropdown a.current {
color: var(--a2p-blue);
font-weight: 600;
background: var(--bg);
}
body.a2p-persona-page .local-nav-persona .dropdown a.current .sub {
color: var(--a2p-blue);
opacity: 0.75;
font-style: italic;
font-weight: 400;
}
/* Section frame */
body.a2p-persona-page .sec {
padding: 120px 0;
scroll-margin-top: calc(var(--header-bottom, 0px) + 52px);
}
@media (max-width: 900px) {
body.a2p-persona-page .sec {
padding: 72px 0;
}
}
body.a2p-persona-page .sec--grey {
background: var(--bg);
}
body.a2p-persona-page .sec--dark {
background: var(--dark);
color: #fff;
}
body.a2p-persona-page .sec--dark h2,
body.a2p-persona-page .sec--dark h3 {
color: #fff;
}
body.a2p-persona-page .sec--dark .lede,
body.a2p-persona-page .sec--dark .body,
body.a2p-persona-page .sec--dark .body p {
color: var(--dark-ink);
}
body.a2p-persona-page .sec--dark .eyebrow {
color: var(--dark-ink);
}
body.a2p-persona-page .sec--dark .eyebrow .idx {
color: #fff;
}
body.a2p-persona-page .sec--dark a {
color: #fff;
}
body.a2p-persona-page .sec--dark a:hover {
color: var(--dark-ink);
}
body.a2p-persona-page .block {
display: grid;
/* Prototype: 360 + 80 gap + 840 = 1280 content width inside 1440 container */
grid-template-columns: 360px minmax(0, 840px);
gap: 80px;
align-items: start;
justify-content: space-between;
}
body.a2p-persona-page .block--wide {
/* Prototype: 500 + 80 gap + 700 = 1280 */
grid-template-columns: 500px minmax(0, 700px);
}
@media (max-width: 1100px) {
body.a2p-persona-page .block {
grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
gap: 56px;
justify-content: stretch;
}
body.a2p-persona-page .block--wide {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
}
}
@media (max-width: 1024px) {
body.a2p-persona-page .block,
body.a2p-persona-page .block--wide {
grid-template-columns: minmax(0, 1fr);
gap: 48px;
justify-content: stretch;
}
}
body.a2p-persona-page .eyebrow {
display: block;
font: 500 14px/1.4 var(--a2p-font-mono), monospace;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
}
body.a2p-persona-page .eyebrow .idx {
color: var(--a2p-blue);
margin-right: 10px;
}
body.a2p-persona-page .sec-title {
font-size: clamp(34px, 3.4vw, 48px);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.05;
color: var(--ink);
margin-top: 14px;
text-wrap: balance;
}
body.a2p-persona-page .lede {
font-size: 18px;
line-height: 1.55;
color: var(--ink-soft);
margin-top: 20px;
}
body.a2p-persona-page .body {
font-size: 16px;
line-height: 1.6;
color: var(--ink-soft);
margin-top: 16px;
}
body.a2p-persona-page .body p + p {
margin-top: 14px;
}
body.a2p-persona-page .actions {
display: flex;
flex-wrap: wrap;
gap: 16px 28px;
align-items: center;
margin-top: 32px;
}
body.a2p-persona-page .link {
font-weight: 600;
font-size: 16px;
}
body.a2p-persona-page .cols2 {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 40px;
}
@media (max-width: 760px) {
body.a2p-persona-page .cols2 {
grid-template-columns: 1fr;
gap: 16px;
}
}
body.a2p-persona-page .flag {
color: var(--flag);
}
body.a2p-persona-page .note {
font: 400 12.5px/1.55 var(--a2p-font-mono), monospace;
color: var(--flag);
background: var(--flag-bg);
border: 1px dashed var(--flag-border);
padding: 10px 12px;
margin-top: 20px;
}
/* Hero */
body.a2p-persona-page .hero {
border-bottom: 1px solid var(--border);
}
body.a2p-persona-page .hero-grid {
display: grid;
min-height: 0;
}
@media (min-width: 1025px) {
body.a2p-persona-page .hero-grid {
grid-template-columns: minmax(280px, 585px) minmax(0, 1fr);
/* Taller jump column restored (shorter-jumps height change reverted) */
height: min(76vh, 720px);
max-height: 829px;
}
}
body.a2p-persona-page .hero-copy {
padding: 48px 40px 48px 0;
display: flex;
flex-direction: column;
justify-content: center;
max-width: 585px;
width: 100%;
box-sizing: border-box;
}
body.a2p-persona-page .hero h1 {
/* Match section H2 scale (was capped at 42 / mobile 28). */
font-size: clamp(34px, 3.4vw, 48px);
font-weight: 900;
letter-spacing: -0.04em;
line-height: 1.08;
color: var(--ink);
margin-top: 10px;
}
/* Disclaimer footnote marker on hero claim (links to #disclaimer). */
body.a2p-persona-page .hero h1 .a2p-disclaimer-ref,
body.a2p-persona-page .e-con.hero-copy h1 .a2p-disclaimer-ref {
color: inherit;
text-decoration: none;
margin-left: 0.04em;
}
body.a2p-persona-page .hero h1 .a2p-disclaimer-ref:hover,
body.a2p-persona-page .hero h1 .a2p-disclaimer-ref:focus-visible,
body.a2p-persona-page .e-con.hero-copy h1 .a2p-disclaimer-ref:hover,
body.a2p-persona-page .e-con.hero-copy h1 .a2p-disclaimer-ref:focus-visible {
/*text-decoration: underline;*/
outline: none;
}
body.a2p-persona-page .hero h1 .a2p-disclaimer-ref sup,
body.a2p-persona-page .e-con.hero-copy h1 .a2p-disclaimer-ref sup {
font-size: 0.45em;
font-weight: 700;
line-height: 0;
vertical-align: super;
position: relative;
top: -0.1em;
}
body.a2p-persona-page .hero .lede {
font-size: 18px;
line-height: 1.45;
max-width: 520px;
margin-top: 16px;
}
body.a2p-persona-page .jump {
display: grid;
grid-template-rows: repeat(3, minmax(0, 1fr));
/* I3: border lives on .e-con.jump only — a second border here stopped short of the trust bar */
border-left: none;
height: 100%;
min-height: 0;
}
body.a2p-persona-page .jump a {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 16px;
padding: 20px 40px;
border-bottom: 1px solid var(--border);
color: var(--ink);
box-sizing: border-box;
min-height: 0;
}
body.a2p-persona-page .jump a:last-child {
border-bottom: none;
}
body.a2p-persona-page .jump .idx {
display: none !important;
}
body.a2p-persona-page .jump .jump-label {
display: inline-flex;
align-items: center;
gap: 16px;
min-width: 0;
}
body.a2p-persona-page .jump .t {
display: block;
font-size: clamp(22px, 2vw, 28px);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.15;
margin-top: 0;
}
body.a2p-persona-page .jump .arw {
font-size: 22px;
font-weight: 600;
color: var(--a2p-blue);
flex: none;
display: inline-flex;
align-items: center;
line-height: 1;
}
body.a2p-persona-page .jump .arw .e-font-icon-svg {
font-size: 16px;
height: 0.9em;
width: auto;
}
body.a2p-persona-page .jump a:hover .t {
color: var(--a2p-blue);
}
@media (max-width: 1024px) {
body.a2p-persona-page .hero-grid {
grid-template-columns: 1fr;
min-height: 0;
height: auto;
max-height: none;
}
body.a2p-persona-page .hero-copy {
padding: 72px 0 48px;
}
body.a2p-persona-page .jump {
border-left: none;
border-top: 1px solid var(--border);
height: auto;
}
body.a2p-persona-page .jump a {
padding: 24px 20px;
gap: 12px;
}
body.a2p-persona-page .jump .t {
font-size: 24px;
}
}
/* Trust strip */
body.a2p-persona-page .trust {
background: var(--bg);
border-bottom: 1px solid var(--border);
}
body.a2p-persona-page .trust > .container {
max-width: none;
width: 100%;
padding-left: max(var(--gutter, 24px), calc((100% - 1280px) / 2));
padding-right: max(var(--gutter, 24px), calc((100% - 1280px) / 2));
}
body.a2p-persona-page .trust-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: stretch;
}
body.a2p-persona-page .trust-grid > .trust-cell,
body.a2p-persona-page .trust-grid > div {
padding: 40px 40px;
border-left: 1px solid var(--border);
display: flex;
flex-direction: column;
justify-content: center;
min-height: 112px;
box-sizing: border-box;
}
body.a2p-persona-page .trust-grid > .trust-cell:first-child,
body.a2p-persona-page .trust-grid > div:first-child {
border-left: none;
padding-left: 0;
}
body.a2p-persona-page .trust-grid > .trust-cell:last-child,
body.a2p-persona-page .trust-grid > div:last-child {
padding-right: 0;
}
body.a2p-persona-page .trust .num {
display: block;
font-size: 32px;
font-weight: 900;
letter-spacing: -0.03em;
line-height: 1;
color: var(--ink);
margin-bottom: 8px;
}
body.a2p-persona-page .trust .lead {
display: block;
font-size: 18px;
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.25;
color: var(--ink);
margin-bottom: 6px;
}
body.a2p-persona-page .trust .sub {
display: block;
font-size: 15px;
color: var(--ink-soft);
line-height: 1.4;
}
@media (max-width: 760px) {
body.a2p-persona-page .trust-grid {
grid-template-columns: 1fr;
}
body.a2p-persona-page .trust-grid > .trust-cell,
body.a2p-persona-page .trust-grid > div {
border-left: none;
border-top: 1px solid var(--border);
padding: 24px 0;
min-height: 0;
}
body.a2p-persona-page .trust-grid > .trust-cell:first-child,
body.a2p-persona-page .trust-grid > div:first-child {
border-top: none;
}
}
/* Video */
body.a2p-persona-page .video {
position: relative;
aspect-ratio: 16 / 9;
border-radius: 8px;
overflow: hidden;
background: #1f262b;
}
body.a2p-persona-page .video-poster {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
body.a2p-persona-page .video-embed {
display: none;
position: absolute;
inset: 0;
}
body.a2p-persona-page .video-embed[hidden] {
display: none !important;
}
body.a2p-persona-page .video.is-playing .video-embed {
display: block;
}
body.a2p-persona-page .video.is-playing .video-poster {
display: none;
}
body.a2p-persona-page .video-embed iframe {
width: 100%;
height: 100%;
border: 0;
}
body.a2p-persona-page .play {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
border-radius: 50%;
background: #fff;
color: var(--ink);
display: flex;
align-items: center;
justify-content: center;
border: 0;
cursor: pointer;
padding: 0;
z-index: 2;
}
body.a2p-persona-page .play:hover {
background: var(--bg);
}
body.a2p-persona-page .play[hidden],
body.a2p-persona-page .video.is-playing .play {
display: none !important;
}
body.a2p-persona-page .play:disabled {
opacity: 0.92;
cursor: default;
}
body.a2p-persona-page .play:focus-visible {
outline: 3px solid #fff;
outline-offset: 3px;
}
body.a2p-persona-page .play svg {
width: 26px;
height: 26px;
margin-left: 4px;
}
body.a2p-persona-page .video-meta {
display: flex;
justify-content: space-between;
gap: 12px 24px;
flex-wrap: wrap;
margin-top: 16px;
font: 500 14px/1.5 var(--a2p-font-mono), monospace;
color: var(--dark-ink);
}
body.a2p-persona-page .video-meta span:first-child {
flex: none;
}
body.a2p-persona-page .under {
margin-top: 48px;
color: var(--dark-ink);
font-size: 16px;
line-height: 1.65;
}
/* Figma: two under-note columns sit under the video player (media column). */
body.a2p-persona-page .under.under--video,
body.a2p-persona-page #video .under--video {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
margin-top: 48px;
color: var(--dark-ink, #c8cbce);
font-size: 16px;
line-height: 1.5;
}
body.a2p-persona-page .under--video .under__col > *:first-child {
margin-top: 0;
}
body.a2p-persona-page .under--video .under__col > *:last-child {
margin-bottom: 0;
}
body.a2p-persona-page .under--video .under__col p {
margin: 0 0 12px;
}
body.a2p-persona-page .under--video .under__col p:last-child {
margin-bottom: 0;
}
body.a2p-persona-page .related,
body.a2p-persona-page .e-con.related {
margin-top: 40px;
padding-top: 24px;
border-top: 1px solid var(--border);
}
body.a2p-persona-page .sec--dark .related,
body.a2p-persona-page #video .e-con.related,
body.a2p-persona-page .e-con.sec--dark .e-con.related {
border-top-color: rgba(255, 255, 255, 0.18);
}
/* S4: Related Article — left-aligned, roomy line-height for wraps */
body.a2p-persona-page .related a {
display: inline-block;
margin-top: 8px;
font-size: 18px;
font-weight: 600;
line-height: 1.45;
text-align: left;
max-width: 100%;
}
/* Load tables / docs */
body.a2p-persona-page .filter-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-bottom: 20px;
}
body.a2p-persona-page .filter-label {
font: 500 14px/1 var(--a2p-font-mono), monospace;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
margin-right: 6px;
}
body.a2p-persona-page .chip {
font: 500 14px/1 "Roboto", sans-serif;
background: var(--surface);
border: 1px solid var(--border);
color: var(--ink);
padding: 0 14px;
min-height: 40px;
cursor: pointer;
border-radius: 0;
}
body.a2p-persona-page .chip[aria-pressed="true"] {
background: var(--dark);
border-color: var(--dark);
color: #fff;
}
body.a2p-persona-page .chip:hover:not([aria-pressed="true"]) {
border-color: var(--a2p-blue);
color: var(--a2p-blue);
}
body.a2p-persona-page .chip:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 2px;
}
body.a2p-persona-page .filter-note {
flex-basis: 100%;
font: 400 12px/1.5 var(--a2p-font-mono), monospace;
color: var(--muted);
margin-top: 2px;
}
body.a2p-persona-page .filter-note code {
font: inherit;
}
body.a2p-persona-page .doc-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 16px 24px;
flex-wrap: wrap;
padding-bottom: 12px;
border-bottom: 2px solid var(--ink);
}
body.a2p-persona-page .doc-head .count {
font: 500 13px/1.4 var(--a2p-font-mono), monospace;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
}
body.a2p-persona-page .doc-head .all {
font-size: 16px;
font-weight: 600;
color: var(--a2p-blue);
text-decoration: none;
white-space: nowrap;
}
body.a2p-persona-page .doc-head .all:hover {
color: var(--a2p-blue-deep);
}
body.a2p-persona-page .docs {
list-style: none;
}
body.a2p-persona-page .docs li.is-filtered-out,
body.a2p-persona-page .docs li[hidden] {
display: none;
}
body.a2p-persona-page .docs li {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
gap: 8px 32px;
align-items: baseline;
padding: 20px 0;
border-bottom: 1px solid var(--border);
}
body.a2p-persona-page .docs .name {
font-size: 17px;
line-height: 1.4;
color: var(--ink);
}
body.a2p-persona-page .docs .fmt {
font: 500 13px/1.4 var(--a2p-font-mono), monospace;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--muted);
white-space: nowrap;
}
body.a2p-persona-page .docs .act {
font-size: 16px;
font-weight: 600;
text-align: right;
white-space: nowrap;
}
body.a2p-persona-page .docs li.more {
grid-template-columns: minmax(0, 1fr);
}
body.a2p-persona-page .docs li.more .name {
font-size: 15px;
color: var(--ink-soft);
}
body.a2p-persona-page .docs li.more .name a {
font-weight: 600;
}
body.a2p-persona-page .under--light {
margin-top: 40px;
color: var(--ink-soft);
}
@media (min-width: 1025px) {
body.a2p-persona-page .under--light {
width: 50%;
}
}
/* Cert under note lives inside the steps shortcode (prototype right-column stack).
Hide the duplicate Elementor text widget that the flat grid places in col 3. */
body.a2p-persona-page #certification.e-con.sec.block > .elementor-widget-text-editor:not(.lede) {
display: none !important;
}
@media (max-width: 640px) {
body.a2p-persona-page .docs li {
grid-template-columns: minmax(0, 1fr);
gap: 4px;
}
body.a2p-persona-page .docs .fmt {
white-space: normal;
}
body.a2p-persona-page .docs .act {
text-align: left;
margin-top: 6px;
}
}
/* Cost data slot */
body.a2p-persona-page .data-slot {
background: var(--surface);
border: 1px dashed var(--muted);
border-radius: 8px;
padding: 32px;
}
/* I18: real chart — solid card, not pending stub */
body.a2p-persona-page .data-slot.has-chart {
background: #fff;
border: 1px solid var(--border);
border-style: solid;
padding: 28px 28px 24px;
}
body.a2p-persona-page .data-slot.has-chart h3 {
margin: 0 0 16px;
padding-bottom: 12px;
border-bottom: 2px solid var(--ink);
font: 700 13px/1.3 var(--a2p-font-mono), monospace;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink);
}
body.a2p-persona-page .data-slot.has-chart .chart-image {
margin-top: 0;
max-height: min(420px, 52vw);
width: 100%;
height: auto;
object-fit: contain;
object-position: center top;
background: var(--bg);
border-radius: 4px;
}
body.a2p-persona-page .pill {
display: inline-flex;
align-items: center;
gap: 8px;
font: 500 12px/1 var(--a2p-font-mono), monospace;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--flag);
background: var(--flag-bg);
border: 1px solid var(--flag-border);
padding: 7px 10px;
}
body.a2p-persona-page .pill .dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--flag);
}
body.a2p-persona-page .data-slot h3 {
font-size: 24px;
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.02em;
margin-top: 18px;
color: var(--ink);
}
body.a2p-persona-page .data-slot:not(.has-chart) h3 {
margin-top: 18px;
}
body.a2p-persona-page .data-slot p {
font-size: 15px;
line-height: 1.55;
color: var(--ink-soft);
margin-top: 10px;
}
body.a2p-persona-page .data-slot .chart-image {
display: block;
width: 100%;
height: auto;
margin-top: 28px;
}
body.a2p-persona-page .chart-stub {
margin-top: 28px;
height: 320px;
border-left: 1px solid var(--border-strong);
border-bottom: 1px solid var(--border-strong);
background: repeating-linear-gradient(135deg, var(--bg) 0 8px, transparent 8px 16px);
display: flex;
align-items: center;
justify-content: center;
font: 500 12px/1 var(--a2p-font-mono), monospace;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
}
/* Certification steps */
body.a2p-persona-page .steps {
list-style: none;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
border-top: 2px solid var(--ink);
}
body.a2p-persona-page .steps li {
padding: 28px 28px 0;
border-left: 1px solid var(--border);
}
body.a2p-persona-page .steps li:first-child {
border-left: none;
padding-left: 0;
}
body.a2p-persona-page .steps li:last-child {
padding-right: 0;
}
body.a2p-persona-page .idx-big {
display: block;
font-size: 24px;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.2;
color: var(--a2p-blue);
}
body.a2p-persona-page .steps h3 {
font-size: 20px;
font-weight: 700;
line-height: 1.3;
margin-top: 12px;
color: var(--ink);
}
body.a2p-persona-page .steps p {
font-size: 15px;
line-height: 1.55;
color: var(--ink-soft);
margin-top: 8px;
}
@media (max-width: 760px) {
body.a2p-persona-page .steps {
grid-template-columns: 1fr;
}
body.a2p-persona-page .steps li {
border-left: none;
border-top: 1px solid var(--border);
padding: 24px 0;
}
body.a2p-persona-page .steps li:first-child {
border-top: none;
}
}
/* Support rows */
body.a2p-persona-page .rows {
list-style: none;
border-top: 2px solid var(--ink);
}
body.a2p-persona-page .rows li {
display: grid;
grid-template-columns: 80px minmax(0, 1fr);
padding: 32px 0;
border-bottom: 1px solid var(--border);
}
body.a2p-persona-page .rows h3 {
font-size: 20px;
font-weight: 700;
line-height: 1.3;
color: var(--ink);
}
body.a2p-persona-page .rows p {
font-size: 15.5px;
line-height: 1.55;
color: var(--ink-soft);
margin-top: 8px;
}
@media (max-width: 480px) {
body.a2p-persona-page .rows li {
grid-template-columns: 56px minmax(0, 1fr);
padding: 24px 0;
}
}
body.a2p-persona-page .eng {
display: flex;
gap: 20px;
align-items: center;
margin-top: 32px;
padding-top: 32px;
border-top: 1px solid var(--border);
}
/* Elementor Engineer container sits in the support left column, under the lede. */
body.a2p-persona-page #support.e-con.sec.block > .e-con.eng {
grid-column: 1;
grid-row: 4;
width: 100% !important;
max-width: none;
margin: 32px 0 0;
padding-top: 32px;
border-top: 1px solid var(--border);
align-self: start;
--container-widget-width: 100%;
}
body.a2p-persona-page #support.e-con.sec.block > .elementor-widget-button {
grid-row: 5;
margin-top: 32px !important;
margin-bottom: 0;
}
body.a2p-persona-page #support.e-con.sec.block > .elementor-widget-shortcode {
grid-row: 1 / span 5;
}
/* Name and role stack; phone and email sit on one line like prototype .direct. */
body.a2p-persona-page .eng.e-con,
body.a2p-persona-page .e-con.eng {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap;
align-items: center;
align-content: flex-start;
gap: 4px 20px;
}
body.a2p-persona-page .e-con.eng > .elementor-widget-heading,
body.a2p-persona-page .e-con.eng > .elementor-widget-text-editor {
flex: 1 1 100%;
width: 100% !important;
max-width: none;
}
body.a2p-persona-page .e-con.eng > .elementor-widget-button {
flex: 0 1 auto;
width: auto !important;
max-width: none;
margin: 4px 0 0;
}
body.a2p-persona-page .eng .elementor-widget-button,
body.a2p-persona-page .eng .eng-phone,
body.a2p-persona-page .eng .eng-email {
margin: 0;
}
body.a2p-persona-page .eng .elementor-button-link,
body.a2p-persona-page .eng .elementor-button {
background: none;
color: var(--blue, #1a5fb4);
padding: 0;
font-size: 16px;
font-weight: 600;
box-shadow: none;
border: 0;
min-height: 0;
}
body.a2p-persona-page .eng .elementor-button:hover,
body.a2p-persona-page .eng .elementor-button-link:hover {
background: none;
color: var(--ink, #111);
}
body.a2p-persona-page .eng-photo {
width: 72px;
height: 72px;
flex: none;
border-radius: 50%;
object-fit: cover;
}
body.a2p-persona-page .eng .name {
display: block;
font-size: 20px;
font-weight: 700;
line-height: 1.2;
color: var(--ink);
}
body.a2p-persona-page .eng .role {
display: block;
font-size: 15px;
color: var(--ink-soft);
margin-top: 4px;
}
body.a2p-persona-page .eng .direct {
display: flex;
flex-wrap: wrap;
gap: 6px 20px;
margin-top: 8px;
font-size: 16px;
font-weight: 600;
}
/* FAQ */
body.a2p-persona-page .faq {
border-top: 2px solid var(--ink);
}
body.a2p-persona-page .faq details {
border-bottom: 1px solid var(--border);
}
body.a2p-persona-page .faq summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 24px 0;
cursor: pointer;
list-style: none;
}
body.a2p-persona-page .faq summary::-webkit-details-marker {
display: none;
}
body.a2p-persona-page .faq summary h3 {
font-size: 18px;
font-weight: 700;
line-height: 1.35;
color: var(--ink);
}
body.a2p-persona-page .faq summary:hover h3 {
color: var(--a2p-blue);
}
body.a2p-persona-page .faq .plus {
flex: none;
width: 16px;
height: 16px;
color: var(--ink);
transition: transform 0.2s ease;
}
body.a2p-persona-page .faq details[open] .plus {
transform: rotate(45deg);
}
@media (prefers-reduced-motion: reduce) {
body.a2p-persona-page .faq .plus {
transition: none;
}
}
body.a2p-persona-page .faq .ans {
padding: 0 0 28px;
max-width: none;
width: 100%;
font-size: 16px;
line-height: 1.65;
color: var(--ink-soft);
}
body.a2p-persona-page .faq .ans p {
margin: 0 0 1em;
}
body.a2p-persona-page .faq .ans p:last-child {
margin-bottom: 0;
}
/* Form card */
body.a2p-persona-page .form-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
padding: 40px;
}
@media (max-width: 600px) {
body.a2p-persona-page .form-card {
padding: 28px 22px;
}
}
body.a2p-persona-page .form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px 32px;
}
body.a2p-persona-page .form-grid .full {
grid-column: 1 / -1;
}
@media (max-width: 600px) {
body.a2p-persona-page .form-grid {
grid-template-columns: 1fr;
}
}
body.a2p-persona-page .field label {
display: block;
font: 500 12.5px/1.4 var(--a2p-font-mono), monospace;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 4px;
}
body.a2p-persona-page .field input,
body.a2p-persona-page .field select {
width: 100%;
min-height: 44px;
padding: 10px 0;
border: 0;
border-bottom: 1px solid var(--border-strong);
background: transparent;
font: inherit;
font-size: 16px;
color: var(--ink);
border-radius: 0;
}
body.a2p-persona-page .field select {
appearance: none;
-webkit-appearance: none;
background: url("data:image/svg+xml;utf8,") no-repeat right center;
padding-right: 24px;
}
body.a2p-persona-page .field input::placeholder {
color: var(--muted);
}
body.a2p-persona-page .field input:focus,
body.a2p-persona-page .field select:focus {
outline: none;
border-bottom: 2px solid var(--a2p-blue);
}
body.a2p-persona-page .form-foot {
margin-top: 32px;
display: flex;
flex-direction: column;
gap: 14px;
}
body.a2p-persona-page .form-foot .btn {
width: 100%;
}
body.a2p-persona-page .micro {
font-size: 14px;
line-height: 1.5;
color: var(--ink-soft);
}
body.a2p-persona-page .form-foot .link {
align-self: flex-start;
}
body.a2p-persona-page .tag-note {
margin-top: 28px;
padding-top: 14px;
border-top: 1px dashed var(--border);
font: 400 12px/1.6 var(--a2p-font-mono), monospace;
color: var(--muted);
}
body.a2p-persona-page .tag-note b {
font-weight: 500;
color: var(--ink);
}
body.a2p-persona-page .form-success,
body.a2p-persona-page .form-error {
margin: 0 0 20px;
padding: 14px 16px;
border-radius: 6px;
font-size: 15px;
line-height: 1.45;
}
body.a2p-persona-page .form-success {
background: #eef8e6;
color: #2f5d12;
border: 1px solid #c6e4a8;
}
body.a2p-persona-page .form-error {
background: #fdeeee;
color: #8a1f1f;
border: 1px solid #f0c0c0;
}
body.a2p-persona-page .persona-fallback-form button[type="submit"] {
border: 0;
}
body.a2p-persona-page .persona-gravity-form .gform_wrapper {
margin: 0;
}
body.a2p-persona-page .persona-gravity-form .gform_heading {
display: none;
}
body.a2p-persona-page .persona-gravity-form .gform_fields {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 24px 32px !important;
padding: 0 !important;
margin: 0 !important;
list-style: none;
grid-auto-rows: auto;
}
body.a2p-persona-page .persona-gravity-form .gfield {
padding: 0 !important;
margin: 0 !important;
grid-column: span 1 !important;
width: auto !important;
max-width: none !important;
}
body.a2p-persona-page .persona-gravity-form .gfield.gfield--width-full,
body.a2p-persona-page .persona-gravity-form .gfield--type-textarea,
body.a2p-persona-page .persona-gravity-form .gfield--type-consent,
body.a2p-persona-page .persona-gravity-form .gfield--type-turnstile,
body.a2p-persona-page .persona-gravity-form .gform_footer,
body.a2p-persona-page .persona-gravity-form .gform_page_footer {
grid-column: 1 / -1 !important;
}
body.a2p-persona-page .persona-gravity-form .gfield--type-hidden {
display: none !important;
}
@media (max-width: 640px) {
body.a2p-persona-page .persona-gravity-form .gform_fields {
/* Must beat the desktop 2-col rule which uses !important. */
grid-template-columns: minmax(0, 1fr) !important;
gap: 20px !important;
}
}
body.a2p-persona-page .persona-gravity-form .gfield_label {
font: 500 12.5px/1.4 var(--a2p-font-mono), monospace;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 4px;
}
body.a2p-persona-page .persona-gravity-form .gfield_required {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
body.a2p-persona-page .persona-gravity-form input[type="text"],
body.a2p-persona-page .persona-gravity-form input[type="email"],
body.a2p-persona-page .persona-gravity-form input[type="tel"],
body.a2p-persona-page .persona-gravity-form select,
body.a2p-persona-page .persona-gravity-form textarea {
width: 100%;
min-height: 44px;
padding: 10px 0;
border: 0;
border-bottom: 1px solid var(--border-strong);
background: transparent;
font: inherit;
font-size: 16px;
color: var(--ink);
border-radius: 0;
box-shadow: none;
}
body.a2p-persona-page .persona-gravity-form textarea {
min-height: 96px;
resize: vertical;
line-height: 1.45;
padding: 12px 14px;
border: 1px solid var(--border-strong);
border-bottom: 1px solid var(--border-strong);
background: #fff;
box-sizing: border-box;
}
body.a2p-persona-page .persona-gravity-form textarea:focus {
border: 1px solid var(--a2p-blue);
border-bottom: 1px solid var(--a2p-blue);
outline: none;
}
body.a2p-persona-page .persona-gravity-form select {
appearance: none;
-webkit-appearance: none;
background-color: transparent;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right center;
padding-right: 24px;
}
body.a2p-persona-page .persona-gravity-form input:focus,
body.a2p-persona-page .persona-gravity-form select:focus,
body.a2p-persona-page .persona-gravity-form textarea:focus {
outline: none;
border-bottom: 2px solid var(--a2p-blue);
}
body.a2p-persona-page .persona-gravity-form .ginput_container_consent {
display: flex;
align-items: flex-start;
gap: 10px;
padding-top: 4px;
}
body.a2p-persona-page .persona-gravity-form .ginput_container_consent input[type="checkbox"] {
width: 18px;
height: 18px;
min-height: 0;
margin-top: 2px;
flex: 0 0 auto;
accent-color: var(--a2p-green, #6ba644);
}
body.a2p-persona-page .persona-gravity-form .ginput_container_consent label,
body.a2p-persona-page .persona-gravity-form .gfield_consent_description {
font: 400 14px/1.45 "Roboto", sans-serif;
letter-spacing: 0;
text-transform: none;
color: var(--ink-soft);
}
body.a2p-persona-page .persona-gravity-form .ginput_container_consent a {
color: var(--a2p-blue);
text-decoration: underline;
}
body.a2p-persona-page .persona-gravity-form .gfield--type-consent .gfield_label,
body.a2p-persona-page .persona-gravity-form .gfield--type-turnstile .gfield_label {
display: none;
}
body.a2p-persona-page .persona-gravity-form .gform_footer,
body.a2p-persona-page .persona-gravity-form .gform_page_footer,
body.a2p-persona-page .persona-gravity-form .gform-footer {
margin: 32px 0 0;
padding: 0;
display: flex !important;
flex-direction: column;
align-items: center !important;
justify-content: center !important;
text-align: center;
}
body.a2p-persona-page .persona-gravity-form .gform_button,
body.a2p-persona-page .persona-gravity-form .gform_button.btn-green {
width: auto;
min-width: 0;
margin-left: auto !important;
margin-right: auto !important;
align-self: center !important;
border: 0;
background: var(--a2p-green);
color: var(--on-accent);
font-size: 17px;
font-weight: 600;
padding: 14px 28px;
min-height: 52px;
border-radius: 0;
cursor: pointer;
}
body.a2p-persona-page .form-foot--gf {
margin-top: 14px;
gap: 14px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
body.a2p-persona-page .persona-gravity-form .gform_button:hover,
body.a2p-persona-page .persona-gravity-form .gform_button.btn-green:hover {
background: var(--a2p-green-ink);
color: var(--on-accent);
}
body.a2p-persona-page .form-foot--gf .micro {
margin: 0;
}
body.a2p-persona-page .form-foot--gf .micro p {
margin: 0;
}
body.a2p-persona-page .form-foot--gf .link {
align-self: center;
font-size: 16px;
font-weight: 600;
color: var(--a2p-blue);
}
body.a2p-persona-page .form-foot--gf .link:hover {
color: #000000 !important;
}
/* Elementor CTA no longer keeps sibling microcopy / tables widgets outside the card. */
body.a2p-persona-page #calcs > .elementor-widget-shortcode ~ .elementor-widget-text-editor,
body.a2p-persona-page #calcs > .elementor-widget-shortcode ~ .elementor-widget-button,
body.a2p-persona-page .e-con.sec.block.sec--grey > .elementor-widget-shortcode ~ .elementor-widget-text-editor,
body.a2p-persona-page .e-con.sec.block.sec--grey > .elementor-widget-shortcode ~ .elementor-widget-button {
display: none !important;
}
body.a2p-persona-page .persona-gravity-form .gform_confirmation_message {
font-size: 16px;
line-height: 1.5;
color: var(--ink);
}
/* Elementor widgets wearing the prototype classes */
body.a2p-persona-page .e-con.a2p-el-page {
--display: flex;
gap: 0;
max-width: none;
padding: 0;
}
/* Prototype .block: 360px | 80px gap | 1fr — H2 wraps at full 360, not 320. */
body.a2p-persona-page .e-con.sec.block {
display: grid !important;
grid-template-columns: 360px minmax(0, 1fr);
column-gap: 80px;
row-gap: 0 !important;
--gap: 0px;
align-items: start;
max-width: none;
width: 100%;
margin: 0;
padding: 120px max(var(--gutter), calc((100% - 1280px) / 2));
box-sizing: border-box;
}
/* Support is .block--wide in the prototype (5fr / 7fr). */
body.a2p-persona-page #support.e-con.sec.block {
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}
body.a2p-persona-page .e-con.sec.block > .elementor-widget-heading,
body.a2p-persona-page .e-con.sec.block > .elementor-widget.lede,
body.a2p-persona-page .e-con.sec.block > .elementor-widget-button {
grid-column: 1;
width: 100% !important;
max-width: none;
margin: 0;
--container-widget-width: 100%;
}
body.a2p-persona-page .e-con.sec.block > .elementor-widget-button {
width: auto !important;
max-width: max-content;
margin-top: 32px;
margin-bottom: 0;
--container-widget-width: auto;
}
body.a2p-persona-page .e-con.sec.block > .elementor-widget.lede + .elementor-widget-button {
grid-row: 4;
}
/* Secondary CTA must be its own row — sharing row 4 stacked both buttons on top of each other. */
body.a2p-persona-page .e-con.sec.block > .elementor-widget-button + .elementor-widget-button {
grid-row: 5;
margin-left: 0;
margin-top: 16px !important;
margin-bottom: 0;
justify-self: start;
align-self: start;
width: max-content !important;
max-width: none;
}
body.a2p-persona-page .e-con.sec.block > .elementor-widget-button + .elementor-widget-button .elementor-button {
white-space: nowrap;
}
body.a2p-persona-page .e-con.sec.block > .elementor-widget-shortcode {
grid-column: 2;
grid-row: 1 / span 4;
align-self: start;
width: auto !important;
max-width: none;
margin: 0;
--container-widget-width: 100%;
}
/* Under notes sit in the right column under the shortcode (same row as a pair). */
body.a2p-persona-page .e-con.sec.block > .elementor-widget-text-editor:not(.lede) {
grid-column: 2;
grid-row: auto;
width: auto !important;
max-width: none;
margin: 32px 0 0;
justify-self: stretch;
--container-widget-width: 100%;
}
body.a2p-persona-page .e-con.sec.block > .elementor-widget-shortcode ~ .elementor-widget-text-editor:not(.lede):has(+ .elementor-widget-text-editor:not(.lede):last-child) {
grid-column: 2;
grid-row: 5;
width: calc((100% - 40px) / 2) !important;
justify-self: start;
margin-top: 32px;
align-self: start;
}
body.a2p-persona-page .e-con.sec.block > .elementor-widget-shortcode ~ .elementor-widget-text-editor:not(.lede):last-child {
grid-column: 2;
grid-row: 5;
width: calc((100% - 40px) / 2) !important;
justify-self: end;
margin-top: 32px;
align-self: start;
}
/*
* Cost: left stack (eyebrow → title → lede → related) in column 1 rows 1–4.
* Chart sits column 2 row 1 only — do not span rows or related drops to chart bottom.
*/
body.a2p-persona-page #cost.e-con.sec.block > .e-con.related {
grid-column: 1;
grid-row: 4;
width: 100% !important;
max-width: none;
align-self: start;
margin-top: 0;
--width: 100%;
--container-widget-width: 100%;
}
body.a2p-persona-page #cost.e-con.sec.block > .elementor-widget-shortcode {
grid-column: 2;
/* Client: nudge chart down to title; keep span 4 so left related stays under lede. */
grid-row: 1 / span 4;
align-self: start;
margin-top: 52px;
}
body.a2p-persona-page #cost.e-con.sec.block > .elementor-widget-shortcode ~ .elementor-widget-text-editor:not(.lede):has(+ .elementor-widget-text-editor:not(.lede):last-child),
body.a2p-persona-page #cost.e-con.sec.block > .elementor-widget-shortcode ~ .elementor-widget-text-editor:not(.lede):last-child {
grid-row: 5;
}
/* Video is the first content section: dark field, link instead of a button, notes beside the title. */
body.a2p-persona-page .e-con.a2p-el-page > .e-con.sec.block:nth-child(3) {
background: var(--dark);
color: #fff;
}
body.a2p-persona-page .e-con.a2p-el-page > .e-con.sec.block:nth-child(3) .elementor-heading-title,
body.a2p-persona-page .e-con.a2p-el-page > .e-con.sec.block:nth-child(3) .elementor-widget-button .elementor-button {
color: #fff;
}
body.a2p-persona-page .e-con.a2p-el-page > .e-con.sec.block:nth-child(3) .elementor-widget.lede .elementor-widget-container,
body.a2p-persona-page .e-con.a2p-el-page > .e-con.sec.block:nth-child(3) .elementor-widget-text-editor {
color: var(--dark-ink);
}
/* Video related article: divider ABOVE the eyebrow (prototype .related). */
body.a2p-persona-page #video.e-con.sec.block > .elementor-widget.lede + .elementor-widget.eyebrow,
body.a2p-persona-page .e-con.a2p-el-page > .e-con.sec.block:nth-child(3) > .elementor-widget.lede + .elementor-widget.eyebrow {
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.18);
}
body.a2p-persona-page #video.e-con.sec.block > .elementor-widget-button,
body.a2p-persona-page .e-con.a2p-el-page > .e-con.sec.block:nth-child(3) > .elementor-widget-button {
width: 100% !important;
max-width: 100%;
margin-top: 8px;
padding-top: 0;
border-top: 0;
}
body.a2p-persona-page .elementor-widget-button.video-related-link,
body.a2p-persona-page #video .video-related-link {
margin-top: 16px !important;
}
body.a2p-persona-page .e-con.a2p-el-page > .e-con.sec.block:nth-child(3) > .elementor-widget-button .elementor-button {
background: transparent;
padding-left: 0;
font-size: 18px;
font-weight: 600;
width: 100%;
justify-content: flex-start;
text-align: left;
white-space: normal;
}
body.a2p-persona-page .e-con.a2p-el-page > .e-con.sec.block:nth-child(3) > .elementor-widget-shortcode {
grid-column: 2;
grid-row: 1 / span 5;
align-self: start;
}
/*
* Video under-notes: content now renders inside the video shortcode
* (.under--video). Hide legacy Elementor text-editor under widgets to avoid
* duplicates / wrong left-column placement.
*/
body.a2p-persona-page #video.e-con.sec.block > .elementor-widget-shortcode ~ .elementor-widget-text-editor:not(.lede),
body.a2p-persona-page .e-con.a2p-el-page > .e-con.sec.block:nth-child(3) > .elementor-widget-shortcode ~ .elementor-widget-text-editor:not(.lede) {
display: none !important;
}
/* Keep old pair rules inert (under notes moved into partial-video). */
body.a2p-persona-page #video.e-con.sec.block > .elementor-widget-shortcode ~ .elementor-widget-text-editor:not(.lede) ~ .elementor-widget-text-editor:not(.lede),
body.a2p-persona-page .e-con.a2p-el-page > .e-con.sec.block:nth-child(3) > .elementor-widget-text-editor:not(.lede) ~ .elementor-widget-text-editor:not(.lede) {
display: none !important;
}
/* Legacy I7 quote styles on under text-editors — disabled; testimonial uses .a2p-testimonial. */
body.a2p-persona-page #video.e-con.sec.block > .elementor-widget-text-editor:not(.lede) ~ .elementor-widget-text-editor:not(.lede) .elementor-widget-container,
body.a2p-persona-page .e-con.a2p-el-page > .e-con.sec.block:nth-child(3) > .elementor-widget-text-editor:not(.lede) ~ .elementor-widget-text-editor:not(.lede) .elementor-widget-container {
border-left: 0 !important;
padding-left: 0 !important;
box-shadow: none !important;
}
body.a2p-persona-page #video.e-con.sec.block > .elementor-widget-text-editor:not(.lede) ~ .elementor-widget-text-editor:not(.lede) .elementor-widget-container > p:first-child,
body.a2p-persona-page .e-con.a2p-el-page > .e-con.sec.block:nth-child(3) > .elementor-widget-text-editor:not(.lede) ~ .elementor-widget-text-editor:not(.lede) .elementor-widget-container > p:first-child {
margin: 0;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
color: inherit;
quotes: none;
}
body.a2p-persona-page #video.e-con.sec.block > .elementor-widget-text-editor:not(.lede) ~ .elementor-widget-text-editor:not(.lede) .elementor-widget-container > p:first-child::before,
body.a2p-persona-page .e-con.a2p-el-page > .e-con.sec.block:nth-child(3) > .elementor-widget-text-editor:not(.lede) ~ .elementor-widget-text-editor:not(.lede) .elementor-widget-container > p:first-child::before {
content: none;
}
body.a2p-persona-page #video.e-con.sec.block > .elementor-widget-text-editor:not(.lede) ~ .elementor-widget-text-editor:not(.lede) .elementor-widget-container > p:not(:first-child),
body.a2p-persona-page .e-con.a2p-el-page > .e-con.sec.block:nth-child(3) > .elementor-widget-text-editor:not(.lede) ~ .elementor-widget-text-editor:not(.lede) .elementor-widget-container > p:not(:first-child) {
margin: 0;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
color: inherit;
}
body.a2p-persona-page .e-con.sec--dark .video,
body.a2p-persona-page .e-con.a2p-el-page > .e-con.sec.block:nth-child(3) .video {
background: #1b2126;
}
body.a2p-persona-page .e-con.a2p-el-page > .e-con.sec.block:nth-child(5),
body.a2p-persona-page .e-con.a2p-el-page > .e-con.sec.block:nth-child(7) {
background: var(--bg);
}
body.a2p-persona-page .e-con.sec.block > .elementor-widget-button .elementor-button,
body.a2p-persona-page .a2p-left-intro > .elementor-widget-button:not(.video-related-link) .elementor-button {
background: var(--a2p-blue);
color: #fff;
border-radius: 0;
font-size: 16px;
font-weight: 600;
padding: 16px 24px;
min-height: 52px;
}
body.a2p-persona-page .e-con.sec.block > .elementor-widget-button + .elementor-widget-button .elementor-button,
body.a2p-persona-page .a2p-left-intro > .elementor-widget-button + .elementor-widget-button .elementor-button {
background: transparent;
color: var(--a2p-blue);
padding: 0;
min-height: 0;
font-size: 16px;
font-weight: 600;
white-space: nowrap;
}
body.a2p-persona-page .e-con.sec--grey {
background: var(--bg);
}
body.a2p-persona-page .a2p-el .elementor-widget-container {
margin: 0;
padding: 0;
}
body.a2p-persona-page .elementor-widget.eyebrow .elementor-heading-title {
font: 500 14px/1.4 var(--a2p-font-mono), monospace;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
margin: 0;
}
body.a2p-persona-page .hero .elementor-widget-heading h1.elementor-heading-title {
font-size: clamp(34px, 3.4vw, 48px);
font-weight: 900;
letter-spacing: -0.04em;
line-height: 1.08;
color: var(--ink);
margin: 32px 0 0;
}
body.a2p-persona-page .sec .elementor-widget-heading h2.elementor-heading-title {
font-size: clamp(34px, 3.4vw, 48px);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.05;
color: var(--ink);
margin: 14px 0 0;
text-wrap: balance;
max-width: none;
}
body.a2p-persona-page .elementor-widget.lede .elementor-widget-container {
font-size: 18px;
line-height: 1.55;
color: var(--ink-soft);
margin-top: 20px;
max-width: none;
}
/* S1: rich text — paragraphs/lists must not collapse together */
body.a2p-persona-page .elementor-widget.lede p,
body.a2p-persona-page .elementor-widget-text-editor p,
body.a2p-persona-page .lede p,
body.a2p-persona-page .body p {
margin: 0 0 14px;
}
body.a2p-persona-page .elementor-widget.lede p:last-child,
body.a2p-persona-page .elementor-widget-text-editor p:last-child,
body.a2p-persona-page .lede p:last-child,
body.a2p-persona-page .body p:last-child {
margin-bottom: 0;
}
/* S1: rich-text lists — custom bullets (global reset zeros list-style). */
body.a2p-persona-page .elementor-widget.lede ul,
body.a2p-persona-page .elementor-widget-text-editor ul,
body.a2p-persona-page .lede ul,
body.a2p-persona-page .body ul {
margin: 0 0 14px;
padding-left: 0 !important;
list-style: none !important;
}
body.a2p-persona-page .elementor-widget.lede ol,
body.a2p-persona-page .elementor-widget-text-editor ol,
body.a2p-persona-page .lede ol,
body.a2p-persona-page .body ol {
margin: 0 0 14px;
padding-left: 1.75em !important;
list-style-type: decimal !important;
list-style-position: outside !important;
}
body.a2p-persona-page .elementor-widget.lede ul > li,
body.a2p-persona-page .elementor-widget-text-editor ul > li,
body.a2p-persona-page .lede ul > li,
body.a2p-persona-page .body ul > li {
position: relative;
margin: 0 0 8px;
padding-left: 1.15em;
display: block;
list-style: none !important;
}
body.a2p-persona-page .elementor-widget.lede ul > li::before,
body.a2p-persona-page .elementor-widget-text-editor ul > li::before,
body.a2p-persona-page .lede ul > li::before,
body.a2p-persona-page .body ul > li::before {
content: "•";
position: absolute;
left: 0;
top: 0;
width: 1em;
color: var(--ink);
font-weight: 700;
line-height: inherit;
pointer-events: none;
}
body.a2p-persona-page .elementor-widget.lede ol > li,
body.a2p-persona-page .elementor-widget-text-editor ol > li,
body.a2p-persona-page .lede ol > li,
body.a2p-persona-page .body ol > li {
margin: 0 0 8px;
padding-left: 0.35em;
display: list-item !important;
list-style-type: decimal !important;
list-style-position: outside !important;
}
body.a2p-persona-page .elementor-widget.lede strong,
body.a2p-persona-page .elementor-widget-text-editor strong,
body.a2p-persona-page .lede strong,
body.a2p-persona-page .body strong {
font-weight: 700;
}
body.a2p-persona-page .elementor-widget.lede em,
body.a2p-persona-page .elementor-widget-text-editor em,
body.a2p-persona-page .lede em,
body.a2p-persona-page .body em {
font-style: italic;
}
body.a2p-persona-page .hero .elementor-widget.lede .elementor-widget-container {
font-size: 18px;
line-height: 1.45;
max-width: 520px;
margin-top: 0;
}
body.a2p-persona-page .e-con.hero-copy {
padding: 48px 40px 48px 0 !important;
justify-content: flex-start !important;
gap: 0 !important;
--gap: 0px;
max-width: 585px;
width: 100%;
box-sizing: border-box;
}
/* Keep eyebrow at label size (Elementor uses a DIV.heading-title, not h1). */
body.a2p-persona-page .e-con.hero-copy .elementor-widget.eyebrow .elementor-heading-title {
font: 500 14px/1.4 var(--a2p-font-mono), monospace !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
color: var(--muted) !important;
margin: 0 !important;
}
/* Figma hero: eyebrow→H1 32px; H1→lede 64px; lede→actions 42px */
body.a2p-persona-page .e-con.hero-copy > .elementor-widget-heading:not(.eyebrow) h1.elementor-heading-title,
body.a2p-persona-page .hero .elementor-widget-heading:not(.eyebrow) h1.elementor-heading-title {
margin-top: 32px !important;
}
body.a2p-persona-page .e-con.hero-copy > .elementor-widget.lede {
margin-top: 64px !important;
}
body.a2p-persona-page .e-con.hero-copy .lede p {
margin: 0 0 10px !important;
}
body.a2p-persona-page .e-con.hero-copy .lede ul > li {
margin: 0 0 4px !important;
}
body.a2p-persona-page .e-con.hero-copy .e-con.actions {
margin-top: 42px !important;
}
body.a2p-persona-page .e-con.a2p-el-page > .e-con.a2p-el:not(.sec):not(.hero) {
width: 100%;
max-width: none;
}
body.a2p-persona-page .e-con.a2p-el-page > .e-con.a2p-el:not(.sec):not(.hero) > .elementor-widget-shortcode {
width: 100% !important;
max-width: none;
--container-widget-width: 100%;
}
body.a2p-persona-page .e-con.actions {
--flex-direction: row;
--flex-wrap: wrap;
--align-items: center;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: center !important;
/* S3: inline by default; extra row gap when secondary wraps below */
column-gap: 28px;
row-gap: 20px;
gap: 20px 28px;
margin-top: 32px !important;
margin-bottom: 0;
padding: 0 !important;
width: auto;
max-width: 100%;
}
body.a2p-persona-page .e-con.actions > .elementor-widget {
width: auto !important;
max-width: none;
flex: 0 0 auto !important;
--container-widget-width: auto;
}
body.a2p-persona-page .a2p-el .elementor-button {
border-radius: 0;
font-family: Roboto, Arial, Helvetica, sans-serif;
font-weight: 600;
font-size: 16px;
min-height: 52px;
padding: 14px 24px;
gap: 10px;
}
body.a2p-persona-page .a2p-el .elementor-widget-button:first-child .elementor-button,
body.a2p-persona-page .hero .actions .elementor-widget-button:first-child .elementor-button {
font-size: 17px;
font-weight: 600;
padding: 16px 26px;
min-height: 52px;
}
body.a2p-persona-page .e-con.hero-copy > .elementor-element {
width: auto;
max-width: 100%;
align-items: flex-start;
text-align: left;
margin-bottom: 0;
}
body.a2p-persona-page .e-con.hero-copy > .elementor-widget.lede,
body.a2p-persona-page .e-con.hero-copy > .elementor-widget-heading {
margin-bottom: 0 !important;
}
body.a2p-persona-page .e-con.actions .elementor-widget-button:last-child .elementor-button {
background: transparent;
color: var(--a2p-blue);
padding: 0;
min-height: 0;
font-size: 16px;
font-weight: 600;
}
/* Text links: related article and engineer direct lines are not filled buttons. */
body.a2p-persona-page .e-con.related .elementor-button,
body.a2p-persona-page .e-con.eng .elementor-button,
body.a2p-persona-page .e-con.eng .elementor-button-link,
body.a2p-persona-page .e-con.eng .elementor-widget-button:first-child .elementor-button {
background: transparent;
color: var(--a2p-blue);
padding: 0;
min-height: 0;
border: 0;
border-radius: 0;
box-shadow: none;
font-size: 16px;
font-weight: 600;
line-height: 1.3;
justify-content: flex-start;
}
body.a2p-persona-page .e-con.related .elementor-button {
font-size: 18px;
margin-top: 8px;
line-height: 1.45;
text-align: left;
justify-content: flex-start;
white-space: normal;
max-width: 100%;
}
body.a2p-persona-page .e-con.related .elementor-button:hover,
body.a2p-persona-page .e-con.eng .elementor-button:hover,
body.a2p-persona-page .e-con.eng .elementor-button-link:hover {
background: transparent;
color: #000;
}
body.a2p-persona-page .e-con.jump {
display: flex !important;
flex-direction: column;
grid-template-rows: none;
height: 100% !important;
max-height: 100%;
min-height: 0 !important;
align-self: stretch;
position: relative;
border-left: none;
margin-bottom: 0;
padding-bottom: 0;
/* Kill Elementor container default --padding-top (shows as white gap under local-nav). */
padding-top: 0 !important;
--padding-top: 0px;
--padding-block-start: 0px;
overflow: hidden;
}
body.a2p-persona-page .e-con.jump .elementor-widget-shortcode,
body.a2p-persona-page .e-con.jump .elementor-widget-container,
body.a2p-persona-page .e-con.jump .elementor-shortcode,
body.a2p-persona-page .e-con.jump nav.jump {
flex: 1 1 auto;
height: 100%;
min-height: 0;
max-height: 100%;
border-left: none !important;
}
body.a2p-persona-page .e-con.jump nav.jump {
display: grid;
grid-template-rows: repeat(3, minmax(0, 1fr));
}
body.a2p-persona-page .trust {
max-width: none;
}
/* Elementor layout: stack to the prototype breakpoints.
The desktop rules above pin widgets to a 3-column grid; without these
overrides the right column collapses to a few pixels on tablet/phone. */
@media (max-width: 1100px) {
body.a2p-persona-page .e-con.sec.block {
grid-template-columns: 300px minmax(0, 1fr);
column-gap: 56px;
padding: 120px max(var(--gutter), calc((100% - 1280px) / 2));
}
body.a2p-persona-page #support.e-con.sec.block {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
}
body.a2p-persona-page .e-con.sec.block > .elementor-widget-heading,
body.a2p-persona-page .e-con.sec.block > .elementor-widget.lede,
body.a2p-persona-page .e-con.sec.block > .elementor-widget-button {
max-width: none;
margin-right: 0;
--container-widget-width: 100%;
}
}
@media (max-width: 1024px) {
body.a2p-persona-page .e-con.hero-grid {
grid-template-columns: 1fr !important;
padding: 0 var(--gutter, 24px) !important;
min-height: 0;
height: auto !important;
max-height: none !important;
overflow: visible;
}
body.a2p-persona-page .e-con.hero-copy {
padding: 72px 0 48px;
max-width: none;
}
body.a2p-persona-page .e-con.actions {
flex-wrap: wrap !important;
--flex-wrap: wrap;
}
body.a2p-persona-page .e-con.jump {
border-left: 0;
border-top: 1px solid var(--border);
height: auto !important;
max-height: none;
overflow: visible;
/* Full browser width — break out of hero-grid gutter (beat Elementor min-width:0 shrink). */
width: 100vw !important;
min-width: 100vw !important;
max-width: 100vw !important;
flex: 0 0 auto !important;
flex-shrink: 0 !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
padding-left: 0 !important;
padding-right: 0 !important;
--width: 100vw;
}
body.a2p-persona-page .e-con.jump::before {
display: none;
}
body.a2p-persona-page .e-con.jump nav.jump,
body.a2p-persona-page nav.jump {
grid-template-rows: none;
height: auto;
}
body.a2p-persona-page .e-con.jump .elementor-widget-shortcode,
body.a2p-persona-page .e-con.jump .elementor-widget-container,
body.a2p-persona-page .e-con.jump .elementor-shortcode,
body.a2p-persona-page .e-con.jump nav.jump {
flex: 0 0 auto;
height: auto;
min-height: 0;
}
body.a2p-persona-page .jump a {
padding: 24px 20px;
gap: 16px;
}
body.a2p-persona-page .jump .t {
font-size: 24px;
}
body.a2p-persona-page .e-con.sec.block,
body.a2p-persona-page #support.e-con.sec.block,
body.a2p-persona-page #cost.e-con.sec.block,
body.a2p-persona-page #video.e-con.sec.block,
body.a2p-persona-page #calcs.e-con.sec.block {
grid-template-columns: minmax(0, 1fr) !important;
grid-auto-columns: minmax(0, 1fr);
column-gap: 0;
row-gap: 0;
padding: 72px 24px;
}
/* Beat desktop #cost / #support / nth-child column pins (higher specificity). */
body.a2p-persona-page .e-con.sec.block > .elementor-widget-heading,
body.a2p-persona-page .e-con.sec.block > .elementor-widget.lede,
body.a2p-persona-page .e-con.sec.block > .elementor-widget-button,
body.a2p-persona-page .e-con.sec.block > .elementor-widget-shortcode,
body.a2p-persona-page .e-con.sec.block > .elementor-widget-text-editor:not(.lede),
body.a2p-persona-page .e-con.sec.block > .elementor-widget-text-editor:not(.lede):has(+ .elementor-widget-text-editor:not(.lede):last-child),
body.a2p-persona-page .e-con.sec.block > .elementor-widget-text-editor:not(.lede):last-child,
body.a2p-persona-page .e-con.sec.block > .elementor-widget-shortcode ~ .elementor-widget-text-editor:not(.lede),
body.a2p-persona-page .e-con.sec.block > .elementor-widget-shortcode ~ .elementor-widget-text-editor:not(.lede):has(+ .elementor-widget-text-editor:not(.lede):last-child),
body.a2p-persona-page .e-con.sec.block > .elementor-widget-shortcode ~ .elementor-widget-text-editor:not(.lede):last-child,
body.a2p-persona-page .e-con.sec.block > .e-con.related,
body.a2p-persona-page #cost.e-con.sec.block > .elementor-widget-heading,
body.a2p-persona-page #cost.e-con.sec.block > .elementor-widget.lede,
body.a2p-persona-page #cost.e-con.sec.block > .elementor-widget-button,
body.a2p-persona-page #cost.e-con.sec.block > .elementor-widget-shortcode,
body.a2p-persona-page #cost.e-con.sec.block > .elementor-widget-text-editor:not(.lede),
body.a2p-persona-page #cost.e-con.sec.block > .elementor-widget-shortcode ~ .elementor-widget-text-editor:not(.lede),
body.a2p-persona-page #cost.e-con.sec.block > .elementor-widget-shortcode ~ .elementor-widget-text-editor:not(.lede):has(+ .elementor-widget-text-editor:not(.lede):last-child),
body.a2p-persona-page #cost.e-con.sec.block > .elementor-widget-shortcode ~ .elementor-widget-text-editor:not(.lede):last-child,
body.a2p-persona-page #cost.e-con.sec.block > .e-con.related,
body.a2p-persona-page #support.e-con.sec.block > .e-con.eng,
body.a2p-persona-page #support.e-con.sec.block > .elementor-widget-button,
body.a2p-persona-page #support.e-con.sec.block > .elementor-widget-shortcode,
body.a2p-persona-page #support.e-con.sec.block > .elementor-widget-heading,
body.a2p-persona-page #support.e-con.sec.block > .elementor-widget.lede,
body.a2p-persona-page #video.e-con.sec.block > .elementor-widget-shortcode,
body.a2p-persona-page #video.e-con.sec.block > .elementor-widget-text-editor:not(.lede),
body.a2p-persona-page #video.e-con.sec.block > .elementor-widget-button,
body.a2p-persona-page .e-con.a2p-el-page > .e-con.sec.block:nth-child(3) > .elementor-widget-shortcode,
body.a2p-persona-page .e-con.a2p-el-page > .e-con.sec.block:nth-child(3) > .elementor-widget-text-editor:not(.lede),
body.a2p-persona-page .e-con.a2p-el-page > .e-con.sec.block:nth-child(3) > .elementor-widget-text-editor:not(.lede) ~ .elementor-widget-text-editor:not(.lede) {
grid-column: 1 / -1 !important;
grid-row: auto !important;
width: 100% !important;
max-width: none !important;
margin-left: 0;
margin-right: 0;
justify-self: stretch;
--container-widget-width: 100%;
--width: 100%;
}
body.a2p-persona-page .e-con.sec.block > .elementor-widget.lede + .elementor-widget-button,
body.a2p-persona-page .e-con.sec.block > .elementor-widget-button + .elementor-widget-button {
grid-row: auto !important;
}
body.a2p-persona-page .e-con.sec.block > .elementor-widget-button {
margin-top: 20px;
width: auto !important;
max-width: max-content;
--container-widget-width: auto;
}
body.a2p-persona-page .e-con.sec.block > .elementor-widget-button + .elementor-widget-button {
margin-left: 0;
margin-top: 12px !important;
width: auto !important;
max-width: none;
}
body.a2p-persona-page .e-con.sec.block > .elementor-widget-shortcode,
body.a2p-persona-page #cost.e-con.sec.block > .elementor-widget-shortcode,
body.a2p-persona-page #support.e-con.sec.block > .elementor-widget-shortcode {
margin-top: 32px;
}
body.a2p-persona-page #cost.e-con.sec.block > .elementor-widget-shortcode {
margin-top: 24px;
}
body.a2p-persona-page .e-con.sec.block > .elementor-widget-text-editor:not(.lede),
body.a2p-persona-page .e-con.sec.block > .elementor-widget-text-editor:not(.lede):last-child,
body.a2p-persona-page #cost.e-con.sec.block > .elementor-widget-shortcode ~ .elementor-widget-text-editor:not(.lede),
body.a2p-persona-page #cost.e-con.sec.block > .elementor-widget-shortcode ~ .elementor-widget-text-editor:not(.lede):last-child {
margin-top: 24px;
width: 100% !important;
}
body.a2p-persona-page .e-con.a2p-el-page > .e-con.sec.block:nth-child(3) > .elementor-widget-button {
width: 100% !important;
max-width: none;
}
body.a2p-persona-page #support.e-con.sec.block > .e-con.eng {
grid-row: auto !important;
margin-top: 28px;
width: 100% !important;
}
body.a2p-persona-page #support.e-con.sec.block > .elementor-widget-shortcode {
grid-row: auto !important;
margin-top: 32px;
}
body.a2p-persona-page #cost.e-con.sec.block > .e-con.related {
grid-column: 1 / -1 !important;
grid-row: auto !important;
margin-top: 24px;
width: 100% !important;
}
body.a2p-persona-page .e-con.eng > .elementor-widget-button {
width: auto !important;
}
body.a2p-persona-page .elementor-widget-button.video-related-link,
body.a2p-persona-page #video .video-related-link {
margin-top: 0 !important;
}
}
@media (max-width: 640px) {
body.a2p-persona-page .e-con.hero-copy {
padding: 56px 0 40px;
}
body.a2p-persona-page .e-con.sec.block {
padding: 56px 20px;
}
body.a2p-persona-page .e-con.actions {
flex-direction: column !important;
--flex-direction: column;
align-items: flex-start;
gap: 16px;
}
body.a2p-persona-page .e-con.actions > .elementor-widget {
width: 100% !important;
}
body.a2p-persona-page .hero .actions .elementor-widget-button:first-child .elementor-button {
width: 100%;
justify-content: center;
}
body.a2p-persona-page .local-nav-inner {
padding: 0 16px;
}
body.a2p-persona-page .local-nav-inner a {
padding: 1px 10px 0;
}
body.a2p-persona-page .data-slot {
padding: 24px 20px;
}
body.a2p-persona-page .chart-stub {
height: 220px;
}
body.a2p-persona-page .e-con.eng,
body.a2p-persona-page .eng.e-con {
flex-direction: column !important;
align-items: flex-start;
gap: 4px;
}
body.a2p-persona-page .e-con.eng > .elementor-widget-button {
width: 100% !important;
}
body.a2p-persona-page #support.e-con.sec.block > .elementor-widget-button,
body.a2p-persona-page #support.e-con.sec.block > .elementor-widget-button .elementor-button {
width: 100% !important;
max-width: none;
}
body.a2p-persona-page .elementor-widget-button.video-related-link,
body.a2p-persona-page #video .video-related-link {
margin-top: 0 !important;
}
}
/* ========== Punchlist S2 / S5 / S6 / S3 (section secondary) ========== */
/* S2: vertically center button label + icon */
body.a2p-persona-page .elementor-button,
body.a2p-persona-page .a2p-el .elementor-button,
body.a2p-persona-page .btn,
body.a2p-persona-page .gform_button {
display: inline-flex !important;
align-items: center !important;
justify-content: center;
line-height: 1.2;
}
body.a2p-persona-page .elementor-button .elementor-button-content-wrapper,
body.a2p-persona-page .elementor-button .elementor-button-text {
display: inline-flex;
align-items: center;
line-height: 1.5;
}
/* S5: filled Elementor CTAs — white label, black hover (match live site).
Do NOT target secondary text CTAs (button + button) — those stay blue link style. */
body.a2p-persona-page .a2p-el .elementor-widget-button:first-child .elementor-button,
body.a2p-persona-page .hero .actions .elementor-widget-button:first-child .elementor-button,
body.a2p-persona-page .e-con.sec.block > .elementor-widget.lede + .elementor-widget-button .elementor-button,
body.a2p-persona-page .e-con.sec.block > .elementor-widget-heading + .elementor-widget-button .elementor-button,
body.a2p-persona-page .a2p-left-intro > .elementor-widget.lede + .elementor-widget-button:not(.video-related-link) .elementor-button,
body.a2p-persona-page .a2p-left-intro > .elementor-widget-heading + .elementor-widget-button:not(.video-related-link) .elementor-button,
body.a2p-persona-page .persona-gravity-form .gform_button,
body.a2p-persona-page .persona-gravity-form .gform_button.btn-green {
color: #fff !important;
}
body.a2p-persona-page .a2p-el .elementor-widget-button:first-child .elementor-button:hover,
body.a2p-persona-page .hero .actions .elementor-widget-button:first-child .elementor-button:hover,
body.a2p-persona-page .e-con.sec.block > .elementor-widget.lede + .elementor-widget-shortcode + .elementor-widget-button .elementor-button:hover,
body.a2p-persona-page .e-con.sec.block > .elementor-widget.lede + .e-con-full.eng + .elementor-widget-shortcode + .elementor-widget-button .elementor-button:hover,
body.a2p-persona-page .e-con.sec.block > .elementor-widget.lede + .elementor-widget-button .elementor-button:hover,
body.a2p-persona-page .e-con.sec.block > .elementor-widget-heading + .elementor-widget-button .elementor-button:hover,
body.a2p-persona-page .a2p-left-intro > .elementor-widget.lede + .elementor-widget-button:not(.video-related-link) .elementor-button:hover,
body.a2p-persona-page .a2p-left-intro > .elementor-widget-heading + .elementor-widget-button:not(.video-related-link) .elementor-button:hover,
body.a2p-persona-page .persona-gravity-form .gform_button:hover,
body.a2p-persona-page .persona-gravity-form .gform_button.btn-green:hover {
background-color: #000 !important;
border-color: #000 !important;
color: #fff !important;
}
/* S3 secondary: blue text link under primary — beat any filled-button !important */
body.a2p-persona-page .e-con.sec.block > .elementor-widget-button + .elementor-widget-button .elementor-button,
body.a2p-persona-page .e-con.actions .elementor-widget-button:last-child .elementor-button,
body.a2p-persona-page .hero .actions .elementor-widget-button:last-child .elementor-button {
background: transparent !important;
background-color: transparent !important;
color: var(--a2p-blue) !important;
border-color: transparent !important;
box-shadow: none !important;
padding: 0 !important;
min-height: 0 !important;
}
body.a2p-persona-page .e-con.sec.block > .elementor-widget-button + .elementor-widget-button .elementor-button:hover,
body.a2p-persona-page .e-con.actions .elementor-widget-button:last-child .elementor-button:hover,
body.a2p-persona-page .hero .actions .elementor-widget-button:last-child .elementor-button:hover {
background: transparent !important;
background-color: transparent !important;
color: #000 !important;
border-color: transparent !important;
}
/* S6: Elementor FA icons — same markup/sizing as nav Articles & Papers / Request a Quote */
body.a2p-persona-page .elementor-button-icon,
body.a2p-persona-page .elementor-icon-list-icon {
display: inline-flex;
align-items: center;
flex: none;
line-height: 1;
}
body.a2p-persona-page .elementor-button .elementor-button-icon {
margin-left: 5px;
}
/* Text links / help CTA use icon-list-icon (not button-icon) — keep label↔arrow gap. */
body.a2p-persona-page .elementor-icon-list-icon {
margin-left: 8px;
}
body.a2p-persona-page .docs-resources .docs .act .elementor-icon-list-icon,
body.a2p-persona-page .docs-resources__help-cta .elementor-icon-list-icon {
margin-left: 0; /* gap on the flex parent handles spacing */
}
body.a2p-persona-page .gform_button .elementor-button-icon {
margin-left: 8px;
}
body.a2p-persona-page .elementor-button-icon .e-font-icon-svg,
body.a2p-persona-page .elementor-icon-list-icon .e-font-icon-svg,
body.a2p-persona-page .jump .arw .e-font-icon-svg {
font-size: 16px;
height: 0.9em;
width: auto;
fill: currentColor;
}
body.a2p-persona-page .elementor-button-icon svg path,
body.a2p-persona-page .elementor-icon-list-icon svg path {
fill: currentColor;
}
/* Header CTA chips use white FA arrows — don't remap to persona link blue. */
body.a2p-persona-page .elementor-location-header .elementor-button-icon .e-font-icon-svg,
body.a2p-persona-page .elementor-location-header .elementor-icon-list-icon .e-font-icon-svg,
body.a2p-persona-page .elementor-location-header .elementor-button-icon svg path,
body.a2p-persona-page .elementor-location-header .elementor-icon-list-icon svg path {
fill: #fff;
color: #fff;
}
/* S3: secondary under primary in section grids — breathing room when wrapped */
body.a2p-persona-page .e-con.sec.block > .elementor-widget-button + .elementor-widget-button {
margin-top: 20px !important;
}
/* I2: CTA group flush with hero copy (no Elementor widget indent) */
body.a2p-persona-page .e-con.hero-copy .e-con.actions,
body.a2p-persona-page .hero .actions {
margin-left: 0 !important;
padding-left: 0 !important;
align-self: flex-start;
justify-content: flex-start !important;
}
body.a2p-persona-page .e-con.hero-copy .e-con.actions > .elementor-widget,
body.a2p-persona-page .hero .actions .elementor-widget-button {
margin-left: 0 !important;
padding-left: 0 !important;
}
body.a2p-persona-page .e-con.hero-copy .e-con.actions .elementor-button-wrapper,
body.a2p-persona-page .hero .actions .elementor-button-wrapper {
text-align: left !important;
}
/* I3: single shared line between hero and trust — jump divider meets it flush */
body.a2p-persona-page .e-con.hero {
border-bottom: none !important;
}
@media (min-width: 1025px) {
body.a2p-persona-page .e-con.hero-grid {
gap: 0 !important;
row-gap: 0 !important;
--gap: 0px;
align-items: stretch;
min-height: 0 !important;
/* Taller jump column restored (shorter-jumps height change reverted) */
height: min(76vh, 720px);
max-height: 829px;
/* Keep jump cards inside the hero — do not spill over the trust strip */
overflow: hidden;
/* Figma: left gutter only — jumps bleed to the right viewport edge */
max-width: none !important;
width: 100%;
margin: 0;
padding: 0;
padding-left: max(var(--gutter, 24px), calc((100% - 1280px) / 2));
grid-template-columns: minmax(280px, 585px) minmax(0, 1fr) !important;
}
body.a2p-persona-page .e-con.hero-grid > .e-con.hero-copy,
body.a2p-persona-page .e-con.hero-grid > .e-con.jump {
height: 100% !important;
max-height: 100%;
min-height: 0 !important;
align-self: stretch;
}
}
body.a2p-persona-page .trust {
border-top: 1px solid var(--border);
margin-top: 0 !important;
padding-top: 0;
}
/* Last jump card: no bottom rule (trust top is the shared horizontal) */
body.a2p-persona-page .e-con.jump nav.jump > a:last-child,
body.a2p-persona-page nav.jump > a:last-child {
border-bottom: none !important;
}
/* Draw vertical with a pseudo so it always ends exactly on the trust rule */
body.a2p-persona-page .e-con.jump::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 1px;
background: var(--border);
pointer-events: none;
z-index: 2;
}
body.a2p-persona-page a.trust-cell {
display: flex;
flex-direction: column;
justify-content: center;
color: inherit;
text-decoration: none;
transition: color 0.15s ease;
}
body.a2p-persona-page a.trust-cell:hover .num,
body.a2p-persona-page a.trust-cell:hover .lead {
color: var(--a2p-blue);
}
body.a2p-persona-page a.trust-cell:hover .sub {
color: var(--ink-soft, #5a6570);
}
/* I15: jump cards with optional image + tint */
body.a2p-persona-page .jump a.jump-card.has-image {
position: relative;
background-image: var(--jump-img);
background-size: cover;
background-position: center;
/* Avoid 1px gaps between stacked image cards */
background-repeat: no-repeat;
margin-bottom: -1px;
color: #fff;
overflow: hidden;
border-color: transparent;
border-bottom: 0;
}
body.a2p-persona-page .jump a.jump-card.has-image::before {
content: "";
position: absolute;
inset: 0;
background: var(--jump-tint, rgba(43, 50, 56, 0.62));
opacity: 0.78;
pointer-events: none;
transition: opacity 0.2s ease;
}
body.a2p-persona-page .jump a.jump-card.has-image:hover::before {
opacity: 0.58;
}
body.a2p-persona-page .jump a.jump-card.has-image > * {
position: relative;
z-index: 1;
}
body.a2p-persona-page .jump a.jump-card.has-image .t,
body.a2p-persona-page .jump a.jump-card.has-image .idx,
body.a2p-persona-page .jump a.jump-card.has-image .arw {
color: #fff;
}
body.a2p-persona-page .jump a.jump-card.has-image:hover .t {
color: #fff;
}
/* I7: video testimonial — Figma black card (shortcode figure OR Elementor container) */
body.a2p-persona-page .a2p-testimonial,
body.a2p-persona-page .e-con.a2p-testimonial,
body.a2p-persona-page .a2p-video-testimonial-widget.a2p-testimonial {
margin: 0;
padding: 48px 32px;
border: 0;
background: #000;
box-sizing: border-box;
text-align: left;
}
/* HR only as wide as text (content box inside padding), not full card bleed. */
body.a2p-persona-page .a2p-testimonial::before,
body.a2p-persona-page .e-con.a2p-testimonial::before,
body.a2p-persona-page .a2p-video-testimonial-widget.a2p-testimonial::before {
content: "";
display: block;
flex: 0 0 100%;
width: 100%;
order: -1;
align-self: stretch;
box-sizing: border-box;
border-top: 0px solid #b1b3b3;
margin: 0 0 28px;
height: 0;
padding: 0;
overflow: hidden;
}
body.a2p-persona-page .a2p-testimonial__quote,
body.a2p-persona-page .elementor-widget.a2p-testimonial__quote .elementor-widget-container,
body.a2p-persona-page .elementor-widget.a2p-testimonial__quote .elementor-widget-container > p {
margin: 0;
padding: 0;
border: 0;
font-size: 20px;
font-weight: 500;
line-height: 1.6;
color: #fff;
quotes: none;
text-align: left;
}
/* Hanging quote: mark in its own flex column; body text left-aligned beside it. */
body.a2p-persona-page blockquote.a2p-testimonial__quote,
body.a2p-persona-page .elementor-widget.a2p-testimonial__quote > .elementor-widget-container {
display: flex;
gap: 8px;
align-items: flex-start;
text-align: left;
}
body.a2p-persona-page .elementor-widget.a2p-testimonial__quote > .elementor-widget-container > p {
display: block;
flex: 1 1 auto;
min-width: 0;
}
/*
* One green opening mark only.
* Elementor: class is on the widget; mark goes on the container.
* Shortcode: class is on the itself.
* Do NOT also target .a2p-testimonial__quote::before for Elementor — that doubles the mark.
*/
body.a2p-persona-page blockquote.a2p-testimonial__quote::before,
body.a2p-persona-page .elementor-widget.a2p-testimonial__quote > .elementor-widget-container::before {
content: "“";
flex: 0 0 auto;
display: block;
color: var(--a2p-green, #78BF26);
font-size: 37.8px;
line-height: 1;
margin: 0;
font-weight: 400;
}
body.a2p-persona-page .elementor-widget.a2p-testimonial__quote::before,
body.a2p-persona-page .elementor-widget.a2p-testimonial__quote .elementor-widget-container > p::before,
body.a2p-persona-page .elementor-widget.a2p-testimonial__quote .elementor-widget-container > p::after,
body.a2p-persona-page blockquote.a2p-testimonial__quote::after {
content: none !important;
}
body.a2p-persona-page .a2p-testimonial__meta,
body.a2p-persona-page .e-con.a2p-testimonial__meta {
margin-top: 16px;
padding-left: 20px;
display: flex;
flex-direction: column;
gap: 8px;
text-align: left;
}
body.a2p-persona-page .a2p-testimonial__name,
body.a2p-persona-page .elementor-widget.a2p-testimonial__name .elementor-heading-title,
body.a2p-persona-page .elementor-widget.a2p-testimonial__name .elementor-widget-container {
font-weight: 700;
font-size: 24px;
line-height: 1.15;
color: #fff;
margin: 0;
}
body.a2p-persona-page .a2p-testimonial__role,
body.a2p-persona-page .elementor-widget.a2p-testimonial__role .elementor-heading-title,
body.a2p-persona-page .elementor-widget.a2p-testimonial__role .elementor-widget-container {
font: 500 13px/1.3 var(--a2p-font-mono), monospace;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--dark-ink, #c8cbce);
margin: 0;
}
/* I17: install video carousel */
body.a2p-persona-page .a2p-video-carousel {
margin-top: 28px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
body.a2p-persona-page .a2p-video-carousel__track {
display: flex;
gap: 16px;
min-width: min-content;
}
body.a2p-persona-page .a2p-video-carousel__slide {
flex: 0 0 min(280px, 70vw);
margin: 0;
position: relative;
background: #000;
aspect-ratio: 16 / 9;
}
body.a2p-persona-page .a2p-video-carousel__slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
body.a2p-persona-page .a2p-video-carousel__slide figcaption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 10px 12px;
font-size: 13px;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
color: #fff;
}
/* I12 / I18: cost image caption; tighter when none */
body.a2p-persona-page .data-slot .chart-caption {
margin: 12px 0 0;
font-size: 14px;
line-height: 1.45;
color: var(--ink-soft, #58646f);
}
body.a2p-persona-page .data-slot.no-caption {
padding-bottom: 24px;
}
body.a2p-persona-page .data-slot.no-caption .chart-image {
margin-bottom: 0;
}
/* I16: guides-only docs layout */
body.a2p-persona-page .docs--guides-only .filter-row,
body.a2p-persona-page #loadtables.docs--guides-only .filter-row,
body.a2p-docs-guides-only .filter-row,
body.a2p-docs-guides-only [data-docs-filter] {
display: none !important;
}
/* I16 new design: Documents + videos + help callout */
body.a2p-persona-page .docs-resources {
display: flex;
flex-direction: column;
gap: 40px;
width: 100%;
}
body.a2p-persona-page .docs-resources__heading {
margin: 0;
padding: 0 0 16px;
border-bottom: 2px solid var(--ink);
font: 700 13px/1.3 var(--a2p-font-mono), monospace;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink);
}
body.a2p-persona-page .docs-resources .docs {
margin: 0;
padding: 0;
list-style: none;
}
/* Equal space above/below doc titles vs Documents rule (and row rules). */
body.a2p-persona-page .docs-resources .docs li {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
gap: 8px 32px;
align-items: baseline;
padding: 28px 0;
border-bottom: 1px solid var(--border);
}
body.a2p-persona-page .docs-resources .docs .name {
font-size: 18px;
font-weight: 600;
color: var(--ink);
}
body.a2p-persona-page .docs-resources .docs .fmt {
font: 500 13px/1.4 var(--a2p-font-mono), monospace;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--muted);
white-space: nowrap;
}
body.a2p-persona-page .docs-resources .docs .act {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 16px;
font-weight: 600;
color: var(--a2p-blue);
white-space: nowrap;
}
body.a2p-persona-page .docs-resources .docs .act:hover {
color: #000000 !important;
}
/* Space between Installation videos rule and video cards (docs rows already have 28px pad). */
body.a2p-persona-page .docs-resources__block > .docs-resources__heading + .docs-resources__carousel,
body.a2p-persona-page .docs-resources__videos-head + .docs-resources__carousel {
margin-top: 28px;
}
body.a2p-persona-page .docs-resources__videos-head {
display: block;
margin-bottom: 0;
}
body.a2p-persona-page .docs-resources__videos-head .docs-resources__heading {
margin-bottom: 0;
}
body.a2p-persona-page .docs-resources__carousel-nav {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
margin: 16px 0 0;
flex: 0 0 auto;
}
body.a2p-persona-page .docs-resources__carousel-nav--below {
margin-top: 20px;
}
body.a2p-persona-page .docs-resources__carousel-status {
font: 500 13px/1.2 var(--a2p-font-mono), monospace;
letter-spacing: 0.02em;
color: var(--muted);
white-space: nowrap;
margin-right: 4px;
}
body.a2p-persona-page .docs-resources__nav {
width: 44px;
height: 44px;
border: 2px solid var(--a2p-blue);
border-radius: 0;
background: #fff;
color: var(--a2p-blue);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
}
body.a2p-persona-page .docs-resources__nav:hover:not(:disabled) {
background: var(--a2p-blue);
border-color: var(--a2p-blue);
color: #fff;
}
body.a2p-persona-page .docs-resources__nav:disabled {
opacity: 0.35;
cursor: default;
}
body.a2p-persona-page .docs-resources__carousel {
position: relative;
}
body.a2p-persona-page .docs-resources__carousel.is-carousel:focus {
outline: 2px solid var(--a2p-blue);
outline-offset: 4px;
}
body.a2p-persona-page .docs-resources__carousel.is-carousel:focus:not(:focus-visible) {
outline: none;
}
body.a2p-persona-page .docs-resources__carousel.is-carousel:focus-visible {
outline: 2px solid var(--a2p-blue);
outline-offset: 4px;
}
body.a2p-persona-page .docs-resources__viewport {
overflow: hidden;
width: 100%;
}
body.a2p-persona-page .docs-resources__track {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
transition: transform 0.35s ease;
will-change: transform;
}
body.a2p-persona-page .docs-resources__carousel.is-carousel .docs-resources__track {
display: flex;
gap: 20px;
}
/* Slightly under 1/3 so the next video peeks — reads as a carousel, not a static grid. */
body.a2p-persona-page .docs-resources__carousel.is-carousel .docs-resources__video {
flex: 0 0 calc((100% - 40px) / 3.28);
min-width: 0;
}
body.a2p-persona-page .docs-resources__video {
margin: 0;
}
body.a2p-persona-page .docs-resources__thumb {
position: relative;
aspect-ratio: 16 / 10;
border-radius: 4px;
background: #e8eaec var(--thumb, none) center / cover no-repeat;
overflow: hidden;
}
body.a2p-persona-page .docs-resources__play {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 52px;
height: 52px;
border-radius: 50%;
border: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
background: var(--a2p-blue);
color: #fff;
cursor: pointer;
}
body.a2p-persona-page .docs-resources__play svg {
width: 18px;
height: 18px;
margin-left: 2px;
}
body.a2p-persona-page .docs-resources__video.is-playing .docs-resources__thumb {
background-image: none;
}
body.a2p-persona-page .docs-resources__embed {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
display: block;
}
body.a2p-persona-page span.docs-resources__play {
cursor: default;
opacity: 0.9;
}
body.a2p-persona-page .docs-resources__video figcaption {
margin-top: 12px;
display: flex;
flex-direction: column;
gap: 4px;
}
body.a2p-persona-page .docs-resources__vtitle {
font-size: 16px;
font-weight: 700;
line-height: 1.3;
color: var(--ink);
}
body.a2p-persona-page .docs-resources__video.is-pending .docs-resources__vtitle {
color: var(--ink-soft);
}
body.a2p-persona-page .docs-resources__vmeta {
font: 500 13px/1.35 var(--a2p-font-mono), monospace;
letter-spacing: 0.02em;
color: var(--muted);
}
body.a2p-persona-page .docs-resources__help {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 20px 32px;
padding: 28px 32px;
border-radius: 0;
background: #e8f3fc;
}
body.a2p-persona-page .docs-resources__help-title {
display: block;
font-size: 20px;
font-weight: 700;
line-height: 1.25;
color: var(--ink);
margin-bottom: 8px;
}
body.a2p-persona-page .docs-resources__help-copy {
flex: 1 1 280px;
max-width: 520px;
}
body.a2p-persona-page .docs-resources__help-copy p {
margin: 0;
font-size: 15px;
line-height: 1.55;
color: var(--ink-soft);
}
body.a2p-persona-page .docs-resources__help-cta {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 48px;
padding: 12px 22px;
background: var(--a2p-blue);
color: #fff !important;
font-size: 15px;
font-weight: 600;
text-decoration: none;
border-radius: 0;
}
body.a2p-persona-page .docs-resources__help-cta:hover {
background: #000;
color: #fff !important;
}
@media (max-width: 900px) {
body.a2p-persona-page .docs-resources__track {
grid-template-columns: 1fr;
}
body.a2p-persona-page .docs-resources__carousel.is-carousel .docs-resources__video {
flex: 0 0 100%;
}
body.a2p-persona-page .docs-resources .docs li {
grid-template-columns: 1fr;
gap: 6px;
}
}
body.a2p-persona-page .data-slot .chart-pending {
margin: 0;
font-size: 15px;
line-height: 1.5;
color: var(--ink-soft, #58646f);
}
body.a2p-persona-page .chart-stub {
display: none !important;
}
/* I14: hide engineer card when ACF toggle is off */
body.a2p-hide-engineer .eng,
body.a2p-hide-engineer .e-con.eng,
body.a2p-hide-engineer .elementor-widget-a2p-persona-support-eng {
display: none !important;
}
/* S4 reinforcement for Elementor related link widgets */
body.a2p-persona-page .elementor-widget-button.video-related-link .elementor-button,
body.a2p-persona-page #video .video-related-link .elementor-button,
body.a2p-persona-page .e-con.related .elementor-button {
display: inline !important;
text-align: left !important;
justify-content: flex-start !important;
line-height: 1.45 !important;
white-space: normal !important;
padding: 0 !important;
}
body.a2p-persona-page .e-con.related .elementor-button-content-wrapper,
body.a2p-persona-page .video-related-link .elementor-button-content-wrapper,
body.a2p-persona-page .e-con.related .elementor-button-text,
body.a2p-persona-page .video-related-link .elementor-button-text {
display: inline !important;
}
body.a2p-persona-page .e-con.related .elementor-button-icon,
body.a2p-persona-page .video-related-link .elementor-button-icon {
display: inline !important;
margin-left: 0.35em !important;
vertical-align: middle;
line-height: 1;
}
body.a2p-persona-page .e-con.related .elementor-button-icon .e-font-icon-svg,
body.a2p-persona-page .video-related-link .elementor-button-icon .e-font-icon-svg,
body.a2p-persona-page .e-con.related .elementor-button-icon svg,
body.a2p-persona-page .video-related-link .elementor-button-icon svg {
display: inline-block !important;
vertical-align: -0.12em;
width: 0.85em;
height: 0.85em;
}
/* Client: video related article stays a text link on hover (not filled black). */
body.a2p-persona-page #video .video-related-link .elementor-button:hover {
color: #000000 !important;
background-color: transparent !important;
}
/* ---- Sept 29 punchlist / Figma refinements ---- */
/* Cost: Chart vs Photo layouts (Figma conditional) */
body.a2p-persona-page .cost-media {
display: flex;
flex-direction: column;
gap: 28px;
width: 100%;
}
/* Chart layout: single data card, no outer photo */
body.a2p-persona-page .cost-media--chart {
gap: 0;
}
body.a2p-persona-page .cost-media--chart .data-slot.has-chart .chart-image {
margin-top: 0;
}
body.a2p-persona-page .cost-media__figure {
margin: 0;
}
body.a2p-persona-page .cost-media__image {
display: block;
width: 100%;
height: auto;
max-height: none;
object-fit: contain;
object-position: left top;
background: transparent;
border-radius: 0;
}
body.a2p-persona-page .cost-media__caption,
body.a2p-persona-page .video-meta-style {
margin: 12px 0 0;
padding: 0;
width: 100%;
box-sizing: border-box;
font: 500 14px/1.45 var(--a2p-font-mono), monospace;
letter-spacing: 0.01em;
color: var(--ink-soft, #58646f);
text-align: left;
}
body.a2p-persona-page .cost-chart-card.data-slot.has-chart {
min-height: 180px;
}
body.a2p-persona-page #video .video-meta,
body.a2p-persona-page .video-meta {
display: flex;
flex-wrap: wrap;
gap: 8px 24px;
margin-top: 12px;
font: 500 14px/1.45 var(--a2p-font-mono), monospace;
letter-spacing: 0.01em;
color: var(--dark-ink, #c8cbce);
}
/*
* Video testimonial: full width of media column, below under-notes.
* Supports shortcode widget OR native Elementor container.
*/
body.a2p-persona-page #video.e-con.sec.block > .a2p-video-testimonial-widget,
body.a2p-persona-page #video.e-con.sec.block > .e-con.a2p-video-testimonial-widget,
body.a2p-persona-page #video.e-con.sec.block > .e-con.a2p-testimonial,
body.a2p-persona-page #video.e-con.sec.block > .elementor-widget-shortcode.a2p-video-testimonial-widget,
body.a2p-persona-page #video.e-con.sec.block > .elementor-widget-shortcode:has(.a2p-testimonial),
body.a2p-persona-page .e-con.a2p-el-page > .e-con.sec.block:nth-child(3) > .elementor-widget-shortcode:has(.a2p-testimonial),
body.a2p-persona-page .e-con.a2p-el-page > .e-con.sec.block:nth-child(3) > .e-con.a2p-video-testimonial-widget {
grid-column: 2 !important;
grid-row: auto !important;
align-self: start;
justify-self: stretch;
width: 100% !important;
max-width: none !important;
margin-top: 32px !important;
--container-widget-width: 100%;
--width: 100%;
}
/* Certification: consistent intro spacing */
body.a2p-persona-page #certification.e-con.sec.block > .elementor-widget.lede,
body.a2p-persona-page #certification.e-con.sec.block > .elementor-widget-text-editor.lede {
margin-top: 20px;
}
/* ---- Oct 2 Installers layout polish (Figma) ---- */
/*
* Left-intro / right-media wrappers (see persona-page.js).
* Stops right-column shortcodes from stretching left-column row gaps.
*/
body.a2p-persona-page .e-con.sec.block > .a2p-left-intro {
grid-column: 1;
grid-row: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
align-self: start;
width: 100%;
max-width: 360px;
min-width: 0;
}
body.a2p-persona-page #support.e-con.sec.block > .a2p-left-intro {
max-width: none;
}
body.a2p-persona-page .e-con.sec.block > .a2p-right-media {
grid-column: 2;
grid-row: 1;
display: flex;
flex-direction: column;
align-items: stretch;
align-self: start;
width: 100%;
min-width: 0;
}
/* Figma Intro: eyebrow→title 32px; title→lede 64px; intro→related/CTA 42/32 */
body.a2p-persona-page .a2p-left-intro > .elementor-widget-heading.eyebrow {
margin: 0 !important;
width: 100%;
}
body.a2p-persona-page .a2p-left-intro > .elementor-widget-heading:not(.eyebrow) {
margin: 32px 0 0 !important;
width: 100%;
}
body.a2p-persona-page .a2p-left-intro > .elementor-widget.lede,
body.a2p-persona-page .a2p-left-intro > .elementor-widget-text-editor.lede {
margin: 64px 0 0 !important;
width: 100%;
}
/* Kill nested margins that stacked on outer gaps (was 46/84 visual vs Figma 32/64). */
body.a2p-persona-page .a2p-left-intro > .elementor-widget-heading:not(.eyebrow) .elementor-heading-title,
body.a2p-persona-page .a2p-left-intro > .elementor-widget-heading:not(.eyebrow) h2 {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
body.a2p-persona-page .a2p-left-intro > .elementor-widget.lede .elementor-widget-container,
body.a2p-persona-page .a2p-left-intro > .elementor-widget-text-editor.lede .elementor-widget-container {
margin-top: 0 !important;
}
body.a2p-persona-page .a2p-left-intro > .elementor-widget-button {
margin: 32px 0 0 !important;
}
body.a2p-persona-page .a2p-left-intro > .e-con.related,
body.a2p-persona-page .a2p-left-intro > .a2p-el.related {
margin: 42px 0 0 !important;
width: 100%;
}
body.a2p-persona-page .a2p-left-intro > .elementor-widget.lede + .elementor-widget.eyebrow {
margin-top: 42px !important;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.18);
width: 100%;
}
body.a2p-persona-page .a2p-left-intro > .elementor-widget.eyebrow + .elementor-widget-button,
body.a2p-persona-page .a2p-left-intro > .elementor-widget.eyebrow + .video-related-link {
margin-top: 16px !important;
}
body.a2p-persona-page .a2p-left-intro > .elementor-widget-button .elementor-button {
width: auto;
}
body.a2p-persona-page .a2p-left-intro > .video-related-link,
body.a2p-persona-page .a2p-left-intro > .video-related-link .elementor-button {
width: 100% !important;
max-width: 100%;
}
body.a2p-persona-page .a2p-right-media > * {
width: 100% !important;
max-width: none;
box-sizing: border-box;
}
body.a2p-persona-page .a2p-right-media > .a2p-testimonial,
body.a2p-persona-page .a2p-right-media > .a2p-video-testimonial-widget,
body.a2p-persona-page .a2p-right-media > .e-con.a2p-testimonial {
margin-top: 32px !important;
}
/* Cost: image full-bleed of media column; caption + two notes share its edges */
body.a2p-persona-page #cost.e-con.sec.block > .a2p-right-media {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 40px;
row-gap: 0;
align-items: start;
}
body.a2p-persona-page #cost .a2p-right-media > .elementor-widget-shortcode {
grid-column: 1 / -1;
margin-top: 52px;
}
body.a2p-persona-page #cost .a2p-right-media > .elementor-widget-text-editor:not(.lede) {
margin-top: 32px;
width: 100% !important;
justify-self: stretch;
}
body.a2p-persona-page #cost .a2p-right-media > .elementor-widget-shortcode ~ .elementor-widget-text-editor:not(.lede):has(+ .elementor-widget-text-editor:not(.lede):last-child) {
justify-self: stretch;
}
body.a2p-persona-page #video .a2p-right-media > .elementor-widget-text-editor:not(.lede) {
display: none !important;
}
/* Filled CTAs inside left-intro (wrap broke direct-child selectors → Elementor green leaked) */
body.a2p-persona-page .a2p-left-intro > .elementor-widget-button:not(.video-related-link) .elementor-button {
background: var(--a2p-blue) !important;
background-color: var(--a2p-blue) !important;
color: #fff !important;
border-color: var(--a2p-blue) !important;
border-radius: 0;
font-size: 16px;
font-weight: 600;
padding: 16px 24px;
min-height: 52px;
}
body.a2p-persona-page .a2p-left-intro > .elementor-widget-button:not(.video-related-link) .elementor-button:hover {
background-color: #000 !important;
border-color: #000 !important;
color: #fff !important;
}
/* Video related stays a text link on dark field */
body.a2p-persona-page .a2p-left-intro > .video-related-link .elementor-button,
body.a2p-persona-page #video .a2p-left-intro > .video-related-link .elementor-button {
background: transparent !important;
background-color: transparent !important;
color: #fff !important;
border-color: transparent !important;
padding: 0 !important;
min-height: 0 !important;
box-shadow: none !important;
}
body.a2p-persona-page .a2p-left-intro > .video-related-link .elementor-button:hover,
body.a2p-persona-page #video .a2p-left-intro > .video-related-link .elementor-button:hover {
color: #fff !important;
background: transparent !important;
background-color: transparent !important;
}
@media (max-width: 1024px) {
body.a2p-persona-page .e-con.sec.block > .a2p-left-intro,
body.a2p-persona-page .e-con.sec.block > .a2p-right-media {
grid-column: 1;
grid-row: auto;
max-width: none;
}
body.a2p-persona-page #cost.e-con.sec.block > .a2p-right-media {
grid-template-columns: minmax(0, 1fr);
}
body.a2p-persona-page .a2p-left-intro > .elementor-widget-heading:not(.eyebrow) {
margin-top: 24px !important;
}
body.a2p-persona-page .a2p-left-intro > .elementor-widget.lede,
body.a2p-persona-page .a2p-left-intro > .elementor-widget-text-editor.lede {
margin-top: 28px !important;
}
}
/* Homepage module: restyle text links as green buttons (when marked) */
body.home .a2p-home-module a.a2p-green-btn,
.a2p-home-module a.elementor-button.a2p-green-btn,
body.home .elementor-widget-button.a2p-home-green .elementor-button {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 10px;
background: var(--a2p-green, #78BF26) !important;
color: #fff !important;
border: 0 !important;
border-radius: 0 !important;
font-size: 16px !important;
font-weight: 600 !important;
padding: 14px 24px !important;
min-height: 52px;
text-decoration: none !important;
}
body.home .a2p-home-module a.a2p-green-btn:hover,
.a2p-home-module a.elementor-button.a2p-green-btn:hover,
body.home .elementor-widget-button.a2p-home-green .elementor-button:hover {
background: #000 !important;
color: #fff !important;
}
@media (max-width: 1024px) {
body.a2p-persona-page .e-con.hero-grid {
height: auto !important;
max-height: none !important;
grid-template-columns: minmax(0, 1fr) !important;
overflow: visible !important;
padding-left: var(--gutter, 24px) !important;
}
body.a2p-persona-page .under.under--video,
body.a2p-persona-page #video .under--video {
grid-template-columns: minmax(0, 1fr);
gap: 20px;
margin-top: 24px;
}
body.a2p-persona-page #video.e-con.sec.block > .a2p-video-testimonial-widget,
body.a2p-persona-page #video.e-con.sec.block > .e-con.a2p-video-testimonial-widget,
body.a2p-persona-page #video.e-con.sec.block > .e-con.a2p-testimonial,
body.a2p-persona-page #video.e-con.sec.block > .elementor-widget-shortcode.a2p-video-testimonial-widget,
body.a2p-persona-page #video.e-con.sec.block > .elementor-widget-shortcode:has(.a2p-testimonial) {
grid-column: 1 / -1 !important;
grid-row: auto !important;
margin-top: 24px !important;
width: 100% !important;
max-width: none !important;
}
body.a2p-persona-page .e-con.sec.block,
body.a2p-persona-page #video.e-con.sec.block,
body.a2p-persona-page #cost.e-con.sec.block,
body.a2p-persona-page #support.e-con.sec.block {
--e-con-grid-template-columns: minmax(0, 1fr) !important;
grid-template-columns: minmax(0, 1fr) !important;
}
body.a2p-persona-page .docs-resources .docs li {
grid-template-columns: minmax(0, 1fr);
gap: 6px 0;
}
body.a2p-persona-page .docs-resources .docs .fmt,
body.a2p-persona-page .docs-resources .docs .act {
justify-self: start;
white-space: normal;
}
body.a2p-persona-page .a2p-testimonial {
padding: 32px 20px;
}
body.a2p-persona-page .a2p-testimonial__quote {
font-size: 18px !important;
}
body.a2p-persona-page .a2p-testimonial__name {
font-size: 20px !important;
}
}
/* ========== Mobile.pdf client QA (phone/tablet only — spacing + nav chrome) ========== */
@media (max-width: 1024px) {
/*
* Elementor sticky clones leave a full-height spacer under the phone header (~75px gap at scroll 0).
* Fixed bar + collapsed spacers + body padding seats local-nav flush under the main header.
*/
body.a2p-persona-page .elementor-location-header > .elementor-sticky__spacer {
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
border: 0 !important;
}
body.a2p-persona-page .elementor-location-header {
min-height: 0 !important;
height: auto !important;
}
body.a2p-persona-page .elementor-location-header > .elementor-element-edf94a5:not(.elementor-sticky__spacer),
body.a2p-persona-page .elementor-location-header > .elementor-hidden-desktop:not(.header-top-bar):not(.elementor-sticky__spacer) {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 100;
background: #fff;
width: 100% !important;
}
body.admin-bar.a2p-persona-page .elementor-location-header > .elementor-element-edf94a5:not(.elementor-sticky__spacer),
body.admin-bar.a2p-persona-page .elementor-location-header > .elementor-hidden-desktop:not(.header-top-bar):not(.elementor-sticky__spacer) {
top: 32px !important;
}
@media screen and (max-width: 782px) {
body.admin-bar.a2p-persona-page .elementor-location-header > .elementor-element-edf94a5:not(.elementor-sticky__spacer),
body.admin-bar.a2p-persona-page .elementor-location-header > .elementor-hidden-desktop:not(.header-top-bar):not(.elementor-sticky__spacer) {
top: 46px !important;
}
}
body.a2p-persona-page,
body.a2p-persona-page.a2p-utility-hidden {
/* Header + fixed local-nav (sticky flickers on iOS URL-bar resize). */
padding-top: calc(var(--header-bottom, 75px) + var(--local-nav-height, 52px)) !important;
}
body.a2p-persona-page .elementor-location-header > .elementor-element-edf94a5:not(.elementor-sticky__spacer),
body.a2p-persona-page .elementor-location-header > .elementor-hidden-desktop:not(.header-top-bar):not(.elementor-sticky__spacer) {
transform: none !important;
transition: none !important;
}
/* Local nav: match main-nav weight/size; full-bleed; no top/left hairlines.
* Fixed (not sticky) under the phone header — sticky + iOS URL-bar resize flickers. */
body.a2p-persona-page nav.local-nav {
position: fixed !important;
top: var(--header-bottom, 75px) !important;
left: 0;
right: 0;
z-index: 99;
width: 100vw;
max-width: 100vw;
margin-left: 0;
margin-right: 0;
border-top: 0 !important;
border-left: 0 !important;
border-right: 0 !important;
background: #fff;
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
body.a2p-persona-page .local-nav-inner {
padding-left: 16px;
padding-right: 16px;
border-top: 0 !important;
border-left: 0 !important;
}
body.a2p-persona-page .local-nav-inner a {
font-size: 16px;
font-weight: 600;
border-top-color: transparent !important;
}
/* H1 = H2 scale on small screens */
body.a2p-persona-page .hero h1,
body.a2p-persona-page .hero .elementor-widget-heading h1.elementor-heading-title,
body.a2p-persona-page .e-con.hero-copy h1.elementor-heading-title {
font-size: clamp(34px, 3.4vw, 48px) !important;
}
/* Hero title → lede: match section title→lede (28px), not desktop 64px */
body.a2p-persona-page .e-con.hero-copy > .elementor-widget.lede {
margin-top: 28px !important;
}
/* Consistent section breathing room after intro CTAs / before docs media */
body.a2p-persona-page #loadtables .a2p-left-intro,
body.a2p-persona-page #video .a2p-left-intro,
body.a2p-persona-page #cost .a2p-left-intro,
body.a2p-persona-page #certification .a2p-left-intro,
body.a2p-persona-page #support .a2p-left-intro {
margin-bottom: 32px;
}
body.a2p-persona-page #loadtables .a2p-right-media,
body.a2p-persona-page #video .a2p-right-media {
margin-top: 0;
}
/* Padding between text and video player (stacked) */
body.a2p-persona-page #video .a2p-left-intro + .a2p-right-media,
body.a2p-persona-page #video .a2p-right-media {
padding-top: 8px;
}
body.a2p-persona-page #video .under.under--video,
body.a2p-persona-page #video .under--video {
margin-top: 32px;
}
/* FAQ: space between section title and dark top rule (descenders were touching). */
body.a2p-persona-page #faq .faq,
body.a2p-persona-page .a2p-right-media .faq {
margin-top: 20px;
}
/* Documents: space under CTA before Documents; space under heading rule before rows */
body.a2p-persona-page .docs-resources {
margin-top: 8px;
}
body.a2p-persona-page .docs-resources__heading {
padding-bottom: 20px;
margin-bottom: 0;
}
body.a2p-persona-page .docs-resources .docs {
margin-top: 8px;
}
body.a2p-persona-page .docs-resources .docs li:first-child {
padding-top: 28px;
}
/* Installation videos: space under rule before cards */
body.a2p-persona-page .docs-resources__block > .docs-resources__heading + .docs-resources__carousel {
margin-top: 32px;
}
/* Form: space between lede/text and Gravity Form */
body.a2p-persona-page #calcs .lede + .elementor-widget-shortcode,
body.a2p-persona-page #calcs .a2p-left-intro .lede + .elementor-widget-shortcode,
body.a2p-persona-page #calcs .persona-gravity-form,
body.a2p-persona-page #calcs .gform_wrapper {
margin-top: 32px !important;
}
/* Related article links: arrow sits after last word (SVG display:block was orphaning it). */
body.a2p-persona-page .e-con.related .elementor-button,
body.a2p-persona-page .elementor-widget-button.video-related-link .elementor-button,
body.a2p-persona-page #video .video-related-link .elementor-button {
display: inline !important;
white-space: normal !important;
}
body.a2p-persona-page .e-con.related .elementor-button-content-wrapper,
body.a2p-persona-page .video-related-link .elementor-button-content-wrapper {
display: inline !important;
}
body.a2p-persona-page .e-con.related .elementor-button-text,
body.a2p-persona-page .video-related-link .elementor-button-text {
display: inline !important;
}
body.a2p-persona-page .e-con.related .elementor-button-icon,
body.a2p-persona-page .video-related-link .elementor-button-icon {
display: inline !important;
margin-left: 0.35em !important;
vertical-align: middle;
line-height: 1;
}
body.a2p-persona-page .e-con.related .elementor-button-icon .e-font-icon-svg,
body.a2p-persona-page .video-related-link .elementor-button-icon .e-font-icon-svg,
body.a2p-persona-page .e-con.related .elementor-button-icon svg,
body.a2p-persona-page .video-related-link .elementor-button-icon svg {
display: inline-block !important;
vertical-align: -0.12em;
width: 0.85em;
height: 0.85em;
}
/* CTA label ↔ icon gap on filled buttons */
body.a2p-persona-page .elementor-button .elementor-button-content-wrapper {
gap: 8px;
}
}