/* ==========================================================================
   UseAppy: responsive rules for the theme (header, mega menu, footer,
   content) and every UseAppy Elementor widget.

   Loaded after main.css and the widget stylesheets, so each block below
   only overrides the desktop design. Widget values set per device in
   Elementor (Responsive controls) still win: they use more specific
   selectors.

   Bootstrap 5 breakpoints, top to bottom:

     XL and up        min-width: 1200px
     XXL and up       min-width: 1400px
     Below XXL        max-width: 1399.98px   (xl:  1200 - 1399)
     Below XL         max-width: 1199.98px   (lg:   992 - 1199, mobile menu)
     Below LG         max-width:  991.98px   (md:   768 -  991)
     Below MD         max-width:  767.98px   (sm:   576 -  767)
     Below SM         max-width:  575.98px   (xs:     0 -  575)
     Small phones     max-width:  359.98px   (extra step below xs)

   Inside each breakpoint: theme (content, header, menu, footer), then the
   widgets in panel order: Main Hero, Ecosystem Comparison, Product
   Ecosystem, Blog Carousel, Feature Grid, Reviews Carousel, Logo Strip,
   Feature Section, Feature Tabs, FAQ Accordion,
   CTA Banner, Contact Section, then the 404 Page, Blog Listing and Single Post templates.
   ========================================================================== */

/* --------------------------------------------------------------------------
   WordPress admin bar (WordPress's own breakpoints)
   -------------------------------------------------------------------------- */

@media (max-width: 782px) {
	.admin-bar {
		--useappy-admin-bar: 46px;
		--useappy-admin-bar-fixed: 46px;
	}
}

@media (max-width: 600px) {
	.admin-bar {
		--useappy-admin-bar-fixed: 0px;
	}
}

/* ==========================================================================
   XL and up (min-width: 1200px): desktop menu
   ========================================================================== */

@media (min-width: 1200px) {

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

	.site-header.is-sticky.is-scrolled .site-header__inner {
		min-height: var(--useappy-header-sticky-h, 80px);
	}

	/* Keep the page from jumping up when the in-flow sticky header shrinks. */
	.site-header.is-sticky.is-scrolled:not(.is-transparent) {
		margin-bottom: calc(var(--useappy-header-h) - var(--useappy-header-sticky-h, 80px));
	}
}

/* Dropdowns and mega menu open on hover (mouse only). */
@media (hover: hover) and (min-width: 1200px) {
	.primary-menu > li:hover > .sub-menu--panel,
	.primary-menu > li:focus-within > .sub-menu--panel {
		visibility: visible;
		opacity: 1;
		transform: translate(-50%, 0);
		transition-delay: 0s;
	}

	.primary-menu > li:hover > .submenu-toggle svg {
		transform: rotate(180deg);
	}
}

/* ==========================================================================
   XXL and up (min-width: 1400px)
   ========================================================================== */

@media (min-width: 1400px) {

	/* Main Hero: the mockup lets the image reach into the column gutter. */
	.useappy-hero__image {
		flex-shrink: 0;
		width: 108.7%;
	}
}

/* ==========================================================================
   Below XXL (max-width: 1399.98px)
   ========================================================================== */

@media (max-width: 1399.98px) {

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

	.site-header__inner {
		gap: 24px;
	}

	.primary-menu {
		gap: 30px;
	}

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

	.site-footer__brand {
		padding-right: 24px;
	}

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

	.useappy-hero__title {
		font-size: 70px;
		line-height: 80px;
	}

	.useappy-hero__stats {
		--useappy-hero-stats-gap: 32px;
	}

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

	.useappy-about {
		padding-top: 170px;
	}

	/* About Intro: the design's 252px gutter and 58/42 split leave the points
	   too narrow once the row shrinks, so give them more of it. */

	.useappy-intro__grid {
		--useappy-intro-left: 52;
		--useappy-intro-right: 48;
		--useappy-intro-gap: 8%;
	}

	.useappy-intro__points {
		column-gap: 40px;
	}

	/* About Statement: the heading is capped at its own measure, so the width
	   the row loses is better spent on the body copy than on the heading
	   column, which would only sit half empty. */

	.useappy-statement__grid {
		--useappy-statement-left: 36;
		--useappy-statement-right: 64;
	}

	/* About Founder -------------------------------------------------------- */

	.useappy-founder__grid {
		--useappy-founder-left: 52;
		--useappy-founder-right: 48;
	}

	/* About Team ----------------------------------------------------------- */

	.useappy-team__title {
		font-size: 32px;
		line-height: 40px;
	}

	/* Blog Carousel ------------------------------------------------------ */

	.useappy-blog {
		--useappy-blog-card-w: 340px;
		--useappy-blog-card-h: 340px;
	}

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

	.useappy-faq__answer {
		padding-right: 64px;
	}

	/* Contact Section: the 900px form would squeeze the text column. ----- */

	.useappy-contact__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, min(var(--useappy-contact-form-w), 58%));
		column-gap: 48px;
	}

	.useappy-contact-form-first-yes .useappy-contact__grid {
		grid-template-columns: minmax(0, min(var(--useappy-contact-form-w), 58%)) minmax(0, 1fr);
	}

	/* Numbered Cards 2: five narrower cards ------------------------------ */

	.useappy-ncards2__card {
		padding: 26px 24px;
	}

	.useappy-ncards2__text {
		font-size: 20px;
		line-height: 28px;
	}

	/* Image Cards: four narrower cards -------------------------------- */

	.useappy-icards__card {
		padding: 20px 20px 22px;
	}

	.useappy-icards__label {
		font-size: 20px;
		line-height: 28px;
	}

	/* Policy Page --------------------------------------------------------- */

	.useappy-policy {
		--useappy-policy-toc: 260px;
	}

	.useappy-policy__layout {
		column-gap: 64px;
	}

	.useappy-policy__title {
		font-size: 72px;
	}
}

/* ==========================================================================
   Below XL (max-width: 1199.98px): mobile menu drawer
   ========================================================================== */

