/* ==========================================================================
   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 template.
   ========================================================================== */

/* --------------------------------------------------------------------------
   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;
	}
}

/* ==========================================================================
   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: 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: 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;
	}

	/* 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;
	}
}

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

@media (max-width: 991.98px) {

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

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

	.site-main--elementor {
		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: 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;
	}

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

	/* 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;
	}
}

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

@media (max-width: 767.98px) {

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

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

	.site-main--elementor {
		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;
	}

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

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

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

	.useappy-ncards__grid {
		--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: 2;
		--useappy-ncards2-gap: 16px;

		row-gap: 16px;
	}

	.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__footer {
		margin-top: 32px;
		font-size: 22px;
		line-height: 30px;
	}

	/* 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;
	}
}

/* ==========================================================================
   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);
	}

	.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: 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: 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: 1;

		row-gap: 12px;
	}

	.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;
	}

	.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;
	}

	/* 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;
	}
}

/* ==========================================================================
   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%;
	}
}