/* QueueHawk landing page - handgeschriebenes CSS, kein Build-Tooling, konsumiert tokens.css. */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body {
    margin: 0;
    font-family: var(--qh-font-sans);
    color: var(--qh-text);
    background: var(--qh-bg);
    line-height: 1.5;
}

a { color: inherit; }

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}

/* --- Header --- */
.qh-header {
    background: var(--qh-ink);
    color: #F8FAFC;
    position: sticky;
    top: 0;
    z-index: 10;
}

.qh-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
}

.qh-logo { height: 32px; }

.qh-nav {
    display: flex;
    align-items: center;
    gap: 24px;
}

.qh-nav a { text-decoration: none; color: #CBD5E1; font-size: 0.95rem; }
.qh-nav a:hover { color: #F8FAFC; }

.qh-lang-toggle a {
    color: #94A3B8;
    text-decoration: none;
    font-size: 0.9rem;
}
.qh-lang-toggle a.active { color: #F8FAFC; font-weight: 600; }

.qh-btn {
    display: inline-block;
    padding: 10px 20px;
    border-radius: var(--qh-radius-md);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.qh-btn-primary { background: var(--qh-primary); color: #0F172A; }
.qh-btn-primary:hover { background: var(--qh-primary-dark); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(217, 119, 6, 0.28); }

.qh-btn-ghost { background: transparent; color: #F8FAFC; border: 1px solid #334155; }
.qh-btn-ghost:hover { border-color: #64748B; transform: translateY(-1px); }

/* qh-btn-ghost is tuned for the dark header/hero/footer (light text, dark border) - reusing it
   on light sections (pricing cards, install column) made text unreadable (near-white on
   near-white) and the dark border look like a stray frame. qh-btn-outline is the equivalent
   secondary button for light backgrounds. */
.qh-btn-outline { background: transparent; color: var(--qh-ink); border: 1px solid var(--qh-border); }
.qh-btn-outline:hover { border-color: var(--qh-primary); color: var(--qh-primary); }

/* --- Hero --- */
.qh-hero {
    background:
        radial-gradient(circle at 12% 8%, rgba(217, 119, 6, 0.22), transparent 40%),
        radial-gradient(circle at 92% 85%, rgba(14, 165, 233, 0.18), transparent 45%),
        var(--qh-ink);
    color: #F8FAFC;
    padding: 88px 0 96px;
    position: relative;
    overflow: hidden;
}

.qh-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(circle at 50% 0%, black, transparent 72%);
    mask-image: radial-gradient(circle at 50% 0%, black, transparent 72%);
    pointer-events: none;
}

.qh-hero .container {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 32px;
    align-items: center;
}

.qh-hero-copy { text-align: left; }

.qh-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(217, 119, 6, 0.14);
    border: 1px solid rgba(217, 119, 6, 0.35);
    color: var(--qh-primary-dark);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    margin-bottom: 22px;
}

.qh-hero h1 {
    font-size: 2.65rem;
    line-height: 1.15;
    margin: 0 0 20px;
}

.qh-hero .qh-accent { color: var(--qh-primary-dark); }

.qh-hero p.qh-sub {
    font-size: 1.15rem;
    color: #CBD5E1;
    max-width: 560px;
    margin: 0 0 36px;
}

.qh-hero .qh-cta-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* --- Hero product screenshot --- */
.qh-hero-visual {
    position: relative;
}

.qh-browser-frame {
    background: #1E293B;
    border-radius: var(--qh-radius-lg);
    overflow: hidden;
    box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06);
    transform: perspective(1400px) rotateY(-4deg) rotateX(1deg);
}

.qh-browser-chrome {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 12px 16px;
}

.qh-browser-chrome span {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #475569;
}

.qh-browser-frame img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 980px) {
    .qh-hero .container { grid-template-columns: 1fr; text-align: center; }
    .qh-hero-copy { text-align: center; }
    .qh-hero p.qh-sub { margin-left: auto; margin-right: auto; }
    .qh-hero .qh-cta-row { justify-content: center; }
    .qh-browser-frame { transform: none; margin-top: 48px; }
}

/* --- Sections --- */
section { padding: 88px 0; }
section.qh-alt { background: var(--qh-surface); }

h2.qh-section-title {
    font-size: 2rem;
    text-align: center;
    margin: 0 0 12px;
}

p.qh-section-sub {
    text-align: center;
    color: var(--qh-text-muted);
    max-width: 620px;
    margin: 0 auto 56px;
    font-size: 1.05rem;
}

/* --- Problem/solution cards --- */
.qh-grid-4 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 24px;
}

.qh-card {
    background: var(--qh-surface);
    border: 1px solid var(--qh-border);
    border-radius: var(--qh-radius-lg);
    padding: 28px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.qh-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 32px -18px rgba(15, 23, 42, 0.25);
    border-color: #CBD5E1;
}

.qh-card h3 { margin: 0 0 10px; font-size: 1.1rem; }
.qh-card p { margin: 0; color: var(--qh-text-muted); font-size: 0.95rem; }
.qh-card .qh-card-icon {
    width: 40px; height: 40px; border-radius: 10px;
    background: rgba(217, 119, 6, 0.12);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 16px;
    /* Farbe des Icons: die SVGs zeichnen mit currentColor, erben also von hier. */
    color: var(--qh-primary);
}

/* Eigenes Icon-Set statt Emoji (2026-08-17). Emoji rendern auf jedem Betriebssystem anders,
   lassen sich weder in Farbe noch Strichstärke an die Marke angleichen und wirken dadurch wie ein
   Platzhalter - der auffälligste "noch nicht fertig"-Marker der Seite. */
.qh-card .qh-card-icon svg { width: 21px; height: 21px; display: block; }

/* --- How it works --- */
.qh-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 32px;
    counter-reset: qh-step;
}

.qh-step { text-align: center; }

.qh-step .qh-step-num {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--qh-ink);
    color: var(--qh-primary-dark);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    margin: 0 auto 16px;
}

