/* ==================================================================
   Clarity Integration Docs — Master WordPress Plugin Stylesheet
   Exact Figma Type Scale Reference & Color Specification
   ================================================================== */

:root {
  /* Clarity Brand Colors */
  --navy:       #00315A;
  --navy-dark:  #001B33;
  --navy-950:   #001426;
  --blue:       #23498A;
  --blue-mid:   #3A6DB5;
  --blue-lt:    #BACBDA;
  --green:      #679C5B;
  --green-dark: #4F7D45;
  --black:      #000000;
  --muted:      #606E8A;

  /* Surfaces */
  --white:      #FFFFFF;
  --bg:         #F4F7FB;
  --bg-section: #EEF2F8;
  --tint:       #F2F6FB;

  /* Lines & Borders */
  --hair:        rgba(186,203,218,0.55);
  --hair-strong: rgba(35,73,138,0.18);
  --border-light: rgba(226,232,240,0.9);

  /* Exact Figma Typography Specification */
  --fs-display: 56px;
  --fs-h1:      40px;
  --fs-h2:      30px;
  --fs-h3:      22px;
  --fs-h4:      18px;
  --fs-menu:    14px;
  --fs-body-lg: 18px;
  --fs-body-md: 16px;
  --fs-body-sm: 13px;
  --fs-label:   11px;
  --fs-btn:     18px;

  /* Shadows & Radii */
  --shadow-sm: 0 4px 12px rgba(35,73,138,0.06);
  --shadow-md: 0 10px 30px rgba(35,73,138,0.10);
  --shadow-lg: 0 24px 60px rgba(0,49,90,0.18);
  --shadow-card: 0 2px 8px rgba(0,36,71,0.05), 0 1px 2px rgba(0,36,71,0.03);
  --radius:    18px;
  --radius-sm: 10px;
  --radius-pill: 9999px;

  --sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

.clarity-int-page, .clarity-int-page * , .clarity-int-page *::before, .clarity-int-page *::after { box-sizing: border-box; }
.clarity-int-page [hidden] { display: none !important; }

.clarity-int-page {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--black) !important;
  font-family: var(--sans) !important;
  font-size: var(--fs-body-md);
  line-height: 26px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

.clarity-int-page a,
body.clarity-int-page a,
.elementor .clarity-int-page a {
  color: var(--blue) !important;
  text-decoration: none !important;
}
.clarity-int-page a:hover,
body.clarity-int-page a:hover,
.elementor .clarity-int-page a:hover {
  color: var(--navy) !important;
  text-decoration: none !important;
}
.clarity-int-page button,
body.clarity-int-page button {
  font-family: inherit !important;
}

.clarity-int-page .wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.clarity-int-page .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* ------------------------------------------------------------------ */
/* Header Bar                                                         */
/* ------------------------------------------------------------------ */

.clarity-int-page .d-head {
  position: sticky; top: 0; z-index: 70;
  background: var(--navy-dark);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.clarity-int-page .d-head-in {
  max-width: 1240px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 70px;
}
.clarity-int-page .d-brand-nav { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.clarity-int-page .logo { display: flex; align-items: center; height: 30px; }
/* Scale to the anchor rather than the export size, so the height above is
   the one that actually applies and the width follows the aspect ratio. */
.clarity-int-page .logo svg { display: block; height: 100%; width: auto; }
.clarity-int-page .logo.on-navy { filter: brightness(0) invert(1); }
.d-hub-badge,
.d-hub-badge:visited,
.d-hub-badge span,
.d-hub-badge:hover,
.d-hub-badge:active,
.clarity-int-page .d-hub-badge:focus {
  color: #ffffff !important;
  text-decoration: none !important;
}
.clarity-int-page .d-hub-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 5px 12px !important;
  border-radius: var(--radius-pill) !important;
  background: rgba(255, 255, 255, 0.16) !important;
  border: 1px solid rgba(255, 255, 255, 0.32) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  transition: all 0.2s ease !important;
}
.clarity-int-page .d-hub-badge:hover {
  background: rgba(255, 255, 255, 0.28) !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
}

/* Header Search */
.clarity-int-page .finder { position: relative; flex: 1 1 440px; max-width: 540px; margin: 0 auto; }
.clarity-int-page .finder-f { position: relative; display: flex; align-items: center; }
.clarity-int-page .finder-f > svg { position: absolute; left: 14px; width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.clarity-int-page .finder input {
  width: 100%; font-family: var(--sans); font-size: 16px; font-weight: 500; height: 42px;
  padding: 0 76px 0 42px; color: var(--navy); background: var(--white);
  border: 1px solid transparent; border-radius: var(--radius-sm);
}
.clarity-int-page .finder input:focus { outline: none; box-shadow: 0 0 0 3px rgba(255,255,255,0.4); }
.clarity-int-page .finder input::placeholder { color: var(--muted); }
.clarity-int-page .finder .kbd { position: absolute; right: 10px; pointer-events: none; }
.clarity-int-page .finder .kbd kbd {
  display: inline-block; min-width: 20px; padding: 2px 6px; border-radius: 4px;
  background: var(--bg-section); border: 1px solid var(--hair);
  color: var(--muted); font-size: 11px; font-weight: 700; font-family: var(--mono);
}
.clarity-int-page .finder input:not(:placeholder-shown) ~ .kbd { display: none; }

.clarity-int-page .d-results {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 80;
  background: var(--white); border: 1px solid var(--hair); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); max-height: 380px; overflow-y: auto; padding: 6px;
}
.clarity-int-page .d-result-item {
  display: flex; align-items: center; justify-content: space-between; padding: 10px 14px;
  border-radius: 8px; color: var(--navy); text-decoration: none; font-size: 14px; font-weight: 600;
}
.clarity-int-page .d-result-item:hover, .clarity-int-page .d-result-item.selected { background: var(--tint); color: var(--blue); }
.clarity-int-page .d-result-meta { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--blue); }

/* Header Switcher */
.clarity-int-page .d-switch { position: relative; flex: 0 0 auto; }
.clarity-int-page .d-all {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px;
  border-radius: 8px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18);
  color: var(--white); font-size: var(--fs-menu); font-weight: 600; cursor: pointer;
}
.clarity-int-page .d-all:hover { background: rgba(255,255,255,0.18); }
.clarity-int-page .d-all svg { width: 14px; height: 14px; }
.clarity-int-page .d-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 80;
  background: var(--white); border: 1px solid var(--hair); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); min-width: 320px; max-height: 420px; overflow-y: auto; padding: 6px;
}
.clarity-int-page .d-menu-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid var(--hair); }
.clarity-int-page .d-menu-k { font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; color: var(--blue); margin: 0; }
.clarity-int-page .d-menu-hub-link { font-size: 12px; font-weight: 700; color: var(--blue); }
.clarity-int-page .d-menu ul { list-style: none; margin: 0; padding: 4px 0; }
.clarity-int-page .d-menu a { display: flex; align-items: center; padding: 8px 12px; border-radius: 6px; color: var(--navy) !important; font-size: 13.5px; font-weight: 600; text-decoration: none !important; gap: 10px; }
.clarity-int-page .d-menu a:hover { background: var(--tint); color: var(--blue) !important; }
.clarity-int-page .d-menu a.on { background: rgba(103,156,91,0.12); color: var(--green-dark) !important; font-weight: 700; }
.clarity-int-page .d-menu-mark { width: 24px; height: 24px; display: inline-grid; place-items: center; flex: none; border-radius: 5px; overflow: hidden; background: #fff; padding: 2px; border: 1px solid var(--hair); }
.clarity-int-page .d-menu-mark svg, .clarity-int-page .d-menu-mark img { width: 100%; height: 100%; object-fit: contain; }
.clarity-int-page .d-menu-name { flex: 1; min-width: 0; }
.clarity-int-page .d-menu-badge { font-size: 11px; font-weight: 700; color: var(--muted); background: var(--bg-section); padding: 2px 6px; border-radius: 4px; flex: none; }

.clarity-int-page .progress { position: fixed; top: 70px; left: 0; right: 0; z-index: 65; height: 3px; background: transparent; }
.clarity-int-page .progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--blue), var(--green)); }

/* ------------------------------------------------------------------ */
/* Pills & Badges (11px Bold Uppercase)                                */
/* ------------------------------------------------------------------ */

