/*
 * Get Started page styles.
 *
 * Everything is scoped under #mhub-get-started-root and prefixed mhub-gs-, for
 * two different reasons. The scope keeps these rules off the rest of wp-admin,
 * which shares the page with us. The prefix keeps wp-admin's rules off us:
 * WordPress ships `a:hover, a:focus { color: <scheme blue> }` at specificity
 * (0,1,1), which outranks a plain class, so every link on this page re-declares
 * its colour on hover, focus and active rather than inheriting one.
 *
 * No Tailwind. The page is mostly gradients, pseudo-classes and keyframes -
 * none of which a utility class expresses well - and this way the bundle owes
 * nothing to a config file shared with another page.
 *
 * Nothing here loads from the network. The calendar grid is two repeating
 * linear gradients, the ground is a five-layer mesh, and the grain is an inline
 * SVG filter, so the whole hero costs one paint and no requests.
 */

#mhub-get-started-root {
	/* Brand. #085DF2 is MeetingHub's blue, the same value tailwind.config.js
	   registers as `brand` for the upgrade page. */
	--mhub-gs-brand: #085df2;
	--mhub-gs-brand-700: #0a52d0;

	/* The signal blues. Lighter than the brand on purpose: these are light
	   sources on a near-black ground, and the brand blue alone is too dark to
	   read as emitted light. */
	--mhub-gs-signal: #4c8dff;
	--mhub-gs-signal-soft: #8fb8ff;
	--mhub-gs-signal-pale: #dce9ff;

	/* Gold, for the upgrade control only. It has to be the one warm thing on a
	   cold panel or it reads as another blue button. */
	--mhub-gs-gold: #f0c25a;
	--mhub-gs-gold-700: #dda83c;

	/* The page under the hero. */
	--mhub-gs-page: #f5f7fb;
	--mhub-gs-card: #ffffff;
	--mhub-gs-line: #e3e8f0;
	--mhub-gs-line-soft: #eef1f7;
	--mhub-gs-text: #0f172a;
	--mhub-gs-text-muted: #55617a;
	--mhub-gs-text-faint: #7b869c;

	/*
	 * The gutter between a panel's edge and its content, and the one number
	 * that keeps the help tiles and the setup card on the same two vertical
	 * lines. The tiles sit inside a panel and the card sits on the page, so
	 * without a shared token the card has to guess the panel's padding - and
	 * it guessed wrong by 20px a side, which is close enough to read as a
	 * misalignment rather than as a different measure.
	 */
	--mhub-gs-panel-pad: 24px;

	box-sizing: border-box;
	min-height: calc( 100vh - 32px );
	background: var( --mhub-gs-page );
	color: var( --mhub-gs-text );
	/* DriveHub's stack, so the two admin pages set type identically. On this
	   machine both resolve to Segoe UI; ui-sans-serif is what picks up the
	   platform UI face on macOS and newer Chrome. */
	font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	-webkit-font-smoothing: antialiased;

	/*
	 * No pull to the left. The page already removes #wpcontent's 20px padding in
	 * PHP - see Mhub_Get_Started::enqueue_assets - and a negative margin on top
	 * of that put the page 20px underneath the admin menu. Invisible while
	 * everything was opaque, and not invisible at all once the pinned tab bar
	 * arrived: its backdrop-filter samples what sits behind it, found the dark
	 * menu in that strip, and smeared it 14px into the page along the left edge.
	 */
}

/*
 * The reset is wrapped in `:where()`, and that is the most load-bearing detail
 * in this file.
 *
 * Written the obvious way - `#mhub-get-started-root p { margin: 0 }` - the id
 * gives every reset declaration a specificity of (1,0,1), which silently beats
 * every component rule below it. Measured in a browser, that cost this page two
 * separate bugs: the tab pill lost its dark fill and the FAQ rows lost their
 * hover, because a `background` in the reset outranked them; and the headline,
 * subline and platform rail all lost their `margin: auto` and sat against the
 * left edge of a hero that is meant to be centred.
 *
 * `:where()` contributes nothing to specificity, so these rules score (0,0,1)
 * and any class below can override them. The scoping is unchanged - nothing
 * outside this page is touched.
 */
