/* ==========================================================================
   StreetSmart Driving Academy — Sections
   --------------------------------------------------------------------------
   Layer 4 of 4. Every content block on the homepage and the inner pages.
   ========================================================================== */

/* ==========================================================================
   Marquee ticker
   ========================================================================== */
.marquee {
	position: relative;
	padding-block: 26px;
	background: var(--ink-950);
	border-block: 1px solid rgba(255, 255, 255, 0.08);
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
	display: flex; width: max-content;
	animation: marquee-run 38s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-group { display: flex; align-items: center; flex: none; }
.marquee-item {
	display: inline-flex; align-items: center; gap: 14px;
	padding-inline: clamp(24px, 3vw, 44px);
	font-family: var(--f-display);
	font-size: clamp(0.95rem, 1.5vw, 1.2rem);
	font-weight: 500; letter-spacing: -0.02em;
	color: rgba(255, 255, 255, 0.62);
	white-space: nowrap;
}
.marquee-item .icon { width: 16px; height: 16px; color: var(--gold-500); }
.marquee-item::after {
	content: ""; width: 5px; height: 5px; border-radius: 50%;
	background: var(--gold-500); opacity: 0.55; margin-left: clamp(24px, 3vw, 44px);
}
@keyframes marquee-run { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
	.marquee-track { animation: none; }
	.marquee { -webkit-mask-image: none; mask-image: none; }
}

/* ==========================================================================
   Stats
   ========================================================================== */
.stats { background: var(--ink-950); padding-block: clamp(56px, 7vw, 96px); }
.stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
	gap: 1px;
	background: rgba(255, 255, 255, 0.09);
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: var(--r-lg);
	overflow: hidden;
}
.stat {
	background: var(--ink-950);
	padding: clamp(28px, 3.4vw, 44px) clamp(20px, 2.6vw, 34px);
	transition: background-color var(--d-mid) var(--e-out);
}
.stat:hover { background: var(--ink-850); }
.stat-value {
	display: flex; align-items: baseline; gap: 2px;
	font-family: var(--f-display);
	font-size: clamp(2.35rem, 4.6vw, 3.75rem);
	font-weight: 600; letter-spacing: -0.05em; line-height: 1;
	color: var(--t-hi);
	margin-bottom: 12px;
}
.stat-value .stat-suffix { color: var(--gold-500); }
.stat-label {
	font-size: var(--fs-sm);
	color: var(--t-low);
	line-height: 1.5;
}

/* ==========================================================================
   About — layered media beside a content-rich column
   --------------------------------------------------------------------------
   The media column stacks a main photo, a smaller inset overlapping its
   bottom-left, and a credential chip clipped to the top-right. The copy
   column carries a lead paragraph, a row of live figures, the checklist and
   two calls to action. Shared by the homepage section and the About page
   template; the figures row is optional.
   ========================================================================== */
.about { background: var(--paper-200); }
.about-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
	gap: clamp(40px, 5.5vw, 88px);
	align-items: start;
}

/* ---- Media ------------------------------------------------------------- */
.about-media { position: sticky; top: calc(var(--header-h) + 40px); }
/* Reserves room for the inset, which hangs below the main photo. */
.about-media-stack { position: relative; padding-bottom: 64px; }

.about-media-main {
	position: relative; margin: 0;
	aspect-ratio: 5 / 4;
	border-radius: var(--r-xl);
	overflow: hidden;
	background: var(--paper-400);
}
.about-media-main img {
	width: 100%; height: 100%; object-fit: cover;
	transform: scale(1.02);
	transition: transform 1.3s var(--e-out);
}
.about-media:hover .about-media-main img { transform: scale(1.07); }

/* Second photo, overlapping outward at the bottom-left. */
.about-media-inset {
	position: absolute; left: -22px; bottom: 0; margin: 0;
	width: 40%; max-width: 230px;
	aspect-ratio: 1 / 1;
	border-radius: var(--r-lg);
	overflow: hidden;
	border: 7px solid var(--paper-200);
	box-shadow: var(--sh-lg);
	background: var(--paper-400);
}
.about-media-inset img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 1.3s var(--e-out);
}
.about-media:hover .about-media-inset img { transform: scale(1.08); }

/* Credential chip, clipped to the top-right so it never meets the inset. */
.about-badge {
	position: absolute; top: 26px; right: -18px;
	display: flex; align-items: center; gap: 13px;
	max-width: 72%;
	padding: 15px 19px;
	background: var(--paper-100);
	border-radius: var(--r-md);
	box-shadow: var(--sh-lg);
}
.about-badge .icon-badge { width: 40px; height: 40px; flex: none; }
.about-badge .icon-badge .icon { width: 20px; height: 20px; }
.about-badge strong { display: block; font-size: var(--fs-sm); color: var(--i-hi); line-height: 1.3; }
.about-badge span { font-size: var(--fs-xs); color: var(--i-low); }

/* ---- Copy --------------------------------------------------------------- */
.about-lead { font-size: var(--fs-lead); }

/* Live figures, counted from the database — see template-parts/section-about.php */
.about-figures {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	margin: clamp(30px, 3.4vw, 42px) 0;
	background: var(--i-line);
	border: 1px solid var(--i-line);
	border-radius: var(--r-md);
	overflow: hidden;
}
.about-figure {
	background: var(--paper-100);
	padding: clamp(18px, 2vw, 24px) clamp(16px, 1.8vw, 22px);
	transition: background-color var(--d-mid) var(--e-out);
}
.about-figure:hover { background: var(--paper-200); }
.about-figure-value {
	display: flex; align-items: baseline; gap: 1px;
	font-family: var(--f-display);
	font-size: clamp(1.55rem, 2.5vw, 2.05rem);
	font-weight: 600; letter-spacing: -0.045em; line-height: 1;
	color: var(--i-hi);
	margin-bottom: 9px;
}
.about-figure-value .about-figure-suffix { color: var(--gold-600); }
.about-figure-label { font-size: var(--fs-xs); color: var(--i-low); line-height: 1.45; }

.about-list { display: grid; gap: 0; margin: 0 0 clamp(30px, 3.4vw, 40px); }
.about-list li {
	display: flex; align-items: flex-start; gap: 16px;
	padding: 17px 0;
	border-top: 1px solid var(--i-line);
	font-size: var(--fs-sm);
	color: var(--i-mid);
	transition: padding-left 0.45s var(--e-out), color 0.45s var(--e-out);
}
.about-list li:last-child { border-bottom: 1px solid var(--i-line); }
.about-list li:hover { padding-left: 12px; color: var(--i-hi); }
.about-list .icon {
	width: 21px; height: 21px; margin-top: 1px; flex: none;
	color: var(--gold-600);
	transition: transform 0.45s var(--e-spring);
}
.about-list li:hover .icon { transform: scale(1.14) rotate(-8deg); }

