/* ============================================
   Memora marketing site v2 — design layer
   Tailwind utilities live in tw.css (precompiled).
   Anything new goes here as plain CSS.
   ============================================ */

:root {
  --primary: #AA91F6;
  --primary-deep: #7E5DF0;
  --pink: #F1BFEF;
  --yellow: #F7D480;
  --gray-100: #F5F5F5;
  --gray-200: #E6E6E6;
  --dark: #1F1F1F;
  --ink-2: #4A4A4A;
  --ink-3: #7A7A7A;
  --bg: #FAF8F4;
  --card-border: rgba(170,145,246,.22);
  --shadow-sm: 0 2px 6px rgba(31,31,31,.04), 0 1px 2px rgba(31,31,31,.03);
  --shadow-md: 0 6px 16px rgba(31,31,31,.05), 0 2px 4px rgba(31,31,31,.03);
  --shadow-lg: 0 16px 40px rgba(31,31,31,.07), 0 4px 10px rgba(31,31,31,.03);
  --shadow-purple: 0 18px 44px -14px rgba(126,93,240,.35);
  --ease: cubic-bezier(.22,1,.36,1);
  --wa: #25D366;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Noto Sans Hebrew', sans-serif;
  background-color: var(--bg);
  color: var(--dark);
  font-feature-settings: "ss01" on;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }

/* ---------- Type system ---------- */
.h-display { font-family: 'Noto Sans Hebrew', sans-serif; font-weight: 800; letter-spacing: -0.028em; }
.h-italic  { font-family: inherit; font-style: normal; font-weight: inherit; letter-spacing: inherit; color: var(--primary-deep); }
html:not([lang="he"]):not([lang="ar"]) .h-display { line-height: 1 !important; }
.h-mono    { font-family: ui-monospace, 'SF Mono', Menlo, monospace; }
.num-display { font-family: 'Noto Sans Hebrew', sans-serif; font-weight: 800; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }

/* Section headings share one scale, whatever utility classes the markup carries */
main h2.h-display { font-size: clamp(2.25rem, 4.6vw, 4.1rem) !important; line-height: .98 !important; }
main h3.h-display { letter-spacing: -0.02em; }
.sec-lede { font-size: clamp(1.02rem, 1.3vw, 1.2rem); line-height: 1.6; color: var(--ink-2); }

/* Section rhythm */
main > section { padding-top: clamp(4.5rem, 9vw, 8.5rem) !important; padding-bottom: clamp(4.5rem, 9vw, 8.5rem) !important; }
main > section.hero-sec { padding-top: clamp(2rem, 5vw, 5rem) !important; padding-bottom: clamp(3rem, 7vw, 6.5rem) !important; }
main > section.brand-sec { padding-top: clamp(2.5rem, 5vw, 4rem) !important; padding-bottom: clamp(2.5rem, 5vw, 4rem) !important; }

