/**
 * DFS Motion — Pricing Table.
 *
 * MODE 1 = corelynxpricingtable.framer.website, 1:1. Every value below is the reference's
 * computed style at 1920x940 / 390x844 (DFS Widgets/Pricing Table/Completed Diagnostics/
 * harvest/data.json, element index in the comment) unless marked otherwise. Each value a
 * control writes is ALSO here, so an instance saved before a control existed still renders
 * the reference (the stylesheet is the floor; the control wins when set).
 *
 * THE SECTION OWNS THE BACKGROUND: the reference ground #0a0a0f (el 7) is NOT painted here.
 * The widget paints its own furniture only — cards, chips, the toggle track, the glow.
 *
 * The four reference colours built as `${hex}55` are INVALID CSS on the live page and are
 * dropped by the browser (PALETTE-AND-MOTION.md §1). The default is that render: they are
 * absent. Each ships as a Style switch, OFF (.dfs-prt--fx-*).
 */

.dfs-prt {
	--dfs-prt-g1: #7c5cfc;          /* gradientStart, el 9/14/17/20/44/64 */
	--dfs-prt-g2: #c55cfc;          /* gradientMid */
	--dfs-prt-g3: #22d3ee;          /* gradientEnd */
	--dfs-prt-grad: linear-gradient( 90deg, var( --dfs-prt-g1 ), var( --dfs-prt-g2 ), var( --dfs-prt-g3 ) );
	--dfs-prt-ink: #f5f5f8;         /* rgb(245,245,248) */
	--dfs-prt-muted: #a2a2b3;       /* rgb(162,162,179) */
	--dfs-prt-on-grad: #0a0a0f;     /* ink on the gradient, rgb(10,10,15) */
	--dfs-prt-line: #ffffff14;      /* rgba(255,255,255,.08) */
	--dfs-prt-card-bg: #ffffff05;   /* rgba(255,255,255,.02) el 24 */
	--dfs-prt-card-bg-hover: #ffffff0b; /* rgba(255,255,255,.043) hover probe, el 24 */
	--dfs-prt-card-border: #ffffff14;
	--dfs-prt-pop-border: #7c5cfc;  /* el 43, 2px */
	--dfs-prt-shadow-ink: #0000008c; /* rgba(0,0,0,.55) */
	--dfs-prt-card-shadow-hover: 0 24px 48px -18px var( --dfs-prt-shadow-ink );
	--dfs-prt-check: #7c5cfc;       /* el 35 */
	--dfs-prt-bonus: #c55cfc;       /* el 62 */
	--dfs-prt-save-ink: #22d3ee;
	--dfs-prt-save-bg: #22d3ee1f;   /* rgba(34,211,238,.12) */
	--dfs-prt-save-border: #22d3ee66; /* rgba(34,211,238,.4) */
	--dfs-prt-chip-bg: #ffffff08;   /* rgba(255,255,255,.03) el 13/19 */
	--dfs-prt-cta-bg: #ffffff0d;    /* rgba(255,255,255,.05) el 42 */
	--dfs-prt-cta-bg-hover: #ffffff0d;
	--dfs-prt-cta-ink: #f5f5f8;
	--dfs-prt-cta-border: #ffffff14;
	/* motion (Style -> Motion writes these) */
	--dfs-prt-in-dur: 0.55s;        /* coreLynxFadeUp */
	--dfs-prt-in-step: 0.12s;       /* card stagger */
	--dfs-prt-row-dur: 0.4s;        /* coreLynxCheckIn */
	--dfs-prt-row-step: 0.05s;      /* row stagger */
	--dfs-prt-head-dur: 0.6s;       /* header + toggle entrance */
	--dfs-prt-drift-title: 6s;      /* coreLynxPricingDrift, el 17 */
	--dfs-prt-drift-glow: 14s;      /* coreLynxPricingDrift, el 9 */
	--dfs-prt-hover-dur: 0.35s;     /* card hover, el 24 transition */
	--dfs-prt-cta-dur: 0.25s;       /* el 42 transition */
	--dfs-prt-pill-dur: 0.35s;      /* el 20 transition */
	--dfs-prt-price-dur: 0.4s;      /* price re-entry on billing switch */

	position: relative;
	display: flex;
	justify-content: center;
	overflow: hidden;               /* el 7 */
	width: 100%;
	font-family: sans-serif; /* the reference declaration verbatim: Arial / Arial Black on Windows (CDP), the platform sans elsewhere */
	line-height: normal;            /* every reference element computes normal; the theme body sets 1.5 */
	-webkit-font-smoothing: antialiased;
}

.dfs-prt *,
.dfs-prt *::before,
.dfs-prt *::after {
	box-sizing: border-box;
}

