/*
 * Sections — hero, story, cast, pricing, privacy, FAQ, legal.
 */

/* ----------------------------------------------------------------- hero --- */

.gamife-hero {
	position: relative;
	padding-block: clamp(3rem, 7vw, 6rem) var(--space-xxl);
	background: var(--bloom);
	overflow: hidden;
}

.gamife-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: clamp(2rem, 6vw, 5rem);
	align-items: center;
}

.gamife-hero h1 {
	margin: 0 0 var(--space-m);
	max-width: 14ch;
}

/*
 * One word of the headline carries the accent. The app's own action colour is
 * cinnamon, and it is used here exactly once above the fold — an underline
 * rather than a fill, because cinnamon on parchment is a 2.5:1 contrast and
 * would fail as text.
 */
.gamife-hero h1 em {
	font-style: normal;
	background-image: linear-gradient(var(--cinnamon), var(--cinnamon));
	background-repeat: no-repeat;
	background-position: 0 92%;
	background-size: 100% 0.14em;
	padding-bottom: 0.06em;
}

.gamife-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-s);
	margin-top: var(--space-l);
}

.gamife-hero__phone {
	justify-self: center;
}

/*
 * The scroll cue. A link, not a decorated word — on a page this long "see how
 * it works" should take you there whether or not anything is animating.
 */
.gamife-hero__cue {
	margin: var(--space-l) 0 0;
	font-size: var(--text-s);
	font-weight: 500;
}

.gamife-hero__cue a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--ink-faint);
	text-decoration: none;
}

.gamife-hero__cue a::after {
	content: "\2193";
	font-size: 1.05em;
	line-height: 1;
}

.gamife-hero__cue a:hover {
	color: var(--ink);
}


@media (max-width: 60rem) {
	.gamife-hero__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.gamife-hero h1 {
		max-width: 18ch;
	}
}

/* ---------------------------------------------------------------- proof --- */

/*
 * Four facts, not four adjectives. Every number here is a real quantity from
 * the app — the seat count, the coin rate, the size of the cast — and the
 * fourth is the one competitors cannot print.
 */
.gamife-proof {
	border-block: 1px solid var(--outline);
	background: var(--surface);
}

.gamife-proof__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-m);
	padding-block: var(--space-l);
}

.gamife-proof__figure {
	font-family: var(--font-display);
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
	font-weight: 600;
	line-height: 1;
	color: var(--ink);
	letter-spacing: -0.02em;
}

/* motion.js wraps each number in the figure so it can count up; tabular
   figures stop a counting number from jittering its own width. */
.gamife-proof__count {
	font-variant-numeric: tabular-nums;
}

.gamife-proof__label {
	margin: 0.5rem 0 0;
	font-size: var(--text-s);
	color: var(--ink-faint);
	max-width: 18ch;
}

@media (max-width: 44rem) {
	.gamife-proof__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-m) var(--space-s);
	}
}

/* ---------------------------------------------------------------- story --- */

.gamife-story {
	padding-block: var(--space-xl) var(--space-xxl);
}

.gamife-story__intro {
	margin-bottom: var(--space-xl);
}

/*
 * One stage, six beats.
 *
 * The stage is sticky for the whole length of the track and the beats are what
 * supply the scroll distance that moves it, so the height of this section is
 * the story's pacing rather than empty room. The arrangement this replaced gave
 * each step its own 82vh row with the copy pinned to the top of it, which left
 * about two thirds of every row blank and ran the page to twelve thousand
 * pixels of mostly nothing.
 */
.gamife-story__track {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(2rem, 6vw, 5rem);
	align-items: start;
}

.gamife-story__stage {
	position: sticky;
	top: calc(var(--header-height) + 3vh);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-s);
	justify-self: center;
}

