/* 360 Auto Eye — responsive layer.
 *
 * The design's styles.css has no media queries; it's a fixed 1440px layout.
 * Everything in this file is ADDITIVE: it never restyles the desktop state
 * and never edits assets/css/styles.css (which stays byte-identical to the
 * source design). New rules go here, and breakpoints fold the desktop layout
 * down for tablet and mobile.
 *
 * Breakpoint scheme:
 *   – up to 1099px : single-column / collapsed nav (tablet)
 *   – up to  768px : single column everywhere, smaller type
 *   – up to  640px : tight mobile chrome
 *   – up to  480px : phone, single column, big tap targets
 *
 * Per-section responsive rules will be appended below as each section is
 * ported in Step 3.
 */

/* ───────────────────────── shared layout chrome ───────────────────────── */

.page { position: relative; }                  /* anchor for the .nav-panel dropdown */

/* Anchor-scroll behavior: leave room above each section so the pill nav at
 * the top of the page doesn't obscure the heading of the section a user just
 * jumped to via "#…". */
html { scroll-behavior: smooth; }
section[id], div[id] { scroll-margin-top: 24px; }

/* WP admin bar:
 *   WordPress itself outputs `html { margin-top: 32px !important; }` (46px
 *   below 782px) when the admin bar is rendered, so we don't add our own
 *   offset — doing so would stack on top of WP's and produce ~64px of dead
 *   space. The note here is to remind anyone editing this file later that
 *   the offset is handled, just not by us. */

/* Section-shell scaling — these rules cascade to every <section class="block">
 * so per-section media-query blocks below don't have to repeat them. */
@media (max-width: 1099px) {
	section.block { padding: 44px 40px; }
	.h1 { font-size: 56px; }
	.h2 { font-size: 44px; }
	.h3 { font-size: 28px; }
}

@media (max-width: 768px) {
	.page { padding: 18px 16px 56px; }
	section.block { padding: 36px 28px; border-radius: var(--r-lg); margin-top: 14px; }
	.h1 { font-size: 42px; line-height: 1.03; }
	.h2 { font-size: 34px; }
	.h3 { font-size: 24px; }
	.lede { font-size: 16px; }
	.btn { padding: 12px 18px; }
}

@media (max-width: 480px) {
	.page { padding: 14px 12px 48px; }
	section.block { padding: 26px 20px; }
	.h1 { font-size: 34px; letter-spacing: -0.025em; }
	.h2 { font-size: 28px; }
	.h3 { font-size: 22px; }
	.lede { font-size: 15px; }
}

/* ─────────────────────────── section #0 — nav ─────────────────────────── */

/* Sticky nav: the pill bar pins to the top of the viewport during scroll.
 *
 * --nav-top is the offset from the viewport top. Default is 12px; when
 * WordPress is rendering the admin bar (logged-in users), we lift it by the
 * admin bar's height so the nav doesn't slide under it (32px desktop /
 * 46px below 782px — matches WP's own breakpoint for the admin bar). */
.page { --nav-top: 12px; }
body.admin-bar .page { --nav-top: 44px; }
@media (max-width: 782px) {
	body.admin-bar .page { --nav-top: 58px; }
}

.nav {
	position: sticky;
	top: var(--nav-top);
	z-index: 100;
	box-shadow: 0 6px 24px rgba(11,18,32,.06), 0 2px 6px rgba(11,18,32,.03);
}

/* Smooth fade between active-pill states (driven by the scroll-spy in
 * nav.js — see "Scroll spy" block there). Without this, the active-state
 * background/colour swap would be instant on every section transition. */
.nav .pill,
.nav-panel .np-link {
	transition:
		background .28s cubic-bezier(.4, 0, .2, 1),
		color      .28s cubic-bezier(.4, 0, .2, 1);
}

/* Hamburger dropdown panel — rendered inside <nav> so position:absolute
 * uses the sticky nav as its containing block. Left/right:0 spans the
 * nav's width; top:calc(100% + 8px) drops it 8px below the nav's bottom
 * edge and slides with the nav during scroll. */
.nav-panel {
	position: absolute;
	top: calc(100% + 8px);
	left: 0; right: 0;
	background: var(--bg-primary);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	padding: 14px;
	display: flex; flex-direction: column; gap: 4px;
	z-index: 50;
	box-shadow: 0 20px 50px rgba(11,18,32,.10), 0 2px 8px rgba(11,18,32,.04);
}
/* Honour the [hidden] attribute. Without this, .nav-panel's display:flex
 * (above) wins on specificity over the UA stylesheet's [hidden]{display:none}
 * — they're tied at (0,1,0) but ours loads later. The panel would stay
 * visible no matter what nav.js toggled. */
