/*
 * P-01 Landing — replication of the Figma `landing page` frame (1728 x 5780),
 * via the prototype's Landing.dc.html.
 *
 * Each band carries its own tint and its own inset. Those insets differ per
 * section in the frame and are reproduced exactly rather than normalised:
 * deviation D-1 was reverted at the client's request on 15 Aug 2026, so the
 * file's real offsets are the specification.
 *
 * @package Uloominate
 */

.ulm-landing section {
	width: 100%;
}

.ulm-landing section > div {
	max-width: var(--ulm-page-max);
	margin-inline: auto;
}

/* Shared type for the bands. */
.ulm-lp-h2 {
	margin: 0;
	font-weight: var(--ulm-fw-semibold);
	/*
	 * Set here rather than on --ulm-text-section (clamp(30px, 2.9vw, 44px)),
	 * which other screens share. At 44px these headings ran to three lines in
	 * the narrower bands and dwarfed the hero title above them.
	 */
	font-size: clamp(26px, 2.15vw, 34px);
	line-height: 1.2;
	letter-spacing: -.4px;
	color: var(--ulm-deep);
	text-wrap: balance;
}

.ulm-lp-lede {
	margin: 0;
	font-weight: var(--ulm-fw-regular);
	/* Was clamp(19px, 1.7vw, 28px) — a 28px standfirst is heading-sized. */
	font-size: clamp(16px, 1.1vw, 18px);
	line-height: 1.6;
	color: var(--ulm-ink);
	text-wrap: pretty;
}

.ulm-eyebrow--alt { color: var(--ulm-gold-alt); }

/* =============================================================== HERO == */

/*
 * One centred column over the crayon artwork.
 *
 * The artwork is a background on the band rather than an <img> beside the
 * text: it is decoration behind the copy, it has to bleed past the page's
 * max width, and `cover` has to be free to crop it. The illustration that
 * used to sit on the right is still in the markup — `.ulm-lp-hero__art`,
 * hidden at the foot of this block — because `lp_hero_image` is a client
 * option carrying its own alt text, and removing the container would throw
 * both away.
 */
.ulm-lp-hero {
	background-color: var(--ulm-tint-cream);
	/*
	 * Two layers: a cream veil over the middle, then the artwork. The veil is
	 * invisible on a wide screen — the centre of the image is already cream —
	 * and only does work on a narrow one, where `cover` pulls the crayons in
	 * under the copy.
	 */
	background-image:
		radial-gradient(ellipse 62% 58% at 50% 50%, rgba(255, 253, 247, .94) 0%, rgba(255, 253, 247, .74) 55%, rgba(255, 253, 247, 0) 100%),
		var(--ulm-lp-hero-bg, none);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
}

.ulm-lp-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: clamp(56px, 9vw, 140px) var(--ulm-inset-hero);
	/*
	 * The artwork is 5187 x 2364, so at 45.5vw the band matches its ratio and
	 * `cover` has nothing to crop. Capped so it cannot grow to fill a very
	 * wide monitor, where the crop costs less than the height would.
	 */
	min-height: min(45.5vw, 680px);
}

