/* ============================================================================
   getreal-kb-v2.css  —  v2.0  (2026-07-21)
   GetReal HubSpot Knowledge Base restyle (support.getreallabs.com).

   v2 rebuilds the theme to the GetReal marketing brand (getrealsecurity.com):
   the signature INDIGO -> MAGENTA diagonal gradient (#1E2D96 -> #7B0D7A), a
   near-black anchor (#14133A), and the coral (#EA5343) + cyan (#6FE0FB) accent
   duo — replacing v1's flat monochrome-purple "themed template" look.

   SCOPE:  Every rule is prefixed with .kb-body-wrapper — the wrapper div that
           only the KB home/category/article/search templates emit. The Customer
           Portal React app and other hosted content do NOT render it, so this
           sheet is leak-safe. No :root, no unscoped selectors.
   FONT:   Inter (already loaded by the template) — weights/sizes/tracking only.
           NOTE: the marketing site's brand face is "Abcfavorit" (a hosted
           Webflow font we cannot load without an external request); Inter is the
           closest available system-loaded match and is kept per the constraint.
   MODE:   Light UI, dark brand hero band. All text/background pairs verified
           WCAG AA (see REVIEW.md contrast table).
   ========================================================================== */

/* ---- Design tokens (scoped — no global leakage) --------------------------- */
.kb-body-wrapper {
  /* brand palette (from getrealsecurity.com Webflow CSS) */
  --grk-indigo:       #1E2D96;
  --grk-indigo-deep:  #14133A;
  --grk-purple:       #7B0D7A;
  --grk-purple-deep:  #650166;
  --grk-magenta:      #9A1197;
  --grk-coral:        #EA5343;
  --grk-coral-deep:   #C22D20;
  --grk-cyan:         #6FE0FB;
  --grk-teal-deep:    #0A6072;

  /* neutrals */
  --grk-ink:          #1A1626;
  --grk-ink-muted:    #5E5866;
  --grk-line:         #E8E6EF;
  --grk-line-soft:    #F0EEF5;
  --grk-surface:      #FFFFFF;
  --grk-canvas:       #F7F8FB;

  /* signature gradients */
  --grk-hero: linear-gradient(135deg, #14133A 0%, #1E2D96 38%, #7B0D7A 84%, #9A1197 100%);
  --grk-cta:  linear-gradient(120deg, #1E2D96 0%, #7B0D7A 100%);

  /* radii */
  --grk-r:       14px;
  --grk-r-sm:    10px;
  --grk-pill:    999px;

  /* elevation system (3 tiers + brand ambient) */
  --grk-e1: 0 1px 2px rgba(20,19,58,.06), 0 2px 8px rgba(20,19,58,.05);
  --grk-e2: 0 6px 16px rgba(20,19,58,.09), 0 16px 40px rgba(20,19,58,.09);
  --grk-e-cta: 0 6px 18px rgba(123,13,122,.30);

  background-color: var(--grk-canvas);
  color: var(--grk-ink);
}

/* ============================================================================
   1. HERO / SEARCH BAND — authentic indigo->magenta brand gradient
   The theme lays out eyebrow(pseudo) + label(H1) + input + button inside one
   flex row (.hs-search-field__bar > form). v2 uses flex-wrap so the eyebrow and
   heading each take their own full-width line ABOVE the search pill (v1 left the
   white heading inside the white pill => invisible).
   ========================================================================== */
.kb-body-wrapper .hs-kb-search-input-wrapper {
  position: relative;
  overflow: hidden;
  padding: clamp(52px, 8vw, 84px) 24px clamp(96px, 10vw, 124px);
  background: var(--grk-hero);
  text-align: center;
  isolation: isolate;
}
/* layered light-mesh for depth — coral + cyan + indigo glows */
.kb-body-wrapper .hs-kb-search-input-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(42rem 28rem at 82% 8%, rgba(111,224,251,.20), transparent 60%),
    radial-gradient(38rem 26rem at 8% 96%, rgba(234,83,67,.20), transparent 58%),
    radial-gradient(30rem 22rem at 55% 120%, rgba(154,17,151,.35), transparent 60%);
}
/* fine grid texture (self-contained SVG data-URI) */
.kb-body-wrapper .hs-kb-search-input-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .5;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M40 0H0v40' fill='none' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1'/%3E%3C/svg%3E");
}

