/* RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

/* HEADER */
.top-bar {
  height: 60px;
  background: #ffffff;
  color: #261814;
  display: flex;
  align-items: center;
  justify-content: start;
  padding: 0 40px;
}

.logo-wrap {
  display: flex;
  align-items: center;
  gap: 0.1px;
}

.logo {
  height: 50px;
}

.logo-wrap span {
  font-size: 16px;
  font-weight: 300;
}

/* HERO */
.hero {
  position: relative;
  min-height: 100vh;
  padding: 120px 20px 80px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  overflow: hidden;
}

/* SLIDESHOW CONTAINER */
.slideshow {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: fadeSlide 28s infinite;
}

.slide:nth-child(1) { background-image: url("red.jpg"); animation-delay: 0s; }
.slide:nth-child(2) { background-image: url("orange.jpeg"); animation-delay: 4s; }
.slide:nth-child(3) { background-image: url("yellow.jpeg"); animation-delay: 8s; }
.slide:nth-child(4) { background-image: url("green.jpeg"); animation-delay: 12s; }
.slide:nth-child(5) { background-image: url("blue.jpg"); animation-delay: 16s; }
.slide:nth-child(6) { background-image: url("indigo.jpeg"); animation-delay: 20s; }
.slide:nth-child(7) { background-image: url("violet.jpeg"); animation-delay: 24s; }

@keyframes fadeSlide {
  0% { opacity: 0; }
  5% { opacity: 1; }
  20% { opacity: 1; }
  25% { opacity: 0; }
  100% { opacity: 0; }
}

/* BROWN OVERLAY */
.overlay {
  position: absolute;
  inset: 0;
  background: rgba(38, 24, 20, 0.3);
  z-index: 1;
  pointer-events: none;
}

/* Ensure content is clickable */
.hero > *:not(.slideshow):not(.overlay) {
  position: relative;
  z-index: 2;
}

/* IPAD */
.ipad-container {
  margin-bottom: 40px;
}

.ipad-frame {
  width: 570px;
  height: 350px;
  background: #000;
  border-radius: 20px;
  padding: 15px;
}

.ipad-frame video {
  width: 100%;
  height: 100%;
  border-radius: 12px;
}

/* CONTENT */
.content {
  max-width: 800px;
}

.content h1,
.content p {
  color: #ffffff;
}

.content h1 {
  font-size: 35px;
  margin: 20px 0;
}

.content p {
  margin-bottom: 14px;
}

/* (Personal / Company) */
.signup-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 220px;
  margin: 50px 0 14px 0;
}

.toggle-option {
  background: transparent;
  border: none;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  cursor: pointer;
  opacity: 0.9;
}

.toggle-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.9);
  display: inline-block;
  position: relative;
}

.toggle-option.active .toggle-dot {
  border-color: rgba(255, 255, 255, 1);
}

.toggle-option.active .toggle-dot::after {
  content: "";
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, 1);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Panels */
.signup-panel {
  display: none;
  margin-top: 35px; 
}
.signup-panel.active {
  display: block;
}

.signup-form {
  display: flex;
  gap: 15px;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
}

.signup-form input {
  width: 220px;
  padding: 15px;
  border-radius: 8px;
  border: 1px solid #ddd;
}