.about-actions { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 960px) {
	.about-grid { grid-template-columns: 1fr; }
	.about-media { position: static; margin-bottom: clamp(24px, 4vw, 40px); }
	.about-media-main { aspect-ratio: 4 / 3; }
	.about-media-inset { left: 0; width: 34%; }
	.about-badge { right: 0; }
}
@media (max-width: 560px) {
	.about-figures { grid-template-columns: 1fr; }
	.about-media-stack { padding-bottom: 0; }
	/* Too little width for three overlapping layers to read. */
	.about-media-inset { display: none; }
	.about-badge {
		position: static; max-width: none; margin-top: 14px;
		box-shadow: var(--sh-md);
	}
	.about-actions .btn { width: 100%; }
}

/* ==========================================================================
   Services — bento grid of image cards
   ========================================================================== */
.services { background: var(--ink-950); }
/* Two columns with the lead service spanning both. With the three services
   the academy offers that gives a full-width hero card over a balanced pair;
   with four or five it still fills every row but the last. */
.services-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(14px, 1.6vw, 22px);
}
.service-card {
	position: relative;
	min-height: 420px;
	display: flex; flex-direction: column; justify-content: flex-end;
	padding: clamp(24px, 2.6vw, 36px);
	border-radius: var(--r-lg);
	border: 1px solid rgba(255, 255, 255, 0.10);
	overflow: hidden;
	isolation: isolate;
	background: var(--ink-850);
	transition: border-color var(--d-mid) var(--e-out), transform var(--d-mid) var(--e-out);
}
.service-card:hover { border-color: rgba(242, 183, 5, 0.42); transform: translateY(-6px); }
/* The first service reads as the headline offer and takes the full row. */
.service-card--featured { grid-column: 1 / -1; min-height: 460px; }

.service-card-media { position: absolute; inset: 0; z-index: -2; }
.service-card-media img {
	width: 100%; height: 100%; object-fit: cover;
	transform: scale(1.02);
	transition: transform 1.1s var(--e-out);
}
.service-card:hover .service-card-media img { transform: scale(1.09); }
.service-card::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(180deg, rgba(7, 7, 10, 0.16) 0%, rgba(7, 7, 10, 0.72) 52%, rgba(7, 7, 10, 0.95) 100%);
}

.service-card-index {
	position: absolute; top: clamp(20px, 2.4vw, 30px); left: clamp(24px, 2.6vw, 36px);
	font-family: var(--f-mono);
	font-size: 0.6875rem; letter-spacing: 0.16em;
	color: var(--gold-400);
}
.service-card h3 { color: var(--t-hi); margin-bottom: 14px; max-width: 18ch; }
.service-card-text {
	font-size: var(--fs-sm);
	color: rgba(255, 255, 255, 0.72);
	max-width: 44ch;
	/* Collapsed by default, opened by hover/focus so the grid stays tidy. */
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden;
	transition: -webkit-line-clamp 0.4s var(--e-out);
}
.service-card:hover .service-card-text,
.service-card:focus-within .service-card-text { -webkit-line-clamp: 5; }
.service-card .link-underline { margin-top: 22px; color: var(--t-hi); }

@media (max-width: 640px) {
	.services-grid { grid-template-columns: 1fr; }
	.service-card, .service-card--featured { grid-column: 1 / -1; min-height: 360px; }
	.service-card-text { -webkit-line-clamp: 4; }
}

/* ==========================================================================
   Process — numbered steps with a rail that fills on scroll
   ========================================================================== */
.process { background: var(--paper-300); }
.process-layout {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: clamp(40px, 6vw, 96px);
	align-items: start;
}
.process-intro { position: sticky; top: calc(var(--header-h) + 48px); }

.process-steps { position: relative; padding-left: 62px; }
/* The rail: a muted track with a gold fill scaled by --progress from
   modules/process-rail.js */
.process-steps::before,
.process-steps::after {
	content: ""; position: absolute; left: 23px; top: 12px; bottom: 12px; width: 2px;
	border-radius: var(--r-pill);
	/* Explicit layer below the steps. As the ol's last child the gold fill
	   would otherwise paint over every marker, and a z-index on the marker
	   cannot lift it out: [data-reveal] puts `will-change` on the step, which
	   makes it a stacking context and traps the marker inside. */
	z-index: 0;
}
.process-steps::before { background: var(--i-line-strong); }
.process-steps::after {
	background: linear-gradient(180deg, var(--gold-400), var(--gold-600));
	transform: scaleY(var(--progress, 0)); transform-origin: 50% 0;
	transition: transform 0.2s linear;
}

/* Above the rail, so each marker's opaque fill masks the line behind it. */
.process-step { position: relative; z-index: 1; padding-block: clamp(22px, 2.6vw, 34px); }
.process-step + .process-step { border-top: 1px solid var(--i-line); }
.process-step-dot {
	/* Centred on the rail: rail left 23px + 1px half-width = 24px; marker
	   left -62px + 24px half-width = 24px from the list's left edge. */
	position: absolute; left: -62px; top: clamp(22px, 2.6vw, 34px);
	display: grid; place-items: center;
	width: 48px; height: 48px;
	border-radius: 50%;
	background: var(--paper-300);
	border: 2px solid var(--i-line-strong);
	font-family: var(--f-mono);
	font-size: var(--fs-xs); font-weight: 600;
	color: var(--i-low);
	transition: border-color var(--d-mid) var(--e-out),
	            background-color var(--d-mid) var(--e-out),
	            color var(--d-mid) var(--e-out);
}
.process-step.is-active .process-step-dot {
	background: var(--gold-500); border-color: var(--gold-500); color: var(--ink-950);
}
.process-step h3 { margin-bottom: 10px; }
.process-step p { font-size: var(--fs-sm); margin: 0; max-width: 56ch; }

@media (max-width: 900px) {
	.process-layout { grid-template-columns: 1fr; }
	.process-intro { position: static; }
	.process-steps { padding-left: 54px; }
	.process-steps::before, .process-steps::after { left: 19px; }
	.process-step-dot { left: -54px; width: 40px; height: 40px; }
}

/* ==========================================================================
   Feature bento — why choose us
   --------------------------------------------------------------------------
   A 3-column bento. The lead card takes a 2x2 cell, so the six authored
   cards tile the 3x3 grid exactly with no gaps. Every card carries a
   cursor-tracked spotlight (--mx/--my, written by modules/interactions.js)
   and pushes its copy to the bottom of the cell, which is what stops a grid
   of short paragraphs reading as a row of identical boxes.
   ========================================================================== */
.features { background: var(--paper-200); }

.features-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: minmax(232px, auto);
	gap: clamp(14px, 1.4vw, 20px);
}

.feature {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	padding: clamp(26px, 2.6vw, 38px);
	background: var(--paper-100);
	border: 1px solid var(--i-line);
	border-radius: var(--r-lg);
	overflow: hidden;
	transition: transform 0.55s var(--e-out),
	            box-shadow 0.55s var(--e-out),
	            border-color 0.55s var(--e-out);
}
.feature:hover {
	transform: translateY(-6px);
	box-shadow: var(--sh-lg);
	border-color: var(--gold-line);
}

