/* Steadyline site styles. Most styling is inline on each page; this file holds the basics, the photo panels and phone layout. */
html { scroll-behavior: smooth; }
body { margin: 0; background: #F6F7F9; font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; color: #14213D; -webkit-font-smoothing: antialiased; }
a { color: #0B7F73; }
a:hover { color: #075E55; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 3px solid #0B7F73; outline-offset: 3px; }
input:focus, select:focus, textarea:focus { outline: 3px solid #0B7F73; outline-offset: 1px; border-color: #0B7F73 !important; }
nav a[style*="background"]:hover { filter: brightness(1.15); }

/* Branded panels where photos will go. To use a real photo, swap the panel for:
   <img src="images/your-photo.jpg" alt="Describe the photo" style="width:100%;height:100%;object-fit:cover;border-radius:20px"> */
.art { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; background-size: 30px 30px; background-position: 15px 15px; }
.art-mark { width: 46%; max-width: 280px; height: auto; position: relative; }
.art-1 { background-color: #14213D; background-image: radial-gradient(circle, #24365C 5px, transparent 6px); }
.art-1 .d { fill: #FFFFFF; } .art-1 .b { fill: #3FD1BE; }
.art-2 { background-color: #0B7F73; background-image: radial-gradient(circle, #13917F 5px, transparent 6px); }
.art-2 .d { fill: #FFFFFF; } .art-2 .b { fill: #FFE45C; }
.art-3 { background-color: #E4E9EF; background-image: radial-gradient(circle, #D3DAE3 5px, transparent 6px); }
.art-3 .d { fill: #14213D; } .art-3 .b { fill: #0B7F73; }
.art-4 { background-color: #14213D; background-image: radial-gradient(circle, #24365C 5px, transparent 6px); }
.art-4 .d { fill: #FFFFFF; } .art-4 .b { fill: #FFE45C; }

/* Drawn illustrations (swap for real photos later) */
.illus { background: #E4E9EF; }
.illus img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Home page: staff app phone view */
.hero-visual { position: relative; height: 540px; border-radius: 28px; overflow: hidden; display: flex; align-items: center; justify-content: center;
  background-color: #14213D; background-image: radial-gradient(circle, #24365C 5px, transparent 6px); background-size: 30px 30px; background-position: 15px 15px; }
.phone { position: relative; width: 262px; height: 480px; box-sizing: border-box; padding: 34px 16px 18px; border-radius: 40px; background: #FFFFFF;
  border: 10px solid #0B1426; box-shadow: 0 30px 60px rgba(0,0,0,0.35); display: flex; flex-direction: column; gap: 14px; font-family: Inter, sans-serif; color: #14213D; }
.phone-notch { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 70px; height: 14px; border-radius: 8px; background: #0B1426; }
.phone-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12px; }
.pt-brand { display: flex; align-items: center; gap: 6px; font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 14px; }
.pt-gate { background: #E4E9EF; padding: 4px 9px; border-radius: 999px; font-weight: 600; }
.ok { background: #1E9E5A; color: #FFFFFF; border-radius: 18px; padding: 18px 14px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.ok b { font-family: "Space Grotesk", sans-serif; font-size: 26px; line-height: 1.1; }
.ok span { font-size: 12px; opacity: 0.9; }
.guest { display: flex; flex-direction: column; gap: 2px; }
.guest b { font-size: 18px; }
.guest span { font-size: 13px; color: #4A5568; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px; }
.chip-mint { background: #CFF3EE; color: #075E55; }
.chip-yel { background: #FFE45C; color: #14213D; }
.chip-navy { background: #14213D; color: #FFFFFF; }
.meta { display: flex; justify-content: space-between; font-size: 12px; color: #4A5568; border-top: 1px solid #E2E6EC; padding-top: 10px; }
.meta b { color: #14213D; font-family: ui-monospace, Menlo, monospace; }
.scan { margin-top: auto; background: #0B7F73; color: #FFFFFF; border-radius: 999px; padding: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 600; }
.float-band { position: absolute; left: 7%; bottom: 14%; display: flex; align-items: center; gap: 4px; transform: rotate(-8deg); }
.float-band span { display: block; width: 120px; height: 34px; border-radius: 17px; background: #FFE45C; border: 4px solid #0B1426;
  background-image: radial-gradient(circle, #14213D 3px, transparent 4px); background-size: 18px 34px; background-position: 9px 0; }
.float-band svg path { stroke: #FFE45C; }
.float-stat { position: absolute; right: 6%; top: 12%; background: #FFFFFF; border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px;
  box-shadow: 0 16px 30px rgba(0,0,0,0.25); font-family: Inter, sans-serif; color: #14213D; }
.float-stat small { font-size: 12px; font-weight: 600; }
.float-stat small:last-child { color: #0B7F73; }
.float-stat .bar { display: block; width: 110px; height: 10px; border-radius: 5px; background: #E4E9EF; overflow: hidden; }
.float-stat .bar i { display: block; width: 62%; height: 100%; background: #0B7F73; }

/* Spam trap on the form (hidden from people) */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Legal and simple text pages */
.prose { max-width: 760px; margin: 0 auto; padding: 72px 24px 96px; font-size: 17px; line-height: 1.65; color: #2D3748; }
.prose h1 { font-family: "Space Grotesk", sans-serif; font-size: 52px; line-height: 1.05; letter-spacing: -0.03em; color: #14213D; margin: 0 0 12px; }
.prose h2 { font-family: "Space Grotesk", sans-serif; font-size: 24px; color: #14213D; margin: 40px 0 8px; }
.prose p, .prose ul { margin: 0 0 14px; }
.prose li { margin-bottom: 6px; }
.prose .updated { color: #4A5568; font-size: 15px; margin-bottom: 32px; }

/* Tablets and phones */
@media (max-width: 860px) {
  [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  h1 { font-size: 48px !important; }
}
@media (max-width: 600px) {
  h1 { font-size: 40px !important; line-height: 1.05 !important; }
  h2 { font-size: 30px !important; line-height: 1.1 !important; }
  header nav { gap: 14px 18px !important; font-size: 14px !important; }
  div[style*="padding: 56px 48px"], div[style*="padding: 64px 48px"], div[style*="padding: 40px"], div[style*="padding: 44px"], form[style*="padding: 40px"] { padding: 28px 22px !important; }
  .art { height: 240px !important; }
  .illus { height: 230px !important; }
  .hero-visual { height: 520px; }
  .float-band { left: 4%; bottom: 4%; transform: rotate(-8deg) scale(0.8); }
  .float-stat { display: none; }
  .prose h1 { font-size: 38px; }
}