/* Lead form card: the "Get a free …" card in the banner of every page
   (modelled on coalitiontechnologies.com's hero form), each page's one
   enquiry form. The markup is added by ../hero-form/add-hero-form.js
   (banner) and add-page-forms.js (takes out the old enquiry boxes further
   down, and makes /contact/'s form the card), which sit outside the site
   folder and can be re-run after pages are regenerated. Submit handling is
   the "Hero lead form" block in /script.js. Card rules hang off the card's
   id (#hf-card in the banner, #hf-card-2 on /contact/) so page themes (the
   amber nx-warm rules, per-page palettes) can't override it.

   Colour: a dark glass card in the page's own palette ("Page colours" at the
   end); browsers without color-mix() get the black-and-white card below.

   Placements:
   - .hf-grid  wraps a centred hero's copy (.hf-copy) and puts the card beside it
   - .hf-slot  takes the place of a split hero's illustration (.nx-hero-visual)
   - .hf-card--aside  tops the blog post sidebar
   - .hf-host  /contact/'s enquiry box, now holding the card
   - .hf-solo  a row left with one column once its enquiry box came out
   The free-seo-audit and AI Solutions forms keep their own markup and take
   the card's look further down. */

/* ---- Placement ------------------------------------------------------ */
.hf-grid {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.25rem;
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
  align-items: center;
}
.hf-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0 !important;
}
/* A content column the card displaced (rank tracker stats) gets its own band
   straight after the hero, on the hero's own dark ground. */