/* Spotlight that follows the cursor across the card. Falls back to a plain
   top-left wash when no pointer coordinates have been written. */
.feature::after {
	content: "";
	position: absolute; inset: 0; z-index: -1;
	pointer-events: none;
	background: radial-gradient(
		440px circle at var(--mx, 30%) var(--my, 0%),
		var(--gold-soft), transparent 72%
	);
	opacity: 0;
	transition: opacity 0.5s var(--e-out);
}
.feature:hover::after { opacity: 1; }

.feature .icon-badge {
	margin-bottom: 28px;
	transition: background-color 0.45s var(--e-out),
	            color 0.45s var(--e-out),
	            border-color 0.45s var(--e-out),
	            transform 0.45s var(--e-spring);
}
.feature:hover .icon-badge {
	background: var(--gold-500);
	border-color: var(--gold-500);
	color: var(--ink-950);
	transform: translateY(-2px) rotate(-6deg);
}

/* Copy sits at the foot of the cell; the icon stays pinned to the top. */
.feature-body { margin-top: auto; }
.feature h3 { font-size: var(--fs-h4); margin-bottom: 10px; }
.feature p { font-size: var(--fs-sm); margin: 0; max-width: 42ch; }

/* ---- Lead card ---------------------------------------------------------- */
.feature--dark {
	grid-column: span 2;
	grid-row: span 2;
	background: var(--ink-950);
	border-color: rgba(255, 255, 255, 0.10);
	color: var(--t-mid);
}
.feature--dark:hover { border-color: rgba(242, 183, 5, 0.42); }
.feature--dark h3 {
	color: var(--t-hi);
	font-size: clamp(1.55rem, 2.5vw, 2.15rem);
	letter-spacing: -0.035em;
	margin-bottom: 16px;
	max-width: 16ch;
}
.feature--dark p { color: var(--t-mid); font-size: var(--fs-body); max-width: 46ch; }
.feature--dark .eyebrow { color: var(--gold-400); margin-bottom: 0; }

/* Ambient light in the corners, under everything. */
.feature--dark::before {
	content: "";
	position: absolute; inset: 0; z-index: -2;
	pointer-events: none;
	background:
		radial-gradient(85% 65% at 12% 0%, rgba(242, 183, 5, 0.18), transparent 62%),
		radial-gradient(70% 60% at 100% 100%, rgba(74, 168, 255, 0.10), transparent 66%);
}
.feature--dark::after {
	background: radial-gradient(
		520px circle at var(--mx, 25%) var(--my, 0%),
		rgba(242, 183, 5, 0.16), transparent 70%
	);
}

.feature--dark .icon-badge {
	width: 60px; height: 60px;
	background: rgba(242, 183, 5, 0.14);
	border-color: rgba(242, 183, 5, 0.32);
	color: var(--gold-400);
}
.feature--dark .icon-badge .icon { width: 27px; height: 27px; }

/* Oversized ghost of the card's own icon, anchored to the bottom corner. */
.feature-watermark {
	position: absolute;
	right: -7%; bottom: -14%;
	z-index: -1;
	width: min(54%, 340px); height: auto;
	color: rgba(242, 183, 5, 0.09);
	stroke-width: 0.8;
	pointer-events: none;
	transition: transform 0.9s var(--e-out), color 0.9s var(--e-out);
}
.feature--dark:hover .feature-watermark {
	transform: translate(-6px, -8px) rotate(-4deg);
	color: rgba(242, 183, 5, 0.14);
}

.feature-link { margin-top: 26px; align-self: flex-start; color: var(--t-hi); }

/* Top row of the lead card: eyebrow beside the icon. */
.feature-head { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }
.feature-head .icon-badge { margin-bottom: 0; }

@media (max-width: 1000px) {
	.features-grid { grid-template-columns: repeat(2, 1fr); }
	.feature--dark { grid-column: span 2; grid-row: span 1; min-height: 300px; }
	.feature-watermark { width: min(34%, 240px); }
}
@media (max-width: 620px) {
	.features-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
	.feature--dark { grid-column: span 1; }
	.feature { min-height: 0; }
	.feature .icon-badge { margin-bottom: 20px; }
	.feature-watermark { width: 42%; right: -10%; }
}

/* ==========================================================================
   Locations showcase — hover-previewed list
   ========================================================================== */
.locations-showcase { background: var(--ink-950); overflow: hidden; }
.locations-layout {
	display: grid;
	grid-template-columns: 1.25fr 0.75fr;
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}

.location-row {
	position: relative;
	display: grid;
	grid-template-columns: 44px 1fr auto;
	align-items: center;
	gap: 20px;
	padding: clamp(22px, 2.4vw, 32px) 4px;
	border-top: 1px solid rgba(255, 255, 255, 0.10);
	transition: padding-left var(--d-mid) var(--e-out);
}
.location-list .location-row:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.10); }
.location-row:hover { padding-left: 16px; }
.location-row::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
	background: var(--gold-500);
	transform: scaleX(0); transform-origin: 0 50%;
	transition: transform 0.55s var(--e-out);
}
.location-row:hover::after { transform: scaleX(1); }

.location-row-index {
	font-family: var(--f-mono);
	font-size: 0.6875rem; letter-spacing: 0.14em;
	color: var(--t-low);
}
.location-row-name {
	display: block;
	font-family: var(--f-display);
	font-size: clamp(1.15rem, 2vw, 1.6rem);
	font-weight: 500; letter-spacing: -0.03em;
	color: var(--t-hi);
	margin-bottom: 4px;
}
.location-row-address { display: block; font-size: var(--fs-xs); color: var(--t-low); }
.location-row-go {
	display: grid; place-items: center;
	width: 42px; height: 42px; border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.16);
	color: var(--t-mid);
	transition: background-color var(--d-fast) var(--e-out),
	            color var(--d-fast) var(--e-out),
	            border-color var(--d-fast) var(--e-out);
}
.location-row:hover .location-row-go {
	background: var(--gold-500); border-color: var(--gold-500); color: var(--ink-950);
}
.location-row-go .icon { width: 17px; height: 17px; }
/* The whole row is clickable; the visible circle is just the affordance. */
.location-row-link { position: absolute; inset: 0; }

/* Preview panel that swaps image as rows are hovered */
.location-preview {
	position: relative;
	border-radius: var(--r-xl);
	overflow: hidden;
	aspect-ratio: 3 / 4;
	background: var(--ink-850);
	border: 1px solid rgba(255, 255, 255, 0.10);
}
.location-preview img {
	position: absolute; inset: 0;
	width: 100%; height: 100%; object-fit: cover;
	opacity: 0;
	transform: scale(1.06);
	transition: opacity 0.6s var(--e-out), transform 1.2s var(--e-out);
}
.location-preview img.is-active { opacity: 1; transform: scale(1); }
.location-preview::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, transparent 40%, rgba(7, 7, 10, 0.75));
	pointer-events: none;
}
.location-preview-caption {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
	padding: 28px;
	font-family: var(--f-display);
	font-size: 1.25rem; font-weight: 500; letter-spacing: -0.03em;
	color: var(--t-hi);
}

