/* The home page (/ in Hebrew, /en in English). On top of base.css. */
h1, h2, h3 { margin:0; color:var(--ink); text-wrap:balance; }
p { margin:0; }
[lang=en] h1, [lang=en] h2 { font-family:var(--serif); letter-spacing:-.02em; }
[lang=he] h1, [lang=he] h2 { font-family:var(--sans); letter-spacing:-.01em; }
.eyebrow { font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-text); margin-bottom:12px; }
[lang=he] .eyebrow { letter-spacing:0; font-size:14px; }

/* hero */
.hero { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:56px; align-items:center; padding-block:40px 80px; }
.hero h1 { font-weight:700; font-size:clamp(36px,5.4vw,60px); line-height:1.04; }
[lang=he] .hero h1 { line-height:1.12; font-size:clamp(34px,4.6vw,52px); }
.hero .lead { font-size:clamp(17px,1.6vw,19px); line-height:1.6; color:var(--ink-2); margin-top:20px; max-width:31em; }
.actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; margin-top:32px; }
.cta { display:inline-flex; align-items:center; gap:10px; background:var(--ink); color:#fff; text-decoration:none; font-weight:600; font-size:18px; line-height:1; padding:18px 24px; border-radius:var(--r-m); transition:transform .15s, background .15s; }
.cta:hover { background:#000; transform:translateY(-1px); }
.cta svg { width:20px; height:20px; flex:none; }
.text-link { font-weight:500; color:var(--ink); }
.note { font-size:15px; color:var(--muted); margin-top:16px; }

/* the WhatsApp-like chat in the hero */
.chat { width:100%; max-width:400px; justify-self:center; border-radius:var(--r-xl); background:#efe7da; box-shadow:var(--shadow); overflow:hidden; border:1px solid var(--line); font-size:14.5px; line-height:1.45; }
.chat-top { display:flex; align-items:center; gap:10px; padding:12px 16px; background:var(--card); border-bottom:1px solid var(--line); }
.avatar { width:36px; height:36px; border-radius:50%; background:var(--ink); color:#fff; display:flex; align-items:baseline; justify-content:center; padding-top:7px; line-height:1; direction:ltr; font-family:var(--serif); font-weight:700; font-size:18px; flex:none; }
.avatar span { color:var(--accent); }
.chat-top b { display:block; font-size:15px; }
.chat-top small { display:block; font-size:12px; color:var(--muted); }
.chat-body { padding:14px 12px 16px; display:flex; flex-direction:column; gap:6px; }
.day { align-self:center; font-size:11.5px; color:var(--muted); background:rgba(255,253,248,.8); border-radius:8px; padding:3px 10px; margin-bottom:4px; }
.msg { position:relative; max-width:86%; padding:7px 10px 18px; border-radius:12px; background:#fff; color:#1b1b1b; box-shadow:0 1px .5px rgba(0,0,0,.08); white-space:pre-line; }
.msg.out { align-self:flex-end; background:#d9fdd3; }
.msg.in { align-self:flex-start; }
.msg.out { border-end-end-radius:4px; } .msg.in { border-end-start-radius:4px; }
.msg time { position:absolute; inset-inline-end:8px; bottom:4px; font-size:10.5px; color:#4f5b62; }
.msg.out time::after { content:' ✓✓'; color:#1d6fa5; letter-spacing:-2px; }
.msg .opt { display:block; }
.msg b { font-weight:600; }
.msg .ok { font-weight:600; }
.msg.short { padding-inline-end:56px; }

/* how it works */
section { scroll-margin-top:88px; }
.how { padding-block:8px 72px; }
.section-head { max-width:36em; margin-bottom:32px; }
.section-head h2 { font-size:clamp(28px,3.4vw,38px); line-height:1.12; }
.section-head p { margin-top:12px; color:var(--ink-2); }
.steps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; counter-reset:s; }
.step { background:var(--card); border:1px solid var(--line); border-radius:var(--r-l); padding:24px 22px 26px; counter-increment:s; }
.step::before { content:counter(s, decimal-leading-zero); display:block; font-weight:700; font-size:14px; color:var(--accent-text); margin-bottom:18px; font-variant-numeric:tabular-nums; }
.step h3 { font-size:19px; line-height:1.3; margin-bottom:8px; }
.step p { font-size:15.5px; color:var(--ink-2); line-height:1.55; }
.times { margin-top:10px; display:grid; gap:4px; font-size:15px; }
.times div { display:flex; justify-content:space-between; align-items:baseline; gap:8px; border-top:1px dashed var(--line-2); padding-top:4px; }
.times b { font-weight:600; white-space:nowrap; }

/* the story line */
.proof { display:flex; gap:20px; align-items:center; padding:28px 32px; border-radius:var(--r-l); background:var(--ink); color:#f6f1e7; margin-bottom:72px; font-size:18px; line-height:1.55; }
.proof b { color:#ffb199; font-weight:600; white-space:nowrap; }
.proof .mark { flex:none; font-family:var(--serif); font-size:56px; line-height:.6; color:var(--accent); padding-top:14px; }

/* the trip pass: what is sold and its price (Grow's site review) */
.pass { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:0; background:var(--card); border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden; margin-bottom:24px; box-shadow:var(--shadow); }
.pass-main { padding:36px 36px 34px; border-inline-end:1px solid var(--line); display:flex; flex-direction:column; gap:6px; }
.pass h2 { font-size:30px; line-height:1.1; }
.pass .price { margin-top:18px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.pass .amount { font-size:56px; line-height:1; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.pass .vat { font-size:15px; color:var(--muted); }
.buy { margin-top:26px; align-self:flex-start; display:inline-flex; align-items:center; justify-content:center; min-width:180px; text-decoration:none; background:var(--accent); color:#fff; border-radius:var(--r-m); padding:16px 28px; font-weight:700; font-size:19px; line-height:1; transition:background .15s, transform .15s; }
.buy:hover { background:var(--accent-text); transform:translateY(-1px); }
.pass-list { padding:30px 36px; }
.pass-list ul { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.pass-list li { display:flex; gap:12px; align-items:flex-start; font-size:17px; }
.pass-list li::before { content:''; flex:none; width:20px; height:20px; margin-top:3px; border-radius:50%; background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat; }
.pass-list .counts { margin:14px 0 0; font-size:14px; line-height:1.5; color:var(--muted); }
.pass-list .free { margin-top:22px; padding:14px 16px; border-radius:var(--r-m); background:var(--accent-soft); color:var(--ink); font-size:16px; }
.pass-list .free b { font-weight:600; }

@media (max-width:820px) {
  .hero { grid-template-columns:1fr; gap:40px; padding-block:12px 64px; }
  .chat { max-width:420px; }
  .pass { grid-template-columns:1fr; }
  .pass-main { border-inline-end:0; border-bottom:1px solid var(--line); padding:28px 24px; }
  .pass-list { padding:24px; }
}
@media (max-width:560px) {
  body { font-size:16px; }
  .site-header { padding-block:16px; }
  .steps { grid-template-columns:1fr; gap:12px; }
  .step { padding:20px; }
  .step::before { margin-bottom:10px; }
  .cta { width:100%; justify-content:center; }
  .proof { padding:22px; font-size:16.5px; gap:14px; margin-bottom:56px; }
  .proof .mark { font-size:44px; }
  .pass .amount { font-size:48px; }
  .buy { width:100%; }
}
.night { margin-top:10px; font-size:14.5px !important; color:var(--muted) !important; }

/* cancel: one quiet link under the pass; every way to cancel is on /cancel */
.cancel-line { margin:14px 0 0; font-size:15px; }
.cancel-line a { color:var(--muted); text-underline-offset:3px; }
.cancel-line a:hover { color:var(--ink); }

/* the hero chat plays once it is on screen: Ezra's messages after typing dots, the traveler's right away.
   Hidden messages keep their space, so nothing moves. No JS / reduced motion = everything shown. */
html.js [data-chat] .msg { opacity:0; transform:translateY(8px) scale(.97); transition:opacity .35s ease, transform .5s cubic-bezier(.2,1.3,.4,1); }
html.js [data-chat] .msg.out { transform-origin:right bottom; } html.js [data-chat] .msg.in { transform-origin:left bottom; }
html.js[dir=rtl] [data-chat] .msg.out { transform-origin:left bottom; } html.js[dir=rtl] [data-chat] .msg.in { transform-origin:right bottom; }
html.js [data-chat] .msg.on { opacity:1; transform:none; }
[data-chat] { position:relative; }
.typing { position:absolute; inset-inline-start:12px; display:flex; gap:4px; padding:11px 12px; border-radius:12px; border-end-start-radius:4px; background:#fff;
  box-shadow:0 1px .5px rgba(0,0,0,.08); opacity:0; transform:scale(.85); transition:opacity .2s, transform .25s; pointer-events:none; }
.typing.on { opacity:1; transform:none; }
.typing i { width:6px; height:6px; border-radius:50%; background:#8a9399; animation:wadot 1s infinite; }
.typing i:nth-child(2) { animation-delay:.15s; } .typing i:nth-child(3) { animation-delay:.3s; }
@keyframes wadot { 0%,60%,100% { opacity:.35; transform:none; } 30% { opacity:1; transform:translateY(-3px); } }
@media (prefers-reduced-motion:reduce) { html.js [data-chat] .msg { opacity:1; transform:none; transition:none; } .typing { display:none; } }

/* desktop: the first screen holds the whole hero. The chat is a phone-sized window that scrolls itself as messages
   arrive (like WhatsApp); the steps read as two wide rows; the section head sits beside the steps. */
@media (min-width:821px) {
  .hero { min-height:min(calc(100svh - 80px), 760px); padding-block:24px 72px; gap:72px; }
  [lang=he] .hero h1 { font-size:clamp(44px,4.4vw,60px); }
  .hero .lead { font-size:19px; }
  .chat { max-width:410px; justify-self:end; }
  [dir=rtl] .chat { justify-self:start; }
  .chat-body { height:min(560px, calc(100svh - 230px)); min-height:420px; }
  .how { padding-block:24px 88px; }
  .step { padding:28px 28px 30px; }
  .step h3 { font-size:21px; }
  .step p { font-size:16px; }
  .proof { padding:32px 40px; font-size:20px; margin-bottom:88px; }
  .pass-main { padding:44px 44px 40px; }
  .pass-list { padding:40px 44px; align-self:center; }
}
@media (min-width:1100px) {
  .how { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,2fr); gap:56px; align-items:start; }
  .how .section-head { position:sticky; top:32px; margin:0; }
}
.proof > span:last-child, .lead, .step p { text-wrap:pretty; }

/* FAQ: plain details/summary - opens without JS, works with the keyboard and screen readers */
.faq { margin-top:72px; max-width:46rem; }
.faq h2 { font-size:clamp(26px,3vw,34px); line-height:1.15; margin-bottom:20px; }
.faq details { border-top:1px solid var(--line-2); }
.faq details:last-of-type { border-bottom:1px solid var(--line-2); }
.faq summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 2px; font-weight:600; font-size:18px; line-height:1.4; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:''; flex:none; width:10px; height:10px; border-right:2px solid var(--ink); border-bottom:2px solid var(--ink); transform:rotate(45deg) translateY(-3px); transition:transform .2s; }
.faq details[open] summary::after { transform:rotate(-135deg) translateY(-3px); }
.faq summary:hover { color:var(--accent-text); }
.faq details p { padding:0 2px 20px; color:var(--ink-2); font-size:16.5px; line-height:1.65; max-width:40em; text-wrap:pretty; }
@media (max-width:560px) { .faq { margin-top:56px; } .faq summary { font-size:17px; padding:16px 2px; } }

/* ---------- desktop "how it works" = a quiet numbered timeline (cards of uneven length in a grid looked stretched) ---------- */
@media (min-width:821px) {
  .steps { grid-template-columns:1fr; gap:0; max-width:44rem; }
  .step { background:none; border:0; border-radius:0; padding:0 0 40px; padding-inline-start:72px; position:relative; }
  .step:last-child { padding-bottom:0; }
  .step::before { position:absolute; inset-inline-start:0; top:0; width:44px; height:44px; margin:0; border-radius:50%; background:var(--card);
    border:1px solid var(--line-2); display:grid; place-items:center; font-size:14px; box-shadow:0 6px 16px -10px rgba(29,26,22,.35); }
  .step::after { content:''; position:absolute; inset-inline-start:22px; top:52px; bottom:8px; border-inline-start:1.5px dashed var(--line-2); }
  .step:last-child::after { display:none; }
  .step h3 { padding-top:8px; }
  .step p { max-width:36em; }
  .times { max-width:26rem; margin-top:14px; padding:12px 16px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-m); }
  .times div:first-child { border-top:0; padding-top:0; }
}

/* ---------- premium touches: quiet entrances, tactile buttons, a header that settles on scroll, smooth FAQ ---------- */
:root { --ease-out:cubic-bezier(.2,.7,.2,1); }
html.js .hero > div:first-child > *, html.js .chat, html.js .section-head, html.js .step, html.js .proof, html.js .pass,
html.js .cancel-line, html.js .faq h2, html.js .faq details {
  opacity:0; transform:translateY(16px); transition:opacity .7s var(--ease-out) var(--d,0ms), transform .8s var(--ease-out) var(--d,0ms);
}
html.js .chat { transform:translateY(20px) scale(.985); }
html.js .rv-in { opacity:1 !important; transform:none !important; }   /* not «.in»: Ezra's chat bubbles are .msg.in */

.cta, .buy { box-shadow:0 10px 24px -14px rgba(29,26,22,.55); transition:transform .2s var(--ease-out), box-shadow .2s var(--ease-out), background .15s; }
.cta:hover, .buy:hover { transform:translateY(-2px); box-shadow:0 16px 30px -14px rgba(29,26,22,.55); }
.cta:active, .buy:active { transform:translateY(0) scale(.985); box-shadow:0 6px 14px -10px rgba(29,26,22,.55); transition-duration:.08s; }
.cta svg { transition:transform .25s var(--ease-out); }
.cta:hover svg { transform:rotate(-8deg) scale(1.08); }
.buy { box-shadow:0 10px 24px -14px rgba(184,61,24,.7); }
.text-link { text-decoration-color:var(--line-2); transition:text-decoration-color .2s; }
.text-link:hover { text-decoration-color:var(--ink); }

/* the header stays reachable on the home page, and gets a soft paper backdrop once the page moves */
body:has(.hero) .site-header { position:sticky; top:0; z-index:20; transition:background .25s, box-shadow .25s; }
html.scrolled body:has(.hero) .site-header { background:rgba(246,241,231,.86); -webkit-backdrop-filter:saturate(1.4) blur(12px); backdrop-filter:saturate(1.4) blur(12px);
  box-shadow:0 1px 0 var(--line); }
@media (min-width:1141px) { html.scrolled body:has(.hero) .site-header { max-width:none; padding-inline:max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); } }

/* FAQ answers open smoothly where the browser can animate to auto height (Chrome 131+); elsewhere they just open */
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size:allow-keywords; }
  .faq details::details-content { height:0; overflow:clip; transition:height .35s var(--ease-out), content-visibility .35s allow-discrete; }
  .faq details[open]::details-content { height:auto; }
}
.faq summary { transition:color .15s; }
@media (prefers-reduced-motion:reduce) {
  html.js .hero > div:first-child > *, html.js .chat, html.js .section-head, html.js .step, html.js .proof, html.js .pass,
  html.js .cancel-line, html.js .faq h2, html.js .faq details { opacity:1; transform:none; }
}

/* the chat is a phone-sized window everywhere (his note: on the phone the full chat was a long scroll): it scrolls itself
   as messages arrive, with a soft fade at its top. No JS / reduced motion = you scroll inside it. */
.chat-body { overflow:hidden; -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 22px); mask-image:linear-gradient(to bottom, transparent 0, #000 22px); }
@media (max-width:820px) { .chat-body { height:min(470px, 60svh); min-height:380px; } }
html:not(.js) .chat-body { overflow-y:auto; overscroll-behavior:contain; }
html.js .chat-body.done { overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(0,0,0,.18) transparent; }   /* after it played: scroll back up yourself */

/* ---------- the pricing page (24.10): free next to paid, the same weight, so nobody reads «everything costs» ---------- */
.pricing { padding-block:24px 40px; }
.pricing .section-head h1 { font-size:clamp(32px, 5vw, 48px); line-height:1.1; margin:0 0 10px; }
.plans { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; margin-top:28px; }
.plan .amount.small { font-size:40px; }
.plan { background:var(--card); border:1px solid var(--line); border-radius:var(--r-xl); padding:32px; display:flex; flex-direction:column; gap:6px; box-shadow:var(--shadow); }
.plan.paid { border-color:var(--ink); }
.plan h2 { font-size:28px; line-height:1.1; margin:0; }
.plan .price { margin:14px 0 18px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.plan .amount { font-size:48px; line-height:1; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.plan .vat { font-size:15px; color:var(--muted); }
.plan ul { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.plan li { display:flex; gap:12px; align-items:flex-start; font-size:17px; }
.plan li::before { content:''; flex:none; width:20px; height:20px; margin-top:3px; border-radius:50%; background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat; }
.plan-note { margin:auto 0 22px; font-size:14px; line-height:1.5; color:var(--muted); }
.plan .cta, .plan .buy { margin-top:auto; align-self:flex-start; }
.plan-note + .buy { margin-top:0; }
.plan ul { margin-bottom:26px; }
@media (max-width: 1020px) { .plans { grid-template-columns:repeat(2, minmax(0,1fr)); } .plans .plan:first-child { grid-column:1 / -1; } }
@media (max-width: 760px) {
  .plans { grid-template-columns:1fr; }
  .plans .plan:first-child { grid-column:auto; }
  .plan { padding:26px 22px; }
  .plan .cta, .plan .buy { width:100%; }
}