/*
 * Bigger than the hero's phone: for the length of this section it is the only
 * thing on screen that does not move, so it carries the section.
 *
 * Sized from the viewport's *height*, not its width. A phone is 2.17 times
 * taller than it is wide, so a width that looks generous on a 1280 laptop
 * produced a 667px frame that — once the sticky offset and the counter beneath
 * it were added — came to 804px inside an 800px window, and the counter was cut
 * off. Height is the dimension that is actually scarce here, so height is the
 * one to measure. The width follows from `aspect-ratio`.
 */
/*
 * Both axes come off one custom property, so a media query overrides a single
 * value and the width cannot drift out of step with the height.
 *
 * The width is stated as a `calc` rather than left to `aspect-ratio` because on
 * mobile the stage is a row flexbox and this frame is a flex item — and
 * auto-width-resolved-from-aspect-ratio on a flex item is the corner engines
 * have historically disagreed on, iOS Safari sizing it from the screenshot's
 * intrinsic width instead. That produces a frame too wide for its height, which
 * is the disproportionate shape this section was reported for.
 *
 * `1206 / 2622` is the `aspect-ratio` on `.gamife-phone` (layout.css) written
 * out. Change one and you must change the other.
 */
.gamife-story__stage .gamife-phone {
	--story-phone-h: min(64vh, 660px);

	height: var(--story-phone-h);
	width: calc(var(--story-phone-h) * 1206 / 2622);
	max-width: 100%;
}

/*
 * The six shots are stacked in the one screen, and only the first is shown
 * until motion.js confirms it is going to drive them. Six overlapping
 * screenshots is a far worse failure than one correct one, and this is the
 * shape that failure takes when the script does not run.
 */
.gamife-story__shot {
	margin: 0;
}

.gamife-story__shot:not(:first-child) {
	display: none;
}

/*
 * The reel's understudy. Off unless motion.js has proved this browser will not
 * seek the video (see story.php); then these two cross-dissolve on the same
 * scroll progress the video would have used.
 */
.gamife-story__fill {
	margin: 0;
	display: none;
}

.gamife-story__fill.is-showing {
	display: block;
}

/*
 * The step counter under the stage. Decoration that only means anything while
 * the script is driving it, so it stays invisible until motion.js says
 * otherwise — the same bargain the header's coin pill makes. Every beat still
 * carries a real "Step 03" of its own for anyone who never sees this.
 */
.gamife-story__counter {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4rem;
	margin: 0;
	font-family: var(--font-mono);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	color: var(--ink-faint);
	opacity: 0;
	visibility: hidden;
	transition:
		opacity var(--dur-settle) var(--ease-settle),
		visibility 0s linear var(--dur-settle);
}

