/* Native component layout and typography live in Atomic global classes.
   Retained CSS: decoration, state/descendant rules and breakpoint exceptions. */
.lcsg .lcsg-background-list { display: flex; flex-direction: column; gap: 32px; }
.lcsg .lcsg-background-card { display: flex; flex-direction: column; gap: 16px; }
.lcsg .lcsg-background-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; flex-wrap: wrap; }
.lcsg .lcsg-background-title { font: 500 24px/1.25 'Fraunces',serif; }
.lcsg .lcsg-background-use { font: 500 12px/1.5 'DM Sans',sans-serif; color: #40516d; }
.lcsg .lcsg-background-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lcsg .lc-bg-sample { --bg-base: var(--choice-paper); --bg-ink: var(--choice-navy); --bg-accent: var(--choice-apricot); isolation: isolate; overflow: hidden; background: var(--bg-base); color: var(--bg-ink); border: 1px solid #1a305b1c; display: flex; }
.lcsg .lc-bg-sample--navy { --bg-base: var(--choice-navy); --bg-ink: #fff; border-color: transparent; }
.lcsg .lc-bg-art { inset: 0; pointer-events: none; }
.lcsg .lc-bg-art::before, .lcsg .lc-bg-art::after { content: ''; position: absolute; pointer-events: none; }
.lcsg .lc-bg-sample::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg,var(--bg-base) 0%,color-mix(in srgb,var(--bg-base) 94%,transparent) 22%,color-mix(in srgb,var(--bg-base) 78%,transparent) 48%,transparent 80%); }
.lcsg .lc-bg-sample::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: url('backgrounds/fine-grain.svg') repeat; opacity: .055; mix-blend-mode: multiply; }
.lcsg .lc-bg-sample--navy::after { opacity: .07; mix-blend-mode: screen; }
.lcsg .lc-bg-copy { max-width: 320px; width: 65%; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.lcsg .lc-bg-title { font: 400 32px/1.15 'Fraunces',serif; text-wrap: balance; }
.lcsg .lc-bg-description { font: 400 15px/1.65 'DM Sans',sans-serif; }
.lcsg .lc-bg-surface { font: 600 10px/1.5 'DM Sans',sans-serif; letter-spacing: .13em; text-transform: uppercase; }
.lcsg .lc-bg-rule { background: var(--choice-apricot); }
.lcsg .lc-bg--haze .lc-bg-art { inset: -12%; background: radial-gradient(ellipse at 90% 85%,var(--choice-coral) 0%,transparent 43%),radial-gradient(ellipse at 80% 50%,var(--choice-gold) 0%,transparent 48%),radial-gradient(ellipse at 70% 10%,var(--choice-apricot) 0%,transparent 55%); opacity: .65; }
.lcsg .lc-bg--haze.lc-bg-sample--navy .lc-bg-art { opacity: .38; }
.lcsg .lc-bg--rays .lc-bg-art { background: radial-gradient(ellipse at 100% 100%,color-mix(in srgb,var(--choice-apricot) 38%,transparent),transparent 70%); }
.lcsg .lc-bg--rays .lc-bg-art::before { inset: 0; background: linear-gradient(145deg,var(--choice-apricot),var(--choice-gold)); mask: url('backgrounds/corner-sunline.svg') center/100% 100% no-repeat; opacity: .55; }
.lcsg .lc-bg--rays.lc-bg-sample--navy .lc-bg-art::before { opacity: .32; }
.lcsg .lc-bg--veil .lc-bg-art::before { width: 68%; height: 135%; right: -14%; top: -15%; border-radius: 44%; transform: rotate(28deg); background: linear-gradient(105deg,transparent 5%,color-mix(in srgb,var(--choice-gold) 65%,transparent) 30%,color-mix(in srgb,var(--choice-coral) 40%,transparent) 47%,color-mix(in srgb,var(--choice-apricot) 78%,transparent) 72%,transparent); box-shadow: inset 2px 0 2px #ffffff9c,inset -25px 0 42px #fff8ef66; opacity: .8; }
.lcsg .lc-bg--veil .lc-bg-art::after { width: 48%; height: 120%; right: -4%; top: 15%; border-radius: 44%; transform: rotate(-18deg); background: linear-gradient(130deg,#ffffff80,transparent 40%,color-mix(in srgb,var(--choice-gold) 60%,transparent)); box-shadow: inset 1px 1px 2px #ffffff80; opacity: .6; }
.lcsg .lc-bg--veil.lc-bg-sample--navy .lc-bg-art { opacity: .65; }
.lcsg .lc-bg--horizon .lc-bg-art::before { width: 110%; height: 145%; right: -55%; bottom: -50%; border-radius: 50%; background: linear-gradient(125deg,color-mix(in srgb,var(--choice-apricot) 80%,var(--bg-base)),color-mix(in srgb,var(--choice-gold) 45%,var(--bg-base))); box-shadow: -12px 18px 30px #1a305b0d; }
.lcsg .lc-bg--horizon .lc-bg-art::after { width: 150%; height: 100%; right: -58%; bottom: -65%; border-radius: 50%; background: linear-gradient(150deg,var(--bg-base),color-mix(in srgb,var(--choice-gold) 60%,var(--bg-base))); border-top: 1px solid #ffffff55; }
.lcsg .lc-bg--horizon.lc-bg-sample--navy .lc-bg-art { opacity: .48; }
.lcsg .lc-bg--wash .lc-bg-art { inset: -12%; background: radial-gradient(ellipse at 100% 60%,var(--choice-apricot),transparent 68%); opacity: .5; }
.lcsg .lc-bg--wash.lc-bg-sample--navy .lc-bg-art { opacity: .25; }
.lcsg .lc-bg--horizon-tonal { --choice-gold: var(--choice-apricot); }
.lcsg .lc-bg--horizon-tonal.lc-bg-sample--navy { --choice-apricot: color-mix(in srgb,var(--choice-navy) 76%,white); --choice-gold: var(--choice-apricot); }
.lcsg .lc-bg--horizon-tonal.lc-bg-sample--navy .lc-bg-art { opacity: 1; }
.lcsg .lcsg-background-recommendation { padding: 24px; border-left: 3px solid var(--choice-apricot); background: white; border-radius: 0 16px 16px 0; display: flex; flex-direction: column; gap: 8px; }
.lcsg .lcsg-background-sources { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 13px; }
.lcsg .lcsg-background-sources a { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 767px) {
  .lcsg .lcsg-background-pair { grid-template-columns: 1fr; }
  .lcsg .lc-bg-copy { width: 75%; max-width: 260px; }
  .lcsg .lc-bg-title { font-size: 28px; }
  .lcsg .lcsg-background-heading { gap: 8px; }
  .lcsg .lcsg-background-use { max-width: 38ch; }
  .lcsg .lcsg-background-list { gap: 36px; }
}