/**
 * Intent topic landing pages.
 *
 * The visual language is BrandWell's own report and portal: a light ground,
 * Georgia carrying the display type with a purple italic, Inter for the rest,
 * one accent. Two sections go dark on purpose - how the data exists, and AIMEE
 * at work - so the page has a rhythm rather than a single tone. Product UI is
 * drawn as real UI, in the portal's own tokens, not as illustration.
 *
 * Scoped under .bwtlp-main because these pages run inside the marketing
 * theme. Motion reveals as content is scrolled to, degrades to no motion under
 * prefers-reduced-motion, and never hides anything unless the head has flagged
 * the document with .bwtlp-js before first paint.
 */

.bwtlp-main {
	--bwtlp-canvas: #f7f7fb;
	--bwtlp-canvas-2: #eef0f6;
	--bwtlp-surface: #ffffff;
	--bwtlp-ink: #171827;
	--bwtlp-ink-2: #3a3d4f;
	--bwtlp-muted: #5c6071;
	--bwtlp-faint: #6b7080;
	--bwtlp-line: rgba(29, 31, 46, 0.1);
	--bwtlp-line-2: rgba(29, 31, 46, 0.18);
	--bwtlp-accent: #5b16d6;
	--bwtlp-accent-dark: #4310a4;
	--bwtlp-accent-text: #692cc4;
	--bwtlp-accent-soft: rgba(91, 22, 214, 0.09);
	--bwtlp-lilac: #bc68ff;
	--bwtlp-green: #0f8a5f;
	--bwtlp-green-soft: rgba(15, 138, 95, 0.1);
	--bwtlp-amber: #d97706;
	--bwtlp-dark: #14102a;
	--bwtlp-dark-2: #1c1538;
	--bwtlp-display: Georgia, "Times New Roman", serif;
	--bwtlp-mono: ui-monospace, "SF Mono", Menlo, monospace;
	--bwtlp-radius: 12px;
	--bwtlp-radius-lg: 20px;
	--bwtlp-shadow: 0 24px 60px rgba(40, 32, 62, 0.1), 0 2px 8px rgba(20, 21, 34, 0.04);
	--bwtlp-shadow-lg: 0 40px 100px rgba(40, 32, 62, 0.16), 0 4px 14px rgba(20, 21, 34, 0.06);
	--bwtlp-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--bwtlp-ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);

	background: var(--bwtlp-canvas);
	color: var(--bwtlp-ink);
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

.bwtlp-container {
	width: 100%;
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 24px;
	box-sizing: border-box;
}

.bwtlp-container-narrow {
	max-width: 820px;
}

.bwtlp-section {
	padding: 108px 0;
	position: relative;
}

.bwtlp-section-tint {
	background: var(--bwtlp-canvas-2);
	border-top: 1px solid var(--bwtlp-line);
	border-bottom: 1px solid var(--bwtlp-line);
}

.bwtlp-section-dark {
	background: var(--bwtlp-dark);
	color: #fff;
}

/* ------------------------------------------------------------------ type */

.bwtlp-main .bwtlp-display {
	font-family: var(--bwtlp-display);
	font-size: clamp(2.6rem, 5.6vw, 4.6rem);
	line-height: 1.02;
	letter-spacing: -0.02em;
	font-weight: 400;
	margin: 0 0 22px;
}

.bwtlp-main .bwtlp-h2 {
	font-family: var(--bwtlp-display);
	font-size: clamp(2rem, 3.8vw, 3rem);
	line-height: 1.08;
	letter-spacing: -0.018em;
	font-weight: 400;
	margin: 0 0 20px;
}

.bwtlp-main .bwtlp-display em,
.bwtlp-main .bwtlp-h2 em {
	font-style: italic;
	color: var(--bwtlp-accent-text);
}

.bwtlp-section-dark .bwtlp-h2 em,
.bwtlp-section-dark .bwtlp-display em {
	color: var(--bwtlp-lilac);
}

.bwtlp-kicker {
	font-size: 0.72rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--bwtlp-accent);
	margin: 0 0 18px;
	font-weight: 700;
}

.bwtlp-section-dark .bwtlp-kicker {
	color: var(--bwtlp-lilac);
}

.bwtlp-lead {
	font-size: 1.14rem;
	line-height: 1.62;
	color: var(--bwtlp-muted);
	margin: 0 0 28px;
	max-width: 58ch;
}

.bwtlp-section-dark .bwtlp-lead {
	color: rgba(255, 255, 255, 0.72);
}

.bwtlp-prose p {
	color: var(--bwtlp-muted);
	line-height: 1.72;
	margin: 0 0 16px;
	max-width: 64ch;
}

.bwtlp-section-dark .bwtlp-prose p {
	color: rgba(255, 255, 255, 0.72);
}

.bwtlp-split {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: 56px;
	align-items: start;
}

/* ---------------------------------------------------------------- reveal */

.bwtlp-reveal {
	opacity: 0;
	transform: translate3d(0, 20px, 0);
	transition:
		opacity 0.8s var(--bwtlp-ease-out),
		transform 0.8s var(--bwtlp-ease-out);
	transition-delay: var(--bwtlp-delay, 0ms);
}

.bwtlp-reveal.is-in {
	opacity: 1;
	transform: none;
}

html:not(.bwtlp-js) .bwtlp-reveal,
html:not(.bwtlp-js) .bwtlp-price-offer,
html:not(.bwtlp-js) .bwtlp-site {
	opacity: 1;
	transform: none;
}

html:not(.bwtlp-js) .bwtlp-strike::after {
	transform: scaleX(1);
}

/* The head hides these before paint on the promise that the page script will
   bring them back. If that script never boots (blocked, failed to load, threw
   before it wired the reveals) the promise is broken, and the pages that load
   this file include the ones a buyer lands on straight after paying. So three
   seconds without .bwtlp-ready and everything is shown, launch price and all,
   as it would be with no script. The script sets .bwtlp-ready only after the
   reveals are wired, which stands this down on every normal load. */
@keyframes bwtlp-failsafe {
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes bwtlp-failsafe-strike {
	to {
		transform: scaleX(1);
	}
}

html.bwtlp-js:not(.bwtlp-ready) .bwtlp-reveal,
html.bwtlp-js:not(.bwtlp-ready) .bwtlp-price-offer,
html.bwtlp-js:not(.bwtlp-ready) .bwtlp-site {
	animation: bwtlp-failsafe 0.01s linear 3s forwards;
}

html.bwtlp-js:not(.bwtlp-ready) .bwtlp-strike::after {
	animation: bwtlp-failsafe-strike 0.01s linear 3s forwards;
}

html.bwtlp-js {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	.bwtlp-main *,
	.bwtlp-main *::before,
	.bwtlp-main *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}

	.bwtlp-reveal {
		opacity: 1;
		transform: none;
	}

	/* SMIL motion ignores the media query, so the moving dots are removed
	   from the picture rather than left running. The curves and chips are
	   drawn in their finished state instead of animating in. */
	.bwtlp-network-svg circle {
		display: none;
	}

	.bwtlp-network-svg path {
		stroke-dashoffset: 0;
	}

	.bwtlp-site {
		opacity: 1;
		translate: 0 0;
	}
}

/* --------------------------------------------------------------- buttons */

.bwtlp-main .bwtlp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	background: var(--bwtlp-accent);
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	font-size: 1rem;
	font-family: inherit;
	line-height: 1.2;
	padding: 16px 28px;
	border: 0;
	border-radius: 10px;
	cursor: pointer;
	box-shadow: 0 10px 26px rgba(91, 22, 214, 0.22);
	transition:
		background 0.3s var(--bwtlp-ease-out),
		transform 0.3s var(--bwtlp-ease-out),
		box-shadow 0.3s var(--bwtlp-ease-out);
}

