/* ==========================================================================
   ProTraderSignals — 2026 layout
   --------------------------------------------------------------------------
   Applies the approved ProTrader Private Futures Accounts design to the
   existing site: header, footer and the home page.

   Nothing here changes content, links or behaviour — every rule is layout
   and presentation only, targeting the markup the CMS already emits.

   Loaded last: ASP.NET themes include App_Themes files alphabetically, and
   "zzz-" sorts after every existing stylesheet, so these rules win without
   editing any of them.
   ========================================================================== */

:root {
	--pts-navy:       #002133;
	--pts-navy-deep:  #001a27;
	--pts-blue:       #00567f;
	--pts-blue-mid:   #2f7fa8;
	--pts-sky:        #59a4c7;
	--pts-sky-light:  #9ad7f0;
	--pts-bg:         #f2f3f5;
	--pts-bg-alt:     #eef2f5;
	--pts-line:       #e3e8ec;
	--pts-ink:        #1f2a30;
	--pts-radius:     8px;
	--pts-width:      1320px;
}

/* Shared page rhythm ------------------------------------------------------ */

body.seo_version {
	font-family: 'Ubuntu', 'Segoe UI', Arial, sans-serif;
	color: var(--pts-ink);
	background: #ffffff;
}

.pts-topbar__inner,
.pts-footer__inner,
.pts-copyright__inner,
.pts-header .container,
#home .container,
.wb .section > .container,
.icon-section .container,
#about .container,
#case .container,
#cancel .container,
#pricing .container {
	width: 100%;
	max-width: var(--pts-width);
	margin: 0 auto;
	padding-left: 24px;
	padding-right: 24px;
}

/* The rule above the footer is decoration the new design does not use. */
hr.hr5 { display: none; }


/* ==========================================================================
   1. HEADER
   ========================================================================== */

/* Utility bar — carries the tagline and the login link, as on the approved
   design. Both come from the CMS; only their wrapper is ours. */
.pts-topbar {
	background: var(--pts-navy-deep);
	color: rgba(205, 229, 241, .72);
	font-size: 12.5px;
}
.pts-topbar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px 20px;
	padding-top: 10px;
	padding-bottom: 10px;
}
.pts-topbar__msg {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.pts-topbar__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #e03131;
	flex: 0 0 7px;
}
.pts-topbar p,
.pts-topbar .header_line {
	margin: 0;
	font-size: 12.5px;
	font-weight: 700;
	color: #ffffff;
	letter-spacing: .02em;
	line-height: 1.4;
}
.pts-topbar__right { float: none; }
.pts-topbar__right p { font-weight: 400; }
.pts-topbar__right a,
.pts-topbar .login a {
	color: var(--pts-sky-light);
	text-decoration: none;
	font-weight: 700;
}
.pts-topbar__right a:hover { color: #ffffff; }

@media (max-width: 767px) {
	.pts-topbar__inner { justify-content: center; text-align: center; }
	.pts-topbar__right { display: none; }
}

/* Main bar — white, logo left, menu right. */
.pts-header {
	background: #ffffff !important;
	border-bottom: 1px solid var(--pts-line);
	box-shadow: 0 1px 3px rgba(0, 33, 51, .06);
	position: relative;
	top: auto;
	/* The stylesheet puts 20px 40px here; the gutter comes from the container
	   instead, and zeroing it makes the bar exactly as tall as the sticky one
	   so nothing shifts when the script pins it on scroll. */
	padding: 0;
}
/* The white belongs on the nav itself, not only on the header: on scroll the
   site's own script adds .fixed-menu, which takes this element out of flow
   with position:fixed. A transparent nav then let the page show through it. */
.pts-header .megamenu.navbar {
	margin: 0;
	border: 0;
	background: #ffffff;
	min-height: 0;
}

/* Sticky state. The nav leaves the flow, so the header reserves its height —
   otherwise the page jumped up by the height of the bar on first scroll. */
.pts-header.fixed-menu { min-height: 81px; }
.pts-header.fixed-menu .navbar-default {
	padding: 0 !important;
	background: #ffffff !important;
	border-bottom: 1px solid var(--pts-line);
	box-shadow: 0 2px 14px rgba(0, 33, 51, .13);
}
.pts-header .container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.pts-header .navbar-header { float: none; margin: 0; }
.pts-header .navbar-brand {
	height: auto;
	padding: 14px 0;
	display: block;
}
.pts-header .navbar-brand img {
	max-height: 52px;
	width: auto;
	display: block;
}
/* !important: Bootstrap forces "display: block !important" on
   .navbar-collapse.collapse above 768px, which would leave the menu floated
   and the call to action stranded on the left. */
.pts-header .navbar-collapse {
	float: none;
	padding: 0;
	border: 0;
	box-shadow: none;
	width: auto;
	flex: 1 1 auto;
	display: flex !important;
	align-items: center;
	justify-content: flex-end;
}
.pts-header #main-menu { float: none !important; }

/* Menu items — uppercase, letterspaced, navy, with a sky underline on the
   current page, matching the approved header. */
.pts-header #main-menu {
	float: none;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
}
.pts-header #main-menu > li { float: none; }
.pts-header #main-menu > li > a {
	padding: 12px 14px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--pts-navy) !important;
	background: transparent !important;
	border: 0;
	border-radius: 3px;
	transition: color .2s ease, background .2s ease;
}
.pts-header #main-menu > li > a:hover,
.pts-header #main-menu > li > a:focus {
	color: var(--pts-blue) !important;
	background: var(--pts-bg-alt) !important;
}
.pts-header #main-menu > li > a.active {
	color: var(--pts-blue) !important;
	box-shadow: inset 0 -2px 0 var(--pts-sky);
}

