/* REELYOU shared chrome (Palm Springs): fonts, palette, buttons, header, footer, lightbox, motion toggle.
   Loaded on every page before the page styles. */
@font-face{font-family:"Ploni";src:url(/assets/fonts/ploni-ultrabold.woff) format("woff");font-weight:800;font-display:swap}
@font-face{font-family:"Almoni";src:url(/assets/fonts/almoni-tzar-light.woff) format("woff");font-weight:300;font-display:swap;unicode-range:U+0590-05FF,U+FB1D-FB4F,U+20AA}
@font-face{font-family:"Almoni";src:url(/assets/fonts/almoni-tzar-regular.woff) format("woff");font-weight:400 500;font-display:swap;unicode-range:U+0590-05FF,U+FB1D-FB4F,U+20AA}
@font-face{font-family:"Almoni";src:url(/assets/fonts/almoni-tzar-bold.woff) format("woff");font-weight:600 900;font-display:swap;unicode-range:U+0590-05FF,U+FB1D-FB4F,U+20AA}
:root{
  /* Palm Springs palette */
  --salt:#FFF9EB; --hib:#E35DB0; --pic:#F84E37; --sun:#FA8455; --fra:#FFC9EB; --cit:#BDD470; --lime:#DCF291; --ter:#71241A;
  --ter-2:#8E3F30; --peach:#FFE1CF; --line:#EBD5C6;
  /* text-safe variants (WCAG AA) */
  --hib-d:#B8358A; --pic-d:#D13822; --red-t:#A8291A; --ink:#561A12;
  --head:"Ploni","Barlow Semi Condensed",sans-serif; --body:"Almoni","Barlow Semi Condensed",sans-serif; --lat:"Barlow Semi Condensed",sans-serif;
  --pad:clamp(18px,4.5vw,72px); --max:1380px;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{background:var(--salt);color:var(--ter);font-family:var(--body);font-size:20px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img,video{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--head);font-weight:800;font-kerning:none;letter-spacing:-.01em;line-height:1.05}
:focus-visible{outline:3px solid var(--ter);outline-offset:3px;border-radius:6px;box-shadow:0 0 0 7px var(--salt)}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.lat{font-family:var(--lat)}
.ltr{direction:ltr;unicode-bidi:isolate}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;right:8px;top:8px;z-index:200;background:var(--ter);color:var(--salt);padding:8px 14px;border-radius:99px;transform:translateY(-200%)}
.skip:focus{transform:none}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 28px;border-radius:999px;font:600 18px var(--body);border:0;cursor:pointer;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .25s,color .25s}
.btn svg{width:20px;height:20px}
.btn.main{background:var(--pic-d);color:var(--salt);box-shadow:0 14px 30px -14px rgba(209,56,34,.75)}
.btn.main:hover{transform:translateY(-3px);box-shadow:0 20px 40px -16px rgba(209,56,34,.85)}
.btn.ghost{background:rgba(255,249,235,.6);border:1.5px solid var(--ter);color:var(--ter);backdrop-filter:blur(8px)}
.btn.ghost:hover{background:var(--ter);color:var(--salt)}
.btn[disabled]{opacity:.6;cursor:wait}
.pill{display:inline-flex;align-items:center;gap:8px;padding:7px 15px;border-radius:999px;font:600 15px var(--body);background:var(--lime);color:var(--ter)}
.kick,.kicker{display:inline-flex;align-items:center;gap:10px;font:500 15px var(--body);letter-spacing:.06em;color:var(--ter-2)}
.kick i,.kicker i{width:9px;height:9px;border-radius:50%;background:var(--pic);flex:none}

