/* /css/grid/ai-certification.css
   Styles for grid/ai-certification.php. grid.php links this file by itself,
   after landing.css, because the file name matches the page slug.
   Prefix .ac- so nothing leaks into the shared theme. The site theme restyles
   bare inputs and labels, so the form rules are scoped under .egl-wrap and use
   !important only on the properties the theme sets.
   Mobile first: 16px fields (no zoom on iPhone), 48px tap targets, one column. */

/* ---------- price cards ---------- */
.egl-wrap .ac-prices{display:flex;flex-wrap:wrap;gap:14px;margin:22px 0}
.egl-wrap .ac-price{flex:1 1 280px;box-sizing:border-box;padding:20px 22px;border-radius:10px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16)}
.egl-wrap .ac-price-hi{background:rgba(240,147,43,.10);border-color:rgba(240,147,43,.6)}
.egl-wrap .ac-amount{margin:4px 0 8px;font-size:38px;font-weight:700;line-height:1.1;color:#fff}
.egl-wrap .ac-price p{margin:0 0 8px;font-size:15px}
.egl-wrap .ac-warn{display:block;margin:0 0 8px;font-size:14px;color:#ffd98a}
.egl-wrap .ac-checks{list-style:none;margin:12px 0 4px;padding:0}
.egl-wrap .ac-checks li{position:relative;max-width:none;margin:0 0 8px;padding-left:26px;font-size:15px;color:#e8e8e8}
.egl-wrap .ac-checks li:before{content:"\2713";position:absolute;left:0;top:0;width:18px;height:18px;border-radius:50%;
  background:#f0932b;color:#111;font-size:12px;font-weight:700;line-height:18px;text-align:center}

/* ---------- form and animation: side by side on a wide screen ---------- */
.egl-wrap .ac-apply{display:grid;gap:22px;margin:22px 0 8px}
.egl-wrap .ac-apply .ac-form{margin:0}
@media (min-width:900px){
  .egl-wrap .ac-apply{grid-template-columns:minmax(0,1.6fr) minmax(240px,1fr);align-items:start}
  .egl-wrap .ac-fx{position:sticky;top:20px}
}

/* ---------- the form ---------- */
.egl-wrap .ac-form{display:block;box-sizing:border-box;max-width:none;padding:22px;border-radius:10px;text-align:left;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16)}
.egl-wrap .ac-row{display:flex;flex-wrap:wrap;gap:0 14px;max-width:none}
.egl-wrap .ac-field{display:block;flex:1 1 240px;min-width:0;max-width:none;margin:0 0 16px}
.egl-wrap .ac-form label{display:block!important;float:none!important;width:auto!important;margin:0 0 6px;
  font-size:14px;font-weight:700;color:#fff;text-align:left}
.egl-wrap .ac-form input[type=text],
.egl-wrap .ac-form input[type=email],
.egl-wrap .ac-form input[type=url],
.egl-wrap .ac-form select,
.egl-wrap .ac-form textarea{
  display:block!important;box-sizing:border-box!important;width:100%!important;max-width:none!important;
  min-height:48px;height:auto!important;margin:0!important;padding:11px 13px!important;
  font:inherit!important;font-size:16px!important;line-height:1.4!important;color:#fff!important;
  background:rgba(0,0,0,.55)!important;border:1px solid rgba(255,255,255,.3)!important;border-radius:6px!important;
  box-shadow:none!important}
.egl-wrap .ac-form select{appearance:auto}
.egl-wrap .ac-form select option{color:#111;background:#fff}
.egl-wrap .ac-form textarea{min-height:130px;resize:vertical}
.egl-wrap .ac-form ::placeholder{color:#9fb0bc!important;opacity:1}
.egl-wrap .ac-form input:focus,
.egl-wrap .ac-form select:focus,
.egl-wrap .ac-form textarea:focus{outline:0!important;border-color:#f0932b!important;box-shadow:0 0 0 3px rgba(240,147,43,.28)!important}
.egl-wrap .ac-check{display:flex;align-items:flex-start;gap:12px;max-width:none;margin:4px 0 8px}
.egl-wrap .ac-check input[type=checkbox]{flex:none;width:22px;height:22px;margin:2px 0 0;accent-color:#f0932b}
.egl-wrap .ac-check label{margin:0;font-size:15px;font-weight:400;color:#e8e8e8}
.egl-wrap .ac-actions{margin-top:8px}
.egl-wrap .ac-actions .egl-btn{min-height:48px;box-sizing:border-box;margin:14px 8px 0 0;font:inherit;font-size:17px;font-weight:700;cursor:pointer}
.egl-wrap .ac-actions button.egl-btn{border:0}
.egl-wrap .ac-form .egl-fine{max-width:none}
@media (max-width:600px){
  .egl-wrap .ac-form{padding:16px}
  .egl-wrap .ac-field{flex-basis:100%}
  .egl-wrap .ac-actions .egl-btn{display:block;width:100%;margin:12px 0 0;text-align:center}
}

/* ---------- the animation: your 90 days ---------- */
.egl-wrap .ac-fx{box-sizing:border-box;padding:16px 14px 12px;border-radius:10px;text-align:center;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12)}
.egl-wrap .ac-fx-cap{max-width:none;margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:#ffb35c}
.ac-fx svg{display:block;width:100%;max-width:300px;height:auto;margin:0 auto;overflow:visible}
.ac-fx text{fill:#e8f0ff;font-family:inherit}
.ac-t1{font-size:17px;font-weight:700}
.ac-t2{fill:#9fb0cf!important;font-size:12.5px;letter-spacing:.03em}

.ac-track{stroke:rgba(255,255,255,.12);stroke-width:4;stroke-linecap:round}
.ac-line{stroke:#f0932b;stroke-width:4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;
  animation:ac-draw 2.4s ease .2s forwards}
.ac-flow{stroke:#fff;stroke-width:2;stroke-dasharray:6 12;opacity:0;
  animation:ac-fade .6s ease 2.6s forwards,ac-dash 1.6s linear 2.6s infinite}

.ac-node{opacity:0;animation:ac-in .55s ease forwards}
.ac-n1{color:#83e6ff;animation-delay:.3s}
.ac-n2{color:#b48cff;animation-delay:1s}
.ac-n3{color:#f0932b;animation-delay:1.7s}
.ac-n4{color:#5cb85c;animation-delay:2.4s}
.ac-pt{fill:currentColor;stroke:#fff;stroke-opacity:.55;stroke-width:1.5}
.ac-halo{fill:none;stroke:currentColor;stroke-width:2;opacity:.35;transform-box:fill-box;transform-origin:center;
  animation:ac-breathe 2.8s ease-in-out 3s infinite}
.ac-tick{fill:none;stroke:#0b1d0b;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ac-n4 .ac-pt{transform-box:fill-box;transform-origin:center;animation:ac-glow 2.4s ease-in-out 3s infinite}

.ac-dot{fill:#fff;opacity:0;animation:ac-travel 10s ease-in-out 3s infinite}

@keyframes ac-draw{to{stroke-dashoffset:0}}
@keyframes ac-fade{to{opacity:.7}}
@keyframes ac-dash{to{stroke-dashoffset:-36}}
@keyframes ac-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes ac-breathe{0%,100%{transform:scale(1);opacity:.35}50%{transform:scale(1.25);opacity:.12}}
@keyframes ac-glow{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
@keyframes ac-travel{
  0%{transform:translateY(0);opacity:0}
  5%,15%{transform:translateY(0);opacity:1}
  28%,38%{transform:translateY(130px);opacity:1}
  51%,61%{transform:translateY(260px);opacity:1}
  74%,92%{transform:translateY(390px);opacity:1}
  100%{transform:translateY(390px);opacity:0}
}

/* phones: draw once, no endless motion (saves battery) */
@media (max-width:899px){
  .ac-fx svg{max-width:260px}
  .ac-flow,.ac-halo,.ac-n4 .ac-pt{animation:none}
  .ac-flow{opacity:.5}
}

/* people who ask their device for less motion see the finished picture */
@media (prefers-reduced-motion:reduce){
  .ac-line,.ac-flow,.ac-node,.ac-halo,.ac-n4 .ac-pt,.ac-dot{animation:none!important}
  .ac-line{stroke-dashoffset:0}
  .ac-node{opacity:1}
  .ac-flow{opacity:.5}
  .ac-dot{opacity:0}
}