/*
 * Product (Tour) page styles (page-product.php).
 * Converted from design-source/Marketing Mockups/Product (Tour).dc.html.
 * The inline styles in the template are the desktop spec; this file carries the
 * hover states (converted from style-hover) and the four-tier responsive layer
 * (rsp-* class hooks + the @media block), ported verbatim from the design's
 * <helmet>. The fixed-canvas mockups scale via the theme's global
 * .mk-scroll/.mk-fit-box/.mk-fit system (site.css + site.js), so this file does
 * not carry a second scaler.
 */

/* Anchor offset for the floating nav (the design's section[id] rule). */
.atarim-page section[id] { scroll-margin-top: 96px; }

/* ===== Hover states (converted from style-hover) ===== */
.pt-btn-mint { transition: background .16s ease; }
.pt-btn-mint:hover { background: #35c98a; }
.pt-btn-outline { transition: border-color .16s ease, color .16s ease; }
.pt-btn-outline:hover { border-color: #6D5DF3; color: #6D5DF3; }
.pt-btn-ghost-dark { transition: border-color .16s ease, color .16s ease; }
.pt-btn-ghost-dark:hover { border-color: #9385FF; color: #9385FF; }
.pt-cta { transition: background .16s ease, transform .16s ease; }
.pt-cta:hover { background: #35c98a; transform: translateY(-2px); }
.pt-inboxlink { transition: color .16s ease; }
.pt-inboxlink:hover { color: #16042E; }
.pt-intcard { transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease; }
.pt-intcard:hover { border-color: rgba(109,93,243,0.45); transform: translateY(-4px); box-shadow: 0 22px 44px -26px rgba(22,4,46,0.45); }
.pt-morecard { transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.pt-morecard:hover { border-color: #6D5DF3; background: rgba(109,93,243,0.06); transform: translateY(-4px); }
.pt-deepdive { transition: border-color .16s ease, transform .16s ease; }
.pt-deepdive:hover { border-color: rgba(109,93,243,0.45); transform: translateY(-3px); }

/* ============================================================
 * RESPONSIVE LAYER (Product Tour). Ported verbatim from the design's <helmet>
 * @media block. Desktop >=1280px is the inline spec and untouched. The page
 * shell min-width is released by the global .atarim-page rule in site.css.
 * Breakpoints: 1279 / 1023 / 767 / 479.
 * ============================================================ */
@media (max-width: 1279px) {
	.rsp-hero { padding-left: 32px !important; padding-right: 32px !important; }
	.rsp-sec { padding-left: 32px !important; padding-right: 32px !important; }
}
@media (max-width: 1023px) {
	.rsp-hero { padding-left: 24px !important; padding-right: 24px !important; padding-top: 150px !important; }
	.rsp-sec { padding-left: 24px !important; padding-right: 24px !important; }
	.rsp-2col { grid-template-columns: 1fr !important; gap: 40px !important; }
	.rsp-2col > .rsp-visual { order: 2 !important; }
	.rsp-tiles3 { grid-template-columns: repeat(2, 1fr) !important; }
	.rsp-agents { grid-template-columns: repeat(3, 1fr) !important; }
	.rsp-intgrid { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (max-width: 767px) {
	.rsp-hero { padding-left: 16px !important; padding-right: 16px !important; padding-top: 120px !important; padding-bottom: 56px !important; }
	.rsp-sec { padding-left: 16px !important; padding-right: 16px !important; padding-top: 64px !important; padding-bottom: 64px !important; }
	.rsp-tiles3 { grid-template-columns: 1fr !important; }
	.rsp-agents { grid-template-columns: repeat(2, 1fr) !important; }
	.rsp-intgrid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 479px) {
	.rsp-intgrid { grid-template-columns: repeat(2, 1fr) !important; }
}