/* ---------------------------------------------------------------------------
   Site CSS layered on top of the archived best-business theme.
   Hand-written and NOT generated by build.py - safe to edit.
   --------------------------------------------------------------------------- */

/* Both brand colours are sampled from the logo artwork: the wordmark red and the
   droplet green. The theme's own blue is swapped to --brand at build time. */
:root {
	--brand:        #c52d33;   /* Jupiter wordmark red */
	--brand-dark:   #9d2429;
	--brand-tint:   rgba(197, 45, 51, .10);
	--accent:       #018349;   /* logo droplet green - download / go */
	--accent-dark:  #016239;
	--accent-tint:  rgba(1, 131, 73, .10);
	--ink:          #16212b;
	--ink-soft:     #5a6570;
	--line:         #e4e8ec;
	--bg-soft:      #f6f8fa;
	--radius:       8px;
	--shadow:       0 1px 3px rgba(16,32,48,.07), 0 8px 24px rgba(16,32,48,.06);
	--shadow-lift:  0 6px 14px rgba(16,32,48,.10), 0 18px 44px rgba(16,32,48,.10);
	--maxw:         1170px;
}

/* ------------------------------------------------------------- shared bits */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

.eyebrow {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--brand);
	margin-bottom: 10px;
}

.section-head { max-width: 720px; margin: 0 auto 42px; text-align: center; }
.section-head h2 { margin: 0 0 12px; font-size: 32px; line-height: 1.25; color: var(--ink); }
.section-head p  { margin: 0; color: var(--ink-soft); font-size: 16px; line-height: 1.6; }

.btn-primary, .btn-ghost {
	display: inline-block;
	padding: 13px 26px;
	border-radius: var(--radius);
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
}
/* :visited is spelled out on every button-shaped link. The theme carries a global
   `a:visited { color:#323232 }` (specificity 0,1,1) which otherwise outranks a bare
   `.btn-primary { color:#fff }` (0,1,0) and turns the label dark grey the moment the
   target has been visited. getComputedStyle reports the unvisited colour for
   :visited, so this cannot be caught by measuring - only by reading the cascade. */
