/**
 * Basecamp Landing Page — /training-basecamp/ (work order S152)
 *
 * Paired with page-templates/page-basecamp-template.php. The template is a
 * standalone document, so this sheet carries its own reset rather than building
 * on the theme's. Values come from the approved design canvas: the 1440 desktop
 * artboard above 900px, the 390 mobile artboard below it.
 */

:root {
	--bc-ink:        #0C0004;  /* page ground */
	--bc-ink-deep:   #000000;  /* press bar and footer */
	--bc-card-dark:  #14090d;
	--bc-cream:      #F4F1EC;  /* light testimonial cards */
	--bc-cream-line: #DED8CF;
	--bc-gold:       #E2B72D;
	--bc-gold-deep:  #C79A16;
	--bc-gold-lift:  #f0cb52;
	--bc-green:      #2D954E;
	--bc-slate:      #3E3D43;
	--bc-mute:       #6b655f;

	--bc-gutter: 56px;
	--bc-max:    1180px;
}

/* ── Reset ─────────────────────────────────────────────────────────────────── */

body.basecamp-landing {
	margin: 0;
	background: var(--bc-ink);
	color: #fff;
	font-family: Montserrat, "Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
.basecamp-landing *,
.basecamp-landing *::before,
.basecamp-landing *::after { box-sizing: border-box; }

/* :where() holds these at zero specificity so any single-class rule below wins.
   Written as `.basecamp-landing p` they outrank `.bc-pain__text`, which silently
   ate its `margin: 0 auto` and left the pain line flush against the gutter. */
:where(.basecamp-landing) img { max-width: 100%; }
:where(.basecamp-landing) p   { margin: 0; }
:where(.basecamp-landing) h1,
:where(.basecamp-landing) h2,
:where(.basecamp-landing) h3  { margin: 0; font-weight: 700; }
.basecamp-landing a    { color: var(--bc-gold); text-decoration: none; }
.basecamp-landing a:hover { color: var(--bc-gold-lift); }
:where(.basecamp-landing) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

.bc-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 12px 20px;
	background: var(--bc-gold);
	color: #000;
	font-weight: 700;
}
.bc-skip:focus { left: 0; }

.basecamp-landing :focus-visible {
	outline: 2px solid var(--bc-gold);
	outline-offset: 3px;
}

/* ── Shared ────────────────────────────────────────────────────────────────── */

/* Scoped to the body class so it outranks the `.basecamp-landing a` reset above,
   which would otherwise paint the label gold on a gold button. */
.basecamp-landing a.bc-cta,
.bc-cta {
	display: inline-block;
	background: var(--bc-gold);
	color: #000;
	font-weight: 800;
	font-size: 22px;
	line-height: 1.1;
	word-spacing: 3px;
	padding: 20px 34px;
	border-radius: 5px;
	text-align: center;
	transition: background-color .15s ease;
}
.basecamp-landing a.bc-cta:hover,
.bc-cta:hover { background: var(--bc-gold-lift); color: #000; }

.bc-label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 5px;
	text-transform: uppercase;
	color: var(--bc-gold);
}
.bc-label--center { text-align: center; }

/* ── 1. Hero ───────────────────────────────────────────────────────────────── */

.bc-hero {
	position: relative;
	height: 860px;
	overflow: hidden;
}
.bc-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.bc-hero__bg--mobile { display: none; }

/* Darkens the left third so the headline holds contrast over the photo. */
.bc-hero__wash {
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(12,0,4,.9) 0%, rgba(12,0,4,.62) 30%, rgba(12,0,4,.1) 48%, rgba(12,0,4,0) 100%);
}
/* Carries the photo into the black of the next section. */
.bc-hero__fade {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(12,0,4,.45) 0%, rgba(12,0,4,0) 30%, rgba(12,0,4,.88) 100%);
}

.bc-hero__logo {
	position: absolute;
	left: 80px;
	top: 64px;
	z-index: 2;
}
.bc-hero__logo-img { width: 152px; height: auto; display: block; }

