/* Help & Support (/assistance/contact-ico-customer-support/) and the ICO Intelligence report page
   (/ico-intelligence/) — loaded on those two pages only (base.njk, supportPage / reportPage).

   The portal at the top of the support page answers in place, without scrolling: the ICO Experts' faces,
   one ask box, nine buttons (most are one click to an answer — the chat opens with the question written, or
   one of its built-in checks runs against the ICO store), a "My ICO isn't working" symptom view and a
   "Setup & first run" view. Light and warm, in the site's own colours: the teal of the buttons (#00778b),
   the navy of the logo (#153a52), the light grey of the header (#f5f5f7). Ported from the premierrobotic.com
   portal (support.css there), restyled for this site. Then the ICO Intelligence card (black, the logo, the
   gradient wordmark the old welcome section had), the contact form and the "reach us" line. */

:root {
  --ico-teal: #00778b;
  --ico-teal-dark: #006377;
  --ico-navy: #153a52;
  --ico-ink: #1d1d1f;
  --ico-muted: #6e6e73;
  --ico-hair: #e3e3e8;
  --ico-soft: #f5f5f7;
  --ico-ease: cubic-bezier(0.16, 0.84, 0.24, 1);
}

/* ---- the welcome: light, warm, centred — the experts' faces first ---- */
.sp-hero--light {
  background: linear-gradient(180deg, #ffffff 0%, #f3f6f8 100%);
  color: var(--ico-ink);
  padding: clamp(40px, 6vw, 72px) 1rem clamp(36px, 5vw, 60px);
}

.sp-portal {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 920px;
  margin: 0 auto;
}

.sp-portal h1 {
  margin: 0.35em 0 0.25em;
  color: var(--ico-navy);
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.sp-faces {
  display: flex;
  justify-content: center;
}

.sp-faces img {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 28%;
  border: 4px solid #fff;
  margin-left: -18px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  background: #e9e9ee;
}

.sp-faces img:first-child {
  margin-left: 0;
}

.sp-welcome-line {
  margin: 14px 0 4px;
  color: var(--ico-muted);
  font-size: 15px;
  line-height: 1.5;
}

.sp-welcome-line strong {
  color: var(--ico-ink);
  font-weight: 600;
  font-size: 16px;
}

.sp-online {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 6px;
  color: #1d7a3a;
  font-weight: 500;
}

.sp-online::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #30d158;
  box-shadow: 0 0 0 3px rgba(48, 209, 88, 0.2);
}

/* ask anything */
.sp-ask {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  max-width: 640px;
  margin: 1.25rem auto 0;
  padding: 6px 6px 6px 18px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #d2d2d7;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.sp-ask:focus-within {
  border-color: var(--ico-teal);
  box-shadow: 0 0 0 4px rgba(0, 119, 139, 0.14), 0 10px 30px rgba(0, 0, 0, 0.06);
}

.sp-ask input {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 10px 0;
  border: none;
  background: transparent;
  color: var(--ico-ink);
  font: inherit;
  font-size: 16px;
  outline: none;
  box-shadow: none;
}

.sp-ask input::placeholder {
  color: #86868b;
}

.sp-ask .banner-button {
  margin: 0;
  flex: none;
  padding: 0.6rem 1.4rem;
}

/* the stage: views swap in place, nothing scrolls */
.sp-stage {
  width: 100%;
  margin-top: 1.1rem;
  min-height: 236px;
}

.sp-view[hidden] {
  display: none;
}

.sp-view {
  animation: sp-rise 0.3s var(--ico-ease);
}

@keyframes sp-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.sp-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.sp-action {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 104px;
  padding: 14px 12px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--ico-hair);
  color: var(--ico-ink);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  transition: transform 0.35s var(--ico-ease), border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.sp-action:hover,
.sp-action:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(0, 119, 139, 0.5);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
  outline: none;
}

.sp-action svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--ico-teal);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sp-action--accent {
  background: var(--ico-teal);
  border-color: var(--ico-teal);
  color: #fff;
}

.sp-action--accent svg {
  stroke: #fff;
}

