/**
 * Gugab marketing site: base type, surfaces and the details Bricks has no controls for.
 *
 * Colours come from the Bricks "Gugab" palette (--gm-*). Every section sits on one of four
 * surfaces: light (default), dark forest (.gm-section--dark / .gm-dark), emerald (.gm-emerald)
 * or lime (.gm-lime). A surface only sets variables; headings, buttons, cards and ticks read
 * them, so the same gm-* classes work on any background.
 *
 * Surfaces are flat colour; on a computer, dark ones light up softly around the pointer
 * (see "Pointer light"). Product visuals are
 * real screenshots in a phone or browser frame, always shown whole.
 */

@font-face {
	font-family: "Bricolage Grotesque";
	src: url("fonts/bricolage-grotesque.woff2?v=1") format("woff2");
	font-weight: 400 700; font-style: normal; font-display: swap;
}

/* ------------------------------------------------------------------ Surfaces */
html { background: #07130f; } /* what shows past the dark header and footer when the page is pulled */
body.gm-site {
	--gm-display: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--gm-heading: var(--gm-ink, #07130f); --gm-body: var(--gm-text, #33423c); --gm-subtle: var(--gm-muted, #5c6b64); --gm-eyebrow: var(--gm-muted, #5c6b64);
	--gm-accent: var(--gm-brand, #047857); --gm-tick: var(--gm-brand, #047857);
	--gm-btn-bg: var(--gm-ink, #07130f); --gm-btn-fg: #fff; --gm-btn-hover: var(--gm-brand-2, #065f46);
	--gm-ghost-line: #cfd6cb; --gm-ghost-fg: var(--gm-ink, #07130f);
	--gm-card-bg: #fff; --gm-card-line: var(--gm-line, #e2e7de);
	margin: 0; background: #fff; color: var(--gm-body);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
.gm-site .gm-section--dark, .gm-site .gm-dark {
	--gm-heading: #fff; --gm-body: rgba(255, 255, 255, .76); --gm-subtle: rgba(255, 255, 255, .68); --gm-eyebrow: rgba(255, 255, 255, .55);
	--gm-accent: var(--gm-spark, #c6f432); --gm-tick: var(--gm-spark, #c6f432);
	--gm-btn-bg: var(--gm-spark, #c6f432); --gm-btn-fg: var(--gm-ink, #07130f); --gm-btn-hover: #d8ff5a;
	--gm-ghost-line: rgba(255, 255, 255, .24); --gm-ghost-fg: #fff;
	--gm-card-bg: var(--gm-ink-2, #0e2019); --gm-card-line: rgba(255, 255, 255, .09);
	color: var(--gm-body);
}
.gm-site .gm-emerald {
	--gm-heading: #fff; --gm-body: rgba(255, 255, 255, .86); --gm-subtle: rgba(255, 255, 255, .84); --gm-eyebrow: rgba(255, 255, 255, .7);
	--gm-accent: var(--gm-spark, #c6f432); --gm-tick: var(--gm-spark, #c6f432);
	--gm-btn-bg: var(--gm-spark, #c6f432); --gm-btn-fg: var(--gm-ink, #07130f); --gm-btn-hover: #d8ff5a;
	--gm-ghost-line: rgba(255, 255, 255, .4); --gm-ghost-fg: #fff;
	background-color: var(--gm-brand, #047857); color: var(--gm-body);
}
.gm-site .gm-lime {
	--gm-heading: var(--gm-ink, #07130f); --gm-body: rgba(7, 19, 15, .8); --gm-subtle: rgba(7, 19, 15, .74); --gm-eyebrow: rgba(7, 19, 15, .62);
	--gm-accent: var(--gm-brand-2, #065f46); --gm-tick: var(--gm-ink, #07130f);
	--gm-btn-bg: var(--gm-ink, #07130f); --gm-btn-fg: #fff; --gm-btn-hover: var(--gm-brand-2, #065f46);
	--gm-ghost-line: rgba(7, 19, 15, .3); --gm-ghost-fg: var(--gm-ink, #07130f);
	background-color: var(--gm-spark, #c6f432); color: var(--gm-body);
}

/* Pointer light (computers only; site.js sets --gm-x/--gm-y and .is-lit). Over dark sections a
   faint lime light follows the pointer and lights up a grid of small sharp-corner squares,
   the logo's shape, only near it. Phones and still surfaces stay flat. */
.gm-site :is(.gm-section--dark, .gm-emerald, .gm-footer):not(.gm-card) { position: relative; isolation: isolate; }
.gm-site :is(.gm-section--dark, .gm-emerald, .gm-footer):not(.gm-card)::before,
.gm-site :is(.gm-section--dark, .gm-emerald, .gm-footer):not(.gm-card)::after {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
	opacity: 0; transition: opacity .4s ease;
}
.gm-site :is(.gm-section--dark, .gm-emerald, .gm-footer):not(.gm-card)::before {
	background: radial-gradient(420px circle at var(--gm-x, 50%) var(--gm-y, 50%), rgba(198, 244, 50, .07), transparent 70%);
}
.gm-site :is(.gm-section--dark, .gm-emerald, .gm-footer):not(.gm-card)::after {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='10' y='10' width='3' height='3' fill='%23c6f432'/%3E%3C/svg%3E") 0 0 / 24px 24px;
	-webkit-mask: radial-gradient(260px circle at var(--gm-x, 50%) var(--gm-y, 50%), #000, transparent 75%);
	mask: radial-gradient(260px circle at var(--gm-x, 50%) var(--gm-y, 50%), #000, transparent 75%);
}
.gm-site :is(.gm-section--dark, .gm-emerald, .gm-footer).is-lit::before { opacity: 1; }
.gm-site :is(.gm-section--dark, .gm-emerald, .gm-footer).is-lit::after { opacity: .5; }

/* ------------------------------------------------------------------ Base */
.gm-site h1, .gm-site h2, .gm-site h3, .gm-site h4, .gm-site p { margin: 0; }
.gm-site h1, .gm-site h2, .gm-site h3 { text-wrap: balance; }
.gm-site .gm-h1, .gm-site .gm-h2, .gm-site .gm-h3, .gm-site .gm-price { font-family: var(--gm-display); }
.gm-site p { text-wrap: pretty; }
.gm-site a { color: inherit; }
.gm-site img { max-width: 100%; height: auto; }
.gm-site :focus-visible { outline: 2px solid var(--gm-accent); outline-offset: 3px; border-radius: 6px; }
.gm-site .brxe-section { overflow-x: clip; }
::selection { background: var(--gm-spark, #c6f432); color: var(--gm-ink, #07130f); }
.gm-accent { color: var(--gm-accent); }
.gm-eyebrow--accent { color: var(--gm-accent) !important; }
@media (max-width: 767px) { .gm-br-desktop { display: none; } }

/* ------------------------------------------------------------------ Buttons */
.gm-site .gm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease, box-shadow .2s ease; }
.gm-site .gm-btn--primary:hover { background-color: var(--gm-btn-hover); transform: translateY(-1px); }
.gm-site .gm-btn--dark:hover { background-color: var(--gm-brand-2, #065f46); }
.gm-site .gm-btn--ghost:hover { border-color: var(--gm-ghost-fg); }
.gm-site .gm-btn:active { transform: translateY(1px); }
.gm-arrow-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; color: var(--gm-heading); text-decoration: none; }
.gm-arrow-link::after { content: "→"; transition: transform .15s ease; }
.gm-arrow-link:hover::after { transform: translateX(3px); }
.gm-note { font-size: 14px; color: var(--gm-subtle); }
.gm-site a.gm-link, .gm-link { color: var(--gm-accent); font-weight: 650; text-decoration: none; }
.gm-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------------ Header (always on the dark surface) */
#brx-header { position: sticky; top: 0; z-index: 100; }
.admin-bar #brx-header { top: 32px; }
@media (max-width: 782px) { .admin-bar #brx-header { top: 0; } }
.gm-header { background: var(--gm-ink, #07130f); border-bottom: 1px solid transparent; transition: border-color .2s; }
.gm-scrolled .gm-header { border-bottom-color: rgba(255, 255, 255, .09); }
.gm-site a.gm-logo, .gm-logo { display: inline-flex; align-items: center; align-self: flex-start; gap: 8px; text-decoration: none; font-family: var(--gm-display); font-weight: 700; font-size: 27px; line-height: 1; letter-spacing: -.045em; color: var(--gm-heading); }
.gm-logo span { text-transform: lowercase; padding-bottom: 3px; }
.gm-logo svg, .gm-logo img { width: 32px; height: 32px; display: block; }
.gm-logo .brxe-shortcode { display: flex; width: auto; flex: none; }
.gm-header .bricks-nav-menu { gap: 2px; }
.gm-header .bricks-nav-menu > li { margin: 0; }
.gm-header .bricks-nav-menu > li > a, .gm-header .bricks-nav-menu > li > .brx-submenu-toggle > a { padding: 8px 12px; border-radius: 8px; font-weight: 550; font-size: 15px; color: rgba(255, 255, 255, .78); text-decoration: none; }
.gm-header .bricks-nav-menu > li > a:hover, .gm-header .bricks-nav-menu > li > .brx-submenu-toggle:hover > a { color: #fff; }
.gm-header .brx-submenu-toggle { gap: 0; }
.gm-header .brx-submenu-toggle button { color: rgba(255, 255, 255, .55); padding: 0 6px 0 0; margin-left: -8px; }
.gm-header .brx-submenu-toggle button svg { width: 12px; height: 12px; }
.gm-header .bricks-nav-menu .sub-menu { padding: 8px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .1); background: var(--gm-ink-2, #0e2019); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .7); min-width: 230px; }
/* The header's own line height (the bar's full height) must not carry into the dropdown: it made each row 78px tall. */
.gm-header .bricks-nav-menu .sub-menu a { display: block; padding: 10px 12px; border-radius: 8px; font-weight: 550; font-size: 15px; line-height: 1.35; color: rgba(255, 255, 255, .84); text-decoration: none; }
.gm-header .bricks-nav-menu .sub-menu a:hover { background: rgba(255, 255, 255, .07); color: var(--gm-spark, #c6f432); }
/* Phone menu: the whole screen, a line between entries, and every control a full-size
   target with room around it. A row with more inside opens when you press anywhere on it
   (not only the small arrow at the edge); its own page is the first entry in the list. */
.gm-header .bricks-mobile-menu-wrapper { background: var(--gm-ink, #07130f); width: 100%; max-width: none; padding: 84px 0 32px; overflow-y: auto; }
.gm-header .bricks-mobile-menu-wrapper::before { background: var(--gm-ink, #07130f); }
.gm-header .bricks-mobile-menu > li { margin: 0 20px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.gm-header .bricks-mobile-menu > li > a, .gm-header .bricks-mobile-menu > li > .brx-submenu-toggle > a { font-family: var(--gm-display); font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; padding: 20px 0; color: #fff; text-decoration: none; }
.gm-header .bricks-mobile-menu .brx-submenu-toggle { position: relative; }
.gm-header .bricks-mobile-menu .brx-submenu-toggle > a { flex: 1; min-width: 0; padding-right: 64px; }
/* The button is the whole row (see-through, over the label); the round arrow is its icon. */
.gm-header .bricks-mobile-menu .brx-submenu-toggle button { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; display: flex; align-items: center; justify-content: flex-end; background: none; border-radius: 0; color: #fff; transform: none !important; cursor: pointer; }
.gm-header .bricks-mobile-menu .brx-submenu-toggle button svg { box-sizing: border-box; width: 48px; height: 48px; padding: 16px; border-radius: 50%; background: rgba(255, 255, 255, .09); transition: transform .2s ease, background .2s ease; }
.gm-header .bricks-mobile-menu .brx-submenu-toggle button[aria-expanded="true"] svg { transform: rotate(180deg); background: var(--gm-spark, #c6f432); color: var(--gm-ink, #07130f); }
.gm-header .bricks-mobile-menu .sub-menu { padding: 0 0 14px; }
.gm-header .bricks-mobile-menu .sub-menu a { display: flex; align-items: center; min-height: 48px; color: rgba(255, 255, 255, .82); padding: 6px 0 6px 14px; font-size: 18px; line-height: 1.3; text-decoration: none; }
.gm-header .bricks-mobile-menu-toggle { color: #fff; }
.gm-header__login { font-weight: 550; font-size: 15px; text-decoration: none; color: rgba(255, 255, 255, .78); padding: 8px 10px; }
.gm-header__login:hover { color: #fff; }
.gm-header__who { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .6); padding: 8px 0 8px 4px; }
.gm-header__who + .gm-header__login { padding-left: 4px; }
.gm-header__who + .gm-header__login::before { content: "·"; margin-right: 8px; color: rgba(255, 255, 255, .4); }
.bricks-mobile-menu .gm-who { display: block; margin-top: 4px; font-family: inherit; font-size: 15px; font-weight: 500; letter-spacing: 0; color: rgba(255, 255, 255, .6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-mobile-only { display: none !important; }
.bricks-mobile-menu .gm-mobile-only { display: block !important; }
/* Menu entries for signed-in or signed-out visitors only (WordPress marks the page for signed-in ones). */
body.logged-in .bricks-mobile-menu .gm-when-out, body:not(.logged-in) .bricks-mobile-menu .gm-when-in { display: none !important; }
@media (max-width: 991px) {
	.gm-header .brxe-nav-menu { order: 3; flex-grow: 0 !important; }
	.gm-header__actions { margin-left: auto; }
}
@media (max-width: 767px) { .gm-header__login, .gm-header__who { display: none; } }
@media (max-width: 1100px) { .gm-header__who { max-width: 110px; } }
/* The narrowest phones: the button gives up a little width, so the menu icon stays on the bar. */
@media (max-width: 349px) { .gm-site .gm-header .gm-btn { padding-left: 12px !important; padding-right: 12px !important; font-size: 14px !important; } }
@media (max-width: 380px) { .gm-site .gm-header .brxe-container { column-gap: 10px !important; } }
/* A long web address in a sentence breaks rather than running off a small phone. */
.gm-site p, .gm-site li, .gm-site dd, .gm-site td { overflow-wrap: break-word; }
/* A long button label ("Start free, upgrade any time") wraps inside the button on a small phone. */
@media (max-width: 400px) { .gm-site .gm-btn { white-space: normal; text-align: center; line-height: 1.25; } .gm-site .gm-header .gm-btn { white-space: nowrap; } }

/* ------------------------------------------------------------------ Hero */
/* The line above the headline: plain words with the logo's square in front (a capsule with a
   glowing dot is what every generated landing page has). */
.gm-badge-link { display: inline-block; padding: 12px 0; text-align: center; text-wrap: balance; line-height: 1.6; font-size: 13px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; color: rgba(255, 255, 255, .72); text-decoration: none; transition: color .15s; }
.gm-badge-link::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 10px; border-radius: 3px 3px 3px 0; background: var(--gm-spark, #c6f432); }
.gm-badge-link::after { content: "→"; display: inline-block; margin-left: 9px; color: var(--gm-spark, #c6f432); transition: transform .15s; }
.gm-badge-link:hover { color: #fff; }
.gm-badge-link:hover::after { transform: translateX(3px); }
/* The dashboard in a browser frame with the customer's phone in front. Both shown whole. */
.gm-hero__shots { position: relative; width: 100%; max-width: 1080px; margin: clamp(40px, 5vw, 64px) auto 0; padding-bottom: 28px; }
.gm-hero__shots .gm-browser { width: 84%; }
.gm-hero__shots .gm-phone { position: absolute; right: 0; bottom: 0; width: 25%; }
/* The same pairing inside a feature row: a laptop screen with a phone in front. */
.gm-duo { position: relative; width: 100%; padding-bottom: 36px; }
.gm-duo .gm-browser { width: 86%; }
.gm-duo .gm-phone { position: absolute; right: 0; bottom: 0; width: 28%; max-width: 230px; }
@media (min-width: 992px) {
	.gm-split--duo { grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr) !important; }
	.gm-split--duo.gm-split--reverse { grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr) !important; }
}
@media (max-width: 599px) {
	/* Phones: the laptop screen at full width, then the phone big enough to read. Both whole. */
	.gm-hero__shots, .gm-duo { padding-bottom: 0; display: grid; justify-items: center; }
	.gm-hero__shots .gm-browser, .gm-duo .gm-browser { width: 100%; }
	.gm-hero__shots .gm-phone, .gm-duo .gm-phone { position: static; width: min(66%, 260px); max-width: none; margin-top: -24px; }
}
/* Hero story: one real quote from draft to paid, on a laptop (the business) and a phone (the
   customer). The frames of each device are stacked and cross-fade; the device that is not
   acting is dimmed (darkened, not made see-through: the phone sits over the laptop).
   Without JavaScript the first frame of each shows, as a still. */
.gm-hero .brxe-shortcode { width: 100%; }
.gm-story { width: 100%; display: grid; }
/* Each device is a layer of its own, the phone in front of the laptop. What is stacked inside
   one (the screen being left, under the one arriving) can then never come out over the other
   device, at rest or part-way through an animation. */
.gm-story__device { position: relative; z-index: 0; isolation: isolate; }
.gm-story__stage .gm-phone.gm-story__device { z-index: 1; }
.gm-story__frames { display: grid; }
.gm-story__frames > img, .gm-story__frames > video { grid-area: 1 / 1; opacity: 0; transition: opacity .5s ease; }
.gm-story__frames > .is-on { opacity: 1; z-index: 2; }
/* The screen being left stays whole underneath until the next one is fully in: two half-faded
   screens over a dark frame would show as a dip. */
.gm-story__frames > .is-under { opacity: 1; z-index: 1; transition: none; }
.gm-browser .gm-story__frames > .is-under { transform: none; }
/* A recording of the step, played over its picture. The same shape and frame as the picture. */
.gm-story__frames > video { display: block; width: 100%; height: auto; }
/* The laptop's next screen comes up into place, as a page does when you move on in the app.
   (A phone's frame is drawn on its picture, so the phone only fades: a moving frame would wobble.) */
.gm-browser .gm-story__frames > img, .gm-browser .gm-story__frames > video { transform: translateY(14px); transition: opacity .5s ease, transform .55s cubic-bezier(.2, .7, .2, 1); }
.gm-browser .gm-story__frames > .is-on { transform: none; }
/* The messenger: a label that goes from the screen where a step happened to the screen that
   hears of it ("Quote sent" to the customer's phone, "Accepted" back to the business). It is
   Gugab carrying the news, so it is the brand itself: the logo, the headline type, the page's
   own dark green with a lime edge, in the logo's shape (one sharp corner). Flat, and solid so
   it reads over any screen. */
.gm-msg { position: absolute; z-index: 2; left: 0; top: 0; display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px 6px 7px; border-radius: 11px 11px 11px 3px; background: var(--gm-ink, #07130f); color: #fff; border: 1.5px solid var(--gm-spark, #c6f432); font-family: var(--gm-display); font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .25s ease; }
.gm-msg b { font-weight: inherit; }
.gm-msg .gx-mark { width: 20px; height: 20px; flex: none; }
.gm-msg.is-on { opacity: 1; }
.gm-msg.is-moving { transition: opacity .25s ease, transform .9s cubic-bezier(.45, .05, .2, 1); }
.gm-story.is-held .gm-msg { opacity: 0; } /* the bar is the "Paused" label's while a mouse rests there */
/* The screen that hears of it gives a small start as the message lands. */
@keyframes gm-nudge { 0% { transform: translateY(0); } 38% { transform: translateY(-6px); } 100% { transform: translateY(0); } }
.gm-story__device.is-nudged { animation: gm-nudge .5s ease; }
.gm-story__frames > [data-gm-small] { display: none; } /* the app on a phone: small screens only */
/* Under the screens, the story's three steps as one timeline: each is a line that fills as it
   plays, with its number and name, and what is happening is written under the step being
   played. One flat piece (a row of pill buttons with a caption under it read as clutter). */
.gm-story { --gm-stage: 1080px; }
@media (min-width: 600px) {
	/* The screens are sized by the window's height too, so the timeline stays in view while they
	   play (under full-size screens the words fell below the bottom of an ordinary laptop
	   window). 0.56 is the stage's height for its width. */
	.gm-story { --gm-stage: min(1080px, max(600px, calc((100vh - 284px) * 1.79))); }
	.gm-hero__shots.gm-story__stage { max-width: var(--gm-stage); }
}
.gm-story__panel { display: grid; grid-template-columns: repeat(var(--gm-n, 3), minmax(0, 1fr)) 48px; column-gap: clamp(16px, 2.2vw, 30px); align-items: start; width: 100%; max-width: max(var(--gm-stage), 880px); margin: clamp(18px, 2.4vw, 30px) auto 0; } /* as wide as the screens, but never too narrow to read in */
.gm-story__act { position: relative; grid-row: 1; display: flex; align-items: baseline; gap: 12px; min-height: 48px; padding: 17px 0 4px; border: 0; background: none; color: rgba(255, 255, 255, .5); font: inherit; text-align: left; cursor: pointer; transition: color .3s ease; }
.gm-story__act::before, .gm-story__act::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 2px; }
.gm-story__act::before { background: rgba(255, 255, 255, .16); }
/* The line fills as its step plays (site.js moves it); the steps already played stay full. */
.gm-story__act::after { background: var(--gm-spark, #c6f432); transform-origin: left center; transform: scaleX(0); }
.gm-story__act.is-done::after { transform: scaleX(1); }
.gm-story__act.is-on::after { transform: scaleX(var(--gm-p, 0)); }
.gm-story__act b { flex: none; font-size: 12px; font-weight: 700; letter-spacing: .08em; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .4); transition: color .3s ease; }
.gm-story__act span { font-family: var(--gm-display); font-size: clamp(17px, 1.55vw, 21px); font-weight: 700; line-height: 1.25; letter-spacing: -.015em; }
.gm-story__act:hover, .gm-story__act.is-on { color: #fff; }
.gm-story__act.is-on b, .gm-story__act.is-done b { color: var(--gm-spark, #c6f432); }
/* "Paused": shown while a mouse resting on the screens holds the step, so a held story never looks stuck. */
.gm-held { position: absolute; z-index: 3; top: 12px; left: 50%; transform: translateX(-50%); padding: 6px 14px; border-radius: 8px; background: #07130f; border: 1px solid rgba(255, 255, 255, .28); color: #fff; font-size: 13px; font-weight: 650; line-height: 1.2; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .2s ease; }
.gm-story.is-held .gm-held, .gm-walk.is-held .gm-held { opacity: 1; }
.gm-story__stage .gm-held { top: 4px; left: 42%; padding: 5px 12px; } /* in the laptop's top bar */
.gm-story__toggle { grid-row: 1; grid-column: -2 / -1; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .2); background: transparent; color: rgba(255, 255, 255, .78); cursor: pointer; transition: color .25s ease, border-color .25s ease; }
.gm-story__toggle:hover { border-color: rgba(255, 255, 255, .5); color: #fff; }
.gm-story__toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.gm-story__play { display: none; fill: currentColor; stroke-width: 1.6; }
.gm-story.is-paused .gm-story__play { display: block; }
.gm-story.is-paused .gm-story__pause { display: none; }
.gm-story:not(.is-live) .gm-story__toggle { display: none; }
/* The end: the story rests on its last step with every line full and every name lit, and the
   round button turns lime and offers to play it again. */
.gm-story__again { display: none; }
.gm-story.is-over .gm-story__again { display: block; }
.gm-story.is-over .gm-story__play, .gm-story.is-over .gm-story__pause { display: none; }
.gm-story.is-over .gm-story__toggle { background: var(--gm-spark, #c6f432); border-color: var(--gm-spark, #c6f432); color: var(--gm-ink, #07130f); }
.gm-story.is-over .gm-story__toggle:hover { background: #fff; border-color: #fff; color: var(--gm-ink, #07130f); }
.gm-story.is-over .gm-story__act { color: #fff; }
/* "Play again" in words under the button, where there is room under it (wide screens). */
.gm-story__toggle { position: relative; }
.gm-story__toggle span { display: none; position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 12px; font-weight: 650; letter-spacing: .02em; color: #fff; }
@media (min-width: 900px) { .gm-story.is-over .gm-story__toggle span { display: block; } }
/* What is happening: under the step being played where the columns are wide enough to read
   in, across the full width under the timeline where they are not. Room for the longest line
   is kept, so nothing under the story shifts as the words change. */
.gm-site .gm-story__caption { grid-row: 2; grid-column: 1 / -1; margin: 2px 0 0; min-height: 1.5em; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .74); text-align: left; }
@media (min-width: 900px) {
	.gm-site .gm-story__caption { grid-column: 1; min-height: 4.5em; padding-left: 30px; } /* in line with the step's name */
	.gm-story__panel[data-gm-on="2"] .gm-story__caption { grid-column: 2; }
	.gm-story__panel[data-gm-on="3"] .gm-story__caption { grid-column: 3; }
}
.gm-story__caption span { transition: opacity .2s ease; }
.gm-story__caption.is-out span { opacity: 0; }
/* The headline's three phrases light up in turn with the story. */
.gm-phrase { transition: color .35s ease; }
.gm-hero.is-story .gm-phrase { color: #fff; }
.gm-hero.is-story[data-gm-on="1"] .gm-phrase--1, .gm-hero.is-story[data-gm-on="2"] .gm-phrase--2, .gm-hero.is-story[data-gm-on="3"] .gm-phrase--3, .gm-hero.is-story[data-gm-on="all"] .gm-phrase { color: var(--gm-accent); } /* "all": the story has finished */
@media (prefers-reduced-motion: reduce) {
	.gm-story__frames > img, .gm-story__frames > video, .gm-browser .gm-story__frames > img, .gm-browser .gm-story__frames > video, .gm-phrase, .gm-msg, .gm-msg.is-moving, .gm-story__caption span, .gm-story__act, .gm-story__act b { transition: none; }
	.gm-browser .gm-story__frames > img, .gm-browser .gm-story__frames > video { transform: none; }
	.gm-story__device.is-nudged { animation: none; }
}
@media (max-width: 599px) {
	/* Phones: a laptop screen would be too small to read, so one phone plays the story alone
	   (the app for the business's moments, the quote for the customer's). */
	.gm-story__stage .gm-browser { display: none; }
	.gm-story__frames > [data-gm-small] { display: block; }
	.gm-story__frames > [data-gm-wide] { display: none; }
	/* The phone is sized by the window's height too, so the timeline under it stays in view. */
	.gm-hero__shots.gm-story__stage .gm-phone { width: min(74%, 300px); width: min(74%, 300px, max(200px, calc((100svh - 212px) * .478))); margin-top: 0; }
	/* The timeline on a phone: the step being played is the wide one and carries its name; the
	   others show their number (all three are named in the headline, which lights up with them).
	   The words run the full width underneath. */
	.gm-story__panel { grid-template-columns: 2.1fr 1fr 1fr 48px; column-gap: 10px; margin: 18px auto 0; transition: grid-template-columns .35s ease; }
	.gm-story__panel[data-gm-step="2"] { grid-template-columns: 1fr 2.1fr 1fr 48px; }
	.gm-story__panel[data-gm-step="3"] { grid-template-columns: 1fr 1fr 2.1fr 48px; }
	.gm-story__act { gap: 8px; padding-top: 15px; white-space: nowrap; }
	.gm-story__act span { font-size: 15px; }
	.gm-story__act:not(.is-on) span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
	.gm-site .gm-story__caption { min-height: 3em; font-size: 15.5px; }
	@media (max-width: 359px) { .gm-site .gm-story__caption { min-height: 4.5em; } }
}
.gm-hero-cta .gm-btn { padding: 16px 30px; font-size: 17px; }
.gm-hero__strip { border-top: 1px solid rgba(255, 255, 255, .09); padding: 22px 0 26px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; justify-items: center; width: 100%; background: var(--gm-ink, #07130f); position: relative; z-index: 3; }
.gm-site .gm-hero__strip > p { font-size: 13px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .55); text-align: center; width: 100%; }
.gm-hero__strip .brxe-shortcode { width: 100%; }
@media (max-width: 767px) {
	.gm-badge-link { font-size: 11.5px; letter-spacing: .07em; }
	.gm-hero-cta { flex-direction: column; width: 100%; }
	.gm-hero-cta .gm-btn { width: 100%; }
}

/* Facts band: only things that are true of the product */
.gm-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; width: 100%; }
.gm-stat { padding: 6px 28px; border-left: 1.5px solid rgba(7, 19, 15, .16); display: grid; gap: 4px; align-content: start; }
.gm-stat:first-child { border-left: 0; padding-left: 0; }
.gm-stat b { font-family: var(--gm-display); font-size: clamp(44px, 5.4vw, 76px); font-weight: 700; line-height: .95; letter-spacing: -.04em; color: var(--gm-ink, #07130f); }
.gm-stat span { font-size: 16px; font-weight: 600; line-height: 1.35; color: rgba(7, 19, 15, .78); max-width: 210px; }
@media (max-width: 991px) {
	.gm-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
	.gm-stat:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (max-width: 480px) { .gm-stat { padding: 4px 16px; } }

/* ------------------------------------------------------------------ Old way vs new way */
.gm-compare .gm-card { padding: 36px; border-radius: 28px; }
.gm-compare__new { background-color: var(--gm-ink, #07130f) !important; border-color: transparent !important; box-shadow: 0 40px 80px -40px rgba(7, 19, 15, .55); }
.gm-compare .gm-check, .gm-x-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 0; }
.gm-compare .gm-check > li, .gm-x-list > li { position: relative; padding: 16px 0 16px 36px; border-top: 1px solid var(--gm-card-line); color: var(--gm-heading); font-weight: 600; }
.gm-x-list > li { color: var(--gm-muted, #5c6b64); font-weight: 500; }
.gm-compare .gm-check > li::before, .gm-x-list > li::before {
	content: ""; position: absolute; left: 0; top: 50%; margin-top: -12px; width: 24px; height: 24px; border-radius: 50%; -webkit-mask: none; mask: none;
	background: var(--gm-spark, #c6f432) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2307130f' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.gm-x-list > li::before {
	background: #e4e8df url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c6b64' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / 11px no-repeat;
}

/* ------------------------------------------------------------------ Real screens */
/* A phone frame around a 390x844 capture. The image is never cropped.
   One phone, one shape: the frame is drawn on the picture in units of the phone's own width
   (cqw), so the corners and the edge keep the same proportions at every size, on every page. */
.gm-phone { margin: 0; width: 100%; max-width: 300px; container-type: inline-size; }
.gm-phone img, .gm-phone video {
	display: block; width: 100%; height: auto; box-sizing: border-box; background: #101b17;
	border: 9px solid #101b17; border-radius: 44px; /* for browsers without cqw */
	border-width: 3.1cqw; border-radius: 15.2cqw;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .2), 0 30px 60px -28px rgba(0, 0, 0, .55);
}
/* A browser frame around a 1280x800 capture. */
.gm-browser { margin: 0; width: 100%; border-radius: 16px; overflow: hidden; background: #0e2019; border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .55); }
.gm-browser__bar { height: 34px; display: flex; align-items: center; padding: 0 14px; }
.gm-browser__bar::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .22); box-shadow: 16px 0 0 rgba(255, 255, 255, .22), 32px 0 0 rgba(255, 255, 255, .22); }
.gm-browser img { display: block; width: 100%; height: auto; }
/* One or two phones side by side; the second sits a little lower. */
.gm-shots { display: flex; justify-content: center; align-items: flex-start; gap: clamp(14px, 2.4vw, 28px); width: 100%; }
.gm-shots .gm-phone { flex: 1 1 0; max-width: 290px; }
.gm-shots .gm-phone + .gm-phone { margin-top: clamp(28px, 5vw, 64px); }
@media (min-width: 992px) {
	.gm-split--reverse { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr) !important; }
	.gm-split--reverse > :first-child { order: 2; }
}
.gm-benefit { border-top: 2px solid var(--gm-ink, #07130f); padding-top: 24px; }

/* Example quotes: one per kind of work, each a real capture of the customer's page. */
.gm-examples { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 4vw, 48px) clamp(14px, 2vw, 28px); }
.gm-example { display: grid; justify-items: center; align-content: start; gap: 2px; text-align: center; text-decoration: none; color: inherit; }
.gm-example .gm-phone { max-width: 230px; margin-bottom: 14px; transition: transform .25s ease; }
.gm-example:hover .gm-phone { transform: translateY(-6px); }
.gm-site a.gm-example--other { align-self: center; text-align: left; }
.gm-gallery { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, 2vw, 24px); width: 100%; }
.gm-gallery--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1040px; margin-inline: auto; }
.gm-site .gm-cap { font-weight: 650; color: var(--gm-heading); }
.gm-site .gm-yearly { margin-top: -10px; font-weight: 650; color: var(--gm-heading); }
.gm-caption { font-size: 14px; color: var(--gm-subtle); text-align: center; }
.gm-shots--captioned { flex-direction: column; align-items: center; gap: 14px; }
.gm-shots--captioned .gm-phone { flex: none; width: 100%; max-width: 300px; }
@media (max-width: 991px) {
	/* Tablets: two across. The "something else" card is the eighth tile, so no row is left short. */
	.gm-examples { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gm-example .gm-phone { max-width: 250px; }
	/* Every example stays whole and on the page: they wrap, they are never cut off or scrolled away. */
	.gm-gallery { display: flex; flex-wrap: wrap; justify-content: center; gap: 32px 20px; }
	.gm-gallery .gm-example { flex: none; width: calc((100% - 40px) / 3); }
	.gm-gallery--4 .gm-example { width: calc((100% - 20px) / 2); }
}
@media (max-width: 599px) {
	.gm-gallery { gap: 28px 14px; }
	.gm-gallery .gm-example { width: calc((100% - 14px) / 2); }
	.gm-gallery .gm-example .gm-h3 { font-size: 17px !important; }
}
@media (max-width: 519px) {
	/* Phones: one example at a time, big enough to read. */
	.gm-examples { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.gm-example .gm-phone { max-width: 270px; }
}
/* Trade page hero: words, then the example quote, once there is no room for both. */
@media (max-width: 767px) {
	.gm-split--hero { grid-template-columns: minmax(0, 1fr) !important; }
}
/* Tablets: feature rows are stacked, so centre the words over the screens. */
@media (min-width: 600px) and (max-width: 991px) {
	.gm-showcase > :first-child { max-width: 620px !important; margin-inline: auto; align-items: center; text-align: center; }
	.gm-showcase > :first-child .gm-check { text-align: left; }
}

/* A trade's starter price list (real data from the app, as a plain list). */
.gm-pack { background: #fff; color: var(--gm-ink, #07130f); border-radius: 28px; padding: clamp(22px, 3vw, 34px); width: 100%; }
.gm-pack__title { font-family: var(--gm-display); font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.gm-pack__hint { font-size: 14.5px; color: var(--gm-muted, #5c6b64); margin: 2px 0 14px !important; }
.gm-pack ul { list-style: none; margin: 0; padding: 0; }
.gm-pack li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--gm-line, #e2e7de); }
.gm-pack li b { display: block; font-weight: 650; }
.gm-pack li small { display: block; font-size: 13.5px; color: var(--gm-muted, #5c6b64); }
.gm-pack li strong { font-family: var(--gm-display); font-size: 19px; font-weight: 700; white-space: nowrap; }
.gm-pack__foot { display: flex; align-items: center; gap: 8px; margin: 14px 0 0 !important; padding-top: 16px; border-top: 1px solid var(--gm-line, #e2e7de); font-size: 14.5px; font-weight: 650; color: var(--gm-brand, #047857); }

/* The moving strip of trades (in place of customer logos we don't have). */
.gx-marquee { display: flex; overflow: hidden; width: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.gx-strip { flex: none; display: flex; gap: 10px; margin: 0; padding: 0 10px 0 0; list-style: none; animation: gx-marquee 38s linear infinite; }
.gx-marquee:hover .gx-strip { animation-play-state: paused; }
.gx-strip a { display: inline-flex; align-items: center; gap: 9px; padding: 10px 18px 10px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .13); background: rgba(255, 255, 255, .05); color: #fff; font-weight: 600; font-size: 15px; line-height: 1.4; text-decoration: none; white-space: nowrap; transition: border-color .15s, background-color .15s; }
.gx-strip a:hover { border-color: var(--gm-spark, #c6f432); }
.gx-strip svg { color: var(--gm-spark, #c6f432); flex: none; }
@keyframes gx-marquee { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
	.gx-marquee { -webkit-mask-image: none; mask-image: none; }
	.gx-strip { animation: none; flex-wrap: wrap; justify-content: center; flex: 1; padding: 0; }
	.gx-strip[aria-hidden] { display: none; }
}

/* ------------------------------------------------------------------ Walkthrough: five steps, one real screen each */
.gm-walk-panel { border-radius: 32px; padding: clamp(18px, 4vw, 56px); }
.gm-walk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.gm-walk__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.gm-walk__step { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; width: 100%; padding: 18px 20px; border: 0; border-radius: 20px; background: transparent; text-align: left; font: inherit; color: rgba(255, 255, 255, .8); cursor: pointer; overflow: hidden; transition: background-color .2s, color .2s; }
.gm-walk__step:hover { background: rgba(255, 255, 255, .1); }
.gm-walk__step b { display: block; font-family: var(--gm-display); font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.gm-walk__step small { display: block; font-size: 15px; margin-top: 3px; }
.gm-walk__num { font-family: var(--gm-display); font-weight: 700; font-size: 17px; padding-top: 3px; font-variant-numeric: tabular-nums; }
.gm-walk__step.is-active { background: #fff; color: var(--gm-ink, #07130f); }
.gm-walk__step.is-active small { color: var(--gm-muted, #5c6b64); }
.gm-walk__step.is-active .gm-walk__num { color: var(--gm-brand, #047857); }
.gm-walk__bar { position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: var(--gm-spark, #c6f432); transform: scaleX(0); transform-origin: left; }
.gm-walk.is-playing .gm-walk__step.is-active .gm-walk__bar { animation: gm-progress var(--gm-dur, 4.5s) linear forwards; }
@keyframes gm-progress { to { transform: scaleX(1); } }
.gm-walk__stage { position: relative; display: grid; justify-items: center; }
.gm-walk.is-held .gm-walk__step.is-active .gm-walk__bar { animation-play-state: paused; }
.gm-walk__stage .gm-held { top: -32px; } /* above the phone, clear of its screen */
.gm-walk__caption { display: none; }
.gm-walk__num i { font-style: normal; }
.gm-walk__scene { grid-area: 1 / 1; max-width: 300px; opacity: 0; transform: translateY(12px); transition: opacity .4s ease, transform .4s ease; pointer-events: none; }
.gm-walk__scene.is-active { opacity: 1; transform: none; pointer-events: auto; }
@media (max-width: 699px) {
	/* Phones: all five steps in one row, none hidden; the step in view is described underneath. */
	.gm-walk-panel { padding: 22px 12px 26px; border-radius: 26px; }
	.gm-walk { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.gm-walk__steps { grid-template-columns: repeat(var(--gm-steps, 5), minmax(0, 1fr)); gap: 2px; align-items: stretch; }
	.gm-walk__step { grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: start; gap: 7px; height: 100%; padding: 10px 2px 12px; border-radius: 14px; text-align: center; }
	.gm-walk__step small, .gm-walk__num i { display: none; }
	.gm-walk__step b { font-size: 12px; letter-spacing: -.01em; line-height: 1.15; }
	.gm-walk__num { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border-radius: 50%; font-size: 13px; border: 1.5px solid rgba(255, 255, 255, .45); }
	.gm-walk__step.is-active .gm-walk__num { border-color: transparent; background: var(--gm-ink, #07130f); color: var(--gm-spark, #c6f432); }
	.gm-site .gm-walk .gm-walk__caption { display: block; margin: 18px 8px 22px; min-height: 2.8em; text-align: center; font-size: 16px; font-weight: 550; line-height: 1.4; color: #fff; }
	.gm-walk__scene { max-width: min(80%, 280px); }
}

/* ------------------------------------------------------------------ Questions beside their heading */
.gm-faq-split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.gm-faq-split__head { position: sticky; top: 110px; }
.gm-faq-split .gm-faqs { max-width: none !important; }
@media (max-width: 991px) {
	.gm-faq-split { grid-template-columns: minmax(0, 1fr); }
	.gm-faq-split__head { position: static; }
}

/* ------------------------------------------------------------------ Final call to action (lime) */
.gm-cta-panel {
	width: 100%; max-width: 1416px; margin: 0 auto; border-radius: 36px;
	display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 40px; align-items: center; padding: clamp(40px, 6vw, 80px) clamp(24px, 6vw, 96px);
}
.gm-cta-panel__text { align-self: center; }
.gm-cta-panel .gm-btn { align-self: flex-start; padding: 16px 32px; font-size: 17px; }
.gm-cta-panel__visual { display: flex; justify-content: center; }
/* "Rather use your phone?": a QR code of the app's address. Only where it is any use: at a
   computer (someone already on their phone has nothing to point at it). */
.gm-getapp { display: none; }
@media (min-width: 992px) and (hover: hover) {
	.gm-getapp { display: flex; align-items: center; gap: 16px; margin-top: 10px; }
	.gm-getapp__code { flex: none; width: 104px; height: 104px; border-radius: 12px 12px 12px 3px; overflow: hidden; background: #fff; }
	.gm-getapp__code svg { display: block; width: 100%; height: 100%; }
	.gm-site .gm-getapp p { max-width: 230px; margin: 0; font-size: 14px; line-height: 1.45; color: var(--gm-ink, #07130f); }
	.gm-getapp strong { display: block; font-weight: 700; }
}
.gm-cta-panel__visual .gm-phone { max-width: 250px; }
@media (max-width: 991px) {
	.gm-cta-panel { grid-template-columns: minmax(0, 1fr); gap: 36px; text-align: center; }
	.gm-cta-panel__text { align-items: center; }
	.gm-cta-panel__text .gm-stack { align-items: center; }
	.gm-cta-panel .gm-btn { align-self: center; }
	.gm-cta-panel__visual .gm-phone { max-width: 220px; }
}
@media (max-width: 767px) { .gm-cta-panel { border-radius: 26px; } }

/* ------------------------------------------------------------------ Lists, FAQ, tables */
.gm-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.gm-check > li, .gm-check > .brxe-text-basic { position: relative; padding-left: 28px; }
.gm-check > li::before, .gm-check > .brxe-text-basic::before {
	content: ""; position: absolute; left: 0; top: .25em; width: 17px; height: 17px; background: var(--gm-tick);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 17px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 17px no-repeat;
}
.gm-faqs { display: grid; gap: 10px; text-align: left; }
.gm-faq { background: var(--gm-faq-bg, var(--gm-soft, #f3f5ef)); border-radius: 18px; padding: 0 26px; transition: background .15s; }
.gm-section--soft .gm-faq { --gm-faq-bg: #fff; }
.gm-faq > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; font-weight: 650; font-size: 18px; color: var(--gm-ink, #07130f); }
.gm-faq > summary::-webkit-details-marker { display: none; }
.gm-faq > summary::after { content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--gm-ink, #07130f) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c6f432' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 14px no-repeat; transition: transform .2s ease; }
.gm-faq[open] > summary::after { transform: rotate(45deg); }
.gm-faq > :not(summary) { padding: 0 48px 24px 0; color: var(--gm-muted, #5c6b64); }
.gm-table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.gm-table th, .gm-table td { text-align: left; padding: 14px 12px; border-bottom: 1px solid var(--gm-line, #e2e7de); }
.gm-table th { color: var(--gm-ink, #07130f); font-weight: 700; }
.gm-table td:not(:first-child), .gm-table th:not(:first-child) { text-align: center; }
.gm-table-wrap { overflow-x: auto; width: 100%; }

/* Pricing */
.gm-per { font-size: 16px; color: var(--gm-subtle); font-weight: 500; letter-spacing: 0; }
.gm-badge { position: absolute; top: 26px; right: 26px; font-size: 12.5px; font-weight: 700; color: var(--gm-spark, #c6f432); background: var(--gm-ink, #07130f); padding: 5px 12px; border-radius: 999px; }
.gm-card { position: relative; }
.gm-card.gm-lime { border-color: transparent; }

/* Industry cards */
a.gm-industry { text-decoration: none; transition: border-color .15s ease, transform .2s ease; }
a.gm-industry:hover { border-color: var(--gm-accent); transform: translateY(-3px); }
.gm-industry .gm-arrow-link { margin-top: auto; color: var(--gm-accent); }

/* Legal text */
.gm-prose h2 { font-family: var(--gm-display); font-size: 24px; font-weight: 700; color: var(--gm-ink, #07130f); margin: 36px 0 10px; letter-spacing: -.02em; }
.gm-prose h3 { font-family: var(--gm-display); font-size: 19px; font-weight: 700; color: var(--gm-ink, #07130f); margin: 26px 0 8px; letter-spacing: -.015em; }
.gm-prose p, .gm-prose ul { margin: 0 0 14px; }
.gm-prose li { margin-bottom: 6px; }
.gm-prose code { font-size: .92em; padding: 1px 6px; border-radius: 6px; background: rgba(7, 19, 15, .07); overflow-wrap: anywhere; }
.gm-prose ul { padding-left: 22px; }
.gm-prose a { color: var(--gm-brand, #047857); font-weight: 600; }

/* ------------------------------------------------------------------ Footer (dark) */
.gm-footer { background: var(--gm-ink, #07130f); }
.gm-footer a { text-decoration: none; color: rgba(255, 255, 255, .7); }
.gm-footer a:hover { color: var(--gm-spark, #c6f432); }
.gm-footer a.gm-logo { color: #fff; }
.gm-footer__col { display: grid; gap: 11px; align-content: start; font-size: 15px; }
.gm-footer__title { color: #fff; font-weight: 650; font-size: 14px; margin-bottom: 4px; }
.gm-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 24px; }
.gm-footer__legal { font-size: 14.5px; }
@media (max-width: 991px) { .gm-footer__brand { grid-column: 1 / -1; } }

/* ------------------------------------------------------------------ Contact form */
.gm-site .brxe-form { width: 100%; }
.gm-site .brxe-form input, .gm-site .brxe-form textarea { border: 1px solid var(--gm-line, #e2e7de); border-radius: 12px; padding: 13px 14px; font: inherit; font-size: 16px; background: #fff; width: 100%; }
.gm-site .brxe-form input:focus, .gm-site .brxe-form textarea:focus { outline: none; border-color: var(--gm-brand, #047857); box-shadow: 0 0 0 3px rgba(4, 120, 87, .14); }
.gm-site .brxe-form label { font-weight: 600; font-size: 15px; color: var(--gm-ink, #07130f); text-transform: none; letter-spacing: 0; }
.gm-site .brxe-form .bricks-button { background: var(--gm-ink, #07130f); color: #fff; border-radius: 999px; padding: 15px 26px; font-weight: 700; font-size: 16px; }
.gm-site .brxe-form .bricks-button:hover { background: var(--gm-brand-2, #065f46); }

/* ------------------------------------------------------------------ Blog */
.gm-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); width: 100%; }
.gm-site a.gm-post, .gm-post { display: flex; flex-direction: column; gap: 12px; padding: clamp(22px, 2.6vw, 32px); border-radius: 24px; background: var(--gm-card-bg, #fff); border: 1px solid var(--gm-card-line, #e2e7de); color: var(--gm-body); text-decoration: none; transition: border-color .15s ease, transform .2s ease; }
.gm-post:hover { border-color: var(--gm-ink, #07130f); transform: translateY(-3px); }
.gm-post__meta { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gm-accent); }
.gm-post__title { margin: 0; font-family: var(--gm-display); font-size: clamp(21px, 2vw, 25px); line-height: 1.15; font-weight: 700; letter-spacing: -.025em; color: var(--gm-heading); }
.gm-post__sum { font-size: 16px; line-height: 1.55; color: var(--gm-subtle); }
.gm-post__more { margin-top: auto; padding-top: 6px; font-size: 15.5px; }
.gm-posts__none { color: var(--gm-subtle); }
.gm-site .gm-article-head { text-align: center; }
.gm-site .gm-article-head a { text-decoration: none; }
.gm-article-meta { margin: 0; font-size: 15px; font-weight: 600; color: var(--gm-subtle); }
.gm-article { width: 100%; max-width: 720px; margin-inline: auto; font-size: 18.5px; line-height: 1.7; color: var(--gm-body); }
.gm-article > *:first-child { margin-top: 0; }
.gm-article p { margin: 0 0 1.15em; }
.gm-article > p:first-of-type { font-size: 21px; line-height: 1.55; color: var(--gm-heading); }
.gm-article h2 { margin: 1.9em 0 .55em; font-family: var(--gm-display); font-size: clamp(25px, 3vw, 31px); line-height: 1.15; font-weight: 700; letter-spacing: -.03em; color: var(--gm-heading); }
.gm-article h3 { margin: 1.6em 0 .5em; font-size: 20px; line-height: 1.3; font-weight: 700; color: var(--gm-heading); }
.gm-article ul, .gm-article ol { margin: 0 0 1.3em; padding-left: 1.25em; }
.gm-article li { margin: 0 0 .5em; padding-left: .2em; }
.gm-article li::marker { color: var(--gm-accent); }
.gm-article strong { color: var(--gm-heading); }
.gm-article a { color: var(--gm-accent); font-weight: 650; text-underline-offset: 3px; }
.gm-article em { color: var(--gm-subtle); }
.gm-article img { max-width: 100%; height: auto; border-radius: 16px; }
/* Wording a reader can borrow. */
.gm-site .gm-article blockquote { margin: 0 0 1.3em; padding: 18px 22px; border: 0; border-radius: 18px; background: #f3f5ef; color: var(--gm-heading); font-family: inherit; font-style: normal; font-size: 17.5px; line-height: 1.55; }
.gm-site .gm-article blockquote::before { content: "For example"; display: block; margin-bottom: 6px; font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gm-subtle); }
.gm-article blockquote p { margin: 0; }
@media (max-width: 991px) { .gm-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) {
	.gm-posts { grid-template-columns: minmax(0, 1fr); }
	.gm-article { font-size: 17.5px; }
	.gm-article > p:first-of-type { font-size: 19.5px; }
}


/* ------------------------------------------------------------------ Motion */
.gm-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--gm-delay, 0ms); }
.gm-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.gm-site * { transition: none !important; }
	.gm-reveal { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ Help search */
/* Text only screen readers hear (a label the search box's placeholder already shows). */
.gm-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.gm-help-search { width: 100%; max-width: 720px; margin: 8px auto 0; display: grid; gap: 14px; text-align: left; }
.gm-help-search__form { position: relative; }
.gm-help-search__form[hidden] { display: none; }
.gm-help-search__icon { position: absolute; left: 20px; top: 30px; width: 22px; height: 22px; transform: translateY(-50%); fill: none; stroke: var(--gm-ink, #07130f); stroke-width: 2.2; stroke-linecap: round; pointer-events: none; }
.gm-site .gm-help-search input[type="search"] { box-sizing: border-box; width: 100%; min-height: 60px; padding: 16px 18px 16px 54px; border: 2px solid transparent; border-radius: 14px; background: #fff; color: var(--gm-ink, #07130f); font: inherit; font-size: 18px; outline: none; -webkit-appearance: none; appearance: none; }
.gm-site .gm-help-search input[type="search"]::placeholder { color: #6b7a73; }
.gm-site .gm-help-search input[type="search"]:focus-visible { border-color: var(--gm-spark, #c6f432); box-shadow: 0 0 0 3px rgba(198, 244, 50, .35); }
.gm-help-search__try { margin: 8px 0 0; font-size: 15px; color: var(--gm-subtle); }
.gm-help-search.is-searching .gm-help-search__try { display: none; }
.gm-help-search__status { margin: 0; min-height: 1.6em; font-size: 15px; color: var(--gm-subtle); }
.gm-help-search__status:empty { min-height: 0; }
.gm-help-topics { display: flex; flex-wrap: wrap; gap: 8px; }
.gm-help-topics a { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--gm-ghost-line); color: var(--gm-heading); font-size: 15px; font-weight: 650; text-decoration: none; transition: background-color .15s, border-color .15s; }
.gm-help-topics a:hover, .gm-help-topics a:focus-visible { background: rgba(255, 255, 255, .08); border-color: var(--gm-accent); }
.gm-help-topics a span { font-weight: 500; color: var(--gm-subtle); font-variant-numeric: tabular-nums; }
.gm-help-search.is-searching .gm-help-topics { display: none; }
.gm-help-none { margin: 0; padding: 16px 18px; border-radius: 14px; background: rgba(255, 255, 255, .06); color: var(--gm-body); font-size: 16px; }
.gm-help-none a { color: var(--gm-accent); font-weight: 650; }
.gm-help-group[hidden] { display: none !important; }
.gm-help-results { max-width: none !important; }
.gm-help-results[hidden] { display: none; }
.gm-faq[hidden] { display: none; }
/* An answer someone was sent a link to sits clear of the fixed header. */
.gm-faq, .gm-help-group { scroll-margin-top: 96px; }
/* The contact page's version, on a light surface, sending the search to the help centre. */
.gm-help-search--contact { margin: 4px 0 0; max-width: 560px; gap: 10px; }
.gm-help-search--contact label { font-size: 16px; font-weight: 650; color: var(--gm-heading); }
.gm-help-search__row { display: flex; gap: 8px; }
.gm-site .gm-help-search--contact input[type="search"] { min-height: 52px; padding: 12px 16px; border: 1px solid var(--gm-line, #e2e7de); font-size: 16px; }
.gm-site .gm-help-search--contact input[type="search"]:focus-visible { border-color: var(--gm-brand, #047857); box-shadow: 0 0 0 3px rgba(4, 120, 87, .2); }
.gm-help-search--contact .gm-btn { flex: none; min-height: 52px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--gm-btn-bg); color: var(--gm-btn-fg); cursor: pointer; font: inherit; font-size: 16px; font-weight: 700; }
@media (max-width: 420px) {
	.gm-help-search__row { flex-direction: column; }
	.gm-help-topics a { flex: 1 1 auto; justify-content: space-between; }
}

/* ------------------------------------------------------------------ Articles */
/* The article's own summary under its title, and when it was last brought up to date. */
.gm-article-dek, .gm-site .gm-article-dek { margin: 4px auto 0; max-width: 680px; font-size: clamp(18px, 2.1vw, 21px); line-height: 1.5; color: var(--gm-body); text-align: center; }
.gm-site .gm-article-meta { margin-top: 10px; font-size: 14.5px; }
/* Contents beside the text on a wide screen, above it on a narrow one. */
.gm-article-layout { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; justify-items: center; }
.gm-article-side { width: 100%; max-width: 720px; display: grid; gap: 18px; }
@media (min-width: 1100px) {
	.gm-article-layout { grid-template-columns: 260px minmax(0, 720px); justify-content: center; align-items: start; gap: 56px; }
	/* The contents stay beside the text, never taller than the window: a long list scrolls
	   inside itself, and keeps the section being read in view (site.js). */
	.gm-article-side { position: sticky; top: 96px; display: flex; flex-direction: column; max-height: calc(100vh - 120px); }
	.gm-article-side > .gm-toc { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; }
	.gm-article-side > .gm-toc details { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
}
.gm-toc { width: 100%; max-width: 720px; }
.gm-toc details { border: 1px solid var(--gm-line, #e2e7de); border-radius: 16px; padding: 4px 18px; background: #fff; }
.gm-toc summary { cursor: pointer; padding: 12px 0; min-height: 24px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gm-subtle); list-style: none; display: flex; justify-content: space-between; align-items: center; }
.gm-toc summary::-webkit-details-marker { display: none; }
.gm-toc summary::after { content: ""; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform .2s ease; }
.gm-toc details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.gm-toc ol { margin: 0 0 12px; padding: 0; list-style: none; counter-reset: gm-toc; }
.gm-toc li { counter-increment: gm-toc; }
.gm-site .gm-toc a { display: flex; gap: 10px; padding: 8px 0; min-height: 24px; font-size: 15px; line-height: 1.35; font-weight: 600; color: var(--gm-body); text-decoration: none; border-top: 1px solid var(--gm-line, #e2e7de); }
.gm-toc li:first-child a { border-top: 0; }
.gm-toc a::before { content: counter(gm-toc, decimal-leading-zero); flex: none; font-variant-numeric: tabular-nums; color: var(--gm-subtle); font-weight: 500; }
.gm-site .gm-toc a:hover { color: var(--gm-brand, #047857); }
/* The section being read: a bar beside it, in the brand colour, number and all. */
.gm-site .gm-toc a.is-here { color: var(--gm-brand, #047857); box-shadow: inset 3px 0 0 var(--gm-brand, #047857); padding-left: 12px; background: linear-gradient(90deg, rgba(4, 120, 87, .07), transparent); }
.gm-toc a.is-here::before { color: var(--gm-brand, #047857); font-weight: 700; }
.gm-article h2[id], .gm-article-faq { scroll-margin-top: 100px; }
/* "In short": what the reader will take away, before they start. */
.gm-takeaways { margin: 0 0 2em; padding: 22px 24px; border-radius: 18px; background: var(--gm-ink, #07130f); color: rgba(255, 255, 255, .86); }
.gm-takeaways__title { margin: 0 0 10px !important; font-size: 13px !important; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gm-spark, #c6f432) !important; }
.gm-takeaways ul { margin: 0 !important; padding-left: 1.1em !important; }
.gm-takeaways li { margin-bottom: .45em; font-size: 17px; line-height: 1.5; }
.gm-takeaways li::marker { color: var(--gm-spark, #c6f432) !important; }
/* A real screen, whole, in its frame, with what it shows underneath. */
.gm-article-shot { margin: 1.8em auto 2em; display: grid; justify-items: center; gap: 12px; }
.gm-article-shot .gm-phone { max-width: 280px; }
.gm-article-shot--wide .gm-browser { width: 100%; }
.gm-article-shot figcaption { max-width: 520px; font-size: 15px; line-height: 1.5; text-align: center; color: var(--gm-subtle); }
.gm-site .gm-article .gm-article-shot img { border-radius: 0; }
/* Words to copy: an email, a line for a quote. */
.gm-copy { margin: 1.5em 0 1.8em; border: 1px solid var(--gm-line, #e2e7de); border-radius: 16px; overflow: hidden; background: #fbfcf8; }
.gm-copy__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px 10px 18px; border-bottom: 1px solid var(--gm-line, #e2e7de); background: #f3f5ef; }
.gm-copy__head span { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gm-subtle); }
.gm-copy__btn { flex: none; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--gm-ink, #07130f); color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.gm-copy__btn.is-done { background: var(--gm-brand, #047857); }
.gm-copy__text { padding: 16px 18px; white-space: pre-wrap; font-size: 16.5px; line-height: 1.6; color: var(--gm-heading); overflow-wrap: anywhere; }
/* A tip set apart from the text. */
.gm-site .gm-article .gm-tip { margin: 1.5em 0; padding: 16px 20px; border-left: 4px solid var(--gm-ink, #07130f); border-radius: 0 14px 14px 0; background: #f3f5ef; font-size: 17px; line-height: 1.55; color: var(--gm-heading); }
.gm-site .gm-article .gm-tip p { margin: 0; }
/* Comparison tables: short cells, so they fit a phone without scrolling sideways. */
.gm-article .gm-table { width: 100%; margin: 1.4em 0 1.8em; border-collapse: collapse; font-size: 16px; line-height: 1.45; }
.gm-article .gm-table th, .gm-article .gm-table td { padding: 12px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--gm-line, #e2e7de); }
.gm-article .gm-table thead th { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gm-subtle); border-bottom: 2px solid var(--gm-ink, #07130f); }
.gm-article .gm-table tbody th { font-weight: 700; color: var(--gm-heading); }
.gm-article .gm-table td.gm-num, .gm-article .gm-table th.gm-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gm-article .gm-table tfoot td, .gm-article .gm-table tfoot th { font-weight: 700; color: var(--gm-heading); border-bottom: 0; }
/* The one thing the article leads to, done in the app. */
.gm-try { margin: 2.2em 0; padding: clamp(22px, 3vw, 30px); border-radius: 22px; background: var(--gm-ink, #07130f); display: grid; grid-template-columns: minmax(0, 1fr) 130px; gap: 22px; align-items: center; }
.gm-try__title { margin: 0 0 6px !important; font-family: var(--gm-display); font-size: 23px !important; line-height: 1.2 !important; font-weight: 700; letter-spacing: -.02em; color: #fff !important; }
.gm-try p { margin: 0 0 14px; font-size: 16.5px; line-height: 1.5; color: rgba(255, 255, 255, .78); }
.gm-site .gm-try__btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: 999px; background: var(--gm-spark, #c6f432); color: var(--gm-ink, #07130f); font-weight: 700; font-size: 16px; text-decoration: none; }
.gm-try__note { display: block; margin-top: 8px; font-size: 13.5px; color: rgba(255, 255, 255, .6); }
.gm-try__shot { max-width: 130px; }
@media (max-width: 520px) { .gm-try { grid-template-columns: minmax(0, 1fr); } .gm-try__shot { display: none; } }
/* Questions at the end of an article. */
.gm-article-faq { margin-top: 2.4em; }
.gm-article-faq .gm-faq > div { padding-bottom: 18px; }
.gm-article-faq .gm-faq p { font-size: 17px; }
/* Article cards with the article's own screen. */
/* (The whole screen, never cropped: the site shows the product as it is.) */
/* A guide's cover: the same square on every card, edge to edge across its top. */
.gm-post--cover { overflow: hidden; }
.gm-post__cover { display: block; margin: calc(-1 * clamp(22px, 2.6vw, 32px)) calc(-1 * clamp(22px, 2.6vw, 32px)) 8px; aspect-ratio: 1 / 1; overflow: hidden; background: var(--gm-ink, #07130f); }
.gm-post__cover img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.gm-post--cover:hover .gm-post__cover img { transform: scale(1.03); }

/* "The easy way": how much simpler the same thing is in the app. */
.gm-site .gm-article .gm-easy { margin: 1.6em 0; padding: 16px 20px; border: 1px solid #d5e8a4; border-radius: 16px; background: #f6fbe6; color: var(--gm-heading); font-size: 17px; line-height: 1.55; }
.gm-site .gm-article .gm-easy p { margin: 0; }
.gm-site .gm-article .gm-easy strong { color: var(--gm-brand, #047857); }
.gm-site .gm-article .gm-easy a { color: var(--gm-ink, #07130f); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
/* By hand, or in the app: the second column is the app's, marked in the brand colour. */
.gm-article .gm-table--vs tbody td:last-child { color: var(--gm-heading); font-weight: 600; }
.gm-article .gm-table--vs thead th:last-child { color: var(--gm-brand, #047857); }

/* [gugab_template]: a quote template drawn as the page it makes, with brackets to fill in. */
.gm-template { margin: 1.6em 0 1.8em; }
.gm-template__sheet { background: #fff; border: 1px solid #dfe5da; border-radius: 6px; box-shadow: 0 24px 50px -30px rgba(7, 19, 15, .35); padding: clamp(20px, 4.5vw, 44px); font-size: 14.5px; line-height: 1.5; color: #1d2a24; }
.gm-template__sheet .gm-f { background: #f2f9d9; border-bottom: 1.5px dashed #9bbf2a; padding: 0 3px; color: #3b4a10; white-space: nowrap; }
.gm-template__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 2px solid #1d2a24; }
.gm-template__logo { display: grid; place-items: center; width: 64px; height: 64px; border: 1.5px dashed #9fb0a7; border-radius: 10px; font-size: 11px; font-weight: 700; color: #7b8b84; text-align: center; line-height: 1.2; margin-bottom: 10px; }
.gm-site .gm-template__biz { margin: 0; font-weight: 700; font-size: 16px; }
.gm-site .gm-template__small { margin: 2px 0 0; font-size: 13px; color: #5c6b64; }
.gm-template__doc { text-align: right; }
.gm-site .gm-template__word { margin: 0 0 6px; font-family: var(--gm-display); font-size: clamp(26px, 4vw, 34px); font-weight: 800; letter-spacing: .02em; line-height: 1; color: #1d2a24; }
.gm-template__meta { display: grid; grid-template-columns: auto auto; gap: 2px 12px; justify-content: end; font-size: 13px; }
.gm-template__meta dt { color: #5c6b64; margin: 0; }
.gm-template__meta dd { margin: 0; text-align: right; }
.gm-template__for { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 20px; padding: 18px 0; border-bottom: 1px solid #e3e8df; }
.gm-site .gm-template__label { margin: 0 0 4px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #5c6b64; }
.gm-site .gm-template__for p { margin: 0; }
.gm-site .gm-template__job { font-weight: 700; }
.gm-template__table { width: 100%; border-collapse: collapse; margin: 18px 0 6px; font-size: 14px; }
.gm-template__table th { text-align: left; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #5c6b64; padding: 0 0 8px; border-bottom: 1.5px solid #1d2a24; }
.gm-template__table td { padding: 10px 0; border-bottom: 1px solid #e3e8df; vertical-align: top; }
.gm-template__table .gm-n { text-align: right; padding-left: 10px; white-space: nowrap; }
.gm-template__table th.gm-n { text-align: right; }
.gm-template__extra td { color: #4a5a53; }
.gm-template__sums { margin: 10px 0 0 auto; width: min(100%, 300px); display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; font-size: 14px; }
.gm-template__sums dt, .gm-template__sums dd { margin: 0; }
.gm-template__sums dd { text-align: right; }
.gm-template__sums .gm-total { font-weight: 800; font-size: 16px; padding-top: 6px; border-top: 1.5px solid #1d2a24; }
.gm-template__notes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-top: 22px; padding-top: 18px; border-top: 1px solid #e3e8df; }
.gm-site .gm-template__notes p { margin: 0; font-size: 13.5px; }
.gm-template__sign { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; margin-top: 26px; }
.gm-template__sign span { display: block; border-bottom: 1px solid #1d2a24; height: 28px; }
.gm-template__sign small { display: block; margin-top: 4px; font-size: 12px; color: #5c6b64; }
.gm-template__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.gm-template__bar button { min-height: 44px; padding: 0 18px; border-radius: 999px; font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; border: 1.5px solid var(--gm-ink, #07130f); background: #fff; color: var(--gm-ink, #07130f); }
.gm-template__bar button.gm-template__primary { background: var(--gm-ink, #07130f); color: #fff; }
.gm-template__bar button.is-done { background: var(--gm-brand, #047857); border-color: var(--gm-brand, #047857); color: #fff; }
.gm-site .gm-template__next { margin: 14px 0 0; font-size: 15.5px; color: var(--gm-body); }
@media (max-width: 560px) {
	.gm-template__doc { text-align: left; }
	.gm-template__meta { justify-content: start; }
	.gm-template__meta dd { text-align: left; }
	.gm-template__for, .gm-template__notes { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.gm-template__table .gm-hide { display: none; }
	.gm-template__sheet .gm-f { white-space: normal; }
}

/* A guide's heading: the title and its details beside the cover (stacked on a phone). */
.gm-article-hero { width: 100%; max-width: 1120px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; }
.gm-article-head { align-items: flex-start; }
.gm-article-head h1 { text-align: left; }
.gm-site .gm-article-head .gm-article-dek { margin: 4px 0 0; max-width: 620px; text-align: left; }
.gm-article-head .gm-article-meta { text-align: left; }
.gm-article-cover { margin: 0; width: 100%; max-width: 420px; aspect-ratio: 1 / 1; border-radius: 24px; overflow: hidden; background: #eef2e8; }
.gm-article-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 992px) {
	.gm-article-hero { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(40px, 5vw, 72px); }
	.gm-article-cover { justify-self: end; }
}