/* Girls Can't WHAT? homepage: the same upscale-but-playful look as the design and gift pages.
   Loaded by Colorize::homeLookEnabled() (body.gcw-home). IDs come from the homepage Bricks build. */

body.gcw-home {
	--gl-cream: #F8F2E8;
	--gl-sand: #EFEAE1;
	--gl-line: #E2DDD3;
	--gl-navy: #0E2A47;
	--gl-blue: #0677BD;
	--gl-magenta: #C40075;
	--gl-pink: #F5B8D8;
	--gl-muted: #4E6479;
	--gl-display: var(--gcw-display, 'Bricolage Grotesque'), 'Instrument Sans', system-ui, sans-serif;
	--gl-shadow: 0 1px 0 rgba(14, 42, 71, .04), 0 22px 44px -22px rgba(14, 42, 71, .28);
	--gl-glow:
		radial-gradient(circle at 22% 18%, #FFE3F1 0, rgba(255, 227, 241, 0) 44%),
		radial-gradient(circle at 82% 84%, #DCEEFB 0, rgba(220, 238, 251, 0) 48%);
	--gl-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.6 6.6L21 9.3l-5 4.4 1.5 6.8L12 17l-5.5 3.5L8 13.7 3 9.3l6.4-.7z' fill='%23FFD179' stroke='%230E2A47' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E");
	--gl-pinkstar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.6 6.6L21 9.3l-5 4.4 1.5 6.8L12 17l-5.5 3.5L8 13.7 3 9.3l6.4-.7z' fill='%23F5B8D8' stroke='%230E2A47' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E");
	--gl-squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 Q50 1 100 7 T198 5' fill='none' stroke='%23F5B8D8' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
	--gl-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 22'%3E%3Cpath d='M2 12q7-10 14 0t14 0 14 0 14 0' fill='none' stroke='%230677BD' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
	background: var(--gl-cream);
}

/* ---------- Section rhythm: cream, white, cream, navy, white, cream ---------- */
.gcw-home #gcwhero { background: var(--gl-cream) !important; }
.gcw-home #how { background: #fff !important; }
.gcw-home #try { background: var(--gl-cream) !important; }
.gcw-home #gcwfounder { background: #fff !important; }
.gcw-home #mission { background: var(--gl-cream) !important; }

.gcw-home .gcw-eyebrow { color: var(--gl-magenta) !important; }

/* ---------- Buttons: magenta primary, navy outline secondary ---------- */
.gcw-home .gcw-btn-primary {
	background: var(--gl-magenta) !important;
	border-color: var(--gl-magenta) !important;
	color: #fff !important;
	box-shadow: 0 14px 26px -12px rgba(196, 0, 117, .65);
	transition: background-color .15s ease, transform .15s ease;
}
.gcw-home .gcw-btn-primary:hover { background: #910156 !important; border-color: #910156 !important; transform: translateY(-2px); }
.gcw-home .gcw-btn-ghost {
	border-color: var(--gl-navy) !important;
	color: var(--gl-navy) !important;
	background: transparent !important;
}
.gcw-home .gcw-btn-ghost:hover { background: var(--gl-navy) !important; color: #fff !important; }

/* ---------- Hero ---------- */
/* Hand-drawn underline under the rotating career; a background, so it follows the text as it changes */
.gcw-home #gcwrot {
	color: var(--gl-magenta);
	background: var(--gl-squiggle) left bottom / 100% .2em no-repeat;
	padding-bottom: .06em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
.gcw-home #gcwq { color: var(--gl-navy); }
/* "Who says girls can't" as a one-line lead-in above the rotating career */
.gcw-home #gcwlead {
	display: block;
	margin-bottom: .1em;
	font-size: .6em;
	line-height: 1.1;
	letter-spacing: -.015em;
	white-space: nowrap;
}
.gcw-home #gcwstage { position: relative; }
.gcw-home #gcwarch {
	border-radius: 28px !important;
	background: var(--gl-glow), #fff !important;
	box-shadow: var(--gl-shadow);
}
.gcw-home #gcwstage::after {
	content: "";
	position: absolute;
	top: 6%;
	right: 2%;
	width: 40px;
	height: 40px;
	transform: rotate(12deg);
	background: var(--gl-star) center / contain no-repeat;
	pointer-events: none;
}
.gcw-home #gcwstage::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 16%;
	z-index: 2;
	width: 64px;
	height: 24px;
	background: var(--gl-wave) center / contain no-repeat;
	pointer-events: none;
}
.gcw-home #gcwtag { box-shadow: var(--gl-shadow); }

