/* ==========================================================
   tools.css — دليل أدوات AI (صفحة /tools/ الجديدة)
   ملف مستقل بالكامل: متغيرات CSS محلية جوّه .aitools فقط،
   بلا اعتماد على أسماء كلاسات styles.css (ملف بيتعدّل بواسطة وكيل تاني
   في نفس الوقت). الألوان مطابقة لـ STYLE BIBLE بالحرف.
   ========================================================== */

.aitools{
  --at-cream:#FFFBF4;
  --at-navy:#1E1B4B;
  --at-navy-light:#3d3878;
  --at-teal:#0D9488;
  --at-teal-light:#2dd4bf;
  --at-gold:#E9A323;
  --at-gold-light:#f5be4f;
  --at-coral:#EF7D73;
  --at-white:#FFFFFF;
  --at-ink:#221f3d;
  --at-radius-lg:22px;
  --at-radius-md:16px;
  --at-radius-sm:10px;
  --at-shadow-out:6px 8px 18px rgba(30,27,75,.14), -4px -4px 12px rgba(255,255,255,.65);
  --at-shadow-out-sm:3px 4px 10px rgba(30,27,75,.12), -2px -2px 8px rgba(255,255,255,.7);
  --at-ease:cubic-bezier(.22,1,.36,1);

  display:block;
  width:min(1100px, calc(100% - 32px));
  margin:0 auto;
  padding:16px 0 64px;
  color:var(--at-ink);
  font-family:inherit;
}

.aitools *{ box-sizing:border-box; }

