/* Meet4Football theme: clean white base, pastel blue / green / red actions, no dark sections. */

:root {
	--ql-bg: #FFFFFF;
	--ql-bg-soft: #F7F9FC;
	--ql-tint-blue: #F0F6FF;
	--ql-tint-green: #EEF9F2;
	--ql-tint-red: #FFF3F1;
	--ql-ink: #1B2638;
	--ql-ink-2: #46546B;
	--ql-ink-3: #66738A;
	--ql-line: #E3E8F0;
	--ql-line-2: #D2DAE6;

	--ql-blue: #BBD6FF;
	--ql-blue-hover: #A6C9FF;
	--ql-blue-ink: #0F4C9E;
	--ql-blue-bright: #3B82F6;
	--ql-green: #B5EBC8;
	--ql-green-hover: #9DE2B5;
	--ql-green-ink: #0E6B3B;
	--ql-green-bright: #22B573;
	--ql-red: #FFC6C0;
	--ql-red-hover: #FFB1A9;
	--ql-red-ink: #A3261F;
	--ql-red-bright: #F2545B;

	--ql-font-display: "Gabarito", "Segoe UI", system-ui, sans-serif;
	--ql-font-body: "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

	--ql-max: 1500px;
	--ql-gutter: clamp(16px, 4vw, 30px);
	--ql-r-card: 20px;
	--ql-r-pill: 999px;
	--ql-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--ql-shadow-sm: 0 1px 2px rgba(27, 38, 56, 0.06);
	--ql-shadow: 0 2px 4px rgba(27, 38, 56, 0.04), 0 22px 44px -22px rgba(27, 38, 56, 0.22);
	--ql-header-h: 72px;
	--ql-admin-bar: var(--wp-admin--admin-bar--height, 0px);
}

/* Tone helpers: one pastel family per meaning (blue = play, green = train / go, red = needs). */
.ql-tone--blue { --ql-tone: var(--ql-blue); --ql-tone-ink: var(--ql-blue-ink); --ql-tone-tint: var(--ql-tint-blue); --ql-tone-bright: var(--ql-blue-bright); }
.ql-tone--green { --ql-tone: var(--ql-green); --ql-tone-ink: var(--ql-green-ink); --ql-tone-tint: var(--ql-tint-green); --ql-tone-bright: var(--ql-green-bright); }
.ql-tone--red { --ql-tone: var(--ql-red); --ql-tone-ink: var(--ql-red-ink); --ql-tone-tint: var(--ql-tint-red); --ql-tone-bright: var(--ql-red-bright); }

/* Base ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
:where(html) { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--ql-header-h) + var(--ql-admin-bar) + 16px); }
:where(body) {
	margin: 0;
	background: var(--ql-bg);
	color: var(--ql-ink);
	font-family: var(--ql-font-body);
	font-size: 1.0625rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
:where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote) { margin: 0; }
:where(ul[class], ol[class]) { list-style: none; padding: 0; }
:where(img, svg, video) { display: block; max-width: 100%; }
:where(img) { height: auto; }
:where(a) { color: inherit; }
:where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(button) { cursor: pointer; }
:focus-visible { outline: 3px solid var(--ql-blue-bright); outline-offset: 3px; }

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	word-wrap: normal !important;
}
.ql-skip-link {
	position: absolute;
	left: 16px;
	top: -120px;
	z-index: 1000;
	padding: 10px 18px;
	border-radius: var(--ql-r-pill);
	background: var(--ql-blue);
	color: var(--ql-blue-ink);
	font-weight: 600;
	text-decoration: none;
}
.ql-skip-link:focus { top: calc(var(--ql-admin-bar) + 12px); }

.ql-container { width: min(100% - 2 * var(--ql-gutter), var(--ql-max)); margin-inline: auto; }
.ql-icon { flex: none; }

/* Type helpers -------------------------------------------------------- */

