/* ============================================================================
   FACTURO / DocsOrigin · fx-art.css — שכבת ה"תעודה".
   ----------------------------------------------------------------------------
   ⚠ **הרעיון שמניע את הקובץ הזה:** המוצר מוכר "מסמכים שעומדים בביקורת".
     לכן האווירה לא לקוחה מ-SaaS אלא מ**נייר ערך**: גיוש (guilloche) מחרטת
     רוזטות, קווי חריטה דקים, הטבעת רדיד זהב. כל הנכסים ב-assets/art/
     נוצרים מ-assets/art/_gen.py — ⛔ אל תערוך SVG ביד, ערוך את הסקריפט.

   ⛔ אין כאן שום כלל שמעצב מחדש אלמנט קיים. כל מחלקה היא **תוספת** שמצטרפת
      למה שכבר יש (opt-in), כדי ש-fx.css יישאר המקור היחיד לפריסה ולצבע.
   ⛔ אין backdrop-filter. ⛔ אין אנימציה מתמדת — רק כניסה חד-פעמית ≤600ms.
   ⚠ הכול מראה-בטוח (RTL): הרוזטות סימטריות, מניפת האור סימטרית סביב האנך,
     ושום נכס לא "מצביע" לכיוון קריאה.

   שכבות (z-index בתוך .art-hero):
     0  hero-2027.webp במסך רחב; hero-backdrop.svg הוא fallback קל למובייל
     1  ::before           — grain.png (מפסיק את ה-banding של הגרדיאנטים)
     2  ::after            — דעיכה נקייה ל-#0b1020 בתחתית
     (תוכן ההירו יושב מעל, z-index:2 מ-fx.css)
   ========================================================================== */

