/* AI-Native sales page (/ai-for-cloud-engineers/), design C "Signal" approved
   26-Oct-2026 on the Claude Design canvas. The hero shares the ink of the
   video section below it (changed 26-Oct at Akinwunmi's request) so the two
   read as one band, then white, light grey and navy bands. The site's dark tokens are redefined per band so
   shared components (.input, .lbl) read correctly on light grounds. */
.sp{background:#05070C}
.sp-wrap{max-width:1240px;margin:0 auto;padding-left:clamp(16px,4vw,40px);padding-right:clamp(16px,4vw,40px)}
.sp-sec{padding-top:clamp(72px,9vw,112px);padding-bottom:clamp(72px,9vw,112px)}
.sp-mono{font-family:'Geist Mono','Geist Mono Fallback',ui-monospace,monospace;font-size:13px;letter-spacing:.05em;text-transform:uppercase;margin:0}
.sp-kicker{margin-bottom:16px;color:#1736FF}
.sp-dark .sp-kicker{color:#93A6FF}
.sp-h1,.sp-h2,.sp-h3,.sp-close__h,.sp-form__h{font-family:'Funnel Display','Funnel Display Fallback',sans-serif;letter-spacing:-.04em;font-weight:800}
.sp-h1{font-size:clamp(44px,7.4vw,108px);line-height:.92;margin:0 0 clamp(32px,4vw,48px)}
.sp-nowrap{white-space:nowrap}
.sp-h1__light,.sp-h2__light{font-weight:300}
.sp-h2{font-size:clamp(34px,4.4vw,56px);line-height:.98;margin:0 0 clamp(36px,4vw,56px);max-width:15em}
.sp-h3{font-size:clamp(24px,2.4vw,32px);line-height:1.05;margin:0 0 18px}
.sp-btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 28px;border-radius:999px;font-weight:700;font-size:16px;text-decoration:none;border:0;cursor:pointer;transition:transform .2s,background .2s}
.sp-btn:hover{transform:translateY(-1px)}
.sp-btn--white{background:#fff;color:#1736FF}
.sp-btn--ink{background:#05070C;color:#fff}
.sp-btn--blue{background:#1736FF;color:#fff}
.sp-btn--blue:hover{background:#0F27D6}

.sp-hero{background:#05070C;color:#fff;overflow:hidden;position:relative;isolation:isolate}
/* depth on the ink: two slow blue glows over a faint blueprint grid that
   fades out towards the bottom, where the hero meets the video section */
.sp-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 55% at 85% 20%,rgba(23,54,255,.42),transparent 70%),radial-gradient(45% 40% at 5% 95%,rgba(23,54,255,.22),transparent 70%);
  animation:sp-glow 14s ease-in-out infinite alternate}
.sp-hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(147,166,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(147,166,255,.07) 1px,transparent 1px);background-size:56px 56px;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 45%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 45%,transparent 100%)}
.sp-top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:22px;padding-bottom:22px}
.sp-top__cta{min-height:44px;font-size:15px;padding:0 20px}
.sp-hero__eyebrow{color:#93A6FF;margin:clamp(40px,6vw,72px) 0 20px}
.sp-hero .sp-h1__light{color:#93A6FF}
.sp-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,64px);align-items:end}
.sp-hero__copy{padding-bottom:clamp(48px,7vw,96px)}
.sp-hero__lead{font-size:clamp(18px,1.6vw,21px);line-height:1.5;color:#C9D1E6;max-width:30em;margin:0 0 32px}
.sp-hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.sp-hero__cta span{font-size:14px;color:#A9B2C8}
.sp-hero .sp-btn--blue{box-shadow:0 10px 30px rgba(23,54,255,.45)}
.sp-ads{display:grid;gap:16px}
.sp-ad{border-radius:16px 16px 0 0;padding:24px 28px}
.sp-ad p{margin:0}
.sp-ad--then{background:rgba(255,255,255,.05);border:1px solid rgba(147,166,255,.22);color:#B9C1D3;transform:rotate(-2deg);transform-origin:bottom left}
.sp-ad--then .sp-mono{color:#93A6FF}
.sp-ad--then .sp-ad__title{color:#fff}
.sp-ad--now{background:#fff;color:#05070C;padding-bottom:32px;box-shadow:0 -20px 80px rgba(23,54,255,.35)}
.sp-ad--now .sp-mono{color:#1736FF}
.sp-ad__title{font-family:'Funnel Display','Funnel Display Fallback',sans-serif;font-weight:800;font-size:clamp(22px,2vw,28px);letter-spacing:-.03em;margin:8px 0 10px !important}
.sp-ad__skills{font-size:14.5px;line-height:1.6;opacity:.85}
.sp-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px !important}
.sp-chips span{padding:6px 12px;border-radius:999px;background:#1736FF;color:#fff;font-size:13px;font-weight:600}

.sp-vsl{background:#05070C;color:#F4F6FB;padding:clamp(64px,8vw,104px) 0;text-align:center}
.sp-vsl .sp-kicker{color:#93A6FF}
.sp-vsl .sp-h2{margin-left:auto;margin-right:auto}
.sp-vsl__frame{max-width:960px;margin:0 auto 36px;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#0A0E1A;border:1px solid rgba(255,255,255,.14);box-shadow:0 40px 100px rgba(0,0,0,.5)}
.sp-vsl__placeholder{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;color:#7F89A2}
.sp-vsl__placeholder p{margin:0}
.sp-vsl__play{width:84px;height:84px;border-radius:50%;background:#1736FF;position:relative}
.sp-vsl__play::after{content:"";position:absolute;left:34px;top:26px;border-left:24px solid #fff;border-top:16px solid transparent;border-bottom:16px solid transparent}

.sp-white{background:#fff;color:#05070C}
.sp-light{background:#F4F6FB;color:#05070C}
.sp-white,.sp-light{--bg2:#fff;--ink:#05070C;--ink2:#3A4152;--ink3:#555C6B;--line2:#C9CEDB;color-scheme:light}
.sp-dark{background:#05070C;color:#F4F6FB}
.sp-stats3{list-style:none;margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.sp-stats3 li{padding:40px 32px;color:#3A4152;line-height:1.4}
.sp-stats3 li:first-child{padding-left:0}
.sp-stats3 li+li{border-left:1px solid #E3E6EE}
.sp-stats3 b{display:block;font-family:'Funnel Display','Funnel Display Fallback',sans-serif;font-size:clamp(44px,4.6vw,64px);font-weight:800;letter-spacing:-.04em;line-height:1;color:#05070C;margin-bottom:8px}

.sp-facts{display:grid;gap:2px;background:#D9DDE8;border-radius:16px;overflow:hidden}
.sp-fact{display:grid;grid-template-columns:minmax(0,14rem) minmax(0,1fr);gap:24px;padding:28px 32px;background:#fff;align-items:center}
.sp-fact>b{font-family:'Funnel Display','Funnel Display Fallback',sans-serif;font-size:clamp(40px,4.2vw,56px);font-weight:800;letter-spacing:-.04em}
.sp-fact p{margin:0;font-size:18px;line-height:1.5}
.sp-blue{color:#1736FF}
.sp-fact--ink{background:#05070C;color:#fff}
.sp-fact--ink>b{color:#93A6FF}
.sp-src{margin-top:10px !important;font-size:12px !important}
.sp-src a{color:#555C6B;text-decoration:underline}
.sp-fact--ink .sp-src a{color:#8A93A8}
.sp-bar{height:10px;border-radius:999px;margin-top:12px;background:linear-gradient(90deg,#C3CDFF 0 32%,#1736FF 32% 100%)}
.sp-note{margin:40px 0 0;font-size:20px;line-height:1.6;max-width:44em;color:#3A4152}

.sp-rail{list-style:none;padding:0;margin:0 0 32px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:2px solid #1736FF}
.sp-rail li{padding:24px 18px 0 0;position:relative}
.sp-rail li::before{content:"";position:absolute;top:-8px;left:0;width:14px;height:14px;border-radius:50%;background:#1736FF}
.sp-rail li.is-last::before{background:#fff}
.sp-rail b{display:block;font-family:'Funnel Display','Funnel Display Fallback',sans-serif;font-size:40px;font-weight:800;color:#1736FF;letter-spacing:-.04em}
.sp-rail li.is-last b{color:#fff}
.sp-rail h3{font-family:'Funnel Display','Funnel Display Fallback',sans-serif;font-size:22px;margin:8px 0}
.sp-rail p{margin:0;font-size:14.5px;line-height:1.55;color:#B9C1D3}
.sp-muted{color:#7F89A2;line-height:1.6}
.sp-muted a{color:#93A6FF;text-decoration:underline}
.sp-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(36px,5vw,64px)}
.sp-why{margin-top:72px;padding-top:56px;border-top:1px solid rgba(255,255,255,.12)}
.sp-why p{color:#B9C1D3;line-height:1.6;margin:0 0 12px}
.sp-why .sp-muted{color:#7F89A2}

.sp-bonus{background:linear-gradient(135deg,#1736FF,#0B1C99);color:#fff}
.sp-bonus__inner{padding-top:clamp(64px,8vw,96px);padding-bottom:clamp(64px,8vw,96px)}
.sp-bonus .sp-mono{color:#C3CDFF;margin-bottom:16px}
.sp-bonus .sp-h2{margin-bottom:16px}
.sp-bonus p{font-size:19px;line-height:1.6;max-width:40em;color:#E3E8FF;margin:0}

.sp-join{align-items:center}
.sp-steps{list-style:none;margin:0;padding:0;border-left:2px solid #1736FF}
.sp-steps li{padding:0 0 24px 24px}
.sp-steps li:last-child{padding-bottom:0}
.sp-steps .sp-mono{color:#1736FF;margin-bottom:6px}
.sp-steps p{margin:0;font-size:18px;line-height:1.5}
.sp-watch{margin:28px 0 0}
.sp-watch a{color:#1736FF;font-weight:600;text-decoration:underline}
.sp-form{padding:clamp(24px,3vw,36px);border-radius:24px;background:#F4F6FB;border:1.5px solid #E3E6EE;display:grid;gap:16px;scroll-margin-top:16px}
.sp-form__h{font-size:clamp(26px,2.4vw,30px);line-height:1.05;margin:0 0 4px}
.sp-form .field{margin:0}
.sp-form .lbl{font-weight:700}
.sp-hint{margin:-8px 0 0;font-size:13px;color:#555C6B}
.sp-check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:#3A4152;line-height:1.45;cursor:pointer}
.sp-check input{margin-top:2px;width:18px;height:18px;accent-color:#1736FF;flex:none}
.sp-form__btn{width:100%}
.sp-fine{margin:0;font-size:12.5px;line-height:1.5;color:#555C6B}
.sp-fine a{color:#1736FF;text-decoration:underline}
.sp-form .form-status{color:#3A4152}

.sp-faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.sp-faq>div{padding:24px;border-radius:16px;background:#fff}
.sp-faq h3{margin:0 0 8px;font-size:18px}
.sp-faq p{margin:0;color:#3A4152;line-height:1.6}

.sp-close{background:#05070C;color:#fff;text-align:center;padding:clamp(88px,10vw,128px) 20px}
.sp-close .sp-mono{color:#93A6FF;margin-bottom:20px}
.sp-close__h{font-size:clamp(44px,6vw,80px);line-height:.92;margin:0 auto 32px;max-width:12em}
.sp-foot{background:#05070C;color:#7F89A2;display:flex;justify-content:center;gap:20px;padding:0 20px 96px;font-size:13px}
.sp-foot a{color:#B9C1D3}
.sp-sticky{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;display:none;max-width:420px;margin:0 auto;box-shadow:0 12px 32px rgba(5,7,12,.35)}
.sp-sticky.is-on{display:flex}

@media (max-width:900px){
  .sp-hero__grid,.sp-two{grid-template-columns:1fr}
  .sp-hero__copy{padding-bottom:0}
  .sp-rail{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px}
  .sp-faq{grid-template-columns:1fr}
  .sp-fact{grid-template-columns:1fr;gap:8px}
}
@media (max-width:560px){
  .sp-nowrap{white-space:normal}
  .sp-stats3{grid-template-columns:1fr}
  .sp-stats3 li{padding:24px 0}
  .sp-stats3 li+li{border-left:0;border-top:1px solid #E3E6EE}
  .sp-rail{grid-template-columns:1fr}
  .sp-top__cta{display:none}
}

/* countdown to the cohort start (public/site/pages/ai-sales.js) */
.sp-countdown{display:inline-flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:0 0 28px;padding:12px 18px;border-radius:14px;background:rgba(23,54,255,.14);border:1px solid rgba(147,166,255,.32)}
.sp-countdown[hidden]{display:none}
.sp-countdown .sp-mono{color:#93A6FF}
.sp-countdown__units{display:flex;align-items:baseline;gap:6px}
.sp-countdown__units b{font-family:'Funnel Display','Funnel Display Fallback',sans-serif;font-size:32px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:#fff;min-width:1.4em;text-align:right}
.sp-countdown__units i{font-style:normal;font-size:12px;color:#93A6FF;margin-right:8px}
.sp-countdown--close{background:rgba(23,54,255,.18);border-color:rgba(147,166,255,.35)}
.sp-countdown--close .sp-mono{color:#93A6FF}
.sp-countdown__units i:last-child{margin-right:0}
@media (max-width:420px){.sp-countdown{padding:12px 14px}.sp-countdown__units b{font-size:28px}.sp-countdown__units i{margin-right:4px}}

/* motion. The hero plays once on load (skipped on later pages in the same
   session via html.no-entrance, like the rest of the site). Everything below
   the fold rises in as it scrolls into view: ai-sales.js adds .sp-rv only to
   elements that start off screen, so nothing visible ever blinks out, and
   without JavaScript the page is simply static. */
@keyframes sp-glow{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-4%,3%,0) scale(1.08)}}
@keyframes sp-up{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes sp-then{from{opacity:0;transform:rotate(0) translateY(40px)}to{opacity:1;transform:rotate(-2deg)}}
@keyframes sp-now{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:none}}
@keyframes sp-pop{0%{opacity:0;transform:scale(.6)}70%{transform:scale(1.08)}100%{opacity:1;transform:none}}
@keyframes sp-ring{0%{box-shadow:0 0 0 0 rgba(23,54,255,.55)}100%{box-shadow:0 0 0 28px rgba(23,54,255,0)}}
@keyframes sp-tick{from{opacity:.35;transform:translateY(-4px)}to{opacity:1;transform:none}}

html:not(.no-entrance) .sp-hero__eyebrow,
html:not(.no-entrance) .sp-hero .sp-countdown,
html:not(.no-entrance) .sp-hero .sp-h1,
html:not(.no-entrance) .sp-hero__lead,
html:not(.no-entrance) .sp-hero__cta{animation:sp-up .8s cubic-bezier(.2,.7,.2,1) both}
html:not(.no-entrance) .sp-hero .sp-countdown{animation-delay:.08s}
html:not(.no-entrance) .sp-hero .sp-h1{animation-delay:.16s}
html:not(.no-entrance) .sp-hero__lead{animation-delay:.32s}
html:not(.no-entrance) .sp-hero__cta{animation-delay:.42s}
html:not(.no-entrance) .sp-ad--then{animation:sp-then .9s cubic-bezier(.2,.7,.2,1) .45s both}
html:not(.no-entrance) .sp-ad--now{animation:sp-now .9s cubic-bezier(.2,.7,.2,1) .65s both}
html:not(.no-entrance) .sp-chips span{animation:sp-pop .45s cubic-bezier(.2,.7,.2,1) both}
html:not(.no-entrance) .sp-chips span:nth-child(1){animation-delay:1.25s}
html:not(.no-entrance) .sp-chips span:nth-child(2){animation-delay:1.37s}
html:not(.no-entrance) .sp-chips span:nth-child(3){animation-delay:1.49s}
html:not(.no-entrance) .sp-chips span:nth-child(4){animation-delay:1.61s}
.sp-countdown__units b[data-cd="s"].is-tick{animation:sp-tick .35s ease-out}
.sp-vsl__play{animation:sp-ring 2s ease-out infinite}

.sp-btn{position:relative;overflow:hidden}
.sp-btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .6s ease;pointer-events:none}
.sp-btn:hover::after{left:120%}
.sp-btn--blue:hover{box-shadow:0 12px 32px rgba(23,54,255,.45)}
.sp-fact,.sp-faq>div{transition:transform .25s ease,box-shadow .25s ease}
.sp-fact:hover{transform:translateX(6px)}
.sp-faq>div:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(5,7,12,.08)}
.sp-rail li::before{transition:transform .3s ease,box-shadow .3s ease}
.sp-rail li:hover::before{transform:scale(1.4);box-shadow:0 0 0 6px rgba(23,54,255,.25)}

.sp-rv{opacity:0;transform:translateY(32px);transition:opacity .7s cubic-bezier(.2,.7,.2,1) var(--d,0s),transform .7s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.sp-rv.is-in{opacity:1;transform:none}
.sp-bar.sp-rv{opacity:1;transform:scaleX(0);transform-origin:left;transition:transform 1.4s cubic-bezier(.2,.7,.2,1) .2s}
.sp-bar.sp-rv.is-in{transform:none}

.sp-close{position:relative;overflow:hidden;isolation:isolate}
.sp-close::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(50% 60% at 50% 100%,rgba(23,54,255,.35),transparent 70%);animation:sp-glow 14s ease-in-out infinite alternate}

@media (prefers-reduced-motion:reduce){
  .sp *,.sp *::before,.sp *::after,.sp-hero::before,.sp-close::before{animation:none !important;transition:none !important}
  .sp-rv{opacity:1;transform:none}
}