body.gx {
    --gx-field: #FBF6EF;
    --gx-field-2: #FBF6EF;
    --gx-field-3: #FBF6EF;
    --gx-ground: #FBF6EF;
    --gx-surface: #FFFFFF;
    --gx-ink: #1A1A1C;
    --gx-ink-muted: #4A4139;
    --gx-ink-faint: #6B6155;
    --gx-line: rgba(26, 26, 28, 0.10);
    --gx-line-strong: rgba(26, 26, 28, 0.18);
    --gx-accent: #C23A16;
    --gx-accent-text: #B03413;
    --gx-accent-tint: #FDF3EF;
    --gx-accent-ink: #8E2A10;
    --gx-success: #1F6B4A;
    --gx-success-tint: #EFF3EC;
    --gx-tint: #F5E7DA;
    --gx-tint-soft: #F9F0E7;
    --gx-tan: #DFAC86;
    --gx-tan-soft: #F0D7C2;
    --gx-tan-ink: #43210F;

    /* Flat, not a gradient. The gradient existed to lift the top of a grey
       page; on the cream ground it only made the header area a different
       colour from the first section. */
    background: var(--gx-ground);
    color: var(--gx-ink);
    font-family: 'Public 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 {
    font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700;
    letter-spacing: -0.03em;
}

body.gx h1 { font-weight: 800; }

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: var(--gx-tan);
    background: var(--gx-surface);
    border-radius: 20px;
}

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: #E0DCD6;
    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: #B8B4B0;
    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: #B8B4B0;
}

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: #B8B4B0;
}

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);
}

/* The alternating band, back as a flat cream tint with hairlines. It was
   flattened to transparent when every section ran together on one ground;
   with the cream ground the tint is what separates one section from the
   next, and it is what the drop shadow used to do. */
body.gx section.bg-slate-50 {
    background: var(--gx-tint);
    border-top: 1px solid var(--gx-line);
    border-bottom: 1px solid var(--gx-line);
    padding-block: 52px;
}

body.gx .gx-eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gx-accent-ink);
    margin-bottom: 10px;
}

/* ---------- header ---------- */
/* It was a floating pill: a translucent blurred capsule with a drop shadow,
   sitting clear of the page. The markup underneath is a plain flat bar, so
   this now only keeps the ground and the hairline in step with the palette
   and lets the template's own classes do the rest. */
body.gx header.sticky {
    background: var(--gx-ground);
    border-bottom: 1px solid var(--gx-line);
}

/* 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: #B8B4B0;
    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: #B8B4B0;
    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: #B8B4B0;
}

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. */
/* The surface is white, set by the template's own bg-white. A wash here
   made the card the same colour as the cream around it, so only the dashed
   line said where the drop target ended. Drag-over still fills, below. */
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-surface);
}

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:  #F9F0E7;
    --gx-n100: #F7EADE;
    --gx-n200: #F3E0D0;
    --gx-n300: #EED5C0;
    --gx-n400: #A89582;
    --gx-n500: #756A5C;
    --gx-n600: #4A4139;
    --gx-n700: #3A332C;
    --gx-n800: #26211B;
    --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(245, 231, 218, 0.5); }
body.gx .bg-slate-50\/60 { background-color: rgba(245, 231, 218, 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(249, 240, 231, 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: #E0DCD6; }

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(245, 231, 218, 0.4); }
body.gx .bg-slate-50\/70 { background-color: rgba(245, 231, 218, 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(249, 240, 231, 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-surface);
    background-image: none;
}

/* The drop zone also carries border-slate-300, and that remap sits further
   down this file at the same specificity, so it won the tan set earlier. */
body.gx .border-dashed[class] {
    border-color: var(--gx-tan);
}

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: 64rem;
}

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;
}

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

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

body.gx .ix-card-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* The footer was a near-black slab: the last dark object on a cream page,
   the same thing the Pro card and the bigger-files panel used to be. It
   takes the section tint instead, so the page ends on its own ground. */
body.gx .site-footer {
    margin-top: 48px;
    padding-block: 44px 28px;
    background: var(--gx-tint);
    color: var(--gx-ink-soft);
    border-top: 1px solid var(--gx-line);
}

body.gx .footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 30px 24px;
    padding-bottom: 34px;
}

body.gx .footer-heading {
    margin: 0 0 12px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gx-ink);
}

body.gx .footer-links {
    margin: 0;
    padding: 0;
    list-style: none;
}

body.gx .footer-links li + li { margin-top: 2px; }

body.gx .footer-links a {
    display: block;
    padding: 3px 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--gx-ink-soft);
    text-decoration: none;
    transition: color 0.15s ease;
}

body.gx .footer-links a:hover { color: var(--gx-accent-text); }

