/* Article header */
.fx-phero { position: relative; overflow: hidden; padding: 36px 0 56px; }
.fx-phero__inner { position: relative; display: flex; flex-direction: column; gap: 36px; }
.fx-phero__crumbs .is-last { color: var(--ink); }
.fx-phero__head { max-width: 980px; display: flex; flex-direction: column; gap: 22px; }
.fx-phero .fx-phero__h1 { font-size: 64px; }
/* Long titles (a line over ~32 characters) use the smaller size from V2-BlogPost-WebDesigner. */
@media (min-width: 961px) {
	.fx-phero .fx-phero__h1.is-long { font-size: 54px; }
	.fx-phero__head:has(.is-long) { max-width: 1120px; }
}
.fx-phero__lead { max-width: 760px; font-size: 21px; line-height: 1.55; color: var(--muted); }
.fx-phero__meta { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 6px; }
.fx-phero__by { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--muted); }
.fx-phero__byt { display: flex; flex-direction: column; gap: 2px; line-height: 1.4; }
.fx-phero__author { font-weight: 600; color: var(--ink); }

/* Logo tile used as the team avatar */
.fx-atile { flex: none; width: var(--t); height: var(--t); border-radius: calc(var(--t) * .29); background: var(--violet-soft); display: inline-flex; align-items: center; justify-content: center; }

