/* Guide figures (2026-10-08): the drawn replacement for the image placeholders.
   A paper card with the dog-ear, an SVG drawn to scale, a legend and a note. */
.gsx-fig { margin: 0; background: #FFFCF5; border: 1px solid #DED5C2; border-radius: 0 0 12px 0; padding: 14px 14px 12px; }
.gsx-fig svg { display: block; width: 100%; height: auto; }
.gsx-fig figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 10px; font-size: 12px; color: #4E5E59; }
.gsx-fig .k { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: #14221F; }
.gsx-fig .k i { width: 14px; height: 3px; display: inline-block; }
.gsx-fig .k i.dash { height: 0; border-top: 2px dashed #14221F; background: none; }
.gsx-fig .note { margin-left: auto; font-size: 11px; color: #8B9690; }

/* Two lanes: how the customer finds you, and the job that fits. */
.gsx-fig.fit .lanes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gsx-fig.fit .lane { padding: 14px 14px 12px; border: 1px solid #DED5C2; border-radius: 0 0 12px 0; display: flex; flex-direction: column; gap: 8px; }
.gsx-fig.fit .lane.a { background: #EAF3F1; border-color: #AACCC4; }
.gsx-fig.fit .lane.b { background: #FFF5D6; border-color: #EFD090; }
.gsx-fig.fit .lh { margin: 0; font-size: 14px; font-weight: 700; color: #14221F; line-height: 1.25; }
.gsx-fig.fit .arrow { width: 2px; height: 18px; background: #F2452A; position: relative; margin-left: 10px; }
.gsx-fig.fit .arrow::after { content: ""; position: absolute; left: -4px; bottom: -1px; border: 5px solid transparent; border-top: 7px solid #F2452A; border-bottom: 0; }
.gsx-fig.fit .la { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #F2452A; }
.gsx-fig.fit .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gsx-fig.fit .ch { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #14221F; background: #FFFCF5; border: 1px solid #DED5C2; padding: 4px 8px 4px 5px; }
.gsx-fig.fit .ch img { width: 16px; height: 16px; object-fit: contain; }
/* The chooser: one question, three answers as rows, one platform each. */
.gsx-fig.pick .lq { margin: 0 0 10px; font-size: 15px; font-weight: 700; color: #14221F; }
.gsx-fig.pick .lanes { grid-template-columns: 1fr; gap: 8px; }
.gsx-fig.pick .lane { display: grid; grid-template-columns: 1fr 22px 1.15fr; gap: 0 10px; align-items: center; padding: 10px 12px; }
.gsx-fig.pick .lane.c { background: #FFFCF5; border-color: #DED5C2; }
.gsx-fig.pick .lh { font-size: 13px; }
.gsx-fig.pick .arrow { width: 18px; height: 2px; margin: 0; }
.gsx-fig.pick .arrow::after { left: auto; right: -1px; top: -4px; bottom: auto; border: 5px solid transparent; border-left: 7px solid #F2452A; border-right: 0; }
.gsx-fig.pick .pk { display: flex; flex-direction: column; gap: 4px; }
.gsx-fig.pick .lw { margin: 0; font-size: 12px; line-height: 1.35; color: #4E5E59; }
@media (max-width: 480px) { .gsx-fig.fit:not(.pick) .lanes { grid-template-columns: 1fr; } }

/* The one-variable test: two ad mock-ups, identical but for the highlighted layer. */
.gsx-fig.ab .ab-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gsx-fig.ab .ab-card { border: 1px solid #DED5C2; background: #FFFCF5; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.gsx-fig.ab .ab-card.win { border-color: #15504B; }
.gsx-fig.ab .ab-tag { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #8B9690; }
.gsx-fig.ab .ab-card.win .ab-tag { color: #15504B; }
.gsx-fig.ab .ab-img { aspect-ratio: 4 / 3; background: #BFE3D8; display: flex; align-items: center; justify-content: center; }
.gsx-fig.ab .ab-img svg { width: 34px; height: 34px; }
.gsx-fig.ab .ab-h { margin: 0; min-height: 2.6em; font-size: 13px; font-weight: 700; color: #14221F; line-height: 1.3; }
.gsx-fig.ab .ab-h mark { background: #FFD56B; color: inherit; padding: 0 3px; }
.gsx-fig.ab .ab-b { margin: 0; font-size: 11px; color: #4E5E59; line-height: 1.35; }
.gsx-fig.ab .ab-btn { align-self: flex-start; font-size: 11px; font-weight: 700; color: #fff; background: #15504B; padding: 4px 9px; }
.gsx-fig.ab .ab-r { margin: 4px 0 0; padding-top: 6px; border-top: 1px solid #DED5C2; font-size: 12px; color: #4E5E59; font-variant-numeric: tabular-nums; }
.gsx-fig.ab .ab-r strong { font-size: 15px; color: #14221F; }
.gsx-fig.ab .ab-card.win .ab-r strong { color: #15504B; }

/* The phone mock-up: what a customer sees, with the things they check highlighted. */
.gsx-fig.mock .mo-phone { width: min(100%, 236px); margin: 0 auto; border: 2px solid #14221F; border-radius: 0 0 16px 0; background: #FFFCF5; padding: 12px; display: flex; flex-direction: column; gap: 7px; }
.gsx-fig.mock .mo-img { aspect-ratio: 16 / 9; background: #BFE3D8; }
.gsx-fig.mock .mo-h { margin: 0; font-size: 14px; font-weight: 700; color: #14221F; line-height: 1.25; }
.gsx-fig.mock .mo-p { margin: 0; font-size: 11.5px; color: #4E5E59; line-height: 1.35; }
.gsx-fig.mock .mo-m { margin: 0; font-size: 11.5px; font-weight: 600; color: #14221F; line-height: 1.45; }
.gsx-fig.mock .mo-m mark { background: #FFD56B; color: inherit; padding: 0 3px; }
.gsx-fig.mock .mo-btn { margin-top: 3px; font-size: 12px; font-weight: 700; color: #fff; background: #15504B; padding: 7px 10px; text-align: center; }
.gsx-fig.mock .mo-btn.m { outline: 3px solid #FFD56B; }