/* =============================================================================
   pages.css — per-page layout for the bright AI-studio theme (kira.css tokens).
   ============================================================================= */

/* ============================================================= FAQ ACCORDION */
.faq{max-width:820px;margin-inline:auto;display:flex;flex-direction:column;gap:12px}
.faq-item{background:#fff;border:1px solid var(--border-soft);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-sm)}
.faq-item[open]{border-color:#cdd6e8}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:clamp(16px,2.2vw,22px) clamp(18px,2.6vw,26px);text-align:start;
  font-family:inherit;font-size:1.04rem;font-weight:700;color:var(--ink)}
.faq-q .faq-q-text{min-width:0}
.faq-q .sign{flex:none;width:30px;height:30px;border-radius:50%;background:var(--accent-soft);
  display:grid;place-items:center;position:relative;transition:background .25s}
.faq-q .sign::before,.faq-q .sign::after{content:"";position:absolute;width:12px;height:2px;
  background:var(--accent-d);border-radius:2px;transition:transform .3s var(--ease)}
.faq-q .sign::after{transform:rotate(90deg)}
.faq-item[open] .faq-q .sign{background:var(--accent)}
.faq-item[open] .faq-q .sign::before,.faq-item[open] .faq-q .sign::after{background:var(--on-accent)}
.faq-item[open] .faq-q .sign::after{transform:rotate(0)}
.faq-a-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease)}
.faq-item[open] .faq-a-wrap{grid-template-rows:1fr}
.faq-a{overflow:hidden}
.faq-a p{color:var(--ink-body);font-size:.96rem;line-height:1.85;
  padding:0 clamp(18px,2.6vw,26px) clamp(18px,2.4vw,24px)}

/* ============================================================= THANK YOU PAGE */
.thanks{min-height:100svh;display:grid;place-items:center;text-align:center;
  background:radial-gradient(120% 90% at 50% 0%, var(--bg-soft) 0%, transparent 60%), var(--bg);
  padding:clamp(96px,12vw,140px) clamp(20px,5vw,40px) clamp(48px,7vw,80px)}
.thanks-inner{max-width:680px}
.thanks-inner .eyebrow{display:block;margin-bottom:1rem}
.thanks-inner h1{color:var(--ink);font-size:clamp(2.2rem,6vw,3.6rem);line-height:1.12;margin-bottom:1.1rem}
.thanks-inner .sub{color:var(--ink-body);font-size:clamp(1rem,2.2vw,1.1rem);line-height:1.85;
  max-width:54ch;margin-inline:auto;margin-bottom:clamp(26px,4vw,38px)}
.thanks-inner .sub b{color:var(--ink);font-weight:700}
.wa-btn{display:inline-flex;align-items:center;gap:14px;background:var(--accent);color:var(--on-accent);
  border-radius:999px;padding-block:1rem;padding-inline:2rem 1rem;font-weight:800;font-size:1.08rem;
  box-shadow:0 12px 30px rgba(255,181,46,.36);transition:transform .25s var(--ease),background .25s}
