/*
 * Mobile App Development San Diego page. Loaded on that page only (inc/mobile-san-diego.php).
 * Every selector sits under .sd-app-page and uses the sd-app- prefix, so nothing leaks to other
 * templates. Colours are the existing Appagentix brand values (see layout.css).
 */

.sd-app-page {
	color-scheme: light;
	--sd-purple: #8347ec;
	--sd-purple-deep: #5a28bd;
	--sd-orange: #ffa15c;
	--sd-pink: #e5488a;
	--sd-dark: #120d26;
	--sd-dark-line: rgba(255, 255, 255, 0.14);
	--sd-cream: #fcfbf9;
	--sd-lav: #f5f0ff;
	--sd-lav-2: #ede5ff;
	--sd-lav-3: #dfcdff;
	--sd-ink: #14121c;
	--sd-body: #3f3d4d;
	--sd-muted: #6b7280;
	--sd-line: #e8e4f0;
	--sd-on-dark: #ffffff;
	--sd-on-dark-muted: #c9c3de;
	--sd-ok: #16a34a;
	--sd-grad-brand: linear-gradient(90deg, #ff9a4d 0%, #e5488a 50%, #8347ec 100%);
	--sd-grad-dark: linear-gradient(180deg, #120d26 0%, #1a1236 100%);
	--sd-font: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--sd-shadow-card: 0 8px 24px rgba(61, 33, 115, 0.08);
	--sd-shadow-el: 0 20px 48px -8px rgba(82, 41, 189, 0.22);
	--sd-container: 1200px;

	font-family: var(--sd-font);
	color: var(--sd-body);
	background: #fff;
	overflow-x: clip;
}

.sd-app-page *,
.sd-app-page *::before,
.sd-app-page *::after {
	box-sizing: border-box;
}

.sd-app-page h1,
.sd-app-page h2,
.sd-app-page h3,
.sd-app-page h4,
.sd-app-page p,
.sd-app-page ul,
.sd-app-page ol,
.sd-app-page figure,
.sd-app-page blockquote {
	margin: 0;
	padding: 0;
}

.sd-app-page ul,
.sd-app-page ol {
	list-style: none;
}

.sd-app-page h1,
.sd-app-page h2,
.sd-app-page h3,
.sd-app-page h4 {
	color: var(--sd-ink);
	font-family: var(--sd-font);
	font-weight: 600;
}

.sd-app-page svg {
	display: block;
}

.sd-app-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.sd-app-grad {
	background: var(--sd-grad-brand);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Bands and layout */
.sd-app-band {
	position: relative;
	overflow: hidden;
	padding: 96px max(16px, env(safe-area-inset-right, 0px)) 96px max(16px, env(safe-area-inset-left, 0px));
}

.sd-app-band.sd-app-lav {
	background: var(--sd-lav);
}

.sd-app-band.sd-app-dark {
	background: var(--sd-grad-dark);
	color: var(--sd-on-dark-muted);
}

.sd-app-band.sd-app-dark h2,
.sd-app-band.sd-app-dark h3,
.sd-app-band.sd-app-dark h4 {
	color: var(--sd-on-dark);
}

.sd-app-wrap {
	display: flex;
	flex-direction: column;
	gap: 48px;
	max-width: var(--sd-container);
	margin: 0 auto;
	position: relative;
	z-index: 1;
}

.sd-app-sh {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 860px;
}

.sd-app-sh.sd-app-center-sh {
	margin: 0 auto;
	text-align: center;
	align-items: center;
}

.sd-app-sh h2 {
	font-size: 40px;
	line-height: 50px;
	letter-spacing: -1px;
}

.sd-app-sh p {
	font-size: 18px;
	line-height: 30px;
}

.sd-app-h2like {
	font-size: 28px;
	line-height: 38px;
	letter-spacing: -0.5px;
}

.sd-app-eyebrow {
	font-size: 13px;
	line-height: 16px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sd-purple);
}

.sd-app-dark .sd-app-eyebrow {
	color: #c4b5fd;
}

.sd-app-small {
	font-size: 14px;
	line-height: 22px;
}

.sd-app-center {
	display: flex;
	justify-content: center;
}

.sd-app-center.sd-app-stack {
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

/* Buttons */
.sd-app-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 48px;
	padding: 14px 22px 14px 24px;
	border-radius: 12px;
	font-family: var(--sd-font);
	font-size: 15px;
	line-height: 20px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.15s ease, background-color 0.15s ease;
}

.sd-app-btn svg {
	width: 18px;
	height: 18px;
	flex: none;
}

.sd-app-btn-primary {
	background: var(--sd-purple);
	color: #fff;
	box-shadow: 0 8px 20px -4px rgba(131, 71, 236, 0.45);
}

.sd-app-btn-primary:hover {
	background: var(--sd-purple-deep);
	color: #fff;
	transform: translateY(-2px);
}

.sd-app-btn-secondary {
	background: #fff;
	color: var(--sd-ink);
	box-shadow: inset 0 0 0 1.5px var(--sd-purple);
}

.sd-app-btn-secondary:hover {
	background: var(--sd-lav-2);
	color: var(--sd-ink);
	transform: translateY(-2px);
}

.sd-app-btn-white {
	background: #fff;
	color: var(--sd-purple-deep);
}

.sd-app-btn-white:hover {
	background: var(--sd-lav-2);
	color: var(--sd-purple-deep);
	transform: translateY(-2px);
}

.sd-app-page a:focus-visible,
.sd-app-page button:focus-visible,
.sd-app-page [tabindex="0"]:focus-visible {
	outline: 3px solid var(--sd-orange);
	outline-offset: 3px;
}

/* Cards and grids */
.sd-app-card {
	background: #fff;
	border: 1px solid var(--sd-line);
	border-radius: 20px;
	box-shadow: var(--sd-shadow-card);
}

.sd-app-grid {
	display: grid;
	gap: 24px;
}

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

.sd-app-grid-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sd-app-grid-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sd-app-grid-5 {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.sd-app-ico {
	flex: none;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--sd-lav-2);
	color: var(--sd-purple);
}

.sd-app-ico svg {
	width: 22px;
	height: 22px;
}

.sd-app-ico-lg {
	width: 56px;
	height: 56px;
	border-radius: 16px;
}

.sd-app-ico-lg svg {
	width: 28px;
	height: 28px;
}

.sd-app-card h3 {
	font-size: 20px;
	line-height: 28px;
}

.sd-app-card h4 {
	font-size: 17px;
	line-height: 26px;
}

.sd-app-card p {
	font-size: 15px;
	line-height: 25px;
}

/* Hero */
.sd-app-hero {
	background: linear-gradient(180deg, #fcfbf9 0%, #f3ecff 100%);
	padding-block: 56px 72px;
}

.sd-app-hero::before,
.sd-app-hero::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	filter: blur(110px);
	opacity: 0.5;
	pointer-events: none;
}

.sd-app-hero::before {
	width: 420px;
	height: 420px;
	background: #ffb27a;
	left: -140px;
	top: -120px;
}

.sd-app-hero::after {
	width: 520px;
	height: 520px;
	background: #b794ff;
	right: -160px;
	top: 260px;
}

.sd-app-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 496px;
	gap: 64px;
	align-items: start;
}

.sd-app-hero-copy {
	display: flex;
	flex-direction: column;
	gap: 22px;
	min-width: 0;
}

.sd-app-hero h1 {
	font-size: 56px;
	line-height: 64px;
	letter-spacing: -1.5px;
}

.sd-app-sub {
	font-size: 20px;
	line-height: 30px;
	font-weight: 600;
	color: var(--sd-ink);
	max-width: 600px;
}

.sd-app-intro {
	font-size: 17px;
	line-height: 28px;
	max-width: 620px;
}

.sd-app-cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.sd-app-trustline {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	font-size: 14px;
	font-weight: 500;
	color: var(--sd-ink);
}

.sd-app-trustline li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.sd-app-trustline svg {
	width: 16px;
	height: 16px;
	color: var(--sd-ok);
}

.sd-app-hero-form,
.sd-app-final-form {
	min-width: 0;
	scroll-margin-top: 100px;
}

/* The shared lead form on this page's backgrounds */
.sd-app-page .lp-form-card {
	width: 100%;
	max-width: none;
	margin: 0;
	border-radius: 24px;
	box-shadow: var(--sd-shadow-el);
}

.sd-app-page .lp-form-title {
	font-size: 24px;
	line-height: 32px;
	font-weight: 600;
	color: #fff;
}

.sd-app-page .lp-form-card .lp-form-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: 50px;
	padding: 14px 22px;
	border: 0;
	border-radius: 12px;
	background: var(--sd-purple);
	box-shadow: 0 8px 20px -4px rgba(131, 71, 236, 0.45);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: transform 0.15s ease, background-color 0.15s ease;
}