.hf-moved {
  padding: 3.5rem 1rem;
  background: var(--navy-deep, #0a0a0b);
}
.hf-moved-in {
  max-width: 44rem;
  margin: 0 auto;
}
/* The enquiry box holding a card keeps its place in the layout but drops
   its own look for the card's. */
.hf-host.hf-host.hf-host {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
/* A call-to-action row whose enquiry box came out (one form per page): its
   remaining column takes the whole row, centred. */
.hf-solo.hf-solo {
  grid-template-columns: minmax(0, 1fr) !important;
  max-width: 48rem;
  margin-left: auto !important;
  margin-right: auto !important;
}
.hf-solo > * { width: 100%; max-width: none; }
@media (min-width: 1024px) {
  .hf-grid {
    grid-template-columns: minmax(0, 1fr) minmax(22rem, 26rem);
    gap: 3.5rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .hf-slot { justify-content: flex-end; }

  /* The copy column was designed centred and full width; beside the card it
     reads as a left-aligned column, like the homepage hero. */
  .hf-grid > .hf-copy {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: left !important;
    align-items: flex-start !important;
    justify-items: start !important;
  }
  .hf-copy > *,
  .hf-copy .mx-auto { margin-left: 0 !important; }
  .hf-copy :where(h1, h2, h3, h4, p, ul, ol, li, div, span, nav) { text-align: left !important; }
  .hf-copy .justify-center:not(a):not(button),
  .hf-copy :where([class*="cta"], [class*="trust"], [class*="actions"], [class*="buttons"]):not(a):not(button) {
    justify-content: flex-start !important;
  }
  .hf-copy .items-center:not(.inline-flex) { align-items: flex-start; }
  .hf-copy .flex-col.items-center { align-items: flex-start !important; }

  /* Fixed-height heroes would clip the card. */
  .hf-hero.h-\[70vh\],
  .hf-hero.h-96,
  .hf-hero.h-screen {
    height: auto !important;
    min-height: 70vh;
    padding-top: 7rem;
    padding-bottom: 4.5rem;
  }
}
@media (max-width: 1023px) {
  .hf-hero.h-\[70vh\],
  .hf-hero.h-96,
  .hf-hero.h-screen {
    height: auto !important;
    padding-top: 6rem;
    padding-bottom: 3.5rem;
  }
  /* Scroll cues sit over the bottom of the hero, which is now the card. */
  .hf-hero .fx-scroll-cue,
  .hf-hero .wsk-scroll-cue,
  .hf-hero .loc-scroll { display: none; }
}

/* ---- Card ----------------------------------------------------------- */
.hf-card {
  position: relative;
  scroll-margin-top: 6.5rem; /* clear of the sticky header on #hf-card links */
  z-index: 2;
  box-sizing: border-box;
  width: 100%;
  max-width: 28rem;
  margin: 0 auto;
  padding: 1.4rem 1.45rem 1.2rem;
  border-radius: 1.25rem;
  background: linear-gradient(180deg, rgba(26, 26, 30, 0.95), rgba(10, 10, 11, 0.97));
  border: 1px solid rgba(255, 255, 255, 0.13);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  color: #f4f4f5;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  text-shadow: none;
}
.hf-card *,
.hf-card *::before,
.hf-card *::after { box-sizing: border-box; }
.hf-slot .hf-card { margin: 0; }

:is(#hf-card, [id^="hf-card-"]) .hf-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  padding: 0.3rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: #e4e4e7 !important;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
}
:is(#hf-card, [id^="hf-card-"]) .hf-dot {
  flex: none;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
  animation: hf-pulse 2.4s ease-out infinite;
}
@keyframes hf-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.45); }
  70%, 100% { box-shadow: 0 0 0 0.45rem rgba(255, 255, 255, 0); }
}
:is(#hf-card, [id^="hf-card-"]) .hf-title {
  margin: 0 0 0.45rem;
  padding: 0;
  border: 0;
  background: none;
  color: #fff !important;
  font-family: var(--nx-display, "Space Grotesk", Inter, system-ui, sans-serif);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-align: left;
  text-transform: none;
}
/* Page cards keep the box's own heading tag (h2/h3/h4); no theme underlines. */
:is(#hf-card, [id^="hf-card-"]) .hf-title::before,
:is(#hf-card, [id^="hf-card-"]) .hf-title::after { content: none !important; }
:is(#hf-card, [id^="hf-card-"]) .hf-sub {
  margin: 0 0 1rem;
  color: #a1a1aa !important;
  font-size: 0.9rem;
  line-height: 1.55;
}

/* ---- Fields --------------------------------------------------------- */
:is(#hf-card, [id^="hf-card-"]) .hf-form { margin: 0; }
:is(#hf-card, [id^="hf-card-"]) .hf-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
  margin: 0 0 0.7rem;
}
:is(#hf-card, [id^="hf-card-"]) .hf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
}
:is(#hf-card, [id^="hf-card-"]) .hf-row .hf-field { margin-bottom: 0.7rem; }
:is(#hf-card, [id^="hf-card-"]) .hf-field > label {
  margin: 0;
  color: #a1a1aa !important;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
}
:is(#hf-card, [id^="hf-card-"]) .hf-field > label span { color: #e4e4e7 !important; }
:is(#hf-card, [id^="hf-card-"]) .hf-input {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.66rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0.75rem;
  background-color: rgba(255, 255, 255, 0.05) !important;
  background-image: none;
  color: #fff !important;
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.4;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
:is(#hf-card, [id^="hf-card-"]) textarea.hf-input {
  min-height: 4.6rem;
  resize: vertical;
}
:is(#hf-card, [id^="hf-card-"]) .hf-input::placeholder { color: #71717a; opacity: 1; }
:is(#hf-card, [id^="hf-card-"]) .hf-input:hover { border-color: rgba(255, 255, 255, 0.28); }
:is(#hf-card, [id^="hf-card-"]) .hf-input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.7);
  background-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.14);
}
/* Service pickers carried over from the boxes the page cards replaced. */
:is(#hf-card, [id^="hf-card-"]) select.hf-input {
  padding-right: 2.4rem;
  background-image: linear-gradient(45deg, transparent 50%, #a1a1aa 50%), linear-gradient(135deg, #a1a1aa 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 50%, calc(100% - 0.8rem) 50%;
  background-size: 0.35rem 0.35rem;
  background-repeat: no-repeat;
  cursor: pointer;
}
:is(#hf-card, [id^="hf-card-"]) select.hf-input:invalid { color: #71717a !important; }
:is(#hf-card, [id^="hf-card-"]) select.hf-input option { color: #0a0a0b; background: #fff; }
:is(#hf-card, [id^="hf-card-"]) .hf-input:-webkit-autofill {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 40px #1c1c20 inset;
  caret-color: #fff;
}

:is(#hf-card, [id^="hf-card-"]) .hf-check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0.1rem 0 0.9rem;
  color: #d4d4d8 !important;
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
}
:is(#hf-card, [id^="hf-card-"]) .hf-check span { color: inherit !important; }
:is(#hf-card, [id^="hf-card-"]) .hf-check input {
  flex: none;
  width: 1rem;
  height: 1rem;
  margin: 0.12rem 0 0;
  accent-color: #fff;
  cursor: pointer;
}

:is(#hf-card, [id^="hf-card-"]) .hf-form .hf-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  margin: 0;
  padding: 0.88rem 1.2rem;
  border: 0;
  border-radius: 0.85rem;
  background: #fff !important;
  color: #0a0a0b !important;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(255, 255, 255, 0.1);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, opacity 0.2s ease;
}
:is(#hf-card, [id^="hf-card-"]) .hf-form .hf-submit:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(255, 255, 255, 0.18); }
:is(#hf-card, [id^="hf-card-"]) .hf-form .hf-submit:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
:is(#hf-card, [id^="hf-card-"]) .hf-form .hf-submit:disabled { opacity: 0.7; cursor: progress; transform: none; }
:is(#hf-card, [id^="hf-card-"]) .hf-form .hf-submit .hf-arrow { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
:is(#hf-card, [id^="hf-card-"]) .hf-form .hf-submit:hover .hf-arrow { transform: translateX(3px); }

:is(#hf-card, [id^="hf-card-"]) .hf-status {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.45;
}
:is(#hf-card, [id^="hf-card-"]) .hf-status:not(:empty) { margin-top: 0.7rem; }
:is(#hf-card, [id^="hf-card-"]) .hf-status.is-ok { color: #86efac !important; }
:is(#hf-card, [id^="hf-card-"]) .hf-status.is-err { color: #fca5a5 !important; }
:is(#hf-card, [id^="hf-card-"]) .hf-privacy {
  margin: 0.8rem 0 0;
  color: #a1a1aa !important;
  font-size: 0.74rem;
  line-height: 1.5;
}
:is(#hf-card, [id^="hf-card-"]) .hf-privacy a {
  color: #e4e4e7 !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---- Variants ------------------------------------------------------- */
/* Enquiry box further down a page: a little wider than the banner card. */
.hf-card--page { max-width: 32rem; }
/* Blog sidebar and page sidebars: usually ~20rem wide, so the two-up row
   stacks; a sidebar that ends up wide (the seo-services pages lay theirs out
   full width) gets the row back. */
.hf-card--aside {
  max-width: none;
  margin: 0 0 2rem;
  padding: 1.35rem 1.2rem 1.15rem;
  container-type: inline-size;
}
:is(#hf-card, [id^="hf-card-"]).hf-card--aside .hf-title { font-size: 1.25rem; }
:is(#hf-card, [id^="hf-card-"]).hf-card--aside .hf-row { grid-template-columns: 1fr; gap: 0; }
@container (min-width: 28rem) {
  :is(#hf-card, [id^="hf-card-"]).hf-card--aside .hf-row { grid-template-columns: 1fr 1fr; gap: 0.7rem; }
}
@media (max-width: 1023px) {
  .hf-card--aside { max-width: 36rem; margin: 0 auto 2rem; }
}
/* 16px inputs stop iOS Safari zooming the page on focus. */
@media (max-width: 640px) {
  :is(#hf-card, [id^="hf-card-"]) .hf-input { font-size: 16px; }
}
@media (max-width: 400px) {
  .hf-card { padding: 1.35rem 1.1rem 1.15rem; }
  :is(#hf-card, [id^="hf-card-"]) .hf-row { grid-template-columns: 1fr; gap: 0; }
}

@media (prefers-reduced-motion: reduce) {
  :is(#hf-card, [id^="hf-card-"]) .hf-dot { animation: none; }
  :is(#hf-card, [id^="hf-card-"]) .hf-form .hf-submit,
  :is(#hf-card, [id^="hf-card-"]) .hf-form .hf-submit .hf-arrow { transition: none; }
}

/* ---- Forms that keep their own markup ------------------------------- */
/* /free-seo-audit/ (#audit) and the 8 AI Solutions pages (#get-started) lead
   with forms of their own (extra fields, audit.js), so they keep their markup
   and take the card's look here. The ids outrank the pages' own !important
   colour rules (wsk-scope, nx-warm). */
:is(#audit.fsa-card, #get-started.ai-form-card) {
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 1.25rem;
  background: linear-gradient(180deg, rgba(26, 26, 30, 0.95), rgba(10, 10, 11, 0.97)) !important;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  color: #f4f4f5 !important;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
:is(#audit.fsa-card, #get-started.ai-form-card) h2 {
  color: #fff !important;
  font-family: var(--nx-display, "Space Grotesk", Inter, system-ui, sans-serif);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
#get-started.ai-form-card .ai-form-kicker {
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04) !important;
  color: #e4e4e7 !important;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}
:is(#audit.fsa-card, #get-started.ai-form-card) :is(.fsa-card-lede, .ai-form-intro) { color: #a1a1aa !important; font-size: 0.9rem; }
:is(#audit.fsa-card, #get-started.ai-form-card) :is(.fsa-field, .ai-field) label {
  color: #a1a1aa !important;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-transform: uppercase;
}
#audit.fsa-card .fsa-field label b { color: #a1a1aa !important; font-weight: 600; }
:is(#audit.fsa-card, #get-started.ai-form-card) :is(.fsa-field label span, .ai-opt) { color: #71717a !important; text-transform: none; letter-spacing: normal; }
:is(#audit.fsa-card, #get-started.ai-form-card) :is(.fsa-field, .ai-field) :is(input, select, textarea) {
  min-height: 0;
  padding: 0.66rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 0.75rem;
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: #fff !important;
  font-size: 0.95rem;
  box-shadow: none;
}
:is(#audit.fsa-card, #get-started.ai-form-card) :is(.fsa-field, .ai-field) :is(input, select, textarea):hover { border-color: rgba(255, 255, 255, 0.28) !important; }
:is(#audit.fsa-card, #get-started.ai-form-card) :is(.fsa-field, .ai-field) :is(input, select, textarea):focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.7) !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.14);
}
:is(#audit.fsa-card, #get-started.ai-form-card) ::placeholder { color: #71717a !important; opacity: 1; }
#get-started.ai-form-card .ai-field select {
  padding-right: 2.4rem;
  background-image: linear-gradient(45deg, transparent 50%, #a1a1aa 50%), linear-gradient(135deg, #a1a1aa 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 50%, calc(100% - 0.8rem) 50%;
}
#get-started.ai-form-card .ai-field select:invalid { color: #71717a !important; }
#get-started.ai-form-card .ai-field option { color: #0a0a0b; background: #fff; }
:is(#audit.fsa-card .fsa-submit, #get-started.ai-form-card .ai-submit) {
  border: 0 !important;
  border-radius: 0.85rem;
  background: #fff !important;
  color: #0a0a0b !important;
  box-shadow: 0 10px 30px rgba(255, 255, 255, 0.1) !important;
}
:is(#audit.fsa-card .fsa-submit, #get-started.ai-form-card .ai-submit) * { color: inherit !important; }
:is(#audit.fsa-card .fsa-submit, #get-started.ai-form-card .ai-submit):hover {
  background: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(255, 255, 255, 0.18) !important;
}
:is(#audit.fsa-card, #get-started.ai-form-card) :is(.ai-form-note, .fsa-note, p[aria-live]) { color: #a1a1aa !important; }
:is(#audit.fsa-card, #get-started.ai-form-card) a:not([class*="bg-"]) { color: #e4e4e7 !important; }
#audit.fsa-card .fsa-status { color: #fca5a5 !important; }
#audit.fsa-card .fsa-thanks p { color: #d4d4d8 !important; }
#audit.fsa-card .fsa-thanks-ico { background: #fff !important; color: #0a0a0b !important; }

/* ---- Page colours --------------------------------------------------- */
/* The card takes the page's own palette: the wsk sets (--wsk-*, ~2,200
   pages), the SEO niche sectors (--sn-*, body[data-sn]), the fx layer
   (--fx-*, [data-fx] wrappers), then the amber nx-warm theme; anything else
   (homepage, locations, blog) keeps black and white. Derived tokens:
   --hf-ink   the page's deepest colour, darkened: card ground, button text
   --hf-top   the page's main colour stirred into it: top of the card
   --hf-soft  its light colour lifted towards white: text, outlines
   --hf-btn   its accent, lightened: the button and focus rings
   Button text and labels come out at 4.5:1 or better on every page's
   palette (checked across the site when this was written). */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  :is(.hf-card, #audit.fsa-card, #get-started.ai-form-card) {
    --hf-base-deep: #0a0a0b;
    --hf-base-mid: #43434a;
    --hf-base-accent: #ffffff;
    --hf-base-light: #e4e4e7;
    --hf-deep: var(--wsk-black, var(--sn-deep, var(--fx-deep, var(--hf-base-deep))));
    --hf-mid: var(--wsk-oak, var(--sn-primary, var(--fx-primary, var(--fx-accent, var(--hf-base-mid)))));
    --hf-accent: var(--wsk-gold, var(--sn-accent, var(--fx-accent, var(--hf-base-accent))));
    --hf-light: var(--wsk-cream, var(--sn-accent2, var(--fx-accent-2, var(--hf-base-light))));
    --hf-ink: color-mix(in srgb, var(--hf-deep) 62%, #000);
    --hf-top: color-mix(in srgb, var(--hf-mid) 30%, var(--hf-ink));
    --hf-soft: color-mix(in srgb, var(--hf-light) 75%, #fff);
    --hf-btn: color-mix(in srgb, var(--hf-accent) 70%, var(--hf-soft));
    --hf-text: color-mix(in srgb, var(--hf-soft) 72%, transparent);
    --hf-faint: color-mix(in srgb, var(--hf-soft) 45%, transparent);
  }
  html.nx-warm :is(.hf-card, #audit.fsa-card, #get-started.ai-form-card) {
    --hf-base-deep: #1a120c;
    --hf-base-mid: #78350f;
    --hf-base-accent: #fbbf24;
    --hf-base-light: #fde68a;
  }
  /* The taproom page's fx "deep" is a mid amber; its own ink reads better. */
  .tp-scope :is(.hf-card, #audit.fsa-card, #get-started.ai-form-card) {
    --hf-deep: var(--tp-ink);
    --hf-mid: var(--tp-amber-deep);
    --hf-light: var(--tp-cream-2);
  }

  :is(.hf-card, #audit.fsa-card, #get-started.ai-form-card) {
    border-color: color-mix(in srgb, var(--hf-btn) 20%, transparent) !important;
    background: linear-gradient(180deg, color-mix(in srgb, var(--hf-top) 95%, transparent), color-mix(in srgb, var(--hf-ink) 97%, transparent)) !important;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45), inset 0 1px 0 color-mix(in srgb, var(--hf-soft) 8%, transparent) !important;
  }
  :is(#hf-card, [id^="hf-card-"]) .hf-kicker,
  #get-started.ai-form-card .ai-form-kicker {
    border-color: color-mix(in srgb, var(--hf-btn) 32%, transparent);
    background: color-mix(in srgb, var(--hf-btn) 7%, transparent) !important;
    color: var(--hf-soft) !important;
  }
  :is(#hf-card, [id^="hf-card-"]) .hf-dot {
    background: var(--hf-btn);
    animation-name: hf-pulse-tint;
  }
  @keyframes hf-pulse-tint {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--hf-btn) 50%, transparent); }
    70%, 100% { box-shadow: 0 0 0 0.45rem transparent; }
  }
  :is(#hf-card, [id^="hf-card-"]) :is(.hf-sub, .hf-field > label, .hf-privacy),
  :is(#audit.fsa-card, #get-started.ai-form-card) :is(.fsa-card-lede, .ai-form-intro, .fsa-field label, .fsa-field label b, .ai-field label, .ai-form-note, .fsa-note, p[aria-live]) {
    color: var(--hf-text) !important;
  }
  :is(#hf-card, [id^="hf-card-"]) :is(.hf-field > label span, .hf-check, .hf-privacy a),
  :is(#audit.fsa-card, #get-started.ai-form-card) a:not([class*="bg-"]),
  #audit.fsa-card .fsa-thanks p {
    color: var(--hf-soft) !important;
  }
  :is(#audit.fsa-card, #get-started.ai-form-card) :is(.fsa-field label span, .ai-opt) { color: var(--hf-faint) !important; }

  :is(#hf-card, [id^="hf-card-"]) .hf-input,
  :is(#audit.fsa-card, #get-started.ai-form-card) :is(.fsa-field, .ai-field) :is(input, select, textarea) {
    border-color: color-mix(in srgb, var(--hf-soft) 15%, transparent) !important;
    background-color: color-mix(in srgb, var(--hf-soft) 6%, transparent) !important;
  }
  :is(#hf-card, [id^="hf-card-"]) .hf-input:hover,
  :is(#audit.fsa-card, #get-started.ai-form-card) :is(.fsa-field, .ai-field) :is(input, select, textarea):hover {
    border-color: color-mix(in srgb, var(--hf-soft) 30%, transparent) !important;
  }
  :is(#hf-card, [id^="hf-card-"]) .hf-input:focus,
  :is(#audit.fsa-card, #get-started.ai-form-card) :is(.fsa-field, .ai-field) :is(input, select, textarea):focus {
    border-color: color-mix(in srgb, var(--hf-btn) 85%, transparent) !important;
    background-color: color-mix(in srgb, var(--hf-soft) 9%, transparent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--hf-btn) 24%, transparent);
  }
  :is(#hf-card, [id^="hf-card-"]) .hf-input::placeholder,
  :is(#audit.fsa-card, #get-started.ai-form-card) ::placeholder { color: var(--hf-faint) !important; }
  :is(#hf-card, [id^="hf-card-"]) select.hf-input,
  #get-started.ai-form-card .ai-field select {
    background-image: linear-gradient(45deg, transparent 50%, var(--hf-text) 50%), linear-gradient(135deg, var(--hf-text) 50%, transparent 50%);
  }
  :is(#hf-card, [id^="hf-card-"]) select.hf-input:invalid,
  #get-started.ai-form-card .ai-field select:invalid { color: var(--hf-faint) !important; }
  :is(#hf-card, [id^="hf-card-"]) .hf-input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px var(--hf-top) inset; }
  :is(#hf-card, [id^="hf-card-"]) .hf-check input { accent-color: var(--hf-btn); }

  :is(#hf-card, [id^="hf-card-"]) .hf-form .hf-submit,
  :is(#audit.fsa-card .fsa-submit, #get-started.ai-form-card .ai-submit) {
    background: var(--hf-btn) !important;
    color: var(--hf-ink) !important;
    box-shadow: 0 10px 30px color-mix(in srgb, var(--hf-btn) 18%, transparent) !important;
  }
  :is(#hf-card, [id^="hf-card-"]) .hf-form .hf-submit:hover,
  :is(#audit.fsa-card .fsa-submit, #get-started.ai-form-card .ai-submit):hover {
    background: var(--hf-btn) !important;
    box-shadow: 0 16px 36px color-mix(in srgb, var(--hf-btn) 30%, transparent) !important;
  }
  :is(#hf-card, [id^="hf-card-"]) .hf-form .hf-submit:focus-visible { outline-color: var(--hf-soft); }
  #audit.fsa-card .fsa-thanks-ico { background: var(--hf-btn) !important; color: var(--hf-ink) !important; }
}