.ql-h2 {
	font-family: var(--ql-font-display);
	font-size: clamp(2rem, 1.25rem + 2.5vw, 3.4rem);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -0.03em;
	text-wrap: balance;
}
.ql-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
	padding: 6px 14px;
	border-radius: var(--ql-r-pill);
	background: var(--ql-green);
	color: var(--ql-green-ink);
	font-size: 0.8125rem;
	font-weight: 600;
}
.ql-section { padding-block: clamp(64px, 8vw, 112px); }
.ql-section__head { max-width: 760px; margin-bottom: clamp(28px, 4vw, 48px); }
.ql-section__head--row { max-width: none; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 32px; }
.ql-section__lead { max-width: 58ch; margin-top: 14px; color: var(--ql-ink-2); font-size: 1.125rem; line-height: 1.55; }

.ql-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding-bottom: 3px;
	border-bottom: 2px solid currentColor;
	color: var(--ql-blue-ink);
	font-weight: 600;
	text-decoration: none;
	transition: gap 0.2s var(--ql-ease);
}
.ql-link-arrow:hover { gap: 12px; }
.ql-link-quiet { color: var(--ql-ink-2); font-weight: 600; text-decoration: none; }
.ql-link-quiet:hover { color: var(--ql-blue-ink); }

/* Buttons and chips --------------------------------------------------- */

.ql-btn {
	--ql-btn-bg: var(--ql-blue);
	--ql-btn-fg: var(--ql-blue-ink);
	--ql-btn-bd: var(--ql-blue-hover);
	--ql-btn-hover: var(--ql-blue-hover);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 24px;
	border: 1px solid var(--ql-btn-bd);
	border-radius: var(--ql-r-pill);
	background: var(--ql-btn-bg);
	color: var(--ql-btn-fg);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: var(--ql-shadow-sm);
	transition: transform 0.15s var(--ql-ease), background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.ql-btn:hover { background: var(--ql-btn-hover); transform: translateY(-1px); box-shadow: 0 8px 18px -10px rgba(27, 38, 56, 0.35); }
.ql-btn:active { transform: translateY(1px); }
.ql-btn--blue,
.ql-btn--accent { --ql-btn-bg: var(--ql-blue); --ql-btn-fg: var(--ql-blue-ink); --ql-btn-bd: var(--ql-blue-hover); --ql-btn-hover: var(--ql-blue-hover); }
.ql-btn--green,
.ql-btn--dark { --ql-btn-bg: var(--ql-green); --ql-btn-fg: var(--ql-green-ink); --ql-btn-bd: var(--ql-green-hover); --ql-btn-hover: var(--ql-green-hover); }
.ql-btn--red { --ql-btn-bg: var(--ql-red); --ql-btn-fg: var(--ql-red-ink); --ql-btn-bd: var(--ql-red-hover); --ql-btn-hover: var(--ql-red-hover); }
.ql-btn--outline,
.ql-btn--ghost,
.ql-btn--ghost-dark,
.ql-btn--outline-dark { --ql-btn-bg: #FFFFFF; --ql-btn-fg: var(--ql-ink); --ql-btn-bd: var(--ql-line-2); --ql-btn-hover: var(--ql-bg-soft); }
.ql-btn--sm { min-height: 40px; padding: 0 18px; font-size: 0.9375rem; gap: 8px; }
.ql-btn--lg { min-height: 54px; padding: 0 28px; font-size: 1.0625rem; }
.ql-btn--block { width: 100%; }

.ql-icon-btn {
	display: inline-grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border: 1px solid var(--ql-line-2);
	border-radius: 50%;
	background: #FFFFFF;
	color: var(--ql-ink);
	transition: background-color 0.2s, border-color 0.2s, opacity 0.2s;
}
.ql-icon-btn:hover { border-color: var(--ql-blue-hover); background: var(--ql-blue); color: var(--ql-blue-ink); }
.ql-icon-btn:disabled { opacity: 0.35; pointer-events: none; }

.ql-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px 6px 10px;
	border-radius: var(--ql-r-pill);
	background: var(--ql-tone, var(--ql-blue));
	color: var(--ql-tone-ink, var(--ql-blue-ink));
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.2;
}
.ql-chip--accent { background: var(--ql-blue); color: var(--ql-blue-ink); }

/* Logo ------------------------------------------------------------------ */

.ql-logo {
	display: inline-flex;
	align-items: center;
	color: var(--ql-ink);
	font-family: var(--ql-font-display);
	font-size: 1.6rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	text-decoration: none;
	white-space: nowrap;
}
.ql-logo__badge {
	display: inline-grid;
	place-items: center;
	width: 1.15em;
	height: 1.15em;
	margin: 0 0.1em;
	border-radius: 50%;
	background: var(--ql-blue-bright);
	color: #FFFFFF;
	font-size: 0.78em;
	font-weight: 800;
	letter-spacing: 0;
}
.custom-logo-link img { max-height: 44px; width: auto; }

/* Header -------------------------------------------------------------- */

.ql-header {
	position: fixed;
	top: var(--ql-admin-bar);
	inset-inline: 0;
	z-index: 100;
	border-bottom: 1px solid transparent;
	background: rgba(255, 255, 255, 0.94);
	color: var(--ql-ink);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	backdrop-filter: saturate(160%) blur(14px);
	transition: border-color 0.3s, box-shadow 0.3s;
}
.ql-header.is-scrolled,
.ql-header.has-open-panel,
.ql-header-solid .ql-header { border-bottom-color: var(--ql-line); box-shadow: 0 8px 24px -18px rgba(27, 38, 56, 0.35); }
.ql-header__bar { position: relative; display: flex; align-items: center; gap: 24px; height: var(--ql-header-h); transition: height 0.25s var(--ql-ease); }
.ql-header.is-scrolled .ql-header__bar { height: 62px; }
.ql-header__brand { flex: none; }
.ql-nav { flex: 1; display: flex; justify-content: center; }
.ql-header__actions { flex: none; display: flex; align-items: center; gap: 18px; }
.ql-header__burger {
	display: none;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--ql-line-2);
	border-radius: 50%;
	background: #FFFFFF;
	color: var(--ql-ink);
}

