/**
 * SEO Conversion System Styles
 * All classes use gc- prefix to avoid namespace collisions
 * with page-specific prefixes (wom-, su-, tech-, etc.)
 */

/* =========== DETAIL TOGGLE BUTTON =========== */

.gc-detail-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: transparent;
    border: 1.5px solid #cbd5e1;
    border-radius: 6px;
    color: #475569;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.gc-detail-toggle:hover {
    border-color: #3b82f6;
    color: #3b82f6;
    background: #f0f7ff;
}

.gc-detail-toggle.gc-expanded {
    border-color: #3b82f6;
    color: #3b82f6;
    background: #eff6ff;
}

.gc-detail-toggle .gc-chevron {
    display: inline-block;
    transition: transform 0.2s ease;
    font-size: 0.75rem;
}

.gc-detail-toggle.gc-expanded .gc-chevron {
    transform: rotate(180deg);
}

/* =========== SAVE BUTTON (for authority/niche cards) =========== */

.gc-save-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: transparent;
    border: 1.5px solid #cbd5e1;
    border-radius: 6px;
    color: #475569;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.gc-save-btn:hover {
    border-color: #3b82f6;
    color: #3b82f6;
    background: #f0f7ff;
}

.gc-save-btn.gc-saved {
    background: #eff6ff;
    border-color: #3b82f6;
    color: #3b82f6;
}

.gc-save-btn .gc-save-icon {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    transition: all 0.2s ease;
}

.gc-save-btn.gc-saved .gc-save-icon {
    fill: #3b82f6;
    stroke: #3b82f6;
}

/* Action bar injected into cards */
.gc-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}

/* =========== DETAIL PANEL =========== */

.gc-detail-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s ease,
                padding 0.3s ease;
    opacity: 0;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-top: 12px;
    padding: 0 20px;
}

.gc-detail-panel.gc-panel-open {
    max-height: 2000px;
    opacity: 1;
    padding: 20px;
}

.gc-detail-panel h4 {
    margin: 0 0 6px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
}

/* =========== DETAIL HEADER (grant title + amount) =========== */

.gc-detail-header {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e2e8f0;
}

.gc-detail-header h4.gc-detail-title {
    margin: 0 0 4px;
    font-size: 1rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: normal;
    color: #1e293b;
}

.gc-detail-amount {
    font-size: 0.85rem;
    font-weight: 600;
    color: #059669;
}

/* =========== DETAIL SECTIONS =========== */

.gc-detail-section {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e2e8f0;
}

.gc-detail-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.gc-detail-section p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;
    color: #334155;
}

/* Eligibility list */
.gc-eligibility-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.gc-eligibility-list li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 6px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #334155;
}

.gc-eligibility-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #22c55e;
    font-weight: 700;
}

/* Deadline */
.gc-deadline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    font-weight: 500;
}

