/* Website Design Orbit Plans — Elementor. All styles are scoped to each widget instance. */
.hpo-widget {
  --hpo-size: 610px;
  --hpo-node-size: 108px;
  --hpo-center-size: 59%;
  --hpo-orbit-radius: 44%;
  --hpo-center-offset: -1%;
  --hpo-vertical-offset: 0px;
  --hpo-details-max: 610px;
  --hpo-center-content-width: 82%;
  --hpo-gap-eyebrow-heading: 5px;
  --hpo-gap-heading-tag: 11px;
  --hpo-gap-tag-name: 6px;
  --hpo-gap-name-desc: 6px;
  --hpo-gap-desc-price: 11px;
  --hpo-gap-price-period: 0px;
  --hpo-gap-price-cta: 11px;
  --hpo-stage-gap: calc(var(--hpo-node-size) * .54);
  --hpo-outer-orbit-inset: 2.5%;
  --hpo-middle-orbit-inset: 13%;
  --hpo-bg: #0a1326;
  --hpo-center-bg: #15223b;
  --hpo-node-bg: #182540;
  --hpo-detail-bg: #111e34;
  --hpo-star-main-size: 8px;
  --hpo-star-secondary-size: 5px;
  --hpo-star-third-size: 4px;
  --hpo-star-fixed-size: 3px;
  --hpo-detail-border: rgba(139, 159, 200, .19);
  --hpo-detail-radius: 19px;
  --hpo-detail-resolved-height: auto;
  --hpo-detail-content-justify: flex-start;
  --hpo-detail-content-items: stretch;
  --hpo-detail-title-align: right;
  --hpo-detail-features-align: right;
  --hpo-feature-icon-bg: rgba(92,233,213,.12);
  --hpo-feature-icon-color: #5CE9D5;
  --hpo-detail-ufo-size: 30px;
  --hpo-detail-ufo-hover-lift: 7px;
  --hpo-detail-ufo-glow-opacity: 50%;
  --hpo-detail-ufo-color: #f6faff;
  --hpo-detail-title-offset-x: 0px;
  --hpo-detail-title-icon-gap: 10px;
  --hpo-detail-ufo-shift-x: 0px;
  --hpo-detail-ufo-shift-y: 0px;
  --hpo-detail-ufo-rotate: 0deg;
  --hpo-detail-ufo-scale: 1;
  --hpo-detail-ufo-offset-y: -3px;
  --hpo-ufo-lamp-speed: 1.8s;
  --hpo-callout-text-gap: 10px;
  --hpo-orbit-color: #536780;
  --hpo-orbit-width: 1.5px;
  --hpo-node-border-width: 2px;
  --hpo-node-border-color: #7f96ba;
  --hpo-text: #f6faff;
  --hpo-muted: #a6b5cc;
  --hpo-highlight: #5ce9d5;
  --hpo-middle-orbit-color: #6e85a3;
  --hpo-cta-bg: var(--hpo-current-accent);
  --hpo-cta-text: #081928;
  --hpo-cta-border: rgba(255,255,255,.12);
  --hpo-icon-color: var(--hpo-muted);
  --hpo-icon-active-color: var(--hpo-current-accent);
  --hpo-current-accent: var(--hpo-highlight);
  --hpo-motion-speed: 34s;
  position: relative;
  width: 100%;
  margin-inline: auto;
  padding: 32px 18px 30px;
  background: var(--hpo-bg);
  color: var(--hpo-text);
  border-radius: 32px;
  isolation: isolate;
  text-align: center;
  box-sizing: border-box;
  font-family: inherit;
  line-height: 1.6;
  transform: translateY(var(--hpo-vertical-offset));
  overflow: hidden;
}
/* Opt-in geometry guard (on by default). It also protects old Elementor pages
   whose generated CSS still carries the former hosting widget dimensions. */
