/*
 * ShiConnects brand layer on top of the Crafto template (vendors.min.css,
 * style.css, responsive.css, demos/*.css). Loaded last so it wins on
 * cascade order without needing !important everywhere. Keeps our own
 * palette/typography/spinner while reusing Crafto's grid, spacing
 * utilities and component classes (buttons, feather icons, box-shadows)
 * so the two template-derived pages (home + For Professionals) and our
 * own app/admin still read as one brand.
 */

@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@700;800&display=swap");

:root {
  /* Re-point Crafto's own tokens at our palette first, so every
     .btn-base-color / .text-dark-gray / etc. component just works. */
  --base-color: #4A0EDC;
  --dark-gray: #241B3A;
  --medium-gray: #5C5374;

  /* Our own named tokens, used directly by the hero/spinner markup
     ported from the main marketing page. */
  --sc-mint: #A6E3CA;
  --sc-mint-bg: #E4F5EC;
  --sc-mint-border: #C6E9D8;
  --sc-coral: #FF7A5C;
  --sc-coral-dark: #E8603F;
  --sc-rust: #C2492B;
  --sc-ink: #241B3A;
  --sc-ink-soft: #3A2C5C;
  --sc-muted: #5C5374;
  --sc-muted-2: #6B6180;
  --sc-bg: #FBF8F4;
  --sc-green: #2F7F63;
}

body { background: var(--sc-bg); }

.alt-font, h1, h2, h3, h4, h5, h6 {
  font-family: "Bricolage Grotesque", "Plus Jakarta Sans", sans-serif;
}

/* Crafto's default-logo/alt-logo/mobile-logo swap assumes three separate
   raster logos per header state; our single SVG-plus-wordmark mark reads
   fine at every state, so it's used for all three slots and this just
   keeps the sizing sane. */
.navbar-brand img.sc-logo-mark { height: 34px; width: auto; }
.navbar-brand .sc-wordmark { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 19px; letter-spacing: -0.02em; color: var(--sc-ink); margin-left: 10px; }
header .navbar-brand { display: flex; align-items: center; }

/* --- fidget-spinner mark, ported as-is from the main landing page --- */
@keyframes sc-spinner-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes sc-spinner-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.sc-spinner-svg { animation: sc-spinner-rotate 4s linear infinite; transform-origin: 50% 50%; }
.sc-spinner-svg.boost { animation-duration: 0.45s; }
#sc-hero-spinner-svg {
  animation: none;
  transform-origin: 50% 50%;
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.sc-spin-btn {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 0; border: none; background: none; cursor: pointer;
  animation: sc-spinner-float 5s ease-in-out infinite;
}
.sc-spin-btn:active { transform: scale(0.97); }
.sc-spin-hint {
  font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700;
  color: var(--sc-green); background: var(--sc-mint-bg); border: 1px solid var(--sc-mint-border);
  padding: 6px 12px; border-radius: 999px;
}
.sc-hero-art { display: flex; justify-content: center; align-items: center; min-height: 320px; position: relative; }
.sc-hero-art-bg { position: absolute; inset: 4% 2%; border-radius: 40px; background: radial-gradient(circle at 30% 25%, var(--sc-mint-bg), var(--sc-bg) 70%); }
.sc-spin-hint { white-space: nowrap; }
/* hero spinner: sits clear of the phone mockup, to its lower-left */
.sc-hero-art-wrap { left: -60px; bottom: -24px; }
.sc-hero-art-wrap .sc-hero-art { width: 200px; min-height: 200px; padding: 14px 0; }
@media (max-width: 1199px) { .sc-hero-art-wrap { left: -30px; } }
@media (max-width: 991px) {
  .sc-hero-art-wrap { position: static !important; margin-top: 20px; }
  .sc-hero-art-wrap .sc-hero-art { margin: 0 auto; }
}