.clarity-int-page .pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px;
  border-radius: var(--radius-pill); font-size: var(--fs-label); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.clarity-int-page .pill-hero {
  background: rgba(255,255,255,0.12); color: var(--white);
  border: 1px solid rgba(255,255,255,0.25);
}
.clarity-int-page .pill-blue {
  background: rgba(35,73,138,0.08); color: var(--blue);
  border: 1px solid rgba(35,73,138,0.2);
}
.clarity-int-page .pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

/* ------------------------------------------------------------------ */
/* Hero Section with Featured Integration Visual                      */
/* ------------------------------------------------------------------ */

.clarity-int-page .hub-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--navy-950) 0%, var(--navy) 60%, #173d6e 100%);
  color: var(--white); padding: 68px 0 80px;
}
.clarity-int-page .hub-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(45% 55% at 80% 20%, rgba(103,156,91,0.22), transparent 70%),
              radial-gradient(40% 50% at 20% 80%, rgba(58,109,181,0.28), transparent 70%);
  pointer-events: none;
}

.clarity-int-page .hero-layout {
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center;
  position: relative; z-index: 1;
}

.clarity-int-page .hero-content { min-width: 0; }
.clarity-int-page .hero-content h1 {
  font-size: var(--fs-display); font-weight: 800; line-height: 1.1;
  letter-spacing: -0.03em; color: var(--white) !important; margin: 18px 0 0;
}
.clarity-int-page .hero-content .hero-sub {
  font-size: var(--fs-h3); font-weight: 700; color: #A8D69B;
  letter-spacing: -0.015em; margin: 16px 0 0;
}
.clarity-int-page .hero-content .hero-lede {
  margin-top: 20px; display: grid; gap: 12px;
}
.clarity-int-page .hero-content .hero-lede p {
  margin: 0; font-size: var(--fs-body-lg); line-height: 28px;
  color: rgba(255,255,255,0.92) !important; font-weight: 400;
}

/* Featured Integration Visual Banner Card */
.clarity-int-page .hero-visual {
  position: relative; display: flex; align-items: center; justify-content: center;
}
.clarity-int-page .featured-banner-card {
  width: 100%; max-width: 440px; background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18); backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); border-radius: 20px; padding: 26px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.35); position: relative;
}
.clarity-int-page .featured-hub-header {
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,0.12); padding-bottom: 16px; margin-bottom: 20px;
}
.clarity-int-page .featured-hub-title {
  font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: #A8D69B; margin: 0;
}
.clarity-int-page .featured-status-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px;
  border-radius: var(--radius-pill); background: rgba(103,156,91,0.25);
  color: #C2E8B8; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
}
.clarity-int-page .featured-status-pill i { width: 5px; height: 5px; border-radius: 50%; background: #9BC98F; }

.clarity-int-page .featured-center-hub {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  background: var(--white); border-radius: 12px; padding: 14px 20px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25); margin-bottom: 20px;
}
.clarity-int-page .featured-center-hub .clarity-mark-svg { height: 26px; width: auto; }
.clarity-int-page .featured-sync-badge {
  font-size: 11px; font-weight: 700; color: var(--green-dark);
  background: rgba(103,156,91,0.12); padding: 3px 8px; border-radius: var(--radius-pill);
}

.clarity-int-page .featured-partners-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.clarity-int-page .featured-partner-badge {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px; padding: 12px 6px; text-align: center;
  transition: transform 0.2s, background 0.2s;
}
.clarity-int-page .featured-partner-badge:hover {
  background: rgba(255,255,255,0.16); transform: translateY(-2px);
}
.clarity-int-page .featured-partner-logo {
  width: 36px; height: 36px; border-radius: 8px; background: var(--white);
  display: grid; place-items: center; padding: 4px; box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.clarity-int-page .featured-partner-name {
  font-size: 11px; font-weight: 700; color: var(--white); line-height: 1.2;
}

/* Hero Search Control */
.clarity-int-page .hero-search-wrap { margin-top: 30px; max-width: 580px; }
.clarity-int-page .hero-search-box {
  display: flex; align-items: center; background: var(--white);
  border-radius: var(--radius-sm); box-shadow: 0 8px 30px rgba(0,0,0,0.25);
  padding: 4px 16px; gap: 12px;
}
.clarity-int-page .hero-search-box svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.clarity-int-page .hero-search-box input {
  width: 100%; height: 46px; border: none; font-family: var(--sans);
  font-size: var(--fs-body-md); font-weight: 500; color: var(--navy); background: transparent;
}
.clarity-int-page .hero-search-box input:focus { outline: none; }
.clarity-int-page .hero-search-box input::placeholder { color: var(--muted); }
.clarity-int-page .hero-search-box .kbd-hint kbd {
  min-width: 20px; padding: 2px 6px; border-radius: 4px;
  background: var(--bg-section); border: 1px solid var(--hair);
  color: var(--muted); font-size: 11px; font-weight: 700; font-family: var(--mono);
}
.search-clear-btn { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 0; background: var(--bg-section); cursor: pointer; }
.search-clear-btn svg { width: 12px; height: 12px; color: var(--muted); }

/* Category Pills */
.clarity-int-page .hub-filter-pills { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.clarity-int-page .filter-pill,
.clarity-int-page .filter-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px;
  border-radius: var(--radius-pill) !important; background: rgba(255,255,255,0.1) !important;
  border: 1px solid rgba(255,255,255,0.2) !important; color: var(--white) !important;
  font-size: 12px; font-weight: 700; cursor: pointer; text-decoration: none !important;
  outline: none !important; box-shadow: none !important;
}
.clarity-int-page .filter-pill:hover,
.clarity-int-page .filter-pill:hover {
  background: rgba(255,255,255,0.2) !important; color: var(--white) !important;
  border-color: rgba(255,255,255,0.4) !important;
}
.clarity-int-page .filter-pill.active,
.clarity-int-page .filter-pill.active {
  background: var(--white) !important; color: var(--navy) !important;
  border-color: var(--white) !important; box-shadow: 0 4px 14px rgba(0,0,0,0.18) !important;
}
.clarity-int-page .filter-pill .filter-count,
.clarity-int-page .filter-pill .filter-count {
  font-size: 10px; padding: 1px 6px; border-radius: var(--radius-pill) !important;
  background: rgba(0,36,71,0.25) !important; color: var(--white) !important; font-weight: 800;
}
.clarity-int-page .filter-pill.active .filter-count,
.clarity-int-page .filter-pill.active .filter-count {
  background: rgba(35,73,138,0.14) !important; color: var(--blue) !important;
}

/* ------------------------------------------------------------------ */
/* Sections & Typography                                              */
/* ------------------------------------------------------------------ */

.clarity-int-page .sec { padding: 64px 0; }
.clarity-int-page .sec-white { background: var(--white); }
.clarity-int-page .sec-tint { background: var(--bg-section); }
.clarity-int-page .sec-h {
  font-size: var(--fs-h2); font-weight: 700; color: var(--blue);
  line-height: 1.2; letter-spacing: -0.02em; margin: 0;
}
.clarity-int-page .sec-sub {
  font-size: var(--fs-body-md); color: var(--black); line-height: 26px;
  margin: 8px 0 0; max-width: 60ch;
}
.clarity-int-page .sec-head-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 28px; gap: 20px;
}
.clarity-int-page .results-badge {
  font-size: var(--fs-body-sm); font-weight: 600; color: var(--muted);
  background: var(--white); border: 1px solid var(--hair); padding: 4px 12px; border-radius: var(--radius-pill);
}

/* ------------------------------------------------------------------ */
/* Directory Grid & Cards                                             */
/* ------------------------------------------------------------------ */

.clarity-int-page .hub-grid {
  /* min() so the track can never demand more than the container: at 390px
     a bare minmax(350px,1fr) produced a 350px column in a 342px box */
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(350px, 100%), 1fr)); gap: 20px;
}
.clarity-int-page .hub-card {
  display: flex; flex-direction: column; background: var(--white);
  border: 1px solid var(--hair); border-radius: var(--radius-sm);
  padding: 24px; box-shadow: var(--shadow-sm); cursor: pointer;
  text-decoration: none; transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s;
}
.clarity-int-page .hub-card:hover {
  transform: translateY(-3px); box-shadow: var(--shadow-md);
  border-color: rgba(35,73,138,0.4); text-decoration: none;
}
.clarity-int-page .hub-card-top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
}
.clarity-int-page .hub-card-mark {
  display: grid; place-items: center; width: 54px; height: 54px;
  border-radius: 10px; background: var(--white); border: 1px solid var(--hair);
  padding: 6px; flex: none; box-shadow: var(--shadow-card);
}
.clarity-int-page .hub-card-mark svg, .clarity-int-page .hub-card-mark img { width: 100%; height: 100%; object-fit: contain; }
.clarity-int-page .hub-monogram { font-size: 18px; font-weight: 800; color: var(--navy); }

