/* Blue Sail website shop. The same palette and type as bluesailtechnologies.com.

   PART 1 always applies, on the Elementor page and on the plugin's own page: the header, the
   running total bar, everything the checkout draws into the slots (bss- classes), the ticks
   before .bsf-point and .bsf-inc, the highlighted words in .bsf-title, which step is showing,
   the button states, and the labels and dashed boxes Chris sees in the Elementor editor.

   PART 2 applies only to the plugin's own page (body.bss-standalone): the words and the layout
   (bsf- text and layout classes). On the Elementor page those come from Elementor's classes. */

/* ============================================================ PART 1: always */
:root{
  --bss-bg:#05070a;--bss-panel:#0b0f14;--bss-panel2:#0e141b;--bss-aqua:#19c8e0;--bss-aqua-l:#7fe9f5;--bss-deep:#0a7f92;--bss-ink:#03151a;
  --bss-text:#e8f4f6;--bss-body:#cfdde0;--bss-dim:#8fa6ac;--bss-line:rgba(25,200,224,.30);--bss-hair:rgba(25,200,224,.13);
  --bss-sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --bss-mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
  --bss-tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-5' fill='none' stroke='%237fe9f5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --bss-tick-ink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-5' fill='none' stroke='%2303151a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  color-scheme:dark;
}
.bss-top,.bss-top *,.bss-bar,.bss-bar *,.bss-w,.bss-w *,.bss-actions,.bss-actions *{box-sizing:border-box}
html .bss-w ::before,html .bss-w ::after{box-sizing:content-box}   /* as drawn; Elementor makes every ::before and ::after border-box */
.bss-w{font-family:var(--bss-sans);font-size:16px;line-height:1.6;color:var(--bss-body);text-align:left}
.bss-w img{max-width:100%;display:block}
:where(.bss-w,.bss-top,.bss-bar,.bss-actions) button{font:inherit;color:inherit}
.bss-w[hidden],.bss-w [hidden],.bss-bar [hidden]{display:none!important}
.bss-w :focus-visible,.bss-top :focus-visible,.bss-bar :focus-visible,.bsf-step .bsf-add:focus-visible,.bsf-step .bsf-skip:focus-visible,.bsf-step .bsf-next:focus-visible{outline:2px solid var(--bss-aqua-l);outline-offset:3px}
.bss-skip.bss-skip{position:absolute;left:-9999px;top:8px;background:var(--bss-aqua);color:var(--bss-ink);padding:8px 12px;z-index:200;font:600 14px/1.2 var(--bss-sans)}
.bss-skip.bss-skip:focus{left:16px}

/* the page itself. The sans is a safety net (one class deep, so a font Chris sets on .bsf-page in
   Elementor still wins); the theme's thinner antialiased text and smooth scrolling are put back to
   how the checkout has always drawn and moved (a step change jumps to the top, it does not glide). */
.bsf-page{font-family:var(--bss-sans)}
body.bss-page{-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}
html.bsf-js{scroll-behavior:auto}

/* which step is showing: only once the script has chosen one (bsf-js); otherwise all stacked */
html.bsf-js .bsf-step:not(.is-on){display:none!important}
html.bsf-js .bsf-step.is-on{animation:bss-in .45s cubic-bezier(.2,.7,.2,1) both}
@keyframes bss-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
html.bsf-js .bsf-step [class*="bsf-slot-"]{padding:0;min-width:0}
.bsf-title:focus{outline:none}
.bsf-title strong{color:var(--bss-aqua);font-weight:inherit;text-shadow:0 0 28px rgba(25,200,224,.45)}

/* the ticks the checkout draws before each benefit and each included item */
.bsf-point::before,.bsf-inc::before{content:"";display:inline-block;flex:none;width:18px;height:18px;margin-right:12px;vertical-align:-4px;border-radius:50%;background:rgba(25,200,224,.14) var(--bss-tick) center/16px no-repeat}
.bsf-inc::before{margin-right:10px}

