/* The One — one stylesheet for both directions.
   Logical properties only: the document's dir attribute decides which side
   is the start. Palette from the Vibez design system (Gefen, 2026-08-30).
   Content-and-layout treatment; the visual design pass is Gefen's. */

:root {
  --paper: #f7f2ec;
  --paper-deep: #efe6dc;
  --ink: #2a1219;
  --plum: #661c32;
  --plum-soft: #8a4a5c;
  --muted: #7a6469;
  --line: #e2d3cc;
  --orange: #f77049;
  --orange-deep: #d9562f;
  --pink: #ffcfed;
  --lime: #d7ed72;
  --measure: 62ch;
  --page: 1120px;
  --sans-he: "IBM Plex Sans Hebrew", "Heebo", "Assistant", "Segoe UI", "Helvetica Neue", Arial, system-ui, sans-serif;
  --sans-en: "IBM Plex Sans", "Segoe UI", "Helvetica Neue", Arial, system-ui, sans-serif;
  --serif: "Frank Ruhl Libre", Georgia, "Times New Roman", "David", serif;
  color-scheme: light;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans-en);
  font-size: 1.0625rem;
  line-height: 1.55;
  text-align: start;
  hyphens: auto;
}

html[dir="rtl"] body {
  font-family: var(--sans-he);
  line-height: 1.65;
  hyphens: none;
  letter-spacing: 0;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
  color: var(--plum);
}

html[dir="rtl"] :is(h1, h2, h3, h4) { line-height: 1.25; }

h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); }
h3 { font-size: 1.25rem; }
html[dir="rtl"] h1 { font-size: clamp(2rem, 5.5vw, 3.2rem); }

p { margin: 0; max-width: var(--measure); }
p + p { margin-block-start: 0.85em; }

a { color: var(--plum); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--orange-deep); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

bdi, .ltr { direction: ltr; unicode-bidi: isolate; }

.eyebrow {
  font-family: var(--sans-en);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--plum-soft);
}

.muted { color: var(--muted); }
.small { font-size: 0.9rem; }

mark {
  background: linear-gradient(transparent 35%, var(--lime) 35%, var(--lime) 92%, transparent 92%);
  color: inherit;
  padding-inline: 0.1em;
}

/* Layout ------------------------------------------------------------ */

.wrap {
  width: min(var(--page), calc(100% - 2.5rem));
  margin-inline: auto;
}

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 5;
  background: color-mix(in srgb, var(--paper) 92%, white);
  border-block-end: 1px solid var(--line);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.75rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--serif);
  font-size: 1.35rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--ink);
}

.brand .mark { width: 1.6rem; height: 1.6rem; flex: none; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  font-size: 0.95rem;
}

.site-nav a { text-decoration: none; color: var(--plum-soft); }
.site-nav a:hover { color: var(--orange-deep); }
.site-nav .lang { font-weight: 600; color: var(--plum); }

section { padding-block: clamp(3rem, 7vw, 5.5rem); }
section + section { border-block-start: 1px solid var(--line); }

.section-head { display: grid; gap: 0.75rem; margin-block-end: 2rem; }

/* Hero -------------------------------------------------------------- */

.hero { padding-block: clamp(2.5rem, 6vw, 5rem); }

.hero .wrap {
  display: grid;
  gap: 2.5rem;
  align-items: center;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}

.hero-copy { display: grid; gap: 1.25rem; }
.hero-copy h1 span { display: block; }
.hero-copy .lede { font-size: 1.2rem; }
.hero-copy .lede strong { font-weight: 600; color: var(--plum); }

.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-block-start: 0.5rem; }

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.4rem;
  min-height: 3rem;
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  font-weight: 600;
  font-size: 1.05rem;
  text-decoration: none;
  border: 0;
  cursor: pointer;
}

.button:hover { background: var(--orange-deep); color: #fff; }
.button svg { width: 1.2em; height: 1.2em; flex: none; }
.button.secondary { background: transparent; color: var(--plum); box-shadow: inset 0 0 0 1.5px var(--plum); }
.button.secondary:hover { background: var(--paper-deep); }

.fineprint { font-size: 0.9rem; color: var(--muted); }

/* The phone mock: real messages from the live joining form. */
.phone {
  justify-self: center;
  width: min(100%, 320px);
  border: 1.5px solid var(--line);
  border-radius: 2rem;
  background: #fff;
  padding: 1.25rem 1rem 1.5rem;
  box-shadow: 0 1px 0 var(--line), 0 18px 40px -28px rgb(102 28 50 / 45%);
}

.phone-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-block-end: 0.85rem;
  margin-block-end: 0.85rem;
  border-block-end: 1px solid var(--line);
  font-size: 0.9rem;
}

.phone-bar .avatar {
  width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--plum); color: var(--pink);
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 1rem;
}

.phone-bar .name { font-weight: 600; }
.phone-bar .status { color: var(--muted); font-size: 0.8rem; }

.chat { display: grid; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }

.chat li {
  max-width: 88%;
  padding: 0.55rem 0.8rem;
  border-radius: 1.1rem;
  font-size: 0.95rem;
  line-height: 1.45;
  background: var(--paper-deep);
  justify-self: start;
  border-end-start-radius: 0.3rem;
}

.chat li.member {
  justify-self: end;
  background: var(--pink);
  border-end-start-radius: 1.1rem;
  border-end-end-radius: 0.3rem;
}

.chat li.choice {
  background: transparent;
  border: 1px solid var(--line);
  font-size: 0.85rem;
  color: var(--muted);
}

