/* =========================================================================
   BINGE IPTV — design system
   -------------------------------------------------------------------------
   Palette and logo come from the brand asset pack:
     deep violet #100824 · binge yellow #F4E54C · warm white #F6F3EB
   The page sits on a warm light foundation, with dark violet panels used
   where a cinematic surface earns its place: hero, pricing, content
   categories, the closing call to action and the footer.
   ====================================================================== */

/* -------------------------------------------------------------- 1. Tokens */

:root {
	/* Brand */
	--bip-violet: #100824;
	--bip-violet-800: #1b0f3b;
	--bip-violet-700: #271654;
	--bip-violet-600: #3a2276;
	--bip-yellow: #f4e54c;
	--bip-yellow-dark: #e2d234;
	--bip-cream: #f6f3eb;

	/* Interactive violet — 9:1 on white, so it is safe for link text,
	   and white on it is also 9:1, so it is safe as a button. */
	--bip-action: #4b2fb0;
	--bip-action-dark: #3a2289;

	/* Surfaces */
	--bip-bg: #ffffff;
	--bip-surface: #ffffff;
	--bip-surface-alt: var(--bip-cream);
	--bip-surface-sunken: #f1ece1;

	/* Ink */
	--bip-ink: var(--bip-violet);
	--bip-ink-muted: #5c5470;   /* 7.06:1 on white */
	--bip-ink-invert: var(--bip-cream);
	--bip-ink-invert-muted: #b3a9ce; /* 8.76:1 on violet */

	/* Lines */
	--bip-line: #e4ddd0;
	--bip-line-strong: #cdc3b2;
	--bip-line-dark: rgba(246, 243, 235, 0.16);

	/* Type */
	--bip-font: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display",
		"Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--bip-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	--bip-text-xs: 0.8125rem;
	--bip-text-sm: 0.9375rem;
	--bip-text-base: 1.0625rem;
	--bip-text-lg: clamp(1.125rem, 0.4vw + 1.05rem, 1.25rem);
	--bip-text-xl: clamp(1.3rem, 0.7vw + 1.15rem, 1.6rem);
	--bip-text-2xl: clamp(1.6rem, 1.4vw + 1.3rem, 2.15rem);
	--bip-text-3xl: clamp(2rem, 2.4vw + 1.45rem, 3rem);
	--bip-text-hero: clamp(2.3rem, 4vw + 1.15rem, 4.05rem);

	/* Space */
	--bip-gutter: 1.5rem;
	--bip-container: 1200px;
	--bip-container-narrow: 760px;
	--bip-section-y: clamp(3.5rem, 6vw, 6.5rem);

	/* Shape */
	--bip-radius-sm: 10px;
	--bip-radius: 16px;
	--bip-radius-lg: 24px;
	--bip-radius-pill: 999px;

	--bip-shadow-sm: 0 1px 2px rgba(16, 8, 36, 0.06), 0 2px 8px rgba(16, 8, 36, 0.05);
	--bip-shadow: 0 2px 4px rgba(16, 8, 36, 0.05), 0 12px 28px rgba(16, 8, 36, 0.09);
	--bip-shadow-lg: 0 4px 8px rgba(16, 8, 36, 0.06), 0 24px 60px rgba(16, 8, 36, 0.16);

	--bip-header-h: 74px;
	--bip-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------------------------------------------------------- 2. Foundation */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--bip-header-h) + 1rem);
}

body {
	margin: 0;
	background: var(--bip-bg);
	color: var(--bip-ink);
	font-family: var(--bip-font);
	font-size: var(--bip-text-base);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.5em;
	font-weight: 700;
	line-height: 1.14;
	letter-spacing: -0.021em;
	text-wrap: balance;
}

h1 { font-size: var(--bip-text-3xl); }
h2 { font-size: var(--bip-text-2xl); }
h3 { font-size: var(--bip-text-xl); }
h4 { font-size: var(--bip-text-lg); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a {
	color: var(--bip-action);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

a:hover { color: var(--bip-action-dark); }

img, picture, svg, video {
	max-width: 100%;
	height: auto;
	display: block;
}

ul, ol { margin: 0 0 1.1em; padding-left: 1.25em; }
li { margin-bottom: 0.4em; }

strong { font-weight: 650; }

hr {
	border: 0;
	border-top: 1px solid var(--bip-line);
	margin: 2.5rem 0;
}

blockquote {
	margin: 1.75rem 0;
	padding: 0.25rem 0 0.25rem 1.25rem;
	border-left: 3px solid var(--bip-yellow);
	color: var(--bip-ink-muted);
	font-size: var(--bip-text-lg);
}

code, pre, kbd {
	font-family: var(--bip-font-mono);
	font-size: 0.9em;
}

code {
	background: var(--bip-surface-sunken);
	padding: 0.12em 0.38em;
	border-radius: 5px;
}

pre {
	background: var(--bip-violet);
	color: var(--bip-cream);
	padding: 1.1rem 1.25rem;
	border-radius: var(--bip-radius-sm);
	overflow-x: auto;
}

pre code { background: none; padding: 0; }

table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1.5rem;
	font-size: var(--bip-text-sm);
}

th, td {
	padding: 0.7rem 0.85rem;
	border-bottom: 1px solid var(--bip-line);
	text-align: left;
}

th { font-weight: 650; background: var(--bip-surface-alt); }

/* Focus: always visible, always high contrast against its own surface. */
:focus-visible {
	outline: 3px solid var(--bip-action);
	outline-offset: 2px;
	border-radius: 4px;
}

.bip-panel--dark :focus-visible,
.bip-header :focus-visible,
.bip-footer :focus-visible {
	outline-color: var(--bip-yellow);
}

::selection {
	background: var(--bip-yellow);
	color: var(--bip-violet);
}

/* ------------------------------------------------------------ 3. Utility */

.bip-sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.bip-skip-link {
	position: absolute;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 200;
	padding: 0.7rem 1.1rem;
	background: var(--bip-yellow);
	color: var(--bip-violet);
	font-weight: 650;
	border-radius: var(--bip-radius-sm);
	transform: translateY(-160%);
	transition: transform 0.18s var(--bip-ease);
}

.bip-skip-link:focus {
	transform: translateY(0);
	color: var(--bip-violet);
}

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

.bip-container--narrow { max-width: var(--bip-container-narrow); }

.bip-section {
	padding-block: var(--bip-section-y);
}

.bip-section--tight { padding-block: clamp(2.5rem, 4vw, 4rem); }

.bip-panel--light { background: var(--bip-bg); }
.bip-panel--alt { background: var(--bip-surface-alt); }

.bip-panel--dark {
	background: var(--bip-violet);
	color: var(--bip-ink-invert);
}

.bip-panel--dark h1,
.bip-panel--dark h2,
.bip-panel--dark h3,
.bip-panel--dark h4 { color: var(--bip-cream); }

.bip-panel--dark a:not(.bip-btn) { color: var(--bip-yellow); }
.bip-panel--dark a:not(.bip-btn):hover { color: #fff; }

.bip-eyebrow {
	margin: 0 0 0.75rem;
	font-size: var(--bip-text-xs);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bip-action);
}

.bip-panel--dark .bip-eyebrow { color: var(--bip-yellow); }

.bip-section-heading {
	max-width: 58ch;
	margin-bottom: clamp(2rem, 3.5vw, 3.25rem);
}

.bip-section-heading--center {
	margin-inline: auto;
	text-align: center;
}

.bip-section-heading__title { margin-bottom: 0.45em; }

.bip-section-heading__lede {
	font-size: var(--bip-text-lg);
	color: var(--bip-ink-muted);
	margin: 0;
}

.bip-panel--dark .bip-section-heading__lede { color: var(--bip-ink-invert-muted); }

.bip-lede {
	font-size: var(--bip-text-lg);
	color: var(--bip-ink-muted);
}

.bip-panel--dark .bip-lede { color: var(--bip-ink-invert-muted); }

.bip-picture { display: block; }
.bip-picture img { width: 100%; }

.bip-media {
	border-radius: var(--bip-radius-lg);
	overflow: hidden;
	box-shadow: var(--bip-shadow);
	background: var(--bip-surface-sunken);
}

.bip-panel--dark .bip-media {
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
	background: var(--bip-violet-800);
}

/* ------------------------------------------------------------ 4. Buttons */

.bip-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	min-height: 48px;
	padding: 0.78rem 1.5rem;
	border: 1px solid transparent;
	border-radius: var(--bip-radius-pill);
	font: inherit;
	font-size: var(--bip-text-sm);
	font-weight: 650;
	letter-spacing: 0.005em;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.16s var(--bip-ease), background-color 0.16s var(--bip-ease),
		box-shadow 0.16s var(--bip-ease), border-color 0.16s var(--bip-ease), color 0.16s var(--bip-ease);
}