.kb-body-wrapper .hs-kb-search-input-wrapper .hs-search-field { display: block; }
.kb-body-wrapper .hs-kb-search-input-wrapper .hs-search-field__form {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  max-width: 640px;
  margin: 0 auto;
}
/* eyebrow kicker */
.kb-body-wrapper .hs-kb-search-input-wrapper .hs-search-field__form::before {
  content: "GETREAL SUPPORT CENTER";
  order: -2;
  flex: 1 0 100%;
  margin-bottom: 14px;
  color: var(--grk-cyan);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .16em;
}
/* promote the search label into the hero H1 */
.kb-body-wrapper .hs-kb-search-input-wrapper .hs-search-field__label {
  order: -1;
  flex: 1 0 100%;
  margin: 0 0 28px;
  color: #fff;
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* ============================================================================
   2. SEARCH PILL  (white input + attached gradient button, brand focus ring)
   ========================================================================== */
.kb-body-wrapper .hs-kb-search-input-wrapper .hs-search-field__input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: #fff;
  padding: 16px 4px 16px 24px;
  font-size: 16px;
  color: var(--grk-ink);
  border-radius: var(--grk-pill) 0 0 var(--grk-pill);
  box-shadow: 0 10px 30px rgba(20,19,58,.22);
  transition: box-shadow 160ms ease;
}
.kb-body-wrapper .hs-kb-search-input-wrapper .hs-search-field__input::placeholder { color: #8b8796; }
.kb-body-wrapper .hs-kb-search-input-wrapper .hs-search-field__input:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(111,224,251,.55), 0 10px 30px rgba(20,19,58,.22);
}
.kb-body-wrapper .hs-kb-search-input-wrapper .hs-search-field__button {
  flex: 0 0 auto;
  width: auto;
  padding: 0 26px;
  border: none;
  border-radius: 0 var(--grk-pill) var(--grk-pill) 0;
  background: var(--grk-cta);
  box-shadow: 0 10px 30px rgba(20,19,58,.22);
  transition: filter 150ms ease;
}
.kb-body-wrapper .hs-kb-search-input-wrapper .hs-search-field__button:hover,
.kb-body-wrapper .hs-kb-search-input-wrapper .hs-search-field__button:focus-visible {
  filter: brightness(1.12);
}
.kb-body-wrapper .hs-kb-search-input-wrapper .hs-search-field__button svg { height: 17px; fill: #fff; }

/* autocomplete dropdown — anchored under the pill */
.kb-body-wrapper .hs-kb-search-input-wrapper .hs-search-field__suggestions-container {
  flex: 1 0 100%;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  z-index: 30;
}
.kb-body-wrapper .hs-search-field__suggestions {
  margin: 0;
  padding: 6px;
  list-style: none;
  text-align: left;
  background: #fff;
  border-radius: var(--grk-r-sm);
  border: 1px solid var(--grk-line);
  box-shadow: var(--grk-e2);
  overflow: hidden;
}
.kb-body-wrapper .hs-search-field__suggestions a,
.kb-body-wrapper .hs-search-field__suggestions li { border-radius: 7px; }
.kb-body-wrapper .hs-search-field__suggestions a:hover {
  background: var(--grk-line-soft);
  color: var(--grk-purple);
}

/* ============================================================================
   3. PAGE CANVAS + CATEGORY TILE GRID
   Cards lift up over the hero seam (signature docs-site move) and carry a
   per-category accent (purple / indigo / coral / cyan) via tinted icon chips.
   ========================================================================== */
.kb-body-wrapper .hs-knowledge-listing-layout--tiles #main-content,
.kb-body-wrapper .hs-knowledge-listing-layout--cards #main-content {
  background: transparent;
  padding: 0 0 40px;
}
.kb-body-wrapper .hs-kb-home-list--tiles,
.kb-body-wrapper .hs-kb-home-list--cards {
  position: relative;
  z-index: 2;
  margin: -60px auto 0;
  padding: 0 24px 56px;
  max-width: 1120px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 22px;
}

