/* jonjon.ai as a Service page. Ported from Figma Make JonJonServicePage.tsx (Tailwind classes), kept in px because the
   site renders rem at 80%. Brand colours as in the design: blue #002C72, green #018752, gold #EFB22D.
   Breakpoints match Tailwind: sm 640, md 768, lg 1024, xl 1280. Section content width matches the top nav. */
.ja-page{--ja-blue:#002c72;--ja-green:#018752;--ja-gold:#efb22d;background:white;color:#1e293b;font-family:inherit;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
.ja-page,.ja-page *{box-sizing:border-box}
.ja-page :where(h1,h2,h3,p,ul,ol,dl,dd,figure,blockquote){margin:0}
.ja-page :where(ul,ol){padding:0;list-style:none}
.ja-page :where(h1,h2,h3){font-family:inherit;font-weight:700;color:var(--ja-blue)}
.ja-page a:focus-visible,.ja-page input:focus-visible{outline:2px solid var(--ja-gold);outline-offset:2px}
.ja-page section[id]{scroll-margin-top:112px}
.ja-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ja-wrap{width:100%;max-width:1440px;margin-inline:auto;padding-inline:32px;min-width:0}
.ja-section{padding:64px 0;background:white}
.ja-soft{background:#f8fafc}
.ja-dark{background:var(--ja-blue);color:white}
.ja-ico-16{width:16px;height:16px;flex:none}.ja-ico-20{width:20px;height:20px;flex:none}.ja-ico-24{width:24px;height:24px}.ja-ico-28{width:28px;height:28px}
.ja-blue{color:var(--ja-blue)}
.ja-mt12{margin-top:12px}.ja-mt16{margin-top:16px}.ja-mt20{margin-top:20px}
.ja-pad28{padding:28px}

/* Section heading */
.ja-heading{max-width:768px;margin-bottom:40px}
.ja-eyebrow{font-size:14px;line-height:1.43;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ja-green)}
.ja-heading h2{margin-top:12px;font-size:30px;line-height:1.25}
.ja-intro{margin-top:20px;font-size:18px;line-height:1.625;color:#334155}
.ja-dark .ja-eyebrow{color:var(--ja-gold)}
.ja-dark .ja-heading h2{color:white}
.ja-dark .ja-intro{color:#dbeafe}

/* Buttons */
.ja-actions,.ja-cta-btns{display:flex;flex-direction:column;gap:12px}
.ja-actions{margin-top:32px}
.ja-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 24px;border:2px solid transparent;border-radius:6px;
  font-size:16px;font-weight:700;line-height:1.25;text-decoration:none;white-space:nowrap;transition:background-color .15s}
.ja-btn-green{background:var(--ja-green);color:white!important;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1)}
.ja-btn-green:hover{background:#166534}
.ja-btn-ghost{background:transparent;border-color:rgba(255,255,255,.6);color:white!important}
.ja-btn-ghost:hover{background:rgba(255,255,255,.1)}

/* Cards and grids */
.ja-card{border:1px solid #e2e8f0;border-radius:16px;background:white;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.ja-card-top{border-top:4px solid var(--ja-green)}
.ja-grid{display:grid;gap:24px}
.ja-h3{font-size:20px;line-height:1.4}
.ja-body{font-size:16px;line-height:1.625;color:#334155}

/* Hero */
.ja-hero{position:relative;overflow:hidden;padding:48px 0;background:var(--ja-blue);color:white;scroll-margin-top:112px}
.ja-hero-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 85% 30%,rgba(1,135,82,.32),transparent 55%);pointer-events:none}
.ja-hero-dots{position:absolute;inset:0;opacity:.3;background-image:radial-gradient(rgba(255,255,255,.18) 1px,transparent 1px);background-size:28px 28px;pointer-events:none}
.ja-hero-grid{position:relative;display:grid;gap:40px;align-items:center}
.ja-hero-copy{min-width:0}
.ja-brand{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px}
.ja-brand>span:first-child{font-size:20px;line-height:1.4;font-weight:700;letter-spacing:-.025em}
.ja-badge{padding:2px 12px;border-radius:9999px;background:var(--ja-green);font-size:14px;line-height:1.43;font-weight:700}
.ja-audience{font-size:16px;line-height:1.375;font-weight:600;color:var(--ja-gold)}
.ja-hero h1{margin-top:16px;font-size:36px;line-height:1.25;color:white}
.ja-hero-text{margin-top:20px;font-size:18px;line-height:1.625;color:#dbeafe}
.ja-actions .ja-btn{width:100%}
.ja-hero-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px;margin-top:32px;padding-top:24px;border-top:1px solid rgba(255,255,255,.15)}
.ja-hero-stat{display:block;font-size:24px;line-height:1.25;font-weight:700}
.ja-hero-cap{display:block;margin-top:4px;font-size:14px;line-height:1.375;color:#dbeafe}
.ja-reply{min-width:0;padding:20px;border-radius:16px;background:white;color:#1e293b;box-shadow:0 25px 50px -12px rgba(0,0,0,.3)}
.ja-reply-head{display:flex;align-items:flex-start;gap:12px;padding-bottom:16px;border-bottom:1px solid #e2e8f0}
.ja-reply-head>div{min-width:0}
.ja-avatar{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:var(--ja-green);font-size:16px;font-weight:700;color:white}
.ja-reply-name{font-size:16px;line-height:1.5;font-weight:700;color:var(--ja-blue)}
.ja-reply-ticket{font-size:14px;line-height:1.375;color:#475569}
.ja-reply-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-top:16px}
.ja-mini{font-size:14px;line-height:1.43;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#64748b}
.ja-confidence{padding:4px 12px;border-radius:9999px;background:#ecfdf5;font-size:14px;line-height:1.43;font-weight:700;color:var(--ja-green)}
.ja-reply-text{margin-top:8px;font-size:16px;line-height:1.625}
.ja-reply-steps{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.ja-reply-steps li{display:flex;gap:12px;font-size:16px;line-height:1.375}
.ja-reply-steps li span:last-child{min-width:0;overflow-wrap:anywhere}
.ja-step-num{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:var(--ja-blue);font-size:12px;font-weight:700;color:white}
.ja-reply-sources{display:flex;align-items:flex-start;gap:8px;margin-top:4px;font-size:14px;line-height:1.375;color:#334155}
.ja-reply-sources svg{margin-top:2px}
.ja-reply-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.ja-fake-green,.ja-fake-outline{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:8px;font-size:14px;font-weight:700}
.ja-fake-green{background:var(--ja-green);color:white}
.ja-fake-outline{border:2px solid #cbd5e1;color:#334155}
.ja-reply figcaption{margin-top:16px;font-size:14px;line-height:1.375;color:#64748b}

/* Results */
.ja-results{display:grid;gap:24px}
.ja-chart{padding:24px;border:1px solid #e2e8f0;border-radius:16px;background:white;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.ja-chart h3{font-size:20px;line-height:1.4}
.ja-chart-text{margin-top:8px;font-size:16px;line-height:1.625;color:#475569}
.ja-bars{display:grid;align-items:end;gap:8px;height:288px;margin-top:24px}
.ja-bars li{display:flex;flex-direction:column;justify-content:flex-end;min-width:0;height:100%;text-align:center}
.ja-bar-value{font-size:16px;line-height:1.5;font-weight:700;color:var(--ja-blue)}
.ja-bar{display:block;width:100%;margin-top:4px;border-radius:6px 6px 0 0;background:#cbd5e1}
.ja-bar.is-jonjon,.ja-key.is-jonjon{background:var(--ja-green)}
.ja-bar-period{display:block;min-height:40px;margin-top:8px;font-size:12px;line-height:1.25;color:#475569}
.ja-legend{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-top:16px;font-size:14px;line-height:1.625;color:#475569}
.ja-legend span{display:inline-flex;align-items:center;gap:8px}
.ja-key{display:inline-block;width:12px;height:12px;border-radius:2px;background:#cbd5e1}
.ja-tiles{display:grid;gap:16px;align-content:start}
.ja-tiles>div{padding:20px;border:1px solid #e2e8f0;border-radius:16px;background:#f8fafc}
.ja-tile-value{font-size:30px;line-height:1.2;font-weight:700;color:var(--ja-green)}
.ja-tile-cap{margin-top:8px;font-size:16px;line-height:1.375;color:#334155}
.ja-quote{margin-top:40px;padding:32px;border-radius:16px;background:var(--ja-blue);color:white}
.ja-quote-ico{display:block;width:40px;height:40px;color:var(--ja-gold)}
.ja-quote p{max-width:896px;margin-top:12px;font-size:20px;line-height:1.625}
.ja-quote footer{margin-top:20px;font-size:16px;line-height:1.5;font-weight:600;color:#dbeafe}
.ja-stories{display:grid;gap:20px;margin-top:40px}
.ja-stories article{padding:24px}
.ja-story-tag{font-size:14px;line-height:1.43;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ja-green)}
.ja-stories article p:last-child{margin-top:12px;font-size:16px;line-height:1.625;color:#334155}

/* What it is, Why */
.ja-icon-box{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:rgba(0,44,114,.1);color:var(--ja-blue)}
.ja-no{font-size:30px;line-height:1.2;font-weight:700;color:var(--ja-green);font-variant-numeric:tabular-nums}

/* How it works */
.ja-steps{display:grid;gap:16px}
.ja-steps li{padding:24px;border:1px solid rgba(255,255,255,.15);border-radius:16px;background:rgba(255,255,255,.05)}
.ja-step-big{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--ja-green);font-size:18px;font-weight:700}
.ja-steps h3{margin-top:16px;font-size:18px;line-height:1.56;color:white}
.ja-steps p{margin-top:8px;font-size:16px;line-height:1.625;color:#dbeafe}

/* Service and audiences */
.ja-two{display:grid;gap:48px}
.ja-checks{display:flex;flex-direction:column;gap:20px;margin-top:-8px}
.ja-checks li{display:flex;gap:12px}
.ja-check-ico{width:24px;height:24px;flex:none;margin-top:2px;color:var(--ja-green)}
.ja-checks p{font-size:16px;line-height:1.625;color:#334155}
.ja-checks strong{color:var(--ja-blue)}
.ja-audiences{display:grid;gap:16px;margin-top:-8px}
.ja-audiences article{padding:24px;border:1px solid #e2e8f0;border-radius:16px;background:#f8fafc}
.ja-audiences h3{margin-top:12px;font-size:18px;line-height:1.56}
.ja-audiences p{margin-top:8px;font-size:16px;line-height:1.625;color:#334155}

/* Pricing */
.ja-price{display:flex;flex-direction:column;padding:28px;border:1px solid #e2e8f0;border-radius:16px;background:white;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.ja-price.is-highlight{border:2px solid var(--ja-green);box-shadow:0 0 0 4px #d1fae5,0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)}
.ja-price-label{width:fit-content;padding:4px 12px;border-radius:9999px;background:#f1f5f9;font-size:14px;line-height:1.43;font-weight:700;color:#334155}
.ja-price.is-highlight .ja-price-label{background:var(--ja-green);color:white}
.ja-price h3{margin-top:16px;font-size:24px;line-height:1.33}
.ja-price-value{margin-top:8px;font-size:20px;line-height:1.375;font-weight:700;color:var(--ja-green)}

/* Savings calculator */
.ja-calc{display:grid;margin-top:48px;overflow:hidden;border:1px solid #e2e8f0;border-radius:16px;background:white;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.ja-calc-inputs{padding:24px}
.ja-calc-inputs h3{font-size:24px;line-height:1.33}
.ja-calc-text{margin-top:8px;font-size:16px;line-height:1.625;color:#475569}
.ja-sliders{display:flex;flex-direction:column;gap:28px;margin-top:32px}
.ja-slider-top{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.ja-slider-top label{font-size:16px;line-height:1.5;font-weight:600;color:#1e293b}
.ja-slider-val{font-size:20px;line-height:1.4;font-weight:700;color:var(--ja-blue);font-variant-numeric:tabular-nums}
.ja-slider input[type=range]{display:block;width:100%;height:32px;margin:12px 0 0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer;touch-action:none}
.ja-slider input[type=range]::-webkit-slider-runnable-track{height:10px;border-radius:9999px;background:linear-gradient(to right,var(--ja-green) var(--ja-fill,50%),#e2e8f0 var(--ja-fill,50%))}
.ja-slider input[type=range]::-moz-range-track{height:10px;border-radius:9999px;background:#e2e8f0}
.ja-slider input[type=range]::-moz-range-progress{height:10px;border-radius:9999px;background:var(--ja-green)}
.ja-slider input[type=range]::-webkit-slider-thumb{width:28px;height:28px;margin-top:-9px;border:4px solid var(--ja-green);border-radius:50%;background:white;box-shadow:0 4px 6px -1px rgba(0,0,0,.1);-webkit-appearance:none;appearance:none;transition:box-shadow .15s}
.ja-slider input[type=range]::-moz-range-thumb{width:20px;height:20px;border:4px solid var(--ja-green);border-radius:50%;background:white;box-shadow:0 4px 6px -1px rgba(0,0,0,.1)}
.ja-slider input[type=range]:hover::-webkit-slider-thumb{box-shadow:0 0 0 4px #d1fae5}
.ja-slider input[type=range]:focus-visible{outline:none}
.ja-slider input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px #a7f3d0}
.ja-slider-range{margin-top:4px;font-size:14px;line-height:1.43;color:#64748b}
.ja-slider-note{margin-top:8px;font-size:14px;line-height:1.625;color:#475569}
.ja-calc-result{padding:24px;background:var(--ja-blue);color:white}
.ja-net-label{font-size:16px;line-height:1.5;font-weight:600;color:#dbeafe}
.ja-net{margin-top:8px;font-size:48px;line-height:1;font-weight:700;font-variant-numeric:tabular-nums}
.ja-net-note{margin-top:8px;font-size:16px;line-height:1.625;color:#dbeafe}
.ja-calc-outs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:32px;padding-top:24px;border-top:1px solid rgba(255,255,255,.2)}
.ja-calc-outs dd span:first-child{display:block;font-size:30px;line-height:1.2;font-weight:700;font-variant-numeric:tabular-nums}
.ja-calc-outs dd span:last-child{display:block;margin-top:4px;font-size:16px;line-height:1.375;color:#dbeafe}
.ja-disclaimer{max-width:896px;margin-top:20px;font-size:14px;line-height:1.625;color:#475569}

/* How to engage */
.ja-stage-top{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.ja-stage-tag{padding:4px 12px;border-radius:9999px;background:var(--ja-blue);font-size:14px;line-height:1.43;font-weight:700;color:white}
.ja-stage-meta{font-size:14px;line-height:1.43;font-weight:600;color:#475569}
.ja-cta{display:flex;flex-direction:column;gap:24px;margin-top:40px;padding:32px;border-radius:16px;background:var(--ja-blue);color:white}
.ja-cta-copy{max-width:672px}
.ja-cta h3{font-size:30px;line-height:1.2;color:white}
.ja-cta p{margin-top:12px;font-size:18px;line-height:1.625;color:#dbeafe}

/* FAQ */
.ja-faq-q{font-size:18px;line-height:1.375}

@media (min-width:640px){
  .ja-heading h2{font-size:36px;line-height:1.11}
  .ja-hero h1{font-size:48px;line-height:1.1}
  .ja-actions,.ja-cta-btns{flex-direction:row;flex-wrap:wrap}
  .ja-actions .ja-btn{width:auto}
  .ja-reply{padding:24px}
  .ja-bars{gap:16px}
  .ja-bar-value{font-size:18px;line-height:1.56}
  .ja-bar-period{font-size:14px}
  .ja-tiles,.ja-audiences{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ja-quote{padding:40px}
  .ja-quote p{font-size:24px;line-height:1.5}
  .ja-calc-inputs,.ja-calc-result{padding:32px}
  .ja-net{font-size:60px}
  .ja-cta{padding:40px}
}
@media (min-width:768px){
  .ja-section{padding:80px 0}
  .ja-hero{padding:64px 0}
  .ja-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ja-grid-2,.ja-grid-why,.ja-stories,.ja-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ja-grid-why{gap:20px}
  .ja-grid-2{gap:20px}
}
@media (min-width:1024px){
  .ja-heading h2{font-size:44px;line-height:1.25}
  .ja-hero h1{font-size:52px;line-height:1.25}
  .ja-hero-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ja-results{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
  .ja-grid-why{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ja-steps{grid-template-columns:repeat(5,minmax(0,1fr))}
  .ja-two{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ja-calc{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
  .ja-cta{flex-direction:row;align-items:center;justify-content:space-between}
}
@media (min-width:1280px){
  .ja-stories{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){.ja-page *{transition:none!important}}