.bwtlp-main .bwtlp-btn:hover,
.bwtlp-main .bwtlp-btn:focus-visible {
	background: var(--bwtlp-accent-dark);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 16px 40px rgba(91, 22, 214, 0.3);
}

.bwtlp-main .bwtlp-btn:active {
	transform: translateY(0);
}

.bwtlp-main .bwtlp-btn[disabled] {
	opacity: 0.6;
	cursor: progress;
	transform: none;
}

.bwtlp-main .bwtlp-btn-block {
	width: 100%;
}

.bwtlp-main .bwtlp-btn-ghost {
	background: var(--bwtlp-surface);
	color: var(--bwtlp-accent);
	border: 1px solid var(--bwtlp-line-2);
	box-shadow: none;
}

.bwtlp-main .bwtlp-btn-ghost:hover,
.bwtlp-main .bwtlp-btn-ghost:focus-visible {
	background: var(--bwtlp-accent-soft);
	color: var(--bwtlp-accent-dark);
	box-shadow: none;
}

.bwtlp-section-dark .bwtlp-btn-ghost {
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
	border-color: rgba(255, 255, 255, 0.2);
}

.bwtlp-main .bwtlp-link {
	color: var(--bwtlp-accent);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.25s var(--bwtlp-ease-out);
}

.bwtlp-main .bwtlp-link:hover {
	border-bottom-color: currentColor;
}

/* ----------------------------------------------------------------- modes */

/* One URL, three experiences. The head sets a mode class on <html> before
   first paint, so nothing flashes and a cached page still shows each visitor
   their own mode. With no script at all, the waitlist is what shows. */
html:not(.bwtlp-mode-waitlist) .bwtlp-when-waitlist,
html:not(.bwtlp-mode-offer):not(.bwtlp-mode-standard) .bwtlp-when-access,
html:not(.bwtlp-mode-offer) .bwtlp-when-offer,
html:not(.bwtlp-mode-standard) .bwtlp-when-standard {
	display: none !important;
}

html:not(.bwtlp-js):not(.bwtlp-mode-offer):not(.bwtlp-mode-standard) .bwtlp-when-waitlist {
	display: block !important;
}

/* Chips are anchored by their inner edge, so the stage only needs enough
   inset to keep the curve endpoints off the card's own border. */
.bwtlp-sites,
.bwtlp-network-svg {
	inset: 0 14px;
	width: auto;
}

/* ---------------------------------------------------------------- access */

/* Doubled selector on purpose: .bwtlp-capture sets its own background later
   in this file, and at equal specificity that rule would paint this card
   white under white text. */
.bwtlp-capture.bwtlp-access {
	background: var(--bwtlp-dark);
	color: #fff;
	border-color: transparent;
}

.bwtlp-capture.bwtlp-access h2 {
	color: #fff;
}

.bwtlp-access .bwtlp-capture-sub,
.bwtlp-access .bwtlp-capture-note {
	color: rgba(255, 255, 255, 0.66);
}

.bwtlp-access .bwtlp-capture-sub strong {
	color: #fff;
}

.bwtlp-access .bwtlp-kicker {
	color: var(--bwtlp-lilac);
}

.bwtlp-access-clock {
	margin: 4px 0 16px;
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
}

.bwtlp-access-clock b {
	font-family: var(--bwtlp-mono);
	font-size: 2.2rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
	color: #fff;
}

.bwtlp-access-clock span {
	font-size: 0.86rem;
	color: rgba(255, 255, 255, 0.6);
}

/* ---------------------------------------------------------------- strike */

/* The standard price is struck through by a line that draws itself in once
   the table has scrolled into view, then the early access price settles in
   beside it. In standard mode the offer is over, so the line never draws. */
.bwtlp-strike {
	position: relative;
	display: inline-block;
	color: var(--bwtlp-faint);
}

.bwtlp-strike::after {
	content: "";
	position: absolute;
	left: -4%;
	right: -4%;
	top: 52%;
	height: 2px;
	background: var(--bwtlp-accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.7s var(--bwtlp-ease-out) 0.35s;
}

.bwtlp-pricing.is-in .bwtlp-strike::after {
	transform: scaleX(1);
}

.bwtlp-price-offer {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	margin-left: 14px;
	color: var(--bwtlp-green);
	opacity: 0;
	transform: translate3d(-6px, 0, 0);
	transition: opacity 0.6s var(--bwtlp-ease-out) 0.9s, transform 0.6s var(--bwtlp-ease-out) 0.9s;
}

.bwtlp-pricing.is-in .bwtlp-price-offer {
	opacity: 1;
	transform: none;
}

.bwtlp-price-offer em {
	font-family: Inter, sans-serif;
	font-style: normal;
	font-size: 0.64rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--bwtlp-green);
	margin-left: 4px;
}

html.bwtlp-mode-standard .bwtlp-strike {
	color: inherit;
}

html.bwtlp-mode-standard .bwtlp-strike::after,
html.bwtlp-mode-standard .bwtlp-price-offer {
	display: none;
}

.bwtlp-soon {
	display: inline-block;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	padding: 14px 18px;
	border-radius: 10px;
	border: 1px dashed var(--bwtlp-line-2);
	color: var(--bwtlp-faint);
	font-weight: 600;
	font-size: 0.92rem;
	letter-spacing: 0.04em;
}

/* ----------------------------------------------------------------- toast */

.bwtlp-toast {
	position: fixed;
	left: 50%;
	top: 18px;
	transform: translate(-50%, -140%);
	z-index: 130;
	background: var(--bwtlp-ink);
	color: #fff;
	padding: 14px 20px;
	border-radius: 12px;
	font-size: 0.92rem;
	box-shadow: var(--bwtlp-shadow-lg);
	transition: transform 0.5s var(--bwtlp-ease-out-soft);
	max-width: calc(100% - 32px);
}

.bwtlp-toast.is-on {
	transform: translate(-50%, 0);
}

/* ---------------------------------------------------------------- banner */

.bwtlp-banner {
	position: sticky;
	top: 0;
	z-index: 95;
	background: var(--bwtlp-dark);
	color: #fff;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.bwtlp-banner-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding-top: 11px;
	padding-bottom: 11px;
}

.bwtlp-banner p {
	margin: 0;
	font-size: 0.88rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	color: rgba(255, 255, 255, 0.8);
}

.bwtlp-banner strong {
	color: #fff;
}

.bwtlp-banner-flag {
	font-size: 0.66rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 700;
	padding: 5px 10px;
	border-radius: 999px;
	background: var(--bwtlp-accent);
	color: #fff;
}

.bwtlp-banner-clock b {
	font-family: var(--bwtlp-mono);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: #fff;
	background: rgba(255, 255, 255, 0.1);
	padding: 4px 9px;
	border-radius: 7px;
	margin-left: 4px;
}

/* Both messages are in the markup so the swap needs no script beyond the
   mode class on <html>. Specificity matters here: these must outrank the
   `.bwtlp-banner p` rule above or both lines show at once. */
.bwtlp-banner .bwtlp-banner-ended {
	display: none;
}

html.bwtlp-mode-standard .bwtlp-banner .bwtlp-banner-ended {
	display: flex !important;
}

.bwtlp-main .bwtlp-banner-btn {
	padding: 10px 18px;
	font-size: 0.86rem;
	flex-shrink: 0;
	box-shadow: none;
}

/* ---------------------------------------------------------------- launch */

/* Editorial rather than a card grid: a standing argument on the left and
   three numbered beats on the right, separated by hairlines. Three equal
   boxes with an icon on top read as filler no matter what the copy says. */
