/* Grampsaid Guides , design pass 4: dropped the boxed-card grid entirely,
   listicle/comparison/quiz now share one editorial list layout (big
   pull-number, generous whitespace, hairline divider, no boxes). Fixed
   the cover image cropping bug (object-fit: contain, no conflicting
   aspect-ratio + max-height combo). Tag/stats are now a lightweight
   byline-style row instead of chips. Suffixed classes (-gsq7f3k), no
   CSS custom properties. */

#gs-guide-root-gsq7f3k,
#gs-guide-root-gsq7f3k * {
	all: revert;
	box-sizing: border-box;
}

#gs-guide-root-gsq7f3k.gs-guide-gsq7f3k {
	background:
		radial-gradient(circle, #131a2c 1px, transparent 1px) 0 0 / 28px 28px,
		#0a0e1a;
	color: #cdd8ec;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	line-height: 1.65;
	padding: clamp(64px, 14vw, 140px) clamp(20px, 5vw, 36px) clamp(80px, 10vw, 120px);
	max-width: 920px;
	margin: 0 auto;
	display: block;
}

/* Force light blue on every link, visited or not. Without this, any
   inline link inside prose (e.g. the Writing Agent's contextual links)
   falls back to the browser default, which is purple once visited,
   scoped only to guide pages so nothing else on the site is affected. */
#gs-guide-root-gsq7f3k a:link,
#gs-guide-root-gsq7f3k a:visited {
	color: #a9c4ef;
}
#gs-guide-root-gsq7f3k a:hover,
#gs-guide-root-gsq7f3k a:active {
	color: #c3d7f5;
}

#gs-guide-root-gsq7f3k .gs-hero-gsq7f3k {
	margin-bottom: clamp(40px, 6vw, 64px);
}

#gs-guide-root-gsq7f3k .gs-breadcrumbs-gsq7f3k,
#gs-guide-root-gsq7f3k .gs-fallback-breadcrumbs-gsq7f3k {
	display: block;
	font-size: 12px;
	color: #5d6f9c;
	margin-bottom: 20px;
}
#gs-guide-root-gsq7f3k .gs-breadcrumbs-gsq7f3k a,
#gs-guide-root-gsq7f3k .gs-fallback-breadcrumbs-gsq7f3k a {
	color: #7d8bab;
	text-decoration: none;
}
#gs-guide-root-gsq7f3k .gs-breadcrumbs-gsq7f3k a:hover,
#gs-guide-root-gsq7f3k .gs-fallback-breadcrumbs-gsq7f3k a:hover {
	color: #a9c4ef;
	text-decoration: underline;
}
#gs-guide-root-gsq7f3k .gs-breadcrumbs-gsq7f3k span,
#gs-guide-root-gsq7f3k .gs-fallback-breadcrumbs-gsq7f3k span {
	color: #5d6f9c;
}

#gs-guide-root-gsq7f3k .gs-label-gsq7f3k {
	display: block;
	font-size: 12px;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: #7d8bab;
	margin-bottom: 16px;
}

#gs-guide-root-gsq7f3k .gs-title-gsq7f3k {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: clamp(28px, 5vw, 48px);
	font-weight: 400;
	color: #f2f5fb;
	line-height: 1.22;
	letter-spacing: -0.01em;
	margin: 0;
}
#gs-guide-root-gsq7f3k .gs-title-gsq7f3k em {
	font-style: italic;
	color: #a9c4ef;
}

#gs-guide-root-gsq7f3k .gs-meta-line-gsq7f3k {
	display: block;
	color: #5d6f9c;
	font-size: 12px;
	margin-top: 14px;
}

#gs-guide-root-gsq7f3k .gs-intro-gsq7f3k {
	display: block;
	color: #b7c3de;
	font-size: clamp(15px, 2.2vw, 18px);
	line-height: 1.6;
	max-width: 680px;
	margin: 20px 0 0;
}