.hpo-widget.hpo-safe-geometry {
  --hpo-center-cap: 59%;
  --hpo-min-radius: 44%;
}
.hpo-widget *, .hpo-widget *::before, .hpo-widget *::after { box-sizing: border-box; }
.hpo-widget button, .hpo-widget a { -webkit-tap-highlight-color: transparent; }
.hpo-widget button { font-family: inherit; }
.hpo-stage {
  position: relative;
  width: min(100%, var(--hpo-size));
  aspect-ratio: 1;
  margin: 0 auto var(--hpo-stage-gap);
  overflow: visible;
  direction: ltr;
  container-type: inline-size;
  --hpo-radius-effective: max(var(--hpo-orbit-radius), var(--hpo-min-radius, 0%));
}
.hpo-stage-glow {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 37% 48%, rgba(100, 137, 238, .12), transparent 64%),
    radial-gradient(ellipse at 82% 45%, rgba(46, 232, 208, .075), transparent 46%);
  pointer-events: none;
}
.hpo-orbit { position: absolute; border-radius: 50%; pointer-events: none; }
.hpo-orbit-outer {
  inset: var(--hpo-outer-orbit-inset);
  border: 1px solid color-mix(in srgb, var(--hpo-orbit-color) 32%, transparent);
  box-shadow: 0 0 22px rgba(100, 129, 238, .035), inset 0 0 30px rgba(83, 135, 218, .015);
}
.hpo-orbit-middle {
  inset: var(--hpo-middle-orbit-inset);
  border: 1px dashed color-mix(in srgb, var(--hpo-middle-orbit-color) 52%, transparent);
  opacity: .75;
}
.hpo-orbit-inner {
  inset: calc(50% - var(--hpo-radius-effective));
  border: var(--hpo-orbit-width) dashed color-mix(in srgb, var(--hpo-orbit-color) 64%, transparent);
  box-shadow: 0 0 18px rgba(122, 168, 229, .04);
}
.hpo-orbit-runner {
  --hpo-dot-size: var(--hpo-star-main-size);
  position: absolute;
  inset: calc(50% - var(--hpo-radius-effective));
  border-radius: 50%;
  pointer-events: none;
  animation: hpo-orbit-spin var(--hpo-motion-speed) linear infinite;
}
.hpo-orbit-runner::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--hpo-dot-size);
  height: var(--hpo-dot-size);
  border-radius: 50%;
  background: var(--hpo-current-accent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--hpo-current-accent) 10%, transparent), 0 0 17px 5px color-mix(in srgb, var(--hpo-current-accent) 43%, transparent);
  transform: translate(-50%, -50%);
}
/* Two independent small lights riding distinct orbits: no animation on plan selectors. */
.hpo-orbit-runner-two {
  --hpo-dot-size: var(--hpo-star-secondary-size);
  inset: 13%;
  animation-duration: calc(var(--hpo-motion-speed) * 1.35);
  animation-direction: reverse;
  animation-delay: -32.5s; /* second small star collides sooner at default speed */
}
.hpo-orbit-runner-three {
  --hpo-dot-size: var(--hpo-star-third-size);
  inset: 3%;
  animation-duration: calc(var(--hpo-motion-speed) * .76);
  animation-delay: -19s;
}
.hpo-orbit-runner-two::after { background: #98acff; box-shadow: 0 0 9px 2px #98acff, 0 0 18px 4px rgba(145,172,255,.35); }
.hpo-orbit-runner-three::after { background: #f3d4ff; box-shadow: 0 0 8px 3px rgba(236,188,255,.6); }
/* One small, infrequent comet rendered on a GPU-composited layer. */
.hpo-comet { position:absolute; left:0; top:0; z-index:1; width:7px; height:7px; border-radius:50%; background:#fff; box-shadow:0 0 8px 2px #b6faff, 0 0 18px 4px rgba(92,233,213,.45); pointer-events:none; opacity:.9; transform-origin:center; }
.hpo-comet::before { content:''; position:absolute; right:5px; top:2px; height:3px; width:28px; border-radius:100%; background:linear-gradient(90deg, transparent, rgba(92,233,213,.22), #c7ffff); filter:blur(1px); }
.hpo-comet-burst { position:absolute; z-index:9; pointer-events:none; opacity:0; left:0; top:0; width:24px; height:24px; border:1px solid rgba(255,181,94,.95); border-radius:50%; box-shadow:0 0 16px 2px rgba(255,116,56,.55), 0 0 28px 8px rgba(255,195,85,.22); transform:translate(-50%,-50%) scale(.25); }
.hpo-comet-burst i { position:absolute; left:8px; top:8px; height:4px; width:4px; border-radius:50%; background:#ffd27a; box-shadow:0 0 8px #ff7c35, 0 0 14px #ffdd8e; }
.hpo-comet-burst i:nth-child(1) { --hpo-sx:18px; --hpo-sy:0px; }
.hpo-comet-burst i:nth-child(2) { --hpo-sx:9px; --hpo-sy:-17px; }
.hpo-comet-burst i:nth-child(3) { --hpo-sx:-9px; --hpo-sy:-17px; }
.hpo-comet-burst i:nth-child(4) { --hpo-sx:-18px; --hpo-sy:0px; }
.hpo-comet-burst i:nth-child(5) { --hpo-sx:-9px; --hpo-sy:17px; }
.hpo-comet-burst i:nth-child(6) { --hpo-sx:9px; --hpo-sy:17px; }
.hpo-comet-burst.is-bursting { animation:hpo-meteor-burst .52s ease-out both; }
.hpo-comet-burst.is-bursting i { animation:hpo-meteor-sparks .52s ease-out both; }
@keyframes hpo-meteor-burst { 0% { opacity:1; transform:translate(-50%,-50%) scale(.15) } 30% { opacity:1 } 100% { opacity:0; transform:translate(-50%,-50%) scale(1.55) } }
@keyframes hpo-meteor-sparks { 0% { opacity:1; transform:translate(0,0) scale(1) } 100% { opacity:0; transform:translate(var(--hpo-sx), var(--hpo-sy)) scale(.2) } }
.hpo-star { position: absolute; left: 0; top: 0; width: var(--hpo-star-fixed-size); height: var(--hpo-star-fixed-size); border-radius: 50%; background: var(--hpo-current-accent); opacity: .76; box-shadow: 0 0 10px var(--hpo-highlight); pointer-events: none; transform: translate(-50%, -50%); }
.hpo-star-two { width: calc(var(--hpo-star-fixed-size) * .7); height: calc(var(--hpo-star-fixed-size) * .7); opacity: .7; }
.hpo-star-three { display:none !important; }
.hpo-orbit-impact { position:absolute; left:0; top:0; z-index:8; width:18px; height:18px; pointer-events:none; opacity:0; transform:translate(-50%,-50%) scale(.25); }
.hpo-orbit-impact::before, .hpo-orbit-impact::after { content:''; position:absolute; inset:0; border-radius:50%; }
.hpo-orbit-impact::before { border:1px solid rgba(255,166,88,.95); box-shadow:0 0 14px rgba(255,124,53,.7), 0 0 28px rgba(255,207,112,.28); }
.hpo-orbit-impact::after { inset:5px; background:radial-gradient(circle, rgba(255,240,191,.95) 0%, rgba(255,164,75,.9) 38%, rgba(255,91,34,.45) 64%, transparent 72%); }
.hpo-orbit-impact.is-bursting { animation:hpo-orbit-impact .46s ease-out both; }
@keyframes hpo-orbit-impact { 0% { opacity:1; transform:translate(-50%,-50%) scale(.22); } 48% { opacity:1; transform:translate(-50%,-50%) scale(1); } 100% { opacity:0; transform:translate(-50%,-50%) scale(1.5); } }

/* The main circle deliberately sits a little to the left of the orbit center, like the sketch. */
.hpo-center {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: calc(50% + var(--hpo-center-offset));
  width: min(var(--hpo-center-size), var(--hpo-center-cap, 100%));
  height: min(var(--hpo-center-size), var(--hpo-center-cap, 100%));
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(154, 178, 223, .29);
  background: radial-gradient(circle at 20% 12%, rgba(112, 146, 209, .16), transparent 55%), var(--hpo-center-bg);
  box-shadow: 0 15px 70px rgba(0, 0, 0, .24), 0 0 0 9px rgba(146, 167, 237, .025), inset 0 0 44px rgba(18, 29, 66, .33);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  direction: rtl;
  padding: 34px 30px;
  overflow: hidden;
}
.hpo-center::before { content: ''; pointer-events: none; position: absolute; inset: 6px; border-radius: inherit; border: 1px solid rgba(255, 255, 255, .032); }
.hpo-eyebrow { position: relative; color: var(--hpo-current-accent); font-size: 12px; line-height: 1.4; font-weight: 600; letter-spacing: .02em; width: min(100%, var(--hpo-center-content-width)); margin-inline: auto; }
.hpo-heading { position: relative; margin: var(--hpo-gap-eyebrow-heading) auto 0; color: var(--hpo-text); font-size: clamp(20px, 3vw, 31px); line-height: 1.35; font-weight: 800; width: min(100%, var(--hpo-center-content-width)); }
.hpo-heading::after { content: ''; display: block; width: 34px; height: 3px; background: var(--hpo-current-accent); border-radius: 20px; margin: 10px auto 0; }
.hpo-center-slides { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; width: min(100%, var(--hpo-center-content-width)); margin-inline: auto; min-width: 0; }
.hpo-center-slide { grid-area: 1 / 1; position: relative; display: flex; width: 100%; flex-direction: column; align-items: center; min-width: 0; gap: 1px; }
/* Keep inactive slides/panels in the sizing grid so selection NEVER changes widget height. */
.hpo-widget .hpo-center-slide[hidden] { display: flex !important; visibility: hidden; pointer-events: none; opacity: 0; animation: none; }
.hpo-widget .hpo-detail-panel[hidden] { display: block !important; visibility: hidden; pointer-events: none; opacity: 0; animation: none; }
.hpo-minitag { margin-top: var(--hpo-gap-heading-tag); padding: 2px 10px; border-radius: 30px; background: rgba(92, 233, 213, .10); color: var(--hpo-current-accent); font-size: 10px; line-height: 1.8; font-weight: 650; white-space: nowrap; }
.hpo-plan-name { overflow-wrap: anywhere; margin: var(--hpo-gap-tag-name) 0 2px; color: var(--hpo-text); font-size: clamp(20px, 2.6vw, 29px); line-height: 1.3; font-weight: 800; }
.hpo-plan-desc { max-width: 100%; margin: var(--hpo-gap-name-desc) 0 var(--hpo-gap-desc-price); color: var(--hpo-muted); font-size: 12px; line-height: 1.8; }
.hpo-price-wrap { display: flex; flex-direction: column; align-items: center; margin: 0 0 var(--hpo-gap-price-cta); gap: var(--hpo-gap-price-period); }
.hpo-price { color: var(--hpo-text); font-size: clamp(23px, 2.65vw, 31px); font-weight: 900; line-height: 1.28; direction: ltr; unicode-bidi: isolate; }
.hpo-period { font-size: 11px; color: var(--hpo-muted); line-height: 1.5; }
.hpo-cta { width: var(--hpo-cta-width, auto); max-width: 100%; min-width: max-content; white-space: nowrap; overflow-wrap: normal; word-break: normal; flex-wrap: nowrap; flex-shrink: 0; text-align: center; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid var(--hpo-cta-border); border-radius: 100px; background: var(--hpo-cta-bg); color: var(--hpo-cta-text) !important; font-size: 12px; font-weight: 750; line-height: 1.5; text-decoration: none !important; padding: 10px 16px; transition: transform .22s ease, box-shadow .22s ease, filter .22s ease; }
.hpo-center-slide .hpo-cta { background:var(--hpo-plan-cta-bg, var(--hpo-cta-bg)); color:var(--hpo-plan-cta-text, var(--hpo-cta-text)) !important; }
.hpo-cta:not(.hpo-cta-no-link):hover { transform: translateY(-3px); filter: brightness(1.1); box-shadow: 0 9px 24px rgba(92, 233, 213, .23); }
.hpo-cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.hpo-cta-no-link { cursor: default; opacity: .82; }
.hpo-cta span { font-size: 15px; line-height: 1; flex: 0 0 auto; }

/* Buttons are positioned on the circle via their per-plan angles. */
.hpo-node {
  position: absolute;
  z-index: 4;
  top: calc(50% + var(--hpo-y) * var(--hpo-radius-effective));
  left: calc(50% + var(--hpo-x) * var(--hpo-radius-effective));
  width: min(var(--hpo-node-size), 21cqw);
  height: min(var(--hpo-node-size), 21cqw);
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  color: var(--hpo-text);
  transition: filter .25s ease;
}
.hpo-node-body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%; height: 100%;
  background: radial-gradient(circle at 34% 17%, rgba(159,189,233,.14), transparent 52%), var(--hpo-node-bg);
  border: var(--hpo-node-border-width) solid color-mix(in srgb, var(--hpo-node-border-color) 72%, transparent);
  box-shadow: 0 9px 25px rgba(0,0,0,.30), inset 0 0 23px rgba(56, 83, 144, .15);
  border-radius: 50%;
  direction: rtl;
  transition: transform .32s cubic-bezier(.2,.8,.2,1), border-color .25s ease, box-shadow .25s ease, background .25s ease;
  padding: 8px;
}
.hpo-node::before {
  content: '';
  position: absolute;
  inset: -7px;
  border: 1px solid var(--hpo-plan-accent);
  border-radius: 50%;
  opacity: 0;
  transform: scale(.92);
  transition: transform .32s ease, opacity .32s ease;
}
.hpo-node:hover .hpo-node-body, .hpo-node:focus-visible .hpo-node-body { transform: scale(1.08); border-color: var(--hpo-plan-accent); }
.hpo-node:focus-visible { outline: none; }
.hpo-node:focus-visible::before { opacity: 1; border-width: 3px; }
.hpo-node.is-active::before { opacity: .46; transform: scale(1); animation: hpo-node-aura 2.8s ease-in-out infinite; }
.hpo-node.is-active .hpo-node-body { border-color: var(--hpo-plan-accent); box-shadow: 0 0 0 4px rgba(255,255,255,.025), 0 0 30px color-mix(in srgb, var(--hpo-plan-accent) 20%, transparent), inset 0 0 23px rgba(52,73,115,.22); }
.hpo-node.is-active .hpo-node-icon { color: var(--hpo-icon-active-color, var(--hpo-plan-accent)); }
.hpo-widget.hpo-icon-matches-accent .hpo-node.is-active .hpo-node-icon { color: var(--hpo-plan-icon-accent, var(--hpo-plan-accent)); }
.hpo-node-icon { color: var(--hpo-icon-color); display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-bottom: 4px; font-size: 23px; transition: transform .4s ease, color .25s ease; }
.hpo-node-icon svg { width: 24px; height: 24px; fill: currentColor; }
.hpo-node-icon i { font-size: inherit; line-height: 1; }
.hpo-node-label { width: 100%; font-size: 13px; font-weight: 800; line-height: 1.5; color: var(--hpo-text); overflow-wrap: anywhere; }
.hpo-widget:not(.hpo-no-float):not(.hpo-still) .hpo-node-icon { animation: hpo-float 3.1s ease-in-out var(--hpo-float-delay, 0s) infinite; }

.hpo-details { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; width: 100%; max-width: var(--hpo-details-max); height: var(--hpo-detail-height, var(--hpo-detail-resolved-height, auto)); min-height: 0; margin: 0 auto; padding: 0; text-align: right; direction: rtl; }
.hpo-detail-panel { grid-area: 1 / 1; min-width: 0; width: 100%; height: 100%; min-height:0; display: flex; flex-direction: column; justify-content: var(--hpo-detail-content-justify,flex-start); align-items: var(--hpo-detail-content-items,stretch); gap: 0; background: var(--hpo-detail-bg); border: 1px solid var(--hpo-detail-border); box-shadow: 0 12px 30px rgba(0,0,0,.09); border-radius: var(--hpo-detail-radius); padding: 17px 22px 19px; overflow-x:hidden; overflow-y:auto; scrollbar-width:thin; align-self: stretch; box-sizing:border-box; }
/* Nonselected panels can be measured but never stretch the selected card. */
.hpo-widget .hpo-detail-panel[hidden] { position: absolute !important; inset: 0 0 auto 0; height:auto !important; width:100%; visibility:hidden !important; pointer-events:none !important; opacity:0 !important; }
.hpo-detail-title, .hpo-detail-desc, .hpo-features { width: 100%; max-width: 100%; }
.hpo-detail-title { display: flex; align-items: center; justify-content: var(--hpo-detail-title-align,right); text-align: var(--hpo-detail-title-align,right); padding-bottom: 12px; border-bottom: 1px solid rgba(139,159,200,.15); color: var(--hpo-text); font-size: 14px; line-height: 1.6; cursor: default; }
.hpo-detail-title-inner { display:inline-flex; align-items:center; gap:var(--hpo-detail-title-icon-gap,10px); transform:translateX(var(--hpo-detail-title-offset-x,0px)); transition:transform .2s ease; max-width:100%; }
.hpo-detail-title-text { display: inline-block; }
.hpo-detail-spark { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: var(--hpo-current-accent); }
.hpo-detail-ufo { position: relative; display: inline-flex; align-items: center; justify-content: center; width: calc(var(--hpo-detail-ufo-size) * 1.9); height: calc(var(--hpo-detail-ufo-size) * 1.18); color: var(--hpo-detail-ufo-color,#f6faff); pointer-events:none; transform:translate3d(var(--hpo-detail-ufo-shift-x),calc(var(--hpo-detail-ufo-shift-y) + var(--hpo-detail-ufo-offset-y)),0) rotateZ(var(--hpo-detail-ufo-rotate)) scale(var(--hpo-detail-ufo-scale)); transform-origin:50% 52%; transition:transform .17s cubic-bezier(.2,.8,.2,1); }
.hpo-detail-ufo::before { content:''; position:absolute; inset:-15%; border-radius:50%; background:radial-gradient(ellipse,var(--hpo-current-accent) 0%,transparent 68%); filter:blur(7px); opacity:var(--hpo-detail-ufo-glow-opacity,50%); pointer-events:none; z-index:0; }
.hpo-detail-ufo svg { display:block; position:relative; width:100%; height:100%; overflow:visible; z-index:1; }
.hpo-detail-panel.is-ufo-hover .hpo-detail-ufo { --hpo-detail-ufo-scale:1.04; }
.hpo-detail-panel.is-ufo-hover .hpo-detail-ufo svg { animation:hpo-ufo-saucer-wobble .9s ease-in-out infinite alternate; transform-origin:50% 50%; }
@keyframes hpo-ufo-saucer-wobble { 0% { transform:rotate(-5deg) scaleX(.95); } 50% { transform:rotate(0deg) scaleX(1); } 100% { transform:rotate(7deg) scaleX(.92); } }
.hpo-detail-desc { display: none; margin: 10px 0 0; color: var(--hpo-muted); font-size: 12px; line-height: 1.8; }
.hpo-features { padding: 14px 0 0; margin: 0; list-style: none; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 18px; row-gap: 11px; align-items: start; grid-auto-rows: minmax(26px, auto); }
.hpo-feature { display: grid; grid-template-columns: 22px minmax(0,1fr); align-items: center; justify-content: stretch; text-align: var(--hpo-detail-features-align, right); gap: 9px; min-width:0; min-height: 24px; color: var(--hpo-muted); font-size: 12px; line-height: 1.65; margin: 0; }
.hpo-feature-icon { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--hpo-feature-icon-bg); color: var(--hpo-feature-icon-color, var(--hpo-current-accent)); font-size: 12px; margin-top: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.03); }
.hpo-feature-icon svg { width: 12px; height: 12px; fill: currentColor; }
.hpo-feature-icon i { font-size: 12px; line-height: 1; }
.hpo-feature > span:last-child { display:flex; align-items:center; justify-content:var(--hpo-detail-features-align,right); text-align:var(--hpo-detail-features-align,right); min-width:0; min-height:22px; }
/* All decorative silhouettes are genuinely curved: no angled polygon corners. */

/* v1.9.4 callouts: a single SVG per plan, and reserved space around the
   unchanged square stage. Full-width SVG per feature was unnecessarily costly. */
.hpo-widget.hpo-features-mode-callouts {
  container-type: inline-size;
  container-name: hpo-widget;
  --hpo-callout-max-count: 5;
  --hpo-callout-room-top: 155px;
  --hpo-callout-room-bottom: 185px;
}
.hpo-widget.hpo-features-mode-callouts .hpo-stage {
  margin-top: var(--hpo-callout-room-top) !important;
  margin-bottom: var(--hpo-callout-room-bottom) !important;
}
.hpo-callouts-layers { position:absolute; inset:0; z-index:3; pointer-events:none; }
.hpo-callout-panel {
  position:absolute; inset:0; display:block;
  width:100%; height:100%; pointer-events:none;
}
.hpo-widget .hpo-callout-panel[hidden] { display:none !important; }
.hpo-callout-panel.is-active { z-index:2; }
.hpo-callout-lines {
  position:absolute; inset:0; display:block; width:100%; height:100%;
  overflow:visible; pointer-events:none;
}
.hpo-callout-lines polyline {
  fill:none;
  stroke:color-mix(in srgb, var(--hpo-current-accent) 75%, #fff 10%);
  stroke-width:1.3;
  stroke-linecap:round; stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  opacity:.85;
}
.hpo-callout-lines circle {
  fill:var(--hpo-bg); stroke:var(--hpo-current-accent);
  stroke-width:1.2; vector-effect:non-scaling-stroke;
}
.hpo-callout-link { position:absolute; inset:0; pointer-events:none; }
.hpo-callout-item {
  position:absolute; z-index:2; display:inline-block;
  max-width:265px; min-width:0; transform:translate(0,-50%);
}
.hpo-callout-item.side-left { transform:translate(-100%,-50%); }
/* Gap beyond the SVG endpoint is pure CSS, so Elementor slider updates do
   not trigger geometry measurements or animate the stage layout. */
.hpo-widget.hpo-features-mode-callouts .hpo-callout-item.side-right {
  transform:translate(var(--hpo-callout-text-gap,10px),-50%);
}
.hpo-widget.hpo-features-mode-callouts .hpo-callout-item.side-left {
  transform:translate(calc(-100% - var(--hpo-callout-text-gap,10px)),-50%);
}

.hpo-callout-chip {
  display:inline-flex; align-items:center; justify-content:flex-start;
  gap:7px; width:max-content; max-width:265px;
  direction:rtl; text-align:right; unicode-bidi:plaintext;
  font-size:11px; line-height:1.5; color:var(--hpo-text);
  text-shadow:0 1px 8px rgba(0,0,0,.28);
}
.hpo-callout-item.side-left .hpo-callout-chip { flex-direction:row-reverse; text-align:left; }
.hpo-callout-icon {
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; flex:0 0 22px; border-radius:7px;
  color:var(--hpo-current-accent);
  background:color-mix(in srgb,var(--hpo-current-accent) 12%,var(--hpo-bg));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--hpo-current-accent) 30%,transparent);
}
.hpo-callout-icon svg { width:12px; height:12px; fill:currentColor; }
.hpo-callout-icon i { font-size:12px; line-height:1; }
.hpo-callout-text { min-width:0; white-space:normal; overflow-wrap:normal; }
/* Keep one-line labels in roomy columns; let narrow responsive lists wrap naturally. */
.hpo-widget.hpo-features-mode-callouts .hpo-callout-item { direction:rtl; }
@media (prefers-reduced-motion:reduce) {
  .hpo-callout-lines polyline, .hpo-callout-lines circle, .hpo-callout-chip { animation:none !important; }
}
/* A column this narrow cannot fit radial annotations beside a 600px stage.
   Show a clean list beneath the unchanged orbit instead of clipping anything. */
@container hpo-widget (max-width: 920px) {
  .hpo-widget.hpo-features-mode-callouts .hpo-stage {
    margin-top: 8px !important;
    margin-bottom: calc(42px + var(--hpo-callout-max-count) * 26px) !important;
  }
  .hpo-callouts-layers { inset:auto 0 auto 0; top:calc(100% + 22px); height:auto; }
  .hpo-callout-panel { position:static; width:100%; height:auto; }
  .hpo-callout-lines { display:none; }
  .hpo-callout-panel.is-active { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 12px; }
  .hpo-callout-link { position:static; min-width:0; }
  .hpo-callout-item, .hpo-callout-item.side-left {
    position:static; transform:none; max-width:100%; width:100%;
  }
  .hpo-callout-text { white-space:normal; overflow-wrap:anywhere; }
  .hpo-callout-chip, .hpo-callout-item.side-left .hpo-callout-chip {
    display:flex; flex-direction:row; width:100%; max-width:100%;
    text-align:right; font-size:11px;
  }
}
@container hpo-widget (max-width: 490px) {
  .hpo-callout-panel.is-active { grid-template-columns:minmax(0,1fr); gap:11px; }
  .hpo-callout-chip, .hpo-callout-item.side-left .hpo-callout-chip {
    font-size:11px; max-width:100%;
  }
  .hpo-widget.hpo-features-mode-callouts .hpo-stage {
    margin-bottom:calc(44px + var(--hpo-callout-max-count) * 42px) !important;
  }
}
.hpo-widget.hpo-detail-shape-pill .hpo-detail-panel { border-radius: 999px; }
.hpo-widget.hpo-detail-shape-pebble .hpo-detail-panel { border-radius: 36% 19% 31% 17% / 47% 28% 51% 32%; }
.hpo-widget.hpo-detail-shape-cloud .hpo-detail-panel { border-radius: 27% 42% 30% 46% / 38% 52% 36% 49%; }
.hpo-widget.hpo-detail-shape-blob .hpo-detail-panel { border-radius: 38% 22% 46% 18% / 51% 35% 42% 27%; }
.hpo-widget.hpo-detail-shape-wave .hpo-detail-panel { border-radius: 16% 44% 18% 44% / 60% 26% 55% 30%; }
.hpo-widget.hpo-detail-shape-petal .hpo-detail-panel { border-radius: 48% 12% 44% 11% / 68% 21% 64% 18%; }
.hpo-widget.hpo-detail-shape-droplet .hpo-detail-panel { border-radius: 48% 12% 42% 10% / 65% 20% 55% 14%; }
/* Keep content away from deeper organic edges. */
.hpo-widget.hpo-detail-shape-pebble .hpo-detail-panel,
.hpo-widget.hpo-detail-shape-cloud .hpo-detail-panel,
.hpo-widget.hpo-detail-shape-blob .hpo-detail-panel,
.hpo-widget.hpo-detail-shape-wave .hpo-detail-panel,
.hpo-widget.hpo-detail-shape-petal .hpo-detail-panel,
.hpo-widget.hpo-detail-shape-droplet .hpo-detail-panel { padding-inline: max(34px, 12%); }
.hpo-widget.hpo-detail-shape-pill .hpo-detail-panel { padding-inline: max(34px, 12%); }
.hpo-note { text-align: center; font-size: 11px; font-weight: 500; color: var(--hpo-muted); margin: 18px 0 0; }
/* Slide/panel entrance and exit are animated by the cancellable JS timeline. */
.hpo-still .hpo-orbit-runner, .hpo-still .hpo-node::before, .hpo-still .hpo-node-icon { animation: none !important; }

@keyframes hpo-orbit-spin { from {transform:rotate(0deg)} to {transform:rotate(360deg)} }
@keyframes hpo-node-aura { 0%,100% { opacity:.25; transform:scale(.98); } 50% {opacity:.63; transform:scale(1.06);} }
@keyframes hpo-float { 0%,100% {transform:translateY(0)} 50% {transform:translateY(-4px)} }
@keyframes hpo-reveal { from {opacity:0;transform:translateY(8px) scale(.98)} to {opacity:1;transform:translateY(0) scale(1)} }
@keyframes hpo-node-pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }
@keyframes hpo-node-bounce { 0% { transform: translate(-50%, -50%); } 35% { transform: translate(-50%, calc(-50% - 8px)); } 100% { transform: translate(-50%, -50%); } }
@keyframes hpo-node-wiggle { 0%,100% { transform: translate(-50%, -50%) rotate(0deg); } 25% { transform: translate(-50%, -50%) rotate(-5deg); } 75% { transform: translate(-50%, -50%) rotate(5deg); } }
@keyframes hpo-shockwave { 0% { opacity: .8; transform: scale(.88); } 100% { opacity: 0; transform: scale(1.22); } }
@keyframes hpo-ufo-idle { 0%,100% { opacity: 1; } 50% { opacity: .98; } }


@container (max-width: 550px) {
  .hpo-center { padding: 13px 15px; }
  .hpo-heading { font-size: 22px; }
  .hpo-minitag { margin-top: var(--hpo-gap-heading-tag); }
  .hpo-plan-name { font-size: 22px; margin-top: var(--hpo-gap-tag-name); }
  .hpo-plan-desc { margin-top: var(--hpo-gap-name-desc); margin-bottom: var(--hpo-gap-desc-price); font-size: 11px; line-height: 1.5; }
  .hpo-price { font-size: 23px; }
  .hpo-cta { padding: 7px 12px; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .hpo-widget { --hpo-star-main-size: 7px; --hpo-star-secondary-size: 4px; --hpo-star-third-size: 3px; --hpo-star-fixed-size: 2.5px; }
}
@media (max-width: 767px) {
  .hpo-widget { --hpo-gap-eyebrow-heading:0px; --hpo-gap-heading-tag:4px; --hpo-gap-tag-name:3px; --hpo-gap-name-desc:4px; --hpo-gap-desc-price:7px; --hpo-gap-price-period:0px; --hpo-gap-price-cta:7px; --hpo-size: 350px; --hpo-node-size: 70px; --hpo-center-size:54%; --hpo-orbit-radius:43%; --hpo-center-content-width: 88%; --hpo-stage-gap: 46px; --hpo-outer-orbit-inset: 3%; --hpo-middle-orbit-inset: 14%; padding: 24px 6px 23px; border-radius: 23px; }
  .hpo-widget.hpo-safe-geometry { --hpo-center-cap: 54%; --hpo-min-radius: 43%; }
  .hpo-stage { width: min(calc(100% - 30px), var(--hpo-size)); }
  .hpo-center { padding: 16px 15px; }
  .hpo-eyebrow { display: none; }
  .hpo-heading { font-size: 16px; margin: var(--hpo-gap-eyebrow-heading) auto 2px; }
  .hpo-heading::after { display: none; }
  .hpo-minitag { display: inline-flex; margin-top: var(--hpo-gap-heading-tag); padding-inline: 8px; font-size: 9px; }
  .hpo-plan-name { font-size: 19px; margin-top: var(--hpo-gap-tag-name); }
  .hpo-plan-desc { display: none; }
  .hpo-price-wrap { margin-bottom: var(--hpo-gap-price-cta); }
  .hpo-price { font-size: 19px; }
  .hpo-period { font-size: 9px; }
  .hpo-cta { font-size: 10px; padding: 6px 10px; gap: 6px; }
  .hpo-cta span { font-size: 13px; }
  .hpo-node-body { padding: 5px; border-width: 1.5px; }
  .hpo-node-icon { font-size: 16px; width: 21px; height: 21px; margin-bottom: 2px; }
  .hpo-node-icon svg { width: 17px; height: 17px; }
  .hpo-node-label { font-size: 10px; line-height: 1.4; }
  .hpo-detail-panel { padding: 13px 14px; border-radius: 14px; }
  .hpo-detail-title { gap: 8px; }
  .hpo-features { padding-top: 11px; gap: 9px; }
  .hpo-feature { font-size: 11px; gap: 6px; min-height: 20px; grid-template-columns: 17px minmax(0,1fr); }
  .hpo-detail-desc { display: block; font-size: 11px; }
  .hpo-feature-icon { flex-basis: 17px; width: 17px; height: 17px; font-size: 10px; }
  .hpo-feature-icon svg { width: 10px; height: 10px; }
  .hpo-feature-icon i { font-size: 10px; }
  .hpo-note { padding-inline: 12px; font-size: 10px; }
  .hpo-widget { --hpo-star-main-size: 6px; --hpo-star-secondary-size: 4px; --hpo-star-third-size: 3px; --hpo-star-fixed-size: 2px; }
}

@media (max-width: 420px) {
  .hpo-widget { --hpo-size: 325px; --hpo-node-size: 67px; }
  .hpo-features { grid-template-columns: 1fr; row-gap: 8px; }

}
@media (max-width: 355px) {
  .hpo-widget { --hpo-size: 290px; --hpo-node-size: 60px; }
  .hpo-center { padding: 11px; }
  .hpo-heading { font-size: 14px; }
  .hpo-plan-name { font-size: 17px; }
  .hpo-plan-desc { max-width: 100%; font-size: 10px; line-height: 1.65; margin: var(--hpo-gap-name-desc) 0 var(--hpo-gap-desc-price); }
  .hpo-price { font-size: 18px; }
  .hpo-node-icon { font-size: 15px; }
  .hpo-node-label { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .hpo-widget *, .hpo-widget *::before, .hpo-widget *::after { animation: none !important; transition-duration: .01ms !important; }
}

/* Only the selected item is ever visible; inactive items remain in the sizing grid
   so that switching plans never changes the widget's height or position. */
.hpo-center-slide, .hpo-detail-panel { backface-visibility: hidden; }
.hpo-center-slide.is-active, .hpo-detail-panel.is-active { z-index: 2; }
.hpo-widget .hpo-center-slide[hidden], .hpo-widget .hpo-detail-panel[hidden] { visibility: hidden !important; pointer-events: none !important; }
.hpo-fx-scan, .hpo-fx-ring { position: absolute; z-index: 5; pointer-events: none; opacity: 0; will-change: auto; }
.hpo-fx-scan { left: 0; top: 47%; width: 100%; height: 12%; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--hpo-current-accent) 30%, transparent) 44%, color-mix(in srgb, var(--hpo-current-accent) 75%, transparent) 50%, transparent 100%); filter: drop-shadow(0 0 13px var(--hpo-current-accent)); }
.hpo-fx-ring { inset: 5%; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--hpo-current-accent) 80%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--hpo-current-accent) 40%, transparent), inset 0 0 18px color-mix(in srgb, var(--hpo-current-accent) 25%, transparent); }
/* Optional selection effects: explicitly controlled by the Elementor node-effect select. */
.hpo-widget[data-node-effect="pulse"] .hpo-node.is-activated .hpo-node-body { animation: hpo-node-pulse .62s cubic-bezier(.17,.85,.24,1) both; }
.hpo-widget[data-node-effect="bounce"] .hpo-node.is-activated .hpo-node-body { animation: hpo-node-bounce-body .62s cubic-bezier(.2,.8,.2,1) both; }
.hpo-widget[data-node-effect="wiggle"] .hpo-node.is-activated .hpo-node-body { animation: hpo-node-wiggle-body .62s ease-in-out both; }
.hpo-widget[data-node-effect="shockwave"] .hpo-node.is-activated::before { animation: hpo-shockwave .72s ease-out both; }
.hpo-widget .hpo-node.is-activated[data-hpo-electric]::before { border-color: var(--hpo-plan-accent); box-shadow: 0 0 12px 3px var(--hpo-plan-accent), 0 0 36px 8px color-mix(in srgb, var(--hpo-plan-accent) 45%, transparent); animation: hpo-electric-flash .6s ease-out 1 both; }
@keyframes hpo-electric-flash { 0%,100% { opacity: 0; transform:scale(.9); } 22% { opacity:1; transform:scale(1.2); } 37% {opacity:.18;} 55% {opacity:.9; transform:scale(1.04);} 85% {opacity:.16;} }
@media (prefers-reduced-motion: reduce) {
  .hpo-widget .hpo-node, .hpo-widget .hpo-node-body,
  .hpo-widget .hpo-orbit-runner, .hpo-widget .hpo-node-icon,
  .hpo-widget .hpo-node::before { animation: none !important; transition: none !important; }
}

