/* ==========================================================================
   /archived/build-ai-skills (old "Build AI Skills" page, noindex)
   ========================================================================== */
.ar-only-phone { display: none; }
.ar-hero { padding: 240px 40px 180px; }
.ar-hero .at-hero__text { gap: 20px; }
.ar-hero__title { max-width: 700px; }
.ar-hero__sub { max-width: 603px; }

.ar-chal .at-sec__inner { gap: 40px; }
.ar-chal__title { text-align: center; }

.ar-reveal__cta { margin-top: 20px; display: flex; justify-content: center; }

.ar-off { background: var(--at-teal-dark); padding: 80px 40px 120px; display: flex; justify-content: center; overflow: hidden; }
.ar-off__inner { width: 100%; max-width: 1000px; display: flex; flex-direction: column; gap: 20px; }
.ar-off__title { color: var(--white); text-align: center; }

.ar-why { background: var(--white); padding: 100px 40px; display: flex; justify-content: center; overflow: hidden; }
.ar-why__inner { width: 100%; max-width: 1000px; display: flex; flex-direction: column; gap: 40px; }
.ar-why__head { display: flex; justify-content: space-between; align-items: flex-start; }
.ar-why__title { width: 550px; color: var(--green); }
.ar-why__sub { width: 320px; color: var(--gray); }
.ar-why__cards { display: grid; grid-template-columns: repeat(3, 320px); gap: 20px; }
.ar-why__card h4.at-step__title { font: 500 24px/28.8px var(--f-head); letter-spacing: -0.02em; }
.ar-why__card .at-step__text { font: 400 18px/27px var(--f-body); color: var(--gray); }
.ar-why__card--1 img { object-position: 100% 50%; }

@media (max-width: 1199.98px) {
  .ar-hero { padding: 200px 30px 140px; }
  .ar-off { padding: 80px 30px; }
  .ar-why { padding: 80px 30px; }
  .ar-why__cards { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .ar-why__card h4.at-step__title { font-size: 22px; line-height: 26.4px; }
  .ar-why__card .at-step__text { font-size: 17px; line-height: 25.5px; }
  .ar-why__sub { width: 300px; }
}
@media (max-width: 809.98px) {
  .ar-not-phone { display: none; }
  .ar-only-phone { display: inline; }
  .ar-hero { padding: 140px 20px 120px; }
  .ar-off { padding: 60px 20px; }
  .ar-why { padding: 60px 20px; }
  .ar-why__head { flex-direction: column; gap: 20px; }
  .ar-why__title, .ar-why__sub { width: 100%; }
  .ar-why__cards { grid-template-columns: 1fr; gap: 20px; }
  .ar-why__card h4.at-step__title { font-size: 20px; line-height: 24px; }
  .ar-why__card .at-step__text { font-size: 16px; line-height: 24px; }
}
.ar-discord { background: var(--gray); border-radius: 16px; padding: 22px 20px 20px; display: flex; justify-content: center; align-items: center; gap: 8px; }
.ar-discord__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.ar-discord__text h5 { font: 500 22px/28.6px var(--f-head); letter-spacing: -0.02em; color: var(--white); }
.ar-discord__text p { font: 400 16px/24px var(--f-body); color: #f0f0f0; }
.ar-discord__btn { flex: none; display: flex; }
@media (max-width: 1199.98px) {
  .ar-discord__text h5 { font-size: 20px; line-height: 26px; }
  .ar-discord__text p { font-size: 15px; line-height: 22.5px; }
}
@media (max-width: 809.98px) {
  .ar-discord { flex-direction: column; align-items: flex-start; gap: 16px; }
  .ar-discord__text h5 { font-size: 18px; line-height: 23.4px; }
  .ar-discord__text p { font-size: 14px; line-height: 21px; }
}
.ar-page .lime { color: #d5ed71; }
@media (max-width: 1199.98px) {
  .ar-hero { padding: 180px 30px 120px; }
  .ar-hero__title { max-width: 600px; }
  .ar-hero__sub { max-width: 450px; }
  .ar-chal .at-sec__inner { gap: 40px; }
  .ar-off { padding: 80px 30px 100px; }
  .ar-why__title { width: 469px; flex: none; }
  .ar-why__sub { width: auto; flex: 1 1 0; }
  .ar-why__cards { display: flex; align-items: flex-start; }
  .ar-why__cards .at-step { flex: 1 1 0; }
  .ar-discord__text { flex: 0 0 477px; }
}
@media (max-width: 809.98px) {
  .ar-hero { padding: 180px 20px 120px; }
  .ar-hero__title, .ar-hero__sub { max-width: none; }
  .ar-reveal__cta { margin-top: 10px; }
  .ar-reveal .at-reveal__words { gap: 20px; }
  .ar-reveal .at-reveal__words h4 { font-size: 20px; line-height: 24px; }
  .ar-reveal .at-reveal__words .at-plus { width: 19px; height: 19px; }
  .ar-off { padding: 60px 20px 80px; }
  .ar-why { padding: 70px 20px; }
  .ar-why__head { align-items: center; text-align: center; gap: 10px; }
  .ar-why__title { width: 100%; }
  .ar-why__sub { width: 320px; flex: none; }
  .ar-why__cards { flex-direction: column; align-items: stretch; gap: 20px; }
  .ar-why__cards .at-step { flex: none; flex-direction: row; align-items: stretch; gap: 20px; padding: 16px; border-radius: 25px; }
  .ar-why__cards .at-step__media { flex: 1 1 0; height: auto; border-radius: 20px; }
  .ar-why__cards .at-step__media img { top: 0; height: 100%; transform: none; }
  .ar-why__cards .at-step__body { flex: 1 1 0; min-width: 0; padding: 0; justify-content: center; }
  .ar-discord { align-items: center; gap: 16px; }
  .ar-discord__text { flex: none; width: 100%; text-align: center; }
}
@media (max-width: 1199.98px) and (min-width: 810px) { .ar-why__inner { gap: 30px; } }
@media (max-width: 1199.98px) and (min-width: 810px) { .ar-why__cards .at-step { min-height: 488px; } }