/* r256 (2026-11-10) Sitewide layout standard for template pages (sp2 / sv2 classes): framed panels, tiles,
   aligned two-column sections and fully ruled tables. Loaded from header.php with the v2 header (not on paid LPs). */
:root{--sx-gold:#C6A85A;--sx-gold-d:#A88A3F;--sx-ink:#14213D;--sx-mute:#4A5568;--sx-line:#E7DCC6;--sx-on2:#D6DEEA}

/* 1. Short answer / who we are: framed panel across the full container */
html body #sp-answer .sp2-wrap{background:#fff;border:1px solid var(--sx-line);border-left:4px solid var(--sx-gold);border-radius:18px;padding:34px 40px 26px!important;box-shadow:0 14px 34px rgba(20,33,61,.07);display:block!important}
html body #sp-answer .sp2-wrap > div{max-width:none!important}
html body #sp-answer .sp2-answer{max-width:none!important;font-size:1.08rem!important;line-height:1.75!important;color:var(--sx-ink)}
html body #sp-answer .sp2-ver{max-width:none!important;margin-top:18px!important;padding-top:14px;border-top:1px solid var(--sx-line)}

/* 2. "Is this you?" two-column section: two framed panels of equal height, tops aligned */
html body #sp-fit .sp2-two{align-items:stretch!important;gap:24px!important}
html body #sp-fit .sp2-two > div{padding:34px 36px!important;border-radius:18px;border:1px solid rgba(198,168,90,.4);border-top:3px solid var(--sx-gold)!important;background:rgba(255,255,255,.05);border-left-width:1px!important}
html body #sp-fit .sp2-two .sp2-h2{font-size:clamp(1.6rem,2.4vw,2.05rem)!important;line-height:1.2!important;margin-bottom:20px!important}
html body #sp-fit .sp2-pain > p:first-child{font-size:clamp(1.3rem,1.9vw,1.6rem)!important;line-height:1.3!important;margin:0 0 16px!important;padding-bottom:16px;border-bottom:1px solid rgba(198,168,90,.35)}
html body #sp-fit .sp2-pain{border-left-color:rgba(198,168,90,.4)!important;padding-left:36px!important}
html body #sp-fit .sp2-pain p{max-width:none!important}
html body .sp2-p#sp-fit .sp2-two > div{background:#fff;border-color:var(--sx-line)}

/* 3. Tables: every cell ruled, header row and short values centred, label column left */
html body .sp2-sec table:is(.sp2-sheet,.sp2-gl),html body .sv2-scroll table{border-collapse:separate!important;border-spacing:0!important;border:1px solid var(--sx-line)!important;border-radius:14px!important;overflow:hidden;box-shadow:0 10px 26px rgba(20,33,61,.06)}
html body .sp2-sec table:is(.sp2-sheet,.sp2-gl) :is(th,td),html body .sv2-scroll table :is(th,td){border-right:1px solid var(--sx-line)!important;border-bottom:1px solid var(--sx-line)!important;vertical-align:middle!important;padding:15px 18px!important}
html body .sp2-sec table:is(.sp2-sheet,.sp2-gl) tr > :last-child,html body .sv2-scroll table tr > :last-child{border-right:0!important}
html body .sp2-sec table:is(.sp2-sheet,.sp2-gl) tbody tr:last-child > *,html body .sv2-scroll table tbody tr:last-child > *{border-bottom:0!important}
html body .sp2-sec table:is(.sp2-sheet,.sp2-gl) thead th,html body .sv2-scroll table thead th{text-align:center!important;border-right-color:rgba(255,255,255,.14)!important;border-bottom:3px solid var(--sx-gold)!important}
html body .sp2-sec table:is(.sp2-sheet,.sp2-gl) thead th:first-child,html body .sv2-scroll table thead th:first-child{text-align:left!important}
html body .sp2-sec table:is(.sp2-sheet,.sp2-gl) tbody td,html body .sv2-scroll table tbody td{text-align:center!important}
html body .sp2-sec table:is(.sp2-sheet,.sp2-gl) tbody td.cp-tl,html body .sv2-scroll table tbody td.cp-tl,html body .sp2-sec table thead th.cp-tl,html body .sv2-scroll table thead th.cp-tl{text-align:left!important}
html body .sp2-sec table:is(.sp2-sheet,.sp2-gl) tbody th,html body .sv2-scroll table tbody th{text-align:left!important}
html body .sp2-sec.sp2-l table:is(.sp2-sheet,.sp2-gl),html body .sp2-l .sv2-scroll table{border-color:rgba(198,168,90,.35)!important}

/* 4. Card grids and "what you can count on" lists: equal tiles */
html body .sp2-sec .sv2-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px!important;margin-top:26px!important}
html body .sp2-sec .sv2-grid > div{display:flex;flex-direction:column;gap:6px;padding:24px 26px!important;border-radius:14px!important;border:1px solid var(--sx-line)!important;border-top:3px solid var(--sx-gold)!important;background:#fff!important;box-shadow:0 10px 26px rgba(20,33,61,.06)!important}
html body .sp2-sec.sp2-l .sv2-grid > div{background:rgba(255,255,255,.06)!important;border-color:rgba(198,168,90,.4)!important;border-top-color:var(--sx-gold)!important;box-shadow:none!important}
html body .sp2-sec.sp2-l .sv2-grid h3,html body .sp2-sec.sp2-l .sv2-grid h3 a{color:#fff!important}
html body .sp2-sec.sp2-l .sv2-grid p{color:var(--sx-on2)!important}
html body .sp2-sec.sp2-l .sv2-grid p a{color:#E6CD8C!important}
html body .sp2-sec.sp2-p .sv2-grid h3,html body .sp2-sec.sp2-p .sv2-grid h3 a{color:var(--sx-ink)!important}
html body .sp2-sec.sp2-p .sv2-grid p{color:var(--sx-mute)!important}
html body .sp2-inc{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important;margin-top:26px!important;padding:0!important;list-style:none}
html body .sp2-inc li{display:flex;flex-direction:column;gap:6px;margin:0!important;padding:22px 24px 22px 56px!important;position:relative;border:1px solid var(--sx-line)!important;border-radius:14px;background:#fff;box-shadow:0 8px 22px rgba(20,33,61,.05)}
html body .sp2-inc li::before{content:"";position:absolute;left:20px;top:24px;width:22px;height:22px;border-radius:50%;background:rgba(198,168,90,.16);box-shadow:inset 0 0 0 1.5px var(--sx-gold)}
html body .sp2-inc li::after{content:"";position:absolute;left:27px;top:30px;width:8px;height:5px;border-left:2px solid var(--sx-gold-d);border-bottom:2px solid var(--sx-gold-d);transform:rotate(-45deg)}
html body .sp2-inc li > svg{display:none}
html body .sp2-inc li strong{font:600 1rem/1.35 var(--font-ui,'Poppins',sans-serif);color:var(--sx-ink)}
html body .sp2-inc li span,html body .sp2-inc li p{font-size:.92rem;line-height:1.55;color:var(--sx-mute);max-width:none!important}
html body .sp2-l .sp2-inc li{background:rgba(255,255,255,.06);border-color:rgba(198,168,90,.4)!important;box-shadow:none}
html body .sp2-l .sp2-inc li strong{color:#fff}
html body .sp2-l .sp2-inc li span,html body .sp2-l .sp2-inc li p{color:var(--sx-on2)}

/* 5. Closing CTA and sources / related footer: framed cards */
html body .sp2-close{background:#fff;border:1px solid var(--sx-line);border-top:3px solid var(--sx-gold);border-radius:20px;padding:40px 44px;box-shadow:0 18px 40px rgba(20,33,61,.07)}
html body .sp2-l .sp2-close{background:rgba(255,255,255,.06);border-color:rgba(198,168,90,.45);box-shadow:none}
html body .sp2-l .sp2-close :is(h2,.sp2-h2){color:#fff!important}
html body .sp2-l .sp2-close p{color:var(--sx-on2)!important}
html body :is(.sv2-foot,.sp2-foot){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px!important;border-top:0!important;margin-top:28px!important;padding-top:0!important}
html body :is(.sv2-foot,.sp2-foot) > div{background:#fff;border:1px solid var(--sx-line);border-radius:16px;padding:24px 26px}
html body :is(.sv2-foot,.sp2-foot) h2{font-size:1.15rem!important;margin:0 0 12px!important;padding-bottom:10px;border-bottom:1px solid var(--sx-line)}
html body :is(.sv2-foot-one,.sp2-foot-one){grid-template-columns:1fr!important}
html body .sp2-l :is(.sv2-foot,.sp2-foot) > div{background:rgba(255,255,255,.06);border-color:rgba(198,168,90,.35)}
html body .sp2-l :is(.sv2-foot,.sp2-foot) h2{color:#fff!important;border-bottom-color:rgba(198,168,90,.35)}
html body .sp2-l :is(.sv2-foot,.sp2-foot) :is(li,p){color:var(--sx-on2)!important}
html body .sp2-l :is(.sv2-foot,.sp2-foot) a{color:#E6CD8C!important}

/* 6. Notes under tables and intro lines run the full width, so their right edge lines up with the table */
html body .sp2-sec .sp2-wrap > p:is(:has(+ .sv2-scroll),:has(+ table),:has(+ .sp2-cards)),html body .sp2-sec .sp2-wrap > :is(table,.sv2-scroll) ~ p,html body .sv2-note{max-width:none!important}
/* 7. Prose sections (kicker, heading, paragraphs only): framed panel; two balanced columns for two or more paragraphs */
html body .sp2-sec .sp2-wrap:not(:has(> :is(.sv2-grid,.sv2-scroll,.sp2-cards,.sp2-inc,.sp2-steps,.sp2-faq,.sp2-close,.sv2-foot,.sp2-foot,.sp2-pain,.sp2-two,.gp-gal,table,form,ul,ol,figure,div:not(.sv2-mid)))):has(> h2.sp2-h2 + p){border-radius:20px;padding:40px 44px 34px!important}
html body .sp2-sec.sp2-p .sp2-wrap:not(:has(> :is(.sv2-grid,.sv2-scroll,.sp2-cards,.sp2-inc,.sp2-steps,.sp2-faq,.sp2-close,.sv2-foot,.sp2-foot,.sp2-pain,.sp2-two,.gp-gal,table,form,ul,ol,figure,div:not(.sv2-mid)))):has(> h2.sp2-h2 + p){background:#fff;border:1px solid var(--sx-line);border-top:3px solid var(--sx-gold);box-shadow:0 14px 34px rgba(20,33,61,.06)}
html body .sp2-sec.sp2-l .sp2-wrap:not(:has(> :is(.sv2-grid,.sv2-scroll,.sp2-cards,.sp2-inc,.sp2-steps,.sp2-faq,.sp2-close,.sv2-foot,.sp2-foot,.sp2-pain,.sp2-two,.gp-gal,table,form,ul,ol,figure,div:not(.sv2-mid)))):has(> h2.sp2-h2 + p){background:rgba(255,255,255,.05);border:1px solid rgba(198,168,90,.38);border-top:3px solid var(--sx-gold)}
html body .sp2-sec .sp2-wrap:has(> h2.sp2-h2 + p + p):not(:has(> :is(.sv2-grid,.sv2-scroll,.sp2-cards,.sp2-inc,.sp2-steps,.sp2-faq,.sp2-close,.sv2-foot,.sp2-foot,.sp2-pain,.sp2-two,.gp-gal,table,form,ul,ol,figure,div))){column-count:2;column-gap:56px;column-rule:1px solid rgba(198,168,90,.35)}
html body .sp2-sec .sp2-wrap:has(> h2.sp2-h2 + p + p):not(:has(> :is(.sv2-grid,.sv2-scroll,.sp2-cards,.sp2-inc,.sp2-steps,.sp2-faq,.sp2-close,.sv2-foot,.sp2-foot,.sp2-pain,.sp2-two,.gp-gal,table,form,ul,ol,figure,div))) > :is(.sp2-kick,h2){column-span:all}
html body .sp2-sec .sp2-wrap:has(> h2.sp2-h2 + p + p):not(:has(> :is(.sv2-grid,.sv2-scroll,.sp2-cards,.sp2-inc,.sp2-steps,.sp2-faq,.sp2-close,.sv2-foot,.sp2-foot,.sp2-pain,.sp2-two,.gp-gal,table,form,ul,ol,figure,div))) > p{break-inside:avoid;max-width:none!important}
@media (max-width:1220px){html body .sp2-sec .sp2-wrap:not(:has(> :is(.sv2-grid,.sv2-scroll,.sp2-cards,.sp2-inc,.sp2-steps,.sp2-faq,.sp2-close,.sv2-foot,.sp2-foot,.sp2-pain,.sp2-two,.gp-gal,table,form,ul,ol,figure,div:not(.sv2-mid)))):has(> h2.sp2-h2 + p){margin-left:20px!important;margin-right:20px!important}}
@media (max-width:900px){html body .sp2-sec .sp2-wrap:has(> h2.sp2-h2 + p + p){column-count:1!important}}
@media (max-width:640px){html body .sp2-sec .sp2-wrap:not(:has(> :is(.sv2-grid,.sv2-scroll,.sp2-cards,.sp2-inc,.sp2-steps,.sp2-faq,.sp2-close,.sv2-foot,.sp2-foot,.sp2-pain,.sp2-two,.gp-gal,table,form,ul,ol,figure,div:not(.sv2-mid)))):has(> h2.sp2-h2 + p){margin-left:14px!important;margin-right:14px!important;padding:24px 20px!important}}

@media (max-width:1220px){html body #sp-answer .sp2-wrap{margin-left:20px!important;margin-right:20px!important}}
@media (max-width:900px){html body .sp2-inc{grid-template-columns:1fr 1fr!important}html body #sp-fit .sp2-pain{padding-left:24px!important}}
@media (max-width:640px){
 html body #sp-answer .sp2-wrap{margin-left:14px!important;margin-right:14px!important;padding:24px 20px!important}
 html body #sp-fit .sp2-two > div{padding:24px 20px!important}
 html body .sp2-sec .sv2-grid,html body .sp2-inc,html body :is(.sv2-foot,.sp2-foot){grid-template-columns:1fr!important}
 html body .sp2-close{padding:28px 22px}
 html body .sv2-scroll table :is(th,td),html body .sp2-sec table :is(th,td){padding:11px 12px!important}
}

/* panels line up with the content edge of neighbouring sections (wrap content = 1160 - 2x24) */
html body #sp-answer .sp2-wrap,
html body .sp2-sec .sp2-wrap:not(:has(> :is(.sv2-grid,.sv2-scroll,.sp2-cards,.sp2-inc,.sp2-steps,.sp2-faq,.sp2-close,.sv2-foot,.sp2-foot,.sp2-pain,.sp2-two,.gp-gal,table,form,ul,ol,figure,div:not(.sv2-mid)))):has(> h2.sp2-h2 + p){max-width:1112px!important;margin-left:auto;margin-right:auto}
@media (max-width:1220px){
 html body #sp-answer .sp2-wrap,
 html body .sp2-sec .sp2-wrap:not(:has(> :is(.sv2-grid,.sv2-scroll,.sp2-cards,.sp2-inc,.sp2-steps,.sp2-faq,.sp2-close,.sv2-foot,.sp2-foot,.sp2-pain,.sp2-two,.gp-gal,table,form,ul,ol,figure,div:not(.sv2-mid)))):has(> h2.sp2-h2 + p){margin-left:24px!important;margin-right:24px!important}
}

/* tile counts that do not fill three columns evenly */
html body .sp2-inc:is(:has(> li:nth-child(2):last-child),:has(> li:nth-child(4):last-child)){grid-template-columns:repeat(2,minmax(0,1fr))!important}
html body .sp2-inc:has(> li:nth-child(8):last-child){grid-template-columns:repeat(4,minmax(0,1fr))!important}
@media (max-width:900px){html body .sp2-inc:has(> li:nth-child(8):last-child){grid-template-columns:1fr 1fr!important}}
@media (max-width:640px){html body .sp2-inc:is(:has(> li:nth-child(2):last-child),:has(> li:nth-child(4):last-child),:has(> li:nth-child(8):last-child)){grid-template-columns:1fr!important}}