.hpo-widget .hpo-center-slide, .hpo-widget .hpo-detail-panel { transition: none !important; }

/* Responsive-only content fitting. The desktop circle retains its original
   display tree; in mobile/tablet the inner stack can scale without cropping. */
.hpo-center-fit { display: contents; }
@media (max-width: 1024px) {
  .hpo-center-fit {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    transform: scale(var(--hpo-fit-scale, 1));
    transform-origin: center center;
  }
}


/* v1.4.2 — MOBILE SELECTOR CONTENT ONLY.
   Keep the existing orbit geometry, central content and tablet/desktop untouched.
   cqw responds to the actual orbit diameter even in the Elementor mobile editor. */
@media (max-width: 767px) {
  .hpo-widget .hpo-node .hpo-node-body {
    padding: 3px;
    gap: 1px;
  }
  .hpo-widget .hpo-node .hpo-node-icon {
    flex: 0 0 auto;
    width: clamp(13px, 4.6cqw, 16px);
    height: clamp(13px, 4.6cqw, 16px);
    margin-bottom: 0;
    font-size: clamp(12px, 4.2cqw, 15px);
  }
  .hpo-widget .hpo-node .hpo-node-icon svg {
    width: clamp(11px, 3.9cqw, 14px);
    height: clamp(11px, 3.9cqw, 14px);
  }
  .hpo-widget .hpo-node .hpo-node-icon i { font-size: inherit; }
  .hpo-widget .hpo-node .hpo-node-label {
    min-width: 0;
    width: auto;
    max-width: 100%;
    font-size: clamp(8px, 2.7cqw, 9.5px);
    line-height: 1.15;
    letter-spacing: -.1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Reduce the floating icon travel from 4px to 1px on phones only. */
  .hpo-widget:not(.hpo-no-float):not(.hpo-still) .hpo-node-icon {
    animation-name: hpo-node-mobile-float;
  }
}
@keyframes hpo-node-mobile-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1px); }
}

