/* Page layout. The mark is a hub with four satellites and the page has four services, so the
   satellites do the section marking. No numbering: four peers, not four steps. */

.bstk-shell { overflow-x: hidden; }

.bstk-inner {
	margin-inline: auto;
	max-width: 68rem;
	padding-inline: var(--bstk-gutter);
	width: 100%;
}

/* Header ------------------------------------------------------------------ */

.bstk-header {
	background: linear-gradient(to bottom, var(--bstk-bg), var(--bstk-bg-raised));
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	inset-block-start: 0;
	inset-inline: 0;
	position: fixed;
	transform: translateY(-100%);
	transition: transform 320ms ease;
	z-index: 10;
}

.bstk-header[data-visible="true"] { transform: translateY(0); }

.bstk-header .bstk-inner {
	align-items: center;
	display: flex;
	min-height: 4rem;
}

.bstk-header .bstk-lockup { --bstk-mark-h: 1.9rem; }

.bstk-header a {
	color: inherit;
	text-decoration: none;
}

/* Banner ------------------------------------------------------------------ */

.bstk-banner {
	align-items: center;
	background: linear-gradient(160deg, var(--bstk-bg) 0%, var(--bstk-bg-raised) 100%);
	display: flex;
	min-height: min(88svh, 40rem);
	padding-block: var(--bstk-band-y);
}

.bstk-banner .bstk-lockup { --bstk-mark-h: clamp(2.5rem, 5.5vw, 4.75rem); }

.bstk-tagline {
	color: var(--bstk-body);
	font-size: var(--bstk-step-3);
	font-weight: 400;
	letter-spacing: 0.01em;
	line-height: 1.3;
	margin-block-start: clamp(1.75rem, 4vw, 3rem);
	max-width: 30ch;
}

/* Services ---------------------------------------------------------------- */

.bstk-service {
	background-color: var(--bstk-band);
	padding-block: var(--bstk-band-y);
}

/* Sizes and tints are the mark's four satellites, in its own order: r8.5 and r10 mid,
   r7 and r7.5 light. Keyed on position within .bstk-services so the banner, which is also a
   section, cannot shift the sequence. */
.bstk-services > .bstk-service:nth-child(1) { --bstk-band: var(--bstk-band-1); --bstk-sat: var(--bstk-sat-mid);   --bstk-sat-size: 2.55rem; }
.bstk-services > .bstk-service:nth-child(2) { --bstk-band: var(--bstk-band-2); --bstk-sat: var(--bstk-sat-mid);   --bstk-sat-size: 3rem; }
.bstk-services > .bstk-service:nth-child(3) { --bstk-band: var(--bstk-band-3); --bstk-sat: var(--bstk-sat-light); --bstk-sat-size: 2.1rem; }
.bstk-services > .bstk-service:nth-child(4) { --bstk-band: var(--bstk-band-4); --bstk-sat: var(--bstk-sat-light); --bstk-sat-size: 2.25rem; }

/* The connector runs from the page edge into the satellite, at the mark's own stroke width. */
.bstk-service .bstk-inner {
	column-gap: clamp(1.25rem, 3vw, 2.5rem);
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
}

/* Heading above body, not beside it: these headings are long enough that a side column
   breaks them across four lines. Tried and reverted. */
.bstk-service p { margin-block-start: 1rem; }

.bstk-service-mark {
	--bstk-mark-drop: 0.3em;
	padding-block-start: var(--bstk-mark-drop);
	position: relative;
}

/* The connector runs in from the page edge and stops dead on the satellite's centre,
   at the same stroke width the mark uses between its own nodes. */
.bstk-service-mark::before {
	background-color: var(--bstk-node);
	block-size: var(--bstk-link-width);
	content: "";
	inline-size: 100vw;
	inset-block-start: calc(var(--bstk-mark-drop) + var(--bstk-sat-size) / 2 - var(--bstk-link-width) / 2);
	inset-inline-end: calc(100% - var(--bstk-sat-size) / 2);
	position: absolute;
}