.nav-panel[hidden] { display: none; }
.nav-panel .np-link {
	padding: 12px 16px;
	border-radius: 12px;
	font-size: 15px; font-weight: 500;
	color: var(--ink-primary);
}
.nav-panel .np-link:hover { background: var(--bg-secondary); }
.nav-panel .np-link.active {
	background: var(--ink-primary);
	color: #fff;
}
.nav-panel .np-cta {
	margin-top: 8px;
	padding: 14px 18px;
	border-radius: var(--r-pill);
	background: var(--ink-primary); color: #fff;
	text-align: center; font-weight: 600;
}

/* Desktop (≥1100px): the inline pill nav serves the user — the hamburger
 * and its dropdown are mobile-only chrome, so hide both here. Belt-and-
 * braces on .nav-panel in case its [hidden] state ever gets out of sync
 * after a viewport resize. */
@media (min-width: 1100px) {
	.nav .menu,
	.nav-panel { display: none; }
}

/* Below 1100px: hide the inline pills; the hamburger + nav-panel take over.
 * Logo and CTA stay visible alongside the hamburger. */
@media (max-width: 1099px) {
	.nav .pill { display: none; }
	.nav { gap: 10px; }
}

/* Below 640px: tighten everything. Drop the CTA from the bar — it's already
 * in the dropdown panel as .np-cta. */
@media (max-width: 640px) {
	.page { padding: 16px 14px 48px; }
	.nav { padding: 10px 12px; }
	.nav .cta { display: none; }
	.nav .logo { padding-right: 10px; margin-right: 0; }
	.nav .logo .logo-line-a { font-size: 16px; }
	.nav .logo .logo-line-b { display: none; }
}

/* Below 420px: drop the wordmark + tagline, keep just the eye-mark image. */
@media (max-width: 420px) {
	.nav .logo { border-right: 0; padding-right: 0; }
	.nav .logo .logo-text { display: none; }
}

/* ──────────────────── 360 AutoEye brand lockup (0.11.0+) ────────────────────
 *
 * Used in the nav (eye-mark 48×38 + CSS wordmark · matches the kit's
 * "Top-bar lockup" recipe) and in the footer (smaller 36×28 mark + small
 * wordmark + tagline).
 *
 * The eye PNG has lots of vertical padding around the artwork itself —
 * object-fit:contain centres it inside whichever pixel box we render.
 * Wordmark font is Barlow Condensed (loaded via Google Fonts in
 * functions.php) with "EYE" italicised in --accent-blue. */

.nav .logo {
	display: flex;
	align-items: center;
	gap: 10px;
}
.nav .logo .logo-mark {
	width: 48px;
	height: 38px;
	object-fit: contain;
	object-position: center;
	flex-shrink: 0;
	display: block;
}
.nav .logo .logo-text {
	display: flex;
	flex-direction: column;
	line-height: 1;
}
.nav .logo .logo-line-a {
	font-family: 'Barlow Condensed', 'Inter Tight', sans-serif;
	font-weight: 900;
	font-size: 20px;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: var(--ink-primary);
}
.nav .logo .logo-line-a em {
	font-style: italic;
	font-weight: 800;
	color: var(--accent-blue);
}
.nav .logo .logo-line-b {
	font-family: 'Barlow Condensed', 'Inter Tight', sans-serif;
	font-weight: 600;
	font-size: 9px;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--ink-tertiary);
	margin-top: 4px;
}

/* Footer lockup — same pattern, smaller. The tagline keeps the footer's
 * existing "monospace tagline" vibe in a more compact form. */
.footer .l {
	display: flex;
	align-items: center;
	gap: 12px;
}
.footer .l .footer-mark {
	width: 36px;
	height: 28px;
	object-fit: contain;
	object-position: center;
	flex-shrink: 0;
	display: block;
}
.footer .l .footer-text {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
}
.footer .l .footer-line-a {
	font-family: 'Barlow Condensed', 'Inter Tight', sans-serif;
	font-weight: 900;
	font-size: 15px;
	letter-spacing: .015em;
	text-transform: uppercase;
	color: var(--ink-primary);
}
.footer .l .footer-line-a em {
	font-style: italic;
	font-weight: 800;
	color: var(--accent-blue);
}
.footer .l .footer-line-b {
	margin-top: 3px;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 11px;
	letter-spacing: .04em;
	color: var(--ink-tertiary);
}