.bip-btn:hover { transform: translateY(-1px); }
.bip-btn:active { transform: translateY(0); }

.bip-btn .bip-icon { flex: none; }

.bip-btn--primary {
	background: var(--bip-yellow);
	color: var(--bip-violet);
	box-shadow: 0 2px 6px rgba(16, 8, 36, 0.16);
}

.bip-btn--primary:hover {
	background: var(--bip-yellow-dark);
	color: var(--bip-violet);
	box-shadow: 0 8px 22px rgba(16, 8, 36, 0.22);
}

.bip-btn--secondary {
	background: transparent;
	color: var(--bip-ink);
	border-color: var(--bip-line-strong);
}

.bip-btn--secondary:hover {
	background: var(--bip-surface-alt);
	color: var(--bip-ink);
	border-color: var(--bip-ink-muted);
}

.bip-panel--dark .bip-btn--secondary,
.bip-header .bip-btn--secondary {
	color: var(--bip-cream);
	border-color: var(--bip-line-dark);
}

.bip-panel--dark .bip-btn--secondary:hover,
.bip-header .bip-btn--secondary:hover {
	background: rgba(246, 243, 235, 0.1);
	color: #fff;
	border-color: rgba(246, 243, 235, 0.42);
}

.bip-btn--solid {
	background: var(--bip-action);
	color: #fff;
}

.bip-btn--solid:hover { background: var(--bip-action-dark); color: #fff; }

.bip-btn--whatsapp {
	background: #25d366;
	color: #06301a;
}

.bip-btn--whatsapp:hover { background: #1fbb59; color: #06301a; }

.bip-btn--block { width: 100%; }

.bip-btn--sm {
	/* 44px keeps even the compact variant a comfortable target. */
	min-height: 44px;
	padding: 0.5rem 1.05rem;
	font-size: var(--bip-text-xs);
}

.bip-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.bip-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-weight: 650;
	font-size: var(--bip-text-sm);
	text-decoration: none;
}

.bip-link-arrow::after {
	content: "→";
	transition: transform 0.16s var(--bip-ease);
}

.bip-link-arrow:hover { text-decoration: underline; }
.bip-link-arrow:hover::after { transform: translateX(3px); }

.bip-icon {
	width: 24px;
	height: 24px;
	flex: none;
}

/* ------------------------------------------------------------- 5. Header */

.bip-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--bip-violet);
	color: var(--bip-cream);
	border-bottom: 1px solid var(--bip-line-dark);
}

.bip-header__inner {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	min-height: var(--bip-header-h);
}

.bip-header__brand {
	display: inline-flex;
	align-items: center;
	flex: none;
	margin-right: auto;
	text-decoration: none;
	border-radius: 6px;
}

.bip-logo { display: block; width: auto; }
.bip-logo--light, .bip-logo--dark { height: 38px; }
.bip-logo--symbol { height: 34px; }

.bip-header__brand .custom-logo { height: 38px; width: auto; }

.bip-nav__list {
	display: flex;
	align-items: center;
	gap: 0.15rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bip-nav__list li { margin: 0; }

.bip-nav__list a {
	display: block;
	padding: 0.5rem 0.72rem;
	color: var(--bip-cream);
	font-size: var(--bip-text-sm);
	font-weight: 550;
	text-decoration: none;
	border-radius: var(--bip-radius-sm);
	white-space: nowrap;
	transition: background-color 0.15s var(--bip-ease), color 0.15s var(--bip-ease);
}

.bip-nav__list a:hover {
	background: rgba(246, 243, 235, 0.1);
	color: #fff;
}

.bip-nav__list .current-menu-item > a,
.bip-nav__list .current_page_item > a,
.bip-nav__list .current-menu-ancestor > a {
	color: var(--bip-yellow);
}

/* Sub-menus */
.bip-nav__list .sub-menu {
	position: absolute;
	z-index: 20;
	min-width: 230px;
	margin: 0;
	padding: 0.45rem;
	list-style: none;
	background: var(--bip-violet-800);
	border: 1px solid var(--bip-line-dark);
	border-radius: var(--bip-radius);
	box-shadow: 0 20px 44px rgba(0, 0, 0, 0.45);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.16s var(--bip-ease), transform 0.16s var(--bip-ease), visibility 0.16s;
}

.bip-nav__list > .menu-item-has-children { position: relative; }

.bip-nav__list > .menu-item-has-children:hover > .sub-menu,
.bip-nav__list > .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.bip-nav__list .sub-menu a { white-space: normal; }

.bip-header__actions {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex: none;
}

.bip-header__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--bip-line-dark);
	border-radius: var(--bip-radius-sm);
	color: var(--bip-cream);
	cursor: pointer;
}

.bip-header__toggle:hover { background: rgba(246, 243, 235, 0.1); }

.bip-burger {
	position: relative;
	display: block;
	width: 20px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: background-color 0.15s var(--bip-ease);
}

.bip-burger::before,
.bip-burger::after {
	content: "";
	position: absolute;
	left: 0;
	width: 20px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform 0.2s var(--bip-ease), top 0.2s var(--bip-ease);
}

.bip-burger::before { top: -6px; }
.bip-burger::after { top: 6px; }

[aria-expanded="true"] .bip-burger { background: transparent; }
[aria-expanded="true"] .bip-burger::before { top: 0; transform: rotate(45deg); }
[aria-expanded="true"] .bip-burger::after { top: 0; transform: rotate(-45deg); }

/* Mobile panel */
.bip-mobile-nav {
	position: fixed;
	inset: var(--bip-header-h) 0 0;
	z-index: 95;
	display: flex;
	flex-direction: column;
	padding: 1.5rem var(--bip-gutter) calc(2rem + env(safe-area-inset-bottom));
	background: var(--bip-violet);
	overflow-y: auto;
	overscroll-behavior: contain;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	/*
	 * visibility steps rather than eases. Transitioning it plainly leaves the
	 * panel computing as `hidden` for the first frame after it opens, and a
	 * hidden subtree refuses focus — so the focus trap silently did nothing.
	 * Delaying it by the length of the fade keeps the panel in the
	 * accessibility tree while it animates out, and the open state below
	 * flips it on with no delay so focus can move in immediately.
	 */
	transition: opacity 0.2s var(--bip-ease), transform 0.2s var(--bip-ease),
		visibility 0s linear 0.2s;
}