.bstk-satellite {
	color: var(--bstk-sat);
	display: block;
	height: var(--bstk-sat-size);
	position: relative;
	width: var(--bstk-sat-size);
}


/* Footer ------------------------------------------------------------------ */

.bstk-footer {
	background-color: var(--bstk-bg);
	border-block-start: 1px solid rgba(255, 255, 255, 0.1);
	padding-block: var(--bstk-band-y) 3rem;
}

.bstk-footer-grid {
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	margin-block-start: clamp(2rem, 5vw, 3.5rem);
}

.bstk-contact {
	display: grid;
	gap: 1.25rem;
}

.bstk-contact li {
	align-items: start;
	display: grid;
	gap: 0.85rem;
	grid-template-columns: 1.5rem 1fr;
}

.bstk-icon {
	color: var(--bstk-node);
	height: 1.5rem;
	width: 1.5rem;
}

.bstk-at {
	color: currentColor;
	height: 1.15em;
	/* The glyph is inset in a 24-unit box; pull the box in so the address reads as one string. */
	margin-inline: -0.12em;
	vertical-align: -0.24em;
	width: 1.15em;
}

.bstk-form { min-width: 0; }
.bstk-form iframe { max-width: 100%; width: 100%; }

.bstk-colophon {
	border-block-start: 1px solid rgba(255, 255, 255, 0.12);
	color: var(--bstk-sat-light);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--bstk-step-0);
	gap: 0.5rem 2rem;
	margin-block-start: clamp(3rem, 7vw, 5rem);
	padding-block-start: 1.5rem;
}

/* The one orchestrated moment: the mark arrives once, on load. */
@media (prefers-reduced-motion: no-preference) {
	.bstk-banner .bstk-mark line {
		stroke-dasharray: 60;
		stroke-dashoffset: 60;
		animation: bstk-draw 620ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
	}

	.bstk-banner .bstk-mark circle,
	.bstk-banner .bstk-mark path {
		animation: bstk-arrive 420ms ease-out backwards;
	}

	.bstk-banner .bstk-mark line:nth-child(2)  { animation-delay: 80ms; }
	.bstk-banner .bstk-mark line:nth-child(3)  { animation-delay: 160ms; }
	.bstk-banner .bstk-mark line:nth-child(4)  { animation-delay: 240ms; }
	.bstk-banner .bstk-mark > g ~ circle       { animation-delay: 380ms; }
	.bstk-banner .bstk-mark > g ~ path         { animation-delay: 560ms; }
}

@keyframes bstk-draw  { to { stroke-dashoffset: 0; } }
@keyframes bstk-arrive { from { opacity: 0; transform: scale(0.82); } }

.bstk-banner .bstk-mark circle,
.bstk-banner .bstk-mark path { transform-box: fill-box; transform-origin: center; }

/* The lockup is the page's h1; the wordmark inside it carries the text. */
.bstk-banner-title {
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: normal;
	line-height: inherit;
}

/* Splash ------------------------------------------------------------------ */

.bstk-splash-open,
.bstk-splash-open body { overflow: hidden; }

.bstk-splash-screen {
	background-color: var(--bstk-bg);
	display: grid;
	inset: 0;
	opacity: 1;
	place-items: center;
	position: fixed;
	/* Must match FADE_MS in splash.js: the 800ms hold plus this has to finish inside the mark's
	   rest phase, which closes when the second orbit opens at 2000ms. */
	transition: opacity 400ms ease;
	z-index: 100;
}

/* Set by the inline script in base.webc before first paint, so a second load in the same browser
   session never flashes the overlay on its way to being removed by splash.js. */
.bstk-splash-seen .bstk-splash-screen { display: none; }

.bstk-splash-screen.is-leaving {
	opacity: 0;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.bstk-splash-screen { transition-duration: 1ms; }
}

/* Product page ------------------------------------------------------------ */

/* A product page has no banner, so the header is pinned rather than revealed (site.js), and the
   first section has to clear it. .bstk-header min-height is 4rem. */
.bstk-product-hero {
	background: linear-gradient(160deg, var(--bstk-bg) 0%, var(--bstk-bg-raised) 100%);
	padding-block: calc(4rem + var(--bstk-band-y)) var(--bstk-band-y);
}

