/*
Theme Name: Sublime Groceria
Theme URI: https://sublimegroceria.com/
Author: Bit & Byte Lab
Author URI: https://bitandbytelab.com/
Description: A theme built for one job: presenting the Sublime Groceria application. The colours, the phone frame and the type are the application's own, and the feature sections are drawn from the record the application repository synchronises, so the site cannot drift away from the product the way a hand-written page does.
Version: 1.22.0
Requires at least: 6.0
Tested up to: 7.1.4
Requires PHP: 7.4
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sublime-groceria
Tags: one-column, custom-menu, featured-images, translation-ready
*/

/* -------------------------------------------------------------------------
   Tokens. The light and dark values are the application's own, taken from
   the design references kept in the application repository.
   ---------------------------------------------------------------------- */

:root {
	--sg-bg: #eef2ec;
	--sg-surface: #ffffff;
	--sg-raised: #ffffff;
	--sg-line: #d8e0d6;
	--sg-ink: #17251c;
	--sg-mut: #5f6e64;
	--sg-brand: #39905b;
	--sg-brand-deep: #2e7a4c;
	--sg-brand-soft: #eaf5ee;
	--sg-accent: #f0b429;
	--sg-radius: 16px;
	--sg-radius-lg: 26px;
	--sg-shadow: 0 20px 44px -26px rgba(23, 37, 28, 0.42);
	--sg-max: 1200px;
	--sg-gutter: clamp(16px, 4vw, 40px);
	--sg-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {

	:root {
		--sg-bg: #0f1512;
		--sg-surface: #141b17;
		--sg-raised: #1a231d;
		--sg-line: #2a362e;
		--sg-ink: #e8efe9;
		--sg-mut: #93a398;
		--sg-brand: #54b776;
		--sg-brand-deep: #39905b;
		--sg-brand-soft: #16241b;
		--sg-shadow: 0 20px 44px -26px rgba(0, 0, 0, 0.8);
	}
}

/* -------------------------------------------------------------------------
   Reset enough to be predictable, not enough to fight the editor.
   ---------------------------------------------------------------------- */

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

body {
	margin: 0;
	background: var(--sg-bg);
	color: var(--sg-ink);
	font-family: var(--sg-sans);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--sg-brand-deep);
}

@media (prefers-color-scheme: dark) {

	a {
		color: var(--sg-brand);
	}
}

h1,
h2,
h3,
h4 {
	margin: 0 0 14px;
	line-height: 1.14;
	letter-spacing: -0.016em;
}

h1 {
	font-size: clamp(34px, 5.2vw, 60px);
}

h2 {
	font-size: clamp(27px, 3.6vw, 42px);
}

h3 {
	font-size: clamp(21px, 2.6vw, 29px);
}

p {
	margin: 0 0 16px;
}

.sg-shell {
	width: 100%;
	max-width: var(--sg-max);
	margin: 0 auto;
	padding-left: var(--sg-gutter);
	padding-right: var(--sg-gutter);
}

.sg-skip {
	position: absolute;
	left: -9999px;
}

.sg-skip:focus {
	left: 12px;
	top: 12px;
	z-index: 100;
	padding: 10px 16px;
	border-radius: 8px;
	background: var(--sg-brand);
	color: #fff;
}

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

.sg-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 14px 26px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.sg-btn--primary {
	background: var(--sg-brand);
	color: #fff;
	box-shadow: 0 14px 28px -16px var(--sg-brand);
}

.sg-btn--primary:hover,
.sg-btn--primary:focus-visible {
	transform: translateY(-2px);
	color: #fff;
}

.sg-btn--quiet {
	border-color: var(--sg-line);
	background: var(--sg-surface);
	color: var(--sg-ink);
}

.sg-btn--quiet:hover,
.sg-btn--quiet:focus-visible {
	border-color: var(--sg-brand);
	color: var(--sg-ink);
}

.sg-btn--lg {
	padding: 17px 34px;
	font-size: 18px;
}

@media (prefers-reduced-motion: reduce) {

	.sg-btn {
		transition: none;
	}

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

/* -------------------------------------------------------------------------
   Header
   ---------------------------------------------------------------------- */

.sg-head {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--sg-bg) 88%, transparent);
	backdrop-filter: saturate(150%) blur(10px);
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s ease;
}

.sg-head[data-stuck="true"] {
	border-bottom-color: var(--sg-line);
}

.sg-head__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 72px;
}

.sg-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 19px;
	font-weight: 800;
	color: var(--sg-ink);
	text-decoration: none;
	letter-spacing: -0.02em;
}

.sg-brand img {
	display: block;
	max-height: 38px;
	width: auto;
}

.sg-brand__mark {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 11px;
	background: var(--sg-brand);
	color: #fff;
	font-size: 17px;
}

.sg-nav {
	display: flex;
	align-items: center;
	gap: 8px;
}

.sg-nav ul {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sg-nav a {
	display: block;
	padding: 9px 14px;
	border-radius: 999px;
	color: var(--sg-ink);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

.sg-nav a:hover,
.sg-nav .current-menu-item > a {
	background: var(--sg-brand-soft);
	color: var(--sg-brand-deep);
}

@media (prefers-color-scheme: dark) {

	.sg-nav a:hover,
	.sg-nav .current-menu-item > a {
		color: var(--sg-brand);
	}
}

.sg-head .sg-btn {
	padding: 11px 20px;
	font-size: 15px;
}

.sg-burger {
	display: none;
	padding: 9px 13px;
	border: 1px solid var(--sg-line);
	border-radius: 10px;
	background: var(--sg-surface);
	color: var(--sg-ink);
	font: inherit;
	font-size: 15px;
	cursor: pointer;
}

@media (max-width: 860px) {

	.sg-burger {
		display: block;
	}

	.sg-nav {
		position: absolute;
		left: var(--sg-gutter);
		right: var(--sg-gutter);
		top: 100%;
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: 6px;
		padding: 14px;
		border: 1px solid var(--sg-line);
		border-radius: var(--sg-radius);
		background: var(--sg-surface);
		box-shadow: var(--sg-shadow);
	}

	.sg-nav[data-open="true"] {
		display: flex;
	}

	.sg-nav ul {
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
	}

	.sg-nav .sg-btn {
		justify-content: center;
	}
}

/* -------------------------------------------------------------------------
   The phone
   ---------------------------------------------------------------------- */

.sg-phone {
	position: relative;
	width: min(100%, 288px);
	margin: 0 auto;
	padding: 10px;
	border: 1px solid var(--sg-line);
	border-radius: 30px;
	background: var(--sg-raised);
	box-shadow: var(--sg-shadow);
}

.sg-phone img {
	display: block;
	width: 100%;
	border-radius: 21px;
}

.sg-phone--tilt {
	transform: rotate(-2deg);
}

/* -------------------------------------------------------------------------
   Hero
   ---------------------------------------------------------------------- */

.sg-hero {
	position: relative;
	overflow: hidden;
	padding: clamp(42px, 7vw, 92px) 0 clamp(34px, 5vw, 64px);
	background:
		radial-gradient(900px 420px at 78% 12%, color-mix(in srgb, var(--sg-brand) 15%, transparent), transparent 70%),
		var(--sg-bg);
}

.sg-hero__grid {
	display: grid;
	grid-template-columns: 1.06fr 0.94fr;
	gap: clamp(28px, 5vw, 60px);
	align-items: center;
}

.sg-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--sg-brand-soft);
	color: var(--sg-brand-deep);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

@media (prefers-color-scheme: dark) {

	.sg-eyebrow {
		color: var(--sg-brand);
	}
}

.sg-hero__lede {
	max-width: 46ch;
	margin-bottom: 26px;
	color: var(--sg-mut);
	font-size: clamp(17px, 1.7vw, 19px);
}

.sg-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 18px;
}

.sg-hero__note {
	margin: 0;
	color: var(--sg-mut);
	font-size: 14px;
}

.sg-hero__art {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	align-items: center;
}

.sg-hero__art .sg-phone:nth-child(2) {
	transform: translateY(26px) rotate(3deg);
}

@media (max-width: 920px) {

	.sg-hero__art {
		grid-template-columns: 1fr;
		max-width: 320px;
		margin: 0 auto;
	}

	.sg-hero__art .sg-phone:nth-child(2) {
		display: none;
	}
}

/* -------------------------------------------------------------------------
   Promises strip
   ---------------------------------------------------------------------- */

.sg-strip {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sg-strip li {
	padding: 15px 18px;
	border: 1px solid var(--sg-line);
	border-radius: var(--sg-radius);
	background: var(--sg-surface);
	font-size: 15px;
	font-weight: 600;
	text-align: center;
}

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

.sg-section {
	padding: clamp(44px, 7vw, 86px) 0;
}

.sg-section--tint {
	background: var(--sg-surface);
}

.sg-section__head {
	max-width: 46ch;
	margin: 0 auto clamp(28px, 4vw, 48px);
	text-align: center;
}

.sg-section__head p {
	margin: 0;
	color: var(--sg-mut);
}

/* Feature rows ----------------------------------------------------------- */

.sg-feature {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(26px, 5vw, 62px);
	align-items: center;
	padding: clamp(24px, 4vw, 46px) 0;
}

.sg-feature + .sg-feature {
	border-top: 1px solid var(--sg-line);
}

.sg-feature--flip .sg-feature__text {
	order: 2;
}

.sg-feature__text p {
	max-width: 44ch;
	margin: 0;
	color: var(--sg-mut);
}

.sg-feature__index {
	display: block;
	margin-bottom: 8px;
	color: var(--sg-brand);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.1em;
}

/* Feature cards for the ones without a frame ----------------------------- */

.sg-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
	gap: 18px;
	margin-top: clamp(26px, 4vw, 44px);
}

.sg-card {
	padding: 22px;
	border: 1px solid var(--sg-line);
	border-radius: var(--sg-radius);
	background: var(--sg-bg);
}

.sg-card h3 {
	font-size: 19px;
	margin-bottom: 6px;
}

.sg-card p {
	margin: 0;
	color: var(--sg-mut);
	font-size: 15px;
}

/* Honesty ---------------------------------------------------------------- */

.sg-plain {
	padding: clamp(24px, 4vw, 38px);
	border: 1px solid var(--sg-line);
	border-left: 4px solid var(--sg-accent);
	border-radius: var(--sg-radius);
	background: var(--sg-surface);
}

.sg-plain h2 {
	font-size: 23px;
}

.sg-plain ul {
	margin: 0 0 12px;
	padding-left: 20px;
}

.sg-plain li {
	margin-bottom: 6px;
}

.sg-plain__note {
	margin: 0;
	color: var(--sg-mut);
	font-size: 14px;
}

/* Questions -------------------------------------------------------------- */

.sg-faq {
	max-width: 820px;
	margin: 0 auto;
}

.sg-faq details {
	margin-bottom: 12px;
	border: 1px solid var(--sg-line);
	border-radius: var(--sg-radius);
	background: var(--sg-surface);
}

.sg-faq summary {
	padding: 17px 20px;
	font-size: 17px;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

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

.sg-faq summary::after {
	content: "+";
	float: right;
	color: var(--sg-brand);
	font-size: 22px;
	line-height: 1;
}

.sg-faq details[open] summary::after {
	content: "\2013";
}

.sg-faq__a {
	padding: 0 20px 18px;
	color: var(--sg-mut);
}

.sg-faq__a p:last-child {
	margin-bottom: 0;
}

/* Closing ---------------------------------------------------------------- */

.sg-cta {
	padding: clamp(42px, 7vw, 78px) 0;
	background: linear-gradient(135deg, var(--sg-brand-deep), var(--sg-brand));
	color: #fff;
	text-align: center;
}

.sg-cta h2 {
	color: #fff;
}

.sg-cta p {
	max-width: 46ch;
	margin: 0 auto 26px;
	color: rgba(255, 255, 255, 0.9);
}

.sg-cta .sg-btn--primary {
	background: #fff;
	color: var(--sg-brand-deep);
	box-shadow: none;
}

.sg-cta .sg-btn--primary:hover {
	color: var(--sg-brand-deep);
}

/* -------------------------------------------------------------------------
   Page and post bodies
   ---------------------------------------------------------------------- */

.sg-page {
	padding: clamp(34px, 6vw, 70px) 0;
}

.sg-page__title {
	margin-bottom: 26px;
}

.sg-prose {
	max-width: 74ch;
}

.sg-prose img {
	border-radius: var(--sg-radius);
}

.sg-prose h2,
.sg-prose h3 {
	margin-top: 34px;
}

.sg-prose ul,
.sg-prose ol {
	padding-left: 22px;
}

.sg-prose li {
	margin-bottom: 7px;
}

.sg-prose blockquote {
	margin: 24px 0;
	padding: 4px 0 4px 20px;
	border-left: 3px solid var(--sg-brand);
	color: var(--sg-mut);
}

/* Post list -------------------------------------------------------------- */

.sg-posts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: 22px;
}

