/* ===========================================================
   EverFlow — /lp landing page add-ons
   Loads AFTER css/app.css and reuses its tokens + components
   (nav, hero, cred, steps, feat, faq, final, footer).
   Only the lp-specific sections live here. RTL Hebrew.
   =========================================================== */

/* ---------- facts: research cards -------------------------- */
.facts{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2.4vw,28px);
}
.fact{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:clamp(22px,3vw,32px);
  box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;gap:10px;
}
.fact__n{
  font-weight:800;font-size:14px;letter-spacing:.18em;
  color:var(--accent);
}
.fact__t{font-weight:800;font-size:20px;line-height:1.25;color:var(--ink)}
.fact__d{font-size:16px;color:var(--ink-2)}
.fact__src{
  margin-top:auto;padding-top:14px;border-top:1px dashed var(--line-2);
  font-size:13px;font-weight:600;color:var(--muted);
  direction:ltr;text-align:right;
}
.facts__note{
  max-width:720px;margin:26px auto 0;text-align:center;
  font-size:13.5px;color:var(--muted);
}

/* ---------- reframe: quote band ----------------------------- */
.reframe .reframe__card{
  position:relative;
  background:linear-gradient(135deg,var(--navy),#233A85);
  color:#fff;border-radius:var(--r-xl);
  padding:clamp(36px,6vw,64px) clamp(24px,6vw,72px);
  box-shadow:var(--shadow-pop);
  text-align:center;overflow:hidden;
}
.reframe__mark{
  position:absolute;top:-24px;inset-inline-start:24px;
  font-size:180px;line-height:1;font-weight:800;
  color:rgba(255,255,255,.08);pointer-events:none;
}
.reframe__q{
  font-size:clamp(20px,3.2vw,30px);font-weight:700;line-height:1.35;
  letter-spacing:-.01em;text-wrap:balance;max-width:820px;margin-inline:auto;
}
.reframe__a{
  margin-top:18px;font-size:clamp(16px,2vw,19px);font-weight:400;
  color:#C9D8F5;
}

/* ---------- program stats spacing --------------------------- */
.statgrid--lp{margin-top:clamp(36px,5vw,56px)}

/* week/minutes badge inside step titles */
.step__m{
  display:block;margin-top:4px;
  font-weight:700;font-size:12px;letter-spacing:.06em;
  color:var(--em);
}

/* ---------- privacy split card ------------------------------ */
.private__card{
  display:grid;grid-template-columns:1.15fr .85fr;align-items:center;
  gap:clamp(24px,4vw,56px);
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-xl);box-shadow:var(--shadow);
  padding:clamp(26px,4.5vw,56px);
}
.private__txt h2{
  font-weight:800;font-size:clamp(24px,3.4vw,34px);line-height:1.2;
  letter-spacing:-.015em;color:var(--ink);
  margin:14px 0 14px;text-wrap:balance;
}
.private__txt p{color:var(--ink-2);max-width:52ch}
.private__list{
  list-style:none;margin-top:20px;display:flex;flex-direction:column;gap:12px;
}
.private__list li{
  display:flex;align-items:flex-start;gap:10px;
  font-weight:600;font-size:15.5px;color:var(--ink);
}
.private__list svg{
  width:18px;height:18px;flex:0 0 auto;margin-top:3px;color:var(--ok);
}
.private__list a{color:var(--em);text-decoration:underline;text-underline-offset:3px}
.private__img{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.private__img img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}

/* ---------- assure: risk-removal trio ----------------------- */
.assure{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2.4vw,28px);
}
.assure__item{
  background:var(--surface-warm);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:clamp(22px,3vw,30px);
}
.assure__ic{
  width:44px;height:44px;border-radius:14px;
  display:grid;place-items:center;margin-bottom:14px;
  background:var(--accent-soft);color:var(--em);
}
.assure__ic svg{width:22px;height:22px}
.assure__item h3{font-weight:800;font-size:18px;color:var(--ink);margin-bottom:6px}
.assure__item p{font-size:15px;color:var(--ink-2)}
.assure__item a{color:var(--em);text-decoration:underline;text-underline-offset:3px}

/* ---------- mobile-first hero: compact session card ---------- */
/* Desktop keeps the phone mockup; on mobile it gets cut and cramped,
   so /lp swaps it for a clean "today's session" card. */
.hero__mini{display:none}
@media (max-width:820px){
  .hero__stage{display:none}
  .hero__mini{display:block;margin:20px 0 2px}
}

