/**
 * Blocks Master — home page motion layer.
 *
 * Loaded on the front page only. Every colour resolves through the brand
 * tokens printed by inc/brand.php, so the Customizer re-skins these sections
 * too, in both modes. Every animation below has a reduced-motion override at
 * the end of the file.
 */

/* ==========================================================================
   Header logo: a contrail passes behind it, on a loop

   Home page only — this stylesheet is loaded nowhere else, so the logo is
   perfectly still on every other page and throughout the portal, where
   people are reading fares and a moving header would be a nuisance.

   Drawn as a pseudo-element, so no markup changes and nothing to load. The
   pass takes 1.6s and then waits: a trail every five seconds reads as alive,
   where every three began to feel restless. isolation on the anchor keeps
   the negative z-index inside it, so the trail sits above the header's own
   background and behind the logo — which has transparency, so it shows
   through the gaps in the artwork the way a real one would.
   ========================================================================== */

.bmt-header .bmt-brand { position: relative; isolation: isolate; }

.bmt-header .bmt-brand::after {
	content: "";
	position: absolute;
	left: 0; top: 36%;
	width: 34%; height: 3px;
	border-radius: 3px;
	background: linear-gradient(90deg,
		rgba(var(--bmt-primary-rgb), 0) 0%,
		rgba(var(--bmt-primary-rgb), .85) 62%,
		var(--bmt-trail-tip) 100%);
	opacity: 0;
	z-index: -1;
	pointer-events: none;
	animation: bmt-brand-trail 5s cubic-bezier(.36, .1, .2, 1) .9s infinite;

	/* The leading edge is the hot end of the trail. On the dark canvas that
	   is white; on the white header it has to be the brand colour at full
	   strength instead, or the head of the trail vanishes into the page. */
	--bmt-trail-tip: rgba(255, 255, 255, .95);
}
:root[data-theme="light"] .bmt-header .bmt-brand::after { --bmt-trail-tip: rgb(var(--bmt-primary-rgb)); }

/* The pass occupies the first 32% of the cycle — 1.6s of a 5s loop. The
   return to the left happens across the remaining 68%, while the trail is
   fully transparent, so it is never seen travelling backwards. */
@keyframes bmt-brand-trail {
	0%    { opacity: 0; transform: rotate(-8deg) translate3d(-120%, 0, 0); }
	4.5%  { opacity: 1; }
	24.3% { opacity: 1; }
	32%   { opacity: 0; transform: rotate(-8deg) translate3d(320%, 0, 0); }
	100%  { opacity: 0; transform: rotate(-8deg) translate3d(-120%, 0, 0); }
}

/* ==========================================================================
   Hero: aurora, particle canvas, rotating eyebrow, live chips
   ========================================================================== */

.bmt-hero { isolation: isolate; }

.bmt-aurora { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.bmt-aurora span {
	position: absolute;
	width: 46vw; height: 46vw; max-width: 720px; max-height: 720px;
	border-radius: 50%;
	filter: blur(70px);
	opacity: .5;
	mix-blend-mode: screen;
	animation: bmt-aurora 22s var(--bmt-ease) infinite alternate;
}
.bmt-aurora span:nth-child(1) { background: radial-gradient(circle, rgba(var(--bmt-primary-rgb), .38), transparent 65%); top: -18%; left: -10%; }
.bmt-aurora span:nth-child(2) { background: radial-gradient(circle, rgba(var(--bmt-accent-rgb), .30), transparent 65%); top: 10%; right: -14%; animation-duration: 28s; animation-delay: -6s; }
.bmt-aurora span:nth-child(3) { background: radial-gradient(circle, rgba(var(--bmt-primary-rgb), .22), transparent 65%); bottom: -35%; left: 30%; animation-duration: 34s; animation-delay: -12s; }
:root[data-theme="light"] .bmt-aurora span { mix-blend-mode: multiply; opacity: .35; }
@keyframes bmt-aurora {
	0%   { transform: translate3d(0, 0, 0) scale(1); }
	50%  { transform: translate3d(6vw, 4vh, 0) scale(1.15); }
	100% { transform: translate3d(-4vw, 8vh, 0) scale(.92); }
}

.bmt-stars { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: .9; }

.bmt-rotator {
	position: relative;
	display: inline-grid;
	margin-left: 10px;
	padding-left: 12px;
	border-left: 1px solid var(--bmt-border-lit);
	color: var(--bmt-text);
	vertical-align: bottom;
}
.bmt-rotator-word {
	grid-area: 1 / 1;
	opacity: 0;
	transform: translateY(70%);
	transition: opacity .5s var(--bmt-ease-out), transform .5s var(--bmt-ease-out);
	white-space: nowrap;
}
.bmt-rotator-word.is-on { opacity: 1; transform: none; }
.bmt-rotator-word.is-out { opacity: 0; transform: translateY(-70%); }

.bmt-chip-4 { top: 36%; left: -8%; }
.bmt-chip-deal { color: var(--bmt-primary); }
.bmt-chip .is-bump { display: inline-block; animation: bmt-bump .6s var(--bmt-ease-out); }
@keyframes bmt-bump {
	0%   { transform: translateY(-40%); opacity: 0; color: var(--bmt-primary); }
	100% { transform: none; opacity: 1; }
}

/* ==========================================================================
   Departures board
   ========================================================================== */

.bmt-board-section { overflow: hidden; }

.bmt-board {
	position: relative;
	max-width: 1020px;
	margin: 0 auto;
	padding: 20px 22px 16px;
	border-radius: var(--bmt-r-lg);
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--bmt-surface-2) 92%, transparent), var(--bmt-surface));
	border: 1px solid var(--bmt-border);
	box-shadow: 0 40px 80px -48px var(--bmt-scrim), inset 0 1px 0 var(--bmt-border-lit);
	font-family: var(--bmt-mono);
}
.bmt-board::before {
	content: "";
	position: absolute; inset: 0;
	border-radius: inherit;
	background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(var(--bmt-canvas-rgb), .12) 3px 4px);
	pointer-events: none;
}

.bmt-board-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.bmt-board-title { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; font-size: 13px; color: var(--bmt-primary); }
.bmt-board-title svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.bmt-board-clock { font-size: 22px; font-weight: 700; color: var(--bmt-text); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.bmt-board-clock b { animation: bmt-blink 1s steps(1) infinite; font-weight: inherit; }
@keyframes bmt-blink { 50% { opacity: .15; } }

.bmt-board-head, .bmt-board-row {
	display: grid;
	grid-template-columns: 108px 118px 158px minmax(0, 1fr) 64px 140px;
	gap: 10px;
	align-items: center;
}
.bmt-board-head { padding: 0 8px 8px; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--bmt-muted); border-bottom: 1px solid var(--bmt-border); }
.bmt-board-rows { display: grid; gap: 6px; padding-top: 10px; }
.bmt-board-row { padding: 6px 8px; border-radius: 10px; transition: background-color .4s var(--bmt-ease); }
.bmt-board-row.is-new { background: color-mix(in srgb, var(--bmt-primary) 8%, transparent); }