@media (max-width: 1199.98px) {

	:root {
		--useappy-header-h: 76px;
	}

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

	.site-header__inner {
		gap: 16px;
	}

	.menu-toggle {
		display: inline-flex;
	}

	/* Main Menu: slide-down drawer ---------------------------------------- */

	.primary-nav {
		position: fixed;
		top: var(--useappy-header-bottom, 76px);
		right: 0;
		bottom: 0;
		left: 0;
		display: block;
		padding: 16px calc(var(--bs-gutter-x, 1.5rem) * 0.5) 40px;
		overflow-y: auto;
		overscroll-behavior: contain;
		visibility: hidden;
		opacity: 0;
		background: var(--useappy-dark);
		border-top: 1px solid rgba(255, 255, 255, 0.08);
		transform: translateY(-8px);
		transition: opacity 0.2s ease, transform 0.25s var(--useappy-ease), visibility 0s linear 0.25s;
	}

	.site-header.is-nav-open .primary-nav {
		visibility: visible;
		opacity: 1;
		transform: none;
		transition-delay: 0s;
	}

	/* Drawer content lines up with the page container. */
	.primary-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		max-width: 960px;
		margin-inline: auto;
	}

	.primary-menu > li {
		flex-wrap: wrap;
		justify-content: space-between;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	}

	.primary-menu > li > a {
		flex: 1;
		padding-block: 16px;
		font-size: 18px;
	}

	.primary-menu > .menu-item-has-children::after {
		display: none;
	}

	.submenu-toggle {
		width: 44px;
		height: 44px;
	}

	.sub-menu--panel,
	.has-mega-menu > .sub-menu--panel {
		position: static;
		display: none;
		flex-basis: 100%;
		min-width: 0;
		margin-bottom: 16px;
		padding: 20px 22px 24px;
		visibility: visible;
		opacity: 1;
		box-shadow: none;
		transform: none;
		transition: none;
	}

	.primary-menu > li.is-open > .sub-menu--panel {
		display: block;
		transform: none;
	}

	/* Mega menu: groups side by side (Build / Serve, Sell / Retain). */
	.primary-menu > li.has-mega-menu.is-open > .sub-menu--panel {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 20px;
	}

	.sub-menu--links a,
	.primary-menu .mega-menu__group > a {
		white-space: normal;
	}

	body.useappy-nav-open {
		overflow: hidden;
	}

	/* Footer: brand on its own row, four menu columns below. -------------- */

	.site-footer__top {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		row-gap: 48px;
	}

	.site-footer__brand {
		grid-column: 1 / -1;
		padding-right: 0;
	}

	.site-footer__description {
		max-width: 520px;
	}

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

	.useappy-hero__title {
		font-size: 60px;
		line-height: 68px;
	}

	.useappy-hero__stats {
		--useappy-hero-stats-gap: 24px;

		margin-top: 60px;
	}

	.useappy-hero__stat-number {
		font-size: 36px;
		line-height: 40px;
	}

	.useappy-hero__stat-label {
		font-size: 16px;
		line-height: 24px;
	}

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

	.useappy-about {
		padding-top: 140px;
	}

	.useappy-about__title {
		font-size: 60px;
		line-height: 68px;
	}

	.useappy-about__card-title {
		font-size: 24px;
		line-height: 32px;
	}

	.useappy-about__card-text {
		font-size: 18px;
		line-height: 26px;
	}

	/* About Intro -------------------------------------------------------- */

	.useappy-intro {
		padding: 80px 0;
	}

	.useappy-intro__eyebrow {
		margin-bottom: 26px;
		font-size: 26px;
		line-height: 32px;
	}

	.useappy-intro__title {
		font-size: 30px;
		line-height: 38px;
	}

	.useappy-intro__number {
		margin-bottom: 22px;
		font-size: 42px;
		line-height: 50px;
	}

	.useappy-intro__point-title {
		font-size: 20px;
		line-height: 28px;
	}

	/* "Stack the columns below: laptop" ----------------------------------- */

	.useappy-intro.useappy-intro-stack-xl .useappy-intro__grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 56px;
	}

	/* About Values ------------------------------------------------------- */

	.useappy-values {
		padding: 64px 0;
	}

	.useappy-values__header {
		margin-bottom: 56px;
	}

	.useappy-values__title {
		font-size: 40px;
		line-height: 48px;
	}

	/* About Statement ---------------------------------------------------- */

	.useappy-statement {
		padding: 64px 0 56px;
	}

	.useappy-statement__grid {
		--useappy-statement-left: 40;
		--useappy-statement-right: 60;
	}

	.useappy-statement__title {
		font-size: 32px;
		line-height: 40px;
	}

	/* "Stack the columns below: laptop" ----------------------------------- */

	.useappy-statement.useappy-statement-stack-xl .useappy-statement__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* About Founder -------------------------------------------------------- */

	.useappy-founder__title {
		font-size: 32px;
		line-height: 38px;
	}

	/* About Team: 5 columns get tight once the row itself narrows, so drop
	   to 4 a step before the design's own breakpoints kick in. ------------ */

	.useappy-team {
		--useappy-team-cols: 4 !important;
	}

	.useappy-team__title {
		font-size: 30px;
		line-height: 38px;
	}

	/* Ecosystem Comparison ----------------------------------------------- */

	.useappy-compare__title {
		font-size: 42px;
		line-height: 52px;
	}

	.useappy-compare__column-title {
		font-size: 26px;
		line-height: 34px;
	}

	.useappy-compare__highlight-card {
		gap: 16px;
		padding: 24px 20px 18px;
	}

	.useappy-compare__highlight-number {
		width: 56px;
		height: 56px;
		font-size: 28px;
	}

	.useappy-compare__highlight-title {
		font-size: 20px;
	}

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

	.useappy-pcards__title {
		font-size: 44px;
		line-height: 54px;
	}

	/* Newsletter ------------------------------------------------------- */

	.useappy-newsletter__title {
		font-size: 52px;
		line-height: 62px;
	}

	.useappy-newsletter__card {
		padding: 64px 40px 80px;
	}

	/* App Family ------------------------------------------------------- */

	.useappy-family__title {
		font-size: 42px;
		line-height: 52px;
	}

	.useappy-family__stage {
		padding: 19px 19px 26px;
	}

	.useappy-family__stage-title {
		font-size: 28px;
		line-height: 36px;
	}

	.useappy-family__stage-text {
		margin-top: 18px;
	}

	.useappy-family__product {
		padding: 18px 20px 20px;
	}

	/* Product Ecosystem -------------------------------------------------- */

	.useappy-eco__title {
		font-size: 44px;
		line-height: 52px;
	}

	.useappy-eco__tabs {
		margin-bottom: 72px;
	}

	.useappy-eco__panel-title {
		font-size: 32px;
		line-height: 40px;
	}

	/* Blog Carousel ------------------------------------------------------ */

	.useappy-blog__title {
		font-size: 40px;
		line-height: 54px;
	}

	/* Feature Grid: two columns ------------------------------------------ */

	.useappy-feat__grid {
		--useappy-feat-cols: var(--useappy-feat-cols-t, 2);

		column-gap: 20px;
		row-gap: 20px;
	}

	.useappy-feat__title {
		font-size: 44px;
		line-height: 52px;
	}

	/* Reviews Carousel --------------------------------------------------- */

	.useappy-reviews__eyebrow {
		margin-bottom: 26px;
		font-size: 29px;
		line-height: 36px;
	}

	.useappy-reviews__title {
		font-size: 34px;
		line-height: 44px;
	}

	/* Feature Section: the copy and the media get tight side by side, so
	   drop the design's text inset and even out the columns. ------------- */

	.useappy-fsec__grid,
	.useappy-fsec--media-left .useappy-fsec__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 40px;
	}

	.useappy-fsec--phones .useappy-fsec__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	}

	.useappy-fsec--media-left .useappy-fsec__content {
		padding-inline-start: 0;
	}

	/* Feature Section 2 ------------------------------------------------- */

	.useappy-fsec2 {
		padding: 96px 0;
	}

	.useappy-fsec2__title {
		font-size: 42px;
		line-height: 52px;
	}

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

	.useappy-ncards {
		padding: 80px 0;
	}

	.useappy-ncards__title {
		margin-bottom: 52px;
		font-size: 42px;
		line-height: 52px;
	}

	.useappy-ncards__card {
		padding: 26px 26px 23px;
	}

	.useappy-ncards__text {
		font-size: 22px;
		line-height: 30px;
	}

	/* Numbered Cards 2: three per row --------------------------------- */

	.useappy-ncards2 {
		padding: 80px 0 72px;
	}

	.useappy-ncards2__grid {
		--useappy-ncards2-cols: var(--useappy-ncards2-cols-t, 3);
	}

	.useappy-ncards2__title {
		font-size: 42px;
		line-height: 52px;
	}

	.useappy-ncards2__subtitle {
		font-size: 22px;
		line-height: 30px;
	}

	.useappy-ncards2__footer {
		font-size: 28px;
		line-height: 36px;
	}

	/* Image Cards: two per row ------------------------------------- */

	.useappy-icards {
		padding: 80px 0 72px;
	}

	.useappy-icards__header {
		margin-bottom: 44px;
	}

	.useappy-icards__grid {
		--useappy-icards-cols: var(--useappy-icards-cols-t, 2);
	}

	.useappy-icards__title {
		margin-bottom: 20px;
		font-size: 42px;
		line-height: 52px;
	}

	.useappy-icards__subtitle {
		font-size: 22px;
		line-height: 30px;
	}

	.useappy-icards__card {
		padding: 24px 24px 25px;
	}

	.useappy-icards__label {
		font-size: 22px;
		line-height: 30px;
	}

	/* Enquiry Form: cards stacked, contact card below the form ------------ */

	.useappy-enq {
		padding: 80px 0;
	}

	.useappy-enq__eyebrow {
		font-size: 28px;
		line-height: 36px;
	}

	.useappy-enq__title {
		font-size: 42px;
		line-height: 52px;
	}

	.useappy-enq__description {
		font-size: 22px;
		line-height: 30px;
	}

	.useappy-enq__grid,
	.useappy-enq-info-first-yes .useappy-enq__grid {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
	}

	/* Full-width contact card: contact rows left, hours / demo / social right. */
	.useappy-enq__info:has(> .useappy-enq__info-extra) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 56px;
		align-items: start;
	}

	.useappy-enq__info:has(> .useappy-enq__info-extra) > div {
		display: block;
		min-width: 0;
	}

	.useappy-enq__info-extra > :first-child {
		padding-top: 0;
		margin-top: 0;
		border-top: 0;
	}

	/* Feature Tabs ------------------------------------------------------- */

	.useappy-ftabs__body,
	.useappy-ftabs--media-right .useappy-ftabs__body {
		padding-inline: 0;
	}
	/* FAQ Accordion ------------------------------------------------------ */

	.useappy-faq__eyebrow {
		margin-bottom: 26px;
		font-size: 29px;
		line-height: 36px;
	}

	.useappy-faq__title {
		font-size: 34px;
		line-height: 44px;
	}

	.useappy-faq__button {
		padding-block: 34px;
	}

	.useappy-faq__number {
		font-size: 28px;
	}

	.useappy-faq__question {
		font-size: 24px;
		line-height: 34px;
	}

	.useappy-faq__answer {
		padding-right: 48px;
	}

	/* CTA Banner --------------------------------------------------------- */

	.useappy-cta__title {
		font-size: 52px;
		line-height: 60px;
	}

	/* Contact Section: form below the contact details -------------------- */

	.useappy-contact__grid,
	.useappy-contact-form-first-yes .useappy-contact__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.useappy-contact {
		padding: 64px 0;
	}

	.useappy-contact__eyebrow {
		font-size: 29px;
		line-height: 36px;
	}

	.useappy-contact__title {
		font-size: 34px;
		line-height: 42px;
	}

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

	.error-404__code {
		font-size: 130px;
	}

	/* Policy Page --------------------------------------------------------- */

	.useappy-policy {
		--useappy-policy-toc: 240px;
	}

	.useappy-policy__hero {
		padding-bottom: 76px;
	}

	.useappy-policy__hero {
		--useappy-policy-hero-pt: 80px;
	}

	.useappy-policy__title {
		font-size: 64px;
	}

	.useappy-policy__intro {
		font-size: 20px;
	}

	.useappy-policy__body {
		padding: 80px 0 96px;
	}

	.useappy-policy__layout {
		column-gap: 48px;
	}

	.useappy-policy__heading {
		font-size: 28px;
	}

	.useappy-policy__content {
		font-size: 17px;
	}

	.useappy-policy__contact {
		padding: 36px;
	}

	/* Single Post --------------------------------------------------------- */

	.post-hero {
		padding: 64px 0 80px;
	}

	.post-single.has-cover .post-hero {
		padding-bottom: 160px;
	}

	.useappy-header-transparent .post-hero {
		padding-top: calc(var(--useappy-header-h) + 64px);
	}

	.post-hero__title {
		font-size: 60px;
	}

	.post-hero__excerpt {
		font-size: 21px;
	}

	.post-single {
		--post-size: 19px;
	}

	.post-body {
		margin-top: 64px;
	}

	.post-content h2 {
		font-size: 32px;
	}

	.post-content h3 {
		font-size: 26px;
	}

	.post-related {
		padding: 80px 0 88px;
	}

	.post-related__title {
		font-size: 36px;
	}
}

/* ==========================================================================
   Below LG (max-width: 991.98px): tablets, columns stack
   ========================================================================== */

