/*
 * The AI visibility landing page (/ai-visibility, #1198) - the page the ads
 * point at, and what a visitor sees at /tools/ai-visibility.
 *
 * Loaded by views/tools/view_ai-visibility-landing.php alone, so nothing here
 * reaches the rest of the site. Everything is scoped to .geol.
 *
 * Brand rules (docs/brand-style-guide.md), creative set A:
 *   - Navy grounds with a soft Sky halo and the counter mark as a watermark,
 *     top and bottom. The only gradient that is not a halo is the Sky ramp.
 *   - Maven Pro, headlines 800 in sentence case ending in a full stop.
 *   - Amber appears once per composition: the "Named" tag in the hero, the
 *     tracking chip in the features.
 *   - Buttons are the site's #0A7ABB with a white label (4.7:1), never Navy
 *     on Sky.
 *   - Text colours meet AA: white at 84-88% on Navy, #5A6B7D for small print
 *     on light grounds, Sky only as large text or on Navy.
 *
 * The middle of the page follows the member's theme; the Navy bands and the
 * mock report cards look the same in both.
 *
 * 2026-09-24
 */

.geol {
	--gl-sky: #0DA9EF;
	--gl-deep: #0A7FC2;
	--gl-navy: #0B2B45;
	--gl-ink: #414141;
	--gl-slate: #6B7A8C;
	--gl-small: #5A6B7D;
	--gl-mist: #EAF7FE;
	--gl-cloud: #F5F8FA;
	--gl-amber: #FFB140;
	--gl-btn: #0A7ABB;
	--gl-btn-hover: #08629A;
	--gl-ramp: linear-gradient(135deg, #0DA9EF 0%, #0A7FC2 100%);

	/* The themed middle of the page. */
	--gl-page: #FFFFFF;
	--gl-alt: #F5F8FA;
	--gl-card: #FFFFFF;
	--gl-line: #E1E7EC;
	--gl-text: #414141;
	--gl-strong: #0B2B45;
	--gl-muted: #5A6B7D;
	--gl-tint: #EAF7FE;
	--gl-link: #08699F;
	--gl-shadow: 0 1px 2px rgba(11, 43, 69, .05), 0 12px 32px -12px rgba(11, 43, 69, .14);

	--gl-display: 'Maven Pro', Helvetica, Arial, sans-serif;

	background: var(--gl-page);
	color: var(--gl-text);
	overflow: hidden;
}

/* The body carries both theme classes when dark is on, and this file loads
   after styles.css, so the dark values are set at a higher specificity
   rather than relying on order. */
.dark-theme .geol {
	--gl-page: #111827;
	--gl-alt: #18212F;
	--gl-card: #1F2937;
	--gl-line: #2E3C51;
	--gl-text: rgba(229, 231, 235, .88);
	--gl-strong: #FFFFFF;
	--gl-muted: rgba(229, 231, 235, .72);
	--gl-tint: rgba(13, 169, 239, .16);
	--gl-link: #39B8F2;
	--gl-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px -12px rgba(0, 0, 0, .5);
}

.geol *,
.geol *::before,
.geol *::after {
	box-sizing: border-box;
}

.geol-wrap {
	position: relative;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
}

.geol h1,
.geol h2,
.geol h3 {
	font-family: var(--gl-display);
	font-weight: 800;
	letter-spacing: -.015em;
	margin: 0;
}

/* At no specificity, so every class below that sets its own margin on a
   paragraph keeps it. */
:where(.geol) p {
	margin: 0;
}

.geol a {
	text-decoration: none;
}

.geol a:hover,
.geol a:focus {
	text-decoration: none;
}

.geol a:focus-visible,
.geol summary:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px #0A7FC2, 0 0 0 5px rgba(10, 127, 194, .25);
	border-radius: 6px;
}

/*
 * The site's own stylesheet takes the outline off a focused button, and the
 * primary button's :focus looks exactly like its resting state - so on the
 * Navy ground a keyboard user had nothing to follow. White, because the ring
 * above is Sky on white and this one sits on Navy.
 */
