/* The thank-you page.
 *
 * The landing page is a canvas — a Figma frame reproduced to the pixel, which
 * SCALES rather than reflows, because that is what pixel-perfect means. There
 * is no frame for this page, so there is nothing to reproduce and no reason to
 * pretend otherwise: this is a real responsive layout, in the same language.
 * Same ground, same orange, same face, same card, same pill.
 *
 * Everything here sizes from the viewport with clamp(), so there is no
 * breakpoint at which it is merely tolerable — it is the same page at 320 and
 * at 2560. Colours come from base.css, which is the only place they are named.
 */
.lfnt{
  direction:rtl;
  background:var(--lfn-bg);
  color:var(--lfn-cream);
  font-family:'Noto Sans Hebrew',system-ui,-apple-system,sans-serif;
  /* The typographic properties a theme leaks in. Same defence as the canvas:
     a `letter-spacing:-0.1px` on body reaches straight into this page too. */
  letter-spacing:normal;word-spacing:normal;text-transform:none;
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;
  /* The page's own ground extends past the content, so a short viewport still
     ends in the brand's dark rather than the theme's white. */
  margin:0;
}
.lfnt *{box-sizing:border-box}

/* A wash of the brand behind the mark, the way the design lights its hero. */
.lfnt-wrap{
  flex:1 1 auto;
  width:100%;
  max-width:760px;
  margin-inline:auto;
  padding:clamp(48px,9vw,104px) clamp(20px,5vw,40px) clamp(40px,7vw,72px);
  text-align:center;
  position:relative;
}
.lfnt-wrap::before{
  content:'';position:absolute;inset-inline:0;top:0;height:min(52vw,420px);
  background:radial-gradient(60% 100% at 50% 0%,rgba(253,110,10,.22),transparent 70%);
  pointer-events:none;
}
.lfnt-wrap > *{position:relative}

.lfnt-mark{
  display:inline-grid;place-items:center;
  width:clamp(64px,14vw,92px);height:clamp(64px,14vw,92px);
  color:var(--lfn-orange);
  margin-bottom:clamp(18px,3vw,26px);
}
.lfnt-mark svg{width:100%;height:100%;display:block}

.lfnt-title{
  margin:0 0 clamp(10px,2vw,16px);
  font-weight:900;
  font-size:clamp(28px,6.2vw,45px);
  line-height:1.16;
  color:var(--lfn-light);
}
.lfnt-lead{
  margin:0 auto;
  max-width:52ch;
  font-weight:400;
  font-size:clamp(15px,2.6vw,19px);
  line-height:1.62;
  color:var(--lfn-muted);
}

/* The three steps. One column on a phone, three from the point where three
   columns stop being cramped — a measurement, not a device. */
.lfnt-steps{
  list-style:none;margin:clamp(30px,5vw,52px) 0 0;padding:0;
  display:grid;gap:clamp(12px,2vw,18px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,212px),1fr));
  text-align:start;
}
.lfnt-step{
  background:var(--lfn-panel);
  border:1px solid rgba(253,110,10,.45);
  border-radius:14px;
  padding:clamp(18px,3vw,24px);
}
.lfnt-num{
  display:grid;place-items:center;
  width:30px;height:30px;border-radius:999px;
  background:var(--lfn-orange);color:#1C1712;
  font-weight:900;font-size:15px;line-height:1;
  margin-bottom:12px;
}
.lfnt-step-title{
  margin:0 0 6px;font-weight:900;
  font-size:clamp(16px,2.4vw,19px);line-height:1.3;
  color:var(--lfn-orange);
}
.lfnt-step-body{
  margin:0;font-weight:400;
  font-size:clamp(14px,2.1vw,16px);line-height:1.6;
  color:var(--lfn-muted);
}

.lfnt-note{
  margin:clamp(26px,4vw,40px) auto 0;max-width:46ch;
  font-size:clamp(14px,2.1vw,16px);line-height:1.6;
  color:var(--lfn-muted);
}

.lfnt-actions{
  margin-top:clamp(18px,3vw,26px);
  display:flex;flex-wrap:wrap;gap:14px;
  align-items:center;justify-content:center;
}
/* The same pill the design draws for its own call to action. */
.lfnt-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:50px;padding:0 clamp(22px,4vw,34px);
  border-radius:999px;
  background:var(--lfn-orange);color:#1C1712;
  font-weight:900;font-size:clamp(15px,2.3vw,17px);
  text-decoration:none;direction:ltr;
  transition:background .18s ease,transform .18s ease;
}
.lfnt-btn:hover{background:var(--lfn-orange-deep);color:#fff}
.lfnt-btn:active{transform:translateY(1px)}
/* A link is a tap target, and an inline one is only as tall as its own text —
   19px at this size, against the 44px a thumb needs. The padding is what makes
   it pressable; the underline still sits under the words. */
.lfnt-link{
  display:inline-flex;align-items:center;
  min-height:44px;padding-inline:10px;
  color:var(--lfn-muted);font-size:clamp(14px,2.1vw,16px);
  text-decoration:underline;text-underline-offset:3px;
}
.lfnt-link:hover{color:var(--lfn-light)}
.lfnt-btn:focus-visible,.lfnt-link:focus-visible{
  outline:2px solid var(--lfn-orange);outline-offset:4px;border-radius:4px;
}

/* The studio credit sits on the page's own ground, not the theme's. */
.lfnt .lfn-credit{background:transparent}

@media (prefers-reduced-motion:reduce){
  .lfnt-btn{transition:none}
  .lfnt-btn:active{transform:none}
}

/* A document page — the privacy policy — in the same language. Reads left
   aligned to its own start, unlike the thank-you page which is centred. */
.lfnt-doc-body{margin-top:clamp(26px,4vw,40px);text-align:start;
  display:grid;gap:clamp(18px,3vw,26px)}
.lfnt-doc-sec{background:var(--lfn-panel);border:1px solid rgba(253,110,10,.35);
  border-radius:14px;padding:clamp(18px,3vw,26px)}
.lfnt-doc-h{margin:0 0 8px;font-weight:900;color:var(--lfn-orange);
  font-size:clamp(17px,2.6vw,21px);line-height:1.3}
.lfnt-doc-p{margin:0;font-weight:400;color:var(--lfn-muted);
  font-size:clamp(14px,2.2vw,17px);line-height:1.7}
.lfnt-doc-p a{color:var(--lfn-light)}
.lfnt-doc-todo{color:#E8A55F;font-style:italic}