/* ===== Brand tokens (keep yours) ===== */
:root{
  --rx-primary-ink:#8236CF;
  --rx-primary:#FF6A1A;
  --rx-grad-a:#8236CF;
  --rx-grad-b:#EB018E;
  --rx-neutral-50:#F8F9FB;
  --rx-neutral-100:#F5F5F6;
  --rx-neutral-900:#161616;
}

/* Layout */
body{background:var(--rx-neutral-50)}
.container{max-width:1200px}

/* Cards: soft glass */
.card{
  border:0; border-radius:28px;
  box-shadow:0 20px 60px rgba(9,37,63,.08);
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(160%) blur(6px);
}

/* Headline gradient */
.gradient-text{
  background:linear-gradient(90deg, #ee7516, #cb178b);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Buttons */
.btn-gradient{
  background: linear-gradient(90deg, #ee7516, #cb178b);
  border:0; color:#fff; border-radius:14px; font-weight:700;
  box-shadow:0 10px 24px rgba(235,1,142,.25);
}
.btn-gradient:hover{transform:translateY(-1px)}
.btn-gradient:disabled{opacity:.8}

/* Inputs */
.form-control{
  border-radius:14px; padding:.9rem 1rem;
  border:1px solid rgba(9,37,63,.15); background:#fff;
}
.form-control:focus{
  border-color:transparent; box-shadow:0 0 0 .25rem rgba(131,54,207,.15);
}

/* Pills (radios/checkboxes) */
.pill-group{display:flex; flex-wrap:wrap; gap:.6rem}
.pill{
  display:inline-flex; align-items:center; gap:.5rem;
  border:1px solid rgba(9,37,63,.15); border-radius:999px;
  padding:.55rem .95rem; cursor:pointer; background:#fff;
}
.pill input{accent-color:var(--rx-primary)}
.pill:hover{box-shadow:0 6px 18px rgba(9,37,63,.08)}

/* Feature bullets */
.feature-list{list-style:none; padding-left:0; margin:0}
.feature-list li{display:flex; gap:.6rem; align-items:flex-start; margin:.5rem 0}
.feature-list i{font-size:1.1rem; color:var(--rx-primary)}

/* Left hero panel */
.left-hero{
  border-radius:28px; background:#fff; position:relative; overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(9,37,63,.05);
}
.left-hero:before,
.left-hero:after{
  content:""; position:absolute; filter:blur(60px); opacity:.25;
}
.left-hero:before{width:280px;height:280px; background:var(--rx-grad-a); left:-60px; top:-60px}
.left-hero:after{width:300px;height:300px; background:var(--rx-grad-b); right:-80px; bottom:-80px}

/* Alert */
#alertBox{border-radius:12px}

/* Tiny */
.smallcaps{letter-spacing:.08em; text-transform:uppercase}
.hero-quote{font-size:clamp(26px,2.6vw,38px); line-height:1.18}

/* in rigitix.css */
.hp-wrap{position:absolute !important; left:-99999px !important; width:1px; height:1px; overflow:hidden;}

.custom-link{color:var(--rx-primary); text-decoration:underline;}
.custom-link:hover{color:var(--rx-primary-ink); text-decoration:none;}



/* === Reveal-on-scroll base === */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: transform .7s cubic-bezier(.2,.65,.25,1), opacity .7s;
  will-change: transform, opacity;
}
.reveal.show { opacity: 1; transform: none; }

/* directions */
.reveal-left  { transform: translateX(-40px); }
.reveal-right { transform: translateX( 40px); }
.reveal-up    { transform: translateY( 24px); }
.reveal-down  { transform: translateY(-24px); }

/* nice small stagger helper */
.stagger > * { transition-delay: calc(var(--i, 0) * 90ms); }

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right, .reveal-up, .reveal-down {
    transition: none; transform: none; opacity: 1;
  }
}
/* Chip group */
.chip-group{display:flex; flex-wrap:wrap; gap:.6rem}
.chip{
  user-select:none; cursor:pointer;
  background:#fff; color:#111;
  border:1px solid rgba(9,37,63,.15);
  border-radius:999px; padding:.55rem .95rem;
  display:inline-flex; align-items:center; transition:.15s ease;
}
.chip:hover{box-shadow:0 6px 18px rgba(9,37,63,.08)}
/* checked state */
.evt-check:checked + .chip,
.chip.active{
  color:#fff; border-color:transparent;
  background: linear-gradient(90deg,var(--rx-grad-a),var(--rx-grad-b));
  box-shadow:0 8px 20px rgba(235,1,142,.25);
}

/* Selected summary bar */
.selected-bar .tag{
  display:inline-flex; align-items:center; gap:.35rem;
  background:rgba(130,54,207,.1); color:#512081;
  border-radius:999px; padding:.35rem .6rem; margin:.2rem;
  font-size:.88rem;
}
.selected-bar .tag button{
  border:0; background:transparent; line-height:1; padding:0; cursor:pointer;
}



/* ============================
   Fancy chip selector styling
   ============================ */

/* Grid layout for chips (auto-wrap, even columns) */
.chip-group{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap:.65rem .65rem;
}

/* Base chip */
.chip{
  --ring: rgba(130,54,207,.18);            /* ring color */
  --ink: #1d1d1f;
  --edge: rgba(9,37,63,.14);

  display:inline-flex; align-items:center; gap:.5rem;
  padding:.65rem 1rem;
  border-radius:999px;
  border:1px solid var(--edge);
  background:#fff;
  color:var(--ink);
  line-height:1.15;
  font-weight:600;
  cursor:pointer;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
  box-shadow:0 2px 0 rgba(0,0,0,.02);
  user-select:none;
  will-change:transform, box-shadow;
}

/* Icon inside chip */
.chip > i{ font-size:1rem; opacity:.85; }

/* Hover */
.chip:hover{
  transform: translateY(-1px);
  box-shadow:0 10px 22px rgba(9,37,63,.08), 0 0 0 3px var(--ring);
  border-color: transparent;
}

/* Keyboard focus (when label is focused via hidden input) */
.evt-check:focus + .chip{
  box-shadow:0 0 0 3px var(--ring);
  border-color: transparent;
}

/* Active (checked) */
.evt-check:checked + .chip,
.chip.active{
  color:#fff;
  background: linear-gradient(92deg,var(--rx-grad-a),var(--rx-grad-b));
  border-color: transparent;
  box-shadow:0 14px 32px rgba(235,1,142,.28);
}
.evt-check:checked + .chip > i{ opacity:1; }

/* Make the list look tighter on small screens */
@media (max-width: 480px){
  .chip-group{ grid-template-columns: 1fr 1fr; }
  .chip{ padding:.55rem .8rem; font-weight:600; }
}

/* -------- Selected summary bar -------- */
.selected-bar{
  display:flex; align-items:flex-start; flex-wrap:wrap;
  gap:.4rem .4rem; padding:.4rem 0 .1rem 0;
}

.selected-bar .tags{ display:flex; flex-wrap:wrap; gap:.4rem; }

/* Tag pill */
.selected-bar .tag{
  --tag-bg: rgba(130,54,207,.12);
  --tag-ink:#4b2b80;
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.38rem .65rem;
  border-radius:999px;
  background: var(--tag-bg);
  color: var(--tag-ink);
  border:1px solid rgba(130,54,207,.15);
  font-weight:600;
}

/* Close (×) button on tag */
.selected-bar .tag button{
  display:inline-grid; place-items:center;
  width:20px; height:20px;
  border-radius:999px;
  border:0; background:#fff;
  color:#6c2db6; font-weight:700; line-height:1;
  cursor:pointer;
  box-shadow:0 1px 0 rgba(0,0,0,.05);
  transition: transform .12s ease, box-shadow .12s ease;
}
.selected-bar .tag button:hover{
  transform: scale(1.07);
  box-shadow:0 2px 6px rgba(9,37,63,.18);
}

/* Tidy the input group so it matches the style */
.input-group .form-control{
  border-radius: 12px;
}
.input-group .input-group-text,
.input-group .btn{
  border-radius: 12px;
}
.input-group .btn{
  font-weight:700;
  border-color: rgba(9,37,63,.14);
}

/* A touch more room under the field hint */
.form-text{ margin-top:.4rem; }



/* Brandy close buttons on selected tags */
.selected-bar .tag{
  --tag-grad-a: var(--rx-grad-a);
  --tag-grad-b: var(--rx-grad-b);
  --tag-ink: #4b2b80;
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.42rem .7rem;
  border-radius:999px;
  background:rgba(130,54,207,.10);
  color:var(--tag-ink);
  border:1px solid rgba(130,54,207,.18);
  font-weight:600;
}

.selected-bar .tag button{
  /* button is a circular brand chip */
  --size: 22px;
  width:var(--size); height:var(--size);
  display:inline-grid; place-items:center;
  border:0; outline:0;
  border-radius:999px;
  background: linear-gradient(92deg, var(--rx-grad-a), var(--rx-grad-b));
  color:#fff;
  font-weight:800; line-height:1; cursor:pointer;
  box-shadow:0 3px 10px rgba(235,1,142,.28);
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}

.selected-bar .tag button:hover{
  transform: scale(1.06);
  box-shadow:0 5px 14px rgba(235,1,142,.32);
}

.selected-bar .tag button:active{
  transform: scale(0.96);
}

.selected-bar .tag button:focus-visible{
  box-shadow:0 0 0 3px rgba(130,54,207,.25), 0 3px 10px rgba(235,1,142,.28);
}

/* Slightly tighter on very small screens */
@media (max-width:480px){
  .selected-bar .tag{ padding:.36rem .6rem; }
  .selected-bar .tag button{ --size: 20px; }
}


/* Make chips slightly smaller */
.chip {
  font-size: 0.85rem;   /* try 14px */
  padding: 0.45rem 0.9rem;
}

/* Also reduce the icon size inside */
.chip i {
  font-size: 1rem;      /* smaller ticket icon */
}


@media (max-width: 576px) {
  .chip {
    font-size: 0.8rem;   /* even smaller on phones */
    padding: 0.35rem 0.8rem;
  }
}

/* smaller textarea on mobile if desired */
@media (max-width:576px){
  #requested_features { min-height: 90px; }
}