/* owned by WP3 — see docs/design-system.md */
/* .gq-* pricing block — moved from styles.css, re-pointed to tokens per §5.12 */

/* Pricing is a light section with a plum accent: the accent tokens are overridden once here
   rather than restated per rule, so every .gq-* below reads the same semantic tokens as the rest
   of the site. Plum also becomes --focus-ring, which is why no .gq-* rule styles focus itself. */
.gq-pricing{position:relative;z-index:var(--z-raised);
  --accent:var(--color-plum);--accent-fg:var(--color-plum);--accent-tint:var(--color-plum-tint);--focus-ring:var(--color-plum);
  font-family:var(--font-body);background:var(--bg);color:var(--fg-muted);padding:var(--space-16) var(--space-6);-webkit-font-smoothing:antialiased}
.gq-wrap{max-width:var(--container);margin-inline:auto}
.gq-head{max-width:620px;margin-bottom:var(--space-8)}
.gq-title{font-size:clamp(28px,3.4vw,38px);line-height:var(--lh-tight);font-weight:var(--fw-bold);color:var(--fg-strong);margin:0 0 var(--space-3);letter-spacing:var(--ls-snug)}
.gq-sub{font-size:var(--fs-base);line-height:var(--lh-relaxed);margin:0}

/* The four uppercase micro-labels are one treatment; only their margins differ. */
.gq-eyebrow,.gq-benefits__lead,.gq-specs__label,.gq-addons__label{font-size:var(--fs-2xs);font-weight:var(--fw-bold);letter-spacing:var(--ls-wider);text-transform:uppercase;color:var(--fg-muted)}
.gq-eyebrow{display:block;margin-bottom:var(--space-2)}
.gq-eyebrow--accent{color:var(--accent-fg)}
.gq-benefits__lead{margin:0 0 var(--space-3)}
.gq-benefits+.gq-benefits__lead{margin-top:var(--space-1)}
.gq-specs__label{margin:0 0 var(--space-2-5)}
.gq-addons__label{margin:0}

.gq-anchor{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:var(--space-6);background:var(--bg-panel);border-radius:var(--radius-lg);padding:var(--space-6) var(--space-7);margin-bottom:var(--space-8)}
.gq-anchor__price{font-size:clamp(22px,2.4vw,28px);font-weight:var(--fw-bold);color:var(--fg-strong);margin:0 0 var(--space-1-5);letter-spacing:var(--ls-snug)}
.gq-anchor__price span{font-size:var(--fs-md);font-weight:var(--fw-medium);color:var(--fg-muted)}
.gq-anchor__price--accent{color:var(--accent-fg)}
.gq-anchor__note{font-size:var(--fs-sm);line-height:var(--lh-body);margin:0}
.gq-anchor__arrow{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-full);background:var(--bg);color:var(--accent-fg)}

.gq-terms{display:flex;flex-wrap:wrap;gap:var(--space-1-5);justify-content:center;background:var(--bg-panel);border-radius:var(--radius-pill);padding:var(--space-1-5);width:fit-content;margin:0 auto var(--space-8)}
.gq-term{font:inherit;font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--fg-muted);background:transparent;border:0;border-radius:var(--radius-pill);padding:var(--space-2-5) var(--space-5);cursor:pointer;transition:background-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard)}
.gq-term:hover{color:var(--fg-strong)}
.gq-term.is-active{background:var(--fg-strong);color:var(--color-white)}
.gq-term__tag{font-size:var(--fs-2xs);font-weight:var(--fw-bold);letter-spacing:var(--ls-wide);opacity:.7;margin-left:var(--space-1-5)}

/* Four plans: one column on phones, two on tablets, four once there is room for a ~280px card.
   Explicit tracks rather than auto-fit -- auto-fit would drop to 3+1 at in-between widths, which
   orphans Enterprise on a row of its own. */
