/* ==========================================================================
   site-refinements.css

   Visual refinement layer for the RegGuard marketing site.

   WHY THIS FILE EXISTS
   The React app is deployed as a minified bundle (assets/index-CdYNH4NK.js)
   with no sourcemap and no source tree on this host, so the components cannot
   be edited directly. This stylesheet is loaded last from index.html and
   corrects the design decisions that read as machine-generated.

   Where the bundle applies styles via inline `style` attributes, `!important`
   is the only way to win specificity. Those cases are marked.

   THIS IS A SKIN, NOT A FIX. If the React app is ever rebuilt, class names may
   change and these overrides can silently stop matching. The durable fix is to
   apply the same changes in the components (see regguard-ui-prompts.md).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Retire the cobalt-to-sky gradient
   --------------------------------------------------------------------------
   Fixed at the source: every inline `linear-gradient(135deg, #1E40AF 0%,
   #0EA5E9 100%)` - on heading spans, stat figures, CTAs, the numbered step
   chips, and the timeline connector line - is gone from the bundle. Clipped
   text elements now set `color: var(--color-cobalt)` directly instead of the
   background-clip trick; solid fills set `background: var(--color-cobalt)`
   directly. The two 1px `to right` / `to bottom` grid-line gradients were
   never touched.

   The one thing that still needs real CSS: React inline `style` can't
   express `:hover`, so the CTAs' hover-darken state lives here. The
   `var(--color-cobalt)` inline value is otherwise unused in the bundle, so
   matching on it is as precise as matching the old gradient was. */

a[style*="var(--color-cobalt)"]:hover,
button[style*="var(--color-cobalt)"]:hover {
  background-color: #1a3480 !important;
}

/* --------------------------------------------------------------------------
   2. Hover: no lift, no coloured glow
   --------------------------------------------------------------------------
   Fixed at the source: `hover:-translate-y-px|0.5|1`, `hover:shadow-blue-500/
   25|30`, and the static `shadow-blue-500/20` are gone from the bundle -
   along with the plain `hover:shadow-xl`/`hover:shadow-lg` they used to ride
   alongside, so a card never ends up with two competing hover shadows. Every
   card and button that had one of those now carries `hover:border-cobalt/30`
   plus `hover:shadow-[0_1px_2px_rgba(15,23,42,0.04),0_10px_24px_-12px_rgba(
   15,23,42,0.18)]` instead - real Tailwind syntax, but a `cobalt` theme
   colour and this exact arbitrary shadow were never in this build's compiled
   CSS, so the two rules below give them one. Matching on the `class`
   attribute substring needs no selector-escaping gymnastics for the
   punctuation in the arbitrary value. */

[class*="hover:border-cobalt/30"]:hover {
  border-color: rgba(30, 64, 175, 0.3);
}

[class*="hover:shadow-[0_1px_2px_rgba(15,23,42,0.04),0_10px_24px_-12px_rgba(15,23,42,0.18)]"]:hover {
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 10px 24px -12px rgba(15, 23, 42, 0.18);
}

/* --------------------------------------------------------------------------
   3. Shadow scale
   --------------------------------------------------------------------------
   Fixed at the source: `shadow-2xl` (the 50px-blur drop shadow on content
   cards) and `shadow-xl` are gone from the bundle, replaced everywhere with
   the arbitrary-value equivalents of this restrained two-layer scale - a
   hairline contact shadow plus a soft ambient one, just tighter for `xl`'s
   former callers than `2xl`'s. Neither arbitrary shadow was in this build's
   compiled CSS, so the two rules below give them one, same as section 2. */

[class*="shadow-[0_1px_2px_rgba(15,23,42,0.05),0_16px_40px_-20px_rgba(15,23,42,0.22)]"] {
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.05),
    0 16px 40px -20px rgba(15, 23, 42, 0.22);
}

[class*="shadow-[0_1px_2px_rgba(15,23,42,0.04),0_12px_28px_-16px_rgba(15,23,42,0.18)]"] {
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 12px 28px -16px rgba(15, 23, 42, 0.18);
}

