:root {
  --display: "Instrument Serif", Georgia, serif;
  --body: Manrope, system-ui, sans-serif;
  --ink: #14161f;
  --ink-2: #4a4e5c;
  --ink-3: #656978; /* 4.9:1 on paper; #6f7383 was 4.26:1, under 4.5:1 for the 13px demo steps */
  --paper: #f6f3ee;
  --card: #ffffff;
  --line: #e4ded4;
  --accent: #ff5a36;
  --accent-deep: #e8431f;
  --accent-ink: #ffffff;
  --accent-soft: #ffe6de;
  --teal: #0c776c; /* white on it 5.4:1 (badges), it on --teal-soft 4.6:1 (calendar digits) */
  --on-teal: #ffffff;
  --teal-soft: #dcf2ee;
  --wa: #0e7a40;
  --shadow: 0 1px 2px rgba(20,22,31,.06), 0 12px 40px rgba(20,22,31,.08);
  --shadow-sm: 0 1px 2px rgba(20,22,31,.06), 0 4px 14px rgba(20,22,31,.06);
  --r: 18px;
  /* Motion: the built-in CSS curves are too soft to feel intentional, so everything uses these.
     ease-out for things entering or answering a press, ease-in-out for things moving on screen. */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #f1eee8; --ink-2: #b9b6ae; --ink-3: #8f8c84;
    --paper: #12131a; --card: #1b1d26; --line: #2c2e3a;
    --accent-soft: #3a1d16; --teal: #3cc2b2; --teal-soft: #13302d; --wa: #25d366; --on-teal: #12131a;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 40px rgba(0,0,0,.35);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.25);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ink: #f1eee8; --ink-2: #b9b6ae; --ink-3: #8f8c84;
  --paper: #12131a; --card: #1b1d26; --line: #2c2e3a;
  --accent-soft: #3a1d16; --teal: #3cc2b2; --teal-soft: #13302d; --wa: #25d366; --on-teal: #12131a;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 40px rgba(0,0,0,.35);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.25);
  color-scheme: dark;
}

* { box-sizing: border-box; }
/* scroll-padding keeps menu jumps from landing section headings under the 68px sticky header */
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 17px/1.6 var(--body);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
a { color: inherit; }
img, svg { display: block; }
::selection { background: var(--accent-soft); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 600px) { .wrap { padding: 0 16px; } }

h1, h2, h3 { font-family: var(--display); font-weight: 400; letter-spacing: -.01em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(44px, 7vw, 84px); line-height: 1; }
h2 { font-size: clamp(34px, 4.6vw, 54px); line-height: 1.05; }
h3 { font-size: 26px; line-height: 1.15; }
p { text-wrap: pretty; }
em { font-style: italic; color: var(--accent); }
.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; }
.lede { font-size: 19px; color: var(--ink-2); max-width: 560px; }

/* Buttons. Press feedback is a small scale on :active so every tap visibly lands; hover only changes colour,
   and only on devices that really hover (a tap on a phone would otherwise leave the hover state stuck). */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 22px; border-radius: 999px;
  font: 600 16px/1 var(--body); text-decoration: none; border: 1.5px solid transparent; cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 6px 16px color-mix(in srgb, var(--accent) 28%, transparent); }
.btn-ghost { border-color: var(--line); background: var(--card); }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: var(--accent-deep); }
  .btn-ghost:hover { border-color: color-mix(in srgb, var(--ink) 22%, var(--line)); }
}
/* The arrow nudges toward where the button goes; in Hebrew that is to the left */
.btn .arr { display: inline-block; transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover .arr { transform: translateX(3px); }
  :lang(he) .btn:hover .arr { transform: translateX(-3px); }
}

/* Two labels stacked in one cell, crossfaded with a little blur so the eye reads one label changing, not two swapping */
.swap { display: inline-grid; }
.swap > * { grid-area: 1 / 1; transition: opacity 220ms ease, filter 220ms ease, transform 220ms var(--ease-out); }
.swap > .b { opacity: 0; filter: blur(3px); transform: translateY(4px); }
.swapped .swap > .a { opacity: 0; filter: blur(3px); transform: translateY(-4px); }
.swapped .swap > .b { opacity: 1; filter: none; transform: none; }