/* ------------------------------------------------------------------ glow, el 9 */
.dfs-prt__glow {
	position: absolute;
	top: 30%;                       /* 316.2 / 1055 at 1920; 662.3 / 2208.6 at 390 */
	left: 50%;
	width: 60%;                     /* 234 / 390 */
	max-width: 900px;
	height: 350px;
	transform: translateX( -50% );
	background-image: var( --dfs-prt-grad );
	background-size: 160% 160%;     /* SRC (PALETTE §2) */
	opacity: 0.14;                  /* el 9 */
	filter: blur(130px);            /* el 9 */
	z-index: 2;
	pointer-events: none;
}

/* ------------------------------------------------------------------ inner, el 10 */
.dfs-prt__inner {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: 1200px;
	padding: 90px 28px;
}

/* ------------------------------------------------------------------ header, el 12-18 */
.dfs-prt__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 850px;
	margin: 0 0 48px;
	text-align: center;
}

.dfs-prt__eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 20px;
	padding: 6px 14px;
	border: 1px solid var( --dfs-prt-line );
	border-radius: 999px;
	background-color: var( --dfs-prt-chip-bg );
}

.dfs-prt__chip {
	padding: 2px 8px;
	border-radius: 999px;
	background-image: var( --dfs-prt-grad );
	color: var( --dfs-prt-chip-ink, var( --dfs-prt-on-grad ) );
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.05em;         /* 0.5px */
	text-transform: uppercase;
}

.dfs-prt__eyebrow-text {
	color: var( --dfs-prt-ink );
	font-size: 13px;
	font-weight: 500;
}

.dfs-prt .dfs-prt__title {
	margin: 0 0 18px;
	padding: 0;
	color: var( --dfs-prt-ink );
	font-family: inherit;
	font-size: 52px;
	font-weight: 800;
	line-height: 1.1em;             /* 57.2px */
	letter-spacing: -0.03em;        /* -1.56px */
	text-transform: none;
}

.dfs-prt__hl {
	background-image: var( --dfs-prt-grad );
	background-size: 200% auto;     /* SRC */
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.dfs-prt .dfs-prt__sub {
	margin: 0;
	color: var( --dfs-prt-muted );
	font-size: 18px;
	font-weight: 400;
	line-height: 1.6em;             /* 28.8px */
}

/* 5.192.0 — optional Toggle Title; only rendered when set. Defaults mirror the features label. */
.dfs-prt .dfs-prt__toggle-title {
	margin: 0 0 12px;
	color: var( --dfs-prt-muted );
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	line-height: normal;
	letter-spacing: 0.08em;
	text-align: center;
	text-transform: uppercase;
}

/* ------------------------------------------------------------------ toggle, el 19-22 */
.dfs-prt__toggle {
	position: relative;
	display: flex;
	flex-direction: var( --dfs-prt-tg-dir, row );
	align-items: var( --dfs-prt-tg-ai, center );
	gap: 0;
	width: var( --dfs-prt-tg-w, auto ); /* Toggle Width control; auto = no width set */
	max-width: 440px;
	margin: 0 0 64px;
	padding: 6px;
	border: 1px solid var( --dfs-prt-toggle-line, var( --dfs-prt-line ) );
	border-radius: 999px;
	background-color: var( --dfs-prt-toggle-bg, var( --dfs-prt-chip-bg ) );
}

.dfs-prt__pill {
	position: absolute;
	top: 6px;
	left: 0;
	width: 0;
	height: 36px;
	border-radius: 999px;
	background-image: var( --dfs-prt-grad );
	transform: translateX( 7px );   /* el 20 rest matrix tx 7 */
	transition: transform var( --dfs-prt-pill-dur ) cubic-bezier( 0.65, 0, 0.35, 1 ), top var( --dfs-prt-pill-dur ) cubic-bezier( 0.65, 0, 0.35, 1 ), height var( --dfs-prt-pill-dur ) cubic-bezier( 0.65, 0, 0.35, 1 );
	z-index: 1;
	pointer-events: none;
}

.dfs-prt .dfs-prt__opt {
	position: relative;
	z-index: 2;
	flex: var( --dfs-prt-opt-flex, 0 0 auto );
	margin: 0;
	--dfs-prt-opt-pr-eff: var( --dfs-prt-opt-pr, 22px );
	--dfs-prt-opt-pl-eff: var( --dfs-prt-opt-pl, 22px );
	padding: var( --dfs-prt-opt-pt, 10px ) var( --dfs-prt-opt-pr-eff ) var( --dfs-prt-opt-pb, 10px ) var( --dfs-prt-opt-pl-eff );
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var( --dfs-prt-muted );
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: normal;
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
	transition: color var( --dfs-prt-pill-dur ) ease;
}

.dfs-prt .dfs-prt__opt:hover,
.dfs-prt .dfs-prt__opt:focus {
	background: transparent;
	color: var( --dfs-prt-opt-hover, var( --dfs-prt-muted ) );
}

.dfs-prt .dfs-prt__opt[aria-pressed="true"],
.dfs-prt .dfs-prt__opt[aria-pressed="true"]:hover,
.dfs-prt .dfs-prt__opt[aria-pressed="true"]:focus {
	color: var( --dfs-prt-opt-active, var( --dfs-prt-on-grad ) );
}

.dfs-prt .dfs-prt__opt:focus-visible {
	outline: 2px solid var( --dfs-prt-g3 );
	outline-offset: 2px;
}

/* no-JS: the pill cannot be measured, so the pressed button carries the gradient itself */
.dfs-prt:not( .dfs-prt--live ) .dfs-prt__opt[aria-pressed="true"] {
	background-image: var( --dfs-prt-grad );
}

/* ------------------------------------------------------------------ grid + cards, el 23-85 */
.dfs-prt[data-billing="monthly"] .dfs-prt__card--only-annual,
.dfs-prt[data-billing="annual"] .dfs-prt__card--only-monthly { display: none; }

.dfs-prt__grid {
	display: grid;
	grid-template-columns: repeat( var( --dfs-prt-cols, 3 ), minmax( 0, 1fr ) );
	gap: 24px;
	align-items: stretch;
	width: 100%;
}

.dfs-prt__card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overflow: hidden;
	padding: 36px;
	border: var( --dfs-prt-card-bw, 1px ) solid var( --dfs-prt-card-border );
	border-radius: 24px;
	background-color: var( --dfs-prt-card-bg );
	transition: border-color var( --dfs-prt-hover-dur ) ease, transform var( --dfs-prt-hover-dur ) ease, background var( --dfs-prt-hover-dur ) ease, box-shadow var( --dfs-prt-hover-dur ) ease;
}