/* ---------- How it works: three cream step cards ---------- */
.gcw-home #gcwsteps {
	border-top: 0 !important;
	padding-top: 0 !important;
	gap: clamp(16px, 2vw, 24px) !important;
}
.gcw-home .gcw-step {
	padding: clamp(22px, 2.6vw, 32px);
	border-radius: 28px;
	background: var(--gl-cream);
	transition: transform .18s ease, box-shadow .18s ease;
}
.gcw-home .gcw-step:hover { transform: translateY(-3px); box-shadow: var(--gl-shadow); }
.gcw-home .gcw-n {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 1.2rem !important;
	font-weight: 600 !important;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--gl-magenta) !important;
}
.gcw-home .gcw-h3 { font-family: var(--gl-display); color: var(--gl-navy); }
.gcw-home #gcwchips > * { background: #fff !important; border-color: var(--gl-line) !important; }

/* ---------- Try it: studio card + staged preview ---------- */
.gcw-home #gcwswatches {
	padding: clamp(18px, 2.4vw, 28px);
	border-radius: 28px;
	background: #fff;
	box-shadow: var(--gl-shadow);
}
.gcw-home #gcwswatches .gcw-sw { box-shadow: 0 0 0 1px var(--gl-line); }
.gcw-home #gcwswatches .gcw-sw[aria-pressed="true"],
.gcw-home #gcwswatches .gcw-pick[data-on="true"] { box-shadow: 0 0 0 2px var(--gl-navy); }
.gcw-home #gcwpreview {
	position: relative;
	border: 0 !important;
	border-radius: 28px !important;
	background: var(--gl-glow), #fff !important;
	box-shadow: var(--gl-shadow);
	overflow: hidden;
}
.gcw-home #gcwpreview::before {
	content: "Live preview";
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 2;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--gl-navy);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.gcw-home #gcwpreview::after {
	content: "";
	position: absolute;
	top: 18px;
	right: 20px;
	width: 34px;
	height: 34px;
	background: var(--gl-star) center / contain no-repeat;
	pointer-events: none;
}

/* ---------- Characters (navy band): glowing cards ---------- */
.gcw-home .gcw-pic {
	border-radius: 24px !important;
	background: var(--gl-glow), #fff !important;
	isolation: isolate;
	transition: transform .18s ease, box-shadow .18s ease;
}
.gcw-home .gcw-pic img { mix-blend-mode: multiply; transition: transform .25s ease; }
.gcw-home .gcw-char:hover .gcw-pic { transform: translateY(-4px); box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .6); }
.gcw-home .gcw-char:hover .gcw-pic img { transform: scale(1.03) rotate(-1deg); }
.gcw-home .gcw-char .gcw-name { font-family: var(--gl-display); font-weight: 700; }

/* ---------- Founder ---------- */
.gcw-home #gcwquote {
	position: relative;
	padding-left: 32px;
	border-left: 4px solid var(--gl-pink);
}
.gcw-home #gcwquote::before {
	content: "";
	position: absolute;
	left: -17px;
	top: -34px;
	width: 30px;
	height: 30px;
	transform: rotate(-12deg);
	background: var(--gl-pinkstar) center / contain no-repeat;
}
.gcw-home #gcwquoteem { color: var(--gl-magenta) !important; }
.gcw-home #gcwstory { color: var(--gl-blue) !important; }

/* ---------- Mission: cream with a magenta 20% ---------- */
.gcw-home #gcwbig .brxe-text-basic {
	color: var(--gl-magenta) !important;
	display: inline-block;
	padding-bottom: .14em;
	background: var(--gl-squiggle) left bottom / 100% .1em no-repeat;
}
.gcw-home #gcwmh2 { color: var(--gl-navy) !important; }
.gcw-home #gcwmp { color: var(--gl-muted) !important; }

@media (max-width: 767px) {
	.gcw-home #gcwstage::before,
	.gcw-home #gcwstage::after { display: none; }
	.gcw-home .gcw-step { border-radius: 22px; }
	.gcw-home #gcwswatches, .gcw-home #gcwpreview, .gcw-home #gcwarch { border-radius: 22px !important; }
	.gcw-home #gcwswatches { padding: 14px 12px; }
	.gcw-home #gcwswatches .gcw-sw-row { grid-template-columns: 56px 1fr; gap: 8px; }
	.gcw-home #gcwswatches .gcw-sw-lbl { font-size: 11px; }
	.gcw-home #gcwswatches .gcw-sw-opts { gap: 6px; }
	.gcw-home #gcwswatches .gcw-sw,
	.gcw-home #gcwswatches .gcw-pick { width: 30px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
	.gcw-home .gcw-step, .gcw-home .gcw-pic, .gcw-home .gcw-pic img, .gcw-home .gcw-btn-primary { transition: none; }
}