.bwtlp-early {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: 72px;
	align-items: start;
}

.bwtlp-early-lead {
	position: sticky;
	top: 96px;
}

.bwtlp-early-list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: none;
}

.bwtlp-early-list li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 26px;
	padding: 28px 0;
	border-top: 1px solid var(--bwtlp-line-2);
}

.bwtlp-early-list li:first-child {
	border-top: 0;
	padding-top: 0;
}

.bwtlp-early-num {
	font-family: var(--bwtlp-display);
	font-size: 1.7rem;
	line-height: 1;
	color: var(--bwtlp-accent);
	letter-spacing: -0.01em;
}

.bwtlp-main .bwtlp-early-list h3 {
	margin: 0 0 9px;
	font-size: 1.16rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.3;
}

.bwtlp-early-list p {
	margin: 0;
	font-size: 0.97rem;
	line-height: 1.68;
	color: var(--bwtlp-muted);
}

/* --------------------------------------------------------------- pricing */

.bwtlp-pricing {
	background: var(--bwtlp-surface);
	border: 1px solid var(--bwtlp-line);
	border-radius: var(--bwtlp-radius-lg);
	box-shadow: var(--bwtlp-shadow);
	overflow: auto;
}

.bwtlp-pricing-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 720px;
}

.bwtlp-pricing-table th,
.bwtlp-pricing-table td {
	padding: 16px 22px;
	border-bottom: 1px solid var(--bwtlp-line);
	text-align: left;
	vertical-align: middle;
	font-size: 0.94rem;
}

.bwtlp-pricing-table thead th {
	padding-top: 26px;
	padding-bottom: 18px;
	vertical-align: bottom;
	position: relative;
}

.bwtlp-pricing-table tbody th {
	font-weight: 500;
	color: var(--bwtlp-muted);
	width: 32%;
}

.bwtlp-pricing-table td {
	color: var(--bwtlp-ink);
	width: 22.6%;
}

.bwtlp-pricing-table .is-featured {
	background: var(--bwtlp-accent-soft);
}

.bwtlp-pricing-table thead .is-featured {
	box-shadow: inset 0 3px 0 var(--bwtlp-accent);
}

.bwtlp-pricing-head {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.bwtlp-pricing-name {
	font-family: var(--bwtlp-display);
	font-size: 1.5rem;
	font-weight: 400;
}

/* A pill beside the plan name, not a label above it: it reads as an
   attribute of the plan rather than a banner over the column. */
.bwtlp-pricing-flag {
	display: inline-block;
	font-size: 0.62rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 700;
	padding: 5px 10px;
	border-radius: 999px;
	background: var(--bwtlp-accent);
	color: #fff;
	white-space: nowrap;
}

/* On a column that is not the highlighted one the pill still labels it, but
   in a neutral tone so the two do not compete for the same glance. */
.bwtlp-pricing-flag-quiet {
	background: rgba(29, 31, 46, 0.07);
	color: var(--bwtlp-muted);
}

.bwtlp-price {
	font-family: var(--bwtlp-display);
	font-size: 1.5rem;
	white-space: nowrap;
}

.bwtlp-price small {
	font-family: Inter, sans-serif;
	font-size: 0.78rem;
	color: var(--bwtlp-faint);
	margin-left: 2px;
}

.bwtlp-pricing-offer-row th,
.bwtlp-pricing-offer-row td {
	background: rgba(15, 138, 95, 0.06);
}

.bwtlp-pricing-offer-row .is-featured {
	background: rgba(15, 138, 95, 0.11);
}

.bwtlp-price-offer {
	color: var(--bwtlp-green);
}

.bwtlp-pricing-clock {
	display: inline-block;
	margin-left: 10px;
	font-size: 0.74rem;
	color: var(--bwtlp-green);
	font-weight: 600;
}

.bwtlp-pricing-clock b {
	font-family: var(--bwtlp-mono);
	font-variant-numeric: tabular-nums;
}

html.bwtlp-mode-standard .bwtlp-pricing-clock {
	display: none;
}

.bwtlp-pricing-actions td,
.bwtlp-pricing-actions th {
	border-bottom: 0;
	padding-top: 22px;
	padding-bottom: 26px;
}

/* Each plan button is a real form post now, because the checkout is opened
   server-side rather than linked to. A theme's own form margin would put a
   gap under every price column, so it is cleared here. */
.bwtlp-main .bwtlp-plan-form {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.bwtlp-pricing-foot {
	margin: 18px 0 0;
	font-size: 0.86rem;
	color: var(--bwtlp-faint);
	max-width: 70ch;
}

.bwtlp-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ------------------------------------------------------------ sticky bar */

.bwtlp-stickybar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 90;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: saturate(160%) blur(16px);
	border-top: 1px solid var(--bwtlp-line);
	padding: 12px 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 22px;
	transform: translate3d(0, 110%, 0);
	transition: transform 0.55s var(--bwtlp-ease-out-soft);
}

.bwtlp-stickybar.is-in {
	transform: none;
}

.bwtlp-stickybar p {
	margin: 0;
	font-size: 0.92rem;
	color: var(--bwtlp-muted);
}

.bwtlp-stickybar strong {
	color: var(--bwtlp-ink);
	font-family: var(--bwtlp-display);
	font-size: 1.1rem;
	font-weight: 400;
}

.bwtlp-stickybar .bwtlp-btn {
	padding: 12px 22px;
	font-size: 0.92rem;
	flex-shrink: 0;
}

/* ------------------------------------------------------------------ hero */

.bwtlp-hero {
	position: relative;
	padding: 76px 0 40px;
	overflow: hidden;
	background:
		radial-gradient(900px 500px at 50% -20%, rgba(91, 22, 214, 0.1), transparent 70%),
		var(--bwtlp-canvas);
}

.bwtlp-hero-top {
	text-align: center;
	max-width: 900px;
	margin: 0 auto 44px;
}

.bwtlp-hero-top .bwtlp-lead {
	margin-left: auto;
	margin-right: auto;
}

.bwtlp-badges {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0 0 26px;
	padding: 0;
	list-style: none;
}

.bwtlp-badge {
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 700;
	padding: 7px 13px;
	border-radius: 999px;
	background: var(--bwtlp-surface);
	border: 1px solid var(--bwtlp-line);
	color: var(--bwtlp-muted);
}

.bwtlp-badge-live {
	background: var(--bwtlp-accent);
	border-color: transparent;
	color: #fff;
}

.bwtlp-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
	gap: 40px;
	align-items: stretch;
}

/* ----------------------------------------------------------- network viz */

.bwtlp-network {
	position: relative;
	background: var(--bwtlp-surface);
	border: 1px solid var(--bwtlp-line);
	border-radius: var(--bwtlp-radius-lg);
	box-shadow: var(--bwtlp-shadow);
	overflow: hidden;
	min-height: 480px;
	display: flex;
	flex-direction: column;
}

.bwtlp-network-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 22px;
	border-bottom: 1px solid var(--bwtlp-line);
	font-size: 0.78rem;
	color: var(--bwtlp-muted);
}

.bwtlp-network-head b {
	color: var(--bwtlp-ink);
	font-weight: 600;
}

.bwtlp-live {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--bwtlp-green);
}

.bwtlp-live::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--bwtlp-green);
	box-shadow: 0 0 0 0 rgba(15, 138, 95, 0.5);
	animation: bwtlp-pulse 1.8s ease-out infinite;
}

@keyframes bwtlp-pulse {
	0% { box-shadow: 0 0 0 0 rgba(15, 138, 95, 0.5); }
	100% { box-shadow: 0 0 0 10px rgba(15, 138, 95, 0); }
}

