/* ===== Features page (features.html) ===== */

/* Page title in S1 (we keep H1 visually as H2 for hierarchy harmony) */
.page-title {
	font-size: clamp(24px, 2.6vw, 40px);
	font-weight: 800;
	margin: 6px 0 12px;
}

/* Section title baseline for this page */
.section-title {
	font-size: clamp(22px, 2.2vw, 32px);
	font-weight: 800;
	margin-bottom: 12px;
}
.section-intro {
	color: var(--muted);
	max-width: 70ch;
	margin-bottom: 18px;
}

/* ----- S1: Feature Overview ----- */
.fx-hero {
	padding: clamp(28px, 4vw, 48px) 0;
	background: var(--surface);
	margin-top: 50px;
}
.fx-hero-grid {
	display: grid;
	gap: clamp(16px, 3vw, 28px);
	grid-template-columns: 1.05fr 0.95fr;
	align-items: center;
}
.fx-hero-copy .lead {
	color: var(--muted);
	margin: 0 0 12px;
}
.fx-hero-visual img {
	border-radius: var(--radius);
	border: 1px solid var(--line);
}
.fx-hero-visual figcaption {
	margin-top: 8px;
	color: var(--muted);
	font-size: 0.95rem;
}

/* ----- S2: Complication Layout ----- */
.fx-complications {
	padding: clamp(28px, 5vw, 56px) 0;
	background: #f9fafb;
}
.fx-comp-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	margin-bottom: 12px;
}
.fx-comp-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 16px;
	box-shadow: var(--shadow);
	transition: transform 0.2s ease, box-shadow 0.3s ease;
}
.fx-comp-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 32px rgba(15, 23, 42, 0.1);
}
.fx-comp-figure img {
	border-radius: var(--radius);
	border: 1px solid var(--line);
}
.fx-comp-figure figcaption {
	margin-top: 8px;
	color: var(--muted);
	text-align: center;
}

/* ----- S3: Design System ----- */
.fx-designsystem {
	padding: clamp(28px, 5vw, 56px) 0;
	background: var(--surface);
}
.ds-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.ds-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 16px;
	box-shadow: var(--shadow);
	transition: transform 0.2s ease, box-shadow 0.3s ease;
}
.ds-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 32px rgba(15, 23, 42, 0.1);
}
.prose p {
	margin: 0 0 12px;
	color: var(--muted);
}
.dash-list {
	margin: 8px 0 0;
	padding-left: 1.1rem;
}
.dash-list li {
	margin: 4px 0;
	list-style: '–  ';
}

/* Color swatches (no images) */
.swatches {
	display: flex;
	gap: 8px;
	margin-top: 6px;
}
.swatch {
	width: 32px;
	height: 24px;
	border-radius: 6px;
	border: 1px solid var(--line);
	box-shadow: var(--shadow);
}
.swatch-ink {
	background: var(--ink);
}
.swatch-brand {
	background: var(--brand);
}
.swatch-accent {
	background: var(--accent);
}
.swatch-success {
	background: var(--success);
}

/* Reveal-on-scroll shared pattern */
.observe {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}
.observe.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ----- Responsive ----- */
@media (max-width: 900px) {
	.fx-hero-grid {
		grid-template-columns: 1fr;
	}
}
/* ----- S4: AOD Profiles ----- */
.fx-aod {
	padding: clamp(28px, 5vw, 56px) 0;
	background: var(--surface);
}
.aod-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 16px;
}
.aod-item {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 12px;
	box-shadow: var(--shadow);
	text-align: center;
	transition: transform 0.2s ease, box-shadow 0.3s ease;
}
.aod-item:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 32px rgba(15, 23, 42, 0.1);
}
.aod-item figcaption {
	margin-top: 8px;
	color: var(--muted);
}

/* ----- S5: Power Discipline ----- */
.fx-power {
	padding: clamp(28px, 5vw, 56px) 0;
	background: #f9fafb;
}
.kpi-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	margin-bottom: 14px;
}
.kpi-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 16px;
	box-shadow: var(--shadow);
	transition: transform 0.2s ease, box-shadow 0.3s ease;
}
.kpi-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 32px rgba(15, 23, 42, 0.1);
}
.power-strip {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 12px;
	align-items: start;
	justify-items: center;
}
.power-strip img {
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

/* ----- S6: Accessibility & Locale ----- */
.fx-access {
	padding: clamp(28px, 5vw, 56px) 0;
	background: var(--surface);
}
.access-grid {
	display: grid;
	gap: 20px;
	align-items: start;
	grid-template-columns: 1.1fr 0.9fr;
}
.locale-gallery {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.locale-gallery figure {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 10px;
	box-shadow: var(--shadow);
	text-align: center;
	transition: transform 0.2s ease, box-shadow 0.3s ease;
}
.locale-gallery figure:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 32px rgba(15, 23, 42, 0.1);
}
.locale-gallery figcaption {
	margin-top: 6px;
	color: var(--muted);
}

/* ----- Responsive (S4–S6) ----- */
@media (max-width: 900px) {
	.access-grid {
		grid-template-columns: 1fr;
	}
}
/* ----- S7: Performance Tests ----- */
.fx-tests {
	padding: clamp(28px, 5vw, 56px) 0;
	background: var(--surface);
}
.test-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
}
.test-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 14px;
	box-shadow: var(--shadow);
	transition: transform 0.2s ease, box-shadow 0.3s ease;
}
.test-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 32px rgba(15, 23, 42, 0.1);
}
.test-card img {
	border-radius: 12px;
	border: 1px solid var(--line);
	margin-bottom: 10px;
}