.dfs-prt__card.is-popular {
	border: var( --dfs-prt-pop-bw, 2px ) solid var( --dfs-prt-pop-border );
}

/* The reference's hover transform beats its entrance animation's fill (MEASURED: hover probe
   moved el 24 by -6px while coreLynxFadeUp held `both`), so the hover transform is !important —
   an animation's fill otherwise outranks every normal declaration. */
.dfs-prt--hover .dfs-prt__card:hover {
	transform: translateY( -6px ) !important;
	background-color: var( --dfs-prt-card-bg-hover );
	box-shadow: var( --dfs-prt-card-shadow-hover );
}

.dfs-prt--hover .dfs-prt__card.is-popular:hover {
	transform: translateY( -8px ) scale( 1.015 ) !important;
}

.dfs-prt__badge {
	position: absolute;
	top: 20px;                      /* el 44: 427 - 405 - 2px border */
	right: 24px;                    /* 1142.6 - 1116.6 - 2px border */
	z-index: 1;
	padding: 4px 12px;
	border-radius: 999px;
	background-image: var( --dfs-prt-grad );
	color: var( --dfs-prt-on-grad );
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;         /* 0.55px */
	text-transform: uppercase;
}

.dfs-prt__body {
	position: relative;
	z-index: 1;
}

.dfs-prt .dfs-prt__name {
	margin: 0 0 8px;
	padding: 0;
	color: var( --dfs-prt-ink );
	font-family: inherit;
	font-size: 22px;
	font-weight: 700;
	line-height: normal;
	letter-spacing: -0.02em;        /* -0.44px */
	text-transform: none;
}

.dfs-prt .dfs-prt__desc {
	margin: 0 0 28px;
	color: var( --dfs-prt-muted );
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5em;             /* 21px */
}

.dfs-prt__price-row {
	display: flex;
	align-items: baseline;
	gap: 8px;
	min-height: 62px;               /* el 28: 62px tall at every rung */
	margin: 0 0 12px;
}

.dfs-prt__price {
	display: inline-block;
	color: var( --dfs-prt-ink );
	font-size: 44px;
	font-weight: 800;
	line-height: normal;
	letter-spacing: -0.03em;        /* -1.32px */
}

.dfs-prt__period {
	color: var( --dfs-prt-muted );
	font-size: 14px;
	font-weight: 400;
}

/* Annual only. SAMPLED OFF keyframes/interaction-1920-0-3-after.png (_tools/dfs-extract/px-mask.mjs):
   top edge 8px below the price row, 20px tall, divider moves 28px. */
.dfs-prt__save {
	display: block;
	width: fit-content;
	margin: -4px 0 0;
	padding: 2px 8px;
	border: 1px solid var( --dfs-prt-save-border );
	border-radius: 999px;
	background-color: var( --dfs-prt-save-bg );
	color: var( --dfs-prt-save-ink );
	font-size: 11px;
	font-weight: 700;
	line-height: 14px;
	transform-origin: 0 50%;
	animation: dfs-prt-pop 0.5s cubic-bezier( 0.34, 1.56, 0.64, 1 ) both; /* coreLynxBadgePop, plays on mount */
}

.dfs-prt__rule {
	height: 1px;
	margin: 16px 0 28px;
	background-color: var( --dfs-prt-divider, var( --dfs-prt-line ) );
}

.dfs-prt__features {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0 0 20px;
}

.dfs-prt__features-label {
	color: var( --dfs-prt-muted );
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;         /* 0.96px */
	text-transform: uppercase;
}