@media (max-width: 900px) {
	.locations-layout { grid-template-columns: 1fr; }
	.location-preview { display: none; }
}
@media (max-width: 520px) {
	.location-row { grid-template-columns: 1fr auto; gap: 14px; }
	.location-row-index { display: none; }
}

/* ==========================================================================
   Location cards — Locations page
   ========================================================================== */
.locations-grid {
	display: grid;
	/* min() so the track can shrink below its ideal width on very narrow
	   phones instead of forcing the page to scroll sideways. */
	grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
	gap: clamp(20px, 2.4vw, 30px);
}
.location-card { display: flex; flex-direction: column; }
.location-card-map { position: relative; aspect-ratio: 16 / 10; background: var(--paper-400); }
.location-card-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; filter: grayscale(1) contrast(1.05); transition: filter var(--d-mid) var(--e-out); }
.location-card:hover .location-card-map iframe { filter: grayscale(0); }
.location-card-map-empty { display: grid; place-items: center; color: var(--i-low); font-size: var(--fs-sm); }
.location-card-body { padding: clamp(24px, 2.6vw, 32px); display: flex; flex-direction: column; gap: 14px; flex: 1; }
.location-card-body h3 { margin: 0; }
.location-address { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-sm); margin: 0; }
.location-address .icon { width: 17px; height: 17px; margin-top: 3px; color: var(--gold-600); flex: none; }
.location-card-body .btn { margin-top: auto; align-self: flex-start; }

/* ==========================================================================
   Packages — enroll pages
   ========================================================================== */
.packages-layout {
	display: grid;
	grid-template-columns: 0.8fr 1.2fr;
	gap: clamp(36px, 5vw, 80px);
	align-items: start;
}
.packages-aside { position: sticky; top: calc(var(--header-h) + 48px); }
.packages-aside .card { padding: clamp(24px, 2.6vw, 34px); }
.packages-aside h3 { font-size: var(--fs-h4); }
.packages-aside .location-address { margin-bottom: 18px; }

.accordion { display: grid; gap: 12px; }
.accordion-item {
	background: var(--paper-100);
	border: 1px solid var(--i-line);
	border-radius: var(--r-md);
	overflow: hidden;
	transition: border-color var(--d-mid) var(--e-out), box-shadow var(--d-mid) var(--e-out);
}
.accordion-item.is-open { border-color: var(--gold-line); box-shadow: var(--sh-md); }
.accordion-item.is-hidden { display: none; }
.accordion-trigger {
	display: flex; align-items: center; gap: 18px;
	width: 100%;
	padding: clamp(18px, 2vw, 26px) clamp(20px, 2.2vw, 30px);
	text-align: left;
}
.accordion-title {
	flex: 1;
	font-family: var(--f-display);
	font-size: var(--fs-h4); font-weight: 500; letter-spacing: -0.025em;
	color: var(--i-hi);
	line-height: 1.3;
}
.accordion-trigger .price-tag { font-size: 1.15rem; color: var(--gold-600); }
.accordion-icon {
	position: relative; flex: none;
	width: 34px; height: 34px; border-radius: 50%;
	border: 1px solid var(--i-line-strong);
	transition: background-color var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out);
}
.accordion-icon::before, .accordion-icon::after {
	content: ""; position: absolute; top: 50%; left: 50%;
	background: currentColor; border-radius: 2px;
	transform: translate(-50%, -50%);
	transition: transform var(--d-mid) var(--e-out), opacity var(--d-mid) var(--e-out);
}
.accordion-icon::before { width: 13px; height: 1.5px; }
.accordion-icon::after { width: 1.5px; height: 13px; }
.accordion-item.is-open .accordion-icon { background: var(--gold-500); border-color: var(--gold-500); color: var(--ink-950); }
.accordion-item.is-open .accordion-icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

.accordion-panel { max-height: 0; overflow: hidden; transition: max-height 0.55s var(--e-out); }
.accordion-panel-inner {
	padding: 0 clamp(20px, 2.2vw, 30px) clamp(22px, 2.4vw, 30px);
	border-top: 1px solid var(--i-line);
	padding-top: 22px;
	font-size: var(--fs-sm);
}
.accordion-panel-inner .btn { margin-top: 20px; }

.enroll-note {
	margin-top: 32px; padding: clamp(22px, 2.4vw, 30px);
	background: var(--gold-soft);
	border: 1px solid var(--gold-line);
	border-radius: var(--r-md);
	font-size: var(--fs-sm);
}
.enroll-note p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
	.packages-layout { grid-template-columns: 1fr; }
	.packages-aside { position: static; }
}

/* ==========================================================================
   Testimonials
   ========================================================================== */
.testimonials { background: var(--ink-950); overflow: hidden; }
.testimonials-rail {
	display: flex; gap: clamp(14px, 1.6vw, 22px);
	width: max-content;
	animation: marquee-run 56s linear infinite;
}
.testimonials-viewport {
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.testimonials-viewport:hover .testimonials-rail { animation-play-state: paused; }
.testimonial-card {
	flex: none;
	width: min(400px, 82vw);
	margin: 0;
	padding: clamp(28px, 3vw, 38px);
	background: var(--ink-850);
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: var(--r-lg);
	display: flex; flex-direction: column; gap: 20px;
}
.testimonial-card .icon-quote { width: 28px; height: 28px; color: var(--gold-500); opacity: 0.85; }
.testimonial-card p { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.78); margin: 0; flex: 1; }
.testimonial-stars { display: flex; gap: 3px; color: var(--gold-500); }
.testimonial-stars .icon { width: 15px; height: 15px; }
.testimonial-card cite {
	font-style: normal; font-weight: 600; font-size: var(--fs-sm);
	color: var(--t-hi);
}
@media (prefers-reduced-motion: reduce) {
	.testimonials-rail { animation: none; flex-wrap: wrap; width: 100%; justify-content: center; }
	.testimonials-viewport { -webkit-mask-image: none; mask-image: none; }
}

/* The Elfsight reviews widget ships its own light theme — dark text on light
   chrome — and exposes no dark variant we can set from the page. Overriding
   its internal classes would break on its next release, so instead it gets a
   light card of its own to sit in. The token resets undo .on-dark for the
   widget's subtree, since anything it leaves to inherit would otherwise come
   out white on white. */
.elfsight-widget-wrap {
	margin-top: clamp(32px, 4vw, 56px);
	padding: clamp(16px, 2.4vw, 32px);
	/* Pure white, not paper: the widget's own review cards are light grey and
	   need something brighter behind them to read as cards at all. */
	background: var(--paper-100);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-lg);

	--i-hi: #0b0b10;
	--i-mid: #55555f;
	--i-low: #86868f;
	color: #55555f;
}