/* Hero image , fixed: object-fit: contain means the full generated
   image always shows, nothing gets cropped. A card-colored backdrop
   fills any letterbox space so it never looks like plain black bars. */
#gs-guide-root-gsq7f3k .gs-hero-image-gsq7f3k {
	display: block;
	margin: 32px 0 0;
	border-radius: 8px;
	overflow: hidden;
	background: #0d1224;
	max-height: 460px;
	text-align: center;
}
#gs-guide-root-gsq7f3k .gs-hero-image-gsq7f3k img {
	display: inline-block;
	width: 100%;
	height: auto;
	max-height: 460px;
	object-fit: contain;
}

#gs-guide-root-gsq7f3k .gs-callout-gsq7f3k {
	display: block;
	background: #1c1608;
	border-left: 3px solid #d9a24b;
	padding: clamp(18px, 3vw, 26px) clamp(20px, 3.5vw, 28px);
	margin: clamp(32px, 5vw, 44px) 0;
}
#gs-guide-root-gsq7f3k .gs-callout-label-gsq7f3k {
	display: block;
	color: #d9a24b;
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin-bottom: 8px;
}
#gs-guide-root-gsq7f3k .gs-callout-gsq7f3k p {
	display: block;
	color: #e8d9b8;
	font-size: 15px;
	line-height: 1.6;
	margin: 0;
}

#gs-guide-root-gsq7f3k .gs-section-gsq7f3k {
	display: block;
	margin: clamp(36px, 6vw, 56px) 0;
	border-top: 1px solid #1b2440;
	padding-top: clamp(24px, 4vw, 36px);
}

#gs-guide-root-gsq7f3k .gs-section-heading-gsq7f3k {
	display: block;
	font-family: 'Playfair Display', Georgia, serif;
	font-size: clamp(20px, 3vw, 27px);
	font-weight: 400;
	color: #eef2fa;
	margin: 0 0 12px;
}

#gs-guide-root-gsq7f3k .gs-prose-gsq7f3k p {
	display: block;
	color: #b7c3de;
	margin: 0 0 16px;
	text-decoration: none;
	font-style: normal;
	font-size: clamp(14px, 1.6vw, 16px);
}

/* Tag/stats , lightweight byline row, no boxes or backgrounds. Thin
   vertical dividers between entries instead of pill/chip treatment. */
#gs-guide-root-gsq7f3k .gs-item-meta-gsq7f3k {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	margin: 6px 0 16px;
}
#gs-guide-root-gsq7f3k .gs-item-meta-gsq7f3k > * {
	padding-right: 16px;
	margin-right: 16px;
	border-right: 1px solid #1e2a47;
}
#gs-guide-root-gsq7f3k .gs-item-meta-gsq7f3k > *:last-child {
	border-right: none;
	padding-right: 0;
	margin-right: 0;
}
#gs-guide-root-gsq7f3k .gs-tag-gsq7f3k {
	color: #d9a24b;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1px;
}
#gs-guide-root-gsq7f3k .gs-stat-gsq7f3k {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
}
#gs-guide-root-gsq7f3k .gs-stat-label-gsq7f3k {
	color: #5d6f9c;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
#gs-guide-root-gsq7f3k .gs-stat-value-gsq7f3k {
	color: #dbe4f5;
	font-size: 13px;
	font-weight: 600;
}

/* Unified editorial list , replaces the old boxed card grid entirely.
   Used by listicle, comparison, and quiz. Single column always, a
   large pull-number, generous vertical rhythm, only a hairline top
   divider between items, no background fill, no border box. */
#gs-guide-root-gsq7f3k .gs-editorial-list-gsq7f3k {
	display: block;
	margin: clamp(36px, 6vw, 56px) 0;
}

#gs-guide-root-gsq7f3k .gs-editorial-item-gsq7f3k {
	display: flex;
	gap: clamp(24px, 4vw, 40px);
	align-items: flex-start;
	padding: clamp(30px, 5vw, 48px) 0;
	border-top: 1px solid #1b2440;
}
#gs-guide-root-gsq7f3k .gs-editorial-item-gsq7f3k:first-child {
	border-top: 1px solid #1b2440;
}

