@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Sora:wght@500;600&display=swap');

:root {
  --sw-bg: #071114;
  --sw-bg-2: #0a181c;
  --sw-panel: #0c1b1f;
  --sw-panel-2: #10252a;
  --sw-text: #f4f8f7;
  --sw-muted: #9db1ad;
  --sw-line: rgba(179, 224, 214, 0.16);
  --sw-teal: #39d6c6;
  --sw-teal-2: #8bf3e8;
  --sw-red: #ff6b63;
  --sw-amber: #f4c35b;
  --sw-green: #61d394;
  --sw-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
  --safe-top: var(--android-safe-top, env(safe-area-inset-top, 0px));
  --safe-bottom: var(--android-safe-bottom, env(safe-area-inset-bottom, 0px));
  --safe-left: var(--android-safe-left, env(safe-area-inset-left, 0px));
  --safe-right: var(--android-safe-right, env(safe-area-inset-right, 0px));
}

*, *::before, *::after { box-sizing: border-box; }

html {
  min-height: 100%;
  background: var(--sw-bg);
  overflow-x: hidden;
}

body {
  width: auto !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: 0 !important;
  color: var(--sw-text) !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(57, 214, 198, 0.13), transparent 34%),
    linear-gradient(160deg, var(--sw-bg) 0%, var(--sw-bg-2) 52%, var(--sw-bg) 100%) !important;
}

body::before { display: none !important; }

a { color: inherit; }
a:hover { color: var(--sw-teal-2); }

.banner-header,
.banner,
.appbar,
body > header {
  position: sticky !important;
  top: 0 !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  z-index: 20 !important;
  padding: calc(12px + var(--safe-top)) calc(18px + var(--safe-right)) 12px calc(18px + var(--safe-left)) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--sw-line) !important;
  background: rgba(7, 17, 20, 0.82) !important;
  color: var(--sw-text) !important;
  backdrop-filter: blur(18px) !important;
  box-shadow: none !important;
  text-align: left !important;
}

.header-content,
.appbar-inner {
  width: min(1120px, 100%) !important;
  min-height: 48px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
}

.site-title,
.banner h1,
.banner h2,
body > header h1,
body > header h2,
.brand-text strong,
.brand {
  margin: 0 !important;
  color: var(--sw-text) !important;
  font-family: Sora, Inter, sans-serif !important;
  font-size: clamp(1rem, 2vw, 1.18rem) !important;
  line-height: 1.15 !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.site-title::before,
.banner h1::before,
.banner h2::before,
body > header h1::before,
body > header h2::before {
  content: "";
  width: 34px;
  height: 34px;
  margin-right: 11px;
  display: inline-block;
  vertical-align: middle;
  border: 1px solid rgba(139, 243, 232, 0.4);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(57, 214, 198, 0.22), rgba(244, 195, 91, 0.08)),
    radial-gradient(circle at center, rgba(139, 243, 232, 0.55) 0 2px, transparent 3px);
}

.slogan,
.login-text,
.brand-text span {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  border: 1px solid rgba(57, 214, 198, 0.22) !important;
  border-radius: 8px !important;
  background: rgba(57, 214, 198, 0.07) !important;
  color: var(--sw-teal-2) !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 0.82rem !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: normal !important;
  opacity: 1 !important;
}


.banner:not(.banner-header),
body > header:not(.banner-header) {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

body > header h1,
body > header h2,
.banner h1,
.banner h2 {
  text-align: left !important;
}
.header-actions,
.actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  min-width: 0 !important;
}

.signup-pill,
.nav-btn,
.button,
.btn,
.btn-home,
.home-btn,
button,
.form-links a,
.actions .button,
.placard button,
.placard a.btn {
  min-height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border: 1px solid rgba(139, 243, 232, 0.36) !important;
  border-radius: 8px !important;
  padding: 10px 16px !important;
  background: rgba(57, 214, 198, 0.08) !important;
  color: var(--sw-teal-2) !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 0.92rem !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  text-transform: none !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease !important;
}

button:hover,
.nav-btn:hover,
.button:hover,
.btn:hover,
.btn-home:hover,
.home-btn:hover,
.form-links a:hover,
.signup-pill:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(139, 243, 232, 0.58) !important;
  background: rgba(16, 37, 42, 0.96) !important;
  color: var(--sw-text) !important;
}

main,
#main-content,
.shell,
.content-wrapper,
.placard-container,
main.shell {
  width: min(1120px, calc(100% - 32px)) !important;
  max-width: 1120px !important;
  margin: 0 auto !important;
}