.btn-primary, .btn-primary:visited { background: var(--brand); color: #fff; }
.btn-primary:hover, .btn-primary:focus { background: var(--brand-dark); color: #fff; transform: translateY(-1px); }
.btn-ghost, .btn-ghost:visited { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.55); }
.btn-ghost:hover, .btn-ghost:focus { background: #fff; color: var(--brand-dark); border-color: #fff; }
.btn-primary .fa, .btn-ghost .fa { margin-left: 6px; }
.btn-primary .fa-envelope, .btn-ghost .fa-phone { margin-left: 0; margin-right: 8px; }

/* ----------------------------------------------------- mobile nav (drawer)
   Replaces the theme's two sidr panels ("Main Menu" + "Top Menu"). One
   hamburger, one drawer. */
.nav-toggle {
	display: none;
	align-items: center;
	gap: 10px;
	background: none;
	border: 0;
	padding: 14px 0;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	cursor: pointer;
}
.nav-toggle-bars { display: block; width: 22px; }
.nav-toggle-bars span {
	display: block;
	height: 2px;
	background: #fff;
	border-radius: 2px;
	transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle-bars span + span { margin-top: 5px; }
.drawer-open .nav-toggle-bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.drawer-open .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.drawer-open .nav-toggle-bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.drawer-scrim {
	position: fixed;
	inset: 0;
	background: rgba(10,18,26,.55);
	z-index: 9998;
	opacity: 0;
	transition: opacity .25s ease;
}
.drawer-open .drawer-scrim { opacity: 1; }

.mobile-drawer {
	position: fixed;
	top: 0; left: 0; bottom: 0;
	width: 82%;
	max-width: 320px;
	background: #fff;
	z-index: 9999;
	transform: translateX(-100%);
	transition: transform .28s cubic-bezier(.4, 0, .2, 1);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	box-shadow: 0 0 40px rgba(0,0,0,.28);
	visibility: hidden;
}
.drawer-open .mobile-drawer { transform: translateX(0); visibility: visible; }

.drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 18px;
	border-bottom: 1px solid var(--line);
}
.drawer-head img { max-width: 190px; height: auto; }
.drawer-close {
	background: none;
	border: 0;
	font-size: 30px;
	line-height: 1;
	color: var(--ink-soft);
	cursor: pointer;
	padding: 0 4px;
}
.drawer-close:hover { color: var(--ink); }

.drawer-nav { list-style: none; margin: 0; padding: 10px 0; }
.drawer-nav li { margin: 0; }
.drawer-nav a, .drawer-nav a:visited {
	display: block;
	padding: 13px 18px;
	color: var(--ink);
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
	border-bottom: 1px solid #f1f3f5;
}
.drawer-nav a:hover, .drawer-nav a:focus { background: var(--bg-soft); color: var(--brand); }
.drawer-group-label {
	display: block;
	padding: 16px 18px 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ink-soft);
}
.drawer-group ul { list-style: none; margin: 0; padding: 0; }
.drawer-group ul a { padding-left: 32px; font-size: 15px; color: var(--ink-soft); }

.drawer-contact {
	padding: 18px;
	border-top: 1px solid var(--line);
	background: var(--bg-soft);
}
.drawer-contact a, .drawer-contact a:visited {
	display: block;
	padding: 7px 0;
	color: var(--ink);
	font-size: 14.5px;
	text-decoration: none;
	word-break: break-word;
}
.drawer-contact .fa { color: var(--brand); width: 18px; margin-right: 6px; }

/* logo in the bar - mobile only, centred independently of the toggle's width */
.nav-logo { display: none; }
.nav-logo img {
	display: block;
	height: 34px;
	width: auto;
	background: #fff;
	padding: 4px 8px;
	border-radius: 4px;
}

/* Below the theme's own nav breakpoint: keep the real nav bar (the theme hid
   #main-nav entirely and showed its own dual-trigger bar), and collapse the whole
   masthead into it. The phone/email/address block and the top link bar are hidden
   here - they crowd a phone screen, and both live in the drawer instead. */
@media only screen and (max-width: 1023px) {
	#main-nav { display: block !important; }
	#main-nav .wrap-menu-content { display: none !important; }
	#main-nav .container {
		display: flex;
		align-items: center;
		position: relative;
		min-height: 52px;
	}
	.nav-toggle { display: inline-flex; }
	.nav-logo {
		display: block;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}
	#site-navigation { float: none; }
	body.drawer-open { overflow: hidden; }

	/* the masthead (logo + quick contact); #tophead is removed at build time */
	#masthead { display: none; }

	/* The theme reserved 45px at the top of #page for its fixed dual-trigger bar.
	   That bar is gone, so the reservation was rendering as an empty white strip. */
	#page { padding-top: 0 !important; }
}
@media only screen and (min-width: 1024px) {
	.mobile-drawer, .drawer-scrim { display: none; }
}

/* the theme's scroll-top button was faded by jQuery; site.js uses a class */
#btn-scrollup { display: none; }
#btn-scrollup.is-visible { display: block; }

/* ------------------------------------------------------- inner page layout
   Every inner page reserved a right sidebar whose only occupants were the search
   box and the blog widgets. With those gone the column sat empty at 389px and
   pushed the content off centre, so the sidebar is removed at build time and the
   content runs full width, held to a readable measure and centred. */
.global-layout-no-sidebar #primary,
.global-layout-no-sidebar .content-area {
	width: 100%;
	float: none;
	margin: 0;
}
.global-layout-no-sidebar #primary .site-main {
	max-width: 900px;
	margin: 0 auto;
}

/* ---------------------------------------------------------------- body copy
   The theme sets #777 at 15px; the hand-written blocks were using --ink-soft at
   15.5-16px, so the two disagreed on both size and colour. One scale, one colour. */
.entry-content {
	font-size: 16px;
	line-height: 1.75;
	color: var(--ink-soft);
}
.entry-content p {
	font-size: 16px;
	line-height: 1.75;
	color: var(--ink-soft);
	margin: 0 0 18px;
}
.entry-content strong { color: var(--ink); font-weight: 700; }
/* prose links only - buttons carry their own colour, and a bare `.entry-content a`
   outranks `.dl-spec`, which painted the Download Spec label red on green */
