/* ============================================================
   QERIONN Public Polish v1 — loads AFTER site.css.
   1) Header brand stack: breathing room between logo / legal
      name / full form (was cramped at 2px gap, 190px width).
   2) Footer: compacted vertically (~40% shorter) — same links,
      same markup, smaller paddings and type.
   3) Site-wide cursor gold glow (element injected by
      public_polish_v1.js; desktop pointers only).
   Presentational only — no markup or JS-hook changes.
   ============================================================ */

/* ---------- 1. Header brand stack spacing ---------- */
.header-brand-stack {
  width: 208px !important;
  gap: 7px !important;
}
.brand-logo {
  margin-bottom: 1px !important;
}
.header-brand-legal-name {
  width: 208px !important;
  max-width: 208px !important;
  margin-top: 4px !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.035em !important;
  line-height: 1.25 !important;
}
.header-brand-full-form {
  width: 208px !important;
  max-width: 208px !important;
  font-size: 0.5rem !important;
  line-height: 1.4 !important;
  letter-spacing: 0.015em !important;
  opacity: 0.92;
}
@media (max-width: 1120px) {
  .header-brand-stack,
  .header-brand-legal-name,
  .header-brand-full-form {
    width: 188px !important;
    max-width: 188px !important;
  }
  .header-brand-full-form { font-size: 0.47rem !important; }
}

/* ---------- 2. Compact footer ---------- */
.site-footer {
  padding: 42px 0 16px !important;
}
.footer-grid {
  gap: 30px 26px !important;
}
.footer-brand-identity .footer-logo,
.footer-logo {
  width: 150px !important;
  height: auto !important;
  margin-bottom: 12px !important;
}
.footer-badge {
  width: 112px !important;
  height: auto !important;
}
.footer-brand p {
  font-size: 0.79rem !important;
  line-height: 1.55 !important;
  margin-top: 8px !important;
  margin-bottom: 0 !important;
}
.footer-brand .footer-legal-name {
  margin-top: 12px !important;
  font-size: 0.85rem !important;
}
.footer-brand .footer-full-form {
  font-size: 0.69rem !important;
  margin-top: 4px !important;
}
.footer-grid section:not(.footer-brand) {
  gap: 7px !important;
}
.footer-grid h2 {
  margin: 0 0 5px !important;
  font-size: 0.74rem !important;
}
.footer-grid a {
  font-size: 0.8rem !important;
  line-height: 1.4 !important;
}
.footer-bottom {
  margin-top: 28px !important;
  padding-top: 15px !important;
  font-size: 0.73rem !important;
}
@media (max-width: 768px) {
  .site-footer { padding: 34px 0 14px !important; }
  .footer-grid { gap: 22px 18px !important; }
}

/* ---------- 3. Cursor gold glow (site-wide) ---------- */
#q-cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 4;
  background: radial-gradient(circle, rgba(214, 178, 94, 0.065), transparent 62%);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.6s ease;
  mix-blend-mode: screen;
  will-change: transform;
}
html.q-glow-on #q-cursor-glow { opacity: 1; }
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  #q-cursor-glow { display: none; }
}