.bwtlp-network-stage {
	position: relative;
	flex-grow: 1;
	padding: 20px 22px 18px;
}

.bwtlp-network-svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* pathLength="1" normalizes every curve, so one dash rule draws them all in
   regardless of their real length. */
.bwtlp-network-svg path {
	fill: none;
	stroke: rgba(91, 22, 214, 0.22);
	stroke-width: 1.4;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	transition: stroke-dashoffset 1.4s var(--bwtlp-ease-out-soft);
	transition-delay: var(--bwtlp-delay, 0ms);
}

.bwtlp-network.is-in .bwtlp-network-svg path {
	stroke-dashoffset: 0;
}

.bwtlp-network-svg .bwtlp-dot {
	fill: var(--bwtlp-accent);
}

.bwtlp-network-svg .bwtlp-dot-b {
	fill: #e64ba4;
}

.bwtlp-sites {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.bwtlp-site {
	position: absolute;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--bwtlp-surface);
	border: 1px solid var(--bwtlp-line-2);
	border-radius: 999px;
	padding: 7px 12px 7px 8px;
	font-size: 0.76rem;
	font-weight: 600;
	color: var(--bwtlp-ink-2);
	box-shadow: 0 6px 18px rgba(20, 21, 34, 0.08);
	white-space: nowrap;
	pointer-events: auto;
	max-width: 46%;
	opacity: 0;
	transition:
		opacity 0.6s var(--bwtlp-ease-out),
		translate 0.6s var(--bwtlp-ease-out);
	transition-delay: var(--bwtlp-delay, 0ms);
}

/* `translate` is animated separately from `transform` so the per-side
   anchoring below stays a static offset rather than something the entrance
   has to re-state three times. */
.bwtlp-site.is-center { transform: translate(-50%, -50%); translate: 0 6px; }
.bwtlp-site.is-left { transform: translate(0, -50%); translate: -6px 0; }
.bwtlp-site.is-right { transform: translate(-100%, -50%); translate: 6px 0; }

.bwtlp-network.is-in .bwtlp-site {
	opacity: 1;
	translate: 0 0;
}

.bwtlp-site b {
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}

.bwtlp-site i {
	width: 20px;
	height: 20px;
	border-radius: 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-style: normal;
	font-size: 0.62rem;
	font-weight: 800;
	color: #fff;
	background: var(--bwtlp-ink);
	letter-spacing: 0;
}

.bwtlp-site small {
	font-weight: 500;
	color: var(--bwtlp-faint);
	font-size: 0.68rem;
}

.bwtlp-hub {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 250px;
	background: var(--bwtlp-ink);
	color: #fff;
	border-radius: 16px;
	padding: 14px 16px;
	box-shadow: var(--bwtlp-shadow-lg);
}

.bwtlp-hub-label {
	font-size: 0.64rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bwtlp-lilac);
	font-weight: 700;
	margin: 0 0 8px;
}

/* Rows arrive one at a time, then keep pulsing in sequence: the signals
   travelling the curves are landing here and resolving to people. */
.bwtlp-hub-row {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 7px 8px;
	margin: 0 -8px;
	border-radius: 8px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	font-size: 0.78rem;
	opacity: 0;
	transform: translateY(6px);
	animation:
		bwtlp-row-in 0.6s var(--bwtlp-ease-out) var(--bwtlp-delay, 0ms) forwards,
		bwtlp-row-pulse 7.8s ease-in-out var(--bwtlp-pulse-delay, 0s) infinite;
}

@keyframes bwtlp-row-in {
	to { opacity: 1; transform: none; }
}

@keyframes bwtlp-row-pulse {
	0%, 88%, 100% { background: transparent; }
	92% { background: rgba(160, 107, 255, 0.16); }
}

.bwtlp-hub-row b {
	display: block;
	font-weight: 600;
	color: #fff;
}

.bwtlp-hub-row span {
	display: block;
	color: rgba(255, 255, 255, 0.6);
	font-size: 0.7rem;
	margin-top: 1px;
}

.bwtlp-hub-avatar {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--bwtlp-accent), #e64ba4);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--bwtlp-display);
	font-size: 0.8rem;
	flex-shrink: 0;
}

.bwtlp-network-foot {
	padding: 12px 22px;
	border-top: 1px solid var(--bwtlp-line);
	font-size: 0.76rem;
	color: var(--bwtlp-faint);
	display: flex;
	justify-content: space-between;
	gap: 12px;
}

/* --------------------------------------------------------------- capture */

.bwtlp-capture {
	background: var(--bwtlp-surface);
	border: 1px solid var(--bwtlp-line);
	border-radius: var(--bwtlp-radius-lg);
	padding: 30px;
	box-shadow: var(--bwtlp-shadow);
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.bwtlp-capture-head {
	margin-bottom: 20px;
}

.bwtlp-capture h2 {
	font-family: var(--bwtlp-display);
	font-weight: 400;
	font-size: 1.62rem;
	line-height: 1.14;
	letter-spacing: -0.015em;
	margin: 0 0 8px;
}

.bwtlp-capture-sub {
	margin: 0;
	font-size: 0.93rem;
	line-height: 1.55;
	color: var(--bwtlp-muted);
}

.bwtlp-field {
	display: block;
	margin-bottom: 12px;
}

.bwtlp-field span {
	display: block;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--bwtlp-ink-2);
	margin-bottom: 6px;
}

.bwtlp-main .bwtlp-field input {
	width: 100%;
	box-sizing: border-box;
	font-family: inherit;
	font-size: 0.97rem;
	color: var(--bwtlp-ink);
	background: #fbfbfd;
	border: 1px solid var(--bwtlp-line-2);
	border-radius: 10px;
	padding: 13px 14px;
	transition:
		border-color 0.25s var(--bwtlp-ease-out),
		box-shadow 0.25s var(--bwtlp-ease-out),
		background 0.25s var(--bwtlp-ease-out);
}

.bwtlp-main .bwtlp-field input:focus {
	outline: none;
	background: #fff;
	border-color: var(--bwtlp-accent);
	box-shadow: 0 0 0 4px var(--bwtlp-accent-soft);
}

.bwtlp-field-hint {
	display: block;
	font-size: 0.78rem;
	color: var(--bwtlp-faint);
	margin-top: 6px;
	font-style: normal;
}

.bwtlp-field-error {
	display: none;
	font-size: 0.78rem;
	color: #b3261e;
	margin-top: 6px;
	font-style: normal;
	font-weight: 500;
}

.bwtlp-field.has-error input {
	border-color: #b3261e;
}

.bwtlp-field.has-error .bwtlp-field-error {
	display: block;
}

.bwtlp-capture-note {
	margin: 12px 0 0;
	font-size: 0.8rem;
	line-height: 1.5;
	color: var(--bwtlp-faint);
	text-align: center;
}

.bwtlp-capture-status {
	margin: 12px 0 0;
	font-size: 0.88rem;
	color: #b3261e;
	min-height: 1em;
}

.bwtlp-capture-done {
	display: none;
}

.bwtlp-capture.is-done .bwtlp-capture-form,
.bwtlp-capture.is-done .bwtlp-capture-head {
	display: none;
}

.bwtlp-capture.is-done .bwtlp-capture-done {
	display: block;
	animation: bwtlp-fade-up 0.6s var(--bwtlp-ease-out) both;
}

@keyframes bwtlp-fade-up {
	from { opacity: 0; transform: translate3d(0, 12px, 0); }
	to { opacity: 1; transform: none; }
}

.bwtlp-done-steps {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.bwtlp-done-steps li {
	display: grid;
	grid-template-columns: 26px 1fr;
	gap: 12px;
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--bwtlp-muted);
}