.geol button:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--gl-navy), 0 0 0 5px rgba(255, 255, 255, .9);
}

/* ---------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------- */

.geol-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 0 26px;
	border-radius: 999px;
	border: 1px solid transparent;
	font-family: var(--gl-display);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.geol-btn:hover {
	transform: translateY(-1px);
}

.geol-btn-primary,
.geol-btn-primary:hover,
.geol-btn-primary:focus {
	background: var(--gl-btn);
	color: #FFFFFF;
}

.geol-btn-primary {
	box-shadow: 0 0 0 1px rgba(13, 169, 239, .4), 0 10px 28px -10px rgba(13, 169, 239, .7);
}

.geol-btn-primary:hover {
	background: var(--gl-btn-hover);
}

.geol-btn-ghost,
.geol-btn-ghost:hover,
.geol-btn-ghost:focus {
	color: #FFFFFF;
}

.geol-btn-ghost {
	background: rgba(255, 255, 255, .04);
	border-color: rgba(255, 255, 255, .28);
}

.geol-btn-ghost:hover {
	background: rgba(255, 255, 255, .1);
	border-color: rgba(255, 255, 255, .45);
}

.geol-btn-line,
.geol-btn-line:hover,
.geol-btn-line:focus {
	color: var(--gl-link);
}

.geol-btn-line {
	min-height: 44px;
	width: 100%;
	background: transparent;
	border-color: var(--gl-line);
	font-size: 15px;
}

.geol-btn-line:hover {
	background: var(--gl-tint);
	border-color: var(--gl-sky);
}

.geol-btn-block {
	min-height: 44px;
	width: 100%;
	font-size: 15px;
}

.geol-btn .fas {
	font-size: 13px;
}

/* ---------------------------------------------------------------------------
   The Navy bands: the hero and the closing call to action
   --------------------------------------------------------------------------- */

.geol-navy {
	position: relative;
	overflow: hidden;
	background: var(--gl-navy);
	color: rgba(255, 255, 255, .86);
}

/* A soft Sky halo, the one glow the brand allows. */
.geol-navy::before,
.geol-navy::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

.geol-navy::before {
	width: 980px;
	height: 980px;
	top: -520px;
	right: -260px;
	background: radial-gradient(closest-side, rgba(13, 169, 239, .34), rgba(13, 169, 239, 0));
}

.geol-navy::after {
	width: 720px;
	height: 720px;
	bottom: -440px;
	left: -220px;
	background: radial-gradient(closest-side, rgba(13, 169, 239, .16), rgba(13, 169, 239, 0));
}

/* The counter mark, oversized, at watermark strength. */
.geol-watermark {
	position: absolute;
	width: 640px;
	max-width: none;
	right: -140px;
	bottom: -120px;
	opacity: .045;
	pointer-events: none;
	user-select: none;
}

.geol-hero {
	padding: 84px 0 96px;
}

.geol-hero-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
	gap: 56px;
	align-items: center;
}

.geol-pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 5px 16px 5px 5px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .14);
	font-family: var(--gl-display);
	font-size: 14px;
	font-weight: 600;
	color: rgba(255, 255, 255, .88);
}

.geol-pill b {
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--gl-sky);
	color: var(--gl-navy);
	font-size: 12px;
	font-weight: 800;
}

.geol-hero h1 {
	margin: 22px 0 20px;
	font-size: clamp(40px, 5.2vw, 64px);
	line-height: 1.05;
	color: #FFFFFF;
}

.geol-accent {
	color: var(--gl-sky);
}

.geol-lead {
	max-width: 560px;
	font-family: var(--gl-display);
	font-size: 19px;
	font-weight: 500;
	line-height: 1.5;
	color: rgba(255, 255, 255, .84);
}

.geol-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 32px;
}

/*
 * The visitor's own start: the two fields the scan needs, on the hero itself
 * (#1198). Nothing is scanned here - the fields are carried through signing
 * up - so the form is only as wide as the lead above it, and the button it
 * ends on is the same one a member's hero shows.
 */
.geol-start-fields {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	max-width: 560px;
	margin-top: 32px;
}

