/* ===========================================================
   Mobile / App-Launch landing page (/index/mobile)
   theme26 restyle — reuses base26 tokens (--primary, --accent,
   --bg-light, --text-dark …). All rules scoped under .ml-page.
   =========================================================== */

.ml-page { overflow-x: hidden; }
.ml-page img { max-width: 100%; }

/* productpages.css adds a "QTY:" label via .select-wrapper:before — the deal
   card (matched to /photo-books/hard-cover, which doesn't load productpages.css)
   has no such label; drop it so the select + ADD button align. */
.ml-page .deals .select-wrapper:before { content: none; }

/* ---------- shared section chrome ---------- */
.ml-section { padding: 72px 0; }
.ml-section.ml-alt { background: var(--bg-light); }
.ml-wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
.ml-eyebrow {
	display: inline-block; font-size: 12px; font-weight: 700;
	letter-spacing: 2px; text-transform: uppercase;
	color: var(--primary); margin-bottom: 14px;
}
.ml-h2 {
	font-size: 34px; font-weight: 800; line-height: 1.2;
	color: var(--text-dark); text-align: center; margin: 0 0 14px;
}
.ml-h2 .pbs-orange { color: var(--primary) !important; }
.ml-lead {
	font-size: 18px; color: var(--text-medium); line-height: 1.7;
	text-align: center; max-width: 680px; margin: 0 auto 44px;
}

/* ---------- hero ---------- */
.ml-hero {
	position: relative; overflow: hidden;
	background:
		radial-gradient(1200px 600px at 85% -10%, rgba(238,90,42,.10), transparent 60%),
		radial-gradient(900px 500px at 5% 110%, rgba(240,125,58,.10), transparent 55%),
		#fff;
	padding: 84px 0 72px;
}
.ml-hero-inner {
	max-width: 1140px; margin: 0 auto; padding: 0 24px;
	display: grid; grid-template-columns: 1.05fr .95fr;
	gap: 48px; align-items: center;
}
.ml-hero-copy { text-align: left; }
.ml-hero h1 {
	font-size: 46px; font-weight: 800; line-height: 1.1;
	color: var(--text-dark); margin: 0 0 18px; letter-spacing: -.5px;
}
.ml-hero h1 .pbs-orange { color: var(--primary) !important; }
.ml-hero-desc {
	font-size: 18px; color: var(--text-medium);
	line-height: 1.7; max-width: 480px; margin: 0 0 30px;
}
.ml-hero-visual { position: relative; text-align: center; }
.ml-hero-visual img { max-width: 340px; width: 100%; filter: drop-shadow(0 24px 40px rgba(0,0,0,.18)); }
.ml-hero-blob {
	position: absolute; inset: 0; margin: auto;
	width: 380px; height: 380px; border-radius: 50%;
	background: linear-gradient(135deg, var(--primary), var(--accent));
	opacity: .12; z-index: 0;
}
.ml-hero-visual img { position: relative; z-index: 1; }

/* ---------- app store buttons ---------- */
.ml-appbtns { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.ml-appbtns.ml-center { justify-content: center; }
.ml-appbtns a { display: inline-flex; transition: transform var(--transition); }
.ml-appbtns a:hover { transform: translateY(-2px); }
.ml-appbtns img { height: 48px; width: auto; }

/* ---------- inline trustpilot ---------- */
.ml-trust {
	display: inline-flex; align-items: center; flex-wrap: wrap;
	gap: 8px; margin-top: 26px; font-size: 14px; color: var(--text-medium);
}
.ml-trust .trustpilotstar { position: relative; top: 2px; }
.ml-trust .fw-bold { color: var(--text-dark); }
.ml-hero .ml-trust { justify-content: flex-start; }

/* ---------- 1-2-3 steps ---------- */
.ml-steps {
	display: grid; grid-template-columns: repeat(4, 1fr);
	gap: 22px; margin-top: 8px;
}
.ml-step {
	position: relative; background: #fff; border: 1px solid var(--gray-200);
	border-radius: 16px; padding: 34px 20px 26px; text-align: center;
	box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition);
}
.ml-step:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.ml-step-num {
	position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
	width: 40px; height: 40px; border-radius: 50%;
	background: linear-gradient(135deg, var(--primary), var(--accent));
	color: #fff; font-weight: 800; font-size: 16px;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 6px 14px rgba(238,90,42,.35);
}
.ml-step-img { height: 84px; margin: 8px auto 16px; display: block; width: auto; }
.ml-step-title { font-size: 15px; font-weight: 800; letter-spacing: .4px; color: var(--text-dark); text-transform: uppercase; margin: 0; }

