/* =========================================================================
   v175 pricing + compare — bespoke sections the generic blocks don't cover:
   the "What are you here for?" path navigator, the "Pricing at a glance" cards,
   the onboarding-fee table, and the full /compare matrices + sticky jump nav.
   Ported from the prototype; palette/font names aliased to the theme tokens.
   ========================================================================= */

.pricing-paths-section,
.price-glance-section,
.onboarding-section,
.compare-jumpnav,
.compare-section {
	--white: var(--text);
	--white-soft: var(--text-secondary);
	--white-faint: var(--text-muted);
	--white-dim: var(--text-muted);
	--gold-soft: rgba(200, 169, 107, 0.55);
	--line-bright: rgba(248, 247, 244, 0.22);
	--font-serif: var(--font-display);
}

/* ---- "What are you here for?" path navigator ---------------------------- */
.pricing-paths-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--line); }
.pricing-path-card {
	display: flex; flex-direction: column; align-items: flex-start; text-align: left;
	padding: 36px 28px 30px; background: var(--navy); border-right: 1px solid var(--line);
	cursor: pointer; transition: background 0.3s ease; position: relative; text-decoration: none;
}
.pricing-path-card:last-child { border-right: none; }
.pricing-path-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.35s cubic-bezier(0.16,1,0.3,1); }
.pricing-path-card:hover { background: rgba(200, 169, 107, 0.05); }
.pricing-path-card:hover::after { transform: scaleX(1); }
.pricing-path-card-featured { background: rgba(200, 169, 107, 0.06); }
.pricing-path-card-featured::after { transform: scaleX(1); opacity: 0.5; }
.pricing-path-card-featured:hover::after { opacity: 1; }
.pricing-path-head { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 22px; }
.pricing-path-num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; color: var(--gold); }
.pricing-path-icon { width: 38px; height: 38px; color: var(--gold); flex-shrink: 0; transition: transform 0.4s cubic-bezier(0.16,1,0.3,1); }
.pricing-path-icon svg { width: 38px; height: 38px; display: block; }
.pricing-path-card:hover .pricing-path-icon { transform: translateY(-3px) scale(1.06); }
.pricing-path-title { font-family: var(--font-display); font-weight: 300; font-size: 26px; line-height: 1.1; letter-spacing: -0.01em; color: var(--white); margin: 0 0 14px; }
.pricing-path-title em { font-style: italic; color: var(--gold); font-weight: 400; }
.pricing-path-desc { font-family: var(--font-body); font-size: 13px; line-height: 1.6; color: var(--white-soft); margin: 0 0 20px; flex-grow: 1; }
.pricing-path-price { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--white-faint); margin-bottom: 16px; }
.pricing-path-cta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); transition: letter-spacing 0.25s ease; }
.pricing-path-card:hover .pricing-path-cta { letter-spacing: 0.2em; }
.pricing-paths-foot { text-align: center; margin-top: 28px; font-size: 13px; color: var(--white-faint); }
@media (max-width: 980px) {
	.pricing-paths-grid { grid-template-columns: 1fr 1fr; }
	.pricing-path-card:nth-child(2) { border-right: none; }
	.pricing-path-card:nth-child(1), .pricing-path-card:nth-child(2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 560px) {
	.pricing-paths-grid { grid-template-columns: 1fr; }
	.pricing-path-card { border-right: none; border-bottom: 1px solid var(--line); }
	.pricing-path-card:last-child { border-bottom: none; }
}

/* ---- "Pricing at a glance" ---------------------------------------------- */
.price-glance-section { padding: 72px 0; background: var(--navy); border-top: 1px solid var(--line); }
.price-glance-section .container { max-width: var(--content-wide); }
.price-glance-intro { max-width: 760px; margin: 0 auto 44px; text-align: center; }
.price-glance-intro .lede { font-family: var(--font-body); font-size: 15px; line-height: 1.65; color: var(--white-soft); margin-top: 18px; }
.price-glance-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; max-width: 1080px; margin: 0 auto; border: 1px solid var(--line); }
.price-glance-card { padding: 32px 28px; border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.price-glance-card:last-child { border-right: none; }
.price-glance-num { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--white-faint); margin-bottom: 14px; }
.price-glance-name { font-family: var(--font-display); font-size: 26px; color: var(--white); margin-bottom: 6px; }
.price-glance-name em { font-style: italic; color: var(--gold); }
.price-glance-from { font-family: var(--font-display); font-style: italic; font-size: 22px; color: var(--gold); margin-bottom: 16px; }
.price-glance-desc { font-family: var(--font-body); font-size: 13px; line-height: 1.55; color: var(--white-soft); margin-bottom: 18px; flex: 1; }
.price-glance-tiers { font-family: var(--font-body); font-size: 12px; line-height: 1.7; color: var(--white-faint); border-top: 1px solid var(--line); padding-top: 14px; margin-bottom: 18px; }
.price-glance-tiers strong { color: var(--white-soft); font-weight: 600; }
.price-glance-link { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); background: none; border: none; padding: 0; cursor: pointer; text-align: left; border-bottom: 1px solid var(--line-gold); align-self: flex-start; transition: border-color 0.2s; text-decoration: none; }
.price-glance-link:hover { border-bottom-color: var(--gold); }
.price-glance-bridge { max-width: 1080px; margin: 0 auto; border: 1px solid var(--line-gold); border-top: none; background: rgba(200, 169, 107, 0.05); padding: 26px 32px; text-align: center; }
.price-glance-bridge p { font-family: var(--font-body); font-size: 14px; line-height: 1.6; color: var(--white-soft); margin: 0; }
.price-glance-bridge strong { color: var(--white); }
.price-glance-bridge .stacks-from { color: var(--gold); font-weight: 600; }
.price-glance-bridge a { display: inline-block; margin-top: 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy); background: var(--gold); border: none; padding: 11px 26px; cursor: pointer; transition: opacity 0.2s; text-decoration: none; }
.price-glance-bridge a:hover { opacity: 0.88; }

