/* =========================================================================
   Guide pages and their interactive checklists.

   Layers on top of construction-templates.css, which already supplies the
   download card (.ct-dl), the ticked list (.ct-list) and the long-form body
   (.ct-body). Everything here is specific to guides: the dual offer, the
   section blocks, the scored quiz, the tracker, and the print stylesheet.

   Namespace: .gd-
   ========================================================================= */

.gd-page { --gd-accent: #009282; --gd-accent-d: #00746a; --gd-ink: #013b35; --gd-line: rgba(0, 146, 130, .18); }

.gd-col { max-width: 820px; margin: 0 auto; }

.gd-h1 {
    font-family: 'Lexend', system-ui, sans-serif;
    font-size: clamp(1.85rem, 3.8vw, 2.6rem); font-weight: 900; line-height: 1.18;
    color: var(--gd-ink); margin: 14px 0 16px;
}
.gd-intro { font-family: 'Manrope', system-ui, sans-serif; font-size: 1.1rem; line-height: 1.72; color: #4b6b71; margin: 0 0 8px; }
.gd-backlink { font-family: 'Manrope', system-ui, sans-serif; font-size: .98rem; line-height: 1.7; color: #4b6b71; margin: 18px 0 0; }
.gd-backlink a { color: var(--gd-accent-d); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.gd-body { margin-top: 8px; }

/* ---------- "What this is" expectation setter -----------------------------
   The two checklists behave differently: one scores, one tracks. Saying which
   up front stops people working a 51-item list waiting for a result. */
.gd-whatis {
    margin: 24px 0 0; padding: 20px 24px;
    background: #f4fbfa; border: 1px solid var(--gd-line);
    border-left: 4px solid var(--gd-accent); border-radius: 0 14px 14px 0;
}
.gd-whatis b { display: block; font-family: 'Lexend', system-ui, sans-serif; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gd-accent-d); margin-bottom: 8px; }
.gd-whatis p { margin: 0; font-family: 'Manrope', system-ui, sans-serif; font-size: 1rem; line-height: 1.66; color: #33555b; }
.gd-whatis-alt { margin-top: 12px !important; padding-top: 12px; border-top: 1px solid rgba(0, 146, 130, .16); font-size: .94rem !important; color: #5d7c82 !important; }
.gd-whatis-alt a { color: var(--gd-accent-d); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Score gate ----------------------------------------------------
   Sits between the questions and the result, and only after all 20 are
   answered. Gating at that point trades on the effort already spent, rather
   than blocking the page before any value has been given. */
.gd-gate {
    margin-top: 30px; padding: 28px 30px; border-radius: 20px;
    background: linear-gradient(160deg, #f4fbfa, #e9f5f3);
    border: 2px solid rgba(0, 146, 130, .34);
    box-shadow: 0 12px 32px rgba(1, 59, 53, .1);
    animation: gdGateIn .24s cubic-bezier(.2, .8, .3, 1);
}
@keyframes gdGateIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.gd-gate-eyebrow { display: block; font-family: 'Manrope', system-ui, sans-serif; font-size: .72rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--gd-accent); margin-bottom: 8px; }
.gd-gate { text-align: center; }
.gd-gate h3 { font-family: 'Lexend', system-ui, sans-serif; font-size: 1.5rem; font-weight: 900; color: var(--gd-ink); margin: 0 0 8px; }
.gd-gate > p { font-family: 'Manrope', system-ui, sans-serif; font-size: 1rem; line-height: 1.6; color: #4b6b71; margin: 0 0 20px; }
.gd-gate .ct-gate-btn { border: 0; }
.gd-gate-err { margin: 12px 0 0; font-family: 'Manrope', system-ui, sans-serif; font-size: .9rem; font-weight: 700; color: #dc2626; }

/* ---------- Print button after the list ----------------------------------- */
.gd-print-end { text-align: center; margin: 32px 0 8px; padding-top: 26px; border-top: 1px solid var(--gd-line); }
.gd-print-end .ct-gate-btn { border: 0; }

/* ---------- Dual offer ---------------------------------------------------- */
.gd-offer { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 30px 0 40px; }
.gd-offer-card {
    display: flex; flex-direction: column; align-items: flex-start;
    padding: 26px 24px; border-radius: 18px;
    border: 1px solid var(--gd-line); background: #fff;
    box-shadow: 0 2px 10px rgba(1, 59, 53, .05);
    text-decoration: none; color: inherit;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
/* The checklist option carries more weight than the PDF one: since the
   checklists are no longer listed on the hub, this card is the main route to
   the tool and needs to look like the primary action. */
.gd-offer-card--primary {
    background: linear-gradient(160deg, #f4fbfa, #e9f5f3);
    border-color: rgba(0, 146, 130, .42); border-width: 2px;
    box-shadow: 0 6px 20px rgba(0, 146, 130, .12);
}
.gd-offer-card--primary .gd-offer-ico { background: linear-gradient(135deg, var(--gd-accent), var(--gd-accent-d)); }
.gd-offer-card--primary .gd-offer-ico svg { stroke: #fff; }
.gd-offer-tag {
    position: absolute; top: -11px; left: 22px;
    padding: 4px 12px; border-radius: 999px;
    background: linear-gradient(135deg, var(--gd-accent), var(--gd-accent-d)); color: #fff;
    font-family: 'Manrope', system-ui, sans-serif; font-size: .66rem; font-weight: 800;
    letter-spacing: .12em; text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(0, 146, 130, .3);
}
.gd-offer-card { position: relative; }
.gd-offer-card:hover { transform: translateY(-3px); border-color: rgba(0, 146, 130, .5); box-shadow: 0 16px 32px rgba(1, 59, 53, .11); }

.gd-offer-ico { width: 44px; height: 44px; border-radius: 12px; background: #e6f5f3; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.gd-offer-ico svg { width: 21px; height: 21px; fill: none; stroke: var(--gd-accent-d); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gd-offer-card h3 { font-family: 'Lexend', system-ui, sans-serif; font-size: 1.16rem; font-weight: 800; color: var(--gd-ink); margin: 0 0 8px; }
.gd-offer-card p { font-family: 'Manrope', system-ui, sans-serif; font-size: .95rem; line-height: 1.6; color: #4b6b71; margin: 0 0 18px; }
.gd-offer-btn {
    margin-top: auto; display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 20px; border-radius: 11px;
    background: linear-gradient(135deg, var(--gd-accent), var(--gd-accent-d)); color: #fff;
    font-family: 'Manrope', system-ui, sans-serif; font-weight: 800; font-size: .93rem;
    text-decoration: none; box-shadow: 0 8px 18px rgba(0, 146, 130, .24);
}
.gd-offer-btn--ghost { background: #fff; color: var(--gd-accent-d); border: 1.5px solid rgba(0, 146, 130, .38); box-shadow: none; }
.gd-offer-btn--ghost:hover { background: #e6f5f3; }

/* PDF not on the server yet. An expected state, not an error, so it reads as
   information rather than a failure. */
.gd-pending {
    max-width: 560px; margin: 0 auto; padding: 20px 24px; text-align: left;
    background: #f4fbfa; border: 1px solid var(--gd-line); border-radius: 14px;
}
.gd-pending b { display: block; font-family: 'Lexend', system-ui, sans-serif; font-size: 1.05rem; color: var(--gd-ink); margin-bottom: 6px; }
.gd-pending p { margin: 0; font-family: 'Manrope', system-ui, sans-serif; font-size: .94rem; line-height: 1.62; color: #4b6b71; }

/* ---------- Section blocks ------------------------------------------------
   Each section is a card rather than a run of text divided by rules. On a page
   carrying 20 questions or 9 checklists, plain dividers made every block look
   the same and the page read as one long wall. */
.gd-sec {
    padding: 24px 26px; margin-bottom: 16px;
    background: #fff; border: 1px solid var(--gd-line); border-radius: 16px;
    box-shadow: 0 2px 10px rgba(1, 59, 53, .05);
}
.gd-sec:last-child { margin-bottom: 0; }
.gd-sec-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 12px; }
.gd-sec-key {
    flex: 0 0 46px; width: 46px; height: 46px; border-radius: 12px;
    background: linear-gradient(135deg, var(--gd-accent), var(--gd-accent-d)); color: #fff;
    font-family: 'Lexend', system-ui, sans-serif; font-size: 1.02rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.gd-sec-head h2, .gd-sec-head h3 { font-family: 'Lexend', system-ui, sans-serif; font-size: 1.28rem; font-weight: 800; color: var(--gd-ink); margin: 0 0 4px; line-height: 1.3; }
.gd-sec-lead { font-family: 'Manrope', system-ui, sans-serif; font-size: .95rem; color: #4b6b71; margin: 0; }
.gd-sec-note {
    font-family: 'Manrope', system-ui, sans-serif; font-size: .93rem; line-height: 1.62;
    color: #5d7c82; margin: 0 0 18px; padding: 12px 16px;
    background: #f4fbfa; border-left: 3px solid rgba(0, 146, 130, .38); border-radius: 0 10px 10px 0;
}
.gd-sec-list { padding-left: 0; }
.gd-sec-done { margin-left: auto; align-self: center; padding: 4px 12px; border-radius: 999px; background: #e6f5f3; color: var(--gd-accent-d); font-family: 'Manrope', system-ui, sans-serif; font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

/* ---------- Item markers --------------------------------------------------
   Numbered for questions, empty boxes for tasks. A filled green tick would
   say "already done", which is false on both of these pages. */
.gd-qlist { list-style: none; counter-reset: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.gd-qlist li { position: relative; padding-left: 40px; font-family: 'Manrope', system-ui, sans-serif; font-size: 1rem; line-height: 1.6; color: #33555b; }
.gd-qlist li::before {
    content: counter(list-item); position: absolute; left: 0; top: 1px;
    width: 27px; height: 27px; border-radius: 8px;
    background: #e6f5f3; color: var(--gd-accent-d);
    font-family: 'Lexend', system-ui, sans-serif; font-size: .8rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}

.gd-todo { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.gd-todo li { position: relative; padding-left: 34px; font-family: 'Manrope', system-ui, sans-serif; font-size: 1rem; line-height: 1.6; color: #33555b; }
.gd-todo li::before {
    content: ''; position: absolute; left: 0; top: 3px;
    width: 19px; height: 19px; border-radius: 6px;
    border: 2px solid rgba(0, 146, 130, .38); background: #fff;
}

/* ---------- Result bands (guide page) ------------------------------------- */
.gd-bands { display: grid; gap: 14px; margin-bottom: 28px; }
.gd-band { display: flex; gap: 18px; align-items: stretch; border: 1px solid var(--gd-line); border-radius: 14px; overflow: hidden; background: #fff; }
.gd-band-range {
    flex: 0 0 92px; display: flex; align-items: center; justify-content: center;
    font-family: 'Lexend', system-ui, sans-serif; font-size: .92rem; font-weight: 800; color: #fff; text-align: center; padding: 16px 8px;
}
.gd-band--good .gd-band-range { background: #0e9f6e; }
.gd-band--warn .gd-band-range { background: #d97706; }
.gd-band--bad  .gd-band-range { background: #dc2626; }
.gd-band-body { padding: 16px 20px 16px 0; }
.gd-band-body b { display: block; font-family: 'Lexend', system-ui, sans-serif; font-size: 1.02rem; color: var(--gd-ink); margin-bottom: 5px; }
.gd-band-body p { font-family: 'Manrope', system-ui, sans-serif; font-size: .94rem; line-height: 1.62; color: #4b6b71; margin: 0; }

.gd-callout { border-left: 4px solid var(--gd-accent); background: #f4fbfa; border-radius: 0 12px 12px 0; padding: 18px 22px; margin: 24px 0; }
.gd-callout b { display: block; font-family: 'Lexend', system-ui, sans-serif; font-size: 1.02rem; color: var(--gd-ink); margin-bottom: 6px; }
.gd-callout p { font-family: 'Manrope', system-ui, sans-serif; font-size: .95rem; line-height: 1.65; color: #4b6b71; margin: 0; }
.gd-callout a { color: var(--gd-accent-d); font-weight: 700; }

.gd-inline-cta { text-align: center; margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--gd-line); }
.gd-inline-cta p { font-family: 'Manrope', system-ui, sans-serif; font-size: 1rem; color: #4b6b71; margin: 0 0 14px; }

/* ---------- Running score / progress bar ---------------------------------- */
.gd-score-bar {
    position: sticky; top: 0; z-index: 20;
    background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px);
    border: 1px solid var(--gd-line); border-radius: 14px;
    padding: 14px 18px; margin-bottom: 26px;
    box-shadow: 0 6px 18px rgba(1, 59, 53, .07);
}
.gd-score-track { height: 8px; border-radius: 999px; background: #e3eeec; overflow: hidden; }
.gd-score-fill { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--gd-accent), var(--gd-accent-d)); transition: width .25s ease; }
.gd-score-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 9px; font-family: 'Manrope', system-ui, sans-serif; }
.gd-score-count { font-size: .95rem; font-weight: 700; color: var(--gd-ink); }
.gd-score-count b { font-size: 1.15rem; color: var(--gd-accent-d); }
.gd-score-ans { font-size: .85rem; color: #7c9499; font-weight: 600; }

/* ---------- Scored quiz --------------------------------------------------- */
.gd-q { display: flex; gap: 18px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 14px 0; border-top: 1px solid rgba(0, 146, 130, .1); }
.gd-q.is-answered { opacity: .82; }
.gd-q-text { flex: 1 1 380px; font-family: 'Manrope', system-ui, sans-serif; font-size: .98rem; line-height: 1.58; color: #33555b; margin: 0; }
.gd-q-num { display: inline-block; min-width: 26px; font-weight: 800; color: var(--gd-accent); }
.gd-q-opts { display: flex; gap: 8px; flex: 0 0 auto; }
.gd-opt {
    min-width: 68px; padding: 9px 18px; border-radius: 10px; cursor: pointer;
    border: 1.5px solid rgba(0, 146, 130, .28); background: #fff; color: var(--gd-accent-d);
    font-family: 'Manrope', system-ui, sans-serif; font-weight: 800; font-size: .92rem;
    transition: background .14s ease, color .14s ease, border-color .14s ease, transform .14s ease;
}
.gd-opt:hover { background: #e6f5f3; transform: translateY(-1px); }
.gd-opt.is-on { background: linear-gradient(135deg, var(--gd-accent), var(--gd-accent-d)); border-color: transparent; color: #fff; box-shadow: 0 6px 14px rgba(0, 146, 130, .26); }

/* ---------- Result -------------------------------------------------------- */
.gd-result { margin-top: 32px; padding: 30px 28px; border-radius: 20px; border: 1px solid var(--gd-line); background: linear-gradient(160deg, #f4fbfa, #e9f5f3); text-align: center; }
.gd-result-eyebrow { display: block; font-family: 'Manrope', system-ui, sans-serif; font-size: .74rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--gd-accent); margin-bottom: 10px; }
.gd-result-score { font-family: 'Lexend', system-ui, sans-serif; margin-bottom: 18px; }
.gd-result-score b { font-size: 3.2rem; font-weight: 900; color: var(--gd-ink); line-height: 1; }
.gd-result-score span { font-size: 1.2rem; font-weight: 700; color: #7c9499; margin-left: 6px; }
.gd-result-band { text-align: left; padding: 18px 22px; border-radius: 14px; background: #fff; border-left: 5px solid var(--gd-accent); }
.gd-result-band--good { border-left-color: #0e9f6e; }
.gd-result-band--warn { border-left-color: #d97706; }
.gd-result-band--bad  { border-left-color: #dc2626; }
.gd-result-band b { display: block; font-family: 'Lexend', system-ui, sans-serif; font-size: 1.1rem; color: var(--gd-ink); margin-bottom: 6px; }
.gd-result-band p { font-family: 'Manrope', system-ui, sans-serif; font-size: .96rem; line-height: 1.65; color: #4b6b71; margin: 0; }
.gd-result-flag { text-align: left; margin-top: 14px; padding: 16px 20px; border-radius: 12px; background: #fff7ed; border-left: 5px solid #ea580c; }
.gd-result-flag b { display: block; font-family: 'Lexend', system-ui, sans-serif; font-size: 1rem; color: #9a3412; margin-bottom: 5px; }
.gd-result-flag p { font-family: 'Manrope', system-ui, sans-serif; font-size: .93rem; line-height: 1.62; color: #7c2d12; margin: 0; }
.gd-result-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; margin-top: 22px; }
.gd-restart {
    padding: 11px 20px; border-radius: 11px; cursor: pointer;
    border: 1.5px solid rgba(0, 146, 130, .3); background: #fff; color: var(--gd-accent-d);
    font-family: 'Manrope', system-ui, sans-serif; font-weight: 800; font-size: .92rem;
}
.gd-restart:hover { background: #e6f5f3; }

/* ---------- One-line intro on the tool pages ------------------------------
   These are tools, not articles. Everything that sat between the heading and
   the tool itself, a full-width poster and a four-step panel included, pushed
   the thing people came for below the fold. One line stays, the rest folds. */
.gd-oneline {
    margin: 16px 0 0; padding: 13px 18px;
    background: #f4fbfa; border-left: 3px solid var(--gd-accent); border-radius: 0 10px 10px 0;
    font-family: 'Manrope', system-ui, sans-serif; font-size: .98rem; line-height: 1.6; color: #33555b;
}
.gd-oneline b { color: var(--gd-ink); }
.gd-oneline-more { margin-left: 6px; color: var(--gd-accent-d); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }

/* Sits on the action row as a peer of the buttons, not as a stray line of text
   beneath them. Opening gives it the full row. */
.gd-howdet { margin: 0; }
.gd-howdet[open] { flex: 1 0 100%; }

.gd-howdet > summary {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px; border-radius: 999px; cursor: pointer; list-style: none;
    border: 1.5px solid rgba(0, 146, 130, .3); background: #fff;
    font-family: 'Manrope', system-ui, sans-serif; font-size: .92rem; font-weight: 800;
    color: var(--gd-accent-d);
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.gd-howdet > summary::-webkit-details-marker { display: none; }
.gd-howdet > summary:hover { background: #e6f5f3; border-color: var(--gd-accent); transform: translateY(-1px); }
.gd-howdet[open] > summary { background: linear-gradient(135deg, var(--gd-accent), var(--gd-accent-d)); border-color: transparent; color: #fff; }

.gd-howdet-i { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gd-howdet-chev {
    width: 8px; height: 8px; margin-left: 2px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .2s ease;
}
.gd-howdet[open] > summary .gd-howdet-chev { transform: rotate(-135deg) translate(-3px, -3px); }

.gd-howdet-panel {
    margin-top: 14px; padding: 22px 26px;
    background: linear-gradient(160deg, #f4fbfa 0%, #eaf6f3 100%);
    border: 1px solid var(--gd-line); border-radius: 16px;
    box-shadow: 0 4px 14px rgba(1, 59, 53, .06);
    animation: gdHowIn .2s ease;
}
@keyframes gdHowIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.gd-howdet-panel .gd-howto { margin-top: 0; }

/* Icons on the two action buttons, so the row reads as one set of controls. */
.gd-track-actions .gd-restart { display: inline-flex; align-items: center; gap: 8px; }
.gd-track-actions .gd-restart svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- How-to steps -------------------------------------------------- */
.gd-howto { margin: 14px 0 0; padding-left: 20px; display: grid; gap: 8px; }
.gd-howto li { font-family: 'Manrope', system-ui, sans-serif; font-size: .96rem; line-height: 1.6; color: #33555b; }
.gd-howto li b { color: var(--gd-ink); }

/* ---------- Section jump list --------------------------------------------- */
.gd-printhead { display: none; }

.gd-secnav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 22px; }
.gd-secnav a {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 12px; border-radius: 11px;
    border: 1px solid var(--gd-line); background: #fff; text-decoration: none;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.gd-secnav a:hover { border-color: rgba(0, 146, 130, .45); background: #f4fbfa; transform: translateY(-1px); }
.gd-secnav-num {
    flex: 0 0 26px; width: 26px; height: 26px; border-radius: 7px;
    background: #e6f5f3; color: var(--gd-accent-d);
    font-family: 'Lexend', system-ui, sans-serif; font-size: .74rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.gd-secnav-title {
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: 'Manrope', system-ui, sans-serif; font-size: .84rem; font-weight: 700; color: var(--gd-ink);
}
.gd-secnav-count { font-family: 'Manrope', system-ui, sans-serif; font-size: .74rem; font-weight: 700; color: #7c9499; }

.gd-secnav a.is-started .gd-secnav-num { background: #fff3d6; color: #a16207; }
.gd-secnav a.is-done { border-color: rgba(14, 159, 110, .4); background: #f0fbf6; }
.gd-secnav a.is-done .gd-secnav-num { background: #0e9f6e; color: #fff; }
.gd-secnav a.is-done .gd-secnav-title { color: #57736f; }

@media (max-width: 860px) { .gd-secnav { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .gd-secnav { grid-template-columns: 1fr; } }

/* ---------- Stepper -------------------------------------------------------
   is-stepped is added by script, never here, so the whole list stays visible
   and usable when JavaScript is unavailable. Print overrides it below, because
   a printed sheet must carry every section, not just the one on screen. */
.gd-steps.is-stepped > .gd-sec { display: none; }
.gd-steps.is-stepped > .gd-sec.is-current { display: block; animation: gdStepIn .18s ease; }
@keyframes gdStepIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.gd-stepnav {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--gd-line);
}
.gd-step-btn {
    padding: 11px 22px; border-radius: 11px; cursor: pointer;
    border: 1.5px solid rgba(0, 146, 130, .3); background: #fff; color: var(--gd-accent-d);
    font-family: 'Manrope', system-ui, sans-serif; font-weight: 800; font-size: .93rem;
    transition: background .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.gd-step-btn:hover:not(:disabled) { background: #e6f5f3; transform: translateY(-1px); }
.gd-step-btn:disabled { opacity: .4; cursor: default; }
.gd-step-btn--next { background: linear-gradient(135deg, var(--gd-accent), var(--gd-accent-d)); border-color: transparent; color: #fff; }
.gd-step-btn--next:hover:not(:disabled) { background: linear-gradient(135deg, var(--gd-accent), var(--gd-accent-d)); box-shadow: 0 10px 22px rgba(0, 146, 130, .3); }
/* Nudges the eye onward once the current section is fully ticked. */
.gd-step-btn--next.is-ready { box-shadow: 0 0 0 4px rgba(0, 146, 130, .18); }
.gd-step-label { font-family: 'Manrope', system-ui, sans-serif; font-size: .88rem; font-weight: 700; color: #7c9499; }

/* Current section in the jump list */
.gd-secnav a.is-current { border-color: var(--gd-accent); background: #e6f5f3; box-shadow: 0 0 0 2px rgba(0, 146, 130, .16); }
.gd-secnav a.is-current .gd-secnav-title { color: var(--gd-ink); }

/* ---------- Tracker ------------------------------------------------------- */
.gd-track-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 24px; }
.gd-saved { font-family: 'Manrope', system-ui, sans-serif; font-size: .84rem; font-weight: 700; color: var(--gd-accent-d); }
.gd-sec--track.is-done .gd-sec-key { background: #0e9f6e; }

.gd-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.gd-check { display: flex; gap: 12px; align-items: flex-start; padding: 9px 10px; border-radius: 10px; cursor: pointer; transition: background .14s ease; }
.gd-check:hover { background: #f4fbfa; }
.gd-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gd-check-box { flex: 0 0 21px; width: 21px; height: 21px; margin-top: 2px; border-radius: 6px; border: 2px solid rgba(0, 146, 130, .35); background: #fff; transition: background .14s ease, border-color .14s ease; }
.gd-check input:checked + .gd-check-box {
    background: var(--gd-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 6'/%3E%3C/svg%3E") center / 13px no-repeat;
    border-color: var(--gd-accent);
}
.gd-check input:focus-visible + .gd-check-box { box-shadow: 0 0 0 3px rgba(0, 146, 130, .25); }
.gd-check-text { font-family: 'Manrope', system-ui, sans-serif; font-size: .97rem; line-height: 1.58; color: #33555b; }
.gd-check input:checked ~ .gd-check-text { color: #7c9499; text-decoration: line-through; text-decoration-color: rgba(0, 146, 130, .4); }

/* ---------- Responsive ---------------------------------------------------- */
@media (max-width: 760px) {
    .gd-offer { grid-template-columns: 1fr; }
    .gd-sec-note, .gd-sec-list, .gd-checks { padding-left: 0; }
    .gd-q { padding-left: 0; }
    .gd-q-opts { width: 100%; }
    .gd-opt { flex: 1; }
    .gd-band { flex-direction: column; }
    .gd-band-range { flex: 0 0 auto; padding: 8px; }
    .gd-band-body { padding: 16px 18px; }
    .gd-score-bar { padding: 12px 14px; }
}

/* =========================================================================
   Print. The checklist has to survive being printed and worked on paper,
   which is how a lot of contractors will actually use it.
   ========================================================================= */
@media print {
    .gd-noprint,
    .lp-nav, header, footer,
    .cr-stick-contact, .qbi-sticky-cta, .ct-recent,
    .qbi-final-cta, .bti-hublink, .ct-dl,
    .gd-offer, .gd-track-actions, .gd-result-actions { display: none !important; }

    /* Strip the page chrome so the list gets the whole sheet. */
    .qb-int-page, .qbi-section, .qbi-section--alt { background: #fff !important; padding: 0 !important; }
    .qbi-container, .gd-col { max-width: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }

    body { font-size: 11pt; color: #000; background: #fff; }
    .gd-h1 { font-size: 20pt; margin: 0 0 8pt; color: #000; }
    .gd-intro { font-size: 10.5pt; color: #333; margin-bottom: 14pt; }

    /* A printed sheet carries every section, not just the one on screen. */
    .gd-steps.is-stepped > .gd-sec { display: block !important; }
    .gd-stepnav { display: none !important; }

    /* Keep a section and its items on the same sheet where possible. */
    .gd-sec { break-inside: avoid; page-break-inside: avoid; padding: 10pt 0; border-top: 1px solid #ccc; }
    .gd-sec-head h2, .gd-sec-head h3 { font-size: 13pt; color: #000; }
    .gd-sec-key { background: #000 !important; color: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .gd-sec-note { font-size: 9.5pt; color: #444; }

    /* Print must show what is actually ticked. An earlier version forced every
       box empty on the theory that people print a blank list to work from, but
       that made the "print my checklist" button produce a blank sheet, which
       is the opposite of its purpose. Printing early gives a blank list
       naturally, because nothing is ticked yet. */
    .gd-check-box {
        position: relative;
        border: 1.5pt solid #000 !important; background: #fff !important;
        width: 13pt !important; height: 13pt !important;
    }
    /* A glyph, not the screen background image: printers routinely drop
       background images even with print-color-adjust set. */
    .gd-check input:checked + .gd-check-box::after {
        content: "X";
        position: absolute; inset: 0;
        display: flex; align-items: center; justify-content: center;
        font-family: Arial, sans-serif; font-size: 10pt; font-weight: 700; color: #000;
        line-height: 1;
    }
    .gd-check-text { color: #000 !important; }
    .gd-check input:checked ~ .gd-check-text {
        color: #555 !important;
        text-decoration: line-through !important;
        text-decoration-color: #555 !important;
    }

    /* Print-only summary, so a printed sheet says what it is and how far along
       it was when it left the screen. */
    .gd-printhead { display: block !important; margin: 0 0 14pt; padding-bottom: 8pt; border-bottom: 1.5pt solid #000; }
    .gd-printhead b { font-size: 12pt; }
    .gd-printhead span { display: block; margin-top: 3pt; font-size: 10pt; color: #333; }

    .gd-q { break-inside: avoid; page-break-inside: avoid; }
    .gd-band { break-inside: avoid; page-break-inside: avoid; border: 1px solid #999; }
    .gd-band-range { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

    a { text-decoration: none; color: #000; }
    .ct-body a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}