.bip-mobile-nav[data-open="true"] {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity 0.2s var(--bip-ease), transform 0.2s var(--bip-ease),
		visibility 0s linear 0s;
}

.bip-mobile-nav ul {
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

.bip-mobile-nav li { margin: 0; }

.bip-mobile-nav .sub-menu {
	margin: 0.25rem 0 0.5rem 0.9rem;
	padding-left: 0.85rem;
	border-left: 1px solid var(--bip-line-dark);
}

.bip-mobile-nav a:not(.bip-btn) {
	display: block;
	padding: 0.85rem 0.25rem;
	color: var(--bip-cream);
	font-size: 1.1rem;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid var(--bip-line-dark);
}

.bip-mobile-nav .sub-menu a {
	font-size: var(--bip-text-base);
	font-weight: 500;
	color: var(--bip-ink-invert-muted);
	border-bottom: 0;
	padding-block: 0.6rem;
}

.bip-mobile-nav .current-menu-item > a { color: var(--bip-yellow); }

.bip-mobile-nav__actions {
	display: grid;
	gap: 0.65rem;
	margin-top: auto;
	padding-top: 1.5rem;
}

.bip-mobile-nav__contact {
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--bip-line-dark);
	font-size: var(--bip-text-sm);
	color: var(--bip-ink-invert-muted);
}

.bip-mobile-nav__contact a { color: var(--bip-yellow); }

body.bip-nav-open { overflow: hidden; }

@media (max-width: 1023px) {
	.bip-header__nav { display: none; }
	.bip-header__toggle { display: inline-flex; }
	.bip-header__actions .bip-btn--whatsapp { display: none; }
}

@media (min-width: 1024px) {
	.bip-mobile-nav { display: none; }
}

/* ------------------------------------------------------------- 6. Footer */

.bip-footer {
	background: var(--bip-violet);
	color: var(--bip-ink-invert-muted);
	padding-top: clamp(3rem, 5vw, 4.5rem);
	font-size: var(--bip-text-sm);
}

.bip-footer__grid {
	display: grid;
	gap: 2.5rem 2rem;
	grid-template-columns: 1fr;
	padding-bottom: 2.75rem;
}

@media (min-width: 640px) {
	.bip-footer__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
	.bip-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; }
}

.bip-footer__about p { margin-bottom: 1.25rem; max-width: 34ch; }
.bip-footer__brand { display: inline-block; margin-bottom: 1.1rem; }

.bip-footer h2 {
	margin-bottom: 1rem;
	color: var(--bip-cream);
	font-size: var(--bip-text-sm);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.bip-footer ul { margin: 0; padding: 0; list-style: none; }
.bip-footer li { margin-bottom: 0.6rem; }

.bip-footer a:not(.bip-btn) {
	color: var(--bip-ink-invert-muted);
	text-decoration: none;
}

.bip-footer a:not(.bip-btn):hover {
	color: var(--bip-yellow);
	text-decoration: underline;
}

.bip-footer__contact li {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	margin-bottom: 0.85rem;
}

.bip-footer__contact .bip-icon {
	width: 19px;
	height: 19px;
	margin-top: 0.22rem;
	color: var(--bip-yellow);
}

.bip-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.35rem 0 calc(1.35rem + env(safe-area-inset-bottom));
	border-top: 1px solid var(--bip-line-dark);
	font-size: var(--bip-text-xs);
}

.bip-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.15rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bip-footer__legal li { margin: 0; }

/* Leaves room for the floating contact button on small screens. */
@media (max-width: 767px) {
	.bip-footer__bottom { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
}

/* --------------------------------------------------------------- 7. Hero */

.bip-hero {
	position: relative;
	background: var(--bip-violet);
	color: var(--bip-ink-invert);
	overflow: hidden;
}

.bip-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(90% 70% at 88% 18%, rgba(244, 229, 76, 0.13), transparent 62%),
		radial-gradient(70% 60% at 6% 92%, rgba(75, 47, 176, 0.45), transparent 70%);
	pointer-events: none;
}

.bip-hero__inner {
	position: relative;
	display: grid;
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: center;
	padding-block: clamp(2.75rem, 5vw, 5rem);
}

@media (min-width: 900px) {
	.bip-hero__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	}
}

.bip-hero__content { max-width: 36rem; }

.bip-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1.35rem;
	padding: 0.42rem 0.95rem 0.42rem 0.55rem;
	background: rgba(244, 229, 76, 0.12);
	border: 1px solid rgba(244, 229, 76, 0.32);
	border-radius: var(--bip-radius-pill);
	color: var(--bip-yellow);
	font-size: var(--bip-text-xs);
	font-weight: 650;
	letter-spacing: 0.02em;
}

.bip-hero__badge .bip-icon { width: 18px; height: 18px; }

.bip-hero__title {
	margin-bottom: 0.6rem;
	font-size: var(--bip-text-hero);
	line-height: 1.04;
	letter-spacing: -0.03em;
	color: #fff;
}

.bip-hero__title em {
	font-style: normal;
	color: var(--bip-yellow);
}

.bip-hero__lede {
	margin-bottom: 1.6rem;
	font-size: var(--bip-text-lg);
	color: var(--bip-ink-invert-muted);
	max-width: 34rem;
}

.bip-hero__points {
	display: grid;
	gap: 0.55rem 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	margin: 0 0 1.85rem;
	padding: 0;
	list-style: none;
}

.bip-hero__points li {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	margin: 0;
	font-size: var(--bip-text-sm);
	color: var(--bip-cream);
}

.bip-hero__points .bip-icon {
	width: 20px;
	height: 20px;
	margin-top: 0.14rem;
	color: var(--bip-yellow);
}

.bip-hero__note {
	margin-top: 1.3rem;
	font-size: var(--bip-text-xs);
	color: var(--bip-ink-invert-muted);
}

.bip-hero__media { position: relative; }

.bip-hero__media .bip-picture {
	border-radius: var(--bip-radius-lg);
	overflow: hidden;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

/* Separate desktop and portrait mobile compositions from the asset pack. */
.bip-hero__media--desktop { display: none; }

@media (min-width: 641px) {
	.bip-hero__media--desktop { display: block; }
	.bip-hero__media--mobile { display: none; }
}

@media (max-width: 640px) {
	.bip-hero__media { max-width: 420px; margin-inline: auto; }
}

/* Page hero used by every inner page. */
.bip-page-hero {
	position: relative;
	background: var(--bip-violet);
	color: var(--bip-ink-invert);
	padding-block: clamp(2.25rem, 4vw, 3.75rem);
	overflow: hidden;
}

.bip-page-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(70% 120% at 85% 0%, rgba(244, 229, 76, 0.12), transparent 60%);
	pointer-events: none;
}

.bip-page-hero__inner { position: relative; max-width: 48rem; }

.bip-page-hero h1 {
	margin-bottom: 0.4em;
	color: #fff;
}

.bip-page-hero__lede {
	margin: 0;
	font-size: var(--bip-text-lg);
	color: var(--bip-ink-invert-muted);
}

.bip-breadcrumbs {
	margin-bottom: 1.1rem;
	font-size: var(--bip-text-xs);
}

.bip-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 0.55rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bip-breadcrumbs li {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0;
	color: var(--bip-ink-invert-muted);
}