.bmt-board-cell { display: flex; gap: 2px; min-width: 0; overflow: hidden; }
.bmt-flap {
	position: relative;
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 1.05em; height: 1.75em;
	padding: 0 1px;
	border-radius: 4px;
	background: var(--bmt-canvas);
	border: 1px solid var(--bmt-border);
	color: var(--bmt-text);
	font-size: 15px; font-weight: 700;
	line-height: 1;
	overflow: hidden;
}
.bmt-flap::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(var(--bmt-canvas-rgb), .7); }
.bmt-flap.is-flip { animation: bmt-flap .14s linear infinite; color: var(--bmt-primary); }
@keyframes bmt-flap {
	0%   { transform: scaleY(1); }
	50%  { transform: scaleY(.15); }
	100% { transform: scaleY(1); }
}
.bmt-board-time .bmt-flap { color: var(--bmt-primary); }
.bmt-board-via { gap: 0; }
.bmt-board-via .bmt-flap { background: transparent; border-color: transparent; min-width: .45em; padding: 0; font-weight: 600; font-size: 13px; color: var(--bmt-muted); }
.bmt-board-via .bmt-flap::after { display: none; }

.bmt-board-tag {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 5px 11px;
	border-radius: 999px;
	font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	border: 1px solid currentColor;
	white-space: nowrap;
}
.bmt-board-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.bmt-board-tag.is-open   { color: var(--bmt-primary); }
.bmt-board-tag.is-shared { color: rgb(var(--bmt-accent-rgb)); }
.bmt-board-tag.is-deal   { color: var(--bmt-primary); background: color-mix(in srgb, var(--bmt-primary) 14%, transparent); }
.bmt-board-tag.is-last   { color: var(--bmt-text); animation: bmt-pulse 1.4s var(--bmt-ease) infinite; }
.bmt-board-tag.is-sold   { color: var(--bmt-muted); opacity: .7; }
.bmt-board-tag.is-sold::before { box-shadow: none; }
@keyframes bmt-pulse { 50% { opacity: .45; } }

.bmt-board-note { margin: 14px 0 0; font-family: var(--bmt-font); font-size: 12.5px; color: var(--bmt-muted); text-align: center; }

/* ==========================================================================
   Product tour
   ========================================================================== */

.bmt-tour-shell {
	max-width: 1120px; margin: 0 auto;
	border-radius: var(--bmt-r-lg);
	border: 1px solid var(--bmt-border);
	background: color-mix(in srgb, var(--bmt-surface) 88%, transparent);
	box-shadow: 0 50px 90px -60px var(--bmt-scrim);
	overflow: hidden;
}
.bmt-tour-tabs { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--bmt-border); }
.bmt-tour-tab {
	position: relative;
	display: flex; align-items: center; gap: 12px;
	padding: 18px 20px 20px;
	background: none; border: 0; border-right: 1px solid var(--bmt-border);
	color: var(--bmt-muted);
	font: 600 15px/1.2 var(--bmt-font);
	text-align: left; cursor: pointer;
	transition: color .25s var(--bmt-ease), background-color .25s var(--bmt-ease);
}
.bmt-tour-tab:last-child { border-right: 0; }
.bmt-tour-tab:hover { color: var(--bmt-text); background: var(--bmt-surface-2); }
.bmt-tour-tab.is-on { color: var(--bmt-text); background: var(--bmt-surface-2); }
.bmt-tour-tab-no { font-family: var(--bmt-mono); font-size: 12px; color: var(--bmt-primary); opacity: .8; }
.bmt-tour-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: transparent; }
.bmt-tour-progress i { display: block; height: 100%; width: 0; background: var(--bmt-primary); box-shadow: 0 0 12px var(--bmt-glow); }
.bmt-tour-tab.is-on .bmt-tour-progress i { width: 100%; }
.bmt-tour-shell.is-playing .bmt-tour-tab.is-on .bmt-tour-progress i { width: 0; animation: bmt-progress var(--tour-ms, 7000ms) linear forwards; }
@keyframes bmt-progress { to { width: 100%; } }

.bmt-tour-panel {
	display: none;
	grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
	padding: clamp(24px, 4vw, 48px);
	min-height: 440px;
}
.bmt-tour-panel.is-on { display: grid; animation: bmt-panel-in .55s var(--bmt-ease-out); }
.no-js .bmt-tour-panel { display: grid; }
@keyframes bmt-panel-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.bmt-tour-copy h3 { font-size: clamp(1.35rem, 2.3vw, 1.8rem); }
.bmt-tour-copy p { color: var(--bmt-muted); margin: 0; }

.bmt-tour-stage { position: relative; }

/* --- shared demo chrome --- */

