/* ============================================================
   BaClick.app — מערכת העיצוב של אתר הרשת
   ------------------------------------------------------------
   קובץ אחד לכל דפי baclick.app: בית, מדריכים, בלוג, מדיניות.
   עד עכשיו כל הסגנון ישב inline בתוך index.html — מה שאִפשר
   דף אחד בלבד. אתר עם 20 דפים חייב מקור סגנון משותף, אחרת
   כל דף חדש נראה כמו אתר אחר.

   RTL הוא ברירת המחדל, לא תוספת: כל המרווחים משתמשים
   ב-inline-start/end ולא ב-left/right, כך שהיפוך כיוון אינו
   דורש גיליון שני.
   ============================================================ */

/* ------------------------------------------------------------
   הפלטה מגיעה מ-tokens.generated.css (--bc-*), שנוצר מ-
   shared/tokens.json. השמות המקומיים נשמרו כי כל הגיליון הזה
   נכתב מולם — הפניה אחת במקום מאה עריכות.

   הצבע עצמו התחלף: כחול ‎#2563eb, שהיה זהה למחציות הישן, למערכת
   השעות הישנה ולברירת המחדל של חצי מהאינטרנט, הוחלף באינדיגו→סגול.
   ההורה חייב להיות מובחן מארבעת הילדים — הוא גם המשטח שנושא את
   המודעות, ומשטח שנראה כמו אחד המוצרים מבלבל בין תוכן לפרסום.

   אין כאן בלוק prefers-color-scheme: הוא יושב ב-tokens.generated.css
   (‏darkMode: "media" ב-tokens.json), כי לאתר תוכן סטטי אין מתג.
   ------------------------------------------------------------ */
:root {
    /* ⚠️ שני תפקידים שונים, ולכן שני טוקנים.
       ‏--primary הוא *טקסט וגבול*: במצב לילה --bc-brand הוא סגול-500,
       שנותן 4.42:1 על הרקע הכהה ו-3.54:1 על הגלולה הרכה — שניהם
       מתחת לרף. ‏--bc-brand-ink בנוי בדיוק לזה ועובר בשתי הערכות.
       ‏--primary-fill הוא *מילוי* שנושא טקסט לבן, ולכן הוא הטוקן
       שאינו מתהפך בין ערכות. */
    --primary:        var(--bc-brand-ink);
    --primary-fill:   var(--bc-btn-brand-a);
    --primary-dark:   var(--bc-btn-brand-b);
    --primary-soft:   var(--bc-brand-soft);
    --ink:            var(--bc-ink);
    --ink-2:          var(--bc-ink-2);
    --muted:          var(--bc-ink-dim);
    --line:           var(--bc-line);
    --bg:             var(--bc-bg);
    --surface:        var(--bc-surface);
    --surface-2:      var(--bc-surface-2);
    --surface-3:      var(--bc-surface-3);
    --shadow:         var(--bc-sh-1);
    --shadow-md:      var(--bc-sh-2);
    --shadow-lg:      var(--bc-sh-3);
    --radius:         var(--bc-r-md);
    --wrap:           1080px;
    --wrap-narrow:    720px;
    --font: 'Rubik', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
    margin: 0;
    font-family: var(--font);
    background: var(--bg);
    color: var(--ink);
    line-height: 1.7;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* מיקוד נראה לעין — ניווט מקלדת הוא חלק מהנגישות, ובלעדיו
   הסורק האוטומטי של גוגל מדווח על בעיית נגישות. */
:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* קישור דילוג — ראשון בסדר ה-DOM, נראה רק במיקוד */
.skip {
    position: absolute; inset-inline-start: -9999px; top: 0; z-index: 999;
    background: var(--primary-fill); color: #fff; padding: .7rem 1.2rem;
    border-radius: 0 0 var(--radius) 0; font-weight: 700;
}
.skip:focus { inset-inline-start: 0; }

/* ============================================================
   כותרת עליונה + ניווט
   ------------------------------------------------------------
   הניווט הוא HTML סטטי בכל דף ולא נבנה ב-JS. הסורק של AdSense
   מריץ JS אך אינו מבטיח זאת — תפריט שנבנה בסקריפט הוא תפריט
   שעלול לא להיספר כניווט אתר בכלל.
   ============================================================ */
.site-head {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 100;
}
.head-in {
    max-width: var(--wrap); margin: 0 auto; padding: .85rem 1.2rem;
    display: flex; align-items: center; gap: 1rem;
}
.brand {
    font-size: 1.5rem; font-weight: 800; color: var(--primary);
    text-decoration: none; white-space: nowrap;
}
.brand span { color: var(--ink); }
.brand:hover { text-decoration: none; }

.nav { display: flex; gap: .3rem; margin-inline-start: auto; align-items: center; }
.nav a {
    color: var(--ink-2); font-weight: 600; font-size: .95rem;
    padding: .5rem .8rem; border-radius: 9px; text-decoration: none;
    transition: background .16s, color .16s;
}
.nav a:hover { background: var(--surface-2); color: var(--primary); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--primary); background: var(--primary-soft); }

.nav-toggle {
    display: none; margin-inline-start: auto;
    background: var(--surface-2); border: 1px solid var(--line); color: var(--ink);
    width: 42px; height: 42px; border-radius: 10px; cursor: pointer;
    font-size: 1.2rem; line-height: 1;
}

@media (max-width: 860px) {
    .nav-toggle { display: block; }
    .nav {
        display: none; position: absolute; inset-inline: 0; top: 100%;
        flex-direction: column; align-items: stretch; gap: 0;
        background: var(--surface); border-bottom: 1px solid var(--line);
        padding: .5rem 1.2rem 1rem; box-shadow: var(--shadow);
    }
    .nav.is-open { display: flex; }
    .nav a { padding: .8rem .6rem; border-radius: 8px; }
}

/* ============================================================
   מבנה עמוד
   ============================================================ */