/* ─────────────────────────── section #1 — hero ─────────────────────────── */
/*
 * Layout (0.3.0):
 *   - Hero is a relative container with three layers:
 *       1. .hero-carousel — 10 absolute slides, CSS-only cross-fade rotation
 *       2. .hero-veil     — dark left-to-right gradient for text legibility
 *       3. .hero-text     — overlaid copy column on the left
 *   - The lead-capture form has moved out of the hero into the Use Cases
 *     section's .right-fit banner (see "section #5 — right-fit form" below).
 */

.hero--carousel { position: relative; overflow: hidden; padding: 0; min-height: 560px; }
.hero--carousel .hero-text {
	position: relative;
	z-index: 3;
	padding: 56px 64px;
	max-width: 620px;
	color: #fff;
}
.hero--carousel .hero-text .eyebrow { color: rgba(255,255,255,.7); }
.hero--carousel .hero-text .h1      { color: #fff; }
.hero--carousel .hero-text .lede    { color: rgba(255,255,255,.78); }

/* Carousel stage — fills the whole hero card. */
.hero-carousel {
	position: absolute;
	inset: 0;
	z-index: 1;
}
.hslide {
	position: absolute;
	inset: 0;
	opacity: 0;
	background: var(--ink-primary);
	background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 12px, rgba(255,255,255,.05) 12px 13px);
	animation: heroFade 40s infinite ease-in-out;
}
.hslide::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent 0, transparent calc(50% - 1px), rgba(67,97,255,.35) 50%, transparent calc(50% + 1px), transparent 100%);
	background-size: 200% 100%;
	animation: scan 4.5s linear infinite;
	pointer-events: none;
}
/* Each slide is offset by 4s. Slide 1 gets -0.8s so it's already at peak
 * opacity at page load (no fade-in flash for the first visible slide). */
.hslide:nth-child(1)  { animation-delay: -0.8s; }
.hslide:nth-child(2)  { animation-delay:  3.2s; }
.hslide:nth-child(3)  { animation-delay:  7.2s; }
.hslide:nth-child(4)  { animation-delay: 11.2s; }
.hslide:nth-child(5)  { animation-delay: 15.2s; }
.hslide:nth-child(6)  { animation-delay: 19.2s; }
.hslide:nth-child(7)  { animation-delay: 23.2s; }
.hslide:nth-child(8)  { animation-delay: 27.2s; }
.hslide:nth-child(9)  { animation-delay: 31.2s; }
.hslide:nth-child(10) { animation-delay: 35.2s; }

@keyframes heroFade {
	0%   { opacity: 0; }
	2%   { opacity: 1; }    /* 0.8s fade-in */
	10%  { opacity: 1; }    /* 3.2s held visible */
	12%  { opacity: 0; }    /* 0.8s fade-out — overlaps next slide's fade-in */
	100% { opacity: 0; }
}

/* Reduced motion: kill the rotation and the scan-line. Slide 1 stays
 * visible as a static panel. */
@media (prefers-reduced-motion: reduce) {
	.hslide,
	.hslide::after { animation: none; }
	.hslide:nth-child(1) { opacity: 1; }
}

/* Per-slide chrome — the bottom-right scan-result card label. */
.hslide-tag {
	position: absolute;
	top: 32px;
	right: 40px;
	z-index: 2;
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(0,184,255,.85);
}
.hslide-name {
	position: absolute;
	bottom: 44px;
	right: 40px;
	z-index: 2;
	font-family: 'Inter Tight', sans-serif;
	font-weight: 700;
	letter-spacing: -.015em;
	font-size: 26px;
	color: rgba(255,255,255,.92);
	text-align: right;
	max-width: 50%;
}
.hslide-meta {
	position: absolute;
	bottom: 24px;
	right: 40px;
	z-index: 2;
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	color: rgba(255,255,255,.45);
	letter-spacing: .04em;
}

/* Dark veil between carousel and text — heavier on the left where the
 * copy sits, fading to ~10% on the right so the scan card stays legible. */
