/* דף הנחיתה לאורח (סבב 8.11-ב, א) - design_handoff_guest_landing/README.md (קובע) ו-reference.html (מבנה, מידות, CSS).
   הכול תחת body.gl, והכללים כאן לא נוגעים בשום דף אחר. נקודת שבירה אחת: 900px (מעליה מחשב, מתחתיה טלפון).
   **הדף עומד בלי style.css:** style.css (240KB) נחוץ רק לשאלון, ולכן נטען בלי לחסום את הציור (media="print", ו-guest.js
   מחליף ל-all) - ה-LCP לא מחכה לו. לכן הטוקנים כאן, לפי הטבלה ב-README (סעיף 3) - אותם ערכים כמו ב-style.css. */
body.gl {
  --navy: #0B2A5B; --navy-deep: #071E44; --mint: #5EE0A8; --flag: #0038B8; --flag-deep: #012E9C;
  --tint: #EAF0FC; --tint-2: #F6F9FE; --ink: #14171C; --soft: #5A6472; --rule: #D9E1EF; --on-navy: #C9D6EE;
  display: block; height: auto; min-height: 100%;
  margin: 0; background: var(--tint-2); color: var(--ink);
  font-family: "Assistant", system-ui, sans-serif; font-size: 16px; line-height: 1.5;
}
.gl a { color: var(--flag); }
.gl a:hover { color: var(--flag-deep); }
.gl *, .gl *::before, .gl *::after { box-sizing: border-box; }
.gl [hidden] { display: none !important; }
.gl :focus-visible { outline: 3px solid var(--mint); outline-offset: 2px; }
.gl-wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }

/* ── 4.1 כותרת עליונה (בלי התגית "ארגז הכלים הפרלמנטרי" - הלוגו כבר כולל אותה; ברק 8.11) ── */
.gl-top { background: var(--navy); border-bottom: 1px solid rgba(255,255,255,.08); }
.gl-top .gl-wrap { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.gl-brand { display: flex; align-items: center; text-decoration: none; }
.gl-brand img { height: 56px; width: auto; display: block; }   /* סבב 9.11-א, א5 (ברק): 40 -> 56, שהכיתוב ייקרא */
.gl-top nav { display: flex; align-items: center; gap: 20px; }
.gl .gl-lnk-white { color: #fff; font-size: 15px; font-weight: 600; text-decoration: none; }
.gl .gl-lnk-white:hover { color: #fff; text-decoration: underline; }
.gl .gl-btn-sm {
  display: inline-flex; align-items: center; height: 40px; padding: 0 20px; border-radius: 8px;
  background: var(--mint); color: var(--navy); font-size: 15px; font-weight: 800; text-decoration: none;
}
.gl .gl-btn-sm:hover { color: var(--navy); filter: brightness(1.04); }

/* ── 4.6 כפתור ההרשמה הראשי ── */
.gl .gl-btn-google {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 56px; padding: 0 28px 0 24px;
  border-radius: 10px; background: var(--mint); color: var(--navy); font-size: 19px; font-weight: 800; text-decoration: none;
}
.gl .gl-btn-google:hover { color: var(--navy); filter: brightness(1.04); }
.gl-btn-google .g-badge {
  flex: none; width: 28px; height: 28px; border-radius: 50%; background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.gl-btn-google .g-badge img { width: 18px; height: 18px; display: block; }
.gl .gl-login { color: #fff; font-size: 16px; font-weight: 600; text-underline-offset: 4px; }
.gl .gl-login:hover { color: #fff; }

/* ── 4.2 פתיחה ── */
.gl-hero { background: var(--navy); color: #fff; }
.gl-hero .gl-wrap {
  padding-top: 72px; padding-bottom: 88px;
  display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 72px; align-items: center;
}
.gl-hero-text { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.gl-kicker {
  font-size: 14px; font-weight: 700; color: var(--mint);
  border: 1px solid rgba(94,224,168,.45); border-radius: 999px; padding: 4px 12px;
}
.gl-hero h1 { margin: 0; font-size: 60px; line-height: 1.08; font-weight: 800; letter-spacing: -1px; color: #fff; }
.gl-hero h1 span { display: block; }
.gl-hero p { margin: 0; max-width: 560px; font-size: 20px; line-height: 1.6; color: var(--on-navy); }
.gl-ctas { display: flex; align-items: center; gap: 24px; margin-top: 6px; }
.gl-hero-fig { margin: 0; }

/* נגן אנכי 9:16 */
.gl-vid {
  position: relative; display: block; width: 340px; aspect-ratio: 9 / 16; border-radius: 28px; overflow: hidden;
  background: var(--navy-deep); border: 1px solid rgba(255,255,255,.16);
}
.gl-vid video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--navy-deep); }
.gl-cap { font-size: 14px; color: var(--on-navy); text-align: center; margin-top: 12px; }

/* ── 4.3 הכלים ── */
.gl-tools .gl-wrap { padding-top: 88px; padding-bottom: 96px; display: flex; flex-direction: column; gap: 40px; }
.gl-tools h2 { margin: 0; font-size: 40px; line-height: 1.15; font-weight: 800; color: var(--navy); }
.gl-sub { margin: 8px 0 0; font-size: 18px; color: var(--soft); }
.gl-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 56px; align-items: start; }
.gl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.gl .gl-tool {
  width: 100%; display: flex; align-items: center; gap: 18px; padding: 18px 20px; border-radius: 12px;
  border: 1px solid transparent; background: transparent; text-align: start; font: inherit; color: inherit; cursor: pointer;
}
.gl .gl-tool:hover { background: #fff; border-color: var(--rule); }
.gl .gl-tool[aria-pressed="true"] { background: #fff; border-color: var(--navy); box-shadow: 0 6px 20px rgba(11,42,91,.10); }
.gl-ico {
  flex: none; width: 44px; height: 44px; border-radius: 10px; background: var(--tint); color: var(--flag-deep);
  display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800;
}
.gl-tool[aria-pressed="true"] .gl-ico { background: var(--navy); color: var(--mint); }
.gl-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.gl-name { font-size: 19px; font-weight: 800; color: var(--navy); }
.gl-line { font-size: 15.5px; line-height: 1.5; color: var(--soft); }
.gl-play { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--soft); }
.gl-tool[aria-pressed="true"] .gl-play { color: var(--flag); }
.gl-play svg { width: 14px; height: 14px; }
.gl-stage {
  position: sticky; top: 24px; display: flex; flex-direction: column; gap: 14px;
  background: #fff; border: 1px solid var(--rule); border-radius: 16px; padding: 20px;
}
.gl-stage .gl-vid { width: 100%; border: 0; border-radius: 20px; background: var(--navy); }
.gl-note { margin: 0; font-size: 14px; color: var(--soft); text-align: center; }
.gl-carousel { display: none; }

/* ── 4.4 סיום ── */
.gl-end { background: var(--navy); color: #fff; }
.gl-end .gl-wrap {
  padding-top: 88px; padding-bottom: 88px;
  display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center;
}
.gl-end h2 { margin: 0; font-size: 52px; line-height: 1.1; font-weight: 800; letter-spacing: -.5px; color: #fff; }

/* ── 4.5 תחתית ── */
.gl-foot { background: var(--navy-deep); color: var(--on-navy); }
.gl-foot .gl-wrap {
  padding-top: 24px; padding-bottom: 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 14px;
}
.gl-foot nav { display: flex; gap: 24px; }
.gl .gl-foot a { color: var(--on-navy); }
.gl .gl-foot a:hover { color: #fff; }
.gl-foot img { height: 28px; width: auto; display: block; }

/* ── טלפון: מתחת ל-900px ── */
@media (max-width: 899px) {
  .gl-wrap { padding: 0 16px; }
  .gl-top .gl-wrap { height: 64px; }                              /* 9.11-א, א5: הלוגו 44px */
  .gl-brand img { height: 44px; }                                 /* 9.11-א, א5: 32 -> 44 */
  .gl .gl-btn-sm { display: none; }
  .gl-long { display: none; }
  .gl .gl-lnk-white { min-height: 44px; display: inline-flex; align-items: center; }
  .gl-hero .gl-wrap { display: flex; flex-direction: column; align-items: stretch; gap: 16px; padding-top: 28px; padding-bottom: 40px; }
  .gl-hero-text { gap: 16px; align-items: stretch; }
  .gl-kicker { align-self: flex-start; font-size: 13px; padding: 3px 10px; }
  .gl-hero h1 { font-size: 38px; line-height: 1.1; letter-spacing: -.5px; }
  .gl-hero p { font-size: 17px; }
  .gl-ctas { flex-direction: column; align-items: stretch; gap: 0; margin-top: 4px; }
  .gl .gl-btn-google { height: 54px; font-size: 18px; width: 100%; }
  .gl .gl-login { align-self: center; min-height: 44px; display: inline-flex; align-items: center; font-size: 15px; }
  .gl-hero-fig { margin: 8px 0 0; align-self: center; }
  .gl-hero .gl-vid { width: 270px; border-radius: 24px; }
  .gl-tools .gl-wrap { padding: 40px 0 44px; gap: 18px; }
  .gl-head { padding: 0 16px; }
  .gl-tools h2 { font-size: 28px; }
  .gl-sub { font-size: 15px; margin-top: 6px; }
  .gl-grid { display: none; }
  .gl-carousel {
    display: flex; list-style: none; margin: 0; padding: 0 16px 8px; gap: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; -webkit-overflow-scrolling: touch;
  }
  .gl-carousel li { flex: none; width: 236px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 10px; }
  .gl-carousel .gl-vid { width: 236px; border: 0; border-radius: 18px; background: var(--navy); }
  .gl-carousel .gl-name { font-size: 18px; }
  .gl-carousel .gl-line { font-size: 15px; }
  .gl-end .gl-wrap { padding-top: 48px; padding-bottom: 48px; align-items: stretch; gap: 20px; }
  .gl-end h2 { font-size: 36px; }
  .gl-foot .gl-wrap { padding-top: 12px; padding-bottom: 12px; }
  .gl-foot nav { gap: 18px; }
  .gl-foot nav a { min-height: 44px; display: inline-flex; align-items: center; }
}
@media (prefers-reduced-motion: reduce) { .gl, .gl * { scroll-behavior: auto !important; } }