/* Samro AI Receptionist signup widget.
   Everything is prefixed .rsw- so it cannot collide with a landing page, the
   blog shell or the CRM portal's own styles. Tokens are read from the host page
   when it defines them and fall back to the house values otherwise, so the
   widget looks native on samrostudios.com and inside the portal.
   Mobile first. 390px is the width it is designed at. Zero em dashes. */

.rsw {
  --rsw-bone: var(--bone, #F5F3EE);
  --rsw-card: var(--bone-card, #FBFAF6);
  --rsw-ink: var(--ink, #17181C);
  --rsw-body: var(--secondary, #54565C);
  --rsw-muted: var(--muted, #6D6F74);
  --rsw-hair: var(--hair, #E3E0D8);
  --rsw-gold: var(--gold, #A07E33);
  --rsw-gold-text: var(--gold-text, #7E601E);
  --rsw-danger: #B3261E;
  --rsw-ease: cubic-bezier(.4, 0, .2, 1);

  position: relative;
  overflow: hidden;
  max-width: 460px;
  margin: 0 auto;
  font-family: var(--font-body, 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  color: var(--rsw-ink);
}

.rsw *,
.rsw *::before,
.rsw *::after { box-sizing: border-box; }

.rsw-panels { position: relative; }

.rsw-panel {
  background: var(--rsw-card);
  border: 1px solid var(--rsw-hair);
  border-radius: 14px;
  padding: clamp(22px, 5vw, 32px);
  transition: transform 0.3s var(--rsw-ease), opacity 0.3s var(--rsw-ease);
}

/* The details panel waits off screen to the right and the plan card leaves to
   the left, so the two never occupy the same space and the height animates from
   whichever one is mounted. */
.rsw-panel[hidden] { display: none; }
.rsw-panel--out-left { transform: translateX(-16px); opacity: 0; }
.rsw-panel--in-right { transform: translateX(16px); opacity: 0; }
.rsw-panel--settled { transform: translateX(0); opacity: 1; }

.rsw-pill {
  display: inline-block;
  background: rgba(160, 126, 51, .14);
  color: var(--rsw-gold-text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 5px 12px;
  border-radius: 999px;
  margin: 0 0 14px;
}

.rsw-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 4px;
}
.rsw-price b {
  font-size: clamp(38px, 9vw, 52px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
}
.rsw-price span { font-size: 15px; color: var(--rsw-body); }

.rsw-unlimited {
  font-size: 16px;
  color: var(--rsw-body);
  margin: 0 0 20px;
}

.rsw-bullets { list-style: none; margin: 0 0 22px; padding: 0; }
.rsw-bullets li {
  position: relative;
  padding-left: 26px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--rsw-body);
}
.rsw-bullets li + li { margin-top: 11px; }
.rsw-bullets li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--rsw-gold);
  border-bottom: 2px solid var(--rsw-gold);
  transform: rotate(-45deg);
}

.rsw-cta {
  display: block;
  width: 100%;
  border: 0;
  cursor: pointer;
  background: var(--rsw-ink);
  color: var(--rsw-bone);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  padding: 15px 20px;
  border-radius: 999px;
  transition: background 0.18s var(--rsw-ease), transform 0.18s var(--rsw-ease);
}
.rsw-cta:hover { background: #000; }
.rsw-cta:active { transform: scale(.99); }
.rsw-cta:focus-visible { outline: 2px solid var(--rsw-gold); outline-offset: 3px; }
.rsw-cta[disabled] { opacity: .6; cursor: default; transform: none; }

.rsw-micro {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--rsw-muted);
  margin: 12px 0 0;
  text-align: center;
}

.rsw-h {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 4px;
}
.rsw-sub {
  font-size: 13.5px;
  color: var(--rsw-muted);
  margin: 0 0 20px;
}

.rsw-row { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.rsw-field { display: block; margin: 0 0 12px; }
.rsw-field > span {
  display: block;
  font-size: 12.5px;
  color: var(--rsw-body);
  margin: 0 0 5px;
}
.rsw-field input,
.rsw-field select {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  color: var(--rsw-ink);
  background: #fff;
  border: 1px solid var(--rsw-hair);
  border-radius: 10px;
  padding: 11px 12px;
  appearance: none;
}
.rsw-field select { background-image: none; }
.rsw-field input:focus,
.rsw-field select:focus {
  outline: 2px solid var(--rsw-gold);
  outline-offset: 1px;
  border-color: var(--rsw-gold);
}

.rsw-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 16px 0 18px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--rsw-body);
}
.rsw-consent input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--rsw-ink); }
.rsw-consent a { color: var(--rsw-gold-text); }

.rsw-back {
  display: inline-block;
  margin-top: 14px;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--rsw-muted);
  text-decoration: underline;
  padding: 6px 0;
}
.rsw-back:hover { color: var(--rsw-ink); }

.rsw-error {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--rsw-danger);
  margin: 12px 0 0;
}
.rsw-error[hidden] { display: none; }

/* The honeypot. Off screen rather than display:none, because a headless filler
   skips display:none but happily fills something it can compute a box for. */
.rsw-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 420px) {
  .rsw-row { grid-template-columns: 1fr; gap: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .rsw-panel { transition: none !important; }
  .rsw-panel--out-left,
  .rsw-panel--in-right { transform: none; opacity: 1; }
  .rsw-cta { transition: none !important; }
  .rsw-cta:active { transform: none; }
}