.bwtlp-done-steps b {
	display: block;
	color: var(--bwtlp-ink);
	font-weight: 600;
}

.bwtlp-step-dot {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--bwtlp-accent);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ----------------------------------------------------------- window band */

.bwtlp-window {
	background: var(--bwtlp-dark);
	color: #fff;
	padding: 44px 0;
}

.bwtlp-window-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 40px;
	align-items: center;
}

.bwtlp-window h2 {
	font-family: var(--bwtlp-display);
	font-weight: 400;
	font-size: clamp(1.5rem, 2.6vw, 2.1rem);
	line-height: 1.16;
	margin: 0 0 8px;
	letter-spacing: -0.015em;
}

.bwtlp-window h2 em {
	font-style: italic;
	color: var(--bwtlp-lilac);
}

.bwtlp-window p {
	margin: 0;
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.98rem;
	line-height: 1.6;
	max-width: 62ch;
}

.bwtlp-plans {
	display: flex;
	gap: 12px;
}

.bwtlp-plan {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 14px;
	padding: 16px 18px;
	min-width: 190px;
}

.bwtlp-plan b {
	display: block;
	font-size: 0.66rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bwtlp-lilac);
	font-weight: 700;
	margin-bottom: 6px;
}

.bwtlp-plan strong {
	display: block;
	font-family: var(--bwtlp-display);
	font-weight: 400;
	font-size: 1.3rem;
	margin-bottom: 4px;
}

.bwtlp-plan span {
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.62);
	line-height: 1.45;
	display: block;
}

/* ------------------------------------------------------------ the board */

.bwtlp-audience-head {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: 56px;
	align-items: end;
	margin-bottom: 36px;
}

.bwtlp-headline-number {
	font-family: var(--bwtlp-display);
	font-size: clamp(3.2rem, 8vw, 5.6rem);
	line-height: 0.96;
	letter-spacing: -0.02em;
	margin: 0;
	font-variant-numeric: tabular-nums;
	color: var(--bwtlp-accent);
}

.bwtlp-headline-sub {
	font-size: 1rem;
	color: var(--bwtlp-muted);
	margin: 14px 0 0;
	max-width: 46ch;
}

.bwtlp-board-tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 14px;
}

.bwtlp-tablist {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.bwtlp-main .bwtlp-tab {
	appearance: none;
	background: var(--bwtlp-surface);
	border: 1px solid var(--bwtlp-line-2);
	border-radius: 999px;
	padding: 9px 17px;
	font-size: 0.86rem;
	font-weight: 600;
	color: var(--bwtlp-muted);
	cursor: pointer;
	font-family: inherit;
	transition:
		background 0.28s var(--bwtlp-ease-out),
		color 0.28s var(--bwtlp-ease-out),
		border-color 0.28s var(--bwtlp-ease-out);
}

.bwtlp-main .bwtlp-tab span {
	color: var(--bwtlp-faint);
	margin-left: 6px;
	font-weight: 500;
}

.bwtlp-main .bwtlp-tab:hover {
	border-color: var(--bwtlp-accent);
	color: var(--bwtlp-accent);
}

.bwtlp-main .bwtlp-tab[aria-selected="true"] {
	background: var(--bwtlp-ink);
	border-color: transparent;
	color: #fff;
}

.bwtlp-main .bwtlp-tab[aria-selected="true"] span {
	color: rgba(255, 255, 255, 0.6);
}

.bwtlp-sample-cta {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 10px 16px;
	border-radius: 999px;
	background: var(--bwtlp-surface);
	border: 1px solid var(--bwtlp-line-2);
	color: var(--bwtlp-accent);
	font-weight: 600;
	font-size: 0.88rem;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.28s var(--bwtlp-ease-out), border-color 0.28s var(--bwtlp-ease-out);
}

.bwtlp-sample-cta:hover {
	background: var(--bwtlp-accent-soft);
	border-color: var(--bwtlp-accent);
}

.bwtlp-board {
	background: var(--bwtlp-surface);
	border: 1px solid var(--bwtlp-line);
	border-radius: var(--bwtlp-radius-lg);
	box-shadow: var(--bwtlp-shadow);
	overflow: hidden;
}

.bwtlp-board-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 210px;
	gap: 24px;
	padding: 13px 28px;
	border-bottom: 1px solid var(--bwtlp-line);
	background: var(--bwtlp-canvas);
	font-size: 0.68rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bwtlp-faint);
	font-weight: 700;
}

.bwtlp-board-head span:last-child {
	text-align: right;
}

.bwtlp-topics {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bwtlp-topic {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 210px;
	gap: 24px;
	align-items: center;
	padding: 22px 28px;
	border-bottom: 1px solid var(--bwtlp-line);
	position: relative;
	transition: background 0.3s var(--bwtlp-ease-out);
}

.bwtlp-topic:last-child {
	border-bottom: 0;
}

.bwtlp-topic:hover {
	background: #fbfbfd;
}

.bwtlp-topic-parent {
	background: linear-gradient(90deg, rgba(91, 22, 214, 0.07), transparent 60%);
}

.bwtlp-topic-parent::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: var(--bwtlp-accent);
}

.bwtlp-topic-label {
	font-size: 0.64rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bwtlp-accent);
	font-weight: 700;
	margin: 0 0 7px;
}

.bwtlp-main .bwtlp-topic h3 {
	margin: 0 0 6px;
	font-size: 1.18rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.bwtlp-topic p {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.58;
	color: var(--bwtlp-muted);
	max-width: 60ch;
}

.bwtlp-topic-metric {
	text-align: right;
}

.bwtlp-topic-count {
	font-family: var(--bwtlp-display);
	font-size: 1.9rem;
	line-height: 1;
	letter-spacing: -0.015em;
	font-variant-numeric: tabular-nums;
	display: block;
}

.bwtlp-topic-unit {
	display: block;
	font-size: 0.72rem;
	line-height: 1.35;
	color: var(--bwtlp-faint);
	margin-top: 6px;
}

.bwtlp-bar {
	height: 4px;
	border-radius: 999px;
	background: var(--bwtlp-accent-soft);
	margin-top: 12px;
	overflow: hidden;
}

.bwtlp-bar i {
	display: block;
	height: 100%;
	width: 0;
	border-radius: inherit;
	background: var(--bwtlp-accent);
	transition: width 1.2s var(--bwtlp-ease-out-soft);
	transition-delay: var(--bwtlp-delay, 0ms);
}

.bwtlp-topic.is-in .bwtlp-bar i {
	width: var(--bwtlp-bar, 0%);
}

.bwtlp-topic[hidden] {
	display: none;
}

.bwtlp-board-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 22px 28px;
	border-top: 1px solid var(--bwtlp-line);
	background: var(--bwtlp-canvas);
}

.bwtlp-board-foot p {
	margin: 0;
	color: var(--bwtlp-muted);
	font-size: 0.94rem;
	max-width: 56ch;
}

.bwtlp-board-foot strong {
	color: var(--bwtlp-ink);
	display: block;
}

/* -------------------------------------------------------------- triggers */

.bwtlp-triggers {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.bwtlp-trigger {
	background: var(--bwtlp-surface);
	border: 1px solid var(--bwtlp-line);
	border-radius: var(--bwtlp-radius-lg);
	padding: 24px 26px;
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: 16px;
	align-items: start;
	transition: transform 0.35s var(--bwtlp-ease-out), box-shadow 0.35s var(--bwtlp-ease-out);
}

.bwtlp-trigger:hover {
	transform: translateY(-3px);
	box-shadow: var(--bwtlp-shadow);
}

.bwtlp-trigger-icon {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--bwtlp-accent-soft);
	color: var(--bwtlp-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--bwtlp-display);
	font-size: 1.1rem;
}