.sp-action--accent:hover,
.sp-action--accent:focus-visible {
  background: var(--ico-teal-dark);
  border-color: var(--ico-teal-dark);
}

.sp-view-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  text-align: left;
}

.sp-view-head h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--ico-navy);
}

.sp-back {
  appearance: none;
  border: 1px solid var(--ico-hair);
  background: #fff;
  color: var(--ico-ink);
  border-radius: 999px;
  padding: 7px 13px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  flex: none;
}

.sp-back:hover {
  background: #f0f0f3;
}

.sp-symptoms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  text-align: left;
}

.sp-symptom {
  appearance: none;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--ico-hair);
  color: var(--ico-ink);
  font: inherit;
  font-size: 14.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.sp-symptom:hover,
.sp-symptom:focus-visible {
  border-color: rgba(0, 119, 139, 0.5);
  outline: none;
}

.sp-symptom[aria-pressed="true"] {
  border-color: var(--ico-teal);
  background: rgba(0, 119, 139, 0.07);
  color: var(--ico-teal-dark);
}

.sp-steps {
  margin-top: 12px;
  padding: 16px 18px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--ico-hair);
  text-align: left;
  color: #515154;
  font-size: 15px;
  line-height: 1.5;
}

.sp-steps[hidden] {
  display: none;
}

.sp-steps h3 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ico-navy);
}

.sp-steps ol {
  margin: 0 0 10px;
  padding-left: 20px;
}

.sp-steps li {
  margin: 5px 0;
}

.sp-steps li::marker {
  color: var(--ico-teal);
  font-weight: 600;
}

.sp-steps--open {
  margin-top: 0;
}

.sp-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.sp-link-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 13px;
  border-radius: 999px;
  border: 1px solid var(--ico-hair);
  background: #f0f0f3;
  color: var(--ico-ink);
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
}

.sp-link-btn:hover {
  background: #e6e6eb;
  text-decoration: none;
}

.sp-link-btn--accent {
  background: rgba(0, 119, 139, 0.1);
  border-color: rgba(0, 119, 139, 0.3);
  color: var(--ico-teal-dark);
}

.sp-link-btn--accent:hover {
  background: rgba(0, 119, 139, 0.18);
}

.sp-note {
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--ico-soft);
  border: 1px solid var(--ico-hair);
  color: #515154;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
}

.sp-inline-link {
  appearance: none;
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--ico-teal-dark);
  font-weight: 600;
  cursor: pointer;
}

.sp-reach {
  margin: 16px 0 0;
  color: var(--ico-muted);
  font-size: 14.5px;
}

.sp-reach a {
  color: var(--ico-teal-dark);
  font-weight: 600;
  text-decoration: none;
}

/* ---- ICO Intelligence: the black welcome box the page has always opened with, improved — the logo, the
   gradient wordmark, the ask line with the round send button, quick-question chips; then the three black cards
   (ICO Intelligence / Chat with an ICO Expert / Contact Form). The full-screen chat opens over the page. ---- */
.ico-intel-section {
  padding: 0 0 clamp(20px, 3vw, 36px);
  background: #fff;
}

.ico-welcome {
  position: relative;
  max-width: 1200px;
  margin: 1.5rem auto 0;
  padding: clamp(44px, 6vw, 72px) clamp(20px, 4vw, 48px);
  border-radius: 1rem;
  background: #000;
  color: #fff;
  text-align: center;
  overflow: hidden;
}

.ico-welcome::before {
  content: "";
  position: absolute;
  inset: auto -20% -70% -20%;
  height: 120%;
  background: radial-gradient(50% 50% at 50% 100%, rgba(77, 168, 255, 0.18), transparent 70%);
  pointer-events: none;
}

.ico-welcome > * {
  position: relative;
}

.ico-welcome-logo {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.08), 0 16px 40px rgba(0, 0, 0, 0.6);
  margin: 0 auto 22px;
  display: block;
}

.ico-welcome h2,
.ico-welcome h1 {
  margin: 0 0 1.5rem;
  color: #fff;
  font-size: clamp(1.9rem, 4vw, 2.5rem);
  font-weight: 600;
  line-height: 1.3;
}

