/* Homepage price card: Snap a photo · Speak your problem · ZIP code · Get my price.
   Warm off-white card, soft shadow, slow blue LED light travelling around the edge. */
@property --pc-a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

.pc {
  --pc-bg: #fbf8f3;
  --pc-blue: #0b6e99;
  --pc-led: #1fb4ea;
  --pc-ink: #1f2022;
  position: relative;
  display: grid;
  gap: 18px;
  margin-top: 24px;
  padding: 22px;
  border: 3px solid transparent;
  border-radius: 28px;
  background:
    linear-gradient(var(--pc-bg), var(--pc-bg)) padding-box,
    conic-gradient(from var(--pc-a),
      rgba(31,180,234,.22) 0deg, rgba(31,180,234,.22) 230deg,
      rgba(31,180,234,.6) 285deg, #8fe3ff 322deg, #d6f5ff 334deg, var(--pc-led) 345deg,
      rgba(31,180,234,.22) 360deg) border-box;
  box-shadow: 0 1px 2px rgba(7,52,74,.06), 0 18px 48px rgba(4,24,36,.28);
  animation: pc-led 9s linear infinite;
  color: var(--pc-ink);
}
/* soft glow that follows the light */
.pc::before {
  content: ''; position: absolute; inset: -4px; border-radius: 32px; z-index: -1; pointer-events: none;
  background: conic-gradient(from var(--pc-a), transparent 0deg, transparent 270deg, rgba(31,180,234,.75) 325deg, rgba(143,227,255,.9) 340deg, transparent 360deg);
  filter: blur(16px); opacity: .85;
  animation: pc-led 9s linear infinite;
}
@keyframes pc-led { to { --pc-a: 360deg; } }

.pc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pc-btn {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  min-height: 148px; padding: 18px 10px 16px; border-radius: 20px;
  background: #fff; border: 1.5px solid #ebe5da; color: var(--pc-ink);
  font: inherit; cursor: pointer; text-align: center;
  box-shadow: 0 1px 2px rgba(7,52,74,.05), 0 6px 18px rgba(7,52,74,.06);
  transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.pc-btn:hover { border-color: #d9d1c3; box-shadow: 0 2px 4px rgba(7,52,74,.06), 0 10px 24px rgba(7,52,74,.09); }
.pc-btn:active { transform: scale(.985); }
.pc-btn:focus-visible, .pc-btn:focus-within { outline: none; border-color: var(--pc-blue); box-shadow: 0 0 0 3px rgba(11,110,153,.22), 0 6px 18px rgba(7,52,74,.06); }
.pc-snap input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.pc-t { font-size: 1.06rem; font-weight: 600; line-height: 1.25; letter-spacing: -.005em; }

.pc-circle {
  width: 72px; height: 72px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none;
  border: 2px dashed rgba(11,110,153,.55); color: var(--pc-blue); background: #f2f8fb;
}
.pc-circle svg { width: 32px; height: 32px; }
.pc-circle[hidden] { display: none; }
/* photo fills the same big circle */
.pc-shot { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 2px solid var(--pc-blue); box-shadow: 0 0 0 4px #e7f3f8; }
.pc-shot[hidden] { display: none; }
.pc-snap.has { border-color: var(--pc-blue); }
.pc-snap.busy { opacity: .6; }

/* microphone: solid accent, gentle pulse while listening */
.pc-circle--mic { border: 0; background: var(--pc-blue); color: #fff; box-shadow: 0 6px 16px rgba(11,110,153,.35); }
.pc-mic.on { border-color: var(--pc-blue); }
.pc-mic.on .pc-circle--mic { animation: pc-pulse 1.8s ease-out infinite; background: #0a7fb0; }
@keyframes pc-pulse {
  0% { box-shadow: 0 0 0 0 rgba(31,180,234,.55), 0 6px 16px rgba(11,110,153,.35); }
  70% { box-shadow: 0 0 0 16px rgba(31,180,234,0), 0 6px 16px rgba(11,110,153,.35); }
  100% { box-shadow: 0 0 0 0 rgba(31,180,234,0), 0 6px 16px rgba(11,110,153,.35); }
}

/* live words + edit box (opens under the two buttons once the customer speaks or types) */
.pc-say { display: grid; gap: 8px; margin-top: -4px; }
.pc-say[hidden] { display: none; }
.pc-say label { font-size: .95rem; color: #5b636d; }
.pc-say textarea {
  width: 100%; min-height: 76px; resize: vertical; padding: 14px 16px; border-radius: 16px;
  border: 1.5px solid #e2dbcf; background: #fff; font: inherit; font-size: 1.05rem; line-height: 1.45; color: var(--pc-ink);
}
.pc-say textarea:focus, .pc-say textarea:focus-visible { outline: none; border-color: var(--pc-blue); box-shadow: 0 0 0 3px rgba(11,110,153,.2); }
.pc-hint { margin: 0; font-size: .92rem; color: #5b636d; }
.pc-hint:empty { display: none; }

.pc-zip {
  display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 0 18px; border-radius: 16px;
  background: #fff; border: 1.5px solid #e2dbcf; color: #5b636d; cursor: text;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.pc-zip svg { width: 22px; height: 22px; flex: none; }
.pc-zip input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 1.1rem; color: var(--pc-ink); padding: 0; }
.pc-zip input::placeholder { color: #80868f; }
.pc-zip input:focus, .pc-zip input:focus-visible { outline: none !important; box-shadow: none !important; }
.pc-zip:focus-within { border-color: var(--pc-blue); box-shadow: 0 0 0 3px rgba(11,110,153,.2); color: var(--pc-blue); }

.pc-go {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 60px; margin-top: 2px;
  border: 0; border-radius: 18px; background: #07344a; color: #fff; font: inherit; font-size: 1.15rem; font-weight: 700; letter-spacing: .005em; cursor: pointer;
  box-shadow: 0 10px 24px rgba(7,52,74,.30);
  transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.pc-go svg { width: 20px; height: 20px; }
.pc-go:hover { background: #052638; box-shadow: 0 12px 28px rgba(7,52,74,.36); }
.pc-go:active { transform: translateY(1px); }
.pc-go:focus-visible { outline: none; box-shadow: 0 0 0 3px #fbf8f3, 0 0 0 6px var(--pc-blue); }

.pc .tt-err { margin: -6px 0 0; }
.pc .tt-err:empty { display: none; }
.pc-say + .pc-zip { margin-top: 0; }

@media (max-width: 360px) { .pc { padding: 18px; gap: 16px; } .pc-btn { min-height: 136px; } .pc-t { font-size: 1rem; } }
@media (min-width: 900px) { .pc { max-width: 520px; } }
@media (prefers-reduced-motion: reduce) {
  .pc, .pc::before { animation: none; }
  .pc { background: linear-gradient(var(--pc-bg), var(--pc-bg)) padding-box, linear-gradient(rgba(31,180,234,.6), rgba(31,180,234,.6)) border-box; }
  .pc::before { opacity: .25; }
  .pc-mic.on .pc-circle--mic { animation: none; box-shadow: 0 0 0 6px rgba(31,180,234,.35); }
}