#gs-guide-root-gsq7f3k .gs-editorial-num-gsq7f3k {
	display: block;
	flex-shrink: 0;
	font-family: 'Playfair Display', Georgia, serif;
	font-size: clamp(32px, 5.5vw, 52px);
	font-weight: 400;
	color: #4a628f;
	min-width: 56px;
	line-height: 1;
}

#gs-guide-root-gsq7f3k .gs-editorial-body-gsq7f3k {
	display: block;
	flex: 1;
	min-width: 0;
	padding-top: 4px;
}

#gs-guide-root-gsq7f3k .gs-editorial-heading-gsq7f3k {
	display: block;
	font-family: 'Playfair Display', Georgia, serif;
	font-size: clamp(19px, 3vw, 25px);
	font-weight: 400;
	color: #eef2fa;
	margin: 0 0 10px;
	line-height: 1.3;
}

#gs-guide-root-gsq7f3k .gs-editorial-text-gsq7f3k {
	display: block;
	color: #b7c3de;
	font-size: clamp(14px, 1.7vw, 16px);
	line-height: 1.65;
	margin: 0;
}

#gs-guide-root-gsq7f3k .gs-faq-gsq7f3k {
	display: block;
	margin: clamp(48px, 7vw, 72px) 0;
	border-top: 1px solid #1b2440;
	padding-top: clamp(32px, 5vw, 44px);
}

#gs-guide-root-gsq7f3k .gs-faq-title-gsq7f3k {
	display: block;
	font-family: 'Playfair Display', Georgia, serif;
	font-size: clamp(24px, 4vw, 32px);
	font-weight: 400;
	color: #eef2fa;
	margin: 0 0 28px;
}
#gs-guide-root-gsq7f3k .gs-faq-title-gsq7f3k em {
	font-style: italic;
	color: #a9c4ef;
}

#gs-guide-root-gsq7f3k .gs-faq-item-gsq7f3k {
	display: block;
	border-bottom: 1px solid #1b2440;
	padding: 16px 0;
}

#gs-guide-root-gsq7f3k .gs-faq-item-gsq7f3k summary {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	cursor: pointer;
	color: #dbe4f5;
	font-size: 14px;
	font-weight: 500;
	list-style: none;
	text-decoration: none;
}
#gs-guide-root-gsq7f3k .gs-faq-item-gsq7f3k summary::-webkit-details-marker {
	display: none;
}
#gs-guide-root-gsq7f3k .gs-faq-item-gsq7f3k summary::after {
	content: '+';
	color: #5d6f9c;
	flex-shrink: 0;
}
#gs-guide-root-gsq7f3k .gs-faq-item-gsq7f3k[open] summary::after {
	content: '\2212';
}

#gs-guide-root-gsq7f3k .gs-faq-answer-gsq7f3k {
	display: block;
	margin-top: 12px;
	color: #93a1c2;
	font-size: 13px;
	line-height: 1.6;
}

#gs-guide-root-gsq7f3k .gs-related-gsq7f3k {
	display: block;
	margin: clamp(32px, 5vw, 44px) 0;
	border-top: 1px solid #1b2440;
	padding-top: 20px;
}
#gs-guide-root-gsq7f3k .gs-related-gsq7f3k ul {
	list-style: none;
	padding: 0;
	margin: 12px 0 0;
	display: block;
}
#gs-guide-root-gsq7f3k .gs-related-gsq7f3k li {
	display: block;
	margin-bottom: 8px;
}
#gs-guide-root-gsq7f3k .gs-related-gsq7f3k a {
	color: #a9c4ef;
	text-decoration: none;
	font-size: 13px;
}
#gs-guide-root-gsq7f3k .gs-related-gsq7f3k a:hover {
	text-decoration: underline;
}