.sg-post {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--sg-line);
	border-radius: var(--sg-radius);
	background: var(--sg-surface);
}

.sg-post__thumb img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.sg-post__body {
	padding: 20px;
}

.sg-post__body h2 {
	font-size: 20px;
	margin-bottom: 8px;
}

.sg-post__body h2 a {
	color: var(--sg-ink);
	text-decoration: none;
}

.sg-post__body h2 a:hover {
	color: var(--sg-brand-deep);
}

.sg-post__meta {
	margin: 0 0 10px;
	color: var(--sg-mut);
	font-size: 13px;
}

.sg-post__body p {
	margin: 0;
	color: var(--sg-mut);
	font-size: 15px;
}

.sg-pagination {
	margin-top: 32px;
	text-align: center;
}

.sg-pagination .page-numbers {
	display: inline-block;
	min-width: 40px;
	padding: 9px 12px;
	border: 1px solid var(--sg-line);
	border-radius: 10px;
	margin: 0 3px;
	color: var(--sg-ink);
	text-decoration: none;
}

.sg-pagination .current {
	background: var(--sg-brand);
	border-color: var(--sg-brand);
	color: #fff;
}

/* -------------------------------------------------------------------------
   Footer
   ---------------------------------------------------------------------- */

.sg-foot {
	padding: clamp(36px, 5vw, 58px) 0 26px;
	border-top: 1px solid var(--sg-line);
	background: var(--sg-surface);
}

.sg-foot__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 32px;
	margin-bottom: 30px;
}

.sg-foot__blurb {
	max-width: 42ch;
	color: var(--sg-mut);
	font-size: 15px;
}

.sg-foot h3 {
	margin-bottom: 12px;
	font-size: 15px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sg-mut);
}

.sg-foot ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sg-foot li {
	margin-bottom: 8px;
}

.sg-foot li a {
	color: var(--sg-ink);
	font-size: 15px;
	text-decoration: none;
}

.sg-foot li a:hover {
	color: var(--sg-brand-deep);
}

.sg-foot__base {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px;
	padding-top: 20px;
	border-top: 1px solid var(--sg-line);
	color: var(--sg-mut);
	font-size: 14px;
}

.sg-foot__base p {
	margin: 0;
}

/* -------------------------------------------------------------------------
   The review ribbon. Only ever shown to someone previewing the theme.
   ---------------------------------------------------------------------- */

.sg-ribbon {
	padding: 9px var(--sg-gutter);
	background: var(--sg-accent);
	color: #17251c;
	font-size: 13px;
	font-weight: 700;
	text-align: center;
}

.sg-ribbon a {
	color: #17251c;
}

/* -------------------------------------------------------------------------
   Narrow screens
   ---------------------------------------------------------------------- */