main { flex: 1; width: 100%; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 2.5rem 1.2rem; }
.wrap-narrow { max-width: var(--wrap-narrow); margin: 0 auto; padding: 2.5rem 1.2rem; }

h1, h2, h3, h4 { line-height: 1.3; color: var(--ink); font-weight: 800; }
h1 { font-size: clamp(1.8rem, 4.5vw, 2.6rem); margin: 0 0 .8rem; letter-spacing: -.02em; }
h2 { font-size: clamp(1.35rem, 3vw, 1.75rem); margin: 2.4rem 0 .8rem; }
h3 { font-size: 1.2rem; margin: 1.8rem 0 .6rem; }
p  { margin: 0 0 1.1rem; color: var(--ink-2); }

.lead { font-size: 1.15rem; color: var(--muted); margin-bottom: 2rem; }

/* פס עליון של דפי משנה — מחליף hero כבד בדפים שאינם הבית */
.page-head {
    background: var(--surface); border-bottom: 1px solid var(--line);
    padding: 2.4rem 1.2rem 2rem; text-align: center;
}
.page-head .wrap-narrow { padding: 0 auto; }
.page-head h1 { margin-bottom: .5rem; }
.page-head p  { color: var(--muted); max-width: 620px; margin: 0 auto; }

/* פירורי לחם — גם לקורא וגם ל-BreadcrumbList ב-schema */
.crumbs {
    max-width: var(--wrap); margin: 0 auto; padding: .9rem 1.2rem 0;
    font-size: .85rem; color: var(--muted);
}
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--primary); }
.crumbs span { margin: 0 .35rem; opacity: .6; }

/* ============================================================
   טיפוגרפיה של מאמר
   ------------------------------------------------------------
   רוחב שורה מוגבל ל-720px. שורה ארוכה יותר מאבדת את העין
   בחזרה לתחילת השורה הבאה — וזה מוכפל בעברית, שבה אין
   אותיות גדולות שמסמנות תחילת משפט.
   ============================================================ */
.prose { font-size: 1.06rem; }
.prose > * + * { margin-top: 1.1rem; }
.prose h2 { border-bottom: 1px solid var(--line); padding-bottom: .45rem; }
.prose ul, .prose ol { padding-inline-start: 1.4rem; color: var(--ink-2); margin: 0 0 1.1rem; }
.prose li { margin-bottom: .5rem; }
.prose blockquote {
    margin: 1.6rem 0; padding: .9rem 1.2rem;
    border-inline-start: 4px solid var(--primary);
    background: var(--surface-2); border-radius: 0 var(--radius) var(--radius) 0;
    color: var(--ink-2); font-style: italic;
}
.prose code {
    background: var(--surface-2); padding: .15em .45em; border-radius: 5px;
    font-size: .9em; direction: ltr; display: inline-block;
}
.prose table { width: 100%; border-collapse: collapse; margin: 1.4rem 0; font-size: .95rem; }
.prose th, .prose td { border: 1px solid var(--line); padding: .6rem .8rem; text-align: start; }
.prose th { background: var(--surface-2); font-weight: 700; }
.table-scroll { overflow-x: auto; }

.prose hr { border: none; border-top: 1px solid var(--line); margin: 2.2rem 0; }

/* ============================================================
   רכיבים
   ============================================================ */
.card {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow);
}