.entry-content a:not([class]),
.entry-content a:not([class]):visited { color: var(--brand); }
.entry-content a:not([class]):hover,
.entry-content a:not([class]):focus { color: var(--brand-dark); }

.entry-content .lead {
	font-size: 19px;
	line-height: 1.65;
	color: var(--ink);
	margin-bottom: 26px;
}
.about-h2 {
	margin: 44px 0 16px;
	font-size: 24px;
	line-height: 1.3;
	color: var(--ink);
	padding-bottom: 10px;
	border-bottom: 2px solid var(--line);
}
/* same size/colour as the body copy above them - these read as prose, not labels */
.icon-list { list-style: none; margin: 0 0 18px; padding: 0; }
.icon-list li {
	padding: 7px 0;
	font-size: 16px;
	line-height: 1.75;
	color: var(--ink-soft);
}
.icon-list .fa { color: var(--accent); margin-right: 9px; }
.icon-list-2col { columns: 2; }
.icon-list-inline li { display: inline-block; margin-right: 26px; }

/* -------------------------------------------------------------- contact page */
.contact-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin: 30px 0 40px;
}
.contact-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 28px 26px;
	box-shadow: var(--shadow);
}
.contact-kind {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--brand);
	margin-bottom: 6px;
}
.contact-card h2 {
	margin: 0 0 20px;
	font-size: 22px;
	color: var(--ink);
	padding-bottom: 14px;
	border-bottom: 1px solid var(--line);
}
.contact-row {
	display: flex;
	gap: 14px;
	padding: 11px 0;
	align-items: flex-start;
}
.contact-row + .contact-row { border-top: 1px solid #f2f4f6; }
.contact-row > .fa {
	color: var(--brand);
	font-size: 15px;
	width: 18px;
	margin-top: 4px;
	flex: none;
	text-align: center;
}
.contact-label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ink-soft);
	margin-bottom: 3px;
}
.contact-row address {
	font-style: normal;
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--ink);
	margin: 0;
}
.contact-row div { font-size: 15.5px; color: var(--ink); line-height: 1.6; }
/* tel:/mailto: links - ink, not the prose red, so the cards stay calm */
.entry-content .contact-row a,
.entry-content .contact-row a:visited { color: var(--ink); text-decoration: none; }
.entry-content .contact-row a:hover,
.entry-content .contact-row a:focus { color: var(--brand); text-decoration: underline; }

.contact-cta {
	background: var(--bg-soft);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 30px;
	text-align: center;
}
.contact-cta h3 { margin: 0 0 8px; font-size: 20px; color: var(--ink); }
.contact-cta p { margin: 0 auto 18px; max-width: 460px; }
.entry-content .contact-cta .btn-primary,
.entry-content .contact-cta .btn-primary:visited { color: #fff; text-decoration: none; }

@media only screen and (max-width: 767px) {
	.contact-grid { grid-template-columns: 1fr; gap: 18px; }
	.contact-card { padding: 22px 20px; }
	.contact-card h2 { font-size: 19px; }
	.contact-cta { padding: 24px 20px; }
}

/* ----------------------------------------------------------------- hero
   The theme sized the slider off the 1920x850 artwork, so on a desktop it ran
   ~631px - 70% of the viewport - and pushed the first real content below the
   fold. Cap it so the copy underneath is visible on landing, and crop rather
   than stretch the photo. */
@media only screen and (min-width: 1024px) {
	#featured-slider,
	#featured-slider .cycle-slideshow,
	#featured-slider .cycle-slideshow article { max-height: 440px; }
	#featured-slider .cycle-slideshow img {
		height: 440px;
		object-fit: cover;
		object-position: center 60%;
	}
	/* the caption was 57px, sized for a full-bleed hero */
	#featured-slider .cycle-caption h3,
	#featured-slider .cycle-caption h3 a {
		font-size: 38px !important;
		line-height: 1.2 !important;
	}
	#featured-slider .cycle-caption p {
		font-size: 16px !important;
		line-height: 1.6 !important;
		max-width: 620px;
	}
}
@media only screen and (min-width: 1600px) {
	#featured-slider,
	#featured-slider .cycle-slideshow,
	#featured-slider .cycle-slideshow article { max-height: 500px; }
	#featured-slider .cycle-slideshow img { height: 500px; }
}