.qh-step h3 { margin: 0 0 8px; }
.qh-step p { color: var(--qh-text-muted); margin: 0; }

.qh-trust-callout {
    margin-top: 48px;
    background: var(--qh-bg);
    border: 1px solid var(--qh-border);
    border-radius: var(--qh-radius-lg);
    padding: 20px 24px;
    /* Flex statt text-align:center, seit das führende Schloss ein SVG ist: als Inline-Element
       sässe es sonst auf der Textgrundlinie statt mittig zur Zeile. */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 0.95rem;
    color: var(--qh-text);
}

.qh-trust-callout svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--qh-primary);
}

/* --- Install / code samples --- */
.qh-install {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
    margin-top: 64px;
}

.qh-install-copy h3 { margin: 0 0 16px; font-size: 1.3rem; }
.qh-install-copy p { color: var(--qh-text-muted); font-size: 0.95rem; margin: 0 0 14px; }

.qh-install-copy code {
    font-family: var(--qh-font-mono);
    background: var(--qh-bg);
    border: 1px solid var(--qh-border);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 0.88em;
    color: var(--qh-text);
}

.qh-nuget-link { margin-top: 8px; }

.qh-install-code {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.qh-code-block {
    background: var(--qh-ink);
    border-radius: var(--qh-radius-lg);
    overflow: hidden;
}

.qh-code-label {
    padding: 10px 20px;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94A3B8;
    border-bottom: 1px solid #1E293B;
}

.qh-code-block pre {
    margin: 0;
    padding: 20px;
    overflow-x: auto;
}

.qh-code-block code {
    font-family: var(--qh-font-mono);
    font-size: 0.85rem;
    line-height: 1.65;
    color: #E2E8F0;
    white-space: pre;
}

.qh-code-block .qh-code-comment { color: #64748B; }
.qh-code-block .qh-code-str { color: var(--qh-primary-dark); }

@media (max-width: 900px) {
    .qh-install { grid-template-columns: 1fr; }
}

/* --- Pricing --- */
.qh-billing-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-bottom: 48px;
}

.qh-billing-toggle button {
    background: none;
    border: 1px solid var(--qh-border);
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 0.9rem;
    cursor: pointer;
    color: var(--qh-text-muted);
}

.qh-billing-toggle button.active {
    background: var(--qh-ink);
    color: #F8FAFC;
    border-color: var(--qh-ink);
}

.qh-billing-toggle .qh-save-badge {
    color: var(--qh-success);
    font-size: 0.85rem;
    font-weight: 600;
}

.qh-pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 24px;
}

