/* Use the imported fonts */
body {
    font-family: 'Signika', Arial, sans-serif;
    margin: 0;
    padding: 0;
    background: #f9f9f9;
  }
  
  nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #7143CD;
    padding: 0.7em 2em;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    transition: transform 0.35s cubic-bezier(.4,0,.2,1);
    will-change: transform;
  }
  nav.hide-nav {
    transform: translateY(-110%);
  }
  
  .nav-left {
    display: flex;
    align-items: center;
  }
  
  .nav-icon {
    height: 36px;
    margin-right: 12px;
  }
  
  .nav-logo {
    height: 30px;
  }
  
  .nav-right {
    display: flex;
    align-items: center;
    gap: 1.2em;
  }
  
  .nav-link {
    color: #fff;
    text-decoration: none;
    font-weight: 400; /* light - 300, regular - 400, medium - 500, semibold - 600, bold - 700 */
    font-family: 'Signika', Arial, sans-serif;
    padding: 6px 12px;
    border-radius: 20px;
    transition: background 0.2s, color 0.2s;
    font-size: 1.08em;
    background: none;        /* No background by default */
  }
  
  /* Only the text color changes on active page */
  .nav-link.active {
    color: #FBA116;
    background: none;        /* No background */
  }
  
  /* On hover, background shows and text turns purple for contrast */
  .nav-link:hover {
    color: #FBA116;
    background: none;
  }
  


  /* Hamburger styles */
  .nav-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    cursor: pointer;
    margin-left: 8px;
    z-index: 1001;
  }
  .nav-hamburger span {
    display: block;
    width: 24px;
    height: 2.5px;
    margin: 3px 0;
    background: #fff;
    border-radius: 2px;
    transition: 0.3s;
  }
  .nav-close {
    display: none;
  }
  
  /* Submenu styles */
  .nav-has-submenu {
    position: relative;
    padding: 6px 12px;
    color: #fff;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
  }
  .nav-has-submenu:after {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-left: 6px;
    background: #fff;
    mask: url('data:image/svg+xml;utf8,<svg width="20" height="20" fill="none" stroke="black" stroke-width="2" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M6 8l4 4 4-4" stroke="black" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / contain no-repeat;
    border-radius: 6px;
    vertical-align: middle;
    transition: background 0.2s;
  }
  .nav-has-submenu:hover:after,
.nav-has-submenu:focus-within:after {
  background: #FBA116 !important;  /* Arrow turns orange */
  transition: background 0.2s;
}
  .nav-submenu {
    position: absolute;
    left: 0;
    top: 100%;
    min-width: 200px;
    background: #7143CD;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.11);
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 0.24s cubic-bezier(.4,0,.2,1), transform 0.24s cubic-bezier(.4,0,.2,1);
    z-index: 99;
    display: flex;
  }
  
  /* When open (hover/focus for desktop, or inline style for mobile) */
  .nav-has-submenu:hover .nav-submenu,
.nav-has-submenu:focus-within .nav-submenu {
  display: flex;
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}
  .nav-has-submenu.open .nav-submenu {
    max-height: 350px;
    opacity: 1;
    transition: max-height 0.28s cubic-bezier(.4,0,.2,1), opacity 0.19s cubic-bezier(.4,0,.2,1);
  }
  .nav-submenu a {
    color: #fff;
    text-decoration: none;
    padding: 10px 16px;
    display: block;
    font-size: 0.97em;
    transition: background 0.2s, color 0.2s;
  }
  .nav-submenu a:hover,
.nav-submenu a:focus {
    background: none !important;  /* No background change */
    color: #FBA116 !important;    /* Only text turns orange */
    text-decoration: none;
}
  
  .nav-has-submenu:hover .nav-submenu,
  .nav-has-submenu:focus-within .nav-submenu {
    display: flex;
  }

  
  
  h1 {
    font-family: 'Grand Hotel', cursive;
    font-size: 2.7em;
  }

  h2s {
    font-family: 'Grand Hotel', cursive;
    font-size: 2.7em;
    color: #FFF;
    display:block;
    margin:.6em 0 0 0;   /* small space under "Pune’s" */
    line-height:1;
  }
  
  p {
    font-family: 'Signika', Arial, sans-serif;
    font-size: 1.15em;
  }
  

  .title {
    margin-bottom: 1.5em;
    color: #7143CD;
    font-size: 2em;
    font-family: 'Signika', Arial, sans-serif;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-align: center;
  }


  footer {
    background: #000;
    color: #fff;
    font-family: 'Signika', Arial, sans-serif;
    padding: 2.2em 0 1.2em 0;
    margin-top: 4em;
  }
  
  .footer-container {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 0 2em;
    margin-bottom: 2em;
  }
  
  .footer-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-width: 180px;
    margin-right: 2em;
    margin-top: 1em;
    gap: 0.6em; /* slight gap between elements */
  }
  
  .footer-logo {
    height: 44px;
    width: auto;
    margin-right: 1em;
  }

  .footer-social-row {
    display: flex;
    flex-direction: row;
    gap: 0.7em;
    margin-top: 1em;
    margin-bottom: 0.7em;
  }
  
  .footer-social-icon {
    width: 36px;
    height: 36px;
    opacity: 1;
    transition: opacity 0.2s, filter 0.2s;
  }
  
  
  .footer-tagline {
    color: #fff;
    font-size: 1.04em;
    font-weight: 500;
    letter-spacing: 0.03em;
    opacity: 0.8;
    margin-top: 0.2em;
  }
  
  .footer-right {
    display: flex;
    flex: 1 1 300px;
    justify-content: flex-end;
    gap: 3em;
  }
  
  .footer-col {
    min-width: 180px;
  }
  
  .footer-col h3 {
    font-size: 1.13em;
    margin-bottom: 0.8em;
    font-weight: 700;
    font-family: 'Signika', Arial, sans-serif;
    letter-spacing: 0.02em;
  }
  
  .footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .footer-links li {
    margin-bottom: 0.6em;
  }
  
  .footer-links a {
    color: #fff;
    text-decoration: none;
    font-weight: 400;
    font-size: 1em;
    transition: color 0.2s;
  }
  
  .footer-links a:hover {
    color: #FBA116;
    text-decoration: underline;
  }
  
  .footer-email {
    color: #fff;
    text-decoration: underline;
    font-weight: 600;
    font-size: 1.04em;
    transition: color 0.2s;
    word-break: break-all;
  }
  
  .footer-email:hover {
    color: #FBA116;
  }
  


  .ads-hero{
    padding-top: calc(var(--nav-h, 70px) + 34px);
    padding-bottom: 48px;
    background:
      radial-gradient(1200px 600px at 85% -50%, #e9e2ff 0%, #faf8ff 30%, rgba(250,248,255,0) 60%),
      radial-gradient(900px 480px at -20% 30%, #fff2dc 0%, rgba(255,242,220,0) 55%);
    border-bottom: 1px solid #efe7ff;
  }
  .ads-hero .container{
    max-width: 1100px; margin: 0 auto; padding: 0 18px; text-align: center;
  }
  .ads-eyebrow{
    display:inline-block; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
    color:#FBA116; margin-bottom:6px;
  }
  .ads-title{
    margin:.1em 0 .2em; font: 700 clamp(22px,3.6vw,30px) "Signika",sans-serif; color:#7143CD;
  }
  .ads-sub{
    margin:0 auto; max-width: 760px; color:#4e3d76; font-size: 1.02rem; line-height:1.45;
  }


  .contact-cta{
  display:grid;
  place-items:center;
  gap:.8rem;
  text-align:center;
  padding:4.2rem 1rem 2.6rem;
  margin: 1.5rem auto 0;
  border-top:1px solid rgba(0,0,0,.06);
  width: min(100%, 1200px);
}
.contact-cta h2{
  margin:0;
  font-family:"Signika", sans-serif;
  font-weight:700;
  font-size:clamp(20px,3vw,28px);
  color: var(--smize-purple, #7143CD);
}
.contact-cta .smize-btn{ 
  /* keeps your existing button styling; just a tiny top nudge */
  margin-top:.1rem;
}


  .dashboard-cube-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 3em 3em;
    margin: 3em;
    margin-top: 0.3em;
    padding-bottom: 3em;
  }
  
  .dashboard-cube {
    background: #F8F7FD;
    border-radius: 22px;
    box-shadow: 0 2px 18px rgba(113,67,205,0.10);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 26px 12px 17px 12px;
    text-decoration: none;
    transition: box-shadow 0.18s, transform 0.18s;
    cursor: pointer;
    position: relative;
    border: 2px solid #f3effd;
  }
  .dashboard-cube:hover, .dashboard-cube:focus {
    box-shadow: 0 4px 28px rgba(113,67,205,0.13);
    transform: translateY(-4px) scale(1.025);
    border-color: #7143CD33;
  }
  
  .cube-svg-wrapper {
    width: 56px;
    height: 56px;
    margin-bottom: 10px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .dashboard-cube-icon {
    display: block;
    width: 56px;
    height: 56px;
  }
  
  .dashboard-cube-plus
  
  .dashboard-cube-name {
    margin-top: 3px;
    font-family: 'Signika', Arial, sans-serif;
    font-size: 1.1em;
    font-weight: 600;
    color: #7143cd;
    text-align: center;
    letter-spacing: 0.02em;
  }

  .dashboard-cube-name,
.dashboard-cube:link .dashboard-cube-name,
.dashboard-cube:visited .dashboard-cube-name,
.dashboard-cube:hover .dashboard-cube-name,
.dashboard-cube:active .dashboard-cube-name {
  color: #7143CD !important;
}




.smize-form {
  display: flex;
  flex-direction: column;
  gap: 0.67em;
  max-width: 920px;
  margin: 84px auto 40px auto;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 24px #7143cd13;
  padding: 1.5em 2.3em;
}

.smize-label {
  font-size: 1.07em;
  color: #6541a9;
  font-weight: 600;
  margin-bottom: 0.08em;
  margin-top: 0.31em;
  font-family: 'Signika', Arial, sans-serif;
}

.smize-input, .smize-form select, .smize-form textarea {
  font-family: 'Signika', Arial, sans-serif;
  font-size: 1.06em;
  border-radius: 8px;
  border: 1.3px solid #c8bff1;
  padding: 0.8em 1em;
  margin-bottom: 0.07em;
  background: #f9f7ff;
  transition: border 0.18s;
  width: 100%;
  box-sizing: border-box;
  outline: none;
}

.smize-input:focus, .smize-form select:focus, .smize-form textarea:focus {
  border-color: #7143CD;
  background: #f2effa;
}

.smize-btn {
  background: #7143CD;
  color: #fff;
  font-size: 1.14em;
  border: none;
  border-radius: 9px;
  font-weight: 700;
  cursor: pointer;
  padding: 0.95em 0;
  margin-top: 1.5em;
  transition: background 0.16s;
  font-family: 'Signika', Arial, sans-serif;
  box-shadow: 0 2px 18px #7143cd1c;
}
.smize-btn:hover {
  background: #5932b2;
}


.smize-btn2 {
  background: #7143CD;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.75em 1.45em;
  font-size: 1.06em;
  font-family: 'Signika', Arial, sans-serif;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px #7143cd16;
  transition: background 0.18s, box-shadow 0.18s;
}
.smize-btn2 {
  background: #5932b2;
  box-shadow: 0 4px 16px #7143cd26;
}


.smize-note {
  font-size: 0.97em;
  color: #7143cd;
  margin-bottom: 0.24em;
}

.smize-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 0.7em;
  margin-top: 1.2em;
  margin-bottom: 1.3em;
}


.smize-multiselect {
  position: relative;
  width: 100%;
  min-width: 200px;
  margin-bottom: 0.45em;
  user-select: none;
}

.smize-multiselect-search { width: 100%; margin-bottom: 3px; padding: 7px 11px; border: 1px solid #cfc6f7; border-radius: 7px; }

.smize-multiselect-selected {
  min-height: 44px;
  background: #f9f7ff;
  border: 1.3px solid #c8bff1;
  border-radius: 8px;
  padding: 0.7em 0.7em 0.7em 0.7em;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  cursor: pointer;
  align-items: center;
  box-sizing: border-box;
}

.smize-multiselect-selected:empty::before {
  content: "Click to select options...";
  color: #bbb;
  font-size: 1.01em;
}

.smize-multiselect-pill {
  background: #7143CD;
  color: #fff;
  padding: 0.22em 0.85em 0.22em 0.67em;
  border-radius: 15px;
  font-size: 1.01em;
  margin: 0.07em 0;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5em;
  transition: background 0.16s;
}
.smize-multiselect-pill:hover {
  background: #5932b2;
}

.smize-multiselect-pill-remove {
  color: #fff;
  font-size: 1.14em;
  margin-left: 0.3em;
  font-weight: 600;
  cursor: pointer;
}

.smize-multiselect-dropdown {
  display: none;
  position: absolute;
  z-index: 22;
  left: 0;
  right: 0;
  top: 110%;
  background: #fff;
  border: 1.3px solid #c8bff1;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 7px 18px #7143cd19;
  padding: 0.15em 0.3em;
  max-height: 220px;
  overflow-y: auto;
}

.smize-multiselect-dropdown.show {
  display: block;
}

.smize-multiselect-option {
  padding: 0.7em 1em;
  font-size: 1.04em;
  cursor: pointer;
  border-radius: 7px;
  transition: background 0.13s;
}

.smize-multiselect-option:hover {
  background: #f3effd;
  color: #7143CD;
}
.smize-multiselect-option.selected {
  background: #ede7fa;
  color: #6541a9;
  font-weight: 600;
}


 .dashboard-content {
    max-width: 1100px;
    margin: 0 auto;
    padding: 80px 18px 0 18px;
  }
  
  .dashboard-greeting {
    font-family: 'Signika', Arial, sans-serif;
    font-weight: 700;
    font-size: 2.1em;
    margin: 36px 0 36px 0;
    color: #7143CD;
    text-align: left;
  }

  .tickets-table-header {
  display: grid;
  grid-template-columns: 1.2fr 1.2fr 0.9fr 40px;
  align-items: center;
  background: #f7f6fd;
  color: #7143CD;
  font-weight: 700;
  padding: 12px 20px 12px 20px;
  border-radius: 12px 12px 0 0;
  border: 1.5px solid #e7e2fd;
  margin-bottom: 2px;
  font-size: 1.07em;
  letter-spacing: 0.01em;
}

.tickets-table-row {
  display: grid;
  grid-template-columns: 1.2fr 1.2fr 0.9fr 40px;
  align-items: center;
  background: #F8F7FD;
  color: #3a246c;
  font-size: 1.04em;
  padding: 14px 20px 14px 20px;
  border-radius: 0;
  margin-bottom: 2px;
  border: 1.5px solid #f3effd;
  cursor: pointer;
  transition: box-shadow 0.16s, background 0.12s;
}
.tickets-table-row:hover {
  background: #edeafb;
  box-shadow: 0 4px 14px #7143cd18;
}

.tickets-table-row:first-child {
  border-radius: 0 0 0 0; /* Still no rounding for first row, unless single row case */
}

.tickets-table-row:last-child {
  border-radius: 0 0 14px 14px; /* Rounded only for last row */
}

.tickets-table-arrow {
  text-align: center;
  font-size: 1.6em;
  color: #7143CD;
}

.header-meta{
  display:flex;
  flex-wrap:wrap;        /* ‼️ lets items wrap instead of overflowing */
  column-gap:1.6em;      /* horiz gap */
  row-gap:.55em;         /* vert gap when it wraps */
  margin-bottom:1em;
  align-items:flex-start;
}
.header-meta > span{
  white-space:nowrap;    /* keep “label + value” together */
  line-height:1.3;
}

.meta-label {
  color: #7143CD;
  font-weight: 600;
}
.meta-value {
  color: #191818;
  font-weight: 500;
}

.chip{
  display:inline-block;
  background:#edeafb;
  padding:4px 10px;
  border-radius:14px;
  font-size:0.95em;
  color:#5d41a3;
  box-shadow:0 1px 6px #7143cd1a;
}

.section-title  {color:#7143CD;font-weight:600;margin:22px 0 10px;}

.filters-grid  {display:flex;flex-wrap:wrap;gap:16px;}

.messages-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 2em;
}
.message-row {
  background: #f8f7fd;
  border-radius: 14px;
  margin-bottom: 10px;
  padding: 13px 18px;
  font-size: 1em;
  box-shadow: 0 2px 10px #7143cd12;
  display: flex;
  flex-direction: column;
  max-width: 650px;
  word-break: break-all;
}

.message-employee { align-self: flex-end; background: #ece7fa; color: #5737a6;}

.message-meta {
  font-size: 0.93em;
  color: #937ac7;
  margin-bottom: 0.2em;
}
.reply-box {
  display: flex;
  gap: 0.7em;
  margin-bottom: 2em;
  margin-top: 1.5em;
  align-items: flex-end;
}
.reply-input {
  flex: 1;
  border-radius: 9px;
  border: 1px solid #d5c5f7;
  padding: 10px 13px;
  font-size: 1.04em;
  background: #f9f7fc;
  min-height: 48px;
  resize: vertical;
}
.reply-btn {
  background: #7143cd;
  color: #fff;
  border: none;
  border-radius: 9px;
  padding: 10px 18px;
  font-size: 1em;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.15s;
}


  @media (max-width: 900px) {
    .footer-container {
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 0 1em;
    }
    .footer-right {
      flex-direction: column;
      align-items: center;
      gap: 2em;
      margin-top: 2em;
    }
    .footer-left {
        align-items: center;
        margin-right: 0;
        margin-bottom: 1.2em;
        gap: 0.4em;
      }
      .footer-social-icon {
        width: 36px;
        height: 36px;
      }

      nav {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 0.7em 1em;
      }
      .nav-left {
        justify-content: flex-start;
        margin-bottom: 0;
      }
      .nav-logo {
        height: 30px;
      }
      #navMenu { width: 60vw; max-width: 260px; }
      .nav-hamburger {
        display: flex;
        margin-right: 0;
      }
      .nav-right {
        position: fixed;
        top: 0;
        right: 0;
        width: 78vw;
        max-width: 330px;
        height: 100vh;
        background: #7143CD;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        transform: translateX(120%);
        transition: transform 0.3s;
        box-shadow: -2px 0 18px rgba(0,0,0,0.11);
        padding: 0;
        z-index: 1100;
        border-radius: 0 0 0 18px;
        padding-top: 58px;
      }
      .nav-right.open {
        transform: translateX(0%);
      }
      .nav-link,
      .nav-has-submenu {
        position: relative;
        overflow: visible !important;
        width: 100%;
        text-align: left;
        padding: 17px 30px;
        font-size: 1.13em;
        border-radius: 0;
        background: none;
        color: #fff;
        border-bottom: 1px solid rgba(255,255,255,0.07);
        box-sizing: border-box;
      }

      .nav-has-submenu .nav-submenu {
        left: 10vw;
        transition: opacity 0.18s, transform 0.21s;
      }
      .nav-has-submenu:after {
        float: right;
      }
      .nav-submenu {
        position: absolute !important;
        left: 0;
        top: 100%;
        min-width: 190px;
        width: max-content;
        background: #5b2c99;
        border-radius: 11px;
        box-shadow: 0 4px 14px rgba(0,0,0,0.19);
        padding-left: 0;
        z-index: 9999;
        display: flex;
        opacity: 0;
        pointer-events: none;
        transform: translateY(8px) scale(0.96);
        transition: opacity 0.2s, transform 0.22s;
      }
      .nav-submenu a {
        padding: 12px 0 12px 12px;
        font-size: 1em;
        border-bottom: 1px solid rgba(255,255,255,0.05);
      }
      .nav-close {
        display: block;
        position: absolute;
        top: 16px;
        right: 16px;
        background: none;
        border: none;
        color: #fff;
        cursor: pointer;
        z-index: 1200;
        padding: 0 0.25em;
        line-height: 1;
      }
      .nav-close-icon {
        width: 18px;       /* Adjust size as needed */
        height: 18px;
        display: block;
        transition: filter 0.18s;
      }

      .dashboard-content {
        padding-top: 80px;
      }
      .dashboard-greeting {
        font-size: 1.27em;
        margin: 26px 0 22px 0;
        text-align: center;
      }
    }


  /* Hide nav for print */
  @media print {
    nav {
      display: none;
    }
  }

  
  @media (max-width: 600px) {

    p {
      font-family: 'Signika', Arial, sans-serif;
      font-size: 1.05em;
    }

    .footer-col {
      min-width: 120px;
    }
    .footer-logo {
      height: 34px;
    }
    footer {
      padding: 1.5em 0 1em 0;
    }
    .footer-social-icon {
        width: 34px;
        height: 34px;
      }
      .footer-tagline {
        font-size: 0.97em;
      }

      .dashboard-content {
        padding-top: 80px;
      }

      .header-meta       {column-gap:.9em;row-gap:.8em;}
  .header-meta > span{font-size:.96em;}     /* slightly smaller text */
  .chip              {font-size:.88em;}
  .reply-input {
        padding: 10px 13px 50px;
      }
  }
  


/* Prevent Safari from "helping" with scroll anchoring during the collapse */
html { overflow-anchor: none; }

/* Nudge GPU compositing to avoid white flashes */
@supports (-webkit-touch-callout: none) {
  .intro-seq, .hero { transform: translateZ(0); backface-visibility: hidden; }
  .intro-seq { will-change: height; }
}

.intro-seq,
.intro-stage,
.hero {
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
  isolation: isolate;
}

  /* ------------------------------------------------------------------
       Design tokens (reusable, app-wide)
    ------------------------------------------------------------------ */
    :root{
      --smize-purple:#7143CD;
      --smize-purple-600:#5932b2;
      --smize-orange:#FBA116;
      --ink:#0f0f11;
      --ink-2:#2b213f;
      --bg:#f9f9fb;
      --card:#ffffff;
      --radius-xl:22px;
      --radius-lg:16px;
      --radius-md:12px;
      --shadow-sm:0 2px 10px rgba(113,67,205,.12);
      --shadow-md:0 8px 28px rgba(113,67,205,.18);
      --shadow-lg:0 18px 60px rgba(17,8,46,.22);
      --max-w:1100px;
      --ease: cubic-bezier(.4,0,.2,1);
      --intro-h: clamp(520px, 78vh, 760px);         /* scene height */
      --intro-top: calc(var(--nav-h, 70px) + 10px); /* sticky offset below nav */
      --intro-steps: 7; /* JS overwrites based on data-step in markup */
       --art-x: 50%;
    }

    /* Base */
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; font-family:'Signika', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color:var(--ink); background:var(--bg);
      line-height:1.45;
      -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
    }
    a{color:inherit; text-decoration:none}
    img{max-width:100%; display:block}
    .container{max-width:var(--max-w); margin:0 auto; padding:0 20px}
    .section{padding:40px 0}
    .section.compact{padding:54px 0}
    .eyebrow{display:inline-block; font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:1.22rem; color:var(--smize-orange)}
    .headline{font-family:'Signika', cursive; font-size:52px; line-height:1.02; margin:.15em 0 .25em; color:var(--ink)}
    .subhead{font-size:1.15rem; color:#3c2a63; max-width:720px}
    .btn{display:inline-flex; align-items:center; justify-content:center; gap:.5em; background:var(--smize-purple); color:#fff; padding:14px 18px; border-radius:12px; font-weight:700; box-shadow:0 4px 16px #7143cd33; transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease)}
    .btn:hover{transform:translateY(-2px); background:var(--smize-purple-600); box-shadow:0 10px 28px #7143cd42}
    .btn.secondary{background:#efe9ff; color:var(--smize-purple); box-shadow:0 2px 9px #7143cd2a}
    .btn.secondary:hover{background:#e8e0ff}
    .btn.pill{border-radius:999px; padding:12px 18px}

    
/* --- INTRO (solid purple bg) --- */
.intro-seq{
  position:relative;
  height: calc((var(--intro-steps) + 1) * 72vh);
  background:#7143cd;
}
.intro-pin{height:100%}

.intro-stage{
  position:sticky;
  top:var(--intro-top);
  height:var(--intro-h);
  width: 100vw;     /* was max-width:min(1100px,92vw) */
  max-width: none;  /* remove cap that created side space */
  margin:0 auto;
  overflow:visible;
}

/* Copy */
.intro-copy{
  position:absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%, -50%);
  text-align:center;
  z-index:20;
  transition: transform .45s var(--ease), top .45s var(--ease), right .45s var(--ease), left .45s var(--ease), text-align .45s var(--ease), max-width .45s var(--ease);
}
.intro-headline{
  margin:0;
  color:#fff;
  font-weight: 600;
  font-size:clamp(28px,5.2vw,44px);
  text-shadow:0 2px 14px rgba(3,0,16,.28);
}

.intro-copy.intro-copy--collapsed{
  transition: none !important;
}

/* Base layer behavior */
.layer{
  position:absolute; inset:0;
  opacity:0;
  filter:blur(2px);
  transform:translateY(22px) scale(1.02);
  transition:opacity .5s var(--ease), transform .6s var(--ease), filter .6s var(--ease);
  will-change:opacity,transform;
}
.layer.on{ opacity:1; filter:none; transform:none }

/* -------------------------
   Background art (aligned to the stage, not the viewport)
   We size them from the actual stage width/height via JS vars.
--------------------------*/
:root{
  /* will be populated by JS to match the sticky stage box */
  --stage-w: 900px;
  --stage-h: 600px;
}

/* Balloon: anchored to the right, gentle bob */
.l-bg-balloon{
  z-index:2;
  pointer-events:none;
  background:
    url("assets/intro/background%20hot-air-baloon.svg")
    right 7% top calc(var(--stage-h) * .10) /         /* 10% down from top of stage */
    clamp(180px, calc(var(--stage-w) * .30), 520px) auto
    no-repeat;
  animation:balloon 12s ease-in-out infinite;
}
@keyframes balloon{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }


/* Clouds: sit near the top, span wider than the stage */
.l-bg-clouds {
  z-index: 0; /* ensures they stay behind the balloon */
  pointer-events: none;
  background:
    /* first, one large cloud group near left */
    url("assets/intro/backgorund%20clouds.svg")
      left 40% top calc(var(--stage-h) * .06) /
      clamp(260px, calc(var(--stage-w) * .32), 460px) auto no-repeat,

    /* second, mid-sized group further toward center */
    url("assets/intro/backgorund%20clouds.svg")
      left 2% top calc(var(--stage-h) * .28) /
      clamp(220px, calc(var(--stage-w) * .28), 400px) auto no-repeat;
}

.l-bg-clouds,
.l-bg-balloon{
  transform: none !important;
}
.l-bg-clouds.on,
.l-bg-balloon.on{
  transform: none !important;  /* prevents the slide-left on "on" */
}

/* Foreground composited elements (2..7) share a single bottom-center anchor.
   Because all exports share the same artboard, they will line up pixel-perfect. */
.l-art{
  inset:auto;
  left:50%;
  bottom:clamp(8px,3vh,24px);
  transform:translateX(-50%) translateY(26px) scale(1.02);
  width:clamp(300px, min(92vw, calc(var(--stage-w))), 920px);
  height:auto;
  z-index:10;
  object-fit:contain;
}
.l-art-1{ z-index:9; } /* base sits slightly below later elements */


@media (min-width: 1020px){
  /* Move the stacked SVG composition left */
  :root{ --art-x: 28%; }   /* tweak 34–40% to taste */

  /* reduce the overall foreground size */
  .l-art{
    width: clamp(280px, 65vw, 760px); /* previously wider, now smaller */
  }

  /* tighten its line width a bit */
  .intro-headline{
    font-size: clamp(28px,4vw,36px);
    max-width: 480px;
  }
  /* Put the copy on the right and left-align it */
  .intro-copy--side{
  left: auto;
  right: clamp(60px, 6vw, 160px);
  transform: none;
  text-align: center;
  top: clamp(240px, 9vh, 80px);
  max-width: 520px;
}
/* after the intro collapses, nudge the copy a bit left */
.intro-copy--side.intro-copy--collapsed{
  top: clamp(280px, 9vh, 80px);
  right: clamp(10px, 7vw, 120px);
}

.intro-stage .intro-copy.intro-copy--side.intro-copy--collapsed{
    top: clamp(310px, 16vh, 420px) !important;
    right: clamp(80px, 6vw, 160px) !important;
  }
  
.intro-stage .intro-copy--collapsed ~ .l-art{
    /* default was --art-x: 24% via :root; bump it for the collapsed state */
    --art-x: 28%;
    bottom: clamp(130px, 9vh, 140px);
  }

  .intro-stage .intro-copy--collapsed ~ .l-bg-balloon{
    background-position: right 5% top calc(var(--stage-h) * .14);
  }

  .intro-stage .intro-copy--collapsed ~ .l-bg-clouds{
    background-position:
      left 40% top calc(var(--stage-h) * 0.12),
      left 2%   top calc(var(--stage-h) * 0.34);
  }


  .l-bg-balloon{
    background:
      url("assets/intro/background%20hot-air-baloon.svg")
      right 5% top calc(var(--stage-h) * .08) /
      clamp(280px, calc(var(--stage-w) * .40), 680px) auto no-repeat;
  }


  .hero .container,
  section.section .container {
    max-width: 90vw;    /* 90% of viewport width */
    width: 90vw;
    margin-left: auto;
    margin-right: auto;
  }

  .footer-container{
    max-width: 90vw;
    width: 90vw;
    margin-left: auto;
    margin-right: auto;
  }
}


@media (max-width: 1019px){
  .intro-copy--side{
    top: clamp(16px, 10vh, 60px);
    left: 50%;
    transform: translate(-50%, 0); /* no vertical centering */
    text-align: center;
    max-width: 92vw;
  }
}

.intro-copy--side.intro-copy--collapsed{
  top: clamp(280px, 9vh, 80px);
  right: clamp(20px, 7vw, 120px);
}

/* Use the horizontal anchor for the foreground SVG stack */
.l-art{
  left: var(--art-x);             /* was: 50% */
  transform: translateX(calc(-1 * var(--art-x))) translateY(26px) scale(1.02);
}
/* When layers turn on, keep the same anchor math */
.layer.on{
  transform: translateX(calc(-1 * var(--art-x))) translateY(0) scale(1);
}


/* Phones sit near the bottom, sized responsively */
.l-phone{
  width: min(33vw, 280px);
  height: auto;
  inset: auto;
  bottom: clamp(10px, 3.2vh, 28px);
}
.l-center{
  left: 50%; transform: translate(-50%, 26px) scale(1.02);
}
.l-left{
  left: max(6vw, 16px); transform: translateY(20px) rotate(-6deg);
}
.l-right{
  right: max(6vw, 16px); transform: translateY(20px) rotate(6deg);
}

/* Phones */
.l-phone{ width: clamp(130px, 28vw, 260px); aspect-ratio: 9/19.5; border-radius: 28px; box-shadow: var(--shadow-lg); object-fit: cover; }
.l-center{ bottom: calc(20px + 8px); z-index: 3; transform: translateX(-50%) translateY(60px) scale(.86); }
.l-left  { bottom: calc(20px + 4px); z-index: 2; left: 32%; transform: translateX(-50%) translateY(100px) rotate(-10deg) scale(.86); }
.l-right { bottom: calc(20px + 4px); z-index: 2; left: 68%; transform: translateX(-50%) translateY(100px) rotate(10deg)  scale(.86); }

/* When JS toggles .on they fade/slide in */
.layer.on{ opacity:1; transform: translateX(-50%) translateY(0) scale(1); }
.l-left.on  { transform: translateX(-50%) translateY(0) rotate(-6deg) scale(1); }
.l-right.on { transform: translateX(-50%) translateY(0) rotate(6deg)  scale(1); }

/* Mobile tuning */
@media (max-width:640px){
  :root{ --intro-h: clamp(520px, 86vh, 720px); }

  .intro-copy--side{
  top: clamp(120px, 9vh, 80px);
}

.intro-stage .intro-copy--collapsed ~ .l-art{
    bottom: clamp(70px, 11vh, 140px);
  }
  
  .intro-copy--side.intro-copy--collapsed{
  top: clamp(200px, 9vh, 80px);
}

.intro-stage .intro-copy--collapsed ~ .l-bg-clouds{
    background-position:
      /* Keep same left %, only nudge top slightly upward */
      left 10% top calc(var(--stage-h) * 0.35),
      left 2%  top calc(var(--stage-h) * 0.265);
  }
  
  .l-bg-clouds {
    background:
      url("assets/intro/backgorund%20clouds.svg")
        left 2% top calc(var(--stage-h) * .40) /
        clamp(220px, calc(var(--stage-w) * .30), 400px) auto no-repeat;
  }
  .l-bg-balloon{
    background-size: clamp(160px, calc(var(--stage-w) * .36), 420px) auto;
    background-position: right 4% top calc(var(--stage-h) * .08);
  }
  .l-art{ width:min(94vw, calc(var(--stage-w) * 1.02)); }
  .l-left{ left: 28%; }
  .l-right{ left: 72%; }
}

    /* Sticky mini-CTA */
.sticky-cta{
  position:fixed; left:50%; bottom:-80px; transform:translateX(-50%);
  background:#0e0d11; color:#fff;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 14px 36px rgba(0,0,0,.28);
  border-radius:999px; padding:10px 14px; z-index:1200;
  transition:bottom .35s cubic-bezier(.4,0,.2,1);
}
.sticky-cta.show{ bottom:18px; }
.sticky-cta__inner{
  display:flex; gap:10px; align-items:center; justify-content:center;
}
.sticky-cta .btn{ padding:10px 14px; border-radius:999px; }
@media (max-width:520px){
  .sticky-cta{ left:12px; right:12px; transform:none; border-radius:16px; }
  .sticky-cta__inner{
    width:100%;
    justify-content:center;
    flex-wrap:wrap;           /* allows wrap if text + button are tight */
  }
}

    /* ------------------------------------------------------------------
       Hero
    ------------------------------------------------------------------ */
    .hero{position:relative; padding-top:130px; overflow:hidden; background:
      radial-gradient(1200px 600px at 85% -50%, #e9e2ff 0%, #faf8ff 30%, rgba(250,248,255,0) 60%),
      radial-gradient(900px 480px at -20% 30%, #fff2dc 0%, rgba(255,242,220,0) 55%)}
    .hero .container{display:grid; grid-template-columns:1.15fr .95fr; gap:34px; align-items:center}
    .hero-badge{margin-bottom: 12px; display:inline-flex; align-items:center; gap:.5em; background:#fff; border:1px solid #efe7ff; padding:8px 12px; border-radius:999px; box-shadow:var(--shadow-sm)}
    .hero-badge i{width:8px; height:8px; border-radius:999px; background:var(--smize-orange)}
    .hero-cta{display:flex; gap:12px; margin-top:18px; flex-wrap:wrap}
    .hero-legal{font-size:.92rem; color:#5a4c7c; opacity:.9; margin-top:18px}
    .hero {
      padding-bottom: 200px; /* increase background height */
    }
    

    .phones{position:relative; height:520px}
    .phone{position:absolute; width:250px; aspect-ratio:9/19.5; background:#000; border-radius:16px; box-shadow:var(--shadow-lg); overflow:hidden; transform-origin:center center; animation:float 6s var(--ease) infinite}
    .phone.frame{background:#111}
    .phone.s1{left:12%; top:40px; transform:rotate(-10deg); animation-delay:.1s}
    .phone.s2{left:40%; top:0; transform:rotate(8deg); animation-delay:.6s}
    .phone.s3{left:66%; top:70px; transform:rotate(-4deg); animation-delay:1s}
    .phone img{width:100%; height:100%; object-fit:cover}

    .blob{position:absolute; filter:blur(40px); opacity:.7; pointer-events:none}
    .blob.purple{background:radial-gradient(closest-side, #7d59d9, rgba(125,89,217,0) 75%); width:380px; height:380px; right:-80px; top:-60px}
    .blob.orange{background:radial-gradient(closest-side, #ffb44a, rgba(255,180,74,0) 75%); width:320px; height:320px; left:-120px; bottom:-80px}

    @keyframes float{0%{transform:translateY(0) rotate(var(--r,0))} 50%{transform:translateY(-10px) rotate(var(--r,0))} 100%{transform:translateY(0) rotate(var(--r,0))}}


    @media (min-width: 1350px) {
  #introCopy.intro-copy--side,
  #introCopy.intro-copy--collapsed,
  .intro-stage .intro-copy.intro-copy--side.intro-copy--collapsed {
    right: 12rem !important; /* pulls left */
  }
}

/* Slightly lower for collapsed version only on big + tall screens */
@media (min-width: 1350px) and (min-height: 800px) {
  .intro-stage .intro-copy.intro-copy--side.intro-copy--collapsed {
    top: 46% !important; /* was 40% — just a bit lower */
  }

  /* keep the normal side version at 40% */
  #introCopy.intro-copy--side {
    top: 40% !important;
  }
}

@media (min-width: 520px) and (max-width: 720px) and (min-height: 700px) {
  #introCopy.intro-copy--side {
    top: 6vh !important;        /* move the main intro UP */
  }
  #introCopy.intro-copy--side.intro-copy--collapsed,
  #introCopy.intro-copy--collapsed {
    top: 15vh !important;        /* collapsed version slightly lower than main */
  }
}
    /* ------------------------------------------------------------------
       Feature grid
    ------------------------------------------------------------------ */
    .features{background:linear-gradient(180deg, #ffffff 0%, #fbfaff 100%)}
    .features {
  padding-top: 80px;  /* default was 84px via .section — increase slightly */
}
    .features-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:28px}
    .feature-col{ display: contents; }
    .card{background:var(--card); border:1px solid #efe7ff; border-radius:var(--radius-xl); padding:20px 18px 18px; box-shadow:var(--shadow-sm); transition:transform .16s var(--ease), box-shadow .16s var(--ease)}
    .card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md)}
    .card h3{margin:6px 0 8px; font-size:1.2rem; color:var(--ink-2)}
    .card p{color:#4e3d76; font-size:1.02rem}
    .icon-pill{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:12px; background:#ede9ff; box-shadow:0 2px 6px #7143cd1a}

    /* ------------------------------------------------------------------
       How it works (steps)
    ------------------------------------------------------------------ */
    .steps{counter-reset:step}
    .steps-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:22px}
    .step{background:#fff; border:1px solid #efe7ff; border-radius:var(--radius-lg); padding:18px; box-shadow:var(--shadow-sm)}
    .step::before{counter-increment:step; content:counter(step); display:inline-grid; place-items:center; width:34px; height:34px; border-radius:10px; background:#f3efff; color:#5b2c99; font-weight:800}
    .step h4{margin:10px 0 6px}

    /* ------------------------------------------------------------------
       For Service Providers
    ------------------------------------------------------------------ */
    .sp{background:linear-gradient(180deg,#faf8ff 0,#ffffff 100%)}
    .sp-content{display:grid; grid-template-columns:1.1fr .9fr; gap:22px; align-items:center}
    .sp-art{min-height:320px; position:relative}
    .sp-badge{position:absolute; right:8%; top:10%; background:#fff; border:1px solid #efe7ff; border-radius:14px; box-shadow:var(--shadow-sm); padding:12px 14px}

    /* ------------------------------------------------------------------
       The Lounge preview
    ------------------------------------------------------------------ */
    .lounge-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
    .lounge-card{background:#fff; border:1px solid #efe7ff; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .16s var(--ease), box-shadow .16s var(--ease)}
    .lounge-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md)}
    .lounge-card img{
  width: 100%;
  height:180px;
  object-fit: cover;       /* fill the available space */
  object-position: center;
  display: block;
}
    .lounge-card .pad{padding:14px}
    .lounge-card h4{margin:6px 0 6px}

    /* ------------------------------------------------------------------
       FAQ (details/summary)
    ------------------------------------------------------------------ */
    .faq details{background:#fff; border:1px solid #efe7ff; border-radius:12px; padding:12px 14px; box-shadow:var(--shadow-sm)}
    .faq details+details{margin-top:10px}
    .faq summary{cursor:pointer; font-weight:700; color:#512f9e}
    .faq p{margin:10px 0 0; color:#4b3b72}

    /* ------------------------------------------------------------------
       Download CTA + footer (reuses your footer styles where possible)
    ------------------------------------------------------------------ */
    .download{background:#0e0d11; color:#fff; border-radius:24px; padding:24px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; box-shadow:0 14px 36px rgba(0,0,0,.28)}
    .badges{display:flex; gap:12px; flex-wrap:wrap}
    .store-badge{display:inline-flex; align-items:center; gap:10px; background:#19181c; padding:10px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.08); box-shadow:0 2px 9px rgba(0,0,0,.32)}
    .store-badge span{display:block; font-weight:700}
    .store-badge img {border-radius: 6px;}


    .testimonials{
  padding-top: 48px;
  padding-bottom: 64px;
}
.t-carousel{
  overflow:hidden;
  position:relative;
  mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.t-track{
  display:flex;
  gap:16px;
  will-change: transform;
  animation: tscroll 28s linear infinite;
}
.t-card{
  flex:0 0 340px;
  background:#fff;
  border:1px solid #efe7ff;
  border-radius:16px;
  box-shadow:0 6px 22px rgba(113,67,205,.10);
  padding:16px 16px 14px;
}
.t-ava{
  width:40px; height:40px; border-radius:50%; object-fit:cover;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
  margin-bottom:10px;
}
.t-quote{ color:#3f2d6b; font-size:1.02rem; line-height:1.35; }
.t-name{ margin-top:10px; font-weight:700; color:#7143CD; font-size:.98rem; }

.t-carousel:hover .t-track{ animation-play-state: paused; }


.dl-bg-elements{
  position:absolute;
  bottom:0;           /* sits at the bottom of the hero */
  left:0;
  opacity:.35;
  width:100%;
  height:200px;
  pointer-events:none;
  z-index:2;          /* behind the couple (z-index:3), above clouds/balloon */
}
.dl-bg-elements .bg-el{
  position:absolute;
  width:clamp(120px,18vw,260px);
  user-select:none;
  bottom: 0;
}


@keyframes tscroll{
  from{ transform: translateX(0); }
  to{   transform: translateX(calc(-50% - 8px)); } /* half the content width + half gap */
}

@media (max-width:640px){
  .t-card{ flex-basis: 82vw; }
}


    /* ------------------------------------------------------------------
       Scroll‑reveal animations (IntersectionObserver toggles .in)
    ------------------------------------------------------------------ */
    .reveal{opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease), transform .6s var(--ease)}
    .reveal.in{opacity:1; transform:none}
    .reveal.delay-1{transition-delay:.06s}
    .reveal.delay-2{transition-delay:.12s}
    .reveal.delay-3{transition-delay:.18s}

    /* ------------------------------------------------------------------
       Responsive
    ------------------------------------------------------------------ */
    @media (max-width: 1020px){
      .hero .container{grid-template-columns:1fr}
      .phones{height:420px}
      .phone{width:210px}
      .features-grid{grid-template-columns:repeat(2,1fr)}
      .steps-grid{grid-template-columns:repeat(2,1fr)}
      .sp-content{grid-template-columns:1fr}
      .lounge-grid{grid-template-columns:repeat(2,1fr)}
    }
    @media (max-width: 640px){
  .headline{font-size:44px}
  .download{border-radius:16px}
  .hero{ padding-top: calc(var(--nav-h, 70px) + 28px); }

  /* ✅ Use GRID instead of multicolumns on mobile */
  .features-grid{
    display: grid;                 /* was: display:block + column-count */
    grid-template-columns: 1fr 1fr;
    gap: 18px;                     /* keeps gutter consistent */
    align-items: start;            /* cards start at row top */
  }

  .feature-col{
    display:flex;
    flex-direction:column;
    gap:18px;           /* same as grid gap */
  }
  
  /* Reset card hacks used for multicolumns */
  .features-grid .card{
    cursor: pointer;
    display: flex;                 /* tidy internal layout */
    flex-direction: column;
    width: auto;                   /* was: 100% (for inline-block) */
    margin: 0;                     /* no extra bottom margin, Grid uses gap */
    height: auto;                  /* allow it to grow when opened */
    /* remove multicol specific props */
    break-inside: auto;            /* was: avoid (not needed in grid) */
  }

  .features-grid .card h3{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin:6px 0;
  }

  /* Chevron indicator */
  .features-grid .card h3::after{
    content:'';
    width:18px; height:18px;
    background:#7143CD;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5"/></svg>') center / contain no-repeat;
    transition: transform .2s ease;
    flex:0 0 18px;
  }
  .features-grid .card.open h3::after{ transform: rotate(180deg); }

  /* Collapsible body (keep your smooth open/close) */
  .features-grid .card p{
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin-top: 0;
    transition:
      max-height .32s cubic-bezier(.4,0,.2,1),
      opacity .20s ease .05s,
      margin-top .32s cubic-bezier(.4,0,.2,1);
    will-change: max-height;
  }
  .features-grid .card.open p{
    max-height: 480px;
    opacity: 1;
    margin-top: 8px;
  }

  /* Keyboard focus */
  .features-grid .card:focus{
    outline: 2px dashed #7143CD;
    outline-offset: 4px;
  }
}


@media (min-width: 700px) and (max-width: 900px){
  /* Intro art lower */
  .l-art{
    bottom: -160px; /* was 0..12px */
    transform: translateX(calc(-1 * var(--art-x))) translateY(78px) scale(1.02); /* was 46px */
  }
  .layer.on{
    transform: translateX(calc(-1 * var(--art-x))) translateY(38px) scale(1); /* was 18px */
  }


  .intro-stage .intro-copy--collapsed ~ .l-art{
    bottom: 120px !important;        /* pull artwork higher than -160px */
    transform: translateX(calc(-1 * var(--art-x))) translateY(0) scale(1) !important;
  }
  /* Collapsed: name + tagline higher */
  .intro-copy--side.intro-copy--collapsed{
    top: clamp(120px, 8vh, 90px);  /* was clamp(80px, 14vh, 160px) */
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    max-width: 86vw;
    text-align: center;
  }
}

.qr-download{ display:none; width:100%; margin-top:16px; }

.download-row{
  display: flex;
  flex-direction: column;
  gap: 16px;
}


@media (min-width:641px){
  .qr-download{
    display:flex;
    justify-content:start;   /* center to the screen */
  }
  .qr-card{
    display:flex;
    flex-direction:row; 
    align-items:center;
    gap:10px;
    background:#000;
    border-radius:16px;
    padding:16px 18px;
    box-shadow:0 2px 9px rgba(0,0,0,.32);
  }
  .qr-card img{
    width:160px; height:160px; border-radius:12px;
  }
  .qr-caption{
    margin:0;
    color:#fff;
    font-weight:600;
    text-align:center;
    line-height:1.2;
    opacity:.95;
  }
  .download-row{
    display: grid;
    grid-template-columns: 1fr auto; /* CTA grows, QR keeps natural width */
    align-items: stretch;             /* QR matches CTA height nicely */
    gap: 16px;
  }

  /* We want the QR next to CTA, not centered under the container */
  .download-row .qr-download{
    display: flex;             /* ensure it's visible on ≥641px */
    justify-content: flex-start;
    align-items: stretch;
    margin-top: 0;             /* kill the stacked margin */
  }

  /* Let the QR card fill the available height and look balanced */
  .download-row .qr-card{
    height: 100%;
    flex-direction: row;    /* image over caption in a column */
    justify-content: center;
    gap: 10px;
    padding: 16px 18px;
    border-radius: 24px;
  }
}

/* Mobile keeps the original stacked look */
@media (max-width: 640px){
  .download-row{
    flex-direction: column;
  }
}

    /* Reduced motion preference */
    @media (prefers-reduced-motion: reduce){
      .phone{animation:none}
      .reveal{transition:none}
      .intro-seq{ height:auto }
  .intro-pin, .intro-stage{ position: static; height:auto }
  .layer{ opacity:1; transform:none; transition:none; animation:none }
    }





/* ===== EXACT-MOCK DOWNLOAD HERO ===== */
.dl-mock-hero{
  position:relative;
  padding-top: calc(var(--nav-h, 70px) + 60px);
  padding-bottom: 280px;
  overflow:hidden;
  /* full purple like the mock */
  background:
    radial-gradient(1200px 600px at 85% -50%, #e9e2ff 0%, #faf8ff 30%, rgba(250,248,255,0) 60%),
    radial-gradient(900px 480px at -20% 30%, #fff2dc 0%, rgba(255,242,220,0) 55%);
  color: var(--ink);
}

.dl-mock-hero::before,
.dl-mock-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.7;
  pointer-events: none;
}

.dl-mock-hero::before {
  background: radial-gradient(closest-side, #7d59d9, rgba(125,89,217,0) 75%);
  width: 380px;
  height: 380px;
  right: -80px;
  top: -60px;
}

.dl-mock-hero::after {
  background: radial-gradient(closest-side, #ffb44a, rgba(255,180,74,0) 75%);
  width: 320px;
  height: 320px;
  left: -120px;
  bottom: -80px;
}

.dl-fore-clouds{
  display:none;              /* desktop/tablet: off */
}

.dl-mock-copy .intro-headline{
  margin: 0 0 6px 0;
  letter-spacing: .2px;
}
.dl-mock-copy .dl-lead{ margin: 2px 0 10px; opacity: .95 }
.dl-mock-copy .dl-body{ margin: 0 0 18px; opacity: .95; max-width: 54ch }


.dl-mock-hero .intro-headline{ margin:.2em 0 .4em 0;
  font-weight:700;
  font-size: clamp(28px,4vw,36px);
  line-height:1.15;
  letter-spacing:.01em;
  color:#000;
  font-family:'Signika', Arial, sans-serif; 
  text-shadow: none !important;
}
  
.dl-mock-hero .dl-lead{ color:#000; }
.dl-mock-hero .dl-body{ color:#3c2a63; }
.dl-mock-hero .download-store-badge span {
  color: #ffffff !important;
}

.dl-mock-hero + footer{ margin-top: 0; }
.dl-mock-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 32px;
  align-items: center;
  min-height: 72vh;
}
@media (max-width: 980px){
  .dl-mock-grid{ grid-template-columns: 1fr; gap: 24px; }
}

/* Clouds — use your intro clouds SVG and tint it lighter purple */
.dl-mock-clouds{
  position:absolute; inset:0;
  background:
    url("assets/download/background clouds.svg") left 6% top 20% / 420px auto no-repeat,
    url("assets/download/background clouds.svg") right 8% top 36% / 360px auto no-repeat;
  filter: opacity(.35);
  z-index:1;
  pointer-events:none;
}

.dl-mock-clouds {
  z-index: 0;
}

/* New dedicated hot-air balloon layer */
.dl-balloon {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1; /* above clouds, below phones/text */
  background:
    url("assets/intro/background%20hot-air-baloon.svg")
    right 7% top 15% / clamp(200px, 30vw, 380px) auto no-repeat;
  animation: dl-balloon-drift 12s ease-in-out infinite;
}

@keyframes dl-balloon-drift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* LEFT phones */
.dl-mock-phones{ position:relative; min-height: 320px; }
.dl-phone{
  position:absolute;
  width: min(270px, 34vw);
  aspect-ratio: 9/19.5;
  border-radius: 30px;
  background:#000;               /* device body (white like mock) */
  box-shadow: 0 16px 52px rgba(0,0,0,.25);
  overflow:hidden;
}
.dl-phone.big{
  left: 0; top: -140px;
}
.dl-phone.small{
  left: clamp(160px, 44%, 260px);
  top: -88px;
  width: min(270px, 34vw);
}
@media (max-width: 980px){
  .dl-mock-phones{ min-height: 460px; }
  .dl-phone.big{ left: 4%; }
  .dl-phone.small{ left: 48%; }
}

/* gradient placeholder screen */
.dl-screen{
  overflow: hidden;
  position:absolute; inset: 6px;                /* bezel */
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0)) 0 0/100% 100% no-repeat,
    radial-gradient(120% 120% at 0% 0%, #ffd1e8 0%, #f7b8ff 26%, #c9c7ff 60%, #b5e8ff 100%);
  display:grid; place-items:center;
  color: rgba(255,255,255,.75);
  font-weight: 600;
  text-shadow: 0 1px 10px rgba(0,0,0,.15);
  font-size: clamp(12px, 2.2vw, 14px);
  letter-spacing:.03em;
}
.dl-screen span{
  opacity:.7;
  user-select:none;
}

.dl-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;         /* cover the area */
  object-position: center;   /* keep the focal point centered */
  display: block;
  border-radius: inherit;    /* match the rounded screen */
}

/* RIGHT copy */
.dl-overline{
  margin: 0 0 6px 0;
  font-size: clamp(16px, 2.2vw, 22px);
  letter-spacing: .02em;
  font-weight: 700;
  color: #ffffff;
  text-transform: uppercase;
}
.dl-title{
  margin: 0 0 12px 0;
  font-size: clamp(44px, 6vw, 68px);
  font-weight: 800;
  color:#ffffff;
  letter-spacing:.01em;
}
.dl-lead{
  margin: 10px 0 8px 0;
  font-size: clamp(18px, 2.2vw, 22px);
  color: #eae3ff;
}
.dl-body{
  margin: 0 0 18px 0;
  max-width: 560px;
  font-size: clamp(16px, 2vw, 19px);
  color: #efeaff;
  line-height: 1.5;
}
.dl-break{ display:inline-block; width:10px; }

.download-store-badge{display:inline-flex; align-items:center; gap:10px; background: linear-gradient(120deg, #3c2a63 0%, #5a478c 50%, #3c2a63 100%);
box-shadow: inset 0 1px 4px rgba(255,255,255,0.1),
            0 4px 12px rgba(0,0,0,0.3); padding:10px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.08);
 position: relative;
  isolation: isolate;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease);
}
.download-store-badge:hover{
  transform: translateY(-2px);
  background: linear-gradient(120deg, #3c2a63 0%, #5a478c 50%, #3c2a63 100%);
box-shadow: inset 0 1px 4px rgba(255,255,255,0.1),
            0 4px 12px rgba(0,0,0,0.3);
}
.download-store-badge:active{ transform: translateY(0) scale(.98) }
.download-store-badge:focus-visible{
  outline: 2px solid #fff; outline-offset: 2px;
}
.download-store-badge span{display:block; font-weight:700}
.download-store-badge img {border-radius: 6px;}

/* Characters placement */
.dl-figure{ position:absolute; bottom:0; z-index:3; pointer-events:none; user-select:none; }
.dl-man{ left: min(48%, 500px); width:min(180px, 26vw); transform: translate(-50%, 0); padding-bottom: 80px;}
.dl-couple{ right: clamp(0px, 3vw, 40px); width:min(240px, 32vw); margin-right: 8px; }

.dl-mock-hero .qr-card {
  background: linear-gradient(120deg, #3c2a63 0%, #5a478c 50%, #3c2a63 100%);
box-shadow: inset 0 1px 4px rgba(255,255,255,0.1),
            0 4px 12px rgba(0,0,0,0.3);                    /* same as .download-store-badge */
  border: 1px solid rgba(255,255,255,.08); /* same subtle border as badges */
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease);
}
.dl-mock-hero .qr-card:hover{
  transform: translateY(-2px);
  background: linear-gradient(120deg, #3c2a63 0%, #5a478c 50%, #3c2a63 100%);
box-shadow: inset 0 1px 4px rgba(255,255,255,0.1),
            0 4px 12px rgba(0,0,0,0.3);
}

.dl-screen::after{
  content:'';
  position:absolute; inset:0;
  background:
    linear-gradient(120deg, rgba(255,255,255,.16), rgba(255,255,255,0) 30%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 55%);
  pointer-events:none;
}

@media (min-width: 641px) and (max-width: 980px) and (orientation: portrait){
  .dl-mock-hero {
    padding-top: calc(var(--nav-h, 70px) + 160px); /* was +60px — adds more space at the top */
  }
  .dl-man{ display: none !important; }

  .dl-mock-grid{
    gap: 80px;                 /* was 24px — larger gap between text and phones */
  }
}
/* Small screens */
@media (max-width: 980px){
  .dl-mock-phones {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;  /* centers the phone group */
  }

  .dl-phone.big {
    left: 50%;
    transform: translateX(-90%); /* shifts slightly left so small phone can sit next */
  }

  .dl-phone.small {
    left: 50%;
    transform: translateX(-10%); /* shifts slightly right to stay next to big */
  }
  .dl-man{ left: 22%; width: 150px; }
  .dl-couple{ width: 180px; right: 0; }
}
@media (max-width: 640px){
  .dl-mock-hero{ padding-top: calc(var(--nav-h, 70px) + 34px); padding-bottom: 0px;}
  .dl-mock-grid{ grid-template-columns: 1fr; }
  .dl-mock-copy{ order: 1; }
  .dl-mock-phones{ min-height: 400px; order: 3;}
  .dl-screen{
  inset: 5px;                /* bezel */
}
  .dl-phone.big{ width: 44vw; top: 90px;}
  .dl-phone.small{ width: 44vw; top: 30px;}
  .dl-figure{ position: relative; bottom: auto; display: block; z-index: 3;}
  .dl-man{
     z-index: 3;
    order: 2;
    position: relative;
    float: none;
    margin: 0 auto 10px auto;
    width: 110px;
    transform: none;
  }
  .dl-couple{
    position: relative;     /* was not positioned → z-index had no effect */
    z-index: 3;
    order: 4;
    clear: both;
    width: 180px;
    margin: 42px auto 0;         /* centered with space above */
  }

  .dl-fore-clouds{
    position:absolute;
    inset:0;                 /* anchor to the hero */
    pointer-events:none;
    z-index:2;               /* above .dl-figure (z-index:3) */
    background:
      url("assets/download/background clouds.svg")
        left bottom 15% / 160px auto no-repeat,
      url("assets/download/background clouds.svg")
        right bottom 13% / 180px auto no-repeat;
    filter: opacity(.35);    /* softer than the main clouds */
    display:block;
  }
}

@media (min-width: 1020px) {
  .dl-mock-grid {
    width: 90%;
    max-width: 90%;
    margin: 0 auto; /* keep it centered */
  }
  .dl-mock-hero {
  padding-bottom: 380px;
}
}

@media (min-width: 1400px) {
  .dl-phone.big {
    left: 60px;   /* was 0 */
  }
  .dl-phone.small {
    left: 310px;  /* was clamp(160px, 44%, 260px) */
  }
}

@media (max-width:900px){
  .dl-bg-elements .el-2{ right:-1%; }
  .dl-bg-elements .el-3{ display:none; }
}

/* larger screens: 3 scattered */
@media (min-width:901px){
  .dl-bg-elements .el-1{ left:-12%; }
  .dl-bg-elements .el-2{ right:-10%; }
  .dl-bg-elements .el-3{ left:40%; }
}





/* ============================================================
   FEATURES PAGE ADD-ONS
   ============================================================ */

/* ------------------ HERO (Wingman pitch) ------------------ */

:root{
  --ease-soft: cubic-bezier(.16,1,.3,1); /* smooth accelerate, gentle land */
  --dur-fast: .28s;
  --dur-med:  .4s;
  --dur-slow: .45s;
}


.feat-hero{
  position:relative;
  padding-top: calc(var(--nav-h, 70px) + 60px);
  padding-bottom: 80px;
  background:
    radial-gradient(1200px 600px at 85% -50%, #e9e2ff 0%, #faf8ff 30%, rgba(250,248,255,0) 60%),
    radial-gradient(900px 480px at -20% 30%, #fff2dc 0%, rgba(255,242,220,0) 55%);
  color: var(--ink);
  overflow:hidden;
  isolation:isolate;
}

@media (min-width: 1020px){
  .feat-hero .container {
  max-width: 90vw;
  width: 90vw;
  margin: 0 auto;
  padding-left: 20px;  /* keep your existing inner padding */
  padding-right: 20px;
}
}

/* soft color blobs (same treatment as download hero) */
.feat-hero::before,
.feat-hero::after{
  content:"";
  position:absolute;
  border-radius:50%;
  filter:blur(40px);
  opacity:.7;
  pointer-events:none;
  z-index:0;
}
.feat-hero::before{
  background: radial-gradient(closest-side, #7d59d9, rgba(125,89,217,0) 75%);
  width:380px; height:380px;
  right:-80px; top:-60px;
}
.feat-hero::after{
  background: radial-gradient(closest-side, #ffb44a, rgba(255,180,74,0) 75%);
  width:320px; height:320px;
  left:-120px; bottom:-80px;
}


/* subtle background elements (reuse vibe of download hero clouds/balloon) */
.feat-hero-bg{
  position:absolute;
  inset:0;
  pointer-events:none;
  user-select:none;
  opacity:.4;
  filter:drop-shadow(0 10px 30px rgba(0,0,0,.4));
}
.feat-hero-clouds{
  background:
    url("assets/download/background clouds.svg") left 6% top 20% / 420px auto no-repeat,
    url("assets/download/background clouds.svg") right 8% top 36% / 360px auto no-repeat;
  opacity:1;
  filter: opacity(.35);
  mix-blend-mode: normal;
}
.feat-hero-balloon{
  background:
    url("assets/intro/background%20hot-air-baloon.svg")
      right 7% top 15% / clamp(200px,30vw,380px) auto no-repeat;
  animation: dl-balloon-drift 12s ease-in-out infinite;
  opacity:.7;
  mix-blend-mode: normal;
}
@keyframes dl-balloon-drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

.feat-hero .fh-copy{ color:#000; }
.feat-hero .fh-headline{ color:#000; text-shadow:none; }
.feat-hero .fh-body{ color:#3c2a63; }

/* layout */
.feat-hero-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:32px;
  align-items:center;
  min-height: 70vh;
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 20px;
}
@media (max-width:980px){
  .feat-hero-grid{
    grid-template-columns:1fr;
    gap:40px;
    min-height:auto;
  }
}

/* left side phone mock */
.fh-art{
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  min-height:320px;
}

.fh-art{
  --fh-phone-w: min(270px, 42vw);
  --fh-phone-h: calc(var(--fh-phone-w) * 19.5 / 9);
  position: relative;
}

.fh-art::after{
  content:"";
  position:absolute;
  left:50%;
  bottom: calc(var(--fh-phone-h) * -0.06); /* sit just below phone base */
  transform:translateX(-50%);
  width:  calc(var(--fh-phone-w) * 2.1);
  height: calc(var(--fh-phone-h) * 0.22);
  border-radius: 50%;
  background:#FCE3B6;
  z-index:0; /* behind phone and people */
}

.fh-speech{
  position:absolute;
  top:0;
  left:0;
  transform:translate(-10px,-10px);
  background:#fff;
  color:#2b213f;
  font-size:.9rem;
  font-weight:600;
  line-height:1.3;
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.4);
  border:2px solid #ffeabf;
  padding:10px 12px;
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:8px;
  cursor: pointer;
  overflow: hidden;              /* keep slide clean */
  transition: transform .18s var(--ease-soft), box-shadow .18s var(--ease-soft);
}

.fh-speech:active{ transform: scale(.98); }

/* label stack area */
.fh-speech-stack{
  position: relative;
  height: 1.9em;         /* visible window (one line tall) */
  overflow: hidden;      /* clip the rest */
  display: block;        /* act like a viewport */
}

.fh-speech-rail{
  display: flex;
  flex-direction: column;
  will-change: transform;
  transition: transform .45s var(--ease-soft);
}

.fh-chip-line{
  line-height: 1.9em;    /* matches the window height */
  white-space: nowrap;
  font-weight: 700;
  color:#2b213f;
}

/* sliding effect handled on the stack */
.fh-speech-stack.is-sliding{ transition: transform .45s var(--ease-soft); }


.fh-speech-icon{
  width:32px;
  height:32px;
  border-radius:10px;
  background: radial-gradient(circle at 20% 20%, #ffdca8 0%, #FBA116 60%, #cc6f00 100%);
  font-size:16px;
  font-weight:700;
  color:#2b213f;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 3px 8px rgba(0,0,0,.3);
}
.fh-speech-label{
  white-space:nowrap;
  color:#2b213f;
  font-weight:600;
}

.fh-speech:hover{
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
}

/* phone */
.fh-phone{
  position:relative;
  width: var(--fh-phone-w);
  aspect-ratio:9/19.5;
  border-radius:30px;
  background:#000;
  box-shadow:0 22px 60px rgba(0,0,0,.6);
}
.fh-screen{
  position:absolute;
  inset:6px;
  border-radius:22px;
  overflow:hidden;
  background:#000;
}
.fh-screen img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:inherit;
}

/* People layer (behind phone) */
.fh-people{ z-index:1; }
.fh-phone{  position:relative; z-index:2; }
.fh-person{
  position:absolute;
  bottom: calc(var(--fh-phone-h) * 0.05);         /* phone bottom +5% */
  height: calc(var(--fh-phone-h) * 0.80);          /* 70% of phone height */
  width:auto;
  filter: none !important;         /* remove glow/shadow */
  box-shadow: none !important;
}

/* show only ~20% from each side */
.fh-person--left{
  left:  calc(50% - (var(--fh-phone-w) / 2));      /* phone left edge */
  transform: translateX(-40%);                     /* 20% peeks out */
}
.fh-person--right{
  left:  calc(50% + (var(--fh-phone-w) / 2));      /* phone right edge */
  transform: translateX(-55%);                     /* 20% peeks out */
}


@media(max-width:480px){
  .fh-person{ height: calc(var(--fh-phone-w) * 1.85); }
  .fh-phone{width:60vw; max-width:260px;}
}

/* right side copy */
.fh-copy{
  color:#fff;
  max-width:560px;
}
.fh-headline{
  margin:.2em 0 .4em 0;
  font-weight:700;
  font-size: clamp(28px,4vw,36px);
  line-height:1.15;
  letter-spacing:.01em;
  color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,.4);
  font-family:'Signika', Arial, sans-serif;
}
.fh-body{
  margin:0 0 .9em 0;
  color:#efeaff;
  font-size:1.06rem;
  line-height:1.5;
}
.fh-brand-lockup{
  margin-top:20px;
}
.fh-brand-logo{
  height:32px;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.6));
}


/* ------------------ INTERACTIVE FEATURE SHOWCASE ------------------ */
.fs-section{
  background:linear-gradient(180deg,#ffffff 0%,#fbfaff 100%);
  position:relative;
  overflow:hidden;
  padding-top:60px;      /* was 80px */
  padding-bottom:0px;   /* was 290px */
}

.fs-section .container{
  max-width:90vw;
  width:90vw;
  margin-left:auto;
  margin-right:auto;
  padding:0 20px;
}

/* desktop grid: phone left, text right */
.fs-grid{
  display:grid;
  grid-template-columns: minmax(260px,auto) 1fr;
  column-gap:32px;
  row-gap:24px;
  align-items:flex-start;
}

.fs-eyebrow-static {
  display: inline-block;
}
.fs-eyebrow-dynamic {
  display: none;
}


@media (min-width:640px){
  .fs-section:not(.fs--intro) .fs-eyebrow-static {
    display: none;
  }
  .fs-section:not(.fs--intro) .fs-eyebrow-dynamic {
    display: inline-block;
  }
}


@media (max-width:900px){
  .fs-grid{
    grid-template-columns:1fr;
  }
}

.fs-right,
.fs-thumbs-wrapper,
.fs-copy,
.fs-intro-msg {
  transition:
    transform .7s var(--ease-soft),
    opacity   .6s var(--ease-soft),
    margin    .7s var(--ease-soft);
}

/* Intro mode toggled by a class on the section */
.fs-section.fs--intro .fs-grid{
  grid-template-columns: 1fr;         /* single column */
}
.fs-section.fs--intro .fs-left{
  display: none;                       /* hide phone stage */
}
.fs-section.fs--intro .fs-right{
  align-items: center;                 /* center the text/controls */
  text-align: center;
}
.fs-section.fs--intro .fs-copy{
  padding-left: 0;                     /* undo your right-padding tweaks */
  max-width: 560px;
  width: 100%;
}

/* Center the carousel row in intro */
.fs-section.fs--intro .fs-thumbs-wrapper{
  justify-content: center;
  bottom: auto;                        /* avoid absolute offset jumps */
  margin-top: 18px;
  transform: translateY(0);            /* explicit so it animates cleanly */
}

.fs-thumbs-wrapper .fs-arrow {
  position: relative;
  top: 80px;            /* Push arrows downward */
}

.fs-section.fs--intro .fs-thumbs-wrapper .fs-arrow {
  top: 150px;        /* Push arrows even further down in intro mode */
}

/* Show intro message only in intro mode */
.fs-intro-msg{
  display: none;
  opacity: 0;
  margin-bottom: 10px;
  color:#4e3d76;
  font-size: .98rem;
}
.fs-section.fs--intro .fs-intro-msg{
  display: block;
  opacity: 1;
}

/* When not in intro, hide the message (fade out) */
.fs-section:not(.fs--intro) .fs-intro-msg{
  opacity: 0;
  pointer-events: none;
  height: 0;
  margin: 0;
}

/* columns just for clarity/targeting */
.fs-left{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
}
.fs-right{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  min-width:0; /* so flex children can shrink instead of overflowing */
}

/* stage for the "big" phone that animates up */
.fs-phone-stage{
  position:relative;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  min-height:0;        /* was very tall; remove forced white space */
  width:100%;
  padding-right: 5%;
  padding-left: 10%;
  /* allow the phone that moves here (.fs-thumb-phone--big) to size itself */
}

.fs-fade-out{
  opacity:0 !important;
  transition:opacity var(--dur-fast) var(--ease-soft);
}

/* right side dynamic text */
/* text block on the right */
.fs-copy{
  color:#2b213f;
  max-width:95%;     /* was 560px, let it flow */
  width:95%;
  margin-bottom:16px; /* give breathing room above carousel */
  min-height: 220px;
  padding-left: 8%;
}

/* After intro: lock copy height so carousel position never shifts */
.fs-section:not(.fs--intro) .fs-copy{
  min-height:320px;
  max-height:320px;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width: thin;
}


.fs-headline{
  margin:0 0 .4em 0;  /* pull headline up tighter */
  font-weight:700;
  font-size:clamp(24px,2.2vw,32px);
  line-height:1.2;
  letter-spacing:.01em;
  color:var(--smize-purple);
  font-family:'Signika', Arial, sans-serif;
}
.fs-desc{
  margin:0 0 .8em 0;
  font-size:1.03rem;
  line-height:1.45;
  color:#4e3d76;
}



/* thumbs row */
.fs-thumbs-wrapper{
  width:100%;
  position:relative;
  display:flex;
  bottom: auto;
  align-items:flex-start;
  justify-content:stretch;
  gap:12px;
  z-index:1;
  pointer-events:auto;
  /* this row should sit visually just under the copy */
}

.fs-section:not(.fs--intro) {
  padding-bottom: 60px;   /* ensures space below the big phone */
}


.fs-section:not(.fs--intro) .fs-thumbs-wrapper{
  bottom:-120px;        /* pull row up only after intro */
  margin-bottom:-140px;  /* reclaim space below only after intro */
}

.fs-thumb-head{
  font-size:.9rem;
  font-weight:600;
  color:var(--smize-purple);
  line-height:1.3;
  margin:0 0 10px 0;
  text-align:center;
}


@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait){

  /* keep the carousel closer to the bottom on iPad portrait */
  .fs-section:not(.fs--intro) .fs-thumbs-wrapper{
    bottom: -30px;       /* was -160px */
    margin-bottom: -170px; /* reclaim extra space */
  }
}

.fs-section.fs--intro .fs-thumbs-viewport {
  margin-bottom: 60px; /* extra space before the next section starts */
}

.fs-arrow{
  flex:0 0 auto;
  background:#fff;
  color:var(--smize-purple);
  font-weight:700;
  border:1px solid #efe7ff;
  border-radius:12px;
  box-shadow:var(--shadow-sm);
  width:40px;
  height:40px;
  font-size:18px;
  text-align:center;
  cursor:pointer;
  transition:background .16s var(--ease), box-shadow .16s var(--ease);
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
}
.fs-arrow:hover{
  background:#f3efff;
  box-shadow:var(--shadow-md);
}



.fs-thumbs-viewport{
  flex:1 1 auto;
  overflow-x:auto;                 /* <- the viewport scrolls */
  overflow-y:hidden;
  max-width:100%;
  min-width:0;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling: touch;
}
.fs-thumbs-track{
  display:flex;
  align-items:flex-start;
  gap:16px;
  padding:10px 4px 20px;
  min-width:max-content;          /* keep the row as wide as its content */
  overflow:visible;               /* track itself is not a scroller */
  justify-content: space-evenly;
}

/* each feature card in the carousel */
.fs-thumb{
  --active-drop: 137px; /* how far the active card should sit lower */

  flex:0 0 auto;
  cursor:pointer;
  user-select:none;
  color:#2b213f;
  background:#fff;
  border:1px solid #efe7ff;
  border-radius:16px;
  box-shadow:0 8px 28px rgba(113,67,205,.18);
  min-width:160px;
  max-width:200px;
  padding:12px 12px 14px;
  text-align:center;

  position:relative;

  /* start in normal row position */
  transform: translateY(0) scale(1);

  /* IMPORTANT: animate transform, shadow, border with your soft easing */
  transition:
    transform var(--dur-slow) var(--ease-soft),
    box-shadow var(--dur-fast) var(--ease-soft),
    border var(--dur-fast) var(--ease-soft);
}
.fs-thumb.is-active{
  border:2px solid var(--smize-purple);
  box-shadow:0 12px 38px rgba(113,67,205,.32);

  /* slide it down smoothly and scale up */
  transform: translateY(var(--active-drop)) scale(1.02);
}



.fs-thumb-phone{
  width:140px;
  max-width:22vw;
  aspect-ratio:9/19.5;
  border-radius:20px;
  background:#000;
  box-shadow:0 10px 26px rgba(17,8,46,.4);
  position:relative;
  transition:box-shadow .32s var(--ease);
}
.fs-thumb-screen{
  position:absolute;
  inset:4px;
  border-radius:14px;
  overflow:hidden;
  background:#000;
}
.fs-thumb-screen img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:inherit;
}

/* when a thumb phone is promoted into the stage,
   JS adds .fs-thumb-phone--big so it grows */
.fs-thumb-phone--big {
  width: min(260px, 32vw);   /* was min(320px, 40vw) */
  max-width: 280px;          /* was 320px/360px */
  border-radius: 26px;
  box-shadow: 0 24px 60px rgba(17, 8, 46, 0.38); /* slightly softer shadow */
}

.fs-thumb-phone--big .fs-thumb-screen {
  inset: 5px;                /* slightly tighter bezel */
  border-radius: 20px;
}



.fs-thumb-slot{
  width:100%;
  min-height:220px;   /* ~height of the small phone + shadow */
  display:flex;
  align-items:flex-start;
  justify-content:center;
  position:relative;
}



.fs-thumb-label{ display:none; }

.fs-flying{
  position:fixed;
  z-index:9999;
  box-shadow:0 30px 80px rgba(17,8,46,.5);
  border-radius:20px;
  will-change:transform,width,height;
  transition:
    transform .35s var(--ease),
    width .35s var(--ease),
    height .35s var(--ease),
    box-shadow .35s var(--ease),
    border-radius .35s var(--ease);
  pointer-events:none;
}

.fs-animating-intro{
  will-change: transform;
}

.fs-animating {
  will-change: transform;
}

/* hide desktop grid + thumbs on very small screens, we use mobile carousel instead */
@media (max-width:640px){
  .fs-grid{display:none;}
  .fs-thumbs-wrapper{display:none;}
  .fs-mobile-carousel{display:block;}
}


/* ------------------ MOBILE SLIDER VERSION ------------------ */
.fs-mobile-carousel{
  display:none;
  margin-top:20px;
}

.fs-mobile-title {
  display: none; /* hidden by default */
  text-align: center;
  margin-bottom: 30px;
  margin-top: -20px;
  font-family: 'Signika', sans-serif;
}

@media (max-width:640px){

  .fs-mobile-title {
    display: block;
  }

  .fs-mobile-carousel{
    display:block;
    position: relative;
  }
  
  .fh-phone {
    width: 50vw;        /* was 60vw – reduces width */
    max-width: 200px;   /* was 260px – keeps it visually tighter */
  }

  .fsm-arrows{
    position: absolute;
    top: 35%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    pointer-events: none;   /* overlay only */
    z-index: 3;
  }

  .fsm-arrow{
    pointer-events: auto;   /* buttons still clickable */
    width: 36px;
    height: 36px;
    border-radius: 12px;
    border: 1px solid #efe7ff;
    background:#fff;
    color: var(--smize-purple);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    transition: transform .16s var(--ease-soft);
  }

  .fsm-arrow:active{
    transform: scale(.94);
  }

  .fh-art{ --fh-phone-w: min(200px, 50vw); }

  .fh-person{
  height: calc(var(--fh-phone-h) * 0.80);          /* 70% of phone height */
}

.fh-speech{
    top: calc(-16px - env(safe-area-inset-top, 0px));
    transform: translate(-4px, -22px);
  }
}

.fsm-track{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  gap:20px;
  padding-bottom:20px;
}
.fsm-slide{
  flex:0 0 82vw;
  max-width:82vw;
  background:#fff;
  border:1px solid #efe7ff;
  border-radius:22px;
  box-shadow:0 12px 38px rgba(113,67,205,.18);
  scroll-snap-align:start;
  padding:16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.fsm-phone{
  width:160px;
  max-width:60vw;
  aspect-ratio:9/19.5;
  border-radius:24px;
  background:#000;
  box-shadow:0 22px 50px rgba(17,8,46,.32);
  position:relative;
  margin-bottom:14px;
}
.fsm-screen{
  position:absolute;
  inset:6px;
  border-radius:18px;
  overflow:hidden;
  background:#000;
}
.fsm-screen img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:inherit;
}

.fsm-copy h3{
  margin:.4em 0 .4em;
  font-size:1.15rem;
  font-weight:700;
  color:var(--smize-purple);
  letter-spacing:.02em;
}
.fsm-copy p{
  font-size:1rem;
  line-height:1.4;
  color:#4e3d76;
  margin:.4em 0;
}


/* ------------------ VALUE / PRICING MESSAGE BLOCK ------------------ */
.wingman-value{
  background: #7143CD;
  color:#fff;
  padding:60px 0 70px;
  position:relative;
  overflow:hidden;
  margin-bottom: 50px;
}
.wingman-value-grid{
  display:grid;
  grid-template-columns: .9fr 1.8fr;
  align-items:center;
  gap:32px;
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 20px;
}
@media(max-width:900px){
  .wingman-value-grid{
    grid-template-columns:1fr;
    text-align:center;
  }
}


.wv-art{
  display:flex;
  justify-content:center;
}
.wv-avatar-circle{
  background:#fff;
  border-radius:50%;
  width:min(220px,60vw);
  height:min(220px,60vw);
  display:flex;
  align-items: flex-end;
  justify-content:center;
  box-shadow:0 22px 60px rgba(0,0,0,.5);
  position:relative;
}
.wv-avatar-img{
  width:92%;
  height:auto;
  object-fit:contain;
  display:block;
  transform: translateX(28px);
}

.wv-img-row { display:block; }
.wv-img-col { display:none; }

/* if you keep the base translateX on .wv-avatar-img, override for the 3.5 one */
@media (max-width:900px){
  /* stacked column: swap images */
  .wv-img-row { display:none; }
  .wv-img-col { display:block; transform: translate(-12px, -10px) scale(1.11) !important; } /* slight left shift */
}


.wv-copy{
  color:#fff;
  max-width:560px;
  margin:0 auto;
}
.wv-headline{
  margin:.2em 0 .5em 0;
  font-weight:700;
  font-size: clamp(24px,3vw,32px);
  line-height:1.25;
  color:#fff;
  letter-spacing:.01em;
  font-family:'Signika', Arial, sans-serif;
}
.wv-body{
  margin:0 0 .9em 0;
  color:#efeaff;
  font-size:1.05rem;
  line-height:1.5;
}


/* ------------------ small helper animations ------------------ */
.fs-stage-phone,
.fsm-slide,
.wv-avatar-circle,
.fh-phone{
  transition:box-shadow .3s var(--ease), transform .3s var(--ease);
}
.fs-thumb:not(.is-active):hover{
  transform: translateY(-2px) scale(1.02);
  box-shadow:0 16px 44px rgba(113,67,205,.28);
}
.fsm-slide:active{
  transform:scale(.98);
}
.fh-phone:hover{
  transform:translateY(-2px) scale(1.02);
}


.confetti-emoji {
  position: fixed;
  top: -20px;
  font-size: 24px;
  pointer-events: none;
  animation: fall 2s ease-out forwards;
  z-index: 9999;
}

@keyframes fall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(360deg);
    opacity: 0;
  }
}


/* ------------------ CONTACT PAGE EXTRAS ------------------ */
/* Reuse Features hero background treatment */
.contact-hero { padding-top: calc(var(--nav-h, 40px) + 60px); }

/* Left illustration */
.contact-art {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 320px;
}
.contact-illustration{
  height: auto;
  filter: drop-shadow(0 16px 48px rgba(17,8,46,.28));
  animation: float 6s var(--ease) infinite;
}

/* Right: form card inside hero */
.contact-copy { max-width: 560px; }
.contact-form{
  margin: 14px 0 0 0 !important;      /* override smize-form margin */
  max-width: 100% !important;
  background: #fff;
  border: 1px solid #efe7ff;
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(113,67,205,.18);
  padding: 1.2em 1.4em;
}
.contact-form .form-row-2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 640px){
  .contact-form .form-row-2{ grid-template-columns: 1fr; }
}

@media (max-width: 768px){
  .contact-hero .feat-hero-grid{
    display: flex;
    flex-direction: column;
  }
  .contact-hero .contact-copy{
    order: 1;
  }
  .contact-hero .contact-art{
    order: 2;
  }
}

@media (min-width: 1300px) { .contact-hero{ padding-top: calc(var(--nav-h,70px) + 60px); } }

/* tiny success note */
.contact-note{
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .28s var(--ease), transform .28s var(--ease);
  color: #2b213f;
  font-weight: 600;
  margin-top: 10px;
}
.contact-note.show{
  opacity: 1;
  transform: translateY(0);
}



/* ===== Lounge Listing ===== */
.lounge-hero{ padding-top: calc(var(--nav-h,40px) + 60px); padding-bottom: 20px; background:
  radial-gradient(1200px 600px at 85% -50%, #e9e2ff 0%, #faf8ff 30%, rgba(250,248,255,0) 60%),
  radial-gradient(900px 480px at -20% 30%, #fff2dc 0%, rgba(255,242,220,0) 55%); }
.lounge-title{ margin:.2em 0 .4em 0;
  font-weight:700;
  font-size: clamp(28px,4vw,36px);
  line-height:1.15;
  letter-spacing:.01em;
  color:#000;
  font-family:'Signika', Arial, sans-serif; }
.lounge-sub{ color:#3c2a63; margin:.2em 0 1em }

.lounge-controls{ display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; margin-top: 8px; }
.l-search{ position:relative; flex: 1 1 340px; max-width: 520px; }
.l-search-input{ width:100%; border:1.4px solid #e7e2fd; border-radius:12px; padding:12px 38px 12px 14px; background:#fff; font-size:1.02rem; box-shadow:0 2px 10px #7143cd12; }
.l-search-input:focus{ outline:none; border-color:#7143CD; background:#f7f5ff; }
.l-search-ico{ position:absolute; right:12px; top:48%; transform:translateY(-50%); color:#7143CD; opacity:.9 }

.l-tags{ display:flex; flex-wrap:wrap; gap:10px }
.l-tag{ background:#edeafb; color:#5d41a3; border:1px solid #dbcff8; padding:8px 12px; border-radius:999px; font-weight:700; cursor:pointer; transition: background .16s, transform .16s; }
.l-tag:hover{ transform:translateY(-2px) }
.l-tag.is-active{ background:#7143CD; color:#fff; border-color:#7143CD }

.l-sort{ margin-left:auto; display:flex; align-items:center; gap:8px; font-weight:700; color:#7143CD }
.l-sort select{ border:1.4px solid #e7e2fd; border-radius:10px; padding:8px 10px; background:#fff; font-family:'Signika',sans-serif; }

.l-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:18px }
@media (max-width:1020px){ .l-grid{ grid-template-columns: repeat(2, 1fr);} }
@media (max-width:640px){ .l-grid{ grid-template-columns: 1fr; } }

@media (min-width: 1020px) {
  .lounge-hero .container {
    width: 90vw;
    max-width: 90vw;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 1300px) { .lounge-hero{ padding-top: calc(var(--nav-h,70px) + 60px); }}


.l-card{ background:#fff; border:1px solid #efe7ff; border-radius:16px; overflow:hidden; box-shadow:var(--shadow-sm); position:relative; isolation: isolate; transition: transform .16s var(--ease), box-shadow .16s var(--ease); }
.l-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.l-card__link{ position:absolute; inset:0; z-index: 1;}
.l-card__media{ position:relative; }
.l-card__media img{ width:100%; height:220px; object-fit:cover; display:block; }
.l-badge{ position:absolute; left:10px; top:10px; background:#FBA116; color:#000; font-weight:800; padding:4px 8px; border-radius:9px; font-size:.9rem; box-shadow:0 2px 8px rgba(0,0,0,.2); z-index: 2;
  pointer-events: none;}

.l-mark {
  position: absolute;
  right: 10px;
  top: 10px;
  background: #fff;
  border: 1.4px solid #e7e2fd;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
  cursor: pointer;
  transition: all .2s ease;
  z-index: 3;
  pointer-events: auto;
  touch-action: manipulation;
}
.l-mark.is-marked {
  color: #FBA116;
  border-color: #FBA116;
  transform: scale(1.08);
}

.l-card__body{ padding:14px }
.l-card__meta{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; color:#6a5a96; font-size:.95rem; margin-bottom:6px }
.l-sep{ opacity:.6 }
.l-card__title{ margin:.1em 0 .2em; font-size:1.22rem; color:#2b213f }
.l-card__excerpt{ color:#4b3b72; font-size:1.03rem; }

.l-actions{ display:flex; justify-content:center; margin-top:16px; }
.l-empty{ text-align:center; padding:28px; background:#fff; border:1px dashed #e7e2fd; border-radius:16px; }

/* ===== Post Page ===== */
.post-hero {
  position: relative;
  min-height: 54vh;
  display: flex;
  align-items: flex-end;
  background-color: #111;
  background-image: var(--post-cover, none);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
}
.post-hero__shade{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.55) 100%); }
.post-hero__inner{ position:relative; z-index:1; padding: 34px 0; color:#fff; 
max-width: 90%;       /* limit total width */
  margin-left: 5%;       /* centers inside 90%, pushes it slightly from left edge */
  text-align: left;      /* ensure text is aligned left */
}
.post-back{ display:inline-block; color:#fff; opacity:.9; margin-bottom:12px; text-decoration:underline; }
.post-title{ font-family:'Signika',sans-serif; font-weight:800; font-size: clamp(30px, 5vw, 56px); margin:.15em 0 .15em; color:#fff; }
.post-meta{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; opacity:.95 }
.post-author-ava{ width:32px; height:32px; border-radius:50%; object-fit:cover; box-shadow:0 2px 8px rgba(0,0,0,.25) }
.post-actions{ margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; }
.post-actions button {
  background-color: rgba(255,255,255,0.15);  /* subtle translucent white overlay */
  border: 1px solid rgba(255,255,255,0.25);  /* unified border tone */
  color: #fff;
  backdrop-filter: blur(8px);
}

.post-actions button:hover {
  background-color: rgba(255,255,255,0.25);
  border-color: rgba(255,255,255,0.35);
}

.post-layout{ display:grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 28px; }
@media (max-width: 980px){ .post-layout{ grid-template-columns: 1fr; } }

.post-body{ background:#fff; border:1px solid #efe7ff; border-radius: 18px; padding: 20px 22px; box-shadow:var(--shadow-sm); max-width: 820px; }
.post-body h2{ margin: 1.2em 0 .4em; color:#2b213f; font-size: 1.7rem; }
.post-body h3{ margin: 1em 0 .3em; color:#3a2b63; font-size: 1.28rem; }
.post-body p{ color:#3f2d6b; font-size: 1.06rem; line-height: 1.6; }
.post-body img{ border-radius: 14px; box-shadow:0 4px 16px rgba(0,0,0,.12); margin: 10px 0; }
.post-body blockquote{ border-left:4px solid #7143CD; background:#f8f7fd; margin: 12px 0; padding: 12px 14px; border-radius: 8px; color:#4b3b72; }
.post-body pre{ background:#0e0d11; color:#fff; border-radius:12px; padding: 14px; overflow:auto; box-shadow:0 2px 12px rgba(0,0,0,.25); }
.post-body h2::before {
  content: "";
  display: block;
  height: 100px;          /* space above section */
  margin-top: -100px;     /* keeps layout consistent */
}

.post-aside{ position: sticky; top: calc(var(--nav-h,70px) + 14px); height: fit-content; }
.post-toc{ background:#fff; border:1px solid #efe7ff; border-radius:16px; box-shadow:var(--shadow-sm); padding: 14px; }
.toc-title{ font-weight:800; color:#7143CD; margin-bottom:8px; padding-bottom:6px; /* space for divider */
  border-bottom:1px solid rgba(113, 67, 205, 0.15); /* subtle line */}
.toc-list{ display:flex; flex-direction:column; gap:6px; }
.toc-item{ color:#4b3b72; text-decoration:none; font-size:.98rem; padding-bottom:6px; /* space for divider */
  border-bottom:1px solid rgba(113, 67, 205, 0.15); /* subtle line */}
.toc-h3{ padding-left:10px; opacity:.9; }

.read-progress{ position:fixed; top:0; left:0; right:0; height:4px; background: linear-gradient(90deg, #FBA116, #7143CD); transform-origin: left center; transform: scaleX(0); z-index: 1200; }

@media (min-width: 1020px) {
  .container.post-layout {
    width: 100%;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

  .post-body {
    max-width: none; /* allow expansion */
  }
}

/* skeleton */
.skel{ background: linear-gradient(90deg, #eee, #f5f5f5, #eee); background-size: 200% 100%; animation: skel 1.2s linear infinite; border-radius: 8px; }
.skel-h{ height: 22px; width: 60%; margin: 10px 0; }
.skel-p{ height: 14px; width: 100%; margin: 8px 0; }
@keyframes skel{ 0%{background-position: 0 0}100%{background-position: -200% 0} }


@media (min-width: 1020px){
  .page-faq header.section .container{
    max-width: 90vw;
    width: 90vw;
    margin-left: auto;
    margin-right: auto;
  }

  .page-faq #faqSearchForm {
    max-width: 90vw;
    width: 90vw;
    margin-left: auto;
    margin-right: auto;
  }

  .page-faq #faqSearch {
    width: 100%;
  }
}

.page-faq .smize-form{ margin-bottom: 12px; }
.page-faq .section.compact.faq{ padding-top: 16px; }

/* FAQ header artwork + background (FAQ-only) */
.page-faq header.section{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1200px 600px at 85% -50%, #e9e2ff 0%, #faf8ff 30%, rgba(250,248,255,0) 60%),
    radial-gradient(900px 480px at -20% 30%, #fff2dc 0%, rgba(255,242,220,0) 55%);
}

/* soft blobs like other pages */
.page-faq header.section::before,
.page-faq header.section::after{
  content:"";
  position:absolute;
  border-radius:50%;
  filter:blur(40px);
  opacity:.7;
  pointer-events:none;
  z-index:0;
}
.page-faq header.section::before{
  background: radial-gradient(closest-side, #7d59d9, rgba(125,89,217,0) 45%);
  width:380px; height:380px; right:-80px; top:-60px;
}
.page-faq header.section::after{
  background: radial-gradient(closest-side, #ffb44a, rgba(255,180,74,0) 45%);
  width:320px; height:320px; left:-120px; bottom:-80px;
}

/* artwork layers */
.page-faq .faq-hero-bg{ position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.35; }
.page-faq .faq-hero-clouds{
  position:absolute; inset:0;
  background:
    url("assets/download/background clouds.svg") left 6% top 28% / 420px auto no-repeat,
    url("assets/download/background clouds.svg") right 8% top 44% / 360px auto no-repeat;
}
.page-faq .faq-hero-balloon{
  position:absolute; inset:0;
  background:
    url("assets/intro/background%20hot-air-baloon.svg")
      right 6% top 12% / clamp(160px, 24vw, 340px) auto no-repeat;
  animation: faq-balloon 12s ease-in-out infinite;
  opacity:.8;
}

/* keep header content above artwork */
.page-faq header.section .container{ position: relative; z-index: 1; }

@keyframes faq-balloon{
  0%,100%{ transform: translateY(0); }
  50%{    transform: translateY(-10px); }
}




:root{
      --areas-h: clamp(520px, 78vh, 760px);
    }

    .areas-hero{
      position: relative;
      padding-top: calc(var(--nav-h, 70px) + 60px);
      padding-bottom: 90px;
      background:
        radial-gradient(1200px 600px at 85% -50%, #e9e2ff 0%, #faf8ff 30%, rgba(250,248,255,0) 60%),
        radial-gradient(900px 480px at -20% 30%, #fff2dc 0%, rgba(255,242,220,0) 55%);
      color: #0f0f11;
      overflow: hidden;
      isolation: isolate;
      min-height: var(--areas-h);
    }
    .areas-hero .feat-hero-bg{ position:absolute; inset:0; pointer-events:none; opacity:.45; }
    .areas-hero .feat-hero-clouds{
      background:
        url("assets/download/background clouds.svg") left 6% top 20% / 420px auto no-repeat,
        url("assets/download/background clouds.svg") right 8% top 36% / 360px auto no-repeat;
      filter: opacity(.35);
      z-index: 0;
    }
    .areas-hero .feat-hero-balloon{
      background:
        url("assets/intro/background%20hot-air-baloon.svg")
        right 7% top 15% / clamp(200px,30vw,380px) auto no-repeat;
      animation: dl-balloon-drift 12s ease-in-out infinite;
      z-index: 0;
    }


    @media (min-width: 1300px) { .areas-hero{ padding-top: calc(var(--nav-h,70px) + 100px); } }


    .areas-wrap{ position: relative; z-index: 2; max-width: 90vw; width: 90vw; margin: 0 auto; padding: 0 20px; display:grid; place-items:center; text-align:center; }
    .areas-eyebrow{ display:inline-block; margin-bottom: 6px; font-weight: 800; letter-spacing:.06em; text-transform:uppercase; color: var(--smize-orange); }
    .areas-sub{ margin:.4em 0 0; color:#3c2a63; font-size: clamp(16px, 1.9vw, 20px); }

    /* Big animated “PUNE” word-fill */
    .pune-lockup{ margin-top: 10px; }
    .now-badge{
      display: inline-flex; align-items:center; gap:8px;
      padding: 8px 12px; border-radius: 999px; background: #fff; border:1px solid #efe7ff;
      box-shadow: var(--shadow-sm);
      font-weight: 700; color:#7143cd; margin-bottom: 10px;
    }
    .now-badge i{ width:8px; height:8px; border-radius:999px; background: var(--smize-orange); display:inline-block; }

    .pune-svg{ width: min(100%, 1200px); height: auto; display:block; }
    .pune-text{
      font-family: 'Signika', Arial, sans-serif;
      font-weight: 800;
      letter-spacing: .02em;
      font-size: 340px;               /* base; scaled by viewBox */
      fill: url(#punePattern);
      stroke: #ffffff;
      stroke-width: 10;
      paint-order: stroke fill;
      filter: drop-shadow(0 12px 34px rgba(17,8,46,.22));
    }
    @media (max-width: 980px){ .pune-text{ stroke-width: 8; } }
    @media (max-width: 640px){ .pune-text{ stroke-width: 6; } }

    /* Animate the pattern rail */
    #punePatternRail{
      animation: pune-slide 18s linear infinite;
    }
    @keyframes pune-slide{
      0%   { transform: translateX(0) translateY(0); }
      50%  { transform: translateX(-260px) translateY(-50px); }
      100% { transform: translateX(-520px) translateY(0); }
    }

    .areas-chips{
      display:flex; flex-wrap:wrap; gap:10px 12px; justify-content:center; margin-top: 8px;
    }
    .areas-chip{
      background:#fff; border:1px solid #efe7ff; border-radius:999px; padding:8px 12px;
      font-weight: 700; color:#2b213f; box-shadow: var(--shadow-sm);
      animation: bob 5.5s var(--ease) infinite;
      will-change: transform;
    }
    .areas-chip:nth-child(2){ animation-delay:.15s }
    .areas-chip:nth-child(3){ animation-delay:.30s }
    .areas-chip:nth-child(4){ animation-delay:.45s }
    .areas-chip:nth-child(5){ animation-delay:.60s }
    .areas-chip:nth-child(6){ animation-delay:.75s }
    .areas-chip:nth-child(7){ animation-delay:.90s }
    @keyframes bob{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-6px) } }

    .areas-cta{ margin-top: 18px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
    .areas-cta .btn{ border-radius: 999px; }

    /* Floating pins (subtle) */
    .pins{
      position:absolute; inset:0; pointer-events:none; z-index:1; opacity:.5;
    }
    .pin{ position:absolute; width:18px; height:18px; background: var(--smize-orange); border-radius: 6px; transform: rotate(45deg); box-shadow: 0 6px 18px rgba(251,161,22,.35); }
    .pin::after{ content:''; position:absolute; inset:-8px; border:2px solid rgba(251,161,22,.25); border-radius: 16px; animation: ripple 2.6s ease-out infinite; }
    .pin.p1{ left: 16%; top: 36%; animation: floatPin 6s ease-in-out infinite; }
    .pin.p2{ right: 14%; top: 30%; animation: floatPin 7.5s ease-in-out .6s infinite; }
    .pin.p3{ left: 28%; bottom: 18%; animation: floatPin 7s ease-in-out 1s infinite; }
    @keyframes floatPin{ 0%,100%{ transform: translateY(0) rotate(45deg) } 50%{ transform: translateY(-8px) rotate(45deg) } }
    @keyframes ripple{ 0%{ transform: scale(0.6); opacity: .7 } 100%{ transform: scale(1.3); opacity: 0 } }

    /* Secondary section */
    .areas-mini{
      padding: 36px 0 18px;
      background: linear-gradient(180deg,#ffffff 0%, #fbfaff 100%);
    }
    .areas-mini .container{ max-width: var(--max-w); margin:0 auto; padding: 0 20px; }
    .areas-note{
      margin: 0 auto; max-width: 780px; text-align: center; color:#4e3d76;
      font-size: 1.06rem;
    }

    /* Respect reduced motion */
    @media (prefers-reduced-motion: reduce){
      #punePatternRail, .areas-chip, .pin, .pin::after{ animation: none !important; }
    }
    




/* ===== ABOUT ===== */

.about-page-section{ padding: 64px 0; }
.about-page-container{ max-width: var(--max-w); margin:0 auto; padding:0 20px; }
.about-page-title{ font: 700 clamp(26px,4.4vw,42px) "Signika",system-ui; color:#2b213f; margin:0 0 14px; }
.about-page-lead{ font-size: clamp(16px,2vw,20px); color:#3c2a63; }
.about-page-tc{ text-align:center; }

.about-hero{
  position: relative;
  min-height: calc(100vh - var(--nav-h, 70px));
  padding: calc(var(--nav-h, 70px) + 16px) 0 40px; /* tighter; content is centered anyway */
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
}
.about-hero-inner{ position: relative; z-index: 2; max-width: 900px; margin: 0 auto; }

.about-hero-title{
  font-family: "Baron","League Spartan",sans-serif;
  font-size: clamp(36px, 6vw, 80px);
  line-height: 1.02;
  letter-spacing: .02em;
  margin: .12em 0 .28em;
}
.about-hero .lead{ max-width: 780px; margin: 0 auto 22px; opacity: .9; }
.about-hero .cta-row{ display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }


.hero-bg-fader{
  position: absolute; inset: 0;
  overflow: hidden;
  z-index: 0;
  background: var(--smize-purple);
}
.hb-frame{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.035);             /* start slightly zoomed-in */
  filter: blur(3px);                    /* soft blur that clears in */
  transition:
    opacity .9s var(--ease),
    transform 5.2s cubic-bezier(.22,.61,.36,1),
    filter 1.2s var(--ease);
  will-change: opacity, transform, filter;
  pointer-events: none;
}
.hb-frame.is-active{
  opacity: 1;
  transform: scale(1);                  /* gentle Ken-Burns settle */
  filter: blur(0);
}

/* Edge guard: fade for legibility over photos */
/* Gradient only fades in after the first image is loaded */
.hb-gradient{
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 50% 20%, rgba(0,0,0,.25) 0%, rgba(0,0,0,.45) 60%, rgba(0,0,0,.55) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.15) 35%, rgba(0,0,0,.45));
  z-index: 1;
  pointer-events: none;
  opacity: 0;                           /* start hidden */
  transition: opacity .6s var(--ease);
}
.hero-bg-fader.has-first .hb-gradient{ opacity: 1; }

/* Keep hero text readable on photos */
.about-hero .about-hero-title,
.about-hero .lead { color: #fff; }
.about-hero .cta-row .btn { box-shadow: 0 10px 22px rgba(0,0,0,.25); }



.journey {
  position: relative;
  padding: 140px 0 110px;
  background:
    radial-gradient(1200px 500px at 80% -10%, #fff2dc 0%, rgba(255,242,220,0) 60%),
    radial-gradient(900px 420px at -10% 30%, #e9e2ff 0%, rgba(233,226,255,0) 55%);
}
.j-wrap { text-align: center; }
.j-intro { max-width: 880px; margin: 8px auto 34px; }

.journey-track{
  list-style: none;          /* no numbers/bullets */
  padding-left: 0;           /* remove default list indent */
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin: 18px auto 0;       /* center the track */
  position: relative;
  max-width: 1000px;         /* keeps a tidy centered width */
}
.journey-track::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 28px;
  height: 2px;
  background: linear-gradient(90deg, rgba(113,67,205,.15), rgba(251,161,22,.15));
}
.j-step{
  position: relative;
  background: #fff;
  border-radius: 16px;
  padding: 28px 16px 16px;   /* extra top padding for the dot */
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  border: 1px solid rgba(113,67,205,.12);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  text-align: center;        /* nicely centered text */
}
.j-step:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0,0,0,.10);
}
.j-step h3 { margin: 8px 0 6px; font: 600 18px "Signika", system-ui; }
.j-step p { margin: 0; font-size: 15px; color: #3c2a63; opacity: .95; }
.j-dot {
  position: absolute; top: -7px; left: 16px;
  width: 14px; height: 14px; border-radius: 50%;
  background: linear-gradient(135deg, var(--smize-purple), var(--smize-orange));
  box-shadow: 0 0 0 4px rgba(113,67,205,.12);
}

@media (max-width: 1000px){
  .journey-track { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .journey-track { grid-template-columns: 1fr; }
  .journey-track::before { display: none; }
}


/* --- Mission section --- */
.mission { padding: 80px 0 120px; }
.mission .title { font-size: clamp(28px, 4.6vw, 48px); }
.mission-sub { max-width: 90%; margin: 8px auto 28px; text-align:center; opacity:.9; }

.mission-points {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 18px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 900px){ .mission-points { grid-template-columns: 1fr; } }

.mp-card {
  position: relative;
  border-radius: 18px;
  padding: 18px 18px 16px 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.92)) padding-box,
    linear-gradient(135deg, rgba(113,67,205,.35), rgba(251,161,22,.35)) border-box;
  border: 1px solid transparent;
  box-shadow: 0 12px 32px rgba(0,0,0,.06);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.mp-card::before{
  content:"";
  position:absolute; left:12px; right:12px; top:0;
  height: 4px; border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, var(--smize-purple), var(--smize-orange));
  opacity: .9;
}
.mp-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 42px rgba(0,0,0,.10);
}

.mp-icon{
  width: 46px; height: 46px; border-radius: 14px;
  display: grid; place-items: center; margin-bottom: 10px;
  background:
    radial-gradient(80% 80% at 30% 20%, rgba(255,255,255,.8), rgba(255,255,255,.2)),
    linear-gradient(135deg, rgba(113,67,205,.16), rgba(251,161,22,.16));
  border: 1px solid rgba(113,67,205,.22);
  box-shadow: 0 8px 18px rgba(113,67,205,.18);
  color: #5b34b2;
}
.mp-icon svg{ width: 28px; height: 28px; }
.mp-card h3{ margin: 4px 0 6px; font: 700 20px "Signika", system-ui; color:#2b213f;}
.mp-card p{ margin: 0; color:#3c2a63; }



.social-follow{
  position: relative;
  padding: 80px 0;
  background:
    linear-gradient(135deg, rgba(113,67,205,.95), rgba(251,161,22,.92));
  overflow: hidden;
}
.sf-wrap{ text-align:center; }
.inv { color: #fff; }
.social-follow .title { color: #fff; }
.social-follow .lead { color: rgba(255,255,255,.92); max-width: 760px; margin: 8px auto 26px; }

.sf-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 1000px){ .sf-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .sf-grid { grid-template-columns: 1fr; } }

.sf-card{
  position: relative;
  border-radius: 16px;
  padding: 18px 16px;
  display: grid; grid-template-rows: auto auto auto; justify-items: center;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff; text-decoration: none;
  transition: transform .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.sf-card:hover{
  transform: translateY(-5px);
  background: rgba(255,255,255,.14);
  box-shadow: 0 16px 36px rgba(0,0,0,.25);
}
.sf-ico{ width: 45px; height: 45px; object-fit: contain; filter: drop-shadow(0 2px 8px rgba(0,0,0,.25)); }
.sf-label{ margin: 10px 0 6px; font: 700 17px "Signika", system-ui; }
.sf-cta{
  display: inline-block; margin-top: 6px; padding: 6px 12px; border-radius: 999px;
  background:#fff; color:#3c2a63; font-weight:700; font-size: 14px;
  box-shadow: 0 6px 16px rgba(0,0,0,.22);
}


.social-follow + footer{
  margin-top: 0;
}


/* city cta */
body.about-page .city-cta .lead{ color:#3c2a63; }

body.about-page .city-cta,
body.about-page #download {
  margin-top: 40px;
}

body.about-page .city-cta
{
  margin-bottom: 100px;
}


body.about-page .city-cta .cta-row{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px; /* was tighter; bumped slightly */
}

body.about-page .testimonials .eyebrow {
  display: block;
  text-align: center;
  margin: 0 auto;
}


/* reveal on scroll */
body.about-page .reveal{ opacity:0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
body.about-page .reveal.in{ opacity:1; transform:none; }

@media (max-width: 980px){
  body.about-page .split{ grid-template-columns: 1fr; }
  body.about-page .grid-3{ grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce){
  body.about-page .orbital, body.about-page .shimmer { animation: none !important; }
  body.about-page .reveal { opacity:1 !important; transform:none !important; }
}




/* Docs */
/* Document */
/* Docs */
.doc-hero{
      padding-top: calc(var(--nav-h, 70px) + 48px);
      padding-bottom: 28px;
      background:
        radial-gradient(1200px 600px at 85% -50%, #e9e2ff 0%, #faf8ff 30%, rgba(250,248,255,0) 60%),
        radial-gradient(900px 480px at -20% 30%, #fff2dc 0%, rgba(255,242,220,0) 55%);
      position: relative; overflow: hidden; isolation: isolate;
    }
    .doc-hero .container{ max-width: var(--max-w); }
    .doc-eyebrow{ display:inline-block; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--smize-orange); }
    .doc-title{ margin:.25em 0 .2em; font: 700 clamp(22px,3.6vw,30px) "Signika",sans-serif; color: var(--smize-purple); }
    .doc-sub{ color:#4e3d76; font-size:1.02rem; margin-top: 2px; }

    /* Meta row */
    .doc-meta{ display:flex; flex-wrap:wrap; gap:10px 16px; margin-top:12px; }
    .doc-meta .chip{ background:#fff; border:1px solid #efe7ff; color:#5d41a3; box-shadow: var(--shadow-sm); }

    /* Switcher + Tools */
    .doc-toolbar{
      display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:14px;
    }
    .doc-switch{
      display:flex; flex-wrap:wrap; gap:8px; align-items:center;
      background:#fff; border:1px solid #efe7ff; border-radius:28px; padding:6px; box-shadow:var(--shadow-sm);
    }
    .doc-switch a{
      padding:8px 12px; border-radius:999px; font-weight:700; color:#5d41a3;
    }
    .doc-switch a.active{ background:#edeafb; color:#7143CD; }
    .doc-tools{ margin-left:auto; display:flex; gap:8px; }
    .doc-btn{
      background:#fff; color:#7143CD; border:1px solid #efe7ff; border-radius:10px; padding:8px 12px; font-weight:700;
      box-shadow:var(--shadow-sm); cursor:pointer;
    }

    .doc-highlights-title{ color:#7143cd; font-size:1.02rem; margin-top: 2em; }
    /* Highlights */
    .doc-highlights{
      margin-top:16px; display:grid; grid-template-columns: repeat(3,1fr); gap:10px;
    }
    .doc-h{
      background:#fff; border:1px solid #efe7ff; border-radius:12px; padding:12px; box-shadow:var(--shadow-sm);
      color:#3f2d6b; font-size:.98rem;
    }
    @media (max-width:900px){ .doc-highlights{ grid-template-columns:1fr; } }

    /* Layout body reuses .post-layout/.post-body/.post-toc */
    .doc-layout .post-body{ padding: 18px 18px; }
    .doc-search{
      position:static; top: calc(var(--nav-h,70px) + 14px);
      background:#fff; border:1px solid #efe7ff; border-radius:12px; box-shadow:var(--shadow-sm);
      padding:10px; margin-bottom:10px;
    }
    .doc-search input{
      width:100%; border:1.3px solid #e7e2fd; border-radius:10px; padding:10px 12px; background:#fff;
      font-family:'Signika',sans-serif;
    }
    .doc-search input:focus{ outline:none; border-color:#7143CD; background:#f7f5ff; }

    /* Sections as details cards */
    .doc-body details{ overflow: visible; background:#fff; border:1px solid #efe7ff; border-radius:12px; padding:12px 14px; box-shadow:var(--shadow-sm); }
    .doc-body details + details{ margin-top:10px; }
    .doc-body summary{ cursor:pointer; font-weight:800; color:#512f9e; outline: none; display:flex; align-items:center; gap:8px; }
    .doc-copylink{
      margin-left:auto; font-size:.9rem; color:#7143CD; background:#f3efff; border:1px solid #e7e2fd; border-radius:999px; padding:4px 8px;
      visibility:hidden;
    }
    details[open] .doc-copylink{ visibility:visible; }
    .doc-body p{ color:#4b3b72; font-size:1.03rem; }
    .doc-note{ background:#f8f7fd; border:1px dashed #e7e2fd; border-radius:10px; padding:10px 12px; color:#5a4c7c; margin: 8px 0; }

    .doc-body details .details-content {
  overflow: hidden;
  height: 0;                 /* collapsed baseline */
  transition: height 260ms ease;
}
.doc-body details.animating .details-content {
  /* while animating, keep overflow clipped */
  overflow: hidden;
}

/* optional: fade content for a softer feel */
.doc-body details .details-inner { opacity: 0; transition: opacity 220ms ease; }
.doc-body details[open] .details-inner { opacity: 1; }


    /* Expand/Collapse row */
    .doc-expander{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
    .doc-expander .doc-btn{ padding:7px 10px; }

    /* ToC re-skin */
    .post-toc .toc-title{ font-weight:800; color:#7143CD; margin-bottom:8px; padding-bottom:6px; border-bottom:1px solid rgba(113,67,205,.15); }
    .post-toc .toc-item{ color:#4b3b72; text-decoration:none; font-size:.95rem; padding-bottom:6px; border-bottom:1px solid rgba(113,67,205,.15); }
    .post-toc .toc-item.is-active{ color:#7143CD; font-weight:700; }


    .printing *{ animation: none !important; transition: none !important; }
.printing .reveal{ opacity:1 !important; transform:none !important; }
.printing .details-content{ height:auto !important; overflow:visible !important; }
.printing .details-inner{ opacity:1 !important; }


#docBody summary{ scroll-margin-top: calc(var(--nav-h,70px) + 14px); }

/* 1s flash highlight on jumped-to header */
@keyframes tocFlash {
  0%   { background:#fff6d9; box-shadow:0 0 0 2px rgba(251,161,22,.45) inset; }
  100% { background:transparent; box-shadow:0 0 0 0 transparent; }
}
.toc-hit{ animation: tocFlash 3s ease; border-radius:10px; padding-left: 20px; padding-right: 20px;}


    /* Print niceties */
    @media print{
  /* existing rules … */

  /* Make the hero/header clean and high-contrast on paper/PDF */
  .doc-hero{
    background:#ffffff !important;
    padding-top: 0 !important;
  }

  /* Chips & highlight cards: remove shadows, keep borders and black text */
  .doc-meta .chip,
  .doc-h{
    background:#fff !important;
    color:#000 !important;
    box-shadow:none !important;
    border-color:#bbb !important;
  }

  *{ animation: none !important; transition: none !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .details-content{ height:auto !important; overflow:visible !important; }
  .details-inner{ opacity:1 !important; }
}




/* ===========================
   Flirt Files — Login overlay
   =========================== */

body.ff-login-active {
  overflow: hidden;
}

/* Full-screen overlay */
.flirt-login {
  position: fixed;
  inset: 0;
  z-index: 1300; /* above nav (999) and mobile menu (~1100) */
  display: none; /* JS will switch this to flex */
  align-items: center;
  justify-content: center;
  padding: calc(var(--nav-h, 70px) + 20px) 16px 24px;
  background:
    radial-gradient(1200px 700px at 85% -20%, #e9e2ff 0%, rgba(233,226,255,0) 55%),
    radial-gradient(900px 480px at -20% 30%, #fff2dc 0%, rgba(255,242,220,0) 55%),
    rgba(6, 3, 24, 0.84); /* dark glass over brand blobs */
  backdrop-filter: blur(4px);
}


/* Center the "Open in Smize app" button */
#ffOpenAppBtn {
  display: block;
  margin: 12px auto 0;
}

/* Center the "Send OTP" button and add space above it */
#ffSendOtpBtn {
  display: block;
  margin: 18px auto 0;
}

#ffVerifyOtpBtn {
  display: block;
  margin: 18px auto 0;
}

/* Card in the center */
.flirt-login-inner {
  width: min(480px, 100%);
  background: #ffffff;
  border-radius: 22px;
  box-shadow: 0 18px 60px rgba(15, 3, 40, 0.45);
  padding: 22px 22px 20px;
}

/* Eyebrow / title / text */
.flirt-eyebrow {
  display: inline-block;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.86rem;
  color: #FBA116;
  margin-bottom: 6px;
}

.flirt-title {
  margin: 0 0 6px 0;
  font-size: clamp(22px, 3vw, 28px);
  color: #7143CD;
  font-weight: 700;
}

.flirt-sub {
  margin: 0 0 12px 0;
  color: #3c2a63;
  font-size: 0.98rem;
}

/* App login card inside overlay */
.flirt-login-card {
  margin-top: 10px;
  margin-bottom: 14px;
  padding: 14px 14px 12px;
  border-radius: 16px;
  background: #f8f7fd;
  border: 1px solid #e7e2fd;
}

/* Separator "or" line */
.flirt-login-separator {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 2px;
  color: #9a8fd2;
  font-size: 0.9rem;
}

.flirt-login-separator::before,
.flirt-login-separator::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e3dcff;
}

/* Form + inputs */
.flirt-login-form {
  margin-top: 12px;
}

.flirt-login-label {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: #6541a9;
  margin-bottom: 6px;
}

.flirt-login-input {
  width: 100%;
  padding: 0.75em 0.9em;
  border-radius: 9px;
  border: 1.4px solid #c8bff1;
  background: #f9f7ff;
  font-family: 'Signika', Arial, sans-serif;
  font-size: 1rem;
  transition: border 0.18s, background 0.18s, box-shadow 0.18s;
  box-sizing: border-box;
}

.flirt-login-input:focus {
  border-color: #7143CD;
  background: #f2effa;
  outline: none;
  box-shadow: 0 0 0 1px rgba(113, 67, 205, 0.24);
}

/* Helper / error text */
.flirt-login-help {
  margin-top: 12px;
  font-size: 0.88rem;
  color: #8674c0;
  text-align: center;
}

.flirt-login-error,
.flirt-login-error:empty {
  margin-top: 4px;
  font-size: 0.9rem;
  color: #b3261e;
}

/* OTP error styling (reuses same look) */
.flirt-login-error,
.flirt-login-error,
.flirt-login-error + .flirt-login-error {
  color: #b3261e;
}

/* Mobile tweaks */
@media (max-width: 640px) {
  .flirt-login {
    align-items: flex-start;
  }
  .flirt-login-inner {
    margin-top: 18px;
    border-radius: 18px;
    padding: 20px 18px 18px;
  }
}


/* =========================
   The Flirt Files Dashboard
   ========================= */

.flirt-hero{
  position: relative;
  padding-top: calc(var(--nav-h, 70px));
  padding-bottom: 30px;
  border-bottom: 1px solid #efe7ff;
  z-index: 0;
}

/* full-bleed background */
.flirt-hero::before{
  content: "";
  position: absolute;
  top: calc(-1 * var(--nav-h, 70px));
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: calc(100% + var(--nav-h, 70px));
  background:
  radial-gradient(1300px 650px at 85% -40%, #cbb9ff 0%, #eee9ff 34%, rgba(238,233,255,0) 62%),
  radial-gradient(1000px 540px at -15% 32%, #ffd9a3 0%, rgba(255,217,163,0) 58%),
  linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(113,67,205,0.05) 100%);
  z-index: -1;
}

.flirt-eyebrow{
  display:inline-block;
  text-transform:uppercase;
  font-weight:800;
  letter-spacing:.07em;
  color:#FBA116;
  font-size:.9rem;
}
.flirt-title{
  margin:.35em 0 .15em;
  font: 700 clamp(22px,3.2vw,30px) "Signika",sans-serif;
  color:#7143CD;
}
.flirt-sub{
  max-width: 640px;
  color:#4e3d76;
  font-size:1.02rem;
}

.flirt-hero-pill{
  margin-top:18px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  background:#0e0d11;
  color:#fff;
  border-radius:999px;
  padding:8px 14px;
  align-items:center;
  box-shadow:0 10px 30px rgba(0,0,0,.28);
}
.flirt-hero-pill > div{
  display:flex;
  align-items:center;
  gap:8px;
}
.flirt-hero-pill .ff-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#30e38b;
}

.flirt-summary{
  padding-top:40px;
}
.flirt-summary-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
  gap:18px;
}
.flirt-card{
  background:#F8F7FD;
  border-radius:18px;
  border:1.5px solid #efe7ff;
  padding:16px 16px 14px;
  box-shadow:0 2px 12px rgba(113,67,205,.12);
}
.flirt-card-label{
  font-size:.94rem;
  color:#7c66b8;
  font-weight:600;
  letter-spacing:.03em;
  text-transform:uppercase;
}
.flirt-card-number{
  margin-top:4px;
  font-size:2.2rem;
  font-weight:700;
  color:#2b213f;
}
.flirt-card-caption{
  margin-top:4px;
  font-size:.96rem;
  color:#4e3d76;
}

.flirt-timeline{
  margin-top: 36px;
  padding-top: 22px;
  padding-bottom: 30px;
  border-top: 1px solid #f0e9ff;
}
.flirt-timeline-header h2{
  margin:0 0 4px 0;
  font-size:1.35rem;
  color:#7143CD;
}
.flirt-timeline-header p{
  margin:0;
  font-size:.98rem;
  color:#4e3d76;
}
.flirt-timeline-list{
  margin-top:18px;
  display:flex;
  flex-direction:column;
  gap:10px;
  position:relative;
}

.flirt-timeline-item{
  display:grid;
  grid-template-columns: 20px 1fr;
  gap:10px;
  align-items:flex-start;
}
.fti-dot{
  width:12px;
  height:12px;
  border-radius:50%;
  background:#FBA116;
  box-shadow:0 0 0 4px rgba(251,161,22,.2);
  margin-top:6px;
}
.fti-body{
  background:#fff;
  border-radius:14px;
  padding:12px 14px 10px;
  border:1px solid #efe7ff;
  box-shadow:0 2px 10px rgba(113,67,205,.10);
}
.fti-top{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:.85rem;
  margin-bottom:4px;
}
.fti-type{
  font-weight:600;
  color:#7143CD;
}
.fti-time{
  color:#9a89c7;
}
.fti-title{
  margin:0 0 2px 0;
  font-size:1.02rem;
  color:#2b213f;
}
.fti-desc{
  margin:0;
  font-size:.94rem;
  color:#4e3d76;
}

.flirt-timeline-footer{
  margin-top:18px;
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-start;
}
.ff-loading{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:.96rem;
  color:#4e3d76;
}
.ff-loading-gif{
  width:20px;
  height:20px;
}
.ff-end-note{
  margin:0;
  font-size:.94rem;
  color:#4e3d76;
}

.flirt-error{
  margin-top:40px;
  padding:20px 18px;
  border-radius:16px;
  border:1.5px solid #fbd2b5;
  background:#fff7ef;
}
.flirt-error h2{
  margin-top:0;
  color:#b55b11;
}


.flirt-section{
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid #f0e9ff;
}
.flirt-section-header{
  margin-bottom:10px;
}
.flirt-section-title{
  margin:0 0 4px 0;
  font-size:1.25rem;
  color:#7143CD;
}
.flirt-section-sub{
  margin:0;
  font-size:.96rem;
  color:#4e3d76;
}
.flirt-section-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
  gap:12px;
  margin-top:12px;
}
.flirt-mini-card{
  background:#fff;
  border-radius:14px;
  border:1px solid #efe7ff;
  padding:10px 12px;
  box-shadow:0 2px 8px rgba(113,67,205,.08);
}
.flirt-mini-label{
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:#7c66b8;
  font-weight:600;
}
.flirt-mini-value{
  margin-top:3px;
  font-size:1.2rem;
  font-weight:700;
  color:#2b213f;
}
.flirt-mini-note{
  margin-top:2px;
  font-size:.8rem;
  color:#9a89c7;
}
.flirt-note{
  margin-top:10px;
  font-size:.9rem;
  color:#4e3d76;
}

.flirt-summary-meta{
  margin-top:10px;
  font-size:.9rem;
  color:#4e3d76;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}
.dot-separator{
  opacity:.5;
}

/* wallet */
.flirt-wallet-top{
  margin-top:12px;
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(160px,1fr));
  gap:10px;
}
.flirt-wallet-grid{
  margin-top:12px;
  border-radius:14px;
  border:1px solid #efe7ff;
  background:#fff;
  overflow:hidden;
}
.flirt-wallet-row{
  display:flex;
  justify-content:space-between;
  padding:8px 12px;
  font-size:.9rem;
  color:#4e3d76;
}
.flirt-wallet-row:nth-child(odd){
  background:#f8f7fd;
}

/* pricing */
.flirt-pricing-table{
  margin-top:12px;
  border-radius:14px;
  border:1px solid #efe7ff;
  background:#fff;
  overflow:hidden;
}
.flirt-pricing-row{
  display:flex;
  justify-content:space-between;
  padding:8px 12px;
  font-size:.9rem;
  color:#4e3d76;
}
.flirt-pricing-row:nth-child(odd){
  background:#f8f7fd;
}

@media (max-width:640px){
  .flirt-wallet-top{
    grid-template-columns:1fr;
  }
}


@media (max-width:640px){
  .flirt-hero-pill{
    border-radius:16px;
    align-items:flex-start;
  }
}



/* =========================
   Feature purchase collection
   ========================= */

.ff-collection-shell{
  margin-top:16px;
  border-radius:18px;
  background:#7143CD;
  padding: 12px 14px 14px;
  color:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
}

.ff-collection-header h3{
  margin:0;
  font-size:1.15rem;
  color:#fff;
}
.ff-collection-header p{
  margin:2px 0 0;
  font-size:.95rem;
  opacity:.9;
}

.ff-collection-grid{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
  gap:18px 20px;
}

@media (max-width:640px){
  .ff-collection-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

/* Premium packs strip above Collection – app-style big pills */
.ff-pack-row{
  margin:14px 2px 12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.ff-pack-card{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 16px 12px;
  border-radius:28px;
  border:1.5px solid rgba(255,255,255,0.85);
  background:linear-gradient(135deg,rgba(255,255,255,0.16),rgba(255,255,255,0.04));
  box-shadow:0 6px 18px rgba(0,0,0,.22);
}

.ff-pack-text{
  display:flex;
  flex-direction:column;
}

.ff-pack-name{
  font-size:1rem;
  font-weight:700;
  color:#fff;
}

.ff-pack-tag{
  margin-top:2px;
  font-size:.82rem;
  color:#fce7c3;
  opacity:.9;
}

.ff-pack-price{
  font-size:1.1rem;
  font-weight:700;
  color:#fff;
  white-space:nowrap;
}

@media (max-width:640px){
  .ff-pack-card{
    padding:10px 14px 12px;
    border-radius:24px;
  }
}


.ff-collection-item{
  border:none;
  padding:0;
  background:none;
  color:inherit;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  cursor:pointer;
}

.ff-collection-card{
  width:100%;
  min-height:96px;
  border-radius:15px;
  border:2px solid #FBA116;
  background:#fff;
  padding:6px 8px 8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  position:relative;
}

.ff-collection-icon-wrap{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
}

.ff-collection-icon{
  max-width:56%;
  max-height:42px;
}

.ff-collection-count{
  margin-top:3px;
  font-size:1rem;
  font-weight:700;
  color:#000;
}

.ff-collection-plus{
  position:absolute;
  right:6px;
  bottom:8px;
  width:22px;
  height:22px;
  border-radius:999px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 1px 4px rgba(0,0,0,.3);
  font-size:1.1rem;
  color:#000;
}

.ff-collection-label{
  font-size:.85rem;
  color:#fff;
}

.ff-collection-footnote{
  margin-top:16px;
  font-size:.85rem;
  opacity:.9;
}


/* =========================
   Feature purchase modal
   ========================= */

#ffPayModal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex; /* Ensure flex is used to center aligns */
  align-items: center;
  justify-content: center;
}

.ffpay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.5); /* Slightly darker for better focus */
  backdrop-filter: blur(2px); /* Adds a modern glass blur */
}

.ffpay-dialog {
  position: relative;
  /* Reduced width to fit content snugly */
  width: min(400px, calc(100% - 32px)); 
  margin: 0 auto;
  background: #fff;
  border-radius: 24px;
  /* Thinner, cleaner border */
  border: 2px solid #FBA116; 
  padding: 24px 24px 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  font-family: 'Signika', system-ui, -apple-system, Arial;
  max-height: 85vh;
  overflow-y: auto;
  transform: translateY(0);
}

.ffpay-close {
  position: absolute;
  right: 16px;
  top: 16px;
  background: transparent;
  border: 0;
  font-size: 24px;
  line-height: 1;
  color: #9a8fd2;
  cursor: pointer;
  transition: color 0.2s;
  padding: 4px;
}
.ffpay-close:hover {
  color: #7143CD;
}

.ffpay-title {
  margin: 0 0 6px 0;
  color: #2b213f;
  font-size: 1.4rem;
  font-weight: 700;
  padding-right: 20px; /* Space for close button */
}

.ffpay-sub {
  margin: 0 0 20px 0;
  color: #3c2a63;
  font-size: 0.95rem;
  line-height: 1.4;
  opacity: 0.9;
}

/* Row styling - compacted */
.ffpay-row {
  display: flex;
  flex-direction: column; /* Stack label and input for better mobile fit */
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 16px;
}

.ffpay-label {
  color: #6541a9;
  font-size: 0.9rem;
  font-weight: 600;
  margin-left: 2px;
}

.ffpay-select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1.5px solid #d5c5f7; /* Softer border color */
  outline: none;
  font: 600 1rem 'Signika', system-ui;
  background: #f9f7ff; /* Slight background tint */
  color: #2b213f;
  transition: border-color 0.2s, background 0.2s;
  cursor: pointer;
}

.ffpay-select:focus, .ffpay-select:hover {
  border-color: #7143CD;
  background: #fff;
}

/* Credits Row */
#ffpayCreditsRow {
  background: #fff8eb; /* Very subtle orange tint for credits highlight */
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #ffeabf;
  margin-bottom: 20px;
}

.ffpay-check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #2b213f;
  cursor: pointer;
}

.ffpay-check input {
  width: 18px;
  height: 18px;
  accent-color: #7143CD;
  cursor: pointer;
}

.ffpay-note {
  font-size: 0.85rem;
  color: #7c66b8;
  margin-left: 28px; /* Align with text, not checkbox */
  margin-top: 4px;
  line-height: 1.3;
}

.ffpay-amount-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px 0 16px;
  padding-top: 16px;
  border-top: 1px dashed #e7e2fd;
}

.ffpay-amount-label {
  color: #3c2a63;
  font-weight: 600;
}

.ffpay-amount {
  font-weight: 800;
  color: #7143CD;
  font-size: 1.5rem;
}

.ffpay-actions {
  display: flex;
  flex-direction: column; /* Stack buttons for better mobile tap targets */
  gap: 10px;
  margin-top: 0;
}

.ffpay-btn {
  width: 100%;
  padding: 12px;
  font-size: 1rem;
  border-radius: 12px;
  border: none;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.1s, opacity 0.2s;
}

.ffpay-btn:active {
  transform: scale(0.98);
}

.ffpay-btn#ffpayCashfree {
  background: #fff;
  border: 2px solid #e7e2fd;
  color: #5b2c99;
}
.ffpay-btn#ffpayCashfree:hover {
  border-color: #7143CD;
  background: #f9f7ff;
}

.ffpay-btn.primary {
  background: #7143CD;
  color: #fff;
  box-shadow: 0 4px 12px rgba(113,67,205,0.25);
}
.ffpay-btn.primary:hover {
  background: #5e33b3;
}

.ffpay-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.ffpay-footer-note {
  text-align: center;
  color: #9a89c7;
  font-size: 0.8rem;
  margin-top: 12px;
}