/* The free Google review QR code (spec 2026-10-11), on top of home.css and
   reviews-check.css: the same card, field, error and question styles as the
   reviews check. Phone first, one column. Class names start rq-. */
.rq [hidden]{display:none !important}
.rq-sr{position:absolute;inline-size:1px;block-size:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.rq-tool{display:flex;flex-direction:column;gap:1rem}
.rq button{font-family:inherit;cursor:pointer}
.rq button.btn{border:0}
.rq button.btn-ghost,.rq a.btn-ghost{border:1.5px solid #d9d4c8}
.rq button:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.rq-centre{text-align:center}

/* The shop search: an ARIA 1.2 combobox. The list floats over the page, so
   opening it never moves anything under the field. */
.rq-combo{position:relative}
.rq-combo input{padding-inline-end:2.75rem}
.rq-combo[data-busy]::after{content:"";position:absolute;inset-inline-end:0.9rem;inset-block-start:1.625rem;inline-size:1.1rem;block-size:1.1rem;margin-block-start:-0.55rem;border:2.5px solid #e6e1d6;border-block-start-color:var(--accent);border-radius:50%;animation:rq-spin 0.8s linear infinite}
@keyframes rq-spin{to{transform:rotate(360deg)}}
.rq-pop{position:absolute;inset-inline:0;inset-block-start:calc(100% + 0.375rem);z-index:10;background:#fff;border:1px solid var(--line);border-radius:0.75rem;box-shadow:0 14px 30px rgba(20,22,15,0.14);overflow:hidden}
.rq-pop ul{list-style:none;margin:0;padding:0}
.rq-opt{display:flex;flex-direction:column;justify-content:center;min-block-size:3rem;padding:0.625rem 0.875rem;border-block-start:1px solid var(--line);cursor:pointer;overflow-wrap:anywhere}
.rq-opt:first-child{border-block-start:0}
.rq-opt strong{font-weight:700}
.rq-opt span{font-size:0.875rem;color:var(--muted)}
.rq-opt:hover{background:#fbf6ee}
/* Focus stays in the field (aria-activedescendant), so the active option
   carries its own strong mark. */
.rq-opt[aria-selected="true"]{background:var(--accent-soft);box-shadow:inset 4px 0 0 var(--accent)}
.rq-opt.rq-none{flex-direction:row;align-items:center;justify-content:flex-start;font-weight:700;color:var(--accent-ink)}
/* Google Maps attribution (Places policies): 12–16 px, #5E5E5E, unwrapped,
   in the same container as the results. */
.rq-maps{margin:0;font-family:Roboto,Arial,sans-serif;font-size:12px;line-height:1.4;color:#5e5e5e;white-space:nowrap}
.rq-pop .rq-maps{padding:0.375rem 0.875rem 0.5rem;border-block-start:1px solid var(--line);text-align:end}
.rq-help{font-size:0.875rem;color:var(--muted)}
.rq-text{align-self:flex-start;min-block-size:2.75rem;padding:0;border:0;background:none;font:inherit;font-weight:700;color:var(--accent-ink);text-align:start;text-decoration:underline;text-underline-offset:3px}

/* Cards: not found, paste, result. */
.rq-card{padding:1.25rem;background:var(--card);border:1px solid var(--line);border-radius:1.25rem;display:flex;flex-direction:column;gap:0.75rem;min-inline-size:0}
.rq-card h2{font-size:1.375rem;line-height:1.2}
/* Focus moves to these headings by script, so screen readers read the new
   state. They aren't controls (tabindex -1), and typing in the search first
   makes browsers draw a keyboard ring even after a tap, so draw none. */
.rq-card h2[tabindex="-1"]:focus{outline:none}
.rq-card h3{font-size:1.0625rem;line-height:1.3;margin-block-start:0.75rem}
.rq-card a:not(.btn){color:var(--accent-ink)}
.rq-tip{font-size:0.9375rem;color:var(--ink-soft)}
.rq-nf .btn{margin-block-start:0.25rem}
.rq-paste-form{display:flex;flex-direction:column;gap:0.6rem}
.rq-paste-form label{font-weight:700}
.rq input[type="url"],.rq-copy input{inline-size:100%;min-block-size:3rem;padding:0 0.875rem;border:1.5px solid #d9d4c8;border-radius:0.75rem;font:inherit;font-size:1rem;color:var(--ink);background:#fff}
.rq input[type="url"]:focus-visible,.rq-copy input:focus-visible{outline:3px solid var(--ink);outline-offset:2px;border-color:var(--accent)}

/* The result. */
.rq-result{box-shadow:0 20px 50px rgba(20,22,15,0.06)}
.rq-head{display:flex;flex-direction:column;gap:0.25rem;padding-block-end:0.75rem;border-block-end:1px solid var(--line)}
.rq-head h2{overflow-wrap:anywhere}
.rq-tick{color:var(--ok)}
.rq-where{display:flex;flex-wrap:wrap;align-items:baseline;gap:0.25rem 0.75rem;color:var(--muted);font-size:0.9375rem}
.rq-copy{display:flex;gap:0.5rem}
.rq-copy input{flex:1;min-inline-size:0;font-size:0.9375rem;background:#faf8f3;text-overflow:ellipsis}
.rq-copy .btn{flex:none;min-block-size:3rem;min-inline-size:7.5rem}
.rq-qr{inline-size:15rem;block-size:15rem;max-inline-size:100%;align-self:center;background:#fff;border:1px solid var(--line);border-radius:0.5rem;-webkit-touch-callout:default}
.rq-press{text-align:center}
.rq-dls{display:flex;flex-direction:column;gap:0.875rem}
.rq-dl{display:flex;flex-direction:column;gap:0.3rem}
.rq-dl .btn{align-self:stretch;min-block-size:3rem;font-size:1rem}
.rq-mob{display:flex;flex-direction:column;gap:0.6rem}
.rq-mob .btn{align-self:stretch;min-block-size:3rem;font-size:1rem}
.rq-desk{display:none}
/* A computer with a mouse scans the screen with a phone; a phone opens the
   link itself. The width guard keeps a phone that misreports its pointer on
   the phone wording; on a narrow computer window "Test my link" works too. */
@media (hover:hover) and (pointer:fine) and (min-width:48rem){
  .rq-desk{display:block}
  .rq-mob,.rq-press{display:none}
}
.rq-ask{display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem 0.625rem}
.rq-ask p{inline-size:100%;font-weight:700}
.rq-ask .btn{min-inline-size:6rem;min-block-size:2.75rem;font-size:1rem}
.rq-said{padding:0.75rem 0.875rem;border-radius:0.75rem;background:#f1eee7;color:var(--ink-soft);font-weight:600}
.rq-said.rq-good{background:var(--ok-soft);color:var(--ok)}

/* The $49 counter stand (phase C): short, under the free QR code and its
   test, above the free review page. The preview is the sign itself, at most
   240 px wide, on a soft stage like the sample pages'. The person-check slot
   is always in the flow, so the check loading never moves the button. */
.rq-stand{display:flex;flex-direction:column;gap:0.75rem;min-inline-size:0;margin-block-start:0.75rem;padding-block-start:1.25rem;border-block-start:1px solid var(--line)}
.rq-card .rq-stand h3{margin:0}
.rq-stand-sub{color:var(--ink-soft)}
/* Their stand on a real counter (operator, 2026-10-12): the owner Stand
   tab's photo, cropped to its middle (70% wide, 75% tall, from 15%/15%) so
   the stand fills the frame, with the live preview printed into the
   holder's white insert (the Stand tab's measured box, 27.04/23.63/45.93/
   56.07% of the photo, moved into the crop). Multiply makes it look printed. */
.rq-stand-stage{position:relative;inline-size:100%;max-inline-size:22rem;margin-inline:auto;aspect-ratio:560/750;overflow:hidden;border-radius:1.125rem;background:#e9e2d8;box-shadow:0 10px 26px rgba(59,32,12,0.12)}
.rq-stand-photo{position:absolute;inset-inline-start:-21.43%;inset-block-start:-20%;inline-size:142.86%;max-inline-size:none;block-size:auto}
.rq-stand-shot{position:absolute;inset-inline-start:17.2%;inset-block-start:11.51%;inline-size:65.61%;block-size:74.76%;mix-blend-mode:multiply}
.rq-stand-shot svg{display:block;inline-size:100%;block-size:100%}
.rq-stand-form{display:flex;flex-direction:column;gap:0.6rem;min-inline-size:0}
.rq-stand-form label{font-weight:700}
.rq-stand-form input[type="text"]{inline-size:100%;min-block-size:3rem;padding:0 0.875rem;border:1.5px solid #d9d4c8;border-radius:0.75rem;font:inherit;font-size:1rem;color:var(--ink);background:#fff}
.rq-stand-form input[type="text"]:focus-visible{outline:3px solid var(--ink);outline-offset:2px;border-color:var(--accent)}
.rq-stand-form .rq-buy-go{align-self:stretch;white-space:normal;text-align:center}
.rq-stand-form .rq-buy-go[disabled]{opacity:0.75;cursor:progress}
.rq-human .cf-turnstile{max-inline-size:100%}
@media (min-width:48rem){
  .rq-stand{display:grid;grid-template-columns:17rem minmax(0,1fr);gap:0.75rem 1.75rem;align-items:start}
  .rq-stand h3,.rq-stand-sub{grid-column:1 / -1}
  .rq-stand-form{padding-block-start:0.25rem}
}

/* A guest's order page, after Stripe. A full-height column, so a short page
   never leaves an empty band under the footer. */
body.rq-order-page{display:flex;flex-direction:column;min-block-size:100vh;min-block-size:100svh}
.rq-order-page>main{flex:1 0 auto;inline-size:100%}
.rq-order .rq-card{margin-block-start:0.5rem}
.rq-order-what{font-size:0.875rem;font-weight:700;color:var(--muted)}
.rq-card .rq-order-title{font-size:1.625rem;line-height:1.2}
.rq-order-name{font-size:1.125rem;font-weight:800;overflow-wrap:anywhere}
.rq-order form .btn,.rq-order .rq-card>p>.btn{inline-size:100%;border:0;cursor:pointer;font-family:inherit}
.rq-order .rq-card>p>.btn-ghost{border:1.5px solid #d9d4c8}
@media (min-width:48rem){
  .rq-order form .btn,.rq-order .rq-card>p>.btn{inline-size:auto;min-inline-size:20rem}
}

/* The free review page offer: one component at both doors (2026-10-12). On
   the result it is the card's foot, a warm panel below the free QR code and
   its test, so it never competes with them. The not-found card is the offer. */
.rq-offer{display:flex;flex-direction:column;gap:0.875rem;min-inline-size:0}
.rq-result .rq-offer{margin:0.75rem -1.25rem -1.25rem;padding:1.5rem 1.25rem 1.375rem;border-block-start:1px solid #f3e4d3;border-radius:0 0 1.25rem 1.25rem;background:linear-gradient(180deg,#fff8f1,#fdf1e4)}
.rq-card .rq-offer-title{margin:0;font-size:1.375rem;line-height:1.2}
.rq-offer-sub,.rq-nf-lead{color:var(--ink-soft)}
.rq-chips{display:flex;flex-wrap:wrap;gap:0.375rem;margin:0;padding:0;list-style:none}
.rq-chips li{display:inline-flex;align-items:center;gap:0.375rem;padding:0.3125rem 0.625rem 0.3125rem 0.5rem;border:1px solid #efe2d2;border-radius:999px;background:#fff;font-size:0.8125rem;font-weight:700;line-height:1.3;color:var(--ink)}
.rq-chips svg{flex:none;inline-size:0.9375rem;block-size:0.9375rem;color:var(--accent)}

/* The library: one swipeable row on a phone (about 1.3 cards in view, so it
   reads as more), edge to edge inside its card. Only the row scrolls. */
.rq-shelf{display:flex;gap:0.75rem;margin:0.125rem -1.25rem 0;padding:0.5rem 1.25rem 0.625rem;list-style:none;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:1.25rem;scrollbar-width:thin;scrollbar-color:#e3d6c5 transparent}
.rq-s{flex:0 0 15.25rem;min-inline-size:0;scroll-snap-align:start}
.rq-card a.rq-sample{display:flex;flex-direction:column;gap:0.625rem;border-radius:1.25rem;color:var(--ink);text-decoration:none;-webkit-tap-highlight-color:transparent}
.rq-sample:focus-visible{outline:3px solid var(--ink);outline-offset:4px;border-radius:1.25rem}
/* The phone rises out of a soft stage in its shop's own colours. */
.rq-stage{position:relative;display:flex;justify-content:center;align-items:flex-end;padding-block-start:1.125rem;overflow:hidden;border-radius:1.125rem;background:radial-gradient(120% 80% at 50% 100%,rgba(255,255,255,0.75),rgba(255,255,255,0) 62%),linear-gradient(160deg,var(--s1),var(--s2));box-shadow:inset 0 0 0 1px rgba(20,22,15,0.05)}
.rq-s-nails{--s1:#fdeef3;--s2:#f6cfdc}
.rq-s-lash_brow{--s1:#f7eefa;--s2:#e6cdea}
.rq-s-hair{--s1:#e9f7f4;--s2:#bfe3dc}
.rq-stage img{inline-size:10.5rem;block-size:auto;transform-origin:50% 100%;filter:drop-shadow(0 14px 16px rgba(59,32,12,0.2)) drop-shadow(0 3px 5px rgba(59,32,12,0.14))}
.rq-zoom{position:absolute;inset-block-end:0.625rem;inset-inline-end:0.625rem;display:grid;place-items:center;inline-size:2.25rem;block-size:2.25rem;border-radius:50%;background:#fff;color:var(--ink);box-shadow:0 4px 12px rgba(20,22,15,0.16)}
.rq-zoom svg{inline-size:1.125rem;block-size:1.125rem}
.rq-cap{display:flex;align-items:center;padding-inline:0.125rem}
.rq-cap-text{font-weight:800;font-size:1rem;letter-spacing:-0.01em;white-space:nowrap}
/* One label for the whole row, like the share cards' "Sample page" tag. */
.rq-shelf-label{align-self:flex-start;margin-block-start:0.25rem;padding:0.1875rem 0.625rem;border-radius:999px;background:#18181b;color:#fff;font-size:0.75rem;font-weight:800;letter-spacing:0.02em}
.rq-offer .rq-go{align-self:stretch;margin-block-start:0.25rem}
.rq-offer .fine{margin-block-start:-0.375rem}
.rq-offer-g{font-size:0.875rem;color:var(--muted);text-align:center}
@media (hover:hover){
  .rq-sample:hover .rq-stage img{transform:scale(1.035)}
  .rq-sample:hover .rq-cap-text{text-decoration:underline;text-underline-offset:3px}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .rq-stage img{transition:transform 0.35s cubic-bezier(0.2,0.7,0.2,1)}
}

/* The quick look: full screen on a phone, a tall sheet on a computer. The
   page behind stays put (a modal <dialog> makes it inert). */
html:has(.rq-look[open]){overflow:hidden}
.rq-look{inline-size:100%;max-inline-size:100%;block-size:100%;max-block-size:100%;margin:0;padding:0;border:0;background:var(--bg);color:var(--ink)}
.rq-look[open]{display:flex;flex-direction:column}
.rq-look::backdrop{background:rgba(20,22,15,0.6)}
.rq-look-head{display:flex;align-items:center;gap:0.75rem;padding:0.5rem 0.5rem 0.5rem 1rem;background:var(--card);border-block-end:1px solid var(--line)}
.rq-look-head h2{flex:1;font-size:1.0625rem;line-height:1.3}
.rq-look-x{display:grid;place-items:center;inline-size:2.75rem;block-size:2.75rem;padding:0;border:0;border-radius:50%;background:#f1eee7;color:var(--ink)}
.rq-look-x svg{inline-size:1.25rem;block-size:1.25rem}
.rq-look-x:hover{background:#e7e2d7}
.rq-look .rq-look-x:focus-visible,.rq-look-body:focus-visible{outline:3px solid var(--ink);outline-offset:-3px}
.rq-look-body{flex:1;min-block-size:0;overflow-y:auto;overscroll-behavior:contain;padding:1rem}
.rq-look-body img{inline-size:100%;max-inline-size:24.375rem;block-size:auto;margin-inline:auto;border-radius:1rem;background:#f1eee7;box-shadow:0 12px 32px rgba(20,22,15,0.12)}
.rq-look-foot{display:flex;flex-direction:column;gap:0.375rem;padding:0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));background:var(--card);border-block-start:1px solid var(--line)}
.rq-look-foot .btn{align-self:stretch}
.rq-look a:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
@media (prefers-reduced-motion:no-preference){
  .rq-look[open]{animation:rq-rise 0.24s cubic-bezier(0.2,0.7,0.2,1)}
  .rq-look[open]::backdrop{animation:rq-fade 0.24s ease-out}
}
@keyframes rq-rise{from{opacity:0;transform:translateY(1.5rem)}to{opacity:1;transform:none}}
@keyframes rq-fade{from{opacity:0}to{opacity:1}}
@media (min-width:48rem){
  .rq-shelf{gap:0.625rem;margin-inline:0;padding-inline:0;overflow:visible;scroll-snap-type:none}
  .rq-s{flex:1 1 0}
  .rq-offer .rq-go{align-self:center;min-inline-size:20rem}
  .rq-look{inline-size:27rem;block-size:min(92vh,58rem);margin:auto;border-radius:1.25rem;overflow:hidden;box-shadow:0 30px 80px rgba(20,22,15,0.35)}
}

/* The explainer under the tool. */
.rq-explain{display:flex;flex-direction:column;gap:2rem;margin-block-start:1.5rem}
.rq-explain h2{font-size:1.5rem;line-height:1.2;margin-block-end:0.6rem}
.rq-explain p{color:var(--ink-soft)}
.rq-explain p+p,.rq-explain ul+p{margin-block-start:0.75rem}
.rq-explain ul{margin:0;padding-inline-start:1.25rem;color:var(--ink-soft);display:flex;flex-direction:column;gap:0.4rem}
.rq-explain a{color:var(--accent-ink)}
.rq-steps{margin-block-start:0.5rem}
.rq-legal{font-size:0.8125rem;color:var(--muted)}

/* Folded extras (SEO audit, 2026-10-12): "More questions" after the seven
   shown, and "Link to this tool" above the legal line. Each summary is a
   whole tappable row, at least 48 px tall, with a + that turns to −. */
.rq-more,.rq-cite{background:var(--card);border:1px solid var(--line);border-radius:1rem}
.rq-more>summary,.rq-cite>summary{display:flex;align-items:center;justify-content:space-between;gap:0.75rem;min-block-size:3rem;padding:0.5rem 1rem;border-radius:1rem;font-weight:700;font-size:1.0625rem;line-height:1.3;cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent}
.rq-more>summary::-webkit-details-marker,.rq-cite>summary::-webkit-details-marker{display:none}
.rq-more>summary::after,.rq-cite>summary::after{content:"+";flex:none;font-size:1.375rem;line-height:1;color:var(--accent-ink)}
.rq-more[open]>summary::after,.rq-cite[open]>summary::after{content:"\2212"}
.rq-more>summary:focus-visible,.rq-cite>summary:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.rq-more[open]>summary,.rq-cite[open]>summary{border-end-start-radius:0;border-end-end-radius:0}
@media (hover:hover){
  .rq-more>summary:hover,.rq-cite>summary:hover{background:#fbf6ee}
}
.rq-more-q{padding:0.875rem 1rem;border-block-start:1px solid var(--line)}
.rq-more-q h3{font-size:1.0625rem;margin-block-end:0.375rem}
.rq-more-q p{color:var(--ink-soft)}
.rq-more-q a{color:var(--accent-ink)}
/* Quieter than the questions: it is for the odd blogger, not the owner. */
.rq-cite{margin-block-start:0.5rem}
.rq-cite>summary{font-size:0.9375rem}
.rq-cite>p{padding:0.875rem 1rem 0;border-block-start:1px solid var(--line);color:var(--ink-soft);font-size:0.9375rem}
.rq-cite .rq-copy{padding:0.625rem 1rem 1rem}
.rq-cite .rq-copy input{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:0.8125rem}

@media (prefers-reduced-motion:reduce){
  .rq-combo[data-busy]::after{animation:none;border-color:var(--accent);border-inline-end-color:#e6e1d6}
}
@media (min-width:56rem){
  .rq-dls{flex-direction:row}
  .rq-dl{flex:1}
}