.dfs-prt__row {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var( --dfs-prt-ink );
	font-size: 14px;
	font-weight: 400;
}

.dfs-prt__check {
	flex: 0 0 auto;
	color: var( --dfs-prt-check );
	font-size: 14px;
	font-weight: 700;
}

.dfs-prt__bonus {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 24px;
	padding: 10px 12px;
	border: 1px dashed transparent;
	border-width: 0;
	border-radius: 10px;
	color: var( --dfs-prt-bonus );
	font-size: 13px;
	font-weight: 600;
}

/* ------------------------------------------------------------------ CTA, el 42 / 64 / 85 */
.dfs-prt .dfs-prt__cta {
	position: relative;
	z-index: 1;
	display: block;
	padding: 14px 20px;
	border: 1px solid var( --dfs-prt-cta-border );
	border-radius: 12px;
	background-color: var( --dfs-prt-cta-bg );
	color: var( --dfs-prt-cta-ink );
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: normal;
	text-align: center;
	text-decoration: none;
	transition: transform var( --dfs-prt-cta-dur ) ease, box-shadow var( --dfs-prt-cta-dur ) ease, filter var( --dfs-prt-cta-dur ) ease, background var( --dfs-prt-cta-dur ) ease;
}

.dfs-prt .dfs-prt__cta.is-primary {
	border: 0;
	background-color: transparent;
	background-image: var( --dfs-prt-grad );
	color: var( --dfs-prt-on-grad );
}

.dfs-prt .dfs-prt__cta:hover,
.dfs-prt .dfs-prt__cta:focus-visible {
	transform: translateY( -2px );
	filter: brightness( 1.08 );
	color: var( --dfs-prt-cta-ink-hover, var( --dfs-prt-cta-ink ) );
	border-color: var( --dfs-prt-cta-border-hover, var( --dfs-prt-cta-border ) );
	background-color: var( --dfs-prt-cta-bg-hover );
}

.dfs-prt .dfs-prt__cta.is-primary:hover,
.dfs-prt .dfs-prt__cta.is-primary:focus-visible {
	background-color: transparent;
	color: var( --dfs-prt-on-grad );
}

/* Chevron After Text (5.193.8): sized off the label, nudges right on hover. */
.dfs-prt .dfs-prt__cta-chev {
	display: inline-block;
	width: .5em;
	height: .8em;
	margin-left: .55em;
	vertical-align: -.02em;
	transition: transform var( --dfs-prt-cta-dur ) ease;
}
.dfs-prt .dfs-prt__cta:hover .dfs-prt__cta-chev,
.dfs-prt .dfs-prt__cta:focus-visible .dfs-prt__cta-chev {
	transform: translateX( 3px );
}

.dfs-prt .dfs-prt__cta:active {
	transform: translateY( 0 ) scale( 0.98 );
}

