/* ===================================================================
   HotelNet — Pricing page (revamp)
   A dedicated, self-contained stylesheet loaded IN ADDITION to
   base.css + hotelnet.css (see pricing.html), mirroring the auth.css /
   landing-v2.css pattern. It reuses the brand tokens (--red/--peach/…),
   the shared editorial-hero / section / faq styling, the global .btn-*
   classes and the .reveal scroll-reveal — and only adds the revamped
   plan-picker (audience tabs, billing toggle, cards). Every class is
   prefixed `pr-` so nothing here leaks into the rest of the site. The
   heavier legacy `.pricing-*` / `.pc-*` rules in hotelnet.css are no
   longer referenced by this page.
   =================================================================== */

:root {
	--pr-ink:     #1A1011;   /* near-black headings                    */
	--pr-muted:   #6A5E5E;   /* body copy                              */
	--pr-line:    rgba(17, 10, 10, 0.09);
	--pr-cream:   #FBF3F0;
	--pr-radius:  20px;
	--pr-maxw:    1120px;
	--pr-shadow:  0 24px 55px -30px rgba(103, 6, 13, 0.32);
}

/* ── Plans section wrapper ─────────────────────────────────────── */
.pr-plans { padding-top: 64px; padding-bottom: 40px; }
.pr-wrap  { max-width: var(--pr-maxw); margin-inline: auto; }

/* ── Controls row: audience tabs + billing toggle ──────────────── */
.pr-controls {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	margin-bottom: 44px;
}

/* Audience segmented control */
.pr-tabs {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px;
	background: #fff;
	border: 1px solid var(--pr-line);
	border-radius: 999px;
	padding: 5px;
	box-shadow: 0 10px 28px -18px rgba(17, 10, 10, 0.35);
}
.pr-tab {
	appearance: none;
	background: none;
	border: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 11px 22px;
	border-radius: 999px;
	font-family: 'Poppins', sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: var(--dark-grey);
	white-space: nowrap;
	transition: color 0.2s ease, background 0.2s ease;
}
.pr-tab i { font-size: 13px; opacity: 0.85; }
.pr-tab:hover { color: var(--red); }
.pr-tab.is-active {
	background: var(--red);
	color: var(--peach);
	box-shadow: 0 8px 18px -8px rgba(145, 9, 17, 0.5);
}
.pr-tab.is-active i { opacity: 1; }

/* Billing (Monthly / Annual) toggle */
.pr-billing {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.pr-billing-seg {
	display: inline-flex;
	background: var(--pr-cream);
	border: 1px solid var(--pr-line);
	border-radius: 999px;
	padding: 4px;
}
.pr-billing-opt {
	appearance: none;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 8px 18px;
	border-radius: 999px;
	font-family: 'Poppins', sans-serif;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--dark-grey);
	transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.pr-billing-opt:hover { color: var(--red); }
.pr-billing-opt.is-active {
	background: #fff;
	color: var(--red);
	box-shadow: 0 4px 12px -6px rgba(17, 10, 10, 0.35);
}
.pr-save {
	display: none;   /* only surfaced while the Annual interval is selected */
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: #0a8a3a;
	background: #e3f5e9;
	padding: 5px 11px;
	border-radius: 999px;
	white-space: nowrap;
}
.pr-billing.is-annual .pr-save { display: inline-block; }

/* ── Panels — one audience shown at a time ─────────────────────── */
.pr-panel { display: none; }
.pr-panel.is-active { display: block; animation: prFade 0.35s ease; }
@keyframes prFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.pr-panel-blurb {
	max-width: 60ch;
	margin: 0 auto 40px;
	text-align: center;
	color: var(--pr-muted);
	font-size: 15px;
	line-height: 1.75;
}

/* ── Card grid ─────────────────────────────────────────────────── */
.pr-grid {
	max-width: var(--pr-maxw);
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	align-items: stretch;
	padding-top: 16px;   /* room for the straddling "Most popular" pill */
}

.pr-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--pr-line);
	border-radius: var(--pr-radius);
	padding: 32px 26px 28px;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.pr-card:hover {
	transform: translateY(-4px);
	border-color: rgba(145, 9, 17, 0.25);
	box-shadow: var(--pr-shadow);
}

/* Popular — a calm red ring + a straddling pill, not a loud gradient card. */
.pr-card.is-popular {
	border: 1.5px solid var(--red);
	box-shadow: 0 20px 44px -26px rgba(145, 9, 17, 0.4);
}
.pr-badge {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	background: var(--red);
	color: var(--peach);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 6px 15px;
	border-radius: 999px;
	white-space: nowrap;
	box-shadow: 0 10px 22px -10px rgba(145, 9, 17, 0.6);
}

.pr-name {
	font-family: 'Playfair Display', serif;
	font-weight: 800;
	font-size: 1.6rem;
	color: var(--pr-ink);
	line-height: 1;
	margin: 0 0 8px;
}
.pr-tagline {
	font-size: 13px;
	line-height: 1.6;
	color: var(--pr-muted);
	margin: 0 0 20px;
	min-height: 42px;   /* keeps the price row aligned across cards */
}