/* Dropdowns keep Bootstrap's behaviour; only the skin changes. */
.pts-header .dropdown-menu {
	border: 1px solid var(--pts-line);
	border-radius: var(--pts-radius);
	box-shadow: 0 14px 34px rgba(0, 33, 51, .14);
	padding: 8px;
	min-width: 220px;
}
.pts-header .dropdown-menu .dropdown-item {
	display: block;
	padding: 9px 12px;
	border-radius: 4px;
	font-size: 13.6px;
	color: var(--pts-navy);
	text-decoration: none;
}
.pts-header .dropdown-menu .dropdown-item:hover {
	background: var(--pts-bg-alt);
	color: var(--pts-blue);
}

/* Standing call to action at the end of the bar. */
.pts-header__cta {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-left: 18px;
	padding: 13px 22px;
	border-radius: 4px;
	background: var(--pts-blue);
	color: #ffffff !important;
	font-size: 11.8px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none !important;
	white-space: nowrap;
	transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.pts-header__cta:hover {
	background: var(--pts-blue-mid);
	color: #ffffff !important;
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(0, 33, 51, .22);
}
.pts-header__cta .pts-arrow { transition: transform .25s ease; }
.pts-header__cta:hover .pts-arrow { transform: translateX(4px); }

@media (max-width: 991px) {
	.pts-header__cta { margin: 10px 0 14px; }
}

/* The theme paints the toggle black, so on the white bar it read as a solid
   block. White button, navy bars, theme background suppressed. */
.pts-header .navbar-toggle {
	margin: 12px 0;
	padding: 10px 11px;
	border: 1px solid var(--pts-line) !important;
	border-radius: 4px;
	background: #ffffff !important;
	background-image: none !important;
	box-shadow: none !important;
}
.pts-header .navbar-toggle .icon-bar {
	background: var(--pts-navy) !important;
	width: 20px;
	height: 2px;
	border-radius: 1px;
}
.pts-header .navbar-toggle .icon-bar + .icon-bar { margin-top: 4px; }

@media (max-width: 991px) {
	.pts-header .container { flex-wrap: wrap; }
	/* Logo hard left, toggle hard right, on one row. Bootstrap's negative
	   header margins are removed so both sit on the page gutter. */
	.pts-header .navbar-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		margin: 0 !important;
	}
	.pts-header .navbar-brand { margin: 0 !important; padding: 12px 0; }
	.pts-header .navbar-brand img { max-height: 44px; }
	.pts-header .navbar-toggle { float: none; margin: 0; order: 2; }
	.pts-header .navbar-header::before, .pts-header .navbar-header::after { content: none !important; display: none !important; }
	.pts-header .navbar-collapse {
		flex: 1 1 100%;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
	}
	/* Collapsed by Bootstrap's own toggle; it must stay hidden until opened. */
	.pts-header .navbar-collapse.collapse:not(.in) { display: none !important; }
	.pts-header .navbar-collapse.collapse.in { display: flex !important; }
	.pts-header #main-menu { flex-direction: column; align-items: stretch; width: 100%; }
	.pts-header #main-menu > li > a { padding: 12px 4px; }
}