.sd-app-page .lp-form-card .lp-form-submit:hover,
.sd-app-page .lp-form-card .lp-form-submit:focus-visible {
	background: var(--sd-purple-deep);
	transform: translateY(-2px);
}

.sd-app-page .lp-form-card .lp-form-note,
.sd-app-page .lp-form-card .lp-form-note a {
	color: var(--sd-on-dark-muted);
}

.sd-app-page .lp-form-card .lp-form-note a {
	text-decoration: underline;
}

/* Proof strip and badges */
.sd-app-proof {
	padding-block: 56px;
}

.sd-app-proof .sd-app-wrap {
	gap: 36px;
}

.sd-app-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border-top: 2px solid transparent;
	border-image: var(--sd-grad-brand) 1;
}

.sd-app-stat {
	display: grid;
	gap: 8px;
	padding: 32px 16px 0;
	text-align: center;
}

.sd-app-stat b {
	font-size: 48px;
	line-height: 56px;
	font-weight: 600;
	letter-spacing: -1px;
}

.sd-app-stat span {
	font-size: 15px;
	line-height: 22px;
	font-weight: 500;
}

.sd-app-badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

.sd-app-badges li {
	padding: 10px 18px;
	border: 1px solid var(--sd-dark-line);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
}

/* Why and solve */
.sd-app-why {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 56px;
	align-items: start;
}

