/* WordPress-specific overrides on top of the design system.
All layout/behavior primitives live in ds-styles.css. */
/* Utilities used by templates */
.esa-container{max-width:var(--container-content,1200px);margin:0 auto;padding:0 24px}
.esa-container--bleed{max-width:var(--container-bleed,1440px)}
.esa-section{padding:var(--section-pad-y,96px) 0}
.esa-section--mist{background:var(--mist-100)}
.esa-section--dark{background:var(--code-950);color:var(--text-muted-on-dark)}
.esa-section--dark h2{color:#fff}
.esa-eyebrow{display:block;font:600 13px/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--protea-600);margin:0 0 14px}
.esa-eyebrow--center{text-align:center}
.esa-section h2{font:800 clamp(2rem,4vw,2.75rem)/1.15 var(--font-display);color:var(--ink-900);margin:0 0 12px;text-wrap:balance;text-align:center;letter-spacing:-.01em}
.esa-section h2.esa-featart__t{text-align:left;text-wrap:pretty;width:100%;align-self:stretch}
.esa-section__lede{font:400 1.0625rem/1.6 var(--font-body);color:var(--ink-700);max-width:60ch;margin:0 auto 40px;text-align:center}
.esa-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.esa-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.esa-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
@media (max-width:960px){.esa-grid-2,.esa-grid-3,.esa-grid-4{grid-template-columns:1fr;gap:24px}
.esa-hero{padding:64px 24px}
.esa-section{padding:64px 0}
.esa-nav__links{display:none}
.esa-comp,.esa-dual,.esa-stats,.esa-steps{grid-template-columns:1fr;grid-auto-flow:row}
.esa-foot__grid{grid-template-columns:1fr 1fr}
.esa-calcf{grid-template-columns:1fr}
.esa-book{grid-template-columns:1fr}
}
/* Hero photo variant */
.esa-hero__media{max-width:var(--container-content,1200px);margin:32px auto 0;padding:0 24px}
.esa-hero__media img{width:100%;height:auto;border-radius:var(--radius-panel,20px);display:block}
/* Signature motif in hero */
.esa-hero__sig{font:600 1.25rem var(--font-mono);color:var(--ink-500)}
.esa-hero__sig .fn{color:var(--ink-500)}
.esa-hero__sig .str{color:var(--protea-600)}
.esa-hero__sig .cur{display:inline-block;width:.5em;height:1em;background:var(--protea-600);margin-left:2px;vertical-align:-.15em}
@media (prefers-reduced-motion:no-preference){.esa-hero__sig .cur{animation:esa-blink 1.1s steps(1) infinite}}
/* Sections & alternating backgrounds inside a page */
.esa-alt>.esa-section:nth-of-type(even){background:var(--mist-100)}
/* Author bio card variant used above article footer */
.esa-content{max-width:760px;margin:0 auto;padding:0 24px;font:400 17px/1.7 var(--font-body);color:var(--ink-700)}
.esa-content h2{font:800 1.75rem/1.2 var(--font-display);color:var(--ink-900);margin:48px 0 16px;text-align:left}
.esa-content h3{font:700 1.375rem/1.25 var(--font-display);color:var(--ink-900);margin:36px 0 12px}
.esa-content p{margin:0 0 18px}
.esa-content a{color:var(--action-600);text-decoration:underline}
.esa-content ul,.esa-content ol{padding-left:22px;margin:0 0 18px}
.esa-content li{margin:6px 0}
.esa-content blockquote{border-left:3px solid var(--protea-600);padding:6px 0 6px 18px;color:var(--ink-900);font:500 18px/1.6 var(--font-body);margin:24px 0}
.esa-content table{width:100%;border-collapse:collapse;margin:24px 0;font-size:15px}
.esa-content th,.esa-content td{padding:10px 12px;border-top:1px solid var(--ink-200);text-align:left}
.esa-content thead th{background:var(--mist-100);color:var(--ink-900);font-weight:600}
.esa-content code{background:var(--mist-100);padding:2px 6px;border-radius:4px;font-family:var(--font-mono);font-size:.9em}
/* Article header/meta */
.esa-article__head{max-width:760px;margin:0 auto 32px;padding:64px 24px 0;text-align:left}
.esa-article__head h1{font:800 clamp(2.25rem,5vw,3.25rem)/1.1 var(--font-display);color:var(--ink-900);margin:16px 0 12px;text-wrap:balance;letter-spacing:-.01em}
.esa-article__meta{font:500 13.5px var(--font-body);color:var(--ink-500);letter-spacing:.02em}
.esa-article__cover{max-width:var(--container-content,1200px);margin:0 auto 32px;padding:0 24px}
.esa-article__cover img{width:100%;height:auto;border-radius:var(--radius-panel,20px);display:block;aspect-ratio:16/7;object-fit:cover}
/* CalloutBox variant */
.esa-callout{border:1px solid var(--ink-200);border-left:4px solid var(--action-600);border-radius:var(--radius-card,12px);background:var(--paper-0);padding:20px 24px;margin:24px 0;color:var(--ink-700)}
.esa-callout--warn{border-left-color:var(--danger-600)}
.esa-callout--ok{border-left-color:var(--success-600)}
.esa-callout__t{font:700 15px var(--font-body);color:var(--ink-900);margin:0 0 6px;display:flex;gap:8px;align-items:center}
/* Skip link and focus polish */
.esa-skip{position:absolute;left:-9999px}
.esa-skip:focus{position:absolute;left:12px;top:12px;padding:10px 14px;background:var(--ink-900);color:#fff;z-index:100;border-radius:8px}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--action-600);outline-offset:2px;border-radius:2px}
/* Article card in knowledge index */
.esa-artc{border:1px solid var(--ink-200);border-radius:var(--radius-card,12px);background:var(--paper-0);overflow:hidden;display:flex;flex-direction:column}
.esa-artc__cover{aspect-ratio:16/9;background:var(--mist-100);overflow:hidden}
.esa-artc__cover img{width:100%;height:100%;object-fit:cover;display:block}
.esa-artc__body{padding:20px;display:flex;flex-direction:column;gap:8px;flex:1}
.esa-artc__tag{font:500 11.5px var(--font-mono);color:var(--protea-600);letter-spacing:.04em;text-transform:uppercase}
.esa-artc__t{font:700 18px/1.25 var(--font-display);color:var(--ink-900);margin:0}
.esa-artc__d{font:400 14.5px/1.55 var(--font-body);color:var(--ink-700);margin:0 0 auto}
.esa-artc__foot{font:400 13px var(--font-body);color:var(--ink-500);display:flex;justify-content:space-between}
.esa-artc a{color:inherit;text-decoration:none}
.esa-artc:hover{border-color:var(--ink-500)}
/* Header logo lockup: mark.svg + stacked wordmark (mockup-compact) */
.esa-nav__logo{gap:10px;text-decoration:none}
.esa-nav__logo img.esa-nav__mark{height:26px;width:auto;display:block}
.esa-nav__wordmark{display:flex;flex-direction:column;line-height:1}
.esa-nav__wordmark-top{font:800 14px/1.1 var(--font-display);color:var(--ink-900);letter-spacing:-.01em}
.esa-nav__wordmark-top span{color:var(--protea-600)}
.esa-nav__wordmark-sub{font:600 11px/1.2 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-500);margin-top:3px}
/* Footer logo lockup: mark-mono-white.svg + stacked white wordmark */
.esa-foot__logo{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.esa-foot__logo img{height:36px;width:auto;display:block;margin:0}
.esa-foot__wordmark{display:flex;flex-direction:column;line-height:1}
.esa-foot__wm-top{font:800 24px/1.05 var(--font-display);color:#fff;letter-spacing:-.01em}
.esa-foot__wm-top span{color:var(--protea-600)}
.esa-foot__wm-sub{font:600 12px/1.2 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted-on-dark);margin-top:4px}
/* Draft/noindex banner for gated pages */
.esa-draft-banner{background:#FFF3E0;border-bottom:1px solid #F5B76B;color:#8A4B00;font:500 13.5px var(--font-body);padding:10px 24px;text-align:center}
/* --- /book-a-call · compress whitespace so Calendly moves above the fold --- */
.esa-hero--book{padding:40px 24px 16px}
.esa-hero--book .esa-hero__in{gap:10px}
.esa-hero--book .esa-hero__sub{margin:0 auto}
.esa-section--book{padding:12px 0 48px}
.esa-book--compact{padding:20px;gap:20px;margin-top:0}
.esa-book--compact .esa-book__rail h3{font-size:1.125rem}
.esa-book--compact .calendly-inline-widget{height:640px !important}
@media (max-width: 780px){
.esa-hero--book{padding:24px 20px 12px}
.esa-section--book{padding:8px 0 32px}
.esa-book--compact{padding:16px;gap:14px}
.esa-book--compact .calendly-inline-widget{height:900px !important}
}
/* --- Homepage · tighten whitespace around the StatBand --- */
.esa-section--statband{padding:40px 0 40px}
@media (max-width: 780px){
.esa-section--statband{padding:24px 0 24px}
}
/* --- Triage cards (payroll + PEO) --- */
.esa-triage{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:8px}
.esa-triage__card{border:1px solid var(--ink-200);border-radius:16px;padding:24px;background:var(--paper-0);display:flex;flex-direction:column;gap:12px}
.esa-triage__card h3{margin:0;font:800 1.125rem/1.25 var(--font-display);color:var(--ink-900)}
.esa-triage__card p{margin:0;color:var(--ink-700);font:400 15px/1.55 var(--font-body);flex:1}
.esa-triage__card .esa-btn{align-self:flex-start;margin-top:4px}
@media (max-width: 780px){
.esa-triage{grid-template-columns:1fr}
}
/* ==============================================================
TOC sidebar (v1.2.0.9). Left-sticky nav on guide + blog singles.
============================================================== */
.esa-article--has-toc .esa-article__body{
max-width:1200px;
margin:0 auto;
padding:0 24px;
display:grid;
grid-template-columns:260px minmax(0,760px);
gap:64px;
justify-content:center;
align-items:start;
}
.esa-article--has-toc .esa-content{margin:0;padding:0;max-width:none}
.esa-toc-sidebar{
position:sticky;
top:96px;
max-height:calc(100vh - 120px);
overflow-y:auto;
padding:4px 0 4px 16px;
border-left:1px solid var(--ink-200);
font-family:var(--font-body);
}
.esa-toc__eyebrow{
font:600 11px/1.4 var(--font-body);
letter-spacing:.14em;
text-transform:uppercase;
color:var(--ink-500);
margin:0 0 12px;
}
.esa-toc__list{
list-style:none;
margin:0;
padding:0;
}
.esa-toc__item{margin:0;padding:0}
.esa-toc__item a{
display:block;
position:relative;
padding:6px 0 6px 14px;
margin-left:-17px;
border-left:2px solid transparent;
font:500 14px/1.45 var(--font-body);
color:var(--ink-700);
text-decoration:none;
transition:color .12s ease,border-color .12s ease;
}
.esa-toc__item a:hover{color:var(--ink-900)}
.esa-toc__item a.is-active,
.esa-toc__item.is-active > a{
color:var(--action-600);
font-weight:700;
border-left-color:var(--action-600);
}
@media (max-width:960px){
.esa-article--has-toc .esa-article__body{
grid-template-columns:1fr;
gap:24px;
}
.esa-toc-sidebar{
position:static;
max-height:none;
overflow:visible;
border-left:none;
padding:16px;
background:var(--mist-100);
border-radius:12px;
}
}
/* Hide any legacy in-body "On this page" list that came in the guide HTML,
now that we render a proper sticky sidebar. */
.esa-article--has-toc .esa-content > h2:first-of-type + ul,
.esa-article--has-toc .esa-content > h2#on-this-page,
.esa-article--has-toc .esa-content > h2#on-this-page + ul{display:none}
/* --- /contact page (v1.2.1.2) --- */
.esa-contact .esa-contact__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;max-width:1120px;align-items:start}
.esa-contact__left{display:flex;flex-direction:column;gap:16px}
.esa-contact-card{display:grid;grid-template-columns:44px 1fr;gap:16px;padding:22px 24px;border:1px solid var(--ink-200);border-radius:16px;background:var(--paper-0)}
.esa-contact-card__icon{width:44px;height:44px;border-radius:10px;background:#F7ECDD;color:var(--protea-600);display:inline-flex;align-items:center;justify-content:center;flex:0 0 44px}
.esa-contact-card__body h3{margin:0 0 6px;font:600 17px/1.35 var(--font-body);color:var(--ink-900)}
.esa-contact-card__body p{margin:0;font:400 15px/1.55 var(--font-body);color:var(--ink-700)}
.esa-contact-card__body a{color:var(--action-600);text-decoration:none}
.esa-contact-card__body a:hover{text-decoration:underline}
.esa-contact-card__link{display:inline-block;margin-top:10px;color:var(--action-600);font-weight:600;text-decoration:none}
.esa-contact-card__link:hover{text-decoration:underline}
.esa-contact__hours{margin:8px 4px 0;color:var(--ink-500);font:400 13px/1.55 var(--font-body)}
.esa-contact__right .esa-contact-form{border:1px solid var(--ink-200);border-radius:16px;background:var(--paper-0);padding:28px 28px 24px}
/* Gravity Forms visual polish inside contact card */
.esa-gf--contact .gform_wrapper .gform_fields{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px}
.esa-gf--contact .gform_wrapper .gfield{grid-column:1 / -1}
.esa-gf--contact .gform_wrapper .gfield.gf_left_half{grid-column:1 / 2}
.esa-gf--contact .gform_wrapper .gfield.gf_right_half{grid-column:2 / 3}
.esa-gf--contact .gform_wrapper .gfield_label{font:600 13px/1.4 var(--font-body);color:var(--ink-900);margin:0 0 6px;display:block}
.esa-gf--contact .gform_wrapper .gfield_required{color:#D6373A;margin-left:2px}
/* Single-line inputs and select: compact, ~44px tall */
.esa-gf--contact .gform_wrapper input[type=text],
.esa-gf--contact .gform_wrapper input[type=email],
.esa-gf--contact .gform_wrapper input[type=tel],
.esa-gf--contact .gform_wrapper input[type=url],
.esa-gf--contact .gform_wrapper select{
min-height:auto;
height:44px;
padding:10px 12px;
font:400 15px/1.4 var(--font-body);
color:var(--ink-900);
background:var(--paper-0);
border:1px solid var(--ink-200);
border-radius:10px;
width:100%;
box-sizing:border-box;
appearance:none;
-webkit-appearance:none;
}
/* Textarea: multi-line, only element that gets a real min-height */
.esa-gf--contact .gform_wrapper textarea{
min-height:130px;
resize:vertical;
padding:12px;
font:400 15px/1.5 var(--font-body);
color:var(--ink-900);
background:var(--paper-0);
border:1px solid var(--ink-200);
border-radius:10px;
width:100%;
box-sizing:border-box;
}
/* Focus */
.esa-gf--contact .gform_wrapper input:focus,
.esa-gf--contact .gform_wrapper select:focus,
.esa-gf--contact .gform_wrapper textarea:focus{
outline:none;
border-color:var(--action-600);
box-shadow:0 0 0 3px rgba(29,91,240,.15);
}
/* Select arrow */
.esa-gf--contact .gform_wrapper select{
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;
background-position:right 14px center;
padding-right:36px;
}
.esa-gf--contact .gform_wrapper .gfield_description{margin-top:6px;font:400 12px/1.4 var(--font-body);color:var(--ink-500)}
.esa-gf--contact .gform_wrapper .gfield--type-checkbox .gfield_label{display:none}
.esa-gf--contact .gform_wrapper .gfield--type-checkbox .gchoice{display:flex;gap:10px;align-items:flex-start;font:400 13px/1.5 var(--font-body);color:var(--ink-700)}
.esa-gf--contact .gform_wrapper .gfield--type-checkbox input[type=checkbox]{margin-top:3px}
.esa-gf--contact .gform_wrapper .gform_footer{display:flex;gap:16px;align-items:center;margin-top:20px;padding:0}
.esa-gf--contact .gform_wrapper .gform_footer .gform_button{background:var(--action-600);color:#fff;border:0;border-radius:10px;padding:12px 22px;font:600 15px/1 var(--font-body);cursor:pointer;transition:background .15s}
.esa-gf--contact .gform_wrapper .gform_footer .gform_button:hover{background:#1548C4}
.esa-gf--contact .gform_wrapper .gform_footer::after{content:"Replies within one business day.";color:var(--ink-500);font:400 13px/1 var(--font-body)}
/* Mobile */
@media (max-width:900px){
.esa-contact .esa-contact__grid{grid-template-columns:1fr}
.esa-contact__right{order:-1}
.esa-gf--contact .gform_wrapper .gform_fields{grid-template-columns:1fr}
.esa-gf--contact .gform_wrapper .gfield.gf_left_half,
.esa-gf--contact .gform_wrapper .gfield.gf_right_half{grid-column:1 / -1}
.esa-contact__right .esa-contact-form{padding:20px 18px}
}
/* Force required-indicator to a red asterisk on the contact form (v1.2.1.3) */
.esa-gf--contact .gform_wrapper .gfield_required_text{font-size:0;color:transparent;margin-left:2px}
.esa-gf--contact .gform_wrapper .gfield_required_text::before{content:"*";font-size:14px;color:#D6373A;font-weight:600}
.esa-gf--contact .gform_wrapper .gfield_required_asterisk{color:#D6373A;font-weight:600}
.esa-gf--contact .gform_wrapper .gform_required_legend{display:none}
/* /privacy · numbered legal styling (v1.2.1.6) */
.esa-legal-meta .esa-badge{vertical-align:1px}
.esa-legal .esa-legal-h2{display:flex;gap:14px;align-items:baseline;margin:40px 0 12px;font:700 26px/1.25 var(--font-heading);color:var(--ink-900)}
.esa-legal .esa-legal-h2:first-child{margin-top:8px}
.esa-legal .esa-legal-h2__num{font:600 14px/1 var(--font-body);color:var(--protea-600);letter-spacing:.06em;background:#F7ECDD;padding:6px 8px;border-radius:6px;flex:0 0 auto;position:relative;top:-2px}
.esa-legal .esa-legal-h2__text{flex:1 1 auto}
.esa-legal .esa-content p{font:400 16px/1.7 var(--font-body);color:var(--ink-700);margin:0 0 12px}
.esa-legal .esa-content p b{color:var(--ink-900);font-weight:700}
.esa-legal .esa-content a{color:var(--action-600);text-decoration:underline;text-underline-offset:2px}
.esa-legal-review{margin-top:56px;padding:20px 22px;border:1px dashed var(--protea-600);border-radius:14px;background:#FFF9F1}
.esa-legal-review__title{font:600 13px/1.4 var(--font-body);color:var(--protea-600);letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}
.esa-legal-review p{margin:0;font:400 15px/1.6 var(--font-body);color:var(--ink-700)}
/* Numbered TOC prefixes */
.esa-toc--legal{position:sticky;top:96px;max-height:calc(100vh - 120px);overflow-y:auto;padding:4px 0 4px 16px;border-left:1px solid var(--ink-200);font-family:var(--font-body)}
.esa-toc--legal .esa-toc__title{font:600 11px/1.4 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-500);margin:0 0 12px}
.esa-toc--legal .esa-toc__list{list-style:none;padding:0;margin:0}
.esa-toc--legal .esa-toc__item a{display:flex;gap:10px;align-items:baseline;padding:6px 0 6px 12px;color:var(--ink-700);text-decoration:none;font:500 14px/1.45 var(--font-body);border-left:2px solid transparent}
.esa-toc--legal .esa-toc__item a:hover{color:var(--action-600)}
.esa-toc--legal .esa-toc__item a.is-active{color:var(--action-600);font-weight:700;border-left-color:var(--action-600)}
.esa-toc__num{font:600 11px/1 var(--font-mono);color:var(--ink-500);letter-spacing:.06em;flex:0 0 auto}
.esa-toc--legal .esa-toc__item a.is-active .esa-toc__num{color:var(--action-600)}
@media (max-width:960px){
.esa-toc--legal{position:static;max-height:none;overflow:visible;border-left:none;padding:16px;background:var(--mist-100);border-radius:12px}
.esa-legal .esa-legal-h2{font-size:22px;gap:10px}
.esa-legal .esa-legal-h2__num{font-size:12px;padding:4px 6px}
}
/* ==============================================================
AutoSEO content-publisher overrides (v1.2.1.9).
Neutralise blue/purple gradient tints on .key-takeaways and
in-body .table-of-contents. Hide the duplicate in-body TOC
since the sticky sidebar (.esa-toc-sidebar) already renders it.
============================================================== */
.esa-content .key-takeaways{
background:var(--mist-100) !important;
background-image:none !important;
border:1px solid var(--ink-200) !important;
border-left:3px solid var(--protea-600) !important;
border-radius:14px !important;
padding:22px 24px !important;
margin:24px 0 !important;
box-shadow:none !important;
}
.esa-content .key-takeaways h2,
.esa-content .key-takeaways h3{
color:var(--ink-900) !important;
background:transparent !important;
margin:0 0 10px !important;
font:700 20px/1.3 var(--font-heading) !important;
border:none !important;
padding:0 !important;
}
.esa-content .key-takeaways ul{margin:0 !important;padding-left:20px !important}
.esa-content .key-takeaways li{color:var(--ink-700) !important;margin:6px 0 !important}
.esa-content .key-takeaways li::marker{color:var(--protea-600) !important}
/* Hide the redundant in-body Table of Contents. The sticky sidebar covers it. */
.esa-content > .table-of-contents,
.esa-content .table-of-contents:not(.esa-toc-sidebar){
display:none !important;
}
/* ==============================================================
/terms page — request card + T&C form (v1.2.2.0).
Reuses the .esa-gf--contact form styling for .esa-gf--terms.
============================================================== */
/* Request card ------------------------------------------------ */
.esa-terms-card{
display:grid;grid-template-columns:1fr 1fr;gap:40px;
background:var(--paper-0);border:1px solid var(--ink-200);
border-radius:20px;padding:36px 36px;
box-shadow:0 1px 2px rgba(18,24,28,.03),0 8px 24px rgba(18,24,28,.06);
}
.esa-terms-card__intro h2{font:700 28px/1.2 var(--font-heading);color:var(--ink-900)}
.esa-terms-card__intro p{color:var(--ink-700);font:400 15px/1.6 var(--font-body);margin:0 0 14px}
.esa-terms-card__list{margin:0 0 14px;padding:0;list-style:none}
.esa-terms-card__list li{
position:relative;padding:6px 0 6px 26px;color:var(--ink-700);font:400 14px/1.5 var(--font-body);
}
.esa-terms-card__list li::before{
content:"";position:absolute;left:2px;top:12px;width:14px;height:14px;border-radius:50%;
background:var(--protea-600);
background-image:linear-gradient(135deg,var(--protea-600),#B26A28);
}
.esa-terms-card__list li::after{
content:"";position:absolute;left:6px;top:16px;width:6px;height:3px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg);
}
.esa-terms-card__note{color:var(--ink-500);font:400 13px/1.5 var(--font-body);margin:0}
.esa-terms-card__form{min-width:0}
@media (max-width:960px){
.esa-terms-card{grid-template-columns:1fr;gap:28px;padding:26px}
}
/* Meta strip on /terms (mirror /privacy) ---------------------- */
.esa-terms .esa-article__body,
.esa-terms-request + .esa-terms .esa-article__body{
/* handled by shared .esa-article--has-toc grid */
}
/* Terms form — clone the contact form's field styling. ---------- */
.esa-gf--terms .gform_wrapper .gform_fields{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px}
.esa-gf--terms .gform_wrapper .gfield{grid-column:1 / -1}
.esa-gf--terms .gform_wrapper .gfield.gf_left_half{grid-column:1 / 2}
.esa-gf--terms .gform_wrapper .gfield.gf_right_half{grid-column:2 / 3}
.esa-gf--terms .gform_wrapper .gfield_label{font:600 13px/1.4 var(--font-body);color:var(--ink-900);margin:0 0 6px;display:block}
.esa-gf--terms .gform_wrapper .gfield_required{color:#D6373A;margin-left:2px}
.esa-gf--terms .gform_wrapper input[type=text],
.esa-gf--terms .gform_wrapper input[type=email],
.esa-gf--terms .gform_wrapper select,
.esa-gf--terms .gform_wrapper textarea{width:100%;box-sizing:border-box;padding:11px 14px;border:1px solid var(--ink-200);border-radius:10px;background:var(--paper-0);font:400 15px/1.4 var(--font-body);color:var(--ink-900);transition:border-color .15s}
.esa-gf--terms .gform_wrapper input:focus,
.esa-gf--terms .gform_wrapper select:focus,
.esa-gf--terms .gform_wrapper textarea:focus{outline:none;border-color:var(--action-600);box-shadow:0 0 0 3px rgba(29,91,240,.12)}
.esa-gf--terms .gform_wrapper textarea{min-height:96px;resize:vertical}
.esa-gf--terms .gform_wrapper .gfield_description{margin-top:6px;font:400 12px/1.4 var(--font-body);color:var(--ink-500)}
.esa-gf--terms .gform_wrapper .gfield--type-checkbox .gfield_label{display:none}
.esa-gf--terms .gform_wrapper .gfield--type-checkbox .gchoice{display:flex;gap:10px;align-items:flex-start;font:400 13px/1.5 var(--font-body);color:var(--ink-700)}
.esa-gf--terms .gform_wrapper .gfield--type-checkbox input[type=checkbox]{margin-top:3px}
.esa-gf--terms .gform_wrapper .gform_footer{display:flex;gap:16px;align-items:center;margin-top:20px;padding:0}
.esa-gf--terms .gform_wrapper .gform_footer .gform_button{background:var(--action-600);color:#fff;border:0;border-radius:10px;padding:12px 22px;font:600 15px/1 var(--font-body);cursor:pointer;transition:background .15s}
.esa-gf--terms .gform_wrapper .gform_footer .gform_button:hover{background:#1548C4}
.esa-gf--terms .gform_wrapper .gform_footer::after{content:"One business day, from a human.";color:var(--ink-500);font:400 13px/1 var(--font-body)}
.esa-gf--terms .gform_wrapper .gfield_required_text{font-size:0;color:transparent;margin-left:2px}
.esa-gf--terms .gform_wrapper .gfield_required_text::before{content:"*";font-size:14px;color:#D6373A;font-weight:600}
.esa-gf--terms .gform_wrapper .gfield_required_asterisk{color:#D6373A;font-weight:600}
.esa-gf--terms .gform_wrapper .gform_required_legend{display:none}
@media (max-width:640px){
.esa-gf--terms .gform_wrapper .gform_fields{grid-template-columns:1fr}
.esa-gf--terms .gform_wrapper .gfield.gf_left_half,
.esa-gf--terms .gform_wrapper .gfield.gf_right_half{grid-column:1 / -1}
}
/* =========================================================================
Mobile homepage v1.2.2.3 — StatBand 2x2, pricing scroll, snippet shrink,
FAQ side padding, global x-overflow guard.
========================================================================= */
/* Safety net: never allow horizontal page scroll */
/* Safety net: use overflow-x:clip (not hidden) so it doesn't create a
* scroll container that would break position:sticky on descendants like
* the guide TOC sidebar. Falls back gracefully on older browsers. */
html,body{overflow-x:clip;max-width:100vw}
/* Pricing comparison table becomes horizontally scrollable inside its wrapper */
.esa-pa{overflow-x:auto;-webkit-overflow-scrolling:touch}
.esa-pa table{min-width:640px}
/* StatBand: force 2x2 grid on mobile (override earlier 1fr collapses) */
@media (max-width:960px){
.esa-stats{grid-template-columns:1fr 1fr!important;grid-auto-flow:row}
}
@media (max-width:480px){
.esa-stats{grid-template-columns:1fr 1fr!important;gap:16px;padding:0 16px}
.esa-stats__v{font-size:1.9rem}
.esa-stats__l{font-size:14px}
}
/* Homepage developers section: shrink expand_to("south-africa") prompt */
.esa-devs__prompt{font-size:18px}
@media (max-width:640px){
.esa-devs__prompt{font-size:15px;letter-spacing:0;margin-bottom:20px;flex-wrap:wrap}
}
/* Hero signature: shrink on mobile so it never wraps oddly */
@media (max-width:640px){
.esa-hero__sig{font-size:1rem}
}
/* FAQ block: give it side padding on mobile so it doesn't hug the viewport */
@media (max-width:640px){
.esa-faq{padding:0 20px;box-sizing:border-box}
}
/* Pricing table foot text: keep inside safe margin on mobile */
@media (max-width:640px){
.esa-pa__foot{padding:0 4px}
}
/* -------------------------------------------------------------------------
* v1.2.2.4 — Mobile sweep: grid-blowout & content overflow safety
* -------------------------------------------------------------------------
* Fix: on mobile the guide grid was expanding a 1fr track to the intrinsic
* width of its widest child (tables, , code). Setting min-width:0 on
* grid items lets the track shrink; overflow-x:auto on tables/pre keeps
* their content scrollable inside the track without breaking the page.
*/
/* Guides (single-guide.php): grid children must be shrinkable on mobile */
@media (max-width:960px){
.esa-article--has-toc .esa-article__body{grid-template-columns:1fr!important}
.esa-article--has-toc .esa-article__body > *{min-width:0}
.esa-article--has-toc .esa-toc-sidebar{position:static;max-height:none;padding:0;border:none}
}
/* Any long content inside .esa-content stays inside its column on mobile */
.esa-content{min-width:0}
.esa-content pre{max-width:100%;overflow-x:auto}
.esa-content table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.esa-content img,.esa-content video{max-width:100%;height:auto}
/* Developers /developers "One engine" row: stack the code panel below the
* copy on mobile so the pre-formatted example never blows out the viewport. */
@media (max-width:820px){
.esa-devs-row{grid-template-columns:1fr!important;gap:24px!important}
.esa-devs-row .esa-code,
.esa-devs-row pre{max-width:100%;overflow-x:auto}
}
/* Calculator PDF section: stack copy above form on mobile */
@media (max-width:820px){
.esa-calc-pdfrow{grid-template-columns:1fr!important;gap:24px!important}
}
/* Sandbox / dev form row (esa-devform grid) — same stack safety */
@media (max-width:820px){
.esa-devform{grid-template-columns:1fr!important}
}
/* Code blocks anywhere: prevent long strings from expanding the page.
* Inline code (not inside pre) can wrap; pre keeps a horizontal scroll. */
code{word-break:break-word}
pre code{word-break:normal;white-space:pre}
pre{max-width:100%;overflow-x:auto}
.esa-code,.esa-code__pane{max-width:100%;overflow-x:auto}
/* Book-a-call bottom band on calculator */
.esa-calc-bookband{padding:56px 0}
@media (max-width:640px){
.esa-calc-bookband{padding:40px 20px}
}
/* Leadmagnet GF: hide default (Vereist) legend to keep red asterisk consistent */
.esa-gf--leadmagnet .gform_required_legend,
.esa-gf--leadmagnet_wrapper .gform_required_legend{display:none}
/* -------------------------------------------------------------------------
* v1.2.2.5 — Make site header sticky on mobile too (was overridden to
* position:relative in ds-styles.css at the mobile breakpoint).
* ------------------------------------------------------------------------- */
@media (max-width:900px){
.esa-nav{position:sticky!important;top:0;z-index:50}
}
/* v1.2.2.6 — Linked compliance-grid card (used on /talent-sourcing for role -> /hire mapping) */
.esa-comp__card--link{
text-decoration:none;
color:inherit;
display:flex;
flex-direction:column;
position:relative;
transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.esa-comp__card--link:hover,
.esa-comp__card--link:focus-visible{
transform:translateY(-2px);
border-color:var(--action-600);
box-shadow:0 8px 20px rgba(29,91,240,.08);
outline:none;
}
.esa-comp__card--link .esa-comp__arrow{
position:absolute;top:14px;right:16px;
font-size:18px;line-height:1;color:var(--action-600);opacity:.6;
transition:transform .15s ease,opacity .15s ease;
}
.esa-comp__card--link:hover .esa-comp__arrow,
.esa-comp__card--link:focus-visible .esa-comp__arrow{
transform:translateX(3px);opacity:1;
}
/* v1.2.2.6 — Partner note aside on /talent-sourcing */
.esa-partner-note{
margin:28px auto 0;
padding:20px 22px;
background:var(--mist-100);
border:1px solid var(--ink-200);
border-left:3px solid var(--protea-600);
border-radius:10px;
max-width:820px;
}
.esa-partner-note__eyebrow{
font-family:'Instrument Sans',system-ui,sans-serif;
font-size:12px;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--protea-600);
font-weight:600;
margin-bottom:6px;
}
.esa-partner-note p{margin:0;color:var(--ink-700);font-size:15px;line-height:1.55}
/* Utility: visually hidden (accessible for AT + SEO H1) */
.esa-visually-hidden{position:absolute!important;clip:rect(0 0 0 0);clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap;margin:-1px;padding:0;border:0}