.bwtlp-main .bwtlp-trigger h3 {
	margin: 0 0 6px;
	font-size: 1.04rem;
	font-weight: 600;
}

.bwtlp-trigger p {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.6;
	color: var(--bwtlp-muted);
}

.bwtlp-trigger small {
	display: inline-block;
	margin-top: 10px;
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--bwtlp-accent);
}

/* ------------------------------------------------------------------ flow */

.bwtlp-flow {
	list-style: none;
	margin: 48px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 14px;
	position: relative;
	counter-reset: bwtlp-step;
}

.bwtlp-flow::before {
	content: "";
	position: absolute;
	left: 8%;
	right: 8%;
	top: 34px;
	height: 2px;
	background: linear-gradient(90deg, var(--bwtlp-lilac), #e64ba4);
	opacity: 0.6;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 1.6s var(--bwtlp-ease-out-soft) 0.2s;
}

.bwtlp-flow.is-in::before {
	transform: scaleX(1);
}

.bwtlp-flow li {
	position: relative;
	padding: 0 4px;
}

.bwtlp-flow-node {
	counter-increment: bwtlp-step;
	width: 68px;
	height: 68px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 18px;
	background: var(--bwtlp-dark-2);
	border: 1px solid rgba(255, 255, 255, 0.18);
	color: #fff;
	font-family: var(--bwtlp-display);
	font-size: 1.3rem;
	position: relative;
	z-index: 1;
	box-shadow: 0 0 0 8px var(--bwtlp-dark);
}

.bwtlp-flow-node::before {
	content: "0" counter(bwtlp-step);
}

.bwtlp-flow li:last-child .bwtlp-flow-node {
	background: var(--bwtlp-accent);
	border-color: transparent;
}

.bwtlp-main .bwtlp-flow h3 {
	margin: 0 0 8px;
	font-size: 1rem;
	font-weight: 600;
	color: #fff;
	text-align: center;
	line-height: 1.3;
}

.bwtlp-flow p {
	margin: 0;
	font-size: 0.86rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.66);
	text-align: center;
}

/* ---------------------------------------------------------------- app UI */

.bwtlp-app {
	background: var(--bwtlp-surface);
	border: 1px solid var(--bwtlp-line);
	border-radius: var(--bwtlp-radius-lg);
	box-shadow: var(--bwtlp-shadow-lg);
	overflow: hidden;
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr);
	min-height: 420px;
	font-size: 0.8rem;
}

.bwtlp-app-nav {
	background: var(--bwtlp-canvas);
	border-right: 1px solid var(--bwtlp-line);
	padding: 18px 14px;
}

.bwtlp-app-brand {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	font-size: 0.86rem;
	margin-bottom: 20px;
	padding: 0 6px;
}

.bwtlp-app-brand i {
	width: 16px;
	height: 16px;
	border-radius: 4px;
	background: linear-gradient(135deg, var(--bwtlp-accent), #e64ba4);
}

.bwtlp-app-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 2px;
}

.bwtlp-app-nav li {
	padding: 8px 10px;
	border-radius: 8px;
	color: var(--bwtlp-muted);
	font-weight: 500;
}

.bwtlp-app-nav li.is-active {
	background: var(--bwtlp-surface);
	color: var(--bwtlp-accent);
	font-weight: 600;
	box-shadow: 0 1px 3px rgba(20, 21, 34, 0.06);
}

.bwtlp-app-main {
	padding: 18px 22px;
	min-width: 0;
}

.bwtlp-app-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.bwtlp-app-toolbar b {
	font-size: 0.98rem;
	font-weight: 600;
}

.bwtlp-app-toolbar span {
	color: var(--bwtlp-faint);
	display: block;
	margin-top: 2px;
}

.bwtlp-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 14px;
}

.bwtlp-chip {
	font-size: 0.72rem;
	font-weight: 600;
	padding: 5px 10px;
	border-radius: 999px;
	background: var(--bwtlp-accent-soft);
	color: var(--bwtlp-accent-dark);
}

.bwtlp-chip-on {
	background: var(--bwtlp-green-soft);
	color: var(--bwtlp-green);
}

.bwtlp-sheet {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--bwtlp-line);
	border-radius: 10px;
	overflow: hidden;
}

.bwtlp-sheet th {
	text-align: left;
	font-size: 0.64rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bwtlp-faint);
	font-weight: 700;
	padding: 10px 12px;
	background: var(--bwtlp-canvas);
	border-bottom: 1px solid var(--bwtlp-line);
	white-space: nowrap;
}

.bwtlp-sheet td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--bwtlp-line);
	color: var(--bwtlp-ink-2);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.bwtlp-sheet tr:last-child td {
	border-bottom: 0;
}

.bwtlp-sheet td:first-child {
	font-weight: 600;
	color: var(--bwtlp-ink);
}

.bwtlp-sheet .bwtlp-sample-mask {
	font-family: var(--bwtlp-mono);
	font-size: 0.74rem;
	color: var(--bwtlp-muted);
}

.bwtlp-sheet .bwtlp-sample-topic {
	display: inline-block;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--bwtlp-accent-soft);
	color: var(--bwtlp-accent-dark);
	font-size: 0.7rem;
	font-weight: 600;
}

.bwtlp-sheet .bwtlp-fresh {
	color: var(--bwtlp-green);
	font-weight: 600;
}

.bwtlp-app-points {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 18px;
}

.bwtlp-app-points li {
	display: grid;
	grid-template-columns: 40px 1fr;
	gap: 14px;
	align-items: start;
}

.bwtlp-app-points .bwtlp-trigger-icon {
	width: 40px;
	height: 40px;
	font-family: inherit;
}

.bwtlp-main .bwtlp-app-points h3 {
	margin: 0 0 5px;
	font-size: 1.02rem;
	font-weight: 600;
}

.bwtlp-app-points p {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.6;
	color: var(--bwtlp-muted);
}

/* ----------------------------------------------------------------- aimee */

.bwtlp-aimee-story {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin-top: 44px;
	counter-reset: bwtlp-scene;
}

.bwtlp-scene {
	background: var(--bwtlp-dark-2);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--bwtlp-radius-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.bwtlp-scene-screen {
	background: #0e0b1c;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	padding: 14px;
	min-height: 210px;
	font-size: 0.74rem;
	color: rgba(255, 255, 255, 0.78);
	position: relative;
}

.bwtlp-scene-bar {
	display: flex;
	gap: 5px;
	margin-bottom: 12px;
}

.bwtlp-scene-bar i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
}

.bwtlp-scene-line {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 9px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.05);
	margin-bottom: 6px;
}

.bwtlp-scene-line i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--bwtlp-lilac);
	flex-shrink: 0;
}

.bwtlp-scene-line.is-done i {
	background: #5ee1b4;
}

.bwtlp-scene-line b {
	color: #fff;
	font-weight: 600;
}

.bwtlp-scene-browser {
	background: #fff;
	color: var(--bwtlp-ink);
	border-radius: 8px;
	padding: 10px 12px;
	margin-top: 4px;
}

.bwtlp-scene-browser b {
	display: block;
	font-size: 0.78rem;
	font-weight: 600;
	margin-bottom: 3px;
}

.bwtlp-scene-browser span {
	color: var(--bwtlp-muted);
	font-size: 0.72rem;
	line-height: 1.5;
	display: block;
}

.bwtlp-scene-url {
	font-family: var(--bwtlp-mono);
	font-size: 0.66rem;
	color: rgba(255, 255, 255, 0.45);
	background: rgba(255, 255, 255, 0.06);
	border-radius: 6px;
	padding: 6px 9px;
	margin-bottom: 8px;
}