#gs-guide-root-gsq7f3k .gs-cta-gsq7f3k {
	display: block;
	margin-top: clamp(48px, 8vw, 80px);
	padding: clamp(24px, 4vw, 36px) clamp(24px, 4vw, 32px);
	background: #0d1224;
	border-left: 3px solid #a9c4ef;
	text-align: left;
}

#gs-guide-root-gsq7f3k .gs-cta-heading-gsq7f3k {
	display: block;
	font-family: 'Playfair Display', Georgia, serif;
	font-size: clamp(20px, 3.2vw, 25px);
	font-weight: 400;
	color: #f2f5fb;
	margin: 0 0 10px;
	text-decoration: none;
	font-style: normal;
}

#gs-guide-root-gsq7f3k .gs-cta-text-gsq7f3k {
	display: block;
	color: #93a1c2;
	max-width: 560px;
	margin: 0 0 22px;
	text-decoration: none;
	font-style: normal;
	font-size: 14px;
	line-height: 1.6;
}

#gs-guide-root-gsq7f3k .gs-button-gsq7f3k {
	display: inline-block;
	background: #a9c4ef;
	color: #0a0e1a;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
	padding: 14px 26px;
}
#gs-guide-root-gsq7f3k .gs-button-gsq7f3k:hover {
	background: #c3d7f5;
}

#gs-guide-root-gsq7f3k .gs-archive-heading-gsq7f3k {
	margin-bottom: 0;
}

#gs-guide-root-gsq7f3k .gs-quiz-summary-gsq7f3k {
	display: block;
	background: #0d1224;
	border: 1px solid #223056;
	padding: clamp(20px, 4vw, 28px);
	margin: 0 0 clamp(32px, 5vw, 48px);
}
#gs-guide-root-gsq7f3k .gs-quiz-summary-gsq7f3k p {
	display: block;
	color: #dbe4f5;
	font-size: 15px;
	margin: 0;
	line-height: 1.6;
}

/* Archive/index listing only , this is a browsing grid of many guides,
   a grid still makes sense here since it's thumbnails, not article
   content. Not used on single guide pages anymore. */
#gs-guide-root-gsq7f3k .gs-card-grid-gsq7f3k {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(20px, 3vw, 32px);
	margin: clamp(32px, 5vw, 48px) 0;
}
#gs-guide-root-gsq7f3k .gs-card-gsq7f3k {
	display: block;
	background: #0d1224;
	border: 1px solid #1b2440;
	border-radius: 6px;
	padding: clamp(20px, 3vw, 26px);
}
#gs-guide-root-gsq7f3k .gs-card-link-gsq7f3k {
	text-decoration: none;
	display: block;
	transition: border-color 0.2s ease;
}
#gs-guide-root-gsq7f3k .gs-card-link-gsq7f3k:hover {
	border-color: #2e3f6b;
}
#gs-guide-root-gsq7f3k .gs-card-heading-gsq7f3k {
	display: block;
	color: #eef2fa;
	font-size: 16px;
	font-weight: 500;
	margin: 0 0 8px;
}
#gs-guide-root-gsq7f3k .gs-card-text-gsq7f3k {
	display: block;
	color: #93a1c2;
	font-size: 13px;
	margin: 0;
	line-height: 1.55;
}
#gs-guide-root-gsq7f3k .gs-card-thumb-gsq7f3k img {
	width: 100%;
	height: auto;
	margin: 0 0 16px;
	display: block;
	border-radius: 4px;
}

@media (max-width: 700px) {
	#gs-guide-root-gsq7f3k .gs-editorial-item-gsq7f3k {
		gap: 18px;
	}
	#gs-guide-root-gsq7f3k .gs-editorial-num-gsq7f3k {
		font-size: 26px;
		min-width: 36px;
	}
	#gs-guide-root-gsq7f3k .gs-card-grid-gsq7f3k {
		grid-template-columns: minmax(0, 1fr);
	}
	#gs-guide-root-gsq7f3k .gs-faq-item-gsq7f3k summary {
		font-size: 13px;
	}
}