/* v1.5.0 — optional responsive sizing. Unset controls retain the v1.4.2 dimensions. */
@media (max-width: 767px) {
  .hpo-widget .hpo-center {
    width: min(var(--hpo-mobile-circle-size, min(var(--hpo-center-size), var(--hpo-center-cap, 100%))), calc(2 * var(--hpo-radius-effective) - min(var(--hpo-node-size), 21cqw) - 14px));
    height: min(var(--hpo-mobile-circle-size, min(var(--hpo-center-size), var(--hpo-center-cap, 100%))), calc(2 * var(--hpo-radius-effective) - min(var(--hpo-node-size), 21cqw) - 14px));
  }
  .hpo-widget .hpo-cta { justify-self: center; flex-shrink: 0; }
}
/* All new pointer interactions are opt-in and cannot displace a clickable button. */
@media (hover: hover) and (pointer: fine) {
  .hpo-widget[data-hpo-hover-effect="magnet"] .hpo-node:hover .hpo-node-body {
    transform: perspective(450px) rotateX(var(--hpo-tilt-y, 0deg)) rotateY(var(--hpo-tilt-x, 0deg)) scale(1.09);
    box-shadow: 0 0 28px color-mix(in srgb, var(--hpo-plan-accent) 35%, transparent), inset 0 0 25px rgba(255,255,255,.05);
  }
  .hpo-widget[data-hpo-hover-effect="aura"] .hpo-node:hover .hpo-node-body {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--hpo-plan-accent) 20%, transparent), 0 0 35px 9px color-mix(in srgb, var(--hpo-plan-accent) 28%, transparent);
    filter: brightness(1.12);
  }
  .hpo-widget[data-hpo-hover-effect="prism"] .hpo-node:hover .hpo-node-body { box-shadow: 0 0 32px 6px color-mix(in srgb, var(--hpo-plan-accent) 30%, transparent); }
  .hpo-widget[data-hpo-hover-effect="prism"] .hpo-node:hover .hpo-node-icon { animation: hpo-prism-icon 1.05s ease-in-out infinite alternate !important; }
  .hpo-widget[data-hpo-hover-effect="prism"] .hpo-node:hover::after {
    content: ''; position: absolute; inset: -7px; border-radius: 50%; pointer-events: none;
    border: 2px dotted var(--hpo-plan-accent); filter: drop-shadow(0 0 7px var(--hpo-plan-accent));
    animation: hpo-prism-ring 2.8s linear infinite;
  }
  .hpo-widget[data-hpo-playful="juke"] .hpo-node.is-teasing .hpo-node-body {
    animation: hpo-play-juke .7s cubic-bezier(.16,.84,.19,1) both;
    transform-origin: center;
  }
  .hpo-widget[data-hpo-playful="jitter"] .hpo-node.is-teasing .hpo-node-body {
    animation: hpo-play-jitter .66s cubic-bezier(.16,.84,.21,1) both;
    transform-origin: center;
  }
  .hpo-widget[data-hpo-playful="jitter"] .hpo-node.is-teasing::after {
    content:''; position:absolute; inset:-8px; border-radius:50%; border:1px dashed var(--hpo-plan-accent);
    box-shadow:0 0 15px color-mix(in srgb, var(--hpo-plan-accent) 45%, transparent); pointer-events:none;
    animation:hpo-play-spark .62s ease-out both;
  }
}
@keyframes hpo-prism-icon { to { transform: translateY(-2px) rotate(9deg) scale(1.15); } }
@keyframes hpo-prism-ring { to { transform: rotate(360deg); } }
@keyframes hpo-play-juke {
  0%{ transform: translate3d(0,0,0) rotate(0) scale(1.08); }
  24%{ transform: translate3d(4px,-3px,0) rotate(5deg) scale(1.07); }
  55%{ transform: translate3d(-4px,2px,0) rotate(-4deg) scale(1.07); }
  78%{ transform: translate3d(1px,-1px,0) rotate(1deg) scale(1.08); }
  100%{ transform: translate3d(0,0,0) rotate(0) scale(1.08); }
}
@keyframes hpo-play-jitter {
  0%{ transform: translate3d(0,0,0) rotate(0) scale(1.08); }
  23%{ transform: translate3d(2px,-2px,0) rotate(3deg) scale(1.13); }
  48%{ transform: translate3d(-3px,1px,0) rotate(-3deg) scale(1.06); }
  73%{ transform: translate3d(2px,-1px,0) rotate(2deg) scale(1.1); }
  100%{ transform: translate3d(0,0,0) rotate(0) scale(1.08); }
}
@keyframes hpo-play-spark { 0%{opacity:0;transform:scale(.83)} 30%{opacity:.7} 100%{opacity:0;transform:scale(1.17)} }
@media (prefers-reduced-motion: reduce) {
  .hpo-widget .hpo-node:hover .hpo-node-body { animation: none !important; }
  .hpo-widget .hpo-node.is-teasing .hpo-node-body,
  .hpo-widget .hpo-node:hover .hpo-node-icon,
  .hpo-widget .hpo-node:hover::after { animation: none !important; }
}

