:root { --navy:#08195a; --blue:#2456ff; --violet:#6d35ff; --muted:#4f6297; --line:#e7edff; --gutter:clamp(32px,4.167vw,64px); --hero-scale:.876866; --visual-scale:var(--hero-scale); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { min-width:320px; margin:0; color:var(--navy); background:#fff; font-family:Arial,Helvetica,sans-serif; }
a { color:inherit; text-decoration:none; }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.hero { position:relative; width:100%; max-width:100%; height:470px; overflow:hidden; background:#f8fcff url("/guest/assets/images/caxo-hero-background.webp") center bottom/auto 470px no-repeat; }
.site-header { height:67px; padding:9px var(--gutter) 0; display:flex; align-items:flex-start; position:relative; z-index:2; background:transparent; }
.brand { width:158px; display:flex; flex-direction:column; align-items:flex-start; }
.brand img { display:block; width:104px; height:auto; }
.brand span { margin:3px 0 0 1px; color:#52649a; font-size:9px; letter-spacing:-.2px; white-space:nowrap; }
.primary-nav { display:flex; gap:35px; margin:12px 0 0 68px; font-size:12px; font-weight:600; white-space:nowrap; }
.primary-nav a { display:inline-flex; align-items:center; }
.nav-chevron { width:7px; height:7px; margin:-3px 0 0 7px; display:inline-block; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); }
.header-actions { margin:0 0 0 auto; display:flex; align-items:center; gap:21px; background:transparent; box-shadow:none; font-size:12px; font-weight:600; }
.header-actions::before,.header-actions::after { content:none; }
.sign-in { color:#123ad5; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:13px; border-radius:14px; color:#fff; font-weight:700; background:linear-gradient(110deg,#1762ff,#7031f4); box-shadow:0 8px 18px #315aff25; }
.button span,.plan-button span,.contact-button span { font-size:24px; font-weight:300; line-height:0; }
.header-cta { width:124px; height:39px; font-size:13px; border-radius:12px; }
.menu-toggle { display:none; }
.hero-content { position:relative; z-index:1; width:500px; margin:26px 0 0 var(--gutter); }
.eyebrow { display:inline-flex; align-items:center; gap:7px; height:30px; margin:0; padding:0 12px; border-radius:18px; color:#1237b7; background:linear-gradient(90deg,#e7edff,#d9e5ff); box-shadow:0 5px 14px #6b8aed17; font-size:11px; font-weight:700; }
.eyebrow:first-letter { color:#2562ff; }
h1 { margin:16px 0 10px; color:#071755; font-size:46px; line-height:.98; letter-spacing:-2.3px; }
h1 em { color:#4055ee; font-style:normal; }
.hero-copy { margin:0; color:#4e6196; font-size:16px; line-height:1.38; letter-spacing:-.3px; }
.hero-actions { display:flex; align-items:center; gap:23px; margin-top:20px; }
.hero-cta { width:195px; height:47px; border-radius:12px; font-size:16px; }
.watch-control { display:flex; align-items:center; gap:11px; }
.play-icon { width:47px; height:47px; display:grid; place-items:center; padding-left:3px; border:2px solid #dce5ff; border-radius:50%; color:#0d225e; background:#fff; font-size:16px; }
.watch-control strong,.watch-control small { display:block; }
.watch-control strong { margin-bottom:2px; font-size:14px; letter-spacing:-.4px; }
.watch-control small { color:#4f6297; font-size:12px; }
.benefits { display:flex; gap:27px; margin:19px 0 0; padding:0; color:#4e6092; font-size:12px; list-style:none; }
.benefits li::before,.plan li::before { content:"✓"; margin-right:10px; color:#1e5eff; font-weight:700; }
.trusted { height:100px; border-bottom:1px solid #eef2fb; background:#fff; }
.trusted-inner { width:calc(100% - (var(--gutter) * 2)); height:100%; margin:auto; display:grid; grid-template-columns:280px 1fr; }
.trusted h2 { align-self:center; margin:0; font-size:16px; letter-spacing:-.5px; }
.industry-grid { display:grid; grid-template-columns:repeat(8,1fr); height:100%; }
.industry { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; border-left:1px solid #edf1fb; color:#465b95; font-size:14px; }
.industry svg { width:32px; height:32px; fill:none; stroke:#7789b9; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
.pricing { height:316px; width:100%; max-width:100%; padding:24px var(--gutter) 30px; display:grid; grid-template-columns:minmax(0,282px) repeat(3,minmax(0,1fr)) minmax(0,.895fr); gap:16px; background:linear-gradient(105deg,#fff 0,#f7faff 100%); }
.pricing-intro { padding-top:35px; }
.pricing h2 { margin:0; color:#0b1d5b; font-size:36px; line-height:1; letter-spacing:-1.7px; }
.pricing-intro > p { margin:14px 0 0; color:#53669c; font-size:20px; line-height:1.35; letter-spacing:-.5px; }
.accent-line { display:block; width:50px; height:3px; margin-top:22px; border-radius:2px; background:linear-gradient(90deg,#2743ff,#b5c8ff); }
.plan,.custom-plan { min-width:0; height:262px; padding:19px 19px; border:1px solid #dfe7fa; border-radius:15px; background:#fff; }
.starter { border-color:#62d4c7; }.growth,.pro { border-color:#cbd6ff; }.custom-plan { padding:25px 20px; border:0; background:#f5f8ff; }
.plan-title { display:flex; align-items:center; gap:14px; }.plan-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:50%; font-size:28px; line-height:1; }.leaf { color:#11b68a; font-size:48px; transform:rotate(-28deg); }.bars { color:#2860f6; letter-spacing:-6px; font-size:24px; }.crown { color:#6441f8; font-size:38px; }
.plan h3,.custom-plan h3 { margin:0; font-size:18px; letter-spacing:-.6px; }.plan-title p { margin:1px 0 0; color:#53669c; font-size:14px; }.price { margin:16px 0 14px; font-size:31px; font-weight:800; letter-spacing:-1px; }.price small { color:#344d8c; font-size:14px; font-weight:500; letter-spacing:0; }
.plan ul { margin:0; padding:0; color:#263d7c; font-size:16px; line-height:1.75; list-style:none; }.plan li::before { color:#12ba91; }.growth li::before,.pro li::before { color:#1e5eff; }
.plan-button { height:51px; margin-top:13px; display:flex; align-items:center; justify-content:center; gap:11px; border-radius:12px; color:#fff; background:#0db795; font-size:16px; font-weight:700; }.growth .plan-button { background:#2856f5; }.pro .plan-button { background:linear-gradient(100deg,#5437f4,#7934fa); }
.custom-plan h3 { font-size:17px; }.custom-plan > p { margin:8px 0 17px; color:#52659a; font-size:15px; line-height:1.35; }.contact-button { height:42px; display:flex; align-items:center; justify-content:center; gap:10px; border:1px solid #7c90c4; border-radius:11px; font-size:15px; font-weight:700; }.contact-button span { font-size:20px; }.custom-plan .enterprise-note { display:flex; align-items:center; gap:10px; margin:37px 0 0; color:#6072a4; font-size:28px; line-height:1; }.enterprise-note span { font-size:13px; line-height:1.3; }
footer { height:72px; display:flex; align-items:center; justify-content:center; gap:31px; color:#fff; background:linear-gradient(105deg,#0a2566,#061544); } footer span { width:200px; height:1px; background:#e3ebff; opacity:.9; } footer p { margin:0; font-size:12px; letter-spacing:6px; white-space:nowrap; }
@media (max-width:1280px) { .primary-nav { gap:28px; margin-left:43px; }.hero-content { width:560px; }.hero-copy { font-size:18px; } h1 { font-size:54px; }.trusted-inner { grid-template-columns:230px minmax(0,1fr); }.industry { min-width:0; font-size:12px; }.pricing { grid-template-columns:minmax(0,240px) repeat(3,minmax(0,1fr)) minmax(0,.89fr); gap:12px; }.pricing h2 { font-size:31px; }.pricing-intro > p { font-size:17px; }.plan,.custom-plan { padding-left:15px; padding-right:15px; }.plan h3,.custom-plan h3 { font-size:16px; }.plan ul { font-size:14px; } }
@media (max-width:1024px) { .site-header { padding-top:12px; }.brand { width:155px; flex-shrink:0; }.primary-nav { margin-left:22px; gap:17px; font-size:13px; }.header-actions { gap:17px; }.header-cta { width:132px; flex-shrink:0; }.hero-content { width:505px; margin-top:31px; }.hero-copy { font-size:17px; }.hero-cta { width:220px; font-size:18px; }.watch-control strong { font-size:15px; }.watch-control small { font-size:12px; }.benefits { gap:22px; font-size:12px; }.trusted-inner { grid-template-columns:185px minmax(0,1fr); }.trusted h2 { font-size:14px; }.industry { min-width:0; font-size:10px; }.industry svg { width:27px; }.pricing { height:auto; min-height:316px; grid-template-columns:minmax(0,205px) repeat(3,minmax(0,1fr)) minmax(0,.87fr); gap:10px; }.pricing h2 { font-size:27px; }.pricing-intro > p { font-size:15px; }.plan,.custom-plan { height:262px; padding:15px 12px; }.plan-title { gap:8px; }.plan-icon { width:32px; font-size:23px; }.price { font-size:25px; }.plan ul { font-size:12px; }.plan-button { font-size:13px; }.custom-plan > p { font-size:12px; }.custom-plan .enterprise-note { margin-top:42px; } }
@media (max-width:900px) { .pricing { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }.pricing-intro { grid-column:1/-1; padding-top:0; }.pricing-intro > p { font-size:17px; }.plan,.custom-plan { height:260px; } }
@media (max-width:767px) { .hero { height:675px; width:100%; max-width:100%; background-size:auto 536px; background-position:67% bottom; }.site-header { height:73px; padding-top:12px; align-items:flex-start; }.brand img { width:122px; }.brand span { font-size:10px; }.primary-nav,.header-actions { display:none; }.menu-toggle { width:42px; height:42px; margin-left:auto; flex-shrink:0; display:grid; align-content:center; gap:5px; border:0; border-radius:10px; background:#edf3ff; }.menu-toggle span { display:block; width:19px; height:2px; margin:auto; border-radius:2px; background:var(--navy); }.primary-nav.is-open { position:absolute; top:66px; right:var(--gutter); display:grid; gap:0; width:min(220px,calc(100vw - (var(--gutter) * 2))); margin:0; padding:9px; border-radius:12px; background:#fff; box-shadow:0 16px 32px #10245c2b; }.primary-nav.is-open a { padding:12px; }.hero-content { width:min(100% - (var(--gutter) * 2),520px); max-width:100%; margin-top:30px; }.eyebrow { height:34px; padding:0 12px; font-size:11px; } h1 { margin-top:18px; font-size:46px; }.hero-copy { max-width:430px; font-size:16px; }.desktop-break { display:none; }.hero-actions { gap:17px; }.hero-cta { width:205px; height:54px; font-size:16px; }.play-icon { width:52px; height:52px; font-size:16px; }.watch-control { gap:10px; }.watch-control strong { font-size:14px; }.benefits { margin-top:18px; gap:17px; flex-wrap:wrap; }.trusted { height:auto; width:100%; max-width:100%; }.trusted-inner { width:100%; max-width:100%; display:block; }.trusted h2 { padding:19px var(--gutter) 12px; font-size:15px; }.industry-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }.industry { min-width:0; height:78px; border-top:1px solid #edf1fb; font-size:11px; }.industry:nth-child(5) { border-left:0; }.pricing { height:auto; padding:32px var(--gutter); grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }.pricing-intro { grid-column:1/-1; padding:0 0 8px; }.pricing h2 { font-size:33px; }.plan,.custom-plan { height:260px; }.custom-plan { display:flex; flex-direction:column; }.custom-plan .enterprise-note { margin-top:auto; } footer { height:80px; max-width:100%; gap:16px; } footer span { width:70px; } footer p { min-width:0; font-size:9px; letter-spacing:3px; white-space:normal; text-align:center; } }
@media (max-width:480px) { :root { --gutter:22px; }.hero { height:710px; background-size:auto 505px; background-position:69% bottom; }.brand img { width:116px; }.hero-content { margin-top:25px; }.eyebrow { font-size:10px; } h1 { font-size:39px; letter-spacing:-2px; }.hero-copy { font-size:15px; line-height:1.36; }.hero-actions { align-items:flex-start; flex-direction:column; gap:13px; margin-top:21px; }.hero-cta { width:100%; }.watch-control { margin-left:3px; }.benefits { display:none; }.industry-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.industry { height:82px; font-size:12px; }.pricing { grid-template-columns:minmax(0,1fr); padding-top:30px; }.pricing h2 { font-size:34px; }.plan,.custom-plan { height:250px; }.plan-title { gap:14px; }.plan-button { margin-top:9px; }.custom-plan .enterprise-note { margin-top:20px; } footer span { flex:1 1 25px; width:auto; } footer p { font-size:8px; letter-spacing:2px; } }

/* Compact desktop calibration. Card coordinates are measured from the 1536 x 536 mockup. */
@media (min-width:1280px) and (max-width:1439px) {
  :root { --hero-scale:.839552; --visual-scale:.839552; }
  .hero { height:450px; background-size:auto 450px; background-position:center bottom; }
  .site-header { height:64px; padding-top:8px; }
  .brand { width:151px; }.brand img { width:100px; }
  .primary-nav { gap:31px; margin:11px 0 0 57px; font-size:12px; }
  .header-actions { gap:19px; }.header-cta { width:119px; height:37px; font-size:12px; }
  .hero-content { width:480px; margin-top:24px; }
  .eyebrow { height:29px; font-size:10px; } h1 { margin-top:15px; font-size:43px; letter-spacing:-2.1px; }
  .hero-copy { font-size:15px; }.hero-actions { gap:21px; margin-top:18px; }.hero-cta { width:187px; height:45px; font-size:15px; }
  .play-icon { width:45px; height:45px; font-size:15px; }.watch-control strong { font-size:13px; }.watch-control small { font-size:11px; }
  .benefits { gap:24px; margin-top:17px; font-size:11px; }
}

@media (min-width:1024px) and (max-width:1279px) {
  :root { --hero-scale:.783582; --visual-scale:.70; }
  .hero { height:420px; background-size:auto 420px; background-position:center bottom; }
  .site-header { height:59px; padding-top:7px; }
  .brand { width:137px; }.brand img { width:91px; }.brand span { font-size:8px; }
  .primary-nav { gap:20px; margin:10px 0 0 39px; font-size:11px; }
  .header-actions { gap:15px; font-size:11px; }.header-cta { width:108px; height:35px; font-size:11px; }
  .hero-content { width:410px; margin-top:22px; }
  .eyebrow { height:27px; padding:0 10px; font-size:9px; } h1 { margin:14px 0 9px; font-size:39px; letter-spacing:-1.9px; }
  .hero-copy { font-size:14px; }.hero-actions { gap:17px; margin-top:16px; }.hero-cta { width:171px; height:43px; font-size:14px; }
  .play-icon { width:43px; height:43px; font-size:14px; }.watch-control { gap:9px; }.watch-control strong { font-size:12px; }.watch-control small { font-size:10px; }
  .benefits { gap:18px; margin-top:15px; font-size:10px; }.benefits li::before { margin-right:7px; }
}

/* Pricing calibration: keep a shared card rhythm while allowing each plan to
   accommodate its content without changing the CTA baseline. */
.plan {
  display:flex;
  flex-direction:column;
}
.plan-icon {
  flex:0 0 42px;
  background:#f4f8ff;
}
.plan-icon svg { width:29px; height:29px; }
.plan-icon svg path,.plan-icon svg rect { stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; }
.leaf { color:#10b99b; transform:none; }
.leaf svg path:first-child { fill:#10c3a2; stroke:none; }
.leaf svg path:last-child { fill:none; stroke:#fff; stroke-width:2.5; }
.bars { color:#2c63f6; letter-spacing:0; font-size:inherit; }
.bars svg rect { fill:currentColor; stroke:none; }
.crown { color:#6842f4; font-size:inherit; }
.crown svg path:first-child { fill:currentColor; stroke:none; }
.crown svg path:last-child { fill:none; stroke:currentColor; stroke-width:3; }
.plan ul { margin:0; }
.plan-button { margin-top:auto; }
.custom-plan {
  height:248px;
  margin-top:7px;
  padding:24px 21px 20px;
  display:flex;
  flex-direction:column;
}
.custom-plan .enterprise-note {
  width:100%;
  min-height:63px;
  margin:17px 0 0;
  margin-top:auto;
  padding-top:17px;
  display:grid;
  grid-template-columns:29px minmax(0,1fr);
  align-items:center;
  column-gap:10px;
  border-top:1px solid #e1e8f8;
}
.custom-plan .enterprise-note span { min-width:0; }
.custom-plan .enterprise-note svg { width:29px; height:32px; flex:0 0 29px; fill:none; stroke:#6072a4; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }

@media (max-width:1100px) {
  .pricing {
    height:auto;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
  }
  .pricing-intro { grid-column:1/-1; padding-top:0; }
  .pricing-intro > p { font-size:17px; }
  .plan { height:262px; }
  .custom-plan { height:262px; margin-top:0; }
}

@media (max-width:900px) and (min-width:768px) {
  .hero { height:560px; background-size:auto 500px; background-position:left bottom; }
  .site-header { height:73px; padding-top:12px; }
  .brand img { width:116px; }.brand span { font-size:9px; }
  .primary-nav,.header-actions { display:none; }
  .menu-toggle { width:42px; height:42px; margin-left:auto; flex-shrink:0; display:grid; align-content:center; gap:5px; border:0; border-radius:10px; background:#edf3ff; }
  .menu-toggle span { display:block; width:19px; height:2px; margin:auto; border-radius:2px; background:var(--navy); }
  .primary-nav.is-open { position:absolute; top:66px; right:var(--gutter); display:grid; gap:0; width:min(220px,calc(100vw - (var(--gutter) * 2))); margin:0; padding:9px; border-radius:12px; background:#fff; box-shadow:0 16px 32px #10245c2b; }
  .primary-nav.is-open a { padding:12px; }
  .hero-content { width:440px; margin-top:30px; }
  .trusted-inner { width:100%; display:block; }
  .trusted h2 { padding:19px var(--gutter) 12px; }
  .industry-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .industry { height:78px; border-top:1px solid #edf1fb; font-size:11px; }
  .industry:nth-child(5) { border-left:0; }
}

@media (max-width:480px) {
  .pricing { gap:16px; }
  .pricing-intro { padding-bottom:6px; }
  .plan,.custom-plan { height:250px; }
  .custom-plan { margin-top:0; }
}

/* Lazy-loaded guest pages */
#spa-content[hidden],#home-content[hidden] { display:none; }
.spa-page { min-height:100vh; background:linear-gradient(135deg,#fff 0%,#f4f8ff 56%,#edf4ff 100%); }
.spa-header { min-height:64px; padding:10px var(--gutter); display:flex; align-items:flex-start; border-bottom:1px solid #e7edff; background:#fff; }
.spa-header .brand { flex-shrink:0; }.spa-header .brand img { width:104px; }.spa-header .brand span { font-size:9px; }
.spa-nav { display:flex; align-items:center; gap:30px; margin:12px 0 0 70px; font-size:12px; font-weight:600; white-space:nowrap; }
.spa-nav a:hover,.spa-nav a[aria-current="page"] { color:#2856f5; }
.spa-actions { margin-left:auto; display:flex; align-items:center; gap:20px; font-size:12px; font-weight:600; }
.spa-actions .button { width:120px; height:37px; border-radius:11px; font-size:12px; }
.spa-menu { display:none; }
.spa-shell { width:min(100% - (var(--gutter) * 2),1408px); margin:auto; padding:60px 0 72px; }
.spa-view { display:none; }.spa-view.is-active { display:block; }
.spa-kicker { margin:0 0 12px; color:#2856f5; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.spa-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(330px,.88fr); align-items:center; gap:58px; min-height:310px; }
.spa-copy h1 { margin:0 0 17px; font-size:48px; line-height:1.03; letter-spacing:-2.2px; }
.spa-copy > p:not(.spa-kicker) { max-width:560px; margin:0; color:#52669c; font-size:17px; line-height:1.5; }
.spa-cta { width:170px; height:46px; margin-top:24px; border-radius:11px; font-size:14px; }
.spa-visual { min-height:240px; padding:26px; display:grid; place-items:center; border:1px solid #e0e8ff; border-radius:18px; background:linear-gradient(145deg,#fff,#eef4ff); box-shadow:0 18px 34px #183e7a12; }
.dash-window { width:100%; max-width:450px; padding:14px; border:1px solid #dbe5ff; border-radius:11px; background:#fff; box-shadow:0 12px 26px #15377912; }
.dash-top { display:flex; gap:5px; margin-bottom:14px; }.dash-top i { width:7px; height:7px; border-radius:50%; background:#b7c6f5; }.dash-top i:first-child { background:#7850ff; }
.dash-columns { display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:9px; }.dash-columns span { height:93px; border-radius:6px; background:linear-gradient(180deg,#edf3ff,#fff); }.dash-columns span:first-child { background:linear-gradient(180deg,#dfe8ff,#f9fbff); }.dash-columns span::before { content:""; display:block; width:58%; height:7px; margin:12px; border-radius:5px; background:#6f91ff; }
.spa-feature-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:44px; }
.spa-feature { min-height:152px; padding:22px; border:1px solid #e0e8fb; border-radius:14px; background:#fff; box-shadow:0 10px 22px #183e7a0b; }.spa-feature b { display:grid; width:34px; height:34px; margin-bottom:14px; place-items:center; border-radius:10px; color:#fff; background:linear-gradient(135deg,#2660ff,#7138f3); font-size:16px; }.spa-feature h2 { margin:0 0 6px; font-size:16px; letter-spacing:-.4px; }.spa-feature p { margin:0; color:#586b9e; font-size:13px; line-height:1.4; }
.spa-listing { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }.spa-listing article { min-height:190px; padding:24px; border:1px solid #dfe7fb; border-radius:15px; background:#fff; box-shadow:0 12px 24px #1c3d780b; }.spa-listing h2 { margin:0 0 9px; font-size:19px; letter-spacing:-.6px; }.spa-listing p { margin:0; color:#53679b; font-size:14px; line-height:1.45; }.spa-listing a { display:inline-flex; margin-top:18px; color:#315cf3; font-size:13px; font-weight:700; }
.spa-pricing { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:34px; }.spa-pricing .plan { min-height:294px; height:auto; }.spa-pricing .plan-button { margin-top:22px; }
.spa-resource { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }.spa-resource article { overflow:hidden; border:1px solid #dfe7fb; border-radius:15px; background:#fff; }.resource-image { height:105px; background:linear-gradient(135deg,#163985,#638bff 60%,#f0f4ff); }.spa-resource article:nth-child(2) .resource-image { background:linear-gradient(135deg,#7041f5,#b4c7ff); }.spa-resource article:nth-child(3) .resource-image { background:linear-gradient(135deg,#0b295c,#88b9ff); }.spa-resource h2,.spa-resource p { margin-left:18px; margin-right:18px; }.spa-resource h2 { margin-top:18px; margin-bottom:7px; font-size:17px; }.spa-resource p { margin-top:0; margin-bottom:20px; color:#53679b; font-size:13px; line-height:1.4; }
.spa-footer { padding:27px var(--gutter); display:flex; justify-content:center; color:#fff; background:linear-gradient(105deg,#0a2566,#061544); font-size:11px; letter-spacing:4px; text-align:center; }
.spa-loading { min-height:260px; display:grid; place-items:center; color:#52669c; font-size:15px; }.spa-loading span { display:flex; align-items:center; gap:10px; }.spa-loading i { width:18px; height:18px; border:2px solid #cfdaff; border-top-color:#2856f5; border-radius:50%; animation:spa-spin .8s linear infinite; } @keyframes spa-spin { to { transform:rotate(360deg); } }
.spa-error { padding:80px var(--gutter); text-align:center; color:#52669c; }.spa-error a { color:#2856f5; font-weight:700; }
@media (max-width:1024px) { .spa-nav { margin-left:38px; gap:20px; }.spa-shell { padding-top:44px; }.spa-hero { grid-template-columns:minmax(0,1fr) minmax(280px,.7fr); gap:32px; }.spa-copy h1 { font-size:40px; }.spa-feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.spa-listing { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:767px) { .spa-header { min-height:70px; align-items:flex-start; }.spa-header .brand img { width:116px; }.spa-nav,.spa-actions { display:none; }.spa-menu { width:42px; height:42px; margin-left:auto; display:grid; place-items:center; border:0; border-radius:10px; color:var(--navy); background:#edf3ff; font-size:20px; }.spa-nav.is-open { position:absolute; z-index:4; top:63px; right:var(--gutter); display:grid; gap:0; width:min(230px,calc(100vw - (var(--gutter) * 2))); margin:0; padding:9px; border-radius:12px; background:#fff; box-shadow:0 16px 32px #10245c2b; }.spa-nav.is-open > a { padding:12px; }.spa-shell { width:calc(100% - (var(--gutter) * 2)); padding:38px 0 48px; }.spa-hero { grid-template-columns:1fr; gap:28px; min-height:0; }.spa-copy h1 { font-size:37px; }.spa-copy > p:not(.spa-kicker) { font-size:16px; }.spa-visual { min-height:200px; }.spa-feature-grid,.spa-listing,.spa-pricing,.spa-resource { grid-template-columns:1fr; gap:14px; }.spa-feature { min-height:0; }.spa-listing article { min-height:150px; }.spa-pricing .plan { min-height:250px; }.spa-footer { letter-spacing:2px; } }

/* ============================================================
   Mobile hero background override — added on top of the approved ZIP CSS above, which stays
   untouched otherwise (including the base .hero rule and both media queries above it, so
   desktop is not affected at all). Root cause of the "overlapping" look on phones: the desktop
   .hero background (line 7) is one wide image — the robot PLUS 6 floating feature cards spread
   either side of it — deliberately sized so the empty left portion sits behind the hero copy
   and the robot+cards sit to the right, out of the text's way. The two mobile media queries
   above only resize/reposition that SAME wide image; at phone widths that crops into the
   floating cards instead of hiding them, so partial cards ended up visible behind/overlapping
   the "Start Free Today" button. caxo-hero-background-mobile.webp is a tighter crop of just the
   robot + "Your Marketing On Autopilot" badge (no side cards) sliced from the same source
   image — swapped in for .hero's background only at these two existing breakpoints.
   ============================================================ */
@media (max-width:767px) {
  .hero { background-image:url("/guest/assets/images/caxo-hero-background-mobile.webp"); background-size:auto 536px; background-position:center bottom; }
}
@media (max-width:480px) {
  .hero { background-image:url("/guest/assets/images/caxo-hero-background-mobile.webp"); background-size:auto 505px; background-position:center bottom; }
}

/* Pricing cards grow with their lists (more items no longer spill over the footer), and their buttons line up along the bottom. */
.pricing { height:auto; min-height:316px; align-items:stretch; }
.plan,.custom-plan { height:auto; min-height:262px; display:flex; flex-direction:column; }
.plan ul { flex:1 1 auto; }
.plan-button { margin-top:auto; flex:none; }
.plan ul + .plan-button { margin-top:13px; }
@media (max-width:480px) { .plan,.custom-plan { min-height:250px; } }