/* ----- S8: Release Timeline ----- */
.fx-timeline {
	padding: clamp(28px, 5vw, 56px) 0;
	background: #f9fafb;
}
.timeline-wrap {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 20px;
	align-items: start;
}
.timeline {
	margin: 0;
	padding: 0 0 0 26px;
	list-style: none;
	position: relative;
}
.timeline::before {
	content: '';
	position: absolute;
	left: 10px;
	top: 4px;
	bottom: 4px;
	width: 2px;
	background: var(--line);
}
.timeline li {
	position: relative;
	margin: 0 0 16px;
}
.t-dot {
	position: absolute;
	left: -2px;
	top: 0.45em;
	width: 12px;
	height: 12px;
	background: var(--brand);
	border-radius: 50%;
	box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand) 18%, #fff 82%);
}
.t-body h3 {
	margin: 0 0 6px;
	font-weight: 700;
}
.t-body p {
	margin: 0;
	color: var(--muted);
}
.timeline-figure img {
	border-radius: var(--radius);
	border: 1px solid var(--line);
}
.timeline-figure figcaption {
	margin-top: 8px;
	color: var(--muted);
	text-align: center;
}

/* ----- S9: Developer Notes & Roadmap ----- */
.fx-devnotes {
	padding: clamp(28px, 5vw, 56px) 0;
	background: var(--surface);
}
.dev-grid {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 20px;
	align-items: start;
}
.dash-list {
	margin: 8px 0 0;
	padding-left: 1.1rem;
}
.dash-list li {
	margin: 4px 0;
	list-style: '–  ';
}
.dev-figure img {
	border-radius: var(--radius);
	border: 1px solid var(--line);
}
.dev-figure figcaption {
	margin-top: 6px;
	color: var(--muted);
	text-align: center;
}

/* ----- Responsive (S7–S9) ----- */
@media (max-width: 900px) {
	.timeline-wrap,
	.dev-grid {
		grid-template-columns: 1fr;
	}
}
/* ----- S10: QA & Support ----- */
.fx-qa {
	padding: clamp(28px, 5vw, 56px) 0;
	background: var(--surface);
}
.qa-grid {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 20px;
	align-items: start;
}
.qa-cta {
	margin-top: 12px;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

/* FAQ pattern (local to features page) */
.faq-list {
	display: grid;
	gap: 10px;
	margin: 12px 0;
}
.faq-item {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: #fff;
	box-shadow: var(--shadow);
}
.faq-q {
	width: 100%;
	text-align: left;
	background: transparent;
	border: none;
	padding: 14px 16px;
	cursor: pointer;
	font-weight: 600;
	position: relative;
}
.faq-q::after {
	content: '▾';
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%) rotate(0);
	transition: transform 0.2s ease;
}
.faq-q[aria-expanded='true']::after {
	transform: translateY(-50%) rotate(180deg);
}
.faq-a {
	padding: 0 16px 14px 16px;
	color: var(--muted);
}

.qa-media {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.qa-media figure {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 10px;
	box-shadow: var(--shadow);
	text-align: center;
	transition: transform 0.2s ease, box-shadow 0.3s ease;
}
.qa-media figure:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 32px rgba(15, 23, 42, 0.1);
}
.qa-media figcaption {
	margin-top: 6px;
	color: var(--muted);
}

/* ----- S11: Battery Tips ----- */
.fx-battery {
	padding: clamp(28px, 5vw, 56px) 0;
	background: #f9fafb;
}
.tips-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.tip-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 14px;
	box-shadow: var(--shadow);
	transition: transform 0.2s ease, box-shadow 0.3s ease;
}
.tip-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 32px rgba(15, 23, 42, 0.1);
}
.tip-card img {
	border-radius: 12px;
	border: 1px solid var(--line);
	margin-bottom: 10px;
}

/* ----- S12: Security & Privacy ----- */
.fx-privacy {
	padding: clamp(28px, 5vw, 56px) 0;
	background: var(--surface);
}
.privacy-grid {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 20px;
	align-items: start;
}
.privacy-media {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.privacy-media figure {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 10px;
	box-shadow: var(--shadow);
	text-align: center;
	transition: transform 0.2s ease, box-shadow 0.3s ease;
}
.privacy-media figure:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 32px rgba(15, 23, 42, 0.1);
}
.privacy-media figcaption {
	margin-top: 6px;
	color: var(--muted);
}

/* ----- Responsive (S10–S12) ----- */
@media (max-width: 900px) {
	.qa-grid,
	.privacy-grid {
		grid-template-columns: 1fr;
	}
}