body.gx {
    --gx-field: #E4E0DA;
    --gx-field-2: #E9E6E1;
    --gx-field-3: #EFEDE9;
    --gx-ground: #F2F0EC;
    --gx-surface: #FFFFFF;
    --gx-ink: #111111;
    --gx-ink-muted: #46443F;
    --gx-ink-faint: #64605A;
    --gx-line: rgba(17, 17, 17, 0.08);
    --gx-line-strong: rgba(17, 17, 17, 0.14);
    --gx-accent: #C23A16;
    --gx-accent-text: #B03413;
    --gx-accent-tint: #FDF3EF;
    --gx-accent-ink: #8E2A10;
    --gx-success: #1F6B4A;
    --gx-success-tint: #EFF3EC;
    --gx-tint: #F6F5F2;
    --gx-tint-soft: #FAF9F7;

    background:
        linear-gradient(176deg,
            var(--gx-field) 0%,
            var(--gx-field-2) 14%,
            var(--gx-field-3) 30%,
            var(--gx-ground) 52%,
            var(--gx-ground) 100%)
        no-repeat;
    background-attachment: scroll;
    color: var(--gx-ink);
    font-family: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Headings take tracking only. Setting a colour here overrode white text
   inside dark cards — it made the Pro plan's own name near-black on
   near-black. Tailwind's own text-* classes carry the colour. */
body.gx h1,
body.gx h2,
body.gx h3 {
    letter-spacing: -0.03em;
}

body.gx h1 {
    letter-spacing: -0.038em;
    line-height: 1.02;
}

body.gx .gx-em {
    font-family: 'Instrument Serif', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    color: var(--gx-accent);
    letter-spacing: -0.02em;
}

body.gx .text-slate-900 { color: var(--gx-ink); }
body.gx .text-slate-600,
body.gx .text-slate-700 { color: var(--gx-ink-muted); }
body.gx .text-slate-500,
body.gx .text-slate-400 { color: var(--gx-ink-faint); }

/* header becomes a floating pill */
body.gx > header,
body.gx header.site-header {
    background: transparent;
    border-bottom: 0;
}

body.gx .gx-pill {
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(17, 17, 17, 0.07);
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04), 0 14px 34px -24px rgba(17, 17, 17, 0.3);
}

/* primary actions */
body.gx .bg-blue-600,
body.gx .bg-blue-700 {
    background-color: var(--gx-accent);
}

body.gx .hover\:bg-blue-700:hover {
    background-color: var(--gx-accent-ink);
}

body.gx .text-blue-600,
body.gx .text-blue-700,
body.gx .text-blue-800 {
    color: var(--gx-accent);
}

body.gx .border-blue-300,
body.gx .border-blue-600 {
    border-color: var(--gx-accent);
}

body.gx .hover\:bg-blue-50:hover {
    background-color: var(--gx-accent-tint);
}

body.gx .hover\:text-blue-700:hover,
body.gx .hover\:text-blue-900:hover {
    color: var(--gx-accent-ink);
}

/* surfaces */
body.gx .bg-white {
    background-color: var(--gx-surface);
}

body.gx .border-slate-200,
body.gx .border-gray-200 {
    border-color: var(--gx-line);
}

body.gx .rounded-xl,
body.gx .rounded-2xl { border-radius: 16px; }

/* pill buttons */
body.gx a.gx-cta,
body.gx button.gx-cta {
    border-radius: 999px;
    min-height: 54px;
    padding-inline: 28px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

body.gx .gx-cta-primary {
    background: var(--gx-accent);
    color: #FFFFFF;
}

body.gx .gx-cta-primary:hover {
    background: var(--gx-accent-ink);
    color: #FFFFFF;
}

body.gx .gx-cta-secondary {
    background: var(--gx-surface);
    color: var(--gx-ink);
    border: 1px solid var(--gx-line-strong);
}

/* the upload surface, shared component, restyled only here */
body.gx .border-dashed {
    border-color: rgba(17, 17, 17, 0.18);
    background: var(--gx-tint-soft);
    border-radius: 16px;
}

body.gx input[type="range"],
body.gx input[type="checkbox"],
body.gx input[type="radio"],
body.gx progress {
    accent-color: var(--gx-accent);
}

/* trust chips */
body.gx .gx-chip {
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(17, 17, 17, 0.07);
    border-radius: 999px;
    padding: 9px 17px;
    font-size: 13.5px;
    color: var(--gx-ink-muted);
}

/* dark panel */
body.gx .gx-dark {
    background: var(--gx-ink);
    color: #E9E6E0;
    border-radius: 26px;
}

body.gx .gx-dark h2,
body.gx .gx-dark h3 {
    color: #FFFFFF;
}

body.gx .gx-stat {
    font-family: 'Instrument Serif', Georgia, serif;
    font-weight: 400;
    line-height: 1;
}

/* No entry animation on the headline. It began at opacity 0 with a `both`
   fill, so every refresh showed a flicker, and the H1 is the largest
   contentful paint — animating it delays LCP for decoration. */

/* remaining blue tints in shared components, neutralised on this page only */
body.gx .bg-blue-50,
body.gx .bg-blue-100 {
    background-color: var(--gx-accent-tint);
}

body.gx .bg-blue-500 {
    background-color: var(--gx-accent);
}

body.gx .border-blue-100,
body.gx .border-blue-200,
body.gx .border-blue-400,
body.gx .border-blue-500 {
    border-color: rgba(194, 58, 22, 0.28);
}

body.gx .text-blue-900 {
    color: var(--gx-accent-ink);
}

body.gx .from-blue-50 {
    --tw-gradient-from: var(--gx-accent-tint);
}

body.gx .focus\:bg-blue-600:focus,
body.gx .focus\:ring-blue-500:focus {
    background-color: var(--gx-accent);
    --tw-ring-color: var(--gx-accent);
}

/* ---------- FAQ ---------- */
body.gx #faq-section-heading,
body.gx .pg-h2,
body.gx .pg-h2-quiet {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--gx-ink);
}

@media (min-width: 768px) {
    body.gx #faq-section-heading,
    body.gx .pg-h2,
    body.gx .pg-h2-quiet {
        font-size: 1.875rem;
    }
}

body.gx h2.text-2xl,
body.gx h2.text-3xl,
body.gx h2.text-4xl {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.03em;
}

@media (min-width: 768px) {
    body.gx h2.text-2xl,
    body.gx h2.text-3xl,
    body.gx h2.text-4xl {
        font-size: 1.875rem;
    }
}

body.gx details.group {
    background: var(--gx-surface);
    border: 1px solid var(--gx-line);
    border-radius: 16px;
    margin-bottom: 8px;
    padding: 0 20px;
    transition: border-color 0.18s ease;
}

body.gx details.group:hover {
    border-color: var(--gx-line-strong);
}

body.gx details.group[open] {
    border-color: rgba(194, 58, 22, 0.3);
}

body.gx details.group summary {
    padding: 18px 0;
}

body.gx details.group summary h3 {
    font-size: 16.5px;
    font-weight: 600;
    letter-spacing: -0.012em;
}

/* the + was 2.45:1 against white; it signals state, so it needs 3:1 */
body.gx details.group summary span[aria-hidden] {
    color: var(--gx-ink-muted);
}

body.gx details.group[open] summary span[aria-hidden] {
    color: var(--gx-accent);
}

body.gx .divide-y > :not([hidden]) ~ :not([hidden]) {
    border-top-width: 0;
}

body.gx .border-y {
    border-top-width: 0;
    border-bottom-width: 0;
}

/* ---------- footer ---------- */
body.gx footer.bg-slate-100 {
    background: var(--gx-ink);
    color: #B5B2AC;
    margin-top: 40px;
}

body.gx footer .text-slate-900 {
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body.gx footer a {
    color: #B5B2AC;
}

body.gx footer a:hover {
    color: #FFFFFF;
}

body.gx footer .hover\:text-slate-900:hover,
body.gx footer .hover\:text-gray-900:hover,
body.gx .gx-dark .hover\:text-slate-900:hover,
body.gx .gx-dark .hover\:text-gray-900:hover,
body.gx .bg-slate-900 .hover\:text-slate-900:hover,
body.gx .bg-slate-800 .hover\:text-slate-900:hover {
    color: #FFFFFF;
}

body.gx footer .text-slate-600,
body.gx footer .text-slate-500 {
    color: #B5B2AC;
}

body.gx footer .border-slate-200,
body.gx footer .border-slate-300 {
    border-color: rgba(255, 255, 255, 0.12);
}

/* the privacy promises are the differentiator — stop whispering them */
body.gx footer .text-xs {
    font-size: 13.5px;
}

body.gx footer svg {
    color: var(--gx-accent);
    opacity: 1;
}

/* ---------- tool cards ---------- */
/* the icons were fifteen near-identical grey glyphs at 16px: decoration that
   repeated, which is what made the grid read as a template. Type carries it. */
body.gx .gx-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 2px;
}

body.gx .gx-card-head .font-semibold {
    font-size: 16.5px;
    letter-spacing: -0.015em;
}

