/* ==========================================================================
   /google-review-qr-code — the free QR code tool and the SEO page around it.
   Extends feature-v2.css (tokens, hero shell, .h, .sub, .head, .faq-*).
   Written 2026-09-05. Everything here is prefixed .gq- except the tool's own
   .gq-t-* controls, which live inside .gq-tool.
   ========================================================================== */

/* the hero: the tool card is taller than a moment mock, so the grid tips the
   other way from the shared hero and the copy column stays narrow. */
.gq-hero .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.gq-hero .hero-copy { padding-top: 12px; }
.gq-hero h1 { max-width: 13ch; }
.gq-hero .sub { max-width: 44ch; }

/* the one line under the h1 that the tool card cannot say for itself */
.gq-hero-line { margin-top: 22px; max-width: 42ch; padding-left: 15px; border-left: 3px solid var(--blue); font: 500 15px/1.6 var(--font-body); color: var(--ink); }

/* ---------- the tool ---------- */
.gq-tool { position: relative; z-index: 2; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--v2-line), 0 40px 80px -40px rgba(0, 61, 255, .32), 0 24px 48px -32px rgba(15, 13, 25, .3); overflow: hidden; text-align: left; }
.gq-tool [hidden] { display: none !important; }
.gq-t-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 14px 18px; border-bottom: 1px solid var(--v2-line); }
.gq-t-head b { font: 700 15px/1.3 var(--font-display); color: var(--ink); }
.gq-t-head span { padding: 4px 9px; border-radius: 6px; background: var(--ghost); font: 500 13px/1.3 var(--font-display); color: var(--blue); }
.gq-t-body { display: grid; gap: 14px; padding: 18px; }
.gq-t-field { display: grid; gap: 7px; min-width: 0; }
.gq-t-lab { font: 600 13px/1.3 var(--font-display); color: var(--ink); }