/* the tile → elevated card */
.kb-body-wrapper .hs-kb-home-list__category {
  --tile-accent: var(--grk-purple);
  --tile-tint: #F7E9F6;
  max-width: none;
  background: var(--grk-surface);
  border: 1px solid var(--grk-line);
  border-radius: var(--grk-r);
  box-shadow: var(--grk-e1);
  overflow: hidden;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
/* top accent bar reveals on hover (color rhythm without the v1 left-slab cliché) */
.kb-body-wrapper .hs-kb-home-list__category::before {
  content: "";
  display: block;
  height: 3px;
  background: var(--tile-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms ease;
}
.kb-body-wrapper .hs-kb-home-list__category:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--tile-accent) 40%, var(--grk-line));
  box-shadow: var(--grk-e2), 0 18px 34px -18px var(--tile-accent);
}
.kb-body-wrapper .hs-kb-home-list__category:hover::before { transform: scaleX(1); }

/* per-category accent + tint */
.kb-body-wrapper .hs-kb-home-list__category:nth-child(4n+1) { --tile-accent: var(--grk-purple);    --tile-tint: #F7E9F6; }
.kb-body-wrapper .hs-kb-home-list__category:nth-child(4n+2) { --tile-accent: var(--grk-indigo);    --tile-tint: #E7E9F7; }
.kb-body-wrapper .hs-kb-home-list__category:nth-child(4n+3) { --tile-accent: var(--grk-coral-deep); --tile-tint: #FDECE9; }
.kb-body-wrapper .hs-kb-home-list__category:nth-child(4n)   { --tile-accent: var(--grk-teal-deep);  --tile-tint: #E1F6FB; }

.kb-body-wrapper .hs-kb-home-list__category-link {
  position: relative;
  min-height: 0;
  height: 100%;
  padding: 26px 24px 52px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 2px;
  text-decoration: none;
}
/* icon chip — rounded tinted medallion */
.kb-body-wrapper .hs-kb-home-list__icon {
  height: auto;
  margin: 0 0 16px;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: var(--tile-tint);
  color: var(--tile-accent);
}
.kb-body-wrapper .hs-kb-home-list__icon svg,
.kb-body-wrapper .hs-kb-home-list__icon-svg {
  width: 24px;
  height: 24px;
  fill: var(--tile-accent);
  color: var(--tile-accent);
}
.kb-body-wrapper .hs-kb-home-list__text h3 {
  margin: 0 0 6px;
  font-size: 17.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--grk-ink);
  transition: color 150ms ease;
}
.kb-body-wrapper .hs-kb-home-list__category:hover .hs-kb-home-list__text h3 { color: var(--tile-accent); }
.kb-body-wrapper .hs-kb-home-list__text p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--grk-ink-muted);
}
/* affordance arrow, bottom-left, slides on hover */
.kb-body-wrapper .hs-kb-home-list__category-link::after {
  content: "→";
  position: absolute;
  left: 24px;
  bottom: 20px;
  font-size: 16px;
  font-weight: 700;
  color: var(--tile-accent);
  opacity: .55;
  transition: transform 180ms ease, opacity 180ms ease;
}
.kb-body-wrapper .hs-kb-home-list__category:hover .hs-kb-home-list__category-link::after {
  transform: translateX(5px);
  opacity: 1;
}

/* ============================================================================
   4. HEADER  (portal link -> solid gradient CTA pill, like marketing "GET A DEMO")
   ========================================================================== */
.kb-body-wrapper .header__wrapper--bottom { box-shadow: inset 0 -1px 0 var(--grk-line); }
.kb-body-wrapper .header__nav-link {
  display: inline-flex;
  align-items: center;
  padding: 9px 20px;
  border: none;
  border-radius: var(--grk-pill);
  background: var(--grk-cta);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  box-shadow: var(--grk-e-cta);
  transition: transform 150ms ease, filter 150ms ease;
}
.kb-body-wrapper .header__nav-link:hover,
.kb-body-wrapper .header__nav-link:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.1);
  color: #fff;
}