.sd-app-prose {
	display: grid;
	gap: 18px;
	font-size: 17px;
	line-height: 29px;
}

.sd-app-solve {
	display: flex;
	flex-direction: column;
	gap: 28px;
	padding: 40px;
	border-radius: 28px;
	background: linear-gradient(160deg, #f5f0ff 0%, #fff 100%);
	border: 1px solid var(--sd-lav-3);
}

.sd-app-mini {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding: 20px;
}

.sd-app-mini b {
	font-size: 15px;
	line-height: 22px;
	font-weight: 600;
	color: var(--sd-ink);
}

/* Services */
.sd-app-group {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.sd-app-svc {
	display: flex;
	gap: 18px;
	padding: 24px;
}

.sd-app-svc h4 {
	margin-bottom: 8px;
}

/* Case studies */
.sd-app-case {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px;
}

.sd-app-case-top {
	display: flex;
	align-items: center;
	min-height: 96px;
	padding: 20px;
	border-radius: 16px;
	background: linear-gradient(160deg, #864ee4 0%, #5a28bd 100%);
}

.sd-app-case-top .sd-app-ico {
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
}

.sd-app-pb {
	display: grid;
	gap: 6px;
	padding: 14px 16px;
	border-radius: 12px;
}

.sd-app-pb b {
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.sd-app-problem {
	background: #fff4ec;
}

.sd-app-problem b {
	color: #b45309;
}

.sd-app-solution {
	background: var(--sd-lav);
}

.sd-app-solution b {
	color: var(--sd-purple-deep);
}

/* Testimonials */
.sd-app-page .sd-app-quote {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
	padding: 32px;
}

.sd-app-quote blockquote p {
	font-size: 16px;
	line-height: 28px;
	color: var(--sd-ink);
}

.sd-app-quote figcaption {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 14px;
	line-height: 22px;
	color: var(--sd-muted);
}

.sd-app-quote figcaption b {
	color: var(--sd-ink);
	font-size: 15px;
}

.sd-app-avatar {
	flex: none;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--sd-grad-brand);
	color: #fff;
	font-weight: 600;
}

/* Pricing */
.sd-app-prices {
	align-items: stretch;
}

.sd-app-price {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 32px;
}

.sd-app-price-1 {
	border-top: 4px solid var(--sd-orange);
}

.sd-app-price-2 {
	border-top: 4px solid var(--sd-purple);
	box-shadow: var(--sd-shadow-el);
}

.sd-app-price-3 {
	background: var(--sd-grad-dark);
	border-color: #3b2f6b;
	border-top: 4px solid var(--sd-pink);
}

.sd-app-page .sd-app-price-3 h3,
.sd-app-page .sd-app-price-3 .sd-app-amount {
	color: #fff;
}

.sd-app-price-3 p {
	color: var(--sd-on-dark-muted);
}

.sd-app-page .sd-app-amount {
	font-size: 32px;
	line-height: 40px;
	font-weight: 600;
	letter-spacing: -0.5px;
	color: var(--sd-ink);
}

.sd-app-page .sd-app-time {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	color: var(--sd-purple);
}

.sd-app-price-3 .sd-app-time {
	color: #c4b5fd;
}

.sd-app-time svg {
	width: 18px;
	height: 18px;
}

.sd-app-table-scroll {
	max-width: 100%;
	overflow-x: auto;
	border: 1px solid var(--sd-line);
	border-radius: 20px;
	background: #fff;
	box-shadow: var(--sd-shadow-card);
}

.sd-app-table {
	width: 100%;
	min-width: 680px;
	border-collapse: collapse;
	font-size: 15px;
	line-height: 24px;
	text-align: left;
}

.sd-app-table th,
.sd-app-table td {
	padding: 16px 20px;
	border-bottom: 1px solid var(--sd-line);
	vertical-align: top;
	color: var(--sd-body);
}

.sd-app-table thead th {
	background: var(--sd-lav);
	color: var(--sd-ink);
	font-weight: 600;
}

.sd-app-table tbody th {
	color: var(--sd-ink);
	font-weight: 600;
	white-space: nowrap;
}

.sd-app-table tbody tr:last-child th,
.sd-app-table tbody tr:last-child td {
	border-bottom: 0;
}

.sd-app-table .sd-app-hl {
	background: rgba(131, 71, 236, 0.06);
}

.sd-app-table thead .sd-app-hl {
	background: var(--sd-purple);
	color: #fff;
}

.sd-app-note {
	padding: 14px 18px;
	border-left: 4px solid #f2c94c;
	border-radius: 8px;
	background: #fff8db;
	color: #7a5a10;
	font-size: 14px;
	line-height: 22px;
}

.sd-app-factors {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	gap: 24px;
}

.sd-app-factor-card,
.sd-app-factor-cta {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 32px;
}

.sd-app-factor-cta {
	justify-content: center;
	align-items: flex-start;
	background: var(--sd-lav);
	border-color: var(--sd-lav-3);
}

.sd-app-checks {
	display: grid;
	gap: 12px;
}

.sd-app-checks li {
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr);
	gap: 12px;
	align-items: start;
	font-size: 15px;
	line-height: 24px;
}

.sd-app-checks svg {
	width: 22px;
	height: 22px;
	padding: 3px;
	border-radius: 50%;
	background: rgba(22, 163, 74, 0.12);
	color: var(--sd-ok);
}

.sd-app-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	padding: 36px 40px;
	border-radius: 24px;
	background: linear-gradient(120deg, #5a28bd 0%, #8347ec 60%, #a468f5 100%);
	color: #fff;
}

.sd-app-banner h3 {
	color: #fff;
	font-size: 24px;
	line-height: 32px;
}

.sd-app-banner p {
	margin-top: 8px;
	font-size: 16px;
	line-height: 26px;
	color: #efe7ff;
}

.sd-app-banner .sd-app-btn {
	flex: none;
}

/* Engagement, industries, AI, segments, trust, tech, features */
.sd-app-model,
.sd-app-ai,
.sd-app-trust,
.sd-app-ind,
.sd-app-tech,
.sd-app-seg {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding: 28px;
}

.sd-app-ind {
	border-top: 3px solid var(--sd-lav-3);
}

.sd-app-ai {
	background: rgba(255, 255, 255, 0.05);
	border-color: var(--sd-dark-line);
	box-shadow: none;
}

.sd-app-ai h3 {
	color: #fff;
}

.sd-app-ai p {
	color: var(--sd-on-dark-muted);
}

.sd-app-ai .sd-app-ico {
	background: rgba(131, 71, 236, 0.28);
	color: #d9c8ff;
}

.sd-app-aiband::before {
	content: "";
	position: absolute;
	width: 520px;
	height: 520px;
	right: -160px;
	top: -120px;
	border-radius: 50%;
	background: #5a28bd;
	filter: blur(140px);
	opacity: 0.45;
	pointer-events: none;
}

.sd-app-seg {
	gap: 20px;
	padding: 32px;
}

.sd-app-seg .sd-app-btn {
	margin-top: auto;
}

.sd-app-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.sd-app-chips li {
	padding: 7px 14px;
	border-radius: 999px;
	background: var(--sd-lav-2);
	color: var(--sd-purple-deep);
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
}

.sd-app-feature {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	padding: 24px;
}

.sd-app-feature b {
	font-size: 16px;
	line-height: 24px;
	font-weight: 600;
	color: var(--sd-ink);
}

/* Process */
.sd-app-steps {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	counter-reset: sdstep;
}

.sd-app-step {
	display: flex;
	gap: 20px;
	padding: 28px;
}

.sd-app-step h3 {
	margin: 6px 0 10px;
}

.sd-app-num {
	flex: none;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--sd-grad-brand);
	color: #fff;
	font-size: 18px;
	font-weight: 600;
}

/* Choose and compare */
.sd-app-choose {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}

.sd-app-checklist {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 32px;
}

.sd-app-checklist ul {
	display: grid;
	gap: 16px;
}

.sd-app-checklist li {
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr);
	gap: 12px;
	align-items: start;
	font-size: 15px;
	line-height: 24px;
}

