/* ==========================================================================
   GrowthStudioz, launch plan (Launchpad first)

   Off Adarsh's Figma section SVG exports, 7th October 2026
   (assets/brand/launch-plan desktop.svg, Launch Plan-mobile.svg and
   Carousel Viewport.svg, which holds all six cards).

   Desktop (1440):
     band     #F9F9F9, as Pillars above it, so no space of its own on top
              (Pillars' 100 is the gap); 100 under the buttons. Content is
              the page width (1280 at 1440), not the frame's 1200.
     heading  600 48/62 -2.176px #0A0A0A; 16 to the line, 400 16/26 #737373
     key      16 under the line: 10 dots, 8 to 600 14/18 #0A0A0A labels.
              Dots and card labels share the phase colours (his pick "A"):
              Build #E11D2E, Launch #FF6D24, Grow #3B82F6
     drawing  216 x 226 top right, 3 above the heading, 4 past the edge
     bar      26 under the key: a red week pin (71 x 22, 4 corners, 700 11
              white, 8 sides) and a 7 x 4.5 pointer 3.5 under it, its tip on
              the bar; parts 124.8 x 8, 4 apart, 2 corners, #EAEAEA, the
              steps done and the step shown red, the shown one with a 2px
              ring (769 wide in all, less on narrow screens). Labels 8 under,
              700 12/16, first #0A0A0A, the rest #737373, spread end to end.
              The pin sits centred over its part (his pick).
     cards    56 under the labels; 440 x 255, 16 apart, running to the
              screen's right edge; white, 16 corners, 1px #EAEAEA, 24 in
              (his pick; the frame's active card has 30), others at 55%.
              The shown card: 2px #E11D2E line, shadow 0 12 24 at 5%.
              Weeks 800 18 with the phase label (800 11 +1px capitals on the
              colour at 10%, 22 tall, 10 sides) at the right; 16 to the
              title 700 20; 8 to the text 14/22 #737373; 15 to a 1px #EAEAEA
              rule; 16 to FROM YOU 800 11 +1px #737373; 4 to 400 13 #0A0A0A.
     buttons  56 under the cards: "01" 800 24 and "/ 06" 700 16 #737373;
              two 48.7 squares 25 apart, 8 corners; the live one black with
              a #F1F1F1 chevron, a dead one white to #F3F3F3, #F1F1F1 line,
              #DDDDDD chevron. The row stops when card 4 is first (it cannot
              scroll further), but the arrows still move on to 5 and 6.

   Phone (the phone frame's layout, the desktop card, his pick): heading 800
   32/38 -1px; line 14/22; key stacked 12 apart (600 13/17) over a 1px
   #2A2E33 rule, the drawing (81.5 wide) beside it; bar full width, #DDDDDD,
   1px ring, labels 700 11 #545454; no pin, counter or arrows (the frame has
   none): the cards swipe, about 275 wide so the next one shows. 72 from
   Pillars' line to the heading, 64 under the cards.
   ========================================================================== */

.gs-roadmap {
	--gs-roadmap-ink: #0A0A0A;
	--gs-roadmap-text: #737373;
	--gs-roadmap-line: #EAEAEA;
	--gs-roadmap-red: var(--gs-pm-red);                   /* #E11D2E */
	--gs-roadmap-ease: cubic-bezier(0.23, 1, 0.32, 1);

	/* Full bleed, as the bands around it: cancel main's gutter, lift core's
	   max-width cap, put the gutter back inside. */
	margin-inline: calc(var(--gs-gutter-now) * -1) !important;
	max-width: none !important;
	padding: 0 var(--gs-gutter-now) 6.25rem;           /* 100 under */
	background: #F9F9F9;
	/* The card row runs to the screen edge; clip, not hidden, so nothing here
	   becomes a scroll container. */
	overflow-x: clip;
}

.gs-roadmap__inner {
	max-width: 82.5rem;                                /* 1320, as Pillars */
	margin-inline: auto;
}

/* Phase colours: the key's dots and the cards' labels. */
.gs-roadmap__key--build,
.gs-roadmap__card--build {
	--gs-roadmap-phase: #E11D2E;
	--gs-roadmap-tint: rgb(225 29 46 / 0.102);
}

.gs-roadmap__key--launch,
.gs-roadmap__card--launch {
	--gs-roadmap-phase: #FF6D24;
	--gs-roadmap-tint: rgb(255 109 36 / 0.102);
}

.gs-roadmap__key--grow,
.gs-roadmap__card--grow {
	--gs-roadmap-phase: #3B82F6;
	--gs-roadmap-tint: rgb(59 130 246 / 0.102);
}

/* --- heading, key, drawing ------------------------------------------------------ */

.gs-roadmap__top {
	position: relative;
}

