/* /q/grow-sales/ — the Profit Score page (js/pages/gq-results.js).
   Purple band with the score card on it, then a paper body: summary rows
   and the guide introduction. No coloured text beyond the status pills. */

.gq--results .gq-main { padding: 0; }
/* the purple band runs up behind the header, so there is no seam */
.gq--results .gq-bar { position: relative; z-index: 1; background: transparent; }
.gq--results .gqr-top { margin-top: calc(-1 * (28px + 2 * clamp(20px, 2.6vw, 34px))); padding-top: calc(28px + 2 * clamp(20px, 2.6vw, 34px) + clamp(8px, 2vw, 24px)); }

.gqr-top {
    background:
        radial-gradient(60% 70% at 90% 0%, rgba(255,30,128,.32) 0%, rgba(255,30,128,0) 60%),
        linear-gradient(135deg, #1f0b4a 0%, #3b0f86 55%, #6a1fd0 100%);
    padding: clamp(8px, 2vw, 24px) clamp(16px, 3.2vw, 48px) clamp(48px, 6vw, 80px);
}
.gqr-score { text-align: center; max-width: 720px; }
.gqr-dial { display: block; width: 100%; max-width: 300px; margin: 0 auto; }
.gqr-dial__fill { animation: gqrFill 1.1s .15s cubic-bezier(.2,.7,.2,1) both; }
@keyframes gqrFill { from { stroke-dashoffset: var(--from); } to { stroke-dashoffset: var(--to); } }
.gqr-dial__val { font-family: var(--font-serif); font-variation-settings: 'SOFT' 50; font-size: 66px; fill: var(--ink); font-variant-numeric: tabular-nums; }
.gqr-dial__of { font: 400 14px var(--font-sans); fill: var(--ink-mute); }
.gqr-score__lbl { font: 500 16px/1.3 var(--font-sans); color: var(--ink-mute); margin: 18px 0 0; }
.gqr-score__h { font-family: var(--font-serif); font-weight: 400; font-variation-settings: 'SOFT' 50; font-size: clamp(32px, 3.6vw, 48px); line-height: 1.08; letter-spacing: -.024em; color: var(--ink); margin: 10px auto 0; max-width: 20ch; }
.gqr-score__line { font: 400 clamp(17px, 1.25vw, 19px)/1.65 var(--font-sans); color: var(--ink-soft); max-width: 54ch; margin: 18px auto 0; }
.gqr-score__sent { font: 400 14.5px/1.5 var(--font-sans); color: var(--ink-mute); margin: 26px auto 0; padding-top: 20px; border-top: 1px solid rgba(17,17,16,.08); max-width: 54ch; overflow-wrap: anywhere; }

.gqr-body { max-width: 820px; margin: 0 auto; padding: 0 clamp(16px, 3.2vw, 48px) clamp(48px, 6vw, 80px); position: relative; }
.gqr-sec { padding-top: clamp(56px, 7vw, 88px); }
.gqr-h2 { font-family: var(--font-serif); font-weight: 400; font-variation-settings: 'SOFT' 50; font-size: clamp(32px, 3.2vw, 46px); line-height: 1.06; letter-spacing: -.025em; color: var(--ink); margin: 0; }
.gqr-intro { font: 400 clamp(17px, 1.25vw, 19px)/1.65 var(--font-sans); color: var(--ink-soft); max-width: 56ch; margin: 14px 0 28px; }

.gqr-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.gqr-row { background: #fff; border: 1px solid var(--card-border); border-radius: 22px; box-shadow: var(--shadow-tile); padding: clamp(22px, 3vw, 30px); }
.gqr-row__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.gqr-row h3 { font: 600 clamp(19px, 1.5vw, 22px)/1.3 var(--font-sans); letter-spacing: -.01em; color: var(--ink); margin: 0; }
.gqr-row p { font: 400 clamp(16.5px, 1.2vw, 18px)/1.6 var(--font-sans); color: var(--ink-soft); margin: 10px 0 0; }
.gqr-row .gqr-row__ans { font-size: 15px; color: var(--ink-mute); margin-top: 8px; }
.gqr-row__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font: 500 16px/1 var(--font-sans); color: var(--ink); text-decoration: none; }
.gqr-row__link svg { width: 16px; height: 16px; transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.gqr-row__link:hover svg { transform: translateX(3px); }

.gqr-pill { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; font: 600 13.5px/1 var(--font-sans); }
.gqr-pill.is-problem { color: var(--status-problem); background: var(--status-problem-bg, #fff1f2); }
.gqr-pill.is-partly { color: var(--status-partly); background: var(--status-partly-bg, #fffbeb); }
.gqr-pill.is-strong { color: var(--status-strong); background: var(--status-strong-bg, #ecfdf5); }

.gqr-guide { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--card-border); border-radius: 28px; box-shadow: 0 24px 60px -30px rgba(17,17,16,.35); padding: clamp(28px, 4.5vw, 52px); }
.gqr-guide::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--brand-grad); }
.gqr-guide__lbl { display: inline-block; font: 600 14px/1 var(--font-sans); color: var(--ink); background: var(--panel); border: 1px solid var(--card-border); border-radius: 999px; padding: 8px 16px; margin: 0 0 20px; }
.gqr-guide__h { font-family: var(--font-serif); font-weight: 400; font-variation-settings: 'SOFT' 50; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.06; letter-spacing: -.024em; color: var(--ink); margin: 0; }
.gqr-guide__sub { font: 400 clamp(17.5px, 1.3vw, 20px)/1.6 var(--font-sans); color: var(--ink-soft); margin: 16px 0 0; max-width: 50ch; }
.gqr-guide__lead { font: 500 clamp(17px, 1.2vw, 18.5px)/1.5 var(--font-sans); color: var(--ink); margin: 26px 0 14px; }
.gqr-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.gqr-ticks li { position: relative; padding-left: 34px; font: 400 clamp(18px, 1.3vw, 20px)/1.45 var(--font-sans); color: var(--ink); }
.gqr-ticks li::before { content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); }
.gqr-ticks li::after { content: ""; position: absolute; left: 7px; top: 9px; width: 8px; height: 4px; border-left: 1.8px solid #fff; border-bottom: 1.8px solid #fff; transform: rotate(-45deg); }
.gqr-guide__based { font: 400 15px/1.6 var(--font-sans); color: var(--ink-mute); margin: 26px 0 0; max-width: 56ch; }
.gqr-guide__based sup { font-size: .55em; }
.gqr-guide__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 30px; }
.gqr-guide__cta .gq-btn { min-width: 180px; }
.gqr-guide__all { font: 500 16px/1 var(--font-sans); color: var(--ink); text-underline-offset: 4px; }

.gqr-foot { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 12px; margin: clamp(40px, 5vw, 56px) 0 0; font: 400 15px/1.4 var(--font-sans); color: var(--ink-mute); }
.gqr-foot a, .gqr-copy { color: var(--ink-soft); background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.gqr-foot a:hover, .gqr-copy:hover { color: var(--ink); }

@media (max-width: 560px) {
    .gqr-guide__cta .gq-btn { width: 100%; }
    .gqr-guide__cta { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .gqr-dial__fill { animation: none; }
}