/* ==========================================================================
   2. HOME — HERO
   ========================================================================== */

#home.first-section {
	position: relative;
	background-color: var(--pts-navy-deep);
	background-position: center center !important;
	background-size: cover !important;
	background-attachment: scroll !important;
	padding: 86px 0 96px;
	/* Tall enough that the four tiles beside the copy always sit inside the
	   band, whatever length the heading and lead run to. */
	min-height: 470px;
	display: flex;
	align-items: center;
}
/* Navy gradient over the photograph, as approved. */
#home.first-section::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, rgba(0, 26, 39, .96) 0%, rgba(0, 58, 88, .88) 100%);
	z-index: 0;
}
#home.first-section > .container { position: relative; z-index: 1; }

#home .big-tagline { padding: 0; }
#home .big-tagline h2 {
	font-size: 48px !important;
	line-height: 1.12 !important;
	font-weight: 700 !important;
	letter-spacing: -.02em;
	color: #ffffff !important;
	margin: 0 0 20px !important;
	text-transform: none !important;
}
#home .big-tagline p.lead {
	font-size: 17.9px !important;
	line-height: 1.75 !important;
	font-style: normal !important;
	color: rgba(228, 241, 247, .88) !important;
	max-width: 560px;
	margin: 0 !important;
}
/* The hero copy shares the band with the four tiles, which sit on the right. */
#home .big-tagline,
#home .row > [class*="col-"] { width: 100%; max-width: 640px; }

@media (max-width: 991px) {
	#home.first-section { padding: 56px 0 0; }
	#home .big-tagline h2 { font-size: 35.2px !important; }
	#home .row > [class*="col-"] { max-width: 100%; }
}
@media (max-width: 767px) {
	#home .big-tagline h2 { font-size: 28.8px !important; }
	#home .big-tagline p.lead { font-size: 16px !important; }
}


/* ==========================================================================
   3. HOME — THE FOUR ENTRY TILES
   Presented as the approved design's translucent cards.
   ========================================================================== */

/* The tiles are absolutely positioned by the existing stylesheet and sit in
   the hero band. Re-anchored to the new container width so they line up with
   the page gutter instead of the old fixed 80px offset. */
.more-menu-blocks {
	right: max(24px, calc(50% - 636px)) !important;
	top: 196px !important;
	left: auto !important;
	width: min(420px, calc(100vw - 48px));
}
.more-menu-blocks .grid_4 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
	width: 100% !important;
	float: none;
}
.more-menu-blocks .grid_4 > a.banner {
	display: block;
	width: auto;
	height: auto;
	margin: 0;
	/* The stylesheet sizes these with padding: 59px 0 14px; the new tiles are
	   sized by their own content instead. */
	padding: 0 !important;
	float: none;
	background: rgba(0, 26, 39, .58) !important;
	border: 1px solid rgba(255, 255, 255, .20);
	border-radius: var(--pts-radius);
	backdrop-filter: blur(2px);
	text-decoration: none;
	transition: background .3s ease, border-color .3s ease, transform .3s ease;
}
.more-menu-blocks .grid_4 > a.banner:hover {
	background: var(--pts-blue) !important;
	border-color: var(--pts-sky);
	color: #ffffff !important;
	transform: translateY(-4px);
}
.more-menu-blocks .maxheight,
.more-menu-blocks .maxheight1 { height: auto !important; }
.more-menu-blocks .box_inner {
	padding: 22px 14px;
	text-align: center;
	font-size: 13.1px;
	font-weight: 700;
	letter-spacing: .05em;
	color: #ffffff;
	background: transparent;
}
.more-menu-blocks .box_inner > div[class^="fa"],
.more-menu-blocks .box_inner > div[class*=" fa-"] {
	display: block;
	font-size: 30.4px;
	margin-bottom: 12px;
	color: var(--pts-sky-light);
}