/* Clear of the drawing, which sits over the top right. */
.gs-roadmap__head,
.gs-roadmap__keys,
.gs-roadmap__progress {
	max-width: calc(100% - 15.5rem);                   /* 216 + 32 */
}

.gs-roadmap--no-art .gs-roadmap__head,
.gs-roadmap--no-art .gs-roadmap__keys,
.gs-roadmap--no-art .gs-roadmap__progress {
	max-width: none;
}

.gs-roadmap__title {
	margin: 0;
	max-width: none;
	color: var(--gs-roadmap-ink);
	font-size: 3rem;                                   /* 48 */
	font-weight: 600;
	line-height: 3.875rem;                             /* 62 */
	letter-spacing: -0.136rem;                         /* -2.176px */
}

.gs-roadmap__intro {
	margin: 1rem 0 0;
	max-width: none;
	color: var(--gs-roadmap-text);
	font-size: 1rem;                                   /* 16 */
	line-height: 1.625rem;                             /* 26 */
}

.gs-roadmap__keyrow {
	margin-block-start: 1rem;                          /* 16 */
}

.gs-roadmap__keys {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;                                /* 24: dots at 0 / 163 / 323 */
	margin: 0;
	padding: 0;
	list-style: none;
}

.gs-roadmap__key {
	display: flex;
	align-items: center;
	gap: 0.5rem;                                       /* 8 */
	margin: 0;
	color: var(--gs-roadmap-ink);
	font-size: 0.875rem;                               /* 14 */
	font-weight: 600;
	line-height: 1.125rem;                             /* 18 */
}

.gs-roadmap__key::before {
	content: "";
	flex: none;
	width: 0.625rem;                                   /* 10 */
	height: 0.625rem;
	border-radius: 50%;
	background: var(--gs-roadmap-phase);
}

.gs-roadmap__art {
	position: absolute;
	top: -0.1875rem;                                   /* 3 above the heading */
	right: -0.25rem;                                   /* 4 past the edge */
	width: 13.5rem;                                    /* 216 */
	height: auto;
	pointer-events: none;
}

/* --- progress bar ----------------------------------------------------------------- */

.gs-roadmap__progress {
	width: 48.0625rem;                                 /* 769 */
	margin-block-start: 1.625rem;                      /* 26 */
}

/* As wide as the bar, so a percentage in its transform is a share of the bar:
   the pin's left edge lands on the middle of part --gs-roadmap-i. */
.gs-roadmap__marker {
	position: relative;
	height: 1.875rem;                                  /* 22 + 3.5 + 4.5 */
	transform: translateX(calc((100% - (var(--gs-roadmap-n) - 1) * 0.25rem) / var(--gs-roadmap-n) * (var(--gs-roadmap-i, 0) + 0.5) + var(--gs-roadmap-i, 0) * 0.25rem));
	transition: transform 250ms var(--gs-roadmap-ease);
	pointer-events: none;
}

.gs-roadmap__pin {
	position: absolute;
	top: 0;
	left: 0;
	height: 1.375rem;                                  /* 22 */
	padding: 0 0.5rem;                                 /* 8 */
	border-radius: 0.25rem;                            /* 4 */
	background: var(--gs-roadmap-red);
	color: var(--gs-white);
	font-size: 0.6875rem;                              /* 11 */
	font-weight: 700;
	line-height: 1.375rem;
	white-space: nowrap;
	transform: translateX(-50%);
}

.gs-roadmap__pin::after {
	content: "";
	position: absolute;
	top: calc(100% + 0.21875rem);                      /* 3.5 */
	left: 50%;
	margin-left: -0.2165rem;
	border-top: 0.28125rem solid var(--gs-roadmap-red);   /* 4.5 */
	border-inline: 0.2165rem solid transparent;        /* 6.93 wide */
}

.gs-roadmap__bar {
	display: grid;
	grid-template-columns: repeat(var(--gs-roadmap-n), minmax(0, 1fr));
	gap: 0.25rem;                                      /* 4 */
	margin: 0;
	padding: 0;
	list-style: none;
}

.gs-roadmap__part {
	height: 0.5rem;                                    /* 8 */
	margin: 0;
	border-radius: 0.125rem;                           /* 2 */
	background: var(--gs-roadmap-line);
	transition: background-color 200ms ease;
}

.gs-roadmap__part.is-done,
.gs-roadmap__part.is-active {
	background: var(--gs-roadmap-red);
}

/* An outline, not a border: the ring adds nothing to the part's width, so
   the bar never shifts (124.8 x 8 drawn as 128.8 x 12, corners 4). */
.gs-roadmap__part.is-active {
	outline: 0.125rem solid var(--gs-roadmap-red);
}

.gs-roadmap__marks {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-block-start: 0.5rem;                        /* 8 */
	color: var(--gs-roadmap-text);
	font-size: 0.75rem;                                /* 12 */
	font-weight: 700;
	line-height: 1rem;                                 /* 16 */
}