.clarity-int-page .hub-card-badges { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.clarity-int-page .badge {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px;
  font-weight: 700; padding: 3px 8px; border-radius: 6px;
}
.clarity-int-page .badge-steps {
  background: rgba(35,73,138,0.06); color: var(--blue); border: 1px solid rgba(35,73,138,0.15);
}
.clarity-int-page .badge-time { background: var(--bg-section); color: var(--muted); }
.clarity-int-page .badge svg { width: 12px; height: 12px; }

.clarity-int-page .hub-card-body { margin-top: 16px; flex: 1; }
.clarity-int-page .hub-card-title {
  font-size: var(--fs-h3); font-weight: 700; color: var(--blue);
  margin: 0; line-height: 1.25; letter-spacing: -0.015em;
}
.clarity-int-page .hub-card-desc {
  font-size: 14px; line-height: 22px; color: var(--black); margin: 8px 0 0;
}
.clarity-int-page .hub-card-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--hair);
}
.clarity-int-page .hub-card-link-text { font-size: 13.5px; font-weight: 700; color: var(--blue); }
.clarity-int-page .hub-card-arrow { width: 16px; height: 16px; color: var(--blue); transition: transform 0.2s; }
.clarity-int-page .hub-card:hover .hub-card-arrow { transform: translateX(4px); }

.clarity-int-page .hub-empty-state {
  text-align: center; padding: 48px 20px; background: var(--white);
  border: 1px dashed var(--hair); border-radius: var(--radius-sm);
}

/* ------------------------------------------------------------------ */
/* Connected 3-Step Workflow Section                                  */
/* ------------------------------------------------------------------ */

.workflow-timeline {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px;
}
.workflow-step { display: flex; flex-direction: column; }
.clarity-int-page .step-badge-wrap { display: flex; align-items: center; margin-bottom: 14px; }
.clarity-int-page .step-num {
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 10px; background: var(--navy); color: var(--white);
  font-size: var(--fs-h3); font-weight: 800; font-variant-numeric: tabular-nums; flex: none;
}
.clarity-int-page .step-connector {
  flex: 1; height: 2px; background: repeating-linear-gradient(90deg, var(--blue-mid), var(--blue-mid) 6px, transparent 6px, transparent 12px);
  margin-left: 10px;
}
.clarity-int-page .step-card {
  background: var(--white); border: 1px solid var(--hair); border-radius: var(--radius-sm);
  padding: 24px; box-shadow: var(--shadow-sm); flex: 1;
}
.clarity-int-page .step-card .step-title {
  font-size: var(--fs-h3); font-weight: 700; color: var(--blue); margin: 0;
  letter-spacing: -0.015em;
}
.clarity-int-page .step-card .step-desc {
  font-size: var(--fs-body-md); line-height: 26px; color: var(--black); margin: 10px 0 0;
}

/* ------------------------------------------------------------------ */
/* Why Connect Grid                                                   */
/* ------------------------------------------------------------------ */

.clarity-int-page .sec-why { background: var(--bg-section); padding: 68px 0; }
.clarity-int-page .sec-head-center { text-align: center; max-width: 680px; margin: 0 auto 36px; }
.clarity-int-page .why-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px;
}
.clarity-int-page .why-card {
  background: var(--white); border: 1px solid var(--hair); border-radius: var(--radius-sm);
  padding: 24px; box-shadow: var(--shadow-sm);
}
.clarity-int-page .why-title {
  font-size: var(--fs-h3); font-weight: 700; color: var(--blue); margin: 0;
  letter-spacing: -0.015em;
}
.clarity-int-page .why-desc {
  font-size: var(--fs-body-md); line-height: 26px; color: var(--black); margin: 10px 0 0;
}

/* ------------------------------------------------------------------ */
/* Support Assistance Card                                            */
/* ------------------------------------------------------------------ */

.clarity-int-page .sec-support { padding: 56px 0; }
.clarity-int-page .support-card {
  background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 100%);
  border-radius: var(--radius); padding: 36px 40px; color: var(--white);
  box-shadow: var(--shadow-lg);
}
.support-title,
body.clarity-int-page .support-title,
.elementor .clarity-int-page .support-title {
  font-size: var(--fs-h2); font-weight: 700; color: var(--white); margin: 0;
  letter-spacing: -0.02em;
}
.clarity-int-page .support-text {
  font-size: var(--fs-body-lg); line-height: 28px; color: rgba(255,255,255,0.92);
  margin: 14px 0 0; max-width: 64ch;
}

/* Closer */
.closer {
  padding: 48px 0; text-align: center; background: var(--navy-dark); color: var(--white);
}
.closer h2,
body.clarity-int-page .closer h2,
.elementor .clarity-int-page .closer h2 {
  font-size: var(--fs-h2); font-weight: 700; color: var(--white); margin: 0;
  letter-spacing: -0.02em;
}

/* ------------------------------------------------------------------ */
/* Single Guide Document Layout                                       */
/* ------------------------------------------------------------------ */

