/* ליאור פיין — — canvas layout.
   Every element is absolutely positioned at its Figma coordinate inside a
   fixed-width canvas; one variable (--s) scales the canvas to the viewport,
   so the proportions hold at every width. */

/* Noto Sans Hebrew is the design's OWN face and is OFL, so it ships with the
   plugin rather than being substituted. Two cuts, both instanced from the
   upstream variable font (build/fetch_fonts.py) and subset to the Hebrew and
   Latin the page uses. Because it IS the design's font, no tracking correction
   is needed and paragraphs break where Figma broke them.

   Self-hosted, not linked: a font served from another domain is subject to CORS
   and silently falls back to the system face on any host that is not the one
   that set the header. */
@font-face{font-family:'Noto Sans Hebrew';src:url('../fonts/NotoSansHebrew-Regular.woff2')format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Noto Sans Hebrew';src:url('../fonts/NotoSansHebrew-Bold.woff2')format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Noto Sans Hebrew';src:url('../fonts/NotoSansHebrew-Black.woff2')format('woff2');font-weight:900;font-style:normal;font-display:swap}

/* Defaults live on :root. A var() that resolves nowhere invalidates the whole
   declaration it sits in — silently, with no console warning. */
/* This design's own palette, counted off the frame rather than inherited.
   #FD6E0A appears 152 times in it, #1C1712 and #F2F2F2 82 each. The tokens
   here were still the previous build's golds, which nothing on the canvas uses
   — the canvas carries Figma's colours inline — but the focus rings and the
   credit strip did, so the one gold thing on an orange site was the outline
   around a field the visitor had just tabbed into. */