/* --------------------------------------------------------------------------
   4. Corner radius scale
   --------------------------------------------------------------------------
   Fixed at the source: every `rounded-2xl`/`rounded-3xl` (cards and panels)
   is now `rounded-xl`, and every button, link, input, and textarea that used
   to carry `rounded-xl` now carries `rounded-lg` instead, so 8px is the one
   radius controls ever use. `rounded-lg` and `rounded-xl` already compile to
   8px and 12px respectively - no override needed. `rounded-full` was left
   alone, as it should be: true pills and circles (the step chips and
   avatars rely on it to stay circular). */

/* --------------------------------------------------------------------------
   5. Eyebrow pills -> typographic labels
   --------------------------------------------------------------------------
   Fixed at the source: eleven tinted capsules sat above headings - one per
   section plus the hero's - all sharing the same shape and alternating
   cobalt/sky tints at 8%. Three ("Request a Demo", "Contact Us", "FAQ")
   weren't called out by name but used the identical component, so they got
   the identical fix rather than being left as the odd ones out.

   Each is now a plain `text-xs font-semibold uppercase` label with
   `letterSpacing`/`color` set inline to `0.12em` / `var(--color-slate)` -
   no background, border, or radius left to override. The hero's
   `animate-pulse` dot span is deleted outright rather than just de-animated,
   since it no longer has a tinted pill to sit inside.

   Small inline metric tags ("75% faster UAR cycles") were never part of
   this - `px-3 py-1 text-xs`, not `px-4 py-2 text-sm` - and keep their pill
   shape; they read as tags rather than section labels, which is legitimate. */

/* --------------------------------------------------------------------------
   6. Repair the hero background blob
   --------------------------------------------------------------------------
   Two large blurred radial blobs sit behind the hero. The top-right one uses
   `opacity-10` and renders as intended at 0.1. The bottom-left one was marked
   `opacity-8`, which was not a class in Tailwind's opacity scale and did not
   exist in the compiled CSS - so it rendered at FULL opacity, putting a hard
   cobalt smudge across the bottom-left of the hero.

   Fixed at the source: the class is now `opacity-[0.08]`. That's valid
   Tailwind syntax, but this build's CSS was compiled before the fix, so the
   utility for it was never generated - the rule below supplies it. */

.blur-3xl.opacity-\[0\.08\] {
  opacity: 0.08;
}

/* --------------------------------------------------------------------------
   7. Hero typography
   --------------------------------------------------------------------------
   The H1 rendered at 72px/800, pushing the subhead and CTAs below the fold
   on a laptop. 60px/700 keeps it clearly dominant over the 48px/700 section
   headings without shouting, and fits the subhead and CTA in the same field
   of view; 44px at lg and below and 36px on mobile keep that true as the
   viewport shrinks.

   Fixed at the source: the H1 carried a `font-800` class that didn't exist in
   the compiled CSS, so it never did anything - the weight was actually
   applied through an inline `style="font-weight: 800; letter-spacing:
   -0.04em"` on the same element. The dead class and the inline style are both
   gone now; the H1 uses `font-bold` (700), which is a real compiled utility,
   so no override is needed for weight here. The `text-5xl lg:text-7xl` size
   classes are gone too - they described the old 48px/72px scale and would
   have been actively misleading to leave in place, since this rule's `#hero
   h1` specificity overrides them regardless of what they say. Font-size has
   no clean non-arbitrary Tailwind step at 44px, so rather than reach for
   arbitrary-value classes that would need the exact same media-query CSS
   backing they replace, this rule is left as the one place font-size lives.

   -0.04em was also too tight at this size. `tracking-tight` on the element
   only gets to -0.025em, so letter-spacing is still nudged the rest of the
   way to -0.02em below. */

#hero h1 {
  font-size: 3.75rem;
  line-height: 1.06;
  letter-spacing: -0.02em;
}

@media (max-width: 1023px) {
  #hero h1 {
    font-size: 2.75rem;
    line-height: 1.1;
  }
}

@media (max-width: 480px) {
  #hero h1 {
    font-size: 2.25rem;
  }
}

