/* ---------------------------------------------------------------------------
   Oxygen concentrator category pages: All, Portable and Stationary.
   Enqueued for t_oxygen_concentrators.php, t_portable_systems.php and
   t_stationary_systems.php only. Everything is scoped to .oc-page.

   t_founders_story.php loads this too (as .oc-page) for the tokens,
   .oc-inner, .oc-divider and "Find your Inogen"; its own styles are in
   founders-story.css.

   Figma: "Category Pages v2" in the Inogen Website 2026 file. Tokens and
   component treatments match the Aurora pages, from the same library.
   --------------------------------------------------------------------------- */

.oc-page {
	--oc-orange: #ff8202;
	--oc-navy: #001932;
	--oc-blue-deep: #003365;
	--oc-blue: #004c97;
	--oc-blue-hero: #1f74b5;
	--oc-bright: #8bcfef;
	--oc-portable-tint: #dcecf5;
	--oc-stationary-tint: #fcd5b5;
	--oc-orange-light: #f8ac6a;
	--oc-rule: #9e9c9a;
	--oc-radius: 16px;
	--oc-radius-full: 360px;

	font-family: 'Lato', Arial, Helvetica, sans-serif;
	color: #000;
	overflow-x: clip;
}

.oc-page * { box-sizing: border-box; }

/* styles.css uppercases every h2-h6 site-wide; this design is title case. */
.oc-page h1, .oc-page h2, .oc-page h3, .oc-page h4 { text-transform: none; font-family: inherit; }
.oc-page sup { font-size: 0.645em; line-height: 0; }

.oc-inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 90px;
}

@media screen and (max-width: 1080px) { .oc-inner { padding: 0 45px; } }
@media screen and (max-width: 767px)  { .oc-inner { padding: 0 20px; } }

.oc-divider { height: 10px; display: flex; align-items: center; }
.oc-divider::before { content: ''; display: block; width: 100%; border-top: 1px solid var(--oc-navy); }

/* --- Buttons --------------------------------------------------------- */

.oc-page .oc-btn,
.oc-page .oc-btn:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	border: 1px solid transparent;
	border-radius: var(--oc-radius-full);
	font-size: 14px;
	font-weight: 900;
	line-height: 1.2;
	letter-spacing: 0.28px;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
}

.oc-page .oc-btn--primary,
.oc-page .oc-btn--primary:visited { background-color: var(--oc-orange); border-color: var(--oc-orange); color: var(--oc-navy); }
.oc-page .oc-btn--primary:hover,
.oc-page .oc-btn--primary:focus { background-color: #e07400; border-color: #e07400; color: var(--oc-navy); }

.oc-page .oc-btn--outline,
.oc-page .oc-btn--outline:visited { background-color: transparent; border-color: var(--oc-navy); color: var(--oc-navy); }
.oc-page .oc-btn--outline:hover,
.oc-page .oc-btn--outline:focus { background-color: rgba(0, 51, 101, 0.1); color: var(--oc-navy); }

.oc-page .oc-btn--solid,
.oc-page .oc-btn--solid:visited { background-color: var(--oc-blue-deep); border-color: var(--oc-blue-deep); color: #fff; }
.oc-page .oc-btn--solid:hover,
.oc-page .oc-btn--solid:focus { background-color: #00254a; border-color: #00254a; color: #fff; }

/* --- Type tags ------------------------------------------------------- */

.oc-tag {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 10px 5px 5px;
	border-radius: 5px;
	font-size: 16px;
	line-height: 20px;
	color: #000;
}
.oc-tag img { display: block; width: 18px; height: 18px; object-fit: contain; }
.oc-tag--portable { background-color: var(--oc-bright); }
.oc-tag--stationary { background-color: var(--oc-orange-light); }

/* --- All page: hero + product cards (Figma 2295:10077) ------------------ */

.oc-hero {
	background-color: var(--oc-blue-hero);
	padding: 20px 0 40px;
	color: #fff;
}

.oc-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin: 0 0 48px;
	padding: 0;
	list-style: none;
	font-size: 11.6px;
	line-height: normal;
	text-transform: uppercase;
}
.oc-breadcrumb li { margin: 0; }
.oc-breadcrumb li + li::before { content: '//'; margin-right: 5px; }
.oc-breadcrumb a,
.oc-breadcrumb a:visited { color: #fff; text-decoration: none; }
.oc-breadcrumb a:hover,
.oc-breadcrumb a:focus { text-decoration: underline; }
.oc-breadcrumb [aria-current] { font-weight: 900; }

.oc-page h1.oc-hero__title {
	max-width: 800px;
	margin: 0 0 48px;
	font-size: 48px;
	font-weight: 400;
	line-height: 60px;
	color: #fff;
}

.oc-cards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
}

.oc-card {
	display: flex;
	flex-direction: column;
	background-color: rgba(255, 255, 255, 0.8);
	border-radius: var(--oc-radius);
	overflow: hidden;
}

.oc-card__media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	background-color: #fff;
	border-radius: var(--oc-radius);
	overflow: hidden;
}
.oc-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.oc-card__media .oc-tag { position: absolute; top: 12px; left: 12px; }

.oc-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
	padding: 24px;
}