.clarity-int-page .d-banner {
  background: linear-gradient(120deg, var(--navy-dark) 0%, var(--navy) 65%, #10406E 100%);
  color: var(--white); padding: 36px 0 40px;
}
.clarity-int-page .d-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 20px; }
.d-breadcrumb,
.d-breadcrumb a,
.d-breadcrumb a:visited,
.d-breadcrumb a span,
.d-breadcrumb a:hover,
.d-breadcrumb a:focus,
.d-breadcrumb a svg,
.d-breadcrumb svg,
.d-crumb-sep,
.clarity-int-page .d-crumb-current {
  color: #ffffff !important;
  stroke: #ffffff !important;
}
.clarity-int-page .d-breadcrumb a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  opacity: 0.92 !important;
}
.clarity-int-page .d-breadcrumb a:hover {
  opacity: 1 !important;
  text-decoration: underline !important;
}
.d-breadcrumb a svg,
.clarity-int-page .d-breadcrumb svg {
  width: 16px !important; height: 16px !important; min-width: 16px !important; max-width: 16px !important; flex: none !important;
}
.clarity-int-page .d-back-btn {
  display: inline-flex; align-items: center; gap: 6px; background: transparent;
  border: 0; color: #ffffff !important; font-weight: 600; cursor: pointer; padding: 0;
}
.clarity-int-page .d-back-btn:hover { color: #ffffff !important; text-decoration: underline; }
.clarity-int-page .d-back-btn svg { width: 14px !important; height: 14px !important; color: #ffffff !important; stroke: #ffffff !important; }
.clarity-int-page .d-crumb-sep { color: rgba(255,255,255,0.6) !important; margin: 0 2px; }
.clarity-int-page .d-crumb-current { color: #ffffff !important; font-weight: 700 !important; }


.clarity-int-page .d-banner-in { display: flex; align-items: center; gap: 24px; }
.clarity-int-page .d-banner-mark {
  display: grid; place-items: center; width: 80px; height: 80px;
  border-radius: 16px; background: var(--white); padding: 8px; flex: none;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25); overflow: hidden;
}
.clarity-int-page .d-banner-mark svg, .clarity-int-page .d-banner-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.provider-custom-logo { width: 100% !important; height: 100% !important; object-fit: contain !important; display: block; }
.clarity-int-page .d-banner-monogram { font-size: 32px; font-weight: 800; color: var(--navy); }
.clarity-int-page .d-banner-txt { flex: 1; min-width: 0; }

.clarity-int-page .doc-h1,
.clarity-int-page .d-banner h1,
.clarity-int-page .d-banner .doc-h1,
.clarity-int-page h1.doc-h1,
body.clarity-int-page h1.doc-h1,
.elementor .clarity-int-page h1.doc-h1 {
  font-size: 38px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1.15 !important;
  letter-spacing: -0.025em !important;
  margin: 10px 0 0 !important;
}
.clarity-int-page .doc-meta {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  margin-top: 12px !important;
  font-size: 13px !important;
  color: rgba(255,255,255,0.85) !important;
}
.clarity-int-page .doc-meta-i {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(255,255,255,0.1) !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}
.clarity-int-page .doc-meta-i svg {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  max-width: 14px !important;
  color: #A8D69B !important;
  stroke: #A8D69B !important;
}

.clarity-int-page .d-lede-box {
  margin-top: 28px !important;
  padding: 18px 22px !important;
  background: #ffffff !important;
  border: 1px solid var(--hair) !important;
  border-left: 4px solid var(--blue) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-sm) !important;
}
.clarity-int-page .d-lede {
  font-size: var(--fs-body-lg) !important;
  line-height: 28px !important;
  color: var(--black) !important;
  margin: 0 !important;
  font-weight: 400 !important;
}

/* 2-Column Guide Layout */
.clarity-int-page .d-body {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 264px !important;
  gap: 40px !important;
  align-items: start !important;
  margin-top: 28px !important;
  padding-bottom: 72px !important;
}
.clarity-int-page .d-main { min-width: 0 !important; }

/* No contents rail on this page (an FAQ has no steps to build one from),
   so collapse the reserved track rather than leaving a gap beside the
   content. :has() is already relied on elsewhere in this file. */
.clarity-int-page .d-body:not(:has(.d-toc)) {
  grid-template-columns: minmax(0, 1fr) !important;
}
.clarity-int-page .d-body:not(:has(.d-toc)) .d-main {
  max-width: 880px;
  margin-inline: auto;
  width: 100%;
}


/* Sticky Table of Contents Rail */
.clarity-int-page .d-toc {
  position: sticky !important;
  top: 90px !important;
  background: #ffffff !important;
  border: 1px solid var(--hair) !important;
  border-radius: var(--radius-sm) !important;
  padding: 20px !important;
  box-shadow: var(--shadow-sm) !important;
}
.clarity-int-page .d-toc-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid var(--hair) !important;
  margin-bottom: 10px !important;
}
.clarity-int-page .d-toc-header svg {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  max-width: 14px !important;
  color: var(--blue) !important;
  stroke: var(--blue) !important;
}
.clarity-int-page .d-toc-k {
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--blue) !important;
  margin: 0 !important;
}
.clarity-int-page .d-toc nav {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  max-height: calc(100vh - 220px) !important;
  overflow-y: auto !important;
}
.clarity-int-page .d-toc a {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 8px 9px !important;
  border-radius: 6px !important;
  font-size: 14.5px !important;
  color: var(--blue) !important;
  text-decoration: none !important;
  line-height: 1.45 !important;
  transition: background 0.2s, color 0.2s !important;
}
.clarity-int-page .d-toc-dot {
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: var(--blue-lt) !important;
  flex: none !important;
}
.clarity-int-page .d-toc a:hover {
  background: var(--tint) !important;
  color: var(--navy) !important;
}
.clarity-int-page .d-toc a.on {
  background: rgba(103,156,91,0.12) !important;
  color: var(--navy) !important;
  font-weight: 700 !important;
}
.clarity-int-page .d-toc a.on .d-toc-dot {
  background: var(--green) !important;
  transform: scale(1.3) !important;
}
.clarity-int-page .d-toc-footer {
  margin-top: 12px !important;
  padding-top: 10px !important;
  border-top: 1px solid var(--hair) !important;
}
.clarity-int-page .d-back-to-top {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--muted) !important;
  text-decoration: none !important;
}
.clarity-int-page .d-back-to-top svg {
  width: 12px !important;
  height: 12px !important;
  min-width: 12px !important;
  max-width: 12px !important;
}

/* ------------------------------------------------------------------ */
/* Guide Steps & Block Content Hierarchy                             */
/* ------------------------------------------------------------------ */

.clarity-int-page .step-group {
  margin-top: 48px !important;
}
.clarity-int-page .step-group:first-child,
.clarity-int-page .step-group:first-of-type {
  margin-top: 28px !important;
}

/* Step Header Card (Compact title bar, exactly matching prototype) */
.clarity-int-page .step {
  display: flex !important;
  gap: 16px !important;
  align-items: flex-start !important;
  margin: 0 !important;
  padding: 20px 22px !important;
  background: #ffffff !important;
  border: 1px solid var(--hair) !important;
  border-left: 4px solid var(--green) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-sm) !important;
  scroll-margin-top: 96px !important;
}
.clarity-int-page .step-n {
  display: grid !important;
  place-items: center !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  border-radius: 10px !important;
  background: var(--navy) !important;
  color: #ffffff !important;
  font-size: var(--fs-h4) !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
  flex: none !important;
  line-height: 1 !important;
}
.clarity-int-page .step-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.clarity-int-page .step-b {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
/* Extra .step-b ancestor qualifier: the generic ".d-main h2" content-heading
   rule below (used for real h2/h3 blocks an editor adds inside a step's
   body) has the same specificity family and comes later in the file, so
   without this the step title picked up its 32px top margin and sat
   noticeably lower than the number badge beside it. */
.clarity-int-page .step-b .step-t {
  font-size: var(--fs-h3) !important;
  font-weight: 700 !important;
  color: var(--blue) !important;
  letter-spacing: -0.015em !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}
.clarity-int-page .step-s {
  font-size: var(--fs-body-md) !important;
  color: var(--muted) !important;
  margin: 6px 0 0 !important;
  line-height: 24px !important;
}

/* Step Body Content - Unconstrained layout below the step card */
.clarity-int-page .step-body-content {
  margin-top: 20px !important;
  padding: 0 !important;
}
.clarity-int-page .step-body-content > * + * {
  margin-top: 20px !important;
}

/* Typography resets inside Step Body Content & Guide Main */
.clarity-int-page .d-main p,
.clarity-int-page .step-body-content p {
  margin: 0 !important;
  font-size: var(--fs-body-md) !important;
  line-height: 26px !important;
  color: var(--black) !important;
  max-width: 68ch !important;
}
.clarity-int-page .d-main ul,
.clarity-int-page .d-main ol,
.clarity-int-page .step-body-content ul,
.clarity-int-page .step-body-content ol {
  margin: 0 !important;
  padding-left: 0 !important;
  list-style: none !important;
  max-width: 68ch !important;
}
.clarity-int-page .d-main li + li,
.clarity-int-page .step-body-content li + li {
  margin-top: 6px !important;
}
.clarity-int-page .d-main ul > li,
.clarity-int-page .step-body-content ul > li {
  position: relative !important;
  padding-left: 22px !important;
  font-size: var(--fs-body-md) !important;
  line-height: 26px !important;
  color: var(--black) !important;
}
.clarity-int-page .d-main ul > li::before,
.clarity-int-page .step-body-content ul > li::before {
  content: "" !important;
  position: absolute !important;
  left: 4px !important;
  top: 10px !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--green) !important;
}
.clarity-int-page .d-main ol,
.clarity-int-page .step-body-content ol {
  counter-reset: n !important;
}
.clarity-int-page .d-main ol > li,
.clarity-int-page .step-body-content ol > li {
  counter-increment: n !important;
  position: relative !important;
  padding-left: 28px !important;
  font-size: var(--fs-body-md) !important;
  line-height: 26px !important;
  color: var(--black) !important;
}
.clarity-int-page .d-main ol > li::before,
.clarity-int-page .step-body-content ol > li::before {
  content: counter(n) "." !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 20px !important;
  font-weight: 700 !important;
  color: var(--blue) !important;
}
.clarity-int-page .d-main h2,
.clarity-int-page .d-main h3,
.clarity-int-page .step-body-content h2,
.clarity-int-page .step-body-content h3 {
  font-size: var(--fs-h3) !important;
  font-weight: 700 !important;
  color: var(--blue) !important;
  margin: 32px 0 0 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.015em !important;
}
.clarity-int-page .d-main h4,
.clarity-int-page .step-body-content h4 {
  font-size: var(--fs-h4) !important;
  font-weight: 700 !important;
  color: var(--blue) !important;
  margin: 20px 0 0 !important;
  line-height: 1.3 !important;
}
.clarity-int-page .d-main strong,
.clarity-int-page .step-body-content strong {
  font-weight: 700 !important;
  color: var(--navy) !important;
}

/* In-Product Pathline */
.clarity-int-page .pathline {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  font-family: var(--mono) !important;
  font-size: var(--fs-body-sm) !important;
  font-weight: 500 !important;
  background: #ffffff !important;
  border: 1px solid var(--hair) !important;
  border-left: 4px solid var(--blue-lt) !important;
  border-radius: var(--radius-sm) !important;
  padding: 14px 18px !important;
  color: var(--navy) !important;
  margin: 16px 0 !important;
}
.clarity-int-page .pathline i {
  color: var(--blue-mid) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  margin: 0 2px !important;
}
.clarity-int-page .pathline span {
  color: var(--navy) !important;
}