.geol-field {
	flex: 1 1 220px;
	min-width: 0;
}

.geol-field label {
	display: block;
	margin-bottom: 6px;
	font-family: var(--gl-display);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .02em;
	color: rgba(255, 255, 255, .82);
}

.geol-input {
	display: block;
	width: 100%;
	height: 52px;
	padding: 0 16px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, .26);
	background: rgba(255, 255, 255, .08);
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	color: #FFFFFF;
	transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

/* .52 composites to about 4.3:1 on the field, under AA for text this size. */
.geol-input::placeholder {
	color: rgba(255, 255, 255, .66);
	opacity: 1;
}

.geol-input:hover {
	border-color: rgba(255, 255, 255, .4);
}

.geol-input:focus {
	outline: 0;
	background: rgba(255, 255, 255, .14);
	border-color: var(--gl-sky);
	box-shadow: 0 0 0 3px rgba(13, 169, 239, .3);
}

/*
 * The browser paints an autofilled field with its own light background and
 * dark text, which on the Navy hero reads as a broken field. There is no way
 * to set that background, so it is covered with a large inset shadow.
 */
.geol-input:-webkit-autofill,
.geol-input:-webkit-autofill:hover,
.geol-input:-webkit-autofill:focus {
	-webkit-text-fill-color: #FFFFFF;
	-webkit-box-shadow: 0 0 0 1000px #14405F inset;
	caret-color: #FFFFFF;
}

/* The form carries its own buttons, so they sit closer than a lead's would. */
.geol-start .geol-actions {
	margin-top: 20px;
}

/* Said in place of the buttons while the tool is switched off. */
.geol-paused {
	display: inline-block;
	margin-top: 32px;
	padding: 12px 18px;
	border-radius: 12px;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .14);
	font-size: 15px;
	font-weight: 600;
	color: rgba(255, 255, 255, .88);
}

/* Free to join, no card: the line under a visitor's buttons. */
.geol-no-card {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 18px;
	font-family: var(--gl-display);
	font-size: 16px;
	font-weight: 600;
	color: rgba(255, 255, 255, .9);
}

.geol-no-card .fas,
.geol-no-card .sci {
	color: var(--gl-sky);
	font-size: 15px;
}

.geol-member-q {
	margin-top: 8px;
	font-size: 14px;
	color: rgba(255, 255, 255, .72);
}

.geol-member-q a {
	color: var(--gl-sky);
	font-weight: 700;
}

.geol-member-q a:hover {
	color: #FFFFFF;
}

.geol-points {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	margin: 30px 0 0;
	padding: 0;
	list-style: none;
	font-family: var(--gl-display);
	font-size: 15px;
	font-weight: 600;
	color: rgba(255, 255, 255, .8);
}

.geol-points li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.geol-points .fas {
	color: var(--gl-sky);
	font-size: 13px;
}

/* ---------------------------------------------------------------------------
   The mock report in the hero - flat UI in the style of the plan pictures:
   a white window, the member's brand ringed in Sky, Amber on the one thing
   that matters.
   --------------------------------------------------------------------------- */

.geol-mock {
	position: relative;
	padding: 34px 26px 164px 34px;
	font-family: var(--gl-display);
}

.geol-window {
	position: relative;
	background: #FFFFFF;
	color: var(--gl-ink);
	border-radius: 18px;
	box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06);
	overflow: hidden;
}

.geol-window-bar {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 38px;
	padding: 0 16px;
	background: #F5F8FA;
	border-bottom: 1px solid #E8EDF1;
}

.geol-window-bar i {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #D5DDE4;
}

.geol-window-bar span {
	flex: 1;
	height: 14px;
	margin-right: 96px;
	border-radius: 7px;
	background: #E8EDF1;
}

.geol-window-body {
	padding: 22px 24px 24px;
}

/* Said up front, in the window's own bar: the report is made up. */
.geol-example {
	margin: 0 10px 0 12px;
	padding: 2px 9px;
	border-radius: 999px;
	background: #FFFFFF;
	border: 1px solid #E1E7EC;
	color: var(--gl-small);
	font-size: 11px;
	font-style: normal;
	font-weight: 700;
}