.btn {
    display: inline-block; background: var(--primary-fill); color: #fff;
    padding: .8rem 1.5rem; border-radius: 10px; font-weight: 700;
    text-decoration: none; border: none; cursor: pointer; font: inherit;
    font-weight: 700; transition: background .16s, transform .16s;
}
.btn:hover { background: var(--primary-dark); text-decoration: none; transform: translateY(-1px); color: #fff; }
.btn-ghost {
    background: transparent; color: var(--primary);
    border: 1.5px solid var(--primary);
}
.btn-ghost:hover { background: var(--primary-soft); color: var(--primary); }

.grid { display: grid; gap: 1.4rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.note {
    background: var(--primary-soft); border: 1px solid var(--line);
    border-inline-start: 4px solid var(--primary);
    border-radius: var(--radius); padding: 1rem 1.2rem; margin: 1.6rem 0;
}
.note p:last-child { margin-bottom: 0; }

.meta { font-size: .85rem; color: var(--muted); }

/* ============================================================
   כותרת תחתונה
   ------------------------------------------------------------
   מפת אתר מלאה ולא שורת זכויות יוצרים. זה גם מה שנותן לגוגל
   קישור פנימי לכל דף מדיניות מכל דף באתר.
   ============================================================ */
.site-foot {
    background: var(--surface); border-top: 1px solid var(--line);
    margin-top: 4rem; padding: 2.5rem 1.2rem 1.5rem;
}
.foot-in {
    max-width: var(--wrap); margin: 0 auto;
    display: grid; gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.foot-col h4 {
    font-size: .82rem; letter-spacing: .06em; text-transform: uppercase;
    color: var(--muted); margin: 0 0 .9rem; font-weight: 800;
}
.foot-col ul { list-style: none; padding: 0; margin: 0; }
.foot-col li { margin-bottom: .55rem; }
.foot-col a { color: var(--ink-2); font-size: .93rem; }
.foot-col a:hover { color: var(--primary); }
.foot-col p { font-size: .9rem; color: var(--muted); }

.foot-bottom {
    max-width: var(--wrap); margin: 2rem auto 0; padding-top: 1.3rem;
    border-top: 1px solid var(--line);
    display: flex; flex-wrap: wrap; gap: .6rem 1.2rem;
    justify-content: space-between; align-items: center;
    font-size: .85rem; color: var(--muted);
}
.foot-bottom p { margin: 0; color: var(--muted); }

.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;
}

/* ============================================================
   "השורה התחתונה" — פסק דין בראש ביקורת
   ------------------------------------------------------------
   קורא מובייל שמגיע משאילתת "האם X שווה" רוצה תשובה בחמש
   שניות. הקופסה הזאת נותנת אותה לפני הנימוקים, ומי שרוצה את
   הנימוקים ממשיך לגלול.

   מובחנת מ-.note בכוונה: .note הוא הערה בתוך הזרימה, וזו
   מסקנה שעומדת מעליה. לכן מסגרת מלאה ולא פס צד אחד.
   ============================================================ */
.btmline {
    background: var(--surface);
    border: 2px solid var(--primary);
    border-radius: var(--radius);
    padding: 1.3rem 1.4rem 1.1rem;
    margin: 1.8rem 0 2.2rem;
    box-shadow: var(--shadow-lg);
}
.btmline-tag {
    display: inline-block;
    margin: 0 0 .7rem;
    padding: .22rem .8rem;
    background: var(--primary-fill);
    color: #fff;
    border-radius: 100px;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .05em;
}
.btmline > p:last-child,
.btmline > ul:last-child,
.btmline > ol:last-child { margin-bottom: 0; }
.btmline ul { margin-bottom: .6rem; }
.btmline li { margin-bottom: .35rem; }

/* ============================================================
   טבלת השוואה
   ------------------------------------------------------------
   העמודה הראשונה היא th עם scope="row" — שם המוצר הוא הכותרת
   של השורה, לא עוד תא. זה מה שמאפשר לקורא מסך להכריז "אייר
   פרייר B, מחיר, 749" במקום "749" בלי הקשר.

   השורה המנצחת מסומנת גם ברקע וגם בפס צד: הסתמכות על צבע
   בלבד נכשלת אצל 8% מהגברים.
   ============================================================ */
.cmp-wrap { overflow-x: auto; margin: 1.5rem 0 2rem; }

table.cmp {
    width: 100%;
    border-collapse: collapse;
    font-size: .93rem;
    min-width: 480px;
}
table.cmp th, table.cmp td {
    border: 1px solid var(--line);
    padding: .65rem .8rem;
    text-align: start;
    vertical-align: top;
}
table.cmp thead th {
    background: var(--surface-2);
    color: var(--ink);
    font-weight: 800;
    white-space: nowrap;
}
table.cmp tbody th[scope="row"] {
    background: var(--surface);
    color: var(--ink);
    font-weight: 700;
}
table.cmp tbody tr:nth-child(even) td { background: rgba(127, 127, 127, .04); }

table.cmp tr.is-win th[scope="row"],
table.cmp tr.is-win td {
    background: var(--primary-soft);
    font-weight: 600;
}
table.cmp tr.is-win th[scope="row"] {
    border-inline-start: 4px solid var(--primary);
    font-weight: 800;
}

@media (max-width: 480px) {
    table.cmp { font-size: .86rem; }
    table.cmp th, table.cmp td { padding: .5rem .6rem; }
}

/* ============================================================
   רשת המשחקים — סטטית לחלוטין
   ------------------------------------------------------------
   הקרוסלה הקודמת דרשה JavaScript, מאזיני גלילה, וטיפול ב-RTL
   שבו scrollLeft שלילי בחלק מהדפדפנים. הרשת הזו לא דורשת דבר:
   auto-fill פורש את הכרטיסים לפי הרוחב הזמין, ובמסך צר הם
   נערמים מעצמם. אפס JS, אפס בקשות, והכול נגיש לסורק.
   ============================================================ */
.game-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: .7rem;
    margin: 1.2rem 0 1.8rem;
}
.game-card {
    display: flex; flex-direction: column; gap: .3rem;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 12px; padding: .85rem .8rem;
}
.game-ic { font-size: 1.5rem; line-height: 1; }
.game-nm { font-weight: 700; font-size: .9rem; color: var(--ink); line-height: 1.3; }
.game-tg { font-size: .78rem; color: var(--muted); line-height: 1.4; }

/* הוראות המשחק וההוק — הגיעו מ-games-info.js כשהקטלוג הפך נגזר.
   הכרטיס גדל, ולכן הרשת רחבה יותר (ר' .game-grid למעלה): שלוש
   שורות הוראות ברוחב 155px היו יוצאות עמודה של מילה אחת. */
.game-rules {
    list-style: none; margin: .15rem 0 0; padding: 0;
    display: flex; flex-direction: column; gap: .18rem;
}
.game-rules li { font-size: .74rem; color: var(--muted); line-height: 1.45; }
.game-hook {
    margin: .3rem 0 0; font-size: .74rem; line-height: 1.45;
    color: var(--ink); opacity: .82; font-style: italic;
}

@media (max-width: 420px) {
    .game-grid { grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); gap: .55rem; }
    .game-card { padding: .7rem .65rem; }
}


/* ============================================================
   שלב 6 — עיצוב אתר הרשת  ·  13.8.2026
   ------------------------------------------------------------
   מה שהיה כאן: כותרת טקסט על משטח שטוח, שישה קישורים זהים
   בניווט, וכרטיסים שהם שלוש שורות טקסט בקופסה. הבעיה לא הייתה
   הצבע — היא שדף אחד לא סיפר לאיש לאיזה משלושת הקהלים הוא שייך.

   כל מה שכאן עובד בלי תמונה אחת. שכבת התמונות היא שלב נפרד,
   והיא חסומה על צילומי המסך — אבל האתר לא צריך לחכות לה כדי
   להפסיק להיראות כמו מסמך.
   ============================================================ */

/* ============================================================
   כותרת עליונה — מצב גלילה
   ============================================================ */
.site-head {
    transition: padding .22s var(--bc-ease-standard),
                box-shadow .22s var(--bc-ease-standard),
                background .22s var(--bc-ease-standard);
    backdrop-filter: saturate(1.4) blur(10px);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    background: color-mix(in srgb, var(--bc-surface) 88%, transparent);
}
.site-head.is-stuck {
    box-shadow: var(--bc-sh-2);
    border-bottom-color: transparent;
}
.site-head.is-stuck .head-in { padding-block: .55rem; }

.brand {
    background: linear-gradient(100deg, var(--bc-brand-lit), var(--bc-brand-strong));
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
}
.brand span { color: var(--bc-ink); -webkit-text-fill-color: var(--bc-ink); }