.bip-breadcrumbs li + li::before {
	content: "/";
	opacity: 0.45;
}

.bip-breadcrumbs a { color: var(--bip-ink-invert-muted); text-decoration: none; }
.bip-breadcrumbs a:hover { color: var(--bip-yellow); text-decoration: underline; }
.bip-breadcrumbs [aria-current="page"] { color: var(--bip-cream); }

/* --------------------------------------------------------- 8. Split rows */

.bip-split {
	display: grid;
	gap: clamp(2rem, 4vw, 4rem);
	align-items: center;
}

@media (min-width: 900px) {
	.bip-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bip-split--media-first .bip-split__media { order: -1; }
	.bip-split--wide-text { grid-template-columns: 1.15fr 1fr; }
}

.bip-split__body > :last-child { margin-bottom: 0; }

.bip-checklist {
	margin: 1.5rem 0;
	padding: 0;
	list-style: none;
}

.bip-checklist li {
	position: relative;
	display: flex;
	gap: 0.7rem;
	align-items: flex-start;
	margin-bottom: 0.85rem;
	font-size: var(--bip-text-sm);
}

.bip-checklist .bip-icon {
	width: 21px;
	height: 21px;
	margin-top: 0.16rem;
	color: var(--bip-action);
}

.bip-panel--dark .bip-checklist .bip-icon { color: var(--bip-yellow); }

.bip-checklist strong { display: block; }

/* ------------------------------------------------------------- 9. Grids */

.bip-grid {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
}

.bip-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.bip-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }

/* ------------------------------------------------------- 10. Feature card */

.bip-card {
	display: flex;
	flex-direction: column;
	padding: 1.6rem;
	background: var(--bip-surface);
	border: 1px solid var(--bip-line);
	border-radius: var(--bip-radius);
	box-shadow: var(--bip-shadow-sm);
	transition: transform 0.18s var(--bip-ease), box-shadow 0.18s var(--bip-ease),
		border-color 0.18s var(--bip-ease);
}

.bip-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--bip-shadow);
	border-color: var(--bip-line-strong);
}

.bip-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-bottom: 1.1rem;
	background: var(--bip-violet);
	border-radius: 13px;
	color: var(--bip-yellow);
}

.bip-card__icon .bip-icon { width: 23px; height: 23px; }

.bip-card h3 {
	margin-bottom: 0.45rem;
	font-size: var(--bip-text-lg);
}

.bip-card p {
	margin: 0;
	font-size: var(--bip-text-sm);
	color: var(--bip-ink-muted);
}

.bip-card__foot { margin-top: auto; padding-top: 1.1rem; }

.bip-panel--dark .bip-card {
	background: var(--bip-violet-800);
	border-color: var(--bip-line-dark);
	box-shadow: none;
}

.bip-panel--dark .bip-card:hover { border-color: rgba(244, 229, 76, 0.35); }
.bip-panel--dark .bip-card p { color: var(--bip-ink-invert-muted); }

.bip-panel--dark .bip-card__icon {
	background: rgba(244, 229, 76, 0.13);
	color: var(--bip-yellow);
}

/* ------------------------------------------------------ 11. Pricing cards */

.bip-plans {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 258px), 1fr));
	align-items: start;
}

.bip-plan {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 1.75rem 1.5rem 1.5rem;
	background: var(--bip-violet-800);
	border: 1px solid var(--bip-line-dark);
	border-radius: var(--bip-radius-lg);
	color: var(--bip-ink-invert);
	transition: transform 0.18s var(--bip-ease), border-color 0.18s var(--bip-ease),
		box-shadow 0.18s var(--bip-ease);
}

.bip-plan:hover {
	transform: translateY(-3px);
	border-color: rgba(244, 229, 76, 0.4);
	box-shadow: 0 22px 50px rgba(0, 0, 0, 0.42);
}

.bip-plan--featured {
	border-color: var(--bip-yellow);
	background: linear-gradient(170deg, #241549 0%, var(--bip-violet-800) 58%);
	box-shadow: 0 22px 54px rgba(0, 0, 0, 0.42);
}

.bip-plan__flag {
	display: inline-flex;
	align-self: flex-start;
	margin-bottom: 0.9rem;
	padding: 0.3rem 0.75rem;
	background: var(--bip-yellow);
	border-radius: var(--bip-radius-pill);
	color: var(--bip-violet);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.bip-plan__name {
	margin-bottom: 0.35rem;
	color: #fff;
	font-size: var(--bip-text-xl);
}

.bip-plan__summary {
	margin-bottom: 1.15rem;
	font-size: var(--bip-text-sm);
	color: var(--bip-ink-invert-muted);
	min-height: 2.9em;
}

.bip-plan__price {
	display: flex;
	align-items: baseline;
	gap: 0.3rem;
	margin-bottom: 0.2rem;
	color: var(--bip-yellow);
	font-size: clamp(2.1rem, 3vw, 2.6rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
}

.bip-plan__term {
	font-size: var(--bip-text-sm);
	font-weight: 550;
	color: var(--bip-ink-invert-muted);
	letter-spacing: 0;
}

.bip-plan__permonth {
	margin-bottom: 1.35rem;
	font-size: var(--bip-text-xs);
	color: var(--bip-ink-invert-muted);
}

.bip-plan__features {
	margin: 0 0 1.5rem;
	padding: 1.25rem 0 0;
	border-top: 1px solid var(--bip-line-dark);
	list-style: none;
	font-size: var(--bip-text-sm);
}

.bip-plan__features li {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	margin-bottom: 0.7rem;
	color: var(--bip-ink-invert-muted);
}

.bip-plan__features .bip-icon {
	width: 19px;
	height: 19px;
	margin-top: 0.2rem;
	color: var(--bip-yellow);
}

.bip-plan__cta { margin-top: auto; }

.bip-plan__note {
	margin: 0.8rem 0 0;
	font-size: var(--bip-text-xs);
	color: var(--bip-ink-invert-muted);
	text-align: center;
}

.bip-plans-note {
	max-width: 62ch;
	margin: 2.25rem auto 0;
	padding: 1.15rem 1.35rem;
	background: rgba(246, 243, 235, 0.06);
	border: 1px solid var(--bip-line-dark);
	border-radius: var(--bip-radius);
	font-size: var(--bip-text-sm);
	color: var(--bip-ink-invert-muted);
	text-align: center;
}

/* Comparison table on the plans page. */
.bip-compare { overflow-x: auto; }

.bip-compare table { min-width: 560px; margin: 0; }

.bip-compare th,
.bip-compare td {
	border-bottom: 1px solid var(--bip-line);
	white-space: nowrap;
}

.bip-compare th { background: var(--bip-surface-alt); }
.bip-compare td:first-child, .bip-compare th:first-child { white-space: normal; }
.bip-compare tbody th { font-weight: 600; }

/* ------------------------------------------------- 12. Category showcase */

.bip-categories {
	display: grid;
	gap: 1.1rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 255px), 1fr));
}

.bip-category {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 232px;
	padding: 1.35rem;
	border-radius: var(--bip-radius);
	border: 1px solid var(--bip-line-dark);
	overflow: hidden;
	isolation: isolate;
}

.bip-category img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
	transition: transform 0.4s var(--bip-ease);
}

.bip-category::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to top, rgba(16, 8, 36, 0.94) 14%, rgba(16, 8, 36, 0.62) 52%, rgba(16, 8, 36, 0.22) 100%);
}

