/*
Theme Name: Gorbit Enablers
Theme URI: https://gorbitdigital.com/
Author: Gorbit Digital
Author URI: https://gorbitdigital.com/
Description: Gorbit Digital's website: a playable path into Gorbit Guide and the AI Advisory Team. Colors, radii and type follow the Astryx theme used in the Gorbit Guide app.
Version: 1.4.3
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gorbit-enablers
*/

/* ==========================================================================
   1. Tokens
   Astryx tokens copied from the Gorbit Guide app theme (light / dark values),
   plus the few roles this site needs. Gold is reserved for game rewards.
   ========================================================================== */
:root {
	--color-background-body: #f1f4f7;
	--color-background-body-dark: #070e13;
	--color-background-card: #ffffff;
	--color-background-card-dark: #0f1c22;
	--color-background-popover-dark: #15252c;
	--color-text-primary: #0a1317;
	--color-text-primary-dark: #eef4f2;
	--color-text-secondary: #4e606f;
	--color-text-secondary-dark: #a3b6b1;
	--color-accent: #006c63;
	--color-accent-dark: #00ded0;
	--color-on-accent: #ffffff;
	--color-on-accent-dark: #003b35;
	--color-border: #131d1c1a;
	--color-border-dark: #e6f4f21a;
	--color-warning-dark: #f2c00b;

	--radius-page: 63px;
	--radius-container: 27px;
	--radius-element: 18px;
	--radius-inner: 9px;
	--radius-full: 9999px;

	--g-coin: #f2c00b;
	--g-coin-light: #ffd84d;
	--g-coin-ink: #8a5d00;
	--g-gutter: clamp(16px, 4vw, 32px);
	--g-max: 1200px;
	--g-section: clamp(4.5rem, 2.6rem + 6vw, 8.5rem);
	--g-ease: cubic-bezier(.2, .8, .2, 1);

	--i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--i-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
	--i-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 6 6.5.8-4.8 4.5 1.2 6.5L12 17.2l-5.8 3.2 1.2-6.5L2.6 9.4l6.5-.8z'/%3E%3C/svg%3E");
	--i-map: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4L3 6.5V20l6-2.5 6 2.5 6-2.5V4l-6 2.5zM9 4v13.5M15 6.5V20'/%3E%3C/svg%3E");
	--i-setup: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0-5.4 5.4l-5.8 5.8a1.8 1.8 0 0 0 2.5 2.5l5.8-5.8a4 4 0 0 0 5.4-5.4l-2.6 2.6-2.2-.6-.6-2.2z'/%3E%3C/svg%3E");
	--i-web: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='15' rx='3'/%3E%3Cpath d='M3 9h18M7 6.8h.01M10 6.8h.01'/%3E%3C/svg%3E");
	--i-grow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19h16M6 15l4-4 3 3 5-6M14 8h4v4'/%3E%3C/svg%3E");
	--i-care: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z'/%3E%3C/svg%3E");
	--i-today: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3.5' width='16' height='17' rx='3'/%3E%3Cpath d='M8 9h8M8 13h5'/%3E%3C/svg%3E");
	--i-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5h14a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-7l-4.5 3.5V17H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");
	--i-projects: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='2.5'/%3E%3Ccircle cx='18' cy='18' r='2.5'/%3E%3Cpath d='M8.5 6H15a3 3 0 0 1 0 6H9a3 3 0 0 0 0 6h6.5'/%3E%3C/svg%3E");
	--i-team: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3.5 19a5.5 5.5 0 0 1 11 0'/%3E%3Ccircle cx='17' cy='9' r='2.5'/%3E%3Cpath d='M16 13.6a4.5 4.5 0 0 1 5 4.4'/%3E%3C/svg%3E");
	--i-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5.5c0 4.5-3 7.6-7 9.5-4-1.9-7-5-7-9.5V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
	--i-backup: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.3-5.6M20 4v4h-4'/%3E%3C/svg%3E");
	--i-pulse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h4l2.5-6 4 12 2.5-6H21'/%3E%3C/svg%3E");
}

/* Section themes: every section sets its own surface and text roles. */
.g-night {
	--bg: #e7f3f1;
	--fg: var(--color-text-primary);
	--fg-2: var(--color-text-secondary);
	--accent: var(--color-accent);
	--on-accent: var(--color-on-accent);
	--card: var(--color-background-card);
	--card-2: var(--color-background-body);
	--line: #131d1c1f;
	--line-strong: #131d1c33;
	--accent-soft: #006c631a;
	background-color: var(--bg);
	color: var(--fg);
}
.g-day,
.g-paper,
body {
	--bg: var(--color-background-body);
	--fg: var(--color-text-primary);
	--fg-2: var(--color-text-secondary);
	--accent: var(--color-accent);
	--on-accent: var(--color-on-accent);
	--card: var(--color-background-card);
	--card-2: var(--color-background-body);
	--line: var(--color-border);
	--line-strong: #131d1c33;
	--accent-soft: #006c631a;
}
.g-day { background-color: var(--bg); color: var(--fg); }
.g-paper {
	--bg: var(--color-background-card);
	--card: var(--color-background-body);
	background-color: var(--bg);
	color: var(--fg);
}

/* ==========================================================================
   2. Base
   ========================================================================== */