/* Nav */
header.nav { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--paper) 85%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color 200ms ease; }
header.nav.scrolled { border-bottom-color: var(--line); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; }
/* The mark is drawn (the "phi" symbol in each page's sprite), not the φ glyph, which looked different in every font.
   Its stem is currentColor so it follows the text colour into dark mode. The wordmark is always Manrope:
   it is Latin, and the Hebrew page's body font (Rubik) would otherwise give the name a second face. */
.logo { display: flex; align-items: center; gap: 8px; text-decoration: none; font: 800 21px/1 Manrope, system-ui, sans-serif; letter-spacing: -.035em; }
.logo-mark { width: 34px; height: 34px; flex: none; margin-inline: -3px -2px; }
.nav-links { display: flex; gap: 28px; align-items: center; font-size: 15px; font-weight: 500; }
.nav-links a:not(.btn) { text-decoration: none; color: var(--ink-2); transition: color 150ms ease; }
@media (hover: hover) and (pointer: fine) { .nav-links a:not(.btn):hover { color: var(--ink); } }
.nav-links .btn { padding: 10px 18px; font-size: 15px; box-shadow: none; }
.lang-switch { font-weight: 600; }
@media (max-width: 820px) { .nav-links a:not(.btn):not(.lang-switch) { display: none; } .nav-links { gap: 16px; } }

/* Hero */
.hero { padding: 72px 0 96px; }
.hero .wrap { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; }
.hero h1 { margin-bottom: 22px; }
.hero .ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0 28px; }
.hero .proof { font-size: 14px; color: var(--ink-3); display: flex; gap: 18px; flex-wrap: wrap; }
.hero .proof span::before { content: "✓ "; color: var(--teal); font-weight: 700; }
@media (max-width: 920px) { .hero .wrap { grid-template-columns: 1fr; gap: 48px; } .hero { padding: 40px 0 64px; } }

/* The hero copy arrives in a short cascade on first load: seen once per visit, so it can afford to be noticed */
.hero-copy > * { animation: rise 700ms var(--ease-out) both; }
.hero-copy > :nth-child(2) { animation-delay: 60ms; }
.hero-copy > :nth-child(3) { animation-delay: 120ms; }
.hero-copy > :nth-child(4) { animation-delay: 180ms; }
.hero-copy > :nth-child(5) { animation-delay: 240ms; }
.demo-wrap { animation: rise 900ms 200ms var(--ease-out) both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

/* Product demo: plays the real booking flow (pick a date, request, payment, approval) on a loop; main.js drives it.
   Pure CSS rather than a video or screenshot, so it stays sharp, tiny and in the page's language. */
.demo { position: relative; }
.mock-card { background: var(--card); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); padding: 22px; }
.mock-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.mock-head b { font: 400 26px/1 var(--display); }
.mock-head small { color: var(--ink-3); font-size: 13px; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal .dow { font-size: 11px; font-weight: 700; color: var(--ink-3); text-align: center; padding-bottom: 4px; }
.cal .d {
  aspect-ratio: 1; border-radius: 10px; display: grid; place-items: center; font-size: 14px; font-weight: 600;
  background: var(--teal-soft); color: var(--teal); position: relative;
  transition: background-color 300ms ease, color 300ms ease, box-shadow 300ms ease, transform 160ms var(--ease-out);
}
.cal .d.x { background: transparent; color: var(--ink-3); font-weight: 500; }
.cal .d.t { background: var(--line); color: var(--ink-3); }
.cal .d.press { transform: scale(.88); }
.cal .d.sel { background: var(--accent); color: #fff; box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 45%, transparent); }
/* The tap: a ring that spreads from the date the visitor "touched" */
.cal .d.press::after {
  content: ""; position: absolute; inset: -2px; border-radius: 12px; border: 2px solid var(--accent);
  animation: ring 600ms var(--ease-out) forwards;
}
@keyframes ring { from { opacity: .9; transform: scale(.8); } to { opacity: 0; transform: scale(1.45); } }
.legend { display: flex; gap: 16px; margin-top: 14px; font-size: 12px; color: var(--ink-3); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-end: 6px; vertical-align: -1px; }
.legend .lf { background: var(--teal-soft); border: 1px solid var(--teal); }
.legend .lt { background: var(--line); }
.legend .ls { background: var(--accent); }

/* Floating cards: hidden until their step. Enter slowly from slightly below, leave fast;
   the transition on each state is the one used when moving into it, so exit and entry can differ. */
.float {
  position: absolute; background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow);
  padding: 14px 16px; font-size: 14px;
  opacity: 0; transform: translateY(10px) scale(.96); filter: blur(4px);
  transition: opacity 200ms ease, transform 200ms var(--ease-out), filter 200ms ease;
}
.float.on {
  opacity: 1; transform: none; filter: none;
  transition: opacity 450ms var(--ease-out), transform 550ms var(--ease-out), filter 450ms var(--ease-out);
}
.float .meta { color: var(--ink-3); font-size: 12px; }
.float.req { inset-inline-end: -18px; bottom: -30px; width: 262px; transform-origin: bottom; }
.float.req .row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 2px; }
.float.req .who { font-weight: 700; }
.pill {
  font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 999px; background: var(--teal); color: var(--on-teal);
  transition: transform 160ms var(--ease-out), background-color 250ms ease;
}
.pill.press { transform: scale(.92); }
.req.swapped .pill { background: var(--ink); color: var(--paper); }
.float.paid { inset-inline-start: -36px; top: 40%; display: flex; align-items: center; gap: 10px; }
.float.paid .dot { width: 30px; height: 30px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-weight: 700; flex: none; }
.float.sent { inset-inline-end: 22px; top: -22px; display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-weight: 600; }
.float.sent svg { width: 18px; height: 18px; color: var(--wa); flex: none; }
@media (max-width: 600px) {
  .float.req { inset-inline-end: 8px; bottom: -74px; }
  .float.paid { inset-inline-start: 8px; top: auto; bottom: 64px; }
  .float.sent { inset-inline-end: 8px; top: -26px; }
}