.gamife-story__counter.is-live {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

.gamife-story__counter-now {
	color: var(--ink);
	font-size: 0.95rem;
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- the beats --- */

.gamife-step {
	display: flex;
	align-items: center;
	min-height: 72vh;
}

.gamife-step__copy {
	max-width: var(--measure);
}

/*
 * The step marker is a real ordinal — the six beats are a sequence you go
 * through in order, and the number is how the copy refers to them. It is set
 * in the mono face so it reads as a stamp rather than as body text.
 */
.gamife-step__index {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: var(--space-s);
	font-family: var(--font-mono);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--ink-faint);
}

.gamife-step__index::before {
	content: "";
	width: 2rem;
	height: 1px;
	background: var(--outline);
	transition: width var(--dur-arrive) var(--ease-arrive), background-color var(--dur-arrive) var(--ease-arrive);
}

/* The beat being read draws its own rule out and warms it. */
html.gamife-motion .gamife-step.is-active .gamife-step__index::before {
	width: 3.25rem;
	background: var(--cinnamon);
}

html.gamife-motion .gamife-step.is-active .gamife-step__index {
	color: var(--ink-muted);
}

.gamife-step h3 {
	margin: 0 0 var(--space-s);
	font-size: var(--text-section);
}

.gamife-step p {
	margin: 0;
	font-size: var(--text-l);
	line-height: 1.6;
	color: var(--ink-muted);
}

/* The third beat is the one the whole app is about, and the one the stage
   scrubs the café reel through, so it gets the most scroll to do it in. */
.gamife-step--feature {
	min-height: 92vh;
}

.gamife-step--feature h3 {
	font-size: clamp(2.25rem, 5vw, 3.5rem);
}

/*
 * Below the breakpoint the stage pins to the top of the viewport instead of
 * beside the copy, and the beats scroll underneath it. The pairing survives —
 * the shot still changes as its beat arrives — it is just stacked rather than
 * side by side, because there is no second column to put it in.
 */
@media (max-width: 60rem) {
	.gamife-story__track {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.gamife-story__stage {
		top: var(--header-height);
		z-index: 3;
		flex-direction: row;
		align-items: flex-end;
		justify-content: center;
		gap: var(--space-m);
		padding-block: var(--space-s);
		background: var(--surface);
		box-shadow: 0 14px 14px -14px rgba(43, 27, 20, 0.35);
		/*
		 * Load-bearing, not tidying. The desktop rule centres the stage in its
		 * grid column with `justify-self: center`, which shrinks the box to the
		 * width of the phone — and a sticky box only paints its own width, so the
		 * beat scrolling underneath showed through on both sides of the phone.
		 * Here the stage has to span the column for its background to mask
		 * anything at all.
		 */
		justify-self: stretch;
	}

	/*
	 * Only the height changes; the width follows it. At 32vh the frame came to
	 * 124px across on a 390x844 handset — proportioned correctly, but small
	 * enough to read as a token beside the beats rather than as the phone the
	 * whole section is about. 36vh takes it to 138x300, which puts the sticky
	 * stage at 332px: with the 72px header, 440px of an 844px screen is still
	 * left for the beat being read.
	 */
	.gamife-story__stage .gamife-phone {
		--story-phone-h: clamp(230px, 36vh, 300px);
	}

	.gamife-step {
		min-height: 0;
		padding-block: var(--space-l);
	}

	.gamife-step--feature {
		min-height: 0;
	}
}

/*
 * Declared after the `max-width: 60rem` block above on purpose: a phone in
 * landscape satisfies both queries at once, and the two set the same properties
 * on the same selectors at equal specificity, so source order is the only thing
 * deciding which wins. Moving this block above that one silently reverts every
 * rule here. Keep it last.
 *
 * A landscape phone is wide and very short: 844x390 leaves 318px under the
 * header. Stacking a pinned stage above the beats there would spend most of the
 * screen on a phone, so this goes back to the desktop shape instead — stage
 * beside the copy — with the frame sized down to fit the height that is left.
 * It is the one case where the wide layout is right on a small device.
 */
@media (max-height: 30rem) and (orientation: landscape) {
	.gamife-story__track {
		grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
		gap: var(--space-m);
	}

	.gamife-story__stage {
		position: sticky;
		top: calc(var(--header-height) + 0.5rem);
		flex-direction: column;
		justify-self: center;
		background: none;
		box-shadow: none;
		padding-block: 0;
	}

	.gamife-story__stage .gamife-phone {
		--story-phone-h: min(62vh, 250px);
	}

	/* There is no room under the frame for it, and the beats each carry their
	   own step number anyway. */
	.gamife-story__counter {
		display: none;
	}

	.gamife-step {
		min-height: 80vh;
		padding-block: 0;
	}

	.gamife-step--feature {
		min-height: 90vh;
	}
}

/* ----------------------------------------------------------- the cast --- */

/*
 * The five regulars, peeking over the divider exactly as they do on the app's
 * own onboarding screen — the cutouts are cropped at that shelf line, so the
 * gesture belongs to the artwork rather than being an effect applied to it.
 */
.gamife-cast {
	position: relative;
	padding-top: clamp(3rem, 8vw, 5rem);
	background: var(--container-low);
	border-top: 1px solid var(--outline);
	overflow: hidden;
}

.gamife-cast__row {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: clamp(0.5rem, 3vw, 2.5rem);
	margin-bottom: -1px;
}

.gamife-cast__caption {
	padding-block: var(--space-m) var(--space-l);
	border-top: 2px solid var(--outline);
	text-align: center;
	font-size: var(--text-s);
	color: var(--ink-faint);
}

/* -------------------------------------------------------------- pricing --- */

.gamife-pricing {
	background: var(--surface);
}

/*
 * The plans, and beside them the app's own subscription sheet — the screen
 * these two numbers are actually read off. The page and the purchase agreeing
 * on screen as well as in text is the point of putting it here.
 */
.gamife-pricing__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
	margin-top: var(--space-l);
}

.gamife-pricing__plans {
	min-width: 0;
}

.gamife-pricing__shot {
	justify-self: center;
}

.gamife-pricing__shot .gamife-phone {
	width: clamp(190px, 19vw, 250px);
}

@media (max-width: 60rem) {
	.gamife-pricing__layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.gamife-pricing__shot {
		order: -1;
		margin-bottom: var(--space-m);
	}
}

/* ---------------------------------------------------------- plan switch --- */

/*
 * Two links to the two cards, which is all they are until motion.js upgrades
 * them. Hidden until then: a segmented control that does not segment is a
 * worse thing to show someone than no control, and the cards themselves are
 * directly below either way.
 *
 * The specificity is deliberate. `.wp-block-buttons.is-layout-flex` is core's
 * own rule at two classes, so a single-class rule here loses the `display`
 * fight depending on which stylesheet the server happens to emit last.
 */
.gamife-pricing .gamife-pricing__switch:not(.is-live) {
	display: none;
}

.gamife-pricing .gamife-pricing__switch.is-live {
	display: inline-flex;
	gap: 0;
	margin-bottom: var(--space-m);
	padding: 0.25rem;
	border: 1px solid var(--outline);
	border-radius: var(--radius-pill);
	background: var(--container-low);
}

.gamife-pricing__option .wp-block-button__link {
	padding: 0.55rem 1.35rem;
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--ink-muted);
	font-size: var(--text-s);
	font-weight: 600;
	line-height: 1;
	border: 0;
	transition:
		background-color var(--dur-press) var(--ease-press),
		color var(--dur-press) var(--ease-press);
}

