/**
 * Pricing page — redesigned from scratch.
 *
 * Clean light layout on a soft dotted backdrop, a modern gradient segmented
 * toggle, and a dark "spotlight" featured plan (the popular card inverts to
 * navy with an orange CTA) standing out among the white cards.
 *
 * NOTE: the price/period/card hook classes and data-* attributes are preserved
 * exactly so assets/js/pricing.js keeps switching billing + currency.
 *
 * @package Doso
 */

/* Shared design tokens — applied to BOTH the pricing grid and the CTA band so
   the CTA (a separate sibling section) can use the same brand colours. */
.pricing,.pricing-cta{
	--p-blue:#2563eb;
	--p-blue-d:#1d4ed8;
	--p-blue-l:#60a5fa;
	--p-logo-1:#1450B8;     /* brand gradient — deep blue → cyan */
	--p-logo-2:#20A4DC;
	--p-orange:#f2a866;     /* powdered orange — CTA buttons */
	--p-orange-deep:#e07d3b;
	--p-ink:#0f1f3d;
	--p-muted:#64748b;
	--p-border:#e6ebf3;
	--p-navy:#0f1c38;       /* featured (dark) card surface */
	--p-navy-2:#16264a;
	--p-radius:26px;
}

/* ---- Section ---------------------------------------------------------------- */
.pricing{
	position:relative;
	padding-block:clamp(2rem,4vw,3.25rem);
	background:
		radial-gradient(820px 440px at 50% -6%, rgba(37,99,235,.12), transparent 70%),
		#f4f7fc;
}
/* Faint dot grid, fading out toward the cards. */
.pricing::before{
	content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
	background-image:radial-gradient(rgba(15,31,61,.05) 1px,transparent 1px);
	background-size:22px 22px;
	-webkit-mask-image:linear-gradient(#000,transparent 58%);
	mask-image:linear-gradient(#000,transparent 58%);
}
.pricing>.container{position:relative;z-index:1}

/* ---- Header ----------------------------------------------------------------- */
.pricing__header{text-align:center;max-width:660px;margin:0 auto clamp(1.25rem,2.5vw,1.75rem)}
.pricing__eyebrow{
	display:inline-block;margin-bottom:.7rem;padding:.35rem .9rem;border-radius:999px;
	font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
	color:var(--p-blue-d);background:#e3edfd;border:1px solid #cfe0fb;
}
.pricing__title{margin:0 0 .6rem;font-weight:800;line-height:1.12;letter-spacing:-.02em;font-size:clamp(1.5rem,3vw,2.1rem);color:var(--p-ink)}
.pricing__subtitle{margin:0;color:var(--p-muted);font-size:clamp(.9rem,1.1vw,1rem);line-height:1.55}

/* ---- Controls (segmented toggles) ------------------------------------------ */
.pricing__controls{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;align-items:center;margin-bottom:clamp(1.4rem,2.5vw,2rem)}
/* Equal-width columns so the 50% sliding thumb lines up with either button,
   even though "Yearly + Save 20%" is wider than "Monthly". */
.pricing-seg{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;padding:4px;background:#e7edf8;border:1px solid var(--p-border);border-radius:999px;box-shadow:inset 0 1px 2px rgba(15,31,61,.05)}
.pricing-seg__thumb{
	position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);
	background:linear-gradient(135deg,var(--p-logo-1),var(--p-logo-2));border-radius:999px;
	box-shadow:0 6px 14px -8px rgba(20,80,184,.55);
	transition:transform .32s cubic-bezier(.4,.2,.2,1);
}
.pricing-seg[data-active="1"] .pricing-seg__thumb{transform:translateX(100%)}
.pricing-seg__btn{
	position:relative;z-index:1;width:100%;
	display:inline-flex;align-items:center;justify-content:center;gap:.4rem;white-space:nowrap;
	min-width:92px;padding:.42rem .95rem;border:0;background:transparent;cursor:pointer;
	font:inherit;font-weight:600;font-size:.82rem;color:var(--p-muted);
	border-radius:999px;transition:color .25s ease;
}
.pricing-seg__btn.is-active{color:#fff}
.pricing-seg__save{
	font-size:.6rem;font-weight:700;letter-spacing:.02em;
	padding:.12rem .42rem;border-radius:999px;background:var(--p-orange);color:#fff;
}
.pricing-seg__btn.is-active .pricing-seg__save{background:rgba(255,255,255,.22)}

/* ---- Grid ------------------------------------------------------------------- */
.pricing__grid{
	display:grid;grid-template-columns:repeat(3,1fr);
	gap:clamp(1rem,1.8vw,1.6rem);align-items:start;
	max-width:1180px;margin-inline:auto;
}

/* ---- Card ------------------------------------------------------------------- */
.pricing-card{position:relative;display:flex}
.pricing-card__inner{
	position:relative;display:flex;flex-direction:column;flex:1 1 auto;width:100%;text-align:left;
	padding:clamp(1.25rem,1.5vw,1.5rem);
	background:#fff;border:1.5px solid var(--p-border);border-radius:var(--p-radius);
	box-shadow:0 10px 30px -20px rgba(15,31,61,.25);
	transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.pricing-card:hover .pricing-card__inner{
	transform:translateY(-8px);
	box-shadow:0 30px 60px -28px rgba(20,80,184,.35);
	border-color:#cfe0fb;
}
/* Secondary highlighted plan (Enterprise) — a subtle brand-tinted border. */
.pricing-card--highlight:not(.pricing-card--popular) .pricing-card__inner{border-color:#c9dcfa}

/* Featured (popular) — dark "spotlight" card with light text + orange accents. */
.pricing-card--popular .pricing-card__inner{
	background:linear-gradient(165deg,var(--p-navy-2),var(--p-navy));
	border-color:transparent;color:#e8eefb;
	box-shadow:0 30px 60px -24px rgba(15,28,56,.6),inset 0 0 0 1px rgba(96,165,250,.18);
}
@media(min-width:993px){
	.pricing-card--popular{z-index:2}
	.pricing-card--popular .pricing-card__inner{transform:translateY(-8px)}
	.pricing-card--popular:hover .pricing-card__inner{transform:translateY(-14px)}
}

/* Badge (replaces the old banner tab) */
.pricing-card__badge{
	display:inline-flex;align-items:center;gap:.4rem;align-self:flex-start;margin-bottom:1rem;
	padding:.4rem .85rem;border-radius:999px;
	font-size:.76rem;font-weight:700;letter-spacing:.02em;color:#fff;
	background:linear-gradient(135deg,var(--p-orange),var(--p-orange-deep));
	box-shadow:0 8px 18px -8px rgba(224,125,59,.7);
}
.pricing-card__badge svg{flex:none}

/* Head */
.pricing-card__head{margin-bottom:.85rem}
.pricing-card__name{margin:0 0 .4rem;font-size:1.15rem;font-weight:800;color:var(--p-ink)}
.pricing-card--popular .pricing-card__name{color:#fff}
.pricing-card__desc{margin:0;color:var(--p-muted);font-size:.86rem;line-height:1.55}
.pricing-card--popular .pricing-card__desc{color:rgba(232,238,251,.75)}

/* Price */
.pricing-card__price{display:flex;align-items:flex-start;gap:.1rem;line-height:1;color:var(--p-ink)}
.pricing-card--popular .pricing-card__price{color:#fff}
.pricing-card__currency{font-size:1.2rem;font-weight:700;margin-top:.35rem}
.pricing-card__amount{font-size:clamp(1.9rem,2.6vw,2.4rem);font-weight:800;letter-spacing:-.02em;padding-bottom:.1rem}
.pricing-card__period{margin:.3rem 0 .95rem;color:var(--p-muted);font-size:.84rem;font-weight:500}
.pricing-card--popular .pricing-card__period{color:rgba(232,238,251,.7)}

/* CTA — sits directly under the price; brand blue on white cards, orange on the
   dark featured card so it pops. */
.pricing-card__cta{
	display:flex;align-items:center;justify-content:center;width:100%;
	margin:0 0 1rem;padding:.75rem 1.4rem;border-radius:12px;
	font-weight:700;font-size:.93rem;color:#fff!important;text-decoration:none;
	background:linear-gradient(135deg,var(--p-blue),var(--p-blue-d));
	box-shadow:0 16px 30px -16px rgba(37,99,235,.7);
	transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
}
.pricing-card__cta:hover{transform:translateY(-2px);filter:brightness(1.05);box-shadow:0 22px 40px -16px rgba(37,99,235,.85)}
.pricing-card--popular .pricing-card__cta{
	background:linear-gradient(135deg,var(--p-orange),var(--p-orange-deep));
	box-shadow:0 16px 30px -14px rgba(224,125,59,.8);
}
.pricing-card--popular .pricing-card__cta:hover{box-shadow:0 22px 40px -14px rgba(224,125,59,.92)}
.pricing-card__note{margin:0 0 1rem;text-align:center;color:#94a3b8;font-size:.8rem}
.pricing-card--popular .pricing-card__note{color:rgba(232,238,251,.6)}

/* Features — divider above the list keeps each card tidy. */
.pricing-card__features{
	list-style:none;margin:0;padding:1rem 0 0;
	border-top:1px solid var(--p-border);
	display:grid;gap:.52rem;
}
.pricing-card--popular .pricing-card__features{border-top-color:rgba(255,255,255,.14)}
.pricing-card__features li{display:flex;align-items:center;gap:.55rem;color:#334155;font-size:.84rem;line-height:1.3}
.pricing-card--popular .pricing-card__features li{color:rgba(232,238,251,.92)}
.pricing-card__check{flex:none;color:var(--p-blue)}
.pricing-card--popular .pricing-card__check{color:var(--p-orange)}
.pricing-card__feature-text{flex:1 1 auto;min-width:0}

/* Per-feature info tooltip — icon sits flush to the right edge of the row. */
.pricing-card__tip{position:relative;flex:none;display:inline-flex;margin-left:auto}
.pricing-card__tip-btn{
	display:inline-flex;align-items:center;justify-content:center;
	width:20px;height:20px;padding:0;border-radius:50%;cursor:help;
	border:1.5px solid #cdd9ec;background:#fff;color:var(--p-muted);
	transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.pricing-card__tip-btn:hover,.pricing-card__tip-btn:focus-visible{background:var(--p-blue);border-color:var(--p-blue);color:#fff;outline:none}
.pricing-card--popular .pricing-card__tip-btn{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#cdd9ec}
.pricing-card--popular .pricing-card__tip-btn:hover{background:var(--p-orange);border-color:var(--p-orange);color:#fff}
.pricing-card__tip-bubble{
	position:absolute;bottom:calc(100% + 10px);right:-6px;z-index:5;
	width:max-content;max-width:220px;
	padding:.6rem .75rem;border-radius:10px;
	background:#0f2747;color:#fff;font-size:.8rem;line-height:1.45;font-weight:400;
	box-shadow:0 14px 30px -12px rgba(15,23,42,.5);
	opacity:0;visibility:hidden;transform:translateY(4px);
	transition:opacity .2s ease,transform .2s ease,visibility .2s;
	pointer-events:none;
}
.pricing-card__tip-bubble::after{
	content:"";position:absolute;top:100%;right:12px;
	border:6px solid transparent;border-top-color:#0f2747;
}
.pricing-card__tip:hover .pricing-card__tip-bubble,
.pricing-card__tip:focus-within .pricing-card__tip-bubble{opacity:1;visibility:visible;transform:translateY(0)}

/* ---- Responsive ------------------------------------------------------------- */
@media(max-width:992px){
	.pricing__grid{grid-template-columns:1fr;max-width:440px}
	.pricing-card--popular .pricing-card__inner{transform:none}
}
@media(max-width:600px){
	.pricing__controls{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){
	.pricing-seg__thumb,.pricing-card__inner,.pricing-card__cta{transition:none}
}

/* ============================================================================
   Closing CTA band — "Get Started with 14 Days Free Trial Now!"
   Solid brand-blue rounded promo: copy + orange button on the left, a dashboard
   image on the right, and decorative grey geometric wave lines along the bottom.
   ========================================================================== */
/* Tighten the gap to the FAQ above (scoped to the pricing page so the home
   FAQ keeps its full spacing). */
.pricing-page .section--faq{padding-bottom:clamp(.75rem,2vw,1.5rem)}
.pricing-cta{padding-block:clamp(.5rem,2vw,1.5rem) clamp(1.5rem,3.5vw,2.5rem)}
.pricing-cta__band{
	position:relative;overflow:hidden;isolation:isolate;
	display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:clamp(1.5rem,3.5vw,3rem);
	padding:clamp(2rem,3.5vw,3.25rem) clamp(1.75rem,3.5vw,3.5rem);
	border-radius:clamp(20px,2.4vw,28px);
	background:
		radial-gradient(130% 120% at 8% 8%, #1c5cc4 0%, transparent 55%),
		var(--p-logo-1);              /* solid brand blue with a soft top-left lift */
	box-shadow:0 30px 70px -34px rgba(10,61,145,.6);
}
/* Geometric wave lines, grey, pinned along the bottom of the band (decorative). */
.pricing-cta__band::after{
	content:"";position:absolute;left:0;right:0;bottom:0;z-index:0;height:62%;pointer-events:none;
	background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 260' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23cbd5e1' stroke-width='1.5' stroke-opacity='0.22'%3E%3Cpath d='M0 150 C 240 90 480 210 720 150 S 1200 90 1440 150'/%3E%3Cpath d='M0 175 C 240 115 480 235 720 175 S 1200 115 1440 175'/%3E%3Cpath d='M0 200 C 240 140 480 260 720 200 S 1200 140 1440 200'/%3E%3Cpath d='M0 225 C 240 165 480 285 720 225 S 1200 165 1440 225'/%3E%3Cpath d='M0 250 C 240 190 480 310 720 250 S 1200 190 1440 250'/%3E%3C/g%3E%3C/svg%3E") center bottom/100% 100% no-repeat;
	mask-image:linear-gradient(to top,#000 30%,transparent);
	-webkit-mask-image:linear-gradient(to top,#000 30%,transparent);
}

/* Left content */
.pricing-cta__content{position:relative;z-index:1;color:#fff;max-width:540px}
.pricing-cta__title{margin:0 0 1rem;font-weight:800;line-height:1.12;letter-spacing:-.02em;font-size:clamp(1.7rem,3.4vw,2.75rem);color:#fff}
.pricing-cta__sub{margin:0 0 1.75rem;font-size:clamp(1rem,1.5vw,1.18rem);color:rgba(255,255,255,.9);font-weight:500}
.pricing-cta__btn{
	display:inline-flex;align-items:center;gap:.6rem;
	padding:.95rem 1.9rem;border-radius:12px;
	font-weight:700;font-size:1.02rem;color:#fff!important;text-decoration:none;
	background:linear-gradient(135deg,var(--p-orange),var(--p-orange-deep));
	box-shadow:0 16px 34px -12px rgba(224,125,59,.7);
	transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
}
.pricing-cta__btn svg{flex:none;transition:transform .2s ease}
.pricing-cta__btn:hover{transform:translateY(-2px);filter:brightness(1.05);box-shadow:0 22px 40px -12px rgba(224,125,59,.85)}
.pricing-cta__btn:hover svg{transform:translateX(3px)}
.pricing-cta__tagline{margin:1.6rem 0 .35rem;font-weight:700;font-size:1.02rem;color:#fff}
.pricing-cta__terms{margin:0;font-size:.9rem;color:rgba(255,255,255,.72)}
.pricing-cta__terms a{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.pricing-cta__terms a:hover{color:#d6ecff}

/* Right media column + its image container box (image centred, height-capped
   so the whole band stays compact and fits comfortably on screen). */
.pricing-cta__media{position:relative;z-index:1;display:flex;align-items:center;justify-content:center}
.pricing-cta__media-box{position:relative;z-index:1;width:100%;max-width:560px;display:flex;align-items:center;justify-content:center}
.pricing-cta__img{display:block;width:100%;height:auto;max-height:360px;object-fit:contain;border-radius:14px;filter:drop-shadow(0 30px 45px rgba(0,0,0,.38))}
.pricing-cta__media-box--empty .pricing-cta__img-ph{
	display:flex;align-items:center;justify-content:center;
	width:100%;max-width:380px;padding:clamp(1.75rem,3.5vw,3rem);
	color:rgba(255,255,255,.9);
	background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.2);border-radius:18px;
	box-shadow:0 24px 50px -28px rgba(0,0,0,.5);
	backdrop-filter:blur(2px);
}

@media(max-width:860px){
	.pricing-cta__band{grid-template-columns:1fr;text-align:center;gap:2rem}
	.pricing-cta__content{max-width:none;margin-inline:auto}
	.pricing-cta__media{order:-1}
	.pricing-cta__media-box{max-width:440px;margin-inline:auto}
}
@media(prefers-reduced-motion:reduce){
	.pricing-cta__btn,.pricing-cta__btn svg{transition:none}
}