.bip-category:hover img { transform: scale(1.045); }

.bip-category__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin-bottom: 0.7rem;
	background: rgba(244, 229, 76, 0.16);
	border-radius: 11px;
	color: var(--bip-yellow);
}

.bip-category__icon .bip-icon { width: 20px; height: 20px; }

.bip-category h3 {
	margin-bottom: 0.3rem;
	color: #fff;
	font-size: var(--bip-text-lg);
}

.bip-category p {
	margin: 0;
	font-size: var(--bip-text-sm);
	color: rgba(246, 243, 235, 0.86);
}

/* ---------------------------------------------------- 13. Device cards */

.bip-device {
	display: flex;
	flex-direction: column;
	padding: 1.5rem;
	background: var(--bip-surface);
	border: 1px solid var(--bip-line);
	border-radius: var(--bip-radius);
	box-shadow: var(--bip-shadow-sm);
	transition: transform 0.18s var(--bip-ease), box-shadow 0.18s var(--bip-ease);
}

.bip-device:hover { transform: translateY(-3px); box-shadow: var(--bip-shadow); }

.bip-device__head {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin-bottom: 0.9rem;
}

.bip-device__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	flex: none;
	background: var(--bip-surface-alt);
	border: 1px solid var(--bip-line);
	border-radius: 12px;
	color: var(--bip-action);
}

.bip-device__icon .bip-icon { width: 22px; height: 22px; }

.bip-device h3 { margin: 0; font-size: var(--bip-text-lg); }

.bip-device__short {
	margin: 0.15rem 0 0;
	font-size: var(--bip-text-xs);
	color: var(--bip-ink-muted);
}

.bip-device p {
	font-size: var(--bip-text-sm);
	color: var(--bip-ink-muted);
}

.bip-device__app {
	margin: 0.9rem 0 0;
	padding: 0.7rem 0.85rem;
	background: var(--bip-surface-alt);
	border-radius: var(--bip-radius-sm);
	font-size: var(--bip-text-xs);
	color: var(--bip-ink-muted);
}

.bip-device__app strong { color: var(--bip-ink); }

.bip-device__foot { margin-top: auto; padding-top: 1.1rem; }

/* ----------------------------------------------------------- 14. Steps */

.bip-steps {
	display: grid;
	gap: 1.1rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr));
	counter-reset: bip-step;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bip-step {
	position: relative;
	margin: 0;
	padding: 1.5rem 1.35rem 1.35rem;
	background: var(--bip-surface);
	border: 1px solid var(--bip-line);
	border-radius: var(--bip-radius);
	counter-increment: bip-step;
}

.bip-step::before {
	content: counter(bip-step);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin-bottom: 0.85rem;
	background: var(--bip-yellow);
	border-radius: 50%;
	color: var(--bip-violet);
	font-size: var(--bip-text-sm);
	font-weight: 700;
}

.bip-step h3 { margin-bottom: 0.35rem; font-size: var(--bip-text-base); }

.bip-step p {
	margin: 0;
	font-size: var(--bip-text-sm);
	color: var(--bip-ink-muted);
}

.bip-panel--alt .bip-step { background: var(--bip-surface); }

/* Numbered list used inside the installation guides. */
.bip-numbered {
	counter-reset: bip-num;
	margin: 1.5rem 0;
	padding: 0;
	list-style: none;
}

.bip-numbered > li {
	position: relative;
	margin-bottom: 1.15rem;
	padding-left: 3rem;
	counter-increment: bip-num;
}

.bip-numbered > li::before {
	content: counter(bip-num);
	position: absolute;
	left: 0;
	top: -0.1rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: var(--bip-violet);
	border-radius: 50%;
	color: var(--bip-yellow);
	font-size: var(--bip-text-sm);
	font-weight: 700;
}

.bip-numbered > li > strong { display: block; margin-bottom: 0.2rem; }

/* ------------------------------------------------------------- 15. FAQ */

.bip-faq {
	max-width: 52rem;
	margin-inline: auto;
}

.bip-faq__item {
	border: 1px solid var(--bip-line);
	border-radius: var(--bip-radius);
	background: var(--bip-surface);
	margin-bottom: 0.7rem;
	overflow: hidden;
	transition: border-color 0.18s var(--bip-ease), box-shadow 0.18s var(--bip-ease);
}

.bip-faq__item[open] {
	border-color: var(--bip-line-strong);
	box-shadow: var(--bip-shadow-sm);
}

.bip-faq__q {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.05rem 1.25rem;
	font-size: var(--bip-text-base);
	font-weight: 650;
	cursor: pointer;
	list-style: none;
}

.bip-faq__q::-webkit-details-marker { display: none; }

.bip-faq__q:hover { background: var(--bip-surface-alt); }

.bip-faq__q:focus-visible {
	outline: 3px solid var(--bip-action);
	outline-offset: -3px;
}

.bip-faq__sign {
	position: relative;
	flex: none;
	width: 22px;
	height: 22px;
	margin-top: 0.18rem;
	border-radius: 50%;
	background: var(--bip-surface-alt);
	border: 1px solid var(--bip-line);
}

.bip-faq__sign::before,
.bip-faq__sign::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 2px;
	background: var(--bip-ink);
	border-radius: 2px;
	transform: translate(-50%, -50%);
	transition: transform 0.2s var(--bip-ease), opacity 0.2s var(--bip-ease);
}

.bip-faq__sign::after { transform: translate(-50%, -50%) rotate(90deg); }

.bip-faq__item[open] .bip-faq__sign::after {
	transform: translate(-50%, -50%) rotate(0deg);
	opacity: 0;
}

.bip-faq__a {
	padding: 0 1.25rem 1.25rem;
	font-size: var(--bip-text-sm);
	color: var(--bip-ink-muted);
	max-width: 66ch;
}

.bip-faq__a > :last-child { margin-bottom: 0; }

/* -------------------------------------------------------- 16. CTA panel */

.bip-cta {
	position: relative;
	background: var(--bip-violet);
	color: var(--bip-ink-invert);
	overflow: hidden;
}

.bip-cta__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right center;
	opacity: 0.9;
	pointer-events: none;
}

.bip-cta__inner {
	position: relative;
	max-width: 44rem;
	padding-block: clamp(3rem, 5vw, 4.75rem);
}

.bip-cta h2 {
	margin-bottom: 0.45em;
	color: #fff;
	font-size: var(--bip-text-3xl);
}

.bip-cta p {
	margin-bottom: 1.85rem;
	font-size: var(--bip-text-lg);
	color: var(--bip-ink-invert-muted);
	max-width: 36rem;
}

/* ----------------------------------------------------- 17. Contact cards */

