/* gw16-tarify — /tarify/ (body.information-tarify).
   Loads AFTER gw11-info — desktop cascade insurance for Figma 803:47170.
   Mobile: Figma node 998:61436 (Услуги MOB). */

/* ---------- desktop: beat gw11 page-cover padding stack (loads after gw11) ---------- */
@media (min-width: 861px) {
	/* Hero band: compact navy (~280–350) vs inflated 498 */
	body.information-tarify .page-cover.tarify_cover,
	body.information-tarify .tarify_cover {
		padding: 32px 16px 40px !important;
		min-height: 0 !important;
		background-color: #000E37 !important;
		background-image: linear-gradient(180deg, #000E37 0%, #0065B1 100%) !important;
	}
	body.information-tarify .tarify_cover > .container {
		padding: 8px 15px 0 !important;
		max-width: 1180px;
	}
	body.information-tarify .tarify_cover h1.page-title.cover-wrapper,
	body.information-tarify .tarify_cover .cover-wrapper,
	body.information-tarify .tarify_cover h1.page-title {
		padding: 8px 0 10px !important;
		margin: 8px auto 0 !important;
		font-size: 42px !important;
		font-weight: 300 !important;
		line-height: 1.2 !important;
		max-width: 900px;
	}
	body.information-tarify .tarify_cover-text {
		max-width: 720px !important;
		margin: 12px auto 0 !important;
		font-size: 16px;
		line-height: 1.55;
	}
	body.information-tarify .header_link_map {
		display: none !important;
	}

	/* Plans denser equal-height */
	body.information-tarify .tarify_plans {
		align-items: stretch;
	}
	body.information-tarify .tarify_plan {
		min-height: 0 !important;
		height: 100%;
	}
	body.information-tarify .tarify_plan .tarify_list {
		flex: 1 1 auto;
	}

	/* Extras / CTA / rules ~980 */
	body.information-tarify .tarify_extras,
	body.information-tarify .tarify_cta {
		max-width: 980px !important;
		margin-left: auto;
		margin-right: auto;
	}
	body.information-tarify .tarify_cta {
		border-radius: 10px;
	}
	body.information-tarify .tarify_rules {
		max-width: 980px;
		gap: 18px;
	}

	/* Guide mountain poster layout */
	body.information-tarify .tarify_guide-video {
		height: 420px !important;
		min-height: 420px !important;
		padding: 0 !important;
		display: block !important;
		background:
			linear-gradient(180deg, rgba(0, 14, 55, 0.45) 0%, rgba(0, 40, 90, 0.7) 100%),
			url('/_html/images/figma/home/guide.jpg') center / cover no-repeat,
			#002b66 !important;
	}
	body.information-tarify .tarify_guide-play {
		position: absolute;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 2;
	}
	body.information-tarify .tarify_guide-caption {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 28px 32px;
		z-index: 2;
	}
}

/* ---------- tablet / narrow: content-height plan cards ---------- */
@media (max-width: 1024px) {
	body.information-tarify .tarify_plan {
		min-height: 0 !important;
		height: auto !important;
	}
	body.information-tarify .tarify_plan .tarify_list {
		flex: 0 1 auto;
	}
	body.information-tarify .tarify_plan-body {
		flex: 0 1 auto;
	}
	body.information-tarify .tarify_plans {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	body.information-tarify .tarify_btn {
		width: 100%;
		text-align: center;
		box-sizing: border-box;
	}
	body.information-tarify .tarify_extras {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}
	body.information-tarify .tarify_stats {
		grid-template-columns: 1fr;
		gap: 20px;
		justify-content: center;
	}
	body.information-tarify .tarify_rules {
		grid-template-columns: 1fr;
	}
}

/* ---------- ~tablet-phone: extras title|price row, AI stack ---------- */
@media (max-width: 860px) {
	body.information-tarify .tarify_ai-vs {
		grid-template-columns: 1fr !important;
		gap: 12px;
	}
	body.information-tarify .tarify_ai-mid {
		width: 100%;
		padding: 4px 0 12px;
		display: flex !important; /* show VS chrome if markup present */
	}
	body.information-tarify .tarify_ai-card {
		min-height: 0;
	}
	body.information-tarify .tarify_ai-card img {
		display: block;
		width: 100%;
		border-radius: 6px;
		margin-top: 12px;
	}
	body.information-tarify .tarify_guide-video {
		height: auto;
		min-height: 220px;
	}
}

@media (max-width: 767px) {
	/* Figma keeps title | price on one row (not stacked) */
	body.information-tarify .tarify_extra-top {
		flex-direction: row !important;
		flex-wrap: nowrap;
		align-items: flex-start;
		gap: 12px;
	}
	body.information-tarify .tarify_extra-price {
		text-align: right !important;
		flex: 0 0 auto;
	}
	body.information-tarify .tarify_extra-price span {
		text-align: right;
	}
	body.information-tarify .tarify_extra-top > div:first-child {
		min-width: 0;
		flex: 1 1 auto;
	}
	body.information-tarify .tarify_extra-title {
		font-size: 17px;
		line-height: 1.25;
	}
	body.information-tarify .tarify_extra-price b {
		font-size: 22px;
	}
	body.information-tarify .tarify_extra-foot {
		justify-content: stretch;
	}
	body.information-tarify .tarify_extra-foot .tarify_btn,
	body.information-tarify .tarify_extra .tarify_btn--small {
		width: 100%;
		box-sizing: border-box;
	}
	body.information-tarify .tarify_cta {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
		padding: 20px 16px;
	}
	body.information-tarify .tarify_cta .tarify_btn--wa,
	body.information-tarify .tarify_cta .tarify_btn--wa-outline {
		width: 100%;
	}
}

/* ---------- phone 390: hero, stats glow, CTA pill, type hierarchy ---------- */
@media (max-width: 480px) {
	/* Hero: Figma centered compact title, tighter band */
	body.information-tarify .tarify_cover {
		padding: 24px 16px 28px !important;
	}
	body.information-tarify .tarify_cover .page-title,
	body.information-tarify .tarify_cover h1 {
		font-size: 22px !important;
		line-height: 1.25 !important;
		font-weight: 300 !important;
		text-align: center !important;
		padding: 12px 0 8px !important;
		margin: 8px auto 0 !important;
		max-width: 340px;
	}
	body.information-tarify .tarify_cover-text {
		text-align: center !important;
		font-size: 14px !important;
		line-height: 1.5 !important;
		max-width: 340px;
		margin-left: auto !important;
		margin-right: auto !important;
		margin-top: 4px;
	}
	body.information-tarify .tarify_cover .breadcrumb {
		justify-content: flex-start;
		font-size: 12px;
		margin-bottom: 4px;
	}

	/* Stats: larger nums + soft purple bloom */
	body.information-tarify .tarify_stats {
		padding: 28px 0 4px;
		gap: 18px;
	}
	body.information-tarify .tarify_stat {
		flex: 1 1 100%;
	}
	body.information-tarify .tarify_stat .num {
		font-size: 56px !important;
		font-weight: 300;
		color: #5B6DFF;
		text-shadow: 0 0 28px rgba(91, 109, 255, 0.35);
		line-height: 1.05;
	}
	body.information-tarify .tarify_stat .cap {
		font-size: 14px;
		max-width: 280px;
		margin-left: auto;
		margin-right: auto;
	}

	/* Section titles ~22–24 */
	body.information-tarify .tarify_h2 {
		font-size: 22px !important;
		line-height: 1.2;
		margin: 36px 0 10px;
	}
	body.information-tarify .tarify_sub {
		font-size: 14px;
		margin: 0 0 16px;
	}

	/* Plans already content-height via 1024 rule */
	body.information-tarify .tarify_plan .price {
		font-size: 30px;
	}
	body.information-tarify .tarify_plan-head {
		font-size: 18px;
		padding: 14px 10px;
	}

	/* CTA: solid white pill (Figma), not outline */
	body.information-tarify .tarify_cta .tarify_btn--wa-outline {
		background: #fff !important;
		color: #002B66 !important;
		border-color: #fff !important;
		width: 100%;
		border-radius: 8px;
		padding: 12px 18px;
		font-weight: 500;
	}
	body.information-tarify .tarify_cta .tarify_btn--wa-outline:hover {
		background: #f0f4fa !important;
		color: #002B66 !important;
	}
	body.information-tarify .tarify_cta-title {
		font-size: 18px;
	}
	body.information-tarify .tarify_cta-text {
		font-size: 13px;
	}

	/* Rules: clearer FAQ rhythm even if plain */
	body.information-tarify .tarify_rules {
		gap: 8px;
	}
	body.information-tarify .tarify_rule {
		padding: 12px 0 !important;
		background: transparent;
		border-radius: 0;
	}
	body.information-tarify .tarify_rule h3 {
		font-size: 16px;
		margin: 0 0 6px;
		color: #0a1a3a;
	}
	body.information-tarify .tarify_rule p {
		font-size: 14px;
		line-height: 1.45;
	}

	/* Features / extras density */
	body.information-tarify .tarify_extra {
		padding: 16px;
	}
	body.information-tarify .tarify_feature {
		min-height: 0;
		padding: 16px;
	}
	body.information-tarify .tarify_page > .container {
		padding: 16px 0 40px;
	}
}