.gq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5);align-items:start}
@media(min-width:1200px){.gq-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.gq-card{position:relative;display:flex;flex-direction:column;background:var(--bg);border:var(--border-w) solid var(--line);border-radius:var(--radius-lg);padding:var(--space-8) 26px 26px;overflow:hidden}
.gq-card--pro{border-color:var(--accent)}
.gq-card__rule{position:absolute;inset:0 0 auto 0;height:5px;background:var(--accent)}
.gq-card--light .gq-card__rule{background:var(--color-cyan)}
.gq-card--light .gq-card__price{color:var(--color-cyan-ink)}
.gq-card--light .gq-benefits li::before{border-color:var(--color-cyan-ink)}
.gq-card--starter .gq-card__rule{background:var(--color-gray-700)}
.gq-card--enterprise .gq-card__rule{background:var(--color-amber)}
.gq-card__top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-1-5)}
.gq-card__name{font-size:var(--fs-xl);font-weight:var(--fw-bold);color:var(--fg-strong);margin:0 0 var(--space-1-5);letter-spacing:var(--ls-snug)}
.gq-card__top .gq-card__name{margin-bottom:0}
.gq-badge{flex-shrink:0;font-size:var(--fs-2xs);font-weight:var(--fw-bold);letter-spacing:var(--ls-wider);text-transform:uppercase;color:var(--accent-fg);background:var(--accent-tint);border-radius:var(--radius-pill);padding:5px 11px}
.gq-card__pitch{font-size:var(--fs-sm);line-height:var(--lh-body);margin:0 0 22px;min-height:67px}
.gq-card__price{font-size:38px;font-weight:var(--fw-bold);color:var(--fg-strong);margin:0 0 var(--space-1);letter-spacing:var(--ls-tight);font-variant-numeric:tabular-nums}
.gq-card--pro .gq-card__price{color:var(--accent-fg)}
.gq-card--enterprise .gq-card__price{font-size:32px}
.gq-card__per{font-size:var(--fs-md);font-weight:var(--fw-medium);color:var(--fg-muted)}
.gq-card__term{font-size:var(--fs-xs);color:var(--fg-muted);margin:0 0 22px}

.gq-cta{display:block;text-align:center;text-decoration:none;font-size:var(--fs-md);font-weight:var(--fw-bold);color:var(--fg-strong);background:var(--bg);border:var(--border-w) solid var(--fg-strong);border-radius:var(--radius-sm);padding:var(--space-3) var(--space-5);margin-bottom:26px;transition:background-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard)}
.gq-cta:hover{background:var(--fg-strong);color:var(--color-white)}
.gq-cta--primary{background:var(--accent);border-color:var(--accent);color:var(--color-white)}
.gq-cta--primary:hover{background:var(--color-plum-deep);border-color:var(--color-plum-deep);color:var(--color-white)}

.gq-benefits{list-style:none;margin:0 0 var(--space-6);padding:0}
.gq-benefits li{position:relative;font-size:var(--fs-sm);line-height:1.55;color:var(--fg-strong);padding-left:26px;margin-bottom:11px}
.gq-benefits li::before{content:"";position:absolute;left:0;top:6px;width:15px;height:9px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.gq-card--enterprise .gq-benefits li::before{border-color:var(--color-amber-ink)}

.gq-specs{margin-top:auto;background:var(--bg-panel);border-radius:var(--radius-sm);padding:var(--space-4) 18px}
.gq-specs dl{margin:0}
.gq-specs dl>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:5px 0}
.gq-specs dl>div+div{border-top:var(--border-w) solid var(--line)}
.gq-specs dt{font-size:13.5px;color:var(--fg-muted)}
.gq-specs dd{font-size:13.5px;font-weight:var(--fw-bold);color:var(--fg-strong);margin:0;text-align:right;font-variant-numeric:tabular-nums}

.gq-addons{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-7);background:var(--bg-panel);border-radius:var(--radius-lg);padding:var(--space-5) 26px;margin-top:var(--space-5)}
.gq-addons ul{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-7);list-style:none;margin:0;padding:0}
.gq-addons li{font-size:var(--fs-sm);color:var(--fg-muted)}
.gq-addons strong{color:var(--fg-strong);font-weight:var(--fw-bold)}
.gq-foot{font-size:var(--fs-xs);color:var(--fg-muted);text-align:center;margin:var(--space-6) 0 0}

@media(max-width:768px){.gq-pricing{padding:var(--space-12) var(--space-5)}.gq-grid{grid-template-columns:1fr}.gq-anchor{grid-template-columns:1fr;text-align:left;gap:18px}.gq-anchor__arrow{transform:rotate(90deg)}.gq-card__pitch{min-height:0}.gq-terms{width:100%;justify-content:stretch}.gq-term{flex:1;padding:var(--space-2-5) var(--space-3)}.gq-term__tag{display:none}}