.bmt-demo {
	position: relative;
	padding: 18px;
	border-radius: var(--bmt-r);
	background: var(--bmt-bg);
	border: 1px solid var(--bmt-border);
	box-shadow: 0 30px 60px -40px var(--bmt-scrim);
	font-size: 14px;
}
.bmt-demo-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; font-size: 14px; }
.bmt-demo-leg { font-family: var(--bmt-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: var(--bmt-surface-2); color: var(--bmt-primary); }
.bmt-demo-date { color: var(--bmt-muted); }
.bmt-demo-days { margin-left: auto; font-size: 12px; color: var(--bmt-primary); }
.bmt-demo-deal {
	display: inline-block; padding: 2px 8px; border-radius: 999px;
	font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
	color: var(--bmt-primary); background: color-mix(in srgb, var(--bmt-primary) 14%, transparent);
	border: 1px solid color-mix(in srgb, var(--bmt-primary) 40%, transparent);
	animation: bmt-glowpulse 2.2s var(--bmt-ease) infinite;
}
@keyframes bmt-glowpulse { 50% { box-shadow: 0 0 14px -2px var(--bmt-glow); } }

/* --- demo: search --- */

.bmt-demo-sort { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; font-size: 12.5px; color: var(--bmt-muted); }
.bmt-demo-sort b { padding: 4px 11px; border-radius: 999px; border: 1px solid var(--bmt-border); color: var(--bmt-text); font-weight: 600; transition: all .3s var(--bmt-ease); }
.bmt-demo-sort b.is-on { background: var(--bmt-primary); border-color: var(--bmt-primary); color: var(--bmt-on-primary); box-shadow: 0 0 18px -4px var(--bmt-glow); }
.bmt-demo-results { display: grid; gap: 10px; }
.bmt-demo-card {
	display: flex; align-items: center; justify-content: space-between; gap: 14px;
	padding: 14px 16px;
	border-radius: 12px;
	background: var(--bmt-surface);
	border: 1px solid var(--bmt-border);
	transition: border-color .3s var(--bmt-ease);
	will-change: transform;
}
.bmt-demo-card:first-child { border-color: var(--bmt-border-lit); }
.bmt-demo-times { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.bmt-demo-t { display: flex; flex-direction: column; font-size: 24px; font-weight: 800; line-height: 1; color: var(--bmt-text); font-variant-numeric: tabular-nums; font-family: var(--bmt-display); }
.bmt-demo-t small { font: 700 11px var(--bmt-mono); letter-spacing: .08em; color: var(--bmt-muted); margin-top: 4px; }
.bmt-demo-t.is-arr { text-align: right; }
.bmt-demo-line { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 70px; }
.bmt-demo-line em { font: normal 700 11px var(--bmt-mono); color: var(--bmt-primary); letter-spacing: .06em; }
.bmt-demo-line i { width: 100%; height: 2px; background: linear-gradient(90deg, var(--bmt-border), var(--bmt-primary), var(--bmt-border)); background-size: 200% 100%; animation: bmt-shimmer 2.6s linear infinite; border-radius: 2px; }
.bmt-demo-line small { font-size: 11px; color: var(--bmt-muted); white-space: nowrap; }
.bmt-demo-line small.is-direct { color: var(--bmt-primary); }
@keyframes bmt-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.bmt-demo-price { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; min-width: 104px; }
.bmt-demo-price s { font-size: 11.5px; color: var(--bmt-muted); }
.bmt-demo-price strong { font-size: 18px; color: var(--bmt-primary); font-family: var(--bmt-display); }
.bmt-demo-btn { font-size: 11.5px; font-weight: 700; padding: 4px 12px; border-radius: 7px; background: var(--bmt-primary); color: var(--bmt-on-primary); }

/* --- demo: pricing --- */

.bmt-rule-calc { display: grid; gap: 8px; }
.bmt-rule-line {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 10px 14px;
	border-radius: 10px;
	background: var(--bmt-surface);
	border: 1px solid var(--bmt-border);
}
.bmt-rule-line span { display: flex; flex-direction: column; font-weight: 600; }
.bmt-rule-line small { font-weight: 400; font-size: 12px; color: var(--bmt-muted); }
.bmt-rule-line b { font-family: var(--bmt-mono); font-size: 15px; }
.bmt-rule-line b.is-neg { color: var(--bmt-primary); }
.bmt-rule-line b.is-pos { color: var(--bmt-text); }
.bmt-rule-line.is-base { background: transparent; border-style: dashed; }
.bmt-demo-pricing.is-run .bmt-rule-line:not(.is-base) { animation: bmt-rule-in .6s var(--bmt-ease-out) both; animation-delay: calc(var(--i) * .55s + .3s); }
@keyframes bmt-rule-in { from { opacity: 0; transform: translateX(26px) scale(.98); } to { opacity: 1; transform: none; } }
.bmt-rule-total {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	margin-top: 4px; padding: 14px 16px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--bmt-primary) 10%, var(--bmt-surface));
	border: 1px solid var(--bmt-border-lit);
	font-weight: 600;
}
.bmt-rule-total s { color: var(--bmt-muted); font-weight: 400; font-size: 13px; margin-right: 6px; }
.bmt-rule-total strong { font-size: 22px; color: var(--bmt-primary); font-family: var(--bmt-display); }
.bmt-demo-pricing.is-run .bmt-rule-total { animation: bmt-rule-in .6s var(--bmt-ease-out) both; animation-delay: 2.6s; }
.bmt-rule-floor { margin-top: 12px; font-size: 12.5px; color: var(--bmt-muted); display: flex; gap: 8px; align-items: flex-start; }
.bmt-rule-floor::before { content: "⛨"; color: var(--bmt-primary); }

/* --- demo: sharing --- */

