/* ---- Product hero ---- */
.avt-prod-hero { position: relative; overflow: hidden; }
.avt-prod-hero.avt-section--dark {
	background: var(--hero-bg);
	color: var(--hero-fg);
}
.avt-prod-hero__gridfx {
	position: absolute; inset: 0; pointer-events: none;
	background-image:
		linear-gradient(var(--hero-grid-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--hero-grid-line) 1px, transparent 1px);
	background-size: 58px 58px;
	-webkit-mask-image: radial-gradient(125% 78% at 50% 0%, #000 32%, transparent 80%);
	mask-image: radial-gradient(125% 78% at 50% 0%, #000 32%, transparent 80%);
}
.avt-prod-hero__glow {
	position: absolute;
	left: 10%;
	right: 10%;
	top: -40px;
	height: 120px;
	pointer-events: none;
	z-index: 0;
	background: radial-gradient(
		55% 80% at 50% 0%,
		color-mix(in srgb, var(--pr-accent, #FF6A2B) 22%, transparent),
		color-mix(in srgb, var(--pr-accent, #FF6A2B) 10%, transparent) 48%,
		transparent 78%
	);
}
.avt-prod-hero__hairline {
	position: absolute;
	left: 0; right: 0; top: 0; height: 1px;
	pointer-events: none; z-index: 1;
	background: linear-gradient(
		90deg,
		transparent,
		color-mix(in srgb, var(--pr-accent, #FF6A2B) 55%, transparent) 28%,
		color-mix(in srgb, var(--pr-accent, #FF6A2B) 35%, transparent) 62%,
		transparent
	);
}
.avt-prod-hero-grid { position: relative; z-index: 1; align-items: center; }
.avt-prod-pill {
	display: inline-flex; align-items: center; gap: 8px;
	border: 1px solid color-mix(in srgb, var(--pr-accent, #FF6A2B) 35%, transparent);
	border-radius: 999px; padding: 6px 14px;
	background: color-mix(in srgb, var(--pr-accent, #FF6A2B) 8%, transparent);
	font-family: var(--avt-font-mono, 'Geist Mono', monospace);
	font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; color: #FFB169;
}
.avt-prod-pill__dot { width: 6px; height: 6px; border-radius: 999px; background: var(--pr-accent, #FF6A2B); }
.avt-prod-hero-copy { color: var(--hero-fg); }
.avt-prod-hero-title { font-size: clamp(32px, 5vw, 52px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; color: var(--hero-fg); margin: 22px 0 0; }
.avt-prod-hero-lede { font-size: 16.5px; line-height: 1.65; color: var(--hero-muted); margin: 18px 0 0; max-width: 52ch; }
.avt-prod-metrics { margin-top: 34px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.avt-prod-metric-v { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; }
.avt-prod-metric-l { font-size: 11.5px; color: var(--hero-muted-2); margin-top: 2px; }
.avt-cta-row { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }

.avt-prod-hero-media { position: relative; }
.avt-prod-hero-stack { position: relative; border-radius: 20px; overflow: hidden; border: 1px solid rgba(255,255,255,0.12); background: #0D0D12; aspect-ratio: 4/5; max-width: 400px; margin: 0 auto; box-shadow: 0 30px 80px rgba(0,0,0,0.4); }
.avt-prod-hero-thermal, .avt-prod-hero-model { position: absolute; inset: 0; width: 100%; height: 100%; }
.avt-prod-hero-thermal { object-fit: cover; }
.avt-prod-hero-model { object-fit: contain; padding: 22px; background: #0B0B0F; animation: avt-ai4s-reveal 9s ease-in-out infinite; }
@keyframes avt-ai4s-reveal { 0%{opacity:0} 9%{opacity:0} 22%{opacity:1} 78%{opacity:1} 91%{opacity:0} 100%{opacity:0} }
.avt-prod-hero-badge {
	position: absolute; left: 14px; bottom: 14px;
	font-family: var(--avt-font-mono, 'Geist Mono', monospace);
	font-size: 10px; letter-spacing: 0.06em; color: #F5F5F7;
	background: rgba(8,8,11,0.6); backdrop-filter: blur(6px);
	border: 1px solid rgba(255,255,255,0.16); border-radius: 999px; padding: 6px 12px;
}
.avt-prod-value-head { text-align: center; max-width: 820px; margin: 0 auto; }
.avt-prod-value-head .avt-section-title { max-width: 820px; margin-left: auto; margin-right: auto; }
.avt-feature-4.avt-prod-focus { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .avt-feature-4.avt-prod-focus { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .avt-feature-4.avt-prod-focus { grid-template-columns: 1fr; } }

/* ---- Focus ---- */
.avt-prod-focus-card { position: relative; padding-top: 28px; }
.avt-prod-focus-dot { position: absolute; top: 24px; left: 24px; width: 10px; height: 10px; border-radius: 999px; }
.avt-prod-focus-title { font-size: 18px; font-weight: 600; margin: 16px 0 0; color: var(--fg); }
.avt-prod-focus-body { font-size: 13.5px; line-height: 1.6; color: var(--muted); margin: 8px 0 0; }

/* ---- Conditions (ai2neo) ---- */
.avt-prod-conditions .avt-prod-condition { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; color: var(--fg); }

/* ---- Gallery ---- */
.avt-prod-gallery { margin-top: 32px; }
.avt-prod-shot { margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,0.09); background: #0E0E12; aspect-ratio: 3/4; }
.avt-prod-shot img { width: 100%; height: 100%; object-fit: contain; }

.avt-prod-disclaimer { max-width: 720px; margin: 0 auto; padding: 18px 22px; border: 1px solid var(--border); border-left: 3px solid var(--pr-accent, var(--accent)); border-radius: 12px; font-size: 13.5px; line-height: 1.6; color: var(--muted); background: var(--card); }

/* ---- Gradient hero emphasis ---- */
.avt-prod-hero-em {
	background: linear-gradient(92deg, #FFB169, #FF7A45, #E8543A);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.avt-product-page--ai4body .avt-prod-hero-em { background: linear-gradient(92deg, #E86FB5, #C43A8E); -webkit-background-clip: text; background-clip: text; }
.avt-product-page--ai4animal .avt-prod-hero-em { background: linear-gradient(92deg, #6FD6A6, #2E9D68); -webkit-background-clip: text; background-clip: text; }
.avt-product-page--ai2neo .avt-prod-hero-em { background: linear-gradient(92deg, #A992F5, #7B5BE6); -webkit-background-clip: text; background-clip: text; }

/* ---- Product cross-link pills ---- */
.avt-prod-pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 34px; }
.avt-prod-pills__label { font-family: var(--avt-font-mono, 'Geist Mono', monospace); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hero-muted-2); margin-right: 4px; }
.avt-prod-pills__item {
	display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 999px;
	font-size: 13px; font-weight: 500; border: 1px solid rgba(255,255,255,0.14);
	color: var(--hero-muted); background: rgba(255,255,255,0.04); text-decoration: none; transition: border-color .15s, color .15s;
}
.avt-prod-pills__item:hover { border-color: color-mix(in srgb, var(--pr-accent, #FF6A2B) 45%, transparent); color: var(--hero-fg); }
.avt-prod-pills__item.is-active {
	border-color: color-mix(in srgb, var(--pr-accent, #FF6A2B) 50%, transparent);
	background: color-mix(in srgb, var(--pr-accent, #FF6A2B) 12%, transparent);
	color: var(--hero-fg);
}

.avt-hero-metrics-div { width: 1px; height: 34px; background: rgba(255,255,255,0.12); flex-shrink: 0; }

/* ---- Hero aspect variants ---- */
.avt-prod-hero-stack--ai4body,
.avt-prod-hero-stack--ai4animal,
.avt-prod-hero-stack--ai2neo { max-width: 480px; aspect-ratio: 4 / 3; }

/* ---- Stat cards ---- */
.avt-prod-how__head { text-align: center; max-width: 820px; margin: 0 auto; }
.avt-prod-stat-grid { display: grid; gap: 14px; margin-top: 44px; }
.avt-prod-stat-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.avt-prod-stat-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.avt-prod-stat-card {
	background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 26px 22px;
}
.avt-prod-stat-card__v { font-size: 40px; font-weight: 600; letter-spacing: -0.025em; line-height: 1; }
.avt-prod-stat-card__v--accent { color: #E8543A; }
.avt-prod-stat-card__l { font-size: 13px; line-height: 1.45; color: var(--muted); margin-top: 8px; }

/* ---- Focus ---- */
.avt-prod-focus-section.avt-prod-focus--center .avt-prod-focus-intro { text-align: center; max-width: 820px; margin: 0 auto; }
.avt-prod-focus-section.avt-prod-focus--left .avt-prod-focus-intro { max-width: 720px; }
.avt-prod-flow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.avt-prod-flow__step {
	font-size: 13px; font-weight: 500; padding: 8px 14px; border-radius: 999px;
	background: color-mix(in srgb, var(--pr-accent, var(--accent)) 8%, transparent);
	border: 1px solid color-mix(in srgb, var(--pr-accent, var(--accent)) 22%, transparent);
	color: var(--fg);
}
.avt-prod-flow__arrow { color: var(--muted); font-size: 14px; }
.avt-prod-focus-cards { margin-top: 36px; }
.avt-prod-focus-card--plain { padding: 28px 24px; }
.avt-prod-used-in { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 32px; }
.avt-prod-used-in__label { font-family: var(--avt-font-mono, 'Geist Mono', monospace); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.avt-prod-used-in__tag { font-size: 13px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--fg); }

/* ---- Gallery ---- */
.avt-prod-gallery-section__head { margin-bottom: 32px; }
.avt-prod-gallery-grid { display: grid; gap: 14px; }
.avt-prod-gallery-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.avt-prod-gallery-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.avt-prod-gallery-card { margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,0.09); background: #0E0E12; }
.avt-section--surface .avt-prod-gallery-card { border-color: var(--border); background: var(--card); }
.avt-prod-gallery-card__media { aspect-ratio: 3/4; }
.avt-prod-gallery-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avt-prod-gallery-card__cap { padding: 10px 14px; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hero-muted-2, var(--muted)); }

/* ---- ai2neo conditions ---- */
.avt-prod-conditions-section { background: #0A0A0D !important; }
.avt-prod-conditions-section__inner { max-width: 820px; }
.avt-kicker--neo { color: #A992F5; }
.avt-prod-condition-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.avt-prod-condition-pill {
	font-size: 14px; font-weight: 500; padding: 10px 16px; border-radius: 999px;
}
.avt-prod-condition-pill.is-highlight {
	background: rgba(123,91,230,0.14); border: 1px solid rgba(123,91,230,0.35); color: #D4C8FA;
}
.avt-prod-condition-pill.is-muted {
	background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); color: #9A9AA2;
}
.avt-prod-conditions-section__lede { margin-top: 20px; max-width: 640px; }
.avt-prod-conditions-section__foot { margin-top: 18px; font-size: 11px; letter-spacing: 0.06em; color: #6E6E77; }

/* ---- CTA ---- */
.avt-prod-cta__inner { text-align: center; max-width: 640px; margin: 0 auto; }
.avt-prod-cta__actions { justify-content: center; }

/* ---- Island sections (shared) ---- */
.avt-prod-island-section__head { text-align: center; max-width: 720px; margin: 0 auto 28px; }
.avt-kicker--warm { color: #FFB169; }
.avt-kicker--body { color: #E86FB5; }
.avt-kicker--animal { color: #6FD6A6; }

.avt-island__chrome {
	border: 1px solid rgba(255,255,255,0.10); border-radius: 18px;
	background: rgba(255,255,255,0.02); padding: 22px 20px 18px;
}
.avt-island__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.avt-island__eyebrow { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #FFB169; }
.avt-island--regionlab .avt-island__eyebrow { color: #E86FB5; }
.avt-island--horsemap .avt-island__eyebrow { color: #6FD6A6; }
.avt-island__title { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; margin-top: 8px; color: #F4F4F6; }
.avt-island__lede { font-size: 13px; color: #9A9AA2; margin-top: 6px; max-width: 460px; line-height: 1.5; }

.avt-island-tabs { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); }
.avt-island-tabs__btn {
	border: 0; background: transparent; color: #9A9AA2; font-size: 13px; font-weight: 500;
	padding: 8px 16px; border-radius: 999px; cursor: pointer; font-family: inherit;
}
.avt-island-tabs__btn.is-active { background: rgba(255,255,255,0.12); color: #F5F5F7; }

.avt-island-wrap {
	position: relative; display: flex; gap: 20px; align-items: flex-end; justify-content: center;
	border: 1px solid rgba(255,255,255,0.10); border-radius: 16px;
	background: radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
	padding: 20px 16px 14px; min-height: 520px;
}
.avt-island-wrap--quad { gap: 12px; flex-wrap: nowrap; }
.avt-island-fig-col { flex: 1; max-width: 340px; display: flex; flex-direction: column; align-items: center; height: 494px; min-height: 320px; }
.avt-island-wrap--quad .avt-island-fig-col { max-width: 240px; height: 440px; min-height: 280px; flex: 1 1 0; }
.avt-island-fig { position: relative; flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; min-height: 280px; }
.avt-island-fig svg { height: 100%; width: auto; max-width: 100%; display: block; }
.avt-island-fig__photo {
	display: none;
	height: 100%; width: auto; max-width: 100%;
	object-fit: contain; object-position: bottom center;
	border-radius: 8px;
}
.avt-island-fig__photo[hidden] { display: none !important; }
.avt-island.is-original .avt-island-fig { align-items: center; }
.avt-island.is-original .avt-island-fig svg { display: none !important; }
.avt-island.is-original .avt-island-fig__photo {
	display: block;
	object-position: center;
}
.avt-island-fig .ai4s-grp path,
.avt-island-fig .ai4s-grp polygon,
.avt-island-fig .ai4s-grp ellipse,
.avt-island-fig .ai4s-grp circle { transition: fill .16s ease, filter .16s ease; }
.ai4s-grp, .b4-zone { transition: filter .16s ease; }
.avt-island-fig-label { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: #8A8A92; margin-top: 10px; }

.avt-island-hint {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	text-align: center; pointer-events: none; max-width: 240px;
}
.avt-island-hint__label { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #7E7E87; }
.avt-island-hint p { font-size: 13px; color: #B4B4BC; margin: 6px 0 0; line-height: 1.5; }

.avt-island-tip {
	position: absolute; z-index: 4; min-width: 210px; max-width: 260px;
	padding: 14px 16px; border-radius: 14px;
	background: rgba(12,12,16,0.92); border: 1px solid rgba(255,255,255,0.14);
	box-shadow: 0 12px 40px rgba(0,0,0,0.45); pointer-events: none;
}
.avt-island-tip__row { display: flex; align-items: center; gap: 8px; }
.avt-island-tip__dot { width: 9px; height: 9px; border-radius: 999px; flex-shrink: 0; }
.avt-island-tip__label { font-size: 14px; font-weight: 600; color: #F5F5F7; }
.avt-island-tip__region, .avt-island-tip__sub { font-size: 11.5px; color: #9A9AA2; margin-top: 2px; }
.avt-island-tip__value-row { display: flex; align-items: baseline; gap: 9px; margin-top: 11px; flex-wrap: wrap; }
.avt-island-tip__value { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; line-height: 1; }
.avt-island-tip__band { font-size: 11px; font-weight: 600; letter-spacing: 0.02em; padding: 4px 10px; border-radius: 999px; border: 1px solid transparent; }
.avt-island-tip__dx { font-size: 11.5px; line-height: 1.5; color: #C4C4CC; margin-top: 10px; max-width: 230px; }
.avt-island-tip__others { font-size: 11px; color: #8A8A92; margin-top: 8px; }

.avt-island-scale {
	border: 1px solid rgba(255,255,255,0.12); border-radius: 16px;
	background: rgba(255,255,255,0.03); padding: 18px 20px 16px; margin-top: 16px;
}
.avt-island-scale__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.avt-island-scale__title { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: #8F8F98; }
.avt-island-scale__unit { font-size: 10px; color: #6E6E77; }
.avt-island-scale__bar { position: relative; height: 16px; border-radius: 6px; margin-top: 24px; }
.avt-island-scale__marker {
	position: absolute; top: 50%; transform: translate(-50%, -50%);
	width: 15px; height: 15px; border-radius: 999px; background: #fff;
	border: 3px solid #FF6A2B; box-shadow: 0 2px 8px rgba(0,0,0,0.55);
	transition: left .28s cubic-bezier(.4,0,.2,1);
	animation: avt-island-marker 1.6s ease-in-out infinite;
}
@keyframes avt-island-marker { 0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.16)} }
.avt-island-scale__ticks { position: relative; height: 26px; margin-top: 6px; }
.avt-island-scale__tick { position: absolute; transform: translateX(-50%); text-align: center; }
.avt-island-scale__tick-mark { display: block; width: 1px; height: 5px; background: rgba(255,255,255,0.28); margin: 0 auto; }
.avt-island-scale__tick-label { display: block; font-size: 9px; color: #8A8A92; margin-top: 2px; font-family: var(--avt-font-mono, 'Geist Mono', monospace); }
.avt-island-scale__legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; color: #9A9AA2; line-height: 1.3; }
.avt-island-scale__legend-swatch { width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0; }
.avt-island-scale__legend-label { color: #C4C4CC; font-weight: 500; }
.avt-island-scale__legend-range { color: #7E7E87; }
.avt-island-scale__legend, .avt-island-scale__legend-row { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 18px; padding-top: 4px; }
.avt-island-scale__nm-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; font-size: 10px; color: #8A8A92; }
.avt-island-footnote { display: none; }

/* ---- RegionLab layout ---- */
.avt-island-regionlab-grid { display: grid; grid-template-columns: 140px 1fr 220px; gap: 16px; align-items: start; }
.avt-island-models, .avt-island-regions { display: flex; flex-direction: column; gap: 6px; }
.avt-island-model, .avt-island-region {
	border: 1px solid rgba(255,255,255,0.10); border-radius: 10px; background: rgba(255,255,255,0.03);
	padding: 8px 10px; font-size: 11px; color: #B4B4BC; cursor: pointer; text-align: left; font-family: inherit;
}
.avt-island-model.is-active, .avt-island-region.is-active {
	border-color: rgba(232,111,181,0.45); background: rgba(232,111,181,0.10); color: #F5F5F7;
}
.avt-island-wrap--regionlab { min-height: 420px; flex: 1; }
.avt-island-fig-wrap { flex: 1; max-width: 280px; display: flex; flex-direction: column; align-items: center; }
.avt-island-info { display: flex; flex-direction: column; gap: 14px; }
.avt-island-info__photo-wrap { border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,0.10); background: #0E0E12; }
.avt-island-info-photo { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.avt-island-info-photo-cap { padding: 8px 10px; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: #8A8A92; }
.avt-island-info__label { font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: #8A8A92; margin-bottom: 6px; }
.avt-island-info-use { font-size: 12px; line-height: 1.55; color: #C4C4CC; margin: 0; }
.avt-island-info__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.avt-island-info-chip { font-size: 10px; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.12); color: #9A9AA2; }
.avt-island-zone-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.avt-island-zone-chip { font-size: 10px; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.10); color: #B4B4BC; cursor: pointer; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
	.avt-prod-stat-grid--4, .avt-prod-stat-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.avt-prod-gallery-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.avt-island-regionlab-grid { grid-template-columns: 1fr; }
	.avt-island-models, .avt-island-regions { flex-direction: row; flex-wrap: wrap; }
	.avt-island-wrap { flex-wrap: wrap; min-height: auto; padding-bottom: 24px; }
	.avt-island-fig-col { height: 360px; max-width: 280px; }
	.avt-island-wrap--quad { flex-wrap: wrap; }
	.avt-island-wrap--quad .avt-island-fig-col { max-width: 46%; height: 320px; }
}
@media (max-width: 560px) {
	.avt-prod-stat-grid--4, .avt-prod-stat-grid--3 { grid-template-columns: 1fr; }
	.avt-prod-gallery-grid--2, .avt-prod-gallery-grid--3 { grid-template-columns: 1fr; }
	.avt-island-fig-col { height: 280px; }
	.avt-island-wrap--quad .avt-island-fig-col { max-width: 100%; height: 280px; flex: 1 1 100%; }
	.avt-prod-pills { gap: 6px; }
}
