/* The marketing page's background: see static/js/landing-bg.js. Shared word for
   word between Checked and Stocked. The hero's canvas sits under its content; every
   other section is a band in the product's colour. */
.mk-hero, .mk-sec { position: relative; isolation: isolate; }
.mk-hero > .mk-wrap, .mk-sec > .mk-wrap { position: relative; z-index: 1; }
.bgx { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.bgx-canvas canvas { display: block; width: 100%; height: 100%; }
.mk-sec { overflow: hidden; }

/* ---- Family colour: ticks take the band's text colour (dark text only on Checked's paper band in dark mode) ---- */
.bgx-band .mk-points li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M9 14.4 12.4 17.8 19 11' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.bgx-band .mk-incl li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4 9.4 7.4 12.6 14 5.5' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
html.dark body[data-product="checked"] .bgx-band .mk-points li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M9 14.4 12.4 17.8 19 11' fill='none' stroke='%2311161d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
html.dark body[data-product="checked"] .bgx-band .mk-incl li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4 9.4 7.4 12.6 14 5.5' fill='none' stroke='%2311161d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.bgx-band .btn-primary .bt, .bgx-top .btn-primary .bt { background: var(--band); box-shadow: none; }
.bgx-band .btn-primary .bt::after, .bgx-top .btn-primary .bt::after { background: var(--action); }
/* The logo's dot is drawn white inline; on a band the tile turns white too, so the dot takes the band's colour. */
.bgx-top .sd-logo-mark circle, .bgx-band .sd-logo-mark circle { fill: var(--band) !important; }

.mk-top.bgx-top { transition: background-color .25s, color .25s; }

/* Family colour: the same fine grain as the Full Stop page's chapters, on the colour only. */
.mk-sec.alt.bgx-band { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"); }