/* The steps under the demo name what is happening; the active one fills a bar over its own duration (linear: it is a clock) */
.demo-steps { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; counter-reset: ds; }
.demo-steps li { font-size: 13px; font-weight: 600; color: var(--ink-3); position: relative; padding-top: 12px; transition: color 250ms ease; }
.demo-steps li::before { counter-increment: ds; content: counter(ds) " · "; }
.demo-steps li::after {
  content: ""; position: absolute; top: 0; inset-inline: 0; height: 3px; border-radius: 3px; background: var(--line);
}
.demo-steps li span.bar {
  position: absolute; top: 0; inset-inline: 0; height: 3px; border-radius: 3px; background: var(--accent); z-index: 1;
  transform: scaleX(0); transform-origin: left;
}
:lang(he) .demo-steps li span.bar { transform-origin: right; }
.demo-steps li.done, .demo-steps li.on { color: var(--ink); }
.demo-steps li.done span.bar { transform: scaleX(1); transition: transform 200ms ease; }
.demo-steps li.on span.bar { transform: scaleX(1); transition: transform var(--dur, 1.4s) linear; }
@media (max-width: 600px) { .demo-steps { margin-top: 100px; grid-template-columns: repeat(2, 1fr); row-gap: 14px; } }

/* Sections */
section { padding: 96px 0; }
section.tight { padding-top: 0; }
@media (max-width: 600px) { section { padding: 64px 0; } }
.sec-head { max-width: 720px; margin-bottom: 52px; }
/* :not(.eyebrow): the section label is a p too, and this rule used to turn it grey and 18px */
.sec-head p:not(.eyebrow) { color: var(--ink-2); font-size: 18px; margin: 16px 0 0; }

/* Features: a bento grid. The two wide cards show their claim happening instead of describing it. */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.feat { grid-column: span 2; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 28px; display: flex; flex-direction: column; }
.feat.wide { grid-column: span 4; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; }
.feat.half { grid-column: span 3; }
.feat .ic { width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; margin-bottom: 18px; }
.feat h3 { font-size: 24px; margin-bottom: 8px; }
.feat p { margin: 0; color: var(--ink-2); font-size: 16px; }
@media (max-width: 920px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .feat, .feat.half { grid-column: span 1; }
  .feat.wide { grid-column: span 2; }
}
@media (max-width: 600px) {
  .bento { grid-template-columns: 1fr; }
  .feat, .feat.half, .feat.wide { grid-column: span 1; }
  .feat.wide { grid-template-columns: 1fr; }
}
.vis { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 16px; font-size: 14px; min-height: 150px; display: grid; align-content: center; gap: 10px; }