.wa-btn:hover{transform:translateY(-2px);background:var(--accent-d)}
.wa-btn .circ{width:42px;height:42px;border-radius:50%;background:var(--ink);display:grid;place-items:center;flex:none}
.wa-btn .circ svg{width:23px;height:23px;fill:#fff}
.thanks-links{margin-top:clamp(30px,4vw,46px);display:flex;gap:10px 24px;justify-content:center;flex-wrap:wrap}
.thanks-links a{color:var(--ink-soft);font-size:.94rem;font-weight:600;
  border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.thanks-links a:hover{color:var(--ink);border-color:var(--accent)}

/* =============================================================================
   "מ-Prompt למסך" consolidated landing
   ============================================================================= */
.h-start{font-family:var(--font-display);font-weight:800;color:var(--ink);
  font-size:clamp(1.7rem,3.6vw,2.5rem);line-height:1.22;letter-spacing:-.01em}
.h-start mark{background:var(--accent-soft);color:var(--accent-d);padding:0 .18em;border-radius:6px}
.lead-block{max-width:66ch;margin-bottom:clamp(34px,5vw,52px)}
.lead-block p{color:var(--ink-body);font-size:1.06rem}
.lead-block p + p{margin-top:1rem}
.lead-block strong{color:var(--ink);font-weight:700}
.lead-block .manifesto{font-weight:800;color:var(--ink);font-size:1.14rem;line-height:1.6}
.lead-block .chain-list{border-inline-start:3px solid var(--accent);padding-inline-start:1.1rem;color:var(--ink)}

/* hero subtitle stack (white over the full-bleed video) — small & airy */
.hero-sub{max-width:600px;margin-bottom:clamp(22px,3vw,32px)}
.hero-sub p{font-size:1rem;color:rgba(255,255,255,.9);line-height:1.85}
.hero-sub p + p{margin-top:1.05rem}
.hero-sub .hero-manifesto{font-size:.92rem;color:rgba(255,255,255,.75)}

/* ---- spectrum / 4-step chain (timeline feel) ---- */
.spectrum{background:#fff;border:1px solid var(--border-soft);border-radius:var(--r-xl);
  padding:clamp(28px,4vw,44px);box-shadow:var(--shadow-sm)}
.spectrum .cap{text-align:center;color:var(--ink);font-weight:700;font-size:1rem;margin-bottom:clamp(22px,3vw,34px)}
.flow{display:grid;gap:24px;grid-template-columns:1fr}
@media(min-width:760px){.flow{grid-template-columns:repeat(4,1fr);gap:14px}}
.flow .fstep{position:relative;padding-top:14px}
.flow .fstep .n{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:var(--accent);color:var(--on-accent);font-family:var(--font-display);font-weight:800;font-size:.95rem;margin-bottom:.9rem}
.flow .fstep .h{font-weight:800;color:var(--ink);font-size:1.1rem;margin-bottom:.35rem}
.flow .fstep .d{font-size:.9rem;color:var(--ink-body);line-height:1.65}
@media(min-width:760px){
  .flow .fstep::before{content:"";position:absolute;top:34px;inset-inline-start:46px;width:calc(100% - 6px);
    height:2px;background:repeating-linear-gradient(90deg,var(--border) 0 6px,transparent 6px 12px)}
  .flow .fstep:last-child::before{display:none}
}

/* ---- track header ---- */
.track-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:.7rem}
.track-tag{font-size:.74rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--on-accent);background:var(--accent-soft);border:1px solid #ffe2ac;padding:.35rem .9rem;border-radius:999px}
.track-sub{color:var(--ink-body);font-size:1.05rem;max-width:66ch;margin-bottom:clamp(28px,4vw,46px)}
.courses{display:grid;gap:clamp(18px,2.4vw,24px);grid-template-columns:1fr}
@media(min-width:880px){.courses{grid-template-columns:1fr 1fr}}

/* ---- course card ---- */
.course{background:#fff;border:1px solid var(--border-soft);border-radius:var(--r-lg);overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.course:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.course-img{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--bg-soft)}
.course-img img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.course:hover .course-img img{transform:scale(1.04)}
.course-badge{position:absolute;top:14px;inset-inline-start:14px;width:46px;height:46px;border-radius:50%;
  background:var(--accent);color:var(--on-accent);display:grid;place-items:center;
  font-family:var(--font-display);font-weight:800;font-size:1.1rem;box-shadow:0 6px 16px rgba(83,96,132,.25)}
.course-flag{position:absolute;top:18px;inset-inline-end:18px;background:var(--ink);color:#fff;
  font-size:.72rem;font-weight:700;padding:.3rem .8rem;border-radius:999px}
.course-body{padding:clamp(22px,3vw,32px);display:flex;flex-direction:column;flex:1}
.course-body h3{font-size:clamp(1.28rem,2.6vw,1.5rem);font-weight:800;color:var(--ink);margin-bottom:.5rem}
.course-tool{color:var(--accent-d);font-weight:700;font-size:.9rem;margin-bottom:1.1rem}
.course-desc{color:var(--ink-body);font-size:.96rem;margin-bottom:1.3rem}
.course-desc strong{color:var(--ink);font-weight:700}
.outcomes{list-style:none;display:grid;gap:.65rem;margin-bottom:1.5rem}
.outcomes li{position:relative;padding-inline-start:1.15rem;font-size:.93rem;color:var(--ink-body);line-height:1.6}
.outcomes li::before{content:"";position:absolute;inset-inline-start:0;top:.62rem;
  width:7px;height:7px;background:var(--accent);border-radius:2px;transform:rotate(45deg)}
.syllabus{border-top:1px dashed var(--border);padding-top:1.3rem;margin-top:auto}
.syl{margin-bottom:.9rem}.syl:last-child{margin-bottom:0}
.syl .t{font-size:.74rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.15rem}
.syl .b{font-size:.9rem;color:var(--ink-body);line-height:1.6}
.syl .b b{color:var(--ink);font-weight:700}
.delivers{margin-top:1.3rem;background:var(--bg-soft);border-radius:var(--r-md);padding:.85rem 1.1rem;font-size:.9rem;line-height:1.6;color:var(--ink-body)}
.delivers .l{display:block;font-weight:800;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);margin-bottom:.15rem}

/* ---- included features (3-up) ---- */
.grid-3{display:grid;gap:clamp(16px,2vw,22px);grid-template-columns:1fr}
@media(min-width:680px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.feat-item .fic{width:46px;height:46px;border-radius:13px;background:var(--accent-soft);
  display:grid;place-items:center;color:var(--accent-d);font-size:1.25rem;margin-bottom:.9rem}
.feat-item h4{font-size:1.08rem;font-weight:800;color:var(--ink);margin-bottom:.3rem}
.feat-item p{color:var(--ink-body);font-size:.92rem;line-height:1.7}

/* ---- instructor ---- */
.teacher-grid{display:grid;gap:clamp(24px,4vw,44px);grid-template-columns:1fr;align-items:center}
@media(min-width:820px){.teacher-grid{grid-template-columns:1.25fr 1fr}}
.teacher-copy .h-start{margin-bottom:1.4rem}
.teacher-copy p{color:var(--ink-body);margin-bottom:1rem;max-width:60ch}
.teacher-copy p strong{color:var(--ink);font-weight:700}
.stats{display:grid;gap:14px;grid-template-columns:1fr 1fr}
.stat{background:#fff;border:1px solid var(--border-soft);border-radius:var(--r-md);padding:clamp(16px,2vw,22px);box-shadow:var(--shadow-sm)}
.stat .v{font-family:var(--font-display);font-weight:800;font-size:clamp(1.8rem,4vw,2.4rem);color:var(--ink);line-height:1}
.stat .v .ltr{color:var(--ink)}
.stat .k{font-size:.86rem;color:var(--ink-soft);margin-top:.3rem}

/* ---- pricing ---- */
.plans{display:grid;gap:clamp(16px,2vw,22px);grid-template-columns:1fr;max-width:1020px;margin-inline:auto}
@media(min-width:820px){.plans{grid-template-columns:repeat(3,1fr);align-items:stretch}}
.plan{background:#fff;border:1px solid var(--border-soft);border-radius:var(--r-lg);
  padding:clamp(26px,3vw,34px);display:flex;flex-direction:column;position:relative;box-shadow:var(--shadow-sm)}
.plan.feature{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent),0 22px 48px rgba(255,181,46,.18)}
.plan .ptag{position:absolute;top:-13px;inset-inline:0;margin-inline:auto;width:max-content;
  background:var(--accent);color:var(--on-accent);font-weight:800;font-size:.74rem;padding:.3rem .9rem;border-radius:999px}
.plan .pname{font-weight:700;color:var(--ink);font-size:1.04rem;margin-bottom:.6rem}
.plan .price{font-family:var(--font-display);font-weight:800;color:var(--ink);font-size:clamp(2.3rem,5.5vw,3rem);line-height:1}
.plan .per{font-size:.84rem;color:var(--ink-soft);margin-block:.5rem 1.2rem}
.plan .save{align-self:flex-start;font-size:.76rem;font-weight:800;color:var(--on-accent);
  background:var(--accent-soft);padding:.25rem .7rem;border-radius:999px;margin-bottom:1.2rem}
.plan ul{list-style:none;display:grid;gap:.55rem;margin-bottom:1.6rem}
.plan ul li{position:relative;padding-inline-start:1.4rem;font-size:.92rem;color:var(--ink-body)}
.plan ul li::before{content:"✓";position:absolute;inset-inline-start:0;color:var(--accent-d);font-weight:800}
.btn2{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;margin-top:auto;
  border-radius:999px;padding:.85rem 1.4rem;font-weight:800;font-size:.96rem;
  transition:transform .25s var(--ease),background .25s,border-color .25s,color .25s;cursor:pointer}
.btn2.solid{background:var(--accent);color:var(--on-accent);box-shadow:0 8px 22px rgba(255,181,46,.32)}
.btn2.solid:hover{transform:translateY(-2px);background:var(--accent-d)}
.btn2.line{background:#fff;border:1.5px solid var(--border);color:var(--ink)}
.btn2.line:hover{border-color:var(--accent);color:var(--accent-d)}
.btn2.dark{background:var(--ink);color:#fff}
.btn2.dark:hover{transform:translateY(-2px);background:#44506e}
.price-note{text-align:center;max-width:62ch;margin:clamp(28px,4vw,40px) auto 0;
  font-size:.94rem;color:var(--ink-body);line-height:1.8}
.price-note b{color:var(--ink)}
.deadline{display:inline-flex;align-items:center;gap:8px;background:var(--accent-soft);
  border:1px solid #ffe2ac;color:var(--on-accent);border-radius:999px;
  padding:.45rem 1.1rem;font-weight:700;margin-top:1.2rem}

@media (prefers-reduced-motion:reduce){
  .faq-a-wrap{transition:none}
}