/* ===== landing pages (gifts, workshops, courses…): the site's language on a single-purpose page. built from templates/ by scripts/build-pages.py (22.9.2026) ===== */
.lp-page{background:var(--ink)}
.lp-page main{display:block;position:relative}

/* top bar: wordmark + one way back to the site; no dock, no pill menu */
.lp-top{position:absolute;top:0;inset-inline:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:clamp(1rem,2.4vw,1.5rem) var(--gutter);background:transparent} /* floats over the hero so the glows run behind it - a solid bar left a hard seam (Sivan, 22.9) */
.lp-top .brand{color:var(--cream);display:block}
.lp-top .wordmark{height:22px;width:auto;aspect-ratio:923/154;display:block;color:var(--cream)}
.lp-top-link{border-color:color-mix(in srgb,var(--cream) 28%,transparent);color:var(--cream);padding:.7em 1.15em;font-size:.92rem}
.lp-top-link:hover{border-color:var(--cream);background:color-mix(in srgb,var(--cream) 8%,transparent)}
.lp-top-link .arrow{width:16px;height:16px;transition:transform .35s var(--ease)}
.lp-top-link:hover .arrow{transform:translateX(-4px)}

/* hero: ink, the site's glows, copy on the start side and the deck drifting on the other */
.lp-hero{--arch:clamp(24px,4vw,64px);position:relative;overflow:hidden;background:var(--ink);color:var(--cream);padding:clamp(5.25rem,9vw,7.25rem) 0 calc(clamp(3rem,7vw,5rem) + var(--arch))}
.lp-hero .glow{position:absolute;border-radius:50%;pointer-events:none;background:radial-gradient(circle,var(--glow-c) 0%,color-mix(in srgb,var(--glow-c) 55%,transparent) 30%,transparent 68%)}
.lp-hero .glow-a{--glow-c:var(--accent);width:min(70vw,900px);height:min(70vw,900px);top:-38%;inset-inline-start:-22%;opacity:.42}
.lp-hero .glow-b{--glow-c:var(--wine);width:min(64vw,820px);height:min(64vw,820px);bottom:-46%;inset-inline-end:-18%;opacity:.85}
.lp-hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem);align-items:center}
@media (min-width:900px){.lp-hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}}
.lp-hero-copy{display:flex;flex-direction:column;gap:clamp(.9rem,1.8vw,1.25rem);max-width:600px}
.lp-eyebrow{color:var(--accent);font-size:1.25rem;margin:0}
.lp-h1{margin:0}
.lp-h1 .line{display:block}
.lp-h1 .line+.line{color:var(--accent)}
.lp-hero-copy .lead{color:color-mix(in srgb,var(--cream) 82%,transparent);font-weight:400;font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.55;margin:0}
.lp-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem;margin-top:.35rem}
.lp-hero-note{margin:0;font-family:var(--font-note);font-size:1.2rem;color:var(--accent-light);transform:rotate(-2deg)}

/* the deck: three tilted rows of slides drifting (same collage classes as the home page); fades into the ink at the edges */
.lp-visual{position:relative;height:clamp(230px,44vw,420px);overflow:hidden;direction:ltr;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
/* desktop: the deck runs out to the viewport's outer edge (past the centred container) and fades on both sides - the outer edge was a hard cut on wide screens (Sivan, 22.9) */
@media (min-width:900px){.lp-visual{height:clamp(360px,34vw,480px);margin-left:calc(-1 * (max(0px,(100vw - var(--maxw)) / 2) + var(--gutter)));margin-right:0; /* physical: .lp-visual is direction:ltr for the rows, so inline-end there means right - it slid under the copy (22.9) */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 76%,transparent 100%),linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 76%,transparent 100%),linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);-webkit-mask-composite:source-in;mask-composite:intersect}}
.lp-visual .collage-rows{inset:-22% -30%;transform:rotate(-10deg);gap:clamp(10px,1.1vw,16px)}
.lp-visual .collage-tile{width:clamp(150px,17vw,230px);opacity:.92;transform:none;cursor:default}
.lp-visual .collage-tile img{opacity:1}
/* one cover only (until the deck itself arrives): a single tilted card */
.lp-visual-single{display:grid;place-items:center;-webkit-mask-image:none;mask-image:none}
.lp-visual-single img{width:min(88%,460px);height:auto;border-radius:14px;transform:rotate(-6deg);box-shadow:0 40px 80px -30px rgba(0,0,0,.75),0 0 0 1px color-mix(in srgb,var(--cream) 14%,transparent)}

/* light body rises into the hero with the site's arc (mask on the light block, like .light-band) */
.lp-body{--arch:clamp(24px,4vw,64px);position:relative;z-index:2;margin-top:calc(-1 * var(--arch));padding-top:var(--arch);background:var(--cream);color:var(--ink);
  background-image:radial-gradient(55% 420px at 88% 0%,color-mix(in srgb,var(--accent-light) 38%,transparent),transparent 70%),radial-gradient(45% 420px at 6% 100%,color-mix(in srgb,var(--lavender) 30%,transparent),transparent 70%);
  --arc:radial-gradient(100% calc(var(--arch) * 7.46) at 50% calc(var(--arch) * -6.46),transparent calc(100% - 1px),#000 100%);-webkit-mask-image:var(--arc);mask-image:var(--arc)} /* the home page's arc (.light-band), same numbers */
.lp-body .section{padding-block:clamp(2rem,4.5vw,3.5rem)}
.lp-body .h2{margin-bottom:clamp(1.25rem,2.6vw,1.75rem)}

/* "what you get": three cream cards with an accent icon circle */
.lp-card-grid{list-style:none;margin:0;padding:0;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.lp-card{background:rgba(255,255,255,.72);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.35rem,2.6vw,1.9rem);display:flex;flex-direction:column;gap:.6rem;box-shadow:0 30px 60px -44px rgba(28,15,31,.4);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.lp-card:hover{transform:translateY(-6px);box-shadow:0 40px 70px -40px rgba(28,15,31,.5)}
.lp-card-icon{width:54px;height:54px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;margin-bottom:.35rem}
.lp-card-icon svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lp-card .h3{margin:0}
.lp-card p{margin:0;color:var(--ink-soft);line-height:1.55}

/* "how it works": three numbered steps on a rail, the process section's language */
.lp-step-list{list-style:none;margin:0;padding:0;display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));position:relative}
.lp-step-list li{position:relative;padding-top:.25rem;display:flex;flex-direction:column;gap:.35rem}
.lp-step-num{font-family:var(--font-head);font-weight:900;font-size:clamp(2.4rem,4vw,3.4rem);line-height:1;color:var(--accent);letter-spacing:-.02em}
.lp-step-list .h3{margin:0}
.lp-step-list p{margin:0;color:var(--ink-soft)}
@media (min-width:700px){.lp-step-list::before{content:"";position:absolute;inset-inline:0;top:calc(clamp(2.4rem,4vw,3.4rem) * .5 + .25rem);height:2px;background:var(--line);z-index:-1}
  .lp-step-list li{background:transparent}.lp-step-num{background:var(--cream);display:inline-block;padding-inline-end:.35em;align-self:flex-start}}

/* the form: the site's wine card, headline on the start side, cream form card on the other */
.lp-form-card{background:linear-gradient(135deg,color-mix(in srgb,var(--wine) 88%,var(--ink)),color-mix(in srgb,var(--wine) 38%,var(--ink)));color:var(--cream);border:1px solid color-mix(in srgb,var(--cream) 14%,transparent);border-radius:40px;padding:clamp(1.75rem,4vw,3rem);display:grid;gap:clamp(1.5rem,3vw,2.5rem);align-items:start;position:relative;overflow:hidden;box-shadow:0 50px 90px -40px color-mix(in srgb,var(--wine) 80%,transparent)}
.lp-form-card::before{content:"";position:absolute;width:60%;aspect-ratio:1;border-radius:50%;inset-inline-end:-25%;top:-45%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 55%,transparent),transparent 65%);pointer-events:none}
@media (min-width:900px){.lp-form-card{grid-template-columns:minmax(0,1fr) minmax(0,460px)}}
.lp-form-side{position:relative;display:flex;flex-direction:column;gap:.75rem}
.lp-form-side .eyebrow{color:var(--accent-light);margin:0}
.lp-form-side .h2{margin:0;color:var(--cream)}
.lp-form-side .lead{margin:0;color:color-mix(in srgb,var(--cream) 82%,transparent);font-weight:400}
.lp-form .contact-card{position:relative}
.lp-form .contact-card .btn{width:100%}