.gs-roadmap__mark:first-child {
	color: var(--gs-roadmap-ink);
}

/* --- cards ------------------------------------------------------------------------ */

/* Native scroll with snapping: touch, trackpad and keyboard work without the
   script, which only adds the arrows and keeps the shown card in step. The
   padding keeps the shown card's shadow from being cut off, the negative
   margins take it back out of the layout; the end margin runs the row to the
   screen's right edge. The end padding is the page margin again, so at the
   end of the row the last card stops as far from the right edge as the first
   one starts from the left (Adarsh, 7th October 2026: 80 on desktop, 20 on
   phones). Both use 100vw, so a desktop scrollbar's width cancels out. */
.gs-roadmap__track {
	display: flex;
	gap: 1rem;                                         /* 16 */
	max-width: none;
	margin: 2.75rem calc((100vw - 100%) / -2) -2.25rem 0;  /* 56 under the labels */
	padding: 0.75rem calc((100vw - 100%) / 2) 2.25rem 0;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	list-style: none;
}

.gs-roadmap__track::-webkit-scrollbar {
	display: none;
}

.gs-roadmap__track:focus-visible {
	outline: 0.125rem solid var(--gs-roadmap-ink);
	outline-offset: -0.125rem;
}

.gs-roadmap__card {
	display: flex;
	flex: 0 0 27.5rem;                                 /* 440 */
	flex-direction: column;
	min-height: 15.9375rem;                            /* 255 */
	margin: 0;
	padding: calc(1.5rem - var(--gs-border-width));    /* 24 with the line */
	border: var(--gs-border-width) solid var(--gs-roadmap-line);
	border-radius: 1rem;                               /* 16 */
	background: var(--gs-white);
	opacity: 0.55;
	scroll-snap-align: start;
	transition: opacity 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

/* 2px of red: the 1px line plus an inset ring, so the text never moves. */
.gs-roadmap__card.is-active {
	border-color: var(--gs-roadmap-red);
	box-shadow: inset 0 0 0 var(--gs-border-width) var(--gs-roadmap-red), 0 0.75rem 1.5rem rgb(0 0 0 / 0.05);
	opacity: 1;
}

.gs-roadmap__card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

.gs-roadmap__weeks {
	margin: 0;
	max-width: none;
	color: var(--gs-roadmap-ink);
	font-size: 1.125rem;                               /* 18 */
	font-weight: 800;
	line-height: 1.3;
}

.gs-roadmap__chip {
	flex: none;
	height: 1.375rem;                                  /* 22 */
	margin-inline-start: auto;
	padding: 0 0.625rem;                               /* 10 */
	border-radius: 100px;
	background: var(--gs-roadmap-tint);
	color: var(--gs-roadmap-phase);
	font-size: 0.6875rem;                              /* 11 */
	font-weight: 800;
	line-height: 1.375rem;
	letter-spacing: 0.0625rem;                         /* 1px */
	text-transform: uppercase;
	white-space: nowrap;
}

.gs-roadmap__card-title {
	margin: 1rem 0 0;                                  /* 16 */
	max-width: none;
	color: var(--gs-roadmap-ink);
	font-size: 1.25rem;                                /* 20 */
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0;
	text-wrap: wrap;
}

.gs-roadmap__card-text {
	margin: 0.5rem 0 0;                                /* 8 */
	max-width: none;
	color: var(--gs-roadmap-text);
	font-size: 0.875rem;                               /* 14 */
	line-height: 1.375rem;                             /* 22 */
}

.gs-roadmap__from {
	margin-block-start: 0.9375rem;                     /* 15 */
	padding-block-start: 1rem;                         /* 16 */
	border-top: var(--gs-border-width) solid var(--gs-roadmap-line);
}

.gs-roadmap__from-label {
	margin: 0;
	max-width: none;
	color: var(--gs-roadmap-text);
	font-size: 0.6875rem;                              /* 11 */
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: 0.0625rem;                         /* 1px */
	text-transform: uppercase;
}

.gs-roadmap__from-text {
	margin: 0.25rem 0 0;                               /* 4 */
	max-width: none;
	color: var(--gs-roadmap-ink);
	font-size: 0.8125rem;                              /* 13 */
	line-height: 1.3;
}

/* --- counter and arrows ------------------------------------------------------------- */

.gs-roadmap__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-block-start: 3.5rem;                        /* 56 */
}

.gs-roadmap__count {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	margin: 0;
	max-width: none;
}

.gs-roadmap__now {
	color: var(--gs-roadmap-ink);
	font-size: 1.5rem;                                 /* 24 */
	font-weight: 800;
	line-height: 1.3;
}

