/* ============================================================
   PRAMA — SHARED FORM MODALS
   One stylesheet for every form on the site: schedule a demo,
   start the conversation, and the careers application.
   Written in plain CSS (no Tailwind utilities) so the modals
   render identically on every page, regardless of when the
   Play CDN finishes generating classes.
   ============================================================ */

.pf-modal{
  position:fixed; inset:0; z-index:70;
  display:none; align-items:flex-start; justify-content:center;
  padding:24px 16px;
  overflow-y:auto;
  background:rgba(0,0,0,.6);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.pf-modal.pf-open{ display:flex; }
@media (min-width:640px){ .pf-modal{ padding:40px 24px; align-items:center; } }

.pf-card{
  position:relative;
  width:100%; max-width:560px;
  margin:auto;
  background:#fff;
  border-radius:24px;
  padding:32px 26px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.55);
  animation:pfIn .38s cubic-bezier(.22,.61,.36,1) both;
}
.pf-card.pf-narrow{ max-width:440px; }
@media (min-width:640px){ .pf-card{ padding:36px 34px; } }
@keyframes pfIn{ from{ opacity:0; transform:translateY(18px) scale(.985) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion:reduce){ .pf-card{ animation:none } }

.pf-close{
  position:absolute; top:14px; right:14px;
  width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  border:0; border-radius:999px; background:transparent;
  color:#5A5A5A; cursor:pointer;
  transition:background .3s cubic-bezier(.22,.61,.36,1), color .3s cubic-bezier(.22,.61,.36,1);
}
.pf-close:hover{ background:rgba(26,26,26,.06); color:#1A1A1A; }
.pf-close:focus-visible{ outline:2px solid #C2A35E; outline-offset:2px; }

.pf-eyebrow{
  font-family:'Sora',sans-serif; font-weight:500;
  letter-spacing:.28em; text-transform:uppercase; font-size:.66rem;
  color:#C2A35E; margin:0 0 10px;
}
.pf-title{
  font-family:'Sora',sans-serif; font-weight:300;
  font-size:1.6rem; line-height:1.12; letter-spacing:-.02em;
  color:#1A1A1A; margin:0 0 8px;
}
.pf-title b{ font-weight:600; color:#C2A35E; }
.pf-lede{ font-size:.875rem; line-height:1.6; color:#5A5A5A; margin:0 0 24px; }

/* ---- Fields ---- */
.pf-form{ display:flex; flex-direction:column; gap:14px; }
.pf-row{ display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width:560px){ .pf-row.pf-2{ grid-template-columns:1fr 1fr; } }

.pf-field{ display:flex; flex-direction:column; gap:6px; }
.pf-label{
  font-family:'Sora',sans-serif; font-size:.72rem; font-weight:500;
  letter-spacing:.06em; text-transform:uppercase; color:#5A5A5A;
}
.pf-label .pf-opt{ text-transform:none; letter-spacing:0; color:#8A8A8A; font-weight:400; }

.pf-input, .pf-select, .pf-textarea{
  width:100%;
  font-family:'Inter',system-ui,sans-serif; font-size:.9rem; color:#1A1A1A;
  background:#FAFAFA;
  border:1px solid rgba(26,26,26,.12);
  border-radius:12px;
  padding:12px 14px;
  outline:none;
  transition:border-color .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s cubic-bezier(.22,.61,.36,1), background .3s;
  -webkit-appearance:none; appearance:none;
}
.pf-textarea{ min-height:104px; resize:vertical; line-height:1.55; }
.pf-input::placeholder, .pf-textarea::placeholder{ color:#A0A0A0; }
.pf-input:focus, .pf-select:focus, .pf-textarea:focus{
  border-color:#C2A35E; background:#fff;
  box-shadow:0 0 0 3px rgba(194,163,94,.14);
}
.pf-select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%235A5A5A' stroke-width='1.6'%3E%3Cpath d='M1 1.5L6 6.5l5-5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
  padding-right:38px; cursor:pointer;
}
.pf-input.pf-invalid, .pf-select.pf-invalid, .pf-textarea.pf-invalid,
.pf-file.pf-invalid{ border-color:#B3261E; box-shadow:0 0 0 3px rgba(179,38,30,.10); }
/* An invalid field keeps its red ring while focused; the gold focus ring
   would otherwise say "fine" over a field the error message just named. */
.pf-input.pf-invalid:focus, .pf-select.pf-invalid:focus, .pf-textarea.pf-invalid:focus,
.pf-file.pf-invalid:focus, .pf-file.pf-invalid:focus-within{
  border-color:#B3261E; box-shadow:0 0 0 3px rgba(179,38,30,.18);
}

/* ---- Checkbox grid (services) ---- */
.pf-checks{ display:grid; grid-template-columns:1fr; gap:8px; }
@media (min-width:560px){ .pf-checks{ grid-template-columns:1fr 1fr; } }
.pf-check{
  display:flex; align-items:flex-start; gap:9px;
  padding:10px 12px;
  border:1px solid rgba(26,26,26,.12); border-radius:12px;
  background:#FAFAFA; cursor:pointer;
  font-size:.83rem; line-height:1.35; color:#1A1A1A;
  transition:border-color .25s var(--ease,cubic-bezier(.22,.61,.36,1)), background .25s;
}
.pf-check:hover{ border-color:rgba(194,163,94,.55); }
.pf-check input{
  flex:0 0 auto; margin-top:1px;
  width:15px; height:15px; accent-color:#C2A35E; cursor:pointer;
}
.pf-check.pf-checked{ border-color:#C2A35E; background:rgba(194,163,94,.08); }

/* ---- File input (careers) ---- */
.pf-file{
  display:flex; align-items:center; gap:12px;
  border:1px dashed rgba(26,26,26,.22); border-radius:12px;
  background:#FAFAFA; padding:14px;
  cursor:pointer;
  transition:border-color .3s cubic-bezier(.22,.61,.36,1), background .3s;
}
.pf-file:hover{ border-color:#C2A35E; background:#fff; }
/* The real input is 1px and transparent, so the wrapper has to carry the
   focus ring — otherwise a keyboard visitor cannot see where they are. */
.pf-file:focus, .pf-file:focus-within{
  outline:none; border-style:solid; border-color:#C2A35E; background:#fff;
  box-shadow:0 0 0 3px rgba(194,163,94,.14);
}
.pf-file input[type=file]{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.pf-file-ico{ flex:0 0 auto; color:#C2A35E; }
.pf-file-txt{ min-width:0; }
.pf-file-name{
  display:block; font-size:.85rem; color:#1A1A1A; font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pf-file-hint{ display:block; font-size:.74rem; color:#8A8A8A; margin-top:2px; }

/* ---- Submit + status ---- */
.pf-submit{
  width:100%; margin-top:6px;
  border:0; border-radius:14px; padding:14px 20px;
  background:#C2A35E; color:#fff; cursor:pointer;
  font-family:'Sora',sans-serif; font-size:.9rem; font-weight:500;
  box-shadow:0 8px 22px -8px rgba(194,163,94,.6);
  transition:transform .4s cubic-bezier(.22,.61,.36,1), filter .4s, box-shadow .4s, opacity .3s;
}
.pf-submit:hover:not(:disabled){ transform:translateY(-2px); filter:brightness(1.06); box-shadow:0 14px 30px -10px rgba(194,163,94,.7); }
.pf-submit:disabled{ opacity:.62; cursor:progress; transform:none; }
.pf-submit:focus-visible{ outline:2px solid #1A1A1A; outline-offset:3px; }
.pf-check input:focus-visible{ outline:2px solid #C2A35E; outline-offset:2px; }

.pf-fine{ font-size:.72rem; color:#8A8A8A; line-height:1.55; margin:2px 0 0; text-align:center; }
.pf-fine a{ color:#C2A35E; }

.pf-error{
  display:none;
  font-size:.82rem; line-height:1.55; color:#8E2019;
  background:rgba(179,38,30,.07); border:1px solid rgba(179,38,30,.20);
  border-radius:12px; padding:11px 13px;
}
.pf-error.pf-show{ display:block; }
.pf-error a{ color:#8E2019; text-decoration:underline; }

/* Honeypot — never shown, never announced */
.pf-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---- Success panel ---- */
.pf-success{ display:none; text-align:center; padding:26px 4px 12px; }
.pf-success.pf-show{ display:block; }
.pf-tick{
  width:56px; height:56px; margin:0 auto 20px;
  border-radius:999px; background:rgba(194,163,94,.12); color:#C2A35E;
  display:flex; align-items:center; justify-content:center;
}
.pf-success h3{
  font-family:'Sora',sans-serif; font-weight:300; font-size:1.35rem;
  letter-spacing:-.02em; color:#1A1A1A; margin:0 0 8px;
}
.pf-success h3 b{ font-weight:600; color:#C2A35E; }
.pf-success p{ font-size:.875rem; color:#5A5A5A; line-height:1.6; margin:0; }

.pf-card:focus{ outline:none; }