/*
 * blocks.css lifts every core button on hover, which is right for the page's
 * real actions and wrong for an option inside a pill it would climb out of.
 *
 * This is declared before `:active` on purpose. Both carry `transform` at equal
 * specificity, so source order decides which wins while a pointer is hovering
 * *and* pressing — and the press is the one that should be felt. Move this
 * below `:active` and the button stops depressing under a mouse.
 */
.gamife-pricing__option .wp-block-button__link:hover {
	transform: none;
	color: var(--ink);
	background: var(--container);
}

.gamife-pricing__option .wp-block-button__link:active {
	transform: scale(0.96);
}

.gamife-pricing__option .wp-block-button__link[aria-current="true"] {
	background: var(--espresso);
	color: var(--surface);
}

/* ------------------------------------------------------------ the cards --- */

.gamife-pricing__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	gap: var(--space-m);
	max-width: 46rem;
}

.gamife-plan {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-s);
	padding: clamp(1.5rem, 3vw, 2rem);
	border-radius: var(--radius-l);
	border: 1px solid var(--outline);
	background: var(--container-low);
	transition:
		background-color var(--dur-settle) var(--ease-settle),
		border-color var(--dur-settle) var(--ease-settle),
		transform var(--dur-settle) var(--ease-settle);
}

/*
 * Annual is the default in the app, so it is the default here: warmer surface,
 * a full-weight border, and the trial badge. Nothing is hidden from the
 * monthly card to make the point — it just is not the one being recommended.
 *
 * The switch moves this emphasis between the two cards. It never moves a price.
 */
.gamife-plan--featured,
.gamife-pricing[data-plan="monthly"] #plan-monthly {
	background: var(--container);
	border-color: var(--espresso);
}