@media (max-width: 991.98px) {

	/* Content ------------------------------------------------------------ */

	.site-main {
		padding-block: 40px;
	}

	.site-main--elementor,
	.site-main--post,
	.site-main--blog {
		padding-block: 0;
	}

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

	.site-footer__top {
		padding-block: 64px 48px;
	}

	.site-footer__bottom {
		padding-block: 28px 56px;
	}

	.site-footer__copyright,
	.site-footer .site-footer__social-link {
		font-size: 18px;
		line-height: 24px;
	}

	/* Main Hero: image below the text ------------------------------------ */

	.useappy-hero {
		padding: 64px 0 64px;
	}

	.useappy-hero__row {
		row-gap: 48px;
	}

	.useappy-hero__media {
		justify-content: center;
	}

	.useappy-hero__image {
		max-width: 680px;
	}

	.useappy-hero__buttons {
		margin-top: 40px;
	}

	.useappy-hero__stats {
		margin-top: 56px;
	}

	/* About Hero: the bento columns get narrow, so give the grid more height
	   and pull the card padding in. ---------------------------------------- */

	.useappy-about {
		padding: 120px 0 64px;
	}

	.useappy-about__header {
		margin-bottom: 44px;
	}

	.useappy-about__title {
		font-size: 52px;
		line-height: 60px;
	}

	.useappy-about__grid {
		gap: 16px 20px;
		aspect-ratio: 1060 / 640;
	}

	.useappy-about__col {
		gap: 16px;
	}

	.useappy-about__item--card {
		padding: 20px;
	}

	/* "Stack the grid below: tablet landscape" ---------------------------- */

	.useappy-about.useappy-about-stack-lg .useappy-about__grid {
		grid-template-columns: minmax(0, 1fr);
		aspect-ratio: auto;
	}

	.useappy-about.useappy-about-stack-lg .useappy-about__col {
		display: contents;
	}

	.useappy-about.useappy-about-stack-lg .useappy-about__item--image {
		aspect-ratio: 16 / 11;
	}

	/* About Intro -------------------------------------------------------- */

	.useappy-intro {
		padding: 64px 0;
	}

	.useappy-intro__points {
		gap: 44px 40px;
	}

	/* Default "Stack the columns below: tablet landscape" ----------------- */

	.useappy-intro.useappy-intro-stack-lg .useappy-intro__grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 48px;
	}

	/* About Values ------------------------------------------------------- */

	.useappy-values {
		padding: 56px 0;
	}

	.useappy-values__title {
		font-size: 34px;
		line-height: 42px;
	}

	/* Two per row: override the track list, not --useappy-values-cols, so a
	   per-device count set in Elementor still wins. */

	.useappy-values .useappy-values__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* About Statement ---------------------------------------------------- */

	.useappy-statement {
		padding: 56px 0 48px;
	}

	/* Default "Stack the columns below: tablet landscape" ----------------- */

	.useappy-statement.useappy-statement-stack-lg .useappy-statement__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* About Founder -------------------------------------------------------- */

	.useappy-founder {
		padding: 48px 0;
	}

	/* About Team ------------------------------------------------------------ */

	.useappy-team {
		--useappy-team-cols: 3 !important;
		padding: 80px 0;
	}

	.useappy-team__title {
		font-size: 28px;
		line-height: 36px;
	}

	/* Ecosystem Comparison: columns stack -------------------------------- */

	.useappy-compare {
		padding: 64px 0;
	}

	.useappy-compare__eyebrow {
		margin-bottom: 12px;
		font-size: 28px;
		line-height: 36px;
	}

	/* Columns stack: the description sits under the title. */
	.useappy-compare__header--split .useappy-compare__description {
		margin-top: 16px;
	}

	.useappy-compare__columns {
		margin-top: 40px;
	}

	.useappy-compare__highlights {
		grid-template-columns: minmax(0, 1fr);
	}

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

	.useappy-pcards {
		--useappy-pcards-gap: 24px;

		padding: 80px 0;
	}

	.useappy-pcards__grid {
		margin-top: 44px;
	}

	/* Newsletter: two fields per row, the button beside the last one ---- */

	.useappy-newsletter__form {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.useappy-newsletter__form:has(.useappy-newsletter__field:nth-of-type(2):last-of-type) .useappy-newsletter__submit,
	.useappy-newsletter__form:not(:has(.useappy-newsletter__field:nth-of-type(2))) .useappy-newsletter__submit {
		grid-column: 1 / -1;
	}

	.useappy-newsletter__card {
		padding: 56px 32px 64px;
	}

	.useappy-newsletter__description {
		margin-bottom: 44px;
	}

	/* App Family: stage groups wrap, so give the rows more room -------- */

	.useappy-family__grid {
		row-gap: 32px;
	}

	/* Product Ecosystem -------------------------------------------------- */

	.useappy-eco {
		padding: 64px 0 72px;
	}

	.useappy-eco__title {
		font-size: 40px;
		line-height: 48px;
	}

	.useappy-eco__tabs {
		margin: 40px auto 56px;
	}

	.useappy-eco__tab {
		font-size: 18px;
	}

	/* Blog Carousel ------------------------------------------------------ */

	.useappy-blog {
		--useappy-blog-card-w: 300px;
		--useappy-blog-card-h: 320px;

		padding: 64px 0;
	}

	.useappy-blog__title {
		font-size: 36px;
		line-height: 48px;
	}

	.useappy-blog__header {
		margin-bottom: 40px;
	}

	.useappy-blog__nav {
		margin-top: 36px;
	}

	/* Feature Grid ------------------------------------------------------- */

	.useappy-feat {
		padding: 64px 0;
	}

	.useappy-feat__title {
		font-size: 40px;
		line-height: 48px;
	}

	.useappy-feat__header {
		margin-bottom: 40px;
	}

	.useappy-feat__card {
		padding: 26px 22px 26px 24px;
	}

	/* Reviews Carousel --------------------------------------------------- */

	.useappy-reviews {
		padding: 64px 0 48px;
	}

	.useappy-reviews__eyebrow {
		margin-bottom: 20px;
		font-size: 24px;
		line-height: 32px;
	}

	.useappy-reviews__title {
		font-size: 30px;
		line-height: 38px;
	}

	.useappy-reviews__header {
		margin-bottom: 36px;
	}

	/* Logo Strip --------------------------------------------------------- */

	.useappy-logos__title {
		font-size: 26px;
		line-height: 34px;
	}

	.useappy-logos__list {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 30px 0;
	}

	.useappy-logos__initials {
		font-size: 18px;
	}

	/* Feature Section ---------------------------------------------------- */

	.useappy-fsec {
		padding: 80px 0;
	}

	.useappy-fsec__title {
		font-size: 38px;
		line-height: 1.2;
	}

	.useappy-fsec__mosaic {
		margin-right: 0;
	}

	.useappy-fsec__phones {
		justify-content: center;
	}

	/* Default "Stack the columns below: large" */

	.useappy-fsec-stack-lg .useappy-fsec__grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 50px;
	}

	.useappy-fsec-stack-lg.useappy-fsec--media-left .useappy-fsec__media {
		order: 2;
	}

	/* Feature Section 2 ------------------------------------------------- */

	.useappy-fsec2 {
		padding: 80px 0;
	}

	.useappy-fsec2__title {
		font-size: 38px;
		line-height: 1.2;
	}

	.useappy-fsec2__media img {
		border-radius: 20px;
	}

	/* Default "Stack columns below: large": photo first, then the text. */

	.useappy-fsec2-stack-lg .useappy-fsec2__grid,
	.useappy-fsec2-stack-lg.useappy-fsec2--media-right .useappy-fsec2__grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 48px;
	}

	.useappy-fsec2-stack-lg.useappy-fsec2--media-right .useappy-fsec2__media {
		order: 0;
	}

	/* Numbered Cards: two per row ---------------------------------------- */

	.useappy-ncards__grid {
		--useappy-ncards-cols: var(--useappy-ncards-cols-t, 2);
	}

	.useappy-ncards__title {
		margin-bottom: 44px;
		font-size: 38px;
		line-height: 1.2;
	}

	/* Numbered Cards 2 -------------------------------------------------- */

	.useappy-ncards2__title {
		font-size: 38px;
		line-height: 1.2;
	}

	/* Cards with descriptions need the room: two per row from here down. */
	.useappy-ncards2__grid:has(.useappy-ncards2__desc) {
		--useappy-ncards2-cols: var(--useappy-ncards2-cols-t, 2);
	}

	.useappy-ncards2__footer {
		font-size: 26px;
		line-height: 34px;
	}

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

	.useappy-icards__title {
		font-size: 38px;
		line-height: 1.2;
	}

	/* Enquiry Form ------------------------------------------------------- */

	.useappy-enq__title {
		font-size: 38px;
		line-height: 1.2;
	}

	.useappy-enq__description {
		font-size: 20px;
		line-height: 28px;
	}

	/* Feature Tabs: the tab strip scrolls sideways instead of wrapping ----- */

	.useappy-ftabs {
		padding: 60px 0;
	}

	.useappy-ftabs__title,
	.useappy-ftabs__panel-title {
		font-size: 38px;
		line-height: 44px;
	}

	.useappy-ftabs__list {
		flex-wrap: nowrap;
		gap: 30px;
		padding-inline: clamp(16px, 3vw, 48px);
		margin-inline: calc(-1 * clamp(16px, 3vw, 48px));
		overflow-x: auto;
		scrollbar-width: none;
	}

	.useappy-ftabs__list::-webkit-scrollbar {
		display: none;
	}

	.useappy-ftabs__tab {
		flex: none;
	}

	/* Default "Stack the columns below: large" */

	.useappy-ftabs-stack-lg .useappy-ftabs__panel {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 40px;
	}

	.useappy-ftabs-stack-lg .useappy-ftabs__media {
		order: 0;
	}
	/* FAQ Accordion ------------------------------------------------------ */

	.useappy-faq {
		--useappy-faq-num-w: 56px;

		padding: 64px 0;
	}

	.useappy-faq__eyebrow {
		margin-bottom: 20px;
		font-size: 24px;
		line-height: 32px;
	}

	.useappy-faq__title {
		font-size: 30px;
		line-height: 38px;
	}

	.useappy-faq__header {
		margin-bottom: 40px;
	}

	.useappy-faq__button {
		padding: 28px 16px 28px 16px;
	}

	.is-open .useappy-faq__button {
		padding-bottom: 14px;
	}

	.useappy-faq__number {
		font-size: 22px;
	}

	.useappy-faq__question {
		font-size: 20px;
		line-height: 28px;
	}

	.useappy-faq__answer {
		padding: 0 16px 28px calc(16px + var(--useappy-faq-num-w));
	}

	.useappy-faq__list--no-numbers .useappy-faq__answer {
		padding-left: 16px;
	}

	/* CTA Banner --------------------------------------------------------- */

	.useappy-cta {
		padding: 48px 0;
	}

	.useappy-cta__box {
		padding: 48px 32px;
	}

	.useappy-cta__eyebrow {
		margin-bottom: 28px;
		font-size: 16px;
	}

	.useappy-cta__title {
		font-size: 44px;
		line-height: 52px;
	}

	/* Contact Section ---------------------------------------------------- */

	.useappy-contact__eyebrow {
		margin-bottom: 20px;
		font-size: 26px;
		line-height: 34px;
	}

	.useappy-contact__title {
		font-size: 32px;
		line-height: 40px;
	}

	.useappy-contact__cards {
		max-width: none;
	}

	.useappy-contact__form-card {
		padding: 36px 32px 40px;
	}

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

	.error-404 {
		padding: 72px 16px;
	}

	.error-404__code {
		font-size: 110px;
	}

	.error-404__title {
		font-size: 32px;
	}

	/* Policy Page --------------------------------------------------------- */

	.useappy-policy__hero {
		padding-bottom: 64px;
	}

	.useappy-policy__hero {
		--useappy-policy-hero-pt: 72px;
	}

	.useappy-policy__title {
		font-size: 56px;
	}

	.useappy-policy__intro {
		font-size: 19px;
	}

	.useappy-policy__body {
		padding: 64px 0 88px;
	}

	/* "On this page" moves above the text as a collapsible list. */
	.useappy-policy.has-toc .useappy-policy__layout,
	.useappy-policy.has-toc.useappy-policy--toc-right .useappy-policy__layout {
		grid-template-columns: minmax(0, var(--useappy-policy-measure));
	}

	.useappy-policy--toc-right .useappy-policy__aside {
		order: 0;
	}

	.useappy-policy__aside {
		margin-bottom: 48px;
	}

	.useappy-policy__toc {
		position: static;
		max-height: none;
		overflow: visible;
	}

	.useappy-policy__toc-box {
		padding: 0;
	}

	.useappy-policy__toc-title {
		min-height: 56px;
		padding: 0 20px;
		margin: 0;
		font-size: 14px;
		color: var(--useappy-policy-ink);
		cursor: pointer;
		pointer-events: auto;
	}

	.useappy-policy__toc-chevron {
		display: block;
	}

	.useappy-policy__toc-list {
		padding: 0 8px 12px;
	}

	.useappy-policy__toc-link {
		padding: 10px 12px;
	}

	.useappy-policy__contact {
		flex-direction: column;
		align-items: flex-start;
	}

	/* Blog Listing -------------------------------------------------------- */

	.post-listing__body {
		padding: 64px 0 88px;
	}

	.post-listing__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.post-listing__pages {
		margin-top: 48px;
	}

	/* Single Post --------------------------------------------------------- */

	.post-hero {
		padding: 56px 0 72px;
	}

	.post-single.has-cover .post-hero {
		padding-bottom: 144px;
	}

	.useappy-header-transparent .post-hero {
		padding-top: calc(var(--useappy-header-h) + 56px);
	}

	.post-hero__title {
		font-size: 52px;
	}

	.post-hero__excerpt {
		font-size: 20px;
	}

	.post-cover {
		margin-top: -104px;
	}

	.post-cover__img {
		border-radius: 20px;
	}

	.post-single {
		--post-size: 18px;
	}

	.post-body {
		padding-bottom: 80px;
		margin-top: 56px;
	}

	.post-content h2 {
		font-size: 30px;
	}

	.post-content h3 {
		font-size: 24px;
	}

	.post-content blockquote {
		font-size: 22px;
	}

	.post-comments .comment-respond {
		padding: 32px;
	}

	.post-related {
		padding: 72px 0 80px;
	}

	.post-related__title {
		font-size: 32px;
	}

	.post-related__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.post-related__grid > :nth-child(3) {
		display: none;
	}
}

