/*
 * AlmarFit 2.10 ("Noir"): the first page redesigned, and the header, the footer and the closing call of every page.
 * Near-black background, gold as the only accent, Libre Caslon titles with one word in gold italic, Figtree text,
 * large corners, thin lines. The sections are ordinary blocks (.af-sec.af-nx); these rules only place and colour them.
 * Motion (assets/noir.js): the gold ring around the main buttons, gold dust when one is pressed, the thread between
 * the three steps, the film of the app in the middle phone (2.11). Nothing fades in on scroll. With "reduce motion"
 * nothing moves.
 */

:root {
	--nx-bg: #0C0B0D; --nx-bg2: #121014; --nx-card: rgba(255, 255, 255, .035); --nx-card2: #1C1A1F;
	--nx-line: rgba(255, 255, 255, .09); --nx-line2: rgba(255, 255, 255, .16);
	--nx-gold: #E6CF7C; --nx-goldsoft: rgba(230, 207, 124, .12); --nx-goldline: rgba(230, 207, 124, .45);
	--nx-t1: #F4F1EA; --nx-t2: #B8B3AA; --nx-t3: #8F8981;
	--nx-serif: var(--wp--preset--font-family--caslon), Georgia, serif;
	--nx-sans: var(--wp--preset--font-family--figtree), system-ui, sans-serif;
	--nx-wrap: 1240px;
}

/* ---------- The page ---------- */
body.home, body:has(.af-nx-hero) { background: var(--nx-bg); }
.af-sec.af-nx {
	--af-line: var(--nx-line);
	background: var(--nx-bg); color: var(--nx-t1); padding: 120px 24px;
	font-family: var(--nx-sans);
}
.af-sec.af-nx > .af-wrap { max-width: var(--nx-wrap) !important; }
.af-sec.af-nx :is(h1, h2) { font-family: var(--nx-serif); font-weight: 400; text-transform: none; letter-spacing: -.014em; color: var(--nx-t1); }
.af-sec.af-nx h2 { font-size: clamp(2.3rem, 1.2rem + 3.4vw, 3.75rem) !important; line-height: 1.05 !important; }
.af-sec.af-nx :is(h1, h2, .af-nx-quote) em { font-style: italic; color: var(--nx-gold); }
.af-sec.af-nx .af-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .2em; color: var(--nx-gold); margin-bottom: 0; }
.af-sec.af-nx .af-lead { color: var(--nx-t2); font-size: clamp(1.05rem, .95rem + .4vw, 1.1875rem); line-height: 1.55; }
.af-sec.af-nx .af-more a, .af-sec.af-nx a.af-nx-lnk { color: var(--nx-gold); font-weight: 700; text-decoration: none; }
.af-sec.af-nx .af-more a:hover { text-decoration: underline; }
.af-sec.af-nx .af-nx-head { text-align: center; max-width: 820px; margin: 0 auto 60px !important; }
.af-sec.af-nx .af-nx-head h2 { margin: 14px 0 16px !important; }
.af-sec.af-nx .af-nx-head .af-lead { margin: 0 auto !important; max-width: 700px; }
.af-sec.af-nx--alt, .af-nx-how, .af-nx-results, .af-nx-faq { background: var(--nx-bg2) !important; }
.af-sec.af-nx + .af-sec.af-nx { border-top: 1px solid var(--nx-line); }