/* ------------------------------------------------------------- home page */
.hp-stats {
	background: var(--ink);
	padding: 0;
}
.hp-stats .container {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: rgba(255,255,255,.10);
	padding: 0;
	max-width: 100%;
}
.hp-stats .stat {
	background: var(--ink);
	padding: 30px 20px;
	text-align: center;
}
.stat-num {
	display: block;
	font-size: 30px;
	font-weight: 700;
	color: #fff;
	line-height: 1.1;
}
.stat-label {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255,255,255,.62);
}

.hp-about, .hp-cats, .hp-why, .hp-benefits { padding: 76px 0; }
.hp-about { background: #fff; }
.hp-cats  { background: var(--bg-soft); }
.hp-why   { background: #fff; }
.hp-benefits { background: var(--bg-soft); }

/* `stretch`, not `center`: centring let the media column collapse to the image's
   own height (239px against 566px of copy), leaving it stranded beside the text.
   Stretching makes the column take the row height so the photo matches the prose. */
.hp-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 52px;
	align-items: stretch;
}
.hp-split-reverse .hp-split-media { order: 2; }
.hp-split-media {
	/* the grid item is the sizing context the image fills */
	min-height: 100%;
}
.hp-split-media img {
	width: 100%;
	height: 100%;
	min-height: 380px;
	object-fit: cover;
	object-position: center;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	display: block;
}
.hp-split-body h2 { margin: 0 0 18px; font-size: 32px; line-height: 1.25; color: var(--ink); }
.hp-split-body p  { margin: 0 0 16px; color: var(--ink-soft); font-size: 15.5px; line-height: 1.75; }
.hp-split-body .btn-primary { margin-top: 10px; }

/* product range cards */
.cat-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
.cat-card {
	display: block;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 32px 26px;
	text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cat-card:hover, .cat-card:focus {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lift);
	border-color: transparent;
}
.cat-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px; height: 52px;
	border-radius: 50%;
	background: var(--brand-tint);
	color: var(--brand);
	font-size: 21px;
	margin-bottom: 18px;
}
.cat-card h3 { margin: 0 0 10px; font-size: 18px; color: var(--ink); }
.cat-card p  { margin: 0 0 18px; font-size: 14px; line-height: 1.65; color: var(--ink-soft); }
.cat-count, a:visited .cat-count { font-size: 13px; font-weight: 700; color: var(--brand); }
.cat-count .fa { margin-left: 5px; }

/* why us */
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 30px; }
.why-item h3 { margin: 0 0 8px; font-size: 17px; color: var(--ink); }
.why-item p  { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--ink-soft); }
.why-icon {
	display: inline-flex;
	align-items: center; justify-content: center;
	width: 44px; height: 44px;
	border-radius: var(--radius);
	background: var(--accent-tint);
	color: var(--accent);
	font-size: 18px;
	margin-bottom: 14px;
}

/* benefits */
.benefit-list { list-style: none; margin: 0; padding: 0; }
.benefit-list li {
	position: relative;
	padding: 9px 0 9px 30px;
	font-size: 15.5px;
	color: var(--ink);
	border-bottom: 1px solid var(--line);
}
.benefit-list li:last-child { border-bottom: 0; }
.benefit-list .fa {
	position: absolute; left: 0; top: 13px;
	color: var(--accent);
	font-size: 13px;
}