/* ==========================================================================
   Below MD (max-width: 767.98px): large phones
   ========================================================================== */

@media (max-width: 767.98px) {

	/* Content ------------------------------------------------------------ */

	.site-main {
		padding-block: 32px;
	}

	.site-main--elementor,
	.site-main--post,
	.site-main--blog {
		padding-block: 0;
	}

	/* Footer: two menu columns, copyright under the social links ---------- */

	.site-footer__top {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 40px;
		padding-block: 56px 40px;
	}

	.site-footer__logo {
		margin-bottom: 24px;
	}

	.site-footer__description {
		font-size: 17px;
		line-height: 1.7;
	}

	.site-footer__title {
		margin-bottom: 18px;
	}

	.site-footer__menu {
		gap: 12px;
	}

	.site-footer__menu a {
		font-size: 16px;
	}

	.site-footer__bottom {
		flex-direction: column-reverse;
		align-items: flex-start;
		padding-block: 28px 40px;
	}

	.site-footer__copyright,
	.site-footer .site-footer__social-link {
		font-size: 16px;
	}

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

	.useappy-hero__title {
		font-size: 52px;
		line-height: 60px;
	}

	.useappy-hero__stat-number {
		margin-bottom: 4px;
		font-size: 34px;
		line-height: 40px;
	}

	.useappy-hero__stat-label {
		font-size: 16px;
		line-height: 24px;
	}

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

	.useappy-about {
		padding: 104px 0 56px;
	}

	.useappy-about__badge {
		margin-bottom: 22px;
		padding: 8px 20px;
		font-size: 17px;
		line-height: 24px;
	}

	.useappy-about__title {
		font-size: 44px;
		line-height: 50px;
	}

	/* Default "Stack the grid below: tablet portrait" --------------------- */

	.useappy-about.useappy-about-stack-md .useappy-about__grid {
		grid-template-columns: minmax(0, 1fr);
		aspect-ratio: auto;
	}

	.useappy-about.useappy-about-stack-md .useappy-about__col {
		display: contents;
	}

	.useappy-about.useappy-about-stack-md .useappy-about__item--image {
		aspect-ratio: 16 / 11;
	}

	/* About Intro -------------------------------------------------------- */

	.useappy-intro__eyebrow {
		margin-bottom: 20px;
		font-size: 22px;
		line-height: 28px;
	}

	.useappy-intro__title {
		font-size: 26px;
		line-height: 34px;
	}

	.useappy-intro__number {
		margin-bottom: 16px;
		font-size: 36px;
		line-height: 44px;
	}

	/* "Stack the columns below: tablet portrait" -------------------------- */

	.useappy-intro.useappy-intro-stack-md .useappy-intro__grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 40px;
	}

	/* About Values ------------------------------------------------------- */

	.useappy-values__header {
		margin-bottom: 44px;
	}

	.useappy-values__title {
		font-size: 30px;
		line-height: 38px;
	}

	.useappy-values .useappy-values__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* About Statement ---------------------------------------------------- */

	.useappy-statement__title {
		font-size: 28px;
		line-height: 36px;
	}

	/* "Stack the columns below: tablet portrait" -------------------------- */

	.useappy-statement.useappy-statement-stack-md .useappy-statement__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* About Founder -------------------------------------------------------- */

	.useappy-founder {
		padding: 40px 0;
	}

	.useappy-founder__title {
		font-size: 28px;
		line-height: 34px;
		margin-bottom: 18px;
	}

	.useappy-founder__media {
		max-width: 460px;
		margin: 0 auto;
	}

	/* About Team ------------------------------------------------------------ */

	.useappy-team {
		--useappy-team-cols: 2 !important;
		padding: 64px 0;
	}

	.useappy-team__header {
		margin-bottom: 40px;
	}

	.useappy-team__title {
		font-size: 26px;
		line-height: 34px;
	}

	/* Default "Stack the columns below: tablet portrait" ------------------ */

	.useappy-founder.useappy-founder-stack-md .useappy-founder__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Ecosystem Comparison ----------------------------------------------- */

	.useappy-compare__eyebrow {
		margin-bottom: 20px;
		font-size: 24px;
		line-height: 32px;
	}

	.useappy-compare__title {
		font-size: 30px;
		line-height: 38px;
	}

	.useappy-compare__label {
		height: 28px;
		margin-bottom: 14px;
		padding: 0 16px;
		font-size: 14px;
	}

	.useappy-compare__column-title {
		font-size: 24px;
		line-height: 32px;
	}

	.useappy-compare__column {
		max-width: none;
	}

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

	.useappy-pcards {
		padding: 64px 0;
	}

	.useappy-pcards__title {
		font-size: 36px;
		line-height: 44px;
	}

	/* Newsletter ------------------------------------------------------- */

	.useappy-newsletter {
		padding: 56px 0;
	}

	.useappy-newsletter__title {
		font-size: 40px;
		line-height: 48px;
	}

	/* App Family ------------------------------------------------------- */

	.useappy-family {
		padding: 64px 0 56px;
	}

	.useappy-family__title {
		font-size: 34px;
		line-height: 42px;
	}

	.useappy-family__grid {
		margin-top: 36px;
	}

	/* Product Ecosystem: the diagram becomes a grouped list -------------- */

	.useappy-eco__title {
		margin-bottom: 20px;
		font-size: 32px;
		line-height: 40px;
	}

	.useappy-eco__tabs {
		margin: 32px auto 40px;
	}

	.useappy-eco__tab {
		padding: 0 16px;
		font-size: 16px;
	}

	.useappy-eco__diagram {
		display: grid;
		gap: 32px;
		aspect-ratio: auto;
		container-type: normal;
	}

	.useappy-eco__lines {
		display: none;
	}

	.useappy-eco__hub {
		--useappy-eco-hub: 110px;

		position: static;
		margin: 0 auto;
		font-size: 12px;
		transform: none;
	}

	.useappy-eco__group {
		display: block;
	}

	.useappy-eco__branch-label {
		position: static;
		display: block;
		margin-bottom: 14px;
		font-size: 12px;
		transform: none;
	}

	.useappy-eco__cards {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.useappy-eco__card-item {
		position: static;
		width: auto;
		height: 72px;
		transform: none;
	}

	.useappy-eco__card {
		padding: 0 12px;
	}

	.useappy-eco__card img {
		max-height: 36px;
	}

	.useappy-eco__card-name {
		font-size: 15px;
	}

	.useappy-eco__panel-title {
		font-size: 28px;
		line-height: 36px;
	}

	.useappy-eco__panel-button {
		margin-top: 28px;
		font-size: 18px;
	}

	/* Blog Carousel ------------------------------------------------------ */

	.useappy-blog__title {
		font-size: 32px;
		line-height: 42px;
	}

	/* Feature Grid ------------------------------------------------------- */

	.useappy-feat__title {
		font-size: 36px;
		line-height: 44px;
	}

	.useappy-feat__card-title {
		font-size: 19px;
		line-height: 26px;
	}

	/* Reviews Carousel --------------------------------------------------- */

	.useappy-reviews__title {
		font-size: 28px;
		line-height: 36px;
	}

	.useappy-reviews__nav {
		gap: 16px;
	}

	/* Logo Strip --------------------------------------------------------- */

	.useappy-logos {
		padding: 50px 0;
	}

	.useappy-logos__title {
		font-size: 22px;
		line-height: 30px;
	}

	.useappy-logos__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.useappy-logos__initials {
		font-size: 17px;
	}

	/* Feature Section ---------------------------------------------------- */

	.useappy-fsec {
		padding: 60px 0;
	}

	.useappy-fsec__title {
		font-size: 30px;
	}

	.useappy-fsec__list {
		grid-template-columns: minmax(0, 1fr);
	}

	.useappy-fsec__phones {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
		justify-items: center;
	}

	.useappy-fsec__phone {
		max-width: 240px;
	}

	.useappy-fsec__mosaic-row {
		flex-direction: column;
	}

	.useappy-fsec__mosaic-item {
		flex: none;
		width: 100%;
	}

	.useappy-fsec__actions .useappy-fsec__btn {
		width: 100%;
	}

	/* "Stack the columns below: medium" */

	.useappy-fsec-stack-md .useappy-fsec__grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 50px;
	}

	.useappy-fsec-stack-md.useappy-fsec--media-left .useappy-fsec__media {
		order: 2;
	}

	/* Feature Section 2 ------------------------------------------------- */

	.useappy-fsec2 {
		padding: 60px 0;
	}

	.useappy-fsec2__title {
		font-size: 30px;
	}

	.useappy-fsec2__description,
	.useappy-fsec2__closing,
	.useappy-fsec2__list {
		margin-top: 22px;
	}

	.useappy-fsec2__list {
		grid-template-columns: minmax(0, 1fr);
	}

	.useappy-fsec2__check {
		width: 24px;
		height: 24px;
	}

	.useappy-fsec2__media img {
		border-radius: 16px;
	}

	/* "Stack columns below: medium" */

	.useappy-fsec2-stack-md .useappy-fsec2__grid,
	.useappy-fsec2-stack-md.useappy-fsec2--media-right .useappy-fsec2__grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 40px;
	}

	.useappy-fsec2-stack-md.useappy-fsec2--media-right .useappy-fsec2__media {
		order: 0;
	}

	/* Feature Grid: two per row up to the phone breakpoint ------------ */

	.useappy-feat__grid {
		--useappy-feat-cols: var(--useappy-feat-cols-m, 2);
	}

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

	.useappy-ncards {
		padding: 60px 0;
	}

	.useappy-ncards__title {
		margin-bottom: 36px;
		font-size: 30px;
	}

	.useappy-ncards__grid {
		--useappy-ncards-cols: var(--useappy-ncards-cols-m, 2);
		--useappy-ncards-gap: 16px;

		row-gap: 16px;
	}

	.useappy-ncards__card {
		padding: 22px 22px 20px;
	}

	.useappy-ncards__number {
		width: 44px;
		height: 44px;
		margin-bottom: 18px;
		font-size: 16px;
		border-radius: 11px;
	}

	.useappy-ncards__text {
		font-size: 20px;
		line-height: 28px;
	}

	/* Numbered Cards 2: two per row ----------------------------------- */

	.useappy-ncards2 {
		padding: 60px 0 56px;
	}

	.useappy-ncards2__header {
		margin-bottom: 32px;
	}

	.useappy-ncards2__title {
		font-size: 30px;
		line-height: 38px;
	}

	.useappy-ncards2__subtitle {
		font-size: 18px;
		line-height: 26px;
	}

	.useappy-ncards2__grid {
		--useappy-ncards2-cols: var(--useappy-ncards2-cols-m, 2);
		--useappy-ncards2-gap: 16px;

		row-gap: 16px;
	}

	.useappy-ncards2__grid:has(.useappy-ncards2__desc) {
		--useappy-ncards2-cols: var(--useappy-ncards2-cols-m, 2);
	}

	.useappy-ncards2__card {
		padding: 22px 20px;
	}

	.useappy-ncards2__number {
		width: 44px;
		height: 44px;
		margin-bottom: 18px;
		border-radius: 11px;
	}

	.useappy-ncards2__text {
		font-size: 19px;
		line-height: 26px;
	}

	.useappy-ncards2__desc {
		margin-top: 8px;
		font-size: 16px;
		line-height: 24px;
	}

	.useappy-ncards2__footer {
		margin-top: 32px;
		font-size: 22px;
		line-height: 30px;
	}

	/* Image Cards: two per row, tighter ------------------------------- */

	.useappy-icards {
		padding: 60px 0 56px;
	}

	.useappy-icards__header {
		margin-bottom: 32px;
	}

	.useappy-icards__title {
		margin-bottom: 14px;
		font-size: 30px;
		line-height: 38px;
	}

	.useappy-icards__subtitle {
		font-size: 18px;
		line-height: 26px;
	}

	.useappy-icards__grid {
		--useappy-icards-cols: var(--useappy-icards-cols-m, 2);
		--useappy-icards-gap: 16px;

		row-gap: 16px;
	}

	.useappy-icards__card {
		padding: 18px 18px 20px;
		border-radius: 12px;
	}

	.useappy-icards__label {
		font-size: 19px;
		line-height: 26px;
	}

	/* Enquiry Form ------------------------------------------------------- */

	.useappy-enq {
		padding: 60px 0;
	}

	.useappy-enq__info:has(> .useappy-enq__info-extra) {
		display: flex;
	}

	.useappy-enq__info:has(> .useappy-enq__info-extra) > div {
		display: contents;
	}

	.useappy-enq__info-extra > .useappy-enq__hours-block:first-child {
		padding-top: 30px;
		margin-top: 40px;
		border-top: 1px solid var(--useappy-enq-divider);
	}

	.useappy-enq__info-extra > :is(.useappy-enq__cta, .useappy-enq__social-block):first-child {
		margin-top: 40px;
	}

	.useappy-enq__eyebrow {
		font-size: 22px;
		line-height: 30px;
	}

	.useappy-enq__title {
		font-size: 30px;
	}

	.useappy-enq__description {
		font-size: 18px;
		line-height: 26px;
	}

	.useappy-enq__header {
		margin-bottom: 24px;
	}

	.useappy-enq__grid {
		--useappy-enq-gap: 20px;
	}

	.useappy-enq__form-card {
		padding: 32px 24px;
	}

	.useappy-enq__info {
		padding: 30px 24px;
	}

	.useappy-enq__info-title {
		font-size: 26px;
		line-height: 34px;
	}

	.useappy-enq__hours-block {
		margin-top: 40px;
	}

	.useappy-enq__cta {
		margin-top: 40px;
	}

	/* Feature Tabs ------------------------------------------------------- */

	.useappy-ftabs__title,
	.useappy-ftabs__panel-title {
		font-size: 30px;
		line-height: 34px;
	}

	.useappy-ftabs__features {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--useappy-point-gap, 14px);
	}

	.useappy-ftabs__actions .useappy-ftabs__btn {
		width: 100%;
	}

	/* "Stack the columns below: medium" */

	.useappy-ftabs-stack-md .useappy-ftabs__panel {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 40px;
	}

	.useappy-ftabs-stack-md .useappy-ftabs__media {
		order: 0;
	}
	/* FAQ Accordion ------------------------------------------------------ */

	.useappy-faq__title {
		font-size: 28px;
		line-height: 36px;
	}

	.useappy-faq__question {
		font-size: 19px;
		line-height: 27px;
	}

	/* CTA Banner --------------------------------------------------------- */

	.useappy-cta__box {
		padding: 44px 24px;
	}

	.useappy-cta__eyebrow {
		margin-bottom: 24px;
		font-size: 14px;
	}

	.useappy-cta__title {
		font-size: 38px;
		line-height: 46px;
	}

	/* Contact Section ---------------------------------------------------- */

	.useappy-contact__title {
		font-size: 30px;
		line-height: 38px;
	}

	.useappy-contact__form-card {
		padding: 32px 26px 36px;
	}

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

	.error-404 {
		padding: 56px 16px;
	}

	.error-404__code {
		font-size: 88px;
	}

	.error-404__title {
		font-size: 26px;
	}

	.error-404__text {
		font-size: 17px;
		line-height: 1.6;
	}

	/* Policy Page --------------------------------------------------------- */

	.useappy-policy__hero {
		padding-bottom: 56px;
	}

	.useappy-policy__hero {
		--useappy-policy-hero-pt: 56px;
	}

	.useappy-policy__eyebrow {
		padding: 7px 14px;
		font-size: 12px;
	}

	.useappy-policy__title {
		margin-top: 20px;
		font-size: 46px;
		line-height: 1.08;
	}

	.useappy-policy__eyebrow + .useappy-policy__title {
		margin-top: 20px;
	}

	.useappy-policy__intro {
		margin-top: 18px;
		font-size: 18px;
	}

	.useappy-policy__meta {
		margin-top: 24px;
		font-size: 14px;
	}

	.useappy-policy__body {
		padding: 48px 0 72px;
	}

	.useappy-policy__aside {
		margin-bottom: 40px;
	}

	.useappy-policy__toc-box {
		border-radius: 16px;
	}

	.useappy-policy__section + .useappy-policy__section {
		padding-top: 36px;
		margin-top: 36px;
	}

	.useappy-policy__heading {
		gap: 10px;
		margin-bottom: 16px;
		font-size: 24px;
	}

	.useappy-policy__content {
		font-size: 17px;
		line-height: 1.7;
	}

	.useappy-policy__content > * {
		margin-bottom: 16px;
	}

	.useappy-policy__content :is(h3, h4, h5, h6) {
		margin-top: 26px;
		font-size: 19px;
	}

	.useappy-policy__content table {
		display: block;
		overflow-x: auto;
		font-size: 15px;
	}

	.useappy-policy__contact {
		gap: 24px;
		padding: 28px;
		margin-top: 48px;
		border-radius: 20px;
	}

	.useappy-policy__contact-title {
		font-size: 22px;
	}

	.useappy-policy__contact-text {
		font-size: 16px;
	}

	.useappy-policy__contact-list {
		flex-direction: column;
		gap: 12px;
	}

	/* Blog Listing -------------------------------------------------------- */

	.post-listing__filter ul {
		margin-top: 24px;
	}

	.post-listing__search {
		margin-top: 24px;
	}

	.post-listing__body {
		padding: 48px 0 72px;
	}

	.post-listing__grid {
		gap: 20px 16px;
	}

	.post-listing__pages {
		margin-top: 40px;
	}

	.post-listing__pages .page-numbers {
		min-width: 42px;
		height: 42px;
		padding: 0 12px;
		font-size: 15px;
	}

	.post-listing__empty-title {
		font-size: 26px;
	}

	.post-listing__empty p {
		font-size: 16px;
	}

	/* Single Post --------------------------------------------------------- */

	.post-hero {
		padding: 48px 0 64px;
	}

	.post-single.has-cover .post-hero {
		padding-bottom: 120px;
	}

	.useappy-header-transparent .post-hero {
		padding-top: calc(var(--useappy-header-h) + 48px);
	}

	.post-hero__crumbs {
		font-size: 14px;
		line-height: 20px;
	}

	.post-hero__cats {
		margin-top: 22px;
	}

	.post-hero__title {
		margin-top: 16px;
		font-size: 42px;
		line-height: 1.12;
	}

	.post-hero__crumbs + .post-hero__title {
		margin-top: 22px;
	}

	.post-hero__excerpt {
		margin-top: 16px;
		font-size: 18px;
	}

	.post-hero__meta {
		gap: 8px 12px;
		margin-top: 24px;
		font-size: 15px;
	}

	.post-hero__avatar {
		width: 36px;
		height: 36px;
	}

	.post-cover {
		margin-top: -88px;
	}

	.post-cover__img {
		border-radius: 18px;
	}

	.post-cover__caption {
		font-size: 14px;
	}

	.post-single {
		--post-size: 17px;
		--post-lh: 1.7;
	}

	.post-body {
		padding-bottom: 64px;
		margin-top: 44px;
	}

	.post-content > * {
		margin-bottom: 22px;
	}

	.post-content :is(h1, h2, h3, h4, h5, h6) {
		margin: 40px 0 14px;
	}

	.post-content h1 {
		font-size: 32px;
	}

	.post-content h2 {
		font-size: 27px;
	}

	.post-content h3 {
		font-size: 22px;
	}

	.post-content h4 {
		font-size: 20px;
	}

	.post-content h5 {
		font-size: 18px;
	}

	.post-content h6 {
		font-size: 15px;
	}

	.post-content blockquote {
		padding-left: 20px;
		margin: 32px 0;
		font-size: 20px;
		border-left-width: 3px;
	}

	.post-content .wp-block-pullquote {
		padding: 28px 0;
		margin: 36px 0;
	}

	.post-content .wp-block-pullquote blockquote {
		font-size: 22px;
	}

	.post-content figure {
		margin: 32px 0;
	}

	.post-content :is(img, iframe, video) {
		border-radius: 12px;
	}

	.post-content pre {
		padding: 18px 20px;
		font-size: 14px;
		border-radius: 12px;
	}

	.post-content table {
		font-size: 15px;
	}

	.post-content :is(th, td) {
		padding: 10px 12px;
	}

	.post-content :is(.alignleft, .alignright) {
		float: none;
		max-width: 100%;
		margin: 28px 0;
	}

	.post-content hr {
		margin: 36px 0;
	}

	.post-footer {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
		padding: 20px 0;
		margin-top: 40px;
	}

	.post-footer__share {
		margin-left: 0;
	}

	.post-nav {
		margin-top: 32px;
	}

	.post-nav .nav-links {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	.post-nav .nav-next {
		grid-column: auto;
		text-align: left;
	}

	.post-nav a {
		padding: 18px 20px;
	}

	.post-nav__title {
		font-size: 17px;
	}

	.post-comments {
		margin-top: 48px;
	}

	.post-comments__title,
	.post-comments .comment-reply-title {
		font-size: 24px;
	}

	.post-comments .comment-list .children {
		padding-left: 16px;
	}

	.post-comments .comment-content p {
		font-size: 16px;
	}

	.post-comments .comment-respond {
		padding: 24px;
		margin-top: 36px;
		border-radius: 18px;
	}

	.post-comments .comment-form {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.post-comments .comment-form > :is(.comment-form-author, .comment-form-email) {
		grid-column: 1 / -1;
	}

	.post-related {
		padding: 56px 0 64px;
	}

	.post-related__head {
		margin-bottom: 28px;
	}

	.post-related__title {
		font-size: 28px;
	}

	.post-related__grid {
		gap: 16px;
	}

	.post-card__body {
		padding: 18px 20px 22px;
	}

	.post-card__title {
		font-size: 19px;
	}
}

/* ==========================================================================
   Below SM (max-width: 575.98px): phones
   ========================================================================== */

@media (max-width: 575.98px) {

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

	.site-logo__img {
		height: min(var(--useappy-logo-height, 40px), 36px);
	}

	.site-logo__text {
		font-size: min(calc(var(--useappy-logo-height, 40px) * 0.7), 25px);
	}

	.header-cta {
		height: 44px;
		gap: 10px;
		padding-left: 18px;
		font-size: 15px;
	}

	.header-cta__icon {
		width: 32px;
		height: 32px;
	}

	/* Secondary button: icon-only circle (the text stays for screen readers). */
	.header-btn {
		width: 44px;
		height: 44px;
		padding: 0;
	}

	.header-btn__text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}

	.site-header__actions {
		gap: 10px;
	}

	/* Mega menu: one group per row. -------------------------------------- */

	.primary-menu > li.has-mega-menu.is-open > .sub-menu--panel {
		grid-template-columns: 1fr;
		row-gap: 28px;
	}

	.sub-menu--panel,
	.has-mega-menu > .sub-menu--panel {
		padding: 18px 18px 22px;
	}

	.sub-menu--links {
		gap: 18px;
		margin-top: 16px !important;
	}

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

	.site-footer__top {
		column-gap: 16px;
		padding-block: 48px 36px;
	}

	.site-footer__column {
		padding-right: 0;
	}

	.site-footer__title {
		font-size: 14px;
		letter-spacing: 0.12em;
	}

	.site-footer__bottom {
		padding-block: 24px 36px;
	}

	.site-footer__copyright,
	.site-footer .site-footer__social-link {
		font-size: 15px;
		line-height: 22px;
	}

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

	.useappy-hero {
		padding: 48px 0 56px;
	}

	.useappy-hero__badge {
		margin-bottom: 24px;
		padding: 10px 18px;
		font-size: 13px;
		line-height: 20px;
	}

	.useappy-hero__title {
		font-size: 44px;
		line-height: 50px;
	}

	.useappy-hero__buttons {
		gap: 16px;
		margin-top: 32px;
	}

	.useappy-hero__btn {
		height: 48px;
		font-size: 17px;
	}

	.useappy-hero__btn--primary {
		gap: 14px;
		padding: 0 8px 0 20px;
	}

	.useappy-hero__btn--secondary {
		padding: 0 20px;
	}

	/* Still one row: tighter spacing, labels may wrap to two lines. */
	.useappy-hero__stats {
		--useappy-hero-stats-gap: 14px;

		margin-top: 44px;
	}

	.useappy-hero__stat-number {
		margin-bottom: 4px;
		font-size: 26px;
		line-height: 32px;
	}

	.useappy-hero__stat-label {
		font-size: 13px;
		line-height: 18px;
	}

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

	.useappy-about {
		padding: 92px 0 48px;
	}

	.useappy-about__header {
		margin-bottom: 32px;
	}

	.useappy-about__badge {
		margin-bottom: 18px;
		padding: 7px 18px;
		font-size: 15px;
		line-height: 22px;
	}

	.useappy-about__title {
		margin-bottom: 16px;
		font-size: 36px;
		line-height: 42px;
	}

	.useappy-about-stack-lg .useappy-about__item--image,
	.useappy-about-stack-md .useappy-about__item--image,
	.useappy-about-stack-sm .useappy-about__item--image {
		aspect-ratio: 4 / 3;
	}

	.useappy-about__card-title {
		font-size: 22px;
		line-height: 30px;
	}

	.useappy-about__card-text {
		font-size: 17px;
		line-height: 25px;
	}

	/* "Stack the grid below: phone" --------------------------------------- */

	.useappy-about.useappy-about-stack-sm .useappy-about__grid {
		grid-template-columns: minmax(0, 1fr);
		aspect-ratio: auto;
	}

	.useappy-about.useappy-about-stack-sm .useappy-about__col {
		display: contents;
	}

	/* About Intro -------------------------------------------------------- */

	.useappy-intro {
		padding: 48px 0;
	}

	.useappy-intro__title {
		font-size: 24px;
		line-height: 32px;
	}

	.useappy-intro__number {
		margin-bottom: 12px;
		font-size: 32px;
		line-height: 40px;
	}

	.useappy-intro__point-title {
		font-size: 18px;
		line-height: 26px;
	}

	/* Points stack: override the track list, not --useappy-intro-cols, so a
	   per-device column count set in Elementor still wins. */

	.useappy-intro .useappy-intro__points {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	/* About Values ------------------------------------------------------- */

	.useappy-values {
		padding: 48px 0;
	}

	.useappy-values__header {
		margin-bottom: 36px;
	}

	.useappy-values__title {
		margin-bottom: 16px;
		font-size: 26px;
		line-height: 34px;
	}

	.useappy-values__grid {
		gap: 20px;
	}

	.useappy-values__card-inner {
		padding: 22px 22px 18px;
	}

	/* About Statement ---------------------------------------------------- */

	.useappy-statement {
		padding: 48px 0 40px;
	}

	.useappy-statement__grid {
		row-gap: 28px;
	}

	.useappy-statement__title {
		font-size: 26px;
		line-height: 34px;
	}

	.useappy-statement__paragraph {
		margin-bottom: 14px;
	}

	/* About Founder -------------------------------------------------------- */

	.useappy-founder {
		padding: 32px 0;
	}

	.useappy-founder__grid {
		row-gap: 28px;
	}

	.useappy-founder__title {
		font-size: 24px;
		line-height: 30px;
	}

	.useappy-founder__quote {
		max-width: none;
	}

	.useappy-founder__credit {
		margin-top: 28px;
	}

	/* About Team: one member per row past this width, so a member's card
	   is not squeezed under 260px. ---------------------------------------- */

	.useappy-team {
		--useappy-team-cols: 1 !important;
		padding: 48px 0;
	}

	.useappy-team__title {
		font-size: 23px;
		line-height: 30px;
	}

	.useappy-team__grid {
		max-width: 340px;
		margin: 0 auto;
	}

	/* Ecosystem Comparison ----------------------------------------------- */

	.useappy-compare {
		padding: 48px 0;
	}

	.useappy-compare__eyebrow {
		font-size: 22px;
		line-height: 30px;
	}

	.useappy-compare__title {
		font-size: 26px;
		line-height: 34px;
	}

	.useappy-compare {
		--useappy-compare-spacing: 16px;
		--useappy-compare-card-x: 18px;
	}

	.useappy-compare__columns {
		margin-top: 32px;
	}

	.useappy-compare__column {
		padding-top: 20px;
		padding-bottom: 14px;
	}

	.useappy-compare__column-title {
		font-size: 22px;
		line-height: 30px;
	}

	.useappy-compare__diagram {
		margin-top: 16px;
	}

	.useappy-compare__highlights {
		margin-top: 16px;
	}

	.useappy-compare__highlight-card {
		padding: 20px 18px 16px;
	}

	.useappy-compare__highlight-title {
		font-size: 18px;
		line-height: 24px;
	}

	/* Product Cards: one card per row ----------------------------------- */

	.useappy-pcards {
		--useappy-pcards-gap: 16px;

		padding: 48px 0;
	}

	.useappy-pcards__title {
		font-size: 30px;
		line-height: 38px;
	}

	.useappy-pcards__grid {
		margin-top: 32px;
	}

	.useappy-pcards__card {
		flex-basis: 100%;
		padding: 24px 20px 28px;
	}

	.useappy-pcards__logo {
		height: 72px;
	}

	.useappy-pcards__name {
		font-size: 24px;
		line-height: 32px;
	}

	/* Newsletter: one column ------------------------------------------- */

	.useappy-newsletter {
		--useappy-newsletter-field-h: 54px;
		--useappy-newsletter-gap: 12px;

		padding: 40px 0;
	}

	.useappy-newsletter__card {
		padding: 40px 20px 44px;
		border-radius: 20px;
	}

	.useappy-newsletter__eyebrow {
		--useappy-newsletter-line-w: 40px;

		font-size: 16px;
	}

	.useappy-newsletter__title {
		font-size: 32px;
		line-height: 40px;
	}

	.useappy-newsletter__description {
		margin-bottom: 32px;
	}

	.useappy-newsletter__form {
		grid-template-columns: minmax(0, 1fr);
	}

	/* One column: the reCAPTCHA checkbox above the button, not under it. */
	.useappy-newsletter__form > .useappy-recaptcha,
	.useappy-newsletter__form > .useappy-recaptcha__error,
	.useappy-newsletter__form > noscript {
		order: 1;
	}

	.useappy-newsletter__form > .useappy-newsletter__submit {
		order: 2;
	}

	.useappy-newsletter__form > .useappy-newsletter__message {
		order: 3;
	}

	.useappy-newsletter__submit {
		grid-column: auto !important;
		font-size: 18px;
	}

	/* App Family ------------------------------------------------------- */

	.useappy-family {
		padding: 48px 0;
	}

	.useappy-family__title {
		font-size: 30px;
		line-height: 38px;
	}

	.useappy-family__stage-title {
		font-size: 26px;
		line-height: 34px;
	}

	.useappy-family__stage-text {
		margin-top: 14px;
	}

	/* Product Ecosystem -------------------------------------------------- */

	.useappy-eco {
		padding: 56px 0 64px;
	}

	.useappy-eco__title {
		font-size: 28px;
		line-height: 36px;
	}

	.useappy-eco__tabs {
		margin: 28px auto 36px;
		padding: 5px 4px;
	}

	.useappy-eco__tab {
		height: 32px;
		padding: 0 14px;
		font-size: 15px;
	}

	.useappy-eco__hub {
		--useappy-eco-hub: 96px;

		font-size: 12px;
	}

	.useappy-eco__cards {
		gap: 10px;
	}

	.useappy-eco__card-item {
		height: 64px;
	}

	.useappy-eco__card img {
		max-height: 32px;
	}

	.useappy-eco__panel-title {
		font-size: 24px;
		line-height: 32px;
	}

	.useappy-eco__panel-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
		margin-top: 24px;
	}

	.useappy-eco__panel-cards .useappy-eco__card {
		height: 72px;
	}

	.useappy-eco__panel-cards .useappy-eco__card img {
		max-height: 34px;
	}

	.useappy-eco__panel-button {
		height: 48px;
		font-size: 17px;
	}

	/* Blog Carousel ------------------------------------------------------ */

	.useappy-blog {
		--useappy-blog-card-w: 80%;
		--useappy-blog-card-h: 340px;
		--useappy-blog-gap: 14px;
		--useappy-blog-pad-open: 22px;

		padding: 56px 0;
	}

	.useappy-blog__title {
		font-size: 30px;
		line-height: 40px;
	}

	.useappy-blog__header {
		margin-bottom: 32px;
	}

	.useappy-blog__content {
		padding: 20px 20px 28px;
	}

	.useappy-blog__nav {
		gap: 16px;
		margin-top: 28px;
	}

	.useappy-blog__arrows {
		gap: 8px;
	}

	.useappy-blog__arrow {
		width: 40px;
		height: 40px;
	}

	/* Feature Grid: one column ------------------------------------------- */

	.useappy-feat {
		padding: 56px 0;
	}

	.useappy-feat__grid {
		--useappy-feat-cols: var(--useappy-feat-cols-m, 1);

		row-gap: 16px;
	}

	.useappy-feat__title {
		margin-bottom: 16px;
		font-size: 32px;
		line-height: 40px;
	}

	.useappy-feat__header {
		margin-bottom: 32px;
	}

	.useappy-feat__card {
		padding: 24px;
	}

	/* Reviews Carousel --------------------------------------------------- */

	.useappy-reviews {
		--useappy-reviews-card-w: 82%;
		--useappy-reviews-gap: 16px;

		padding: 56px 0 44px;
	}

	.useappy-reviews__eyebrow {
		font-size: 22px;
		line-height: 30px;
	}

	.useappy-reviews__title {
		font-size: 26px;
		line-height: 34px;
	}

	.useappy-reviews__header {
		margin-bottom: 28px;
	}

	.useappy-reviews__head {
		padding: 16px 16px 34px;
	}

	.useappy-reviews__photo {
		width: 84px;
		height: 84px;
	}

	.useappy-reviews__person {
		padding-top: 10px;
	}

	.useappy-reviews__body {
		padding: 20px 22px 24px;
	}

	.useappy-reviews__arrows {
		gap: 8px;
	}

	.useappy-reviews__arrow {
		width: 40px;
		height: 40px;
	}

	/* Feature Section: "Stack the columns below: small" ------------------- */

	.useappy-fsec-stack-sm .useappy-fsec__grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 50px;
	}

	.useappy-fsec-stack-sm.useappy-fsec--media-left .useappy-fsec__media {
		order: 2;
	}

	/* Feature Section 2: "Stack columns below: small" -------------------- */

	.useappy-fsec2-stack-sm .useappy-fsec2__grid,
	.useappy-fsec2-stack-sm.useappy-fsec2--media-right .useappy-fsec2__grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 32px;
	}

	.useappy-fsec2-stack-sm.useappy-fsec2--media-right .useappy-fsec2__media {
		order: 0;
	}

	.useappy-fsec2__title {
		font-size: 28px;
		line-height: 36px;
	}

	/* Numbered Cards: one per row ---------------------------------------- */

	.useappy-ncards__grid {
		--useappy-ncards-cols: var(--useappy-ncards-cols-m, 1);
	}

	.useappy-ncards__title {
		margin-bottom: 28px;
		font-size: 28px;
		line-height: 36px;
	}

	.useappy-ncards__text {
		font-size: 19px;
		line-height: 27px;
	}

	/* Numbered Cards 2: one per row, badge beside the text ------------ */

	.useappy-ncards2__grid {
		--useappy-ncards2-cols: var(--useappy-ncards2-cols-m, 1);

		row-gap: 12px;
	}

	.useappy-ncards2__grid:has(.useappy-ncards2__desc) {
		--useappy-ncards2-cols: var(--useappy-ncards2-cols-m, 1);
	}

	.useappy-ncards2__card {
		flex-direction: row;
		gap: 16px;
		align-items: center;
		padding: 16px 18px;
		border-radius: 14px;
	}

	.useappy-ncards2__number {
		width: 40px;
		height: 40px;
		margin-bottom: 0;
		font-size: 15px;
		border-radius: 10px;
	}

	/* With a description the badge sits level with the card title. */
	.useappy-ncards2__card:has(.useappy-ncards2__desc) {
		align-items: flex-start;
	}

	.useappy-ncards2__body {
		flex: 1 1 auto;
	}

	.useappy-ncards2__desc {
		margin-top: 6px;
		font-size: 15px;
		line-height: 23px;
	}

	.useappy-ncards2__text {
		font-size: 18px;
		line-height: 24px;
	}

	.useappy-ncards2__title {
		font-size: 28px;
		line-height: 36px;
	}

	.useappy-ncards2__footer {
		font-size: 20px;
		line-height: 28px;
	}

	/* Image Cards: one per row, wider cards ---------------------------- */

	.useappy-icards__grid {
		--useappy-icards-cols: var(--useappy-icards-cols-m, 1);
	}

	.useappy-icards__card {
		--useappy-icards-ratio: 16 / 10;
	}

	.useappy-icards__title {
		font-size: 28px;
		line-height: 36px;
	}

	.useappy-icards__label {
		font-size: 20px;
		line-height: 28px;
	}

	/* Enquiry Form ------------------------------------------------------- */

	.useappy-enq__title {
		font-size: 28px;
		line-height: 36px;
	}

	.useappy-enq__form-card {
		padding: 26px 18px;
		border-radius: 16px;
	}

	.useappy-enq__info {
		padding: 26px 18px;
		border-radius: 16px;
	}

	.useappy-enq__form [type=submit] {
		min-height: 56px;
		font-size: 18px;
	}

	.useappy-enq__contact-value {
		font-size: 18px;
	}

	.useappy-enq__cta {
		padding: 24px 20px;
	}

	/* Feature Tabs: "Stack the columns below: small" ---------------------- */

	.useappy-ftabs-stack-sm .useappy-ftabs__panel {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 40px;
	}

	.useappy-ftabs-stack-sm .useappy-ftabs__media {
		order: 0;
	}
	/* FAQ Accordion ------------------------------------------------------ */

	.useappy-faq {
		--useappy-faq-num-w: 40px;

		padding: 56px 0;
	}

	.useappy-faq__eyebrow {
		font-size: 22px;
		line-height: 30px;
	}

	.useappy-faq__title {
		font-size: 26px;
		line-height: 34px;
	}

	.useappy-faq__header {
		margin-bottom: 28px;
	}

	.useappy-faq__button {
		padding: 22px 0;
	}

	.is-open .useappy-faq__button {
		padding-bottom: 10px;
	}

	.useappy-faq__number {
		font-size: 17px;
	}

	.useappy-faq__question {
		padding-right: 14px;
		font-size: 17px;
		line-height: 24px;
	}

	.useappy-faq__icon {
		width: 32px;
		height: 32px;
	}

	.useappy-faq__answer {
		padding: 0 0 22px var(--useappy-faq-num-w);
	}

	.useappy-faq__list--no-numbers .useappy-faq__answer {
		padding-left: 0;
	}

	/* CTA Banner --------------------------------------------------------- */

	.useappy-cta {
		padding: 40px 0;
	}

	.useappy-cta__box {
		--useappy-cta-glow-w: 60%;
		--useappy-cta-glow-h: 45%;

		padding: 40px 20px;
		border-radius: 14px;
	}

	.useappy-cta__eyebrow {
		margin-bottom: 20px;
		font-size: 13px;
	}

	.useappy-cta__title {
		font-size: 32px;
		line-height: 40px;
	}

	.useappy-cta__description {
		margin-bottom: 26px;
	}

	.useappy-cta__buttons {
		gap: 14px;
	}

	.useappy-cta__btn {
		height: 48px;
		font-size: 17px;
	}

	/* Contact Section ---------------------------------------------------- */

	.useappy-contact {
		padding: 56px 0;
	}

	.useappy-contact__grid {
		row-gap: 36px;
	}

	.useappy-contact__eyebrow {
		margin-bottom: 14px;
		font-size: 24px;
		line-height: 32px;
	}

	.useappy-contact__title {
		font-size: 28px;
		line-height: 36px;
	}

	.useappy-contact__description {
		margin-bottom: 24px;
	}

	.useappy-contact__card {
		column-gap: 14px;
		min-height: 76px;
		padding: 14px;
	}

	.useappy-contact__card-icon {
		--useappy-contact-icon: 26px;

		width: 44px;
		height: 44px;
	}

	.useappy-contact__card-arrow {
		width: 38px;
		height: 38px;
	}

	.useappy-contact__form-card {
		padding: 28px 20px;
	}

	.useappy-contact__form {
		--useappy-contact-field-h: 50px;
		--useappy-contact-submit-gap: 24px;
	}

	/* 16px stops iOS Safari zooming into the field on focus. */
	.useappy-contact__form input:not([type=submit]):not([type=checkbox]):not([type=radio]):not([type=hidden]),
	.useappy-contact__form textarea,
	.useappy-contact__form select {
		padding: 0 16px;
		font-size: 16px;
	}

	.useappy-contact__form textarea {
		padding-top: 14px;
		padding-bottom: 14px;
	}

	.useappy-contact__form [type=submit] {
		height: 48px;
	}

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

	.error-404 {
		padding: 48px 16px;
	}

	.error-404__code {
		font-size: 68px;
	}

	.error-404__title {
		font-size: 22px;
	}

	.error-404__search {
		margin-top: 24px;
	}

	.error-404__search .search-field,
	.error-404__search .search-submit {
		height: 46px;
		font-size: 16px; /* 16px stops iOS Safari zooming into the field on focus. */
	}

	.error-404__actions {
		margin-top: 20px;
	}

	/* Policy Page --------------------------------------------------------- */

	.useappy-policy__hero {
		padding-bottom: 48px;
	}

	.useappy-policy__hero {
		--useappy-policy-hero-pt: 48px;
	}

	.useappy-policy__title {
		font-size: 40px;
	}

	.useappy-policy__intro {
		font-size: 17px;
	}

	.useappy-policy__body {
		padding: 40px 0 64px;
	}

	.useappy-policy__heading {
		font-size: 22px;
	}

	.useappy-policy__content {
		font-size: 16px;
	}

	.useappy-policy__content :is(ul, ol) {
		padding-left: 1.15em;
	}

	.useappy-policy__contact {
		padding: 24px 20px;
	}

	.useappy-policy__button {
		justify-content: space-between;
		width: 100%;
	}

	/* Blog Listing -------------------------------------------------------- */

	.post-listing__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.post-listing__search .search-field,
	.post-listing__search .search-submit {
		height: 48px;
	}

	.post-listing__search .search-submit {
		padding: 0 20px;
	}

	/* Single Post --------------------------------------------------------- */

	.post-hero {
		padding: 40px 0 56px;
	}

	.post-single.has-cover .post-hero {
		padding-bottom: 104px;
	}

	.useappy-header-transparent .post-hero {
		padding-top: calc(var(--useappy-header-h) + 40px);
	}

	.post-hero__title {
		font-size: 36px;
	}

	.post-hero__excerpt {
		font-size: 17px;
	}

	.post-cover {
		margin-top: -72px;
	}

	.post-cover__img {
		border-radius: 14px;
		box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16);
	}

	.post-body {
		margin-top: 36px;
	}

	.post-content h2 {
		font-size: 25px;
	}

	.post-content h3 {
		font-size: 21px;
	}

	.post-content blockquote {
		font-size: 19px;
	}

	.post-comments .comment-body {
		min-height: 88px;
		padding-left: 52px;
	}

	.post-comments .comment-author .avatar {
		width: 40px;
		height: 40px;
	}

	.post-comments .comment-respond {
		padding: 20px;
	}

	.post-comments__submit {
		justify-content: center;
		width: 100%;
	}

	.post-related__title {
		font-size: 26px;
	}

	.post-related__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.post-related__grid > :nth-child(3) {
		display: block;
	}
}