/* ---- Onboarding-fee table ---------------------------------------------- */
.onboarding-section { padding: 72px 0; background: var(--navy-2); border-top: 1px solid var(--line); }
.onboarding-wrap { max-width: 880px; margin: 0 auto; }
.onboarding-table { width: 100%; border-collapse: collapse; font-family: var(--font-body); margin-top: 28px; }
.onboarding-table th, .onboarding-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--white-soft); }
.onboarding-table thead th { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--white-faint); }
.onboarding-table .ob-tier { color: var(--white); }
.onboarding-table .ob-fee { font-family: var(--font-display); font-style: italic; font-size: 20px; color: var(--gold); text-align: right; white-space: nowrap; }
.onboarding-table .ob-row-stack td { background: rgba(200, 169, 107, 0.05); }
.onboarding-note { font-family: var(--font-body); font-size: 13px; line-height: 1.6; color: var(--white-faint); margin-top: 20px; }
.onboarding-note strong { color: var(--white-soft); }
@media (max-width: 780px) {
	.price-glance-grid { grid-template-columns: 1fr; }
	.price-glance-card { border-right: none; border-bottom: 1px solid var(--line); }
	.price-glance-section, .onboarding-section { padding: 52px 0; }
	.onboarding-table th, .onboarding-table td { padding: 11px 12px; font-size: 13px; }
}

/* ---- /compare sticky jump nav + matrices ------------------------------- */
.compare-jumpnav { position: sticky; top: var(--nav-height); z-index: 50; background: rgba(10, 22, 40, 0.92); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.compare-jumpnav-inner { max-width: var(--content-wide); margin: 0 auto; padding: 14px 40px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.compare-jumpnav-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--white-faint); margin-right: 8px; }
.compare-jumpnav a { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--white-soft); padding: 8px 16px; border: 1px solid var(--line); background: transparent; cursor: pointer; transition: all 0.25s; text-decoration: none; }
.compare-jumpnav a:hover { color: var(--navy); background: var(--gold); border-color: var(--gold); }