/* The question on the left, clear of the score that overlaps the window's
   top right corner. */
.geol-q {
	display: table;
	max-width: 72%;
	margin: 0 0 20px;
	padding: 11px 16px;
	border-radius: 16px 16px 16px 4px;
	background: var(--gl-mist);
	color: var(--gl-navy);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	clear: both;
}

.geol-a-label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	color: var(--gl-small);
	font-size: 12px;
	font-weight: 700;
}

.geol-a-label i {
	width: 18px;
	height: 18px;
	border-radius: 6px;
	background: var(--gl-ramp);
}

.geol-a {
	font-size: 15px;
	font-weight: 500;
	line-height: 1.9;
	color: var(--gl-ink);
}

.geol-chip {
	position: relative;
	display: inline-block;
	padding: 1px 10px;
	border-radius: 999px;
	font-weight: 700;
	line-height: 1.6;
	white-space: nowrap;
}

.geol-chip-rival {
	background: #F0F3F6;
	color: var(--gl-ink);
}

.geol-chip-you {
	border: 2px solid var(--gl-sky);
	color: var(--gl-deep);
}

.geol-you {
	white-space: nowrap;
}

.geol-named {
	display: inline-block;
	margin-left: 6px;
	vertical-align: 1px;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--gl-amber);
	color: var(--gl-navy);
	font-size: 11px;
	font-weight: 800;
	line-height: 1.6;
}

.geol-skel {
	display: block;
	height: 9px;
	margin-top: 10px;
	border-radius: 5px;
	background: #E8EDF1;
}

.geol-sources {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin-top: 18px;
}

.geol-sources-label {
	grid-column: 1 / -1;
	color: var(--gl-small);
	font-size: 12px;
	font-weight: 700;
}

.geol-source {
	display: flex;
	align-items: center;
	gap: 7px;
	min-width: 0;
	padding: 9px 10px;
	border: 1px solid #E8EDF1;
	border-radius: 10px;
	font-size: 12px;
	font-weight: 700;
	color: var(--gl-deep);
}

.geol-source::before {
	content: "";
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	border-radius: 4px;
	background: #E8EDF1;
}

.geol-source span {
	flex: 1;
	height: 7px;
	border-radius: 4px;
	background: #E8EDF1;
}

.geol-source-you {
	border-color: var(--gl-sky);
	background: #F4FBFF;
}

.geol-source-you::before {
	background: var(--gl-sky);
}

/* The floating score: a white disc on Navy, which is the right polarity. */
.geol-score {
	position: absolute;
	top: 0;
	right: 0;
	width: 128px;
	height: 128px;
	border-radius: 50%;
	background: #FFFFFF;
	box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .55);
	text-align: center;
}

.geol-score svg {
	position: absolute;
	inset: 8px;
	width: 112px;
	height: 112px;
	transform: rotate(-90deg);
}

.geol-score-track {
	fill: none;
	stroke: #EAF7FE;
	stroke-width: 9;
}

.geol-score-arc {
	fill: none;
	stroke: url(#geol-ramp);
	stroke-width: 9;
	stroke-linecap: round;
}

.geol-score-num {
	position: relative;
	display: block;
	padding-top: 34px;
	color: var(--gl-navy);
	font-size: 36px;
	font-weight: 800;
	line-height: 1;
}

.geol-score-num small {
	font-size: 14px;
	font-weight: 700;
	color: var(--gl-small);
}

.geol-score-label {
	position: relative;
	display: block;
	margin-top: 6px;
	color: var(--gl-small);
	font-size: 11px;
	font-weight: 700;
}

/* The engines card, overlapping the window's lower edge. */
.geol-engine-card {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 270px;
	padding: 14px 16px;
	border-radius: 14px;
	background: #FFFFFF;
	color: var(--gl-ink);
	box-shadow: 0 22px 44px -18px rgba(0, 0, 0, .6);
}

.geol-engine-card h3 {
	margin-bottom: 8px;
	color: var(--gl-small);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0;
}

.geol-engine-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 6px 0;
	border-top: 1px solid #EEF2F5;
	font-size: 13px;
	font-weight: 700;
}

