/* Trainings (ההדרכות): components shared by the 3 options. Tokens come from shared/site.css (the homepage). */
:root{--err:#A61B1B;--ok:#2F6B3A;--field:#FFFFFF;--field-line:rgba(23,17,15,.28);--stage:#120D0E;--stage-2:#1D1618;--stage-ink:#F6EFE7;--stage-dim:#C9BDB8;--stage-line:rgba(247,223,151,.22)}
:root[data-theme="dark"]{--err:#FF9C8F;--ok:#9FD7A8;--field:#120E0F;--field-line:rgba(255,255,255,.3);--stage:#070506;--stage-2:#141011;--stage-line:rgba(247,223,151,.2)}
:root[data-theme="dark"] .btn.pink{background:#D10A75;border-color:#D10A75}
html{scroll-padding-top:24px}
body{-webkit-font-smoothing:antialiased}
.btn.sm{min-height:44px;padding:9px 16px;font-size:14.5px;gap:8px}
.btn svg{width:18px;height:18px;flex:none}
.hbtn{min-height:40px;padding:7px 18px;font-size:14.5px}
.hello{animation:none!important;background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--g-text)}
.hdr .hello[hidden],.hdr .avatar[hidden],.hdr .hbtn[hidden]{display:none}
.hdr nav a[aria-current="page"]::after{transform:scaleX(1);background:var(--g2)}
.hdr nav a[aria-current="page"]{font-weight:600}
.ft .col a[aria-current="page"]{color:#F7DF97}

/* level tag: the library's levels (white / pink / black with gold) + "לכל הרמות" */
.lvt{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:800;letter-spacing:.04em;border-radius:999px;padding:4px 11px 4px 12px;line-height:1.3;white-space:nowrap;border:1px solid transparent}
.lvt .steps{display:inline-flex;gap:2px;align-items:flex-end;height:11px}
.lvt .steps i{width:3px;border-radius:2px;background:currentColor;opacity:.25}
.lvt .steps i:nth-child(1){height:5px}.lvt .steps i:nth-child(2){height:8px}.lvt .steps i:nth-child(3){height:11px}
.lvt .steps i.on{opacity:1;background:#B8862B}
.lv-beg{background:#FFFDF9;color:#17110F;border-color:rgba(23,17,15,.16)}
.lv-mid{background:#F6C9DC;color:#17110F;border-color:rgba(120,20,70,.18)}
.lv-pro{background:#120D0E;color:#F7E7C1;border-color:rgba(247,223,151,.45)}
.lv-pro .steps i.on{background:#F7DF97}
.lv-all{background:linear-gradient(#FFFDF9,#FFFDF9) padding-box,linear-gradient(105deg,#9A6A12,#F7DF97 35%,#D9A63A 60%,#9A6A12) border-box;color:#17110F;border-color:transparent}
.tdur{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--dim)}
.tdur svg{width:16px;height:16px;flex:none}
.tst{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:800;color:var(--g-text)}
.tst svg{width:14px;height:14px}
.tst.seen{color:var(--ok)}

/* filter chips */
.tchips{display:flex;flex-wrap:wrap;gap:8px}
.tchips[hidden]{display:none}
.tchip{min-height:44px;border-radius:999px;border:1.5px solid color-mix(in srgb,var(--g2) 55%,transparent);background:color-mix(in srgb,var(--g3) 8%,var(--card));padding:8px 16px;font-weight:600;font-size:14.5px;cursor:pointer;color:var(--ink);display:inline-flex;align-items:center;gap:7px;transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .15s ease-out;-webkit-tap-highlight-color:transparent}
.tchip bdi{font-family:var(--head);font-weight:800;font-size:13px;opacity:.65}
.tchip:active{transform:scale(.97)}
.tchip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
@media (hover:hover) and (pointer:fine){.tchip:hover{border-color:var(--g2)}}

/* ===== the player: a light cover until play ===== */
.tplayer{position:relative;aspect-ratio:16/9;width:100%;border-radius:22px;overflow:hidden;background:#0E0B0C;color:#F6EFE7;isolation:isolate;box-shadow:0 30px 60px -36px rgba(0,0,0,.7),0 0 0 1px rgba(217,166,58,.35)}
.tplayer iframe,.tplayer video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#000}
.tp-cover{position:absolute;inset:0}
.tp-cover img{width:100%;height:100%;object-fit:cover;display:block}
.tp-cover.dim img{filter:blur(6px) brightness(.45);transform:scale(1.06)}
.tp-shade{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 55%,rgba(14,11,12,.05),rgba(14,11,12,.45) 75%),linear-gradient(transparent 55%,rgba(14,11,12,.6));pointer-events:none}
.tp-play{position:absolute;inset:0;margin:auto;width:max-content;height:max-content;display:flex;flex-direction:column;align-items:center;gap:10px;background:none;border:0;cursor:pointer;color:#fff;padding:12px;border-radius:24px;-webkit-tap-highlight-color:transparent}
.tp-btn{width:clamp(64px,8vw,92px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:#D10A75;box-shadow:0 18px 40px -14px rgba(209,10,117,.85),0 0 0 6px rgba(255,255,255,.16);transition:transform .25s var(--ease),box-shadow .3s ease}
.tp-btn svg{width:42%;height:42%;transform:translateX(7%)}
.tp-lbl{font-weight:800;font-size:15px;background:rgba(14,11,12,.62);border-radius:999px;padding:5px 14px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.tp-play:focus-visible{outline:3px solid #F7DF97;outline-offset:2px}
@media (hover:hover) and (pointer:fine){.tp-play:hover .tp-btn{transform:scale(1.07);box-shadow:0 22px 48px -14px rgba(209,10,117,.95),0 0 0 9px rgba(255,255,255,.2)}}
.tp-play:active .tp-btn{transform:scale(.95)}
.tp-lock{position:absolute;inset:auto 0 14px;margin:0 auto;width:max-content;max-width:calc(100% - 24px);display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;background:rgba(14,11,12,.72);border:1px solid rgba(247,223,151,.4);color:#FFF4CC;border-radius:999px;padding:5px 13px;pointer-events:none}
.tp-lock svg{width:15px;height:15px;flex:none}
.tp-meta{position:absolute;top:12px;inset-inline-start:12px;background:rgba(14,11,12,.66);border-radius:999px;padding:4px 11px;pointer-events:none}
.tp-meta .tdur{color:#fff;font-size:12.5px}
.tp-soon{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:20px;color:#F6EFE7}
.tp-soon:focus{outline:none}
.tp-soon b{font-size:clamp(20px,2.2vw,28px);font-weight:900}
.tp-soon span{max-width:44ch;color:#D8CBC6;font-size:15px}
.tp-soon .btn.goldline{background:linear-gradient(#17110F,#17110F) padding-box,linear-gradient(105deg,#9A6A12,#F7DF97 30%,#D9A63A 55%,#FFF4CC 70%,#9A6A12) border-box;color:#F6EFE7;min-height:44px;padding:9px 20px}
.review-note{font-size:12px;color:#F7DF97;border:1px dashed rgba(247,223,151,.5);border-radius:999px;padding:2px 10px}
@media (max-width:520px){.tp-soon span{display:none}.tp-lbl{font-size:13.5px}.tp-lock{font-size:12.5px;bottom:10px}}

/* share popover + toast */
.tshare{position:absolute;z-index:85;background:var(--card);color:var(--ink);border-radius:18px;padding:10px;box-shadow:0 30px 60px -24px rgba(0,0,0,.5),0 0 0 1px var(--line);display:flex;flex-direction:column;gap:4px}
.tshare[hidden]{display:none}
.ts-h{margin:2px 8px 6px;font-size:13px;font-weight:800;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ts-i{display:flex;align-items:center;gap:10px;min-height:46px;padding:8px 12px;border-radius:12px;border:0;background:transparent;text-decoration:none;font-weight:700;font-size:15px;cursor:pointer;color:inherit;text-align:start}
.ts-i svg{width:20px;height:20px;flex:none}
.ts-i[data-ch="whatsapp"] svg{color:#1FA855}
@media (hover:hover){.ts-i:hover{background:color-mix(in srgb,var(--g3) 22%,transparent)}}
.toast{position:fixed;z-index:90;inset-inline:0;bottom:calc(96px + env(safe-area-inset-bottom,0px));margin:0 auto;width:max-content;max-width:calc(100vw - 32px);background:var(--ink);color:var(--bg);border-radius:999px;padding:10px 18px;font-weight:700;font-size:14.5px;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .2s ease,transform .25s var(--ease)}
.toast.on{opacity:1;transform:none}
@media (max-width:600px){.toast{bottom:calc(84px + env(safe-area-inset-bottom,0px))}}

/* lists inside a training */
.tlearn,.treq{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.tlearn li,.treq li{display:flex;gap:10px;align-items:flex-start;line-height:1.5}
.tlearn li::before{content:"✦";flex:none;color:var(--g2);font-size:12px;margin-top:4px}
.treq li svg{flex:none;width:18px;height:18px;color:var(--g2);margin-top:3px}
.tsub{margin:0 0 10px;font-size:13px;font-weight:800;letter-spacing:.06em;color:var(--g-text)}
.tsum{display:inline-flex;align-items:center;gap:8px;font-weight:700;text-decoration:underline;text-underline-offset:5px;text-decoration-color:color-mix(in srgb,var(--g2) 70%,transparent);min-height:44px}
.tsum svg{width:18px;height:18px;flex:none}

/* states */
.tstate{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:56px 20px;border:1.5px dashed color-mix(in srgb,var(--g2) 55%,transparent);border-radius:26px;background:var(--card)}
.tstate b{font-size:24px;font-weight:900}
.tstate span{color:var(--dim);max-width:44ch}
.tstate.load{flex-direction:row;flex-wrap:wrap;justify-content:center;border-style:solid;border-color:var(--line)}
.tstate .sk{width:min(300px,80%);aspect-ratio:16/9;border-radius:18px;background:var(--bg2)}
@media (prefers-reduced-motion:no-preference){.tstate .sk{animation:skp 1.4s ease-in-out infinite}}
@keyframes skp{50%{opacity:.55}}

/* the shared sections under each option */
.tsoon .soon-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 60px;align-items:end;border-top:1px solid var(--line);padding-top:clamp(40px,5vw,70px)}
.tsoon .h2{font-size:clamp(32px,4vw,54px)}
.req{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.req fieldset{border:0;margin:0;padding:0}
.req-ok{margin:0;min-height:1.5em;font-weight:600;color:var(--ok);font-size:15px}
.req-ok.err{color:var(--err)}
@media (max-width:860px){.tsoon .soon-in{grid-template-columns:1fr}}
.tl-h{margin:0 0 16px;font-size:clamp(22px,2.2vw,28px);font-weight:900}
.tlinks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.tlinks a{display:flex;align-items:center;gap:12px;min-height:76px;padding:12px 16px;border-radius:20px;background:var(--card);border:1px solid var(--line);text-decoration:none;transition:border-color .2s ease,transform .25s var(--ease)}
.tlinks .tli{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:none;background:linear-gradient(135deg,#9A6A12,#F7DF97 45%,#D9A63A);color:#2A1D05}
.tlinks .tli svg{width:19px;height:19px}
.tlinks b{display:block;font-weight:800;font-size:16px;line-height:1.25}
.tlinks small{display:block;color:var(--dim);font-size:13px;line-height:1.35}
@media (hover:hover) and (pointer:fine){.tlinks a:hover{border-color:var(--g2);transform:translateY(-2px)}}
@media (max-width:980px){.tlinks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.tlinks{grid-template-columns:1fr}}

/* the signup window for a training (popup.css + the AbraSignup flow) */
.tgate .pop-intro{display:flex;flex-direction:column;gap:10px}
.demo-states a{min-height:36px;display:inline-flex;align-items:center;padding-inline:6px;color:var(--dim)}
.wa-panel .b a{color:#0F5D52;font-weight:700}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important}.tp-btn,.tlinks a,.tchip,.o3-card,.o2-row::after,.o2-cov img,.toast{transition:none!important}}