/* Code Blocks */
.clarity-int-page .codeblock {
  position: relative !important;
  margin: 16px 0 !important;
}
.clarity-int-page .codeblock pre {
  margin: 0 !important;
  background: var(--navy-dark) !important;
  border-radius: var(--radius-sm) !important;
  padding: 16px 18px !important;
  padding-right: 90px !important;
  overflow-x: auto !important;
}
.clarity-int-page .codeblock code {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  font-family: var(--mono) !important;
  font-size: var(--fs-body-sm) !important;
  line-height: 1.6 !important;
  color: #DCE6F2 !important;
}
.clarity-int-page .copy {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  /* wide enough for COPIED! so the pill never changes size */
  min-width: 92px !important;
  padding: 5px 10px !important;
  border-radius: 6px !important;
  background: rgba(255,255,255,0.1) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  font-size: var(--fs-label) !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background 0.15s, border-color 0.15s, color 0.15s !important;
}
/* Named is-copied, not done: .done is the "You're Connected" success
   panel, whose !important display/padding/border-radius/margin turned
   this little button into a large bubble hanging outside the code
   block. Same specificity, declared later, so it won. */
.clarity-int-page .copy.is-copied {
  /* A soft tint in the same translucent style as the default button,
     not a solid saturated block — confirms the copy without the pill
     visually jumping out as a big green bar. min-width above also keeps
     the button's footprint stable so "Copy" → "Copied!" doesn't grow it. */
  background: rgba(103,156,91,0.22) !important;
  border-color: rgba(103,156,91,0.55) !important;
  color: #e3f3df !important;
}
.clarity-int-page .copy svg {
  width: 12px !important;
  height: 12px !important;
}

/* Callout Notes */
.clarity-int-page .note {
  background: #ffffff !important;
  border: 1px solid var(--hair) !important;
  border-left: 4px solid var(--blue-lt) !important;
  border-radius: var(--radius-sm) !important;
  padding: 16px 20px !important;
  margin: 20px 0 !important;
  max-width: 68ch !important;
}
.clarity-int-page .note-t {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: var(--fs-label) !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--blue-mid) !important;
  margin: 0 !important;
  line-height: 1 !important;
}
.clarity-int-page .note-t svg {
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  max-width: 15px !important;
  flex: none !important;
  display: block !important;
}
.clarity-int-page .note-b {
  font-size: var(--fs-body-md) !important;
  color: var(--black) !important;
  margin-top: 8px !important;
  line-height: 24px !important;
}
.clarity-int-page .note.info {
  border-left-color: var(--blue) !important;
  background: var(--tint) !important;
}
.clarity-int-page .note.info .note-t {
  color: var(--blue) !important;
}
.clarity-int-page .note.warn {
  border: 2px solid var(--navy) !important;
  border-left-width: 5px !important;
  background: var(--tint) !important;
}
.clarity-int-page .note.warn .note-t {
  color: var(--navy) !important;
}
.clarity-int-page .note.warn .note-b {
  font-weight: 500 !important;
}
.clarity-int-page .note.tip {
  border-left-color: var(--blue-mid) !important;
  background: rgba(103,156,91,0.06) !important;
}
.clarity-int-page .note.tip .note-t {
  color: var(--blue-mid) !important;
}
.clarity-int-page .note.secure {
  border-left-color: var(--green) !important;
  background: rgba(103,156,91,0.06) !important;
}
.clarity-int-page .note.secure .note-t {
  color: var(--green-dark) !important;
}
.clarity-int-page .note.next {
  border-left-color: var(--blue-mid) !important;
}

/* Screenshot Figures & Button Reset */
.clarity-int-page figure {
  margin: 28px 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}
.clarity-int-page button.shot,
.clarity-int-page .shot,
body.clarity-int-page button.shot,
.elementor .clarity-int-page button.shot {
  all: unset !important;
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 680px !important;
  margin: 0 auto !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid var(--hair) !important;
  border-radius: var(--radius-sm) !important;
  padding: 10px !important;
  box-shadow: var(--shadow-md) !important;
  cursor: zoom-in !important;
  text-align: center !important;
  line-height: normal !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
}
.clarity-int-page button.shot:hover,
.clarity-int-page .shot:hover,
body.clarity-int-page button.shot:hover {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-color: var(--blue) !important;
  box-shadow: var(--shadow-lg) !important;
  transform: translateY(-2px) !important;
}
.clarity-int-page .shot .shot-img-wrap {
  display: block !important;
  width: 100% !important;
  position: relative !important;
}
.clarity-int-page .shot img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: 480px !important;
  object-fit: contain !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  margin: 0 auto !important;
}
.clarity-int-page .shots {
  width: 100% !important;
  display: grid !important;
  gap: 14px !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  align-items: start !important;
}
.clarity-int-page .shots .shot {
  max-width: none !important;
}
.clarity-int-page figcaption {
  font-size: var(--fs-body-sm) !important;
  color: var(--muted) !important;
  margin-top: 10px !important;
  text-align: center !important;
  line-height: 20px !important;
  max-width: 62ch !important;
}

/* Done Panel (Success) */
.clarity-int-page .done {
  display: block !important;
  background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 100%) !important;
  border-radius: var(--radius) !important;
  padding: 32px 34px !important;
  color: #ffffff !important;
  box-shadow: var(--shadow-lg) !important;
  margin-top: 48px !important;
  scroll-margin-top: 96px !important;
}
.clarity-int-page .done-h {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.clarity-int-page .done-h svg {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  color: #9BC98F !important;
  stroke: #9BC98F !important;
  flex: none !important;
}
.clarity-int-page .done-t {
  font-size: var(--fs-h2) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
  color: #ffffff !important;
  margin: 0 !important;
}
.clarity-int-page .done-b {
  font-size: var(--fs-body-lg) !important;
  line-height: 30px !important;
  color: rgba(255,255,255,0.92) !important;
  margin-top: 10px !important;
  max-width: 56ch !important;
}

/* Checklist Card (.check) */
.clarity-int-page .check {
  margin: 44px 0 0 !important;
  border: 1px solid var(--hair) !important;
  border-radius: var(--radius) !important;
  background: #ffffff !important;
  padding: 24px 26px !important;
  box-shadow: var(--shadow-sm) !important;
}
.clarity-int-page .check-t {
  font-size: var(--fs-label) !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--blue-mid) !important;
}
.clarity-int-page .check ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 16px 0 0 !important;
  max-width: 62ch !important;
}
.clarity-int-page .step-body-content .check ul > li,
.clarity-int-page .step-body-content .check li,
.clarity-int-page .d-main .check ul > li,
.clarity-int-page .d-main .check li,
.clarity-int-page .check ul > li,
.clarity-int-page .check li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  font-size: var(--fs-body-md) !important;
  color: var(--black) !important;
  padding: 0 !important;
  padding-left: 0 !important;
  position: static !important;
}
.clarity-int-page .step-body-content .check ul > li::before,
.clarity-int-page .step-body-content .check li::before,
.clarity-int-page .d-main .check ul > li::before,
.clarity-int-page .d-main .check li::before,
.clarity-int-page .check ul > li::before,
.clarity-int-page .check li::before {
  content: none !important;
  display: none !important;
}
.clarity-int-page .check li + li {
  margin-top: 12px !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--hair) !important;
}
.clarity-int-page .check .tick {
  display: grid !important;
  place-items: center !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 6px !important;
  background: rgba(103,156,91,.12) !important;
  color: var(--green) !important;
  flex: none !important;
}
.clarity-int-page .check .tick svg {
  width: 14px !important;
  height: 14px !important;
  stroke: var(--green) !important;
}

/* Guide Footer Navigation */
.clarity-int-page .guide-footer-nav {
  margin-top: 48px !important;
  padding-top: 32px !important;
  border-top: 1px solid var(--hair) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}