/* There is no room beside the hero copy on a narrow screen, and the tiles
   follow the offer band in the markup, so below the two-column breakpoint
   they become their own navy band of quick links in place. */
@media (max-width: 991px) {
	.more-menu-blocks {
		position: static !important;
		top: auto !important;
		right: auto !important;
		width: 100%;
		max-width: none;
		background: var(--pts-navy);
		padding: 34px 24px;
	}
	.more-menu-blocks .grid_4 {
		max-width: var(--pts-width);
		margin: 0 auto;
	}
}
@media (max-width: 480px) {
	.more-menu-blocks .grid_4 { grid-template-columns: 1fr; }
}


/* ==========================================================================
   4. HOME — OFFER BAND
   The two headline offers, on the approved dark band.
   ========================================================================== */

.wb > .section[style*="stock-exchange"] {
	background-color: var(--pts-navy) !important;
	background-blend-mode: multiply;
	position: relative;
	padding: 66px 0;
}
.wb > .section[style*="stock-exchange"]::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(160deg, rgba(0, 26, 39, .90), rgba(0, 78, 115, .82));
	z-index: 0;
}
.wb > .section[style*="stock-exchange"] > .container { position: relative; z-index: 1; }
/* An empty data holder sits under the two offers and reserved dead space. */
.wb .divmobileData:empty,
.wb .divData:empty,
.wb .divmobileData > .divData:empty { display: none; }
.wb .section-title > .container { padding: 0; }

.wb .section-title h3.blink_me {
	font-size: 33.6px !important;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: -.01em;
	margin: 0 0 26px;
	/* A steady glow replaces the hard blink: the same emphasis without the
	   flashing that fails accessibility guidance on a public page. */
	animation: ptsGlow 2.4s ease-in-out infinite;
}
.wb .section-title h3.blink_me:last-of-type { margin-bottom: 0; }
.wb .section-title h3.blink_me > a {
	color: #ffffff !important;
	text-decoration: none;
	display: inline-block;
	margin-bottom: 18px;
}
@keyframes ptsGlow {
	0%, 100% { text-shadow: none; }
	50%      { text-shadow: 0 0 24px rgba(154, 215, 240, .55); }
}
@media (prefers-reduced-motion: reduce) {
	.wb .section-title h3.blink_me { animation: none; }
}
@media (max-width: 767px) {
	.wb .section-title h3.blink_me { font-size: 22.4px !important; }
}

/* Buttons throughout the page take the approved treatment. */
.btn.btn-light.btn-radius.btn-brd.grd1,
a.btn.grd1,
.pricing-table-sign-up .btn {
	display: inline-block;
	background: var(--pts-blue) !important;
	background-image: none !important;
	color: #ffffff !important;
	border: 0 !important;
	border-radius: 4px !important;
	padding: 14px 26px !important;
	font-size: 12.8px !important;
	font-weight: 700 !important;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none !important;
	line-height: 1.2;
	transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.btn.btn-light.btn-radius.btn-brd.grd1:hover,
a.btn.grd1:hover,
.pricing-table-sign-up .btn:hover {
	background: var(--pts-blue-mid) !important;
	color: #ffffff !important;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(0, 33, 51, .22);
}


/* ==========================================================================
   5. HOME — KEY POINTS STRIP
   The approved design's dark strip with hairline dividers.
   ========================================================================== */

.parallax.section1.lb.icon-section {
	background-image: none !important;
	background-color: var(--pts-navy) !important;
	padding: 0;
}
.icon-section .row.stat-wrap {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
}
.icon-section .stat-wrap > [class*="col-"] {
	flex: 1 1 0;
	min-width: 160px;
	padding: 32px 22px;
	border-right: 1px solid rgba(255, 255, 255, .10);
	width: auto;
	float: none;
}
.icon-section .stat-wrap > [class*="col-"]:last-child { border-right: 0; }
.icon-section .stat-wrap span[class^="icon"] em,
.icon-section .stat-wrap span[class*=" icon"] em {
	font-size: 32px;
	color: var(--pts-sky-light);
	display: block;
	margin-bottom: 12px;
}
.icon-section .stat-wrap h3 {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(205, 229, 241, .82);
	margin: 0;
	line-height: 1.6;
}

@media (max-width: 767px) {
	.icon-section .stat-wrap > [class*="col-"] {
		flex: 1 1 50%;
		border-right: 0;
		border-bottom: 1px solid rgba(255, 255, 255, .10);
		padding: 24px 16px;
	}
}


/* ==========================================================================
   6. HOME — DETAIL ROWS  (signals / mentorship / strategies / automated)
   Each becomes a white card on a light band: image one side, content the
   other, as in the approved layout.
   ========================================================================== */

#about.section.wb {
	background: var(--pts-bg-alt) !important;
	padding: 74px 0;
}
/* Each row becomes a white card: heading and lead across the top, then the
   picture and the list side by side — the media/content pairing used
   throughout the approved design. */