.sd-app-checklist li svg {
	width: 22px;
	height: 22px;
	padding: 3px;
	border-radius: 50%;
	background: rgba(22, 163, 74, 0.12);
	color: var(--sd-ok);
}

.sd-app-checklist b {
	color: var(--sd-ink);
}

.sd-app-compare {
	display: flex;
	flex-direction: column;
	gap: 28px;
	min-width: 0;
}

.sd-app-compare .sd-app-table {
	min-width: 520px;
}

/* Final CTA */
.sd-app-final {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 496px;
	gap: 64px;
	align-items: center;
}

.sd-app-final-copy {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.sd-app-final-copy h2 {
	font-size: 40px;
	line-height: 50px;
	letter-spacing: -1px;
}

.sd-app-final-copy p {
	font-size: 18px;
	line-height: 30px;
}

.sd-app-final-copy .sd-app-small {
	font-size: 14px;
	line-height: 22px;
	font-weight: 600;
	color: #fff;
}

.sd-app-final-form .lp-form-card {
	border: 1px solid #3b2f6b;
}

/* FAQ */
.sd-app-faq {
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	gap: 32px;
	align-items: start;
	max-width: 1100px;
	width: 100%;
	margin: 0 auto;
}

.sd-app-faq-tabs {
	display: flex;
	flex-direction: column;
	gap: 8px;
	position: sticky;
	top: 110px;
}

.sd-app-faq-tabs[hidden] {
	display: none;
}

.sd-app-page .sd-app-faq-tab {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 14px 18px;
	border: 1px solid var(--sd-line);
	border-radius: 14px;
	background: #fff;
	color: var(--sd-ink);
	font-family: var(--sd-font);
	font-size: 15px;
	line-height: 22px;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.sd-app-faq-tab small {
	flex: none;
	min-width: 24px;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--sd-lav-2);
	color: var(--sd-purple-deep);
	font-size: 12px;
	font-weight: 600;
	text-align: center;
}

.sd-app-page .sd-app-faq-tab:hover {
	border-color: var(--sd-lav-3);
	background: var(--sd-lav);
}

.sd-app-page .sd-app-faq-tab[aria-selected="true"] {
	border-color: var(--sd-purple);
	background: var(--sd-purple);
	color: #fff;
	box-shadow: 0 8px 20px -4px rgba(131, 71, 236, 0.45);
}

.sd-app-faq-tab[aria-selected="true"] small {
	background: rgba(255, 255, 255, 0.22);
	color: #fff;
}

.sd-app-faq-panels {
	display: flex;
	flex-direction: column;
	gap: 36px;
	min-width: 0;
}

.sd-app-js .sd-app-faq-group[hidden] {
	display: none;
}

/* With the tabs showing, the panel needs no separate topic label. */
.sd-app-js .sd-app-faq-group > .sd-app-eyebrow {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.sd-app-faq-group {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sd-app-faq-item {
	border: 1px solid var(--sd-line);
	border-radius: 16px;
	background: #fff;
	box-shadow: var(--sd-shadow-card);
}

.sd-app-faq-item h4 {
	margin: 0;
	font-size: 16px;
	line-height: 26px;
}

.sd-app-page .sd-app-faq-q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 20px 24px;
	border: 0;
	border-radius: 16px;
	background: transparent;
	color: var(--sd-ink);
	font-family: var(--sd-font);
	font-size: 16px;
	line-height: 26px;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}

.sd-app-faq-q svg {
	flex: none;
	width: 22px;
	height: 22px;
	color: var(--sd-purple);
	transition: transform 0.2s ease;
}

.sd-app-faq-q[aria-expanded="true"] svg {
	transform: rotate(45deg);
}

.sd-app-faq-a {
	padding: 0 24px 22px;
}

.sd-app-faq-a p {
	font-size: 16px;
	line-height: 28px;
}

/* With JS the answers collapse; without it every answer stays visible. */
.sd-app-js .sd-app-faq-a[hidden] {
	display: none;
}

/* Entrance animation (JS adds .sd-app-js; content stays visible without it) */
.sd-app-js .sd-app-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.sd-app-js .sd-app-reveal.sd-app-in {
	opacity: 1;
	transform: none;
}

.sd-app-card {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sd-app-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--sd-shadow-el);
}

@media (prefers-reduced-motion: reduce) {
	.sd-app-page *,
	.sd-app-page *::before,
	.sd-app-page *::after {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}

	.sd-app-js .sd-app-reveal {
		opacity: 1;
		transform: none;
	}
}

/* Laptop */
@media (max-width: 1280px) {
	.sd-app-grid-5 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.sd-app-hero-grid,
	.sd-app-final {
		grid-template-columns: minmax(0, 1fr) 440px;
		gap: 40px;
	}

	.sd-app-hero h1 {
		font-size: 48px;
		line-height: 56px;
	}
}

/* Tablet */
@media (max-width: 1023px) {
	.sd-app-band {
		padding-block: 72px;
	}

	.sd-app-hero-grid,
	.sd-app-final,
	.sd-app-why,
	.sd-app-factors,
	.sd-app-choose {
		grid-template-columns: minmax(0, 1fr);
	}

	.sd-app-grid-3,
	.sd-app-grid-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sd-app-grid-5 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sd-app-sh h2,
	.sd-app-final-copy h2 {
		font-size: 34px;
		line-height: 44px;
	}

	.sd-app-banner {
		flex-direction: column;
		align-items: flex-start;
	}

	.sd-app-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 24px;
	}
}