.oc-card__tagline { margin: 0 0 12px; font-size: 16px; line-height: 20px; color: #000; }

.oc-page h2.oc-card__title {
	margin: 0;
	font-size: 32px;
	font-weight: 400;
	line-height: 40px;
	color: #000;
}
.oc-page h2.oc-card__title a,
.oc-page h2.oc-card__title a:visited { color: inherit; text-decoration: none; }
.oc-page h2.oc-card__title a:hover,
.oc-page h2.oc-card__title a:focus { text-decoration: underline; }

.oc-card__ctas { display: flex; flex-direction: column; gap: 12px; }
.oc-card__ctas .oc-btn { width: 100%; }

@media screen and (max-width: 1199px) {
	.oc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 767px) {
	.oc-hero { background-color: var(--oc-blue); }
	.oc-breadcrumb { margin-bottom: 36px; }
	.oc-page h1.oc-hero__title { margin-bottom: 36px; font-size: 40px; line-height: 48px; }

	/* The mobile comp keeps the four cards on one row, a swipe rail with the
	   next card peeking. Bleeding 20px each side lets a card reach the screen
	   edge while the first still lines up with the page gutter. */
	.oc-cards {
		display: flex;
		gap: 12px;
		margin: 0 -20px;
		padding: 0 20px 4px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-left: 20px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.oc-cards::-webkit-scrollbar { display: none; }
	.oc-card { flex: 0 0 241px; scroll-snap-align: start; }
	.oc-card__tagline { line-height: 21px; }
	.oc-page h2.oc-card__title { font-size: 22px; line-height: normal; }
}

/* --- All page: intro sections ------------------------------------------ */

.oc-what { padding: 72px 0 24px; }
.oc-what__copy { max-width: 900px; }

.oc-page h2.oc-heading {
	margin: 0;
	font-size: 40px;
	font-weight: 400;
	line-height: 48px;
	color: var(--oc-blue);
}

.oc-page .oc-what h2.oc-heading { margin-bottom: 30px; }
.oc-what p { margin: 0; font-size: 24px; line-height: 32px; color: #000; }

.oc-types { padding: 24px 0 48px; }
.oc-types__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.oc-type__icon { display: block; width: 45px; height: 45px; margin-bottom: 12px; }
.oc-type__icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.oc-page h3.oc-type__title { margin: 0 0 12px; font-size: 32px; font-weight: 400; line-height: 40px; color: var(--oc-blue); }
.oc-type p { margin: 0; font-size: 16px; line-height: 20px; color: #000; }

.oc-choosing { padding: 60px 0; }
.oc-choosing__grid { display: flex; align-items: center; gap: 48px; }
.oc-choosing__media { flex: 1 1 0; min-width: 0; }
.oc-choosing__media img { display: block; width: 100%; height: 400px; object-fit: cover; border-radius: 20px; }
.oc-choosing__copy { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.oc-choosing__copy p { margin: 0; font-size: 16px; line-height: 20px; color: #000; }
.oc-choosing__copy .oc-btn { min-width: 200px; }

@media screen and (max-width: 900px) {
	.oc-choosing__grid { flex-direction: column; align-items: stretch; gap: 30px; }
	.oc-choosing__media img { height: auto; aspect-ratio: 3 / 2; }
}

@media screen and (max-width: 767px) {
	.oc-what { padding-top: 60px; }
	.oc-page h2.oc-heading { font-size: 36px; line-height: 40px; }
	.oc-what p { line-height: 30px; }
	.oc-types__grid { grid-template-columns: 1fr; }
	.oc-choosing__copy .oc-btn { width: 100%; }
}

/* --- All page: Take a Closer Look (Figma 2296:9216) --------------------
   A real table: a group header row (Portable / Stationary, each spanning two
   products), a product-name row, the spec rows, then the buttons. The 24px
   spacer column separates the two tinted blocks. */

.oc-compare { padding: 72px 0; }

.oc-page h2.oc-compare__title {
	margin: 0 0 48px;
	font-size: 40px;
	font-weight: 400;
	line-height: 48px;
	color: var(--oc-navy);
}

/* position + z-index:0 contains the sticky label cells' stacking, so they
   cannot scroll over the fixed mobile header (see the Aurora LP). */
.oc-compare__scroll { position: relative; z-index: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }

.oc-compare__table {
	width: 100%;
	table-layout: fixed;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 16px;
	line-height: 20px;
	color: #000;
}

.oc-compare__table th,
.oc-compare__table td {
	padding: 0 24px;
	height: 58.5px;
	text-align: left;
	vertical-align: middle;
	font-weight: 400;
	border-bottom: 1px solid var(--oc-rule);
}

.oc-compare__table col.oc-col-label { width: 150px; }
.oc-compare__table col.oc-col-gap { width: 24px; }

.oc-compare__table th[scope="row"] { padding-left: 0; font-weight: 700; background-color: #fff; }
.oc-compare__table .oc-gap { padding: 0; }
.oc-compare__table .oc-portable { background-color: var(--oc-portable-tint); }
.oc-compare__table .oc-stationary { background-color: var(--oc-stationary-tint); }

.oc-compare__table small { display: block; font-size: 12px; line-height: normal; margin-top: 1px; }

/* Group header: label on the left, product shot on the right, on a wash. */
.oc-compare__table thead .oc-group-row > * { height: 150px; padding: 0; border-bottom: none; background-color: #fff; }
.oc-compare__table thead .oc-group-row .oc-portable,
.oc-compare__table thead .oc-group-row .oc-stationary { border-radius: var(--oc-radius) var(--oc-radius) 0 0; }
.oc-compare__table thead .oc-group-row .oc-portable { background-color: var(--oc-portable-tint); }
.oc-compare__table thead .oc-group-row .oc-stationary { background-color: var(--oc-stationary-tint); }

.oc-group {
	display: flex;
	height: 150px;
	border-radius: var(--oc-radius);
	overflow: hidden;
}
.oc-group--portable { background-image: linear-gradient(180deg, rgba(185, 217, 235, 0.92) 0%, #5cc4f2 100%); }
.oc-group--stationary { background-image: linear-gradient(180deg, #fcd5b5 0%, #f8ac6a 100%); }

.oc-group__label {
	flex: 1 1 50%;
	align-self: center;
	padding: 24px;
	font-size: 32px;
	line-height: 40px;
}

.oc-group__media { flex: 1 1 50%; min-width: 0; }
.oc-group__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }

.oc-compare__table thead .oc-name-row > * { font-size: 20px; line-height: 24px; font-weight: 600; }

.oc-compare__table .oc-cta-row > * { height: 140px; border-bottom: none; }
.oc-compare__table .oc-cta-row td { padding: 24px; }
.oc-compare__table .oc-cta-row td.oc-first { border-bottom-left-radius: var(--oc-radius); }
.oc-compare__table .oc-cta-row td.oc-last { border-bottom-right-radius: var(--oc-radius); }
.oc-compare__ctas { display: flex; flex-direction: column; gap: 10px; }
.oc-compare__ctas .oc-btn { width: 100%; }

@media screen and (max-width: 1080px) {
	.oc-compare__table { min-width: 960px; }
}

@media screen and (max-width: 767px) {
	.oc-compare { padding: 60px 0; }
	.oc-page h2.oc-compare__title { margin-bottom: 36px; font-size: 32px; line-height: 40px; }

	/* The mobile comp freezes the spec labels and scrolls the four product
	   columns under them. The scroller bleeds off the right edge so the next
	   column peeks. */
	.oc-compare__scroll { margin-right: -20px; }
	/* Fixed layout sizes to the table's own width, so it has to be spelled out:
	   the label column, four 249px products and the gap. */
	.oc-compare__table { width: 1120px; min-width: 1120px; }
	.oc-compare__table col.oc-col-label { width: 100px; }
	.oc-compare__table col.oc-col-product { width: 249px; }
	.oc-compare__table th,
	.oc-compare__table td { height: 65.8px; }
	.oc-compare__table th[scope="row"],
	.oc-compare__table .oc-corner {
		position: sticky;
		left: 0;
		z-index: 2;
		padding-right: 8px;
		background-color: #fff;
	}
}

/* --- FAQ (Figma 2295:10125) ------------------------------------------ */

.oc-faq { padding: 90px 0; }

.oc-page h2.oc-faq__title {
	margin: 0 0 45px;
	font-size: 32px;
	font-weight: 400;
	line-height: normal;
	color: #00549e;
}

.oc-faq__item { border-bottom: 1px solid #000; }
.oc-faq__item:last-child { border-bottom: none; }

.oc-page .oc-faq__question {
	display: flex;
	align-items: center;
	gap: 30px;
	width: 100%;
	padding: 15px 0;
	margin: 0;
	border: none;
	background: none;
	font-family: inherit;
	font-size: 20px;
	font-weight: 600;
	line-height: 24px;
	color: #000;
	text-align: left;
	text-transform: none;
	cursor: pointer;
}
.oc-faq__item:first-child .oc-faq__question { padding-top: 0; }
.oc-faq__question span { flex: 1 1 auto; }
.oc-faq__icon { flex: 0 0 11px; width: 11px; height: 11px; background: url('../img/oxygen-concentrators/icon-plus.svg') center / contain no-repeat; }
.oc-faq__question[aria-expanded="true"] .oc-faq__icon { background-image: url('../img/oxygen-concentrators/icon-minus.svg'); }

.oc-faq__answer { max-width: 800px; padding: 0 0 15px; font-size: 16px; line-height: 20px; color: #000; }
.oc-faq__answer p { margin: 0; font-size: 16px; line-height: 20px; }
.oc-faq__answer p + p { margin-top: 10px; }
.oc-faq__answer .oc-faq__note { font-size: 12px; }
.oc-faq__answer a,
.oc-faq__answer a:visited { color: inherit; text-decoration: underline; }

@media screen and (max-width: 767px) {
	.oc-faq { padding: 48px 0; }
}

/* --- Find your Inogen (Figma 2914:19262) --------------------------------- */

.oc-find {
	position: relative;
	padding: 90px 0;
	overflow: hidden;
	text-align: center;
	color: #fff;
}
.oc-find__bg { position: absolute; inset: 0; }
.oc-find__bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 44%; }
.oc-find__bg::after { content: ''; position: absolute; inset: 0; background-color: rgba(0, 25, 50, 0.6); }
.oc-find__copy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 24px; max-width: 800px; margin: 0 auto; }
.oc-page h2.oc-find__title { margin: 0; font-size: 48px; font-weight: 400; line-height: 60px; color: #fff; }
.oc-find__copy p { margin: 0; font-size: 20px; font-weight: 600; line-height: 24px; color: #fff; }
.oc-page .oc-find .oc-btn--primary,
.oc-page .oc-find .oc-btn--primary:visited { color: #000; }

@media screen and (max-width: 767px) {
	.oc-find { padding: 48px 0; }
	.oc-page h2.oc-find__title { font-size: 40px; line-height: 48px; }
}

/* --- Free guide form ---------------------------------------------------- */

.oc-guide { padding: 60px 0; background-color: var(--oc-navy); }

/* --- Founders' story (Figma 2370:3250) ----------------------------------- */

.oc-founders {
	position: relative;
	padding: 60px 0;
	overflow: hidden;
	background-image: linear-gradient(180deg, #1f74b5 7.94%, #004c97 70.5%);
}
.oc-founders__bg { position: absolute; inset: 0; opacity: 0.5; pointer-events: none; }
.oc-founders__bg img { display: block; width: 100%; height: 100%; object-fit: cover; }
.oc-founders__inner { position: relative; z-index: 1; display: flex; align-items: center; gap: 48px; max-width: 1200px; margin: 0 auto; }
.oc-founders__media { flex: 1 1 0; min-width: 0; }
.oc-founders__media img { display: block; width: 100%; height: auto; aspect-ratio: 576 / 400; object-fit: cover; border-radius: 20px; }
.oc-founders__copy { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.oc-founders__eyebrow { margin: 0; font-size: 20px; font-weight: 600; line-height: 24px; color: #fff; }
.oc-page h2.oc-founders__title { margin: 0; font-size: 48px; font-weight: 400; line-height: 60px; color: #fff; }
.oc-founders__copy .oc-btn { min-width: 200px; }

@media screen and (max-width: 900px) {
	.oc-founders__inner { flex-direction: column; align-items: stretch; gap: 30px; }
	.oc-page h2.oc-founders__title { font-size: 32px; line-height: 40px; }
}

/* The mobile comp centres the story, with the eyebrow above the photo. */
@media screen and (max-width: 767px) {
	.oc-founders { padding: 48px 0; }
	.oc-founders__inner { text-align: center; }
	.oc-founders__copy { display: contents; }
	.oc-founders__eyebrow { order: -1; }
	.oc-page h2.oc-founders__title { font-size: 36px; line-height: 44px; }
	.oc-founders__copy .oc-btn { width: 100%; }
	.oc-page .prop-65-warning { padding: 0 20px; }
}


/* ===========================================================================
   Portable and Stationary pages
   The two share one layout; the theme colours come from these tokens.
   =========================================================================== */

.oc-page--portable {
	--oc-cat-band: linear-gradient(0deg, rgba(185, 217, 235, 0.92) 0%, #fff 100%);
	--oc-cat-tag: var(--oc-bright);
	--oc-cat-tint: #dcecf5;
	--oc-cat-rule: #8bcfef;
	--oc-cat-head: linear-gradient(180deg, rgba(185, 217, 235, 0.92) 0%, #5cc4f2 100%);
	--oc-cat-cta: linear-gradient(90deg, #001932 0%, #3d9cd4 100%);
}

.oc-page--stationary {
	--oc-cat-band: linear-gradient(0deg, #fcd5b5 0%, #fff 100%);
	--oc-cat-tag: var(--oc-orange-light);
	--oc-cat-tint: #ffe9d7;
	--oc-cat-rule: #f8ac6a;
	--oc-cat-head: linear-gradient(180deg, #fcd5b5 0%, #f8ac6a 100%);
	--oc-cat-cta: linear-gradient(90deg, #912900 37.7%, #f8ac6a 117.96%);
}

/* --- Hero, product cards, "Still not sure" (Figma 2292:4511 / 2296:9583) --- */

.oc-cat-hero {
	padding: 20px 0 40px;
	background-image: var(--oc-cat-band);
	color: var(--oc-navy);
}

.oc-cat-hero .oc-breadcrumb { color: var(--oc-blue-deep); }
.oc-cat-hero .oc-breadcrumb a,
.oc-cat-hero .oc-breadcrumb a:visited { color: var(--oc-blue-deep); }

.oc-page h1.oc-cat-hero__title {
	max-width: 800px;
	margin: 0 0 24px;
	font-size: 48px;
	font-weight: 400;
	line-height: 60px;
	color: var(--oc-navy);
}

.oc-cat-hero__intro {
	max-width: 800px;
	margin: 0 0 48px;
	font-size: 24px;
	line-height: 32px;
	color: var(--oc-navy);
}

.oc-cat-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

/* The cards are grid items on desktop; the wrapper only exists to become the
   swipe rail on mobile. */
.oc-cat-cards { display: contents; }

.oc-pcard {
	display: flex;
	flex-direction: column;
	background-color: rgba(255, 255, 255, 0.5);
	border-radius: var(--oc-radius);
	overflow: hidden;
}

.oc-pcard__media {
	display: block;
	aspect-ratio: 1 / 1;
	background-color: #fff;
	border-radius: var(--oc-radius);
	overflow: hidden;
}
.oc-pcard__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.oc-pcard__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 24px; padding: 24px; }

.oc-pcard__tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none; }

.oc-page .oc-feature-tag {
	margin: 0;
	padding: 5px 10px;
	border-radius: 5px;
	background-color: var(--oc-cat-tag);
	font-size: 16px;
	line-height: 20px;
	color: #000;
}

.oc-pcard__text { display: flex; flex-direction: column; gap: 12px; }

.oc-page h2.oc-pcard__title { margin: 0; font-size: 32px; font-weight: 400; line-height: 40px; color: #000; }
.oc-page--stationary h2.oc-pcard__title { font-size: 24px; line-height: 32px; }
.oc-page h2.oc-pcard__title a,
.oc-page h2.oc-pcard__title a:visited { color: inherit; text-decoration: none; }
.oc-page h2.oc-pcard__title a:hover,
.oc-page h2.oc-pcard__title a:focus { text-decoration: underline; }

.oc-pcard__desc { margin: 0; font-size: 16px; line-height: 20px; color: #000; }

/* The buttons sit at the foot of the card, so they line up across the row
   however long each description runs. */
.oc-pcard__foot { display: flex; flex-direction: column; gap: 12px; margin-top: auto; }
.oc-pcard__note { margin: 0; font-size: 12px; line-height: normal; color: #000; }
.oc-pcard__ctas { display: flex; flex-direction: column; gap: 12px; }
.oc-pcard__ctas .oc-btn { width: 100%; }

.oc-cat-help { display: flex; flex-direction: column; gap: 48px; align-self: start; }
.oc-cat-help__title { margin: 0; font-size: 32px; line-height: 40px; color: #000; }

.oc-page .oc-compare-btn,
.oc-page .oc-compare-btn:visited {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 12px 12px 24px;
	border-radius: var(--oc-radius-full);
	background-image: var(--oc-cat-cta);
	font-size: 14px;
	font-weight: 900;
	line-height: 1.2;
	letter-spacing: 0.28px;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
}
.oc-page .oc-compare-btn:hover,
.oc-page .oc-compare-btn:focus { color: #fff; filter: brightness(1.12); }
.oc-compare-btn img { display: block; flex: 0 0 48px; width: 48px; height: 48px; }

@media screen and (max-width: 1199px) {
	.oc-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.oc-cat-help { grid-column: 1 / -1; gap: 24px; }
}

@media screen and (max-width: 767px) {
	.oc-page h1.oc-cat-hero__title { font-size: 40px; line-height: 48px; }
	.oc-cat-hero__intro { margin-bottom: 36px; font-size: 20px; line-height: 26px; }

	/* The mobile comps keep the two cards on one swipe rail with the second
	   peeking, and move "Still not sure" below it. Bleeding 20px each side lets
	   a card reach the screen edge while the first lines up with the gutter. */
	.oc-cat-grid { display: block; }
	.oc-cat-cards {
		display: flex;
		gap: 24px;
		margin: 0 -20px 36px;
		padding: 0 20px 4px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-left: 20px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.oc-cat-cards::-webkit-scrollbar { display: none; }
	.oc-cat-cards .oc-pcard { flex: 0 0 300px; max-width: 80vw; scroll-snap-align: start; }
	.oc-cat-help__title { font-size: 28px; line-height: 36px; }
}

/* --- Take a Closer Look, two products (Figma 2293:5291 / 2296:9602) ------ */

.oc-spec { padding: 72px 0; background-color: #fff; }

.oc-page h2.oc-spec__title {
	margin: 0 0 24px;
	font-size: 40px;
	font-weight: 400;
	line-height: normal;
	color: var(--oc-navy);
}

/* position + z-index:0 contains the sticky label cells' stacking, so they
   cannot scroll over the fixed mobile header (see the Aurora LP). */
.oc-spec__scroll { position: relative; z-index: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }

.oc-spec__table {
	width: 100%;
	table-layout: fixed;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 16px;
	line-height: 20px;
	color: #000;
}

.oc-spec__table th,
.oc-spec__table td {
	height: 73px;
	padding: 0 24px;
	text-align: left;
	vertical-align: middle;
	font-weight: 400;
	background-color: var(--oc-cat-tint);
	border-bottom: 1px solid var(--oc-cat-rule);
}

.oc-spec__table th[scope="row"] { padding-left: 0; font-weight: 700; background-color: #fff; }
.oc-spec__table .oc-spec__corner { background-color: #fff; border-bottom: none; }
.oc-spec__table small { display: block; margin-top: 1px; font-size: 12px; line-height: normal; }

/* Header: the product names on a gradient bar over the tint, so the bar's
   rounded bottom corners show the tint behind them. */
.oc-spec__table thead th { padding: 0; border-bottom: none; }
.oc-spec__table thead th:nth-child(2) { border-top-left-radius: var(--oc-radius); }
.oc-spec__table thead th:last-child { border-top-right-radius: var(--oc-radius); }

.oc-spec__head {
	display: flex;
	align-items: center;
	min-height: 73px;
	padding: 24px;
	background-image: var(--oc-cat-head);
	font-size: 24px;
	line-height: 32px;
}
.oc-spec__table thead th:nth-child(2) .oc-spec__head { border-radius: var(--oc-radius) 0 0 var(--oc-radius); }
.oc-spec__table thead th:last-child .oc-spec__head { border-radius: 0 var(--oc-radius) var(--oc-radius) 0; }

.oc-spec__table .oc-spec__cta-row > * { height: 146px; border-bottom: none; }
.oc-spec__table .oc-spec__cta-row td { padding: 24px; }
.oc-spec__table .oc-spec__cta-row td:nth-child(2) { border-bottom-left-radius: var(--oc-radius); }
.oc-spec__table .oc-spec__cta-row td:last-child { border-bottom-right-radius: var(--oc-radius); }
.oc-spec__ctas { display: flex; flex-direction: column; gap: 10px; }
.oc-spec__ctas .oc-btn { width: 100%; }

@media screen and (max-width: 767px) {
	.oc-spec { padding: 60px 0; }
	.oc-page h2.oc-spec__title { margin-bottom: 36px; font-size: 32px; line-height: 40px; }

	/* The mobile comps freeze the labels and scroll the products under them,
	   the scroller bleeding off the right edge so the second product peeks. */
	.oc-spec__scroll { margin-right: -20px; }
	.oc-spec__table { width: 600px; min-width: 600px; }
	.oc-spec__table th[scope="row"],
	.oc-spec__table .oc-spec__corner { width: 100px; }
	.oc-spec__table th,
	.oc-spec__table td { height: 78px; }
	.oc-spec__table th[scope="row"],
	.oc-spec__table .oc-spec__corner {
		position: sticky;
		left: 0;
		z-index: 2;
		padding-right: 8px;
	}
}

/* --- What are ... oxygen concentrators? (Figma "50") --------------------- */

.oc-intro { padding: 60px 0; background-color: #fff; }
.oc-intro__grid { display: flex; align-items: center; gap: 48px; }
.oc-intro__media { flex: 1 1 0; min-width: 0; }
.oc-intro__media img { display: block; width: 100%; height: 400px; object-fit: cover; border-radius: 20px; }
.oc-intro__copy { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.oc-intro__copy p { margin: 0; font-size: 24px; line-height: 32px; color: #000; }

@media screen and (max-width: 900px) {
	.oc-intro__grid { flex-direction: column; align-items: stretch; gap: 30px; }
	.oc-intro__media img { height: auto; aspect-ratio: 3 / 2; }
}

@media screen and (max-width: 767px) {
	.oc-intro__copy p { font-size: 20px; line-height: 28px; }
}

/* --- Benefits (Figma "3 Col") --------------------------------------------- */

.oc-benefits { padding: 60px 0; background-image: var(--oc-cat-band); }
.oc-page .oc-benefits h2.oc-heading { margin-bottom: 48px; }
.oc-benefits__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.oc-benefit__icon { display: block; width: 45px; height: 45px; margin-bottom: 12px; }
.oc-benefit__icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.oc-page h3.oc-benefit__title { margin: 0 0 12px; font-size: 20px; font-weight: 600; line-height: 24px; color: #000; }
.oc-benefit p { margin: 0; font-size: 16px; line-height: 20px; color: #000; }

@media screen and (max-width: 767px) {
	.oc-benefits__grid { grid-template-columns: 1fr; gap: 48px; }
}