@media (max-width: 920px) {

	.sg-strip {
		grid-template-columns: repeat(2, 1fr);
	}

	.sg-foot__grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 760px) {

	.sg-hero__grid,
	.sg-feature {
		grid-template-columns: 1fr;
	}

	.sg-feature__text,
	.sg-feature--flip .sg-feature__text {
		order: 1;
	}

	.sg-feature__art {
		order: 2;
	}

	.sg-feature__text p,
	.sg-hero__lede {
		max-width: none;
	}

	.sg-foot__grid {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------
   Typography, now that there is a real face to set it in.
   ---------------------------------------------------------------------- */

h1,
h2,
h3 {
	font-weight: 800;
}

h1 {
	letter-spacing: -0.03em;
}

.sg-hero__lede,
.sg-section__head p {
	font-weight: 400;
}

/* -------------------------------------------------------------------------
   The Play badge
   ---------------------------------------------------------------------- */

.sg-play {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 11px 22px 11px 18px;
	border: 1px solid var(--sg-ink);
	border-radius: 12px;
	background: var(--sg-ink);
	color: var(--sg-bg);
	text-decoration: none;
	transition: transform 0.18s ease;
}

.sg-play:hover,
.sg-play:focus-visible {
	transform: translateY(-2px);
	color: var(--sg-bg);
}

.sg-play__mark {
	width: 24px;
	height: 26px;
	flex: none;
}

.sg-play__text {
	display: flex;
	flex-direction: column;
	line-height: 1.12;
	text-align: left;
}

.sg-play__small {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.82;
}

.sg-play__big {
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.sg-cta .sg-play {
	border-color: #fff;
	background: #fff;
	color: var(--sg-brand-deep);
}

.sg-cta .sg-play:hover {
	color: var(--sg-brand-deep);
}

@media (prefers-reduced-motion: reduce) {

	.sg-play {
		transition: none;
	}

	.sg-play:hover {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
   Hero polish: a soft field behind the phones rather than a flat panel.
   ---------------------------------------------------------------------- */

.sg-hero::before {
	content: "";
	position: absolute;
	right: -8%;
	top: -14%;
	width: 54%;
	height: 128%;
	border-radius: 50%;
	background: radial-gradient(closest-side, color-mix(in srgb, var(--sg-brand) 20%, transparent), transparent);
	pointer-events: none;
}

.sg-hero__grid,
.sg-hero .sg-shell {
	position: relative;
	z-index: 1;
}

/* -------------------------------------------------------------------------
   Three steps
   ---------------------------------------------------------------------- */

.sg-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	counter-reset: sg-step;
}

.sg-step {
	position: relative;
	padding: 28px 24px 24px;
	border: 1px solid var(--sg-line);
	border-radius: var(--sg-radius-lg);
	background: var(--sg-surface);
}

.sg-step::before {
	counter-increment: sg-step;
	content: counter( sg-step );
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	margin-bottom: 14px;
	border-radius: 12px;
	background: var(--sg-brand);
	color: #fff;
	font-size: 17px;
	font-weight: 800;
}

.sg-step h3 {
	font-size: 20px;
	margin-bottom: 7px;
}

.sg-step p {
	margin: 0;
	color: var(--sg-mut);
	font-size: 15px;
}

@media (max-width: 860px) {

	.sg-steps {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------
   Reveal on scroll. Nothing depends on it: without the script, and for anyone
   who asked for less motion, everything is simply visible.
   ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {

	.sg-reveal[data-seen="false"] {
		opacity: 0;
		transform: translateY(16px);
	}

	.sg-reveal {
		transition: opacity 0.5s ease, transform 0.5s ease;
	}
}

/* -------------------------------------------------------------------------
   The old theme's typography is still printed inline by its options
   framework, and inline rules come after this file. These selectors carry one
   more element than its "h1, h2, h3..." rule, so the theme's own face wins on
   specificity rather than on an !important.
   ---------------------------------------------------------------------- */

body,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body .sg-brand,
body .sg-btn,
body .sg-play,
body .sg-nav a,
body .sg-faq summary,
body input,
body button,
body textarea,
body select {
	font-family: var(--sg-sans);
}

/* =========================================================================
   The site's own identity.

   The colours below are the ones the site already had, sampled from it
   rather than chosen here: the amber bar, the green hero band, the light
   footer and the dark green that sits on white buttons. The layout is the
   new one; the clothes are the site's.
   ========================================================================= */

:root {
	--sg-amber: #fcb900;
	--sg-hero: #1b7c3f;
	--sg-deep: #125129;
}

/* The bar ---------------------------------------------------------------- */

.sg-head {
	background: var(--sg-amber);
	backdrop-filter: none;
}

.sg-head[data-stuck="true"] {
	border-bottom-color: rgba(0, 0, 0, 0.12);
	box-shadow: 0 10px 24px -20px rgba(0, 0, 0, 0.5);
}

.sg-head__inner {
	min-height: 86px;
}

/* On amber, ink reads and white does not: white on #fcb900 is about 1.9:1,
   ink about 11:1. The colour is the site's; the contrast is not negotiable. */

.sg-head .sg-brand,
.sg-head .sg-nav a {
	color: #17251c;
}

.sg-head .sg-nav a:hover,
.sg-head .sg-nav .current-menu-item > a {
	background: rgba(0, 0, 0, 0.1);
	color: #17251c;
}

.sg-brand img {
	max-height: 52px;
}

.sg-head .sg-btn--primary {
	background: #fff;
	color: var(--sg-deep);
	border-radius: 30px;
	box-shadow: none;
	font-weight: 700;
}

.sg-head .sg-btn--primary:hover,
.sg-head .sg-btn--primary:focus-visible {
	color: var(--sg-deep);
}

.sg-burger {
	border-color: rgba(0, 0, 0, 0.2);
	background: rgba(255, 255, 255, 0.85);
	color: #17251c;
}

@media (max-width: 860px) {

	.sg-head .sg-nav {
		background: var(--sg-amber);
		border-color: rgba(0, 0, 0, 0.18);
	}
}

/* The hero band ---------------------------------------------------------- */

.sg-hero {
	background: var(--sg-hero);
	color: #fff;
}

.sg-hero::before {
	background: radial-gradient(closest-side, rgba(255, 255, 255, 0.16), transparent);
}

.sg-hero h1,
.sg-hero .sg-hero__lede,
.sg-hero .sg-hero__note {
	color: #fff;
}

.sg-hero .sg-hero__lede {
	color: rgba(255, 255, 255, 0.92);
}

.sg-hero .sg-hero__note {
	color: rgba(255, 255, 255, 0.78);
}

.sg-hero .sg-eyebrow {
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
}

.sg-hero .sg-btn--quiet {
	border-color: rgba(255, 255, 255, 0.55);
	background: transparent;
	color: #fff;
}

.sg-hero .sg-btn--quiet:hover,
.sg-hero .sg-btn--quiet:focus-visible {
	border-color: #fff;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

.sg-hero .sg-play {
	border-color: #fff;
	background: #fff;
	color: var(--sg-deep);
}

.sg-hero .sg-play:hover,
.sg-hero .sg-play:focus-visible {
	color: var(--sg-deep);
}

.sg-hero .sg-phone {
	border-color: rgba(255, 255, 255, 0.3);
	background: rgba(255, 255, 255, 0.1);
}

/* The closing band uses the same green rather than a second gradient. */

.sg-cta {
	background: var(--sg-hero);
}

/* The footer ------------------------------------------------------------- */

.sg-foot {
	background: #fff;
	color: #333;
}

.sg-foot .sg-brand,
.sg-foot li a {
	color: #17251c;
}

.sg-foot__blurb,
.sg-foot__base {
	color: #5f6e64;
}

@media (prefers-color-scheme: dark) {

	.sg-foot {
		background: var(--sg-surface);
		color: var(--sg-ink);
	}

	.sg-foot .sg-brand,
	.sg-foot li a {
		color: var(--sg-ink);
	}

	.sg-foot__blurb,
	.sg-foot__base {
		color: var(--sg-mut);
	}
}

/* =========================================================================
   The product composition.

   Replaces the text-phone-gap rhythm: a layered hero stage, a benefit band,
   a four-across journey, one tabbed showcase in place of six tall sections,
   a scenario panel and a two-column close. Yellow does real work here.
   ========================================================================= */

/* The hero stage --------------------------------------------------------- */

.sg-stage {
	position: relative;
	min-height: 440px;
	display: block;
}

.sg-stage .sg-phone {
	position: absolute;
	margin: 0;
}

.sg-stage .sg-phone--lead {
	position: relative;
	width: min(100%, 268px);
	margin: 0 auto;
	z-index: 2;
}

.sg-stage .sg-phone--back {
	top: 26px;
	left: 0;
	width: 200px;
	opacity: 0.92;
	transform: rotate(-7deg);
	z-index: 1;
}

.sg-stage .sg-phone--front {
	right: 0;
	bottom: -10px;
	width: 188px;
	transform: rotate(6deg);
	z-index: 3;
}

@media (max-width: 980px) {

	.sg-stage {
		min-height: 0;
	}

	.sg-stage .sg-phone--back,
	.sg-stage .sg-phone--front {
		display: none;
	}
}

/* The benefit band ------------------------------------------------------- */

.sg-band {
	padding: 0;
	margin-top: calc(-1 * clamp(22px, 3vw, 40px));
	position: relative;
	z-index: 4;
}

.sg-strip li {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 18px 20px;
	text-align: left;
	box-shadow: var(--sg-shadow);
}

.sg-strip li strong {
	font-size: 16px;
	font-weight: 800;
}

.sg-strip li span {
	color: var(--sg-mut);
	font-size: 14px;
	font-weight: 400;
}

.sg-strip li::before {
	content: "";
	display: block;
	width: 26px;
	height: 3px;
	margin-bottom: 9px;
	border-radius: 2px;
	background: var(--sg-amber);
}

/* The journey ------------------------------------------------------------ */

.sg-journey {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: sg-j;
}

.sg-journey__step {
	position: relative;
	padding-top: 10px;
}

.sg-journey__step::before {
	counter-increment: sg-j;
	content: counter( sg-j );
	position: absolute;
	top: 0;
	left: 0;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	background: var(--sg-amber);
	color: #17251c;
	font-size: 14px;
	font-weight: 800;
	z-index: 2;
}

.sg-journey__art {
	margin-bottom: 16px;
	padding-left: 24px;
}

.sg-journey .sg-phone {
	width: 100%;
	padding: 7px;
	border-radius: 22px;
}

.sg-journey .sg-phone img {
	border-radius: 16px;
}

.sg-journey__step h3 {
	font-size: 19px;
	margin-bottom: 5px;
}

.sg-journey__step p {
	margin: 0;
	color: var(--sg-mut);
	font-size: 15px;
}

@media (max-width: 980px) {

	.sg-journey {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {

	.sg-journey {
		grid-template-columns: 1fr;
	}
}

/* The showcase ----------------------------------------------------------- */

.sg-showcase__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin-bottom: clamp(24px, 3vw, 36px);
}

.sg-tab {
	padding: 10px 20px;
	border: 1px solid var(--sg-line);
	border-radius: 999px;
	background: var(--sg-bg);
	color: var(--sg-ink);
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.16s ease, border-color 0.16s ease;
}

.sg-tab:hover {
	border-color: var(--sg-brand);
}

.sg-tab[aria-selected="true"] {
	background: var(--sg-hero);
	border-color: var(--sg-hero);
	color: #fff;
}

.sg-showcase__panel {
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: clamp(26px, 4vw, 56px);
	align-items: center;
}

.sg-showcase__panel[hidden] {
	display: none;
}

.sg-showcase__art .sg-phone {
	width: min(100%, 300px);
}

.sg-showcase__list {
	display: grid;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sg-showcase__list li {
	padding-left: 18px;
	border-left: 3px solid var(--sg-amber);
}

.sg-showcase__list h3 {
	font-size: 19px;
	margin-bottom: 4px;
}

.sg-showcase__list p {
	margin: 0;
	color: var(--sg-mut);
	font-size: 15px;
}

@media (max-width: 860px) {

	.sg-showcase__panel {
		grid-template-columns: 1fr;
	}

	.sg-showcase__art {
		order: 2;
	}
}

/* The scenario ----------------------------------------------------------- */

.sg-scenario__grid {
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: clamp(28px, 5vw, 60px);
	align-items: center;
	padding: clamp(28px, 4vw, 48px);
	border-radius: var(--sg-radius-lg);
	background: var(--sg-brand-soft);
}

.sg-eyebrow--amber {
	background: var(--sg-amber);
	color: #17251c;
}

.sg-scenario__steps {
	margin: 0;
	padding-left: 20px;
	counter-reset: none;
}

.sg-scenario__steps li {
	margin-bottom: 10px;
	color: var(--sg-ink);
}

.sg-scenario__steps li::marker {
	color: var(--sg-brand);
	font-weight: 800;
}

.sg-scenario__art .sg-phone {
	width: min(100%, 250px);
}

@media (max-width: 860px) {

	.sg-scenario__grid {
		grid-template-columns: 1fr;
	}
}

/* The close -------------------------------------------------------------- */

.sg-close__grid {
	display: grid;
	grid-template-columns: 1.3fr 0.7fr;
	gap: clamp(26px, 4vw, 52px);
	align-items: start;
}

.sg-close__grid .sg-faq {
	max-width: none;
	margin: 0;
}

.sg-close__grid .sg-faq h2 {
	margin-bottom: 20px;
	font-size: clamp(25px, 3vw, 34px);
}

@media (max-width: 860px) {

	.sg-close__grid {
		grid-template-columns: 1fr;
	}
}

/* The final call --------------------------------------------------------- */

.sg-cta__grid {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: clamp(26px, 4vw, 56px);
	align-items: center;
	text-align: left;
}

.sg-cta__text p {
	margin-left: 0;
}

.sg-cta__art .sg-phone {
	width: min(100%, 232px);
	margin-left: auto;
	border-color: rgba(255, 255, 255, 0.35);
	background: rgba(255, 255, 255, 0.12);
}

@media (max-width: 860px) {

	.sg-cta__grid {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.sg-cta__art {
		display: none;
	}
}

/* The browser try-out ---------------------------------------------------- */

.sg-try {
	padding: clamp(18px, 3vw, 28px);
	border: 1px solid var(--sg-line);
	border-radius: var(--sg-radius-lg);
	background: var(--sg-bg);
}

.sg-try .sgi-items,
.sg-try .sgi-destination-items {
	max-height: 420px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* =========================================================================
   Colour, settled.

   The brief's palette, with the amber bar kept because that is the thing a
   returning visitor recognises. Dark green is now reserved for the hero and
   the closing call only; every section between them sits on a neutral or a
   soft green, so the green keeps its value instead of being the background.
   ========================================================================= */

:root {
	--sg-hero: #39905b;
	--sg-hero-2: #54b776;
	--sg-deep: #125129;
	--sg-soft: #f4f8f4;
}

@media (prefers-color-scheme: dark) {

	:root {
		--sg-soft: #141b17;
	}
}

body {
	background: var(--sg-soft);
}

.sg-hero {
	background: linear-gradient(152deg, var(--sg-hero) 0%, #2f7f4e 58%, #276a42 100%);
}

.sg-cta {
	background: linear-gradient(152deg, var(--sg-hero) 0%, #2f7f4e 100%);
}

.sg-section {
	background: var(--sg-soft);
}

.sg-section--tint {
	background: var(--sg-surface);
}

.sg-scenario__grid {
	background: var(--sg-surface);
	border: 1px solid var(--sg-line);
}

.sg-tab[aria-selected="true"] {
	background: var(--sg-hero);
	border-color: var(--sg-hero);
}

/* -------------------------------------------------------------------------
   Trust. Four statements, every one of them checkable. No invented counts.
   ---------------------------------------------------------------------- */

.sg-trust {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--sg-line);
	border-radius: var(--sg-radius-lg);
	overflow: hidden;
	background: var(--sg-line);
}

.sg-trust li {
	padding: 22px 20px;
	background: var(--sg-surface);
	text-align: center;
}

.sg-trust strong {
	display: block;
	font-size: clamp(22px, 2.4vw, 28px);
	font-weight: 800;
	color: var(--sg-hero);
	line-height: 1.1;
}

@media (prefers-color-scheme: dark) {

	.sg-trust strong {
		color: var(--sg-hero-2);
	}
}

.sg-trust span {
	display: block;
	margin-top: 5px;
	color: var(--sg-mut);
	font-size: 14px;
}

@media (max-width: 760px) {

	.sg-trust {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* -------------------------------------------------------------------------
   The household story. Deliberately not the pinned treatment: a connected
   run of moments, each with its own screen, read in one pass.
   ---------------------------------------------------------------------- */

.sg-story {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	position: relative;
}

.sg-story::before {
	content: "";
	position: absolute;
	top: 26px;
	left: 8%;
	right: 8%;
	height: 2px;
	background: repeating-linear-gradient(90deg, var(--sg-amber) 0 10px, transparent 10px 18px);
	z-index: 0;
}

.sg-story__beat {
	position: relative;
	z-index: 1;
	text-align: center;
}

.sg-story__when {
	display: inline-block;
	margin-bottom: 16px;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--sg-amber);
	color: #17251c;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.sg-story__beat .sg-phone {
	width: min(100%, 190px);
	margin: 0 auto 14px;
	padding: 7px;
	border-radius: 22px;
}

.sg-story__beat .sg-phone img {
	border-radius: 16px;
}

.sg-story__beat h3 {
	font-size: 18px;
	margin-bottom: 5px;
}

.sg-story__beat p {
	margin: 0;
	color: var(--sg-mut);
	font-size: 15px;
}

@media (max-width: 860px) {

	.sg-story {
		grid-template-columns: repeat(2, 1fr);
	}

	.sg-story::before {
		display: none;
	}
}

@media (max-width: 520px) {

	.sg-story {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------
   Entrances. The initial state is only applied once the script is running,
   so with no JavaScript, and under reduced motion, everything is simply
   there. The hero text is never hidden: it is the thing being measured.
   ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {

	.js-motion .sg-enter.is-pending {
		opacity: 0;
		transform: translateY(18px);
	}

	.js-motion .sg-enter.is-in {
		opacity: 1;
		transform: none;
		transition: opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
	}

	/* The hero phones animate from CSS alone. Nothing about the largest
	   image on the page may wait on a script: if JavaScript never arrives,
	   or an observer never fires, these still play and still end visible. */

	.sg-stage .sg-phone--lead {
		animation: sg-rise 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.08s forwards;
	}

	.sg-stage .sg-phone--back {
		animation: sg-fan-left 0.75s cubic-bezier(0.22, 0.61, 0.36, 1) 0.22s forwards;
	}

	.sg-stage .sg-phone--front {
		animation: sg-fan-right 0.75s cubic-bezier(0.22, 0.61, 0.36, 1) 0.32s forwards;
	}
}

@keyframes sg-rise {
	from { opacity: 0; transform: translateY(26px) scale(0.965); }
	to   { opacity: 1; transform: none; }
}

@keyframes sg-fan-left {
	from { opacity: 0; transform: translate(26px, 16px) rotate(0deg); }
	to   { opacity: 0.92; transform: rotate(-7deg); }
}

@keyframes sg-fan-right {
	from { opacity: 0; transform: translate(-26px, 16px) rotate(0deg); }
	to   { opacity: 1; transform: rotate(6deg); }
}

/* The pinned sequence. Desktop only; the markup is a plain stack elsewhere. */

.sg-seq__scenes {
	display: grid;
	gap: clamp(28px, 5vw, 56px);
}

.sg-seq__scene {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(24px, 4vw, 52px);
	align-items: center;
}

.sg-seq__scene .sg-phone {
	width: min(100%, 272px);
}

.sg-seq__num {
	display: inline-grid;
	place-items: center;
	width: 32px;
	height: 32px;
	margin-bottom: 12px;
	border-radius: 10px;
	background: var(--sg-amber);
	color: #17251c;
	font-size: 15px;
	font-weight: 800;
}

@media (max-width: 760px) {

	.sg-seq__scene {
		grid-template-columns: 1fr;
	}
}

/* The sequence scenes alternate, and the flipped one puts its phone first. */

.sg-seq__scene--flip .sg-seq__text {
	order: 2;
}

.sg-seq__art {
	display: flex;
	justify-content: center;
}

.sg-seq__scene h3 {
	font-size: clamp(22px, 2.6vw, 30px);
	margin-bottom: 7px;
}

.sg-seq__scene p {
	margin: 0;
	max-width: 42ch;
	color: var(--sg-mut);
}

@media (max-width: 760px) {

	.sg-seq__scene--flip .sg-seq__text {
		order: 1;
	}
}

/* =========================================================================
   Motion you can actually see.

   The first pass was a 18px fade that finished before anyone noticed it. The
   four steps now arrive one after another with a visible travel and a small
   scale, and the cards answer the pointer. Still one pass, still skipped
   under reduced motion, still nothing hidden if the script never runs.
   ========================================================================= */

.sg-journey__step {
	padding: 14px 14px 18px;
	border: 1px solid transparent;
	border-radius: var(--sg-radius-lg);
	background: var(--sg-surface);
	transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.sg-journey__step:hover,
.sg-journey__step:focus-within {
	transform: translateY(-4px);
	border-color: var(--sg-line);
	box-shadow: var(--sg-shadow);
}

.sg-journey__step::before {
	top: 6px;
	left: 6px;
}

.sg-journey__art {
	padding-left: 0;
}

@media (prefers-reduced-motion: no-preference) {

	.js-motion .sg-journey__step.is-pending {
		opacity: 0;
		transform: translateY(44px) scale(0.96);
	}

	.js-motion .sg-journey__step.is-in {
		opacity: 1;
		transform: none;
		transition:
			opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
			transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
			border-color 0.25s ease,
			box-shadow 0.25s ease;
	}

	.js-motion .sg-journey__step:nth-child(2).is-in { transition-delay: 0.13s; }
	.js-motion .sg-journey__step:nth-child(3).is-in { transition-delay: 0.26s; }
	.js-motion .sg-journey__step:nth-child(4).is-in { transition-delay: 0.39s; }

	/* The amber numeral lands after its card, which is what makes the
	   sequence read as a sequence rather than four things appearing. */

	.js-motion .sg-journey__step.is-pending::before {
		opacity: 0;
		transform: scale(0.5);
	}

	.js-motion .sg-journey__step.is-in::before {
		opacity: 1;
		transform: none;
		transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
		transition-delay: 0.35s;
	}

	.js-motion .sg-journey__step:nth-child(2).is-in::before { transition-delay: 0.48s; }
	.js-motion .sg-journey__step:nth-child(3).is-in::before { transition-delay: 0.61s; }
	.js-motion .sg-journey__step:nth-child(4).is-in::before { transition-delay: 0.74s; }

	/* The showcase swap, made visible rather than instant. */

	.sg-showcase__panel:not([hidden]) .sg-showcase__art,
	.sg-showcase__panel:not([hidden]) .sg-showcase__list li {
		animation: sg-swap 0.42s cubic-bezier(0.22, 0.61, 0.36, 1) both;
	}

	.sg-showcase__panel:not([hidden]) .sg-showcase__list li:nth-child(2) { animation-delay: 0.06s; }
	.sg-showcase__panel:not([hidden]) .sg-showcase__list li:nth-child(3) { animation-delay: 0.12s; }
	.sg-showcase__panel:not([hidden]) .sg-showcase__list li:nth-child(4) { animation-delay: 0.18s; }
	.sg-showcase__panel:not([hidden]) .sg-showcase__list li:nth-child(5) { animation-delay: 0.24s; }

	/* The story beats, likewise one after another. */

	.js-motion .sg-story__beat:nth-child(2).is-in { transition-delay: 0.12s; }
	.js-motion .sg-story__beat:nth-child(3).is-in { transition-delay: 0.24s; }
	.js-motion .sg-story__beat:nth-child(4).is-in { transition-delay: 0.36s; }
}

@keyframes sg-swap {
	from { opacity: 0; transform: translateX(14px); }
	to   { opacity: 1; transform: none; }
}

/* =========================================================================
   More of it, and still on purpose.

   The hero introduces itself a line at a time, the four steps travel further
   and land harder, the story's dotted thread draws itself between the beats,
   and the one number on the page counts up to what it is. Nothing here hides
   content: every initial state belongs to an animation that runs on load, or
   to .is-pending, which only ever lands on something below the fold.
   ========================================================================= */

@media (prefers-reduced-motion: no-preference) {

	/* The hero, a line at a time. CSS only: no part of this waits on a
	   script, and the phones are handled separately above. */

	.sg-hero__text > * {
		animation: sg-lift 0.62s cubic-bezier(0.22, 0.61, 0.36, 1) both;
	}

	.sg-hero__text > .sg-eyebrow      { animation-delay: 0.04s; }
	.sg-hero__text > h1               { animation-delay: 0.12s; }
	.sg-hero__text > .sg-hero__lede   { animation-delay: 0.24s; }
	.sg-hero__text > .sg-hero__actions { animation-delay: 0.34s; }
	.sg-hero__text > .sg-hero__note   { animation-delay: 0.44s; }

	/* The four steps travel further and settle with a little weight. */

	.js-motion .sg-journey__step.is-pending {
		transform: translateY(64px) scale(0.93);
	}

	.js-motion .sg-journey__step.is-in {
		transition:
			opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
			transform 0.8s cubic-bezier(0.34, 1.3, 0.64, 1),
			border-color 0.25s ease,
			box-shadow 0.25s ease;
	}

	/* Section headings arrive from a little further down. */

	.js-motion .sg-section__head.is-pending {
		transform: translateY(32px);
	}

	/* The thread between the story beats draws itself. */

	.sg-story__beat .sg-phone {
		transition: transform 0.3s ease;
	}

	.sg-story__beat:hover .sg-phone {
		transform: translateY(-5px);
	}
}

@keyframes sg-lift {
	from { opacity: 0; transform: translateY(26px); }
	to   { opacity: 1; transform: none; }
}

/* The dotted thread. Drawn by scaling its own width from the left, which
   costs nothing and cannot shift the layout. */

.sg-story::before {
	transform-origin: left center;
}

.js-motion .sg-story.is-pending::before {
	transform: scaleX(0);
}

.js-motion .sg-story.is-in::before {
	transform: scaleX(1);
	transition: transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s;
}

/* The counted number should not reflow as it climbs. */

.sg-trust strong {
	font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------
   Pages the builder laid out.

   These arrive with their own full-width rows and their own heading. The
   theme gives them the page, not a column, and adds no padding of its own
   so their bands still reach both edges.
   ---------------------------------------------------------------------- */

.sg-page--builder {
	padding: 0;
}

.sg-page--builder .vc_row,
.sg-page--builder .wpb_row {
	margin-left: 0;
	margin-right: 0;
}

.sg-page--builder img {
	height: auto;
}

/* =========================================================================
   Inner pages.

   A page opening that belongs to the same site as the home page, a grouped
   feature list with the screen staying beside it, and the styling the form
   and the changelog never had of their own.
   ========================================================================= */

.sg-pagehero {
	padding: clamp(40px, 6vw, 78px) 0 clamp(30px, 4vw, 52px);
	background: linear-gradient(152deg, var(--sg-hero) 0%, #2f7f4e 100%);
	color: #fff;
	text-align: center;
}

.sg-pagehero h1 {
	color: #fff;
	margin-bottom: 14px;
}

.sg-pagehero .sg-eyebrow {
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
}

.sg-pagehero__lede {
	max-width: 54ch;
	margin: 0 auto 24px;
	color: rgba(255, 255, 255, 0.9);
	font-size: clamp(16px, 1.7vw, 19px);
}

/* Grouped feature lists -------------------------------------------------- */

.sg-group {
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: clamp(26px, 4vw, 56px);
	align-items: start;
}

.sg-section--tint .sg-group {
	grid-template-columns: 1fr 320px;
}

.sg-section--tint .sg-group__art {
	order: 2;
}

.sg-group__art .sg-phone {
	width: min(100%, 290px);
	position: sticky;
	top: 110px;
}

.sg-group__text h2 {
	display: inline-block;
	margin-bottom: 22px;
	padding-bottom: 10px;
	border-bottom: 3px solid var(--sg-amber);
}

.sg-group__list {
	display: grid;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sg-group__list li {
	padding-left: 18px;
	border-left: 3px solid var(--sg-line);
	transition: border-color 0.2s ease;
}

.sg-group__list li:hover {
	border-left-color: var(--sg-hero);
}

.sg-group__list h3 {
	font-size: 19px;
	margin-bottom: 4px;
}

.sg-group__list p {
	margin: 0;
	color: var(--sg-mut);
	font-size: 15px;
}

@media (max-width: 860px) {

	.sg-group,
	.sg-section--tint .sg-group {
		grid-template-columns: 1fr;
	}

	.sg-group__art,
	.sg-section--tint .sg-group__art {
		order: 1;
	}

	.sg-group__art .sg-phone {
		position: static;
	}
}

/* Forms the plugin does not style ---------------------------------------- */

.sg-page input[type="text"],
.sg-page input[type="email"],
.sg-page input[type="tel"],
.sg-page input[type="url"],
.sg-page textarea,
.sg-page select {
	width: 100%;
	padding: 13px 15px;
	border: 1px solid var(--sg-line);
	border-radius: 12px;
	background: var(--sg-surface);
	color: var(--sg-ink);
	font: inherit;
	font-size: 16px;
}

.sg-page input:focus-visible,
.sg-page textarea:focus-visible,
.sg-page select:focus-visible {
	outline: 2px solid var(--sg-hero);
	outline-offset: 2px;
	border-color: var(--sg-hero);
}

.sg-page .frm_submit button,
.sg-page input[type="submit"],
.sg-page button[type="submit"] {
	padding: 14px 30px;
	border: 0;
	border-radius: 999px;
	background: var(--sg-hero);
	color: #fff;
	font: inherit;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
}

.sg-page .frm_primary_label,
.sg-page form label {
	display: block;
	margin-bottom: 6px;
	font-size: 15px;
	font-weight: 600;
}

/* The changelog the plugin prints ---------------------------------------- */

.sg-page .cbxchangelog-wrapper {
	max-width: 820px;
	margin: 0 auto;
}

.sg-page .cbxchangelog-release {
	margin-bottom: 18px;
	padding: 20px 22px;
	border: 1px solid var(--sg-line);
	border-radius: var(--sg-radius);
	background: var(--sg-surface);
}

/* The logo, whichever route supplied it. */

.sg-brand img,
.sg-brand__logo {
	display: block;
	width: auto;
	max-height: 52px;
	height: auto;
}

.sg-head__inner {
	min-height: 86px;
}

/* =========================================================================
   The features menu.

   Two levels, opened on hover and on focus, closed on escape. The motion is
   deliberately small and quick - six pixels and under a fifth of a second -
   because a menu that makes you wait is a menu that gets clicked twice.
   Visibility is switched with a delay on the way out so the panel does not
   vanish part way through its own fade.
   ========================================================================= */

.sg-dd {
	position: relative;
}

.sg-dd__trigger {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 14px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: #17251c;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

.sg-dd__trigger:hover,
.sg-dd__trigger[aria-expanded="true"] {
	background: rgba(0, 0, 0, 0.1);
}

.sg-dd__chev {
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.2s ease;
}

.sg-dd__trigger[aria-expanded="true"] .sg-dd__chev {
	transform: translateY(1px) rotate(-135deg);
}

.sg-dd__panel {
	position: absolute;
	top: calc(100% + 10px);
	left: 50%;
	z-index: 60;
	width: min(92vw, 720px);
	padding: 20px;
	border: 1px solid var(--sg-line);
	border-radius: var(--sg-radius-lg);
	background: var(--sg-surface);
	box-shadow: 0 26px 60px -34px rgba(23, 37, 28, 0.55);

	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, -6px);
	transition: opacity 0.18s, transform 0.2s, visibility 0s linear 0.2s;
}

.sg-dd:hover .sg-dd__panel,
.sg-dd:focus-within .sg-dd__panel,
.sg-dd[data-open="true"] .sg-dd__panel {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
	transition: opacity 0.18s, transform 0.2s, visibility 0s;
}

.sg-dd__rows {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px 24px;
}

.sg-dd__rowtitle {
	display: block;
	margin-bottom: 8px;
	padding-bottom: 6px;
	border-bottom: 2px solid var(--sg-amber);
	color: var(--sg-mut);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.sg-dd__items {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sg-dd__items li {
	margin-bottom: 2px;
}

.sg-dd__items a {
	display: block;
	padding: 6px 8px;
	border-radius: 9px;
	color: var(--sg-ink);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;

	opacity: 0;
	transform: translateX(-6px);
	transition: opacity 0.16s, transform 0.18s, background 0.16s ease;
}

.sg-dd:hover .sg-dd__items a,
.sg-dd:focus-within .sg-dd__items a,
.sg-dd[data-open="true"] .sg-dd__items a {
	opacity: 1;
	transform: none;
}

.sg-dd__items li:nth-child(2) a { transition-delay: 0.03s; }
.sg-dd__items li:nth-child(3) a { transition-delay: 0.06s; }
.sg-dd__items li:nth-child(4) a { transition-delay: 0.09s; }
.sg-dd__items li:nth-child(5) a { transition-delay: 0.12s; }

.sg-dd__items a:hover,
.sg-dd__items a:focus-visible {
	background: var(--sg-brand-soft);
	color: var(--sg-brand-deep);
}

.sg-dd__more {
	display: block;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--sg-line);
	color: var(--sg-brand-deep);
	font-size: 14px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
}

.sg-dd__more:hover {
	text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {

	.sg-dd__panel,
	.sg-dd__items a,
	.sg-dd__chev {
		transition: none;
	}
}

/* On a phone the panel is part of the stacked menu, not a hovering layer. */

@media (max-width: 860px) {

	.sg-dd__panel {
		position: static;
		width: auto;
		margin-top: 8px;
		padding: 14px;
		transform: none;
		box-shadow: none;
	}

	.sg-dd:hover .sg-dd__panel,
	.sg-dd:focus-within .sg-dd__panel,
	.sg-dd[data-open="true"] .sg-dd__panel {
		transform: none;
	}

	.sg-dd__rows {
		grid-template-columns: 1fr 1fr;
	}

	.sg-dd__trigger {
		width: 100%;
		justify-content: space-between;
	}
}

/* The footer wordmark. The logo is white artwork and the footer is white,
   so the footer uses the name rather than an invisible picture. */

.sg-brand--text .sg-brand__mark {
	background: var(--sg-hero);
}

/* =========================================================================
   Hover.

   Everything you can point at answers. All of it is CSS, so none of it waits
   on a script, and all of it is inside the reduced-motion guard so a reader
   who asked for stillness gets stillness. Transform and opacity only: nothing
   here can move the layout or shift the page.
   ========================================================================= */

@media (prefers-reduced-motion: no-preference) {

	/* Any phone, anywhere: lifts and gains its shadow. */

	.sg-phone {
		transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.35s ease;
	}

	.sg-journey__step:hover .sg-phone,
	.sg-story__beat:hover .sg-phone,
	.sg-group:hover .sg-group__art .sg-phone {
		transform: translateY(-8px) scale(1.02);
		box-shadow: 0 30px 50px -28px rgba(23, 37, 28, 0.6);
	}

	/* The four steps: the card lifts, its numeral leans in. */

	.sg-journey__step::before {
		transition: transform 0.3s cubic-bezier(0.34, 1.4, 0.64, 1), background 0.25s ease;
	}

	.sg-journey__step:hover::before {
		transform: scale(1.12) rotate(-6deg);
	}

	/* Benefit cards. */

	.sg-strip li {
		transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
	}

	.sg-strip li:hover {
		transform: translateY(-5px);
		border-color: var(--sg-amber);
		box-shadow: 0 22px 40px -28px rgba(23, 37, 28, 0.55);
	}

	.sg-strip li::before {
		transition: width 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
	}

	.sg-strip li:hover::before {
		width: 48px;
	}

	/* Trust. The number leans up, the rule under it grows. */

	.sg-trust li {
		position: relative;
		transition: background 0.25s ease;
	}

	.sg-trust li::after {
		content: "";
		position: absolute;
		left: 50%;
		bottom: 14px;
		width: 0;
		height: 2px;
		background: var(--sg-amber);
		transform: translateX(-50%);
		transition: width 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
	}

	.sg-trust li:hover::after {
		width: 42px;
	}

	.sg-trust strong {
		display: block;
		transition: transform 0.3s cubic-bezier(0.34, 1.4, 0.64, 1);
	}

	.sg-trust li:hover strong {
		transform: translateY(-3px);
	}

	/* Showcase: the tab rises, the entries slide and take an amber edge. */

	.sg-tab {
		transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
	}

	.sg-tab:hover {
		transform: translateY(-2px);
	}

	.sg-showcase__list li {
		transition: transform 0.26s cubic-bezier(0.22, 0.61, 0.36, 1), border-left-color 0.26s ease;
	}

	.sg-showcase__list li:hover {
		transform: translateX(6px);
		border-left-color: var(--sg-hero);
	}

	/* The grouped lists on the features page. */

	.sg-group__list li {
		transition: transform 0.26s cubic-bezier(0.22, 0.61, 0.36, 1), border-left-color 0.26s ease;
	}

	.sg-group__list li:hover {
		transform: translateX(6px);
	}

	/* Writing: the picture leans in, the title takes the brand colour. */

	.sg-post {
		transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
	}

	.sg-post:hover {
		transform: translateY(-6px);
		border-color: var(--sg-line);
		box-shadow: 0 28px 48px -30px rgba(23, 37, 28, 0.55);
	}

	.sg-post__thumb {
		overflow: hidden;
	}

	.sg-post__thumb img {
		transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
	}

	.sg-post:hover .sg-post__thumb img {
		transform: scale(1.05);
	}

	/* Questions: the marker turns before the answer arrives. */

	.sg-faq summary::after {
		display: inline-block;
		transition: transform 0.28s cubic-bezier(0.34, 1.4, 0.64, 1);
	}

	.sg-faq summary:hover::after {
		transform: scale(1.25);
	}

	.sg-faq details {
		transition: border-color 0.25s ease, box-shadow 0.25s ease;
	}

	.sg-faq details:hover {
		border-color: var(--sg-hero);
	}
}

/* Links that draw their own underline. Kept outside the motion guard for the
   colour change, which is information rather than decoration. */

.sg-foot li a,
.sg-dd__more {
	position: relative;
}

.sg-foot li a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 0;
	height: 2px;
	background: var(--sg-hero);
}

@media (prefers-reduced-motion: no-preference) {

	.sg-foot li a::after {
		transition: width 0.26s cubic-bezier(0.22, 0.61, 0.36, 1);
	}
}

.sg-foot li a:hover::after,
.sg-foot li a:focus-visible::after {
	width: 100%;
}

.sg-foot li a:hover {
	color: var(--sg-hero);
}

/* =========================================================================
   The features menu, second shape.

   A column of rows on the left - picture, title, one line - and a flyout on
   the right that changes as the pointer moves down the rows. Same timings as
   before: six pixels, under a fifth of a second, visibility delayed on the
   way out. These rules come after the first menu's and override it.
   ========================================================================= */

.sg-dd__panel {
	width: min(94vw, 860px);
	padding: 16px;
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 0 16px;
}

.sg-dd__rows {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2px;
	align-content: start;
}

.sg-dd__row {
	position: static;
}

.sg-dd__rowlink {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 10px;
	border-radius: 12px;
	color: var(--sg-ink);
	text-decoration: none;
	transition: background 0.16s ease, transform 0.18s ease;
}

.sg-dd__row[data-active="true"] .sg-dd__rowlink,
.sg-dd__row:hover .sg-dd__rowlink,
.sg-dd__row:focus-within .sg-dd__rowlink {
	background: var(--sg-brand-soft);
}

.sg-dd__row:hover .sg-dd__rowlink {
	transform: translateX(3px);
}

.sg-dd__thumb {
	flex: none;
	width: 44px;
	height: 44px;
	overflow: hidden;
	border-radius: 11px;
	background: var(--sg-bg);
	border: 1px solid var(--sg-line);
}

.sg-dd__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sg-dd__rowtext {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.sg-dd__rowtitle {
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--sg-ink);
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0;
	text-transform: none;
}

.sg-dd__lead {
	color: var(--sg-mut);
	font-size: 12.5px;
	line-height: 1.35;
}

/* The flyout sits in the right column; whichever row is active shows its own. */

.sg-dd__fly {
	position: absolute;
	top: 16px;
	bottom: 62px;
	left: 332px;
	right: 16px;
	overflow: auto;
	padding: 6px 4px 6px 14px;
	border-left: 1px solid var(--sg-line);

	opacity: 0;
	visibility: hidden;
	transform: translateX(-6px);
	transition: opacity 0.16s, transform 0.18s, visibility 0s linear 0.18s;
}

.sg-dd__row[data-active="true"] .sg-dd__fly,
.sg-dd__row:hover .sg-dd__fly,
.sg-dd__row:focus-within .sg-dd__fly {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 0.16s, transform 0.18s, visibility 0s;
	z-index: 1;
}

.sg-dd__flytitle {
	display: block;
	margin: 4px 0 8px 8px;
	color: var(--sg-mut);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.sg-dd__items a {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 8px 10px;
	border-radius: 10px;
	opacity: 1;
	transform: none;
}

.sg-dd__name {
	font-size: 14px;
	font-weight: 700;
	color: var(--sg-ink);
}

.sg-dd__desc {
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.35;
	color: var(--sg-mut);
}

.sg-dd__items a:hover .sg-dd__name,
.sg-dd__items a:focus-visible .sg-dd__name {
	color: var(--sg-brand-deep);
}

.sg-dd__more {
	grid-column: 1 / -1;
	margin-top: 12px;
	padding-top: 12px;
}

/* On a phone: no flyout, rows stack and each row's items sit under it. */

@media (max-width: 860px) {

	.sg-dd__panel {
		grid-template-columns: 1fr;
		width: auto;
	}

	.sg-dd__fly {
		position: static;
		padding: 2px 0 8px 56px;
		border: 0;
		opacity: 1;
		visibility: visible;
		transform: none;
		display: none;
	}

	.sg-dd__row[data-active="true"] .sg-dd__fly {
		display: block;
	}

	.sg-dd__flytitle {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {

	.sg-dd__rowlink,
	.sg-dd__fly {
		transition: none;
	}

	.sg-dd__row:hover .sg-dd__rowlink {
		transform: none;
	}
}

/* The menu lives inside .sg-nav, whose own link rule (.sg-nav a, display
   block, pill padding) outranks the menu's class selectors. These carry the
   same ancestors so they win on specificity rather than on !important. */

.sg-nav .sg-dd__rowlink {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 10px;
	border-radius: 12px;
	font-size: 14px;
	font-weight: 600;
}

.sg-head .sg-nav .sg-dd__rowlink:hover,
.sg-head .sg-nav .sg-dd__row[data-active="true"] .sg-dd__rowlink,
.sg-head .sg-nav .sg-dd__row:focus-within .sg-dd__rowlink {
	background: var(--sg-brand-soft);
	color: var(--sg-ink);
}

.sg-nav .sg-dd__thumb {
	display: block;
	width: 44px;
	height: 44px;
}

.sg-nav .sg-dd__items a {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 8px 10px;
	border-radius: 10px;
	font-weight: 400;
}

.sg-head .sg-nav .sg-dd__items a:hover,
.sg-head .sg-nav .sg-dd__items a:focus-visible {
	background: var(--sg-brand-soft);
	color: var(--sg-ink);
}

.sg-nav .sg-dd__more {
	display: block;
	padding: 12px 0 0;
	border-radius: 0;
	text-align: center;
}

.sg-head .sg-nav .sg-dd__more:hover {
	background: transparent;
	color: var(--sg-brand-deep);
	text-decoration: underline;
}

.sg-nav .sg-dd__trigger {
	font-size: 15px;
}

/* =========================================================================
   The bar compacts as the page moves.

   At the top the bar sits inside the page measure like everything else. Once
   the reader has scrolled, it lets go of that measure: the logo slides to the
   left edge, the button to the right, the bar loses a third of its height and
   the logo a third of its size. Scrolling back to the top undoes it. The
   threshold and the hysteresis live in the script so the bar does not flicker
   around the line.
   ========================================================================= */

.sg-head__inner {
	transition:
		max-width 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
		padding 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
		min-height 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.sg-brand img,
.sg-brand__logo {
	transition: max-height 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.sg-head .sg-nav a,
.sg-head .sg-dd__trigger,
.sg-head .sg-btn--primary {
	transition: padding 0.3s ease, font-size 0.3s ease, background 0.16s ease, color 0.16s ease, transform 0.18s ease;
}

.sg-head[data-stuck="true"] .sg-head__inner {
	max-width: none;
	padding-left: clamp(16px, 2.2vw, 32px);
	padding-right: clamp(16px, 2.2vw, 32px);
	min-height: 60px;
}

.sg-head[data-stuck="true"] .sg-brand img,
.sg-head[data-stuck="true"] .sg-brand__logo {
	max-height: 36px;
}

.sg-head[data-stuck="true"] .sg-nav a,
.sg-head[data-stuck="true"] .sg-dd__trigger {
	padding: 7px 12px;
	font-size: 14px;
}

.sg-head[data-stuck="true"] .sg-btn--primary {
	padding: 9px 17px;
	font-size: 14px;
}

/* The nav sits in the middle at the top, and stays there as the ends spread. */

@media (min-width: 861px) {

	.sg-head__inner {
		display: grid;
		grid-template-columns: auto 1fr auto;
		align-items: center;
	}

	.sg-head .sg-nav {
		justify-content: center;
	}

	.sg-head .sg-nav .sg-btn--primary {
		margin-left: 10px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.sg-head__inner,
	.sg-brand img,
	.sg-brand__logo,
	.sg-head .sg-nav a,
	.sg-head .sg-dd__trigger,
	.sg-head .sg-btn--primary {
		transition: none;
	}
}

/* The button is its own column, so it can reach the right edge. Inside the
   nav it was centred with the links and never moved. */

.sg-head__cta {
	display: flex;
	align-items: center;
	justify-self: end;
}

@media (max-width: 860px) {

	.sg-head__cta {
		order: 2;
		margin-left: auto;
		margin-right: 10px;
	}

	.sg-head__cta .sg-btn--primary {
		padding: 9px 14px;
		font-size: 14px;
	}

	.sg-burger {
		order: 3;
	}
}

/* =========================================================================
   The menu's shape, taken from the reference rather than invented.

   Nothing in the bar is a pill any more. Links and the trigger are 36px tall
   with an 8px corner; the panel has an 18px corner, 8px of padding and the
   reference's own three-part shadow; rows carry a 40px picture and a 15px
   medium title; items are 14.5px medium on an 8px corner. Hover tints are
   the reference's neutral ones, which read on amber and on white alike.
   ========================================================================= */

.sg-head .sg-nav a,
.sg-nav .sg-dd__trigger {
	height: 36px;
	padding: 0 12px;
	border-radius: 8px;
	font-size: 14.5px;
	font-weight: 500;
	line-height: 36px;
	display: inline-flex;
	align-items: center;
}

.sg-head .sg-nav a:hover,
.sg-nav .sg-dd__trigger:hover,
.sg-head .sg-nav .current-menu-item > a {
	background: rgba(19, 20, 23, 0.075);
}

.sg-nav .sg-dd__trigger[aria-expanded="true"],
.sg-dd:hover .sg-dd__trigger {
	background: rgba(19, 20, 23, 0.1);
}

.sg-head .sg-btn--primary,
.sg-head__cta .sg-btn--primary {
	border-radius: 10px;
}

.sg-head[data-stuck="true"] .sg-nav a,
.sg-head[data-stuck="true"] .sg-dd__trigger {
	height: 32px;
	padding: 0 10px;
	font-size: 14px;
	line-height: 32px;
}

/* The panel ---------------------------------------------------------------- */

.sg-dd__panel {
	padding: 8px;
	border: 0;
	border-radius: 18px;
	background: #fff;
	box-shadow:
		0 0 0 1px rgba(19, 20, 23, 0.07),
		0 14px 34px -14px rgba(18, 20, 23, 0.18),
		0 1px 3px rgba(18, 20, 23, 0.04);
	gap: 0 8px;
}

@media (prefers-color-scheme: dark) {

	.sg-dd__panel {
		background: var(--sg-raised);
		box-shadow:
			0 0 0 1px rgba(255, 255, 255, 0.08),
			0 14px 34px -14px rgba(0, 0, 0, 0.6);
	}
}

/* Rows --------------------------------------------------------------------- */

.sg-nav .sg-dd__rowlink {
	gap: 12px;
	padding: 8px 10px;
	border-radius: 10px;
}

.sg-head .sg-nav .sg-dd__rowlink:hover,
.sg-head .sg-nav .sg-dd__row[data-active="true"] .sg-dd__rowlink,
.sg-head .sg-nav .sg-dd__row:focus-within .sg-dd__rowlink {
	background: rgba(19, 20, 23, 0.055);
}

.sg-nav .sg-dd__thumb {
	width: 40px;
	height: 40px;
	border-radius: 9px;
	border: 0;
	background: var(--sg-brand-soft);
}

.sg-dd__thumb img {
	object-fit: contain;
}

.sg-dd__rowtitle {
	font-size: 15px;
	line-height: 22px;
	font-weight: 500;
	white-space: nowrap;
}

.sg-dd__lead {
	font-size: 12.5px;
	line-height: 17px;
}

/* The flyout and its items ---------------------------------------------- */

.sg-dd__fly {
	top: 8px;
	bottom: 52px;
	left: 324px;
	right: 8px;
	padding: 6px 4px 6px 10px;
	border-left: 1px solid rgba(19, 20, 23, 0.08);
}

.sg-nav .sg-dd__items a {
	padding: 8px 12px;
	border-radius: 8px;
}

.sg-head .sg-nav .sg-dd__items a:hover,
.sg-head .sg-nav .sg-dd__items a:focus-visible {
	background: rgba(19, 20, 23, 0.05);
}

.sg-dd__name {
	font-size: 14.5px;
	line-height: 20px;
	font-weight: 500;
}

.sg-dd__desc {
	font-size: 12.5px;
	line-height: 17px;
}

.sg-dd__flytitle {
	margin: 2px 0 6px 12px;
}

/* The foot, as the reference's: a hairline and a quiet link. */

.sg-nav .sg-dd__more {
	margin: 8px 10px 0;
	padding: 10px 0 4px;
	border-top: 1px solid rgba(19, 20, 23, 0.08);
	font-size: 14px;
	font-weight: 500;
	text-align: left;
}

.sg-nav .sg-dd__more::after {
	content: " \2192";
}

@media (max-width: 860px) {

	.sg-head .sg-nav a,
	.sg-nav .sg-dd__trigger {
		height: auto;
		padding: 10px 12px;
		line-height: 1.3;
	}

	.sg-dd__panel {
		border-radius: 12px;
		box-shadow: none;
		background: transparent;
	}
}

/* The bar's link rule and its list rule both reach into the menu: rows and
   items were squashed to 36px, and the flyout's list ran sideways because
   .sg-nav ul is a flex row. Scoped back out. */

.sg-nav .sg-dd__rowlink,
.sg-nav .sg-dd__items a,
.sg-nav .sg-dd__more {
	height: auto;
	line-height: 1.35;
}

.sg-nav .sg-dd__rowlink {
	padding: 8px 10px;
}

.sg-nav .sg-dd__items a {
	padding: 8px 12px;
}

.sg-nav .sg-dd__more {
	padding: 10px 0 4px;
}

.sg-nav .sg-dd__items {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2px;
	align-items: stretch;
}

.sg-nav .sg-dd__items li {
	margin: 0;
}

.sg-head[data-stuck="true"] .sg-nav .sg-dd__rowlink,
.sg-head[data-stuck="true"] .sg-nav .sg-dd__items a {
	height: auto;
	font-size: 14.5px;
}

/* Same ancestors as the bar's link rule, so these win on specificity. */

.sg-head .sg-nav .sg-dd__rowlink {
	display: flex;
	height: auto;
	padding: 8px 10px;
	line-height: 1.35;
}

.sg-head .sg-nav .sg-dd__items a {
	display: flex;
	height: auto;
	padding: 8px 12px;
	line-height: 1.35;
}

.sg-head .sg-nav .sg-dd__more {
	display: block;
	height: auto;
	margin: 8px 10px 0;
	padding: 10px 0 4px;
	line-height: 1.35;
	border-radius: 0;
}

.sg-head[data-stuck="true"] .sg-nav .sg-dd__rowlink,
.sg-head[data-stuck="true"] .sg-nav .sg-dd__items a,
.sg-head[data-stuck="true"] .sg-nav .sg-dd__more {
	height: auto;
	line-height: 1.35;
}

/* =========================================================================
   The menu's width, as the reference has it.

   The reference is not one wide panel. It is a narrow column of rows, sized
   to its content, and a separate 288px card that floats beside whichever row
   is active. Ours is now the same: the panel holds only the rows and the
   foot, and the flyout is its own card, 288px wide, aligned to its row.
   ========================================================================= */

.sg-dd__panel {
	display: block;
	width: auto;
	min-width: 0;
	left: 0;
	transform: translate(0, -6px);
}

.sg-dd:hover .sg-dd__panel,
.sg-dd:focus-within .sg-dd__panel,
.sg-dd[data-open="true"] .sg-dd__panel {
	transform: translate(0, 0);
}

.sg-dd__rows {
	width: 280px;
}

.sg-dd__row {
	position: relative;
}

.sg-dd__fly {
	position: absolute;
	top: 0;
	left: 100%;
	right: auto;
	bottom: auto;
	width: 288px;
	max-height: 70vh;
	margin-left: 8px;
	padding: 8px;
	overflow: auto;
	border: 0;
	border-radius: 18px;
	background: #fff;
	box-shadow:
		0 0 0 1px rgba(19, 20, 23, 0.07),
		0 14px 34px -14px rgba(18, 20, 23, 0.18),
		0 1px 3px rgba(18, 20, 23, 0.04);
}

@media (prefers-color-scheme: dark) {

	.sg-dd__fly {
		background: var(--sg-raised);
		box-shadow:
			0 0 0 1px rgba(255, 255, 255, 0.08),
			0 14px 34px -14px rgba(0, 0, 0, 0.6);
	}
}

.sg-dd__flytitle {
	margin: 4px 0 6px 12px;
}

.sg-nav .sg-dd__more {
	margin: 8px 10px 0;
}

@media (max-width: 860px) {

	.sg-dd__panel {
		transform: none;
	}

	.sg-dd__rows {
		width: auto;
	}

	.sg-dd__fly {
		position: static;
		width: auto;
		max-height: none;
		margin: 0;
		padding: 2px 0 8px 56px;
		box-shadow: none;
		background: transparent;
		border-radius: 0;
	}
}
/* =========================================================================
   The bar, the right way round.

   At the top it is transparent and runs the full width: logo at the left
   edge, button at the right, white on the green beneath. As the page moves
   it draws IN - not out - into a compact bar a thousand pixels wide, floated
   a little off the top on a deep green glass with a square corner. The first
   version did the opposite and Atif caught it.

   Pages that do not open on a green band keep the glass from the start, so
   white links never sit on a white page.
   ========================================================================= */

.sg-head,
.sg-head[data-stuck="true"] {
	background: transparent;
	border-bottom: 0;
	box-shadow: none;
	backdrop-filter: none;
}

.sg-head__inner {
	max-width: none;
	margin: 0;
	padding-left: clamp(16px, 2.2vw, 32px);
	padding-right: clamp(16px, 2.2vw, 32px);
	min-height: 86px;
	border-radius: 0;
	background: rgba(23, 37, 28, 0.9);
	backdrop-filter: saturate(140%) blur(10px);
	transition:
		max-width 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
		margin 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
		padding 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
		min-height 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
		border-radius 0.35s ease,
		background-color 0.3s ease,
		box-shadow 0.3s ease;
}

/* Over a green opening, the band is see-through until the page moves. */

body:has(#sg-main > .sg-hero:first-child) .sg-head:not([data-stuck="true"]) .sg-head__inner,
body:has(#sg-main > .sg-pagehero:first-child) .sg-head:not([data-stuck="true"]) .sg-head__inner {
	background: transparent;
	backdrop-filter: none;
}

body:has(#sg-main > .sg-hero:first-child) .sg-hero,
body:has(#sg-main > .sg-pagehero:first-child) .sg-pagehero {
	margin-top: -87px;
	padding-top: calc(87px + clamp(42px, 7vw, 92px));
}

/* Scrolled: it draws in. */

.sg-head[data-stuck="true"] .sg-head__inner {
	max-width: 1040px;
	margin: 10px auto 0;
	padding-left: 14px;
	padding-right: 14px;
	min-height: 60px;
	border-radius: 12px;
	background: rgba(23, 37, 28, 0.92);
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.08),
		0 18px 40px -22px rgba(0, 0, 0, 0.55);
}

/* White on green, at every state. */

.sg-head .sg-brand,
.sg-head .sg-nav a,
.sg-nav .sg-dd__trigger,
.sg-head .sg-nav .current-menu-item > a {
	color: #fff;
}

.sg-head .sg-nav a:hover,
.sg-nav .sg-dd__trigger:hover,
.sg-head .sg-nav .current-menu-item > a {
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
}

.sg-nav .sg-dd__trigger[aria-expanded="true"],
.sg-dd:hover .sg-dd__trigger {
	background: rgba(255, 255, 255, 0.2);
}

.sg-burger {
	border-color: rgba(255, 255, 255, 0.4);
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

@media (max-width: 860px) {

	.sg-head .sg-nav {
		background: rgba(23, 37, 28, 0.97);
		border-color: rgba(255, 255, 255, 0.12);
	}

	.sg-head .sg-nav .sg-dd__name,
	.sg-head .sg-nav .sg-dd__rowtitle,
	.sg-head .sg-nav .sg-dd__flytitle {
		color: #fff;
	}

	.sg-head .sg-nav .sg-dd__desc,
	.sg-head .sg-nav .sg-dd__lead {
		color: rgba(255, 255, 255, 0.7);
	}

	.sg-head .sg-nav .sg-dd__rowlink:hover,
	.sg-head .sg-nav .sg-dd__row[data-active="true"] .sg-dd__rowlink,
	.sg-head .sg-nav .sg-dd__items a:hover {
		background: rgba(255, 255, 255, 0.1);
	}

	.sg-head .sg-nav .sg-dd__more {
		color: #fff;
		border-top-color: rgba(255, 255, 255, 0.15);
	}

	.sg-head[data-stuck="true"] .sg-head__inner {
		max-width: none;
		margin: 8px 10px 0;
	}
}

@media (prefers-reduced-motion: reduce) {

	.sg-head__inner {
		transition: none;
	}
}

/* =========================================================================
   Amber, not black; a little further down; and not edge to edge at the top.

   The compact bar is the site's amber again, floated 18px off the top. At
   the top the bar sits in the page measure rather than running to the
   window's edges. Over a green opening it is see-through with white text;
   everywhere else - the compact bar, and pages that open light - it is
   amber with ink text, the way the site's bar always was.
   ========================================================================= */

.sg-head__inner {
	max-width: var(--sg-max);
	margin: 0 auto;
	padding-left: var(--sg-gutter);
	padding-right: var(--sg-gutter);
	background: var(--sg-amber);
	backdrop-filter: none;
}

body:has(#sg-main > .sg-hero:first-child) .sg-head:not([data-stuck="true"]) .sg-head__inner,
body:has(#sg-main > .sg-pagehero:first-child) .sg-head:not([data-stuck="true"]) .sg-head__inner {
	background: transparent;
}

/* On pages that open light, the band spans the window so no edge shows. */

body:not(:has(#sg-main > .sg-hero:first-child)):not(:has(#sg-main > .sg-pagehero:first-child)) .sg-head:not([data-stuck="true"]) {
	background: var(--sg-amber);
}

.sg-head[data-stuck="true"] .sg-head__inner {
	max-width: 1040px;
	margin: 18px auto 0;
	background: var(--sg-amber);
	box-shadow:
		0 0 0 1px rgba(0, 0, 0, 0.06),
		0 18px 40px -24px rgba(0, 0, 0, 0.4);
}

/* Ink on amber. */

.sg-head .sg-brand,
.sg-head .sg-nav a,
.sg-nav .sg-dd__trigger,
.sg-head .sg-nav .current-menu-item > a,
.sg-burger {
	color: #17251c;
	transition: color 0.25s ease, background 0.16s ease, padding 0.3s ease, font-size 0.3s ease;
}

.sg-head .sg-nav a:hover,
.sg-nav .sg-dd__trigger:hover,
.sg-head .sg-nav .current-menu-item > a {
	background: rgba(0, 0, 0, 0.1);
	color: #17251c;
}

.sg-nav .sg-dd__trigger[aria-expanded="true"],
.sg-dd:hover .sg-dd__trigger {
	background: rgba(0, 0, 0, 0.14);
}

.sg-burger {
	border-color: rgba(0, 0, 0, 0.2);
	background: rgba(255, 255, 255, 0.85);
}

/* White on green, only while the bar is see-through over a green opening. */

body:has(#sg-main > .sg-hero:first-child) .sg-head:not([data-stuck="true"]) .sg-nav a,
body:has(#sg-main > .sg-hero:first-child) .sg-head:not([data-stuck="true"]) .sg-dd__trigger,
body:has(#sg-main > .sg-hero:first-child) .sg-head:not([data-stuck="true"]) .sg-burger,
body:has(#sg-main > .sg-pagehero:first-child) .sg-head:not([data-stuck="true"]) .sg-nav a,
body:has(#sg-main > .sg-pagehero:first-child) .sg-head:not([data-stuck="true"]) .sg-dd__trigger,
body:has(#sg-main > .sg-pagehero:first-child) .sg-head:not([data-stuck="true"]) .sg-burger {
	color: #fff;
}

body:has(#sg-main > .sg-hero:first-child) .sg-head:not([data-stuck="true"]) .sg-nav a:hover,
body:has(#sg-main > .sg-hero:first-child) .sg-head:not([data-stuck="true"]) .sg-dd__trigger:hover,
body:has(#sg-main > .sg-hero:first-child) .sg-head:not([data-stuck="true"]) .sg-nav .current-menu-item > a,
body:has(#sg-main > .sg-pagehero:first-child) .sg-head:not([data-stuck="true"]) .sg-nav a:hover,
body:has(#sg-main > .sg-pagehero:first-child) .sg-head:not([data-stuck="true"]) .sg-dd__trigger:hover,
body:has(#sg-main > .sg-pagehero:first-child) .sg-head:not([data-stuck="true"]) .sg-nav .current-menu-item > a {
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
}

body:has(#sg-main > .sg-hero:first-child) .sg-head:not([data-stuck="true"]) .sg-burger,
body:has(#sg-main > .sg-pagehero:first-child) .sg-head:not([data-stuck="true"]) .sg-burger {
	border-color: rgba(255, 255, 255, 0.4);
	background: rgba(255, 255, 255, 0.12);
}

/* The phone menu is amber too, with ink. */

@media (max-width: 860px) {

	.sg-head .sg-nav {
		background: var(--sg-amber);
		border-color: rgba(0, 0, 0, 0.15);
	}

	.sg-head .sg-nav a,
	.sg-head .sg-nav .sg-dd__trigger,
	.sg-head .sg-nav .sg-dd__name,
	.sg-head .sg-nav .sg-dd__rowtitle,
	.sg-head .sg-nav .sg-dd__flytitle,
	.sg-head .sg-nav .sg-dd__more {
		color: #17251c;
	}

	.sg-head .sg-nav .sg-dd__desc,
	.sg-head .sg-nav .sg-dd__lead {
		color: rgba(23, 37, 28, 0.7);
	}

	.sg-head .sg-nav .sg-dd__rowlink:hover,
	.sg-head .sg-nav .sg-dd__row[data-active="true"] .sg-dd__rowlink,
	.sg-head .sg-nav .sg-dd__items a:hover {
		background: rgba(0, 0, 0, 0.08);
	}

	.sg-head .sg-nav .sg-dd__more {
		border-top-color: rgba(0, 0, 0, 0.15);
	}

	.sg-head[data-stuck="true"] .sg-head__inner {
		margin: 12px 10px 0;
	}
}

/* =========================================================================
   The submenu, shown properly.

   The bar's link rule centred everything inside the flyout, because its
   align-items reached a column flex. Left again. Rows get more room and a
   picture that shows the screen rather than a corner of it. The flyout now
   stands the full height of the panel beside it, so the two read as one
   menu rather than a card hanging off a row.
   ========================================================================= */

.sg-head .sg-nav .sg-dd__items a {
	align-items: flex-start;
	text-align: left;
	padding: 10px 12px;
}

.sg-dd__name {
	font-size: 15px;
	line-height: 21px;
}

.sg-dd__desc {
	font-size: 13px;
	line-height: 18px;
}

.sg-dd__rows {
	width: 304px;
}

.sg-head .sg-nav .sg-dd__rowlink {
	padding: 10px 12px;
	gap: 14px;
}

.sg-nav .sg-dd__thumb {
	width: 46px;
	height: 46px;
	border-radius: 10px;
}

.sg-dd__thumb img {
	object-fit: cover;
	object-position: center 18%;
}

.sg-dd__rowtitle {
	font-size: 15.5px;
}

.sg-dd__lead {
	font-size: 13px;
	line-height: 18px;
}

.sg-dd__row {
	position: static;
}

.sg-dd__fly {
	top: 8px;
	bottom: 8px;
	left: 100%;
	max-height: none;
	margin-left: 8px;
}

.sg-dd__flytitle {
	font-size: 12.5px;
}

@media (max-width: 860px) {

	.sg-dd__fly {
		position: static;
		margin: 0;
	}
}

/* The gap above the compact bar.

   A margin on the inner bar collapses straight through its sticky parent,
   so the 18px was there in the computed style and nowhere on screen. The
   gap is padding on the header instead, which cannot collapse. */

.sg-head {
	padding-top: 0;
	transition: padding-top 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.sg-head[data-stuck="true"] {
	padding-top: 18px;
}

.sg-head[data-stuck="true"] .sg-head__inner {
	margin-top: 0;
}

@media (max-width: 860px) {

	.sg-head[data-stuck="true"] {
		padding-top: 12px;
	}

	.sg-head[data-stuck="true"] .sg-head__inner {
		margin: 0 10px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.sg-head {
		transition: none;
	}
}

/* Bridges across the gaps.

   The pointer has to cross 10px of nothing between the trigger and the
   panel, and 8px between the panel and the flyout. Hover is lost in that
   nothing and the menu closes under the click. Invisible bridges keep the
   pointer "inside" the whole way. */

.sg-dd__panel::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -14px;
	height: 14px;
}

.sg-dd__fly::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -12px;
	width: 12px;
}

@media (max-width: 860px) {

	.sg-dd__panel::before,
	.sg-dd__fly::before {
		display: none;
	}
}

/* More height on the bar, at both states. */

.sg-head__inner {
	min-height: 96px;
}

.sg-brand img,
.sg-brand__logo {
	max-height: 56px;
}

.sg-head .sg-nav a,
.sg-nav .sg-dd__trigger {
	height: 40px;
	line-height: 40px;
	padding: 0 14px;
}

.sg-head__cta .sg-btn--primary {
	padding: 13px 22px;
}

.sg-head[data-stuck="true"] .sg-head__inner {
	min-height: 68px;
}

.sg-head[data-stuck="true"] .sg-brand img,
.sg-head[data-stuck="true"] .sg-brand__logo {
	max-height: 40px;
}

.sg-head[data-stuck="true"] .sg-nav a,
.sg-head[data-stuck="true"] .sg-dd__trigger {
	height: 36px;
	line-height: 36px;
	padding: 0 12px;
}

.sg-head[data-stuck="true"] .sg-head__cta .sg-btn--primary {
	padding: 10px 18px;
}

body:has(#sg-main > .sg-hero:first-child) .sg-hero,
body:has(#sg-main > .sg-pagehero:first-child) .sg-pagehero {
	margin-top: -97px;
	padding-top: calc(97px + clamp(42px, 7vw, 92px));
}

.sg-dd__panel {
	top: calc(100% + 8px);
}

/* =========================================================================
   Alive on the way down.

   A thin amber line along the top that fills as the page is read; sections
   arriving from their own side rather than all from below; phones and
   figures that drift a little with the scroll on wide screens, and on
   phones a CSS scroll timeline where the browser has one. Every initial
   state is still only ever applied to something below the fold, so nothing
   can be left hidden, and reduced motion gets a still page.
   ========================================================================= */

.sg-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 70;
	pointer-events: none;
}

.sg-progress span {
	display: block;
	height: 100%;
	background: var(--sg-amber);
	transform-origin: 0 50%;
	transform: scaleX(0);
}

/* Anchors from the menu land clear of the bar, and the target shows itself. */

.sg-group__list li,
.sg-showcase__list li,
[id^="g-"] {
	scroll-margin-top: 120px;
}

.sg-group__list li:target,
.sg-showcase__list li:target {
	border-left-color: var(--sg-amber);
	animation: sg-target 1.6s ease-out 1;
}

@keyframes sg-target {
	0%   { background: color-mix(in srgb, var(--sg-amber) 28%, transparent); }
	100% { background: transparent; }
}

@media (prefers-reduced-motion: no-preference) {

	.js-motion .sg-enter--left.is-pending  { transform: translateX(-36px); }
	.js-motion .sg-enter--right.is-pending { transform: translateX(36px); }

	.js-motion .sg-enter.is-in {
		transition-duration: 0.7s;
	}

	.js-motion .sg-strip li.is-pending,
	.js-motion .sg-trust li.is-pending,
	.js-motion .sg-faq details.is-pending,
	.js-motion .sg-foot__grid > div.is-pending,
	.js-motion .sg-group__list li.is-pending,
	.js-motion .sg-post.is-pending,
	.js-motion .sg-showcase__list li.is-pending {
		opacity: 0;
		transform: translateY(26px);
	}

	.js-motion .sg-strip li.is-in,
	.js-motion .sg-trust li.is-in,
	.js-motion .sg-faq details.is-in,
	.js-motion .sg-foot__grid > div.is-in,
	.js-motion .sg-group__list li.is-in,
	.js-motion .sg-post.is-in,
	.js-motion .sg-showcase__list li.is-in {
		opacity: 1;
		transform: none;
		transition: opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
	}

	.js-motion :is(.sg-strip, .sg-trust, .sg-foot__grid, .sg-group__list, .sg-showcase__list) > :nth-child(2).is-in,
	.js-motion .sg-posts .sg-post:nth-child(2).is-in { transition-delay: 0.09s; }
	.js-motion :is(.sg-strip, .sg-trust, .sg-foot__grid, .sg-group__list, .sg-showcase__list) > :nth-child(3).is-in,
	.js-motion .sg-posts .sg-post:nth-child(3).is-in { transition-delay: 0.18s; }
	.js-motion :is(.sg-strip, .sg-trust, .sg-foot__grid, .sg-group__list, .sg-showcase__list) > :nth-child(4).is-in { transition-delay: 0.27s; }
	.js-motion :is(.sg-group__list, .sg-showcase__list) > :nth-child(5).is-in { transition-delay: 0.36s; }

	/* Where the browser has a scroll timeline and GSAP is not loaded - every
	   phone-sized screen - the pictures drift with the page by themselves. */

	@supports (animation-timeline: view()) {

		@media (max-width: 1023px) {

			.sg-journey .sg-phone,
			.sg-story__beat .sg-phone,
			.sg-showcase__art .sg-phone,
			.sg-group__art .sg-phone,
			.sg-cta__art .sg-phone {
				animation: sg-drift linear both;
				animation-timeline: view();
				animation-range: entry 0% exit 100%;
			}
		}
	}
}

@keyframes sg-drift {
	from { transform: translateY(28px); }
	to   { transform: translateY(-28px); }
}

/* =========================================================================
   The blog.

   An opening band like the rest of the site, the newest post leading at
   full width, cards with a category, a date and a reading time, a brand
   mark where a post has no picture, and a single post with its own band and
   three more posts at the end.
   ========================================================================= */

.sg-pagehero--blog,
.sg-pagehero--post {
	text-align: left;
}

.sg-pagehero--blog .sg-pagehero__lede,
.sg-pagehero--post .sg-pagehero__lede {
	margin-left: 0;
}

.sg-pagehero--post h1 {
	max-width: 22ch;
	font-size: clamp(30px, 4.4vw, 50px);
}

.sg-pagehero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	color: rgba(255, 255, 255, 0.85);
	font-size: 15px;
}

.sg-page--blog {
	padding-top: clamp(26px, 4vw, 44px);
}

.sg-posts {
	grid-template-columns: repeat(3, 1fr);
}

.sg-post--featured {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	align-items: center;
}

.sg-post--featured .sg-post__thumb img {
	aspect-ratio: 4 / 3;
	height: 100%;
}

.sg-post--featured .sg-post__body {
	padding: clamp(22px, 3vw, 40px);
}

.sg-post--featured .sg-post__body h2 {
	font-size: clamp(24px, 2.8vw, 34px);
}

.sg-post--featured .sg-post__body p:not(.sg-post__meta) {
	font-size: 16px;
}

.sg-post__thumb {
	display: block;
	background: var(--sg-brand-soft);
}

.sg-post__blank {
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 9;
	background: linear-gradient(152deg, var(--sg-hero) 0%, #2f7f4e 100%);
}

.sg-post__blank .sg-brand__mark {
	width: 54px;
	height: 54px;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.16);
	font-size: 26px;
}

.sg-post__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
}

.sg-post__cat {
	padding: 3px 9px;
	border-radius: 6px;
	background: var(--sg-brand-soft);
	color: var(--sg-brand-deep);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.sg-post__more {
	display: inline-block;
	margin-top: 12px;
	color: var(--sg-brand-deep);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

.sg-post__more:hover {
	text-decoration: underline;
}

.sg-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
}

.sg-pagination .page-numbers.prev,
.sg-pagination .page-numbers.next {
	padding-left: 16px;
	padding-right: 16px;
}

/* The post itself. */

.sg-single__figure {
	margin: calc(-1 * clamp(34px, 6vw, 70px) + 28px) 0 32px;
}

.sg-single__figure img {
	display: block;
	width: 100%;
	max-height: 520px;
	object-fit: cover;
	border-radius: var(--sg-radius-lg);
	box-shadow: var(--sg-shadow);
}

.sg-prose--post {
	margin: 0 auto;
	font-size: 18px;
	line-height: 1.75;
}

.sg-prose--post h2 {
	font-size: clamp(24px, 2.8vw, 32px);
}

.sg-prose--post h3 {
	font-size: clamp(20px, 2.2vw, 24px);
}

.sg-prose--post p {
	margin-bottom: 22px;
}

.sg-prose--post a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sg-posts--more {
	grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 980px) {

	.sg-posts,
	.sg-posts--more {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 760px) {

	.sg-posts,
	.sg-posts--more {
		grid-template-columns: 1fr;
	}

	.sg-post--featured {
		grid-template-columns: 1fr;
	}
}

/* =========================================================================
   Alive, unmistakably.

   The hero phones breathe; a strip of the feature names runs under the
   hero; headings arrive from behind a wipe; the scroll drift is doubled;
   and on a wide screen "How Groceria works" pins and walks its four steps
   one at a time as the page moves. All of it still bows out under reduced
   motion, and none of it hides content.
   ========================================================================= */

@media (prefers-reduced-motion: no-preference) {

	/* Breathing. `translate` composes with the entrance's transform, so the
	   fan and the lift are kept and the float rides on top. */

	.sg-stage .sg-phone--lead {
		animation: sg-rise 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.08s forwards, sg-float 7s ease-in-out 1.2s infinite;
	}

	.sg-stage .sg-phone--back {
		animation: sg-fan-left 0.75s cubic-bezier(0.22, 0.61, 0.36, 1) 0.22s forwards, sg-float 9s ease-in-out 1.8s infinite;
	}

	.sg-stage .sg-phone--front {
		animation: sg-fan-right 0.75s cubic-bezier(0.22, 0.61, 0.36, 1) 0.32s forwards, sg-float 8s ease-in-out 2.3s infinite;
	}

	.sg-hero::before {
		animation: sg-breathe 12s ease-in-out infinite;
	}

	/* Headings: a wipe, not a fade. */

	.js-motion .sg-section__head.is-pending h2,
	.js-motion .sg-section__head.is-pending p {
		clip-path: inset(0 0 100% 0);
		transform: translateY(14px);
	}

	.js-motion .sg-section__head.is-in h2,
	.js-motion .sg-section__head.is-in p {
		clip-path: inset(0 0 0 0);
		transform: none;
		transition: clip-path 0.8s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
	}

	.js-motion .sg-section__head.is-in p {
		transition-delay: 0.12s;
	}

	/* The strip. */

	.sg-marquee__track {
		animation: sg-marquee 48s linear infinite;
	}

	.sg-marquee:hover .sg-marquee__track {
		animation-play-state: paused;
	}
}

@keyframes sg-float {
	0%, 100% { translate: 0 0; }
	50%      { translate: 0 -14px; }
}

@keyframes sg-breathe {
	0%, 100% { transform: scale(1); opacity: 1; }
	50%      { transform: scale(1.12); opacity: 0.75; }
}

@keyframes sg-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

.sg-marquee {
	overflow: hidden;
	padding: 14px 0;
	border-top: 1px solid var(--sg-line);
	border-bottom: 1px solid var(--sg-line);
	background: var(--sg-surface);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.sg-marquee__track {
	display: flex;
	align-items: center;
	gap: 22px;
	width: max-content;
	white-space: nowrap;
}

.sg-marquee__item {
	font-size: 15px;
	font-weight: 700;
	color: var(--sg-ink);
	letter-spacing: 0.01em;
}

.sg-marquee__dot {
	color: var(--sg-amber);
	font-size: 14px;
}

/* The pinned walk. */

.sg-journey--pinned .sg-journey__step {
	transition: none !important;
	opacity: 1;
	transform: none;
	will-change: transform, opacity;
}

.sg-journey--pinned .sg-journey__step::before {
	opacity: 1;
	transform: none;
	transition: none !important;
}

/* =========================================================================
   Amber in the hero, properly.

   Not a strip at the top but the second colour of the composition: the
   eyebrow, the words that matter in the headline, the second button, the
   note's mark, and a warm disc behind the phones.
   ========================================================================= */

.sg-hero .sg-eyebrow {
	background: var(--sg-amber);
	color: #17251c;
}

.sg-hero h1 em {
	font-style: normal;
	color: var(--sg-amber);
}

.sg-hero .sg-btn--quiet {
	border: 2px solid var(--sg-amber);
	color: var(--sg-amber);
	background: transparent;
}

.sg-hero .sg-btn--quiet:hover,
.sg-hero .sg-btn--quiet:focus-visible {
	background: var(--sg-amber);
	border-color: var(--sg-amber);
	color: #17251c;
}

.sg-hero .sg-hero__note::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 8px;
	border-radius: 2px;
	background: var(--sg-amber);
	vertical-align: middle;
}

.sg-hero::before {
	background: radial-gradient(closest-side, rgba(252, 185, 0, 0.26), transparent);
}

.sg-stage::before {
	content: "";
	position: absolute;
	inset: 12% -6% -4% 6%;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(252, 185, 0, 0.22), transparent 72%);
	z-index: 0;
	pointer-events: none;
}

.sg-stage .sg-phone--lead,
.sg-stage .sg-phone--back,
.sg-stage .sg-phone--front {
	position: relative;
}

.sg-stage .sg-phone--back,
.sg-stage .sg-phone--front {
	position: absolute;
}

.sg-stage .sg-phone--lead {
	border-color: rgba(252, 185, 0, 0.55);
}

/* =========================================================================
   The menu opens on a click, not on a pass of the pointer.

   Hover opened it whenever the pointer crossed the bar, which on the way to
   anything else felt like the menu jumping out. The pointer still switches
   rows once it is open; opening and closing are deliberate.
   ========================================================================= */

.sg-dd:hover:not([data-open="true"]):not(:focus-within) .sg-dd__panel {
	opacity: 0;
	visibility: hidden;
	transform: translate(0, -6px);
	transition: opacity 0.18s, transform 0.2s, visibility 0s linear 0.2s;
}

.sg-dd__panel::before {
	display: none;
}

.sg-dd__trigger {
	cursor: pointer;
}

/* =========================================================================
   The site's own old heading, kept.

   An amber kicker in two weights, then a title whose important words are
   green - the opening the old pages used, now on every section. Left
   aligned, as it was.
   ========================================================================= */

.sg-section__head--kicker {
	max-width: none;
	margin-left: 0;
	text-align: left;
}

.sg-kicker {
	margin: 0 0 6px;
	color: var(--sg-amber);
	font-size: clamp(22px, 2.6vw, 30px);
	line-height: 1.1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.sg-kicker span {
	font-weight: 300;
}

.sg-kicker strong {
	font-weight: 800;
}

.sg-section__head--kicker h2 {
	font-weight: 400;
	letter-spacing: -0.01em;
}

.sg-section__head--kicker h2 strong {
	font-weight: 800;
	color: var(--sg-hero);
}

@media (prefers-color-scheme: dark) {

	.sg-section__head--kicker h2 strong {
		color: var(--sg-hero-2);
	}
}

.sg-section__head--kicker p:not(.sg-kicker) {
	max-width: 56ch;
	margin-top: 8px;
	text-align: left;
}

.sg-group__text .sg-kicker {
	font-size: clamp(16px, 1.6vw, 20px);
	margin-bottom: 2px;
}

.sg-group__text h2 {
	border-bottom: 0;
	padding-bottom: 0;
}

.sg-group__text h2 strong {
	color: var(--sg-hero);
}

.sg-faq .sg-section__head--kicker {
	margin-bottom: 20px;
}

@media (prefers-reduced-motion: no-preference) {

	.js-motion .sg-section__head.is-pending .sg-kicker {
		clip-path: inset(0 0 100% 0);
		transform: translateY(14px);
	}

	.js-motion .sg-section__head.is-in .sg-kicker {
		clip-path: inset(0 0 0 0);
		transform: none;
		transition: clip-path 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
	}
}

/* Square tabs, like the menu, and the phone stays under them. */

.sg-tab {
	border-radius: 8px;
}

.sg-showcase__tabs {
	position: relative;
	z-index: 2;
	justify-content: flex-start;
}

.sg-showcase__panel {
	position: relative;
	z-index: 1;
	margin-top: 8px;
}

/* The trust strip moves as one piece, so nothing is clipped inside it. */

.sg-trust {
	will-change: transform;
}

/* The kicker is amber. The section head's own paragraph rule outranked the
   kicker's single class and turned it grey; these carry the ancestor. */

.sg-section__head .sg-kicker,
.sg-section__head--kicker .sg-kicker,
.sg-group__text .sg-kicker,
.sg-faq .sg-kicker {
	color: var(--sg-amber);
	max-width: none;
}

/* A bigger logo. */

.sg-brand img,
.sg-brand__logo {
	max-height: 72px;
}

.sg-head[data-stuck="true"] .sg-brand img,
.sg-head[data-stuck="true"] .sg-brand__logo {
	max-height: 50px;
}

.sg-head__inner {
	min-height: 104px;
}

.sg-head[data-stuck="true"] .sg-head__inner {
	min-height: 74px;
}

body:has(#sg-main > .sg-hero:first-child) .sg-hero,
body:has(#sg-main > .sg-pagehero:first-child) .sg-pagehero {
	margin-top: -105px;
	padding-top: calc(105px + clamp(42px, 7vw, 92px));
}

@media (max-width: 860px) {

	.sg-brand img,
	.sg-brand__logo {
		max-height: 56px;
	}

	.sg-head__inner {
		min-height: 84px;
	}
}

/* Plain device captures in the frames: taller than the store frames, with a
   status bar along the top, so the thumbnails look a little lower down and
   the frame's corner matches the screen's. */

.sg-phone img {
	border-radius: 20px;
	aspect-ratio: 9 / 19.5;
	object-fit: cover;
	object-position: top center;
}

.sg-dd__thumb img {
	object-position: center 28%;
}

.sg-journey .sg-phone img,
.sg-story__beat .sg-phone img {
	aspect-ratio: 9 / 16;
}