.geol-engine-row:first-of-type {
	border-top: 0;
}

.geol-engine-row em {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-style: normal;
	font-size: 12px;
	color: var(--gl-deep);
}

.geol-engine-row em::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--gl-sky);
}

.geol-engine-row em.geol-missing {
	color: var(--gl-small);
}

.geol-engine-row em.geol-missing::before {
	background: transparent;
	border: 2px solid #B8C3CE;
}

/* ---------------------------------------------------------------------------
   The engines strip
   --------------------------------------------------------------------------- */

.geol-strip {
	padding: 34px 0;
	border-bottom: 1px solid var(--gl-line);
	background: var(--gl-page);
}

.geol-strip .geol-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px 36px;
}

.geol-strip p {
	font-size: 15px;
	font-weight: 600;
	color: var(--gl-muted);
}

.geol-strip ul {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 40px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.geol-strip li {
	font-family: var(--gl-display);
	font-size: 21px;
	font-weight: 700;
	color: var(--gl-strong);
	opacity: .78;
}

/* ---------------------------------------------------------------------------
   Sections
   --------------------------------------------------------------------------- */

.geol-section {
	padding: 104px 0;
}

.geol-section-alt {
	background: var(--gl-alt);
}

.geol-eyebrow {
	margin-bottom: 14px;
	font-family: var(--gl-display);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gl-link);
}

.geol-head {
	max-width: 720px;
	margin-bottom: 52px;
}

.geol-head h2 {
	font-size: clamp(30px, 3.6vw, 44px);
	line-height: 1.1;
	color: var(--gl-strong);
}

.geol-head p {
	margin-top: 16px;
	font-size: 18px;
	line-height: 1.55;
	color: var(--gl-muted);
}

/* Why it matters: three plain cards. */
.geol-why {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}

.geol-card {
	padding: 28px;
	border: 1px solid var(--gl-line);
	border-radius: 18px;
	background: var(--gl-card);
	box-shadow: var(--gl-shadow);
}

.geol-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: 20px;
	border-radius: 14px;
	background: var(--gl-tint);
	color: var(--gl-deep);
	font-size: 19px;
}

.dark-theme .geol-icon {
	color: var(--gl-sky);
}

.geol-card h3 {
	margin-bottom: 10px;
	font-size: 21px;
	line-height: 1.2;
	color: var(--gl-strong);
}

.geol-card p {
	font-size: 16px;
	line-height: 1.6;
	color: var(--gl-muted);
}

/* The features, as a bento grid of cards that each carry a small drawing of
   what that part of the report looks like. */
.geol-bento {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}

.geol-bento .geol-card {
	display: flex;
	flex-direction: column;
	padding: 0;
	overflow: hidden;
}

.geol-bento-wide {
	grid-column: span 2;
}

/* The last card runs the full width, its words beside its drawing. */
.geol-bento .geol-bento-full {
	grid-column: 1 / -1;
	flex-direction: row;
	align-items: stretch;
}

.geol-bento-full .geol-bento-copy {
	flex: 0 0 38%;
	padding: 32px;
}

.geol-bento-full .geol-art {
	margin-top: 0;
	min-height: 0;
	align-items: center;
	padding: 28px 28px 28px 0;
}

.geol-bento-copy {
	padding: 28px 28px 0;
}

.geol-art {
	flex: 1;
	display: flex;
	align-items: flex-end;
	min-height: 210px;
	margin-top: 24px;
	padding: 0 28px 28px;
}

.geol-art-inner {
	width: 100%;
	padding: 18px;
	border: 1px solid var(--gl-line);
	border-radius: 14px;
	background: var(--gl-page);
	font-family: var(--gl-display);
}

.geol-section-alt .geol-art-inner {
	background: var(--gl-alt);
}

/* Score: a ring beside four engine bars. */
.geol-art-score {
	display: flex;
	align-items: center;
	gap: 28px;
}