.bmt-share-map { width: 100%; height: auto; display: block; color: var(--bmt-primary); overflow: visible; }
.bmt-share-flow { fill: none; stroke: var(--bmt-primary); stroke-width: 2; stroke-dasharray: 6 7; opacity: .75; animation: bmt-dash 1.2s linear infinite; }
.bmt-share-flow.is-2 { opacity: .55; }
.bmt-share-flow.is-off { stroke: var(--bmt-muted); opacity: .25; animation: none; }
@keyframes bmt-dash { to { stroke-dashoffset: -26; } }
.bmt-share-node rect { fill: var(--bmt-surface); stroke: var(--bmt-border-lit); stroke-width: 1.4; }
.bmt-share-node.is-owner rect { fill: color-mix(in srgb, var(--bmt-primary) 16%, var(--bmt-surface)); stroke: var(--bmt-primary); }
.bmt-share-node text { font: 700 15px var(--bmt-mono); fill: var(--bmt-text); text-anchor: middle; }
.bmt-share-node text.sub { font: 500 10.5px var(--bmt-font); fill: var(--bmt-muted); }
.bmt-share-node.is-sub text { font-size: 13px; }
.bmt-share-node.is-hidden { opacity: .35; }
.bmt-share-node.is-hidden rect { stroke-dasharray: 4 4; }
.bmt-share-lock { font: 700 14px var(--bmt-font); fill: var(--bmt-muted); text-anchor: middle; }
.bmt-share-seat {
	fill: var(--bmt-primary);
	filter: drop-shadow(0 0 6px var(--bmt-glow));
	offset-distance: 0%;
	animation: bmt-seat 2.4s var(--bmt-ease) infinite;
	animation-delay: var(--sd, 0s);
}
.bmt-share-seat.is-late { fill: rgb(var(--bmt-accent-rgb)); }
@keyframes bmt-seat { 0% { offset-distance: 0%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@supports not (offset-path: path('M0 0 L1 1')) { .bmt-share-seat { display: none; } }

.bmt-share-gauges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
.bmt-gauge {
	position: relative;
	display: grid; justify-items: center; gap: 4px;
	padding: 12px 8px;
	border-radius: 12px;
	background: var(--bmt-surface);
	border: 1px solid var(--bmt-border);
	text-align: center;
}
.bmt-gauge-ring {
	width: 54px; height: 54px; border-radius: 50%;
	background: conic-gradient(var(--bmt-primary) calc(var(--p, 0) * 1turn), var(--bmt-surface-2) 0);
	mask: radial-gradient(circle, transparent 57%, #000 59%);
	-webkit-mask: radial-gradient(circle, transparent 57%, #000 59%);
	transition: --p 1.4s var(--bmt-ease-out);
}
.bmt-demo-sharing.is-run .bmt-gauge-ring { --p: var(--v); }
@property --p { syntax: '<number>'; inherits: true; initial-value: 0; }
.bmt-gauge b { position: absolute; top: 29px; font: 700 13px var(--bmt-mono); color: var(--bmt-text); }
.bmt-gauge small { font-size: 11.5px; color: var(--bmt-muted); line-height: 1.3; }
.bmt-share-caption { margin: 10px 0 0; font-size: 12.5px; color: var(--bmt-muted); text-align: center; }

/* --- demo: e-ticket --- */

.bmt-eticket {
	position: relative;
	border-radius: 14px;
	background: var(--bmt-surface);
	border: 1px solid var(--bmt-border);
	overflow: hidden;
}
.bmt-eticket-head {
	display: flex; justify-content: space-between; align-items: center;
	padding: 14px 18px;
	background: linear-gradient(120deg, color-mix(in srgb, var(--bmt-primary) 55%, var(--bmt-canvas)), var(--bmt-canvas));
	color: var(--bmt-text);
}
.bmt-eticket-agency { display: flex; flex-direction: column; font-weight: 700; }
.bmt-eticket-agency small, .bmt-eticket-ref small { font: 600 10px var(--bmt-mono); letter-spacing: .12em; opacity: .8; text-transform: uppercase; }
.bmt-eticket-ref { display: flex; flex-direction: column; align-items: flex-end; font: 700 18px var(--bmt-mono); letter-spacing: .08em; }
.bmt-eticket-seg { display: flex; align-items: center; gap: 14px; padding: 18px; }
.bmt-eticket-end { display: flex; flex-direction: column; min-width: 90px; }
.bmt-eticket-end.is-arr { text-align: right; align-items: flex-end; }
.bmt-eticket-end small { font: 700 9.5px var(--bmt-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--bmt-muted); }
.bmt-eticket-end b { font: 800 34px/1.05 var(--bmt-display); color: var(--bmt-text); font-variant-numeric: tabular-nums; }
.bmt-eticket-end b sup { font-size: 13px; color: var(--bmt-primary); margin-left: 2px; }
.bmt-eticket-end em { font: normal 800 17px var(--bmt-display); color: var(--bmt-text); }
.bmt-eticket-end span { font-size: 12px; color: var(--bmt-muted); }
.bmt-eticket-mid { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bmt-eticket-no { display: flex; flex-direction: column; align-items: center; padding: 5px 14px; border-radius: 9px; background: color-mix(in srgb, var(--bmt-primary) 14%, transparent); color: var(--bmt-primary); font: 800 19px var(--bmt-mono); letter-spacing: .04em; }
.bmt-eticket-no small { font-size: 9px; letter-spacing: .14em; opacity: .75; text-transform: uppercase; }
.bmt-eticket-mid i { width: 100%; height: 2px; background: linear-gradient(90deg, var(--bmt-border), var(--bmt-primary), var(--bmt-border)); background-size: 200% 100%; animation: bmt-shimmer 2.6s linear infinite; }
.bmt-eticket-direct { font-size: 12px; font-weight: 600; color: var(--bmt-primary); }
.bmt-eticket-bags { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 18px 14px; }
.bmt-eticket-bags span { font-size: 11.5px; padding: 3px 9px; border-radius: 999px; background: var(--bmt-surface-2); color: var(--bmt-muted); }
.bmt-eticket-pax { display: flex; justify-content: space-between; padding: 12px 18px; border-top: 1px dashed var(--bmt-border); font: 600 12.5px var(--bmt-mono); color: var(--bmt-text); }
.bmt-eticket-stamp {
	position: absolute; left: 50%; bottom: 7px; margin-left: -58px;
	padding: 4px 12px;
	border: 2px solid var(--bmt-primary); border-radius: 8px;
	color: var(--bmt-primary);
	font: 800 14px var(--bmt-mono); letter-spacing: .14em; text-transform: uppercase;
	transform: rotate(-9deg);
	opacity: .85;
}
.bmt-demo-ticket.is-run .bmt-eticket-stamp { animation: bmt-stamp .7s cubic-bezier(.2, 1.6, .4, 1) .9s both; }
@keyframes bmt-stamp { from { opacity: 0; transform: rotate(-9deg) scale(2.2); } to { opacity: .85; transform: rotate(-9deg) scale(1); } }
.bmt-demo-ticket.is-run .bmt-eticket { animation: bmt-print .9s var(--bmt-ease-out) both; }
@keyframes bmt-print { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.bmt-eticket-out { display: flex; gap: 8px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.bmt-out-chip {
	padding: 6px 14px; border-radius: 999px;
	border: 1px solid var(--bmt-border-lit);
	background: var(--bmt-surface);
	font: 700 12px var(--bmt-mono); letter-spacing: .06em; color: var(--bmt-text);
}
.bmt-demo-ticket.is-run .bmt-out-chip { animation: bmt-rule-in .5s var(--bmt-ease-out) both; animation-delay: calc(1.4s + var(--i) * .18s); }

/* ==========================================================================
   Feature filter + "new" badges
   ========================================================================== */

.bmt-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: -24px auto 34px; }
.bmt-filter[hidden] { display: none; }
.bmt-filter-chip {
	padding: 8px 16px; border-radius: 999px;
	border: 1px solid var(--bmt-border);
	background: var(--bmt-surface);
	color: var(--bmt-muted);
	font: 600 14px var(--bmt-font);
	cursor: pointer;
	transition: all .25s var(--bmt-ease);
}
.bmt-filter-chip:hover { color: var(--bmt-text); border-color: var(--bmt-border-lit); }
.bmt-filter-chip.is-on { background: var(--bmt-primary); border-color: var(--bmt-primary); color: var(--bmt-on-primary); box-shadow: 0 0 22px -6px var(--bmt-glow); }

.bmt-feature.is-hidden { display: none; }
.bmt-feature.is-pop { animation: bmt-panel-in .45s var(--bmt-ease-out) both; }
.bmt-new-badge {
	position: absolute; top: 22px; right: 22px;
	padding: 3px 9px; border-radius: 999px;
	font: 800 10px var(--bmt-mono); letter-spacing: .12em; text-transform: uppercase;
	color: var(--bmt-on-primary); background: var(--bmt-primary);
	box-shadow: 0 0 16px -2px var(--bmt-glow);
}
.bmt-feature.is-new { border-color: color-mix(in srgb, var(--bmt-primary) 35%, var(--bmt-border)); }

/* ==========================================================================
   Closing call to action
   ========================================================================== */

.bmt-cta-band {
	position: relative;
	margin: clamp(20px, 4vw, 40px) 0;
	padding: clamp(72px, 10vw, 128px) 0;
	overflow: hidden;
	text-align: center;
	isolation: isolate;
	border-top: 1px solid var(--bmt-border);
	border-bottom: 1px solid var(--bmt-border);
	background:
		radial-gradient(60% 90% at 50% 120%, var(--bmt-glow-soft), transparent 70%),
		linear-gradient(180deg, transparent, color-mix(in srgb, var(--bmt-surface) 60%, transparent));
}
.bmt-cta-inner { max-width: 820px; }
.bmt-cta-inner .bmt-section-sub { margin: 0 auto 30px; max-width: 36em; }
.bmt-cta-actions { justify-content: center; margin-bottom: 0; }
.bmt-cta-sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.bmt-cta-plane {
	position: absolute; top: 34%; left: -60px;
	width: 34px; height: 34px;
	fill: var(--bmt-primary);
	transform: rotate(90deg);
	filter: drop-shadow(0 0 10px var(--bmt-glow));
	animation: bmt-cross 11s linear infinite;
}
.bmt-cta-trail {
	position: absolute; top: calc(34% + 16px); left: -60px;
	height: 2px; width: 0;
	background: linear-gradient(90deg, transparent, rgba(var(--bmt-primary-rgb), .55));
	animation: bmt-trail 11s linear infinite;
}
@keyframes bmt-cross { from { left: -60px; } to { left: calc(100% + 60px); } }
@keyframes bmt-trail { from { width: 0; } to { width: calc(100% + 60px); } }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1080px) {
	.bmt-chip-4 { left: -2%; }
}

@media (max-width: 900px) {
	.bmt-tour-tabs { grid-template-columns: repeat(2, 1fr); }
	.bmt-tour-tab:nth-child(2) { border-right: 0; }
	.bmt-tour-tab:nth-child(-n+2) { border-bottom: 1px solid var(--bmt-border); }
	.bmt-tour-panel { grid-template-columns: 1fr; min-height: 0; }
	.bmt-board-head, .bmt-board-row { grid-template-columns: 100px 110px 150px minmax(0, 1fr) 126px; }
	.bmt-board-head span:nth-child(5), .bmt-board-seats { display: none; }
}

@media (max-width: 620px) {
	.bmt-rotator { display: none; }
	.bmt-chip-4 { display: none; }
	.bmt-board { padding: 16px 12px 12px; }
	.bmt-board-head, .bmt-board-row { grid-template-columns: 82px 1fr 100px; gap: 6px; }
	.bmt-board-head span:nth-child(2), .bmt-board-head span:nth-child(4), .bmt-board-flight, .bmt-board-via { display: none; }
	.bmt-flap { font-size: 12.5px; min-width: .95em; }
	.bmt-board-tag { padding: 4px 8px; font-size: 9.5px; letter-spacing: .06em; }
	.bmt-board-clock { font-size: 17px; }
	.bmt-tour-tab { padding: 14px; font-size: 13.5px; }
	.bmt-demo { padding: 12px; }
	.bmt-demo-t { font-size: 19px; }
	.bmt-demo-card { padding: 12px; gap: 8px; }
	.bmt-demo-price { min-width: 84px; }
	.bmt-demo-days { display: none; }
	.bmt-eticket-end b { font-size: 26px; }
	.bmt-eticket-end { min-width: 0; }
	.bmt-eticket-no { font-size: 14px; padding: 4px 8px; white-space: nowrap; }
	.bmt-eticket-seg { gap: 8px; padding: 14px; }
	.bmt-eticket-pax { flex-direction: column; gap: 2px; padding-bottom: 44px; }
	.bmt-eticket-stamp { left: auto; right: 12px; margin-left: 0; bottom: 9px; font-size: 11.5px; }
	.bmt-share-gauges { gap: 6px; }
	.bmt-gauge-ring { width: 46px; height: 46px; }
	.bmt-gauge b { top: 25px; font-size: 11.5px; }
	.bmt-filter { margin-top: -12px; }
}

/* ==========================================================================
   Reduced motion: everything holds still, fully visible.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.bmt-aurora span, .bmt-flap.is-flip, .bmt-board-tag.is-last, .bmt-board-clock b,
	.bmt-demo-line i, .bmt-eticket-mid i, .bmt-demo-deal, .bmt-share-flow, .bmt-share-seat,
	.bmt-cta-plane, .bmt-cta-trail, .bmt-tour-panel.is-on, .bmt-feature.is-pop { animation: none !important; }
	.bmt-share-seat, .bmt-cta-plane, .bmt-cta-trail, .bmt-stars { display: none; }
	.bmt-header .bmt-brand::after { display: none; }
	.bmt-demo-pricing .bmt-rule-line, .bmt-demo-pricing .bmt-rule-total,
	.bmt-demo-ticket .bmt-eticket, .bmt-demo-ticket .bmt-eticket-stamp, .bmt-out-chip { animation: none !important; opacity: 1 !important; transform: none; clip-path: none !important; }
	.bmt-eticket-stamp { transform: rotate(-9deg) !important; }
	.bmt-gauge-ring { --p: var(--v) !important; transition: none !important; }
	.bmt-tour-shell.is-playing .bmt-tour-tab.is-on .bmt-tour-progress i { animation: none !important; width: 100%; }
	.bmt-rotator-word { transition: none; }
}

/* ==========================================================================
   The recording, and the photographs of the real screens.

   Both are windows onto the product, so both sit in the same frame: a dark
   bezel with a title bar, which reads as "this is an application" without
   imitating any particular operating system. The screenshots are 1600px wide
   for a display width around 800, so they stay sharp on a retina screen
   without shipping a full-resolution image.
   ========================================================================== */

.bmt-film-frame,
.bmt-screen-shot {
	position: relative;
	border-radius: var(--bmt-r);
	border: 1px solid var(--bmt-border);
	background: var(--bmt-surface-2);
	box-shadow: 0 46px 90px -52px var(--bmt-scrim), inset 0 1px 0 var(--bmt-border-lit);
	overflow: hidden;
}

.bmt-film-frame { margin: 0 auto; max-width: 1040px; }

/* The title bar. Decorative, and hidden from assistive technology. */
.bmt-film-chrome {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 11px 14px;
	border-bottom: 1px solid var(--bmt-border);
	background: color-mix(in srgb, var(--bmt-surface) 70%, transparent);
}
.bmt-film-chrome span {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--bmt-border-lit);
	flex: none;
}
.bmt-film-chrome em {
	margin-left: 10px;
	font-family: var(--bmt-mono);
	font-style: normal;
	font-size: 12.5px;
	color: var(--bmt-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bmt-film-video {
	display: block;
	width: 100%;
	height: auto;
	background: #0b1220;
}

.bmt-film-cap {
	padding: 12px 16px 14px;
	border-top: 1px solid var(--bmt-border);
	color: var(--bmt-muted);
	font-size: .92rem;
	text-align: center;
}

/* The four steps under the film. */
.bmt-film-steps {
	list-style: none;
	margin: clamp(28px, 4vw, 44px) 0 0;
	padding: 0;
	display: grid;
	gap: clamp(18px, 2.4vw, 28px);
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	counter-reset: none;
}
.bmt-film-steps li { margin: 0; }
.bmt-film-no {
	display: inline-block;
	font-family: var(--bmt-mono);
	font-size: 12.5px;
	letter-spacing: .08em;
	color: var(--bmt-primary);
	margin-bottom: 8px;
}
.bmt-film-steps h3 { font-size: 1.06rem; margin: 0 0 .35em; }
.bmt-film-steps p { margin: 0; color: var(--bmt-muted); font-size: .96rem; }

/* --------------------------------------------------------------------------
   The gallery.
   -------------------------------------------------------------------------- */

.bmt-screen-shot img {
	display: block;
	width: 100%;
	height: auto;
}

.bmt-screen-lead {
	margin: 0 0 clamp(36px, 5vw, 60px);
	display: grid;
	gap: clamp(22px, 3vw, 40px);
	align-items: center;
	grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
}
.bmt-screen-lead figcaption h3 { font-size: clamp(1.3rem, 2.1vw, 1.7rem); margin: 0 0 .5em; }
.bmt-screen-lead figcaption p { margin: 0; color: var(--bmt-muted); }

.bmt-screen-grid {
	display: grid;
	gap: clamp(22px, 3vw, 38px);
	grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
}

/*
 * Every card is the same shape whatever the screenshot inside it, so the
 * captions across a row start on the same line. Left to size themselves the
 * cards stagger, and a staggered grid reads as a mistake rather than as
 * variety.
 */
.bmt-screen-card {
	margin: 0;
	display: flex;
	flex-direction: column;
}
.bmt-screen-card figcaption { padding: 16px 2px 0; }
.bmt-screen-card h3 { font-size: 1.08rem; margin: 0 0 .4em; }
.bmt-screen-card p { margin: 0; color: var(--bmt-muted); font-size: .95rem; }

/*
 * The taller screenshots are cropped rather than shrunk, so a table of figures
 * stays the same size as one in a short screenshot beside it. The top of a
 * screen is the part worth seeing.
 */
.bmt-screen-card .bmt-screen-shot {
	height: 248px;
	flex: none;
}
.bmt-screen-card .bmt-screen-shot img {
	object-fit: cover;
	/* Anchored left, not centred: centring trims both edges and takes the
	   headings and first column with them. The left of a screen is where the
	   meaning is. */
	object-position: top left;
	height: 100%;
}

.bmt-screen-more {
	margin: clamp(30px, 4vw, 48px) auto 0;
	max-width: 760px;
	text-align: center;
	color: var(--bmt-muted);
	font-size: .96rem;
}

@media (max-width: 880px) {
	.bmt-screen-lead { grid-template-columns: 1fr; }
	.bmt-screen-grid { grid-template-columns: 1fr; }
	.bmt-screen-card .bmt-screen-shot { height: 212px; }
	.bmt-film-chrome em { display: none; }
}

/* ==========================================================================
   The screen viewer.

   A screenshot in the grid is an advertisement; opened, it is a document. The
   frame is nearly black so the dark screens sit in it without a seam, and the
   chrome stays out of the way at the edges.
   ========================================================================== */

/* The thumbnails are buttons, and should not look like one. */
.bmt-zoomable {
	display: block;
	width: 100%;
	padding: 0;
	border: 1px solid var(--bmt-border);
	background: var(--bmt-surface-2);
	cursor: zoom-in;
	font: inherit;
	color: inherit;
	text-align: left;
	position: relative;
	transition: border-color .25s var(--bmt-ease-out), box-shadow .25s var(--bmt-ease-out), transform .25s var(--bmt-ease-out);
}
.bmt-zoomable:hover,
.bmt-zoomable:focus-visible {
	border-color: color-mix(in srgb, var(--bmt-primary) 55%, var(--bmt-border));
	box-shadow: 0 46px 90px -52px var(--bmt-scrim), 0 0 0 1px color-mix(in srgb, var(--bmt-primary) 28%, transparent);
	transform: translateY(-2px);
}

/* The magnifier, which says the picture does something. */
.bmt-zoom-hint {
	position: absolute;
	right: 10px;
	bottom: 10px;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	color: #fff;
	background: color-mix(in srgb, #0b1220 72%, transparent);
	border: 1px solid rgba(255, 255, 255, .22);
	backdrop-filter: blur(6px);
	opacity: 0;
	transform: translateY(4px);
	transition: opacity .25s var(--bmt-ease-out), transform .25s var(--bmt-ease-out);
	pointer-events: none;
}
.bmt-zoomable:hover .bmt-zoom-hint,
.bmt-zoomable:focus-visible .bmt-zoom-hint { opacity: 1; transform: none; }

.bmt-screen-open {
	margin: clamp(26px, 3.4vw, 40px) auto 0;
	max-width: 760px;
	text-align: center;
	color: var(--bmt-muted);
	font-size: .95rem;
}
.bmt-screen-more { margin-top: 14px; }

/* --------------------------------------------------------------------------
   The overlay.
   -------------------------------------------------------------------------- */

html.bmt-zoom-open { overflow: hidden; }

.bmt-zoom {
	position: fixed;
	inset: 0;
	z-index: 120;
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-rows: auto 1fr auto;
	align-items: center;
	gap: 8px;
	padding: 8px clamp(8px, 2vw, 24px) 10px;
	background: color-mix(in srgb, #05080f 94%, transparent);
	backdrop-filter: blur(10px);
	animation: bmt-zoom-in .22s var(--bmt-ease-out);
}
.bmt-zoom[hidden] { display: none; }

@keyframes bmt-zoom-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.bmt-zoom-bar {
	grid-column: 1 / -1;
	grid-row: 1;
	display: flex;
	align-items: center;
	gap: 12px;
	color: #fff;
	padding: 4px 2px;
}
.bmt-zoom-title {
	font-family: var(--bmt-display);
	font-weight: 600;
	font-size: 1rem;
	letter-spacing: -.01em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.bmt-zoom-count {
	margin-left: auto;
	font-family: var(--bmt-mono);
	font-size: 12.5px;
	color: rgba(255, 255, 255, .62);
	flex: none;
}
.bmt-zoom-btn {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	flex: none;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .18);
	background: rgba(255, 255, 255, .06);
	color: #fff;
	cursor: pointer;
	transition: background .2s var(--bmt-ease-out), border-color .2s var(--bmt-ease-out);
}
.bmt-zoom-btn:hover { background: rgba(255, 255, 255, .15); border-color: rgba(255, 255, 255, .34); }

.bmt-zoom-frame {
	grid-column: 2;
	grid-row: 2;
	display: grid;
	place-items: center;
	overflow: hidden;
	min-width: 0;
	min-height: 0;
	height: 100%;
}
.bmt-zoom-frame img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	display: block;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, .14);
	box-shadow: 0 50px 120px -40px #000;
	cursor: zoom-in;
	transform-origin: center center;
	transition: transform .2s var(--bmt-ease-out);
	will-change: transform;
	user-select: none;
	-webkit-user-drag: none;
}
.bmt-zoom-frame img.is-zoomed { cursor: grab; transition: none; }
.bmt-zoom-frame img.is-zoomed:active { cursor: grabbing; }

.bmt-zoom.is-loading .bmt-zoom-frame img { opacity: .55; filter: blur(1px); }

.bmt-zoom-nav {
	grid-row: 2;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .18);
	background: rgba(255, 255, 255, .06);
	color: #fff;
	cursor: pointer;
	transition: background .2s var(--bmt-ease-out);
}
.bmt-zoom-nav:hover { background: rgba(255, 255, 255, .17); }
.bmt-zoom-nav.is-prev { grid-column: 1; }
.bmt-zoom-nav.is-next { grid-column: 3; }

.bmt-zoom-help {
	grid-column: 1 / -1;
	grid-row: 3;
	margin: 0;
	text-align: center;
	color: rgba(255, 255, 255, .5);
	font-size: .84rem;
}

@media (max-width: 720px) {
	.bmt-zoom { padding: 6px 6px 8px; gap: 4px; }
	.bmt-zoom-nav { width: 40px; height: 40px; }
	.bmt-zoom-title { font-size: .92rem; }
	.bmt-zoom-help { font-size: .78rem; }
	/* Touch does not hover, so the magnifier would never show. */
	.bmt-zoom-hint { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.bmt-zoom { animation: none; }
	.bmt-zoom-frame img { transition: none; }
	.bmt-zoomable { transition: none; }
	.bmt-zoomable:hover, .bmt-zoomable:focus-visible { transform: none; }
}

/* Section wrappers. They carry no styling of their own today — the grids
   inside them do the work — but every class the page emits needs a rule, or
   the next person cannot tell a hook from a typo. Each is also the anchor
   target for the header menu (#products, #channels, #api). */
/* The scroll offset for these lives with every other anchor target in
   theme.css, so there is one place it is set rather than two that can drift.
   The rule stays because every class the page emits needs one. */
.bmt-products,
.bmt-channels,
.bmt-api { position: relative; }

/* ==========================================================================
   Products — seats and rooms
   Added when the marketing site was found to describe half the platform: it
   had never once used the word "hotel". Two cards rather than a grid of small
   ones, because the point being made is that there are exactly TWO kinds of
   inventory and they behave differently.
   ========================================================================== */

.bmt-prod-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 22px;
	margin-top: 44px;
}

.bmt-prod {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 34px 30px;
	border: 1px solid var(--bmt-border);
	border-radius: var(--bmt-r-lg);
	background: var(--bmt-surface);
	overflow: hidden;
	transition: border-color .3s var(--bmt-ease), transform .3s var(--bmt-ease);
}
.bmt-prod:hover { border-color: var(--bmt-border-lit); transform: translateY(-3px); }

/* A wash of the brand behind the top corner, so the two cards read as one
   family without needing a second colour that would have to be maintained. */
.bmt-prod::before {
	content: "";
	position: absolute;
	inset-block-start: -90px;
	inset-inline-end: -90px;
	width: 220px;
	height: 220px;
	border-radius: 50%;
	background: var(--bmt-glow-soft);
	pointer-events: none;
}

/* The two products get their own wash — the brand for seats, the accent for
   rooms — so a glance tells them apart before a word is read. Set on the
   card's own hook rather than with :nth-child, which would silently restyle
   the wrong one the day a third product is added. */
.bmt-prod-hotels::before { background: radial-gradient(circle, color-mix(in srgb, var(--bmt-accent) 22%, transparent), transparent 70%); }
.bmt-prod-hotels .bmt-prod-icon,
.bmt-prod-hotels .bmt-prod-tag { color: var(--bmt-accent-ink); }
.bmt-prod-hotels .bmt-prod-unit { border-inline-start-color: var(--bmt-accent); }
.bmt-prod-hotels .bmt-prod-points li::before { border-color: var(--bmt-accent); }
.bmt-prod-flights .bmt-prod-icon { color: var(--bmt-primary); }

.bmt-prod-top { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }

.bmt-prod-icon {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	flex: none;
	border-radius: 13px;
	border: 1px solid var(--bmt-border-lit);
	background: var(--bmt-surface-2);
	color: var(--bmt-primary);
}
.bmt-prod-icon svg { width: 24px; height: 24px; }

.bmt-prod-tag {
	font-family: var(--bmt-mono);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--bmt-primary);
}

.bmt-prod h3 { margin: 0 0 12px; font-family: var(--bmt-display); font-size: 1.5rem; line-height: 1.25; }
.bmt-prod-lead { margin: 0 0 16px; color: var(--bmt-muted); }

/* The one-line statement of the unit. It is the sentence a hotel contractor
   is looking for, so it gets a rule of its own rather than being a paragraph
   among paragraphs. */
.bmt-prod-unit {
	margin: 0 0 22px;
	padding-inline-start: 14px;
	border-inline-start: 2px solid var(--bmt-primary);
	font-weight: 600;
	color: var(--bmt-text);
}

.bmt-prod-points { margin: auto 0 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.bmt-prod-points li {
	position: relative;
	padding-inline-start: 26px;
	font-size: .95rem;
	color: var(--bmt-muted);
	line-height: 1.55;
}
.bmt-prod-points li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: .5em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	border: 2px solid var(--bmt-primary);
}

.bmt-prod-foot {
	margin: 26px 0 0;
	text-align: center;
	color: var(--bmt-muted);
	font-size: .95rem;
}

/* ==========================================================================
   Channels — the four ways one inventory reaches a buyer
   ========================================================================== */

.bmt-chan-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 22px;
	margin-top: 44px;
}

.bmt-chan {
	position: relative;
	padding: 30px 28px;
	border: 1px solid var(--bmt-border);
	border-radius: var(--bmt-r-lg);
	background: var(--bmt-surface);
	transition: border-color .3s var(--bmt-ease), transform .3s var(--bmt-ease);
}
.bmt-chan:hover { border-color: var(--bmt-border-lit); transform: translateY(-3px); }

.bmt-chan-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }

.bmt-chan-icon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	flex: none;
	border-radius: 12px;
	border: 1px solid var(--bmt-border-lit);
	background: var(--bmt-surface-2);
	color: var(--bmt-primary);
}
.bmt-chan-icon svg { width: 22px; height: 22px; }

.bmt-chan-n {
	font-family: var(--bmt-mono);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--bmt-border-lit);
	line-height: 1;
}