.bc-hero__copy {
	position: absolute;
	left: 80px;
	top: 230px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 26px;
	align-items: flex-start;
}
/* The parent theme sets h1/h2/h3 font-size, font-weight and colour with
   !important (child-theme.min.css: `h2, h3 { color: #BA4542 !important }` and a
   per-heading size ramp). No amount of specificity beats that, so the three
   headings on this page restate those properties the same way. Nothing else on
   the page needs it — every other override here wins on specificity alone. */
.basecamp-landing .bc-hero__h1 {
	max-width: 600px;
	font-size: 50px !important;
	font-weight: 700 !important;
	line-height: 1.16;
	letter-spacing: -.5px;
	color: #fff !important;
	text-wrap: pretty;
}
.bc-hero__sub {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 3.6px;
	text-transform: uppercase;
	color: var(--bc-gold);
}
.bc-hero__subtext {
	max-width: 430px;
	font-size: 15px;
	font-weight: 300;
	line-height: 1.6;
	color: rgba(255,255,255,.72);
}

/* Deliberately bleeds off the right edge: the device is a cue, not a spec sheet,
   and cropping it keeps the climber clear of it. */
.bc-hero__phone {
	position: absolute;
	right: -150px;
	top: 118px;
	z-index: 2;
	width: 400px;
	height: auto;
	filter: drop-shadow(-24px 30px 56px rgba(0,0,0,.7));
}

/* ── 2. Featured on ────────────────────────────────────────────────────────── */

.bc-press {
	background: var(--bc-ink-deep);
	padding: 34px var(--bc-gutter) 38px;
	display: flex;
	flex-direction: column;
	gap: 22px;
	align-items: center;
}
.bc-press__row {
	display: flex;
	gap: 64px;
	align-items: flex-end;
	justify-content: center;
	flex-wrap: wrap;
	max-width: var(--bc-max);
}
/* Per-logo width, set inline, so all four read as one visual weight. */
.bc-press__logo { width: var(--bc-logo-w, 200px); height: auto; }

/* ── 3. Pain line ──────────────────────────────────────────────────────────── */

.bc-pain { background: var(--bc-ink); padding: 78px var(--bc-gutter) 76px; }
.bc-pain__text {
	margin: 0 auto;
	max-width: 900px;
	font-size: 40px;
	line-height: 1.3;
	font-weight: 600;
	text-align: center;
	text-wrap: pretty;
}
.bc-pain__accent { display: block; margin-top: 10px; color: var(--bc-gold); }

/* ── 4. Welcome video ──────────────────────────────────────────────────────── */

.bc-video {
	background: var(--bc-ink);
	padding: 0 var(--bc-gutter) 84px;
	display: flex;
	flex-direction: column;
	gap: 28px;
	align-items: center;
}
.bc-video__frame {
	position: relative;
	width: 880px;
	max-width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 5px;
	overflow: hidden;
	background: #000;
}
.bc-video__play-wrap {
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
}
.bc-video__poster { width: 100%; height: 100%; object-fit: cover; display: block; }
.bc-video__scrim {
	position: absolute;
	inset: 0;
	background: rgba(12,0,4,.24);
	display: flex;
	align-items: center;
	justify-content: center;
}
.bc-video__play {
	width: 92px;
	height: 92px;
	border-radius: 999px;
	background: var(--bc-gold);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform .15s ease;
}
.bc-video__play-wrap:hover .bc-video__play { transform: scale(1.06); }
.bc-video__duration {
	position: absolute;
	left: 18px;
	bottom: 15px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .6px;
	color: rgba(255,255,255,.9);
}
.bc-video__player { width: 100%; height: 100%; border: 0; display: block; }

/* ── 5. Testimonials ───────────────────────────────────────────────────────── */

.bc-testimonials {
	background: var(--bc-ink);
	padding: 0 0 84px;
	display: flex;
	flex-direction: column;
	gap: 28px;
}

/* One scrolling row rather than a grid: twenty quotes in a grid is a wall, and
   a row invites a swipe on the phone where most of this traffic lands. */