.qh-plan {
    background: var(--qh-surface);
    border: 1px solid var(--qh-border);
    border-radius: var(--qh-radius-lg);
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.qh-plan:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 32px -18px rgba(15, 23, 42, 0.22);
}

.qh-plan.qh-plan-featured {
    border-color: var(--qh-primary);
    box-shadow: 0 8px 24px rgba(217, 119, 6, 0.12);
    position: relative;
}

.qh-plan.qh-plan-featured:hover {
    box-shadow: 0 20px 40px -16px rgba(217, 119, 6, 0.32);
}

.qh-plan-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--qh-primary);
    color: #0F172A;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 999px;
}

.qh-plan h3 { margin: 0 0 4px; font-size: 1.15rem; }
.qh-plan .qh-plan-price { font-size: 2.2rem; font-weight: 700; margin: 12px 0 4px; }
.qh-plan .qh-plan-price span { font-size: 1rem; font-weight: 400; color: var(--qh-text-muted); }
.qh-plan .qh-plan-blurb { color: var(--qh-text-muted); font-size: 0.9rem; margin: 0 0 20px; min-height: 40px; }

.qh-plan ul {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    flex-grow: 1;
}

.qh-plan li {
    padding: 6px 0;
    font-size: 0.92rem;
    color: var(--qh-text);
}

.qh-plan li::before { content: "✓ "; color: var(--qh-success); font-weight: 700; }

.qh-plan .qh-btn { text-align: center; }

/* --- Integrations bar --- */
.qh-integrations {
    padding: 48px 0;
}

.qh-integrations .qh-integrations-label {
    text-align: center;
    color: var(--qh-text-muted);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 28px;
}

.qh-integrations-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 14px;
}

.qh-integrations-row .qh-integrations-divider {
    width: 1px;
    height: 20px;
    background: var(--qh-border);
    margin: 0 4px;
}

.qh-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--qh-border);
    background: var(--qh-surface);
    color: var(--qh-text);
    font-size: 0.9rem;
    font-weight: 600;
}

/* Bewusst KEINE Fremdlogos in dieser Leiste: Slack und Microsoft untersagen die Weiterverbreitung
   ihrer Marken (beide fehlen deshalb auch in CC0-Icon-Sets), und eine nachgezeichnete Annäherung
   an ein geschütztes Logo ist genau das, was deren Markenrichtlinien ausschliessen. Ein
   durchgängiges eigenes Set ist ausserdem ruhiger als eine Mischung aus bunten Originallogos und
   selbstgebauten Glyphen. Wer echte Logos will, muss die offiziellen Assets der Hersteller
   einbinden - das ist ein Austausch der <svg>-Blöcke, keine Umstellung. */
.qh-chip svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--qh-text-muted);
}

/* --- FAQ --- */
.qh-faq {
    max-width: 780px;
    margin: 0 auto;
}

.qh-faq-item {
    border-bottom: 1px solid var(--qh-border);
    padding: 6px 0;
}

.qh-faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 4px;
    cursor: pointer;
    font-weight: 600;
    font-size: 1.02rem;
    list-style: none;
}