/* "and one more": the other gift + the academy */
.lp-more-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.lp-more-card{display:flex;flex-direction:column;gap:.5rem;padding:clamp(1.35rem,2.6vw,1.9rem);background:rgba(255,255,255,.72);border:1px solid var(--line);border-radius:var(--radius-lg);color:var(--ink);text-decoration:none;box-shadow:0 30px 60px -44px rgba(28,15,31,.4);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.lp-more-card:hover{transform:translateY(-6px);box-shadow:0 40px 70px -40px rgba(28,15,31,.5)}
.lp-more-card .eyebrow{margin:0;color:var(--accent)}
.lp-more-card .h3{margin:0}
.lp-more-card p{margin:0;color:var(--ink-soft)}
.lp-more-card .u-link{margin-top:auto;padding-top:.5rem} /* "לפריט" sits on the card floor in every card of the row (audit 25.9) */
.lp-more-card.is-dark{background:var(--ink);color:var(--cream);border-color:transparent;box-shadow:0 34px 60px -34px rgba(28,15,31,.7)}
.lp-more-card.is-dark p{color:color-mix(in srgb,var(--cream) 72%,transparent)}
.lp-more-card.is-dark .u-link{color:var(--cream)}

/* "nice to meet you": the site's dark pill with the round portrait */
.lp-about-card{position:relative;background:var(--ink);color:var(--cream);border-radius:40px;padding:clamp(1.75rem,3.5vw,2.5rem) clamp(1.5rem,3.5vw,2.75rem);display:flex;gap:clamp(1.25rem,3vw,2.25rem);align-items:center;box-shadow:0 50px 90px -40px rgba(28,15,31,.6);overflow:hidden}
.lp-about-card::after{content:"";position:absolute;width:60%;aspect-ratio:1;border-radius:50%;inset-inline-start:-25%;bottom:-55%;background:radial-gradient(circle,color-mix(in srgb,var(--wine) 80%,transparent),transparent 65%);pointer-events:none}
.lp-portrait{flex:none;width:clamp(6.75rem,14%,8.5rem);aspect-ratio:1;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,var(--wine),var(--lavender));box-shadow:0 24px 50px -20px rgba(0,0,0,.7),0 0 0 3px color-mix(in srgb,var(--accent-light) 60%,transparent);position:relative;z-index:1}
.lp-portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 4%;display:block}
.lp-about-text{position:relative;z-index:1;display:flex;flex-direction:column;gap:.35rem}
.lp-hello{margin:0;font-family:var(--font-note);font-size:1.5rem;color:var(--accent);line-height:1.1}
.lp-about-text .h3{margin:0}
.lp-about-text p:not(.lp-hello){margin:.25rem 0 0;color:color-mix(in srgb,var(--cream) 82%,transparent);line-height:1.6}
.lp-about-text .u-link{color:var(--cream);margin-top:.75rem}
@media (max-width:699px){.lp-about-card{flex-direction:column;text-align:center;border-radius:28px}.lp-portrait{width:clamp(5.5rem,26vw,6.5rem)}.lp-about-text{align-items:center}}

/* footer: the home page's slim footer, without the room reserved for the phone dock */
.lp-page .footer{padding-bottom:clamp(1.5rem,4vw,2rem)}
.lp-page .footer-inner{margin-top:0}

/* ===== workshops page additions (22.9.2026) ===== */
.lp-stats{list-style:none;margin:.25rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem .6rem}
.lp-stats li{display:inline-flex;align-items:baseline;gap:.35em;padding:.5em 1em .45em;border-radius:999px;background:color-mix(in srgb,var(--cream) 8%,transparent);border:1px solid color-mix(in srgb,var(--cream) 16%,transparent);color:color-mix(in srgb,var(--cream) 88%,transparent);font-size:.92rem;font-weight:700}
.lp-stats b{font-family:var(--font-head);font-weight:800;font-size:1.25em;color:var(--accent-light);font-variant-numeric:tabular-nums;direction:ltr}
.lp-after{margin:clamp(1.25rem,2.5vw,1.75rem) auto 0;max-width:62ch;text-align:center;font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.55;color:var(--ink)}
.lp-card-grid-4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
/* testimonials: cream cards with the site's big accent quote mark */
.lp-quote-grid{list-style:none;margin:0;padding:0;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.lp-quote{position:relative;background:rgba(255,255,255,.72);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.35rem,2.6vw,1.9rem);display:flex;flex-direction:column;gap:.75rem;box-shadow:0 30px 60px -44px rgba(28,15,31,.4)}
.lp-quote-mark{font-family:var(--font-head);font-weight:800;font-size:2.6rem;line-height:.6;color:var(--accent);display:block}
.lp-quote blockquote{margin:0}
.lp-quote blockquote p{margin:0;font-size:1.05rem;font-weight:700;line-height:1.55}
.lp-quote-who{margin:auto 0 0;display:flex;flex-direction:column;gap:.1rem;font-size:.9rem;color:var(--ink-soft)}
.lp-quote-who strong{color:var(--ink)}
/* client logos: the home page's grey treatment on cream */
.lp-logos-title{margin:clamp(2rem,4vw,2.75rem) 0 1rem;text-align:center;color:var(--ink-soft)}
.lp-logos{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem clamp(1.25rem,3vw,2.5rem)}
.lp-logos img{height:30px;width:auto;max-width:120px;object-fit:contain;filter:brightness(0);opacity:.28}
/* faq: plain details, accent plus that turns */
.lp-faq-list{max-width:820px;margin-inline:auto;display:flex;flex-direction:column;gap:.6rem}
.lp-faq-list details{background:rgba(255,255,255,.72);border:1px solid var(--line);border-radius:var(--radius);padding:0 clamp(1rem,2vw,1.5rem);transition:border-color .25s}
.lp-faq-list details[open]{border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.lp-faq-list summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 0;font-weight:800;font-size:1.05rem;color:var(--ink)}
.lp-faq-list summary::-webkit-details-marker{display:none}
.lp-faq-list summary::after{content:"";flex:none;width:28px;height:28px;border-radius:50%;background-color:var(--accent-light);background-image:linear-gradient(var(--ink),var(--ink)),linear-gradient(var(--ink),var(--ink));background-size:12px 2px,2px 12px;background-position:center;background-repeat:no-repeat;transition:transform .35s var(--ease)} /* drawn bars, dead centre; the "+" glyph sat off-centre (Sivan, 23.9) */
.lp-faq-list details[open] summary::after{transform:rotate(45deg)}
.lp-faq-list details p{margin:0 0 1.1rem;color:var(--ink-soft);line-height:1.6;max-width:70ch}