.bc-cardrow {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	overflow-x: auto;
	padding: 0 var(--bc-gutter) 16px;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: rgba(226,183,45,.4) transparent;
}
.bc-cardrow > * { flex: 0 0 auto; scroll-snap-align: start; }
.bc-cardrow::-webkit-scrollbar { height: 8px; }
.bc-cardrow::-webkit-scrollbar-thumb { background: rgba(226,183,45,.4); border-radius: 4px; }

.bc-card {
	width: 372px;
	height: 340px;
	border-radius: 5px;
	overflow: hidden;
	padding: 24px;
	display: flex;
	flex-direction: column;
	background: var(--bc-card-dark);
	border: 1px solid rgba(226,183,45,.34);
}
.bc-card--light {
	background: var(--bc-cream);
	border-color: rgba(12,0,4,.12);
	color: var(--bc-ink);
}
.bc-card.is-clipped { cursor: pointer; }

.bc-card__top {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.bc-card__mark {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 40px;
	line-height: .55;
	color: var(--bc-gold);
}
.bc-card--light .bc-card__mark { color: var(--bc-gold-deep); }
.bc-card__source {
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: rgba(255,255,255,.42);
}
.bc-card--light .bc-card__source { color: #8a837e; }

.bc-card__quote {
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
	position: relative;
	padding: 14px 0 18px;
}
.bc-card__text {
	font-size: 14.5px;
	line-height: 1.5;
	color: #fff;
	text-wrap: pretty;
}
.bc-card--light .bc-card__text { color: var(--bc-ink); }

/* The last visible line fades out, so a clipped card reads as continuing
   rather than as a quote that stops mid-sentence. */
.bc-card.is-clipped .bc-card__quote::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 62px;
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(20,9,13,0) 0%, rgba(20,9,13,.88) 55%, var(--bc-card-dark) 100%);
}
.bc-card--light.is-clipped .bc-card__quote::after {
	background: linear-gradient(to bottom, rgba(244,241,236,0) 0%, rgba(244,241,236,.88) 55%, var(--bc-cream) 100%);
}

.bc-card__foot {
	flex: 0 0 auto;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 10px;
	padding-top: 12px;
	border-top: 1px solid rgba(255,255,255,.14);
}
.bc-card--light .bc-card__foot { border-top-color: var(--bc-cream-line); }
.bc-card__who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bc-card__name { font-size: 13.5px; font-weight: 700; color: var(--bc-gold); }
.bc-card--light .bc-card__name { color: var(--bc-ink); }
.bc-card__role { font-size: 11.5px; font-weight: 300; color: rgba(255,255,255,.6); }
.bc-card--light .bc-card__role { color: var(--bc-mute); }

.bc-card__expand {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border-radius: 4px;
	display: none;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(226,183,45,.45);
	color: var(--bc-gold);
}
.bc-card--light .bc-card__expand { border-color: rgba(12,0,4,.22); color: var(--bc-ink); }
.bc-card.is-clipped .bc-card__expand { display: flex; }

/* Progress pills under the scrolling row. Three, because the row reads as
   beginning / middle / end rather than as twenty discrete pages — a dot per card
   would be twenty dots nobody counts. Each is a real button: they page the row. */
.bc-scrollhint {
	display: flex;
	gap: 7px;
	justify-content: center;
	align-items: center;
	padding: 2px var(--bc-gutter) 0;
}
.bc-scrollhint[hidden] { display: none; }
.bc-scrollhint__pill {
	width: 9px;
	height: 3px;
	border-radius: 2px;
	background: rgba(255,255,255,.28);
	transition: width .25s ease, background-color .25s ease;
}
.bc-scrollhint__pill.is-active { width: 26px; background: var(--bc-gold); }
.bc-scrollhint__pill:hover { background: rgba(255,255,255,.5); }
.bc-scrollhint__pill.is-active:hover { background: var(--bc-gold-lift); }
.bc-scrollhint__label {
	margin-left: 10px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: rgba(255,255,255,.45);
	transition: opacity .25s ease;
}
/* Once the row is at its end the prompt is no longer true, so it fades out. */
.bc-scrollhint.is-ended .bc-scrollhint__label { opacity: 0; }
.bc-scrollhint__narrow { display: none; }

