/* ==========================================================================
   /turf-care-guides/ — the care guide hub and the five guide pages.
   Cloned from artificial-turf-cost-dallas.css (verified contrast) with the prefix renamed.
   Loads AFTER /assets/css/base.css (shared chrome + tokens). Every colour here
   is either a base.css token or one of the two shades the sibling pages
   (/pet-turf/, /putting-greens/) already use for panels: #121212 card,
   #191919 tile, #8ee000 bright lime, #54780A lime rule.

   Contrast measured against the panel the text actually sits on:
     #FFFFFF on #121212 ...... 18.0 : 1
     #C9CFD5 on #121212 ...... 11.0 : 1   (spec values, tile body copy)
     #9AA0A6 on #121212 ....... 7.1 : 1   (lede / secondary copy)
     #8EE000 on #121212 ...... 11.4 : 1   (lime headings, links)
     #8EE000 on #191919 ...... 10.7 : 1
     #0A0A0A on #84BD00 ....... 8.7 : 1   (dark text on the lime button;
                                           white on lime is 2.27:1 — never used)
     #54780A on #121212 ....... 3.6 : 1   (every functional boundary: the spec
                                           table frame + header rule, the
                                           spec-sheet button, the closing CTA)
     #FFFFFF on the hero ...... 7.7 : 1   (worst case: the overlay is 70% opaque
                                           #060A04, so even a pure-white pixel
                                           of the photo lands at rgb(81,84,79))

   The one exception is the 1px #262626 outline on the choose/product cards
   (1.24:1). That is decorative — the card is identified by its #121212 panel,
   not by the hairline, nothing about it is interactive, and it is the same
   treatment /pet-turf/ uses on .pt-problem__card (#1F1F1F). WCAG 1.4.11 covers
   boundaries needed to IDENTIFY a control; it does not ask for a 3:1 hairline
   around a static panel, and forcing one here would shout over the quiet dark
   surface both sibling pages are built on.
   ========================================================================== */

.cg-main {
	font-family: var(--gg-font);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.6;
	color: #fff;
}
/* zero-specificity reset so the component rules below always win */
.cg-main :where(h1, h2, h3, p, figure, ul, table, caption) { margin: 0; }
.cg-main :where(ul) { padding: 0; list-style: none; }
.cg-main img { display: block; max-width: 100%; height: auto; }

/* ---------- shared bits ---------- */

.cg-shell {
	max-width: 1180px;
	margin: 0 auto;
}

.cg-section {
	margin: 96px 0;
	padding: 0 30px;
}
.cg-section--last { margin-bottom: 110px; }

/* lime pill, same shape as the sibling pages */
.cg-pill {
	display: inline-block;
	padding: 6px 18px;
	border-radius: 999px;
	background: rgba(132, 189, 0, .14);
	border: 1px solid rgba(132, 189, 0, .45);
	color: #fff;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .6px;
}

