/* Site-wide responsive refinements. Keep these rules last in the theme cascade. */
html {
	width: 100%;
	overflow-x: clip;
	 scroll-padding-top: calc(var(--header-h, 76px) + 16px);
}

body,
#page,
.site,
main,
header,
footer {
	min-width: 0;
}

img,
video,
iframe,
embed,
object {
	max-width: 100%;
}

iframe,
video {
	width: 100%;
}

button,
input,
select,
textarea {
	max-width: 100%;
}

.container,
.setup-tutorials .shell {
	width: min(100% - 48px, var(--container, 1200px));
	padding-inline: 0;
}

.container-narrow {
	width: min(100% - 48px, 820px);
}

.section,
.section-tight {
	padding-block: clamp(64px, 8vw, 120px);
}

.section-head,
.hero-copy,
.devices-copy,
.plan,
.post-card,
.review-card,
.editorial-card,
.setupbox,
.device-guide,
.help-layout > *,
.policy-layout > *,
.catalogue-guide > * {
	min-width: 0;
}

.hero h1,
.resource-hero h1,
.setup-hero h1,
.section-head h2 {
	font-size: clamp(2.25rem, 5.6vw, 4.7rem);
	text-wrap: balance;
}

.hero-text,
.resource-hero p,
.section-head p {
	text-wrap: pretty;
}

.btn,
.menu-toggle,
.theme-toggle,
.device-picker button,
.setup-tutorials button,
.catalogue-guide button {
	min-height: 44px;
}

.site-header,
.header-inner,
.header-actions,
.main-nav,
.main-nav > ul {
	min-width: 0;
}

.header-inner {
	gap: clamp(8px, 1.5vw, 22px);
}

@media (min-width: 961px) {
	.header-inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	}

	.header-inner > .logo { justify-self: start; }
	.header-inner > .main-nav { justify-self: center; }
	.header-inner > .header-actions { justify-self: end; }
}

.header-actions {
	flex-shrink: 0;
}

/* Keep the mobile menu attached to the header. The header receives a blur
   while open, which can otherwise become the containing block for fixed UI. */
@media (max-width: 960px) {
	.site-header {
		z-index: 1000;
	}

	.mobile-menu {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		bottom: auto;
		width: 100%;
		height: calc(100vh - var(--header-h));
		height: calc(100dvh - var(--header-h));
		max-height: calc(100dvh - var(--header-h));
		padding: 20px max(20px, calc((100vw - 720px) / 2));
		z-index: 1;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}

	.admin-bar .mobile-menu {
		height: calc(100dvh - var(--header-h) - 46px);
		max-height: calc(100dvh - var(--header-h) - 46px);
	}

	.menu-toggle {
		position: relative;
		z-index: 2;
		flex: 0 0 44px;
		width: 44px;
		height: 44px;
		padding: 0;
		touch-action: manipulation;
		-webkit-tap-highlight-color: transparent;
	}

	.mobile-menu nav a,
	.mobile-menu-cta .btn {
		min-height: 48px;
	}
}

.site-logo,
.custom-logo-link {
	flex-shrink: 0;
}

.hero-actions,
.header-actions,
.pricing-foot,
.footer-legal {
	flex-wrap: wrap;
}

.trial-grid > *,
.devices-grid > *,
.bento > *,
.plans > *,
.reviews > *,
.post-grid > *,
.editorial-grid > *,
.footer-grid > * {
	min-width: 0;
}

.payment-logos,
.hero-badges,
.trust-row {
	flex-wrap: wrap;
}

.payment-logos li,
.hero-badges > *,
.trust-row > * {
	min-width: 0;
}

.long-offer,
.cta-panel,
.resource-support,
.setup-tutorials .support-banner {
	min-width: 0;
}

.long-offer-copy,
.long-offer-price,
.resource-support > div,
.setup-tutorials .support-banner > * {
	min-width: 0;
	 overflow-wrap: anywhere;
}

.policy-copy,
.help-questions,
.setup-body,
.guide-steps,
.editorial-card p,
.post-card p {
	 overflow-wrap: anywhere;
}

.setup-tutorials .support-banner .btn {
	margin-left: 0;
}

@media (max-width: 1100px) {
	.container,
	.setup-tutorials .shell {
		width: min(100% - 40px, var(--container, 1200px));
	}

	.catalogue-guide {
		grid-template-columns: minmax(0, 1fr) minmax(210px, 250px);
		gap: clamp(14px, 2.5vw, 25px);
	}

	.setup-tutorials .setup-hero {
		gap: clamp(24px, 4vw, 48px);
	}

	.setup-tutorials .device-choice {
		gap: 9px;
		padding-inline: 10px;
	}
}

@media (max-width: 960px) {
	.catalogue-guide {
		grid-template-columns: minmax(0, 1fr) minmax(190px, 230px);
	}

	.catalogue-guide .app-row {
		grid-template-columns: 42px minmax(0, 1fr);
	}

	.catalogue-guide .catalogue-slot,
	.catalogue-guide .catalogue-row-arrow {
		display: none;
	}

	.section-head {
		margin-bottom: clamp(36px, 5vw, 56px);
	}

	.hero-grid {
		gap: clamp(40px, 7vw, 72px);
	}

	.trial-grid,
	.devices-grid,
	.faq-grid {
		gap: clamp(28px, 5vw, 48px);
	}
}