.clarity-int-page .next-guide-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  background: #ffffff !important;
  border: 1px solid var(--hair) !important;
  border-radius: var(--radius-sm) !important;
  padding: 22px 26px !important;
  box-shadow: var(--shadow-sm) !important;
}
.clarity-int-page .next-label {
  display: block !important;
  font-size: var(--fs-label) !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--blue-mid) !important;
  margin-bottom: 4px !important;
}
.clarity-int-page .next-title {
  font-size: var(--fs-h3) !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  margin: 0 !important;
}
.clarity-int-page .next-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 18px !important;
  background: var(--tint) !important;
  border: 1px solid var(--hair) !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--blue) !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  flex: none !important;
}
.clarity-int-page .next-btn:hover {
  background: var(--blue) !important;
  color: #ffffff !important;
  border-color: var(--blue) !important;
}
.clarity-int-page .next-btn:hover svg {
  stroke: #ffffff !important;
}
.clarity-int-page .next-btn svg,
.clarity-int-page .next-btn-arrow {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  flex: none !important;
  stroke: var(--blue) !important;
}

/* Guide Help Card */
.clarity-int-page .guide-help-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  background: linear-gradient(135deg, var(--navy-950) 0%, var(--navy) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: var(--radius-sm) !important;
  padding: 22px 26px !important;
  box-shadow: var(--shadow-md) !important;
  margin-top: 0 !important;
}
.clarity-int-page .guide-help-icon {
  display: grid !important;
  place-items: center !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.14) !important;
  color: #FFFFFF !important;
  flex: none !important;
}
.clarity-int-page .guide-help-icon svg {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  display: block !important;
  stroke: #FFFFFF !important;
  color: #FFFFFF !important;
}
.clarity-int-page .guide-help-txt { flex: 1 !important; min-width: 0 !important; }
.clarity-int-page .guide-help-txt h4 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  margin: 0 0 6px !important;
}
.clarity-int-page .guide-help-txt p {
  font-size: 14px !important;
  line-height: 22px !important;
  color: rgba(255, 255, 255, 0.9) !important;
  margin: 0 !important;
}
.clarity-int-page .btn-support-sm {
  display: inline-flex !important;
  align-items: center !important;
  padding: 10px 20px !important;
  background: #FFFFFF !important;
  color: var(--navy) !important;
  border-radius: 8px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  flex: none !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18) !important;
  transition: all 0.18s var(--ease) !important;
}
.clarity-int-page .btn-support-sm span {
  color: var(--navy) !important;
}
.clarity-int-page .btn-support-sm:hover {
  background: #F0F4F8 !important;
  color: var(--navy-dark) !important;
  transform: translateY(-1px) !important;
}
.clarity-int-page .btn-support-sm:hover span {
  color: var(--navy-dark) !important;
}
.clarity-int-page .d-back-to-top svg { width: 14px !important; height: 14px !important; min-width: 14px !important; max-width: 14px !important; flex: none !important; }
.clarity-int-page .doc-meta-i svg { width: 14px !important; height: 14px !important; min-width: 14px !important; max-width: 14px !important; flex: none !important; }
.clarity-int-page .d-toc-header svg { width: 15px !important; height: 15px !important; min-width: 15px !important; max-width: 15px !important; flex: none !important; }
.clarity-int-page .badge svg { width: 12px !important; height: 12px !important; min-width: 12px !important; max-width: 12px !important; flex: none !important; }
.clarity-int-page .hub-card-arrow { width: 16px !important; height: 16px !important; min-width: 16px !important; max-width: 16px !important; flex: none !important; }
.search-icon { width: 18px !important; height: 18px !important; min-width: 18px !important; max-width: 18px !important; flex: none !important; }
.clarity-int-page .shot-zoom-badge svg { width: 14px !important; height: 14px !important; min-width: 14px !important; max-width: 14px !important; flex: none !important; }
.clarity-int-page .done-icon-wrap svg { width: 28px !important; height: 28px !important; min-width: 28px !important; max-width: 28px !important; flex: none !important; }

/* Lightbox Modal */
dialog.lb {
  position: fixed; inset: 0; margin: auto; width: fit-content; height: fit-content;
  padding: 0; border: 0; background: transparent; max-width: min(1180px, 94vw);
  max-height: 94vh; overflow: visible;
}
dialog.lb::backdrop { background: rgba(0,27,51,0.85); backdrop-filter: blur(4px); }
dialog.lb img {
  display: block; width: 100%; height: auto; max-height: 86vh; object-fit: contain;
  background: var(--white); border-radius: var(--radius-sm); box-shadow: 0 40px 90px rgba(0,0,0,0.5);
}
/* Sits on the image it closes, not in the corner of the screen.
   `fixed` put it up to ~390px away from the image edge, which read as
   an unrelated floating button. The dialog is fixed and centred with
   width:fit-content, so absolute here pins it to the image corner and
   it can never leave the viewport.

   padding:0 is not optional: the theme sets .5rem 1rem on every
   button, which left a 12x28 content box for a 20px icon and squashed
   the cross off-centre inside the circle. */
.clarity-int-page dialog.lb .lb-x {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 2;
  display: grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  padding: 0 !important;
  border: 1px solid rgba(0,49,90,0.12) !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.94) !important;
  color: var(--navy) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.28) !important;
  cursor: pointer;
}
.clarity-int-page dialog.lb .lb-x svg { width: 18px !important; height: 18px !important; display: block; }

/* Responsive */
@media (max-width: 980px) {
  .clarity-int-page .hero-layout { grid-template-columns: 1fr; gap: 36px; }
  .clarity-int-page .workflow-timeline { grid-template-columns: 1fr; }
  .clarity-int-page .step-connector { display: none; }
  /* These two must match (or beat) the base rules' specificity+!important
     above (.clarity-int-page .d-body / .d-toc), or the desktop 2-column
     grid and sticky sidebar never actually collapse on mobile — the bug
     that squeezed step text into a ~60px column and wrapped it one word
     per line. */
  .clarity-int-page .d-body { grid-template-columns: 1fr !important; }
  /* TOC first on mobile/tablet, not after all the step content — order is a
     grid item property here just like flex, so no markup change needed. */
  .clarity-int-page .d-toc {
    position: static !important;
    top: auto !important;
    order: 1 !important;
    margin-bottom: 8px !important;
  }
  .clarity-int-page .d-main { order: 2 !important; }
}

@media (max-width: 720px) {
  :root { --fs-display: 34px; --fs-h1: 28px; --fs-h2: 24px; --fs-h3: 20px; --fs-h4: 17px; --fs-body-lg: 17px; }
  .clarity-int-page .d-head-in { height: auto; padding: 12px 16px; flex-wrap: wrap; gap: 10px; }

  /* The "Integrations Hub" text badge is redundant with the logo (which
     already links to the hub) and left no room for anything else on a
     phone-width header — hide it and let the All Guides switcher take its
     place on the brand row instead of falling to its own separate row. */
  .clarity-int-page .d-hub-badge { display: none !important; }
  .clarity-int-page .d-brand-nav { order: 1; }
  .clarity-int-page .d-switch { order: 2; margin-left: auto; }
  .clarity-int-page .finder { order: 3; flex-basis: 100%; max-width: none; }

  /* The dropdown panel itself was positioned absolutely against the small
     trigger button (right:0, min-width:320px) — fine when that button sits
     at the far right of a wide header, but once it moves next to the logo
     on mobile that math puts most of a 320px panel off the left edge of a
     390px viewport. JS (wireProviderSwitcher) sets explicit fixed
     left/right/top values before opening at this width; these just make
     sure nothing here still constrains it to the old absolute box. */
  .clarity-int-page .d-menu {
    min-width: 0 !important;
    width: auto !important;
  }

  .clarity-int-page .step { padding: 16px; gap: 12px; }
  .clarity-int-page .support-card { padding: 24px 20px; }
}
/* The search empty state was the one heading in the plugin with no class,
   so it inherited the theme h3 size instead of the Clarity scale. */
.clarity-int-page .empty-title {
  font-size: var(--fs-h3) !important;
  font-weight: 700 !important;
  color: var(--blue) !important;
  line-height: 1.25 !important;
  margin: 0 !important;
}

/* ------------------------------------------------------------------ */
/* Built-in site footer                                               */
/* Matched to .d-head: same navy, same 1240px measure, same logo       */
/* treatment, so the page is bracketed by one design rather than two.  */
/* ------------------------------------------------------------------ */

/* The page already ends on a full-width dark band, so the footer follows it
   directly and the 3px rule becomes the join. */
.clarity-int-page main:has(> .closer:last-child) + .d-foot {
  margin-top: 0;
}
.clarity-int-page .d-foot {
  background: var(--navy-dark);
  color: #ffffff;
  margin-top: 64px;
  border-top: 3px solid var(--blue);
}
.clarity-int-page .d-foot-in {
  max-width: 1240px;
  margin: 0 auto;
  padding: 44px 28px 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: flex-start;
  justify-content: space-between;
}
.clarity-int-page .d-foot-brand {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 380px;
}
/* The mark is a dark-on-light wordmark, so it is inverted here exactly as
   it is in the header. */