/* ---------- v2: FAQ accordions + commitment strips (site pages) ---------- */
.q-commit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.q-commit-list li {
  padding: 18px 20px 18px 46px;
  position: relative;
  border: 1px solid rgba(214, 178, 94, 0.2);
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(13, 28, 47, 0.7), rgba(7, 18, 32, 0.7));
  color: #b6c0d0;
  font-size: 0.9rem;
  line-height: 1.6;
}
.q-commit-list li::before {
  content: "\2713";
  position: absolute;
  left: 18px;
  top: 17px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(214, 178, 94, 0.15);
  color: #d6b25e;
  font-size: 0.7rem;
  font-weight: 800;
}
.q-commit-list strong { color: #e9cd85; }
@media (max-width: 720px) { .q-commit-list { grid-template-columns: 1fr; } }

.q-faq-list { display: grid; gap: 10px; }
.q-faq {
  border: 1px solid rgba(214, 178, 94, 0.18);
  border-radius: 14px;
  background: rgba(10, 24, 40, 0.55);
  overflow: hidden;
  transition: border-color 0.22s ease;
}
.q-faq[open] { border-color: rgba(214, 178, 94, 0.45); }
.q-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 44px 16px 18px;
  position: relative;
  color: #f4f0e6;
  font-weight: 700;
  font-size: 0.94rem;
}
.q-faq summary::-webkit-details-marker { display: none; }
.q-faq summary::after {
  content: "+";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(214, 178, 94, 0.4);
  color: #d6b25e;
  font-weight: 700;
  transition: transform 0.25s ease, background 0.25s ease;
}
.q-faq[open] summary::after {
  content: "\2212";
  background: rgba(214, 178, 94, 0.15);
}
.q-faq > p {
  margin: 0;
  padding: 0 18px 16px;
  color: #94a5ba;
  font-size: 0.88rem;
  line-height: 1.65;
}
.q-faq summary:focus-visible { outline: 2px solid #d6b25e; outline-offset: -2px; }

/* ---------- v3: feature-card illustrations (candidates page) ---------- */
.feature-list-grid .q-ill {
  display: block;
  width: 100%;
  max-width: 216px;
  height: auto;
  margin: 8px auto 16px;
  border-radius: 14px;
  background: radial-gradient(140px 90px at 60% 30%, rgba(214, 178, 94, 0.07), transparent 70%);
}
.feature-list-grid article { text-align: left; }
.feature-list-grid article:hover .q-ill { transform: translateY(-4px); }
.feature-list-grid .q-ill { transition: transform 0.28s ease; }
@media (prefers-reduced-motion: reduce) {
  .feature-list-grid .q-ill { transition: none; }
  .feature-list-grid article:hover .q-ill { transform: none; }
}

/* hero illustrations on solution pages */
.page-hero .q-ill-hero {
  display: block;
  width: min(300px, 70vw);
  height: auto;
  margin: 26px 0 6px;
  border-radius: 16px;
  border: 1px solid rgba(214, 178, 94, 0.2);
  background: linear-gradient(160deg, rgba(13, 28, 47, 0.5), rgba(7, 18, 32, 0.5));
  padding: 10px;
}

/* ============================================================
   v4 — Header: Udyam badge height matched to company logo height
   Logo intrinsic ratio 406x110, badge intrinsic ratio 760x190.
   Badge height is pinned to the logo's rendered height at every
   breakpoint; width follows automatically (no distortion). The
   badge's grid track is switched to max-content so the wider
   badge never clips against the nav. Header logo untouched.
   ============================================================ */
.brand-cluster {
  grid-template-columns: max-content max-content !important;
}
.brand-badge {
  /* 88% of a full height-match — visibly taller than before, without
     the badge growing wide enough to squeeze the nav against the
     header actions (see compensating gap tightening below). */
  height: calc(var(--q-header-logo-width) * 96.8 / 406) !important;
  width: auto !important;
  max-width: none !important;
}
@media (min-width: 1181px) {
  .brand-badge {
    height: calc(186px * 96.8 / 406) !important;
  }
  .header-inner.shell {
    column-gap: 20px !important;
  }
  .brand-cluster {
    gap: 14px !important;
  }
  .site-navigation {
    gap: 8px !important;
  }
  .header-actions {
    gap: 6px !important;
  }
}
@media (min-width: 1181px) and (max-width: 1450px) {
  .brand-badge {
    height: calc(166px * 96.8 / 406) !important;
  }
  .header-inner.shell {
    column-gap: 12px !important;
  }
  .brand-cluster {
    gap: 10px !important;
  }
  .site-navigation {
    gap: 5px !important;
  }
  .site-navigation a,
  .site-navigation summary {
    font-size: 0.76rem !important;
  }
  .header-actions {
    gap: 5px !important;
  }
}

/* ============================================================
   v5 — LOCAL PREVIEW ONLY: Founder / Managing Director section
   (public_site/templates/public_site/_about_content.html).
   Remove this block if the founder section is removed.
   ============================================================ */
.q-founder-section {
  background:
    radial-gradient(680px 380px at 85% 0%, rgba(214, 178, 94, 0.08), transparent 60%),
    #071322;
  border-top: 1px solid rgba(214, 178, 94, 0.16);
  border-bottom: 1px solid rgba(214, 178, 94, 0.16);
}
.q-founder-card {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 44px;
  align-items: start;
}
.q-founder-photo {
  margin: 0;
  position: sticky;
  top: 100px;
}
.q-founder-photo img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  border: 7px solid #d6b25e;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.q-founder-copy h3 {
  font-size: 1.5rem;
  color: #f4f0e6;
  margin: 0 0 4px;
}
.q-founder-title {
  color: #d6b25e;
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.03em;
  margin: 0 0 22px;
}
.q-founder-copy h4 {
  color: #e9cd85;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 28px 0 12px;
  padding-top: 18px;
  border-top: 1px solid rgba(214, 178, 94, 0.14);
}
.q-founder-copy h4:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.q-founder-copy p {
  color: #a9b7c9;
  font-size: 0.92rem;
  line-height: 1.75;
  margin: 0 0 14px;
}
@media (max-width: 760px) {
  .q-founder-card { grid-template-columns: 1fr; gap: 24px; }
  .q-founder-photo { position: static; width: 140px; margin: 0 auto; }
}

