:root {
    --kx-brand-1: #5b6ff8;
    --kx-brand-2: #7c3aed;
    --kx-brand-3: #4f46e5;
    --kx-ink: #0f172a;
    --kx-text: #334155;
    --kx-muted: #64748b;
    --kx-border: #e2e8f0;
    --kx-soft: #f8fafc;
    --kx-brand-soft: #eef2ff;
    --kx-shadow: 0 12px 34px rgba(15, 23, 42, 0.07);
    --kx-shadow-hover: 0 18px 44px rgba(79, 70, 229, 0.12);
}

body {
    background: linear-gradient(180deg, #f8f9fd 0, #f7f8fb 520px, #fff 100%);
    color: var(--kx-text);
}

.gsc-opp-tool,
.gsc-regex-tool,
.utm-tool {
    margin-top: 48px !important;
    margin-bottom: 52px !important;
}

.kx-tool-eyebrow {
    display: flex;
    width: max-content;
    max-width: 100%;
    align-items: center;
    gap: 8px;
    margin: 0 auto 12px;
    padding: 7px 11px;
    border: 1px solid #c7d2fe;
    border-radius: 999px;
    background: rgba(238, 242, 255, 0.86);
    color: #4338ca;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    box-shadow: 0 6px 20px rgba(79, 70, 229, .06);
}

.kx-tool-eyebrow svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
}

.gsc-opp-tool h1,
.gsc-regex-tool h1,
.utm-tool h1 {
    font-size: clamp(2rem, 4vw, 2.8rem);
    line-height: 1.08;
    color: var(--kx-ink) !important;
    letter-spacing: -.04em !important;
}

.gsc-opp-intro,
.gsc-regex-intro,
.utm-intro {
    max-width: 760px !important;
    margin-bottom: 34px !important;
    font-size: 17px;
    color: var(--kx-muted) !important;
}

.opp-card,
.gsc-card,
.utm-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(203, 213, 225, .82) !important;
    border-radius: 18px !important;
    box-shadow: var(--kx-shadow) !important;
    background: rgba(255, 255, 255, .96) !important;
}

.opp-card::before,
.gsc-card::before,
.utm-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--kx-brand-1), var(--kx-brand-2));
    opacity: .78;
}

.opp-card h2,
.gsc-card h2,
.utm-card h2 {
    letter-spacing: -.02em;
}

.opp-field input,
.opp-field textarea,
.gsc-field input,
.gsc-field textarea,
.gsc-field select,
.utm-field input {
    border-color: #cbd5e1 !important;
    border-radius: 11px !important;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.opp-field input:hover,
.opp-field textarea:hover,
.gsc-field input:hover,
.gsc-field textarea:hover,
.gsc-field select:hover,
.utm-field input:hover {
    border-color: #a5b4fc !important;
}

.opp-field textarea:focus,
.opp-field input:focus,
.gsc-field textarea:focus,
.gsc-field input:focus,
.gsc-field select:focus,
.utm-field input:focus {
    outline: none !important;
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, .12) !important;
}

.opp-btn:not(.secondary),
.gsc-btn:not(.secondary),
.utm-btn:not(.secondary) {
    background: linear-gradient(135deg, var(--kx-brand-1), var(--kx-brand-2)) !important;
    box-shadow: 0 8px 20px rgba(91, 111, 248, .24);
    border-radius: 10px !important;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.opp-btn:not(.secondary):hover,
.gsc-btn:not(.secondary):hover,
.utm-btn:not(.secondary):hover {
    background: linear-gradient(135deg, var(--kx-brand-1), var(--kx-brand-2)) !important;
    transform: translateY(-1px);
    box-shadow: 0 12px 25px rgba(91, 111, 248, .30);
    filter: saturate(1.06);
}

.opp-btn.secondary,
.gsc-btn.secondary,
.utm-btn.secondary {
    border: 1px solid #dbe4ff !important;
    border-radius: 10px !important;
    background: #f1f4ff !important;
    color: #4338ca !important;
}

.opp-btn.secondary:hover,
.gsc-btn.secondary:hover,
.utm-btn.secondary:hover {
    background: #e9edff !important;
}

.opp-note,
.gsc-note,
.utm-note {
    border-radius: 12px !important;
    background: linear-gradient(180deg, #fafbff, #f7f8fc) !important;
    border-color: #e0e7ff !important;
}

.gsc-output,
.utm-output {
    border-color: #1e293b !important;
    border-radius: 13px !important;
    background:
        radial-gradient(circle at 100% 0, rgba(99, 102, 241, .18), transparent 34%),
        #0f172a !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 10px 28px rgba(15, 23, 42, .12);
}

.opp-stat {
    position: relative;
    overflow: hidden;
    border-radius: 14px !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .05);
}

.opp-stat::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 3px;
    background: linear-gradient(90deg, #818cf8, #a78bfa);
}

.opp-stat strong {
    letter-spacing: -.035em;
}

.opp-table-wrap {
    border-radius: 14px !important;
    box-shadow: inset 0 0 0 1px rgba(226,232,240,.5);
}

.opp-table tbody tr {
    transition: background .15s ease;
}

.opp-table tbody tr:hover {
    background: #fafbff;
}

.opp-score {
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.45);
}