:where( #mhub-get-started-root ) *,
:where( #mhub-get-started-root ) *::before,
:where( #mhub-get-started-root ) *::after {
	box-sizing: border-box;
}

:where( #mhub-get-started-root ) p,
:where( #mhub-get-started-root ) h1,
:where( #mhub-get-started-root ) h2,
:where( #mhub-get-started-root ) h3,
:where( #mhub-get-started-root ) h4,
:where( #mhub-get-started-root ) ul,
:where( #mhub-get-started-root ) li {
	margin: 0;
	padding: 0;
}

:where( #mhub-get-started-root ) ul {
	list-style: none;
}

:where( #mhub-get-started-root ) button {
	font-family: inherit;
	border: 0;
	background: transparent;
	cursor: pointer;
}

/*
 * wp-admin's own focus ring, removed from this page's links.
 *
 * WordPress ships `a:focus { box-shadow: 0 0 0 2px <scheme blue> }`, and a
 * shadow is not an outline, so declaring `outline` on focus does not replace it
 * - it stacks a blue ring on top. Measured in the browser: every anchor here
 * carried `rgb(56,88,233) 0 0 0 2px`, which put a blue ring around a gold
 * button on a navy card.
 *
 * Every link listed here declares its own visible `:focus-visible` outline, so
 * nothing is being taken away without a replacement. The hero call to action is
 * absent on purpose: it has a real drop shadow of its own and gets its ring
 * suppressed beside that shadow, further down.
 */
.mhub-gs-upgrade:focus,
.mhub-gs-card__action:focus,
.mhub-gs-upcard__btn:focus {
	box-shadow: none;
}


/* ==========================================================================
   Hero
   ========================================================================== */

/*
 * No overflow-hidden on the section itself. The tab bar rendered after it is
 * sticky, and clipping at this level would slice it in half once it pins. The
 * decorative layers get their own clipped wrapper inside instead.
 */
.mhub-gs-hero {
	position: relative;
	isolation: isolate;

	/*
	 * The ground, and there is nothing else on it.
	 *
	 * Two layers: a deep navy ramp, and one soft brand-blue rise from below the
	 * bottom edge so the panel is lit rather than filled.
	 *
	 * What this replaced is worth naming, because every part of it was defended
	 * at the time and all of it together was the problem: a five-stop colour
	 * mesh, a dot grid, hour rules, column rules, a now-marker, three glass
	 * chips, a horizon glow, a scrim, a vignette and a film grain. Ten layers
	 * behind four lines of text. Each was quiet on its own and the sum was
	 * noise - and noise made of many faint layers is exactly what generated
	 * hero art looks like.
	 *
	 * The five services now sit in the page as a row of marks, at full strength,
	 * where they are read once instead of being decoded through a blur.
	 */
	background:
		radial-gradient( 46% 62% at 50% 6%, rgba( 76, 141, 255, 0.15 ) 0%, rgba( 76, 141, 255, 0 ) 70% ),
		radial-gradient( 80% 72% at 50% 118%, rgba( 8, 93, 242, 0.34 ) 0%, rgba( 8, 93, 242, 0 ) 72% ),
		linear-gradient( 180deg, #0b1020 0%, #0a1428 100% );}

/*
 * One centred column, which is DriveHub's arrangement and stays DriveHub's.
 *
 * A two-column version was built and taken back out. Side by side is the
 * marketing banner's shape, and a marketing banner is selling to somebody who
 * has not installed anything; this panel is welcoming somebody who already
 * has. The artwork belongs behind the welcome, not beside it competing for the
 * same glance.
 *
 * The panel's height is the point of the numbers below. DriveHub's Get Started
 * hero measures 369px, and that is the target: short enough that the tab bar
 * under it is on screen without scrolling, which is the whole reason a welcome
 * panel can afford to be a welcome panel. This one measured 618px before the
 * glass tile, the rings and the sweep came out.
 *
 * The measure matches .mhub-gs-body exactly - same max-width, same horizontal
 * padding - so the panel and the sections under it share one column. Two
 * different measures on one page read as a misalignment even when nobody can
 * say what is wrong.
 */
.mhub-gs-hero__inner {
	position: relative;
	margin: 0 auto;
	max-width: 1100px;
	padding: 40px 32px 48px;
	text-align: center;
}

/*
 * 56 over 64, DriveHub's own figures, on a shorter panel than DriveHub's.
 *
 * Their headline takes two lines where ours takes one, so the same padding
 * gives us a panel around 55px shorter than theirs. That is the right way
 * round here: this is a header on a screen somebody opens when they are
 * stuck, not a landing page, and everything they came for sits below it.
 */
@media ( min-width: 640px ) {
	.mhub-gs-hero__inner {
		padding: 56px 32px 64px;
	}
}

@media ( min-width: 1400px ) {
	.mhub-gs-hero__inner {
		max-width: 1260px;
	}
}


/* --- Headline and subline ------------------------------------------------ */

.mhub-gs-h1 {
	margin: 0 auto;
	max-width: 36ch;
	font-size: 30px;
	font-weight: 600;
	line-height: 1.18;
	letter-spacing: -0.03em;
	color: #fff;
}

@media ( min-width: 640px ) {
	.mhub-gs-h1 {
		font-size: 44px;
	}
}

/*
 * The second line, and the reason the serif italic went.
 *
 * A serif italic in a gradient is DriveHub's voice, borrowed here for a
 * sentence that is now MeetingHub's own line from its own marketing site. The
 * site sets that sentence in the same sans as everything else and colours only
 * the two words that carry the meaning, so this does the same.
 *
 * Set a size down and a weight lighter than the line above it. Two lines at one
 * size and weight read as a single sentence that happened to wrap; the step
 * down is what makes the first line a greeting and the second a description of
 * what you were greeted into.
 */
.mhub-gs-h1__line2 {
	display: block;
	margin: 12px auto 0;
	max-width: 56ch;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.01em;
	color: rgba( 226, 232, 240, 0.82 );
}

/*
 * The highlight.
 *
 * A gradient rather than a flat blue, running from the brand into the pale end
 * of the same ramp, so the highlighted words are lit by the panel rather than
 * painted onto it.
 *
 * An em element, because this is genuine emphasis rather than a colour swatch:
 * a screen reader should stress these two words, which is exactly what the
 * design is doing visually. The italic that tag brings is turned off, since the
 * emphasis is carried by colour and weight and a slanted pair of words inside a
 * sans headline reads as a mistake.
 *
 * The padding stops a descender being clipped by the span box, which
 * background-clip does the moment a glyph crosses the edge.
 */
.mhub-gs-hl {
	font-style: normal;
	font-weight: 600;

	/*
	 * Solid, not a gradient.
	 *
	 * A gradient was tried first and it failed for a reason worth recording:
	 * background-clip sizes the ramp to each element, so with one em per word
	 * the ramp restarted on every word and each one faded out across its own
	 * length. Measured on screen, webinar went from brand blue at the w to
	 * near-white by the r - the emphasis died exactly where the word ended.
	 *
	 * Flat colour also matches what the marketing site does with these same two
	 * words, and it is simply more legible at 26px on a dark ground.
	 */
	color: var( --mhub-gs-signal-soft );
}

/*
 * The app icon, set in the headline beside the word it names.
 *
 * Sized in em so it tracks the headline. A square tile reads smaller than a
 * wide glyph at the same height, so it is set past cap height and centred on
 * the cap span rather than sat on the baseline - a baseline-aligned tile floats
 * above the line, because a letter fills only the cap band while a tile fills
 * its whole box.
 */
/*
 * The mark and the word it names, kept together.
 *
 * Without this the headline wraps between them on a narrow screen: line one
 * ends "Welcome to" plus a stranded logo, and "MeetingHub." starts line two.
 * A logo beside the word it names is composition; a logo alone at the end of a
 * line is a stray graphic.
 */
.mhub-gs-h1__lockup {
	white-space: nowrap;
}

.mhub-gs-h1__mark {
	display: inline-block;
	width: auto;
	height: 0.98em;
	vertical-align: -0.14em;
	filter: drop-shadow( 0 4px 10px rgba( 0, 0, 0, 0.45 ) );
}


/* --- Platform artwork ---------------------------------------------------- */

/*
 * The five services, drawn into the panel instead of offered as controls.
 *
 * A layer, not content: it sits behind everything, takes no space, and cannot
 * be clicked or tabbed to. The marks it holds are decorative here, so the whole
 * thing is hidden from assistive technology in the component.
 *
 * It stretches to .mhub-gs-hero__inner rather than to the section, so the
 * geometry is measured against the same box the text column is centred in.
 * That is what keeps every mark in the gutters as the panel resizes.
 */
.mhub-gs-art {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}

/*
 * Everything the panel says sits above the artwork.
 *
 * .mhub-gs-art is the first child, so source order alone would put the title
 * behind it. These are the panel's own elements, given a layer rather than the
 * artwork being given a negative one: a negative z-index would drop it behind
 * the panel's background as well, and the marks would vanish.
 */
.mhub-gs-h1,
.mhub-gs-status,
.mhub-gs-upgrade,
.mhub-gs-cta-wrap {
	position: relative;
	z-index: 1;
}

/*
 * The orbit itself.
 *
 * Stretched to the panel rather than kept square, so the curve stays centred on
 * the headline's icon at every width instead of drifting as the panel gets
 * wider. That distorts the drawing space, which is why the paths ask for a
 * non-scaling stroke.
 */
.mhub-gs-art__orbit {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/*
 * One mark on the orbit.
 *
 * Positioned by its centre, because the coordinates are points on a curve and a
 * mark hung by its top-left corner sits off that curve by half its own size.
 * Left, top, opacity and blur come from the component, which computes them.
 */
.mhub-gs-art__node {
	position: absolute;
	display: block;
	transform: translate( -50%, -50% );
}

.mhub-gs-art__mark {
	display: block;
	width: auto;
}

/*
 * Below this the gutters have gone.
 *
 * The text column keeps its measure as the panel narrows, so the empty space
 * either side is what disappears first. Once it is too narrow to hold a mark
 * clear of the words, there is nowhere honest to put this and it comes off.
 */
@media ( max-width: 1120px ) {
	.mhub-gs-art {
		display: none;
	}
}


/* --- Call to action ------------------------------------------------------ */

/*
 * One call to action, and only one. A second link beside it splits the
 * decision and costs clicks on the first.
 *
 * Every state is spelled out, including the colour. wp-admin's
 * `a:hover { color: <scheme blue> }` beats a plain class, so without an
 * explicit hover and focus colour this button's white label turns blue on
 * hover under every admin colour scheme.
 *
 * The white rim is what carries the boundary contrast. WCAG asks 3:1 of a
 * component edge, and a blue fill on a blue-lit panel cannot promise that on
 * its own once the sweep is drifting across the background behind it. The rim
 * gives the pill a defined edge against whatever passes underneath.
 *
 * Hover lifts toward white rather than darkening: on a near-black panel,
 * darkening on hover walks the control back into the ground it is trying to
 * stand out from.
 */

.mhub-gs-cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 34px;
	min-height: 58px;
	padding: 17px 40px;
	border: 1px solid rgba( 255, 255, 255, 0.28 );
	border-radius: 999px;
	background: var( --mhub-gs-brand );
	font-size: 16.5px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: #fff;
	text-decoration: none;
	/*
	 * Two shadows and a ring, doing three different jobs.
	 *
	 * The brand-tinted glow is what separates the control from the panel: at
	 * #085df2 on this navy the button measures 3.35:1 against its own
	 * background, which clears the 3:1 WCAG asks of a component boundary and
	 * clears it by very little. Brightening the fill would fix that and cost
	 * the white label its 5.4:1, so the separation is added as light around
	 * the button instead of colour inside it.
	 *
	 * The dark shadow sits it on the panel, and the inset highlight gives the
	 * top edge the lit look the rest of the hero has.
	 */
	box-shadow:
		0 0 0 4px rgba( 8, 93, 242, 0.13 ),
		0 14px 34px -10px rgba( 8, 93, 242, 0.55 ),
		0 18px 40px -12px rgba( 0, 0, 0, 0.85 ),
		inset 0 1px 0 rgba( 255, 255, 255, 0.16 );
	transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/*
 * The hover fill is #216DF3, and the exact value is not a guess.
 *
 * Hover lifts the brand blue toward white by 10%. It first shipped at a much
 * bigger lift, #2F77FF, which measured 4.04:1 for the white label in the
 * browser - under the 4.5:1 AA floor. A hover state is where a label is most
 * likely to be read, so it is the last place worth spending contrast on a
 * brightness effect. 10% still reads as a clear lift and measures 4.62:1.
 *
 * If this ever moves again, measure the label against the fill, not the fill
 * against the panel.
 */
.mhub-gs-cta:hover {
	transform: translateY( -2px );
	border-color: rgba( 255, 255, 255, 0.44 );
	background: #216df3;
	color: #fff;
	box-shadow:
		0 0 0 6px rgba( 8, 93, 242, 0.2 ),
		0 18px 42px -10px rgba( 8, 93, 242, 0.7 ),
		0 24px 50px -12px rgba( 0, 0, 0, 0.9 ),
		inset 0 1px 0 rgba( 255, 255, 255, 0.22 );
}

/*
 * The resting shadow is restated here rather than left to inherit.
 *
 * wp-admin's `a:focus` sets its own `box-shadow`, which replaces this button's
 * lift and inset highlight with a flat blue ring. Writing the shadow back on
 * focus keeps the control looking like itself; the white outline below is what
 * actually marks it as focused.
 */
.mhub-gs-cta:focus {
	color: #fff;
	box-shadow:
		0 0 0 4px rgba( 8, 93, 242, 0.13 ),
		0 14px 34px -10px rgba( 8, 93, 242, 0.55 ),
		0 18px 40px -12px rgba( 0, 0, 0, 0.85 ),
		inset 0 1px 0 rgba( 255, 255, 255, 0.16 );
}

.mhub-gs-cta:focus:hover {
	box-shadow:
		0 0 0 6px rgba( 8, 93, 242, 0.2 ),
		0 18px 42px -10px rgba( 8, 93, 242, 0.7 ),
		0 24px 50px -12px rgba( 0, 0, 0, 0.9 ),
		inset 0 1px 0 rgba( 255, 255, 255, 0.22 );
}

.mhub-gs-cta:focus-visible {
	color: #fff;
	outline: 2px solid rgba( 255, 255, 255, 0.75 );
	outline-offset: 4px;
}

.mhub-gs-cta:active {
	transform: translateY( 0 );
	border-color: rgba( 255, 255, 255, 0.28 );
	background: var( --mhub-gs-brand-700 );
	color: #fff;
	box-shadow:
		0 10px 24px -12px rgba( 0, 0, 0, 0.85 ),
		inset 0 1px 0 rgba( 255, 255, 255, 0.1 );
}

.mhub-gs-cta__arrow {
	transition: transform 0.2s ease;
}

.mhub-gs-cta:hover .mhub-gs-cta__arrow {
	transform: translateX( 4px );
}

/* --- Upgrade pill -------------------------------------------------------- */

/*
 * Upgrade, in the corner. Gold rather than the brand blue: an ink-blue button
 * disappears into a blue-lit panel, and the blue call to action below is the
 * one thing a new user should press first. Outlined and small on purpose - it
 * stays quiet until it is wanted, then fills on hover.
 */
.mhub-gs-upgrade {
	position: absolute;
	top: 18px;
	right: 18px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border: 1px solid rgba( 240, 194, 90, 0.42 );
	border-radius: 999px;
	background: rgba( 240, 194, 90, 0.1 );
	font-size: 12.5px;
	font-weight: 600;
	color: var( --mhub-gs-gold );
	text-decoration: none;
	backdrop-filter: blur( 4px );
	-webkit-backdrop-filter: blur( 4px );
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.mhub-gs-upgrade:hover,
.mhub-gs-upgrade:focus-visible {
	border-color: var( --mhub-gs-gold );
	background: var( --mhub-gs-gold );
	color: #14213d;
}

.mhub-gs-upgrade:focus {
	color: #14213d;
}

.mhub-gs-upgrade:focus-visible {
	outline: 2px solid rgba( 240, 194, 90, 0.7 );
	outline-offset: 2px;
}

.mhub-gs-upgrade:active {
	background: var( --mhub-gs-gold-700 );
	color: #14213d;
}

@media ( min-width: 640px ) {
	.mhub-gs-upgrade {
		top: 22px;
		right: 30px;
	}
}




/* ==========================================================================
   Tab navigation
   ========================================================================== */

/*
 * Pulled up so the pill sits across the join.
 *
 * The hero ends on a hard horizontal edge, navy against near-white, and the
 * nav used to float 24px below it as an unattached island with a heavy shadow
 * and nothing to cast it onto. Overlapping the edge interlocks the two planes
 * and gives the shadow something to fall on, which is what makes the seam read
 * as deliberate rather than as two sections that happen to touch.
 *
 * -48px, because the inner already holds 24px of top padding: the pill has to
 * travel that, and then the same distance again to sit half over the edge.
 * Layout only - once the nav pins, sticky positions it against the viewport
 * and this margin stops mattering.
 */
/*
 * The tab bar clears the hero rather than straddling it.
 *
 * It used to be pulled up 48px so the pill sat half on the dark panel and
 * half on the page. That made the navigation look like part of the welcome
 * banner, and page navigation does not belong inside a welcome moment.
 * DriveHub separates the two and leaves 24px between them; this is that
 * gap, and the same padding becomes the space under the admin bar once the
 * bar pins.
 */
.mhub-gs-navwrap {
	position: sticky;
	z-index: 30;
}

/*
 * Frosted band behind the pinned nav.
 *
 * Without it, page content scrolls through the gaps around the pill and sits
 * sharply behind it, which reads as a bug. This blurs whatever passes
 * underneath and fades out downward so there is no hard edge across the page.
 * It is only shown once the nav has actually pinned - at rest it would put a
 * blurred strip across the bottom of the hero, over artwork meant to be sharp.
 */
.mhub-gs-navwrap__band {
	position: absolute;
	inset: 0 0 -20px 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.3s ease;
	backdrop-filter: blur( 14px ) saturate( 140% );
	-webkit-backdrop-filter: blur( 14px ) saturate( 140% );
	background: linear-gradient(
		to bottom,
		rgba( 245, 247, 251, 0.9 ) 0%,
		rgba( 245, 247, 251, 0.64 ) 55%,
		rgba( 245, 247, 251, 0 ) 100%
	);
	mask-image: linear-gradient( to bottom, #000 0%, #000 58%, transparent 100% );
	-webkit-mask-image: linear-gradient( to bottom, #000 0%, #000 58%, transparent 100% );
}

.mhub-gs-navwrap--stuck .mhub-gs-navwrap__band {
	opacity: 1;
}

.mhub-gs-navwrap__inner {
	position: relative;
	display: flex;
	justify-content: center;
	padding: 24px 24px 0;
}

.mhub-gs-nav {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px;
	padding: 6px;
	border: 1px solid var( --mhub-gs-line );
	border-radius: 999px;
	background: var( --mhub-gs-card );
	box-shadow: 0 18px 40px -18px rgba( 8, 20, 45, 0.45 );
}

.mhub-gs-nav__btn {
	display: inline-flex;
	background: transparent;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 500;
	color: var( --mhub-gs-text-muted );
	transition: background-color 0.15s ease, color 0.15s ease;
}

.mhub-gs-nav__btn:hover {
	background: #eff2f7;
	color: var( --mhub-gs-text );
}

.mhub-gs-nav__btn:focus-visible {
	outline: 2px solid var( --mhub-gs-brand );
	outline-offset: 2px;
}

.mhub-gs-nav__btn:active {
	background: #e4e9f1;
}

.mhub-gs-nav__btn--active,
.mhub-gs-nav__btn--active:hover {
	background: #101a30;
	font-weight: 600;
	color: #fff;
}

.mhub-gs-nav__btn--active:active {
	background: #1c2942;
}

/* The 1px nudge every labelled icon in this page carries: a line box seats its
   letters below its own middle, so a centred glyph reads high beside them. */
.mhub-gs-nav__btn svg {
	transform: translateY( 1px );
	color: var( --mhub-gs-text-faint );
}

.mhub-gs-nav__btn--active svg {
	color: #fff;
}


/* ==========================================================================
   Page body
   ========================================================================== */

/*
 * The tab decides the measure, and everything in it reads that one value.
 *
 * The FAQ is a single column of prose at 760px and the plan table needs 840
 * for its three columns, but the upgrade band is rendered once for the whole
 * page and cannot know which tab it is under. Declaring the measure here,
 * keyed on the tab, means the band lines up with whatever is above it
 * instead of running wider than the section it follows.
 */
.mhub-gs-body {
	--mhub-gs-measure: 100%;

	/*
	 * One gap between the page's top-level blocks. Every block that stacks on
	 * this tab reads it, so the rhythm is a single number rather than a value
	 * repeated in four rules that drifted apart - see the grouped rule below.
	 */
	--mhub-gs-block: 56px;

	margin: 0 auto;
	padding: 32px 32px 56px;
	max-width: 1100px;
}

.mhub-gs-body[data-tab='faq'] {
	--mhub-gs-measure: 760px;
}

.mhub-gs-body[data-tab='plans'] {
	--mhub-gs-measure: 840px;
}

@media ( min-width: 1400px ) {
	.mhub-gs-body {
		max-width: 1260px;
	}
}

/* Content fades up on a tab change, so the swap reads as a transition rather
   than as the page having been replaced underneath the reader. */
.mhub-gs-rise {
	animation: mhub-gs-rise 0.32s cubic-bezier( 0.22, 0.61, 0.36, 1 ) both;
}

@keyframes mhub-gs-rise {
	from {
		opacity: 0;
		transform: translateY( 8px );
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/*
 * The gap between top-level blocks, in one place.
 *
 * There were two rules for this and they disagreed. '.mhub-gs-section +
 * .mhub-gs-section' set 44px; '.mhub-gs-section--spaced' set 56px under a
 * comment claiming 56 was "the one gap used from here down". It was not: the
 * sibling selector is (0,2,0) against the class's (0,1,0), so the first gap on
 * a tab measured 56 and every gap after it silently collapsed to 44. Reading
 * down Get in Touch that came out as 56, then 44, then 24 above the upgrade
 * band - three numbers for one relationship, which is what made the page feel
 * unsettled rather than any single gap being wrong.
 *
 * The band is in this group rather than carrying its own margin. It is the
 * last block on the tab, not a separate kind of thing, and it was the 24 that
 * pulled it up against the cards above it.
 */
.mhub-gs-section + .mhub-gs-section,
.mhub-gs-section--spaced,
.mhub-gs-upcard {
	margin-top: var( --mhub-gs-block );
}

/*
 * One heading scale for the page, taken from DriveHub's Get Started.
 *
 * Section headings were 19px here and 24px on the two tabs that had been
 * rebuilt, so the same level of heading changed size depending on which tab
 * you were on. 24px at 1.5 with -0.02em is DriveHub's, and it is now the
 * only value: the tab-scoped overrides that used to carry it are gone.
 *
 * The line-heights matter as much as the sizes. Every heading here inherited
 * 1.4 from the body, which set a 15px card title on an 18.2px line against
 * DriveHub's 22.5px. Headings are 1.5, ledes 1.625.
 */
.mhub-gs-section__title {
	font-size: 24px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: -0.02em;
	color: var( --mhub-gs-text );
}

.mhub-gs-section__lede {
	margin-top: 8px;
	font-size: 14px;
	line-height: 1.625;
	color: var( --mhub-gs-text-muted );
}

.mhub-gs-section__head {
	margin-bottom: 32px;
}

.mhub-gs-section__head--centred {
	text-align: center;
}

/* A centred heading wants its lede centred with it and held to a measure. */
.mhub-gs-section__head--centred .mhub-gs-section__lede,
.mhub-gs-help__head .mhub-gs-section__lede {
	margin-left: auto;
	margin-right: auto;
	max-width: 68ch;
}


/* --- Help panel ---------------------------------------------------------- */

/*
 * The panel the help cards sit in, ported from DriveHub's Get Started.
 *
 * A tinted, bordered field rather than four cards on the bare page. It gives the
 * one section that matters most on this tab a container of its own, which is
 * what stops it reading as the same weight as everything under it.
 *
 * Two washes in opposite corners: brand blue from the top left, a violet from
 * the bottom right, over an all-but-white ramp. Both are at 7 and 10 per cent -
 * enough that the panel is not flat, not enough to tint the cards sitting on it.
 */
.mhub-gs-help {
	overflow: hidden;
	padding: 48px var( --mhub-gs-panel-pad );
	border: 1px solid var( --mhub-gs-line );
	border-radius: 24px;
	background:
		radial-gradient( 70% 90% at 8% 0%, rgba( 8, 93, 242, 0.07 ) 0%, rgba( 8, 93, 242, 0 ) 55% ),
		radial-gradient( 65% 85% at 95% 100%, rgba( 129, 140, 248, 0.1 ) 0%, rgba( 129, 140, 248, 0 ) 58% ),
		linear-gradient( 180deg, #ffffff 0%, #fbfcfd 100% );
}

@media ( min-width: 640px ) {
	#mhub-get-started-root {
		--mhub-gs-panel-pad: 40px;
	}

	.mhub-gs-help {
		padding-top: 48px;
		padding-bottom: 48px;
	}
}

.mhub-gs-help__head {
	text-align: center;
}

/* 900px, so four cards stay comfortable rather than stretching to the panel's
   full width on a wide screen.

   32px under the heading, not 36: every other head on the page is 32, and this
   panel is the first thing read on the tab, so it was the one setting the
   expectation the rest then broke. */
/*
 * The two four-up grids on this tab, on one rule.
 *
 * Both used `auto-fit` with a min column width, and the two mins disagreed -
 * 208px here, 250px for the recipes - so at a 1024px window the help panel
 * broke to three columns while the recipes broke to two. Four cards in three
 * columns is the part that actually hurts: it leaves one card alone on a row
 * under three, which reads as a card that failed to load.
 *
 * So the counts are set rather than fitted, and they go 4, 2, 1 - never 3, and
 * never 5. Both grids turn at the same two widths, so the page never shows two
 * different four-up rhythms at once.
 *
 * `minmax( 0, 1fr )` rather than `1fr`: a grid track's automatic minimum is its
 * content, so a long unbroken string in one card would otherwise push that
 * column wider than its share and knock the row out of true.
 */
.mhub-gs-help__grid,
.mhub-gs-recipes {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
}

/*
 * Held to a measure of its own, narrower than the page grid on purpose.
 *
 * Uncapped, these tiles ran to 267px against the recipe cards' 287 and the row
 * went sparse - a one-line description, an icon in one corner and a badge
 * stranded in the other. They are four routes out of the page, not four pieces
 * of content, and a tile that is wider than it has anything to say in reads as
 * a card that lost its text. Weight follows importance: the recipes get the
 * page's full column, these get a tile.
 *
 * The 620px at the two-column stage is the same idea - without it, four tiles
 * dropping to two would each grow to 442px, which is wider than they ever are
 * on a large screen.
 */
.mhub-gs-help__grid {
	margin: 32px auto 0;
	max-width: 900px;
}

.mhub-gs-recipes {
	align-items: start;
}

@media ( max-width: 1240px ) {
	.mhub-gs-help__grid,
	.mhub-gs-recipes {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.mhub-gs-help__grid {
		max-width: 620px;
	}
}

@media ( max-width: 640px ) {
	.mhub-gs-help__grid,
	.mhub-gs-recipes {
		grid-template-columns: minmax( 0, 1fr );
	}

	/* One tile per row takes the panel, the same as every other block down here. */
	.mhub-gs-help__grid {
		max-width: none;
	}
}


/* --- Channel cards ------------------------------------------------------- */

.mhub-gs-chan {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 20px;
	border: 1px solid var( --mhub-gs-line );
	border-radius: 16px;
	background: var( --mhub-gs-card );
	text-decoration: none;
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.mhub-gs-chan:hover {
	transform: translateY( -4px );
}

.mhub-gs-chan:focus {
	box-shadow: none;
}

.mhub-gs-chan:focus-visible {
	outline: 2px solid var( --mhub-gs-brand );
	outline-offset: 3px;
}

.mhub-gs-chan:active {
	transform: translateY( -1px );
}

/*
 * The icon tile.
 *
 * Every hex below is written literally and none of them is a palette token.
 * Three of these are other companies' colours, and a brand's colour is not ours
 * to theme - if this admin ever gains a user-configurable accent, a tile keyed
 * to it would repaint Facebook and YouTube along with everything else.
 */
.mhub-gs-chan__tile {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	transition: transform 0.2s ease;
}

.mhub-gs-chan:hover .mhub-gs-chan__tile {
	transform: scale( 1.05 );
}

.mhub-gs-chan--docs .mhub-gs-chan__tile {
	background: #fffbeb;
	color: #d97706;
}

.mhub-gs-chan--docs:hover {
	border-color: #fde68a;
	box-shadow: 0 12px 26px -12px rgba( 217, 119, 6, 0.28 );
}

.mhub-gs-chan--video .mhub-gs-chan__tile {
	background: #fff1f2;
}

.mhub-gs-chan--video:hover {
	border-color: #fecdd3;
	box-shadow: 0 12px 26px -12px rgba( 244, 63, 94, 0.26 );
}

.mhub-gs-chan--community .mhub-gs-chan__tile {
	background: #eaf2fe;
}

.mhub-gs-chan--community:hover {
	border-color: #bbd6fa;
	box-shadow: 0 12px 26px -12px rgba( 24, 119, 242, 0.28 );
}

.mhub-gs-chan--support .mhub-gs-chan__tile {
	background: #eceefe;
	color: #3858e9;
}

.mhub-gs-chan--support:hover {
	border-color: #c3c9fb;
	box-shadow: 0 12px 26px -12px rgba( 56, 88, 233, 0.28 );
}

/* The corner badge. Drawn at rest so the card never changes height, filled on
   hover and on keyboard focus so both routes get the same feedback. */
.mhub-gs-chan__badge {
	position: absolute;
	top: 16px;
	right: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #f1f5f9;
	color: var( --mhub-gs-text-muted );
	transition: background-color 0.2s ease, color 0.2s ease;
}

.mhub-gs-chan:hover .mhub-gs-chan__badge,
.mhub-gs-chan:focus-visible .mhub-gs-chan__badge {
	background: #101a30;
	color: #fff;
}

.mhub-gs-chan__title {
	margin-top: 16px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: -0.01em;
	color: var( --mhub-gs-text );
}

.mhub-gs-chan__desc {
	margin-top: 6px;
	font-size: 12.5px;
	line-height: 1.625;
	color: var( --mhub-gs-text-muted );
}




/* --- Setup, once it is finished ------------------------------------------ */

/*
 * The whole checklist, reduced to one line with an end date.
 *
 * Confirmation still matters - somebody who has just finished wants to see
 * that it registered - but it does not matter forever, and it does not matter
 * enough to keep a third of the screen.
 */
.mhub-gs-donebar {
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
	padding: 12px 18px;
	border: 1px solid rgba( 22, 163, 74, 0.22 );
	border-radius: 12px;
	background: rgba( 22, 163, 74, 0.06 );
}

.mhub-gs-donebar__mark {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 999px;
	background: rgba( 22, 163, 74, 0.14 );
	color: #15803d;
}

.mhub-gs-donebar__text {
	flex: 1;
	font-size: 13.5px;
	line-height: 1.5;
	color: var( --mhub-gs-text-muted );
}

.mhub-gs-donebar__text strong {
	font-weight: 600;
	color: var( --mhub-gs-text );
}

.mhub-gs-donebar__dismiss {
	flex-shrink: 0;
	padding: 6px 12px;
	border-radius: 8px;
	font-size: 12.5px;
	font-weight: 600;
	color: var( --mhub-gs-text-muted );
	transition: background-color 0.15s ease, color 0.15s ease;
}

.mhub-gs-donebar__dismiss:hover {
	background: rgba( 22, 163, 74, 0.1 );
	color: #15803d;
}

.mhub-gs-donebar__dismiss:active {
	background: rgba( 22, 163, 74, 0.16 );
}

.mhub-gs-donebar__dismiss:focus-visible {
	outline: 2px solid #15803d;
	outline-offset: 2px;
}


/* --- Worth doing next ---------------------------------------------------- */

.mhub-gs-next-wrap {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

.mhub-gs-next {
	border: 1px solid var( --mhub-gs-line );
	border-radius: 16px;
	background: var( --mhub-gs-card );
	overflow: hidden;
}

.mhub-gs-next__item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 18px 20px 18px 22px;
}

.mhub-gs-next__item + .mhub-gs-next__item {
	border-top: 1px solid var( --mhub-gs-line-soft );
}

/*
 * The glyph carries the tone, so the four kinds of suggestion are told apart
 * before a word is read: something to do, something to fix, something to try,
 * and the one that costs money.
 */
.mhub-gs-next__glyph {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin-top: 1px;
	border-radius: 9px;
	background: rgba( 8, 93, 242, 0.09 );
	color: var( --mhub-gs-brand );
}

.mhub-gs-next__item--fix .mhub-gs-next__glyph {
	background: rgba( 217, 119, 6, 0.12 );
	color: #b45309;
}

.mhub-gs-next__item--try .mhub-gs-next__glyph {
	background: rgba( 22, 163, 74, 0.12 );
	color: #15803d;
}

.mhub-gs-next__item--pro .mhub-gs-next__glyph {
	background: rgba( 221, 168, 60, 0.18 );
	color: #8a6207;
}

.mhub-gs-next__body {
	flex: 1;
	min-width: 0;
}

.mhub-gs-next__title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: -0.01em;
	color: var( --mhub-gs-text );
}

/* Layout only, for the reason above the recipe badge. The title row is a flex
   line with its own 8px gap, so nothing else is needed here. */
.mhub-gs-next__plan {
	flex-shrink: 0;
}

.mhub-gs-next__desc {
	margin: 4px 0 10px;
	font-size: 13px;
	line-height: 1.625;
	color: var( --mhub-gs-text-muted );
}

/*
 * Dismiss. A tick rather than a cross, because this is "I have dealt with
 * this" rather than "go away" - and it is a 32px target with a real label
 * behind it for anybody who cannot see where it sits.
 */
.mhub-gs-next__dismiss {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	color: var( --mhub-gs-text-faint );
	transition: background-color 0.15s ease, color 0.15s ease;
}

.mhub-gs-next__dismiss:hover {
	background: #f1f5f9;
	color: #15803d;
}

.mhub-gs-next__dismiss:active {
	background: #e2e8f0;
}

.mhub-gs-next__dismiss:focus-visible {
	outline: 2px solid var( --mhub-gs-brand );
	outline-offset: 2px;
}

/* --- Setup checklist ----------------------------------------------------- */

/*
 * The panel, its header, and three rows that are all the same shape and none
 * of them the same sentence.
 *
 * Two things were wrong with the version this replaces and they pulled in
 * opposite directions. It had been cut back to a 590px card holding three
 * one-line rows, which left it the only small, bare, low-contrast block on a
 * page of full-width panels - an island, and an under-dressed one, when it is
 * the section carrying the thing the reader is actually meant to do next. And
 * two of its three rows were a tick, a grey title and 350px of nothing.
 *
 * So it gets its measure back at 860, a header of its own carrying the count,
 * and a second line on every row. The header is a card header - a title left,
 * the count right - not the uppercase letterspaced eyebrow that was here two
 * passes ago, and the count is words. It briefly had a three-segment meter,
 * which had to go: the segments filled from a running total rather than from
 * each step, so a site that had finished steps one and three lit segments one
 * and two, a picture contradicting the rows an inch below it.
 *
 * The second line changes job with the row. Before a step is done it says how
 * to do it; after, it reports - "Zoom is connected", "4 meetings so far". A
 * finished row that keeps its instructions is dead text, and one with nothing
 * under its title is the gap that made this feel unfinished. This is neither,
 * and it means no two rows on the panel carry the same shape of sentence.
 */
/*
 * 900, which is the help panel's grid, not a width chosen for this card.
 *
 * At 860 the card ran 360 to 1220 while the help tiles above it ran 340 to
 * 1240 - twenty pixels adrift on each side, which is the worst of both: too
 * close to read as a different measure, too far to read as the same one. The
 * two blocks now share a left and a right edge all the way down the page.
 */
.mhub-gs-setup {
	max-width: 900px;
	width: calc( 100% - 2 * var( --mhub-gs-panel-pad ) - 2px );
	margin: 0 auto;
	border: 1px solid var( --mhub-gs-line );
	border-radius: 16px;
	background: var( --mhub-gs-card );
	overflow: hidden;
}

.mhub-gs-setup__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 24px;
	border-bottom: 1px solid var( --mhub-gs-line-soft );
}

.mhub-gs-setup__label {
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: -0.01em;
	color: var( --mhub-gs-text );
}

.mhub-gs-setup__count {
	font-size: 13px;
	font-weight: 500;
	line-height: 1.5;
	font-variant-numeric: tabular-nums;
	color: var( --mhub-gs-text-muted );
}

.mhub-gs-setup__list {
	list-style: none;
}

/*
 * Rows align to their first line, not to their own middle. The 3px is the
 * difference between the 28px mark and the 21.75px line it is centred on.
 */
.mhub-gs-setup__item {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px 24px;
}

/*
 * The rail, which is what makes this a track rather than a checklist.
 *
 * These three are not settings. Only the first is configuration; the other two
 * are somebody using the plugin. What the list really is is the distance
 * between installing MeetingHub and having a meeting running on a page, and a
 * distance wants a line drawn along it. The marks were already three states -
 * ticked, current, ahead - and had nothing joining them, so they read as three
 * unrelated rows that happened to be numbered.
 *
 * Two segments per row rather than one line behind the marks: a single line
 * would need an opaque mark to hide behind, and the marks are translucent tints
 * that sit on two different grounds - white on most rows, the brand wash on the
 * current one.
 *
 * The geometry is the row's own: 24px of padding plus half a 28px mark puts the
 * centre 38px in, and 16px of padding minus the mark's 3px lift plus half of it
 * puts the centre 27px down. The 3px either side is the gap that stops the line
 * touching the ring.
 */
.mhub-gs-setup__item::before,
.mhub-gs-setup__item::after {
	content: '';
	position: absolute;
	left: 38px;
	width: 2px;
	margin-left: -1px;
	border-radius: 999px;
	background: var( --mhub-gs-line );
}

/* Row top down to the top of the mark. */
.mhub-gs-setup__item::before {
	top: 0;
	height: 10px;
}

/* Bottom of the mark down to the row's bottom edge. */
.mhub-gs-setup__item::after {
	top: 44px;
	bottom: 0;
}

/* Nothing above the first milestone or below the last: a track that runs off
   both ends is a scrollbar. */
.mhub-gs-setup__item:first-child::before,
.mhub-gs-setup__item:last-child::after {
	content: none;
}

/*
 * Ground already covered, in the tick's own green.
 *
 * Each segment is coloured by the milestone it leaves, so the rail stays true
 * even when the steps are finished out of order - which happens: a site can
 * have a meeting embedded from a previous install while the current one has
 * none.
 */
.mhub-gs-setup__item--done::after,
.mhub-gs-setup__item--done + .mhub-gs-setup__item::before {
	background: rgba( 22, 163, 74, 0.35 );
}

/*
 * The one step to do next, on a ground of its own.
 *
 * Full-bleed, because the panel has no side padding for a rounded inset to sit
 * in - an inset tile inside a card is two rounded rectangles 8px apart, which
 * is the nesting that reads as generated. A tinted band between two hairlines
 * is one row being pointed at.
 */
/* Tint only. It carried a 2px brand bar on its left edge before the rail
   existed; two vertical lines 38px apart is one line too many, and the filled
   blue mark on the rail already says which milestone is current. */
.mhub-gs-setup__item--next {
	background: rgba( 8, 93, 242, 0.045 );
}

/*
 * Three marks, three states, read at a glance and not by reading.
 *
 * Pending is a hollow ring - an outline of a thing not filled in yet. Next is
 * filled brand, because it is the only mark on the panel pointing at an action.
 * Done is a green tick, and it stays the only green on the page.
 */
.mhub-gs-setup__mark {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin-top: -3px;
	border: 1.5px solid var( --mhub-gs-line );
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	color: var( --mhub-gs-text-muted );
}

.mhub-gs-setup__item--next .mhub-gs-setup__mark {
	border-color: transparent;
	background: var( --mhub-gs-brand );
	color: #fff;
}

.mhub-gs-setup__item--done .mhub-gs-setup__mark {
	border-color: transparent;
	background: rgba( 22, 163, 74, 0.12 );
	color: #15803d;
}

.mhub-gs-setup__body {
	flex: 1;
	min-width: 0;
}

/*
 * Base weight is the quiet one - most rows here are either finished or not yet
 * reachable - and the next step is the row that gets full contrast and the
 * heavier face.
 */
.mhub-gs-setup__step {
	font-size: 14.5px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.01em;
	color: var( --mhub-gs-text-muted );
}

.mhub-gs-setup__item--next .mhub-gs-setup__step {
	font-weight: 600;
	color: var( --mhub-gs-text );
}

.mhub-gs-setup__desc {
	margin-top: 3px;
	font-size: 13px;
	line-height: 1.6;
	color: var( --mhub-gs-text-muted );
}

/* Centred on the row rather than on its first line: every row is two lines
   now, and a 44px button hung off the title reads as high. */
.mhub-gs-setup__cta {
	flex-shrink: 0;
	align-self: center;
	margin-left: 8px;
}

/*
 * A finished row's title is its own way back in.
 *
 * A quiet link at the end of every done row put two controls at the same size,
 * weight and x-position the moment two steps were finished, which reads as a
 * generated column rather than as two destinations. The title already names
 * where it goes, so it takes the link and the panel keeps one control: the
 * button on the step still to do.
 *
 * Colour is re-declared on every state because wp-admin ships
 * `a:hover, a:focus { color: <scheme blue> }` at (0,1,1), which outranks a
 * plain class.
 */
.mhub-gs-setup__titlelink,
.mhub-gs-setup__titlelink:visited {
	/* 21.75px of line box is under the 24px a pointer target needs, so it takes
	   2px of padding pulled back by an equal negative margin - the hit area
	   grows, the row keeps the height it had. Touch takes 44px; see the Touch
	   block below. */
	display: inline-block;
	padding-top: 2px;
	padding-bottom: 2px;
	margin-top: -2px;
	margin-bottom: -2px;
	color: inherit;
	text-decoration: none;
	transition: color 0.15s ease;
}

.mhub-gs-setup__titlelink:hover,
.mhub-gs-setup__titlelink:focus {
	color: var( --mhub-gs-brand );
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mhub-gs-setup__titlelink:active {
	color: var( --mhub-gs-brand-700 );
}

.mhub-gs-setup__titlelink:focus {
	box-shadow: none;
}

.mhub-gs-setup__titlelink:focus-visible {
	outline: 2px solid var( --mhub-gs-brand );
	outline-offset: 3px;
	border-radius: 4px;
}

/*
 * The same two turns the help grid takes, declared here because this rule sits
 * below the base one - set up with the grid, 900px simply won them both back.
 */
@media ( max-width: 1240px ) {
	.mhub-gs-setup {
		max-width: 620px;
	}
}

@media ( max-width: 640px ) {
	.mhub-gs-setup {
		max-width: none;
	}
}


/* --- What you can build -------------------------------------------------- */

/*
 * Four cards that open.
 *
 * They were static tiles and they read as a brochure. The closed card now sells
 * one idea and the open one is the instructions, which means the section is
 * worth a click rather than a scroll past.
 *
 * The whole card is the button. A "learn more" link in a corner would give a
 * 260x300 target a 90x20 hotspot, and there is nothing else on the card to
 * click.
 */

/* The .mhub-gs-recipes grid itself is up with the help grid - the two share one
   column rule so the page never runs two four-up rhythms at once. */
.mhub-gs-recipe {
	border: 1px solid var( --mhub-gs-line );
	border-radius: 16px;
	background: var( --mhub-gs-card );
	overflow: hidden;
	transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.mhub-gs-recipe:hover {
	border-color: #cfd8e6;
	box-shadow: 0 8px 22px -12px rgba( 15, 23, 42, 0.28 );
	transform: translateY( -2px );
}

/* The open card stays lifted, so the one you are reading is obvious in a row. */
.mhub-gs-recipe--open {
	border-color: rgba( 8, 93, 242, 0.35 );
	box-shadow: 0 10px 26px -14px rgba( 8, 93, 242, 0.45 );
}

.mhub-gs-recipe__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	padding: 0 0 18px;
	text-align: left;
}

.mhub-gs-recipe__head:focus-visible {
	outline: 2px solid var( --mhub-gs-brand );
	outline-offset: -2px;
	border-radius: 16px;
}


/* --- the drawing --- */

/*
 * The band the drawing sits in.
 *
 * A wash rather than a panel: the drawings have no frame of their own any more,
 * so the band is what gives them a ground to sit on, and it takes its tint from
 * the card's own accent so a Pro card is warm all the way up.
 */
.mhub-gs-recipe__frame {
	display: block;
	width: 100%;
	padding: 16px 18px 12px;
	background:
		radial-gradient( 120% 90% at 20% 0%, var( --art-tint-soft ) 0%, rgba( 255, 255, 255, 0 ) 70% ),
		linear-gradient( 180deg, #fbfcff 0%, #f3f6fc 100% );
	border-bottom: 1px solid var( --mhub-gs-line-soft );
}

/* A card being read gets a brighter ground, so the drawing wakes up with it. */
.mhub-gs-recipe--open .mhub-gs-recipe__frame,
.mhub-gs-recipe__head:hover .mhub-gs-recipe__frame {
	background:
		radial-gradient( 120% 90% at 20% 0%, var( --art-tint ) 0%, rgba( 255, 255, 255, 0 ) 72% ),
		linear-gradient( 180deg, #f9fbff 0%, #eef3fb 100% );
}



/* --- The recipe drawings ------------------------------------------------- */

/*
 * One palette, set on the card and read by the drawing.
 *
 * Every shape below paints with a custom property rather than a hex, so a card
 * changes its drawing's whole palette with one rule. Free recipes stay in brand
 * blue; Pro ones switch to the gold the PRO pill and the upgrade band already
 * use, which makes a row of four read as two and two before anything is read.
 */
.mhub-gs-recipe {
	--art-solid: #085df2;
	--art-mid: rgba( 8, 93, 242, 0.42 );
	--art-faint: rgba( 8, 93, 242, 0.18 );
	--art-tint: rgba( 8, 93, 242, 0.1 );
	--art-tint-soft: rgba( 8, 93, 242, 0.055 );
	--art-edge: rgba( 8, 93, 242, 0.24 );
	--art-line: rgba( 8, 93, 242, 0.28 );
}

.mhub-gs-recipe--pro {
	--art-solid: #d99a1f;
	--art-mid: rgba( 217, 154, 31, 0.45 );
	--art-faint: rgba( 217, 154, 31, 0.2 );
	--art-tint: rgba( 217, 154, 31, 0.13 );
	--art-tint-soft: rgba( 217, 154, 31, 0.07 );
	--art-edge: rgba( 217, 154, 31, 0.3 );
	--art-line: rgba( 217, 154, 31, 0.34 );
}

.mhub-gs-draw {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

/* The seven tones every drawing is built from. */
.mhub-gs-draw__solid {
	fill: var( --art-solid );
}

.mhub-gs-draw__mid {
	fill: var( --art-mid );
}

.mhub-gs-draw__faint {
	fill: var( --art-faint );
}

.mhub-gs-draw__tint {
	fill: var( --art-tint );
}

.mhub-gs-draw__tintSoft {
	fill: var( --art-tint-soft );
}

.mhub-gs-draw__edge {
	fill: none;
	stroke: var( --art-edge );
	stroke-width: 1.6;
}

.mhub-gs-draw__dashed {
	fill: #fff;
	stroke: var( --art-edge );
	stroke-width: 1.6;
}

.mhub-gs-draw__line {
	stroke: var( --art-line );
	stroke-width: 3;
	stroke-linecap: round;
}

.mhub-gs-draw__faintLine {
	stroke: var( --art-faint );
	stroke-width: 3;
	stroke-linecap: round;
}

.mhub-gs-draw__rail {
	stroke: var( --art-faint );
	stroke-width: 2;
	stroke-linecap: round;
}

.mhub-gs-draw__arc {
	fill: none;
	stroke: var( --art-mid );
	stroke-width: 1.6;
	stroke-linecap: round;
}

/* The hollow in the key head: white, so the shape reads as a ring rather
   than a filled dot with a halo. */
.mhub-gs-draw__hole {
	fill: #fff;
}

.mhub-gs-draw__ring {
	fill: #fff;
	stroke: var( --art-solid );
	stroke-width: 2;
}

.mhub-gs-draw__stroke {
	fill: none;
	stroke: var( --art-solid );
	stroke-width: 2.4;
	stroke-linecap: round;
}

.mhub-gs-draw__check {
	fill: none;
	stroke: #fff;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/*
 * Motion, one idea per card, and each moves the way its idea moves: the
 * audience steps in, the closed card retreats, the stub tears away, the live
 * lesson comes forward. Transform only, so nothing reflows, and the page's
 * reduced-motion rule flattens all of it.
 */
.mhub-gs-draw__crowd,
.mhub-gs-draw__closed,
.mhub-gs-draw__stub,
.mhub-gs-draw__live,
.mhub-gs-draw__key {
	transition: transform 0.35s cubic-bezier( 0.22, 0.61, 0.36, 1 );
}

.mhub-gs-recipe:hover .mhub-gs-draw__crowd,
.mhub-gs-recipe--open .mhub-gs-draw__crowd {
	transform: translateX( -6px );
}

.mhub-gs-recipe:hover .mhub-gs-draw__closed,
.mhub-gs-recipe--open .mhub-gs-draw__closed {
	transform: translate( 5px, -3px );
}

.mhub-gs-recipe:hover .mhub-gs-draw__key,
.mhub-gs-recipe--open .mhub-gs-draw__key {
	transform: rotate( -8deg );
	transform-origin: 95px 62px;
}

.mhub-gs-recipe:hover .mhub-gs-draw__stub,
.mhub-gs-recipe--open .mhub-gs-draw__stub {
	transform: translateX( 6px );
}

.mhub-gs-recipe:hover .mhub-gs-draw__live,
.mhub-gs-recipe--open .mhub-gs-draw__live {
	transform: translateX( 4px );
}

/* The one thing that moves on its own: a live meeting is live whether or not
   anybody is pointing at it. */
.mhub-gs-draw__pulse {
	animation: mhub-gs-pulse 2.4s ease-in-out infinite;
	transform-box: fill-box;
	transform-origin: center;
}

@keyframes mhub-gs-pulse {
	0%,
	100% {
		opacity: 1;
		transform: scale( 1 );
	}

	50% {
		opacity: 0.55;
		transform: scale( 0.82 );
	}
}

/* --- the words --- */

.mhub-gs-recipe__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	padding: 16px 18px 0;

	/* The height of a badge, whether or not this card has one: without it
	   the two unlabelled cards start their titles 9px above the labelled
	   ones and the row reads as misaligned. */
	min-height: 37px;
}

.mhub-gs-recipe__eyebrow {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var( --mhub-gs-text-faint );
}

/* The only badge left. It appears on a Pro recipe when the site is not Pro,
   and nowhere else, so it is always gold - there is no second kind. */
/*
 * Layout only. The badge is `common/MhProBadge`, which brings its own ground,
 * type and padlock.
 *
 * This used to paint an amber pill here - one of three the plugin had grown,
 * each in a different file. MhProBadge is the one the switches, the inputs, the
 * selects and the reports gate all use, so the same lock now looks the same
 * wherever it appears. What is left on this class is the flex behaviour the row
 * needs, because the host row is still what places the badge.
 */
.mhub-gs-recipe__plan {
	flex-shrink: 0;
}

/*
 * The way out of a locked card.
 *
 * Gold rather than the page brand, so it belongs to the card it sits in
 * rather than reading as one more blue link on a blue page.
 */
.mhub-gs-recipe__unlock,
.mhub-gs-recipe__unlock:visited {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 12px 18px 2px;
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: none;
	color: #8a6207;
	transition: color 0.15s ease;
}

.mhub-gs-recipe__unlock:hover,
.mhub-gs-recipe__unlock:focus {
	color: #6f4e05;
}

.mhub-gs-recipe__unlock:focus {
	box-shadow: none;
}

.mhub-gs-recipe__unlock:focus-visible {
	outline: 2px solid #8a6207;
	outline-offset: 3px;
	border-radius: 4px;
}

.mhub-gs-recipe__title {
	display: block;
	padding: 8px 18px 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: -0.01em;
	color: var( --mhub-gs-text );
}

.mhub-gs-recipe__desc {
	display: block;
	padding: 4px 18px 0;
	font-size: 13px;
	line-height: 1.625;
	color: var( --mhub-gs-text-muted );

	/* Three lines, whether the sentence fills them or not: without it the
	   "How to build it" line sits at four different heights across a row of
	   four cards, and the row reads as broken rather than as varied. */
	min-height: 63px;
}

/* The affordance, always visible: a card that only reveals it on hover is a
   card nobody on a touch screen knows is a control. */
.mhub-gs-recipe__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 14px;
	padding: 0 18px;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.5;
	color: var( --mhub-gs-brand );
}

.mhub-gs-recipe__head:hover .mhub-gs-recipe__more {
	color: var( --mhub-gs-brand-700 );
}

.mhub-gs-recipe__chev {
	transition: transform 0.22s ease;
}

.mhub-gs-recipe--open .mhub-gs-recipe__chev {
	transform: rotate( 180deg );
}


/* --- the instructions --- */

.mhub-gs-recipe__panel {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition: grid-template-rows 0.26s ease, opacity 0.2s ease;
}

.mhub-gs-recipe__panel--open {
	grid-template-rows: 1fr;
	opacity: 1;
}

.mhub-gs-recipe__panel > div {
	overflow: hidden;
}

.mhub-gs-recipe__steps {
	padding: 2px 18px 0;
	border-top: 1px solid var( --mhub-gs-line-soft );
}

.mhub-gs-recipe__steps li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 0;
	font-size: 12.5px;
	line-height: 1.6;
	color: var( --mhub-gs-text-muted );
}

.mhub-gs-recipe__steps li + li {
	border-top: 1px solid var( --mhub-gs-line-soft );
}

.mhub-gs-recipe__num {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 19px;
	height: 19px;
	margin-top: 1px;
	border-radius: 999px;
	background: var( --art-tint );
	font-size: 10.5px;
	font-weight: 700;
	/* Decoration follows the card, controls follow the page: the step numbers
	   take the recipe accent so a Pro card is warm throughout, while "How to
	   build it" stays brand blue like every other control here. */
	color: var( --art-solid );
}

/*
 * The shortcode, on a dark strip so it reads as code rather than as another
 * sentence, with the copy button inside the same strip - the thing you copy and
 * the button that copies it belong to each other.
 */
.mhub-gs-recipe__code {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 14px 18px 0;
	padding: 8px 8px 8px 12px;
	border-radius: 9px;
	background: #0f172a;
}

.mhub-gs-recipe__code code {
	overflow: hidden;
	font-family: Menlo, Consolas, 'Courier New', monospace;
	font-size: 11.5px;
	line-height: 1.5;
	color: #cbd5e1;
	/* Wraps rather than truncating. A shortcode with its id cut off is the
	   one thing on this card that has to be complete to be useful. */
	white-space: normal;
	word-break: break-word;
}

.mhub-gs-recipe__copy {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	gap: 5px;
	padding: 5px 10px;
	border-radius: 6px;
	background: rgba( 255, 255, 255, 0.12 );
	font-size: 11.5px;
	font-weight: 600;
	color: #fff;
	transition: background-color 0.15s ease;
}

.mhub-gs-recipe__copy:hover {
	background: rgba( 255, 255, 255, 0.22 );
}

.mhub-gs-recipe__copy:active {
	background: rgba( 255, 255, 255, 0.3 );
}

.mhub-gs-recipe__copy:focus-visible {
	outline: 2px solid #93b6ff;
	outline-offset: 2px;
}

.mhub-gs-recipe__note {
	padding: 8px 18px 0;
	font-size: 11.5px;
	line-height: 1.55;
	color: var( --mhub-gs-text-faint );
}

/* --- Cards --------------------------------------------------------------- */

.mhub-gs-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat( auto-fit, minmax( 232px, 1fr ) );
}

.mhub-gs-card {
	display: flex;
	flex-direction: column;
	padding: 22px;
	border: 1px solid var( --mhub-gs-line );
	border-radius: 16px;
	background: var( --mhub-gs-card );
	transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.mhub-gs-card:hover {
	transform: translateY( -2px );
	border-color: #c9d6ea;
	box-shadow: 0 16px 34px -22px rgba( 8, 20, 45, 0.55 );
}

.mhub-gs-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin-bottom: 14px;
	border-radius: 11px;
	background: rgba( 8, 93, 242, 0.09 );
	color: var( --mhub-gs-brand );
}

.mhub-gs-card__step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin-bottom: 14px;
	border-radius: 9px;
	background: rgba( 8, 93, 242, 0.09 );
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var( --mhub-gs-brand );
}

.mhub-gs-card__title {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: -0.01em;
	color: var( --mhub-gs-text );
}

.mhub-gs-card__desc {
	margin-top: 4px;
	flex: 1;
	font-size: 13px;
	line-height: 1.625;
	color: var( --mhub-gs-text-muted );
}

/*
 * The card's action. Colour is re-declared on every state for the reason given
 * at the top of this file, and the underline only appears on hover so a grid
 * of four cards does not read as a list of links.
 */
.mhub-gs-card__action {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 16px;
	font-size: 13.5px;
	font-weight: 600;
	color: var( --mhub-gs-brand );
	text-decoration: none;
	transition: color 0.15s ease, gap 0.15s ease;
}

.mhub-gs-card__action:hover {
	gap: 9px;
	color: var( --mhub-gs-brand-700 );
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mhub-gs-card__action:focus {
	color: var( --mhub-gs-brand-700 );
}

.mhub-gs-card__action:focus-visible {
	color: var( --mhub-gs-brand-700 );
	outline: 2px solid var( --mhub-gs-brand );
	outline-offset: 3px;
	border-radius: 4px;
}

.mhub-gs-card__action:active {
	color: #08409e;
}

.mhub-gs-card__action svg {
	transform: translateY( 1px );
}


/* --- FAQ ----------------------------------------------------------------- */

/*
 * A narrow centred column, the way DriveHub's FAQ tab is built.
 *
 * The rest of this page runs to the full body width because its cards are laid
 * out in threes and fours. An accordion is a single column of prose, and at
 * full width the answers ran to well over a hundred characters a line. 760px
 * holds them near the 70 to 80 a reader can track without losing the line.
 */
.mhub-gs-faq-wrap {
	max-width: var( --mhub-gs-measure, 760px );
	margin-left: auto;
	margin-right: auto;
}

.mhub-gs-faq {
	border: 1px solid var( --mhub-gs-line );
	border-radius: 16px;
	background: var( --mhub-gs-card );
	overflow: hidden;
}

.mhub-gs-faq__item + .mhub-gs-faq__item {
	border-top: 1px solid var( --mhub-gs-line-soft );
}

/*
 * The question is a heading for a screen reader and nothing else. The button
 * inside it carries every visual, so the heading itself inherits and adds no
 * box of its own.
 */
.mhub-gs-faq__heading {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: 1.5;
}

.mhub-gs-faq__q {
	display: flex;
	background: transparent;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	/* 44px minimum hit target, met by the padding rather than a fixed height so
	   a question that wraps to two lines still grows. DriveHub sets 16px 24px
	   here and this matches it. */
	padding: 16px 24px;
	text-align: left;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.5;
	color: var( --mhub-gs-text );
	transition: background-color 0.15s ease, color 0.15s ease;
}

.mhub-gs-faq__q:hover {
	background: #f7f9fc;
	color: var( --mhub-gs-brand );
}

.mhub-gs-faq__q:focus-visible {
	outline: 2px solid var( --mhub-gs-brand );
	outline-offset: -2px;
}

.mhub-gs-faq__q:active {
	background: #eff3f9;
}

.mhub-gs-faq__chev {
	flex-shrink: 0;
	color: var( --mhub-gs-text-faint );
	transition: transform 0.22s ease, color 0.15s ease;
}

.mhub-gs-faq__q:hover .mhub-gs-faq__chev {
	color: var( --mhub-gs-brand );
}

.mhub-gs-faq__q[aria-expanded='true'] .mhub-gs-faq__chev {
	transform: rotate( 180deg );
	color: var( --mhub-gs-brand );
}

/*
 * Animating to a measured height needs JavaScript to measure it; animating
 * grid-template-rows from 0fr to 1fr does not, and gets the same result with
 * no layout reads on every frame.
 */
.mhub-gs-faq__a {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition: grid-template-rows 0.26s ease, opacity 0.2s ease;
}

.mhub-gs-faq__a--open {
	grid-template-rows: 1fr;
	opacity: 1;
}

.mhub-gs-faq__a > div {
	overflow: hidden;
}

/*
 * The answer ends on the same invisible line the question does: 24px of panel
 * padding, plus the 16px chevron and the 16px gap before it. With a flat 24px
 * on both sides the answer ran on under the chevron and the column read as
 * ragged.
 */
.mhub-gs-faq__a p {
	padding: 0 56px 20px 24px;
	font-size: 13.5px;
	line-height: 1.625;
	color: var( --mhub-gs-text-muted );
}


/* --- FAQ closing card ---------------------------------------------------- */

/*
 * Two ways out rather than one: the docs, for somebody who would rather read
 * than wait, and a person, for somebody who has already read.
 */
.mhub-gs-faq-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-top: 24px;
	padding: 20px 24px;
	border: 1px solid var( --mhub-gs-line );
	border-radius: 12px;
	background: var( --mhub-gs-card );
}

.mhub-gs-faq-cta__title {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: -0.01em;
	color: var( --mhub-gs-text );
}

.mhub-gs-faq-cta__desc {
	margin-top: 2px;
	font-size: 13px;
	line-height: 1.5;
	color: var( --mhub-gs-text-muted );
}

.mhub-gs-faq-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/*
 * The two controls in that card, and the only pair on this page that has to
 * look like a matched set across an <a> and a <button>. Both re-declare their
 * colour on hover, focus and active: wp-admin ships `a:hover, a:focus` at
 * specificity (0,1,1), which outranks a plain class and would otherwise turn
 * the filled button's white label admin blue.
 */
.mhub-gs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 16px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

/* wp-admin's own blue focus shadow, replaced below by a real outline. */
.mhub-gs-btn:focus {
	box-shadow: none;
}

.mhub-gs-btn:focus-visible {
	outline: 2px solid var( --mhub-gs-brand );
	outline-offset: 2px;
}

.mhub-gs-btn svg {
	flex-shrink: 0;
}

.mhub-gs-btn--ghost,
.mhub-gs-btn--ghost:visited {
	/* slate-300, DriveHub's own outline weight. --mhub-gs-line is the panel
	   border and is too faint to read as a control edge at this size. */
	border: 1px solid #cbd5e1;
	background: var( --mhub-gs-card );
	color: var( --mhub-gs-text );
}

.mhub-gs-btn--ghost:hover,
.mhub-gs-btn--ghost:focus {
	border-color: #94a3b8;
	background: #f7f9fc;
	color: var( --mhub-gs-brand-700 );
}

.mhub-gs-btn--ghost:active {
	background: #eff3f9;
	color: var( --mhub-gs-brand-700 );
	transform: translateY( 1px );
}

.mhub-gs-btn--solid,
.mhub-gs-btn--solid:visited {
	border: 1px solid transparent;
	background: var( --mhub-gs-brand );
	color: #fff;
}

.mhub-gs-btn--solid:hover,
.mhub-gs-btn--solid:focus {
	background: var( --mhub-gs-brand-700 );
	color: #fff;
}

.mhub-gs-btn--solid:active {
	background: #0847ad;
	color: #fff;
	transform: translateY( 1px );
}



/*
 * Visually hidden, and hidden without widening the page.
 *
 * These labels used wp-admin's own .screen-reader-text. Measured at a 480px
 * viewport that cost 7px of horizontal page scroll - the cell text still took
 * part in the table's layout - so this is the version that collapses to a 1px
 * box and clips, which measures at zero.
 */
.mhub-gs-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

/* --- Plan table ---------------------------------------------------------- */

/*
 * Free against Pro, measured off DriveHub's Compare tab.
 *
 * Same column (840px, wider than the FAQ's 760 because this one carries three
 * columns), same 24px centred heading, same 32px to the panel, and the same
 * row rhythm inside it: a 16px 24px header rule, 10px 24px group bars on a
 * tinted ground, and 12px 24px rows.
 *
 * DriveHub builds its rows out of CSS grid. This stays a real <table> because
 * it carries two things DriveHub's does not - the named tiers (Basic, Advanced)
 * and the "your plan" column - and those want a header cell a screen reader can
 * associate with each value.
 */
.mhub-gs-plans-wrap {
	max-width: var( --mhub-gs-measure, 840px );
	margin-left: auto;
	margin-right: auto;
}

.mhub-gs-plans {
	border: 1px solid var( --mhub-gs-line );
	border-radius: 16px;
	background: var( --mhub-gs-card );
	overflow: hidden;
}

/* Wide content scrolls inside its own container so the page body never scrolls
   horizontally on a narrow admin screen. */
.mhub-gs-plans__scroll {
	overflow-x: auto;
}

.mhub-gs-plans table {
	width: 100%;
	min-width: 520px;
	border-collapse: collapse;
}

.mhub-gs-plans th,
.mhub-gs-plans td {
	padding: 12px 24px;
	text-align: left;
	font-size: 13.5px;
	font-weight: 400;
	line-height: 1.5;
	vertical-align: middle;

	/* The containing block for the visually hidden labels inside. Without it
	   they resolve against the document, and an absolutely positioned box
	   sitting past the right edge counts toward the page's scroll width even
	   though it is clipped - measured as 7px of horizontal page scroll at a
	   480px viewport. */
	position: relative;
}

/*
 * The column heads.
 *
 * Sticky, which DriveHub's are not: its table is 24 rows and this one is
 * longer, and a value column loses its meaning the moment its heading scrolls
 * away. That needs an opaque background - a transparent sticky row lets the
 * rows underneath show through it.
 */
.mhub-gs-plans thead th {
	position: sticky;
	top: 0;
	z-index: 1;
	padding-top: 16px;
	padding-bottom: 16px;
	background: var( --mhub-gs-card );
	border-bottom: 1px solid var( --mhub-gs-line );
	font-size: 13px;
	font-weight: 600;
	color: var( --mhub-gs-text-muted );
}

/* The first head is a label for the column of feature names, not a value
   heading, so it is set smaller and quieter than the two plans beside it. */
.mhub-gs-plans thead th:first-child {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --mhub-gs-text-faint );
}

/* Pro carries the brand colour, the way DriveHub's does. */
.mhub-gs-plans thead th:last-child {
	color: var( --mhub-gs-brand );
}

.mhub-gs-plans th:nth-child( 2 ),
.mhub-gs-plans th:nth-child( 3 ),
.mhub-gs-plans td:nth-child( 2 ),
.mhub-gs-plans td:nth-child( 3 ) {
	width: 120px;
	text-align: center;
}

.mhub-gs-plans__group td {
	padding-top: 10px;
	padding-bottom: 10px;
	background: #f8fafc;
	border-top: 1px solid var( --mhub-gs-line-soft );
	border-bottom: 1px solid var( --mhub-gs-line-soft );
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --mhub-gs-text-faint );
}

.mhub-gs-plans tbody tr:not( .mhub-gs-plans__group ) td {
	border-bottom: 1px solid var( --mhub-gs-line-soft );
}

.mhub-gs-plans tbody tr:last-child td {
	border-bottom: 0;
}

.mhub-gs-plans tbody tr:not( .mhub-gs-plans__group ):hover {
	background: #f8fafd;
}

.mhub-gs-plans__label {
	color: var( --mhub-gs-text );
}

/* The current plan's column, marked so the table answers "what do I have"
   before it answers "what could I have". */

/*
 * "Exclusive", on the handful of rows the upgrade page flags that way.
 *
 * Gold rather than brand blue: blue is already the table's "included" colour,
 * and a blue pill beside a blue tick reads as a second tick. Gold is the
 * page's one warm accent and is used nowhere else in this panel.
 */
.mhub-gs-plans__tag {
	display: inline-block;
	margin-left: 8px;
	padding: 1px 7px;
	border-radius: 999px;
	background: rgba( 221, 168, 60, 0.16 );
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.6;
	text-transform: uppercase;
	color: #8a6207;
	vertical-align: 1px;
}

.mhub-gs-plans__current {
	background: rgba( 8, 93, 242, 0.045 );
}

.mhub-gs-plans__badge {
	/* Its own line under the plan name, not beside it: at a 120px column the
	   badge and the word cannot share a line, and letting it wrap made the
	   header row 86px against DriveHub's 53px. */
	display: block;
	margin: 3px auto 0;
	width: fit-content;
	padding: 1px 6px;
	border-radius: 999px;
	background: rgba( 8, 93, 242, 0.12 );
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var( --mhub-gs-brand );
}

/* Included is the brand colour, the way DriveHub marks it. Green would be a
   second accent on a page that already has one. */
.mhub-gs-yes {
	color: var( --mhub-gs-brand );
}

.mhub-gs-no {
	color: #cbd5e1;
}

.mhub-gs-tier {
	display: inline-block;
	padding: 3px 9px;
	border-radius: 999px;
	background: #eef2f8;
	font-size: 11.5px;
	font-weight: 600;
	color: var( --mhub-gs-text-muted );
}

.mhub-gs-tier--pro {
	background: rgba( 8, 93, 242, 0.11 );
	color: var( --mhub-gs-brand );
}


/* --- Upgrade band -------------------------------------------------------- */

/*
 * DriveHub's UpgradeCard, ported value for value.
 *
 * Every measurement here - the 20px radius, the 5px inner rule, the 28px
 * column gap, the 0.26em eyebrow tracking, the 56px seal - is that card's, so
 * the two plugins present the same upgrade in the same shape. The only design
 * value changed is the ground: DriveHub's is its brand green, this is the
 * navy the hero above it is built from, because a green card under a blue hero
 * would read as a panel borrowed from another product.
 */
.mhub-gs-upcard {
	/* Lines up with whatever section it follows - see --mhub-gs-measure on
	   .mhub-gs-body. On the FAQ that is a 760px column, on Free vs Pro 840px,
	   and on Get in Touch the full width of the body. */
	max-width: var( --mhub-gs-measure, 100% );
	margin-left: auto;
	margin-right: auto;
	position: relative;
	border: 1px solid rgba( 240, 194, 90, 0.25 );
	border-radius: 20px;
	overflow: hidden;
	background:
		/*
		 * Engraved diagonal hatching, at the threshold of visible. This is the
		 * only texture on the card, and it is a ruled pattern rather than a
		 * soft blur, so it holds an edge the way printed board does.
		 */
		repeating-linear-gradient( 135deg, rgba( 255, 255, 255, 0.022 ) 0 1px, rgba( 255, 255, 255, 0 ) 1px 7px ),
		linear-gradient( 180deg, #0a1b33 0%, #06101f 100% );
	box-shadow: 0 18px 40px -28px rgba( 0, 0, 0, 0.85 );
	transition: transform 0.3s ease, border-color 0.3s ease;
}

.mhub-gs-upcard:hover {
	transform: translateY( -2px );
	border-color: rgba( 240, 194, 90, 0.45 );
}

.mhub-gs-upcard__rule {
	position: absolute;
	inset: 5px;
	pointer-events: none;
	border: 1px solid rgba( 240, 194, 90, 0.14 );
	border-radius: 15px;
}

.mhub-gs-upcard__row {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 28px;
	padding: 28px;
}

@media ( min-width: 640px ) {
	.mhub-gs-upcard__row {
		padding: 32px;
	}
}

.mhub-gs-seal {
	width: 56px;
	height: 56px;
	flex-shrink: 0;
	transition: transform 0.5s ease-out;
}

.mhub-gs-upcard:hover .mhub-gs-seal {
	transform: rotate( -7deg );
}

/* Fades at both ends so it never looks like a table border. */
.mhub-gs-upcard__divider {
	display: none;
	width: 1px;
	height: 56px;
	flex-shrink: 0;
	background: linear-gradient(
		to bottom,
		rgba( 240, 194, 90, 0 ) 0%,
		rgba( 240, 194, 90, 0.35 ) 50%,
		rgba( 240, 194, 90, 0 ) 100%
	);
}

@media ( min-width: 640px ) {
	.mhub-gs-upcard__divider {
		display: block;
	}
}

/* The minimum is what drives the wrap: below it the words start breaking, so
   the button leaves the row instead. */
.mhub-gs-upcard__text {
	min-width: 260px;
	flex: 1;
}

.mhub-gs-upcard__eyebrow {
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.26em;
	color: var( --mhub-gs-gold );
}

.mhub-gs-upcard__title {
	margin-top: 8px;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: #fff;
}

.mhub-gs-upcard__features {
	margin-top: 8px;
	font-size: 13px;
	line-height: 1.6;
	color: #afbccf;
}

.mhub-gs-upcard__dot {
	color: rgba( 240, 194, 90, 0.6 );
}

.mhub-gs-upcard__feature {
	white-space: nowrap;
}

.mhub-gs-upcard__action {
	display: flex;
	flex-shrink: 0;
	align-items: center;
}

/*
 * Flat gold, not a metallic gradient: a solid block of the accent is more
 * confident than a polished one, and it is the same gold as the seal at the
 * other end of the band.
 *
 * Colour is re-declared on hover, focus and active because wp-admin's
 * `a:hover { color: <scheme blue> }` outranks a plain class and would otherwise
 * turn this near-black label blue on a gold button.
 */
.mhub-gs-upcard__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 28px;
	border-radius: 12px;
	background: var( --mhub-gs-gold );
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #0b1730;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.mhub-gs-upcard__btn:hover,
.mhub-gs-upcard__btn:focus-visible {
	background: #fbd87c;
	color: #0b1730;
}

.mhub-gs-upcard__btn:focus {
	color: #0b1730;
}

.mhub-gs-upcard__btn:focus-visible {
	outline: 2px solid var( --mhub-gs-gold );
	outline-offset: 3px;
}

.mhub-gs-upcard__btn:active {
	background: var( --mhub-gs-gold-700 );
	color: #0b1730;
}

.mhub-gs-upcard__arrow {
	transition: transform 0.2s ease;
}

.mhub-gs-upcard:hover .mhub-gs-upcard__arrow {
	transform: translateX( 2px );
}


/* ==========================================================================
   Accessibility preferences
   ========================================================================== */

/*
 * Everything decorative that moves, stopped. The rings and the sweep are the
 * whole point of the hero, but a hero is not worth making somebody ill: at
 * rest the rings still read as a signal field, they just stop expanding.
 */
@media ( prefers-reduced-motion: reduce ) {
	#mhub-get-started-root *,
	#mhub-get-started-root *::before,
	#mhub-get-started-root *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}

}

@media ( prefers-contrast: more ) {
	.mhub-gs-h1__line2 {
		color: #fff;
	}
}


/* ==========================================================================
   Narrow screens
   ========================================================================== */

@media ( max-width: 782px ) {

	.mhub-gs-hero__inner {
		padding: 30px 18px 40px;
	}

	/*
	 * The masthead, sized for a phone.
	 *
	 * The 640px rule takes the title to 44px and it stays there all the way
	 * down, where it wrapped to four lines and grew the panel to 360px - a
	 * whole viewport of banner before any content, on the screen with the
	 * least room for it. Everything steps down together so the block keeps
	 * its proportions.
	 */
	.mhub-gs-h1 {
		font-size: 30px;
	}

	.mhub-gs-h1__line2 {
		margin-top: 10px;
		font-size: 16px;
	}

	/*
	 * Out of the corner and into the flow, under the button.
	 *
	 * The pill was the first thing on the screen at this width: gold on navy is
	 * the highest-contrast element on the panel, so it was read before the
	 * headline, and it is the secondary action. It now sits last, which is also
	 * where it is in the markup, so what the keyboard reaches matches what the
	 * eye reaches.
	 *
	 * `position: static` alone was not enough: the pill is an inline-flex
	 * anchor and the mark above it is inline-flex too, so the two sat side by
	 * side. `display: flex` with an auto margin gives it its own centred line.
	 */
	.mhub-gs-upgrade {
		position: static;
		display: flex;
		width: fit-content;
		margin: 26px auto 0;
	}

	.mhub-gs-cta {
		margin-top: 28px;
	}


	.mhub-gs-h1 {
		margin-left: auto;
		margin-right: auto;
		/* 30ch, not 22. At 28px the old cap broke "Welcome to MeetingHub."
		   after "to", so the mark opened the second line and the first was
		   half empty - a wrap the width had not asked for. */
		max-width: 30ch;
		font-size: 28px;
	}


	/* Less to travel here, because the inner carries less top padding. */
	.mhub-gs-navwrap {
		margin-top: -40px;
	}

	.mhub-gs-body {
		/* The body padding steps down here, so the rhythm inside it does too:
		   56px between blocks is a third of a phone screen. */
		--mhub-gs-block: 40px;

		padding: 26px 18px 44px;
	}

	.mhub-gs-navwrap__inner {
		padding: 20px 14px 0;
	}

	.mhub-gs-upcard__row {
		padding: 22px 20px;
	}

	/*
	 * Once the row has wrapped, the action is alone on its own line, and a
	 * gold pill sitting at the left edge of a card reads as unfinished. Full
	 * width is what a wrapped action wants.
	 */
	.mhub-gs-upcard__action {
		width: 100%;
	}

	.mhub-gs-upcard__btn {
		width: 100%;
	}

	/*
	 * The closing card's two controls, once the row has wrapped. Side by side
	 * at half a phone's width they end up narrower than their own labels, so
	 * each takes the full line instead.
	 */
	.mhub-gs-faq-cta {
		padding: 18px;
	}

	.mhub-gs-faq-cta__actions {
		width: 100%;
	}

	/* Scoped to the closing card, not every button on the page: unscoped it
	   also stretched the checklist's action, which squeezed that row's text
	   into a one-word column. */
	.mhub-gs-faq-cta__actions .mhub-gs-btn {
		flex: 1 1 100%;
	}

	/* One card per row down here, so there is no neighbour to line up with
	   and the reserved three lines are just dead space. */
	.mhub-gs-recipe__desc {
		min-height: 0;
	}

	/*
	 * The checklist row, stacked. The action goes to a line of its own,
	 * indented to the text above it - 28px of mark plus the 14px gap - so the
	 * row still reads as one item rather than two.
	 */

	.mhub-gs-setup__item {
		flex-wrap: wrap;
	}

	.mhub-gs-setup__body {
		flex: 1 1 180px;
	}

	.mhub-gs-setup__cta {
		flex: 0 0 auto;
		align-self: flex-start;
		margin-top: 10px;
		margin-left: 42px;
	}

	.mhub-gs-faq__q {
		padding: 15px 18px;
	}

	.mhub-gs-faq__a p {
		padding: 0 18px 17px;
	}

}

/* ==========================================================================
   Touch
   ==========================================================================

   Sized by what is pointing at the page, not by how wide it is.

   These rules used to live inside the 782px block, on the reasoning that
   wp-admin hands off from mouse to touch there. wp-admin is right about its
   own layout and wrong about fingers: an iPad Air is 820px in portrait and an
   iPad Pro is 1024, both of them touch-only, and both were getting the 32 and
   38px controls meant for a mouse. `pointer: coarse` asks the question
   directly, and the width query stays beside it so a narrow mouse-driven
   window keeps the larger targets too.

   Only standalone controls are listed. A link inside a sentence is exempt from
   the target size rule for a reason - padding one out to 44px opens a hole in
   the paragraph around it - so the recipe's "See what Pro adds" and any link
   set in running text keep their inline size.
   ========================================================================== */

@media ( max-width: 782px ), ( pointer: coarse ) {

	.mhub-gs-nav__btn,
	.mhub-gs-upgrade,
	.mhub-gs-recipe__copy,
	.mhub-gs-donebar__dismiss {
		min-height: 44px;
	}

	/* Square controls need the width as well, or a 32px icon button just gets
	   taller and stays as hard to hit. */
	.mhub-gs-next__dismiss {
		width: 44px;
		height: 44px;
	}

	/*
	 * These two are drawn as links but are not inline in anything: one is a
	 * finished milestone's title, the other the foot of an opened card, and
	 * both stand alone on their own line. So they take the target size as well
	 * - but as padding pulled back by an equal negative margin, so the hit area
	 * grows to 44px while the row it sits in keeps the height it had. Adding
	 * the height outright would push 26px into a row that has none to spare.
	 */
	.mhub-gs-setup__titlelink {
		padding-top: 13px;
		padding-bottom: 13px;
		margin-top: -13px;
		margin-bottom: -13px;
	}

	.mhub-gs-recipe__unlock {
		padding-top: 13px;
		padding-bottom: 13px;
		margin-top: -1px;
		margin-bottom: -11px;
	}
}

/*
 * An affordance that only exists on hover does not exist on a touch screen.
 *
 * A finished milestone's title is a link, and on a mouse it says so when the
 * pointer reaches it. There is no pointer here, so it says so at rest - in the
 * hairline colour rather than the text colour, so the row still reads as a
 * heading first and a link second.
 */
@media ( hover: none ) {
	.mhub-gs-setup__titlelink {
		text-decoration: underline;
		text-decoration-color: var( --mhub-gs-line );
		text-underline-offset: 3px;
	}
}


/* ==========================================================================
   Phone
   ==========================================================================

   The page had one breakpoint doing all the work.

   Everything responsive lived at 782px - wp-admin's own hand-off from mouse to
   touch - and below it nothing changed again. That is fine for a layout of
   stacked cards, and it was not fine for the three things on this page that
   are not one: the tab bar, the comparison table and the recipe drawings.

   This tier is 600px, which is where wp-admin drops the menu rail entirely and
   the page finally has the screen to itself. It is a phone tier, not another
   round of "make everything smaller": each rule below is a thing that stopped
   working, not a value nudged down.
   ========================================================================== */

@media ( max-width: 600px ) {

	/*
	 * The tab bar, as a segmented control.
	 *
	 * Three pills at desktop padding measure 358px against a 390px phone minus
	 * its gutters, so the row wrapped and left "Free vs Pro" alone on a second
	 * line, centred under the other two - a third of the page's navigation
	 * reading as an afterthought. Equal thirds of the full width is the shape
	 * a three-way switch wants on a phone, it cannot wrap whatever the labels
	 * say, and it makes each target the full height of the bar.
	 */
	.mhub-gs-navwrap__inner {
		padding: 20px 18px 0;
	}

	.mhub-gs-nav {
		display: flex;
		flex-wrap: nowrap;
		width: 100%;
		gap: 2px;
		padding: 5px;
	}

	.mhub-gs-nav__btn {
		flex: 1 1 0;
		min-width: 0;
		justify-content: center;
		gap: 6px;
		padding: 10px 6px;
		font-size: 13px;
		white-space: nowrap;
	}

	/*
	 * Free against Pro, without a sideways scroll.
	 *
	 * The table held a 520px minimum and two 120px value columns, so on a
	 * phone the feature names filled the screen and both answers sat off the
	 * right edge, inside a scroll container with nothing on screen to say it
	 * scrolled. Forty-six rows of questions with the answers hidden.
	 *
	 * The cells only ever hold a tick, a dash, or one word, so they do not
	 * need 120px - they need enough for "Advanced" and no more. Dropping the
	 * minimum lets the feature column take what is left and wrap, which is
	 * what a column of sentences should do anyway. The scroll container stays
	 * as the floor under all of this.
	 */
	.mhub-gs-plans table {
		min-width: 0;
	}

	.mhub-gs-plans th,
	.mhub-gs-plans td {
		padding: 11px 12px;
		font-size: 13px;
	}

	.mhub-gs-plans th:nth-child( 2 ),
	.mhub-gs-plans th:nth-child( 3 ),
	.mhub-gs-plans td:nth-child( 2 ),
	.mhub-gs-plans td:nth-child( 3 ) {
		width: 68px;
		padding-left: 6px;
		padding-right: 6px;
	}

	.mhub-gs-tier {
		padding: 3px 7px;
		font-size: 11px;
	}

	/*
	 * The tag drops below the label rather than sitting after it. Beside a
	 * wrapped sentence in a narrow column it landed alone on a last line of
	 * its own, which read as a row of its own.
	 */
	.mhub-gs-plans__tag {
		margin-left: 0;
		margin-top: 4px;
		font-size: 10.5px;
	}

	.mhub-gs-plans__label {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	/* 9.5px is a printed footnote, not something to read on a phone at arm's
	   length. */
	.mhub-gs-plans__badge {
		font-size: 10.5px;
	}

	.mhub-gs-upcard__eyebrow {
		font-size: 11px;
	}

	/*
	 * The recipe drawings, capped.
	 *
	 * They are set to the card's full width and scale on a 3:2 ratio, which is
	 * right in a four-column row and wrong in a single column: at 390px the
	 * drawing came out 212px tall, so the illustration was the card and the
	 * title people are meant to be choosing between sat below the fold of it.
	 */
	.mhub-gs-draw {
		max-width: 260px;
		margin-left: auto;
		margin-right: auto;
	}

	/*
	 * The help panel gives back the padding it does not have room for. 48px
	 * top and bottom is a sixth of a phone screen spent on the panel's edge.
	 */
	#mhub-get-started-root {
		--mhub-gs-panel-pad: 18px;
	}

	.mhub-gs-help {
		padding-top: 32px;
		padding-bottom: 32px;
		border-radius: 18px;
	}

	.mhub-gs-help__grid {
		margin-top: 26px;
	}

	/*
	 * Section headings come down a step with the column they sit over. 24px
	 * over a 350px measure is a heading set for a page three times as wide.
	 */
	.mhub-gs-section__title {
		font-size: 21px;
	}

	.mhub-gs-section__head {
		margin-bottom: 26px;
	}

	.mhub-gs-plans-wrap .mhub-gs-section__head,
	.mhub-gs-faq-wrap .mhub-gs-section__head {
		margin-bottom: 22px;
	}
}


/* ==========================================================================
   Small phone
   ==========================================================================

   360px and below, where the three tab labels stop fitting even at equal
   thirds. Nothing else needs saying at this width - the layout is a single
   column by now and it holds.
   ========================================================================== */

@media ( max-width: 400px ) {

	/*
	 * The icons come off the tabs.
	 *
	 * They are decoration here: every tab is labelled, and the label is what
	 * anybody reads. Given the choice between an icon and the word beside it
	 * surviving intact, the word wins.
	 */
	.mhub-gs-nav__btn svg {
		display: none;
	}

	.mhub-gs-nav__btn {
		padding: 10px 4px;
		font-size: 12.5px;
	}

	.mhub-gs-hero__inner {
		padding: 26px 14px 34px;
	}

	.mhub-gs-body {
		padding: 22px 14px 40px;
	}

	.mhub-gs-navwrap__inner {
		padding: 18px 14px 0;
	}

	#mhub-get-started-root {
		--mhub-gs-panel-pad: 14px;
	}

	.mhub-gs-help {
		padding-top: 28px;
		padding-bottom: 28px;
	}

	.mhub-gs-plans th,
	.mhub-gs-plans td {
		padding: 11px 10px;
	}
}