.hero-veil {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(105deg,
		rgba(11,18,32,.92) 0%,
		rgba(11,18,32,.86) 38%,
		rgba(11,18,32,.5)  62%,
		rgba(11,18,32,.1)  100%);
	pointer-events: none;
}

/* Hero responsive */
@media (max-width: 1099px) {
	.hero--carousel { min-height: 520px; }
	.hero--carousel .hero-text { padding: 44px 40px; max-width: 560px; }
	.hslide-name { font-size: 22px; bottom: 36px; right: 32px; }
	.hslide-tag  { top: 24px; right: 32px; }
	.hslide-meta { bottom: 16px; right: 32px; }
	.hero-veil {
		background: linear-gradient(160deg,
			rgba(11,18,32,.94) 0%,
			rgba(11,18,32,.86) 55%,
			rgba(11,18,32,.55) 100%);
	}
}

@media (max-width: 768px) {
	.hero--carousel { min-height: 460px; }
	.hero--carousel .hero-text { padding: 32px 28px; max-width: none; }
	.hslide-name { font-size: 18px; bottom: 24px; right: 24px; max-width: 70%; }
	.hslide-tag  { top: 18px; right: 24px; font-size: 10px; }
	.hslide-meta { bottom: 10px; right: 24px; font-size: 10px; }
	.hero-veil {
		background: linear-gradient(180deg,
			rgba(11,18,32,.88) 0%,
			rgba(11,18,32,.78) 60%,
			rgba(11,18,32,.65) 100%);
	}
}

@media (max-width: 480px) {
	.hero--carousel { min-height: 420px; }
	.hero--carousel .hero-text { padding: 24px 20px; }
	.hslide-name { font-size: 16px; max-width: 80%; }
}

/* ───────────────────── section #2 — capture every vehicle ─────────────────────
 *
 * The capture section's content was replaced in 0.4.0: the 5-card vehicle-
 * type scan-strip is gone, replaced with a single damage-detection demo
 * (.dmg-demo). Markup is in template-parts/section-capture.php. The legacy
 * .scan-strip CSS rules in styles.css stay untouched (no longer referenced).
 */

.dmg-demo {
	margin-top: 36px;
	display: grid;
	grid-template-columns: 1.55fr 1fr;
	gap: 18px;
	align-items: stretch;
}

/* ── Stage: SVG car silhouette + overlay markers + scan line ── */
.dmg-stage {
	position: relative;
	background:
		repeating-linear-gradient(45deg, #fafbfc 0 12px, #f3f4f6 12px 13px);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	padding: 24px 28px 30px;
	overflow: hidden;
}
.dmg-stage-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 18px;
	position: relative;
	z-index: 2;
}
.dmg-eyebrow {
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink-tertiary);
}
.dmg-tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 12px 5px 10px;
	background: var(--ink-primary);
	color: #fff;
	border-radius: var(--r-pill);
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px;
	letter-spacing: .14em;
}
.dmg-tag-dot {
	width: 6px; height: 6px; border-radius: 999px;
	background: var(--status-clear);
	box-shadow: 0 0 0 0 rgba(15,174,110,.6);
	animation: dmgTagBlink 1.6s ease-out infinite;
}
@keyframes dmgTagBlink {
	0%   { box-shadow: 0 0 0 0 rgba(15,174,110,.6); }
	70%  { box-shadow: 0 0 0 6px rgba(15,174,110,0); }
	100% { box-shadow: 0 0 0 0 rgba(15,174,110,0); }
}

/* The car illustration sits inside a wrapper with the SVG's aspect ratio
 * so percent-based marker positions stay aligned at every viewport size. */
.dmg-car-wrap {
	position: relative;
	aspect-ratio: 720 / 280;
	width: 100%;
}
.dmg-car {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	color: var(--ink-primary);
}

/* Damage markers — solid dot with an expanding sonar-ring pulse. */
.dmark {
	position: absolute;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	z-index: 3;
	pointer-events: none;
	animation: dmarkPulse 2.4s cubic-bezier(.4,0,.2,1) infinite;
}
.dmark::before {
	content: "";
	position: absolute;
	inset: -2px;
	border-radius: 50%;
	border: 1.5px solid rgba(255,255,255,.9);
	box-sizing: border-box;
}
.dmark-flag { background: var(--status-flag); --dmark-glow: rgba(229,72,77,.55);  animation-delay: 0s;   }
.dmark-warn { background: var(--status-warn); --dmark-glow: rgba(232,155,14,.6);  animation-delay: .3s;  }
.dmark-cyan { background: var(--accent-cyan); --dmark-glow: rgba(0,184,255,.6);   animation-delay: .6s;  }
.dmark:nth-of-type(4) { animation-delay: .9s; }
.dmark:nth-of-type(5) { animation-delay: 1.2s; }
.dmark:nth-of-type(6) { animation-delay: 1.5s; }