.dfs-prt .dfs-prt__cta:focus-visible {
	outline: 2px solid var( --dfs-prt-g3 );
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ intent effects, OFF by default */
.dfs-prt--fx-pop-glow .dfs-prt__card.is-popular {
	box-shadow: 0 0 60px -20px var( --dfs-prt-pop-glow, #7c5cfc55 );
}

.dfs-prt--fx-bonus-box .dfs-prt__bonus {
	border-width: 1px;
	border-color: var( --dfs-prt-bonus-box-border, #7c5cfc55 );
	background-color: var( --dfs-prt-bonus-box-bg, #7c5cfc14 );
}

.dfs-prt--fx-hover-border.dfs-prt--hover .dfs-prt__card:hover {
	border-color: var( --dfs-prt-hover-border, #7c5cfc88 );
}

.dfs-prt--fx-cta-glow .dfs-prt__cta.is-primary:hover {
	box-shadow: 0 12px 30px -10px var( --dfs-prt-cta-glow, #7c5cfc77 );
}

/* ------------------------------------------------------------------ motion */
@keyframes dfs-prt-drift {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

@keyframes dfs-prt-fade-up {
	0% { opacity: 0; transform: translateY( 24px ); }
	100% { opacity: 1; transform: translateY( 0 ); }
}

@keyframes dfs-prt-rise-14 {
	0% { opacity: 0; transform: translateY( 14px ); }
	100% { opacity: 1; transform: translateY( 0 ); }
}

@keyframes dfs-prt-rise-10 {
	0% { opacity: 0; transform: translateY( 10px ); }
	100% { opacity: 1; transform: translateY( 0 ); }
}

@keyframes dfs-prt-price {
	0% { opacity: 0; transform: translateY( 6px ); }
	100% { opacity: 1; transform: translateY( 0 ); }
}

@keyframes dfs-prt-pop {
	0% { opacity: 0; transform: scale( 0.6 ); }
	60% { opacity: 1; transform: scale( 1.08 ); }
	100% { opacity: 1; transform: scale( 1 ); }
}

@keyframes dfs-prt-check-in {
	0% { opacity: 0; transform: translateX( -6px ); }
	100% { opacity: 1; transform: translateX( 0 ); }
}

.dfs-prt--drift .dfs-prt__hl {
	animation: dfs-prt-drift var( --dfs-prt-drift-title ) ease-in-out infinite;
}

.dfs-prt--drift .dfs-prt__glow {
	animation: dfs-prt-drift var( --dfs-prt-drift-glow ) ease-in-out infinite;
}

/* The price re-enters on every billing switch (reference: React re-keys the span). */
.dfs-prt--price-fade .dfs-prt__price {
	animation: dfs-prt-price var( --dfs-prt-price-dur ) ease both;
}

/*
 * ENTRANCE — plays when the widget enters the viewport (Brad 2026-10-01; the reference plays
 * on mount). The inline boot script adds --armed (every entrance held at its first frame);
 * the widget script adds --run when ScrollTrigger sees the widget. Without JS neither class
 * exists, so nothing is held and the widget is simply there.
 */
.dfs-prt--armed .dfs-prt__head {
	animation: dfs-prt-rise-14 var( --dfs-prt-head-dur ) ease both;
}

.dfs-prt--armed .dfs-prt__toggle {
	animation: dfs-prt-rise-10 var( --dfs-prt-head-dur ) ease calc( var( --dfs-prt-head-dur ) / 6 ) both;
}

.dfs-prt--armed .dfs-prt__card {
	animation: dfs-prt-fade-up var( --dfs-prt-in-dur ) cubic-bezier( 0.22, 1, 0.36, 1 ) calc( var( --i, 0 ) * var( --dfs-prt-in-step ) ) both;
}

.dfs-prt--armed .dfs-prt__row {
	animation: dfs-prt-check-in var( --dfs-prt-row-dur ) ease calc( var( --i, 0 ) * var( --dfs-prt-in-step ) + var( --n, 0 ) * var( --dfs-prt-row-step ) ) both;
}

.dfs-prt--armed .dfs-prt__bonus {
	animation: dfs-prt-check-in var( --dfs-prt-row-dur ) ease calc( var( --i, 0 ) * var( --dfs-prt-in-step ) + 0.3s ) both;
}

/* 5.193.12 — after a billing switch nothing re-enters but the price (see setBilling). */
.dfs-prt--armed.dfs-prt--switched .dfs-prt__card,
.dfs-prt--armed.dfs-prt--switched .dfs-prt__row,
.dfs-prt--armed.dfs-prt--switched .dfs-prt__bonus {
	animation: none;
}

.dfs-prt--armed:not( .dfs-prt--run ) .dfs-prt__head,
.dfs-prt--armed:not( .dfs-prt--run ) .dfs-prt__toggle,
.dfs-prt--armed:not( .dfs-prt--run ) .dfs-prt__card,
.dfs-prt--armed:not( .dfs-prt--run ) .dfs-prt__row,
.dfs-prt--armed:not( .dfs-prt--run ) .dfs-prt__bonus {
	animation-play-state: paused;
}

/* House reduced-motion guard (the token every DFS widget carries since 5.100.0). */
@media ( prefers-reduced-motion: reduce ) and (dfs-reduced-motion-honoured) {
	.dfs-prt *,
	.dfs-prt__glow {
		animation: none !important;
		transition: none !important;
	}
}

/* ------------------------------------------------------------------ phone (reference flips at 810;
   Elementor's mobile breakpoint is 767 — DEVIATIONS.md) */
/* UI audit 2026-10-06: the columns / title / subtitle rules that sat here repeated controls that already carry a mobile default
   (columns, title_typography, subtitle_typography) - a control and a media query may not write the same property. */
@media ( max-width: 767px ) {
	.dfs-prt__toggle {
		width: var( --dfs-prt-tg-w, 100% ); /* el 19 at 390: 334 = column width; Toggle Width overrides */
	}

	/* Long labels must never push an option past the toggle: options shrink only when they have to (a row that
	   fits is untouched), and their text wraps instead of overflowing. */
	.dfs-prt .dfs-prt__opt {
		flex: var( --dfs-prt-opt-flex, 0 1 auto );
		min-width: 0;
		white-space: normal;
		text-align: center;
	}
}

/* Below the 390 rung the reference's toggle labels (144 + 216 px in Arial) run past a 304-319px toggle and off the
   screen at 375/360. Here only, the options share the row and wrap, and the pill follows the taller row. 390 and up
   are untouched. */
@media ( max-width: 389px ) {
	.dfs-prt .dfs-prt__opt {
		flex: var( --dfs-prt-opt-flex, 1 1 0 );
		min-width: 0;
		--dfs-prt-opt-pr-eff: 10px;
		--dfs-prt-opt-pl-eff: 10px;
		white-space: normal;
		text-align: center;
	}

	.dfs-prt__pill {
		height: auto;
		bottom: 6px;
	}
}

/* ------------------------------------------------------------------ MODE 2 — BOOKING (Ignite, 2026-10-20)
   One stay: occupancy x rate toggles, a payment card (radio options + one button whose link follows the
   choice) and a what's-included card. Built from the Plans furniture (toggle, card, name, price, rule,
   features label, rows, CTA), so every Style control that dresses Mode 1 dresses this too. */
.dfs-prt--booking .dfs-prt__bk-toggles {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 48px;
	width: 100%;
}

.dfs-prt--booking .dfs-prt__bk-group {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.dfs-prt--booking .dfs-prt__bk-group[hidden] {
	display: none;
}

/* Each card is one third of the row less the gaps - the width a card has in the 3-up Plans layout - and the
   pair sits centred (Brad 2026-10-20: the wide cards looked bad). */
.dfs-prt__bk-grid {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, calc( ( 100% - 48px ) / 3 ) ) );
	justify-content: center;
	gap: 24px;
	align-items: stretch;
	width: 100%;
	max-width: var( --dfs-prt-bk-max, 1600px );
}

.dfs-prt--booking .dfs-prt__desc {
	min-height: 0;
	margin-bottom: 20px;
}

.dfs-prt--booking .dfs-prt__price-row {
	min-height: 0;
	margin-bottom: 4px;
}

.dfs-prt .dfs-prt__bk-pp {
	margin: 0;
	color: var( --dfs-prt-muted );
	font-size: 14px;
	line-height: 1.4;
}

.dfs-prt .dfs-prt__bk-pp[hidden],
.dfs-prt .dfs-prt__bk-sub[hidden] {
	display: none;
}

.dfs-prt--booking .dfs-prt__rule {
	margin: 20px 0 22px;
}

.dfs-prt .dfs-prt__bk-pay {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
	margin: 0 0 24px;
	padding: 0;
	border: 0;
}

.dfs-prt .dfs-prt__bk-pay legend {
	float: left;                    /* a floated legend sits inside the fieldset like any block */
	width: 100%;
	margin: 0 0 4px;
	padding: 0;
}

.dfs-prt .dfs-prt__bk-pay legend + * {
	clear: both;
}

.dfs-prt .dfs-prt__bk-bal-title {
	margin: 12px 0 0;
}

.dfs-prt .dfs-prt__bk-opt {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 14px 16px;
	border: 1px solid var( --dfs-prt-bk-opt-line, var( --dfs-prt-divider, var( --dfs-prt-line ) ) );
	border-radius: 14px;
	color: var( --dfs-prt-ink );
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.35;
	cursor: pointer;
	transition: border-color var( --dfs-prt-cta-dur ) ease, background-color var( --dfs-prt-cta-dur ) ease;
}

.dfs-prt .dfs-prt__bk-opt:hover {
	border-color: var( --dfs-prt-bk-on, var( --dfs-prt-g1 ) );
}

.dfs-prt .dfs-prt__bk-opt.is-on {
	border-color: var( --dfs-prt-bk-on, var( --dfs-prt-g1 ) );
	background-color: var( --dfs-prt-bk-on-bg, color-mix( in srgb, var( --dfs-prt-bk-on, var( --dfs-prt-g1 ) ) 7%, transparent ) );
}

.dfs-prt .dfs-prt__bk-radio {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.dfs-prt .dfs-prt__bk-dot {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border: 2px solid var( --dfs-prt-muted );
	border-radius: 50%;
	transition: border-color var( --dfs-prt-cta-dur ) ease, box-shadow var( --dfs-prt-cta-dur ) ease;
}

.dfs-prt .dfs-prt__bk-opt.is-on .dfs-prt__bk-dot {
	border-color: var( --dfs-prt-bk-on, var( --dfs-prt-g1 ) );
	box-shadow: inset 0 0 0 3px var( --dfs-prt-card-bg ), inset 0 0 0 9px var( --dfs-prt-bk-on, var( --dfs-prt-g1 ) );
}

.dfs-prt .dfs-prt__bk-radio:focus-visible + .dfs-prt__bk-dot {
	outline: 2px solid var( --dfs-prt-bk-on, var( --dfs-prt-g1 ) );
	outline-offset: 3px;
}

.dfs-prt .dfs-prt__bk-txt {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.dfs-prt .dfs-prt__bk-sub {
	color: var( --dfs-prt-muted );
	font-size: 13px;
	font-weight: 400;
}

.dfs-prt .dfs-prt__bk-amt {
	flex: 0 0 auto;
	font-size: 15px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.dfs-prt .dfs-prt__bk-notes {
	margin: 8px 0 0;
	padding: 18px 0 0;
	border-top: 1px solid var( --dfs-prt-divider, var( --dfs-prt-line ) );
}

.dfs-prt .dfs-prt__bk-notes p {
	margin: 0 0 6px;
	color: var( --dfs-prt-bk-notes, var( --dfs-prt-muted ) );
	font-size: 13px;
	line-height: 1.5;
}

.dfs-prt .dfs-prt__bk-notes p:last-child {
	margin-bottom: 0;
}

/* The payment card is worked inside (radios), so its hover lift only translates — a scale blurs the text the
   visitor is reading. On touch a tap leaves :hover stuck and the lifted card was clipped by the root's
   overflow (measured 390: card 18-372 in a 20-370 column), so touch gets no lift at all. */
.dfs-prt--booking.dfs-prt--hover .dfs-prt__card.is-popular:hover {
	transform: translateY( -6px ) !important;
}

@media ( hover: none ) {
	.dfs-prt--booking.dfs-prt--hover .dfs-prt__card:hover,
	.dfs-prt--booking.dfs-prt--hover .dfs-prt__card.is-popular:hover {
		transform: none !important;
		box-shadow: none;
	}
}

@media ( max-width: 1024px ) {
	.dfs-prt__bk-grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 880px ) {
	.dfs-prt__bk-grid {
		grid-template-columns: minmax( 0, 1fr );
	}
}

@media ( max-width: 767px ) {
	.dfs-prt--booking .dfs-prt__bk-toggles {
		flex-direction: column;
		align-items: center;
	}

	.dfs-prt .dfs-prt__bk-opt {
		gap: 12px;
		padding: 13px 14px;
	}
}

/* ------------------------------------------------------------------ MODE 3 — PRICE SELECTOR (Ignite, 2026-10-20)
   One centred card of plain radio lists (Nicole's 10-20 layout, variation 1). Card, name, price and CTA are the
   Plans furniture, so their Style sections dress this too; everything else is .dfs-prt__ps-*. */
.dfs-prt--selector {
	--dfs-prt-ps-acc: var( --dfs-prt-bk-on, var( --dfs-prt-g1 ) );
}

.dfs-prt--selector .dfs-prt__ps {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	width: 100%;
	max-width: 720px;
	margin: 0 auto;
	padding: 36px;
	text-align: left;
}

.dfs-prt--selector .dfs-prt__ps-heading {
	margin: 0 0 24px;
	font-size: 22px;
	font-weight: 500;
}

.dfs-prt .dfs-prt__ps-group {
	display: flex;
	flex-direction: column;
	gap: var( --dfs-prt-ps-opt-gap, 14px );
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.dfs-prt .dfs-prt__ps-group[hidden],
.dfs-prt .dfs-prt__ps-opt[hidden],
.dfs-prt .dfs-prt__ps-note[hidden],
.dfs-prt .dfs-prt__ps-pricebox[hidden],
.dfs-prt .dfs-prt__ps-plabel[hidden],
.dfs-prt .dfs-prt__ps-sub[hidden] {
	display: none;
}

.dfs-prt .dfs-prt__ps-legend {
	float: left;                    /* a floated legend sits inside the fieldset like any block */
	width: 100%;
	margin: 0;
	padding: 0;
	color: var( --dfs-prt-ps-acc );
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.dfs-prt .dfs-prt__ps-legend + * {
	clear: both;
}

.dfs-prt .dfs-prt__ps-rule {
	flex: 0 0 auto;
	height: 1px;
	margin: var( --dfs-prt-ps-gap, 26px ) 0;
	background-color: var( --dfs-prt-divider, color-mix( in srgb, var( --dfs-prt-ink ) 15%, transparent ) )   /* 15% of the text: a hairline on light and dark cards alike */;
}

.dfs-prt .dfs-prt__ps-opt {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	color: var( --dfs-prt-ink );
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.35;
	cursor: pointer;
}

.dfs-prt .dfs-prt__ps-radio {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.dfs-prt .dfs-prt__ps-dot {
	position: relative;
	flex: 0 0 auto;
	width: var( --dfs-prt-ps-dot-size, 20px );
	height: var( --dfs-prt-ps-dot-size, 20px );
	border: 1.5px solid var( --dfs-prt-ps-ring, var( --dfs-prt-muted ) );
	border-radius: 50%;
	transition: border-color var( --dfs-prt-cta-dur ) ease;
}

.dfs-prt .dfs-prt__ps-dot::after {
	position: absolute;
	inset: 20%;
	border-radius: 50%;
	background-color: var( --dfs-prt-ps-dot, var( --dfs-prt-ps-acc ) );
	content: "";
	transform: scale( 0 );
	transition: transform var( --dfs-prt-cta-dur ) ease;
}

.dfs-prt .dfs-prt__ps-opt:hover .dfs-prt__ps-dot,
.dfs-prt .dfs-prt__ps-opt.is-on .dfs-prt__ps-dot {
	border-color: var( --dfs-prt-ps-dot, var( --dfs-prt-ps-acc ) );
}

.dfs-prt .dfs-prt__ps-opt.is-on .dfs-prt__ps-dot::after {
	transform: scale( 1 );
}

.dfs-prt .dfs-prt__ps-radio:focus-visible + .dfs-prt__ps-dot {
	outline: 2px solid var( --dfs-prt-ps-dot, var( --dfs-prt-ps-acc ) );
	outline-offset: 3px;
}

.dfs-prt .dfs-prt__ps-txt {
	flex: 1 1 auto;
	min-width: 0;
}

.dfs-prt .dfs-prt__ps-note {
	margin: 14px 0 0;
	padding: 12px 14px;
	border-radius: 10px;
	background-color: color-mix( in srgb, var( --dfs-prt-ps-acc ) 7%, transparent );
	color: var( --dfs-prt-muted );
	font-size: 14px;
	line-height: 1.5;
}

.dfs-prt .dfs-prt__ps-pricebox {
	margin: 22px 0 0;
}

.dfs-prt .dfs-prt__ps-plabel {
	margin: 0 0 6px;
	color: var( --dfs-prt-muted );
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.dfs-prt--selector .dfs-prt__ps-pricebox .dfs-prt__price {
	display: block;
}

.dfs-prt .dfs-prt__ps-sub {
	margin: 6px 0 0;
	color: var( --dfs-prt-muted );
	font-size: 14px;
}

.dfs-prt--selector .dfs-prt__ps-cta {
	margin-top: 28px;
}

.dfs-prt .dfs-prt__ps-foot {
	width: 100%;
	max-width: 720px;
	margin: 22px auto 0;
	color: var( --dfs-prt-muted );
	font-size: 14px;
	line-height: 1.6;
	text-align: center;
}

/* The card is worked inside (radios): its hover lift only translates, and touch gets none (see Mode 2). */
.dfs-prt--selector.dfs-prt--hover .dfs-prt__card.is-popular:hover {
	transform: translateY( -6px ) !important;
}

@media ( hover: none ) {
	.dfs-prt--selector.dfs-prt--hover .dfs-prt__card:hover,
	.dfs-prt--selector.dfs-prt--hover .dfs-prt__card.is-popular:hover {
		transform: none !important;
		box-shadow: none;
	}
}

@media ( max-width: 767px ) {
	.dfs-prt--selector .dfs-prt__ps {
		padding: 22px 18px;
	}

	.dfs-prt .dfs-prt__ps-opt {
		font-size: 15px;
	}
}

/* List 5 — the follow-up under List 1 (e.g. who shares the room). Absent until a List 5 choice exists. */
.dfs-prt .dfs-prt__ps-group[data-list="g5"] {
	margin-top: 22px;
}

.dfs-prt--ps-nest .dfs-prt__ps-group[data-list="g5"] {
	margin-top: 14px;
	margin-left: 9px;                /* the bar runs through the centre of a 20px dot */
	padding: 2px 0 2px 24px;
	border-left: 2px solid var( --dfs-prt-ps-dot, var( --dfs-prt-ps-acc ) );
}

/* Variation 2 savings pill on the paired room (Choices → Savings Pill On Paired Room). Absent unless switched on. */
.dfs-prt .dfs-prt__ps-save {
	display: inline-block;
	margin-left: 10px;
	padding: 3px 10px;
	border-radius: 999px;
	background-color: color-mix( in srgb, currentColor 12%, transparent );
	color: var( --dfs-prt-ps-dot, var( --dfs-prt-ps-acc ) );
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.35;
	text-transform: uppercase;
	vertical-align: 2px;
	white-space: nowrap;
}

.dfs-prt .dfs-prt__ps-save[hidden] {
	display: none;
}

/* Lists 1 & 5 as cards (Choices → Lists 1 & 5 As Cards) */
.dfs-prt--ps-tiles .dfs-prt__ps-group:is( [data-list="g1"], [data-list="g5"] ):not( [hidden] ) {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 200px, 1fr ) );
	gap: 12px;
}

.dfs-prt--ps-tiles .dfs-prt__ps-group:is( [data-list="g1"], [data-list="g5"] ) .dfs-prt__ps-legend {
	grid-column: 1 / -1;
	float: none;
	margin-bottom: 2px;
}

.dfs-prt--ps-tiles .dfs-prt__ps-group:is( [data-list="g1"], [data-list="g5"] ) .dfs-prt__ps-opt {
	align-items: flex-start;
	padding: 16px 18px;
	border: 1.5px solid color-mix( in srgb, var( --dfs-prt-ink ) 18%, transparent );
	border-radius: 12px;
	transition: border-color var( --dfs-prt-cta-dur ) ease, background-color var( --dfs-prt-cta-dur ) ease;
}

.dfs-prt--ps-tiles .dfs-prt__ps-group:is( [data-list="g1"], [data-list="g5"] ) .dfs-prt__ps-opt:hover,
.dfs-prt--ps-tiles .dfs-prt__ps-group:is( [data-list="g1"], [data-list="g5"] ) .dfs-prt__ps-opt.is-on {
	border-color: var( --dfs-prt-ps-dot, var( --dfs-prt-ps-acc ) );
}

.dfs-prt--ps-tiles .dfs-prt__ps-group:is( [data-list="g1"], [data-list="g5"] ) .dfs-prt__ps-opt.is-on {
	background-color: color-mix( in srgb, var( --dfs-prt-ps-acc ) 7%, transparent );
}