.bwtlp-scene-copy {
	padding: 18px 20px 22px;
	counter-increment: bwtlp-scene;
}

.bwtlp-scene-copy b {
	display: block;
	font-size: 0.64rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bwtlp-lilac);
	font-weight: 700;
	margin-bottom: 8px;
}

.bwtlp-scene-copy b::before {
	content: "0" counter(bwtlp-scene) "  ·  ";
}

.bwtlp-main .bwtlp-scene-copy h3 {
	margin: 0 0 7px;
	font-size: 1.02rem;
	font-weight: 600;
	color: #fff;
}

.bwtlp-scene-copy p {
	margin: 0;
	font-size: 0.88rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.66);
}

.bwtlp-integrations {
	margin-top: 34px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.bwtlp-integrations span:first-child {
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
	font-weight: 700;
	margin-right: 6px;
}

.bwtlp-integrations i {
	font-style: normal;
	font-size: 0.8rem;
	font-weight: 600;
	padding: 8px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	color: #fff;
}

.bwtlp-video-slot {
	margin-top: 30px;
	border-radius: var(--bwtlp-radius-lg);
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: #0e0b1c;
}

.bwtlp-video-slot video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

/* ------------------------------------------------------------- next step */

.bwtlp-ladder {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	counter-reset: bwtlp-rung;
}

.bwtlp-ladder li {
	background: var(--bwtlp-surface);
	border: 1px solid var(--bwtlp-line);
	border-radius: var(--bwtlp-radius-lg);
	padding: 28px;
	position: relative;
}

.bwtlp-rung {
	counter-increment: bwtlp-rung;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--bwtlp-accent);
	color: #fff;
	font-family: var(--bwtlp-display);
	font-size: 1rem;
	margin-bottom: 16px;
}

.bwtlp-rung::before {
	content: counter(bwtlp-rung);
}

.bwtlp-main .bwtlp-ladder h3 {
	margin: 0 0 8px;
	font-size: 1.08rem;
	font-weight: 600;
}

.bwtlp-ladder p {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.62;
	color: var(--bwtlp-muted);
}

.bwtlp-ladder-when {
	display: block;
	margin-top: 14px;
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--bwtlp-green);
}

/* ---------------------------------------------------------------- offers */

.bwtlp-offers {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
	gap: 18px;
	align-items: start;
}

.bwtlp-offer {
	background: var(--bwtlp-surface);
	border: 1px solid var(--bwtlp-line);
	border-radius: var(--bwtlp-radius-lg);
	padding: 34px;
	position: relative;
}

.bwtlp-offer-feature {
	border: 2px solid var(--bwtlp-accent);
	box-shadow: var(--bwtlp-shadow);
}

.bwtlp-offer-flag {
	position: absolute;
	top: -13px;
	left: 34px;
	background: var(--bwtlp-accent);
	color: #fff;
	font-size: 0.68rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 700;
	padding: 7px 14px;
	border-radius: 999px;
}

.bwtlp-main .bwtlp-offer h3 {
	font-family: var(--bwtlp-display);
	font-weight: 400;
	font-size: 1.7rem;
	letter-spacing: -0.015em;
	margin: 0 0 10px;
}

.bwtlp-offer-lede {
	margin: 0 0 22px;
	color: var(--bwtlp-muted);
	line-height: 1.6;
	font-size: 0.96rem;
}

.bwtlp-offer-list {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	display: grid;
	gap: 12px;
}

.bwtlp-offer-list li {
	display: grid;
	grid-template-columns: 20px 1fr;
	gap: 12px;
	font-size: 0.94rem;
	line-height: 1.55;
	color: var(--bwtlp-ink-2);
}

.bwtlp-offer-list svg {
	margin-top: 3px;
	color: var(--bwtlp-green);
}

.bwtlp-qualify {
	border-top: 1px solid var(--bwtlp-line);
	margin-top: 4px;
	padding-top: 20px;
}

.bwtlp-qualify p {
	margin: 0 0 10px;
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--bwtlp-faint);
}

.bwtlp-qualify ul {
	margin: 0;
	padding-left: 18px;
	display: grid;
	gap: 7px;
}

.bwtlp-qualify li {
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--bwtlp-muted);
}

/* ------------------------------------------------------------------- faq */

.bwtlp-faq-list details {
	background: var(--bwtlp-surface);
	border: 1px solid var(--bwtlp-line);
	border-radius: var(--bwtlp-radius);
	padding: 20px 24px;
	margin-bottom: 10px;
	transition: border-color 0.3s var(--bwtlp-ease-out);
}

.bwtlp-faq-list details[open] {
	border-color: rgba(91, 22, 214, 0.35);
}

.bwtlp-faq-list summary {
	cursor: pointer;
	font-weight: 600;
	font-size: 1.02rem;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}

.bwtlp-faq-list summary::-webkit-details-marker {
	display: none;
}

.bwtlp-faq-list summary::after {
	content: "";
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--bwtlp-accent);
	border-bottom: 2px solid var(--bwtlp-accent);
	transform: rotate(45deg);
	transition: transform 0.3s var(--bwtlp-ease-out);
	flex-shrink: 0;
}

.bwtlp-faq-list details[open] summary::after {
	transform: rotate(-135deg);
}

.bwtlp-faq-list details p {
	margin: 14px 0 0;
	color: var(--bwtlp-muted);
	line-height: 1.7;
	max-width: 72ch;
}

/* --------------------------------------------------------------- related */

.bwtlp-related-list {
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.bwtlp-main .bwtlp-related-list a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--bwtlp-surface);
	border: 1px solid var(--bwtlp-line);
	border-radius: 999px;
	padding: 12px 20px;
	text-decoration: none;
	color: var(--bwtlp-ink);
	font-weight: 600;
	font-size: 0.92rem;
	transition: border-color 0.3s var(--bwtlp-ease-out), color 0.3s var(--bwtlp-ease-out);
}

.bwtlp-main .bwtlp-related-list a:hover {
	border-color: var(--bwtlp-accent);
	color: var(--bwtlp-accent);
}

/* ----------------------------------------------------------------- modal */

.bwtlp-modal {
	position: fixed;
	inset: 0;
	z-index: 120;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(14, 10, 28, 0.62);
	backdrop-filter: blur(8px);
}

.bwtlp-modal.is-open {
	display: flex;
	animation: bwtlp-fade 0.3s var(--bwtlp-ease-out) both;
}

@keyframes bwtlp-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

.bwtlp-modal-panel {
	width: min(1080px, 100%);
	max-height: calc(100vh - 48px);
	overflow: auto;
	background: var(--bwtlp-surface);
	border-radius: var(--bwtlp-radius-lg);
	box-shadow: var(--bwtlp-shadow-lg);
	animation: bwtlp-fade-up 0.45s var(--bwtlp-ease-out) both;
}

.bwtlp-modal-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	padding: 26px 30px 20px;
	border-bottom: 1px solid var(--bwtlp-line);
	position: sticky;
	top: 0;
	background: var(--bwtlp-surface);
	z-index: 1;
}

.bwtlp-main .bwtlp-modal-head h2 {
	font-family: var(--bwtlp-display);
	font-weight: 400;
	font-size: 1.6rem;
	margin: 0 0 6px;
}

.bwtlp-modal-head p {
	margin: 0;
	color: var(--bwtlp-muted);
	font-size: 0.9rem;
}

.bwtlp-modal-close {
	appearance: none;
	background: var(--bwtlp-canvas);
	border: 1px solid var(--bwtlp-line-2);
	color: var(--bwtlp-ink);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.bwtlp-sample-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.88rem;
}