/* ---------- mid-section CTA blocks --------------------------- */
.midcta{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  margin-top:clamp(30px,4.5vw,48px);
}
.midcta .btn{min-width:min(320px,100%)}
.midcta__n{font-weight:600;font-size:13px;color:var(--muted)}
.mini__card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow);
  padding:18px 18px 12px;
  transform:rotate(-1.2deg);
}
.mini__head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-bottom:14px;border-bottom:1px solid var(--line);
}
.mini__t{font-weight:800;font-size:17px;color:var(--ink)}
.mini__s{font-weight:600;font-size:12.5px;color:var(--muted);margin-top:2px}
.mini__ring{position:relative;width:44px;height:44px;flex:0 0 auto}
.mini__ring svg{width:44px;height:44px;transform:rotate(-90deg)}
.mini__ring b{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:11px;font-weight:800;color:var(--em);
}
.mini__rows{display:flex;flex-direction:column}
.mini__row{
  display:flex;align-items:center;gap:10px;
  padding:11px 0;border-bottom:1px solid var(--line);
}
.mini__row:last-child{border-bottom:0}
.mini__chk{
  width:22px;height:22px;border-radius:50%;flex:0 0 auto;
  border:2px solid var(--line-2);display:grid;place-items:center;
}
.mini__chk svg{width:12px;height:12px}
.is-done .mini__chk{background:var(--ok);border-color:var(--ok);color:#fff}
.mini__chk--now{border-color:var(--em);box-shadow:0 0 0 4px var(--accent-soft)}
.mini__nm{font-weight:700;font-size:14.5px;color:var(--ink);flex:1}
.is-done .mini__nm{color:var(--muted);text-decoration:line-through;text-decoration-thickness:1px}
.is-now .mini__nm{color:var(--em)}
.mini__mn{font-weight:600;font-size:12.5px;color:var(--muted)}
.mini__badge{
  margin:14px auto 0;width:fit-content;max-width:100%;
  display:flex;align-items:center;gap:8px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);
  box-shadow:var(--shadow-sm);padding:8px 16px;
  color:var(--star);font-size:12px;letter-spacing:1px;
}
.mini__badge span{
  color:var(--ink);font-weight:600;font-size:12.5px;letter-spacing:0;
}

/* ---------- reveal: gentler dose on /lp ----------------------
   Same fade-up feel, but a shorter travel + earlier trigger
   (see inline observer in lp.html) so scrolling never hits a
   half-empty screen that reads like the page ended. */
.reveal{transform:translateY(12px);transition-duration:.45s}
.reveal[data-d="1"]{transition-delay:.04s}
.reveal[data-d="2"]{transition-delay:.08s}
.reveal[data-d="3"]{transition-delay:.12s}
.reveal[data-d="4"]{transition-delay:.16s}

/* tighter vertical rhythm on mobile — the next section always peeks */
@media (max-width:820px){
  .section{padding-block:clamp(44px,7vw,72px)}
  .section--tight{padding-block:clamp(36px,6vw,56px)}
}

/* ---------- reveal (in case app.css scopes change) ---------- */

/* four-up focus areas variant */
.assure--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){
  .assure--4{grid-template-columns:repeat(2,1fr)}
}

/* ---------- responsive -------------------------------------- */
@media (max-width:900px){
  .facts{grid-template-columns:1fr}
  .assure{grid-template-columns:1fr}
  .assure--4{grid-template-columns:repeat(2,1fr)}
  .private__card{grid-template-columns:1fr}
  .private__img{order:-1}
  .private__img img{aspect-ratio:16/10}
}
@media (max-width:560px){
  .assure--4{grid-template-columns:1fr}
}

/* ===== sticky mobile CTA bar ===== */
.stickycta{
  position:fixed;inset-inline:0;bottom:0;z-index:70;
  display:none;align-items:center;justify-content:space-between;gap:12px;
  background:rgba(255,255,255,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  transform:translateY(110%);transition:transform .28s ease;
}
.stickycta.on{transform:translateY(0)}
.stickycta__txt{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.stickycta__txt b{font-size:14.5px;color:var(--ink)}
.stickycta__txt span{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stickycta__btn{flex:0 0 auto;padding:12px 18px;font-size:15px}
@media (max-width:860px){
  .stickycta{display:flex}
}
/* beat the generic mobile `.btn{width:100%}` rule so the bar keeps
   its text + button side by side */
@media (max-width:560px){
  .stickycta .stickycta__btn{width:auto;font-size:14.5px;padding:12px 16px}
}