/* Hosts landing page (hosts.html, hosts-en.html). Colours and fonts come only from theme.css tokens.
   Mobile first; 4px spacing scale; every tap target 44px or more. */
:root { --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --wrap: 1080px; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1rem/1.6 var(--font-body); overflow-x: clip; }
a { color: var(--accent); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
h1, h2 { font-family: var(--font-display); font-weight: var(--fw-display); letter-spacing: -.01em; margin: 0; text-wrap: balance; }
[dir="rtl"] h1, [dir="rtl"] h2 { letter-spacing: 0; }   /* Hebrew headings fall back to Frank Ruhl Libre inside --font-display */
h2 { font-size: 1.75rem; line-height: 1.2; }
[dir="rtl"] h2 { line-height: 1.3; }
h3 { font: 600 1.0625rem/1.35 var(--font-body); margin: 0; }
p { margin: 0; }
p, li { text-wrap: pretty; }   /* no single orphan word on the last line */

.skip { position: absolute; inset-inline-start: var(--sp-4); top: -100px; z-index: 10; padding: var(--sp-3) var(--sp-4); border-radius: 12px; background: var(--surface); color: var(--accent); font-weight: 700; }
.skip:focus { top: var(--sp-2); }

/* header */
.top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); max-width: var(--wrap); margin: 0 auto; padding: var(--sp-3) var(--sp-4); padding-top: calc(var(--sp-3) + env(safe-area-inset-top)); }
.brandmark { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--ink); white-space: nowrap; direction: ltr; }
.bm-name { font: var(--fw-display) 1.375rem/1 var(--font-display); letter-spacing: -.015em; }
.lang-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sp-4); border-radius: 999px; background: var(--chip); color: var(--ink); font-weight: 600; font-size: .9375rem; text-decoration: none; }

main { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--sp-4); }
main > section { padding: var(--sp-10) 0 0; }
.answer { margin-top: var(--sp-3); font-size: 1.0625rem; color: var(--muted); max-width: 60ch; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 var(--sp-6); border-radius: 14px; font-weight: 700; font-size: 1rem; line-height: 1.2; text-align: center; text-decoration: none; }
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow); }
.btn-ghost { background: var(--surface); color: var(--accent); box-shadow: 0 0 0 1px var(--line); }
.btn-accent { background: var(--happy); color: var(--happy-ink); }
.btn svg { flex: none; }
/* Sign-up not open yet: still the coral of the real button (the page's goal stays the strongest thing in the pilot box),
   with a clock icon, a "coming soon" label and a note under it. It has no href, so it is never a dead link. */
.btn.is-soon { gap: var(--sp-2); background: var(--happy); color: var(--happy-ink); box-shadow: var(--shadow); cursor: default; }
.soon-note { margin-top: var(--sp-3); font-size: .9375rem; color: var(--ink); max-width: 60ch; }
.soon-note[hidden] { display: none; }
.btn:not(.is-soon):active { transform: scale(.98); }
.btn[hidden] { display: none; }

/* hero */
.hero { display: grid; gap: var(--sp-8); padding-top: var(--sp-6); }
.eyebrow { margin-bottom: var(--sp-3); color: var(--accent); font-weight: 700; font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; }
[dir="rtl"] .eyebrow { letter-spacing: 0; font-size: .9375rem; text-transform: none; }
.hero h1 { font-size: clamp(2rem, 8.4vw, 3.25rem); line-height: 1.12; }
[dir="rtl"] .hero h1 { line-height: 1.22; }
.lead { margin-top: var(--sp-4); font-size: 1.0625rem; color: var(--muted); max-width: 56ch; }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.cta-row .btn { flex: 1 1 100%; }
.hero-note { margin-top: var(--sp-3); font-size: .9375rem; color: var(--muted); }

/* phone frame around the real demo screenshots */
.phone { margin: 0 auto; width: min(76vw, 300px); padding: 10px; border-radius: 44px; background: var(--lightbox-bg); box-shadow: var(--shadow-hi), 0 0 0 1px var(--ring); }
.phone img { display: block; width: 100%; height: auto; border-radius: 34px; background: var(--surface); }
.phone figcaption { margin: var(--sp-3) var(--sp-2) var(--sp-1); color: var(--badge-bg); font-size: .8125rem; line-height: 1.45; text-align: center; }