.subscribe-btn {
  background: #261814;
  color: #ffffff;
  border: none;
  padding: 15px 35px;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.subscribe-btn:hover {
  background: #caab87;
  color: #261814;
}

/*COMPANY ROWS*/
.company-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.company-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.row-spacer {
  width: 76px;
  height: 32px;
  flex-shrink: 0;
}

/* COMPANY ROW BUTTONS (smaller circles so they don't collide with form inputs) */

.add-row,
.remove-row {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;

  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;

  border: none;
  font-size: 18px;
  line-height: 1;

  cursor: pointer;
}

/* + button */
.add-row {
  background: #261814;
  color: #ffffff;
}

/* − button */
.remove-row {
  background: rgba(255,255,255,0.9);
  color: #261814;
}

.add-row:hover,
.remove-row:hover {
  transform: scale(1.05);
  opacity: 0.95;
}
/* Wrap for + and - so they sit together */
.row-controls {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;

  width: 76px;        /* enough room for + and - */
  min-width: 76px;
  height: 32px;

  flex-shrink: 0;     /* prevents squashing */
}

/* On mobile, keep controls neat */
@media (max-width: 768px) {
  .row-controls {
    width: auto;
    justify-content: flex-start;
    margin-left: 5%;
  }
}
/* MOBILE VIEW */
@media (max-width: 768px) {

  .ipad-container {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
  }

  .ipad-frame {
    width: 85%;
    max-width: 350px;
    height: 200px;
    aspect-ratio: 3 / 5;
    padding: 12px;
    border-radius: 18px;
  }

  .ipad-frame video {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    object-fit: cover;
  }

  .content {
    width: 100%;
    padding: 0 20px;
  }

  .content h1 {
    font-size: 26px;
    line-height: 1.3;
    margin: 15px 0;
  }

  .content p {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 18px;
  }

  .signup-toggle {
    gap: 90px;
  }

  .signup-form {
    flex-direction: column;
    width: 100%;
  }

  .signup-form input,
  .subscribe-btn {
    width: 90%;
  }

  /* Company rows on mobile: keep it clean */
  .company-row {
    flex-direction: column;
    width: 100%;
  }

  .row-spacer {
    display: none;
  }

  .add-row {
    align-self: flex-start;
    margin-left: 5%;
  }
}

/* FOOTER */
.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
  background: #f4f2ed;
  color: #261814;
  height: 70px;
}

.footer-right {
  display: flex;
  gap: 14px;
}

.footer-right a {
  width: 38px;
  height: 38px;
  border: 1.5px solid #261814;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #261814;
  text-decoration: none;
  transition: all 0.25s ease;
}

.footer-right i {
  font-size: 16px;
}

.footer-right a:hover {
  transform: scale(1.1);
  opacity: 0.85;
}

@media (max-width: 768px) {
  .footer {
    flex-direction: column;
    height: auto;
    padding: 30px 20px;
    gap: 20px;
    text-align: center;
  }

  .footer-left {
    font-size: 14px;
    border-bottom: 1px solid rgba(38, 24, 20, 0.15);
    padding-bottom: 15px;
    width: 100%;
  }

  .footer-right {
    justify-content: center;
    gap: 18px;
  }

  .footer-right a {
    width: 44px;
    height: 44px;
  }

  .footer-right i {
    font-size: 14px;
  }
}

/* ============================= */
/* WORDPRESS / THEME OVERRIDES   */
/* ============================= */

/* Full-bleed hero even inside WP containers */
.sisa-page .hero{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Prevent theme styles from turning the toggle into big pills */
.sisa-page .signup-toggle .toggle-option{
  all: unset;                 /* resets theme button styles */
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  cursor: pointer;
  opacity: 0.9;
}

/* Keep the dot visible after `all: unset` */
.sisa-page .signup-toggle .toggle-dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.9);
  display: inline-block;
  position: relative;
  flex: 0 0 auto;
}

/* Ensure active dot fill shows */
.sisa-page .toggle-option.active .toggle-dot{
  border-color: rgba(255, 255, 255, 1);
}
.sisa-page .toggle-option.active .toggle-dot::after{
  content: "";
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, 1);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Panels must obey our show/hide rules even if WP adds styles */
.sisa-page .signup-panel{ display: none !important; }
.sisa-page .signup-panel.active{ display: block !important; }

/* Forms: protect input/button visuals */
.sisa-page .signup-form input{
  appearance: none;
  -webkit-appearance: none;
  background: #ffffff !important;
  color: #261814;
}
.sisa-page .subscribe-btn{
  background: #261814 !important;
  color: #ffffff !important;
  border-radius: 50px !important;
}


/* Keep +/- controls from clashing with the first input */
.sisa-page .row-controls,
.sisa-page .row-spacer{
  width: 74px;
  min-width: 74px;
  height: 32px;
  flex-shrink: 0;
}