/* packages.aspx: the provider packages page (Enhanced and Basic listings).
   Everything is scoped to div.pkgPage so the older dcDesign.css heading and link styles don't leak in.
   Breakpoints: 1000px (tablet: one-column hero and benefits) and 640px (phone: stacked cards). */

.pkgPage
{
	--plum: #5B2E57;
	--teal: #0F7C80;
	--tealDark: #0B6266;
	--lilac: #F6F1F7;
	--border: #D9CCE0;
	--line: #E3DCE8;
	--text: #3F3F46;
	--muted: #6B6B73;

	padding-bottom: 8px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--text);
}

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

.pkgPage h1,
.pkgPage h2,
.pkgPage h3,
.pkgPage h4
{
	margin: 0;
	font-family: verdana, helvetica, sans-serif;
	font-weight: bold;
	color: var(--plum);
}

.pkgPage h2 { font-size: 26px; line-height: 1.3; }
.pkgPage h3 { font-size: 17px; line-height: 1.35; }
.pkgPage p { margin: 12px 0 0; }

.pkgPage .lead
{
	margin: 8px 0 0;
	font-size: 15px;
	color: var(--muted);
}

.pkgPage .eyebrow
{
	display: inline-block;
	font-size: 12px;
	font-weight: bold;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--teal);
}

.pkgPage .sec { margin-top: 56px; }

.pkgPage .panel
{
	background-color: #ffffff;
	border: 1px solid var(--border);
	border-radius: 10px;
}

.pkgPage .sr
{
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---------- buttons: teal like site.css .siteBtn, plus an outlined secondary ---------- */

.pkgPage a.btn,
.pkgPage a.btn:link,
.pkgPage a.btn:visited
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 6px 26px;
	font: bold 15px verdana, helvetica, sans-serif;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	border-radius: 6px;
}

.pkgPage a.btnP,
.pkgPage a.btnP:link,
.pkgPage a.btnP:visited
{
	color: #ffffff;
	background-color: var(--teal);
	box-shadow: 0 2px 6px rgba(15, 124, 128, 0.3);
}

.pkgPage a.btnP:hover,
.pkgPage a.btnP:focus
{
	color: #ffffff;
	background-color: var(--tealDark);
	text-decoration: none;
}

.pkgPage a.btnS,
.pkgPage a.btnS:link,
.pkgPage a.btnS:visited
{
	color: var(--teal);
	background-color: #ffffff;
	border: 2px solid var(--teal);
}

.pkgPage a.btnS:hover,
.pkgPage a.btnS:focus
{
	color: var(--tealDark);
	background-color: var(--lilac);
	text-decoration: none;
}

.pkgPage a.btn:focus-visible,
.pkgPage summary:focus-visible
{
	outline: 3px solid var(--plum);
	outline-offset: 2px;
}

/* ---------- hero, with a small drawn map showing the two kinds of map points ---------- */

.pkgPage .hero
{
	margin-top: 24px;
	padding: 48px;
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: 48px;
	align-items: center;
}

.pkgPage .hero h1
{
	margin-top: 10px;
	font-size: 36px;
	line-height: 1.22;
	text-align: left;
}

.pkgPage .hero .sub
{
	margin-top: 16px;
	font-size: 18px;
	line-height: 1.5;
}

.pkgPage .heroBtns
{
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 24px;
}

.pkgPage .mapArt
{
	position: relative;
	height: 300px;
	overflow: hidden;
	background-color: #EEF3F1;
	border: 1px solid var(--border);
	border-radius: 10px;
}