.ulm-lp-hero__text {
	/*
	 * `flex: 0 1 auto`, not the old `999 1 480px`. A flex basis is read
	 * against the main axis, and the main axis is vertical now, so a 480px
	 * basis with a grow factor would stretch this column down the band.
	 */
	flex: 0 1 auto;
	width: 100%;
	max-width: 980px;
	max-width: 1000px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.ulm-lp-hero__title {
	margin: 0 auto;
	max-width: 980px;
	max-width: 1000px;
	font-weight: var(--ulm-fw-semibold);
	/*
	 * Set here rather than on --ulm-text-hero, which other screens share.
	 * The artwork's title holds one line down to tablet width, and at the
	 * token's 3.4vw it broke after "and" on a laptop — a two-line title
	 * pushes the band taller than the image's ratio and `cover` starts
	 * cropping the crayons off the sides.
	 */
	font-size: clamp(32px, 3.1vw, 56px);
	line-height: 1.12;
	letter-spacing: -.5px;
	color: var(--ulm-deep);
	text-wrap: balance;
}

.ulm-lp-hero__lede {
	/*
	 * Set here rather than on --ulm-text-lede: that token is shared with other
	 * screens, so changing it would resize standfirsts that have nothing to do
	 * with this hero.
	 */
	margin: clamp(18px, 2vw, 30px) auto 0;
	max-width: 740px;
	font-size: clamp(17px, 1.6vw, 24px);
	line-height: var(--ulm-leading-relaxed);
	color: var(--ulm-ink);
	text-wrap: pretty;
}

.ulm-lp-hero__promo {
	margin: clamp(18px, 2vw, 30px) 0 0;
	font-size: var(--ulm-text-lede);
	line-height: var(--ulm-leading-relaxed);
}

/*
 * Centred, the gold reads as a stroke drawn under the line rather than a
 * highlighter struck through it. Scoped to this hero, so `.ulm-highlight`
 * keeps its original treatment everywhere else it is used.
 */
.ulm-lp-hero__promo::before {
	inset-inline: -10px;
	bottom: -6px;
	height: 9px;
	border-radius: 999px;
}

.ulm-lp-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
	margin-top: clamp(28px, 3.6vw, 52px);
}

/* Kept in the markup, out of the layout — see the note on `.ulm-lp-hero`. */
.ulm-lp-hero__art { display: none; }


/* ================================================ WHY CREATORS JOIN == */

.ulm-lp-why { background: var(--ulm-surface); }

.ulm-lp-why__inner {
	display: flex;
	flex-direction: column;
	gap: 48px;
	padding: 65px var(--ulm-inset-section) 87px;
}

.ulm-lp-why__head {
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 1100px;
}

/*
 * Four across, stated rather than inferred.
 *
 * This was `auto-fit` with a 260px minimum inside a 1266px cap, which does the
 * arithmetic correctly and gets the wrong answer: four columns need
 * 4×260 + 3×36 = 1148px, and at a 1440px viewport the section inset ate 360px
 * and left 1080px — so it quietly fell back to three and nobody could see why.
 * A fixed column count says what the design wants; the breakpoints below say
 * when it stops being possible.
 */
.ulm-lp-why__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 36px;
	max-width: none;
}

@media (max-width: 1180px) {
	.ulm-lp-why__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
	.ulm-lp-why__grid { grid-template-columns: 1fr; }
}

.ulm-lp-pillar {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;
	min-height: 363px;
	padding: 40px 24px;
	border-radius: 20px;
	transition: transform .24s var(--ulm-ease);
}

.ulm-lp-pillar:hover { transform: translateY(-4px); }

.ulm-lp-pillar__icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 90px;
	height: 90px;
	border-radius: 50%;
	background: var(--ulm-surface);
}