:root{
  --art-ink:var(--brand-night,#0b1020);
  /* ⚠ ל-fx.css כבר יש --gold-foil באותן ארבע עצירות. משתמשים בו, ונופלים
     אחורה רק אם fx.css לא נטען — ⛔ לא מגדירים טוקן זהב שני שיסתור אותו. */
  --art-foil:var(--gold-foil,linear-gradient(100deg,#f7e7b0,#e8b53d 38%,#b8862a 62%,#f2d98a));
}

/* ========================================================== רקע ההירו === */
/* שימוש: <div class="art-hero" aria-hidden="true"></div> כילד הראשון של .hero
   ⚠ .hero כבר position:relative + overflow:hidden ב-fx.css, אז אין צורך בכלום. */
.art-hero{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  overflow:hidden; contain:paint; isolation:isolate;
  background:url(art/hero-backdrop.svg) center top / cover no-repeat, var(--art-ink);
}

/* האמנות הרסטרית שוקלת 112KB אחרי המרת WebP. היא נטענת רק כשיש מספיק
   שטח להציג את הפרטים; במובייל נשארים עם ה-SVG הקל. שתי שכבות הצללה
   סימטריות משאירות ניגודיות זהה לטקסט ב-RTL וב-LTR. */
@media screen and (min-width:960px){
  .lp .hero .art-hero{
    background:
      linear-gradient(180deg,rgba(4,9,23,.18) 0%,rgba(4,9,23,.04) 46%,rgba(7,13,29,.76) 94%,var(--art-ink) 100%),
      linear-gradient(90deg,rgba(4,9,23,.4),rgba(4,9,23,.08) 50%,rgba(4,9,23,.4)),
      url(art/hero-2027.webp) center 57% / cover no-repeat,
      var(--art-ink);
  }
}

/* ⚠ הגרעין הוא מה שמונע מגרדיאנט ענק להיראות זול (banding).
   overlay על אפור-אמצע = 0 שינוי; רק הסטיות מבהירות/מכהות. */
.art-hero::before{
  content:''; position:absolute; inset:0;
  background:url(art/grain.png) repeat; background-size:128px 128px;
  opacity:.055; mix-blend-mode:overlay;
}

/* דעיכה לצבע מלא, כדי שהסקשן שמתחת יתחבר בלי תפר. */
.art-hero::after{
  content:''; position:absolute; inset-inline:0; inset-block-end:-1px; height:230px;
  background:linear-gradient(180deg,rgba(11,16,32,0) 0%,rgba(11,16,32,.72) 52%,var(--art-ink) 88%,var(--art-ink) 100%);
}

/* ⛔ שני רדיאלים שטוחים מ-fx.css היו מזהמים את ההרכב — מכבים אותם,
   אבל **רק** כשהשכבה החדשה באמת נוכחת. הסלקטור ממוקד למחלקה, לא ל-div חשוף. */
/* ⚠ הכלל `:has()` שהיה כאן הוסר — הרדיאלים הישנים נמחקו מ-fx.css עצמו,
   ולכן אין מה לכבות. פחות סריקת עץ, פחות תלות בגרסת דפדפן. */

/* כניסה מדורגת חד-פעמית — ⛔ לא לולאה. כל התנועה היא בציר הבלוק ולכן
   אינה זקוקה להיפוך ב-RTL, ואינה משנה את רוחב הפריסה. */
@media (prefers-reduced-motion:no-preference){
  .art-hero{ animation:art-rise .58s cubic-bezier(.22,.61,.36,1) both; }
  .lp .hero-in > *{ animation:art-copy-in .54s cubic-bezier(.22,.72,.3,1) both; }
  .lp .hero-in > :nth-child(1){ animation-delay:.08s; }
  .lp .hero-in > :nth-child(2){ animation-delay:.13s; }
  .lp .hero-in > :nth-child(3){ animation-delay:.18s; }
  .lp .hero-in > :nth-child(4){ animation-delay:.23s; }
  .lp .hero-in > :nth-child(5){ animation-delay:.28s; }
  .lp .hero-promise{ animation:art-card-in .62s cubic-bezier(.22,.72,.3,1) .2s both; }
}
@keyframes art-rise{
  from{ opacity:0; translate:0 -14px; }
  to  { opacity:1; translate:0 0; }
}
@keyframes art-copy-in{
  from{ translate:0 10px; }
  to  { translate:0 0; }
}
@keyframes art-card-in{
  from{ translate:0 14px; }
  to  { translate:0 0; }
}

/* =============================================================== גרעין === */
/* שכבת גרעין עצמאית לכל סקשן כהה (הוסף position:relative למארח בעצמך,
   או השתמש ב-.art-strip שכבר עושה זאת). */
.art-grain{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url(art/grain.png) repeat; background-size:128px 128px;
  opacity:.05; mix-blend-mode:overlay;
}
.art-grain.soft{ opacity:.035; }

/* ============================================================== גיוש === */
/* אריח engine-turned. ⛔ צבע הקו **צרוב** ב-SVG (#9db0ff) ולא currentColor:
   SVG כ-background-image הוא מסמך נפרד, ו-currentColor שם נפתר לשחור של
   אותו מסמך — לא לצבע של הדף. CSS שולט רק באטימות. ⛔ לא מעל 6%. */
.art-guilloche{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url(art/guilloche-tile.svg) repeat; background-size:240px 240px;
  opacity:.04;
}
.art-guilloche.fade{
  -webkit-mask-image:radial-gradient(120% 100% at 50% 50%,#000 30%,transparent 78%);
          mask-image:radial-gradient(120% 100% at 50% 50%,#000 30%,transparent 78%);
}

/* ====================================================== רצועת הנתונים === */
/* מארח מעוטר לרצועת המספרים: גיוש חלש + נצנוץ רדיד + גרעין. */
.art-strip{ position:relative; isolation:isolate; }
.art-strip > *{ position:relative; z-index:1; }
.art-strip::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url(art/guilloche-tile.svg) repeat; background-size:200px 200px;
  opacity:.05;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);
}
/* ⚠ הנצנוץ ב-SVG הוא אלכסון ביחידות תיבה — ברצועה רחבה ונמוכה הוא נמתח
   לכתם אופקי שנראה כמו לכלוך על העדשה. לכן **רוחב קבוע** במרכז, לא 100%. */
.art-strip::after{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url(art/foil-sheen.svg) center / 640px 100% no-repeat;
  opacity:.13; mix-blend-mode:screen;
}

/* =========================================================== מפרידים === */
/* אורנמנט בלוק. ⚠ שניהם סימטריים — מראה-בטוחים לחלוטין. */
.art-divider{
  display:block; width:100%; max-width:720px; height:26px;
  margin-inline:auto; margin-block:34px;
  background:url(art/divider-rule.svg) center / contain no-repeat;
  border:0;
}
.art-divider.rosette{
  max-width:560px; height:64px;
  background-image:url(art/divider-rosette.svg);
}
.art-divider.tight{ margin-block:20px; }

/* ================================================================ רדיד === */
/* ⚠ נשמע יותר משנראה. ⛔ ב-0.28 הנצנוץ *מלבין* את הכפתור הכחול והוא נראה
   דהוי לצד כפתור רגיל — נדרש נצנוץ צר, לא שטיפה. הזהב עובד כי הוא נדיר. */
.art-foil{ position:relative; overflow:hidden; isolation:isolate; }
.art-foil > *{ position:relative; z-index:1; }
.art-foil::after{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  border-radius:inherit;
  background:url(art/foil-sheen.svg) center / 100% 100% no-repeat;
  opacity:.17; mix-blend-mode:screen;
}
.art-foil.strong::after{ opacity:.34; }

/* קו רדיד דק — לקצה עליון של סקשן, במקום border שטוח. */
.art-foil-rule{
  position:absolute; inset-inline:0; inset-block-start:0; height:1px; z-index:1;
  background:var(--art-foil); opacity:.34; pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);
}

/* ============================================================ נגישות === */
@media (prefers-contrast:more){
  .art-hero::before,.art-grain,.art-guilloche,.art-strip::before,.art-strip::after{ opacity:.02; }
}

@media (prefers-reduced-motion:reduce){
  .art-hero,.lp .hero-in > *,.lp .hero-promise{ animation:none; translate:none; }
}

/* ========================================================================== */
/* 2027 / THE LIVING DOCUMENT
   --------------------------------------------------------------------------
   The two generated WebP objects are intentionally treated like physical
   exhibits, not full-bleed wallpaper.  Their transparent edges, restrained
   foil and the real HTML document below keep the page credible while giving
   the campaign a recognisable visual idea.

   Important loading decision: neither 430KB exhibit is requested on narrow
   mobile.  Those screens keep the lightweight SVG composition above. */

.lp .hero-generated-hook{
  position:absolute; inset:0; z-index:1; overflow:hidden;
  pointer-events:none; contain:paint; isolation:isolate;
}

/* Fine security-print rays behind the generated object.  Static, cheap and
   mirror-safe: the logical edge follows the monument in RTL automatically. */
.lp .hero-generated-hook::after{
  content:''; position:absolute; z-index:0;
  inline-size:min(58vw,860px); aspect-ratio:1; inset-inline-end:-7%; inset-block-start:2%;
  border-radius:50%; opacity:.38;
  background:
    repeating-conic-gradient(from 10deg,rgba(137,164,255,.12) 0 .45deg,transparent .45deg 4deg),
    radial-gradient(circle,transparent 0 43%,rgba(232,181,61,.2) 43.15% 43.4%,transparent 43.6% 60%,rgba(127,151,255,.14) 60.2% 60.4%,transparent 60.6%);
  -webkit-mask-image:radial-gradient(circle,#000 0 56%,transparent 75%);
          mask-image:radial-gradient(circle,#000 0 56%,transparent 75%);
}

@media screen and (min-width:761px){
  .lp .hero-generated-hook::before{
    content:''; position:absolute; z-index:1;
    inline-size:clamp(490px,49vw,740px); aspect-ratio:1;
    inset-inline-end:clamp(-118px,-5.5vw,-38px); inset-block-start:58px;
    background:url(art/document-portal-2027.webp) center / contain no-repeat;
    opacity:.88;
    filter:drop-shadow(0 42px 54px rgba(0,4,17,.52)) drop-shadow(0 0 22px rgba(77,110,255,.18));
    transform:translate3d(var(--art-shift-x,0),var(--art-shift-y,0),0) scale(.98);
    transform-origin:50% 62%;
    -webkit-mask-image:linear-gradient(180deg,#000 0 84%,transparent 99%);
            mask-image:linear-gradient(180deg,#000 0 84%,transparent 99%);
  }

  /* A one-shot foil pass: it reads as light catching engraved metal, then
     stops. There is deliberately no looping ambient animation. */
  @media (prefers-reduced-motion:no-preference){
    .lp .hero-generated-hook::before{
      animation:living-document-arrive 1s cubic-bezier(.18,.74,.24,1) .08s both;
    }
    .lp .hero-generated-hook::after{
      animation:living-orbit-arrive 1.15s cubic-bezier(.18,.74,.24,1) .16s both;
    }
  }
}

@keyframes living-document-arrive{
  from{ opacity:0; transform:translate3d(var(--art-shift-x,0),calc(var(--art-shift-y,0) + 28px),0) scale(.925); }
  to{ opacity:.88; transform:translate3d(var(--art-shift-x,0),var(--art-shift-y,0),0) scale(.98); }
}
@keyframes living-orbit-arrive{
  from{ opacity:0; scale:.88; rotate:-5deg; }
  to{ opacity:.38; scale:1; rotate:0deg; }
}

/* Monument = the certificate in front of the living document.  A narrow foil
   edge and stronger silhouette separate it from the much richer illustration. */
.lp .hero-monument{ position:relative; z-index:3; isolation:isolate; }
.lp .hero-monument::after{
  content:''; position:absolute; z-index:-1; inset:6% -6% -8%; border-radius:50%;
  background:radial-gradient(ellipse,rgba(38,72,224,.25),transparent 66%);
  filter:blur(12px); pointer-events:none;
}
.lp .hero-promise{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 0 0 1px rgba(232,181,61,.035),
    0 38px 96px rgba(0,0,0,.38),0 0 0 1px rgba(104,137,255,.06);
}
.lp .hero-promise::after{
  content:''; position:absolute; inset:-90% -45%; z-index:0; pointer-events:none;
  background:linear-gradient(104deg,transparent 38%,rgba(255,245,211,.02) 43%,rgba(255,245,211,.22) 49%,rgba(255,255,255,.03) 54%,transparent 60%);
  translate:-72% 0; rotate:4deg;
}
@media (prefers-reduced-motion:no-preference){
  .lp .hero-promise::after{ animation:living-foil-pass 1.35s cubic-bezier(.2,.7,.2,1) .68s both; }
}
@keyframes living-foil-pass{ to{ translate:72% 0; } }

/* The proof theatre is framed like a registration plate: layered keyline,
   clipped corners and engraved side marks instead of another soft SaaS card. */
.lp .product-stage{ isolation:isolate; overflow:clip; }
.lp .product-stage::before{
  content:''; position:absolute; z-index:0; inset-inline:0; inset-block-start:0; block-size:76%;
  background:
    linear-gradient(90deg,transparent 0 9%,rgba(127,151,255,.09) 9% 9.08%,transparent 9.08% 90.92%,rgba(127,151,255,.09) 90.92% 91%,transparent 91%),
    repeating-linear-gradient(90deg,transparent 0 58px,rgba(171,190,255,.026) 58px 59px);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 92%);
          mask-image:linear-gradient(180deg,#000,transparent 92%);
  pointer-events:none;
}

/* Side light belongs to the stage, never to the live document. The theatre is
   opaque and sits above both ambient layers, so totals, controls and buttons
   retain their original contrast and hit area. */
@media screen and (min-width:900px){
  .lp .product-stage > .wrap{ position:relative; z-index:1; }
  .lp .product-stage::after{
    content:''; position:absolute; z-index:0; inset:0; pointer-events:none;
    background:
      radial-gradient(ellipse 19% 48% at 0 42%,rgba(79,111,244,.14),transparent 74%),
      radial-gradient(ellipse 19% 48% at 100% 58%,rgba(224,181,77,.075),transparent 74%);
    opacity:.82;
  }
}
.lp .theatre{ position:relative; isolation:isolate; }
.lp .theatre::before{
  content:''; position:absolute; z-index:5; pointer-events:none; inset:-1px;
  border:1px solid rgba(227,234,255,.26); border-radius:inherit;
  box-shadow:inset 0 0 0 8px rgba(8,16,37,.025),inset 0 0 0 9px rgba(50,76,179,.06);
  clip-path:polygon(0 17px,17px 0,calc(100% - 17px) 0,100% 17px,100% calc(100% - 17px),calc(100% - 17px) 100%,17px 100%,0 calc(100% - 17px));
}
.lp .theatre::after{
  content:'DOC / ORIGIN'; position:absolute; z-index:6; inset-block-start:15px; inset-inline-end:20px;
  color:rgba(56,85,223,.44); font:700 9px/1 var(--mono); letter-spacing:.18em;
  pointer-events:none;
}
[dir=rtl] .lp .theatre::after{ letter-spacing:.12em; }

/* A restrained scroll choreography. In non-supporting browsers every element
   remains fully visible; it is therefore safe progressive enhancement. */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .lp .theatre,
    .lp .how-visual,
    .lp .how-layout .step,
    .lp .feat,
    .lp .closing-panel{
      animation-name:living-section-reveal;
      animation-duration:1ms;
      animation-fill-mode:both;
      animation-timing-function:linear;
      animation-timeline:view(block);
      animation-range:entry 0% cover 27%;
    }
    .lp .how-layout .step:nth-child(2),.lp .feat:nth-child(2),.lp .feat:nth-child(5){ animation-range:entry 4% cover 31%; }
    .lp .how-layout .step:nth-child(3),.lp .feat:nth-child(3),.lp .feat:nth-child(6){ animation-range:entry 8% cover 35%; }
  }
}
@keyframes living-section-reveal{
  from{ opacity:.28; translate:0 24px; }
  to{ opacity:1; translate:0 0; }
}

/* At tablet widths the exhibit stays visible but gives more air to the copy.
   Narrow phones intentionally do not download it (see min-width above). */
@media screen and (min-width:761px) and (max-width:1100px){
  .lp .hero-generated-hook::before{
    inline-size:clamp(480px,58vw,640px); inset-inline-end:-155px; inset-block-start:118px; opacity:.66;
  }
  .lp .hero-generated-hook::after{ inline-size:68vw; inset-inline-end:-15%; inset-block-start:10%; opacity:.26; }
}
/* At the single-column tablet breakpoint the generated object sits beneath
   the live copy.  A local cinematic scrim preserves readable text over its
   bright paper edges without dimming the exhibit outside the copy area. */
@media screen and (min-width:761px) and (max-width:900px){
  .lp .hero-in{ position:relative; isolation:isolate; }
  .lp .hero-in::before{
    content:''; position:absolute; z-index:-1; pointer-events:none;
    inset:-34px -30px;
    background:radial-gradient(ellipse at 50% 48%,rgba(4,10,26,.82) 0 48%,rgba(4,10,26,.58) 67%,transparent 86%);
    filter:blur(7px);
  }
}
@media screen and (max-width:760px){
  /* The 433KB portal remains disabled on phones. The far lighter 112KB
     cinematic background supplies paper corners only in the otherwise empty
     lower part of the hero; a dark scrim keeps long translations readable. */
  .lp .hero .art-hero{
    background:
      linear-gradient(180deg,rgba(4,9,23,.1) 0 50%,rgba(5,11,25,.22) 66%,rgba(7,13,29,.82) 100%),
      url(art/hero-2027.webp) center bottom / 100% auto no-repeat,
      url(art/hero-backdrop.svg) center top / cover no-repeat,
      var(--art-ink);
  }
  .lp .hero-generated-hook::before{ content:none; background-image:none; }
  .lp .hero-generated-hook::after{
    inline-size:min(92vw,420px); inset-inline:0; margin-inline:auto;
    inset-block-start:auto; inset-block-end:58px; opacity:.16;
  }
  .lp .hero-monument::after{ inset:10% -2% -5%; opacity:.58; }
  .lp .theatre::after{ display:none; }
  .lp .theatre::before{ box-shadow:inset 0 0 0 5px rgba(8,16,37,.025); }
}

@media (prefers-reduced-motion:reduce){
  .lp .hero-generated-hook::before,
  .lp .hero-generated-hook::after,
  .lp .hero-promise::after,
  .lp .theatre,.lp .how-visual,.lp .how-layout .step,.lp .feat,.lp .closing-panel{
    animation:none !important; transition:none !important; translate:none; rotate:none;
  }
  .lp .hero-generated-hook::before{ transform:none; }
  .lp .hero-promise::after{ display:none; }
}

/* ========================================================================== */
/* Final exhibit rhythm.
   --------------------------------------------------------------------------
   A single vector registration rule bridges the sections. Keeping this as a
   quiet SVG keyline avoids the glossy CGI ribbon while preserving the pause
   before the feature plates. It never sits behind readable copy. */

@media screen and (min-width:981px){
  /* Override the generic tint clipping: the registration rule bridges the
     sections rather than becoming another framed illustration. */
  .lp #features{ isolation:isolate; overflow:visible; }
  .lp #features > .wrap{ position:relative; z-index:2; }
  .lp #features::before{
    content:''; position:absolute; z-index:1; pointer-events:none;
    inset-inline:0; margin-inline:auto; inset-block-start:0;
    inline-size:min(82%,720px); block-size:64px;
    background:url(art/divider-rosette.svg) center / min(100%,560px) 64px no-repeat;
    opacity:.24;
    filter:none;
    transform:translateY(-50%);
  }
  .lp #features::after{
    content:''; position:absolute; z-index:1; pointer-events:none;
    inset-inline:7%; inset-block-start:-1px; block-size:1px;
    background:linear-gradient(90deg,transparent,#d9ac47 24%,#7897ff 50%,#d9ac47 76%,transparent);
    opacity:.46;
  }
  /* Reserve a measured pause without creating an illustration-sized void. */
  .lp #features .sec-head{ padding-block-start:clamp(34px,4vw,58px); }
}

/* The paper section gets two restrained engraved corner signatures. They live
   entirely in whitespace and are symmetrical, so RTL changes placement but
   never mirrors a directional object. */
@media screen and (min-width:900px){
  .lp #how{ overflow:hidden; isolation:isolate; }
  .lp #how > .wrap{ position:relative; z-index:2; }
  .lp #how::after{
    content:''; position:absolute; z-index:0; inset:0; pointer-events:none;
    background:
      url(art/divider-rosette.svg) -138px 54px / 470px 54px no-repeat,
      url(art/divider-rosette.svg) calc(100% + 138px) calc(100% - 58px) / 470px 54px no-repeat;
    opacity:.16;
  }
}

/* Rendering work below the fold is skipped until it approaches the viewport.
   `auto` keeps the sections in the accessibility tree and lets the browser
   replace each estimate with its measured size after first paint. */
@supports (content-visibility:auto){
  .lp #preview{ content-visibility:auto; contain-intrinsic-block-size:auto 920px; }
  .lp #free{ content-visibility:auto; contain-intrinsic-block-size:auto 940px; }
  .lp #how{ content-visibility:auto; contain-intrinsic-block-size:auto 850px; }
  .lp .closing-cta{ content-visibility:auto; contain-intrinsic-block-size:auto 620px; }
}

@media (prefers-reduced-data:reduce){
  .lp .hero .art-hero{
    background:url(art/hero-backdrop.svg) center top / cover no-repeat,var(--art-ink);
  }
  .lp #features::before{ content:none; background-image:none; }
  .lp #features .sec-head{ padding-block-start:0; }
}
.art-save-data .lp .hero .art-hero{
  background:url(art/hero-backdrop.svg) center top / cover no-repeat,var(--art-ink);
}
.art-save-data .lp #features::before{ content:none; background-image:none; }
.art-save-data .lp #features .sec-head{ padding-block-start:0; }

@media (prefers-contrast:more){
  .lp #features::before{ opacity:.24; filter:none; }
}

@media screen and (max-width:980px){
  .lp #features::before,.lp #features::after{ content:none; background-image:none; }
  .lp #features .sec-head{ padding-block-start:0; }
}

@media print{
  .lp .product-stage::after,.lp #how::after,.lp #features::before,.lp #features::after{
    display:none !important; background-image:none !important;
  }
}