/* v1.5.1: node selection animations animate the full visible circle, not the button's orbit position. */
@keyframes hpo-node-bounce-body {
  0%,100% { transform: scale(1); }
  38% { transform: translate3d(0,-5px,0) scale(1.08); }
  72% { transform: translate3d(0,1px,0) scale(.99); }
}
@keyframes hpo-node-wiggle-body {
  0%,100% { transform: rotate(0) scale(1); }
  22% { transform: rotate(-5deg) scale(1.045); }
  51% { transform: rotate(4deg) scale(1.055); }
  76% { transform: rotate(-2deg) scale(1.02); }
}
/* v1.5.2: phone-only physical control of the whole CTA including font/icon. */
@media (max-width: 767px) {
  .hpo-widget .hpo-cta {
    zoom: var(--hpo-cta-mobile-scale, 100%);
    padding: var(--hpo-cta-mobile-pad-y, 6px) var(--hpo-cta-mobile-pad-x, 10px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hpo-widget .hpo-orbit-runner-two, .hpo-widget .hpo-orbit-runner-three,
  .hpo-widget .hpo-comet, .hpo-widget .hpo-comet-burst,
  .hpo-widget .hpo-comet-burst i { animation:none !important; transition:none !important; opacity:0 !important; }
}
.hpo-widget.hpo-still .hpo-orbit-runner-two, .hpo-widget.hpo-still .hpo-orbit-runner-three { animation:none !important; }

/* v1.6.3: a colliding tiny star is consumed for good. */
.hpo-star.hpo-star-consumed { opacity: 0 !important; transition: opacity .12s ease-out; }
/* Keep the rotating dot layers on the compositor during plan changes and page zoom. */
.hpo-widget:not(.hpo-still) .hpo-orbit-runner { will-change: transform; backface-visibility: hidden; }
@media (max-width: 767px), (pointer: coarse) {
  /* Mobile gets an economical glow without changing node sizes or positions. */
  .hpo-widget .hpo-orbit-runner::after { box-shadow: 0 0 0 2px color-mix(in srgb, var(--hpo-current-accent) 10%, transparent), 0 0 9px 2px color-mix(in srgb, var(--hpo-current-accent) 35%, transparent); }
  .hpo-widget .hpo-orbit-runner-two::after { box-shadow: 0 0 7px 1px rgba(145,172,255,.4); }
  .hpo-widget .hpo-orbit-runner-three::after { box-shadow: 0 0 6px 1px rgba(236,188,255,.4); }
}

/* On coarse-pointer devices reserve animation bandwidth for the orbiting lights. */
@media (pointer: coarse) {
  .hpo-widget .hpo-node.is-active::before { animation: none !important; opacity: .35; }
  .hpo-widget:not(.hpo-no-float):not(.hpo-still) .hpo-node-icon { animation: none !important; }
}

@media (max-width:767px) {
  .hpo-widget.hpo-detail-shape-pill .hpo-detail-panel { border-radius: 72px / 38px; }
  .hpo-widget.hpo-detail-shape-pebble .hpo-detail-panel { border-radius: 53px 27px 60px 34px / 35px 52px 37px 45px; }
  .hpo-widget.hpo-detail-shape-cloud .hpo-detail-panel { border-radius: 53px 60px 36px 64px / 30px 41px 35px 49px; }
  .hpo-widget.hpo-detail-shape-blob .hpo-detail-panel { border-radius: 66px 31px 63px 24px / 42px 26px 55px 32px; }
  .hpo-widget.hpo-detail-shape-wave .hpo-detail-panel { border-radius: 35px 70px 33px 62px / 48px 30px 47px 34px; }
  .hpo-widget.hpo-detail-shape-petal .hpo-detail-panel { border-radius: 74px 28px 59px 18px / 62px 30px 50px 22px; }
  .hpo-widget.hpo-detail-shape-droplet .hpo-detail-panel { border-radius: 75px 24px 59px 19px / 53px 25px 55px 24px; }
  .hpo-widget.hpo-detail-shape-pill .hpo-detail-panel,
  .hpo-widget.hpo-detail-shape-pebble .hpo-detail-panel,
  .hpo-widget.hpo-detail-shape-cloud .hpo-detail-panel,
  .hpo-widget.hpo-detail-shape-blob .hpo-detail-panel,
  .hpo-widget.hpo-detail-shape-wave .hpo-detail-panel,
  .hpo-widget.hpo-detail-shape-petal .hpo-detail-panel,
  .hpo-widget.hpo-detail-shape-droplet .hpo-detail-panel { padding-inline:max(24px,12%); }
}
@media (prefers-reduced-motion:reduce) { .hpo-detail-ufo, .hpo-detail-ufo svg { animation:none !important; transition:none !important; } }

/* v1.9.9 – soft UFO tractor beam, not a blinking LED. The active plan
   already provides --hpo-current-accent, so the beam changes color for free. */
.hpo-ufo-lamp { pointer-events:none; opacity:var(--hpo-ufo-beam-opacity,55%); }
.hpo-ufo-beam-glow { fill:var(--hpo-current-accent); opacity:.30; filter:blur(1.3px); }
.hpo-ufo-beam-core { fill:color-mix(in srgb, var(--hpo-current-accent) 58%, #ffffff); opacity:.66; }
.hpo-ufo-beam-mouth { fill:color-mix(in srgb, var(--hpo-current-accent) 72%, white); opacity:.86; }
.hpo-ufo-beam-ground { fill:var(--hpo-current-accent); opacity:.24; filter:blur(3.2px); }
.hpo-widget.hpo-ufo-lamp-off .hpo-ufo-lamp { display:none; }
/* Editing keeps the visual layout, but avoids perpetual decorative animation work. */
.hpo-widget.hpo-editor-preview .hpo-orbit-runner,
.hpo-widget.hpo-editor-preview .hpo-node-icon,
.hpo-widget.hpo-editor-preview .hpo-node::before { animation:none !important; }

/* v1.9.7 — below 768px return to the editable classic features + UFO.
   Hidden plan cards still participate in the grid's intrinsic max height,
   so the frame never changes size while changing plans. */
.hpo-widget.hpo-features-mode-callouts .hpo-mobile-details { display:none; }
@media (max-width:767px) {
  .hpo-widget.hpo-features-mode-callouts .hpo-callouts-layers { display:none !important; }
  .hpo-widget.hpo-features-mode-callouts .hpo-stage {
    margin-top:8px !important;
    margin-bottom:clamp(25px, var(--hpo-stage-gap), 52px) !important;
  }
  .hpo-widget.hpo-features-mode-callouts .hpo-mobile-details {
    display:grid !important;
    grid-template-columns:minmax(0,1fr);
    width:min(100%,var(--hpo-details-max));
    max-width:100%;
    height:auto !important;
    margin:0 auto 14px;
    padding:0;
  }
  .hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-detail-panel {
    position:relative !important;
    grid-area:1/1;
    align-self:stretch;
    height:auto !important;
    min-height:0;
    overflow:visible;
    box-sizing:border-box;
  }
  .hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-detail-panel[hidden] {
    position:relative !important;
    inset:auto !important;
    display:flex !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
    height:auto !important;
  }
  .hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-detail-panel.is-active {
    visibility:visible !important;
    opacity:1 !important;
  }
  .hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-detail-panel .hpo-detail-title,
  .hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-detail-panel .hpo-features {
    max-width:100%;
  }
}


/* 1.9.7: Elementor columns can be narrower than the viewport. Fit the central
   text in the real widget width, not only at a phone/tablet media breakpoint. */
@container hpo-widget (max-width:680px) {
  .hpo-center-fit {
    display:flex; flex:0 0 auto; flex-direction:column;
    align-items:center; justify-content:center; width:100%; max-width:100%;
    transform:scale(var(--hpo-fit-scale,1)); transform-origin:center center;
  }
}
/* In very narrow desktop/tablet columns, the mobile features/UFO card replaces
   the callouts. The visual stays fixed while switching plan content. */
@container hpo-widget (max-width:540px) {
  .hpo-widget.hpo-features-mode-callouts .hpo-callouts-layers { display:none !important; }
  .hpo-widget.hpo-features-mode-callouts .hpo-stage {
    margin-top:8px !important; margin-bottom:clamp(25px,var(--hpo-stage-gap),52px) !important;
  }
  .hpo-widget.hpo-features-mode-callouts .hpo-mobile-details {
    display:grid !important; grid-template-columns:minmax(0,1fr); width:min(100%,var(--hpo-details-max));
    max-width:100%; height:auto !important; margin:0 auto 14px; padding:0;
  }
  .hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-detail-panel {
    position:relative !important; grid-area:1/1; align-self:stretch;
    height:auto !important; min-height:0; overflow:visible; box-sizing:border-box;
  }
  .hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-detail-panel[hidden] {
    position:relative !important; inset:auto !important; display:flex !important;
    visibility:hidden !important; opacity:0 !important; pointer-events:none !important;
    height:auto !important;
  }
  .hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-detail-panel.is-active {
    visibility:visible !important; opacity:1 !important;
  }
  .hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-detail-panel .hpo-detail-title,
  .hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-detail-panel .hpo-features { max-width:100%; }
  .hpo-widget .hpo-node .hpo-node-body { padding:3px; gap:1px; }
  .hpo-widget .hpo-node .hpo-node-icon {
    flex:0 0 auto; width:clamp(13px,4.6cqw,16px); height:clamp(13px,4.6cqw,16px);
    margin-bottom:0; font-size:clamp(12px,4.2cqw,15px);
  }
  .hpo-widget .hpo-node .hpo-node-icon svg { width:clamp(11px,3.9cqw,14px); height:clamp(11px,3.9cqw,14px); }
  .hpo-widget .hpo-node .hpo-node-label {
    min-width:0; width:auto; max-width:100%; font-size:clamp(8px,2.7cqw,9.5px);
    line-height:1.15; letter-spacing:-.1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
}

/* Narrow desktop columns use readable phone-sized typography, even when the
   physical viewport is wide (Elementor editor/sidebar split). */
@container hpo-widget (max-width:540px) {
  .hpo-widget.hpo-features-mode-callouts .hpo-stage {
    width:min(calc(100% - 24px),var(--hpo-size));
  }
  .hpo-center { padding:14px 12px; }
  .hpo-eyebrow { display:none; }
  .hpo-heading { font-size:16px; margin:var(--hpo-gap-eyebrow-heading) auto 2px; }
  .hpo-heading::after { display:none; }
  .hpo-minitag { display:inline-flex; margin-top:var(--hpo-gap-heading-tag); padding-inline:8px; font-size:9px; }
  .hpo-plan-name { font-size:19px; margin-top:var(--hpo-gap-tag-name); }
  .hpo-plan-desc { display:none; }
  .hpo-price-wrap { margin-bottom:var(--hpo-gap-price-cta); }
  .hpo-price { font-size:19px; }
  .hpo-period { font-size:9px; }
  .hpo-cta { font-size:10px; padding:6px 10px; gap:6px; }
  .hpo-cta span { font-size:13px; }
}


/* v1.9.8: tablet uses the existing UFO card with two balanced columns.
   Width-based queries also work in narrow desktop Elementor columns. */
@container hpo-widget (min-width: 541px) and (max-width: 980px) {
  /* The tablet and medium Elementor columns reuse the existing UFO details card. */
  .hpo-widget.hpo-features-mode-callouts .hpo-callouts-layers { display:none !important; }
  .hpo-widget.hpo-features-mode-callouts .hpo-stage {
    width: min(calc(100% - 46px), max(560px, var(--hpo-size))) !important;
    margin-top: 12px !important;
    margin-bottom: clamp(45px, calc(var(--hpo-node-size) * .57), 72px) !important;
  }
  .hpo-widget.hpo-features-mode-callouts .hpo-mobile-details {
    display:grid !important;
    grid-template-columns:minmax(0,1fr);
    width:min(100%, var(--hpo-details-max));
    max-width:100%;
    height:auto !important;
    margin:0 auto 18px;
    padding:0;
  }
  .hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-detail-panel {
    position:relative !important;
    inset:auto !important;
    grid-area:1/1;
    align-self:stretch;
    height:auto !important;
    min-height:0;
    overflow:visible;
    padding:18px 24px 22px;
    box-sizing:border-box;
  }
  .hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-detail-panel[hidden] {
    position:relative !important;
    inset:auto !important;
    display:flex !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
    height:auto !important;
  }
  .hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-detail-panel.is-active {
    visibility:visible !important;
    opacity:1 !important;
  }
  .hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-detail-title,
  .hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-features {
    width:100%;max-width:100%;
  }
  .hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-detail-title {
    font-size:15px;
    padding-bottom:12px;
  }
  .hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-features {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    column-gap:20px;
    row-gap:13px;
    padding-top:14px;
  }
  .hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-feature {
    font-size:12px;
    grid-template-columns:22px minmax(0,1fr);
    min-height:27px;
    gap:8px;
    line-height:1.6;
  }
  .hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-detail-desc {display:none !important;}
}
@media (min-width:768px) and (max-width:1024px) {
  /* The tablet and medium Elementor columns reuse the existing UFO details card. */
  .hpo-widget.hpo-features-mode-callouts .hpo-callouts-layers { display:none !important; }
  .hpo-widget.hpo-features-mode-callouts .hpo-stage {
    width: min(calc(100% - 46px), max(560px, var(--hpo-size))) !important;
    margin-top: 12px !important;
    margin-bottom: clamp(45px, calc(var(--hpo-node-size) * .57), 72px) !important;
  }
  .hpo-widget.hpo-features-mode-callouts .hpo-mobile-details {
    display:grid !important;
    grid-template-columns:minmax(0,1fr);
    width:min(100%, var(--hpo-details-max));
    max-width:100%;
    height:auto !important;
    margin:0 auto 18px;
    padding:0;
  }
  .hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-detail-panel {
    position:relative !important;
    inset:auto !important;
    grid-area:1/1;
    align-self:stretch;
    height:auto !important;
    min-height:0;
    overflow:visible;
    padding:18px 24px 22px;
    box-sizing:border-box;
  }
  .hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-detail-panel[hidden] {
    position:relative !important;
    inset:auto !important;
    display:flex !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
    height:auto !important;
  }
  .hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-detail-panel.is-active {
    visibility:visible !important;
    opacity:1 !important;
  }
  .hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-detail-title,
  .hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-features {
    width:100%;max-width:100%;
  }
  .hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-detail-title {
    font-size:15px;
    padding-bottom:12px;
  }
  .hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-features {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    column-gap:20px;
    row-gap:13px;
    padding-top:14px;
  }
  .hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-feature {
    font-size:12px;
    grid-template-columns:22px minmax(0,1fr);
    min-height:27px;
    gap:8px;
    line-height:1.6;
  }
  .hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-detail-desc {display:none !important;}
}

/* Tiny Elementor columns are closer to a phone than to a tablet. */
@container hpo-widget (max-width: 540px) {
  .hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-features {
    grid-template-columns: minmax(0,1fr) !important;
    row-gap: 9px;
  }
}



/* v1.10.0 — single compact-card layout contract.
   All three cards remain in the same CSS grid cell so the *tallest* plan
   determines one constant footprint.  Never put a scrollbar inside the card.
   The mobile and tablet views both retain exactly TWO feature columns.
   Prefer natural growth over clipping if a manual height is too short. */

@media (max-width:1024px) {
  .hpo-widget.hpo-features-mode-callouts .hpo-mobile-details {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-rows:auto !important;
    align-items:stretch !important;
    height:auto !important;
    min-height:var(--hpo-detail-height, 0px) !important;
    max-height:none !important;
    width:min(100%,var(--hpo-details-max)) !important;
    max-width:100% !important;
    margin-inline:auto !important;
    padding:0 !important;
    overflow:visible !important;
    box-sizing:border-box !important;
  }
  .hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-detail-panel,
  .hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-detail-panel[hidden],
  .hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-detail-panel.is-active {
    position:relative !important;
    inset:auto !important;
    grid-area:1 / 1 !important;
    display:flex !important;
    flex-direction:column !important;
    align-self:stretch !important;
    box-sizing:border-box !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    padding-block-start:var(--hpo-compact-padding-top,12px) !important;
    padding-block-end:var(--hpo-compact-padding-bottom,14px) !important;
    justify-content:var(--hpo-compact-vertical-align,center) !important;
    border-radius:var(--hpo-compact-radius,var(--hpo-compact-shape-radius,var(--hpo-detail-radius,19px))) !important;
    overflow:visible !important;
    scrollbar-width:none !important;
  }
  .hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-detail-panel[hidden] {
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
  }
  .hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-detail-panel.is-active {
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
  }
  .hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-features {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-auto-flow:row !important;
    grid-auto-rows:auto !important;
    column-gap:clamp(7px, 2.6cqi, 20px) !important;
    row-gap:clamp(6px, 1.5cqi, 12px) !important;
    width:100% !important;
    max-width:100% !important;
    padding-top:8px !important;
    padding-inline:0 !important;
    margin:0 !important;
    align-items:start !important;
  }
  .hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-feature {
    display:grid !important;
    grid-template-columns:clamp(15px,3.5cqi,21px) minmax(0,1fr) !important;
    align-items:start !important;
    gap:clamp(4px,1.2cqi,8px) !important;
    min-height:0 !important;
    min-width:0 !important;
    width:100% !important;
    margin:0 !important;
    text-align:right !important;
    line-height:1.45 !important;
    overflow-wrap:anywhere !important;
  }
  .hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-feature > span:last-child {
    display:block !important;
    min-height:0 !important;
    min-width:0 !important;
    width:auto !important;
    text-align:right !important;
    justify-content:initial !important;
    overflow-wrap:anywhere !important;
  }
  .hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-feature-icon {
    width:clamp(15px,3.5cqi,21px) !important;
    height:clamp(15px,3.5cqi,21px) !important;
    min-width:0 !important;
    flex:0 0 auto !important;
    border-radius:50% !important;
  }
  .hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-detail-title {
    width:100% !important;
    max-width:100% !important;
    padding-bottom:8px !important;
    flex-shrink:0 !important;
  }
  .hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-detail-desc {
    display:none !important;
  }
}
@container hpo-widget (max-width:980px) {
  .hpo-widget.hpo-features-mode-callouts .hpo-mobile-details {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-rows:auto !important;
    align-items:stretch !important;
    height:auto !important;
    min-height:var(--hpo-detail-height, 0px) !important;
    max-height:none !important;
    width:min(100%,var(--hpo-details-max)) !important;
    max-width:100% !important;
    margin-inline:auto !important;
    padding:0 !important;
    overflow:visible !important;
    box-sizing:border-box !important;
  }
  .hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-detail-panel,
  .hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-detail-panel[hidden],
  .hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-detail-panel.is-active {
    position:relative !important;
    inset:auto !important;
    grid-area:1 / 1 !important;
    display:flex !important;
    flex-direction:column !important;
    align-self:stretch !important;
    box-sizing:border-box !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    padding-block-start:var(--hpo-compact-padding-top,12px) !important;
    padding-block-end:var(--hpo-compact-padding-bottom,14px) !important;
    justify-content:var(--hpo-compact-vertical-align,center) !important;
    border-radius:var(--hpo-compact-radius,var(--hpo-compact-shape-radius,var(--hpo-detail-radius,19px))) !important;
    overflow:visible !important;
    scrollbar-width:none !important;
  }
  .hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-detail-panel[hidden] {
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
  }
  .hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-detail-panel.is-active {
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
  }
  .hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-features {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-auto-flow:row !important;
    grid-auto-rows:auto !important;
    column-gap:clamp(7px, 2.6cqi, 20px) !important;
    row-gap:clamp(6px, 1.5cqi, 12px) !important;
    width:100% !important;
    max-width:100% !important;
    padding-top:8px !important;
    padding-inline:0 !important;
    margin:0 !important;
    align-items:start !important;
  }
  .hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-feature {
    display:grid !important;
    grid-template-columns:clamp(15px,3.5cqi,21px) minmax(0,1fr) !important;
    align-items:start !important;
    gap:clamp(4px,1.2cqi,8px) !important;
    min-height:0 !important;
    min-width:0 !important;
    width:100% !important;
    margin:0 !important;
    text-align:right !important;
    line-height:1.45 !important;
    overflow-wrap:anywhere !important;
  }
  .hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-feature > span:last-child {
    display:block !important;
    min-height:0 !important;
    min-width:0 !important;
    width:auto !important;
    text-align:right !important;
    justify-content:initial !important;
    overflow-wrap:anywhere !important;
  }
  .hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-feature-icon {
    width:clamp(15px,3.5cqi,21px) !important;
    height:clamp(15px,3.5cqi,21px) !important;
    min-width:0 !important;
    flex:0 0 auto !important;
    border-radius:50% !important;
  }
  .hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-detail-title {
    width:100% !important;
    max-width:100% !important;
    padding-bottom:8px !important;
    flex-shrink:0 !important;
  }
  .hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-detail-desc {
    display:none !important;
  }
}
@container hpo-widget (max-width:390px) {
  .hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-feature {
    font-size:clamp(9px,2.6cqi,11px) !important;
  }
  .hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-detail-panel,
  .hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-detail-panel[hidden] {
    padding-inline:clamp(10px,3cqi,16px) !important;
  }
}


/* v1.10.1 – ONE constant tablet/phone feature-card frame.
   Prior versions painted a separate card for each plan, and some rules still
   positioned inactive panels absolutely. This shell is the only background,
   border, radius and shadow. All panels share the exact same grid cell and
   contribute to the maximum natural height, even when visually hidden. */
.hpo-widget.hpo-features-mode-callouts .hpo-mobile-details {
  position:relative !important;
  grid-template-columns:minmax(0,1fr) !important;
  grid-template-rows:minmax(0,auto) !important;
  align-items:stretch !important;
  justify-items:stretch !important;
  width:min(100%,var(--hpo-details-max,610px)) !important;
  max-width:100% !important;
  min-width:0 !important;
  min-height:var(--hpo-detail-height,0px) !important;
  height:auto !important;
  padding:var(--hpo-compact-padding-top,12px) clamp(12px,4cqi,22px) var(--hpo-compact-padding-bottom,14px) !important;
  border:1px solid var(--hpo-detail-border,rgba(139,159,200,.19)) !important;
  border-radius:var(--hpo-compact-radius,var(--hpo-detail-radius,19px)) !important;
  background-color:var(--hpo-detail-bg,#111e34);
  box-shadow:0 12px 30px rgba(0,0,0,.09) !important;
  overflow:visible !important;
  direction:rtl;
  isolation:isolate;
  box-sizing:border-box !important;
}
.hpo-widget.hpo-features-mode-callouts .hpo-mobile-details :is(.hpo-detail-panel,.hpo-detail-panel[hidden],.hpo-detail-panel.is-active) {
  position:relative !important;
  inset:auto !important;
  grid-area:1 / 1 !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  grid-template-rows:clamp(54px,7cqi,64px) minmax(0,auto) !important;
  align-content:start !important;
  justify-content:stretch !important;
  align-self:stretch !important;
  justify-self:stretch !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  min-height:0 !important;
  height:auto !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
  transform:none !important;
  transition:none !important;
  box-sizing:border-box !important;
}
.hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-detail-panel[hidden] {
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
  z-index:0 !important;
}
.hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-detail-panel.is-active {
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
  z-index:1 !important;
}
.hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-detail-title {
  display:flex !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  min-height:0 !important;
  height:100% !important;
  align-items:center !important;
  justify-content:flex-start !important;
  align-self:stretch !important;
  flex-shrink:0 !important;
  text-align:right !important;
  padding:0 0 13px !important;
  margin:0 !important;
  border-bottom:1px solid rgba(139,159,200,.19) !important;
  box-sizing:border-box !important;
}
.hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-detail-title-inner {
  display:inline-flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-start !important;
  min-width:0 !important;
  max-width:100% !important;
  gap:clamp(6px,1.4cqi,12px) !important;
  transform:translateX(var(--hpo-detail-title-offset-x,0px));
  white-space:nowrap;
}
.hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-detail-title-text {
  min-width:0;
  font-size:clamp(11px,2.65cqi,15px);
  line-height:1.35 !important;
}
.hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-features {
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  grid-template-rows:repeat(var(--hpo-compact-feature-rows,3),minmax(var(--hpo-compact-row-height,38px),auto)) !important;
  grid-auto-flow:row !important;
  align-content:start !important;
  justify-items:stretch !important;
  align-items:start !important;
  gap:clamp(5px,1.2cqi,10px) clamp(7px,2cqi,17px) !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  padding:12px 0 0 !important;
  margin:0 !important;
  text-align:right !important;
}
.hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-feature {
  display:grid !important;
  grid-template-columns:clamp(16px,3.7cqi,22px) minmax(0,1fr) !important;
  align-items:start !important;
  align-content:start !important;
  column-gap:clamp(4px,1cqi,8px) !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  min-height:0 !important;
  margin:0 !important;
  font-size:clamp(9px,2.3cqi,12px) !important;
  line-height:1.45 !important;
  text-align:right !important;
  overflow:visible !important;
}
.hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-feature > span:last-child {
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  text-align:right !important;
  overflow-wrap:break-word !important;
}
.hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-feature-icon {
  display:flex !important;
  width:clamp(16px,3.7cqi,22px) !important;
  height:clamp(16px,3.7cqi,22px) !important;
  flex:0 0 auto !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 !important;
}
.hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-detail-desc { display:none !important; }
@container hpo-widget (max-width:390px) {
  .hpo-widget.hpo-features-mode-callouts .hpo-mobile-details {
    --hpo-compact-row-height:40px;
  }
  .hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-detail-panel {
    grid-template-rows:55px minmax(0,auto) !important;
  }
}


/* v1.10.2 — independent glass feature chips on compact widths.
   Keep existing plan panels stacked (stable layout), but remove the single
   rectangular/rounded frame and give each feature its own intrinsic-width card.
   Desktop line callouts are untouched. */
.hpo-widget.hpo-features-mode-callouts .hpo-mobile-details {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
}
.hpo-widget.hpo-features-mode-callouts .hpo-mobile-details :is(.hpo-detail-panel, .hpo-detail-panel[hidden], .hpo-detail-panel.is-active) {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
  grid-template-rows: auto auto !important;
  gap: 0 !important;
}
.hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-detail-title {
  min-height: 0 !important;
  height: auto !important;
  padding: 0 0 12px !important;
  margin: 0 0 14px !important;
  border: 0 !important;
  justify-content: center !important;
  background: transparent !important;
}
.hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-detail-title-inner {
  max-width: 100%;
  padding: 3px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--hpo-current-accent) 9%, transparent);
}
.hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-features {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, min(48%, 285px))) !important;
  grid-template-rows: none !important;
  grid-auto-rows: auto !important;
  align-items: start !important;
  justify-content: center !important;
  justify-items: center !important;
  gap: var(--hpo-glass-gap,11px) !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
  width: 100% !important;
}
.hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-feature {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: fit-content !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  justify-self: center !important;
  align-self: start !important;
  gap: clamp(4px,1.4cqi,9px) !important;
  padding: var(--hpo-glass-pad-y,8px) var(--hpo-glass-pad-x,10px) !important;
  margin: 0 !important;
  border: 1px solid color-mix(in srgb, var(--hpo-current-accent) 46%, transparent) !important;
  border-radius: var(--hpo-glass-radius,15px) !important;
  background: color-mix(in srgb, var(--hpo-current-accent) var(--hpo-glass-tint,15%), rgba(16,25,42,.42)) !important;
  -webkit-backdrop-filter: blur(var(--hpo-glass-blur,4px));
  backdrop-filter: blur(var(--hpo-glass-blur,4px));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 3px 12px rgba(0,0,0,.12) !important;
  text-align: right !important;
  direction: rtl !important;
  line-height: 1.45 !important;
  box-sizing: border-box !important;
  transition: background-color .2s ease, border-color .2s ease !important;
}
.hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-feature > span:last-child {
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  overflow-wrap: break-word !important;
  text-align: right !important;
}
.hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-feature-icon {
  color: var(--hpo-current-accent) !important;
  background: color-mix(in srgb, var(--hpo-current-accent) 16%, transparent) !important;
  flex: 0 0 clamp(16px,3.5cqi,22px) !important;
  width: clamp(16px,3.5cqi,22px) !important;
  height: clamp(16px,3.5cqi,22px) !important;
  border-radius: 7px !important;
}
@media (hover:hover) and (pointer:fine) {
  .hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-feature:hover {
    background: color-mix(in srgb, var(--hpo-current-accent) 26%, rgba(16,25,42,.52)) !important;
    border-color: color-mix(in srgb, var(--hpo-current-accent) 70%, transparent) !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hpo-widget.hpo-features-mode-callouts .hpo-mobile-details .hpo-feature { transition: none !important; }
}


/* =========================================================
   v1.10.3 — phone/tablet modal for plan features only.
   Desktop stays 100% unchanged.  CSS only activates after JS successfully
   builds the modal; without JS the existing inline cards remain readable.
========================================================= */
@media (max-width: 1024px) {
  .hpo-widget.hpo-plan-popup-enabled .hpo-details,
  .hpo-widget.hpo-plan-popup-enabled.hpo-features-mode-callouts .hpo-mobile-details,
  .hpo-widget.hpo-plan-popup-enabled.hpo-features-mode-callouts .hpo-callouts-layers {
    display: none !important;
  }
  /* The former callout area is no longer needed below/above the orbit. */
  .hpo-widget.hpo-plan-popup-enabled.hpo-features-mode-callouts .hpo-stage {
    margin-top: 12px !important;
    margin-bottom: clamp(25px, var(--hpo-stage-gap), 52px) !important;
  }
}
@media (max-width: 767px) {
  .hpo-widget.hpo-plan-popup-enabled.hpo-features-mode-callouts .hpo-stage {
    margin-top: 8px !important;
  }
}

/* Portal dialog intentionally lives at body level, outside .hpo-widget's
   overflow, container queries and GPU transforms. It cannot be clipped. */
.hpo-plan-popup-backdrop,
.hpo-plan-popup-backdrop * { box-sizing: border-box; }
.hpo-plan-popup-backdrop[hidden] { display: none !important; }
.hpo-plan-popup-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  display: grid;
  place-items: center;
  padding: max(14px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
           max(14px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: rgba(3, 8, 17, .76);
  backdrop-filter: blur(11px) saturate(120%);
  -webkit-backdrop-filter: blur(11px) saturate(120%);
  overscroll-behavior: contain;
  direction: rtl;
  animation: hpo-popup-backdrop-in .23s ease-out both;
}
.hpo-plan-popup {
  --hpo-text: #f6faff;
  --hpo-muted: #a6b5cc;
  --hpo-detail-ufo-size: 30px;
  --hpo-feature-icon-bg: rgba(92,233,213,.12);
  --hpo-feature-icon-color: var(--hpo-current-accent);
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(100%, 610px);
  max-height: min(86vh, 800px);
  max-height: min(86dvh, 800px);
  min-height: 0;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(196, 214, 239, .20);
  border-radius: clamp(20px, 4vw, 28px);
  background:
    radial-gradient(ellipse at 50% -25%, color-mix(in srgb, var(--hpo-popup-accent, #609C95) 15%, transparent), transparent 75%),
    linear-gradient(145deg, rgba(28, 39, 61, .99), rgba(10, 18, 33, .99) 62%, rgba(14, 25, 40, .99));
  color: var(--hpo-text);
  font-family: inherit;
  line-height: 1.65;
  text-align: right;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .60),
              0 0 0 1px rgba(255,255,255,.035) inset,
              0 1px 0 rgba(255,255,255,.09) inset;
  isolation: isolate;
  animation: hpo-popup-enter .34s cubic-bezier(.18,.82,.22,1) both;
}
.hpo-plan-popup::before {
  content: '';
  position: absolute;
  z-index: 1;
  pointer-events: none;
  top: 0;
  left: 11%;
  right: 11%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--hpo-popup-accent, #609C95), transparent);
  opacity: .85;
}
.hpo-plan-popup-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 17px 22px 9px;
  flex: 0 0 auto;
}
.hpo-plan-popup-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: rgba(233, 243, 255, .75);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
}
.hpo-plan-popup-dot {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hpo-popup-accent, #609C95);
  box-shadow: 0 0 16px var(--hpo-popup-accent, #609C95);
}
.hpo-plan-popup-close {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  flex: 0 0 36px;
  border: 1px solid rgba(220,230,245,.15);
  border-radius: 12px;
  background: rgba(255,255,255,.055);
  color: #f1f6ff;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.hpo-plan-popup-close:hover,
.hpo-plan-popup-close:focus-visible {
  background: rgba(255,255,255,.13);
  border-color: rgba(220,230,245,.38);
  transform: scale(1.035);
}
.hpo-plan-popup-close:focus-visible { outline: 2px solid var(--hpo-popup-accent, #609C95); outline-offset: 2px; }
.hpo-plan-popup-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 2px clamp(17px, 4vw, 26px) clamp(22px, 4vw, 28px);
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(164,188,214,.40) transparent;
  -webkit-overflow-scrolling: touch;
}
.hpo-plan-popup-content { width: 100%; }
.hpo-plan-popup .hpo-detail-title {
  font-size: clamp(15px, 2vw, 18px);
  font-weight: 800;
  padding: 7px 0 17px;
  border-bottom-color: rgba(199,216,237,.13);
}
.hpo-plan-popup .hpo-detail-title-inner { min-width: 0; }
.hpo-plan-popup.hpo-ufo-lamp-off .hpo-ufo-lamp { display: none !important; }
.hpo-plan-popup .hpo-detail-title-text { overflow-wrap: anywhere; }
.hpo-plan-popup .hpo-features {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 11px !important;
  padding: 17px 0 0 !important;
  width: 100%;
  list-style: none;
  margin: 0;
}
.hpo-plan-popup .hpo-feature {
  display: flex !important;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(197, 214, 239, .10);
  border-radius: 13px;
  color: var(--hpo-muted, #a6b5cc);
  font-size: 12px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.hpo-plan-popup .hpo-feature-icon {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin: 0;
  color: var(--hpo-feature-icon-color, var(--hpo-popup-accent, #609C95));
  /* Popup only: tint every round feature-icon background with the selected
     plan accent. The inherited Elementor background remains as a fallback. */
  background: var(--hpo-feature-icon-bg, rgba(92,233,213,.12));
  background: color-mix(in srgb, var(--hpo-popup-accent, #5CE9D5) 25%, transparent);
}
.hpo-plan-popup .hpo-feature > span:last-child {
  min-width: 0;
  justify-content: flex-start;
  text-align: right;
}
@media (max-width: 600px) {
  .hpo-plan-popup { width: min(100%, 460px); max-height: min(90vh, 730px); max-height: min(90dvh, 730px); }
  .hpo-plan-popup-top { padding: 13px 16px 6px; }
  .hpo-plan-popup-scroll { padding: 2px 16px 20px; }
  .hpo-plan-popup .hpo-features { grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; padding-top: 14px !important; }
  .hpo-plan-popup .hpo-feature { min-height: 42px; font-size: 12px; padding: 9px 11px; }
  .hpo-plan-popup .hpo-detail-title { padding-bottom: 12px; }
}
@keyframes hpo-popup-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes hpo-popup-enter {
  from { opacity: 0; transform: translateY(23px) scale(.955); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hpo-plan-popup-backdrop, .hpo-plan-popup { animation: none !important; }
  .hpo-plan-popup-close { transition: none !important; }
}

/* v1.10.5 — fine popup spacing and description controls; no desktop visual changes. */
.hpo-widget .hpo-popup-price { display: none !important; }
@media (max-width: 1024px) {
  .hpo-plan-popup {
    --hpo-popup-kicker-size: 12px;
    --hpo-popup-kicker-color: #becde2;
    --hpo-popup-title-size: 17px;
    --hpo-popup-title-color: #f6faff;
    --hpo-popup-title-weight: 800;
    --hpo-popup-title-align: center;
    --hpo-popup-title-x: 0px;
    --hpo-popup-title-y: 0px;
    --hpo-popup-title-icon-gap: 10px;
    --hpo-popup-title-top-gap: 0px;
    --hpo-popup-divider-style: solid;
    --hpo-popup-divider-width: 100%;
    --hpo-popup-divider-thickness: 1px;
    --hpo-popup-divider-color: #55647d;
    --hpo-popup-divider-gap-top: 34px;
    --hpo-popup-divider-gap-bottom: 12px;
    --hpo-popup-description-display: block;
    --hpo-popup-description-size: 12px;
    --hpo-popup-description-color: #a6b5cc;
    --hpo-popup-description-weight: 400;
    --hpo-popup-description-align: right;
    --hpo-popup-description-line-height: 1.8em;
    --hpo-popup-description-gap-top: 0px;
    --hpo-popup-description-gap-bottom: 0px;
    --hpo-popup-description-x: 0px;
    --hpo-popup-description-y: 0px;
    --hpo-popup-feature-gap: 8px;
    --hpo-popup-feature-radius: 13px;
    --hpo-popup-feature-size: 12px;
    --hpo-popup-ufo-size: 30px;
    --hpo-popup-ufo-x: 0px;
    --hpo-popup-ufo-y: 0px;
    --hpo-popup-ufo-animation: float;
    --hpo-popup-ufo-speed: 3.2s;
    --hpo-popup-beam-animation: breathe;
    --hpo-popup-beam-speed: 2.8s;
    --hpo-popup-beam-scale: 68%;
    --hpo-popup-beam-opacity: 72%;
    --hpo-popup-glow-scale: 76%;
    --hpo-popup-glow-opacity: 32%;
    --hpo-popup-price-display: flex;
    --hpo-popup-price-size: 18px;
    --hpo-popup-price-gap: 13px;
  }
  .hpo-plan-popup .hpo-plan-popup-kicker {
    font-size: var(--hpo-popup-kicker-size) !important;
    color: var(--hpo-popup-kicker-color) !important;
  }
  .hpo-plan-popup .hpo-detail-title {
    position: relative;
    justify-content: var(--hpo-popup-title-align) !important;
    text-align: var(--hpo-popup-title-align) !important;
    font-size: var(--hpo-popup-title-size) !important;
    font-weight: var(--hpo-popup-title-weight) !important;
    color: var(--hpo-popup-title-color) !important;
    border: 0 !important;
    margin-top: var(--hpo-popup-title-top-gap) !important;
    padding-bottom: var(--hpo-popup-divider-gap-top) !important;
  }
  .hpo-plan-popup .hpo-detail-title-text {
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
  }
  .hpo-plan-popup .hpo-detail-title-inner {
    gap: var(--hpo-popup-title-icon-gap) !important;
    transform: translate(var(--hpo-popup-title-x), var(--hpo-popup-title-y)) !important;
  }
  .hpo-plan-popup .hpo-detail-title::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    inset-inline-start: 50%;
    width: var(--hpo-popup-divider-width);
    height: 0;
    border: 0;
    border-bottom: var(--hpo-popup-divider-thickness) var(--hpo-popup-divider-style) var(--hpo-popup-divider-color);
    transform: translateX(50%);
    pointer-events: none;
  }
  .hpo-plan-popup[data-hpo-divider="gradient"] .hpo-detail-title::after {
    height: var(--hpo-popup-divider-thickness);
    border: 0;
    background: linear-gradient(90deg, transparent, var(--hpo-popup-divider-color), var(--hpo-popup-accent), var(--hpo-popup-divider-color), transparent);
  }
  .hpo-plan-popup[data-hpo-divider="none"] .hpo-detail-title::after { display: none; }
  .hpo-plan-popup .hpo-plan-popup-body {
    padding-top: var(--hpo-popup-divider-gap-bottom);
    min-width: 0;
  }
  .hpo-plan-popup .hpo-detail-desc {
    display: var(--hpo-popup-description-display) !important;
    font-size: var(--hpo-popup-description-size) !important;
    color: var(--hpo-popup-description-color) !important;
    line-height: var(--hpo-popup-description-line-height) !important;
    font-weight: var(--hpo-popup-description-weight) !important;
    text-align: var(--hpo-popup-description-align) !important;
    transform: translate(var(--hpo-popup-description-x), var(--hpo-popup-description-y)) !important;
    padding-top: var(--hpo-popup-description-gap-top) !important;
    padding-bottom: var(--hpo-popup-description-gap-bottom) !important;
    margin: 0 !important;
  }
  .hpo-plan-popup .hpo-features {
    padding-top: 13px !important;
    gap: var(--hpo-popup-feature-gap) !important;
  }
  .hpo-plan-popup .hpo-feature {
    border-radius: var(--hpo-popup-feature-radius) !important;
    font-size: var(--hpo-popup-feature-size) !important;
  }
  .hpo-plan-popup .hpo-detail-ufo {
    --hpo-detail-ufo-size: var(--hpo-popup-ufo-size);
    --hpo-detail-ufo-offset-y: 0px;
    --hpo-detail-ufo-shift-x: var(--hpo-popup-ufo-x);
    --hpo-detail-ufo-shift-y: var(--hpo-popup-ufo-y);
    --hpo-detail-ufo-rotate: 0deg;
    --hpo-detail-ufo-scale: 1;
  }
  /* UFO aura is restrained, with no broad blurred disc cropped at dialog edges. */
  .hpo-plan-popup .hpo-detail-ufo::before {
    inset: 1% 13% 18%;
    background: radial-gradient(ellipse at center,
      var(--hpo-current-accent) 0%,
      color-mix(in srgb, var(--hpo-current-accent) 58%, transparent) 34%,
      transparent 69%);
    filter: blur(3.5px);
    opacity: var(--hpo-popup-glow-opacity);
    transform: scale(var(--hpo-popup-glow-scale));
    transform-origin: center;
  }
  /* Beam paths extend beyond the UFO's SVG viewBox in the original artwork.
     Shrink at their source instead of clipping any part of the craft/title. */
  .hpo-plan-popup .hpo-detail-ufo svg { overflow: visible; }
  .hpo-plan-popup .hpo-ufo-lamp {
    opacity: var(--hpo-popup-beam-opacity);
    transform: scale(var(--hpo-popup-beam-scale));
    transform-box: view-box;
    transform-origin: 110px 105px;
    will-change: opacity;
  }
  .hpo-plan-popup .hpo-ufo-beam-glow { filter: blur(.9px); }
  .hpo-plan-popup .hpo-ufo-beam-ground { filter: blur(1.6px); }
  .hpo-plan-popup[data-hpo-beam-animation="breathe"] .hpo-ufo-beam-glow {
    animation: hpo-popup-beam-soft-glow var(--hpo-popup-beam-speed) ease-in-out infinite;
  }
  .hpo-plan-popup[data-hpo-beam-animation="breathe"] .hpo-ufo-beam-core {
    animation: hpo-popup-beam-soft-core var(--hpo-popup-beam-speed) ease-in-out infinite;
  }
  .hpo-plan-popup[data-hpo-beam-animation="breathe"] .hpo-ufo-beam-ground {
    animation: hpo-popup-beam-soft-ground var(--hpo-popup-beam-speed) ease-in-out infinite;
  }
  .hpo-plan-popup[data-hpo-beam-animation="shimmer"] .hpo-ufo-beam-glow,
  .hpo-plan-popup[data-hpo-beam-animation="shimmer"] .hpo-ufo-beam-core,
  .hpo-plan-popup[data-hpo-beam-animation="shimmer"] .hpo-ufo-beam-ground {
    animation: hpo-popup-beam-shimmer var(--hpo-popup-beam-speed) ease-in-out infinite;
  }
  .hpo-plan-popup[data-hpo-beam-animation="shimmer"] .hpo-ufo-beam-core { animation-delay: -.4s; }
  .hpo-plan-popup[data-hpo-beam-animation="shimmer"] .hpo-ufo-beam-ground { animation-delay: -.8s; }
  .hpo-plan-popup[data-hpo-ufo-animation="float"] .hpo-detail-ufo svg {
    animation: hpo-popup-ufo-float var(--hpo-popup-ufo-speed) ease-in-out infinite;
  }
  .hpo-plan-popup[data-hpo-ufo-animation="sway"] .hpo-detail-ufo svg {
    animation: hpo-popup-ufo-sway var(--hpo-popup-ufo-speed) ease-in-out infinite;
  }
  .hpo-plan-popup[data-hpo-ufo-animation="pulse"] .hpo-detail-ufo svg {
    animation: hpo-popup-ufo-pulse var(--hpo-popup-ufo-speed) ease-in-out infinite;
  }
  .hpo-plan-popup .hpo-popup-price {
    display: var(--hpo-popup-price-display) !important;
    flex-direction: row;
    justify-content: flex-start;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 5px 9px;
    padding: 10px 12px;
    margin: var(--hpo-popup-price-gap) 0 0;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--hpo-popup-accent) 28%, transparent);
    background: color-mix(in srgb, var(--hpo-popup-accent) 8%, transparent);
  }
  .hpo-plan-popup .hpo-popup-price-label {
    color: var(--hpo-muted);
    font-size: 11px;
    margin-inline-end: auto;
  }
  .hpo-plan-popup .hpo-popup-price-amount {
    color: var(--hpo-text);
    font-size: var(--hpo-popup-price-size);
    font-weight: 900;
    line-height: 1.35;
    unicode-bidi: isolate;
  }
  .hpo-plan-popup .hpo-popup-price-period {
    color: var(--hpo-muted);
    font-size: 11px;
  }
}
@keyframes hpo-popup-ufo-float {
  0%,100% { transform: translate3d(0,0,0) rotate(-2deg); }
  50% { transform: translate3d(0,-7px,0) rotate(3deg); }
}
@keyframes hpo-popup-ufo-sway {
  0%,100% { transform: rotate(-8deg); }
  50% { transform: rotate(8deg); }
}
@keyframes hpo-popup-ufo-pulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.09); }
}
@keyframes hpo-popup-beam-soft-glow {
  0%, 100% { opacity: .23; }
  50% { opacity: .60; }
}
@keyframes hpo-popup-beam-soft-core {
  0%, 100% { opacity: .45; }
  50% { opacity: .83; }
}
@keyframes hpo-popup-beam-soft-ground {
  0%, 100% { opacity: .15; }
  50% { opacity: .34; }
}
@keyframes hpo-popup-beam-shimmer {
  0%, 100% { opacity: .26; }
  32% { opacity: .85; }
  68% { opacity: .42; }
}
@media (prefers-reduced-motion: reduce) {
  .hpo-plan-popup .hpo-detail-ufo svg,
  .hpo-plan-popup .hpo-ufo-beam-glow,
  .hpo-plan-popup .hpo-ufo-beam-core,
  .hpo-plan-popup .hpo-ufo-beam-ground { animation: none !important; }
}


/* v1.10.9 — Balanced odd-count feature layout in tablet/two-column popups.
   The first feature spans both columns (1+2+2 for five; 1+2 for three),
   and its icon/label form a centered group. Remaining features retain the
   regular two-column grid. Even counts, single-column phones and desktop
   are unaffected. No JavaScript or widget content changes are needed. */
@media (min-width: 601px) and (max-width: 1024px) {
  .hpo-plan-popup .hpo-features > .hpo-feature:first-child:nth-last-child(odd) {
    grid-column: 1 / -1;
    justify-content: center;
  }
}