/* Notes, steps, grids ---------------------------------------------- */

.notes {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.note {
  display: grid;
  gap: 0.5rem;
  align-content: start;
  padding: 1.4rem 1.4rem 1.6rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 0.35rem;
  position: relative;
}

.note::before {
  content: "";
  position: absolute;
  inset-block-start: -0.55rem;
  inset-inline-start: 1.2rem;
  width: 3.2rem; height: 1.1rem;
  background: rgb(215 237 114 / 65%);
  transform: rotate(-3deg);
}

.note .tag {
  font-family: var(--sans-en);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--plum-soft);
}

html[dir="rtl"] .note .tag { font-family: var(--sans-he); letter-spacing: 0; font-size: 0.85rem; }

.note h3 { font-family: var(--sans-en); font-weight: 600; font-size: 1.1rem; color: var(--ink); }
html[dir="rtl"] .note h3 { font-family: var(--sans-he); }
.note p { font-size: 0.98rem; }

.steps { counter-reset: step; }
.steps .note { padding-inline-start: 4.2rem; }
.steps .note::before { display: none; }
.steps .note::after {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  inset-block-start: 1.25rem;
  inset-inline-start: 1.25rem;
  width: 2rem; height: 2rem;
  border-radius: 50%;
  background: var(--plum);
  color: var(--pink);
  display: grid; place-items: center;
  font-family: var(--serif);
  font-size: 1.1rem;
}

.two-col {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}

.plain-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.6rem; max-width: var(--measure); }
.plain-list li { padding-inline-start: 1.4rem; position: relative; }
.plain-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.62em;
  width: 0.55rem; height: 0.55rem;
  border-radius: 50%;
  background: var(--orange);
}

.numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  margin-block: 1.75rem;
  padding-block: 1.25rem;
  border-block: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}

.numbers div { display: grid; gap: 0.1rem; }
.numbers b { font-family: var(--serif); font-size: 2rem; font-weight: 400; color: var(--plum); line-height: 1; }
.numbers span { font-size: 0.85rem; color: var(--muted); }

.shelf {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block: 1.25rem;
  list-style: none;
  padding: 0;
}

.shelf li {
  font-family: var(--serif);
  font-size: 0.95rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--plum);
}

/* Vibez frames ------------------------------------------------------ */

.frames {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.frame {
  aspect-ratio: 9 / 16;
  border-radius: 1rem;
  padding: 1rem;
  display: grid;
  align-content: end;
  gap: 0.35rem;
  color: var(--ink);
  background:
    linear-gradient(160deg, rgb(255 255 255 / 55%), rgb(255 255 255 / 0%) 45%),
    var(--paper-deep);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}

.frame.plum { background: var(--plum); color: var(--pink); }
.frame.lime { background: var(--lime); }
.frame .paper {
  background: #fff;
  color: var(--ink);
  padding: 0.75rem 0.85rem;
  border-radius: 0.2rem;
  transform: rotate(-1.5deg);
  display: grid;
  gap: 0.2rem;
  font-size: 0.9rem;
}
.frame .paper b { font-family: var(--serif); font-size: 1.2rem; font-weight: 400; }
.frame .sticker {
  position: absolute;
  inset-block-start: 1rem;
  inset-inline-end: 1rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: var(--lime);
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  transform: rotate(6deg);
}
.frame.lime .sticker { background: var(--orange); color: #fff; }
.frame.plum .sticker { background: var(--pink); }

/* Trust, FAQ, partners --------------------------------------------- */

.trust { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.trust .note::before { display: none; }

details {
  border-block-end: 1px solid var(--line);
  padding-block: 0.9rem;
  max-width: 48rem;
}
details summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}
details summary::-webkit-details-marker { display: none; }
details summary::after {
  content: "+";
  font-family: var(--sans-en);
  color: var(--plum-soft);
  font-size: 1.3rem;
  line-height: 1;
}
details[open] summary::after { content: "–"; }
details p { margin-block-start: 0.6rem; }

.partners-strip {
  background: var(--plum);
  color: var(--pink);
}
.partners-strip h2, .partners-strip a { color: #fff; }
.partners-strip p { color: var(--pink); }

.quiet { background: #fff; }

.status-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.98rem;
}
.status-table th, .status-table td {
  text-align: start;
  vertical-align: top;
  padding: 0.75rem 0.9rem;
  border-block-end: 1px solid var(--line);
}
.status-table th { font-family: var(--serif); font-weight: 400; color: var(--plum); font-size: 1.15rem; }
.table-wrap { overflow-x: auto; }

blockquote {
  margin: 1.5rem 0;
  padding-inline-start: 1.25rem;
  border-inline-start: 3px solid var(--orange);
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--plum);
  max-width: var(--measure);
}
blockquote p { max-width: none; }

.site-footer {
  border-block-start: 1px solid var(--line);
  padding-block: 2.5rem 3rem;
  font-size: 0.9rem;
  color: var(--muted);
}
.site-footer .wrap { display: grid; gap: 0.6rem; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.site-footer a { color: var(--plum-soft); }

/* 404 */
.notfound { min-height: 60vh; display: grid; place-items: center; text-align: center; }
.notfound .wrap { display: grid; gap: 1rem; justify-items: center; }

/* Responsive --------------------------------------------------------- */

@media (max-width: 880px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .notes, .trust, .frames { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .two-col { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .notes, .trust { grid-template-columns: 1fr; }
  .frames { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .frames li:nth-child(3) { display: none; }
  .site-nav { gap: 0.9rem; font-size: 0.9rem; }
  .cta-row .button { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}