.pkgPage .road { position: absolute; background-color: #ffffff; }

/* map points are site.css .siteDot; here they are placed on the drawing */
.pkgPage .mapArt .siteDot { position: absolute; }

.pkgPage .pop
{
	position: absolute;
	left: 150px;
	top: 62px;
	width: 210px;
	padding: 12px 14px;
	font-size: 12px;
	line-height: 1.45;
	background-color: #ffffff;
	border-radius: 8px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.pkgPage .pop b { font-size: 13px; color: var(--plum); }
.pkgPage .pop .more { color: var(--teal); }

.pkgPage .mapKey
{
	position: absolute;
	left: 12px;
	bottom: 12px;
	display: flex;
	gap: 14px;
	align-items: center;
	padding: 8px 10px;
	font-size: 11px;
	background-color: #ffffff;
	border-radius: 6px;
}

.pkgPage .k { display: inline-flex; align-items: center; gap: 6px; }

/* small map-point swatch: filled teal = Enhanced, white with a teal ring = Basic */
.pkgPage .kd
{
	display: inline-block;
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	background-color: var(--teal);
	border: 2px solid #ffffff;
	border-radius: 50%;
	box-shadow: 0 0 0 1px var(--teal);
}

.pkgPage .kd.f
{
	background-color: #ffffff;
	border-color: var(--teal);
	box-shadow: none;
}

/* ---------- the two package cards ---------- */

.pkgPage .pkgGrid
{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	margin-top: 28px;
	align-items: stretch;
}

.pkgPage .pkg
{
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 32px;
}

.pkgPage .pkg.rec
{
	border: 2px solid var(--teal);
	box-shadow: 0 6px 20px rgba(15, 124, 128, 0.12);
}

.pkgPage .badge
{
	position: absolute;
	top: -13px;
	left: 32px;
	padding: 4px 12px;
	font-size: 11px;
	font-weight: bold;
	letter-spacing: .1em;
	color: #ffffff;
	background-color: var(--teal);
	border-radius: 999px;
}

.pkgPage .pkgName { display: flex; align-items: center; gap: 10px; }
.pkgPage .pkgName h3 { font-size: 20px; }

.pkgPage .price
{
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin-top: 14px;
	color: var(--plum);
}

.pkgPage .price .amt { font-size: 40px; font-weight: bold; line-height: 1; }
.pkgPage .price .per { font-size: 15px; color: var(--muted); }

.pkgPage .pnote { margin-top: 6px; font-size: 13px; color: var(--muted); }

.pkgPage .pkg h4 { margin-top: 20px; font-size: 15px; color: var(--text); }
.pkgPage .pkg .desc { margin-top: 8px; }

.pkgPage .feat
{
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

.pkgPage .feat li { display: flex; gap: 10px; align-items: flex-start; }

.pkgPage .ic
{
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-top: 1px;
}

.pkgPage .pkgCta { margin-top: 28px; }
.pkgPage .pkgCta .btn { width: 100%; }

/* ---------- comparison table, the Enhanced column tinted lilac ---------- */

.pkgPage .tblBox { margin-top: 24px; overflow-x: auto; }

.pkgPage table.cmp
{
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 14px;
}

.pkgPage .cmp th,
.pkgPage .cmp td
{
	padding: 12px 20px;
	text-align: left;
	border-bottom: 1px solid var(--line);
}

.pkgPage .cmp thead th
{
	padding-top: 20px;
	vertical-align: bottom;
	color: var(--plum);
}

.pkgPage .cmp .c { width: 24%; text-align: center; }
.pkgPage .cmp .en { background-color: var(--lilac); }
.pkgPage .cmp thead th.en { border-top: 3px solid var(--teal); }
.pkgPage .cmp tbody tr:last-child th,
.pkgPage .cmp tbody tr:last-child td { border-bottom: 0; }
.pkgPage .cmp tbody th { font-weight: normal; }
.pkgPage .cmp .enPrice { color: var(--plum); }

.pkgPage .yes { display: inline-flex; align-items: center; gap: 6px; font-weight: bold; color: var(--teal); }
.pkgPage .no { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }

/* ---------- three benefits ---------- */

.pkgPage .ben
{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin-top: 24px;
}

.pkgPage .benC { padding: 28px; }

.pkgPage .benIc
{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	color: var(--teal);
	background-color: var(--lilac);
	border-radius: 12px;
}

.pkgPage .step
{
	display: block;
	margin-top: 18px;
	font-size: 12px;
	font-weight: bold;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--teal);
}

.pkgPage .benC h3 { margin-top: 4px; }
.pkgPage .benC .take { font-weight: bold; color: var(--plum); }

/* ---------- example listings (fictional, labelled "Example") ---------- */

.pkgPage .prev
{
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
	gap: 40px;
	align-items: start;
	padding: 40px;
}

.pkgPage .ex
{
	display: grid;
	grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
	gap: 16px;
}

.pkgPage .lst
{
	padding: 16px;
	font-size: 12px;
	line-height: 1.5;
	background-color: #ffffff;
	border: 1px solid var(--border);
	border-radius: 8px;
}

.pkgPage .lst.en { border: 2px solid var(--teal); }
.pkgPage .lst p { margin: 8px 0 0; }
.pkgPage .lst .lnk { margin-top: 10px; color: var(--teal); }

.pkgPage .exTag
{
	display: inline-block;
	padding: 1px 6px;
	font-size: 10px;
	font-weight: bold;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--muted);
	border: 1px dashed var(--muted);
	border-radius: 4px;
}

.pkgPage .lstHead { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
.pkgPage .lstHead b { font-size: 14px; color: var(--plum); }

.pkgPage .photos
{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 6px;
	margin-top: 10px;
}

.pkgPage .ph
{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 64px;
	font-size: 10px;
	color: var(--muted);
	background-color: var(--line);
	border-radius: 5px;
}

.pkgPage .facts
{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 4px 12px;
	margin-top: 10px;
}

.pkgPage .facts span { color: var(--muted); }

.pkgPage .adBox
{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 70px;
	margin-top: 10px;
	font-size: 10px;
	letter-spacing: .06em;
	color: var(--muted);
	border: 1px dashed #C9BFD0;
	border-radius: 5px;
}

/* ---------- price band ---------- */

.pkgPage .value
{
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 40px;
	align-items: center;
	padding: 44px 48px;
	background-color: var(--lilac);
	border: 1px solid var(--border);
	border-radius: 10px;
}

.pkgPage .valBox
{
	padding: 28px;
	text-align: center;
	background-color: #ffffff;
	border: 1px solid var(--border);
	border-radius: 10px;
}

.pkgPage .valBox .amt { font-size: 40px; font-weight: bold; line-height: 1; color: var(--plum); }
.pkgPage .valBox .btn { width: 100%; margin-top: 20px; }

/* ---------- FAQ: native details/summary, so it works with the keyboard and without script ---------- */

.pkgPage .faq
{
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 880px;
	margin-top: 24px;
}

.pkgPage details
{
	background-color: #ffffff;
	border: 1px solid var(--border);
	border-radius: 8px;
}

.pkgPage summary
{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	min-height: 44px;
	padding: 16px 20px;
	font-weight: bold;
	color: var(--plum);
	cursor: pointer;
	list-style: none;
	border-radius: 8px;
}

.pkgPage summary::-webkit-details-marker { display: none; }
.pkgPage summary .chev { flex: 0 0 auto; transition: transform .15s; }
.pkgPage details[open] summary .chev { transform: rotate(180deg); }
.pkgPage details p { margin: 0; padding: 0 20px 18px; }

/* ---------- closing call to action ---------- */

.pkgPage .final
{
	padding: 56px 48px;
	text-align: center;
	color: #ffffff;
	background-color: var(--plum);
	border-radius: 10px;
}

.pkgPage .final h2 { color: #ffffff; }
.pkgPage .final p { max-width: 720px; margin: 14px auto 0; color: var(--lilac); }

.pkgPage .finalBtns
{
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
	margin-top: 28px;
}

.pkgPage .final a.btnP,
.pkgPage .final a.btnP:link,
.pkgPage .final a.btnP:visited
{
	color: var(--teal);
	background-color: #ffffff;
	box-shadow: none;
}

.pkgPage .final a.btnP:hover,
.pkgPage .final a.btnP:focus
{
	color: var(--tealDark);
	background-color: var(--lilac);
}

.pkgPage .final a.btnS,
.pkgPage .final a.btnS:link,
.pkgPage .final a.btnS:visited
{
	color: #ffffff;
	background-color: transparent;
	border-color: #ffffff;
}

.pkgPage .final a.btnS:hover,
.pkgPage .final a.btnS:focus
{
	color: #ffffff;
	background-color: rgba(255, 255, 255, 0.12);
}

.pkgPage .final a.btn:focus-visible { outline-color: #ffffff; }

/* ---------- tablet ---------- */

@media (max-width: 1000px)
{
	.pkgPage .hero { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 36px 32px; }
	.pkgPage .mapArt { height: 240px; }
	.pkgPage .pkg { padding: 28px 24px; }
	.pkgPage .ben { grid-template-columns: minmax(0, 1fr); }
	.pkgPage .benC { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 20px; }
	.pkgPage .benC .benIc { grid-row: span 6; }
	.pkgPage .benC .step { margin-top: 0; }
	.pkgPage .prev { grid-template-columns: minmax(0, 1fr); padding: 32px; }
	.pkgPage .value { grid-template-columns: minmax(0, 1fr); padding: 32px; }
}

/* ---------- phone ---------- */

@media (max-width: 640px)
{
	.pkgPage { font-size: 15px; }
	.pkgPage h2 { font-size: 22px; }
	.pkgPage .sec { margin-top: 44px; }
	.pkgPage .hero { margin-top: 16px; padding: 28px 20px; }
	.pkgPage .hero h1 { font-size: 27px; }
	.pkgPage .hero .sub { font-size: 16px; }
	.pkgPage .heroBtns .btn { width: 100%; }
	/* too narrow for the info box: show just the points and the key */
	.pkgPage .pop { display: none; }
	.pkgPage .mapKey { top: 12px; bottom: auto; }
	.pkgPage .pkgGrid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.pkgPage .pkg { padding: 28px 20px; }
	.pkgPage .cmp th,
	.pkgPage .cmp td { padding: 11px 8px; font-size: 13px; }
	.pkgPage .cmp .c { width: 25%; }
	/* the Yes/No words and "Listing" in the headings stay for screen readers only */
	.pkgPage .cmp .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.pkgPage .benC { display: block; padding: 24px 20px; }
	.pkgPage .benC .step { margin-top: 18px; }
	.pkgPage .prev { padding: 24px 20px; }
	.pkgPage .ex { grid-template-columns: minmax(0, 1fr); }
	.pkgPage .value { padding: 28px 20px; }
	.pkgPage .final { padding: 40px 20px; }
	.pkgPage .finalBtns .btn { width: 100%; }
}