.ql-nav__list { display: flex; align-items: center; gap: 2px; }
.ql-nav__item { position: relative; display: flex; align-items: center; }
.ql-nav__item--mega { position: static; }
.ql-nav__link {
	display: inline-flex;
	align-items: center;
	padding: 9px 14px;
	border-radius: var(--ql-r-pill);
	color: var(--ql-ink-2);
	font-size: 0.98rem;
	font-weight: 500;
	text-decoration: none;
	transition: color 0.2s, background-color 0.2s;
}
.ql-nav__link:hover { background: var(--ql-bg-soft); color: var(--ql-ink); }
.ql-nav__link.is-current { background: var(--ql-tint-blue); color: var(--ql-blue-ink); }
.ql-nav__item--parent > .ql-nav__link { padding-right: 6px; }
.ql-nav__toggle {
	display: inline-grid;
	place-items: center;
	width: 26px;
	height: 26px;
	margin-left: -2px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--ql-ink-3);
	transition: transform 0.25s var(--ql-ease), color 0.2s;
}
.ql-nav__item:hover > .ql-nav__toggle,
.ql-nav__item.is-open > .ql-nav__toggle { transform: rotate(180deg); color: var(--ql-ink); }

/* Panels (dropdown and mega) */
.ql-panel {
	position: absolute;
	top: calc(100% + 10px);
	left: 50%;
	z-index: 10;
	border: 1px solid var(--ql-line);
	border-radius: 22px;
	background: #FFFFFF;
	color: var(--ql-ink);
	box-shadow: 0 30px 60px -28px rgba(27, 38, 56, 0.35);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translate(-50%, 8px);
	transition: opacity 0.18s var(--ql-ease), transform 0.18s var(--ql-ease), visibility 0s linear 0.18s;
}
.ql-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }
.ql-nav__item:hover > .ql-panel,
.ql-nav__item:focus-within:not(.is-closed) > .ql-panel,
.ql-nav__item.is-open > .ql-panel {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translate(-50%, 0);
	transition-delay: 0s;
}
.ql-nav__item--mega > .ql-panel { top: calc(100% - 6px); width: min(940px, 100%); overflow: hidden; }

