/*
 * v13 (owner, 2026-10-11): "/" is now this page, so the four installers live here too. An optional downloads block
 *     (#eko-l-downloads) sits between "how to start" and the FAQ: four framed panels (Windows, macOS, Linux, Android),
 *     each a wooden slab button, plus the checksums link. It reuses the page's own .eko-l-panel / .eko-l-slab / .eko-l-intro
 *     primitives and its leaf-and-plank language; the browser stays the headline, the download is offered as a choice.
 * v11 (UX walk): no lines left (hero ground edge, panel and footer borders); 44px tap targets for the hero sign-in link and FAQ links.
 * Ekoloko World — launch landing v3 (signed-out front page "/").
 * Three static blocks in index.html (#eko-launch hero, #eko-landing sections, #eko-landing-foot footer) are moved by
 * eko-world-landing.v3.js into the sign-in paper (#eko-auth-stage, a grid) while the sign-in view is up; the hero
 * takes the sign-in card's place (sign-in lives on /login.html).
 * v10 (owner, layout system): one content column, min(1120px, 100% - 2 gutters), gutters clamp(16px, 4vw, 48px), on a
 *     plain parchment (no torn side strips); an 8-pt vertical rhythm (sections clamp(40px, 6vw, 80px)); text measure
 *     about 62ch; clamp() type with balanced headlines; the hero content on the true centre axis with clear space from
 *     the menu, mirrored palms and bushes that never reach the text, Tuki on the ground beside the content, and the four
 *     promises as equal wooden tags (4 across, 2 x 2 on phones).
 * v9: the hero is exactly the page's width, centred (container units of the page; RTL overflow no longer pushes it
 *     sideways), no sideways scroll; the phone menu wraps compactly as on the sign-in page.
 * v8 (owner): no frame around the hero: it runs edge to edge across the viewport (no rounded outline, no paper
 *     margin above or beside it), the page cannot scroll sideways; the four promises are small wooden tags.
 * v7 (owner): buttons and numbered markers are the ORIGINAL Flash wooden button (QuizJungle.swf DefineButton2_76
 *     "המשך": up = shape 68, the light plank with a dark-brown label #785800; over = shape 71, the dark plank with a
 *     light label #d8b860; down = the up plank). Exported with FFDec at 2x (landing3/wood-up-v1.webp,
 *     wood-over-v1.webp) and laid as a 9-slice border-image, so the notched ends, rim and grain keep their shape at
 *     any width. Hover and keyboard focus show the Flash "over" plank; pressing shows the "down" plank.
 * v6 (owner): Tuki stands still (no animation at all). Every button and numbered marker is one carved-wood family,
 *     cut from the original plank art (reg/plaque2.webp) darkened by a multiply tint: a dark grain edge, a cream
 *     carved label, a drop shadow; hover and keyboard focus press the plank in.
 * v5: the four promises sit on small paper labels above the foliage, readable over the bush art.
 * v4: grid items may shrink (min-width:0) so no line runs past the paper on a phone; Tuki stands by the palm,
 *     clear of the sign-in link; a shorter hero on phones.
 * v3 (owner, 2026-10-06): no gameplay pictures at all — the game is a surprise. The page is built from Ekoloko's own
 * branding art only: the original sky, palm and bush illustrations, Tuki, the logo, the website's wooden plaques and
 * pinned notes, the leaf bullets and slab buttons.
 * Design language (/var/www/ekoloko/docs/ekoloko-design-language.md): Arial for text; ink #18384f, muted #4a6076;
 * image frame 1px solid #a7b793; GanCLM only on game-art surfaces (slabs, plaques, the hero title); orange slab =
 * primary, green = secondary; no CSS gradients, no glass, no emoji. Every illustration box is reserved (no layout shift).
 * Versioned in the file name: /auth is served with a one-year cache.
 */

