/* Session page v3 (02 / 02b), register v3 (03) and «ادخل الجلسة» (10), ai-on-air-v3-package (2026-10-07).
   Tokens and cards from air.css; sizes from design/reference-html. Loaded after air-session.css.
   The form fields (.s2-f / .s2-in / checks / code boxes) are the v2 ones, kept. */
.s2-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:currentColor;flex-shrink:0}
.s3-btn{height:52px;padding:0 26px;font-size:14.5px}
.s3-btn--54{height:54px;font-size:15px}
.s3-btn.is-off{opacity:.55;cursor:default;pointer-events:none}
.s3-btn .s2-dot{background:var(--air-live)}
.air-head__a [hidden]{display:none}

/* tags */
.s3-tags{display:flex;gap:8px;flex-wrap:wrap}
.s3-tag{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:600;background:rgba(255,255,255,.08);color:var(--air-text);white-space:nowrap}
.s3-tag--green{background:var(--air-green);color:var(--air-black)}
.s3-tag--live{background:var(--air-live);color:#fff}
.s3-tag--live .s2-dot{background:#fff}

/* 02 hero: text on the start side, picture 560×400 on the end side */
.s3-hero{display:flex;gap:48px;align-items:center;padding-top:8px}
.s3-hero__tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.s3-title{margin:0;font-size:46px;font-weight:500;line-height:1.2;text-shadow:var(--air-glow-white);text-wrap:balance}
.s3-title:lang(en){letter-spacing:-.01em}
.s3-desc{margin:0;font-size:16px;color:var(--air-text-2);line-height:1.8;max-width:560px}
.s3-facts{display:flex;gap:32px;flex-wrap:wrap;margin:0;padding:18px 0;width:100%;border-top:1px solid var(--air-border);border-bottom:1px solid var(--air-border)}
.s3-facts div{display:flex;flex-direction:column;gap:4px}
.s3-facts dt{font-size:12.5px;color:var(--air-text-3)}
.s3-facts dd{margin:0;font-size:15px;font-weight:600}
.s3-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.s3-note{font-size:13px;color:var(--air-text-3);padding-inline-start:6px}
.s3-hero__img{width:560px;height:400px;flex-shrink:0;border-radius:28px;overflow:hidden;background:var(--air-block-2)}
.s3-hero__img>img{width:100%;height:100%;object-fit:cover;object-position:50% 35%;display:block}
.s3-hero__img.is-gray>img,.s3-rec__th img{filter:grayscale(1)}
.ss-mine-note{margin:0}

/* speakers */
.s3-h2{margin:0;font-size:36px;font-weight:500;line-height:1.2;text-align:center;text-shadow:var(--air-glow-white)}
.s3-people{padding-top:80px;display:flex;flex-direction:column;gap:28px}
.s3-people__g{display:flex;gap:20px;justify-content:center;flex-wrap:wrap}
.s3-person{width:400px;max-width:100%;display:flex;gap:16px;align-items:center;padding:16px;border-radius:22px;background:var(--air-card);border:1px solid var(--air-card-border)}
.s3-person__img{width:88px;height:88px;border-radius:18px;overflow:hidden;background:var(--air-block-2);flex-shrink:0;display:flex;align-items:center;justify-content:center}
.s3-person__img img{width:100%;height:100%;object-fit:cover;object-position:50% 15%;display:block}
.s3-person__img i{font-style:normal;font-size:28px;font-weight:600;color:var(--air-green);display:flex;align-items:center;justify-content:center;width:100%;height:100%;line-height:1}   /* the initial sits in the middle of the square (a span rule made the box block) */
.s3-person small{display:block;font-size:12.5px;color:var(--air-green);font-weight:600}
.s3-person b{display:block;font-size:18px;font-weight:600;margin-top:3px}
.s3-person span{display:block;font-size:13px;color:var(--air-text-2);margin-top:3px;line-height:1.6}

/* agenda + how to attend / recording */
.s3-lower{display:flex;gap:20px;align-items:flex-start;padding-top:80px}
.s3-box{border-radius:24px;background:var(--air-card);border:1px solid var(--air-card-border);padding:32px;min-width:0}
.s3-box h2{margin:0;font-size:22px;font-weight:600}
.s3-agenda{flex:1.4}
.s3-agenda h2{margin-bottom:8px}
.s3-agenda ol{list-style:none;margin:0;padding:0}
.s3-agenda li{display:flex;gap:20px;padding:16px 0;border-top:1px solid var(--air-border)}
.s3-agenda li span{width:56px;font-size:13px;font-weight:600;color:var(--air-green);padding-top:2px;flex-shrink:0}
.s3-agenda li b{font-size:16px;font-weight:600}
.s3-how,.s3-rec{flex:1;display:flex;flex-direction:column;gap:20px}
.s3-lower.is-single>*{flex:1}
.s3-how ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px}
.s3-how li{display:flex;gap:14px;align-items:flex-start}
.s3-how li>span{width:32px;height:32px;border-radius:50%;background:var(--air-green);color:var(--air-black);display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;flex-shrink:0}
.s3-how li b{display:block;font-size:15.5px;font-weight:600}
.s3-how li small{display:block;font-size:13px;color:var(--air-text-2);margin-top:2px}
.s3-how .air-btn{margin-top:4px;height:48px}
.s3-rec__th{position:relative;display:block;height:180px;border-radius:16px;overflow:hidden;background:var(--air-block-2)}
.s3-rec__th img{width:100%;height:100%;object-fit:cover;object-position:50% 35%;display:block}
.s3-rec__play{position:absolute;top:50%;left:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:var(--air-yt);color:#fff;display:flex;align-items:center;justify-content:center}
.s3-rec__play svg{width:26px;height:26px}
.s3-rec__v{width:100%;border-radius:16px;background:#000;display:block}
/* the YouTube recording inside the page: the cover, then the player in place (owner 2026-10-17) */
.s3-rec__yt{position:relative;width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#000;cursor:pointer}
.s3-rec__yt img{width:100%;height:100%;object-fit:cover;display:block}
.s3-rec__yt .s3-rec__play{border:0;cursor:pointer;box-shadow:0 8px 30px rgba(0,0,0,.45);transition:transform .15s}
.s3-rec__yt:hover .s3-rec__play{transform:scale(1.06)}
.s3-rec__yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.s3-rec p{margin:0;font-size:13.5px;color:var(--air-text-2);line-height:1.7}

/* more sessions */
.s3-others{padding-top:80px;padding-bottom:80px;display:flex;flex-direction:column;gap:32px}
.s3-others__g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
body:not(.hm3-page) .sb-bandwrap{padding-top:0}

/* 03 register: the 520px form card on the start side, the session picture on the other */
.s3-book{display:flex;gap:20px;align-items:stretch;padding-top:8px;padding-bottom:64px}
.s3-form{width:520px;flex-shrink:0;border-radius:28px;background:var(--air-card);border:1px solid var(--air-card-border);padding:40px;display:flex;flex-direction:column;gap:18px}
.s3-form__logo{height:60px;width:auto;align-self:flex-start;display:block}
.s3-form__h{display:flex;flex-direction:column;gap:6px}
.s3-form__h span{font-size:15px;color:var(--air-text-2)}
.s3-form__h h1{margin:0;font-size:30px;font-weight:500;line-height:1.3;text-shadow:var(--air-glow-white)}
.s3-book__side{flex:1;min-width:0;display:flex;flex-direction:column;gap:14px}
.s3-book__img{flex:1;min-height:420px;border-radius:28px;overflow:hidden;background:var(--air-block)}
.s3-book__img>img{width:100%;height:100%;object-fit:cover;object-position:50% 28%;display:block}
.s3-strip{border-radius:22px;background:var(--air-card);border:1px solid var(--air-card-border);padding:18px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.s3-strip__tx{display:flex;flex-direction:column;gap:6px;min-width:0}
.s3-strip__tx>b{font-size:20px;font-weight:600;line-height:1.4}
.s3-strip__ppl{display:flex;gap:20px;flex-shrink:0}
.s3-strip__ppl>div{display:flex;align-items:center;gap:10px}
.s3-strip__ppl .air-av{width:36px;height:36px}
.s3-strip__ppl b{display:block;font-size:14px;font-weight:600}
.s3-strip__ppl small{display:block;font-size:12px;color:var(--air-text-2)}
.s3-livewrap{padding-bottom:40px}
.s3-socs{display:flex;gap:8px}
.s3-socs>*{flex:1;min-width:0}
.s3-socs--stack{flex-direction:column;gap:12px}
.s3-soc{display:flex;align-items:center;justify-content:center;gap:8px;height:50px;border-radius:999px;background:#fff;color:#0A0A0A;border:0;font:600 14px var(--air-font);cursor:pointer;overflow:hidden}
.s3-soc:hover{background:#f2f3f1}
.s3-soc__i{width:18px;height:18px}
.s3-soc--g{padding:0 4px}
.s3-soc__gsi{width:100%;display:flex;justify-content:center;min-height:40px;align-items:center}
.s3-socs--stack .s3-soc{height:52px;background:#E8EAED;font-size:15px}
.s3-foot{margin:0;font-size:12px;color:var(--air-text-3);line-height:1.7;text-align:center}
.s3-foot a{color:var(--air-text)}
.s3-form .s2-checks{gap:8px}
.s3-form .s2-form__f{gap:18px}

/* 10 «ادخل الجلسة»: pure black, the card alone (no header, footer or band) */
.s3-signin-mode .air-head,.s3-signin-mode .air-foot,.s3-signin-mode .sb-bandwrap{display:none}
.s3-signin{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 16px}
.s3-signin__card{width:420px;max-width:100%;border-radius:24px;background:#1E1F22;padding:36px;display:flex;flex-direction:column;gap:16px;color:#E8EAED}
.s3-signin__card .s2-form__t{font-size:24px;padding-top:8px;text-shadow:none}
.s3-signin__card .s2-form__d{margin:0;font-size:13.5px;color:#9AA0A6}
.s3-signin__card .s2-in,.s3-signin__card .ss-code input{background:#2A2B2E}
.s3-signin__card .s3-foot{font-size:11.5px;color:#9AA0A6}
.s3-dual{display:inline-flex;align-items:center;gap:12px}
.s3-dual img:first-child{height:32px;width:auto}
.s3-dual i{width:1px;height:26px;background:rgba(255,255,255,.25)}
.s3-dual img:last-child{height:34px;width:auto}
/* confirm: photo in a green ring, editable name */
.s3-who{display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px 0 4px;text-align:center}
.s3-who__av{width:96px;height:96px;border-radius:50%;object-fit:cover;object-position:50% 20%;box-shadow:0 0 0 3px var(--air-green)}
.s3-who__av--ph{display:flex;align-items:center;justify-content:center;background:#2A2B2E;font-size:36px;font-weight:500;color:var(--air-green)}
.s3-who b{font-size:20px;font-weight:500}
.s3-who small{font-size:12.5px;color:#9AA0A6}
.s3-who__note{margin:0;font-size:13px;color:#9AA0A6;text-align:center;line-height:1.7}
.s3-who__f{display:flex;flex-direction:column;gap:16px}
.s3-who__in{display:flex;align-items:center;gap:10px;height:48px;padding:0 16px;border-radius:999px;background:#2A2B2E;border:1.5px solid transparent}
.s3-who__in:focus-within{border-color:var(--air-green)}
.s3-who__in.is-err{border-color:var(--air-live)}
.s3-who__in input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:inherit;font:14px var(--air-font)}
.s3-who__in small{font-size:12px;color:#9AA0A6}
.s3-who__alt{margin:0;font-size:12.5px;color:#9AA0A6;text-align:center}
.s3-who__alt button{background:none;border:0;padding:0;color:#E8EAED;cursor:pointer;font:inherit}
.s3-who__alt button:hover{text-decoration:underline}

/* S2 form on a dark block (the old booking form sat on green) */
.s2-form__t{margin:0;font-size:30px;font-weight:500;line-height:1.2;text-shadow:var(--air-glow-white)}
.s2-form__d{margin:-10px 0 0;font-size:14.5px;color:var(--air-text-2);line-height:1.7}
.s2-form__f{display:flex;flex-direction:column;gap:20px}
.s2-or{display:flex;align-items:center;gap:14px;color:var(--air-text-3);font-size:13px}
.s2-or::before,.s2-or::after{content:"";flex:1;height:1px;background:var(--air-border)}
.s2-f{display:flex;flex-direction:column;gap:8px}
.s2-f>span:first-child{font-size:14px;font-weight:500}
.s2-f em{font-style:normal;color:var(--air-text-2);font-weight:400}
.s2-in{display:flex;align-items:center;gap:10px;height:var(--air-input-h);padding:0 20px;border-radius:var(--air-radius-pill);background:var(--air-block-2);border:1.5px solid transparent;color:var(--air-text-3)}
.s2-in:focus-within{border-color:var(--air-green);box-shadow:0 0 0 1px var(--air-green)}
.s2-in.is-err{border-color:var(--air-live)}
.s2-in .air-i{width:18px;height:18px;flex-shrink:0}
.s2-in input,.s2-in textarea{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--air-text);font:14.5px var(--air-font)}
.s2-in input{height:100%}
[dir=rtl] .s2-in input[dir=ltr]{text-align:right}
.s2-in input::placeholder,.s2-in textarea::placeholder{color:var(--air-text-3)}
.s2-checks{display:flex;flex-direction:column;gap:12px}
.s2-form .ss-check{font-size:14px;color:var(--air-text)}
.s2-form .ss-check__b{width:24px;height:24px;border-radius:7px;border:1.5px solid var(--air-border);background:var(--air-block-2);color:var(--air-black)}
.s2-form .ss-check input:checked+.ss-check__b{background:var(--air-green);border-color:var(--air-green)}
.s2-form .ss-check input:focus-visible+.ss-check__b{outline-color:var(--air-green)}
.s2-form__end{display:flex;flex-direction:column;gap:10px}
.s2-form .ss-form__consent{margin:-8px 0 0;text-align:start;color:var(--air-text-3);opacity:1;font-size:12px}
.s2-form .ss-form__consent a{color:var(--air-text-2)}
.s2-form .ss-err{color:#FF8A82;font-weight:500}
.s2-form .ss-form__link{color:var(--air-green);align-self:flex-start}
.s2-form .ss-form__links{justify-content:flex-start;gap:20px}
.s2-form .ss-form__sent{color:var(--air-text-2)}
.s2-form .ss-form__sent b{background:var(--air-block-2);color:var(--air-text)}
.s2-form .ss-code input{background:var(--air-block-2);color:var(--air-text)}
.s2-form .ss-code input:focus{border-color:var(--air-green);box-shadow:0 0 0 1px var(--air-green)}
.s2-form .ss-code.is-err input{border-color:var(--air-live)}
.s2-form .ss-form__end .air-btn{align-self:flex-start}
.s2-form .ss-alt{border-color:var(--air-border);color:var(--air-text)}
.s2-form .ss-f{display:flex;flex-direction:column;gap:8px}
.s2-form .ss-f>span:first-child{font-size:14px;font-weight:500}
.s2-form .ss-in{background:var(--air-block-2);color:var(--air-text);border-color:transparent}
.s2-form .ss-in:focus{border-color:var(--air-green);box-shadow:0 0 0 1px var(--air-green)}
.s2-livebar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px 14px 24px;border-radius:28px;border:1px solid rgba(255,59,48,.55);background:var(--air-block)}
.s2-livebar>span{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--air-text-2)}
.s2-livebar b{color:var(--air-text)}


@media (max-width:1180px){
  .s3-hero__img{width:440px;height:340px}
  .s3-others__g{grid-template-columns:1fr 1fr}
  .s3-form{width:460px}
}
@media (max-width:900px){
  .s3-hero{flex-direction:column-reverse;align-items:stretch;gap:24px}
  /* phones: the whole designed image at its own proportions (a fixed height cut its text off) */
  .s3-hero__img{width:100%;height:auto}
  .s3-hero__img>img{height:auto}
  .s3-title{font-size:32px}
  .s3-desc{font-size:15px}
  .s3-facts{gap:18px 28px}
  .s3-people,.s3-lower,.s3-others{padding-top:56px}
  .s3-h2{font-size:28px}
  .s3-lower{flex-direction:column;align-items:stretch}
  .s3-box{padding:24px 20px}
  .s3-others__g{grid-template-columns:1fr}
  .s3-book{flex-direction:column}
  .s3-form{width:auto;padding:26px 20px}
  .s3-book__img{min-height:0;flex:none;height:auto}
  .s3-book__img>img{height:auto}
  .s3-hero__img:has(.air-card__ph),.s3-book__img:has(.air-card__ph){aspect-ratio:16/9}   /* no picture: the logo placeholder keeps a frame */
  .s3-strip{flex-direction:column;align-items:flex-start}
  .s3-socs{flex-direction:column}
  .s2-livebar{flex-direction:column;align-items:stretch;padding:16px}
  .s2-livebar .air-btn{width:100%}
}
@media (max-width:600px){
  .s3-actions{width:100%}
  .s3-actions .air-btn{flex:1}
  .s3-person{width:100%}
}
.s3-socs--stack>*,.s3-socs.s3-socs--col>*{flex:none}
@media (max-width:900px){.s3-socs>*{flex:none}}
/* «شارك اللقاء» after booking (2026-10-10) */

/* tidier session page (owner 2026-10-10): sections start-aligned with the hero, speakers in a grid, tighter rhythm */
.s3-hero{align-items:stretch}
.s3-hero__tx{justify-content:center}
.s3-actions .s3-btn .air-i{width:18px;height:18px}
.s3-h2{text-align:start;font-size:30px}
.s3-people{padding-top:64px;gap:20px}
.s3-people__g{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));justify-content:start}
.s3-person{width:auto}
.s3-lower,.s3-others{padding-top:64px}
.s3-others{gap:24px}
@media (max-width:860px){.s3-actions .air-btn{flex:1 1 0;min-width:0;padding:0 12px;white-space:nowrap}.s3-actions .s3-note{flex-basis:100%;padding:0}.s3-actions .s3-sharebtn{flex:0 0 52px;width:52px;padding:0}.s3-sharebtn span{display:none}.s3-h2{font-size:24px}.s3-people,.s3-lower,.s3-others{padding-top:44px}.s3-people__g{grid-template-columns:1fr}}