html {
	background: var(--color-background-card);
	scroll-behavior: smooth;
	scroll-padding-top: 5.5rem;
	-webkit-text-size-adjust: 100%;
}
body {
	margin: 0;
	background: var(--color-background-body);
	color: var(--color-text-primary);
	font-family: "Mona Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 1.125rem;
	line-height: 1.6;
	font-optical-sizing: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
img, svg { max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.03em;
	text-wrap: balance;
}
p, ul, ol, dl, figure, blockquote { margin: 0; }
a { color: var(--accent, var(--color-accent)); text-decoration-thickness: .08em; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: .14em; }
:focus-visible {
	outline: 3px solid var(--accent, var(--color-accent));
	outline-offset: 3px;
	border-radius: 6px;
}
::selection { background: #006c6366; color: inherit; }
.g-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

/* WordPress wrappers: layout styles are turned off in theme.json, so the theme owns spacing. */
.wp-site-blocks { padding: 0; }
.wp-block-group { box-sizing: border-box; }
.g-main { display: block; }
.g-site-header { position: sticky; top: 0; z-index: 50; }

/* ==========================================================================
   3. Layout and type
   ========================================================================== */
.g-wrap {
	width: min(100% - 2 * var(--g-gutter), var(--g-max));
	margin-inline: auto;
}
.g-section { padding-block: var(--g-section); }
.g-intro { max-width: 50rem; margin-bottom: clamp(2.25rem, 1.2rem + 3vw, 3.75rem); }
.g-intro > * + * { margin-top: 1.1rem; }

.g-display {
	font-size: clamp(2.875rem, 1.6rem + 4.6vw, 5.25rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.035em;
}
.g-display--page { font-size: clamp(2.75rem, 1.5rem + 4.6vw, 5.25rem); line-height: .97; }
.g-h2 {
	font-size: clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.03em;
}
.g-h3 { font-size: 1.5rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; }
.g-lead {
	font-size: clamp(1.1875rem, 1.06rem + .45vw, 1.375rem);
	line-height: 1.55;
	color: var(--fg-2);
	max-width: 38em;
	text-wrap: pretty;
}
.g-lead a { color: var(--fg); }
.g-kicker {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0;
	color: var(--accent);
}
.g-kicker::before {
	content: "";
	width: .6rem; height: .6rem;
	border-radius: 50%;
	background: currentColor;
	box-shadow: 0 0 0 4px var(--accent-soft);
}
.g-muted { color: var(--fg-2); }
.g-more { margin-top: clamp(2rem, 4vw, 3rem); }
.g-more a { font-weight: 700; font-size: 1.125rem; color: var(--accent); }
.g-prose > * + * { margin-top: 1.1em; }
.g-prose p { color: var(--fg-2); }
.g-prose .g-lead { color: var(--fg); }

.g-split {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(2.5rem, 1rem + 5vw, 6rem);
	align-items: start;
}
.g-split__lead > * + * { margin-top: 1.25rem; }
.g-split__lead .g-actions { margin-top: 2rem; }
@media (max-width: 899px) {
	.g-split { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   4. Buttons and small parts
   ========================================================================== */
.wp-block-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: .875rem; }
.g-actions { margin-top: 2rem; }
.g-btn,
.wp-block-button .wp-block-button__link {
	--btn-bg: var(--color-accent);
	--btn-fg: #fff;
	--btn-shadow: #00403a;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-height: 3.25rem;
	padding: .8rem 1.4rem;
	border: 0;
	border-radius: var(--radius-element);
	background: var(--btn-bg);
	color: var(--btn-fg);
	box-shadow: 0 4px 0 var(--btn-shadow);
	font: inherit;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.005em;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: transform .12s var(--g-ease), box-shadow .12s var(--g-ease), filter .2s;
}
.g-btn:hover,
.wp-block-button .wp-block-button__link:hover { filter: brightness(1.07); text-decoration: none; }
.g-btn:active,
.wp-block-button .wp-block-button__link:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--btn-shadow); }
.g-btn--signal,
.g-btn-signal .wp-block-button__link { --btn-bg: #006c63; --btn-fg: #ffffff; --btn-shadow: #00403a; }
.g-day .g-btn-signal .wp-block-button__link,
.g-paper .g-btn-signal .wp-block-button__link { --btn-bg: var(--color-accent); --btn-fg: #fff; --btn-shadow: #00403a; }
.g-btn--teal,
.g-btn-teal .wp-block-button__link { --btn-bg: var(--color-accent); --btn-fg: #fff; --btn-shadow: #00403a; }
.g-btn-ghost .wp-block-button__link,
.g-btn-outline .wp-block-button__link {
	--btn-bg: transparent;
	--btn-fg: var(--fg);
	--btn-shadow: transparent;
	box-shadow: inset 0 0 0 2px var(--line-strong);
}
.g-btn-ghost .wp-block-button__link:hover,
.g-btn-outline .wp-block-button__link:hover { box-shadow: inset 0 0 0 2px var(--fg); filter: none; }
.g-btn-ghost .wp-block-button__link:active,
.g-btn-outline .wp-block-button__link:active { box-shadow: inset 0 0 0 2px var(--fg); }

.g-checks {
	list-style: none;
	padding: 0;
	margin: 1.75rem 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: .6rem 1.5rem;
}
.g-checks li {
	display: flex;
	align-items: flex-start;
	gap: .55rem;
	color: var(--fg-2);
	font-size: 1rem;
	line-height: 1.45;
}
.g-checks li::before {
	content: "";
	flex: none;
	width: 1.3rem;
	height: 1.3rem;
	margin-top: .05rem;
	background: var(--accent);
	-webkit-mask: var(--i-check) center / contain no-repeat;
	mask: var(--i-check) center / contain no-repeat;
}
.g-checks--big li { font-size: 1.1875rem; color: var(--fg); }
.g-checks--big { flex-direction: column; gap: .9rem; }

.g-tag {
	display: inline-block;
	padding: .3rem .75rem;
	border-radius: var(--radius-full);
	background: var(--accent-soft);
	color: var(--accent);
	font-size: .875rem;
	font-weight: 700;
	white-space: nowrap;
}
.g-meter {
	display: block;
	height: .5rem;
	margin-top: .6rem;
	border-radius: var(--radius-full);
	background: #0a131710;
	overflow: hidden;
}
.g-meter > span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--g-coin), var(--g-coin-light));
}
.g-chip {
	display: inline-block;
	padding: .45rem .75rem;
	border-radius: 12px;
	background: #f1f4f7;
	color: #0a1317;
	font-size: .875rem;
	font-weight: 700;
	line-height: 1.2;
}
.g-chip--go { background: #006c63; color: #ffffff; }
.g-bubble {
	max-width: 85%;
	padding: .6rem .9rem;
	border-radius: 18px;
	font-size: .9375rem;
	line-height: 1.4;
}
.g-bubble--you {
	justify-self: end;
	background: #006c63;
	color: #ffffff;
	font-weight: 650;
	border-bottom-right-radius: 6px;
}
.g-bubble--gorbit {
	justify-self: start;
	background: #f1f4f7;
	color: #0a1317;
	box-shadow: inset 0 0 0 1px #131d1c1a;
	border-bottom-left-radius: 6px;
}
.g-bubble--typing { display: none; gap: .3rem; align-items: center; }
.g-bubble--typing span {
	width: .45rem; height: .45rem;
	border-radius: 50%;
	background: #4e606f;
	animation: g-dots 1s infinite ease-in-out;
}
.g-bubble--typing span:nth-child(2) { animation-delay: .15s; }
.g-bubble--typing span:nth-child(3) { animation-delay: .3s; }

.g-panel {
	background: var(--color-background-card);
	color: var(--color-text-primary);
	border-radius: var(--radius-container);
	padding: clamp(1.5rem, 3vw, 2.5rem);
	box-shadow: 0 1px 0 #131d1c0f, 0 24px 48px -36px #0a131766;
}
.g-panel > * + * { margin-top: 1rem; }
.g-panel h3, .g-panel .g-h3 { font-size: 1.5rem; letter-spacing: -0.02em; }

/* Icons drawn with masks so they take the section's accent color. */
[class*="g-icon-"] { --icon: var(--i-map); }
.g-icon-map { --icon: var(--i-map); }
.g-icon-setup { --icon: var(--i-setup); }
.g-icon-web { --icon: var(--i-web); }
.g-icon-grow { --icon: var(--i-grow); }
.g-icon-care { --icon: var(--i-care); }
.g-icon-today { --icon: var(--i-today); }
.g-icon-chat { --icon: var(--i-chat); }
.g-icon-projects { --icon: var(--i-projects); }
.g-icon-team { --icon: var(--i-team); }
.g-icon-shield { --icon: var(--i-shield); }
.g-icon-backup { --icon: var(--i-backup); }
.g-icon-pulse { --icon: var(--i-pulse); }

/* ==========================================================================
   5. Header and menu
   ========================================================================== */
.g-header {
	--fg: #0a1317;
	--fg-2: #4e606f;
	--accent: #006c63;
	--line: #131d1c1a;
	background: #ffffffe8;
	-webkit-backdrop-filter: saturate(1.4) blur(14px);
	backdrop-filter: saturate(1.4) blur(14px);
	color: var(--fg);
	border-bottom: 1px solid transparent;
	transition: border-color .3s;
}
.g-header.is-scrolled { border-bottom-color: var(--line); }
.g-header__bar {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1.25rem;
	min-height: 4.5rem;
}
.g-brand {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	color: inherit;
	text-decoration: none;
	font-size: 1.375rem;
	font-weight: 600;
	letter-spacing: -0.035em;
}
.g-brand img { width: 2.25rem; height: 2.25rem; }
.g-nav { display: flex; gap: .15rem; margin-left: auto; }
.g-nav a {
	padding: .55rem .8rem;
	border-radius: 12px;
	color: #4e606f;
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
}
.g-nav a:hover,
.g-nav a[aria-current="page"] { color: var(--color-text-primary); background: #0a131710; }
.g-header__cta.g-btn { min-height: 2.75rem; padding: .55rem 1.05rem; font-size: .9375rem; box-shadow: 0 3px 0 #00403a; }
.g-menu { display: none; }
.g-menu__toggle {
	display: grid;
	place-items: center;
	width: 2.75rem; height: 2.75rem;
	border-radius: 12px;
	color: var(--color-text-primary);
	cursor: pointer;
	list-style: none;
}
.g-menu__toggle::-webkit-details-marker { display: none; }
.g-menu[open] .g-menu__toggle { background: #0a131710; }
.g-menu__panel {
	position: absolute;
	top: 100%;
	left: calc(-1 * var(--g-gutter));
	right: calc(-1 * var(--g-gutter));
	display: grid;
	gap: .1rem;
	padding: .75rem var(--g-gutter) 1.5rem;
	background: #ffffff;
	border-bottom: 1px solid var(--line);
	box-shadow: 0 30px 40px -20px #000000a0;
}
.g-menu:not([open]) .g-menu__panel { display: none; }
.g-menu__panel a:not(.g-btn) {
	padding: .7rem 0;
	color: #0a1317;
	font-size: 1.25rem;
	font-weight: 720;
	letter-spacing: -0.02em;
	text-decoration: none;
	border-bottom: 1px solid var(--line);
}
.g-menu__panel .g-btn { margin-top: 1rem; }
@media (max-width: 1023px) {
	.g-nav { display: none; }
	.g-header__cta { margin-left: auto; }
	.g-menu { display: block; }
}
.g-short { display: none; }
@media (max-width: 480px) {
	.g-long { display: none; }
	.g-short { display: inline; }
}
@media (max-width: 420px) {
	.g-header__bar { gap: .75rem; }
	.g-brand { font-size: 1.25rem; }
	.g-header__cta.g-btn { padding: .5rem .85rem; font-size: .875rem; }
}
@media (max-width: 359px) {
	.g-header__cta { display: none; }
	.g-menu { margin-left: auto; }
}

/* ==========================================================================
   6. Hero
   ========================================================================== */
.g-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(3.25rem, 1.5rem + 6vw, 7.5rem) clamp(4.5rem, 2.5rem + 7vw, 9rem);
}
.g-hero { background: linear-gradient(180deg, #dcedf6 0%, #e9f4f1 100%); }
.g-hero::before { content: none; }
.g-hero::after {
	/* Dawn on the horizon, where the town is. */
	content: "";
	position: absolute;
	left: -10%; right: -10%; bottom: -1px;
	height: 45%;
	z-index: -1;
	background: radial-gradient(60% 100% at 65% 100%, #006c6326, transparent 70%);
}
.g-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
	gap: clamp(2.5rem, 5vw, 5rem);
	align-items: center;
}
.g-hero__copy > * + * { margin-top: 1.5rem; }
.g-hero__copy .g-display + .g-lead { margin-top: 1.75rem; }
.g-hero__copy .g-actions { margin-top: 2.25rem; }
.g-hero--solo .g-hero__copy > * { max-width: 58rem; }
.g-hero--solo .g-display { max-width: 15ch; }
.g-hero--page { padding-block: clamp(3rem, 1.6rem + 5vw, 6rem) clamp(3.5rem, 2rem + 5vw, 6.5rem); }
.g-hero--short { padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.g-hero__art {
	position: relative;
	justify-self: end;
	width: min(100%, 30rem);
	margin-top: 2.5rem;
}
.g-hero__art--phone { justify-self: center; margin-top: 0; }
.g-hero__ship {
	position: absolute;
	top: -3.6rem;
	right: -.75rem;
	z-index: 2;
	width: 8.75rem;
	filter: drop-shadow(1.5px 0 0 #0b2e3a) drop-shadow(-1.5px 0 0 #0b2e3a) drop-shadow(0 1.5px 0 #0b2e3a) drop-shadow(0 -1.5px 0 #0b2e3a) drop-shadow(0 14px 16px #0a131740);
}
@media (max-width: 959px) {
	.g-hero__grid { grid-template-columns: minmax(0, 1fr); }
	.g-hero__art { justify-self: start; margin-top: 3.5rem; }
	.g-hero__art--phone { justify-self: center; }
}
@media (max-width: 520px) {
	.g-hero__ship { width: 6.5rem; top: -3rem; right: 0; }
	.g-checks { gap: .5rem 1.1rem; }
}

/* The morning email (hero and Guide showcase). */
.g-mail {
	position: relative;
	padding: 1.25rem 1.25rem 1.35rem;
	border-radius: var(--radius-container);
	background: #ffffff;
	color: #0a1317;
	font-size: 1rem;
	box-shadow: inset 0 0 0 1px #131d1c1a, 0 40px 80px -40px #000000c0;
}
.g-mail__head {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid #131d1c1a;
}
.g-mail__head img { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #f1f4f7; }
.g-mail__head p { display: flex; flex-direction: column; line-height: 1.25; }
.g-mail__head p span { color: #4e606f; font-size: .875rem; }
.g-mail__head time,
.g-mail__time { margin-left: auto; color: #4e606f; font-size: .875rem; }
.g-mail__subject {
	margin: 1rem 0 .85rem;
	font-size: 1.1875rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.02em;
}
.g-mail__list { list-style: none; padding: 0; display: grid; gap: .6rem; }
.g-mail__item {
	display: grid;
	grid-template-columns: 1.5rem minmax(0, 1fr);
	gap: .75rem;
	align-items: start;
	padding: .85rem .9rem;
	border-radius: var(--radius-element);
	background: #f1f4f7;
	font-size: .9375rem;
	line-height: 1.45;
	transition: background-color .4s;
}
.g-mail__tick {
	position: relative;
	width: 1.5rem; height: 1.5rem;
	border-radius: 50%;
	box-shadow: inset 0 0 0 2px #586c69;
	transition: background-color .35s, box-shadow .35s;
}
.g-mail__tick::after {
	content: "";
	position: absolute;
	inset: .25rem;
	background: #ffffff;
	-webkit-mask: var(--i-check) center / contain no-repeat;
	mask: var(--i-check) center / contain no-repeat;
	opacity: 0;
	transform: scale(.4);
	transition: opacity .3s, transform .3s var(--g-ease);
}
.g-mail__item.is-done .g-mail__tick { background: #006c63; box-shadow: none; }
.g-mail__item.is-done .g-mail__tick::after { opacity: 1; transform: none; }
.g-mail__tick--goal { box-shadow: inset 0 0 0 2px var(--g-coin); }
.g-mail__chip {
	display: inline-block;
	margin-top: .5rem;
	padding: .2rem .65rem;
	border-radius: var(--radius-full);
	background: #006c63;
	color: #ffffff;
	font-size: .875rem;
	font-weight: 700;
}
.g-mail__thread { display: grid; gap: .5rem; margin-top: 1rem; }
/* Played once when the hero comes into view (site.js), final state otherwise. */
.g-mail.is-armed .g-bubble--you,
.g-mail.is-armed .g-bubble--gorbit { display: none; }
.g-mail.is-armed.s1 .g-bubble--you { display: block; animation: g-pop .35s var(--g-ease) both; }
.g-mail.is-armed.s2 .g-bubble--typing { display: inline-flex; animation: g-pop .25s var(--g-ease) both; }
.g-mail.is-armed.s3 .g-bubble--typing { display: none; }
.g-mail.is-armed.s3 .g-bubble--gorbit { display: block; animation: g-pop .4s var(--g-ease) both; }

/* ==========================================================================
   7. The town game
   ========================================================================== */
.g-play { background: linear-gradient(180deg, #d5efe8 0, var(--color-background-body) 26rem); }
.gx { display: none; }
.js .gx { display: block; }
.gx {
	padding: clamp(.5rem, 1.1vw, .85rem);
	border-radius: clamp(26px, 3.6vw, 44px);
	background: #ffffff;
	color: #0a1317;
	box-shadow: inset 0 0 0 1px #131d1c1a, 0 40px 80px -50px #0a131740;
}
.gx-hud {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem 1rem;
	padding: .45rem .75rem .85rem;
}
.gx-level { display: flex; align-items: baseline; gap: .55rem; font-weight: 600; font-size: 1.125rem; letter-spacing: -0.015em; }
.gx-level__num { color: var(--g-coin-ink); }
.gx-stars { display: flex; gap: .3rem; margin-left: auto; }
.gx-star {
	width: 1.75rem; height: 1.75rem;
	fill: #f1f4f7;
	stroke: #586c69;
	stroke-width: 1.2;
	transition: fill .3s, stroke .3s;
}
.gx-star.is-on {
	fill: var(--g-coin);
	stroke: var(--g-coin-light);
	filter: drop-shadow(0 0 6px #f2c00b8c);
}
.gx-star.is-new { animation: gx-pop .6s cubic-bezier(.2, 1.6, .4, 1); }
.gx-reset {
	padding: .4rem .65rem;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: #4e606f;
	font: inherit;
	font-size: .9375rem;
	font-weight: 600;
	cursor: pointer;
}
.gx-reset:hover { background: #0a131710; color: var(--color-text-primary); }
.gx-stage {
	display: grid;
	grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
	gap: .75rem;
	align-items: stretch;
}
.gx-world {
	position: relative;
	align-self: start;
	width: 100%;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: clamp(20px, 2.8vw, 34px);
	background: #dfeee9;
	outline-offset: -4px;
}
.gx-world:focus-visible { outline: 3px solid #006c63; }
.gx-map {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	transition: opacity .35s, filter .6s;
}
.gx-map [data-building] { transition: filter .6s; }
.gx-glow, .gx-sparkles { opacity: 0; transition: opacity .8s; }
.gx-sparkles { transform-box: fill-box; transform-origin: center; }
.gx-world[data-done~="customers"] [data-glow="customers"],
.gx-world[data-done~="priorities"] [data-glow="priorities"],
.gx-world[data-done~="website"] [data-glow="website"],
.gx-world[data-done~="marketing"] [data-glow="marketing"],
.gx-world[data-done~="customers"] [data-sparkles="customers"],
.gx-world[data-done~="priorities"] [data-sparkles="priorities"],
.gx-world[data-done~="website"] [data-sparkles="website"],
.gx-world[data-done~="marketing"] [data-sparkles="marketing"] { opacity: 1; }
.gx-world[data-done~="customers"] [data-building="customers"],
.gx-world[data-done~="priorities"] [data-building="priorities"],
.gx-world[data-done~="website"] [data-building="website"],
.gx-world[data-done~="marketing"] [data-building="marketing"] { filter: url(#town-shadow) brightness(1.06) saturate(1.25); }
.gx-world.is-thriving .gx-map { filter: saturate(1.15); }
.gx-world.has-scene .gx-map,
.gx-world.has-scene .gx-pins { opacity: 0; visibility: hidden; }
.gx-scene { position: absolute; inset: 0; animation: g-fade .4s ease both; }
.gx-scene svg { display: block; width: 100%; height: 100%; }
.gx-scene [style*="--work"] { transition: fill .7s, stroke .7s, opacity .7s; }
.gx-scene.is-done { --work-color: #d2f4e6; --work-ink: #129b90; --work-opacity: 1; }
.gx-pins { position: absolute; inset: 0; z-index: 2; pointer-events: none; transition: opacity .3s; }
.gx-pin {
	position: absolute;
	left: var(--x);
	top: var(--y);
	transform: translate(-50%, -50%);
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .45rem .85rem .45rem .45rem;
	border: 0;
	border-radius: var(--radius-full);
	background: #ffffffee;
	color: #0a1317;
	font: inherit;
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.01em;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: 0 8px 18px -8px #103c3c80, 0 0 0 1px #131d1c14;
	transition: transform .2s var(--g-ease), background-color .2s;
}
.gx-pin::before {
	content: "";
	flex: none;
	width: 1.35rem; height: 1.35rem;
	border-radius: 50%;
	background: #f1f4f7;
	box-shadow: inset 0 0 0 2.5px #006c63;
}
.gx-pin:hover { transform: translate(-50%, calc(-50% - 2px)); background: #fff; }
.gx-pin:focus-visible { outline: 3px solid #006c63; outline-offset: 3px; border-radius: var(--radius-full); }
.gx-pin.is-done::before {
	background: var(--g-coin);
	box-shadow: none;
	-webkit-mask: var(--i-star) center / contain no-repeat;
	mask: var(--i-star) center / contain no-repeat;
}
.gx-pin.is-near { background: #006c63; color: #ffffff; }
.gx-ship {
	position: absolute;
	left: var(--sx, 50%);
	top: var(--sy, 40%);
	z-index: 3;
	width: clamp(72px, 17%, 112px);
	transform: translate(-50%, -62%);
	filter: drop-shadow(1.5px 0 0 #0b2e3a) drop-shadow(-1.5px 0 0 #0b2e3a) drop-shadow(0 1.5px 0 #0b2e3a) drop-shadow(0 -1.5px 0 #0b2e3a) drop-shadow(0 16px 10px #0a131780);
	pointer-events: none;
	transition: left .9s cubic-bezier(.55, 0, .25, 1), top .9s cubic-bezier(.55, 0, .25, 1), transform .45s var(--g-ease), opacity .45s;
}
.gx-world.is-steering .gx-ship { transition: transform .45s var(--g-ease); }
.gx-ship.is-landed { transform: translate(-50%, -40%) scale(.7); opacity: .0; }
.gx-world.has-scene .gx-ship { opacity: 0; }
.gx-back {
	position: absolute;
	top: .85rem; left: .85rem;
	z-index: 4;
	padding: .55rem 1rem;
	border: 0;
	border-radius: var(--radius-full);
	background: #ffffffd9;
	color: #0a1317;
	font: inherit;
	font-size: .9375rem;
	font-weight: 700;
	cursor: pointer;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.gx-back:hover { background: #ffffff; }
.gx-tip {
	position: absolute;
	left: 50%; bottom: .7rem;
	z-index: 2;
	transform: translateX(-50%);
	padding: .3rem .75rem;
	border-radius: var(--radius-full);
	background: #ffffffd0;
	color: #2c5552;
	font-size: .875rem;
	font-weight: 600;
	white-space: nowrap;
	transition: opacity .4s;
}
.gx-world.has-scene .gx-tip,
.gx-world.has-flown .gx-tip { opacity: 0; }
@media (hover: none), (max-width: 760px) { .gx-tip { display: none; } }
.gx-burst { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.gx-burst i {
	position: absolute;
	left: var(--x); top: var(--y);
	width: .6rem; height: .6rem;
	border-radius: 2px;
	background: var(--c);
	animation: gx-confetti 1.3s cubic-bezier(.2, .7, .3, 1) forwards;
}
.gx-float {
	position: absolute;
	left: var(--x); top: var(--y);
	transform: translate(-50%, -50%);
	padding: .35rem .7rem;
	border-radius: var(--radius-full);
	background: var(--g-coin);
	color: #3b2a00;
	font-weight: 600;
	font-size: 1rem;
	white-space: nowrap;
	animation: gx-float 1.6s var(--g-ease) forwards;
}

/* The panel beside the map. */
.gx-panel {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	padding: clamp(1.25rem, 2.2vw, 2rem);
	border-radius: clamp(20px, 2.8vw, 34px);
	background: #f1f4f7;
	color: #0a1317;
}
.gx-panel > .gx-in { display: flex; flex-direction: column; flex: 1; animation: g-fade .35s ease both; }
.gx-panel h3 {
	font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2rem);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.035em;
}
.gx-place { margin-bottom: .55rem; color: #006c63; font-size: 1rem; font-weight: 700; }
.gx-intro-text { margin-top: .75rem; color: #4e606f; font-size: 1.0625rem; }
.gx-plate {
	margin-top: 1.1rem;
	padding: 1rem 1.1rem;
	border-radius: var(--radius-element);
	background: #ffffff;
	font-size: 1.0625rem;
	line-height: 1.5;
}
.gx-plate small { display: block; margin-bottom: .3rem; color: #4e606f; font-size: .875rem; font-weight: 650; }
.gx-ask { margin-top: 1.35rem; font-size: 1.125rem; font-weight: 600; }
.gx-choices { display: grid; gap: .6rem; margin-top: .75rem; }
.gx-choice,
.gx-log button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	min-height: 3.5rem;
	padding: .95rem 1.1rem;
	border: 0;
	border-radius: var(--radius-element);
	background: #ffffff;
	color: #0a1317;
	font: inherit;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
	box-shadow: inset 0 0 0 1px #131d1c1a, 0 4px 0 #c9d6d9;
	transition: transform .12s var(--g-ease), box-shadow .12s var(--g-ease), background-color .2s, opacity .3s;
}
.gx-choice:hover:not([disabled]),
.gx-log button:hover { background: #e6edf0; }
.gx-choice:active:not([disabled]),
.gx-log button:active { transform: translateY(3px); box-shadow: inset 0 0 0 1px #131d1c1a, 0 1px 0 #c9d6d9; }
.gx-choice.is-picked { background: #006c63; color: #ffffff; box-shadow: 0 4px 0 #00403a; }
.gx-choice[disabled]:not(.is-picked) { opacity: .4; cursor: default; }
.gx-choice[disabled] { cursor: default; }
.gx-working { display: flex; align-items: center; gap: .65rem; margin-top: 1.1rem; color: #4e606f; font-weight: 650; }
.gx-working .g-bubble--typing { display: inline-flex; padding: .55rem .75rem; }
.gx-result {
	margin-top: 1.1rem;
	padding: 1.05rem 1.15rem;
	border-radius: var(--radius-element);
	background: #e7f3f1;
	color: #0a1317;
	font-size: 1.0625rem;
	line-height: 1.55;
	animation: g-pop .4s var(--g-ease) both;
}
.gx-result__from { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; color: #006c63; font-size: .9375rem; font-weight: 600; }
.gx-result__from img { width: 1.5rem; height: 1.5rem; }
.gx-done {
	display: grid;
	grid-template-columns: 2.25rem minmax(0, 1fr);
	gap: .75rem;
	align-items: start;
	margin-top: 1rem;
	animation: g-pop .4s .15s var(--g-ease) both;
}
.gx-done::before {
	content: "";
	width: 2.25rem; height: 2.25rem;
	background: var(--g-coin);
	-webkit-mask: var(--i-star) center / contain no-repeat;
	mask: var(--i-star) center / contain no-repeat;
}
.gx-done strong { display: block; color: var(--g-coin-ink); font-size: 1.0625rem; }
.gx-done p { color: #0a1317; }
.gx-who { margin-top: .6rem; color: #4e606f; font-size: .9375rem; }
.gx-next {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem 1rem;
	margin-top: auto;
	padding-top: 1.35rem;
}
.gx-link {
	padding: .3rem 0;
	border: 0;
	background: none;
	color: #006c63;
	font: inherit;
	font-size: 1rem;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: .2em;
	cursor: pointer;
}
.gx-log { list-style: none; padding: 0; margin: 1.1rem 0 0; display: grid; gap: .55rem; }
.gx-log button { justify-content: flex-start; gap: .85rem; padding: .8rem 1rem; }
.gx-log__icon {
	flex: none;
	width: 1.75rem; height: 1.75rem;
	border-radius: 50%;
	box-shadow: inset 0 0 0 2.5px #586c69;
}
.gx-log .is-done .gx-log__icon {
	background: var(--g-coin);
	box-shadow: none;
	-webkit-mask: var(--i-star) center / contain no-repeat;
	mask: var(--i-star) center / contain no-repeat;
}
.gx-log__text { display: grid; gap: .1rem; }
.gx-log__goal { font-size: 1.0625rem; font-weight: 600; }
.gx-log__place { color: #4e606f; font-size: .875rem; font-weight: 600; }
.gx-log__go { margin-left: auto; color: #006c63; font-size: .9375rem; font-weight: 700; white-space: nowrap; }
.gx-log .is-done .gx-log__go { color: var(--g-coin-ink); }
.gx-points { list-style: none; padding: 0; margin: 1.1rem 0 0; display: grid; gap: .55rem; }
.gx-points li { display: flex; gap: .6rem; align-items: flex-start; font-size: 1.0625rem; font-weight: 650; }
.gx-points li::before {
	content: "";
	flex: none;
	width: 1.35rem; height: 1.35rem;
	margin-top: .1rem;
	background: #006c63;
	-webkit-mask: var(--i-check) center / contain no-repeat;
	mask: var(--i-check) center / contain no-repeat;
}
.gx-small { margin-top: 1rem; color: #4e606f; font-size: .9375rem; }
.gx-live { margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid #131d1c1a; }
.gx-live label { display: block; font-weight: 700; font-size: 1rem; }
.gx-live textarea {
	width: 100%;
	min-height: 5.5rem;
	margin-top: .5rem;
	padding: .8rem .9rem;
	border: 0;
	border-radius: 14px;
	background: #f1f4f7;
	color: #0a1317;
	font: inherit;
	font-size: 1rem;
	resize: vertical;
	box-shadow: inset 0 0 0 1px #131d1c2e;
}
.gx-live textarea:focus-visible { outline: 3px solid #006c63; outline-offset: 2px; }
.gx-live .gx-link { margin-top: .5rem; }
.gx-nudge {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .9rem 1.5rem;
	margin-top: .75rem;
	padding: 1rem 1.15rem 1rem 1.4rem;
	border-radius: clamp(20px, 2.8vw, 34px);
	background: #ffffff;
	animation: g-pop .45s var(--g-ease) both;
}
.gx-nudge p { font-size: 1.0625rem; font-weight: 650; }
@media (min-width: 900px) {
	.gx-world { position: sticky; top: 5.5rem; }
}
@media (max-width: 899px) {
	.gx-stage { grid-template-columns: minmax(0, 1fr); }
	.gx-panel { min-height: 0; }
}
@media (max-width: 560px) {
	.gx-pin { gap: .35rem; padding: .35rem .65rem .35rem .35rem; font-size: .875rem; }
	.gx-pin::before { width: 1.1rem; height: 1.1rem; }
	.gx-star { width: 1.5rem; height: 1.5rem; }
	.gx-level { font-size: 1rem; }
	.gx-nudge .g-btn { width: 100%; }
}

/* Quest words: shown as a readable list without JavaScript and in the editor. */
.js .gx-quests { display: none; }
.gx-quests { display: grid; gap: 1rem; margin-top: 2rem; }
.gx-quests__title { font-size: 1.5rem; letter-spacing: -0.02em; }
.gx-quest {
	padding: 1.5rem;
	border-radius: var(--radius-container);
	background: var(--color-background-card);
	box-shadow: inset 0 0 0 1px var(--color-border);
}
.gx-quest > * + * { margin-top: .6rem; }
.gx-q-place { color: var(--color-accent); font-weight: 700; font-size: 1rem; }
.gx-q-goal { font-weight: 600; }
.gx-q-title { font-size: 1.375rem; letter-spacing: -0.02em; }
.gx-q-plate, .gx-q-ask, .gx-q-who { color: var(--color-text-secondary); }
.gx-q-choice { padding: .75rem 1rem; border-radius: var(--radius-element); background: var(--color-background-body); }
.gx-q-label { font-weight: 700; }
.gx-q-result { color: var(--color-text-secondary); }

/* ==========================================================================
   8. Gorbit Guide showcase and app mockups
   ========================================================================== */
.g-show {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(2rem, 4vw, 4rem);
	align-items: center;
}
.g-show__tabs { display: grid; gap: .5rem; }
.g-show__tabs button {
	position: relative;
	display: grid;
	gap: .3rem;
	width: 100%;
	padding: 1.15rem 1.25rem 1.15rem 1.5rem;
	border: 0;
	border-radius: var(--radius-element);
	background: transparent;
	color: var(--fg);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: background-color .2s;
}
.g-show__tabs button::before {
	content: "";
	position: absolute;
	left: .45rem; top: 1.2rem; bottom: 1.2rem;
	width: 4px;
	border-radius: 4px;
	background: transparent;
	transition: background-color .2s;
}
.g-show__tabs button strong { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.g-show__tabs button span { color: var(--fg-2); font-size: 1rem; line-height: 1.5; }
.g-show__tabs button:hover { background: #f1f4f7b3; }
.g-show__tabs button[aria-selected="true"] { background: var(--color-background-body); }
.g-show__tabs button[aria-selected="true"]::before { background: var(--accent); }
.g-show__stage {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 38rem;
	padding: clamp(1.5rem, 3vw, 3rem);
	border-radius: clamp(36px, 5vw, var(--radius-page));
	background:
		radial-gradient(70% 60% at 50% 35%, #d7f2ec 0, transparent 70%),
		var(--color-background-body);
}
.g-show__panel { width: 100%; max-width: 27rem; }
.js .g-show__panel { display: none; }
.js .g-show__panel.is-active { display: block; animation: g-fade .35s ease both; }
.g-show__caption { display: none; }
@media (max-width: 899px) {
	.g-show { grid-template-columns: minmax(0, 1fr); }
	.g-show__tabs { display: none; }
	.js .g-show__panel { display: block; }
	.g-show__caption {
		display: block;
		margin-bottom: 1.25rem;
		color: var(--fg-2);
		font-size: 1.0625rem;
	}
	.g-show__caption strong { display: block; color: var(--fg); font-size: 1.375rem; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: .3rem; }
	.g-show__stage { gap: 3.5rem; min-height: 0; padding: 0; background: none; border-radius: 0; }
	.g-show__panel { max-width: 30rem; }
	/* The homepage hero already shows the morning email on phones. */
	.home #g-panel-mail { display: none; }
}

.g-phone {
	width: min(100%, 20rem);
	margin-inline: auto;
	padding: .6rem;
	border-radius: 46px;
	background: #0a1317;
	box-shadow: inset 0 0 0 2px #c4d0d6, 0 40px 70px -30px #0a131733;
}
.g-phone__screen {
	display: flex;
	flex-direction: column;
	gap: .7rem;
	min-height: 36rem;
	padding: 1.15rem .9rem .8rem;
	border-radius: 38px;
	background: #ffffff;
	color: #0a1317;
	font-size: .9375rem;
	overflow: hidden;
}
.g-app__top { display: flex; align-items: baseline; justify-content: space-between; padding-inline: .2rem; }
.g-app__title { font-size: 1.625rem; font-weight: 600; letter-spacing: -0.035em; }
.g-app__count { color: #4e606f; font-size: .875rem; font-weight: 650; }
.g-goal { display: grid; gap: .1rem; padding: .7rem .85rem; border-radius: 16px; background: #ffffff; }
.g-goal span:first-child { color: #4e606f; font-size: .875rem; }
.g-goal strong { font-size: 1rem; }
.g-today { display: flex; flex-direction: column; flex: 1; overflow: hidden; border-radius: 24px; background: #ffffff; }
.g-today__art { aspect-ratio: 16 / 10; overflow: hidden; background: #dfeee9; }
.g-today__art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.g-today__tag { margin: .85rem .95rem 0; color: var(--g-coin-ink); font-size: .875rem; font-weight: 600; }
.g-today__title { margin: .15rem .95rem 0; font-size: 1.3125rem; font-weight: 600; line-height: 1.15; letter-spacing: -0.025em; }
.g-today__text { margin: .4rem .95rem 0; color: #4e606f; line-height: 1.45; }
.g-today__actions { display: flex; flex-wrap: wrap; gap: .4rem; margin: auto .95rem .95rem; padding-top: .9rem; }
.g-toast {
	display: flex;
	align-self: center;
	gap: .85rem;
	padding: .45rem .95rem;
	border-radius: var(--radius-full);
	background: #e7f3f1;
	color: #0a1317;
	font-size: .875rem;
	font-weight: 650;
	box-shadow: 0 10px 20px -10px #000;
}
.g-toast span { color: #006c63; font-weight: 600; }
.g-tabbar {
	display: flex;
	justify-content: space-around;
	padding-top: .65rem;
	border-top: 1px solid #131d1c1a;
	color: #4e606f;
	font-size: .8125rem;
	font-weight: 680;
}
.g-tabbar .is-on { color: #006c63; }

.g-board,
.g-knows {
	padding: 1.35rem;
	border-radius: var(--radius-container);
	background: #ffffff;
	color: #0a1317;
	box-shadow: 0 40px 70px -40px #0a131733;
}
.g-board__title,
.g-knows__title { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.3125rem; font-weight: 600; letter-spacing: -0.025em; }
.g-board__title span { color: #4e606f; font-size: .875rem; font-weight: 600; letter-spacing: 0; }
.g-board__list { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .6rem; }
.g-board__list li {
	display: grid;
	grid-template-columns: 3rem minmax(0, 1fr);
	gap: .15rem .85rem;
	align-items: center;
	padding: .85rem;
	border-radius: var(--radius-element);
	background: #f1f4f7;
}
.g-board__list p { display: grid; line-height: 1.3; }
.g-board__list p span { color: #4e606f; font-size: .875rem; }
.g-board__list em { grid-column: 2; color: var(--g-coin-ink); font-size: .9375rem; font-style: normal; font-weight: 600; }
.g-face {
	--face: #2694fe;
	position: relative;
	grid-row: span 2;
	width: 3rem; height: 3rem;
	border-radius: 50%;
	background: var(--face);
	box-shadow: inset 0 -4px 0 #00000033;
}
.g-face::before {
	content: "";
	position: absolute;
	left: 50%; top: 52%;
	width: 1.45rem; height: 1.45rem;
	border-radius: 50%;
	background: #fff;
	transform: translate(-50%, -50%);
}
.g-face::after {
	content: "";
	position: absolute;
	left: 54%; top: 54%;
	width: .62rem; height: .62rem;
	border-radius: 50%;
	background: #0a1317;
	transform: translate(-50%, -50%);
}
.g-face--reviews { --face: #fb8c00; }
.g-face--posts { --face: #7952ff; }
.g-board__add {
	margin-top: .75rem;
	padding: .7rem;
	border-radius: var(--radius-element);
	box-shadow: inset 0 0 0 2px #131d1c2e;
	color: #4e606f;
	font-weight: 700;
	text-align: center;
}
.g-knows dl { display: grid; gap: .55rem; margin-top: 1rem; }
.g-knows dl div { padding: .75rem .9rem; border-radius: 16px; background: #f1f4f7; }
.g-knows dt { color: #4e606f; font-size: .875rem; font-weight: 600; }
.g-knows dd { margin: .15rem 0 0; font-weight: 680; }
.g-knows__teach { margin-top: 1rem; }

/* ==========================================================================
   9. AI Advisory Team, lists of services, quote
   ========================================================================== */
.g-advisory .g-split { align-items: start; }
.g-roster { display: grid; border-top: 1px solid var(--line); }
.g-roster__item {
	display: grid;
	grid-template-columns: 2.25rem minmax(0, 1fr) auto;
	gap: .4rem 1.25rem;
	padding: 1.6rem 0;
	border-bottom: 1px solid var(--line);
}
.g-roster__item::before {
	content: "";
	grid-column: 1;
	grid-row: 1 / span 2;
	width: 2.25rem; height: 2.25rem;
	background: var(--accent);
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
}
.g-roster__item > h3 { grid-column: 2; font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.g-roster__item > p:not(.g-tag) { grid-column: 2; color: var(--fg-2); }
.g-roster__item > .g-tag { grid-column: 3; grid-row: 1; align-self: start; }
.g-roster__note { padding-top: 1.35rem; color: var(--fg-2); font-size: 1rem; }
@media (max-width: 599px) {
	.g-roster__item { grid-template-columns: 2rem minmax(0, 1fr); gap: .4rem 1rem; }
	.g-roster__item::before { width: 2rem; height: 2rem; grid-row: 1 / span 3; }
	.g-roster__item > .g-tag { grid-column: 2; grid-row: auto; justify-self: start; margin-top: .3rem; }
}

.wp-block-quote.g-quote,
.g-quote {
	margin: 2.25rem 0 0;
	padding: 0 0 0 1.5rem;
	border: 0;
	border-left: 3px solid var(--accent);
}
.g-quote p { font-size: 1.375rem; font-weight: 600; line-height: 1.45; letter-spacing: -0.015em; color: var(--fg); }
.g-quote cite { display: block; margin-top: .75rem; color: var(--fg-2); font-size: 1rem; font-style: normal; font-weight: 600; }
.g-quote--big { padding-left: 0; border-left: 0; }
.g-quote--big p { font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem); font-weight: 600; line-height: 1.15; letter-spacing: -0.035em; }
.g-proof__inner { max-width: 60rem; }
.g-proof__note { margin-top: 2.5rem; color: var(--fg-2); font-size: 1.125rem; max-width: 40rem; }

/* ==========================================================================
   10. Plans
   ========================================================================== */
.g-plan-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
	align-items: stretch;
}
.g-plan {
	display: flex;
	flex-direction: column;
	padding: 2rem 1.75rem 1.75rem;
	border-radius: var(--radius-container);
	background: var(--color-background-card);
	box-shadow: 0 1px 0 #131d1c0f, 0 24px 44px -34px #0a131773;
}
.g-plan > * + * { margin-top: .7rem; }
.g-plan__name { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; }
.g-plan__price { color: var(--fg-2); font-size: 1rem; }
.g-plan__price strong {
	margin-right: .3rem;
	color: var(--fg);
	font-size: 3.25rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.035em;
}
.g-plan__for { color: var(--fg-2); }
.g-plan .g-checks {
	flex-direction: column;
	gap: .65rem;
	margin-top: 1.4rem;
	padding-top: 1.4rem;
	border-top: 1px solid var(--line);
}
.g-plan .g-checks li { color: var(--fg); font-size: 1rem; }
.g-plan__cta { margin-top: auto; padding-top: 1.75rem; }
.g-plan__cta .wp-block-button,
.g-plan__cta .wp-block-button__link { width: 100%; }
.g-plan--featured {
	--fg: var(--color-text-primary);
	--fg-2: var(--color-text-secondary);
	--accent: var(--color-accent);
	--line: var(--color-border);
	background: var(--color-background-card);
	color: var(--fg);
	box-shadow: inset 0 0 0 2px var(--color-accent), 0 30px 60px -36px #006c6366;
}
.g-plan--featured .g-btn-signal .wp-block-button__link { --btn-bg: #006c63; --btn-fg: #ffffff; --btn-shadow: #00403a; }
.g-plan--featured { position: relative; }
.g-plan__badge {
	position: absolute;
	top: 0; left: 1.75rem;
	transform: translateY(-50%);
	padding: .3rem .8rem;
	border-radius: var(--radius-full);
	background: #006c63;
	color: #ffffff;
	font-size: .875rem;
	font-weight: 600;
}
.g-plan__badge + .g-plan__name { margin-top: 0; }
.g-plans__note { margin-top: 2rem; color: var(--fg-2); font-size: 1rem; text-align: center; }
@media (max-width: 959px) {
	.g-plan-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; max-width: 34rem; margin-inline: auto; }
}

/* ==========================================================================
   11. Timeline, pillars, features
   ========================================================================== */
.g-steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.75rem, 3vw, 3rem);
}
.g-steps--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-step { position: relative; padding-top: 2.6rem; }
.g-step::before {
	content: "";
	position: absolute;
	top: .55rem; left: 0;
	width: 1.2rem; height: 1.2rem;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 0 6px var(--accent-soft);
}
.g-step::after {
	content: "";
	position: absolute;
	top: 1.1rem; left: 2.25rem; right: -1.25rem;
	height: 2px;
	background: repeating-linear-gradient(90deg, var(--line-strong) 0 8px, transparent 8px 14px);
}
.g-step:last-child::after { display: none; }
.g-step__when { color: var(--accent); font-size: 1rem; font-weight: 600; }
.g-step h3 { margin-top: .3rem; font-size: 1.5rem; font-weight: 600; line-height: 1.15; letter-spacing: -0.025em; }
.g-step p:last-child { margin-top: .6rem; color: var(--fg-2); }
@media (max-width: 899px) {
	.g-steps,
	.g-steps--four { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
	.g-step { padding: 0 0 0 2.75rem; }
	.g-step::before { top: .2rem; }
	.g-step::after {
		top: 2.1rem; bottom: -1.6rem; left: .55rem; right: auto;
		width: 2px; height: auto;
		background: repeating-linear-gradient(180deg, var(--line-strong) 0 8px, transparent 8px 14px);
	}
}
@media (min-width: 900px) and (max-width: 1100px) {
	.g-steps--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.g-steps--four .g-step:nth-child(2)::after { display: none; }
}

.g-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.g-pillar { padding-top: 1.4rem; border-top: 3px solid var(--accent); }
.g-pillar h3 { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; }
.g-pillar p { margin-top: .6rem; color: var(--fg-2); }
@media (max-width: 899px) { .g-pillars { grid-template-columns: minmax(0, 1fr); } }

.g-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.75rem 2.25rem; }
.g-feature { position: relative; padding-top: 3.25rem; }
.g-feature::before {
	content: "";
	position: absolute;
	top: 0; left: 0;
	width: 2.25rem; height: 2.25rem;
	background: var(--accent);
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
}
.g-feature h3 { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.g-feature p { margin-top: .5rem; color: var(--fg-2); }
@media (max-width: 899px) { .g-features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .g-features { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   12. Website mockup
   ========================================================================== */
.g-browser {
	position: relative;
	padding-bottom: .75rem;
	border-radius: var(--radius-container);
	background: #ffffff;
	box-shadow: inset 0 0 0 1px #131d1c1a, 0 40px 80px -40px #000000c0;
}
.g-browser__bar { display: flex; align-items: center; gap: .4rem; padding: .85rem 1rem; }
.g-browser__bar > span { width: .7rem; height: .7rem; border-radius: 50%; background: #c4d0d6; }
.g-browser__bar p {
	flex: 1;
	margin-left: .6rem;
	padding: .3rem .85rem;
	border-radius: var(--radius-full);
	background: #f1f4f7;
	color: #4e606f;
	font-size: .875rem;
}
.g-browser__page {
	display: grid;
	gap: 1rem;
	margin: 0 .75rem;
	padding: 1.1rem;
	border-radius: var(--radius-element);
	background: #f1f4f7;
}
.g-browser__nav { display: flex; align-items: center; gap: .5rem; }
.g-browser__nav b { width: 4.5rem; height: .8rem; margin-right: auto; border-radius: 4px; background: #0a1317; }
.g-browser__nav i { width: 2.25rem; height: .5rem; border-radius: 4px; background: #c4d0d6; }
.g-browser__hero b { display: block; width: 82%; height: 1.15rem; border-radius: 6px; background: #0a1317; }
.g-browser__hero b + b { width: 58%; margin-top: .45rem; }
.g-browser__hero i { display: block; width: 70%; height: .55rem; margin-top: .85rem; border-radius: 4px; background: #c4d0d6; }
.g-browser__hero em {
	display: inline-block;
	margin-top: .9rem;
	padding: .4rem .9rem;
	border-radius: 10px;
	background: #006c63;
	color: #fff;
	font-size: .875rem;
	font-style: normal;
	font-weight: 700;
}
.g-browser__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.g-browser__cards span { height: 3.75rem; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px #131d1c14; }
.g-request {
	position: absolute;
	right: -1rem; bottom: -2.25rem;
	display: grid;
	gap: .45rem;
	width: min(18rem, 82%);
}
.g-request .g-bubble { max-width: 100%; box-shadow: 0 16px 30px -16px #000000b0; }
.g-request .g-bubble--gorbit { display: flex; align-items: center; gap: .5rem; background: #e7f3f1; color: #0a1317; font-weight: 650; }
@media (max-width: 520px) { .g-request { right: .5rem; } }

/* ==========================================================================
   13. FAQ, CTA, lore, booking
   ========================================================================== */
.g-faqs { display: grid; gap: .75rem; }
.g-faq {
	border-radius: var(--radius-element);
	background: var(--color-background-card);
	box-shadow: inset 0 0 0 1px var(--line);
}
.g-faq summary {
	position: relative;
	padding: 1.15rem 3.75rem 1.15rem 1.4rem;
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.35;
	list-style: none;
	cursor: pointer;
}
.g-faq summary::-webkit-details-marker { display: none; }
.g-faq summary::after {
	content: "";
	position: absolute;
	top: 50%; right: 1.3rem;
	width: 1.4rem; height: 1.4rem;
	background: var(--accent);
	-webkit-mask: var(--i-plus) center / contain no-repeat;
	mask: var(--i-plus) center / contain no-repeat;
	transform: translateY(-50%);
	transition: transform .25s var(--g-ease);
}
.g-faq[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.g-faq > p { padding: 0 1.4rem 1.3rem; color: var(--fg-2); }
.g-split--faq { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
@media (max-width: 899px) { .g-split--faq { grid-template-columns: minmax(0, 1fr); } }

.g-cta { position: relative; overflow: hidden; text-align: center; isolation: isolate; }
.g-cta::after {
	content: "";
	position: absolute;
	inset: auto -20% -40% -20%;
	height: 80%;
	z-index: -1;
	background: radial-gradient(50% 60% at 50% 100%, #006c632e, transparent 70%);
}
.g-cta__inner { display: grid; justify-items: center; gap: 1.25rem; max-width: 50rem; }
.g-cta .g-lead { margin-inline: auto; }
.g-cta .g-actions { justify-content: center; margin-top: 1rem; }
.g-cta__ship { width: 9rem; margin-bottom: .5rem; filter: drop-shadow(1.5px 0 0 #0b2e3a) drop-shadow(-1.5px 0 0 #0b2e3a) drop-shadow(0 1.5px 0 #0b2e3a) drop-shadow(0 -1.5px 0 #0b2e3a); }
.g-cta__soft { color: var(--fg-2); font-size: 1rem; }
.g-cta__soft a { color: var(--accent); font-weight: 700; }

.g-lore__inner { display: grid; justify-items: start; gap: 1.25rem; }
.g-lore__inner > * { max-width: 46rem; }
.g-lore__mark { width: 5.5rem; height: 5.5rem; }

.g-upsell .g-split { align-items: center; }
.g-upsell__actions { justify-content: flex-end; }
@media (max-width: 899px) { .g-upsell__actions { justify-content: flex-start; } }

.g-focus {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	margin-top: 1.5rem;
	padding: .7rem 1.05rem;
	border-radius: 14px;
	background: #006c631a;
	box-shadow: inset 0 0 0 1px #006c6340;
	color: var(--fg);
	font-size: 1.0625rem;
	font-weight: 650;
}
.g-focus::before {
	content: "";
	flex: none;
	width: 1.4rem; height: 1.4rem;
	background: var(--g-coin);
	-webkit-mask: var(--i-star) center / contain no-repeat;
	mask: var(--i-star) center / contain no-repeat;
}
.g-split--form { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
@media (max-width: 899px) { .g-split--form { grid-template-columns: minmax(0, 1fr); } }
.g-call { font-size: 1.125rem; font-weight: 650; }
.g-call a { color: var(--fg); }
.g-domain > * + * { margin-top: .75rem; }

/* Forms (Forminator). Set each form's design style to "None" so these take over. */
.g-form input[type="text"],
.g-form input[type="email"],
.g-form input[type="tel"],
.g-form input[type="url"],
.g-form input[type="number"],
.g-form select,
.g-form textarea,
.g-wisdom input[type="email"],
.g-wisdom input[type="text"] {
	width: 100%;
	min-height: 3.25rem;
	padding: .8rem 1rem;
	border: 0;
	border-radius: 14px;
	background: var(--color-background-body);
	color: var(--color-text-primary);
	font: inherit;
	font-size: 1rem;
	box-shadow: inset 0 0 0 1px #131d1c33;
}
.g-wisdom input[type="email"],
.g-wisdom input[type="text"] { background: #f1f4f7; color: #0a1317; box-shadow: inset 0 0 0 1px #131d1c2e; }
.g-form textarea { min-height: 7.5rem; resize: vertical; }
.g-form input:focus-visible,
.g-form select:focus-visible,
.g-form textarea:focus-visible,
.g-wisdom input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.g-form label,
.g-wisdom label { display: block; margin-bottom: .4rem; font-size: .9375rem; font-weight: 650; }
.g-form .forminator-row + .forminator-row,
.g-wisdom .forminator-row + .forminator-row { margin-top: 1rem; }
.g-form button[type="submit"],
.g-form .forminator-button-submit,
.g-wisdom button[type="submit"],
.g-wisdom .forminator-button-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3.25rem;
	padding: .8rem 1.4rem;
	border: 0;
	border-radius: var(--radius-element);
	background: var(--color-accent);
	color: #fff;
	box-shadow: 0 4px 0 #00403a;
	font: inherit;
	font-size: 1.0625rem;
	font-weight: 700;
	cursor: pointer;
}
.g-wisdom button[type="submit"],
.g-wisdom .forminator-button-submit { background: #006c63; color: #ffffff; box-shadow: 0 4px 0 #00403a; }
.g-form .forminator-button-submit { width: 100%; }

/* ==========================================================================
   14. Footer
   ========================================================================== */
.g-footer { padding-block: clamp(3.5rem, 2.5rem + 4vw, 5.5rem) 2rem; border-top: 1px solid var(--line); }
.g-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr) minmax(0, 1.15fr);
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}
.g-footer__brand p { max-width: 20rem; margin-top: .85rem; color: var(--fg-2); font-size: 1rem; }
.g-footer__phone { color: var(--fg) !important; font-weight: 700; text-decoration: none; }
.g-footer__links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.g-footer__links div { display: grid; gap: .55rem; align-content: start; }
.g-footer__title { margin-bottom: .2rem; color: var(--fg); font-size: 1rem; font-weight: 600; }
.g-footer__links a { color: var(--fg-2); font-size: 1rem; text-decoration: none; line-height: 1.4; }
.g-footer__links a:hover { color: var(--fg); text-decoration: underline; }
.g-wisdom {
	padding: 1.5rem;
	border-radius: var(--radius-container);
	background: var(--color-background-card);
	box-shadow: inset 0 0 0 1px var(--line);
}
.g-wisdom__title { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.025em; }
.g-wisdom__text { margin: .5rem 0 1rem; color: var(--fg-2); font-size: 1rem; }
.g-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: .75rem 1.5rem;
	margin-top: clamp(2.5rem, 4vw, 3.5rem);
	padding-top: 1.5rem;
	border-top: 1px solid var(--line);
	color: var(--fg-2);
	font-size: .9375rem;
}
.g-footer__bottom a { color: var(--fg-2); }
@media (max-width: 959px) {
	.g-footer__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) {
	.g-footer__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Blog and plain pages. */
.g-content { max-width: 46rem; }
.g-content > * + * { margin-top: 1.5rem; }
.g-content .wp-block-post-content > * + * { margin-top: 1.1em; }
.g-content .wp-block-post-content h2 { font-size: 2rem; margin-top: 1.6em; }
.g-content .wp-block-post-content h3 { font-size: 1.5rem; margin-top: 1.4em; }
.g-content .wp-block-post-content ul,
.g-content .wp-block-post-content ol { padding-left: 1.25em; }
.g-posts .wp-block-post-template { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 2rem; }
.g-posts .wp-block-post-title { font-size: 1.75rem; letter-spacing: -0.025em; }
.g-posts .wp-block-post-title a { color: inherit; text-decoration: none; }
.g-posts .wp-block-post-excerpt { margin-top: .5rem; color: var(--fg-2); }

/* ==========================================================================
   15. Motion
   ========================================================================== */
@keyframes g-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes g-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes g-dots { 0%, 80%, 100% { opacity: .35; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@keyframes gx-pop { 0% { transform: scale(.4); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes gx-float { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.8); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -180%); } }
@keyframes gx-confetti { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)); } }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

/* 1.4.1: light by default; readable Mona Sans, without crowded headings. */
:root { color-scheme: light; }
.g-display, .g-display--page { font-weight: 500; line-height: 1.12; letter-spacing: -.015em; }
.g-h2 { font-weight: 500; line-height: 1.15; letter-spacing: -.015em; }
h1, h2, h3, h4, h5, h6 { font-weight: 550; line-height: 1.2; letter-spacing: -.01em; }
.g-display, .g-display--page { font-weight: 500; }
.g-h2 { font-weight: 500; }
.g-h3, .gx-panel h3, .g-roster__item > h3, .g-plan__name { font-weight: 550; letter-spacing: -.01em; line-height: 1.22; }
.gx-hud { color: #0a1317; background: #e7f3f1; border-bottom: 1px solid #c8dcd8; }
.gx { border-color: #c8dcd8; box-shadow: 0 14px 40px #16483d12; }
.gx-level { color: #345853; font-size: 1rem; font-weight: 500; }
.gx-reset { color: #006c63; }
.gx-choice:not(:disabled):hover { background: #e7f3f1; transform: translateY(-2px); }
.gx-result { margin-top: 1rem; }
.gx-done strong { display: block; margin-bottom: .35rem; }
.gx-pin.is-done::before, .gx-log .is-done .gx-log__icon, .gx-done::before {
 background: #006c63;
 -webkit-mask: var(--i-check) center / contain no-repeat;
 mask: var(--i-check) center / contain no-repeat;
}
.gx-demo-note { color: #4e606f; font-size: .875rem; margin-top: .8rem; }
.g-example { color: #4e606f; font-size: .875rem; margin-top: 1rem; }
.g-hero__ship, .g-cta__ship { filter: drop-shadow(0 10px 14px #006c6322); }
.gx-ship { filter: drop-shadow(0 12px 9px #006c6333); }
.gx-ship.is-landed { opacity: 1; }
.gx-world { scroll-margin-top: 5.5rem; }
.gx-world.has-scene .gx-ship {
 opacity: 1; left: var(--scene-x, 24%); top: var(--scene-y, 82%);
 width: clamp(76px, 20%, 112px); transform: translate(-50%, -50%);
 animation: gx-scene-hover 3.8s ease-in-out infinite;
}
.gx-world[data-scene="customers"] { --scene-x: 23%; --scene-y: 82%; }
.gx-world[data-scene="priorities"] { --scene-x: 76%; --scene-y: 84%; }
.gx-world[data-scene="website"] { --scene-x: 25%; --scene-y: 82%; }
.gx-world[data-scene="marketing"] { --scene-x: 79%; --scene-y: 83%; }
@keyframes gx-scene-hover {
 0%, 100% { transform: translate(-50%, -50%); }
 50% { transform: translate(-50%, calc(-50% - 6px)); }
}
@media (prefers-reduced-motion: reduce) {
 .gx-world.has-scene .gx-ship { animation: none; }
}
.gx-flight-help { margin: 0; padding: 1rem 1.5rem; background: #fff; color: #4e606f; font-size: .875rem; }
.gx { overflow: hidden; border-radius: var(--radius-container); }
.gx-hud { border-radius: var(--radius-element); margin-inline: 0; margin-bottom: .75rem; padding: .65rem 1rem; border-bottom: 0; }
.gx-world, .gx-panel { border-radius: var(--radius-element); }

/* 1.4.2: the full brand logo is a normal, replaceable WordPress Image block. */
.g-header .g-header__bar > * { margin-block: 0; }
.g-header__brand { flex: none; width: 176px; margin: 0; line-height: 0; }
.g-header__brand a { display: block; }
.g-header__brand img { display: block; width: 100%; height: auto; max-width: 100%; }
@media (max-width: 420px) { .g-header__brand { width: 144px; } }

/* 1.4.3: real founders, practical benefits and editable WordPress team blocks. */
.g-team { background: #f5f9f8; }
.g-team__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.g-person { display: flex; flex-direction: column; min-width: 0; padding: clamp(1.4rem, 2.5vw, 2rem); background: #fff; border: 1px solid #dfe8e6; border-radius: 24px; }
.g-person > * { margin: 0; }
.g-person__photo { width: 96px; height: 96px; margin-bottom: 1.5rem; }
.g-person__photo img { display: block; width: 96px; height: 96px; object-fit: cover; border-radius: 24px; }
.g-person__name { font-size: clamp(1.4rem, 2vw, 1.7rem); font-weight: 550; line-height: 1.2; letter-spacing: -.01em; }
.g-person__role { margin-top: .5rem; min-height: 3em; color: #4b6265; font-size: .9375rem; line-height: 1.5; }
.g-person__benefit { margin-top: 1.5rem; min-height: 3.75em; font-size: 1.25rem; font-weight: 550; line-height: 1.35; color: #18393e; }
.g-person__bio { margin-top: 1rem; font-size: 1rem; line-height: 1.65; color: #4b6265; }
.g-person__link { margin-top: auto; padding-top: 1.5rem; font-size: 1rem; font-weight: 550; }
.g-person__link a { color: #006c63; }
.g-team__together { margin-top: 2rem; padding: clamp(1.75rem, 3vw, 2.75rem); border-radius: 24px; background: #e6f1ee; }
.g-team__together > p { max-width: 56em; margin-top: .8rem; color: #4b6265; }
.g-team__together .g-actions { margin-top: 1.5rem; }
@media (max-width: 899px) { .g-team__grid { grid-template-columns: 1fr; } .g-person { padding: 1.75rem; } .g-person__role, .g-person__benefit { min-height: 0; } }