/* Pushed to the far end: it is a commercial label, not part of the title. */
.bmt-chan-meta {
	margin-inline-start: auto;
	padding: 4px 11px;
	border-radius: 999px;
	border: 1px solid var(--bmt-border);
	background: var(--bmt-surface-2);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--bmt-muted);
	white-space: nowrap;
}

.bmt-chan-tag {
	margin: 0 0 6px;
	font-family: var(--bmt-mono);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--bmt-primary);
}
.bmt-chan h3 { margin: 0 0 16px; font-family: var(--bmt-display); font-size: 1.28rem; line-height: 1.3; }

/* The address bar. The whole claim of white label is whose name is above the
   door, and a domain says it faster than a paragraph can. */
.bmt-chan-bar {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 9px 13px;
	margin-bottom: 16px;
	border: 1px solid var(--bmt-border);
	border-radius: 999px;
	background: var(--bmt-surface-2);
	overflow: hidden;
}
.bmt-chan-dots { display: inline-flex; gap: 5px; flex: none; }
.bmt-chan-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--bmt-border-lit); }
.bmt-chan-lock { display: grid; place-items: center; flex: none; color: var(--bmt-primary); }
.bmt-chan-lock svg { width: 13px; height: 13px; }
.bmt-chan-verb {
	flex: none;
	padding: 2px 8px;
	border-radius: 6px;
	background: var(--bmt-primary);
	color: var(--bmt-on-primary);
	font-family: var(--bmt-mono);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .06em;
}
.bmt-chan-addr {
	font-family: var(--bmt-mono);
	font-size: 12.5px;
	color: var(--bmt-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* A real address gets the padlock treatment; a request line gets a verb chip
   and reads as code rather than as somewhere to go. */
.bmt-chan-bar-url .bmt-chan-addr { font-weight: 500; }
.bmt-chan-bar-code { background: var(--bmt-canvas); }
.bmt-chan-bar-code .bmt-chan-addr { color: var(--bmt-muted); }

.bmt-chan-lead { margin: 0; color: var(--bmt-muted); font-size: .96rem; line-height: 1.6; }

.bmt-chan-note {
	margin-top: 26px;
	padding: 24px 28px;
	border: 1px solid var(--bmt-border);
	border-radius: var(--bmt-r);
	background: var(--bmt-surface-2);
}
.bmt-chan-note p { margin: 0; color: var(--bmt-muted); line-height: 1.65; }
.bmt-chan-note strong { color: var(--bmt-text); }

/* ==========================================================================
   Partner API
   ========================================================================== */

.bmt-api-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: 26px;
	align-items: start;
	margin-top: 44px;
}

/* The code panel follows the list as it is read. The two columns are very
   different heights — six spec cards against one panel — and left alone the
   panel ends a third of the way down, leaving the section looking like a
   column that failed to load. Sticky is also the honest reading order: the
   request is the thing every claim on the right refers back to.
   Released back to normal flow below 900px, where the columns stack and a
   sticky block would sit on top of the content beneath it. */
.bmt-api-demo {
	position: sticky;
	inset-block-start: 95px;
	border: 1px solid var(--bmt-border);
	border-radius: var(--bmt-r);
	background: var(--bmt-surface);
	overflow: hidden;
}
.bmt-api-chrome {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 14px;
	border-bottom: 1px solid var(--bmt-border);
	background: color-mix(in srgb, var(--bmt-surface) 70%, transparent);
}
.bmt-api-file { font-family: var(--bmt-mono); font-size: 12.5px; color: var(--bmt-muted); }

.bmt-api-code {
	margin: 0;
	padding: 20px 18px;
	background: var(--bmt-canvas);
	font-family: var(--bmt-mono);
	font-size: 12.5px;
	line-height: 1.75;
	/* A long request line must not stretch the grid column; on a phone it
	   scrolls rather than forcing the whole page sideways. */
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.bmt-api-code code { font: inherit; color: var(--bmt-muted); white-space: pre; }
.bmt-api-c  { color: var(--bmt-primary); font-weight: 700; }
.bmt-api-s  { color: var(--bmt-text); }
.bmt-api-k  { color: var(--bmt-primary); }
.bmt-api-n  { color: var(--bmt-accent-ink); }
.bmt-api-b  { color: var(--bmt-accent-ink); font-weight: 600; }
.bmt-api-p  { color: var(--bmt-border-lit); }
.bmt-api-hl { color: var(--bmt-accent-ink); }

.bmt-api-cap {
	margin: 0;
	padding: 16px 18px;
	border-top: 1px solid var(--bmt-border);
	color: var(--bmt-muted);
	font-size: .93rem;
	line-height: 1.6;
}

.bmt-api-specs { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.bmt-api-spec {
	padding: 18px 20px;
	border: 1px solid var(--bmt-border);
	border-radius: var(--bmt-r-sm);
	background: var(--bmt-surface);
	transition: border-color .3s var(--bmt-ease);
}
.bmt-api-spec:hover { border-color: var(--bmt-border-lit); }
.bmt-api-spec h3 {
	margin: 0 0 6px;
	font-family: var(--bmt-display);
	font-size: 1.02rem;
	line-height: 1.3;
}
.bmt-api-spec p { margin: 0; color: var(--bmt-muted); font-size: .92rem; line-height: 1.6; }

.bmt-api-foot {
	margin-top: 26px;
	padding: 24px 28px;
	border: 1px solid var(--bmt-border);
	border-radius: var(--bmt-r);
	background: var(--bmt-surface-2);
}
.bmt-api-foot p { margin: 0; color: var(--bmt-muted); line-height: 1.65; }
.bmt-api-foot strong { color: var(--bmt-text); }

@media (max-width: 900px) {
	.bmt-prod-grid,
	.bmt-chan-grid,
	.bmt-api-grid { grid-template-columns: 1fr; }
	.bmt-api-demo { position: static; }
	.bmt-prod { padding: 28px 24px; }
	.bmt-chan { padding: 26px 22px; }
}

@media (max-width: 520px) {
	.bmt-prod { padding: 24px 20px; }
	.bmt-prod h3 { font-size: 1.32rem; }
	.bmt-chan { padding: 22px 18px; }
	.bmt-chan-note,
	.bmt-api-foot { padding: 20px 18px; }
	.bmt-api-code { font-size: 11.5px; }
	/* The commercial label wraps under the number rather than squeezing the
	   title on a narrow screen. */
	.bmt-chan-meta { font-size: 10.5px; padding: 3px 9px; }
}

@media (prefers-reduced-motion: reduce) {
	.bmt-prod, .bmt-chan, .bmt-api-spec { transition: none; }
	.bmt-prod:hover, .bmt-chan:hover { transform: none; }
}