.clarity-int-page .d-foot .logo { display: flex; align-items: center; height: 26px; }
.clarity-int-page .d-foot .logo svg { display: block; height: 100%; width: auto; }
.clarity-int-page .d-foot .logo.on-navy { filter: brightness(0) invert(1); }
.clarity-int-page .d-foot-tag {
  margin: 0;
  font-size: 14px;
  line-height: 22px;
  color: rgba(255, 255, 255, 0.66);
}
.clarity-int-page .d-foot-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  align-items: center;
}
.clarity-int-page .d-foot-nav a {
  color: #ffffff !important;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.clarity-int-page .d-foot-nav a:hover,
.clarity-int-page .d-foot-nav a:focus-visible {
  color: #ffffff !important;
  border-bottom-color: rgba(255, 255, 255, 0.6);
}
.clarity-int-page .d-foot-legal {
  max-width: 1240px;
  margin: 0 auto;
  padding: 16px 28px 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  align-items: center;
  justify-content: space-between;
}
.clarity-int-page .d-foot-legal p {
  margin: 0;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.52);
}
.clarity-int-page .d-foot-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
.clarity-int-page .d-foot-legal-links a {
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 12.5px;
  text-decoration: none !important;
}
.clarity-int-page .d-foot-legal-links a:hover,
.clarity-int-page .d-foot-legal-links a:focus-visible {
  color: #ffffff !important;
  text-decoration: underline !important;
}

@media (max-width: 720px) {
  .clarity-int-page .d-foot-in {
    flex-direction: column;
    gap: 26px;
    padding: 32px 18px 24px;
  }
  .clarity-int-page .d-foot-nav { gap: 10px 20px; }
  .clarity-int-page .d-foot-legal {
    padding: 14px 18px 26px;
    flex-direction: column;
    align-items: flex-start;
  }
}
/* FAQ links in the hero. The hero ground is navy, so these take light
   values rather than the page's link colour. */
.clarity-int-page .hero-faq-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 16px 0 0;
  font-size: 13px;
}
.clarity-int-page .hero-faq-links > span {
  color: rgba(255,255,255,0.62);
  font-weight: 600;
}
.clarity-int-page .hero-faq-links a {
  color: #ffffff !important;
  font-weight: 700;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.38);
  padding-bottom: 1px;
}
.clarity-int-page .hero-faq-links a:hover,
.clarity-int-page .hero-faq-links a:focus-visible {
  color: #ffffff !important;
  border-bottom-color: #ffffff;
}

/* ------------------------------------------------------------------ */
/* Related guides card                                                  */
/*                                                                      */
/* A second card in the same sticky rail. Kept visually distinct from    */
/* the contents list above it, because these links leave the page        */
/* whereas those scroll within it.                                       */
/* ------------------------------------------------------------------ */

.clarity-int-page .d-toc-in.d-related {
  margin-top: 14px;
}
.clarity-int-page .d-related-group {
  margin: 2px 0 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted) !important;
}
.clarity-int-page .d-related-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.clarity-int-page .d-related-nav a {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--navy) !important;
  text-decoration: none !important;
  transition: background 0.15s ease, color 0.15s ease;
}
.clarity-int-page .d-related-nav a:hover {
  background: var(--tint);
  color: var(--blue) !important;
}
.clarity-int-page .d-related-nav a:focus-visible {
  outline: 3px solid rgba(35, 73, 138, 0.35);
  outline-offset: -2px;
}
/* The page you are on: filled, not just coloured, so it reads as a
   position rather than another link. */
.clarity-int-page .d-related-nav a.is-current {
  background: var(--blue-lt);
  color: var(--blue) !important;
  font-weight: 700;
}

@media (max-width: 980px) {
  .clarity-int-page .d-toc-in.d-related { margin-top: 12px; }
}
/* ------------------------------------------------------------------ */
/* FAQ accordion                                                        */
/*                                                                      */
/* Ported from the [clarity_faqs] shortcode in the Clarity custom        */
/* plugin so both read as one component. Values are copied literally     */
/* rather than mapped onto this stylesheet's tokens, because the two     */
/* palettes differ very slightly and the point here is to match.         */
/* ------------------------------------------------------------------ */

