@charset "utf-8";
/* ------------------------------------------------------------------
   PC Medic - responsive.css  (homepage)
   All breakpoint work lives here. Nothing in style.css resizes below
   the default desktop composition.
   ------------------------------------------------------------------ */

/* The H1 carries an explicit <br> so the second line starts on "is really
   doing". Line 1 ("Know what your PC") stays under the copy column at
   every tier, so the same break holds from desktop down to phones. */

/* ---- Small laptops and large tablets (<= 1199px) ---- */
@media (max-width: 1199.98px)
{
	H1
	{
		font-size: 42px;
	}

	H2
	{
		font-size: 32px;
	}

	#pg-home #hero H1
	{
		font-size: 40px;
	}

	#pg-home #hero .hero-worker
	{
		max-width: 520px;
	}

	#pg-home #products
	{
		padding-top: 64px;
	}

	#pg-home #stats .stat-figure
	{
		font-size: 38px;
	}
}

/* ---- Tablets (<= 991px) ---- */
@media (max-width: 991.98px)
{
	SECTION
	{
		padding: 56px 0;
	}

	/* The nav collapses here, so the masthead needs a rung of its own. */
	#siteHeader .navbar-collapse
	{
		padding: 10px 0;
		margin-top: 12px;
		background-color: rgba(4, 20, 17, 0.55);
		border: 1px solid rgba(255, 255, 255, 0.12);
		border-radius: 6px;
	}

	#siteHeader .nav-link
	{
		padding: 11px 14px;
	}

	#siteHeader .dropdown-menu
	{
		background-color: rgba(255, 255, 255, 0.97);
	}

	/* Stacked hero: copy first, then the figure beneath it. The copy stays
	   left-aligned so the bullets do not staircase under a centred head.
	   No bottom padding: the figure is the last column, so its fade lands
	   on the masthead's bottom hairline at every width. */
	#pg-home #hero
	{
		padding: 36px 0 15px;
	}

	#pg-home #hero H1
	{
		font-size: 40px;
	}

	#pg-home #hero .hero-figure
	{
		margin-top: 30px;
	}

	#pg-home #hero .hero-worker
	{
		max-width: 460px;
	}

	/* On the stacked layout the scrim becomes a top-down wash. */
	.masthead:before
	{
		width: 100%;
		background-image: -webkit-linear-gradient(top, rgba(4, 20, 17, 0.82) 0%, rgba(4, 20, 17, 0.45) 70%, rgba(4, 20, 17, 0.2) 100%);
		background-image: linear-gradient(to bottom, rgba(4, 20, 17, 0.82) 0%, rgba(4, 20, 17, 0.45) 70%, rgba(4, 20, 17, 0.2) 100%);
	}

	#pg-home #products
	{
		padding-top: 56px;
		padding-bottom: 52px;
	}

	#pg-home #products .product-card
	{
		margin-bottom: 24px;
	}

	#pg-home #features .feature-card
	{
		margin-bottom: 24px;
	}

	#pg-home #safety .safety-item
	{
		margin-bottom: 20px;
	}

	#pg-home #scans .scan-card
	{
		margin-bottom: 20px;
	}

	#pg-home #how .step
	{
		margin-bottom: 26px;
	}

	#pg-home #how .step-arrow
	{
		display: none;
	}

	#siteFooter .footer-col
	{
		margin-bottom: 30px;
	}
}