@keyframes dmarkPulse {
	0%   { box-shadow: 0 0 0 0   var(--dmark-glow); }
	70%  { box-shadow: 0 0 0 14px transparent; }
	100% { box-shadow: 0 0 0 14px transparent; }
}

/* Vertical scan line travelling across the stage. */
.dmg-scan {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg,
		transparent 0,
		transparent calc(50% - 1px),
		rgba(67,97,255,.35) 50%,
		transparent calc(50% + 1px),
		transparent 100%);
	background-size: 200% 100%;
	animation: scan 6s linear infinite;
	pointer-events: none;
	z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
	.dmark,
	.dmg-scan,
	.dmg-tag-dot { animation: none; }
}

/* ── Report panel ── */
.dmg-report {
	background: var(--bg-secondary);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	padding: 24px 26px;
	display: flex;
	flex-direction: column;
}
.dmg-report-head {
	margin-bottom: 16px;
	padding-bottom: 14px;
	border-bottom: 1px dashed var(--border);
}
.dmg-report-title {
	display: block;
	font-family: 'Inter Tight', sans-serif;
	font-weight: 700;
	font-size: 17px;
	letter-spacing: -.01em;
	color: var(--ink-primary);
}
.dmg-report-meta {
	display: block;
	margin-top: 4px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	letter-spacing: .04em;
	color: var(--ink-tertiary);
	text-transform: uppercase;
}
.dmg-report-list {
	display: flex;
	flex-direction: column;
	flex: 1;
}
.dmg-row {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px dashed var(--border);
	font-family: 'JetBrains Mono', monospace;
	font-size: 12.5px;
}
.dmg-row:last-of-type { border-bottom: 0; }
.dmg-panel {
	color: var(--ink-primary);
	font-weight: 500;
	font-family: 'Inter', sans-serif;
	font-size: 13.5px;
}
.dmg-detail {
	color: var(--ink-tertiary);
	font-size: 11.5px;
}
.dmg-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: var(--r-pill);
	font-family: 'Inter', sans-serif;
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
}
.dmg-pill .d {
	width: 6px; height: 6px; border-radius: 999px;
	background: currentColor;
}
.dmg-pill.clear { background: rgba(15,174,110,.1);  color: var(--status-clear); }
.dmg-pill.warn  { background: rgba(232,155,14,.12); color: var(--status-warn); }
.dmg-pill.flag  { background: rgba(229,72,77,.1);   color: var(--status-flag); }
.dmg-report-foot {
	margin: 14px 0 0;
	font-size: 12px;
	color: var(--ink-secondary);
	font-style: italic;
}

/* ── Tag-row tidy-up below the demo (matches old breakpoints) ── */
@media (max-width: 768px) {
	.tag-row { gap: 8px; margin-top: 20px; }
	.tag { padding: 10px 16px; font-size: 13px; }
}

/* ── Demo responsive ── */
@media (max-width: 1099px) {
	.dmg-demo { grid-template-columns: 1fr; gap: 14px; margin-top: 28px; }
}
@media (max-width: 768px) {
	.dmg-stage { padding: 20px 22px 24px; }
	.dmg-report { padding: 20px 22px; }
	.dmg-row { grid-template-columns: 1fr auto; gap: 8px; }
	.dmg-detail { display: none; }   /* tighten the row on narrow widths */
}
@media (max-width: 480px) {
	.dmark { width: 12px; height: 12px; }
	.dmg-stage { padding: 16px 16px 18px; }
	.dmg-report { padding: 18px; }
}

/* ─────────────── section #2.5 — interior 360° capture (0.12.0+) ───────────────
 *
 * Layout: section heading + a single 16:9 stage that holds the Pannellum
 * viewer canvas, an overlaid loader, and a "drag to look around" hint chip.
 * Loader fades out via the .is-loaded class set by interior-360.js once
 * Pannellum has rendered its first frame. */

.i360 .i360-head { text-align: center; }
.i360 .i360-head .h2 { margin-left: auto; margin-right: auto; max-width: 20ch; }
.i360 .i360-head .lede { margin-left: auto; margin-right: auto; text-align: center; }