#about .details-row {
	background: #ffffff;
	border: 1px solid var(--pts-line);
	border-radius: var(--pts-radius);
	padding: 40px;
	margin-bottom: 28px;
	width: 100%;
	float: none;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 44px;
	align-items: start;
}
#about .details-row > h4,
#about .details-row > p.lead { grid-column: 1 / -1; }
#about .details-row > [class*="col-"] {
	width: auto;
	float: none;
	padding: 0;
	margin: 0;
}
#about .details-row:last-of-type { margin-bottom: 0; }
#about hr.hr1 { display: none; }

#about .details-row h4 {
	font-size: 25.6px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--pts-navy) !important;
	text-align: left;
	margin: 0 0 12px;
	text-transform: none;
}
#about .details-row h4 span { color: var(--pts-blue) !important; }
#about .details-row > p.lead {
	font-size: 16px;
	line-height: 1.75;
	font-style: normal;
	color: #5b6b76 !important;
	text-align: left;
	margin: 0 0 28px;
	max-width: 900px;
}
#about .details-row > p.lead:empty { display: none; }

#about .details-row .post-media { margin: 0; }
/* A common ratio so every row reads as the same card, whatever the source
   image's proportions are. */
#about .details-row .post-media img {
	border-radius: 6px;
	width: 100%;
	aspect-ratio: 16 / 11;
	object-fit: cover;
	height: auto;
	max-width: 100%;
	display: block;
}

#about .message-box { padding: 0; }
#about .message-box h2,
#about .message-box h2.auto-trad-box-h2 {
	font-size: 12.2px !important;
	font-weight: 700 !important;
	letter-spacing: .18em !important;
	text-transform: uppercase !important;
	color: var(--pts-blue) !important;
	margin: 0 0 16px !important;
	padding: 0 !important;
	text-align: left !important;
	line-height: 1.4 !important;
	position: relative;
}
#about .message-box h2::before {
	content: "";
	display: block;
	width: 34px;
	height: 2px;
	background: var(--pts-sky);
	margin-bottom: 12px;
}
#about .message-box ul,
#about .message-box ol {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
#about .message-box ul > li,
#about .message-box ol > li {
	position: relative;
	padding: 0 0 0 26px !important;
	margin-bottom: 11px;
	font-size: 15.2px;
	line-height: 1.6;
	color: var(--pts-ink);
	text-transform: none;
	list-style: none !important;
	background: none !important;
}
/* The tick is drawn from borders rather than an icon font, so the list never
   depends on a webfont having loaded. */
#about .message-box ul > li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 5px;
	width: 5px;
	height: 9px;
	border: solid var(--pts-sky);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
#about .message-box ol { counter-reset: ptsnum; }
#about .message-box ol > li { counter-increment: ptsnum; }
#about .message-box ol > li::before {
	content: counter(ptsnum);
	position: absolute;
	left: 0;
	top: 1px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--pts-blue);
	color: #ffffff;
	font-size: 10.9px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}