.geol-ring {
	position: relative;
	flex: 0 0 auto;
	width: 124px;
	height: 124px;
}

.geol-ring svg {
	width: 124px;
	height: 124px;
	transform: rotate(-90deg);
}

.geol-ring .geol-score-track {
	stroke: var(--gl-tint);
	stroke-width: 11;
}

.geol-ring .geol-score-arc {
	stroke-width: 11;
}

.geol-ring b {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 34px;
	font-weight: 800;
	color: var(--gl-strong);
}

.geol-bars {
	flex: 1;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.geol-bars li {
	display: grid;
	grid-template-columns: 112px minmax(0, 1fr) 30px;
	align-items: center;
	gap: 12px;
	padding: 6px 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--gl-strong);
}

.geol-bars li span:last-child {
	text-align: right;
	color: var(--gl-muted);
}

.geol-bar {
	height: 8px;
	border-radius: 4px;
	background: var(--gl-tint);
	overflow: hidden;
}

.geol-bar i {
	display: block;
	height: 100%;
	border-radius: 4px;
	background: var(--gl-ramp);
}

.geol-bar-quiet i {
	background: #B8C3CE;
}

.dark-theme .geol-bar-quiet i {
	background: #56657A;
}

/* Rivals: who was named, and how often. */
.geol-rivals li {
	grid-template-columns: minmax(0, 1fr) 72px;
}

.geol-rivals .geol-bar {
	grid-column: 1 / -1;
}

.geol-rivals li span:nth-child(2) {
	text-align: right;
	color: var(--gl-muted);
}

.geol-rival-you {
	color: var(--gl-link);
}

/* Sources: the pages the engines read. */
.geol-src-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 0;
	border-top: 1px solid var(--gl-line);
	font-size: 13px;
	font-weight: 700;
	color: var(--gl-strong);
}

.geol-src-row:first-child {
	border-top: 0;
}

.geol-src-row i {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	border-radius: 4px;
	background: var(--gl-line);
}

.geol-src-row span {
	flex: 0 1 auto;
	height: 8px;
	border-radius: 4px;
	background: var(--gl-line);
}

.geol-src-row b {
	margin-left: auto;
	min-width: 26px;
	text-align: right;
	color: var(--gl-muted);
}

.geol-src-row.geol-src-top i {
	background: var(--gl-sky);
}

.geol-src-row.geol-src-top span {
	background: var(--gl-tint);
}

/* Tracking: a line over the weeks, and the Monday report. */
.geol-trend svg {
	display: block;
	width: 100%;
	height: 110px;
}

.geol-trend-grid {
	stroke: var(--gl-line);
	stroke-width: 1;
}

.geol-trend-line {
	fill: none;
	stroke: url(#geol-ramp-flat);
	stroke-width: 4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.geol-trend-dot {
	fill: var(--gl-card);
	stroke: var(--gl-sky);
	stroke-width: 3;
}

.geol-trend-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 10px;
	font-size: 12px;
	font-weight: 700;
	color: var(--gl-muted);
}

.geol-amber-chip {
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--gl-amber);
	color: var(--gl-navy);
	font-size: 11px;
	font-weight: 800;
}

/* Why you are missing: the findings, one a row. */
.geol-why-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	border-top: 1px solid var(--gl-line);
	font-size: 13px;
	font-weight: 700;
	color: var(--gl-strong);
}

.geol-why-row:first-child {
	border-top: 0;
	padding-top: 2px;
}

.geol-why-row i {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 8px;
	background: var(--gl-tint);
	color: var(--gl-deep);
	font-size: 12px;
	line-height: 26px;
	text-align: center;
}

.dark-theme .geol-why-row i {
	color: var(--gl-sky);
}

/* A brand icon (brand-icons.css) fills its whole box, so inset it inside the 26px tile. */
.geol-why-row .sci::before,
.geol-why-row .sci::after {
	top: 7px;
	right: 7px;
	bottom: 7px;
	left: 7px;
}

/* Fixes: what to do next, each to the marketplace. */
.geol-fixes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.geol-fix {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px;
	border: 1px solid var(--gl-line);
	border-radius: 12px;
	background: var(--gl-card);
}