body.gx .footer-assurances {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 26px;
    margin: 0;
    padding: 18px 0;
    list-style: none;
    border-top: 1px solid var(--gx-line);
    font-size: 13px;
    color: var(--gx-ink-faint);
}

body.gx .footer-assurances a {
    color: var(--gx-ink-soft);
    text-decoration: underline;
    text-underline-offset: 3px;
}

body.gx .footer-assurances a:hover { color: var(--gx-accent-text); }

body.gx .footer-base {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 26px;
    padding-top: 18px;
    border-top: 1px solid var(--gx-line);
}

body.gx .footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--gx-ink);
    text-decoration: none;
}

body.gx .footer-brand img { height: 26px; width: auto; }

body.gx .footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
}

body.gx .footer-legal a {
    font-size: 13.5px;
    color: var(--gx-ink-soft);
    text-decoration: none;
}

body.gx .footer-legal a:hover { color: var(--gx-accent-text); }

body.gx .footer-copy {
    margin: 0;
    font-size: 13px;
    color: var(--gx-ink-faint);
}

@media (max-width: 680px) {
    body.gx .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 18px; }
    body.gx .footer-base { justify-content: flex-start; }
}

body.gx .pp-country .blog-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

body.gx .pp-dims {
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--gx-ink-faint);
    font-variant-numeric: tabular-nums;
}

body.gx .ix-group-title [aria-hidden] {
    font-size: 17px;
    margin-right: 2px;
}

body.gx .pp-index {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.gx .pp-index a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    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;
}

body.gx .pp-index a:hover {
    border-color: rgba(194, 58, 22, 0.4);
    transform: translateY(-1px);
}

body.gx .pp-flag { font-size: 19px; line-height: 1; }

body.gx .pp-name {
    flex: 1;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--gx-ink);
    letter-spacing: -0.01em;
}

body.gx .pp-index a:hover .pp-name { color: var(--gx-accent); }

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



/* ===== tool-card icon chips ===== */

body.gx .gx-chip {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    flex: none;
    transition: transform 0.18s ease;
}

body.gx .gx-chip svg {
    width: 17px;
    height: 17px;
    display: block;
}

body.gx .gx-chip-rust { background: var(--gx-accent); color: #FFFFFF; }
body.gx .gx-chip-tan  { background: var(--gx-tan); color: var(--gx-tan-ink); }
body.gx .gx-chip-sand { background: var(--gx-tint); color: var(--gx-accent-ink); }
body.gx .gx-chip-ink  { background: var(--gx-ink); color: #FFFFFF; }

body.gx .group:hover .gx-chip { transform: translateY(-1px); }

/* The head was built for a lone title: baseline-aligned, space-between, so
   the hover arrow sat at the right edge. With a chip in front, space-between
   pushes the title into the middle instead of letting it sit by its icon. */
body.gx .gx-card-head:has(.gx-chip) {
    align-items: center;
    justify-content: flex-start;
}

body.gx .gx-card-head:has(.gx-chip)::after { margin-left: auto; }

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

/* ===== the bigger-files panel, light ===== */
/* It was a near-black slab, the same object the Pro pricing card used to be.
   On the cream ground a dark block reads as a different page. Scoped to
   .gx-limits so .gx-dark keeps working wherever else it is used. */

body.gx .gx-dark.gx-limits {
    background: var(--gx-surface);
    color: var(--gx-ink-muted);
    border: 1px solid var(--gx-line);
}

body.gx .gx-dark.gx-limits h2,
body.gx .gx-dark.gx-limits h3 {
    color: var(--gx-ink);
}

body.gx .gx-limits p {
    color: var(--gx-ink-muted);
}

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

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

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

body.gx .gx-limits-secondary:hover {
    border-color: var(--gx-tan);
    color: var(--gx-ink);
}

body.gx .gx-limits-stats > div {
    background: var(--gx-tint);
    border: 1px solid var(--gx-line);
}

body.gx .gx-limits-stats dt { color: var(--gx-ink-muted); }
body.gx .gx-limits-stats dd { color: var(--gx-ink); }
body.gx .gx-limits-stats > div:nth-child(2) dd { color: var(--gx-accent-ink); }

/* ===== dropdowns: one at a time ===== */
/* The panels opened on :hover and on :focus-within. A click leaves focus on
   the button, so the clicked menu stayed pinned open while moving the mouse
   to the next trigger opened that one too, and both showed at once.
   Focus-within no longer opens a panel on its own; a keyboard focus does,
   through :focus-visible, so tabbing still reaches the menus. */
body.gx .dropdown:focus-within > .dropdown-menu {
    opacity: 0;
    visibility: hidden;
}

body.gx .dropdown:hover > .dropdown-menu,
body.gx .dropdown:has(:focus-visible) > .dropdown-menu {
    opacity: 1;
    visibility: visible;
}

/* a mouse click should not leave a ring behind on the trigger */
body.gx .dropdown > button:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}