/* RC Widget — Corner Ribbon. Scoped under .rcw-corner-ribbon.
   A band rotated across a card corner, clipped by a square so both ends cut
   flush with the card edges. Colours inherit Salient via tokens. */

/* ===== .rcw-corner-ribbon Salient-proof reset (token bridge) ===== */
.rcw-corner-ribbon{
	/* Geometry measured off the reference card (togo-style pricing ribbon):
	   clip square 94px, band 37px thick, band centre 25px down from the clip's
	   top edge — not centred in the square, or the ribbon slides down the
	   diagonal and its ends come out too long. */
	--rcw-ribbon-clip:94px;
	--rcw-ribbon-band:37px;
	/* How far out the band runs, measured as x+y from the corner. The band's
	   centre goes at (d/2, d/2): that is the middle of the strip you can
	   actually see, so the text reads centred inside the ribbon. */
	--rcw-ribbon-d:72px;
	/* where the band's outer edge meets the card edge, measured from the corner */
	--rcw-ribbon-tuck:calc(var(--rcw-ribbon-d) - 2 * var(--rcw-ribbon-out) + var(--rcw-ribbon-band) * 0.707);
	--rcw-ribbon-font:16px;
	--rcw-ribbon-out:10px;      /* how far it pokes past the corner */
	--rcw-ribbon-bg:var(--rcw-accent,#75fbfd);
	--rcw-ribbon-color:var(--rcw-text,#0c1a1a);
	box-sizing:border-box;
	position:relative;
	z-index:3;
	/* Once anchored, the root stretches over the whole column. Without this it
	   would sit on top of everything in the card and swallow every click — the
	   band below turns pointer events back on for itself. */
	pointer-events:none;
	isolation:isolate;
	width:0;
	height:0;
	margin:0;
	padding:0;
	font-family:var(--rcw-font-heading,'Poppins',Helvetica,Arial,sans-serif);
	-webkit-font-smoothing:antialiased;
}
.rcw-corner-ribbon *,
.rcw-corner-ribbon *::before,
.rcw-corner-ribbon *::after{box-sizing:inherit}

.rcw-corner-ribbon--s{--rcw-ribbon-clip:76px;--rcw-ribbon-band:30px;--rcw-ribbon-d:58px;--rcw-ribbon-font:13px;--rcw-ribbon-out:8px}
.rcw-corner-ribbon--l{--rcw-ribbon-clip:118px;--rcw-ribbon-band:46px;--rcw-ribbon-d:90px;--rcw-ribbon-font:19px;--rcw-ribbon-out:12px}
.rcw-corner-ribbon:not(.rcw-corner-ribbon--overhang){--rcw-ribbon-out:0px}

/* script.js marks the column/row it belongs to, and the ribbon then pins to that
   box's corner. Without JS the root stays in the flow and the ribbon renders
   beside it — visible and readable either way. */
.rcw-ribbon-anchor{position:relative}
.rcw-corner-ribbon--anchored{
	/* width/height from the base rule are zero, so they have to be undone here or
	   every corner collapses onto the anchor's top-left point. */
	position:absolute;
	inset:0;
	width:auto;
	height:auto;
}

/* The clip square: its edges are what give the band its flush-cut ends. */
.rcw-corner-ribbon__clip{
	position:absolute;
	width:var(--rcw-ribbon-clip);
	height:var(--rcw-ribbon-clip);
	overflow:hidden;
	pointer-events:none;
}
.rcw-corner-ribbon--tl .rcw-corner-ribbon__clip{top:calc(-1 * var(--rcw-ribbon-out));left:calc(-1 * var(--rcw-ribbon-out))}
.rcw-corner-ribbon--tr .rcw-corner-ribbon__clip{top:calc(-1 * var(--rcw-ribbon-out));right:calc(-1 * var(--rcw-ribbon-out))}
.rcw-corner-ribbon--bl .rcw-corner-ribbon__clip{bottom:calc(-1 * var(--rcw-ribbon-out));left:calc(-1 * var(--rcw-ribbon-out))}
.rcw-corner-ribbon--br .rcw-corner-ribbon__clip{bottom:calc(-1 * var(--rcw-ribbon-out));right:calc(-1 * var(--rcw-ribbon-out))}

/* The band itself: wider than the square on purpose, so the square cuts it. */
.rcw-corner-ribbon__band{
	position:absolute;
	left:calc(var(--rcw-ribbon-d) / 2);
	top:calc(var(--rcw-ribbon-d) / 2);
	width:calc(var(--rcw-ribbon-clip) * 2.2);
	height:var(--rcw-ribbon-band);
	margin-left:calc(var(--rcw-ribbon-clip) * -1.1);
	margin-top:calc(var(--rcw-ribbon-band) / -2);
	display:flex;
	align-items:center;
	justify-content:center;
	background:var(--rcw-ribbon-bg);
	color:var(--rcw-ribbon-color);
	font-size:var(--rcw-ribbon-font);
	font-weight:var(--rcw-fweight-heading,600);
	line-height:1;
	letter-spacing:.2px;
	text-align:center;
	text-decoration:none;
	white-space:nowrap;
	pointer-events:auto;
}
a.rcw-corner-ribbon__band:hover,
a.rcw-corner-ribbon__band:focus{color:var(--rcw-ribbon-color);text-decoration:none}

/* Rotation per corner. The band's centre sits on the corner's diagonal, so the
   text reads along the card edge the way a real ribbon would. */
.rcw-corner-ribbon--tr .rcw-corner-ribbon__band,
.rcw-corner-ribbon--br .rcw-corner-ribbon__band{
	left:auto;
	right:calc(var(--rcw-ribbon-d) / 2);
	margin-left:0;
	margin-right:calc(var(--rcw-ribbon-clip) * -1.1);
}
.rcw-corner-ribbon--bl .rcw-corner-ribbon__band,
.rcw-corner-ribbon--br .rcw-corner-ribbon__band{
	top:auto;
	bottom:calc(var(--rcw-ribbon-d) / 2);
	margin-top:0;
	margin-bottom:calc(var(--rcw-ribbon-band) / -2);
}

.rcw-corner-ribbon--tl .rcw-corner-ribbon__band{transform:rotate(-45deg)}
.rcw-corner-ribbon--tr .rcw-corner-ribbon__band{transform:rotate(45deg)}
.rcw-corner-ribbon--bl .rcw-corner-ribbon__band{transform:rotate(45deg)}
.rcw-corner-ribbon--br .rcw-corner-ribbon__band{transform:rotate(-45deg)}

@media only screen and (max-width:690px){
	.rcw-corner-ribbon{--rcw-ribbon-clip:80px;--rcw-ribbon-band:32px;--rcw-ribbon-font:14px}
}

/* ── Animations ───────────────────────────────────────────────────────────────
   Entrances run on load (fill-mode both) rather than on scroll, so the ribbon is
   never stuck invisible inside the WPBakery editor's iframe. */

/* Shine: a light sweep travelling along the band. */
.rcw-corner-ribbon--anim-shine .rcw-corner-ribbon__band{position:absolute;overflow:hidden}
.rcw-corner-ribbon--anim-shine .rcw-corner-ribbon__band::after{
	content:'';
	position:absolute;
	top:0;
	bottom:0;
	left:-60%;
	width:45%;
	background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 50%,rgba(255,255,255,0) 100%);
	transform:skewX(-18deg);
	animation:rcw-ribbon-shine 3.4s ease-in-out infinite;
}
@keyframes rcw-ribbon-shine{
	0%,55%{left:-60%}
	100%{left:120%}
}

/* Pulse: the whole band breathes, drawing the eye without moving the layout. */
.rcw-corner-ribbon--anim-pulse .rcw-corner-ribbon__band{animation:rcw-ribbon-pulse 2.2s ease-in-out infinite}
@keyframes rcw-ribbon-pulse{
	0%,100%{filter:brightness(1)}
	50%{filter:brightness(1.18)}
}

/* Swing: a small tilt, like a ribbon catching air. */
.rcw-corner-ribbon--anim-swing .rcw-corner-ribbon__clip{animation:rcw-ribbon-swing 4s ease-in-out infinite;transform-origin:50% 50%}
@keyframes rcw-ribbon-swing{
	0%,100%{transform:rotate(0deg)}
	25%{transform:rotate(2.5deg)}
	75%{transform:rotate(-2.5deg)}
}

/* Drop in: slides down the diagonal into place once, on load. */
.rcw-corner-ribbon--anim-drop .rcw-corner-ribbon__band{animation:rcw-ribbon-drop .7s cubic-bezier(.22,.9,.28,1) both}
.rcw-corner-ribbon--tl .rcw-corner-ribbon__band,
.rcw-corner-ribbon--br .rcw-corner-ribbon__band{--rcw-ribbon-rot:-45deg}
.rcw-corner-ribbon--tr .rcw-corner-ribbon__band,
.rcw-corner-ribbon--bl .rcw-corner-ribbon__band{--rcw-ribbon-rot:45deg}
@keyframes rcw-ribbon-drop{
	from{opacity:0;transform:rotate(var(--rcw-ribbon-rot,-45deg)) translateY(-120%)}
	to{opacity:1;transform:rotate(var(--rcw-ribbon-rot,-45deg)) translateY(0)}
}

/* Hover lift works with any of the above. */
.rcw-corner-ribbon--anim-shine .rcw-corner-ribbon__band,
.rcw-corner-ribbon--anim-pulse .rcw-corner-ribbon__band,
.rcw-corner-ribbon--anim-swing .rcw-corner-ribbon__clip,
.rcw-corner-ribbon--anim-drop .rcw-corner-ribbon__band{will-change:transform}

@media (prefers-reduced-motion:reduce){
	.rcw-corner-ribbon__band,
	.rcw-corner-ribbon__clip,
	.rcw-corner-ribbon__band::after{animation:none!important}
	.rcw-corner-ribbon--anim-drop .rcw-corner-ribbon__band{opacity:1}
}

/* ── Shapes ───────────────────────────────────────────────────────────────────
   Default is the diagonal band above. Each shape below only changes what the
   band looks like and where it sits; colours, sizes and animations still apply. */

/* Folded: the band plus a darker tuck at each end, so it reads as one ribbon
   wrapped round the corner. The tucks sit past the clip square, so they hang on
   the root (which never clips) rather than inside the clip. */
.rcw-corner-ribbon--folded::before,
.rcw-corner-ribbon--folded::after{
	content:'';
	position:absolute;
	width:calc(var(--rcw-ribbon-band) * 0.46);
	height:calc(var(--rcw-ribbon-band) * 0.46);
	background:var(--rcw-ribbon-bg);
	filter:brightness(.7);
	z-index:-1;
}
.rcw-corner-ribbon--folded .rcw-corner-ribbon__clip{z-index:1}

/* top edge tuck / side edge tuck, mirrored per corner */
.rcw-corner-ribbon--folded.rcw-corner-ribbon--tl::before{top:calc(-1 * var(--rcw-ribbon-out));left:var(--rcw-ribbon-tuck);clip-path:polygon(0 0,100% 0,0 100%)}
.rcw-corner-ribbon--folded.rcw-corner-ribbon--tl::after{left:calc(-1 * var(--rcw-ribbon-out));top:var(--rcw-ribbon-tuck);clip-path:polygon(0 0,100% 0,0 100%)}
.rcw-corner-ribbon--folded.rcw-corner-ribbon--tr::before{top:calc(-1 * var(--rcw-ribbon-out));right:var(--rcw-ribbon-tuck);clip-path:polygon(0 0,100% 0,100% 100%)}
.rcw-corner-ribbon--folded.rcw-corner-ribbon--tr::after{right:calc(-1 * var(--rcw-ribbon-out));top:var(--rcw-ribbon-tuck);clip-path:polygon(0 0,100% 0,100% 100%)}
.rcw-corner-ribbon--folded.rcw-corner-ribbon--bl::before{bottom:calc(-1 * var(--rcw-ribbon-out));left:var(--rcw-ribbon-tuck);clip-path:polygon(0 0,0 100%,100% 100%)}
.rcw-corner-ribbon--folded.rcw-corner-ribbon--bl::after{left:calc(-1 * var(--rcw-ribbon-out));bottom:var(--rcw-ribbon-tuck);clip-path:polygon(0 0,0 100%,100% 100%)}
.rcw-corner-ribbon--folded.rcw-corner-ribbon--br::before{bottom:calc(-1 * var(--rcw-ribbon-out));right:var(--rcw-ribbon-tuck);clip-path:polygon(100% 0,0 100%,100% 100%)}
.rcw-corner-ribbon--folded.rcw-corner-ribbon--br::after{right:calc(-1 * var(--rcw-ribbon-out));bottom:var(--rcw-ribbon-tuck);clip-path:polygon(100% 0,0 100%,100% 100%)}

/* Triangle: the whole corner filled, text running along the diagonal. */
.rcw-corner-ribbon--triangle .rcw-corner-ribbon__clip{background:var(--rcw-ribbon-bg)}
.rcw-corner-ribbon--triangle.rcw-corner-ribbon--tl .rcw-corner-ribbon__clip{clip-path:polygon(0 0,100% 0,0 100%)}
.rcw-corner-ribbon--triangle.rcw-corner-ribbon--tr .rcw-corner-ribbon__clip{clip-path:polygon(0 0,100% 0,100% 100%)}
.rcw-corner-ribbon--triangle.rcw-corner-ribbon--bl .rcw-corner-ribbon__clip{clip-path:polygon(0 0,100% 100%,0 100%)}
.rcw-corner-ribbon--triangle.rcw-corner-ribbon--br .rcw-corner-ribbon__clip{clip-path:polygon(100% 0,100% 100%,0 100%)}
.rcw-corner-ribbon--triangle .rcw-corner-ribbon__band{background:none;height:auto}

/* Flag: a horizontal bar along the top edge with an arrow notch cut out of its
   inner end. No rotation — best for longer words. */
.rcw-corner-ribbon--flag .rcw-corner-ribbon__clip{
	width:auto;
	height:auto;
	overflow:visible;
}
.rcw-corner-ribbon--flag .rcw-corner-ribbon__band{
	position:relative;
	left:auto;
	right:auto;
	top:auto;
	bottom:auto;
	margin:0;
	width:auto;
	height:calc(var(--rcw-ribbon-band) * 1.05);
	padding:0 calc(var(--rcw-ribbon-font) * 1.5) 0 calc(var(--rcw-ribbon-font) * 0.9);
	transform:none;
}
.rcw-corner-ribbon--flag.rcw-corner-ribbon--tl .rcw-corner-ribbon__band,
.rcw-corner-ribbon--flag.rcw-corner-ribbon--bl .rcw-corner-ribbon__band{clip-path:polygon(0 0,100% 0,calc(100% - .8em) 50%,100% 100%,0 100%)}
.rcw-corner-ribbon--flag.rcw-corner-ribbon--tr .rcw-corner-ribbon__band,
.rcw-corner-ribbon--flag.rcw-corner-ribbon--br .rcw-corner-ribbon__band{
	clip-path:polygon(.8em 50%,0 0,100% 0,100% 100%,0 100%);
	padding:0 calc(var(--rcw-ribbon-font) * 0.9) 0 calc(var(--rcw-ribbon-font) * 1.5);
}

/* Bookmark: a tab hanging over the edge with a notch cut in its free end. */
.rcw-corner-ribbon--bookmark .rcw-corner-ribbon__clip{
	width:auto;
	height:auto;
	overflow:visible;
}
.rcw-corner-ribbon--bookmark .rcw-corner-ribbon__band{
	position:relative;
	left:auto;
	right:auto;
	top:auto;
	bottom:auto;
	margin:0;
	width:calc(var(--rcw-ribbon-band) * 1.25);
	height:auto;
	padding:calc(var(--rcw-ribbon-font) * 0.9) 0 calc(var(--rcw-ribbon-font) * 1.6);
	writing-mode:vertical-rl;
	transform:none;
	clip-path:polygon(0 0,100% 0,100% 100%,50% calc(100% - .75em),0 100%);
}
.rcw-corner-ribbon--bookmark.rcw-corner-ribbon--bl .rcw-corner-ribbon__band,
.rcw-corner-ribbon--bookmark.rcw-corner-ribbon--br .rcw-corner-ribbon__band{
	padding:calc(var(--rcw-ribbon-font) * 1.6) 0 calc(var(--rcw-ribbon-font) * 0.9);
	clip-path:polygon(0 0,50% .75em,100% 0,100% 100%,0 100%);
}

/* Flag and bookmark sit on the edge itself, so they use their own offsets. */
.rcw-corner-ribbon--flag .rcw-corner-ribbon__clip,
.rcw-corner-ribbon--bookmark .rcw-corner-ribbon__clip{margin:var(--rcw-ribbon-edge,18px)}
.rcw-corner-ribbon--flag.rcw-corner-ribbon--tl .rcw-corner-ribbon__clip,
.rcw-corner-ribbon--bookmark.rcw-corner-ribbon--tl .rcw-corner-ribbon__clip{margin-right:0;margin-bottom:0}
.rcw-corner-ribbon--flag.rcw-corner-ribbon--tr .rcw-corner-ribbon__clip,
.rcw-corner-ribbon--bookmark.rcw-corner-ribbon--tr .rcw-corner-ribbon__clip{margin-left:0;margin-bottom:0}
.rcw-corner-ribbon--flag.rcw-corner-ribbon--bl .rcw-corner-ribbon__clip,
.rcw-corner-ribbon--bookmark.rcw-corner-ribbon--bl .rcw-corner-ribbon__clip{margin-right:0;margin-top:0}
.rcw-corner-ribbon--flag.rcw-corner-ribbon--br .rcw-corner-ribbon__clip,
.rcw-corner-ribbon--bookmark.rcw-corner-ribbon--br .rcw-corner-ribbon__clip{margin-left:0;margin-top:0}