/* Generated: old brand colours swapped for Royal Indigo on site pages (body.st) */
body.st { background: #0f0c29; }
html.light body.st { background: #faf9ff; color: #1e1b4b !important; }
html.light body.st .glass { border-color: rgba(79, 70, 229, 0.12); }
body.st .glass-hi { border: 1px solid rgba(79, 70, 229, 0.2); }
html.light body.st .glass-hi { border-color: rgba(79, 70, 229, 0.2); }
body.st .MobileOne { --tw-gradient-to: #0f0c29 var(--tw-gradient-to-position); --tw-gradient-from: #1e1b4b var(--tw-gradient-from-position); }
body.st .mesh { background:
    radial-gradient(
      circle at 15% 25%,
      rgba(79, 70, 229, 0.18) 0%,
      transparent 45%
    ),
    radial-gradient(
      circle at 85% 75%,
      rgba(72, 241, 229, 0.1) 0%,
      transparent 45%
    ); }
html.light body.st .mesh { background:
    radial-gradient(
      circle at 15% 25%,
      rgba(79, 70, 229, 0.08) 0%,
      transparent 45%
    ),
    radial-gradient(
      circle at 85% 75%,
      rgba(72, 241, 229, 0.05) 0%,
      transparent 45%
    ); }
html.light body.st .site-nav { border-color: rgba(79, 70, 229, 0.1); }
html.light body.st .mob-link { color: #4f46e5; }
html.light body.st .sidebar { border-color: rgba(79, 70, 229, 0.1); }
body.st .btn-p { background: #4f46e5; box-shadow: 0 6px 18px rgba(79, 70, 229, 0.2); }
html.light body.st .btn-s { border-color: rgba(79, 70, 229, 0.2); color: #1e1b4b; }
html.light body.st .btn-s:hover { background: rgba(79, 70, 229, 0.07); }
body.st .btn-t { background: #c4b5fd; }
body.st .snav.act { background: rgba(79, 70, 229, 0.1); color: #4f46e5; }
html.light body.st .snav { color: #4f46e5; }
html.light body.st .snav.act { background: rgba(79, 70, 229, 0.12); color: #3730a3; }
body.st .inp:focus { border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1); }
html.light body.st .inp { border-color: rgba(79, 70, 229, 0.15); color: #1e1b4b; }
body.st .tog-t { background: #4f46e5; box-shadow: 0 0 8px rgba(79, 70, 229, 0.4); }
body.st ::-webkit-scrollbar-thumb { background: rgba(79, 70, 229, 0.15); }
body.st .star-on { color: #4f46e5; }
body.st .toast { background: #4f46e5; box-shadow: 0 8px 24px rgba(79, 70, 229, 0.25); }
body.st .billing-pill.act { background: rgba(79, 70, 229, 0.15); color: #4f46e5; }
body.st .tab-b.act { background: rgba(79, 70, 229, 0.15); color: #4f46e5; }
body.st .badge-pro { background: rgba(79, 70, 229, 0.15); color: #4f46e5; }
body.st .badge-active { color: #c4b5fd; }
body.st .badge-paid { color: #c4b5fd; }
body.st .adm-search:focus { border-color: #4f46e5; }
body.st .prose-blog a { color: #4f46e5; }
html.light body.st .prose-blog p, html.light body.st .prose-blog ul, html.light body.st .prose-blog ol { color: #4f46e5; }
html.dark body.st .LivePreviewBox { background: linear-gradient(to bottom, #1e1b4b 0%, #0f0c29 100%); }
html.light body.st .modal-box { border-color: rgba(79, 70, 229, 0.12); }
body.st .hero-phones img { border: 5px solid #1e1b4b; }
body.st ::selection { background: #4f46e5; }
body.st .btn-p { background: linear-gradient(135deg, #4f46e5, #7c3aed); box-shadow: 0 8px 20px rgba(79, 70, 229, .24); }
body.st .btn-p:hover { box-shadow: 0 12px 26px rgba(79, 70, 229, .3); }
html.light body.st .btn-s { color: #4f46e5; border: 1.5px solid rgba(79, 70, 229, .3); }
html.light body.st .btn-s:hover { background: #4f46e5; border-color: #4f46e5; }
html.light body.st .mesh { background: radial-gradient(circle at 12% 12%, rgba(79, 70, 229, .09) 0, transparent 40%), radial-gradient(circle at 90% 22%, rgba(219, 39, 119, .11) 0, transparent 42%); }
body.st .brand-name { background: linear-gradient(90deg, #4f46e5, #db2777); }
body.st .plan-card-hi { border: 2px solid #4f46e5 !important; box-shadow: 0 16px 36px rgba(79, 70, 229, .16); }
body.st .plan-card-hi .plan-tag { background: #f59e0b; }
body.st .hero-checks .ic { color: #f59e0b; }
body.st .resume-sheet b { background: #4f46e5; }
body.st .resume-head .ic { color: #4f46e5; background: #eef2ff; }
body.st .resume-link { background: linear-gradient(135deg, #4f46e5, #7c3aed); }
body.st .resume-stats .ic { color: #f59e0b; }

/* ============================================
   ROYAL INDIGO THEME — website, dashboard and admin only (body.st).
   vCards, resumes and visiting cards do not get the .st class and keep their own designs.
   ============================================ */
body.st {
  --primary: 79 70 229;
  --on-primary: 255 255 255;
  --primary-container: 124 58 237;
  --secondary: 124 58 237;
  --on-secondary: 255 255 255;
  --tertiary: 217 119 6;
  --on-tertiary: 255 255 255;
  --surface: 255 255 255;
  --surface-container: 243 241 255;
  --surface-container-low: 249 248 255;
  --surface-container-high: 234 231 252;
  --surface-container-highest: 224 220 250;
  --on-surface: 30 27 75;
  --on-surface-variant: 84 80 120;
  --background: 250 249 255;
  --outline: 165 160 200;
  --outline-variant: 221 218 245;
  --grad: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #db2777 100%);
  --grad-soft: linear-gradient(135deg, rgba(79, 70, 229, .10), rgba(124, 58, 237, .08) 50%, rgba(219, 39, 119, .08));
  --accent: #f59e0b;
}
html.dark body.st {
  --primary: 165 160 255;
  --on-primary: 15 12 41;
  --primary-container: 139 92 246;
  --secondary: 196 181 253;
  --on-secondary: 15 12 41;
  --tertiary: 251 191 36;
  --surface: 15 12 41;
  --surface-container: 30 27 75;
  --surface-container-low: 22 19 58;
  --surface-container-high: 41 37 94;
  --surface-container-highest: 52 47 112;
  --on-surface: 237 233 254;
  --on-surface-variant: 196 190 230;
  --background: 15 12 41;
  --outline: 130 124 180;
  --outline-variant: 62 56 120;
}

/* Animated gradient background */
html.light body.st { background: #faf9ff; }
body.st .mesh {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 40% at 10% 10%, rgba(79, 70, 229, .16), transparent 70%),
    radial-gradient(35% 35% at 90% 15%, rgba(219, 39, 119, .12), transparent 70%),
    radial-gradient(45% 45% at 70% 90%, rgba(124, 58, 237, .14), transparent 70%),
    radial-gradient(30% 30% at 20% 80%, rgba(245, 158, 11, .08), transparent 70%);
  background-size: 140% 140%;
  animation: stMesh 22s ease-in-out infinite alternate;
}
html.dark body.st .mesh {
  background:
    radial-gradient(40% 40% at 10% 10%, rgba(99, 102, 241, .28), transparent 70%),
    radial-gradient(35% 35% at 90% 15%, rgba(219, 39, 119, .20), transparent 70%),
    radial-gradient(45% 45% at 70% 90%, rgba(124, 58, 237, .26), transparent 70%);
  background-size: 140% 140%;
}
@keyframes stMesh {
  0% { background-position: 0% 0%; }
  50% { background-position: 60% 40%; }
  100% { background-position: 100% 100%; }
}

/* Buttons: moving gradient + glow */
body.st .btn-p {
  color: #fff;
  background: linear-gradient(120deg, #4f46e5, #7c3aed, #db2777, #7c3aed, #4f46e5);
  background-size: 300% 100%;
  border: 0;
  box-shadow: 0 10px 24px rgba(79, 70, 229, .28);
  transition: background-position .6s ease, transform .2s ease, box-shadow .2s ease;
}
body.st .btn-p:hover { background-position: 100% 0; transform: translateY(-2px); box-shadow: 0 14px 32px rgba(124, 58, 237, .38); }
body.st .btn-p:active { transform: translateY(0); }
html.light body.st .btn-s { color: #4f46e5; background: #fff; border: 1.5px solid rgba(79, 70, 229, .28); transition: all .2s ease; }
html.light body.st .btn-s:hover { border-color: #7c3aed; background: var(--grad-soft); transform: translateY(-1px); }

/* Gradient headings on the public website */
body.st.theme-marketing main h1,
body.st.theme-marketing main h2.font-display {
  background: linear-gradient(120deg, #312e81 0%, #4f46e5 35%, #7c3aed 65%, #db2777 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: stText 8s ease-in-out infinite alternate;
}
html.dark body.st.theme-marketing main h1,
html.dark body.st.theme-marketing main h2.font-display {
  background-image: linear-gradient(120deg, #c7d2fe, #a5b4fc 35%, #c4b5fd 65%, #f9a8d4);
}
@keyframes stText { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

/* Cards: soft gradient edge and lift on hover */
html.light body.st .glass { background: rgba(255, 255, 255, .78); border-color: rgba(124, 58, 237, .14); box-shadow: 0 6px 22px rgba(79, 70, 229, .06); }
body.st .glass { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
body.st main .glass:hover { transform: translateY(-3px); border-color: rgba(124, 58, 237, .35); box-shadow: 0 16px 36px rgba(79, 70, 229, .14); }
html.light body.st .glass-hi { background: linear-gradient(135deg, rgba(238, 242, 255, .95), rgba(245, 243, 255, .95) 50%, rgba(253, 242, 248, .95)); border: 1px solid rgba(124, 58, 237, .22); }

/* Highlighted plan: gradient border */
body.st .plan-card-hi {
  border: 2px solid transparent !important;
  background: linear-gradient(#fff, #fff) padding-box, var(--grad) border-box !important;
  box-shadow: 0 20px 44px rgba(124, 58, 237, .20);
}
html.dark body.st .plan-card-hi { background: linear-gradient(#1e1b4b, #1e1b4b) padding-box, var(--grad) border-box !important; }
body.st .plan-card-hi .plan-tag { color: #fff; background: linear-gradient(135deg, #f59e0b, #db2777); }
body.st .plan-list .ic, body.st .text-primary { color: rgb(var(--primary)); }

/* Navigation */
body.st .site-nav { border-bottom: 1px solid transparent; border-image: var(--grad) 1; }
html.light body.st .site-nav { background: rgba(250, 249, 255, .82); backdrop-filter: blur(16px); }
body.st .site-nav .text-primary.font-bold {
  background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
body.st .site-nav a:not(.btn-p):not(.btn-s):not(.brand-link) { position: relative; }
body.st .site-nav a:not(.btn-p):not(.btn-s):not(.brand-link)::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: -6px; height: 2px; background: var(--grad); transition: right .25s ease;
}
body.st .site-nav a:not(.btn-p):not(.btn-s):not(.brand-link):hover::after { right: 0; }

/* Dashboard and admin sidebar */
body.st .snav { transition: background .2s ease, color .2s ease, transform .2s ease; }
body.st .snav:hover { transform: translateX(3px); }
body.st .snav.act, body.st .adm-sidebar-link.act { color: #fff !important; background: var(--grad) !important; box-shadow: 0 8px 20px rgba(124, 58, 237, .25); }
body.st .snav.act .ic, body.st .adm-sidebar-link.act .ic { color: #fff !important; }
body.st .stat .font-display.text-primary { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* Form focus */
body.st .inp:focus { border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124, 58, 237, .15); }

/* Section bands get a faint gradient */
html.light body.st.theme-marketing main > section.border-y { background: var(--grad-soft); border-color: rgba(124, 58, 237, .10) !important; }

/* Footer accent line */
body.st footer { border-top: 1px solid transparent; border-image: var(--grad) 1; }

/* Scroll-in animation (added by footer script) */
body.st .st-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
body.st .st-reveal.st-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  body.st .mesh, body.st.theme-marketing main h1, body.st.theme-marketing main h2.font-display { animation: none; }
  body.st .st-reveal { opacity: 1; transform: none; transition: none; }
  body.st .btn-p, body.st .glass, body.st .snav { transition: none; }
}

/* Readability */
html.light body.st .prose-blog p, html.light body.st .prose-blog ul, html.light body.st .prose-blog ol { color: #3f3d63; }
html.light body.st .snav { color: #4b4880; }
html.light body.st .snav:hover { background: rgba(124, 58, 237, .08); color: #4f46e5; }


/* Brand name stays gradient TEXT (the colour swap above resets the clip) */
body.st .brand-name { background: linear-gradient(90deg, #4f46e5, #7c3aed, #db2777); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }

/* Admin search and filters on the light theme */
html.light body.st .adm-search { background: #fff; color: #1e1b4b; border: 1px solid rgba(124, 58, 237, .22); }
html.light body.st .adm-search::placeholder { color: #8b87b5; }