.bip-contact-grid {
	display: grid;
	gap: 1.1rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.bip-contact-card {
	display: flex;
	flex-direction: column;
	padding: 1.6rem;
	background: var(--bip-surface);
	border: 1px solid var(--bip-line);
	border-radius: var(--bip-radius);
	box-shadow: var(--bip-shadow-sm);
}

.bip-contact-card--accent {
	background: var(--bip-violet);
	border-color: var(--bip-violet);
	color: var(--bip-ink-invert);
}

.bip-contact-card--accent h3 { color: #fff; }
.bip-contact-card--accent p { color: var(--bip-ink-invert-muted); }

.bip-contact-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: 1rem;
	border-radius: 12px;
	background: var(--bip-surface-alt);
	color: var(--bip-action);
}

.bip-contact-card--accent .bip-contact-card__icon {
	background: rgba(244, 229, 76, 0.15);
	color: var(--bip-yellow);
}

.bip-contact-card h3 { margin-bottom: 0.35rem; font-size: var(--bip-text-lg); }

.bip-contact-card p {
	margin: 0 0 1.25rem;
	font-size: var(--bip-text-sm);
	color: var(--bip-ink-muted);
}

.bip-contact-card__action { margin-top: auto; }

.bip-contact-link {
	font-size: var(--bip-text-lg);
	font-weight: 650;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* ------------------------------------------------------------ 18. Forms */

.bip-form {
	max-width: 40rem;
	padding: 1.75rem;
	background: var(--bip-surface);
	border: 1px solid var(--bip-line);
	border-radius: var(--bip-radius-lg);
	box-shadow: var(--bip-shadow-sm);
}

.bip-field { margin-bottom: 1.15rem; }

.bip-field > label,
.bip-field > .bip-field__label {
	display: block;
	margin-bottom: 0.38rem;
	font-size: var(--bip-text-sm);
	font-weight: 650;
}

.bip-field__hint {
	display: block;
	margin-bottom: 0.4rem;
	font-size: var(--bip-text-xs);
	color: var(--bip-ink-muted);
	font-weight: 400;
}

.bip-field input[type="text"],
.bip-field input[type="email"],
.bip-field input[type="tel"],
.bip-field input[type="search"],
.bip-field select,
.bip-field textarea,
.bip-input {
	width: 100%;
	min-height: 48px;
	padding: 0.7rem 0.85rem;
	background: var(--bip-bg);
	border: 1px solid var(--bip-line-strong);
	border-radius: var(--bip-radius-sm);
	color: var(--bip-ink);
	font: inherit;
	font-size: var(--bip-text-sm);
	transition: border-color 0.15s var(--bip-ease), box-shadow 0.15s var(--bip-ease);
}

.bip-field textarea { min-height: 150px; resize: vertical; line-height: 1.6; }

.bip-field select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235c5470' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.85rem center;
	padding-right: 2.5rem;
}

.bip-field input:focus,
.bip-field select:focus,
.bip-field textarea:focus {
	border-color: var(--bip-action);
	box-shadow: 0 0 0 3px rgba(75, 47, 176, 0.18);
	outline: none;
}

.bip-field--error input,
.bip-field--error select,
.bip-field--error textarea {
	border-color: #b3261e;
}

.bip-field__error {
	display: block;
	margin-top: 0.35rem;
	font-size: var(--bip-text-xs);
	font-weight: 600;
	color: #8c1d18;
}

.bip-form__honeypot {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.bip-notice {
	margin-bottom: 1.5rem;
	padding: 1rem 1.15rem;
	border-radius: var(--bip-radius-sm);
	border-left: 4px solid;
	font-size: var(--bip-text-sm);
}

.bip-notice > :last-child { margin-bottom: 0; }

.bip-notice--success {
	background: #ecf7ef;
	border-color: #1e7b3c;
	color: #14532a;
}

.bip-notice--warning {
	background: #fdf5e3;
	border-color: #b7791f;
	color: #6b4708;
}

.bip-notice--error {
	background: #fdeceb;
	border-color: #b3261e;
	color: #7d1710;
}

.bip-notice--info {
	background: var(--bip-surface-alt);
	border-color: var(--bip-action);
	color: var(--bip-ink);
}

.bip-notice a { color: inherit; font-weight: 650; }

/* Search form */
.bip-searchform {
	display: flex;
	gap: 0.55rem;
	align-items: stretch;
}

.bip-searchform .bip-input { flex: 1 1 auto; }

/* ------------------------------------------------- 19. Blog and article */

.bip-posts {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.bip-post-card {
	display: flex;
	flex-direction: column;
	background: var(--bip-surface);
	border: 1px solid var(--bip-line);
	border-radius: var(--bip-radius);
	overflow: hidden;
	box-shadow: var(--bip-shadow-sm);
	transition: transform 0.18s var(--bip-ease), box-shadow 0.18s var(--bip-ease);
}

.bip-post-card:hover { transform: translateY(-3px); box-shadow: var(--bip-shadow); }

.bip-post-card__media {
	aspect-ratio: 16 / 9;
	background: var(--bip-surface-sunken);
	overflow: hidden;
}

.bip-post-card__media img { width: 100%; height: 100%; object-fit: cover; }

.bip-post-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.35rem;
}

.bip-post-card h2, .bip-post-card h3 {
	margin-bottom: 0.45rem;
	font-size: var(--bip-text-lg);
}

.bip-post-card h2 a, .bip-post-card h3 a {
	color: inherit;
	text-decoration: none;
}

.bip-post-card h2 a:hover, .bip-post-card h3 a:hover {
	color: var(--bip-action);
	text-decoration: underline;
}

.bip-post-card p {
	font-size: var(--bip-text-sm);
	color: var(--bip-ink-muted);
}

.bip-post-card__meta,
.bip-entry__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 0.9rem;
	margin-bottom: 0.65rem;
	font-size: var(--bip-text-xs);
	color: var(--bip-ink-muted);
}

.bip-post-card__foot { margin-top: auto; padding-top: 1rem; }

.bip-blog-layout {
	display: grid;
	gap: clamp(2rem, 4vw, 3.5rem);
}

@media (min-width: 1000px) {
	.bip-blog-layout:not(.bip-blog-layout--full) {
		grid-template-columns: minmax(0, 1fr) 300px;
	}
}

.bip-entry {
	max-width: var(--bip-container-narrow);
}

.bip-entry__content h2 { margin-top: 2.1em; font-size: var(--bip-text-2xl); }
.bip-entry__content h3 { margin-top: 1.7em; font-size: var(--bip-text-xl); }
.bip-entry__content h4 { margin-top: 1.5em; }
.bip-entry__content > :first-child { margin-top: 0; }

.bip-entry__content img,
.bip-entry__content .wp-block-image { border-radius: var(--bip-radius); overflow: hidden; }

.bip-entry__thumb {
	margin-bottom: 2rem;
	border-radius: var(--bip-radius-lg);
	overflow: hidden;
}

.bip-entry__footer {
	margin-top: 2.5rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--bip-line);
}

.bip-post-nav {
	display: grid;
	gap: 1rem;
	margin-top: 2rem;
}

@media (min-width: 640px) { .bip-post-nav { grid-template-columns: 1fr 1fr; } }

.bip-post-nav a {
	display: block;
	padding: 1.1rem 1.25rem;
	background: var(--bip-surface-alt);
	border-radius: var(--bip-radius);
	text-decoration: none;
	color: var(--bip-ink);
}

.bip-post-nav a:hover { background: var(--bip-surface-sunken); }

.bip-post-nav span {
	display: block;
	margin-bottom: 0.25rem;
	font-size: var(--bip-text-xs);
	color: var(--bip-ink-muted);
}

.bip-post-nav strong { font-size: var(--bip-text-sm); }
.bip-post-nav .bip-post-nav__next { text-align: right; }

.bip-widget {
	margin-bottom: 2rem;
	padding: 1.4rem;
	background: var(--bip-surface-alt);
	border-radius: var(--bip-radius);
}

.bip-widget__title { margin-bottom: 0.85rem; font-size: var(--bip-text-base); }
.bip-widget ul { margin: 0; padding: 0; list-style: none; font-size: var(--bip-text-sm); }
.bip-widget li { margin-bottom: 0.5rem; }