/* --- beta / email-capture form, ported from the main landing page --- */
.sc-stack-form { display: flex; flex-wrap: wrap; gap: 10px; max-width: 520px; }
.sc-text-input {
  flex: 1 1 220px; min-width: 0; font-size: 16px; color: var(--sc-ink);
  padding: 15px 16px; border-radius: 10px; border: 1.5px solid #E2DAEA;
  background: #fff; outline: none;
}
.sc-text-input:focus { border-color: var(--sc-coral); }
.sc-btn-coral {
  flex: 0 0 auto; font-size: 16px; font-weight: 700; color: #fff;
  padding: 15px 24px; border: none; border-radius: 10px; background: var(--sc-coral);
  cursor: pointer; box-shadow: 0 8px 20px -10px rgba(255,122,92,0.9);
}
.sc-btn-coral:hover { background: var(--sc-coral-dark); }
.sc-form-msg { font-size: 14px; color: var(--sc-green); font-weight: 600; margin-top: 12px; min-height: 20px; }

/* --- feature/step cards, ported from the main landing page --- */
.sc-feature-card {
  background: #fff; border: 1px solid #EFE9F3; border-radius: 18px; padding: 22px;
  height: 100%;
}
.sc-feature-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 12px; margin-bottom: 12px;
}
.sc-feature-card h3 { font-size: 17px; font-weight: 800; margin-bottom: 6px; color: var(--sc-ink); }
.sc-feature-card p { font-size: 14px; color: var(--sc-muted); line-height: 1.45; margin: 0 0 12px; }
.sc-feature-card .sc-learn-more { font-size: 13.5px; font-weight: 700; color: var(--sc-ink); }

.sc-step-card {
  background: #fff; border: 1px solid #EFE9F3; border-radius: 18px; padding: 28px; height: 100%;
}
.sc-step-card.dark { background: var(--sc-ink); border-color: var(--sc-ink); }
.sc-step-card.dark h3, .sc-step-card.dark p { color: #fff; }
.sc-step-tag { font-size: 12px; letter-spacing: 0.14em; font-weight: 700; color: var(--sc-rust); text-transform: uppercase; }
.sc-step-card.dark .sc-step-tag { color: var(--sc-mint); }
.sc-step-card h3 { font-size: 20px; font-weight: 800; margin: 10px 0 8px; color: var(--sc-ink); }
.sc-step-card p { font-size: 14.5px; color: var(--sc-muted); line-height: 1.55; margin: 0; }

.sc-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; color: var(--sc-green);
  background: var(--sc-mint-bg); border: 1px solid var(--sc-mint-border); padding: 7px 12px;
  border-radius: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}