.ico-welcome h2 span,
.ico-welcome h1 span {
  background: linear-gradient(135deg, #4dfff3 0%, #4da8ff 50%, #b44dff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
  text-shadow: 0 0 20px rgba(77, 255, 243, 0.3);
}

.ico-welcome-ask {
  max-width: 600px;
  margin: 0 auto;
  padding: 8px 8px 8px 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border-radius: 30px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: box-shadow 0.2s;
}

.ico-welcome-ask:focus-within {
  box-shadow: 0 0 0 4px rgba(77, 168, 255, 0.35), 0 4px 12px rgba(0, 0, 0, 0.15);
}

.ico-welcome-ask input {
  flex: 1;
  min-width: 0;
  margin: 0;
  border: none;
  padding: 8px 4px;
  font: inherit;
  font-size: 16px;
  color: var(--ico-ink);
  outline: none;
  background: transparent;
  box-shadow: none;
}

.ico-welcome-ask input::placeholder {
  color: #757575;
}

.ico-welcome-ask button {
  flex: none;
  appearance: none;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: #000;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}

.ico-welcome-ask button:hover {
  transform: scale(1.05);
  background: #00778b;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.ico-welcome-ask button svg {
  width: 22px;
  height: 22px;
}

.ico-welcome-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 760px;
  margin: 16px auto 0;
}

.ico-chip {
  appearance: none;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.9);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.ico-chip:hover,
.ico-chip:focus-visible {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.45);
  outline: none;
}

/* the three cards: black, as before */
.ico-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 2rem auto 0;
}

.ico-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem;
  border-radius: 1rem;
  background: #000;
  color: #fff;
  transition: transform 0.35s var(--ico-ease), box-shadow 0.2s;
}

.ico-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
}

.ico-card-icon {
  width: 100px;
  height: 100px;
  margin-bottom: 1.5rem;
  object-fit: cover;
}

.ico-card-icon--logo,
.ico-card-icon--face {
  border-radius: 50%;
  border: 4px solid #fff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1);
  background: #fff;
}

.ico-card-icon--face {
  object-position: 50% 28%;
}

.ico-card h3 {
  margin: 0 0 1rem;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 600;
}

.ico-card p {
  flex-grow: 1;
  margin: 0 0 1.5rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
}

.ico-card .banner-button {
  margin-top: auto;
}

/* ---- the contact form + reach-us line ---- */
.sp-form-section {
  background: var(--ico-soft);
  padding: 2.5rem 1rem;
}

.sp-form-section .sp-form-wrap {
  max-width: 1200px;
  margin: 0 auto;
}

.sp-form-section h2 {
  margin: 0 0 6px;
  color: var(--ico-navy);
  font-size: 1.6rem;
  font-weight: 600;
  text-align: center;
}

.sp-form-section .sp-form-intro {
  margin: 0 auto 18px;
  max-width: 60ch;
  color: var(--ico-muted);
  text-align: center;
  font-size: 15px;
}

.sp-reach-block {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
  margin: 0 auto;
  padding: 1.6rem 1rem;
  max-width: 1200px;
  color: var(--ico-muted);
  font-size: 15px;
  text-align: center;
}

.sp-reach-block a,
.sp-reach-block button {
  appearance: none;
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--ico-teal-dark);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

@media screen and (max-width: 48em) {
  .sp-faces img {
    width: 64px;
    height: 64px;
    margin-left: -14px;
    border-width: 3px;
  }

  .sp-ask {
    padding-left: 14px;
  }

  .sp-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sp-actions > .sp-action:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .sp-action {
    min-height: 92px;
    font-size: 13.5px;
  }

  .sp-symptoms {
    grid-template-columns: 1fr;
  }

  .ico-welcome {
    margin: 1rem 1rem 0;
    border-radius: 0.75rem;
  }

  .ico-welcome h2,
  .ico-welcome h1 {
    font-size: 1.6rem;
  }

  .ico-cards {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin: 1.25rem 1rem 0;
  }

  .ico-card {
    padding: 1.6rem 1.25rem;
  }

  .ico-card-icon {
    width: 80px;
    height: 80px;
  }
}