.gs-roadmap__total {
	color: var(--gs-roadmap-text);
	font-size: 1rem;                                   /* 16 */
	font-weight: 700;
	line-height: 1.3;
}

.gs-roadmap__nav {
	display: flex;
	gap: 1.5625rem;                                    /* 25 */
}

/* Arrows only work with the script; without it they stay out of sight and the
   row still scrolls by touch, trackpad or keyboard. */
.gs-roadmap:not(.is-ready) .gs-roadmap__nav {
	visibility: hidden;
}

.gs-roadmap__arrow {
	display: grid;
	place-items: center;
	width: 3.0455rem;                                  /* 48.73 */
	height: 3.0455rem;
	padding: 0;
	border: var(--gs-border-width) solid #000;
	border-radius: 0.5rem;                             /* 8 */
	background: #000;
	color: #F1F1F1;
	cursor: pointer;
	transition: transform 160ms ease-out, background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.gs-roadmap__arrow svg {
	width: 0.875rem;                                   /* 14 */
	height: 1.5625rem;                                 /* 25 */
}

.gs-roadmap__arrow:disabled {
	border-color: #F1F1F1;
	background: linear-gradient(180deg, #FFFFFF 0%, #F3F3F3 100%);
	color: #DDDDDD;
	cursor: default;
}

.gs-roadmap__arrow:not(:disabled):active {
	transform: scale(0.97);
}

.gs-roadmap__arrow:focus-visible {
	outline: 0.125rem solid var(--gs-roadmap-ink);
	outline-offset: 0.1875rem;
}

/* Red on hover like the site's black buttons, in the frame red of the active
   card and the bar right above, not the brighter brand red (Adarsh, 7th
   October 2026). The border goes with the fill, or a black hairline rings it. */
@media (hover: hover) and (pointer: fine) {
	.gs-roadmap__arrow:not(:disabled):hover {
		border-color: var(--gs-pm-red);
		background: var(--gs-pm-red);
	}
}

.gs-roadmap__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

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

@media (max-width: 767.98px) {
	.gs-roadmap {
		padding-block: 1.6875rem 4rem;                 /* 27 + Pillars' 45 = 72; 64 under */
	}

	.gs-roadmap__head,
	.gs-roadmap__keys,
	.gs-roadmap__progress {
		max-width: none;
	}

	.gs-roadmap__title {
		font-size: 2rem;                               /* 32 */
		font-weight: 800;
		line-height: 2.375rem;                         /* 38 */
		letter-spacing: -0.0625rem;                    /* -1px */
	}

	.gs-roadmap__intro {
		font-size: 0.875rem;                           /* 14 */
		line-height: 1.375rem;                         /* 22 */
	}

	/* The key and the drawing side by side; the key's rule stops short of the
	   drawing (239 of 350). */
	.gs-roadmap__keyrow {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 5.0938rem;   /* 81.5 */
		column-gap: 1.84375rem;                        /* 29.5: rule 239, drawing at 270 */
		align-items: start;
		margin-block-start: 2rem;                      /* 32 */
	}

	.gs-roadmap__keys {
		flex-direction: column;
		gap: 0.75rem;                                  /* 12 */
		padding-block-end: 0.5rem;                     /* 8 */
		border-bottom: var(--gs-border-width) solid #2A2E33;
	}

	.gs-roadmap__key {
		font-size: 0.8125rem;                          /* 13 */
		line-height: 1.0625rem;                        /* 17 */
	}

	.gs-roadmap__art {
		position: static;
		width: 5.0938rem;                              /* 81.5 */
		margin-block-start: -0.147rem;                 /* 2.35 above the key */
		translate: 0.094rem 0;                         /* 1.5 past the edge; a grid item's margin can't push it out */
	}

	.gs-roadmap--no-art .gs-roadmap__keyrow {
		grid-template-columns: minmax(0, 1fr);
	}

	.gs-roadmap__progress {
		width: auto;
		margin-block-start: 1.9375rem;                 /* 31 */
	}

	.gs-roadmap__marker {
		display: none;
	}

	.gs-roadmap__part {
		background: #DDDDDD;
	}

	.gs-roadmap__part.is-active {
		outline-width: var(--gs-border-width);
	}

	.gs-roadmap__marks {
		margin-block-start: 0.625rem;                  /* 10 */
		color: #545454;
		font-size: 0.6875rem;                          /* 11 */
		line-height: 0.875rem;                         /* 14 */
	}

	.gs-roadmap__mark:first-child {
		color: #545454;
	}

	.gs-roadmap__track {
		margin-block-start: 1.25rem;                   /* 32 under the labels */
	}

	/* 275 at 390: the next card shows past the edge. */
	.gs-roadmap__card {
		flex-basis: min(27.5rem, 70.5vw);
	}

	.gs-roadmap__actions {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gs-roadmap__marker {
		transition: none;
	}
}