.i360-stage {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	margin-top: 36px;
	background: var(--ink-primary);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	overflow: hidden;
	isolation: isolate;
}

/* The viewer container — Pannellum injects its own canvas + UI inside. */
.i360-viewer {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background: var(--ink-primary);
	cursor: grab;
}
.i360-viewer:active { cursor: grabbing; }
.i360-viewer:focus-visible {
	outline: 2px solid var(--accent-blue);
	outline-offset: -2px;
}

/* Pannellum spins up a fair amount of internal chrome we don't need —
 * hide it. Our loader handles the loading UI; controls are off via config. */
.i360-viewer .pnlm-load-box,
.i360-viewer .pnlm-load-button,
.i360-viewer .pnlm-about-msg,
.i360-viewer .pnlm-panorama-info { display: none !important; }
.i360-viewer .pnlm-container { background: var(--ink-primary); }

/* ── Loader overlay ─────────────────────────────────────────────── */
.i360-loader {
	position: absolute;
	inset: 0;
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	background: var(--ink-primary);
	background-image: repeating-linear-gradient(45deg,
		rgba(255,255,255,.02) 0 12px,
		rgba(255,255,255,.04) 12px 13px);
	color: #fff;
	transition: opacity .45s ease;
}
.i360-stage.is-loaded .i360-loader {
	opacity: 0;
	pointer-events: none;
}

/* Scan-line sweep inside the loader — matches the rest of the site's
 * "live scan" aesthetic (.hslide::after, .imp-img::after, .dmg-scan). */
.i360-loader::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg,
		transparent 0,
		transparent calc(50% - 1px),
		rgba(67,97,255,.30) 50%,
		transparent calc(50% + 1px),
		transparent 100%);
	background-size: 200% 100%;
	animation: scan 5s linear infinite;
	pointer-events: none;
}

.i360-loader-spinner {
	width: 36px;
	height: 36px;
	border: 2px solid rgba(255,255,255,.12);
	border-top-color: var(--accent-cyan);
	border-right-color: var(--accent-blue);
	border-radius: 50%;
	animation: i360-spin .9s linear infinite;
	position: relative;
	z-index: 2;
}
@keyframes i360-spin { to { transform: rotate(360deg); } }

.i360-loader-text {
	position: relative;
	z-index: 2;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255,255,255,.7);
}
.i360-loader-progress {
	position: relative;
	z-index: 2;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 13px;
	letter-spacing: .04em;
	color: var(--accent-cyan);
	font-variant-numeric: tabular-nums;
	min-height: 1em;
}
.i360-loader[data-state="error"] .i360-loader-spinner {
	border-top-color: var(--status-flag);
	border-right-color: rgba(229,72,77,.5);
	animation-duration: 2s;
}
.i360-loader[data-state="error"] .i360-loader-text { color: var(--status-flag); }

@media (prefers-reduced-motion: reduce) {
	.i360-loader-spinner,
	.i360-loader::after { animation: none; }
}

/* ── Drag-to-look hint chip ─────────────────────────────────────── */
.i360-hint {
	position: absolute;
	bottom: 16px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	background: rgba(11,18,32,.7);
	color: rgba(255,255,255,.85);
	border: 1px solid rgba(255,255,255,.08);
	border-radius: var(--r-pill);
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 11px;
	letter-spacing: .06em;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	pointer-events: none;
	opacity: 0;
	transition: opacity .35s ease .2s;
}
.i360-stage.is-loaded .i360-hint { opacity: 1; }
.i360-hint-icon {
	display: inline-block;
	font-size: 13px;
	color: var(--accent-cyan);
}