#about .message-box .extra-text {
	margin: 20px 0 0;
	padding: 16px 18px;
	background: var(--pts-bg-alt);
	border-left: 3px solid var(--pts-sky);
	border-radius: 0 4px 4px 0;
	font-size: 14.1px;
	line-height: 1.65;
	color: #5b6b76;
}
#about .message-box h4 {
	font-size: 15.2px !important;
	color: #5b6b76 !important;
	font-weight: 600;
	margin: 0 0 14px !important;
}
#about .auto-trad-box-h2 { color: var(--pts-blue) !important; }

@media (max-width: 991px) {
	#about .details-row { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 767px) {
	#about.section.wb { padding: 56px 0; }
	#about .details-row { padding: 26px 20px; }
	#about .details-row h4 { font-size: 20.8px; }
}


/* ==========================================================================
   7. HOME — MONTHLY PERFORMANCE
   The approved archive card: navy title bar over the table.
   ========================================================================== */

#case.section.wb {
	background: #ffffff !important;
	padding: 74px 0;
}
#case .section-title { margin: 0; }
#case .table-row {
	background: var(--pts-navy);
	border-radius: var(--pts-radius) var(--pts-radius) 0 0;
	padding: 20px 26px;
	text-align: left;
	margin: 0;
}
#case .table-row h4 {
	margin: 0;
	font-size: 17.6px;
	font-weight: 700;
	color: #ffffff !important;
	text-transform: none;
	letter-spacing: 0;
}
#case > .container > .section-title > table {
	border: 1px solid var(--pts-line);
	border-top: 0;
	border-radius: 0 0 var(--pts-radius) var(--pts-radius);
	overflow: hidden;
	background: #ffffff;
}
#case .RadGrid,
#case .RadGrid_Default { border: 0 !important; background: transparent !important; }

/* Header band and zebra rows exactly as the client's own sheet. */
#case .rgMasterTable { width: 100%; border-collapse: collapse; }
#case .rgMasterTable > thead th,
#case .RadGrid_Default .rgHeader {
	background: #d9d9d9 !important;
	background-image: none !important;
	color: #1a1a1a !important;
	font-weight: 700;
	font-size: 13.1px;
	text-align: center;
	padding: 10px 12px !important;
	border: 0 !important;
}
#case .rgMasterTable > tbody td,
#case .RadGrid_Default .rgRow > td,
#case .RadGrid_Default .rgAltRow > td {
	padding: 9px 12px !important;
	border: 0 !important;
	border-bottom: 1px solid #eaeaea !important;
	font-size: 14.1px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}
#case .RadGrid_Default .rgRow > td { background: #ffffff !important; }
#case .RadGrid_Default .rgAltRow > td { background: #f2f2f2 !important; }

@media (max-width: 767px) {
	#case.section.wb { padding: 56px 0; }
	#case > .container > .section-title > table { overflow-x: auto; display: block; }
}


/* ==========================================================================
   8. HOME — CANCELLATION AND REFUND POLICY
   ========================================================================== */

#cancel.section.wb {
	background: var(--pts-bg-alt) !important;
	padding: 64px 0;
}
#cancel .section-title { max-width: 900px; margin: 0 auto; }
#cancel .section-title h3 {
	font-size: 27.2px;
	font-weight: 700;
	color: var(--pts-navy) !important;
	margin: 0 0 18px;
}
#cancel .cancel-text {
	font-size: 14.7px;
	line-height: 1.75;
	color: #5b6b76;
	margin: 0 0 14px;
}
#cancel .cancel-text:last-child { margin-bottom: 0; }


/* ==========================================================================
   9. HOME — PRICING
   The approved dark band, with each plan as a card.
   ========================================================================== */

#pricing.section.pricing-bg {
	background-color: var(--pts-navy) !important;
	background-position: center center !important;
	background-size: cover !important;
	position: relative;
	padding: 74px 0;
}
#pricing.section.pricing-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(160deg, rgba(0, 26, 39, .93), rgba(0, 78, 115, .88));
	z-index: 0;
}
#pricing.section.pricing-bg > .container { position: relative; z-index: 1; }