/* "No double bookings": two managers approve the same date; one goes through, the other is refused */
.race-row { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.race-row .av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; background: var(--teal-soft); color: var(--teal); }
.race-row.b .av { background: var(--accent-soft); color: var(--accent); }
.race-row .what { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.race-row .res { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.race-row .res.ok { background: var(--teal); color: var(--on-teal); }
.race-row .res.no { background: var(--line); color: var(--ink-2); }
.js .vis-race .race-row { opacity: 0; transform: translateY(8px); transition: opacity 400ms var(--ease-out), transform 500ms var(--ease-out); }
.js .vis-race .race-row.b { transition-delay: 80ms; }
.js .vis-race .res { opacity: 0; transform: scale(.9); transition: opacity 250ms ease, transform 300ms var(--ease-out); }
.js .vis-race.play .race-row { opacity: 1; transform: none; }
.js .vis-race.play .res.ok { opacity: 1; transform: none; transition-delay: 700ms; }
.js .vis-race.play .res.no { opacity: 1; transform: none; transition-delay: 900ms; }
/* The refused row gives one small shake: it was refused, not ignored */
.js .vis-race.play .race-row.b { animation: nudge 360ms 900ms var(--ease-out) both; }
@keyframes nudge { 25% { translate: -4px 0; } 60% { translate: 3px 0; } }

/* "Multilingual": the same status line in three languages, with the layout direction following each */
.vis-lang { justify-items: stretch; }
.lang-line { display: grid; }
.lang-line > span {
  grid-area: 1 / 1; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px;
  display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow-sm);
  transition: opacity 300ms ease, filter 300ms ease, transform 350ms var(--ease-out);
}
.lang-line > span::before {
  content: "✓"; flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--teal-soft); color: var(--teal); font-weight: 800; font-size: 14px;
}
/* Status over date: the date is where the languages differ most (word order, weekday, month names) */
.lang-line > span i { font-style: normal; display: grid; gap: 2px; font-size: 13px; color: var(--ink-3); }
.lang-line > span i b { font-size: 15px; font-weight: 700; color: var(--ink); }
.lang-line > span small { margin-inline-start: auto; align-self: start; font-size: 11px; font-weight: 700; color: var(--ink-3); letter-spacing: .06em; }
.js .lang-line > span:not(.on) { opacity: 0; filter: blur(4px); transform: translateY(6px); }
.lang-dots { display: flex; gap: 6px; justify-content: center; }
.lang-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); transition: background-color 250ms ease, transform 250ms var(--ease-out); }
.lang-dots i.on { background: var(--accent); transform: scale(1.25); }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; counter-reset: s; position: relative; }
/* The top rule draws across as the steps come in, reading in the page's direction */
.steps::before { content: ""; position: absolute; top: 0; inset-inline: 0; height: 1px; background: var(--line); transform-origin: left; }
:lang(he) .steps::before { transform-origin: right; }
.js .steps::before { transform: scaleX(0); transition: transform 1100ms var(--ease-in-out); }
.js .steps.in::before { transform: none; }
.step { padding-block-start: 32px; padding-inline-end: 28px; }
.step::before { counter-increment: s; content: "0" counter(s); display: block; font: 400 56px/1 var(--display); color: var(--accent); margin-bottom: 14px; }
.step p { color: var(--ink-2); margin: 8px 0 0; }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } .step + .step { margin-top: 8px; } }