/* founder */
.founder { display: flex; gap: var(--sp-4); align-items: flex-start; }
.founder > div:last-child { max-width: 60ch; }
.founder h2 { font-size: 1.375rem; }
.founder p { margin-top: var(--sp-2); color: var(--muted); }
.avatar { position: relative; flex: none; width: 72px; height: 72px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font: var(--fw-display) 1.75rem/1 var(--font-display); }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* benefits */
.grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); margin-top: var(--sp-6); }
.feat { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-5); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow), 0 0 0 1px var(--ring); }
.feat p { color: var(--muted); font-size: .9375rem; line-height: 1.55; }
/* phone: icon beside the title, so four cards don't fill four screens */
@media (max-width: 639px) {
  .feat { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: var(--sp-4); row-gap: var(--sp-1); padding: var(--sp-4); }
  .feat .ico { grid-row: span 2; }
  .feat h3 { align-self: end; }
}
.ico { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: var(--accent-soft); color: var(--accent); }
.ico-danger { background: var(--danger-soft); color: var(--danger); }
.also { margin-top: var(--sp-4); color: var(--muted); font-size: .9375rem; }

/* how it works */
.how { display: grid; gap: var(--sp-8); }
.steps { list-style: none; margin: var(--sp-6) 0 0; padding: 0; display: grid; gap: var(--sp-4); counter-reset: step; }
.steps li { position: relative; padding-inline-start: 56px; counter-increment: step; min-height: 44px; }
.steps li::before { content: counter(step); position: absolute; inset-inline-start: 0; top: 0; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.steps p { margin-top: var(--sp-1); color: var(--muted); }

/* pilot */
.pilot { margin-top: var(--sp-10); padding: var(--sp-6) var(--sp-5); border-radius: var(--radius); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--ring); }
main > section.pilot { padding-top: var(--sp-6); }
.pilot .answer { color: var(--ink); }
.facts { margin: var(--sp-4) 0 0; padding-inline-start: var(--sp-5); }
.facts li + li { margin-top: var(--sp-1); }
.signup { display: grid; gap: var(--sp-3); margin-top: var(--sp-6); }
.privacy { margin-top: var(--sp-4); font-size: .9375rem; color: var(--ink); max-width: 60ch; }

/* FAQ */
.faq { max-width: 760px; }
.qa { padding: var(--sp-4) 0; border-bottom: 1px solid var(--line); }
.faq h2 + .qa { margin-top: var(--sp-3); }
.qa p { margin-top: var(--sp-1); color: var(--muted); }

.foot { max-width: var(--wrap); margin: var(--sp-10) auto 0; padding: var(--sp-8) var(--sp-4); padding-bottom: calc(var(--sp-8) + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); color: var(--muted); font-size: .9375rem; }
.foot p + p { margin-top: var(--sp-2); }
.foot a { display: inline-block; padding: var(--sp-3) 0; margin: calc(-1 * var(--sp-3)) 0; }