.aitools .visually-hidden{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ---------- Hero (مضغوط) ---------- */
.aitools-hero{
  text-align:center;
  padding:8px 0 16px;
}

.aitools-hero__title{
  margin:0 0 10px;
  color:var(--at-navy);
  font-size:clamp(1.9rem, 1.5rem + 1.6vw, 2.6rem);
  font-weight:800;
}

.aitools-hero__lead{
  margin:0 0 8px;
  color:var(--at-navy);
  font-size:1.2rem;
  font-weight:700;
}

/* الكتالوج الكامل ثانوي؛ يفتح باختيار واضح بعد jobs الحالية */
.aitools-catalog{
  margin-top:28px;
}

.aitools-catalog__summary{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:54px;
  padding:12px 20px;
  border:1px solid rgba(30,27,75,.10);
  border-radius:var(--at-radius-md);
  color:var(--at-navy);
  background:var(--at-cream);
  box-shadow:var(--at-shadow-out-sm);
  cursor:pointer;
  font-size:1.05rem;
  font-weight:800;
  list-style:none;
}

.aitools-catalog__summary::-webkit-details-marker{ display:none; }
.aitools-catalog__summary::before{ content:"＋"; margin-inline-end:8px; color:var(--at-teal); font-size:1.35rem; }
.aitools-catalog[open] .aitools-catalog__summary::before{ content:"−"; }
.aitools-catalog__summary:focus-visible{ outline:3px solid var(--at-gold); outline-offset:3px; }
.aitools-catalog[open] .aitools-catalog__summary{ margin-bottom:10px; background:#fff; }

/* ---------- شريط الأدوات: بحث + اختصارات + فلاتر ---------- */
.aitools-toolbar{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:28px;
}

.aitools-search{ margin:0; }

.aitools-search__box{
  position:relative;
  display:flex;
  align-items:center;
  background:var(--at-white);
  border-radius:var(--at-radius-md);
  box-shadow:inset 2px 3px 8px rgba(30,27,75,.10), inset -2px -2px 6px rgba(255,255,255,.8);
  border:1px solid rgba(30,27,75,.08);
}

.aitools-search__icon{
  flex:0 0 auto;
  padding-inline-start:16px;
  font-size:1.1rem;
  opacity:.6;
}

.aitools-search__input{
  flex:1 1 auto;
  min-width:0;
  border:0;
  background:transparent;
  padding:16px 14px;
  font-family:inherit;
  font-size:1.05rem;
  color:var(--at-navy);
}

.aitools-search__input::placeholder{
  color:var(--at-ink);
  opacity:.45;
}

.aitools-search__input:focus{
  outline:none;
}

.aitools-search__box:focus-within{
  outline:3px solid var(--at-teal);
  outline-offset:2px;
}

.aitools-search__clear{
  flex:0 0 auto;
  margin-inline-end:10px;
  width:32px;
  height:32px;
  border:0;
  border-radius:50%;
  background:var(--at-cream);
  color:var(--at-navy);
  font-size:.95rem;
  cursor:pointer;
}

.aitools-search__clear:hover{ background:#f3e6cf; }

/* ---------- اختصارات التصنيفات (chips) ---------- */
.aitools-catnav{ display:block; }

.aitools-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.aitools-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:9px 16px;
  min-height:44px;
  border-radius:999px;
  border:1.5px solid rgba(13,148,136,.3);
  background:linear-gradient(150deg, var(--at-white), var(--at-cream));
  color:var(--at-navy);
  text-decoration:none;
  font-family:inherit;
  font-size:.92rem;
  font-weight:700;
  box-shadow:var(--at-shadow-out-sm);
  transition:transform .16s var(--at-ease), box-shadow .16s var(--at-ease), border-color .16s var(--at-ease);
}

.aitools-chip__emoji{ font-size:1.05rem; line-height:1; }

.aitools-chip__count{
  color:var(--at-teal);
  font-weight:800;
  font-size:.82rem;
}

@media (hover:hover){
  .aitools-chip:hover{
    transform:translateY(-1px);
    border-color:var(--at-teal);
    box-shadow:6px 10px 18px rgba(30,27,75,.16), -3px -3px 10px rgba(255,255,255,.7);
  }
}

.aitools-chip:active{ transform:scale(.97); }

.aitools-chip:focus-visible{
  outline:3px solid var(--at-teal);
  outline-offset:2px;
}

/* ---------- فلاتر سريعة ---------- */
.aitools-filters{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.aitools-filter{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:9px 16px;
  min-height:44px;
  border-radius:999px;
  border:1.5px solid rgba(30,27,75,.15);
  background:var(--at-white);
  color:var(--at-navy);
  font-family:inherit;
  font-size:.92rem;
  font-weight:700;
  cursor:pointer;
  transition:background-color .18s var(--at-ease), color .18s var(--at-ease), transform .18s var(--at-ease), border-color .18s var(--at-ease);
}

@media (hover:hover){
  .aitools-filter:hover{ transform:translateY(-1px); border-color:rgba(13,148,136,.4); }
}

.aitools-filter:active{ transform:scale(.97); }

.aitools-filter[aria-pressed="true"]{
  background:linear-gradient(145deg, var(--at-teal-light), var(--at-teal));
  border-color:transparent;
  color:var(--at-white);
  box-shadow:var(--at-shadow-out-sm);
}

.aitools-filter:focus-visible{
  outline:3px solid var(--at-navy);
  outline-offset:2px;
}

.aitools-china-note{
  margin:0 2px;
  padding:10px 16px;
  background:var(--at-cream);
  border-radius:var(--at-radius-sm);
  border-inline-start:4px solid var(--at-gold);
  color:var(--at-navy);
  font-size:.92rem;
  line-height:1.6;
}

/* ---------- أقسام عامة ---------- */
.aitools-section{
  margin-top:44px;
}

.aitools-section__heading{
  margin:0 0 4px;
  color:var(--at-navy);
  font-size:1.35rem;
  font-weight:800;
}

#tools-starter .aitools-section__heading{ margin-bottom:16px; }

/* ---------- ⭐ بيلز «ابدأ من هنا» (لوجو صغير + اسم بس — اختصار مش كرت) ---------- */
.aitools-starter-pills{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0;
  padding:0;
  list-style:none;
}

.aitools-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding-inline-start:6px;
  padding-inline-end:16px;
  padding-block:6px;
  border-radius:999px;
  background:var(--at-white);
  border:1px solid rgba(30,27,75,.1);
  box-shadow:var(--at-shadow-out-sm);
  text-decoration:none;
  color:var(--at-navy);
  font-family:inherit;
  font-weight:700;
  font-size:.92rem;
  transition:transform .16s var(--at-ease), box-shadow .16s var(--at-ease), border-color .16s var(--at-ease);
}

.aitools-pill--nolink{ cursor:default; opacity:.92; }

@media (hover:hover){
  a.aitools-pill:hover{
    transform:translateY(-1px);
    border-color:rgba(13,148,136,.4);
    box-shadow:5px 8px 16px rgba(30,27,75,.15), -2px -2px 8px rgba(255,255,255,.7);
  }
}

a.aitools-pill:active{ transform:scale(.97); }

.aitools-pill:focus-visible{
  outline:3px solid var(--at-teal);
  outline-offset:2px;
}

.aitools-pill--enter{
  animation:aitools-fade-in .24s var(--at-ease) both;
}

.aitools-pill__logo{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--at-cream);
  overflow:hidden;
}

.aitools-pill__logo img{
  display:block;
  max-width:75%;
  max-height:75%;
  object-fit:contain;
}

.aitools-pill__logo-fallback{
  display:none;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  border-radius:50%;
  font-size:.66rem;
  font-weight:800;
  letter-spacing:.02em;
}

.aitools-pill__logo-fallback--navy{ background:var(--at-navy); color:var(--at-white); }
.aitools-pill__logo-fallback--teal{ background:var(--at-teal); color:var(--at-white); }
.aitools-pill__logo-fallback--gold{ background:var(--at-gold); color:var(--at-navy); }

.aitools-pill__logo--broken img{ display:none; }
.aitools-pill__logo--broken .aitools-pill__logo-fallback{ display:flex; }

.aitools-pill__name{ white-space:nowrap; }

/* ---------- شبكة الكروت ---------- */
.aitools-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}