/* Equal-height review cards. The widget runs Swiper in auto-height mode,
   which top-aligns the slides, so each card is only as tall as its own text.
   Stretching the row and every wrapper down to the card makes them all match
   the tallest visible review, and the "Posted on" footer is pushed to the
   bottom so it lines up across cards. Only the widget's stable `es-*` class
   names are used — the hashed ones change whenever Elfsight redeploys. */
/* Swiper writes the row height inline from the measured slide heights; with
   stretched slides that measurement is circular and settles at 0, so the row
   is left to size itself from its content instead. */
.elfsight-widget-wrap .es-carousel-swiper-wrapper .swiper-wrapper { align-items: stretch !important; height: auto !important; }
.elfsight-widget-wrap .es-carousel-swiper-wrapper .swiper-slide { height: auto !important; display: flex; }
.elfsight-widget-wrap .es-carousel-item { display: flex; flex-direction: column; width: 100%; }
.elfsight-widget-wrap .es-carousel-item > .es-review-container,
.elfsight-widget-wrap .es-review-container > .es-review-background-container { flex: 1 1 auto; }
.elfsight-widget-wrap .es-review-background-container > .es-review-align-container { flex: 1 1 auto; }
.elfsight-widget-wrap .es-review-layout-classic-source { margin-top: auto; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-layout {
	display: grid;
	grid-template-columns: 0.72fr 1.28fr;
	gap: clamp(36px, 5vw, 80px);
	align-items: start;
}
.faq-aside { position: sticky; top: calc(var(--header-h) + 48px); }

.faq-search { position: relative; margin-bottom: 28px; }
.faq-search .icon {
	position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
	width: 18px; height: 18px; color: var(--i-low); pointer-events: none;
}
.faq-search input {
	width: 100%;
	padding: 15px 18px 15px 48px;
	background: var(--paper-100);
	border: 1px solid var(--i-line-strong);
	border-radius: var(--r-pill);
	font-size: var(--fs-sm);
	transition: border-color var(--d-fast) var(--e-out), box-shadow var(--d-fast) var(--e-out);
}
.faq-search input:focus { outline: none; border-color: var(--gold-500); box-shadow: 0 0 0 4px var(--gold-soft); }

.faq-category-nav { display: grid; gap: 2px; }
.faq-category-nav a {
	display: block; padding: 11px 16px;
	border-radius: var(--r-xs);
	font-size: var(--fs-sm); color: var(--i-mid);
	transition: background-color var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out);
}
.faq-category-nav a:hover { background: var(--paper-300); color: var(--i-hi); }
.faq-category-nav a.is-active { background: var(--ink-950); color: var(--t-hi); }

.faq-category-group + .faq-category-group { margin-top: clamp(40px, 5vw, 64px); }
.faq-category-title { font-size: var(--fs-h3); margin-bottom: 22px; }
.faq-no-results { display: none; }

.faq-help {
	margin-top: 32px; padding: clamp(22px, 2.4vw, 30px);
	background: var(--ink-950); color: var(--t-mid);
	border-radius: var(--r-md);
}
.faq-help h3 { color: var(--t-hi); font-size: var(--fs-h4); }
.faq-help p { font-size: var(--fs-sm); margin-bottom: 20px; }

@media (max-width: 900px) {
	.faq-layout { grid-template-columns: 1fr; }
	.faq-aside { position: static; }
	.faq-category-nav { display: none; }
}

/* ==========================================================================
   Parallax CTA banner
   ========================================================================== */
.cta-banner {
	position: relative;
	min-height: clamp(460px, 62vh, 680px);
	display: grid; place-items: center;
	text-align: center;
	overflow: hidden;
	isolation: isolate;
	background: var(--ink-950);
}
.cta-banner-media { position: absolute; inset: -12% 0; z-index: -2; will-change: transform; }
.cta-banner-media img { width: 100%; height: 100%; object-fit: cover; }
.cta-banner::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background:
		linear-gradient(180deg, rgba(7, 7, 10, 0.78), rgba(7, 7, 10, 0.86)),
		radial-gradient(90% 70% at 50% 100%, rgba(242, 183, 5, 0.22), transparent 62%);
}
.cta-banner h2 { font-size: var(--fs-h1); color: var(--t-hi); max-width: 18ch; margin-inline: auto; }
.cta-banner-sub {
	font-family: var(--f-display);
	font-size: var(--fs-h3); font-weight: 400; letter-spacing: -0.03em;
	color: var(--gold-400);
	margin-bottom: 18px;
}
.cta-banner p { color: var(--t-mid); font-size: var(--fs-lead); max-width: 48ch; margin-inline: auto; }
.cta-banner-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 36px; }

/* ==========================================================================
   Contact page
   ========================================================================== */
.contact-layout {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: clamp(36px, 5vw, 80px);
	align-items: start;
}
.contact-cards { display: grid; gap: 14px; }
.contact-card {
	display: flex; align-items: flex-start; gap: 18px;
	padding: clamp(22px, 2.4vw, 30px);
	background: var(--paper-100);
	border: 1px solid var(--i-line);
	border-radius: var(--r-md);
	transition: border-color var(--d-mid) var(--e-out), transform var(--d-mid) var(--e-out);
}
.contact-card:hover { border-color: var(--gold-line); transform: translateY(-3px); }
.contact-card h3 { font-size: var(--fs-xs); font-family: var(--f-body); font-weight: 600;
	letter-spacing: 0.14em; text-transform: uppercase; color: var(--i-low); margin-bottom: 8px; }
.contact-card p, .contact-card a { font-size: var(--fs-body); color: var(--i-hi); margin: 0; }
.contact-card a:hover { color: var(--gold-600); }

.contact-form-shell {
	padding: clamp(28px, 3.4vw, 48px);
	background: var(--paper-100);
	border: 1px solid var(--i-line);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-md);
}
.contact-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.contact-form-grid > .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .contact-form-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; } }

.contact-map { margin-top: clamp(40px, 5vw, 72px); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--i-line); }
.contact-map iframe { width: 100%; height: clamp(320px, 42vh, 460px); }

/* ==========================================================================
   Fleet strip — horizontal scroll rail
   ========================================================================== */
.fleet { background: var(--paper-300); overflow: hidden; }
.fleet-rail {
	display: flex; gap: clamp(14px, 1.6vw, 22px);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 14px;
	margin-inline: calc(var(--gutter) * -1);
	padding-inline: var(--gutter);
	scrollbar-width: thin;
}
.fleet-rail::-webkit-scrollbar { height: 5px; }
.fleet-rail::-webkit-scrollbar-track { background: var(--i-line); border-radius: var(--r-pill); }
.fleet-rail::-webkit-scrollbar-thumb { background: var(--i-line-strong); border-radius: var(--r-pill); }
.fleet-item {
	flex: none;
	width: min(340px, 78vw);
	scroll-snap-align: start;
	background: var(--paper-100);
	border: 1px solid var(--i-line);
	border-radius: var(--r-lg);
	overflow: hidden;
}
.fleet-item-media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-400); }
.fleet-item-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--e-out); }
.fleet-item:hover .fleet-item-media img { transform: scale(1.06); }
.fleet-item-body { padding: clamp(20px, 2.2vw, 28px); }
.fleet-item-body h3 { font-size: var(--fs-h4); margin-bottom: 8px; }
.fleet-item-body p { font-size: var(--fs-sm); margin: 0; }