.bip-aside-cta {
	padding: 1.5rem;
	background: var(--bip-violet);
	border-radius: var(--bip-radius);
	color: var(--bip-ink-invert);
}

.bip-aside-cta h2 { color: #fff; font-size: var(--bip-text-lg); margin-bottom: 0.5rem; }
.bip-aside-cta p { font-size: var(--bip-text-sm); color: var(--bip-ink-invert-muted); margin-bottom: 1.15rem; }

.bip-pagination {
	margin-top: 2.5rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--bip-line);
}

.bip-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	align-items: center;
}

.bip-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 0.7rem;
	background: var(--bip-surface-alt);
	border-radius: var(--bip-radius-sm);
	color: var(--bip-ink);
	font-size: var(--bip-text-sm);
	font-weight: 600;
	text-decoration: none;
}

.bip-pagination .page-numbers:hover { background: var(--bip-surface-sunken); }

.bip-pagination .page-numbers.current {
	background: var(--bip-violet);
	color: var(--bip-yellow);
}

/* Comments */
.bip-comments { margin-top: 3rem; max-width: var(--bip-container-narrow); }
.bip-comments ol.comment-list { margin: 0 0 2rem; padding: 0; list-style: none; }
.bip-comments ol.children { list-style: none; padding-left: 1.5rem; }

.bip-comments .comment-body {
	padding: 1.25rem;
	margin-bottom: 1rem;
	background: var(--bip-surface-alt);
	border-radius: var(--bip-radius);
}

.bip-comments .comment-meta {
	margin-bottom: 0.5rem;
	font-size: var(--bip-text-xs);
	color: var(--bip-ink-muted);
}

.bip-comments .comment-author img { border-radius: 50%; }

.bip-comments .comment-form p { margin-bottom: 1rem; }

.bip-comments .comment-form label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: var(--bip-text-sm);
	font-weight: 650;
}

.bip-comments .comment-form input[type="text"],
.bip-comments .comment-form input[type="email"],
.bip-comments .comment-form input[type="url"],
.bip-comments .comment-form textarea {
	width: 100%;
	min-height: 48px;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--bip-line-strong);
	border-radius: var(--bip-radius-sm);
	font: inherit;
	font-size: var(--bip-text-sm);
}

.bip-comments .comment-form textarea { min-height: 140px; }

.bip-comments .form-submit input {
	min-height: 48px;
	padding: 0.78rem 1.5rem;
	background: var(--bip-yellow);
	border: 0;
	border-radius: var(--bip-radius-pill);
	color: var(--bip-violet);
	font: inherit;
	font-weight: 650;
	cursor: pointer;
}

/* ------------------------------------------------- 20. Floating contact */

.bip-float {
	position: fixed;
	right: max(24px, env(safe-area-inset-right));
	bottom: max(24px, env(safe-area-inset-bottom));
	z-index: 90;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 52px;
	padding: 0.8rem 1.35rem;
	background: #25d366;
	border-radius: var(--bip-radius-pill);
	color: #06301a;
	font-size: var(--bip-text-sm);
	font-weight: 650;
	text-decoration: none;
	box-shadow: 0 6px 20px rgba(16, 8, 36, 0.28);
	transition: transform 0.18s var(--bip-ease), box-shadow 0.18s var(--bip-ease),
		opacity 0.18s var(--bip-ease), visibility 0.18s;
}

.bip-float:hover {
	transform: translateY(-2px);
	background: #1fbb59;
	color: #06301a;
	box-shadow: 0 10px 28px rgba(16, 8, 36, 0.34);
}

.bip-float .bip-icon--whatsapp { width: 24px; height: 24px; }