#pricing .section-title { margin-bottom: 44px; }
#pricing .section-title h3 {
	font-size: 32px;
	font-weight: 700;
	color: #ffffff !important;
	margin: 0 0 14px;
}
#pricing .section-title p.lead {
	font-size: 16px;
	line-height: 1.7;
	font-style: normal;
	color: rgba(228, 241, 247, .82) !important;
	max-width: 760px;
	margin: 0 auto;
}

#pricing .flex-container {
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
	margin: 0;
	justify-content: center;
}
#pricing .flex-container > [class*="col-"],
#pricing .flex-container > div {
	flex: 1 1 230px;
	max-width: 260px;
	width: auto;
	float: none;
	padding: 0;
	display: flex;
	/* The stylesheet sets a 75px line-height on these wrappers. */
	line-height: normal;
}
/* The existing card is a fixed 1050px tall with a 92px minimum on its title;
   the new card is sized by its own content and the row keeps them equal. */
#pricing .pricing-table {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: auto !important;
	min-height: 0 !important;
	background: #ffffff !important;
	border: 1px solid var(--pts-line);
	border-radius: var(--pts-radius);
	overflow: hidden;
	margin: 0;
	box-shadow: 0 18px 40px rgba(0, 20, 32, .22);
	transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease;
}
#pricing .pricing-table:hover {
	transform: translateY(-6px);
	box-shadow: 0 26px 52px rgba(0, 20, 32, .32);
}
#pricing .pricing-table-header {
	background: var(--pts-navy) !important;
	background-image: none !important;
	padding: 20px 18px;
	border-radius: 0;
	min-height: 0;
}
#pricing .pricing-table-header h2,
#pricing .pricing-table-highlighted h2 {
	font-size: 15.2px !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
	color: #ffffff !important;
	margin: 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
	text-transform: none !important;
}
#pricing .pricing-table-space { display: none; }
#pricing .pricing-table-text {
	padding: 16px 18px;
	background: var(--pts-bg-alt);
	border-bottom: 1px solid var(--pts-line);
}
#pricing .pricing-table-text p {
	margin: 0;
	font-size: 13.1px;
	line-height: 1.6;
	color: #5b6b76;
}
#pricing .pricing-table-features {
	padding: 18px;
	flex: 1 1 auto;
}
#pricing .pricing-table-features p {
	position: relative;
	margin: 0 0 12px !important;
	padding: 0;
	font-size: 13.1px;
	line-height: 1.6 !important;
	color: var(--pts-ink);
	border: 0 !important;
}
#pricing .pricing-table-features,
#pricing .pricing-table-text { line-height: 1.6 !important; }
#pricing .pricing-table-features p em.fa { color: var(--pts-sky); margin-right: 8px; }
#pricing .pricing-table-features a { color: inherit; text-decoration: none; }
#pricing .pricing-table-features strong { color: var(--pts-navy); }
#pricing .pricing-table-features .requiredPrice {
	padding: 9px 10px;
	border-radius: 4px;
	border: 1px solid var(--pts-line) !important;
	cursor: pointer;
	transition: border-color .2s ease, background .2s ease;
}
#pricing .pricing-table-features .requiredPrice:hover { background: var(--pts-bg-alt); }
#pricing .pricing-table-features .pricing-table-clicked {
	border-color: var(--pts-blue) !important;
	background: var(--pts-bg-alt);
	box-shadow: inset 0 0 0 1px var(--pts-blue);
}
/* The stylesheet pins this to "top: 90%" of a fixed-height card, which puts
   the button outside a card that now sizes to its content. Back into flow,
   pinned to the bottom of the card by the column layout above. */
#pricing .pricing-table-sign-up {
	position: static !important;
	left: auto !important;
	top: auto !important;
	margin: 0 !important;
	padding: 0 18px 20px;
	background: transparent;
}
#pricing .pricing-table-sign-up .btn { width: 100%; text-align: center; }

@media (max-width: 767px) {
	#pricing.section.pricing-bg { padding: 56px 0; }
	#pricing .flex-container > [class*="col-"] { flex: 1 1 100%; max-width: 100%; }
	#pricing .section-title h3 { font-size: 25.6px; }
}


/* ==========================================================================
   10. FOOTER
   ========================================================================== */