/* ── Placeholder (when the JPEG hasn't been added yet) ─────────── */
.i360-placeholder {
	margin-top: 36px;
	padding: 64px 32px;
	background: var(--bg-secondary);
	border: 1px dashed var(--border);
	border-radius: var(--r-lg);
	text-align: center;
	color: var(--ink-secondary);
}
.i360-placeholder-eyebrow {
	color: var(--status-warn);
	margin: 0 0 12px;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.i360-placeholder-msg {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	max-width: 56ch;
	margin-left: auto;
	margin-right: auto;
}
.i360-placeholder-msg code {
	background: var(--bg-primary);
	padding: 2px 8px;
	border-radius: 6px;
	border: 1px solid var(--border);
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 12.5px;
	color: var(--ink-primary);
}

@media (max-width: 1099px) {
	.i360-stage { aspect-ratio: 4 / 3; margin-top: 28px; }
}
@media (max-width: 768px) {
	.i360-stage { aspect-ratio: 3 / 2; }
	.i360-hint { font-size: 10px; padding: 6px 12px; }
}
@media (max-width: 480px) {
	.i360-stage { aspect-ratio: 1 / 1; }
	.i360-loader-spinner { width: 28px; height: 28px; }
}

/* ───────────────────────── section #3 — why ─────────────────────────
 *
 * 0.6.0 added a 5th .why-cell ("Reduce risk"). The source styles.css
 * sets .why-grid to repeat(4, 1fr) which would orphan the 5th tile onto
 * its own row — override here to a 5-column layout at desktop. Tablet
 * drops to 3-col (5 items = 3 + 2), phone to 2-col (= 2+2+1), narrow to 1.
 */

.why-grid { grid-template-columns: repeat(5, 1fr); gap: 24px; }

@media (max-width: 1280px) {
	.why-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}
@media (max-width: 1099px) {
	.why-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 36px; }
}
@media (max-width: 768px) {
	.why-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 480px) {
	.why-grid { grid-template-columns: 1fr; gap: 22px; }
	.why-cell h4 { font-size: 17px; margin-top: 14px; }
}

/* ───────────────────── section #4 — how it works ───────────────────── */
@media (max-width: 768px) {
	.step { padding: 24px 20px; }
	.step .h3 { font-size: 22px; }
	.step .img { aspect-ratio: 16/8; }
	.arrow svg { height: 28px; }
}
@media (max-width: 480px) {
	.steps { gap: 12px; margin-top: 36px; }
	.step .pill-tag { padding: 8px 14px; font-size: 12px; }
	.step .img { aspect-ratio: 16/10; }
}

/* ───────────────────── section #5 — use cases ───────────────────── */
@media (max-width: 768px) {
	.uc-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 32px; }
	.uc { padding: 22px; min-height: 0; }
	.uc h4 { font-size: 19px; }
}

/* ───────────── right-fit "Find the right fit" banner (with form, 0.3.0) ─────────────
 *
 * The right-fit was a 1.4fr/auto layout in the source (text + button). Now
 * it carries the lead form too — so it becomes a 1fr/1fr split: pitch
 * copy on the left, white form card on the right against the dark banner.
 * The form re-uses the design's existing .form styling (white card, dark
 * inputs) — no inversion needed.
 */

.right-fit--with-form {
	grid-template-columns: 1fr 1fr;
	align-items: start;
	gap: 40px;
}

.right-fit--with-form .rf-text {
	padding-top: 8px;  /* visual baseline with the form's first label */
	align-self: center;
}

/* The form sits inside a dark banner. Restore dark text on its white card
 * (.right-fit has color:#fff which would otherwise cascade in). */
.right-fit--with-form .rf-form {
	color: var(--ink-primary);
	padding: 28px;
	margin: 0;
	max-width: none;
}
.right-fit--with-form .rf-form h3 { color: var(--ink-primary); }
.right-fit--with-form .rf-form .help { color: var(--ink-tertiary); max-width: none; }

@media (max-width: 1099px) {
	.right-fit--with-form { grid-template-columns: 1fr; gap: 28px; padding: 36px; }
}
@media (max-width: 768px) {
	.right-fit--with-form { padding: 32px; gap: 24px; }
	.right-fit--with-form .rf-form { padding: 24px; }
}
@media (max-width: 480px) {
	.right-fit--with-form { padding: 26px 22px; gap: 20px; }
	.right-fit--with-form .rf-form { padding: 20px; }
	.right-fit--with-form .rf-form h3 { font-size: 20px; }
}

/* ───────────────────── section #6 — outcomes ─────────────────────
 *
 * 0.5.0 redesign — the four .imp-row blocks were replaced with a single
 * .imp-stats card containing a 2×2 grid of .imp-stat tiles. The legacy
 * .imp-row / .imp-card / .imp-img rules in styles.css are now unreferenced
 * but left in place (styles.css is byte-identical to the design source).
 */

