/*
 * Home - Get start with us.
 *
 * Read from cp-all-designer/index.html:372-414 and css/app.css:1554,
 * 1605-1608, 1722-1805.
 *
 * Drawn at 1440 (app.css:113): a fixed measure carries across unchanged.
 * Colour, type, padding, the sizes, the corner and the least height arrive
 * from the Style tab and are not repeated here.
 *
 * Left behind:
 * - The tile's icon. index.html:385 prints one inside `.oppacc__ico`, and
 *   app.css:1763 sets that box to `display: none` — nothing of it reaches the
 *   page, so nothing of it is built and no control asks for one.
 * - Every `.jb .oppacc…` rule (app.css:3593-4288) — those belong to
 *   join-business and sme, which is where the class `jb` is printed.
 */

.custom-home-get-start-with-us {
	position: relative;
	display: block;
	overflow: hidden;
	box-sizing: border-box;
}

.custom-home-get-start-with-us__inner {
	box-sizing: border-box;
	margin: 0 auto;
	max-width: 1920px;                     /* the content cap, every band */
}

/* ------------------------------------------------------------------ */
/* The head                                                            */
/* ------------------------------------------------------------------ */

.custom-home-get-start-with-us__head {
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
	text-align: center;                    /* app.css:1605 */
}

.custom-home-get-start-with-us__eyebrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 0 0 22px;
	font-size: 12px;
	font-weight: 600;
	/* app.css:190 measures 1.15px; every px value here is even. */
	letter-spacing: 2px;
	text-transform: uppercase;
}

.custom-home-get-start-with-us__title {
	margin: 0 0 14px;                      /* app.css:1607 */
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
}

.custom-home-get-start-with-us__title em {
	position: relative;
	display: inline-block;
	font-style: normal;                    /* app.css:255-260: upright, a step larger than its line */
	font-weight: 700;
	font-size: 108%;  
}

.custom-home-get-start-with-us__title em::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 4px;
	height: 8px;
	border-radius: 4px;                    /* app.css:238 measures 3px */
	background: currentColor;
	opacity: 0.18;
}

.custom-home-get-start-with-us__description {
	margin: 0 auto;                        /* app.css:1608 */
	font-weight: 400;
	line-height: 1.7;
}

/* ------------------------------------------------------------------ */
/* The row of tiles                                                    */
/* ------------------------------------------------------------------ */

/* app.css:1722 — the ground shows through a hairline gap, which is the rule
   between the tiles. */
.custom-home-get-start-with-us__tiles {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 2px;                              /* app.css:1724 measures 1px */
	border-width: 2px;                     /* app.css:1726 measures 1px */
	border-style: solid;
	overflow: hidden;
}

.custom-home-get-start-with-us__tile {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;             /* content sticks to the foot */
	gap: 8px;                              /* app.css:1734 */
	min-width: 0;
	color: #FFFFFF;
	text-decoration: none;
	cursor: pointer;
}

