/* only screen and (max-width: 786px) */


#main section.module.easygen {
	scroll-margin-top: 100px;
	padding: 40px 16px 56px;
}

#main section.module.easygen .easygen-title {
	font-size: 32px;
}
#main section.module.easygen .easygen-header-icon {
	font-size: 30px;
}

#main section.module.easygen .easygen-subtitle {
	font-size: 16px;
	margin-bottom: 36px;
}

#main section.module.easygen .easygen-step-line {
	min-width: 32px;
	max-width: 80px;
}
#main section.module.easygen .easygen-step-circle {
	width: 52px;
	height: 52px;
}
#main section.module.easygen .easygen-step-icon {
	font-size: 24px;
}
#main section.module.easygen .easygen-step-label {
	font-size: 13px;
}

#main section.module.easygen .easygen-generate-btn {
	font-size: 18px;
	padding: 16px 36px;
}

#main section.module.easygen .easygen-grid {
	grid-template-columns: 1fr;
	max-width: 100%;
}
#main section.module.easygen .easygen-results-pane .easygen-grid {
	max-width: 100%;
}
#main section.module.easygen .easygen-slot,
#main section.module.easygen .easygen-results-pane .easygen-slot {
	height: auto;
	aspect-ratio: 4 / 3;
}
#main section.module.easygen .easygen-panel {
	padding: 16px 16px 14px;
	gap: 14px;
}
/* Tighter Generate button padding on mobile to match new-layout demo
 * (12px 18px instead of 14px 24px / fz 15 instead of 16). */
#main section.module.easygen .easygen-cta-panel .easygen-generate-btn {
	padding: 12px 18px;
	font-size: 15px;
	gap: 8px;
}
#main section.module.easygen .easygen-cta-panel .easygen-generate-icon {
	font-size: 18px;
}

#main section.module.easygen .easygen-example-item {
	width: 160px;
	height: 120px;
}
#main section.module.easygen .easygen-examples-track {
	gap: 10px;
}
/* On mobile: hide arrows, use native swipe */
#main section.module.easygen .easygen-examples-wrap {
	padding: 0 4px;
}
#main section.module.easygen .easygen-examples-arrow {
	display: none;
}

#main section.module.easygen .easygen-modal-card {
	padding: 24px 20px;
}

#main section.module.easygen .easygen-lightbox-close {
	top: 12px;
	right: 12px;
	width: 36px;
	height: 36px;
}
#main section.module.easygen .easygen-lightbox-prev,
#main section.module.easygen .easygen-lightbox-next {
	width: 40px;
	height: 40px;
}
#main section.module.easygen .easygen-lightbox-prev { left: 8px; }
#main section.module.easygen .easygen-lightbox-next { right: 8px; }

/* qlm launch banner — let the text wrap on narrow phones and pull
   the padding/font slightly tighter so it stays within the QLM width. */
.easygen-qlm-banner {
	padding: 9px 34px 9px 10px;
	border-radius: 12px;
	bottom: 12px;
	max-width: calc(100% - 16px);
}

.easygen-qlm-banner-text {
	font-size: 12px;
	white-space: normal;
}

.easygen-qlm-banner-icon {
	width: 20px;
	height: 20px;
}

.easygen-qlm-banner-close {
	width: 22px;
	height: 22px;
	right: 6px;
}

/* mobile suppression: the trigger icon overlaps the config bar / canvas,
   the launch banner crashes into the title + price (the in-flow wrap
   pushes content down on narrow viewports), and the tab-emphasis white
   card breaks the qlm-strip rhythm. mobile users discover easyGen via
   the qlm tab directly; the announcement isn't load-bearing. */
.btn-easygen#btn-easygen-trigger {
	display: none;
}

.easygen-qlm-banner-wrap {
	display: none;
}

/* desktop → mobile resize edge-case: if the banner was visible before
   the viewport narrowed, the tab still carries .is-easygen-banner-target.
   neutralise the card treatment so the strip stays flat. */
#quick-link > .wrapper ul.navigation > li.is-easygen-banner-target > a {
	background: none;
	border-radius: 0;
	box-shadow: none;
	transform: none;
}

/* ============================================================
   gerund-display — mobile polish
   on mobile the mockup grid ends up below the side panel, so the
   gerund block is an important touchpoint while AI is generating.
   larger fonts, wider container, more padding for clearer visual
   presence + touch-friendly spacing. scroll-cue is larger and more
   prominent because it helps the user understand they need to scroll
   down to the grid.
   ============================================================ */
#main section.module.easygen .easygen-panel-gerund {
	gap: 20px;
	padding: 28px 12px;
}
#main section.module.easygen .easygen-gerund-row {
	width: 280px;
	gap: 12px;
}
#main section.module.easygen .easygen-gerund-icon {
	font-size: 26px;
}
#main section.module.easygen .easygen-gerund-text {
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	color: rgba(255, 255, 255, 1);
}
#main section.module.easygen .easygen-gerund-subtitle {
	width: 280px;
}
#main section.module.easygen .easygen-gerund-subtitle-textwrap {
	min-height: 90px; /* 4 lines × 15px font × 1.5 line-height = 90px */
}
#main section.module.easygen .easygen-gerund-subtitle-ghost,
#main section.module.easygen .easygen-gerund-subtitle-text {
	font-size: 15px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.9);
}
#main section.module.easygen .easygen-gerund-subtitle-text::after {
	width: 2px;
	height: 16px;
}

/* scroll-cue (mouse-icon) — larger + more prominent on mobile because
   this is where it actually shows and has a real function (signal that
   the mockup grid sits below). hidden on desktop. */
#main section.module.easygen .easygen-gerund-scroll-cue.is-visible {
	display: block;
}
#main section.module.easygen .easygen-scroll-mouse {
	width: 28px;
	height: 44px;
	border-width: 2px;
}
#main section.module.easygen .easygen-scroll-mouse-dot {
	top: 8px;
	width: 4px;
	height: 9px;
}
@keyframes easygenScrollMouseDotMobile {
	0%   { transform: translate(-50%, 0);     opacity: 1; }
	55%  { transform: translate(-50%, 16px);  opacity: 0; }
	56%  { transform: translate(-50%, 0);     opacity: 0; }
	60%  { transform: translate(-50%, 0);     opacity: 0; }
	100% { transform: translate(-50%, 0);     opacity: 1; }
}
#main section.module.easygen .easygen-gerund-scroll-cue {
	margin-top: 8px;
}
#main section.module.easygen .easygen-gerund-scroll-cue.is-visible .easygen-scroll-mouse-dot {
	animation-name: easygenScrollMouseDotMobile;
}