.sc-footer { background: linear-gradient(160deg, #15121C 0%, #1E2A24 100%); color: #cfc8dd; padding: 60px 0 24px; }
.sc-footer h3 { color: #fff; font-size: 15px; font-weight: 800; margin-bottom: 14px; }
.sc-footer a { color: #cfc8dd; display: block; font-size: 14px; margin-bottom: 8px; }
.sc-footer a:hover { color: #fff; }
.sc-footer .sc-footer-copy { color: #8f86a6; font-size: 13px; margin-top: 40px; text-align: center; }

/* Tighter section rhythm than the base theme's defaults (110px/70px) —
   this site's sections are shorter on content and were leaving large
   dead gaps between them. */
section { padding-top: 70px; padding-bottom: 70px; }
section.half-section { padding-top: 45px; padding-bottom: 45px; }
section.big-section { padding-top: 90px; padding-bottom: 90px; }
section.extra-big-section { padding-top: 110px; padding-bottom: 110px; }
@media (max-width: 767px) {
  section { padding-top: 50px; padding-bottom: 50px; }
  section.half-section { padding-top: 32px; padding-bottom: 32px; }
}

/* Sticky header — deliberately NOT using the base theme's JS-driven
   sticky system (header.sticky/.sticky-active): it hides the navbar
   via translateY(-100%) unless it also carries .sticky-header or
   .fixed-header, which our markup doesn't set, so it just vanishes on
   scroll instead of sticking. Plain CSS position:sticky needs no JS
   and can't silently break the same way. */
header { position: sticky; top: 0; z-index: 1030; background: var(--sc-bg); transition: box-shadow 0.2s ease; }
header .navbar { transform: none !important; }
/* The base theme's .disable-fixed sets position:absolute on the navbar
   (for overlaying a hero image) — that takes it out of flow entirely,
   collapsing <header>'s own box to 0 height, which in turn makes the
   sticky positioning and background above paint nothing: page content
   scrolled underneath just showed through the "header". Forcing it back
   into normal flow so <header> actually wraps it. */
header .disable-fixed { position: relative !important; }

/* Hero — the base theme's spacing utilities cap out at 70px (.pt-70px,
   .pb-70px etc.), so the larger gap this section needs to clear the
   sticky header and leave room for the bottom-right spinner is set
   here directly instead of a nonexistent .pt-140px-style class. */
.sc-hero-section { padding-top: 140px; padding-bottom: 90px; }
@media (max-width: 991px) {
  .sc-hero-section { padding-top: 90px; padding-bottom: 40px; }
}

/* Mobile header — the brand mark/wordmark plus the "Join the beta" button
   (with its trailing arrow-circle) are sized for desktop and together are
   wider than a phone viewport, so the navbar-toggler got pushed onto its
   own orphaned row below instead of sitting inline with them. Shrinking
   the brand and button, and dropping the arrow circle, lets all three fit
   on one row like a normal mobile header. */
@media (max-width: 991px) {
  header .navbar-brand img.sc-logo-mark { height: 26px; }
  header .navbar-brand .sc-wordmark { font-size: 16px; margin-left: 8px; }
  header .col-auto.menu-order { display: flex; align-items: center; }
  .header-button .btn.btn-small { padding: 8px 14px; font-size: 11px; }
  .header-button .btn.btn-small > span { display: none; }
}
@media (max-width: 480px) {
  header .navbar-brand .sc-wordmark { font-size: 14.5px; }
  .header-button .btn.btn-small { padding: 7px 12px; }
}

/* Hero spinner — .sm-position-relative correctly drops the desktop
   absolute positioning on mobile, but the leftover "right: 30px !important"
   utility class still nudges it (now a normal block) left of center, and
   .sm-mx-auto can't center a still-inline-block box without text-align —
   together this shoved the spinner mostly off the left edge of the
   viewport instead of centering it under the hero copy. */
@media (max-width: 767px) {
  .sc-hero-section .sm-position-relative.sm-mx-auto {
    right: auto !important;
    text-align: center;
  }
}

/* --- iPhone-style device frame wrapping real in-app screenshots --- */
.sc-phone-frame {
  display: inline-block; width: 100%; max-width: 280px;
  background: #111014; border-radius: 46px; padding: 14px;
  box-shadow: 0 40px 70px -28px rgba(36,27,58,0.4), inset 0 0 0 1.5px rgba(255,255,255,0.08);
}
.sc-phone-frame .sc-phone-screen {
  position: relative; border-radius: 32px; overflow: hidden; background: #fff;
}
.sc-phone-frame .sc-phone-screen img { display: block; width: 100%; height: auto; }
.sc-phone-frame .sc-phone-island {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  width: 34%; max-width: 110px; height: 22px; background: #111014; border-radius: 16px; z-index: 2;
}

/* --- Shared color-accent primitives: soft blurred color blobs behind
   sections, and the small three-dot logo-color emblem used next to
   eyebrow-style labels. Used across the marketing pages to keep them
   feeling colorful/alive instead of flat text on cream. --- */
.sc-blob {
  position: absolute; border-radius: 50%; filter: blur(60px);
  z-index: 0; pointer-events: none;
}
.sc-dotgroup { display: inline-flex; align-items: center; gap: 6px; }
.sc-dotgroup .sc-dot { display: inline-block; flex: 0 0 auto; width: 11px; height: 11px; border-radius: 50%; }
.sc-dotgroup > span:not(.sc-dot) { white-space: nowrap; }
.sc-quote-mark {
  font-family: Georgia, serif; font-size: 90px; line-height: 0.6;
  color: rgba(74,14,220,0.14); display: block; margin-bottom: -10px;
}
.sc-collage { position: relative; z-index: 1; }
.sc-collage .sc-phone-frame { position: absolute; }
.sc-collage .front { right: 0; top: 40px; z-index: 2; }
.sc-collage .back { left: 0; top: -20px; z-index: 1; transform: rotate(-6deg); opacity: .92; }