.clarity-int-page .clarity-faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 8px 0 28px;
}
.clarity-int-page .clarity-faq-item {
  background: #FFFFFF;
  border: 1px solid rgba(186, 203, 218, 0.45);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  scroll-margin-top: 90px;
}
.clarity-int-page .clarity-faq-item:hover {
  border-color: #3A6DB5;
  box-shadow: 0 4px 16px rgba(35, 73, 138, 0.08);
}
.clarity-int-page .clarity-faq-item.clarity-faq-active {
  border-color: #23498A;
  box-shadow: 0 4px 20px rgba(35, 73, 138, 0.12);
}
.clarity-int-page .clarity-faq-header {
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease;
}
.clarity-int-page .clarity-faq-header:hover { background: #edf2fa; }
.clarity-int-page .clarity-faq-header:focus-visible {
  outline: 3px solid rgba(35, 73, 138, 0.35);
  outline-offset: -3px;
}
.clarity-int-page .clarity-faq-header-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.clarity-int-page h3.clarity-faq-question {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #23498A !important;
  margin: 0 !important;
  line-height: 1.35 !important;
  letter-spacing: normal;
}
.clarity-int-page .clarity-faq-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #EEF2F8;
  color: #23498A;
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.clarity-int-page .clarity-faq-item.clarity-faq-active .clarity-faq-icon {
  background: #23498A !important;
  color: #ffffff !important;
  transform: rotate(180deg);
}
.clarity-int-page .clarity-faq-icon-v { transition: opacity 0.2s ease; }
.clarity-int-page .clarity-faq-item.clarity-faq-active .clarity-faq-icon-v { opacity: 0; }
.clarity-int-page .clarity-faq-body {
  border-top: 1px solid rgba(186, 203, 218, 0.45);
  background: #ffffff;
}
.clarity-int-page .clarity-faq-answer {
  padding: 24px;
  font-size: 16px !important;
  line-height: 26px !important;
  font-weight: 400 !important;
  color: #000000 !important;
}
.clarity-int-page .clarity-faq-answer p {
  margin: 0 0 16px 0 !important;
  font-size: 16px !important;
  line-height: 26px !important;
  color: #000000 !important;
}
.clarity-int-page .clarity-faq-answer p:last-child { margin-bottom: 0 !important; }
.clarity-int-page .clarity-faq-answer ul,
.clarity-int-page .clarity-faq-answer ol { margin: 0 0 16px 20px !important; padding: 0 !important; }
.clarity-int-page .clarity-faq-answer li {
  margin-bottom: 8px !important;
  font-size: 16px !important;
  line-height: 24px !important;
}
.clarity-int-page .clarity-faq-answer a {
  color: #23498A !important;
  text-decoration: underline !important;
  font-weight: 600 !important;
}

@media (max-width: 720px) {
  .clarity-int-page .clarity-faq-header { padding: 16px 16px; gap: 12px; }
  .clarity-int-page h3.clarity-faq-question { font-size: 16px !important; }
  .clarity-int-page .clarity-faq-answer { padding: 16px; }
}
/* ==================================================================
   Theme state armour.

   hello-elementor's reset.css styles native controls in every state:

     [type=button],[type=submit],button        { border:1px solid #c36; color:#c36 }
     [type=button]:focus,:hover, button:focus,:hover
                                               { background-color:#c36; color:#fff }
     ...:focus                                 { outline:none }

   Those are (0,1,1) and load AFTER this stylesheet, so any plugin button
   without an equally specific state rule flips to the theme's pink on
   hover, focus or click. Every interactive component therefore declares
   its own hover AND focus here, and the removed focus outline is put back
   for keyboard users.
   ================================================================== */

/* keyboard focus ring — the theme sets outline:none, which would otherwise
   leave keyboard users with no visible focus at all once the pink is gone */
.clarity-int-page a:focus-visible,
.clarity-int-page button:focus-visible,
.clarity-int-page input:focus-visible,
.clarity-int-page select:focus-visible,
.clarity-int-page [tabindex]:focus-visible {
  outline: 3px solid rgba(35, 73, 138, 0.45) !important;
  outline-offset: 2px !important;
  border-radius: 6px;
}
.clarity-int-page .d-head a:focus-visible,
.clarity-int-page .d-head button:focus-visible,
.clarity-int-page .d-head input:focus-visible {
  outline-color: rgba(255, 255, 255, 0.75) !important;
}

/* Safety net for any button added later without its own state rules.
   `revert` was wrong here: it rolls back to the user-agent sheet, which
   for a <button> means the grey OS button face - so an unstyled button
   would have gone grey on hover instead of pink. Explicit neutral
   values instead. Every real component outranks this (0,3,0 vs 0,2,1),
   so their intended hovers are untouched. */
.clarity-int-page button:hover,
.clarity-int-page button:focus,
.clarity-int-page button:active {
  background-color: transparent;
  border-color: currentColor;
  color: var(--navy);
  text-decoration: none;
}

/* provider switcher: focus and active match the intended hover */
.clarity-int-page .d-all:hover,
.clarity-int-page .d-all:focus,
.clarity-int-page .d-all:active {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  color: #ffffff !important;
}
.clarity-int-page .d-menu a:focus,
.clarity-int-page .d-menu a:active {
  background: var(--tint) !important;
  color: var(--blue) !important;
}
.clarity-int-page .d-menu a.on:focus,
.clarity-int-page .d-menu a.on:active {
  background: rgba(103, 156, 91, 0.12) !important;
  color: var(--green-dark) !important;
}

/* screenshots, copy pill and lightbox close */
.clarity-int-page .shot:hover,
.clarity-int-page .shot:focus,
.clarity-int-page .shot:active {
  background: var(--white) !important;
  border-color: var(--blue) !important;
  color: inherit !important;
}
.clarity-int-page .copy:focus,
.clarity-int-page .copy:active {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
}
.clarity-int-page .lb-x:hover,
.clarity-int-page .lb-x:focus,
.clarity-int-page .lb-x:active {
  background: var(--white) !important;
  color: var(--navy) !important;
}

/* the search field's clear button: had no colour of its own, so the theme
   supplied one */
.clarity-int-page .search-clear-btn,
.clarity-int-page .search-clear-btn:hover,
.clarity-int-page .search-clear-btn:focus,
.clarity-int-page .search-clear-btn:active {
  border: 0 !important;
  color: var(--muted) !important;
}
.clarity-int-page .search-clear-btn { background: var(--bg-section) !important; }
.clarity-int-page .search-clear-btn:hover,
.clarity-int-page .search-clear-btn:focus,
.clarity-int-page .search-clear-btn:active {
  background: var(--blue-lt) !important;
}
.clarity-int-page .search-clear-btn:hover svg,
.clarity-int-page .search-clear-btn:focus svg { color: var(--navy) !important; }

/* the empty-state "View all providers" button had no plugin styling at all,
   so it rendered entirely in the theme's button skin */
.clarity-int-page .btn-reset-search {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px 22px !important;
  border-radius: var(--radius-sm) !important;
  border: 1.5px solid rgba(35, 73, 138, 0.3) !important;
  background: var(--white) !important;
  color: var(--blue) !important;
  font-family: var(--sans) !important;
  font-size: var(--fs-body-sm) !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  text-decoration: none !important;
}
.clarity-int-page .btn-reset-search:hover,
.clarity-int-page .btn-reset-search:focus,
.clarity-int-page .btn-reset-search:active {
  background: var(--tint) !important;
  border-color: var(--blue) !important;
  color: var(--navy) !important;
}

/* filter pills keep their own look through focus and click */
.clarity-int-page .filter-pill:focus,
.clarity-int-page .filter-pill:active {
  color: var(--blue) !important;
}
/* ==================================================================
   Responsive corrections (v1.2.3)

   Every rule here is scoped to .clarity-int-page so it matches the base
   rules' specificity. Unscoped overrides inside a media query silently
   lose to a scoped base rule, which is what stopped the hero collapsing.
   ================================================================== */

/* ---------- tablet: 721-1024px ---------- */
@media (max-width: 1024px) {
  .clarity-int-page .wrap { padding-inline: 20px; }
  /* the decorative hub diagram competes with the copy at tablet width;
     it stays, but below the text rather than beside it */
  .clarity-int-page .hero-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .clarity-int-page .hero-visual { justify-content: flex-start; }
  .clarity-int-page .featured-banner-card { max-width: 520px; }
  .clarity-int-page .hero-search-wrap { max-width: none; }
}

/* ---------- phone: up to 720px ---------- */
@media (max-width: 720px) {
  /* One compact sticky row instead of two stacked ones. The search used to
     wrap to its own full-width row, which made the sticky header ~120px
     tall — a sixth of the viewport, floating over the content. */
  .clarity-int-page .d-head-in {
    height: 56px !important;
    padding: 0 14px !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }
  .clarity-int-page .d-brand-nav { order: 1; flex: 0 0 auto; min-width: 0; }
  .clarity-int-page .d-head .logo { height: 22px; }
  .clarity-int-page .finder {
    order: 2;
    flex: 1 1 auto !important;
    flex-basis: auto !important;
    min-width: 0;
    max-width: none !important;
  }
  .clarity-int-page .finder input { height: 38px; font-size: 16px; padding-left: 38px; padding-right: 12px; }
  .clarity-int-page .finder-f > svg { left: 12px; width: 15px; height: 15px; }
  .clarity-int-page .kbd { display: none; }
  .clarity-int-page .d-switch { order: 3; flex: 0 0 auto; margin-left: 0; }
  /* icon-only: the label is carried by aria-label on the button */
  .clarity-int-page .d-all span { display: none; }
  .clarity-int-page .d-all { padding: 9px 10px; min-height: 40px; }
  .clarity-int-page .progress { top: 56px; }

  /* hero */
  .clarity-int-page .hero .wrap,
  .clarity-int-page .hub-hero .wrap { padding-block: 28px 32px; }
  .clarity-int-page .featured-banner-card { max-width: none; padding: 18px; }
  .clarity-int-page .hub-filter-pills { width: 100%; }
  .clarity-int-page .filter-pill { font-size: 12px; padding: 8px 12px; min-height: 38px; }

  /* directory */
  .clarity-int-page .hub-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .clarity-int-page .hub-card { padding: 18px; }

  /* guide body: tables and wide media scroll rather than widen the page */
  .clarity-int-page .tw { max-width: 100%; overflow-x: auto; }
  .clarity-int-page .d-banner-in { gap: 16px; }
}

/* ---------- small phones ---------- */
@media (max-width: 400px) {
  .clarity-int-page .d-head .logo { height: 20px; }
  .clarity-int-page .finder input { font-size: 16px; }
  .clarity-int-page .hub-card { padding: 16px; }
}

/* Nothing in the plugin may push the page wider than the viewport. */
.clarity-int-page,
.clarity-int-page main { max-width: 100%; overflow-x: clip; }

/* ==================================================================
   Mobile header: tap-to-expand search (v1.2.4)

   Three controls in one 390px row left the search about 180px wide —
   too narrow to read a provider name in. The search now rests as its
   icon and expands to the full row when tapped, so the resting header
   is just brand + switcher and search is still one tap away.

   Done with :has() rather than JS. Where :has() is unsupported the
   field simply stays expanded-on-focus over the other controls, which
   is still usable.
   ================================================================== */
@media (max-width: 720px) {
  .clarity-int-page .finder {
    flex: 0 0 42px !important;
    transition: flex-basis 0.22s var(--ease);
  }
  .clarity-int-page .finder input {
    /* 16px minimum: iOS Safari auto-zooms the page when a focused input
       is smaller than that, which knocks the sticky header off-screen */
    font-size: 16px !important;
    padding-left: 36px !important;
    padding-right: 8px !important;
    cursor: pointer;
  }
  /* placeholder only makes sense once there is room for it */
  .clarity-int-page .finder input::placeholder { color: transparent; }

  .clarity-int-page .finder:focus-within { flex: 1 1 auto !important; }
  .clarity-int-page .finder:focus-within input {
    padding-right: 12px !important;
    cursor: text;
  }
  .clarity-int-page .finder:focus-within input::placeholder { color: var(--muted); }

  /* give the field the whole row while it is in use */
  .clarity-int-page .d-head-in:has(.finder:focus-within) .d-brand-nav,
  .clarity-int-page .d-head-in:has(.finder:focus-within) .d-switch {
    display: none !important;
  }
  /* results panel spans the row rather than the collapsed field */
  .clarity-int-page .finder .d-results {
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
  }
}