/* ===========================================================================
   Ekoloko World — homepage, 2026-10-11 v5 (homepage-20261011-5.css)
   v5: restores the English (html[lang="en"]) overrides the v4 rewrite dropped.
   Without them the /en/ page inherited `.ek{direction:rtl}` and rendered RTL,
   and its recommendation chip read the Hebrew "מתאים למכשיר הזה". Both
   languages now share this one sheet.
   v4: the news list fills the right column first (measured RTL defect).
   v3: styles the updates and community sections (they had none), collapses the
   hero grid on phones, fixes the Discord slab label and the two badge contrasts,
   and removes the dead rules the v2 port inherited.

   Built to docs/ekoloko-design-language.md: the ORIGINAL Ekoloko website with
   modern capabilities inside it — not a modern site with a nostalgic skin.

   Measured from the original assets, not estimated:
   - page background  #abd93f + bg_ext.jpg (8x242) carries the blue band itself
     at y=94..139; repeating it on x paints the band at the original position
   - stage            header 93 + 960 + 147 = 1200; content 143 + 860 + 197 = 1200
   - type             .Title Arial bold 24px, body Arial 15px, FAQ Arial bold 17px
   - ink              #18384f, softened #4a6076, image border 1px solid #a7b793
   - GanCLM only on slab buttons; Arial everywhere else
   Forbidden by the doc: sticky header, backdrop-filter, parchment background,
   dark-green chrome, 100svh hero, modern gradients, rounded chrome, SaaS cards.
   =========================================================================== */

@font-face{font-family:'GanCLM';src:url(/homepage/assets/eko-orig/gan-clm.woff2) format('woff2');font-weight:400 900;font-display:swap;unicode-range:U+0590-05FF,U+FB1D-FB4F,U+20AA}

