.elementor-element.axn-chrome-skip,
.elementor-widget.axn-chrome-skip,
.axn-chrome-skip>.elementor-widget-container{
display:none!important;
height:0!important;
min-height:0!important;
margin:0!important;
padding:0!important;
overflow:hidden!important;
border:0!important
}
.axn-section,
.axn-section *{box-sizing:border-box}
/* The unscoped ".elementor>.e-con{width:100%!important}" that used to sit here
is gone. It matched every top-level container on every page - including the 35
with no Axion widget - and its !important would also beat the [Axion] Layout
Container Stretch control, which now owns this decision. */
/* An Axion widget fills its parent container - that is all it needs to do, and
the parent now decides boxed vs stretched. This replaces ten !important
declarations that were also being re-stamped inline by fillWidth() in the JS,
three layers doing one job, and the inline copy made Elementor's own width
controls unusable in the editor. */
.elementor-element[class*="elementor-widget-arcadia_axion_"],
.elementor-widget[class*="elementor-widget-arcadia_axion_"],
.axn-widget-fill{
inline-size:100%;
max-inline-size:100%;
align-self:stretch
}
.elementor-element.axn-fit-column,
.elementor-widget.axn-fit-column,
.elementor-element.axn-fit-column>.elementor-widget-container{
width:100%!important;
min-width:0!important;
max-width:100%!important;
flex-grow:1!important;
flex-shrink:1!important;
flex-basis:auto!important;
align-self:stretch!important
}
.axn-section{--axn-blue:#115696;--axn-blue-2:#3972C5;--axn-gold:#FFD800;--axn-gold-2:#FFE761;--axn-coral:#F36565;--axn-ink:#1C1C1C;--axn-muted:rgba(28,28,28,.62);--axn-line:#e6eef6;--axn-soft:#eef6ff;display:flex;flex-direction:column;width:100%;max-width:100%;align-self:stretch;margin:0 auto;padding:clamp(48px,6vw,96px) 0;color:var(--axn-ink);font-family:inherit}
.axn-shell{width:100%;max-width:1180px;margin:0 auto;min-width:0;padding:0 clamp(16px,3vw,24px)}
.axn-section [hidden]{display:none!important}
.axn-svg{display:block;width:1em;height:1em;flex:0 0 auto}
.axn-heading{margin:0 0 .45em;font-weight:600;line-height:1.12;color:var(--axn-ink);letter-spacing:-.02em}
.axn-section h1.axn-heading{font-size:clamp(2rem,4.4vw,3.5rem)}
.axn-section h2.axn-heading{font-size:clamp(1.7rem,3.1vw,2.65rem)}
.axn-section h3{margin:0 0 .35em;font-size:1.15rem;font-weight:600;line-height:1.25}
.axn-highlight{color:var(--axn-blue-2)}
.axn-muted{color:var(--axn-muted)}
.axn-text{margin:0 0 1.1em;line-height:1.6;color:rgba(28,28,28,.78);font-size:1.05rem}
.axn-center{text-align:center}
.axn-split{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,56px);align-items:center}
.axn-copy,
.axn-media{min-width:0;flex:1 1 280px}
.axn-media img{display:block;width:100%;max-width:100%;height:auto;object-fit:cover;border-radius:22px}
.axn-btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.axn-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 22px;border-radius:999px;font-weight:700;text-decoration:none;border:0;cursor:pointer;line-height:1.2;max-width:100%;transition:transform .15s ease,box-shadow .15s ease}
.axn-btn:hover{transform:translateY(-1px)}
.axn-btn .axn-svg{width:16px;height:16px}
.axn-btn-primary{background:linear-gradient(135deg,#FFE761 0%,#FFD800 100%);color:#1C1C1C;box-shadow:0 8px 18px rgba(255,216,0,.28)}
.axn-btn-secondary{background:linear-gradient(135deg,#3972C5 0%,#115696 100%);color:#fff}
.axn-btn-tertiary{background:rgba(0,0,0,.12);color:rgba(28,28,28,.7)}
.axn-btn-outline{background:#fff;color:var(--axn-ink);border:1px solid rgba(28,28,28,.2)}
.axn-btn-ghost{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.38)}
.axn-check{color:#22c55e;display:inline-flex}
.axn-check .axn-svg{width:22px;height:22px}
.axn-icon{display:inline-flex;color:var(--axn-blue)}
.axn-icon-tile{width:52px;height:52px;border-radius:14px;background:var(--axn-blue);color:#fff;display:inline-flex;align-items:center;justify-content:center;overflow:hidden}
.axn-icon-tile .axn-svg,
.axn-icon-tile .axn-icon-img{width:24px;height:24px;object-fit:contain}
.axn-icon-img{display:block;width:1.25em;height:1.25em;object-fit:contain}
.axn-btn-row .axn-btn{white-space:nowrap}
.axn-check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 22px;list-style:none;margin:0 0 26px;padding:0}
.axn-check-grid li{display:flex;align-items:center;gap:10px;font-weight:700}
.axn-check-copy li{align-items:flex-start}
.axn-check-copy em{display:block;font-style:normal;color:var(--axn-muted);font-weight:400}
.axn-eyebrow{color:var(--axn-blue);font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin:0 0 12px;font-size:.78rem}
.axn-aside{color:var(--axn-blue-2);font-weight:600}
/* Header */
.axn-axion-header{gap:10px;padding-top:18px;padding-bottom:18px}
.axn-header-top{display:flex;flex-wrap:wrap;justify-content:var(--axn-hdr-top-justify,flex-end);align-items:center;gap:var(--axn-hdr-top-gap,14px)}
.axn-meta{display:inline-flex;align-items:center;gap:var(--axn-hdr-meta-gap,8px);color:var(--axn-hdr-meta-color,var(--axn-ink));text-decoration:none}
.axn-meta-sep{width:1px;height:16px;background:var(--axn-hdr-sep-color,rgba(17,86,150,.35))}
.axn-header-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;background:var(--axn-hdr-bar-bg,var(--axn-blue));color:#fff;border-radius:999px;padding:10px 16px 10px 18px;width:100%}
.axn-logo{display:inline-flex;align-items:center;min-width:0}
.axn-logo img{height:36px;width:auto;max-width:180px}
.axn-logo-text{color:#fff;font-weight:800}
.axn-header-nav{display:flex;flex-wrap:wrap;gap:8px var(--axn-hdr-nav-gap,16px);flex:1 1 auto;justify-content:var(--axn-hdr-nav-justify,center)}
.axn-header-nav > a{color:var(--axn-hdr-link-color,#fff);text-decoration:none;display:inline-flex;align-items:center;gap:4px}
.axn-header-actions{display:flex;align-items:center;gap:var(--axn-hdr-actions-gap,12px);margin-left:auto}
.axn-login{color:var(--axn-hdr-login-color,#FFD800);display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.axn-nav-toggle{display:none;background:transparent;border:0;color:#fff}
/* Footer */
.axn-axion-footer{background:linear-gradient(180deg,#115696,#3972C5);color:#fff;border-radius:0;padding-top:56px;padding-bottom:28px}
.axn-axion-footer .axn-text{color:rgba(255,255,255,.85)}
.axn-footer-sales{margin-top:16px}
.axn-footer-sales > span{display:block;opacity:.85;margin-bottom:4px}
.axn-footer-main{display:flex;flex-wrap:wrap;gap:28px}
.axn-footer-brand{flex:1 1 220px}
.axn-axion-footer .axn-footer-logo{max-width:130px;height:auto}
.axn-gold-phone{color:var(--axn-gold);font-weight:800;font-size:1.4rem;text-decoration:none;display:block}
.axn-footer-cols{display:flex;flex-wrap:wrap;gap:22px;flex:2 1 420px}
.axn-footer-col{flex:1 1 120px;min-width:0}
.axn-footer-col h3{margin:0 0 10px;color:#fff}
.axn-footer-col ul{list-style:none;margin:0;padding:0}
.axn-footer-col a{color:#fff;text-decoration:none;display:block;padding:4px 0}
.axn-footer-tools{display:flex;flex-direction:column;gap:12px;align-items:flex-end}
.axn-support-fab{width:56px;height:56px;border-radius:50%;background:var(--axn-gold);color:var(--axn-blue);display:inline-flex;align-items:center;justify-content:center}
.axn-to-top{width:40px;height:40px;border:1px solid rgba(255,255,255,.5);border-radius:10px;color:#fff;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.axn-footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;border-top:1px solid rgba(255,255,255,.25);padding-top:14px;margin-top:18px}
.axn-legal{display:flex;gap:16px}
.axn-legal a{color:#fff;text-decoration:none}
/* Home / vet hero — Layout: Background,
Columns (copy|photo),
or Content only */
.elementor-widget-arcadia_axion_home_hero,
.elementor-widget-arcadia_axion_vet_hero{
position:relative;
background-color:#F1FBFF;
background-repeat:no-repeat;
background-size:cover;
overflow:hidden;
}
.elementor-widget-arcadia_axion_home_hero.axn-hero-layout-content,
.elementor-widget-arcadia_axion_vet_hero.axn-hero-layout-content,
.elementor-element.axn-hero-layout-content,
.elementor-element.axn-split-layout-content{
background-color:transparent!important;
background-image:none!important;
min-height:0!important;
overflow:visible;
}
.elementor-widget-arcadia_axion_home_hero.axn-has-hero-bg{
background-position:100% 50%;
}
.elementor-widget-arcadia_axion_vet_hero.axn-has-hero-bg,
.elementor-widget-arcadia_axion_vet_hero.axn-has-hero-bg.axn-hero-side-right,
.axn-has-hero-bg.axn-hero-side-right{
background-position:right center !important;
}
.axn-has-hero-bg.axn-hero-side-left{
background-position:left center !important;
}
.elementor-widget-arcadia_axion_vet_hero.axn-has-hero-bg::after{
content:"";
position:absolute;
inset:0;
z-index:0;
pointer-events:none;
background:linear-gradient(90deg,#F1FBFF 0%,#F1FBFF 28%,rgba(241,251,255,.92) 38%,rgba(241,251,255,.28) 50%,rgba(241,251,255,0) 60%)
}
.elementor-widget-arcadia_axion_vet_hero>.elementor-widget-container,
.elementor-widget-arcadia_axion_vet_hero .axn-axion-vet-hero{
position:relative;
z-index:1
}
.axn-axion-home-hero,
.axn-axion-vet-hero{padding-top:clamp(28px,4vw,50px);padding-bottom:clamp(36px,5vw,64px);background:transparent}
.axn-hero-copy{max-width:540px;width:100%;position:relative;z-index:1}
.axn-hero-layout-content .axn-hero-copy,
.axn-hero-layout-split .axn-hero-copy{max-width:none}
.axn-axion-home-hero.axn-hero-layout-background .axn-media,
.axn-axion-vet-hero.axn-hero-layout-background .axn-media{display:none!important}
.axn-hero-split{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(24px,4vw,56px);width:100%}
.axn-hero-split .axn-hero-copy,
.axn-hero-split .axn-copy{flex:1 1 46%;min-width:0;max-width:560px}
.axn-hero-split .axn-media{display:block!important;flex:1 1 42%;min-width:0}
.axn-hero-split .axn-media img{width:100%;height:auto;max-height:520px;object-fit:cover;border-radius:22px}
.axn-hero-layout-split.axn-hero-side-left .axn-hero-split{flex-direction:row-reverse}
.axn-hero-layout-content .axn-shell{max-width:none;padding-left:0;padding-right:0}
.axn-axion-home-hero.axn-hero-layout-content,
.axn-axion-vet-hero.axn-hero-layout-content{padding-top:0;padding-bottom:0}
.axn-split-side-left .axn-split,
.axn-split-side-left .axn-hero-split,
.axn-split-side-left .axn-review-stat,
.axn-split-side-left .axn-showcase{flex-direction:row-reverse}
.axn-split-layout-stacked .axn-split,
.axn-split-layout-stacked .axn-hero-split{flex-direction:column;align-items:stretch;flex-wrap:nowrap}
.axn-split-layout-stacked .axn-copy,
.axn-split-layout-stacked .axn-hero-copy,
.axn-split-layout-stacked .axn-media{max-width:100%;flex:1 1 auto;width:100%}
.axn-split-layout-stacked .axn-media img{width:100%;max-height:none;border-radius:18px}
.axn-split-layout-content .axn-media,
.axn-split-layout-content .axn-agent,
.axn-split-layout-content .axn-integrations-art,
.axn-split-layout-content .axn-showcase-media{display:none!important}
/* Benefits strip — icon left of title + text */
.axn-axion-benefits-strip{padding-top:12px;padding-bottom:28px}
.axn-benefit-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 36px;width:100%}
.axn-benefit{display:flex;flex-direction:row;align-items:flex-start;gap:14px;min-width:0}
.axn-benefit .axn-icon-tile{flex:0 0 52px;margin-top:2px}
.axn-benefit-copy{min-width:0}
.axn-benefit h3{font-size:1.2rem;margin:0 0 4px;color:var(--axn-blue)}
.axn-benefit-copy p{margin:0;line-height:1.5}
/* Industry photo cards */
.axn-axion-industry-cards .axn-heading,
.axn-axion-how-we-run .axn-heading,
.axn-axion-platform-feature-tabs .axn-heading,
.axn-axion-google-reviews .axn-heading{text-align:center}
.axn-axion-industry-cards .axn-muted,
.axn-axion-how-we-run .axn-muted.axn-center,
.axn-axion-platform-feature-tabs .axn-muted{max-width:720px;margin:0 auto 28px}
.axn-card-grid,
.axn-run-grid,
.axn-pain-grid,
.axn-gain-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;width:100%}
.axn-card{background:#fff;border-radius:18px;padding:18px;box-shadow:0 10px 28px rgba(17,86,150,.08);min-width:0}
.axn-industry-grid{display:flex;flex-direction:column;gap:22px;width:100%}
.axn-industry-row{display:grid;gap:18px;width:100%}
.axn-industry-row-a{grid-template-columns:repeat(3,minmax(0,1fr))}
.axn-industry-row-b{grid-template-columns:repeat(4,minmax(0,1fr))}
.axn-industry-card{position:relative;width:100%;min-width:0;min-height:420px;border-radius:18px;padding:0;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;background:#115696;box-shadow:0 16px 36px rgba(17,86,150,.16)}
.axn-industry-row-b .axn-industry-card{min-height:400px}
.axn-industry-link{display:flex;flex-direction:column;justify-content:flex-end;min-height:100%;height:100%;color:#fff;text-decoration:none}
.axn-industry-media{position:absolute;inset:0;z-index:-1;background:linear-gradient(160deg,#123a63,#3d6ea3)}
.axn-industry-media img{width:100%;height:100%;object-fit:cover;border-radius:0;display:block}
.axn-industry-card::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(8,28,48,.05) 38%,rgba(8,28,48,.92) 100%);pointer-events:none}
.axn-industry-badge{position:relative;z-index:4;top:auto;left:auto;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 16px rgba(0,0,0,.25);margin:-45px 0 4px!important;flex:0 0 52px;overflow:hidden}
.axn-industry-badge .axn-svg,
.axn-industry-badge .axn-icon-img{width:24px;height:24px;color:#fff}
.axn-industry-overlay,
.axn-industry-link{position:relative;z-index:2}
.axn-badge-place-top_left .axn-industry-overlay,
.axn-badge-place-top_right .axn-industry-overlay{position:static}
.axn-industry-overlay{display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:8px 16px 18px;width:100%;background:linear-gradient(180deg,transparent 0%,rgba(8,28,48,.35) 14%,rgba(8,28,48,.94) 48%)}
.axn-industry-head{display:flex;align-items:flex-end;gap:12px;width:100%;margin:0;min-height:0;position:relative;z-index:3}
.axn-badge-place-top_left .axn-industry-head,
.axn-badge-place-top_right .axn-industry-head{display:contents}
.axn-badge-place-top_left .axn-industry-badge{position:absolute;top:22px;left:22px;margin:0!important}
.axn-badge-place-top_right .axn-industry-badge{position:absolute;top:22px;right:22px;left:auto;margin:0!important}
.axn-industry-card h3{color:#fff;font-size:clamp(1.02rem,1.15vw,1.28rem);font-weight:600;line-height:1.15}
.axn-industry-overlay h3,
.axn-industry-head h3{margin:0;flex:1 1 auto;min-width:0;padding-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.axn-industry-cta{display:flex!important;width:100%;max-width:100%;box-sizing:border-box;justify-content:space-between;align-items:center;gap:8px;white-space:nowrap;min-height:44px;padding:10px 14px 10px 16px;font-size:clamp(.72rem,.85vw,.9rem);color:#fff;font-weight:700;line-height:1}
.axn-industry-cta.is-dark{color:#0B2A4A}
/* The CTA label wraps rather than truncating. The ellipsis here was a guard against
overflow and it was firing on real content - "Explore Consumer Services" needs
286px in a 270px pill and rendered as "Explore Consumer ...". Losing the end of a
button label is worse than a two-line button. */
.axn-industry-cta>span{overflow:visible;white-space:normal;overflow-wrap:anywhere;min-width:0}
.axn-industry-cta .axn-svg{flex:0 0 16px;width:16px;height:16px}
/* @900 and @560 removed: neither is an Elementor breakpoint, and both were dead -
the parity block sets the same industry-row selectors at higher specificity
inside @1180 / @1024 / @767, so these never won a single declaration. */
/* Software integrations + trusted / logo bars */
.axn-axion-software-integrations .axn-copy{flex:1.1 1 420px}
.axn-axion-trusted-practices{padding-top:8px;padding-bottom:12px}
.axn-logo-strip{display:flex;flex-wrap:nowrap!important;align-items:center;gap:18px 24px;width:100%}
.axn-logo-strip.is-dark{background:var(--axn-blue);color:#fff;border-radius:18px;padding:14px 22px;min-height:0}
.axn-logo-copy{display:flex;align-items:center;gap:14px;flex:0 0 auto;max-width:280px}
.axn-logo-copy-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.axn-logo-copy .axn-icon{color:#fff;flex:0 0 auto}
.axn-logo-copy .axn-icon .axn-svg{width:28px;height:28px}
.axn-logo-strip.is-dark .axn-muted,
.axn-logo-strip.is-dark .axn-logo-copy-text > span:first-child{color:rgba(255,255,255,.78);font-size:.85rem}
.axn-logo-strip.is-dark .axn-highlight{color:#FFD800!important;font-size:1.05rem;letter-spacing:.04em}
.axn-logo-strip.is-dark .axn-logo-copy-text > span:last-child{font-weight:700;color:#fff}
.axn-logo-strip .axn-logo-row{flex:1 1 auto;justify-content:flex-end;flex-wrap:nowrap!important;gap:10px;overflow-x:auto;overflow-y:hidden}
.axn-logo-strip.is-dark .axn-logo-fallback{background:rgba(255,255,255,.14);color:#fff;box-shadow:none;white-space:nowrap;padding:8px 14px;font-size:.82rem;min-width:0}
.axn-inline-link{color:var(--axn-blue-2);font-weight:700;text-decoration:none;margin-left:.3em}
.axn-inline-link:hover{text-decoration:underline}
.axn-integrations{align-items:center}
.axn-integrations-art{position:relative;flex:1 1 380px;min-height:280px;display:flex;align-items:center;justify-content:center}
.axn-integrations-glow{position:absolute;inset:0;border-radius:50%;background:radial-gradient(closest-side,rgba(60,150,220,.22),rgba(60,150,220,.05) 70%,transparent 100%);pointer-events:none}
.axn-integrations-art .axn-media{position:relative;z-index:1;max-width:440px;width:100%}
.axn-integrations-art .axn-media img{border-radius:0;object-fit:contain;background:transparent;box-shadow:none}
.axn-logo-row{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:18px 22px;align-items:center;justify-content:center;margin-top:0}
.axn-logo-row img{max-height:52px;width:auto;max-width:170px}
.axn-logo-plus{font-size:1.6rem;font-weight:700;color:rgba(28,28,28,.4)}
.axn-logo-fallback{display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:1.05rem;opacity:.92;background:#fff;border-radius:999px;padding:12px 22px;min-width:110px;text-align:center;box-shadow:0 10px 24px rgba(17,86,150,.12);color:var(--axn-blue)}
.axn-axion-practice-software-logos .axn-heading{text-align:center}
.axn-axion-practice-software-logos .axn-logo-row{justify-content:center;margin-top:8px}
/* How we run */
.axn-run-card{background:var(--axn-soft);text-align:center;border-radius:18px;padding:32px 24px 28px;min-width:0;box-shadow:none}
.axn-run-card .axn-icon,
.axn-run-card .axn-icon-tile{margin:0 auto 16px;width:56px;height:56px;color:var(--axn-blue);background:none;border-radius:0;display:flex;align-items:center;justify-content:center}
.axn-run-card .axn-icon .axn-svg,
.axn-run-card .axn-icon-tile .axn-svg{width:52px;height:52px}
.axn-run-card h3{font-size:1.15rem;color:var(--axn-ink);line-height:1.3}
.axn-run-card h3 .axn-highlight{display:block;color:var(--axn-blue)}
/* Pain / gain */
.axn-pain-grid,
.axn-gain-grid{margin-top:22px;padding-top:22px}
.axn-axion-pain-point-cards{padding-bottom:8px;overflow:visible}
.axn-axion-pain-point-cards .axn-heading{text-align:center}
.axn-axion-pain-point-cards h2.axn-heading.axn-center{margin-top:28px;margin-bottom:0;letter-spacing:.04em}
.axn-pain-card{background:#f3e9ec;border-radius:16px;padding:52px 26px 30px;text-align:center;position:relative}
.axn-pain-card h3,
.axn-pain-card .axn-icon{color:var(--axn-coral)}
.axn-pain-card .axn-icon{width:64px;height:64px;margin:0 auto 18px;display:flex;align-items:center;justify-content:center}
.axn-pain-card .axn-icon .axn-svg{width:60px;height:60px}
.axn-pain-card h3{font-size:1.3rem;margin-bottom:12px}
.axn-badge{position:absolute;top:-22px;left:50%;transform:translateX(-50%);background:var(--axn-coral);color:#fff;min-width:44px;height:44px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:1.2rem;box-shadow:0 8px 16px rgba(0,0,0,.15)}
.axn-badge.is-blue{background:var(--axn-blue)}
.axn-gain-card{background:#fff;border:1px solid var(--axn-line);border-radius:16px;padding:42px 26px 30px;position:relative;text-align:left}
.axn-gain-card h3{color:var(--axn-blue);font-size:1.35rem;margin:12px 0 14px}
.axn-gain-card ul{list-style:none;margin:0 0 16px;padding:0}
.axn-gain-card li{display:flex;align-items:flex-start;gap:8px;margin:8px 0}
.axn-result{font-weight:600;border-top:1px solid var(--axn-line);padding-top:14px;margin:0}
.axn-result strong{color:var(--axn-blue)}
.axn-gain-card.is-featured{background:linear-gradient(160deg,#1a67ac,#0d3d66);color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.06),0 20px 45px rgba(17,86,150,.35);border-color:transparent}
.axn-gain-card.is-featured h3{color:#fff}
.axn-gain-card.is-featured .axn-badge{background:var(--axn-gold);color:#000}
.axn-gain-card.is-featured .axn-result{color:var(--axn-gold);border-top-color:rgba(255,255,255,.2)}
.axn-gain-card.is-featured .axn-result strong{color:var(--axn-gold)}
.axn-gain-card.is-featured li span{color:rgba(255,255,255,.92)}
.axn-gain-card.is-featured .axn-check{color:var(--axn-gold)}
.axn-axion-benefits-comparison-cards{padding-top:12px;overflow:visible}
.axn-axion-benefits-comparison-cards .axn-btn-row{justify-content:center;margin-top:28px;width:100%}
/* Platform tabs */
.axn-platform{display:flex;flex-wrap:wrap;gap:22px;align-items:stretch;margin-top:8px}
.axn-platform-nav{flex:0 1 340px;display:flex;flex-direction:column;gap:10px;min-width:0;max-width:100%}
.axn-platform-tab{display:flex;align-items:center;gap:12px;text-align:left;width:100%;max-width:100%;min-width:0;border:1px solid var(--axn-line);background:#fff;border-radius:16px;padding:14px 14px;cursor:pointer;font:inherit;box-shadow:0 8px 18px rgba(17,86,150,.05)}
.axn-platform-tab>span:nth-child(2){min-width:0;flex:1 1 auto}
.axn-platform-tab em{display:block;min-width:0;font-style:normal;color:var(--axn-muted);font-size:.85em;font-weight:400;white-space:normal;overflow-wrap:anywhere}
.axn-platform-tab>.axn-svg{flex:0 0 16px}
.axn-platform-tab.is-active{background:var(--axn-blue);color:#fff;box-shadow:0 0 28px rgba(57,114,197,.32);border-color:transparent}
.axn-platform-tab.is-active em{color:rgba(255,255,255,.8)}
.axn-platform-tab.is-active .axn-icon-tile{background:var(--axn-gold);color:#000}
.axn-platform-panels{flex:1 1 460px;min-width:0}
.axn-platform-panel{background:linear-gradient(160deg,#1a67ac,#0d3d66);color:#fff;border-radius:24px;padding:32px;min-height:600px;display:flex;flex-direction:column;gap:14px}
.axn-platform-kicker{display:flex;align-items:center;gap:10px;color:var(--axn-gold);font-weight:800;letter-spacing:.06em}
.axn-icon-tile-sm{width:34px;height:34px;border-radius:9px;background:var(--axn-gold);color:#000}
.axn-icon-tile-sm .axn-svg{width:18px;height:18px}
.axn-platform-panel h3{color:#fff;font-size:1.6rem;line-height:1.3;font-weight:600;max-width:22ch}
.axn-gold-checks{display:flex;flex-wrap:wrap;gap:10px 18px;list-style:none;margin:8px 0 12px;padding:0}
.axn-gold-checks li{display:flex;align-items:center;gap:8px}
.axn-window{background:#071828;border-radius:14px;padding:10px;margin-top:auto;min-height:340px;overflow:hidden}
.axn-window img{border-radius:10px;width:100%;height:340px;object-fit:cover;object-position:top}
.axn-window-placeholder{background:
linear-gradient(180deg,#0b1f33,#071422);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.axn-axion-platform-feature-tabs .axn-center{margin-top:22px}
/* Final product CTA (split,
dark panel) */
.axn-final-cta-panel{position:relative;overflow:hidden;border-radius:28px;background:linear-gradient(150deg,#1a67ac,#0d3d66);padding:clamp(28px,4vw,48px);width:100%}
.axn-final-cta-panel .axn-heading,
.axn-final-cta-panel .axn-copy > h1,
.axn-final-cta-panel .axn-copy > h2{color:#fff}
.axn-final-cta-panel .axn-highlight{color:var(--axn-gold)!important}
.axn-final-cta-panel .axn-text{color:rgba(255,255,255,.85)}
.axn-final-cta-panel .axn-muted,
.axn-final-cta-panel .axn-muted a{color:rgba(255,255,255,.85)}
.axn-final-cta-panel .axn-media img{box-shadow:0 30px 60px rgba(4,20,36,.35)}
/* Pricing CTA */
.axn-pricing-panel{position:relative;overflow:hidden;border-radius:28px;background:linear-gradient(160deg,#0d3d66,#0a2c4d);padding:clamp(32px,5vw,64px);width:100%}
.axn-pricing-glow{position:absolute;top:-10%;right:8%;width:280px;height:280px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,216,0,.55),transparent 70%);pointer-events:none;z-index:0}
.axn-pricing-panel .axn-split{position:relative;z-index:1}
.axn-axion-pricing-analysis-cta .axn-copy{flex:1.2 1 420px}
.axn-axion-pricing-analysis-cta .axn-heading{color:#fff!important;font-weight:600}
.axn-axion-pricing-analysis-cta .axn-highlight{color:var(--axn-gold)!important}
.axn-axion-pricing-analysis-cta .axn-text{color:rgba(255,255,255,.82)}
/* Reviews */
.axn-reviews-layout{display:flex;flex-wrap:wrap;gap:28px;align-items:stretch}
.axn-review-stat{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(260px,.92fr);gap:44px;align-items:stretch;background:var(--axn-soft);border-radius:28px;padding:48px}
.axn-reviews-summary{flex:0 1 220px;display:flex;flex-direction:column;gap:8px;justify-content:center}
.axn-reviews-summary strong{font-size:1.4rem}
.axn-reviews-track{display:flex;gap:16px;overflow-x:auto;flex:1 1 520px;padding:6px 2px 16px;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}
.axn-review-stat>.axn-reviews-track{display:block;overflow:hidden;min-width:0;padding:0}
.axn-review-card,
.axn-quote-card{flex:0 0 min(300px,86%);min-width:min(280px,86%);background:#fff;border-radius:18px;padding:18px;box-shadow:0 12px 28px rgba(17,86,150,.1);scroll-snap-align:start}
.axn-review-stat .axn-quote-card{width:100%;max-width:none;min-width:0;height:100%;padding:34px;border:1px solid #dbe6f0;box-shadow:none}
.axn-review-card header,
.axn-quote-card footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.axn-review-who{display:flex;align-items:center;gap:8px}
.axn-review-who img,
.axn-quote-card footer img{width:40px;height:40px;border-radius:50%;object-fit:cover}
.axn-stars{display:inline-flex;gap:2px;color:#FFD800}
.axn-star{opacity:.28}
.axn-star.is-on{opacity:1}
.axn-stat-card{flex:1 1 240px;text-align:center;padding:28px 18px;background:var(--axn-soft);border-radius:20px}
.axn-review-stat>.axn-stat-card{display:flex;flex-direction:column;align-items:center;justify-content:center;background:transparent;border-radius:0;border-left:1px solid #d7e8f5}
.axn-stat-number{font-size:clamp(42px,8vw,88px);font-weight:800;color:var(--axn-blue);line-height:1}
.axn-quote-mark{color:var(--axn-blue);font-size:32px}
.axn-carousel-nav{display:flex;gap:8px;width:100%;justify-content:flex-end}
.axn-carousel-nav button{width:40px;height:40px;border-radius:50%;border:1px solid #dbe3ee;background:#fff;cursor:pointer}
.axn-carousel-nav [data-prev]{transform:scaleX(-1)}
.axn-review-stat>.axn-carousel-nav{grid-column:1;justify-content:flex-end;margin-top:-72px;padding:0 24px 20px;position:relative;z-index:2}
.axn-dots{display:flex;gap:6px}
.axn-dots button{width:8px;height:8px;border-radius:50%;border:0;background:#c5d0de;padding:0}
.axn-google-logo .axn-svg{width:72px;height:24px}
.axn-verified{color:var(--axn-blue)}
.axn-review-rate{display:flex;align-items:center;gap:8px;margin-bottom:8px}
/* Comparison */
.axn-axion-comparison-table .axn-heading{text-align:center;margin-bottom:28px}
.axn-compare-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.axn-compare-table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 12px 32px rgba(0,0,0,.08)}
.axn-compare-table th,
.axn-compare-table td{padding:14px 16px;vertical-align:middle;border-bottom:1px solid #edf1f5;text-align:left}
.axn-compare-table th:first-child,
.axn-compare-table td:first-child{position:sticky;left:0;background:#fff;z-index:1;font-weight:600}
.axn-compare-table .is-axion{background:#115696;color:#fff;text-align:center;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.axn-compare-table th.is-axion{color:#FFD800;font-size:1.1rem;padding-top:18px;padding-bottom:18px}
.axn-compare-table td.is-other,
.axn-compare-table th.is-other,
.axn-compare-table td:last-child,
.axn-compare-table th:last-child{background:var(--axn-soft);text-align:center}
.axn-compare-table th:nth-child(2),
.axn-compare-table td:nth-child(2){text-align:center}
.axn-cell-value{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;min-width:0;text-align:center}
.axn-compare-table td.is-axion .axn-cell-value{width:min(140px,100%);margin:0 auto;justify-content:flex-start}
.axn-compare-table .axn-check{flex:0 0 22px}
.axn-compare-table thead th{background:#f7f9fb;color:var(--axn-blue);font-size:1.05rem}
/* Product showcase — centered copy over gradient panel,
mockup bleeding out the bottom */
.axn-showcase{position:relative;border-radius:32px;overflow:visible;padding:clamp(40px,6vw,72px) clamp(24px,5vw,56px) 0;background:linear-gradient(150deg,#0b3a63 0%,#1f6fb0 55%,#2f86c9 100%);text-align:center;display:flex;flex-direction:column;align-items:center}
.axn-showcase-glow{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(60% 55% at 88% 100%,rgba(190,214,80,.35),transparent 70%);z-index:0}
.axn-showcase .axn-copy{position:relative;z-index:1;max-width:760px;margin:0 auto;color:#fff}
.axn-showcase .axn-heading,
.axn-showcase .axn-text{color:#fff!important}
.axn-showcase .axn-highlight{color:var(--axn-gold)!important}
.axn-showcase .axn-muted,
.axn-showcase .axn-muted a{color:rgba(255,255,255,.85)}
.axn-center-row{justify-content:center;margin:0 auto}
.axn-showcase .axn-btn-secondary{background:#0B2A4A;background-image:none;color:#fff}
.axn-showcase-media{position:relative;z-index:1;width:min(1080px,100%);margin:28px auto 0;transform:none}
.axn-showcase-media .axn-media{margin:0;background:transparent}
.axn-showcase-media img{width:100%;height:auto;display:block;border-radius:18px 18px 0 0;box-shadow:none;object-fit:contain;background:transparent}
.axn-showcase-media:empty,
.axn-showcase-media .axn-media:empty{display:none}
.axn-showcase:has(.axn-showcase-media:empty){padding-bottom:clamp(40px,6vw,72px)}
/* Forms / demo / contact */
.axn-form-cta,
.axn-demo-cta{align-items:center}
.axn-axion-contact-form-cta .axn-heading{text-align:left;width:auto}
.axn-demo-cta{position:relative;overflow:hidden;background:linear-gradient(150deg,#1a67ac,#0d3d66);color:#fff;border-radius:28px;padding:clamp(28px,4vw,48px)}
.axn-demo-cta .axn-heading{color:#fff}
.axn-demo-cta .axn-highlight{color:var(--axn-gold)!important}
.axn-demo-cta .axn-text{color:rgba(255,255,255,.85)}
.axn-demo-cta .axn-trust{color:rgba(255,255,255,.75)}
.axn-agent-light .axn-agent-ring{border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.06)}
.axn-agent-light .axn-float-badge{color:var(--axn-ink)}
.axn-form-card,
.axn-form-embed{background:#fff;color:var(--axn-ink);border-radius:20px;padding:22px;box-shadow:0 16px 40px rgba(17,86,150,.12)}
.axn-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px;width:100%}
.axn-field{display:flex;align-items:center;gap:8px;border:1px solid #d9e2ec;border-radius:12px;padding:12px 14px;min-width:0;width:100%;background:#fff;grid-column:1 / -1}
.axn-field-half{grid-column:auto}
.axn-field-fake{color:rgba(28,28,28,.55)}
.axn-trust{display:flex;align-items:center;gap:8px;color:rgba(28,28,28,.55);font-size:.85rem;margin:10px 0 0}
.axn-form-cta{align-items:center;overflow:visible}
.axn-axion-contact-form-cta,
.axn-axion-demo-form-cta{overflow:visible}
.axn-form-cta .axn-copy{flex:1 1 420px;min-width:0}
.axn-form-cta .axn-heading{text-align:left;margin:0 0 20px}
.axn-agent,
.axn-agent-layout{position:relative;flex:0 1 480px;min-width:0;width:100%;min-height:460px;aspect-ratio:auto;display:block;margin:0 auto;overflow:visible;padding:36px 28px 48px}
.axn-agent:not(.axn-agent-layout){display:grid;grid-template-columns:minmax(160px,260px) minmax(180px,1fr);align-items:center;gap:12px 16px}
/* Those two tracks need 160+180+16 = 356px of content box, inside a container
that used to declare min-width:280px - so anything under ~356px overflowed the
page. min-width is 0 now and the grid collapses to one column on small phones. */
@media (max-width:479px){
.axn-agent:not(.axn-agent-layout){grid-template-columns:1fr}
}
.axn-agent-ring{position:absolute;inset:12% 14%;border-radius:58% 42% 55% 45%/54% 48% 52% 46%;border:1px solid rgba(17,86,150,.18);background:rgba(17,86,150,.05);z-index:0}
.axn-agent-photo{position:relative;z-index:1;width:72%;margin:8% auto 0}
.axn-agent .axn-media img,
.axn-agent-photo img{border-radius:58% 42% 55% 45%/54% 48% 52% 46%;aspect-ratio:1;object-fit:cover;width:100%;height:auto;max-width:none;margin:0}
.axn-float-badge{position:absolute;z-index:2;display:flex;align-items:center;gap:10px;background:#fff;color:var(--axn-ink);border-radius:14px;padding:12px 16px;box-shadow:0 12px 28px rgba(17,86,150,.16);width:max-content;max-width:240px}
.axn-float-badge-1{left:0;top:10%;transform:none}
.axn-float-badge-2{right:0;left:auto;top:40%;transform:none}
.axn-float-badge-3{left:0;top:auto;bottom:8%;transform:none}
.axn-float-badge strong{display:block;font-size:.92rem;line-height:1.25}
.axn-float-badge em{display:block;font-style:normal;color:var(--axn-muted);font-weight:400}
.axn-float-badge .axn-icon-tile{flex:0 0 40px;width:40px;height:40px;border-radius:10px;background:var(--axn-blue);color:#fff}
.axn-float-badge .axn-icon-tile .axn-svg,
.axn-float-badge .axn-icon-tile .axn-icon-img{width:20px;height:20px;color:#fff}
/* FAQ / blog */
/* Centred per the design: FAQ + blog card grid. Key Takeaways and Related
posts are left-aligned in the article layout. Override any of these from the
panel with Style > Heading align. */
.axn-axion-faq .axn-heading{text-align:center}
.axn-faq{display:flex;flex-direction:column;gap:14px;margin:8px auto 0;width:100%;max-width:100%}
.axn-faq-item{border-radius:16px;background:#f4f6f9;transition:box-shadow .2s ease}
.axn-faq-q{width:100%;max-width:100%;min-width:0;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;background:transparent;border:0;border-radius:16px;padding:20px 22px;text-align:left;font:inherit;font-weight:700;font-size:1.08rem;cursor:pointer;color:var(--axn-ink)}
.axn-faq-q>span:first-child{min-width:0;flex:1 1 auto;white-space:normal;overflow-wrap:anywhere}
.axn-faq-icon{position:relative;width:20px;height:20px;flex:0 0 20px;color:var(--axn-blue)}
.axn-faq-ico{position:absolute;inset:0;display:block}
.axn-faq-ico .axn-svg,
.axn-faq-ico svg,
.axn-faq-ico img{width:100%;height:100%;display:block}
.axn-faq-item.is-open .axn-faq-ico-closed,
.axn-faq-item:not(.is-open) .axn-faq-ico-open{display:none}
/* Legacy markup safety: earlier builds printed two bare SVGs. */
.axn-faq-icon>.axn-svg{position:absolute;inset:0}
.axn-faq-item.is-open .axn-faq-icon>.axn-svg:first-child,
.axn-faq-item:not(.is-open) .axn-faq-icon>.axn-svg:last-child{display:none}
.axn-faq-a{padding:0 22px 22px;color:var(--axn-muted)}
.axn-faq-item.is-open{background:linear-gradient(150deg,#0d3d66,#0a2c4d);box-shadow:0 0 40px rgba(57,114,197,.35)}
.axn-faq-item.is-open .axn-faq-q{color:#fff}
.axn-faq-item.is-open .axn-faq-a{color:rgba(255,255,255,.82)}
.axn-faq-item.is-open .axn-faq-icon{color:var(--axn-gold)}
.axn-blog-card{background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 10px 26px rgba(17,86,150,.08);min-width:0}
.axn-blog-card a{color:inherit;text-decoration:none;display:block;padding:0 0 16px}
.axn-blog-card .axn-media{aspect-ratio:16/10;background:var(--axn-soft)}
.axn-blog-card .axn-media img{width:100%;height:100%;object-fit:cover;border-radius:0}
.axn-blog-card h3{margin:8px 16px 4px;font-size:1.05rem}
.axn-blog-card .axn-muted{margin:0 16px}
.axn-form-embed{width:100%;max-width:100%}
.axn-form-embed .elementor-widget,
.axn-form-embed .elementor-widget-form{width:100%;max-width:100%;flex:none}
.axn-form-embed .elementor-form-fields-wrapper{display:grid!important;grid-template-columns:1fr 1fr;gap:12px;width:100%;margin:0}
.axn-form-embed .elementor-field-group{width:100%!important;max-width:none!important;margin:0!important;padding:0!important;min-width:0;grid-column:1 / -1}
.axn-form-embed .elementor-field-group.elementor-col-50,
.axn-form-embed .elementor-col-50{grid-column:auto}
.axn-form-embed .elementor-field-group.elementor-col-100,
.axn-form-embed .elementor-field-group.elementor-col-80,
.axn-form-embed .elementor-field-group.elementor-col-75,
.axn-form-embed .elementor-field-type-submit{grid-column:1 / -1}
.axn-form-embed .elementor-field,
.axn-form-embed input,
.axn-form-embed textarea,
.axn-form-embed select{width:100%;max-width:100%;border-radius:12px;border:1px solid #d9e2ec;padding:14px 16px;background:#fff;box-sizing:border-box}
.axn-form-embed .elementor-button{border-radius:999px!important;background:linear-gradient(90deg,#FFD800,#FFE761)!important;color:#000!important;width:100%;font-weight:800;padding:14px 22px}
.axn-form-cta .axn-btn,
.axn-form-card .axn-btn{width:100%}
.axn-form-card.axn-form-embed{padding:0;background:transparent;box-shadow:none}
.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (min-width:1025px){
.axn-hero-split{flex-wrap:nowrap}
.axn-form-cta,
.axn-demo-cta{flex-wrap:nowrap}
.axn-header-bar{flex-wrap:nowrap}
}
@media (max-width:1024px){
.axn-header-nav,
.axn-header-actions{display:none;width:100%}
.axn-axion-header.is-open .axn-header-nav,
.axn-axion-header.is-open .axn-header-actions{display:flex}
.axn-nav-toggle{display:inline-flex;align-items:center;justify-content:center;margin-left:auto;width:42px;height:42px;flex:0 0 42px}
.axn-header-bar{border-radius:22px}
.axn-card-grid,
.axn-run-grid,
.axn-benefit-row{grid-template-columns:repeat(2,minmax(0,1fr))}
.axn-logo-strip .axn-logo-row{justify-content:flex-start}
.axn-platform{flex-direction:column}
.axn-platform-nav,
.axn-platform-panels{flex:1 1 auto;width:100%;max-width:100%}
.axn-hide-tablet{display:none!important}
}
@media (max-width:767px){
.axn-check-grid,
.axn-card-grid,
.axn-run-grid,
.axn-pain-grid,
.axn-gain-grid,
.axn-benefit-row{grid-template-columns:1fr}
.axn-form-embed .elementor-form-fields-wrapper{grid-template-columns:1fr}
.axn-form-embed .elementor-field-group.elementor-col-50{grid-column:1 / -1}
.axn-section{padding-top:44px;padding-bottom:44px}
.axn-shell{padding-left:16px;padding-right:16px}
.axn-split,
.axn-hero-split,
.axn-form-cta,
.axn-demo-cta{flex-direction:column;align-items:stretch}
.axn-hero-layout-split.axn-hero-side-left .axn-hero-split,
.axn-split-side-left .axn-split,
.axn-split-side-left .axn-hero-split{flex-direction:column-reverse}
.axn-copy,
.axn-media,
.axn-axion-home-hero .axn-copy,
.axn-axion-vet-hero .axn-copy,
.axn-hero-copy{width:100%;max-width:100%;flex:1 1 auto}
.axn-axion-home-hero .axn-media img,
.axn-axion-vet-hero .axn-media img{min-height:0;max-height:none;border-radius:22px 22px 22px 44px}
.axn-axion-header{padding-top:10px;padding-bottom:10px}
.axn-header-top{display:none}
.axn-header-bar{padding:9px 12px 9px 14px;border-radius:18px;min-width:0;justify-content:space-between}
.axn-logo img{height:32px;max-width:150px}
.axn-axion-header.is-open .axn-header-nav{order:3;flex:1 0 100%;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;padding-top:8px}
.axn-axion-header.is-open .axn-header-nav > a{width:100%;padding:10px 4px;border-top:1px solid rgba(255,255,255,.14)}
.axn-axion-header.is-open .axn-header-actions{order:4;flex:1 0 100%;flex-direction:column;align-items:stretch;margin-left:0;padding-top:8px}
.axn-axion-header.is-open .axn-header-actions .axn-btn,
.axn-axion-header.is-open .axn-login{width:100%;justify-content:center}
.axn-industry-card,
.axn-industry-link{min-height:250px}
.axn-platform-tab{padding:12px}
.axn-platform-panel{padding:22px;min-height:0}
.axn-window,
.axn-window img{min-height:150px;height:150px}
.axn-reviews-layout{flex-direction:column}
.axn-review-stat{display:flex;flex-direction:column;gap:22px;padding:20px;border-radius:20px}
.axn-review-stat .axn-quote-card{padding:22px}
.axn-review-stat>.axn-stat-card{border-left:0;border-top:1px solid #d7e8f5;padding:26px 12px 6px}
.axn-review-stat>.axn-carousel-nav{margin:0;padding:0;justify-content:center}
.axn-reviews-summary{flex:1 1 auto;width:100%}
.axn-review-card,
.axn-quote-card{flex-basis:min(280px,86%);min-width:min(260px,86%)}
.axn-agent,
.axn-agent-layout{max-width:320px;margin:0 auto 32px}
.axn-form-cta .axn-heading{text-align:center}
.axn-float-badge{max-width:180px;padding:9px 12px}
.axn-float-badge strong{font-size:.8rem}
.axn-compare-scroll.mode-cards{overflow:visible}
.axn-compare-scroll.mode-cards table{display:block;min-width:0!important;background:transparent;box-shadow:none;overflow:visible}
.axn-compare-scroll.mode-cards thead{display:none}
/* Card mode stacks a label above a value, so a fixed row height clips the
value against the card's overflow:hidden. The per-page control writes
height on th/td at higher specificity, hence !important. */
.axn-compare-scroll.mode-cards th,
.axn-compare-scroll.mode-cards td{height:auto!important;min-height:0!important}
.axn-compare-scroll.mode-cards tbody{display:flex;flex-direction:column;gap:16px}
/* Rebuilt as a 2-column card per the reference: title spans the full
width, then "Axion" and "Others" sit side by side as their own labelled
column each - not the previous 3-row "label beside value" stack, which
also happened to be how the Axion row's label went invisible (fixed
separately, superseded by this rework: the label now lives in its own
coloured header cell, never sharing a background with anything). */
.axn-compare-scroll.mode-cards tr{display:grid;grid-template-columns:1fr 1fr;background:#fff;border:1px solid #e4ebf2;border-radius:14px;overflow:hidden;box-shadow:0 8px 20px rgba(17,86,150,.07)}
/* padding: !important for the same reason as the background further down -
the HIDDEN cell_pad control (0 26px, carried over from the desktop row
spec) has no mobile-specific value of its own, so Elementor cascades
the desktop one straight through and it otherwise wins on specificity. */
/* text-align: !important for the same reason again - a later unconditional
rule (.axn-axion-comparison-table .axn-compare-table tbody th[scope="row"])
ties this selector's class-count and then wins outright on having one
more element in the chain (tbody + th vs just th), specificity that
source order cannot make up for. */
.axn-compare-scroll.mode-cards th[scope="row"]{grid-column:1/-1;position:static!important;display:block;text-align:center!important;font-weight:700;font-size:1.0625rem;padding:18px 16px 14px!important;background:#fff}
.axn-compare-scroll.mode-cards th[scope="row"]::before{content:none}
.axn-compare-scroll.mode-cards td.is-axion,
.axn-compare-scroll.mode-cards td.is-other{position:static!important;display:flex;flex-direction:column;padding:0!important;text-align:center}
.axn-compare-scroll.mode-cards td.is-axion::before,
.axn-compare-scroll.mode-cards td.is-other::before{content:attr(data-label);display:block;padding:10px 12px;font-size:.8125rem;font-weight:700}
.axn-compare-scroll.mode-cards td.is-axion::before{background:#115696;color:#fff}
.axn-compare-scroll.mode-cards td.is-other::before{background:#ECECEC;color:#1C1C1C}
/* !important: a HIDDEN control (axion_bg, default #115696) always emits
{{WRAPPER}} .axn-compare-table .is-axion{background:...} regardless of
any page setting - 4 classes of specificity, which beats this rule's 3
no matter where it sits in the file. Without it the value cell's own
background stayed dark blue while its text was styled dark blue too. */
.axn-compare-scroll.mode-cards td.is-axion{background:#E9F1FB!important}
.axn-compare-scroll.mode-cards td.is-other{background:#fff}
.axn-compare-scroll.mode-cards td.is-axion .axn-cell-value,
.axn-compare-scroll.mode-cards td.is-other .axn-cell-value{width:100%;margin:0;padding:14px 12px;justify-content:center;text-align:center;font-weight:700}
.axn-compare-scroll.mode-cards td.is-axion .axn-cell-value{color:#115696}
.axn-compare-scroll.mode-cards td.is-other .axn-cell-value{color:#333}
.axn-compare-scroll.mode-cards .axn-check{display:none}
.axn-footer-main{display:grid;grid-template-columns:1fr;gap:24px}
.axn-footer-brand,
.axn-footer-cols{width:100%}
.axn-footer-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px}
.axn-footer-tools{flex-direction:row;align-items:center;justify-content:flex-start}
.axn-footer-bottom{flex-direction:column;align-items:flex-start}
.axn-legal{flex-wrap:wrap;gap:8px 14px}
.axn-hide-mobile{display:none!important}
}
@media (max-width:420px){
.axn-footer-cols{grid-template-columns:1fr}
.axn-industry-overlay{padding:8px 16px 16px}
.axn-industry-card h3{font-size:1.2rem}
}
@media (min-width:1025px){
.axn-hide-desktop{display:none!important}
}
.axn-quote-card footer{display:flex;align-items:center;gap:10px;margin-top:16px}
.axn-quote-card footer>div{display:flex;flex-direction:column;min-width:0}
.axn-quote-card footer strong,
.axn-quote-card footer span{display:block;line-height:1.3}
.axn-carousel-nav button{color:var(--axn-blue)}
.elementor-widget-arcadia_axion_demo_form_cta + .elementor-widget-form,
.elementor-widget-arcadia_axion_contact_form_cta + .elementor-widget-form,
.elementor-widget-arcadia_axion_newsletter_form + .elementor-widget-form,
.e-con:has(> .elementor-widget-arcadia_axion_demo_form_cta) + .e-con:has(.elementor-widget-form):not(:has([class*="arcadia_axion_"])),
.e-con:has(> .elementor-widget-arcadia_axion_contact_form_cta) + .e-con:has(.elementor-widget-form):not(:has([class*="arcadia_axion_"])){
display:none!important;
height:0!important;
margin:0!important;
padding:0!important;
overflow:hidden!important
}
@media (max-width:1024px){
.axn-logo-strip:not(.is-dark){flex-wrap:wrap}
.axn-logo-strip:not(.is-dark) .axn-logo-row{flex-wrap:wrap;justify-content:flex-start}
.elementor-widget-arcadia_axion_vet_hero.axn-has-hero-bg::after{
background:linear-gradient(180deg,#F1FBFF 0%,#F1FBFF 42%,rgba(241,251,255,.7) 62%,rgba(241,251,255,0) 88%)
}
}
/* ---------------------------------------------------------------------------
Elementor Global Fonts guard.
Elementor's Site Settings emit ".elementor-kit-N h2",
".elementor-kit-N
button" etc. at specificity (0,
1,
1),
which out-specifies the single-class
rules above. On a site with global typography configured that made section
headings render at the kit's weight instead of 800,
and the FAQ question
buttons at the kit's button weight instead of 700. These re-assert only the
properties that lose,
at (0,
2,
0),
scoped to Axion sections. Colours are
deliberately not repeated here — the per-panel colour rules already win,
and
restating them would override the dark-panel overrides.
--------------------------------------------------------------------------- */
.axn-section .axn-heading{font-weight:600}
.axn-section .axn-faq-q{font-weight:700;font-size:1.08rem}
.axn-section .axn-btn{font-weight:700;line-height:1.2}
.axn-section .axn-eyebrow{font-weight:700}
.axn-section .axn-check-grid li{font-weight:700}
/* ---------------------------------------------------------------------------
Inverted-panel guard.
These sections are fixed design components with their own background, so the
text colour is a property of the panel, not something the page's typography
may decide. Elementor container typography emits rules like
".elementor-9064 .elementor-element.elementor-element-XXXX h2" at (0,3,1),
which ties with our own two-class rules and wins on source order because the
post CSS is printed after this stylesheet. Raising specificity further is a
losing race against arbitrary container settings, so the panel-owned
properties are locked here.
Repaired 2026-08-28: commit 2dfa853 (blog-scope removal) deleted the
.axn-banner / .axn-article-cta / .axn-download selectors AND this comment's
closing delimiter, so from 1.3.0 to 1.5.15 everything below sat inside an
unterminated comment and never applied. The orphaned {font-size:clamp(...)}
block that was left glued to the prose belonged to .axn-banner and has been
dropped with it. The blog-article-rhythm block that followed targeted only
deleted widgets (.axn-axion-key-takeaways, -blog-faq, -article-cta-banner,
-download-cta, -blog-related-posts) and has been removed rather than revived.
--------------------------------------------------------------------------- */
.axn-section .axn-final-cta-panel .axn-heading,
.axn-section .axn-final-cta-panel .axn-copy>h1,
.axn-section .axn-final-cta-panel .axn-copy>h2,
.axn-section .axn-demo-cta .axn-heading,
.axn-section .axn-showcase .axn-heading,
.axn-section .axn-showcase .axn-text{color:#fff!important}
.axn-section .axn-showcase .axn-highlight,
.axn-section .axn-final-cta-panel .axn-highlight,
.axn-section .axn-demo-cta .axn-highlight{color:var(--axn-gold)!important}
/* Axion Dev 1.2.5 PDF parity pass - Home/Vet mobile defaults */
.axn-section .axn-card,
.axn-section .axn-card-item{
border-radius:18px;
overflow:hidden;
}
.axn-section .axn-btn-primary{
background:linear-gradient(135deg,#FFE761 0%,#FFD800 100%);
color:#1C1C1C;
}
.axn-section .axn-btn-secondary{
background:linear-gradient(135deg,#3972C5 0%,#115696 100%);
color:#fff;
}
.axn-section .axn-image-overlay{
position:relative;
min-height:220px;
border-radius:20px;
overflow:hidden;
}
.axn-section .axn-image-overlay:after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.72));
}
@media(max-width:767px){
.axn-section{
padding:40px 0;
}
.axn-shell{
padding-left:18px;
padding-right:18px;
}
.axn-split{
flex-direction:column;
gap:28px;
}
/* Every column of a split carries a fixed flex-basis for the DESKTOP row
layout: .axn-copy 480px, .axn-form-card 520px, .axn-agent 480px,
.axn-integrations-art 500px, .axn-platform-nav 340px,
.axn-reviews-summary 220px. Once .axn-split above turns column, flex-basis
is read on the vertical axis instead of the horizontal one, so each box
stands at its basis HEIGHT no matter how little it holds - ~700px of empty
space above the Salesforce+Google artwork, ~250px under the agent photo in
Home's "Talk To Us". Resetting the basis lets each box size to its own
content again. Scoped to the children of the containers that actually turn
column, so the desktop row is untouched. */
.axn-split > *,
.axn-hero-split > *,
.axn-form-cta > *,
.axn-demo-cta > *{
/* !important because the per-widget overrides that set these bases
(.axn-axion-pricing-analysis-cta .axn-copy, .axn-axion-contact-form-cta
.axn-form-card) all outrank a single-class selector. */
flex-basis:auto !important;
}
/* .axn-agent also props itself open with min-height:460px for the ring and
floating badges - desktop-only framing that leaves a bare gap on phones. */
.axn-agent,
.axn-agent-layout{
min-height:0 !important;
}
.axn-btn-row{
flex-direction:column;
align-items:stretch;
}
.axn-btn{
width:100%;
}
}
/* ---------------------------------------------------------------------------
Home sections 13-14: latest-insights card grid + newsletter band.
Blog-named classes, but page 10360 renders them, so they stay.
--------------------------------------------------------------------------- */
.axn-related-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;width:100%}
.axn-newsletter{text-align:center;max-width:640px;margin:0 auto}
.axn-newsletter-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center}
.axn-newsletter-row .axn-field{flex:1 1 280px;max-width:360px}
.axn-cat{display:inline-block;margin:12px 16px 0;color:var(--axn-blue);font-weight:700;font-size:.8rem}
.axn-newsletter .axn-form-embed .elementor-form-fields-wrapper{flex-wrap:wrap;align-items:center;justify-content:center}
.axn-newsletter .axn-form-embed .elementor-field-group{flex:1 1 280px;max-width:360px}
.axn-newsletter .axn-form-embed .elementor-field-type-submit{flex:0 0 auto}
@media (max-width:1024px) {
.axn-card-grid,.axn-run-grid,.axn-related-grid,.axn-benefit-row{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px) {
.axn-check-grid,.axn-card-grid,.axn-run-grid,.axn-pain-grid,.axn-gain-grid,.axn-related-grid,.axn-benefit-row{grid-template-columns:1fr}
}
/* =============================================================================
DESIGN PARITY PASS - v1.3.0
Every number here is measured off the two Figma frames:
Home V3 1485 x 6717 (page 1440, content column 1060 at x190)
Vet V4 1441 x 5519 (same column)
Kept as one trailing block so the values are auditable in one place and win
on source order rather than on selector weight.
============================================================================= */
/* -- Container ---------------------------------------------------------------
The design column is 1060 wide starting at x190 on a 1440 page. 1108 minus
2x24 of padding lands content on exactly 190/1250, and the padding keeps a
gutter once the viewport drops below the frame width. */
.axn-section > .axn-shell,
.axn-section .axn-shell { max-width: 1108px; padding-left: 24px; padding-right: 24px }
/* -- Section rhythm ----------------------------------------------------------
Measured top/bottom whitespace per band, rounded to the nearest 4. */
.axn-section { padding: 96px 0 }
.axn-axion-benefits-strip { padding: 52px 0 }
.axn-axion-industry-cards { padding: 92px 0 96px }
.axn-axion-software-integrations { padding: 64px 0 100px }
.axn-axion-how-we-run { padding: 88px 0 64px }
.axn-axion-platform-feature-tabs { padding: 8px 0 100px }
.axn-axion-google-reviews { padding: 68px 0 }
.axn-axion-product-showcase-cta { padding: 0 0 100px }
.axn-axion-contact-form-cta { padding: 70px 0 96px }
.axn-axion-trusted-practices { padding: 38px 0 42px }
.axn-axion-pain-point-cards { padding: 52px 0 0 }
.axn-axion-benefits-comparison-cards { padding: 60px 0 56px }
.axn-axion-practice-software-logos { padding: 30px 0 0 }
.axn-axion-review-statistics { padding: 18px 0 36px }
.axn-axion-demo-form-cta { padding: 0 }
.axn-axion-comparison-table { padding: 56px 0 64px }
.axn-axion-faq { padding: 100px 0 40px }
.axn-axion-final-product-cta { padding: 40px 0 86px }
/* -- Fixed band heights ------------------------------------------------------
The frames give these sections an exact height regardless of how much copy is
in them. Pinning the height and centring the shell holds the band when the
real copy is shorter or longer than the design's placeholder. */
.axn-section { justify-content: center }
.axn-axion-benefits-strip { min-height: 183px }
.axn-axion-industry-cards { min-height: 1066px }
.axn-axion-software-integrations { min-height: 545px }
.axn-axion-pricing-analysis-cta { min-height: 501px }
.axn-axion-google-reviews { min-height: 534px }
.axn-axion-contact-form-cta { min-height: 694px }
.axn-axion-trusted-practices { min-height: 183px }
/* how-we-run and the tabs share the 2417..3887 stretch. The boundary is the
midpoint of the gap between the last 190-tall card (ends 3037.9) and the tabs
heading (~3150), which splits it 677 / 793. */
.axn-axion-how-we-run { min-height: 677px }
.axn-axion-platform-feature-tabs { min-height: 793px }
.axn-axion-demo-form-cta { min-height: 463px }
/* Vet bands. The #F1FBFF stretch 803..2152 holds both card sections; the split
is the midpoint of the gap between the last pain card (ends 1363.6) and the
"What You Gain" heading (~1466). These sum to 4994 which, plus the 119 nav,
puts the footer at 5113 - where the frame puts it. */
.axn-axion-pain-point-cards { min-height: 612px }
.axn-axion-benefits-comparison-cards { min-height: 737px }
.axn-axion-practice-software-logos { min-height: 288px }
.axn-axion-review-statistics { min-height: 350px }
.axn-axion-comparison-table { min-height: 585px }
.axn-axion-faq { min-height: 762px }
.axn-axion-final-product-cta { min-height: 513px }
/* The pinned heights above come straight from the Figma frames, and they hold a
band at the design's height whatever the real copy does. The cost only shows
once the copy is SHORTER than the frame: .axn-section centres its shell, so
the surplus splits evenly and lands as extra space above and below the
content - "Run Your Own Office" carried 99px at each end on top of its
padding, reading as 171px against a neighbour's 72px. No padding value can
correct that, because the gap is not padding.
An even vertical rhythm is worth more than matching a frame height, so
content sections size to their content and the padding alone sets the gap.
Sections whose copy already exceeds the frame height never used these anyway.
Heroes keep theirs (they clear the floating header), as does the footer. */
.axn-section:not([class*="hero"]):not(.axn-axion-header):not(.axn-axion-footer) {
min-height: 0;
}
/* -- Section backgrounds -----------------------------------------------------
The design paints these full-bleed behind the column, so they belong on the
section rather than on an Elementor wrapper. */
.axn-axion-home-hero { background: linear-gradient(180deg,#F5FCFF,#F1FBFF) }
.axn-axion-benefits-strip { background: #fff }
.axn-axion-industry-cards { background: #F1FBFF }
.axn-axion-software-integrations { background: #F9F9F9 }
.axn-axion-how-we-run { background: #F5FCFF }
.axn-axion-platform-feature-tabs { background: #fff }
.axn-axion-pricing-analysis-cta { background: #0D2E57 }
.axn-axion-google-reviews { background: #fff }
.axn-axion-product-showcase-cta { background: #fff }
.axn-axion-contact-form-cta { background: #F1FBFF }
.axn-axion-vet-hero { background: linear-gradient(180deg,#F5FCFF,#F0FBFF) }
.axn-axion-trusted-practices { background: #0D2E57 }
.axn-axion-pain-point-cards,
.axn-axion-benefits-comparison-cards { background: #F1FBFF }
.axn-axion-practice-software-logos,
.axn-axion-review-statistics,
.axn-axion-faq,
.axn-axion-final-product-cta { background: #fff }
.axn-axion-demo-form-cta { background: linear-gradient(180deg,#115696,#3972C5) }
/* -- Buttons -----------------------------------------------------------------
Pill height 42, radius 21, measured on both frames. The gradient runs
left-to-right at 90deg in the design, not the 135deg the last build shipped. */
.axn-section .axn-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
min-height: 42px; padding: 0 22px; border-radius: 21px;
font-size: .9375rem; font-weight: 700; line-height: 1; white-space: nowrap;
border: 0; text-decoration: none; transition: filter .18s ease, box-shadow .18s ease;
}
/* 90deg over a 178px pill puts almost no distance between two near-identical
yellows, so the primary button read as a flat block of colour. 135deg shortens
the gradient line on a wide-short pill, which makes the same two brand tokens
travel faster and actually show. Light corner first, brand gold second, so the
button reads lit from the top-left like the panels do.
This rule lands AFTER the base one and was re-asserting 90deg over a 135deg
already set at line ~728 of the base sheet - the earlier attempt at this fix,
quietly undone. All three definitions now match. */
.axn-section .axn-btn-primary { background: linear-gradient(135deg, var(--axn-gold-2) 0%, var(--axn-gold) 100%); color: #1C1C1C; box-shadow: 0 8px 18px rgba(255,216,0,.28) }
.axn-section .axn-btn-secondary { background: linear-gradient(135deg, var(--axn-blue-2) 0%, var(--axn-blue) 100%); color: #fff; box-shadow: 0 8px 18px rgba(17,86,150,.22) }
.axn-section .axn-btn-tertiary,
.axn-section .axn-btn-outline { background: transparent; color: #1C1C1C; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2) }
.axn-section .axn-btn-primary:hover,
.axn-section .axn-btn-secondary:hover { filter: brightness(1.04) }
.axn-section .axn-btn-tertiary:hover,
.axn-section .axn-btn-outline:hover { background: rgba(0,0,0,.04); color: #1C1C1C }
.axn-section .axn-btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px }
/* -- Typography --------------------------------------------------------------
Measured off the frames from cap heights and line pitches rather than taken
from the earlier blog spec, which is a different frame:
H1 cap 34 -> 46px, pitch 52-56 -> line-height 1.17
H2 cap 25 -> 36px
body pitch 22 -> 14px at 1.57
Weight is 500, not the 800 the suite shipped. Measured by rendering the same
string at each weight and comparing to the frame: "How We Run Things" is 324
wide there, and comes out 325 at 500/-.01em, 351 at 600 and 354 at 700. */
.axn-section .axn-heading { font-weight: 500; letter-spacing: -.01em }
.axn-section h1.axn-heading { font-size: clamp(2rem, 3.2vw, 2.875rem); line-height: 1.17; font-weight: 500 }
.axn-section h2.axn-heading { font-size: clamp(1.55rem, 2.5vw, 2.25rem); line-height: 1.2; font-weight: 500 }
.axn-section h3 { font-size: 1.125rem; line-height: 1.3; font-weight: 600 }
.axn-section .axn-text { font-size: .875rem; line-height: 1.57 }
.axn-section .axn-muted { font-size: .875rem; line-height: 1.57 }
.axn-section .axn-eyebrow { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600 }
/* Section heading blocks. The frames put ~14 between an H2 and its standfirst
and ~26 from the standfirst to the first card, against the stock .45em. */
.axn-section > .axn-shell > .axn-heading { margin-bottom: .3em }
/* The frame sets these standfirsts on one line, so the box has to be wide. */
.axn-section > .axn-shell > .axn-muted.axn-center { margin: 0 auto; max-width: 920px }
.axn-axion-platform-feature-tabs .axn-btn-row,
.axn-axion-platform-feature-tabs > .axn-shell > .axn-btn { margin-top: 18px }
/* =============================================================================
CHROME - header and footer, which sit on the page itself because both target
pages use the Elementor Canvas template and it renders no theme chrome.
Frame: header band 119 with a 1060x60 r15 navy bar at x190 and a 167x38 r19
pill; footer band 405 on a #002B52 -> #0099DC gradient.
============================================================================= */
/* The frame puts the nav INSIDE the hero band - the pill sits at y59 of a band
that starts at y0 - so the header floats over the hero photo rather than
occupying its own strip above it. It is taken out of flow; the hero carries
the 119px of space it used to take up. */
.axn-axion-header {
position: absolute; top: 0; left: 0; right: 0; z-index: 50;
padding: var(--axn-hdr-pad, 13px 0 0); min-height: var(--axn-hdr-min-h, 119px);
background: transparent;
}
.axn-axion-header > .axn-shell { display: flex; flex-direction: column; gap: var(--axn-hdr-rows-gap, 20px) }
.axn-axion-header .axn-header-top { min-height: var(--axn-hdr-top-h, 26px) }
.axn-axion-header .axn-header-bar {
height: var(--axn-hdr-bar-h, 60px);
min-height: var(--axn-hdr-bar-h, 60px);
border-radius: var(--axn-hdr-bar-radius, 15px);
padding: var(--axn-hdr-bar-pad, 0 22px);
background: var(--axn-hdr-bar-bg, #0D2E57);
}
.axn-axion-header .axn-header-nav { height: var(--axn-hdr-bar-h, 60px); min-height: 0 }
.axn-axion-header .axn-header-actions { height: 38px }
.axn-axion-header .axn-header-actions .axn-btn { min-height: 38px; height: 38px; border-radius: 19px; padding: 0 18px; font-size: .875rem }
.axn-axion-header .axn-logo img { max-height: var(--axn-hdr-logo-h, 36px); width: auto }
.axn-axion-footer { padding: 48px 0 26px; min-height: 405px; background: linear-gradient(180deg,#002B52,#0099DC) }
.axn-axion-footer > .axn-shell { display: flex; flex-direction: column; gap: 22px }
/* -- Icon wrappers -----------------------------------------------------------
.axn-svg is sized in em, so an icon box that sets a pixel size without sizing
the svg with it crops the glyph.
Scoped to the card icon boxes that actually carry an explicit pixel size. A
blanket "svg fills its wrapper" rule cannot be used here: .axn-check is an
inline mark inside a text line and inside table cells, so 100%/100% resolves
against an auto-sized parent and every checklist, gain card and comparison
row grows without limit - it added 1468px to the Vet table alone. */
.axn-section .axn-icon,
.axn-section .axn-icon-tile { overflow: visible }
.axn-axion-pain-point-cards .axn-pain-card .axn-icon > .axn-svg,
.axn-axion-pain-point-cards .axn-pain-card .axn-icon > svg,
.axn-axion-benefits-comparison-cards .axn-gain-card .axn-icon > .axn-svg,
.axn-axion-benefits-comparison-cards .axn-gain-card .axn-icon > svg,
.axn-axion-how-we-run .axn-run-card .axn-icon-tile > .axn-svg,
.axn-axion-how-we-run .axn-run-card .axn-icon-tile > svg { width: 100%; height: 100%; display: block }
/* Inline marks keep an intrinsic size instead. */
.axn-section .axn-check { overflow: visible; flex: 0 0 auto; width: 18px; height: 18px }
.axn-section .axn-check > .axn-svg,
.axn-section .axn-check > svg { width: 18px; height: 18px; overflow: visible }
/* -- Card system -------------------------------------------------------------
One radius, one shadow and one gutter across every card row. Each card keeps
its own surface - the industry cards are image-backed, the pain cards are the
frame's pale red, the third What-You-Gain card is reversed out in blue - so
only the frame around them is unified. */
.axn-section .axn-pain-card,
.axn-section .axn-gain-card,
.axn-section .axn-run-card {
border-radius: 24px; box-shadow: 0 12px 35px rgba(17,86,150,.08);
transition: box-shadow .2s ease;
}
.axn-section .axn-pain-card:hover,
.axn-section .axn-gain-card:hover,
.axn-section .axn-run-card:hover { box-shadow: 0 18px 45px rgba(17,86,150,.14) }
/* =============================================================================
HOME
============================================================================= */
/* A background-layout hero paints its photo and colour on the Elementor widget
wrapper. Elementor then nests .elementor-widget-container between that wrapper
and the section, so the section is a GRANDCHILD - a child combinator here
matches nothing on the live site and the section's own opaque background
covers the photo. Descendant selector, deliberately. */
.axn-hero-layout-background .axn-section { background: transparent }
.axn-hero-layout-background > .elementor-widget-container { min-height: inherit; display: flex; flex-direction: column }
.axn-hero-layout-background .axn-section { flex: 1 1 auto }
/* 02 Hero - band 0..620, nav ends 119, so 501 of usable height. The photo is
full-bleed to the right edge, which a boxed shell cannot do on its own. */
.axn-axion-home-hero { padding: 119px 0 0; position: relative; overflow: hidden }
.axn-axion-home-hero > .axn-shell { position: relative; z-index: 2; min-height: 501px; display: flex; align-items: center }
/* The frame breaks the H1 as "The Phone Is / Costing You More / Than The Phone
Bill." while its standfirst runs wider, so the heading carries its own
measure. Measured on the live page at 46px/500: "Than The Phone Bill." is 458
and must fit, "The Phone Is Costing" is 481 and must not, so the window is
[458, 481) and 470 sits in the middle of it. Taken from the live page rather
than the harness - the two disagreed by a line, and the live page is what
ships. */
.axn-axion-home-hero .axn-hero-copy { max-width: 620px; padding: 36px 0 38px }
.axn-axion-home-hero h1.axn-heading { max-width: 470px }
.axn-axion-home-hero .axn-check-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px 32px; margin: 20px 0 22px }
.axn-axion-home-hero .axn-btn-row { gap: 18px }
/* 03 Benefits strip - three 70x70 r8 blue tiles on a 340 pitch. */
.axn-axion-benefits-strip .axn-benefit-row { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 40px; align-items: center }
.axn-axion-benefits-strip .axn-benefit { display: flex; align-items: center; gap: 18px }
.axn-axion-benefits-strip .axn-icon-tile {
flex: 0 0 70px; width: 70px; height: 70px; border-radius: 8px;
background: linear-gradient(135deg,#115696,#3972C5); color: #fff;
display: flex; align-items: center; justify-content: center;
}
.axn-axion-benefits-strip .axn-icon-tile .axn-svg,
.axn-axion-benefits-strip .axn-icon-tile .axn-icon-img,
.axn-axion-benefits-strip .axn-icon-tile .axn-icon-lib { width: 32px; height: 32px }
/* 04 Industry cards - 303.9 x 360 r16, 20 gutter; row A three cards, row B four.
The badge is a 52 circle 136 down from the card top; the pill sits 40 up from
the bottom with a 30 inset, which is what the overlay padding reproduces. */
.axn-axion-industry-cards .axn-industry-grid { display: flex; flex-direction: column; gap: 32px; margin-top: 26px }
.axn-axion-industry-cards .axn-industry-row { display: grid; gap: 32px; justify-content: center }
/* 304px was measured off the design frame, whose content area was wider than our
1108px shell (1060 inside the padding). Four fixed 304s plus three 32px gaps
need 1312px, so row-b overflowed by 252px at every desktop width - visible as
page-level horizontal scroll below ~1300px, where the viewport stops hiding it.
minmax(0, 304px) keeps the design width where there is room and shrinks instead
of overflowing where there is not. */
/* Column count, card width and card height per row, all through variables so a
section can state the design's numbers without moving any other page. V3 draws
row A as two 520x558 cards and row B as five 304x416.5 in a full-bleed strip;
the shipped layout is three and four at 304x360, which is what the fallbacks
preserve. */
.axn-axion-industry-cards .axn-industry-row-a {
grid-template-columns: repeat(var(--axn-ind-a-cols, 3), minmax(0, var(--axn-ind-a-w, 304px)));
}
.axn-axion-industry-cards .axn-industry-row-b {
grid-template-columns: repeat(var(--axn-ind-b-cols, 4), minmax(0, var(--axn-ind-b-w, 304px)));
}
.axn-axion-industry-cards .axn-industry-row-a .axn-industry-card {
min-height: var(--axn-ind-a-h, 360px); height: var(--axn-ind-a-h, 360px);
}
.axn-axion-industry-cards .axn-industry-row-b .axn-industry-card {
min-height: var(--axn-ind-b-h, 360px); height: var(--axn-ind-b-h, 360px);
}
.axn-axion-industry-cards .axn-industry-card {
min-height: 360px; height: 360px; border-radius: 24px;
box-shadow: 0 12px 35px rgba(17,86,150,.08); transition: box-shadow .2s ease;
}
.axn-axion-industry-cards .axn-industry-card:hover { box-shadow: 0 18px 45px rgba(17,86,150,.14) }
/* Sampling the frame's first card down its middle: the photo reads clearly to
about a third, dims through the middle and is solid navy from ~65%. */
.axn-axion-industry-cards .axn-industry-card::before {
background: linear-gradient(180deg, rgba(8,28,48,0) 30%, rgba(11,42,74,.55) 48%, rgba(11,42,74,.92) 60%, #0B2A4A 66%);
}
.axn-axion-industry-cards .axn-industry-overlay { padding: 0 30px 40px; gap: 0 }
/* The frame stacks these: badge at +136, title at +208, pill at +278. The head
defaults to a flex ROW, which put the badge beside the title and squeezed
"Veterinary Practices" onto two lines. */
.axn-axion-industry-cards .axn-industry-head { display: flex; flex-direction: column; align-items: flex-start }
.axn-axion-industry-cards .axn-industry-badge { width: 52px; height: 52px; flex: 0 0 52px; margin: 0 0 20px !important }
/* Titles WRAP. This carried white-space: nowrap to hold each one on a single line,
which works until a label is longer than its card - "Consumer Services" measures
256px inside a 270px card and the card's padding pushed it under overflow:hidden,
so the client saw "Consumer Servic". A title that does not fit should take two
lines, not lose its end. The card is a fixed 360 with its content bottom-aligned,
so a second line pushes upward into space that is already there. */
.axn-axion-industry-cards .axn-industry-head h3 {
font-size: 1.3125rem; line-height: 1.2; color: #fff; margin: 0 0 30px;
white-space: normal; overflow-wrap: anywhere;
}
.axn-axion-industry-cards .axn-industry-cta { min-height: 42px; border-radius: 21px; padding: 6px 16px; font-size: .875rem }
/* 05 Software integrations - copy left, artwork right, no card. The stock
380x280 art box is bigger than the 501x161 logo lockup the frame uses. */
.axn-axion-software-integrations .axn-split { gap: 56px; align-items: center }
.axn-axion-software-integrations .axn-copy { flex: 1 1 480px; max-width: 520px }
.axn-axion-software-integrations .axn-media { flex: 1 1 500px }
.axn-axion-software-integrations .axn-integrations-art { min-height: 0; flex: 1 1 500px }
/* The 767px reset for these same two flex-basis values lives earlier in this
file (the shared mobile block, "software-integrations mobile gap" fix) -
but these three lines have no media guard of their own, so on the cascade
they are UNCONDITIONAL and, being later in the file, beat that earlier
mobile-only rule outright at every width, phone included. Restating the
reset here, after the rule that was clobbering it, is what actually makes
it win on mobile. */
@media (max-width: 767px) {
.axn-axion-software-integrations .axn-copy,
.axn-axion-software-integrations .axn-integrations-art { flex: 1 1 auto }
}
/* 06 How we run - six 250x190 r15 cards, 20 gutter, centred so the last row of
two sits under the middle of the row of four, exactly as the frame shows. */
.axn-axion-how-we-run .axn-run-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-top: 40px }
.axn-axion-how-we-run .axn-run-card {
flex: 0 0 250px; width: 250px; height: 190px; min-height: 190px; border-radius: 24px;
background: #fff; padding: 22px 16px 18px; overflow: visible;
display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
}
/* The card is 250x190 flat. At the stock type sizes the icon, a two-line title
and a three-line body come to 236, so the type has to come down with it. */
.axn-axion-how-we-run .axn-run-card .axn-icon-tile { margin: 0 auto 8px; width: 40px; height: 40px }
.axn-axion-how-we-run .axn-run-card .axn-icon-tile .axn-svg,
.axn-axion-how-we-run .axn-run-card .axn-icon-tile .axn-icon-img,
.axn-axion-how-we-run .axn-run-card .axn-icon-tile .axn-icon-lib { width: 36px; height: 36px }
.axn-axion-how-we-run .axn-run-card h3 { font-size: .9375rem; line-height: 1.25; margin: 0 0 6px; color: #115696 }
.axn-axion-how-we-run .axn-run-card .axn-muted { font-size: .75rem; line-height: 1.45; margin: 0 }
/* 07 Platform tabs - 436.7 nav column, 69.7 tall items on a 77.2 pitch, and a
697 x 455.5 r14.5 panel. */
.axn-axion-platform-feature-tabs .axn-platform { display: grid; grid-template-columns: var(--axn-tabs-nav-w, 35%) 1fr; gap: var(--axn-tabs-content-gap, 48px); align-items: start; margin-top: 8px }
.axn-axion-platform-feature-tabs .axn-platform-nav { display: flex; flex-direction: column; gap: var(--axn-tabs-gap, 7px) }
.axn-axion-platform-feature-tabs .axn-platform-tab {
min-height: 70px; border-radius: 14px; background: #F8F8F8; border: 0;
display: flex; align-items: center; gap: 14px; padding: 0 20px; text-align: left; cursor: pointer;
}
.axn-axion-platform-feature-tabs .axn-platform-tab[aria-selected="true"],
.axn-axion-platform-feature-tabs .axn-platform-tab.is-active { background: linear-gradient(135deg,#115696,#3972C5); color: #fff }
.axn-axion-platform-feature-tabs .axn-platform-tab .axn-icon-tile { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 8px }
/* The panel is a fixed 697x455.5 and the 640x286.8 screenshot is flush to its
bottom edge, i.e. cropped by the panel rather than scaled to fit. The stock
600px min-height plus an uncropped image is what made this section 300 too
tall. */
.axn-axion-platform-feature-tabs .axn-platform-panel {
border-radius: 16px; height: 456px; min-height: 456px; overflow: hidden; position: relative;
padding: 26px 30px 0; gap: 10px; background: linear-gradient(135deg,#115696,#0A3A70);
}
/* A soft decorative bloom behind the screenshot, as the frame has. */
.axn-axion-platform-feature-tabs .axn-platform-panel::after {
content: ""; position: absolute; right: -12%; top: -18%; width: 62%; aspect-ratio: 1;
border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.16), transparent 68%);
pointer-events: none;
}
.axn-axion-platform-feature-tabs .axn-platform-panel > * { position: relative; z-index: 1 }
.axn-axion-platform-feature-tabs .axn-platform-panel .axn-media { margin-top: auto; height: 287px; overflow: hidden }
/* These declarations were written for a FLAT screenshot cropped to the panel
bottom - top-only radius, a box shadow to lift it off the panel, cover to fill.
The asset is now Tablet-1-1-1.png, a device mockup on a transparent background
that carries its own rounded corners and its own drop shadow. Against that, the
radius clips nothing, and the box-shadow paints a hard RECTANGLE behind a
rounded device. Amended here rather than overridden further down: this rule is
(0,3,1) and out-specifies anything scoped to just the widget and the image. */
.axn-axion-platform-feature-tabs .axn-platform-panel .axn-media img {
width: 100%; height: auto; max-height: 100%;
object-fit: contain; object-position: center bottom;
border-radius: 0; box-shadow: none;
}
/* Tabs: active is solid brand blue, inactive is transparent with dark text. */
.axn-axion-platform-feature-tabs .axn-platform-tab { background: transparent; color: #1C1C1C }
.axn-axion-platform-feature-tabs .axn-platform-tab[aria-selected="true"],
.axn-axion-platform-feature-tabs .axn-platform-tab.is-active { background: #115696; color: #fff }
/* Three checks on one row, as the frame lays them out at x629.8/820.8/981.8. */
.axn-axion-platform-feature-tabs .axn-gold-checks { display: flex; flex-wrap: nowrap; gap: 16px; font-size: .8125rem }
.axn-axion-platform-feature-tabs .axn-platform-panel .axn-heading { font-size: 1.5rem; line-height: 1.25 }
/* 08 Pricing CTA - navy band, copy left, device shot right. The frame has no
card here: the navy IS the full-bleed band, so the widget's inner panel has to
stop painting its own darker gradient and stop adding a second padding ring. */
.axn-axion-pricing-analysis-cta .axn-pricing-panel { background: none; border-radius: 0; padding: 0; overflow: visible }
.axn-axion-pricing-analysis-cta .axn-pricing-glow { display: none }
.axn-axion-pricing-analysis-cta .axn-heading,
.axn-axion-pricing-analysis-cta .axn-muted { color: #fff }
.axn-axion-pricing-analysis-cta .axn-highlight { color: #FFD800 }
.axn-axion-pricing-analysis-cta .axn-text { color: rgba(255,255,255,.82) }
.axn-axion-pricing-analysis-cta .axn-copy { flex: 1 1 460px; max-width: 500px }
/* 09 Google reviews - summary block then 264 x 204 r11 cards on a 288 pitch that
run off the right edge of the frame, i.e. a scroller, not a grid. */
.axn-axion-google-reviews .axn-reviews-layout { display: flex; align-items: center; gap: 28px; margin-top: 34px }
.axn-axion-google-reviews .axn-reviews-summary { flex: 0 0 168px; text-align: center }
.axn-axion-google-reviews .axn-reviews-track { gap: 24px; padding: 4px 0 12px }
.axn-axion-google-reviews .axn-review-card {
flex: 0 0 264px; width: 264px; min-height: 204px; border-radius: 14px;
background: #F6F6F6; padding: 20px 22px; scroll-snap-align: start;
display: flex; flex-direction: column; gap: 10px;
}
.axn-axion-google-reviews .axn-reviews-summary { display: flex; flex-direction: column; align-items: center; gap: 6px }
/* 10 Product showcase - a solid 1060 x 594 r30 gradient panel. The device shot
sits flush to the bottom edge and is cropped by the panel, not scaled into it,
so the panel needs a real height and overflow:hidden. */
.axn-axion-product-showcase-cta .axn-showcase {
border-radius: 30px; min-height: 594px; overflow: hidden;
padding: 56px 40px 0; background: linear-gradient(135deg,#115696,#3972C5);
}
.axn-axion-product-showcase-cta .axn-showcase-media {
margin: auto 0 0; max-height: var(--axn-showcase-media-h, 258px); overflow: hidden; position: relative;
background: transparent;
/* height:auto is a visual no-op and is here on purpose. The generated
control axnp_showcase_media_height was derived from the ::before's
height, and deleting that pseudo-element took the control with it - a key
that has existed since the 1.5.16 baseline and could hold a saved value.
Declaring height keeps the control registered. */
height: auto;
}
/* Written for a FLAT screenshot: a rounded top edge, a box shadow to lift it
off the gradient, and cover to fill a fixed crop. Against a TRANSPARENT
mockup all three draw a box around nothing - the shadow is rectangular so
it outlines the image's bounding box, and the radius clips air. Same
treatment already removed from the platform-tabs mockup for the same
reason. contain also stops the device being cropped. */
.axn-axion-product-showcase-cta .axn-showcase-media img {
object-fit: contain; object-position: bottom center;
border-radius: 0;
box-shadow: none;
}
/* The 74px feather across the top is gone with the rest of the flat-screenshot
treatment. It existed to blend a hard rectangular edge into the gradient;
over a transparent mockup it just painted a lighter blue band across the
artwork, which is what showed up as a blue line around the image. */
.axn-axion-product-showcase-cta .axn-btn-row { justify-content: center }
/* 11 Contact form CTA - 520 wide r13 card, 45 tall r7.5 fields in a two-column
grid with a 14 gutter, 44 tall r22 submit. */
.axn-axion-contact-form-cta .axn-form-card { flex: 0 0 520px; max-width: 520px; border-radius: 13px; padding: 30px; background: #fff }
.axn-axion-contact-form-cta .axn-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px 14px }
.axn-axion-contact-form-cta .axn-field-full { grid-column: 1 / -1 }
.axn-axion-contact-form-cta .axn-field { min-height: 45px; border-radius: 7.5px }
.axn-axion-contact-form-cta .axn-form-cta,
.axn-axion-contact-form-cta .axn-form-card .axn-btn-primary { width: 100%; min-height: 44px; border-radius: 22px; margin-top: 10px }
/* 12 From the Blog + 13 Newsletter --------------------------------------------
Neither is in the Home V3 frame, which ends at the footer, so there is nothing
to measure these against. They are built to the page's own system instead:
1060 column, 14px body, 500 headings, and the 20px gutter and 16px radius the
industry cards use. blog_card_grid runs on source=query, so the cards are real
posts with their real featured images. */
.axn-axion-blog-card-grid { background: #fff; padding: 92px 0 96px }
.axn-axion-newsletter-form { background: #F9F9F9; padding: 72px 0 76px }
.axn-axion-blog-card-grid > .axn-shell > .axn-heading { text-align: center }
.axn-axion-blog-card-grid .axn-related-grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; margin-top: 34px }
.axn-axion-blog-card-grid .axn-blog-card {
border-radius: 16px; overflow: hidden; background: #fff;
border: 1px solid #ECECEC; box-shadow: none; display: flex; flex-direction: column;
}
.axn-axion-blog-card-grid .axn-blog-card .axn-media { aspect-ratio: 16 / 10; overflow: hidden; background: #F1FBFF }
.axn-axion-blog-card-grid .axn-blog-card .axn-media img { width: 100%; height: 100%; object-fit: cover }
.axn-axion-blog-card-grid .axn-cat { margin: 16px 18px 0; font-size: .75rem; letter-spacing: .04em }
.axn-axion-blog-card-grid .axn-blog-card h3 { margin: 6px 18px 8px; font-size: .9375rem; line-height: 1.35 }
.axn-axion-blog-card-grid .axn-blog-card .axn-muted { margin: 0 18px 18px; font-size: .75rem }
.axn-axion-newsletter-form .axn-newsletter { max-width: 640px; margin: 0 auto; text-align: center }
.axn-axion-newsletter-form .axn-newsletter .axn-muted { margin: 0 auto 22px; max-width: 520px }
.axn-axion-newsletter-form .axn-newsletter-row { gap: 12px; justify-content: center }
.axn-axion-newsletter-form .axn-field { min-height: 45px; border-radius: 7.5px; background: #fff; flex: 1 1 320px; max-width: 380px }
.axn-axion-newsletter-form .axn-btn { min-height: 45px; border-radius: 22.5px }
/* 11b Floating badges. Absolute against the media column, never the section, so
they cannot drift over the form or off the page. */
.axn-axion-contact-form-cta .axn-agent-layout,
.axn-axion-demo-form-cta .axn-agent-layout { position: relative }
.axn-axion-contact-form-cta .axn-float-badge,
.axn-axion-demo-form-cta .axn-float-badge {
position: absolute; z-index: 3; max-width: 232px;
background: #fff; border-radius: 12px; padding: 10px 14px;
box-shadow: 0 10px 30px rgba(17,86,150,.14);
}
.axn-axion-contact-form-cta .axn-float-badge-1,
.axn-axion-demo-form-cta .axn-float-badge-1 { top: 4%; left: 0 }
.axn-axion-contact-form-cta .axn-float-badge-2,
.axn-axion-demo-form-cta .axn-float-badge-2 { top: 42%; left: -6% }
.axn-axion-contact-form-cta .axn-float-badge-3,
.axn-axion-demo-form-cta .axn-float-badge-3 { bottom: 6%; right: -4% }
/* 11c Talk To Us / demo agent image, Home and Vet both. The base
.axn-agent-ring/.axn-agent img rules assume a small square headshot and
paint a blue organic blob behind it, cropping the photo into a circle to
match. Both pages' agent image is now the same single flat graphic with
the photo, ring and all three stat cards already composited into one
rectangle - the blob painted a second, redundant circle behind it and the
circular crop cut the composited text off at the edges. */
.axn-axion-contact-form-cta .axn-agent-ring,
.axn-axion-demo-form-cta .axn-agent-ring { display: none }
.axn-axion-contact-form-cta .axn-agent,
.axn-axion-contact-form-cta .axn-agent-layout,
.axn-axion-demo-form-cta .axn-agent,
.axn-axion-demo-form-cta .axn-agent-layout { min-height: 0; padding: 0 }
.axn-axion-contact-form-cta .axn-agent-photo,
.axn-axion-demo-form-cta .axn-agent-photo { width: 100%; margin: 0 }
.axn-axion-contact-form-cta .axn-agent .axn-media img,
.axn-axion-contact-form-cta .axn-agent-photo img,
.axn-axion-demo-form-cta .axn-agent .axn-media img,
.axn-axion-demo-form-cta .axn-agent-photo img {
border-radius: 20px; aspect-ratio: auto; object-fit: contain;
width: 100%; height: auto; max-width: 520px; margin: 0 auto; display: block;
}
/* =============================================================================
VETERINARIAN
============================================================================= */
/* 02 Hero - 190.5 x 42 single CTA, checklist in two columns. */
.axn-axion-vet-hero { padding: 119px 0 0; position: relative; overflow: hidden }
.axn-axion-vet-hero > .axn-shell { position: relative; z-index: 2; min-height: 501px; display: flex; align-items: center }
.axn-axion-vet-hero .axn-hero-copy { max-width: 560px; padding: 25px 0 27px }
.axn-axion-vet-hero .axn-check-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 11px 32px; margin: 20px 0 22px }
/* 03 Trusted practices - 183 tall navy band, copy left then logos. */
.axn-axion-trusted-practices .axn-logo-strip { display: flex; align-items: center; gap: 40px; flex-wrap: wrap }
.axn-axion-trusted-practices .axn-logo-copy,
.axn-axion-trusted-practices .axn-logo-copy-text { color: #fff }
.axn-axion-trusted-practices .axn-highlight { color: #FFD800 }
.axn-axion-trusted-practices .axn-logo-row { display: flex; align-items: center; gap: 38px; flex: 1 1 auto; flex-wrap: wrap }
.axn-axion-trusted-practices .axn-logo-row img { max-height: 48px; width: auto }
/* The navy strip has no inner card on the frame - the copy and the marks sit
straight on the band. */
.axn-axion-trusted-practices .axn-logo-strip.is-dark { background: none; border-radius: 0; padding: 0 }
.axn-axion-trusted-practices .axn-logo-copy { max-width: 340px }
/* No Otto file exists, so that slot renders the widget's text label. On the navy
strip the default pill reads as a white box; the frame shows a plain white
wordmark, so the fallback is stripped back to type. */
.axn-axion-trusted-practices .axn-logo-fallback {
background: none; border: 0; box-shadow: none; padding: 0;
color: #fff; font-weight: 600; font-size: 1.5rem; letter-spacing: -.02em;
}
.axn-axion-practice-software-logos .axn-logo-fallback {
background: none; border: 0; box-shadow: none; padding: 0;
color: #1C1C1C; font-weight: 600; font-size: 1.5rem; letter-spacing: -.02em;
}
/* -- Logo marquee ------------------------------------------------------------
axion-sections.js duplicates the row and drives the pair with a transform, so
the marks drift continuously with no arrows or dots - which is how the frames
present them. The animation only exists once the JS has measured an overflow;
with no JS, reduced motion, or in the editor the row stays a plain flex row. */
.axn-section .axn-marquee { display: flex; width: max-content; overflow: hidden }
.axn-section .axn-marquee-track { display: flex; align-items: center; gap: inherit; flex: 0 0 auto }
.axn-section .axn-logo-row[data-axn-marquee-enabled] {
overflow: hidden;
/* The marquee runs correctly, but the container clipped it with a hard edge,
so a logo was always sliced in half at both ends - it read as "the strip is
cut off" rather than "the strip is scrolling". Fading the last 28px on each
side makes logos enter and leave instead of being chopped. */
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}
.axn-section .axn-marquee.is-running .axn-marquee-track {
animation: axn-marquee var(--axn-marquee-duration, 30s) linear infinite;
}
.axn-section .axn-marquee.is-paused .axn-marquee-track { animation-play-state: paused }
@keyframes axn-marquee {
from { transform: translate3d(0, 0, 0) }
to { transform: translate3d(calc(var(--axn-marquee-distance, 100%) * -1), 0, 0) }
}
@media (prefers-reduced-motion: reduce) {
.axn-section .axn-marquee .axn-marquee-track { animation: none !important }
}
/* Logo rows. The frames size every mark by height and let the width follow. */
.axn-axion-trusted-practices .axn-logo-row img,
.axn-axion-practice-software-logos .axn-logo-row img { height: 46px; width: auto; max-height: 46px; object-fit: contain }
.axn-axion-practice-software-logos .axn-logo-row { display: flex; align-items: center; justify-content: center; gap: 46px; flex-wrap: wrap; margin-top: 26px }
/* 04 Pain points - 338.2 x 355 r11.5 cards, 21 gutter, with a 65.6 r8 numbered
tile centred on and overlapping the top edge by 33. */
.axn-axion-pain-point-cards .axn-pain-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 21px; margin-top: 42px }
.axn-axion-pain-point-cards .axn-pain-card {
min-height: 355px; border-radius: 11.5px; background: rgba(243,101,101,.12);
padding: 62px 26px 30px; text-align: center;
}
.axn-axion-pain-point-cards .axn-badge {
position: absolute; top: -33px; left: 50%; transform: translateX(-50%);
width: 66px; height: 66px; border-radius: 8px; background: var(--axn-coral); color: #fff;
display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 700;
}
/* The icon is an 85px glyph on the frame. .axn-svg is sized in em, so the box
alone does nothing - the svg has to be sized with it. */
.axn-axion-pain-point-cards .axn-pain-card .axn-icon {
width: 85px; height: 85px; margin: 0 auto 20px; color: var(--axn-coral);
display: flex; align-items: center; justify-content: center;
}
/* Icon sizing has to name all three glyph types. A built-in icon is an
.axn-svg, an uploaded one an , an icon-library pick
an . Sizing only .axn-svg is why swapping in an image
dropped the icon to its 1.25em base size and looked like a broken control. */
.axn-axion-pain-point-cards .axn-pain-card .axn-icon .axn-svg,
.axn-axion-pain-point-cards .axn-pain-card .axn-icon .axn-icon-img,
.axn-axion-pain-point-cards .axn-pain-card .axn-icon .axn-icon-lib { width: 85px; height: 85px }
.axn-axion-pain-point-cards .axn-pain-card h3 { color: var(--axn-coral); font-size: 1.25rem; margin: 0 0 14px }
/* 05 What you gain - 338.2 x 419.2 r11.5, third card reversed out in blue. */
.axn-axion-benefits-comparison-cards .axn-gain-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 21px; margin-top: 30px }
.axn-axion-benefits-comparison-cards .axn-gain-card {
min-height: 419px; border-radius: 11.5px; background: #fff; border: 0;
padding: 56px 26px 28px; text-align: center;
transition: background .25s ease, box-shadow .25s ease, color .25s ease;
}
.axn-axion-benefits-comparison-cards .axn-gain-card .axn-badge {
position: absolute; top: -33px; left: 50%; transform: translateX(-50%);
width: 66px; height: 66px; border-radius: 8px; background: #065389; color: #fff;
display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 700;
}
/* The reversed-out blue is the HOVER state, not a permanently featured card. It
used to be pinned to :nth-child(3), and the base stylesheet reverses out
.is-featured on top of that - so card 3 sat blue at rest and no card responded
to the cursor.
Two halves below, and the order matters. First .is-featured is reset to look
exactly like its neighbours at rest (measured off a plain card: #fff, title
#115696, badge #065389, result #1C1C1C on a #E6EEF6 rule). Then the hover
block, which lists the .is-featured variants too so it outranks those resets -
equal specificity, later in the file. Without that, resetting the featured card
would also kill its hover. */
.axn-axion-benefits-comparison-cards .axn-gain-card.is-featured {
background: #fff; color: #1C1C1C;
box-shadow: 0 12px 35px rgba(17,86,150,.08); border-color: transparent;
}
.axn-axion-benefits-comparison-cards .axn-gain-card.is-featured h3 { color: #115696 }
.axn-axion-benefits-comparison-cards .axn-gain-card.is-featured .axn-badge { background: #065389; color: #fff }
.axn-axion-benefits-comparison-cards .axn-gain-card.is-featured .axn-result { color: #1C1C1C; border-top-color: #E6EEF6 }
.axn-axion-benefits-comparison-cards .axn-gain-card.is-featured .axn-result strong { color: #115696 }
.axn-axion-benefits-comparison-cards .axn-gain-card.is-featured li span { color: inherit }
.axn-axion-benefits-comparison-cards .axn-gain-card.is-featured .axn-check { color: #22c55e }
.axn-axion-benefits-comparison-cards .axn-gain-card.is-featured .axn-icon { color: #115696 }
/* Hover / keyboard focus - reversed out. Focus too, so it is reachable without a
mouse. */
.axn-axion-benefits-comparison-cards .axn-gain-card:hover,
.axn-axion-benefits-comparison-cards .axn-gain-card:focus-within,
.axn-axion-benefits-comparison-cards .axn-gain-card.is-featured:hover,
.axn-axion-benefits-comparison-cards .axn-gain-card.is-featured:focus-within {
background: linear-gradient(135deg,#115696,#3972C5); color: #fff;
box-shadow: 0 0 44px rgba(0,153,220,.45);
}
.axn-axion-benefits-comparison-cards .axn-gain-card:hover h3,
.axn-axion-benefits-comparison-cards .axn-gain-card:focus-within h3,
.axn-axion-benefits-comparison-cards .axn-gain-card.is-featured:hover h3,
.axn-axion-benefits-comparison-cards .axn-gain-card.is-featured:focus-within h3 { color: var(--axn-gold) }
.axn-axion-benefits-comparison-cards .axn-gain-card:hover .axn-badge,
.axn-axion-benefits-comparison-cards .axn-gain-card:focus-within .axn-badge,
.axn-axion-benefits-comparison-cards .axn-gain-card.is-featured:hover .axn-badge,
.axn-axion-benefits-comparison-cards .axn-gain-card.is-featured:focus-within .axn-badge { background: linear-gradient(135deg,var(--axn-gold),#FFE761); color: #1C1C1C }
.axn-axion-benefits-comparison-cards .axn-gain-card:hover li,
.axn-axion-benefits-comparison-cards .axn-gain-card:hover li span,
.axn-axion-benefits-comparison-cards .axn-gain-card:focus-within li,
.axn-axion-benefits-comparison-cards .axn-gain-card:focus-within li span,
.axn-axion-benefits-comparison-cards .axn-gain-card.is-featured:hover li,
.axn-axion-benefits-comparison-cards .axn-gain-card.is-featured:hover li span,
.axn-axion-benefits-comparison-cards .axn-gain-card.is-featured:focus-within li,
.axn-axion-benefits-comparison-cards .axn-gain-card.is-featured:focus-within li span { color: #fff }
.axn-axion-benefits-comparison-cards .axn-gain-card:hover .axn-result,
.axn-axion-benefits-comparison-cards .axn-gain-card:focus-within .axn-result,
.axn-axion-benefits-comparison-cards .axn-gain-card.is-featured:hover .axn-result,
.axn-axion-benefits-comparison-cards .axn-gain-card.is-featured:focus-within .axn-result { color: #fff; border-top-color: rgba(255,255,255,.2) }
.axn-axion-benefits-comparison-cards .axn-gain-card:hover .axn-result strong,
.axn-axion-benefits-comparison-cards .axn-gain-card:focus-within .axn-result strong,
.axn-axion-benefits-comparison-cards .axn-gain-card.is-featured:hover .axn-result strong,
.axn-axion-benefits-comparison-cards .axn-gain-card.is-featured:focus-within .axn-result strong { color: var(--axn-gold) }
.axn-axion-benefits-comparison-cards .axn-gain-card:hover .axn-check,
.axn-axion-benefits-comparison-cards .axn-gain-card:focus-within .axn-check,
.axn-axion-benefits-comparison-cards .axn-gain-card.is-featured:hover .axn-check,
.axn-axion-benefits-comparison-cards .axn-gain-card.is-featured:focus-within .axn-check { color: var(--axn-gold) }
.axn-axion-benefits-comparison-cards .axn-gain-card:hover .axn-icon,
.axn-axion-benefits-comparison-cards .axn-gain-card:focus-within .axn-icon,
.axn-axion-benefits-comparison-cards .axn-gain-card.is-featured:hover .axn-icon,
.axn-axion-benefits-comparison-cards .axn-gain-card.is-featured:focus-within .axn-icon { color: var(--axn-gold) }
.axn-axion-benefits-comparison-cards .axn-gain-card:hover .axn-check,
.axn-axion-benefits-comparison-cards .axn-gain-card:focus-within .axn-check { color: var(--axn-gold) }
.axn-axion-benefits-comparison-cards .axn-gain-card .axn-icon {
width: 85px; height: 85px; margin: 0 auto 16px; color: #115696;
display: flex; align-items: center; justify-content: center;
}
.axn-axion-benefits-comparison-cards .axn-gain-card .axn-icon .axn-svg,
.axn-axion-benefits-comparison-cards .axn-gain-card .axn-icon .axn-icon-img,
.axn-axion-benefits-comparison-cards .axn-gain-card .axn-icon .axn-icon-lib { width: 85px; height: 85px }
.axn-axion-benefits-comparison-cards .axn-gain-card ul { text-align: left; margin: 0 0 18px }
.axn-axion-benefits-comparison-cards .axn-gain-card li { display: flex; gap: 9px; align-items: flex-start; font-size: .875rem; line-height: 1.65 }
.axn-axion-benefits-comparison-cards .axn-btn-row { justify-content: center; margin-top: 42px }
/* 07 Review + statistics - one flat 1060 x 245.3 r11 pale panel. The quote sits
directly on it; the widget's own white quote card is a second surface the
frame does not have, and the carousel arrows are not in it either. */
.axn-axion-review-statistics .axn-review-stat {
background: #F1FBFF; border-radius: 11px; padding: 24px 40px; min-height: 245px;
display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.95fr); gap: 44px; align-items: center;
}
/* There is no divider element in the markup - only the quote track and the stat
card. A three-column template hands the stat card the 1px column and it
collapses to one word per line, which is what made this panel 405 tall. The
rule on the frame is a hairline, so it is a border on the stat card. */
.axn-axion-review-statistics .axn-stat-card { border-left: 1px solid rgba(17,86,150,.20); padding-left: 44px }
.axn-axion-review-statistics .axn-quote-card { background: none; box-shadow: none; border: 0; padding: 0; border-radius: 0 }
.axn-axion-review-statistics .axn-carousel-nav { display: none }
.axn-axion-review-statistics .axn-stat-card { text-align: center }
.axn-axion-review-statistics .axn-stat-card h3 { font-size: 1.0625rem; line-height: 1.3; margin: 8px 0 4px }
.axn-axion-review-statistics .axn-stat-card .axn-muted { font-size: .8125rem; line-height: 1.45; margin: 0 }
.axn-axion-review-statistics .axn-stat-number { font-size: 3.75rem; line-height: 1; font-weight: 700; color: #115696 }
/* 08a The Axion-Vs-Others backdrop.
The frame does not put this table on white: the blue field starts here and
runs into the demo band below without a seam, with a white curve carved over
the top.
That curve is a real design asset (Vector-14-2.png, 1440x609) and it is
ASYMMETRIC - it dips on the left and lifts on the right - so the CSS circle
this used to approximate could never match it. It is wired through the
widget's own axn_bg background control in the page JSON, which keeps it
editable in Elementor and keeps 250KB of PNG out of the plugin. All this rule
does is stay out of the way and hold the content above it. */
.axn-axion-comparison-table { position: relative; overflow: hidden }
.axn-axion-comparison-table > .axn-shell { position: relative; z-index: 1 }
/* The demo band picks the gradient up where the asset leaves off. */
.axn-axion-demo-form-cta { background: linear-gradient(180deg,#3871C4,#2F63AE) }
/* 08 Axion Vs. Others - the frame's table is 1060 wide with a 48 header on
#ECECEC and 51 rows, and the Axion column is a 330-wide raised panel that runs
from the header top down past the last row with a soft blue glow. */
.axn-axion-comparison-table .axn-compare-table {
border-radius: 13px; box-shadow: none; border: 1px solid #E6E6E6; overflow: visible;
}
.axn-axion-comparison-table .axn-compare-table thead th { background: #ECECEC; height: 48px; color: #065389; font-size: .9375rem; font-weight: 600 }
.axn-axion-comparison-table .axn-compare-table thead th:first-child { border-radius: 12px 0 0 0 }
.axn-axion-comparison-table .axn-compare-table thead th:last-child { border-radius: 0 12px 0 0; background: #ECECEC; color: #065389 }
.axn-axion-comparison-table .axn-compare-table th,
.axn-axion-comparison-table .axn-compare-table td { height: 51px; padding: 0 26px; font-size: .875rem; border-bottom: 1px solid #EFEFEF }
.axn-axion-comparison-table .axn-compare-table tbody tr:last-child th,
.axn-axion-comparison-table .axn-compare-table tbody tr:last-child td { border-bottom: 0 }
.axn-axion-comparison-table .axn-compare-table tbody th[scope="row"] { padding-left: 58px; font-weight: 400; color: #1C1C1C; text-align: left }
.axn-axion-comparison-table .axn-compare-table td:last-child { text-align: center; color: var(--axn-coral); background: #fff }
/* The Axion column. */
/* Equal thirds, per the client's instruction. The frame is slightly uneven -
Feature and Others run a little wider than the Axion column - but equal
columns read better and were asked for explicitly. table-layout:fixed is what
makes the widths hold regardless of cell content. */
.axn-axion-comparison-table .axn-compare-table { table-layout: fixed }
.axn-axion-comparison-table .axn-compare-table th,
.axn-axion-comparison-table .axn-compare-table td { width: 33.3333% }
.axn-axion-comparison-table .axn-compare-table .is-axion {
background: linear-gradient(180deg,#115696,#3972C5); color: #fff; box-shadow: none;
}
.axn-axion-comparison-table .axn-compare-table th.is-axion {
color: #FFD800; font-size: 1rem; border-radius: 12px 12px 0 0;
box-shadow: 0 0 26px rgba(0,153,220,.55);
}
.axn-axion-comparison-table .axn-compare-table tbody tr:last-child .is-axion {
border-radius: 0 0 12px 12px; box-shadow: 0 26px 26px -18px rgba(0,153,220,.55);
}
.axn-axion-comparison-table .axn-compare-table td.is-axion .axn-cell-value { justify-content: center; width: auto }
/* 03b Trusted strip type. The frame sets the middle line large and gold. */
.axn-axion-trusted-practices .axn-logo-copy-text > span:first-child { font-size: .8125rem }
.axn-axion-trusted-practices .axn-highlight { font-size: 1.625rem !important; font-weight: 600; line-height: 1.1; letter-spacing: -.01em }
.axn-axion-trusted-practices .axn-logo-copy .axn-icon .axn-svg,
.axn-axion-trusted-practices .axn-logo-copy .axn-icon .axn-icon-img,
.axn-axion-trusted-practices .axn-logo-copy .axn-icon .axn-icon-lib { width: 48px; height: 48px; color: #FFD800 }
.axn-axion-trusted-practices .axn-logo-copy .axn-icon { color: #FFD800 }
/* 11b Final CTA - the frame runs the screenshot to the panel's right edge.
(Padding lived here too until v1.5.106 - a second, later declaration at
"11 Final CTA" below always won the cascade and set padding-right: 48px
instead, which is why the image never actually reached the edge. Padding
is declared once now, at the other rule, via --axn-cta-pad-b so the media
bleed below can never drift out of sync with it. */
.axn-axion-final-product-cta .axn-final-cta-panel { overflow: hidden; gap: 0 }
/* .axn-split is the flex container here, not the panel, and it wraps by default
- which stacked the screenshot under the copy instead of beside it. On the
frame the copy takes ~40% and the shot runs off the panel's right edge. */
.axn-axion-final-product-cta .axn-final-cta-panel > .axn-split {
flex-wrap: nowrap; align-items: center; gap: 44px; width: 100%; min-width: 0;
}
.axn-axion-final-product-cta .axn-final-cta-panel .axn-copy { flex: 0 0 40%; max-width: 40%; min-width: 0 }
/* The button sat with no margin of its own - the paragraph above and the
support line below were both hard against it. It is an inline-flex box,
not a block, so it does not pick up ordinary paragraph margin collapsing;
giving it an explicit top and bottom margin is what actually opens space
on both sides. */
.axn-axion-final-product-cta .axn-final-cta-panel .axn-copy > .axn-btn { margin: 16px 0 }
.axn-axion-final-product-cta .axn-final-cta-panel .axn-media { flex: 1 1 0; min-width: 0; max-height: 300px; overflow: hidden }
.axn-axion-final-product-cta .axn-final-cta-panel .axn-media img { width: 100%; height: auto; border-radius: 10px 0 0 10px; display: block }
/* Bleed the screenshot to the panel's bottom edge, matching the flush right
edge above (border-radius already drops to 0 on that side). Cancels the
panel's own bottom padding via the shared --axn-cta-pad-b custom property
rather than a hardcoded value, so it cannot desync the way the platform
tabs media bleed once did (see "PANEL PADDING AND THE MEDIA BLEED MUST
SHARE ONE VALUE" further down). Reset at the 767px breakpoint, where the
design goes back to full padding and fully rounded corners. */
.axn-axion-final-product-cta .axn-final-cta-panel .axn-media {
align-self: flex-end;
margin-bottom: calc(-1 * var(--axn-cta-pad-b, 44px));
}
/* 09 Demo form - blue band, 520 x 250 r13 card on the left. As with the Home
pricing band there is no outer card in the frame: the gradient IS the
section, so the widget's inner panel must stop painting and padding. */
.axn-axion-demo-form-cta .axn-demo-cta { background: none; border-radius: 0; padding: 0; box-shadow: none }
.axn-axion-demo-form-cta .axn-heading,
.axn-axion-demo-form-cta .axn-text { color: #fff }
.axn-axion-demo-form-cta .axn-highlight { color: #FFD800 }
.axn-axion-demo-form-cta .axn-form-card { flex: 0 0 520px; max-width: 520px; border-radius: 13px; padding: 30px; background: #fff }
.axn-axion-demo-form-cta .axn-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px 14px }
.axn-axion-demo-form-cta .axn-field-full { grid-column: 1 / -1 }
.axn-axion-demo-form-cta .axn-field { min-height: 45px; border-radius: 7.5px }
.axn-axion-demo-form-cta .axn-form-card .axn-btn { width: 100%; min-height: 44px; border-radius: 22px; margin-top: 10px }
/* The theme reset paints every button:hover/:focus crimson (#CC3366) at (0,1,1),
which beats the widget's own background:transparent at (0,1,0). The FAQ
question is a