/* Smart Gate Unlock — site styles. Tokens come from theme.json presets. */

:root {
	--sgu-brand: var(--wp--preset--color--brand);
	--sgu-brand-dark: var(--wp--preset--color--brand-dark);
	--sgu-deep: var(--wp--preset--color--brand-deep);
	--sgu-mint: var(--wp--preset--color--mint);
	--sgu-mist: var(--wp--preset--color--mist);
	--sgu-line: var(--wp--preset--color--line);
	--sgu-ink: var(--wp--preset--color--ink);
	--sgu-muted: var(--wp--preset--color--muted);
	--sgu-radius: 20px;
	--sgu-header-h: 76px;
	--sgu-pad-x: clamp(1rem, 4vw, 2rem);
	--sgu-section-y: clamp(4rem, 9vw, 7.5rem);
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--sgu-header-h) + 12px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { -webkit-font-smoothing: antialiased; overflow-x: clip; }
.sgu-main { margin-block-start: 0 !important; }
.wp-site-blocks > * + * { margin-block-start: 0; }
/* Full-bleed sections sit flush against each other (no block gap). */
.sgu-main > *, .sgu-steps > *, .sgu-main > .wp-block-post-content > *,
.sgu-footer + .sgu-copyright, .wp-block-template-part > * + * { margin-block-start: 0 !important; }
img { max-width: 100%; height: auto; }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

:focus-visible { outline: 3px solid var(--sgu-brand); outline-offset: 3px; border-radius: 4px; }

/* ---------- Shared bits ---------- */