.compare-section { padding: 56px 0; background: var(--navy); border-top: 1px solid var(--line); scroll-margin-top: 130px; }
.compare-section.alt { background: var(--navy-2); }
.compare-head { margin-bottom: 40px; }
.compare-sub { font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: var(--white-soft); max-width: 720px; margin-top: 18px; }
.compare-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--gold-soft) transparent; }
.compare-scroll::-webkit-scrollbar { height: 6px; }
.compare-scroll::-webkit-scrollbar-thumb { background: var(--gold-soft); border-radius: 3px; }
.compare-matrix { width: 100%; min-width: 760px; border-collapse: collapse; font-family: var(--font-body); }
.compare-matrix.cols-3 { min-width: 640px; }
.compare-matrix th, .compare-matrix td { padding: 14px 18px; text-align: center; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--white-soft); vertical-align: middle; }
.compare-matrix thead th { font-family: var(--font-display); font-weight: 400; font-size: 22px; color: var(--white); border-bottom: 1px solid var(--line-bright); padding-top: 10px; padding-bottom: 10px; }
.compare-matrix .cmp-feature-col { text-align: left; color: var(--white); font-size: 13px; font-weight: 400; width: 34%; min-width: 220px; }
.compare-matrix thead .cmp-feature-col { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--white-faint); }
.cmp-price-row td { border-bottom: 1px solid var(--line-bright); padding-top: 4px; }
.cmp-price { font-family: var(--font-display); font-style: italic; font-size: 24px; color: var(--gold); }
.cmp-yes { color: var(--gold); font-size: 15px; }
.cmp-no { color: var(--white-dim); }
.cmp-val { color: var(--white-soft); font-size: 12px; line-height: 1.4; }
.cmp-col-featured { background: rgba(200, 169, 107, 0.06); }
.compare-matrix thead th.cmp-col-featured { color: var(--gold); }
.cmp-cta-row td { border-bottom: none; padding-top: 22px; }
.cmp-cta-row .btn-tier { width: auto; padding: 10px 28px; }
.compare-footnote { margin-top: 22px; font-size: 13px; line-height: 1.6; color: var(--white-faint); max-width: 820px; }
.cmp-inline-link { color: var(--gold); cursor: pointer; background: none; border: none; font-family: inherit; font-size: 13px; padding: 0; border-bottom: 1px solid var(--line-gold); transition: border-color 0.2s; text-decoration: none; }
.cmp-inline-link:hover { border-bottom-color: var(--gold); }
@media (max-width: 760px) {
	.compare-jumpnav-inner { padding: 12px 20px; gap: 6px; }
	.compare-jumpnav a { padding: 7px 12px; font-size: 10px; }
}

/* ---- "What each stack replaces" comparison grid (pricing page) ----------- */
.cmp-row {
	display: grid;
	grid-template-columns: 200px 1fr 1fr 1fr;
	gap: 16px;
	padding: 24px 0;
	border-bottom: 1px solid var(--line);
}
.cmp-row:last-child { border-bottom: none; }
.cmp-cell {
	padding: 16px;
	font-family: var(--font-body);
	font-weight: 300;
	font-size: 15px;
	line-height: 1.55;
	color: var(--text-secondary);
}
.cmp-cell strong { color: var(--text); font-weight: 500; }
@media (max-width: 780px) {
	.cmp-row { grid-template-columns: 1fr; gap: 0; padding: 16px 0; }
	.cmp-row-header { display: none; }
	.cmp-cell { padding: 10px 0; border-bottom: 1px solid var(--line); }
	.cmp-cell:last-child { border-bottom: none; }
}

/* ---- Pricing FAQ accordion (pricing page) ------------------------------- */
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
	padding: 28px 0 28px 36px;
	list-style: none; cursor: pointer; position: relative;
	font-family: var(--font-display); font-weight: 400;
	font-size: clamp(18px, 2vw, 24px); line-height: 1.3;
	letter-spacing: -0.01em; color: var(--text);
	transition: color 0.25s;
}
.faq-item summary:hover { color: var(--gold); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { display: none; }
.faq-item summary::before {
	content: '+'; position: absolute; left: 0; top: 50%;
	transform: translateY(-50%);
	font-family: var(--font-body); font-weight: 200;
	font-size: 28px; color: var(--gold);
	transition: transform 0.25s;
}
.faq-item[open] summary::before { transform: translateY(-50%) rotate(45deg); }
.faq-item > p {
	padding: 0 0 28px 36px;
	font-family: var(--font-body);
	font-size: 15px; line-height: 1.75;
	color: var(--text-secondary);
	margin: 0;
}