/* sessions: three numbered ink cards (session numbers in Futurism accent, like the process section) */
.lp-sessions-sub{max-width:62ch;margin:-.5rem auto clamp(1.5rem,3vw,2.25rem);text-align:center;color:var(--ink-soft)}
.lp-session-list{list-style:none;margin:0;padding:0;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.lp-session{position:relative;background:var(--ink);color:var(--cream);border-radius:var(--radius-lg);padding:clamp(1.5rem,2.8vw,2.1rem);display:flex;flex-direction:column;gap:.6rem;overflow:hidden;box-shadow:0 40px 70px -40px rgba(28,15,31,.6)}
.lp-session::after{content:"";position:absolute;width:70%;aspect-ratio:1;border-radius:50%;inset-inline-end:-30%;bottom:-45%;background:radial-gradient(circle,color-mix(in srgb,var(--wine) 85%,transparent),transparent 65%);pointer-events:none}
.lp-session>*{position:relative;z-index:1}
.lp-session-num{font-family:var(--font-head);font-weight:900;font-size:clamp(2.2rem,3.4vw,3rem);line-height:1;color:var(--accent);letter-spacing:-.02em}
.lp-session .h3{margin:0}
.lp-session p{margin:0;color:color-mix(in srgb,var(--cream) 80%,transparent);line-height:1.6}
.lp-session-note{margin-top:auto!important;padding-top:.6rem;font-family:var(--font-note);font-size:1.15rem;color:var(--accent-light)!important;line-height:1.3}
/* taste: the animated slide examples, 16:9 cards */
.lp-taste .h2{margin-bottom:.35rem}
.lp-taste-note{text-align:center;margin:0 0 clamp(1.25rem,2.6vw,1.75rem)}
.lp-taste-grid{list-style:none;margin:0;padding:0;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.lp-taste-grid li{border-radius:14px;overflow:hidden;background:var(--cream-2);border:1px solid var(--line);box-shadow:0 30px 60px -40px rgba(28,15,31,.5);aspect-ratio:16/9}
.lp-taste-grid img{width:100%;height:100%;object-fit:cover;display:block}
@media (min-width:900px){.lp-taste-grid{grid-template-columns:repeat(3,1fr)}.lp-taste-grid li:nth-child(4),.lp-taste-grid li:nth-child(5){grid-column:span 1}}

/* dark sections inside the cream body: the home page's rhythm (ink / cream / ink …), full-bleed with a glow (Sivan, 22.9) */
.lp-body .lp-dark{position:relative;overflow:hidden;background:var(--ink);color:var(--cream);margin-block:clamp(.5rem,1.5vw,1rem)}
.lp-dark .glow{position:absolute;border-radius:50%;pointer-events:none;background:radial-gradient(circle,var(--glow-c) 0%,color-mix(in srgb,var(--glow-c) 55%,transparent) 30%,transparent 68%)}
.lp-dark .glow-a{--glow-c:var(--accent);width:min(60vw,760px);height:min(60vw,760px);top:-45%;inset-inline-start:-20%;opacity:.35}
.lp-dark .glow-b{--glow-c:var(--wine);width:min(64vw,820px);height:min(64vw,820px);bottom:-55%;inset-inline-end:-18%;opacity:.8}
.lp-dark .container{position:relative}
.lp-dark .h2,.lp-dark .h3{color:var(--cream)}
.lp-dark .sub,.lp-dark .lp-sessions-sub{color:color-mix(in srgb,var(--cream) 78%,transparent)}
/* sessions on ink: glass cards (the home page's type cards) instead of ink cards */
.lp-dark .lp-session{background:color-mix(in srgb,var(--cream) 7%,transparent);border:1px solid color-mix(in srgb,var(--cream) 16%,transparent);box-shadow:none;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.lp-dark .lp-session::after{display:none}
.lp-dark .lp-session p{color:color-mix(in srgb,var(--cream) 82%,transparent)}
/* taste: the home page's marquee, animated slide cards */
.lp-taste .h2{margin-bottom:.35rem}
.lp-taste-note{font-family:var(--font-note);font-size:clamp(1.35rem,2vw,1.7rem);line-height:1.2;color:var(--accent-light);transform:rotate(-1.5deg);display:inline-block;width:100%} /* handwriting, like the site's notes (Sivan, 22.9) */
.lp-taste-marquee{margin-top:clamp(1rem,2vw,1.5rem);position:relative} /* rtl like the home marquee: with direction:ltr the loop ran off to the side (Sivan, 22.9) */
.lp-taste-marquee .marquee-track{animation-duration:48s}
.lp-taste-marquee .marquee-group{gap:clamp(1rem,2vw,1.5rem);padding-inline-end:clamp(1rem,2vw,1.5rem)}
.lp-taste-marquee img,.lp-taste-marquee video{width:clamp(240px,26vw,340px);height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:14px;box-shadow:0 30px 60px -30px rgba(0,0,0,.7);border:1px solid color-mix(in srgb,var(--cream) 14%,transparent)}
@media (prefers-reduced-motion:reduce){.lp-taste-marquee .marquee-track{animation:none}}
/* real photos from the workshops (Sivan sent 17, 23.9; 14 kept, cropped to the people). v4: copy on the start side, a contained marquee (fade both sides) on the other. v1 two 280px full-bleed rows, v2 one 160px full-bleed row (too loud), v3 six crossfading tiles (empty frames while loading) were rejected */
.lp-photos{padding-block:clamp(1.5rem,3vw,2.25rem) clamp(1rem,2vw,1.5rem)}
.lp-photos-grid{display:grid;gap:clamp(1.25rem,3vw,2.5rem);align-items:center}
@media (min-width:900px){.lp-photos-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.45fr)}}
.lp-photos-copy .h2{font-size:clamp(1.5rem,2.6vw,2.1rem);text-align:start}
.lp-photos .lp-photos-note{text-align:start;color:var(--accent);margin:.3rem 0 0;transform:none;font-size:clamp(1.15rem,1.6vw,1.4rem)} /* straight and a bit smaller, aligned with the heading (Sivan, 23.9) */ /* magenta, not the light one - too pale (Sivan, 23.9) */
.lp-photos-marquee{min-width:0;position:relative} /* the site's .marquee (rtl loop, fades on both sides) inside the column - "moving like the hero, with a fade on both sides" (Sivan, 23.9); the crossfading tiles (v3) showed empty frames while loading */
.lp-photos-marquee .marquee-track{animation-duration:60s}
.lp-photos-marquee .marquee-group{gap:clamp(.6rem,1.2vw,.9rem);padding-inline-end:clamp(.6rem,1.2vw,.9rem)}
.lp-photos-marquee img{height:clamp(120px,12vw,150px);width:auto;aspect-ratio:3/2;border-radius:12px;border:1px solid color-mix(in srgb,var(--ink) 8%,transparent);background:var(--cream-2);box-shadow:0 18px 36px -24px rgba(28,15,31,.45)}
@media (prefers-reduced-motion:reduce){.lp-photos-marquee .marquee-track{animation:none}}
/* client logos: the home page's grey marquee on cream */
.lp-logos-band{margin-top:clamp(2rem,4vw,2.75rem)}
.lp-logos-band .marquee{direction:ltr;-webkit-mask:none;mask:none;position:relative} /* no mask on this band: on Sivan's iPhone the masked strip painted once and then went blank (WebKit: mask + composited animation) - the edge fade is drawn with two cream gradients instead */
.lp-logos-band .marquee::before,.lp-logos-band .marquee::after{content:"";display:block;position:absolute;top:0;bottom:0;width:14%;z-index:2;pointer-events:none}
.lp-logos-band .marquee::before{left:0;background:linear-gradient(90deg,var(--cream),transparent)}
.lp-logos-band .marquee::after{right:0;background:linear-gradient(270deg,var(--cream),transparent)}
.lp-logos-band .marquee-track{animation-name:marqueeLtr;animation-duration:30s;justify-content:flex-start} /* faster than the home band (42s): "עוברים לאט מאוד" (Sivan, 24.9) */
@media (max-width:899px){.lp-logos-band .marquee-track{animation-duration:22s}}
@keyframes marqueeLtr{to{transform:translateX(-50%)}} /* the logos showed for a moment and vanished on Sivan's iPhone: the rtl track was left-aligned there, so translateX(+50%) pushed it out of view */
.lp-logos-band .lp-logos-title{margin:0 0 1rem}
.lp-logos-band .logo-img{opacity:.42;height:27px;max-width:140px} /* dark logo files (img/logos/dark), no CSS filter: the filtered white ones never showed on Sivan's iPhone (24.9) */
.lp-logos-band .logo-img.tall{height:42px}
.lp-logos-band .logo-img.xl{height:50px}
@media (min-width:900px){.lp-logos-band .logo-img{height:31px}.lp-logos-band .logo-img.tall{height:49px}.lp-logos-band .logo-img.xl{height:58px}}
.lp-logos-band .marquee-group{gap:clamp(2rem,4.5vw,3.75rem);padding-inline-end:clamp(2rem,4.5vw,3.75rem)}

/* Sivan's round (22.9, workshops): centred headings, bigger session copy, one-line titles, start-aligned faq with longer lines */
.lp-sessions .h2,.lp-cards[aria-labelledby="what-title"] .h2,.lp-taste .h2{text-align:center}
.lp-taste-note{text-align:center}
.lp-after{text-align:start;margin-inline:0;max-width:70ch}
.lp-cards+.lp-steps{padding-top:clamp(.5rem,1vw,.75rem)} /* "how it works" sits closer to the pains block - the double section padding read as a hole (Sivan, 23.9) */
.lp-after strong{color:var(--accent);font-weight:800}
.lp-sessions-sub{font-size:clamp(1.05rem,1.5vw,1.25rem);max-width:66ch}
.lp-session .h3{font-size:clamp(1.15rem,1.55vw,1.35rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-session p{font-size:clamp(1rem,1.25vw,1.12rem)}
.lp-session-note{margin-top:auto!important;padding-top:1rem}
.lp-faq-list{max-width:none;margin-inline:0} /* full content width, like the rest of the page (Sivan, 22.9) */
.lp-faq-list summary{font-size:clamp(1.15rem,1.5vw,1.3rem);padding:1.3rem 0}
.lp-faq-list details{padding-inline:clamp(1.25rem,2.4vw,1.9rem)}
.lp-faq-list details p{font-size:1.1rem;max-width:none;margin-bottom:1.3rem}
/* "how it works" animates in: the rail draws from the start side, the steps follow one by one (gsap in landing.js) */
.lp-step-list{--rail:0}
@media (min-width:700px){.lp-step-list::before{transform-origin:right center;transform:scaleX(var(--rail))}}

/* ===== academy page (courses + catalog), 22.9.2026 ===== */
.lp-eyebrow-dot{margin:0;justify-content:flex-start} /* the site's pill is centred; here it sits on the start side with the copy (Sivan, 22.9) */
.lp-eyebrow-dot .lbl{font-size:.95rem}
.lp-btn-ghost-dark{border-color:color-mix(in srgb,var(--cream) 30%,transparent);color:var(--cream)}
.lp-btn-ghost-dark:hover{border-color:var(--cream);background:color-mix(in srgb,var(--cream) 8%,transparent)}
.lp-body .h2.centered{text-align:center}
/* course picker */
.lp-pick-grid{list-style:none;margin:0;padding:0;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.lp-pick-card{background:rgba(255,255,255,.72);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.35rem,2.6vw,1.9rem);display:flex;flex-direction:column;gap:.5rem;box-shadow:0 30px 60px -44px rgba(28,15,31,.4);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.lp-pick-card:hover{transform:translateY(-6px);box-shadow:0 40px 70px -40px rgba(28,15,31,.5)}
.lp-pick-card .eyebrow{margin:0;color:var(--accent)}
.lp-pick-card .h3{margin:0}
.lp-pick-card p{margin:0;color:var(--ink-soft)}
.lp-pick-price{font-family:var(--font-head);font-weight:800;font-size:1.6rem;color:var(--ink)!important;margin-top:.35rem!important}
.lp-pick-card .u-link{margin-top:auto;padding-top:.5rem}
/* Sivan 26.9.2026: The Data Skill + The Power Tools dressed like the featured Power Skill card (same dark surface, same border); Power Skill keeps its size and badge */
.lp-pick-card{background:linear-gradient(135deg,color-mix(in srgb,var(--wine) 88%,var(--ink)),color-mix(in srgb,var(--wine) 38%,var(--ink)));color:var(--cream);border:1px solid color-mix(in srgb,var(--cream) 14%,transparent);box-shadow:0 44px 80px -40px color-mix(in srgb,var(--wine) 70%,transparent);position:relative;overflow:hidden}
.lp-pick-card:hover{box-shadow:0 54px 90px -40px color-mix(in srgb,var(--wine) 85%,transparent)}
.lp-pick-card .eyebrow{color:var(--accent-light)}
.lp-pick-card .h3{color:var(--cream)}
.lp-pick-card p{color:color-mix(in srgb,var(--cream) 82%,transparent)}
.lp-pick-card .lp-pick-price{color:var(--cream)!important}
.lp-pick-card .u-link{color:var(--cream)}
/* course block */
.lp-course-head{max-width:760px;margin:0 auto clamp(1.75rem,3.5vw,2.5rem);text-align:center;display:flex;flex-direction:column;align-items:center;gap:.75rem}
.lp-course-logo{height:clamp(44px,5vw,64px);width:auto;max-width:min(80vw,420px);object-fit:contain;margin-bottom:.35rem}
.lp-course-logo-wide{height:clamp(30px,3.4vw,44px)}
.lp-dark .lp-course-logo{opacity:.95} /* the logo pngs are white-on-alpha */
.lp-course:not(.lp-dark) .lp-course-logo{filter:brightness(0) opacity(.85)}
.lp-course-head .eyebrow{margin:0;color:var(--accent)}
.lp-course-head .h2{margin:0}
.lp-course-head .lead{margin:0;font-weight:400;color:var(--ink-soft);font-size:clamp(1.05rem,1.35vw,1.2rem)}
.lp-dark .lp-course-head .lead{color:color-mix(in srgb,var(--cream) 80%,transparent)}
.lp-stats-inline{justify-content:center;margin-top:.5rem}
.lp-course:not(.lp-dark) .lp-stats li{background:rgba(255,255,255,.72);border-color:var(--line);color:var(--ink)}
.lp-course:not(.lp-dark) .lp-stats b{color:var(--accent)}
.lp-course-grid{display:grid;gap:clamp(1.5rem,3vw,2.5rem);align-items:start}
@media (min-width:900px){.lp-course-grid{grid-template-columns:minmax(0,1fr) minmax(300px,400px)}}
.lp-course-sub{margin:0 0 1rem}
.lp-chapters{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.lp-chapters li{display:flex;gap:.8rem;align-items:flex-start;padding:.9rem 1rem;border-radius:var(--radius);background:rgba(255,255,255,.72);border:1px solid var(--line);line-height:1.5}
.lp-dark .lp-chapters li{background:color-mix(in srgb,var(--cream) 7%,transparent);border-color:color-mix(in srgb,var(--cream) 16%,transparent)}
.lp-chapters b{flex:none;font-family:var(--font-head);font-weight:900;font-size:1.35rem;line-height:1.1;color:var(--accent);letter-spacing:-.02em}
.lp-chapters strong{display:block;font-weight:800;margin-bottom:.1rem}
.lp-chapters span{font-size:.95rem;color:var(--ink-soft)}
.lp-dark .lp-chapters span{color:color-mix(in srgb,var(--cream) 78%,transparent)}
.lp-dark .lp-chapters strong{color:var(--cream)}
.lp-chapters-short li{padding:.7rem 1rem}
.lp-chapters-short strong{margin:0}
.lp-bonus{list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-direction:column;gap:.45rem;font-size:.98rem}
.lp-bonus li{display:flex;align-items:center;gap:.6rem}
.lp-bonus-tag{flex:none;padding:.3em .7em;border-radius:999px;background:var(--accent-light);color:var(--ink);font-family:var(--font-note);font-size:1rem;line-height:1}
/* preview video: a click-to-play facade (no YouTube load until asked) */
.lp-video{margin-top:1.25rem}
.lp-video-cap{margin:0 0 .6rem;font-weight:700}
.lp-video-note{font-family:var(--font-note);font-size:1.25rem;color:var(--accent);margin-inline-end:.35em}
.lp-video-frame{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:var(--ink);box-shadow:0 30px 60px -30px rgba(0,0,0,.7);border:1px solid color-mix(in srgb,var(--cream) 14%,transparent)}
.lp-video-frame img,.lp-video-frame iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.lp-video-play{position:absolute;inset:0;width:100%;height:100%;border:0;background:linear-gradient(180deg,transparent 40%,rgba(28,15,31,.55));cursor:pointer;display:grid;place-items:center}
.lp-video-play span{width:72px;height:72px;border-radius:50%;background:var(--accent);display:grid;place-items:center;box-shadow:0 20px 40px -14px color-mix(in srgb,var(--accent) 80%,transparent);transition:transform .35s var(--ease)}
.lp-video-play:hover span{transform:scale(1.08)}
.lp-video-play svg{width:28px;height:28px;fill:#fff;margin-inline-start:4px}
/* buy card: cream card on both grounds, price in Futurism */
.lp-buy{position:sticky;top:1.25rem;background:var(--cream);color:var(--ink);border-radius:var(--radius-lg);padding:clamp(1.25rem,2.4vw,1.75rem);box-shadow:0 40px 70px -40px rgba(28,15,31,.5);border:1px solid var(--line)}
.lp-course:not(.lp-dark) .lp-buy{background:var(--ink);color:var(--cream);border-color:transparent}
.lp-buy-eyebrow{margin:0;font-family:var(--font-note);font-size:1.2rem;color:var(--accent)}
.lp-price{margin:.1rem 0 .25rem;font-family:var(--font-head);font-weight:900;font-size:1.4rem;line-height:1}
.lp-price b{font-size:clamp(2.6rem,4vw,3.4rem);letter-spacing:-.02em}
.lp-buy-note{margin:0 0 1rem;font-size:.92rem;opacity:.8}
.lp-buy .contact-card{padding:1rem 1.1rem;background:rgba(255,255,255,.72);border:1px solid var(--line)}
.lp-course:not(.lp-dark) .lp-buy .contact-card{background:var(--cream);color:var(--ink)}
.lp-buy .contact-card .btn{width:100%}
/* catalog */
.lp-catalog-grid{list-style:none;margin:0;padding:0;display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.lp-item{background:color-mix(in srgb,var(--cream) 7%,transparent);border:1px solid color-mix(in srgb,var(--cream) 16%,transparent);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;transition:transform .45s var(--ease),border-color .25s}
.lp-item:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.lp-item>img,.lp-item>video{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;background:var(--cream-2)}
.lp-item,.lp-pick-card{cursor:pointer} /* the whole card follows its button (landing.js, audit 24.9) */
.lp-item-body{padding:1rem 1.1rem 1.2rem;display:flex;flex-direction:column;gap:.35rem;flex:1}
.lp-item .h3{margin:0;font-size:1.15rem;color:var(--cream)}
.lp-item-meta{margin:0;font-size:.92rem;color:color-mix(in srgb,var(--cream) 68%,transparent)}
.lp-item-price{margin:.25rem 0 .6rem;font-family:var(--font-head);font-weight:800;font-size:1.35rem;color:var(--accent-light)}
.lp-item .btn{margin-top:auto;align-self:flex-start;padding:.7em 1.3em;font-size:1.17rem;font-weight:800} /* 18.7px bold = "large text", AA at 3:1 without changing the pink (audit 24.9) */
.lp-item .btn-ghost{border-color:color-mix(in srgb,var(--cream) 30%,transparent);color:var(--cream)}
.lp-item .btn-ghost:hover{border-color:var(--cream);background:color-mix(in srgb,var(--cream) 8%,transparent)}
.lp-catalog-notes{margin-top:clamp(1.25rem,2.5vw,1.75rem);padding:0 1.25rem;border:1px solid color-mix(in srgb,var(--cream) 16%,transparent);border-radius:var(--radius);color:var(--cream)}
.lp-catalog-notes summary{cursor:pointer;padding:1rem 0;font-weight:800;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.lp-catalog-notes summary::after{content:"";flex:none;width:24px;height:24px;border-radius:50%;background-color:var(--accent-light);background-image:linear-gradient(var(--ink),var(--ink)),linear-gradient(var(--ink),var(--ink));background-size:10px 2px,2px 10px;background-position:center;background-repeat:no-repeat;transition:transform .3s}
.lp-catalog-notes[open] summary::after{transform:rotate(45deg)}
.lp-catalog-notes summary::-webkit-details-marker{display:none}
.lp-catalog-notes ul{margin:0 0 1rem;padding-inline-start:1.2rem;color:color-mix(in srgb,var(--cream) 80%,transparent);line-height:1.6;font-size:.95rem}
.lp-catalog-notes a{color:var(--accent-light)}
/* course / catalog pages: logo in the hero, breadcrumb back to the academy, centred cta row */
.lp-crumb{display:inline-flex;align-items:center;gap:.4em;font-size:.9rem;font-weight:700;color:var(--accent-light);text-decoration:none;margin-bottom:.25rem}
.lp-crumb:hover{color:var(--cream)}
.lp-hero-logo{align-self:flex-start;height:clamp(26px,2.8vw,36px);width:auto;max-width:min(80vw,400px);object-fit:contain;object-position:right center;opacity:.95;margin:0 0 calc(-1 * clamp(.45rem,1vw,.7rem))}
.lp-hero-logo.lp-academy-logo{height:clamp(43px,4.7vw,65px);max-width:min(60vw,280px);margin:0} /* stacked THE POWERSKILL ACADEMY logo replaces the eyebrow (Sivan, 27.9) */
.lp-hero-logo.lp-course-logo-wide{height:clamp(28px,3.2vw,40px)}
.lp-center{text-align:center;margin:clamp(1.5rem,3vw,2rem) 0 0}
.lp-course:not(.lp-dark) .lp-chapters li{background:rgba(255,255,255,.72);border-color:var(--line)}

/* academy hub: The Power Skill leads (Sivan, 22.9) - a wide dark card with badge, perks, numbers and price; the two others sit smaller below */
.lp-featured{position:relative;display:grid;gap:clamp(1.25rem,3vw,2.5rem);padding:clamp(1.75rem,3.5vw,2.75rem);background:linear-gradient(135deg,color-mix(in srgb,var(--wine) 88%,var(--ink)),color-mix(in srgb,var(--wine) 38%,var(--ink)));color:var(--cream);border:1px solid color-mix(in srgb,var(--cream) 14%,transparent);border-radius:40px;text-decoration:none;overflow:hidden;box-shadow:0 50px 90px -40px color-mix(in srgb,var(--wine) 80%,transparent);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.lp-featured::before{content:"";position:absolute;width:60%;aspect-ratio:1;border-radius:50%;inset-inline-end:-25%;top:-45%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 55%,transparent),transparent 65%);pointer-events:none}
.lp-featured:hover{transform:translateY(-6px);box-shadow:0 60px 100px -40px color-mix(in srgb,var(--wine) 90%,transparent)}
@media (min-width:900px){.lp-featured{grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);align-items:center}}
.lp-featured>*{position:relative}
.lp-featured-badge{position:absolute;top:clamp(1rem,2vw,1.5rem);left:50%;transform:translateX(-50%);white-space:nowrap; /* centred on the card (Sivan, 23.9); was in the corner */padding:.5em 1em .45em;border-radius:999px;background:var(--accent);color:#fff;font-weight:800;font-size:.85rem;line-height:1;z-index:2}
.lp-featured-main{display:flex;flex-direction:column;gap:.75rem;padding-top:1.5rem}
.lp-featured-logo{height:clamp(30px,3.4vw,44px);width:auto;max-width:min(70vw,320px);object-fit:contain;opacity:.95;margin:0}
@media (max-width:899px){.lp-featured-logo{margin-top:.6rem}} /* clear the centred badge above it on phones (27.9) */
.lp-featured-title{margin:0;color:var(--cream);font-size:clamp(1.5rem,2.6vw,2.1rem)}
.lp-featured-main p{margin:0;color:color-mix(in srgb,var(--cream) 82%,transparent);line-height:1.6}
.lp-featured-perks{list-style:none;margin:.25rem 0 0;padding:0;display:grid;gap:.4rem .9rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.lp-featured-perks li{position:relative;padding-inline-start:1.4em;font-size:.95rem;color:color-mix(in srgb,var(--cream) 90%,transparent)}
.lp-featured-perks li::before{content:"";position:absolute;inset-inline-start:0;top:.45em;width:.75em;height:.75em;border-radius:50%;background:var(--accent-light)}
.lp-featured-side{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.9rem;padding:clamp(1.25rem,2.4vw,1.75rem);border-radius:var(--radius-lg);background:color-mix(in srgb,var(--ink) 55%,transparent);border:1px solid color-mix(in srgb,var(--cream) 12%,transparent)}
.lp-featured-side .lp-stats{margin:0;justify-content:center}
.lp-featured-price{margin:0;font-family:var(--font-head);font-weight:900;font-size:1.4rem;line-height:1;color:var(--cream)}
.lp-featured-price b{font-size:clamp(2.6rem,4vw,3.4rem);letter-spacing:-.02em}
.lp-featured-side .btn{width:100%;justify-content:center}
.lp-featured-side .btn .arrow{width:18px;height:18px;transition:transform .35s var(--ease)}
.lp-featured:hover .btn .arrow{transform:translateX(-4px)}
.lp-pick-more-wrap{position:relative;text-align:center;margin:clamp(2.75rem,5vw,4rem) 0 clamp(4.5rem,8vw,7rem)} /* room above for the stem, below for the elbows of the connector */
.lp-pick-more{margin:0;font-family:var(--font-head);font-weight:900;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.1;letter-spacing:-.01em;color:var(--ink)} /* bolder than the handwriting (Sivan, 22.9) */
/* the connector (Sivan, 23.9: "a cool connection", the drawn arrows were rejected): one line drops from the featured card, the headline sits on it, two rounded arms land on the two cards. paths are computed in landing.js (pathLength=1), drawn in on scroll, then a current keeps flowing along the arms */
.lp-pick-zone{position:relative}
.lp-pick-connect{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:visible;fill:none;stroke-linecap:round;stroke-linejoin:round}
.lp-pick-connect.is-off{display:none}
.lp-pick-connect .c-line{stroke:color-mix(in srgb,var(--accent) 55%,transparent);stroke-width:2.5;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s var(--ease)}
.lp-pick-connect .c-arm{transition-duration:1.1s;transition-delay:.5s}
.lp-pick-connect .c-flow{stroke:var(--accent);stroke-width:2.5;stroke-dasharray:.05 .11;opacity:0;transition:opacity .6s 1.6s;animation:lp-flow 2.8s linear infinite}
.lp-pick-connect .c-dot{fill:var(--accent);transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .5s var(--ease)}
.lp-pick-connect .c-dot-end{transition-delay:1.35s}
.lp-pick-connect .c-ring{fill:none;stroke:var(--accent);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
.lp-pick-connect.is-in .c-line{stroke-dashoffset:0}
.lp-pick-connect.is-in .c-flow{opacity:.95}
.lp-pick-connect.is-in .c-dot{transform:scale(1)}
.lp-pick-connect.is-in .c-ring{animation:lp-ring 2.4s ease-out 1.6s infinite}
@keyframes lp-flow{to{stroke-dashoffset:-.16}}
@keyframes lp-ring{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.6);opacity:0}}
@media (max-width:699px){.lp-pick-connect{display:none}.lp-pick-more-wrap{margin-bottom:clamp(1.25rem,3vw,1.75rem)}}
@media (prefers-reduced-motion:reduce){.lp-pick-connect .c-line{stroke-dashoffset:0;transition:none}.lp-pick-connect .c-dot{transform:none;transition:none}.lp-pick-connect .c-flow,.lp-pick-connect .c-ring{animation:none}.lp-pick-connect .c-flow{opacity:.95}}
/* a dark section as one rounded card inside the cream body, instead of a full-bleed band (Sivan, 23.9: the catalog teaser on the academy hub) */
.lp-body .lp-dark.lp-dark-card{width:min(100% - 2 * var(--gutter),calc(var(--maxw) - 2 * var(--gutter)));margin-inline:auto;border-radius:clamp(28px,3vw,40px);box-shadow:0 50px 90px -40px color-mix(in srgb,var(--wine) 70%,transparent)}
.lp-body .lp-dark.lp-dark-card .container{padding-inline:clamp(1.5rem,3.5vw,2.75rem)}
.lp-pick-grid-2{max-width:none} /* the two cards together run as wide as the featured card above (Sivan, 22.9) */ /* unequal widths (1.35fr/1fr) were tried and rejected the same day - looked misaligned (Sivan, 23.9) */

/* .lp-fit: the second headline line is scaled by landing.js to the width of the first (the home page's h2-fit) */
.lp-fit .line{width:max-content;max-width:100%}
.lp-fit .line+.line{line-height:.85;margin-top:-.2em} /* tucked under the first line like the home page's h2-fit (Sivan, 22.9: less gap) */

/* graduates' messages: the real screenshots, drifting like the logos (Sivan, 22.9: keep the screenshots) */
.lp-shots-note{color:var(--accent);transform:none;margin:-.9rem 0 clamp(1rem,2vw,1.5rem)} /* magenta, straight, tucked under the heading (Sivan, 22.9) */
.lp-shots .h2{margin-bottom:.6rem}
.lp-shots-marquee .marquee-track{animation-duration:56s;align-items:flex-start}
.lp-shots-marquee .marquee-group{gap:clamp(.9rem,1.8vw,1.4rem);padding-inline-end:clamp(.9rem,1.8vw,1.4rem);align-items:flex-start}
.lp-shots-marquee img{height:clamp(120px,13vw,170px);width:auto;max-width:none;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:0 30px 60px -36px rgba(28,15,31,.5)}
@media (prefers-reduced-motion:reduce){.lp-shots-marquee .marquee-track{animation:none}}
@media (min-width:900px){.lp-catalog-grid-4{grid-template-columns:repeat(4,1fr)}}
/* phones: the deck sits above the headline, like the home page's hero (Sivan, 22.9); same numbers as .hero-slides on index - full bleed, faint tiles, no top fade, only into the headline (Sivan, 23.9: "a soft fade like the home page") */
@media (max-width:899px){
  .lp-hero-grid{gap:clamp(.75rem,3vw,1.25rem)}
  .lp-visual{order:-1;height:clamp(220px,62vw,270px);margin:-12px calc(-1 * var(--gutter)) .25rem; /* physical margins: .lp-visual is direction:ltr, symmetric so no rtl flip */
    -webkit-mask-image:linear-gradient(180deg,#000 0,#000 64%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 64%,transparent 100%)}
  .lp-visual .collage-rows{inset:0 -35% auto;justify-content:flex-start;padding-top:clamp(36px,10vw,44px);transform:rotate(-7deg);transform-origin:top center;gap:10px}
  .lp-visual .collage-row{gap:10px}
  .lp-visual .collage-tile{width:clamp(96px,27vw,120px);opacity:.42;border-radius:8px;box-shadow:0 10px 24px -14px rgba(0,0,0,.6)}
}
}

/* ===== item pages (catalog items, 24.9.2026) + single-visual gift pages ===== */
.lp-visual-single img,.lp-visual-single video{background:var(--cream-2)}
.lp-visual-single video{width:min(88%,460px);height:auto;border-radius:14px;transform:rotate(-6deg);box-shadow:0 40px 80px -30px rgba(0,0,0,.75),0 0 0 1px color-mix(in srgb,var(--cream) 14%,transparent)}
.lp-item-preview video{width:100%;height:auto;display:block;border-radius:14px;border:1px solid var(--line);box-shadow:0 30px 60px -40px rgba(28,15,31,.5);background:var(--cream-2)}
.lp-item-body-lead{margin:0 0 1rem;font-weight:400;color:var(--ink-soft);font-size:clamp(1.05rem,1.35vw,1.2rem)}
.lp-item-facts{grid-template-columns:1fr}
.lp-item-preview{margin-top:1.25rem;position:relative}
.lp-item-preview img{width:100%;height:auto;display:block;border-radius:14px;border:1px solid var(--line);box-shadow:0 30px 60px -40px rgba(28,15,31,.5);background:var(--cream-2)}
.lp-item-preview-note{position:absolute;bottom:-.9rem;inset-inline-end:1.25rem;color:var(--accent);background:var(--cream);padding:.1rem .6rem;border-radius:999px}
.lp-course .lp-catalog-notes{margin-top:clamp(2rem,4vw,3rem);border-color:var(--line);color:var(--ink)}
.lp-course .lp-catalog-notes ul{color:var(--ink-soft)}
.lp-course .lp-catalog-notes a{color:var(--accent)}
@media (min-width:900px){.lp-more-grid-4{grid-template-columns:repeat(4,1fr)}}
@media (max-width:899px){
  .lp-visual.lp-visual-single{height:auto;margin:.25rem 0 .5rem;padding:.75rem 0 1.25rem;-webkit-mask-image:none;mask-image:none}
  .lp-visual.lp-visual-single img,.lp-visual.lp-visual-single video{width:min(84%,420px);opacity:1}  .lp-item-preview{margin-bottom:1.75rem} /* the FtOrik note hangs below the preview; keep it off the buy card */
}

/* ===== phone fixes (Sivan, 24.9.2026) ===== */
.lp-desk{display:inline}
.lp-faq-list details p{overflow:hidden} /* animated open/close (landing.js) */
@media (max-width:899px){
  .lp-desk{display:none} /* short pill labels so the three stats stay on one line */
  .lp-stats{flex-wrap:nowrap;gap:.35rem;justify-content:flex-start}
  .lp-stats li{padding:.42em .62em .38em;font-size:.82rem;white-space:nowrap;gap:.3em}
  .lp-stats b{font-size:1.15em}
  .lp-featured-side .lp-stats{justify-content:center}
  .lp-h1{font-size:clamp(2.1rem,9.4vw,2.7rem)} /* bigger headline on phones (Sivan, 24.9) */
  .lp-eyebrow+.lp-h1,.lp-eyebrow-dot+.lp-h1{margin-top:-.5rem} /* eyebrow closer to the headline */
  .lp-photos-copy .h2,.lp-photos-copy .lp-photos-note.lp-taste-note{text-align:center}
  .lp-body .lp-photos-copy .h2{margin-bottom:0;position:relative;z-index:2} /* the heading sits in front of the handwriting note that tucks under it (Sivan, 24.9) */
  .lp-photos .lp-photos-note{margin-top:-.15rem;position:relative;z-index:1}
  .lp-logos-band .logo-img{opacity:.6}
  .lp-photos{padding-bottom:.5rem}
  .lp-photos+.section{padding-top:.75rem} /* "ככה זה נראה בשטח" closer to the next heading (Sivan, 24.9) */
  .lp-page .footer{padding-top:1.5rem} /* the glass pill touched the section above */
  /* catalog on phones: one item at a time, swiped sideways like the home page's portfolio (Sivan, 24.9), instead of a 15-card column */
  body.lp-catalog .lp-catalog-grid{display:flex;gap:.9rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-inline:calc(-1 * var(--gutter));padding:.25rem var(--gutter) 1rem;direction:rtl}
  body.lp-catalog .lp-catalog-grid::-webkit-scrollbar{display:none}
  body.lp-catalog .lp-item{flex:0 0 min(78vw,320px);scroll-snap-align:center}
  .lp-scroll-hint{display:flex;justify-content:center;align-items:center;gap:.5em;margin:.25rem 0 .5rem;font-family:var(--font-note);font-size:1.15rem;color:var(--accent-light)}
  .lp-scroll-hint span{display:inline-block;animation:lpHintNudge 1.6s ease-in-out infinite}
  .lp-scroll-bar{height:3px;border-radius:999px;background:color-mix(in srgb,var(--cream) 14%,transparent);margin:0 auto 1rem;max-width:200px;overflow:hidden}
  .lp-scroll-bar i{display:block;height:100%;width:100%;background:var(--accent);transform-origin:right;transform:scaleX(var(--p,.1));transition:transform .2s}
}
@media (min-width:900px){.lp-scroll-hint,.lp-scroll-bar{display:none}}
@keyframes lpHintNudge{50%{transform:translateX(-6px)}}
@media (prefers-reduced-motion:reduce){.lp-scroll-hint span{animation:none}}

/* "how it works": the steps sit in a white card with the site's soft shadow (Sivan, 24.9) */
.lp-step-list{background:rgba(255,255,255,.72);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.25rem,2.6vw,2rem);box-shadow:0 30px 60px -44px rgba(28,15,31,.45)}
.lp-step-list{isolation:isolate} /* keeps the rail line (::before, z-index:-1) above the card background */
@media (min-width:700px){.lp-step-list .lp-step-num{background:color-mix(in srgb,#fff 72%,var(--cream))}} /* the chip that hides the rail under the number now matches the card, not the page */

/* brand book elements on landing pages (24.9.2026) */
.lp-page .footer-inner .brand{display:inline-flex;align-items:center;gap:.6rem}
.lp-page .brand-mark{width:24px;height:24px;flex:none;fill:currentColor;color:var(--cream)}
.lp-about-card{overflow:hidden}
.lp-about-card .brand-el-flower{inset-inline-start:auto;inset-inline-end:-30px;top:-30px;width:clamp(110px,12vw,160px);transform:rotate(14deg)}
.lp-about-card>*:not(.brand-el){position:relative;z-index:1}

/* ===== audit fixes 25.9.2026 (landing pages) ===== */
.lp-item-preview-note{color:var(--red-deep)} /* pink on cream was 3.34:1; --red-deep is 4.66:1 */
#inside,#buy{scroll-margin-top:1.5rem}
.lp-scroll-hint{transition:opacity .3s}
.lp-scroll-hint.is-end{opacity:0}
@media (max-width:899px){
  .lp-crumb{min-height:40px}
  .lp-h1,.lp-page h2,.lp-page .h2,.lp-page .h3{text-wrap:pretty}
}