/* ============================================================================
   5. BREADCRUMBS
   ========================================================================== */
.kb-body-wrapper .hs-breadcrumb-menu { font-size: 13px; margin: 20px 0 8px; }
.kb-body-wrapper .hs-breadcrumb-menu-item { padding: 6px 0 6px 8px; }
.kb-body-wrapper .hs-breadcrumb-menu-item a { color: var(--grk-ink-muted); text-decoration: none; }
.kb-body-wrapper .hs-breadcrumb-menu-item a:hover { color: var(--grk-purple); text-decoration: underline; }
.kb-body-wrapper .hs-breadcrumb-menu-divider:before { color: #b7bcc9; }

/* ============================================================================
   6. ARTICLE TYPOGRAPHY  (technical docs: code, callouts, tables)
   NOTE: no articles are published yet, so article-page DOM could not be
   captured. These target HubSpot's STANDARD KB article classes and should be
   re-verified once the first article is live (see INSTALL.md).
   Link colors follow the Zendesk source-of-truth: default purple, hover indigo.
   ========================================================================== */
.kb-body-wrapper .hs-kb-content .article-body,
.kb-body-wrapper .hs-kb-content #hs_cos_wrapper_post_body,
.kb-body-wrapper #hs_cos_wrapper_post_body {
  max-width: 760px;
  margin: 0 auto;
  color: var(--grk-ink);
  font-size: 16.5px;
  line-height: 1.72;
}
.kb-body-wrapper .hs-kb-content h1 { font-size: clamp(28px, 4vw, 36px); line-height: 1.18; margin: 0 0 20px; font-weight: 800; letter-spacing: -0.02em; }
.kb-body-wrapper #hs_cos_wrapper_post_body h2 { font-size: 25px; line-height: 1.28; margin: 44px 0 14px; font-weight: 700; letter-spacing: -0.01em; }
.kb-body-wrapper #hs_cos_wrapper_post_body h3 { font-size: 19px; line-height: 1.35; margin: 30px 0 10px; font-weight: 700; }
.kb-body-wrapper #hs_cos_wrapper_post_body p,
.kb-body-wrapper #hs_cos_wrapper_post_body li { margin-bottom: 12px; }
.kb-body-wrapper #hs_cos_wrapper_post_body a { color: var(--grk-purple); text-underline-offset: 2px; }
.kb-body-wrapper #hs_cos_wrapper_post_body a:hover { color: var(--grk-indigo); }
/* inline code */
.kb-body-wrapper #hs_cos_wrapper_post_body code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.88em;
  background: var(--grk-line-soft);
  color: var(--grk-purple-deep);
  padding: 2px 6px;
  border-radius: 5px;
}
/* code blocks */
.kb-body-wrapper #hs_cos_wrapper_post_body pre {
  background: var(--grk-indigo-deep);
  color: #eef0f6;
  padding: 18px 20px;
  border-radius: var(--grk-r-sm);
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.55;
  margin: 20px 0;
}
.kb-body-wrapper #hs_cos_wrapper_post_body pre code { background: transparent; color: inherit; padding: 0; font-size: inherit; }
/* callout / blockquote */
.kb-body-wrapper #hs_cos_wrapper_post_body blockquote {
  margin: 22px 0;
  padding: 14px 18px;
  border-left: 4px solid var(--grk-cyan);
  background: #f2fbfe;
  color: var(--grk-ink);
  border-radius: 0 var(--grk-r-sm) var(--grk-r-sm) 0;
}
/* tables */
.kb-body-wrapper #hs_cos_wrapper_post_body table {
  width: 100%;
  border-collapse: collapse;
  margin: 22px 0;
  font-size: 14px;
  display: block;
  overflow-x: auto;
}
.kb-body-wrapper #hs_cos_wrapper_post_body th,
.kb-body-wrapper #hs_cos_wrapper_post_body td {
  border: 1px solid var(--grk-line);
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
}
.kb-body-wrapper #hs_cos_wrapper_post_body th { background: var(--grk-line-soft); font-weight: 700; color: var(--grk-ink); }
.kb-body-wrapper #hs_cos_wrapper_post_body tbody tr:nth-child(even),
.kb-body-wrapper #hs_cos_wrapper_post_body tr:nth-child(even) { background: #fafafc; }

