/* home-tweaks.css — small, surgical refinements to the v3 homepage.
   Linked ONLY from app/Views/index/index.tpl.php so these overrides
   never leak to /pricing, /docs, etc. Structure, palette, and brand
   are preserved; the goal is to add typographic + tactile character
   that the stock v3 styling doesn't have.

   What changes:
     1. Slightly heavier, tighter-tracked headlines in the body font
        (no second typeface) so the page reads as one voice.
     2. A subtle "§" mark prefixed to every eyebrow chip so the page
        reads as a numbered piece, not a deck.
     3. Cards lose their heavy box-shadow and pick up a hairline ground
        + a single top accent rule on hover.
     4. Link underlines: hairline + offset, thicken on hover.
     5. Hero "dots" backdrop replaced with a calmer halftone gradient.
     6. Stat numerals adopt tabular-lining figures (no font change).
     7. Hero badge sheds its pill shape for two thin horizontal rules.

   None of these touch JS or markup — pure CSS layered on top of
   front-v3.css. Rollback is `git revert <this commit>`. */

/* ── 1. Display headlines: just tighten what's already there ──────── */
/* No second typeface. Headlines stay in the body's Space Grotesk so
   the page reads as one voice; the only deltas are a touch more
   weight, tighter tracking, and a sharper line-height at the largest
   size to make the H1 feel typeset rather than auto-set. */
.uj-v3 .uj-h--xxl,
.uj-v3 .uj-h--lg {
    font-weight: 600;
    letter-spacing: -0.028em;
}
.uj-v3 .uj-h--xxl { line-height: 1.02; }

/* Accent words: soft orange marker highlight on light sections, a
   straight orange recolour on dark ones.
   - Light bg: low-opacity wash (0.16) painted across the lower 55% of
     the line, with a faint top edge — reads like a felt-tip pen pass
     rather than a CSS rectangle. Ink stays dark so the text reads.
   - Dark bg: see the .uj-sec--ink override below. Highlighting on a
     dark ground turns muddy, so on dark we just switch to orange text. */