/* before the app mounts (and without JS) the blocks sit in <body>; once the app owns #root they wait hidden there */
#root:not(:empty) ~ #eko-launch, #root:not(:empty) ~ #eko-landing, #root:not(:empty) ~ #eko-landing-foot { display: none; }
body > #eko-launch, body > #eko-landing, body > #eko-landing-foot { max-width: 860px; margin: 0 auto; background: #fffdf2; }
/* v12 (owner, 2026-10-07): the pre-app body state must already look like the mounted state, or the page visibly jumps on
   every refresh ("broken, then it settles"). The hero rule below has (1,1,1) specificity so it wins over the base
   `#eko-launch.eko-hero` (1,1,0): without it that rule's `margin: 4px 0 0` killed the `margin: 0 auto` centring and the
   width:auto box pinned itself to the RTL start edge at x=580 (860px wide) over a green band on the left. */
body:has(> #eko-launch) { --gutter: clamp(16px, 4vw, 48px); background: #abd93f url('bg_ext.jpg') repeat-x center top; }
body > #eko-launch.eko-hero { max-width: none; margin: 0; border: 0; border-radius: 0; height: auto; min-height: clamp(560px, 46vw, 660px); padding: clamp(40px, 5vw, 64px) var(--gutter) 128px; }
body > #eko-landing, body > #eko-landing-foot { max-width: min(1120px, calc(100% - 2 * var(--gutter))); margin-inline: auto; }

#eko-launch, #eko-landing, #eko-landing-foot { direction: rtl; color: #18384f; font: 15px/1.6 Arial, sans-serif; text-align: right; }
#eko-launch *, #eko-landing *, #eko-landing-foot * { box-sizing: border-box; }
#eko-auth-stage > #eko-launch { order: -1; }
#eko-auth-stage > #eko-landing { order: 3; }
#eko-auth-stage > #eko-landing-foot { order: 9; }
/* the hero takes the sign-in card's place; registration (and every other view) shows the card again */
#eko-auth-stage:has(> #eko-launch) > #eko-auth-card { display: none; }

/* ---- shared: slab buttons, leaf bullets, focus ---- */
.eko-l-slab {
  display: inline-flex; align-items: center; justify-content: center; min-width: 230px; min-height: 60px; padding: 6px 28px 12px;
  background: center / 100% 100% no-repeat; font: 25px/1 EkoGan, 'Trebuchet MS', Arial, sans-serif; text-decoration: none; cursor: pointer;
  transition: transform .15s ease, filter .15s ease;
}
.eko-l-slab--orange { background-image: url('btn-orange-slab.png'); color: #372309; text-shadow: 0 1px #fff6; }
.eko-l-slab--green { background-image: url('btn-green-slab.png'); color: #fff; text-shadow: 0 1px #1d4a0b; }
.eko-l-slab:hover { transform: translateY(-2px); filter: brightness(1.06); }
.eko-l-slab:active { transform: translateY(2px); filter: brightness(.95); }
.eko-l-leafs { margin: 0; padding: 0; list-style: none; }
.eko-l-leafs li { padding-inline-start: 28px; background: url('leaf.png') right 0 top .32em / 20px auto no-repeat; }
#eko-launch a:focus-visible, #eko-landing a:focus-visible, #eko-landing summary:focus-visible, #eko-landing-foot a:focus-visible { outline: 3px solid #0d527e; outline-offset: 3px; }

/* ---- hero: the original sky, palms and bush in layers; logo, title and the sign-up slab in the clearing ---- */
#eko-launch.eko-hero { position: relative; isolation: isolate; height: 520px; margin: 4px 0 0; overflow: hidden; border: 5px solid #6f9a2c; border-radius: 10px; background: #7fd0f2 url('landing3/v3-sky.webp') center top / cover no-repeat; text-align: center; }
.eko-hero__ground { position: absolute; inset: auto 0 0 0; z-index: 0; height: 92px; background: #9bcf3c; border-top: 3px solid #86bb2c; }
.eko-hero__palm, .eko-hero__bush, .eko-hero__tuki { position: absolute; z-index: 1; height: auto; pointer-events: none; transform-origin: 50% 100%; }
.eko-hero__palm { bottom: 18px; left: -36px; width: 300px; aspect-ratio: 400 / 318; animation: eko-sway 7s ease-in-out infinite alternate; }
.eko-hero__bush { bottom: 10px; right: -40px; width: 380px; aspect-ratio: 560 / 354; animation: eko-sway 9s ease-in-out -3s infinite alternate-reverse; }
.eko-hero__tuki { bottom: 52px; left: 150px; z-index: 2; width: 210px; aspect-ratio: 440 / 333; animation: eko-bob 3.2s ease-in-out infinite; }
.eko-hero__body { position: relative; z-index: 3; width: min(500px, 100%); margin: 0 auto; padding: 26px 16px 0; }
.eko-hero__logo { display: block; width: 260px; height: auto; aspect-ratio: 579 / 206; margin: 0 auto 6px; filter: drop-shadow(0 4px 6px rgba(24, 56, 79, .25)); }
#eko-launch h1 { margin: 0 0 8px; font: 46px/1.05 EkoGan, 'Trebuchet MS', Arial, sans-serif; color: #18384f; text-shadow: 0 2px 0 #fff; }
#eko-launch .eko-hero__sub { max-width: 430px; margin: 0 auto 14px; font: bold 17px/1.45 Arial, sans-serif; color: #18384f; }
#eko-launch .eko-l-slab { min-width: 260px; min-height: 68px; font-size: 32px; }
#eko-launch .eko-hero__have { margin: 10px 0 0; font: bold 15px Arial, sans-serif; color: #18384f; }
#eko-launch .eko-hero__have a { color: #0d527e; text-decoration: underline; text-underline-offset: 3px; }
@keyframes eko-sway { from { transform: rotate(-1.2deg); } to { transform: rotate(1.2deg); } }
@keyframes eko-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* the four promises, on the hero's ground */
.eko-hero__facts { position: absolute; inset: auto 0 14px 0; z-index: 3; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 26px; font: bold 15px Arial, sans-serif; color: #1f4410; }

/* ---- sections: paper rhythm, wooden plaque headings ---- */
#eko-landing { margin: 30px 18px 0; }
#eko-landing > section { padding: 8px 0 30px; }
#eko-landing h2 {
  display: flex; align-items: center; justify-content: center; width: fit-content; min-width: 300px; max-width: 100%; min-height: 78px;
  margin: 0 auto 18px; padding: 8px 40px 14px; background: url('reg/plaque2.webp') center / 100% 100% no-repeat;
  font: 27px/1.15 EkoGan, 'Trebuchet MS', Arial, sans-serif; color: #fff; text-align: center; text-shadow: 0 2px 0 #6b4a1d, 0 0 4px #6b4a1d;
}
#eko-landing .eko-l-intro { max-width: 600px; margin: 0 auto 20px; font-size: 16px; text-align: center; color: #18384f; }

/* what's new: pinned notes on the board */
.eko-l-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 18px; margin: 0; padding: 0; list-style: none; }
.eko-l-notes li { aspect-ratio: 286 / 311; padding: 22% 13% 10% 15%; background: url('reg/sticky.webp') center / 100% 100% no-repeat; }
.eko-l-notes li:nth-child(3n+1) { transform: rotate(-1.6deg); }
.eko-l-notes li:nth-child(3n+2) { transform: rotate(1.1deg); }
.eko-l-notes li:nth-child(3n) { transform: rotate(-.6deg); }
.eko-l-notes h3 { margin: 0 0 6px; font: bold 17px/1.25 Arial, sans-serif; color: #18384f; }
.eko-l-notes p { margin: 0; font-size: 14px; line-height: 1.5; color: #2c3f4f; }

/* kept + why: two framed columns */
.eko-l-two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.eko-l-panel { padding: 18px 20px 12px; border: 1px solid #a7b793; background: #fff; }
.eko-l-panel h3 { margin: 0 0 10px; font: bold 17px/1.3 Arial, sans-serif; color: #18384f; }
.eko-l-panel li { margin: 0 0 10px; }
.eko-l-panel b { color: #18384f; }

/* how to start: three numbered steps on a line */
.eko-l-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0 0 20px; padding: 0; list-style: none; counter-reset: step; text-align: center; }
.eko-l-steps li { counter-increment: step; }
.eko-l-steps li::before {
  content: counter(step); display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin: 0 auto 8px;
  border: 3px solid #fff; border-radius: 50%; background: #f39a23; box-shadow: 0 0 0 2px #bd6815; font: 28px/1 EkoGan, Arial, sans-serif; color: #372309;
}
.eko-l-ctas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px; }

/* FAQ: the original .FAQTitle (bold 17px), open/closed with a real <details> */
.eko-l-faq { max-width: 680px; margin: 0 auto; }
.eko-l-faq details { border-bottom: 1px solid #d9e6c1; }
.eko-l-faq summary { display: block; position: relative; padding: 12px 28px 12px 0; font: bold 17px/1.35 Arial, sans-serif; color: #18384f; cursor: pointer; list-style: none; }
.eko-l-faq summary::-webkit-details-marker { display: none; }
.eko-l-faq summary::before { content: '+'; position: absolute; right: 2px; top: 11px; width: 18px; font: bold 20px/1 Arial, sans-serif; color: #2e5d12; text-align: center; }
.eko-l-faq details[open] summary::before { content: '\2212'; }
.eko-l-faq details p { margin: 0 28px 14px 0; }
.eko-l-faq > p { margin: 14px 0 0; text-align: center; }
#eko-landing a:not(.eko-l-slab), #eko-landing-foot a { color: #0d527e; font-weight: bold; }

/* ---- footer: the palms close the page; logo, links and the credit line ---- */
#eko-landing-foot { position: relative; margin: 10px 0 0; padding: 26px 20px 120px; border-top: 1px dashed #a7b793; text-align: center; overflow: hidden; }
#eko-landing-foot .eko-foot__logo { display: block; width: 150px; height: auto; aspect-ratio: 579 / 206; margin: 0 auto 10px; }
#eko-landing-foot nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 22px; margin: 0 0 10px; padding: 0; list-style: none; }
#eko-landing-foot nav a { display: inline-block; padding: 6px 2px; }
#eko-landing-foot .eko-foot__note { max-width: 560px; margin: 0 auto; font-size: 12px; color: #4a6076; }
.eko-foot__palm, .eko-foot__bush { position: absolute; bottom: -6px; height: auto; pointer-events: none; }
.eko-foot__palm { left: -20px; width: 170px; aspect-ratio: 400 / 318; }
.eko-foot__bush { right: -20px; width: 240px; aspect-ratio: 560 / 354; }

@media (max-width: 760px) {
  #eko-launch.eko-hero { height: 600px; border-width: 4px; }
  .eko-hero__logo { width: 200px; }
  #eko-launch h1 { font-size: 40px; }
  #eko-launch .eko-hero__sub { font-size: 16px; }
  #eko-launch .eko-l-slab { width: 100%; max-width: 300px; }
  .eko-hero__palm { width: 190px; left: -40px; bottom: 40px; }
  .eko-hero__bush { width: 220px; right: -46px; bottom: 34px; }
  .eko-hero__tuki { width: 120px; left: 70px; bottom: 74px; }
  .eko-hero__ground { height: 104px; }
  .eko-hero__facts { gap: 2px 16px; font-size: 14px; bottom: 12px; padding: 0 10px; }
  #eko-landing { margin: 24px 4px 0; }
  #eko-landing h2 { min-width: 0; min-height: 66px; padding: 6px 30px 12px; font-size: 23px; }
  .eko-l-notes { grid-template-columns: repeat(2, 1fr); gap: 14px 10px; }
  .eko-l-notes li { padding: 20% 10% 8% 12%; }
  .eko-l-notes h3 { font-size: 14px; }
  .eko-l-notes p { font-size: 12.5px; line-height: 1.4; }
  .eko-l-two, .eko-l-steps { grid-template-columns: 1fr; }
}
@media (max-width: 360px) { .eko-l-notes { grid-template-columns: 1fr; padding: 0 30px; } .eko-l-notes p { font-size: 14px; } }
@media (prefers-reduced-motion: reduce) {
  .eko-hero__palm, .eko-hero__bush, .eko-hero__tuki { animation: none; }
  .eko-l-slab { transition: none; }
  .eko-l-slab:hover, .eko-l-slab:active { transform: none; }
}

/* ---- v4 ---- */
#eko-auth-stage > #eko-launch, #eko-auth-stage > #eko-landing, #eko-auth-stage > #eko-landing-foot { min-width: 0; max-width: 100%; }
#eko-landing, #eko-landing-foot { overflow-wrap: break-word; }
.eko-l-notes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.eko-l-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.eko-l-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.eko-hero__tuki { left: 96px; width: 190px; }
@media (max-width: 760px) {
  #eko-launch.eko-hero { height: 560px; }
  .eko-hero__tuki { left: 64px; width: 112px; bottom: 76px; }
  .eko-l-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eko-l-two, .eko-l-steps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 360px) { .eko-l-notes { grid-template-columns: minmax(0, 1fr); } }

/* ---- v5 ---- */
.eko-hero__facts { z-index: 4; gap: 6px 10px; bottom: 12px; }
.eko-hero__facts li { padding: 3px 12px 3px 10px; padding-inline-start: 32px; border: 1px solid #a7b793; background: #fffdf2 url('leaf.png') right 9px center / 18px auto no-repeat; color: #18384f; }
@media (max-width: 760px) { .eko-hero__facts { gap: 5px 6px; bottom: 10px; } .eko-hero__facts li { font-size: 13px; padding: 2px 8px; padding-inline-start: 28px; background-position: right 7px center; background-size: 16px auto; } }

/* ---- v6: still Tuki; one carved-wood family for buttons and numbers ---- */
.eko-hero__tuki { animation: none !important; transform: none !important; }
.eko-l-slab, .eko-l-steps li::before, .eko-l-faq summary::before {
  background: #8a6534 url('reg/plaque2.webp') center / cover no-repeat; background-blend-mode: multiply;
  border: 3px solid #4e3514; color: #fff1d0;
  text-shadow: 0 -1px 0 #3a260d, 0 1px 0 #c79a5c, 0 0 3px #3a260d;
  box-shadow: inset 0 1px 0 #d4a96a, inset 0 -3px 0 #5c3f17, 0 4px 0 #3a260d, 0 6px 10px rgba(58, 38, 13, .3);
}
.eko-l-slab {
  min-height: 60px; padding: 8px 30px 10px; border-radius: 8px 5px 9px 4px;
  font: 26px/1 EkoGan, 'Trebuchet MS', Arial, sans-serif; filter: none;
  transition: transform .12s ease, box-shadow .12s ease;
}
.eko-l-slab--orange, .eko-l-slab--green { background-image: url('reg/plaque2.webp'); color: #fff1d0; text-shadow: 0 -1px 0 #3a260d, 0 1px 0 #c79a5c, 0 0 3px #3a260d; }
/* the primary plank is the larger, warmer cut; the secondary a lighter, smaller one */
.eko-l-slab--orange { background-color: #8a6534; }
.eko-l-slab--green { background-color: #9c7a47; min-height: 52px; font-size: 22px; }
.eko-l-slab:hover, .eko-l-slab:focus-visible {
  transform: translateY(3px); filter: none;
  box-shadow: inset 0 2px 4px #3a260d, inset 0 -1px 0 #5c3f17, 0 1px 0 #3a260d, 0 2px 4px rgba(58, 38, 13, .25);
}
.eko-l-slab:active { transform: translateY(4px); filter: brightness(.94); box-shadow: inset 0 3px 6px #3a260d, 0 0 0 #3a260d; }
#eko-launch .eko-l-slab { min-height: 66px; font-size: 32px; }
#eko-launch .eko-l-slab:focus-visible, #eko-landing .eko-l-slab:focus-visible { outline: 3px solid #0d527e; outline-offset: 4px; }
/* step numbers: square-cut wooden tiles with the number carved in */
.eko-l-steps li::before {
  width: 54px; height: 54px; border-radius: 9px 6px 10px 5px; font: 30px/1 EkoGan, Arial, sans-serif;
  box-shadow: inset 0 1px 0 #d4a96a, inset 0 -3px 0 #5c3f17, 0 3px 0 #3a260d, 0 5px 8px rgba(58, 38, 13, .28);
}
/* FAQ open/close markers: small wooden pegs */
.eko-l-faq summary::before {
  top: 10px; width: 22px; height: 22px; border-width: 2px; border-radius: 5px 4px 6px 3px; line-height: 18px; font-size: 18px;
  box-shadow: inset 0 1px 0 #d4a96a, 0 2px 0 #3a260d;
}
.eko-l-faq summary { padding-right: 34px; }
.eko-l-faq details[open] summary::before { box-shadow: inset 0 2px 3px #3a260d, 0 1px 0 #3a260d; }
@media (max-width: 760px) { #eko-launch .eko-l-slab { font-size: 28px; } }
@media (prefers-reduced-motion: reduce) { .eko-l-slab:hover, .eko-l-slab:focus-visible, .eko-l-slab:active { transform: none; } }

/* ---- v7: the Flash wooden button (9-slice) for every button and numbered marker ---- */
.eko-l-slab, .eko-l-steps li::before, .eko-l-faq summary::before {
  background: #cfad3f none; background-blend-mode: normal;
  border-style: solid; border-color: transparent; border-radius: 0;
  border-image: url('landing3/wood-up-v1.webp') 26 48 30 44 fill / 13px 24px 15px 22px stretch;
  color: #6a4d00; text-shadow: 0 1px 0 #f0d78a; box-shadow: none; filter: none;
  background-clip: padding-box;
}
/* the plank art carries its own rim and shadow; the fallback colour sits under the fill only */
.eko-l-slab { background-color: transparent; min-height: 64px; padding: 6px 30px 12px; transition: none; }
.eko-l-slab--orange, .eko-l-slab--green { background-image: none; background-color: transparent; color: #6a4d00; text-shadow: 0 1px 0 #f0d78a; }
.eko-l-slab--green { min-height: 54px; font-size: 22px; }
#eko-launch .eko-l-slab { min-height: 72px; font-size: 32px; }
.eko-l-slab:hover, .eko-l-slab:focus-visible {
  transform: none; box-shadow: none; filter: none;
  border-image-source: url('landing3/wood-over-v1.webp'); color: #e3c46c; text-shadow: 0 1px 0 #3d2c00;
}
.eko-l-slab:active { transform: translateY(1px); border-image-source: url('landing3/wood-up-v1.webp'); color: #6a4d00; text-shadow: 0 1px 0 #f0d78a; box-shadow: none; filter: none; }
.eko-l-steps li::before {
  width: 66px; height: 52px; border-radius: 0; background-color: transparent; box-shadow: none;
  font: bold 28px/1 Arial, sans-serif; padding-bottom: 3px;
}
.eko-l-faq summary::before {
  top: 9px; width: 30px; height: 24px; border-radius: 0; background-color: transparent; box-shadow: none;
  border-image-width: 6px 11px 7px 10px; font: bold 17px/1 Arial, sans-serif; padding-bottom: 2px;
  display: flex; align-items: center; justify-content: center;
}
.eko-l-faq summary { padding-right: 40px; }
.eko-l-faq summary:hover::before, .eko-l-faq summary:focus-visible::before, .eko-l-faq details[open] summary::before {
  border-image-source: url('landing3/wood-over-v1.webp'); color: #e3c46c; text-shadow: 0 1px 0 #3d2c00; box-shadow: none;
}
@media (max-width: 760px) { #eko-launch .eko-l-slab { font-size: 28px; } }

/* ---- v8: the hero edge to edge; wooden promise tags ---- */
#eko-player-auth:has(#eko-launch) { overflow-x: clip !important; }
#eko-auth-stage:has(> #eko-launch) { padding-top: 0 !important; }
#eko-auth-stage > #eko-launch.eko-hero {
  justify-self: center; width: 100vw !important; max-width: none !important; margin: 0 !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important; outline: 0 !important;
}
.eko-hero__facts li {
  padding: 5px 16px 8px !important; border: 0 solid transparent; background: none !important;
  border-image: url('landing3/wood-up-v1.webp') 26 48 30 44 fill / 7px 12px 8px 11px stretch;
  color: #6a4d00 !important; text-shadow: 0 1px 0 #f0d78a; font: bold 15px/1.2 Arial, sans-serif;
}
@media (max-width: 760px) { .eko-hero__facts li { padding: 4px 12px 7px !important; font-size: 13px; } }

/* ---- v9 ---- */
#eko-player-auth:has(#eko-launch) { container-type: inline-size; overflow-x: hidden !important; }
#eko-auth-stage > #eko-launch.eko-hero { justify-self: stretch; width: 100cqw !important; margin-inline: calc(50% - 50cqw) !important; }
@media (max-width: 760px) {
  #eko-player-auth:has(#eko-launch) #eko-login-header-track nav { flex-wrap: wrap !important; justify-content: center !important; gap: 4px 4px !important; padding: 6px 6px !important; overflow: visible !important; }
  #eko-player-auth:has(#eko-launch) #eko-login-header-track nav a { flex: 0 0 auto; min-height: 40px !important; padding: 0 10px !important; font-size: 14px !important; white-space: nowrap; }
}

/* ---- v10: layout system ---- */
#eko-player-auth:has(#eko-launch) { --gutter: clamp(16px, 4vw, 48px); }
#eko-auth-stage:has(> #eko-launch) {
  width: min(1120px, calc(100% - 2 * var(--gutter))) !important; max-width: none !important; margin-inline: auto !important;
  padding: 0 0 48px !important; background: #fbf6e2 !important; box-shadow: none !important;
}
#eko-auth-stage:has(> #eko-launch)::after { display: none !important; }
#eko-player-auth:has(#eko-launch) { background: #abd93f url('bg_ext.jpg') repeat-x center top !important; }

/* hero: content on the centre axis, generous space, decorations mirrored and clear of the text */
#eko-auth-stage > #eko-launch.eko-hero { height: auto !important; min-height: clamp(560px, 46vw, 660px); padding: clamp(40px, 5vw, 64px) var(--gutter) 128px !important; display: block; }
.eko-hero__body { width: min(560px, 100%) !important; padding: 0 !important; margin: 0 auto !important; }
.eko-hero__logo { width: clamp(200px, 22vw, 280px) !important; margin: 0 auto 16px !important; }
#eko-launch h1 { margin: 0 0 16px !important; font-size: clamp(38px, 5vw, 56px) !important; line-height: 1.05 !important; text-wrap: balance; }
#eko-launch .eko-hero__sub { max-width: 34ch !important; margin: 0 auto 24px !important; font-size: clamp(16px, 1.6vw, 19px) !important; line-height: 1.5 !important; text-wrap: balance; }
#eko-launch .eko-hero__have { margin: 16px 0 0 !important; font-size: 16px !important; }
.eko-hero__ground { height: 112px !important; }
.eko-hero__palm { left: max(-60px, calc(50% - 50cqw - 40px)) !important; bottom: 40px !important; width: clamp(150px, 20vw, 300px) !important; }
.eko-hero__bush { right: -50px !important; bottom: 30px !important; width: clamp(190px, 26vw, 400px) !important; }
/* the mirror: a second palm on the right, a second bush on the left (the same art, flipped) */
#eko-launch.eko-hero::before, #eko-launch.eko-hero::after { content: ''; position: absolute; z-index: 1; pointer-events: none; background: center / contain no-repeat; }
#eko-launch.eko-hero::before { right: -60px; bottom: 40px; width: clamp(150px, 20vw, 300px); aspect-ratio: 400 / 318; background-image: url('landing3/v3-palm-left.webp'); transform: scaleX(-1); }
#eko-launch.eko-hero::after { left: -50px; bottom: 30px; width: clamp(190px, 26vw, 400px); aspect-ratio: 560 / 354; background-image: url('landing3/v3-bush-right.webp'); transform: scaleX(-1); opacity: .95; }
.eko-hero__palm, .eko-hero__bush { animation: none !important; }
.eko-hero__tuki { left: calc(50% - 300px - clamp(120px, 14vw, 190px)) !important; bottom: 96px !important; width: clamp(120px, 14vw, 190px) !important; }
.eko-hero__facts {
  bottom: 28px !important; display: grid !important; grid-template-columns: repeat(4, minmax(0, 132px)); justify-content: center; gap: 12px !important; padding: 0 var(--gutter) !important;
}
.eko-hero__facts li { display: flex; align-items: center; justify-content: center; min-height: 40px; text-align: center; }

/* sections: rhythm, measure, hierarchy */
#eko-landing { margin: 0 !important; padding: 0 var(--gutter) !important; }
#eko-landing > section { padding: clamp(40px, 6vw, 80px) 0 0 !important; }
#eko-landing h2 { margin: 0 auto 24px !important; font-size: clamp(24px, 2.6vw, 30px) !important; text-wrap: balance; }
#eko-landing .eko-l-intro { max-width: 62ch !important; margin: 0 auto 32px !important; font-size: 17px !important; line-height: 1.6 !important; text-wrap: balance; }
#eko-landing, #eko-landing p, #eko-landing li { line-height: 1.6; }
.eko-l-notes { max-width: 960px; margin: 0 auto !important; gap: 32px 24px !important; }
.eko-l-notes h3 { font-size: 18px !important; text-wrap: balance; }
.eko-l-notes p { font-size: 15px !important; }
.eko-l-two { max-width: 960px; margin: 0 auto; gap: 24px !important; }
.eko-l-panel { padding: 24px !important; }
.eko-l-steps { max-width: 860px; margin: 0 auto 32px !important; gap: 24px !important; }
.eko-l-faq { max-width: 70ch !important; }
#eko-landing-foot { margin: 64px var(--gutter) 0 !important; padding: 32px 16px 140px !important; }

@media (max-width: 760px) {
  #eko-auth-stage > #eko-launch.eko-hero { min-height: 0; padding: 40px 20px 150px !important; }
  .eko-hero__palm, #eko-launch.eko-hero::before { width: 120px !important; bottom: 92px !important; }
  .eko-hero__palm { left: -40px !important; }
  #eko-launch.eko-hero::before { right: -40px; }
  .eko-hero__bush, #eko-launch.eko-hero::after { width: 150px !important; bottom: 84px !important; }
  .eko-hero__tuki { display: none !important; }
  .eko-hero__ground { height: 128px !important; }
  .eko-hero__facts { grid-template-columns: repeat(2, minmax(0, 150px)); gap: 10px !important; bottom: 20px !important; }
  .eko-l-notes { gap: 24px 14px !important; }
  #eko-landing-foot { margin-top: 48px !important; }
}
@media (max-width: 400px) { .eko-l-notes { grid-template-columns: minmax(0, 1fr) !important; max-width: 300px; } .eko-l-notes p { font-size: 15px !important; } }

@media (max-width: 999px) { .eko-hero__tuki { display: none !important; } }

/* ---- v11 ---- */
.eko-hero__ground { border-top: 0 !important; }
.eko-l-panel { border: 0 !important; background: rgba(255, 255, 255, .7) !important; }
#eko-landing-foot { border-top: 0 !important; }
#eko-launch .eko-hero__have a, #eko-landing .eko-l-faq a, #eko-landing-foot nav a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 4px; }

/* ---- v13: optional installers (the browser stays the headline) ---- */
.eko-l-downloads { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 18px; max-width: 960px; margin: 0 auto; }
.eko-l-downloads .eko-l-panel { display: flex; flex-direction: column; gap: 8px; padding: 20px 16px 18px !important; text-align: center; }
.eko-l-downloads .eko-dl-name { margin: 0; font: bold 20px/1.2 Arial, 'Segoe UI', sans-serif; color: #18384f; }
.eko-l-downloads .eko-dl-meta { margin: 0; font-size: 13px; line-height: 1.5; color: #4a6076; }
.eko-l-downloads .eko-l-slab { width: 100%; min-width: 0; min-height: 54px; margin-top: auto; padding: 4px 14px 8px; font-size: 17px; }
.eko-dl-sha { margin: 20px 0 0; text-align: center; font-size: 14px; }
@media (max-width: 760px) {
  .eko-l-downloads { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  .eko-l-downloads .eko-l-slab { font-size: 18px; }
}
@media (max-width: 400px) { .eko-l-downloads { grid-template-columns: minmax(0, 1fr); max-width: 320px; } }