/* Khaled Badr — static rebuild. Palette and type lifted from the original Nicepage build. */

:root{
  --ink:#111111;
  --body:#293133;
  --muted:#6b7478;
  --line:#e2e6e8;
  --accent:#0cbcf5;
  --accent-dark:#0172b2;
  --accent-deep:#054a71;
  --steel:#3695b4;
  --bg:#ffffff;
  --bg-gray:#e5e5e5;
  --bg-soft:#f4f6f7;
  --radius:14px;
  --shadow:0 2px 10px rgba(17,17,17,.06);
  --shadow-lg:0 8px 30px rgba(17,17,17,.10);
  --container:1160px;
  --head:'Roboto',system-ui,sans-serif;
  --text:'Open Sans',system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--body);
  font-family:var(--text);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent-dark);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--head);color:var(--ink);margin:0;line-height:1.2;font-weight:700}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 24px}
.section{padding:88px 0}
.section--gray{background:var(--bg-gray)}
.section--soft{background:var(--bg-soft)}
.section__title{text-align:center;font-size:38px;font-weight:400;letter-spacing:-.01em}
.section__lead{text-align:center;max-width:760px;margin:18px auto 0;color:var(--muted);font-size:15.5px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;padding:14px 30px;font-family:var(--head);font-size:13px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;border:0;cursor:pointer;transition:.18s ease;
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn--dark{background:var(--ink);color:#fff}
.btn--dark:hover{background:#000}
.btn--accent{background:var(--accent);color:#fff}
.btn--accent:hover{background:var(--accent-dark)}
.btn--outline{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn--outline:hover{background:var(--ink);color:#fff}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line)}
.site-header__inner{display:flex;align-items:center;gap:24px;min-height:66px;position:relative}
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand img{height:44px;width:auto}
.nav{margin-left:auto;display:flex;align-items:center;gap:30px}
.nav a{
  font-family:var(--head);font-size:14px;color:var(--body);letter-spacing:.02em;
  padding:6px 0;border-bottom:2px solid transparent;
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--accent-dark);border-bottom-color:var(--accent);text-decoration:none}

/* ---- nav dropdown: everything free lives under one group ---- */
.nav__group{position:relative}
.nav__group-btn{
  font-family:var(--head);font-size:14px;color:var(--body);letter-spacing:.02em;
  background:none;border:0;padding:6px 0;cursor:pointer;
  border-bottom:2px solid transparent;display:inline-flex;align-items:center;gap:6px;
}
.nav__group-btn:hover,
.nav__group.is-open>.nav__group-btn,
.nav__group.is-current>.nav__group-btn{color:var(--accent-dark);border-bottom-color:var(--accent)}
.nav__caret{
  width:0;height:0;border-inline:4px solid transparent;border-top:5px solid currentColor;
  transition:transform .18s ease;
}
.nav__group.is-open .nav__caret{transform:rotate(180deg)}
.nav__menu{
  position:absolute;inset-inline-start:0;top:calc(100% + 10px);z-index:70;
  min-width:265px;background:#fff;border:1px solid var(--line);border-radius:10px;
  box-shadow:var(--shadow-lg);padding:6px;display:none;
}
.nav__group.is-open>.nav__menu{display:block}
/* Pointer users get it on hover; the button still serves keyboard and touch. */
@media (hover:hover){ .nav__group:hover>.nav__menu{display:block} }
.nav__group:focus-within>.nav__menu{display:block}
.nav__menu a{
  display:block;width:100%;padding:9px 12px;border-radius:7px;
  border-bottom:0 !important;white-space:nowrap;
}
.nav__menu a:hover,.nav__menu a[aria-current="page"]{background:var(--bg-soft);color:var(--accent-dark)}

/* Marks a nav item that leads to content in the other language. */
.nav__hint{
  display:inline-block;margin-inline-start:6px;padding:1px 5px;border-radius:4px;
  background:var(--bg-soft);color:var(--muted);border:1px solid var(--line);
  font-size:10px;font-weight:700;letter-spacing:.06em;vertical-align:middle;
}
/* Language switch — reads as a control, not another nav destination. */
.nav__lang{
  border:1px solid var(--line);border-radius:999px;padding:5px 14px !important;
  font-weight:600;color:var(--ink) !important;
}
.nav__lang:hover{background:var(--ink);color:#fff !important;border-color:var(--ink);border-bottom-color:var(--ink) !important}
.socials{display:flex;align-items:center;gap:10px;margin-left:26px}
.socials a{
  width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;
  display:grid;place-items:center;transition:.18s ease;
}
.socials a:hover{background:var(--accent);transform:translateY(-2px)}
.socials svg{width:15px;height:15px;fill:currentColor}
.nav-toggle{display:none;margin-left:auto;background:none;border:0;padding:8px;cursor:pointer}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;transition:.2s}

/* ---------- hero ---------- */
.hero{background:var(--bg-gray);overflow:hidden}
.hero__inner{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:20px;min-height:520px}
.hero__copy{padding:80px 0}
.hero h1{font-size:clamp(48px,6.4vw,86px);font-weight:900;letter-spacing:-.02em;line-height:1.02}
.hero__tagline{margin:22px 0 30px;max-width:390px;font-size:16px;color:var(--body)}
.hero__photo{align-self:end;justify-self:center}
.hero__photo img{max-height:470px;width:auto}

/* ---------- profile ---------- */
.profile__kicker{text-align:center;font-family:var(--head);font-weight:700;font-size:16px;color:var(--ink);margin-top:10px}
.profile__grid{display:grid;grid-template-columns:340px 1fr;gap:60px;align-items:center;margin-top:56px}
.profile__avatar{
  width:290px;height:290px;border-radius:50%;background:var(--accent);
  display:grid;place-items:center;overflow:hidden;justify-self:center;
}
.profile__avatar img{width:100%;height:100%;object-fit:cover}
.profile h3{font-size:19px;font-weight:400;color:var(--accent-deep);margin-bottom:14px}
.profile p{margin:0 0 16px;font-size:15px}

/* ---------- numbered cards ---------- */
.steps{display:flex;flex-direction:column;gap:22px;margin-top:52px}
.step{
  display:grid;grid-template-columns:96px 1fr;gap:10px;align-items:start;
  background:#fafafa;border-radius:var(--radius);padding:30px 34px;box-shadow:var(--shadow);
}
.step__num{font-family:var(--head);font-size:52px;font-weight:300;color:var(--steel);line-height:1}
.step h3{font-size:23px;font-weight:400;margin-bottom:8px}
.step p{margin:0;font-size:14.5px;color:var(--body)}

/* ---------- current position ---------- */
.position{display:grid;grid-template-columns:1fr 1.15fr;gap:34px;align-items:stretch}
.position__card{background:var(--bg-soft);border-radius:var(--radius);padding:40px}
.position__kicker{font-family:var(--head);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.position h2{font-size:40px;font-weight:900;letter-spacing:-.01em;margin:14px 0 18px;text-transform:uppercase}
.position p{font-size:14.5px;margin:0 0 14px}
.position__stat{font-weight:700;color:var(--ink)}
/* Matches the team photo's own 5:3 so nobody gets cropped out of the group.
   align-self matters: a stretched grid item takes its height from the row, which
   makes aspect-ratio a no-op and lets object-fit:cover eat the sides of the photo. */
.position__media{aspect-ratio:5/3;align-self:center}
.position__media img{border-radius:var(--radius);width:100%;height:100%;object-fit:cover;object-position:center}

/* ---------- course / video ---------- */
.course{text-align:center}
.course h2{font-size:32px;font-weight:400}
.course__embed{
  max-width:620px;margin:30px auto;aspect-ratio:16/9;border-radius:10px;overflow:hidden;
  box-shadow:var(--shadow-lg);background:#000;
}
.course__embed iframe{width:100%;height:100%;border:0;display:block}

/* ---------- logo grids ---------- */
.logos{display:grid;gap:34px 30px;align-items:center;margin-top:46px}
.logos--3{grid-template-columns:repeat(3,1fr)}
.logos--7{grid-template-columns:repeat(7,1fr)}
.logos figure{margin:0;display:grid;place-items:center;padding:8px}
.logos img{max-height:78px;width:auto;object-fit:contain;transition:.2s ease}
.logos--7 img{max-height:56px}
.logos img:hover{transform:scale(1.06)}
@media (max-width:1000px){
  .logos--7{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:640px){
  .logos--3{grid-template-columns:repeat(2,1fr)}
  .logos--7{grid-template-columns:repeat(3,1fr)}
  .logos{gap:24px 18px}
}

/* ---------- testimonials ---------- */
.quotes{position:relative;max-width:900px;margin:0 auto}
.quote{display:none;text-align:center;padding:0 40px}
.quote.is-active{display:block;animation:fade .4s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.quote blockquote{margin:0 0 26px;font-size:16px;font-style:italic;color:var(--body);line-height:1.8}
.quote img{width:76px;height:76px;border-radius:50%;object-fit:cover;margin:0 auto 12px}
.quote__name{font-family:var(--head);font-weight:700;color:var(--ink)}
.quote__role{font-size:13.5px;color:var(--muted)}
.quotes__nav{
  position:absolute;top:38%;background:none;border:0;font-size:34px;color:var(--muted);
  cursor:pointer;padding:6px 12px;line-height:1;transition:.2s;
}
.quotes__nav:hover{color:var(--accent)}
.quotes__prev{left:-10px}
.quotes__next{right:-10px}
.quotes__dots{display:flex;justify-content:center;gap:9px;margin-top:26px}
.quotes__dots button{width:9px;height:9px;padding:0;border-radius:50%;border:0;background:#c4cacd;cursor:pointer;transition:.2s}
.quotes__dots button[aria-selected="true"]{background:var(--accent);transform:scale(1.25)}

/* ---------- footer ---------- */
.site-footer{background:var(--bg-soft);padding:70px 0 40px}
.footer__grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.footer__card{border:1px solid var(--accent);border-radius:var(--radius);padding:32px;background:#fff}
.footer__card h2{font-size:24px;font-weight:400;color:var(--accent-deep);margin-bottom:20px}
.footer__card a{display:block;color:var(--body);font-size:15px;margin-bottom:8px}
.footer__card a:hover{color:var(--accent-dark)}
.footer__socials{display:flex;gap:10px;margin-top:18px}
.footer__socials a{width:32px;height:32px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;margin:0}
.footer__socials svg{width:15px;height:15px;fill:currentColor}
.subscribe{display:flex;margin-top:6px;flex-wrap:wrap}
.subscribe input{
  flex:1 1 200px;padding:12px 14px;border:1px solid var(--line);border-right:0;
  font-family:var(--text);font-size:14px;min-width:0;
}
.subscribe input:focus{outline:2px solid var(--accent);outline-offset:-2px}
.subscribe button{padding:12px 26px;border:0;background:var(--accent);color:#fff;font-family:var(--head);cursor:pointer;font-size:14px}
.subscribe button:hover{background:var(--accent-dark)}
.form-note{font-size:13.5px;margin-top:10px;display:none}
.form-note.is-visible{display:block}
.form-note--ok{color:#0a7d3f}
.form-note--err{color:#c0392b}
.colophon{text-align:center;color:var(--muted);font-size:13px;margin-top:44px;padding-top:22px;border-top:1px solid var(--line)}

/* ---------- blog ---------- */
.page-head{background:var(--bg-gray);padding:64px 0}
.page-head h1{font-size:44px;font-weight:900;letter-spacing:-.02em;text-align:center}
.page-head p{text-align:center;color:var(--muted);margin:12px 0 0}
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:30px}
.post-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;
  display:flex;flex-direction:column;transition:.2s ease;
}
.post-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.post-card h2{font-size:19px;font-weight:700;line-height:1.35;margin-bottom:12px}
.post-card h2 a{color:var(--ink)}
.post-card h2 a:hover{color:var(--accent-dark);text-decoration:none}
.post-card p{font-size:14.5px;color:var(--muted);margin:0 0 18px}
.post-card time{font-size:13px;color:var(--muted);margin-top:auto;display:block}
.post-card__more{font-family:var(--head);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-dark);margin-top:14px}

.article{max-width:780px;margin:0 auto;padding:60px 24px 80px}
.article h1{font-size:38px;font-weight:900;letter-spacing:-.02em;line-height:1.15}
.article__meta{color:var(--muted);font-size:14px;margin:14px 0 34px}
.article__body{font-size:16.5px;line-height:1.8}
.article__body h2{font-size:26px;font-weight:700;margin:38px 0 14px}
.article__body h3{font-size:21px;font-weight:700;margin:30px 0 12px}
.article__body p{margin:0 0 18px}
.article__body ul,.article__body ol{margin:0 0 20px;padding-left:24px}
.article__body li{margin-bottom:9px}
.article__body img{border-radius:10px;margin:26px 0}
.article__body figure{margin:26px 0}
.article__body figcaption{font-size:13.5px;color:var(--muted);text-align:center;margin-top:8px}
.article__body blockquote{margin:26px 0;padding:6px 0 6px 22px;border-left:3px solid var(--accent);font-style:italic}
.article__body iframe{max-width:100%;border-radius:10px;margin:26px 0}
.article__back{display:inline-block;margin-top:44px;font-family:var(--head);font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.article__lead{margin:0 0 34px}
.article__lead img{width:100%;height:auto;border-radius:10px;display:block;box-shadow:var(--shadow-lg)}

/* ---------- Arabic / RTL ---------- */
[dir="rtl"]{text-align:right}
[lang="ar"]{font-family:'Cairo',"Segoe UI",Tahoma,sans-serif;line-height:1.9}
[lang="ar"] h1,[lang="ar"] h2,[lang="ar"] h3{font-family:'Cairo',"Segoe UI",Tahoma,sans-serif;letter-spacing:0}
[dir="rtl"] .article__body ul,[dir="rtl"] .article__body ol{padding-left:0;padding-right:24px}
[dir="rtl"] .article__body blockquote{border-left:0;border-right:3px solid var(--accent);padding:6px 22px 6px 0}
[dir="rtl"] .article__back{direction:rtl}
[dir="rtl"] .timeline::before{left:auto;right:11px}
[dir="rtl"] .tl-item{padding:0 46px 44px 0}
[dir="rtl"] .tl-item::before{left:auto;right:4px}
[lang="ar"] .article__body{font-size:17.5px}
[lang="ar"] .page-head h1{font-size:clamp(28px,4.6vw,40px);line-height:1.35}

/* Full Arabic pages: the header, carousel arrows and lists flip too. */
[dir="rtl"] .nav{margin-left:0;margin-right:auto}
[dir="rtl"] .nav-toggle{margin-left:0;margin-right:auto}
[dir="rtl"] .socials{margin-left:0;margin-right:26px}
[dir="rtl"] .quotes__prev{left:auto;right:-10px}
[dir="rtl"] .quotes__next{right:auto;left:-10px}
[dir="rtl"] .hero__tagline,[dir="rtl"] .section__lead,[dir="rtl"] .profile__kicker{text-align:right}
[dir="rtl"] .steps .step__num{margin-left:0}
[dir="rtl"] ul,[dir="rtl"] ol{padding-left:0;padding-right:24px}
@media (max-width:900px){
  [dir="rtl"] .quotes__prev{right:-16px;left:auto}
  [dir="rtl"] .quotes__next{left:-16px;right:auto}
}

/* video embed on article pages */
.video-embed{
  aspect-ratio:16/9;margin:0 0 34px;border-radius:10px;overflow:hidden;
  background:#000;box-shadow:var(--shadow-lg);
}
.video-embed iframe{width:100%;height:100%;border:0;display:block}

/* end-of-article call to action */
.article__cta{
  margin:44px 0 0;padding:30px 32px;border-radius:var(--radius);
  background:var(--bg-soft);border:1px solid var(--accent);text-align:center;
}
.article__cta h2{font-size:22px;font-weight:700;margin-bottom:10px}
.article__cta p{margin:0 0 20px;color:var(--body);font-size:15.5px}

/* thumbnails on cluster hub cards */
.post-card__thumb{margin:-28px -28px 18px;border-radius:var(--radius) var(--radius) 0 0;overflow:hidden;aspect-ratio:16/9;background:var(--surface-2)}
.post-card__thumb img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- highlights ---------- */
.timeline{max-width:860px;margin:0 auto;position:relative}
.timeline::before{content:"";position:absolute;left:11px;top:8px;bottom:8px;width:2px;background:var(--line)}
.tl-item{position:relative;padding:0 0 44px 46px}
.tl-item::before{
  content:"";position:absolute;left:4px;top:7px;width:16px;height:16px;border-radius:50%;
  background:var(--accent);border:3px solid #fff;box-shadow:0 0 0 2px var(--accent);
}
.tl-item__date{font-family:var(--head);font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--steel)}
.tl-item h2{font-size:23px;font-weight:700;margin:8px 0 12px}
.tl-item p{margin:0 0 14px;font-size:15px}
.tl-item a.tl-link{font-family:var(--head);font-size:13px;letter-spacing:.08em;text-transform:uppercase}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .section{padding:64px 0}
  .hero__inner{grid-template-columns:1fr;text-align:center;min-height:0}
  .hero__copy{padding:56px 0 0}
  .hero__tagline{margin-inline:auto}
  .hero__photo img{max-height:360px;margin:0 auto}
  .profile__grid{grid-template-columns:1fr;gap:34px;text-align:center}
  .profile__avatar{width:230px;height:230px}
  .position{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .step{grid-template-columns:64px 1fr;padding:24px}
  .step__num{font-size:40px}
  .quotes__prev{left:-16px}
  .quotes__next{right:-16px}
  .quote{padding:0 26px}
}
@media (max-width:720px){
  .nav-toggle{display:block}
  .nav{
    display:none;position:absolute;top:100%;left:0;right:0;background:#fff;
    flex-direction:column;align-items:flex-start;gap:0;padding:10px 24px 18px;
    border-bottom:1px solid var(--line);box-shadow:var(--shadow);
  }
  .nav.is-open{display:flex}
  .nav a{width:100%;padding:12px 0;border-bottom:1px solid var(--line)}
  /* On mobile the bar is already a stacked list, so the group is flattened into
     it: no popup, just an indented sub-list under its heading. */
  .nav__group{width:100%}
  .nav__group-btn{width:100%;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line)}
  .nav__menu{
    position:static;display:block;min-width:0;border:0;box-shadow:none;
    padding:0;background:none;
  }
  .nav__menu a{padding-inline-start:16px;border-radius:0}
  .nav__caret{display:none}
  .socials{margin:12px 0 0}
  .section__title{font-size:30px}
  .page-head h1{font-size:32px}
  .article h1{font-size:29px}
  .position h2{font-size:30px}
}

/* ---- Free Content library: topic chips + horizontally scrollable rows ---- */

.topics{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.topics__chips{display:flex;gap:8px;overflow-x:auto;padding:12px 0;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.topics__chips::-webkit-scrollbar{height:6px}
.topics__chips::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.topics__chip{
  flex:0 0 auto;font-family:var(--head);font-size:13.5px;font-weight:500;
  padding:8px 15px;border:1px solid var(--line);border-radius:99px;
  color:var(--body);background:#fff;white-space:nowrap;text-decoration:none;transition:.15s;
}
.topics__chip:hover,.topics__chip:focus-visible{border-color:var(--accent);color:var(--accent-dark);text-decoration:none}

.topic{padding:44px 0 8px;scroll-margin-top:72px}
.topic:first-of-type{padding-top:34px}
.topic__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.topic__head h2{font-size:26px;line-height:1.3;margin:0}
.topic__head h2 a{color:var(--ink);text-decoration:none}
.topic__head h2 a:hover{color:var(--accent-dark)}
.topic__all{flex:0 0 auto;font-family:var(--head);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-dark);text-decoration:none;white-space:nowrap}
.topic__all:hover{text-decoration:underline}
[dir=rtl] .topic__all{letter-spacing:0;text-transform:none;font-size:14px}
.topic__intro{color:var(--muted);font-size:15px;margin:8px 0 18px;max-width:70ch}

.rail{
  display:flex;gap:18px;overflow-x:auto;padding:4px 4px 22px;margin:0 -4px;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:thin;
}
.rail::-webkit-scrollbar{height:8px}
.rail::-webkit-scrollbar-track{background:var(--bg-soft);border-radius:99px}
.rail::-webkit-scrollbar-thumb{background:#c9d2d6;border-radius:99px}
.rail::-webkit-scrollbar-thumb:hover{background:var(--steel)}
.rail:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:var(--radius)}
.rail__card{
  flex:0 0 264px;scroll-snap-align:start;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;padding-bottom:14px;transition:.18s;
}
.rail__card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.rail__link{display:block;color:var(--ink);text-decoration:none}
.rail__link:hover .rail__title{color:var(--accent-dark)}
.rail__thumb{display:block;aspect-ratio:16/9;background:var(--bg-soft);overflow:hidden}
.rail__thumb img{width:100%;height:100%;object-fit:cover}
/* Written articles have no video thumbnail. Keep the card's shape and label it. */
.rail__thumb--text{display:flex;align-items:center;justify-content:center;
  font-family:var(--head);font-size:13px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.rail__title{display:block;font-family:var(--head);font-size:16px;font-weight:700;line-height:1.4;padding:14px 16px 0}
.rail__desc{font-size:14px;color:var(--muted);line-height:1.55;margin:8px 0 12px;padding:0 16px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.rail__card time{font-size:12.5px;color:var(--muted);padding:0 16px;margin-top:auto}

.article__note{
  background:var(--bg-soft);border-inline-start:3px solid var(--accent);
  padding:10px 16px;border-radius:8px;font-size:14.5px;color:var(--muted);margin:0 0 24px;
}

@media (max-width:720px){
  .topic{padding:32px 0 4px}
  .topic__head{flex-direction:column;align-items:flex-start;gap:4px}
  .topic__head h2{font-size:22px}
  .topic__intro{font-size:14.5px;margin-bottom:14px}
  .rail{gap:14px}
  .rail__card{flex-basis:78vw;max-width:300px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rail{scroll-snap-type:none}
  .rail__card:hover{transform:none}
}

/* ---- mobile hardening ---- */
/* clip (not hidden) so position:sticky keeps working on the topics bar */
body{overflow-x:clip}
/* long URLs and unbroken Arabic strings must never widen the page */
.article__body,.rail__desc,.topic__intro{overflow-wrap:anywhere}
.article__body img,.article__body iframe,.article__body table{max-width:100%}
.article__body table{display:block;overflow-x:auto}
@media (max-width:720px){
  /* comfortable tap targets on touch screens */
  .topics__chip{padding:10px 16px}
  .rail__link,.topic__all,.article__back{display:inline-block;padding-block:4px}
  .article{padding:44px 20px 64px}
  .article__cta{padding:24px 20px}
  .video-embed{margin-bottom:26px}
}

/* ---- UI pass 2026-08-15 ---------------------------------------------------
   Four fixes: the topic bar was sticking underneath the site header, the
   imported WordPress articles had unstyled tables, download buttons and
   tables of contents, and the new "Read next" block had no styling at all. */

/* The header is sticky at top:0 with z-index 60; the topics bar was also
   pinned to top:0 at z-index 20, so it slid behind the header and vanished
   the moment you scrolled. Park it directly below the header instead. */
:root{--header-h:67px}
.topics{top:var(--header-h)}
/* Headings jumped to from a chip must clear BOTH sticky bars. */
.topic{scroll-margin-top:calc(var(--header-h) + 68px)}

/* Rank Math's table of contents, now hoisted to the top of the article. */
.wp-block-rank-math-toc-block{
  background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 22px;margin:0 0 30px;
}
.wp-block-rank-math-toc-block h2{
  font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin:0 0 10px;
}
[dir=rtl] .wp-block-rank-math-toc-block h2{letter-spacing:0;text-transform:none;font-size:15px}
.wp-block-rank-math-toc-block nav ul{margin:0;padding-inline-start:20px}
.wp-block-rank-math-toc-block li{margin-bottom:5px;font-size:15px}
.wp-block-rank-math-toc-block a{color:var(--body);text-decoration:none}
.wp-block-rank-math-toc-block a:hover{color:var(--accent-dark);text-decoration:underline}

/* Downloadable decks and PDFs. These were rendering as bare "Download" text. */
.article__body .wp-block-file{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 18px;margin:0 0 18px;
}
.article__body .wp-block-file__button{
  flex:0 0 auto;background:var(--ink);color:#fff;border-radius:999px;
  font-family:var(--head);font-size:12px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;padding:9px 20px;text-decoration:none;transition:.18s ease;
}
.article__body .wp-block-file__button:hover{background:var(--accent-dark);text-decoration:none}

/* Imported tables had a scroll box but no rules, so columns ran together. */
.article__body table{border-collapse:collapse;width:100%;font-size:15px;margin:0 0 22px}
.article__body th,.article__body td{
  border:1px solid var(--line);padding:10px 14px;text-align:start;vertical-align:top;
}
.article__body th{background:var(--bg-soft);font-family:var(--head);font-weight:700;color:var(--ink)}
.article__body tbody tr:nth-child(even){background:rgba(244,246,247,.55)}

/* "Read next" — internal links at the foot of an article. */
.article__related{
  margin:44px 0 0;padding:22px 24px;background:var(--bg-soft);
  border-radius:var(--radius);border:1px solid var(--line);
}
.article__related h2{
  font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin:0 0 12px;
}
[dir=rtl] .article__related h2{letter-spacing:0;text-transform:none;font-size:15px}
.article__related ul{margin:0;padding:0;list-style:none}
.article__related li{margin:0;border-top:1px solid var(--line)}
.article__related li:first-child{border-top:0}
.article__related a{
  display:block;padding:11px 0;color:var(--ink);font-family:var(--head);
  font-size:15.5px;font-weight:500;line-height:1.45;text-decoration:none;
}
.article__related a:hover{color:var(--accent-dark);text-decoration:underline}

@media (max-width:720px){
  .article__related{padding:18px 18px;margin-top:34px}
  .article__body .wp-block-file{flex-direction:column;align-items:flex-start;gap:12px}
  .wp-block-rank-math-toc-block{padding:16px 18px}
}

/* Imported WordPress oEmbeds. The iframe carried width="1140" height="641",
   so it kept its full height while the width scaled down, a tall black box
   with a small video in it on any narrow screen. Let the wrapper hold the
   ratio and the iframe fill it. */
.article__body .wp-block-embed{margin:26px 0}
.article__body .wp-block-embed__wrapper{
  position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#000;
}
.article__body .wp-block-embed__wrapper iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;margin:0;border-radius:0;
}
.article__body .wp-element-caption{
  font-size:13.5px;color:var(--muted);text-align:center;margin-top:8px;
}

/* Separators were falling back to the browser's default inset rule. */
.article__body hr{border:0;border-top:1px solid var(--line);margin:34px 0}

/* ---------- the free course syllabus ---------- */
.section--tight{padding-top:34px;padding-bottom:0}
.btn--ghost{background:transparent;color:var(--accent-dark);border:1px solid var(--line)}
.btn--ghost:hover{border-color:var(--accent);background:var(--bg-soft)}

.page-head__kicker{
  font-family:var(--head);font-size:12px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent-dark);text-align:center;margin:0 0 14px;
}
[dir="rtl"] .page-head__kicker{letter-spacing:0;text-transform:none;font-size:14px}

.course-facts{
  list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;
  justify-content:center;gap:10px 12px;
}
.course-facts li{
  font-family:var(--head);font-size:13px;color:var(--body);background:#fff;
  border:1px solid var(--line);border-radius:99px;padding:7px 16px;
}
.course-facts b{color:var(--ink);font-weight:800}
.course-start{text-align:center;margin:26px 0 0}

.course-note{
  max-width:760px;margin:0 auto;background:var(--bg-soft);border:1px solid var(--line);
  border-radius:var(--radius);padding:22px 26px;
}
.course-note p{margin:0;color:var(--body)}

.course-outro{
  max-width:760px;margin:0 auto;text-align:center;background:var(--bg-soft);
  border:1px solid var(--line);border-radius:var(--radius);padding:34px 30px;
}
.course-outro h2{font-size:24px;margin:0 0 10px}
.course-outro p{color:var(--muted);margin:0}
.course-outro__links{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:22px !important;
}

/* Banner pointing a hub or the library at the free course. */
.course-callout{
  max-width:760px;margin:20px auto 0 !important;text-align:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 22px;color:var(--body) !important;font-size:15.5px;
}
.course-callout a{color:var(--accent-dark);font-weight:600}
.course-callout__cta{
  display:inline-block;margin-left:6px;white-space:nowrap;
  font-family:var(--head);font-size:13px;letter-spacing:.06em;
}
[dir="rtl"] .course-callout__cta{margin-left:0;margin-right:6px;letter-spacing:0;font-size:14.5px}
.course__caption{font-size:14px;color:var(--muted);margin:14px 0 0}
.course__actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:22px 0 0}

/* ---------- the book ---------- */
.hero__book{margin:18px 0 0;max-width:390px;font-size:14px}
.hero__book a{color:var(--body);border-bottom:1px solid var(--accent);padding-bottom:2px}
.hero__book a:hover{color:var(--accent-dark);text-decoration:none}
.section--book{background:var(--ink);color:#fff}
.section--book h2,.section--book strong{color:#fff}
.book__kicker{
  font-family:var(--head);font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin:0;text-align:center;
}
[dir="rtl"] .book__kicker{letter-spacing:0;text-transform:none;font-size:14px}
.book__title{font-size:clamp(38px,5vw,60px);font-weight:900;letter-spacing:-.02em;margin:10px 0 0;text-align:center}
.book__sub{text-align:center;color:#b9c2c6;font-size:14.5px;margin:12px 0 0}
/* Cover on the outside, copy on the inside. */
.book__grid{display:grid;grid-template-columns:0.85fr 1.4fr;gap:52px;margin-top:46px;align-items:center}
/* The image is the real front cover, flat, rendered from the same source as the
   printed book. The book around it is CSS, so the artwork can be regenerated
   without anyone having to redraw a mockup, and the cover on the homepage is
   always the cover in the PDF. A rendered mockup was the earlier route and it
   shipped a misspelt word nobody could fix without the original file.

   The binding is on the RIGHT in both locales. The book is Arabic, so the spine
   does not follow the page's direction; hard-coding it is correct here. */
.book__mockup{margin:0;display:grid;place-items:center;perspective:1700px}
.book__mockup picture{
  display:block;position:relative;width:100%;max-width:330px;
  transform:rotateY(-13deg);
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.6));
}
.book__mockup img{display:block;width:100%;height:auto;border-radius:2px 6px 6px 2px}
/* The spine: a dark strip down the binding edge with the crease catching light. */
.book__mockup picture::before{
  content:'';position:absolute;inset:0 0 0 auto;width:12px;border-radius:0 6px 6px 0;
  background:linear-gradient(to left,rgba(0,0,0,.5),rgba(255,255,255,.16) 58%,rgba(0,0,0,.35));
}
/* The page block, on the side away from the binding. */
.book__mockup picture::after{
  content:'';position:absolute;top:6px;bottom:6px;left:-7px;width:7px;border-radius:3px 0 0 3px;
  background:repeating-linear-gradient(to right,#f2efe8,#f2efe8 1px,#c9c3b5 1px,#c9c3b5 2px);
}
.book__copy p{font-size:15px;color:#d6dcdf;margin:0 0 16px}
.book__copy .book__facts{margin-top:26px}
.book__lead{font-size:20px !important;color:#fff !important;font-family:var(--head);font-weight:700}
.book__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px !important}
.section--book .btn--outline{color:#fff;border-color:#fff}
.section--book .btn--outline:hover{background:#fff;color:var(--ink)}
.book__facts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.book__facts li{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius);padding:16px 18px;font-size:14.5px;color:#d6dcdf;
}
.book__facts strong{display:block;margin-bottom:3px;font-family:var(--head)}
@media (max-width:860px){
  .book__grid{grid-template-columns:1fr;gap:32px}
  /* Face on once the cover is the only thing in its row: the tilt reads as a
     book beside a column of text and as a crooked image on its own. */
  .book__mockup picture{transform:none}
}

/* The whole syllabus on the homepage, generated from COURSE_MODULES. */
.course__syllabus-title{font-family:var(--head);font-size:26px;margin:54px 0 0;text-align:center}
.course__syllabus-lead{margin-top:10px !important}
.syllabus{
  display:grid;gap:16px;margin-top:34px;text-align:start;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
}
.syllabus__item{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px;display:flex;flex-direction:column;gap:6px;
}
.syllabus__num{
  font-family:var(--head);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--steel);margin:0;
}
[dir="rtl"] .syllabus__num{letter-spacing:0;text-transform:none;font-size:13px}
.syllabus__item h4{font-size:18px;margin:0;line-height:1.35}
.syllabus__item h4 a{color:var(--body)}
.syllabus__item h4 a:hover{color:var(--accent-dark)}
.syllabus__item p{font-size:14.5px;color:var(--muted);margin:0}
.syllabus__count{margin-top:auto !important;padding-top:10px;font-size:13px;color:var(--steel);font-weight:600}
@media (max-width:600px){
  .course__syllabus-title{font-size:22px;margin-top:42px}
  .syllabus{grid-template-columns:1fr}
}

/* On the two topics kfagency.net owns, hand commercial intent to the agency. */
.agency-pointer{
  max-width:760px;margin:20px auto 0 !important;text-align:center;
  background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 22px;color:var(--body) !important;font-size:15.5px;
}
.agency-pointer a{color:var(--accent-dark);font-weight:600}

/* ---------- cross-links into kfagency.net ---------- */
.kf-links{
  max-width:760px;margin:44px auto 0;background:var(--bg-soft);
  border:1px solid var(--line);border-radius:var(--radius);padding:26px 28px;
}
.kf-links h2{font-size:20px;margin:0 0 6px}
.kf-links__intro{color:var(--muted);font-size:14.5px;margin:0 0 16px}
.kf-links ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.kf-links li{padding-left:16px;position:relative;line-height:1.5}
.kf-links li::before{content:"\2192";position:absolute;left:0;color:var(--muted);font-size:13px}
[dir="rtl"] .kf-links li{padding-left:0;padding-right:16px}
[dir="rtl"] .kf-links li::before{content:"\2190";left:auto;right:0}
.kf-links a{color:var(--accent-dark);font-weight:600}
.kf-links__tag{
  font-family:var(--head);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:1px 7px;
  background:#fff;white-space:nowrap;vertical-align:1px;
}
.kf-links__cta{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:15px}
.position__links{font-size:14.5px;color:var(--muted)}
.position__links a{color:var(--accent-dark)}

/* ---- the course page, 2026-08-17 -------------------------------------------
   One page now carries the course and everything that used to sit on
   free-content.html, so it needs to read like a course rather than a list:
   a cover, a progress meter, collapsible modules and lesson rows that can
   show what has been finished. Progress lives in localStorage; every rule
   below degrades to plain links with JavaScript off. */

/* Author-level display rules (.btn, .module__track) outrank the [hidden] rule
   in the user agent sheet, so a control this page keeps hidden until there is
   something to say would show up anyway. */
[hidden]{display:none !important}

/* The cover. The rest of the site's page heads are grey; the course gets its
   own so it reads as a place you enter rather than another index. */
.page-head--course{
  background:linear-gradient(155deg,#04374f 0%,#0172b2 58%,#0cbcf5 150%);
  padding:70px 0 60px;
}
.page-head--course h1,
.page-head--course .course-facts b{color:#fff}
.page-head--course p{color:rgba(255,255,255,.86)}
.page-head--course h1{max-width:22ch;margin-inline:auto}
[lang="ar"] .page-head--course h1{max-width:26ch}
.page-head--course .page-head__kicker{color:#9fe4ff}
.page-head--course .course-facts li{
  background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.3);color:#fff;
}
.page-head--course .btn--ghost{color:#fff;border-color:rgba(255,255,255,.55);background:transparent}
.page-head--course .btn--ghost:hover{background:rgba(255,255,255,.14);border-color:#fff}

.course-start{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:26px 0 0}

/* Progress meter. Hidden until there is progress to show — a 0% bar on a first
   visit is noise, and the panel carries the "nothing is sent anywhere" note. */
.course-progress{
  max-width:560px;margin:30px auto 0;padding:16px 20px;border-radius:var(--radius);
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.26);
}
.page-head .course-progress__label{
  display:flex;justify-content:space-between;gap:12px;margin:0 0 10px;text-align:start;
  font-family:var(--head);font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.78);
}
[dir="rtl"] .page-head .course-progress__label{letter-spacing:0;text-transform:none;font-size:13.5px}
.course-progress__count{letter-spacing:0;text-transform:none;font-weight:700;color:#fff}
.course-progress__track{height:8px;border-radius:99px;background:rgba(255,255,255,.22);overflow:hidden}
.course-progress__bar{display:block;height:100%;width:0;border-radius:99px;background:#fff;transition:width .3s ease}
.page-head .course-progress__note{
  margin:11px 0 0;font-size:12.5px;color:rgba(255,255,255,.62);text-align:start;
}

/* The sticky contents bar gained a control, so the chips share a row now. */
.topics__inner{display:flex;align-items:center;gap:14px}
.topics__chips{
  flex:1 1 auto;min-width:0;
  mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent);
}
[dir="rtl"] .topics__chips{mask-image:linear-gradient(to left,#000 calc(100% - 26px),transparent)}
.topics__toggle{
  flex:0 0 auto;background:#fff;border:1px solid var(--line);border-radius:99px;cursor:pointer;
  font-family:var(--head);font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--body);padding:9px 15px;transition:.18s ease;
}
.topics__toggle:hover{border-color:var(--accent);color:var(--accent-dark)}
[dir="rtl"] .topics__toggle{letter-spacing:0;text-transform:none;font-size:13.5px}
.topics__chip--alt{background:var(--bg-soft);font-weight:700}

/* ---- modules ---- */
/* Anything jumped to from the contents bar has to clear both sticky bars. */
.section[id]{scroll-margin-top:calc(var(--header-h) + 76px)}
.section--syllabus{padding:44px 0 68px}
.module{scroll-margin-top:calc(var(--header-h) + 76px)}
.module__box{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  margin:0 0 14px;box-shadow:var(--shadow);transition:box-shadow .2s ease;
}
.module__box[open]{box-shadow:var(--shadow-lg)}
.module__summary{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-rows:auto auto;
  align-items:center;gap:0 16px;padding:18px 22px;cursor:pointer;list-style:none;
}
.module__summary::-webkit-details-marker{display:none}
.module__summary::marker{content:""}
.module__summary:hover .module__title{color:var(--accent-dark)}
.module__badge{
  grid-row:1/3;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:var(--bg-soft);border:1px solid var(--line);color:var(--ink);
  font-family:var(--head);font-size:17px;font-weight:800;transition:.18s ease;
}
.module__box[open] .module__badge{background:var(--accent);border-color:var(--accent);color:#fff}
.module__kicker{
  grid-column:2;grid-row:1;font-family:var(--head);font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
[dir="rtl"] .module__kicker{letter-spacing:0;text-transform:none;font-size:13px}
.module__title{grid-column:2;grid-row:2;font-size:20px;line-height:1.3;transition:color .15s ease}
.module__meta{grid-column:3;grid-row:1/3;display:flex;flex-direction:column;align-items:flex-end;gap:7px}
[dir="rtl"] .module__meta{align-items:flex-start}
.module__count{font-family:var(--head);font-size:12.5px;color:var(--muted);white-space:nowrap}
.module__done{font-weight:700;color:var(--accent-dark)}
.module__track{display:block;width:76px;height:5px;border-radius:99px;background:var(--line);overflow:hidden}
.module__fill{display:block;height:100%;width:0;border-radius:99px;background:var(--accent);transition:width .3s ease}
.module__chev{
  grid-column:4;grid-row:1/3;width:10px;height:10px;margin-inline-start:4px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg);transition:transform .2s ease;
}
.module__box[open] .module__chev{transform:rotate(-135deg)}
.module__blurb{
  margin:2px 22px 4px;padding-inline-start:58px;color:var(--muted);font-size:15px;max-width:70ch;
}
.module__hub{margin:10px 22px 18px;padding-inline-start:58px;font-family:var(--head);font-size:13px}
.module__hub a{color:var(--accent-dark);font-weight:600}

/* ---- lesson rows, shared by the syllabus and the module list on a lesson ---- */
.lessons{list-style:none;margin:10px 0 0;padding:0}
.lesson{border-top:1px solid var(--line)}
.lesson__link{
  display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:14px;
  padding:12px 22px;color:var(--body);text-decoration:none;transition:background .15s ease;
}
.lesson__link:hover{background:var(--bg-soft);text-decoration:none}
.lesson__state{
  width:21px;height:21px;border-radius:50%;border:2px solid var(--line);
  display:grid;place-items:center;transition:.15s ease;
}
.lesson.is-done .lesson__state{background:var(--accent);border-color:var(--accent)}
.lesson.is-done .lesson__state::after{
  content:"";width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;
  transform:rotate(-45deg) translateY(-1px);
}
.lesson__num{
  font-family:var(--head);font-size:12px;font-weight:700;color:var(--muted);
  min-width:22px;text-align:center;
}
.lesson__title{font-size:15.5px;line-height:1.45}
.lesson__go{color:var(--accent-dark);opacity:0;transition:opacity .15s ease}
.lesson__link:hover .lesson__go{opacity:1}
.lesson.is-done .lesson__title{color:var(--muted)}
.lesson.is-current{background:var(--bg-soft)}
.lesson.is-current .lesson__title{font-weight:700;color:var(--ink)}
.lesson.is-resume{box-shadow:inset 3px 0 0 var(--accent)}
[dir="rtl"] .lesson.is-resume{box-shadow:inset -3px 0 0 var(--accent)}

/* ---- browse by topic ---- */
.topic-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px;margin-top:34px;
}
.topic-card{
  display:flex;flex-direction:column;gap:8px;padding:22px 24px;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);color:var(--body);
  text-decoration:none;transition:.2s ease;
}
.topic-card:hover{
  border-color:var(--accent);box-shadow:var(--shadow-lg);transform:translateY(-3px);text-decoration:none;
}
.topic-card__meta{
  font-family:var(--head);font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-dark);
}
[dir="rtl"] .topic-card__meta{letter-spacing:0;text-transform:none;font-size:13px}
.topic-card__title{font-family:var(--head);font-size:18px;font-weight:700;color:var(--ink);line-height:1.35}
.topic-card__intro{
  font-size:14px;color:var(--muted);line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}

/* ---- a lesson page reads as a lesson ---- */
.lesson-bar{
  position:sticky;top:var(--header-h);z-index:20;
  background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
}
.lesson-bar__inner{display:flex;align-items:center;gap:16px;padding:10px 24px;position:relative}
.lesson-bar__back{
  font-family:var(--head);font-size:13px;color:var(--body);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:52%;
}
.lesson-bar__back:hover{color:var(--accent-dark);text-decoration:none}
.lesson-bar__pos{
  margin:0;margin-inline-start:auto;font-family:var(--head);font-size:12.5px;
  color:var(--muted);white-space:nowrap;
}
.lesson-bar__share{
  display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  padding:5px 11px;border:1px solid var(--line);border-radius:99px;
  font-family:var(--head);font-size:12.5px;color:var(--body);background:#fff;
}
.lesson-bar__share:hover{border-color:var(--accent);color:var(--accent-dark);text-decoration:none}
.lesson-bar__share svg{width:14px;height:14px;fill:#0a66c2;flex:0 0 auto}
.lesson-bar__track{position:absolute;inset-inline:0;bottom:-1px;height:3px}
.lesson-bar__fill{display:block;height:100%;background:var(--accent)}

.lesson-foot{margin:46px 0 0}
.lesson-nav{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.lesson-nav__side{
  display:flex;flex-direction:column;gap:5px;padding:15px 18px;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);color:var(--body);
  text-decoration:none;transition:.18s ease;
}
.lesson-nav__side:hover{border-color:var(--accent);box-shadow:var(--shadow);text-decoration:none}
.lesson-nav__side--next{grid-column:2;text-align:end;align-items:flex-end}
.lesson-nav__dir{
  font-family:var(--head);font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}
[dir="rtl"] .lesson-nav__dir{letter-spacing:0;text-transform:none;font-size:13px}
.lesson-nav__num{font-family:var(--head);font-size:12px;font-weight:600;color:var(--accent-dark)}
.lesson-nav__title{font-family:var(--head);font-size:15px;font-weight:600;color:var(--ink);line-height:1.4}
.lesson-nav__side:hover .lesson-nav__title{color:var(--accent-dark)}

.lesson-foot__actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 16px}
.lesson-foot__tick[aria-pressed="true"]{
  background:var(--bg-soft);border-color:var(--accent);color:var(--accent-dark);
}

.lesson-module{
  margin:26px 0 0;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);
}
.lesson-module>summary{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 14px;
  padding:15px 20px;cursor:pointer;list-style:none;align-items:center;
}
.lesson-module__label,.lesson-module__title{grid-column:1}
.lesson-module>summary .module__chev{grid-column:2;grid-row:1/3}
.lesson-module>summary::-webkit-details-marker{display:none}
.lesson-module>summary::marker{content:""}
.lesson-module__label{
  font-family:var(--head);font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}
[dir="rtl"] .lesson-module__label{letter-spacing:0;text-transform:none;font-size:13px}
.lesson-module__title{font-family:var(--head);font-size:16px;font-weight:700;color:var(--ink)}
.lesson-module .lessons{margin:0;background:#fff;border-top:1px solid var(--line)}
.lesson-module .lesson__link{padding:11px 20px}
.lesson-module .module__hub{
  margin:0;padding:12px 20px;border-top:1px solid var(--line);background:#fff;
  border-radius:0 0 var(--radius) var(--radius);
}

@media (max-width:720px){
  .page-head--course{padding:52px 0 46px}
  .module__summary{grid-template-columns:auto minmax(0,1fr) auto;gap:0 12px;padding:15px 16px}
  .module__chev{display:none}
  .module__title{font-size:17px}
  .module__badge{width:36px;height:36px;font-size:15px}
  .module__blurb,.module__hub{margin-inline:16px;padding-inline-start:0}
  .module__track{width:56px}
  .lesson__link{padding:12px 16px;gap:10px}
  .lesson__go{display:none}
  .lesson-module .lesson__link{padding:11px 16px}
  .lesson-nav{grid-template-columns:1fr}
  .lesson-nav__side--next{grid-column:1;text-align:start;align-items:flex-start}
  .lesson-bar__inner{gap:10px;padding:9px 18px}
  .lesson-bar__back{font-size:12.5px;max-width:58%}
  .lesson-bar__pos{font-size:11.5px}
  .lesson-bar__share{padding:5px 8px;gap:0}
  .lesson-bar__share span{display:none}
  .course-start .btn{width:100%;text-align:center}
}

@media (prefers-reduced-motion:reduce){
  .topic-card:hover{transform:none}
  .course-progress__bar,.module__fill{transition:none}
}

/* ---------- LinkedIn share prompt ----------
   The once-a-day / every-Nth-lesson dialog. Markup comes from build.mjs on every
   page; site.js decides when it is shown. Centred rather than a corner toast,
   because it is a question that wants an answer. */
.kb-prompt-open{overflow:hidden}
.kb-prompt{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(17,17,17,.55);
  animation:kb-prompt-in .18s ease-out;
}
.kb-prompt[hidden]{display:none}
@keyframes kb-prompt-in{from{opacity:0}to{opacity:1}}
.kb-prompt__box{
  position:relative;width:100%;max-width:460px;
  background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-lg);
  padding:34px 30px 26px;text-align:center;
}
@media (prefers-reduced-motion:no-preference){
  .kb-prompt__box{animation:kb-prompt-rise .22s ease-out}
}
@keyframes kb-prompt-rise{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
.kb-prompt__x{
  position:absolute;top:8px;inset-inline-end:10px;
  width:34px;height:34px;line-height:1;font-size:26px;
  background:none;border:0;color:var(--muted);cursor:pointer;border-radius:8px;
}
.kb-prompt__x:hover{background:var(--bg-soft);color:var(--ink)}
.kb-prompt__mark{
  width:44px;height:44px;margin:0 auto 14px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  background:#0a66c2;color:#fff;
}
.kb-prompt__mark svg{width:24px;height:24px;fill:currentColor;display:block}
.kb-prompt__title{font-size:23px;margin:0 0 10px}
.kb-prompt__body{margin:0 0 20px;color:var(--body);font-size:15.5px}
.kb-prompt__actions{display:flex;flex-direction:column;gap:10px;margin:0}
.kb-prompt__actions .btn{width:100%;justify-content:center}
.kb-prompt__note{margin:16px 0 0;color:var(--muted);font-size:12.5px;line-height:1.5}
@media (max-width:520px){
  .kb-prompt{padding:14px;align-items:flex-end}
  .kb-prompt__box{padding:28px 20px 20px}
}

/* ---------- /share.php ----------
   The composer page. It is PHP rather than a generated page, so it reuses the
   design tokens above and adds only what it needs of its own. */
.share-page .site-header__inner{justify-content:space-between}
.share-page .site-header__logo{font-family:var(--head);font-weight:700;color:var(--ink);font-size:19px}
.share-nav a{font-size:14.5px}
.share-main{padding:44px 24px 90px;max-width:760px}
.share-title{font-size:36px;font-weight:400;letter-spacing:-.01em}
.share-lead{margin:14px 0 0;color:var(--muted);font-size:16px}
.share-progress{
  margin:20px 0 0;padding:12px 16px;border-radius:10px;
  background:var(--bg-soft);border:1px solid var(--line);
  font-size:15px;font-weight:600;color:var(--ink);
}
.share-card{
  margin:26px 0 0;padding:28px;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
}
.share-card h2{font-size:22px;margin:0 0 8px}
.share-card h3{font-size:16px;margin:0 0 8px}
.share-alert{border-color:#f0c9c9;background:#fdf6f6}
.share-note{color:var(--muted);font-size:13.5px;margin:8px 0 0;line-height:1.6}

/* tabs */
.share-tabs{display:flex;gap:8px;margin:18px 0 6px;border-bottom:1px solid var(--line)}
.share-tab{
  background:none;border:0;border-bottom:2px solid transparent;
  padding:9px 4px;margin-bottom:-1px;cursor:pointer;
  font-family:var(--text);font-size:14.5px;color:var(--muted);
}
.share-tab.is-on{color:var(--ink);font-weight:600;border-bottom-color:var(--accent)}

/* forms */
.share-form{display:block;margin-top:18px}
.share-field{display:block;margin:0 0 16px}
.share-field > span{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:6px}
.share-field input{
  width:100%;padding:11px 13px;font:inherit;font-size:15px;color:var(--body);
  background:#fff;border:1px solid var(--line);border-radius:9px;
}
.share-field input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px rgba(12,188,245,.16)}
.share-field small{display:block;margin-top:5px;color:var(--muted);font-size:12.5px}
.share-check{display:flex;align-items:center;gap:8px;margin:0 0 18px;font-size:13.5px;color:var(--muted)}
.share-err{display:block;margin-top:6px;color:#b3261e;font-size:13px;font-style:normal}
.share-err--form{
  margin:14px 0 0;padding:10px 13px;border-radius:9px;
  background:#fdf1f0;border:1px solid #f0c9c9;
}

/* signed-in strip */
.share-who{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:22px 0 0;font-size:14.5px;color:var(--muted)}
.share-signout{margin:0}
.share-signout button{
  background:none;border:0;padding:0;cursor:pointer;
  font:inherit;font-size:14px;color:var(--accent-dark);text-decoration:underline;
}

/* composer */
.share-text{
  width:100%;margin-top:6px;padding:16px;
  font-family:var(--text);font-size:15px;line-height:1.7;color:var(--body);
  border:1px solid var(--line);border-radius:11px;resize:vertical;background:var(--bg-soft);
}
.share-text:focus{border-color:var(--accent);outline:none;background:#fff}
.share-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}

/* the tag instructions — the one part nobody should skim */
.share-tagtip{
  margin-top:26px;padding:20px;border-radius:11px;
  background:#f2f8fd;border:1px solid #cfe6f7;
}
.share-tagtip ol,.share-howto ol{margin:10px 0 0;padding-inline-start:22px}
.share-tagtip li,.share-howto li{margin:0 0 7px;font-size:14.5px}
.share-howto{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.share-privacy{margin:26px 0 0;color:var(--muted);font-size:12.5px;line-height:1.65}

/* The lesson footer's share button. Sits last in the action row, quieter than
   "Complete and continue", it is an offer, not the thing the reader came for. */
.lesson-foot__share{display:inline-flex;align-items:center;gap:8px}
.lesson-foot__share svg{width:16px;height:16px;fill:#0a66c2;flex:0 0 auto}
.lesson-foot__share:hover svg{fill:currentColor}
@media (max-width:520px){
  .lesson-foot__share{width:100%;justify-content:center}
}

/* ---------- the public progress page (/p.php) ----------
   This is the page a share lands on, so it is the one page here that has to
   look like an achievement rather than a form. */
.progress-page .share-main{max-width:680px}
.pp-card{
  margin:26px 0 0;padding:38px 34px;border-radius:20px;color:#fff;
  background:linear-gradient(135deg,var(--accent-deep) 0%,var(--accent-dark) 55%,var(--accent) 100%);
  box-shadow:var(--shadow-lg);
}
.pp-eyebrow{margin:0 0 10px;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.72)}
[dir="rtl"] .pp-eyebrow{text-transform:none;letter-spacing:0}
.pp-name{margin:0;color:#fff;font-size:38px;line-height:1.15;overflow-wrap:anywhere}
.pp-role{margin:10px 0 0;font-size:16px;color:rgba(255,255,255,.86)}
.pp-sep{opacity:.6}

.pp-progress{display:flex;align-items:center;gap:26px;margin:28px 0 0}
.pp-ring{
  --pct:0;
  position:relative;flex:0 0 auto;width:112px;height:112px;border-radius:50%;
  background:conic-gradient(#fff calc(var(--pct)*1%),rgba(255,255,255,.22) 0);
  display:flex;align-items:center;justify-content:center;
}
.pp-ring::after{content:"";position:absolute;inset:11px;border-radius:50%;background:rgba(4,58,90,.82)}
.pp-ring span{position:relative;z-index:1;font-family:var(--head);font-weight:700;font-size:29px;color:#fff}
.pp-ring small{font-size:16px;font-weight:600;opacity:.8}
.pp-meter{flex:1 1 auto;min-width:0}
.pp-count{margin:0 0 12px;font-family:var(--head);font-weight:700;font-size:20px;color:#fff}
.pp-track{height:12px;border-radius:99px;background:rgba(255,255,255,.22);overflow:hidden}
.pp-bar{display:block;height:100%;background:#fff;border-radius:99px}

.pp-about{margin:26px 0 0;font-size:15.5px;line-height:1.7;color:rgba(255,255,255,.92)}
.pp-links{margin:22px 0 0}
.pp-links a{
  display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border-radius:99px;
  background:rgba(255,255,255,.14);color:#fff;font-size:14px;font-weight:600;
}
.pp-links a:hover{background:rgba(255,255,255,.24);text-decoration:none}
.pp-links svg{width:16px;height:16px;fill:currentColor}

.pp-cta{
  margin:22px 0 0;padding:30px 28px;text-align:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
}
.pp-cta__note{margin:0 0 18px;color:var(--muted);font-size:15px}
.pp-cta__btn{font-size:16px;padding:13px 30px}
.pp-cta__by{margin:20px 0 0;font-size:13.5px;color:var(--muted)}

@media (max-width:560px){
  .pp-card{padding:30px 22px}
  .pp-name{font-size:29px}
  .pp-progress{gap:18px}
  .pp-ring{width:92px;height:92px}
  .pp-ring span{font-size:24px}
}

/* ---------- the account page ---------- */
.share-ok{
  margin:20px 0 0;padding:11px 15px;border-radius:9px;font-size:14.5px;
  background:#eefaf1;border:1px solid #bfe6cb;color:#1c6b33;
}
.acc-link__url{margin:14px 0 0}
.acc-link__url input{
  width:100%;padding:11px 13px;font:inherit;font-size:14px;color:var(--body);
  background:var(--bg-soft);border:1px solid var(--line);border-radius:9px;
}
.acc-private-head{
  margin-top:30px;padding-top:22px;border-top:1px solid var(--line);
  font-size:16px;color:var(--muted);font-weight:600;
}
.share-field textarea{
  width:100%;padding:11px 13px;font:inherit;font-size:15px;line-height:1.6;color:var(--body);
  background:#fff;border:1px solid var(--line);border-radius:9px;resize:vertical;
}
.share-field textarea:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px rgba(12,188,245,.16)}
.share-main--narrow{max-width:560px}

/* The card preview on the composer. */
.share-preview{margin:0 0 18px;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--bg-soft)}
.share-preview canvas{display:block;width:100%;height:auto}