/* =========================================================================
   GlobeMarket landing page. Figma: Homepage (559:6282), 1440 frame.
   ========================================================================= */
.gm-landing { background: var(--gm-color-bg-subtle); color: var(--gm-color-text-primary); }
.gm-landing p { margin: 0; }
.gm-landing ul { margin: 0; padding: 0; list-style: none; }
.gm-landing img { max-width: none; }
.gm-section { padding: 80px 0; }

/* ---------- Hero banners (559:6337) ---------- */
.gm-hero__viewport { overflow: hidden; }
.gm-hero__track { display: flex; transition: transform .6s cubic-bezier(.22, .61, .36, 1); will-change: transform; }
.gm-slide { position: relative; flex: 0 0 100%; height: 400px; overflow: hidden; }
.gm-slide--iphone      { background: #071120; }
.gm-slide--samsung     { background: var(--gm-color-bg-brand-subtle); }
.gm-slide--refurbished { background: var(--gm-color-bg-surface); }
.gm-slide--ipad        { background: var(--gm-color-bg-success-subtle); }

/* The 1440 x 400 Figma artboard, centred; wider screens extend the background. */
.gm-slide__stage { position: absolute; top: 0; left: 50%; width: 1440px; height: 400px; transform: translateX(-50%); }

.gm-slide__text {
	position: absolute; left: 140px; top: calc(50% + .5px); transform: translateY(-50%);
	display: flex; flex-direction: column; align-items: flex-start; gap: 32px;
	width: 548px; z-index: 1;
}
.gm-slide--samsung .gm-slide__text { top: calc(50% - .5px); }
.gm-slide--ipad .gm-slide__text { width: 593px; }
.gm-slide__msg { display: flex; flex-direction: column; gap: 24px; width: 100%; }
.gm-slide__title {
	font-size: 48px; line-height: 56px; font-weight: 800; letter-spacing: -.8px;
	color: var(--gm-color-text-primary);
}
.gm-slide__title > span { display: block; white-space: nowrap; }
.gm-slide__accent { font-family: var(--gm-font-accent); font-weight: 800; }
.gm-slide--iphone .gm-slide__title { color: #fff; }
.gm-slide__sub { width: 440px; font-size: 20px; line-height: 28px; font-weight: 400; color: var(--gm-color-text-secondary); }
.gm-slide--iphone .gm-slide__sub { color: var(--gm-color-action-secondary-text); }
.gm-slide--ipad .gm-slide__sub { color: var(--gm-color-text-primary); }
.gm-slide__cta .gm-icon { width: 20px; height: 20px; }
.gm-slide--iphone .gm-slide__cta      { width: 171px; }
.gm-slide--samsung .gm-slide__cta     { width: 190px; }
.gm-slide--refurbished .gm-slide__cta { width: 204px; }
.gm-slide--ipad .gm-slide__cta        { width: 189px; }

/*
 * Artwork box: x 680–1440 of the artboard (760 x 400). Children are placed in
 * percentages of that box so the composition scales on small screens; at
 * desktop they resolve to the exact Figma pixel positions.
 */
.gm-slide__art { position: absolute; left: 680px; top: 0; width: 760px; height: 400px; }
.gm-art { position: absolute; display: block; max-width: none; }
.gm-art > img { position: absolute; display: block; max-width: none; }
/* iPhone: glow, floor shadow, three backs and the front */
.gm-art--glow   { left: calc(100% * -2.8 / 760);   top: calc(100% * 176.2 / 400); width: calc(100% * 836.6 / 760); height: calc(100% * 305.6 / 400); }
.gm-art--shadow { left: calc(100% * 175.6 / 760);  top: calc(100% * 335.6 / 400); width: calc(100% * 466.8 / 760); height: calc(100% * 29.8 / 400); }
.gm-art--p1, .gm-art--p2, .gm-art--p3 { top: calc(100% * 47 / 400); width: calc(100% * 108.198 / 760); height: calc(100% * 306.063 / 400); object-fit: cover; }
.gm-art--p1 { left: calc(100% * 210 / 760); }
.gm-art--p2 { left: calc(100% * 296.38 / 760); }
.gm-art--p3 { left: calc(100% * 382.76 / 760); }
.gm-art--p4 {
	left: calc(100% * 472.824 / 760); top: calc(100% * 50.27 / 400);
	width: calc(100% * 147.176 / 760); height: calc(100% * 302.4 / 400);
	overflow: hidden;
	border-top-left-radius: calc(100% * 22.869 / 147.176) calc(100% * 22.869 / 302.4);
	border-bottom-left-radius: calc(100% * 22.869 / 147.176) calc(100% * 22.869 / 302.4);
}
.gm-art--p4 > img { top: 0; left: -67.19%; width: 166.94%; height: 100%; }
/* Samsung */
.gm-art--samsung { left: calc(100% * 152.23 / 760); top: calc(100% * 23.995 / 400); width: calc(100% * 511.073 / 760); height: calc(100% * 352.409 / 400); overflow: hidden; }
.gm-art--samsung > img { left: -92.29%; top: -16.54%; width: 192.29%; height: 132.31%; }
/* Refurbished */
.gm-art--refurb { left: calc(100% * 194 / 760); top: calc(100% * 20 / 400); width: calc(100% * 384.806 / 760); height: calc(100% * 362 / 400); overflow: hidden; }
.gm-art--refurb > img { left: -81.36%; top: -7.1%; width: 181.36%; height: 107.1%; }
/* iPad */
.gm-art--ipad { left: calc(100% * 292 / 760); top: calc(100% * 22 / 400); width: calc(100% * 328 / 760); height: calc(100% * 357 / 400); object-fit: cover; }

/* Swipe controls (559:6374): dots + arrows, 1000px apart, centred. */
.gm-hero__controls {
	display: flex; align-items: center; justify-content: space-between;
	width: 100%; max-width: calc(1192px + 2 * var(--gm-gutter));
	margin: 0 auto; padding: 20px var(--gm-gutter);
}
.gm-hero__dots { display: flex; align-items: center; gap: 8px; }
.gm-dot { position: relative; display: block; width: 12px; height: 12px; padding: 0; border: 0; background: none; cursor: pointer; }
.gm-dot img { position: absolute; inset: 0; width: 12px; height: 12px; }
.gm-dot .gm-dot__on, .gm-dot.is-active .gm-dot__off { display: none; }
.gm-dot.is-active .gm-dot__on { display: block; }

/* Purchase information (559:6389) */
.gm-landing .gm-assure { display: flex; align-items: center; justify-content: center; gap: 100px; padding: 20px var(--gm-gutter); }
.gm-assure li {
	display: flex; align-items: center; gap: 12px; padding: 4px;
	font-size: 18px; line-height: 28px; font-weight: 600; color: var(--gm-color-text-secondary); white-space: nowrap;
}
.gm-assure__ic { position: relative; width: 48px; height: 48px; flex: none; overflow: hidden; border-radius: var(--gm-radius-md); background: var(--gm-color-bg-subtle); }
.gm-assure__ic img { position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; transform: translate(-50%, -50%); }

/* ---------- H1 (559:6408) ---------- */
.gm-intro { padding: 80px 0; }
.gm-intro__in { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.gm-intro__title { margin: 0; font-size: 40px; line-height: 48px; font-weight: 700; letter-spacing: -.6px; color: var(--gm-color-text-primary); }
.gm-intro__lead { max-width: 806px; font-size: 18px; line-height: 28px; font-weight: 400; color: var(--gm-color-text-secondary); }

/* ---------- Shop by brand or category (559:6412) ---------- */
.gm-brands .gm-h2 { margin-bottom: 32px; }
.gm-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.gm-tile {
	position: relative; display: block; height: 350px; overflow: hidden;
	background: var(--gm-color-bg-disabled); border-radius: var(--gm-radius-lg);
	text-decoration: none; transition: background-color .2s ease;
}
.gm-tile:hover { background: #dfe3e6; }
.gm-tile__art { position: absolute; inset: 0; }
.gm-tile__art > *, .gm-tile__pixel > * { position: absolute; display: block; max-width: none; }
.gm-tile__label {
	position: absolute; top: 278px; left: 50%; transform: translateX(-50%);
	font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: -.2px;
	color: var(--gm-color-text-secondary); text-align: center; white-space: nowrap;
}
.gm-tile--iphone .gm-tile__label, .gm-tile--ipads .gm-tile__label, .gm-tile--watch .gm-tile__label { left: calc(50% + .5px); }
.gm-crop { overflow: hidden; }
.gm-crop > img { position: absolute; display: block; max-width: none; }
/* iPhone */
.gm-tile__i1 { left: calc(50% - 70.1px); top: calc(50% - 30.48px); width: 91.794px; height: 186.952px; transform: translate(-50%, -50%); border-radius: 16.222px; }
.gm-tile__i1 > img { left: -69.18%; top: -2.96%; width: 173.63%; height: 105.82%; }
.gm-tile__i2 { left: calc(50% + 69.66px); top: calc(50% - 30.48px); width: 91.694px; height: 186.952px; transform: translate(-50%, -50%); border-radius: 15.843px; }
.gm-tile__i2 > img { left: -70.68%; top: -2.97%; width: 175.49%; height: 105.93%; }
.gm-tile__i3 { left: calc(50% - .33px); top: calc(50% - 36px); width: 96.617px; height: 198px; transform: translate(-50%, -50%); border-radius: 16.247px; }
.gm-tile__i3 > img { left: -66.59%; top: -.03%; width: 166.59%; height: 100.05%; }
/* Samsung */
.gm-tile__s1 { left: calc(50% - 126.7275px); top: 32.92px; width: 251.856px; height: 205.083px; }
.gm-tile__s1 > img { left: -121.59%; top: -17.04%; width: 233.99%; height: 136.34%; }
/* iPads */
.gm-tile__ipad { left: calc(50% + .19px); top: calc(50% - 36px); width: 182.373px; height: 198px; transform: translate(-50%, -50%); object-fit: cover; }
/* Google Pixel */
.gm-tile__pixel { left: calc(50% - .29px); top: 40px; width: 223.412px; height: 198px; transform: translateX(-50%); }
.gm-tile__g1 { left: calc(50% - 67.24px); top: calc(50% + 5.08px); width: 88.941px; height: 187.835px; transform: translate(-50%, -50%); border-radius: 12.918px 12.918px 12.918px 14.4px; }
.gm-tile__g1 > img { left: -85.48%; top: -4.74%; width: 190.72%; height: 109.7%; }
.gm-tile__g2 { left: calc(50% + 67.13px); bottom: .21px; width: 89.153px; height: 187.624px; transform: translateX(-50%); border-radius: 14.824px; }
.gm-tile__g2 > img { left: -81.98%; top: -4.51%; width: 187.23%; height: 109.37%; }
.gm-tile__g3 { left: calc(50% - 1.48px); top: 50%; width: 94.659px; height: 198px; transform: translate(-50%, -50%); border-radius: 16.306px; }
.gm-tile__g3 > img { left: -78.75%; top: -1.93%; width: 183.9%; height: 103.96%; }
/* Smartwatch / Earbuds */
.gm-tile__watch { left: 50%; top: calc(50% - 33px); width: 172px; height: 204px; transform: translate(-50%, -50%); object-fit: cover; }
.gm-tile__earbuds { left: 50%; top: calc(50% - 36px); width: 160px; height: 198px; transform: translate(-50%, -50%); object-fit: cover; }

/* ---------- Featured refurbished phones (559:6444) ---------- */
.gm-featured .gm-h2 { margin-bottom: 32px; }
.gm-featured__box { display: flex; flex-direction: column; gap: 14px; }
.gm-featured__rail { gap: 18px; }
.gm-featured__nav { display: flex; justify-content: flex-end; padding: 20px 0; }

/* ---------- Know what you're buying (559:6466) ---------- */
.gm-guides__head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.gm-guides__text { display: flex; flex-direction: column; gap: 16px; max-width: 823px; color: #000; }
.gm-guides__text .gm-h2 { color: #000; }
.gm-guides__lead { font-size: 16px; line-height: 24px; font-weight: 400; color: #000; }
.gm-guides__rail { gap: 20px; align-items: stretch; }
.gm-guide {
	display: flex; flex-direction: column; width: 340px; flex: none;
	filter: drop-shadow(0 2px 2px rgba(17, 15, 21, .05));
	color: inherit; text-decoration: none;
}
.gm-guide__img { display: block; height: 300px; overflow: hidden; background: var(--gm-color-bg-surface); border-radius: var(--gm-radius-lg) var(--gm-radius-lg) 0 0; }
.gm-guide__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.gm-guide:hover .gm-guide__img img { transform: scale(1.03); }
.gm-guide__body {
	display: flex; flex: 1; flex-direction: column; align-items: center;
	padding: 24px 30px 40px;
	background: var(--gm-color-bg-surface); border-radius: 0 0 var(--gm-radius-lg) var(--gm-radius-lg);
}
.gm-guide__info { display: flex; flex-direction: column; gap: 6px; width: 280px; }
.gm-guide__cat { font-size: 16px; line-height: 24px; font-weight: 400; color: var(--gm-color-text-muted); white-space: nowrap; }
.gm-guide__title {
	font-size: 20px; line-height: 28px; font-weight: 700; color: var(--gm-color-text-primary);
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- FAQ (559:6522) ---------- */
.gm-faq { padding: 80px 0; background: var(--gm-color-bg-surface); }
.gm-faq__in { display: flex; flex-direction: column; align-items: center; gap: 32px; }
.gm-faq__title { color: #000; text-align: center; }
.gm-faq__list { width: 100%; max-width: 990px; }
.gm-faq__item { position: relative; padding: 24px 20px; background: var(--gm-color-bg-surface); }
.gm-faq__q {
	display: block; list-style: none; cursor: pointer; padding-right: 56px;
	font-size: 24px; line-height: 32px; font-weight: 500; letter-spacing: -.2px; color: var(--gm-color-text-primary);
}
.gm-faq__q::-webkit-details-marker { display: none; }
.gm-faq__q::marker { content: ""; }
.gm-faq__ic { position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; }
.gm-faq__ic img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
/* Arrow: right when closed, down when open. .is-expanded is driven by gm.js; [open] covers no-JS. */
.gm-faq__ic img { transition: opacity var(--gm-dur) ease, transform var(--gm-dur) var(--gm-ease); }
.gm-faq__open { opacity: 0; transform: translate(-50%, -50%) rotate(-90deg); }
.gm-faq__closed { opacity: 1; }
.gm-faq__item.is-expanded .gm-faq__open, html:not(.gm-js) .gm-faq__item[open] .gm-faq__open { opacity: 1; transform: translate(-50%, -50%); }
.gm-faq__item.is-expanded .gm-faq__closed, html:not(.gm-js) .gm-faq__item[open] .gm-faq__closed { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); }
.gm-faq__a { max-width: 694px; margin-top: 24px !important; font-size: 18px; line-height: 28px; font-weight: 400; color: var(--gm-color-text-secondary); }

/* =========================================================================
   Motion (landing)
   ========================================================================= */
/* Hero: the active slide's copy and artwork ease in. */
.gm-js .gm-slide__msg, .gm-js .gm-slide__cta, .gm-js .gm-slide__art { transition: opacity .6s var(--gm-ease), transform .6s var(--gm-ease); }
.gm-js .gm-slide:not(.is-active) .gm-slide__msg, .gm-js .gm-slide:not(.is-active) .gm-slide__cta { opacity: 0; transform: translateY(12px); }
.gm-js .gm-slide:not(.is-active) .gm-slide__art { opacity: 0; transform: translateX(24px); }
.gm-js .gm-slide.is-active .gm-slide__cta { transition-delay: .12s; }
.gm-js .gm-slide.is-active .gm-slide__art { transition-delay: .06s; }
.gm-dot img { transition: opacity var(--gm-dur) ease; }
.gm-dot:hover .gm-dot__off { opacity: .6; }

/* Trust row */
.gm-assure__ic img { transition: transform var(--gm-dur) var(--gm-ease); }
.gm-assure li:hover .gm-assure__ic img { transform: translate(-50%, -50%) scale(1.12); }

/* Category tiles */
.gm-tile { transition: background-color var(--gm-dur) ease, box-shadow var(--gm-dur) var(--gm-ease), transform var(--gm-dur) var(--gm-ease); }
.gm-tile:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(17, 15, 21, .08); }
.gm-tile__art { transition: transform .45s var(--gm-ease); }
.gm-tile:hover .gm-tile__art { transform: scale(1.05); }
.gm-tile__label { transition: color var(--gm-dur-fast) ease; }
.gm-tile:hover .gm-tile__label { color: var(--gm-color-action-secondary-default); }

/* Guide cards */
.gm-guide { transition: transform var(--gm-dur) var(--gm-ease), filter var(--gm-dur) var(--gm-ease); }
.gm-guide:hover { transform: translateY(-4px); filter: drop-shadow(0 10px 18px rgba(17, 15, 21, .08)); }
.gm-guide__title { transition: color var(--gm-dur-fast) ease; }
.gm-guide:hover .gm-guide__title { color: var(--gm-color-action-secondary-default); }

/* FAQ */
.gm-faq__q { transition: color var(--gm-dur-fast) ease; }
.gm-faq__q:hover { color: var(--gm-color-action-secondary-default); }
.gm-faq__ic { border-radius: var(--gm-radius-full); transition: background-color var(--gm-dur) ease; }
.gm-faq__q:hover .gm-faq__ic { background: var(--gm-color-bg-subtle); }

@media (prefers-reduced-motion: reduce) {
	.gm-js .gm-slide__msg, .gm-js .gm-slide__cta, .gm-js .gm-slide__art { opacity: 1 !important; transform: none !important; transition: none; }
	.gm-tile:hover, .gm-tile:hover .gm-tile__art, .gm-guide:hover { transform: none; }
	.gm-assure li:hover .gm-assure__ic img { transform: translate(-50%, -50%); }
}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1440px) {
	/* Keep the artboard's text column inside the viewport on narrower desktops. */
	.gm-slide__text { left: max(140px, calc(720px - 50vw + var(--gm-gutter) + 20px)); }
}
@media (max-width: 1380px) {
	.gm-tiles { gap: 24px; }
}
@media (max-width: 1100px) {
	.gm-section, .gm-intro, .gm-faq { padding: 56px 0; }
	/* Hero: stack text above a scaled artwork box. */
	.gm-slide { height: auto; }
	.gm-slide__stage { position: relative; left: 0; width: 100%; height: auto; transform: none; display: flex; flex-direction: column; }
	.gm-slide__text { position: static; transform: none; width: auto; max-width: 600px; gap: 24px; padding: 32px var(--gm-gutter) 0; }
	.gm-slide__msg { gap: 12px; }
	.gm-slide__title { font-size: 36px; line-height: 44px; letter-spacing: -.6px; }
	.gm-slide__title > span { white-space: normal; }
	.gm-slide__sub { width: auto; font-size: 18px; line-height: 28px; }
	.gm-slide__art { position: relative; left: auto; width: min(100%, 760px); height: auto; aspect-ratio: 760 / 400; margin: 0 auto; }
	.gm-hero__controls { padding-top: 16px; padding-bottom: 16px; }
	.gm-landing .gm-assure { justify-content: flex-start; gap: 24px; overflow-x: auto; scrollbar-width: none; }
	.gm-assure::-webkit-scrollbar { display: none; }
	.gm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gm-intro__title { font-size: 32px; line-height: 40px; letter-spacing: -.4px; }
	.gm-faq__q { font-size: 20px; line-height: 28px; }
	.gm-faq__ic { top: 16px; }
}
@media (max-width: 768px) {
	.gm-section, .gm-intro, .gm-faq { padding: 40px 0; }
	.gm-slide__title { font-size: 30px; line-height: 38px; letter-spacing: -.4px; }
	.gm-slide__sub { font-size: 16px; line-height: 24px; }
	.gm-assure li { font-size: 16px; line-height: 24px; }
	.gm-intro__title { font-size: 28px; line-height: 36px; }
	.gm-intro__lead { font-size: 16px; line-height: 24px; }
	.gm-brands .gm-h2, .gm-featured .gm-h2 { margin-bottom: 24px; }
	.gm-tiles { gap: 16px; }
	.gm-tile { height: 300px; }
	.gm-tile__art { top: -25px; }
	.gm-tile__label { top: 240px; font-size: 20px; line-height: 28px; }
	.gm-guides__head .gm-navbtns, .gm-featured__nav { display: none; }
	.gm-guide { width: 280px; }
	.gm-guide__img { height: 240px; }
	.gm-guide__body { padding: 20px 20px 28px; }
	.gm-guide__info { width: 100%; }
	.gm-faq__item { padding: 20px 0; }
	.gm-faq__q { font-size: 18px; line-height: 26px; padding-right: 48px; }
	.gm-faq__ic { right: 0; top: 12px; }
	.gm-faq__a { margin-top: 12px !important; font-size: 16px; line-height: 24px; }
}
@media (max-width: 600px) {
	.gm-tiles { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
	.gm-hero__track { transition: none; }
}

/* A linked phrase inside an FAQ answer (e.g. the Returns and Refunds policy). */
.gm-faq__a .gm-faq__link { font-weight: 600; color: var(--gm-color-text-primary, #0a0a0a); text-decoration: underline; text-underline-offset: 3px; }
.gm-faq__a .gm-faq__link:hover { color: var(--gm-color-action-secondary-default, #0d1b2a); }