.bc-testimonials__cta { display: flex; justify-content: center; padding: 10px var(--bc-gutter) 0; }

/* ── Full-quote dialog ─────────────────────────────────────────────────────── */

.bc-modal {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.bc-modal[hidden] { display: none; }
.bc-modal__backdrop { position: absolute; inset: 0; background: rgba(6,0,2,.78); }
.bc-modal__panel {
	position: relative;
	width: 100%;
	max-width: 560px;
	max-height: 80vh;
	overflow-y: auto;
	padding: 28px;
	border-radius: 6px;
	background: var(--bc-cream);
	color: var(--bc-ink);
	box-shadow: 0 24px 60px rgba(0,0,0,.6);
}
.bc-modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 32px;
	height: 32px;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--bc-ink);
}
.bc-modal__close:hover { background: rgba(12,0,4,.07); }
.bc-modal__source {
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: #8a837e;
	margin-bottom: 14px;
	padding-right: 36px;
}
.bc-modal__source:empty { display: none; }
.bc-modal__quote { font-size: 16px; line-height: 1.6; text-wrap: pretty; }
.bc-modal__who {
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid var(--bc-cream-line);
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.bc-modal__name { font-size: 14px; font-weight: 700; }
.bc-modal__role { font-size: 12px; font-weight: 300; color: var(--bc-mute); }
.bc-modal__role:empty { display: none; }
body.bc-modal-open { overflow: hidden; }

/* ── 6. What's inside ──────────────────────────────────────────────────────── */

.bc-tiles {
	background: var(--bc-ink);
	padding: 0 var(--bc-gutter) 88px;
	max-width: calc(var(--bc-max) + var(--bc-gutter) * 2);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 32px;
}
.basecamp-landing .bc-tiles__heading {
	font-size: 34px !important;
	font-weight: 600 !important;
	color: #fff !important;
	line-height: 1.28;
	text-align: center;
}
.bc-tilegroup { display: flex; flex-direction: column; gap: 11px; }

.basecamp-landing .bc-seclabel {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 10.5px !important;
	font-weight: 600 !important;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: rgba(226,183,45,.88) !important;
}
.basecamp-landing .bc-seclabel::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: rgba(226,183,45,.22);
}

.bc-tilegrid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

.bc-tile { position: relative; margin: 0; aspect-ratio: 1 / 1; }
/* A sliver peeking out below each tile — these are playlists, not single videos. */
.bc-tile__stack {
	position: absolute;
	left: 7px;
	right: 7px;
	bottom: -4px;
	height: 4px;
	border-radius: 0 0 4px 4px;
	background: rgba(226,183,45,.32);
}
.bc-tile__shot {
	position: relative;
	display: block;
	height: 100%;
	border-radius: 4px;
	overflow: hidden;
}
.bc-tile__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bc-tile__scrim {
	position: absolute;
	inset: auto 0 0 0;
	height: 64%;
	background: linear-gradient(to top, rgba(12,0,4,.94) 6%, rgba(12,0,4,.52) 48%, rgba(12,0,4,0) 100%);
}
/* Pale photos need a heavier gradient or the title disappears into them.
   It runs the full height and finishes at zero alpha: ending at .12 part-way up
   left a 12%-opacity step against the bare image, which read as a hard line
   across the sky on every bright tile. The stops below 74% are unchanged, so the
   darkening behind the caption is exactly what it was. */
.bc-tile--bright .bc-tile__scrim {
	height: 100%;
	background: linear-gradient(to top,
		rgba(12,0,4,.97) 7%,
		rgba(12,0,4,.72) 37%,
		rgba(12,0,4,.12) 74%,
		rgba(12,0,4,0) 100%);
}
.bc-tile__name {
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 13px;
	color: #fff;
	font-weight: 800;
	font-size: 14px;
	line-height: 1.18;
	letter-spacing: .7px;
	text-transform: uppercase;
	text-wrap: pretty;
}
.bc-tile__name::before {
	content: "";
	display: block;
	width: 22px;
	height: 2px;
	border-radius: 1px;
	background: var(--bc-gold);
	margin-bottom: 8px;
}