/* ============================================================================
   7. SEARCH RESULTS PAGE + RELATED ARTICLES
   Result rows styled as cards with a category chip + hover lift. Live result
   markup is empty in the capture; verify item classes on the first live search.
   ========================================================================== */
.kb-body-wrapper .hs-search-results-title,
.kb-body-wrapper .hs-search-results__title-block {
  max-width: 760px;
  margin: 32px auto 20px;
  font-size: 22px;
  font-weight: 700;
  color: var(--grk-ink);
}
.kb-body-wrapper .hs-search-results,
.kb-body-wrapper .hs-search-results__listing {
  list-style: none;
  max-width: 760px;
  margin: 0 auto;
  padding: 0;
}
.kb-body-wrapper .hs-search-results__listing > li,
.kb-body-wrapper .hs-search-result {
  background: var(--grk-surface);
  border: 1px solid var(--grk-line);
  border-radius: var(--grk-r);
  box-shadow: var(--grk-e1);
  padding: 18px 22px;
  margin-bottom: 14px;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.kb-body-wrapper .hs-search-results__listing > li:hover,
.kb-body-wrapper .hs-search-result:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--grk-purple) 35%, var(--grk-line));
  box-shadow: var(--grk-e2);
}
.kb-body-wrapper .hs-search-results__category {
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 10px;
  border-radius: var(--grk-pill);
  background: #F7E9F6;
  color: var(--grk-purple);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  font-size: 11px;
}
.kb-body-wrapper .hs-search-results__title,
.kb-body-wrapper .hs-search-results__link h2 { margin: 0 0 6px; font-size: 18px; font-weight: 700; line-height: 1.3; }
.kb-body-wrapper .hs-search-results__title a,
.kb-body-wrapper .hs-search-results__link h2 a,
.kb-body-wrapper .hs-search-results__title-link { color: var(--grk-ink); text-decoration: none; }
.kb-body-wrapper .hs-search-results__listing > li:hover .hs-search-results__title a,
.kb-body-wrapper .hs-search-result:hover .hs-search-results__title a { color: var(--grk-purple); }
.kb-body-wrapper .hs-search-results__description { margin: 0; color: var(--grk-ink-muted); font-size: 14px; line-height: 1.55; }

/* related-articles (standard KB class; verify once live) */
.kb-body-wrapper .kb-article__related,
.kb-body-wrapper .hs-kb-related {
  max-width: 760px;
  margin: 40px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--grk-line);
}
.kb-body-wrapper .kb-article__related a,
.kb-body-wrapper .hs-kb-related a { color: var(--grk-purple); text-decoration: none; }
.kb-body-wrapper .kb-article__related a:hover,
.kb-body-wrapper .hs-kb-related a:hover { text-decoration: underline; }

/* ============================================================================
   8. FOOTER  (light polish)
   ========================================================================== */
.kb-body-wrapper .footer { border-top: 1px solid var(--grk-line); background: var(--grk-surface); }
.kb-body-wrapper .footer__bottom { padding-top: 8px; padding-bottom: 8px; }
.kb-body-wrapper .hs-kb-social_follow__link { transition: opacity 150ms ease; }
.kb-body-wrapper .hs-kb-social_follow__link:hover { opacity: .8; }

/* ============================================================================
   9. RESPONSIVE
   ========================================================================== */
@media (max-width: 640px) {
  .kb-body-wrapper .hs-kb-search-input-wrapper { padding: 44px 18px 88px; }
  .kb-body-wrapper .hs-kb-home-list--tiles,
  .kb-body-wrapper .hs-kb-home-list--cards {
    grid-template-columns: minmax(0, 1fr);
    padding: 0 18px 48px;
    gap: 16px;
  }
  .kb-body-wrapper .hs-kb-search-input-wrapper .hs-search-field__input { padding-left: 20px; }
  .kb-body-wrapper .hs-kb-search-input-wrapper .hs-search-field__button { padding: 0 20px; }
}