/* ===========================
   Universal N-image crossfade
   =========================== */

.fade-rotator {
  /* Override per instance via inline style or utility classes (see below) */
  --count: 4;        /* number of slides */
  --dur: 16s;        /* total loop duration */
  position: relative;
  z-index: 1;        /* keep above negative-z backgrounds */
  width: 100%;
  aspect-ratio: 16 / 9;   /* change if your images aren't 16:9 */
  overflow: hidden;
}

.fade-rotator > picture {
  position: absolute;
  inset: 0;
  display: block;
}

.fade-rotator img {
  width: 100%;
  height: 100%;
  object-fit: cover;       /* use 'contain' if you prefer letterboxing */
  display: block;

  opacity: 0;
  will-change: opacity;
  animation: crossfade var(--dur) linear infinite both;
  /* Each slide sets --i:0,1,2... in HTML; delay staggers them evenly */
  animation-delay: calc(var(--i) * (var(--dur) / var(--count)));
}

/* Crossfade: 0–5% fade in, 5–25% hold, 25–30% fade out */
@keyframes crossfade {
  0%   { opacity: 0; }
  5%   { opacity: 1; }
  25%  { opacity: 1; }
  30%  { opacity: 0; }
  100% { opacity: 0; }
}

/* Optional utilities to avoid inline --count/--dur */
.rot-3 { --count: 3; --dur: 12s; }
.rot-4 { --count: 4; --dur: 16s; }
.rot-5 { --count: 5; --dur: 20s; }

/* Reduced motion: show first frame only */
@media (prefers-reduced-motion: reduce) {
  .fade-rotator img { animation: none; opacity: 1; }
  .fade-rotator picture:not(:first-child) { display: none; }
}

/* Fallback for older browsers without aspect-ratio support */
@supports not (aspect-ratio: 1 / 1) {
  .fade-rotator { height: 0; padding-bottom: 56.25%; } /* 16:9 */
  .fade-rotator > picture,
  .fade-rotator img { position: absolute; inset: 0; }
}


/* ===========================
   Single responsive image
   (.signature) — scales like rotator
   =========================== */

.signature {
  /* Tunables */
  --fit: cover;      /* 'cover' for crop-fill, 'contain' to letterbox */
  --ratio: 16 / 9;   /* set to your real image ratio if different */

  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: var(--ratio);
  overflow: hidden;
  margin: 0;         /* <figure> default margins off */
}

.signature > picture {
  position: absolute;
  inset: 0;
  display: block;
}

.signature img {
  width: 100%;
  height: 100%;
  object-fit: var(--fit);
  display: block;
}

/* HERO background video sizing & stacking */
.background-content .bg-video {
  position: absolute;
  inset: 0;
  z-index: 0;               /* behind overlays */
  pointer-events: none;     /* don't intercept clicks/scroll */
}

.hero-bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  pointer-events: none;
}

/* Keep overlays and the front copy above the video */
.background-content .bg-overlay,
.background-content .bg-pattern,
.background-content .bg-color,
.front-content {
  position: relative;
  z-index: 1;
}

/* Respect reduced motion / data saver */
@media (prefers-reduced-motion: reduce) { .hero-bg-video { display: none; } }
@media (prefers-reduced-data: reduce)   { .hero-bg-video { display: none; } }

/* Footer icon row */
.footer-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;            /* space between logos */
  flex-wrap: wrap;      /* allows wrapping on small screens */
}
.footer-icons img {
  height: 100px;        /* scale all to 100px tall */
  width: auto;          /* keep original aspect ratio */
  display: block;
}

/* Fix Packages buttons: correct text color on hover */
#packages .pricing-table-default .button-default.inverted:hover,
#packages .pricing-table-default .button-default.inverted:focus {
  color: #111 !important;      /* set to your preferred hover text color */
  background: #fff !important; 
  border-color: #fff !important;
}

/* (Optional) also ensure base state is readable on dark bg 
#packages .pricing-table-default .button-default.inverted {
  color: #fff;                   base text on dark section 
  border-color: #fff;
}*/



/* ===========================
Flowing vertical “pipe” with row grid rhythm
   =========================== */


/* Container */
.vlines{
  --rows: 850;
  --row-h: 1.2em;
  --gutter: 0.6rem;
  --side-margin-ch: 10;
  --stroke: 2;             /* path thickness px (overridden by data-stroke) */

  position: relative;
  height: calc(var(--rows) * var(--row-h));
  color: currentColor;
  font-family: monospace;  /* for ch measurements & note spacing */
  line-height: 1;
  overflow: hidden;
}

/* Full-bleed SVG layer behind notes */
.vlines svg{
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.vlines .flow-path{
  fill: none;
  stroke: currentColor;
  stroke-width: var(--stroke);
  vector-effect: non-scaling-stroke; /* sharp on zoom */
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Notes (unchanged from before) */
.vlines .note{
  position: absolute;
  top: calc(var(--row) * var(--row-h));
  transform: translateY(-50%);
  line-height: 1;
  white-space: nowrap;
  z-index: 2; /* above SVG */
}
.vlines .note.right{ left:  calc(50% + var(--gutter) + var(--indent, 0)); text-align:left; }
.vlines .note.left { right: calc(50% + var(--gutter) + var(--indent, 0)); text-align:right; }


/* Cream box for hero content */
.hero.error-404 .cream-box {
  /* Cream background (tweak to your taste) */
  background: #141414;
  border-radius: 20px;

  /* Keep 60px from left/right on non-mobile */
  width: calc(100% - 120px);
  margin: 0 auto;

  /* Make sure padding & radius behave as expected */
  box-sizing: border-box;

  /* Optional: subtle depth so it stands out on busy backgrounds */
  box-shadow: 0 8px 28px rgba(0,0,0,0.18);
}

/* Keep box from being too big on large screens */
.hero.error-404 .cream-box {
  max-width: 1280px;
}

/* Always keep your text 12px from the box edge */
.hero.error-404 .cream-box__content {
  padding: 12px;
}

/* Ensure the hero section can comfortably contain the box */
.hero.error-404 .front-content .container-mid {
  /* Most templates already center this; these are safe reinforcements */
  width: 100%;
}

/* MOBILE: when “mobile” breakpoint is reached, let the box fill the hero area */
@media (max-width: 767.98px) {
  .hero.error-404 {
    min-height: 100vh; /* ensure hero fills the viewport */
  }
  .hero.error-404 .front-content .container-mid {
    width: 100%;
  }
  .hero.error-404 .cream-box {
    /* Fill available hero area on mobile */
    width: 100%;
    height: 100%;
    min-height: 100vh;

    /* If you truly want it to visually cover the whole screen with no background peeking,
       set border-radius to 0 below. If you prefer to KEEP rounded corners on mobile,
       simply remove this next line. */
    border-radius: 0;
  }
}

.left-override { 
  text-align: left !important; 
}

/* ===============================================
	slider buttons
   =============================================== */
   
/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #607d8b;
}

input:focus + .slider {
  box-shadow: 0 0 1px #607d8b;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}



/* === Pricing visibility (default = Yearly) === */
.billing-scope .show-yearly  { display: none; }
.billing-scope .show-monthly { display: inline; }

/* When the checkbox inside .switch is checked (Monthly), flip visibility */
.billing-scope:has(.switch input:checked) .show-yearly  { display: inline; }
.billing-scope:has(.switch input:checked) .show-monthly { display: none; }