:root{--s:1;
      --lfn-bg:#1C1712;--lfn-panel:#3C2208;--lfn-light:#F2F2F2;
      --lfn-orange:#FD6E0A;--lfn-orange-deep:#E35D00;--lfn-navy:#162741;
      --lfn-cream:#F2F2F2;--lfn-red:#D01212;
      --lfn-muted:rgba(242,242,242,.62);
      /* Kept as aliases: several rules below still name the old tokens, and a
         var() that resolves nowhere kills its whole declaration in silence. */
      --lfn-gold:#FD6E0A;--lfn-gold-deep:#E35D00;--lfn-gold-mid:#FD6E0A}

.lfn-page{direction:rtl;position:relative;width:100%;overflow-x:clip;
          background:var(--lfn-bg);isolation:isolate;color:var(--lfn-cream)}
.lfn-page *{box-sizing:border-box}

/* The canvas is scaled to the window by --s. That number is set by an inline
   script the renderer prints immediately after each canvas, so it is applied
   while the HTML is still parsing — BEFORE the first paint.

   It used to be set only by a deferred script in the footer, and until that ran
   the page painted its 1600px canvas at full size inside whatever window it
   had. That is what a visitor saw on every load, for as long as the images took
   to settle.

   CSS cannot do this arithmetic here: dividing two lengths needs
   tan(atan2(a, b)), which this engine does not support (checked, not assumed).

   Both Figma frames set clipsContent, so the canvas clips too — the hero
   artwork bleeds 124px past the left edge and 100px above the top. */
.lfn-canvas{--s:1;position:relative;width:100%;direction:ltr;
            background:var(--lfn-bg);
            /* `hidden` for the browsers that need it, then `clip` for everyone
               else. They look identical and are not: `hidden` makes a scroll
               CONTAINER, so anything overhanging the canvas — the design's own
               17,496px backdrop rectangle, or a mispositioned control — gives
               the keyboard somewhere to scroll to. Tabbing to a stranded button
               once scrolled 11,120px of hidden box and left the viewport solid
               black with a lone focus ring. `clip` cannot scroll at all. */
            overflow:hidden;overflow:clip}

/* Scripting off: the canvas cannot be fitted at all, so let it be scrolled
   rather than silently cropping a third of the design. */
.lfn-noscript .lfn-canvas{overflow-x:auto}
/* The stage is the ONE thing that scales, and it wraps every section.

   Putting the transform on each section instead looks equivalent and is not: a
   transform does not affect layout, so the sections kept stacking by their
   DESIGN heights while their contents drew at s. The stack stayed 12,460px tall
   at every scale, and the canvas — correctly sized to 12,460 x s — clipped the
   remainder. A 1440 laptop lost the last 1,009px of the page and a 1280 one
   2,138px, the whole accordion among them. Both frames are measured at their
   own width, where s is exactly 1, so no gate could see it. */
.lfn-stage{position:relative;width:calc(var(--dw)*1px);
           transform:scale(var(--s));transform-origin:top left}
.lfn-s{position:relative;width:100%;height:0}

.lfn-e{margin:0;padding:0;border:0;background:transparent}
/* The box is a flex column only so Figma's vertical text alignment can be
   honoured. The copy itself lives in ONE flex item — put the runs directly in
   the flex box and every bold phrase becomes its own line. */
.lfn-t{white-space:pre-wrap;text-wrap:pretty;overflow-wrap:break-word;
       -webkit-font-smoothing:antialiased;direction:ltr;unicode-bidi:plaintext}
.lfn-tb{display:block;white-space:inherit;text-align:inherit}
/* Direction is set per element from its own content: the canvas is LTR so
   coordinates work, but a Hebrew run inside it must still lay out RTL, and a
   Latin string must not be flipped by a surrounding RTL context. */
.lfn-t[dir="rtl"]{direction:rtl;unicode-bidi:isolate}
.lfn-t[dir="ltr"]{direction:ltr;unicode-bidi:isolate}
/* Type painted with a gradient is clipped to its own background box, so any
   part of a glyph that hangs past the box edge — ordinary side bearing, which
   every font has — is painted with nothing and simply disappears. Overhanging
   the background by 8px each side costs no layout (background-size does not
   affect the box) and removes the failure mode outright. */
.lfn-t[data-grad]{background-size:calc(100% + 16px) 100%;
  background-position:-8px 0;background-repeat:no-repeat}
.lfn-i{display:block;max-width:none}
.lfn-v{display:block;overflow:visible}

/* A drag across this page must not paint blocks over it.
 *
 * Every element here is absolutely positioned at Figma's coordinates, so a
 * text selection does not look like a selection: it paints the full line box
 * of each element it crosses, and a press-and-nudge on a question — which is
 * what a great many people do when they mean to click — covers the question
 * with a solid rectangle in the reader's own system highlight colour. It read
 * as "a strange colour on hover that hides the question", and it is neither a
 * hover nor a colour of ours.
 *
 * Off by default, and granted back where selecting is the point: the form's
 * fields, and the answers, which are the only text on the page anybody has a
 * reason to copy. */
.lfn-canvas{-webkit-user-select:none;user-select:none}
.lfn-canvas input,
.lfn-canvas textarea,
.lfn-canvas .lfn-faq-a,
.lfn-canvas .lfn-faq-a *{-webkit-user-select:text;user-select:text}

/* The same for the tap-highlight a phone paints over whatever was pressed. */
.lfn-canvas{-webkit-tap-highlight-color:rgba(253,110,10,.18)}

/* Typography the theme must not reach into. A plugin that draws a measured
   layout inside somebody else's site inherits every inherited text property —
   a theme's `letter-spacing:-0.1px` on body re-broke every paragraph on the
   last build, and the line COUNT stayed right so nothing caught it. */
.lfn-canvas{letter-spacing:normal;word-spacing:normal;text-indent:0;
            text-transform:none;font-variant:normal;font-style:normal;
            text-shadow:none;font-kerning:normal}

/* The same reset AGAIN, on the drawn elements themselves.
   
   Resetting the root only defends against properties the theme sets on `body`
   and lets INHERIT down. It does nothing about a rule that matches an element
   inside the canvas directly — and the theme here carries
   `h1,h2,h3,h4,h5,h6{letter-spacing:-0.1px}`, which lands on all fifty headings
   the converter emits and beats an ancestor's inherited `normal` outright.
   The hero headline re-broke a word early because of it, and the line count
   stayed at five, so neither the fit check nor the structure gate saw anything.
   A class selector here outranks any theme's tag selector.
   
   `.lfn-f`, `.lfn-submit` and `.lfn-more` ask for `letter-spacing:inherit` a
   few rules down and are overridden by this — which changes nothing, because
   what they would inherit is this same `normal`. */
.lfn-canvas .lfn-e,
.lfn-canvas .lfn-tb{word-spacing:normal;text-indent:0;
            text-transform:none;font-variant:normal;text-shadow:none;
            font-kerning:normal}
/* Tracking is the one property of that set the drawn element may legitimately
   carry a value for — Figma's own, and the per-element nudge from
   build/calibrate_text.mjs — and both are written inline, which beats this
   rule. The INNER span must therefore inherit rather than be reset: forced to
   `normal` here it outranked its own parent's inline value, and the calibration
   pass ran a paragraph down to -0.25px per character with nothing happening at
   all. Nothing shipped wrong, because every node in this design is at 0, but
   the next design's would have gone silently missing. */
.lfn-canvas .lfn-e{letter-spacing:normal}
.lfn-canvas .lfn-tb{letter-spacing:inherit}

/* Sections overlap by design, and a card outline drawn as a full-size shape can
   sit directly over its own button. Decoration is therefore inert by default
   and interactivity granted explicitly — the reverse rule (grant to everything,
   revoke per case) leaves a click-eating rectangle behind every time a new
   decorative layer is added. */
.lfn-e{pointer-events:none}
.lfn-t,.lfn-f,.lfn-submit,.lfn-more,.lfn-page a,.lfn-page button,
.lfn-page input,.lfn-page select,.lfn-page textarea{pointer-events:auto}

/* Variant switching happens in CSS so a cached page is still correct.

   The breakpoint is 1200, and it is set from measured type size rather than
   from a device name. Body copy is 16px on the 1600px desktop frame, so the
   canvas renders it at 16 x (viewport/1600):

     1600 -> 16px      1440 -> 14.4px      1280 -> 12.8px
     1200 -> 12px      1024 -> 10.2px       768 -> 7.7px

   The old breakpoint was 1024, which put an iPad in portrait on the DESKTOP
   canvas at 0.64 — nine-pixel body copy and testimonial screenshots nobody
   could read. It passed every overflow and console check while doing it.

   Below 1200 the 430px phone frame is used instead: at its 1.55 cap that is a
   667px column of 21.7px type, centred on the page's own black. A phone layout
   enlarged is not ideal on a tablet; type at nine pixels is not a layout at
   all. */
.lfn-mobile{display:none}
@media (max-width:1199.98px){
  .lfn-page:not(.lfn-no-mobile) .lfn-desktop{display:none}
  .lfn-page:not(.lfn-no-mobile) .lfn-mobile{display:block}
}

/* One Figma node painted in several fills: the box fades, the layers inside
   do not. `isolation` keeps any blend mode on a layer inside this stack rather
   than letting it reach the page behind it. */
.lfn-stack{position:absolute;isolation:isolate}
.lfn-ic{overflow:hidden;position:absolute}
.lfn-ic>.lfn-i{max-width:none}
.lfn-clip{position:absolute;overflow:hidden}

/* ------------------------------------------------------------------- form

   Controls sit exactly where the placeholder text was drawn: no chrome of their
   own, inheriting the metrics the converter copied from Figma. */
.lfn-f{appearance:none;-webkit-appearance:none;background:transparent;border:0;
  outline:0;padding:0;margin:0;font:inherit;color:inherit;letter-spacing:inherit;
  text-align:inherit;resize:none;display:block;width:100%}
.lfn-f::placeholder{color:currentColor;opacity:1}
.lfn-f:focus-visible{outline:2px solid var(--lfn-gold);outline-offset:4px;border-radius:2px}
/* The card fields are drawn LTR by the design and carry digits only. Left in
   the page's RTL context the caret jumps to the wrong end after every group. */
.lfn-pay{direction:ltr;unicode-bidi:isolate}
.lfn-submit{cursor:pointer;background:transparent;border:0;font:inherit;color:inherit;
  letter-spacing:inherit;text-align:inherit;padding:0;
  transition:opacity .18s ease,transform .18s ease}
.lfn-submit[disabled]{opacity:.6;cursor:progress}
.lfn-submit:hover:not([disabled]){opacity:.88}
.lfn-submit:active:not([disabled]){transform:translateY(1px)}
/* The decoy field: reachable by a script, invisible and unfocusable to a person. */
.lfn-hp{position:absolute!important;left:-9999px!important;width:1px!important;
  height:1px!important;opacity:0!important;pointer-events:none}
/* One line under the button, inside the checkout card: where the button goes.
   Sized in canvas units so it scales with the card it sits in. */
.lfn-form-secure{position:absolute;inset-inline:0;bottom:6px;margin:0;
  text-align:center;font-family:'Noto Sans Hebrew',system-ui,sans-serif;
  /* .55 measured 1.1:1 against the panel behind it — drawn, and unreadable.
     A line nobody can read is not a disclosure. */
  font-size:12px;line-height:1.5;color:rgba(245,241,232,.82);
  pointer-events:none}
.lfn-form-msg{position:absolute;inset-inline:0;bottom:-34px;margin:0;font-size:15px;
  text-align:center;min-height:20px;font-family:'Noto Sans Hebrew',system-ui,sans-serif}
.lfn-form-msg.is-ok{color:var(--lfn-gold)}
.lfn-form-msg.is-err{color:#FF6B6B}
/* One form per drawn form, positioned over its own controls by the renderer.
   Inert itself so decoration behind it stays clickable-through; the controls
   re-enable themselves via the rule above. */
.lfn-form{pointer-events:none}

/* ------------------------------------------------------------------ links */
.lfn-a{cursor:pointer;text-decoration:none;transition:opacity .18s ease}
.lfn-a:hover,.lfn-a:focus-visible{opacity:.82}
.lfn-a:focus-visible,.lfn-submit:focus-visible,.lfn-more:focus-visible{
  outline:2px solid var(--lfn-gold);outline-offset:3px;border-radius:3px}
/* A call to action is the whole pill, with the caption positioned inside it
   exactly where it was drawn. The anchor is only a hit area: it holds no type
   of its own, so it must not add a line box of its own either. */
.lfn-cta{display:block;line-height:0}
.lfn-cta>.lfn-t{pointer-events:none}
.lfn-a .lfn-tb{transition:transform .25s cubic-bezier(.22,.61,.36,1)}
.lfn-a:hover .lfn-tb{transform:translateX(3px)}
.lfn-t[dir="ltr"].lfn-a:hover .lfn-tb{transform:translateX(-3px)}

@media (prefers-reduced-motion:reduce){
  .lfn-canvas *{animation:none!important;transition:none!important}
}

/* ---------------------------------------------------------------- accordion

   The cards move by transform, never by changing a coordinate, so the geometry
   the converter measured stays untouched and only the offset animates. */
.lfn-faq-q,.lfn-faq-a{position:absolute;inset:0;pointer-events:none}
.lfn-faq.is-ready .lfn-faq-q,
.lfn-faq.is-ready .lfn-faq-a{transition:transform .38s cubic-bezier(.22,.61,.36,1)}
.lfn-faq-a[hidden]{display:none}

/* The whole card is the target. It sits above the card's own artwork and is
   transparent — the visible affordance is the design's own chevron. */
.lfn-faq-hit{position:absolute;margin:0;padding:0;border:0;background:transparent;
  cursor:pointer;pointer-events:auto;border-radius:16px}
.lfn-faq-q.is-empty .lfn-faq-hit{cursor:default}
.lfn-faq-hit:focus-visible{outline:3px solid var(--lfn-gold);outline-offset:2px}
.lfn-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){
  .lfn-faq .lfn-faq-q,.lfn-faq .lfn-faq-a{transition:none!important}
}

/* ------------------------------------------------------- more testimonials

   The caption is drawn as text; it is emitted as a real button so the keyboard
   can reach the screenshots it opens. It keeps the design's own appearance —
   only the cursor and the chevron rotation are added. */
.lfn-more{cursor:pointer;background:transparent;border:0;font:inherit;color:inherit;
  letter-spacing:inherit;text-align:inherit;padding:0;
  transition:opacity .18s ease}
.lfn-more:hover{opacity:.82}
.lfn-more[hidden]{display:none}

/* The gallery it opens.
   Not an expansion of the wall: the page is a coordinate canvas, so anything
   inserted into it prints over whatever the designer drew underneath. A sheet
   over the page also solves the real problem — the drawn screenshots are 182px
   wide and the messages in them cannot be read at that size. */
html.lfn-modal-open,html.lfn-modal-open body{overflow:hidden}
html.lfn-modal-open body{position:fixed;inset-inline:0;width:100%}

.lfn-shots-modal{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;
  padding:clamp(12px,4vw,40px);background:rgba(5,5,5,.88);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  animation:lfn-fade .2s ease-out}
.lfn-shots-modal[hidden]{display:none}
.lfn-shots-sheet{position:relative;width:min(1120px,100%);max-height:88vh;overflow-y:auto;
  background:var(--lfn-panel);border:1px solid rgba(247,201,105,.28);border-radius:20px;
  padding:clamp(44px,5vw,56px) clamp(14px,3vw,28px) clamp(20px,3vw,28px);
  box-shadow:0 40px 120px -40px rgba(0,0,0,.9);
  overscroll-behavior:contain}
.lfn-shots-close{position:absolute;top:10px;inset-inline-end:12px;width:40px;height:40px;
  display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;
  background:rgba(247,201,105,.12);color:var(--lfn-gold);font-size:26px;line-height:1;
  transition:background .18s ease}
.lfn-shots-close:hover{background:rgba(247,201,105,.24)}
.lfn-shots-close:focus-visible{outline:2px solid var(--lfn-gold);outline-offset:3px}
.lfn-shots-grid{display:grid;gap:clamp(10px,2vw,18px);
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.lfn-shot-fig{margin:0}
.lfn-shot-fig img{display:block;width:100%;height:auto;border-radius:12px;
  border:1px solid rgba(245,241,232,.08)}
@keyframes lfn-fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.lfn-shots-modal{animation:none}}

/* Headings carry the document outline; the canvas carries the geometry. The
   browser's default heading margin and weight would move type the converter
   placed to the pixel, so both are cleared and the element's own inline styles
   remain the only thing deciding how it looks. */
.lfn-canvas :is(h1,h2,h3){margin:0;padding:0;font-size:inherit;font-weight:inherit}

/* ----------------------------------------------------------- agency credit

   The house signature, identical on every landing page this studio ships:
   "Powered by" over the wordmark, stacked and centred, the whole block one
   link. It sits in normal flow UNDER the canvas, never inside it — the drawing
   has no room for it, and anything placed inside would be compared against a
   Figma render that never contained it.

   The strip is sized in rem, not in canvas units: it is not part of the design
   and must not grow with it. */
.lfn-credit{background:var(--lfn-bg);padding:34px 20px 40px;text-align:center;
  border-top:1px solid rgba(247,201,105,.12)}
.lfn-credit a{display:inline-flex;flex-direction:column;align-items:center;gap:9px;
  text-decoration:none;
  transition:opacity .22s ease,transform .22s ease}
.lfn-credit a:hover{transform:translateY(-2px)}
.lfn-credit a:hover .lfn-credit-by{color:rgba(245,241,232,.72)}
.lfn-credit a:focus-visible{outline:2px solid var(--lfn-gold);outline-offset:8px;
  border-radius:6px;opacity:1}
/* The caption's colour is set once, on the caption.
   It used to be rgba(...,.42) inside a link at opacity .82, and the two
   compounded to an effective 0.344 — 2.77:1 on this ground, where AA (and
   ת"י 5568, which this plugin's own settings copy cites) asks 4.5:1 of 12.5px
   type. Nothing looked wrong; it was simply below the line. The link no longer
   fades, and .49 gets the caption to 4.69:1 while staying visibly quieter than
   the wordmark under it, which measures 13.5:1. */
.lfn-credit-by{font-family:'Noto Sans Hebrew',system-ui,sans-serif;font-weight:400;
  font-size:12.5px;letter-spacing:.05em;color:rgba(245,241,232,.49);
  direction:ltr;line-height:1;transition:color .22s ease}
.lfn-credit img{height:38px;width:auto;display:block}
@media (max-width:520px){.lfn-credit img{height:32px}}

/* ------------------------------------------------- form: the thank-you state

   The visitor is thanked inside the form's own box. Sending them to a separate
   page would throw away the page they were reading — and this design puts the
   checkout in the MIDDLE of it, so they are not finished reading. */
.lfn-done{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;text-align:center;
  padding:16px;pointer-events:auto;
  font-family:'Noto Sans Hebrew',system-ui,sans-serif;color:var(--lfn-cream);
  background:var(--lfn-panel);border-radius:18px;
  animation:lfn-done-in .32s ease-out}
.lfn-done:focus{outline:none}
.lfn-done strong{font-size:22px;font-weight:900}
.lfn-done span:last-child{font-size:15px;line-height:1.5;color:var(--lfn-muted);max-width:44ch}
.lfn-done-mark{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  color:#050505;background:linear-gradient(135deg,var(--lfn-gold-deep),var(--lfn-gold))}
.lfn-done-mark svg{width:28px;height:28px}
/* The visible way to the payment page, next to the automatic one. */
.lfn-done-go{margin-top:4px;padding:9px 22px;border-radius:999px;
  background:linear-gradient(120deg,var(--lfn-gold-deep),var(--lfn-gold));
  color:#050505;font-weight:900;font-size:15px;text-decoration:none;
  transition:filter .18s ease}
.lfn-done-go:hover{filter:brightness(1.08)}
.lfn-done-go:focus-visible{outline:2px solid var(--lfn-cream);outline-offset:3px}
@keyframes lfn-done-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.lfn-done{animation:none}}

/* ------------------------------------------------------------------- print

   The page is cream and gold type on near-black. A browser prints backgrounds
   off by default, so the ground disappeared and the type printed pale on white
   — the first page was barely legible and the last two, which carry the credit,
   came out completely blank (the wordmark is white on transparent).

   Printing a 12,000px canvas is never going to be the point of this page, so
   this asks only that what comes out is readable: force the ground, and give
   the browser leave to keep the images. */
@media print {
  .lfn-page,.lfn-canvas,.lfn-credit{
    background:#050505!important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .lfn-shots-modal{display:none!important}
  .lfn-credit img{filter:none}
}

/* The price, above the button.
   The figure is Latin inside a right-to-left line, so it is isolated — the
   browser otherwise pushes ₪ to the wrong end of "₪150 תשלום חד-פעמי". */
.lfn-form-secure .lfn-price{display:inline-block;font-weight:900;font-size:1.05em;color:inherit;opacity:1}
.lfn-form-secure .lfn-num{direction:ltr;unicode-bidi:isolate}

/* ------------------------------------------------------------------- rails

   A row the designer drew mid-scroll. At rest it is exactly the drawing: the
   slides keep their Figma coordinates, the card hanging off the edge stays
   hanging off the edge, and the canvas's own clip is what cuts it. Only the
   track translates.

   No `overflow` here. A second clip at a different place would move every card
   inside it — the canvas already clips at the frame edge, which is where the
   designer drew the cut. */
.lfn-rail{position:absolute;inset:0;pointer-events:none}
.lfn-rail-track{position:absolute;inset:0;will-change:transform;
  transition:transform 420ms cubic-bezier(.22,.61,.36,1)}
.lfn-rail.is-drag .lfn-rail-track{transition:none}
.lfn-slide{position:absolute;inset:0}

/* The slide is a positioning context only; its contents keep their own
   pointer rules, so a play button inside a card is still a play button. */
.lfn-slide > *{pointer-events:auto}

/* Grabbing anywhere on the card drags the row — but only after the pointer has
   travelled far enough to be a drag rather than a click. `is-drag` is added at
   that threshold, never on pointerdown: added on the way down it detaches the
   card mid-click, the mouseup lands on a different element, and the click event
   is never born. That bug cost a working play button on the last build. */
.lfn-rail-track{cursor:grab}
.lfn-rail.is-drag .lfn-rail-track{cursor:grabbing}
.lfn-rail.is-drag .lfn-slide > *{pointer-events:none}

/* The canvas lays out LTR so Figma's x coordinates work directly, which would
   put "previous" on the left. The row reads right to left: its first card is
   the rightmost one, so the control that goes back to it belongs on the RIGHT
   and the one that brings later cards on belongs on the left. Only this strip
   is flipped; nothing else in the canvas may be. */
.lfn-rail-nav{position:absolute;inset-inline:0;display:flex;gap:12px;direction:rtl;
  justify-content:center;pointer-events:none;z-index:3}
.lfn-rail-btn{pointer-events:auto;width:44px;height:44px;border-radius:999px;
  display:grid;place-items:center;cursor:pointer;
  border:1px solid rgba(253,110,10,.55);background:rgba(28,23,18,.9);
  color:#FD6E0A;transition:background .18s ease,transform .18s ease,opacity .18s ease}
.lfn-rail-btn svg{width:20px;height:20px;display:block}
.lfn-rail-btn:hover{background:#FD6E0A;color:#1C1712}
.lfn-rail-btn:active{transform:translateY(1px)}
.lfn-rail-btn[disabled]{opacity:.35;cursor:default}
.lfn-rail-btn:focus-visible{outline:2px solid #FD6E0A;outline-offset:3px}
.lfn-rail:focus-visible{outline:2px solid #FD6E0A;outline-offset:6px}

@media (prefers-reduced-motion:reduce){
  .lfn-rail-track{transition:none}
}

/* ------------------------------------------------------------------ videos

   A slot is the area the design drew for the film — the inner panel of the
   orange frame, or a testimonial card's own body — and nothing is embedded
   into it until somebody presses. Five players' worth of third-party script
   before anyone has asked for one is most of this page's weight, paid by every
   visitor who never presses play. */
.lfn-vid{position:absolute;overflow:hidden;border-radius:inherit}
.lfn-vid-poster{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block}
.lfn-play{position:absolute;width:47px;height:47px;padding:0;border:0;
  background:transparent;cursor:pointer;border-radius:999px;
  transition:transform .18s ease,filter .18s ease}
.lfn-play svg{width:47px;height:47px;display:block}
.lfn-play:hover{transform:scale(1.08)}
.lfn-play:active{transform:scale(.96)}
.lfn-play:focus-visible{outline:2px solid #FD6E0A;outline-offset:5px}
.lfn-vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.lfn-vid.is-playing .lfn-play,
.lfn-vid.is-playing .lfn-vid-poster{display:none}

@media (prefers-reduced-motion:reduce){
  .lfn-play{transition:none}
  .lfn-play:hover{transform:none}
}

/* The legal line, above the studio signature. Quiet, readable, and a tap
   target a thumb can actually hit — the link is inline, and an inline link is
   only as tall as its own text. */
.lfn-legal{margin:0 0 20px;display:flex;flex-wrap:wrap;gap:4px 10px;
  align-items:center;justify-content:center;
  font-family:'Noto Sans Hebrew',system-ui,sans-serif;font-weight:400;
  font-size:13px;line-height:1.6;color:rgba(242,242,242,.5)}
.lfn-legal-sep{opacity:.55}
.lfn-legal-link{display:inline-flex;align-items:center;min-height:32px;
  color:rgba(242,242,242,.72);text-decoration:underline;text-underline-offset:3px}
.lfn-legal-link:hover{color:var(--lfn-orange)}
.lfn-legal-link:focus-visible{outline:2px solid var(--lfn-orange);
  outline-offset:3px;border-radius:3px}