:root{
  --lime:#abd93f;
  --navy:#18384f;
  --muted:#4a6076;
  --paper-line:#dcd9b8;
  --image-line:#a7b793;
  --orange-dark:#a45613;
  /* The band gradient, matching the measured rows of bg_ext.jpg. Used only
     where the band leaves the flow of bg_ext.jpg — the mobile header tier. */
  --band:linear-gradient(180deg,#18384e 0%,#295f83 10%,#326486 45%,#2c5a78 70%,#224d6a 88%,#1d435d 100%);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0;overflow-x:hidden;overflow-x:clip}
html,body{background:var(--lime) url(/ekoloko/website/common/images/bg_ext.jpg) repeat-x top center}
body{min-width:280px}
.ek{direction:rtl;text-align:right;min-height:100vh;color:var(--navy);background:transparent;font-family:Arial,'Segoe UI',sans-serif;font-size:15px;line-height:1.68}
.ek img{max-width:100%}
.ek a{color:inherit}
.skip-link{position:fixed;z-index:1000;top:8px;right:8px;transform:translateY(-160%);padding:11px 14px;background:#fff;color:var(--navy);border:2px solid var(--navy);font-weight:700;text-decoration:none}
.skip-link:focus{transform:none}
:focus-visible{outline:3px solid #1b4762;outline-offset:3px}

/* --- Original type: one .Title size for page and section headings --------- */
.Title{margin:0 0 10px;color:var(--navy);font-family:Arial,'Segoe UI',sans-serif;font-size:24px;font-weight:bold;line-height:1.28}
.section-title{margin-bottom:6px}
.section-title::before{content:"";display:inline-block;width:25px;height:18px;margin-inline-end:9px;vertical-align:-2px;background:url(/homepage/assets/eko-orig/login/leaf.png) center/contain no-repeat}
.section-lede{color:var(--muted);font-size:15px;line-height:1.7}
.sec{padding:27px 0;border-top:1px solid var(--paper-line)}
.sec--first{border-top:0;padding-top:3px}
.sec p{margin:0 0 13px;font-size:15px;line-height:1.75}
.sec p:last-child{margin-bottom:0}
.sec a:not(.flash-btn){color:#2f6486;font-weight:700;text-decoration:underline;text-underline-offset:2px}
.sec a[href*="discord.gg"]:not(.flash-btn){color:#3b45a5;font-weight:800}

/* --- Slab buttons: the original game art. GanCLM is used ONLY on slab
   buttons and badges; everything else is Arial (design law). --------------- */
.flash-btn{display:inline-flex;align-items:center;justify-content:center;color:#fff!important;font:700 15px/1.15 'GanCLM',Arial,sans-serif;text-align:center;text-decoration:none;text-shadow:0 2px 0 #5c7d1a,0 1px 3px rgba(20,50,0,.45);background:url(/homepage/assets/eko-orig/login/btn-green-slab.png) center/100% 100% no-repeat;filter:drop-shadow(0 4px 5px rgba(30,60,0,.28));transition:filter .15s,transform .12s}
.flash-btn:hover{filter:drop-shadow(0 5px 6px rgba(30,60,0,.33)) brightness(1.08);transform:translateY(-1px)}
.flash-btn:active{filter:drop-shadow(0 2px 3px rgba(30,60,0,.3)) brightness(.96);transform:translateY(2px)}
/* Orange is the original primary action; green is secondary; purple Discord. */
.flash-btn.browser-play{background-image:url(/homepage/assets/eko-orig/login/btn-orange-slab.png);text-shadow:0 2px 0 #a45613,0 1px 3px rgba(65,25,0,.45);filter:drop-shadow(0 4px 5px rgba(120,60,10,.3))}
.flash-btn.browser-play:hover{filter:drop-shadow(0 5px 6px rgba(120,60,10,.35)) brightness(1.08)}
.flash-btn.browser-play:active{filter:drop-shadow(0 2px 3px rgba(120,60,10,.3)) brightness(.96)}
.flash-btn.discord-btn{background-image:url(/homepage/assets/eko-orig/login/btn-blurple-slab.png);text-shadow:0 2px 0 #3c45a5,0 1px 3px rgba(24,28,70,.5);filter:drop-shadow(0 4px 5px rgba(36,42,112,.34))}
.flash-btn.discord-btn:hover{filter:drop-shadow(0 5px 6px rgba(36,42,112,.4)) brightness(1.08)}
.flash-btn.discord-btn:focus-visible{box-shadow:0 0 0 4px rgba(88,101,242,.38)}
.flash-btn.discord-btn:active{filter:drop-shadow(0 2px 3px rgba(36,42,112,.34)) brightness(.94)}

/* --- Header: the original 1200px strip, 154px tall ------------------------ */
.top{position:relative;height:154px;overflow:hidden;
  background-image:url(/ekoloko/website/common/images/header_left.jpg),url(/ekoloko/website/common/images/header_right.jpg);
  background-repeat:no-repeat,no-repeat;
  background-position:calc(50% - 600px) top,calc(50% + 453px) top;
  background-size:93px 154px,147px 154px}
.top-in{position:relative;max-width:1200px;height:100%;margin:0 auto}
.site-brand{position:absolute;z-index:2;top:4px;inset-inline-start:34px;display:block;width:200px}
.top-logo{position:static;display:block;width:200px;height:auto;filter:drop-shadow(0 2px 4px rgba(24,56,79,.28))}

/* 861px of sprites inside the 880px between the header edges; the strip reads
   right-to-left so "מידע להורים" sits nearest the reader. */
.top-nav{position:absolute;z-index:20;top:87px;inset-inline-start:170px;inset-inline-end:150px;height:59px;
  display:flex;direction:rtl;align-items:flex-start;justify-content:center;background:transparent;border:0}
.nav-item{height:59px;flex:0 0 auto}
.nav-item>a{display:block;height:59px;color:transparent;font:0/0 a;white-space:nowrap;text-indent:-9999px;text-decoration:none;
  overflow:hidden;background-repeat:no-repeat;background-position:center top;transition:none}
/* _over and _up differ only in shading — the white outline IS the focus signal. */
.nav-item>a:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* The file names in assets/menu do not match their contents — fun-1_up.png
   reads "הורים", parents-1_up.png reads "חלוצים". This is the corrected map. */
.nav-item[data-m="parents"]>a{width:138px;background-image:url(/homepage/assets/eko-orig/menu/fun-1_up.png)}
.nav-item[data-m="parents"]>a:hover,.nav-item[data-m="parents"]>a:focus-visible{background-image:url(/homepage/assets/eko-orig/menu/fun-2_over.png)}
.nav-item[data-m="parents"]>a:active{background-image:url(/homepage/assets/eko-orig/menu/fun-3_down.png)}
.nav-item[data-m="fun"]>a{width:138px;background-image:url(/homepage/assets/eko-orig/menu/pioneers-1_up.png)}
.nav-item[data-m="fun"]>a:hover,.nav-item[data-m="fun"]>a:focus-visible{background-image:url(/homepage/assets/eko-orig/menu/pioneers-2_over.png)}
.nav-item[data-m="fun"]>a:active{background-image:url(/homepage/assets/eko-orig/menu/pioneers-3_down.png)}
.nav-item[data-m="pioneers"]>a{width:158px;background-image:url(/homepage/assets/eko-orig/menu/parents-1_up.png)}
.nav-item[data-m="pioneers"]>a:hover,.nav-item[data-m="pioneers"]>a:focus-visible{background-image:url(/homepage/assets/eko-orig/menu/parents-2_over.png)}
.nav-item[data-m="pioneers"]>a:active{background-image:url(/homepage/assets/eko-orig/menu/parents-3_down.png)}
.nav-item[data-m="help"]>a{width:112px;background-image:url(/homepage/assets/eko-orig/menu/blog-1_up.png)}
.nav-item[data-m="help"]>a:hover,.nav-item[data-m="help"]>a:focus-visible{background-image:url(/homepage/assets/eko-orig/menu/blog-2_over.png)}
.nav-item[data-m="help"]>a:active{background-image:url(/homepage/assets/eko-orig/menu/blog-3_down.png)}
.nav-item[data-m="blog"]>a{width:182px;background-image:url(/homepage/assets/eko-orig/menu/contact-1_up.png)}
.nav-item[data-m="blog"]>a:hover,.nav-item[data-m="blog"]>a:focus-visible{background-image:url(/homepage/assets/eko-orig/menu/contact-2_over.png)}
.nav-item[data-m="blog"]>a:active{background-image:url(/homepage/assets/eko-orig/menu/contact-3_down.png)}
.nav-item[data-m="contact"]>a{width:133px;background-image:url(/homepage/assets/eko-orig/menu/help-1_up.png)}
.nav-item[data-m="contact"]>a:hover,.nav-item[data-m="contact"]>a:focus-visible{background-image:url(/homepage/assets/eko-orig/menu/help-2_over.png)}
.nav-item[data-m="contact"]>a:active{background-image:url(/homepage/assets/eko-orig/menu/help-3_down.png)}

/* --- The 1200px stage: palms 143 + paper 860 + palms 197 ------------------ */
.scene{direction:ltr;max-width:1200px;margin:0 auto;display:grid;grid-template-columns:143px 860px 197px;align-items:start}
.palm{display:block;width:100%;height:auto}
.paper{direction:rtl;position:relative;min-width:0;background:url(/ekoloko/website/common/images/main_iw.jpg) no-repeat top center,url(/ekoloko/website/common/images/tileable_iw.jpg) repeat-y top center;background-size:100% auto,100% auto}
.paper-in{position:relative;padding:31px 48px 34px}

/* --- Hero: paper-and-slab, no modern browser chrome ----------------------- */
.hero{text-align:center;padding-bottom:25px}
/* Tuki from the original login art greets at the hero's side; the text column
   stays dominant. Below 720px the grid collapses to one column and the Tuki is
   hidden (see the 720px tier). */
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:8px 20px;align-items:center}
.hero-main{min-width:0}
.hero-tuki{display:grid;place-items:center}
.hero-tuki img{width:176px;height:auto;filter:drop-shadow(0 8px 6px rgba(24,56,79,.22))}
.hero-title{margin:0 0 6px;text-shadow:0 1px 0 #fff}
.hero-copy{max-width:650px;margin:0 auto 18px;color:var(--muted);font-size:15px;line-height:1.75}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 17px;margin-top:13px}
/* 228 wide with 14px of side padding leaves 200px of line: the longest label
   the platform detection can write measures 193px at this font. */
.hero-actions .flash-btn{width:228px;height:62px;padding:0 14px 4px}
.hero-actions .discord-btn{width:204px}
.download-meta{width:100%;margin:12px 0 0;color:var(--muted);font-size:13px;font-weight:700}

/* --- About ---------------------------------------------------------------- */
.story-split{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:24px;align-items:center}
.story-tuki{position:relative;min-height:210px;display:grid;place-items:center;background:url(/homepage/assets/eko-orig/login/leaf-panel-clean.png) center/contain no-repeat}
.story-tuki img{width:205px;height:auto;filter:drop-shadow(0 8px 5px rgba(24,56,79,.2))}
.original-list{margin:12px 0 0;padding:0 21px 0 0}
.original-list li{margin:6px 0;font-size:15px;line-height:1.65}

/* --- World moments --------------------------------------------------------- */
.games-stage{position:relative;margin-top:16px;padding:18px 18px 13px;background:#8eb72c url(/homepage/assets/eko-orig/login/lime-tex.jpg) center/320px auto;border:4px solid #fff7c7;outline:1px solid #779527;box-shadow:0 5px 10px rgba(24,56,79,.18)}
.games-stage::before{content:"";position:absolute;z-index:2;top:-48px;inset-inline-end:12px;width:105px;height:81px;background:url(/homepage/assets/eko-orig/home/mobile-games/tuki.png) center/contain no-repeat;pointer-events:none}
.game-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.game-shot{margin:0;background:#fff9d7;border:3px solid #fff;padding:4px;box-shadow:0 2px 5px rgba(20,55,45,.3)}
/* height:auto is load-bearing: the width/height attributes reserve the box,
   and object-fit crops the screenshot to a strip instead of a vertical sliver. */
.game-shot img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--image-line)}
.game-shot figcaption{padding:6px 4px 2px;color:var(--navy);font:bold 15px/1.25 Arial,'Segoe UI',sans-serif;text-align:center}

/* --- What's new ------------------------------------------------------------ */
/* v4: measured defect — with the default row flow the items alternated
   right/left (1,3,5,7,9 down the right column, 2,4,6,8 down the left), so the
   list read out of order in Hebrew. Column flow fills the right column first. */
.news-list{margin:11px 0 0;padding:0;list-style:none;display:grid;grid-auto-flow:column;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(5,auto);gap:7px 26px}
.news-list li{position:relative;padding-inline-start:21px;font-size:15px;line-height:1.6}
.news-list li::before{content:"";position:absolute;inset-inline-start:0;top:5px;width:14px;height:11px;background:url(/homepage/assets/eko-orig/login/leaf.png) center/contain no-repeat}
.news-list b{color:var(--navy)}

/* --- Downloads: four rows, always visible; detection only adds a badge ---- */
.downloads-top{margin:14px 0 4px;text-align:center}
/* Platform-agnostic recommendation: the doc reserves ORANGE for the browser
   and Android actions, so this one wears the secondary green slab. */
.download-top{width:228px;height:62px;padding:0 14px 4px}
.download-list{margin-top:9px;border-top:1px solid rgba(167,183,147,.72)}
.download-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 184px;gap:19px;align-items:center;padding:15px 0;border-bottom:1px dashed var(--paper-line)}
.download-row h3{margin:0;color:var(--navy);font:bold 20px/1.25 Arial,'Segoe UI',sans-serif}
.download-row p{margin:3px 0 0;color:var(--muted);font-size:13px;line-height:1.55}
.download-row.is-recommended::after{content:"מתאים למכשיר הזה";position:absolute;top:-10px;inset-inline-start:4px;padding:1px 10px 3px;color:#fff;background:var(--orange-dark);border:2px solid #fff;border-radius:13px;font:700 12px/1.35 Arial,'Segoe UI',sans-serif;box-shadow:0 1px 3px rgba(70,40,10,.3)}
.download-row .flash-btn{justify-self:end;width:184px;height:60px;padding:0 12px 4px}
.download-row[data-download-platform="android"] .flash-btn{background-image:url(/homepage/assets/eko-orig/login/btn-orange-slab.png);text-shadow:0 2px 0 #a45613,0 1px 3px rgba(65,25,0,.4)}

/* --- Three steps + the paper browser card --------------------------------- */
.install-steps{list-style:none;margin:11px 0 0;padding:0;display:grid;gap:9px}
.install-steps li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.65}
.step-no{flex:0 0 28px;width:28px;height:28px;margin-top:1px;display:grid;place-items:center;color:#fff;background:url(/homepage/assets/eko-orig/login/leaf.png) center/contain no-repeat;font:bold 12px/1 Arial,sans-serif;text-shadow:0 1px 2px #285010}
.browser-cta{position:relative;margin:16px 0 0;padding:21px 25px;overflow:hidden;border:1px solid #a9b77f;outline:3px solid #fff7c7;background:#fbf3d3 url(/ekoloko/website/common/images/tileable_iw.jpg) repeat;box-shadow:0 5px 10px rgba(24,56,79,.16);text-align:right}
.browser-cta::before{content:"";position:absolute;inset-block-start:-9px;inset-inline-start:-8px;width:76px;height:60px;background:url(/homepage/assets/eko-orig/login/leaf.png) center/contain no-repeat;opacity:.3;pointer-events:none;transform:rotate(-18deg)}
.browser-badge{position:relative;z-index:1;display:inline-block;padding:3px 9px 4px;border:1px solid #dceab1;background:#3d6b1c;color:#fff;font:700 13px/1.35 Arial,'Segoe UI',sans-serif;text-shadow:0 1px 1px rgba(20,40,0,.5)}
.browser-cta-copy{position:relative;z-index:1;max-width:650px}
.browser-cta-copy .Title{margin:7px 0 8px}
.browser-cta-copy p{max-width:625px;margin:0 0 9px;color:var(--muted);font-size:15px;line-height:1.7}
.browser-cta-actions{display:flex;flex-wrap:wrap;align-items:center;gap:9px 18px;margin-top:14px}
.browser-cta .flash-btn{width:196px;height:58px;padding:0 16px 4px}
.sec .browser-cta .browser-cta-download{color:#486c30!important;font-size:14px;font-weight:800;text-decoration:none;text-underline-offset:3px;border-bottom:1px dotted currentColor}
.sec .browser-cta .browser-cta-download:hover,.sec .browser-cta .browser-cta-download:focus-visible{color:#274d1d!important;border-bottom-style:solid}

/* --- Updates: rows in the same rhythm as the download table ---------------- */
/* v3: these classes shipped in v2 markup with no rules, so the section rendered
   as one run-on underlined link. Mirrors .download-list/.download-row exactly. */
.link-rows{margin-top:9px;border-top:1px solid rgba(167,183,147,.72)}
.sec a.link-row{display:grid;gap:3px;padding:15px 0;border-bottom:1px dashed var(--paper-line);color:var(--navy);font-weight:400;text-decoration:none}
.sec a.link-row:hover,.sec a.link-row:focus-visible{text-decoration:none}
.link-row__title{color:#2f6486;font:bold 20px/1.25 Arial,'Segoe UI',sans-serif;text-decoration:underline;text-underline-offset:2px}
.sec a.link-row:hover .link-row__title,.sec a.link-row:focus-visible .link-row__title{color:#0e2a3d}
.link-row__desc{color:var(--muted);font-size:13px;line-height:1.55}

/* --- Community ------------------------------------------------------------ */
.community-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:14px}
.community-actions .flash-btn{width:228px;height:62px;padding:0 14px 4px}
.sec a.community-join{color:#2f6486;font-size:14px;font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* --- FAQ: .FAQTitle is Arial bold 17px in the original --------------------- */
.faq-list{margin-top:10px;border-top:1px solid rgba(167,183,147,.72)}
.faq-list details{padding:11px 0;border-bottom:1px dashed var(--paper-line)}
.faq-list summary{cursor:pointer;color:var(--navy);font:bold 17px/1.45 Arial,'Segoe UI',sans-serif}
.faq-list summary::marker{color:#6ca72c}
.faq-list details p{margin:8px 0 2px;padding-inline-start:24px;color:#3f566d;font-size:15px;line-height:1.75}
.more-help{margin-top:14px!important}

/* --- Footer: the original plain lime; text #24410f passes AA (~6.9:1) ----- */
.footrow{max-width:none;margin:0;padding:15px max(16px,4vw) 20px;text-align:center;background:transparent;border-top:0;text-shadow:0 1px 0 rgba(255,255,255,.5)}
.footrow>*{max-width:1200px;margin-inline:auto}
.footerLinks{color:#24410f!important;font-style:oblique;font-size:13px;text-decoration:none}
.footerLinks:hover,.footerLinks:focus-visible{text-decoration:underline}
.footerSep{margin:0 7px;color:#24410f;opacity:.7;font-size:12px}
.footerText{display:block;margin-top:8px;color:#24410f;font-size:12.5px;line-height:1.65}

/* --- Responsive: three tiers, no scale() and no wrap ----------------------- */
/* ≥1200px keeps the whole original stage; overflow-x:clip absorbs the ~15px
   a scrollbar takes, so the palms stay at the 1200px reference width. */
@media(min-width:1200px){
  .scene{max-width:1200px;grid-template-columns:143px 860px 197px}
  .scene>.palm{display:block}
}
/* 1199–900: the header edges would be sliced, so they go with the palms; the
   nav insets drop to give the 861px of sprites the full width. */
@media(max-width:1199px){
  .scene{grid-template-columns:1fr;max-width:860px}
  .scene>.palm{display:none}
  .paper-in{padding:27px clamp(16px,5vw,48px) 31px}
  .top{background-image:none}
  .top-nav{inset-inline:0;padding:0 10px}
}
/* <900: 861px of fixed-width art cannot fit. The art drops and the Hebrew
   link text that was always in the DOM is revealed on --band, in normal flow,
   so overlap with .scene is impossible. */
@media(max-width:899px){
  /* v3: the FAQ summary needs a thumb-sized target on tablets too, not only on
     phones — iPad-class widths fall in this tier. */
  .faq-list details{padding:2px 0}
  .faq-list summary{padding-block:10px}
  html,body{background-image:none}
  .top{height:auto;overflow:visible}
  .top-in{height:auto;max-width:100%;padding:8px 0 0;text-align:center}
  .site-brand{position:static;inset:auto;width:190px;margin:0 auto}
  .top-logo{width:190px}
  .top-nav{position:static;inset:auto;height:auto;margin-top:8px;padding:4px 6px;
    direction:rtl;flex-wrap:wrap;justify-content:center;background:var(--band)}
  .nav-item{height:auto}
  .nav-item>a{width:auto!important;height:auto;padding:0 13px;overflow:visible;
    color:#fff;font:bold 15px/40px Arial,'Segoe UI',sans-serif;text-indent:0;
    background-image:none!important;text-shadow:0 1px 2px rgba(10,35,55,.45)}
  .nav-item>a:hover,.nav-item>a:focus-visible{background-image:none!important;text-decoration:underline}
  .news-list{grid-auto-flow:row;grid-template-columns:1fr;grid-template-rows:none}
}
@media(max-width:900px){
  .hero-actions{gap:8px 12px}
}
@media(max-width:720px){
  /* v3: the grid used to hold its 190px image column down to 360px, squeezing the
     hero text to 126px. One column now, and the decorative Tuki drops out. */
  .hero-grid{grid-template-columns:1fr}
  .hero-tuki{display:none}
  .story-split{grid-template-columns:1fr}
  .story-tuki{min-height:165px;order:-1}
  .story-tuki img{width:165px}
  .game-strip{grid-template-columns:1fr}
  .game-shot img{aspect-ratio:16/8.5}
  .games-stage::before{top:-38px;width:82px;height:64px}
  .download-row{grid-template-columns:1fr;gap:8px;padding:17px 0}
  .download-row .flash-btn{justify-self:start;width:176px;height:58px}
  /* In one column the badge's top:-10px lands on the row above's border, so on
     a phone it moves inside its own row, at the inline end. */
  .download-row.is-recommended::after{top:4px;inset-inline-start:auto;inset-inline-end:2px}
  /* Grow the FAQ tap target to ~45px without shrinking the rows. */
  .faq-list details{padding:2px 0}
  .faq-list summary{padding-block:10px}
  .sec .browser-cta .browser-cta-download{display:inline-flex;align-items:center;min-height:44px}
}
@media(max-width:620px){
  .browser-cta{padding:18px 16px}
  .browser-cta-actions{gap:8px 14px}
  .browser-cta .flash-btn{width:180px;height:56px}
  .browser-cta-copy p{font-size:14px}
}
@media(max-width:430px){
  .paper-in{padding-inline:12px}
  .hero-actions{gap:7px 8px}
  /* One slab per row at a width the longest generated label still fits. */
  .hero-actions .flash-btn{width:min(266px,100%);height:54px;font-size:14px}
  .downloads-top .flash-btn{width:min(266px,100%);height:54px;font-size:14px}
  .games-stage{padding:12px 10px 10px}
  .footerSep{margin:0 4px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* --- English landing: LTR mirror of the RTL chrome ------------------------- */
/* v5 restores this block. v4's rewrite dropped it, and without it the English
   page inherited `.ek{direction:rtl}` / `.paper{direction:rtl}` /
   `.top-nav{direction:rtl}` and rendered right-to-left. */
html[lang="en"] .ek{direction:ltr;text-align:left}
html[lang="en"] .paper{direction:ltr}
html[lang="en"] .top-nav{direction:ltr}
html[lang="en"] .section-title::before{margin-inline-end:0;margin-inline-start:9px}

/* assets/menu/*.png are Hebrew words baked into the artwork, so the English
   page was showing Hebrew tabs to English readers. There is no English tab art,
   so English reveals the English link text that is already in the DOM and sets
   it on the blue band — the same trade the <900px tier makes, applied at every
   width for this language only. The nav box is 59px tall on the band; centring
   drops the 40px line to y≈96, inside the band's 94–139. */
html[lang="en"] .top-nav{align-items:center}
html[lang="en"] .nav-item{height:auto}
html[lang="en"] .nav-item>a{width:auto!important;height:auto;padding:0 14px;overflow:visible;
  color:#fff;font:bold 15px/40px Arial,'Segoe UI',sans-serif;text-indent:0;
  background-image:none!important;text-shadow:0 1px 2px rgba(10,35,55,.45);white-space:nowrap}
html[lang="en"] .nav-item>a:hover,html[lang="en"] .nav-item>a:focus-visible{background-image:none!important;text-decoration:underline}

/* The recommended chip is written in CSS, so it needs an English string too;
   otherwise the English page shows the Hebrew "מתאים למכשיר הזה". */
html[lang="en"] .download-row.is-recommended::after{content:"Matches this device";inset-inline-start:auto;inset-inline-end:4px}

/* "Download for Windows" measures 166px in Arial bold 15px, more than the
   160px of line the 184px Hebrew button leaves, so the English labels broke
   across two lines inside the single-line slab art. 200px restores one line.
   The column has to grow with the button or the wider slab overhangs the text
   column; that only applies where the row is still two columns. */
html[lang="en"] .download-row .flash-btn{width:200px;white-space:nowrap}
@media(min-width:721px){
  html[lang="en"] .download-row{grid-template-columns:minmax(0,1fr) 200px}
}