@media (max-width: 820px) {
	.catalogue-guide {
		grid-template-columns: minmax(0, 1fr);
	}

	.catalogue-preview {
		display: grid;
		grid-template-columns: minmax(150px, 38%) minmax(0, 1fr);
		align-items: center;
		gap: clamp(12px, 3vw, 24px);
		max-width: 620px;
		width: 100%;
		margin-inline: auto;
	}

	.catalogue-preview .tv-screen {
		height: auto;
		aspect-ratio: 16 / 10;
	}

	.catalogue-preview-meta {
		min-width: 0;
	}

	.catalogue-guide .app-row {
		grid-template-columns: 48px minmax(0, 1fr) minmax(90px, 116px);
	}

	.catalogue-guide .catalogue-slot {
		display: grid;
	}

	.editorial-featured {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.policy-intro-animated,
	.blog-intro,
	.help-intro {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.setup-tutorials .setup-hero {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.setup-tutorials .device-group {
		grid-template-columns: 130px minmax(0, 1fr);
		gap: 16px;
	}

	.setup-tutorials .device-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 760px) {
	.container,
	.container-narrow,
	.setup-tutorials .shell {
		width: min(100% - 36px, var(--container, 1200px));
	}

	.section,
	.section-tight {
		padding-block: clamp(52px, 10vw, 76px);
	}

	.policy-intro-animated,
	.blog-intro,
	.help-intro,
	.setup-tutorials .setup-hero {
		grid-template-columns: minmax(0, 1fr);
	}

	.editorial-featured {
		grid-template-columns: minmax(0, 1fr);
	}

	.header-inner {
		gap: 12px;
	}

	.footer-grid {
		gap: 28px;
	}

	.setup-tutorials .setup-hero-visual {
		width: min(100%, 480px);
		min-height: clamp(300px, 80vw, 410px);
		margin-inline: auto;
	}

	.setup-tutorials .device-group {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	.setup-tutorials .device-group-heading {
		padding-top: 0;
	}

	.setup-tutorials .device-group-heading p {
		max-width: 480px;
	}

	.setup-tutorials .support-banner {
		align-items: flex-start;
	}

	.setup-tutorials .support-banner .btn {
		width: 100%;
	}
}

@media (max-width: 520px) {
	.container,
	.container-narrow,
	.setup-tutorials .shell {
		width: calc(100% - 32px);
	}

	.hero h1,
	.resource-hero h1,
	.setup-hero h1 {
		font-size: clamp(2.1rem, 10.5vw, 3.1rem);
	}

	.section-head h2 {
		font-size: clamp(1.8rem, 8vw, 2.5rem);
	}

	.hero-actions {
		gap: 10px;
	}

	.hero-actions .btn {
		width: 100%;
	}

	.pricing-foot p {
		align-items: flex-start;
		text-align: left;
	}

	.device-picker {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.catalogue-preview {
		grid-template-columns: minmax(0, 1fr);
		max-width: 420px;
	}

	.catalogue-preview .mini-tv {
		width: min(100%, 360px);
		margin-inline: auto;
	}

	.catalogue-preview-meta {
		padding-inline: 4px;
	}

	.catalogue-guide .app-row {
		grid-template-columns: 42px minmax(0, 1fr);
	}

	.catalogue-guide .catalogue-slot {
		display: none;
	}

	.help-search {
		min-width: 0;
	}

	.help-search input {
		min-width: 0;
	}

	.setup-tutorials .setup-progress {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.setup-tutorials .setup-progress button {
		justify-content: center;
		padding-inline: 6px;
	}

	.setup-tutorials .setup-body {
		padding: 22px 16px;
	}

	.setup-tutorials .device-list,
	.setup-tutorials .app-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.setup-tutorials .device-choice {
		min-height: 72px;
	}

	.setup-tutorials .setup-trial {
		padding: 28px 20px;
	}

	.setup-tutorials .support-banner {
		padding: 20px;
	}

	.long-offer {
		grid-template-columns: 36px minmax(0, 1fr);
	}

	.long-offer-price {
		padding-left: 46px;
	}

	.payment-logos {
		justify-content: center;
	}

	.wa-float {
		width: 48px;
		height: 48px;
		right: 12px;
		bottom: 12px;
	}
}

@media (max-width: 360px) {
	.container,
	.container-narrow,
	.setup-tutorials .shell {
		width: calc(100% - 24px);
	}

	.header-inner {
		gap: 8px;
	}

	.site-logo {
		font-size: 1.125rem;
	}

	.header-actions {
		gap: 6px;
	}

	.hero h1,
	.resource-hero h1,
	.setup-hero h1 {
		font-size: 2rem;
	}

	.catalogue-guide .app-tabs button {
		padding-inline: 8px;
		font-size: .6875rem;
	}
}

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