@media (min-width:560px){
  .aitools-grid{ grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); }
}

/* ---------- كرت الأداة ---------- */
.aitools-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:18px;
  text-decoration:none;
  color:inherit;
  border-radius:var(--at-radius-md);
  background:var(--at-white);
  border:1px solid rgba(30,27,75,.08);
  box-shadow:var(--at-shadow-out-sm);
  transition:transform .18s var(--at-ease), box-shadow .18s var(--at-ease);
}

a.aitools-card{ cursor:pointer; }

@media (hover:hover){
  a.aitools-card:hover{
    transform:translateY(-2px);
    box-shadow:6px 10px 18px rgba(30,27,75,.16), -3px -3px 10px rgba(255,255,255,.7);
  }
}

.aitools-card:focus-visible{
  outline:3px solid var(--at-teal);
  outline-offset:2px;
}

.aitools-card--nolink{
  opacity:.92;
}

.aitools-card__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.aitools-card__ribbon{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:3px 10px;
  border-radius:999px;
  background:var(--at-cream);
  color:var(--at-navy);
  font-size:.72rem;
  font-weight:800;
  white-space:nowrap;
}

/* ---------- حاوية اللوجو + fallback ---------- */
.aitools-card__logo{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  border-radius:14px;
  background:var(--at-cream);
  overflow:hidden;
}

.aitools-card__logo img{
  display:block;
  max-width:70%;
  max-height:70%;
  object-fit:contain;
}

.aitools-card__logo-fallback{
  display:none;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  border-radius:14px;
  font-size:1.25rem;
  font-weight:800;
  letter-spacing:.02em;
}

.aitools-card__logo-fallback--navy{ background:var(--at-navy); color:var(--at-white); }
.aitools-card__logo-fallback--teal{ background:var(--at-teal); color:var(--at-white); }
.aitools-card__logo-fallback--gold{ background:var(--at-gold); color:var(--at-navy); }

.aitools-card__logo--broken img{ display:none; }
.aitools-card__logo--broken .aitools-card__logo-fallback{ display:flex; }