@media (min-width: 821px) {
    .utm-layout > aside {
        position: sticky;
        top: 86px;
    }
}

.kx-output-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
    color: #6366f1;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.kx-output-kicker::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, .11);
}

.kx-tool-guide {
    border-top: 1px solid #eef2f7;
    padding-top: 54px !important;
}

.kx-tool-guide__card,
.kx-tool-guide details {
    border-radius: 16px !important;
    border-color: #e6eaf0 !important;
    box-shadow: 0 7px 24px rgba(15,23,42,.035);
}

.kx-tool-guide__related a {
    border-radius: 14px !important;
    background: linear-gradient(180deg, #f2f4ff, #eef2ff) !important;
    transition: transform .16s ease, box-shadow .16s ease;
}

.kx-tool-guide__related a:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(79,70,229,.10);
}

.tools-container {
    max-width: 1120px !important;
    margin-top: 52px !important;
}

.page-header {
    margin-bottom: 38px !important;
}

.page-header .kx-tool-eyebrow {
    margin-bottom: 13px;
}

.page-header h1 {
    font-size: clamp(2.25rem, 5vw, 3.2rem) !important;
    letter-spacing: -.045em !important;
    margin-bottom: 14px !important;
}

.page-header p {
    max-width: 760px;
    margin: 0 auto;
    line-height: 1.65;
}

.kx-tool-section {
    margin: 38px 0 54px;
}

.kx-tool-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.kx-tool-section-head h2 {
    margin: 0;
    color: var(--kx-ink);
    font-size: 22px;
    letter-spacing: -.03em;
}

.kx-tool-section-head p {
    margin: 4px 0 0;
    color: var(--kx-muted);
    font-size: 14px;
}

.tools-grid {
    gap: 18px !important;
}

.tool-card {
    position: relative;
    overflow: hidden;
    min-height: 220px;
    border-radius: 17px !important;
    border-color: #e1e7ef !important;
    box-shadow: 0 8px 26px rgba(15,23,42,.045) !important;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}

.tool-card:hover {
    transform: translateY(-5px) !important;
    border-color: #c7d2fe !important;
    box-shadow: var(--kx-shadow-hover) !important;
}

.tool-card.kx-featured {
    min-height: 250px;
    background:
        radial-gradient(circle at 100% 0, rgba(129,140,248,.10), transparent 38%),
        #fff;
}

.tool-card.kx-featured::after {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--kx-brand-1), var(--kx-brand-2));
}

.tool-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 48px !important;
    height: 48px !important;
    line-height: normal !important;
    background: linear-gradient(145deg, #f1f4ff, #eef2ff) !important;
    color: #4f46e5;
    border: 1px solid #dfe5ff;
}

.tool-icon svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
}

.tool-access {
    background: #f1f5f9 !important;
    color: #475569 !important;
}

.kx-featured .tool-access {
    background: #ecfdf5 !important;
    color: #047857 !important;
}

.tool-title {
    letter-spacing: -.025em;
}

.tool-link {
    color: #4f46e5 !important;
    font-weight: 700 !important;
}

@media (max-width: 640px) {
    .gsc-opp-tool,
    .gsc-regex-tool,
    .utm-tool,
    .tools-container {
        margin-top: 34px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .gsc-opp-intro,
    .gsc-regex-intro,
    .utm-intro {
        font-size: 16px;
        margin-bottom: 26px !important;
    }

    .opp-card,
    .gsc-card,
    .utm-card {
        padding: 19px !important;
        border-radius: 16px !important;
    }

    .opp-btn,
    .gsc-btn,
    .utm-btn {
        min-height: 44px;
    }

    .kx-tool-section-head {
        display: block;
    }

    .tool-card,
    .tool-card.kx-featured {
        min-height: 0;
    }

    .kx-tool-guide {
        padding-top: 38px !important;
    }
}