/* ==========================================================================
   review-calculator.css — /google-review-calculator.

   Loads after feature-v2.css (tokens, .h, .sub, .col, .col--narrow, .head, .btn, .v2-hero, .v2-logos) and home.css
   (.closing). The field language is borrowed from get-demo.css rather than invented twice: same white ground, same
   hairline, same 16px body type, same ink button.

   Colour commits late, the way every page here does. The hero and the two prose bands are white; the one saturated
   surface on the page is the answer panel, and it only exists after the visitor has asked for it.
   ========================================================================== */

/* --------------------------------------------------------------- the tool card */

.gc-tool { border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--v2-line), 0 40px 80px -44px rgba(0, 61, 255, .35), 0 24px 48px -36px rgba(15, 13, 25, .3); overflow: hidden; text-align: left; }
.gc-t-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; padding: 15px 22px; border-bottom: 1px solid var(--v2-line); }
.gc-t-head b { font: 600 14px/1.3 var(--font-display); color: var(--ink); }
.gc-t-head span { font: 400 13px/1.3 var(--font-body); color: #6b7088; }
.gc-t-body { display: grid; gap: 16px; padding: 22px; }
.gc-t-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.gc-field { display: grid; gap: 7px; margin: 0; min-width: 0; }
.gc-field label { font: 500 14px/1.4 var(--font-display); color: var(--ink); }
.gc-opt { margin-left: 6px; font: 400 13px/1.4 var(--font-body); color: #6b7088; }
.gc-field input, .gc-field select, .gc-field textarea {
  width: 100%; padding: 12px 14px; border: 0; border-radius: 12px; background: #fff;
  box-shadow: inset 0 0 0 1px rgba(15, 13, 25, .16);
  font: 400 16px/1.45 var(--font-body); color: var(--ink);
  transition: box-shadow .2s var(--ease-out);
}
.gc-field textarea { resize: vertical; min-height: 84px; }
.gc-field input::placeholder, .gc-field textarea::placeholder { color: #6b7088; }
.gc-field select {
  appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%230f0d19' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.gc-field input:focus-visible, .gc-field select:focus-visible, .gc-field textarea:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.gc-field input:hover, .gc-field select:hover, .gc-field textarea:hover { box-shadow: inset 0 0 0 1px rgba(15, 13, 25, .28); }
.gc-field .is-bad { box-shadow: inset 0 0 0 1.5px #c9184a; }
.gc-err { font: 400 13px/1.45 var(--font-body); color: #c9184a; }

.gc-t-send { justify-self: start; padding: 14px 26px; }
.gc-t-alert { font: 400 14px/1.5 var(--font-body); color: #c9184a; }
.gc-t-fine { font: 400 13px/1.5 var(--font-body); color: #5b6076; }

/* -------------------------------------------------------------- the answer band */

.gc-out-sec { padding: clamp(40px, 4.5vw, 64px) 0 !important; scroll-margin-top: 76px; background: #fff; }
.gc-out-sec[hidden] { display: none; }
.gc-out { display: grid; gap: clamp(20px, 2.2vw, 28px); }

.gc-answer { position: relative; padding: clamp(26px, 3vw, 38px); border-radius: 20px; color: #fff; overflow: hidden; isolation: isolate; background: linear-gradient(160deg, #c9184a, #e0244f); }
.gc-answer::after { content: ""; position: absolute; inset: 0; z-index: -1; background: url("../images/nnnoise-2.svg") 50% / 300px; opacity: .35; mix-blend-mode: soft-light; }
.gc-answer-n { font: 500 clamp(34px, 4.6vw, 58px)/1.04 var(--font-serif); letter-spacing: -.02em; text-wrap: balance; font-optical-sizing: auto; }
.gc-answer-p { max-width: 56ch; margin-top: 14px; font: 400 16.5px/1.55 var(--font-body); color: rgba(255, 255, 255, .93); }
.gc-answer-n:focus { outline: none; }
.gc-answer:focus-within { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .62); }

.gc-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 20px); }
.gc-card { display: grid; align-content: start; gap: 8px; padding: 22px; border-radius: 16px; background: var(--v2-card); box-shadow: inset 0 0 0 1px var(--v2-line); }
.gc-card-l { font: 600 12.5px/1.3 var(--font-display); color: #5b6076; }
.gc-card-n { font: 500 clamp(22px, 2.1vw, 27px)/1.15 var(--font-serif); letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
.gc-card-p { font: 400 15px/1.55 var(--font-body); color: var(--v2-body); }

/* the working: closed by default, because the answer is the point and the algebra is the receipt */
.gc-working { padding: 0 20px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--v2-line); }
.gc-working summary { padding: 16px 0; cursor: pointer; font: 500 15px/1.4 var(--font-display); color: var(--ink); }
.gc-working summary::marker { color: #6b7088; }
.gc-working summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.gc-working-body { padding-bottom: 20px; display: grid; gap: 14px; max-width: 74ch; }
.gc-working-body p { font: 400 15.5px/1.6 var(--font-body); color: var(--v2-body); }
.gc-working-body a { color: var(--blue); }
.gc-formula { padding: 14px 16px; border-radius: 12px; background: var(--v2-card); overflow-x: auto; }
.gc-formula code { font: 400 13.5px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }

.gc-product { max-width: 78ch; font: 400 16px/1.65 var(--font-body); color: var(--v2-body); }

/* ------------------------------------------------------------- the lead capture */

.gc-lead { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(24px, 3.4vw, 52px); align-items: start; padding: clamp(24px, 2.8vw, 34px); border-radius: 20px; background: var(--ghost); }
.gc-lead-h { font: 500 clamp(23px, 2.3vw, 30px)/1.2 var(--font-serif); letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
.gc-lead-p { margin-top: 12px; font: 400 15.5px/1.6 var(--font-body); color: var(--v2-body); }

.gc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
/* display: grid would otherwise beat the hidden attribute when the confirmation replaces the form */
.gc-fields[hidden], .gc-done[hidden], .gc-cal[hidden], .gc-done-cta[hidden], .gc-cards[hidden] { display: none; }
.gc-field--wide, .gc-check, .gc-submit, .gc-fail { grid-column: 1 / -1; }

/* the honeypot: off-screen for people, present for anything filling every input it finds */
.gc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* interaction-only Turnstile takes no room until Cloudflare asks for a challenge, so no reserved height */
.gc-check { margin-top: 2px; }
.gc-check:empty, .gc-check .cf-turnstile:empty { display: none; }
.gc-submit { display: flex; align-items: center; }
.gc-submit .btn { padding: 14px 26px; }
.gc-submit .btn[disabled] { opacity: .6; cursor: default; }
.gc-fail { font: 400 14px/1.5 var(--font-body); color: #c9184a; }

.gc-done-h { font: 500 clamp(21px, 2vw, 25px)/1.35 var(--font-serif); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.gc-done-p { margin-top: 10px; max-width: 52ch; font: 400 15.5px/1.55 var(--font-body); color: var(--v2-body); }
.gc-cal { margin: 18px -8px 0; }
.gc-cal .calendly-inline-widget { border-radius: 14px; overflow: hidden; }
.gc-done-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 22px; }
.gc-done-cta .btn { padding: 14px 26px; }
.gc-done-fine { font: 400 13.5px/1.4 var(--font-body); color: #5b6076; }
.gc-done-fine b { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------------------ the prose */

.gc-how { display: grid; gap: 16px; margin-top: 30px; }
.gc-how p { font: 400 16.5px/1.7 var(--font-body); color: var(--v2-body); }
.gc-how .gc-formula { margin: 4px 0; }

.gc-gap { display: grid; gap: clamp(20px, 2.2vw, 28px); margin: 0; padding: 0; counter-reset: gcgap; list-style: none; }
.gc-gap li { position: relative; padding: 0 0 clamp(20px, 2.2vw, 28px) 56px; border-bottom: 1px solid var(--v2-line); }
.gc-gap li:last-child { padding-bottom: 0; border-bottom: 0; }
.gc-gap li::before { counter-increment: gcgap; content: counter(gcgap); position: absolute; top: 2px; left: 0; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--ghost); font: 600 15px/1 var(--font-display); color: var(--blue); }
.gc-gap h3 { font: 500 clamp(20px, 1.9vw, 24px)/1.25 var(--font-serif); letter-spacing: -.012em; color: var(--ink); }
.gc-gap p { max-width: 72ch; margin-top: 10px; font: 400 16px/1.65 var(--font-body); color: var(--v2-body); }
.gc-gap-foot { max-width: 78ch; margin: clamp(28px, 3vw, 40px) auto 0; font: 400 16px/1.65 var(--font-body); color: var(--v2-body); text-align: center; }

.gc-faq-foot { margin-top: 28px; font: 400 15.5px/1.65 var(--font-body); color: var(--v2-body); }
.gc-faq-foot a, .gc-gap-foot a { color: var(--blue); }

/* ----------------------------------------------------------------- responsive */

@media (max-width: 1099px) {
  .gc-lead { grid-template-columns: 1fr; }
}
@media (max-width: 899px) {
  .gc-cards { grid-template-columns: 1fr; }
}
@media (max-width: 599px) {
  .gc-t-two, .gc-fields { grid-template-columns: 1fr; }
  .gc-gap li { padding-left: 0; }
  .gc-gap li::before { position: static; margin-bottom: 12px; }
}