/* cta */
.hp-cta {
	padding: 66px 0;
	background: linear-gradient(135deg, var(--brand-dark), var(--brand));
	text-align: center;
}
.hp-cta h2 { margin: 0 0 10px; color: #fff; font-size: 30px; line-height: 1.3; }
.hp-cta p  { margin: 0 auto 26px; color: rgba(255,255,255,.85); max-width: 620px; font-size: 16px; line-height: 1.6; }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hp-cta .btn-primary { background: #fff; color: var(--brand-dark); }
.hp-cta .btn-primary:hover { background: rgba(255,255,255,.9); color: var(--brand-dark); }

/* ---------------------------------------------------------------- footer */
.footer-widgets {
	background: var(--ink);
	padding: 58px 0 44px;
	color: rgba(255,255,255,.72);
}
.footer-cols {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1.6fr;
	gap: 40px;
}
.footer-logo {
	background: #fff;
	padding: 9px 12px;
	border-radius: 6px;
	margin-bottom: 18px;
	max-width: 240px;
	height: auto;
}
.footer-col p { margin: 0 0 12px; font-size: 14px; line-height: 1.7; color: rgba(255,255,255,.68); }
.footer-col strong { color: #fff; font-weight: 700; }
.footer-badge { font-size: 13px !important; color: rgba(255,255,255,.55) !important; }
.footer-badge .fa { color: var(--accent); margin-right: 6px; }

.footer-heading {
	margin: 0 0 18px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #fff;
}
.footer-links, .footer-contact { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: 11px; }
/* #footer-widgets is prefixed to outrank the theme's `#footer-widgets a`, which
   sets rgba(255,255,255,.4) - only 3.75:1 on this background, below WCAG AA. */
#footer-widgets .footer-links a,
#footer-widgets .footer-links a:visited {
	color: rgba(255,255,255,.78);
	text-decoration: none;
	font-size: 14.5px;
	transition: color .15s ease, padding-left .15s ease;
}
#footer-widgets .footer-links a:hover,
#footer-widgets .footer-links a:focus { color: #fff; padding-left: 4px; }

.footer-contact li {
	display: flex;
	gap: 11px;
	margin-bottom: 15px;
	font-size: 14px;
	line-height: 1.6;
	color: rgba(255,255,255,.68);
}
.footer-contact .fa { color: #fff; margin-top: 4px; width: 15px; flex: none; }
#footer-widgets .footer-contact a,
#footer-widgets .footer-contact a:visited { color: rgba(255,255,255,.78); text-decoration: none; }
#footer-widgets .footer-contact a:hover,
#footer-widgets .footer-contact a:focus { color: #fff; }

/* the theme's own bottom bar */
#colophon.site-footer {
	background: #0e161d;
	padding: 18px 0;
	text-align: center;
}
#colophon .copyright {
	font-size: 13px;
	color: rgba(255,255,255,.5);
	float: none;
	text-align: center;
}

/* Local replacement for the "Download Spec" button. The 2019 site hotlinked it
   as an image from an unrelated third-party domain. */
.dl-spec, .dl-spec:visited {
	display: inline-block;
	padding: 10px 18px;
	background: var(--accent);
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	line-height: 1.2;
	border-radius: 3px;
	text-decoration: none;
	white-space: nowrap;
	transition: background .2s ease;
}
.dl-spec:hover,
.dl-spec:focus { background: var(--accent-dark); color: #fff; }
.dl-spec .fa { margin-right: 7px; }

.legacy-note {
	display: block;
	margin-top: 3px;
	font-size: 12px;
	font-weight: 400;
	color: #888;
}

/* ------------------------------------------------------------ product tables
   Generated by build.py from products.json. The 2019 originals carried
   hard-coded pixel widths (width:869px, height:1391px) which broke on phones;
   these are fluid instead. */
.product-table {
	width: 100%;
	border-collapse: collapse;
	margin: 22px 0 10px;
	border: 1px solid #e2e2e2;
}
.product-table td {
	border: 1px solid #e2e2e2;
	padding: 14px 12px;
	vertical-align: middle;
}
.product-table tr:nth-child(even) { background: #fafafa; }
.product-table tr:hover { background: #f3f7fb; }
.product-table .col-no    { width: 12%; text-align: center; color: #777; }
.product-table .col-name  { width: 56%; }
.product-table .col-dl    { width: 32%; text-align: center; }

/* -------------------------------------------------------------- responsive
   The theme predates this content: it ships a mobile nav but nothing that
   copes with a 3-column data table, and its header collapses awkwardly. */

/* keep any wide/legacy content from forcing the page to scroll sideways */
html, body { overflow-x: hidden; }
img, table { max-width: 100%; }
.entry-content img { height: auto; }

/* tablets and below */
@media (max-width: 992px) {
	.cat-grid { grid-template-columns: repeat(2, 1fr); }
	.why-grid { grid-template-columns: repeat(2, 1fr); }
	.footer-cols { grid-template-columns: 1fr 1fr; gap: 34px; }
	.hp-split { gap: 34px; }
	.hp-about, .hp-cats, .hp-why, .hp-benefits { padding: 58px 0; }
	.section-head h2, .hp-split-body h2 { font-size: 27px; }

	.product-table td { padding: 12px 8px; }
	.product-table .col-no   { width: 14%; }
	.product-table .col-name { width: 50%; }
	.product-table .col-dl   { width: 36%; }
	.dl-spec { padding: 9px 12px; font-size: 13px; }
}

/* phones: the 3-column grid stops working, so each product becomes a card */
@media (max-width: 640px) {
	/* stats stay two-up rather than shrinking to unreadable columns */
	.hp-stats .container { grid-template-columns: 1fr 1fr; }
	.hp-stats .stat { padding: 22px 12px; }
	.stat-num { font-size: 23px; }

	.cat-grid, .why-grid { grid-template-columns: 1fr; }
	.why-grid { gap: 26px; }
	.footer-cols { grid-template-columns: 1fr; gap: 30px; }

	.hp-split { grid-template-columns: 1fr; gap: 26px; }
	/* the image must not lead on a phone - the words matter more */
	.hp-split-media, .hp-split-reverse .hp-split-media { order: 2; }
	.hp-split-body { order: 1; }
	/* min-height beats max-height when they conflict, so the desktop 380px floor
	   has to be released here or the photo towers on a phone */
	.hp-split-media { min-height: 0; }
	.hp-split-media img { min-height: 0; max-height: 220px; }

	.hp-about, .hp-cats, .hp-why, .hp-benefits { padding: 46px 0; }
	.hp-cta { padding: 46px 0; }
	.section-head { margin-bottom: 30px; }
	.section-head h2, .hp-split-body h2, .hp-cta h2 { font-size: 23px; }
	.section-head p, .hp-cta p { font-size: 15px; }
	.cta-actions { flex-direction: column; }
	.cta-actions a { display: block; }
	.cat-card { padding: 26px 22px; }

	/* about page */
	.entry-content .lead { font-size: 16.5px; }
	.about-h2 { font-size: 20px; margin-top: 32px; }
	.icon-list-2col { columns: 1; }
	.icon-list-inline li { display: block; margin-right: 0; }

	.product-table,
	.product-table tbody,
	.product-table tr,
	.product-table td {
		display: block;
		width: auto;
	}
	.product-table { border: 0; }
	.product-table tr {
		border: 1px solid #e2e2e2;
		border-radius: 4px;
		margin: 0 0 12px;
		padding: 14px;
		background: #fff;
	}
	.product-table tr:nth-child(even) { background: #fff; }
	.product-table td {
		border: 0;
		padding: 0;
		text-align: left !important;
	}
	/* The .col-* width rules above are more specific than the `td` reset, so
	   each one has to release its column width explicitly or the cell keeps it. */
	.product-table .col-no,
	.product-table .col-name,
	.product-table .col-dl { width: auto; }

	/* the row number reads as a label rather than a column */
	.product-table .col-no {
		font-size: 12px;
		color: #999;
		margin-bottom: 4px;
	}
	.product-table .col-name { font-size: 15px; line-height: 1.4; }
	.product-table .col-dl { margin-top: 12px; }
	.dl-spec { display: block; text-align: center; padding: 12px 14px; }

	/* header contact block stacks instead of squeezing into a row */
	#tophead .container,
	.site-header .container { padding-left: 15px; padding-right: 15px; }
	.entry-content table td { word-break: break-word; }

	/* the slider caption is sized for desktop and overflows on a phone */
	#featured-slider .slider-title,
	#featured-slider h2 { font-size: 22px !important; line-height: 1.25 !important; }
	#featured-slider .slider-content p { font-size: 13px !important; line-height: 1.5 !important; }
	#custom-header .page-title { font-size: 26px; }
}

@media (max-width: 420px) {
	#featured-slider .slider-title,
	#featured-slider h2 { font-size: 18px !important; }
	#custom-header .page-title { font-size: 22px; }
}