/* ============================================================
   ניווט ארבע דלתות
   ------------------------------------------------------------
   שישה קישורים באותו משקל אמרו לגולש בדיוק כלום. הרשת מוכרת
   ארבעה מוצרים לארבעה קהלים שונים, והמקום היחיד שבו כולם
   נפגשים הוא הדף הזה — אז כאן צריך להיאמר במי מדובר.

   פותח ב-hover וב-focus-within: מקלדת מקבלת את אותו תפריט,
   בלי JS. בנייד הוא נפתח בתוך המגירה הקיימת ולא כשכבה שנייה.
   ============================================================ */
.nav-has { position: relative; }

.nav-doors {
    position: absolute; inset-inline-end: 0; top: calc(100% + .5rem);
    z-index: 120;
    display: grid; grid-template-columns: repeat(2, minmax(0, 15rem));
    gap: .4rem; padding: .5rem;
    background: var(--bc-surface);
    border: 1px solid var(--bc-line);
    border-radius: var(--bc-r-lg);
    box-shadow: var(--bc-sh-3);
    opacity: 0; visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .18s var(--bc-ease-standard),
                transform .18s var(--bc-ease-standard),
                visibility .18s;
}
.nav-has:hover .nav-doors,
.nav-has:focus-within .nav-doors {
    opacity: 1; visibility: visible; transform: none;
}

.door {
    display: grid; grid-template-columns: 2.4rem 1fr;
    align-items: center; gap: .7rem;
    padding: .7rem .8rem;
    border-radius: var(--bc-r-md);
    text-decoration: none;
    border: 1px solid transparent;
    transition: background .16s, border-color .16s, transform .16s;
}
.door:hover { text-decoration: none; transform: translateY(-1px); }
.door-ic {
    width: 2.4rem; height: 2.4rem;
    display: grid; place-items: center;
    font-size: 1.25rem; border-radius: var(--bc-r-sm);
}
.door-n { display: block; font-weight: 800; font-size: .95rem; color: var(--bc-ink); line-height: 1.25; }
.door-s { display: block; font-size: .78rem; color: var(--bc-ink-dim); line-height: 1.4; margin-top: .1rem; }

/* כל דלת נושאת את הצבע האמיתי של המוצר שמאחוריה */
.door[data-app="games"]    .door-ic { background: var(--bc-app-games-soft);    color: var(--bc-app-games); }
.door[data-app="machziot"] .door-ic { background: var(--bc-app-machziot-soft); color: var(--bc-app-machziot); }
.door[data-app="kniyot"]   .door-ic { background: var(--bc-app-kniyot-soft);   color: var(--bc-app-kniyot); }
.door[data-app="schedule"] .door-ic { background: var(--bc-app-schedule-soft); color: var(--bc-app-schedule); }
.door[data-app="games"]:hover    { background: var(--bc-app-games-soft);    border-color: var(--bc-app-games); }
.door[data-app="machziot"]:hover { background: var(--bc-app-machziot-soft); border-color: var(--bc-app-machziot); }
.door[data-app="kniyot"]:hover   { background: var(--bc-app-kniyot-soft);   border-color: var(--bc-app-kniyot); }
.door[data-app="schedule"]:hover { background: var(--bc-app-schedule-soft); border-color: var(--bc-app-schedule); }

.nav-has > a::after {
    content: '▾'; font-size: .7em; margin-inline-start: .3rem;
    opacity: .55; display: inline-block;
}

@media (max-width: 860px) {
    /* בנייד אין ריחוף. הדלתות נפרשות בתוך המגירה כרשימה רגילה. */
    .nav-doors {
        position: static; opacity: 1; visibility: visible; transform: none;
        grid-template-columns: 1fr; box-shadow: none; border: none;
        background: transparent; padding: .2rem 0 .4rem;
    }
    .nav-has > a::after { display: none; }
}

/* ============================================================
   Hero
   ------------------------------------------------------------
   שלוש שכבות, אפס תמונות: שדה אורורה שנע לאט, כותרת בגרדיאנט,
   ורצועת מספרים אמיתיים. המספרים נלקחים מהתוכן עצמו — לא
   הומצאה כאן אף טענה.
   ============================================================ */
.hero {
    position: relative; overflow: hidden;
    padding: clamp(3rem, 8vw, 6rem) 1.2rem clamp(2.5rem, 6vw, 4.5rem);
    text-align: center;
    border-bottom: 1px solid var(--bc-line);
    background: var(--bc-bg);
}
.hero::before,
.hero::after {
    content: ''; position: absolute; pointer-events: none;
    width: 46rem; height: 46rem; border-radius: 50%;
    filter: blur(70px); opacity: .5;
}
.hero::before {
    inset-inline-end: -14rem; top: -22rem;
    background: radial-gradient(circle, var(--bc-brand-lit), transparent 62%);
    animation: heroDriftA 34s var(--bc-ease-standard) infinite alternate;
}
.hero::after {
    inset-inline-start: -16rem; bottom: -26rem;
    background: radial-gradient(circle, var(--bc-brand-strong), transparent 62%);
    animation: heroDriftB 42s var(--bc-ease-standard) infinite alternate;
}
@keyframes heroDriftA { to { transform: translate3d(-3rem, 2.5rem, 0) scale(1.12); } }
@keyframes heroDriftB { to { transform: translate3d(2.5rem, -2rem, 0) scale(1.08); } }

.hero-in { position: relative; z-index: 1; max-width: 52rem; margin: 0 auto; }

.hero-eyebrow {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .3rem .85rem; margin-bottom: 1.1rem;
    border-radius: var(--bc-r-pill);
    background: var(--bc-brand-wash);
    border: 1px solid var(--bc-brand-soft);
    color: var(--bc-brand-ink);
    font-size: .8rem; font-weight: 700;
}