.ulm-lp-pillar__text {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.ulm-lp-pillar__title {
	margin: 0;
	font-weight: var(--ulm-fw-semibold);
	font-size: 26px;
	line-height: 38px;
	letter-spacing: normal;
	color: var(--ulm-deep);
	text-align: center;
}

.ulm-lp-pillar__text p {
	max-width: 242px;
	font-size: 16px;
	line-height: 1.35;
	color: var(--ulm-ink);
	text-align: center;
	text-wrap: pretty;
}

/* ================================================ FOUNDING PROMOTION == */

.ulm-lp-promo__inner {
	display: flex;
	flex-direction: column;
	/*
	 * No gap — the head carries its own margin, so the space between the copy
	 * and the timeline is stated once rather than being the sum of a gap and a
	 * margin that have to be read together.
	 */
	gap: 0;
	padding: 65px var(--ulm-inset-section) 85px;
}

.ulm-lp-promo__head {
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 1100px;
	margin-bottom: 60px;
}

/*
 * This band sets its own heading and standfirst sizes.
 *
 * Scoped to .ulm-lp-promo rather than changed on .ulm-lp-h2 / .ulm-lp-lede,
 * which every other band on the page shares — the frame gives this one a
 * larger heading than the rest, and nothing else should follow it.
 */
.ulm-lp-promo .ulm-lp-h2 { font-size: 35px; }
.ulm-lp-promo .ulm-lp-lede { font-size: 20px; }

/*
 * Three stages on a rule, as the Figma frame draws them.
 *
 * The rule runs through the circles' centres rather than sitting under them:
 * this is a sequence, and the line is what says so. One absolute element spans
 * the whole row and each circle's opaque fill masks the part behind it, so
 * there is no per-stage arithmetic to get wrong when the gap or the column
 * count changes.
 *
 * It continues past the third circle to the edge of the band. That is in the
 * frame and is not an overshoot — I removed it once as a bug and was wrong.
 */
.ulm-lp-promo__stages {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 36px;
	padding: 0;
	margin: 0;
	list-style: none;
}

.ulm-lp-promo__stages::before {
	content: "";
	position: absolute;
	/* Half the circle down, so the rule crosses their centres. */
	inset-block-start: 24px;
	inset-inline: 0;
	height: 1px;
	background: var(--ulm-primary, #cfe3d8);
}

@media (max-width: 900px) {
	.ulm-lp-promo__stages {
		grid-template-columns: 1fr;
		gap: 44px;
	}

	/* Stacked, there is no row for a rule to run along. */
	.ulm-lp-promo__stages::before { display: none; }
}

.ulm-lp-stage {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
}

/*
 * Outlined, not filled — the frame draws a hairline ring with the numeral in
 * the brand green. The opaque fill is doing real work here: it is what breaks
 * the rule passing behind the circle.
 */
.ulm-lp-stage__number {
	position: relative;
	display: grid;
	place-items: center;
	align-self: flex-start;
	width: 48px;
	height: 48px;
	background: var(--ulm-surface);
	border: 1px solid var(--ulm-primary);
	border-radius: 50%;
	font-weight: var(--ulm-fw-medium);
	font-size: 20px;
	line-height: 1;
	color: var(--ulm-primary);
}

.ulm-lp-stage__eyebrow {
	margin: 22px 0 0;
	font-weight: var(--ulm-fw-semibold);
	/* Matches .ulm-eyebrow — these are the same kind of label. */
	font-size: 13px;
	line-height: 1.5;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ulm-gold-ink);
}

.ulm-lp-stage__title {
	margin: 8px 0;
	font-weight: var(--ulm-fw-semibold);
	font-size: 18px;
	line-height: 1.3;
	letter-spacing: normal;
	color: var(--ulm-deep);
}

.ulm-lp-stage__body {
	margin: 0;
	max-width: 30ch;
	font-size: 15px;
	line-height: 1.6;
	color: var(--ulm-ink-muted);
	text-wrap: pretty;
}



/* ======================================================= VENDOR PLANS == */

.ulm-lp-plans { background: var(--ulm-surface); }

.ulm-lp-plans__inner {
	display: flex;
	flex-direction: column;
	gap: 58px;
	padding: 65px var(--ulm-inset-section) 76px;
}

.ulm-lp-plans__head {
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 1100px;
}

/*
 * Three across, fixed.
 *
 * The landing page shows only the self-service tiers — Pioneer, Basic and
 * Premium. Publishers is arranged by agreement (OI-3) and has no price to put
 * on a card, so it belongs on the full plans page and not here.
 *
 * `repeat(3, 1fr)` rather than auto-fit: auto-fit happened to give three
 * because there are three plans, and would silently become four columns of
 * squashed cards the moment a tier was added.
 */
.ulm-lp-plans__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}

@media (max-width: 980px) {
	.ulm-lp-plans__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	.ulm-lp-plans__grid { grid-template-columns: minmax(0, 1fr); }
}

/*
 * The link to the full plans comparison, under the three cards.
 *
 * Pulled up out of the inner column's 58px gap. That gap is the distance
 * between the heading block and the cards — a section-scale rhythm, and the
 * right one there. This button belongs to the cards rather than following
 * them, so it sits closer; left at 58px it read as a stray control floating
 * between the plans and the next section.
 */
.ulm-lp-plans__cta {
	display: flex;
	justify-content: center;
	margin-top: -22px;
}

@media (max-width: 640px) {
	/* Full width, like the button on each card above it. */
	.ulm-lp-plans__cta .ulm-btn { width: 100%; }
}