/* ---------- feature cards ---------- */
.ml-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 8px; }
.ml-feature {
	background: #fff; border: 1px solid var(--gray-200); border-radius: 16px;
	padding: 30px 26px; text-align: center; box-shadow: var(--shadow-sm);
	transition: transform var(--transition), box-shadow var(--transition);
}
.ml-feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.ml-feature-img { width: 140px; height: 140px; object-fit: cover; border-radius: 50%; margin: 0 auto 18px; display: block; }
.ml-feature h3 { font-size: 20px; font-weight: 800; color: var(--primary); margin: 0 0 6px; }
.ml-feature h4 { font-size: 16px; font-weight: 700; color: var(--text-dark); margin: 0 0 12px; }
.ml-feature p { font-size: 15px; color: var(--text-medium); line-height: 1.65; margin: 0; }

/* ---------- video ---------- */
.ml-video-frame { max-width: 820px; margin: 0 auto; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-md); }
.ml-video-frame video { display: block; width: 100%; height: auto; }
.ml-video-copy { max-width: 760px; margin: 26px auto 0; text-align: center; color: var(--text-medium); font-size: 16px; line-height: 1.7; }

/* ---------- guarantee ---------- */
.ml-guarantee { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.ml-guarantee h2 { font-size: 30px; font-weight: 300; color: var(--text-dark); line-height: 1.3; margin: 0 0 16px; }
.ml-guarantee h2 .pbs-orange { font-weight: 800; color: var(--primary) !important; }
.ml-guarantee p { font-size: 16px; color: var(--text-medium); line-height: 1.7; }
.ml-promise { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 22px; }
.ml-promise img { width: 76px; flex: 0 0 76px; }
.ml-promise-t { font-size: 15px; font-weight: 800; color: var(--text-dark); }
.ml-promise p { margin: 4px 0 0; font-size: 14px; }

/* ---------- app-download CTA band ---------- */
.ml-band {
	background: linear-gradient(135deg, var(--primary), var(--accent));
	color: #fff; text-align: center; padding: 56px 24px;
}
.ml-band h2 { font-size: 30px; font-weight: 800; color: #fff; margin: 0 0 10px; }
.ml-band p { font-size: 17px; opacity: .95; margin: 0 0 26px; }
.ml-band .ml-appbtns img { height: 52px; }
.ml-band .ml-trust { color: rgba(255,255,255,.92); margin-top: 22px; justify-content: center; }
.ml-band .ml-trust .fw-bold { color: #fff; }

/* ---------- FAQ (reuses bootstrap accordion, restyled) ---------- */
.ml-faq { max-width: 780px; margin: 0 auto; }
.ml-faq .accordion-item { border: 1px solid var(--gray-200); border-radius: 12px !important; overflow: hidden; margin-bottom: 14px; }
.ml-faq .accordion-button { font-weight: 700; color: var(--text-dark); background: #fff; }
.ml-faq .accordion-button:not(.collapsed) { color: var(--primary); background: var(--bg-light); box-shadow: none; }
.ml-faq .accordion-button:focus { box-shadow: none; }
.ml-faq .accordion-body { color: var(--text-medium); line-height: 1.7; text-align: left; }

/* ---------- responsive ---------- */
@media (max-width: 991px) {
	.ml-steps { grid-template-columns: repeat(2, 1fr); gap: 30px; }
	.ml-features { grid-template-columns: 1fr; max-width: 460px; margin: 8px auto 0; }
	.ml-guarantee { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 768px) {
	.ml-hero { padding: 60px 0 52px; }
	.ml-hero-inner { grid-template-columns: 1fr; gap: 32px; text-align: center; }
	.ml-hero-copy { text-align: center; }
	.ml-hero h1 { font-size: 34px; }
	.ml-hero-desc { margin-left: auto; margin-right: auto; }
	.ml-appbtns, .ml-hero .ml-trust { justify-content: center; }
	.ml-hero-visual { order: -1; }
	.ml-hero-visual img { max-width: 240px; }
	.ml-hero-blob { width: 260px; height: 260px; }
	.ml-section { padding: 52px 0; }
	.ml-h2, .ml-band h2, .ml-guarantee h2 { font-size: 26px; }
}
@media (max-width: 520px) {
	.ml-steps { grid-template-columns: 1fr; max-width: 320px; margin: 8px auto 0; }
	.ml-appbtns img { height: 44px; }
}