/* ---------- v6: services page — illustration per service card ---------- */
.service-detail .q-ill-service {
  float: right;
  width: 176px;
  height: auto;
  margin: 2px 0 18px 26px;
  border-radius: 14px;
  border: 1px solid rgba(214, 178, 94, 0.16);
  background: radial-gradient(120px 80px at 60% 30%, rgba(214, 178, 94, 0.06), transparent 70%);
  opacity: 0.96;
}
@media (max-width: 760px) {
  .service-detail .q-ill-service {
    float: none;
    display: block;
    width: 150px;
    margin: 0 auto 18px;
  }
}

/* ---------- v7: student/institution portal illustrations ---------- */
.q-ill-su {
  display: block;
  width: 100%;
  max-width: 200px;
  height: auto;
  margin: 4px 0 16px;
  border-radius: 14px;
  background: radial-gradient(120px 80px at 60% 30%, rgba(214, 178, 94, 0.06), transparent 70%);
}
.su-form-intro .q-ill-su { max-width: 220px; margin: 14px 0 18px; }
.su-status-card .q-ill-su,
.su-cta-group .q-ill-su { max-width: 180px; }

/* ============================================================
   v8 — BUG FIX: buttons inside .service-card / .journey-card
   were invisible (pale-gold-on-gold) because .service-card a
   sets color:var(--gold-light), which beats .button-gold's own
   color:#07101f on specificity (0-1-1 vs 0-1-0). Restore correct
   per-variant text color, and drop the automatic " -->" suffix
   that rule adds (buttons already show their own arrow/text).
   ============================================================ */
.service-card a.button::after,
.journey-card a.button::after {
  content: "" !important;
}
.service-card a.button.button-gold,
.journey-card a.button.button-gold {
  color: #07101f !important;
}
.service-card a.button.button-dark,
.journey-card a.button.button-dark {
  color: #f4f0e6 !important;
}
.service-card a.button.button-outline,
.journey-card a.button.button-outline,
.service-card a.button.button-quiet,
.journey-card a.button.button-quiet {
  color: #f4f0e6 !important;
}

/* ============================================================
   v9 — BUG FIX: .section-shell had NO padding rule anywhere in
   site.css, so content (e.g. careers.html's "Register your
   profile" button) sat flush against the very next section
   (cta-band), with zero breathing room.
   ============================================================ */
.section-shell {
  padding: clamp(80px, 9vw, 125px) 0;
}

/* ============================================================
   v5 — Narrow-viewport header overflow (real defect, 5 Aug 2026)

   Found with Playwright at explicit phone viewports (the cloud
   browser tool used elsewhere in this project clamps resize at
   ~1100px, so this range had never actually been rendered). EVERY
   route horizontally overflowed below 404px:

     390px -> 14px overflow    375px -> 29px
     360px -> 44px             320px -> 84px

   Always exactly 404 - viewport, i.e. a hard 404px page floor.

   Root cause is the v4 block above. It sets, with no media query and
   !important:

     .brand-cluster { grid-template-columns: max-content max-content }

   which was the right call for its own purpose (stopping the taller
   badge clipping against the desktop nav) but applies at every width.
   So the brand cluster always sizes to the images' intrinsic content
   (measured 188px + 125.875px = 314px) and silently ignores the
   responsive --q-header-logo-width / --q-header-udyam-width variables,
   which are correctly set to 132px/84px at <=760px. With the 46px
   hamburger and gaps, the header demands ~380px plus shell padding =
   404px, and the hamburger itself ends up 44px past the right edge of
   a 360px screen.

   Two tiers, following the pattern this header already uses of
   shedding secondary content before primary:

   761-480px: let the tracks shrink (minmax(0, max-content)) and stop
   the badge overriding its own width, so both marks fit.

   <=480px: drop the Udyam badge from the HEADER only. At phone width
   a ~74px-wide banner badge is unreadable anyway, and it remains in
   the footer (base_public.html .footer-badge-udyam), so no compliance
   signal is lost -- the same reasoning already applied when the legal
   name and full form were moved out of the header.
   ============================================================ */
