/* ==========================================================================
   AI Training cluster — shared styles (hub, tracks, specialist pages, certificate, archived)
   Text presets follow the Framer styles: desktop / tablet (810–1199) / phone (<810)
   ========================================================================== */

.at-page strong { font-weight: inherit; }
br.at-br-tab { display: none; }
.at-page { --at-gray-bg: #f8f8fa; --at-teal-dark: #285757; --at-border: #e0e0e0; --at-quote: #f0f0f0; }

/* Extra Framer appear effects */
.js [data-reveal="up"]   { transform: translateY(150px); }
.js [data-reveal="up40"] { transform: translateY(40px); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- Text presets ---------- */
.at-h1 { font: 600 64px/64px var(--f-head); letter-spacing: -0.04em; color: var(--ink-2); }
.at-h2 { font: 600 44px/52.8px var(--f-head); letter-spacing: -0.04em; color: var(--ink-2); }
.at-h3 { font: 500 34px/44.2px var(--f-head); letter-spacing: -0.04em; color: var(--ink-2); }
.at-h4 { font: 500 24px/28.8px var(--f-head); letter-spacing: -0.02em; color: var(--ink-2); }
.at-h5 { font: 500 22px/28.6px var(--f-head); letter-spacing: -0.02em; color: var(--ink-2); }
.at-lead { font: 400 23px/34.5px var(--f-body); color: var(--ink-3); }
.at-body { font: 400 18px/27px var(--f-body); color: var(--ink-3); }
.at-p { font: 400 16px/24px var(--f-body); color: var(--ink-3); }
.at-small { font: 400 14px/21px var(--f-body); color: var(--gray); }
.at-eyebrow { font: 700 18px/27px var(--f-body); letter-spacing: 0.1em; color: var(--green); }
.at-kicker { font: 700 18px/27px var(--f-body); letter-spacing: 0.1em; color: var(--green); }
.at-eyebrow strong, .at-kicker strong { font-weight: 700; }

/* ---------- Generic section ---------- */
.at-sec { padding: 100px 40px 120px; display: flex; justify-content: center; }
.at-sec--gray { background: var(--at-gray-bg); }
.at-sec__inner { width: 100%; max-width: 1000px; display: flex; flex-direction: column; gap: 40px; }
.at-head { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.at-head--center { align-items: center; text-align: center; gap: 10px; }
.at-head--center .at-h2 { align-self: stretch; }

/* ---------- Hero ---------- */
.at-hero { padding: 180px 40px 140px; display: flex; justify-content: center; }
.at-hero__text { width: 100%; max-width: 1200px; display: flex; flex-direction: column; align-items: center; gap: 38px; text-align: center; overflow: hidden; }
.at-hero__btns { align-self: stretch; display: flex; justify-content: center; align-items: center; gap: 10px; }

/* ---------- Buttons ---------- */
.at-btn-green { color: var(--green-dark); box-shadow: inset 0 0 0 1px var(--green-dark); }
.at-btn-green:hover { box-shadow: inset 0 0 0 1px var(--green-dark), 0 8px 20px 0 rgba(212, 237, 114, 0.54); }
.at-chip { display: inline-flex; align-items: center; justify-content: center; padding: 8px 20px; border-radius: 100px; box-shadow: inset 0 0 0 1px var(--gray);
           font: 400 15px/21px var(--f-body); color: var(--gray); white-space: nowrap; }
.at-chips { display: flex; align-items: center; gap: 8px; }
.at-plus { width: 19px; height: 19px; flex: none; color: var(--lime); }

/* ---------- Photo cards ("Step 1") ---------- */
.at-steps { display: flex; justify-content: center; align-items: flex-start; gap: 20px; }
.at-step { flex: 0 0 320px; background: var(--white); border-radius: 30px; padding: 20px; display: flex; flex-direction: column; gap: 20px;
           box-shadow: inset 0 0 0 1px var(--at-border), var(--shadow-card); }
.at-step__media { position: relative; height: 290px; background: var(--ink); border-radius: 25px 25px 40px 40px; overflow: hidden; }
.at-step__media img { position: absolute; left: 0; top: 50%; width: 100%; height: 290px; transform: translateY(-50%); object-fit: cover; border-radius: 20px; }
.at-step__body { padding: 0 10px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.at-step__title { font: 500 22px/28.6px var(--f-head); letter-spacing: -0.02em; color: var(--ink-2); }
h3.at-step__title { font-size: 34px; line-height: 44.2px; letter-spacing: -0.04em; }
.at-step__text { font: 400 16px/24px var(--f-body); color: var(--ink-3); }
.at-step--big { padding-bottom: 36px; }
.at-step--fmt { height: 453px; }
.at-step--big .at-step__media { height: 236px; }
.at-step--big .at-step__media img { height: 100%; }
.at-step--big .at-step__body { padding: 0 16px; }

/* ---------- Product Reveal band (dark teal, glow + line) ---------- */
.at-reveal { position: relative; background: var(--at-teal-dark); padding: 140px 40px 120px; display: flex; justify-content: center; overflow: hidden; }
.at-reveal__inner { position: relative; z-index: 1; width: 100%; max-width: 1200px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.at-reveal__title { max-width: 750px; color: var(--white); }
.at-reveal__words { display: flex; justify-content: center; align-items: center; gap: 20px; }
.at-reveal__words h4 { font: 500 24px/28.8px var(--f-head); letter-spacing: -0.02em; color: #d5ed71; }
.at-reveal__sub { max-width: 540px; color: rgba(255, 255, 255, 0.8); }
.at-reveal__glow { position: absolute; left: 50%; bottom: -89px; width: 493px; height: 139px; margin-left: -248.5px; border-radius: 29%;
                   background: #d4eb70; opacity: .47; filter: blur(86px); pointer-events: none; }
.at-reveal__line { position: absolute; left: 50%; bottom: 0; width: 1000px; height: 1px; margin-left: -500px;
                   background: linear-gradient(90deg, rgba(212, 237, 114, 0) 0%, #d5ed71 50%, rgba(212, 237, 114, 0) 100%); }

/* ---------- VibeLabs box (formats section) ---------- */
.at-formats__inner { gap: 40px; }
.at-vibe { background: var(--at-quote); border-radius: 16px; padding: 20px 20px 24px; display: flex; flex-direction: column; gap: 16px; }
.at-vibe__text { display: flex; flex-direction: column; gap: 5px; }
.at-vibe__title { font: 400 23px/34.5px var(--f-body); color: var(--ink-2); }
.at-vibe__sub { font: 400 14px/21px var(--f-body); color: var(--gray); }
.at-sec--white { background: var(--white); }

/* ---------- Testimonials ticker ---------- */
.at-testi { padding: 80px 40px 100px; display: flex; justify-content: center; overflow: hidden; }
.at-testi__inner { width: 100%; max-width: 1000px; display: flex; flex-direction: column; gap: 40px; }
.at-testi__title { text-align: left; }
.at-ticker { width: 1120px; height: 364px; display: flex; align-items: center; overflow: hidden;
             -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, #000 5%, #000 95%, rgba(0,0,0,0) 100%);
             mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, #000 5%, #000 95%, rgba(0,0,0,0) 100%); }
.at-ticker__track { display: flex; align-items: flex-start; gap: 20px; height: 100%; animation: at-ticker 67.2s linear infinite; }
@keyframes at-ticker { to { transform: translateX(-1680px); } }
@media (prefers-reduced-motion: reduce) { .at-ticker__track { animation: none; } }
.at-tcard { flex: none; width: 400px; height: 283px; background: var(--white); border-radius: 30px; padding: 30px 20px 30px 30px;
            display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
            box-shadow: inset 0 0 0 1px var(--at-border), var(--shadow-card); }
.at-tcard__top { display: flex; flex-direction: column; gap: 10px; }
.at-tcard__icon { width: 48px; height: 48px; fill: #2f2f2f; }
.at-tcard__quote { font: 400 18px/23.4px var(--f-body); letter-spacing: -0.02em; color: var(--ink-2); }
.at-tcard__who { width: 100%; display: flex; flex-direction: column; }
.at-tcard__name { font: 500 17px/23.8px var(--f-head); letter-spacing: -0.02em; color: var(--ink-2); }
.at-tcard__role { font: 400 14px/21px var(--f-body); color: var(--gray); }

/* ---------- FAQ ---------- */
.at-faq { background: var(--at-gray-bg); padding: 100px 40px; display: flex; justify-content: center; overflow: hidden; }
.at-faq__inner { width: 100%; max-width: 1000px; display: flex; flex-direction: column; gap: 40px; }
.at-faq__head { display: flex; justify-content: space-between; align-items: flex-start; }
.at-faq__title { width: 500px; font: 600 44px/52.8px var(--f-head); letter-spacing: -0.04em; color: var(--ink-2); }
.at-faq__title span { display: block; white-space: pre-wrap; }
.at-faq__side { width: 320px; align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; }
.at-faq__side p { font: 400 18px/27px var(--f-body); color: var(--gray); }

/* ---------- Current page in footer ---------- */
.at-page--founder .footer__links a[href="/ai-training/founder-track"],
.at-page--business .footer__links a[href="/ai-training/business-track"],
.at-page--career .footer__links a[href="/ai-training/career-changer"],
.at-page--ais .footer__links a[href="/ai-training/ai-integration-specialist"],
.at-page--hais .footer__links a[href="/ai-training/healthcare-ai-integration-specialist"] { color: var(--green-dark); }

/* ==========================================================================
   Tablet
   ========================================================================== */
@media (max-width: 1199.98px) {
  br.at-br-tab { display: inline; }
  .at-h1 { font-size: 49px; line-height: 49px; }
  .at-h2 { font-size: 38px; line-height: 45.6px; }
  .at-h3 { font-size: 30px; line-height: 39px; }
  .at-h4 { font-size: 22px; line-height: 26.4px; }
  .at-h5 { font-size: 20px; line-height: 26px; }
  .at-lead, .at-body { font-size: 17px; line-height: 25.5px; }
  .at-p { font-size: 15px; line-height: 22.5px; }
  .at-small { font-size: 13px; line-height: 19.5px; }
  .at-kicker { font-size: 17px; line-height: 25.5px; }

  .at-sec { padding: 80px 30px; }
  .at-sec__inner { gap: 30px; }
  .at-hero { padding: 180px 30px 120px; }

  .at-steps { gap: 10px; }
  .at-step { flex: 1 1 0; min-width: 0; border-radius: 25px; padding: 10px 10px 20px; }
  .at-step__media { height: 290px; border-radius: 20px 20px 30px 30px; }
  .at-step--fmt { height: 370px; }
  .at-step--fmt .at-step__media { height: 191px; }
  .at-step--big .at-step__media { height: 194px; }
  .at-step__title { font-size: 20px; line-height: 26px; }
  h3.at-step__title { font-size: 30px; line-height: 39px; }
  .at-step__text { font-size: 15px; line-height: 22.5px; }
  .at-step--big { padding-bottom: 36px; }

  .at-reveal { padding: 70px 30px; }
  .at-reveal__title { max-width: 600px; }
  .at-reveal__words h4 { font-size: 22px; line-height: 26.4px; }
  .at-reveal__sub { max-width: 450px; }
  .at-reveal__glow { bottom: -127px; }
  .at-reveal__line { display: none; }

  .at-formats__inner { gap: 40px; }
  .at-vibe { padding: 20px 20px 24px; }
  .at-vibe__title { font-size: 17px; line-height: 25.5px; }
  .at-vibe__sub { font-size: 13px; line-height: 19.5px; }
  .at-chips { gap: 10px; }

  .at-testi__title { font-size: 38px; line-height: 45.6px; }
  .at-tcard__name { font-size: 15px; line-height: 21px; }
  .at-tcard__role { font-size: 13px; line-height: 19.5px; }

  .at-faq { padding: 80px 30px; }
  .at-faq__inner { gap: 30px; }
  .at-faq__title { width: 430px; font-size: 38px; line-height: 45.6px; }
  .at-faq__side { justify-content: flex-start; gap: 10px; align-self: flex-start; }
  .at-faq__side p { font-size: 17px; line-height: 25.5px; }
}

/* ==========================================================================
   Phone
   ========================================================================== */
@media (max-width: 809.98px) {
  br.at-br-tab { display: none; }
  .at-h1 { font-size: 38px; line-height: 38px; }
  .at-h2 { font-size: 30px; line-height: 36px; letter-spacing: -0.09em; }
  .at-h3 { font-size: 24px; line-height: 31.2px; }
  .at-h4 { font-size: 20px; line-height: 24px; }
  .at-h5 { font-size: 18px; line-height: 23.4px; }
  .at-lead, .at-body { font-size: 16px; line-height: 24px; }
  .at-p { font-size: 14px; line-height: 21px; }
  .at-small { font-size: 12px; line-height: 18px; }
  .at-kicker { font-size: 16px; line-height: 24px; }

  .at-sec { padding: 60px 20px; }
  .at-sec__inner { gap: 40px; }
  .at-head { align-items: center; text-align: center; gap: 20px; }
  .at-head--center { gap: 10px; }
  .at-hero { padding: 140px 20px 137px; }

  .at-steps { flex-direction: column; gap: 20px; }
  .at-step { flex: none; width: 100%; }
  .at-step--fmt { height: auto; }
  .at-step__media, .at-step--fmt .at-step__media { height: 290px; }
  .at-step--big .at-step__media { height: 233px; }
  .at-step__title { font-size: 18px; line-height: 23.4px; }
  h3.at-step__title { font-size: 24px; line-height: 31.2px; }
  .at-step__text { font-size: 14px; line-height: 21px; }

  .at-reveal { padding: 80px 20px; }
  .at-reveal__inner { gap: 10px; }
  .at-reveal__words { gap: 10px; }
  .at-reveal__words .at-plus { width: 14px; height: 14px; }
  .at-reveal__words h4 { font-size: 15px; line-height: 21px; letter-spacing: -0.02em; }
  .at-reveal__title { max-width: none; }
  .at-reveal__sub { max-width: none; }
  .at-reveal__glow { bottom: -22px; }
  .at-reveal__line { display: block; width: 395px; height: 2px; margin-left: -198px; bottom: 0; }

  .at-vibe__title { font-size: 16px; line-height: 24px; }
  .at-vibe__sub { font-size: 12px; line-height: 18px; }
  .at-chips { flex-wrap: wrap; gap: 6px 8px; justify-content: flex-start; }
  .at-chip { padding: 4px 12px; font-size: 14px; line-height: 21px; }

  .at-testi { padding: 80px 20px 100px; }
  .at-testi__inner { gap: 30px; }
  .at-testi__title { max-width: 280px; align-self: center; text-align: center; font-size: 30px; line-height: 36px; }
  .at-tcard__role { font-size: 12px; line-height: 18px; }

  .at-faq { padding: 60px 20px; }
  .at-faq__inner { gap: 20px; }
  .at-faq__head { flex-direction: column; align-items: center; gap: 10px; text-align: center; }
  .at-faq__title { width: auto; font-size: 30px; line-height: 36px; letter-spacing: -0.09em; }
  .at-faq__side { width: 320px; align-self: center; align-items: center; gap: 16px; }
  .at-faq__side p { font-size: 16px; line-height: 24px; }
}
.at-reveal__title { white-space: pre-wrap; }