/* Hidden while the mobile menu is open so it cannot sit over the panel. */
body.bip-nav-open .bip-float {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

@media (max-width: 767px) {
	.bip-float {
		right: max(16px, env(safe-area-inset-right));
		bottom: max(16px, env(safe-area-inset-bottom));
		width: 56px;
		height: 56px;
		min-height: 56px;
		padding: 0;
		justify-content: center;
		gap: 0;
	}

	.bip-float__label {
		position: absolute !important;
		width: 1px; height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* ------------------------------------------------------- 21. 404 & misc */

.bip-404 { text-align: center; max-width: 42rem; margin-inline: auto; }
.bip-404__code {
	display: block;
	margin-bottom: 0.5rem;
	font-size: clamp(3.5rem, 9vw, 6rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--bip-yellow);
	-webkit-text-stroke: 2px var(--bip-violet);
}

.bip-404__links {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
	margin-top: 2.25rem;
	text-align: left;
}

.bip-404__links a {
	display: block;
	padding: 1rem 1.15rem;
	background: var(--bip-surface-alt);
	border-radius: var(--bip-radius);
	font-size: var(--bip-text-sm);
	font-weight: 650;
	text-decoration: none;
	color: var(--bip-ink);
}

.bip-404__links a:hover { background: var(--bip-surface-sunken); }

/* A short, honest policy-page layout. */
.bip-legal { max-width: var(--bip-container-narrow); }
.bip-legal h2 { margin-top: 2.25em; font-size: var(--bip-text-xl); }
.bip-legal h2:first-of-type { margin-top: 0; }
.bip-legal h3 { margin-top: 1.6em; font-size: var(--bip-text-lg); }

.bip-legal__updated {
	display: inline-block;
	margin-bottom: 2rem;
	padding: 0.4rem 0.85rem;
	background: var(--bip-surface-alt);
	border-radius: var(--bip-radius-pill);
	font-size: var(--bip-text-xs);
	color: var(--bip-ink-muted);
}

.bip-toc {
	margin: 0 0 2.5rem;
	padding: 1.35rem 1.5rem;
	background: var(--bip-surface-alt);
	border-radius: var(--bip-radius);
}

.bip-toc h2 { margin: 0 0 0.75rem; font-size: var(--bip-text-sm); text-transform: uppercase; letter-spacing: 0.08em; }
.bip-toc ul { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 1.5rem; font-size: var(--bip-text-sm); }
.bip-toc li { margin-bottom: 0.45rem; break-inside: avoid; }

@media (max-width: 560px) { .bip-toc ul { columns: 1; } }

.bip-callout {
	margin: 1.75rem 0;
	padding: 1.25rem 1.4rem;
	background: var(--bip-surface-alt);
	border-left: 4px solid var(--bip-yellow);
	border-radius: 0 var(--bip-radius-sm) var(--bip-radius-sm) 0;
	font-size: var(--bip-text-sm);
}

.bip-callout > :last-child { margin-bottom: 0; }
.bip-callout strong { color: var(--bip-ink); }

.bip-stat-row {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
	margin-top: 2rem;
}

.bip-stat {
	padding: 1.25rem;
	background: rgba(246, 243, 235, 0.06);
	border: 1px solid var(--bip-line-dark);
	border-radius: var(--bip-radius);
}

.bip-stat__value {
	display: block;
	margin-bottom: 0.2rem;
	color: var(--bip-yellow);
	font-size: var(--bip-text-xl);
	font-weight: 700;
	line-height: 1.2;
}

.bip-stat__label {
	font-size: var(--bip-text-xs);
	color: var(--bip-ink-invert-muted);
}

/* -------------------------------------------------- 22. Reduced motion */

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

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	.bip-btn:hover,
	.bip-card:hover,
	.bip-plan:hover,
	.bip-device:hover,
	.bip-post-card:hover,
	.bip-float:hover { transform: none; }

	.bip-category:hover img { transform: none; }
}

/* ------------------------------------------------------ 23. Small print */

@media (max-width: 480px) {
	:root { --bip-gutter: 1rem; }
}

@media print {
	.bip-header, .bip-footer, .bip-float, .bip-mobile-nav, .bip-cta { display: none !important; }
	body { color: #000; background: #fff; }
}

/* Header gains depth once the page has moved. */
.bip-header.is-scrolled {
	box-shadow: 0 6px 24px rgba(16, 8, 36, 0.28);
}

/* =========================================================================
   24. Dark-surface overrides
   -------------------------------------------------------------------------
   The hero, the inner-page hero and the closing call to action are dark
   panels, but they carry their own class rather than .bip-panel--dark. This
   block gathers every dark surface into one selector list so a component
   dropped into any of them inherits the right colours.

   Without it, a .bip-btn--secondary in the hero rendered #100824 text on a
   #100824 background — a 1:1 contrast ratio and completely unreadable.
   ====================================================================== */

.bip-hero,
.bip-page-hero,
.bip-cta,
.bip-panel--dark,
.bip-header,
.bip-footer,
.bip-mobile-nav,
.bip-contact-card--accent,
.bip-aside-cta {
	--bip-on-dark: 1;
}

/* Outlined buttons */
.bip-hero .bip-btn--secondary,
.bip-page-hero .bip-btn--secondary,
.bip-cta .bip-btn--secondary,
.bip-panel--dark .bip-btn--secondary,
.bip-header .bip-btn--secondary,
.bip-footer .bip-btn--secondary,
.bip-mobile-nav .bip-btn--secondary,
.bip-contact-card--accent .bip-btn--secondary,
.bip-aside-cta .bip-btn--secondary {
	color: var(--bip-cream);
	border-color: rgba(246, 243, 235, 0.3);
}

.bip-hero .bip-btn--secondary:hover,
.bip-page-hero .bip-btn--secondary:hover,
.bip-cta .bip-btn--secondary:hover,
.bip-panel--dark .bip-btn--secondary:hover,
.bip-header .bip-btn--secondary:hover,
.bip-footer .bip-btn--secondary:hover,
.bip-mobile-nav .bip-btn--secondary:hover,
.bip-contact-card--accent .bip-btn--secondary:hover,
.bip-aside-cta .bip-btn--secondary:hover {
	background: rgba(246, 243, 235, 0.12);
	color: #fff;
	border-color: rgba(246, 243, 235, 0.5);
}

/* Inline links */
.bip-hero a:not(.bip-btn),
.bip-cta a:not(.bip-btn),
.bip-contact-card--accent a:not(.bip-btn),
.bip-aside-cta a:not(.bip-btn) {
	color: var(--bip-yellow);
}

.bip-hero a:not(.bip-btn):hover,
.bip-cta a:not(.bip-btn):hover,
.bip-contact-card--accent a:not(.bip-btn):hover,
.bip-aside-cta a:not(.bip-btn):hover {
	color: #fff;
}

/* Eyebrows, ledes and checklist marks */
.bip-hero .bip-eyebrow,
.bip-page-hero .bip-eyebrow,
.bip-cta .bip-eyebrow,
.bip-contact-card--accent .bip-eyebrow,
.bip-aside-cta .bip-eyebrow {
	color: var(--bip-yellow);
}

.bip-hero .bip-lede,
.bip-page-hero .bip-lede,
.bip-cta .bip-lede,
.bip-contact-card--accent .bip-lede,
.bip-aside-cta .bip-lede {
	color: var(--bip-ink-invert-muted);
}

.bip-hero .bip-checklist .bip-icon,
.bip-cta .bip-checklist .bip-icon,
.bip-contact-card--accent .bip-checklist .bip-icon,
.bip-aside-cta .bip-checklist .bip-icon {
	color: var(--bip-yellow);
}

/* Focus rings need the light treatment on every dark surface. */
.bip-hero :focus-visible,
.bip-page-hero :focus-visible,
.bip-cta :focus-visible,
.bip-mobile-nav :focus-visible,
.bip-contact-card--accent :focus-visible,
.bip-aside-cta :focus-visible {
	outline-color: var(--bip-yellow);
}

/* A callout sitting on a dark surface. */
.bip-hero .bip-callout,
.bip-cta .bip-callout,
.bip-panel--dark .bip-callout {
	background: rgba(246, 243, 235, 0.07);
	border-left-color: var(--bip-yellow);
	color: var(--bip-ink-invert-muted);
}

.bip-panel--dark .bip-callout strong { color: var(--bip-cream); }

/* Numbered lists and tables on dark surfaces. */
.bip-panel--dark .bip-numbered > li::before {
	background: var(--bip-yellow);
	color: var(--bip-violet);
}

.bip-panel--dark th {
	background: rgba(246, 243, 235, 0.08);
	color: var(--bip-cream);
}

.bip-panel--dark th,
.bip-panel--dark td { border-bottom-color: var(--bip-line-dark); }

/* Form controls on a dark surface keep a light field so text stays legible. */
.bip-panel--dark .bip-field > label,
.bip-panel--dark .bip-field__hint { color: var(--bip-ink-invert-muted); }

/* -------------------------------------------------------------------------
   25. Cascade corrections
   -------------------------------------------------------------------------
   Two classes of ordering bug, both caught by an automated contrast pass:

   a) Broad descendant rules such as `.bip-footer a` (0,1,1) outrank the
      button modifiers `.bip-btn--primary` (0,1,0), so a call to action
      dropped into the footer, the pricing panel or the mobile menu inherited
      the surrounding link colour — yellow text on a yellow button. Those
      rules now carry :not(.bip-btn), and the modifiers are restated here so
      a button's own colour always wins wherever it is placed.

   b) `.bip-contact-card p` is declared after `.bip-contact-card--accent p`
      at equal specificity, so the accent card's light text lost to the dark
      body colour. Restated below, after both.
   ====================================================================== */

a.bip-btn--primary,
a.bip-btn--primary:hover,
a.bip-btn--primary:focus,
.bip-btn--primary { color: var(--bip-violet); }

a.bip-btn--whatsapp,
a.bip-btn--whatsapp:hover,
a.bip-btn--whatsapp:focus,
.bip-btn--whatsapp { color: #06301a; }

a.bip-btn--solid,
a.bip-btn--solid:hover,
a.bip-btn--solid:focus,
.bip-btn--solid { color: #fff; }

.bip-contact-card--accent h3 { color: #fff; }
.bip-contact-card--accent p { color: var(--bip-ink-invert-muted); }
.bip-contact-card--accent .bip-contact-link { color: var(--bip-yellow); }

/* =========================================================================
   26. Header fit between 1024px and 1200px
   -------------------------------------------------------------------------
   The desktop navigation appears at 1024px, but the full row — logo, seven
   links and the WhatsApp call to action — needs about 1200px. At 1024 it
   overflowed the viewport and put a horizontal scrollbar on every page.

   Between those widths the navigation tightens and the header's WhatsApp
   button stands down. Nothing is lost: the floating contact button is
   present at every width, and the button returns at 1200px.
   ====================================================================== */

@media (min-width: 1024px) and (max-width: 1199px) {
	.bip-header__actions .bip-btn--whatsapp { display: none; }

	.bip-nav__list { gap: 0; }

	.bip-nav__list a {
		padding: 0.5rem 0.5rem;
		font-size: var(--bip-text-xs);
	}

	.bip-header__brand .bip-logo,
	.bip-header__brand .custom-logo { height: 32px; }
}