main,
#main-content {
  position: static !important;
  inset: auto !important;
  flex: 1 0 auto !important;
  min-height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 18px !important;
  padding: clamp(24px, 5vw, 54px) calc(0px + var(--safe-right)) clamp(32px, 6vw, 64px) calc(0px + var(--safe-left)) !important;
  overflow: visible !important;
  background: transparent !important;
}

.main-flex-filler { display: none !important; }

.container,
.placard,
.box,
.section,
.hero,
.hero-media,
.quick-link,
.kpi,
.sw-benefits,
.sw-item,
form,
#login-form,
#register-form {
  border: 1px solid var(--sw-line) !important;
  border-radius: 8px !important;
  background: rgba(12, 27, 31, 0.82) !important;
  color: var(--sw-text) !important;
  box-shadow: none !important;
}

.container,
.placard-container,
.content-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 16px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  backdrop-filter: none !important;
}

.container,
.placard,
form,
#login-form,
#register-form {
  width: min(100%, 680px) !important;
  max-width: 680px !important;
  margin: 0 auto !important;
}

form,
#login-form,
#register-form,
.placard {
  padding: clamp(18px, 4vw, 28px) !important;
  text-align: left !important;
}

.sw-page-intro {
  width: min(100%, 680px);
  margin: 0 auto;
  padding: 18px;
  border: 1px solid rgba(57, 214, 198, 0.22);
  border-radius: 8px;
  background: rgba(57, 214, 198, 0.07);
  color: #d9efec;
}