.aitools-card__body{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.aitools-card__name{
  margin:0;
  color:var(--at-navy);
  font-size:1.08rem;
  font-weight:800;
}

.aitools-card__company{
  margin:0;
  color:var(--at-ink);
  opacity:.65;
  font-size:.85rem;
}

.aitools-card__desc{
  margin:2px 0 0;
  color:var(--at-ink);
  font-size:.92rem;
  line-height:1.6;
}

.aitools-card__caps{
  margin:2px 0 0;
  color:var(--at-teal);
  font-size:.82rem;
  font-weight:700;
  line-height:1.6;
}

.aitools-card__badges{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:2px;
}

.aitools-badge{
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:3px 9px;
  border-radius:999px;
  background:var(--at-cream);
  color:var(--at-navy);
  font-size:.74rem;
  font-weight:700;
  white-space:nowrap;
}

.aitools-card__cta{
  margin-top:auto;
  padding-top:8px;
  color:var(--at-teal);
  font-weight:800;
  font-size:.92rem;
}

.aitools-card__extlabel{
  display:inline-block;
  margin-inline-start:4px;
}

/* ---------- زرار عرض المزيد ---------- */
.aitools-more{
  display:block;
  margin:18px auto 0;
  padding:11px 26px;
  border:1.5px solid rgba(30,27,75,.15);
  border-radius:999px;
  background:var(--at-white);
  color:var(--at-navy);
  font-family:inherit;
  font-size:.95rem;
  font-weight:800;
  cursor:pointer;
  transition:background-color .18s var(--at-ease), transform .18s var(--at-ease);
}

.aitools-more:hover{ background:var(--at-cream); transform:translateY(-1px); }

.aitools-more:focus-visible{
  outline:3px solid var(--at-teal);
  outline-offset:2px;
}

/* ---------- حالة مافيش نتايج ---------- */
.aitools-empty{
  margin-top:36px;
  padding:32px 20px;
  text-align:center;
  background:var(--at-white);
  border-radius:var(--at-radius-lg);
  box-shadow:var(--at-shadow-out-sm);
}

.aitools-empty h2{
  margin:0 0 8px;
  color:var(--at-navy);
  font-size:1.2rem;
}

.aitools-empty p{
  margin:0 0 16px;
  color:var(--at-ink);
  opacity:.8;
}

.aitools-reset{
  padding:10px 24px;
  border:0;
  border-radius:999px;
  background:linear-gradient(145deg, var(--at-teal-light), var(--at-teal));
  color:var(--at-white);
  font-family:inherit;
  font-weight:800;
  font-size:.95rem;
  cursor:pointer;
}

.aitools-reset:focus-visible{
  outline:3px solid var(--at-navy);
  outline-offset:2px;
}

/* ---------- حركة الدخول للكروت (خفيفة) ---------- */
@keyframes aitools-fade-in{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:translateY(0); }
}

.aitools-card--enter{
  animation:aitools-fade-in .28s var(--at-ease) both;
}

@media (prefers-reduced-motion: reduce){
  .aitools *{
    animation:none !important;
    transition:none !important;
  }
}

/* ---------- ديسكتوب ---------- */
@media (min-width:1024px){
  .aitools{ padding-top:20px; }
  .aitools-hero__title{ font-size:2.6rem; }
}

/* ---------- override لـstyles.css: روابط الشاشة الأولى تبان على الموبايل
   (كانت متخفية بافتراض وجود bottom sheet — الـsheet اتشال) ---------- */
@media (max-width:760px){
  .tools-platforms{ display:grid; }
}

/* ---------- V3 job-first map + static helper links ---------- */
.tools-job-first,
.tools-static-lab{
  margin-top:28px;
  padding:24px;
  border:2px solid rgba(255,255,255,.9);
  border-radius:var(--at-radius-lg);
  background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(240,249,247,.76));
  box-shadow:var(--at-shadow-out);
}

.tools-job-first__heading,
.tools-static-lab__heading{
  max-width:760px;
  margin:0 auto 20px;
  text-align:center;
}

.tools-kicker{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:4px 12px;
  border-radius:999px;
  background:var(--at-gold);
  color:var(--at-navy);
  font-size:.78rem;
  font-weight:800;
}

.tools-job-first__heading h2,
.tools-static-lab__heading h2{
  margin:10px 0 7px;
  color:var(--at-navy);
  font-size:clamp(1.55rem,1.2rem + 1vw,2.1rem);
  line-height:1.35;
}

.tools-job-first__heading p,
.tools-static-lab__heading p{
  margin:0;
  color:var(--at-ink);
  font-size:1rem;
  font-weight:600;
  line-height:1.8;
}

.tools-job-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

.tools-job-card{
  display:flex;
  min-width:0;
  flex-direction:column;
  min-height:164px;
  padding:16px 15px 14px;
  border:2px solid rgba(255,255,255,.92);
  border-radius:18px;
  background:rgba(255,255,255,.75);
  box-shadow:var(--at-shadow-out-sm);
  color:var(--at-navy);
  text-decoration:none;
  transition:transform .18s var(--at-ease),box-shadow .18s var(--at-ease),background-color .18s ease;
}

