@charset "utf-8";

/* ==========================================================================
   CamTalk - the closing download block.

   This is chapter 3 of css/camtalk-chapters.css, moved to the foot of the
   page and rebuilt: the story now ends on the country, and the call to
   download is what follows it. Its own stylesheet because it shares neither
   the chapters' palette nor their container - it is a dark, full-bleed band
   between the closing scene and the footer, and nothing above it reaches in.

   One composition for both profiles. A phone gets it at full width; a wide
   window gets the same column, centred and capped, because the block is a
   single call to action and a 1900px-wide version of it is not a better one.
   ========================================================================== */

@media screen {

	/* The photograph is the section.

	   It used to be a 4:5 frame in the middle of a dark block, with the words
	   above it and the buttons under it. Now the picture is full bleed behind
	   all of them, the block itself carries no colour of its own beyond a
	   fallback, and the composition is the copy sitting ON the photograph.

	   The section is at least a screen tall so that a full-bleed picture is
	   actually full bleed rather than a strip, and the content is pushed to
	   the bottom of it - which is where this photograph has room: the sign is
	   across the top and the face is in the middle third. */
	.ctd {
		position: relative;
		z-index: 0;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		min-height: 100svh;
		padding: 64px 22px 56px;
		background: #0b0b0f;
		color: #fff;
		overflow: hidden;

		--ctd-pink: #ff3d76;
		--ctd-red: #cc0c0c;
		--ctd-muted: rgba(255, 255, 255, 0.72);
		--ctd-line: rgba(255, 255, 255, 0.22);
	}

	.ctd__bg {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		/* the frame the photograph is composed on: the sign at the top and
		   the face just above the middle both stay in view when the box is
		   wider than 9:16 */
		object-position: 50% 26%;
		/* 0, not -2: this section paints its own background colour as a
		   fallback, and a negative z-index child would be painted BEHIND
		   that - which is a black rectangle with the photograph under it.
		   The stack here is picture (0), scrim (0, later in the tree), copy
		   (1). */
		z-index: 0;
	}

	/* The one dark layer, and it is a gradient rather than a wash: nothing at
	   all across the sign and the face, deepening only where the type and the
	   buttons actually sit. Measured against the photograph it is used with -
	   its lower third is a bright floor and a bare arm, which is the worst
	   ground on the picture for white text, so the foot of the ramp is where
	   the weight is.

	   The second, very soft layer keeps the top edge of the block from being
	   a hard line where the section meets the closing scene above it. */
	.ctd__scrim {
		position: absolute;
		inset: 0;
		z-index: 0;
		pointer-events: none;
		background:
			linear-gradient(to bottom,
				rgba(8, 7, 11, 0.42) 0%,
				rgba(8, 7, 11, 0.10) 14%,
				rgba(8, 7, 11, 0) 34%,
				rgba(8, 7, 11, 0.30) 52%,
				rgba(8, 7, 11, 0.72) 70%,
				rgba(8, 7, 11, 0.88) 86%,
				rgba(8, 7, 11, 0.92) 100%);
	}

	.ctd,
	.ctd *,
	.ctd *::before,
	.ctd *::after {
		box-sizing: border-box;
	}

	/* the site has `word-break: break-all` on every list item globally */
	.ctd :is(h2, h3, p, a, span, div) {
		word-break: keep-all;
		overflow-wrap: break-word;
	}

	/* One very soft field behind the whole thing, so the band is not a flat
	   rectangle of black under a photograph. No blur filter: a gradient that
	   ends on transparent already has a softer edge than a blurred box, and
	   this one never moves. */
	/* A whisper of the brand colour in the foot of the picture, under the
	   buttons. It was a large soft field behind a flat black block; over a
	   photograph the same idea has to be much quieter or it reads as a
	   colour cast. */
	.ctd::before {
		content: '';
		position: absolute;
		z-index: 0;
		left: 50%;
		bottom: -28%;
		width: 150%;
		aspect-ratio: 1;
		transform: translateX(-50%);
		border-radius: 50%;
		background: radial-gradient(circle,
			rgba(255, 61, 118, 0.20) 0%,
			rgba(255, 61, 118, 0.07) 40%,
			rgba(255, 61, 118, 0) 68%);
		pointer-events: none;
	}

	.ctd__inner {
		position: relative;
		z-index: 1;
		width: 100%;
		max-width: 560px;
		margin: 0 auto;
	}

	/* --- the words -------------------------------------------------------- */

	.ctd__title {
		margin: 0;
		font-size: clamp(30px, 8.6vw, 40px);
		font-weight: 800;
		line-height: 1.24;
		letter-spacing: -0.024em;
		color: #fff;
		/* over a photograph, not over a flat colour: the shadow is what keeps
		   the edge of a letter readable if a bright patch lands under it */
		text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
	}

	.ctd__title b {
		font-weight: 800;
		color: var(--ctd-pink);
	}

	.ctd__sub {
		margin: 16px 0 0;
		font-size: clamp(15px, 4.2vw, 17px);
		font-weight: 500;
		line-height: 1.64;
		color: var(--ctd-muted);
		text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
	}

	/* --- the picture ------------------------------------------------------
	   Nothing here any more: the photograph is `.ctd__bg` above, behind the
	   whole section. The framed 4:5 box and its own veil are gone with it.
	   ---------------------------------------------------------------------- */

	/* --- the actions ------------------------------------------------------ */

	.ctd__actions {
		margin: 26px 0 0;
	}

	/* Three across, as in the reference. The label shrinks with the window
	   rather than wrapping: three pills that become six lines of text is a
	   worse row than three tight ones. */
	.ctd__stores {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
	}

	.ctd__store {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		min-height: 48px;
		padding: 10px 6px;
		border: 1px solid var(--ctd-line);
		border-radius: 999px;
		background: rgba(255, 255, 255, 0.05);
		font-size: clamp(11px, 3.1vw, 13px);
		font-weight: 700;
		letter-spacing: -0.02em;
		white-space: nowrap;
		color: #fff;
		text-decoration: none;
		transition: border-color 0.26s ease, background-color 0.26s ease;
	}

	.ctd__store img {
		width: 18px;
		height: 18px;
		display: block;
		flex: 0 0 auto;
	}

	.ctd__store:hover {
		border-color: rgba(255, 255, 255, 0.34);
		background: rgba(255, 255, 255, 0.10);
	}

	.ctd__store:focus-visible {
		outline: 2px solid var(--ctd-pink);
		outline-offset: 3px;
	}

	/* the reference's divider: a word with a hairline either side */
	.ctd__or {
		display: flex;
		align-items: center;
		gap: 12px;
		margin: 22px 0;
		font-size: 13px;
		font-weight: 600;
		color: rgba(255, 255, 255, 0.42);
	}

	.ctd__or::before,
	.ctd__or::after {
		content: '';
		flex: 1 1 auto;
		height: 1px;
		background: var(--ctd-line);
	}

	.ctd__cta {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		width: 100%;
		min-height: 58px;
		padding: 0 24px;
		border-radius: 999px;
		background: linear-gradient(90deg, #ff2e6a 0%, #ff5c8a 100%);
		color: #fff;
		font-size: clamp(16px, 4.4vw, 18px);
		font-weight: 800;
		letter-spacing: -0.015em;
		text-decoration: none;
		box-shadow: 0 10px 28px rgba(255, 46, 106, 0.28);
		transition: transform 0.26s cubic-bezier(0.22, 0.61, 0.36, 1),
			box-shadow 0.26s ease;
	}

	.ctd__cta .material-symbols-rounded {
		font-size: 22px;
	}

	.ctd__cta:hover {
		transform: translateY(-2px);
		box-shadow: 0 14px 34px rgba(255, 46, 106, 0.36);
	}

	.ctd__cta:focus-visible {
		outline: 3px solid #fff;
		outline-offset: 3px;
	}

	/* --- a wide window ----------------------------------------------------
	   The same column, centred, with the type a size up and the picture a
	   little wider than tall - a 4:5 frame at 560px is a very deep hole in a
	   1900px page.
	   ---------------------------------------------------------------------- */

	@media screen and (min-width: 1001px) {

		.ctd {
			padding: 110px 4vw 120px;
			text-align: center;
		}

		.ctd__inner {
			max-width: 620px;
		}

		.ctd__title {
			font-size: clamp(42px, 3vw, 54px);
		}

		.ctd__sub {
			font-size: 19px;
		}

		/* --- the photograph on a wide window ----------------------------
		   A 9:16 portrait cannot cover a 1440x680 box without a 2.4x zoom,
		   and every band of it is an accidental close-up: centred it is one
		   eye behind the heading, higher it is the top of a head. Cropping
		   was the wrong tool.

		   So the picture is CONTAINED here - its own proportions, full
		   height, standing to the right - and what fills the rest of the
		   width is the same file again, blurred and darkened, as a backdrop.
		   One image, one request, no distortion, and the copy gets a column
		   of its own on the left instead of sitting on her face. */
		.ctd {
			min-height: 680px;
			justify-content: center;
			text-align: left;
			padding: 96px 4vw;
		}

		.ctd__bg {
			object-fit: contain;
			object-position: 86% 50%;
		}

		.ctd::after {
			content: '';
			position: absolute;
			inset: -4%;
			z-index: -1;
			background-image: url('../img/download-hero.jpg?v=20260918-cta1');
			background-size: cover;
			background-position: 50% 30%;
			filter: blur(34px) brightness(0.42) saturate(0.9);
			pointer-events: none;
		}

		/* left to right on this profile: the copy is on the left, the
		   photograph on the right, and the ramp runs between them */
		.ctd__scrim {
			background:
				linear-gradient(to right,
					rgba(8, 7, 11, 0.86) 0%,
					rgba(8, 7, 11, 0.72) 34%,
					rgba(8, 7, 11, 0.28) 56%,
					rgba(8, 7, 11, 0.10) 72%,
					rgba(8, 7, 11, 0.28) 100%),
				linear-gradient(to bottom,
					rgba(8, 7, 11, 0.30) 0%,
					rgba(8, 7, 11, 0) 30%,
					rgba(8, 7, 11, 0) 70%,
					rgba(8, 7, 11, 0.40) 100%);
		}

		.ctd__inner {
			max-width: 520px;
			margin: 0;
		}

		.ctd__title {
			font-size: clamp(42px, 3vw, 54px);
		}

		.ctd__sub {
			font-size: 19px;
		}

		.ctd__stores {
			max-width: 460px;
		}

		.ctd__cta {
			max-width: 460px;
		}

		.ctd__or {
			max-width: 460px;
		}

		.ctd__or {
			margin: 26px 0;
		}
	}

	/* --- reduced motion ---------------------------------------------------- */

	@media (prefers-reduced-motion: reduce) {
		.ctd__store,
		.ctd__cta {
			transition: none;
		}

		.ctd__cta:hover {
			transform: none;
		}
	}
}