/* ---------- Colour helpers ---------- */
.text-dark    { color: var(--dark); }
.bg-dark      { background: var(--dark); }
.text-primary { color: var(--primary-deep); }
.bg-primary   { background: var(--primary); }
.border-primary { border-color: var(--primary); }
.bg-bg        { background: var(--bg); }
.bg-pink-soft   { background: #FDE8FB; }
.bg-yellow-soft { background: #FFF1D6; }
.bg-purple-soft { background: #ECE5FE; }

/* Brand wash: linear only, no radial, no grain */
.mesh { background: linear-gradient(135deg, rgba(247,212,128,.22) 0%, #FAF8F4 48%, rgba(170,145,246,.26) 100%); }
.mesh-dark { background: linear-gradient(135deg, #1F1F1F 0%, #262233 55%, #2C2540 100%); }
.grain::after, .grain::before { content: none !important; display: none !important; }

/* ---------- Buttons ---------- */
.btn-dark {
  background: var(--dark); color: #fff;
  padding: 1rem 1.75rem; border-radius: 999px;
  font-weight: 700; display: inline-flex; align-items: center; gap: .65rem;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s;
  text-decoration: none; white-space: nowrap;
}
.btn-dark:hover { transform: translateY(-2px); box-shadow: 0 14px 32px -10px rgba(31,31,31,.45); }
.btn-dark:active { transform: scale(.98); }
.btn-light {
  background: #fff; color: var(--dark);
  padding: 1rem 1.75rem; border-radius: 999px;
  font-weight: 700; border: 1px solid #E6E6E6;
  display: inline-flex; align-items: center; gap: .65rem;
  transition: border-color .2s, transform .25s var(--ease), box-shadow .25s var(--ease);
  text-decoration: none; white-space: nowrap;
}
.btn-light:hover { border-color: var(--dark); transform: translateY(-2px); box-shadow: var(--shadow-md); }
[dir="ltr"] .cta-arrow { transform: scaleX(-1); }

/* ---------- Cards ---------- */
.card {
  background: #fff; border: 1px solid var(--card-border);
  border-radius: 24px; box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .25s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-purple); border-color: rgba(170,145,246,.45); }
.feat-card { background: #fff; border: 1px solid var(--card-border); border-radius: 20px; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.feat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-purple); }
.feat-card svg { width: 26px; height: 26px; }

/* ---------- Header / nav ---------- */
header.site-header { background: rgba(250,248,244,.86); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.lang-dropdown { position: relative; }
.lang-dropdown-menu {
  position: absolute; top: calc(100% + 6px); right: 0; min-width: 160px;
  background: #fff; border: 1px solid #E6E6E6; border-radius: 14px;
  box-shadow: 0 12px 32px rgba(31,31,31,.08); padding: 6px;
  opacity: 0; pointer-events: none; transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease; z-index: 60;
}
[dir="ltr"] .lang-dropdown-menu { right: 0; left: auto; }
[dir="rtl"] .lang-dropdown-menu { right: 0; left: auto; }
html:not([lang="he"]) .he-only { display: none !important; }
.lang-dropdown.open .lang-dropdown-menu { opacity: 1; pointer-events: auto; transform: translateY(0); }
.lang-dropdown-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; border-radius: 10px; font-size: 14px; font-weight: 600; color: #1F1F1F; cursor: pointer; transition: background .15s ease; text-decoration: none; }
.lang-dropdown-item:hover { background: #F4F1EA; }
.lang-dropdown-item.active { background: #1F1F1F; color: #fff; }
.lang-flag-img { width: 22px; height: 16px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0,0,0,.08); flex-shrink: 0; display: inline-block; }
.nav-menu { min-width: 470px; }
@media (max-width: 1100px) { .nav-menu { min-width: 400px; } }

/* ---------- Misc existing ---------- */
.snap-row { scroll-snap-type: x proximity; overscroll-behavior-x: contain; touch-action: pan-x pan-y; } /* mandatory snap trapped vertical trackpad scrolling, Asaf 10.9.26 */
.snap-row > * { scroll-snap-align: start; }
.snap-row::-webkit-scrollbar { display: none; }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .faq-icon { transform: rotate(45deg); }
.faq-icon { transition: transform .3s ease; }
.cmp-row + .cmp-row { border-top: 1px dashed #E6E6E6; }
.pill-bad  { color: #B85C5C; }
.pill-good { color: var(--primary-deep); }
.cmp-memora.mesh { background: linear-gradient(135deg, #F0EBFF 0%, #FDF0FC 100%); border: 1px solid rgba(126,93,240,.18); box-shadow: 0 10px 28px -10px rgba(126,93,240,.22); }
.cmp-memora .cmp-accent-stripe { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #7E5DF0 0%, #B98AE8 50%, #F4A8E0 100%); z-index: 5; }
.cmp-memora .cmp-sparkle { position: absolute; top: 18px; right: 18px; width: 28px; height: 28px; color: #7E5DF0; opacity: .35; z-index: 4; pointer-events: none; }
[dir="rtl"] .cmp-memora .cmp-sparkle { right: auto; left: 18px; }
.trusted-logo { color: #1F1F1F; opacity: .38; transition: opacity .3s ease; white-space: nowrap; }
.trusted-logo:hover { opacity: .9; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #E6E0CE; border-radius: 999px; }

/* ---------- Accessibility ---------- */
.skip-link { position: absolute; top: -40px; right: 0; background: var(--dark); color: #fff; padding: 8px 16px; z-index: 100; text-decoration: none; border-radius: 0 0 8px 0; }
.skip-link:focus { top: 0; }
*:focus-visible { outline: 2px solid var(--primary-deep); outline-offset: 2px; border-radius: 4px; }

/* ---------- Reveal on scroll (per element, staggered) ---------- */
.rv { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); will-change: opacity, transform; }
section.in .rv, .in > .rv, .rv.in { opacity: 1; transform: none; }
.no-js .rv { opacity: 1; transform: none; }

/* ---------- Phone mockup (shared: hero + step 02 + inner heroes) ---------- */
.m-stage { position: relative; height: 600px; max-width: 480px; margin: 0 auto; } /* was aspect-ratio 4/5: at 358px wide the 578px phone spilled over the hero social-proof row on mobile */
@media (min-width: 1024px) { .m-stage { aspect-ratio: auto; height: 600px; max-width: none; } }
.m-stage::before, .m-stage::after { content: ""; position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; }
.m-stage::before { width: 340px; height: 340px; background: #AA91F6; opacity: .4; top: -30px; left: -30px; }
.m-stage::after { width: 300px; height: 300px; background: #F7D480; opacity: .45; bottom: -30px; right: -20px; }
.m-stage--pink::after { background: #F1BFEF; opacity: .55; }
.m-phone {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(var(--tilt, -4deg));
  width: 272px; height: 560px; background: #1F1F1F; border-radius: 46px; padding: 10px;
  box-shadow: 0 50px 90px -24px rgba(31,31,31,.42), 0 12px 30px -8px rgba(126,93,240,.35), inset 0 0 0 2px rgba(255,255,255,.06);
  z-index: 2; direction: ltr; text-align: left;
}
[lang="he"] .m-phone, [lang="ar"] .m-phone { direction: rtl; text-align: right; }
.m-phone__screen { width: 100%; height: 100%; background: #FBF9FF; border-radius: 37px; overflow: hidden; position: relative; display: flex; flex-direction: column; }
.m-phone__island { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 84px; height: 24px; background: #1F1F1F; border-radius: 999px; z-index: 3; }
.m-phone__status { height: 44px; display: flex; align-items: flex-end; justify-content: space-between; padding: 0 22px 4px; font-size: 11px; font-weight: 700; color: #1F1F1F; direction: ltr; }
.m-phone__status svg { width: 15px; height: 11px; }
.m-phone__head { padding: 10px 16px 12px; background: #fff; border-bottom: 1px solid rgba(31,31,31,.06); display: flex; align-items: center; gap: 10px; }
.m-phone__avatar { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; object-fit: cover; background: linear-gradient(135deg,#AA91F6,#F1BFEF); }
.m-phone__title { font-weight: 800; font-size: 14px; color: #1F1F1F; line-height: 1.2; }
.m-phone__sub { font-size: 11px; color: rgba(31,31,31,.55); margin-top: 2px; }
.m-phone__wa { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; color: #128C7E; background: rgba(37,211,102,.12); padding: 4px 8px; border-radius: 999px; white-space: nowrap; }
.m-phone__wa svg { width: 11px; height: 11px; }
.m-phone__grid { padding: 12px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; flex: 1; align-content: start; }
.m-phone__cell { aspect-ratio: 1 / 1; border-radius: 14px; position: relative; overflow: hidden; background: #ECE5FE; }
.m-phone__cell--tall { grid-row: span 2; aspect-ratio: auto; }
.m-phone__cell img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); opacity: 0; animation: m-xfade var(--dur, 12s) ease-in-out infinite; animation-delay: calc(var(--o, 0s) + var(--k, 0s)); }
.m-phone__cell img:nth-child(1) { --k: 0s; }
.m-phone__cell img:nth-child(2) { --k: -4s; }
.m-phone__cell img:nth-child(3) { --k: -8s; }
.m-phone__cell img:only-child { opacity: 1; animation: none; }
@keyframes m-xfade { 0% { opacity: 1; } 27% { opacity: 1; } 34% { opacity: 0; } 93% { opacity: 0; } 100% { opacity: 1; } }
.m-phone__chip { position: absolute; inset-inline-start: 8px; bottom: 8px; background: rgba(255,255,255,.94); padding: 4px 9px; border-radius: 999px; font-size: 10px; font-weight: 800; color: #1F1F1F; z-index: 2; }
.m-phone__cta { margin: 0 12px 14px; background: #1F1F1F; color: #fff; text-align: center; padding: 12px; border-radius: 14px; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.m-phone__cta svg { width: 12px; height: 12px; }
.m-phone__home { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); width: 110px; height: 4px; border-radius: 999px; background: rgba(31,31,31,.35); }
@media (prefers-reduced-motion: reduce) {
  .m-phone__cell img { animation: none; }
  .m-phone__cell img:nth-child(1) { opacity: 1; }
}
.float-card { position: absolute; background: #fff; border-radius: 18px; box-shadow: 0 18px 40px -12px rgba(31,31,31,.2); padding: 14px 16px; z-index: 3; border: 1px solid rgba(170,145,246,.16); }
.float-card--top { top: 8%; right: -6%; max-width: 230px; }
.float-card--bottom { bottom: 8%; left: -6%; max-width: 250px; }
@media (max-width: 1023px) { .float-card--top { right: 0; } .float-card--bottom { left: 0; } }
.float-card__row { display: flex; align-items: center; gap: 10px; }
.float-card__icon { width: 36px; height: 36px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.float-card__icon--ai { background: linear-gradient(135deg,#AA91F6,#7E5DF0); color: #fff; }
.float-card__icon--wa { background: var(--wa); color: #fff; }
.float-card__title { font-weight: 800; font-size: 13px; color: #1F1F1F; line-height: 1.2; }
.float-card__sub { font-size: 11px; color: rgba(31,31,31,.55); margin-top: 2px; }
.float-card__pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--primary-deep); box-shadow: 0 0 0 4px rgba(126,93,240,.18); display: inline-block; margin-inline-end: 6px; }
.m-par { will-change: transform; }

/* ---------- Product cards rebuilt in CSS (replace the blurry webp) ---------- */
.pcard { position: relative; border-radius: 32px; overflow: hidden; }
.pcard__bg { position: absolute; inset: 0; }
.pcard--ai .pcard__bg { background: linear-gradient(135deg, #F3EEFF 0%, #E9E1FF 55%, #F7EEFA 100%); }
.pcard--co .pcard__bg { background: linear-gradient(135deg, #FFF4DC 0%, #FDEBE0 55%, #FCE7F7 100%); }
.pcard--gal .pcard__bg { background: linear-gradient(135deg, #FDE8FB 0%, #F6E9FA 50%, #EBE3FF 100%); }
.pcard__in { position: relative; z-index: 1; padding: 8%; }

/* AI: recognition frame */
.rec { position: relative; background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.9); border-radius: 22px; padding: 6%; box-shadow: 0 30px 60px -30px rgba(126,93,240,.45); }
.rec__photo { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3; }
.rec__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rec__box { position: absolute; border: 2px dashed rgba(255,255,255,.95); border-radius: 12px; }
.rec__corner { position: absolute; width: 14px; height: 14px; border-color: #fff; border-style: solid; border-width: 0; }
.rec__corner.tl { top: -2px; left: -2px; border-top-width: 3px; border-left-width: 3px; border-top-left-radius: 8px; }
.rec__corner.tr { top: -2px; right: -2px; border-top-width: 3px; border-right-width: 3px; border-top-right-radius: 8px; }
.rec__corner.bl { bottom: -2px; left: -2px; border-bottom-width: 3px; border-left-width: 3px; border-bottom-left-radius: 8px; }
.rec__corner.br { bottom: -2px; right: -2px; border-bottom-width: 3px; border-right-width: 3px; border-bottom-right-radius: 8px; }
.rec__scan { position: absolute; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, #AA91F6, transparent); top: 0; animation: rec-scan 3.2s ease-in-out infinite; opacity: .9; }
@keyframes rec-scan { 0% { top: 4%; } 50% { top: 94%; } 100% { top: 4%; } }
.rec__spark { position: absolute; top: 14px; inset-inline-end: 14px; width: 44px; height: 44px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; color: var(--primary-deep); box-shadow: var(--shadow-md); }
.rec__spark svg { width: 22px; height: 22px; }
.rec__pill { position: absolute; bottom: -18px; inset-inline-end: -6%; background: #fff; border-radius: 999px; padding: 10px 16px; display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: #1F1F1F; box-shadow: var(--shadow-lg); border: 1px solid rgba(170,145,246,.2); white-space: nowrap; }
.rec__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 4px rgba(170,145,246,.25); animation: rec-dot 1.6s ease-in-out infinite; }
@keyframes rec-dot { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .rec__scan, .rec__dot { animation: none; } }

/* Collect: shared album */
.alb { background: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.95); border-radius: 22px; padding: 6%; box-shadow: 0 30px 60px -30px rgba(247,212,128,.6); }
.alb__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.alb__title { font-weight: 800; font-size: clamp(15px, 1.6vw, 20px); color: #1F1F1F; line-height: 1.15; }
.alb__sub { font-size: 12px; color: rgba(31,31,31,.55); margin-top: 3px; }
.alb__avs { display: flex; align-items: center; }
.alb__avs img, .alb__avs span { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; margin-inline-start: -8px; }
.alb__avs > :first-child { margin-inline-start: 0; }
.alb__avs span { background: #ECE5FE; color: var(--primary-deep); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; }
.alb__grid { display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; aspect-ratio: 5 / 4; }
.alb__grid > * { border-radius: 16px; overflow: hidden; position: relative; }
.alb__grid > :first-child { grid-row: span 2; }
.alb__grid img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.06); }
.alb__more { background: #EEF0FF; border: 1.5px dashed rgba(126,93,240,.35); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--primary-deep); font-weight: 800; font-size: clamp(18px, 2.2vw, 28px); gap: 4px; }
.alb__more svg { width: 20px; height: 20px; opacity: .7; }
.alb__live { position: absolute; top: 10px; inset-inline-start: 10px; background: rgba(255,255,255,.92); border-radius: 999px; padding: 4px 9px; font-size: 10px; font-weight: 800; color: #1F1F1F; display: inline-flex; align-items: center; gap: 5px; }
.alb__live i { width: 6px; height: 6px; border-radius: 50%; background: var(--primary-deep); display: inline-block; }

/* Guest gallery: single photo with reactions */
.gal { position: relative; padding: 10% 14%; }
.gal__photo { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 3 / 4; transform: rotate(-3deg); box-shadow: 0 40px 70px -30px rgba(31,31,31,.5); border: 6px solid #fff; background: #fff; }
.gal__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gal__tag { position: absolute; bottom: 18px; inset-inline-start: 18px; background: rgba(255,255,255,.94); border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 800; color: #1F1F1F; display: inline-flex; align-items: center; gap: 6px; }
.gal__tag svg { width: 13px; height: 13px; color: var(--primary-deep); }
.gal__react { position: absolute; background: #fff; border-radius: 999px; padding: 8px 14px; font-weight: 800; font-size: 14px; color: #1F1F1F; display: inline-flex; align-items: center; gap: 8px; box-shadow: var(--shadow-lg); border: 1px solid rgba(170,145,246,.2); }
.gal__react svg { width: 16px; height: 16px; }
.gal__react--a { top: 22%; inset-inline-end: 2%; }
.gal__react--b { bottom: 20%; inset-inline-start: 0; }
.gal__react--c { top: 8%; inset-inline-start: 6%; }

/* ---------- Pricing tweaks ---------- */
.price-pop { border-color: var(--primary-deep) !important; box-shadow: var(--shadow-purple) !important; }
.price-note { font-size: 12px; font-weight: 700; color: var(--primary-deep); margin-top: 8px; }
.price-strike { font-size: 1.05rem; line-height: 1.2; color: rgba(31,31,31,.4); text-decoration: line-through; margin-bottom: .25rem; }

/* ---------- Inner pages ---------- */
.band { position: relative; min-height: clamp(360px, 46vw, 560px); border-radius: 32px; overflow: hidden; display: flex; align-items: flex-end; }
.band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(31,31,31,.72) 100%); }
.band__in { position: relative; z-index: 1; padding: clamp(1.5rem, 4vw, 3.5rem); color: #fff; max-width: 40rem; }
.band__q { font-weight: 800; font-size: clamp(1.4rem, 2.6vw, 2.2rem); line-height: 1.15; letter-spacing: -.02em; }
.band__by { margin-top: .75rem; font-size: 14px; opacity: .8; }
.val-card { background: #fff; border: 1px solid var(--card-border); border-radius: 24px; padding: clamp(1.4rem, 2.4vw, 2.2rem); display: flex; flex-direction: column; gap: 14px; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.val-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-purple); }
.val-card__ic { width: 48px; height: 48px; border-radius: 14px; background: #ECE5FE; display: flex; align-items: center; justify-content: center; color: var(--primary-deep); }
.val-card__ic svg { width: 24px; height: 24px; }
.val-card h3 { font-weight: 800; font-size: 1.25rem; letter-spacing: -.01em; }
.val-card p { color: var(--ink-2); line-height: 1.6; }
.mini-price { background: #fff; border: 1px solid var(--card-border); border-radius: 24px; padding: 1.75rem; display: flex; flex-direction: column; gap: .5rem; box-shadow: var(--shadow-sm); }
.mini-price--hi { border-color: var(--primary-deep); box-shadow: var(--shadow-purple); }
.mini-price .np { font-size: 2.6rem; }
.crumbs { font-size: 13px; color: var(--ink-3); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--dark); }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
.credit { text-align: center; padding: 16px 12px; font-size: 12px; color: #8a8a8a; }
.credit a { color: inherit; border-bottom: 1px solid rgba(138,138,138,.4); text-decoration: none; }

/* v2 verification fixes 9.9.26 */
.m-stage > .m-par:not(.float-card) { position: absolute; inset: 0; } /* will-change made .m-par the containing block; phone was centred on a 0-height box */
html[dir="ltr"] #contact .text-right { text-align: left; }
main > section { overflow-x: clip; } /* decorative bleed must never widen the page on mobile */
.m-stage::before { left: 0; } .m-stage::after { right: 0; } /* the -30px/-20px offsets pushed scrollWidth to 394/405 at 390px */
.text-\[clamp\(2\.6rem\2c 6\.2vw\2c 5\.6rem\)\]{font-size:clamp(2.6rem,6.2vw,5.6rem)} /* inner-page h1 size, not in the precompiled tw.css */

/* Tailwind preflight custom-property defaults, missing from the precompiled tw.css: without them translate/rotate/scale utilities compute to an invalid transform (mobile drawer was visible on load) */
*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }
::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }

/* Utilities used in markup but absent from the precompiled tw.css (found by a full class scan, 9.9.26) */
.\!text-dark{color:var(--dark)!important}
.focus\:border-primary:focus{border-color:var(--primary)}
.hover\:border-primary:hover{border-color:var(--primary)}
.hover\:text-primary:hover{color:var(--primary-deep)}
.hover\:bg-dark:hover{background:var(--dark)}
.gap-0\.5{gap:.125rem}.gap-x-6{column-gap:1.5rem}.gap-y-2{row-gap:.5rem}.gap-y-5{row-gap:1.25rem}
.h-7{height:1.75rem}.mb-10{margin-bottom:2.5rem}.mb-14{margin-bottom:3.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}
.object-cover{object-fit:cover}.underline{text-decoration-line:underline}
.text-dark\/70{color:rgb(31 31 31 / .7)}
@media (min-width:768px){.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}}
@media (min-width:1024px){.lg\:gap-12{gap:3rem}.lg\:gap-20{gap:5rem}.lg\:-translate-y-2{--tw-translate-y:-.5rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}}
/* mobile: the top float card sat over the phone-screen title; drop it beside the photo grid instead */
@media (max-width:1023px){.float-card--top{top:30%;right:0}}
/* blurred colour blobs must sit behind the phone, not over its CTA (Asaf, 9.9.26) */
.m-stage::before, .m-stage::after { z-index: 0; }
.m-stage > .m-par, .m-stage .m-phone, .m-stage .float-card { z-index: 1; }

/* no sideways drag on mobile, no pinch zoom (Asaf, 9.9.26) */
html, body { overflow-x: hidden; overflow-x: clip; max-width: 100%; touch-action: pan-y; overscroll-behavior-x: none; }
/* no purple accent word inside headings, Asaf 10.9.26: it landed in a different place in every title */
.h-italic, .three-steps__title .accent, h1 .accent, h2 .accent { color: inherit !important; font-style: normal !important; font-weight: inherit !important; }

/* hero on phones: centered, headline wraps naturally instead of four forced lines */
@media (max-width: 767px) {
  .hero-sec h1 br { display: none; }
  .hero-sec h1 { font-size: 2.7rem !important; line-height: 1 !important; text-align: center; }
  .hero-sec h1 + p { text-align: center; margin-left: auto; margin-right: auto; }
  .hero-sec h1 ~ .flex { justify-content: center; }
}

/* hero headline: no forced line breaks at any width, wraps by container */
.hero-sec h1 br { display: none; }
.hero-sec h1 { font-size: clamp(2.7rem, 5.6vw, 5.4rem) !important; line-height: 1 !important; }