/*
 * Octocam product pages — Nova Series and Lumina Series.
 *
 * Every value below is the literal equivalent of the Tailwind utility used in
 * frontend/src/components/products/OctocamNovaPage.js and
 * OctocamLuminaPage.js, so the result matches rather than approximates.
 *
 *   primary #0B1B3D   accent #2563EB   accent-hover #1D4ED8
 *   text    #1A1A2E   muted  #6B7280   light  #F5F6F8
 *   gray-50 #F9FAFB   gray-100 #F3F4F6 gray-200 #E5E7EB gray-300 #D1D5DB
 */

/* ================================================================ shell == */

.gvd-octocam { background: #fff; }

/*
 * The product template prints its own navy title band above the post content.
 * These pages carry the full hero the original React page had, so the generic
 * band is suppressed here (and only here) to avoid two stacked heroes.
 * Browsers without :has() simply keep it — nothing breaks.
 */
body:has(.gvd-octocam) .gvd-grid-bg { display: none; }

/* py-20 lg:py-28 */
.gvd-octocam__section {
	position: relative;
	overflow: hidden;
	padding-block: 5rem;
}

@media (min-width: 1024px) {
	.gvd-octocam__section { padding-block: 7rem; }
}

.gvd-octocam__section--white { background: #fff; }
.gvd-octocam__section--muted { background: rgba(249, 250, 251, 0.7); } /* bg-gray-50/70 */
.gvd-octocam__section--dark  { background: #0b1b3d; }

.gvd-octocam__section > .gvd-container { position: relative; z-index: 1; }

/* Reveal wrappers must stretch so h-full cards fill their grid row. */
.gvd-octocam__cell { height: 100%; }

/* max-w-4xl px-4 text-center */
.gvd-octocam__narrow {
	max-width: 56rem;
	text-align: center;
}

.gvd-octocam__center { margin-top: 2.5rem; text-align: center; }

/* ============================================================== eyebrow == */

/* inline-flex items-center gap-2 rounded-full border border-accent/20
   bg-accent/10 px-3.5 py-1.5 text-xs font-semibold uppercase tracking-wider */
.gvd-octocam .gvd-eyebrow.gvd-octocam__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0;
	padding: 0.375rem 0.875rem;
	border: 1px solid rgba(37, 99, 235, 0.2);
	border-radius: 9999px;
	background: rgba(37, 99, 235, 0.1);
	color: #2563eb;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* ======================================================= section heading == */

.gvd-octocam__head { max-width: 48rem; }

.gvd-octocam__head--center { margin-inline: auto; text-align: center; }

/* mt-5 text-3xl sm:text-4xl font-bold leading-[1.12] tracking-tight */
.gvd-octocam__h2 {
	margin: 1.25rem 0 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.875rem;
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.025em;
	color: #1a1a2e;
}

@media (min-width: 640px) {
	.gvd-octocam__h2 { font-size: 2.25rem; }
}

.gvd-octocam__section--dark .gvd-octocam__h2 { color: #fff; }

.gvd-octocam .gvd-accent { color: #2563eb; }

/* mt-5 text-lg leading-relaxed text-text-muted */
.gvd-octocam__lede {
	margin: 1.25rem 0 0;
	color: #6b7280;
	font-size: 1.125rem;
	line-height: 1.625;
}

.gvd-octocam__section--dark .gvd-octocam__lede { color: rgba(255, 255, 255, 0.65); }

/* =============================================================== buttons == */

/* inline-flex items-center justify-center rounded-lg px-6 py-3 text-sm
   font-medium transition-colors */
.gvd-octocam__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	border: 1px solid transparent;
	border-radius: 0.5rem;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.25rem;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.gvd-octocam__btn:hover { text-decoration: none; }

.gvd-octocam__btn--accent { background: #2563eb; color: #fff; }
.gvd-octocam__btn--accent:hover { background: #1d4ed8; color: #fff; }

/* border border-gray-200 text-text hover:border-accent/40 hover:text-accent */
.gvd-octocam__btn--outline {
	border-color: #e5e7eb;
	background: transparent;
	color: #1a1a2e;
}

.gvd-octocam__btn--outline:hover {
	border-color: rgba(37, 99, 235, 0.4);
	color: #2563eb;
}

/* border border-white/25 text-white hover:bg-white/10 */
.gvd-octocam__btn--ghost {
	border-color: rgba(255, 255, 255, 0.25);
	background: transparent;
	color: #fff;
}

.gvd-octocam__btn--ghost:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }

.gvd-octocam__btn--wide { padding-inline: 2rem; }

/* mt-10 flex flex-col items-center justify-center gap-4 sm:flex-row */
.gvd-octocam__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-top: 2.5rem;
}

@media (min-width: 640px) {
	.gvd-octocam__actions { flex-direction: row; }
}

/* ================================================================== hero == */

/* relative overflow-hidden bg-[#0B1B3D] py-24 lg:py-32 */
.gvd-octocam__hero {
	position: relative;
	overflow: hidden;
	background: #0b1b3d;
	padding-block: 6rem;
}

@media (min-width: 1024px) {
	.gvd-octocam__hero { padding-block: 8rem; }
}

/* bg-gradient-to-br from-[#0B1B3D] via-[#0e2a5e] to-[#0B1B3D] */
.gvd-octocam__herobase {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom right, #0b1b3d, #0e2a5e, #0b1b3d);
}

/* 48px white/5 grid, masked to an ellipse at the top */
.gvd-octocam__herogridbg {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
	background-size: 48px 48px;
	mask-image: radial-gradient(ellipse 75% 70% at 50% 0%, #000 30%, transparent 75%);
	-webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 0%, #000 30%, transparent 75%);
}

/* The two drifting blurred orbs. */
.gvd-octocam__orb {
	position: absolute;
	border-radius: 9999px;
	pointer-events: none;
}

.gvd-octocam__orb--a {
	left: -6rem;
	top: 2.5rem;
	width: 18rem;
	height: 18rem;
	background: rgba(37, 99, 235, 0.25);
	filter: blur(110px);
	animation: gvd-octocam-drift-a 12s ease-in-out infinite;
}

.gvd-octocam__orb--b {
	right: 0;
	top: 33.333%;
	width: 20rem;
	height: 20rem;
	background: rgba(59, 130, 246, 0.2);
	filter: blur(130px);
	animation: gvd-octocam-drift-b 15s ease-in-out infinite;
}

@keyframes gvd-octocam-drift-a {
	0%, 100% { transform: translate(0, 0); }
	50% { transform: translate(30px, -20px); }
}

@keyframes gvd-octocam-drift-b {
	0%, 100% { transform: translate(0, 0); }
	50% { transform: translate(-40px, 30px); }
}

/* The accent hairline across the very top of the hero. */
.gvd-octocam__hairline {
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 1px;
	background: linear-gradient(to right, transparent, rgba(37, 99, 235, 0.6), transparent);
}

/* grid items-center gap-14 lg:grid-cols-[1.05fr_0.95fr] */
.gvd-octocam__herolayout {
	position: relative;
	z-index: 1;
	display: grid;
	align-items: center;
	gap: 3.5rem;
}

@media (min-width: 1024px) {
	.gvd-octocam__herolayout {
		grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
		gap: 3rem;
	}
}

/* mt-5 text-4xl sm:text-5xl lg:text-[3.1rem] leading-[1.06] */
.gvd-octocam__herotitle {
	margin: 1.25rem 0 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 2.25rem;
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: -0.025em;
	color: #fff;
}

@media (min-width: 640px) { .gvd-octocam__herotitle { font-size: 3rem; } }
@media (min-width: 1024px) { .gvd-octocam__herotitle { font-size: 3.1rem; } }

/* mt-6 max-w-xl text-lg leading-relaxed text-white/65 */
.gvd-octocam__herolede {
	max-width: 36rem;
	margin: 1.5rem 0 0;
	color: rgba(255, 255, 255, 0.65);
	font-size: 1.125rem;
	line-height: 1.625;
}

/* mt-7 inline-flex rounded-xl border border-white/10 bg-white/5 px-4 py-2.5 */
.gvd-octocam__herobadge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 1.75rem 0 0;
	padding: 0.625rem 1rem;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 0.75rem;
	background: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(8px);
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.875rem;
	line-height: 1.25rem;
}

.gvd-octocam__herobadge strong { color: #fff; font-weight: 600; }
.gvd-octocam__badgeicon { flex-shrink: 0; color: #2563eb; }

.gvd-octocam__heroactions { margin-top: 2.25rem; }

/* Certification / trust strip. */
.gvd-octocam__stripwrap { position: relative; z-index: 1; margin-top: 4rem; }

@media (min-width: 1024px) { .gvd-octocam__stripwrap { margin-top: 5rem; } }

/* flex flex-wrap items-center justify-center gap-x-8 gap-y-3 rounded-2xl
   border border-white/10 bg-white/[0.04] px-6 py-5 backdrop-blur */
.gvd-octocam__strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem 2rem;
	padding: 1.25rem 1.5rem;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 1rem;
	background: rgba(255, 255, 255, 0.04);
	backdrop-filter: blur(8px);
}

.gvd-octocam__stripitem {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.25rem;
	text-align: left;
}

.gvd-octocam__stripicon { flex-shrink: 0; color: #2563eb; }

/* ================================================== hero photography ===== */

/*
 * The hero media is real product photography. The bodies are white, so each
 * cutout sits on a deliberate near-white stage — the same surface the model
 * detail page uses (.gvd-model__media) — rather than floating on the navy
 * where a white camera would dissolve into its own drop shadow.
 */

.gvd-octocam__heromedia {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.gvd-octocam__stage {
	position: relative;
	margin: 0;
}

/* The accent light behind the stage panel. */
.gvd-octocam__stageglow {
	position: absolute;
	inset: -1.5rem -1rem -2rem;
	border-radius: 2.25rem;
	background: radial-gradient(
		ellipse at 50% 45%,
		rgba(37, 99, 235, 0.38),
		rgba(37, 99, 235, 0.12) 55%,
		transparent 76%
	);
	filter: blur(14px);
	pointer-events: none;
}

.gvd-octocam__stageimg {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: auto;
	padding: 1.5rem;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 1.25rem;
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 24px 48px -18px rgba(0, 0, 0, 0.65);
	object-fit: contain;
}

@media (min-width: 640px) {
	.gvd-octocam__stageimg { padding: 2rem 2.25rem; }
}

.gvd-octocam__stagecap {
	position: relative;
	z-index: 1;
	margin-top: 1rem;
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.875rem;
	line-height: 1.5;
	text-align: center;
}

/* The rail of individual models under the stage: same white surface, small. */
.gvd-octocam__rail {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	margin: 0.5rem 0 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 480px) {
	.gvd-octocam__rail { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.gvd-octocam__railitem {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	text-align: center;
}

.gvd-octocam__railshot {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 5.25rem;
	padding: 0.5rem;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 0.75rem;
	background: rgba(255, 255, 255, 0.94);
}

.gvd-octocam__railshot img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.gvd-octocam__railmodel {
	display: block;
	margin-top: 0.5rem;
	color: #fff;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.gvd-octocam__raillabel {
	display: block;
	margin-top: 0.125rem;
	color: rgba(255, 255, 255, 0.62);
	font-size: 0.6875rem;
	line-height: 1.35;
}

@media (prefers-reduced-motion: reduce) {
	.gvd-octocam__orb { animation: none; }
}

/* ================================================================= grids == */

.gvd-octocam__grid {
	display: grid;
	gap: 1rem;
	margin-top: 3.5rem;
	grid-template-columns: minmax(0, 1fr);
}

/* gap-4 sm:grid-cols-2 lg:grid-cols-3 */
@media (min-width: 640px) { .gvd-octocam__grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .gvd-octocam__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Applications / AI tiles: grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 */
.gvd-octocam__grid--apps,
.gvd-octocam__grid--ai-tile { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 640px) {
	.gvd-octocam__grid--apps,
	.gvd-octocam__grid--ai-tile { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.gvd-octocam__grid--apps,
	.gvd-octocam__grid--ai-tile { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Lumina AI rows: gap-4 sm:grid-cols-2 lg:grid-cols-3 */
@media (min-width: 640px) { .gvd-octocam__grid--ai-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .gvd-octocam__grid--ai-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

@media (min-width: 1024px) { .gvd-octocam__grid--tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

@media (min-width: 640px) { .gvd-octocam__grid--types { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .gvd-octocam__grid--types { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/*
 * One compact catalogue grid, two to four columns. The page size (24) divides
 * by 2, 3 and 4 so the capped grid always ends on a full row; once the visitor
 * expands it a short last row reads as "that is the end of the range".
 */
.gvd-octocam__grid--models {
	margin-top: 1.75rem;
	gap: 1rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: stretch;
}

@media (min-width: 640px) { .gvd-octocam__grid--models { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .gvd-octocam__grid--models { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.gvd-octocam__grid--models > [hidden] { display: none; }

/* Recorders: the same cards, a little more air above them. */
.gvd-octocam__grid--nvr { margin-top: 3rem; }

/*
 * Chassis photographs are long and flat, and a rack unit is unrecognisable
 * once its ends are cropped — so the recorder grid widens its frame instead
 * of zooming, and the whole unit stays in view.
 */
.gvd-octocam__grid--nvr .gvd-octocam__pcard-media { aspect-ratio: 16 / 10; }
.gvd-octocam__grid--nvr .gvd-octocam__pcard-img { padding: 0.75rem; transform: none; }
.gvd-octocam__grid--nvr .gvd-octocam__pcard:hover .gvd-octocam__pcard-img { transform: scale(1.04); }

/* ==================================================== capability cards === */

/* flex h-full items-start gap-4 rounded-2xl border border-gray-100 bg-white
   p-6 shadow-sm hover:-translate-y-1 hover:border-accent/30 hover:shadow-lg */
.gvd-octocam__capcard {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	height: 100%;
	padding: 1.5rem;
	border: 1px solid #f3f4f6;
	border-radius: 1rem;
	background: #fff;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.gvd-octocam__capcard:hover {
	transform: translateY(-4px);
	border-color: rgba(37, 99, 235, 0.3);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

/* flex h-12 w-12 flex-shrink-0 rounded-xl bg-accent/10 */
.gvd-octocam__capicon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 3rem;
	height: 3rem;
	border-radius: 0.75rem;
	background: rgba(37, 99, 235, 0.1);
	color: #2563eb;
	transition: background-color 0.3s ease;
}

.gvd-octocam__capcard:hover .gvd-octocam__capicon,
.gvd-octocam__typecard:hover .gvd-octocam__capicon { background: rgba(37, 99, 235, 0.2); }

/* pt-1.5 text-sm font-medium leading-snug text-text */
.gvd-octocam__captext {
	margin: 0;
	padding-top: 0.375rem;
	color: #1a1a2e;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.375;
}

/* ============================================================== overview == */

/* mt-6 text-2xl sm:text-3xl font-bold leading-snug */
.gvd-octocam__overview-title {
	margin: 1.5rem 0 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.375;
	color: #1a1a2e;
}

@media (min-width: 640px) { .gvd-octocam__overview-title { font-size: 1.875rem; } }

/* mx-auto mt-6 max-w-2xl text-lg leading-relaxed text-text-muted */
.gvd-octocam__overview-text {
	max-width: 42rem;
	margin: 1.5rem auto 0;
	color: #6b7280;
	font-size: 1.125rem;
	line-height: 1.625;
}

/* mt-6 inline-flex rounded-full bg-accent/10 px-4 py-2 text-sm font-semibold */
.gvd-octocam__pillnote {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 1.5rem 0 0;
	padding: 0.5rem 1rem;
	border-radius: 9999px;
	background: rgba(37, 99, 235, 0.1);
	color: #2563eb;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.25rem;
}

.gvd-octocam__tier:hover {
	transform: translateY(-4px);
	border-color: rgba(37, 99, 235, 0.3);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.gvd-octocam__tiericon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 0.75rem;
	background: rgba(37, 99, 235, 0.1);
	color: #2563eb;
}

.gvd-octocam__tierlist li {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	color: #6b7280;
	font-size: 0.875rem;
	line-height: 1.25rem;
}

.gvd-octocam__tierlist li .gvd-svg { flex-shrink: 0; color: #2563eb; }

/* ======================================================== camera types === */

.gvd-octocam__typecard {
	height: 100%;
	padding: 1.5rem;
	border: 1px solid #f3f4f6;
	border-radius: 1rem;
	background: #fff;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.gvd-octocam__typecard:hover {
	transform: translateY(-4px);
	border-color: rgba(37, 99, 235, 0.3);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.gvd-octocam__typename {
	margin: 1.25rem 0 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.75rem;
	color: #1a1a2e;
}

.gvd-octocam__typetag {
	margin: 0.25rem 0 0;
	color: #2563eb;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.25rem;
}

.gvd-octocam__typedesc {
	margin: 0.5rem 0 0;
	color: #6b7280;
	font-size: 0.875rem;
	line-height: 1.625;
}

/* ========================================================= model cards === */

/*
 * A catalogue card carries only what identifies a model in a grid of fifty:
 * the photograph at full width, the model number a buyer scans for, a short
 * name and the range it belongs to. Every card is the same height — media on a
 * fixed ratio, a one-line number, a two-line name, a footer pinned to the base
 * — so the grid stays even whatever the client types into the title.
 */
.gvd-octocam__pcard {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid #eef0f4;
	border-radius: 0.875rem;
	background: #fff;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	text-decoration: none;
	transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.gvd-octocam__pcard:hover,
.gvd-octocam__pcard:focus-visible {
	transform: translateY(-3px);
	border-color: rgba(37, 99, 235, 0.35);
	box-shadow: 0 12px 20px -8px rgba(11, 27, 61, 0.22);
	text-decoration: none;
}

/*
 * The photograph is the card. Product shots carry a lot of empty white around
 * the body, so the image is scaled past the frame and clipped — the camera
 * fills the tile instead of floating in the middle of it.
 */
.gvd-octocam__pcard-media {
	position: relative;
	display: block;
	aspect-ratio: 5 / 4;
	overflow: hidden;
	background: linear-gradient(160deg, #fbfcfd 0%, #eef1f5 100%);
}

.gvd-octocam__pcard-img {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0.25rem;
	object-fit: contain;
	transform: scale(1.1);
	transition: transform 0.4s ease;
}

.gvd-octocam__pcard:hover .gvd-octocam__pcard-img { transform: scale(1.16); }

.gvd-octocam__pcard-ph {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: #cbd2dc;
}

.gvd-octocam__pcard-phlabel {
	margin-top: 0.5rem;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.gvd-octocam__pcard-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 0.75rem 0.875rem 0.75rem;
	border-top: 1px solid #eef0f4;
}

/* The number a buyer orders by leads the card. */
.gvd-octocam__pcard-model {
	display: block;
	overflow: hidden;
	color: #0b1b3d;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.25;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* Two lines, hard-clipped: the spreadsheet sentence lives on the detail page. */
.gvd-octocam__pcard-title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	min-height: 2.25rem;
	margin-top: 0.25rem;
	color: #6b7280;
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.125rem;
}

.gvd-octocam__pcard-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-top: auto;
	padding-top: 0.625rem;
}

.gvd-octocam__pcard-chip {
	display: inline-block;
	max-width: 100%;
	overflow: hidden;
	padding: 0.125rem 0.5rem;
	border-radius: 999px;
	background: rgba(37, 99, 235, 0.08);
	color: #2563eb;
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1.125rem;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.gvd-octocam__pcard-more {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	color: #9ca3af;
	transition: transform 0.2s ease, color 0.2s ease;
}

.gvd-octocam__pcard:hover .gvd-octocam__pcard-more {
	transform: translateX(3px);
	color: #2563eb;
}

/* ========================================================== AI features == */

/* The faint grid over the navy AI band. */
.gvd-octocam__darkgrid {
	position: absolute;
	inset: 0;
	opacity: 0.6;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
	background-size: 48px 48px;
	mask-image: radial-gradient(ellipse at 50% 0%, #000 20%, transparent 70%);
	-webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 20%, transparent 70%);
}

/* rounded-2xl border border-white/10 bg-white/[0.05] backdrop-blur-md */
.gvd-octocam__aicard {
	display: flex;
	height: 100%;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 1rem;
	background: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(12px);
	transition: transform 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}

.gvd-octocam__aicard:hover {
	transform: translateY(-4px);
	border-color: rgba(37, 99, 235, 0.4);
	background: rgba(255, 255, 255, 0.08);
}

/* Nova: flex-col items-center gap-3 p-6 text-center */
.gvd-octocam__aicard--tile {
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	padding: 1.5rem;
	text-align: center;
}

/* Lumina: items-center gap-4 p-5 */
.gvd-octocam__aicard--row {
	align-items: center;
	gap: 1rem;
	padding: 1.25rem;
}

/* h-12 w-12 rounded-xl bg-accent/15 ring-1 ring-accent/30 */
.gvd-octocam__aiicon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 3rem;
	height: 3rem;
	border-radius: 0.75rem;
	background: rgba(37, 99, 235, 0.15);
	box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.3);
	color: #2563eb;
}

.gvd-octocam__ailabel {
	color: #fff;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.25;
}

.gvd-octocam__aicard--row .gvd-octocam__ailabel { line-height: 1.375; }

/* ================================================= application tiles ===== */

/* flex h-full flex-col items-center gap-3 rounded-2xl p-6 text-center */
.gvd-octocam__tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	height: 100%;
	padding: 1.5rem;
	border-radius: 1rem;
	text-align: center;
	transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.gvd-octocam__tile--light {
	border: 1px solid #f3f4f6;
	background: #fff;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.gvd-octocam__tile--light:hover {
	transform: translateY(-4px);
	border-color: rgba(37, 99, 235, 0.3);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.gvd-octocam__tileicon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 0.75rem;
	background: rgba(37, 99, 235, 0.1);
	color: #2563eb;
	transition: background-color 0.3s ease;
}

.gvd-octocam__tile--light:hover .gvd-octocam__tileicon { background: rgba(37, 99, 235, 0.2); }

.gvd-octocam__tilelabel {
	color: #1a1a2e;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.25;
}

/* =================================================================== why == */

/* flex items-center gap-4 rounded-2xl border border-gray-100 bg-gray-50/60 p-5 */
.gvd-octocam__whyrow {
	display: flex;
	align-items: center;
	gap: 1rem;
	height: 100%;
	padding: 1.25rem;
	border: 1px solid #f3f4f6;
	border-radius: 1rem;
	background: rgba(249, 250, 251, 0.6);
}

.gvd-octocam__whyicon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 0.75rem;
	background: rgba(37, 99, 235, 0.1);
	color: #2563eb;
}

.gvd-octocam__whylabel { color: #1a1a2e; font-weight: 500; }

/* ============================================ catalogue: filter + more == */

.gvd-octocam__catalog { margin-top: 2.5rem; }

/* Hidden until the inline script reveals it — no dead buttons without JS. */
.gvd-octocam__filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding-bottom: 0.25rem;
}

.gvd-octocam__filter[hidden] { display: none; }

.gvd-octocam__filterbtn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.875rem;
	border: 1px solid #e5e7eb;
	border-radius: 999px;
	background: #fff;
	color: #4b5563;
	font-family: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.25rem;
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.gvd-octocam__filterbtn:hover {
	border-color: rgba(37, 99, 235, 0.4);
	color: #1a1a2e;
}

.gvd-octocam__filterbtn.is-active {
	border-color: #0b1b3d;
	background: #0b1b3d;
	color: #fff;
}

.gvd-octocam__filtercount {
	padding: 0 0.375rem;
	border-radius: 999px;
	background: rgba(17, 24, 39, 0.06);
	color: #6b7280;
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1.125rem;
}

.gvd-octocam__filterbtn.is-active .gvd-octocam__filtercount {
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
}

.gvd-octocam__more {
	margin: 2rem 0 0;
	text-align: center;
}

.gvd-octocam__more[hidden] { display: none; }

/* =================================================================== CTA == */

.gvd-octocam__cta { background: #0b1b3d; text-align: center; }

.gvd-octocam__ctaglow {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at bottom, rgba(37, 99, 235, 0.25) 0%, transparent 55%);
}

.gvd-octocam__ctainner { position: relative; z-index: 1; max-width: 48rem; }

/* mt-6 text-3xl sm:text-4xl lg:text-5xl font-bold leading-[1.1] */
.gvd-octocam__ctatitle {
	margin: 1.5rem 0 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.875rem;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.025em;
	color: #fff;
}

@media (min-width: 640px) { .gvd-octocam__ctatitle { font-size: 2.25rem; } }
@media (min-width: 1024px) { .gvd-octocam__ctatitle { font-size: 3rem; } }

/* mx-auto mt-6 max-w-xl text-lg text-white/65 */
.gvd-octocam__ctatext {
	max-width: 36rem;
	margin: 1.5rem auto 0;
	color: rgba(255, 255, 255, 0.65);
	font-size: 1.125rem;
	line-height: 1.625;
}

.gvd-octocam__actions--cta { margin-top: 2.5rem; }