/* ── 7. Annual offer ───────────────────────────────────────────────────────── */

.bc-annual { background: #fff; color: var(--bc-ink); padding: 38px var(--bc-gutter) 40px; }
.bc-annual__inner {
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	gap: 44px;
	align-items: center;
}
.bc-annual__price { flex: 0 0 336px; display: flex; flex-direction: column; gap: 9px; }
.bc-annual__label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 3px;
	text-transform: uppercase;
	white-space: nowrap;
}
.bc-annual__figures { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.bc-annual__amount { font-size: 44px; font-weight: 700; line-height: 1; }
.bc-annual__amount .woocommerce-Price-amount { font-size: inherit; font-weight: inherit; }
.bc-annual__pm { font-size: 17px; color: var(--bc-slate); white-space: nowrap; }
.bc-annual__badge {
	background: var(--bc-green);
	color: #fff;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 1.2px;
	padding: 6px 10px;
	border-radius: 3px;
	white-space: nowrap;
}
.bc-annual__tagline { font-size: 16px; font-weight: 600; }

.bc-annual__features {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 9px;
}
.bc-annual__feature {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--bc-slate);
}
.bc-annual__feature svg { flex: 0 0 auto; margin-top: 3px; }
.bc-annual__feature--plus { font-weight: 600; color: var(--bc-ink); }

.bc-annual__cta { flex: 0 0 auto; font-size: 18px; font-weight: 700; white-space: nowrap; }

/* ── 8. Closing CTA ────────────────────────────────────────────────────────── */

.bc-final {
	background: var(--bc-ink);
	padding: 74px var(--bc-gutter) 78px;
	display: flex;
	flex-direction: column;
	gap: 22px;
	align-items: center;
	text-align: center;
}
.bc-final .bc-cta { font-size: 17px; }
.bc-final__subtext { font-size: 13.5px; font-weight: 300; color: rgba(255,255,255,.8); }

/* ── Footer ────────────────────────────────────────────────────────────────── */