.ql-panel__inner { display: grid; grid-template-columns: minmax(0, 1fr) 270px; }
.ql-panel__groups { padding: 24px 24px 4px; columns: 2; column-gap: 22px; }
.ql-panel__group { break-inside: avoid; margin-bottom: 18px; }
.ql-panel__heading { margin: 0 0 6px 10px; color: var(--ql-ink-3); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.ql-panel__links { display: grid; gap: 2px; }
.ql-panel__link { display: flex; align-items: flex-start; gap: 12px; padding: 10px; border-radius: 14px; color: var(--ql-ink); text-decoration: none; transition: background-color 0.15s; }
.ql-panel__link:hover,
.ql-panel__link:focus-visible { background: var(--ql-bg-soft); }
.ql-panel__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 12px;
	background: var(--ql-tone-tint, var(--ql-tint-blue));
	color: var(--ql-tone-ink, var(--ql-blue-ink));
	transition: background-color 0.15s;
}
.ql-panel__link:hover .ql-panel__icon { background: var(--ql-tone, var(--ql-blue)); }
.ql-panel__text { display: grid; gap: 2px; }
.ql-panel__title { font-size: 0.98rem; font-weight: 600; line-height: 1.3; }
.ql-panel__desc { color: var(--ql-ink-3); font-size: 0.84rem; line-height: 1.4; }
.ql-panel__promo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 26px 24px;
	background:
		radial-gradient(circle at 100% 0, rgba(255, 198, 192, 0.7), transparent 55%),
		radial-gradient(circle at 0 100%, rgba(181, 235, 200, 0.7), transparent 55%),
		var(--ql-tint-blue);
}
.ql-panel__promo-title { font-family: var(--ql-font-display); font-size: 1.6rem; font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; }
.ql-panel__promo-text { margin-bottom: 4px; color: var(--ql-ink-2); font-size: 0.95rem; line-height: 1.5; }
.ql-panel__all { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 18px; color: var(--ql-blue-ink); font-size: 0.95rem; font-weight: 600; text-decoration: none; }
.ql-panel--list { min-width: 230px; padding: 10px; }

/* Drawer (mobile) ----------------------------------------------------- */

