/* ==========================================================================
   حمل التطبيق / حدث التطبيق — /app/download and /app/update.

   DERIVED: Figma draws neither. They are one panel with one heading swapped,
   which is what v2 has too, so partials/app-get is the panel and the two views
   bring only their words.

   Built on the landing page's closing CTA (8728:8372): copy on the right, art
   on the left. The band is dark rather than the CTA's cream because that is
   what v2's download page is, and because a store button is a white-on-dark
   badge — on cream the two would have to be redrawn.

   IT HAS NO WAVE OF ITS OWN, and that is the point. The CTA carries one
   because it sits between two cream sections; this band sits directly under
   the navbar, and the navbar already draws the wave. Giving it a second one
   painted a 127px cream strip across the top of the green — the reader sees
   a gap, because it is one.

   ONE PANEL, TWO CHROMES. /app/download is OnlyWeb and only ever renders on a
   desktop browser, so it gets the navbar and footer. /app/update is OnlyApp and
   is where an out-of-date webview is sent; it has neither, and .v3-get-screen
   below is what adapts the same panel to standing alone.
   ========================================================================== */

.v3-get {
	position: relative;
	padding: 96px 0 88px;
	background: var(--v3-bg-green);
	overflow: hidden;
}

/* THE GREEN RUNS UP BEHIND THE NAVBAR. Its wave is a MASK over a flat orange
   fill, so wherever the mask cuts away, whatever is behind .v3-navbar shows
   through — and that is the body. Every other v3 hero is orange, so the
   cutaway is orange too and the seam has never been visible; this band is
   green, and the body's cream came through as a strip between the wave and
   the section. Exactly the seam pages/challenges.css documents.

   Two names because two bars read two different variables: the body's own
   background is what the marketing navbar sits on, and --v3-appbar-behind is
   what the app bar reads. It has to be on the BODY either way — .v3-appbar is
   the page's sibling, not its child.

   Safe because this page is the band and then the footer: there is no cream
   section below for the green to leak into. */
.v3-get-page {
	background: var(--v3-bg-green);
	--v3-appbar-behind: var(--v3-bg-green);
}

.v3-get__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: flex-start;         /* copy hugs the start = right, in RTL */
	gap: var(--v3-space-8);              /* 48px */
	width: min(1240px, calc(100% - 48px));
	margin: 0 auto;
}

.v3-get__copy {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;             /* right, in RTL */
	gap: var(--v3-space-6);              /* 32px */
	min-width: 0;
	text-align: right;
}

/* The store icon, at the size a store shows it. Rounded to the same curve the
   platforms round it to, so the page does not look like it is showing a
   screenshot of an icon. */
.v3-get__icon img {
	display: block;
	width: 96px;
	height: 96px;
	border-radius: 22px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
}

.v3-get__text {
	display: flex;
	flex-direction: column;
	gap: var(--v3-space-4);              /* 16px */
}

.v3-get__title {
	margin: 0;
	color: var(--v3-text-inverse);
	font-size: var(--v3-fs-h1);          /* 48px, as the CTA's heading */
	font-weight: var(--v3-fw-bold);
	line-height: var(--v3-lh-auto);
}

.v3-get__lead {
	margin: 0;
	max-width: 34ch;                     /* the lead is one thought; letting it run
	                                        the full 645 makes it a paragraph */
	color: var(--v3-green-200);
	font-size: var(--v3-fs-h4);          /* 24px */
	font-weight: var(--v3-fw-medium);
	line-height: var(--v3-lh-normal);
}

/* ---- the store buttons ------------------------------------------------- */

.v3-get__stores {
	display: flex;
	align-items: center;
	gap: var(--v3-space-3);              /* 12px */
	flex-wrap: wrap;
}

/* Modelled on .v3-hero__store — the large badge from the landing hero — rather
   than the footer's small one: this page exists to be clicked, and the footer
   badge is sized to sit quietly under a column of links. It is not that class,
   because .v3-hero__store lives in pages/home.css and reaching across page
   sheets is what components.css is for; if a third page ever wants it, this is
   the one to promote. */
.v3-store {
	display: flex;
	align-items: center;
	gap: var(--v3-space-3);              /* 12px */
	min-width: 190px;
	padding: 12px 20px;
	border: 1px solid var(--v3-border-white-subtle);
	border-radius: var(--v3-radius-md);
	background: rgba(255, 255, 255, .08);
	direction: ltr;                      /* Latin label after a leading glyph */
	text-align: left;
	transition: background-color .15s ease;
}

.v3-store:hover { background: rgba(255, 255, 255, .16); }

/* MDB turns a bare-class anchor blue on hover — every v3 anchor needs this. */
.v3-store:link, .v3-store:visited,
.v3-store:hover, .v3-store:focus, .v3-store:active {
	color: var(--v3-text-inverse);
	text-decoration: none;
}

.v3-store__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	line-height: var(--v3-lh-auto);
}

.v3-store__text small {
	font-size: var(--v3-fs-m-small);     /* 12px */
	font-weight: var(--v3-fw-regular);
	color: rgba(255, 255, 255, .7);
}

.v3-store__text strong {
	font-size: var(--v3-fs-title);       /* 18px */
	font-weight: var(--v3-fw-semibold);
}

/* ---- the phone ---------------------------------------------------------- */

.v3-get__art {
	flex: 0 0 auto;
	width: 420px;
	max-width: 40%;
}

.v3-get__art img {
	display: block;
	width: 100%;
	height: auto;
}

/* ==========================================================================
   /app/update — the same panel with nothing around it
   ========================================================================== */

/* No navbar above it, so nothing for the wave to bite into: it would draw a
   cream curve against the top of the viewport, which reads as a rendering
   fault rather than as a join. The screen fills the height instead and centres
   what it has, the way app/game-mode.ejs does. */
.v3-get-screen {
	display: flex;
	align-items: center;
	min-height: 100vh;
	min-height: 100dvh;
	background: var(--v3-bg-green);
}

.v3-get-screen .v3-get { width: 100%; padding: 40px 0; }

/* ==========================================================================
   Narrow
   ========================================================================== */

/* The phone drops away before the copy has to fight it. Below this the art is
   a decoration competing for the width the store buttons need, and the buttons
   are the only reason anyone is on this page. */
@media (max-width: 991px) {
	.v3-get { padding: 72px 0 56px; }
	.v3-get__inner { flex-direction: column; align-items: center; text-align: center; }
	.v3-get__copy { align-items: center; text-align: center; }
	.v3-get__lead { max-width: 46ch; }
	.v3-get__stores { justify-content: center; }
	.v3-get__title { font-size: var(--v3-fs-h2); }
	.v3-get__art { width: 320px; max-width: 70%; order: -1; }
}

@media (max-width: 600px) {
	.v3-get { padding: 48px 0 40px; }
	.v3-get__inner { gap: var(--v3-space-6); width: calc(100% - 32px); }
	.v3-get__icon img { width: 72px; height: 72px; border-radius: 16px; }
	.v3-get__title { font-size: var(--v3-fs-m-h2); }
	.v3-get__lead { font-size: var(--v3-fs-m-body); }
	.v3-get__art { width: 240px; }

	/* Full width and stacked: two 190px badges plus their gap need 392, and the
	   narrowest phone this has to work on is 320. */
	.v3-get__stores { width: 100%; flex-direction: column; }
	.v3-store { width: 100%; min-width: 0; }
}