.sw-page-kicker {
  margin: 0 0 8px;
  color: var(--sw-teal-2);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sw-page-title {
  margin: 0;
  color: var(--sw-text);
  font-family: Sora, Inter, sans-serif;
  font-size: clamp(1.42rem, 4vw, 2.35rem);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: 0;
}

.sw-page-copy {
  margin: 10px 0 0;
  color: #c7d6d3;
  font-size: 0.98rem;
  line-height: 1.58;
}

h1, h2, h3, legend,
.placard h2,
.title,
.collapsible,
.feature-label,
.sw-title,
.sw-section-title {
  color: var(--sw-text) !important;
  font-family: Sora, Inter, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

h1, .placard h2, legend {
  margin: 0 0 16px !important;
  font-size: clamp(1.3rem, 4vw, 2rem) !important;
  line-height: 1.15 !important;
  text-align: left !important;
}

p, li, .content, .feature-text, .sw-section-text, .placard p {
  color: #c7d6d3 !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 0.97rem !important;
  line-height: 1.62 !important;
  letter-spacing: 0 !important;
}

label,
.form-label {
  display: block !important;
  margin: 0 0 6px !important;
  color: #d9efec !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
}

input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
  width: 100% !important;
  min-height: 46px !important;
  margin: 0 0 14px !important;
  padding: 12px 13px !important;
  border: 1px solid rgba(179, 224, 214, 0.22) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--sw-text) !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 1rem !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

textarea { min-height: 112px !important; resize: vertical !important; }
select option { color: #071114 !important; background: #f4f8f7 !important; }
input::placeholder, textarea::placeholder { color: rgba(199, 214, 211, 0.62) !important; }
input:focus, textarea:focus, select:focus {
  border-color: rgba(139, 243, 232, 0.68) !important;
  background: rgba(57, 214, 198, 0.1) !important;
}

input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  accent-color: var(--sw-teal) !important;
}

fieldset {
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

button[type="submit"],
#login-form button[type="submit"],
#register-form button[type="submit"] {
  width: 100% !important;
  margin: 4px 0 0 !important;
  background: linear-gradient(135deg, rgba(57, 214, 198, 0.22), rgba(97, 211, 148, 0.12)) !important;
  color: var(--sw-teal-2) !important;
}

.button-container,
.form-links,
.main-nav,
.placard-actions,
.btn-row {
  width: min(100%, 680px) !important;
  margin: 14px auto 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.button-container .button,
.form-links a,
.main-nav .nav-btn {
  flex: 1 1 150px !important;
  margin: 0 !important;
}

#login-alert,
.login-alert {
  width: min(100%, 680px) !important;
  margin: 0 auto !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(244, 195, 91, 0.28) !important;
  border-radius: 8px !important;
  background: rgba(244, 195, 91, 0.08) !important;
  color: #f7d58a !important;
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  text-align: center !important;
  transform: none !important;
}

.forgot-password,
.forgot-password a,
.ghost-arrow {
  color: var(--sw-teal-2) !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  text-align: center !important;
  text-decoration: none !important;
}

.collapsible,
.placard-toggle {
  width: 100% !important;
  min-height: 58px !important;
  justify-content: space-between !important;
  margin: 0 !important;
  background: rgba(12, 27, 31, 0.86) !important;
  border-color: var(--sw-line) !important;
  color: var(--sw-text) !important;
  text-align: left !important;
}

.content,
.placard-content {
  padding: 16px !important;
  border: 1px solid var(--sw-line) !important;
  border-top: 0 !important;
  border-radius: 0 0 8px 8px !important;
  background: rgba(7, 17, 20, 0.45) !important;
}

.feature-list,
.pill-list,
ul {
  padding-left: 1.2rem !important;
}

.feature-item,
.sw-item,
.kpi {
  padding: 16px !important;
  border: 1px solid var(--sw-line) !important;
  border-radius: 8px !important;
  background: rgba(12, 27, 31, 0.72) !important;
}

.feature-icon,
.hero-media img,
.placard img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 8px !important;
}

.sw-modal-overlay { padding: 16px !important; }
.sw-modal {
  width: min(94vw, 620px) !important;
  max-height: min(86dvh, 720px) !important;
  border: 1px solid var(--sw-line) !important;
  border-radius: 8px !important;
  background: #0c1b1f !important;
  color: var(--sw-text) !important;
}

footer,
.appfoot {
  position: static !important;
  width: 100% !important;
  margin-top: auto !important;
  padding: 16px calc(16px + var(--safe-right)) calc(18px + var(--safe-bottom)) calc(16px + var(--safe-left)) !important;
  border-top: 1px solid var(--sw-line) !important;
  background: rgba(7, 17, 20, 0.92) !important;
  color: #78908b !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 0.78rem !important;
  line-height: 1.55 !important;
  text-align: center !important;
}

footer p { margin: 4px auto !important; max-width: 1120px !important; }
footer a { color: #c5d4d1 !important; text-decoration: none !important; }
footer a:hover { color: var(--sw-teal-2) !important; }
.footer-disclaimer { color: #78908b !important; font-size: 0.76rem !important; }

@media (max-width: 700px) {
  .banner-header,
  .banner,
  .appbar,
  body > header {
    padding: calc(8px + var(--safe-top)) calc(12px + var(--safe-right)) 8px calc(12px + var(--safe-left)) !important;
  }

  .header-content,
  .appbar-inner {
    min-height: 44px !important;
    gap: 10px !important;
  }

  .site-title::before,
  .banner h1::before,
  .banner h2::before {
    width: 30px;
    height: 30px;
    margin-right: 8px;
  }

  .slogan,
  .login-text,
  .brand-text span {
    min-height: 32px !important;
    padding: 0 8px !important;
    font-size: 0.74rem !important;
  }

  main,
  #main-content,
  .shell,
  .content-wrapper,
  .placard-container,
  main.shell {
    width: min(100% - 24px, 1120px) !important;
  }

  main,
  #main-content {
    padding-top: 20px !important;
    padding-bottom: 28px !important;
  }

  form,
  #login-form,
  #register-form,
  .placard,
  .sw-page-intro {
    padding: 16px !important;
  }

  .button-container,
  .form-links,
  .main-nav,
  .placard-actions,
  .btn-row {
    flex-direction: column !important;
  }

  .button-container .button,
  .form-links a,
  .main-nav .nav-btn,
  .home-btn,
  .btn-home {
    width: 100% !important;
    flex-basis: auto !important;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .banner-header,
  .banner,
  .appbar,
  body > header {
    position: static !important;
  }

  main,
  #main-content {
    padding-top: 14px !important;
    padding-bottom: 18px !important;
  }

  form,
  #login-form,
  #register-form,
  .placard {
    padding: 14px !important;
  }
}



body main,
body #main-content {
  background: transparent !important;
}


/* Safe-Watcher closed accordion correction: prevents hidden toggle content from peeking out. */
.collapsible + .content:not(.expanded),
.collapsible + .placard-content:not(.expanded) {
  max-height: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-top-width: 0 !important;
  border-bottom-width: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.collapsible.expanded + .content,
.collapsible.active + .content,
.collapsible.expanded + .placard-content,
.collapsible.active + .placard-content,
.collapsible + .content.expanded,
.collapsible + .placard-content.expanded {
  height: auto !important;
  min-height: 0 !important;
  opacity: 1 !important;
  overflow: visible !important;
  pointer-events: auto !important;
}