/* Solutions page (was an inline <style> in pages/solutions).
   Spacing snapped to the 9-step scale in frnd-tokens.css. Text styles (size, weight, case) come from frnd.css; this file sets layout, color and spacing only. */
/* Section rhythm: every section shares the same vertical padding and header-to-content gap */
section[id^="sol-"], section#t2-features { position: relative; padding-top: 2rem; padding-bottom: 2rem; }
section[id^="sol-"] .section-title, section#t2-features .section-title { margin: 0 0 var(--space-12); }
section[id^="sol-"] .section-title .lp-h2:last-child, section#t2-features .section-title .lp-h2:last-child { margin-bottom: 0; }
@media (max-width: 61.9375em) { section[id^="sol-"], section#t2-features { padding-top: 2rem; padding-bottom: 2rem; } section[id^="sol-"] .section-title, section#t2-features .section-title { margin-bottom: var(--space-8); } }
/* Pricing cards (#sol-pricing) */
#sol-pricing .pricing-one__section-title { margin-bottom: var(--space-12); }
#sol-pricing .tabed-content .row { row-gap: 0; align-items: stretch; }
#sol-pricing .tabed-content .row > [class*="col-"] { display: flex; margin-bottom: var(--space-8); }
#sol-pricing .pricing-one__single { width: 100%; margin-bottom: 0; display: flex; flex-direction: column; padding: var(--space-12) var(--space-8) var(--space-12); overflow: hidden; border-radius: 20px; border: 1px solid var(--thm-border, #3c3c77); background: linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 45%), var(--thm-surface, #15152c); box-shadow: 0 10px 30px rgba(0,0,0,.18); transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
#sol-pricing .pricing-one__single::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--thm-base, #ee4f27), #ff9b00); opacity: .55; }
#sol-pricing .pricing-one__single:hover { transform: translateY(-8px); border-color: var(--thm-base, #ee4f27); box-shadow: 0 22px 48px rgba(0,0,0,.32); }
#sol-pricing .pricing-one__single--featured { border: 2px solid var(--thm-base, #ee4f27); background: var(--thm-surface, #15152c); box-shadow: 0 18px 44px rgba(238,79,39,.22); }
#sol-pricing .pricing-one__single--featured::before { height: 6px; opacity: 1; }
@media (min-width: 75em) { #sol-pricing .pricing-one__single--featured { transform: translateY(-14px); } #sol-pricing .pricing-one__single--featured:hover { transform: translateY(-22px); } }
#sol-pricing .pricing-one__popular { top: 22px; right: 22px; display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: 999px; background: var(--thm-base, #ee4f27); color: #fff; font-size: 0.75rem; margin: 0; }
#sol-pricing .pricing-one__tagline { font-size: 0.875rem; color: var(--thm-base, #ee4f27); margin-bottom: var(--space-2); }
#sol-pricing .pricing-one__desc { font-size: 0.9375rem; color: var(--thm-muted, #a1aac9); margin: 0 0 var(--space-6); min-height: 46px; }
#sol-pricing .pricing-one__price { display: flex; justify-content: center; align-items: baseline; text-align: center; color: var(--thm-white, #fff); margin: 0; }
#sol-pricing .pricing-one__per { color: var(--thm-muted, #a1aac9); margin-left: var(--space-1); }
#sol-pricing .pricing-one__text { margin: var(--space-3) 0 0; font-size: 0.875rem; color: var(--thm-muted, #a1aac9); }
#sol-pricing .pricing-one__btn-box { margin: var(--space-6) 0 0; }
#sol-pricing .pricing-one__btn { display: flex; justify-content: center; width: 100%; padding: var(--space-4) var(--space-6); border-radius: 10px; }
/* All pricing buttons: standard lavender (.thm-btn-lavender colors), no hover animation */
#sol-pricing .pricing-one__btn { background: #6b21ef; border: 1px solid #6b21ef; color: #fff; transition: none; transform: none; box-shadow: none; }
#sol-pricing .pricing-one__btn::before { display: none; }
#sol-pricing .pricing-one__btn:hover, #sol-pricing .pricing-one__btn:focus { background: #7c35f5; border-color: #7c35f5; color: #fff; transform: none; box-shadow: none; }
#sol-pricing .pricing-one__points { margin: var(--space-8) 0 0; padding-top: var(--space-6); border-top: 1px solid var(--thm-border, #3c3c77); flex: 1 1 auto; }
#sol-pricing .pricing-one__points li { align-items: flex-start; }
#sol-pricing .pricing-one__points-lead .text { margin-left: 0; }
#sol-pricing .pricing-one__points-lead .text p { font-size: 0.8125rem; color: var(--thm-muted, #a1aac9); }
#sol-pricing .pricing-one__points-lead + li { margin-top: var(--space-3); }
#sol-pricing .pricing-one__points li + li { margin-top: var(--space-3); }
#sol-pricing .pricing-one__points li .circle-box { flex: 0 0 22px; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: rgba(238,79,39,.16); justify-content: center; }
#sol-pricing .pricing-one__points li .circle-box::after { content: ""; width: 5px; height: 9px; margin-top: -2px; border: solid var(--thm-base, #ee4f27); border-width: 0 2px 2px 0; transform: rotate(45deg); }
#sol-pricing .pricing-one__points li .text { margin-left: var(--space-3); }

/* Diagnosis section (#sol-diagnosis) */
/* Side-by-side journey comparison (#sol-benefits) */
.sol-compare { margin-top: var(--space-12); border: 1px solid var(--thm-border, #3c3c77); border-radius: 18px; overflow: hidden; background: var(--thm-surface, #15152c); }
.sol-compare__head { display: grid; grid-template-columns: 1fr 1fr; gap: 0; font-size: 0.75rem; color: var(--thm-muted, #a1aac9); border-bottom: 1px solid var(--thm-border, #3c3c77); }
.sol-compare__head > span, .sol-compare__head > h3, .sol-compare__head > h4 { padding: var(--space-4) var(--space-6); margin: 0; }
.sol-compare__head > :first-child { grid-column: 1 / -1; text-align: center; border-bottom: 1px solid var(--thm-border, #3c3c77); }
.sol-compare__head-without { color: var(--thm-base, #ee4f27); text-align: center; }
.sol-compare__head-with { color: #35a670; background: rgba(53,166,112,.06); text-align: center; }
.sol-compare__row { display: grid; grid-template-columns: 1fr 1fr; }
.sol-compare__row + .sol-compare__row { border-top: 1px dashed var(--thm-border, #3c3c77); }
.sol-compare__step { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-6); background: rgba(255,255,255,.035); border-bottom: 1px solid var(--thm-border, #3c3c77); }
.sol-compare__step > div { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
.sol-compare__num { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: rgba(238,79,39,.14); color: var(--thm-base, #ee4f27); font-size: 0.875rem; }
.sol-compare__step h4 { margin: 0; color: var(--thm-white, #fff); }
.sol-compare__step span:not(.sol-compare__num) { font-size: 0.6875rem; color: var(--thm-muted, #a1aac9); }
.sol-compare__cell { padding: var(--space-6); display: flex; flex-direction: column; align-items: flex-start; }
.sol-compare__cell p { margin: 0; font-size: 0.9375rem; flex: 1 1 auto; }
.sol-compare__cell--with { background: rgba(53,166,112,.06); border-left: 1px solid var(--thm-border, #3c3c77); }
.sol-compare__cell--wide { grid-column: 1 / -1; }
.sol-compare__label { display: none; font-size: 0.6875rem; margin-bottom: var(--space-2); }
.sol-compare__cell--without .sol-compare__label { color: var(--thm-base, #ee4f27); }
.sol-compare__cell--with .sol-compare__label { color: #35a670; }
.sol-compare__tag { display: inline-block; margin-top: var(--space-3); padding: 3px var(--space-3); border-radius: 999px; font-size: 0.875rem; }
.sol-compare__tag--leak, .sol-compare__tag--win { align-self: center; }
.sol-compare__tag--leak { border: 1px solid rgba(238,79,39,.45); color: var(--thm-base, #ee4f27); }
.sol-compare__tag--win { border: 1px solid rgba(53,166,112,.5); color: #35a670; }
.sol-compare__tag--yours { border: 1px solid var(--thm-border, #3c3c77); color: var(--thm-muted, #a1aac9); }
.sol-compare__row--yours { background: rgba(255,255,255,.03); }
.sol-compare__row--yours .sol-compare__num { background: rgba(255,255,255,.08); color: var(--thm-white, #fff); }
@media (max-width: 61.9375em) {
	.sol-compare__head { display: none; }
	.sol-compare__row { grid-template-columns: 1fr; }
	.sol-compare__cell { padding-top: var(--space-3); }
	.sol-compare__cell--with { border-left: 0; border-top: 1px solid var(--thm-border, #3c3c77); }
	.sol-compare__cell--wide { grid-column: auto; }
	.sol-compare__label { display: block; }
}
.sol-funnel { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.sol-funnel__head { grid-column: 1 / -1; display: flex; justify-content: center; gap: var(--space-3); text-align: center; color: var(--thm-muted, #a1aac9); }
.sol-funnel__head span + span::before { content: "\00b7"; margin-right: var(--space-3); }
.sol-funnel__row { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6) var(--space-6); border-radius: 16px; border: 1px solid var(--thm-border, #3c3c77); background: var(--thm-black, #111022); transition: transform .3s ease, border-color .3s ease; }
.sol-funnel__row:hover { transform: translateY(-4px); border-color: var(--thm-base, #ee4f27); }
.sol-funnel__body { display: flex; flex-direction: column; flex: 1 1 auto; align-items: flex-start; }
.sol-funnel__body p { flex: 1 1 auto; }

.sol-funnel__stage { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; background: rgba(238,79,39,.14); color: var(--thm-base, #ee4f27); font-size: 0.875rem; }
.sol-funnel__row h4 { margin: 0 0 var(--space-1); color: var(--thm-white, #fff); }
.sol-funnel__row h4 span { display: block; margin: 2px 0 0; font-size: 0.75rem; color: var(--thm-muted, #a1aac9); }
.sol-funnel__row p { margin: 0; font-size: 0.9375rem; }
.sol-funnel__leak { display: inline-block; margin-top: var(--space-2); padding: 3px var(--space-3); border-radius: 999px; border: 1px solid rgba(238,79,39,.45); color: var(--thm-base, #ee4f27); font-size: 0.875rem; }
.sol-funnel__win { display: inline-block; margin-top: var(--space-2); padding: 3px var(--space-3); border-radius: 999px; border: 1px solid rgba(53,166,112,.5); color: #35a670; font-size: 0.875rem; }
.sol-funnel__fix { display: block; margin-top: var(--space-2); font-size: 0.875rem; color: var(--thm-text, #e2e6ff); }
.sol-funnel__fix strong { color: var(--thm-base, #ee4f27); }
.sol-funnel__row--yours { background: rgba(255,255,255,.04); border-style: dashed; border-color: #6b21ef; }
@media (max-width: 61.9375em) { .sol-funnel { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 35.9375em) { .sol-funnel { grid-template-columns: 1fr; } }
.sol-funnel__row--yours .sol-funnel__stage { background: rgba(255,255,255,.08); color: var(--thm-white, #fff); }
.sol-funnel__yours { display: inline-block; margin-top: var(--space-2); padding: 3px var(--space-3); border-radius: 999px; border: 1px solid var(--thm-border, #3c3c77); color: var(--thm-muted, #a1aac9); font-size: 0.75rem; }
#sol-diagnosis .sol-term { height: 100%; padding: var(--space-6) var(--space-6); border-left: 3px solid var(--thm-base, #ee4f27); background: rgba(255,255,255,.03); border-radius: 0 12px 12px 0; }
#sol-diagnosis .sol-term dt { font-size: 0.8125rem; color: var(--thm-base, #ee4f27); margin-bottom: var(--space-2); }
#sol-diagnosis .sol-term dd { margin: 0; font-size: 0.9375rem; color: var(--thm-text, #e2e6ff); }

/* Hero: pure white, no gradient glow (same treatment as #lp-hero in lp-theme.css) */
#sol-hero { background: #FFFFFF; }
#sol-hero.page-title::before { content: none; }

/* Pricing: no gradient wash on card hover */
#sol-pricing .pricing-one__overly-color { display: none; }

/* Pricing cards (#month) — revisit, 2026-10-17
   Prefix beats the site-wide text styles in frnd.css. */
/* 1. No color bar across the top of the cards */
#sol-pricing .pricing-one__single::before,
#sol-pricing .pricing-one__single--featured::before { content: none; }
/* 2. Larger price: Headline size */
:root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) #sol-pricing .pricing-one__price { font-size: var(--headline-size); line-height: 1.1; font-weight: 700; }
/* 3. Centered button, sized to its label */
#sol-pricing .pricing-one__btn-box { display: flex; justify-content: center; }
:root #sol-pricing .pricing-one__btn { display: inline-flex; width: auto; margin: 0; }
/* 4. Feature bullets: checkmark only, no circle behind it */
:root #sol-pricing .pricing-one__points li .circle-box { background: transparent; border-radius: 0; }
/* 5. Plan names (Free / Starter / Pro): Heading size, bold */
:root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) #sol-pricing .pricing-one__tagline { font-family: var(--heading-font); font-size: var(--heading-size); font-weight: 700; line-height: 1.2; color: var(--thm-base, #EE4F27); margin-bottom: var(--space-2); }