/* --------------------------------------------------------------------------
   8. Hardcoded hex -> theme tokens
   --------------------------------------------------------------------------
   Fixed at the source: all 247 arbitrary `[#HEX]` values across the bundle
   are gone, replaced with arbitrary values that reference the CSS variables
   already on :root (`text-[#0F172A]` -> `text-[var(--color-midnight)]`, and
   so on) - see tailwind.config.js for the named-colour mapping a real build
   would use instead. Two hexes had no existing token to point at: `#94A3B8`
   (a placeholder-text grey, used 9x as `placeholder-` and 5x as `text-`) and
   `#CBD5E1` (an outline-button border grey, used 2x). Rather than force
   those onto an unrelated existing colour, `--color-mist` and `--color-frost`
   are added below to match them exactly.

   None of these arbitrary-value classes were in this build's compiled CSS
   (same gap as every other bracketed value fixed elsewhere in this file), so
   every one needs a rule here. Grouped by property; hover/focus/group-hover
   variants repeat the same declaration under the matching pseudo-selector.
   Opacity-modified ones (`/5`, `/10`, `/20`, `/30`) are pre-computed as rgba()
   since a bare hex custom property can't be alpha-blended in CSS. */

:root {
  --color-mist: #94A3B8;
  --color-frost: #CBD5E1;
}

/* -- color -- */
[class*="text-[var(--color-midnight)]"] { color: var(--color-midnight); }
[class*="text-[var(--color-cobalt)]"] { color: var(--color-cobalt); }
[class*="text-[var(--color-slate)]"] { color: var(--color-slate); }
[class*="text-[var(--color-sky-teal)]"] { color: var(--color-sky-teal); }
[class*="text-[var(--color-mist)]"] { color: var(--color-mist); }
[class*="text-[var(--color-sky-teal)]/30"] { color: rgba(14, 165, 233, 0.3); }

/* -- background-color -- */
[class*="bg-[var(--color-ghost-white)]"] { background-color: var(--color-ghost-white); }
[class*="bg-[var(--color-midnight)]"] { background-color: var(--color-midnight); }
[class*="bg-[var(--color-sky-teal)]"] { background-color: var(--color-sky-teal); }
[class*="bg-[var(--color-data-line)]"] { background-color: var(--color-data-line); }
[class*="bg-[var(--color-midnight)]/0"] { background-color: rgba(15, 23, 42, 0); }

/* -- border-color -- */
[class*="border-[var(--color-data-line)]"] { border-color: var(--color-data-line); }
[class*="border-[var(--color-cobalt)]"] { border-color: var(--color-cobalt); }
[class*="border-[var(--color-frost)]"] { border-color: var(--color-frost); }

/* -- fill (SVG icon) -- */
[class*="fill-[var(--color-sky-teal)]"] { fill: var(--color-sky-teal); }

/* -- placeholder text -- */
[class*="placeholder-[var(--color-mist)]"]::placeholder { color: var(--color-mist); }

/* -- hover -- */
[class*="hover:text-[var(--color-cobalt)]"]:hover { color: var(--color-cobalt); }
[class*="hover:text-[var(--color-midnight)]"]:hover { color: var(--color-midnight); }
[class*="hover:text-[var(--color-sky-teal)]"]:hover { color: var(--color-sky-teal); }
[class*="hover:bg-[var(--color-ghost-white)]"]:hover { background-color: var(--color-ghost-white); }
[class*="hover:bg-[var(--color-light-gray)]"]:hover { background-color: var(--color-light-gray); }
[class*="hover:bg-[var(--color-cobalt)]/5"]:hover { background-color: rgba(30, 64, 175, 0.05); }
[class*="hover:border-[var(--color-cobalt)]"]:hover { border-color: var(--color-cobalt); }
[class*="hover:border-[var(--color-sky-teal)]/30"]:hover { border-color: rgba(14, 165, 233, 0.3); }

/* -- focus -- */
[class*="focus:border-[var(--color-cobalt)]"]:focus { border-color: var(--color-cobalt); }
/* `focus:ring-2` is a real compiled utility already; it just needs this
   custom property to draw its ring in the right colour. */
[class*="focus:ring-[var(--color-cobalt)]/10"]:focus { --tw-ring-color: rgba(30, 64, 175, 0.1); }

/* -- group-hover (needs the ".group" ancestor Tailwind's convention relies on) -- */
.group:hover [class*="group-hover:text-[var(--color-cobalt)]"] { color: var(--color-cobalt); }
.group:hover [class*="group-hover:bg-[var(--color-midnight)]/20"] { background-color: rgba(15, 23, 42, 0.2); }