.uj-v3 .uj-accent-text {
    font-family: inherit;
    font-style: normal;
    font-weight: 600;
    color: var(--uj-ink);
    background-image: linear-gradient(
        to bottom,
        transparent 0%,
        transparent 45%,
        rgba(234, 88, 12, 0.03) 47%,
        rgba(234, 88, 12, 0.16) 55%,
        rgba(234, 88, 12, 0.16) 92%,
        transparent 96%
    );
    padding: 0 0.12em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* Dark sections: drop the highlight and let the accent word carry
   the brand orange directly. A highlight at any plausible opacity
   against a near-black ground reads as a muddy smear; coloured text
   against dark + the body's white-on-dark contrast does the same
   job cleanly.

   List covers every dark-bg wrapper I could find across the v3
   stylesheets and view templates:
     .uj-sec--ink      — front-v3 sections set to var(--uj-ink)
     .uj-cta-sec       — final-CTA child of .uj-sec--ink (still
                         matched separately in case it's used solo)
     .lp-sec--ink      — landing-page dark sections (lp-v3.css)
     .cta-section      — legacy comparison-page CTA wrappers
     .uj-codecard, .ujpd-codecard, .ujpd-code-card,
     .ujv-code         — dark code panels where accent text can land
     .uj-cs-card__hero — case-study card hero (background #0B0F19)
   If a page surfaces a dark wrapper not in this list, add its
   selector here so the catch fires.

   Also recolour any h1/h2 children to white inside these wrappers
   so headlines stay legible — the front-v3 sheet only sets
   .uj-sec--ink { color: #fff } at the section level, which doesn't
   always cascade to a nested .uj-h2 that has its own colour rule. */
.uj-v3 .uj-sec--ink .uj-accent-text,
.uj-v3 .uj-cta-sec .uj-accent-text,
.uj-v3 .lp-sec--ink .uj-accent-text,
.uj-v3 .cta-section .uj-accent-text,
.uj-v3 .uj-codecard .uj-accent-text,
.uj-v3 .ujpd-codecard .uj-accent-text,
.uj-v3 .ujpd-code-card .uj-accent-text,
.uj-v3 .ujv-code .uj-accent-text,
.uj-v3 .uj-cs-card__hero .uj-accent-text,
/* Page-specific dark CTAs added 2026-06: the original list missed several
   wrappers whose accent word otherwise rendered black-on-near-black. */
.uj-v3 .ujint-cta .uj-accent-text,        /* integrations final CTA */
.uj-v3 .ujv-cta .uj-accent-text,          /* ujeebu-vs-* comparison final CTA */
.uj-v3 .uc-final .uj-accent-text,         /* use-cases final CTA */
.uj-v3 .uc-split-pane--dark .uj-accent-text,
.uj-v3 .uc-fmode-out .uj-accent-text,     /* use-cases "fmode" dark output panel */
.uj-v3 .rd-cta .uj-accent-text,           /* radar dark CTA */
.uj-v3 .auth-preview .uj-accent-text {    /* signin/signup/forgot/reset right pane */
    color: var(--uj-accent) !important;
    background-image: none !important;
    padding: 0 !important;
}

/* ── 2. Eyebrow: tighter tracking only — no prefix glyph ──────────── */
/* The § marker was rendering oddly in Space Grotesk (the glyph isn't
   designed for that font, fallback chains were ugly). Dropped the
   ::before entirely; the eyebrow keeps just a hair more letter-
   spacing than the default to feel like a small-caps label. */
.uj-v3 .uj-eyebrow {
    letter-spacing: 0.14em;
}

/* ── 3. Cards: hairline ground, no shadow, thin accent on hover ───── */
.uj-v3 .uj-card,
.uj-v3 .uj-prod-card,
.uj-v3 .uj-vert-card {
    box-shadow: none !important;
    border: 1px solid var(--uj-line);
    background: #fff;
    position: relative;
    transition: border-color 160ms, transform 160ms;
}
.uj-v3 .uj-card::before,
.uj-v3 .uj-prod-card::before,
.uj-v3 .uj-vert-card::before {
    /* Top accent line; collapsed by default, eased open on hover.
       1px (matches the rest of the page's hairline rules) and uses
       the accent at 65% opacity so it sits softer against the card. */
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    height: 1px;
    width: 0;
    background: rgba(234, 88, 12, 0.65);
    transition: width 240ms cubic-bezier(.4, 0, .2, 1);
    z-index: 2;
}
.uj-v3 .uj-card:hover::before,
.uj-v3 .uj-prod-card:hover::before,
.uj-v3 .uj-vert-card:hover::before {
    width: 100%;
}
.uj-v3 .uj-card:hover,
.uj-v3 .uj-prod-card:hover,
.uj-v3 .uj-vert-card:hover {
    /* Soft orange-tinted hairline instead of the dark ink2 line —
       still hairline (1px), just keeps the warmth and stays light. */
    border-color: rgba(234, 88, 12, 0.35);
    transform: none;          /* kill any lift the parent sheet adds */
}

/* The shine-section's product cards have their own ::before/::after
   shimmer overlay — we'd be fighting it. Reset back so the existing
   shimmer effect still works on that one section, just without the
   shadow. */
.uj-v3 .uj-sec--shine .uj-prod-card::before {
    content: "";
    /* let the original .uj-sec--shine .uj-prod-card::before rule from
       front-v3.css take effect; we only kill the shadow above. */
}

/* ── 4. Link underlines: hairline, off-ink, thicken on hover ──────── */
.uj-v3 .uj-prose a,
.uj-v3 .uj-hero-lede a,
.uj-v3 p a {
    color: var(--uj-ink);
    text-decoration: underline;
    text-decoration-color: var(--uj-line);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    transition: text-decoration-color 140ms, text-decoration-thickness 140ms;
}
.uj-v3 .uj-prose a:hover,
.uj-v3 .uj-hero-lede a:hover,
.uj-v3 p a:hover {
    color: var(--uj-accent);
    text-decoration-color: var(--uj-accent);
    text-decoration-thickness: 2px;
}

/* ── 5. Hero backdrop: calm halftone instead of dot field ─────────── */
.uj-hero-dots {
    background-image:
        radial-gradient(circle at 1px 1px, rgba(28, 24, 20, 0.08) 1px, transparent 0),
        radial-gradient(800px 400px at 75% 18%, rgba(234, 88, 12, 0.06), transparent 60%);
    background-size: 22px 22px, auto;
    background-position: 0 0, 0 0;
    opacity: 1;
}

/* ── 6. Stat numerals: tabular lining figures, no font swap ──────── */
/* Body font stays; the OpenType numeric features do the work — tabular
   spacing keeps "1.4B" and "<200ms" optically aligned, lining figures
   keep them sitting on the same baseline. */
.uj-v3 .uj-stat-num,
.uj-v3 .uj-relstats__num {
    font-weight: 600;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums lining-nums;
}

/* Reliability sub-labels feel cleaner with a thinner top rule than the
   default heavy card border the previous sheet used. */
.uj-v3 .uj-relstats__item {
    border-top: 1px solid var(--uj-line);
}

/* ── 7. Hero badge: ditch the pill, use horizontal rules ──────────── */
.uj-v3 .uj-hero-badge {
    background: transparent;
    color: var(--uj-ink2, #4a3f33);
    border: 0;
    border-top: 1px solid var(--uj-line);
    border-bottom: 1px solid var(--uj-line);
    border-radius: 0;
    padding: 8px 0;
    font-family: var(--uj-mono, 'JetBrains Mono', ui-monospace, monospace);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.uj-v3 .uj-hero-badge .dot {
    background: var(--uj-accent);
    box-shadow: 0 0 0 0 rgba(234, 88, 12, 0.5);
    animation: uj-home-pulse 2s infinite;
}
@keyframes uj-home-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(234, 88, 12, 0.45); }
    70%  { box-shadow: 0 0 0 8px rgba(234, 88, 12, 0); }
    100% { box-shadow: 0 0 0 0 rgba(234, 88, 12, 0); }
}

/* ── 8. Primary CTA: lose the heavy orange glow ───────────────────── */
.uj-v3 .uj-btn--primary {
    box-shadow: none;
    border: 1px solid var(--uj-accent);
    background: var(--uj-accent);
    transition: background 140ms, border-color 140ms, transform 140ms;
}
.uj-v3 .uj-btn--primary:hover {
    background: var(--uj-accent-ink, #c2410c);
    border-color: var(--uj-accent-ink, #c2410c);
    box-shadow: none;
    transform: none;
}

/* ── 9. Comparison table: hairline-only, no chunky borders ────────── */
.uj-v3 .uj-cmp-row {
    border-bottom: 1px solid var(--uj-line);
}
.uj-v3 .uj-cmp-row.is-us {
    background: linear-gradient(to right,
        rgba(234, 88, 12, 0.04),
        rgba(234, 88, 12, 0.01) 60%,
        transparent);
}
.uj-v3 .uj-cmp-row.is-us .uj-cmp-name.bold {
    font-weight: 700;
    letter-spacing: -0.005em;
}

/* ── Live-demo card: pin a fixed height + scroll inside the cell ──── */
/* Earlier attempt set min-height: 540px on .uj-demo-body, but the AI
   Scraper response payload still exceeds that, so the grid row kept
   growing on tab-switch. Real fix:
     1. Force .uj-demo-body to a fixed 480px (height, not min-height).
        All four panels live inside the same box now.
     2. Promote .uj-demo-req / .uj-demo-res to flex columns so the
        inner <pre> can claim the remaining vertical space.
     3. <pre> gets flex: 1 + overflow: auto + min-height: 0 so a long
        response scrolls inside its cell instead of expanding the card.
   Shorter panels (Scrape, Markdown) just keep whitespace below their
   response; longer panels (AI Scraper, SERP) get an inner scrollbar.
   Card geometry no longer depends on which tab is active. */
.uj-v3 .uj-demo-body {
    height: 480px !important;
    min-height: 480px !important;
}
.uj-v3 .uj-demo-req,
.uj-v3 .uj-demo-res {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0;
    overflow: hidden;
}
.uj-v3 .uj-demo-card pre {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto !important;
}

/* Match on narrow viewports — front-v3 stacks the two columns at
   <= 900px, so the fixed 480 becomes too short for both halves
   stacked. Let the card grow on mobile; consistent-size is a
   desktop-only need. */
@media (max-width: 900px) {
    .uj-v3 .uj-demo-body {
        height: auto !important;
        min-height: 0 !important;
    }
    .uj-v3 .uj-demo-card pre {
        flex: 0 1 auto;
    }
}

/* ── 10. Section heads: pull the eyebrow tight to the headline ────── */
.uj-v3 .uj-sec-head .uj-h--md,
.uj-v3 .uj-sec-head .uj-h--lg {
    margin-top: 10px;
}

/* ── 11. Sharp corners site-wide — universal zero, dots excepted ─── */
/* Nuclear option: every element under the v3 wrapper gets
   border-radius: 0, including pseudo-elements (the existing sheets
   round a lot of ::before/::after decorations too). The exception
   list below restores ALL circular indicators — status dots, pulse
   rings, decorative orbs, spinners, avatars, the macOS-window-control
   dots in landing-page demos — so the catch-all doesn't accidentally
   square them off.

   This covers landing pages (lp-v3.css) and admin surfaces too, not
   just the homepage. If a specific page needs rounded corners back,
   add a more-specific !important rule with that page's wrapper. */
.uj-v3,
.uj-v3 *,
.uj-v3 *::before,
.uj-v3 *::after {
    border-radius: 0 !important;
}

/* Circular indicators kept circular, wherever they live. Selectors
   intentionally broad — anything that ends in "-dot"/"-dots" or
   matches the obvious indicator/avatar/spinner classes. */
.uj-v3 .dot,
.uj-v3 [class*="-dot"],
.uj-v3 [class$="-dots"] i,
.uj-v3 [class*="-dots"] i,
.uj-v3 [class*="-dots"] > span,
.uj-v3 .uj-hcon-pulse,
.uj-v3 .uj-pill-dot,
.uj-v3 .uj-hero-badge .dot,
.uj-v3 .uj-cmp-row .dot,
.uj-v3 .uj-cs-card__metric i,
.uj-v3 .uj-cs-card__orb,
.uj-v3 .uj-codecard-bar .tl,
.uj-v3 .lp-shot-spin,
.uj-v3 .lp-shot-chrome i,
.uj-v3 .lp-quote-av,
.uj-v3 .ujpd-codecard-bar i,
.uj-v3 .lp-pill .dot,
.uj-v3 .lp-demo-status i,
.uj-v3 .uj-pill .dot,
.uj-v3 .uj-mega-rail__btn::after,
.uj-v3 .an-pill-dot {
    border-radius: 50% !important;
}

/* ── 12. Hero playground: drop the macOS-style three dots ────────── */
/* The .uj-hcon-dots row in the live-console bar mimics the red/yellow/
   green window-control dots every "fake terminal" mockup ships with —
   instant template tell. Hide them; the live-playground identity sits
   in the typography + label, not in a Mac chrome reference. The
   matching dots in landing-page demos (.lp-demo-dots, .lp-shot-chrome)
   are left visible because they're labelled "interactive demo" /
   "screenshot frame" and the OS chrome reads as intended there. */
.uj-v3 .uj-hcon-dots { display: none !important; }

/* ── Reduce-motion: kill the pulse, keep everything legible ──────── */
@media (prefers-reduced-motion: reduce) {
    .uj-v3 .uj-hero-badge .dot { animation: none; }
    .uj-v3 .uj-card::before,
    .uj-v3 .uj-prod-card::before,
    .uj-v3 .uj-vert-card::before { transition: none; }
}