/*
 * Pricing page (page-pricing.php). Converted from
 * design_handoff_v5_round3/Marketing Mockups/Pages/Pricing v2.dc.html (<helmet>).
 *
 * The Pricing design ships its OWN responsive layer (the `.rsp-*` / `.toggle-*`
 * classes + @media below) — kept verbatim. Shared machinery is global and
 * reused, not duplicated here: the page shell (`.atarim-page` min-width), the
 * nav hamburger, the footer recolumn, scroll-reveal (`[data-rev]`/`.hp-on`),
 * grain, and the Fira/Roboto fonts all live in tokens.css / site.css. The dc's
 * `.rsp-page{min-width:0}` is dropped — the global `.atarim-page` rule covers it.
 *
 * Ported here (page-unique): the credit-estimator range-input styling (`.est`),
 * the monthly/annual segment + FAQ initial states (CSS-driven so nothing is
 * lost with JS off), the style-hover -> :hover button rules, and the responsive
 * override layer.
 */

/* Light-page scrollbar (overrides the global dark one, only while this page's CSS is loaded). */
::-webkit-scrollbar-track { background: #ece6f6; }
::-webkit-scrollbar-thumb { background: #cabfe4; border-radius: 8px; border: 3px solid #ece6f6; }

/* ===== Estimator range input (page-unique, from the dc <helmet>) ===== */
input[type="range"].est {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 6px;
	border-radius: 999px;
	background: linear-gradient(90deg, #6D5DF3 var(--fill, 30%), #E0D8F1 var(--fill, 30%));
	outline: none;
	cursor: pointer;
}
input[type="range"].est::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 26px;
	height: 26px;
	border-radius: 999px;
	background: #fff;
	border: none;
	box-shadow: 0 6px 16px -4px rgba(22, 4, 46, 0.45), 0 0 0 5px #6D5DF3;
	cursor: pointer;
}
input[type="range"].est::-moz-range-thumb {
	width: 26px;
	height: 26px;
	border-radius: 999px;
	background: #fff;
	border: none;
	box-shadow: 0 6px 16px -4px rgba(22, 4, 46, 0.45), 0 0 0 5px #6D5DF3;
	cursor: pointer;
}

/* ===== FAQ accordion initial state (CSS-driven, so first item is open and the
   rest closed even with JS off; JS only toggles the .faq-open class) ===== */
.faq-answer { max-height: 0; opacity: 0; }
.faq-open > .faq-answer { max-height: 320px; opacity: 1; }
.faq-open .faq-chevron { transform: rotate(180deg); }

/* ===== Buttons, converted from style-hover ===== */
.pr-mint { transition: background .16s ease; }
.pr-mint:hover { background: #35c98a; }
.pr-ghost-light:hover { border-color: #6D5DF3; color: #6D5DF3; }
.pr-violet:hover { background: #8a7af5; }
.pr-ghost-dark { transition: border-color .16s ease, color .16s ease; }
.pr-ghost-dark:hover { border-color: #9385FF; color: #9385FF; }

/* ===== RESPONSIVE OVERRIDE LAYER · desktop (>=1280px) is the inline spec, untouched ===== */
@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; }
	.rsp-sec { padding-left: 24px !important; padding-right: 24px !important; }
	.rsp-onecard { top: -90px !important; margin-bottom: -90px !important; }
	.rsp-twobox { grid-template-columns: 1fr !important; max-width: 440px !important; }
	.rsp-tiles3 { grid-template-columns: 1fr !important; }
	.rsp-2col { grid-template-columns: 1fr !important; gap: 36px !important; }
}
@media (max-width: 767px) {
	.rsp-hero { padding-left: 16px !important; padding-right: 16px !important; padding-top: 128px !important; padding-bottom: 150px !important; }
	.rsp-sec { padding-left: 16px !important; padding-right: 16px !important; }
	.toggle-wrap { flex-direction: column !important; align-items: center !important; gap: 12px !important; }
	.toggle-pill { position: static !important; transform: none !important; }
}