.qh-faq-item summary::-webkit-details-marker { display: none; }

.qh-faq-item summary::after {
    content: "+";
    flex-shrink: 0;
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--qh-primary);
    transition: transform 0.2s ease;
}

.qh-faq-item[open] summary::after { transform: rotate(45deg); }

.qh-faq-item p {
    margin: 0;
    padding: 0 4px 20px;
    color: var(--qh-text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* --- Scroll reveal --- */
.qh-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.qh-reveal.qh-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .qh-reveal { opacity: 1; transform: none; transition: none; }
}

/* --- Dogfooding --- */
.qh-dogfood {
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
}

/* --- Footer --- */
.qh-footer {
    background: var(--qh-ink);
    color: #94A3B8;
    padding: 64px 0 32px;
}

.qh-footer-top {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 0.8fr;
    gap: 32px;
    padding-bottom: 40px;
}

.qh-footer-brand .qh-logo { height: 28px; margin-bottom: 14px; }
.qh-footer-brand p { max-width: 320px; font-size: 0.9rem; color: #94A3B8; margin: 0; }

.qh-footer-col h4 {
    color: #F8FAFC;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 16px;
}

.qh-footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.qh-footer-col a { color: #CBD5E1; text-decoration: none; font-size: 0.92rem; }
.qh-footer-col a:hover { color: #F8FAFC; }

.qh-footer-bottom {
    border-top: 1px solid #1E293B;
    padding-top: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 0.88rem;
}

.qh-footer-bottom a { color: #CBD5E1; text-decoration: none; margin-left: 20px; }
.qh-footer-bottom a:hover { color: #F8FAFC; }

@media (max-width: 780px) {
    .qh-footer-top { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 640px) {
    .qh-hero h1 { font-size: 2rem; }
    section { padding: 56px 0; }

    /* Fixed 72px header height + unwrapped nav overflowed below ~480px (link text wrapped onto
       multiple lines within the fixed-height bar, clipping the login/CTA buttons). Secondary
       text links collapse here - they're one scroll away via the page itself - keeping only the
       language toggle and the two actions that matter on a phone. */
    .qh-header .container { height: auto; flex-wrap: wrap; padding: 14px 24px; row-gap: 10px; }
    .qh-nav { gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
    .qh-nav a:not(.qh-btn) { display: none; }
    .qh-nav .qh-lang-toggle { display: none; }
}

/* --- Sub-page header (compare/blog - simpler than the homepage hero, no visual column) --- */
.qh-page-header {
    background: var(--qh-ink);
    color: #F8FAFC;
    padding: 64px 0 56px;
    text-align: center;
}

.qh-page-header .qh-hero-kicker { margin-bottom: 18px; }
.qh-page-header h1 { font-size: 2.3rem; line-height: 1.2; margin: 0 0 16px; }
.qh-page-header p.qh-sub { max-width: 640px; margin: 0 auto; font-size: 1.08rem; color: #CBD5E1; }

/* --- Blog post prose --- */
.qh-post-meta { color: var(--qh-text-muted); font-size: 0.92rem; margin: 0 0 8px; text-align: center; }

.qh-prose { max-width: 720px; margin: 0 auto; }
.qh-prose h2 { font-size: 1.5rem; margin: 40px 0 14px; }
.qh-prose h3 { font-size: 1.15rem; margin: 28px 0 10px; }
.qh-prose p { margin: 0 0 18px; line-height: 1.7; }
.qh-prose p.qh-lead { color: var(--qh-text-muted); font-size: 1.1rem; }
.qh-prose ul, .qh-prose ol { margin: 0 0 18px; padding-left: 22px; line-height: 1.7; }
.qh-prose li { margin-bottom: 6px; }
.qh-prose code { font-family: var(--qh-font-mono); background: var(--qh-surface); border: 1px solid var(--qh-border); border-radius: 4px; padding: 2px 6px; font-size: 0.9em; }
/* .qh-code-block nested inside .qh-prose (blog posts) - ".qh-prose code" above has equal
   specificity to ".qh-code-block code" but comes later in the file, so its light background
   silently won over the dark code-block background while the light text color stayed - this
   rule's higher specificity restores the dark-block styling regardless of source order. */
.qh-prose .qh-code-block code { background: transparent; border: none; padding: 0; }
.qh-prose a { color: var(--qh-primary); text-decoration: underline; }

.qh-post-links {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    max-width: 720px;
    margin: 48px auto 0;
    padding-top: 24px;
    border-top: 1px solid var(--qh-border);
    font-size: 0.95rem;
}

/* --- Blog index --- */
.qh-blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    max-width: 960px;
    margin: 0 auto;
}

.qh-blog-grid .qh-card h3 { margin-bottom: 10px; }
.qh-blog-grid .qh-card a.qh-card-link { display: inline-block; margin-top: 12px; color: var(--qh-primary); font-weight: 600; text-decoration: none; font-size: 0.92rem; }
.qh-blog-grid .qh-card a.qh-card-link:hover { text-decoration: underline; }

/* --- Comparison table ---
   Fixed column widths (not nowrap+auto) so long prose in a cell can never blow the table wider
   than its container - that's what happened before: nowrap on the Setup/Cost rows forced the
   table past the viewport edge, cutting off the Hangfire Pro column entirely. Setup/Cost were
   pulled out of the table into .qh-compare-facts below instead of fighting that layout - mixing
   single-glyph checkmark cells with full-sentence cells in the same fixed-width column never
   looks balanced either way. */
.qh-compare-card {
    background: var(--qh-surface);
    border: 1px solid var(--qh-border);
    border-radius: var(--qh-radius-lg);
    overflow: hidden;
    margin: 8px 0 28px;
}

.qh-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.qh-compare-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 0.95rem;
}

.qh-compare-table th, .qh-compare-table td {
    padding: 16px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--qh-border);
    overflow-wrap: break-word;
}

.qh-compare-table tbody tr:last-child td { border-bottom: none; }

.qh-compare-table th {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--qh-text-muted);
    font-weight: 600;
    background: var(--qh-bg);
}

.qh-compare-table th:first-child, .qh-compare-table td:first-child { width: 40%; }
.qh-compare-table th:not(:first-child), .qh-compare-table td:not(:first-child) { width: 20%; text-align: center; }
.qh-compare-table tbody tr:hover { background: var(--qh-bg); }
.qh-compare-table .qh-yes { color: var(--qh-success); font-weight: 700; font-size: 1.2rem; }
.qh-compare-table .qh-no { color: var(--qh-text-muted); font-weight: 700; font-size: 1.2rem; }
/* Lange Texte in einer yes/no-Spalte (z.B. "Not supported") brauchen eine kleinere Schrift
   als das ✓/✗-Icon - sonst wirkt die Zelle visuell deplatziert. qh-cell-text markiert solche
   Zellen, die dann die reguläre Tabellen-Schriftgröße statt des 1.2rem-Icons nutzen. */
.qh-compare-table .qh-cell-text { font-size: 0.86rem; font-weight: 500; line-height: 1.4; }

/* --- Comparison quick facts (Setup/Cost) - three cards instead of table rows --- */
.qh-compare-facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 0 0 28px;
}

.qh-compare-fact {
    background: var(--qh-surface);
    border: 1px solid var(--qh-border);
    border-radius: var(--qh-radius-md);
    padding: 18px 20px;
}

.qh-compare-fact h4 { margin: 0 0 12px; font-size: 0.92rem; }
.qh-compare-fact p { margin: 0 0 8px; font-size: 0.86rem; color: var(--qh-text-muted); line-height: 1.5; }
.qh-compare-fact p:last-child { margin-bottom: 0; }
.qh-compare-fact strong { color: var(--qh-text); }

/* --- Agent configuration reference table (/docs/agent-configuration) - own variant instead of
   .qh-compare-table: that one's 40/20/20/20 column split is tuned for a feature comparison
   (short yes/no/icon cells), here there are only 3 columns with very unequal text length
   (Default is usually one word/number, Description a full sentence) - reuses the same card/
   scroll wrapper (.qh-compare-card .qh-table-scroll) for a consistent look. */
.qh-options-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.qh-options-table th, .qh-options-table td {
    padding: 14px 16px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--qh-border);
    overflow-wrap: break-word;
}

.qh-options-table tbody tr:last-child td { border-bottom: none; }

.qh-options-table th {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--qh-text-muted);
    font-weight: 600;
    background: var(--qh-bg);
}

.qh-options-table th:nth-child(1), .qh-options-table td:nth-child(1) { width: 22%; }
.qh-options-table th:nth-child(3), .qh-options-table td:nth-child(3) { width: 16%; }
.qh-options-table code { white-space: nowrap; }
.qh-options-table tbody tr:hover { background: var(--qh-bg); }

@media (max-width: 640px) {
    .qh-page-header h1 { font-size: 1.75rem; }
    .qh-compare-table { font-size: 0.82rem; }
    .qh-compare-table th, .qh-compare-table td { padding: 10px 4px; }
    /* Narrow columns (~70px at this breakpoint) can't fit single long words like "QueueHawk" or
       "Dashboard" - uppercase is wider per character than mixed case, so dropping text-transform
       here (mobile only, desktop keeps the small-caps look) is enough on its own to fit them on
       one line without an ugly mid-word break; word-break stays as a safety net past that. */
    .qh-compare-table th { font-size: 0.7rem; letter-spacing: normal; text-transform: none; word-break: break-word; }
    .qh-compare-table th:first-child, .qh-compare-table td:first-child { width: 34%; }
    .qh-compare-table th:not(:first-child), .qh-compare-table td:not(:first-child) { width: 22%; }
    .qh-compare-facts { grid-template-columns: 1fr; }
    .qh-options-table { font-size: 0.82rem; }
    .qh-options-table th, .qh-options-table td { padding: 10px 8px; }
}

/* --- Pricing calculator (per-app vs. per-job blog post) --- */
.qh-calc-box {
    background: var(--qh-surface);
    border: 1px solid var(--qh-border);
    border-radius: var(--qh-radius-lg);
    padding: 28px 24px;
    margin: 28px 0;
}

.qh-calc-inputs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 18px;
    margin-bottom: 24px;
}

.qh-calc-field label { display: block; font-size: 0.85rem; color: var(--qh-text-muted); margin-bottom: 6px; }

.qh-calc-field input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--qh-border);
    border-radius: var(--qh-radius-md);
    font-size: 1rem;
    font-family: var(--qh-font-sans);
    background: var(--qh-bg);
    color: var(--qh-text);
}

.qh-calc-field input:focus { outline: 2px solid var(--qh-primary); outline-offset: 1px; }

.qh-calc-results {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.qh-calc-result {
    background: var(--qh-bg);
    border: 1px solid var(--qh-border);
    border-radius: var(--qh-radius-md);
    padding: 16px 18px;
    transition: border-color 0.2s ease;
}

.qh-calc-result-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--qh-text-muted); font-weight: 600; }
.qh-calc-result-value { font-size: 1.6rem; font-weight: 700; margin-top: 6px; }
/* Highlights whichever side is currently cheaper as the two inputs change - deliberately not
   fixed to always favor QueueHawk, see the accompanying blog post copy on why. */
.qh-calc-result.qh-calc-winner { border-color: var(--qh-success); }
.qh-calc-note { font-size: 0.85rem; color: var(--qh-text-muted); margin-top: 16px; margin-bottom: 0; }