@media (max-width: 760px) {
  .brand-cluster {
    grid-template-columns: minmax(0, max-content) minmax(0, max-content) !important;
    gap: 10px !important;
  }

  .brand-logo {
    max-width: 100% !important;
  }

  .brand-badge {
    height: calc(var(--q-header-logo-width) * 62 / 406) !important;
    max-width: 100% !important;
  }
}

@media (max-width: 480px) {
  /* Header only. The footer badge is untouched. */
  .brand-cluster .brand-badge-udyam {
    display: none !important;
  }

  .brand-cluster {
    grid-template-columns: minmax(0, max-content) !important;
  }
}

/* ============================================================
   v6 — Service Desk bottom safe-area at narrow viewports
   (real defect, 5 Aug 2026)

   The launcher is position:fixed at bottom-right with z-index 1200.
   On phone viewports the page's last interactive controls -- footer
   navigation links, and page CTAs such as "Generate ATS CV" -- end up
   underneath it once scrolled to the bottom, because nothing reserves
   space for it. Measured across 8 viewports x 14 routes: 36 real
   control obstructions.

   Reserving a bottom safe-area equal to the launcher's footprint plus
   a margin means the final controls can always be scrolled clear of
   it. Paired with the launcher shrink in guide_restyle_v1.css (which
   is where the !important rules that actually govern its size live).

   Scoped to <=760px: at desktop widths the launcher sits in empty
   gutter beside the centred shell and obstructs nothing, so reserving
   space there would just add dead scroll.
   ============================================================ */
@media (max-width: 760px) {
  .site-footer {
    padding-bottom: 84px;
  }
}

/* ============================================================
   QERIONN_PUBLIC_HEADER_PILL_CHROME_20260812
   Same public header bar as /partners/apply/: logo lighten blend,
   kill separator dots / underline rails, pill top-level nav.
   Applies site-wide via base_public. Authenticated portal shells
   (body.q-app--student / .partner-network-page /
   .institution-portal-page) keep their own higher-specificity
   header rules — do not regress post-login menus.
   ============================================================ */
.site-header .brand-logo {
  filter: none !important;
  mix-blend-mode: lighten;
  opacity: 1;
  max-height: 40px;
  width: auto;
  height: auto;
  background: transparent;
}

.site-header .header-brand-stack {
  width: auto !important;
  max-width: min(220px, 36vw);
}

.site-header .brand-badge-udyam {
  max-height: 28px;
  width: auto;
  opacity: 0.86;
  mix-blend-mode: lighten;
}

.site-header .brand-cluster {
  gap: 14px;
  align-items: center;
}

.site-navigation > a:not(:first-child)::before,
.site-navigation > details:not(:first-child) > summary::before,
.site-navigation > a::after,
.site-navigation a.is-active::after,
.site-navigation a[aria-current="page"]::after {
  content: none !important;
  display: none !important;
}

.site-navigation {
  gap: 8px;
  align-items: center;
}

/* Each top-level item is its own stacking context so an open menu
   never paints through / under a neighbour pill (Partners ↔
   Software & Digital cross-fade / overlap on click). */
.site-navigation > a,
.site-navigation > details.nav-dropdown {
  position: relative;
  z-index: 1;
  isolation: isolate;
  flex-shrink: 0;
}

.site-navigation > details.nav-dropdown[open] {
  z-index: 80;
}

.site-navigation > a,
.site-navigation > details > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(244, 240, 230, 0.9) !important;
  font-size: 0.84rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-decoration: none !important;
  box-shadow: none;
  /* Colour only — no opacity/transform that can blend with the
     neighbour pill during exclusive open/close handoff. */
  transition:
    background 0.12s ease,
    border-color 0.12s ease,
    color 0.12s ease;
}

.site-navigation > a:hover,
.site-navigation > a:focus-visible,
.site-navigation > details > summary:hover,
.site-navigation > details > summary:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  color: #fffef8 !important;
  outline: none;
}

.site-navigation > a.is-active,
.site-navigation > a[aria-current="page"],
.site-navigation > details > summary.is-active,
.site-navigation > details[open] > summary {
  background: linear-gradient(
    135deg,
    rgba(240, 213, 138, 0.24),
    rgba(201, 162, 39, 0.12)
  );
  border-color: rgba(214, 178, 94, 0.45);
  color: #f0d58a !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(214, 178, 94, 0.08);
}