body.gx .gx-card-head::after {
    content: "→";
    color: var(--gx-accent);
    font-size: 15px;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    flex-shrink: 0;
}

body.gx .group:hover .gx-card-head::after,
body.gx .group:focus-within .gx-card-head::after {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    body.gx .gx-card-head::after { transition: none; }
}

body.gx .group.rounded-xl {
    padding: 20px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

body.gx .group.rounded-xl:hover {
    border-color: rgba(194, 58, 22, 0.35);
    box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04), 0 18px 34px -26px rgba(17, 17, 17, 0.4);
}

/* ---------- merged tools section ---------- */
body.gx .gx-jump {
    border-top: 1px solid var(--gx-line);
}

body.gx .gx-jump-label {
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gx-ink-faint);
    margin-bottom: 16px;
}

body.gx .gx-jump a {
    border-radius: 999px;
    border-color: var(--gx-line);
}

body.gx .gx-jump a:hover {
    border-color: rgba(194, 58, 22, 0.35);
    color: var(--gx-accent);
}

body.gx section.bg-slate-50 {
    background: transparent;
}

/* ---------- header becomes the floating pill ---------- */
body.gx header.sticky {
    background: transparent;
    border-bottom: 0;
    padding: 14px 16px 0;
}

body.gx header.sticky > div,
body.gx header.sticky > nav {
    background: rgba(255, 255, 255, 0.97);
    -webkit-backdrop-filter: saturate(170%) blur(14px);
    backdrop-filter: saturate(170%) blur(14px);
    border: 1px solid rgba(17, 17, 17, 0.07);
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04), 0 14px 34px -24px rgba(17, 17, 17, 0.32);
    padding-inline: 20px;
    max-width: 1140px;
    margin-inline: auto;
}

body.gx header.sticky a.rounded-lg,
body.gx header.sticky a.rounded-md,
body.gx header.sticky button.rounded-lg {
    border-radius: 999px;
}

/* the dropdown panels should not inherit the pill */
body.gx header.sticky .absolute,
body.gx header.sticky [class*="group-hover:"] {
    border-radius: 16px;
}

/* ---------- higher limits panel ---------- */
body.gx .gx-limits {
    border-radius: 26px;
}

body.gx .gx-limits-body {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: center;
}

body.gx .gx-limits-body > div:first-child {
    flex: 999 1 380px;
    min-width: 0;
}

body.gx .gx-limits p {
    color: #B5B2AC;
    font-size: 16.5px;
    line-height: 1.55;
}

body.gx .gx-limits-primary {
    background: #FFFFFF;
    color: var(--gx-ink);
    border-radius: 999px;
    min-height: 50px;
    padding-inline: 26px;
    font-size: 15.5px;
}

body.gx .gx-limits-primary:hover {
    background: #EFEDE9;
    color: var(--gx-ink);
}

body.gx .gx-limits-secondary {
    background: transparent;
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    min-height: 50px;
    padding-inline: 24px;
    font-size: 15.5px;
}

body.gx .gx-limits-secondary:hover {
    border-color: rgba(255, 255, 255, 0.5);
    color: #FFFFFF;
}

body.gx .gx-limits-stats {
    flex: 1 1 240px;
    margin: 0;
    display: grid;
    gap: 12px;
}

body.gx .gx-limits-stats > div {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 15px 18px;
}

body.gx .gx-limits-stats dt {
    font-size: 13px;
    color: #B5B2AC;
    margin-bottom: 3px;
}

body.gx .gx-limits-stats dd {
    margin: 0;
    font-size: 26px;
    color: #FFFFFF;
}

body.gx .gx-jump-standalone {
    border-top: 0;
    padding-top: 0;
}

/* .pg-band is slate-50, a cool grey that clashed with the warm ground
   and left a cold seam between the FAQ and the ink footer */
body.gx .pg-band {
    border-color: var(--gx-line);
    background: transparent;
}

/* ---------- what is iFormat ---------- */
body.gx .gx-about {
    display: flex;
    flex-wrap: wrap;
    gap: 44px;
    align-items: flex-start;
}

body.gx .gx-about-lead {
    flex: 999 1 400px;
    min-width: 0;
}

body.gx .gx-about-lead p {
    margin-top: 16px;
    font-size: 17px;
    line-height: 1.6;
    color: var(--gx-ink-muted);
    max-width: 46ch;
}

body.gx .gx-about-note {
    font-size: 15px !important;
    color: var(--gx-ink-faint) !important;
}

body.gx .gx-about-grid {
    flex: 1 1 420px;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 26px;
}

body.gx .gx-about-grid dt {
    font-size: 15px;
    font-weight: 600;
    color: var(--gx-ink);
    margin-bottom: 6px;
}

body.gx .gx-about-grid dd {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--gx-ink-muted);
}

body.gx .gx-about-grid a {
    color: var(--gx-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media (max-width: 640px) {
    body.gx .gx-about-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- grouped tool index ---------- */
body.gx .gx-index {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    border-top: 1px solid var(--gx-line);
    padding-top: 34px;
}

body.gx .gx-index-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gx-ink-faint);
    margin: 0 0 14px;
}

body.gx .gx-index ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 2px;
}

body.gx .gx-index a {
    display: block;
    padding: 7px 0;
    font-size: 14.5px;
    color: var(--gx-ink-muted);
}

body.gx .gx-index a:hover {
    color: var(--gx-accent);
    text-decoration: none;
}