.geol-fix b {
	font-size: 14px;
	line-height: 1.3;
	color: var(--gl-strong);
}

.geol-fix span {
	margin-top: auto;
	font-size: 13px;
	font-weight: 700;
	color: var(--gl-link);
}

.geol-fix .fas {
	font-size: 11px;
	margin-left: 4px;
}

/* How it works. */
.geol-steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: geol-step;
}

/* Left-aligned, as the guide asks of any paragraph longer than a line; the
   dashes run from the first number to the last, behind the middle one. */
.geol-steps::before {
	content: "";
	position: absolute;
	top: 28px;
	left: 56px;
	right: calc(33.333% - 15px);
	border-top: 2px dashed var(--gl-line);
}

.geol-steps li {
	position: relative;
	padding-right: 24px;
}

.geol-steps li::before {
	counter-increment: geol-step;
	content: counter(geol-step);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin: 0 0 22px;
	border-radius: 50%;
	background: var(--gl-card);
	border: 2px solid var(--gl-sky);
	color: var(--gl-strong);
	font-family: var(--gl-display);
	font-size: 22px;
	font-weight: 800;
	box-shadow: 0 0 0 8px var(--gl-page);
}

.geol-section-alt .geol-steps li::before {
	box-shadow: 0 0 0 8px var(--gl-alt);
}

.geol-steps h3 {
	margin-bottom: 10px;
	font-size: 21px;
	color: var(--gl-strong);
}

.geol-steps p {
	max-width: 320px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--gl-muted);
}

/* Pricing. */
.geol-prices {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
	gap: 16px;
}

.geol-price {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 24px 22px;
	border: 1px solid var(--gl-line);
	border-radius: 18px;
	background: var(--gl-card);
	box-shadow: var(--gl-shadow);
}

.geol-price-free {
	border-color: var(--gl-sky);
	box-shadow: inset 0 3px 0 var(--gl-sky), var(--gl-shadow);
}

/* In the corner, so the free plan's price sits level with the others'. */
.geol-price-tag {
	position: absolute;
	top: 18px;
	right: 18px;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--gl-tint);
	color: var(--gl-link);
	font-size: 12px;
	font-weight: 700;
}

.geol-price-amount {
	margin: 4px 0 14px;
	font-family: var(--gl-display);
	font-size: 40px;
	font-weight: 800;
	line-height: 1;
	color: var(--gl-strong);
}

.geol-price-amount small {
	font-size: 15px;
	font-weight: 600;
	color: var(--gl-muted);
}

.geol-price-brands {
	font-size: 15px;
	font-weight: 700;
	color: var(--gl-strong);
}

.geol-price-note {
	margin: 8px 0 22px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--gl-muted);
}

.geol-price .geol-btn {
	margin-top: auto;
}

/* The earn-it-free line under the plans. */
.geol-earn {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 22px;
	padding: 18px 22px;
	border-radius: 14px;
	background: var(--gl-tint);
	color: var(--gl-strong);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
}

.geol-earn .fas,
.geol-earn .sci {
	flex: 0 0 auto;
	color: var(--gl-deep);
	font-size: 20px;
}

.dark-theme .geol-earn .fas,
.dark-theme .geol-earn .sci {
	color: var(--gl-sky);
}

/* Questions. */
.geol-faq {
	max-width: 820px;
}

.geol-faq details {
	border-bottom: 1px solid var(--gl-line);
}

.geol-faq summary {
	position: relative;
	display: block;
	padding: 22px 48px 22px 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--gl-display);
	font-size: 19px;
	font-weight: 700;
	color: var(--gl-strong);
}

.geol-faq summary::-webkit-details-marker {
	display: none;
}

.geol-faq summary::after {
	content: "+";
	position: absolute;
	top: 50%;
	right: 6px;
	width: 30px;
	height: 30px;
	margin-top: -15px;
	border-radius: 50%;
	background: var(--gl-tint);
	color: var(--gl-link);
	font-size: 20px;
	font-weight: 700;
	line-height: 30px;
	text-align: center;
	transition: transform .2s ease;
}

