/* BILD Campaigns: what is drawn inside the builder itself. */
/* campaign controls in the builder's top bar, beside the device switch */
.cmp-top{position:absolute;top:50%;transform:translateY(-50%);z-index:2;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font:500 14px/1 'Funnel Sans',system-ui,sans-serif}
.cmp-top[hidden]{display:none}
.cmp-top a{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-radius:100px;text-decoration:none;color:#14171A;transition:background .15s,transform .15s}
.cmp-top a:focus-visible{outline:2px solid #14171A;outline-offset:2px}
.cmp-top .cmp-back-1{padding:0 12px 0 8px;color:#6B7066;max-width:180px}
.cmp-top .cmp-back-1 b{font-weight:500;overflow:hidden;text-overflow:ellipsis}
.cmp-top .cmp-back-1:hover{background:#EEEFEA;color:#14171A}
.cmp-top .cmp-back-2{background:#39D609;color:#0B0C0A;font-weight:600}
.cmp-top .cmp-back-2:hover{background:#4BE81B}
.cmp-top .cmp-back-2:active{transform:scale(.97)}
.cmp-top.tight .cmp-back-2 span,.cmp-top.tight .cmp-back-1 b{display:none}.cmp-top.tight a{padding:0;width:36px;justify-content:center}

/* Sections beside Blocks in the sidebar */
.pb-sidebar .bl-lib .cmp-secs{display:none;padding-top:12px}
.pb-sidebar .bl-lib.cmp-sec-on .cmp-secs{display:block}
.pb-sidebar .bl-lib.cmp-sec-on > .bl-search,.pb-sidebar .bl-lib.cmp-sec-on > .bl-target,.pb-sidebar .bl-lib.cmp-sec-on > .bl-body{display:none}
.cmp-secback{display:flex;align-items:center;gap:8px;width:100%;border:0;background:none;padding:8px 6px;margin:0 0 10px;border-radius:10px;cursor:pointer;font:inherit;color:#14171A;text-align:left}
.cmp-secback:hover{background:#EEEFEA}
.cmp-secback:focus-visible,.cmp-sec:focus-visible{outline:2px solid #14171A;outline-offset:2px}
.cmp-secback b{flex:1;font-weight:600;font-size:14px}
.cmp-secback small{font-size:12px;color:#8A8F85}
.cmp-sec{display:block;width:100%;border:0;background:none;padding:0;margin:0 0 16px;cursor:pointer;text-align:left;font:inherit;color:#14171A;border-radius:10px}
.cmp-shot{display:block;position:relative;border-radius:10px;background:#fff;box-shadow:0 0 0 1px #E4E5E0;overflow:hidden;transition:box-shadow .15s,transform .2s cubic-bezier(.22,1,.36,1)}
.cmp-sec:hover .cmp-shot{box-shadow:0 0 0 1.5px #14171A,0 10px 22px -12px rgba(20,23,26,.35);transform:translateY(-2px)}
.cmp-shot .cmp-zoom{display:block;width:var(--cmp-w,277px);height:168px;zoom:var(--cmp-z,.86);pointer-events:none;border-radius:0;box-shadow:none;transform:none}
@media (prefers-reduced-motion:reduce){.cmp-shot,.cmp-top a{transition:none}}
/* three tabs: Blocks, Sections, Styles */
.pb-sidebar .cmp-tabs .bl-tab-ind{width:calc((100% - 8px) / 3)}
.pb-sidebar .cmp-tabs button{font-size:13.5px;padding:0}
/* Site styles lives in the sidebar now: the top bar entry goes, and BILD's panel docks on the left under the tabs */
.cmp-tabs-on #pbSiteStylesBtn{display:none}
.cmp-tabs-on .pb-shell > .pb-site-styles-panel{right:auto;left:0;top:var(--cmp-ss-top,116px);border:0;box-shadow:none!important;background:transparent;width:0;transition:none}
/* it is the sidebar's third view: same width, same surface, no drawer shadow, nothing over the page */
.cmp-tabs-on .pb-shell > .pb-site-styles-panel.open{width:calc(var(--cmp-ss-w,276px) - 1px);background:var(--bc-bg,#fff);animation:cmpIn .32s cubic-bezier(.2,.8,.2,1)}
@keyframes cmpIn{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
.cmp-tabs-on .pb-site-styles-panel .pb-site-styles-head{display:none}
.cmp-tabs-on .pb-site-styles-panel .pb-site-styles-body{min-width:0;width:100%}
.cmp-tabs-on .pb-site-styles-panel .pb-site-styles-body{overflow-x:hidden}
.cmp-tabs-on .pb-site-styles-panel .pb-site-styles-body *{min-width:0}
.cmp-tabs-on .pb-site-styles-panel .pb-site-styles-body select,.cmp-tabs-on .pb-site-styles-panel .pb-site-styles-body input{max-width:100%}
.cmp-tabs-on .pb-site-styles-panel .pb-site-styles-foot{min-width:0;border-top:0;padding:10px 16px 14px}
@media (prefers-reduced-motion:reduce){.cmp-tabs-on .pb-shell > .pb-site-styles-panel.open{animation:none}}
/* the Add section window while it is being read or used out of sight */
.cmp-behind .sm-wrap{opacity:0!important;pointer-events:none!important}

/* campaign mode: the site side of BILD is closed */
.cmp-only #bsPageBtn{pointer-events:none}
.cmp-only #bsPageBtn svg:last-child{display:none}
.cmp-only body.ns-on > [class*="ns-"],.cmp-only #bdSide,.cmp-only .bd-home{display:none!important}
/* BILD is only running to set the site up: cover it until Campaigns opens */
.cmp-cover body{visibility:hidden}
.cmp-cover::before{content:'Opening BILD Campaigns';position:fixed;inset:0;display:grid;place-items:center;background:#fff;color:#6B7066;font:500 15px 'Funnel Sans',system-ui,sans-serif;z-index:99999}

/* BILD's Fine-tune colour inputs are 1px and absolutely placed with nothing to anchor them, so they sat far
   below the panel; clicking one made the browser scroll the whole panel away to reveal it, leaving it blank.
   Anchoring them to the scrolling list keeps them beside their label. */
#pbSiteStylesPanel .pb-site-styles-body{position:relative}
#pbSiteStylesPanel .pb-style-group-panel label{position:relative}

/* Button shape reaches every call-to-action, not only the plain .btn (see shapeWatch in campaign-builder.js).
   Chips, tabs, badges and round icon buttons keep their own shape on purpose. */
#pbDeviceFrame[data-cmp-shape] :is(.bnr-wrap .bnr-btn, .ofr-bd .ofr-btn, .clx-wrap .clx-btn, .rt .rt-btn, .gs-spin, .gm-more button, .gd-ctl button,
  .cl .b, .vip .b, .games-tile-play, .sbs .sbs-btn, .sbv-play-pill, .fx-magnetic-btn, .bnr-su-field, .sbs-fld input){border-radius:var(--r-btn)!important}

/* dragging a section from the sidebar onto the page */
.cmp-sec{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}
.cmp-sec.dragging{opacity:.35}
.cmp-sec.dragging .cmp-shot{transform:none!important;box-shadow:0 0 0 1px #E4E5E0!important}
.cmp-dragging,.cmp-dragging *{cursor:grabbing!important;-webkit-user-select:none!important;user-select:none!important}
.cmp-ghost{position:fixed;left:0;top:0;z-index:2000;pointer-events:none;border-radius:10px;will-change:transform;
  box-shadow:0 18px 40px -12px rgba(20,23,26,.45),0 0 0 1.5px #14171A;transition:scale .18s cubic-bezier(.2,.8,.2,1),opacity .18s}
.cmp-ghost .cmp-shot{box-shadow:none;transform:none}
.cmp-ghost.over{opacity:.92}
.cmp-ghost.landing{opacity:0;transition:opacity .16s}
.cmp-ghost.back{transition:transform .26s cubic-bezier(.2,.8,.2,1),opacity .26s;opacity:.4}
.cmp-dropline{position:fixed;left:0;top:0;z-index:1999;height:4px;border-radius:4px;background:#39D609;pointer-events:none;opacity:0;
  box-shadow:0 0 0 2px rgba(255,255,255,.9),0 4px 14px rgba(57,214,9,.5);transition:transform .14s cubic-bezier(.2,.8,.2,1),opacity .12s,width .14s}
.cmp-dropline.on{opacity:1}
.cmp-dropline span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#39D609;color:#0B0C0A;font:600 12px/1 'Funnel Sans',system-ui,sans-serif;padding:6px 10px;border-radius:100px;white-space:nowrap;box-shadow:0 0 0 2px rgba(255,255,255,.9)}
@media (prefers-reduced-motion:reduce){.cmp-ghost,.cmp-ghost.back,.cmp-dropline{transition:none}}

/* "+ Add Section" at the foot of the page is part of the editor, not of the page: it took the page's text
   colour, so on a dark theme it was white on white. It now keeps one look on any theme. */
#pbAddSectionBottom.pb-add-section-outline-btn,#pbAddSectionEmpty.pb-add-section-outline-btn{background:#fff!important;color:#14171A!important;border:1px solid rgba(20,23,26,.16)!important;box-shadow:0 2px 10px rgba(20,23,26,.12)}
#pbAddSectionBottom.pb-add-section-outline-btn:hover,#pbAddSectionEmpty.pb-add-section-outline-btn:hover{background:#39D609!important;border-color:#39D609!important}

/* ---------- Styles, grouped: an overview of cards, each opening one group ---------- */
.cmp-tabs-on .pb-site-styles-panel .cmp-sg-home{display:none;flex:1;min-height:0;overflow-y:auto;padding:4px 16px 16px;flex-direction:column;gap:10px}
.cmp-tabs-on .pb-site-styles-panel .cmp-sg-back{display:none}
.cmp-tabs-on .pb-site-styles-panel[data-cmp-sg="home"] .cmp-sg-home{display:flex}
.cmp-tabs-on .pb-site-styles-panel[data-cmp-sg="home"] .pb-site-styles-body{display:none}
.cmp-tabs-on .pb-site-styles-panel[data-cmp-sg]:not([data-cmp-sg="home"]) .pb-site-styles-foot{display:none}
.cmp-tabs-on .pb-site-styles-panel[data-cmp-sg]:not([data-cmp-sg="home"]) .cmp-sg-back{display:flex}
.cmp-sg-back{align-items:center;gap:8px;flex:none;margin:0 10px 6px;padding:8px 6px;border:0;background:none;border-radius:10px;cursor:pointer;font:600 14px/1.2 'Funnel Sans',system-ui,sans-serif;color:#14171A;text-align:left}
.cmp-sg-back:hover{background:#EEEFEA}
.cmp-sg-back:focus-visible,.cmp-sg-card:focus-visible{outline:2px solid #14171A;outline-offset:2px}
.cmp-sg-card{display:flex;align-items:stretch;gap:6px;width:100%;padding:0;border:0;background:none;cursor:pointer;text-align:left;font:inherit;color:#14171A;border-radius:12px;flex:none}
.cmp-sg-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px;background:#F1F2EF;border-radius:12px;padding:12px 14px 14px;transition:background .15s}
.cmp-sg-go{flex:none;width:38px;display:grid;place-items:center;background:#F1F2EF;border-radius:12px;color:#6B7066;transition:background .15s,color .15s,transform .2s cubic-bezier(.2,.8,.2,1)}
.cmp-sg-card:hover .cmp-sg-main,.cmp-sg-card:hover .cmp-sg-go{background:#E7E9E3}
.cmp-sg-card:hover .cmp-sg-go{color:#14171A}
.cmp-sg-card:active .cmp-sg-go{transform:scale(.96)}
.cmp-sg-n{font:500 13px/1 'Funnel Sans',system-ui,sans-serif;color:#6B7066}
.cmp-sg-pv{display:flex;align-items:center;gap:10px;min-height:44px;color:var(--ink,#14171A);font-family:var(--font,inherit)}
.sgp-themes{background:var(--bg,#fff);border-radius:10px;padding:10px 12px;box-shadow:inset 0 0 0 1px rgba(20,23,26,.08)}
.sgp-aa{font:var(--head-weight,600) 28px/1 var(--font-head,inherit);letter-spacing:-.02em}
.sgp-strip{display:flex;flex:1;height:30px;border-radius:7px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(20,23,26,.1);min-width:0}
.sgp-strip i{flex:1}
.sgp-strip.wide{height:40px;border-radius:9px}
.sgp-btn{display:inline-flex;align-items:center;height:34px;padding:0 16px;border-radius:var(--r-btn,8px);background:var(--gold,#39D609);color:var(--on-gold,#14171A);font:600 13px/1 var(--font,inherit);white-space:nowrap}
.sgp-btn.mini{height:26px;padding:0 11px;font-size:11px}
.sgp-btn.ghost{background:none;color:var(--ink,#14171A);box-shadow:inset 0 0 0 1.5px currentColor}
.sgp-type{display:flex;flex-direction:column;gap:4px;min-width:0}
.sgp-type b{font:var(--head-weight,600) 26px/1 var(--font-head,inherit);letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sgp-type span{font:400 13px/1.3 var(--font,inherit);color:var(--ink-body,#484F5A)}
.sgp-cards{display:flex;gap:8px;flex:1}
.sgp-cards i{flex:1;height:40px;background:var(--bg,#fff);border-radius:var(--r-lg,8px);box-shadow:inset 0 0 0 1px rgba(20,23,26,.12)}
.sgp-cards i:nth-child(2){background:var(--felt,#0E6B4D);box-shadow:none}
.sgp-motion{display:flex;align-items:center;gap:5px;flex:1}
.sgp-motion i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.18}
.sgp-motion i:nth-child(2){opacity:.38}
.sgp-motion i:nth-child(3){opacity:.65}
.sgp-motion b{font:var(--head-weight,600) 20px/1 var(--font-head,inherit);margin-left:4px}
.sgp-icons{display:flex;gap:12px}
.sgp-icons svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* inside a group: only its parts of BILD's list are shown */
.cmp-tabs-on .pb-site-styles-panel[data-cmp-sg]:not([data-cmp-sg="home"]) .th-ft{display:none}
:where(.cmp-tabs-on .pb-site-styles-panel[data-cmp-sg]:not([data-cmp-sg="home"])) [data-cmp-g]{display:none}
.cmp-tabs-on .pb-site-styles-panel[data-cmp-sg="themes"] [data-cmp-g="themes"],
.cmp-tabs-on .pb-site-styles-panel[data-cmp-sg="fonts"] [data-cmp-g="fonts"],
.cmp-tabs-on .pb-site-styles-panel[data-cmp-sg="colours"] [data-cmp-g="colours"],
.cmp-tabs-on .pb-site-styles-panel[data-cmp-sg="buttons"] [data-cmp-g="buttons"],
.cmp-tabs-on .pb-site-styles-panel[data-cmp-sg="shape"] [data-cmp-g="shape"],
.cmp-tabs-on .pb-site-styles-panel[data-cmp-sg="motion"] [data-cmp-g="motion"],
.cmp-tabs-on .pb-site-styles-panel[data-cmp-sg="icons"] [data-cmp-g="icons"]{display:block}
.cmp-tabs-on .pb-site-styles-panel[data-cmp-sg="motion"] .th,.cmp-tabs-on .pb-site-styles-panel[data-cmp-sg="icons"] .th{display:none}
.cmp-tabs-on .pb-site-styles-panel[data-cmp-sg]:not([data-cmp-sg="home"]) .pb-site-styles-body{animation:cmpIn .28s cubic-bezier(.2,.8,.2,1)}
.cmp-tabs-on .pb-site-styles-panel[data-cmp-sg="home"] .cmp-sg-home{animation:cmpBackIn .28s cubic-bezier(.2,.8,.2,1)}
@keyframes cmpBackIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.cmp-tabs-on .pb-site-styles-panel .pb-site-styles-body,.cmp-tabs-on .pb-site-styles-panel .cmp-sg-home{animation:none!important}.cmp-sg-go{transition:none}}

.sgp-themes{gap:8px}
.sgp-themes .sgp-strip{flex:1 1 46px}
.sgp-themes .sgp-btn.mini{padding:0 9px;flex:none}
.sgp-themes .sgp-aa{flex:none}

/* Styles belongs to the sidebar: when the sidebar is minimised or hidden, it is not shown */
.cmp-tabs-on .pb-shell.dk-lib-rail > .pb-site-styles-panel,.cmp-tabs-on .pb-shell.dk-focus > .pb-site-styles-panel{display:none!important}

/* the header's two buttons always share one shape: Log in was a fixed pill beside a Join now that follows the setting */
#pbDeviceFrame .bs-hd-link{border-radius:var(--r-btn,100px)!important}

/* section settings: the settings come first, "Reuse this section" last */
.cmp-tabs-on #bcInsp{display:flex;flex-direction:column}
.cmp-tabs-on #bcInsp > *{flex:none}
.cmp-tabs-on #bcInsp > .gs-card{order:9;margin-top:8px;margin-bottom:20px}

/* 3D, pressable buttons: BILD gave the raised edge to plain buttons only. Banners, offer cards, prize tools,
   sign-up and the header's buttons now take it too, each with a darker shade of its own colour. */
[data-button-style="3d"] :is(.bnr-btn, .ofr-btn, .clx-btn, .rt-btn, .gs-spin, .sbs-btn, .bs-hd-btn, .cl .b, .vip .b){transition:transform .08s,box-shadow .08s,background .15s;
  box-shadow:0 var(--btn-3d-depth,4px) 0 0 color-mix(in srgb, var(--bnr-acc, var(--gold,#39D609)) 68%, #000)!important;transform:none}
[data-button-style="3d"] :is(.bnr-btn, .ofr-btn, .clx-btn, .rt-btn, .gs-spin, .sbs-btn, .bs-hd-btn, .cl .b, .vip .b):active{transform:translateY(var(--btn-3d-depth,4px))!important;box-shadow:0 0 0 0 transparent!important}
[data-button-style="3d"] :is(.bnr-btn-ghost, .rt-btn-ghost, .bs-hd-link){box-shadow:0 var(--btn-3d-depth,4px) 0 0 var(--border-deep,#C2C5BC)!important}
[data-button-style="3d"] :is(.bnr-btn-ghost, .rt-btn-ghost, .bs-hd-link):active{transform:translateY(var(--btn-3d-depth,4px));box-shadow:0 0 0 0 transparent!important}
[data-button-style="3d"] [data-bo-main="dark"] :is(.btn, .gs-spin):not(.btn-outline):not(.bnr-btn-ghost){box-shadow:0 var(--btn-3d-depth,4px) 0 0 #000!important}
[data-button-style="3d"] [data-bo-main="brand"] :is(.btn, .gs-spin):not(.btn-outline):not(.bnr-btn-ghost){box-shadow:0 var(--btn-3d-depth,4px) 0 0 var(--felt-deep,#0A5039)!important}
[data-button-style="3d"] [data-bo-main="action"] :is(.btn, .gs-spin):not(.btn-outline):not(.bnr-btn-ghost){box-shadow:0 var(--btn-3d-depth,4px) 0 0 var(--gold-deep,#2CA607)!important}
[data-button-style="3d"] [data-bo-main="light"] :is(.btn, .gs-spin):not(.btn-outline):not(.bnr-btn-ghost){box-shadow:0 var(--btn-3d-depth,4px) 0 0 var(--border-deep,#C2C5BC)!important}
/* a button on the grid with a chosen icon: the same spacing BILD gives its own */
.pb-fluid[data-bo-icon] .pb-item .btn{gap:10px}
.pb-fluid .pb-item .btn > .bo-ic{display:inline-flex;align-items:center;flex:none}

/* Dropdowns in the panels: the browser's own arrow sat hard against the edge. One drawn arrow, with room around it. */
:is(#pbSiteStylesPanel, #bcInsp, .pb-sidebar, .bs-modal, .bs-pop) select{-webkit-appearance:none;appearance:none;padding-right:34px!important;text-overflow:ellipsis;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7066' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:right 11px center!important;background-size:16px 16px!important;cursor:pointer}
:is(#pbSiteStylesPanel, #bcInsp, .pb-sidebar, .bs-modal, .bs-pop) select:hover{border-color:#B9BDB3}
:is(#pbSiteStylesPanel, #bcInsp, .pb-sidebar, .bs-modal, .bs-pop) select:focus-visible{outline:2px solid #14171A;outline-offset:1px}
.cmp-tabs-on #pbSiteStylesPanel [data-cmp-dup]{display:none!important}
/* in the sidebar's width two dropdowns side by side cut their own labels off ("As desi…"): one per row */
.cmp-tabs-on #pbSiteStylesPanel .th-two{grid-template-columns:1fr}
:is(#pbSiteStylesPanel, #bcInsp, .pb-sidebar, .bs-modal, .bs-pop) select{background-color:#fff}

/* the "remove this block?" question: the same look as BILD's own for sections, placed by the button that asked */
.cmp-confirm{position:fixed!important;z-index:3000;width:200px;right:auto!important;bottom:auto!important;margin:0!important;background:#fff;color:#14171A;border-radius:12px;padding:14px;
  box-shadow:0 12px 32px -8px rgba(20,23,26,.35),0 0 0 1px rgba(20,23,26,.08);font:14px/1.4 'Funnel Sans',system-ui,sans-serif;animation:cmpPop .16s cubic-bezier(.2,.8,.2,1)}
.cmp-confirm .pb-remove-confirm-text{margin:0 0 12px}
.cmp-confirm .pb-remove-confirm-actions{display:flex;gap:8px}
.cmp-confirm .pb-remove-confirm-btn{flex:1;height:34px;border-radius:8px;border:1px solid #D8DAD3;background:#fff;color:#14171A;font:500 14px/1 inherit;font-family:inherit;cursor:pointer}
.cmp-confirm .pb-remove-confirm-danger{background:#DB3642;border-color:#DB3642;color:#fff}
.cmp-confirm .pb-remove-confirm-btn:focus-visible{outline:2px solid #14171A;outline-offset:2px}
@keyframes cmpPop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.cmp-confirm{animation:none}}

/* section pictures in the sidebar take their own height: no blank space to square them up */
.cmp-shot .cmp-zoom{height:auto!important;max-height:260px;overflow:hidden}
.cmp-shot .cmp-zoom .bl-thumb{max-height:none}

/* ---------- the large preview beside the sidebar ---------- */
.cmp-peek{position:fixed;z-index:1500;pointer-events:none;background:#fff;border-radius:16px;overflow:hidden;opacity:0;transform:translateX(-8px) scale(.985);transform-origin:left center;
  box-shadow:0 30px 70px -20px rgba(20,23,26,.45),0 0 0 1px rgba(20,23,26,.1);transition:opacity .18s ease,transform .26s cubic-bezier(.2,.8,.2,1),top .22s cubic-bezier(.2,.8,.2,1)}
.cmp-peek.on{opacity:1;transform:none}
.cmp-peek-stage{position:relative;overflow:hidden;background:var(--bg,#fff)}
.cmp-peek-in{position:absolute;left:0;top:0;transform-origin:left top;pointer-events:none}
.cmp-peek-cap{display:flex;align-items:baseline;justify-content:space-between;gap:16px;height:54px;padding:0 18px;border-top:1px solid #E4E5E0;font:14px/1 'Funnel Sans',system-ui,sans-serif;color:#14171A;align-items:center}
.cmp-peek-cap b{font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmp-peek-cap span{color:#6B7066;font-size:13px;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.cmp-peek{transition:opacity .15s;transform:none}}
/* Explore all */
.cmp-explore{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;margin:0 0 12px;padding:12px 14px;border:0;border-radius:14px;background:#14171A;color:#fff;cursor:pointer;text-align:left;font:inherit;transition:transform .15s,background .15s}
.cmp-explore:hover{background:#000}
.cmp-explore:active{transform:scale(.985)}
.cmp-explore:focus-visible{outline:2px solid #39D609;outline-offset:2px}
.cmp-explore span{display:flex;flex-direction:column;gap:3px;min-width:0}
.cmp-explore b{font-weight:600;font-size:14px}
.cmp-explore small{font-size:12px;color:rgba(255,255,255,.66)}
.cmp-explore svg{flex:none;color:#39D609}
/* BILD's section window, made a place to browse: nearly the whole screen, two large columns */
.cmp-tabs-on .sm-wrap{padding:16px}
.cmp-tabs-on .sm-wrap .sm{width:min(1560px,100%)!important;max-width:none!important;height:calc(100dvh - 32px)!important;max-height:none!important}
.cmp-tabs-on .sm-wrap .sm-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:26px 22px!important}
.cmp-tabs-on .sm-wrap .sm-shot{height:300px!important;border-radius:14px}
.cmp-tabs-on .sm-wrap .sm-shot .bl-thumb{max-height:none!important}
.cmp-tabs-on .sm-wrap .sm-card-n{font-size:15px;min-height:0;margin-top:12px}
@media (min-width:1700px){.cmp-tabs-on .sm-wrap .sm-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media (max-width:1000px){.cmp-tabs-on .sm-wrap .sm-grid{grid-template-columns:1fr!important}}

/* the settings panel, minimised: a strip of icons on the right, the twin of the left one */
html body .pb-shell.dk.dk-ins-float{--dk-ins-w:60px}
.cmp-insrail{display:none}
.pb-shell.dk.dk-ins-float > .cmp-insrail{position:fixed;top:60px;right:0;bottom:0;width:60px;z-index:30;display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 0;box-sizing:border-box;
  background:#fff;border-left:1px solid var(--bc-line,#ECEDE9)}
.pb-shell.dk.dk-focus > .cmp-insrail,body.preview-mode .cmp-insrail{display:none!important}
.cmp-insrail .dk-rb{position:relative}
.cmp-insrail .cmp-ins-ic{display:grid;place-items:center}
.cmp-insrail .cmp-ins-ic svg{width:20px;height:20px}
.cmp-insrail .cmp-tip{position:absolute;right:52px;top:50%;transform:translate(4px,-50%);padding:6px 10px;border-radius:8px;background:#14171A;color:#fff;font:500 12.5px/1 'Funnel Sans',system-ui,sans-serif;
  white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;font-style:normal}
.cmp-insrail .dk-rb:hover .cmp-tip,.cmp-insrail .dk-rb:focus-visible .cmp-tip{opacity:1;transform:translate(0,-50%)}
.cmp-insrail .cmp-tip:empty{display:none}

/* a section background of your own colour */
#pbDeviceFrame .pb-sec[data-cmp-bg]{background:var(--cmp-bg)!important}
#pbDeviceFrame .pb-sec[data-cmp-bg] > .pb-block-stage,#pbDeviceFrame .pb-sec[data-cmp-bg] > .pb-block-stage > div:first-child{background-color:transparent}
.cmp-sw-own{position:relative;flex:none;width:32px;height:32px;border-radius:50%;cursor:pointer;display:grid;place-items:center;
  background:conic-gradient(from 0deg,#ff4d4d,#ffb020,#f7e733,#39d609,#22c3e6,#5a6bff,#c44dff,#ff4d4d)}
.cmp-sw-own span{width:20px;height:20px;border-radius:50%;background:var(--c,#fff);box-shadow:0 0 0 1px rgba(20,23,26,.12);display:grid;place-items:center;color:#14171A;font:600 15px/1 system-ui}
.cmp-sw-own:not(.on) span::before{content:"+"}
.cmp-sw-own.on{box-shadow:0 0 0 2px #fff,0 0 0 4px #14171A}
.cmp-sw-own input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0}
.cmp-sw-own:focus-within{outline:2px solid #14171A;outline-offset:3px}

/* on a campaign's landing page, whole-site starting points are not offered (either copy) */
.cmp-page #bsPages .bsg-sitebtn,.cmp-page .bsg-sitebtn{display:none!important}

/* a calmer top bar on campaign pages: the Sections tab adds sections, and the "..." menu's two items have moved */
.cmp-tabs-on #pbAddSectionToolbar,.cmp-tabs-on .bc-top .bc-more{display:none!important}
/* space between sections, in Styles > Corners and spacing */
.cmp-tabs-on .pb-site-styles-panel .cmp-sg-extra{display:none;flex:none;flex-direction:column;gap:8px;margin:4px 20px 6px;padding:14px;border-radius:12px;background:#F1F2EF;font:14px/1.2 'Funnel Sans',system-ui,sans-serif;color:#14171A}
.cmp-tabs-on .pb-site-styles-panel[data-cmp-sg="shape"] .cmp-sg-extra{display:flex}
.cmp-sg-extra span{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.cmp-sg-extra b{font-weight:600}
.cmp-sg-extra output{color:#6B7066;font-variant-numeric:tabular-nums}
.cmp-sg-extra input{width:100%;accent-color:#14171A;margin:2px 0}
.cmp-sg-extra small{color:#6B7066;font-size:12px}
/* clear this page, at the foot of the page's settings */
.cmp-clear-page{display:block;margin:6px 0 24px;padding:0;border:0;background:none;color:#DB3642;font:500 14px/1.4 'Funnel Sans',system-ui,sans-serif;cursor:pointer;text-align:left}
.cmp-clear-page:hover{text-decoration:underline}
.cmp-clear-page:focus-visible{outline:2px solid #14171A;outline-offset:3px;border-radius:4px}

/* the strip's icon is lit while its panel is showing over the page */
.cmp-insrail.showing [data-cmp-ins="peek"]{background:#14171A;color:#fff}

/* drop 87: the two sidebar toggles leave the top bar (each sidebar folds from its own header), and the
   builder's black buttons soften to a dark grey */
.cmp-tabs-on .bc-top #dkLibBtn,.cmp-tabs-on .bc-top #dkInspBtn{display:none!important}
.cmp-page{--cmp-cta:#3A3D42;--cmp-cta-h:#2C2F33}
html.cmp-page body #bsPublishBtn.bc-pri,html.cmp-page body .bc-btn.bc-btn-dark,html.cmp-page body .bl-gap,
html.cmp-page body .cmp-explore,html.cmp-page body .cmp-insrail.showing [data-cmp-ins="peek"]{background:var(--cmp-cta)!important;border-color:var(--cmp-cta)!important}
html.cmp-page body #bsPublishBtn.bc-pri:hover,html.cmp-page body .bc-btn.bc-btn-dark:hover,html.cmp-page body .bl-gap:hover,
html.cmp-page body .cmp-explore:hover{background:var(--cmp-cta-h)!important;border-color:var(--cmp-cta-h)!important}

/* drop 88: the save note had no room and read "S…"; the dot alone says it, the full line is in its tooltip */
.cmp-page #pbSaveStatus{font-size:0!important;gap:0!important;max-width:14px;min-width:0;overflow:visible}

/* drop 89: a quiet interface. The product is black, white and grey; the pages people make carry the
   colour. Red stays for delete and real errors, and nothing else is coloured. */
html.cmp-page{--bc-lime:#C6C9C3;--bs-changed:#9A9E96;--bs-live:#14171A}
html.cmp-page .pb-save-dot,html.cmp-page .bc-saved .pb-save-dot{background:#B3B6AE!important}
html.cmp-page #pbSaveStatusText{color:var(--bc-mute)!important}
html.cmp-page #bsPublishBtn::after{display:none!important}
html.cmp-page .cmp-top .cmp-back-2{background:#fff;color:#14171A;box-shadow:inset 0 0 0 1px #D5D7D1;font-weight:600}
html.cmp-page .cmp-top .cmp-back-2:hover{background:#F1F2EF}
html.cmp-page .cmp-explore svg,html.cmp-page .cmp-explore i{color:#fff!important;stroke:currentColor}
/* selecting on a dark page: white, not lime */
html.cmp-page .pb-fluid[data-bg=ink] .pb-item.is-selected>.pb-item-out,html.cmp-page #pbDeviceFrame[data-page-mode=dark] .pb-item.is-selected>.pb-item-out,
html.cmp-page .pb-fluid[data-bg=accent] .pb-item.is-selected>.pb-item-out{box-shadow:0 0 0 2px #fff!important}
html.cmp-page body:not(.preview-mode) #pbDeviceFrame[data-page-mode=dark] :is(.pb-sec.is-sel,.bs-chrome.is-sel){outline-color:#fff}
html.cmp-page .pb-device-frame.device-mobile .pb-item.has-mstyle:not(.is-selected)>.pb-item-out{box-shadow:0 0 0 1px rgba(20,23,26,.35)}
/* typing into text on the page: a neutral ring instead of the green one */
html.cmp-page body:not(.preview-mode) .pb-block-stage [data-inline-edit]:not(.btn):focus{background:rgba(127,127,127,.12)!important;box-shadow:0 0 0 2px #14171A,0 0 0 3px rgba(255,255,255,.7)!important}
html.cmp-page .gs-card.is-global{background:var(--bc-soft)}
html.cmp-page .cmp-dropline span{background:#14171A;color:#fff}
html.cmp-page .cmp-dropline{background:#14171A}
html.cmp-page #pbAddSectionBottom.pb-add-section-outline-btn:hover,html.cmp-page #pbAddSectionEmpty.pb-add-section-outline-btn:hover{background:#F1F2EF!important;color:#14171A!important}
html.cmp-page .cmp-explore:focus-visible{outline-color:#14171A}
html.cmp-page .chk-warn,html.cmp-page .bsg-confirm,html.cmp-page .an-warn,html.cmp-page .ckv-warn{background:var(--bc-soft);color:#3a4044!important}
html.cmp-page .ofr-badge,html.cmp-page .chk-lv:not([data-lv=fix]){background:#E4E5E0;color:#3a4044}

/* drop 90: profile button and its menu; set-up things leave the top bar */
.cmp-tabs-on .bc-top #bsOffersBtn,.cmp-tabs-on .bc-top #bsImagesBtn{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);opacity:0;pointer-events:none}
.cmp-prof{position:relative;flex:none;margin-left:6px}
.cmp-prof-b{width:36px;height:36px;border-radius:50%;border:0;background:#E4E5E0;color:#14171A;display:flex;align-items:center;justify-content:center;cursor:pointer;font:600 14px/1 var(--font,inherit);transition:background .15s,transform .1s}
.cmp-prof-b:hover{background:#D5D7D1}.cmp-prof-b:active{transform:scale(.96)}
.cmp-prof-b:focus-visible{outline:2px solid #14171A;outline-offset:2px}
.cmp-prof-m{position:absolute;right:0;top:calc(100% + 10px);width:288px;z-index:500;padding:6px;background:#fff;border-radius:14px;box-shadow:0 0 0 1px #E4E5E0,0 18px 40px -14px rgba(20,23,26,.3);transform-origin:top right;animation:cmpProf .18s cubic-bezier(.2,.8,.2,1)}
.cmp-prof-m[hidden]{display:none}
@keyframes cmpProf{from{opacity:0;transform:scale(.96) translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.cmp-prof-m{animation:none}}
.cmp-prof-h{padding:10px 10px 12px;border-bottom:1px solid #E4E5E0;margin-bottom:6px}
.cmp-prof-h b,.cmp-prof-i b{display:block;font:600 14px/1.3 var(--font,inherit);color:#14171A;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmp-prof-h small,.cmp-prof-i small{display:block;font:400 12.5px/1.35 var(--font,inherit);color:#6B7066;margin-top:2px}
.cmp-prof-l{padding:6px 10px 4px;font:600 11px/1 var(--font,inherit);letter-spacing:.06em;text-transform:uppercase;color:#8A8F85}
.cmp-prof-i{display:block;width:100%;text-align:left;padding:9px 10px;border:0;border-radius:8px;background:none;cursor:pointer}
.cmp-prof-i:hover,.cmp-prof-i:focus-visible{background:#F1F2EF;outline:0}
/* market and audience: one "view as" control */
.cmp-viewas{font:400 12.5px/1 var(--font,inherit);color:#8A8F85;margin:0 8px 0 6px;white-space:nowrap}
.cmp-viewas-on #bsMktBtn{border-radius:100px 0 0 100px;padding-right:8px}
.cmp-viewas-on #bsAudBtn{border-radius:0 100px 100px 0;margin-left:-1px}
/* the Offers window: status pills in grey, not green and blue */
html.cmp-page .ofr-st,html.cmp-page .ofr-status{background:#E9EAE6!important;color:#3a4044!important}
html.cmp-page .ofr-st[data-st=bad],html.cmp-page .ofr-status[data-st=bad]{background:#fce8e4!important;color:#9a2e1a!important}

.cmp-viewas-on .bs-audwrap{margin-left:-1px!important}
.cmp-viewas-on .bs-mktwrap{margin-right:0!important}
.cmp-viewas{align-self:center}

/* drop 92 */
/* the ticker's pause button is gone, in the builder and on the published page */
.tfx-tk .tfx-pause{display:none!important}
/* a white outline button on a dark section keeps dark words (previews drew them white on white) */
:is(.pb-fluid,.pb-sec,.bs-sec):is([data-bg=ink],[data-bg=accent],[data-bg=aurora],[data-bg=rim],[data-bg=mesh]) .btn.btn-outline{color:#14171A}
/* the offer form: room to read what was typed, and even gaps between rows */
#bsOffers .ofr-form textarea.bs-in{height:auto!important;min-height:84px;padding:10px 12px;line-height:1.45;resize:vertical;display:block}
#bsOffers .ofr-form .ofr-2{row-gap:10px;column-gap:14px;align-items:center;margin-top:16px}
#bsOffers .ofr-form .ofr-2 .bs-lab{margin:0}
#bsOffers .ofr-form textarea.bs-in+.bs-lab,#bsOffers .ofr-form .ofr-2+.bs-lab{margin-top:16px}

/* drop 93: a banner's layouts, on the banner */
.cmp-lay{display:inline-flex;align-items:center;margin-right:6px;padding-right:6px;border-right:1px solid rgba(255,255,255,.18)}
.cmp-lay-name{height:28px;padding:0 10px;border:0;border-radius:8px;background:none;color:#fff;font:600 12.5px/1 var(--bc-font,Inter,system-ui,sans-serif);white-space:nowrap;cursor:pointer}
.cmp-lay-name:hover,.cmp-lay-name[aria-expanded="true"]{background:rgba(255,255,255,.16)}
.cmp-lay-name:focus-visible{outline:2px solid #fff;outline-offset:1px}
.cmp-laystrip{position:absolute;left:14px;right:14px;z-index:60;border-radius:16px;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 0 0 1px rgba(20,23,26,.1),0 18px 44px -16px rgba(20,23,26,.45);animation:cmpLay .22s cubic-bezier(.2,.8,.2,1)}
@keyframes cmpLay{from{opacity:0;transform:translateY(10px)}}
@media (prefers-reduced-motion:reduce){.cmp-laystrip{animation:none}}
.cmp-laystrip-in{display:flex;gap:10px;padding:12px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}
.cmp-lay-t{flex:none;width:168px;padding:0;border:0;background:none;cursor:pointer;text-align:left;color:#14171A;font-family:Inter,system-ui,sans-serif}
.cmp-lay-pic{display:block;position:relative;width:168px;height:78px;border-radius:10px;overflow:hidden;background:#EFF0EC;box-shadow:inset 0 0 0 1px rgba(20,23,26,.1);transition:transform .15s}
.cmp-lay-t:hover .cmp-lay-pic{transform:translateY(-2px)}
.cmp-lay-t.on .cmp-lay-pic{box-shadow:0 0 0 2px #14171A}
.cmp-lay-t:focus-visible{outline:0}.cmp-lay-t:focus-visible .cmp-lay-pic{box-shadow:0 0 0 2px #14171A,0 0 0 4px rgba(20,23,26,.25)}
.cmp-lay-draw{position:absolute;left:0;top:0;width:1200px;height:557px;transform:scale(.14);transform-origin:0 0;pointer-events:none;display:block}
.cmp-lay-draw .bnr-wrap{--bnr-h:557px!important;--bnr-hm:557px!important}
.cmp-lay-draw *{animation:none!important;transition:none!important}
.cmp-lay-t b{display:block;margin:7px 2px 0;font-size:12.5px;font-weight:500;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmp-lay-t.on b{font-weight:700}

.cmp-lay-pic{contain:paint;isolation:isolate}
.cmp-lay-draw{overflow:hidden;contain:layout paint}
.cmp-lay-t,.cmp-lay-t b{color:#14171A!important;background:none}

/* drop 94: a calmer settings panel */
#bcInsp.cmp-tidy .bc-ibd:not(.bc-motion)>.bc-controls{display:contents}
#bcInsp.cmp-tidy .bc-ibd:not(.bc-motion){gap:0}
#bcInsp.cmp-tidy .bc-ibd:not(.bc-motion)>*,#bcInsp.cmp-tidy .bc-ibd:not(.bc-motion)>.bc-controls>*{order:1;margin-top:20px}
#bcInsp.cmp-tidy .bc-ibd:not(.bc-motion)>:first-child,#bcInsp.cmp-tidy .bc-ibd:not(.bc-motion)>.bc-controls:first-child>:first-child{margin-top:0}
#bcInsp.cmp-tidy .bc-ibd:not(.bc-motion)>.bc-controls>.bc-cgroup.is-fold{margin-top:0;padding-top:8px;padding-bottom:8px}
#bcInsp.cmp-tidy .bc-ibd:not(.bc-motion)>.bc-controls>.bc-cgroup.is-fold.open{padding-bottom:22px}
#bcInsp.cmp-tidy .bc-ibd:not(.bc-motion) .cmp-more{order:5}
#bcInsp.cmp-tidy .bc-ibd:not(.bc-motion) [data-cmp-tier="more"]{order:6}
#bcInsp.cmp-tidy .bc-ibd:not(.bc-motion)>.bc-danger-btn{order:9}
#bcInsp.cmp-tidy:not(.cmp-more-open) [data-cmp-tier="more"]{display:none!important}
.cmp-more{display:flex;align-items:center;justify-content:space-between;width:100%;height:44px;padding:0 14px;border:0;border-radius:12px;background:var(--bc-soft,#F1F2EF);color:var(--bc-ink,#14171A);font:600 13px/1 var(--font,inherit);cursor:pointer;transition:background .15s}
.cmp-more:hover{background:#E9EAE6}
.cmp-more:focus-visible{outline:2px solid #14171A;outline-offset:2px}
.cmp-more svg{transition:transform .2s}
.cmp-more[aria-expanded="true"] svg{transform:rotate(180deg)}
#bcInsp.cmp-tidy.cmp-more-open .bc-ibd:not(.bc-motion) [data-cmp-tier="more"]{animation:cmpMoreIn .22s cubic-bezier(.2,.8,.2,1)}
@keyframes cmpMoreIn{from{opacity:0;transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){#bcInsp.cmp-tidy.cmp-more-open [data-cmp-tier="more"]{animation:none}.cmp-more svg{transition:none}}
/* choices as buttons */
select[data-cmp-chip="row"],select[data-cmp-chip="list"],select[data-cmp-chip="grid"]{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;overflow:hidden}
label.fx-control-row:has(>.cmp-chips),.bc-fld:has(>.cmp-chips){position:relative}
.cmp-chips{display:flex;gap:4px;width:100%}
.cmp-chips button{border:0;background:none;font:400 13px/1.2 var(--font,inherit);color:var(--bc-mute,#6B7066);cursor:pointer;transition:color .15s,background .15s,box-shadow .15s}
.cmp-chips button:hover{color:var(--bc-ink,#14171A)}
.cmp-chips button:focus-visible{outline:2px solid #14171A;outline-offset:1px}
.cmp-chips.row{background:var(--bc-soft,#F1F2EF);border-radius:100px;padding:4px;gap:0}
.cmp-chips.row button{flex:1 1 0;min-height:30px;border-radius:100px;padding:0 8px;white-space:nowrap}
.cmp-chips.row button.on{background:#fff;color:var(--bc-ink,#14171A);box-shadow:0 1px 3px rgba(20,23,26,.14)}
.cmp-chips.list,.cmp-chips.grid{display:grid;grid-template-columns:1fr;gap:6px}
.cmp-chips.grid{grid-template-columns:1fr 1fr}
.cmp-chips.list button,.cmp-chips.grid button{min-height:38px;padding:8px 12px;border-radius:10px;text-align:left;box-shadow:inset 0 0 0 1px var(--bc-line,#E4E5E0);color:var(--bc-ink,#14171A)}
.cmp-chips.list button:hover,.cmp-chips.grid button:hover{background:var(--bc-soft,#F1F2EF)}
.cmp-chips.list button.on,.cmp-chips.grid button.on{box-shadow:inset 0 0 0 2px #14171A;font-weight:600}
.cmp-lay-browse{align-self:flex-start;margin-top:8px;padding:0;border:0;background:none;font:400 13px/1 var(--font,inherit);color:var(--bc-mute,#6B7066);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.cmp-lay-browse:hover{color:var(--bc-ink,#14171A)}
/* layouts of sections that have no small drawings: names only */
.cmp-laystrip.words .cmp-lay-t{width:auto;padding:9px 14px;border-radius:100px;box-shadow:inset 0 0 0 1px rgba(20,23,26,.14)}
.cmp-laystrip.words .cmp-lay-t b{margin:0;font-size:13px}
.cmp-laystrip.words .cmp-lay-t.on{box-shadow:inset 0 0 0 2px #14171A}
.cmp-laystrip.words .cmp-lay-t:hover{background:rgba(20,23,26,.05)}
.cmp-laystrip.words .cmp-laystrip-in{gap:6px}

/* drop 95 */
/* peek carousel: the cards stay put when a slide's small print is shorter or longer (they were centred, so they slid up and down) */
.bnr-pk{justify-content:flex-start!important}
/* parallax hero: the floating label sits on the front picture's top-left corner instead of hovering beside it */
.clx-px-chip{right:calc(8% + min(30cqi,300px) + 18px)!important;top:calc(14% + 20px)!important;translate:100% 0}

/* drop 96: brand from a website */
.cmp-brand{position:fixed;inset:0;z-index:900;display:grid;place-items:center;padding:20px;background:rgba(20,23,26,.42);animation:cmpBrandBg .2s ease}
@keyframes cmpBrandBg{from{opacity:0}}
.cmp-brand-card{position:relative;width:min(520px,100%);max-height:calc(100dvh - 40px);overflow:auto;background:#fff;border-radius:20px;padding:28px;box-shadow:0 30px 80px -30px rgba(20,23,26,.6);font-family:var(--font,Inter,system-ui,sans-serif);color:#14171A;animation:cmpBrandIn .26s cubic-bezier(.2,.8,.2,1)}
@keyframes cmpBrandIn{from{opacity:0;transform:translateY(10px) scale(.98)}}
@media (prefers-reduced-motion:reduce){.cmp-brand,.cmp-brand-card{animation:none}}
.cmp-brand-card h2{margin:0 0 6px;font-size:22px;font-weight:700;letter-spacing:-.02em}
.cmp-brand-lede{margin:0 0 18px;font-size:14px;line-height:1.45;color:#6B7066}
.cmp-brand-x{position:absolute;right:14px;top:14px;width:36px;height:36px;border:0;border-radius:50%;background:#F1F2EF;font-size:20px;line-height:1;cursor:pointer;color:#14171A}
.cmp-brand-x:hover{background:#E4E5E0}
.cmp-brand-f{display:flex;gap:8px}
.cmp-brand-f input{flex:1;min-width:0;height:46px;padding:0 14px;border:0;border-radius:12px;background:#F1F2EF;font:400 16px/1 inherit;color:#14171A}
.cmp-brand-f input:focus{outline:2px solid #14171A;outline-offset:0}
.cmp-brand-go,.cmp-brand-apply,.cmp-brand-done{height:46px;padding:0 18px;border:0;border-radius:100px;background:#3A3D42;color:#fff;font:600 14px/1 inherit;cursor:pointer;white-space:nowrap;transition:background .15s,transform .1s}
.cmp-brand-go:hover,.cmp-brand-apply:hover,.cmp-brand-done:hover{background:#2C2F33}
.cmp-brand-go:active,.cmp-brand-apply:active{transform:scale(.97)}
.cmp-brand-go:disabled,.cmp-brand-apply:disabled{opacity:.6;cursor:default}
.cmp-brand-msg{margin:16px 0 0;font-size:14px;line-height:1.45;color:#6B7066}
.cmp-brand-msg.ok{color:#14171A}
.cmp-brand-res{margin-top:20px;display:flex;flex-direction:column;gap:16px}
.cmp-brand-top{display:flex;align-items:center;gap:12px}
.cmp-brand-top b{display:block;font-size:16px}.cmp-brand-top small{display:block;font-size:12.5px;color:#6B7066;margin-top:2px}
.cmp-brand-logo{flex:none;width:56px;height:56px;border-radius:12px;background:#F1F2EF;display:grid;place-items:center;overflow:hidden}
.cmp-brand-logo.dk{background:#14171A}
.cmp-brand-logo img{max-width:44px;max-height:44px;object-fit:contain}
.cmp-brand-sw{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.cmp-brand-sw label{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11.5px;color:#6B7066;text-align:center;cursor:pointer}
.cmp-brand-sw input{width:44px;height:44px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;-webkit-appearance:none;appearance:none}
.cmp-brand-sw input::-webkit-color-swatch-wrapper{padding:0}
.cmp-brand-sw input::-webkit-color-swatch{border:0;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(20,23,26,.14)}
.cmp-brand-sw input::-moz-color-swatch{border:0;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(20,23,26,.14)}
.cmp-brand-meta{display:flex;gap:18px;flex-wrap:wrap;font-size:13.5px}
.cmp-brand-meta i{font-style:normal;color:#8A8F85;margin-right:6px}
.cmp-brand-prev{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;border-radius:14px;box-shadow:inset 0 0 0 1px rgba(20,23,26,.1)}
.cmp-brand-prev b{font-size:18px;letter-spacing:-.02em}
.cmp-brand-pbtn{padding:10px 16px;font-size:13.5px;font-weight:600;color:#0B0C0A;background-clip:padding-box;mix-blend-mode:normal}
.cmp-brand-act{display:flex;align-items:center;gap:14px;margin-top:4px}
.cmp-brand-note{font-size:12.5px;line-height:1.4;color:#8A8F85}
@media (max-width:520px){.cmp-brand-sw{grid-template-columns:repeat(3,1fr)}.cmp-brand-f{flex-direction:column}.cmp-brand-act{flex-direction:column;align-items:flex-start}}
/* the Styles previews sit on the page colour, so light text on a dark brand stays readable */
.sgp-type,.sgp-motion,.sgp-icons{background:var(--bg,#fff);color:var(--ink,#14171A);border-radius:10px;padding:10px 12px;box-shadow:inset 0 0 0 1px rgba(20,23,26,.08)}

/* drop 97: families in the sidebar */
.cmp-sec .bl-sec-name b{display:block;font-weight:600}
.cmp-sec .bl-sec-name small{display:block;font-size:12px;color:#8A8F85;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmp-fam-nav{position:absolute;right:8px;bottom:8px;display:flex;align-items:center;gap:2px;padding:3px;border-radius:100px;background:rgba(20,23,26,.82);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:2}
.cmp-fam-nav i{font:600 11px/1 Inter,system-ui,sans-serif;font-style:normal;padding:0 4px;font-variant-numeric:tabular-nums;white-space:nowrap}
.cmp-fam-nav button{width:24px;height:24px;border:0;border-radius:50%;background:none;color:inherit;display:grid;place-items:center;cursor:pointer;padding:0}
.cmp-fam-nav button:hover{background:rgba(255,255,255,.2)}
.cmp-fam-nav button:active{transform:scale(.92)}
.cmp-media{display:flex;flex-direction:column;gap:8px;margin-top:12px;width:100%}
.cmp-media>i{font-style:normal;font-size:13px;color:var(--bc-mute,#6B7066)}
.cmp-fam .bl-sec-name{display:block}

/* drop 99: sample gradients need far less darkening than photos did.
   Only where the picture is one of BILD's sample gradients (marked data-bild-default); a person's own photo keeps its darkening. */
.bnr-img:has([data-bild-default])~.bnr-scrim[style*="--bnr-dk:0.5"],:has(>.bnr-img [data-bild-default])>.bnr-scrim[style*="--bnr-dk:0.5"]{--bnr-dk:.1!important}
/* sections whose darkening is fixed rather than a setting: a light fade where the words sit, instead of a heavy one */
.clx-px-bg:has([data-bild-default])::after{background:linear-gradient(90deg,rgba(10,12,14,.28),rgba(10,12,14,0) 70%)}
.clx-ph-panel:has([data-bild-default])::after{background:linear-gradient(180deg,transparent 45%,rgba(10,12,14,.32))}
.clx-sp-panel:has([data-bild-default])::before{background:linear-gradient(180deg,transparent 45%,rgba(10,12,14,.32))}
[data-promo-layout=full-bleed] .promo-card .art:has([data-bild-default])::after,[data-hero-layout=full-bleed] .hero-art:has([data-bild-default])::after{background:linear-gradient(to top,rgba(20,23,26,.4) 0,rgba(20,23,26,.1) 55%,rgba(20,23,26,0))}

/* drop 100: the red for removing and deleting is #DB3642 */
html:root{--bc-red:#DB3642}
html.cmp-page .bc-danger-btn,html.cmp-page .bc-danger,html.cmp-page .bc-menu-item.bc-danger,.cmp-clear-page{color:#DB3642!important}
html.cmp-page .bc-danger-btn:hover,.cmp-clear-page:hover{background:rgba(219,54,66,.08)!important}

/* drop 101: the colour of an offer section's cards */
.pb-sec[data-cmp-card] :is(.ofr-card,.promo-card){background:var(--cmp-card)!important}
.pb-sec[data-cmp-card-tone="dark"] :is(.ofr-card,.promo-card){--ink:#FFFFFF;--ink-body:rgba(255,255,255,.82);--ink-soft:rgba(255,255,255,.62);--border:rgba(255,255,255,.18);color:#fff}
.pb-sec[data-cmp-card-tone="light"] :is(.ofr-card,.promo-card){--ink:#14171A;--ink-body:#3A4046;--ink-soft:#6B7066;--border:#E4E6E8;color:#14171A}
.cmp-cardsw{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cmp-cardsw>button{width:30px;height:30px;padding:0;border:0;border-radius:50%;background:var(--c,linear-gradient(135deg,#fff 46%,#C9CCC6 46% 54%,#fff 54%));box-shadow:inset 0 0 0 1px rgba(20,23,26,.18);cursor:pointer;transition:transform .12s}
.cmp-cardsw>button:hover{transform:scale(1.08)}
.cmp-cardsw>button.on{box-shadow:inset 0 0 0 1px rgba(20,23,26,.18),0 0 0 2px #fff,0 0 0 4px #14171A}
.cmp-cardsw>button:focus-visible{outline:2px solid #14171A;outline-offset:3px}
/* while a sample gradient is still loading, the banner is dark behind its white words (it was pale grey) */
.bnr-img:has([data-bild-default]){background:#1B1E22}

/* drop 102: "no background" reads as empty; your own colour can be see-through */
#bcInsp .bc-sw button.cmp-sw-none{background:linear-gradient(135deg,#fff 46%,#DB3642 46% 54%,#fff 54%)!important;box-shadow:inset 0 0 0 1px rgba(20,23,26,.18)}
.cmp-sw-a{display:flex;align-items:center;gap:10px;margin-top:4px;font-size:13px;color:var(--bc-mute,#6B7066)}
.cmp-sw-a[hidden]{display:none}
.cmp-sw-a input{flex:1;min-width:0;accent-color:#14171A}
.cmp-sw-a output{width:38px;text-align:right;font-variant-numeric:tabular-nums;color:var(--bc-ink,#14171A)}
.cmp-sw-own.on span{background:linear-gradient(var(--c),var(--c)),repeating-conic-gradient(#D5D7D1 0 25%,#fff 0 50%) 0 0/8px 8px}

/* ---------- your own pictures on games and clips ---------- */
#bcInsp .cmp-pics-h{margin:2px 0 10px;font-size:12px;line-height:1.45;color:var(--ink-soft,#6b7066)}
#bcInsp .cmp-pics-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 8px}
#bcInsp .cmp-pic{position:relative;min-width:0}
#bcInsp .cmp-pic-b{display:block;position:relative;width:100%;aspect-ratio:3/4;padding:0;border:1px solid rgba(20,23,26,.1);border-radius:8px;overflow:hidden;background:#E9EAE7;cursor:pointer}
#bcInsp .cmp-pic-b img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
#bcInsp .cmp-pic-b span{position:absolute;left:0;right:0;bottom:0;padding:14px 4px 6px;font:600 11px/1 var(--font,inherit);color:#fff;text-align:center;background:linear-gradient(transparent,rgba(0,0,0,.72));opacity:0;transition:opacity .15s}
#bcInsp .cmp-pic-b:hover span,#bcInsp .cmp-pic-b:focus-visible span{opacity:1}
#bcInsp .cmp-pic-b:focus-visible{outline:2px solid #14171A;outline-offset:2px}
#bcInsp .cmp-pic.on .cmp-pic-b{border-color:#14171A;box-shadow:0 0 0 1px #14171A}
#bcInsp .cmp-pic-x{position:absolute;top:4px;right:4px;width:22px;height:22px;padding:0;border:0;border-radius:50%;background:#fff;color:#14171A;font:400 16px/22px var(--font,inherit);cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.3)}
#bcInsp .cmp-pic small{display:block;margin-top:5px;font-size:11px;line-height:1.25;color:var(--ink-soft,#6b7066);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#bcInsp .cmp-pics-all{margin-top:10px;padding:0;border:0;background:none;font:500 12px/1.3 var(--font,inherit);color:#14171A;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@media (hover:none){#bcInsp .cmp-pic-b span{opacity:1}}

/* ---------- your own logos: payment methods and the logo strip ---------- */
.clx-logo.cmp-logo-pic{padding-inline:28px}
.cmp-logo-img{display:block;height:36px;width:auto;max-width:168px;object-fit:contain}
.clx-lm-tile .cmp-logo-img{height:32px;max-width:140px}
.payment-strip.cmp-pay-on>.payment-card{display:none}
.payment-strip.cmp-pay-on{align-items:center}
.payment-strip-wrap{--ph:24px}
.payment-strip-wrap[data-psize=s]{--ph:18px}
.payment-strip-wrap[data-psize=l]{--ph:32px}
.cmp-pc{flex:0 0 auto;box-sizing:border-box;display:flex;align-items:center;justify-content:center;height:calc(var(--ph)*2.5);min-width:calc(var(--ph)*4.5);padding:0 calc(var(--ph)*.8);border-radius:12px;background:#fff;color:#14171A}
.cmp-pc-i{display:block;height:var(--ph);width:auto;max-width:calc(var(--ph)*3.6);object-fit:contain}
.cmp-pc-i.cmp-pc-sq{height:calc(var(--ph)*1.4)}
.cmp-pc .pm-mc-circles i{width:calc(var(--ph)*1.05);height:calc(var(--ph)*1.05)}
.cmp-pc .pm-mc-circles i:last-child{margin-left:calc(var(--ph)*-.4)}
.cmp-pc-t{font:700 calc(var(--ph)*.64)/1.1 var(--font,inherit);letter-spacing:-.01em;white-space:nowrap}
.payment-strip-wrap[data-pbox=line],.payment-strip-wrap[data-pbox=none]{background:transparent;padding-inline:0}
.payment-strip-wrap[data-pbox=line] .cmp-pc{background:transparent;color:inherit;box-shadow:inset 0 0 0 1px rgba(128,128,128,.42)}
.payment-strip-wrap[data-pbox=none] .cmp-pc{background:transparent;color:inherit;height:auto;min-width:0;padding:calc(var(--ph)*.3) calc(var(--ph)*.5);border-radius:8px}
.payment-strip-wrap[data-pbox=none] .payment-strip{gap:calc(var(--ph)*.9)}
.payment-strip-wrap[data-pdark] .cmp-pc.cmp-pc-chip{background:#fff;color:#14171A;box-shadow:none}
.payment-strip-wrap[data-pbox=line][data-pdark] .cmp-pc.cmp-pc-chip{box-shadow:inset 0 0 0 1px rgba(128,128,128,.42);background:transparent}
.payment-strip-wrap[data-pbox=line][data-pdark] .cmp-pc.cmp-pc-chip .cmp-pc-i{background:#fff;border-radius:6px;padding:calc(var(--ph)*.22) calc(var(--ph)*.4);box-sizing:content-box}
.payment-strip-wrap[data-ptone=grey] .cmp-pc-i,.payment-strip-wrap[data-ptone=grey] .pm-mc-circles{filter:grayscale(1)}
.payment-strip-wrap .cmp-pc-i.cmp-pc-inv{filter:invert(1)}
.payment-strip-wrap[data-play=wrap] .payment-strip{flex-wrap:wrap;justify-content:center;overflow:visible}
#bcInsp .cmp-lg-src{display:none!important}
#bcInsp .cmp-logos{margin:4px 0 14px}
#bcInsp .cmp-lg-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
#bcInsp .cmp-lg-pic{flex:0 0 56px;width:56px;height:40px;padding:0;border:1px dashed rgba(20,23,26,.28);border-radius:8px;background:#F4F5F2;display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;color:#6b7066;font:400 18px/1 var(--font,inherit)}
#bcInsp .cmp-lg-pic.on{border-style:solid;border-color:rgba(20,23,26,.14);background:#fff}
#bcInsp .cmp-lg-pic img{max-width:84%;max-height:76%;object-fit:contain;display:block}
#bcInsp .cmp-lg-pic:hover{border-color:#14171A}
#bcInsp .cmp-lg-pic:focus-visible,#bcInsp .cmp-lg-x:focus-visible{outline:2px solid #14171A;outline-offset:2px}
#bcInsp .cmp-lg-in{flex:1;min-width:0;height:40px;padding:0 12px;border:1px solid transparent;border-radius:8px;background:#F4F5F2;font:400 16px/1 var(--font,inherit);color:#14171A}
#bcInsp .cmp-lg-in:focus{outline:0;border-color:#14171A;background:#fff}
#bcInsp .cmp-lg-name{flex:1;min-width:0;font-size:14px;color:#14171A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#bcInsp .cmp-lg-x{flex:0 0 28px;width:28px;height:28px;padding:0;border:0;border-radius:50%;background:none;color:#6b7066;font:400 18px/28px var(--font,inherit);cursor:pointer}
#bcInsp .cmp-lg-x:hover{background:#ECEDEA;color:#14171A}
#bcInsp .cmp-lg-add{display:flex;align-items:center;gap:14px;margin-top:12px}
#bcInsp .cmp-lg-add .cmp-pics-all{margin-top:0}

#bcInsp .cmp-lg-list{margin-bottom:4px}
#bcInsp .cmp-lg-row.drag{background:#F4F5F2;border-radius:10px;box-shadow:0 6px 18px -8px rgba(0,0,0,.35);position:relative;z-index:2}
#bcInsp .cmp-lg-grip{flex:0 0 22px;width:22px;height:40px;padding:0;border:0;background:none;color:#9A9E96;cursor:grab;touch-action:none;display:flex;align-items:center;justify-content:center;border-radius:6px}
#bcInsp .cmp-lg-grip:hover{color:#14171A}
#bcInsp .cmp-lg-grip:active{cursor:grabbing}
#bcInsp .cmp-lg-grip:focus-visible,#bcInsp .cmp-lg-re:focus-visible,#bcInsp .cmp-po-b button:focus-visible,#bcInsp .cmp-pay-menu button:focus-visible{outline:2px solid #14171A;outline-offset:2px}
#bcInsp .cmp-pay .cmp-lg-pic{flex-basis:64px;width:64px}
#bcInsp .cmp-pay .cmp-lg-pic .cmp-pc-i{height:auto;max-height:20px;max-width:48px}
#bcInsp .cmp-pay .cmp-lg-pic .pm-mc-circles i{width:18px;height:18px}
#bcInsp .cmp-lg-re{padding:0;border:0;background:none;font:500 12px/1 var(--font,inherit);color:#6b7066;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
#bcInsp .cmp-pay-menu{margin-top:10px;padding:6px;border:1px solid rgba(20,23,26,.12);border-radius:12px;background:#fff;display:grid;gap:2px}
#bcInsp .cmp-pay-menu button{display:flex;align-items:center;gap:12px;width:100%;padding:6px 8px;border:0;border-radius:8px;background:none;font:400 14px/1.2 var(--font,inherit);color:#14171A;text-align:left;cursor:pointer}
#bcInsp .cmp-pay-menu button:hover{background:#F4F5F2}
#bcInsp .cmp-pay-menu i{flex:0 0 56px;height:30px;display:flex;align-items:center;justify-content:center;font-style:normal}
#bcInsp .cmp-pay-menu i .cmp-pc-i{height:auto;max-height:18px;max-width:50px}
#bcInsp .cmp-pay-menu i b{font-weight:500;color:#6b7066}
#bcInsp .cmp-po-all{margin-top:18px;display:grid;gap:12px}
#bcInsp .cmp-po>span{display:block;margin-bottom:6px;font-size:13px;color:#6b7066}
#bcInsp .cmp-po-b{display:flex;gap:4px;padding:4px;border-radius:12px;background:#ECEDEA}
#bcInsp .cmp-po-b button{flex:1;min-width:0;height:34px;padding:0 6px;border:0;border-radius:9px;background:none;font:500 13px/1 var(--font,inherit);color:#6b7066;cursor:pointer;white-space:nowrap}
#bcInsp .cmp-po-b button.on{background:#fff;color:#14171A;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.payment-strip-wrap[data-pbox=line] .pm-mc-circles i:last-child,.payment-strip-wrap[data-pbox=none] .pm-mc-circles i:last-child{mix-blend-mode:normal;opacity:.9}

/* payment methods that drift past */
.payment-strip-wrap[data-play=move]{display:flex;align-items:center;gap:12px}
.payment-strip-wrap[data-play=move] .payment-strip{flex:1;min-width:0;overflow:hidden;gap:0}
.cmp-pm{flex:1;min-width:0;overflow:hidden}
.payment-strip-wrap[data-pbox=line] .cmp-pm,.payment-strip-wrap[data-pbox=none] .cmp-pm{-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.cmp-pm-row{display:flex;width:max-content;will-change:transform}
.cmp-pm-set{display:flex;flex:0 0 auto;align-items:center}
.cmp-pm .cmp-pc{margin-right:12px}
.payment-strip-wrap[data-pbox=none] .cmp-pm .cmp-pc{margin-right:calc(var(--ph)*.9)}
.cmp-pm-pause{flex:0 0 36px;width:36px;height:36px;padding:0;border:1px solid rgba(128,128,128,.45);border-radius:50%;background:transparent;color:inherit;display:flex;align-items:center;justify-content:center;cursor:pointer}
.cmp-pm-pause svg{width:16px;height:16px}
.cmp-pm-pause:focus-visible{outline:2px solid currentColor;outline-offset:2px}
#bcInsp .cmp-po-r input{width:100%}
#bcInsp .cmp-po-r output{float:right;color:#14171A}

/* no start / stop buttons on moving sections (logo strip, payment methods, banners, game walls, ticker).
   Motion still starts paused for visitors who ask their device for less motion. Video players keep theirs. */
.clx-pause,.gm-pause,[data-bnr-pause],.tfx-pause,.cmp-pm-pause{display:none!important}

/* ---------- How it works: your own icon or picture per step ---------- */
.vip-how .how .ic.cmp-how-ink{color:var(--ink,#14171A)}
.vip-how .how .ic.cmp-how-ink svg{width:28px;height:28px;display:block}
.vip-how .how .ic .cmp-how-n{font:700 22px/1 var(--font,inherit);letter-spacing:-.02em}
.vip-how .how .ic.cmp-how-off{display:none}
.vip-how .how .ic.cmp-how-pic{overflow:hidden;padding:0}
.vip-how .how .ic.cmp-how-pic img{width:100%;height:100%;object-fit:cover;display:block}
.vip-how .how.cmp-how-l .ic.cmp-how-pic{display:block;width:100%;height:auto;aspect-ratio:4/3;border-radius:14px}
#bcInsp .cmp-how .cmp-how-b{flex-basis:48px;width:48px;height:48px;border-radius:12px;color:#14171A}
#bcInsp .cmp-how .cmp-how-b svg{width:26px;height:26px}
#bcInsp .cmp-how .cmp-how-b img{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:cover}
#bcInsp .cmp-how .cmp-how-b .cmp-how-n{font:700 18px/1 var(--font,inherit)}
#bcInsp .cmp-how-none{width:22px;height:2px;background:#9A9E96;transform:rotate(-45deg)}
#bcInsp .cmp-how-pk{margin:2px 0 14px;padding:10px;border:1px solid rgba(20,23,26,.12);border-radius:12px;background:#fff;max-height:300px;overflow:auto}
#bcInsp .cmp-how-top{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-bottom:6px}
#bcInsp .cmp-how-top button{height:36px;padding:0 8px;border:0;border-radius:9px;background:#F4F5F2;font:500 13px/1 var(--font,inherit);color:#14171A;cursor:pointer}
#bcInsp .cmp-how-pk small{display:block;margin:12px 2px 6px;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:#6b7066}
#bcInsp .cmp-how-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
#bcInsp .cmp-how-grid button{aspect-ratio:1;padding:0;border:0;border-radius:8px;background:none;color:#14171A;display:flex;align-items:center;justify-content:center;cursor:pointer}
#bcInsp .cmp-how-grid button svg{width:22px;height:22px}
#bcInsp .cmp-how-grid button:hover,#bcInsp .cmp-how-top button:hover{background:#ECEDEA}
#bcInsp .cmp-how-pk button.on{background:#14171A;color:#fff}
#bcInsp .cmp-how-pk button:focus-visible{outline:2px solid #14171A;outline-offset:2px}

/* ---------- Columns: looks on top of BILD's Multi-Column section ---------- */
.cmp-col-h{margin-bottom:28px}
.cmp-col-eye{display:block;margin-bottom:10px;font:600 12px/1.2 var(--font,inherit);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft,#6b7066)}
.cmp-col-head{margin:0;font:700 clamp(28px,4vw,44px)/1.05 var(--head-font,var(--font,inherit));letter-spacing:-.03em;color:var(--ink,#14171A);max-width:16em}
.cols-grid[data-clook]:not([data-clook=pics]) .cols-card>.cols-card-image,.cols-grid[data-clook]:not([data-clook=pics]) .cols-card>.cols-card-icon{display:none!important}
.cols-grid:is([data-clook=numbers],[data-clook=steps],[data-clook=quotes]) .cols-card-badge{display:none!important}
.cmp-col-top{display:flex;align-items:center;margin-bottom:16px;color:var(--ink,#14171A)}
.cols-card[style*="center"] .cmp-col-top{justify-content:center}
.cols-card[style*="right"] .cmp-col-top{justify-content:flex-end}
.cols-grid[data-clook=icons] .cmp-col-top svg{width:30px;height:30px}
.cols-grid[data-clook=icons] .cmp-col-top{width:52px;height:52px;border-radius:16px;background:rgba(128,128,128,.14);justify-content:center}
.cols-grid[data-clook=icons] .cols-card[style*="center"] .cmp-col-top{margin-inline:auto}
.cmp-col-v{font:800 clamp(34px,4.4vw,56px)/1 var(--head-font,var(--font,inherit));letter-spacing:-.04em}
.cmp-col-n{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--ink,#14171A);color:var(--bg,#fff);font:700 18px/1 var(--font,inherit)}
.cmp-col-q{opacity:.28}
.cols-grid[data-clook=quotes] .cols-card-title{font-size:20px!important;font-weight:600;line-height:1.3;letter-spacing:-.01em;margin-bottom:14px}
.cols-grid[data-clook=quotes] .cols-card-text{flex:0 0 auto;font-weight:600}
.cols-grid[data-ccard=line] .cols-card{background:transparent!important;box-shadow:inset 0 0 0 1px rgba(128,128,128,.34)}
.cols-grid[data-ccard=none] .cols-card{background:transparent!important;padding:0;box-shadow:none;transform:none!important}
.cols-grid[data-ccard=none]{gap:36px}
#bcInsp.cmp-tidy .bc-ibd:not(.bc-motion)>.cmp-cols{order:0;margin-top:0}
#bcInsp .cmp-cols{display:grid;gap:14px;padding-bottom:6px}
#bcInsp .cmp-col-f{display:block}
#bcInsp .cmp-col-f>span,#bcInsp .cmp-col-ics>span{display:block;margin-bottom:6px;font-size:13px;color:#6b7066}
#bcInsp .cmp-col-f input{width:100%;box-sizing:border-box;height:42px;padding:0 12px;border:1px solid transparent;border-radius:10px;background:#F4F5F2;font:400 16px/1 var(--font,inherit);color:#14171A}
#bcInsp .cmp-col-f input:focus{outline:0;border-color:#14171A;background:#fff}
#bcInsp .cmp-col-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#bcInsp .cmp-col-ics>div{display:flex;gap:8px}
#bcInsp[data-clook]:not([data-clook=pics]) .cmp-col-media{display:none!important}
#bcInsp:is([data-clook=numbers],[data-clook=steps],[data-clook=quotes]) .cmp-col-badge{display:none!important}

/* ---------- the games list ---------- */
.cmp-games{position:fixed;inset:0;z-index:299;display:grid;place-items:center;padding:20px;background:rgba(20,23,26,.42);font-family:var(--font,Inter,system-ui,sans-serif);color:#14171A}
.cmp-games-card{width:min(940px,100%);height:min(760px,calc(100dvh - 40px));display:flex;flex-direction:column;background:#fff;border-radius:20px;box-shadow:0 30px 80px -30px rgba(20,23,26,.6);overflow:hidden}
.cmp-games-h{position:relative;display:flex;justify-content:space-between;gap:20px;padding:24px 28px 16px}
.cmp-games-h h2{margin:0 0 4px;font-size:22px;font-weight:700;letter-spacing:-.02em}
.cmp-games-h p{margin:0;font-size:14px;color:#6b7066}
.cmp-games-h .cmp-brand-x{position:static;flex:0 0 auto}
.cmp-games-cols,.cmp-g-row{display:grid;grid-template-columns:22px 48px minmax(0,1.3fr) minmax(0,1.1fr) 132px minmax(0,1.1fr) 44px 28px;gap:8px;align-items:center}
.cmp-games-cols{padding:0 28px 8px;font-size:12px;color:#6b7066;border-bottom:1px solid rgba(20,23,26,.08)}
.cmp-games-list{flex:1;overflow:auto;padding:10px 28px}
.cmp-g-row{padding:5px 0}
.cmp-g-row.drag{background:#F4F5F2;border-radius:12px;box-shadow:0 8px 22px -10px rgba(0,0,0,.4);position:relative;z-index:2}
.cmp-g-row input[type=text],.cmp-g-row select{width:100%;min-width:0;box-sizing:border-box;height:42px;padding:0 12px;border:1px solid transparent;border-radius:10px;background:#F4F5F2;font:400 16px/1 var(--font,inherit);color:#14171A}
.cmp-g-row select{appearance:none;-webkit-appearance:none;padding-right:26px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314171A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;background-size:14px}
.cmp-g-row input[type=text]:focus,.cmp-g-row select:focus{outline:0;border-color:#14171A;background-color:#fff}
.cmp-g-pic{position:relative;width:48px;height:56px;padding:0;border:1px solid rgba(20,23,26,.12);border-radius:8px;overflow:hidden;background:#E9EAE7;cursor:pointer}
.cmp-g-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cmp-g-pic span{position:absolute;inset:auto 0 0;padding:8px 0 4px;font:600 9px/1 var(--font,inherit);color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.75));opacity:0;transition:opacity .15s}
.cmp-g-pic:hover span,.cmp-g-pic:focus-visible span{opacity:1}
.cmp-g-pic:focus-visible{outline:2px solid #14171A;outline-offset:2px}
.cmp-g-new{display:flex;justify-content:center;cursor:pointer}
.cmp-g-new input{position:absolute;opacity:0;width:1px;height:1px}
.cmp-g-new i{width:36px;height:22px;border-radius:11px;background:#D5D7D2;position:relative;transition:background .15s}
.cmp-g-new i::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .15s;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.cmp-g-new input:checked+i{background:#14171A}
.cmp-g-new input:checked+i::after{transform:translateX(14px)}
.cmp-g-new input:focus-visible+i{outline:2px solid #14171A;outline-offset:2px}
.cmp-games .cmp-lg-grip{width:22px;height:42px;padding:0;border:0;background:none;color:#9A9E96;cursor:grab;touch-action:none;display:flex;align-items:center;justify-content:center}
.cmp-games .cmp-lg-x{width:28px;height:28px;padding:0;border:0;border-radius:50%;background:none;color:#6b7066;font-size:18px;line-height:28px;cursor:pointer}
.cmp-games .cmp-lg-x:hover{background:#ECEDEA;color:#14171A}
.cmp-games-f{display:flex;align-items:center;gap:12px;padding:16px 28px;border-top:1px solid rgba(20,23,26,.08)}
.cmp-games-f>span{flex:1}
.cmp-games-f .cmp-lg-re{padding:0;border:0;background:none;font:500 13px/1 var(--font,inherit);color:#6b7066;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.cmp-games-f .bc-btn,.cmp-games-f .bc-pri{height:42px;padding:0 18px;border-radius:21px;font:600 14px/1 var(--font,inherit);cursor:pointer}
.cmp-games-f .bc-btn{border:1px solid rgba(20,23,26,.16);background:#fff;color:#14171A}
.cmp-games-f .bc-pri{border:0;background:#3A3D42;color:#fff}
@media (max-width:760px){.cmp-games-cols{display:none}.cmp-g-row{grid-template-columns:22px 48px minmax(0,1fr) 28px;row-gap:6px}.cmp-g-row>input[data-f="1"],.cmp-g-row>select,.cmp-g-row>input[data-f="5"]{grid-column:3}.cmp-g-row>.cmp-g-new{grid-column:3;justify-content:flex-start}}

/* buttons whose words would match their background on a toned section */
[data-cmp-inkc=dark],[data-cmp-inkc=dark] *{color:#14171A!important}
[data-cmp-inkc=light],[data-cmp-inkc=light] *{color:#fff!important}

/* stacking panels: picture or colour */
#bcInsp.cmp-tidy .bc-ibd:not(.bc-motion)>.cmp-pan{order:0;margin-top:0}
#bcInsp .cmp-pan .cmp-pan-b{flex-basis:64px;width:64px;height:44px;color:#fff}
#bcInsp .cmp-pan .cmp-pan-b img{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:cover}
#bcInsp .cmp-pan .cmp-lg-name small{display:block;font-size:12px;color:#6b7066}

/* ---------- Text and picture: picture left, right, or none ---------- */
[data-tp=left],[data-tp=right]{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:clamp(24px,5vw,64px);align-items:center}
:is([data-tp=left],[data-tp=right])>.cmp-tp-txt{text-align:left!important;max-width:none!important;margin:0!important}
:is([data-tp=left],[data-tp=right])>.cmp-tp-txt>:first-child{margin-top:0!important}
:is([data-tp=left],[data-tp=right])>.cmp-tp-txt{order:1}
[data-tp=left]>.cmp-tp-img{order:0}
[data-tp=right]>.cmp-tp-img{order:2}
[data-tp=text]>.cmp-tp-img{display:none!important}
:is([data-tp=left],[data-tp=right])>.cmp-tp-img,:is([data-tp=left],[data-tp=right])>.cmp-tp-img>[data-role=resize-target]{width:100%!important}
#bcInsp.cmp-tidy .bc-ibd:not(.bc-motion)>.cmp-tp{order:0;margin-top:0}
#bcInsp.cmp-tidy .bc-ibd:not(.bc-motion)>.cmp-q{order:0;margin-top:0}
#bcInsp .cmp-q{display:grid;gap:12px}
#bcInsp .cmp-qrow{display:grid;grid-template-columns:minmax(0,1fr) 28px;gap:6px;align-items:center}
#bcInsp .cmp-qrow input,#bcInsp .cmp-qrow textarea{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid transparent;border-radius:10px;background:#F4F5F2;font:400 16px/1.4 var(--font,inherit);color:#14171A}
#bcInsp .cmp-qrow input{height:42px;padding-block:0;font-weight:600}
#bcInsp .cmp-qrow textarea{grid-column:1/-1;resize:vertical;min-height:72px}
#bcInsp .cmp-qrow input:focus,#bcInsp .cmp-qrow textarea:focus{outline:0;border-color:#14171A;background:#fff}

/* the Add section window mirrors the sidebar (hidden by attribute; the sidebar reads the same window behind the scenes) */
html:not(.cmp-behind) .sm-wrap[data-cmp-mir] [data-cmp-x]{display:none!important}
html:not(.cmp-behind) .sm-wrap[data-cmp-mir] .sm-card-m[data-cmp-s]{font-size:0}
html:not(.cmp-behind) .sm-wrap[data-cmp-mir] .sm-card-m[data-cmp-s]::before{content:attr(data-cmp-s);font-size:13px}

/* parallax hero: no floating "Live now" pill */
.clx-px-chip{display:none!important}
/* button motion: words that read on the accent, whatever the accent is */
html .bfx:not(.btn-outline){--bfx-accfg:var(--cmp-accfg,var(--ink,#14171A))}
/* Text window banner: pointing at the word in the builder painted a tint over it and lost the picture-through-letters */
.pb-block-stage .bnr-tw-word[data-inline-edit]:hover,.pb-block-stage .bnr-tw-word[data-inline-edit]:focus,.bnr-tw-word:hover,.bnr-tw-word:focus{background-color:var(--bnr-ink)!important;background-size:cover!important;-webkit-background-clip:text!important;background-clip:text!important;background-repeat:no-repeat}

/* offer cards: an outline instead of a fill */
.pb-sec[data-cmp-card="line"] :is(.ofr-card,.promo-card){background:transparent!important;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,currentColor 24%,transparent)!important}
.cmp-cardsw>button[data-cmp-card="line"]{background:#fff;box-shadow:inset 0 0 0 2.5px #14171A}
.cmp-cardsw>button[data-cmp-card="line"].on{box-shadow:inset 0 0 0 2.5px #14171A,0 0 0 2px #fff,0 0 0 4px #14171A}
/* offers as a list: the picture's own height stretched its row, so rows came out at different sizes */
.ofr-grid[data-layout=list]{grid-auto-rows:1fr}
.ofr-grid[data-layout=list] .ofr-img{position:relative;aspect-ratio:16/10!important}
.ofr-grid[data-layout=list] .ofr-img img{position:absolute;inset:0;width:100%;height:100%}
@media (max-width:600px){.ofr-grid[data-layout=list]{grid-auto-rows:auto}.ofr-grid[data-layout=list] .ofr-img{flex:0 0 auto}}
.pb-device-frame.device-mobile .ofr-grid[data-layout=list]{grid-auto-rows:auto}
.pb-device-frame.device-mobile .ofr-grid[data-layout=list] .ofr-img{flex:0 0 auto}
/* Prize wheel, Big arc: on a phone BILD swapped the half wheel for a small whole one. It stays a half wheel, as on desktop. */
@container (max-width:520px){
.rt .rt-arc{height:calc(63cqi + 22px)!important;overflow:hidden!important;justify-content:flex-end!important;padding-bottom:22px!important}
.rt .rt-arc .rt-wh-half{position:absolute!important;left:50%!important;top:22px!important;transform:translateX(-50%)!important;width:130cqi!important;margin:0!important}
.rt .rt-arc .rt-wh-half svg.rt-ptr{top:-18px!important;width:44px!important;height:56px!important;margin-left:-22px!important}
.rt .rt-arc .rt-arc-go{box-shadow:0 0 0 4px #fff,0 10px 30px -10px rgba(0,0,0,.5)!important}
}
/* a colour of your own on a banner: the banner paints its own panel over the section, so it takes the colour too */
.pb-sec[data-cmp-bg] .bnr-wrap{--bnr-gi:var(--ink,#14171A)}
.pb-sec[data-cmp-bg][data-bg=ink] .bnr-wrap{--bnr-gi:#fff;--bnr-soft:rgba(255,255,255,.7);--bnr-line:rgba(255,255,255,.28)}
.pb-sec[data-cmp-bg] .bnr-wrap :is(.bnr-an,.bnr-cd,.bnr-ck,.bnr-jp,.bnr-pk,.bnr-sp,.bnr-ss,.bnr-st,.bnr-su,.bnr-th,.bnr-tw,.bnr-wb,.bnr-th-strip){background:var(--cmp-bg)!important;color:var(--bnr-gi)!important}
.pb-sec[data-cmp-bg][data-bg=ink] .pb-block-stage .bnr-tw-word.bnr-tw-word,.pb-sec[data-cmp-bg][data-bg=ink] .pb-block-stage .bnr-tw-word.bnr-tw-word:is(:hover,:focus){background-color:#fff!important}
/* a colour of your own on reward sections: scratch cards, the lit wheel and the reel strip paint a panel of their own over the section */
.pb-sec[data-cmp-bg] .rt.rt{--rt-bg:var(--cmp-bg);--rt-fg:#14171A;--rt-mute:#5c6159;--rt-card:#fff;--rt-card-ink:#14171A;--rt-sand:color-mix(in srgb,#000 7%,var(--cmp-bg));--rt-line:rgba(20,23,26,.18)}
.pb-sec[data-cmp-bg][data-bg=ink] .rt.rt{--rt-fg:#fff;--rt-mute:rgba(255,255,255,.72);--rt-card:color-mix(in srgb,#000 32%,var(--cmp-bg));--rt-card-ink:#fff;--rt-sand:color-mix(in srgb,#000 22%,var(--cmp-bg));--rt-line:rgba(255,255,255,.22)}
/* Parallax hero (Depth scene): the picture sits in the middle of the height and the words start level with its top */
@container (min-width:601px){
.clx-wrap[data-kind=parallax] .clx-px-mid{top:calc(50% - min(30cqi,300px)*2/3)}
.clx-wrap[data-kind=parallax] .clx-px-front{bottom:auto;top:calc(50% - min(30cqi,300px)*2/3)}
}

/* a Button block looks like the call-to-action in the banners and sections above it (accent, the theme's button shape), unless the theme sets a main style */
.pb-fluid .pb-item:not([data-bo-main]) .btn.btn-primary{background:var(--gold,#39D609);color:var(--on-gold,#14171A);border-radius:100px;height:50px;padding:0 24px;font-weight:600}
.pb-fluid .pb-item:not([data-bo-main]) .btn.btn-primary:hover{background:var(--gold-deep,#2CA607)}
#pbDeviceFrame[data-cmp-shape] .pb-fluid .pb-item:not([data-bo-main]) .btn.btn-primary{border-radius:var(--r-btn)}

/* Add a section window: pointing at the group that is already chosen left white words on a pale background */
.sm-wrap .sm-rail button.on:hover:not(:disabled){color:#14171A}
.sm-wrap .sm-rail button.on:hover:not(:disabled) small{color:#6B7066}
/* Game fan: no panel of its own behind it (it left a strip of page above and below); it takes the section's background */
.clx-wrap .clx.clx-fan{background:transparent}
/* the classics' dark call-to-action matches every other section's: accent */
.clx-wrap .clx-btn.clx-btn-ink{background:var(--gold,#39D609);color:var(--on-gold,#14171A)}
/* nothing spills past the page's edge in preview (the centre-stage games carousel did) */
body.preview-mode .pb-device-frame{overflow-x:clip}
/* countdown banner: the clock's tiles are always dark, so their numbers are always light */
.bnr-wrap .bnr-cd .bnr-flip{color:#fff}
/* Fanned stack: the button underneath */
.cmp-fan-cta{display:flex;justify-content:center;padding-top:20px}
.cmp-fan-cta .cmp-cta{height:50px;padding:0 24px;border-radius:100px;background:var(--gold,#39D609);color:var(--on-gold,#14171A);font-weight:600;font-size:16px;text-decoration:none}
#pbDeviceFrame[data-cmp-shape] .cmp-fan-cta .cmp-cta{border-radius:var(--r-btn)}
#bcInsp.cmp-tidy .bc-ibd:not(.bc-motion)>.cmp-fanb{order:0;margin-top:0}

/* one call-to-action look across sections: accent colour, pill (or the theme's button shape). These were dark green, white or black. */
:is(.pb-sec,.cmp-shot,.cmp-peek,.cmp-ghost,.sm-card) :is(.btn.btn-primary,.btn.stack-cta,.btn.sbs-btn,.btn.bnr-btn-ink,.btn.rt-btn-ink,.b.ink){background:var(--gold,#39D609);color:var(--on-gold,#14171A);border-radius:100px}
:is(.pb-sec,.cmp-shot,.cmp-peek,.cmp-ghost,.sm-card) :is(.btn.btn-primary,.btn.stack-cta,.btn.sbs-btn,.btn.bnr-btn-ink,.btn.rt-btn-ink,.b.ink):hover{background:var(--gold-deep,#2CA607)}
#pbDeviceFrame[data-cmp-shape] :is(.pb-sec,.cmp-shot,.cmp-peek,.cmp-ghost,.sm-card) :is(.btn.btn-primary,.btn.stack-cta,.btn.sbs-btn,.btn.bnr-btn-ink,.btn.rt-btn-ink,.b.ink){border-radius:var(--r-btn)}

/* sidebar: a short strip of a section still gets a tile tall enough to see and press (the look arrows used to hang over it) */
.cmp-sec .cmp-shot{min-height:108px;display:flex;flex-direction:column;justify-content:center}
.cmp-sec .cmp-shot .cmp-zoom{flex:none}

/* ---------- Width and spacing (see layoutBox in campaign-builder.js) ---------- */
.cmp-lo-row{display:grid;grid-template-columns:1fr 1.2fr;align-items:center;gap:10px;margin-top:8px}
.cmp-lo-row>span{font-size:13px;color:#484f5a}
.cmp-lo-row select{font-size:16px;min-width:0}
#bcInsp.cmp-tidy .bc-ibd:not(.bc-motion)>.cmp-lob{order:1}
.pb-sec[data-lw=narrow] [data-cmp-li]{max-width:760px!important}
.pb-sec[data-lw=std] [data-cmp-li]{max-width:1120px!important}
.pb-sec[data-lw=wide] [data-cmp-li]{max-width:1400px!important}
.pb-sec[data-lw=full] [data-cmp-li]{max-width:none!important}
.pb-sec[data-lp=left] [data-cmp-li]{margin-left:0!important;margin-right:auto!important}
.pb-sec[data-lp=centre] [data-cmp-li]{margin-left:auto!important;margin-right:auto!important}
/* the space goes on the section's stage (where BILD puts it for some sections) and the wrapper inside adds none */
.pb-sec[data-ls] [data-cmp-lo]{padding-top:0!important;padding-bottom:0!important}
.pb-sec[data-ls=none]>.pb-block-stage,#pbDeviceFrame .pb-sec[data-ls=none]>.pb-block-stage{padding-top:0px!important;padding-bottom:0px!important}
.pb-sec[data-ls=s]>.pb-block-stage,#pbDeviceFrame .pb-sec[data-ls=s]>.pb-block-stage{padding-top:24px!important;padding-bottom:24px!important}
.pb-sec[data-ls=m]>.pb-block-stage,#pbDeviceFrame .pb-sec[data-ls=m]>.pb-block-stage{padding-top:48px!important;padding-bottom:48px!important}
.pb-sec[data-ls=l]>.pb-block-stage,#pbDeviceFrame .pb-sec[data-ls=l]>.pb-block-stage{padding-top:96px!important;padding-bottom:96px!important}
#pbDeviceFrame.device-mobile .pb-sec[data-ls=m]>.pb-block-stage{padding-top:32px!important;padding-bottom:32px!important}
#pbDeviceFrame.device-mobile .pb-sec[data-ls=l]>.pb-block-stage{padding-top:56px!important;padding-bottom:56px!important}
@media (max-width:600px){.pb-sec[data-ls=m]>.pb-block-stage,#pbDeviceFrame .pb-sec[data-ls=m]>.pb-block-stage{padding-top:32px!important;padding-bottom:32px!important}.pb-sec[data-ls=l]>.pb-block-stage,#pbDeviceFrame .pb-sec[data-ls=l]>.pb-block-stage{padding-top:56px!important;padding-bottom:56px!important}}
.pb-sec[data-lh=centre] :is(.ofr-head,[data-cmp-li]>h2,[data-cmp-li]>p){text-align:center}
.pb-sec[data-lh=left] :is(.ofr-head,[data-cmp-li]>h2,[data-cmp-li]>p){text-align:left}
/* offer cards fill the width they are given (three cards used to sit at the left of a wide page with empty columns beside them) */
.pb-sec .ofr-grid:not([data-layout=list]){grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}

/* drop 148: a page's own unnamed menu entry (it lets a page outside the menu open when published) never shows */
li:has(> a[data-page]:empty) { display: none !important; }
a[data-page]:empty:not(.bs-logo) { display: none !important; }

/* drop 149: a gradient background (Mesh, Aurora, Rim light) made every child of the section sit in the flow, the toolbar included, so it dropped to the bottom */
.pb-sec[data-grad] > .pb-block-toolbar{position:absolute;z-index:900}

/* drop 149 ---------------------------------------------------------------- */
/* the + of "your own colour" is drawn, so it sits dead centre in every font */
.cmp-sw-own:not(.on) span::before{content:"";width:10px;height:10px;background:linear-gradient(#14171A,#14171A) center/10px 2px no-repeat,linear-gradient(#14171A,#14171A) center/2px 10px no-repeat}
/* a gradient from your own colour */
#pbDeviceFrame .pb-sec[data-cmp-bg][data-cmp-grad]{background:var(--cmp-bgg)!important}
.pb-sec[data-cmp-grad] .bnr-wrap :is(.bnr-an,.bnr-cd,.bnr-ck,.bnr-jp,.bnr-pk,.bnr-sp,.bnr-ss,.bnr-st,.bnr-su,.bnr-th,.bnr-tw,.bnr-wb,.bnr-th-strip),
.pb-sec[data-cmp-img] .bnr-wrap :is(.bnr-an,.bnr-cd,.bnr-ck,.bnr-jp,.bnr-pk,.bnr-sp,.bnr-ss,.bnr-st,.bnr-su,.bnr-th,.bnr-tw,.bnr-wb,.bnr-th-strip){background:transparent!important}
.pb-sec[data-cmp-grad] .rt.rt,.pb-sec[data-cmp-img] .rt.rt{--rt-bg:transparent}
/* a picture behind a section */
.pb-sec > .cmp-bgimg{position:absolute!important;inset:0;z-index:0!important;overflow:hidden;pointer-events:none}
.pb-sec > .cmp-bgimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pb-sec > .cmp-bgimg i{position:absolute;inset:0;background:rgba(10,12,14,var(--cmp-bgd,.4))}
.pb-sec[data-cmp-img]{position:relative}
.pb-sec[data-cmp-img] > .pb-block-stage{position:relative;z-index:1;background:transparent!important}
.pb-sec[data-cmp-img] > .pb-block-stage > :first-child{background-color:transparent!important}
/* the controls for both, under the swatches */
.cmp-bgx{display:grid;gap:10px;margin-top:12px}
.cmp-bgx-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cmp-bgx-l{font-weight:500;font-size:13px;line-height:1.3;color:#5c6159;margin-right:auto}
.cmp-bgx-t{font-weight:500;font-size:13px;line-height:1;padding:9px 14px;border-radius:100px;border:1px solid rgba(20,23,26,.18);background:#fff;color:#14171A;cursor:pointer}
.cmp-bgx-t.on{background:#14171A;color:#fff;border-color:#14171A}
.cmp-bgx-c{position:relative;flex:none;width:28px;height:28px;border-radius:50%;background:var(--c,#fff);box-shadow:0 0 0 1px rgba(20,23,26,.18);cursor:pointer}
.cmp-bgx-c input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0}
.cmp-bgx-c:focus-within,.cmp-bgx-t:focus-visible{outline:2px solid #14171A;outline-offset:3px}
.cmp-bgx-s{flex:1;min-width:0;font-size:16px}
.cmp-bgx-th{width:44px;height:32px;border-radius:6px;overflow:hidden;background:#ECEDE8;flex:none}
.cmp-bgx-th img{width:100%;height:100%;object-fit:cover;display:block}
/* carousel: timer and add a slide */
.cmp-car{display:grid;gap:10px}
.cmp-car-a{display:flex;align-items:center;gap:10px;font-weight:500;font-size:14px;line-height:1.3;color:#14171A;cursor:pointer}
.cmp-car-a input{width:18px;height:18px;accent-color:#14171A;flex:none}
.cmp-lay-ph{width:100%;height:100%;min-height:520px;background:linear-gradient(135deg,#1c2126,#3a4350 55%,#8a94a3)}
/* Columns with outlined or no cards on a dark background: the words turn light with the section */
.pb-sec[data-bg=ink] .cols-grid:is([data-ccard=line],[data-ccard=none]) .cols-card-title{color:#fff!important}
.pb-sec[data-bg=ink] .cols-grid:is([data-ccard=line],[data-ccard=none]) .cols-card-text{color:rgba(255,255,255,.78)!important}
.pb-sec[data-bg=ink] .cols-grid:is([data-ccard=line],[data-ccard=none]) .cmp-col-n{background:#fff;color:#14171A}
.cmp-bgx-t,.cmp-bgx-l{font-size:13px}
.cmp-bgx .bc-btn{font-size:13px;padding:8px 12px}
.cmp-bgx-l{flex:0 0 100%;margin:0}
/* the gradient swatch, beside "your own colour" */
.cmp-sw-grad{position:relative;flex:none;width:32px;height:32px;border-radius:50%;border:0;padding:0;cursor:pointer;display:grid;place-items:center;background:none}
.cmp-sw-grad span{width:26px;height:26px;border-radius:50%;background:var(--g,linear-gradient(135deg,#14171A,#C9CCC4));box-shadow:0 0 0 1px rgba(20,23,26,.14)}
.cmp-sw-grad.on{box-shadow:0 0 0 2px #fff,0 0 0 4px #14171A}
.cmp-sw-grad:focus-visible{outline:2px solid #14171A;outline-offset:3px}
.cmp-sw-own.cmp-sw-sub{box-shadow:none}

/* drop 150: large screens ---------------------------------------------------
   Past 1500px wide, sections that pinned their words to the far left edge (56px in) now keep them in the
   page's own column (1440px, centred), as offers, columns and games already do. Colours and pictures that
   run edge to edge still do; split banners sit inside the column with a rounded picture. */
@container (min-width:1500px){
  /* banners with a picture behind: the words and the controls come into the column */
  .bnr-wrap .bnr-slide,.bnr-wrap .bnr-sy-slide,.bnr-wrap>.bnr.bnr-fs,.bnr-wrap>.bnr.bnr-cd,.bnr-wrap>.bnr.bnr-ck,.bnr-wrap>.bnr.bnr-st,.bnr-wrap>.bnr.bnr-an,.bnr-wrap .bnr-pk-ctl,.bnr-wrap .bnr-pk-terms{padding-left:calc((100cqw - 1440px)/2 + 16px);padding-right:calc((100cqw - 1440px)/2 + 16px)}
  .bnr-wrap .bnr-pk-track{padding-left:calc((100cqw - 1440px)/2 + 16px)}
  .bnr-wrap .bnr-cs-ctl{left:calc((100cqw - 1440px)/2 + 16px);right:calc((100cqw - 1440px)/2 + 16px)}
  .bnr-wrap .bnr-sto-bars{left:calc((100cqw - 1440px)/2 + 16px);right:calc((100cqw - 1440px)/2 + 16px)}
  .bnr-wrap .bnr-th-strip{padding-left:calc((100cqw - 1440px)/2);padding-right:calc((100cqw - 1440px)/2)}
  /* split banners: both halves inside the column, the picture with corners */
  .bnr-wrap>.bnr.bnr-jp,.bnr-wrap>.bnr.bnr-sp,.bnr-wrap>.bnr.bnr-su,.bnr-wrap>.bnr.bnr-ss{padding-left:calc((100cqw - 1440px)/2);padding-right:calc((100cqw - 1440px)/2)}
  .bnr-wrap .bnr-su-img{margin:14px 0;border-radius:max(12px,calc(var(--bnr-r) - 4px))}
  .bnr-wrap .bnr-su-flip .bnr-su-img{margin:14px 0}
  .bnr-wrap .bnr-jp-img,.bnr-wrap .bnr-sp-img{margin-right:0}
  .bnr-wrap .bnr-sp-flip .bnr-sp-img{margin-right:14px;margin-left:0}
  .bnr-wrap .bnr-ss-img{border-radius:max(12px,calc(var(--bnr-r) - 4px));overflow:hidden;margin:14px 0}
  .bnr-wrap .bnr-ss-ctl{left:calc((100cqw - 1440px)/2 + 16px)}
  .bnr-wrap[data-bg=page] :is(.bnr-jp-copy,.bnr-sp:not(.bnr-sp-flip) .bnr-sp-copy,.bnr-ss-txt .bnr-ss-panel){padding-left:16px}
  /* scrolling and parallax sections */
  .clx-wrap .clx-in,.clx-wrap .clx-ph-row,.clx-wrap .clx-win,.clx-wrap>.clx.clx-pg,.clx-wrap>.clx.clx-sp-split{padding-left:calc((100cqw - 1440px)/2 + 16px);padding-right:calc((100cqw - 1440px)/2 + 16px)}
  .clx-wrap .clx-ph-prog{margin-inline:calc((100cqw - 1440px)/2 + 16px)}
  .clx-wrap .clx-sp-dk{padding-left:calc((100cqw - 1440px)/2);padding-right:calc((100cqw - 1440px)/2)}
  .clx-wrap .clx-px-front{left:calc((100cqw - 1440px)/2 + 16px)}
  .clx-wrap .clx-px-mid{right:calc((100cqw - 1440px)/2 + 96px)}
  .clx-wrap>.clx.clx-pg{grid-template-columns:220px minmax(0,72ch);justify-content:center}
  /* prize sections and VIP: the same column as the rest */
  .rt>.rt-in{max-width:1440px;padding-left:16px;padding-right:16px}
  .vip .pg-in{max-width:1440px;padding-left:16px;padding-right:16px}
}
/* prize sections and VIP were a narrower block (1080-1120px) than the sections around them at every desktop width */
@container (min-width:900px) and (max-width:1499.98px){
  .rt>.rt-in{max-width:1440px;padding-left:32px;padding-right:32px}
  .vip .pg-in{max-width:1440px;padding-left:16px;padding-right:16px}
}
.pb-sec .vip{container-type:inline-size}
/* clip rows and tiles: the same column (no size query needed, the padding is worked out from the width) */
.cl .lb-h,.cl .lb-rw,.cl .st-rw,.cl .spx,.cl .tg-wrap{padding-left:max(18px,calc((100% - 1440px)/2 + 16px));padding-right:max(18px,calc((100% - 1440px)/2 + 16px))}
/* drop 151: Questions, headline above the list */
.cmp-faq-h{margin-bottom:24px;padding:12px 16px 0}
.pb-sec[data-bg=ink] .cmp-faq-h .cmp-col-head{color:#fff}
.pb-sec[data-bg=ink] .cmp-faq-h .cmp-col-eye{color:rgba(255,255,255,.7)}
/* stacking panels: the picture always fills the panel (on a screen wider than the picture it was repeating) */
.stack-panel[data-cmp-pan]{background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important}
/* drop 153: slides six to ten in the panel */
.cmp-xs{border-top:1px solid rgba(20,23,26,.1);padding:2px 0}
.cmp-xs>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:12px 0;font-weight:600;font-size:14px;line-height:1.2;color:#14171A}
.cmp-xs>summary::-webkit-details-marker{display:none}
.cmp-xs>summary::after{content:"";width:7px;height:7px;border-right:2px solid #14171A;border-bottom:2px solid #14171A;transform:rotate(45deg);margin-right:4px;transition:transform .15s}
.cmp-xs[open]>summary::after{transform:rotate(-135deg)}
.cmp-xs>summary:focus-visible{outline:2px solid #14171A;outline-offset:2px}
.cmp-xs-in{display:grid;gap:10px;padding:2px 0 14px}
.cmp-xs-in .fx-control-input{font-size:16px}
.cmp-xs-x{justify-self:start;border:0;background:none;padding:4px 0;font-weight:500;font-size:13px;line-height:1.2;color:#DB3642;cursor:pointer}
/* drop 154: Sticky panels, the pill, the number and the button */
.pb-sec[data-cmp-sppill] :is(.clx-sp-panel,.clx-sp-dk,.clx-sp-split) .clx-k{display:inline-block;align-self:flex-start;width:max-content;max-width:100%;padding:7px 12px;border-radius:8px;background:#fff;color:#14171A!important;font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;line-height:1.2}
.cmp-sp-num{position:absolute;top:clamp(8px,2cqi,24px);right:clamp(18px,5cqi,56px);z-index:2;font-weight:800;font-size:clamp(64px,13cqi,180px);line-height:.8;letter-spacing:-.04em;color:rgba(255,255,255,.16);pointer-events:none}
.cmp-sp-btn{align-self:flex-start;margin-top:18px;width:max-content;max-width:100%}
.cmp-sp{display:grid;gap:10px}
.cmp-sp-row{display:grid;grid-template-columns:1fr;gap:6px;padding-top:4px}
.cmp-sp-row span{font-size:13px;color:#5c6159}
.cmp-sp-row input{font-size:16px}
@container (min-width:1500px){ .clx-wrap .cmp-sp-num{right:calc((100cqw - 1440px)/2 + 16px)} }
.pb-sec[data-cmp-sppill] .clx-sp-split .clx-k{background:#14171A;color:#fff!important}
/* drop 158: offer cards in a row (from tablet width up; phones keep BILD's own "cards per row on mobile") */
@media (min-width:761px){
  .pb-device-frame:not(.device-mobile) .pb-sec[data-cmp-pr="2"] .pb-promo-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .pb-device-frame:not(.device-mobile) .pb-sec[data-cmp-pr="3"] .pb-promo-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .pb-device-frame:not(.device-mobile) .pb-sec[data-cmp-pr="4"] .pb-promo-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}
.cmp-pc{display:grid;gap:10px;text-align:left;justify-items:stretch}
.cmp-pc .bc-btn{justify-self:stretch}
/* drop 158: Pinned picture panels: where the words sit, how they line up, how tall the panels are */
.pb-sec[data-cmp-sppill] .clx-ph-panel .clx-k{display:inline-block;align-self:flex-start;width:max-content;max-width:100%;padding:7px 12px;border-radius:8px;background:#fff;color:#14171A!important;font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;line-height:1.2}
.clx-ph-panel .clx-in{width:100%}
.pb-sec[data-cmp-ppv=middle] .clx-ph-panel{align-items:center;padding-bottom:0}
.pb-sec[data-cmp-ppv=top] .clx-ph-panel{align-items:flex-start;padding-bottom:0;padding-top:clamp(28px,6cqi,64px)}
.pb-sec[data-cmp-ppv=middle] .clx-ph-panel::after{background:rgba(10,12,14,.46)}
.pb-sec[data-cmp-ppv=top] .clx-ph-panel::after{background:linear-gradient(0deg,transparent 30%,rgba(10,12,14,.78))}
.pb-sec[data-cmp-ppa=centre] .clx-ph-panel .clx-in{align-items:center;text-align:center}
.pb-sec[data-cmp-ppa=right] .clx-ph-panel .clx-in{align-items:flex-end;text-align:right}
.pb-sec[data-cmp-ppa=centre] .clx-ph-panel :is(.clx-k,.cmp-sp-btn){align-self:center}
.pb-sec[data-cmp-ppa=right] .clx-ph-panel :is(.clx-k,.cmp-sp-btn){align-self:flex-end}
.pb-sec[data-cmp-pph=tall]{--cmp-pph:80vh} .pb-sec[data-cmp-pph=medium]{--cmp-pph:62vh} .pb-sec[data-cmp-pph=short]{--cmp-pph:46vh}
.pb-sec[data-cmp-pph] .clx-ph-pan:not(.clx-still) .clx-ph-pin{height:var(--cmp-pph)!important;top:calc((100vh - var(--cmp-pph)) / 2)!important}
.pb-sec[data-cmp-pph] .clx-still.clx-ph-pan .clx-ph-panel{min-height:calc(var(--cmp-pph) * .8)}
.pb-sec:is([data-cmp-ppa=centre],[data-cmp-ppa=right]) .clx-ph-panel .clx-in{max-width:none;width:100%}
/* drop 158: Version history folds; logo strip style box */
#bcInsp h4.cmp-vfold{cursor:pointer;display:flex;align-items:center;justify-content:space-between;user-select:none}
#bcInsp h4.cmp-vfold::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-right:4px;transition:transform .15s}
#bcInsp h4.cmp-vfold[aria-expanded="true"]::after{transform:rotate(-135deg)}
#bcInsp h4.cmp-vfold:focus-visible{outline:2px solid #14171A;outline-offset:3px}
#bcInsp h4.cmp-vfold[aria-expanded="false"] + .bs-hint,#bcInsp h4.cmp-vfold[aria-expanded="false"] + .bs-hint + .bs-vers,#bcInsp h4.cmp-vfold[aria-expanded="false"] + .bs-vers{display:none}
.cmp-lgs{display:grid;gap:10px;margin-bottom:10px}
/* drop 161: Promo section panel */
#bcInsp .fx-control-row.cmp-pg-off{display:none!important}
#bcInsp .cmp-pgh{display:flex;align-items:center;justify-content:space-between;width:100%;padding:14px 0;margin:0;border:0;border-top:1px solid rgba(20,23,26,.1);background:none;font-weight:600;font-size:14px;line-height:1.2;color:#14171A;cursor:pointer;text-align:left}
#bcInsp .cmp-pgh::after{content:"";width:7px;height:7px;border-right:2px solid #14171A;border-bottom:2px solid #14171A;transform:rotate(45deg);margin-right:4px;transition:transform .15s}
#bcInsp .cmp-pgh[aria-expanded="true"]::after{transform:rotate(-135deg)}
#bcInsp .cmp-pgh:focus-visible{outline:2px solid #14171A;outline-offset:2px}
/* drop 161: group headings in "All sections"; one preview size */
.sm-wrap .cmp-mir-h{grid-column:1/-1;margin:18px 0 -4px;font-weight:700;font-size:20px;line-height:1.2;letter-spacing:-.01em;color:#14171A}
.sm-wrap .cmp-mir-h:first-of-type{margin-top:0}
.cmp-peek-stage{background:#F1F2EF}
.cmp-peek-in :is(.clx-ph-pin,.clx-ph-panels,.clx-ph-panel,.clx-sp-panel,.stack-panel,.bnr.bnr-fs,.clx.clx-px,.tour-sticky,.carousel-sticky){height:var(--cmp-pkh)!important;max-height:var(--cmp-pkh)!important;min-height:0!important}
.cmp-peek-in :is(.clx-ph-track,.tour-outer,.carousel-scroll-outer){height:auto!important;min-height:0!important}
.cmp-pc{align-self:stretch;width:100%;box-sizing:border-box}
.cmp-pc .bc-fld-l{text-align:left}
#bcInsp .cmp-pc,#bcInsp .cmp-sp,#bcInsp .cmp-car{align-items:stretch}
/* drop 164: the "Remove this section?" box sits inside the section, so on a dark section it took the section's white text on its own white card */
.pb-remove-confirm-popup{color:#14171A!important}
.pb-remove-confirm-popup .pb-remove-confirm-text{color:#14171A!important}
.pb-remove-confirm-popup .pb-remove-confirm-cancel{color:#14171A!important;background:#fff!important}
.pb-remove-confirm-popup .pb-remove-confirm-danger{color:#fff!important}
/* drop 164: Pinned row on wide screens. Its cards are 320px at most, so on a big screen all of them fit
   at once and the scroll that should slide them had nothing to slide. Cards now grow with the screen so
   there is always a row to travel, and the pinned area uses the whole height of a tall screen. */
@container (min-width:900px){
  .clx-wrap .clx-ph:not(.clx-ph-pan):not(.clx-still) .clx-ph-card{flex-basis:max(320px,36cqi)}
}
@container (min-width:1500px){
  .clx-wrap .clx-ph:not(.clx-ph-pan):not(.clx-still) .clx-ph-card{flex-basis:calc((100cqw - ((100cqw - 1440px)/2 + 16px)) / 2.6);height:340px;padding:28px}
  .clx-wrap .clx-ph:not(.clx-ph-pan):not(.clx-still) .clx-ph-card b{font-size:38px}
  .clx-wrap .clx-ph:not(.clx-ph-pan):not(.clx-still) .clx-ph-card small{font-size:15px}
  .clx-wrap .clx-ph:not(.clx-ph-pan):not(.clx-still) .clx-ph-pin{max-height:none}
}

/* ---- drop 166: Spin for a game, reel size; clip videos window ---- */
.pb-sec[data-cmp-gz] .gs-lucky{container-type:inline-size}
.pb-sec[data-cmp-gz] .gs-reels{max-width:100%;box-sizing:border-box}
.pb-sec[data-cmp-gz="m"] .gs-reels{--gm-w:min(180px,calc((100cqw - 48px)/3))}
.pb-sec[data-cmp-gz="l"] .gs-reels{--gm-w:min(240px,calc((100cqw - 48px)/3))}
.pb-sec[data-cmp-gz="xl"] .gs-reels{--gm-w:min(320px,calc((100cqw - 48px)/3))}
.pb-sec[data-cmp-gz="l"] .gs-h,.pb-sec[data-cmp-gz="xl"] .gs-h{font-size:clamp(26px,3.4vw,40px)}
.cmp-c-row{display:grid;grid-template-columns:48px minmax(0,1fr) minmax(0,1.6fr);gap:4px 12px;align-items:center;padding:6px 0}
.cmp-c-pic{width:48px;height:48px;border-radius:8px;overflow:hidden;background:#eee}.cmp-c-pic img{width:100%;height:100%;object-fit:cover;display:block}
.cmp-c-n b{display:block;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cmp-c-n small{font-size:12px;color:#777}
.cmp-c-row input{font-size:16px;height:40px;padding:0 10px;border:1px solid #d6d6d6;border-radius:8px;background:#fff;color:#111;min-width:0;width:100%;box-sizing:border-box}
.cmp-c-row input.bad{border-color:#DB3642}
.cmp-c-msg{grid-column:3;font-size:12px;color:#DB3642}.cmp-c-msg:empty{display:none}
@media (max-width:760px){.cmp-c-row{grid-template-columns:48px minmax(0,1fr)}.cmp-c-row input,.cmp-c-msg{grid-column:1/-1}}

/* ---- drop 169: the Brand window. BILD's Styles panel opened wide: rail, controls, sample page ---- */
.cmp-tabs-on .pb-shell > .pb-site-styles-panel.open{position:fixed;left:28px;right:28px;top:24px;bottom:24px;width:auto;max-width:1480px;margin:0 auto;z-index:900;display:grid;grid-template-columns:200px 400px minmax(0,1fr);grid-template-rows:auto auto auto minmax(0,1fr) auto;background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 0 0 100vmax rgba(17,17,17,.42),0 30px 80px -20px rgba(0,0,0,.45)!important;animation:cmpBw .24s cubic-bezier(.2,.8,.2,1);font-family:'Funnel Sans',system-ui,sans-serif}
@keyframes cmpBw{from{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.cmp-tabs-on .pb-shell > .pb-site-styles-panel.open{animation:none}}
.pb-site-styles-panel:not(.open) :is(.cmp-bw-top,.cmp-bw-spec,.cmp-sg-seed){display:none}
.cmp-bw-top{grid-column:1/-1;grid-row:1;display:flex;align-items:center;gap:16px;padding:14px 18px 14px 24px;border-bottom:1px solid #E6E6E3}
.cmp-bw-top h2{margin:0;font:700 18px/1 'Funnel Sans',system-ui,sans-serif;letter-spacing:-.01em;color:#14171A}
.cmp-bw-now{display:flex;gap:6px;flex:1;min-width:0;overflow:hidden}
.cmp-bw-now span{font-size:12.5px;padding:5px 10px;border-radius:99px;background:#F1F2EF;color:#555;white-space:nowrap}
.cmp-bw-now b{color:#14171A;font-weight:600}
.cmp-bw-x{flex:none;width:36px;height:36px;border-radius:99px;border:0;background:#F1F2EF;font-size:20px;line-height:1;cursor:pointer;color:#14171A}
.cmp-bw-x:hover{background:#E4E5E0}.cmp-bw-x:focus-visible,.cmp-bw-done:focus-visible,.cmp-bw-seg button:focus-visible{outline:2px solid #14171A;outline-offset:2px}
/* the rail */
.cmp-tabs-on .pb-site-styles-panel.open .cmp-sg-home{display:flex!important;grid-column:1;grid-row:2/5;flex-direction:column;gap:2px;padding:14px 10px;border-right:1px solid #E6E6E3;overflow-y:auto;animation:none!important;background:#fff!important}
.cmp-tabs-on .pb-site-styles-panel.open .cmp-sg-back,.cmp-tabs-on .pb-site-styles-panel.open .cmp-sg-pv,.cmp-tabs-on .pb-site-styles-panel.open .cmp-sg-go{display:none!important}
.pb-site-styles-panel.open .cmp-sg-card{border-radius:10px}
.pb-site-styles-panel.open .cmp-sg-main{background:none;padding:10px 12px;gap:3px;border-radius:10px}
.pb-site-styles-panel.open .cmp-sg-card:hover .cmp-sg-main{background:#F4F4F2}
.pb-site-styles-panel.open .cmp-sg-n{font:600 14.5px/1.2 'Funnel Sans',system-ui,sans-serif;color:#14171A}
.cmp-sg-s{display:none}
.pb-site-styles-panel.open .cmp-sg-s{display:block;font:12px/1.25 'Funnel Sans',system-ui,sans-serif;color:#777;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-site-styles-panel.open .cmp-sg-card[aria-current] .cmp-sg-main{background:#14171A}
.pb-site-styles-panel.open .cmp-sg-card[aria-current] .cmp-sg-n{color:#fff}
.pb-site-styles-panel.open .cmp-sg-card[aria-current] .cmp-sg-s{color:#BBB}
/* the controls */
.cmp-tabs-on .pb-site-styles-panel.open .cmp-sg-extra{grid-column:2;grid-row:2;margin:16px 24px 0}
.cmp-tabs-on .pb-site-styles-panel.open .cmp-sg-seed{grid-column:2;grid-row:3}
.cmp-tabs-on .pb-site-styles-panel.open .pb-site-styles-body{display:block!important;grid-column:2;grid-row:4;overflow-y:auto;border-right:1px solid #E6E6E3;padding-bottom:28px;animation:none!important}
.cmp-tabs-on .pb-site-styles-panel.open::after{content:"";grid-column:2;grid-row:2/4;border-right:1px solid #E6E6E3;pointer-events:none}
.cmp-sg-seed{display:none;flex-direction:column;gap:8px;margin:16px 24px 0;padding:14px;border-radius:12px;background:#F1F2EF;font:14px/1.3 'Funnel Sans',system-ui,sans-serif;color:#14171A}
.pb-site-styles-panel.open[data-cmp-sg="colours"] .cmp-sg-seed{display:flex}
.cmp-sg-seed>b{font-weight:600}.cmp-sg-seed>div{display:flex;gap:8px;align-items:center}
.cmp-sg-seed label{flex:1;display:flex;align-items:center;gap:10px;height:44px;padding:0 12px 0 4px;background:#fff;border:1px solid #D6D6D3;border-radius:10px;cursor:pointer;min-width:0}
.cmp-sg-seed input{width:36px;height:36px;border:0;padding:0;background:none;cursor:pointer;flex:none}
.cmp-sg-seed input::-webkit-color-swatch-wrapper{padding:0}.cmp-sg-seed input::-webkit-color-swatch{border:1px solid rgba(0,0,0,.14);border-radius:8px}
.cmp-sg-seed .bc-btn{flex:none;height:44px;white-space:nowrap}.cmp-sg-seed small{color:#6B7066;font-size:12.5px}
/* the foot */
.cmp-tabs-on .pb-site-styles-panel.open .pb-site-styles-foot{display:flex!important;grid-column:1/-1;grid-row:5;align-items:center;gap:12px;padding:12px 18px 12px 24px;border-top:1px solid #E6E6E3;min-width:0}
.pb-site-styles-panel.open .pb-site-styles-foot>button:not(.cmp-bw-done):not(.cmp-bw-cancel){width:auto!important;border:0!important;background:none!important;box-shadow:none!important;padding:8px 0!important;color:#666!important;font:14px/1 'Funnel Sans',system-ui,sans-serif!important;text-decoration:underline;text-underline-offset:3px;height:auto!important;min-height:0!important}
.cmp-bw-note,.cmp-bw-done{display:none}
.pb-site-styles-panel.open .cmp-bw-note{display:block;margin-left:auto;font-size:13.5px;color:#777}
.pb-site-styles-panel.open .cmp-bw-done{display:block;height:44px;padding:0 26px;border-radius:99px;border:0;background:#14171A;color:#fff;font:600 15px/1 'Funnel Sans',system-ui,sans-serif;cursor:pointer}
/* the sample page */
.cmp-bw-spec{grid-column:3;grid-row:2/5;background:#F1F2EF;display:grid;grid-template-rows:auto minmax(0,1fr);min-width:0}
.cmp-bw-bar{display:flex;align-items:center;gap:12px;padding:12px 20px}
.cmp-bw-bar>span{flex:1;font-size:13px;color:#666}
.cmp-bw-seg{display:flex;gap:4px;background:#E4E5E0;padding:3px;border-radius:10px}
.cmp-bw-seg button{border:0;background:none;padding:6px 12px;border-radius:8px;font:13px/1.2 'Funnel Sans',system-ui,sans-serif;color:#555;cursor:pointer}
.cmp-bw-seg button[aria-pressed="true"]{background:#fff;color:#14171A;font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.cmp-bw-stage{overflow:auto;padding:0 20px 24px;container-type:inline-size}
.cmp-bw-pg{margin:0 auto;max-width:100%;background:var(--bg,#fff);color:var(--ink,#14171A);font-family:var(--font,inherit);border-radius:12px;overflow:hidden;box-shadow:0 10px 30px -18px rgba(0,0,0,.35);transition:width .25s}
.cmp-bw-pg.phone{width:390px}
.bw-s{padding:56px 40px}.cmp-bw-pg.phone .bw-s{padding:40px 20px}
.bw-eye{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;opacity:.7;margin-bottom:12px}
.bw-h1,.bw-h2,.bw-card b{font-family:var(--font-head,var(--font,inherit));font-weight:var(--head-weight,700);letter-spacing:-.02em;line-height:1.08}
.cmp-bw-pg[data-head-serif="1"] :is(.bw-h1,.bw-h2,.bw-card b){letter-spacing:-.01em}
.bw-h1{font-size:clamp(32px,5cqw,56px)}.bw-h2{font-size:30px;max-width:18ch}.cmp-bw-pg.phone .bw-h2{font-size:24px}
.bw-s p{margin:12px 0 0;font-size:17px;line-height:1.55;max-width:52ch;color:var(--ink-body,inherit)}
.bw-s u{color:var(--felt,#0E6B4D);font-weight:600;text-decoration:none}
.bw-hero{background:var(--sec-dark,#14171A);color:#fff;text-align:center}
.bw-hero p{color:rgba(255,255,255,.85);margin:14px auto 24px;font-size:18px}
.bw-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:20px}.bw-hero .bw-row{justify-content:center;margin-top:0}
.bw-b{display:inline-flex;align-items:center;height:48px;padding:0 24px;border-radius:var(--r-btn,8px);font:600 16px/1 var(--font,inherit);border:2px solid transparent}
.bw-b1{background:var(--gold,#39D609);color:var(--on-gold,#14171A)}.bw-b2{border-color:currentColor}
.cmp-bw-pg[data-button-style="3d"] .bw-b1{box-shadow:0 5px 0 var(--gold-deep,#2CA607)}
.bw-soft{background:var(--block,#F1F2EF)}
.bw-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}.cmp-bw-pg.phone .bw-cards{grid-template-columns:1fr}
.bw-card{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:18px;background:var(--th-card,var(--bg,#fff));border:1px solid var(--border,transparent);border-radius:var(--r-lg,16px)}
.bw-card i{align-self:stretch;aspect-ratio:16/10;border-radius:var(--r-sm,8px);background:linear-gradient(135deg,var(--felt,#0E6B4D),var(--gold,#39D609))}
.bw-card em{font:700 11.5px/1 var(--font,inherit);letter-spacing:.06em;text-transform:uppercase;background:var(--felt,#0E6B4D);color:var(--on-felt,#fff);padding:5px 9px;border-radius:99px}
.bw-card b{font-size:19px}.bw-card span{font-size:14.5px;color:var(--ink-body,inherit)}
.bw-brand{background:var(--sec-accent,var(--felt));color:var(--acc-ink,#fff);display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.bw-brand .bw-h2{flex:1;min-width:200px;font-size:26px;max-width:none}
.bw-fine{padding-top:18px;padding-bottom:18px;font-size:12.5px;color:var(--ink-soft,#6B7066)}
@media (max-width:1180px){.cmp-tabs-on .pb-shell > .pb-site-styles-panel.open{grid-template-columns:170px minmax(0,1fr) 0;left:8px;right:8px;top:8px;bottom:8px}.cmp-bw-spec{display:none}.cmp-bw-now{visibility:hidden}}

/* ---- drop 170: type fine-tune, at the end of the Fonts group ---- */
.cmp-sg-type{display:none;margin:8px 20px 0;padding-top:18px;border-top:1px solid #E6E6E3;font:14.5px/1.3 'Funnel Sans',system-ui,sans-serif;color:#14171A}
.pb-site-styles-panel.open[data-cmp-sg="fonts"] .cmp-sg-type{display:block}
.cmp-ty-h{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:4px}.cmp-ty-h b{font-weight:600;font-size:15px}
.cmp-ty-reset{border:0;background:none;padding:6px 0;font:13.5px/1 'Funnel Sans',system-ui,sans-serif;color:#666;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.cmp-ty{border-bottom:1px solid #ECECEA}
.cmp-ty summary{display:flex;align-items:center;gap:10px;min-height:52px;cursor:pointer;list-style:none}.cmp-ty summary::-webkit-details-marker{display:none}
.cmp-ty summary b{flex:1;font-weight:600}.cmp-ty summary small{font-size:13px;color:#777}
.cmp-ty summary::after{content:"";width:8px;height:8px;border-right:1.5px solid #555;border-bottom:1.5px solid #555;transform:rotate(-45deg);transition:transform .15s;margin-right:4px}
.cmp-ty[open] summary::after{transform:rotate(45deg)}
.cmp-ty summary:focus-visible,.cmp-ty-seg button:focus-visible,.cmp-ty-reset:focus-visible{outline:2px solid #14171A;outline-offset:2px;border-radius:6px}
.cmp-ty-b{padding:0 0 12px 14px;margin:0 0 14px 2px;border-left:2px solid #14171A}
.cmp-ty-ln{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;border-bottom:1px solid #ECECEA}
.cmp-ty-ln select{width:auto!important;min-width:170px;height:40px;font-size:16px!important}
.cmp-ty-seg{display:flex;gap:3px;background:#F1F2EF;padding:3px;border-radius:10px}
.cmp-ty-seg button{border:0;background:none;padding:8px 10px;border-radius:8px;font:13px/1.2 'Funnel Sans',system-ui,sans-serif;color:#555;cursor:pointer;white-space:nowrap}
.cmp-ty-seg button[aria-pressed="true"]{background:#fff;color:#14171A;font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.cmp-ty-rg{display:grid;grid-template-columns:1fr auto;align-items:center;padding:12px 0 6px;border-bottom:1px solid #ECECEA}
.cmp-ty-rg output{font-size:13.5px;color:#555;font-variant-numeric:tabular-nums}
.cmp-ty-rg input{grid-column:1/-1;width:100%;accent-color:#14171A;height:28px;margin:2px 0 0}
.cmp-ty-b>:last-child{border-bottom:0}
.cmp-ty-n{margin:12px 0 0;font-size:12.5px;color:#777}
@media (prefers-reduced-motion:reduce){.cmp-ty summary::after{transition:none}}

/* ---- drop 171: Colours in the Brand window, one row per colour ---- */
.cmp-tabs-on .pb-site-styles-panel.open .cmp-sg-seed{grid-column:auto;grid-row:auto;margin:20px 20px 0}
.pb-site-styles-panel.open[data-cmp-sg="colours"] .th-sec:has(.th-sws)>.th-h{display:block}
.pb-site-styles-panel.open[data-cmp-sg="colours"] .th-sec:has(.th-sws)>.th-h h3{font:700 20px/1.2 'Funnel Sans',system-ui,sans-serif;letter-spacing:-.01em;margin:0 0 4px}
.pb-site-styles-panel.open[data-cmp-sg="colours"] .th-sec:has(.th-sws)>.th-h::after{content:"Six colours run the whole site. Button text turns black or white on its own.";display:block;font:14px/1.45 'Funnel Sans',system-ui,sans-serif;color:#666;margin:0 0 16px}
.pb-site-styles-panel.open .th-sws{grid-template-columns:1fr!important;gap:6px!important}
.pb-site-styles-panel.open .th-sw{display:grid!important;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:12px!important;padding:6px 12px 6px 6px!important;border:1px solid #E3E3E0;border-radius:12px;background:#fff;cursor:pointer}
.pb-site-styles-panel.open .th-sw:hover{border-color:#C4C4C0}
.pb-site-styles-panel.open .th-sw:focus-within{border-color:#14171A;box-shadow:0 0 0 1px #14171A}
.pb-site-styles-panel.open .th-sw .th-chip{width:44px!important;height:44px!important;border-radius:10px!important;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.pb-site-styles-panel.open .th-sw .th-chip input{width:100%!important;height:100%!important}
.pb-site-styles-panel.open .th-sw>span:last-child{display:grid!important;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;align-items:center}
.pb-site-styles-panel.open .th-sw b{grid-column:1;grid-row:1;font:600 14.5px/1.25 'Funnel Sans',system-ui,sans-serif;color:#14171A}
.pb-site-styles-panel.open .th-sw small{grid-column:2;grid-row:1/3;font:13px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#555}
.pb-site-styles-panel.open .th-sw>span:last-child::after{grid-column:1;grid-row:2;font:12.5px/1.3 'Funnel Sans',system-ui,sans-serif;color:#777}
.pb-site-styles-panel.open .th-sw:has([data-col="gold"])>span:last-child::after{content:"Buttons and highlights"}
.pb-site-styles-panel.open .th-sw:has([data-col="felt"])>span:last-child::after{content:"Links, tags, brand sections"}
.pb-site-styles-panel.open .th-sw:has([data-col="ink"])>span:last-child::after{content:"Headings and body"}
.pb-site-styles-panel.open .th-sw:has([data-col="bg"])>span:last-child::after{content:"The main background"}
.pb-site-styles-panel.open .th-sw:has([data-col="block"])>span:last-child::after{content:"The quieter background"}
.pb-site-styles-panel.open .th-sw:has([data-col="darkSec"])>span:last-child::after{content:"Heroes and footers"}
.pb-site-styles-panel.open .th-ratio{margin-top:22px!important;display:grid;gap:6px;padding:0;list-style:none}
.pb-site-styles-panel.open .th-ratio::before{content:"Readability";font:600 12px/1 'Funnel Sans',system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#777;margin-bottom:6px}
.pb-site-styles-panel.open .th-ratio li{display:flex;align-items:center;gap:10px;font:14px/1.3 'Funnel Sans',system-ui,sans-serif;color:#14171A}
.pb-site-styles-panel.open .th-ratio li span{flex:1}
.pb-site-styles-panel.open .th-ratio li b{font-weight:600;font-variant-numeric:tabular-nums}
.pb-site-styles-panel.open .th-ratio li i{width:8px!important;height:8px!important;border-radius:50%;background:#14171A!important;flex:none;box-sizing:border-box}
.pb-site-styles-panel.open .th-ratio li:not(.ok) i{background:none!important;border:2px solid #14171A}
.pb-site-styles-panel.open .th-ratio li:not(.ok) b::after{content:" · too low";font-weight:400;color:#777}
.pb-site-styles-panel.open .th-sws{grid-auto-rows:auto!important;grid-template-rows:none!important;height:auto!important}
.pb-site-styles-panel.open .th-sw{height:auto!important;min-height:58px;box-sizing:border-box}
.pb-site-styles-panel.open .th-sws{display:flex!important;flex-direction:column}
.pb-site-styles-panel.open .th-sw{flex:none}
.pb-site-styles-panel.open .th-sw{margin:0!important}

/* ---- drop 174: your own fonts; Apply / Cancel ---- */
.cmp-sg-fonts{display:none;margin:8px 20px 0;padding-top:18px;border-top:1px solid #E6E6E3;font:14.5px/1.3 'Funnel Sans',system-ui,sans-serif;color:#14171A}
.pb-site-styles-panel.open[data-cmp-sg="fonts"] .cmp-sg-fonts{display:block}
.cmp-fo-list{display:grid;gap:8px;margin:8px 0}.cmp-fo-list:empty{display:none}
.cmp-fo{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:6px;align-items:center;border:1px solid #DCDCD9;border-radius:12px;padding:10px 8px 10px 14px;background:#fff}
.cmp-fo b{display:block;font-size:20px;line-height:1.15;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmp-fo small{display:block;font:12.5px/1.3 'Funnel Sans',system-ui,sans-serif;color:#777;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmp-fo button{border:1px solid #D6D6D3;background:#fff;border-radius:99px;height:36px;padding:0 12px;font:13px/1 'Funnel Sans',system-ui,sans-serif;color:#14171A;cursor:pointer}
.cmp-fo button[aria-pressed="true"]{background:#14171A;border-color:#14171A;color:#fff}
.cmp-fo .cmp-fo-rm{width:36px;padding:0;border-color:transparent;font-size:18px;color:#777}.cmp-fo .cmp-fo-rm:hover{color:#DB3642}
.cmp-fo button:focus-visible,.cmp-fo-up:focus-visible,.cmp-bw-cancel:focus-visible{outline:2px solid #14171A;outline-offset:2px}
.cmp-fo-up{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;margin-top:8px;padding:18px;border:1.5px dashed #C4C4C0;border-radius:12px;background:#FAFAF9;cursor:pointer;font:14.5px/1.3 'Funnel Sans',system-ui,sans-serif;color:#14171A}
.cmp-fo-up:hover,.cmp-fo-up.over{border-color:#14171A;background:#F1F2EF}.cmp-fo-up b{font-weight:600}.cmp-fo-up small{font-size:12.5px;color:#777}
.cmp-sg-fonts .cmp-ty-n.bad{color:#DB3642}
.cmp-bw-cancel{display:none}
.pb-site-styles-panel.open .cmp-bw-cancel{display:block;height:44px;padding:0 20px;border-radius:99px;border:1px solid #D0D0CD;background:#fff;color:#14171A;font:600 15px/1 'Funnel Sans',system-ui,sans-serif;cursor:pointer}
.pb-site-styles-panel.open .cmp-bw-cancel:disabled{opacity:.4;cursor:default}

/* ---- drop 175: A/B test of one section ---- */
.pb-sec[data-cmp-abhide]{display:none!important}
.cmp-ab-badge{position:absolute;left:0;bottom:0;z-index:6;background:#14171A;color:#fff;font:600 11.5px/1 'Funnel Sans',system-ui,sans-serif;padding:6px 10px;border-radius:0 8px 0 0;pointer-events:none}
body.preview-mode .cmp-ab-badge{display:none}
.cmp-ab-chip{position:fixed;left:16px;bottom:16px;z-index:880;display:none;align-items:center;gap:4px;background:#14171A;color:#fff;border-radius:99px;padding:4px 4px 4px 14px;font:600 13px/1 'Funnel Sans',system-ui,sans-serif;box-shadow:0 8px 24px -8px rgba(0,0,0,.5)}
body.preview-mode .cmp-ab-chip{display:flex}
.cmp-ab-chip span{margin-right:6px}
.cmp-ab-chip button{width:36px;height:32px;border:0;border-radius:99px;background:none;color:#fff;font:inherit;cursor:pointer}
.cmp-ab-chip button[aria-pressed="true"]{background:#fff;color:#14171A}
.cmp-ab-chip button:focus-visible,.cmp-ab button:focus-visible{outline:2px solid #14171A;outline-offset:2px}
#bcInsp .cmp-ab{align-items:stretch;border-bottom:1px solid #E6E6E3;padding-bottom:16px;margin-bottom:8px}
.cmp-ab-said{margin:0 0 10px;font:600 13.5px/1.4 'Funnel Sans',system-ui,sans-serif;color:#14171A}
.cmp-ab-seg{display:grid;grid-template-columns:1fr 1fr;gap:3px;background:#F1F2EF;padding:3px;border-radius:10px}
.cmp-ab-seg button{border:0;background:none;min-height:38px;border-radius:8px;font:14px/1.2 'Funnel Sans',system-ui,sans-serif;color:#555;cursor:pointer}
.cmp-ab-seg button[aria-pressed="true"]{background:#fff;color:#14171A;font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.cmp-ab-h{margin:18px 0 8px;font:600 11.5px/1 'Funnel Sans',system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#777}
.cmp-ab-diff{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.cmp-ab-diff li{border:1px solid #E3E3E0;border-radius:10px;padding:8px 10px;font:13.5px/1.4 'Funnel Sans',system-ui,sans-serif;color:#14171A;overflow-wrap:anywhere}
.cmp-ab-diff small{display:block;font-size:12px;color:#777;margin-bottom:2px}.cmp-ab-diff s{color:#999}
.cmp-ab-diff li.none{border-style:dashed;color:#777}
.cmp-ab-warn{margin-top:10px;border:1px solid #14171A;border-radius:10px;padding:10px 12px;font:13.5px/1.4 'Funnel Sans',system-ui,sans-serif}.cmp-ab-warn b{display:block}
.cmp-ab-split{display:flex;height:38px;border-radius:10px;overflow:hidden;font:600 13.5px/1 'Funnel Sans',system-ui,sans-serif}
.cmp-ab-split span{display:flex;align-items:center;justify-content:center;min-width:52px;flex:1;background:#DADBD6;color:#14171A}
.cmp-ab-split span:first-child{flex:none;background:#14171A;color:#fff}
.cmp-ab input[type=range]{width:100%;accent-color:#14171A;height:28px;margin:6px 0 0}
.cmp-ab-code{display:block;font:12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;background:#F1F2EF;border-radius:10px;padding:10px 12px;word-break:break-all;color:#333}
.cmp-ab-two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cmp-ab-rm{margin-top:8px;border:0;background:none;padding:8px 0;font:14px/1 'Funnel Sans',system-ui,sans-serif;color:#DB3642;cursor:pointer;text-align:center;width:100%}
@media (prefers-reduced-motion:no-preference){.cmp-ab-split span{transition:flex-basis .15s}}
html.cmp-ab-wait .pb-canvas{visibility:hidden}

/* ---- drop 176: "Open in new window" beside every link field ---- */
#bcInsp label.fx-control-row.cmp-lnk{position:relative}
.cmp-lnk-n{position:absolute;right:0;top:0;display:inline-flex;align-items:center;gap:6px;font:12.5px/1.2 'Funnel Sans',system-ui,sans-serif;color:#555;cursor:pointer;white-space:nowrap}
.cmp-lnk-n input{width:16px;height:16px;margin:0;accent-color:#14171A;cursor:pointer}
.cmp-lnk-n:has(input:disabled){opacity:.45;cursor:default}.cmp-lnk-n input:disabled{cursor:default}
.cmp-lnk-n:has(input:focus-visible){outline:2px solid #14171A;outline-offset:2px;border-radius:4px}

/* ---- drop 177: offer cards keep one size and their buttons line up ----
   Each card hands its rows to the grid (subgrid), so in a row of cards the type line, headline, text, button,
   terms and end date each sit on the same line whatever a card has or lacks. Text and terms keep room for
   their usual length, so a card with less in it is still the same size as the others. */
@supports (grid-template-rows:subgrid){
  .ofr-grid:not([data-layout=list])>.ofr-card{display:grid!important;grid-template-rows:subgrid;grid-row:span 7;row-gap:0}
  .ofr-grid:not([data-layout=list])>.ofr-card>.ofr-img{grid-row:1}
  .ofr-grid:not([data-layout=list])>.ofr-card>.ofr-bd{display:grid!important;grid-template-rows:subgrid;grid-row:2/span 6;row-gap:0;align-content:start}
  .ofr-grid:not([data-layout=list])>.ofr-card>.ofr-bd>*{grid-column:1;min-width:0}
  .ofr-grid:not([data-layout=list]) .ofr-bd>.ofr-type{grid-row:1;margin:0 0 10px}
  .ofr-grid:not([data-layout=list]) .ofr-bd>h3{grid-row:2;margin:0 0 8px}
  .ofr-grid:not([data-layout=list]) .ofr-bd>p:not(.ofr-terms){grid-row:3;margin:0 0 6px}
  .ofr-grid:not([data-layout=list]) .ofr-bd>.ofr-btn{grid-row:4;justify-self:start;align-self:start;margin:10px 0 14px!important}
  .ofr-grid:not([data-layout=list]) .ofr-bd>.ofr-terms{grid-row:5;margin:0!important;align-self:start}
  .ofr-grid:not([data-layout=list]) .ofr-bd>.ofr-ends{grid-row:6;margin:8px 0 0;align-self:end}
  @media (min-width:700px){
    .pb-device-frame:not(.device-mobile) .ofr-grid:not([data-layout=list]) .ofr-bd>p:not(.ofr-terms){min-height:calc(2*1.5em)}
    .pb-device-frame:not(.device-mobile) .ofr-grid:not([data-layout=list]) .ofr-bd>.ofr-terms{min-height:calc(3*1.45em)}
  }
}

/* ---- drop 179: prize tools, how the prize is decided ---- */
#bcInsp .cmp-pz{align-items:stretch;border-bottom:1px solid #E6E6E3;padding-bottom:16px;margin-bottom:8px}
#bcInsp .cmp-pz .cmp-pics-h{margin-top:10px}

/* ---- drop 179b: Width and spacing, title on top and the choices across the full width ---- */
#bcInsp .cmp-lob .cmp-lo-row{display:flex!important;flex-direction:column;align-items:stretch;gap:8px;margin-top:16px;position:relative}
#bcInsp .cmp-lob .cmp-lo-row>span:first-child{font-size:13px;color:#484f5a;font-weight:500}
#bcInsp .cmp-lob .cmp-lo-row>select{position:absolute;left:0;top:0;width:1px!important;height:1px!important;opacity:0;pointer-events:none}
#bcInsp .cmp-lob .cmp-chips:not(.row){display:grid!important;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:6px;width:100%}
#bcInsp .cmp-lob .cmp-chips:not(.row) button{min-height:40px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- drop 183: the published page, beside the page name ---- */
.cmp-live{display:inline-flex;align-items:center;gap:2px;margin-left:6px;height:32px;padding:0 4px 0 10px;border-radius:99px;background:#F1F2EF;font:500 13px/1 'Funnel Sans',system-ui,sans-serif;white-space:nowrap}
.cmp-live a{display:inline-flex;align-items:center;gap:6px;color:#14171A;text-decoration:none}
.cmp-live a::before{content:"";width:7px;height:7px;border-radius:50%;background:#39D609}
.cmp-live a:hover{text-decoration:underline;text-underline-offset:3px}
.cmp-live button{height:26px;padding:0 10px;margin-left:6px;border:0;border-radius:99px;background:#fff;color:#14171A;font:inherit;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.1)}
.cmp-live a:focus-visible,.cmp-live button:focus-visible,.bs-toast .cmp-copy:focus-visible{outline:2px solid #14171A;outline-offset:2px}
.bs-toast .cmp-copy{margin-left:6px}
@media (max-width:1100px){.cmp-live button{display:none}}

/* ---- drop 184: one status, in the pill ---- */
#bsPageBtn.cmp-has-live .bs-dot{display:none}
.cmp-live[data-st="draft"]{padding:0 12px;color:#6B7066}
.cmp-live[data-st="draft"] a,.cmp-live[data-st="draft"] button{display:none}
.cmp-live-d:empty{display:none}
.cmp-live-d{color:#6B7066;font-size:12.5px}
.cmp-live[data-st="changed"] .cmp-live-d{margin-left:8px}
.cmp-live[data-st="changed"] a::before{background:#fff;box-shadow:inset 0 0 0 1.5px #39D609}
@media (max-width:1300px){.cmp-live[data-st="changed"] .cmp-live-d{display:none}}

/* ---------- drop 185: footer hiding, the thin 18+ strip, published page veil ---------- */
.pb-sec[data-cmp-rg="thin"] > .pb-block-stage,.pb-sec[data-cmp-rg="thin"] > .pb-block-stage > div{padding-top:0!important;padding-bottom:0!important}
.pb-sec[data-cmp-rg="thin"] .rg-wrap{padding:14px 0!important}
.pb-sec[data-cmp-rg="thin"] .rg-wrap{background:transparent;border-radius:0}
.pb-sec[data-cmp-rg="thin"] .rg-tagline,.pb-sec[data-cmp-rg="thin"] .rg-note{display:none}
.pb-sec[data-cmp-rg="thin"] .rg-badges{gap:6px 20px;margin:0}
.pb-sec[data-cmp-rg="thin"] .rg-badge,#pbDeviceFrame[data-page-mode=dark] .pb-sec[data-cmp-rg="thin"] .rg-badge{background:transparent!important;padding:0;border-radius:0;font-size:12px;font-weight:500;color:var(--ink-soft,currentColor);line-height:1.4}
.pb-sec[data-cmp-rg="thin"] .rg-badge-18,#pbDeviceFrame[data-page-mode=dark] .pb-sec[data-cmp-rg="thin"] .rg-badge-18{width:22px;height:22px;font-size:9.5px;flex:0 0 auto}
@media (max-width:600px){.pb-sec[data-cmp-rg="thin"] .rg-badges{gap:4px 14px}.pb-sec[data-cmp-rg="thin"] .rg-badge{font-size:11.5px}}
/* hidden footer: gone for visitors, a slim marker in the builder so it can be selected and shown again */
html.cmp-foot-off.cmp-view .bs-ft,html.cmp-foot-off .preview-mode .bs-ft,html.cmp-foot-off.preview-mode .bs-ft{display:none!important}
html.cmp-foot-off:not(.cmp-view) .bs-ft{padding:0!important;min-height:0!important;background:#fff!important;border-top:1px dashed #c9c9c9;cursor:pointer}
html.cmp-foot-off:not(.cmp-view) .bs-ft > *{display:none!important}
html.cmp-foot-off:not(.cmp-view) .bs-ft::before{content:"Footer hidden. Select it to show it again.";display:block;padding:14px 16px;font:500 13px/1.3 inherit;color:#6b6b6b;text-align:center}
.bs-chk-host li.cmp-rg-li button{flex:0 0 auto}
.cmp-rg-all{margin:6px 0 0}
.pb-sidebar [data-cmp-fam].cmp-flash{outline:2px solid #111;outline-offset:3px;border-radius:10px;transition:outline-color .3s}
.pb-sidebar .rg-tagline,.pb-sidebar .rg-note{display:none}
.pb-sidebar .rg-wrap{background:transparent}
.pb-sidebar .rg-badge{background:transparent!important;padding:0}
/* banner carousels on a touch screen: swipe instead of arrows (bild-fan.js marks them) */
.bnr-wrap[data-cmp-touch] .bnr-arrows,.bnr-wrap[data-cmp-touch] .bnr-ss-ctl > .bnr-ic{display:none!important}
.bnr-wrap[data-cmp-touch="swipe"]{touch-action:pan-y}
/* VIP tier cards: each card keeps its own 3D flip; the row itself stays flat, so iPhone lets it scroll sideways */
.cd-row{perspective:none!important}
.cd-row > .tc{transform-style:flat!important;perspective:1000px}
/* Published pages on phones and small tablets: BILD lets the whole body scroll below 900px, but every scroll
   animation listens to .pb-main (the desktop scroller), so they all stood still. .pb-main scrolls here too. */
@media (max-width:900px){
  html:has(> body.bild-viewer){height:100%;overflow:hidden}
  body.bild-viewer{height:100%;overflow:hidden!important}
  body.bild-viewer .pb-shell{height:100vh!important;height:100dvh!important}
  body.bild-viewer .pb-main{height:100vh!important;height:100dvh!important;overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch}
}
/* Games, Orbit on a phone: a round ring (the box is as tall as it is wide, so the ring isn't squeezed into a tall oval), smaller tiles, smaller words */
@media (max-width:600px){.gm-lay-orbit .gm-orbbox{height:auto!important;aspect-ratio:1/1.05}.gm-lay-orbit .gm-orb-it .gm-t{width:64px!important;margin:-43px 0 0 -32px!important}.gm-lay-orbit .gm-orb-it .gm-new{transform:scale(.75);transform-origin:left top}.gm-lay-orbit .gm-orb-mid b{font-size:34px!important}.gm-lay-orbit .gm-orb-mid small{font-size:11px!important}}
.pb-device-frame.device-mobile .gm-lay-orbit .gm-orbbox{height:auto!important;aspect-ratio:1/1.05}.pb-device-frame.device-mobile .gm-lay-orbit .gm-orb-it .gm-t{width:64px!important;margin:-43px 0 0 -32px!important}.pb-device-frame.device-mobile .gm-lay-orbit .gm-orb-it .gm-new{transform:scale(.75);transform-origin:left top}.pb-device-frame.device-mobile .gm-lay-orbit .gm-orb-mid b{font-size:34px!important}.pb-device-frame.device-mobile .gm-lay-orbit .gm-orb-mid small{font-size:11px!important}
/* drop 186: Offers, cards side by side, as a sideways row on phones (the next card peeks in) */
@media (max-width:600px){
  .pb-sec[data-cmp-om="row"] .ofr-grid:not([data-layout=list]){grid-template-columns:none!important;grid-auto-flow:column;grid-auto-columns:82%;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(-1 * var(--sp-4,16px));padding:2px var(--sp-4,16px) 6px;scroll-padding-inline:var(--sp-4,16px)}
  .pb-sec[data-cmp-om="row"] .ofr-grid:not([data-layout=list])::-webkit-scrollbar{display:none}
  .pb-sec[data-cmp-om="row"] .ofr-grid:not([data-layout=list])>.ofr-card{scroll-snap-align:start}
}
.pb-device-frame.device-mobile .pb-sec[data-cmp-om="row"] .ofr-grid:not([data-layout=list]){grid-template-columns:none!important;grid-auto-flow:column;grid-auto-columns:82%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(-1 * var(--sp-4,16px));padding:2px var(--sp-4,16px) 6px;scroll-padding-inline:var(--sp-4,16px)}
.pb-device-frame.device-mobile .pb-sec[data-cmp-om="row"] .ofr-grid:not([data-layout=list])>.ofr-card{scroll-snap-align:start}
@supports (grid-template-rows:subgrid){
  @media (max-width:600px){.pb-sec[data-cmp-om="row"] .ofr-grid:not([data-layout=list]){grid-template-rows:repeat(7,auto)}}
  .pb-device-frame.device-mobile .pb-sec[data-cmp-om="row"] .ofr-grid:not([data-layout=list]){grid-template-rows:repeat(7,auto)}
}