.cg-lime { color: #8ee000; }

.cg-h2 {
	margin-top: 18px;
	font-size: 38px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.5px;
	color: #fff;
}
.cg-h2--sm { font-size: 30px; }

.cg-lede {
	margin-top: 16px;
	max-width: 68ch;
	font-size: 16px;
	line-height: 1.65;
	color: #9AA0A6;
}

.cg-head { margin-bottom: 40px; }
.cg-head--center { text-align: center; }
.cg-head--center .cg-lede { margin-left: auto; margin-right: auto; }

/* buttons */
.cg-btn {
	display: inline-block;
	font-family: var(--gg-font);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.1;
	padding: 16px 25px;
	border-radius: 8px;
	text-decoration: none;
	text-align: center;
	transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.cg-btn--lime { background-color: #84BD00; color: #0A0A0A; }
.cg-btn--lime:hover,
.cg-btn--lime:focus { background-color: #8ee000; color: #0A0A0A; }
.cg-btn--ghost { background-color: transparent; color: #fff; border: 1px solid #fff; }
.cg-btn--ghost:hover,
.cg-btn--ghost:focus { background-color: rgba(255, 255, 255, .12); }

/* spec-sheet button: quieter than the lime CTA, still a real 3:1 border */
.cg-btn--sheet {
	background-color: rgba(132, 189, 0, .10);
	border: 1px solid #54780A;
	color: #8ee000;
	padding: 13px 20px;
	/* the label carries the product name so it still makes sense out of
	   context; balance keeps the longest one from breaking off a lone "(PDF)" */
	text-wrap: balance;
}
.cg-btn--sheet:hover,
.cg-btn--sheet:focus { background-color: #84BD00; border-color: #84BD00; color: #0A0A0A; }

/* text links */
.cg-link {
	display: inline-block;
	font-size: 14px;
	font-weight: 700;
	color: #8ee000;
	text-decoration: none;
	border-bottom: 1px solid rgba(142, 224, 0, .45);
	padding-bottom: 1px;
	transition: border-color .3s ease, color .3s ease;
}
.cg-link:hover,
.cg-link:focus { border-bottom-color: #8ee000; }
.cg-link::after { content: ' \2192'; }

.cg-inline { color: #8ee000; text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   HERO
   ========================================================================== */
.cg-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 520px;
	padding: 96px 30px 88px;
	background-color: #12220F;
	background-image: url('/assets/images/bg-green.webp');
	background-position: center 62%;
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
}
/* the ground the hero type is measured against: the overlay takes the photo
   down to roughly #0E1409, so #fff sits well past 12:1 anywhere on it */
.cg-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(6, 10, 4, .82) 0%, rgba(6, 10, 4, .70) 45%, rgba(6, 10, 4, .88) 100%);
}
.cg-hero__inner {
	position: relative;
	width: 100%;
	max-width: 760px;
	text-align: center;
}
.cg-hero__title {
	margin-top: 22px;
	font-size: 56px;
	font-weight: 900;
	line-height: 1.05;
	letter-spacing: -1.5px;
	color: #fff;
}
.cg-hero__sub {
	margin: 22px auto 0;
	max-width: 620px;
	font-size: 17px;
	line-height: 1.6;
	color: #D6DBE0;
}
.cg-hero__btns {
	margin-top: 32px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}
.cg-trustbar {
	margin-top: 34px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}
.cg-trustbar li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .07);
	font-size: 13px;
	font-weight: 600;
	color: #e4e7ea;
}
.cg-trustbar li::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #8ee000;
	flex: none;
}

/* ==========================================================================
   HOW TO CHOOSE
   ========================================================================== */
.cg-choose {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}
.cg-choose__card {
	background-color: #121212;
	border: 1px solid #262626;
	border-radius: var(--gg-radius-lg);
	padding: 28px 28px 24px;
	display: flex;
	flex-direction: column;
}
.cg-choose__case {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #8ee000;
}
.cg-choose__pick {
	margin-top: 10px;
	font-size: 24px;
	font-weight: 800;
	line-height: 1.2;
	color: #fff;
}
.cg-choose__note {
	margin-top: 12px;
	font-size: 15px;
	line-height: 1.65;
	color: #C9CFD5;
	flex: 1 1 auto;
}
.cg-choose__links {
	margin-top: 20px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
}

/* ==========================================================================
   THE RANGE — product cards + spec tables
   ========================================================================== */
.cg-product {
	display: flex;
	gap: 32px;
	/* stretch, not flex-start: the photo becomes a full-height panel beside the
	   spec table instead of a small square with dead space under it */
	align-items: stretch;
	background-color: #121212;
	border: 1px solid #262626;
	border-radius: var(--gg-radius-lg);
	padding: 28px;
	/* the header is fixed (123px desktop) / sticky (70px bar) — keep the
	   anchor jumps from the "how to choose" cards clear of it */
	scroll-margin-top: 145px;
}
.cg-product + .cg-product { margin-top: 24px; }

.cg-product__media { flex: 0 0 300px; display: flex; }
.cg-product__media img {
	width: 100%;
	height: 100%;
	min-height: 300px;
	object-fit: cover;
	border-radius: 16px;
}
.cg-product__body { flex: 1 1 auto; min-width: 0; }

.cg-product__kind {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: #8ee000;
}
.cg-product__name {
	margin-top: 8px;
	font-size: 30px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.4px;
	color: #fff;
}
.cg-product__desc {
	margin-top: 12px;
	max-width: 62ch;
	font-size: 15.5px;
	line-height: 1.65;
	color: #9AA0A6;
}
.cg-product__links {
	margin-top: 22px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 22px;
}

/* ---- the spec table ---- */
.cg-tablewrap {
	margin-top: 22px;
	border: 1px solid #54780A;
	border-radius: 14px;
	/* clips the zebra rows to the rounded corners */
	overflow: hidden;
	background-color: #191919;
}
.cg-spec {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	font-size: 15px;
}
/* the caption repeats the product name for screen readers and for anything
   extracting the table out of the page; it is not shown twice visually */
.cg-spec__caption {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}
.cg-spec thead th {
	background-color: #101a02;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	text-align: left;
	color: #8ee000;
	padding: 13px 20px;
	border-bottom: 1px solid #54780A;
}
.cg-spec thead th + th { color: #fff; }
/* table-layout is fixed, so the column widths come from this first row alone */
.cg-spec thead th:first-child { width: 250px; }
.cg-spec tbody th,
.cg-spec tbody td {
	padding: 14px 20px;
	text-align: left;
	vertical-align: top;
	overflow-wrap: break-word;
}
.cg-spec tbody tr + tr th,
.cg-spec tbody tr + tr td { border-top: 1px solid rgba(247, 248, 237, .12); }
.cg-spec tbody th {
	font-weight: 500;
	color: #9AA0A6;
}
.cg-spec tbody td {
	font-weight: 700;
	color: #fff;
}
.cg-spec tbody tr:hover th { color: #C9CFD5; }

/* ==========================================================================
   WHAT THE NUMBERS MEAN
   ========================================================================== */
.cg-explain {
	background-color: #121212;
	border: 1px solid #262626;
	border-radius: var(--gg-radius-lg);
	padding: 48px 40px 44px;
}
.cg-explain .cg-head { margin-bottom: 36px; }
.cg-explain__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}
.cg-explain__tile {
	background-color: #191919;
	border-radius: 16px;
	padding: 24px 24px 26px;
	border-left: 3px solid #54780A;
}
.cg-explain__title {
	font-size: 19px;
	font-weight: 800;
	line-height: 1.2;
	color: #8ee000;
}
.cg-explain__body {
	margin-top: 10px;
	font-size: 15px;
	line-height: 1.65;
	color: #C9CFD5;
}

/* ==========================================================================
   CLOSING CTA
   ========================================================================== */
.cg-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	background-color: #121212;
	border: 1px solid #54780A;
	border-radius: var(--gg-radius-lg);
	padding: 44px 40px;
}
.cg-cta__copy { flex: 1 1 420px; min-width: 0; }
.cg-cta__copy .cg-lede { max-width: 56ch; }
.cg-cta__actions {
	flex: 0 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* ==========================================================================
   Entrance animations (same pattern as the sibling pages)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
	.cg-main [data-gg-anim] { opacity: 0; transition: opacity .7s ease, transform .7s ease; }
	.cg-main [data-gg-anim="up"] { transform: translateY(28px); }
	.cg-main [data-gg-anim].gg-in { opacity: 1; transform: none; }
	/* The product cards are anchor targets for the "See the specs" links. A
	   translate on an un-revealed card shifts it 28px AFTER the browser has
	   computed the jump, landing it under the fixed header — so these fade
	   only, and scroll-margin-top can be trusted. */
	.cg-main .cg-product[data-gg-anim="up"] { transform: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
	.cg-section { margin: 76px 0; padding: 0 20px; }
	.cg-hero { padding: 72px 20px 68px; min-height: 460px; }
	.cg-hero__title { font-size: 44px; letter-spacing: -1px; }
	.cg-h2 { font-size: 32px; }
	.cg-btn { padding: 13px 20px; }
	.cg-product { gap: 24px; padding: 24px; scroll-margin-top: 90px; }
	.cg-product__media { flex-basis: 220px; }
	.cg-explain { padding: 40px 28px 36px; }
	.cg-cta { padding: 36px 28px; }
}

@media (max-width: 900px) {
	.cg-choose { grid-template-columns: 1fr; }
	.cg-explain__grid { grid-template-columns: 1fr; }
	/* the product image becomes a banner above the copy rather than a
	   squeezed column beside it */
	.cg-product { flex-direction: column; gap: 22px; }
	.cg-product__media { flex: 0 0 auto; width: 100%; }
	.cg-product__media img { aspect-ratio: 16 / 7; height: auto; min-height: 0; }
	/* labels get a proportional share again once the table has the full card
	   width to itself */
	.cg-spec thead th:first-child { width: 38%; }
}

@media (max-width: 767px) {
	.cg-main { font-size: 16px; }
	.cg-section { margin: 64px 0; }
	.cg-section--last { margin-bottom: 80px; }
	.cg-hero { min-height: 0; padding: 56px 20px 60px; }
	.cg-hero__title { font-size: 34px; letter-spacing: -.8px; }
	.cg-hero__sub { font-size: 16px; }
	.cg-hero__btns { margin-top: 26px; }
	.cg-hero__btns .cg-btn { flex: 1 1 100%; }
	.cg-h2 { font-size: 27px; }
	.cg-h2--sm { font-size: 25px; }
	.cg-head { margin-bottom: 28px; }
	.cg-choose__card { padding: 24px 20px 22px; border-radius: 18px; }
	.cg-choose__pick { font-size: 21px; }

	.cg-product { padding: 20px 18px 22px; border-radius: 18px; }
	.cg-product__media img { aspect-ratio: 16 / 9; border-radius: 12px; }
	.cg-product__name { font-size: 25px; }
	.cg-product__desc { font-size: 15px; }
	.cg-product__links { gap: 14px; }
	.cg-product__links .cg-btn--sheet { width: 100%; }

	.cg-tablewrap { margin-top: 20px; border-radius: 12px; }

	.cg-explain { padding: 32px 20px 30px; border-radius: 18px; }
	.cg-explain__tile { padding: 22px 20px; border-radius: 14px; }

	.cg-cta { padding: 32px 20px; gap: 24px; border-radius: 18px; }
	.cg-cta__actions { width: 100%; }
	.cg-cta__actions .cg-btn { flex: 1 1 100%; }
}

/* ==========================================================================
   Spec tables on a phone
   --------------------------------------------------------------------------
   Below 560px there is not enough width for two readable columns: at 390px a
   two-column split either wraps every label ("Face / weight") or squeezes the
   values into three lines. So each row becomes a stacked pair — label above
   value, both getting the full card width — while the header row stays a real,
   visible header bar. The <table>/<thead>/<th scope> markup is untouched, and
   every element carries its explicit ARIA role, so changing `display` here
   costs neither the accessibility tree nor the machine-readability that makes
   this page's specs extractable.
   ========================================================================== */
@media (max-width: 560px) {
	.cg-spec,
	.cg-spec thead,
	.cg-spec tbody,
	.cg-spec tr,
	.cg-spec tbody th,
	.cg-spec tbody td { display: block; }

	/* the header bar takes the same shape as the rows below it — the column
	   label on top, the thing it names underneath — so a product name of any
	   length lands the same way */
	.cg-spec thead tr {
		display: block;
		padding: 12px 16px 13px;
		background-color: #101a02;
		border-bottom: 1px solid #54780A;
	}
	.cg-spec thead th {
		display: block;
		width: auto;
		padding: 0;
		border-bottom: none;
	}
	.cg-spec thead th + th {
		margin-top: 3px;
		font-size: 16px;
		font-weight: 800;
		letter-spacing: -.2px;
		line-height: 1.25;
		text-transform: none;
	}

	.cg-spec tbody tr { padding: 13px 16px; }
	.cg-spec tbody tr + tr { border-top: 1px solid rgba(247, 248, 237, .12); }
	.cg-spec tbody tr + tr th,
	.cg-spec tbody tr + tr td { border-top: none; }

	.cg-spec tbody th {
		padding: 0;
		font-size: 13.5px;
		font-weight: 600;
		letter-spacing: .3px;
		color: #9AA0A6;
	}
	.cg-spec tbody td {
		padding: 2px 0 0;
		font-size: 17px;
		font-weight: 700;
		line-height: 1.35;
		color: #fff;
	}
}

/* Phones get a 768 px hero: a 660x913 portrait crop (77 KB vs the 342 KB JPG),
   below 480 px only (wider screens would upscale it). The hero is this page's
   LCP element and is preloaded in head-post with matching media queries. */
@media (max-width: 479px) { .cg-hero { background-image: url('/assets/images/bg-green-768.webp'); } }


/* FAQ — same accordion as the service pages */
.cg-faq__list { margin: 28px auto 0; max-width: 820px; }
.cg-faq__list .faq-item { margin-bottom: 10px; border: 1px solid #54780A; border-radius: 10px; overflow: hidden; background: #191919; }
.cg-faq__list h3 { font-size: inherit; margin: 0; }
.cg-faq__list .faq-button { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; background: #191919; border: none; color: #fff; font-family: var(--gg-font); font-size: 1.05rem; font-weight: 700; line-height: 1.3; text-align: left; padding: 16px 20px; cursor: pointer; }
.cg-faq__list .faq-icon { flex: none; color: #8EE000; font-size: 22px; font-weight: 600; line-height: 1; }
.cg-faq__list .faq-content { max-height: 0; overflow: hidden; transition: max-height .3s ease-out; }
.cg-faq__list .faq-body { padding: 0 20px; color: #C9CFD5; font-size: 0.95rem; line-height: 1.65; }
.cg-faq__list .faq-body.active { padding: 4px 20px 18px; }
.cg-faq__list .faq-body a { color: #8EE000; text-decoration: underline; text-underline-offset: 3px; }

/* testimonial — #FFFFFF on #121212 = 18:1; #9AA0A6 caption = 7.1:1 */
.cg-quote { margin: 28px auto 0; max-width: 820px; padding: 32px 36px; background: #121212; border: 1px solid #262626; border-left: 4px solid #84BD00; border-radius: 14px; }
.cg-quote__text { margin: 0; font-size: 1.25rem; line-height: 1.55; font-weight: 500; color: #fff; }
.cg-quote__text::before { content: "\201C"; color: #8EE000; margin-right: 2px; }
.cg-quote__text::after { content: "\201D"; color: #8EE000; margin-left: 2px; }
.cg-quote__who { margin-top: 14px; color: #9AA0A6; font-size: 0.95rem; font-weight: 600; }
.cg-source { font-size: 0.9rem; margin-top: 10px; }
.cg-after { margin-top: 26px; }

/* other areas */
.cg-areas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-top: 34px; }
.cg-areas__label { color: #9AA0A6; font-weight: 700; font-size: 0.9rem; letter-spacing: .08em; text-transform: uppercase; }
.cg-areas ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
@media (max-width: 760px) { .cg-quote { padding: 24px 22px; } .cg-quote__text { font-size: 1.1rem; } }
.cg-choose__sep { color: #9AA0A6; }
.cg-hero__title .cg-lime { white-space: nowrap; } /* H2 highlights may wrap: on phones a nowrap phrase overflowed the screen */
.cg-hero__title { text-wrap: balance; }
.cg-trustbar li { text-wrap: balance; }
@media (max-width: 767px) { .cg-choose__sep { display: none; } }

/* three-column source table: let the figure column breathe on desktop */
@media (min-width: 761px) { .cg-spec td:nth-child(2) { width: 52%; } }


/* ==========================================================================
   Care guides additions (2026-10-30)
   The hub keeps the dark surface of the sibling pages. The guide pages set
   the printed guide on it as a white sheet, so the page reads as the same
   document the owner was handed: slate table headers, a gold rule under
   each heading, green and red do/don't marks, the amber heat box and the
   slate warranty block, all from the PDF.
   Contrast on the sheet (#FFFFFF unless noted):
     #1B1B1B text .............. 16.9 : 1
     #5F5F5F row labels ........ 6.4 : 1   (and 6.0 : 1 on the #F7F8ED rows)
     #10551F eyebrows, links ... 9.0 : 1
     #8A6424 gold labels ....... 5.3 : 1
     #B3261E don't marks ....... 6.1 : 1   (decorative; the list heading carries the meaning)
     #FFFFFF on #2F3A44 slate .. 11.0 : 1
     #EBB967 on #2F3A44 ........ 6.7 : 1   (the warranty numerals)
     #3D2F00 on #FFF8E1 amber .. 11.9 : 1
   ========================================================================== */
.cg-main :where(dl, dd, ol, aside, nav, table) { margin: 0; }
.cg-main :where(ol) { padding: 0; list-style: none; }
.cg-nowrap { white-space: nowrap; }

/* ---------- hub: the guide cards ---------- */
.cg-guides { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cg-guide { position: relative; display: flex; flex-direction: column; background-color: #121212; border: 1px solid #262626; border-radius: var(--gg-radius-lg); overflow: hidden; transition: border-color .3s ease; }
.cg-guide__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background-color: #191919; }
.cg-guide__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
/* the whole card is the title link's target; the two footer links sit above it */
.cg-guide__name a::after { content: ''; position: absolute; inset: 0; z-index: 0; }
.cg-guide:has(.cg-guide__name a:hover), .cg-guide:has(.cg-guide__name a:focus-visible) { border-color: #54780A; }
.cg-guide:has(.cg-guide__name a:hover) .cg-guide__media img, .cg-guide:has(.cg-guide__name a:focus-visible) .cg-guide__media img { transform: scale(1.04); }
.cg-guide__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 22px 24px 24px; }
.cg-guide__kind { font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: #8ee000; }
.cg-guide__name { margin-top: 8px; font-size: 24px; font-weight: 800; line-height: 1.15; color: #fff; }
.cg-guide__name a { color: inherit; text-decoration: none; }
.cg-guide__name a:hover, .cg-guide__name a:focus { color: #8ee000; }
.cg-guide__desc { margin-top: 10px; flex: 1 1 auto; font-size: 14.5px; line-height: 1.6; color: #C9CFD5; }
.cg-guide__links { position: relative; z-index: 1; margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }
.cg-pdf { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid #54780A; font-size: 12.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: #8ee000; text-decoration: none; transition: background-color .3s ease, color .3s ease; }
.cg-pdf::before { content: ''; width: 10px; height: 13px; border: 1.5px solid currentColor; border-radius: 2px; box-shadow: inset 0 -4px 0 -2px currentColor; }
.cg-pdf:hover, .cg-pdf:focus { background-color: #84BD00; border-color: #84BD00; color: #0A0A0A; }
/* the sixth card has no photo: its copy sits on the same baseline band as
   the five beside it, with a quiet mark where the photo would be */
.cg-guide--help { border-style: dashed; border-color: #3a3a3a; justify-content: flex-end; }
.cg-guide--help .cg-guide__body { flex: 0 0 auto; padding: 28px 24px 24px; }
.cg-guide--help .cg-guide__desc { flex: 0 0 auto; }
.cg-guide--help .cg-guide__kind::before { content: '?'; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 10px; border-radius: 50%; border: 1px solid #54780A; font-size: 12px; line-height: 1; color: #8ee000; vertical-align: middle; }
.cg-choose--3 { grid-template-columns: repeat(3, 1fr); }

/* ---------- guide pages: hero and layout ---------- */
.cg-hero--guide { min-height: 0; padding: 72px 30px 64px; }
.cg-hero--guide .cg-hero__inner { max-width: 820px; }
.cg-hero--guide .cg-hero__title { font-size: 46px; }
.cg-hero--guide .cg-hero__sub { max-width: 700px; font-size: 16px; }
.cg-crumbs { margin-bottom: 18px; font-size: 13px; font-weight: 600; color: #9AA0A6; }
.cg-crumbs ol { display: flex; justify-content: center; gap: 10px; }
.cg-crumbs li + li::before { content: '/'; margin-right: 10px; color: #9AA0A6; }
.cg-crumbs a { color: #e4e7ea; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .25); }
.cg-crumbs a:hover, .cg-crumbs a:focus { color: #8ee000; border-bottom-color: #8ee000; }
.cg-print { cursor: pointer; }
.cg-docsec { margin-top: 64px; }
.cg-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 32px; align-items: start; }
/* grid items default to min-width:auto, so the scrolling chip row on phones
   would otherwise widen the column to its full content width */
.cg-layout > *, .cg-side > * { min-width: 0; }
/* the sidebar sits just under the fixed header and never grows past the
   viewport: on a short laptop screen it scrolls inside itself instead of
   hiding its buttons */
.cg-side { position: sticky; top: calc(var(--gg-header-h) + 16px); max-height: calc(100dvh - var(--gg-header-h) - 32px); overflow-y: auto; scrollbar-width: none; display: grid; gap: 16px; }
.cg-side::-webkit-scrollbar { display: none; }
.cg-side__card { background-color: #121212; border: 1px solid #262626; border-radius: 18px; padding: 20px 22px; }
.cg-side__label { font-size: 11.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: #8ee000; }
.cg-side__name { margin-top: 6px; font-size: 22px; font-weight: 800; color: #fff; }
.cg-side__dl { margin-top: 12px; display: grid; gap: 8px; }
.cg-side__dl div { display: grid; grid-template-columns: 56px 1fr; gap: 10px; font-size: 13.5px; line-height: 1.5; }
.cg-side__dl dt { color: #9AA0A6; }
.cg-side__dl dd { color: #C9CFD5; }
.cg-side__links { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.cg-side__links .cg-link { font-size: 13px; }
.cg-toc ol { margin-top: 10px; counter-reset: toc; }
.cg-toc li { counter-increment: toc; }
.cg-toc a { display: flex; gap: 12px; padding: 8px 0; font-size: 14px; font-weight: 600; color: #C9CFD5; text-decoration: none; border-top: 1px solid rgba(247, 248, 237, .08); }
.cg-toc li:first-child a { border-top: 0; }
.cg-toc a::before { content: counter(toc, decimal-leading-zero); font-size: 12px; font-weight: 700; color: #8ee000; }
.cg-toc a:hover, .cg-toc a:focus { color: #fff; }
.cg-side__cta { margin-top: 18px; display: grid; gap: 10px; }
.cg-btn--block { display: block; width: 100%; }

/* ---------- the sheet ---------- */
.cg-doc { background-color: #fff; color: #1B1B1B; border-radius: var(--gg-radius-lg); overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.cg-doc__head { position: relative; padding: 28px 44px 26px; background-color: #2F3A44; color: #fff; border-bottom: 3px solid #C8A24E; }
.cg-doc__head::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background-color: #84BD00; }
.cg-doc__brand { font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #EBB967; }
.cg-doc__title { margin-top: 6px; font-size: 28px; font-weight: 800; line-height: 1.15; letter-spacing: -.4px; color: #fff; }
/* the site-wide focus ring is white; on the white sheet it has to be green */
.cg-doc a:focus-visible, .cg-doc button:focus-visible { outline: 2px solid #10551F; outline-offset: 2px; border-radius: 2px; }
.cg-doc__head a:focus-visible, .cg-warranty a:focus-visible { outline-color: #EBB967; }
.cg-doc__meta { margin-top: 6px; font-size: 13px; letter-spacing: .5px; color: #C9CFD5; }
.cg-doc__note { margin: 28px 44px 0; padding: 14px 18px; border-left: 4px solid #C8A24E; background-color: #F7F8ED; font-size: 14px; line-height: 1.6; color: #3a3a3a; }
.cg-doc__sec { padding: 36px 44px 0; }
.cg-doc__sec[id] { scroll-margin-top: calc(var(--gg-header-h) + 24px); }
.cg-doc__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: #10551F; }
.cg-doc__h2 { margin-top: 4px; padding-bottom: 10px; font-size: 23px; font-weight: 700; line-height: 1.2; letter-spacing: -.3px; color: #1B1B1B; border-bottom: 2px solid #C8A24E; }
.cg-tablewrap { margin-top: 18px; border: 1px solid #E4E2D6; border-radius: 10px; overflow: hidden; background-color: #fff; }
/* every colour on the sheet is set explicitly, with the sheet in the
   selector: the shared stylesheets style bare tr/td for the dark pages */
.cg-doc .cg-table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.55; color: #1B1B1B; background-color: #fff; }
.cg-doc .cg-table thead th { padding: 11px 16px; background-color: #2F3A44; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; text-align: left; border: 0; }
.cg-doc .cg-table tbody tr { background-color: #fff; }
.cg-doc .cg-table tbody tr:nth-child(even) { background-color: #F7F8ED; }
.cg-doc .cg-table tbody th, .cg-doc .cg-table tbody td { padding: 13px 16px; vertical-align: top; text-align: left; background-color: transparent; color: #1B1B1B; border: 0; border-top: 1px solid #ECEAE0; }
.cg-doc .cg-table tbody th { width: 150px; font-weight: 600; color: #5F5F5F; }
.cg-doc .cg-table--3 tbody th { width: 120px; }
.cg-doc .cg-table--3 td:nth-child(2) { width: 48%; }
.cg-doc .cg-table__why { color: #5F5F5F; }
.cg-dd { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; }
.cg-dd__title { padding-bottom: 8px; font-size: 13px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; border-bottom: 2px solid; }
.cg-dd__col--do .cg-dd__title { color: #10551F; border-color: #10551F; }
.cg-dd__col--dont .cg-dd__title { color: #B3261E; border-color: #B3261E; }
.cg-dd ul { margin-top: 6px; }
.cg-dd li { position: relative; padding: 9px 0 9px 30px; font-size: 14.5px; line-height: 1.55; border-top: 1px solid #ECEAE0; }
.cg-dd li:first-child { border-top: 0; }
.cg-dd li::before { position: absolute; left: 2px; top: 8px; width: 18px; height: 18px; border-radius: 50%; font-size: 12px; font-weight: 900; line-height: 18px; text-align: center; }
.cg-dd__col--do li::before { content: '\2713'; color: #fff; background-color: #10551F; }
.cg-dd__col--dont li::before { content: '\2715'; color: #fff; background-color: #B3261E; }
.cg-heat { margin-top: 26px; padding: 16px 20px; border-left: 5px solid #E0B64C; background-color: #FFF8E1; color: #3D2F00; font-size: 14.5px; line-height: 1.6; }
.cg-heat__title { font-size: 12.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; }
.cg-heat p + p, .cg-heat__title + p { margin-top: 6px; }
/* both classes in the selector so the section padding never wins over the block's own zero padding */
.cg-doc__sec.cg-warranty { margin: 36px 44px 0; padding: 0; display: grid; grid-template-columns: auto 1fr; background-color: #2F3A44; color: #fff; border-radius: 12px; border-top: 3px solid #C8A24E; border-bottom: 3px solid #C8A24E; overflow: hidden; }
.cg-warranty__nums { display: grid; grid-template-columns: 1fr 1fr; }
.cg-warranty__nums div { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 108px; padding: 22px 16px; text-align: center; border-right: 1px solid rgba(255, 255, 255, .14); }
.cg-warranty__n { font-size: 40px; font-weight: 300; line-height: 1; color: #EBB967; }
.cg-warranty__l { margin-top: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; line-height: 1.35; color: #C9CFD5; }
.cg-warranty__copy { padding: 22px 28px; font-size: 14.5px; line-height: 1.6; }
.cg-warranty__title { font-size: 12.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: #EBB967; }
.cg-warranty__copy p { margin-top: 6px; color: #fff; }
.cg-doc__foot { padding: 32px 44px 40px; font-size: 15px; line-height: 1.65; color: #1B1B1B; }
.cg-doc__foot p + p { margin-top: 12px; }
.cg-doc__foot a { color: #10551F; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- other guides ---------- */
.cg-more { margin-top: 72px; }
.cg-more__list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.cg-more__item { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 18px 20px; background-color: #121212; border: 1px solid #262626; border-radius: 16px; text-decoration: none; transition: border-color .3s ease; }
.cg-more__item:hover, .cg-more__item:focus { border-color: #54780A; }
.cg-more__item--all { border-style: dashed; }
.cg-more__kind { font-size: 11.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: #8ee000; }
.cg-more__name { font-size: 17px; font-weight: 800; color: #fff; }

@media (max-width: 1024px) {
	.cg-layout { grid-template-columns: 1fr; gap: 20px; }
	.cg-side { position: static; max-height: none; overflow: visible; grid-template-columns: 1fr 1fr; align-items: stretch; }
	/* the hero already offers the PDF on these widths */
	.cg-side__pdfbtn { display: none; }
	.cg-more__list { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
	.cg-guides { grid-template-columns: 1fr 1fr; }
	.cg-choose--3 { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
	.cg-hero--guide { padding: 56px 20px 48px; }
	.cg-hero--guide .cg-hero__title { font-size: 34px; }
	.cg-docsec { margin-top: 40px; }
	.cg-side { grid-template-columns: 1fr; }
	/* "on this page" becomes a row of chips the thumb can scroll */
	.cg-toc { padding: 14px 0 14px 16px; }
	.cg-toc .cg-side__label { padding-right: 16px; }
	.cg-toc ol { margin-top: 8px; display: flex; gap: 8px; overflow-x: auto; padding-right: 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
	.cg-toc ol::-webkit-scrollbar { display: none; }
	.cg-toc a, .cg-toc li:first-child a { flex: none; padding: 8px 14px; border: 1px solid #54780A; border-radius: 999px; font-size: 13px; white-space: nowrap; }
	.cg-toc a::before { content: none; }
	.cg-doc { border-radius: 18px; box-shadow: 0 20px 50px rgba(0, 0, 0, .4); }
	.cg-doc__head { padding: 22px 22px 20px; }
	.cg-doc__title { font-size: 22px; }
	.cg-doc__note { margin: 22px 22px 0; }
	.cg-doc__sec { padding: 28px 22px 0; }
	.cg-doc__h2 { font-size: 20px; }
	.cg-doc .cg-table, .cg-doc .cg-table tbody, .cg-doc .cg-table tr, .cg-doc .cg-table tbody th, .cg-doc .cg-table td { display: block; width: auto; }
	.cg-doc .cg-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.cg-doc .cg-table tbody tr { padding: 12px 16px 14px; border-top: 1px solid #ECEAE0; }
	.cg-doc .cg-table tbody tr:first-child { border-top: 0; }
	.cg-doc .cg-table tbody th, .cg-doc .cg-table tbody td { padding: 0; border: 0; }
	.cg-doc .cg-table tbody th { width: auto; margin-bottom: 4px; font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: #10551F; }
	.cg-doc .cg-table--3 td:nth-child(2) { width: auto; }
	.cg-doc .cg-table__why { margin-top: 6px; font-size: 13.5px; }
	.cg-doc .cg-table__why::before { content: 'Why it matters: '; font-weight: 700; color: #5F5F5F; }
	.cg-dd { grid-template-columns: 1fr; gap: 20px; }
	.cg-doc__sec.cg-warranty { margin: 28px 22px 0; padding: 0; grid-template-columns: 1fr; }
	.cg-warranty__nums div { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .14); }
	.cg-warranty__copy { padding: 18px 22px 22px; }
	.cg-doc__foot { padding: 26px 22px 30px; }
	.cg-more { margin-top: 48px; }
	.cg-more__list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
	.cg-guides { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.cg-guide__media img { transition: none; }
}

/* ---------- print: the web page prints as the sheet ---------- */
@media print {
	/* the sheet's own header carries the title, so the page hero goes too */
	.gg-header, .gg-mobilebar, .gg-footer, .gt-overlay, chat-widget,
	.cg-main--guide .cg-hero, .cg-side, .cg-more, .cg-section--cta { display: none !important; }
	body, .cg-main { background: #fff !important; color: #000; }
	.cg-section { margin: 0; padding: 0; }
	.cg-layout { display: block; }
	.cg-doc { box-shadow: none; border: 1px solid #ccc; border-radius: 0; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
	.cg-doc .cg-table tr, .cg-dd li, .cg-heat, .cg-doc__sec.cg-warranty { break-inside: avoid; }
	.cg-doc__eyebrow, .cg-doc__h2, .cg-dd__title { break-after: avoid; }
	.cg-doc .cg-table thead { display: table-header-group; }
}