/* ==========================================================================
   Article / default page body
   ========================================================================== */
.page-body { background: var(--paper-200); }
.page-body .entry-content { font-size: var(--fs-lead); }

/* ==========================================================================
   Mobile app showcase
   --------------------------------------------------------------------------
   Two halves on one ink ground: the pitch beside a fan of three phones, then
   a tour card where each step swaps the phone's screen and spotlights the
   part of it being described. The phones are drawn in CSS around the raw
   screenshots, so a new capture only needs cropping to the screen.
   ========================================================================== */
.app-showcase {
	background: var(--ink-950);
	overflow: hidden;
	isolation: isolate;
}

/* The gold-to-black wash of the app's own store artwork, plus a faint grid
   that fades out from behind the phones. */
.app-ambient {
	position: absolute; inset: 0; z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(55% 48% at 76% 26%, rgba(242, 183, 5, 0.20), transparent 68%),
		radial-gradient(40% 36% at 8% 88%, rgba(74, 168, 255, 0.07), transparent 70%);
}
.app-ambient::after {
	content: "";
	position: absolute; inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
	background-size: 64px 64px;
	-webkit-mask-image: radial-gradient(50% 42% at 74% 30%, #000, transparent 75%);
	mask-image: radial-gradient(50% 42% at 74% 30%, #000, transparent 75%);
}

/* ---- Pitch -------------------------------------------------------------- */
.app-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
	gap: clamp(40px, 5vw, 72px);
	align-items: center;
	margin-bottom: clamp(72px, 9vw, 136px);
}
.app-copy h2 { max-width: 13ch; }
.app-lead { font-size: var(--fs-lead); max-width: 46ch; margin-bottom: 0; }

.app-highlights { display: grid; gap: 14px; margin: clamp(28px, 3vw, 36px) 0 clamp(32px, 3.4vw, 42px); }
.app-highlights li { display: flex; align-items: flex-start; gap: 14px; color: var(--t-hi); font-weight: 500; line-height: 1.5; }
.app-tick {
	display: grid; place-items: center; flex: none;
	width: 26px; height: 26px; margin-top: -1px;
	border-radius: 50%;
	background: var(--gold-soft);
	border: 1px solid var(--gold-line);
	color: var(--gold-400);
}
.app-tick .icon { width: 13px; height: 13px; stroke-width: 3; }

.app-stores { display: flex; flex-wrap: wrap; gap: 12px; }
.store-badge {
	display: inline-flex; align-items: center; gap: 12px;
	padding: 11px 24px 11px 18px;
	border-radius: 14px;
	background: #000;
	border: 1px solid var(--t-line-strong);
	color: var(--t-hi);
	transition: transform var(--d-fast) var(--e-out),
	            border-color var(--d-fast) var(--e-out),
	            box-shadow var(--d-fast) var(--e-out);
}
a.store-badge:hover {
	transform: translateY(-2px);
	border-color: var(--gold-500);
	box-shadow: 0 14px 34px -16px rgba(242, 183, 5, 0.6);
}
.store-badge-icon { width: 26px; height: 26px; flex: none; }
.store-badge-text { display: grid; line-height: 1.15; }
.store-badge-text small { font-size: 0.6875rem; letter-spacing: 0.02em; color: var(--t-mid); }
.store-badge-text strong { font-family: var(--f-display); font-size: 1.125rem; font-weight: 600; letter-spacing: -0.02em; }

/* ---- Device ------------------------------------------------------------- */
/* Every measurement is a fraction of --dw, the outer width, so one variable
   scales the whole handset. The screen radius is deliberately larger than
   the rounded corners baked into the screenshots so their corners clip. */
.device {
	--dw: 280px;
	position: relative;
	width: var(--dw);
	padding: calc(var(--dw) * 0.03);
	border: calc(var(--dw) * 0.011) solid transparent;
	border-radius: calc(var(--dw) * 0.165);
	background:
		linear-gradient(#060608, #060608) padding-box,
		linear-gradient(140deg, #9a9aa6 0%, #2c2c35 26%, #6a6a76 52%, #1b1b22 76%, #80808c 100%) border-box;
	box-shadow:
		0 calc(var(--dw) * 0.18) calc(var(--dw) * 0.3) calc(var(--dw) * -0.1) rgba(0, 0, 0, 0.75),
		0 calc(var(--dw) * 0.08) calc(var(--dw) * 0.22) calc(var(--dw) * -0.1) rgba(242, 183, 5, 0.22);
}
/* Side keys: power on the right, a pair of volume keys on the left. */
.device::before,
.device::after {
	content: "";
	position: absolute;
	width: calc(var(--dw) * 0.012);
	background: linear-gradient(90deg, #4a4a55, #8a8a96);
}
.device::before {
	right: calc(var(--dw) * -0.022);
	top: 27%; height: 11%;
	border-radius: 0 3px 3px 0;
}
.device::after {
	left: calc(var(--dw) * -0.022);
	top: 21%; height: 6.5%;
	border-radius: 3px 0 0 3px;
	box-shadow: 0 calc(var(--dw) * 0.2) 0 #6a6a76;
}

.device-screen {
	position: relative;
	aspect-ratio: 640 / 1389;
	border-radius: calc(var(--dw) * 0.125);
	overflow: hidden;
	background: #fff;
	isolation: isolate;
	transform: translateZ(0); /* keeps the radius clipping in Safari */
}
.device-screen img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
}
/* A sliver of glass glare across the top-left. */
.device-screen::after {
	content: "";
	position: absolute; inset: 0; z-index: 5;
	pointer-events: none;
	background: linear-gradient(118deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 26%, transparent 42%);
}

/* ---- Fanned stage ------------------------------------------------------- */
/* --fan runs 0 → 1 as the stage scrolls in (modules/app-showcase.js); it
   defaults to 1 so the finished fan is what shows without JavaScript. */
.app-stage {
	--fan: 1;
	position: relative;
	perspective: 1800px;
}
.app-stage::before {
	content: "";
	position: absolute;
	left: 50%; top: 50%;
	width: 88%; aspect-ratio: 1;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background:
		radial-gradient(closest-side, rgba(242, 183, 5, 0.26), transparent 70%),
		radial-gradient(closest-side, transparent 88%, rgba(242, 183, 5, 0.14) 88.4%, transparent 89%),
		radial-gradient(closest-side, transparent 62%, rgba(255, 255, 255, 0.07) 62.4%, transparent 63%);
	pointer-events: none;
}
.app-stage-tilt {
	position: relative;
	display: grid; place-items: center;
	padding-block: clamp(28px, 4vw, 56px);
	transform-style: preserve-3d;
	transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
	transition: transform 0.9s var(--e-out);
}

.device--main { --dw: clamp(220px, 20vw, 290px); z-index: 3; }
.device--side {
	--dw: clamp(184px, 16.5vw, 240px);
	position: absolute;
	left: 50%; top: 50%;
	z-index: 1;
	filter: brightness(calc(1 - var(--fan) * 0.22)) saturate(0.92);
}
.device--left {
	transform:
		translate(-50%, -50%)
		translate(calc(var(--fan) * -66%), calc(var(--fan) * 7%))
		rotate(calc(var(--fan) * -9deg));
}
.device--right {
	transform:
		translate(-50%, -50%)
		translate(calc(var(--fan) * 66%), calc(var(--fan) * 7%))
		rotate(calc(var(--fan) * 9deg));
}

/* Floating glass chips. They sit forward in Z, so the pointer tilt moves
   them against the phones for a little depth. */
.app-chip {
	position: absolute; z-index: 4;
	display: flex; align-items: center; gap: 12px;
	padding: 11px 18px 11px 11px;
	border-radius: 18px;
	background: rgba(22, 22, 31, 0.72);
	-webkit-backdrop-filter: blur(16px) saturate(1.4);
	backdrop-filter: blur(16px) saturate(1.4);
	border: 1px solid rgba(255, 255, 255, 0.12);
	box-shadow: 0 22px 44px -18px rgba(0, 0, 0, 0.7);
	white-space: nowrap;
	opacity: clamp(0, calc((var(--fan) - 0.55) * 2.4), 1);
	transform: translateZ(70px);
}
.app-chip > span:last-child { display: grid; line-height: 1.25; }
.app-chip strong { font-family: var(--f-display); font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.02em; color: var(--t-hi); }
.app-chip small { font-size: 0.75rem; color: var(--t-low); }
.app-chip--hours  { top: 31%; left: -3%; animation: app-float 6.5s ease-in-out infinite; }
.app-chip--live   { top: 45%; right: -2%; animation: app-float 7s ease-in-out -2.4s infinite; }
.app-chip--booked { bottom: 11%; left: 5%; animation: app-float 6s ease-in-out -4.1s infinite; }
@keyframes app-float {
	0%, 100% { translate: 0 0; }
	50%      { translate: 0 -10px; }
}

.app-ring { width: 40px; height: 40px; transform: rotate(-90deg); }
.app-ring circle { fill: none; stroke-width: 5; stroke: rgba(255, 255, 255, 0.12); }
.app-ring circle + circle { stroke: var(--gold-500); stroke-linecap: round; }

.app-live-dot {
	position: relative;
	width: 40px; height: 40px; flex: none;
	border-radius: 50%;
	background: rgba(255, 90, 31, 0.14);
}
.app-live-dot::before,
.app-live-dot::after {
	content: "";
	position: absolute; inset: 14px;
	border-radius: 50%;
	background: #ff5a1f;
}
.app-live-dot::after { animation: app-ping 1.8s var(--e-out) infinite; }
@keyframes app-ping {
	from { transform: scale(1); opacity: 0.7; }
	to   { transform: scale(3.2); opacity: 0; }
}

.app-chip-icon {
	display: grid; place-items: center; flex: none;
	width: 40px; height: 40px;
	border-radius: 12px;
	background: var(--gold-500);
	color: var(--ink-950);
}
.app-chip-icon .icon { width: 19px; height: 19px; }

/* ---- Tour --------------------------------------------------------------- */
.app-tour {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(36px, 5vw, 88px);
	align-items: center;
	padding: clamp(28px, 4.4vw, 72px);
	border-radius: var(--r-xl);
	background:
		radial-gradient(70% 90% at 0% 50%, rgba(242, 183, 5, 0.09), transparent 70%),
		linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012));
	border: 1px solid var(--t-line);
}

.app-tour-device { position: relative; display: grid; place-items: center; }
.app-tour-halo {
	position: absolute; left: 50%; top: 50%;
	width: 120%; aspect-ratio: 1;
	transform: translate(-50%, -50%);
	background: radial-gradient(closest-side, rgba(242, 183, 5, 0.22), transparent 72%);
	pointer-events: none;
}
.device--tour { --dw: clamp(240px, 22vw, 310px); }

.tour-shot {
	opacity: 0;
	transform: scale(1.035);
	transition: opacity 0.6s var(--e-out), transform 1.1s var(--e-out);
}
.tour-shot.is-active { opacity: 1; transform: none; }
/* Splash sits over everything until the tour first scrolls into view. */
.tour-shot--splash { z-index: 3; transition-duration: 0.8s; }
.app-tour.is-booting .tour-shot--splash { opacity: 1; transform: none; }

/* The spotlight: a gold ring around the feature, with the rest of the screen
   dimmed by an oversized spread shadow. Its rectangle comes from --sx/--sy/
   --sw/--sh on the screen, so a change of step glides it to the new spot. */
.tour-spot {
	position: absolute; z-index: 2;
	left: var(--sx); top: var(--sy);
	width: var(--sw); height: var(--sh);
	border-radius: calc(var(--dw) * 0.045);
	box-shadow:
		0 0 0 2px var(--gold-500),
		0 0 0 8px rgba(242, 183, 5, 0.2),
		0 0 0 200vmax rgba(7, 7, 10, 0.34);
	pointer-events: none;
	transition: left 0.75s var(--e-out), top 0.75s var(--e-out),
	            width 0.75s var(--e-out), height 0.75s var(--e-out),
	            opacity 0.5s var(--e-out);
}
.tour-spot::after {
	content: "";
	position: absolute; inset: -2px;
	border-radius: inherit;
	border: 2px solid var(--gold-400);
	animation: app-spot-pulse 2.2s var(--e-out) infinite;
}
@keyframes app-spot-pulse {
	from { transform: scale(1); opacity: 0.9; }
	to   { transform: scale(1.08, 1.14); opacity: 0; }
}
.app-tour.is-booting .tour-spot { opacity: 0; }

.app-tour-head {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 18px 24px;
	margin-bottom: clamp(22px, 2.6vw, 32px);
}
.app-tour-head h3 { margin: 0; font-size: var(--fs-h3); }

/* Segmented audience switch with a sliding gold thumb. */
.app-audience {
	--i: 0;
	position: relative;
	display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
	padding: 5px;
	border-radius: var(--r-pill);
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--t-line);
}
.app-audience-tab {
	position: relative; z-index: 1;
	padding: 10px 18px;
	border-radius: var(--r-pill);
	font-size: var(--fs-xs); font-weight: 600;
	color: var(--t-mid);
	white-space: nowrap;
	transition: color var(--d-mid) var(--e-out);
}
.app-audience-tab:hover { color: var(--t-hi); }
.app-audience-tab.is-active { color: var(--ink-950); }
.app-audience-thumb {
	position: absolute; top: 5px; bottom: 5px; left: 5px;
	width: calc((100% - 10px) / 2);
	border-radius: var(--r-pill);
	background: var(--gold-500);
	box-shadow: 0 8px 22px -10px rgba(242, 183, 5, 0.8);
	transform: translateX(calc(var(--i) * 100%));
	transition: transform 0.55s var(--e-out);
}