.ulm-lp-plan {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	/* align-items: start; */
	gap: 14px;
	/* padding: 28px 24px 24px; */
	padding: 36px 24px;
	border: 1px solid var(--ulm-border);
	border-radius: 20px;
	background: var(--ulm-surface);
	text-align: center;
	transition: transform var(--ulm-duration-base) var(--ulm-ease), box-shadow var(--ulm-duration-base) ease;
}

.ulm-lp-plan:hover {
	transform: translateY(-4px);
	box-shadow: var(--ulm-shadow-md);
}

.ulm-lp-plan--featured {
	border-color: var(--ulm-primary);
	box-shadow: var(--ulm-shadow-md);
	border-width: 3px;
}

/* Centred on the card now that the card itself is centred. */
.ulm-lp-plan__flag {
	position: absolute;
	inset-block-start: -12px;
	inset-inline-start: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	padding: 4px 12px;
	background: var(--ulm-gold);
	color: var(--ulm-deep);
	border-radius: 9999px;
	font-size: 12px;
	font-weight: var(--ulm-fw-semibold);
	line-height: 18px;
}

.ulm-lp-plan__name {
	margin: 0;
	font-weight: var(--ulm-fw-semibold);
	font-size: 24px;
	line-height: 34px;
	letter-spacing: normal;
	color: var(--ulm-deep);
	width: 100%;
	text-align: center;
}

.ulm-lp-plan__price {
	font-weight: var(--ulm-fw-bold);
	font-size: 30px;
	line-height: 1.2;
	/* Plan prices use the teal, not the primary green. */
	color: var(--ulm-teal);
	width: 100%;
	text-align: center;
}

.ulm-lp-plan__blurb {
	font-size: 14px;
	font-size: 16px;
	line-height: 21px;
	color: var(--ulm-ink-muted);
	margin-top: 20px;
	display: none;
}

/*
 * The card is centred, but the feature rows are not.
 *
 * Centring a ticked list puts every tick at a different x-position and the
 * eye has nothing to run down. So the list is centred as a *block* — it takes
 * only the width it needs and is pushed to the middle — while the rows inside
 * it stay left-aligned and the ticks line up.
 */
.ulm-lp-plan__features {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: fit-content;
	max-width: 100%;
	/* margin-inline: auto; */
	list-style: none;
	text-align: left;
	margin: 20px auto;
}

.ulm-lp-plan__features li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 14px;
	font-size: 16px;
	line-height: 21px;
	color: var(--ulm-ink);
}

.ulm-lp-plan__features svg {
	flex: 0 0 auto;
	margin-top: 3px;
	color: var(--ulm-primary);
}

.ulm-lp-plan .ulm-btn { margin-top: auto; }

/* ======================================================== BENEFITS CTA == */

.ulm-lp-benefits__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	padding: 65px var(--ulm-inset-section) 60px;
	text-align: center;
}

.ulm-lp-benefits__head {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 900px;
}

.ulm-lp-benefits__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 28px;
	width: 100%;
	max-width: 1200px;
}

.ulm-lp-benefit {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 28px 24px;
	background: var(--ulm-surface);
	border-radius: 16px;
}

.ulm-lp-benefit__icon {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--ulm-tint-lilac);
	color: var(--ulm-deep);
}

.ulm-lp-benefit__title {
	margin: 0;
	font-weight: var(--ulm-fw-semibold);
	font-size: 20px;
	line-height: 28px;
	letter-spacing: normal;
	color: var(--ulm-deep);
}

.ulm-lp-benefit p {
	font-size: 15px;
	line-height: 1.6;
	color: var(--ulm-ink-muted);
	text-wrap: pretty;
}

/* ======================================================= TESTIMONIALS == */

.ulm-lp-testimonials { background: var(--ulm-surface); }

.ulm-lp-testimonials__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	padding: 65px var(--ulm-inset-section) 90px;
	text-align: center;
}