/* ==========================================================================
   Small phones (max-width: 359.98px)
   ========================================================================== */

/* Header: icon-only action button below 375px (logo + CTA + Login + menu
   button no longer fit at 360px with the text). */
@media (max-width: 374.98px) {

	.header-cta__text {
		display: none;
	}

	.header-cta {
		padding-left: 6px;
	}
}

@media (max-width: 359.98px) {

	/* Mega menu ---------------------------------------------------------- */

	.sub-menu--panel,
	.has-mega-menu > .sub-menu--panel {
		padding-inline: 16px;
	}

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

	.site-footer__menu a {
		font-size: 15px;
	}

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

	.useappy-hero__title {
		font-size: 34px;
		line-height: 40px;
	}

	.useappy-hero__btn {
		font-size: 16px;
	}

	/* Stats: three columns of ~62px, so tighten the gap and let a long word break. */
	.useappy-hero__stats {
		--useappy-hero-stats-gap: 10px;
	}

	.useappy-hero__stat-number {
		font-size: 24px;
		line-height: 30px;
	}

	.useappy-hero__stat-label {
		font-size: 12px;
		line-height: 16px;
		overflow-wrap: break-word;
		hyphens: auto;
	}

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

	.useappy-about__title {
		font-size: 30px;
		line-height: 36px;
	}

	.useappy-about__item--card {
		padding: 18px;
	}

	.useappy-about__card-title {
		font-size: 20px;
		line-height: 28px;
	}

	.useappy-about__card-text {
		font-size: 16px;
		line-height: 24px;
	}

	/* About Intro -------------------------------------------------------- */

	.useappy-intro__title {
		font-size: 22px;
		line-height: 30px;
	}

	.useappy-intro__point-text {
		font-size: 14px;
		line-height: 22px;
	}

	/* About Values ------------------------------------------------------- */

	.useappy-values__title {
		font-size: 22px;
		line-height: 30px;
	}

	.useappy-values__card-text {
		font-size: 14px;
		line-height: 22px;
	}

	/* About Statement ---------------------------------------------------- */

	.useappy-statement__title {
		font-size: 23px;
		line-height: 31px;
	}

	/* About Founder -------------------------------------------------------- */

	.useappy-founder__title {
		font-size: 22px;
		line-height: 28px;
	}

	/* About Team ------------------------------------------------------------ */

	.useappy-team__title {
		font-size: 21px;
		line-height: 28px;
	}

	/* Ecosystem Comparison ----------------------------------------------- */

	.useappy-compare__title {
		font-size: 24px;
		line-height: 32px;
	}

	/* Product Ecosystem -------------------------------------------------- */

	.useappy-eco__title {
		font-size: 26px;
		line-height: 34px;
	}

	.useappy-eco__tab {
		padding: 0 12px;
		font-size: 14px;
	}

	.useappy-eco__cards,
	.useappy-eco__panel-cards {
		gap: 8px;
	}

	/* Blog Carousel ------------------------------------------------------ */

	.useappy-blog {
		--useappy-blog-card-w: 88%;
		--useappy-blog-card-h: 320px;
	}

	.useappy-blog__title {
		font-size: 26px;
		line-height: 34px;
	}

	/* Feature Grid ------------------------------------------------------- */

	.useappy-feat__title {
		font-size: 28px;
		line-height: 36px;
	}

	.useappy-feat__card {
		padding: 20px;
	}

	/* Reviews Carousel --------------------------------------------------- */

	.useappy-reviews {
		--useappy-reviews-card-w: 88%;
	}

	.useappy-reviews__title {
		font-size: 24px;
		line-height: 32px;
	}

	.useappy-reviews__photo {
		width: 72px;
		height: 72px;
	}

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

	.useappy-faq__title {
		font-size: 24px;
		line-height: 32px;
	}

	.useappy-faq__question {
		font-size: 16px;
		line-height: 23px;
	}

	/* CTA Banner --------------------------------------------------------- */

	.useappy-cta__box {
		padding: 36px 16px;
	}

	.useappy-cta__title {
		font-size: 28px;
		line-height: 36px;
	}

	.useappy-cta__btn {
		font-size: 16px;
	}

	/* Contact Section ---------------------------------------------------- */

	.useappy-contact__title {
		font-size: 26px;
		line-height: 34px;
	}

	.useappy-contact__card-arrow {
		display: none;
	}

	.useappy-contact__form-card {
		padding: 24px 16px;
	}

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

	.error-404__code {
		font-size: 56px;
	}

	.error-404__search .search-form {
		flex-direction: column;
	}

	.error-404__search .search-submit {
		width: 100%;
	}

	/* Policy Page --------------------------------------------------------- */

	.useappy-policy__title {
		font-size: 34px;
	}

	.useappy-policy__heading {
		font-size: 20px;
	}

	/* Blog Listing -------------------------------------------------------- */

	.post-listing__search .search-form {
		flex-direction: column;
	}

	.post-listing__search .search-submit {
		width: 100%;
	}

	/* Single Post --------------------------------------------------------- */

	.post-hero__title {
		font-size: 31px;
	}

	.post-comments .comment-list .children {
		padding-left: 8px;
	}
}