/* ---------- "Three steps" art panels (built by home.js) ---------- */
.gcw-home .gcw-step-art {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	width: 100%;
	box-sizing: border-box;
	height: 170px;
	margin-bottom: 22px;
	border-radius: 20px;
	background: var(--gl-glow), #fff;
	overflow: hidden;
}
/* 1: fanned character cards */
.gcw-home .gcw-fan-card {
	display: block;
	width: 92px;
	height: 116px;
	margin: 0 -14px;
	padding: 6px;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 10px 22px -12px rgba(14, 42, 71, .45), 0 0 0 1px var(--gl-line);
	transition: transform .25s ease;
}
.gcw-home .gcw-fan-card img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 0; }
.gcw-home .gcw-fan-card:nth-child(1) { transform: rotate(-11deg) translateY(8px); }
.gcw-home .gcw-fan-card:nth-child(2) { position: relative; z-index: 1; transform: translateY(-4px); }
.gcw-home .gcw-fan-card:nth-child(3) { transform: rotate(11deg) translateY(8px); }
.gcw-home .gcw-step:hover .gcw-fan-card:nth-child(1) { transform: rotate(-16deg) translate(-8px, 6px); }
.gcw-home .gcw-step:hover .gcw-fan-card:nth-child(3) { transform: rotate(16deg) translate(8px, 6px); }
/* 2: mini designer */
.gcw-home .gcw-art-ui { flex-direction: column; gap: 14px; }
.gcw-home .gcw-ui-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 14px 5px 5px;
	border-radius: 999px;
	background: var(--gl-navy);
	color: #fff;
	font-size: 14px;
	font-weight: 500;
}
.gcw-home .gcw-ui-dot { width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 0 0 2px #fff; }
.gcw-home .gcw-ui-row { display: flex; align-items: center; gap: 8px; }
.gcw-home .gcw-ui-sw {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 3px solid #fff;
	box-shadow: 0 0 0 1px var(--gl-line);
	transition: transform .2s ease;
}
.gcw-home .gcw-ui-sw.on { box-shadow: 0 0 0 2px var(--gl-navy); }
.gcw-home .gcw-ui-any {
	width: 40px;
	height: 40px;
	margin-left: 4px;
	border-radius: 50%;
	background: conic-gradient(#E3212E, #F5EB2A, #119C49, #29C3F3, #0677BD, #C40075, #E3212E);
	box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--gl-blue);
}
.gcw-home .gcw-step:hover .gcw-ui-sw:nth-child(2) { transform: translateY(-4px); }
.gcw-home .gcw-step:hover .gcw-ui-sw:nth-child(4) { transform: translateY(-4px); }
/* 3: gear mockups */
.gcw-home .gcw-art-gear { gap: 2px; }
.gcw-home .gcw-gear { position: relative; display: block; width: 96px; height: 96px; transition: transform .25s ease; }
.gcw-home .gcw-gear svg { display: block; width: 100%; height: 100%; }
.gcw-home .gcw-gear img { position: absolute; object-fit: contain; border-radius: 0; }
.gcw-home .gcw-gear-tee img { left: 33%; top: 30%; width: 34%; height: 42%; }
.gcw-home .gcw-gear-mug img { left: 20%; top: 30%; width: 40%; height: 48%; }
.gcw-home .gcw-gear-tote img { left: 28%; top: 42%; width: 44%; height: 46%; }
.gcw-home .gcw-gear-mug { transform: translateY(6px); }
.gcw-home .gcw-step:hover .gcw-gear-tee { transform: rotate(-5deg); }
.gcw-home .gcw-step:hover .gcw-gear-tote { transform: rotate(5deg); }
@media (max-width: 767px) {
	.gcw-home .gcw-step-art { height: 150px; }
	.gcw-home .gcw-gear { width: 88px; height: 88px; }
}
@media (prefers-reduced-motion: reduce) {
	.gcw-home .gcw-fan-card, .gcw-home .gcw-ui-sw, .gcw-home .gcw-gear { transition: none; }
}

/* ---------- Hero: label inside the card, dots centered under it ---------- */
.gcw-home #gcwarch { position: relative; }
.gcw-home #gcwtag.gcw-tag-in {
	position: absolute;
	top: 16px;
	left: 16px;
	right: auto;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: auto;
	max-width: calc(100% - 32px);
	margin: 0;
	padding: 4px 12px 4px 4px;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 6px 16px -8px rgba(14, 42, 71, .35), 0 0 0 1px rgba(14, 42, 71, .06);
	font-size: 13px;
	white-space: nowrap;
}
.gcw-home #gcwtag.gcw-tag-in #gcwtagbadge {
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 10.5px;
	letter-spacing: .1em;
	line-height: 1.2;
}
.gcw-home #gcwtag.gcw-tag-in #gcwtagname { font-weight: 600; color: var(--gl-navy); }
.gcw-home #gcwdots {
	display: flex !important;
	justify-content: center;
	gap: 8px;
	width: 100%;
	margin-top: 18px;
}