/* Share buttons */
.fx-share { position: relative; display: inline-flex; gap: 8px; align-items: center; }
.fx-share__btn {
	width: 44px; height: 44px; border-radius: 11px; background: var(--surface); border: 1px solid var(--line); color: var(--ink);
	display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
	transition: background-color 150ms, border-color 150ms, transform 150ms;
}
.fx-share__btn:hover { background: var(--violet-soft); border-color: #CFC6F2; transform: translateY(-2px); color: var(--ink); }
.fx-share__btn.is-done { background: var(--teal-soft); border-color: var(--teal); color: var(--teal); }
.fx-share__msg { position: absolute; right: 0; top: calc(100% + 6px); font-size: 13px; color: var(--teal); white-space: nowrap; }
.fx-share__msg:empty { display: none; }

/* Cover */
.fx-phero__cover .fx-cv--hero { height: 460px; border-radius: 28px; }

/* Review request cover animation (12 s loop) */
.fx-rq { position: relative; overflow: hidden; border-radius: 28px; height: 460px; background: linear-gradient(140deg, #FFF3DC, #FBD99A 55%, #FFC4B5); }
.fx-rq__dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(23, 17, 46, .12) 1.2px, transparent 1.2px); background-size: 22px 22px; }
.fx-rq .fx-example { right: 18px; top: 14px; color: rgba(23, 17, 46, .55); }
.fx-rq__stage {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(1.15); width: 760px; height: 300px;
	display: flex; align-items: center; justify-content: center; gap: 28px;
}
.fx-rq__card { background: #fff; border-radius: 22px; box-shadow: 0 30px 50px -30px rgba(23, 17, 46, .5); display: flex; flex-direction: column; }
.fx-rq__a { width: 240px; padding: 16px; gap: 10px; }
.fx-rq__b { width: 200px; padding: 18px; gap: 10px; align-items: center; }
.fx-rq__c { width: 210px; padding: 18px; gap: 6px; background: var(--ink); color: #fff; box-shadow: 0 30px 50px -26px rgba(23, 17, 46, .7); }
.fx-rq__meta { font-family: var(--font-mono); font-size: 10.5px; line-height: 1.5; color: #646177; }
.fx-rq__c .fx-rq__meta { color: var(--dark-muted); }
.fx-rq__bubble { padding: 11px 13px; border-radius: 16px 16px 4px 16px; background: var(--violet); color: #fff; font-size: 13px; line-height: 1.45; }
.fx-rq__rate { font-weight: 700; font-size: 14px; color: var(--ink); }
.fx-rq__stars { display: flex; gap: 4px; font-size: 28px; line-height: 1; color: var(--star); }
.fx-rq__stars > span { display: inline-block; }
.fx-rq__field { width: 100%; height: 34px; border-radius: 8px; background: var(--bg); border: 1px solid var(--line); }
.fx-rq__count { position: relative; display: block; height: 44px; font-family: var(--font-display); font-weight: 800; font-size: 40px; line-height: 1.1; letter-spacing: -0.03em; }
.fx-rq__count > span { position: absolute; left: 0; top: 0; }
.fx-rq__n1 { opacity: 0; }
.fx-rq__note { font-size: 12.5px; color: var(--dark-body); }
.fx-rq__arr { font-size: 26px; line-height: 1; color: rgba(23, 17, 46, .4); }

.fx-rq__a { animation: rqA 12s var(--ease) infinite both; }
.fx-rq__b { animation: rqB 12s var(--ease) infinite both; }
.fx-rq__c { animation: rqC 12s var(--ease) infinite both; }
.fx-rq__stars > span { animation: rqS 12s infinite both; }
.fx-rq__stars > span:nth-child(2) { animation-delay: .12s; }
.fx-rq__stars > span:nth-child(3) { animation-delay: .24s; }
.fx-rq__stars > span:nth-child(4) { animation-delay: .36s; }
.fx-rq__stars > span:nth-child(5) { animation-delay: .48s; }
.fx-rq__n1 { animation: rqN 12s steps(1) infinite; }
.fx-rq__n2 { animation: rqN2 12s steps(1) infinite; }
@keyframes rqA { 0% { opacity: 0; transform: translateY(14px); } 6%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes rqB { 0%, 24% { opacity: 0; transform: translateY(14px); } 30%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes rqC { 0%, 48% { opacity: 0; transform: translateY(14px) scale(.97); } 54%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes rqS { 0%, 32% { color: #E3DEEF; transform: scale(.7); } 36%, 92% { color: #E8A317; transform: none; } 98%, 100% { color: #E3DEEF; } }
@keyframes rqN { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
@keyframes rqN2 { 0%, 55% { opacity: 0; } 56%, 100% { opacity: 1; } }
/* Reduced motion: final state (all cards, lit stars, count +1). */
@media (prefers-reduced-motion: reduce) {
	.fx-rq__a, .fx-rq__b, .fx-rq__c { opacity: 1 !important; transform: none !important; }
	.fx-rq__n1 { opacity: 0 !important; }
	.fx-rq__n2 { opacity: 1 !important; }
}

/* Cover "hire-checklist": boxes tick (0.42 s apart), quote lines slide in, the stamp lands. */
.fx-rq--hire { background: linear-gradient(140deg, #EEEBFE, #CFC6F2 60%, #FFD3C6); }
.fx-rq--hire .fx-rq__stage { width: 840px; gap: 26px; transform: translate(-50%, -50%) scale(1.1); }
.fx-rq--hire .fx-rq__card { flex: none; }
.fx-rq--hire .stamp { white-space: nowrap; }
.fx-rq--hire .fx-rq__b { align-items: stretch; }
.fx-rq--hire .fx-rq__c { width: 236px !important; } /* room for yourbusiness.com.au */
.fx-rq--hire .ck-t { animation: rqT 12s var(--ease) infinite both; }
.fx-rq--hire .qt-l { animation: rqL 12s var(--ease) infinite both; }
.fx-rq--hire .stamp { animation: rqStamp 12s var(--ease) infinite both; }
@keyframes rqT { 0%, 8% { background-color: #FFFFFF; border-color: #CFC6F2; color: transparent; transform: scale(.8); } 11%, 92% { background-color: #0B8574; border-color: #0B8574; color: #FFFFFF; transform: none; } 98%, 100% { background-color: #FFFFFF; border-color: #CFC6F2; color: transparent; } }
@keyframes rqL { 0%, 30% { opacity: 0; transform: translateX(-8px); } 34%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes rqStamp { 0%, 44% { opacity: 0; transform: rotate(-12deg) scale(1.6); } 48%, 92% { opacity: 1; transform: rotate(-12deg) scale(1); } 98%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
	.fx-rq--hire .ck-t { background-color: #0B8574 !important; border-color: #0B8574 !important; color: #FFFFFF !important; transform: none !important; }
	.fx-rq--hire .qt-l { opacity: 1 !important; transform: none !important; }
	.fx-rq--hire .stamp { opacity: 1 !important; transform: rotate(-12deg) !important; }
}

@media (max-width: 960px) {
	.fx-phero .fx-phero__h1 { font-size: 48px; }
	.fx-rq__stage, .fx-rq--hire .fx-rq__stage { transform: translate(-50%, -50%) scale(.95); }
}
@media (max-width: 600px) {
	.fx-phero { padding: 22px 0 32px; }
	.fx-phero__inner { gap: 18px; }
	.fx-phero__head { gap: 18px; }
	.fx-phero__crumbs { font-size: 12px; }
	.fx-phero__crumbs .is-home { display: none !important; }
	.fx-phero .fx-phero__pill { display: none; }
	.fx-phero__crumbs li.is-home + li::before { content: none; }
	.fx-phero .fx-phero__h1 { font-size: 34px; line-height: 1.04; }
	.fx-phero__lead { font-size: 17px; }
	.fx-phero__meta { padding-top: 0; }
	.fx-phero__by { font-size: 14px; gap: 10px; }
	.fx-phero__by .fx-atile { --t: 36px !important; }
	.fx-phero__byt { flex-direction: row; flex-wrap: wrap; gap: 0 6px; }
	.fx-phero__author::after { content: " ·"; font-weight: 400; color: var(--muted); }
	.fx-phero__cover .fx-cv--hero { height: auto; aspect-ratio: 16 / 11; border-radius: 20px; }
	.fx-rq { height: 450px; border-radius: 20px; }
	.fx-rq__stage, .fx-rq--hire .fx-rq__stage { flex-direction: column; width: 300px; height: 560px; gap: 14px; transform: translate(-50%, -50%) scale(.76); }
	.fx-rq--hire .fx-rq__stage { height: 780px; transform: translate(-50%, -50%) scale(.56); }
	.fx-rq__arr { transform: rotate(90deg); }
}