/**
 * Floating "Let's Talk" CTA - Figma node 82:10475
 * =========================================================================
 * 130 x 52, radius 16, vertical gradient #FF3902 (12%) -> #FF8007 (93%),
 * drop shadow rgba(255,85,0,.45) 0 8 28, 18px spark icon, 10px gap,
 * 20px left padding, label in Plus Jakarta Sans SemiBold 14/21.
 */

.a3-fcta {
  position: fixed;
  right: 32px;
  bottom: 32px;
  z-index: 999;

  display: inline-flex;
  align-items: center;
  gap: 10px; /* Figma itemSpacing 9.76 */

  box-sizing: border-box;
  min-width: 130px;
  height: 52px;
  padding: 0 20px; /* Figma paddingLeft 20.24 */

  border-radius: 16px;
  background: linear-gradient(180deg, #ff3902 12%, #ff8007 93%);
  box-shadow: 0 8px 28px rgba(255, 85, 0, 0.45);

  color: #fff;
  font-family: "Plus Jakarta Sans", "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 21px;
  text-decoration: none;
  white-space: nowrap;

  transition:
    transform 0.4s cubic-bezier(0.22, 0.85, 0.28, 1),
    box-shadow 0.4s cubic-bezier(0.22, 0.85, 0.28, 1);
}

.a3-fcta:hover,
.a3-fcta:focus-visible {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(255, 85, 0, 0.55);
}

.a3-fcta:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.a3-fcta__icon {
  position: relative; /* the two glyphs stack inside this box */
  display: flex;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

.a3-fcta__icon svg {
  display: block;
  width: 18px;
  height: 18px;
}

/* =========================================================================
 * OPEN STATE - the pill becomes a close button
 *
 * Three things move together off the wrapper's .is-open, on one 0.38s curve:
 * the spark spins out while the cross spins in, the label collapses to zero
 * width, and the pill contracts to a 52px round button. All of it is CSS on a
 * class the existing script already toggles - no JS was added.
 *
 * The cross is drawn as well as rotated: its two strokes are 26 units long, so
 * dashoffset 26 -> 0 wipes them in from the ends. It reads as the button
 * writing an X rather than swapping to a different icon.
 * ========================================================================= */

.a3-fcta__icon > svg {
  transition:
    opacity 0.24s ease,
    transform 0.38s cubic-bezier(0.22, 0.85, 0.28, 1);
}

/* The cross is stacked on the spark rather than laid out beside it. */
.a3-fcta__cross {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: rotate(-90deg) scale(0.5);
}

.a3-fcta__cross path {
  stroke-dasharray: 26;
  stroke-dashoffset: 26;
  transition: stroke-dashoffset 0.38s cubic-bezier(0.22, 0.85, 0.28, 1);
}

.a3-fcta-wrap.is-open .a3-fcta__icon > svg:first-child {
  opacity: 0;
  transform: rotate(90deg) scale(0.5);
}

.a3-fcta-wrap.is-open .a3-fcta__cross {
  opacity: 1;
  transform: rotate(0) scale(1);
}

.a3-fcta-wrap.is-open .a3-fcta__cross path {
  stroke-dashoffset: 0;
}

/* The label has to collapse from a measured width, so max-width carries the
 * transition; the negative margin absorbs the button's 10px flex gap as it
 * goes, otherwise the cross ends up sitting off-centre in the circle. */
.a3-fcta__label {
  display: inline-block;
  max-width: 12em;
  overflow: hidden;
  opacity: 1;
  transition:
    max-width 0.38s cubic-bezier(0.22, 0.85, 0.28, 1),
    opacity 0.2s ease 0.08s,
    margin-right 0.38s cubic-bezier(0.22, 0.85, 0.28, 1);
}

.a3-fcta-wrap.is-open .a3-fcta__label {
  max-width: 0;
  margin-right: -10px;
  opacity: 0;
  transition:
    max-width 0.38s cubic-bezier(0.22, 0.85, 0.28, 1),
    opacity 0.16s ease,
    margin-right 0.38s cubic-bezier(0.22, 0.85, 0.28, 1);
}

/* Tuck it in a little on small screens so it does not crowd the content. */
@media (max-width: 767px) {
  .a3-fcta {
    right: 16px;
    bottom: 16px;
  }
}

/* Respect reduced-motion: keep the colour change, drop the movement. */
@media (prefers-reduced-motion: reduce) {
  .a3-fcta,
  .a3-fcta-wrap .a3-fcta,
  .a3-fcta__icon > svg,
  .a3-fcta__cross path,
  .a3-fcta__label {
    transition: none;
  }

  /* The cross still has to be drawn - without motion it just appears whole. */
  .a3-fcta-wrap.is-open .a3-fcta__cross,
  .a3-fcta__cross path {
    stroke-dashoffset: 0;
  }

  .a3-fcta:hover,
  .a3-fcta:focus-visible {
    transform: none;
  }
}

/* =========================================================================
 * Expanded panel - Figma node 82:10483 (220 x 210)
 *
 * Panel #0E0E0E radius 20 | head 20/19.75 padding over a 1px hairline
 * | actions 12 padding, 8 gap | buttons 196 x 50 radius 12.
 * Eyebrow Plus Jakarta 600/11 uppercase, title Poppins 500/15.
 * ========================================================================= */

.a3-fcta-wrap {
  position: fixed;
  right: 32px;
  bottom: 32px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

/* The pill is positioned by the wrapper now, not by itself. */
.a3-fcta-wrap .a3-fcta {
  position: static;
  right: auto;
  bottom: auto;
  border: 0;
  cursor: pointer;
}

/* Open: contract to a 52px round close button. min-width and padding are what
 * hold the pill open, so both have to animate, and border-radius rounds off
 * over the same beat. */
.a3-fcta-wrap.is-open .a3-fcta {
  min-width: 52px;
  padding: 0 17px;
  border-radius: 50%;
}

.a3-fcta-wrap .a3-fcta {
  transition:
    min-width 0.38s cubic-bezier(0.22, 0.85, 0.28, 1),
    padding 0.38s cubic-bezier(0.22, 0.85, 0.28, 1),
    border-radius 0.38s cubic-bezier(0.22, 0.85, 0.28, 1),
    transform 0.4s cubic-bezier(0.22, 0.85, 0.28, 1),
    box-shadow 0.4s cubic-bezier(0.22, 0.85, 0.28, 1);
}

/* No label -> a 52px circle showing just the spark. */
.a3-fcta-wrap.is-icon-only .a3-fcta {
  min-width: 52px;
  width: 52px;
  padding: 0;
  justify-content: center;
  border-radius: 16px;
}

.a3-fcta-panel {
  width: 220px;
  border-radius: 20px;
  background: #0e0e0e;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.a3-fcta-panel[hidden] {
  display: none;
}

.a3-fcta-panel__head {
  display: flex;
  flex-direction: column;
  gap: 1.5px; /* Figma itemSpacing */
  padding: 19.75px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.a3-fcta-panel__eyebrow {
  font-family: "Plus Jakarta Sans", "Inter", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.a3-fcta-panel__title {
  font-family: "Poppins", "Inter", sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 23px;
  color: #fff;
}

.a3-fcta-panel__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
}

.a3-fcta-act {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  padding: 0 16px;
  border-radius: 12px;
  font-family: "Plus Jakarta Sans", "Inter", sans-serif;
  font-size: 13.5px;
  line-height: 21px;
  color: #fff;
  text-decoration: none;
  transition:
    filter 0.2s ease,
    background 0.2s ease;
}

.a3-fcta-act__icon,
.a3-fcta-act__arrow {
  display: flex;
  flex: 0 0 auto;
}

/* The arrow is pushed to the far edge - Figma spaces it with a large gap. */
.a3-fcta-act__arrow {
  margin-left: auto;
  opacity: 0.85;
}

.a3-fcta-act--primary {
  background: linear-gradient(180deg, #ff3902 12%, #ff8007 93%);
  font-weight: 600;
}

.a3-fcta-act--ghost {
  background: #1a1a1a;
  font-weight: 500;
}

.a3-fcta-act--primary:hover,
.a3-fcta-act--primary:focus-visible {
  color: #fff;
  filter: brightness(1.06);
}

.a3-fcta-act--ghost:hover,
.a3-fcta-act--ghost:focus-visible {
  color: #fff;
  background: #232323;
}

@media (max-width: 767px) {
  .a3-fcta-wrap {
    right: 16px;
    bottom: 16px;
  }
}

/* The pill is a <button> so the panel can be toggled from it, which pulls in
 * global.css's button rule (min-height 56, padding 10px 36px, border-radius
 * !important). Restate Figma's 130 x 52 / radius 16 over it. */
.a3-fcta-wrap button.a3-fcta {
  min-width: 130px;
  min-height: 52px;
  height: 52px;
  padding: 0 20px;
  border-radius: 16px !important;
  font-size: 14px;
  letter-spacing: normal;
}

/* ...and the open state has to answer it again, or the pill contracts to a
 * 52px square instead of a circle. Same reason as the rule above: global.css
 * sets border-radius on `button` with !important. */
.a3-fcta-wrap.is-open button.a3-fcta {
  border-radius: 50% !important;
}

.a3-fcta-wrap.is-icon-only button.a3-fcta {
  min-width: 52px;
  width: 52px;
  padding: 0;
  border-radius: 16px !important;
}