.gamife-pricing[data-plan="monthly"] .gamife-plan--featured {
	background: var(--container-low);
	border-color: var(--outline);
}

.gamife-pricing[data-plan="monthly"] .gamife-plan__badge {
	background: var(--container-high);
	color: var(--ink-muted);
}

.gamife-plan__badge {
	position: absolute;
	top: -0.75rem;
	left: clamp(1.5rem, 3vw, 2rem);
	padding: 0.35rem 0.85rem;
	border-radius: var(--radius-pill);
	background: var(--espresso);
	color: var(--surface);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	transition:
		background-color var(--dur-settle) var(--ease-settle),
		color var(--dur-settle) var(--ease-settle);
}

.gamife-plan__name {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: 600;
	color: var(--ink);
}

.gamife-plan__price {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	font-family: var(--font-display);
	font-size: clamp(2.25rem, 5vw, 3rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--ink);
}

.gamife-plan__period {
	font-family: var(--font-body);
	font-size: var(--text-m);
	font-weight: 400;
	color: var(--ink-faint);
	letter-spacing: 0;
}

.gamife-plan__detail {
	margin: 0;
	font-size: var(--text-s);
	color: var(--ink-muted);
}

.gamife-plan__was {
	color: var(--ink-faint);
	text-decoration: line-through;
}

.gamife-plan__save {
	display: inline-block;
	margin-left: 0.4rem;
	padding: 0.15rem 0.5rem;
	border-radius: var(--radius-pill);
	/* Cinnamon carries espresso text at 5.3:1 — the one place the accent is a
	   fill behind words rather than a mark beside them. */
	background: var(--cinnamon);
	color: var(--espresso);
	font-size: 0.72rem;
	font-weight: 700;
}

.gamife-pricing__terms {
	max-width: 46rem;
	margin-top: var(--space-m);
	font-size: var(--text-s);
	color: var(--ink-faint);
}

/* -------------------------------------------------------------- privacy --- */

/*
 * Dark, once, on a page that is otherwise parchment. The claim is the strongest
 * thing the site has to say and the only section that earns a change of ground.
 */
.gamife-privacy {
	background: var(--roast-depth);
	color: var(--container-low);
	/* Espresso on roast is 1.4:1 — invisible. Flip the ring for this ground. */
	--focus-ring: var(--surface);
}

.gamife-privacy h2 {
	color: var(--surface);
}

.gamife-privacy .gamife-eyebrow {
	color: var(--cinnamon);
}

.gamife-privacy .gamife-lede {
	color: rgba(255, 248, 245, 0.78);
}

/*
 * Two or four, never three. `auto-fit` with a minimum width fitted three across
 * at the desktop measure and wrapped the fourth onto a line of its own, which
 * reads as a mistake rather than as a list — so the count is stated instead of
 * inferred.
 */
.gamife-privacy__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-m) var(--space-l);
	margin-top: var(--space-l);
}

@media (min-width: 64rem) {
	.gamife-privacy__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 34rem) {
	.gamife-privacy__list {
		grid-template-columns: minmax(0, 1fr);
	}
}

.gamife-privacy__item {
	padding-top: var(--space-s);
	border-top: 1px solid rgba(255, 248, 245, 0.22);
	font-size: var(--text-m);
	color: rgba(255, 248, 245, 0.82);
}

.gamife-privacy__item p {
	margin: 0;
	color: inherit;
}

.gamife-privacy__name {
	margin: 0 0 0.35rem;
	font-family: var(--font-display);
	font-size: var(--text-l);
	font-weight: 600;
	color: var(--surface);
}

/* ------------------------------------------------------------------ faq --- */

.gamife-faq__list {
	max-width: 46rem;
	margin-top: var(--space-l);
	border-top: 1px solid var(--outline);
}

/* ------------------------------------------------------------ closing --- */

.gamife-closing {
	background: var(--bloom);
	text-align: center;
}

.gamife-closing h2 {
	max-width: 16ch;
	margin-inline: auto;
}

