html { background: #090C12; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; display: block; overflow-x: hidden; }

/* Responsive layout switch: desktop 1440 canvas vs mobile 390 canvas
   (merged by merge-mobile.py). site.js scales the visible one. */
#osa-mobile-wrap { display: none; overflow: hidden; }
#osa-menu {
  position: fixed; inset: 0; z-index: 9600;
  display: none; overflow-y: auto; background: #090C12;
}
#osa-menu.open { display: block; }
@media (max-width: 767px) {
  #osa-stage, body > [data-pencil-name] { display: none; }
  #osa-mobile-wrap { display: block; }
  .osa-lang { display: none !important; } /* language switch lives in the mobile menu */
}
#osa-stage { position: relative; margin: 0 auto; transform-origin: top left; }

.osa-clickable { cursor: pointer; }
.osa-clickable:hover { opacity: 0.85; }

/* Language toggle */
.osa-lang {
  position: fixed; bottom: 18px; right: 18px; z-index: 9000;
  display: flex; gap: 2px; padding: 3px;
  background: #11161FCC; border: 1px solid #FFFFFF1F; border-radius: 999px;
  font-family: Geist, Inter, system-ui, sans-serif; font-size: 12px; font-weight: 550;
  backdrop-filter: blur(6px);
}
.osa-lang a {
  color: #AAB4C3; text-decoration: none; padding: 4px 12px; border-radius: 999px;
}
.osa-lang a.active { background: #F3F5F8; color: #11161F; }
.osa-lang a:not(.active):hover { color: #F3F5F8; }

/* Modal */
.osa-scrim {
  position: fixed; inset: 0; z-index: 9500;
  background: rgba(5, 7, 11, 0.80);
  display: flex; align-items: flex-start; justify-content: center;
  overflow-y: auto; padding: 48px 16px;
  opacity: 0; transition: opacity .18s ease;
}
.osa-scrim.open { opacity: 1; }
.osa-modal {
  position: relative;
  background: #F8F9FB; border: 1px solid #FFFFFF26; border-radius: 16px;
  padding: 28px 32px 24px; box-sizing: border-box;
  width: 100%;
  font-family: Geist, Inter, system-ui, sans-serif;
  box-shadow: 0 24px 80px rgba(0,0,0,.5);
  transform: translateY(10px); transition: transform .18s ease;
}
.osa-scrim.open .osa-modal { transform: translateY(0); }
.osa-modal--sales { max-width: 580px; }
.osa-modal--demo { max-width: 600px; }

.osa-modal .eyebrow { color: #3F6FAE; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; margin: 2px 0 14px; }
.osa-modal h2 { color: #172033; font-size: 29px; font-weight: 650; margin: 0 0 12px; letter-spacing: -0.3px; }
.osa-modal .desc { color: #667085; font-size: 13px; line-height: 1.55; margin: 0 0 26px; max-width: 490px; }
.osa-close {
  position: absolute; top: 24px; right: 24px; width: 30px; height: 30px;
  background: #EEF1F5; border: none; border-radius: 8px; cursor: pointer;
  color: #5D6674; font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.osa-close:hover { background: #E2E6EC; }

.osa-form .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.osa-field { margin-bottom: 20px; }
.osa-field label { display: block; color: #344054; font-size: 11px; font-weight: 650; letter-spacing: .2px; margin-bottom: 8px; }
.osa-field input, .osa-field select, .osa-field textarea {
  width: 100%; box-sizing: border-box;
  background: #FFFFFF; border: 1px solid #DDE2E8; border-radius: 8px;
  height: 48px; padding: 0 14px;
  font-family: inherit; font-size: 13px; color: #172033;
  outline: none; appearance: none; -webkit-appearance: none;
}
.osa-field textarea { height: auto; padding: 14px; resize: vertical; }
.osa-field input::placeholder, .osa-field textarea::placeholder { color: #98A2B3; font-size: 12px; }
.osa-field select:invalid { color: #98A2B3; font-size: 12px; }
.osa-field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235D6674' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.osa-field input:focus, .osa-field select:focus, .osa-field textarea:focus { border-color: #3F6FAE; box-shadow: 0 0 0 3px rgba(63,111,174,.12); }

.osa-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.osa-option {
  background: #FFFFFF; border: 1px solid #DDE2E8; border-radius: 9px;
  padding: 13px; cursor: pointer; text-align: left; font-family: inherit;
}
.osa-option .t { color: #344054; font-size: 12px; font-weight: 650; margin-bottom: 6px; }
.osa-option .c { color: #7B8494; font-size: 9px; line-height: 1.3; }
.osa-option.selected { background: #EAF0F8; border-color: #3F6FAE; }
.osa-option.selected .t { color: #315D93; }

.osa-submit {
  width: 100%; height: 50px; margin-top: 6px;
  background: #3F6FAE; color: #FFFFFF; border: none; border-radius: 8px;
  font-family: inherit; font-size: 14px; font-weight: 650; cursor: pointer;
}
.osa-submit:hover { background: #35619B; }
.osa-submit:disabled { opacity: .6; cursor: default; }
.osa-privacy { color: #8A94A3; font-size: 10px; text-align: center; margin: 14px 0 0; line-height: 1.5; }
.osa-direct { color: #5478A6; font-size: 11px; font-weight: 550; text-align: center; margin: 14px 0 0; }
.osa-direct a { color: inherit; }
.osa-error { color: #B4232A; font-size: 12px; margin-top: 10px; text-align: center; display: none; }

.osa-success { text-align: center; padding: 60px 20px; }
.osa-success .mark {
  width: 52px; height: 52px; margin: 0 auto 20px; border-radius: 999px;
  background: #EAF0F8; color: #3F6FAE; font-size: 24px;
  display: flex; align-items: center; justify-content: center;
}
.osa-success h3 { color: #172033; font-size: 22px; font-weight: 650; margin: 0 0 10px; }
.osa-success p { color: #667085; font-size: 13px; line-height: 1.6; margin: 0; }

@media (max-width: 640px) {
  .osa-form .grid2 { grid-template-columns: 1fr; gap: 0; }
  .osa-options { grid-template-columns: 1fr; }
  .osa-modal { padding: 24px 20px 20px; }
}