html, body { margin: 0; padding: 0; background: #f2f6fa; }
html { scroll-behavior: smooth; }
* { box-sizing: border-box; }
@keyframes swipeHint { 0%, 100% { transform: translateY(-50%) translateX(0); opacity: 0.55; } 50% { transform: translateY(-50%) translateX(-5px); opacity: 1; } }
@keyframes pressScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.press-track:hover { animation-play-state: paused; }
/* input::placeholder, [data-hover-darken], .faq-item, and the h1-h6 color
reset moved to chrome.css — the FAQ/Contact block (which needs all of
these) now also renders outside the landing page, via the shared store
footer, so those rules need to be site-wide, not landing-only. */
/* ============ DESKTOP ( >= 900px ) ============
The page is authored mobile-first (430px column, all inline styles) and
driven by app.js, which sets inline transforms to run the two carousels.
On wide screens we break out of the column, turn both carousels into static
grids, and lay the stacked card sections out in rows. Rules use !important
so they win over the inline styles app.js keeps re-applying. */
@media (min-width: 900px) {
/* `.bp-page` width, the shared header's inner-content width, and the FAQ/
Contact width caps all moved to chrome.css — those partials render on
every page (not just landing), and gating them here meant shop/product/
cart/checkout/contact stayed stuck at the mobile 430px column. */
/* Hero: keep the centered stack, enlarge text/buttons to match the desktop photo, cap the photo width */
[data-screen-label="הירו"] { padding: 44px 24px 8px !important; }
[data-screen-label="הירו"] h1 { font-size: 64px !important; margin-bottom: 20px !important; }
[data-screen-label="הירו"] > p { font-size: 25px !important; max-width: 640px !important; margin-bottom: 24px !important; }
[data-screen-label="הירו"] div:has(> a[href="#pricing"]) { gap: 32px !important; margin-top: 12px !important; margin-bottom: 36px !important; }
[data-screen-label="הירו"] a[href="#pricing"] { font-size: 24px !important; height: 64px !important; padding: 10px 56px !important; }
[data-screen-label="הירו"] a[href="#features"] { font-size: 24px !important; }
/* Desktop swaps the mobile phone-in-hand cutout for a wider landscape photo (desktop_hero.webp) */
[data-screen-label="הירו"] .hero-photo-mobile { display: none !important; }
[data-screen-label="הירו"] .hero-photo-desktop { display: block !important; width: calc(100% + 48px) !important; max-width: calc(100% + 48px) !important; margin: 24px -24px 0 !important; }
/* Press: drop the mobile height cap, freeze the marquee into one static centered row */
[data-screen-label="בתקשורת"] { max-height: none !important; }
[data-screen-label="בתקשורת"] .press-track { animation: none !important; width: 100% !important; justify-content: center !important; flex-wrap: wrap !important; gap: 8px !important; }
[data-screen-label="בתקשורת"] .press-track a:nth-child(n+6) { display: none !important; }
[data-screen-label="בתקשורת"] .press-track a { height: 64px !important; padding: 0 24px !important; }
[data-screen-label="בתקשורת"] .press-track img { height: 32px !important; max-width: 130px !important; }
/* Features: carousel -> 4-column grid */
#features { height: auto !important; overflow: visible !important; }
#features-track-wrap { display: block !important; overflow: visible !important; flex: none !important; cursor: default !important; padding: 12px 24px 4px !important; }
#features-track { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 20px !important; transform: none !important; padding: 0 !important; flex: none !important; }
.feature-card { flex: none !important; height: 430px !important; transform: none !important; opacity: 1 !important; }
.feature-card h3 { font-size: 22px !important; }
.feature-card p { font-size: 18px !important; }
.feature-card img { max-height: calc(100% - 148px) !important; }
#features-next, #features-prev { display: none !important; }
#features > div:nth-child(3) { display: none !important; }
#features > div:nth-child(4) { padding: 8px 24px 0 !important; text-align: center !important; }
#features > div:nth-child(4) a { display: inline-block !important; min-width: 280px; padding: 16px 64px !important; }
/* Pricing: carousel -> 3-column grid */
#tier-track-wrap { overflow: visible !important; cursor: default !important; margin-top: 20px !important; padding: 84px 24px 6px !important; }
#tier-track { display: grid !important; grid-template-columns: repeat(3, minmax(0, 320px)) !important; justify-content: center !important; gap: 24px !important; transform: none !important; padding: 0 !important; }
.tier-card { flex: none !important; width: auto !important; transform: none !important; opacity: 1 !important; }
#tier-next, #tier-prev { display: none !important; }
#pricing > div:nth-child(3) { display: none !important; }
/* Story: cap width, float centered */
/* Desktop-only background photo swap: a brighter/warmer shot than the
mobile one, pre-blurred (baked into the .webp itself, not a CSS filter —
filter on the section would blur the text/heading on top of it too) so
it reads as a soft atmospheric backdrop. Overlay is darker than the
mobile original so the white heading/body text pops against it. */
[data-screen-label="סיפור"] { max-width: 860px; margin: 40px auto !important; padding: 60px 48px !important; background-image: url("backgrounds/new_story_desktop.webp") !important; }
[data-screen-label="סיפור"] > div:first-child { background: linear-gradient(180deg, rgba(13,32,53,0.82) 0%, rgba(13,32,53,0.7) 55%, rgba(13,32,53,0.82) 100%) !important; }
/* Who it's for: 4 cards in a row */
[data-screen-label="למי זה מתאים"] { min-height: 0 !important; padding: 44px 24px !important; }
[data-screen-label="למי זה מתאים"] > div { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 20px !important; }
/* Reviews: 3 cards in a row (equal height) */
[data-screen-label="ביקורות"] > div { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 20px !important; align-items: stretch !important; }
/* Comparison: cap the table width */
[data-screen-label="השוואה"] > div { max-width: 760px; margin-left: auto !important; margin-right: auto !important; width: 100%; }
/* Emotional CTA: cap the image card width */
[data-screen-label="רגעים ביחד"] > div { max-width: 760px; }
}