@media (max-width: 1023px) {
	.sd-app-faq {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.sd-app-faq-tabs {
		position: static;
		flex-direction: row;
		overflow-x: auto;
		padding-bottom: 6px;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
	}

	.sd-app-page .sd-app-faq-tab {
		flex: none;
		width: auto;
		white-space: nowrap;
		scroll-snap-align: start;
	}
}

/* Mobile */
@media (max-width: 767px) {
	.sd-app-band {
		padding-block: 56px;
	}

	.sd-app-wrap {
		gap: 36px;
	}

	.sd-app-hero {
		padding-block: 32px 48px;
	}

	.sd-app-hero h1 {
		font-size: 36px;
		line-height: 44px;
		letter-spacing: -1px;
	}

	.sd-app-sub {
		font-size: 18px;
		line-height: 28px;
	}

	.sd-app-sh h2,
	.sd-app-final-copy h2 {
		font-size: 28px;
		line-height: 36px;
	}

	.sd-app-sh p,
	.sd-app-final-copy p {
		font-size: 16px;
		line-height: 27px;
	}

	.sd-app-grid-2,
	.sd-app-grid-3,
	.sd-app-grid-4,
	.sd-app-grid-5,
	.sd-app-steps {
		grid-template-columns: minmax(0, 1fr);
	}

	.sd-app-cta-row .sd-app-btn,
	.sd-app-center .sd-app-btn,
	.sd-app-banner .sd-app-btn,
	.sd-app-seg .sd-app-btn,
	.sd-app-factor-cta .sd-app-btn {
		width: 100%;
	}

	.sd-app-btn {
		white-space: normal;
	}

	.sd-app-stat b {
		font-size: 36px;
		line-height: 44px;
	}

	.sd-app-solve,
	.sd-app-banner,
	.sd-app-price,
	.sd-app-page .sd-app-quote,
	.sd-app-checklist,
	.sd-app-factor-card,
	.sd-app-factor-cta {
		padding: 24px;
	}

	.sd-app-svc,
	.sd-app-step {
		flex-direction: column;
		gap: 14px;
	}

	.sd-app-banner h3 {
		font-size: 20px;
		line-height: 28px;
	}

	.sd-app-page .sd-app-faq-q {
		padding: 16px 18px;
		font-size: 15px;
	}

	.sd-app-faq-a {
		padding: 0 18px 18px;
	}
}

/* Section headings and intro paragraphs run across the full container width */
.sd-app-sh {
	max-width: none;
	width: 100%;
}

.sd-app-sh h2,
.sd-app-sh p {
	max-width: none;
}

/* Section headings and intro paragraphs centred */
.sd-app-sh {
	align-items: center;
	text-align: center;
}

/* Hero form: quick-response seal on the top-right corner (same as the India page) */
.sd-app-hero-form {
	position: relative;
}

.sd-app-hero-seal {
	position: absolute;
	top: -58px;
	right: 18px;
	z-index: 2;
	width: 104px;
	height: 104px;
	pointer-events: none;
}

@media (max-width: 1023px) {
	.sd-app-hero-seal {
		top: -48px;
		right: 12px;
		width: 88px;
		height: 88px;
	}
}

/* Form heading keeps the shared form's spacing (the page-wide h2 reset removed it) */
.sd-app-page .lp-form-card .lp-form-title {
	margin: 0 0 16px;
}

/* Price note keeps its padding (the page-wide p reset removed it) */
.sd-app-page .sd-app-note {
	padding: 14px 20px;
	font-size: 15px;
	line-height: 24px;
}

/* Hero heading on two lines: "Mobile App Development" / "Company in San Diego" */
.sd-app-hero h1 .sd-app-h1-line {
	display: block;
}

@media (min-width: 1024px) {
	.sd-app-hero h1 {
		font-size: clamp(38px, 3.7vw, 48px);
		line-height: 1.18;
		letter-spacing: -1.2px;
	}
}

/* Why section: centred heading on top, the two paragraphs as numbered cards */
.sd-app-why {
	grid-template-columns: minmax(0, 1fr);
	gap: 40px;
}

.sd-app-why .sd-app-sh h2 {
	font-size: 44px;
	line-height: 54px;
}

.sd-app-prose {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px;
	counter-reset: sd-why;
}

.sd-app-prose p {
	position: relative;
	counter-increment: sd-why;
	padding: 72px 32px 32px;
	background: #fff;
	border: 1px solid var(--sd-line);
	border-radius: 24px;
	box-shadow: var(--sd-shadow-card);
	font-size: 17px;
	line-height: 29px;
}

.sd-app-prose p::before {
	content: "0" counter(sd-why);
	position: absolute;
	top: 24px;
	left: 32px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.06em;
	color: #fff;
	padding: 8px 14px;
	border-radius: 999px;
	background: var(--sd-grad-brand);
}

.sd-app-prose p::after {
	content: "";
	position: absolute;
	left: 32px;
	right: 32px;
	top: 60px;
	height: 1px;
	background: var(--sd-line);
}

@media (max-width: 900px) {
	.sd-app-why .sd-app-sh h2 {
		font-size: 30px;
		line-height: 38px;
	}

	.sd-app-prose {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Breadcrumb above the hero */
.sd-app-crumbs {
	margin-bottom: -24px;
	font-size: 12px;
	font-weight: 500;
	color: var(--sd-muted);
}

.sd-app-crumbs a {
	color: inherit;
	text-decoration: none;
}

.sd-app-crumbs a:hover {
	color: var(--sd-purple);
	text-decoration: underline;
}