/* ============================================================
   KompanyOS — Software Panel + 3SC contact form (reusable)
   The macOS-style window chrome (titlebar + black outline + hard offset shadow
   + dotted desktop) as a static container for any content — here holding the
   3SC contact form (matches 3sidedcube.com/contact).

   Drop-in: <link rel="stylesheet" href="panel.css"> + the .os-panel markup
   (reference in styles.html §14). No JS. Self-contained: reads the 3SC design
   tokens when present, falls back to the experience-page tokens, then to hexes.
   ============================================================ */

.os-panel {
  max-width: 640px; border: 3px solid #000; border-radius: 20px; background: #fff;
  box-shadow: var(--cube-shadow, 10px 10px 0 0 #000); overflow: hidden;
}
/* titlebar */
.os-panel .os-bar { display: flex; align-items: center; gap: 9px; padding: 15px 20px 13px; border-bottom: 1px solid rgba(0,0,0,.08); }
.os-panel .os-light { width: 13px; height: 13px; border-radius: 50%; }
.os-panel .os-light.r { background: #ff5f57; } .os-panel .os-light.y { background: #febc2e; } .os-panel .os-light.g { background: #28c840; }
.os-panel .os-name { margin-left: 8px; font: 700 13px/1 var(--cube-font-secondary, var(--mono, 'Anonymous Pro', ui-monospace, monospace)); text-transform: uppercase; letter-spacing: .12em; color: #000; }
/* dotted "desktop" body */
.os-panel .os-body {
  padding: clamp(28px, 3.5vw, 40px) clamp(24px, 4vw, 46px) clamp(30px, 3vw, 44px);
  background-color: #ededed;
  background-image: radial-gradient(rgba(0,0,0,.05) 1.5px, transparent 0), radial-gradient(rgba(0,0,0,.05) 1.5px, transparent 0);
  background-position: 0 0, 20px 20px; background-size: 40px 40px, 40px 40px;
}

/* 3SC contact form: black "holla" tab, centred heading, white inputs with a
   hard offset shadow + pink focus, mono uppercase labels with a pink
   required-asterisk, green submit. */
.os-panel .os-formhead { text-align: center; margin-bottom: clamp(26px, 3.4vw, 36px); }
.os-panel .os-pill {
  display: inline-block; transform: rotate(-2deg);
  background: #000; color: #fff; font: 800 17px/1 var(--cube-font-primary, var(--font, 'Poppins', system-ui, sans-serif));
  padding: 12px 22px 13px; border-radius: 12px; box-shadow: 4px 4px 0 rgba(0,0,0,.20);
}
.os-panel .os-title { margin: 20px auto 0; max-width: 28ch;
  font: 800 clamp(22px, 2.4vw, 30px)/1.18 var(--cube-font-primary, var(--font, 'Poppins', system-ui, sans-serif)); letter-spacing: -.01em; }
.os-panel .os-form { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 26px; }
.os-panel .os-field.full { grid-column: 1 / -1; }
.os-panel .os-field label { display: block; margin-bottom: 10px;
  font: 700 13px/1 var(--cube-font-secondary, var(--mono, 'Anonymous Pro', ui-monospace, monospace)); text-transform: uppercase; letter-spacing: .06em; color: #000; }
.os-panel .os-field label .req { color: var(--cube-pink, var(--pink, #f70087)); }
.os-panel .os-field input, .os-panel .os-field textarea {
  width: 100%; background: #fff; border: 2.5px solid #000; border-radius: 7px; box-shadow: 4px 4px 0 0 #000;
  font: 400 15px/1.4 var(--cube-font-secondary, var(--mono, 'Anonymous Pro', ui-monospace, monospace)); color: #000; padding: 15px 16px; outline: none;
  transition: box-shadow .12s ease; }
.os-panel .os-field input::placeholder, .os-panel .os-field textarea::placeholder { color: #9a9a9a; }
.os-panel .os-field input:focus, .os-panel .os-field textarea:focus { box-shadow: 4px 4px 0 0 var(--cube-pink, var(--pink, #f70087)); }
.os-panel .os-field textarea { resize: vertical; min-height: 120px; }
.os-panel .os-submit {
  grid-column: 1 / -1; margin-top: 6px; width: 100%; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  background: var(--cube-green, var(--green, #00ed71)); color: #000; border: 3px solid #000; border-radius: 8px; box-shadow: 5px 5px 0 0 #000;
  font: 800 18px/1 var(--cube-font-primary, var(--font, 'Poppins', system-ui, sans-serif)); text-transform: uppercase; letter-spacing: .02em; padding: 18px;
  transition: transform .12s ease, box-shadow .12s ease; }
.os-panel .os-submit:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 0 #000; }
.os-panel .os-submit:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 0 #000; }
@media (max-width: 560px) { .os-panel .os-form { grid-template-columns: 1fr; } }