/* Use cases */
/* A plain list, not pills: they are not buttons, so they should not look pressable */
.uses { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 28px; }
.use { display: flex; align-items: baseline; gap: 10px; padding: 14px 0; border-top: 1px solid var(--line); font-weight: 600; font-size: 16px; }
.use::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); translate: 0 -2px; }
@media (max-width: 920px) { .uses { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .uses { column-gap: 16px; } .use { font-size: 14px; padding: 12px 0; } }

/* Case study */
.case { background: var(--ink); color: var(--paper); border-radius: 28px; padding: 72px 64px; text-align: center; }
:root[data-theme="dark"] .case { background: #000; color: #f1eee8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .case { background: #000; color: #f1eee8; } }
/* The quote has the block to itself, centred; the measure caps the line length so it still reads as a quote, not a paragraph */
.case blockquote { margin: 0 auto; max-width: 30ch; font: 400 clamp(28px, 3.8vw, 46px)/1.18 var(--display); }
.case .src { margin-top: 24px; opacity: .7; font-size: 15px; }
@media (max-width: 820px) { .case { padding: 40px 24px; } }

/* Pricing */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
@media (max-width: 920px) { .plans { grid-template-columns: 1fr; } }
.plan { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 32px; display: flex; flex-direction: column; transition: box-shadow 250ms ease, border-color 250ms ease; }
@media (hover: hover) and (pointer: fine) { .plan:hover { box-shadow: var(--shadow-sm); } }
.plan.hot { border: 2px solid var(--accent); position: relative; box-shadow: 0 18px 50px color-mix(in srgb, var(--accent) 14%, transparent); }
.plan.hot::after { content: "Most popular"; position: absolute; top: -13px; inset-inline-start: 28px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 999px; }
.plan h3 { font-size: 30px; }
.plan .for { color: var(--ink-3); font-size: 15px; margin: 4px 0 20px; }
.plan .price { font: 400 46px/1 var(--display); margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.plan .price small { font: 500 15px var(--body); color: var(--ink-3); }
.plan ul { list-style: none; padding: 0; margin: 22px 0 28px; flex: 1; }
.plan li { padding-block: 7px; padding-inline-start: 26px; position: relative; font-size: 15px; color: var(--ink-2); }
.plan li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--teal); font-weight: 700; }

/* FAQ. Where the browser can animate to height:auto (::details-content), the answer opens instead of jumping;
   elsewhere it still opens instantly, as before. */
.faq { interpolate-size: allow-keywords; }
/* On a computer the heading holds its place beside the questions while they open below it */
.faq-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 64px; align-items: start; }
.faq-wrap .sec-head { position: sticky; top: 100px; margin-bottom: 0; }
.faq details:first-child { padding-top: 6px; }
@media (max-width: 820px) { .faq-wrap { display: block; } .faq-wrap .sec-head { position: static; margin-bottom: 28px; } }
details { border-bottom: 1px solid var(--line); padding: 22px 0; }
summary { cursor: pointer; font-weight: 700; font-size: 18px; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; border-radius: 6px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-size: 26px; line-height: 1; color: var(--accent); flex: none; transition: transform 250ms var(--ease-out); }
details[open] summary::after { transform: rotate(45deg); }
details p { color: var(--ink-2); margin: 12px 0 0; }
details::details-content {
  block-size: 0; overflow: clip; opacity: 0;
  transition: block-size 300ms var(--ease-out), opacity 250ms ease, content-visibility 300ms allow-discrete;
}
details[open]::details-content { block-size: auto; opacity: 1; }

/* CTA + contact */
.cta { text-align: center; }
.cta h2 { max-width: 760px; margin: 0 auto 18px; }
.cta p:not(.eyebrow) { color: var(--ink-2); max-width: 560px; margin: 0 auto 32px; }
/* The form is one card, so it reads as one task; fields sit on the paper colour to stand out from it */
form.contact {
  max-width: 620px; margin: 0 auto; display: grid; gap: 12px; text-align: start;
  background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 28px; box-shadow: var(--shadow);
}
@media (max-width: 600px) { form.contact { padding: 18px; border-radius: 18px; } }
/* display: grid above beats the browser's [hidden] rule, so adding `hidden` to the form would not hide it without this */
form.contact[hidden] { display: none; }
/* The Hebrew email field: right-to-left while the Hebrew placeholder shows (dir="ltr" scrambled its word order),
   left-to-right once an address is typed */
:lang(he) form.contact input[type="email"]:not(:placeholder-shown) { direction: ltr; }
form.contact .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { form.contact .two { grid-template-columns: 1fr; } }
form.contact input, form.contact textarea, form.contact select {
  width: 100%; font: 400 16px var(--body); padding: 14px 16px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 400ms ease;
}
form.contact :is(input, textarea, select):focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); }
form.contact textarea { min-height: 110px; resize: vertical; }
/* Choosing a plan's button scrolls here and fills the select; a brief tint says which field changed */
form.contact select.picked { background-color: var(--accent-soft); transition-duration: 0s; }