/* Two kickers, one colour and one size. .bstk-kicker is an eyebrow phrase in spaced caps;
   .bstk-kicker-product holds a product name and takes the lockup face from .bstk-productmark
   instead, which is why the caps and the tracking are split out below rather than shared. */
.bstk-kicker,
.bstk-kicker-product {
	color: var(--bstk-orb);
	font-size: var(--bstk-step-0);
}

.bstk-kicker {
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* The name only; the face is .bstk-productmark. */
.bstk-product-name {
	font-size: var(--bstk-step-4);
	margin-block-start: 0.5rem;
}

.bstk-product-tagline {
	color: var(--bstk-type);
	font-size: var(--bstk-step-3);
	line-height: 1.25;
	margin-block-start: clamp(1rem, 2.5vw, 1.75rem);
	max-width: 24ch;
}

.bstk-lede {
	border-block-start: var(--bstk-link-width) solid var(--bstk-node);
	margin-block-start: clamp(2rem, 5vw, 3.25rem);
	max-width: var(--bstk-measure);
	padding-block-start: clamp(1.5rem, 3vw, 2rem);
}

.bstk-lede p + p { margin-block-start: 1rem; }

/* Benefits ---------------------------------------------------------------- */

.bstk-benefits {
	background-color: var(--bstk-bg);
	padding-block: var(--bstk-band-y);
}

.bstk-benefit-grid {
	display: grid;
	gap: clamp(2rem, 4vw, 3rem);
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	margin-block-start: clamp(2rem, 5vw, 3rem);
}

/* The satellite marks a benefit the way it marks a band, one size down. */
.bstk-benefit {
	--bstk-sat: var(--bstk-sat-mid);
	--bstk-sat-size: 1.5rem;
	border-block-start: 1px solid rgba(255, 255, 255, 0.12);
	padding-block-start: 1.25rem;
}

.bstk-benefit h3 { margin-block-start: 0.85rem; }
.bstk-benefit p { margin-block-start: 0.5rem; }

/* Terms ------------------------------------------------------------------- */

.bstk-terms {
	background-color: var(--bstk-bg);
	padding-block: var(--bstk-band-y);
}

.bstk-terms-intro { margin-block-start: 1rem; }

.bstk-term-list {
	display: grid;
	gap: 1.75rem;
	margin-block-start: clamp(2rem, 4vw, 2.75rem);
}

.bstk-term {
	border-inline-start: var(--bstk-link-width) solid var(--bstk-node);
	padding-inline-start: clamp(1rem, 2.5vw, 1.75rem);
}

.bstk-term dt {
	color: var(--bstk-type);
	font-weight: 600;
}

/* dd is not a p, so the measure has to be set here rather than inherited from base.css. */
.bstk-term dd {
	margin: 0.35rem 0 0;
	max-width: var(--bstk-measure);
}

/* Document index ---------------------------------------------------------- */

/* A rule rather than a fill: this is an index of other pages, not another band of argument, so it
   uses the footer's separator idiom. --bstk-bg-raised is only ever a gradient endpoint. */
.bstk-documents {
	background-color: var(--bstk-bg);
	border-block-start: 1px solid rgba(255, 255, 255, 0.1);
	padding-block: var(--bstk-band-y);
}

.bstk-documents-intro { margin-block-start: 1rem; }

.bstk-document-list {
	display: grid;
	gap: 1.5rem 2.5rem;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	list-style: none;
	margin-block-start: clamp(2rem, 4vw, 2.75rem);
	padding: 0;
}

.bstk-document-list li {
	border-inline-start: var(--bstk-link-width) solid var(--bstk-sat-mid);
	padding-inline-start: clamp(1rem, 2.5vw, 1.75rem);
}

.bstk-document-list a {
	color: var(--bstk-type);
	font-weight: 600;
	text-decoration: none;
}

.bstk-document-list a:hover,
.bstk-document-list a:focus-visible { text-decoration: underline; }

/* span is not a p, so the measure has to be set here rather than inherited from base.css. */
.bstk-document-list span {
	color: var(--bstk-sat-light);
	display: block;
	margin-block-start: 0.35rem;
	max-width: var(--bstk-measure);
}

/* Call to action ---------------------------------------------------------- */

.bstk-cta {
	background: linear-gradient(200deg, var(--bstk-bg-raised) 0%, var(--bstk-bg) 100%);
	padding-block: var(--bstk-band-y);
}

.bstk-cta p { margin-block-start: 1rem; }

.bstk-button {
	background-color: var(--bstk-node);
	border-radius: 2px;
	color: var(--bstk-type);
	display: inline-block;
	font-weight: 600;
	margin-block-start: clamp(1.5rem, 3vw, 2.25rem);
	padding: 0.85rem 1.75rem;
	text-decoration: none;
}

.bstk-button:hover {
	background-color: var(--bstk-orb);
	color: var(--bstk-bg);
}

/* The way out of a service band on the home page. */
.bstk-service-more a {
	color: var(--bstk-type);
	font-weight: 600;
}

/* Legal and documentation pages ------------------------------------------- */

/* Contract text is read differently to marketing copy: a reader is looking for one clause, not
   moving through the page. So it gets a tighter measure, visible heading hierarchy, and clause
   numbers that stay put. */
.bstk-legal {
	background-color: var(--bstk-bg);
	padding-block: calc(4rem + var(--bstk-band-y)) var(--bstk-band-y);
}

.bstk-legal h1 { margin-block-start: 0.5rem; }

/* The edition a reader is bound by. Set before the document so it is answered before it is asked. */
.bstk-edition {
	border-block: 1px solid rgba(255, 255, 255, 0.12);
	display: grid;
	gap: 0.5rem 2rem;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	margin-block: clamp(1.75rem, 4vw, 2.5rem);
	padding-block: 1.25rem;
}

.bstk-edition dt {
	color: var(--bstk-sat-light);
	font-size: var(--bstk-step-0);
}

.bstk-edition dd {
	color: var(--bstk-type);
	font-weight: 600;
	margin: 0;
}

.bstk-unpublished {
	border-inline-start: var(--bstk-link-width) solid var(--bstk-sat-light);
	max-width: none;
	padding: 0.75rem 0 0.75rem 1.25rem;
}

.bstk-document {
	font-size: 1rem;
	max-width: 46rem;
}

.bstk-document h2 {
	font-size: var(--bstk-step-2);
	margin-block-start: clamp(2.5rem, 5vw, 3.5rem);
}

.bstk-document h3 {
	font-size: var(--bstk-step-1);
	margin-block-start: 2rem;
}

.bstk-document h4 {
	color: var(--bstk-type);
	font-size: 1rem;
	font-weight: 600;
	margin-block-start: 1.5rem;
}

.bstk-document p { margin-block-start: 0.85rem; max-width: none; }
.bstk-document strong { color: var(--bstk-type); }

/* The nested clause runs — "(i)", "(ii)" under an "(a)" — are fenced divs in the source, carried
   through by the exporter. They are not lists: the source owns its own numbering. */
.bstk-clause-indent { padding-inline-start: clamp(1rem, 3vw, 2rem); }

.bstk-document hr {
	border: 0;
	border-block-start: 1px solid rgba(255, 255, 255, 0.12);
	margin-block: clamp(2rem, 4vw, 3rem);
}

.bstk-document table {
	border-collapse: collapse;
	font-size: var(--bstk-step-0);
	margin-block-start: 1.25rem;
	width: 100%;
}

.bstk-document th {
	color: var(--bstk-type);
	text-align: start;
}

.bstk-document th,
.bstk-document td {
	border-block-end: 1px solid rgba(255, 255, 255, 0.12);
	padding: 0.6rem 1rem 0.6rem 0;
	vertical-align: top;
}

.bstk-document ul,
.bstk-document ol { margin-block-start: 0.85rem; padding-inline-start: 1.5rem; }
.bstk-document ul { list-style: disc; }
.bstk-document li { margin-block-start: 0.35rem; }