.gc-deadline--open { color: #16a34a; }
.gc-deadline--upcoming { color: #d97706; }
.gc-deadline--closed { color: #dc2626; }
.gc-deadline--ongoing { color: #2563eb; }

/* Difficulty dots */
.gc-difficulty {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.gc-difficulty-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #e2e8f0;
}

.gc-difficulty-dot.gc-filled {
    background: #f59e0b;
}

.gc-difficulty-label {
    margin-left: 8px;
    font-size: 0.85rem;
    color: #64748b;
}

/* =========== LOCK TEASER (gated content) =========== */

.gc-lock-teaser {
    position: relative;
    padding: 12px 16px;
    background: linear-gradient(180deg, rgba(248,250,252,0) 0%, rgba(248,250,252,1) 80%);
    border-radius: 6px;
    border: 1px dashed #cbd5e1;
    overflow: hidden;
}

.gc-lock-teaser-content {
    filter: blur(3px);
    user-select: none;
    pointer-events: none;
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.5;
}

.gc-lock-teaser-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(248, 250, 252, 0.7);
}

.gc-lock-teaser-overlay .gc-lock-icon {
    width: 20px;
    height: 20px;
    color: #94a3b8;
}

.gc-lock-teaser-overlay a {
    font-size: 0.85rem;
    font-weight: 600;
    color: #3b82f6;
    text-decoration: none;
    cursor: pointer;
}

.gc-lock-teaser-overlay a:hover {
    text-decoration: underline;
}

/* =========== ACTION ROW =========== */

.gc-action-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.gc-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    white-space: nowrap;
    border: none;
}

.gc-action-btn--primary {
    background: var(--gc-accent, #2d6a4f);
    color: #fff;
    border: 1.5px solid var(--gc-accent, #2d6a4f);
}

.gc-action-btn--primary:hover {
    background: #1f4d39;
    border-color: #1f4d39;
}

.gc-action-btn--secondary {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.gc-action-btn--secondary:hover {
    background: #e2e8f0;
    color: #1e293b;
}

.gc-action-btn--outline {
    border: 1.5px solid var(--gc-accent, #2d6a4f);
    color: var(--gc-accent, #2d6a4f);
    background: transparent;
    text-decoration: none;
    font-weight: 600;
}

.gc-action-btn--outline:hover {
    background: var(--gc-accent, #2d6a4f);
    color: #fff;
}

.gc-action-btn--gated {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

.gc-action-btn--gated:hover {
    background: #e2e8f0;
    color: #475569;
}

.gc-action-btn--link {
    background: transparent;
    color: #3b82f6;
    padding: 8px 0;
}

.gc-action-btn--link:hover {
    color: #2563eb;
    text-decoration: underline;
}

/* =========== SMART STICKY BAR =========== */

.gc-sticky-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #1e293b;
    border-top: 2px solid #3b82f6;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 9998;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.2);
}

.gc-sticky-bar.gc-bar-visible {
    transform: translateY(0);
}

.gc-sticky-bar-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.gc-sticky-bar-text {
    flex: 1;
    color: #e2e8f0;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.4;
}

.gc-sticky-bar-text strong {
    color: #fff;
}

.gc-sticky-bar-cta {
    flex-shrink: 0;
    padding: 10px 20px;
    background: #3b82f6;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
    text-decoration: none;
}

.gc-sticky-bar-cta:hover {
    background: #2563eb;
    color: #fff;
}

.gc-sticky-bar-dismiss {
    background: none;
    border: none;
    color: #64748b;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 4px;
    flex-shrink: 0;
    transition: color 0.15s;
}

.gc-sticky-bar-dismiss:hover {
    color: #94a3b8;
}

/* =========== QUIZ WIDGET =========== */

/* On a page with no quiz slot the widget REPLACES the first quiz link, often a hero button sitting in a flex
   row. The row's default stretch then pulled the neighbouring button to the widget's full height (a 720px empty
   "Browse All Programs" on trades-apprenticeship, 2026-09-28). */
:has(> .gc-quiz-widget) { align-items: flex-start; }

.gc-quiz-widget {
    max-width: 680px;
    margin: 2rem auto;
    padding: 28px 32px;
    background: linear-gradient(135deg, #f0f7ff 0%, #f8fafc 100%);
    border: 1px solid #dbeafe;
    border-radius: 12px;
}

.gc-quiz-widget h3 {
    margin: 0 0 6px;
    font-size: 1.2rem;
    font-weight: 700;
    color: #1e293b;
}

.gc-quiz-widget .gc-quiz-subtitle {
    margin: 0 0 20px;
    font-size: 0.9rem;
    color: #64748b;
}

.gc-quiz-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.gc-quiz-step {
    display: flex;
    align-items: center;
    gap: 12px;
}

.gc-quiz-step label {
    min-width: 80px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #334155;
}

.gc-quiz-step select {
    flex: 1;
    padding: 10px 14px;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.9rem;
    color: #1e293b;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.gc-quiz-step select:focus {
    border-color: #3b82f6;
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.gc-quiz-submit {
    margin-top: 6px;
    padding: 12px 24px;
    background: #3b82f6;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    align-self: flex-start;
}

.gc-quiz-submit:hover {
    background: #2563eb;
}

.gc-quiz-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Quiz Results */
.gc-quiz-results {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #dbeafe;
}

.gc-quiz-results-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 1rem;
    font-weight: 600;
    color: #16a34a;
}

.gc-quiz-results-header .gc-check-icon {
    width: 20px;
    height: 20px;
    color: #16a34a;
}

.gc-quiz-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 8px;
    transition: border-color 0.2s;
}

.gc-quiz-card:hover {
    border-color: #3b82f6;
}

.gc-quiz-card-info {
    flex: 1;
    min-width: 0;
}

.gc-quiz-card-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gc-quiz-card-amount {
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 2px;
}

.gc-quiz-card-save {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: #f1f5f9;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.gc-quiz-card-save:hover {
    background: #e2e8f0;
}

.gc-quiz-card-save svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: #64748b;
    stroke-width: 2;
}

.gc-quiz-card-save.gc-saved svg {
    fill: #3b82f6;
    stroke: #3b82f6;
}

.gc-quiz-cta {
    margin-top: 16px;
    padding: 16px;
    background: #fff;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    text-align: center;
}

.gc-quiz-cta p {
    margin: 0 0 10px;
    font-size: 0.9rem;
    color: #475569;
}

.gc-quiz-cta .gc-quiz-cta-btn {
    display: inline-block;
    padding: 10px 24px;
    background: #3b82f6;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s;
}

.gc-quiz-cta .gc-quiz-cta-btn:hover {
    background: #2563eb;
    color: #fff;
}

/* =========== LOADING SPINNER =========== */

.gc-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: #64748b;
    font-size: 0.9rem;
    gap: 8px;
}

.gc-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid #e2e8f0;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: gc-spin 0.6s linear infinite;
}

@keyframes gc-spin {
    to { transform: rotate(360deg); }
}

/* =========== DIRECTORY TABLE EXPANSION =========== */

.gc-dir-detail-row {
    opacity: 0;
    transition: opacity 0.25s ease;
}

.gc-dir-detail-row.gc-dir-detail-open {
    opacity: 1;
}

.gc-dir-detail-cell {
    padding: 0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    background: #f8fafc;
}

.gc-dir-detail-inner {
    padding: 20px;
}

.gc-dir-detail-inner .gc-detail-section {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e2e8f0;
}

.gc-dir-detail-inner .gc-detail-section:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.gc-dir-detail-inner .gc-action-row {
    padding-top: 4px;
}

/* Highlight the expanded source row */
tr.gc-dir-expanded {
    background: #eff6ff !important;
}

tr.gc-dir-expanded .dir-program-name {
    color: #2563eb !important;
}

/* =========== DEADLINE ALERT CTA =========== */

.gc-deadline-cta {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    padding: 14px 16px;
}

.gc-deadline-cta h4 {
    color: #166534;
    margin: 0 0 6px;
    font-size: 0.9rem;
}

.gc-deadline-cta p {
    color: #374151;
    font-size: 0.85rem;
    margin: 0 0 10px;
    line-height: 1.5;
}

.gc-cta-signup-link {
    color: #166534;
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    border-bottom: 1px solid #166534;
}

.gc-cta-signup-link:hover {
    color: #14532d;
}

/* =========== PREMIUM INTEL TEASER =========== */

.gc-premium-teaser {
    background: #fefce8;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 10px 14px;
}

.gc-premium-teaser-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #92400e;
    background: #fde68a;
    padding: 2px 8px;
    border-radius: 4px;
    margin-bottom: 6px;
}

.gc-premium-teaser p {
    color: #78716c;
    font-size: 0.82rem;
    margin: 6px 0 0;
    line-height: 1.5;
}

.gc-premium-teaser a {
    color: #92400e;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid #d97706;
}

.gc-premium-teaser a:hover {
    color: #78350f;
}

/* =========== RESPONSIVE =========== */

@media (max-width: 640px) {
    .gc-detail-panel.gc-panel-open {
        padding: 16px;
    }

    .gc-action-row {
        flex-direction: column;
        align-items: stretch;
    }

    .gc-action-btn {
        justify-content: center;
        text-align: center;
    }

    .gc-sticky-bar-inner {
        flex-wrap: wrap;
        gap: 10px;
        padding: 12px 16px;
    }

    .gc-sticky-bar-text {
        flex-basis: 100%;
        font-size: 0.85rem;
    }

    .gc-sticky-bar-cta {
        flex: 1;
        text-align: center;
    }

    /* Collapse sticky bar when detail panel is open (avoid viewport crowding) */
    body.gc-panel-active .gc-sticky-bar {
        transform: translateY(100%) !important;
    }

    /* Move toast above sticky bar */
    body.gc-sticky-visible .seo-toast {
        bottom: 80px;
    }

    /* Quiz widget responsive */
    .gc-quiz-widget {
        padding: 20px;
        margin: 1.5rem 16px;
    }

    .gc-quiz-step {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }

    .gc-quiz-step label {
        min-width: unset;
    }

    .gc-quiz-submit {
        align-self: stretch;
        text-align: center;
    }

    .gc-quiz-card-title {
        white-space: normal;
    }

    .gc-card-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .gc-card-actions .gc-detail-toggle,
    .gc-card-actions .gc-save-btn {
        justify-content: center;
        width: 100%;
    }

    .gc-dir-detail-inner {
        max-width: calc(100vw - 50px);
        padding: 16px;
    }

    .gc-dir-detail-inner .gc-action-row {
        flex-direction: column;
        align-items: stretch;
    }

    .gc-dir-detail-inner .gc-action-btn {
        justify-content: center;
        text-align: center;
    }
}

/* =========== ACCESSIBILITY =========== */

.gc-detail-toggle:focus-visible,
.gc-save-btn:focus-visible,
.gc-action-btn:focus-visible,
.gc-sticky-bar-cta:focus-visible,
.gc-quiz-submit:focus-visible,
.gc-quiz-card-save:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* =========== PRINT =========== */

@media print {
    .gc-sticky-bar,
    .gc-card-actions,
    .gc-quiz-widget,
    .gc-action-row,
    .gc-dir-detail-row {
        display: none !important;
    }

    .gc-detail-panel.gc-panel-open {
        max-height: none;
        border: 1px solid #ccc;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════════
   GCQ — SEO-page match widget, rebuilt 2026-07-26 (quality-loop, T3)
   Reference: our own eligibility-map embed. One question at a time, real tap targets,
   a count that narrows as you answer, named programs you can click into.

   ★ Tokens are declared LOCALLY on the widget. The --gcx-* palette lives in
     contracts.css / govcon-hub.css, and NEITHER is loaded on SEO pages — writing
     var(--gcx-forest) here would silently fall back to nothing, which is exactly the
     bug this file already had with the never-defined --gc-accent.
   ★ Display face is DM Serif Display, not Fraunces. Only DM Sans + DM Serif Display are
     loaded on these pages; Fraunces would have silently degraded to Georgia.
   ═══════════════════════════════════════════════════════════════════════════════════ */
.gc-quiz-widget.gcq {
    --q-forest: #1a3d2e;
    --q-forest-lt: #2d5a45;
    --q-sienna: #C4532B;        /* the site's REAL sienna — the nav CTA 40px above computes
                                   rgb(196,83,43); #a85a3c was the contracts.css token and
                                   put two different "primary" oranges in one viewport */
    --q-sienna-dk: #a8431f;
    --q-parchment: #fcf6e9;
    --q-cream: #fdfaf2;
    --q-line: #e6dcc8;
    --q-ink: #1a1a1a;
    --q-ink-2: #5b5347;
    --q-serif: 'DM Serif Display', Georgia, serif;

    max-width: 680px;
    margin: 2.5rem auto;
    padding: 26px 28px 24px;
    background: var(--q-parchment);
    border: 1.5px solid var(--q-line);
    border-radius: 16px;        /* the reference card is 16px; 4px read as a different product */
    color: var(--q-ink);
    box-shadow: 0 1px 2px rgba(26, 61, 46, .05), 0 8px 28px -12px rgba(26, 61, 46, .22);
}

/* ★ The legacy .gc-quiz-results rule (line ~534) still applied border-top #dbeafe — Tailwind
   blue-100 — and padding-top:20px underneath this rebuild. The old widget's one visible
   hairline was bleeding into the new one, giving the component two differently-coloured
   rules ~700px apart. Own it explicitly. */
.gcq .gc-quiz-results { margin: 0; padding: 0; border-top: 0; }
.gcq *, .gcq *::before, .gcq *::after { box-sizing: border-box; }
.gcq__sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* head */
.gcq__head { margin: 0 0 18px; }
.gcq__kick, .gcq__eyebrow, .gcq__nlab, .gcq__prog {
    font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.gcq__kick { margin: 0 0 7px; color: var(--q-forest-lt); }
.gcq .gcq__title {
    margin: 0 0 6px; font-family: var(--q-serif); font-weight: 400;
    font-size: clamp(1.35rem, 3.2vw, 1.6rem); line-height: 1.15; color: var(--q-forest);
    text-wrap: balance;
}
.gcq__sub { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--q-ink-2); max-width: 46ch; }

/* narrowing meter */
.gcq__meter { display: flex; align-items: baseline; gap: 8px; margin: 0 0 16px; }
.gcq__n {
    font-family: var(--q-serif); font-size: 2rem; line-height: 1; color: var(--q-sienna);
    font-variant-numeric: tabular-nums;
}
.gcq__nlab { color: var(--q-ink-2); }
/* Before the first answer there is no number, in every placement (see _qSetMeter, 2026-09-28). */
.gcq__meter.is-pre { min-height: 32px; align-items: center; }
.gcq__meter.is-pre .gcq__n { display: none; }

/* answered-so-far chips */
.gcq__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.gcq__chip {
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
    padding: 6px 14px; font: inherit; font-size: .8rem; cursor: pointer;
    background: var(--q-cream); color: var(--q-ink-2);
    border: 1px solid var(--q-line); border-radius: 999px;
}
.gcq__chip { transition: border-color .15s ease, color .15s ease; }
.gcq__chip:hover { border-color: var(--q-forest-lt); color: var(--q-forest); }
.gcq__chip span[aria-hidden] { font-size: 1rem; line-height: 1; opacity: .55; }

/* question */
.gcq__prog { margin: 0 0 6px; color: var(--q-ink-2); }
.gcq .gcq__q {
    margin: 0 0 14px; font-family: var(--q-serif); font-weight: 400;
    font-size: 1.22rem; line-height: 1.25; color: var(--q-forest); text-wrap: balance;
}
.gcq__opts {
    /* was flex-wrap, so every tile sized to its own text and the row shape was dictated by
       "Newfoundland & Labrador" (measured 5-3-3, one tile 810px). The reference uses an exact
       two-column grid; minmax(0,1fr) so text can never force a track wider than its share. */
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
}
.gcq__opt {
    min-height: 48px; min-width: 0;
    padding: 12px 16px; font: inherit; font-size: .95rem; font-weight: 500; text-align: left;
    cursor: pointer; color: var(--q-ink); background: var(--q-cream);
    border: 1.5px solid var(--q-line); border-radius: 12px;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.gcq__opt:hover { border-color: var(--q-forest); background: #fff; box-shadow: 0 2px 8px -4px rgba(26,61,46,.25); }
.gcq__back {
    margin: 14px 0 0; padding: 8px 2px; min-height: 44px;
    font: inherit; font-size: .85rem; color: var(--q-ink-2);
    background: none; border: 0; cursor: pointer;
}
.gcq__back:hover { color: var(--q-forest); }

/* once the verdict exists, the intro and the narrowing meter are both stale — and the meter
   printed the SAME number the verdict states, 39px apart. */
.gcq--done .gcq__head, .gcq--done .gcq__meter { display: none; }

/* results */
.gcq .gc-quiz-results { margin: 0; }
.gcq__verdict {
    margin: 2px 0 18px; font-size: 1.02rem; line-height: 1.45; color: var(--q-ink);
    text-wrap: pretty; max-width: 56ch;   /* ran 97ch at 880px before this */
}
.gcq__verdict b { font-family: var(--q-serif); font-weight: 400; font-size: 1.5rem; color: var(--q-sienna); }
.gcq__eyebrow { margin: 0 0 10px; color: var(--q-forest-lt); }
.gcq__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.gcq__item {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px; background: var(--q-cream);
    border: 1.5px solid var(--q-line); border-radius: 12px;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.gcq__item:hover { border-color: var(--q-forest-lt); background: #fff; box-shadow: 0 2px 10px -5px rgba(26,61,46,.28); }
.gcq__itemMain {
    flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px;
    /* the whole row is the tap target — a 20px inline title link is not one on mobile.
       The save button is a SIBLING, never underneath: a stretched-link overlay would
       swallow it (the documented card-overlay trap). */
    text-decoration: none; color: inherit; padding: 2px 0;
}
.gcq a.gcq__itemMain, .gcq a.gcq__itemMain:hover, .gcq a.gcq__itemMain:focus,
.gcq a.gcq__itemMain:visited, .gcq a.gcq__itemMain:active { color: inherit; text-decoration: none; }
.gcq a.gcq__itemMain:hover .gcq__itemT { text-decoration: underline; }
.gcq .gcq__itemT {
    font-weight: 600; font-size: 1rem; line-height: 1.3; color: var(--q-forest);
    text-underline-offset: 3px;
}
.gcq__slot {
    font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    color: var(--q-sienna); margin-bottom: 1px;
}
.gcq__itemAmt { font-size: .85rem; color: var(--q-ink-2); }
.gcq__tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.gcq__tag {
    font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    padding: 3px 8px; border-radius: 5px; color: var(--q-forest-lt); background: #eef4ef;
}
/* ★ Was an unlabelled 19px icon — the cheapest micro-commitment on the surface, and most
   readers would not have read it as a control. It is a labelled action now: saving is the
   rung on the ladder that MANUFACTURES the reason for the account thirty seconds later. */
.gcq__save {
    flex: 0 0 auto; min-width: 44px; min-height: 44px; display: inline-flex; gap: 5px;
    align-items: center; justify-content: center; cursor: pointer; padding: 0 10px;
    background: none; border: 1.5px solid transparent; border-radius: 10px; color: var(--q-ink-2);
    font: inherit; font-size: .78rem; font-weight: 600; letter-spacing: .01em;
    transition: color .15s ease, border-color .15s ease;
}
.gcq__saveL { white-space: nowrap; }
/* 2026-09-23 — Save and "Do I qualify?" share the card's right column (Save on top, unchanged). */
.gcq__acts { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.gcq a.gcq__qualify, .gcq a.gcq__qualify:visited {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; white-space: nowrap;
    border: 1.5px solid var(--q-forest); border-radius: 999px; background: #fff; color: var(--q-forest);
    font-size: .8rem; font-weight: 600; text-decoration: none;
}
.gcq a.gcq__qualify:hover, .gcq a.gcq__qualify:focus-visible { background: var(--q-forest); color: #fff; }
.gcq__save svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.gcq__save:hover { color: var(--q-sienna); border-color: var(--q-line); }
.gcq__save.is-on { color: var(--q-sienna); }
.gcq__save.is-on svg { fill: currentColor; }

.gcq__more { margin: 14px 0 0; font-size: .88rem; line-height: 1.55; color: var(--q-ink-2); text-wrap: pretty; max-width: 60ch; }
.gcq__more b { color: var(--q-ink); }
.gcq .gcq__narrow { transition: color .15s ease; }
.gcq .gcq__narrow {
    display: inline-block; margin: 12px 0 0; min-height: 44px; padding: 11px 0;
    font-size: .95rem; font-weight: 600; color: var(--q-forest); text-decoration: underline;
    text-underline-offset: 4px; text-decoration-thickness: 1px;
}
.gcq .gcq__narrow:hover, .gcq .gcq__narrow:focus,
.gcq .gcq__narrow:visited, .gcq .gcq__narrow:active { color: var(--q-sienna); }

.gcq__cta { margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--q-line); }
.gcq__ctaT { margin: 0 0 12px; font-size: .88rem; line-height: 1.5; color: var(--q-ink-2); max-width: 48ch; }
.gcq a.gcq__ctaB {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 48px; padding: 13px 26px; border-radius: 999px;   /* the site's CTA shape */
    font-size: 1rem; font-weight: 600; text-decoration: none;
    color: #fff; background: var(--q-sienna); border: 1.5px solid var(--q-sienna);
    transition: background .15s ease, border-color .15s ease;
}
.gcq a.gcq__ctaB:hover, .gcq a.gcq__ctaB:focus,
.gcq a.gcq__ctaB:visited, .gcq a.gcq__ctaB:active { color: #fff; background: var(--q-sienna-dk); border-color: var(--q-sienna-dk); }

/* focus visibility — one rule, all interactive children */
.gcq [tabindex="-1"]:focus { outline: none; }   /* programmatic focus target, not a control */
.gcq button:focus-visible, .gcq a:focus-visible {
    /* no border-radius here: it squared the 999px chip to 3px on keyboard focus.
       outline already follows each element's own radius. */
    outline: 2px solid var(--q-sienna); outline-offset: 2px;
}

/* tablet — the old block had a single 640px breakpoint and no tablet band */
/* the card keeps its 680px measure at every width — letting it reach 868px in the
   560-900 band left the verdict running ~97ch and detached the save buttons from
   the titles they belong to. */
@media (max-width: 720px) {
    .gc-quiz-widget.gcq { max-width: none; }
}
@media (max-width: 560px) {
    .gc-quiz-widget.gcq { padding: 20px 16px; margin: 2rem auto; border-radius: 3px; }
    /* ★ Was `1fr` — one column, so eleven provinces made question 1 of 4 a 948px card on a
       phone, on all 241 article-body pages. The hero variant runs the same eleven options at
       the same 350px width in two columns at 507px, so the single column was never the
       constraint; the tile size was. auto-fit falls back to one column below ~300px, where
       two really would clip "Newfoundland & Labrador". */
    .gcq__opts { grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); gap: 7px; }
    .gcq__opt {
        min-height: 44px; padding: 9px 12px; font-size: .875rem;
        display: flex; align-items: center; line-height: 1.25;
    }
    .gcq__n { font-size: 1.7rem; }
    .gcq__item { padding: 12px; }
    .gcq a.gcq__ctaB { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .gcq__opt { transition: none; }
    .gcq__opt:active { transform: none; }
}

/* ── free-text industry reader (2026-07-26) ─────────────────────────────────────── */
.gcq__free { margin: 0 0 14px; }
.gcq__freeL { display: block; font-size: .85rem; line-height: 1.45; color: var(--q-ink-2); margin: 0 0 8px; max-width: 52ch; }
.gcq__freeRow { display: flex; gap: 8px; flex-wrap: wrap; }
.gcq__freeI {
    flex: 1 1 220px; min-width: 0; min-height: 48px; padding: 12px 14px;
    font: inherit; font-size: .95rem; color: var(--q-ink); background: #fff;
    border: 1.5px solid var(--q-line); border-radius: 12px;
}
.gcq__freeI::placeholder { color: #9a9182; }
.gcq__freeI:focus { outline: 2px solid var(--q-sienna); outline-offset: 2px; border-color: var(--q-forest); }
.gcq .gcq__freeGo {
    flex: 0 0 auto; min-height: 48px; padding: 12px 20px; font: inherit; font-size: .95rem; font-weight: 600;
    cursor: pointer; color: #fff; background: var(--q-forest); border: 1.5px solid var(--q-forest);
    border-radius: 999px; transition: background .15s ease;
}
.gcq .gcq__freeGo:hover { background: var(--q-forest-lt); }
.gcq__freeRead { margin: 8px 0 0; font-size: .85rem; line-height: 1.45; min-height: 1.2em; }
.gcq__freeRead.is-hit { color: var(--q-forest); font-weight: 600; }
.gcq__freeRead.is-miss { color: var(--q-sienna-dk); }
.gcq__freeOr {
    margin: 14px 0 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase; color: var(--q-ink-2);
}

/* ── the gate ───────────────────────────────────────────────────────────────────── */
.gcq__item.is-locked { position: relative; opacity: .96; }
.gcq__item.is-locked .gcq__itemT {
    filter: blur(5px); user-select: none; letter-spacing: .02em;
}
/* ★ 2026-08-07: the DOM replacement is gone; the blur runs over the real title. The old
   reasoning was that blurred text is DevTools-readable — true, and worth nothing here,
   because what is withheld is a NAME behind a FREE account. What it cost was the look:
   U+2588 under a 5px blur renders as solid dark redaction bars, the heaviest objects on
   the surface, reading as censorship rather than as something to want. The save control is
   still not rendered on a locked row: a sharp, live bookmark on a smeared row reads as
   broken rather than withheld. */
/* ★★ The amount is NO LONGER blurred. It was, and a locked row rendered `██ ██ $██` —
   a redaction with nothing left to want. homepage-v7.css:8291-8298 states the rule for
   our best surface in a comment: blur the identity, "LEAVE the right-column amount +
   status crisp so the value is teased". Only the NAME goes now; the amount, the status
   and every reason chip stay legible. */
.gcq__item.is-locked .gcq__itemAmt,
.gcq__item.is-locked .gcq__tag { filter: none; user-select: text; }
.gcq__item.is-locked:hover { border-color: var(--q-line); background: var(--q-cream); box-shadow: none; }
/* ★ 2026-09-06: the locked row is a BUTTON (it was a dead div — Clarity dead-clicks). Same box
   as the anchor rows: full-width, left-aligned, inherits type; a pointer and a focus ring so it
   reads and behaves as the control it now is. */
.gcq button.gcq__itemMain--locked {
    appearance: none; -webkit-appearance: none; background: none; border: 0; margin: 0;
    width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
}
.gcq button.gcq__itemMain--locked:focus-visible { outline: 2px solid var(--q-green, #1B4332); outline-offset: 2px; border-radius: 6px; }
.gcq__gate--pulse { animation: gcqGatePulse 1.5s ease-out 1; }
@keyframes gcqGatePulse { 0% { box-shadow: 0 0 0 0 rgba(27,67,50,.45); } 100% { box-shadow: 0 0 0 14px rgba(27,67,50,0); } }
/* ★ Was text-align:center — the ONLY centred block in an otherwise left-aligned editorial
   surface, which made the signup ask read as a generic SaaS modal pasted into the article
   (Kimi visual review, 2026-07-27). It is part of the page's voice now, not an interruption. */
.gcq__gate {
    margin: 12px 0 0; padding: 18px 18px 16px; text-align: left;
    background: linear-gradient(180deg, rgba(252,246,233,0) 0%, var(--q-cream) 22%);
    border: 1.5px solid var(--q-line); border-radius: 12px;
}
.gcq__gateT {
    margin: 0 0 4px; font-family: var(--q-serif); font-weight: 400;
    font-size: 1.18rem; line-height: 1.25; color: var(--q-forest); text-wrap: balance;
}
.gcq__gateT b { font-weight: 400; color: var(--q-sienna); }
.gcq__gateS { margin: 0 0 14px; font-size: .85rem; color: var(--q-ink-2); }
/* Roadmap promise line (hero-quiz pilot 2026-08-15) — inserted at render time ONLY when
   auto-generation is viable for this visitor; its absence is a decision, not a bug. */
.gcq__gateRm { margin: -8px 0 14px; font-size: .85rem; color: var(--q-ink-2); }
.gcq__gateRm b { color: var(--q-sienna); font-weight: 600; }

/* ── Roadmap anticipation state (hero-quiz pilot 2026-08-15) ─────────────────────
   Mirrors the map embed's .gce-ag. Inserted above the unlocked results after signup;
   replaced in place by an honest failure line if generation errors or times out.
   Lives inside .gc-quiz-results (a widget child), so the --q-* tokens apply. */
.gcq-ag {
    text-align: center; padding: 18px 16px 16px; margin: 0 0 18px;
    background: var(--q-cream); border: 1px solid var(--q-line); border-radius: 12px;
}
.gcq-ag__h {
    font-family: var(--q-serif); font-weight: 400; font-size: 1.18rem;
    color: var(--q-forest); margin: 10px 0 6px; letter-spacing: -.015em;
}
.gcq-ag__p { font-size: .9rem; line-height: 1.5; color: var(--q-ink-2); margin: 0 auto 8px; max-width: 44ch; }
.gcq-ag__p a { color: var(--q-sienna); }
.gcq-ag__note { font-size: .78rem; line-height: 1.45; color: #8A8375; margin: 0 auto; max-width: 40ch; }
.gcq-ag__spin {
    width: 26px; height: 26px; margin: 0 auto; border-radius: 50%;
    border: 2.5px solid var(--q-line);
    border-top-color: var(--q-sienna);
    animation: gcq-ag-spin .9s linear infinite;
}
/* A spinner that cannot spin must not read as a broken ring: with reduced motion the
   ring becomes a static complete circle; the live region carries the real news. */
@media (prefers-reduced-motion: reduce) {
    .gcq-ag__spin { animation: none; border-color: var(--q-sienna); opacity: .55; }
}
@keyframes gcq-ag-spin { to { transform: rotate(360deg); } }

.gcq__gateMount { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.gcq__gateMount .gcs-google,
.gcq__gateMount .gc-quiz-cta-btn {
    width: 100%; max-width: 340px; min-height: 48px;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    font-size: 1rem; font-weight: 600; border-radius: 999px; cursor: pointer;
    color: #fff; background: var(--q-sienna); border: 1.5px solid var(--q-sienna);
    text-decoration: none; transition: background .15s ease;
}
.gcq__gateMount .gcs-google:hover,
.gcq__gateMount .gc-quiz-cta-btn:hover { background: var(--q-sienna-dk); border-color: var(--q-sienna-dk); }
.gcq__gateMount .gcs-google svg { width: 18px; height: 18px; }
.gcq__emailrow { margin-top: 2px; }
.gcq .gcs-emaillink {
    background: none; border: 0; cursor: pointer; min-height: 44px; padding: 10px 4px;
    font: inherit; font-size: .88rem; color: var(--q-ink-2); text-decoration: underline;
    text-underline-offset: 3px;
}
.gcq .gcs-emaillink:hover { color: var(--q-forest); }
/* real class names from gc-signup.renderInline: .gcs-google / .gcs-or / .gcs-form
   (.gcs-name .gcs-email .gcs-pw .gcs-email-btn) / .gcs-err / .gcs-toggle.
   Collapsed = Google-first only; the quiet email link expands the rest. */
.gcq__gateMount.gcs--collapsed .gcs-or,
.gcq__gateMount.gcs--collapsed .gcs-form,
.gcq__gateMount.gcs--collapsed .gcs-toggle { display: none; }
.gcq__gateMount .gcs-form { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 340px; }
.gcq__gateMount .gcs-name,
.gcq__gateMount .gcs-email,
.gcq__gateMount .gcs-pw {
    width: 100%; min-height: 46px; padding: 11px 14px; font: inherit; font-size: .95rem;
    color: var(--q-ink); background: #fff; border: 1.5px solid var(--q-line); border-radius: 12px;
}
.gcq__gateMount .gcs-name:focus, .gcq__gateMount .gcs-email:focus, .gcq__gateMount .gcs-pw:focus {
    outline: 2px solid var(--q-sienna); outline-offset: 2px; border-color: var(--q-forest);
}
.gcq__gateMount .gcs-email-btn {
    width: 100%; min-height: 48px; font: inherit; font-size: 1rem; font-weight: 600; cursor: pointer;
    color: #fff; background: var(--q-forest); border: 1.5px solid var(--q-forest); border-radius: 999px;
}
.gcq__gateMount .gcs-email-btn:hover { background: var(--q-forest-lt); }
.gcq__gateMount .gcs-or { font-size: .8rem; color: var(--q-ink-2); letter-spacing: .08em; text-transform: uppercase; }
.gcq__gateMount .gcs-toggle { font-size: .85rem; color: var(--q-ink-2); }
.gcq__gateMount .gcs-signin-link {
    background: none; border: 0; cursor: pointer; font: inherit; font-size: .85rem; font-weight: 600;
    color: var(--q-forest); text-decoration: underline; text-underline-offset: 3px; min-height: 44px; padding: 0 2px;
}
.gcq__gateMount .gcs-err { font-size: .85rem; color: var(--q-sienna-dk); }
@media (max-width: 560px) {
    .gcq .gcq__freeGo { width: 100%; }
    .gcq__gate { padding: 16px 12px 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .gcq .gcq__freeGo, .gcq__gateMount .gcs-google { transition: none; }
}

/* ── Overlay guard at the gate moment ──────────────────────────────────────────
   Set by _qGuardOverlays() only WHILE the results panel is on screen. Two
   page-level floating elements otherwise land on top of the signup ask, and both
   are mobile-only — which is most of this traffic:
     · .gc-sticky-cta  (z900, ~98px tall) reads "Find my matches ->" and points at
       /?action=precision — it invites someone who has just answered four questions
       to go take a different quiz. It competes with the gate and leads away from it.
     · .on-back-to-top (z999, 46px) sits over the gate's own subtitle.
   Scoped, not global: the sticky bar converts at 5.2% CTR elsewhere on these pages,
   so it comes straight back the moment the results scroll out of view. */
body.gcq-focus .gc-sticky-cta,
body.gcq-focus .gc-sticky-bar,
body.gcq-focus .on-back-to-top { display: none !important; }
/* ★ .gc-sticky-bar was NOT in this list, which let the double-CTA defect back in through a
   different door: saving one of the quiz RESULTS fires gc-bookmark-change, which triggers the
   sticky bar's "Create a free account" — on top of the inline signup gate that is already on
   screen asking for exactly that. The dedupe rule is per-moment, not per-module: while the
   results panel owns the ask, nothing else may ask. */

/* Free-text interpretation: held, not flashed. The readback used to auto-advance after 420ms,
   spending the one moment where the widget demonstrably understood a person, and removing the
   only chance to correct a wrong read before it drove the whole match set. */
.gcq__freeFix { display: block; font-weight: 400; color: var(--q-ink-2); margin-top: 2px; }
.gcq__freeNext {
    display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; padding: 0 18px;
    font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer; color: #fff;
    background: var(--q-forest); border: 1.5px solid var(--q-forest); border-radius: 999px;
}
.gcq__freeNext:hover { background: var(--q-forest-lt); }
.gcq__freeNext:focus-visible { outline: 2px solid var(--q-sienna); outline-offset: 2px; }

/* Waiting on grants.json — a pending fetch is not an empty result. */
.gcq__wait { color: var(--q-ink-2); }

/* The earned ending. Signing up used to change nothing on screen except three more rows. */
.gcq__won {
    margin: 4px 0 0; padding: 12px 14px; border-radius: 12px;
    font-size: .95rem; font-weight: 600; color: var(--q-forest);
    background: #eef4ef; border: 1px solid var(--q-line);
}

/* ═══════════════════════════════════════════════════════════════════════════════════
   GCQ — HERO MODE (.gcq--hero), 2026-08-07
   Opted into by <div data-gc-quiz-slot="hero">, never sniffed. 241 of the 247 slots on
   this site are in an article body, where the standalone parchment card is right; six
   are inside a page hero, where it was measurably wrong (R0-DIAGNOSIS.md):

     · card `margin:0 auto` at 680px vs an <h1> left-aligned in an 800px column — two
       left edges 84px apart, sharing no edge with anything;
     · ~600px of the 1440px hero left empty while the card stacked UNDER the text,
       making the hero 1,300px tall;
     · question 1 below the fold on every page at 1440x900 — the interaction the card
       exists for was invisible on first paint;
     · a warm parchment card on a navy/violet gradient: the only warm object on screen.

   The fix is a FORM, not a size. In hero mode the widget becomes the hero's right
   column: it drops its own header (the page <h1> already does that job), leads with the
   count, and puts the first question above the fold.
   ═══════════════════════════════════════════════════════════════════════════════════ */

/* The page opts its hero container in with data-gc-hero-grid. One shared rule rather
   than six bespoke blocks — the six heroes have six different class names.
   ⚠ Explicit column placement, NOT auto-flow: auto-placement fills row-by-row and would
     drop the h1 and the badge into different columns.
   ⚠ `grid-row: 1 / -1` resolves against the last EXPLICIT line, which in an implicit
     grid is line 1 — a zero-height aside. `span 50` is the safe form. */
@media (min-width: 1080px) {
    [data-gc-hero-grid] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) var(--gc-hero-aside, 424px);
        column-gap: clamp(40px, 4vw, 72px);
        align-items: start;
        max-width: var(--gc-hero-wide, 1180px) !important;
    }
    [data-gc-hero-grid] > * { grid-column: 1; min-width: 0; }
    [data-gc-hero-grid] > [data-gc-quiz-slot] {
        grid-column: 2; grid-row: 1 / span 50; align-self: start; margin: 0;
    }
}
/* ★ THE SPLIT IS MEASURED, NOT PICKED (Khalid asked how it was decided, 2026-08-07).
   424px was CONSTRAINT-derived — the narrowest width at which the province grid still holds
   two columns with "Newfoundland & Labrador" on one line — and the left column got whatever
   was left. That is a starting point, not a decision. Rendered on all six pages against the
   criteria a specialist would use (`dev-assets/hero-quiz-2026-08-07/r10/`):

     aside   split    left fill   sub measure   h1 lines   option grid   panel height
     380     63/32       93%       60ch x 4         2         2 x 6          511
     424     59/36       99%       60ch x 4         2         2 x 6          511
     468     55/40       98%       60ch x 4         2         3 x 4          420  <- best
     510     52/43       98%       60ch x 4      *  3         3 x 4          420

   468 wins the one thing 424 lost: the panel finishes 28px from the left column's last line
   instead of overhanging it by 63px, and eleven options become 3x4 rather than 2x6. 510 is
   the hard stop — the left column gets too narrow and the <h1> takes a third line.
   ⚠ 468 ALSO costs a third h1 line on 2 of the 6 pages once the viewport drops to 1200px,
   so it is granted only where there is width to grant: two steps, not one. */
@media (min-width: 1320px) {
    [data-gc-hero-grid] { --gc-hero-aside: 468px; }
}

/* ★ The WIDGET ROOT is the panel, not .gcq__panel. Styling the inner panel instead left
   the narrowing meter OUTSIDE the box — an unboxed "554 OPEN PROGRAMS RIGHT NOW" floating
   on the gradient above a card, with its own full-width rule under it, reading as a broken
   table header (round 1, shots/r1). The root is also the only element that survives every
   state: question / waiting / results all swap the children under it. */
.gc-quiz-widget.gcq--hero {
    /* the accent + surface are the PAGE's, passed in — so the panel belongs to the hero
       it is in rather than importing a second palette into it */
    --q-sienna: var(--gcq-hero-accent, #C4532B);
    max-width: none;
    margin: 26px 0 0;
    padding: 17px 21px 21px;
    background: var(--gcq-hero-surface, #fdfaf2);
    border: 1px solid var(--q-line);
    border-top: 3px solid var(--q-sienna);
    border-radius: 14px;
    box-shadow: 0 18px 44px -22px rgba(8, 15, 30, .55), 0 2px 6px rgba(8, 15, 30, .18);
}
@media (min-width: 1080px) {
    .gc-quiz-widget.gcq--hero { margin: 4px 0 0; }
}
/* the head is the page's <h1>'s job — three headline-register blocks in a row was one of
   the reasons the hero read as "dropped in" */
.gcq--hero .gcq__head { display: none; }

/* the meter is the panel's header rule */
.gcq--hero .gcq__meter {
    margin: 0 0 2px; padding: 0 0 11px; gap: 9px;
    border-bottom: 1px solid var(--q-line);
    align-items: baseline; flex-wrap: wrap;
}
.gcq--hero .gcq__n { font-size: 2rem; }
.gcq--hero .gcq__nlab { font-size: 11px; letter-spacing: .09em; line-height: 1.35; max-width: 17ch; }
/* Before the first answer there is no number (see _qSetMeter). The strip holds the height
   the number will take, so the count appears without shifting the question under it. */
.gcq--hero .gcq__meter.is-pre { min-height: 32px; align-items: center; }
.gcq--hero .gcq__meter.is-pre .gcq__n { display: none; }
.gcq--hero .gcq__meter.is-pre .gcq__nlab {
    max-width: none; letter-spacing: .07em; color: var(--q-forest-lt); font-size: 10.5px;
}
.gcq--hero .gcq__chips { margin: 11px 0 0; }
.gcq--hero .gcq__prog { margin: 12px 0 5px; }
.gcq--hero .gcq__q { font-size: 1.1rem; margin: 0 0 11px; }

/* Options: auto-fit so the same rule gives 2 up in a 424px aside AND 2 up on a 350px
   phone, instead of the old fixed 2-col desktop / 1-col phone pair that stacked eleven
   provinces into a 948px card. 126px min keeps "Newfoundland & Labrador" on one line at
   the aside's real inner width (380px inner -> 186px cells). */
.gcq--hero .gcq__opts { grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); gap: 7px; }
.gcq--hero .gcq__opt {
    min-height: 44px; padding: 9px 12px; font-size: .875rem; border-radius: 10px;
    display: flex; align-items: center; line-height: 1.25;
}
.gcq--hero .gcq__back { margin: 10px 0 0; }
.gcq--hero .gcq__free { margin: 0 0 12px; }
.gcq--hero .gcq__freeI { min-width: 0; flex: 1 1 140px; }

/* Once answered, the verdict is the hero: the aside gives its column back and the
   results take the full inner width. */
@media (min-width: 1080px) {
    [data-gc-hero-grid]:has(> [data-gc-quiz-slot] .gcq--done) { grid-template-columns: minmax(0, 1fr); }
    [data-gc-hero-grid] > [data-gc-quiz-slot]:has(.gcq--done) { grid-column: 1; grid-row: auto; margin-top: 26px; }
}

/* The one thing the panel does NOT offer. All six of these heroes carried an orange
   "Find Your Grants →" primary pointing at /?action=quiz — a DIFFERENT quiz — 60px above
   a widget that does the same job in place, plus a secondary. Two asks for one job is the
   composition defect; the row now has one job the quiz cannot do. All six heroes are dark
   gradients (verified in source, not assumed), so white is safe on every one. */
.gcq-hero-browse,
.gcq-hero-browse:visited {
    display: inline-flex; align-items: center; min-height: 44px;
    font-size: .95rem; font-weight: 600; letter-spacing: .01em;
    color: rgba(255, 255, 255, .82); text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .28);
    padding: 0 1px 2px; transition: color .15s ease, border-color .15s ease;
}
.gcq-hero-browse:hover, .gcq-hero-browse:focus {
    color: #fff; border-bottom-color: rgba(255, 255, 255, .7);
}
.gcq-hero-browse:focus-visible { outline: 2px solid rgba(255,255,255,.85); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .gcq-hero-browse { transition: none; } }

/* ═══════════════════════════════════════════════════════════════════════════════════
   GCQ RESULTS — rebuilt 2026-08-07 against dev-assets/page-overhaul-2026-08-06/
   RESULTS-DESIGN-STANDARD.md (extracted from the homepage precision results + the
   eligibility map, which Khalid named as the bar). Principles, not a port: this reader
   came from Google to read an article and is being interrupted, where the homepage's
   reader chose the quiz and answered ten questions.
   ═══════════════════════════════════════════════════════════════════════════════════ */

/* P1 + P2 — the verdict, with the receipt for the work directly above it. The old
   opening line was "80 open programs COULD FIT A … business": a hedge and a third
   person, and a hedge in the headline makes every number under it optional. */
.gcq__vd { margin: 0 0 14px; }
.gcq__receipt {
    margin: 0 0 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .09em;
    text-transform: uppercase; color: var(--q-ink-2);
}
.gcq__receipt b { color: var(--q-forest); font-weight: 700; }
.gcq .gcq__verdict {
    margin: 0; font-family: var(--q-serif); font-weight: 400;
    font-size: clamp(1.2rem, 2.6vw, 1.45rem); line-height: 1.25; color: var(--q-forest);
    text-wrap: pretty;
}
.gcq .gcq__verdict b { font-family: inherit; font-size: 1.28em; color: var(--q-sienna); }
.gcq__vdsub { margin: 7px 0 0; font-size: .88rem; line-height: 1.5; color: var(--q-ink-2); }
.gcq__vdsub b { color: var(--q-ink); font-weight: 600; }
/* 2026-09-11 — "N of them are non-repayable grants" was dead text founders clicked; the
   link beside it goes to the grants list. Same treatment as .gcq__narrow, inline size. */
.gcq .gcq__vdsub .gcq__vdlink { color: var(--q-forest); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; white-space: nowrap; }
.gcq .gcq__vdsub .gcq__vdlink:hover, .gcq .gcq__vdsub .gcq__vdlink:focus { color: var(--q-sienna); }

/* P4 — there must be a top result and it must LOOK like one. The old list was three
   equal cards whose closing copy explicitly disclaimed ranking. */
.gcq__list { counter-reset: gcqn; }
.gcq__item--top {
    background: #fff;
    border-color: var(--q-forest-lt);
    box-shadow: 0 2px 14px -6px rgba(26, 61, 46, .3);
}
.gcq__item--top .gcq__itemT { font-size: 1.06rem; }
.gcq__item--top .gcq__slot { color: var(--q-sienna); }

/* the value row: amount first, then the reasons. One row, one register. */
.gcq__itemMeta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.gcq__itemMeta .gcq__itemAmt { font-weight: 600; color: var(--q-ink); }
/* ⚠ A separator drawn with ::after cannot know that the chip it separates has wrapped to
   the next line — on a 350px card the rule hung off the end of "$75K-$1M typical (up to
   $10M) |" with nothing after it. The chips are pills on a tinted ground; they need no
   rule to be told apart from the amount. */
.gcq__itemMeta .gcq__itemAmt { margin-right: 3px; }

/* P10 — the one control that makes the verdict BETTER rather than consuming it. */
/* ★ Quieter than it was. As a white bordered box it sat directly above the gate — two
   boxed asks, adjacent, in the same visual register, which is how a page starts reading as
   a paywall rather than an answer (results standard P11: never stack two blocks of the same
   kind). It keeps the accent rule so it still reads as a question addressed to the reader,
   and loses the panel so the gate below it is unambiguously the only offer on screen. */
.gcq__unlock {
    margin: 14px 0 2px; padding: 2px 0 2px 15px;
    border-left: 3px solid var(--q-sienna);
}
.gcq__unlockQ { margin: 0 0 10px; font-size: .92rem; line-height: 1.5; color: var(--q-ink); }
.gcq__unlockQ b { color: var(--q-sienna); font-family: var(--q-serif); font-weight: 400; font-size: 1.2em; }
.gcq__unlockBtns { display: flex; flex-wrap: wrap; gap: 8px; }
.gcq .gcq__unlockYes, .gcq .gcq__unlockNo {
    min-height: 44px; padding: 0 18px; font: inherit; font-size: .9rem; font-weight: 600;
    cursor: pointer; border-radius: 999px; border: 1.5px solid var(--q-forest);
}
.gcq .gcq__unlockYes { color: #fff; background: var(--q-forest); }
.gcq .gcq__unlockYes:hover { background: var(--q-forest-lt); }
.gcq .gcq__unlockNo { color: var(--q-ink-2); background: transparent; border-color: var(--q-line); }
.gcq .gcq__unlockNo:hover { border-color: var(--q-forest-lt); color: var(--q-forest); }

/* 2026-09-23 — owner groups replace the single yes/no (whose Yes opened programmes reserved for groups the reader is not
   in). SECONDARY on purpose: outlined pills, never a dark primary beside the gate — the account ask stays the one
   primary action on screen (walk-through finding: two primaries 60px apart). */
.gcq__groups { display: flex; flex-wrap: wrap; gap: 8px; }
.gcq .gcq__group {
    min-height: 44px; padding: 0 14px; font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer;
    border-radius: 999px; border: 1.5px solid var(--q-line); color: var(--q-forest); background: transparent;
    display: inline-flex; align-items: center; gap: 6px;
}
.gcq .gcq__group:hover, .gcq .gcq__group:focus-visible { border-color: var(--q-forest-lt); }
.gcq__groupN { font-weight: 600; font-size: .78rem; color: var(--q-sienna); }
.gcq .gcq__group--none { color: var(--q-ink-2); font-weight: 500; }
/* The one line that says what a programme IS (tagline on 96% of records, never shown before 2026-09-23). Two lines max. */
.gcq__itemD {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: .86rem; line-height: 1.4; color: var(--q-ink-2); margin-top: 2px;
}
.gcq__itemType { font-weight: 600; color: var(--q-forest); }
/* The held-back rows now sit BELOW the gate, as the preview of what the account unlocks. */
.gcq__list--held { margin-top: 10px; }
/* One next step: while the results are on screen, the page's own hero buttons step aside (visibility, never display —
   hiding in place moves nothing, so it cannot shift the layout the reader is looking at). */
body.gcq-focus .sbg-primary, body.gcq-focus [data-gc-hero-browse] { visibility: hidden; }

/* P3 — the exclusion ledger. A count of matches is a claim; a count of NON-matches with
   reasons is evidence. Closed by default: it is proof on demand, not an argument. */
.gcq__ledger { margin: 14px 0 0; border-top: 1px solid var(--q-line); padding-top: 12px; }
.gcq__ledger > summary {
    list-style: none; cursor: pointer; min-height: 44px; display: flex; align-items: center;
    font-size: .88rem; font-weight: 600; color: var(--q-forest);
}
.gcq__ledger > summary::-webkit-details-marker { display: none; }
.gcq__ledger > summary > span { display: inline-flex; align-items: center; gap: 7px; }
.gcq__ledger > summary > span::after {
    content: '＋'; font-size: .95rem; font-weight: 400; color: var(--q-ink-2);
}
.gcq__ledger[open] > summary > span::after { content: '−'; }
.gcq__ledger > summary b { color: var(--q-sienna); }
.gcq__ledgerL { list-style: none; margin: 2px 0 0; padding: 0; }
.gcq__ledgerL li {
    display: flex; gap: 10px; align-items: baseline;
    padding: 7px 0; border-bottom: 1px solid var(--q-line);
    font-size: .875rem; color: var(--q-ink-2);
}
.gcq__ledgerL li:last-child { border-bottom: 0; }
.gcq__ledgerL b {
    flex: 0 0 auto; min-width: 3.2em; text-align: right;
    font-family: var(--q-serif); font-weight: 400; font-size: 1.05rem; color: var(--q-ink);
    font-variant-numeric: tabular-nums;
}
.gcq__ledgerN { margin: 10px 0 0; font-size: .82rem; line-height: 1.5; color: var(--q-ink-2); }

/* HERO MODE — the results take the full hero inner once the aside gives its column back,
   so the list can breathe at 1,100px instead of 424px. */
@media (min-width: 1080px) {
    .gcq--hero.gcq--done .gcq__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .gcq--hero.gcq--done .gcq__item--top { grid-column: 1 / -1; }
    .gcq--hero.gcq--done .gcq__vd { max-width: 62ch; }
    .gcq--hero.gcq--done .gcq__ledgerL { columns: 2; column-gap: 34px; }
    .gcq--hero.gcq--done .gcq__ledgerL li { break-inside: avoid; }
}
@media (max-width: 560px) {
    .gcq__ledgerL b { min-width: 2.6em; }
    .gcq .gcq__unlockYes, .gcq .gcq__unlockNo { flex: 1 1 auto; justify-content: center; }
    /* chips wrap at their own width on a phone — seven full-width buttons read as a second, unfinished questionnaire */
    .gcq .gcq__group { min-height: 44px; padding: 0 12px; font-size: .84rem; }   /* 44px: the touch-target floor */
    /* the text column beside Save is ~180px on a phone: two lines held ~20 characters ("A federal program to increase the…") */
    .gcq__itemD { -webkit-line-clamp: 3; }
}

/* An orphan in the two-up grid: with the top card spanning both columns, six rows leave the
   last one alone in column 1 with a hole beside it. Span it only when it would BE alone —
   :nth-child(even) is true for the 6th item and false for the 5th, which is exactly the
   case where the remaining four pair up cleanly. */
@media (min-width: 1080px) {
    .gcq--hero.gcq--done .gcq__list > .gcq__item:last-child:nth-child(even) { grid-column: 1 / -1; }
    /* the held-back list below the gate has no spanning top card, so it is the ODD last row that sits alone */
    .gcq--hero.gcq--done .gcq__list--held > .gcq__item:last-child:nth-child(even) { grid-column: auto; }
    .gcq--hero.gcq--done .gcq__list--held > .gcq__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
    /* the Save control belongs to the row it saves — on a full-width top card it was ending
       up 1,460px from the title it applies to */
    .gcq--hero.gcq--done .gcq__item--top { max-width: 100%; }
    .gcq--hero.gcq--done .gcq__item--top .gcq__itemMain { max-width: 62ch; }
}
/* The ledger is the most trust-building object on the surface (results standard P3) and it
   was rendering as a whisper: a 13px line and a bare +. Give it a container that says
   "there is something in here" without competing with the gate above it. */
.gcq__ledger {
    background: rgba(255, 255, 255, .55);
    border: 1px solid var(--q-line); border-radius: 12px;
    padding: 2px 15px 4px; margin-top: 14px;
}
.gcq__ledger[open] { padding-bottom: 14px; }
.gcq__ledger > summary { justify-content: space-between; }

/* Five answer chips at 44px minimum touch height take three rows on a 350px card before
   any content — they are the repair affordance (P9) and stay, but they can be tighter. */
@media (max-width: 560px) {
    .gcq__chip { padding: 6px 11px; font-size: .78rem; gap: 5px; }
    .gcq__itemMeta { gap: 5px; }
    .gcq__tag { font-size: .68rem; }
}

/* ⚠ <summary> is neither a <button> nor an <a>, so the widget's focus-visible rule missed
   it entirely — the ledger disclosure was reachable by keyboard and showed no focus ring. */
.gcq summary:focus-visible {
    outline: 2px solid var(--q-sienna); outline-offset: 2px; border-radius: 8px;
}

/* The escape option is a way out, not a ninth peer — it should not compete with the eight
   real answers for a reader who does have one. */
.gcq__opt--esc {
    color: var(--q-ink-2); background: transparent;
    border-style: dashed; border-color: var(--q-line); font-weight: 400;
}
.gcq__opt--esc:hover { color: var(--q-forest); border-style: solid; background: var(--q-cream); }

/* ★★ THE STATED LOCK — what the insider-tip teaser becomes once the paid tier stops shipping.
   The blurred variant above renders 120 REAL characters of the tip and hides them with
   `filter: blur(3px)`, which gates nothing: the text is in the DOM and readable by script on
   every page this module touches. Post-flip we do not have that text and must not fabricate a
   stand-in, so there is no content layer at all — the overlay stands on its own and the panel
   states what is behind the lock instead of pretending to show it. */
.gc-lock-teaser--stated {
    min-height: 0;
    padding: 4px 0 0;
    background: none;
}
.gc-lock-teaser--stated .gc-lock-teaser-overlay {
    position: static;
    background: none;
    padding: 0;
}

/* ── Precision top-up card (guide_topup_v1 VARIANT, 2026-10-09 — sprint item 1) ──────────────────
   Replaces the variant's post-sign-up spinner card + Step-2 dialog with one inline card in the quiz's own
   chips: up to 3 missing answers → "Building your roadmap" → "Your roadmap is ready". Lives inside
   .gc-quiz-results (widget child), so the --q-* tokens apply. Mock: dev-assets/sprint-2026-10-06/page#i1. */
.gct {
    position: relative; margin: 0 0 20px; padding: 22px 22px 18px; text-align: left;
    background: #fff; border: 1.5px solid var(--q-forest); border-radius: 14px;
    box-shadow: 0 10px 30px -18px rgba(26,61,46,.45); color: var(--q-ink);
}
.gct__track { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; margin: 0 0 16px; }
.gct__seg { font-size: .74rem; font-weight: 600; color: #6F685C; letter-spacing: .01em; }
.gct__seg::before { content: ""; display: block; height: 4px; border-radius: 3px; background: var(--q-line); margin: 0 0 6px; }
.gct__seg--done { color: var(--q-forest); }
.gct__seg--done::before { background: var(--q-forest); }
.gct__seg--now { color: var(--q-sienna-dk); }
.gct__seg--now::before { background: linear-gradient(90deg, var(--q-sienna) var(--p, 34%), var(--q-line) var(--p, 34%)); }
.gct__h { font-family: var(--q-serif); font-weight: 400; font-size: 1.42rem; line-height: 1.2; letter-spacing: -.012em; color: var(--q-forest); margin: 0 0 6px; text-wrap: balance; }
.gct__s { font-size: .93rem; line-height: 1.5; color: var(--q-ink-2); margin: 0 0 18px; max-width: 58ch; }
.gct__s b { color: var(--q-ink); font-weight: 600; }
.gct__qn { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
.gct__q { font-size: 1.06rem; font-weight: 700; line-height: 1.35; margin: 0; color: var(--q-ink); }
.gct__count { font-size: .8rem; color: #6F685C; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gct__opts { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.gct__opts--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.gct .gcq__opt { width: 100%; }
.gct .gcq__opt.is-on { border-color: var(--q-forest); background: #eef4ef; box-shadow: inset 0 0 0 1px var(--q-forest); }
.gct__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 0; flex-wrap: wrap; }
.gct__skip { background: none; border: 0; padding: 10px 2px; min-height: 44px; font: inherit; font-size: .86rem; color: var(--q-ink-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.gct__skip:hover { color: var(--q-forest); }
.gct__known { font-size: .82rem; color: #6F685C; }
.gct__known b { color: var(--q-forest); font-weight: 600; }
.gct__field { margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--q-line); }
.gct__field label { display: block; font-size: .86rem; font-weight: 600; margin: 0 0 6px; }
.gct__field label em { font-style: normal; font-weight: 400; color: #6F685C; }
.gct__field input { width: 100%; box-sizing: border-box; border: 1.5px solid var(--q-line); border-radius: 10px; padding: 12px 14px; font: inherit; font-size: 16px; background: var(--q-cream); margin: 0 0 12px; }
.gct__field input:focus { outline: 2px solid var(--q-forest); outline-offset: 1px; }
.gct__err { margin: -4px 0 0; font-size: .82rem; color: #b3411f; }
.gct__err:empty { display: none; }
.gct__cta { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 26px; border: 0; border-radius: 999px; background: var(--q-sienna); color: #fff; font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer; text-decoration: none; box-shadow: 0 6px 16px -8px rgba(196,83,43,.7); }
.gct__cta:hover { background: var(--q-sienna-dk); color: #fff; }
.gct__cta:focus-visible, .gct__skip:focus-visible, .gct .gcq__opt:focus-visible { outline: 2px solid var(--q-forest); outline-offset: 2px; }
.gct__echo { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.gct__chip { font-size: .8rem; font-weight: 600; color: var(--q-forest); background: #eef4ef; border-radius: 999px; padding: 5px 11px; }
.gct__bar { height: 6px; border-radius: 4px; background: var(--q-line); overflow: hidden; margin: 4px 0 10px; }
.gct__bar i { display: block; height: 100%; width: 38%; border-radius: 4px; background: var(--q-sienna); animation: gctSlide 1.6s ease-in-out infinite; }
@keyframes gctSlide { 0% { transform: translateX(-100%); } 100% { transform: translateX(270%); } }
@media (prefers-reduced-motion: reduce) { .gct__bar i { animation: none; width: 100%; opacity: .35; } }
.gct__note { font-size: .84rem; color: var(--q-ink-2); margin: 0; line-height: 1.5; }
.gct__note a { color: var(--q-sienna); }
.gct__first { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 14px; align-items: center; padding: 14px 16px; border-radius: 12px; background: var(--q-cream); border: 1px solid var(--q-line); margin: 0 0 6px; }
.gct .gct__num { width: 34px; height: 34px; border-radius: 50%; background: var(--q-forest); color: #fff; font-weight: 700; display: grid; place-items: center; font-size: .95rem; }
.gct__first p { margin: 0; font-size: .8rem; color: #6F685C; }
.gct__first strong { display: block; font-size: .98rem; line-height: 1.3; color: var(--q-ink); }
@media (max-width: 560px) {
    .gct { padding: 18px 16px 14px; margin: 0 0 16px; }
    .gct__h { font-size: 1.26rem; }
    .gct__opts, .gct__opts--3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .gct__cta { width: 100%; }
    .gct__foot { flex-direction: column-reverse; align-items: stretch; }
    .gct__skip { align-self: center; }
}