.hero h1 {
    font-size: clamp(2.2rem, 7vw, 4rem);
    line-height: 1.08; font-weight: 900; letter-spacing: -.03em;
    margin: 0 0 1rem;
}
.hero h1 em {
    font-style: normal;
    background: linear-gradient(100deg, var(--bc-brand-lit), var(--bc-brand-strong));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub {
    font-size: clamp(1rem, 2.2vw, 1.2rem);
    color: var(--bc-ink-2); line-height: 1.65;
    max-width: 44rem; margin: 0 auto;
}

.hero-cta { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin-top: 1.8rem; }

/* רצועת מספרים */
.hero-stats {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 0 clamp(1.2rem, 5vw, 3rem);
    margin-top: 2.4rem; padding-top: 1.6rem;
    border-top: 1px solid var(--bc-line);
}
.hero-stat { text-align: center; padding: .3rem .2rem; }
.hero-stat b {
    display: block; font-size: clamp(1.4rem, 3.4vw, 2rem); font-weight: 900;
    color: var(--bc-ink); letter-spacing: -.02em; line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.hero-stat span { font-size: .8rem; color: var(--bc-ink-dim); font-weight: 500; }

/* ============================================================
   כותרת מדור
   ============================================================ */
.sec-head { display: flex; align-items: baseline; gap: .8rem; margin: 0 0 1.4rem; flex-wrap: wrap; }
.sec-head h2 { margin: 0; font-size: clamp(1.4rem, 3vw, 1.9rem); letter-spacing: -.02em; }
.sec-head .sec-more { margin-inline-start: auto; font-size: .9rem; font-weight: 700; }
.sec-eyebrow {
    display: block; font-size: .78rem; font-weight: 800; letter-spacing: .08em;
    color: var(--bc-brand-ink); text-transform: uppercase; margin-bottom: .3rem;
}

/* ============================================================
   כרטיס תוכן עשיר
   ------------------------------------------------------------
   הכרטיס הקודם היה שלוש שורות טקסט בקופסה, בלי מצב ריחוף בכלל.
   כאן: כיסוי שנוצר בזמן בנייה (גרדיאנט + סמל לפי קטגוריה), שבב
   קטגוריה, כותרת, תקציר, ורגל עם מחבר וזמן קריאה.

   הכיסוי נוצר ואינו נטען: אפס בקשות רשת, ואין מצב ביניים שבו
   חצי מהרשת עם תמונה וחצי בלי — שזה בדיוק מה שגורם לרשת
   כרטיסים להיראות שבורה.
   ============================================================ */
/* ⚠️ ‎.card נשאר כפי שהוא. אותה מחלקה משמשת גם את תוכן העניינים,
   דף הכותבים, דף 404 וקופסאות בתוך ה-Markdown — איפוס הריפוד שלה
   היה מרסק את כולם. הכרטיס העשיר הוא מחלקה נוספת ולא דריסה. */
.card-rich {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column;
    padding: 0;
    border-radius: var(--bc-r-lg);
    transition: transform .26s var(--bc-ease-out),
                box-shadow .26s var(--bc-ease-out),
                border-color .26s var(--bc-ease-out);
}
.card-rich::after {
    content: ''; position: absolute; inset-block-start: 0; inset-inline: 0;
    height: 2px; width: 0;
    background: linear-gradient(90deg, var(--bc-brand-lit), var(--bc-brand-strong));
    transition: width .3s var(--bc-ease-out);
}
.card-rich:hover,
.card-rich:focus-within {
    transform: translateY(-6px);
    box-shadow: var(--bc-sh-3);
    border-color: color-mix(in srgb, var(--bc-brand) 35%, var(--bc-line));
}
.card-rich:hover::after,
.card-rich:focus-within::after { width: 100%; }

.card-cover {
    position: relative; overflow: hidden;
    aspect-ratio: 16 / 9;
    display: grid; place-items: center;
    font-size: 2.6rem; line-height: 1;
    border-bottom: 1px solid var(--bc-line);
}
.card-cover span { position: relative; z-index: 1; opacity: .92;
                   transition: transform .4s var(--bc-ease-out); }
.card-rich:hover .card-cover span { transform: scale(1.12) rotate(-3deg); }

.card-chip {
    position: absolute; z-index: 2;
    inset-block-start: .6rem; inset-inline-start: .6rem;
    padding: .18rem .6rem; border-radius: var(--bc-r-pill);
    background: color-mix(in srgb, var(--bc-surface) 85%, transparent);
    border: 1px solid var(--bc-line);
    font-size: .7rem; font-weight: 800; color: var(--bc-ink-2);
    backdrop-filter: blur(6px);
}

.card-body { padding: 1.1rem 1.2rem 1.2rem; display: flex; flex-direction: column; flex: 1; }
.card-body h3 { margin: 0 0 .45rem; font-size: 1.12rem; line-height: 1.35; letter-spacing: -.01em; }
.card-body h3 a { color: var(--bc-ink); text-decoration: none; }
.card-rich:hover .card-body h3 a { color: var(--bc-brand-ink); }
.card-body > p {
    margin: 0; color: var(--bc-ink-2); font-size: .93rem; line-height: 1.6;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.card-foot {
    display: flex; align-items: center; gap: .5rem;
    margin-top: auto; padding-top: .9rem;
    font-size: .8rem; color: var(--bc-ink-dim);
}
.card-av {
    width: 1.6rem; height: 1.6rem; flex: none;
    display: grid; place-items: center; border-radius: 50%;
    background: var(--bc-brand-soft); color: var(--bc-brand-ink);
    font-size: .72rem; font-weight: 800;
}
.card-read {
    margin-inline-start: auto; flex: none;
    padding: .1rem .5rem; border-radius: var(--bc-r-pill);
    background: var(--bc-surface-2); font-weight: 700; font-size: .72rem;
}


/* ---------- וריאציות הכיסוי הנוצר ----------
   ארבעה גרדיאנטים, נבחרים לפי אשליית ה-slug. המטרה היא שרשת
   כרטיסים לא תיראה מונוטונית, בלי שאף כרטיס ייראה חריג. */
.card-cover[data-v="0"] { background: linear-gradient(140deg, var(--bc-brand-wash), var(--bc-brand-soft)); }
.card-cover[data-v="1"] { background: linear-gradient(140deg, var(--bc-accent-wash), var(--bc-accent-soft)); }
.card-cover[data-v="2"] { background: linear-gradient(140deg, var(--bc-success-wash), var(--bc-success-soft)); }
.card-cover[data-v="3"] { background: linear-gradient(140deg, var(--bc-surface-2), var(--bc-brand-soft)); }
.card-cover.has-img { display: block; }
.card-cover.has-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   דלתות המוצרים בדף הבית
   ============================================================ */
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.app-card {
    position: relative; overflow: hidden;
    display: block; padding: 1.4rem 1.3rem;
    background: var(--bc-surface);
    border: 1px solid var(--bc-line);
    border-radius: var(--bc-r-lg);
    box-shadow: var(--bc-sh-1);
    text-decoration: none;
    transition: transform .24s var(--bc-ease-out), box-shadow .24s var(--bc-ease-out), border-color .24s;
}
.app-card::before {
    content: ''; position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px;
    background: var(--app, var(--bc-brand));
}
.app-card::after {
    content: ''; position: absolute; inset-block-start: -40%; inset-inline-end: -30%;
    width: 16rem; height: 16rem; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, var(--app, var(--bc-brand)), transparent 66%);
    opacity: .09; transition: opacity .26s;
}
.app-card:hover {
    transform: translateY(-5px); box-shadow: var(--bc-sh-3);
    border-color: var(--app, var(--bc-brand)); text-decoration: none;
}
.app-card:hover::after { opacity: .18; }

.app-ic {
    width: 2.9rem; height: 2.9rem; margin-bottom: .8rem;
    display: grid; place-items: center; font-size: 1.5rem;
    border-radius: var(--bc-r-md);
    background: color-mix(in srgb, var(--app, var(--bc-brand)) 14%, transparent);
}
.app-card h3 { margin: 0 0 .35rem; font-size: 1.08rem; color: var(--app, var(--bc-brand)); }
.app-card p  { margin: 0; font-size: .9rem; color: var(--bc-ink-2); line-height: 1.6; }
.app-who {
    display: inline-block; margin-top: .8rem;
    font-size: .76rem; font-weight: 700; color: var(--bc-ink-dim);
}
.app-card[data-app="games"]    { --app: var(--bc-app-games); }
.app-card[data-app="machziot"] { --app: var(--bc-app-machziot); }
.app-card[data-app="kniyot"]   { --app: var(--bc-app-kniyot); }
.app-card[data-app="schedule"] { --app: var(--bc-app-schedule); }

/* ============================================================
   יחידת פרסום
   ------------------------------------------------------------
   הגובה שמור מראש, והתווית מעל. יחידה שלא התמלאה מתקפלת לאפס
   במקום להשאיר מסגרת ריקה — וזה יקרה הרבה עד שהאתר יאושר,
   כך שזו לא אופטימיזציה תיאורטית.

   ⚠️ המזהים אינם כאן. הם נוצרים בלוח הבקרה של AdSense, ועד
   שיוזנו היחידה לא תתמלא. המבנה מוכן; המספרים לא שלי.
   ============================================================ */
.ad-slot {
    margin: 2.4rem auto; max-width: var(--wrap);
    padding-inline: 1.2rem;
}
.ad-slot-in {
    min-height: 100px;
    display: grid; place-items: center;
    border-radius: var(--bc-r-md);
    background: var(--bc-surface-2);
    border: 1px solid var(--bc-line);
    overflow: hidden; contain: layout;
}
.ad-slot-tag {
    display: block; margin-bottom: .35rem;
    font-size: .7rem; font-weight: 700; letter-spacing: .06em;
    color: var(--bc-ink-dim); text-align: center;
}
.ad-slot ins.adsbygoogle { display: block; width: 100%; }
.ad-slot.is-empty { display: none; }

/* ============================================================
   חשיפה בגלילה
   ============================================================ */
.reveal { opacity: 0; transform: translateY(12px); }
.reveal.is-in {
    opacity: 1; transform: none;
    transition: opacity .5s var(--bc-ease-out), transform .5s var(--bc-ease-out);
}

@media (prefers-reduced-motion: reduce) {
    .hero::before, .hero::after { animation: none; }
    .card-rich:hover, .card-rich:focus-within, .app-card:hover { transform: none; }
    .card-rich:hover .card-cover span { transform: none; }
    .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   באנר ההסכמה
   ------------------------------------------------------------
   נכנס מלמטה ולא כשכבה שמכסה את המסך: חסימת התוכן עד ללחיצה
   היא בדיוק מה שמכשיל דפים בבדיקת AdSense — הסורק רואה דף
   ריק מאחורי שכבה אטומה.

   שני הכפתורים באותו משקל חזותי. "רק ההכרחיות" מוצג ראשון
   ואינו מוסתר או מוחלש — הסכמה שנכפית בעיצוב אינה הסכמה.
   ============================================================ */
.cc-bar {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 900;
    background: var(--surface); border-top: 1px solid var(--line);
    box-shadow: 0 -8px 30px rgba(0,0,0,.14);
    transform: translateY(105%); transition: transform .22s ease-out;
}
.cc-bar.is-in { transform: translateY(0); }

.cc-in {
    max-width: var(--wrap); margin: 0 auto;
    padding: 1rem 1.2rem;
    display: flex; flex-wrap: wrap; align-items: center;
    gap: .8rem 1.4rem; justify-content: space-between;
}
.cc-txt {
    margin: 0; font-size: .92rem; color: var(--ink-2);
    flex: 1 1 320px; line-height: 1.55;
}
.cc-btns { display: flex; gap: .6rem; flex-wrap: wrap; }
.cc-b {
    font: inherit; font-weight: 700; font-size: .92rem;
    padding: .6rem 1.2rem; border-radius: 9px; cursor: pointer;
    border: 1.5px solid var(--primary); white-space: nowrap;
}
.cc-no  { background: transparent;   color: var(--primary); }
.cc-yes { background: var(--primary-fill); color: #fff; }
.cc-no:hover  { background: var(--primary-soft); }
.cc-yes:hover { background: var(--primary-dark); }

@media (max-width: 560px) {
    .cc-btns { width: 100%; }
    .cc-b { flex: 1; text-align: center; }
}

/* ============================================================
   חלון "בקרוב" — תוכנית הבודקים
   ------------------------------------------------------------
   בטוקנים הקיימים בלבד, כדי שהמצב הכהה (prefers-color-scheme)
   יעבוד עליו בלי שורה נוספת.
   ============================================================ */
.soon-back {
    position: fixed; inset: 0; z-index: 90;
    display: flex; align-items: center; justify-content: center;
    padding: 1.2rem;
    background: rgba(15, 23, 42, .55);
    opacity: 0; transition: opacity .2s ease;
    overflow-y: auto;
}
.soon-back.is-in { opacity: 1; }

.soon-box {
    position: relative;
    width: 100%; max-width: 520px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 1.8rem 1.5rem 1.4rem;
    transform: translateY(10px);
    transition: transform .2s ease;
}
.soon-back.is-in .soon-box { transform: none; }

.soon-x {
    position: absolute; inset-block-start: .7rem; inset-inline-end: .7rem;
    width: 2rem; height: 2rem; line-height: 1;
    font: inherit; font-size: 1rem; color: var(--muted);
    background: transparent; border: 0; border-radius: 8px; cursor: pointer;
}
.soon-x:hover { background: var(--surface-2); color: var(--ink); }

.soon-tag {
    margin: 0 0 .4rem;
    font-size: .78rem; font-weight: 700; letter-spacing: .04em;
    color: var(--primary);
}
.soon-box h2 { margin: 0 0 .6rem; font-size: 1.3rem; line-height: 1.3; }
.soon-box p  { margin: 0 0 .9rem; color: var(--ink-2); line-height: 1.6; font-size: .96rem; }

.soon-offer {
    background: var(--primary-soft);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 1rem 1.1rem .6rem;
    margin: 1.1rem 0;
}
.soon-offer-h { font-weight: 800; color: var(--ink); margin-bottom: .5rem !important; }
.soon-offer ul { margin: .2rem 0 .8rem; padding-inline-start: 1.1rem; }
.soon-offer li { color: var(--ink-2); font-size: .92rem; margin-bottom: .3rem; }

.soon-form { display: grid; gap: .6rem; margin-top: 1rem; }
.soon-form input {
    font: inherit; font-size: .95rem;
    padding: .7rem .9rem;
    color: var(--ink);
    background: var(--surface);
    border: 1.5px solid var(--line);
    border-radius: 10px;
}
.soon-form input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}
.soon-form .btn { width: 100%; text-align: center; }

.soon-note { font-size: .82rem !important; color: var(--muted) !important; margin: .8rem 0 0 !important; }

@media (max-width: 520px) {
    .soon-box { padding: 1.5rem 1.1rem 1.1rem; }
    .soon-box h2 { font-size: 1.15rem; }
}

/* ============================================================
   טופס הרשמה לתוכנית הבודקים (testers1.html)
   ============================================================ */
.tsr-wrap {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 1.4rem;
    margin: 1.5rem 0 2rem;
}
.tsr { display: grid; gap: .55rem; }
.tsr label { font-weight: 800; color: var(--ink); font-size: .96rem; }
.tsr input[type="email"] {
    font: inherit; font-size: 1rem;
    padding: .8rem .9rem;
    color: var(--ink);
    background: var(--bg);
    border: 1.5px solid var(--line);
    border-radius: 10px;
}
.tsr input[type="email"]:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}
/* מלכודת בוטים. בלי מיקום מחוץ למסך (left:-9999px) — ב-RTL זה מרחיב את
   רוחב הגלילה של הדף ושובר את הפריסה בנייד. clip מסתיר בלי לגעת בפריסה. */
.tsr-hp {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
    border: 0; opacity: 0; pointer-events: none;
}
.tsr-hint {
    font-size: .84rem !important;
    color: var(--muted) !important;
    margin: 0 !important;
    line-height: 1.55;
}
.tsr .btn { width: 100%; text-align: center; }
.tsr-msg {
    display: none;
    padding: .75rem .9rem;
    border-radius: 10px;
    font-weight: 700;
    font-size: .93rem;
    border: 1px solid var(--line);
}
.tsr-msg.is-ok  { display: block; background: var(--primary-soft); color: var(--ink); border-color: var(--primary); }
.tsr-msg.is-err { display: block; background: rgba(220, 38, 38, .1); color: #b91c1c; border-color: rgba(220, 38, 38, .45); }

@media (prefers-color-scheme: dark) {
    .tsr-msg.is-err { color: #fca5a5; }
}

/* ============================================================
   פורטל הבודקים של הרשת — מועד סגירה, סייג ובחירת מוצרים
   ------------------------------------------------------------
   הדף חדל להיות דף של מוצר אחד: אותו טופס מגייס לשלוש מערכות,
   והמשתמש בוחר לאילו. שלוש התוספות כאן משרתות את זה.

   1. ‏.tsr-deadline — תאריך הסגירה. צהוב-אזהרה ולא סגול-מותג,
      כי הוא לא עוד פסקה: אחריו ההטבה נעלמת.
   2. ‏.tsr-disclaimer — הסייג (ההטבה מותנית בהורדה בפועל).
      שקט בכוונה, אבל לפני הטופס ולא אחריו — סייג שמופיע אחרי
      הכפתור הוא סייג שאיש לא קרא לפני שנרשם.
   3. ‏.tsr-pick — כרטיס בחירה. ה-checkbox עצמו הוא התיבה שרואים
      (‏appearance:none) ולא ספan מצויר שמחקה אותו: כך הוא נשאר
      בסדר ה-Tab, בעץ הנגישות ובקריאת מסך, וטבעת המיקוד יושבת
      על הפקד האמיתי.

   הדגשת הכרטיס *כולו* כתובה פעמיים בכוונה: ‎.is-on ש-testers.js
   מחליף בכל שינוי מצב, ו-‎:has(input:checked) לצידו. ‏is-on הוא
   שמחזיק את המצב גם כשהקוד מנקה את הטופס אחרי הרשמה מוצלחת,
   ו-:has() הוא שמחזיק אותו כשאין JS בכלל. שתיהן מתארות את אותו
   מצב, ולכן היעדר האחת אינו משאיר את הטופס דו-משמעי.
   ============================================================ */
.tsr-deadline {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    margin: 1.4rem 0 .9rem;
    padding: .95rem 1.05rem;
    background: var(--bc-warn-wash);
    border: 1.5px solid var(--bc-warn);
    border-radius: 12px;
    color: var(--bc-warn-ink);
    font-size: .97rem;
    line-height: 1.6;
}
.tsr-deadline strong { color: var(--bc-warn-ink); }
.tsr-deadline-ic { font-size: 1.25rem; line-height: 1.35; flex: none; }

.tsr-disclaimer {
    margin: 0 0 1.6rem;
    padding-inline-start: .9rem;
    border-inline-start: 3px solid var(--line);
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.65;
}

.tsr-picks {
    margin: 0 0 .35rem;
    padding: 0;
    border: 0;
    min-inline-size: 0;          /* בלי זה fieldset מסרב להצטמצם ושובר גלילה בנייד */
    display: grid;
    gap: .6rem;
}
.tsr-picks > legend {
    float: inline-start;         /* legend רגיל אינו נספר כפריט grid ומשבש את המרווחים */
    width: 100%;
    padding: 0;
    margin-bottom: .6rem;
    font-weight: 800;
    color: var(--ink);
    font-size: .96rem;
}
.tsr-picks::after { content: ''; display: block; clear: both; }

.tsr-pick {
    --pk: var(--primary);
    --pk-soft: var(--primary-soft);
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .75rem;
    align-items: start;
    padding: .9rem 1rem;
    background: var(--bg);
    border: 1.5px solid var(--line);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .18s var(--bc-ease-standard),
                background .18s var(--bc-ease-standard),
                box-shadow .18s var(--bc-ease-standard);
}
.tsr-pick[data-app="schedule"] { --pk: var(--bc-app-schedule); --pk-soft: var(--bc-app-schedule-soft); }
.tsr-pick[data-app="kniyot"]   { --pk: var(--bc-app-kniyot);   --pk-soft: var(--bc-app-kniyot-soft); }
/* למשמרות בקליק אין עדיין טוקן מוצר ב-shared/tokens.json — עד שיהיה,
   הכרטיס לובש את סגול המותג ולא צבע שהומצא כאן. */
.tsr-pick[data-app="shifts"]   { --pk: var(--bc-brand-strong);  --pk-soft: var(--bc-brand-soft); }

.tsr-pick:hover { border-color: var(--pk); background: var(--surface); }
.tsr-pick.is-on,
.tsr-pick:has(input:checked) { border-color: var(--pk); background: var(--pk-soft); box-shadow: var(--shadow); }
.tsr-pick:has(input:focus-visible) { border-color: var(--pk); }

/* התיבה עצמה — הפקד, לא ציור שלו */
.tsr-pick > input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 22px; height: 22px;
    margin: .12rem 0 0;
    flex: none;
    border: 2px solid var(--line);
    border-radius: 6px;
    background: var(--surface) center / 13px 13px no-repeat;
    cursor: pointer;
    transition: background-color .18s var(--bc-ease-standard), border-color .18s var(--bc-ease-standard);
}
.tsr-pick > input[type="checkbox"]:checked {
    background-color: var(--pk);
    border-color: var(--pk);
    /* ה-V כ-SVG מוטבע: input אינו יכול לשאת ::after בכרום, ומשאב
       חיצוני לתיבת סימון היה בקשת רשת שלמה לסימן אחד. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.4l3 3 6-6'/%3E%3C/svg%3E");
}
.tsr-pick > input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--pk-soft), 0 0 0 5px var(--pk);
}

.tsr-pick-body { display: grid; gap: .3rem; }
.tsr-pick-title { font-weight: 800; color: var(--ink); font-size: 1rem; line-height: 1.45; }
.tsr-pick-ic { font-size: 1.05rem; }
.tsr-pick-who { font-weight: 600; color: var(--muted); font-size: .88rem; }
.tsr-pick-desc { color: var(--ink-2); font-size: .89rem; line-height: 1.6; }
.tsr-pick-perk {
    justify-self: start;
    padding: .28rem .6rem;
    border-radius: 100px;
    background: var(--pk-soft);
    color: var(--pk);
    border: 1px solid var(--pk);
    font-weight: 700;
    font-size: .82rem;
    line-height: 1.5;
}
/* על כרטיס מסומן הגלולה יושבת על רקע באותו גוון — מחזירים לה משטח */
.tsr-pick.is-on .tsr-pick-perk,
.tsr-pick:has(input:checked) .tsr-pick-perk { background: var(--surface); }

@media (prefers-color-scheme: dark) {
    /* הטוקנים ‎*-soft כבר מתהפכים לגוונים כהים ב-tokens.generated.css,
       ולכן הכרטיס המסומן אינו צריך תיקון כאן — רק הגלולה שעליו,
       שאחרת נבלעת ברקע הכהה של הכרטיס. */
    .tsr-pick.is-on .tsr-pick-perk,
    .tsr-pick:has(input:checked) .tsr-pick-perk { background: transparent; }
    .tsr-deadline { background: rgba(234, 88, 12, .12); color: var(--ink); }
    .tsr-deadline strong { color: var(--ink); }
}

@media (max-width: 480px) {
    .tsr-pick { padding: .8rem .85rem; gap: .6rem; }
    .tsr-pick-title { font-size: .95rem; }
    .tsr-pick-who { display: block; }
}