/* header */
.top{position:fixed;inset:0 0 auto 0;z-index:60;transition:background .35s,box-shadow .35s}
.top.scrolled{background:rgba(255,249,235,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:76px}
.brand{display:block;width:96px;aspect-ratio:864/434;background:var(--ter);-webkit-mask:url(/media/logo-letters-ink.png) center/contain no-repeat;mask:url(/media/logo-letters-ink.png) center/contain no-repeat}
.nav{display:flex;gap:6px;background:rgba(255,249,235,.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:999px;padding:5px}
.nav a{font:500 16px var(--body);padding:8px 16px;border-radius:999px;transition:background .25s,color .25s}
.nav a:hover{background:var(--fra)}
.nav a[aria-current=page]{background:var(--ter);color:var(--salt)}
.nav a.only-menu{display:none}
.top .tools{display:flex;align-items:center;gap:8px}
.top .wa{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;background:var(--ter);color:var(--salt);font:600 16px var(--body)}
.top .wa svg{width:18px;height:18px}
.ico{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--ter);background:rgba(255,249,235,.75);color:var(--ter);display:grid;place-items:center;cursor:pointer;padding:0}
.ico svg{width:20px;height:20px;fill:currentColor}
.ico .pl{display:none}
.ico[aria-pressed="true"]{background:var(--ter);color:var(--salt)}
.ico[aria-pressed="true"] .pa{display:none}.ico[aria-pressed="true"] .pl{display:block}
.ico.menu{display:none}.ico.menu svg{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
@media (max-width:900px){
  .top .wrap{height:64px}.brand{width:78px}
  .nav{display:none}
  .ico.menu{display:grid}
  .nav.open{display:grid;position:absolute;top:64px;inset-inline:12px;gap:2px;padding:10px;border-radius:24px;background:var(--salt);box-shadow:0 24px 50px -24px rgba(113,36,26,.5)}
  .nav.open a{padding:14px 16px;font-size:18px}
  .nav.open a.only-menu{display:block}
  .top .wa{display:none}
}

/* footer */
.foot{margin-top:clamp(70px,9vw,120px);background:var(--ter);color:var(--salt);padding:56px 0 30px}
.foot .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;align-items:start}
.foot .brand{background:var(--salt);width:140px}
.foot p{margin-top:14px;max-width:36ch;font-size:17px}
.foot h2{font:600 15px var(--body);letter-spacing:.08em;color:var(--lime);margin-bottom:14px}
.foot ul{list-style:none;display:grid;gap:8px;font-size:17px}
.foot a:hover{color:var(--lime)}
.foot .base{grid-column:1/-1;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid rgba(255,249,235,.22);padding-top:18px;margin-top:6px;font-size:15px}
.foot .base a{text-decoration:underline;text-underline-offset:3px}
.foot :focus-visible{outline-color:var(--lime);box-shadow:none}
@media (max-width:900px){.foot .wrap{grid-template-columns:1fr 1fr}.foot .wrap>div:first-child{grid-column:1/-1}}

/* floating WhatsApp on phones */
.wa-float{display:none;position:fixed;left:16px;bottom:16px;z-index:70;width:56px;height:56px;border-radius:50%;background:var(--pic-d);color:var(--salt);place-items:center;box-shadow:0 14px 30px -12px rgba(209,56,34,.8)}
.wa-float svg{width:26px;height:26px}
@media (max-width:900px){.wa-float{display:grid}}

/* lightbox */
dialog.lb{border:0;padding:0;background:transparent;margin:auto;width:min(1150px,94vw);max-height:92vh;overflow:visible}
dialog.lb::backdrop{background:rgba(255,249,235,.95);backdrop-filter:blur(8px)}
.lb-in{display:grid;gap:12px;justify-items:center}
.lb video{display:block;max-height:78vh;width:auto;max-width:100%;border-radius:20px;background:#2a1410}
.lb-cap{display:flex;justify-content:space-between;gap:16px;width:100%;max-width:900px;align-items:baseline}
.lb-cap b{font-size:20px}
.lb-cap span{color:var(--ter-2)}
.lb-x{position:absolute;top:-52px;left:0;background:var(--ter);color:var(--salt);border:0;border-radius:999px;padding:10px 18px;font:600 15px var(--body);cursor:pointer}

/* stop-motion toggle and reduced motion */
html.still *,html.still *::before,html.still *::after{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* small message (e.g. "the email address was copied") */
.toast{position:fixed;left:50%;top:88px;z-index:300;transform:translate(-50%,-260%);background:var(--ter);color:var(--salt);padding:14px 22px;border-radius:999px;font:600 17px var(--body);box-shadow:0 20px 40px -20px rgba(113,36,26,.6);transition:transform .35s var(--ease);max-width:calc(100vw - 32px);text-align:center}
.toast.on{transform:translate(-50%,0)}

/* consent bar */
.consent{position:fixed;z-index:250;inset-inline:16px;bottom:16px;margin-inline:auto;max-width:760px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:space-between;background:var(--salt);border:1.5px solid var(--ter);border-radius:24px;padding:16px 20px;box-shadow:0 24px 60px -28px rgba(113,36,26,.55);font-size:17px}
.consent p{flex:1 1 320px;margin:0}
.consent a{text-decoration:underline;text-underline-offset:3px}
.consent-b{display:flex;gap:10px}
.consent .btn{padding:11px 20px;font-size:16px;min-width:120px}
@media (max-width:900px){.consent{bottom:84px}}
.nb{white-space:nowrap;unicode-bidi:isolate}

/* ===== live demo: a lead is typed into a website form and lands in the CRM (decorative, loops every 9s) ===== */
.leadfx{position:relative;width:min(440px,100%);margin-inline:auto;padding:14px 0 104px;font-family:var(--body);color:var(--ter);text-align:right}
.lf-site{position:relative;z-index:1;background:#fff;border-radius:18px;box-shadow:0 28px 50px -30px rgba(113,36,26,.6);overflow:hidden;width:86%;margin-inline-start:auto}
.lf-bar{display:flex;align-items:center;gap:5px;padding:9px 12px;background:#F3EADF}
.lf-bar i{width:8px;height:8px;border-radius:50%;background:var(--sun)}.lf-bar i+i{background:var(--cit)}.lf-bar i+i+i{background:var(--fra)}
.lf-bar span{margin-inline-start:auto;font:500 12px var(--lat);color:var(--ter-2);direction:ltr}
.lf-body{display:grid;gap:9px;padding:16px 16px 18px;background:linear-gradient(140deg,var(--fra),var(--peach))}
.lf-h{font:800 17px/1.2 var(--head);font-kerning:none}
.lf-field{height:32px;border-radius:10px;background:#fff;border:1.5px solid rgba(113,36,26,.18);display:flex;align-items:center;padding:0 10px;font-size:14px;overflow:hidden}
.lf-type{display:inline-block;white-space:nowrap;overflow:hidden;clip-path:inset(0 0 0 100%);border-inline-start:2px solid transparent}
.lf-btn{justify-self:start;text-decoration:none;font:600 13px var(--body);padding:7px 16px;border-radius:99px;background:var(--pic-d);color:#fff}
.lf-crm{position:absolute;z-index:2;left:0;bottom:0;width:62%;background:var(--salt);border:1.5px solid var(--ter);border-radius:18px;padding:10px 12px 8px;box-shadow:0 24px 44px -22px rgba(113,36,26,.6);font-size:13px}
.lf-crm-h{display:flex;justify-content:space-between;align-items:center;font-weight:700;margin-bottom:6px}
.lf-count{position:relative;display:inline-grid;font:800 18px var(--lat);color:var(--hib-d);font-style:normal}
.lf-count b,.lf-count s{grid-area:1/1;text-decoration:none;font-weight:800}
.lf-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:5px 0;border-top:1px solid var(--line)}
.lf-row em{font-style:normal;font-size:11px;font-weight:700;padding:2px 8px;border-radius:99px;background:var(--peach)}
.lf-row em.ok{background:var(--lime)}
.lf-new{max-height:0;overflow:hidden;opacity:0;padding:0;border-top:0}
.lf-new em{background:var(--hib-d);color:#fff}
.lf-ping{position:absolute;z-index:3;top:0;left:6%;display:flex;align-items:center;gap:7px;background:var(--ter);color:var(--salt);font:600 13px var(--body);padding:8px 13px;border-radius:99px;box-shadow:0 16px 30px -14px rgba(113,36,26,.7);opacity:0;transform:translateY(-8px) scale(.9)}
.lf-ping svg{width:15px;height:15px;fill:var(--lime)}
@media (prefers-reduced-motion:no-preference){
  .lf-type{animation:lfType 9s steps(14,end) infinite}
  .lf-type.t2{animation-name:lfType2}
  .lf-btn{animation:lfBtn 9s ease infinite}
  .lf-new{animation:lfRow 9s cubic-bezier(.2,.8,.2,1) infinite}
  .lf-ping{animation:lfPing 9s cubic-bezier(.2,.8,.2,1) infinite}
  .lf-count b{animation:lfOld 9s infinite}.lf-count s{animation:lfNew 9s infinite}
}
@media (prefers-reduced-motion:reduce){.lf-type{clip-path:none}.lf-new{max-height:none;opacity:1;padding:5px 0;border-top:1px solid var(--line)}.lf-count b{opacity:0}}
html.still .lf-type{clip-path:none}html.still .lf-new{max-height:none;opacity:1;padding:5px 0;border-top:1px solid var(--line)}html.still .lf-count b{opacity:0}html.still .lf-count s{opacity:1}html.still .lf-ping{opacity:0}
@keyframes lfType{0%,6%{clip-path:inset(0 0 0 100%)}24%,92%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 0 0);opacity:0}}
@keyframes lfType2{0%,26%{clip-path:inset(0 0 0 100%)}42%,92%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 0 0);opacity:0}}
@keyframes lfBtn{0%,46%,52%,100%{transform:none;filter:none}49%{transform:scale(.92);filter:brightness(.9)}}
@keyframes lfPing{0%,52%{opacity:0;transform:translateY(-8px) scale(.9)}57%,80%{opacity:1;transform:none}86%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes lfRow{0%,54%{max-height:0;opacity:0;padding:0;border-top-width:0}62%,92%{max-height:40px;opacity:1;padding:5px 0;border-top-width:1px}100%{max-height:0;opacity:0;padding:0}}
@keyframes lfOld{0%,56%{opacity:1}58%,96%{opacity:0}100%{opacity:1}}
@keyframes lfNew{0%,56%{opacity:0;transform:translateY(6px)}60%,96%{opacity:1;transform:none}100%{opacity:0}}
html.still .leadfx *{animation:none!important}
