/* Two-step, in-place conversion study for the Google review calculator. */

.gc-wizard-hero { min-height: auto; padding-bottom: clamp(54px, 7vw, 92px) !important; }
.gc-wizard-grid { align-items: start; }
.gc-wizard {
  --gcw-blue-soft: #eef2ff;
  --gcw-blue-line: #d8e1ff;
  --gcw-field: #fafbff;
  position: relative;
  overflow: hidden;
  scroll-margin-top: 76px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(15, 13, 25, .08), 0 44px 90px -42px rgba(0, 61, 255, .42), 0 24px 48px -34px rgba(15, 13, 25, .34);
}
.gc-wizard[hidden], .gc-wizard-result[hidden], .gc-wizard-inputs[hidden] { display: none; }

/* The ordered path makes the small commitment visible without turning the card into a checkout flow. */
.gc-wizard-head { padding: 17px 22px 15px; border-bottom: 1px solid var(--v2-line); background: rgba(255, 255, 255, .94); }
.gc-wizard-steps { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin: 0; padding: 0; list-style: none; }
.gc-wizard-steps::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 32px;
  right: 32px;
  height: 1px;
  background: var(--v2-line);
}
.gc-wizard[data-step="2"] .gc-wizard-steps::before { background: var(--gcw-blue-line); }
.gc-wizard-steps li { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; min-width: 0; color: #6b7088; }
.gc-wizard-steps li:last-child { justify-self: end; }
.gc-wizard-steps li > span {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid #c9cdda;
  border-radius: 50%;
  background: #fff;
  font: 600 12px/1 var(--font-display);
  color: #6b7088;
}
.gc-wizard-steps li p { display: grid; gap: 1px; margin: 0; background: #fff; }
.gc-wizard-steps li b { font: 600 13.5px/1.3 var(--font-display); color: inherit; }
.gc-wizard-steps li small { font: 400 11.5px/1.3 var(--font-body); color: #6b7088; }
.gc-wizard[data-step="1"] .gc-wizard-step-one,
.gc-wizard[data-step="2"] .gc-wizard-step-two { color: var(--blue); }
.gc-wizard[data-step="1"] .gc-wizard-step-one > span,
.gc-wizard[data-step="2"] .gc-wizard-step-two > span { border-color: var(--blue); background: var(--blue); color: #fff; box-shadow: 0 0 0 5px var(--gcw-blue-soft); }
.gc-wizard[data-step="2"] .gc-wizard-step-one > span { border-color: var(--blue); background: var(--gcw-blue-soft); color: var(--blue); font-size: 0; }
.gc-wizard[data-step="2"] .gc-wizard-step-one > span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 4px;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translate(-50%, -50%) rotate(-45deg);
  transform-origin: center;
}

/* Step one */
.gc-wizard-inputs { gap: 18px; padding: 24px; }
.gc-wizard-intro { display: grid; gap: 5px; }
.gc-wizard-intro h2 { max-width: 22ch; font: 500 23px/1.18 var(--font-serif); letter-spacing: -.012em; color: var(--ink); text-wrap: balance; }
.gc-wizard-intro p { font: 400 13.5px/1.5 var(--font-body); color: var(--v2-body); }
.gc-wizard .gc-field { gap: 7px; }
.gc-wizard .gc-field label { font-size: 13px; }
.gc-wizard .gc-field input,
.gc-wizard .gc-field select,
.gc-wizard .gc-field textarea {
  min-height: 48px;
  padding: 11px 13px;
  border-radius: 12px;
  background-color: var(--gcw-field);
  box-shadow: inset 0 0 0 1px rgba(15, 13, 25, .14), 0 1px 2px rgba(15, 13, 25, .03);
  font-size: 15px;
}
.gc-wizard .gc-field input:hover,
.gc-wizard .gc-field select:hover,
.gc-wizard .gc-field textarea:hover { background-color: #fff; box-shadow: inset 0 0 0 1px rgba(15, 13, 25, .28), 0 3px 10px -7px rgba(15, 13, 25, .3); }
.gc-wizard .gc-t-send { width: 100%; min-height: 52px; justify-content: center; padding: 13px 22px; box-shadow: 0 12px 24px -16px rgba(15, 13, 25, .7); }
.gc-wizard .gc-t-send:hover, .gc-wizard .gc-submit .btn:hover { transform: translateY(-1px); box-shadow: 0 16px 28px -17px rgba(15, 13, 25, .72); }
.gc-wizard .gc-t-send:active, .gc-wizard .gc-submit .btn:active { transform: translateY(0); }
.gc-wizard .gc-t-fine { display: flex; align-items: center; justify-content: center; gap: 7px; color: #5b6076; text-align: center; }
.gc-wizard .gc-t-fine span { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #e6f7ef; color: #087a50; font: 700 10px/1 var(--font-display); }

/* Step two */
.gc-wizard-result { display: grid; gap: 12px; padding: 18px 20px 20px; }
.gc-wizard-answer { display: grid; gap: 10px; padding: 0 !important; }
.gc-wizard-result-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.gc-wizard-result-bar p { font: 600 12.5px/1.4 var(--font-display); color: var(--blue); }
.gc-wizard-result-bar button {
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--v2-line);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  font: 500 12.5px/1.4 var(--font-display);
  color: var(--ink);
  transition: border-color .2s var(--ease-out), background .2s var(--ease-out), transform .2s var(--ease-out);
}
.gc-wizard-result-bar button:hover { border-color: #b9c6ee; background: var(--gcw-blue-soft); transform: translateY(-1px); }
.gc-wizard-result-bar button:active { transform: translateY(0); }
.gc-wizard-result-bar button:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.gc-wizard .gc-answer {
  padding: 17px 19px 18px;
  border: 1px solid var(--gcw-blue-line);
  border-radius: 16px;
  background: var(--gcw-blue-soft);
  color: var(--ink);
  box-shadow: 0 14px 28px -26px rgba(0, 61, 255, .6);
}
.gc-wizard .gc-answer::after { display: none; }
.gc-wizard .gc-answer-n { font-size: clamp(29px, 3vw, 39px); line-height: 1.06; color: var(--ink); }
.gc-wizard .gc-answer-p { max-width: none; margin-top: 9px; font-size: 13.5px; line-height: 1.52; color: #38405a; }
.gc-wizard .gc-answer:focus-within { box-shadow: 0 14px 28px -26px rgba(0, 61, 255, .6); }

.gc-wizard-more { overflow: hidden; border: 1px solid var(--v2-line); border-radius: 13px; background: #fff; }
.gc-wizard-more summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 8px 14px; cursor: pointer; list-style: none; font: 500 13px/1.4 var(--font-display); color: var(--ink); }
.gc-wizard-more summary::-webkit-details-marker { display: none; }
.gc-wizard-more summary::after { content: "+"; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--gcw-blue-soft); font: 500 16px/1 var(--font-display); color: var(--blue); transition: transform .24s var(--ease-out); }
.gc-wizard-more[open] summary::after { transform: rotate(45deg); }
.gc-wizard-more summary:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }
.gc-wizard-more > div { display: grid; gap: 11px; padding: 0 14px 15px; border-top: 1px solid var(--v2-line); }
.gc-wizard .gc-cards { display: grid; grid-template-columns: 1fr; gap: 0; padding-top: 3px; }
.gc-wizard .gc-card { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--v2-line); border-radius: 0; background: transparent; box-shadow: none; }
.gc-wizard .gc-card-l { font-size: 12px; }
.gc-wizard .gc-card-n { font-size: 16px; text-align: right; }
.gc-wizard-more p { font: 400 13px/1.55 var(--font-body); color: var(--v2-body); }

/* The ask is deliberately framed as optional: reciprocity first, then one clear continuation. */
.gc-wizard .gc-lead { display: block; padding: 14px 0 0; border-top: 1px solid var(--v2-line); border-radius: 0; background: transparent; }
.gc-wizard .gc-lead-copy { display: grid; grid-template-columns: minmax(170px, .82fr) minmax(0, 1.18fr); gap: 6px 18px; align-items: start; }
.gc-wizard .gc-lead-eyebrow { display: flex; align-items: center; gap: 7px; margin: 0 0 5px; font: 600 12px/1.4 var(--font-display); color: var(--blue); }
.gc-wizard .gc-lead-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px var(--gcw-blue-soft); }
.gc-wizard .gc-lead-h { font-size: clamp(21px, 2vw, 24px); line-height: 1.14; }
.gc-wizard .gc-lead-body { display: grid; gap: 10px; }
.gc-wizard .gc-lead-p { margin: 0; font-size: 13.5px; line-height: 1.5; }
.gc-wizard .gc-lead-privacy { margin: 0; font-size: 12px; line-height: 1.45; color: #5b6076; }
.gc-wizard .gc-fields { grid-template-columns: 1fr 1fr; gap: 10px 12px; margin-top: 12px; }
.gc-wizard .gc-field:has(#gc-locations) { grid-column: 1; }
.gc-wizard .gc-lead--no-note .gc-field:has(#gc-locations) { grid-column: 1 / -1; }
.gc-wizard .gc-lead-extra { grid-column: 2; align-self: end; }
.gc-wizard .gc-lead-extra summary { display: flex; align-items: center; min-height: 48px; cursor: pointer; list-style: none; font: 500 12.5px/1.4 var(--font-display); color: var(--ink); }
.gc-wizard .gc-lead-extra summary::-webkit-details-marker { display: none; }
.gc-wizard .gc-lead-extra summary::before { content: "+"; display: grid; place-items: center; width: 20px; height: 20px; margin-right: 7px; border-radius: 50%; background: var(--gcw-blue-soft); color: var(--blue); transition: transform .2s var(--ease-out); }
.gc-wizard .gc-lead-extra[open] { grid-column: 1 / -1; }
.gc-wizard .gc-lead-extra[open] summary::before { transform: rotate(45deg); }
.gc-wizard .gc-lead-extra summary span { margin-left: 5px; color: #6b7088; font-weight: 400; }
.gc-wizard .gc-check, .gc-wizard .gc-submit, .gc-wizard .gc-fail { grid-column: 1 / -1; }
.gc-wizard .gc-submit .btn { width: 100%; min-height: 50px; justify-content: center; padding: 12px 20px; box-shadow: 0 12px 24px -16px rgba(15, 13, 25, .7); }
.gc-wizard .gc-done { padding: 18px 0 4px; }

@media (prefers-reduced-motion: no-preference) {
  .gc-wizard-result:not([hidden]), .gc-wizard-inputs:not([hidden]) { animation: gcw-enter .38s var(--ease-out) both; }
  @keyframes gcw-enter {
    from { opacity: 0; transform: translateY(8px); filter: blur(3px); }
    to { opacity: 1; transform: none; filter: none; }
  }
}

@media (max-width: 1099px) {
  .gc-wizard-grid { align-items: center; }
}

.gc-wizard-page .gc-gap-foot { margin-left: 56px; margin-right: 0; text-align: left; }

@media (max-width: 599px) {
  .gc-wizard { border-radius: 20px; }
  .gc-wizard-head { padding: 17px 16px 15px; }
  .gc-wizard-steps { gap: 14px; }
  .gc-wizard-steps::before { left: 28px; right: 28px; }
  .gc-wizard-steps li { gap: 8px; }
  .gc-wizard-steps li > span { width: 30px; height: 30px; }
  .gc-wizard-steps li b { font-size: 12.5px; }
  .gc-wizard-steps li small { font-size: 11px; }
  .gc-wizard-inputs, .gc-wizard-result { padding: 20px 16px; }
  .gc-wizard-intro h2 { font-size: 22px; }
  .gc-wizard .gc-t-two, .gc-wizard .gc-fields { grid-template-columns: 1fr; }
  .gc-wizard .gc-field label, .gc-wizard .gc-opt { font-size: 14px; }
  .gc-wizard .gc-field input, .gc-wizard .gc-field select, .gc-wizard .gc-field textarea { font-size: 16px; }
  .gc-wizard-result-bar button { min-height: 44px; }
  .gc-wizard .gc-answer { padding: 18px; }
  .gc-wizard .gc-answer-p { font-size: 14px; }
  .gc-wizard-more summary, .gc-wizard-more p { font-size: 14px; }
  .gc-wizard .gc-card-l { font-size: 13px; }
  .gc-wizard .gc-card-n { font-size: 16px; }
  .gc-wizard .gc-lead-copy { grid-template-columns: 1fr; gap: 9px; }
  .gc-wizard .gc-lead-eyebrow { font-size: 13px; }
  .gc-wizard .gc-lead-p, .gc-wizard .gc-lead-privacy { font-size: 14px; }
  .gc-wizard .gc-field:has(#gc-locations), .gc-wizard .gc-lead-extra { grid-column: 1; }
  .gc-wizard .gc-lead-extra summary { font-size: 14px; }
  .gc-wizard-page .gc-gap-foot { margin-left: 0; }
}

@media (max-width: 359px) {
  .gc-wizard-steps li p small { display: none; }
  .gc-wizard-steps li b { font-size: 11.5px; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .gc-wizard *, .gc-wizard *::before, .gc-wizard *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}