.ulm-lp-testimonials__head {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/*
 * Three testimonials in view, scrolled a page at a time.
 *
 * A scroll-snap track rather than a slider library: it is a genuinely
 * scrollable list, so a trackpad swipe and keyboard arrows work without any
 * script, and with JavaScript off the buttons simply do not appear while the
 * quotes stay readable. No dependency (NFR-4).
 */

.ulm-lp-quotes {
	position: relative;
	width: 100%;
}

.ulm-lp-quotes__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 2 * 28px) / 3);
	gap: 28px;
	padding: 4px;
	margin: 0;
	overflow-x: auto;
	list-style: none;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;

	/* The bar would sit under the cards and fight the rounded corners. */
	scrollbar-width: none;
}

.ulm-lp-quotes__track::-webkit-scrollbar { display: none; }

.ulm-lp-quotes__track:focus-visible {
	outline: 2px solid var(--ulm-primary);
	outline-offset: 2px;
	border-radius: 18px;
}

.ulm-lp-quotes__slide {
	scroll-snap-align: start;
	min-width: 0;
}

.ulm-lp-quotes__slide .ulm-lp-quote {
	display: flex;
	flex-direction: column;
	gap: 16px;
	height: 100%;
}

.ulm-lp-quotes__controls {
	display: flex;
	gap: 10px;
	justify-content: center;
	margin-top: 24px;
}

.ulm-lp-quotes__arrow {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	color: var(--ulm-deep);
	cursor: pointer;
	background: var(--ulm-surface, #fff);
	border: 1px solid var(--ulm-border, #edf0ee);
	border-radius: 50%;
	transition: background var(--ulm-duration-fast) ease, color var(--ulm-duration-fast) ease;
}

.ulm-lp-quotes__arrow:hover:not(:disabled) {
	color: #fff;
	background: var(--ulm-primary);
	border-color: var(--ulm-primary);
}

/* Disabled at the ends rather than hidden, so the row does not reflow. */
.ulm-lp-quotes__arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

.ulm-lp-quote__by {
	display: flex;
	flex-direction: column;
	gap: 1px;
	margin-top: auto;
	padding-top: 4px;
}

.ulm-lp-quote__name {
	font-size: 14px;
	font-weight: 600;
	color: var(--ulm-deep);
}

.ulm-lp-quote__role {
	font-size: 12.5px;
	color: var(--ulm-ink-muted);
}

@media (max-width: 1024px) {
	.ulm-lp-quotes__track { grid-auto-columns: calc((100% - 28px) / 2); }
}

@media (max-width: 640px) {
	.ulm-lp-quotes__track { grid-auto-columns: 86%; }
}

@media (prefers-reduced-motion: reduce) {
	.ulm-lp-quotes__track { scroll-behavior: auto; }
}

.ulm-lp-quote {
	margin: 0;
	padding: 32px 28px;
	border-radius: 16px;
	text-align: start;
}

.ulm-lp-quote blockquote { margin: 0; }

.ulm-lp-quote p {
	font-size: 16px;
	line-height: 1.7;
	color: var(--ulm-ink);
	text-wrap: pretty;
}

/* ======================================================== MAILING LIST == */

.ulm-lp-subscribe__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 48px;
	padding: 65px var(--ulm-inset-section);
}

.ulm-lp-subscribe__text {
	flex: 1 1 420px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ulm-lp-subscribe__form {
	flex: 1 1 380px;
	min-width: 0;
	max-width: 520px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 42px;
	background: var(--ulm-surface);
	border-radius: 12px;
	box-shadow: var(--ulm-shadow-lg);
}

.ulm-lp-subscribe__form .ulm-input { height: 56px; }

.ulm-lp-subscribe__status {
	margin: 0;
	font-size: 14px;
	line-height: 20px;
}

.ulm-lp-subscribe__status[data-tone="success"] { color: var(--ulm-success); }
.ulm-lp-subscribe__status[data-tone="error"]   { color: var(--ulm-danger); }

/* ========================================================= responsive == */

@media (max-width: 640px) {
	.ulm-lp-pillar {
		min-height: 0;
		padding: 28px 20px;
	}

	.ulm-lp-pillar__title { font-size: 22px; line-height: 32px; }
	.ulm-lp-pillar__text p { font-size: 17px; }

	.ulm-lp-hero__ctas .ulm-btn { width: 100%; }

	.ulm-lp-subscribe__form { padding: 24px; }

	.ulm-lp-stage__title { font-size: 20px; line-height: 30px; }
}