.bc-footer { background: var(--bc-ink-deep); padding: 40px var(--bc-gutter) 36px; }
.bc-footer__inner {
	max-width: var(--bc-max);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
}
.bc-footer__logo { width: 132px; height: auto; opacity: .85; }
.bc-footer__links { display: flex; gap: 26px; flex-wrap: wrap; }
.bc-footer__links a {
	font-size: 12px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: rgba(255,255,255,.55);
}
.bc-footer__links a:hover { color: #fff; }
.bc-footer__copy {
	font-size: 11px;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: rgba(255,255,255,.35);
}

/* ═══════════════ MOBILE — the 390 artboard ═══════════════ */

@media (max-width: 899px) {
	:root { --bc-gutter: 22px; }

	.basecamp-landing a.bc-cta,
	.bc-cta { font-size: 19px; padding: 18px 28px; width: 100%; }

	/* Hero: the whole device sits left of the headline. A centred phone covers
	   the climber's face at this width whatever the crop, so it stays left.

	   Phone and copy are laid out in flow, bottom-aligned, rather than pinned to
	   fixed offsets. The headline wraps to four lines at 390px and to five on a
	   narrow phone; any fixed offset that clears one collides on the other. */
	.bc-hero {
		height: auto;
		min-height: 726px;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		padding: 110px var(--bc-gutter) 26px;
	}
	.bc-hero__bg--desktop { display: none; }
	.bc-hero__bg--mobile { display: block; object-position: 0% 34%; }
	.bc-hero__wash { display: none; }
	.bc-hero__fade {
		background: linear-gradient(to bottom, rgba(12,0,4,.55) 0%, rgba(12,0,4,0) 24%, rgba(12,0,4,.12) 40%, rgba(12,0,4,.88) 68%, var(--bc-ink) 100%);
	}

	.bc-hero__logo { left: var(--bc-gutter); top: 20px; }
	.bc-hero__logo-img { width: 134px; }

	.bc-hero__phone {
		position: static;
		align-self: flex-start;
		width: 138px;
		margin-bottom: 18px;
		filter: drop-shadow(-14px 20px 32px rgba(0,0,0,.7));
	}

	.bc-hero__copy {
		position: static;
		gap: 14px;
		align-items: stretch;
	}
	.basecamp-landing .bc-hero__h1 { font-size: 27px !important; line-height: 1.24; letter-spacing: -.2px; }
	.bc-hero__sub { font-size: 13px; letter-spacing: 3.4px; line-height: 1.4; }
	.bc-hero__subtext { max-width: none; font-size: 15px; }

	/* Two up, bigger than the desktop row proportionally — the brief called the
	   old bar out for floating small in a lot of dark space. */
	.bc-press { padding: 26px var(--bc-gutter) 30px; gap: 18px; }
	.bc-press__row {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 22px 18px;
		width: 100%;
		align-items: end;
		justify-items: center;
	}
	.bc-press__logo { width: min(var(--bc-logo-w, 200px) * .68, 100%); }

	.bc-pain { padding: 52px 26px 54px; }
	.bc-pain__text { font-size: 25px; line-height: 1.34; }

	.bc-video { padding: 0 var(--bc-gutter) 46px; gap: 20px; align-items: stretch; }
	.bc-video__frame { width: 100%; }
	.bc-video__play { width: 66px; height: 66px; }
	.bc-video__play svg { width: 24px; height: 26px; }

	.bc-testimonials { padding-bottom: 46px; gap: 20px; }
	.bc-cardrow { gap: 12px; padding: 0 var(--bc-gutter) 14px; }
	.bc-card { width: 300px; height: 340px; padding: 20px; }

	.bc-scrollhint { gap: 6px; }
	.bc-scrollhint__pill { width: 6px; }
	.bc-scrollhint__pill.is-active { width: 18px; }
	.bc-scrollhint__label { margin-left: 8px; letter-spacing: 1.6px; color: rgba(255,255,255,.5); }
	.bc-scrollhint__wide { display: none; }
	.bc-scrollhint__narrow { display: inline; }
	.bc-testimonials__cta { padding-top: 6px; }
	.bc-testimonials__cta .bc-cta { width: 100%; }

	.bc-tiles { padding: 0 var(--bc-gutter) 50px; gap: 26px; }
	.basecamp-landing .bc-tiles__heading { font-size: 25px !important; }
	.bc-tilegrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.bc-tile__name { font-size: 11.5px; left: 10px; right: 10px; bottom: 10px; letter-spacing: .5px; }
	.bc-tile__name::before { width: 16px; margin-bottom: 6px; }

	.bc-annual { padding: 30px var(--bc-gutter) 34px; }
	.bc-annual__inner { flex-direction: column; align-items: stretch; gap: 20px; }
	.bc-annual__price { flex: 0 0 auto; }
	.bc-annual__label { white-space: normal; }
	.bc-annual__amount { font-size: 38px; }
	.bc-annual__cta { width: 100%; font-size: 17px; }

	.bc-final { padding: 46px var(--bc-gutter) 50px; }

	.bc-footer { padding: 32px var(--bc-gutter) 30px; }
	.bc-footer__inner { flex-direction: column; align-items: center; text-align: center; gap: 20px; }
	.bc-footer__links { justify-content: center; gap: 18px; }
}

/* Between the artboards the desktop hero still holds, but the fixed offsets have
   to come in or the phone crowds the headline. */
@media (min-width: 900px) and (max-width: 1200px) {
	.bc-hero__logo,
	.bc-hero__copy { left: 44px; }
	.basecamp-landing .bc-hero__h1 { font-size: 40px !important; max-width: 480px; }
	.bc-hero__phone { right: -190px; width: 340px; }
	:root { --bc-gutter: 36px; }
}

@media (prefers-reduced-motion: reduce) {
	.basecamp-landing * { transition: none !important; }
	.bc-cardrow { scroll-behavior: auto; }
}