.site-navigation .nav-dropdown-panel,
.site-navigation .nav-split-panel {
  border: 1px solid rgba(214, 178, 94, 0.28);
  border-radius: 14px;
  background:
    radial-gradient(circle at 12% 0%, rgba(214, 178, 94, 0.12), transparent 42%),
    linear-gradient(180deg, #0f1a2b, #0b1424);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.38);
}

/* Kill panel opacity cross-fade between adjacent dropdowns.
   Closed panels must not remain hit-testable or semi-visible while
   the next item opens (Partners → Software & Digital). */
@media (min-width: 1261px) {
  .site-navigation .nav-dropdown-panel,
  .site-navigation .nav-split-panel {
    transition: none !important;
  }

  .site-navigation .nav-dropdown:not([open]) > .nav-dropdown-panel,
  .site-navigation .nav-split:not([open]) > .nav-split-panel {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .site-navigation .nav-dropdown[open] > .nav-dropdown-panel,
  .site-navigation .nav-split[open] > .nav-split-panel {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 90;
  }
}

/* Long dropdown labels must wrap inside the panel (Students →
   "Create account without resume" was painting past the card edge
   because a later site.css rule forced nowrap on all nav anchors). */
.site-navigation .nav-dropdown-panel a,
.site-navigation .nav-split-panel-group a,
.site-navigation .nav-dropdown-item-label {
  white-space: normal !important;
  overflow-wrap: break-word;
  min-width: 0;
}

.site-navigation .nav-dropdown-panel a,
.site-navigation .nav-split-panel-group a {
  max-width: 100%;
  align-items: flex-start;
}

.site-navigation .nav-dropdown-panel-wide {
  width: min(520px, calc(100vw - 32px));
  overflow: hidden;
}

.site-navigation .nav-dropdown-panel-wide > a {
  min-width: 0;
}

.header-actions .button-quiet,
.header-actions .header-primary-cta,
.header-actions .header-secondary-cta,
.header-profile-chip {
  border-radius: 999px;
  min-height: 38px;
}

/* Mobile drawer: stacked pills, no inline separator leftovers */
.site-navigation.is-open {
  gap: 8px;
}

.site-navigation.is-open > a,
.site-navigation.is-open > details > summary {
  width: 100%;
  justify-content: flex-start;
}

/* ============================================================
   QERIONN_EMPLOYER_PUBLIC_PATH_POLISH_20260812
   Companies landing + Help/Contact/Verify destinations that were
   still on weaker CTA / form affordance than Partner apply.
   Does not redesign authenticated portal shells.
   ============================================================ */

/* Primary / outline CTAs — Partner-visible pills on dark public pages */
.button.button-gold,
a.button.button-gold,
button.button-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 0;
  background: linear-gradient(145deg, #f0d58a, #d6b25e);
  color: #07101f !important;
  font-weight: 800;
  text-decoration: none !important;
  box-shadow: 0 16px 35px rgba(214, 178, 94, 0.16);
}

/* Demo must keep the gold fill. A transparent ghost + this navy ink
   is dark-on-navy and the label disappears. */
.q-demo-start.button-gold,
button.q-demo-start.button-gold {
  background: #f0d58a;
  color: #07101f !important;
  border: 1px solid #c9a227;
}

.button.button-gold:hover,
.button.button-gold:focus-visible,
a.button.button-gold:hover,
a.button.button-gold:focus-visible {
  background: #f0d58a;
  color: #07101f !important;
}

.button.button-outline,
a.button.button-outline,
button.button-outline,
html[data-qa11y-theme] .button.button-outline,
html[data-qa11y-theme] a.button.button-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(14, 28, 54, 0.72);
  color: #f4f0e6 !important;
  border: 1px solid rgba(201, 162, 39, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  text-decoration: none !important;
  font-weight: 700;
}

.button.button-outline:hover,
.button.button-outline:focus-visible,
a.button.button-outline:hover,
a.button.button-outline:focus-visible,
html[data-qa11y-theme] .button.button-outline:hover,
html[data-qa11y-theme] .button.button-outline:focus-visible {
  background: rgba(201, 162, 39, 0.14);
  border-color: rgba(201, 162, 39, 0.75);
  color: #f0d58a !important;
}

/* Light surfaces keep readable dark outline (project support, help cards) */
.surface-light .button.button-outline,
.section-light .button.button-outline,
.surface-light a.button.button-outline,
.section-light a.button.button-outline {
  background: #fff;
  color: #0b1728 !important;
  border-color: rgba(11, 23, 40, 0.22);
  box-shadow: none;
}

.surface-light .button.button-outline:hover,
.section-light .button.button-outline:hover,
.surface-light a.button.button-outline:hover,
.section-light a.button.button-outline:hover {
  background: #f7f8fa;
  border-color: rgba(112, 91, 42, 0.55);
  color: #705b2a !important;
}

/* Gold CTA band — dark button stays high-contrast on gold */
.cta-band .button.button-dark,
.cta-band a.button.button-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #07101f;
  color: #f4f0e6 !important;
  border: 1px solid rgba(7, 16, 31, 0.85);
  font-weight: 800;
  text-decoration: none !important;
}

.cta-band .button.button-dark:hover,
.cta-band .button.button-dark:focus-visible,
.cta-band a.button.button-dark:hover,
.cta-band a.button.button-dark:focus-visible {
  background: #0c1a30;
  color: #f0d58a !important;
}

/* Contact + other premium-form pages (no form-section wrappers) */
.premium-form .form-field input:not([type="checkbox"]):not([type="radio"]),
.premium-form .form-field select,
.premium-form .form-field textarea {
  background: rgba(8, 18, 36, 0.96);
  color: #f4f0e6;
  border: 1.5px solid rgba(201, 162, 39, 0.45);
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 0 1px rgba(214, 178, 94, 0.04);
}

.premium-form .form-field input:hover,
.premium-form .form-field select:hover,
.premium-form .form-field textarea:hover {
  border-color: rgba(214, 178, 94, 0.7);
}

.premium-form .form-field input:focus,
.premium-form .form-field select:focus,
.premium-form .form-field textarea:focus,
.premium-form .form-field input:focus-visible,
.premium-form .form-field select:focus-visible,
.premium-form .form-field textarea:focus-visible {
  border-color: #d6b25e;
  background: rgba(10, 22, 42, 0.98);
  box-shadow:
    0 0 0 3px rgba(214, 178, 94, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  outline: none;
}

.premium-form .form-field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.6rem;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, #f0d58a 50%),
    linear-gradient(135deg, #f0d58a 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 12px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* Verify hub inputs — same elevated field language */
.verify-card input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.verify-card input[type="text"],
.verify-card input[type="file"] {
  background: rgba(8, 18, 36, 0.96);
  color: #f4f0e6;
  border: 1.5px solid rgba(201, 162, 39, 0.45);
  border-radius: 12px;
}

.verify-card input[type="file"] {
  border-style: dashed;
  background: rgba(6, 14, 28, 0.56);
}

.verify-card input:not([type="checkbox"]):not([type="radio"]):focus,
.verify-card input:not([type="checkbox"]):not([type="radio"]):focus-visible {
  border-color: #d6b25e;
  box-shadow: 0 0 0 3px rgba(214, 178, 94, 0.18);
  outline: none;
}

/* Employer landing journey stepper — pill indices, not hyperlink strip */
.page-companies .journey-stepper li.is-current .journey-stepper-index,
.page-companies .journey-stepper a .journey-stepper-index {
  border-radius: 999px;
}

.page-companies .feature-list-grid article {
  border-radius: 18px;
  border-color: rgba(214, 178, 94, 0.18);
  background:
    linear-gradient(
      145deg,
      rgba(14, 28, 54, 0.88),
      rgba(8, 20, 40, 0.94)
    );
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}

.page-companies .q-faq {
  border-radius: 14px;
  background: rgba(8, 18, 36, 0.55);
}

/* ---------- UX lead 2026-08-14: tighter public hierarchy ---------- */
.premium-hero-lead {
  max-width: 38rem;
  line-height: 1.55;
}
.premium-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.premium-hero-actions .button-large {
  min-height: 48px;
}
.premium-hero-actions .button-outline.button-large:last-of-type {
  border-color: rgba(240, 213, 138, 0.28);
  background: transparent;
}
.premium-hero-tertiary {
  margin-top: 10px;
}
.q-stat-band {
  padding-block: 28px;
}
.audience-card-desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.form-help-inline {
  margin-top: 12px;
}
.su-package-card-compact .su-compare-link {
  display: none;
}
.su-cta-group-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}