.geol-faq details[open] summary::after {
	transform: rotate(45deg);
}

.geol-faq details p {
	max-width: 720px;
	padding: 0 0 24px;
	font-size: 16px;
	line-height: 1.65;
	color: var(--gl-muted);
}

/* The closing band. */
.geol-end {
	padding: 104px 0;
	text-align: center;
}

.geol-end .geol-wrap {
	z-index: 1;
}

.geol-end h2 {
	font-size: clamp(32px, 4.2vw, 52px);
	line-height: 1.08;
	color: #FFFFFF;
}

.geol-end p {
	margin-top: 16px;
	font-family: var(--gl-display);
	font-size: 19px;
	font-weight: 500;
	color: rgba(255, 255, 255, .84);
}

.geol-end .geol-actions {
	justify-content: center;
}

.geol-end .geol-watermark {
	right: auto;
	left: -70px;
	bottom: -90px;
	width: 440px;
}

/* ---------------------------------------------------------------------------
   Narrower screens
   --------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
	.geol-hero {
		padding: 56px 0 72px;
	}

	.geol-hero-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 44px;
	}

	.geol-mock {
		max-width: 560px;
		width: 100%;
		margin: 0 auto;
	}

	.geol-why,
	.geol-bento {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.geol-why .geol-card:last-child {
		grid-column: 1 / -1;
	}

	.geol-bento-wide {
		grid-column: 1 / -1;
	}

	.geol-bento .geol-bento-full {
		flex-direction: column;
	}

	.geol-bento-full .geol-bento-copy {
		flex: none;
		padding: 28px 28px 0;
	}

	.geol-bento-full .geol-art {
		margin-top: 24px;
		padding: 0 28px 28px;
	}

	.geol-section,
	.geol-end {
		padding: 80px 0;
	}
}

@media (max-width: 767.98px) {
	.geol-steps {
		grid-template-columns: minmax(0, 1fr);
		gap: 36px;
	}

	.geol-steps::before {
		display: none;
	}

	.geol-fixes {
		grid-template-columns: minmax(0, 1fr);
	}

	.geol-strip .geol-wrap {
		justify-content: flex-start;
	}
}

@media (max-width: 575.98px) {
	.geol-wrap {
		padding: 0 18px;
	}

	.geol-hero {
		padding: 40px 0 56px;
	}

	.geol-lead {
		font-size: 17px;
	}

	.geol-actions .geol-btn {
		width: 100%;
	}

	.geol-mock {
		padding: 0;
	}

	.geol-score {
		width: 96px;
		height: 96px;
		top: -22px;
		right: -6px;
	}

	.geol-score svg {
		inset: 6px;
		width: 84px;
		height: 84px;
	}

	.geol-score-num {
		padding-top: 26px;
		font-size: 26px;
	}

	.geol-score-num small {
		font-size: 11px;
	}

	.geol-score-label {
		display: none;
	}

	.geol-window-body {
		padding: 18px 16px 20px;
	}

	.geol-q {
		max-width: 70%;
		font-size: 14px;
	}

	.geol-a {
		font-size: 14px;
	}

	.geol-sources {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.geol-sources .geol-source:nth-of-type(3) {
		display: none;
	}

	.geol-engine-card {
		position: relative;
		width: auto;
		margin: -14px 14px 0;
	}

	.geol-why,
	.geol-bento {
		grid-template-columns: minmax(0, 1fr);
	}

	.geol-art-score {
		flex-direction: column;
		align-items: stretch;
	}

	.geol-ring {
		margin: 0 auto;
	}

	.geol-bars li {
		grid-template-columns: 96px minmax(0, 1fr) 28px;
	}

	.geol-section,
	.geol-end {
		padding: 64px 0;
	}

	.geol-head {
		margin-bottom: 36px;
	}

	.geol-faq summary {
		font-size: 17px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.geol-btn,
	.geol-faq summary::after {
		transition: none;
	}

	.geol-btn:hover {
		transform: none;
	}
}