.bwtlp-sample-table th {
	text-align: left;
	font-size: 0.66rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bwtlp-faint);
	font-weight: 700;
	padding: 14px 16px;
	border-bottom: 1px solid var(--bwtlp-line);
	background: var(--bwtlp-canvas);
	white-space: nowrap;
}

.bwtlp-sample-table td {
	padding: 14px 16px;
	border-bottom: 1px solid var(--bwtlp-line);
	color: var(--bwtlp-ink-2);
	vertical-align: top;
}

.bwtlp-sample-table tr:hover td {
	background: #fbfbfd;
}

.bwtlp-sample-table td:first-child,
.bwtlp-sample-table th:first-child {
	padding-left: 30px;
}

.bwtlp-sample-role {
	color: var(--bwtlp-ink);
	font-weight: 600;
	display: block;
}

.bwtlp-sample-name {
	font-family: var(--bwtlp-mono);
	font-size: 0.78rem;
	color: var(--bwtlp-muted);
}

.bwtlp-sample-topic {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--bwtlp-accent-soft);
	color: var(--bwtlp-accent-dark);
	font-size: 0.76rem;
	font-weight: 600;
	white-space: nowrap;
}

.bwtlp-sample-mask {
	font-family: var(--bwtlp-mono);
	font-size: 0.8rem;
	color: var(--bwtlp-muted);
	letter-spacing: 0.04em;
}

.bwtlp-sample-fields {
	padding: 22px 30px 28px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.bwtlp-sample-fields span:first-child {
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bwtlp-faint);
	font-weight: 700;
	margin-right: 8px;
}

.bwtlp-sample-fields i {
	font-style: normal;
	font-size: 0.78rem;
	padding: 5px 11px;
	border-radius: 999px;
	background: var(--bwtlp-canvas);
	border: 1px solid var(--bwtlp-line);
	color: var(--bwtlp-ink-2);
}

/* ----------------------------------------------------------------- close */

.bwtlp-close {
	text-align: center;
	background:
		radial-gradient(700px 400px at 50% 110%, rgba(91, 22, 214, 0.12), transparent 70%),
		var(--bwtlp-canvas);
}

.bwtlp-close .bwtlp-lead {
	margin-left: auto;
	margin-right: auto;
}

.bwtlp-close .bwtlp-capture {
	max-width: 540px;
	margin: 40px auto 0;
	text-align: left;
}

.bwtlp-summary {
	margin: 48px auto 0;
	max-width: 66ch;
	font-size: 0.82rem;
	line-height: 1.6;
	color: var(--bwtlp-faint);
}

/* ------------------------------------------------------------------- hub */

.bwtlp-hub-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(262px, 1fr));
	gap: 14px;
}

.bwtlp-main .bwtlp-hub-grid a {
	display: grid;
	gap: 7px;
	background: var(--bwtlp-surface);
	border: 1px solid var(--bwtlp-line);
	border-radius: var(--bwtlp-radius-lg);
	padding: 24px 26px;
	text-decoration: none;
	color: var(--bwtlp-ink);
	transition: transform 0.35s var(--bwtlp-ease-out), box-shadow 0.35s var(--bwtlp-ease-out);
}

.bwtlp-main .bwtlp-hub-grid a:hover {
	transform: translateY(-3px);
	box-shadow: var(--bwtlp-shadow);
}

.bwtlp-hub-grid strong {
	font-size: 1.08rem;
	font-weight: 600;
}

.bwtlp-hub-count {
	color: var(--bwtlp-accent);
	font-weight: 600;
	font-size: 0.92rem;
}

.bwtlp-hub-meta {
	color: var(--bwtlp-faint);
	font-size: 0.82rem;
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 1040px) {
	.bwtlp-flow {
		grid-template-columns: 1fr;
		gap: 0;
		padding-left: 36px;
	}

	.bwtlp-flow::before {
		left: 33px;
		right: auto;
		top: 0;
		bottom: 0;
		width: 2px;
		height: auto;
		transform: scaleY(0);
		transform-origin: top center;
	}

	.bwtlp-flow.is-in::before {
		transform: scaleY(1);
	}

	.bwtlp-flow li {
		padding: 0 0 32px 34px;
	}

	.bwtlp-flow-node {
		position: absolute;
		left: -36px;
		top: -8px;
		width: 44px;
		height: 44px;
		font-size: 0.95rem;
		margin: 0;
		box-shadow: 0 0 0 6px var(--bwtlp-dark);
	}

	.bwtlp-main .bwtlp-flow h3,
	.bwtlp-flow p {
		text-align: left;
	}

	.bwtlp-aimee-story {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 980px) {
	.bwtlp-hero-grid,
	.bwtlp-audience-head,
	.bwtlp-split,
	.bwtlp-window-inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.bwtlp-audience-head {
		align-items: start;
	}

	.bwtlp-ladder,
	.bwtlp-triggers {
		grid-template-columns: 1fr;
	}

	.bwtlp-early {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.bwtlp-early-lead {
		position: static;
	}

	/* Two fixed bars on a phone is one too many; the banner scrolls away and
	   the bottom bar keeps the call to action in reach. */
	.bwtlp-banner {
		position: static;
	}

	.bwtlp-banner-inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.bwtlp-main .bwtlp-banner-btn {
		width: 100%;
	}

	.bwtlp-section {
		padding: 80px 0;
	}

	.bwtlp-app {
		grid-template-columns: 1fr;
	}

	.bwtlp-app-nav {
		display: none;
	}

	.bwtlp-plans {
		flex-wrap: wrap;
	}

	/* The form comes before the network on a phone: the argument has just
	   been made, and the visualization is a proof point, not the ask. */
	.bwtlp-hero-grid > .bwtlp-network {
		order: 2;
		min-height: 420px;
	}

	.bwtlp-hero-grid > div:last-child {
		order: 1;
	}
}

@media (max-width: 680px) {
	.bwtlp-container {
		padding: 0 16px;
	}

	.bwtlp-hero {
		padding: 52px 0 32px;
	}

	.bwtlp-section {
		padding: 64px 0;
	}

	.bwtlp-topic,
	.bwtlp-board-head {
		grid-template-columns: 1fr;
		gap: 14px;
		padding: 20px 18px;
	}

	.bwtlp-board-head span:last-child {
		display: none;
	}

	.bwtlp-topic-metric {
		text-align: left;
		display: flex;
		align-items: baseline;
		gap: 10px;
	}

	.bwtlp-topic-unit {
		margin-top: 0;
	}

	.bwtlp-bar {
		display: none;
	}

	.bwtlp-capture {
		padding: 24px 20px;
	}

	.bwtlp-hub {
		width: 200px;
	}

	.bwtlp-site small {
		display: none;
	}

	.bwtlp-sites,
	.bwtlp-network-svg {
		inset: 0 10px;
	}

	.bwtlp-site {
		max-width: 60%;
		font-size: 0.72rem;
	}

	.bwtlp-modal {
		padding: 0;
		align-items: flex-end;
	}

	.bwtlp-modal-panel {
		max-height: 92vh;
		border-radius: var(--bwtlp-radius-lg) var(--bwtlp-radius-lg) 0 0;
	}

	.bwtlp-sample-table th:nth-child(4),
	.bwtlp-sample-table td:nth-child(4),
	.bwtlp-sample-table th:nth-child(5),
	.bwtlp-sample-table td:nth-child(5) {
		display: none;
	}

	.bwtlp-app-main {
		overflow-x: auto;
	}

	.bwtlp-stickybar p {
		display: none;
	}

	.bwtlp-stickybar .bwtlp-btn {
		width: 100%;
	}

	.bwtlp-close {
		padding-bottom: 120px;
	}
}