.pts-footer {
	background: var(--pts-navy) !important;
	padding: 62px 0 46px;
	color: rgba(205, 229, 241, .78);
}
.pts-footer__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
}
.pts-footer__col--main    { flex: 1 1 520px; }
.pts-footer__col--contact { flex: 1 1 300px; }
.pts-footer .widget { margin: 0; }
.pts-footer .widget-title { margin: 0 0 20px; border: 0; padding: 0; }
.pts-footer .widget-title img {
	max-width: 190px;
	height: auto;
	display: block;
}
.pts-footer .widget-title h3 {
	margin: 0;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--pts-sky-light);
}
.pts-footer p {
	font-size: 14.1px;
	line-height: 1.75;
	color: rgba(205, 229, 241, .72);
	margin: 0 0 14px;
	max-width: 640px;
}
.pts-footer .footer-links { list-style: none; margin: 0; padding: 0; }
.pts-footer .footer-links > li {
	font-size: 14.1px;
	line-height: 1.7;
	color: rgba(205, 229, 241, .72);
	margin-bottom: 10px;
	padding: 0;
	border: 0;
}
.pts-footer .footer-links a,
.pts-footer .bottom-company-links a {
	color: var(--pts-sky-light);
	text-decoration: none;
}
.pts-footer .footer-links a:hover,
.pts-footer .bottom-company-links a:hover { color: #ffffff; }
.pts-footer .bottom-company-links { margin-top: 22px; }
.pts-footer .bottom-company-links ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
}
.pts-footer .bottom-company-links li {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.pts-copyright {
	background: var(--pts-navy-deep) !important;
	border-top: 1px solid rgba(255, 255, 255, .08);
	padding: 18px 0;
}
.pts-copyright__inner .footer-left { float: none; }
.pts-copyright p {
	margin: 0;
	font-size: 12.8px;
	color: rgba(205, 229, 241, .55);
	line-height: 1.7;
}

@media (max-width: 767px) {
	.pts-footer { padding: 48px 0 36px; }
	.pts-footer__inner { gap: 32px; }
}


/* ==========================================================================
   11. CHAT PANEL
   Left in place and fully working — only the skin follows the new design.
   ========================================================================== */

#draggable #popupchat .chatheader {
	background: var(--pts-blue) !important;
	background-image: none !important;
	font-size: 13.1px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}


/* ==========================================================================
   13. LIST INDENT CORRECTION
   --------------------------------------------------------------------------
   The theme styles these list items with list-style-position: inside plus
   text-indent: -1.8em — a hanging-indent trick that works with the native
   bullet sitting in the text flow. The bullet is replaced above with a drawn
   tick in the padding, so the negative indent had nothing to hang and simply
   dragged the first line back over the tick.
   ========================================================================== */

#about .message-box ul > li,
#about .message-box ol > li {
	text-indent: 0 !important;
}


/* ==========================================================================
   14. DROPDOWN POSITION
   --------------------------------------------------------------------------
   The theme pins every dropdown at top:142px !important (155px once the bar
   is pinned) — pixel offsets tuned for its old 142px-tall header — and leaves
   the menu item itself unpositioned, so the panel measured from the nav's top
   edge and landed 80px below the link. The item is now the anchor and the
   panel sits directly under it, in the normal and the pinned state alike.
   ========================================================================== */

.pts-header #main-menu > li.dropdown { position: relative !important; }
.pts-header #main-menu .dropdown-menu,
.pts-header.fixed-menu #main-menu .dropdown-menu {
	top: 100% !important;
	left: 0 !important;
	right: auto;
	margin-top: 4px !important;
}

/* Hover does not exist on a phone: inside the opened burger menu the
   sub-links simply sit in the list under their parent item. */
@media (max-width: 991px) {
	.pts-header #main-menu .dropdown-menu {
		position: static !important;
		display: block !important;
		top: auto !important;
		margin: 0 0 6px 12px !important;
		padding: 0 !important;
		border: 0 !important;
		box-shadow: none !important;
		min-width: 0;
	}
	.pts-header #main-menu .dropdown-menu .dropdown-item { padding: 9px 4px; }
}