/* ---------- Buttons ---------- */
.af-sec.af-nx .wp-block-button__link, .af-nx-header .wp-block-button__link {
	font-family: var(--nx-sans); font-weight: 700; letter-spacing: 0; border-radius: 999px;
	min-height: 52px; padding: 0 26px; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	transition: none;
}
.af-sec.af-nx .af-btn-big > .wp-block-button__link { min-height: 62px; padding: 0 30px; font-size: 17.5px; }
/* The gold button: the brand's gradient, a thin light edge, and the ring of gold light going round it (noir.js turns it). */
.af-gold > .wp-block-button__link, .af-gold > .wp-block-button__link:hover {
	position: relative; isolation: isolate;
	background: linear-gradient(180deg, #F2DE94, #CFB25A) !important; background-image: linear-gradient(180deg, #F2DE94, #CFB25A) !important;
	color: #1A1708 !important; filter: none !important;
	box-shadow: 0 0 0 1px rgba(255, 236, 170, .5) inset, 0 14px 40px rgba(214, 184, 92, .32) !important;
}
@property --af-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.af-gold > .wp-block-button__link::before {
	content: ""; position: absolute; inset: -3px; border-radius: inherit; padding: 2px; pointer-events: none;
	background: conic-gradient(from var(--af-ang), transparent 0 70%, #FFF6D2 80%, #E6CF7C 86%, transparent 92%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	animation: af-ring 3.6s linear infinite; animation-play-state: paused;
}
.af-gold.is-on > .wp-block-button__link::before { animation-play-state: running; }
@keyframes af-ring { to { --af-ang: 360deg; } }
/* The arrow in its small circle, on the large gold buttons. */
.af-sec.af-nx .af-btn-big.af-gold > .wp-block-button__link::after {
	content: "→"; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
	background: rgba(26, 23, 8, .14); font-size: 16px; margin-right: -12px;
}
/* The second button: a quiet outline. */
.af-sec.af-nx .is-style-outline > .wp-block-button__link, .af-nx-header .is-style-outline > .wp-block-button__link {
	background: rgba(255, 255, 255, .03) !important; color: var(--nx-t1) !important; border: 1px solid var(--nx-line2) !important; box-shadow: none !important;
}
/* Gold dust, when a gold button is pressed (noir.js). */
.af-dust { position: fixed; z-index: 1000; border-radius: 50%; background: #F2DE94; box-shadow: 0 0 8px rgba(242, 222, 148, .9); pointer-events: none; }

/* ---------- Header ---------- */
.af-header.af-nx-header { padding: 14px 24px !important; border-bottom: 1px solid var(--nx-line); }
.af-header.af-nx-header::before { background: rgba(12, 11, 13, .92); }
.af-nx-header > .alignwide { max-width: 1300px !important; margin-inline: auto !important; gap: 24px; }
.af-nx-header .af-nx-logo { margin: 0; flex: none; }
.af-nx-header .af-nx-logo img { width: 124px !important; height: auto; display: block; }
.af-nx-header .af-nav { flex: 1; }
.af-nx-header .af-nav .wp-block-navigation__container { gap: 34px; }
.af-nx-header .wp-block-navigation a { font-family: var(--nx-sans); font-size: 15.5px; font-weight: 600; color: var(--nx-t2); }
.af-nx-header .wp-block-navigation a:hover { color: var(--nx-gold); }
.af-nx-header__right { gap: 20px; flex: none; }
.af-nx-header .af-header__cta { gap: 12px; flex-wrap: nowrap; }
.af-nx-header .af-header__cta .wp-block-button__link { min-height: 46px; padding: 0 20px; font-size: 15px; color: var(--nx-t1); }
.af-nx-header .af-gold > .wp-block-button__link { color: #1A1708 !important; }
@media (max-width: 1240px) {
	.af-nx-header .af-nav .wp-block-navigation__container { gap: 22px; }
	.af-nx-header .af-nx-logo img { width: 104px !important; }
}
@media (max-width: 1100px) { .af-nx-header .af-nx-acc { display: none; } }
@media (max-width: 781px) {
	.af-header.af-nx-header { padding: 10px 16px !important; }
	.af-nx-header .af-nx-logo img { width: 78px !important; }
	.af-nx-header .af-nx-start { display: none; }
}

/* ---------- Hero ---------- */
.af-sec.af-nx-hero { padding: 40px 24px 90px; overflow: hidden; background: radial-gradient(800px 640px at 78% 45%, rgba(230, 207, 124, .13), transparent 65%), var(--nx-bg); }
.af-nx-hero .af-nx-hero__cols { display: grid !important; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.af-nx-hero h1 { font-size: clamp(3rem, 1.2rem + 5.4vw, 6rem) !important; line-height: .96 !important; margin: 22px 0 26px !important; }
.af-nx-hero .af-lead { max-width: 560px; }
.af-nx-hero .af-nx-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px !important; }
.af-nx-ticks { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 16px !important; font-size: 14px; color: var(--nx-t3); }
.af-nx-ticks li::before { content: "✓ "; color: var(--nx-gold); font-weight: 800; }
.af-nx-stats { display: flex !important; margin-top: 56px !important; border-top: 1px solid var(--nx-line); }
.af-nx-stats p { flex: 1; margin: 0 !important; padding: 22px 22px 0 0; font-size: 14px; line-height: 1.3; color: var(--nx-t3); }
.af-nx-stats p + p { border-left: 1px solid var(--nx-line); padding-left: 22px; }
.af-nx-stats strong { display: block; font-family: var(--nx-serif); font-weight: 400; font-size: 44px; line-height: 1; color: var(--nx-gold); margin-bottom: 8px; }
/* Maria in the logo's ring of gold dots. */
.af-nx-hero__media { position: relative; aspect-ratio: 1; max-width: 640px; width: 100%; justify-self: end; }
.af-nx-hero__media::before {
	content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
	background: url(images/ring.png) center / contain no-repeat;
}
.af-nx-hero__media .af-nx-hero__photo { position: absolute; inset: 12.5%; margin: 0 !important; border-radius: 50%; overflow: hidden; box-shadow: 0 0 120px rgba(230, 207, 124, .22), 0 0 0 2px rgba(230, 207, 124, .55); }
.af-nx-hero__media .af-nx-hero__photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.af-nx-hero__media .af-nx-hero__photo::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 40px rgba(12, 11, 13, .55); pointer-events: none; }
/* 2.11: Maria's whole photo on the dark (the cream of the original taken out, the gold line kept): no ring, no circle;
   it melts into the page at the right and at the bottom. */
.af-nx-hero__media--full { aspect-ratio: auto; max-width: 600px; margin-right: -24px !important; }
.af-nx-hero__media--full::before { display: none; }
.af-nx-hero__media--full .af-nx-hero__photo { position: relative; inset: auto; border-radius: 0; overflow: visible; box-shadow: none; }
.af-nx-hero__media--full .af-nx-hero__photo::after { display: none; }
.af-nx-hero__media--full .af-nx-hero__photo img {
	width: 100%; height: auto; border-radius: 0;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 84%, transparent), linear-gradient(to bottom, transparent, #000 6%, #000 80%, transparent);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(to right, transparent, #000 8%, #000 84%, transparent), linear-gradient(to bottom, transparent, #000 6%, #000 80%, transparent);
	mask-composite: intersect;
}
.af-sec.af-nx-hero:has(.af-nx-hero__media--full) { background: var(--nx-bg); } /* the photo brings its own light */

/* ---------- How it works ---------- */
.af-nx-steps { position: relative; display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.af-nx-step { position: relative; z-index: 1; padding: 40px 32px 36px; border-radius: 28px; background: var(--nx-card); border: 1px solid var(--nx-line); }
.af-nx-step .af-nx-step__n { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-family: var(--nx-serif); font-size: 26px; color: var(--nx-gold); background: #141216; border: 1px solid var(--nx-goldline); box-shadow: 0 0 0 8px var(--nx-bg2); margin-bottom: 22px !important; position: relative; z-index: 2; }
.af-nx-step .af-nx-step__when { font-family: var(--nx-serif); font-style: italic; color: var(--nx-gold); font-size: 17px; margin-bottom: 8px !important; }
.af-nx-step h3 { font-family: var(--nx-sans) !important; font-weight: 700; font-size: 21px !important; margin-bottom: 8px !important; color: var(--nx-t1); }
.af-nx-step p:last-child { color: var(--nx-t2); font-size: 16px; }
/* The gold thread between the three numbers (an SVG put in by noir.js, drawn as the page scrolls). */
.af-nx-thread { position: absolute; z-index: 0; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.af-nx-thread path { fill: none; stroke: url(#af-nx-tg); stroke-width: 1.5; stroke-linecap: round; }
.af-nx-pwa { display: flex !important; gap: 22px; align-items: center; margin-top: 24px !important; padding: 24px 30px; border-radius: 24px; border: 1px dashed var(--nx-goldline); background: rgba(230, 207, 124, .05); }
.af-nx-pwa .af-nx-pwa__icon { font-size: 30px; flex: none; }
.af-nx-pwa__text p { color: var(--nx-t2); font-size: 15px; }
.af-nx-pwa__text p strong { color: var(--nx-t1); font-size: 17px; }
.af-nx-pwa__text .af-nx-pwa__how { margin-top: 6px !important; }
.af-nx-pwa__text .af-nx-pwa__how strong { color: var(--nx-gold); font-size: 15px; }

/* ---------- The app ---------- */
.af-nx-stage { position: relative; height: 620px; margin-bottom: 70px !important; }
.af-nx-stage::before { content: ""; position: absolute; left: 50%; top: 40px; width: 900px; height: 900px; max-width: 120%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(230, 207, 124, .16), transparent 60%); pointer-events: none; }
.af-nx-stage .af-nx-phone { position: absolute; bottom: 0; margin: 0 !important; border-radius: 44px; padding: 10px; background: linear-gradient(160deg, #3B3942, #141318); box-shadow: 0 50px 100px rgba(0, 0, 0, .65), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.af-nx-stage .af-nx-phone img { display: block; width: 100%; height: auto; border-radius: 35px; }
/* 2.11: the film of the app over the middle phone's photo, once it plays. */
.af-nx-stage .af-nx-film { position: absolute; left: 10px; top: 10px; width: calc(100% - 20px); height: calc(100% - 20px); object-fit: cover; border-radius: 35px; background: #0C0B0D; opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.af-nx-stage .af-nx-phone.is-film .af-nx-film { opacity: 1; }
.af-nx-stage .af-nx-phone--c { width: 290px; left: 50%; transform: translateX(-50%); z-index: 3; }
.af-nx-stage .af-nx-phone--l { width: 230px; left: calc(50% - 400px); bottom: 30px; transform: rotate(-7deg); opacity: .85; }
.af-nx-stage .af-nx-phone--r { width: 230px; right: calc(50% - 400px); bottom: 30px; transform: rotate(7deg); opacity: .85; }
.af-nx-fgs { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.af-nx-fg { border-radius: 28px; background: var(--nx-card); border: 1px solid var(--nx-line); padding: 28px 24px; }
.af-nx-fg h3 { font-family: var(--nx-serif) !important; font-weight: 400 !important; font-size: 24px !important; color: var(--nx-gold) !important; margin-bottom: 10px !important; }
.af-nx-fi { list-style: none; padding: 0; margin: 0; }
.af-nx-fi li { position: relative; padding: 12px 0 12px 52px; border-top: 1px solid var(--nx-line); font-size: 13.5px; line-height: 1.4; color: var(--nx-t3); min-height: 62px; }
.af-nx-fi li:first-child { border-top: 0; }
.af-nx-fi li strong { font-size: 15.5px; color: var(--nx-t1); font-weight: 700; }
.af-nx-fi__e { position: absolute; left: 0; top: 12px; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--nx-goldsoft); font-size: 18px; }

/* ---------- Results ---------- */
.af-nx-results .af-rv3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.af-rv3__card { position: relative; display: flex; flex-direction: column; border-radius: 28px; padding: 34px 30px 28px; background: var(--nx-card); border: 1px solid var(--nx-line); margin: 0; }
.af-rv3__q { font-family: var(--nx-serif); font-size: 90px; line-height: .6; height: 40px; color: var(--nx-gold); }
.af-rv3__card blockquote { margin: 0; padding: 0; border: 0; flex: 1; }
.af-rv3__card blockquote p { font-family: var(--nx-serif); font-size: 20px; line-height: 1.45; color: var(--nx-t1); margin: 0; }
.af-rv3__who { display: flex; gap: 14px; align-items: center; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--nx-line); }
.af-rv3__av { width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: linear-gradient(135deg, #F3E3A6, #C9AE55); color: #1A1708; font-family: var(--nx-serif); font-size: 20px; }
.af-rv3__av img { width: 100%; height: 100%; object-fit: cover; }
.af-rv3__who b { display: block; font-size: 16px; color: var(--nx-t1); }
.af-rv3__res { display: inline-block; margin-top: 4px; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #7FD1A8; background: rgba(127, 209, 168, .12); }
.af-nx-results .af-nx-more { text-align: center; margin-top: 30px !important; }

/* ---------- Plans: the comparison ---------- */
.af-pc { --c: 1.5fr 1fr 1fr 1.3fr; position: relative; border-radius: 32px; background: var(--nx-card); border: 1px solid var(--nx-line); }
.af-pc.af-pc--nolight { --c: 1.6fr 1fr 1.3fr; }
.af-pc__heads { display: grid !important; grid-template-columns: var(--c); align-items: stretch; }
.af-pc__h { padding: 34px 24px 28px; text-align: center; border-bottom: 1px solid var(--nx-line); display: flex; flex-direction: column; }
.af-pc__h0 { justify-content: flex-end; text-align: left; }
.af-pc__h0 .af-pc__t { font-family: var(--nx-serif); font-size: 30px; line-height: 1.1; color: var(--nx-t1); margin-bottom: 8px !important; }
.af-pc__h0 .af-pc__d { font-size: 14px; color: var(--nx-t3); max-width: 250px; }
.af-pc .af-pc__pn { font-weight: 800; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: var(--nx-t2); }
.af-pc .af-pc__pp { font-family: var(--nx-serif); font-size: 30px; margin: 14px 0 4px !important; color: var(--nx-t1); line-height: 1; }
.af-pc .af-pc__pp b { font-weight: 400; font-size: 64px; line-height: 1; }
.af-pc .af-pc__pd { font-size: 13.5px; color: var(--nx-t3); min-height: 20px; margin-bottom: 20px !important; }
.af-pc .af-pc__btn { margin-top: auto !important; }
.af-pc .af-pc__btn .wp-block-button, .af-pc .af-pc__btn .wp-block-button__link { width: 100%; }
.af-pc__el { position: relative; background: linear-gradient(180deg, rgba(230, 207, 124, .10), rgba(230, 207, 124, .05)); border: 1px solid var(--nx-goldline); border-bottom-color: var(--nx-line); border-radius: 28px 28px 0 0; margin-top: -22px; padding-top: 50px; box-shadow: 0 -20px 60px rgba(230, 207, 124, .10); }
.af-pc__el .af-pc__pp { color: var(--nx-gold); }
.af-pc__el .af-pc__pp b { font-size: 72px; }
.af-pc__el .af-pc__tag { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); height: 32px; padding: 0 16px; border-radius: 999px; background: var(--nx-gold); color: #1A1708; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; display: inline-flex; align-items: center; white-space: nowrap; margin: 0 !important; }
.af-pc__el .af-seats { justify-content: center; font-size: 12.5px; color: var(--nx-t3); margin: 12px 0 0 !important; }
.af-pc-packs { display: grid; gap: 6px; margin: 0 0 18px; text-align: left; padding: 0; list-style: none; }
.af-pc-packs li { display: grid; grid-template-columns: 56px 1fr auto 46px; gap: 8px; align-items: center; padding: 9px 12px; border-radius: 12px; background: rgba(255, 255, 255, .04); font-size: 13.5px; }
.af-pc-packs li span { font-weight: 700; }
.af-pc-packs li b { font-weight: 700; color: var(--nx-t1); }
.af-pc-packs li em { font-style: normal; color: var(--nx-t3); font-size: 12.5px; }
.af-pc-packs li i { font-style: normal; color: #1A1708; background: var(--nx-gold); border-radius: 999px; font-weight: 800; font-size: 11.5px; text-align: center; padding: 2px 0; }
/* The rows: an ordinary table, the same columns as the heads. */
.af-pc .af-pc__table { margin: 0 !important; }
.af-pc .af-pc__table table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; border: 0; }
.af-pc .af-pc__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.af-pc .af-pc__table td { padding: 14px 22px; border: 0; border-bottom: 1px solid var(--nx-line); text-align: center; vertical-align: middle; font-size: 14.5px; line-height: 1.35; color: var(--nx-t2); }
.af-pc .af-pc__table td:first-child { text-align: left; font-size: 15px; font-weight: 500; color: var(--nx-t2); padding-left: 26px; }
/* The same widths as the heads above (1.5 : 1 : 1 : 1.3, or 1.6 : 1 : 1.3 without Light). */
/* 2.13: every row of the table on the same grid as the plans' heads above it (the table's own column widths drifted
   from the heads by a few percent, so the Elite column's gold frame did not run straight down). */
.af-pc .af-pc__table table, .af-pc .af-pc__table tbody { display: block; width: 100%; }
.af-pc .af-pc__table tr { display: grid; grid-template-columns: var(--c); }
.af-pc .af-pc__table td { display: flex; flex-direction: column; justify-content: center; min-width: 0; box-sizing: border-box; }
.af-pc .af-pc__table td:first-child { align-items: flex-start; }
.af-pc .af-pc__table :is(tr, td, th) { background: transparent; }
.af-pc .af-pc__table td em { display: block; font-style: normal; font-size: 12.5px; color: var(--nx-t3); line-height: 1.3; }
.af-pc .af-pc__table td:last-child { background: rgba(230, 207, 124, .05); border-left: 1px solid var(--nx-goldline); border-right: 1px solid var(--nx-goldline); color: var(--nx-t1); font-weight: 600; }
.af-pc .af-pc__table td:last-child em { color: var(--nx-t2); font-weight: 500; }
.af-pc .af-pc__table tr:last-child td { border-bottom: 0; padding-bottom: 26px; }
.af-pc .af-pc__table tr:last-child td:last-child { border-bottom: 1px solid var(--nx-goldline); border-radius: 0 0 28px 28px; }
.af-pc .af-pc__table tr.is-group td:first-child { padding: 26px 26px 10px; font-family: var(--nx-serif); font-size: 21px; font-weight: 400; color: var(--nx-gold); text-align: left; white-space: nowrap; overflow: visible; }
.af-pc .af-pc__table tr.is-group td strong { font-weight: 400; }
.af-pc .af-pc__table col, .af-pc .af-pc__table colgroup { display: none; }
.af-pc__fine { list-style: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 26px; margin: 22px 0 0 !important; font-size: 13px; color: var(--nx-t3); }
.af-pc__fine li::before { content: "· "; color: var(--nx-gold); }
.af-nx-extra { display: grid !important; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 26px !important; }
.af-nx-extra > :only-child { grid-column: 1 / -1; } /* 2.18: the Maintenance Plan alone (no consultation card) */
.af-nx-xc { display: flex !important; align-items: center; justify-content: space-between; gap: 20px; padding: 26px 30px; border-radius: 24px; border: 1px solid var(--nx-line); background: var(--nx-card); }
.af-nx-xc .af-nx-xc__n { font-size: 17px; color: var(--nx-t1); }
.af-nx-xc .af-nx-xc__n b { font-family: var(--nx-serif); font-weight: 400; font-size: 22px; color: var(--nx-gold); }
.af-nx-xc .af-plan2__price { font-family: var(--nx-serif); font-size: 22px; color: var(--nx-gold); margin: 2px 0 0 !important; }
.af-nx-xc .af-plan2__price small { font-family: var(--nx-sans); font-size: 13px; color: var(--nx-t3); }
.af-nx-xc .af-nx-xc__d { font-size: 14.5px; color: var(--nx-t2); margin-top: 4px !important; max-width: 380px; }
.af-nx-xc .af-nx-xc__lnk a { color: var(--nx-gold); font-weight: 700; white-space: nowrap; text-decoration: none; }
.af-nx-xc .wp-block-buttons { flex: none; }
/* On phones: one card per plan, side by side, swiped with a finger (built by noir.js from the heads and the table). */
.af-pc-cards, .af-pc-dots { display: none; }

/* ---------- About Maria ---------- */
.af-nx-about { display: grid !important; grid-template-columns: 520px 1fr; gap: 100px; align-items: center; }
.af-nx-about__media { position: relative; min-height: 640px; }
.af-nx-about__media .af-nx-arch { position: absolute; left: 0; top: 0; width: 460px; height: 600px; margin: 0 !important; }
.af-nx-about__media .af-nx-arch img { width: 100%; height: 100%; object-fit: cover; object-position: center top; border-radius: 230px 230px 30px 30px !important; display: block; }
.af-nx-about__media .af-nx-tv { position: absolute; right: 0; bottom: 0; display: flex !important; gap: 14px; align-items: center; padding: 12px 18px 12px 12px; border-radius: 22px; background: var(--nx-card2); border: 1px solid var(--nx-line2); box-shadow: 0 24px 50px rgba(0, 0, 0, .3); }
.af-nx-tv .af-media__photo { margin: 0 !important; flex: none; }
.af-nx-tv .af-media__photo img { width: 84px; height: 84px; object-fit: cover; border-radius: 14px; display: block; }
.af-nx-tv p { font-size: 13px; color: var(--nx-t3); line-height: 1.4; }
.af-nx-tv p strong { font-size: 15px; color: var(--nx-t1); }
.af-nx-about__text .af-nx-quote { font-family: var(--nx-serif); font-size: clamp(1.7rem, 1rem + 1.8vw, 2.5rem); line-height: 1.22; margin: 22px 0 24px !important; color: var(--nx-t1); }
.af-nx-about__text .af-lead { font-size: 18px; }
.af-nx-creds { list-style: none; padding: 0; margin: 26px 0 30px !important; display: grid; gap: 12px; }
.af-nx-creds li { display: flex; gap: 14px; align-items: center; font-size: 16.5px; color: var(--nx-t1); }
.af-nx-creds li::before { content: "✦"; color: var(--nx-gold); }

/* ---------- Questions ---------- */
.af-nx-faq__cols { display: grid !important; grid-template-columns: 400px 1fr; gap: 90px; }
.af-nx-faq__intro h2 { margin: 14px 0 22px !important; }
.af-nx-faq .af-faq { display: grid; gap: 12px; }
.af-nx-faq .af-faq__item { padding: 0; border-radius: 22px; background: var(--nx-card); border: 1px solid var(--nx-line); }
.af-nx-faq .af-faq__item summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 24px 28px; font-size: 18.5px; font-weight: 600; color: var(--nx-t1); cursor: pointer; list-style: none; }
.af-nx-faq .af-faq__item summary::-webkit-details-marker { display: none; }
.af-nx-faq .af-faq__item summary i { width: 34px; height: 34px; flex: none; margin: 0; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--nx-line2) !important; color: var(--nx-gold); font-style: normal; transform: none !important; }
.af-nx-faq .af-faq__item summary i::before { content: "+"; font-size: 18px; }
.af-nx-faq .af-faq__item[open] summary i::before { content: "–"; }
.af-nx-faq .af-faq__answer { padding: 0 28px 24px; font-size: 15.5px; color: var(--nx-t2); max-width: 720px; }

/* ---------- Closing call (every page) ---------- */
.af-sec.af-nx-closing { text-align: center; padding: 130px 24px; background: radial-gradient(800px 400px at 50% 100%, rgba(230, 207, 124, .18), transparent 70%), var(--nx-bg) !important; color: var(--nx-t1); }
.af-nx-closing .af-nx-closing__logo { margin: 0 auto 28px !important; }
.af-nx-closing .af-nx-closing__logo img { width: 260px; height: auto; display: block; margin: 0 auto; }
.af-nx-closing h2 { font-size: clamp(2.4rem, 1rem + 4vw, 4.375rem) !important; max-width: 980px; margin: 0 auto !important; }
.af-nx-closing .af-micro { font-size: 18px !important; color: var(--nx-t2) !important; margin: 16px 0 36px !important; }
.af-nx-closing .wp-block-buttons { justify-content: center; }
.af-sec.af-nx-closing > .af-wrap { display: block !important; }
.af-nx-closing .af-hero2__cta { margin-top: 0 !important; }

/* ---------- Footer ---------- */
.af-footer { background: var(--nx-bg) !important; border-top: 1px solid var(--nx-line); }
.af-footer .af-nx-flogo { margin: 0 0 14px !important; }
.af-footer .af-nx-flogo img { width: 130px !important; height: auto; display: block; }

/* ---------- Tablets and phones ---------- */
@media (max-width: 1100px) {
	.af-nx-fgs { grid-template-columns: repeat(2, 1fr); }
	.af-nx-about { grid-template-columns: 420px 1fr; gap: 56px; }
	.af-nx-about__media .af-nx-arch { width: 380px; height: 500px; }
	.af-nx-about__media { min-height: 540px; }
	.af-nx-faq__cols { grid-template-columns: 300px 1fr; gap: 50px; }
	.af-nx-stage .af-nx-phone--l { left: calc(50% - 330px); }
	.af-nx-stage .af-nx-phone--r { right: calc(50% - 330px); }
}
@media (max-width: 900px) {
	.af-sec.af-nx { padding: 80px 16px; }
	.af-nx-hero .af-nx-hero__cols { grid-template-columns: 1fr; gap: 28px; }
	.af-nx-hero__media { justify-self: center; max-width: 440px; }
	.af-nx-hero__media--full { justify-self: stretch; max-width: none; margin: 0 -16px !important; }
	.af-nx-hero__media--full .af-nx-hero__photo img { aspect-ratio: 66 / 100; object-fit: cover; object-position: 100% 0; } /* the dark left part is left out */
	.af-nx-steps { grid-template-columns: 1fr; gap: 16px; }
	.af-nx-step { padding: 26px 24px 26px 96px; }
	.af-nx-step .af-nx-step__n { position: absolute; left: 22px; top: 24px; }
	.af-nx-about { grid-template-columns: 1fr; gap: 40px; }
	.af-nx-about__media { min-height: 0; max-width: 460px; margin: 0 auto !important; width: 100%; }
	.af-nx-about__media .af-nx-arch { position: relative; width: 100%; height: auto; aspect-ratio: 46 / 60; }
	.af-nx-about__media .af-nx-tv { right: -6px; bottom: -18px; }
	.af-nx-faq__cols { grid-template-columns: 1fr; gap: 28px; }
	.af-nx-extra { grid-template-columns: 1fr; }
	/* The comparison becomes cards. */
	.af-pc.has-cards { border: 0; background: none; border-radius: 0; }
	.af-pc.has-cards > .af-pc__heads, .af-pc.has-cards > .af-pc__table { display: none !important; }
	.af-pc.has-cards > .af-pc-cards { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 26px 16px 14px; margin: 0 -16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
	.af-pc-cards::-webkit-scrollbar { display: none; }
	.af-pc-card { flex: 0 0 86%; scroll-snap-align: center; border-radius: 26px; background: var(--nx-card); border: 1px solid var(--nx-line); padding: 26px 20px 22px; position: relative; }
	.af-pc-card.is-el { border-color: var(--nx-goldline); background: linear-gradient(180deg, rgba(230, 207, 124, .10), rgba(230, 207, 124, .03)); box-shadow: 0 -10px 40px rgba(230, 207, 124, .10); }
	.af-pc-card .af-pc__h { padding: 0 0 18px; border: 0; margin: 0; background: none; box-shadow: none; border-radius: 0; }
	.af-pc-card .af-pc__tag { top: -42px !important; }
	.af-pc-card dl { margin: 0; }
	.af-pc-card dt { margin: 0; padding: 18px 0 6px; font-family: var(--nx-serif); font-size: 19px; color: var(--nx-gold); border-top: 1px solid var(--nx-line); }
	.af-pc-card dd { margin: 0; display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-top: 1px solid var(--nx-line); font-size: 14px; line-height: 1.35; }
	.af-pc-card dt + dd { border-top: 0; }
	.af-pc-card dd > span:first-child { color: var(--nx-t3); flex: 1 1 55%; }
	.af-pc-card dd > span:last-child { color: var(--nx-t1); font-weight: 600; text-align: right; flex: 1 1 45%; }
	.af-pc-card dd > span:last-child em { display: block; font-style: normal; font-weight: 500; font-size: 12px; color: var(--nx-t3); }
	.af-pc-card dd.is-no > span:last-child { color: var(--nx-t3); font-weight: 400; }
	.af-pc.has-cards > .af-pc-dots { display: flex; justify-content: center; gap: 8px; margin-top: 4px; }
	.af-pc-dots button { width: auto; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--nx-line2); background: transparent; color: var(--nx-t2); font: 700 12.5px/1 var(--nx-sans); }
	.af-pc-dots button.is-on { background: var(--nx-gold); color: #1A1708; border-color: var(--nx-gold); }
	.af-nx-xc { flex-direction: column; align-items: flex-start; }
	.af-nx-results .af-rv3 { grid-template-columns: 1fr; }
	.af-rv3__card blockquote p { font-size: 18px; }
}
@media (max-width: 781px) {
	.af-nx-fgs { grid-template-columns: 1fr; }
	.af-nx-stage { height: 470px; margin-bottom: 40px !important; }
	.af-nx-stage .af-nx-phone--c { width: 230px; }
	.af-nx-stage .af-nx-phone--l, .af-nx-stage .af-nx-phone--r { width: 170px; bottom: 20px; }
	.af-nx-stage .af-nx-phone--l { left: calc(50% - 200px); }
	.af-nx-stage .af-nx-phone--r { right: calc(50% - 200px); }
	.af-nx-stats strong { font-size: 34px; }
	.af-nx-stats p { padding-right: 12px; font-size: 13px; }
	.af-nx-stats p + p { padding-left: 12px; }
	.af-nx-pwa { flex-direction: column; align-items: flex-start; padding: 22px; }
	.af-nx-hero .af-nx-hero__cta .wp-block-button { flex: 1 1 100%; }
	.af-nx-hero .af-nx-hero__cta .wp-block-button__link { width: 100%; }
	.af-nx-closing .af-nx-closing__logo img { width: 170px; }
	.af-sec.af-nx-closing { padding: 90px 16px; }
}
@media (max-width: 420px) {
	.af-nx-stage .af-nx-phone--l { left: -10px; }
	.af-nx-stage .af-nx-phone--r { right: -10px; }
}
@media (prefers-reduced-motion: reduce) {
	.af-gold > .wp-block-button__link::before { animation: none; background: none; }
}

/* The closing call already on the other pages (built before 2.10, pink): the same dark look, without rebuilding them. */
.af-sec.af-sec--blush.af-closing { text-align: center; padding: 110px 24px; background: radial-gradient(800px 400px at 50% 100%, rgba(230, 207, 124, .18), transparent 70%), var(--nx-bg) !important; color: var(--nx-t1) !important; }
.af-sec.af-sec--blush.af-closing :is(h2, .af-micro) { color: var(--nx-t1) !important; font-family: var(--nx-serif); text-transform: none; }
.af-sec.af-sec--blush.af-closing .af-micro { font-family: var(--nx-sans); color: var(--nx-t2) !important; font-size: 17px; }
.af-sec.af-sec--blush.af-closing .wp-block-buttons { justify-content: center; }
.af-nx-faq .af-faq, .af-nx-faq .af-faq__item { border-top: 1px solid var(--nx-line); }
.af-nx-faq .af-faq { border: 0 !important; }

/* =====================================================================================================================
   2.12: every public page in the same look (body.af-noir, set by functions.php; never on the client area).
   The pages keep their own blocks: these rules only bring them to the near-black, the serif titles with the gold
   italic word, the Noir buttons, cards and questions.
   ===================================================================================================================== */
body.af-noir { background: var(--nx-bg); color: var(--nx-t1); }
body.af-noir main { background: var(--nx-bg); }
/* The old backgrounds, mapped on the two darks of the first page (the light and pink ones too). */
body.af-noir main :is(.has-ink-background-color, .has-night-background-color, .af-sec--night) { background-color: var(--nx-bg) !important; }
body.af-noir main :is(.has-base-background-color, .af-sec--base, .af-sec--ink) { background-color: var(--nx-bg2) !important; }
body.af-noir main :is(.has-blush-background-color, .has-light-background-color, .has-white-background-color, .af-sec--blush).alignfull { background-color: var(--nx-bg2) !important; color: var(--nx-t1) !important; --af-line: var(--nx-line); }
body.af-noir main :is(.has-blush-background-color, .has-light-background-color, .has-white-background-color, .af-sec--blush) a:not(.wp-element-button) { color: var(--nx-gold) !important; }
body.af-noir main :is(.has-blush-background-color, .has-light-background-color, .has-white-background-color, .af-sec--blush) :is(h1, h2, h3, p, li) { color: inherit; }
body.af-noir main .alignfull:not(.af-nx) + .alignfull:not(.af-nx) { border-top: 1px solid var(--nx-line); }
body.af-noir main .alignfull.has-background { padding-top: clamp(64px, 7vw, 110px) !important; padding-bottom: clamp(64px, 7vw, 110px) !important; }

/* Titles: serif, never in capitals, one word in gold italic (<em>). */
body.af-noir main :is(h1, h2, h3, h4):not(.af-nx *) { text-transform: none; }
body.af-noir main :is(h1, h2):not(.af-nx *) { font-family: var(--nx-serif); font-weight: 400; letter-spacing: -.014em; color: var(--nx-t1); }
body.af-noir main h1:not(.af-nx *) { font-size: clamp(2.6rem, 1.3rem + 4vw, 4.6rem) !important; line-height: 1.02 !important; }
body.af-noir main h2:not(.af-nx *) { font-size: clamp(2rem, 1.2rem + 2.5vw, 3.2rem) !important; line-height: 1.06 !important; }
body.af-noir main h3:not(.af-nx *):not(.af-sec h3) { font-family: var(--nx-serif); font-weight: 400; letter-spacing: -.005em; font-size: 1.5rem !important; line-height: 1.2; color: var(--nx-t1); }
body.af-noir main :is(h1, h2, h3) em { font-style: italic; color: var(--nx-gold); }
body.af-noir main .af-eyebrow { font-family: var(--nx-sans); font-size: 12px !important; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--nx-gold); }
body.af-noir main .af-lead { color: var(--nx-t2); font-size: clamp(1.05rem, .95rem + .4vw, 1.1875rem); line-height: 1.55; }
body.af-noir main :is(p, li):not(.af-nx *) { color: inherit; }
body.af-noir main .af-muted, body.af-noir main .af-micro { color: var(--nx-t3); }
body.af-noir main a:not(.wp-element-button):not(.wp-block-button__link) { color: var(--nx-gold); }

/* Buttons: the gold one (with its ring, noir.js) and the quiet outline. */
body.af-noir main .wp-block-button__link {
	font-family: var(--nx-sans); font-weight: 700; letter-spacing: 0; border-radius: 999px;
	min-height: 52px; padding: 0 26px; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	transition: none;
}
body.af-noir main .is-style-outline > .wp-block-button__link {
	background: rgba(255, 255, 255, .03) !important; color: var(--nx-t1) !important; border: 1px solid var(--nx-line2) !important; box-shadow: none !important;
}

/* Cards and boxes of the older sections. */
body.af-noir main :is(.af-card, .af-plan, .af-story, .af-box, .af-note, .wp-block-group.has-border-color):not(.af-nx *) { border-color: var(--nx-line) !important; }
body.af-noir main .wp-block-group.alignfull:not(.af-nx) .wp-block-group.has-background:not(.alignfull) {
	background-color: var(--nx-card) !important; border: 1px solid var(--nx-line); border-radius: 26px; color: var(--nx-t1);
}
body.af-noir main .af-photo, body.af-noir main .wp-block-image.af-about__photo img { border-radius: 28px; }

/* Questions written as "details" blocks: the same rows as on the first page. */
body.af-noir main .wp-block-details:not(.af-nx *) {
	padding: 0; margin: 0 0 12px !important; border-radius: 22px; background: var(--nx-card); border: 1px solid var(--nx-line);
}
body.af-noir main .wp-block-details:not(.af-nx *) summary {
	display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 26px; list-style: none;
	font-family: var(--nx-sans); font-size: 18px; font-weight: 600; color: var(--nx-t1); cursor: pointer;
}
body.af-noir main .wp-block-details:not(.af-nx *) summary::-webkit-details-marker { display: none; }
body.af-noir main .wp-block-details:not(.af-nx *) summary::after {
	content: "+"; width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center;
	border: 1px solid var(--nx-line2); color: var(--nx-gold); font-size: 18px; font-weight: 400;
}
body.af-noir main .wp-block-details[open]:not(.af-nx *) summary::after { content: "–"; }
body.af-noir main .wp-block-details:not(.af-nx *) > :not(summary) { padding: 0 26px; color: var(--nx-t2); }
body.af-noir main .wp-block-details:not(.af-nx *) > :last-child:not(summary) { padding-bottom: 22px; }
/* The questions from the FAQ list (the plugin's [almarfit_faq]) on the other pages. */
body.af-noir main .af-faq:not(.af-nx *) { display: grid; gap: 12px; border: 0 !important; }
body.af-noir main .af-faq:not(.af-nx *) .af-faq__item { padding: 0; border-radius: 22px; background: var(--nx-card); border: 1px solid var(--nx-line) !important; }
body.af-noir main .af-faq:not(.af-nx *) .af-faq__item summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 26px; font-size: 18px; font-weight: 600; color: var(--nx-t1); cursor: pointer; list-style: none; }
body.af-noir main .af-faq:not(.af-nx *) .af-faq__item summary::-webkit-details-marker { display: none; }
body.af-noir main .af-faq:not(.af-nx *) .af-faq__item summary i { width: 34px; height: 34px; flex: none; margin: 0; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--nx-line2) !important; color: var(--nx-gold); font-style: normal; transform: none !important; }
body.af-noir main .af-faq:not(.af-nx *) .af-faq__item summary i::before { content: "+"; font-size: 18px; }
body.af-noir main .af-faq:not(.af-nx *) .af-faq__item[open] summary i::before { content: "–"; }
body.af-noir main .af-faq:not(.af-nx *) .af-faq__answer { padding: 0 26px 22px; font-size: 15.5px; color: var(--nx-t2); }

/* Lists: gold ticks instead of dots, where a list is a list of what one gets. */
body.af-noir main ul.af-ticks, body.af-noir main .af-sec ul:not(.af-nx *):not(.af-pc-packs) { list-style: none; padding-left: 0; }
body.af-noir main ul.af-ticks li, body.af-noir main .af-sec ul:not(.af-nx *):not(.af-pc-packs) li { position: relative; padding-left: 1.6em; }
body.af-noir main ul.af-ticks li::before, body.af-noir main .af-sec ul:not(.af-nx *):not(.af-pc-packs) li::before { content: "✓"; position: absolute; left: 0; color: var(--nx-gold); font-weight: 800; }

/* Forms on the public pages (the free sign-up): dark fields, a gold line when in use. */
body.af-noir main :is(input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="date"], input[type="number"], select, textarea):not(.af-nx *) {
	background: rgba(255, 255, 255, .04); color: var(--nx-t1); border: 1px solid var(--nx-line2); border-radius: 14px;
}
body.af-noir main :is(input, select, textarea):focus-visible { outline: 2px solid var(--nx-gold); outline-offset: 1px; }

/* The free sign-up on its page: the card on the dark (it was white on pink). */
body.af-noir main .af-sec--blush .af-box { background: var(--nx-card2) !important; border: 1px solid var(--nx-goldline) !important; color: var(--nx-t1) !important; border-radius: 28px; box-shadow: 0 40px 90px rgba(0, 0, 0, .45); }
body.af-noir main .af-sec--blush .af-box :is(.af-box__title, label, .af-form label, legend) { color: var(--nx-t1) !important; }
body.af-noir main .af-sec--blush .af-box__title { font-family: var(--nx-serif); font-weight: 400; font-size: 1.6rem !important; }
body.af-noir main .af-sec--blush .af-box :is(.af-check span, .af-hint, .af-elite-note, small) { color: var(--nx-t2) !important; }
body.af-noir main .af-sec--blush .af-box a:not(.wp-element-button) { color: var(--nx-gold) !important; }
body.af-noir main .af-sec--blush .af-req { color: var(--nx-gold); }
body.af-noir main .af-box :is(input, select, textarea) { color-scheme: dark; }
body.af-noir main .af-box .af-btn:not(.af-btn--ghost), body.af-noir main .af-box #wp-submit { background: linear-gradient(180deg, #F2DE94, #CFB25A) !important; color: #1A1708 !important; font-family: var(--nx-sans); font-weight: 700; }

/* Long texts (the legal pages, the questions' page): calmer titles, inside the text. */
body.af-noir main .wp-block-post-content > :is(h2, h3) { font-size: clamp(1.45rem, 1.15rem + 1vw, 1.9rem) !important; line-height: 1.2 !important; margin-top: 2.2em; }
body.af-noir main .wp-block-post-content > h3 { font-size: 1.25rem !important; }
/* Contact: the three blocks as cards. */
body.af-noir main .wp-block-columns:has(> .wp-block-column > h2.has-x-large-font-size) > .wp-block-column {
	padding: 30px 28px; border-radius: 26px; background: var(--nx-card); border: 1px solid var(--nx-line);
}
body.af-noir main h2.has-x-large-font-size { font-size: 1.6rem !important; }
body.af-noir main h2.af-h-small { font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem) !important; }
/* An article (the guide's posts): the page itself was pink, with wine letters. */
body.af-noir main.has-blush-background-color { background-color: var(--nx-bg) !important; color: var(--nx-t1) !important; }
body.af-noir main.has-blush-background-color :is(h1, h2, h3, p, li, .wp-block-post-date) { color: inherit !important; }
body.af-noir main.has-blush-background-color .wp-block-post-date { color: var(--nx-t3) !important; }
body.af-noir main.has-blush-background-color a:not(.wp-element-button) { color: var(--nx-gold) !important; }
body.af-noir main.af-prose { line-height: 1.75; }

/* =====================================================================================================================
   2.13: the opening on the logo (once per visit) and the motion of the pages (assets/motion.js, GSAP).
   ===================================================================================================================== */
.af-intro { display: none; }
html.af-intro-on .af-intro {
	position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; background: #0C0B0D; cursor: pointer;
	/* 2.15 (the audit): it takes taps only once the script runs it (.is-live); if the script never comes or fails, the
	   opening steps aside by itself and can no longer stand, invisible, over the page. */
	pointer-events: none; animation: af-intro-safe 0s step-end 6s forwards;
}
html.af-intro-on .af-intro.is-live { pointer-events: auto; }
@keyframes af-intro-safe { to { opacity: 0; visibility: hidden; pointer-events: none; } }
.af-intro__logo { position: relative; width: min(64vw, 300px); aspect-ratio: 720 / 708; }
.af-intro__logo img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; will-change: transform, opacity, clip-path; }
.af-intro__glow {
	position: absolute; width: min(150vw, 720px); aspect-ratio: 1; border-radius: 50%; opacity: 0;
	background: radial-gradient(circle, rgba(210, 176, 76, .16), rgba(210, 176, 76, .05) 38%, transparent 66%);
}
.af-intro__wave { position: absolute; width: min(60vw, 280px); aspect-ratio: 1; border-radius: 50%; border: 1.5px solid rgba(235, 213, 138, .75); opacity: 0; }
/* 2.21 (v3, §1.5): nothing waits hidden for its entrance any more (the page was black until the scripts ran). */
/* The gold word's light. */
.af-m-shine { background: linear-gradient(100deg, var(--nx-gold) 0 42%, #FFF4CC 50%, var(--nx-gold) 58% 100%) 100% 0 / 260% 100% no-repeat; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
/* Text painted by its background is painted only inside the word's box: the italic p's tail (left of the box) and
   the descenders (below it) were cut. The box is made larger by padding, the same negative margin keeps the text where it was. */
.af-m-shine { padding: .14em .14em .22em .24em; margin: 0 -.14em 0 -.24em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* The sun's dust in the window of the opening photo. */
.af-m-dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.af-nx-hero__photo { position: relative; }
/* The logo at the end of the pages, alive: its three bands of dots turn slowly. */
.af-m-logo { position: relative; display: inline-block; width: 100%; aspect-ratio: 720 / 708; }
.af-m-logo img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* 2.17: the gold logo (C): its own soft light, a picture 1/8 wider on each side, lit once the letters are written. */
.af-intro__logo img.af-intro__lit, .af-m-logo img.af-m-glow { inset: -12.5%; width: 125%; height: 125%; }
/* Maria's words, lit as they are read. */
.af-nx-quote .af-m-word { color: inherit; }
/* The Elite column: one light along its gold edge when it comes into view. */
.af-pc__el.af-m-lit { position: relative; }
.af-pc__el.af-m-lit::after {
	content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
	background: linear-gradient(115deg, transparent 35%, rgba(255, 244, 204, .55) 50%, transparent 65%) -150% 0 / 300% 100% no-repeat;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: 1.5px;
	animation: af-edge 1.6s cubic-bezier(.6, 0, .2, 1) .1s 1 forwards;
}
@keyframes af-edge { to { background-position: 150% 0; } }
@media (prefers-reduced-motion: reduce) {
	html.af-intro-on .af-intro { display: none; }
	.af-pc__el.af-m-lit::after { display: none; }
}
/* The portrait of "Despre": its gold frame, drawn (motion.js) a little outside the photo. */
.af-about__photo.wp-block-image { position: relative; overflow: visible; }
.af-about__photo .af-m-frame { position: absolute; inset: -12px; width: calc(100% + 24px); height: calc(100% + 24px); pointer-events: none; overflow: visible; }
.af-about__photo .af-m-frame rect { fill: none; stroke: var(--nx-goldline); stroke-width: 1.2; }
.af-about__photo.wp-block-image { margin: 0 !important; }
.af-about__photo.wp-block-image img { display: block; width: 100%; height: auto; border-radius: 28px; box-shadow: 0 50px 110px rgba(0, 0, 0, .55); }
.af-m-line-mask { padding: 0 .14em .24em .24em; margin: 0 -.14em -.24em -.24em; } /* room for the commas of ș, ț and the italic p's tail while the title rises */

/* =====================================================================================================================
   2.14: the first page, compact on phones (about 9–10 screens instead of 16). Desktop unchanged. The same blocks:
   the photo of the opening on top as a band with the title over its faded end; the steps as a short timeline; the
   app's features in four tabs (noir.js); the reviews swiped sideways; the plans' cards with their first rows (noir.js,
   "everything it includes" opens the rest); the consultation and Maintenance as two short rows; a smaller portrait;
   four questions; the footer's links in two columns; less room between sections.
   ===================================================================================================================== */
.af-nx-fgtabs, .af-pc-more, .af-nx-pwa__toggle { display: none; }
@media (max-width: 781px) {
	.af-sec.af-nx { padding: 56px 16px; }
	.af-sec.af-nx .af-nx-head { margin-bottom: 30px !important; }
	.af-sec.af-nx h2 { font-size: clamp(2rem, 1.4rem + 2.6vw, 2.5rem) !important; }

	/* The opening: Maria first, a band; the title begins over its faded end. */
	.af-sec.af-nx-hero { padding: 0 16px 44px; }
	.af-nx-hero .af-nx-hero__cols { gap: 0 !important; }
	.af-nx-hero .af-nx-hero__media--full { order: -1; margin: 0 -16px !important; }
	.af-nx-hero__media--full .af-nx-hero__photo { height: 330px; overflow: hidden; }
	.af-nx-hero__media--full .af-nx-hero__photo img { width: 142% !important; max-width: none; height: auto; margin: -78px 0 0 -42%; aspect-ratio: auto !important; object-fit: fill; -webkit-mask-image: none; mask-image: none; }
	.af-nx-hero__media--full .af-nx-hero__photo::after { content: ""; display: block !important; position: absolute; inset: 0; border-radius: 0; box-shadow: none; pointer-events: none; z-index: 3;
		background: linear-gradient(to bottom, rgba(12, 11, 13, .55), transparent 18%, transparent 52%, var(--nx-bg) 98%), linear-gradient(to right, var(--nx-bg), transparent 14%); }
	.af-nx-hero .af-nx-hero__text { position: relative; z-index: 4; margin-top: -78px; }
	.af-nx-hero h1 { font-size: 2.7rem !important; margin: 12px 0 16px !important; }
	.af-nx-hero .af-nx-hero__cta { margin-top: 22px !important; gap: 10px; }
	.af-nx-stats { margin-top: 30px !important; }
	.af-nx-stats p { padding-top: 16px; }

	/* How it works: a short timeline on the thread. */
	.af-nx-steps { gap: 10px !important; }
	.af-nx-step { padding: 16px 16px 16px 74px !important; border-radius: 20px; }
	.af-nx-step .af-nx-step__n { width: 44px; height: 44px; font-size: 20px; left: 15px !important; top: 16px !important; margin: 0 !important; box-shadow: 0 0 0 6px var(--nx-bg2); }
	.af-nx-step .af-nx-step__when { font-size: 14.5px; margin-bottom: 2px !important; }
	.af-nx-step h3 { font-size: 17.5px !important; margin-bottom: 4px !important; }
	.af-nx-step p:last-child { font-size: 14.5px; line-height: 1.45; }
	.af-nx-pwa { padding: 16px 18px !important; gap: 6px !important; margin-top: 14px !important; }
	.af-nx-pwa .af-nx-pwa__icon { display: none; }
	.af-nx-pwa__text p strong { font-size: 15.5px; }
	.af-nx-pwa:not(.is-open) .af-nx-pwa__how { display: none; }
	.af-nx-pwa__toggle { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 0; border: 0; background: none; color: var(--nx-gold); font: 700 14.5px/1.3 var(--nx-sans); cursor: pointer; }

	/* The app: the stage a little lower, the features in four tabs. */
	.af-nx-stage { height: 420px; margin-bottom: 26px !important; }
	.af-nx-stage .af-nx-phone--c { width: 210px; }
	.af-nx-stage .af-nx-phone--l, .af-nx-stage .af-nx-phone--r { width: 150px; }
	.af-nx-fgtabs { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px 12px; padding: 2px 16px 6px; scrollbar-width: none; }
	.af-nx-fgtabs::-webkit-scrollbar { display: none; }
	.af-nx-fgtabs button { flex: none; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--nx-line2); background: transparent; color: var(--nx-t2); font: 700 13px/1 var(--nx-sans); cursor: pointer; white-space: nowrap; }
	.af-nx-fgtabs button.is-on { background: var(--nx-gold); color: #1A1708; border-color: var(--nx-gold); }
	.af-nx-fgs.has-tabs .af-nx-fg:not(.is-on) { display: none; }
	.af-nx-fgs.has-tabs .af-nx-fg > h3 { display: none; }
	.af-nx-fg { padding: 8px 18px !important; border-radius: 22px; }
	.af-nx-fi li { padding: 11px 0 11px 50px; min-height: 0; }

	/* Reviews: swiped sideways, one whole and the edge of the next. */
	.af-nx-results .af-rv3 { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 -16px; padding: 0 16px 8px; scrollbar-width: none; }
	.af-nx-results .af-rv3::-webkit-scrollbar { display: none; }
	.af-nx-results .af-rv3__card { flex: 0 0 84%; scroll-snap-align: center; padding: 24px 20px 20px; }
	.af-rv3__card blockquote p { font-size: 17px; }

	/* Plans: each card with its first rows; the rest opens for all three. */
	.af-pc-cards.is-short .af-m-x { display: none !important; }
	.af-pc-more { display: flex; margin: 10px auto 0; height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--nx-line2); background: transparent; color: var(--nx-t1); font: 700 13.5px/1 var(--nx-sans); align-items: center; gap: 8px; cursor: pointer; }
	.af-nx-extra { gap: 10px !important; margin-top: 18px !important; }
	.af-nx-xc { flex-direction: row !important; flex-wrap: wrap; align-items: center !important; gap: 10px 14px !important; padding: 16px 18px !important; border-radius: 20px; }
	.af-nx-xc .af-nx-xc__d { display: none; }
	.af-nx-xc .wp-block-button__link { min-height: 42px; padding: 0 16px; font-size: 14px; }

	/* About Maria: a smaller portrait, the TV box left out. */
	.af-nx-about { gap: 22px !important; }
	.af-nx-about__media { max-width: 250px !important; }
	.af-nx-about__media .af-nx-tv { display: none !important; }
	.af-nx-quote { font-size: 1.5rem !important; line-height: 1.3 !important; }

	/* Four questions (all of them one tap away). */
	.af-nx-faq .af-faq__item:nth-of-type(n+5) { display: none; }
	.af-nx-faq .af-nx-faq__cols { gap: 18px !important; }

	/* The end: closer. */
	.af-sec.af-nx-closing { padding: 60px 16px 70px; }
	.af-nx-closing .af-nx-closing__logo img, .af-nx-closing .af-m-logo { width: 130px !important; }

	/* The footer (every page): the links in two columns. */
	.af-footer > .alignwide:first-child { display: grid !important; grid-template-columns: 1fr 1fr; gap: 22px 18px !important; }
	.af-footer > .alignwide:first-child > :first-child { grid-column: 1 / -1; }
	.af-footer > .alignwide:first-child > * { margin: 0 !important; flex-basis: auto !important; }
	.af-footer .af-nx-flogo img { width: 92px !important; }
	.af-footer .af-footer__list li { margin-block: .25rem; }
}

/* ---------- 2.19: "Descarcă aplicația" (site 3.42, app-first.php) ----------
   Shown only with "Contul pe site" on "Pornit" (or to the testers): the page with the QR code on a computer and the
   store buttons on a phone, the same box on the free plan page, and the stores in place of "installed from the
   browser" on the first page. */
.af-appst-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.af-appst {
	display: inline-flex; align-items: center; gap: 12px; min-height: 58px; padding: 8px 22px 8px 14px; border-radius: 16px;
	background: #050405; border: 1px solid var(--nx-goldline); color: var(--nx-t1) !important; text-decoration: none !important;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .04) inset, 0 14px 34px rgba(0, 0, 0, .35); transition: border-color .15s ease, transform .15s ease;
}
.af-appst:hover { border-color: var(--nx-gold); transform: translateY(-1px); }
.af-appst__i { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 11px; background: var(--nx-goldsoft); color: var(--nx-gold); }
.af-appst__t { display: flex; flex-direction: column; line-height: 1.1; font-family: var(--nx-sans); }
.af-appst__t small { font-size: 11.5px; font-weight: 600; letter-spacing: .02em; color: var(--nx-t3); }
.af-appst__t b { font-size: 19px; font-weight: 700; color: var(--nx-t1); letter-spacing: -.01em; }

.af-appdl { margin-top: 34px !important; display: grid; gap: 18px; max-width: 560px; }
.af-appdl__qr { display: none; align-items: center; gap: 22px; padding: 18px 24px 18px 18px; border-radius: 24px; background: var(--nx-card); border: 1px solid var(--nx-line); }
.af-appdl__tile { flex: none; display: block; padding: 8px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--nx-goldline), 0 18px 44px rgba(230, 207, 124, .14); line-height: 0; }
.af-appdl__tile svg { display: block; border-radius: 6px; }
.af-appdl__qr p { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--nx-t2); }
.af-appdl__qr p strong { display: block; font-family: var(--nx-serif); font-weight: 400; font-size: 22px; color: var(--nx-t1); margin-bottom: 4px; }
.af-appdl__note, .af-appdl__soon { margin: 0 !important; font-size: 14px; color: var(--nx-t3); }
.af-appdl__soon { color: var(--nx-gold); font-weight: 600; }
.af-appdl--soon { padding: 22px 26px; border-radius: 22px; border: 1px dashed var(--nx-goldline); background: rgba(230, 207, 124, .05); gap: 6px; }
.af-appdl--soon p { margin: 0 !important; color: var(--nx-t2); font-size: 15.5px; }
.af-appdl__soonh strong { font-family: var(--nx-serif); font-weight: 400; font-size: 24px; color: var(--nx-t1); }
/* The QR code only where it helps: a wide screen with a mouse (a phone gets the buttons). */
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
	.af-appdl__qr { display: flex; }
}

/* The header: "Descarcă aplicația" is longer than "Începe gratuit": the menu's gaps a little smaller, so it stays on one line. */
body.af-app-first .af-nx-header .af-nav .wp-block-navigation__container { gap: 24px; }
@media (max-width: 1240px) { body.af-app-first .af-nx-header .af-nav .wp-block-navigation__container { gap: 16px; } }
@media (max-width: 1180px) { body.af-app-first .af-nx-header .af-nav .wp-block-navigation__container { gap: 12px; } }

/* The page. */
.af-sec.af-nx-dl { padding: 70px 24px 110px; overflow: hidden; background: radial-gradient(760px 620px at 76% 50%, rgba(230, 207, 124, .14), transparent 66%), var(--nx-bg); }
.af-dl__cols { display: grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items: center; }
.af-nx-dl h1 { font-size: clamp(3rem, 1.4rem + 5vw, 5.6rem) !important; line-height: .98 !important; margin: 20px 0 22px !important; }
.af-nx-dl .af-lead { max-width: 540px; }
.af-dl__media { position: relative; justify-self: center; width: 100%; max-width: 330px; }
.af-dl__media::before { content: ""; position: absolute; left: 50%; top: 50%; width: 170%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: url(images/ring.png) center / contain no-repeat; opacity: .55; pointer-events: none; }
.af-dl__phone { position: relative; margin: 0 !important; border-radius: 46px; padding: 10px; background: linear-gradient(160deg, #3B3942, #141318); box-shadow: 0 50px 100px rgba(0, 0, 0, .65), 0 0 120px rgba(230, 207, 124, .16), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.af-dl__phone img { display: block; width: 100%; height: auto; border-radius: 37px; }
.af-dl__where { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 1000px; margin: 0 auto; }
.af-dl__card { padding: 34px 32px 30px; border-radius: 28px; background: var(--nx-card); border: 1px solid var(--nx-line); }
.af-dl__card:first-child { border-color: var(--nx-goldline); background: linear-gradient(180deg, rgba(230, 207, 124, .08), rgba(230, 207, 124, .02)); }
.af-dl__card h3 { font-family: var(--nx-serif) !important; font-weight: 400 !important; font-size: 26px !important; color: var(--nx-gold) !important; margin: 0 0 14px !important; text-transform: none; }
.af-dl__card ul { list-style: none; padding: 0; margin: 0; }
.af-dl__card li { position: relative; padding: 11px 0 11px 30px; border-top: 1px solid var(--nx-line); font-size: 16px; color: var(--nx-t1); }
.af-dl__card li:first-child { border-top: 0; }
.af-dl__card li::before { content: "✓"; position: absolute; left: 2px; top: 11px; color: var(--nx-gold); font-weight: 800; }
.af-dl__lnk { margin: 16px 0 0 !important; }
.af-dl__lnk a { color: var(--nx-gold) !important; font-weight: 700; text-decoration: none; }
.af-dl__lnk a:hover { text-decoration: underline; }

/* The free plan page: the box in place of the form. */
body.af-noir main .af-sec--blush .af-box--app { padding: 34px 32px; }
.af-box--app > p { color: var(--nx-t2); font-size: 16px; line-height: 1.55; }
.af-box--app .af-appdl { margin-top: 22px !important; }
.af-box--app .af-appdl__qr { padding: 14px; gap: 16px; background: rgba(255, 255, 255, .03); }
.af-box--app .af-appdl__qr p strong { font-size: 19px; }

/* The first page: the stores in place of "installed from the browser". */
.af-nx-pwa--stores .af-nx-pwa__text > p:first-child strong { display: block; margin-bottom: 2px; }
.af-nx-pwa--stores .af-appst-row { margin-top: 14px !important; }
.af-nx-pwa--stores .af-appdl__soon { margin-top: 4px !important; }
.af-nx-pwa__more { margin: 12px 0 0 !important; font-size: 14px; }
.af-nx-pwa__more a { color: var(--nx-gold); font-weight: 700; text-decoration: none; }
@media (hover: none), (pointer: coarse), (max-width: 899px) { .af-nx-pwa__more { display: none; } }

@media (max-width: 900px) {
	.af-sec.af-nx-dl { padding: 36px 16px 80px; }
	.af-dl__cols { grid-template-columns: 1fr; gap: 54px; }
	.af-dl__media { max-width: 250px; }
	.af-dl__where { grid-template-columns: 1fr; gap: 16px; }
	.af-dl__card { padding: 26px 22px 22px; }
	.af-appst-row { flex-direction: column; align-items: stretch; }
	.af-appst { justify-content: flex-start; }
}