/* Reusable pieces: buttons, cards, ticks, stars, breadcrumb, accordion. */

/* ---------- Buttons ----------
   Measured off the live site: Inter 600 / 18px, 15px 35px padding, full pill. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 15px 35px;
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  font-weight: 600;
  line-height: 1.66;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--transition), color var(--transition),
    border-color var(--transition), transform var(--transition);
}

.btn:hover {
  transform: translateY(-1px);
}

/* White fill, blue text. The hero and CTA "Book a demo". */
.btn--light {
  color: var(--c-blue-dark);
  background: var(--c-white);
  border-color: var(--c-white);
}

.btn--light:hover,
.btn--light:focus-visible {
  color: var(--c-blue-dark);
  background: var(--c-pale-blue);
  border-color: var(--c-pale-blue);
}

/* Mid blue fill, white text. "Try it for free". */
.btn--accent {
  color: var(--c-white);
  background: var(--c-blue-mid);
  border-color: var(--c-blue-mid);
}

.btn--accent:hover,
.btn--accent:focus-visible {
  color: var(--c-white);
  background: var(--c-blue-dark);
  border-color: var(--c-blue-dark);
}

/* Solid primary, for buttons sitting on white. */
.btn--primary {
  color: var(--c-white);
  background: var(--c-blue);
  border-color: var(--c-blue);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  color: var(--c-white);
  background: var(--c-blue-dark);
  border-color: var(--c-blue-dark);
}

/* Header "SIGNUP": white pill, uppercase, letter-spaced. */
.btn--signup {
  min-width: 150px;
  padding: 16px 24px;
  font-size: var(--fs-small);
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-blue-dark);
  background: var(--c-white);
  border-color: var(--c-white);
}

.btn--signup:hover,
.btn--signup:focus-visible {
  color: var(--c-blue-dark);
  background: var(--c-pale-blue);
  border-color: var(--c-pale-blue);
}

/* Header "Login": text only. */
.btn--ghost {
  padding: 14px 22px;
  font-size: var(--fs-small);
  color: var(--c-white);
  background: none;
  border-color: transparent;
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  color: var(--c-white);
  background: rgb(255 255 255 / 0.14);
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

.btn-group--center {
  justify-content: center;
}

/* ---------- Cards ---------- */

.card {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
  transition: box-shadow var(--transition), transform var(--transition);
}

.card:hover {
  box-shadow: var(--shadow-card-hover);
}

/* ---------- Tick list ---------- */

.tick-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tick-list li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: var(--sp-3);
  font-size: var(--fs-small);
  line-height: 1.5;
}

.tick-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 1rem;
  height: 1rem;
  background: var(--c-green);
  /* Tick glyph punched out of the green square with a mask, so it inherits
     the token colour and needs no image request. */
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.2 12.3 2.4 8.5l1.3-1.3 2.5 2.5 6.1-6.1 1.3 1.3z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Stars ---------- */

.stars {
  display: flex;
  gap: 2px;
  margin-bottom: var(--sp-4);
}

.stars svg {
  width: 18px;
  height: 18px;
  color: var(--c-gold);
}

/* ---------- Breadcrumb ---------- */

.breadcrumb {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  font-size: var(--fs-small);
}

.breadcrumb li {
  margin: 0;
  font-size: inherit;
}

.breadcrumb li + li::before {
  content: "\203A";
  margin-right: var(--sp-2);
  opacity: 0.7;
}

/* ---------- Accordion (Get help) ---------- */

.accordion {
  display: grid;
  gap: var(--sp-4);
}

.accordion__item {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.accordion__item[open] {
  box-shadow: var(--shadow-card);
}

.accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5);
  font-family: var(--font-head);
  font-size: var(--fs-lead);
  font-weight: 700;
  color: var(--c-navy);
  cursor: pointer;
  list-style: none;
}

.accordion__summary::-webkit-details-marker {
  display: none;
}

.accordion__summary svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--c-blue);
  transition: transform var(--transition);
}

.accordion__item[open] .accordion__summary svg {
  transform: rotate(180deg);
}

.accordion__body {
  padding: 0 var(--sp-5) var(--sp-5);
}

/* ---------- Scroll reveal ----------
   The visible state is the default. If IntersectionObserver is missing or
   throws, content stays on screen rather than being hidden forever. site.js
   adds .reveal only when it knows it can undo it. */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 500ms ease, transform 500ms ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Scroll to top ---------- */

.to-top {
  position: fixed;
  right: var(--sp-5);
  bottom: var(--sp-5);
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  color: var(--c-white);
  background: var(--c-blue);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition),
    background var(--transition);
}

.to-top.is-visible {
  opacity: 1;
  visibility: visible;
}

.to-top:hover {
  background: var(--c-blue-dark);
}

.to-top svg {
  width: 20px;
  height: 20px;
}