.app-steps { display: grid; gap: 8px; align-content: start; }

/* Once scripted, both audiences' lists overlap in a single cell so the card
   is always as tall as the longer one and never jumps on a switch. */
.app-steps-stack { display: grid; }
.app-tour.is-ready .app-steps-stack > .app-steps {
	grid-area: 1 / 1;
	transition: opacity 0.45s var(--e-out), visibility 0.45s;
}
.app-tour.is-ready .app-steps:not(.is-current) { opacity: 0; visibility: hidden; }

.app-step {
	position: relative;
	display: grid; grid-template-columns: auto minmax(0, 1fr);
	gap: 18px;
	width: 100%;
	padding: 18px 22px 20px;
	border-radius: var(--r-md);
	border: 1px solid transparent;
	text-align: left;
	overflow: hidden;
	transition: background-color var(--d-mid) var(--e-out), border-color var(--d-mid) var(--e-out);
}
.app-step:hover { background: rgba(255, 255, 255, 0.03); }
.app-step.is-active { background: rgba(255, 255, 255, 0.055); border-color: var(--t-line-strong); }

.app-step-index {
	font-family: var(--f-display);
	font-size: var(--fs-xs); font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--t-low);
	padding-top: 4px;
	transition: color var(--d-mid) var(--e-out);
}
.app-step.is-active .app-step-index { color: var(--gold-400); }

