/* ============ Layout: equal 2-col grid with consistent spacing ============ */
  #main-content{
	  background-color: rgb(241 241 241);
  }
  .auth-wrap.signup-clean{
    --max: 1320px;
    --gutter: clamp(32px, 6vw, 120px);
    --col-gap: clamp(44px, 6vw, 96px);
    width: min(var(--max), 100% - var(--gutter));
    margin-inline: auto;
    padding-block: clamp(28px, 5vw, 84px);
	float: none !important;
  }
  .auth-wrap.signup-clean .auth-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;           /* equal columns */
    align-items:center;
    justify-items:stretch;
    column-gap: var(--col-gap);
	align-content: center;
	
  }
  @media (max-width: 960px){
    .auth-wrap.signup-clean .auth-grid{
      grid-template-columns: 1fr;
      row-gap: clamp(28px, 6vw, 56px);
    }
  }
  .auth-wrap.signup-clean .auth-left{
    display:grid; gap: 1rem; align-content:start;
    max-width: 700px; /* keeps left column readable while columns stay equal */
    justify-self: stretch;
  }

  /* Headline & sub */
  .auth-wrap.signup-clean .auth-hero{ margin-bottom: clamp(16px, 2.5vw, 28px); }
  .auth-wrap.signup-clean .auth-hero__title{
    font-family:"Questrial","Open Sans",system-ui,sans-serif;
    font-size: clamp(1.9rem, 2.2vw + 1rem, 2.6rem);
    line-height:1.15; margin:0 0 .4em;
  }
  .auth-wrap.signup-clean .auth-hero__subtitle{
    font-family:"Open Sans",system-ui,sans-serif;
    font-size:1rem; line-height:1.55; color:#444; margin:0;
  }

  /* Card & form branding (applies to injected KO forms) */
  .auth-wrap.signup-clean .auth-card{
    background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:24px;
    box-shadow:0 8px 24px rgba(0,0,0,.12);
    padding: clamp(20px, 3vw, 36px);
    margin-bottom: clamp(16px, 3vw, 36px);
  }
  .auth-wrap.signup-clean .auth-tab-radio{ position:absolute; opacity:0; pointer-events:none; }
  .auth-wrap.signup-clean .auth-tablist{
    display:grid; grid-template-columns:1fr 1fr; position:relative;
    border-bottom:1px solid rgba(0,0,0,.08); margin-bottom:16px;
  }
  .auth-wrap.signup-clean .auth-tab{ text-align:center; padding:14px 10px; font-weight:700; color:#5a5a5a; cursor:pointer; }
  .auth-wrap.signup-clean .auth-tab-underline{
    position:absolute; bottom:-1px; left:0; width:50%; height:3px; background:#00b798; border-radius:3px 3px 0 0;
    transform:translateX(0%); transition:transform .25s ease;
  }
  #tab-login:checked ~ .auth-tablist .auth-tab-underline{ transform:translateX(100%); }
  #tab-signup:checked ~ .auth-tablist .auth-tab[for="tab-signup"],
  #tab-login:checked  ~ .auth-tablist .auth-tab[for="tab-login"]{ color:#222; }
  .auth-wrap.signup-clean .auth-panels{ position:relative; }
/*  .auth-wrap.signup-clean .auth-panel{ display:none; }*/
  #panel-signup, #panel-login{ padding-top: 8px; }
  #tab-signup:checked ~ .auth-panels #panel-signup{ display:block; }
  #tab-login:checked  ~ .auth-panels #panel-login{ display:block; }

  .auth-wrap.signup-clean .auth-card input[type="text"],
  .auth-wrap.signup-clean .auth-card input[type="email"],
  .auth-wrap.signup-clean .auth-card input[type="password"],
  .auth-wrap.signup-clean .auth-card input[type="tel"],
  .auth-wrap.signup-clean .auth-card select,
  .auth-wrap.signup-clean .auth-card textarea{
    width:100%; background:#fff; border:1px solid rgba(0,0,0,.12); border-radius:12px;
    padding:12px 14px; font-size:15px; color:#222; margin:8px 0 14px; transition:border-color .2s, box-shadow .2s;
  }
  .auth-wrap.signup-clean .auth-card input:focus,
  .auth-wrap.signup-clean .auth-card select:focus,
  .auth-wrap.signup-clean .auth-card textarea:focus{
    border-color:#00b798; box-shadow:0 0 0 3px rgba(0,183,152,.18); outline:none;
  }
  .auth-wrap.signup-clean .value-list{ margin:0 0 16px 0; padding-left:18px; color:#222; }
  .auth-wrap.signup-clean .link-underline{ text-decoration:underline; color:#222; display:inline-block; margin:8px 0 16px; }
  .auth-wrap.signup-clean .button{ display:inline-flex; align-items:center; justify-content:center; padding:12px 18px; border-radius:20px; font-weight:700; border:1px solid transparent; transition:.2s; }
  .auth-wrap.signup-clean .button--large{ padding:14px 22px; font-size:16px; }
  .auth-wrap.signup-clean .button--primary{ background:#00b798; color:#fff; box-shadow:0 8px 18px rgba(0,183,152,.28); }
  .auth-wrap.signup-clean .button--primary:hover{ filter:brightness(.96); }

  /* Benefits */
  .auth-wrap.signup-clean .auth-benefits{
    margin:.5rem 0 0; padding:0; list-style:none;
    display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:.5rem 1rem;
  }
  .auth-wrap.signup-clean .auth-benefits li{ position:relative; padding-left:1.5rem; font-size:.95rem; }
  .auth-wrap.signup-clean .auth-benefits li::before{
    content:"✓"; position:absolute; left:0; top:0; transform: translateY(2px);
    font-weight:700; color:#00a86b;
  }

  /* ============ Right column: Single big SQUARE slider (CSS-only radios) ============ */
  .auth-wrap.signup-clean .auth-aside{
    justify-self: stretch; max-width: 700px; /* visual balance vs left */
  }
  @media (max-width: 960px){
    .auth-wrap.signup-clean .auth-aside{ max-width: none; }
  }

  .snap-slider{
    --radius: 20px;
    position: relative;
    width: 100%;
    margin-inline: auto;
  }

  /* Hidden radios that drive the slider */
  .snap-slider input[type="radio"]{ position:absolute; opacity:0; pointer-events:none; }

  /* Square viewport using aspect-ratio for perfect square */
  .snap-slider__viewport{
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;            /* <- keeps it perfectly square */
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 12px 24px rgba(0,0,0,.12);
    background: #f3f4f6;
  }

  /* Track: 3 slides wide, translate based on which radio is checked */
  .snap-slider__track{
    display:flex; width: 300%; height: 100%;
    transform: translateX(0%);
    transition: transform .4s ease;
  }
  .snap-slider__slide{ width: 100%; height: 100%; flex: 0 0 33.3333%; position: relative; }
  .snap-slider__slide img{ width:100%; height:100%; object-fit:cover; display:block; }

  /* Translate rules (siblings of radios) */
  #hero-1:checked ~ .snap-slider__viewport .snap-slider__track{ transform: translateX(0%); }
  #hero-2:checked ~ .snap-slider__viewport .snap-slider__track{ transform: translateX(-33.3333%); }
  #hero-3:checked ~ .snap-slider__viewport .snap-slider__track{ transform: translateX(-66.6666%); }

  /* Dots (optional) */
  .snap-slider__dots{ display:flex; justify-content:center; gap:12px; padding-top:14px; }
  .snap-slider__dots label{
    width:12px; height:12px; border-radius:999px; background:#cfd2d6; display:inline-block; cursor:pointer;
  }
  #hero-1:checked ~ .snap-slider__dots label[for="hero-1"],
  #hero-2:checked ~ .snap-slider__dots label[for="hero-2"],
  #hero-3:checked ~ .snap-slider__dots label[for="hero-3"]{ background:#00b798; }

  /* Clickable arrows (pure CSS with labels) */
  .snap-slider__controls{
    position:absolute; inset:0; pointer-events:none;
    display:flex; align-items:center; justify-content:space-between;
    padding: 0 10px;
  }
  .snap-slider__arrow{
    pointer-events:auto; width:42px; height:42px; border-radius:999px; background:rgba(0,0,0,.55);
    display:none; /* default hidden; shown per-checked state */
    align-items:center; justify-content:center;
    color:#fff; font-size:20px; line-height:1; cursor:pointer;
    transition: background .2s ease, transform .1s ease;
    user-select:none;
  }
  .snap-slider__arrow:hover{ background:rgba(0,0,0,.7); }
  .snap-slider__arrow:active{ transform: scale(.96); }

  /* Show the correct prev/next pair depending on which radio is checked */
  #hero-1:checked ~ .snap-slider__controls .prev-3,
  #hero-1:checked ~ .snap-slider__controls .next-2{ display:flex; }
  #hero-2:checked ~ .snap-slider__controls .prev-1,
  #hero-2:checked ~ .snap-slider__controls .next-3{ display:flex; }
  #hero-3:checked ~ .snap-slider__controls .prev-2,
  #hero-3:checked ~ .snap-slider__controls .next-1{ display:flex; }
  /* --- Auth Card: more visual lift and subtle teal accent --- */
.auth-wrap.signup-clean .auth-card {
  background: #ffffff;
  border: 1px solid #00b798; /* fine teal border */
  border-radius: 24px;
  box-shadow:
    0 10px 22px rgba(0,183,152,0.18),
    0 4px 10px rgba(0,183,152,0.12); /* teal-tinted shadow */
  padding: clamp(24px, 3vw, 40px);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* A gentle hover lift for interactivity */
.auth-wrap.signup-clean .auth-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 14px 28px rgba(0,183,152,0.25),
    0 6px 14px rgba(0,183,152,0.15);
}

/* --- Headline: stronger presence --- */
.auth-wrap.signup-clean .auth-hero__title {
  font-family: "Questrial", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(2.3rem, 3vw + 1rem, 3.6rem);
  line-height: 1.1;
  color: #222;
  letter-spacing: -0.015em;
  margin-bottom: 0.4em;
  background: linear-gradient(90deg, #00b798 0%, #00d1ae 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-transform: none;
}

/* Optional subtle underline accent for the headline */
.auth-wrap.signup-clean .auth-hero__title::after {
  content: "";
  display: block;
  width: 60px;
  height: 4px;
  border-radius: 2px;
  margin-top: 10px;
  background-color: #00b798;
}

/* Subtitle tone-up for better hierarchy */
.auth-wrap.signup-clean .auth-hero__subtitle {
  font-size: clamp(1.05rem, 1vw + 0.8rem, 1.3rem);
  color: #5a5a5a;
  max-width: 36ch;
  line-height: 1.5;
}

/* Optional: increase spacing between the headline block and card */
.auth-wrap.signup-clean .auth-hero {
  margin-bottom: clamp(24px, 4vw, 40px);
}