/* משה לוי · "Bilingue · לפני/אחרי": וילון צהוב וטבעת מהלוגו. design.md הוא המקור.
   Shared by index.html (rtl) and fr/index.html (ltr): only logical properties, so the French page is a mirror. */
:root {
  --bg: #FFFFFF;
  --surface: #F2F5F6;
  --ink: #161619;
  --muted: #4E5A60;
  --primary: #F9DE36;
  --primary-ink: #161619;
  --soft: #E4EAED;
  --accent: #AEBCC2;
  --line: #C9D3D7;
  --focus: #161619;
  --radius: 18px;
  --radius-pill: 999px;
  --k-outline-ink: #161619;
  --font-head: "Fredoka Variable", system-ui, sans-serif;
  --font-body: "Open Sans Variable", system-ui, sans-serif;
  --gutter: 16px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.65; overflow-x: clip; }
body[lang="fr"] { line-height: 1.55; }
main { overflow-x: clip; }
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--font-head); font-weight: 600; }
h1 { font-size: 34px; line-height: 1.12; }
h2 { font-size: 28px; line-height: 1.2; margin-bottom: 20px; }
h3 { font-size: 20px; line-height: 1.3; }
a { color: var(--ink); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.skip-link { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 12px; }
.skip-link:focus { top: 12px; }
.demo-banner { min-height: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px var(--gutter); background: var(--ink); color: #fff; font-size: 14px; line-height: 1.4; text-align: center; }
.wrap { max-width: 1180px; margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Header with the language switch ---------- */
.top { position: sticky; top: 0; z-index: 50; background: rgb(255 255 255 / .94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--soft); }
.top__inner { max-width: 1180px; margin-inline: auto; padding: 8px var(--gutter); display: flex; align-items: center; gap: 10px; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; font-family: var(--font-head); font-weight: 600; font-size: 18px; min-height: 44px; }
.brand img { width: 40px; height: 40px; border-radius: 50%; }
.top__nav { display: none; }
.lang { display: flex; gap: 4px; margin-inline-start: auto; padding: 3px; border: 1px solid var(--line); border-radius: 999px; }
.lang a { display: grid; place-items: center; min-width: 44px; min-height: 40px; padding: 0 10px; border-radius: 999px; text-decoration: none; font-family: var(--font-head); font-weight: 600; font-size: 15px; }
.lang a[aria-current="page"] { background: var(--primary); }
.lang__long { display: none; }
.top__wa { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: var(--ink); }
.top__wa svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Hero ---------- */
.hero { padding: 28px 0 56px; }
.hero__grid { display: grid; gap: 22px; }
.eyebrow { font-family: var(--font-head); font-weight: 600; font-size: 15px; color: var(--muted); margin-bottom: 8px; }
.hero__frame { position: relative; width: 300px; max-width: 100%; }
.ring { position: absolute; fill: none; stroke: var(--primary); stroke-width: 6; pointer-events: none; }
.ring--hero { width: 340px; height: 340px; top: 50%; margin-top: -170px; inset-inline-start: 50px; }
.hero__lead { color: var(--muted); }
.hero__actions { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }
.hero__actions .k-btn { width: 100%; }
.rating { margin-top: 14px; font-size: 15px; color: var(--muted); }
.rating strong { color: var(--ink); }

/* ---------- Before/after. Without JS: two captioned figures side by side. ---------- */
.ba { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ba__fig { margin: 0; position: relative; }
.ba__fig--before { order: -1; }
.ba__fig img { width: 100%; border-radius: 12px; }
.ba__fig figcaption { position: absolute; top: 8px; inset-inline-start: 8px; font-family: var(--font-head); font-weight: 600; font-size: 15px; line-height: 1; padding: 6px 10px; border-radius: 999px; }
.ba__fig--before figcaption { background: #161619; color: #fff; }
.ba__fig--after figcaption { background: var(--primary); color: var(--ink); }
.ba__bar { display: none; }

/* With JS (ba.js adds .is-ba): one frame; "before" is a window that slides away, its picture
   slides back the same amount, so the picture stays still (design-trades §5.2). */
.ba.is-ba { display: block; overflow: hidden; border-radius: var(--radius); background: var(--soft); }
.ba--tall.is-ba { aspect-ratio: 3 / 4; }
.ba--square.is-ba { aspect-ratio: 1 / 1; }
.ba.is-ba .ba__fig { position: absolute; inset: 0; }
.ba.is-ba .ba__fig--before { overflow: hidden; }
.ba.is-ba .ba__fig img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.ba.is-ba .ba__fig--before figcaption { inset-inline-start: auto; inset-inline-end: 12px; top: 12px; }
.ba.is-ba .ba__fig--after figcaption { inset-inline-start: 12px; top: 12px; }
.ba.is-ba .ba__bar { display: block; position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: 12px; z-index: 2; background: var(--primary); opacity: 0; }
.ba__bar span { position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: var(--primary); box-shadow: 0 4px 12px rgb(0 0 0 / .25); }
.ba__bar span::before { content: "‹ ›"; position: absolute; inset: 0; display: grid; place-items: center; font-weight: 700; font-size: 16px; color: var(--ink); }
.ba.is-moving .ba__bar { opacity: 1; }
/* "after" shown: the window has left through the far side (rtl: left, ltr: right). */
.ba.is-after .ba__fig--before { transform: translateX(-100%); }
.ba.is-after .ba__fig--before img { transform: translateX(100%); }
[dir="ltr"] .ba.is-after .ba__fig--before { transform: translateX(100%); }
[dir="ltr"] .ba.is-after .ba__fig--before img { transform: translateX(-100%); }
.ba__toggle { display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); position: relative; }
.ba__toggle[hidden] { display: none; }
.ba__toggle button { font: inherit; font-family: var(--font-head); font-weight: 600; font-size: 15px; min-height: 40px; min-width: 64px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: var(--ink); cursor: pointer; }
.ba__toggle button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.ba__hint { padding-inline: 6px; font-weight: 700; }
[dir="ltr"] .ba__hint { transform: scaleX(-1); }

/* ---------- Bilingue band ---------- */
.bilingue { background: var(--primary); min-height: 88px; display: flex; align-items: center; justify-content: center; padding: 16px var(--gutter); text-align: center; }
.bilingue p { font-family: var(--font-head); font-weight: 600; font-size: 24px; line-height: 1.2; }
.bilingue span { display: inline-block; }

/* ---------- Sections ---------- */
section:not(.hero) { padding-block: 56px; }
.ba2__grid { display: grid; gap: 20px; }
.ba2__grid > div:first-child p { color: var(--muted); }
.ba2__frame { max-width: 420px; }

.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.card { display: flex; align-items: center; gap: 14px; padding: 18px; background: var(--surface); border-radius: var(--radius); }
.card h3 { font-size: 18px; }
.card__ring { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 4px solid var(--primary); display: grid; place-items: center; }
.card__ring svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.field__grid { display: grid; grid-template-columns: 1.4fr 1fr; align-items: end; }
.field__a { border-radius: var(--radius); overflow: hidden; grid-column: 1 / span 2; grid-row: 1; width: 82%; }
.field__b { grid-column: 2; grid-row: 1; margin-bottom: -40px; position: relative; z-index: 1; }
.field__b > div { border-radius: var(--radius); overflow: hidden; border: 6px solid var(--bg); }
.field img { width: 100%; }

.reviews { margin-top: 24px; background: var(--surface); }
.reviews__grid { display: grid; gap: 14px; }
.reviews__grid blockquote { margin: 0; padding: 20px; background: var(--bg); border-radius: var(--radius); }
.reviews__grid blockquote > p[lang] { text-align: start; }
.reviews__grid .tr { font-size: 15px; color: var(--muted); margin-top: 8px; }
.reviews__label { font-family: var(--font-head); font-weight: 600; font-size: 15px; color: var(--muted); margin: 8px 0 -4px; }
blockquote footer { font-size: 15px; color: var(--muted); margin-top: 10px; }
.reviews__more { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; }
.k-link { min-height: 44px; display: inline-flex; align-items: center; }

/* ---------- End: the ring ---------- */
.end__ring { position: relative; width: 320px; height: 320px; max-width: 100%; display: grid; place-items: center; margin-inline: auto; }
.ring--end { inset: 0; width: 100%; height: 100%; stroke-width: 4.4; }
.end__body { position: relative; width: 78%; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.end h2 { font-size: 24px; margin: 0; }
.end__body .k-btn { padding-inline: 1.1em; }
.end__body a:not(.k-btn) { display: inline-block; min-height: 44px; padding-block: 10px; font-weight: 700; }

.foot { padding: 28px 0 24px; font-size: 15px; line-height: 1.5; border-top: 1px solid var(--soft); }
.foot__inner { display: grid; gap: 6px; }
.foot__brand { display: flex; align-items: center; gap: 10px; position: relative; }
.foot__brand img { width: 48px; height: 48px; border-radius: 50%; }
.foot__splash { position: absolute; top: -2px; inset-inline-start: 36px; width: 14px; height: 14px; border-radius: 50% 40% 55% 45%; background: conic-gradient(#7B4FB0, #E0559A, #3B82D6, #F9DE36, #7B4FB0); }
.foot a { display: inline-block; min-height: 44px; padding-block: 11px; }
.dock { position: fixed; inset-inline: 0; bottom: 0; z-index: 60; display: flex; gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgb(255 255 255 / .96); border-top: 1px solid var(--soft); transition: transform 300ms var(--k-ease), opacity 300ms var(--k-ease); }
.dock > * { flex: 1 1 0; }
.dock.is-hidden { transform: translateY(110%); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .dock { transition: none; } }
body { padding-bottom: 76px; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .ba.is-ba .ba__fig--before, .ba.is-ba .ba__fig--before img { transition: transform var(--ba-dur, 500ms) var(--k-ease-inout); }
  .ba.is-ba .ba__bar { transition: opacity 200ms ease; }
  .ba__toggle.is-new { animation: chip-in 200ms var(--k-ease-out) both; }
  .ba__toggle.is-new .ba__hint { animation: nudge 400ms var(--k-ease) 300ms both; }
  html.intro .ring--hero { animation: ring-turn 1600ms var(--k-ease-out) 300ms both; }
  .k-motion .bilingue__he, .k-motion .bilingue__fr { opacity: 0; transition: transform 600ms var(--k-ease-out), opacity 600ms var(--k-ease-out); }
  .k-motion .bilingue__he { transform: translateX(24px); }
  .k-motion .bilingue__fr { transform: translateX(-24px); }
  .k-motion .bilingue.is-in .bilingue__he, .k-motion .bilingue.is-in .bilingue__fr { opacity: 1; transform: none; }
  .k-motion .card .card__ring { transform: rotate(-90deg); opacity: 0; transition: transform 500ms var(--k-ease-out) 150ms, opacity 500ms 150ms; }
  .k-motion .card.is-in .card__ring { transform: none; opacity: 1; }
  .k-motion .end__ring .ring--end { transform: scale(.85); opacity: 0; transition: transform 700ms var(--k-spring), opacity 700ms; }
  .k-motion .end__ring.is-in .ring--end { transform: none; opacity: 1; }
}
@keyframes ring-turn { from { transform: rotate(-20deg); } to { transform: none; } }
@keyframes chip-in { from { transform: scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes nudge { 50% { transform: translateX(-6px); } }

/* ---------- Subpages ---------- */
.subpage__main { max-width: 720px; margin-inline: auto; padding: 48px var(--gutter) 64px; }
.subpage__main h1 { margin-bottom: 16px; }
.subpage__main h2 { font-size: 22px; margin: 28px 0 10px; }
.subpage__main p, .subpage__main li { margin-bottom: 8px; }
.subpage__eyebrow { color: var(--muted); font-weight: 700; }
.subpage__back { display: inline-block; min-height: 44px; padding-block: 10px; font-weight: 700; }
body.subpage { padding-bottom: 0; }

/* ================= Desktop ================= */
@media (min-width: 1000px) {
  :root { --gutter: 24px; }
  body { font-size: 18px; }
  h1 { font-size: 56px; }
  h2 { font-size: 40px; margin-bottom: 28px; }
  h3 { font-size: 22px; }
  .top__inner { min-height: 72px; }
  .top__nav { display: flex; gap: 6px; margin-inline-start: 24px; }
  .top__nav a { text-decoration: none; font-weight: 600; padding: 10px 14px; border-radius: 999px; }
  .top__nav a:hover { background: var(--surface); }
  .lang__long { display: inline; }
  .lang__short { display: none; }
  .hero { padding: 56px 0 96px; }
  .hero__grid { grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 20px; align-items: start; }
  .hero__text { grid-column: 1 / span 5; grid-row: 1; padding-top: 48px; }
  .hero__more { grid-column: 1 / span 5; grid-row: 2; }
  .hero__frame { grid-column: 7 / span 5; grid-row: 1 / span 2; width: 480px; }
  .ring--hero { width: 560px; height: 560px; margin-top: -280px; inset-inline-start: 120px; }
  .hero__actions { flex-direction: row; }
  .hero__actions .k-btn { width: auto; }
  .bilingue { min-height: 120px; }
  .bilingue p { font-size: 36px; }
  section:not(.hero) { padding-block: 88px; }
  .ba2__grid { grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: center; }
  .ba2__grid > div:first-child { grid-column: 1 / span 5; }
  .ba2__frame { grid-column: 7 / span 5; max-width: none; }
  .cards { grid-template-columns: 1fr 1fr; gap: 18px; }
  .field__grid { grid-template-columns: 1.6fr 1fr; gap: 24px; align-items: center; }
  .field__a { grid-column: 1; width: auto; }
  .field__b { grid-column: 2; margin: 0 -60px 0 0; }
  [dir="ltr"] .field__b { margin: 0 0 0 -60px; }
  .reviews__grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .end__ring { width: 460px; height: 460px; margin-inline: 0; }
  .end h2 { font-size: 32px; }
  .foot__inner { grid-template-columns: repeat(3, auto); justify-content: space-between; align-items: center; }
  .dock { display: none; }
  body { padding-bottom: 0; }
}