.imp-stats {
	margin-top: 40px;
	background: var(--bg-primary);
	border: 1px solid var(--border);
	border-radius: var(--r-xl);
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.imp-stat {
	padding: 40px 44px 36px;
	position: relative;
}
/* Internal dividers — right border on the left column, bottom border on the
 * top row. :not() form keeps the rules robust if the tile count changes. */
.imp-stat:not(:nth-child(2n))        { border-right: 1px solid var(--border); }
.imp-stat:not(:nth-last-child(-n+2)) { border-bottom: 1px solid var(--border); }

.imp-stat .eyebrow {
	display: block;
	margin-bottom: 22px;
}

.imp-num {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 14px;
	line-height: 1;
}
.imp-figure {
	font-family: 'Inter Tight', sans-serif;
	font-weight: 800;
	font-size: 64px;
	letter-spacing: -.045em;
	line-height: .92;
	background: var(--gradient-brand);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.imp-unit {
	font-family: 'Inter Tight', sans-serif;
	font-weight: 600;
	font-size: 22px;
	letter-spacing: -.01em;
	color: var(--ink-secondary);
}

.imp-label {
	display: block;
	font-family: 'Inter Tight', sans-serif;
	font-weight: 700;
	font-size: 17px;
	letter-spacing: -.01em;
	color: var(--ink-primary);
	margin-bottom: 10px;
}

.imp-body {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--ink-secondary);
	max-width: 44ch;
}

@media (max-width: 1099px) {
	.imp-stat { padding: 32px 32px 30px; }
	.imp-figure { font-size: 56px; }
}

@media (max-width: 768px) {
	.imp-stats { grid-template-columns: 1fr; }
	/* Reset desktop divider rules and apply single-column rules instead. */
	.imp-stat:not(:nth-child(2n))        { border-right: 0; }
	.imp-stat:not(:nth-last-child(-n+2)) { border-bottom: 0; }
	.imp-stat:not(:last-child)           { border-bottom: 1px solid var(--border); }
	.imp-stat { padding: 28px 26px; }
	.imp-figure { font-size: 52px; }
	.imp-unit { font-size: 20px; }
	.imp-label { font-size: 16px; }
}

@media (max-width: 480px) {
	.imp-stat { padding: 24px 22px; }
	.imp-figure { font-size: 44px; }
	.imp-stat .eyebrow { margin-bottom: 16px; }
}

/* 0.9.0 — the tyre scanning band (sections #7-10) was removed. Its
 * responsive rules (.tyre, .tyre-bens, .tyre-panels, .tyre-cta, .captures,
 * .tiers, .panel, .report) are gone with it. The legacy desktop rules in
 * styles.css are still there but unreferenced. */

/* ────────────────────── section #11 — about ────────────────────── */
@media (max-width: 1099px) {
	.about { grid-template-columns: 1fr; padding: 44px 40px; gap: 36px; }
	.about .h2 { font-size: 40px; }
}
@media (max-width: 768px) {
	.about { padding: 36px 28px; gap: 28px; }
	.about .h2 { font-size: 32px; }
	.about-meta { grid-template-columns: 1fr; gap: 0; }
	.about-meta .cell { padding: 18px 0; border-right: 0; border-bottom: 1px solid var(--border); }
	.about-meta .cell:last-child { border-bottom: 0; }
	.about-visit { flex-direction: column; align-items: flex-start; gap: 12px; }
}
@media (max-width: 480px) {
	.about { padding: 28px 20px; }
	.about .h2 { font-size: 28px; }
}

/* ────────────────────── section #12 — faq ────────────────────── */
@media (max-width: 1099px) {
	.faq { grid-template-columns: 1fr; gap: 32px; }
	.faq .left .h2 { font-size: 34px; }
}
@media (max-width: 480px) {
	.qa { padding: 18px 20px; }
	.qa summary { font-size: 15.5px; gap: 10px; }
	.qa .a { font-size: 14px; }
}

/* ─────────────────── section #13 — final CTA ─────────────────── */
@media (max-width: 768px) {
	.final { grid-template-columns: 1fr; padding: 40px 32px; gap: 24px; }
	.final .h2 { font-size: 32px; }
	.final .btn { justify-self: start; }
}
@media (max-width: 480px) {
	.final { padding: 32px 24px; }
	.final .h2 { font-size: 26px; }
}

/* ─────────────────── section #14 — footer ─────────────────── */
@media (max-width: 640px) {
	.footer { padding: 20px 4px; flex-direction: column; align-items: flex-start; gap: 16px; }
	.footer .links { gap: 16px; }
}