/* Price */
.pr-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.pr-cur {
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--grey);
	letter-spacing: 0.03em;
}
.pr-amount {
	font-family: 'Playfair Display', serif;
	font-weight: 800;
	font-size: 2.3rem;
	color: var(--pr-ink);
	line-height: 1;
	letter-spacing: -0.02em;
}
.pr-amount.pr-free { color: var(--red); }
.pr-unit { font-size: 12px; font-weight: 500; color: var(--grey); }

.pr-note { font-size: 12px; color: #8a7f7d; margin: 0 0 22px; min-height: 18px; }

.pr-cta {
	width: 100%;
	padding: 13px 22px;
	font-size: 13.5px;
	text-align: center;
	margin-bottom: 22px;
}

/* Features */
.pr-feats {
	list-style: none;
	margin: 0;
	padding: 22px 0 0;
	border-top: 1px solid var(--pr-line);
	flex: 1;          /* pushes the fine-print to the bottom, aligning cards */
}
.pr-feat {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--dark-grey);
	padding: 6px 0;
}
/* FontAwesome swaps <i> for <svg>; style both. Peach chip check (matches the
   landing checklist), not a bare red tick. */
.pr-feat > i,
.pr-feat > svg {
	box-sizing: content-box;
	flex-shrink: 0;
	width: 11px;
	height: 11px;
	padding: 5px;
	margin-top: 1px;
	border-radius: 7px;
	background: var(--peach);
	color: var(--red);
	font-size: 10px;
	line-height: 1;
	overflow: visible;
}
.pr-inherit {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--rosewood);
	padding: 0 0 10px;
	margin-bottom: 6px;
	border-bottom: 1px dashed var(--pr-line);
}

.pr-fine {
	font-size: 11.5px;
	color: var(--grey);
	text-align: center;
	margin: 18px 0 0;
}

/* ── Foot-note under the grid ──────────────────────────────────── */
.pr-footnote {
	max-width: 72ch;
	margin: 44px auto 0;
	text-align: center;
	font-size: 12.5px;
	line-height: 1.7;
	color: var(--grey);
}
.pr-footnote i { color: var(--red); margin-right: 6px; }

/* ===================================================================
   ENTERPRISE / GROUPS BAND  — one balanced card on a cream band:
   pitch + grouped CTA on the left, a tidy checklist panel on the right
   (no floating CTA, no empty corner).
   =================================================================== */
.pr-ent-band {
	background: var(--pr-cream);
	padding: 76px 54px;
}
.pr-ent {
	max-width: 1000px;
	margin-inline: auto;
	background: #fff;
	border: 1px solid var(--pr-line);
	border-radius: var(--pr-radius);
	box-shadow: var(--pr-shadow);
	display: grid;
	grid-template-columns: 1.12fr 0.88fr;
	overflow: hidden;
}

/* Left — the pitch, with the CTA grouped at the bottom of it */
.pr-ent-pitch { padding: 46px 44px; }
/* hotelnet.css scopes .section-eyebrow / .section-title to .editorial-section, and
   this band lives outside one — so restate that same reference treatment here (red
   uppercase eyebrow + Playfair black heading with a red italic accent) verbatim. */
.pr-ent-pitch .section-eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--red);
	margin-bottom: 14px;
}
.pr-ent-pitch .section-title {
	font-family: 'Playfair Display', serif;
	font-weight: 800;
	font-size: clamp(2rem, 3.5vw, 2.9rem);
	line-height: 1.15;
	color: var(--black);
	margin: 0 0 16px;
	max-width: none;
}
.pr-ent-pitch .section-title .accent {
	color: var(--red);
	font-style: italic;
}
.pr-ent-lead {
	color: var(--pr-muted);
	line-height: 1.8;
	font-size: 14.5px;
	margin: 0 0 28px;
	max-width: 46ch;
}
.pr-ent-cta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 13px;
}
.pr-ent-meta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	color: var(--grey);
}
.pr-ent-meta i { color: var(--red); }

/* Right — the "what's included" checklist, in a subtly inset cream panel */
.pr-ent-feats {
	background: var(--pr-cream);
	border-left: 1px solid var(--pr-line);
	padding: 46px 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.pr-ent-feats-title {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--red);
	margin: 0 0 18px;
}
.pr-ent-feats ul { list-style: none; margin: 0; padding: 0; }
.pr-ent-feats li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--dark-grey);
	padding: 8px 0;
}
.pr-ent-feats li > i,
.pr-ent-feats li > svg {
	box-sizing: content-box;
	flex-shrink: 0;
	width: 11px;
	height: 11px;
	padding: 5px;
	margin-top: 1px;
	border-radius: 7px;
	background: var(--peach);
	color: var(--red);
	font-size: 10px;
	line-height: 1;
	overflow: visible;
}

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width: 992px) {
	.pr-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
	/* Enterprise band stacks: pitch over checklist, divider flips to the top. */
	.pr-ent-band { padding: 56px 24px; }
	.pr-ent { grid-template-columns: 1fr; }
	.pr-ent-feats { border-left: none; border-top: 1px solid var(--pr-line); }
	.pr-ent-pitch, .pr-ent-feats { padding: 34px 28px; }
}
@media (max-width: 560px) {
	.pr-grid { grid-template-columns: 1fr; max-width: 380px; }
	.pr-controls { gap: 16px; }
	.pr-billing { flex-direction: column; gap: 8px; }
}

/* Respect reduced motion. */
@media (prefers-reduced-motion: reduce) {
	.pr-panel.is-active { animation: none; }
	.pr-card { transition: none; }
}