/* ==========================================================================
   PariPesa — foundation: tokens, reset, container, buttons, header, footer
   and the shared long-form blocks.

   Class prefix `pp93-`. Values come from the Figma source
   (file qJY7C3cgNfhLj6FU3p5MgC, frame 6:265, 1728px wide).
   ========================================================================== */

:root {
	/* Surfaces */
	--pp93-bg: #FFFFFF;
	--pp93-ink: #000000;
	--pp93-dark: #000207;
	--pp93-navy: #192347;
	--pp93-navy-mid: #2C3D7A;
	--pp93-tile: #D9DEFA;
	--pp93-lilac: #A7B5FF;

	/* Accents */
	--pp93-blue: #3D4FB7;
	--pp93-blue-deep: #1945B4;
	--pp93-blue-mid: #4475D7;
	--pp93-gold: #FFBB32;
	--pp93-gold-deep: #FF9E34;
	--pp93-amber: #FFAC35;
	--pp93-sand: #F5B362;

	/* Text on dark */
	--pp93-on-dark: rgba(255, 255, 255, .7);
	--pp93-on-dark-dim: rgba(255, 255, 255, .5);
	/* Text on light */
	--pp93-muted: rgba(0, 0, 0, .6);

	/* The frosted panel used by the hero card and the notification chips. */
	--pp93-glass: linear-gradient(220.13deg, rgba(245,179,98,.8) -29%, rgba(44,61,122,.8) 21%, rgba(25,35,71,.8) 105%);

	/* Metrics */
	--pp93-font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--pp93-max: 1728px;
	--pp93-gutter: 64px;
	--pp93-radius: 8px;
	--pp93-radius-lg: 16px;
}

/* --- Reset ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* The header is sticky, so an anchor would otherwise land underneath it. */
	scroll-padding-top: 104px;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

body {
	margin: 0;
	background: var(--pp93-bg);
	color: var(--pp93-ink);
	font-family: var(--pp93-font);
	font-size: 16px;
	line-height: 24px;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* clip, not hidden: `hidden` turns the body into a scroll container, and a sticky
	   element inside one stops sticking — which is exactly what happened to the header
	   on every page that is not the front page. `clip` trims the overflow without
	   creating that container. */
	overflow-x: clip;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--pp93-blue);
	outline-offset: 3px;
	border-radius: 2px;
}