/* WhatsApp: the direct link under the form, and a floating button on phones only */
.wa-alt { font-size: 15px; color: var(--ink-3); margin: 18px auto 0; }
/* #0e7a40 is 4.9:1 on the light paper (WhatsApp's #128c4a is 3.9:1, under 4.5:1 for 15px text) */
.wa-link { display: inline-flex; align-items: center; gap: 6px; color: var(--wa); font-weight: 700; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .wa-link:hover { text-decoration: underline; } }
.wa-ic { width: 18px; height: 18px; flex: none; }
.wa-float { display: none; }
@media (max-width: 820px) {
  .wa-float {
    display: grid; place-items: center; position: fixed; z-index: 20;
    inset-inline-end: 16px; bottom: max(16px, calc(env(safe-area-inset-bottom) + 12px));
    width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: #fff;
    box-shadow: 0 6px 20px rgba(0,0,0,.25);
    transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out), visibility 0s;
  }
  .wa-float:active { transform: scale(.94); transition-duration: 120ms; }
  .wa-float svg { width: 30px; height: 30px; }
  /* main.js sets .off while the contact section is on screen, so the button never covers the form's own WhatsApp button.
     It leaves faster than it comes back. visibility (switched after the fade) also takes it out of the tab order,
     so keyboard focus can't land on an invisible button. */
  .wa-float.off { opacity: 0; transform: scale(.9); pointer-events: none; visibility: hidden; transition: opacity 150ms ease, transform 150ms ease, visibility 0s 150ms; }
}

footer { padding: 40px 0 56px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 14px; }
footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; align-items: center; }

/* Hidden only once main.js has marked the page with .js, so the content still shows if the script never runs.
   Siblings come in one after another (main.js sets --i), 60ms apart: a cascade, never a wait. */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 600ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
.js .reveal.in { opacity: 1; transform: none; }
/* Plans are .reveal too, and the rule above would replace their hover transition; keep both (the delay is for the reveal only) */
.js .plan.reveal {
  transition: opacity 600ms var(--ease-out), transform 700ms var(--ease-out), box-shadow 250ms ease, border-color 250ms ease;
  transition-delay: calc(var(--i, 0) * 60ms), calc(var(--i, 0) * 60ms), 0s, 0s;
}

/* Reduced motion keeps fades that help reading and drops everything that moves */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-copy > *, .demo-wrap { animation: none; }
  .js .reveal { transform: none; transition: opacity 300ms ease; transition-delay: 0s; }
  .float, .float.on, .js .vis-race .race-row, .js .lang-line > span { transform: none; filter: none; }
  .js .vis-race.play .race-row.b { animation: none; }
  .js .steps::before { transform: none; transition: none; }
  .btn:active, .wa-float:active { transform: none; }
  .js .plan.reveal { transition: opacity 300ms ease, box-shadow 250ms ease, border-color 250ms ease; transition-delay: 0s; }
  /* Two rules, not one list: a browser that doesn't know ::details-content drops the whole list, summary::after with it */
  summary::after { transition: none; }
  details::details-content { transition: none; }
  .js .vis-race .res { transform: none; }
  .btn .arr { transform: none !important; }
  /* The send button's labels still crossfade, without sliding or blurring */
  .swap > .a, .swap > .b, .swapped .swap > .a, .swapped .swap > .b { transform: none; filter: none; }
  /* main.js does not cycle the languages here, so all three show at once */
  .lang-line { gap: 8px; }
  .lang-line > span { grid-area: auto; }
  .js .lang-line > span:not(.on) { opacity: 1; filter: none; transform: none; }
  .lang-dots { display: none; }
}

/* Hebrew: the Latin fonts have no Hebrew glyphs, and Hebrew has no true italic (browsers fake a slant), so emphasis is colour only */
:root:lang(he) { --display: "Frank Ruhl Libre", Georgia, serif; --body: Rubik, system-ui, sans-serif; }
:lang(he) h1, :lang(he) h2, :lang(he) h3 { letter-spacing: 0; font-weight: 500; }
:lang(he) h1 { line-height: 1.08; }
:lang(he) em { font-style: normal; }
:lang(he) .eyebrow { letter-spacing: .04em; }
:lang(he) .plan.hot::after { content: "הכי פופולרי"; }
/* A quoted phrase keeps its quote marks on its own line (Hebrew gershayim otherwise wrap away from the word) */
.nw { white-space: nowrap; }