/* Shared styles for the support blocks on /contact-us/ and /support/. */

.kc-page {
  --kc-primary: #615B9C;
  --kc-primary-dark: #4C447A;
  --kc-tint: #F4F3F9;
  --kc-lavender: #E4E2F1;
  --kc-line: #E7E5F0;
  --kc-ink: #1F1B33;
  --kc-body: #4A4760;
  --kc-muted: #6B6880;
  --kc-urgent: #B4232A;
  font-family: Nunito, "Helvetica Neue", Arial, sans-serif;
  color: var(--kc-body);
  padding-top: 127px;
}
body { overflow-x: clip; }
.kc-page *, .kc-page *::before, .kc-page *::after { box-sizing: border-box; }
.kc-bleed { width: 100vw; margin-left: calc(50% - 50vw); }
.kc-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.kc-page h1, .kc-page h2, .kc-page h3 {
  font-family: "Rounded Elegance", sans-serif;
  color: var(--kc-ink);
  font-weight: 400;
  margin: 0;
}
:where(.kc-page) p { margin: 0; }
.kc-page a { text-decoration: none; }
.kc-page a:focus-visible, .kc-page button:focus-visible { outline: 3px solid #A9A2E0; outline-offset: 2px; }

/* Support bar */
.kc-supportbar { background: #1F1B33; color: #fff; font-size: 16px; line-height: 1.4; }
.kc-supportbar .kc-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 22px; padding-top: 14px; padding-bottom: 14px; text-align: center; }
.kc-supportbar__label { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; }
.kc-supportbar__label span:last-child { font-weight: 400; color: #D9D6E8; }
.kc-supportbar__dot { position: relative; width: 10px; height: 10px; border-radius: 50%; background: #FF5A5F; flex: 0 0 10px; }
.kc-supportbar__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #FF5A5F; animation: kc-pulse 2s ease-out infinite; }
@keyframes kc-pulse { from { transform: scale(1); opacity: .7; } to { transform: scale(2.8); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .kc-supportbar__dot::after { animation: none; } }
.kc-supportbar__call {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 18px; border-radius: 999px;
  background: #fff; color: #1F1B33 !important;
  font-weight: 800; font-size: 16px; white-space: nowrap;
  transition: background .2s ease;
}
.kc-supportbar__call:hover { background: var(--kc-lavender); }
.kc-supportbar__call svg { width: 16px; height: 16px; fill: currentColor; }
.kc-supportbar__more { color: #fff !important; font-weight: 700; text-decoration: underline !important; text-underline-offset: 3px; white-space: nowrap; }
.kc-supportbar__more:hover { text-decoration-thickness: 2px !important; }

.kc-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--kc-primary);
  margin-bottom: 14px;
}

/* Support */
.kc-support { background: #fff; padding: 88px 0 72px; scroll-margin-top: 90px; }
.kc-support__head { max-width: 640px; }
.kc-support h2 { font-size: 40px; line-height: 1.15; }
.kc-support__head p { margin-top: 14px; font-size: 18px; line-height: 1.6; }
.kc-cards { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 24px; margin-top: 40px; }
.kc-card { display: flex; flex-direction: column; border: 1px solid var(--kc-line); border-radius: 18px; padding: 28px; background: #fff; }
.kc-card--urgent { border-color: transparent; background: var(--kc-tint); }
.kc-card--urgent .kc-card__actions { padding-top: 18px; }
.kc-card__tag { align-self: flex-start; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: var(--kc-tint); color: var(--kc-primary); }
.kc-card--urgent .kc-card__tag { background: #FBE4E5; color: var(--kc-urgent); }
.kc-card h3 { margin-top: 16px; font-size: 24px; line-height: 1.2; }
.kc-card__text { margin-top: 8px; font-size: 15px; line-height: 1.6; }
.kc-card__actions { padding-top: 22px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.kc-phone { font-size: 30px; font-weight: 800; color: var(--kc-ink) !important; letter-spacing: .01em; white-space: nowrap; line-height: 1.1; margin-top: 14px; display: inline-block; }
.kc-phone:hover { color: var(--kc-primary) !important; }
.kc-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 22px; border-radius: 999px; border: 0;
  background: var(--kc-primary); color: #fff !important;
  font: 700 15px/1.2 Nunito, "Helvetica Neue", Arial, sans-serif;
  cursor: pointer; transition: background .2s ease;
}
.kc-btn:hover { background: var(--kc-primary-dark); }
.kc-btn svg { width: 16px; height: 16px; fill: currentColor; flex: 0 0 16px; }
.kc-btn--ghost { background: #fff; color: var(--kc-primary) !important; box-shadow: inset 0 0 0 1.5px var(--kc-primary); }
.kc-btn--ghost:hover { background: var(--kc-tint); }
.kc-copyrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 10px 10px 10px 14px; border-radius: 12px; background: var(--kc-tint); }
.kc-copyrow code, .kc-copyrow a { font: 700 15px/1.4 Nunito, "Helvetica Neue", Arial, sans-serif; color: var(--kc-ink); overflow-wrap: anywhere; background: none; padding: 0; }
.kc-copyrow small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--kc-muted); margin-bottom: 2px; }
.kc-copy { flex: 0 0 auto; border: 0; border-radius: 999px; padding: 7px 14px; background: #fff; color: var(--kc-primary); font: 700 13px/1 Nunito, "Helvetica Neue", Arial, sans-serif; cursor: pointer; box-shadow: inset 0 0 0 1px var(--kc-line); }
.kc-copy:hover { background: var(--kc-lavender); }

.kc-other { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--kc-line); display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: center; font-size: 16px; }
.kc-other strong { color: var(--kc-ink); }
.kc-other a { color: var(--kc-primary); font-weight: 700; }
.kc-other a:hover { color: var(--kc-primary-dark); text-decoration: underline; }

@media (max-width: 1024px) {
  .kc-page { padding-top: 0; margin-top: -50px; }
  .kc-cards { grid-template-columns: 1fr 1fr; }
  .kc-card--urgent { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .kc-support { padding: 56px 0 48px; }
  .kc-support h2 { font-size: 30px; }
  .kc-cards { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 28px; }
  .kc-card { padding: 22px; }
  .kc-phone { font-size: 28px; }
  .kc-wrap { padding: 0 16px; }
}