.ql-drawer { position: fixed; inset: 0; z-index: 300; }
.ql-drawer[hidden] { display: none; }
.ql-drawer__backdrop { position: absolute; inset: 0; background: rgba(27, 38, 56, 0.28); opacity: 0; transition: opacity 0.3s var(--ql-ease); }
.ql-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	width: min(440px, 100%);
	padding: calc(10px + var(--ql-admin-bar)) var(--ql-gutter) 24px;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: #FFFFFF;
	color: var(--ql-ink);
	box-shadow: -20px 0 50px -30px rgba(27, 38, 56, 0.4);
	transform: translateX(100%);
	transition: transform 0.32s var(--ql-ease);
}
.ql-drawer.is-open .ql-drawer__backdrop { opacity: 1; }
.ql-drawer.is-open .ql-drawer__panel { transform: none; }
.ql-drawer__top { display: flex; align-items: center; justify-content: space-between; min-height: 60px; margin-bottom: 12px; }
.ql-drawer__close { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--ql-line-2); border-radius: 50%; background: #FFFFFF; color: var(--ql-ink); }
.ql-drawer__item { border-bottom: 1px solid var(--ql-line); }
.ql-drawer__link,
.ql-drawer__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 15px 0;
	border: 0;
	background: none;
	color: var(--ql-ink);
	font-family: var(--ql-font-display);
	font-size: 1.45rem;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	text-align: left;
	text-decoration: none;
}
.ql-drawer__link.is-current { color: var(--ql-blue-ink); }
.ql-drawer__toggle .ql-icon { color: var(--ql-ink-3); transition: transform 0.25s var(--ql-ease); }
.ql-drawer__toggle[aria-expanded="true"] .ql-icon { transform: rotate(180deg); }
.ql-drawer__sub { padding: 0 0 16px; }
.ql-drawer__all { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 4px; color: var(--ql-blue-ink); font-weight: 600; text-decoration: none; }
.ql-drawer__heading { margin: 14px 0 4px; color: var(--ql-ink-3); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.ql-drawer__sublist { display: grid; }
.ql-drawer__sublink { display: flex; align-items: center; gap: 12px; padding: 9px 0; color: var(--ql-ink-2); font-weight: 500; text-decoration: none; }
.ql-drawer__sublink .ql-icon { color: var(--ql-tone-bright, var(--ql-blue-bright)); }
.ql-drawer__actions { display: grid; gap: 12px; margin-top: auto; padding-top: 24px; }
.ql-drawer-open { overflow: hidden; }

@media (max-width: 1100px) {
	.ql-nav { display: none; }
	.ql-header__bar { justify-content: space-between; }
	.ql-header__burger { display: inline-grid; }
	.ql-header__actions { gap: 12px; }
	.ql-header__actions .ql-link-quiet { display: none; }
}
@media (max-width: 420px) {
	.ql-logo { font-size: 1.4rem; }
	.ql-header__actions .ql-btn--sm { padding: 0 14px; }
	.ql-btn--lg { padding: 0 22px; }
}

/* Mobile tab bar (swift navigation) ------------------------------------ */

.ql-tabbar { display: none; }
@media (max-width: 768px) {
	.ql-tabbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 95;
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 4px;
		padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
		border-top: 1px solid var(--ql-line);
		background: rgba(255, 255, 255, 0.96);
		-webkit-backdrop-filter: blur(14px);
		backdrop-filter: blur(14px);
	}
	.ql-tabbar__link {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 3px;
		padding: 7px 2px 6px;
		border-radius: 14px;
		color: var(--ql-ink-3);
		font-size: 0.72rem;
		font-weight: 600;
		line-height: 1.1;
		text-decoration: none;
	}
	.ql-tabbar__link.is-current { background: var(--ql-tint-blue); color: var(--ql-blue-ink); }
	.ql-tabbar__link--cta { background: var(--ql-blue); color: var(--ql-blue-ink); }
	body { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
}

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

.ql-footer { padding: clamp(56px, 7vw, 88px) 0 28px; border-top: 1px solid var(--ql-line); background: var(--ql-bg-soft); color: var(--ql-ink-2); }
.ql-footer__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 48px; padding-bottom: 44px; border-bottom: 1px solid var(--ql-line); }
.ql-footer__about { max-width: 36ch; margin-top: 16px; color: var(--ql-ink-2); }
.ql-footer__contact { display: grid; gap: 8px; margin-top: 20px; }
.ql-footer__contact a { display: inline-flex; align-items: center; gap: 10px; color: var(--ql-ink); font-weight: 600; text-decoration: none; }
.ql-footer__contact a:hover { color: var(--ql-blue-ink); }
.ql-footer__social { display: flex; gap: 10px; margin-top: 20px; }
.ql-footer__social a { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--ql-line-2); border-radius: 50%; background: #FFFFFF; color: var(--ql-ink-2); transition: background-color 0.2s, color 0.2s, border-color 0.2s; }
.ql-footer__social a:hover { border-color: var(--ql-blue-hover); background: var(--ql-blue); color: var(--ql-blue-ink); }
.ql-footer__menus { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.ql-footer__title { margin-bottom: 14px; color: var(--ql-ink); font-family: var(--ql-font-display); font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em; }
.ql-footer__links { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ql-footer__links a { color: var(--ql-ink-2); text-decoration: none; transition: color 0.2s; }
.ql-footer__links a:hover { color: var(--ql-blue-ink); }
.ql-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-top: 22px; color: var(--ql-ink-3); font-size: 0.9rem; }
.ql-footer__top-link { color: var(--ql-ink-3); text-decoration: none; }
.ql-footer__top-link:hover { color: var(--ql-blue-ink); }
@media (max-width: 900px) { .ql-footer__top { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .ql-footer__menus { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* WhatsApp button ------------------------------------------------------ */

.ql-wa {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 90;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 54px;
	padding: 0 20px 0 16px;
	border: 1px solid var(--ql-green-hover);
	border-radius: var(--ql-r-pill);
	background: var(--ql-green);
	color: var(--ql-green-ink);
	font-weight: 600;
	text-decoration: none;
	box-shadow: var(--ql-shadow);
	transition: transform 0.2s var(--ql-ease), background-color 0.2s;
}
.ql-wa:hover { transform: translateY(-2px); background: var(--ql-green-hover); }
@media (max-width: 768px) {
	.ql-wa { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); width: 54px; padding: 0; justify-content: center; }
	.ql-wa__label { display: none; }
}

/* Inner pages ---------------------------------------------------------- */

.ql-page-head {
	padding: calc(var(--ql-header-h) + clamp(40px, 6vw, 88px)) 0 clamp(40px, 5vw, 72px);
	border-bottom: 1px solid var(--ql-line);
	background:
		radial-gradient(ellipse 40% 60% at 90% 10%, rgba(187, 214, 255, 0.6), transparent 70%),
		radial-gradient(ellipse 30% 50% at 70% 100%, rgba(181, 235, 200, 0.55), transparent 70%),
		var(--ql-bg);
	color: var(--ql-ink);
}
.ql-page-head__title { max-width: 18ch; font-family: var(--ql-font-display); font-size: clamp(2.4rem, 1.6rem + 3vw, 4.4rem); font-weight: 800; line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance; }
.ql-page-head__intro { max-width: 60ch; margin-top: 16px; color: var(--ql-ink-2); font-size: 1.125rem; }
.ql-page-head__code { margin-bottom: 14px; color: var(--ql-blue-bright); font-family: var(--ql-font-display); font-size: clamp(5rem, 14vw, 10rem); font-weight: 900; line-height: 0.85; letter-spacing: -0.04em; }
.ql-page-head__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.ql-page-body { padding-block: clamp(48px, 7vw, 96px); }

.ql-soon { max-width: 580px; margin-inline: auto; padding: clamp(36px, 5vw, 56px) clamp(24px, 4vw, 48px); border: 1px solid var(--ql-line); border-radius: 24px; background: #FFFFFF; text-align: center; box-shadow: var(--ql-shadow); }
.ql-soon__icon { display: inline-grid; place-items: center; width: 64px; height: 64px; margin-bottom: 18px; border-radius: 50%; background: var(--ql-green); color: var(--ql-green-ink); }
.ql-soon__title { font-family: var(--ql-font-display); font-size: 1.9rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.ql-soon__text { margin-top: 12px; color: var(--ql-ink-2); }
.ql-soon__actions { margin-top: 24px; }

.ql-prose { max-width: 72ch; }
.ql-prose > * + * { margin-top: 1.1em; }
.ql-prose h2, .ql-prose h3 { margin-top: 1.8em; font-family: var(--ql-font-display); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.ql-prose h2 { font-size: 2rem; }
.ql-prose h3 { font-size: 1.5rem; }
.ql-prose a { color: var(--ql-blue-ink); text-underline-offset: 3px; }

.ql-post-list { display: grid; max-width: 820px; }
.ql-post-row { padding: 26px 0; border-bottom: 1px solid var(--ql-line); }
.ql-post-row__date { color: var(--ql-ink-3); font-size: 0.9rem; }
.ql-post-row__title { margin-top: 6px; font-family: var(--ql-font-display); font-size: 1.7rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.ql-post-row__title a { text-decoration: none; }
.ql-post-row__excerpt { margin-top: 8px; color: var(--ql-ink-2); }

/* Scroll reveal (only when JS runs; content stays visible otherwise) -------- */

.ql-js .ql-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--ql-ease), transform 0.6s var(--ql-ease); transition-delay: var(--ql-delay, 0s); }
.ql-js .ql-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	:where(html) { scroll-behavior: auto; }
	.ql-js .ql-reveal { opacity: 1; transform: none; transition: none; }
	*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}