/* ---- Large phones / small tablets (<= 767px) ---- */
@media (max-width: 767.98px)
{
	BODY
	{
		font-size: 16px;
	}

	SECTION
	{
		padding: 46px 0;
	}

	H1
	{
		font-size: 32px;
	}

	H2
	{
		font-size: 27px;
	}

	H3
	{
		font-size: 22px;
	}

	.lead
	{
		font-size: 17px;
	}

	/* The utility bar crowds a phone; the number lives in the footer and in
	   the Support/Contact menu, so hide the whole strip on small screens. */
	.pre-nav
	{
		display: none;
	}

	#siteHeader .brand-logo,
	#siteFooter .footer-logo
	{
		width: 156px;
	}

	#pg-home #hero
	{
		padding: 28px 0 15px;
	}

	#pg-home #hero H1
	{
		font-size: 32px;
	}

	#pg-home #hero H2.hero-sub
	{
		font-size: 17px;
	}

	#pg-home #products
	{
		padding-top: 48px;
	}

	#pg-home #hero .hero-worker
	{
		max-width: 380px;
	}

	#pg-home #hero .hero-actions .btn
	{
		margin-right: 0;
	}

	#pg-home #hero .hero-actions .btn-cta,
	#pg-home #hero .hero-actions .btn-ghost
	{
		display: block;
		width: 100%;
	}

	#pg-home #products .product-card
	{
		padding: 28px 24px 26px;
	}

	#pg-home #features .features-headline
	{
		font-size: 27px;
	}

	#pg-home #stats .stat-figure
	{
		font-size: 34px;
	}

	#pg-home #safety
	{
		padding: 48px 0;
	}

	#pg-home #safety .safety-lead
	{
		margin-bottom: 32px;
	}

	#pg-home #safety .safety-note
	{
		padding: 18px 18px;
		font-size: 15px;
	}

	#pg-home #finalCta H2
	{
		font-size: 28px;
	}

	#siteFooter
	{
		padding-top: 46px;
	}
}

/* ---- Phones (<= 575px) ---- */
@media (max-width: 575.98px)
{
	H1
	{
		font-size: 27px;
	}

	H2
	{
		font-size: 24px;
	}

	#pg-home #hero
	{
		padding: 22px 0 15px;
	}

	#pg-home #hero H1
	{
		font-size: 27px;
	}

	#pg-home #hero .hero-chip
	{
		font-size: 12px;
		letter-spacing: 0.04em;
	}

	#pg-home #hero .hero-points LI
	{
		font-size: 15px;
	}

	#pg-home #hero .hero-worker
	{
		max-width: 320px;
	}

	.btn-cta
	{
		padding: 15px 22px;
		font-size: 18px;
	}

	.btn-cta.btn-lg
	{
		padding: 16px 26px;
		font-size: 19px;
	}

	.btn-cta.btn-block-sm
	{
		display: block;
		width: 100%;
	}

	.btn-ghost
	{
		padding: 14px 22px;
		font-size: 16px;
	}

	#pg-home #products
	{
		padding-top: 40px;
	}

	#pg-home #stats .stat-figure
	{
		font-size: 30px;
	}

	#siteFooter .footer-bottom
	{
		text-align: center;
	}
}

/* ---- Short laptop screens (height-driven, not width-driven) -------
   A 1280x600 type laptop has little vertical room; compress the hero so
   the CTA and the photograph still sit together. Desktop only.
   ----------------------------------------------------------------- */
@media (min-width: 992px) and (max-height: 720px)
{
	#pg-home #hero
	{
		padding: 22px 0 15px;
	}

	#pg-home #hero H1
	{
		font-size: 42px;
	}

	#pg-home #hero H2.hero-sub
	{
		margin-bottom: 16px;
		font-size: 17px;
	}

	#pg-home #hero .hero-points
	{
		margin-bottom: 18px;
	}

	#pg-home #hero .hero-points LI
	{
		margin-bottom: 7px;
		font-size: 14.5px;
	}

	#pg-home #hero .hero-worker
	{
		max-width: 400px;
	}
}

/* ---- Respect reduced motion ---- */
@media (prefers-reduced-motion: reduce)
{
	.btn,
	.btn-cta,
	.btn-ghost,
	.btn-ink
	{
		-webkit-transition: none;
		transition: none;
	}
}

/* ---- Print ---- */
@media print
{
	.pre-nav,
	#siteHeader,
	#scrolltop
	{
		display: none;
	}

	.masthead,
	#pg-home #stats,
	#pg-home #finalCta
	{
		color: #14181B;
		background: #FFFFFF;
	}
}