.pp93-visually-hidden {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --- Scrollbars ----------------------------------------------------------- */

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #F1F3FB; }
::-webkit-scrollbar-thumb { background: #C3CBEE; border: 2px solid #F1F3FB; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--pp93-blue); }
html { scrollbar-width: thin; scrollbar-color: #C3CBEE #F1F3FB; }

/* --- Container ------------------------------------------------------------
   A 1728px frame with 64px gutters, so content measures 1600px. */

.pp93-container {
	width: 100%;
	max-width: var(--pp93-max);
	margin-inline: auto;
	padding-inline: var(--pp93-gutter);
}

/* --- Headings -------------------------------------------------------------
   Every section title in the design is Montserrat 900 at 48/57.6, uppercase. */

.pp93-h2 {
	font-size: 48px;
	line-height: 57.6px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0;
}

/* The accented words inside a heading, marked up as <em> by the editor. */
.pp93-h2 em { font-style: normal; color: var(--pp93-blue); }

.pp93-lead {
	font-size: 20px;
	line-height: 30px;
}

/* --- Buttons -------------------------------------------------------------- */

.pp93-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	white-space: nowrap;
	transition: filter .18s ease, background-color .18s ease, transform .18s ease;
}

.pp93-btn:active { transform: translateY(1px); }

/* Header "Start": a frosted chip whose 1px stroke sits OUTSIDE the box in the
   source, so it is drawn as a ring rather than a border and adds no height. */
.pp93-btn--ghost {
	padding: 8px 20px;
	border-radius: 4px;
	background: rgba(40, 51, 112, .5);
	box-shadow: 0 0 0 1px #FFFFFF;
	color: #FFFFFF;
	font-size: 16px;
	line-height: 24px;
	font-weight: 500;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
}

.pp93-btn--ghost:hover { background: rgba(40, 51, 112, .75); }

.pp93-btn--white {
	padding: 8px 20px;
	border-radius: 4px;
	background: #FFFFFF;
	color: var(--pp93-ink);
	font-size: 16px;
	line-height: 24px;
	font-weight: 500;
}

.pp93-btn--white:hover { background: #E8EAF6; }

/* The two large calls to action share a shape and differ only in surface. */
.pp93-btn--gold,
.pp93-btn--blue {
	padding: 10px 37px;
	border-radius: var(--pp93-radius);
	color: #FFFFFF;
	font-size: 20px;
	line-height: 30px;
	font-weight: 700;
	text-transform: uppercase;
}

.pp93-btn--gold {
	background: linear-gradient(2.31deg, #F5711B -83%, #F2B539 216%);
	box-shadow: inset 0 0 8px rgba(255, 255, 255, .84), 0 4px 4px rgba(0, 0, 0, .25);
	text-shadow: 0 0 6px rgba(0, 0, 0, .25);
}

.pp93-btn--blue {
	background: linear-gradient(97deg, #00096A -10%, #243DC6 60%);
	box-shadow: inset -2px 1px 8px rgba(73, 237, 254, .24);
}

.pp93-btn--gold:hover,
.pp93-btn--blue:hover { filter: brightness(1.08); }

/* A light sweep crosses the big buttons every few seconds and again on hover. The
   lift uses `translate`, not `transform`, so it composes with the reveal transform. */
.pp93-btn--gold,
.pp93-btn--blue {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transition: filter .18s ease, translate .25s ease, box-shadow .25s ease;
}

.pp93-btn--gold::after,
.pp93-btn--blue::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: -60%;
	z-index: -1;
	width: 40%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
	transform: skewX(-20deg);
	animation: pp93-shine 4.5s ease-in-out infinite;
	pointer-events: none;
}

.pp93-btn--gold:hover,
.pp93-btn--blue:hover { translate: 0 -3px; }

.pp93-btn--gold:hover { box-shadow: inset 0 0 8px rgba(255, 255, 255, .84), 0 10px 24px rgba(245, 113, 27, .45); }
.pp93-btn--blue:hover { box-shadow: inset -2px 1px 8px rgba(73, 237, 254, .24), 0 10px 24px rgba(36, 61, 198, .45); }

.pp93-btn--gold:hover::after,
.pp93-btn--blue:hover::after { animation: pp93-shine .9s ease-out; }

@keyframes pp93-shine {
	0%, 70% { left: -60%; }
	100%    { left: 130%; }
}

/* --- Header ---------------------------------------------------------------
   Sits over the hero photo rather than above it, so it has no surface of its
   own and the hero starts at y=0. */

.pp93-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 50;
	padding-block: 24px;
	/* Height is deliberately not animated. The bar is sticky, so shrinking it on scroll
	   pulls every following element up by the difference — that was the jump. Only the
	   surface changes. */
	transition: background-color .25s ease, box-shadow .25s ease;
}

/* Once the hero has scrolled past, the bar needs a surface of its own to stay legible
   over whatever is underneath. The class is set from script on scroll. */
.pp93-header.is-stuck {
	background: rgba(0, 9, 106, .92);
	box-shadow: 0 8px 24px rgba(0, 2, 7, .28);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

/* Away from the hero the header needs a surface of its own; the design only ever
   shows it over the photo. */
/* Away from the hero there is no photo behind the bar, so it carries its own surface
   from the start and sticks in normal flow rather than floating over the page. */
.pp93-header--solid {
	position: sticky;
	background: linear-gradient(97deg, #00096A, #243DC6);
}

.pp93-header--solid.is-stuck { box-shadow: 0 8px 24px rgba(0, 2, 7, .28); }

.pp93-header__bar {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	min-height: 40px;
}

.pp93-nav__list { display: flex; align-items: center; gap: 24px; }

.pp93-nav__link {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 16px;
	line-height: 24px;
	color: #FFFFFF;
	transition: opacity .18s ease;
}

.pp93-nav__link:hover { opacity: .7; }

.pp93-nav__caret { width: 24px; height: 24px; flex: none; transition: transform .2s ease; }
.pp93-nav__item:hover > .pp93-nav__link .pp93-nav__caret,
.pp93-nav__item:focus-within > .pp93-nav__link .pp93-nav__caret { transform: rotate(180deg); }

/* Centred independently of the two side groups, as in the source. */
.pp93-header__logo {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	color: #FFFFFF;
}

.pp93-header__logo svg { width: 165px; height: 25px; }
.pp93-header__logo img { width: auto; max-height: 32px; }

.pp93-header__actions { display: flex; align-items: center; gap: 24px; margin-left: auto; }

/* --- Sub-navigation ------------------------------------------------------- */

.pp93-nav__item { position: relative; }

.pp93-subnav {
	position: absolute;
	top: 100%;
	left: -16px;
	z-index: 30;
	min-width: 200px;
	margin-top: 12px;
	padding: 8px;
	background: #FFFFFF;
	border-radius: var(--pp93-radius);
	box-shadow: 0 16px 40px rgba(0, 9, 106, .18);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.pp93-nav__item:hover > .pp93-subnav,
.pp93-nav__item:focus-within > .pp93-subnav { opacity: 1; visibility: visible; transform: none; }

.pp93-subnav__link {
	display: block;
	padding: 9px 12px;
	border-radius: 4px;
	font-size: 16px;
	line-height: 24px;
	color: var(--pp93-ink);
	transition: background-color .18s ease;
}

.pp93-subnav__link:hover { background: #F1F3FB; }

/* --- Burger --------------------------------------------------------------- */

.pp93-burger {
	display: none;
	width: 40px; height: 40px;
	align-items: center;
	justify-content: center;
}

.pp93-burger span,
.pp93-burger span::before,
.pp93-burger span::after {
	display: block;
	width: 22px; height: 2px;
	background: #FFFFFF;
	border-radius: 2px;
	transition: transform .2s ease, opacity .2s ease;
}

.pp93-burger span { position: relative; }
.pp93-burger span::before,
.pp93-burger span::after { content: ''; position: absolute; left: 0; }
.pp93-burger span::before { top: -7px; }
.pp93-burger span::after { top: 7px; }

.pp93-burger[aria-expanded="true"] span { background: transparent; }
.pp93-burger[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.pp93-burger[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); }

/* --- Footer --------------------------------------------------------------- */

.pp93-footer { padding-bottom: 40px; background: var(--pp93-bg); }

/* CTA banner ------------------------------------------------------------- */

.pp93-cta {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	min-height: 228px;
	padding: 64px;
	border-radius: var(--pp93-radius-lg);
	background: linear-gradient(106.25deg, rgba(68,117,215,.2) 4%, rgba(25,69,180,.4) 109%);
}

.pp93-cta__text { position: relative; z-index: 2; max-width: 1271px; }
.pp93-cta__title { margin-bottom: 12px; }
.pp93-cta__note { font-size: 20px; line-height: 30px; }
.pp93-cta__action { position: relative; z-index: 2; flex: none; }

/* The sports-equipment cluster behind the button. */
.pp93-cta__art {
	position: absolute;
	top: -60px;
	right: 189px;
	z-index: 1;
	width: 285px;
	pointer-events: none;
	user-select: none;
}

/* --- Footer rows ---------------------------------------------------------- */

.pp93-footer__row {
	display: flex;
	align-items: center;
	gap: 40px;
	padding-block: 40px 32px;
	border-bottom: 1px solid rgba(61, 79, 183, .25);
}

.pp93-footer__logo { flex: none; color: var(--pp93-blue); }
.pp93-footer__logo svg { width: 127px; height: 20px; }
.pp93-footer__logo img { width: auto; max-height: 28px; }

.pp93-footer__links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px 40px;
	margin-left: 66px;
}

.pp93-footer__link {
	font-size: 16px;
	line-height: 24px;
	color: var(--pp93-blue);
	transition: color .18s ease;
}

.pp93-footer__link:hover { color: var(--pp93-blue-deep); text-decoration: underline; text-underline-offset: 3px; }

.pp93-footer__copyright {
	margin-top: 32px;
	font-size: 14px;
	line-height: 22px;
	color: var(--pp93-muted);
}

.pp93-footer__pay { padding-top: 40px; }
.pp93-footer__pay img { width: 100%; max-width: 1192px; height: auto; margin-inline: auto; }

/* --- Motion --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   Shared long-form blocks: SEO copy, contents, rich text, tables, FAQ and the
   author signature. Used by the home template and the article layout alike.
   ========================================================================== */

.pp93-seo { padding-block: 0 72px; background: var(--pp93-bg); }
.pp93-seo:first-child { padding-top: 72px; }

.pp93-rich { color: #2B2B33; font-size: 17px; line-height: 28px; }
.pp93-rich > * + * { margin-top: 16px; }

.pp93-rich h1,
.pp93-rich h2 {
	margin-top: 44px;
	font-size: 32px;
	line-height: 40px;
	font-weight: 900;
	text-transform: uppercase;
	color: var(--pp93-ink);
}

.pp93-rich h3 {
	margin-top: 32px;
	font-size: 24px;
	line-height: 29px;
	font-weight: 500;
	color: var(--pp93-ink);
}

.pp93-rich h1:first-child, .pp93-rich h2:first-child, .pp93-rich h3:first-child { margin-top: 0; }

.pp93-rich a { color: var(--pp93-blue); text-decoration: underline; text-underline-offset: 3px; }
.pp93-rich a:hover { color: var(--pp93-blue-deep); }
.pp93-rich strong { font-weight: 700; color: var(--pp93-ink); }

.pp93-rich ul, .pp93-rich ol { padding-left: 24px; }
.pp93-rich ul { list-style: disc; }
.pp93-rich ol { list-style: decimal; }
.pp93-rich li + li { margin-top: 8px; }
.pp93-rich li::marker { color: var(--pp93-blue); }

/* --- Tables ---------------------------------------------------------------
   Wide tables scroll inside their own box rather than reflowing: a table is
   read by comparing rows, and one card per row destroys the comparison. */

.pp93-table-scroll {
	overflow-x: auto;
	border-radius: var(--pp93-radius-lg);
	box-shadow: 0 0 0 1px rgba(61, 79, 183, .18);
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.pp93-rich table {
	width: 100%;
	min-width: 560px;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

.pp93-rich caption {
	padding: 16px 24px;
	border-bottom: 1px solid rgba(61, 79, 183, .18);
	color: var(--pp93-blue);
	font-size: 14px;
	font-weight: 700;
	text-align: left;
}

.pp93-rich th, .pp93-rich td {
	padding: 14px 24px;
	border-bottom: 1px solid rgba(61, 79, 183, .14);
	text-align: left;
	font-size: 15px;
	line-height: 24px;
}

.pp93-rich thead th {
	position: sticky;
	top: 0;
	z-index: 1;
	background: linear-gradient(97deg, #00096A, #243DC6);
	color: #FFFFFF;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	white-space: nowrap;
}

.pp93-rich tbody tr:nth-child(even) { background: #F5F7FE; }
.pp93-rich tbody tr:hover { background: #EBEFFC; }
.pp93-rich tbody tr:last-child td { border-bottom: 0; }

/* --- Table of contents ---------------------------------------------------- */

.pp93-toc { padding-block: 56px 0; margin-bottom: 40px; background: var(--pp93-bg); }
/* Inside an article the card supplies its own spacing and fills its column. */
.pp93-toc--inline { padding-block: 0; margin-block: 0; max-width: none; }

/* In the rail the list is one narrow column, not two. */
.pp93-entry__rail .pp93-toc__list { grid-template-columns: minmax(0, 1fr); gap: 10px; }

.pp93-toc__card {
	padding: 24px;
	border-radius: var(--pp93-radius-lg);
	background: #F5F7FE;
	box-shadow: 0 0 0 1px rgba(61, 79, 183, .14);
}

.pp93-toc__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	text-align: left;
}

.pp93-toc__title {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--pp93-blue);
}

.pp93-toc__chevron { position: relative; flex: none; width: 12px; height: 12px; }

.pp93-toc__chevron::before,
.pp93-toc__chevron::after {
	content: '';
	position: absolute;
	top: 50%; left: 0;
	width: 12px; height: 2px;
	border-radius: 2px;
	background: var(--pp93-blue);
	transform: translateY(-50%);
	transition: transform .25s ease;
}

.pp93-toc__chevron::after { transform: translateY(-50%) rotate(90deg); }
.pp93-toc__card.is-open .pp93-toc__chevron::after { transform: translateY(-50%) rotate(0deg); }

.pp93-toc__panel { overflow: hidden; transition: height .25s ease; }
.pp93-toc__panel > .pp93-toc__list { padding-top: 16px; }

.pp93-toc__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 40px;
}

.pp93-toc__link {
	font-size: 16px;
	line-height: 24px;
	font-weight: 500;
	transition: color .18s ease;
}

.pp93-toc__link:hover,
.pp93-toc__link.is-current { color: var(--pp93-blue); }

/* --- FAQ ------------------------------------------------------------------ */

.pp93-faq { padding-block: 72px; background: var(--pp93-bg); }
.pp93-faq__title { margin-bottom: 32px; }
.pp93-faq__list { display: flex; flex-direction: column; gap: 12px; }

.pp93-faq__item {
	border-radius: var(--pp93-radius-lg);
	background: #F5F7FE;
	box-shadow: 0 0 0 1px rgba(61, 79, 183, .14);
	transition: box-shadow .18s ease;
}

.pp93-faq__item.is-open { box-shadow: 0 0 0 1px var(--pp93-blue); }
.pp93-faq__q { margin: 0; }

.pp93-faq__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 24px;
	text-align: left;
	font-size: 20px;
	line-height: 30px;
	font-weight: 500;
}

.pp93-faq__chevron { position: relative; flex: none; width: 14px; height: 14px; }

.pp93-faq__chevron::before,
.pp93-faq__chevron::after {
	content: '';
	position: absolute;
	top: 50%; left: 0;
	width: 14px; height: 2px;
	border-radius: 2px;
	background: var(--pp93-blue);
	transform: translateY(-50%);
	transition: transform .25s ease;
}

.pp93-faq__chevron::after { transform: translateY(-50%) rotate(90deg); }
.pp93-faq__item.is-open .pp93-faq__chevron::after { transform: translateY(-50%) rotate(0deg); }

.pp93-faq__panel { overflow: hidden; transition: height .25s ease; }

.pp93-faq__panel-inner {
	padding: 0 24px 24px;
	color: var(--pp93-muted);
	font-size: 17px;
	line-height: 28px;
}

.pp93-faq__panel-inner > * + * { margin-top: 12px; }

/* --- Author signature -----------------------------------------------------
   A dark navy panel: the author on the left with a ringed portrait and a check
   badge, the four facts as tiles on the right. */

.pp93-author {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
	align-items: center;
	gap: 40px;
	margin-block: 24px 72px;
	padding: 40px;
	border-radius: 24px;
	background:
		radial-gradient(120% 140% at 0% 0%, rgba(68, 117, 215, .55) 0%, transparent 55%),
		radial-gradient(90% 120% at 100% 100%, rgba(245, 113, 27, .28) 0%, transparent 60%),
		linear-gradient(135deg, #0B1240 0%, #192347 55%, #0B1240 100%);
	box-shadow: 0 24px 60px -24px rgba(0, 9, 106, .55);
	color: #FFFFFF;
}

.pp93-author--bare { grid-template-columns: minmax(0, 1fr); }

/* A thin animated edge, drawn as a masked conic gradient. */
.pp93-author::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	padding: 1px;
	border-radius: inherit;
	background: conic-gradient(from var(--pp93-angle, 0deg), rgba(255, 187, 50, .9), rgba(167, 181, 255, .15) 25%, rgba(167, 181, 255, .7) 50%, rgba(255, 187, 50, .15) 75%, rgba(255, 187, 50, .9));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	animation: pp93-spin-angle 8s linear infinite;
	pointer-events: none;
}

.pp93-author__mark {
	position: absolute;
	right: -30px;
	bottom: -40px;
	z-index: -1;
	color: #FFFFFF;
	opacity: .05;
	pointer-events: none;
}

.pp93-author__mark svg { width: 280px; height: 247px; }

.pp93-author__label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 20px;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(255, 187, 50, .14);
	box-shadow: inset 0 0 0 1px rgba(255, 187, 50, .35);
	font-size: 12px;
	line-height: 16px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--pp93-gold);
}

.pp93-author__label::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	box-shadow: 0 0 0 0 rgba(255, 187, 50, .7);
	animation: pp93-dot 2s ease-out infinite;
}

.pp93-author__card { display: flex; align-items: center; gap: 20px; }

.pp93-author__face { position: relative; flex: none; width: 88px; height: 88px; }

/* The rotating ring around the portrait. */
.pp93-author__face::before {
	content: '';
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	background: conic-gradient(from var(--pp93-angle, 0deg), #FFBB32, #F5711B, #A7B5FF, #243DC6, #FFBB32);
	animation: pp93-spin-angle 6s linear infinite;
}

.pp93-author__avatar {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: 50%;
	border: 3px solid #192347;
	background: linear-gradient(97deg, #00096A, #243DC6);
}

.pp93-author__avatar img { width: 100%; height: 100%; object-fit: cover; }

.pp93-author__initial {
	display: grid;
	place-items: center;
	width: 100%; height: 100%;
	color: #FFFFFF;
	font-size: 22px;
	font-weight: 900;
}

.pp93-author__face .pp93-author__initial { font-size: 34px; }

.pp93-author__check {
	position: absolute;
	right: -4px;
	bottom: -2px;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #192347;
	color: #2F8CFF;
}

.pp93-author__check svg { width: 26px; height: 26px; }

.pp93-author__name { font-size: 28px; line-height: 34px; font-weight: 900; text-transform: uppercase; }
.pp93-author__name a { transition: color .18s ease; }
.pp93-author__name a:hover { color: var(--pp93-gold); }
.pp93-author__role { margin-top: 4px; font-size: 16px; line-height: 24px; color: var(--pp93-on-dark); }

.pp93-author__note {
	margin-top: 20px;
	max-width: 760px;
	padding-left: 16px;
	border-left: 2px solid rgba(255, 187, 50, .6);
	color: rgba(255, 255, 255, .82);
	font-size: 17px;
	line-height: 28px;
}

.pp93-author__note a { color: var(--pp93-gold); text-decoration: underline; }

.pp93-author__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 24px;
	padding: 10px 18px 10px 22px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .08);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
	font-size: 15px;
	line-height: 22px;
	font-weight: 700;
	color: #FFFFFF;
	transition: background-color .2s ease, box-shadow .2s ease;
}

.pp93-author__more svg { width: 18px; height: 18px; transition: transform .2s ease; }
.pp93-author__more:hover { background: rgba(255, 187, 50, .16); box-shadow: inset 0 0 0 1px var(--pp93-gold); }
.pp93-author__more:hover svg { transform: translateX(4px); }

.pp93-author__meta {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
}

.pp93-author__meta-item {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
	column-gap: 12px;
	align-items: center;
	padding: 16px;
	border-radius: 16px;
	background: rgba(255, 255, 255, .06);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: background-color .2s ease, translate .2s ease;
}

.pp93-author__meta-item:hover { background: rgba(255, 255, 255, .1); translate: 0 -2px; }

.pp93-author__meta-icon {
	grid-row: 1 / 3;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: linear-gradient(2.31deg, #F5711B -83%, #F2B539 216%);
	color: #FFFFFF;
}

.pp93-author__meta-icon svg { width: 20px; height: 20px; }

.pp93-author__meta dt { font-size: 12px; line-height: 16px; letter-spacing: .5px; text-transform: uppercase; color: var(--pp93-on-dark-dim); }
.pp93-author__meta dd { margin: 0; font-size: 18px; line-height: 24px; font-weight: 700; }

@property --pp93-angle {
	syntax: '<angle>';
	inherits: false;
	initial-value: 0deg;
}

@keyframes pp93-spin-angle { to { --pp93-angle: 360deg; } }

@keyframes pp93-dot {
	0%   { box-shadow: 0 0 0 0 rgba(255, 187, 50, .7); }
	80%, 100% { box-shadow: 0 0 0 8px rgba(255, 187, 50, 0); }
}

/* --- Reveal on scroll ----------------------------------------------------- */

.pp93-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .55s ease var(--pp93-delay, 0ms), transform .55s ease var(--pp93-delay, 0ms);
}

.pp93-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.pp93-reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1439px) {
	:root { --pp93-gutter: 40px; }
	.pp93-h2 { font-size: 40px; line-height: 48px; }
	.pp93-cta { padding: 48px; }
}

@media (max-width: 1023px) {
	.pp93-author { grid-template-columns: minmax(0, 1fr); }
	:root { --pp93-gutter: 32px; }

	.pp93-burger { display: flex; }
	.pp93-header__logo { position: static; transform: none; order: -1; }
	.pp93-header__bar { justify-content: flex-start; gap: 16px; }
	.pp93-header__actions { gap: 12px; }

	.pp93-nav {
		position: absolute;
		top: calc(100% + 16px);
		left: var(--pp93-gutter);
		right: var(--pp93-gutter);
		z-index: 40;
		padding: 16px;
		border-radius: var(--pp93-radius-lg);
		background: var(--pp93-navy);
		box-shadow: 0 24px 48px rgba(0, 2, 7, .5);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity .2s ease, transform .2s ease, visibility .2s;
	}

	.pp93-nav.pp93-is-open { opacity: 1; visibility: visible; transform: none; }
	.pp93-nav__list { flex-direction: column; align-items: stretch; gap: 4px; }
	.pp93-nav__link { padding: 10px 8px; }

	.pp93-subnav {
		position: static;
		min-width: 0;
		margin: 0 0 8px 16px;
		padding: 0;
		background: none;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.pp93-subnav__link { color: #FFFFFF; }
	.pp93-subnav__link:hover { background: rgba(255, 255, 255, .1); }

	.pp93-h2 { font-size: 32px; line-height: 40px; }
	.pp93-lead { font-size: 18px; line-height: 28px; }

	.pp93-cta { flex-direction: column; align-items: flex-start; gap: 28px; padding: 36px; }
	.pp93-cta__art { right: -40px; top: auto; bottom: -80px; width: 220px; opacity: .8; }

	.pp93-footer__row { flex-wrap: wrap; gap: 24px; }
	.pp93-footer__links { margin-left: 0; gap: 16px 28px; }
}

@media (max-width: 767px) {
	:root { --pp93-gutter: 20px; }

	.pp93-h2 { font-size: 26px; line-height: 34px; }
	.pp93-lead { font-size: 16px; line-height: 26px; }

	.pp93-btn--gold, .pp93-btn--blue { padding: 10px 24px; font-size: 17px; }

	.pp93-seo { padding-bottom: 48px; }
	.pp93-seo:first-child { padding-top: 48px; }
	.pp93-toc { padding-top: 40px; margin-bottom: 28px; }
	.pp93-toc__list { grid-template-columns: minmax(0, 1fr); }

	.pp93-faq { padding-block: 48px; }
	.pp93-faq__trigger { padding: 18px; font-size: 17px; line-height: 26px; }
	.pp93-faq__panel-inner { padding: 0 18px 18px; font-size: 16px; line-height: 26px; }

	.pp93-rich table { min-width: 480px; }
	.pp93-rich th, .pp93-rich td { padding: 12px 16px; font-size: 14px; line-height: 22px; }
	.pp93-rich h1, .pp93-rich h2 { font-size: 24px; line-height: 32px; }
	.pp93-rich h3 { font-size: 20px; line-height: 28px; }

	.pp93-author { padding: 24px 20px; gap: 24px; border-radius: 20px; }
	.pp93-author__face { width: 72px; height: 72px; }
	.pp93-author__name { font-size: 22px; line-height: 28px; }
	.pp93-author__meta { gap: 8px; }
	.pp93-author__meta-item { padding: 12px; column-gap: 10px; }
	.pp93-author__meta-icon { width: 34px; height: 34px; border-radius: 10px; }
	.pp93-author__meta dd { font-size: 16px; }

	.pp93-cta { padding: 24px; min-height: 0; }
	.pp93-cta__art { display: none; }
	.pp93-cta__note { font-size: 16px; line-height: 26px; }
}

/* ==========================================================================
   Floating controls: back-to-top and the bonus button.
   ========================================================================== */

.pp93-fab {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 60;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 16px;
}

/* --- Back to top ---------------------------------------------------------- */

.pp93-fab__top {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: linear-gradient(97deg, #00096A, #243DC6);
	box-shadow: 0 8px 20px rgba(0, 9, 106, .35);
	color: #FFFFFF;
	/* Out of the way, and out of the tab order, until the page has actually moved. */
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity .25s ease, transform .25s ease, visibility .25s;
}

.pp93-fab__top.is-visible { opacity: 1; visibility: visible; transform: none; }
.pp93-fab__top:hover { filter: brightness(1.12); }
.pp93-fab__top svg { width: 24px; height: 24px; }

/* --- Bonus ticket ---------------------------------------------------------
   A dark glass ticket that slides in after load: a gold gift tile that shakes every
   few seconds, the offer in gold, and an arrow chip. A rotating edge keeps it alive
   without flashing. The cross folds it to the gift tile alone. */

.pp93-fab__promo {
	/* The ticket sits in the bottom-left corner; back-to-top keeps the right one. */
	position: fixed;
	left: 24px;
	bottom: 24px;
	z-index: 60;
	animation: pp93-fab-in .7s cubic-bezier(.2, .9, .3, 1.3) 1s both;
}

@keyframes pp93-fab-in {
	from { opacity: 0; transform: translateX(-120%) rotate(-6deg); }
	to   { opacity: 1; transform: none; }
}

.pp93-fab__bonus {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	gap: 14px;
	max-width: 340px;
	padding: 8px 8px 8px 8px;
	border-radius: 20px;
	background:
		radial-gradient(120% 160% at 0% 0%, rgba(245, 179, 98, .45), transparent 55%),
		linear-gradient(135deg, #192347 0%, #0B1240 100%);
	box-shadow: 0 16px 40px -10px rgba(0, 9, 106, .6), 0 0 0 1px rgba(255, 255, 255, .06);
	color: #FFFFFF;
	transition: translate .25s ease, box-shadow .25s ease, max-width .35s ease, padding .35s ease, gap .35s ease;
}

.pp93-fab__bonus::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	padding: 1.5px;
	border-radius: inherit;
	background: conic-gradient(from var(--pp93-angle, 0deg), #FFBB32, transparent 30%, #F5711B 50%, transparent 80%, #FFBB32);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	animation: pp93-spin-angle 4s linear infinite;
	pointer-events: none;
}

.pp93-fab__bonus:hover { translate: 0 -3px; box-shadow: 0 22px 46px -10px rgba(245, 113, 27, .55), 0 0 0 1px rgba(255, 187, 50, .3); }

.pp93-fab__gift {
	position: relative;
	display: grid;
	place-items: center;
	flex: none;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: linear-gradient(2.31deg, #F5711B -83%, #F2B539 216%);
	box-shadow: inset 0 0 8px rgba(255, 255, 255, .7), 0 6px 16px rgba(245, 113, 27, .5);
	color: #FFFFFF;
}

.pp93-fab__gift svg { width: 28px; height: 28px; animation: pp93-gift-shake 3.2s ease-in-out infinite; transform-origin: 50% 90%; }
.pp93-fab__bonus:hover .pp93-fab__gift svg { animation-duration: .8s; }

@keyframes pp93-gift-shake {
	0%, 70%, 100% { transform: none; }
	74% { transform: rotate(-14deg) scale(1.1); }
	78% { transform: rotate(12deg) scale(1.1); }
	82% { transform: rotate(-9deg) scale(1.08); }
	86% { transform: rotate(6deg); }
	90% { transform: rotate(-3deg); }
}

/* Three sparks that pop around the tile in turn. */
.pp93-fab__spark {
	position: absolute;
	width: 8px;
	height: 8px;
	background: #FFE7A8;
	clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
	opacity: 0;
	animation: pp93-spark 3.2s ease-out infinite;
}

.pp93-fab__spark--1 { top: -4px; right: -3px; animation-delay: 2.35s; }
.pp93-fab__spark--2 { bottom: 2px; left: -5px; width: 6px; height: 6px; animation-delay: 2.5s; }
.pp93-fab__spark--3 { top: 6px; left: -4px; width: 5px; height: 5px; animation-delay: 2.65s; }

@keyframes pp93-spark {
	0%   { opacity: 0; transform: scale(0) rotate(0); }
	8%   { opacity: 1; transform: scale(1.4) rotate(45deg); }
	20%, 100% { opacity: 0; transform: scale(0) rotate(90deg); }
}

.pp93-fab__label {
	overflow: hidden;
	font-size: 15px;
	line-height: 20px;
	font-weight: 800;
	text-transform: uppercase;
	white-space: normal;
	background: linear-gradient(90deg, #FFFFFF 0%, #FFBB32 40%, #FFFFFF 60%, #FFFFFF 100%);
	background-size: 250% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: pp93-text-sheen 4s linear infinite;
	transition: opacity .25s ease;
}

@keyframes pp93-text-sheen {
	from { background-position: 100% 0; }
	to   { background-position: -150% 0; }
}

.pp93-fab__go {
	display: grid;
	place-items: center;
	flex: none;
	width: 40px;
	height: 40px;
	margin-left: auto;
	border-radius: 12px;
	background: rgba(255, 255, 255, .1);
	color: var(--pp93-gold);
	transition: background-color .2s ease, opacity .25s ease;
}

.pp93-fab__go svg { width: 20px; height: 20px; transition: transform .2s ease; }
.pp93-fab__bonus:hover .pp93-fab__go { background: var(--pp93-gold); color: #192347; }
.pp93-fab__bonus:hover .pp93-fab__go svg { transform: translateX(2px); }

.pp93-fab__close {
	position: absolute;
	top: -8px;
	right: -8px;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #FFFFFF;
	box-shadow: 0 2px 8px rgba(0, 9, 106, .3);
	color: #192347;
	opacity: 0;
	transition: opacity .2s ease;
}

.pp93-fab__close svg { width: 14px; height: 14px; }
.pp93-fab__promo:hover .pp93-fab__close,
.pp93-fab__close:focus-visible { opacity: 1; }

/* Folded: only the gift tile is left. */
.pp93-fab__promo.is-mini .pp93-fab__bonus { max-width: 68px; gap: 0; }
.pp93-fab__promo.is-mini .pp93-fab__label,
.pp93-fab__promo.is-mini .pp93-fab__go { width: 0; opacity: 0; }
.pp93-fab__promo.is-mini .pp93-fab__close { display: none; }

@media (hover: none) {
	.pp93-fab__close { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.pp93-fab__promo, .pp93-fab__gift svg, .pp93-fab__spark, .pp93-fab__label, .pp93-fab__bonus::before { animation: none; }
}

@media (max-width: 767px) {
	.pp93-fab { right: 14px; bottom: 14px; gap: 12px; }
	.pp93-fab__promo { left: 14px; bottom: 14px; }
	.pp93-fab__top { width: 44px; height: 44px; }
	.pp93-fab__top svg { width: 20px; height: 20px; }

	/* On a phone the ticket is always folded to the tile: a full ticket would sit over
	   the content it is meant to advertise. */
	.pp93-fab__bonus { max-width: 68px; gap: 0; }
	.pp93-fab__label, .pp93-fab__go { width: 0; opacity: 0; }
	.pp93-fab__close { display: none; }
}