.gamife-closing .gamife-lede {
	margin-inline: auto;
	text-align: center;
}

.gamife-closing__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-s);
	margin-top: var(--space-l);
}

/* ---------------------------------------------------------------- legal --- */

/*
 * The policy pages. Long-form reading, one column, generous measure — the
 * opposite of the landing page's job, and styled like a document rather than
 * like marketing.
 */
.gamife-legal {
	padding-block: var(--space-xl);
}

.gamife-legal__header {
	max-width: var(--measure);
	padding-bottom: var(--space-m);
	margin-bottom: var(--space-l);
	border-bottom: 1px solid var(--outline);
}

.gamife-legal__header h1 {
	font-size: clamp(2.25rem, 5vw, 3.25rem);
	margin: 0 0 var(--space-s);
}

.gamife-legal__meta {
	margin: 0;
	font-size: var(--text-s);
	color: var(--ink-faint);
}

.gamife-legal__body {
	max-width: var(--measure);
}

.gamife-legal__body h2 {
	margin: var(--space-l) 0 var(--space-s);
	font-size: var(--text-xl);
}

.gamife-legal__body h3 {
	margin: var(--space-m) 0 var(--space-xs);
	font-size: var(--text-l);
}

.gamife-legal__body p,
.gamife-legal__body li {
	color: var(--ink-muted);
}

.gamife-legal__body ul,
.gamife-legal__body ol {
	padding-left: 1.25rem;
}

.gamife-legal__body li {
	margin-bottom: 0.5rem;
}

.gamife-legal__body hr {
	margin-block: var(--space-l);
	border: 0;
	border-top: 1px solid var(--outline);
}

/*
 * The placeholder guard. Until the entity name, jurisdiction and address are
 * filled in, the generator leaves the bracketed token in place and wraps it so
 * it cannot be mistaken for finished copy — a policy that names
 * "[LEGAL ENTITY NAME]" is worse than no policy at all.
 */
.gamife-legal__placeholder {
	padding: 0.1em 0.35em;
	border-radius: var(--radius-s);
	background: var(--cinnamon);
	color: var(--espresso);
	font-family: var(--font-mono);
	font-size: 0.85em;
	font-weight: 700;
}

/* ----------------------------------------------------------------- 404 --- */

.gamife-notfound {
	display: grid;
	place-items: center;
	gap: var(--space-m);
	min-height: 60vh;
	text-align: center;
}

.gamife-notfound__mascot {
	margin: 0;
}

.gamife-notfound__mascot img {
	width: 150px;
	height: auto;
	aspect-ratio: 180 / 288;
	object-fit: contain;
}

/*
 * The draft notice. Deliberately loud: it is only on the page when the document
 * is not ready to be published, and it should be impossible to scroll past.
 */
.gamife-legal__unresolved {
	max-width: var(--measure);
	margin: 0 0 var(--space-l);
	padding: var(--space-s) var(--space-m);
	border-radius: var(--radius-m);
	border: 1px solid var(--cinnamon);
	background: var(--container);
	font-size: var(--text-s);
	color: var(--ink);
}

.gamife-legal__unresolved code {
	font-family: var(--font-mono);
	font-size: 0.92em;
}

/* The policy's two comparison tables. */
.gamife-legal__body table {
	width: 100%;
	margin-block: var(--space-m);
	border-collapse: collapse;
	font-size: var(--text-s);
	text-align: left;
}

.gamife-legal__body th,
.gamife-legal__body td {
	padding: 0.65rem 0.85rem;
	border-bottom: 1px solid var(--outline);
	vertical-align: top;
	color: var(--ink-muted);
}

.gamife-legal__body th {
	color: var(--ink);
	font-weight: 600;
	background: var(--container-low);
}

.gamife-legal__body code {
	padding: 0.1em 0.35em;
	border-radius: var(--radius-s);
	background: var(--container);
	font-family: var(--font-mono);
	font-size: 0.9em;
}