/* the page's own buttons, while the checkout holds them */
html body .bsf-step .bsf-add:disabled,html body .bsf-step .bsf-add[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
html body .bsf-step.is-added .bsf-add{background:transparent;color:var(--bss-aqua-l);box-shadow:0 0 0 1px var(--bss-aqua)}
.bsf-step a.bsf-add,.bsf-step a.bsf-skip,.bsf-step a.bsf-next{cursor:pointer}

/* header */
.bss-top{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(5,7,10,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--bss-hair);font-family:var(--bss-sans)}
.admin-bar .bss-top{top:var(--wp-admin--admin-bar--height,32px)}
@media screen and (max-width:600px){body.admin-bar.bss-page #wpadminbar{position:fixed}}   /* (signed in, on a phone) WordPress lets its toolbar scroll away there, which would leave a gap above the header */
.bss-top-in{max-width:1180px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:22px}
.bss-top .bss-mark{font:800 15px/1 var(--bss-sans);letter-spacing:.14em;color:var(--bss-text);text-decoration:none;white-space:nowrap}
.bss-top .bss-mark span{color:var(--bss-aqua)}
.bss-progress{flex:1;height:3px;background:var(--bss-hair);border-radius:3px;overflow:hidden}
.bss-progress-bar{display:block;height:100%;width:10%;background:linear-gradient(90deg,var(--bss-deep),var(--bss-aqua));box-shadow:0 0 12px var(--bss-aqua);transition:width .5s cubic-bezier(.2,.7,.2,1)}
.bss-stepcount,.bss-secure{margin:0;font:600 11px/1 var(--bss-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--bss-dim);white-space:nowrap}
.bss-secure{display:flex;align-items:center;gap:7px}
.bss-secure svg{width:14px;height:14px;color:var(--bss-aqua)}
.bss-is-thanks .bss-top-in,.bsf-thanks .bss-top-in{justify-content:space-between}
.bsf-thanks .bss-progress,.bsf-thanks .bss-stepcount,.bsf-thanks .bss-bar{display:none!important}
.bss-noscript-wrap{max-width:1180px;margin:0 auto;padding:96px 24px 40px}
.bss-noscript{margin:0;padding:16px;border:1px solid var(--bss-line);color:var(--bss-body);font:16px/1.6 var(--bss-sans)}

/* buttons the checkout makes (pay, back, remove, and any the page is missing) */
.bss-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:30px}
:is(.bss-w,.bss-bar,.bsf-step) .bss-btn{appearance:none;border:0;cursor:pointer;background:var(--bss-aqua);color:var(--bss-ink);font:700 14px/1 var(--bss-mono);letter-spacing:.12em;text-transform:uppercase;padding:19px 30px;border-radius:2px;box-shadow:0 0 0 1px rgba(127,233,245,.4),0 10px 34px rgba(25,200,224,.35);transition:transform .2s,box-shadow .2s,background .2s}
:is(.bss-w,.bss-bar,.bsf-step) .bss-btn:hover{background:var(--bss-aqua-l);transform:translateY(-1px);box-shadow:0 0 0 1px rgba(127,233,245,.6),0 14px 44px rgba(25,200,224,.45)}
:is(.bss-w,.bss-bar,.bsf-step) .bss-btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
:is(.bss-w,.bss-bar,.bsf-step) .bss-link{appearance:none;background:none;border:0;padding:6px 0;cursor:pointer;color:var(--bss-dim);font:500 15px/1.3 var(--bss-sans);text-decoration:underline;text-decoration-color:rgba(143,166,172,.4);text-underline-offset:4px}
:is(.bss-w,.bss-bar,.bsf-step) .bss-link:hover{color:var(--bss-text);background:none}

/* slot: the starting styles */
.bss-style-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.bss-w .bss-style{position:relative;display:block;margin:0;cursor:pointer;border:1px solid var(--bss-hair);background:var(--bss-panel);border-radius:3px;padding:10px 10px 0;transition:border-color .25s,box-shadow .25s,transform .25s}
.bss-w .bss-style:hover{border-color:var(--bss-line);transform:translateY(-2px)}
.bss-w .bss-style input{position:absolute;opacity:0;pointer-events:none;margin:0}
.bss-style-frame{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;border-radius:2px;background:var(--bss-panel2);padding-top:18px}
.bss-style-frame::before{content:"";position:absolute;left:0;right:0;top:0;height:18px;background:linear-gradient(180deg,#141b22,#0d1217);border-bottom:1px solid var(--bss-hair)}
.bss-style-frame::after{content:"";position:absolute;left:10px;top:7px;width:5px;height:5px;border-radius:50%;background:#2c3a44;box-shadow:9px 0 0 #2c3a44,18px 0 0 #2c3a44}
.bss-w .bss-style-frame img{width:100%;height:100%;object-fit:cover;object-position:top}
.bss-style-name{display:flex;align-items:center;justify-content:space-between;padding:12px 4px 13px;font-weight:700;color:var(--bss-text);font-size:15px}
.bss-style-name::after{content:"";width:18px;height:18px;border-radius:50%;border:1px solid var(--bss-line);transition:all .2s}
.bss-w .bss-style:has(input:checked){border-color:var(--bss-aqua);box-shadow:0 0 0 1px var(--bss-aqua),0 12px 40px rgba(25,200,224,.18)}
.bss-style:has(input:checked) .bss-style-name::after{background:var(--bss-aqua) var(--bss-tick-ink) center/14px no-repeat;border-color:var(--bss-aqua)}
.bss-style:has(input:focus-visible){outline:2px solid var(--bss-aqua-l);outline-offset:3px}
.bss-style-later .bss-style-frame{display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 60%,rgba(25,200,224,.12),transparent 65%),var(--bss-panel2)}
.bss-later-icon{font:800 44px/1 var(--bss-sans);color:var(--bss-aqua);text-shadow:0 0 24px rgba(25,200,224,.5)}

/* slot: the picture beside each offer */
.bss-visual{position:relative;display:flex;align-items:center;justify-content:center;min-height:420px;border:1px solid var(--bss-hair);background:radial-gradient(520px 360px at 50% 45%,rgba(25,200,224,.16),transparent 70%),linear-gradient(180deg,var(--bss-panel2),var(--bss-panel));border-radius:3px;overflow:hidden;padding:40px}
.bss-visual::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(25,200,224,.05) 1px,transparent 1px) 0 0/100% 32px,linear-gradient(90deg,rgba(25,200,224,.05) 1px,transparent 1px) 0 0/32px 100%;pointer-events:none}
.bss-visual.bss-premium{border-color:var(--bss-line);box-shadow:0 0 0 1px rgba(25,200,224,.18),0 30px 90px rgba(25,200,224,.12)}

/* slot: how many */
.bss-qty{display:flex;align-items:center;gap:12px;margin:26px 0 0;flex-wrap:wrap}
.bss-qty-ask{color:var(--bss-text);font-weight:600;margin-right:6px}
.bss-w .bss-qty-btn{appearance:none;width:44px;height:44px;padding:0;border:1px solid var(--bss-line);background:var(--bss-panel);color:var(--bss-text);font-size:22px;line-height:1;border-radius:2px;cursor:pointer}
.bss-w .bss-qty-btn:hover{border-color:var(--bss-aqua);color:var(--bss-aqua);background:var(--bss-panel)}
.bss-w .bss-qty-btn:disabled{opacity:.35;cursor:not-allowed}
.bss-qty-n{min-width:34px;text-align:center;font:800 24px/1 var(--bss-sans);color:var(--bss-text)}
/* in a narrow column (the Elementor page keeps two columns on tablets) the question takes its own line, as on a phone */
.bsf-slot-qty,.bsf-slot-pick{container-type:inline-size}
@container (max-width:420px){.bss-qty-ask{flex-basis:100%}}
@container (max-width:380px){.bsf-slot-pick .bss-pick{grid-template-columns:1fr}}

/* slot: one or both */
.bss-pick{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:24px 0 0;max-width:520px}
.bss-w .bss-pick-opt{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;margin:0;padding:16px;border:1px solid var(--bss-hair);background:var(--bss-panel);border-radius:2px;cursor:pointer;transition:border-color .2s,box-shadow .2s}
.bss-w .bss-pick-opt:hover{border-color:var(--bss-line)}
.bss-w .bss-pick-opt input{position:absolute;opacity:0;pointer-events:none;margin:0}
.bss-pick-box{grid-row:span 2;width:22px;height:22px;border:1px solid var(--bss-line);border-radius:2px;transition:all .2s}
.bss-pick-name{font-weight:700;color:var(--bss-text)}
.bss-pick-price{font:600 12px/1.4 var(--bss-mono);color:var(--bss-dim);letter-spacing:.06em}
.bss-w .bss-pick-opt:has(input:checked){border-color:var(--bss-aqua);box-shadow:0 0 0 1px var(--bss-aqua)}
.bss-pick-opt:has(input:checked) .bss-pick-box{background:var(--bss-aqua) var(--bss-tick-ink) center/16px no-repeat;border-color:var(--bss-aqua)}
.bss-pick-opt:has(input:focus-visible){outline:2px solid var(--bss-aqua-l);outline-offset:3px}
.bss-added-note{margin:18px 0 0;color:var(--bss-aqua-l)}

/* slot: the order */
.bss-w .bss-lines{list-style:none;padding:0;margin:8px 0 0;border-top:1px solid var(--bss-hair)}
.bss-w .bss-lines li{display:grid;grid-template-columns:1fr auto auto;gap:6px 18px;align-items:center;margin:0;padding:16px 0;border-bottom:1px solid var(--bss-hair)}
.bss-w .bss-lines li::before,.bss-w .bss-lines li::marker{content:none}
.bss-line-name{color:var(--bss-text);font-weight:600}
.bss-line-note{grid-column:1;display:block;font:500 12px/1.4 var(--bss-mono);color:var(--bss-dim);letter-spacing:.04em;margin-top:3px}
.bss-line-price{color:var(--bss-text);font-weight:700;white-space:nowrap}
.bss-w .bss-line-x{font-size:14px}
.bss-totals{margin:22px 0 0;padding:20px 22px;border:1px solid var(--bss-line);background:rgba(11,15,20,.8);border-radius:2px}
.bss-w .bss-total-row{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 6px;color:var(--bss-text)}
.bss-total-row span{font:600 12px/1 var(--bss-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--bss-aqua)}
.bss-total-row strong{font:800 36px/1 var(--bss-sans);letter-spacing:-.02em}
.bss-w .bss-renews{margin:8px 0 0;color:var(--bss-dim);font-size:15px}
.bss-skipped{margin-top:30px}
.bss-w .bss-label{font:600 12px/1.2 var(--bss-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--bss-aqua);margin:0 0 16px}
.bss-chips{display:flex;flex-wrap:wrap;gap:10px}
.bss-w .bss-chip{appearance:none;cursor:pointer;border:1px dashed var(--bss-line);background:transparent;color:var(--bss-body);padding:9px 14px;border-radius:2px;font-size:14px;line-height:1.6;text-transform:none;letter-spacing:0}
.bss-w .bss-chip:hover{border-style:solid;color:var(--bss-text);border-color:var(--bss-aqua);background:transparent}
.bss-chip b{color:var(--bss-aqua-l);font-weight:600;margin-left:6px}

/* slot: the details form */
.bss-w.bss-form{display:grid;gap:16px;margin-top:10px}
.bss-w .bss-field{display:grid;gap:8px;margin:0}
.bss-field span{font:600 12px/1 var(--bss-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--bss-dim)}
.bss-field em{font-style:normal;text-transform:none;letter-spacing:0;color:var(--bss-dim)}
.bss-w .bss-field input{width:100%;margin:0;background:var(--bss-panel);border:1px solid var(--bss-line);border-radius:2px;color:var(--bss-text);font:17px/1.3 var(--bss-sans);padding:15px 16px;box-shadow:none;height:auto}
.bss-w .bss-field input:focus{outline:none;border-color:var(--bss-aqua);box-shadow:0 0 0 3px rgba(25,200,224,.18)}
.bss-w .bss-field input[aria-invalid=true]{border-color:#e7a86b}
.bss-w .bss-consent{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;margin:8px 0 4px;color:var(--bss-body);font-size:15px;line-height:1.5;cursor:pointer}
.bss-w .bss-consent input{width:22px;height:22px;margin:1px 0 0;accent-color:var(--bss-aqua)}
.bss-w .bss-consent a{color:var(--bss-aqua-l);text-decoration:underline}
.bss-w .bss-error{margin:0;padding:12px 14px;border-left:3px solid #e7a86b;background:rgba(231,168,107,.08);color:#f3d2b3}
.bss-w .bss-pay{width:100%;padding:22px 30px;font-size:15px}
.bss-w .bss-fine{margin:0;color:var(--bss-dim);font-size:14px;text-align:center}

/* the running total */
.bss-bar{position:fixed;left:0;right:0;bottom:0;z-index:100;background:rgba(8,11,15,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--bss-line);font:16px/1.6 var(--bss-sans);color:var(--bss-body)}
.bss-bar-in{max-width:1180px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:26px}
.bss-bar-total{margin:0 0 0 auto;display:flex;align-items:baseline;gap:12px}
.bss-bar-label{font:600 11px/1 var(--bss-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--bss-aqua)}
.bss-bar-today{font:800 26px/1 var(--bss-sans);color:var(--bss-text);letter-spacing:-.02em}
.bss-bar-renew{margin:0;color:var(--bss-dim);font-size:14px;max-width:460px}
.bss-bar.is-first .bss-back{visibility:hidden}
.bss-bump{animation:bss-bump .5s ease}
@keyframes bss-bump{40%{color:var(--bss-aqua-l);text-shadow:0 0 18px rgba(25,200,224,.8)}}

/* the pictures */
.v-mono{font:600 10px/1.2 var(--bss-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--bss-aqua);margin:0 0 10px}
.v-card{position:relative;width:100%;max-width:360px;background:linear-gradient(180deg,#111922,#0b1016);border:1px solid var(--bss-line);border-radius:6px;padding:22px;box-shadow:0 30px 70px rgba(0,0,0,.5),0 0 60px rgba(25,200,224,.10)}
.v-mail-head{display:flex;gap:6px;margin:-6px 0 18px}
.v-mail-head span{width:8px;height:8px;border-radius:50%;background:#2c3a44}
.bss-visual ul{list-style:none;padding:0}
.bss-visual li::before{content:none}
.v-addr{margin:0 0 18px;display:grid;gap:8px}
.v-addr li{margin:0;font:500 13px/1 var(--bss-mono);color:var(--bss-text);padding:10px 12px;border:1px solid var(--bss-hair);border-radius:3px;background:rgba(5,7,10,.5)}
.v-addr li.is-new{border-color:var(--bss-line);color:var(--bss-aqua-l);box-shadow:0 0 18px rgba(25,200,224,.14)}
.v-lines i{display:block;height:7px;border-radius:4px;background:rgba(207,221,224,.12);margin-top:9px}

.v-stack{position:relative;width:340px;height:300px}
.v-page{position:absolute;width:210px;height:250px;background:linear-gradient(180deg,#121a23,#0c1117);border:1px solid var(--bss-line);border-radius:5px;padding:16px;box-shadow:0 24px 60px rgba(0,0,0,.55)}
.v-page:nth-child(1){left:0;top:40px;transform:rotate(-6deg);opacity:.7}
.v-page:nth-child(2){left:66px;top:18px;transform:rotate(-1deg);opacity:.85}
.v-page:nth-child(3){left:130px;top:0;transform:rotate(4deg);box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 50px rgba(25,200,224,.18)}
.v-page b{display:block;font:800 16px/1 var(--bss-sans);color:var(--bss-text);margin-bottom:12px}
.v-page i{display:block;height:6px;border-radius:3px;background:rgba(207,221,224,.14);margin-bottom:8px}
.v-img{display:block;height:90px;margin-top:12px;border-radius:3px;background:linear-gradient(135deg,rgba(25,200,224,.25),rgba(10,127,146,.08))}
.v-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.v-grid u{display:block;height:80px;border-radius:3px;background:linear-gradient(135deg,rgba(25,200,224,.22),rgba(10,127,146,.06))}
.v-grid u:nth-child(2),.v-grid u:nth-child(3){background:linear-gradient(135deg,rgba(127,233,245,.14),rgba(25,200,224,.04))}

.v-phone{width:220px;height:440px;border-radius:36px;padding:10px;background:linear-gradient(160deg,#1b2530,#0b1016);border:1px solid var(--bss-line);box-shadow:0 34px 80px rgba(0,0,0,.6),0 0 60px rgba(25,200,224,.12)}
.v-phone-in{height:100%;border-radius:28px;background:radial-gradient(260px 300px at 50% 20%,rgba(25,200,224,.20),transparent 70%),#070a0e;padding:44px 18px 18px;text-align:center}
.v-apps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
.v-apps u{aspect-ratio:1;border-radius:11px;background:rgba(207,221,224,.08);border:1px solid rgba(207,221,224,.06)}
.v-apps u.is-you{display:flex;align-items:center;justify-content:center;text-decoration:none;font:800 20px/1 var(--bss-sans);color:var(--bss-ink);background:linear-gradient(135deg,var(--bss-aqua-l),var(--bss-aqua));box-shadow:0 0 26px rgba(25,200,224,.7);transform:scale(1.12)}

.v-call{width:260px;padding:28px 22px 22px;text-align:center;border-radius:28px;background:linear-gradient(180deg,#101820,#0a0e13);border:1px solid var(--bss-line);box-shadow:0 30px 70px rgba(0,0,0,.55),0 0 60px rgba(25,200,224,.12)}
.v-call-name{font:800 22px/1.1 var(--bss-sans);color:var(--bss-text);margin:0 0 6px}
.v-call-num{font:500 13px/1 var(--bss-mono);color:var(--bss-dim);margin:0 0 26px}
.v-call-btns{display:flex;justify-content:center;gap:54px;margin-bottom:26px}
.v-call-btns span{width:52px;height:52px;border-radius:50%}
.v-call-btns .no{background:#3a2227;border:1px solid #6b3a41}
.v-call-btns .yes{background:var(--bss-aqua);box-shadow:0 0 0 0 rgba(25,200,224,.6);animation:bss-ring 1.8s infinite}
@keyframes bss-ring{0%{box-shadow:0 0 0 0 rgba(25,200,224,.55)}70%{box-shadow:0 0 0 16px rgba(25,200,224,0)}100%{box-shadow:0 0 0 0 rgba(25,200,224,0)}}
.v-vm{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--bss-hair);border-radius:12px;text-align:left}
.v-vm .v-mono{margin:0}
.v-wave{display:flex;align-items:center;gap:3px;flex:1}
.v-wave i{width:3px;border-radius:2px;background:var(--bss-aqua-l);height:8px}
.v-wave i:nth-child(2n){height:16px}.v-wave i:nth-child(3n){height:22px}.v-wave i:nth-child(5n){height:11px}

.v-cal{max-width:380px}
.v-days{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:14px}
.v-days span,.v-slots span{text-align:center;font:600 12px/1 var(--bss-mono);padding:10px 0;border:1px solid var(--bss-hair);border-radius:3px;color:var(--bss-body)}
.v-days .on{border-color:var(--bss-aqua);color:var(--bss-aqua-l)}
.v-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.v-slots .off{opacity:.3;text-decoration:line-through}
.v-slots .on{background:var(--bss-aqua);border-color:var(--bss-aqua);color:var(--bss-ink);box-shadow:0 0 22px rgba(25,200,224,.5)}
.v-booked{margin:16px 0 0;font-size:14px;color:var(--bss-aqua-l);text-align:center}

.v-laptop{width:100%;max-width:440px}
.v-screen{border:1px solid var(--bss-line);border-bottom:0;border-radius:10px 10px 0 0;padding:10px 10px 0;background:#0d1319;box-shadow:0 0 60px rgba(25,200,224,.12)}
.v-win-bar{display:flex;align-items:center;gap:6px;padding:4px 6px 10px}
.v-win-bar span{width:8px;height:8px;border-radius:50%;background:#2c3a44}
.v-win-bar em{font:600 10px/1 var(--bss-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--bss-dim);font-style:normal;margin-left:8px}
.v-win{display:grid;grid-template-columns:70px 1fr;min-height:200px;border-top:1px solid var(--bss-hair)}
.v-side{border-right:1px solid var(--bss-hair);padding:14px 10px;display:grid;gap:10px;align-content:start}
.v-side i{height:8px;border-radius:4px;background:rgba(207,221,224,.12)}
.v-side i.on{background:var(--bss-aqua)}
.v-edit{padding:18px}
.v-edit b{display:block;color:var(--bss-text);font:800 17px/1 var(--bss-sans);margin-bottom:14px}
.v-type{margin:0 0 18px;padding:12px;border:1px solid var(--bss-aqua);border-radius:3px;color:var(--bss-text);font-size:14px;box-shadow:0 0 0 3px rgba(25,200,224,.12)}
.v-caret{display:inline-block;width:2px;height:16px;margin-left:2px;background:var(--bss-aqua-l);vertical-align:-3px;animation:bss-blink 1s steps(1) infinite}
@keyframes bss-blink{50%{opacity:0}}
.v-save{display:inline-block;background:var(--bss-aqua);color:var(--bss-ink);font:700 11px/1 var(--bss-mono);letter-spacing:.12em;text-transform:uppercase;padding:10px 16px;border-radius:2px}
.v-base{height:14px;margin:0 -24px;background:linear-gradient(180deg,#1c2630,#0c1117);border-radius:0 0 12px 12px;border:1px solid var(--bss-line);border-top:0}

.v-care{max-width:340px}
.v-checks{margin:0;display:grid;gap:10px}
.v-checks li{margin:0;display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--bss-hair);border-radius:3px;color:var(--bss-text);font-size:15px}
.v-checks span{flex:none;width:20px;height:20px;border-radius:50%;background:var(--bss-aqua) var(--bss-tick-ink) center/14px no-repeat}
.v-checks li.todo{border-style:dashed;border-color:var(--bss-line);color:var(--bss-aqua-l)}
.v-checks li.todo span{background:transparent;border:1px dashed var(--bss-aqua)}

/* the Elementor editor: every step stacked with its name, every slot a dashed box */
body.bss-editing .bsf-page,body.elementor-editor-active .bsf-page{counter-reset:bsf-step}
body.bss-editing .bsf-step,body.elementor-editor-active .bsf-step{position:relative;counter-increment:bsf-step;margin-top:84px;outline:1px dashed rgba(127,233,245,.35);outline-offset:12px}
body.bss-editing .bsf-step-thanks,body.elementor-editor-active .bsf-step-thanks{counter-increment:none}
/* (Elementor draws its own .e-con::before over every container, full size: each property it sets is set back here) */
body.bss-editing .bsf-step::before,body.elementor-editor-active .bsf-step::before{display:block;position:absolute;left:0;top:-44px;right:auto;bottom:auto;width:auto;height:auto;z-index:2;padding:5px 10px;border:0;border-radius:2px;opacity:1;mix-blend-mode:normal;transition:none;background:#0a7f92;color:#e8f4f6;font:600 11px/1.2 var(--bss-mono);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;pointer-events:none;content:"Step " counter(bsf-step)}
body.bss-editing .bsf-step-site::before,body.elementor-editor-active .bsf-step-site::before{content:"Step " counter(bsf-step) ": The website and style"}
body.bss-editing .bsf-step-email::before,body.elementor-editor-active .bsf-step-email::before{content:"Step " counter(bsf-step) ": Extra email addresses"}
body.bss-editing .bsf-step-page::before,body.elementor-editor-active .bsf-step-page::before{content:"Step " counter(bsf-step) ": Extra pages"}
body.bss-editing .bsf-step-apps::before,body.elementor-editor-active .bsf-step-apps::before{content:"Step " counter(bsf-step) ": Phone apps"}
body.bss-editing .bsf-step-voip::before,body.elementor-editor-active .bsf-step-voip::before{content:"Step " counter(bsf-step) ": Business phone number"}
body.bss-editing .bsf-step-booking::before,body.elementor-editor-active .bsf-step-booking::before{content:"Step " counter(bsf-step) ": Booking system"}
body.bss-editing .bsf-step-desktop::before,body.elementor-editor-active .bsf-step-desktop::before{content:"Step " counter(bsf-step) ": Desktop manager app"}
body.bss-editing .bsf-step-webcare::before,body.elementor-editor-active .bsf-step-webcare::before{content:"Step " counter(bsf-step) ": Webcare"}
body.bss-editing .bsf-step-summary::before,body.elementor-editor-active .bsf-step-summary::before{content:"Step " counter(bsf-step) ": Order summary"}
body.bss-editing .bsf-step-details::before,body.elementor-editor-active .bsf-step-details::before{content:"Step " counter(bsf-step) ": Details and payment"}
body.bss-editing .bsf-step-thanks::before,body.elementor-editor-active .bsf-step-thanks::before{content:"After payment: Thank you page"}
body.bss-editing .bsf-page [class*="bsf-slot-"],body.elementor-editor-active .bsf-page [class*="bsf-slot-"]{display:flex;align-items:center;justify-content:center;min-height:96px;padding:16px 20px;border:1px dashed rgba(127,233,245,.6);border-radius:3px;background:rgba(25,200,224,.05);text-align:center}
body.bss-editing .bsf-page [class*="bsf-slot-"]::before,body.elementor-editor-active .bsf-page [class*="bsf-slot-"]::before{display:block;position:static;width:auto;height:auto;border:0;opacity:1;mix-blend-mode:normal;transition:none;background:none;color:#7fe9f5;font:600 11px/1.6 var(--bss-mono);letter-spacing:.1em;text-transform:uppercase;content:"The checkout fills this in"}
body.bss-editing .bsf-page .bsf-slot-styles,body.elementor-editor-active .bsf-page .bsf-slot-styles{min-height:220px}
body.bss-editing .bsf-page .bsf-slot-styles::before,body.elementor-editor-active .bsf-page .bsf-slot-styles::before{content:"The checkout fills in the five starting styles and Help me choose here"}
body.bss-editing .bsf-page .bsf-slot-visual,body.elementor-editor-active .bsf-page .bsf-slot-visual{min-height:320px}
body.bss-editing .bsf-page .bsf-slot-visual::before,body.elementor-editor-active .bsf-page .bsf-slot-visual::before{content:"The checkout draws the picture for this offer here"}
body.bss-editing .bsf-page .bsf-slot-qty::before,body.elementor-editor-active .bsf-page .bsf-slot-qty::before{content:"The checkout puts the How many buttons here"}
body.bss-editing .bsf-page .bsf-slot-pick::before,body.elementor-editor-active .bsf-page .bsf-slot-pick::before{content:"The checkout puts the two choices here, each with its price"}
body.bss-editing .bsf-page .bsf-slot-lines,body.elementor-editor-active .bsf-page .bsf-slot-lines{min-height:200px}
body.bss-editing .bsf-page .bsf-slot-lines::before,body.elementor-editor-active .bsf-page .bsf-slot-lines::before{content:"The checkout lists the order here: each item, the total today, what renews, and Also available"}
body.bss-editing .bsf-page .bsf-slot-form,body.elementor-editor-active .bsf-page .bsf-slot-form{min-height:260px}
body.bss-editing .bsf-page .bsf-slot-form::before,body.elementor-editor-active .bsf-page .bsf-slot-form::before{content:"The checkout puts the form here: name, email, business, phone, the terms tick box and the Pay button"}
/* (editor only) a slot stays empty: Elementor's own "+" drop box would sit beside the slot's words, so it is left out */
body.bss-editing .bsf-page [class*="bsf-slot-"]>.elementor-empty-view,body.elementor-editor-active .bsf-page [class*="bsf-slot-"]>.elementor-empty-view{display:none}
/* (editor only) the same room above the quantity and the two choices as the checkout gives them */
body.bss-editing .bsf-page .bsf-slot-qty,body.elementor-editor-active .bsf-page .bsf-slot-qty{margin-top:26px}
body.bss-editing .bsf-page .bsf-slot-pick,body.elementor-editor-active .bsf-page .bsf-slot-pick{margin-top:24px}
/* (editor only) words the checkout writes over: the price and the Add button's label come from the price list */
body.bss-editing .bsf-step .bsf-price::after,body.elementor-editor-active .bsf-step .bsf-price::after{content:"Set by the checkout";display:inline-block;margin-left:14px;vertical-align:middle;padding:4px 7px;border:1px dashed rgba(127,233,245,.6);border-radius:2px;font:600 10px/1.2 var(--bss-mono);letter-spacing:.12em;text-transform:uppercase;color:#7fe9f5}
body.bss-editing .bsf-step .bsf-add,body.elementor-editor-active .bsf-step .bsf-add{position:relative}
body.bss-editing .bsf-step .bsf-add::after,body.elementor-editor-active .bsf-step .bsf-add::after{content:"Label set by the checkout";position:absolute;left:0;bottom:calc(100% + 8px);white-space:nowrap;font:600 10px/1.2 var(--bss-mono);letter-spacing:.12em;text-transform:uppercase;color:#7fe9f5;pointer-events:none}

/* phones: the pieces the checkout draws */
@media (max-width:900px){
  .bss-visual{min-height:280px;padding:28px}
  .bss-style-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .bss-top-in{padding:12px 16px;gap:14px}
  .bss-top .bss-mark{font-size:12px}
  .bss-top .bss-mark span{display:none}
  .bss-secure{display:none}
  .bss-noscript-wrap{padding:72px 16px 40px}
  .bss-style-grid{gap:10px}
  .bss-w .bss-style{padding:6px 6px 0}
  .bss-style-name{font-size:13px;padding:9px 2px 10px}
  .bss-style-name::after{width:16px;height:16px}
  .bss-visual{min-height:0;height:210px;padding:16px}
  .bss-qty-ask{flex-basis:100%}
  .v-card{padding:16px;transform:scale(.86)}
  .v-cal,.v-care{transform:scale(.72);margin:-30px 0}
  .v-stack{transform:scale(.62);margin:-60px -60px}
  .v-call{transform:scale(.66);margin:-60px 0}
  .v-phone{transform:scale(.46);margin:-120px 0}
  .v-laptop{max-width:300px;transform:scale(.8)}
  .bss-actions{flex-direction:column;align-items:stretch;gap:8px}
  :is(.bss-w,.bss-bar,.bsf-step) .bss-btn{width:100%;text-align:center}
  .bsf-step .bss-actions .bss-link,.bsf-step .bsf-actions .bss-link{text-align:center;padding:12px 0}
  .bss-pick{grid-template-columns:1fr}
  .bss-bar-in{padding:10px 16px;gap:14px;flex-wrap:wrap}
  .bss-bar-renew{order:3;flex-basis:100%;font-size:12.5px;margin-top:-4px}
  .bss-bar-today{font-size:22px}
  .bss-w .bss-lines li{grid-template-columns:1fr auto}
  .bss-w .bss-line-x{grid-column:1 / -1;justify-self:start;padding:0}
}
@media (prefers-reduced-motion:reduce){
  .bss-top *,.bss-bar,.bss-bar *,.bss-w,.bss-w *,.bss-w *::before,.bss-w *::after,html.bsf-js .bsf-step,.bsf-step .bsf-add,.bsf-step .bsf-next{animation:none!important;transition:none!important}
}

/* ============================================================ PART 2: the plugin's own page only */
body.bss{margin:0;background:var(--bss-bg);color:var(--bss-body);font:16px/1.6 var(--bss-sans);min-height:100vh;
  background-image:radial-gradient(1000px 520px at 80% -10%,rgba(25,200,224,.10),transparent 60%),linear-gradient(rgba(25,200,224,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(25,200,224,.035) 1px,transparent 1px);
  background-size:auto,100% 64px,64px 100%;background-attachment:fixed}
.bss-standalone *{box-sizing:border-box}
.bss-standalone a{color:var(--bss-aqua-l)}
.bss-standalone .bsf-in{max-width:1180px;margin:0 auto;padding:92px 24px 150px}
.bss-standalone .bsf-eyebrow{font:600 12px/1.2 var(--bss-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--bss-aqua);margin:0 0 16px}
.bss-standalone .bsf-title{font:800 clamp(30px,4.6vw,52px)/1.06 var(--bss-sans);letter-spacing:-.025em;color:var(--bss-text);margin:0 0 18px}
.bss-standalone .bsf-lede{font-size:clamp(17px,1.6vw,19px);line-height:1.6;color:var(--bss-body);margin:0 0 22px;max-width:620px}
.bss-standalone .bsf-narrow{max-width:680px;margin:0 auto}

/* the website */
.bss-standalone .bsf-head{max-width:760px}
.bss-standalone .bsf-incs{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 44px}
.bss-standalone .bsf-inc{display:flex;align-items:center;margin:0;padding:10px 16px 10px 12px;border:1px solid var(--bss-hair);background:rgba(11,15,20,.8);border-radius:2px;color:var(--bss-text);font-size:15px}
.bss-standalone .bsf-legend{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin:0 0 18px}
.bss-standalone .bsf-label{margin:0;font:600 12px/1.2 var(--bss-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--bss-aqua)}
.bss-standalone .bsf-note{margin:0;color:var(--bss-dim);font-size:14px}
.bss-standalone .bsf-slot-styles{margin:0 0 36px}

/* the offers */
.bss-standalone .bsf-offer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:64px;align-items:center;min-height:calc(100vh - 260px)}
.bss-standalone .bsf-points{display:grid;gap:12px;margin:0 0 28px}
.bss-standalone .bsf-point{display:flex;align-items:center;margin:0;color:var(--bss-text);font-size:16px}
.bss-standalone .bsf-price-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin:0 0 6px}
.bss-standalone .bsf-price{margin:0;font:800 50px/1 var(--bss-sans);letter-spacing:-.03em;color:var(--bss-text)}
.bss-standalone .bsf-per{margin:0;font:600 12px/1.2 var(--bss-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--bss-dim)}
.bss-standalone .bsf-nudge{margin:10px 0 0;color:var(--bss-aqua-l);font-size:15px}
.bss-standalone .bsf-eyebrow-row{display:flex;flex-wrap:wrap;align-items:baseline;margin:0 0 16px;position:relative;top:1px}
.bss-standalone .bsf-eyebrow-row .bsf-eyebrow{margin:0}
.bss-standalone .bsf-badge{margin:0 0 0 19.6px;padding:5px 9px;border:1px solid var(--bss-line);color:var(--bss-aqua-l);font:600 10px/1.2 var(--bss-mono);letter-spacing:.14em;text-transform:uppercase;position:relative;top:-1px}

/* the page's buttons */
.bss-standalone .bsf-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:30px}
.bss-standalone .bsf-add,.bss-standalone .bsf-next{appearance:none;border:0;cursor:pointer;background:var(--bss-aqua);color:var(--bss-ink);font:700 14px/1 var(--bss-mono);letter-spacing:.12em;text-transform:uppercase;padding:19px 30px;border-radius:2px;box-shadow:0 0 0 1px rgba(127,233,245,.4),0 10px 34px rgba(25,200,224,.35);transition:transform .2s,box-shadow .2s,background .2s}
.bss-standalone .bsf-add:hover,.bss-standalone .bsf-next:hover{background:var(--bss-aqua-l);transform:translateY(-1px);box-shadow:0 0 0 1px rgba(127,233,245,.6),0 14px 44px rgba(25,200,224,.45)}
.bss-standalone .bsf-skip{appearance:none;background:none;border:0;padding:6px 0;cursor:pointer;color:var(--bss-dim);font:500 15px/1.3 var(--bss-sans);text-decoration:underline;text-decoration-color:rgba(143,166,172,.4);text-underline-offset:4px}
.bss-standalone .bsf-skip:hover{color:var(--bss-text)}

/* after paying */
.bss-standalone .bsf-thanks-in{max-width:720px;margin:8vh auto 0;text-align:center}
.bss-standalone .bsf-thanks-in .bsf-narrow{max-width:none}
.bss-standalone .bsf-thanks-in .bsf-lede{margin-left:auto;margin-right:auto}

@media (max-width:900px){
  .bss-standalone .bsf-offer{grid-template-columns:1fr;gap:28px;min-height:0}
}
@media (max-width:640px){
  .bss-standalone .bsf-in{padding:65px 16px 150px}
  .bss-standalone .bsf-incs{gap:8px;margin-bottom:34px}
  .bss-standalone .bsf-inc{font-size:14px;padding:8px 12px 8px 10px}
  .bss-standalone .bsf-price{font-size:42px}
  .bss-standalone .bsf-actions{flex-direction:column;align-items:stretch;gap:8px}
  .bss-standalone .bsf-add,.bss-standalone .bsf-next{width:100%;text-align:center}
  .bss-standalone .bsf-skip{text-align:center;padding:12px 0}
}