/* tablet and up */
@media (min-width: 640px) {
  .cta-row .btn { flex: 0 1 auto; }
  .grid { grid-template-columns: 1fr 1fr; }
  .signup { display: flex; flex-wrap: wrap; }
  .pilot { padding: var(--sp-8); }
}
/* tablet only: with an odd number of cards, the last one spans the full row instead of leaving a gap */
@media (min-width: 640px) and (max-width: 899px) {
  .grid > .feat:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* desktop: text beside the phone */
@media (min-width: 900px) {
  main > section { padding-top: var(--sp-12); }
  .hero { grid-template-columns: minmax(0, 1fr) 300px; align-items: center; column-gap: var(--sp-12); padding-top: var(--sp-8); }
  .how { grid-template-columns: minmax(0, 1fr) 280px; align-items: center; column-gap: var(--sp-12); }
  .phone { margin: 0; width: 100%; }
  /* five cards as 3 + 2: a 6-column track, first three span 2, last two span 3 */
  .grid { grid-template-columns: repeat(6, 1fr); }
  .grid > .feat { grid-column: span 2; }
  .grid > .feat:nth-child(n+4) { grid-column: span 3; }
  .pilot { margin-top: var(--sp-12); }
}

/* demo clips: real recordings of the demo in the phone frame (hero, the English "See it in 30 seconds" strip, the Hebrew film).
   hosts.js plays them only in view, muted, never under prefers-reduced-motion (poster + play button instead). */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.clip { position: relative; }
.clip-link { display: block; border-radius: 34px; }
.phone video { display: block; width: 100%; height: auto; aspect-ratio: 540 / 1168; border-radius: 34px; background: var(--surface); object-fit: cover; }
/* Captions: our own type on a dark scrim instead of the browser's black box. Each .vtt places its cues
   (line:...) above the demo's tab bar, or near the bottom of the film, so nothing is cut off by the rounded frame. */
.clip video::cue { font: 500 .8125rem/1.35 var(--font-body); color: #fff; background: rgb(var(--scrim-rgb) / .94); }
.clip-btn { position: absolute; top: var(--sp-5); width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
            background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-hi); cursor: pointer; }
.clip-btn[hidden] { display: none; }
.clip-sound { inset-inline-end: var(--sp-5); }
.clip-sound .i-sound, .clip-sound[aria-pressed="true"] .i-muted { display: none; }
.clip-sound[aria-pressed="true"] .i-sound { display: block; }
/* play/pause; after a narrated run ends (no loop with sound on), it becomes a replay button.
   Under reduced motion, a big play button in the middle of the poster until it plays. */
.clip-play { inset-inline-start: var(--sp-5); }
.clip-play .i-pause, .clip-play .i-replay, .clip.is-playing .clip-play .i-play { display: none; }
.clip.is-playing .clip-play .i-pause { display: block; }
.clip.is-ended:not(.is-playing) .clip-play .i-play { display: none; }
.clip.is-ended:not(.is-playing) .clip-play .i-replay { display: block; }
/* Demo recordings in a phone frame: the controls sit in a row under the frame, never on top of the demo's own
   logo, language picker or tab bar. */
figure.phone.clip { margin-bottom: 60px; }
.phone.clip > .clip-btn { top: calc(100% + var(--sp-2)); }
.phone.clip > .clip-play { inset-inline-start: calc(50% - 52px); }
.phone.clip > .clip-sound { inset-inline-end: calc(50% - 52px); }
.clip.is-reduced:not(.is-playing) .clip-play { top: 50%; inset-inline-start: 50%; width: 64px; height: 64px; transform: translate(-50%, -50%); }
[dir="rtl"] .clip.is-reduced:not(.is-playing) .clip-play { transform: translate(50%, -50%); }
.clip.is-reduced:not(.is-playing) .clip-play svg { width: 28px; height: 28px; }
.clips .clip-row { display: grid; gap: var(--sp-8); margin-top: var(--sp-6); justify-items: center; }
.clips .phone { width: min(72vw, 270px); margin: 0 auto; }
.phone-clip figcaption strong { display: block; font-size: .9375rem; }
.clips > .btn { margin-top: var(--sp-6); }
@media (min-width: 640px) {
  .clips .clip-row { grid-template-columns: 1fr 1fr; align-items: start; }
}
@media (min-width: 900px) {
  .clips .phone { width: 270px; margin: 0 auto; }
}

/* explainer film (hosts.html only): live action, so a rounded 9:16 card with a soft shadow, not a phone bezel
   (the phone is already in the shot). Up to 360px wide; on desktop it sits beside its title, like the hero.
   The film is narrated, so its sound button is a coral pill with a visible "with sound" hint until the sound is on. */
.film { text-align: center; }
.film .answer { margin-inline: auto; }
.film-card { width: min(84vw, 360px); margin: var(--sp-6) auto 0; overflow: hidden; border-radius: 24px; background: var(--surface);
             box-shadow: var(--shadow-hi), 0 0 0 1px var(--ring); }
.film-card video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; background: var(--surface); }
.film-card > .clip-btn { top: var(--sp-4); }
.film-card > .clip-play { inset-inline-start: var(--sp-4); }
.film-card > .clip-sound { inset-inline-end: var(--sp-4); }
.film > .btn { margin-top: var(--sp-6); }
@media (min-width: 900px) {
  .film { display: grid; grid-template-columns: minmax(0, 1fr) 360px; grid-template-rows: 1fr auto auto auto 1fr;
          column-gap: var(--sp-12); text-align: start; }
  .film > h2 { grid-column: 1; grid-row: 2; }
  .film > .answer { grid-column: 1; grid-row: 3; margin-inline: 0; }
  .film > .btn { grid-column: 1; grid-row: 4; justify-self: start; }
  .film-card { grid-column: 2; grid-row: 1 / -1; width: 100%; margin: 0; }
}
.clip-sound.has-hint { width: auto; min-width: 48px; height: 48px; grid-auto-flow: column; gap: var(--sp-2); padding: 0; padding-inline: var(--sp-4) var(--sp-3);
                       border-radius: 999px; background: var(--happy); color: var(--happy-ink); font: 700 .9375rem/1 var(--font-body); white-space: nowrap; }
.clip-sound.has-hint[aria-pressed="true"] { padding-inline: 0; }
.clip-sound.has-hint[aria-pressed="true"] .clip-hint { display: none; }
.film-card video { cursor: pointer; }

/* dark mode: the light demo screenshots and recordings are toned down so they don't glow on the dark page */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .phone img, :root:not([data-theme="light"]) .phone video { filter: brightness(.88); }
}
:root[data-theme="dark"] .phone img, :root[data-theme="dark"] .phone video { filter: brightness(.88); }