.app-step-title {
	display: block;
	font-family: var(--f-display);
	font-size: var(--fs-h4); font-weight: 600;
	letter-spacing: -0.02em; line-height: 1.3;
	color: var(--t-mid);
	transition: color var(--d-mid) var(--e-out);
}
.app-step:hover .app-step-title,
.app-step.is-active .app-step-title { color: var(--t-hi); }

/* Descriptions fold away on inactive steps once the script is running;
   without it every description stays readable. */
.app-step-text {
	display: grid; grid-template-rows: 1fr;
	font-size: var(--fs-sm); color: var(--t-mid); line-height: 1.6;
	transition: grid-template-rows 0.55s var(--e-out), opacity 0.55s var(--e-out);
}
.app-step-text > span { overflow: hidden; min-height: 0; padding-top: 6px; }
/* Two lines are held open for the active description so a one-line step
   does not pull the list up under the cursor. */
.app-tour.is-ready .app-step.is-active .app-step-text > span { min-height: calc(3.2em + 6px); }
.app-tour.is-ready .app-step:not(.is-active) .app-step-text { grid-template-rows: 0fr; opacity: 0; }

/* Autoplay timer. The fill's animationend is what advances the tour, so
   pausing the animation pauses the tour with it. */
.app-step-progress {
	position: absolute; left: 22px; right: 22px; bottom: 0;
	height: 2px;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.08);
	opacity: 0;
	transition: opacity var(--d-mid) var(--e-out);
}
.app-step-progress::after {
	content: "";
	position: absolute; inset: 0;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--gold-600), var(--gold-400));
	transform: scaleX(0);
	transform-origin: left;
}
.app-step.is-playing .app-step-progress { opacity: 1; }
.app-step.is-playing .app-step-progress::after { animation: app-progress var(--tour-step, 6s) linear forwards; }
.app-tour.is-paused .app-step-progress::after { animation-play-state: paused; }
@keyframes app-progress { to { transform: scaleX(1); } }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 1100px) {
	.app-chip--live { right: -4%; }
}

@media (max-width: 960px) {
	.app-hero { grid-template-columns: 1fr; }
	.app-copy { text-align: center; }
	.app-copy h2, .app-lead { margin-inline: auto; }
	.app-copy .eyebrow { justify-content: center; }
	/* A left-aligned list, centred as a block, so the ticks line up. */
	.app-highlights { width: fit-content; max-width: 100%; margin-inline: auto; }
	.app-highlights li { text-align: left; max-width: 44ch; }
	.app-stores { justify-content: center; }

	.app-stage { max-width: 620px; width: 100%; margin-inline: auto; }
	.device--main { --dw: clamp(200px, 40vw, 280px); }
	.device--side { --dw: clamp(168px, 33vw, 230px); }

	.app-tour { grid-template-columns: 1fr; }
	.device--tour { --dw: clamp(220px, 52vw, 290px); }
	.app-tour-head { justify-content: center; text-align: center; }
}

/* Phones: the steps become a swipeable row of cards under the handset. */
@media (max-width: 640px) {
	.device--main { --dw: 56vw; }
	.device--side { --dw: 44vw; }
	.device--left  { transform: translate(-50%, -50%) translate(calc(var(--fan) * -52%), calc(var(--fan) * 7%)) rotate(calc(var(--fan) * -8deg)); }
	.device--right { transform: translate(-50%, -50%) translate(calc(var(--fan) * 52%), calc(var(--fan) * 7%)) rotate(calc(var(--fan) * 8deg)); }

	.app-chip { gap: 9px; padding: 8px 13px 8px 8px; border-radius: 14px; }
	.app-chip strong { font-size: 0.8125rem; }
	.app-chip small { font-size: 0.6875rem; }
	.app-ring, .app-live-dot, .app-chip-icon { width: 32px; height: 32px; }
	.app-live-dot::before, .app-live-dot::after { inset: 11px; }
	.app-chip-icon { border-radius: 10px; }
	.app-chip--hours  { top: 6%; left: 0; }
	.app-chip--live   { top: 42%; right: 0; }
	.app-chip--booked { bottom: 6%; left: 0; }

	.app-stores { gap: 10px; }
	.store-badge { gap: 9px; padding: 9px 16px 9px 12px; border-radius: 12px; }
	.store-badge-icon { width: 22px; height: 22px; }
	.store-badge-text small { font-size: 0.625rem; }
	.store-badge-text strong { font-size: 1rem; }

	.app-tour { padding: 24px 0 28px; border-radius: var(--r-lg); }
	.app-tour-head { padding-inline: 20px; }
	.app-audience { width: 100%; }
	.app-audience-tab { padding-inline: 10px; }
	.device--tour { --dw: 58vw; }

	.app-steps {
		display: flex; gap: 10px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 20px;
		padding-inline: 20px;
		scrollbar-width: none;
	}
	.app-steps::-webkit-scrollbar { display: none; }
	.app-steps > li { flex: 0 0 84%; scroll-snap-align: start; display: flex; }
	.app-step { border-color: var(--t-line); padding: 18px; gap: 14px; }
	.app-step-progress { left: 18px; right: 18px; }
	.app-tour.is-ready .app-step:not(.is-active) .app-step-text { grid-template-rows: 1fr; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.app-chip, .app-live-dot::after, .tour-spot::after { animation: none; }
	.app-stage-tilt { transform: none; }
}