.gq-t-search { position: relative; display: flex; align-items: center; }
.gq-t-mag { position: absolute; left: 13px; width: 18px; height: 18px; fill: #6b7088; pointer-events: none; }
.gq-t-search input { width: 100%; min-width: 0; padding: 12px 40px 12px 39px; border: 0; border-radius: 12px; background: var(--v2-card); box-shadow: inset 0 0 0 1px var(--v2-line); font: 400 15px/1.4 var(--font-body); color: var(--ink); }
.gq-t-search input::placeholder { color: #6b7088; }
.gq-t-search input:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.gq-t-in { width: 100%; min-width: 0; padding: 12px 14px; border: 0; border-radius: 12px; background: var(--v2-card); box-shadow: inset 0 0 0 1px var(--v2-line); font: 400 15px/1.4 var(--font-body); color: var(--ink); }
.gq-t-in::placeholder { color: #6b7088; }
.gq-t-in:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.gq-t-in.is-bad, .gq-t-search input.is-bad { box-shadow: inset 0 0 0 1px #c9214b; }

/* the spinner is a ring, and it only exists while a request is out */
.gq-t-spin { position: absolute; right: 13px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #dfe5ff; border-top-color: var(--blue); opacity: 0; }
.gq-tool.is-busy .gq-t-spin { opacity: 1; }
@media (prefers-reduced-motion: no-preference) { .gq-tool.is-busy .gq-t-spin { animation: gq-spin .7s linear infinite; } }
@keyframes gq-spin { to { transform: rotate(360deg); } }

/* the results list flows in the card rather than floating, because the hero clips overflow */
.gq-t-results { display: grid; gap: 4px; margin-top: 2px; padding: 4px; border-radius: 12px; background: var(--v2-card); box-shadow: inset 0 0 0 1px var(--v2-line); }
.gq-t-opt { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 9px 11px; border-radius: 9px; background: #fff; cursor: pointer; }
.gq-t-opt b { min-width: 0; font: 600 13.5px/1.35 var(--font-display); color: var(--ink); overflow-wrap: anywhere; }
.gq-t-opt small { grid-column: 1; font: 400 13px/1.4 var(--font-body); color: #6b7088; overflow-wrap: anywhere; }
.gq-t-opt em { grid-row: 1; grid-column: 2; font-style: normal; font: 600 13px/1.3 var(--font-display); color: var(--ink); white-space: nowrap; }
.gq-t-opt em i { font-style: normal; color: #f5a623; }
.gq-t-opt.is-on, .gq-t-opt:hover { background: #eef2ff; box-shadow: inset 0 0 0 1px rgba(0, 61, 255, .18); }
.gq-t-msg { font: 400 13px/1.45 var(--font-body); color: #6b7088; }
.gq-t-msg:empty { display: none; }

.gq-t-picked { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 11px 13px; border-radius: 12px; background: #eef2ff; box-shadow: inset 0 0 0 1px rgba(0, 61, 255, .18); }
.gq-t-tick { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); color: #fff; font: 700 13px/1 var(--font-display); }
.gq-t-pmeta { min-width: 0; }
.gq-t-pmeta b { display: block; font: 600 13.5px/1.35 var(--font-display); color: var(--ink); overflow-wrap: anywhere; }
.gq-t-pmeta small { display: block; font: 400 13px/1.4 var(--font-body); color: var(--v2-body); overflow-wrap: anywhere; }
.gq-t-change { padding: 6px 11px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--v2-line); font: 600 13px/1.3 var(--font-display); color: var(--blue); }
.gq-t-change:hover { background: var(--ghost); }

.gq-t-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gq-t-captcha:empty { display: none; }

.gq-t-send { width: 100%; }
.gq-t-send[disabled] { background: #e4e6ef; color: #565b70; cursor: default; }
.gq-t-send[disabled]:hover { background: #e4e6ef; }
.gq-tool.is-sending .gq-t-send { background: #26233a; color: #fff; cursor: progress; }

.gq-t-alert { padding: 11px 13px; border-radius: 12px; font: 400 13.5px/1.5 var(--font-body); }
.gq-t-alert.is-good { background: #ddf7ea; color: #0a6b48; }
.gq-t-alert.is-bad { background: #fdeaef; color: #a5163b; }
.gq-t-alert b { font-weight: 700; }
.gq-t-fine { font: 400 13px/1.5 var(--font-body); color: #5b6076; }

/* the shared strip sizes on height alone; Frenchies is a wide mark and needs a width cap too */
.gq-page .v2-logos img { max-width: 132px; }

/* ==========================================================================
   THE DEVICE: a three-stage sequence
   One email, two attachments, and the page they open. Each step is display:
   contents, so the three labels share a row, the three sentences share a row
   and the three screens share a row with align-self:end. That is what puts the
   square PNG, the A4 sheet and the phone page on one baseline without any of
   them being scaled to a common box: the shapes stay honest and the eye still
   reads left to right. The connector is drawn on the label row and bridges the
   grid gap, so it stops at the last step rather than dangling.
   ========================================================================== */
.gq-get-sec { padding-top: 0 !important; }
.gq-seq {
  --gq-gap: clamp(20px, 2.6vw, 34px);
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.16fr) minmax(0, .92fr);
  column-gap: var(--gq-gap);
  row-gap: 12px;
  align-items: start;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gq-step { display: contents; }
.gq-seq > .gq-step:nth-child(1) > * { grid-column: 1; }
.gq-seq > .gq-step:nth-child(2) > * { grid-column: 2; }
.gq-seq > .gq-step:nth-child(3) > * { grid-column: 3; }
.gq-step > .gq-step-h { grid-row: 1; }
.gq-step > p { grid-row: 2; }
.gq-step > .gq-step-art { grid-row: 3; align-self: end; }

.gq-step-h { position: relative; display: flex; align-items: center; gap: 11px; min-height: 28px; }
.gq-step-h::after {
  content: "";
  position: absolute; top: 13px; left: calc(100% + 10px);
  width: calc(var(--gq-gap) - 20px); height: 2px;
  border-radius: 2px; background: var(--v2-line);
}
.gq-seq > .gq-step:last-child .gq-step-h::after { display: none; }
.gq-step-n { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ghost); font: 700 14px/1 var(--font-display); color: var(--blue); }
.gq-step-h h3 { font: 700 17px/1.3 var(--font-display); letter-spacing: -.01em; color: var(--ink); text-wrap: pretty; }
.gq-step > p { margin: 0; font: 400 14.5px/1.6 var(--font-body); color: var(--v2-body); text-wrap: pretty; }
.gq-step > p b { color: var(--ink); font-weight: 600; }
.gq-step-art { display: grid; justify-items: center; gap: 12px; margin-top: 8px; width: 100%; }

.gq-mock { width: 100%; padding: 16px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--v2-line); }
.gq-mock--qr { display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: center; }
.gq-mqr { width: 76px; height: 76px; }
.gq-qr { display: block; width: 100%; height: 100%; }
.gq-mqr-meta { min-width: 0; }
.gq-file { display: inline-block; margin-bottom: 6px; padding: 3px 8px; border-radius: 6px; background: var(--ghost); font: 700 13px/1.3 var(--font-display); letter-spacing: .04em; color: var(--blue); }
.gq-mqr-meta b { display: block; font: 600 13px/1.4 var(--font-display); color: var(--ink); overflow-wrap: anywhere; }
.gq-mqr-meta small { display: block; margin-top: 3px; font: 400 13px/1.4 var(--font-body); color: #5b6076; }

/* the review page: the template's own colours (ReviewRequest.js / reviewShared.js THEME), not the darker ones the
   first draft used. Green #2e7d32 solid, the fallback outlined on #d6d9de in that green, the safety valve outlined
   on #ececf0 in #e63d3d. Body copy #5f6b6b, which measures 5.63:1 on white. */
.gq-mock--rp { display: grid; }
.gq-rp { padding: 18px 16px; border-radius: 12px; background: #f2f3f5; text-align: center; }
.gq-rp-biz { font: 700 14px/1.3 var(--font-display); color: #1b1d1e; }
.gq-rp-q { margin-top: 8px; font: 700 15px/1.35 var(--font-display); color: #1b1d1e; }
.gq-rp-b { margin-top: 9px; padding: 11px 12px; border-radius: 10px; font: 600 13px/1.35 var(--font-display); }
.gq-rp-b--g { background: #2e7d32; color: #fff; }
.gq-rp-b--o { background: #fff; box-shadow: inset 0 0 0 1px #d6d9de; color: #2e7d32; }
.gq-rp-b--r { background: #fff; box-shadow: inset 0 0 0 1px #ececf0; color: #e63d3d; }
.gq-rp-rule { margin-top: 16px; border-top: 1px solid #ececf0; }
.gq-rp-note { margin-top: 12px; font: 400 13px/1.45 var(--font-body); color: #5f6b6b; }

/* the A4 sheet: the real PDF's layout and its real wording (pdfService.js:88-120) */
.gq-a4 { width: 100%; max-width: 320px; aspect-ratio: 1 / 1.414; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 24px 20px; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px var(--v2-line), 0 30px 60px -30px rgba(15, 13, 25, .4); text-align: center; }
.gq-a4-h { font: 700 clamp(18px, 2vw, 22px)/1.2 var(--font-display); letter-spacing: -.01em; color: var(--ink); }
.gq-a4-s { font: 400 13px/1.45 var(--font-body); color: var(--v2-body); }
.gq-a4-s:first-of-type { margin-top: 6px; }
.gq-a4-qr { width: min(58%, 150px); margin: 12px 0 6px; }
.gq-a4-stars { font-size: 16px; line-height: 1; letter-spacing: 3px; color: #f5a623; }
.gq-a4-biz { margin-top: 12px; font: 700 16px/1.25 var(--font-display); color: var(--ink); overflow-wrap: anywhere; }
.gq-a4-scan { margin-top: 8px; font: 400 13px/1.4 var(--font-body); color: var(--v2-body); }
.gq-a4-marks { display: flex; gap: 12px; margin-top: 10px; }
.gq-a4-marks i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 13px/1 var(--font-display); font-style: normal; }
.gq-g { background: #fff; box-shadow: 0 0 0 1px var(--v2-line); }
.gq-c { background: var(--blue); color: #fff; } /* the Cloutly meteor is currentColor: white on blue */
.gq-a4-marks .icon { width: 15px; height: 15px; }
.gq-a4-cap { font: 500 13px/1.3 var(--font-display); color: #5b6076; }

.gq-seq-foot { max-width: 70ch; margin: clamp(30px, 3.4vw, 44px) auto 0; font: 400 16px/1.6 var(--font-body); color: var(--v2-body); text-align: center; text-wrap: pretty; }

/* ---------- the two text bands ---------- */
.gq-why-sec { padding-top: clamp(48px, 5vw, 72px) !important; padding-bottom: clamp(40px, 5vw, 64px) !important; }
.gq-why { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.gq-why .h { font-size: clamp(28px, 3.2vw, 40px); }
.gq-why-body .sub { margin-top: 0; }
.gq-why-body .sub + .sub { margin-top: 14px; }

/* the figure band: a tinted panel, so it reads as a different device from the split above it */
.gq-stat-sec { padding-top: 0 !important; }
.gq-stat-panel { max-width: 820px; margin-inline: auto; padding: clamp(36px, 5vw, 56px) clamp(24px, 4vw, 48px); border-radius: 22px; background: var(--v2-card); box-shadow: inset 0 0 0 1px var(--v2-line); text-align: center; }
.gq-stat { font-size: clamp(30px, 4.2vw, 48px); }
.gq-stat-p { max-width: 56ch; margin-inline: auto; }
.gq-src { margin-top: 20px; font: 400 13px/1.5 var(--font-body); color: #6b7088; }

/* ---------- the uses: a plain list with an icon each ---------- */
.gq-uses { display: grid; gap: 4px; max-width: 860px; margin-inline: auto; border-top: 1px solid var(--v2-line); }
.gq-uses li { display: grid; grid-template-columns: 44px 1fr; gap: 18px; align-items: start; padding: 26px 0; border-bottom: 1px solid var(--v2-line); }
.gq-use-i { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--ghost); }
.gq-use-i .icon { width: 22px; height: 22px; color: var(--blue); }
.gq-uses h3 { font: 700 18px/1.3 var(--font-display); letter-spacing: -.01em; color: var(--ink); }
.gq-uses p { margin-top: 7px; max-width: 62ch; font: 400 15px/1.6 var(--font-body); color: var(--v2-body); text-wrap: pretty; }
.gq-many { max-width: 860px; margin: 28px auto 0; padding: 20px 22px; border-radius: 16px; background: var(--v2-card); box-shadow: inset 0 0 0 1px var(--v2-line); font: 400 15px/1.6 var(--font-body); color: var(--v2-body); }

/* ---------- the old way ---------- */
.gq-old-sec { padding-top: 0 !important; }
.gq-old { counter-reset: gq; display: grid; gap: 2px; margin-top: 32px; padding: 0; }
.gq-old li { counter-increment: gq; display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: baseline; padding: 15px 0; border-top: 1px solid var(--v2-line); font: 400 15px/1.6 var(--font-body); color: var(--v2-body); }
.gq-old li::before { content: counter(gq); font: 700 15px/1.6 var(--font-display); color: var(--blue); font-variant-numeric: tabular-nums; }
.gq-old code { display: inline-block; padding: 2px 6px; border-radius: 6px; background: var(--v2-card); box-shadow: inset 0 0 0 1px var(--v2-line); font: 400 13.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ink); overflow-wrap: anywhere; }
.gq-old-note { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--v2-line); font: 400 15px/1.6 var(--font-body); color: var(--ink); }

.gq-faq-sec { padding-top: 0 !important; }

/* ---------- breakpoints ---------- */
@media (max-width: 991px) {
  .gq-why { grid-template-columns: 1fr; gap: 20px; }
  .gq-hero .hero-grid { grid-template-columns: 1fr; }
  .gq-hero .hero-copy { padding-top: 0; }
  .gq-hero h1 { max-width: 15ch; }
  .gq-hero-line { margin-inline: auto; }
  .gq-tool { max-width: 520px; margin: 8px auto 0; }
  /* two up, then one: the poster keeps the wide slot because it is the tallest artefact.
     The shared baseline is dropped here: at two per row it leaves a 380px hole under the
     small PNG tile, which reads as a bug rather than as alignment. */
  .gq-seq { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .gq-step > .gq-step-art { align-self: start; }
  .gq-seq > .gq-step:nth-child(3) > * { grid-column: 1 / -1; }
  .gq-seq > .gq-step:nth-child(3) > .gq-step-h { grid-row: 4; margin-top: 18px; }
  .gq-seq > .gq-step:nth-child(3) > p { grid-row: 5; }
  .gq-seq > .gq-step:nth-child(3) > .gq-step-art { grid-row: 6; }
  .gq-seq > .gq-step:nth-child(2) .gq-step-h::after { display: none; }
  .gq-seq > .gq-step:nth-child(3) .gq-step-art { max-width: 420px; margin-inline: auto; }
}
@media (max-width: 767px) {
  .gq-seq { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .gq-seq > .gq-step > * { grid-column: 1 !important; }
  .gq-seq > .gq-step:nth-child(1) > .gq-step-h { grid-row: 1; }
  .gq-seq > .gq-step:nth-child(1) > p { grid-row: 2; }
  .gq-seq > .gq-step:nth-child(1) > .gq-step-art { grid-row: 3; }
  .gq-seq > .gq-step:nth-child(2) > .gq-step-h { grid-row: 4; margin-top: 26px; }
  .gq-seq > .gq-step:nth-child(2) > p { grid-row: 5; }
  .gq-seq > .gq-step:nth-child(2) > .gq-step-art { grid-row: 6; }
  .gq-seq > .gq-step:nth-child(3) > .gq-step-h { grid-row: 7; margin-top: 26px; }
  .gq-seq > .gq-step:nth-child(3) > p { grid-row: 8; }
  .gq-seq > .gq-step:nth-child(3) > .gq-step-art { grid-row: 9; max-width: none; }
  .gq-step-h::after { display: none !important; }
  .gq-uses li { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 479px) {
  .gq-t-two { grid-template-columns: 1fr; }
  .gq-mock--qr { grid-template-columns: 72px 1fr; gap: 13px; }
  .gq-mqr { width: 72px; height: 72px; }
  .gq-a4 { padding: 20px 16px; }
  .gq-many { padding: 18px; }
}

/* static states for reduced motion and for ?ix=off captures */
.no-motion .gq-t-spin { animation: none; }