.tools-job-card--horizon{
  background:linear-gradient(145deg,rgba(245,190,79,.22),rgba(255,255,255,.78));
}

.tools-job-card__icon{
  display:grid;
  width:42px;
  height:42px;
  place-items:center;
  margin-bottom:8px;
  border-radius:14px;
  background:var(--at-cream);
  font-size:1.45rem;
}

.tools-job-card__title{
  font-size:1.05rem;
  font-weight:800;
  line-height:1.45;
}

.tools-job-card__copy{
  margin-top:5px;
  color:var(--at-ink);
  font-size:.9rem;
  font-weight:600;
  line-height:1.55;
}

.tools-job-card__meta{
  margin-top:auto;
  padding-top:10px;
  color:var(--at-teal);
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.02em;
}

@media (hover:hover){
  .tools-job-card:hover{
    background:var(--at-white);
    transform:translateY(-3px);
    box-shadow:var(--at-shadow-out);
  }
}

.tools-job-card:focus-visible,
.tools-helper-link:focus-visible{
  outline:3px solid var(--at-gold);
  outline-offset:3px;
}

.tools-helper-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

.tools-helper-link{
  display:flex;
  min-height:88px;
  flex-direction:column;
  justify-content:center;
  padding:15px 16px;
  border:2px solid rgba(255,255,255,.95);
  border-radius:16px;
  background:var(--at-white);
  color:var(--at-navy);
  text-decoration:none;
  box-shadow:var(--at-shadow-out-sm);
  transition:transform .18s var(--at-ease),box-shadow .18s var(--at-ease);
}

.tools-helper-link span{
  font-size:.98rem;
  font-weight:800;
  line-height:1.4;
}

.tools-helper-link small{
  margin-top:4px;
  color:var(--at-teal);
  font-size:.82rem;
  font-weight:700;
  line-height:1.45;
}

.tools-badge-key{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:7px;
  margin-top:18px;
  padding-top:15px;
  border-top:1px solid rgba(30,27,75,.12);
}

.tools-badge-key__title{
  color:var(--at-navy);
  font-size:.82rem;
  font-weight:800;
}

.tools-badge-key__badge{
  display:inline-flex;
  min-height:25px;
  align-items:center;
  padding:3px 9px;
  border-radius:999px;
  background:var(--at-cream);
  color:var(--at-navy);
  font-size:.75rem;
  font-weight:800;
}

.tools-badge-key__badge--free{ background:rgba(13,148,136,.15); color:#086f67; }
.tools-badge-key__badge--limited{ background:rgba(233,163,35,.17); }
.tools-badge-key__badge--paid{ background:rgba(239,125,115,.18); }
.tools-badge-key__badge--experimental{ background:rgba(61,56,120,.14); }

@media (hover:hover){
  .tools-helper-link:hover{
    transform:translateY(-3px);
    box-shadow:var(--at-shadow-out);
  }
}

@media (max-width:760px){
  .tools-job-first,
  .tools-static-lab{ padding:18px 14px; }

  .tools-job-grid,
  .tools-helper-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }

  .tools-job-card{ min-height:158px; padding:14px 12px 12px; }
  .tools-job-card__title{ font-size:1rem; }
  .tools-job-card__copy{ font-size:.84rem; }
}