.sgu-pill {
	display: inline-flex; align-items: center; gap: .55rem;
	margin: 0; padding: .45rem 1rem .45rem .85rem;
	border: 1px solid rgba(255,255,255,.4); border-radius: 999px;
	font-family: var(--wp--preset--font-family--display);
	font-size: .8rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
	color: #fff; width: fit-content;
}
.sgu-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sgu-mint); }
.sgu-pill--light { border-color: var(--sgu-line); background: #fff; color: var(--sgu-deep); }
.sgu-pill--light::before { background: var(--sgu-brand); }

mark.sgu-accent { background: none; color: var(--sgu-brand-dark); }
.sgu-dark mark.sgu-accent { color: var(--sgu-mint); }
.sgu-outline {
	color: transparent; -webkit-text-stroke: 1.5px var(--sgu-brand-dark);
	font-weight: 700;
}
@supports not (-webkit-text-stroke: 1px black) { .sgu-outline { color: var(--sgu-brand-dark); } }

.sgu-lede { font-size: var(--wp--preset--font-size--large); color: var(--sgu-muted); line-height: 1.5; margin: 0; max-width: 34em; }
.sgu-dark .sgu-lede { color: rgba(255,255,255,.86); }
.sgu-rule { display: flex; gap: 1rem; align-items: baseline; }
.sgu-rule::before { content: ""; flex: 0 0 2.5rem; height: 2px; background: var(--sgu-brand); transform: translateY(-.3em); }
.sgu-dark .sgu-rule::before { background: var(--sgu-mint); }
.sgu-muted { color: var(--sgu-muted); }

.sgu-section-head { margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.sgu-section-head > * + * { margin-top: 1rem !important; }
.sgu-section-head h2 { margin-top: 1.25rem !important; }
.sgu-section-head--center { text-align: center; }
.sgu-section-head--center .sgu-pill { margin-inline: auto; }
.sgu-section-head--center .sgu-lede { margin-inline: auto; }

/* Dark teal sections with concentric rings */
.sgu-dark {
	position: relative; isolation: isolate; color: #fff;
	background-color: var(--sgu-brand-dark);
	background-image: linear-gradient(160deg, var(--sgu-brand) 0%, var(--sgu-brand-dark) 55%, var(--sgu-deep) 100%);
}
.sgu-dark::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: repeating-radial-gradient(circle at var(--rings-x, 78%) var(--rings-y, 50%), transparent 0 139px, rgba(255,255,255,.09) 140px 141px);
	-webkit-mask-image: radial-gradient(circle at var(--rings-x, 78%) var(--rings-y, 50%), #000 30%, transparent 75%);
	mask-image: radial-gradient(circle at var(--rings-x, 78%) var(--rings-y, 50%), #000 30%, transparent 75%);
}
.sgu-dark h1, .sgu-dark h2, .sgu-dark h3 { color: #fff; }
.sgu-dark a:not(.wp-element-button):not(.sgu-store) { color: var(--sgu-mint); }

/* Buttons */
.wp-element-button, .wp-block-button__link { transition: background-color .2s, color .2s, transform .2s, box-shadow .2s; }
.wp-block-button__link:hover { transform: translateY(-1px); }
.wp-block-button.is-style-outline > .wp-block-button__link { background: transparent; color: var(--sgu-brand-dark); border: 2px solid currentColor; }
.wp-block-button.is-style-light > .wp-block-button__link { background: #fff; color: var(--sgu-deep); box-shadow: 0 8px 24px rgba(0,40,30,.2); }
.wp-block-button.is-style-light > .wp-block-button__link:hover { background: var(--sgu-mint); }
.wp-block-button.is-style-ghost > .wp-block-button__link { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.55); }
.wp-block-button.is-style-ghost > .wp-block-button__link:hover { background: rgba(255,255,255,.12); border-color: #fff; }

/* Store buttons */
.sgu-stores { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.sgu-stores--center { justify-content: center; }
.sgu-store {
	display: inline-flex; align-items: center; gap: .6rem;
	padding: .55rem 1.1rem .55rem .9rem; border-radius: 12px;
	background: #0b0f0e; color: #fff !important; text-decoration: none;
	font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: 1.05rem; line-height: 1.1;
	transition: transform .2s, background-color .2s;
}
.sgu-store:hover { transform: translateY(-1px); background: #000; }
.sgu-store svg { width: 24px; height: 24px; flex: none; }
.sgu-store small { display: block; font-size: .68rem; font-weight: 400; opacity: .8; letter-spacing: .02em; }
.sgu-stores--sm .sgu-store { font-size: .95rem; padding: .45rem .95rem .45rem .8rem; }

/* Phone frame around app screenshots */
.sgu-phone {
	position: relative; width: min(300px, 70vw); aspect-ratio: 727 / 1640; /* screenshot + status bar strip */
	border: 11px solid #0c0d0d; border-radius: 48px; overflow: hidden; background: #fff;
	box-shadow: 0 0 0 1.5px #2a2c2c, 0 40px 80px -20px rgba(0,30,22,.45), 0 18px 36px -18px rgba(0,0,0,.35);
}
.sgu-phone::before { /* dynamic island */
	content: ""; position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
	width: 31%; height: 22px; border-radius: 999px; background: #0c0d0d; z-index: 5;
	pointer-events: none;
}
.sgu-phone img {
	display: block; width: 100%; height: 100%; object-fit: cover; object-position: top;
	/* The screenshots have no status bar: pad the top so app headers clear the notch. */
	box-sizing: border-box; padding-top: 15.1%; background: #fff;
}
.sgu-phone img[src*="screen-pairing"] { background: #006650; }
.sgu-phone--tilt-right { transform: rotate(4deg); }
.sgu-phone--tilt-left { transform: rotate(-4deg); }

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

.sgu-header-wrap { position: sticky; top: 0; z-index: 50; }
.admin-bar .sgu-header-wrap { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) { .admin-bar .sgu-header-wrap { top: 0; } }
.sgu-header {
	background: rgba(255,255,255,.92); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px);
	border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s;
}
.sgu-header.is-scrolled { border-bottom-color: var(--sgu-line); box-shadow: 0 6px 24px -12px rgba(0,40,30,.18); }
.sgu-header__inner { min-height: var(--sgu-header-h); gap: 1.5rem; }
.sgu-logo { margin: 0; }
.sgu-logo img { display: block; }
.sgu-header__nav { gap: 1.75rem; }
.sgu-header .wp-block-navigation a { color: var(--sgu-ink); text-decoration: none; }
.sgu-header .wp-block-navigation a:hover { color: var(--sgu-brand-dark); }
.sgu-header .wp-block-navigation__responsive-container-open { color: var(--sgu-ink); }
.sgu-header .wp-block-navigation__responsive-container.is-menu-open { padding: 1.5rem; background: #fff; }
.sgu-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 1.25rem; font-size: 1.4rem; }
@media (max-width: 781px) {
	.sgu-logo img { width: 160px !important; }
	.sgu-header__cta { display: none !important; }
}

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

.sgu-hero { --rings-x: 74%; padding-top: clamp(3rem, 7vw, 6rem); padding-bottom: clamp(3rem, 7vw, 6rem); overflow: hidden; }
.sgu-hero__cols { gap: clamp(2rem, 5vw, 4rem); }
.sgu-hero__copy > * + * { margin-top: 1.5rem !important; }
.sgu-hero__title {
	font-size: clamp(2rem, 4.2vw, 3.6rem); font-weight: 500; line-height: 1.08; letter-spacing: -.025em;
	color: rgba(255,255,255,.9) !important; margin-top: 2rem !important;
}
.sgu-hero__big { display: block; font-size: clamp(4.2rem, 10vw, 8.5rem); font-weight: 700; line-height: .95; letter-spacing: -.04em; color: #fff; margin-bottom: .1em; }
.sgu-hero__title mark.sgu-accent { font-weight: 700; }
.sgu-hero__ctas { margin-top: 2rem !important; gap: .75rem; }
.sgu-hero__art { display: flex; justify-content: center; }

.sgu-fan { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1 / 1.02; }
.sgu-fan .sgu-phone { position: absolute; width: 50%; top: 50%; left: 50%; }
.sgu-fan__c { transform: translate(-50%, -50%); z-index: 3; }
.sgu-fan__l { transform: translate(-112%, -46%) rotate(-8deg) scale(.86); z-index: 1; filter: brightness(.92); }
.sgu-fan__r { transform: translate(12%, -46%) rotate(8deg) scale(.86); z-index: 2; filter: brightness(.96); }
@media (prefers-reduced-motion: no-preference) {
	.sgu-fan .sgu-phone { animation: sgu-rise .9s cubic-bezier(.2,.7,.2,1) both; }
	.sgu-fan__l { animation-delay: .12s !important; }
	.sgu-fan__r { animation-delay: .22s !important; }
	@keyframes sgu-rise { from { opacity: 0; translate: 0 40px; } to { opacity: 1; translate: 0 0; } }
}
@media (max-width: 781px) {
	.sgu-hero__art { order: 2; }
	.sgu-fan { max-width: 420px; margin-inline: auto; }
}

/* ---------- Features ---------- */

.sgu-features { padding-top: var(--sgu-section-y); padding-bottom: var(--sgu-section-y); }
.sgu-feature-grid {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;
}
.sgu-feature {
	padding: 1.75rem 1.5rem; border: 1px solid var(--sgu-line); border-radius: var(--sgu-radius); background: #fff;
	transition: border-color .2s, transform .2s, box-shadow .2s;
}
.sgu-feature:hover { border-color: var(--sgu-brand); transform: translateY(-3px); box-shadow: 0 18px 40px -24px rgba(1,138,107,.5); }
.sgu-feature__icon {
	display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px;
	background: color-mix(in srgb, var(--sgu-brand) 12%, white); color: var(--sgu-brand-dark);
}
.sgu-feature__icon svg { width: 26px; height: 26px; }
.sgu-feature h3 { margin: 1.25rem 0 .4rem; font-size: 1.15rem; }
.sgu-feature p { margin: 0; color: var(--sgu-muted); font-size: .95rem; line-height: 1.5; }

/* ---------- How it works: scroll-pinned walkthrough ---------- */

.sgu-step__meta { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.sgu-step__count { font-family: var(--wp--preset--font-family--display); font-weight: 500; letter-spacing: .2em; color: var(--sgu-muted); font-size: .9rem; transition: color .5s; }
.sgu-step__title { font-size: var(--wp--preset--font-size--xx-large); line-height: 1.04; letter-spacing: -.03em; margin: 1.25rem 0 1.25rem; color: var(--sgu-ink); transition: color .5s; }
.sgu-chips { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.75rem 0 0; padding: 0; }
.sgu-chips li { padding: .5rem 1.1rem; border-radius: 999px; background: rgba(255,255,255,.16); color: #fff; font-family: var(--wp--preset--font-family--display); font-weight: 500; }
.sgu-sstep__tag {
	margin: 0; font-family: var(--wp--preset--font-family--display); font-size: .8rem; font-weight: 600;
	letter-spacing: .16em; text-transform: uppercase; color: var(--sgu-brand-dark); transition: color .5s;
}
.sgu-sstep__tag::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: .55rem; vertical-align: middle; }
.sgu-scrolly__label { margin: 0 0 1.5rem; font-size: 1rem; }

/* Fallback (no JS): a plain stacked list, each step with its own phone. */
.sgu-scrolly { background: var(--sgu-mist); }
.sgu-scrolly__inner { max-width: 1100px; margin: 0 auto; padding: var(--sgu-section-y) var(--sgu-pad-x); }
.sgu-sstep + .sgu-sstep { margin-top: var(--sgu-section-y); }
.sgu-sstep__phone { margin-top: 2rem; display: flex; justify-content: center; }
.sgu-sstep .sgu-chips li { background: var(--sgu-brand); }
.sgu-scrolly__art, .sgu-scrolly__nav, .sgu-scrolly__progress, .sgu-scrolly__bg { display: none; }

/* Pinned mode (JS on). The outer box is tall; the stage sticks to the viewport
   while the visitor scrolls through it, and steps swap in the same place. */
.sgu-js .sgu-scrolly {
	--stage-h: calc(100svh - var(--sgu-header-h));
	--step-scroll: 85svh;
	position: relative; background: none;
	height: calc(var(--stage-h) + (var(--steps) - 1) * var(--step-scroll));
}
.sgu-js .sgu-scrolly__stage {
	position: sticky; top: var(--sgu-header-h); height: var(--stage-h);
	overflow: hidden; isolation: isolate; background: var(--sgu-mist);
}
.sgu-js .admin-bar .sgu-scrolly__stage { top: calc(var(--sgu-header-h) + var(--wp-admin--admin-bar--height, 32px)); }
.sgu-js .sgu-scrolly__stage::before { /* light rings */
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: repeating-radial-gradient(circle at 72% 50%, transparent 0 139px, rgba(1,138,107,.10) 140px 141px);
	-webkit-mask-image: radial-gradient(circle at 72% 50%, #000 25%, transparent 70%);
	mask-image: radial-gradient(circle at 72% 50%, #000 25%, transparent 70%);
}
.sgu-js .sgu-scrolly__bg { /* dark teal layer, fades in on dark steps */
	display: block; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .7s ease;
	background:
		repeating-radial-gradient(circle at 72% 50%, transparent 0 139px, rgba(255,255,255,.09) 140px 141px),
		linear-gradient(160deg, var(--sgu-brand) 0%, var(--sgu-brand-dark) 55%, var(--sgu-deep) 100%);
}
.sgu-js .sgu-scrolly[data-tone="dark"] .sgu-scrolly__bg { opacity: 1; }
.sgu-js .sgu-scrolly__inner {
	position: relative; height: 100%; max-width: 1100px; padding-block: 0; box-sizing: border-box;
	display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center;
}
.sgu-js .sgu-scrolly__copy { position: relative; display: grid; align-content: center; }
.sgu-js .sgu-scrolly__label { grid-area: 1 / 1; align-self: start; transform: translateY(-4.5rem); }
.sgu-js .sgu-sstep { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transform: translateY(40px); transition: opacity .55s ease, transform .7s cubic-bezier(.2,.7,.2,1), visibility 0s linear .7s; }
.sgu-js .sgu-sstep.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: .12s, .12s, 0s; }
.sgu-js .sgu-sstep.is-before { transform: translateY(-40px); }
.sgu-js .sgu-sstep__phone { display: none; }
.sgu-js .sgu-sstep .sgu-chips li { background: rgba(255,255,255,.16); }

/* Text colours follow the tone of the active step. */
.sgu-js .sgu-scrolly[data-tone="dark"] .sgu-step__title,
.sgu-js .sgu-scrolly[data-tone="dark"] .sgu-sstep__tag { color: #fff; }
.sgu-js .sgu-scrolly[data-tone="dark"] .sgu-step__count { color: rgba(255,255,255,.7); }
.sgu-js .sgu-scrolly[data-tone="dark"] .sgu-lede { color: rgba(255,255,255,.86); }
.sgu-js .sgu-scrolly[data-tone="dark"] .sgu-rule::before { background: var(--sgu-mint); }
.sgu-js .sgu-scrolly[data-tone="dark"] mark.sgu-accent { color: var(--sgu-mint); }
.sgu-js .sgu-scrolly[data-tone="dark"] .sgu-outline { -webkit-text-stroke-color: var(--sgu-mint); }
.sgu-js .sgu-scrolly[data-tone="dark"] .sgu-scrolly__label .sgu-pill { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.sgu-scrolly__label .sgu-pill { transition: background-color .5s, color .5s, border-color .5s; }

/* Phone: screens slide up into the same frame; the phone tilts a little per step. */
.sgu-js .sgu-scrolly__art { display: flex; justify-content: center; align-items: center; height: 100%; }
.sgu-js .sgu-scrolly__phone {
	width: auto; height: min(78%, 640px); max-width: 100%;
	transform: rotate(var(--tilt, 0deg)); transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.sgu-js .sgu-scrolly[data-active="0"] { --tilt: 3deg; }
.sgu-js .sgu-scrolly[data-active="2"] { --tilt: -3deg; }
.sgu-js .sgu-scrolly[data-active="4"] { --tilt: 2deg; }
.sgu-scrolly__screen { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; transform: translateY(100%); transition: transform .75s cubic-bezier(.65,0,.25,1), filter .75s; }
.sgu-scrolly__screen.is-active { transform: translateY(0); z-index: 2; }
.sgu-scrolly__screen.is-before { transform: translateY(-18%) scale(.94); filter: brightness(.6); z-index: 1; }
.sgu-js .sgu-scrolly__screen:first-child { position: absolute; }

/* Step dots + progress bar */
.sgu-js .sgu-scrolly__nav {
	display: flex; flex-direction: column; gap: .7rem; list-style: none; margin: 0; padding: 0;
	position: absolute; right: clamp(.5rem, 2vw, 1.5rem); top: 50%; transform: translateY(-50%);
}
.sgu-scrolly__nav button {
	display: block; width: 10px; height: 10px; padding: 0; border-radius: 999px; cursor: pointer;
	border: 1.5px solid var(--sgu-brand-dark); background: transparent; transition: height .35s, background-color .35s, border-color .5s;
}
.sgu-scrolly__nav button[aria-current="step"] { height: 28px; background: var(--sgu-brand-dark); }
.sgu-scrolly[data-tone="dark"] .sgu-scrolly__nav button { border-color: #fff; }
.sgu-scrolly[data-tone="dark"] .sgu-scrolly__nav button[aria-current="step"] { background: #fff; }
.sgu-js .sgu-scrolly__progress { display: block; position: absolute; left: var(--sgu-pad-x); right: var(--sgu-pad-x); bottom: clamp(1rem, 3vh, 2rem); height: 3px; border-radius: 3px; background: rgba(1,138,107,.15); overflow: hidden; }
.sgu-scrolly__progress span { display: block; height: 100%; width: 100%; background: var(--sgu-brand); transform-origin: left; transform: scaleX(var(--p, 0)); }
.sgu-scrolly[data-tone="dark"] .sgu-scrolly__progress { background: rgba(255,255,255,.2); }
.sgu-scrolly[data-tone="dark"] .sgu-scrolly__progress span { background: var(--sgu-mint); }

/* Phones: copy on top, phone below, both inside the pinned stage. */
@media (max-width: 781px) {
	.sgu-js .sgu-scrolly { --step-scroll: 75svh; }
	.sgu-js .sgu-scrolly__inner { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 1rem; align-items: start; padding-top: 1.75rem; padding-bottom: 2.5rem; padding-right: 2.25rem; }
	.sgu-js .sgu-scrolly__label { display: none; }
	.sgu-js .sgu-step__title { font-size: clamp(1.7rem, 7.5vw, 2.3rem); margin: .75rem 0; }
	.sgu-js .sgu-sstep .sgu-lede { font-size: 1rem; }
	.sgu-js .sgu-chips { margin-top: .9rem; gap: .4rem; }
	.sgu-js .sgu-chips li { padding: .35rem .8rem; font-size: .85rem; }
	.sgu-js .sgu-scrolly__art { min-height: 0; }
	.sgu-js .sgu-scrolly__phone { height: 100%; max-height: 52svh; border-width: 8px; border-radius: 34px; }
	.sgu-js .sgu-scrolly__phone::before { height: 16px; top: 6px; }
}
@media (prefers-reduced-motion: reduce) {
	.sgu-sstep, .sgu-scrolly__screen, .sgu-scrolly__phone, .sgu-scrolly__bg { transition: none !important; }
}

/* Hero scroll cue: "Scroll to know more" */
.sgu-hero { position: relative; }
.sgu-scroll-cue {
	position: absolute; left: 50%; bottom: clamp(.75rem, 2.5vw, 1.75rem); transform: translateX(-50%);
	display: flex; flex-direction: column; align-items: center; gap: .5rem;
	color: rgba(255,255,255,.85) !important; text-decoration: none; z-index: 5;
	font-family: var(--wp--preset--font-family--display); font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
}
.sgu-scroll-cue:hover { color: #fff !important; }
.sgu-scroll-cue__mouse { width: 24px; height: 38px; border: 2px solid currentColor; border-radius: 14px; position: relative; }
.sgu-scroll-cue__mouse::after { content: ""; position: absolute; left: 50%; top: 7px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: currentColor; }
@media (prefers-reduced-motion: no-preference) {
	.sgu-scroll-cue__mouse::after { animation: sgu-wheel 1.8s cubic-bezier(.6,0,.4,1) infinite; }
	.sgu-scroll-cue { animation: sgu-bob 2.4s ease-in-out infinite; }
	@keyframes sgu-wheel { 0% { opacity: 0; transform: translateY(-3px); } 30% { opacity: 1; } 70% { opacity: 1; transform: translateY(9px); } 100% { opacity: 0; transform: translateY(12px); } }
	@keyframes sgu-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 5px; } }
}
.sgu-hero.is-cue-hidden .sgu-scroll-cue { opacity: 0; pointer-events: none; transition: opacity .3s; }
@media (max-width: 781px) { .sgu-scroll-cue { display: none; } }

/* ---------- Cards (compatibility, box) ---------- */

.sgu-compat, .sgu-box { padding-top: var(--sgu-section-y); padding-bottom: var(--sgu-section-y); }
.sgu-box { background: var(--sgu-mist); }
.sgu-card-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.sgu-card-grid--4 { grid-template-columns: repeat(4, 1fr); }
.sgu-card-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 960px) { .sgu-card-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .sgu-card-grid--3 { grid-template-columns: 1fr; } .sgu-card-grid--3 .sgu-card { display: grid; grid-template-columns: 96px 1fr; column-gap: 1rem; align-items: center; text-align: left; } .sgu-card-grid--3 .sgu-card img { grid-row: span 2; } .sgu-card-grid--3 .sgu-card h3 { margin-top: 0; } }
.sgu-card {
	background: #fff; border: 1px solid var(--sgu-line); border-radius: var(--sgu-radius);
	padding: 1.25rem 1.25rem 1.5rem; text-align: center; transition: border-color .2s, transform .2s;
}
.sgu-card:hover { border-color: var(--sgu-brand); transform: translateY(-3px); }
.sgu-card img { display: block; margin: 0 auto; width: 100%; max-width: 200px; mix-blend-mode: multiply; }
.sgu-card h3 { font-size: 1.05rem; margin: .75rem 0 0; }
.sgu-card p { margin: .35rem 0 0; font-size: .9rem; color: var(--sgu-muted); line-height: 1.45; }
.sgu-compat__note { text-align: center; color: var(--sgu-muted); margin-top: 2rem; }

/* ---------- Video ---------- */

.sgu-video { padding-top: var(--sgu-section-y); padding-bottom: 0; background: linear-gradient(var(--sgu-mist), #fff); }
.sgu-video .sgu-yt { box-shadow: 0 40px 80px -40px rgba(0,60,45,.45); }
.sgu-yt { position: relative; aspect-ratio: 16 / 9; border-radius: var(--sgu-radius); overflow: hidden; background: #000; box-shadow: 0 40px 80px -30px rgba(0,0,0,.5); }
.sgu-yt iframe, .sgu-yt__btn { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sgu-yt__btn { padding: 0; cursor: pointer; background: #000; }
.sgu-yt__btn img { width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: opacity .2s; }
.sgu-yt__btn:hover img { opacity: 1; }
.sgu-yt__play {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%;
	background: var(--sgu-brand); color: #fff; box-shadow: 0 0 0 10px rgba(255,255,255,.18); transition: transform .2s;
}
.sgu-yt__btn:hover .sgu-yt__play { transform: translate(-50%, -50%) scale(1.06); }
.sgu-yt__play svg { width: 36px; height: 36px; margin-left: 4px; }

/* ---------- CTA: get the app / get the device ---------- */

.sgu-cta { padding-top: var(--sgu-section-y); padding-bottom: var(--sgu-section-y); }
.sgu-cta__card {
	--rings-x: 78%; --rings-y: 50%;
	display: grid; grid-template-columns: 1.4fr 1fr; align-items: center; gap: clamp(1.5rem, 4vw, 3rem);
	border-radius: 32px; overflow: hidden;
	padding: clamp(2rem, 5vw, 4rem) clamp(1.25rem, 5vw, 4rem);
	box-shadow: 0 50px 100px -50px rgba(0, 89, 74, .55);
}
.sgu-cta__copy h2 { font-size: var(--wp--preset--font-size--xx-large); line-height: 1.02; letter-spacing: -.03em; margin: 1.25rem 0 1rem; }
.sgu-cta__copy > .sgu-lede { margin-bottom: 2rem; }

.sgu-cta__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.sgu-cta__step {
	display: grid; grid-template-columns: 44px 1fr; gap: 1rem; align-items: start;
	padding: 1.35rem 1.35rem 1.5rem; border-radius: 20px;
	background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.sgu-cta__num {
	display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
	background: var(--sgu-mint); color: var(--sgu-deep);
	font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 1.15rem;
}
.sgu-cta__body h3 { margin: .35rem 0 .25rem; font-size: 1.2rem; }
.sgu-cta__body > p { margin: 0; color: rgba(255,255,255,.82); font-size: .95rem; line-height: 1.5; }

.sgu-cta__stores { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }
.sgu-cta__store {
	display: flex; align-items: center; gap: .65rem; padding: .45rem .45rem .45rem .45rem;
	border-radius: 16px; background: #fff; text-decoration: none; transition: transform .2s, box-shadow .2s;
}
.sgu-cta__store:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(0,0,0,.45); }
.sgu-cta__qr { display: block; width: 54px; height: 54px; padding: 4px; border-radius: 10px; background: #fff; }
.sgu-cta__qr img { display: block; width: 100%; height: 100%; }
.sgu-cta__store .sgu-store { padding: .55rem 1rem .55rem .8rem; }
.sgu-cta__store:hover .sgu-store { transform: none; }
.sgu-cta__hint { margin: .7rem 0 0 !important; font-size: .8rem !important; color: rgba(255,255,255,.65) !important; }

.sgu-cta__buttons { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1rem; }
.sgu-btn {
	display: inline-flex; align-items: center; gap: .5rem; padding: .8rem 1.35rem; border-radius: 999px;
	font-family: var(--wp--preset--font-family--display); font-weight: 600; text-decoration: none;
	transition: transform .2s, background-color .2s, box-shadow .2s;
}
.sgu-btn:hover { transform: translateY(-1px); }
.sgu-btn svg { width: 20px; height: 20px; }
.sgu-btn--light { background: #fff; color: var(--sgu-deep) !important; box-shadow: 0 10px 24px -10px rgba(0,0,0,.35); }
.sgu-btn--light:hover { background: var(--sgu-mint); }
.sgu-btn--light span { transition: transform .2s; }
.sgu-btn--light:hover span { transform: translateX(3px); }
.sgu-btn--wa { background: #25D366; color: #07311a !important; }
.sgu-btn--wa:hover { background: #3be27a; }

/* Visual: phone + floating device + connected badge */
.sgu-cta__art { position: relative; display: grid; place-items: center; min-height: 520px; }
.sgu-cta__glow { position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(184,242,223,.35), transparent 65%); }
.sgu-cta__phone { width: min(270px, 62vw); transform: rotate(-5deg); }
.sgu-cta__device {
	position: absolute; left: 2%; bottom: 8%; z-index: 6;
	display: grid; justify-items: center; gap: .1rem; width: 150px; padding: .75rem .75rem .9rem;
	border-radius: 22px; background: #fff; color: var(--sgu-ink);
	box-shadow: 0 30px 60px -20px rgba(0,0,0,.45);
	font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: .8rem; text-align: center;
}
.sgu-cta__device img { width: auto; height: 120px; margin: .5rem 0 .35rem; filter: drop-shadow(0 8px 10px rgba(0,0,0,.15)); }
.sgu-cta__badge {
	position: absolute; right: 0; top: 14%; z-index: 6;
	display: flex; align-items: center; gap: .55rem; padding: .7rem 1rem; border-radius: 14px;
	background: #fff; color: var(--sgu-ink); box-shadow: 0 24px 48px -18px rgba(0,0,0,.45);
	font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: .9rem;
}
.sgu-cta__badge em { font-style: normal; font-weight: 500; color: var(--sgu-brand-dark); font-size: .8rem; }
.sgu-cta__dot { width: 10px; height: 10px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.2); }
@media (prefers-reduced-motion: no-preference) {
	.sgu-cta__device { animation: sgu-float 6s ease-in-out infinite; }
	.sgu-cta__badge { animation: sgu-float 6s ease-in-out -3s infinite; }
	.sgu-cta__dot { animation: sgu-ping 2s ease-out infinite; }
	@keyframes sgu-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
	@keyframes sgu-ping { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.55); } 100% { box-shadow: 0 0 0 10px rgba(34,197,94,0); } }
}

@media (max-width: 960px) {
	.sgu-cta__card { grid-template-columns: 1fr; }
	.sgu-cta__art { min-height: 420px; }
	.sgu-cta__phone { width: 220px; }
}
@media (max-width: 600px) {
	.sgu-cta__card { border-radius: 24px; }
	.sgu-cta__qr, .sgu-cta__hint { display: none; } /* QR codes are for desktop visitors */
	.sgu-cta__store { padding: 0; background: none; }
	.sgu-cta__step { grid-template-columns: 1fr; padding: 1.15rem; }
	.sgu-cta__art { min-height: 340px; }
	.sgu-cta__phone { width: 180px; }
	.sgu-cta__stores { gap: .5rem; }
	.sgu-cta__device { width: 130px; left: 0; }
	.sgu-cta__device img { height: 90px; }
	.sgu-cta__badge { font-size: .8rem; padding: .55rem .8rem; }
}

/* ---------- Inner pages ---------- */

.sgu-page-hero {
	background: var(--sgu-mist); padding-top: clamp(3rem, 7vw, 5rem); padding-bottom: clamp(2rem, 5vw, 3.5rem);
	border-bottom: 1px solid var(--sgu-line);
}
.sgu-page-hero__title, .sgu-page-hero h1 { font-size: var(--wp--preset--font-size--xx-large); margin: 0; }
.sgu-page-hero .sgu-lede { margin-top: 1rem; }
.sgu-page-body { padding-top: clamp(2.5rem, 6vw, 4rem); padding-bottom: var(--sgu-section-y); }
.sgu-page-body h2 { font-size: var(--wp--preset--font-size--x-large); margin-top: 2.5rem; }
.sgu-page-body h3 { margin-top: 2rem; }
.sgu-404 { text-align: left; padding-bottom: var(--sgu-section-y); }
.sgu-404 > * + * { margin-top: 1.25rem; }

/* FAQ */
.sgu-faq .wp-block-details { padding: 1.25rem 0; border-bottom: 1px solid var(--sgu-line); }
.sgu-faq .wp-block-details summary {
	cursor: pointer; list-style: none; position: relative; padding-right: 2.5rem;
	font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: 1.15rem;
}
.sgu-faq .wp-block-details summary::-webkit-details-marker { display: none; }
.sgu-faq .wp-block-details summary::after {
	content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
	display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
	background: var(--sgu-mist); color: var(--sgu-brand-dark); font-size: 1.3rem; line-height: 1; transition: transform .2s, background-color .2s;
}
.sgu-faq .wp-block-details[open] summary::after { content: "–"; background: var(--sgu-brand); color: #fff; }
.sgu-faq .wp-block-details > :not(summary) { color: var(--sgu-muted); margin-top: .75rem; }
.sgu-faq h2 { font-size: var(--wp--preset--font-size--large) !important; color: var(--sgu-brand-dark); text-transform: uppercase; letter-spacing: .12em; margin-top: 3rem !important; }
.sgu-faq h2:first-child { margin-top: 0 !important; }
.sgu-help-card {
	margin-top: 3rem !important; padding: 2rem; border-radius: var(--sgu-radius);
	background: var(--sgu-mist); border: 1px solid var(--sgu-line);
}

/* Contact */
.sgu-contact { padding-top: clamp(2.5rem, 6vw, 4rem); padding-bottom: var(--sgu-section-y); }
.sgu-contact__grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (max-width: 860px) { .sgu-contact__grid { grid-template-columns: 1fr; } }
.sgu-form-card { background: #fff; border: 1px solid var(--sgu-line); border-radius: var(--sgu-radius); padding: clamp(1.25rem, 4vw, 2.5rem); box-shadow: 0 30px 60px -40px rgba(0,40,30,.35); }
.sgu-form-card h2 { font-size: var(--wp--preset--font-size--x-large); margin: 0 0 .5rem; }
.sgu-form-card > p { color: var(--sgu-muted); margin: 0 0 1.75rem; }
.sgu-info-card { --rings-x: 100%; --rings-y: 0%; border-radius: var(--sgu-radius); padding: clamp(1.5rem, 4vw, 2.25rem); }
.sgu-info-card h2 { font-size: var(--wp--preset--font-size--large); margin: 0 0 1.25rem; }
.sgu-info-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.sgu-info-list li { display: grid; grid-template-columns: 40px 1fr; gap: .9rem; align-items: start; }
.sgu-info-list svg { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: rgba(255,255,255,.14); }
.sgu-info-list small { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; opacity: .75; }
.sgu-info-list a, .sgu-info-list span { color: #fff !important; text-decoration: none; font-weight: 500; }
.sgu-info-card .wp-element-button { margin-top: 1.75rem; display: inline-flex; gap: .5rem; align-items: center; background: #25D366; color: #08321b; text-decoration: none; }
.sgu-info-card .wp-element-button:hover { background: #3be27a; }

.sgu-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1rem; }
.sgu-field { display: grid; gap: .4rem; }
.sgu-field--address, .sgu-field--topic, .sgu-field--message, .sgu-field--submit { grid-column: 1 / -1; }
@media (max-width: 600px) { .sgu-form { grid-template-columns: 1fr; } }
.sgu-field label { font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: .9rem; }
.sgu-field label span { color: var(--sgu-brand-dark); }
.sgu-field input, .sgu-field select, .sgu-field textarea {
	width: 100%; box-sizing: border-box; font: inherit; color: var(--sgu-ink); background: var(--sgu-mist);
	border: 1.5px solid var(--sgu-line); border-radius: 12px; padding: .8rem .95rem; transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.sgu-field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23018A6B' stroke-width='2'%3E%3Cpath d='m1 1 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }
.sgu-field input:focus, .sgu-field select:focus, .sgu-field textarea:focus { outline: none; border-color: var(--sgu-brand); background-color: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--sgu-brand) 18%, transparent); }
.sgu-field--submit { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: .5rem; }
.sgu-field--submit button { border: 0; cursor: pointer; }
.sgu-form__note { margin: 0; font-size: .875rem; color: var(--sgu-muted); }
.sgu-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sgu-notice { padding: 1rem 1.25rem; border-radius: 12px; margin-bottom: 1.5rem; }
.sgu-notice--ok { background: color-mix(in srgb, var(--sgu-brand) 12%, white); border: 1px solid var(--sgu-brand); color: var(--sgu-deep); }
.sgu-notice--err { background: #fff1f0; border: 1px solid #e5484d; color: #8a1c1f; }

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

.sgu-footer { background: var(--sgu-mist); border-top: 1px solid var(--sgu-line); padding-top: clamp(3rem, 6vw, 4.5rem); padding-bottom: clamp(2rem, 4vw, 3rem); }
.sgu-footer__cols { gap: clamp(1.5rem, 4vw, 3rem); }
.sgu-footer__h { font-size: .8rem !important; text-transform: uppercase; letter-spacing: .14em; color: var(--sgu-muted) !important; margin: .35rem 0 1rem; font-weight: 600 !important; }
.sgu-footer__links { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.sgu-footer__links a { color: var(--sgu-ink); text-decoration: none; }
.sgu-footer__links a:hover { color: var(--sgu-brand-dark); text-decoration: underline; }
.sgu-footer .sgu-muted { max-width: 30ch; margin-top: 1rem; }
.sgu-copyright { background: var(--sgu-brand); color: #fff; padding-top: 1rem; padding-bottom: 1rem; font-size: .875rem; }
.sgu-copyright p { margin: 0; }

.sgu-wa-float {
	position: fixed; right: 18px; bottom: 18px; z-index: 60;
	display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
	background: #25D366; color: #fff; box-shadow: 0 10px 28px rgba(0,0,0,.25); transition: transform .2s;
}
.sgu-wa-float:hover { transform: scale(1.07); }
.sgu-wa-float svg { width: 28px; height: 28px; }

@media print { .sgu-header-wrap, .sgu-wa-float { display: none; } }

/* Keep hero intro text left-aligned with the heading on wide page heroes. */
.sgu-page-hero > .sgu-lede { max-width: var(--wp--style--global--wide-size, 1200px) !important; padding-right: max(0px, calc(100% - 38em)); margin-top: 1rem !important; }

/* Fade/slide-in for cards as they enter the viewport (added by site.js). */
@media (prefers-reduced-motion: no-preference) {
	.sgu-reveal { opacity: 0; translate: 0 28px; transition: opacity .7s ease, translate .7s cubic-bezier(.2,.7,.2,1); }
	.sgu-reveal.is-in { opacity: 1; translate: 0 0; }
	.sgu-feature-grid .sgu-reveal:nth-child(2), .sgu-card-grid .sgu-reveal:nth-child(2) { transition-delay: .08s; }
	.sgu-feature-grid .sgu-reveal:nth-child(3), .sgu-card-grid .sgu-reveal:nth-child(3) { transition-delay: .16s; }
	.sgu-feature-grid .sgu-reveal:nth-child(4), .sgu-card-grid .sgu-reveal:nth-child(4) { transition-delay: .24s; }
	.sgu-feature-grid .sgu-reveal:nth-child(5) { transition-delay: .32s; }
}

/* Hero fills the first screen so the scroll cue sits at its bottom edge. */
@media (min-width: 782px) {
	.sgu-hero { min-height: calc(100svh - var(--sgu-header-h)); box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; padding-top: clamp(2rem, 5vh, 4rem); padding-bottom: clamp(4.5rem, 10vh, 6rem); }
	.sgu-hero > .sgu-hero__cols { width: 100%; }
}
@media (min-width: 782px) and (max-height: 860px) {
	.sgu-hero__big { font-size: clamp(4rem, 13vh, 7rem); }
	.sgu-hero__title { font-size: clamp(1.9rem, 5.4vh, 3rem); margin-top: 1.25rem !important; }
	.sgu-hero__copy > * + * { margin-top: 1.1rem !important; }
	.sgu-hero__ctas { margin-top: 1.4rem !important; }
	.sgu-fan { max-width: min(560px, 78vh); }
}

/* Chips on light steps: solid teal so they stay readable. */
.sgu-js .sgu-scrolly .sgu-sstep[data-tone="light"] .sgu-chips li { background: var(--sgu-brand); color: #fff; }

/* Compact CTA card */
.sgu-cta__card { padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.25rem, 4vw, 3rem); gap: clamp(1rem, 3vw, 2rem); border-radius: 28px; }
.sgu-cta__copy h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); margin: .9rem 0 .5rem; }
.sgu-cta__copy > .sgu-lede { margin-bottom: 1.25rem; font-size: 1.05rem; }
.sgu-cta__steps { grid-template-columns: 1fr 1fr; gap: .75rem; }
.sgu-cta__step { grid-template-columns: 1fr; gap: .6rem; padding: 1.1rem 1.15rem 1.2rem; border-radius: 18px; align-content: start; }
.sgu-cta__num { width: 34px; height: 34px; font-size: .95rem; }
.sgu-cta__body h3 { margin: 0 0 .2rem; font-size: 1.05rem; }
.sgu-cta__body > p { font-size: .88rem; }
.sgu-cta__stores { flex-direction: column; gap: .5rem; margin-top: .8rem; }
.sgu-cta__store { padding: .35rem; border-radius: 14px; width: fit-content; gap: .5rem; }
.sgu-cta__qr { width: 46px; height: 46px; padding: 2px; }
.sgu-cta__store .sgu-store { padding: .45rem .85rem .45rem .7rem; font-size: .95rem; }
.sgu-cta__buttons { flex-direction: column; align-items: flex-start; gap: .5rem; margin-top: .8rem; }
.sgu-btn { padding: .7rem 1.15rem; font-size: .95rem; }
.sgu-cta__art { min-height: 400px; }
.sgu-cta__phone { width: min(200px, 50vw); }
.sgu-cta__device { width: 120px; padding: .6rem .6rem .7rem; border-radius: 18px; font-size: .72rem; left: 4%; bottom: 6%; }
.sgu-cta__device img { height: 84px; margin: .25rem 0 .3rem; }
.sgu-cta__badge { top: 12%; padding: .55rem .85rem; font-size: .82rem; }
.sgu-cta__badge em { font-size: .74rem; }
@media (max-width: 960px) {
	.sgu-cta__art { min-height: 340px; }
}
@media (max-width: 600px) {
	.sgu-cta__steps { grid-template-columns: 1fr; }
	.sgu-cta__stores { flex-direction: row; flex-wrap: wrap; }
	.sgu-cta__buttons { flex-direction: row; flex-wrap: wrap; }
	.sgu-cta__art { min-height: 300px; }
	.sgu-cta__phone { width: 160px; }
}

/* Smoother pinned steps: put the animated layers on the GPU so swapping steps
   doesn't repaint the ring backgrounds every frame. */
.sgu-js .sgu-scrolly__stage::before, .sgu-js .sgu-scrolly__bg { will-change: opacity; transform: translateZ(0); }
.sgu-js .sgu-sstep, .sgu-scrolly__screen { will-change: transform, opacity; backface-visibility: hidden; }
.sgu-js .sgu-scrolly__phone { will-change: transform; }
.sgu-js .sgu-scrolly__screen.is-before { filter: none; opacity: .55; transition: transform .75s cubic-bezier(.65,0,.25,1), opacity .75s; }



/* Hero: shared bits + fit head and stage in the first screen */
.sgu-btn--lg { padding: .95rem 1.55rem; font-size: 1rem; }
.sgu-btn--ghost { color: #fff !important; border: 1.5px solid rgba(255,255,255,.5); background: transparent; }
.sgu-btn--ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.sgu-pill__live { width: 7px; height: 7px; border-radius: 50%; background: var(--sgu-mint); }
@media (prefers-reduced-motion: no-preference) {
	.sgu-pill__live { animation: sgu-live 2s ease-out infinite; }
	@keyframes sgu-live { 0% { box-shadow: 0 0 0 0 rgba(184,242,223,.7); } 100% { box-shadow: 0 0 0 8px rgba(184,242,223,0); } }
}

/* Tablet widths: use the hamburger menu (WordPress only switches below 600px) */
@media (min-width: 600px) and (max-width: 960px) {
	.sgu-header .wp-block-navigation__responsive-container-open { display: flex !important; }
	.sgu-header .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; }
}

/* ---------- Hero (designer artwork) ---------- */

.hxc { position: relative; isolation: isolate; overflow: hidden; color: #fff; min-height: calc(100svh - var(--sgu-header-h)); display: flex; align-items: center;
	background: linear-gradient(135deg, #017a5f 0%, #00634e 55%, #004c3d 100%); }
.hxc::before { content: ""; position: absolute; inset: 0; z-index: -1;
	background: repeating-radial-gradient(circle at 72% 50%, transparent 0 170px, rgba(255,255,255,.08) 170px 171.5px); }
.hxc__inner { max-width: 1240px; width: 100%; margin: 0 auto; padding: clamp(2rem, 5vh, 4rem) var(--sgu-pad-x); box-sizing: border-box; display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: 2rem; }
.hxc__copy > * { margin: 0; }
.hxc__pill { display: inline-flex; align-items: center; gap: .7rem; padding: .7rem 1.4rem; border: 1.5px solid rgba(255,255,255,.35); border-radius: 999px; font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: .95rem; letter-spacing: .22em; text-transform: uppercase; }
.hxc__pill span { width: 9px; height: 9px; border-radius: 50%; background: #2fe0a8; }
.hxc__title { margin-top: 2rem !important; display: grid; color: #fff; letter-spacing: -.035em; }
.hxc__big { font-size: clamp(5rem, min(11vw, 17vh), 9.5rem); line-height: .9; font-weight: 700; color: #fff; }
.hxc__mid { margin-top: .9rem; font-size: clamp(2rem, min(4vw, 6vh), 3.6rem); line-height: 1.05; font-weight: 500; color: rgba(255,255,255,.82); }
.hxc__acc { font-size: clamp(2rem, min(4vw, 6vh), 3.6rem); line-height: 1.1; font-weight: 700; color: #2fe0a8; }
.hxc__sub { margin-top: 1.75rem !important; display: flex; gap: 1.1rem; align-items: center; font-size: 1.3rem; color: rgba(255,255,255,.85); }
.hxc__sub::before { content: ""; width: 3.2rem; height: 2px; background: #2fe0a8; }
.hxc__ctas { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 2.25rem !important; }
.hxc__art { position: relative; height: min(640px, calc(100svh - var(--sgu-header-h) - 4rem)); }
.hxc__p { position: absolute; top: 50%; left: 50%; width: auto; height: 82%; }
.hxc__p--c { transform: translate(-50%, -50%); z-index: 3; }
.hxc__p--l { transform: translate(-118%, -44%) perspective(900px) rotateY(18deg) rotate(-6deg) scale(.88); z-index: 1; }
.hxc__p--r { transform: translate(18%, -44%) perspective(900px) rotateY(-18deg) rotate(6deg) scale(.88); z-index: 2; }

@media (max-width: 900px) {
	.hxc { min-height: 0; }
	.hxc__inner { grid-template-columns: 1fr; gap: 1rem; padding-top: 2.5rem; }
	.hxc__art { height: 440px; }
}
@media (max-width: 600px) {
	.hxc__pill { font-size: .78rem; padding: .55rem 1.1rem; letter-spacing: .18em; }
	.hxc__title { margin-top: 1.5rem !important; }
	.hxc__big { font-size: clamp(4.2rem, 22vw, 6rem); }
	.hxc__mid, .hxc__acc { font-size: clamp(1.7rem, 8vw, 2.2rem); }
	.hxc__sub { font-size: 1.05rem; gap: .8rem; }
	.hxc__sub::before { width: 2rem; flex: none; }
	.hxc__ctas .sgu-btn { flex: 1 1 auto; justify-content: center; }
	.hxc__art { height: 380px; }
}
@media (prefers-reduced-motion: no-preference) {
	.hxc__copy > * { animation: sgu-in .8s cubic-bezier(.2,.7,.2,1) both; }
	.hxc__copy > :nth-child(2) { animation-delay: .08s; }
	.hxc__copy > :nth-child(3) { animation-delay: .16s; }
	.hxc__copy > :nth-child(4) { animation-delay: .24s; }
	.hxc__p { animation: sgu-in 1s cubic-bezier(.2,.7,.2,1) both; animation-name: sgu-fade; }
	.hxc__p--l { animation-delay: .15s; }
	.hxc__p--r { animation-delay: .25s; }
	@keyframes sgu-fade { from { opacity: 0; } to { opacity: 1; } }
}

/* Shared entrance animation */
@keyframes sgu-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ---------- Footer in the app's teal ---------- */
.sgu-footer { background: var(--sgu-brand); border-top: 0; color: #fff; position: relative; isolation: isolate; overflow: hidden; }
.sgu-footer::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: repeating-radial-gradient(circle at 92% 10%, transparent 0 139px, rgba(255,255,255,.08) 140px 141px); }
.sgu-footer .sgu-muted { color: rgba(255,255,255,.88); }
.sgu-footer__h { color: rgba(255,255,255,.75) !important; }
.sgu-footer__links, .sgu-footer__links li { color: rgba(255,255,255,.92); }
.sgu-footer__links a { color: #fff; }
.sgu-footer__links a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.sgu-footer .sgu-store { background: #fff; color: var(--sgu-ink) !important; }
.sgu-footer .sgu-store:hover { background: var(--sgu-mint); }
.sgu-copyright { background: var(--sgu-brand-dark); color: rgba(255,255,255,.9); border-top: 1px solid rgba(255,255,255,.15); }

/* ---------- CTA card: light version (so it doesn't stack teal on the teal footer) ---------- */
.sgu-cta__card--light {
	position: relative; isolation: isolate; color: var(--sgu-ink);
	background: linear-gradient(135deg, #f4fbf8 0%, #e6f6f0 100%);
	border: 1px solid var(--sgu-line); box-shadow: 0 40px 90px -60px rgba(0, 89, 74, .45);
}
.sgu-cta__card--light::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
	background: repeating-radial-gradient(circle at 80% 50%, transparent 0 139px, rgba(1,138,107,.09) 140px 141px);
	-webkit-mask-image: radial-gradient(circle at 80% 50%, #000 25%, transparent 70%); mask-image: radial-gradient(circle at 80% 50%, #000 25%, transparent 70%); }
.sgu-cta__card--light h2 { color: var(--sgu-ink); }
.sgu-cta__card--light h2 mark.sgu-accent { color: var(--sgu-brand); }
.sgu-cta__card--light .sgu-lede { color: var(--sgu-muted); }
.sgu-cta__card--light .sgu-cta__step { background: #fff; border-color: var(--sgu-line); box-shadow: 0 16px 40px -28px rgba(0,60,45,.35); -webkit-backdrop-filter: none; backdrop-filter: none; }
.sgu-cta__card--light .sgu-cta__num { background: var(--sgu-brand); color: #fff; }
.sgu-cta__card--light .sgu-cta__body h3 { color: var(--sgu-ink); }
.sgu-cta__card--light .sgu-cta__body > p { color: var(--sgu-muted); }
.sgu-cta__card--light .sgu-cta__store { background: var(--sgu-mist); border: 1px solid var(--sgu-line); }
.sgu-cta__card--light .sgu-cta__glow { background: radial-gradient(circle, rgba(1,171,132,.18), transparent 65%); }
.sgu-btn--teal { background: var(--sgu-brand); color: #fff !important; box-shadow: 0 12px 26px -12px rgba(1,138,107,.7); }
.sgu-btn--teal:hover { background: var(--sgu-brand-dark); }
.sgu-btn--teal span { transition: transform .2s; } .sgu-btn--teal:hover span { transform: translateX(3px); }
.sgu-cta__card--light .sgu-cta__device, .sgu-cta__card--light .sgu-cta__badge { border: 1px solid var(--sgu-line); }

/* ---------- Level-style story sections ([data-story]) ---------- */
/* site.js sets --p (0..1 scroll progress through the section) and data-step. */

.sx { --p: 0; position: relative; height: calc(100svh + var(--n) * 70svh); }
.sx__stage {
	position: sticky; top: var(--sgu-header-h); height: calc(100svh - var(--sgu-header-h)); overflow: hidden;
	display: grid; grid-template-columns: 1.1fr 1fr; grid-template-rows: minmax(0, 1fr); align-items: center; gap: clamp(2rem, 5vw, 5rem);
	padding: 0 max(var(--sgu-pad-x), calc((100vw - 1240px) / 2)); box-sizing: border-box;
}
.sgu-js .admin-bar .sx__stage { top: calc(var(--sgu-header-h) + var(--wp-admin--admin-bar--height, 32px)); }
.sx__title {
	margin: 0; font-family: var(--wp--preset--font-family--display); font-weight: 700;
	font-size: clamp(2.5rem, 4.8vw, 4.4rem); line-height: 1.02; letter-spacing: -.045em;
}
.sx__title em { font-style: normal; font-weight: 500; }
.sx__eyebrow { margin: 0 0 1.25rem; font-family: var(--wp--preset--font-family--display); font-size: .78rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--sgu-brand-dark); }
.sx__rule { margin: clamp(1.5rem, 4vh, 2.5rem) 0 1.25rem; border: 0; height: 1px; background: currentColor; opacity: .25; width: 100%; }
.sx__caps { position: relative; display: grid; max-width: 26rem; margin-left: auto; margin-right: 8%; }
.sx__cap { grid-area: 1 / 1; margin: 0; font-size: .95rem; line-height: 1.55; opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.sx[data-step="0"] .sx__cap[data-i="0"], .sx[data-step="1"] .sx__cap[data-i="1"], .sx[data-step="2"] .sx__cap[data-i="2"], .sx[data-step="3"] .sx__cap[data-i="3"],
.sx:not([data-step]) .sx__cap[data-i="0"] { opacity: 1; transform: none; }
/* the previous caption stays faintly visible above, like Level */
.sx[data-step="1"] .sx__cap[data-i="0"], .sx[data-step="2"] .sx__cap[data-i="1"], .sx[data-step="3"] .sx__cap[data-i="2"] { opacity: 0; transform: translateY(-12px); }
.sx__caps--rich .sx__cap strong { display: block; font-family: var(--wp--preset--font-family--display); font-size: 1.15rem; font-weight: 600; margin-bottom: .35rem; letter-spacing: -.01em; }
.sx__caps--rich .sx__cap span { display: block; }
.sx__caps--rich { min-height: 7.5rem; align-items: start; }
.sx--light .sx[data-step] .sx__caps--rich .sx__cap { transform: none; }
.sx__caps--rich .sx__cap { transform: translateY(14px); }
.sx[data-step="1"] .sx__caps--rich .sx__cap[data-i="0"], .sx[data-step="2"] .sx__caps--rich .sx__cap[data-i="1"], .sx[data-step="3"] .sx__caps--rich .sx__cap[data-i="2"] { opacity: 0; transform: translateY(-14px); }
.sx__visual { position: relative; height: 100%; display: grid; place-items: center; }
.sx__phone { width: auto; height: min(74%, 620px); }

/* Dark: "Designed to fit into your life" */
.sx--dark { background: #04130f; color: #fff; }
.sx--dark .sx__stage { grid-template-columns: 1fr 1fr; }
.sx--dark .sx__copy { text-align: right; }
.sx--dark .sx__title { color: #f1f5f3; }
.sx--dark .sx__title em { color: var(--sgu-mint); }
.sx--dark .sx__caps { margin: 0 0 0 auto; max-width: 22rem; text-align: left; color: rgba(255,255,255,.72); }
.sx--dark .sx__rule { opacity: .35; }
.sx--dark .sx__glow { position: absolute; width: 90%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(1,171,132,.45), rgba(1,171,132,0) 62%); opacity: calc(.45 + var(--p) * .55); transform: scale(calc(.85 + var(--p) * .3)); }
.sx--dark .sx__phone {
	transform: translateY(calc((.5 - var(--p)) * 90px)) rotate(calc(-10deg + var(--p) * 12deg)) scale(calc(1.12 - var(--p) * .16));
	box-shadow: 0 0 0 1.5px #2a2c2c, 0 60px 140px -30px rgba(1,171,132,.55);
}
.sx--dark .sx__visual { -webkit-mask-image: radial-gradient(75% 80% at 50% 50%, #000 60%, transparent 100%); mask-image: radial-gradient(75% 80% at 50% 50%, #000 60%, transparent 100%); }
.sx--dark .sx__title { opacity: calc(.35 + var(--p) * 2); transform: translateY(calc((1 - min(var(--p) * 3, 1)) * 30px)); }

/* Light: security */
.sx--light { background: #fff; color: var(--sgu-ink); border-top: 1px solid var(--sgu-line); }
.sx--light .sx__title { color: var(--sgu-ink); }
.sx--light .sx__title em { color: var(--sgu-brand-dark); }
.sx--light .sx__caps { margin: 0; max-width: 30rem; color: var(--sgu-muted); }
.sx--light .sx__caps strong { color: var(--sgu-ink); }
.sx__ticks { list-style: none; display: flex; gap: .4rem; margin: 2rem 0 0; padding: 0; }
.sx__ticks li { width: 28px; height: 3px; border-radius: 3px; background: var(--sgu-line); transition: background-color .3s, width .3s; }
.sx[data-step="0"] .sx__ticks li[data-i="0"], .sx[data-step="1"] .sx__ticks li[data-i="1"], .sx[data-step="2"] .sx__ticks li[data-i="2"], .sx[data-step="3"] .sx__ticks li[data-i="3"],
.sx:not([data-step]) .sx__ticks li[data-i="0"] { background: var(--sgu-brand); width: 48px; }
.sx--light .sx__visual { background: radial-gradient(60% 55% at 50% 52%, #eaf7f2 0%, transparent 70%); }
.sx__orbit { position: absolute; width: min(88%, 560px); aspect-ratio: 1; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--sgu-brand) 35%, white); transform: rotate(calc(var(--p) * 140deg)); }
.sx__orbit::before, .sx__orbit::after { content: ""; position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--sgu-brand); box-shadow: 0 0 0 6px rgba(1,171,132,.15); }
.sx__orbit::before { top: -6px; left: calc(50% - 6px); }
.sx__orbit::after { bottom: 14%; right: 4%; background: var(--sgu-mint); }
.sx--light .sx__phone { transform: rotate(calc(4deg - var(--p) * 8deg)) translateY(calc((.5 - var(--p)) * 40px)); box-shadow: 0 0 0 1.5px #2a2c2c, 0 50px 100px -40px rgba(0,60,45,.45); }
.sx__screen { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transition: opacity .6s ease; }
.sx[data-step="0"] .sx__screen[data-i="0"], .sx[data-step="1"] .sx__screen[data-i="1"], .sx[data-step="2"] .sx__screen[data-i="2"], .sx[data-step="3"] .sx__screen[data-i="3"],
.sx:not([data-step]) .sx__screen[data-i="0"] { opacity: 1; }
.sx__badge { position: absolute; left: 6%; bottom: 18%; display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem .7rem .7rem; border-radius: 16px; background: #fff; border: 1px solid var(--sgu-line); box-shadow: 0 24px 50px -24px rgba(0,60,45,.4); font-family: var(--wp--preset--font-family--display); font-size: .8rem; color: var(--sgu-muted); transform: translateY(calc((.5 - var(--p)) * -60px)); }
.sx__badge svg { width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: var(--sgu-brand); color: #fff; box-sizing: border-box; }
.sx__badge b { display: block; color: var(--sgu-ink); font-size: .92rem; }

@media (max-width: 860px) {
	.sx { height: calc(100svh + var(--n) * 60svh); }
	.sx__stage, .sx--dark .sx__stage { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 1rem; align-content: start; padding-top: 2rem; padding-bottom: 1rem; }
	.sx--dark .sx__copy { order: -1; text-align: left; }
	.sx--dark .sx__caps { margin: 0; }
	.sx__title { font-size: clamp(2.3rem, 10vw, 3.2rem); }
	.sx__rule { margin: 1rem 0 .9rem; }
	.sx__caps { margin: 0; }
	.sx__caps--rich { min-height: 8.5rem; }
	.sx__ticks { margin-top: .75rem; }
	.sx__phone { height: min(100%, 46svh); }
	.sx__badge { left: 2%; bottom: 8%; font-size: .7rem; }
}
@media (prefers-reduced-motion: reduce) {
	.sx--dark .sx__phone, .sx--light .sx__phone, .sx__orbit, .sx__badge, .sx--dark .sx__title { transform: none !important; }
	.sx--dark .sx__title { opacity: 1; }
}

/* The "Owner only · Master key" badge belongs to the key steps (1 and 3) */
.sx__badge { transition: opacity .4s ease; opacity: 0; }
.sx[data-step="0"] .sx__badge, .sx[data-step="2"] .sx__badge, .sx:not([data-step]) .sx__badge { opacity: 1; }

/* ---------- Story sections, non-pinned version (.sx--static) ---------- */
.sx--static { height: auto; }
.sx--static .sx__stage { position: relative; top: auto; height: auto; min-height: 0; overflow: visible; grid-template-rows: auto; padding-top: var(--sgu-section-y); padding-bottom: var(--sgu-section-y); }
.sx--static .sx__visual { height: clamp(420px, 62vh, 620px); }
.sx--static .sx__phone { height: 88%; }
/* all captions visible, as a list */
.sx--static .sx__caps { display: grid; gap: 1rem; }
.sx--static .sx__cap { grid-area: auto !important; opacity: 1 !important; transform: none !important; }
.sx--dark.sx--static .sx__cap { padding-left: 1.1rem; border-left: 2px solid rgba(184,242,223,.45); }
.sx--light.sx--static .sx__caps--rich { grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; max-width: 36rem; min-height: 0; }
.sx--light.sx--static .sx__caps--rich .sx__cap strong { font-size: 1.02rem; }
.sx--light.sx--static .sx__caps--rich .sx__cap span { font-size: .92rem; }
.sx--light.sx--static .sx__caps--rich .sx__cap::before { content: ""; display: block; width: 28px; height: 3px; border-radius: 3px; background: var(--sgu-brand); margin-bottom: .75rem; }
.sx--static .sx__ticks { display: none; }
.sx--light.sx--static .sx__screen { opacity: 0 !important; }
.sx--light.sx--static .sx__screen[data-i="0"] { opacity: 1 !important; }
.sx--dark.sx--static .sx__title { opacity: 1; transform: none; }
@media (max-width: 860px) {
	.sx--static .sx__stage { padding-top: 3.5rem; padding-bottom: 3.5rem; gap: 2rem; }
	.sx--static .sx__visual { height: 420px; }
	.sx--light.sx--static .sx__caps--rich { grid-template-columns: 1fr; }
}

/* CTA art: phone on the right, floating cards in the free space on the left,
   so nothing covers the app screenshot. */
.sgu-cta__art { justify-items: end; padding-right: 4%; }
.sgu-cta__glow { left: auto; right: 0; }
.sgu-cta__phone { transform: rotate(4deg); }
.sgu-cta__badge { right: auto; left: 0; top: 18%; }
.sgu-cta__device { left: 4%; bottom: 10%; }
@media (max-width: 960px) {
	.sgu-cta__art { justify-items: end; padding-right: 8%; }
}
@media (max-width: 600px) {
	.sgu-cta__art { padding-right: 2%; }
	.sgu-cta__phone { width: 150px; }
	.sgu-cta__badge { top: 10%; }
	.sgu-cta__device { left: 0; bottom: 8%; width: 112px; }
}

/* "Designed to fit into your life": light version, so the dark hero isn't
   followed by another dark block. */
.sx--fit { background: linear-gradient(180deg, #fff 0%, var(--sgu-mist) 100%); color: var(--sgu-ink); }
.sx--fit .sx__stage { grid-template-columns: 1fr 1fr; }
.sx--fit .sx__copy { text-align: right; }
.sx--fit .sx__title { color: var(--sgu-ink); }
.sx--fit .sx__title em { color: var(--sgu-brand); }
.sx--fit .sx__rule { opacity: .18; }
.sx--fit .sx__caps { margin: 0 0 0 auto; max-width: 22rem; text-align: left; color: var(--sgu-muted); }
.sx--fit.sx--static .sx__cap { padding-left: 1.1rem; border-left: 2px solid var(--sgu-brand); }
.sx--fit .sx__glow { position: absolute; width: 85%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(1,171,132,.20), rgba(1,171,132,0) 62%); transform: scale(calc(.9 + var(--p) * .2)); }
.sx--fit .sx__phone {
	transform: translateY(calc((.5 - var(--p)) * 70px)) rotate(calc(-8deg + var(--p) * 10deg));
	box-shadow: 0 0 0 1.5px #2a2c2c, 0 50px 100px -40px rgba(0,60,45,.45);
}
@media (max-width: 860px) {
	.sx--fit .sx__stage { grid-template-columns: 1fr; }
	.sx--fit .sx__copy { order: -1; text-align: left; }
	.sx--fit .sx__caps { margin: 0; }
}
@media (prefers-reduced-motion: reduce) { .sx--fit .sx__phone { transform: none !important; } }

/* Security section: phone on the left, text on the right */
@media (min-width: 861px) {
	.sx--flip .sx__stage { grid-template-columns: 1fr 1.1fr; }
	.sx--flip .sx__visual { order: -1; }
}

/* ---------- Device showcase / what's in the box (.sd) ---------- */
.sd { --p: 0; position: relative; overflow: hidden; background: linear-gradient(180deg, var(--sgu-mist), #fff); border-top: 1px solid var(--sgu-line); }
.sd__inner { max-width: 1240px; margin: 0 auto; padding: var(--sgu-section-y) var(--sgu-pad-x); display: grid; grid-template-columns: 1fr 1.05fr; align-items: center; gap: clamp(2rem, 6vw, 6rem); box-sizing: border-box; }
.sd__visual { position: relative; display: grid; place-items: center; min-height: clamp(380px, 56vh, 560px); }
.sd__halo { position: absolute; width: 82%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(1,171,132,.16), transparent 62%); }
.sd__halo::after { content: ""; position: absolute; inset: 8%; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--sgu-brand) 30%, white); transform: rotate(calc(var(--p) * 120deg)); }
.sd__device { position: relative; width: min(300px, 62vw); transform: perspective(900px) rotateY(calc(-22deg + var(--p) * 30deg)) rotate(calc(-4deg + var(--p) * 6deg)) translateY(calc((.5 - var(--p)) * 40px)); transition: transform .1s linear; }
.sd__device svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 40px 50px rgba(0,60,45,.18)); }
.sd__tag { position: absolute; display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .8rem; border-radius: 999px; background: #fff; border: 1px solid var(--sgu-line); box-shadow: 0 14px 30px -18px rgba(0,60,45,.4); font-family: var(--wp--preset--font-family--display); font-size: .8rem; font-weight: 600; color: var(--sgu-ink); white-space: nowrap; }
.sd__tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sgu-brand); }
.sd__tag--a { left: 2%; top: 16%; }
.sd__tag--b { right: 0; top: 46%; }
.sd__tag--c { left: 6%; bottom: 16%; }
.sd__tag--c::before { background: #22c55e; }
.sd__copy .sx__title { color: var(--sgu-ink); }
.sd__copy .sx__title em { font-style: normal; font-weight: 500; color: var(--sgu-brand-dark); }
.sd__copy .sx__rule { opacity: .18; }
.sd__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.sd__list li { display: grid; grid-template-columns: 48px 1fr; gap: 1rem; align-items: start; }
.sd__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: #fff; border: 1px solid var(--sgu-line); color: var(--sgu-brand-dark); box-shadow: 0 10px 24px -18px rgba(0,60,45,.4); }
.sd__icon svg { width: 24px; height: 24px; }
.sd__list strong { display: block; font-family: var(--wp--preset--font-family--display); font-size: 1.05rem; color: var(--sgu-ink); margin: .2rem 0 .15rem; }
.sd__list li > span:last-child { color: var(--sgu-muted); font-size: .95rem; line-height: 1.5; }
.sd__cta { margin-top: 2rem; }
@media (prefers-reduced-motion: no-preference) {
	.sd .dv-led { animation: sd-led 2.2s ease-in-out infinite; }
	@keyframes sd-led { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
}
@media (prefers-reduced-motion: reduce) { .sd__device, .sd__halo::after { transform: none !important; } }
@media (max-width: 860px) {
	.sd__inner { grid-template-columns: 1fr; padding-top: 3.5rem; padding-bottom: 3.5rem; }
	.sd__visual { min-height: 400px; }
	.sd__device { width: 220px; }
	.sd__tag { font-size: .7rem; padding: .35rem .65rem; }
}

/* ---------- Hero: product-led (.hn) ---------- */
.hn { position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(70% 90% at 78% 55%, #e4f6ef 0%, rgba(228,246,239,0) 60%), linear-gradient(180deg, #ffffff 0%, #f4faf7 100%); border-bottom: 1px solid var(--sgu-line); }
.hn::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: repeating-radial-gradient(circle at 76% 55%, transparent 0 139px, rgba(1,138,107,.07) 140px 141px);
	-webkit-mask-image: radial-gradient(circle at 76% 55%, #000 25%, transparent 65%); mask-image: radial-gradient(circle at 76% 55%, #000 25%, transparent 65%); }
.hn__inner { max-width: 1240px; margin: 0 auto; min-height: calc(100svh - var(--sgu-header-h)); padding: clamp(2rem, 5vh, 4rem) var(--sgu-pad-x); box-sizing: border-box; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(1.5rem, 4vw, 4rem); }
.hn__copy > * { margin: 0; }
.hn__eyebrow { display: inline-flex; align-items: center; gap: .6rem; padding: .5rem 1rem; border-radius: 999px; background: #fff; border: 1px solid var(--sgu-line); font-family: var(--wp--preset--font-family--display); font-size: .78rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--sgu-deep); box-shadow: 0 8px 24px -16px rgba(0,60,45,.35); }
.hn__eyebrow span { width: 8px; height: 8px; border-radius: 50%; background: var(--sgu-brand); box-shadow: 0 0 0 4px rgba(1,171,132,.18); }
.hn__title { display: grid; margin-top: clamp(1.25rem, 3vh, 2rem) !important; color: var(--sgu-ink); }
.hn__big { font-size: clamp(4.5rem, min(10vw, 15vh), 9rem); line-height: .88; font-weight: 700; letter-spacing: -.055em; color: var(--sgu-ink); }
.hn__mid { margin-top: .6rem; font-size: clamp(1.7rem, min(3.4vw, 5vh), 3rem); line-height: 1.1; font-weight: 500; letter-spacing: -.03em; color: #3c4a45; }
.hn__mid em { font-style: normal; font-weight: 700; color: var(--sgu-brand); }
.hn__line { display: flex; align-items: center; gap: 1rem; margin-top: clamp(1rem, 2.6vh, 1.6rem) !important; font-size: clamp(1.02rem, 1.4vw, 1.2rem); color: var(--sgu-muted); }
.hn__line::before { content: ""; width: 2.6rem; height: 2px; background: var(--sgu-brand); flex: none; }
.hn__ctas { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: clamp(1.5rem, 3.6vh, 2.25rem) !important; }
.hn__ghost { color: var(--sgu-ink) !important; background: #fff; border: 1.5px solid var(--sgu-line); }
.hn__ghost:hover { border-color: var(--sgu-brand); }
.hn__app { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.4rem !important; font-size: .88rem; color: var(--sgu-muted); }
.hn__app a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--sgu-ink); color: #fff; transition: transform .2s; }
.hn__app a:hover { transform: translateY(-2px); }
.hn__app a svg { width: 17px; height: 17px; }
.hn__app span { margin-left: .3rem; } .hn__app strong { color: var(--sgu-ink); }

/* Art: device + phone */
.hn__art { position: relative; height: min(620px, calc(100svh - var(--sgu-header-h) - 4rem)); min-height: 440px; }
.hn__halo { position: absolute; left: 50%; top: 50%; width: 88%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(1,171,132,.18) 0%, rgba(1,171,132,0) 62%); }
.hn__device { position: absolute; left: 4%; top: 50%; width: 46%; max-width: 280px; transform: translateY(-46%) perspective(900px) rotateY(18deg) rotate(-5deg); }
.hn__device svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 40px 50px rgba(0,60,45,.22)); }
.hn__phone { position: absolute; right: 6%; top: 50%; width: auto; height: 88%; transform: translateY(-50%) rotate(5deg); box-shadow: 0 0 0 1.5px #2a2c2c, 0 50px 90px -30px rgba(0,60,45,.5); }
.hn__waves { position: absolute; left: 44%; top: 20%; width: 13%; transform: rotate(45deg); overflow: visible; }
.hn__waves path { fill: none; stroke: var(--sgu-brand); stroke-width: 5; stroke-linecap: round; opacity: .2; }
.hn__tap { position: absolute; left: 50%; top: 53.5%; width: 40%; aspect-ratio: 1; margin: -20% 0 0 -20%; border-radius: 50%; border: 3px solid var(--sgu-brand); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
	.hn__copy > * { animation: sgu-in .8s cubic-bezier(.2,.7,.2,1) both; }
	.hn__copy > :nth-child(2) { animation-delay: .07s; } .hn__copy > :nth-child(3) { animation-delay: .14s; } .hn__copy > :nth-child(4) { animation-delay: .21s; } .hn__copy > :nth-child(5) { animation-delay: .28s; }
	.hn__device { animation: hn-in-l 1s .2s cubic-bezier(.2,.7,.2,1) both, hn-float 7s 1.2s ease-in-out infinite; }
	.hn__phone { animation: hn-in-r 1s .32s cubic-bezier(.2,.7,.2,1) both; }
	.hn__waves path { animation: hn-wave 2.4s ease-in-out infinite; }
	.hn__waves path:nth-child(2) { animation-delay: .25s; } .hn__waves path:nth-child(3) { animation-delay: .5s; }
	.hn__tap { animation: hn-tap 4.8s 1.6s infinite; }
	.dv-led { animation: sd-led 2.2s ease-in-out infinite; }
}
@keyframes hn-in-l { from { opacity: 0; translate: -40px 20px; } to { opacity: 1; translate: 0 0; } }
@keyframes hn-in-r { from { opacity: 0; translate: 40px 30px; } to { opacity: 1; translate: 0 0; } }
@keyframes hn-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes hn-wave { 0%, 100% { opacity: .15; } 40% { opacity: 1; } }
@keyframes hn-tap { 0% { opacity: 0; transform: scale(.7); } 6% { opacity: 1; } 18%, 100% { opacity: 0; transform: scale(1.6); } }
@keyframes sd-led { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (max-width: 900px) {
	.hn__inner { grid-template-columns: 1fr; min-height: 0; padding-top: 2.5rem; padding-bottom: 2rem; }
	.hn__art { height: 420px; min-height: 0; }
	.hn__phone { height: 92%; right: 8%; }
	.hn__device { width: 44%; left: 6%; }
}
@media (max-width: 600px) {
	.hn__big { font-size: clamp(4rem, 22vw, 5.5rem); }
	.hn__mid { font-size: 1.6rem; }
	.hn__line { font-size: 1rem; gap: .7rem; } .hn__line::before { width: 1.6rem; }
	.hn__ctas .sgu-btn { flex: 1 1 auto; justify-content: center; }
	.hn__art { height: 360px; }
	.hn__waves { left: 42%; top: 16%; width: 16%; }
}
.hn__mid em { white-space: nowrap; }
.hn__waves { left: 38%; top: 12%; width: 12%; z-index: 3; }
@media (max-width: 600px) { .hn__waves { left: 36%; top: 8%; width: 15%; } }

/* Device drawing sizing */
.hn__device { width: 40%; max-width: 250px; left: 6%; transform: translateY(-46%) rotate(-6deg); }
.sd__device { width: min(260px, 56vw); transform: rotate(calc(-8deg + var(--p) * 10deg)) translateY(calc((.5 - var(--p)) * 40px)); }
.hx__hero-device { width: 24%; max-width: 220px; transform: translateY(-50%) rotate(6deg); }
.hn__device svg, .sd__device svg, .hx__hero-device svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 34px 34px rgba(0,60,45,.2)); }
@media (max-width: 860px) { .sd__device { width: 200px; } }
@media (max-width: 600px) { .hx__hero-device { width: 120px; transform: translateX(50%) rotate(6deg); } }

/* Tap ripple centred exactly on the app's Unlock button
   (button centre = 56.5% down the phone screen, diameter = 38.5% of its width) */
.hn__tap, .hx__tap, .ht__tap {
	left: 50% !important; top: 56.5% !important; width: 38.5% !important;
	margin: -19.25% 0 0 -19.25% !important; border-width: 3px !important;
}
@keyframes hn-tap { 0% { opacity: 0; transform: scale(1); } 6% { opacity: 1; } 18%, 100% { opacity: 0; transform: scale(1.55); } }

/* Hero art v2: platform, device in front, visible connection */
.hn__podium { position: absolute; left: 50%; bottom: 4%; width: 92%; height: 15%; transform: translateX(-50%); border-radius: 50%;
	background: radial-gradient(closest-side, #ffffff 0%, #eaf6f1 55%, rgba(234,246,241,0) 100%); box-shadow: 0 30px 60px -40px rgba(0,60,45,.35); }
.hn__phone { right: 8%; height: 84%; top: 46%; z-index: 2; }
.hn__device { left: 2% !important; top: auto !important; bottom: 7%; width: 36% !important; max-width: 230px !important; z-index: 4; transform: rotate(-7deg) !important; }
.hn__device svg { filter: drop-shadow(0 24px 30px rgba(0,60,45,.22)) !important; }
.hn__link { position: absolute; left: 14%; top: 12%; width: 56%; height: 44%; z-index: 3; overflow: visible; }
.hn__link path { fill: none; stroke: var(--sgu-brand); stroke-width: 2.5; stroke-dasharray: 2 10; stroke-linecap: round; opacity: .55; vector-effect: non-scaling-stroke; }
.hn__sig { fill: var(--sgu-brand); filter: drop-shadow(0 0 6px rgba(1,171,132,.9)); }
.hn__chip { position: absolute; z-index: 5; left: 18%; top: 40%; display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .85rem; border-radius: 999px; background: #fff; border: 1px solid var(--sgu-line); box-shadow: 0 14px 30px -14px rgba(0,60,45,.45); font-family: var(--wp--preset--font-family--display); font-size: .8rem; font-weight: 600; color: var(--sgu-deep); }
.hn__chip span { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.2); }
.hn__waves { display: none; }
@media (prefers-reduced-motion: no-preference) {
	.hn__chip { animation: sgu-in .7s 1s both, hn-float 6s 1.7s ease-in-out infinite; }
	.hn__chip span { animation: sgu-ping 2s ease-out infinite; }
	.hn__device { animation: hn-in-l 1s .2s cubic-bezier(.2,.7,.2,1) both !important; }
}
@keyframes sgu-ping { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.55); } 100% { box-shadow: 0 0 0 9px rgba(34,197,94,0); } }
@media (max-width: 900px) { .hn__device { width: 34% !important; } .hn__chip { left: 10%; top: 36%; } }
@media (max-width: 600px) { .hn__chip { font-size: .7rem; padding: .35rem .65rem; left: 4%; top: 30%; } .hn__link { left: 10%; top: 8%; } }
.hn__device { width: 39% !important; max-width: 250px !important; bottom: 6%; }
.hn__chip { left: 15%; top: 43%; }
.hn__chip { left: 3%; top: 35%; }
@media (max-width: 600px) { .hn__chip { left: 2%; top: 26%; } }
.hn__tap { display: none !important; }

/* ---------- Realistic phone mockup ---------- */
.sgu-phone {
	overflow: visible; isolation: isolate; background: #0d0e10;
	border: clamp(6px, 3.2%, 11px) solid #0d0e10; border-radius: 17% / 8%;
	box-shadow:
		0 0 0 1px #3d4146, 0 0 0 2.5px #b8bdc3, 0 0 0 3.5px #6b7076, 0 0 0 4.5px #2a2d31,
		0 50px 90px -30px rgba(0,40,30,.5), 0 18px 36px -18px rgba(0,0,0,.35) !important;
}
.sgu-phone img { border-radius: 14% / 6.6%; }
/* status bar with Dynamic Island */
.sgu-phone::before {
	content: ""; position: absolute; left: 0; right: 0; top: 0; width: auto; height: auto; aspect-ratio: 390 / 59;
	transform: none; border-radius: 0; z-index: 5; pointer-events: none;
	background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20390%2059%22%3E%3Ctext%20x%3D%2254%22%20y%3D%2238%22%20font-family%3D%22-apple-system%2CHelvetica%2CArial%2Csans-serif%22%20font-size%3D%2217%22%20font-weight%3D%22600%22%20fill%3D%22%23111%22%3E9%3A41%3C/text%3E%3Crect%20x%3D%22132%22%20y%3D%2212%22%20width%3D%22126%22%20height%3D%2236%22%20rx%3D%2218%22%20fill%3D%22%23000%22/%3E%3Cg%20fill%3D%22%23111%22%3E%3Crect%20x%3D%22283%22%20y%3D%2231%22%20width%3D%223.5%22%20height%3D%226%22%20rx%3D%221%22/%3E%3Crect%20x%3D%22289%22%20y%3D%2228%22%20width%3D%223.5%22%20height%3D%229%22%20rx%3D%221%22/%3E%3Crect%20x%3D%22295%22%20y%3D%2225%22%20width%3D%223.5%22%20height%3D%2212%22%20rx%3D%221%22/%3E%3Crect%20x%3D%22301%22%20y%3D%2222%22%20width%3D%223.5%22%20height%3D%2215%22%20rx%3D%221%22/%3E%3C/g%3E%3Cpath%20d%3D%22M318%2027.5a11%2011%200%200%201%2015%200M321%2030.5a6.5%206.5%200%200%201%209%200%22%20fill%3D%22none%22%20stroke%3D%22%23111%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22/%3E%3Ccircle%20cx%3D%22325.5%22%20cy%3D%2234%22%20r%3D%221.8%22%20fill%3D%22%23111%22/%3E%3Crect%20x%3D%22342%22%20y%3D%2224%22%20width%3D%2225%22%20height%3D%2212%22%20rx%3D%223.5%22%20fill%3D%22none%22%20stroke%3D%22%23111%22%20stroke-opacity%3D%22.45%22%20stroke-width%3D%221.2%22/%3E%3Crect%20x%3D%22344%22%20y%3D%2226%22%20width%3D%2219%22%20height%3D%228%22%20rx%3D%222%22%20fill%3D%22%23111%22/%3E%3Crect%20x%3D%22368.5%22%20y%3D%2228%22%20width%3D%221.8%22%20height%3D%224%22%20rx%3D%22.9%22%20fill%3D%22%23111%22%20fill-opacity%3D%22.45%22/%3E%3C/svg%3E") top center / 100% auto no-repeat;
}
.sgu-phone:has(img[src*="screen-pairing"])::before,
.sgu-scrolly__phone:has(.sgu-scrolly__screen.is-active[src*="screen-pairing"])::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20390%2059%22%3E%3Ctext%20x%3D%2254%22%20y%3D%2238%22%20font-family%3D%22-apple-system%2CHelvetica%2CArial%2Csans-serif%22%20font-size%3D%2217%22%20font-weight%3D%22600%22%20fill%3D%22%23fff%22%3E9%3A41%3C/text%3E%3Crect%20x%3D%22132%22%20y%3D%2212%22%20width%3D%22126%22%20height%3D%2236%22%20rx%3D%2218%22%20fill%3D%22%23000%22/%3E%3Cg%20fill%3D%22%23fff%22%3E%3Crect%20x%3D%22283%22%20y%3D%2231%22%20width%3D%223.5%22%20height%3D%226%22%20rx%3D%221%22/%3E%3Crect%20x%3D%22289%22%20y%3D%2228%22%20width%3D%223.5%22%20height%3D%229%22%20rx%3D%221%22/%3E%3Crect%20x%3D%22295%22%20y%3D%2225%22%20width%3D%223.5%22%20height%3D%2212%22%20rx%3D%221%22/%3E%3Crect%20x%3D%22301%22%20y%3D%2222%22%20width%3D%223.5%22%20height%3D%2215%22%20rx%3D%221%22/%3E%3C/g%3E%3Cpath%20d%3D%22M318%2027.5a11%2011%200%200%201%2015%200M321%2030.5a6.5%206.5%200%200%201%209%200%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22/%3E%3Ccircle%20cx%3D%22325.5%22%20cy%3D%2234%22%20r%3D%221.8%22%20fill%3D%22%23fff%22/%3E%3Crect%20x%3D%22342%22%20y%3D%2224%22%20width%3D%2225%22%20height%3D%2212%22%20rx%3D%223.5%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.45%22%20stroke-width%3D%221.2%22/%3E%3Crect%20x%3D%22344%22%20y%3D%2226%22%20width%3D%2219%22%20height%3D%228%22%20rx%3D%222%22%20fill%3D%22%23fff%22/%3E%3Crect%20x%3D%22368.5%22%20y%3D%2228%22%20width%3D%221.8%22%20height%3D%224%22%20rx%3D%22.9%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.45%22/%3E%3C/svg%3E"); }
.sgu-scrolly__phone:has(.sgu-scrolly__screen.is-active:not([src*="screen-pairing"]))::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20390%2059%22%3E%3Ctext%20x%3D%2254%22%20y%3D%2238%22%20font-family%3D%22-apple-system%2CHelvetica%2CArial%2Csans-serif%22%20font-size%3D%2217%22%20font-weight%3D%22600%22%20fill%3D%22%23111%22%3E9%3A41%3C/text%3E%3Crect%20x%3D%22132%22%20y%3D%2212%22%20width%3D%22126%22%20height%3D%2236%22%20rx%3D%2218%22%20fill%3D%22%23000%22/%3E%3Cg%20fill%3D%22%23111%22%3E%3Crect%20x%3D%22283%22%20y%3D%2231%22%20width%3D%223.5%22%20height%3D%226%22%20rx%3D%221%22/%3E%3Crect%20x%3D%22289%22%20y%3D%2228%22%20width%3D%223.5%22%20height%3D%229%22%20rx%3D%221%22/%3E%3Crect%20x%3D%22295%22%20y%3D%2225%22%20width%3D%223.5%22%20height%3D%2212%22%20rx%3D%221%22/%3E%3Crect%20x%3D%22301%22%20y%3D%2222%22%20width%3D%223.5%22%20height%3D%2215%22%20rx%3D%221%22/%3E%3C/g%3E%3Cpath%20d%3D%22M318%2027.5a11%2011%200%200%201%2015%200M321%2030.5a6.5%206.5%200%200%201%209%200%22%20fill%3D%22none%22%20stroke%3D%22%23111%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22/%3E%3Ccircle%20cx%3D%22325.5%22%20cy%3D%2234%22%20r%3D%221.8%22%20fill%3D%22%23111%22/%3E%3Crect%20x%3D%22342%22%20y%3D%2224%22%20width%3D%2225%22%20height%3D%2212%22%20rx%3D%223.5%22%20fill%3D%22none%22%20stroke%3D%22%23111%22%20stroke-opacity%3D%22.45%22%20stroke-width%3D%221.2%22/%3E%3Crect%20x%3D%22344%22%20y%3D%2226%22%20width%3D%2219%22%20height%3D%228%22%20rx%3D%222%22%20fill%3D%22%23111%22/%3E%3Crect%20x%3D%22368.5%22%20y%3D%2228%22%20width%3D%221.8%22%20height%3D%224%22%20rx%3D%22.9%22%20fill%3D%22%23111%22%20fill-opacity%3D%22.45%22/%3E%3C/svg%3E"); }
/* side buttons (action + volume on the left, power on the right) */
.sgu-phone::after {
	content: ""; position: absolute; z-index: -1; pointer-events: none; top: 0; bottom: 0;
	left: calc(-1 * clamp(6px, 3.2%, 11px) - 6px); right: calc(-1 * clamp(6px, 3.2%, 11px) - 6px);
	background:
		linear-gradient(90deg, #6b7076, #c4c9ce) left 0 top 17% / 4px 6% no-repeat,
		linear-gradient(90deg, #6b7076, #c4c9ce) left 0 top 26% / 4px 10% no-repeat,
		linear-gradient(90deg, #6b7076, #c4c9ce) left 0 top 38% / 4px 10% no-repeat,
		linear-gradient(90deg, #c4c9ce, #6b7076) right 0 top 30% / 4px 15% no-repeat;
	border-radius: 2px;
}
/* phones whose screens slide/crossfade inside must clip their content */
.sgu-scrolly__phone, .sx__phone { overflow: hidden; }
.sgu-scrolly__phone::after, .sx__phone::after { display: none; }
.sgu-scrolly__screen, .sx__screen { border-radius: 0 !important; }
.sgu-scrolly__phone, .sx__phone { border-radius: 17% / 8%; }

/* ---------- How it works: smoother step changes ---------- */
/* Screens crossfade in place (no slide/shrink, so no visible seams). */
.sgu-scrolly__screen {
	transform: scale(1.035) !important; opacity: 0; filter: none !important;
	transition: opacity .55s ease, transform .8s cubic-bezier(.2,.7,.2,1) !important;
	will-change: opacity, transform;
}
.sgu-scrolly__screen.is-active { opacity: 1; transform: scale(1) !important; z-index: 2; }
.sgu-scrolly__screen.is-before { opacity: 0; transform: scale(.985) !important; z-index: 1; }
/* Text: the outgoing step clears quickly, the incoming one follows. */
.sgu-js .sgu-sstep {
	transform: translateY(18px);
	transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s !important;
}
.sgu-js .sgu-sstep.is-before { transform: translateY(-14px); }
.sgu-js .sgu-sstep.is-active {
	opacity: 1; visibility: visible; transform: none;
	transition: opacity .5s ease .2s, transform .6s cubic-bezier(.2,.7,.2,1) .2s, visibility 0s !important;
}
/* Background tone and phone tilt ease together with the content. */
.sgu-js .sgu-scrolly__bg { transition: opacity .6s ease !important; }
.sgu-js .sgu-scrolly__phone { transition: transform .9s cubic-bezier(.2,.7,.2,1) !important; }
@media (prefers-reduced-motion: reduce) {
	.sgu-scrolly__screen, .sgu-js .sgu-sstep, .sgu-js .sgu-sstep.is-active { transition: none !important; }
}

/* ---------- Get the device page (.og) ---------- */
.og__hero { max-width: 1240px; margin: 0 auto; padding: clamp(2.5rem, 6vw, 5rem) var(--sgu-pad-x) clamp(2rem, 4vw, 3rem); display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; box-sizing: border-box; }
.og { background: linear-gradient(180deg, var(--sgu-mist) 0, #fff 640px); }
.og__title { margin: 0; font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: 1.02; letter-spacing: -.045em; color: var(--sgu-ink); }
.og__title em { font-style: normal; color: var(--sgu-brand); }
.og__sub { margin: 1.1rem 0 1.75rem; font-size: 1.15rem; line-height: 1.55; color: var(--sgu-muted); max-width: 32rem; }
.og__ctas { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; }
.og__visual { position: relative; display: grid; place-items: center; min-height: 460px; }
.og__device { position: relative; width: min(270px, 60vw); transform: rotate(-7deg); }
.og__device svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 34px 34px rgba(0,60,45,.2)); }
.og__how { max-width: 1240px; margin: 0 auto; padding: clamp(1.5rem, 4vw, 3rem) var(--sgu-pad-x); box-sizing: border-box; }
.og__h2 { font-size: var(--wp--preset--font-size--x-large); margin: 0 0 1.5rem; }
.og__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.og__steps li { background: #fff; border: 1px solid var(--sgu-line); border-radius: var(--sgu-radius); padding: 1.5rem; }
.og__num { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--sgu-brand); color: #fff; font-family: var(--wp--preset--font-family--display); font-weight: 700; margin-bottom: 1rem; }
.og__steps strong { display: block; font-family: var(--wp--preset--font-family--display); font-size: 1.1rem; color: var(--sgu-ink); }
.og__steps p { margin: .35rem 0 0; color: var(--sgu-muted); font-size: .95rem; line-height: 1.5; }
.og__formwrap { max-width: 1240px; margin: 0 auto; padding: clamp(1.5rem, 4vw, 3rem) var(--sgu-pad-x) var(--sgu-section-y); display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; box-sizing: border-box; }
.og__aside { background: var(--sgu-mist); border: 1px solid var(--sgu-line); border-radius: var(--sgu-radius); padding: 1.75rem; }
.og__aside h3 { margin: 0 0 1rem; }
.og__aside p { margin: .5rem 0; } .og__aside a { font-weight: 600; }
.og__note { color: var(--sgu-muted); font-size: .9rem; margin-top: 1.25rem !important; }
@media (max-width: 860px) {
	.og__hero, .og__formwrap { grid-template-columns: 1fr; }
	.og__visual { min-height: 360px; order: -1; }
	.og__device { width: 200px; }
	.og__steps { grid-template-columns: 1fr; }
}
.sgu-page-hero > .sgu-lede { box-sizing: border-box; width: 100%; margin-left: auto !important; margin-right: auto !important; }

/* Order page: "Prefer to talk?" card stays in view while scrolling the form */
.og__formwrap { align-items: start; }
.og__aside { position: sticky; top: calc(var(--sgu-header-h) + 1.5rem); }
.admin-bar .og__aside { top: calc(var(--sgu-header-h) + var(--wp-admin--admin-bar--height, 32px) + 1.5rem); }
@media (max-width: 860px) { .og__aside { position: relative; top: auto; } }

/* ---------- Footer v2 (.ft) ---------- */
.ft { position: relative; isolation: isolate; overflow: hidden; color: #fff;
	background: linear-gradient(170deg, var(--sgu-brand) 0%, #019a77 55%, var(--sgu-brand-dark) 100%); }
.ft::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: repeating-radial-gradient(circle at 90% 0%, transparent 0 139px, rgba(255,255,255,.07) 140px 141px); }
.ft__inner { max-width: 1240px; margin: 0 auto; padding: clamp(2.5rem, 5vw, 4rem) var(--sgu-pad-x) 0; box-sizing: border-box; }
.ft a { color: #fff; text-decoration: none; }

.ft__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem;
	padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 2rem); border-radius: 22px;
	background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); }
.ft__cta-title { margin: 0; font-family: var(--wp--preset--font-family--display); font-size: clamp(1.2rem, 2.2vw, 1.6rem); font-weight: 700; letter-spacing: -.02em; }
.ft__cta-sub { margin: .25rem 0 0; color: rgba(255,255,255,.82); font-size: .95rem; }
.ft__cta-btns { display: flex; flex-wrap: wrap; gap: .6rem; }
.ft__ghost { color: #fff !important; border: 1.5px solid rgba(255,255,255,.55); }
.ft__ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; }

.ft__grid { display: grid; grid-template-columns: 1.4fr .9fr 1.4fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); padding: clamp(2.5rem, 5vw, 3.5rem) 0 clamp(1.5rem, 3vw, 2rem); }
.ft__logo img { display: block; width: 200px; height: auto; }
.ft__brand p { margin: 1rem 0 0; max-width: 30ch; color: rgba(255,255,255,.85); font-size: .95rem; line-height: 1.55; }
.ft__stores { margin-top: 1.25rem; }
.ft .sgu-store { background: #fff; color: var(--sgu-ink) !important; }
.ft .sgu-store:hover { background: var(--sgu-mint); }
.ft__h { margin: .2rem 0 1.1rem !important; font-family: var(--wp--preset--font-family--display); font-size: .74rem !important; font-weight: 600 !important; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.7) !important; }
.ft__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.ft__col a { color: #fff; opacity: .92; transition: opacity .2s; }
.ft__col a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.ft__contact li, .ft__contact li > a { display: flex; align-items: flex-start; gap: .7rem; font-size: .95rem; line-height: 1.45; }
.ft__contact a { word-break: break-word; }
.ft__ic { display: grid; place-items: center; flex: none; width: 30px; height: 30px; margin-top: -3px; border-radius: 9px; background: rgba(255,255,255,.14); }
.ft__ic svg { width: 16px; height: 16px; }
.ft__contact li > span:last-child { color: rgba(255,255,255,.85); }
.ft__roboart img { display: block; width: 150px; height: auto; }
.ft__by p { margin: .8rem 0 0; font-size: .88rem; color: rgba(255,255,255,.75); }

.ft__wordmark { margin: 0; padding: 0 0 .25rem; font-family: var(--wp--preset--font-family--display); font-weight: 700; letter-spacing: -.05em; line-height: .85;
	font-size: clamp(3rem, 11.2vw, 10.5rem); white-space: nowrap; text-align: center;
	color: transparent; background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.02)); -webkit-background-clip: text; background-clip: text; user-select: none; }

.ft__bar { border-top: 1px solid rgba(255,255,255,.16); background: rgba(0,60,47,.25); }
.ft__bar-inner { max-width: 1240px; margin: 0 auto; padding: 1rem var(--sgu-pad-x); box-sizing: border-box; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; font-size: .85rem; color: rgba(255,255,255,.8); }
.ft__bar-inner p { margin: 0; }
.ft__bar-inner ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.25rem; }
.ft__bar-inner a:hover { text-decoration: underline; }

@media (max-width: 960px) { .ft__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
	.ft__grid { grid-template-columns: 1fr; gap: 2rem; }
	.ft__cta-btns .sgu-btn { flex: 1 1 auto; justify-content: center; }
	.ft__bar-inner { flex-direction: column; }
}
.ft__wordmark { font-size: clamp(2.6rem, 9.2vw, 8.6rem); overflow: hidden; }
body.home .ft__cta { display: none; }
body.home .ft__grid { padding-top: 0; }

/* Footer logo swap */
.ft__logo-c { display: none !important; }
.ft-light .ft__logo-w { display: none !important; }
.ft-light .ft__logo-c { display: block !important; }

/* ---------- Footer style A: light ---------- */
.ft-light .ft { background: #fff; color: var(--sgu-ink); border-top: 1px solid var(--sgu-line); }
.ft-light .ft::before { background: radial-gradient(60% 80% at 100% 0%, #e8f7f1 0%, transparent 60%), radial-gradient(50% 70% at 0% 100%, #f0f9f5 0%, transparent 60%); }
.ft-light .ft a { color: var(--sgu-ink); }
.ft-light .ft__cta { background: linear-gradient(135deg, var(--sgu-brand), var(--sgu-brand-dark)); border: 0; color: #fff; box-shadow: 0 30px 60px -36px rgba(0,89,74,.6); }
.ft-light .ft__cta a.sgu-btn--light { color: var(--sgu-deep) !important; }
.ft-light .ft__cta .ft__ghost { color: #fff !important; }
.ft-light .ft__brand p, .ft-light .ft__by p, .ft-light .ft__contact li > span:last-child { color: var(--sgu-muted); }
.ft-light .ft__h { color: var(--sgu-brand-dark) !important; }
.ft-light .ft__col a { opacity: 1; }
.ft-light .ft__col a:hover { color: var(--sgu-brand-dark); }
.ft-light .ft__ic { background: color-mix(in srgb, var(--sgu-brand) 12%, white); color: var(--sgu-brand-dark); }
.ft-light .ft .sgu-store { background: var(--sgu-ink); color: #fff !important; }
.ft-light .ft__wordmark { background: linear-gradient(180deg, rgba(1,171,132,.16), rgba(1,171,132,0)); -webkit-background-clip: text; background-clip: text; }
.ft-light .ft__bar { background: var(--sgu-mist); border-top: 1px solid var(--sgu-line); }
.ft-light .ft__bar-inner { color: var(--sgu-muted); }
.ft-light .ft__bar-inner a { color: var(--sgu-ink); }


/* Light footer: make it read clearly as a footer */
.ft-light .ft { background: #e9f3ef; border-top: 0; box-shadow: inset 0 4px 0 var(--sgu-brand); }
.ft-light .ft::before { background: radial-gradient(60% 90% at 100% 0%, #dcefe7 0%, transparent 60%); }
.ft-light .ft__inner { padding-top: clamp(3rem, 6vw, 4.5rem); }
.ft-light .ft__wordmark { display: none; }
.ft-light .ft__grid { padding-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.ft-light .ft__ic { background: #fff; box-shadow: 0 4px 12px -8px rgba(0,60,45,.4); }
.ft-light .ft__bar { background: var(--sgu-brand); border-top: 0; }
.ft-light .ft__bar-inner, .ft-light .ft__bar-inner a { color: #fff; }
.ft-light .ft__bar-inner p { opacity: .9; }
body.home.ft-light .ft__inner { padding-top: clamp(3rem, 6vw, 4rem); }
.sgu-video .sgu-yt { border-radius: 28px; }
.sgu-video .sgu-section-head { max-width: 720px; margin-left: auto !important; margin-right: auto !important; }



/* ---------- Preview: refined CTA step boxes (body.cta-b) ---------- */
.cta-b .sgu-cta__card--light .sgu-cta__steps { align-items: stretch; }
.cta-b .sgu-cta__card--light .sgu-cta__step { grid-template-columns: 1fr; padding: 1.4rem 1.4rem 1.5rem; display: flex; flex-direction: column; }
.cta-b .sgu-cta__body { display: grid; grid-template-columns: 34px 1fr; column-gap: .75rem; align-items: center; height: 100%; grid-template-rows: auto auto 1fr; }
.cta-b .sgu-cta__step { position: relative; }
.cta-b .sgu-cta__card--light .sgu-cta__num { position: absolute; top: 1.4rem; left: 1.4rem; width: 34px; height: 34px; background: color-mix(in srgb, var(--sgu-brand) 14%, white); color: var(--sgu-brand-dark); font-size: .9rem; }
.cta-b .sgu-cta__body h3 { grid-column: 2; margin: 0 !important; line-height: 34px; }
.cta-b .sgu-cta__body > p { grid-column: 1 / -1; margin-top: .6rem !important; }
.cta-b .sgu-cta__stores, .cta-b .sgu-cta__buttons { grid-column: 1 / -1; align-self: end; margin-top: 1.1rem; }
.cta-b .sgu-cta__stores { display: grid !important; grid-template-columns: 1fr; gap: .55rem !important; }
.cta-b .sgu-cta__store { width: auto !important; display: grid !important; grid-template-columns: 46px 1fr; align-items: center; gap: .6rem; padding: .4rem !important; border-radius: 14px !important; background: var(--sgu-mist) !important; border: 1px solid var(--sgu-line) !important; }
.cta-b .sgu-cta__qr { width: 46px !important; height: 46px !important; }
.cta-b .sgu-cta__store .sgu-store { width: 100%; box-sizing: border-box; justify-content: flex-start; }
.cta-b .sgu-cta__buttons { display: grid !important; grid-template-columns: 1fr; gap: .55rem !important; }
.cta-b .sgu-cta__buttons .sgu-btn { width: 100%; justify-content: center; box-sizing: border-box; padding: .95rem 1rem; }

/* CTA step 2: both buttons the same width (as wide as the wider one) */
.sgu-cta__buttons { display: inline-grid !important; grid-template-columns: 1fr; width: max-content; max-width: 100%; }
.sgu-cta__buttons .sgu-btn { width: 100%; justify-content: center; box-sizing: border-box; }
.ft__grid { padding-top: 0 !important; }

/* Align story/box sections with the site's 1200px content column (same left edge as the logo) */
.sx__stage { padding-left: max(var(--sgu-pad-x), calc((100vw - 1200px) / 2)) !important; padding-right: max(var(--sgu-pad-x), calc((100vw - 1200px) / 2)) !important; }
.sd__inner { max-width: calc(1200px + 2 * var(--sgu-pad-x)); }

/* ---------- One content column for the whole site: 1200px + side gutters ----------
   Every section's text and images line up with the header (logo -> button). */
:root { --sgu-col: 1200px; }
.hn__inner,
.ft__inner, .ft__bar-inner,
.sd__inner, .og__hero, .og__how, .og__formwrap { max-width: calc(var(--sgu-col) + 2 * var(--sgu-pad-x)) !important; }
.sgu-js .sgu-scrolly__inner { max-width: calc(var(--sgu-col) + 2 * var(--sgu-pad-x)) !important; padding-left: var(--sgu-pad-x) !important; padding-right: var(--sgu-pad-x) !important; }
.sgu-scrolly__inner { max-width: calc(var(--sgu-col) + 2 * var(--sgu-pad-x)); }
.sgu-video .sgu-yt { max-width: var(--sgu-col); margin-left: auto; margin-right: auto; }
.sgu-cta__card { max-width: var(--sgu-col) !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box; }
/* keep the step dots inside the column */
.sgu-js .sgu-scrolly__nav { right: calc(var(--sgu-pad-x) - 1.75rem); }

/* No white flash when over-scrolling past the footer (Mac/iOS rubber-band) */
html { background-color: var(--wp--preset--color--brand, #01AB84); overscroll-behavior-y: none; }
body { background-color: #fff; min-height: 100vh; }

/* ---------- Header menu: green bar under the selected item ---------- */
.sgu-header .wp-block-navigation-item__content { position: relative; padding: .4rem 0; }
.sgu-header .wp-block-navigation-item__content::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; border-radius: 3px;
	background: var(--sgu-brand); transform: scaleX(0); transform-origin: center; transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.sgu-header .wp-block-navigation-item__content:hover::after,
.sgu-header .wp-block-navigation-item__content.is-active::after,
.sgu-header .current-menu-item > .wp-block-navigation-item__content::after { transform: scaleX(1); }
.sgu-header .wp-block-navigation-item__content.is-active,
.sgu-header .current-menu-item > .wp-block-navigation-item__content { color: var(--sgu-brand-dark) !important; font-weight: 600; }
/* inside the mobile overlay menu, show the bar on the left instead */
.sgu-header .is-menu-open .wp-block-navigation-item__content::after { left: -14px; right: auto; top: 50%; bottom: auto; width: 4px; height: 1.2em; transform: translateY(-50%) scaleY(0); }
.sgu-header .is-menu-open .wp-block-navigation-item__content.is-active::after { transform: translateY(-50%) scaleY(1); }

/* CTA device card: sharp drawing */
.sgu-cta__device-svg { display: block; width: 76px; margin: .2rem auto .4rem; }
.sgu-cta__device-svg svg { display: block; width: 100%; height: auto; transform: rotate(-6deg); }
@media (max-width: 600px) { .sgu-cta__device-svg { width: 58px; } }


/* CTA box: single "Download the free app" card */
.sgu-cta__card--light .sgu-cta__steps { grid-template-columns: 1fr !important; }
.sgu-cta__card--light .sgu-cta__step { grid-template-columns: 1fr !important; }
.sgu-cta__card--light .sgu-cta__stores { flex-direction: row !important; flex-wrap: wrap; }
.sgu-cta__card--light .sgu-cta__steps { justify-items: start; }
.sgu-cta__card--light .sgu-cta__step { width: fit-content; max-width: 100%; box-sizing: border-box; }
.sgu-field--quantity input { max-width: none; }
.sgu-field--topic { grid-column: auto !important; }
@media (max-width: 600px) { .sgu-field--topic { grid-column: 1 / -1 !important; } }

/* Form row: wide "I want to" + narrow "Number of devices" */
.sgu-form { grid-template-columns: repeat(6, 1fr) !important; }
.sgu-form .sgu-field { grid-column: span 3; }
.sgu-form .sgu-field--address, .sgu-form .sgu-field--message, .sgu-form .sgu-field--submit { grid-column: 1 / -1; }
.sgu-form .sgu-field--topic { grid-column: span 4 !important; }
.sgu-form .sgu-field--quantity { grid-column: span 2; }
@media (max-width: 600px) {
	.sgu-form .sgu-field { grid-column: 1 / -1; }
	.sgu-form .sgu-field--topic { grid-column: span 4 !important; }
	.sgu-form .sgu-field--quantity { grid-column: span 2; }
}

.ft__h--2 { margin-top: 1.75rem !important; }

.ft__others { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.ft__others a { font-size: .95rem; }

.ft__others-label { margin: 1.5rem 0 .55rem !important; font-size: .9rem; color: var(--sgu-muted); }
.ft__others a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; font-size: .92rem; line-height: 1.4; }
.ft__others a:hover { color: var(--sgu-brand-dark) !important; }

/* ---------- Guide format: key takeaways + comparison table ---------- */
.sgu-takeaways { background: color-mix(in srgb, var(--sgu-brand) 8%, white); border: 1px solid color-mix(in srgb, var(--sgu-brand) 30%, white); border-left: 4px solid var(--sgu-brand); border-radius: 16px; padding: 1.4rem 1.6rem !important; margin-bottom: 2rem !important; }
.sgu-takeaways .sgu-takeaways__h { margin: 0 0 .6rem !important; font-size: 1.05rem !important; text-transform: uppercase; letter-spacing: .12em; color: var(--sgu-brand-dark); }
.sgu-takeaways ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .45rem; }
.sgu-compare { margin: 1.25rem 0 0; overflow-x: auto; }
.sgu-compare table, .og__table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--sgu-line); border-radius: 14px; overflow: hidden; font-size: .93rem; }
.sgu-compare th, .sgu-compare td, .og__table th, .og__table td { padding: .8rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--sgu-line); }
.sgu-compare thead th { background: var(--sgu-mist); font-family: var(--wp--preset--font-family--display); }
.sgu-compare thead th:nth-child(2), .sgu-compare td:nth-child(2) { background: color-mix(in srgb, var(--sgu-brand) 8%, white); }
.sgu-compare tbody td:first-child { font-weight: 600; color: var(--sgu-ink); white-space: nowrap; }
.sgu-compare tr:last-child td, .og__table tr:last-child th, .og__table tr:last-child td { border-bottom: 0; }
.og__specs { max-width: calc(var(--sgu-col) + 2 * var(--sgu-pad-x)); margin: 0 auto; padding: clamp(1rem, 3vw, 2rem) var(--sgu-pad-x) 0; box-sizing: border-box; }
.og__table { background: #fff; }
.og__table th { width: 34%; background: var(--sgu-mist); font-family: var(--wp--preset--font-family--display); font-weight: 600; color: var(--sgu-ink); }
.og__table td { color: var(--sgu-muted); }
@media (max-width: 600px) { .og__table th, .og__table td { display: block; width: auto; } .og__table th { border-bottom: 0; padding-bottom: .2rem; } }

/* Footer social icons (under the app store buttons) */
.ft__social { display: flex; gap: .6rem; margin: 1.1rem 0 0; padding: 0; list-style: none; }
.ft__social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.14); color: #fff; transition: transform .2s ease, background-color .2s ease, color .2s ease; }
.ft__social svg { width: 19px; height: 19px; }
.ft__social a:hover, .ft__social a:focus-visible { transform: translateY(-2px); }
.ft-light .ft__social a { background: #fff; color: var(--sgu-brand-dark); box-shadow: 0 4px 12px -8px rgba(0,60,45,.4); }
.ft-light .ft__social a:hover, .ft-light .ft__social a:focus-visible { background: var(--sgu-brand); color: #fff; }