.custom-home-get-start-with-us__tile-bg {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.custom-home-get-start-with-us__tile-picture {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.custom-home-get-start-with-us__tile-picture > img,
.custom-home-get-start-with-us__tile-picture > video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transform: scale(1.02);                /* app.css:1744 */
	transition: transform 1200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.custom-home-get-start-with-us__tile:hover .custom-home-get-start-with-us__tile-picture > img,
.custom-home-get-start-with-us__tile:hover .custom-home-get-start-with-us__tile-picture > video {
	transform: scale(1.09);                /* app.css:1745 */
}

/* app.css:1748-1759 — the veil, its foot colour set per tile. */
.custom-home-get-start-with-us__tile::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(0deg,
		var(--tint, rgba(45, 120, 158, 0.96)) 0%,
		rgba(10, 22, 60, 0.62) 46%,
		rgba(10, 22, 60, 0.16) 76%,
		rgba(10, 22, 60, 0.04) 100%);
	transition: opacity 450ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.custom-home-get-start-with-us__tile-title {
	margin: 0;                             /* foot set by justify-content: flex-end */
	font-weight: 600;
	line-height: 1.35;
	color: #FFFFFF;
}

/* app.css:1768-1774 — the words open as the tile is reached. */
.custom-home-get-start-with-us__tile-description {
	margin: 0;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.92);
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height 450ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            opacity 300ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            margin 450ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.custom-home-get-start-with-us__tile:hover .custom-home-get-start-with-us__tile-description,
.custom-home-get-start-with-us__tile:focus-visible .custom-home-get-start-with-us__tile-description,
.custom-home-get-start-with-us__tile:focus-within .custom-home-get-start-with-us__tile-description {
	max-height: 154px;                     /* app.css:1773 measures 11em of 14px */
	opacity: 1;
	margin-top: 4px;
}

/* ---- the corner mark — app.css:1782-1791 ---- */
.custom-home-get-start-with-us__go {
	position: absolute;
	top: 22px;                             /* clamp(16, 1.6*14.4, 22) */
	right: 22px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border-width: 2px;                     /* app.css:1785 measures 1.5px */
	border-style: solid;
	transition: color 350ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            border-color 350ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            background-color 350ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
	--custom-press-ink: #FFFFFF;
	--custom-press-ground: transparent;
	--custom-press-shadow: none;
}

.custom-home-get-start-with-us__tile:hover .custom-home-get-start-with-us__go {
	transform: translateX(4px);            /* app.css:1790 measures 3px */
	--custom-press-ground: #FFFFFF;
	--custom-press-edge: #FFFFFF;
}

/* ------------------------------------------------------------------ */
/* Tablet — 768px to 1024px                                            */
/* ------------------------------------------------------------------ */

@media (max-width: 1024px) {
	.custom-home-get-start-with-us__tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));   /* app.css:1792 */
	}
	.custom-home-get-start-with-us__go {
		top: 16px;
		right: 16px;
	}
	.custom-home-get-start-with-us__description {
		line-height: 1.6;
	}
	/* app.css:903 — the author's own line breaks close up below the wide tier. */
	.custom-home-get-start-with-us__description br {
		display: none;
	}
}

/* ------------------------------------------------------------------ */
/* Mobile — up to 767px                                                */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {
	.custom-home-get-start-with-us__tile {
		gap: 4px;                          /* app.css:1795 */
	}
	.custom-home-get-start-with-us__tile-description {
		display: none;                     /* app.css:1805 */
	}
	.custom-home-get-start-with-us__go {
		width: 28px;
		height: 28px;
		top: 12px;
		right: 12px;                       /* app.css:1797 */
	}
	.custom-home-get-start-with-us__description {
		line-height: 1.5;                  /* app.css:2992 */
	}
	.custom-home-get-start-with-us__title em::after {
		bottom: 2px;
		height: 4px;
	}
}

/* A pointer that cannot hover reads the words already open — app.css:1775-1777. */
@media (hover: none) and (min-width: 768px) {
	.custom-home-get-start-with-us__tile-description {
		max-height: none;
		opacity: 1;
		margin-top: 4px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.custom-home-get-start-with-us__tile-picture > img,
	.custom-home-get-start-with-us__tile-picture > video,
	.custom-home-get-start-with-us__tile-description,
	.custom-home-get-start-with-us__tile::after,
	.custom-home-get-start-with-us__go {
		transition: none;
	}
	.custom-home-get-start-with-us__tile:hover .custom-home-get-start-with-us__go {
		transform: none;
	}
}

/* ------------------------------------------------------------------ */
/* One band, one screen — desktop only                                 */
/* ------------------------------------------------------------------ */

/* app.css:336-338 (.sec) gives this band the window's height, and app.css:2830 hands it back
   at 1024 and below, where the content sets the height as it does everywhere
   else. min-height, so a band that outgrows the window takes the room it needs
   and the page scrolls rather than cutting anything off. */
@media (min-width: 1025px) {
	.custom-home-get-start-with-us {
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	/* A flex item with auto side margins shrinks to its own content, so the
	   content box is told its width again: the whole band, up to the cap. */
	.custom-home-get-start-with-us > .custom-home-get-start-with-us__inner {
		width: 100%;
	}
}