@media (max-width:430px){
  .tools-job-grid,
  .tools-helper-grid{ grid-template-columns:1fr; }

  .tools-job-card{ min-height:132px; }
}
/* S3 V5 realignment: learner-first entry order; compact featured card */
.tools-s3-start{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin:.5rem 0 .7rem;
  padding:.8rem 1rem;
  border-radius:22px;
  background:linear-gradient(135deg,#fffaf2,#f5dfc1);
  box-shadow:var(--at-shadow-out);
}

.tools-s3-start__copy{ max-width:none; }
.tools-s3-start h1{
  margin:.1rem 0;
  font-size:clamp(1.7rem,4vw,2.45rem);
  line-height:1.15;
}
.tools-s3-start p{
  margin:.15rem 0;
  font-size:1rem;
  line-height:1.45;
}
.tools-s3-start__promise{
  color:#173b4d;
  font-size:1.05rem !important;
  font-weight:800;
}
.tools-s3-start__note{
  max-width:42rem;
  color:#5e6870;
  font-size:.88rem !important;
  line-height:1.5 !important;
}
.tools-s3-start__actions,
.tools-s3-quick{
  display:flex;
  gap:.55rem;
  flex-wrap:wrap;
}
.tools-s3-start__actions{ margin-top:.45rem; }
.tools-s3-start__actions .clay-btn{
  min-height:44px;
  padding:7px 16px;
  font-size:.95rem;
}
.tools-s3-start__signal{
  padding:.55rem .75rem;
  border-radius:18px;
  background:#173b4d;
  color:#fff;
  font-size:.82rem;
  line-height:1.45;
  text-align:center;
  box-shadow:var(--at-shadow-out-sm);
}
.tools-s3-quick{ margin:0 0 2rem; }
.tools-s3-quick__card{
  display:flex;
  flex:1 1 12rem;
  flex-direction:column;
  gap:.3rem;
  padding:1.1rem;
  border-radius:20px;
  background:#fffaf2;
  box-shadow:var(--at-shadow-out);
  text-decoration:none;
  color:inherit;
}
.tools-s3-quick__card span{ font-size:1.6rem; }
.tools-s3-quick__card strong{ font-size:1.1rem; }
.tools-s3-quick__card small{ color:#5e6870; }
.tools-s3-start a:focus-visible,
.tools-s3-quick__card:focus-visible{ outline:3px solid #173b4d; outline-offset:3px; }

@media(max-width:700px){
  .tools-s3-start{
    display:flex;
    align-items:stretch;
    flex-direction:column;
    gap:.3rem;
    margin:.25rem 0 .55rem;
    padding:.7rem .85rem;
  }
  .tools-s3-start__actions{ margin-top:.35rem; }
  .tools-s3-start__signal{ display:none; }
}

/* S4 current jobs: vendor names stay secondary until the classroom gate passes. */
.tools-current-s4{margin:.55rem 0 1.2rem;padding:1.35rem;border-radius:28px;background:linear-gradient(145deg,#e6f8f4,#fffaf2);box-shadow:var(--at-shadow-out)}
.tools-current-s4__heading{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.tools-current-s4__heading h2{flex:1 1 100%;margin:.1rem 0 0;color:var(--at-navy);font-size:clamp(1.65rem,3vw,2.35rem)}
.tools-current-s4__heading p{flex:1 1 40rem;margin:0;color:var(--at-ink);line-height:1.8}
.tools-current-s4__guide{align-self:center;padding:.65rem 1rem;border-radius:999px;color:var(--at-navy);background:var(--at-gold-light);box-shadow:var(--at-shadow-out-sm);font-weight:800;text-decoration:none;white-space:nowrap}
.tools-current-s4__journey{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;margin:1.25rem 0 0;padding:0;list-style:none}
.tools-current-s4__journey li{position:relative;min-height:82px;padding:.8rem .7rem;border-radius:17px;background:rgba(255,255,255,.82);box-shadow:var(--at-shadow-out-sm);text-align:center}
.tools-current-s4__journey li:not(:last-child)::after{content:"←";position:absolute;left:-10px;top:50%;transform:translateY(-50%);color:var(--at-teal);font-size:1.2rem;font-weight:900;z-index:1}
.tools-current-s4__journey b{display:block;color:var(--at-navy);font-size:.9rem;line-height:1.45}
.tools-current-s4__journey span{display:block;margin-top:.35rem;color:var(--at-ink);font-size:.74rem;line-height:1.45}
.tools-current-s4__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:1.25rem}
.tools-current-s4__card{display:flex;min-height:220px;flex-direction:column;align-items:flex-start;gap:7px;padding:1rem;border-radius:20px;background:var(--at-white);box-shadow:var(--at-shadow-out-sm)}
.tools-current-s4__card--later{background:#f3f1fa}
.tools-current-s4__icon{font-size:1.55rem;line-height:1}
.tools-current-s4__card h3{margin:0;color:var(--at-navy);font-size:1.1rem}
.tools-current-s4__card p{min-height:42px;margin:0;color:var(--at-ink);font-size:.9rem;line-height:1.65}
.tools-current-s4__card a{color:var(--at-teal);font-size:.91rem;font-weight:800;text-decoration:underline;text-underline-offset:3px}
.tools-current-s4__card .tools-current-s4__alt{color:#6f5b15;font-size:.84rem}
.tools-current-s4__card small{margin-top:auto;color:#68647d;font-size:.76rem;line-height:1.55}
.tools-current-s4__card a:focus-visible,.tools-current-s4__guide:focus-visible{outline:3px solid var(--at-gold);outline-offset:3px}
@media(max-width:900px){.tools-current-s4__journey{grid-template-columns:repeat(3,minmax(0,1fr))}.tools-current-s4__journey li:nth-child(3)::after{display:none}.tools-current-s4__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.aitools{padding-top:10px}}
@media(max-width:520px){.aitools{padding-top:8px}.tools-current-s4{margin:.35rem 0 .95rem;padding:1rem}.tools-current-s4__journey{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.tools-current-s4__journey li:nth-child(2n)::after{display:none}.tools-current-s4__journey li{min-height:74px;padding:.7rem .5rem}.tools-current-s4__grid{grid-template-columns:1fr}.tools-current-s4__card{min-height:0}.tools-current-s4__guide{width:100%;text-align:center}}

/* S4 learner-facing categories: one recommended path, then only a few alternatives. */
.tools-s4-categories{
  margin:1.5rem 0 2rem;
  padding:1.6rem;
  border:2px solid rgba(255,255,255,.9);
  border-radius:28px;
  background:linear-gradient(145deg,#fffaf2,#f1faf8);
  box-shadow:var(--at-shadow-out);
}

.tools-s4-categories__heading{
  max-width:760px;
  margin:0 auto 20px;
  text-align:center;
}

.tools-s4-categories__heading h2{
  margin:10px 0 7px;
  color:var(--at-navy);
  font-size:clamp(1.6rem,1.2rem + 1vw,2.2rem);
  line-height:1.35;
}

.tools-s4-categories__heading p{
  margin:0;
  color:var(--at-ink);
  font-size:1rem;
  font-weight:600;
  line-height:1.8;
}

.tools-s4-category-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.tools-s4-category{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:7px;
  padding:16px;
  border-radius:20px;
  background:rgba(255,255,255,.86);
  box-shadow:var(--at-shadow-out-sm);
}

.tools-s4-category--later{ background:linear-gradient(145deg,#f1effa,#fff); }

.tools-s4-category h3{
  margin:0;
  color:var(--at-navy);
  font-size:1.06rem;
  line-height:1.45;
}

.tools-s4-category p{
  min-height:44px;
  margin:0;
  color:var(--at-ink);
  font-size:.88rem;
  line-height:1.65;
}

.tools-s4-category__tools{
  display:grid;
  gap:8px;
  margin-top:auto;
  padding-top:8px;
}

.tools-s4-tool{
  display:flex;
  min-width:0;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  padding:10px 11px;
  border:1px solid rgba(30,27,75,.12);
  border-radius:14px;
  color:var(--at-navy);
  background:#fffbf4;
  text-decoration:none;
  transition:transform .18s var(--at-ease),box-shadow .18s var(--at-ease),border-color .18s var(--at-ease);
}

.tools-s4-tool--recommended{
  border-color:rgba(13,148,136,.35);
  background:#ecfaf7;
}

.tools-s4-tool span{
  color:var(--at-teal);
  font-size:.7rem;
  font-weight:800;
}

.tools-s4-tool bdi,
.tools-s4-tool:not(:has(bdi)){ font-weight:800; }

.tools-s4-tool small{
  color:var(--at-ink);
  font-size:.76rem;
  font-weight:700;
  line-height:1.45;
}

@media (hover:hover){
  .tools-s4-tool:hover{
    border-color:var(--at-teal);
    transform:translateY(-2px);
    box-shadow:var(--at-shadow-out-sm);
  }
}

.tools-s4-tool:focus-visible{ outline:3px solid var(--at-gold); outline-offset:3px; }

@media(max-width:900px){
  .tools-s4-category-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media(max-width:520px){
  .tools-s4-categories{ padding:1.1rem; }
  .tools-s4-category-grid{ grid-template-columns:1fr; }
  .tools-s4-category p{ min-height:0; }
}