@media (max-width: 760px) {
    body.gx .gx-index { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}

/* ---------- breadcrumb ---------- */
/* it was a second sticky bar under the header, in hard white with a border
   and a shadow, offset top-16 for a flat header that no longer exists */
body.gx .sticky.top-16 {
    position: static;
    background: transparent;
    border-bottom: 0;
    box-shadow: none;
}

body.gx nav[aria-label="Breadcrumb"] ol {
    gap: 0;
}

body.gx nav[aria-label="Breadcrumb"] a {
    padding: 4px 0;
    font-size: 13.5px;
    font-weight: 400;
    color: var(--gx-ink-faint);
    border-radius: 0;
}

body.gx nav[aria-label="Breadcrumb"] a:hover {
    background: transparent;
    color: var(--gx-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

body.gx nav[aria-label="Breadcrumb"] span {
    padding: 4px 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--gx-ink);
}

/* the chevrons were slate-500 at 16px between every crumb */
body.gx nav[aria-label="Breadcrumb"] svg {
    width: 13px;
    height: 13px;
    margin-inline: 8px;
    color: rgba(17, 17, 17, 0.26);
}

body.gx .sticky.top-16 time {
    font-size: 12.5px;
    color: var(--gx-ink-faint);
}

body.gx .sticky.top-16 > div {
    padding-top: 14px;
    padding-bottom: 2px;
}

/* the breadcrumb sat in a 1280px container while the header pill is 1140px,
   so the crumbs started ~50px left of the logo */
body.gx .sticky.top-16 > div {
    max-width: 1140px;
    margin-inline: auto;
    padding-inline: 20px;
}

@media (max-width: 1171px) {
    body.gx .sticky.top-16 > div {
        padding-inline: 36px;
    }
}

/* ---------- related-format index ---------- */
/* was thirty pill-cards each carrying the same generic image glyph */
body.gx .gx-reco {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px 28px;
}

body.gx .gx-reco-link {
    display: block;
    padding: 8px 0;
    font-size: 14.5px;
    color: var(--gx-ink-muted);
}

body.gx .gx-reco-link:hover {
    color: var(--gx-accent);
    text-decoration: none;
}

body.gx .gx-reco-cross {
    font-weight: 600;
    color: var(--gx-ink);
}

@media (max-width: 900px) {
    body.gx .gx-reco { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
    body.gx .gx-reco { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- tables ---------- */
/* Only plain data tables are restyled. Cells that carry their own background
   or alignment utilities — the pricing comparison's highlighted Pro column —
   are left alone: a first pass here turned "PRO" grey on near-black. */
body.gx table {
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

body.gx table[class*="border"] {
    border: 0;
}

body.gx table thead th {
    border-bottom: 1px solid rgba(17, 17, 17, 0.18);
}

body.gx table thead th:not([class*="bg-"]) {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--gx-ink-faint);
}

body.gx table thead:not([class*="bg-"]) {
    background: transparent;
}

body.gx table tbody tr {
    border-top: 1px solid var(--gx-line);
}

/* zebra striping only */
body.gx table tbody tr[class*="bg-slate-50"] {
    background: transparent;
}

body.gx table tbody td:not([class*="bg-"]) {
    font-size: 14.5px;
    color: var(--gx-ink-muted);
}

body.gx table tbody td:first-child:not([class*="bg-"]) {
    font-weight: 600;
    color: var(--gx-ink);
}

/* focus rings were still blue on 157 controls */
body.gx .ring-blue-100,
body.gx .ring-blue-200,
body.gx .ring-blue-400,
body.gx .ring-blue-500,
body.gx .focus\:ring-blue-100:focus,
body.gx .focus\:ring-blue-200:focus,
body.gx .focus\:ring-blue-400:focus,
body.gx .focus\:ring-blue-500:focus {
    --tw-ring-color: rgba(194, 58, 22, 0.45);
}

body.gx .border-blue-600,
body.gx .focus\:border-blue-500:focus {
    border-color: var(--gx-accent);
}

body.gx *:focus-visible {
    outline: 2px solid var(--gx-accent);
    outline-offset: 2px;
}

/* ---------- off-palette families ---------- */
/* emerald/teal and purple survive in comparison, security, contact-success
   and the cross-tool strip. Greens fold into the system's one success colour;
   purple has no place in an ink-and-coral palette. */
body.gx .text-emerald-500,
body.gx .text-emerald-600,
body.gx .text-emerald-700,
body.gx .text-green-600,
body.gx .text-green-700 {
    color: var(--gx-success);
}

body.gx .bg-emerald-600,
body.gx .bg-emerald-500,
body.gx .bg-green-600 {
    background-color: var(--gx-success);
}

body.gx .hover\:bg-emerald-700:hover,
body.gx .hover\:bg-green-700:hover {
    background-color: #17543A;
}

body.gx .bg-emerald-50,
body.gx .bg-green-50 {
    background-color: var(--gx-success-tint);
}

body.gx .border-emerald-200,
body.gx .border-green-200 {
    border-color: #CEDFD4;
}

body.gx .from-emerald-500,
body.gx .from-emerald-600 {
    --tw-gradient-from: var(--gx-success);
}

body.gx .to-teal-600,
body.gx .to-teal-700 {
    --tw-gradient-to: #17543A;
}

body.gx .bg-purple-500,
body.gx .bg-purple-600 {
    background-color: var(--gx-accent);
}

body.gx .text-purple-600,
body.gx .text-purple-700 {
    color: var(--gx-accent);
}

body.gx .hover\:bg-purple-50:hover {
    background-color: var(--gx-accent-tint);
}

body.gx .hover\:border-purple-300:hover {
    border-color: rgba(194, 58, 22, 0.35);
}

body.gx .hover\:text-purple-700:hover {
    color: var(--gx-accent-ink);
}

/* small print on the drop zone was 4.17:1 and 3.85:1 — both under AA */
body.gx .text-xs.text-slate-500,
body.gx .text-sm.text-slate-500 {
    color: var(--gx-ink-faint);
}

/* ---------- generated: every blue utility in the templates ----------
   Produced from a scan of the templates rather than fixed one at a time,
   so state and group variants are covered too. */
body.gx .accent-blue-600 { accent-color: #C23A16; }
body.gx .bg-blue-100 { background-color: #FAE6DF; }
body.gx .bg-blue-100\/40 { background-color: rgba(250, 230, 223, 0.4); }
body.gx .bg-blue-300 { background-color: #E0A58F; }
body.gx .bg-blue-400 { background-color: #D9775A; }
body.gx .bg-blue-50 { background-color: #FDF3EF; }
body.gx .bg-blue-50\/30 { background-color: rgba(253, 243, 239, 0.3); }
body.gx .bg-blue-50\/50 { background-color: rgba(253, 243, 239, 0.5); }
body.gx .bg-blue-500 { background-color: #C23A16; }
body.gx .bg-blue-600 { background-color: #C23A16; }
body.gx .border-blue-100 { border-color: #FAE6DF; }
body.gx .border-blue-200 { border-color: #F0C8BA; }
body.gx .border-blue-300 { border-color: #E0A58F; }
body.gx .border-blue-400 { border-color: #D9775A; }
body.gx .border-blue-500 { border-color: #C23A16; }
body.gx .border-blue-600 { border-color: #C23A16; }
body.gx .disabled\:hover\:bg-blue-600:disabled:hover { background-color: #C23A16; }
body.gx .focus-visible\:bg-blue-50\/30:focus-visible { background-color: rgba(253, 243, 239, 0.3); }
body.gx .focus-visible\:border-blue-500:focus-visible { border-color: #C23A16; }
body.gx .focus-visible\:ring-blue-500:focus-visible { --tw-ring-color: #C23A16; }
body.gx .focus\:bg-blue-600:focus { background-color: #C23A16; }
body.gx .focus\:border-blue-400:focus { border-color: #D9775A; }
body.gx .focus\:border-blue-500:focus { border-color: #C23A16; }
body.gx .focus\:ring-blue-100:focus { --tw-ring-color: #FAE6DF; }
body.gx .focus\:ring-blue-200:focus { --tw-ring-color: #F0C8BA; }
body.gx .focus\:ring-blue-500:focus { --tw-ring-color: #C23A16; }
body.gx .from-blue-100 { --tw-gradient-from: #FAE6DF; }
body.gx .from-blue-400 { --tw-gradient-from: #D9775A; }
body.gx .from-blue-50 { --tw-gradient-from: #FDF3EF; }
body.gx .from-blue-500 { --tw-gradient-from: #C23A16; }
body.gx .group:hover .group-hover\:bg-blue-100 { background-color: #FAE6DF; }
body.gx .group:hover .group-hover\:bg-blue-50 { background-color: #FDF3EF; }
body.gx .group:hover .group-hover\:bg-blue-600 { background-color: #C23A16; }
body.gx .group:hover .group-hover\:border-blue-300 { border-color: #E0A58F; }
body.gx .group:hover .group-hover\:text-blue-400 { color: #D9775A; }
body.gx .group:hover .group-hover\:text-blue-500 { color: #C23A16; }
body.gx .group:hover .group-hover\:text-blue-600 { color: #C23A16; }
body.gx .group:hover .group-hover\:text-blue-700 { color: #8E2A10; }
body.gx .group:hover .group-hover\:text-blue-800 { color: #7C2514; }
body.gx .group:hover .group-hover\:text-blue-900 { color: #6B1F10; }
body.gx .hover\:bg-blue-100:hover { background-color: #FAE6DF; }
body.gx .hover\:bg-blue-50:hover { background-color: #FDF3EF; }
body.gx .hover\:bg-blue-50\/30:hover { background-color: rgba(253, 243, 239, 0.3); }
body.gx .hover\:bg-blue-50\/40:hover { background-color: rgba(253, 243, 239, 0.4); }
body.gx .hover\:bg-blue-50\/50:hover { background-color: rgba(253, 243, 239, 0.5); }
body.gx .hover\:bg-blue-600:hover { background-color: #C23A16; }
body.gx .hover\:bg-blue-700:hover { background-color: #8E2A10; }
body.gx .hover\:border-blue-200:hover { border-color: #F0C8BA; }
body.gx .hover\:border-blue-300:hover { border-color: #E0A58F; }
body.gx .hover\:border-blue-400:hover { border-color: #D9775A; }
body.gx .hover\:border-blue-500:hover { border-color: #C23A16; }
body.gx .hover\:border-blue-600:hover { border-color: #C23A16; }
body.gx .hover\:text-blue-600:hover { color: #C23A16; }
body.gx .hover\:text-blue-700:hover { color: #8E2A10; }
body.gx .hover\:text-blue-800:hover { color: #7C2514; }
body.gx .hover\:text-blue-900:hover { color: #6B1F10; }
body.gx .ring-blue-400 { --tw-ring-color: #D9775A; }
body.gx .ring-blue-500 { --tw-ring-color: #C23A16; }
body.gx .shadow-blue-600\/20 { --tw-shadow-color: rgba(194, 58, 22, 0.2); }
body.gx .text-blue-400 { color: #D9775A; }
body.gx .text-blue-500 { color: #C23A16; }
body.gx .text-blue-600 { color: #C23A16; }
body.gx .text-blue-700 { color: #8E2A10; }
body.gx .text-blue-800 { color: #7C2514; }
body.gx .text-blue-900 { color: #6B1F10; }
body.gx .to-blue-200 { --tw-gradient-to: #F0C8BA; }

/* muted text keeps its light values inside dark surfaces */
body.gx .bg-slate-900 .text-slate-400,
body.gx .bg-slate-900 .text-slate-500,
body.gx .bg-slate-900 .text-slate-600,
body.gx .bg-slate-800 .text-slate-400,
body.gx .bg-slate-800 .text-slate-500,
body.gx .bg-slate-800 .text-slate-600,
body.gx .gx-dark .text-slate-400,
body.gx .gx-dark .text-slate-500,
body.gx .gx-dark .text-slate-600 {
    color: #B5B2AC;
}

body.gx .bg-slate-900 .text-slate-900,
body.gx .bg-slate-800 .text-slate-900,
body.gx .gx-dark .text-slate-900 {
    color: #FFFFFF;
}

/* ---------- related tools ---------- */
/* was a dot repeated once per card, a shadow on every card, and a
   subtitle that said nothing. Same card language as the homepage grid. */
body.gx .gx-reco-card {
    display: block;
    background: var(--gx-surface);
    border: 1px solid var(--gx-line);
    border-radius: 16px;
    padding: 20px;
    box-shadow: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

body.gx .gx-reco-card:hover {
    border-color: rgba(194, 58, 22, 0.35);
    box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04), 0 18px 34px -26px rgba(17, 17, 17, 0.4);
    text-decoration: none;
}

body.gx .gx-reco-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

body.gx .gx-reco-card-head .font-semibold {
    font-size: 16.5px;
    letter-spacing: -0.015em;
}

body.gx .gx-reco-card-head::after {
    content: "→";
    color: var(--gx-accent);
    font-size: 15px;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    flex-shrink: 0;
}

body.gx .group:hover .gx-reco-card-head::after,
body.gx .group:focus-within .gx-reco-card-head::after {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    body.gx .gx-reco-card-head::after { transition: none; }
}

/* ---------- neutral surfaces ---------- */
/* slate-50 and -100 are cool greys; on a warm ground they read as a cold
   patch, which is the same clash that made the FAQ seam look wrong.
   The footer keeps its own, more specific, ink rule. */
body.gx .bg-slate-50 {
    background-color: var(--gx-tint);
}

body.gx .bg-slate-100 {
    background-color: #EDEAE4;
}

body.gx .hover\:bg-slate-50:hover {
    background-color: #F0EEE9;
}

body.gx .border-slate-300 {
    border-color: rgba(17, 17, 17, 0.14);
}

/* ---------- gradient buttons ---------- */
/* Flat beats a gradient here: the emerald-to-teal download button read as
   a different product's CTA sitting next to the coral one. */
body.gx [class*="bg-gradient-to"][class*="from-emerald"],
body.gx [class*="bg-gradient-to"][class*="from-green-5"],
body.gx [class*="bg-gradient-to"][class*="from-green-6"] {
    background-image: none;
    background-color: var(--gx-success);
}

body.gx [class*="bg-gradient-to"][class*="from-emerald"]:hover,
body.gx [class*="bg-gradient-to"][class*="from-green-5"]:hover,
body.gx [class*="bg-gradient-to"][class*="from-green-6"]:hover {
    background-color: #17543A;
}

body.gx [class*="bg-gradient-to"][class*="from-orange"],
body.gx [class*="bg-gradient-to"][class*="from-blue-5"],
body.gx [class*="bg-gradient-to"][class*="from-indigo"] {
    background-image: none;
    background-color: var(--gx-accent);
}

/* tinted gradient washes flatten to the neutral surface */
body.gx [class*="bg-gradient-to"][class*="from-blue-50"],
body.gx [class*="bg-gradient-to"][class*="from-green-50"],
body.gx [class*="bg-gradient-to"][class*="from-red-50"] {
    background-image: none;
    background-color: var(--gx-tint);
}

/* Coral at #C23A16 measures 4.72:1 as body-size text — passing with no
   headroom. Links take the darker text accent; buttons keep the brand coral
   because white sits on it rather than the ground. */
body.gx p a,
body.gx dd a,
body.gx li a,
body.gx .gx-about-grid a,
body.gx .blog-richtext a {
    color: var(--gx-accent-text);
}

/* the ramp was 17 / 15 / 15 / 14.5 — too tight to read as a hierarchy */
body.gx .gx-about-lead p {
    font-size: 18px;
    line-height: 1.6;
}

body.gx .gx-about-note {
    font-size: 14.5px !important;
}

body.gx .gx-about-grid dt {
    font-size: 15px;
    letter-spacing: -0.005em;
}

body.gx .gx-about-grid dd {
    font-size: 14px;
    line-height: 1.6;
}

/* ---------- one heading scale ----------
   Sizes stay contextual — an h3 as a card title is not an h3 as a section
   head — but weight and the arbitrary rem-derived values are normalised.
   Measured drift before this: h1 at 60/700, 48/600, 48/700 and 51.2/600;
   h2 at both 600 and 700; h3 at 16.5, 18, 20 and 22.08. */
body.gx h1 {
    font-weight: 700;
}

body.gx h2 {
    font-weight: 700;
}

body.gx h3 {
    font-weight: 600;
}

/* the blog computed its own 3.2rem / 1.38rem off a different base */
body.gx .blog-prose h1,
body.gx article h1 {
    font-size: 48px;
    line-height: 1.04;
}

body.gx .blog-prose h3,
body.gx .blog-richtext h3 {
    font-size: 20px;
}

@media (max-width: 640px) {
    body.gx .blog-prose h1,
    body.gx article h1 {
        font-size: 34px;
    }
}

/* ---------- all-tools ---------- */
body.gx .tool-card {
    border-color: var(--gx-line);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

body.gx .tool-card:hover {
    border-color: rgba(194, 58, 22, 0.35);
    background-color: var(--gx-surface);
    box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04), 0 18px 34px -26px rgba(17, 17, 17, 0.4);
}

body.gx .tool-card .gx-card-head .font-semibold {
    font-size: 15.5px;
}

/* ---------- drop zone hover ----------
   The border reacting is the useful signal; the wash behind it is not.
   Appended last so it beats the hover: utilities on the element. */
body.gx .border-dashed,
body.gx .border-dashed:hover,
body.gx .border-dashed:focus,
body.gx .border-dashed:focus-visible,
body.gx .border-dashed:focus-within {
    background-color: var(--gx-tint-soft);
}

body.gx .border-dashed:hover,
body.gx .border-dashed:focus-visible {
    border-color: var(--gx-accent);
}

/* dragging a file over still fills, because that one needs to be unmissable */
body.gx .border-dashed.drag-over,
body.gx .border-dashed.dragover,
body.gx .border-dashed.is-dragover {
    background-color: var(--gx-accent-tint);
    border-color: var(--gx-accent);
}

/* ===== slate / gray → warm neutrals ===== */

body.gx {
    --gx-n50:  #F7F5F1;
    --gx-n100: #F1EEE9;
    --gx-n200: #E3DFD8;
    --gx-n300: #CFC9BF;
    --gx-n400: #9C958A;
    --gx-n500: #6E675B;
    --gx-n600: #46443F;
    --gx-n700: #3A372F;
    --gx-n800: #26231D;
    --gx-n900: #111111;
}

body.gx .text-slate-50,  body.gx .text-gray-50  { color: var(--gx-n50); }
body.gx .text-slate-100, body.gx .text-gray-100 { color: var(--gx-n100); }
body.gx .text-slate-200, body.gx .text-gray-200 { color: var(--gx-n200); }
body.gx .text-slate-300, body.gx .text-gray-300 { color: var(--gx-n300); }
body.gx .text-slate-400, body.gx .text-gray-400 { color: var(--gx-ink-faint); }
body.gx .text-slate-500, body.gx .text-gray-500 { color: var(--gx-ink-faint); }
body.gx .text-slate-600, body.gx .text-gray-600 { color: var(--gx-ink-muted); }
body.gx .text-slate-700, body.gx .text-gray-700 { color: var(--gx-n700); }
body.gx .text-slate-800, body.gx .text-gray-800 { color: var(--gx-n800); }
body.gx .text-slate-900, body.gx .text-gray-900 { color: var(--gx-ink); }

body.gx .hover\:text-slate-700:hover, body.gx .hover\:text-gray-700:hover { color: var(--gx-n700); }
body.gx .hover\:text-slate-800:hover, body.gx .hover\:text-gray-800:hover { color: var(--gx-n800); }
body.gx .hover\:text-slate-900:hover, body.gx .hover\:text-gray-900:hover { color: var(--gx-ink); }

body.gx .placeholder-slate-400::placeholder,
body.gx .placeholder-gray-400::placeholder { color: var(--gx-n400); }

body.gx .bg-slate-200, body.gx .bg-gray-200 { background-color: var(--gx-n200); }
body.gx .bg-slate-300, body.gx .bg-gray-300 { background-color: var(--gx-n300); }
body.gx .bg-slate-400, body.gx .bg-gray-400 { background-color: var(--gx-n400); }
body.gx .bg-slate-600, body.gx .bg-gray-600 { background-color: var(--gx-n600); }
body.gx .bg-slate-800, body.gx .bg-gray-800 { background-color: var(--gx-n800); }
body.gx .bg-slate-900, body.gx .bg-gray-900 { background-color: var(--gx-ink); }
body.gx .bg-gray-50  { background-color: var(--gx-n50); }
body.gx .bg-gray-100 { background-color: var(--gx-n100); }
body.gx .bg-slate-50\/50 { background-color: rgba(246, 245, 242, 0.5); }
body.gx .bg-slate-50\/60 { background-color: rgba(246, 245, 242, 0.6); }

body.gx .hover\:bg-slate-100:hover, body.gx .hover\:bg-gray-100:hover { background-color: var(--gx-n100); }
body.gx .hover\:bg-slate-200:hover, body.gx .hover\:bg-gray-200:hover { background-color: var(--gx-n200); }
body.gx .hover\:bg-slate-800:hover, body.gx .hover\:bg-gray-800:hover { background-color: var(--gx-n800); }
body.gx .hover\:bg-gray-50:hover { background-color: var(--gx-n50); }

body.gx .border-slate-50,  body.gx .border-gray-50  { border-color: var(--gx-line); }
body.gx .border-slate-100, body.gx .border-gray-100 { border-color: var(--gx-line); }
body.gx .border-slate-200, body.gx .border-gray-200 { border-color: var(--gx-line-strong); }
body.gx .border-slate-300, body.gx .border-gray-300 { border-color: var(--gx-n300); }
body.gx .border-slate-200\/70 { border-color: rgba(17, 17, 17, 0.10); }
body.gx .border-slate-200\/80 { border-color: rgba(17, 17, 17, 0.12); }

body.gx .hover\:border-slate-300:hover, body.gx .hover\:border-gray-300:hover { border-color: var(--gx-n300); }
body.gx .hover\:border-slate-400:hover, body.gx .hover\:border-gray-400:hover { border-color: var(--gx-n400); }

body.gx .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
body.gx .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--gx-line); }
body.gx .divide-slate-200 > :not([hidden]) ~ :not([hidden]),
body.gx .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--gx-line-strong); }

body.gx .ring-slate-200, body.gx .ring-gray-200 { --tw-ring-color: var(--gx-line-strong); }
body.gx .ring-slate-300, body.gx .ring-gray-300 { --tw-ring-color: var(--gx-n300); }
body.gx [class*="shadow-slate-900"] { --tw-shadow-color: rgba(17, 17, 17, 0.10); }

body.gx .from-slate-50 {
    --tw-gradient-from: var(--gx-n50) var(--tw-gradient-from-position);
    --tw-gradient-to: rgba(247, 245, 241, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
body.gx .via-slate-300 {
    --tw-gradient-to: rgba(207, 201, 191, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--gx-n300) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

body.gx .bg-slate-900 .text-slate-200,
body.gx .bg-slate-900 .text-slate-300,
body.gx .bg-slate-800 .text-slate-200,
body.gx .bg-slate-800 .text-slate-300,
body.gx .gx-dark .text-slate-200,
body.gx .gx-dark .text-slate-300 { color: #E9E6E0; }

body.gx .bg-slate-900 .text-slate-700,
body.gx .bg-slate-900 .text-slate-800,
body.gx .bg-slate-800 .text-slate-700,
body.gx .bg-slate-800 .text-slate-800,
body.gx .gx-dark .text-slate-700,
body.gx .gx-dark .text-slate-800 { color: #D6D2CA; }

/* ===== blue / indigo / violet / purple / sky / cyan → coral ramp ===== */

body.gx .accent-blue-600 { accent-color: #C23A16; }
body.gx .bg-blue-100 { background-color: #FAE6DE; }
body.gx .bg-blue-100\/40 { background-color: rgba(250, 230, 222, 0.4); }
body.gx .bg-blue-300 { background-color: #E8BFAE; }
body.gx .bg-blue-400 { background-color: #D97E5C; }
body.gx .bg-blue-50 { background-color: #FDF3EF; }
body.gx .bg-blue-50\/30 { background-color: rgba(253, 243, 239, 0.3); }
body.gx .bg-blue-50\/50 { background-color: rgba(253, 243, 239, 0.5); }
body.gx .bg-blue-500 { background-color: #C9512A; }
body.gx .bg-blue-600 { background-color: #C23A16; }
body.gx .bg-blue-700 { background-color: #B03413; }
body.gx .bg-blue-800 { background-color: #8E2A10; }
body.gx .bg-cyan-100 { background-color: #FAE6DE; }
body.gx .bg-cyan-400 { background-color: #D97E5C; }
body.gx .bg-cyan-50 { background-color: #FDF3EF; }
body.gx .bg-cyan-500 { background-color: #C9512A; }
body.gx .bg-cyan-600 { background-color: #C23A16; }
body.gx .bg-cyan-700 { background-color: #B03413; }
body.gx .bg-fuchsia-100 { background-color: #FAE6DE; }
body.gx .bg-fuchsia-50 { background-color: #FDF3EF; }
body.gx .bg-indigo-100 { background-color: #FAE6DE; }
body.gx .bg-indigo-300 { background-color: #E8BFAE; }
body.gx .bg-indigo-400 { background-color: #D97E5C; }
body.gx .bg-indigo-50 { background-color: #FDF3EF; }
body.gx .bg-indigo-500 { background-color: #C9512A; }
body.gx .bg-indigo-600 { background-color: #C23A16; }
body.gx .bg-indigo-700 { background-color: #B03413; }
body.gx .bg-indigo-800 { background-color: #8E2A10; }
body.gx .bg-purple-100 { background-color: #FAE6DE; }
body.gx .bg-purple-400 { background-color: #D97E5C; }
body.gx .bg-purple-50 { background-color: #FDF3EF; }
body.gx .bg-purple-500 { background-color: #C9512A; }
body.gx .bg-purple-600 { background-color: #C23A16; }
body.gx .bg-purple-700 { background-color: #B03413; }
body.gx .bg-sky-50 { background-color: #FDF3EF; }
body.gx .bg-violet-50 { background-color: #FDF3EF; }
body.gx .border-blue-100 { border-color: #FAE6DE; }
body.gx .border-blue-200 { border-color: #F3D6C9; }
body.gx .border-blue-300 { border-color: #E8BFAE; }
body.gx .border-blue-400 { border-color: #D97E5C; }
body.gx .border-blue-500 { border-color: #C9512A; }
body.gx .border-blue-600 { border-color: #C23A16; }
body.gx .border-cyan-200 { border-color: #F3D6C9; }
body.gx .border-fuchsia-300 { border-color: #E8BFAE; }
body.gx .border-indigo-100 { border-color: #FAE6DE; }
body.gx .border-indigo-200 { border-color: #F3D6C9; }
body.gx .border-purple-100 { border-color: #FAE6DE; }
body.gx .border-purple-200 { border-color: #F3D6C9; }
body.gx .border-purple-300 { border-color: #E8BFAE; }
body.gx .border-purple-400 { border-color: #D97E5C; }
body.gx .border-purple-500 { border-color: #C9512A; }
body.gx .border-purple-600 { border-color: #C23A16; }
body.gx .border-sky-200 { border-color: #F3D6C9; }
body.gx .border-violet-200 { border-color: #F3D6C9; }
body.gx .focus-visible\:bg-blue-50\/30:focus-visible { background-color: rgba(253, 243, 239, 0.3); }
body.gx .focus-visible\:border-blue-500:focus-visible { border-color: #C9512A; }
body.gx .focus-visible\:ring-blue-500:focus-visible { --tw-ring-color: #C9512A; }
body.gx .focus\:border-blue-400:focus { border-color: #D97E5C; }
body.gx .focus\:border-blue-500:focus { border-color: #C9512A; }
body.gx .focus\:ring-blue-100:focus { --tw-ring-color: #FAE6DE; }
body.gx .focus\:ring-blue-200:focus { --tw-ring-color: #F3D6C9; }
body.gx .focus\:ring-blue-500:focus { --tw-ring-color: #C9512A; }
body.gx .focus\:ring-blue-500\/20:focus { --tw-ring-color: rgba(201, 81, 42, 0.2); }
body.gx .from-blue-100 { --tw-gradient-from: #FAE6DE var(--tw-gradient-from-position); --tw-gradient-to: rgba(250, 230, 222, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
body.gx .from-blue-400 { --tw-gradient-from: #D97E5C var(--tw-gradient-from-position); --tw-gradient-to: rgba(217, 126, 92, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
body.gx .from-blue-50 { --tw-gradient-from: #FDF3EF var(--tw-gradient-from-position); --tw-gradient-to: rgba(253, 243, 239, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
body.gx .from-blue-500 { --tw-gradient-from: #C9512A var(--tw-gradient-from-position); --tw-gradient-to: rgba(201, 81, 42, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
body.gx .from-blue-600 { --tw-gradient-from: #C23A16 var(--tw-gradient-from-position); --tw-gradient-to: rgba(194, 58, 22, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
body.gx .from-blue-700 { --tw-gradient-from: #B03413 var(--tw-gradient-from-position); --tw-gradient-to: rgba(176, 52, 19, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
body.gx .from-cyan-50 { --tw-gradient-from: #FDF3EF var(--tw-gradient-from-position); --tw-gradient-to: rgba(253, 243, 239, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
body.gx .from-cyan-500 { --tw-gradient-from: #C9512A var(--tw-gradient-from-position); --tw-gradient-to: rgba(201, 81, 42, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
body.gx .from-indigo-50 { --tw-gradient-from: #FDF3EF var(--tw-gradient-from-position); --tw-gradient-to: rgba(253, 243, 239, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
body.gx .from-indigo-500 { --tw-gradient-from: #C9512A var(--tw-gradient-from-position); --tw-gradient-to: rgba(201, 81, 42, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
body.gx .from-purple-100 { --tw-gradient-from: #FAE6DE var(--tw-gradient-from-position); --tw-gradient-to: rgba(250, 230, 222, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
body.gx .from-purple-50 { --tw-gradient-from: #FDF3EF var(--tw-gradient-from-position); --tw-gradient-to: rgba(253, 243, 239, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
body.gx .from-purple-500 { --tw-gradient-from: #C9512A var(--tw-gradient-from-position); --tw-gradient-to: rgba(201, 81, 42, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
body.gx .from-purple-600 { --tw-gradient-from: #C23A16 var(--tw-gradient-from-position); --tw-gradient-to: rgba(194, 58, 22, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
body.gx .from-purple-700 { --tw-gradient-from: #B03413 var(--tw-gradient-from-position); --tw-gradient-to: rgba(176, 52, 19, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
body.gx .group:hover .group-hover\:border-blue-300 { border-color: #E8BFAE; }
body.gx .group:hover .group-hover\:text-blue-400 { color: #D97E5C; }
body.gx .group:hover .group-hover\:text-blue-500 { color: #C9512A; }
body.gx .group:hover .group-hover\:text-blue-700 { color: #B03413; }
body.gx .group:hover .group-hover\:text-blue-800 { color: #8E2A10; }
body.gx .group:hover .group-hover\:text-blue-900 { color: #6E200C; }
body.gx .hover\:bg-blue-100:hover { background-color: #FAE6DE; }
body.gx .hover\:bg-blue-50:hover { background-color: #FDF3EF; }
body.gx .hover\:bg-blue-50\/30:hover { background-color: rgba(253, 243, 239, 0.3); }
body.gx .hover\:bg-blue-50\/40:hover { background-color: rgba(253, 243, 239, 0.4); }
body.gx .hover\:bg-blue-50\/50:hover { background-color: rgba(253, 243, 239, 0.5); }
body.gx .hover\:bg-blue-500:hover { background-color: #C9512A; }
body.gx .hover\:bg-blue-600:hover { background-color: #C23A16; }
body.gx .hover\:bg-blue-700:hover { background-color: #B03413; }
body.gx .hover\:bg-cyan-700:hover { background-color: #B03413; }
body.gx .hover\:bg-purple-700:hover { background-color: #B03413; }
body.gx .hover\:border-blue-200:hover { border-color: #F3D6C9; }
body.gx .hover\:border-blue-300:hover { border-color: #E8BFAE; }
body.gx .hover\:border-blue-400:hover { border-color: #D97E5C; }
body.gx .hover\:border-blue-500:hover { border-color: #C9512A; }
body.gx .hover\:border-blue-600:hover { border-color: #C23A16; }
body.gx .hover\:border-cyan-200:hover { border-color: #F3D6C9; }
body.gx .hover\:border-violet-200:hover { border-color: #F3D6C9; }
body.gx .hover\:from-purple-700:hover { --tw-gradient-from: #B03413 var(--tw-gradient-from-position); --tw-gradient-to: rgba(176, 52, 19, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
body.gx .hover\:text-blue-600:hover { color: #C23A16; }
body.gx .hover\:text-blue-700:hover { color: #B03413; }
body.gx .hover\:text-blue-800:hover { color: #8E2A10; }
body.gx .hover\:text-blue-900:hover { color: #6E200C; }
body.gx .hover\:to-blue-700:hover { --tw-gradient-to: #B03413 var(--tw-gradient-to-position); }
body.gx .ring-blue-100 { --tw-ring-color: #FAE6DE; }
body.gx .ring-blue-200 { --tw-ring-color: #F3D6C9; }
body.gx .ring-blue-400 { --tw-ring-color: #D97E5C; }
body.gx .ring-blue-500 { --tw-ring-color: #C9512A; }
body.gx .shadow-blue-600 { --tw-shadow-color: #C23A16; }
body.gx .shadow-blue-600\/20 { --tw-shadow-color: rgba(194, 58, 22, 0.2); }
body.gx .shadow-blue-600\/30 { --tw-shadow-color: rgba(194, 58, 22, 0.3); }
body.gx .text-blue-100 { color: #FAE6DE; }
body.gx .text-blue-200 { color: #F3D6C9; }
body.gx .text-blue-300 { color: #E8BFAE; }
body.gx .text-blue-400 { color: #D97E5C; }
body.gx .text-blue-500 { color: #C9512A; }
body.gx .text-blue-600 { color: #C23A16; }
body.gx .text-blue-700 { color: #B03413; }
body.gx .text-blue-800 { color: #8E2A10; }
body.gx .text-blue-900 { color: #6E200C; }
body.gx .text-cyan-600 { color: #C23A16; }
body.gx .text-cyan-700 { color: #B03413; }
body.gx .text-cyan-800 { color: #8E2A10; }
body.gx .text-fuchsia-700 { color: #B03413; }
body.gx .text-indigo-500 { color: #C9512A; }
body.gx .text-indigo-600 { color: #C23A16; }
body.gx .text-indigo-700 { color: #B03413; }
body.gx .text-indigo-800 { color: #8E2A10; }
body.gx .text-indigo-900 { color: #6E200C; }
body.gx .text-purple-100 { color: #FAE6DE; }
body.gx .text-purple-300 { color: #E8BFAE; }
body.gx .text-purple-400 { color: #D97E5C; }
body.gx .text-purple-500 { color: #C9512A; }
body.gx .text-purple-600 { color: #C23A16; }
body.gx .text-purple-700 { color: #B03413; }
body.gx .text-purple-800 { color: #8E2A10; }
body.gx .text-purple-900 { color: #6E200C; }
body.gx .text-sky-700 { color: #B03413; }
body.gx .text-violet-700 { color: #B03413; }
body.gx .to-blue-100 { --tw-gradient-to: #FAE6DE var(--tw-gradient-to-position); }
body.gx .to-blue-200 { --tw-gradient-to: #F3D6C9 var(--tw-gradient-to-position); }
body.gx .to-blue-50 { --tw-gradient-to: #FDF3EF var(--tw-gradient-to-position); }
body.gx .to-blue-600 { --tw-gradient-to: #C23A16 var(--tw-gradient-to-position); }
body.gx .to-blue-700 { --tw-gradient-to: #B03413 var(--tw-gradient-to-position); }
body.gx .to-cyan-50 { --tw-gradient-to: #FDF3EF var(--tw-gradient-to-position); }
body.gx .to-cyan-500 { --tw-gradient-to: #C9512A var(--tw-gradient-to-position); }
body.gx .to-cyan-600 { --tw-gradient-to: #C23A16 var(--tw-gradient-to-position); }
body.gx .to-indigo-50 { --tw-gradient-to: #FDF3EF var(--tw-gradient-to-position); }
body.gx .to-indigo-500 { --tw-gradient-to: #C9512A var(--tw-gradient-to-position); }
body.gx .to-indigo-600 { --tw-gradient-to: #C23A16 var(--tw-gradient-to-position); }
body.gx .to-purple-100 { --tw-gradient-to: #FAE6DE var(--tw-gradient-to-position); }
body.gx .to-purple-200 { --tw-gradient-to: #F3D6C9 var(--tw-gradient-to-position); }
body.gx .to-purple-50 { --tw-gradient-to: #FDF3EF var(--tw-gradient-to-position); }
body.gx .to-purple-500 { --tw-gradient-to: #C9512A var(--tw-gradient-to-position); }
body.gx .to-purple-600 { --tw-gradient-to: #C23A16 var(--tw-gradient-to-position); }
body.gx .to-purple-700 { --tw-gradient-to: #B03413 var(--tw-gradient-to-position); }
body.gx .to-violet-600 { --tw-gradient-to: #C23A16 var(--tw-gradient-to-position); }
body.gx .via-blue-50 { --tw-gradient-to: rgba(253, 243, 239, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #FDF3EF var(--tw-gradient-via-position), var(--tw-gradient-to); }
body.gx .via-indigo-50 { --tw-gradient-to: rgba(253, 243, 239, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #FDF3EF var(--tw-gradient-via-position), var(--tw-gradient-to); }
body.gx .via-purple-50 { --tw-gradient-to: rgba(253, 243, 239, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #FDF3EF var(--tw-gradient-via-position), var(--tw-gradient-to); }
body.gx .via-purple-500 { --tw-gradient-to: rgba(201, 81, 42, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #C9512A var(--tw-gradient-via-position), var(--tw-gradient-to); }

/* ===== light-backgrounded children inside dark surfaces keep their own ink ===== */
body.gx .gx-dark .bg-white.text-slate-900,
body.gx .gx-dark .bg-slate-50.text-slate-900,
body.gx .gx-dark .bg-slate-100.text-slate-900,
body.gx .bg-slate-900 .bg-white.text-slate-900,
body.gx .bg-slate-900 .bg-slate-50.text-slate-900,
body.gx .bg-slate-900 .bg-slate-100.text-slate-900,
body.gx .bg-slate-800 .bg-white.text-slate-900,
body.gx .bg-slate-800 .bg-slate-50.text-slate-900,
body.gx .bg-slate-800 .bg-slate-100.text-slate-900 {
    color: var(--gx-ink);
}

body.gx .gx-dark .bg-white.text-slate-600,
body.gx .gx-dark .bg-white.text-slate-500,
body.gx .bg-slate-900 .bg-white.text-slate-600,
body.gx .bg-slate-900 .bg-white.text-slate-500,
body.gx .bg-slate-800 .bg-white.text-slate-600,
body.gx .bg-slate-800 .bg-white.text-slate-500 {
    color: var(--gx-ink-muted);
}

body.gx .pg-h3 {
    color: var(--gx-ink);
}

/* Opacity variants the generated passes never covered: these still rendered
   stock Tailwind, so a handful of panels stayed cool on a warm ground. */
body.gx .bg-slate-50\/40 { background-color: rgba(246, 245, 242, 0.4); }
body.gx .bg-slate-50\/70 { background-color: rgba(246, 245, 242, 0.7); }
body.gx .bg-blue-50\/40 { background-color: rgba(253, 243, 239, 0.4); }
body.gx .bg-slate-700\/70 { background-color: rgba(17, 17, 17, 0.7); }
body.gx .bg-slate-900\/80 { background-color: rgba(17, 17, 17, 0.8); }

/* The cool-toned greens and the lone purple that no pass reached. Mapped onto
   the palette's own success family; the warm alert tints (red, amber, rose,
   yellow) are semantic and already sit on this ground, so they keep theirs. */
body.gx {
    --gx-success-100: #E4EDE1;
    --gx-success-deep: #17543A;
}

body.gx .bg-green-100,
body.gx .bg-emerald-100 { background-color: var(--gx-success-100); }
body.gx .bg-green-500,
body.gx .bg-green-600 { background-color: var(--gx-success); }
body.gx .bg-emerald-700 { background-color: var(--gx-success-deep); }
body.gx .bg-purple-500 { background-color: var(--gx-accent); }
body.gx .text-green-600,
body.gx .text-green-700,
body.gx .text-emerald-600,
body.gx .text-emerald-700 { color: var(--gx-success); }
body.gx .border-green-200,
body.gx .border-emerald-200 { border-color: rgba(31, 107, 74, 0.22); }


/* ===== remaining slate variants ===== */
body.gx .bg-slate-500 { background-color: var(--gx-n500); }
body.gx .hover\:text-slate-600:hover { color: var(--gx-ink-muted); }
body.gx .hover\:border-slate-200:hover { border-color: var(--gx-line-strong); }
body.gx .hover\:bg-slate-700:hover { background-color: var(--gx-n700); }
body.gx .hover\:bg-slate-50\/50:hover { background-color: rgba(247, 245, 241, 0.5); }
body.gx .shadow-slate-900\/10 { --tw-shadow-color: rgba(17, 17, 17, 0.10); }
body.gx .hover\:text-slate-200:hover { color: var(--gx-n200); }
body.gx .gx-dark .hover\:text-slate-200:hover,
body.gx .bg-slate-900 .hover\:text-slate-200:hover { color: #FFFFFF; }
body.gx .to-slate-100 { --tw-gradient-to: var(--gx-n100) var(--tw-gradient-to-position); }

body.gx div[class="bg-slate-50"] { background-color: transparent; }

/* ===== remaining green / emerald / teal onto the success family ===== */
body.gx .bg-green-300 { background-color: #BCD3B6; }
body.gx .bg-green-400 { background-color: #6FA389; }
body.gx .bg-green-700 { background-color: #17543A; }
body.gx .bg-teal-50 { background-color: #EFF3EC; }
body.gx .border-emerald-500 { border-color: var(--gx-success); }
body.gx .border-green-100 { border-color: #E4EDE1; }
body.gx .border-green-300 { border-color: #BCD3B6; }
body.gx .from-green-50 { --tw-gradient-from: #EFF3EC var(--tw-gradient-from-position); }
body.gx .group:hover .group-hover\:text-green-600 { color: var(--gx-success); }
body.gx .hover\:bg-emerald-100:hover { background-color: #E4EDE1; }
body.gx .hover\:border-green-200:hover { border-color: #D5E3D0; }
body.gx .hover\:from-emerald-600:hover { --tw-gradient-from: var(--gx-success) var(--tw-gradient-from-position); }
body.gx .hover\:text-green-700:hover { color: #17543A; }
body.gx .hover\:to-teal-700:hover { --tw-gradient-to: #17543A var(--tw-gradient-to-position); }
body.gx .text-emerald-800 { color: #124430; }
body.gx .text-emerald-900 { color: #0D3324; }
body.gx .text-green-500 { color: var(--gx-success); }
body.gx .text-green-800 { color: #124430; }
body.gx .text-green-900 { color: #0D3324; }
body.gx .to-emerald-50 { --tw-gradient-to: #EFF3EC var(--tw-gradient-to-position); }

body.gx a[class*="shadow-blue-600"],
body.gx button[class*="shadow-blue-600"],
body.gx a[class*="shadow-blue-600"]:hover,
body.gx button[class*="shadow-blue-600"]:hover {
    box-shadow: none;
}

body.gx .dropdown-menu {
    box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04), 0 24px 48px -28px rgba(17, 17, 17, 0.42);
}

body.gx .border-dashed[class],
body.gx .border-dashed[class]:hover,
body.gx .border-dashed[class]:focus,
body.gx .border-dashed[class]:focus-visible,
body.gx .border-dashed[class]:focus-within {
    background-color: var(--gx-tint-soft);
    background-image: none;
}

body.gx .border-dashed[class]:hover,
body.gx .border-dashed[class]:focus-visible {
    border-color: var(--gx-accent);
}

body.gx .border-dashed[class].drag-over,
body.gx .border-dashed[class].dragover,
body.gx .border-dashed[class].is-dragover {
    background-color: var(--gx-accent-tint);
    border-color: var(--gx-accent);
}

body.gx button[class*="shadow-"],
body.gx button[class*="shadow-"]:hover {
    box-shadow: none;
}

body.gx .pg-col {
    max-width: 48rem;
}

body.gx .pg-col :where(p, ul, ol, dl) {
    max-width: none;
}

body.gx .pg-col > .site-tool-shell,
body.gx .site-tool-shell {
    padding-left: 0;
    padding-right: 0;
}

body.gx .text-slate-700,
body.gx .text-gray-700 {
    color: var(--gx-ink-muted);
}

body.gx .ix-wrap {
    margin-inline: auto;
    max-width: 68rem;
}

body.gx .ix-head {
    max-width: 44rem;
    margin-bottom: 26px;
}

body.gx .ix-title {
    font-size: clamp(32px, 5vw, 46px);
    font-weight: 700;
    letter-spacing: -0.034em;
    line-height: 1.04;
    margin: 0 0 12px;
}

body.gx .ix-sub {
    margin: 0;
    font-size: 17px;
    line-height: 1.55;
    color: var(--gx-ink-muted);
}

body.gx .ix-controls {
    position: sticky;
    top: 10px;
    z-index: 20;
    padding: 14px;
    margin-bottom: 30px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(1.6) blur(10px);
    -webkit-backdrop-filter: saturate(1.6) blur(10px);
    border: 1px solid var(--gx-line);
    box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04), 0 14px 34px -26px rgba(17, 17, 17, 0.34);
}

body.gx .ix-search {
    position: relative;
    margin-bottom: 12px;
}

body.gx .ix-search-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 17px;
    height: 17px;
    color: var(--gx-ink-faint);
    pointer-events: none;
}

body.gx .ix-search-input {
    width: 100%;
    min-height: 48px;
    padding: 0 54px 0 42px;
    font-size: 15.5px;
    font-family: inherit;
    color: var(--gx-ink);
    background: var(--gx-ground);
    border: 1px solid var(--gx-line-strong);
    border-radius: 12px;
    transition: border-color 0.18s ease, background-color 0.18s ease;
}

body.gx .ix-search-input::placeholder { color: var(--gx-ink-faint); }

body.gx .ix-search-input:focus {
    outline: none;
    background: var(--gx-surface);
    border-color: var(--gx-accent);
}

body.gx .ix-kbd {
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    padding: 2px 8px;
    font-size: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--gx-ink-faint);
    background: var(--gx-surface);
    border: 1px solid var(--gx-line-strong);
    border-radius: 6px;
}

body.gx .ix-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

body.gx .filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 0 14px;
    font-size: 13.5px;
    font-weight: 500;
    font-family: inherit;
    color: var(--gx-ink-muted);
    background: transparent;
    border: 1px solid var(--gx-line-strong);
    border-radius: 999px;
    cursor: pointer;
    transition: border-color 0.16s ease, color 0.16s ease, background-color 0.16s ease;
}

body.gx .filter-btn:hover {
    color: var(--gx-ink);
    border-color: rgba(17, 17, 17, 0.3);
}

body.gx .filter-btn.is-active {
    color: #FFFFFF;
    background: var(--gx-ink);
    border-color: var(--gx-ink);
}

body.gx .ix-count {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--gx-ink-faint);
}

body.gx .filter-btn.is-active .ix-count { color: rgba(255, 255, 255, 0.62); }

body.gx .ix-group { margin-bottom: 38px; }

body.gx .ix-group-title {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 14px;
    padding-bottom: 10px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--gx-ink-faint);
    border-bottom: 1px solid var(--gx-line);
}

body.gx .ix-group-count {
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    font-variant-numeric: tabular-nums;
}

body.gx .ix-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    gap: 10px;
}

body.gx a.tool-card {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 15px 16px;
    background: var(--gx-surface);
    border: 1px solid var(--gx-line);
    border-radius: 16px;
    text-decoration: none;
    transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

body.gx a.tool-card:hover {
    border-color: rgba(194, 58, 22, 0.4);
    transform: translateY(-1px);
    box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04), 0 14px 26px -22px rgba(17, 17, 17, 0.4);
}

body.gx .ix-card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--gx-ink);
    letter-spacing: -0.01em;
}

body.gx a.tool-card:hover .ix-card-title { color: var(--gx-accent); }

body.gx .ix-card-desc {
    font-size: 13px;
    line-height: 1.45;
    color: var(--gx-ink-faint);
}

body.gx .ix-empty {
    margin: 30px 0 0;
    text-align: center;
    font-size: 15.5px;
    color: var(--gx-ink-muted);
}

body.gx .ix-clear {
    font: inherit;
    color: var(--gx-accent-text);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
}

body.gx .ix-faq {
    margin-top: 10px;
    padding-top: 34px;
    border-top: 1px solid var(--gx-line);
    max-width: 48rem;
}

body.gx .ix-faq .pg-h2 { margin: 0 0 16px; }

body.gx .ix-faq summary {
    cursor: pointer;
    padding: 15px 0;
    font-size: 15.5px;
    font-weight: 600;
    color: var(--gx-ink);
    list-style: none;
}

body.gx .ix-faq summary::-webkit-details-marker { display: none; }

body.gx .ix-faq summary::after {
    content: "+";
    float: right;
    font-weight: 400;
    font-size: 19px;
    line-height: 1;
    color: var(--gx-ink-faint);
}

body.gx .ix-faq details[open] summary::after { content: "\2013"; }

body.gx .ix-faq p {
    margin: 0;
    padding: 0 0 16px;
    font-size: 15px;
    line-height: 1.62;
    color: var(--gx-ink-muted);
}

@media (max-width: 640px) {
    body.gx .ix-controls { position: static; padding: 0; background: none; border: 0; box-shadow: none; backdrop-filter: none; }
    body.gx .ix-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    body.gx a.tool-card { transition: none; }
    body.gx a.tool-card:hover { transform: none; }
}

body.gx a.tool-card[hidden],
body.gx .ix-group[hidden] {
    display: none;
}

body.gx .blog-latest { margin-bottom: 34px; }

body.gx .blog-latest-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}

body.gx .blog-feature {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--gx-surface);
    border: 1px solid var(--gx-line);
    border-radius: 16px;
    transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

body.gx .blog-feature:hover {
    border-color: rgba(194, 58, 22, 0.4);
    transform: translateY(-1px);
    box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04), 0 16px 28px -24px rgba(17, 17, 17, 0.4);
}

body.gx .blog-feature-media {
    display: block;
    aspect-ratio: 1200 / 630;
    background: var(--gx-tint);
    overflow: hidden;
}

body.gx .blog-feature-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.gx .blog-feature-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 13px;
    font-weight: 600;
    color: var(--gx-ink-faint);
}

body.gx .blog-feature-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 5px;
    padding: 14px 16px 16px;
}

body.gx .blog-feature-title {
    margin: 0;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

body.gx .blog-feature-title a { color: var(--gx-ink); text-decoration: none; }
body.gx .blog-feature:hover .blog-feature-title a { color: var(--gx-accent); }

body.gx .blog-feature-date {
    margin-top: auto;
    padding-top: 8px;
    font-size: 12.5px;
    color: var(--gx-ink-faint);
}

body.gx .blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 10px;
}

body.gx a.blog-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 15px 16px;
    background: var(--gx-surface);
    border: 1px solid var(--gx-line);
    border-radius: 16px;
    text-decoration: none;
    transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

body.gx a.blog-card:hover {
    border-color: rgba(194, 58, 22, 0.4);
    transform: translateY(-1px);
    box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04), 0 14px 26px -22px rgba(17, 17, 17, 0.4);
}

body.gx a.blog-card[hidden] { display: none; }

body.gx .blog-card-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.38;
    letter-spacing: -0.01em;
    color: var(--gx-ink);
}

body.gx a.blog-card:hover .blog-card-title { color: var(--gx-accent); }

body.gx .blog-listing {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--gx-line);
}

body.gx .blog-listing li { border-bottom: 1px solid var(--gx-line); }

body.gx .blog-listing-link {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 0;
    text-decoration: none;
}

body.gx .blog-listing-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--gx-ink);
    letter-spacing: -0.01em;
}

body.gx .blog-listing-link:hover .blog-listing-title { color: var(--gx-accent); }

body.gx .blog-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 30px;
    padding-top: 18px;
    border-top: 1px solid var(--gx-line);
    font-size: 14.5px;
}

body.gx .blog-pager a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 16px;
    font-weight: 600;
    color: var(--gx-ink);
    border: 1px solid var(--gx-line-strong);
    border-radius: 999px;
    text-decoration: none;
}

body.gx .blog-pager a:hover { border-color: var(--gx-accent); color: var(--gx-accent); }

body.gx .blog-authors {
    margin: 30px 0 0;
    text-align: center;
    font-size: 15px;
}

body.gx .blog-authors a { color: var(--gx-accent-text); font-weight: 600; }

@media (max-width: 640px) {
    body.gx .blog-grid { grid-template-columns: minmax(0, 1fr); }
    body.gx .blog-latest-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    body.gx .blog-feature,
    body.gx a.blog-card { transition: none; }
    body.gx .blog-feature:hover,
    body.gx a.blog-card:hover { transform: none; }
}


/* ===== mid-article CTA ===== */
body.gx .gx-blog-cta {
    border-radius: 26px;
    border: 1px solid var(--gx-accent-tint-border, #FAE6DE);
    background: var(--gx-accent-tint);
    padding: 40px 32px;
    margin: 40px 0;
    text-align: center;
}

body.gx .gx-blog-cta-title {
    font-family: 'Instrument Serif', Georgia, serif;
    font-weight: 400;
    font-size: clamp(1.5rem, 3.5vw, 1.875rem);
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--gx-ink);
    margin: 0;
}

body.gx .gx-blog-cta-body {
    margin: 10px auto 0;
    max-width: 36rem;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--gx-ink-muted);
}

body.gx .gx-blog-cta-body p:last-child { margin-bottom: 0; }

body.gx .gx-blog-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 26px;
    min-height: 50px;
    padding-inline: 26px;
    border-radius: 999px;
    background: var(--gx-accent);
    color: #FFFFFF;
    font-size: 15.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .15s ease;
}

body.gx .gx-blog-cta-btn:hover {
    background: var(--gx-accent-ink);
    color: #FFFFFF;
}

@media (min-width: 768px) {
    body.gx .gx-blog-cta { padding: 48px 40px; }
}

/* ===== orange → the coral ramp ===== */
body.gx {
    --gx-accent-on-dark: #E8906F;
}

body.gx .text-orange-300 { color: var(--gx-accent-on-dark); }
body.gx .text-orange-500 { color: var(--gx-accent); }
body.gx .text-orange-600 { color: var(--gx-accent-text); }
body.gx .text-orange-700 { color: var(--gx-accent-ink); }

body.gx .bg-orange-50 { background-color: var(--gx-accent-tint); }
body.gx .bg-orange-500 { background-color: #C9512A; }
body.gx .bg-orange-600 { background-color: var(--gx-accent); }
body.gx .hover\:bg-orange-700:hover { background-color: var(--gx-accent-ink); }

body.gx .border-orange-400 { border-color: #D97E5C; }
body.gx .ring-orange-200 { --tw-ring-color: #F3D6C9; }
body.gx .ring-orange-400 { --tw-ring-color: #D97E5C; }
body.gx .shadow-orange-500\/20 { --tw-shadow-color: rgba(194, 58, 22, 0.2); }

body.gx .from-orange-400 { --tw-gradient-from: #D97E5C var(--tw-gradient-from-position); }
body.gx .from-orange-500 { --tw-gradient-from: #C9512A var(--tw-gradient-from-position); }
body.gx .to-orange-500 { --tw-gradient-to: #C9512A var(--tw-gradient-to-position); }
body.gx .to-orange-600 { --tw-gradient-to: var(--gx-accent) var(--tw-gradient-to-position); }
body.gx .to-rose-500 { --tw-gradient-to: var(--gx-accent-ink) var(--tw-gradient-to-position); }

body.gx .pg-col .grid > div[class="p-6"],
body.gx .pg-col .grid > div[class="p-6 "] {
    background: var(--gx-surface);
    border: 1px solid var(--gx-line);
    border-radius: 16px;
    padding: 20px 22px;
}

body.gx .pg-col .grid > div[class="p-6"] > p:last-child,
body.gx .pg-col .grid > div[class="p-6"] > div:first-child {
    margin-bottom: 0;
}

body.gx .pg-section {
    padding-block: 32px;
}