/* =====================================================================
   Instrukt — Help Scout Docs theme
   Direction: 3a (inverted hero, list-row categories, Cararra sidebar)
   Site: support.instruktapp.com
   Paste into: Docs > Site Settings > Custom Code (inside <style>…</style>)
   or host this file and set it as the Custom Stylesheet URL.
   ===================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&family=Open+Sans:ital,wght@0,400;0,600;1,400&display=swap");

:root {
  --ik-tropaz: #2A5C8B;      /* St Tropaz — chrome, headings, primary */
  --ik-blue: #228BE6;        /* Curious Blue — interactive accent */
  --ik-cararra: #EEEDEA;     /* Cararra — light ground */
  --ik-cornflower: #85ACE1;  /* Cornflower — decorative only */
  --ik-saltbox: #706A72;     /* Salt Box — meta text */
  --ik-ink: #3A3A3E;         /* body text */
  --ik-hair: rgba(112,106,114,.18);
  --ik-hair-soft: rgba(112,106,114,.14);
  --ik-tint: rgba(34,139,230,.08);
  --ik-tint-strong: rgba(34,139,230,.10);
  --ik-head: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --ik-body: "Open Sans", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Base ---------- */
body {
  background: #fff !important;
  color: var(--ik-ink);
  font-family: var(--ik-body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--ik-head); color: var(--ik-tropaz); }
a { color: var(--ik-blue); transition: color .12s ease; }
a:hover, a:focus { color: var(--ik-tropaz); }
:focus-visible { outline: 2px solid var(--ik-blue); outline-offset: 2px; }

/* ---------- Header ---------- */
#mainNav, #mainNav .navbar-inner {
  background: var(--ik-tropaz) !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
#mainNav .navbar-inner { min-height: 72px; }
#mainNav .container-fluid { max-width: 1200px; margin: 0 auto; padding: 0 40px; box-sizing: border-box; }
#mainNav .brand { padding: 24px 0; margin: 0; }
#mainNav .brand img { height: 24px; width: auto; }
#mainNav .nav { margin: 0; display: flex; gap: 28px; }
#mainNav .nav > li > a {
  font-family: var(--ik-head);
  font-weight: 500;
  font-size: 14px;
  color: rgba(238,237,234,.8) !important;
  text-shadow: none !important;
  background: transparent !important;
  padding: 6px 0 !important;
  margin: 18px 0 0;
  border-bottom: 2px solid transparent;
  line-height: 20px;
}
#mainNav .nav > li > a:hover,
#mainNav .nav > li > a:focus { color: #fff !important; }
#mainNav .nav > li.active > a { color: #fff !important; border-bottom-color: #fff; }
#mainNav .nav .caret { display: none; }
#mainNav li#contactMobile { display: none; }

/* Mobile menu toggle */
#mainNav .btn-navbar {
  width: 44px; height: 44px; margin: 14px 0 0;
  padding: 0; box-sizing: border-box;
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: rgba(255,255,255,.14) !important;
  background-image: none !important;
  border: 0 !important; border-radius: 10px; box-shadow: none !important;
}
#mainNav .btn-navbar .icon-bar { width: 20px; height: 2px; margin: 0 !important; background: #fff !important; border-radius: 2px; box-shadow: none; }

/* ---------- Home: hero + search ---------- */
#docsSearch {
  background: radial-gradient(circle at 0% 100%, rgba(133,172,225,.35) 0%, rgba(133,172,225,0) 50%), var(--ik-tropaz) !important;
  border: 0 !important;
  margin: 0 0 56px;
  padding: 64px 40px 88px;
  text-align: center;
}
#docsSearch h1 {
  font-family: var(--ik-head);
  font-weight: 500;
  font-size: 48px;
  line-height: 1.15;
  letter-spacing: -.8px;
  color: #fff !important;
  text-shadow: none;
  margin: 0 0 28px;
}
#searchBar { position: relative; }
#docsSearch #searchBar {
  display: flex; align-items: center;
  max-width: 680px; height: 60px; margin: 0 auto;
  background: #fff; border-radius: 16px; overflow: hidden;
  box-sizing: border-box;
}
#docsSearch #searchBar .search-query {
  flex: 1; width: auto !important; height: 60px; margin: 0;
  padding: 0 20px 0 52px; box-sizing: border-box;
  border: 0 !important; border-radius: 0; box-shadow: none !important;
  font-family: var(--ik-body); font-size: 16px; color: var(--ik-ink);
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%232A5C8B%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%227%22%2F%3E%3Cpath%20d%3D%22M20%2020l-3.5-3.5%22%2F%3E%3C%2Fsvg%3E") no-repeat 20px center / 20px 20px;
}
#docsSearch #searchBar button {
  position: static; flex: none;
  height: 44px; margin: 8px; padding: 0 24px;
  background: var(--ik-blue) !important; background-image: none !important;
  border: 0 !important; border-radius: 10px; box-shadow: none !important;
  color: #fff !important; text-shadow: none;
  font-family: var(--ik-head); font-weight: 600; font-size: 14px;
}
#docsSearch #searchBar button:hover { background: var(--ik-tropaz) !important; }
#docsSearch #searchBar button .icon-search { display: none; }
#docsSearch #searchBar button span { display: inline !important; }
.search-query::placeholder { color: var(--ik-saltbox); opacity: 1; }

/* Search suggestions dropdown */
#serp-dd {
  border: 1px solid var(--ik-hair) !important; border-radius: 12px !important;
  box-shadow: 0 8px 28px rgba(42,92,139,.08) !important; overflow: hidden; text-align: left;
}
#serp-dd .result a { font-family: var(--ik-body); color: var(--ik-tropaz); padding: 12px 16px; }
#serp-dd .result a:hover, #serp-dd .result > li.active a { background: rgba(34,139,230,.06); color: var(--ik-tropaz); }

/* ---------- Home: collections as two panels ---------- */
*:has(> .collection-category) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
  max-width: 1200px;
  margin-left: auto; margin-right: auto;
  padding-left: 40px; padding-right: 40px;
  box-sizing: border-box;
}
*:has(> .collection-category) > :not(.collection-category) { grid-column: 1 / -1; }
/* Bootstrap clearfix pseudo-elements become grid items and push panels out of line */
*:has(> .collection-category)::before,
*:has(> .collection-category)::after,
#contentArea > .row-fluid::before,
#contentArea > .row-fluid::after { content: none !important; display: none !important; }
.collection-category { margin: 0 0 32px !important; padding: 0 !important; border: 0 !important; }
.collection-category h2 {
  font-family: var(--ik-head); font-weight: 600; font-size: 17px; line-height: 1.3;
  margin: 0 0 12px; padding: 0 0 0 4px; text-align: left; border: 0;
}
.collection-category h2 a { color: var(--ik-tropaz) !important; }
.collection-category .category-list {
  display: block !important;
  background: #fff;
  border: 1px solid var(--ik-hair);
  border-radius: 16px;
  padding: 0 22px;
  margin: 0;
}

/* Category rows */
.category-list .category {
  position: relative;
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) 16px;
  grid-template-areas: "icon count chev" "icon title chev" "icon desc chev";
  column-gap: 16px; row-gap: 2px;
  align-items: center;
  width: 100% !important; max-width: none !important; min-height: 48px;
  box-sizing: border-box;
  margin: 0 !important; padding: 16px 0 !important;
  float: none !important;
  background: transparent !important;
  border: 0 !important; border-bottom: 1px solid var(--ik-hair-soft) !important;
  border-radius: 0 !important; box-shadow: none !important;
  text-align: left !important;
  transition: background-color .12s ease;
}
.category-list .category:last-child { border-bottom: 0 !important; }
.category-list .category > i,
.category-list .category > svg,
.category-list .category > img,
.category-list .category .icon-article-doc,
.category-list .category > [class*="icon"],
.category-list .category > :has(> svg:only-child),
.category-list .category > :has(> img:only-child),
.category-list .category > :has(> i:only-child) { display: none !important; }
/* Neutralize the previous theme's Material Symbols icon on category titles */
.category-list .category h3::before { content: none !important; display: none !important; }
/* Category description (any element that isn't the title, count or icon) */
.category-list .category > :not(h3):not(.article-count):not([class*="icon"]):not(i):not(svg):not(img) {
  grid-area: desc; display: block;
  font-family: var(--ik-body); font-weight: 400; font-size: 13.5px; line-height: 1.5;
  letter-spacing: 0; text-transform: none; color: var(--ik-saltbox) !important; margin: 2px 0 0;
}
.category-list .category:hover { background: transparent !important; }
.category-list .category:hover h3 { color: var(--ik-blue); }
.category-list .category::before {
  content: ""; grid-area: icon; align-self: center;
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--ik-tint) no-repeat center / 22px 22px;
}
.category-list .category::after {
  content: ""; grid-area: chev; width: 16px; height: 16px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23706A72%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%206l6%206-6%206%22%2F%3E%3C%2Fsvg%3E") no-repeat center / 16px;
}
.category-list .category h3 {
  grid-area: title;
  font-family: var(--ik-body); font-weight: 400; font-size: 16px; line-height: 1.35;
  color: var(--ik-tropaz); margin: 0; padding: 0;
}
.category-list .category .article-count {
  grid-area: count; order: -1;
  font-family: var(--ik-head); font-weight: 600; font-size: 11px; line-height: 1.4;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ik-saltbox) !important; margin: 0; padding: 0;
}
.category-list .category p:not(.article-count) {
  grid-area: desc;
  font-size: 13.5px; line-height: 1.5; color: var(--ik-saltbox); margin: 0;
}

/* ---------- Category icons (by Help Scout category ID) ---------- */
/* learn-more */
.category#category-53::before,
#sidebar .nav-list li#category-53 > a::before,
#sidebar .nav-list a[href*="/category/53-"]::before,
body:has(#sidebar li#category-53.active) :is(#categoryHead, .contentWrapper) > h1::before,
body:has(#sidebar li.active > a[href*="/category/53-"]) :is(#categoryHead, .contentWrapper) > h1::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23228BE6%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2018h6%22%2F%3E%3Cpath%20d%3D%22M10%2021h4%22%2F%3E%3Cpath%20d%3D%22M12%203a6%206%200%200%200-3.6%2010.8c.6.5%201%201.2%201%202v.2h5.2v-.2c0-.8.4-1.5%201-2A6%206%200%200%200%2012%203z%22%2F%3E%3C%2Fsvg%3E"); }
/* create-account */
.category#category-54::before,
#sidebar .nav-list li#category-54 > a::before,
#sidebar .nav-list a[href*="/category/54-"]::before,
body:has(#sidebar li#category-54.active) :is(#categoryHead, .contentWrapper) > h1::before,
body:has(#sidebar li.active > a[href*="/category/54-"]) :is(#categoryHead, .contentWrapper) > h1::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23228BE6%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2021V5a2%202%200%200%201%202-2h6a2%202%200%200%201%202%202v16%22%2F%3E%3Cpath%20d%3D%22M14%209h3a2%202%200%200%201%202%202v2%22%2F%3E%3Cpath%20d%3D%22M8%207h2%22%2F%3E%3Cpath%20d%3D%22M8%2011h2%22%2F%3E%3Cpath%20d%3D%22M8%2015h2%22%2F%3E%3Cpath%20d%3D%22M2.5%2021h11.5%22%2F%3E%3Cpath%20d%3D%22M19%2016v6%22%2F%3E%3Cpath%20d%3D%22M16%2019h6%22%2F%3E%3C%2Fsvg%3E"); }
/* set-up-studio */
.category#category-55::before,
#sidebar .nav-list li#category-55 > a::before,
#sidebar .nav-list a[href*="/category/55-"]::before,
body:has(#sidebar li#category-55.active) :is(#categoryHead, .contentWrapper) > h1::before,
body:has(#sidebar li.active > a[href*="/category/55-"]) :is(#categoryHead, .contentWrapper) > h1::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23228BE6%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%206h9%22%2F%3E%3Cpath%20d%3D%22M19%206h1%22%2F%3E%3Cpath%20d%3D%22M4%2012h3%22%2F%3E%3Cpath%20d%3D%22M13%2012h7%22%2F%3E%3Cpath%20d%3D%22M4%2018h11%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%226%22%20r%3D%222.5%22%2F%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2212%22%20r%3D%222.5%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2218%22%20r%3D%222.5%22%2F%3E%3C%2Fsvg%3E"); }
/* owners-managers */
.category#category-65::before,
#sidebar .nav-list li#category-65 > a::before,
#sidebar .nav-list a[href*="/category/65-"]::before,
body:has(#sidebar li#category-65.active) :is(#categoryHead, .contentWrapper) > h1::before,
body:has(#sidebar li.active > a[href*="/category/65-"]) :is(#categoryHead, .contentWrapper) > h1::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23228BE6%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%227%22%20width%3D%2218%22%20height%3D%2213%22%20rx%3D%222.5%22%2F%3E%3Cpath%20d%3D%22M9%207V5.5A2.5%202.5%200%200%201%2011.5%203h1A2.5%202.5%200%200%201%2015%205.5V7%22%2F%3E%3Cpath%20d%3D%22M3%2013h18%22%2F%3E%3Cpath%20d%3D%22M12%2012v2%22%2F%3E%3C%2Fsvg%3E"); }
/* instructors-team */
.category#category-66::before,
#sidebar .nav-list li#category-66 > a::before,
#sidebar .nav-list a[href*="/category/66-"]::before,
body:has(#sidebar li#category-66.active) :is(#categoryHead, .contentWrapper) > h1::before,
body:has(#sidebar li.active > a[href*="/category/66-"]) :is(#categoryHead, .contentWrapper) > h1::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23228BE6%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228%22%20r%3D%223.5%22%2F%3E%3Cpath%20d%3D%22M3%2020a6%206%200%200%201%2012%200%22%2F%3E%3Cpath%20d%3D%22M16%204.6a3.5%203.5%200%200%201%200%206.8%22%2F%3E%3Cpath%20d%3D%22M18%2014.6a6%206%200%200%201%203%205.4%22%2F%3E%3C%2Fsvg%3E"); }
/* Common questions — add when the category has a published article:
.category#category-XX::before,
#sidebar .nav-list li#category-XX > a::before,
body:has(#sidebar li#category-XX.active) .contentWrapper > h1::before { background-image: url("data:image/svg+xml,…"); }
*/


/* Category page title icon — broad match (page URL via canonical/og:url, or active sidebar link) */
#main-content h1:not(#fullArticle *):not(.title) {
  display: flex; align-items: center; gap: 16px;
}
html:has(link[rel="canonical"][href*="/category/"]) #main-content h1:not(#fullArticle *):not(.title)::before,
html:has(meta[property="og:url"][content*="/category/"]) #main-content h1:not(#fullArticle *):not(.title)::before,
body:has(#sidebar li.active) #main-content h1:not(#fullArticle *):not(.title)::before {
  content: ""; flex: none;
  width: 56px; height: 56px; border-radius: 14px;
  background: var(--ik-tint-strong) no-repeat center / 26px 26px;
}
html:has(link[rel="canonical"][href*="/category/53-"]) #main-content h1:not(#fullArticle *):not(.title)::before,
html:has(meta[property="og:url"][content*="/category/53-"]) #main-content h1:not(#fullArticle *):not(.title)::before,
body:has(#sidebar li.active a[href*="/category/53-"]) #main-content h1:not(#fullArticle *):not(.title)::before,
body:has(#sidebar li[id$="-53"].active) #main-content h1:not(#fullArticle *):not(.title)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23228BE6%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2018h6%22%2F%3E%3Cpath%20d%3D%22M10%2021h4%22%2F%3E%3Cpath%20d%3D%22M12%203a6%206%200%200%200-3.6%2010.8c.6.5%201%201.2%201%202v.2h5.2v-.2c0-.8.4-1.5%201-2A6%206%200%200%200%2012%203z%22%2F%3E%3C%2Fsvg%3E"); }
#sidebar a[href*="/category/53-"]::before, #sidebar li[id$="-53"] > a::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23228BE6%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2018h6%22%2F%3E%3Cpath%20d%3D%22M10%2021h4%22%2F%3E%3Cpath%20d%3D%22M12%203a6%206%200%200%200-3.6%2010.8c.6.5%201%201.2%201%202v.2h5.2v-.2c0-.8.4-1.5%201-2A6%206%200%200%200%2012%203z%22%2F%3E%3C%2Fsvg%3E"); }
html:has(link[rel="canonical"][href*="/category/54-"]) #main-content h1:not(#fullArticle *):not(.title)::before,
html:has(meta[property="og:url"][content*="/category/54-"]) #main-content h1:not(#fullArticle *):not(.title)::before,
body:has(#sidebar li.active a[href*="/category/54-"]) #main-content h1:not(#fullArticle *):not(.title)::before,
body:has(#sidebar li[id$="-54"].active) #main-content h1:not(#fullArticle *):not(.title)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23228BE6%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2021V5a2%202%200%200%201%202-2h6a2%202%200%200%201%202%202v16%22%2F%3E%3Cpath%20d%3D%22M14%209h3a2%202%200%200%201%202%202v2%22%2F%3E%3Cpath%20d%3D%22M8%207h2%22%2F%3E%3Cpath%20d%3D%22M8%2011h2%22%2F%3E%3Cpath%20d%3D%22M8%2015h2%22%2F%3E%3Cpath%20d%3D%22M2.5%2021h11.5%22%2F%3E%3Cpath%20d%3D%22M19%2016v6%22%2F%3E%3Cpath%20d%3D%22M16%2019h6%22%2F%3E%3C%2Fsvg%3E"); }
#sidebar a[href*="/category/54-"]::before, #sidebar li[id$="-54"] > a::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23228BE6%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2021V5a2%202%200%200%201%202-2h6a2%202%200%200%201%202%202v16%22%2F%3E%3Cpath%20d%3D%22M14%209h3a2%202%200%200%201%202%202v2%22%2F%3E%3Cpath%20d%3D%22M8%207h2%22%2F%3E%3Cpath%20d%3D%22M8%2011h2%22%2F%3E%3Cpath%20d%3D%22M8%2015h2%22%2F%3E%3Cpath%20d%3D%22M2.5%2021h11.5%22%2F%3E%3Cpath%20d%3D%22M19%2016v6%22%2F%3E%3Cpath%20d%3D%22M16%2019h6%22%2F%3E%3C%2Fsvg%3E"); }
html:has(link[rel="canonical"][href*="/category/55-"]) #main-content h1:not(#fullArticle *):not(.title)::before,
html:has(meta[property="og:url"][content*="/category/55-"]) #main-content h1:not(#fullArticle *):not(.title)::before,
body:has(#sidebar li.active a[href*="/category/55-"]) #main-content h1:not(#fullArticle *):not(.title)::before,
body:has(#sidebar li[id$="-55"].active) #main-content h1:not(#fullArticle *):not(.title)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23228BE6%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%206h9%22%2F%3E%3Cpath%20d%3D%22M19%206h1%22%2F%3E%3Cpath%20d%3D%22M4%2012h3%22%2F%3E%3Cpath%20d%3D%22M13%2012h7%22%2F%3E%3Cpath%20d%3D%22M4%2018h11%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%226%22%20r%3D%222.5%22%2F%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2212%22%20r%3D%222.5%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2218%22%20r%3D%222.5%22%2F%3E%3C%2Fsvg%3E"); }
#sidebar a[href*="/category/55-"]::before, #sidebar li[id$="-55"] > a::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23228BE6%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%206h9%22%2F%3E%3Cpath%20d%3D%22M19%206h1%22%2F%3E%3Cpath%20d%3D%22M4%2012h3%22%2F%3E%3Cpath%20d%3D%22M13%2012h7%22%2F%3E%3Cpath%20d%3D%22M4%2018h11%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%226%22%20r%3D%222.5%22%2F%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2212%22%20r%3D%222.5%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2218%22%20r%3D%222.5%22%2F%3E%3C%2Fsvg%3E"); }
html:has(link[rel="canonical"][href*="/category/65-"]) #main-content h1:not(#fullArticle *):not(.title)::before,
html:has(meta[property="og:url"][content*="/category/65-"]) #main-content h1:not(#fullArticle *):not(.title)::before,
body:has(#sidebar li.active a[href*="/category/65-"]) #main-content h1:not(#fullArticle *):not(.title)::before,
body:has(#sidebar li[id$="-65"].active) #main-content h1:not(#fullArticle *):not(.title)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23228BE6%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%227%22%20width%3D%2218%22%20height%3D%2213%22%20rx%3D%222.5%22%2F%3E%3Cpath%20d%3D%22M9%207V5.5A2.5%202.5%200%200%201%2011.5%203h1A2.5%202.5%200%200%201%2015%205.5V7%22%2F%3E%3Cpath%20d%3D%22M3%2013h18%22%2F%3E%3Cpath%20d%3D%22M12%2012v2%22%2F%3E%3C%2Fsvg%3E"); }
#sidebar a[href*="/category/65-"]::before, #sidebar li[id$="-65"] > a::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23228BE6%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%227%22%20width%3D%2218%22%20height%3D%2213%22%20rx%3D%222.5%22%2F%3E%3Cpath%20d%3D%22M9%207V5.5A2.5%202.5%200%200%201%2011.5%203h1A2.5%202.5%200%200%201%2015%205.5V7%22%2F%3E%3Cpath%20d%3D%22M3%2013h18%22%2F%3E%3Cpath%20d%3D%22M12%2012v2%22%2F%3E%3C%2Fsvg%3E"); }
html:has(link[rel="canonical"][href*="/category/66-"]) #main-content h1:not(#fullArticle *):not(.title)::before,
html:has(meta[property="og:url"][content*="/category/66-"]) #main-content h1:not(#fullArticle *):not(.title)::before,
body:has(#sidebar li.active a[href*="/category/66-"]) #main-content h1:not(#fullArticle *):not(.title)::before,
body:has(#sidebar li[id$="-66"].active) #main-content h1:not(#fullArticle *):not(.title)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23228BE6%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228%22%20r%3D%223.5%22%2F%3E%3Cpath%20d%3D%22M3%2020a6%206%200%200%201%2012%200%22%2F%3E%3Cpath%20d%3D%22M16%204.6a3.5%203.5%200%200%201%200%206.8%22%2F%3E%3Cpath%20d%3D%22M18%2014.6a6%206%200%200%201%203%205.4%22%2F%3E%3C%2Fsvg%3E"); }
#sidebar a[href*="/category/66-"]::before, #sidebar li[id$="-66"] > a::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23228BE6%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228%22%20r%3D%223.5%22%2F%3E%3Cpath%20d%3D%22M3%2020a6%206%200%200%201%2012%200%22%2F%3E%3Cpath%20d%3D%22M16%204.6a3.5%203.5%200%200%201%200%206.8%22%2F%3E%3Cpath%20d%3D%22M18%2014.6a6%206%200%200%201%203%205.4%22%2F%3E%3C%2Fsvg%3E"); }
#sidebar .nav-list li > a::before, #sidebar li > a::before {
  content: ""; flex: none; width: 18px; height: 18px; background-repeat: no-repeat; background-position: center; background-size: 18px 18px;
}
@media (max-width: 767px) {
  #main-content h1:not(#fullArticle *):not(.title)::before { width: 48px !important; height: 48px !important; border-radius: 12px; background-size: 22px 22px !important; }
}


/* ---------- Category descriptions (Help Scout has no field for these; edit text here) ---------- */
.category-list .category h3::after {
  display: block; margin-top: 4px;
  font-family: var(--ik-body); font-weight: 400; font-size: 13.5px; line-height: 1.5;
  letter-spacing: 0; text-transform: none; color: var(--ik-saltbox);
}
#main-content h1:not(#fullArticle *):not(.title) { flex-wrap: wrap; }
#main-content h1:not(#fullArticle *):not(.title)::after {
  flex: 0 0 100%; margin-top: 16px; max-width: 600px;
  font-family: var(--ik-body); font-weight: 400; font-size: 17px; line-height: 1.6;
  letter-spacing: 0; color: var(--ik-ink);
}
.category#category-53 h3::after,
html:has(link[rel="canonical"][href*="/category/53-"]) #main-content h1:not(#fullArticle *):not(.title)::after,
html:has(meta[property="og:url"][content*="/category/53-"]) #main-content h1:not(#fullArticle *):not(.title)::after,
body:has(#sidebar li.active a[href*="/category/53-"]) #main-content h1:not(#fullArticle *):not(.title)::after { content: "How Instrukt covers your classes with pre-approved subs."; }
.category#category-54 h3::after,
html:has(link[rel="canonical"][href*="/category/54-"]) #main-content h1:not(#fullArticle *):not(.title)::after,
html:has(meta[property="og:url"][content*="/category/54-"]) #main-content h1:not(#fullArticle *):not(.title)::after,
body:has(#sidebar li.active a[href*="/category/54-"]) #main-content h1:not(#fullArticle *):not(.title)::after { content: "Sign up, connect MINDBODY and start your trial."; }
.category#category-55 h3::after,
html:has(link[rel="canonical"][href*="/category/55-"]) #main-content h1:not(#fullArticle *):not(.title)::after,
html:has(meta[property="og:url"][content*="/category/55-"]) #main-content h1:not(#fullArticle *):not(.title)::after,
body:has(#sidebar li.active a[href*="/category/55-"]) #main-content h1:not(#fullArticle *):not(.title)::after { content: "Class types, locations, instructors and managers."; }
.category#category-65 h3::after,
html:has(link[rel="canonical"][href*="/category/65-"]) #main-content h1:not(#fullArticle *):not(.title)::after,
html:has(meta[property="og:url"][content*="/category/65-"]) #main-content h1:not(#fullArticle *):not(.title)::after,
body:has(#sidebar li.active a[href*="/category/65-"]) #main-content h1:not(#fullArticle *):not(.title)::after { content: "Requesting subs, preferred subs and studio settings."; }
.category#category-66 h3::after,
html:has(link[rel="canonical"][href*="/category/66-"]) #main-content h1:not(#fullArticle *):not(.title)::after,
html:has(meta[property="og:url"][content*="/category/66-"]) #main-content h1:not(#fullArticle *):not(.title)::after,
body:has(#sidebar li.active a[href*="/category/66-"]) #main-content h1:not(#fullArticle *):not(.title)::after { content: "Accepting studio invites and using Instrukt"; }
@media (max-width: 767px) {
  .category-list .category h3::after { font-size: 13px; }
  #main-content h1:not(#fullArticle *):not(.title)::after { font-size: 15px; margin-top: 12px; }
}

/* ---------- Inner pages: layout ---------- */
#contentArea { max-width: 1200px; margin: 0 auto; padding: 48px 40px 64px; box-sizing: border-box; }
#contentArea > .row-fluid { display: flex; flex-direction: row-reverse; gap: 72px; align-items: flex-start; }
#main-content { flex: 1; min-width: 0; width: auto !important; margin: 0 !important; float: none !important; }
#sidebar { flex: none; width: 280px !important; margin: 0 !important; float: none !important; }
#contentArea, #contentArea > .row-fluid, #main-content, #main-content > *,
#categoryHead, .contentWrapper {
  box-shadow: none !important; border: 0 !important; background: transparent !important;
}
#main-content::before, #main-content::after { content: none !important; display: none !important; }
.contentWrapper {
  max-width: 700px;
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  padding: 0 !important; margin: 0 !important;
}

/* ---------- Sidebar ---------- */
#sidebar {
  background: var(--ik-cararra);
  border-radius: 16px;
  padding: 18px;
  box-sizing: border-box;
}
#sidebar #searchBar {
  display: flex; align-items: center;
  height: 44px; margin: 0 0 18px;
  background: #fff; border-radius: 10px; overflow: hidden;
}
#sidebar #searchBar .search-query {
  flex: 1; width: auto !important; height: 44px; margin: 0;
  padding: 0 14px 0 40px; box-sizing: border-box;
  border: 0 !important; border-radius: 0; box-shadow: none !important;
  font-size: 14px; color: var(--ik-ink);
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%232A5C8B%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%227%22%2F%3E%3Cpath%20d%3D%22M20%2020l-3.5-3.5%22%2F%3E%3C%2Fsvg%3E") no-repeat 14px center / 16px 16px;
}
#sidebar #searchBar button { display: none; }
#sidebar #searchBar > .icon-search { display: none; }
#sidebar h3 {
  font-family: var(--ik-head); font-weight: 600; font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ik-tropaz); margin: 0; padding: 0 8px 8px;
}
#sidebar .nav-list { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
#sidebar .nav-list li > a {
  display: flex; align-items: center; gap: 10px;
  min-height: 40px; padding: 8px !important; margin: 0 !important; box-sizing: border-box;
  font-family: var(--ik-body); font-size: 14px; line-height: 1.35;
  color: var(--ik-tropaz) !important; text-shadow: none !important;
  background: transparent !important; border-radius: 10px;
  transition: background-color .12s ease;
}
#sidebar .nav-list li > a:hover { background: rgba(255,255,255,.6) !important; }
#sidebar .nav-list li.active > a { background: #fff !important; font-family: var(--ik-head); font-weight: 600; }
#sidebar .nav-list li > a .icon-arrow,
#sidebar .nav-list li > a i,
#sidebar .nav-list li > a svg { display: none !important; }
#sidebar .nav-list li > a::before {
  content: ""; flex: none; width: 18px; height: 18px;
  background: no-repeat center / 18px 18px;
}

/* ---------- Category / collection page ---------- */
#categoryHead, .contentWrapper:not(:has(#categoryHead)):has(> .articleList) {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  column-gap: 16px; margin: 0 0 12px; padding: 0;
}
:is(#categoryHead, .contentWrapper) > h1 {
  grid-column: 1 / -1; order: 1;
  display: flex; align-items: center; gap: 16px;
  font-family: var(--ik-head); font-weight: 500;
  font-size: 40px; line-height: 1.15; letter-spacing: -.8px;
  color: var(--ik-tropaz); margin: 0 0 16px; padding: 0; border: 0;
}
:is(#categoryHead, .contentWrapper) > h1::before {
  content: none; flex: none;
  width: 56px; height: 56px; border-radius: 14px;
  background: var(--ik-tint-strong) no-repeat center / 26px 26px;
}
body:has(#sidebar li.active) :is(#categoryHead, .contentWrapper) > h1::before { content: ""; }
.contentWrapper .descrip {
  grid-column: 1 / -1; order: 2;
  font-size: 17px; line-height: 1.6; color: var(--ik-ink); max-width: 600px; margin: 0 0 20px;
}
#categoryHead::before, .contentWrapper:not(:has(#categoryHead)):has(> .articleList)::before {
  content: "Articles" !important; display: block !important; order: 3;
  font-family: var(--ik-head); font-weight: 600; font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ik-saltbox);
}
#categoryHead::after { content: none !important; display: none !important; }
.contentWrapper .sort { order: 4; float: none !important; margin: 0; text-align: right; }
.contentWrapper:not(:has(#categoryHead)) > .articleList { grid-column: 1 / -1; order: 5; margin-top: 12px; }
.contentWrapper .sort select {
  height: 36px; padding: 0 12px; margin: 0;
  font-family: var(--ik-body); font-size: 13.5px; color: var(--ik-tropaz);
  background-color: #fff; border: 1px solid rgba(112,106,114,.38); border-radius: 10px; box-shadow: none;
}

/* Article lists: category, collection “Most popular”, search results */
.contentWrapper .articleList,
.contentWrapper .popArticles,
#serp-results,
.related ul {
  list-style: none; margin: 0 0 24px; padding: 0 22px;
  border: 1px solid var(--ik-hair); border-radius: 16px; background: #fff;
}
.contentWrapper .articleList > li,
.contentWrapper .popArticles > li,
#serp-results > li,
.related ul > li { margin: 0; padding: 0; border-bottom: 1px solid var(--ik-hair-soft); }
.contentWrapper .articleList > li:last-child,
.contentWrapper .popArticles > li:last-child,
#serp-results > li:last-child,
.related ul > li:last-child { border-bottom: 0; }
.contentWrapper .articleList > li > a,
.contentWrapper .popArticles > li > a,
.related ul > li > a {
  display: flex; align-items: center; gap: 14px;
  min-height: 52px; padding: 14px 0; box-sizing: border-box;
  font-size: 16px; line-height: 1.4; color: var(--ik-tropaz) !important; text-decoration: none;
}
.contentWrapper .articleList > li > a:hover span,
.contentWrapper .popArticles > li > a:hover span,
.related ul > li > a:hover span { color: var(--ik-blue); }
.contentWrapper .articleList > li > a .icon-article-doc,
.contentWrapper .popArticles > li > a .icon-article-doc,
.related ul > li > a .icon-article-doc { display: none; }
.contentWrapper .articleList > li > a::before,
.contentWrapper .popArticles > li > a::before,
.related ul > li > a::before {
  content: ""; flex: none; width: 20px; height: 20px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23228BE6%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%203H7a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h10a2%202%200%200%200%202-2V8z%22%2F%3E%3Cpath%20d%3D%22M14%203v5h5%22%2F%3E%3Cpath%20d%3D%22M9%2013h6%22%2F%3E%3Cpath%20d%3D%22M9%2017h4%22%2F%3E%3C%2Fsvg%3E") no-repeat center / 20px 20px;
}
.contentWrapper .articleList > li > a span,
.contentWrapper .popArticles > li > a span,
.related ul > li > a span { flex: 1; }
.contentWrapper .articleList > li > a::after,
.contentWrapper .popArticles > li > a::after,
.related ul > li > a::after {
  content: ""; flex: none; width: 16px; height: 16px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23706A72%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%206l6%206-6%206%22%2F%3E%3C%2Fsvg%3E") no-repeat center / 16px;
}

/* ---------- Article ---------- */
#fullArticle {
  max-width: 700px;
  font-family: var(--ik-body); font-size: 16px; line-height: 1.6; color: var(--ik-ink);
  background: transparent !important; border: 0 !important; padding: 0 !important;
}
#fullArticle h1.title, #fullArticle .title {
  font-family: var(--ik-head); font-weight: 500;
  font-size: 40px; line-height: 1.15; letter-spacing: -.8px;
  color: var(--ik-tropaz); margin: 0 0 18px;
}
#fullArticle .title + p { font-size: 18px; }
#fullArticle h2 { font-family: var(--ik-head); font-weight: 600; font-size: 22px; line-height: 1.3; color: var(--ik-tropaz); margin: 40px 0 14px; }
#fullArticle h3 { font-family: var(--ik-head); font-weight: 600; font-size: 18px; line-height: 1.3; color: var(--ik-tropaz); margin: 32px 0 12px; }
#fullArticle p { margin: 0 0 16px; }
#fullArticle a { color: var(--ik-blue); text-decoration: underline; text-underline-offset: 2px; }
#fullArticle a:hover { color: var(--ik-tropaz); }
#fullArticle em { color: var(--ik-saltbox); }
#fullArticle strong, #fullArticle b { color: var(--ik-tropaz); font-weight: 600; }
#fullArticle .printArticle { display: none; }
#fullArticle img { max-width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--ik-hair); }

/* Unordered lists */
#fullArticle ul { margin: 0 0 18px; padding-left: 22px; }
#fullArticle ul > li { margin: 0 0 8px; }
#fullArticle ul > li::marker { color: var(--ik-blue); }

/* Numbered steps */
#fullArticle ol { list-style: none; counter-reset: ik-step; margin: 0 0 20px; padding: 0; }
#fullArticle ol > li {
  counter-increment: ik-step;
  position: relative; min-height: 28px;
  margin: 0 0 14px; padding: 0 0 0 42px;
}
#fullArticle ol > li::before {
  content: counter(ik-step);
  position: absolute; left: 0; top: -1px;
  width: 28px; height: 28px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ik-tint-strong);
  font-family: var(--ik-head); font-weight: 600; font-size: 13px; line-height: 1;
  color: var(--ik-tropaz);
}
#fullArticle ol ol { margin-top: 12px; }

/* Callouts (all editor callout colors share one treatment) */
#fullArticle .callout,
#fullArticle .callout-blue,
#fullArticle .callout-yellow,
#fullArticle .callout-green,
#fullArticle .callout-red,
#fullArticle .private-note {
  background: var(--ik-tint) !important;
  border: 0 !important; border-radius: 16px;
  padding: 20px 24px; margin: 0 0 20px;
  color: var(--ik-tropaz); font-size: 15.5px; line-height: 1.6;
}
#fullArticle [class^="callout"] p:last-child { margin-bottom: 0; }

/* Tables */
#fullArticle table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 15px; }
#fullArticle th { font-family: var(--ik-head); font-weight: 600; color: var(--ik-tropaz); text-align: left; background: var(--ik-cararra); }
#fullArticle th, #fullArticle td { padding: 10px 14px; border: 1px solid var(--ik-hair-soft); }

/* Feedback */
.articleRatings {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px;
  max-width: 700px; box-sizing: border-box;
  margin: 40px 0 0; padding: 22px 24px;
  background: #fff; border: 1px solid var(--ik-hair); border-radius: 16px;
}
.articleRatings-question { font-family: var(--ik-head); font-weight: 600; font-size: 15px; color: var(--ik-tropaz); }
.articleRatings-actions { display: flex; gap: 10px; }
.articleRatings .rateAction {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 72px; height: 44px; padding: 0 20px; box-sizing: border-box;
  font-size: 0; color: transparent;
  background: #fff !important; border: 1px solid rgba(112,106,114,.38) !important; border-radius: 10px;
  box-shadow: none !important; cursor: pointer;
  transition: background-color .12s ease, transform .08s ease;
}
.articleRatings .rateAction svg, .articleRatings .rateAction i, .articleRatings .rateAction img { display: none !important; }
.articleRatings .rateAction::after {
  font-family: var(--ik-head); font-weight: 600; font-size: 13.5px; color: var(--ik-tropaz);
}
.articleRatings .rateAction--positive::after, .articleRatings [data-rating="positive"]::after { content: "Yes"; }
.articleRatings .rateAction--negative::after, .articleRatings [data-rating="negative"]::after { content: "No"; }
.articleRatings .rateAction--positive, .articleRatings [data-rating="positive"] { background: var(--ik-tropaz) !important; border-color: var(--ik-tropaz) !important; }
.articleRatings .rateAction--positive::after, .articleRatings [data-rating="positive"]::after { color: #fff; }
.articleRatings .rateAction:hover { background: var(--ik-cararra) !important; }
.articleRatings .rateAction--positive:hover, .articleRatings [data-rating="positive"]:hover { background: #24507A !important; }
.articleRatings .rateAction:active { transform: scale(.98); }
.articleRatings-feedback, .articleRatings-failure { font-size: 14px; color: var(--ik-tropaz); }

/* Related articles */
.related { max-width: 700px; margin: 36px 0 0; padding: 0; border: 0; }
.related h3 { font-family: var(--ik-head); font-weight: 600; font-size: 17px; color: var(--ik-tropaz); margin: 0 0 12px; }
.related ul > li > a { font-size: 15px; min-height: 50px; }

/* Article footer */
.articleFoot {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px;
  max-width: 700px; margin: 20px 0 0; padding: 0; border: 0;
  font-size: 13px; color: var(--ik-saltbox);
}
.articleFoot p, .articleFoot time { margin: 0; font-size: 13px; color: var(--ik-saltbox); font-style: normal; }
.articleFoot a { color: var(--ik-blue); }

/* ---------- Footer ---------- */
footer { background: transparent !important; border: 0 !important; padding: 0 40px 40px !important; text-align: center; }
footer p { font-size: 12.5px; color: var(--ik-saltbox) !important; margin: 0; }
footer a { color: var(--ik-saltbox) !important; }
footer a:hover { color: var(--ik-tropaz) !important; }

/* ---------- Contact modal ---------- */
#contactModal { border: 0; border-radius: 16px; box-shadow: 0 12px 34px rgba(42,92,139,.14); overflow: hidden; }
#contactModal h2 { font-family: var(--ik-head); font-weight: 500; color: var(--ik-tropaz); }
#contactModal input, #contactModal textarea {
  border: 1px solid rgba(112,106,114,.38); border-radius: 10px; box-shadow: none; font-family: var(--ik-body);
}
#contactModal input:focus, #contactModal textarea:focus { border-color: var(--ik-blue); box-shadow: 0 0 0 3px rgba(34,139,230,.15); }
#contactModal .btn-primary, #contactModal button[type="submit"] {
  height: 44px; padding: 0 22px; border: 0; border-radius: 10px;
  background: var(--ik-tropaz) !important; background-image: none !important; box-shadow: none; text-shadow: none;
  font-family: var(--ik-head); font-weight: 600; color: #fff;
}


/* ---------- Fixes from live preview ---------- */
/* Remove any leftover theme shadows in the content area */
#contentArea, #contentArea *:not(#serp-dd) { box-shadow: none !important; }
#contentArea *::before, #contentArea *::after { box-shadow: none !important; }

/* Nested numbered lists: lettered sub-steps, no double markers */
#fullArticle ol, #fullArticle ol > li { list-style: none !important; }
#fullArticle ol > li::marker { content: none; }
#fullArticle ol ol { counter-reset: ik-sub; margin: 12px 0 0; padding: 0; }
#fullArticle ol ol > li { counter-increment: ik-sub; padding-left: 38px; margin-bottom: 10px; }
#fullArticle ol ol > li::before {
  content: counter(ik-sub, lower-alpha);
  width: 24px; height: 24px; top: 0; font-size: 12px;
  background: #fff; border: 1px solid var(--ik-hair); box-sizing: border-box;
}
#fullArticle [class^="callout"] ol ol > li::before { background: #fff; }
#fullArticle ol ul, #fullArticle ul ul { margin: 10px 0 0; padding-left: 20px; }
#fullArticle ul ul > li { list-style: circle; }

/* Feedback box: keep both buttons inside */
.articleRatings { width: 100%; }
.articleRatings-actions { flex: none; margin: 0 !important; position: static !important; float: none !important; }
.articleRatings .rateAction { position: static !important; float: none !important; margin: 0 !important; }

/* Article footer: theme fonts, no mail icon */
.articleFoot, .articleFoot * { font-family: var(--ik-body) !important; }
.articleFoot i, .articleFoot svg, .articleFoot img, .articleFoot .icon-email { display: none !important; }

/* Related articles: sentence-case heading, padded list */
.related h3 { text-transform: none !important; letter-spacing: 0 !important; font-size: 17px !important; }
.related ul { padding: 0 22px !important; }
@media (max-width: 767px) { .related ul { padding: 0 16px !important; } }


/* Feedback box: grid so the buttons can't overflow */
.articleRatings { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 16px; }
.articleRatings > *:not(.articleRatings-actions) { grid-column: 1; }
.articleRatings .articleRatings-actions {
  grid-column: 2; grid-row: 1;
  display: flex !important; gap: 10px; width: auto !important; min-width: 0 !important; max-width: none !important;
  padding: 0 !important; justify-self: end;
}
.articleRatings .rateAction { flex: none; width: auto !important; }

/* Related articles: icon inside the row padding */
.related ul > li { position: relative; padding: 0 !important; margin: 0 !important; }
.related ul > li > a { margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; position: static !important; }
.related ul > li > a::before, .related ul > li > a::after { position: static !important; margin: 0 !important; }
.related ul > li > i, .related ul > li > svg, .related ul > li > a > i, .related ul > li > a > svg { display: none !important; }
@media (max-width: 767px) {
  .articleRatings { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
  .articleRatings .articleRatings-actions { grid-column: 1; grid-row: auto; display: grid !important; grid-template-columns: 1fr 1fr; justify-self: stretch; }
}


/* ---------- Spacing normalization (overrides theme margins/padding) ---------- */
/* Article lists: inset rows; icon, title and chevron all inside the 22px panel padding */
.contentWrapper .articleList,
.contentWrapper .popArticles,
#serp-results,
.related ul { padding: 0 !important; margin: 0 0 24px !important; }
.contentWrapper .articleList > li,
.contentWrapper .popArticles > li,
#serp-results > li,
.related ul > li {
  margin: 0 22px !important; padding: 0 !important; position: relative;
  list-style: none !important; background: none !important;
}
.contentWrapper .articleList > li > a,
.contentWrapper .popArticles > li > a,
#serp-results > li > a,
.related ul > li > a {
  display: flex !important; align-items: center; gap: 14px;
  margin: 0 !important; padding: 16px 0 !important; position: static !important;
}
.contentWrapper .articleList > li > a::before,
.contentWrapper .popArticles > li > a::before,
#serp-results > li > a::before,
.related ul > li > a::before, .contentWrapper .articleList > li > a::after,
.contentWrapper .popArticles > li > a::after,
#serp-results > li > a::after,
.related ul > li > a::after { position: static !important; margin: 0 !important; }
.contentWrapper .articleList > li > i,
.contentWrapper .popArticles > li > i,
#serp-results > li > i,
.related ul > li > i, .contentWrapper .articleList > li > a > i,
.contentWrapper .popArticles > li > a > i,
#serp-results > li > a > i,
.related ul > li > a > i, .contentWrapper .articleList > li > a > svg,
.contentWrapper .popArticles > li > a > svg,
#serp-results > li > a > svg,
.related ul > li > a > svg { display: none !important; }
#serp-results > li { padding: 16px 0 !important; }
.related ul > li > a { padding: 14px 0 !important; }

/* Category page header: sort sits on the "Articles" row, not beside the title */
.contentWrapper .sort { position: static !important; top: auto !important; right: auto !important; }
#categoryHead > h1, .contentWrapper > h1 { margin: 0 0 16px !important; }
.contentWrapper .descrip { margin: 0 0 28px !important; }
#categoryHead, .contentWrapper:not(:has(#categoryHead)):has(> .articleList) { row-gap: 0; margin-bottom: 12px !important; }

/* Sidebar: 8px label gap, 2px between rows, 8px row padding, 10px icon gap */
#sidebar h3 { line-height: 1.4 !important; margin: 0 !important; padding: 0 8px 8px !important; }
#sidebar .nav-list { margin: 0 !important; padding: 0 !important; gap: 2px; }
#sidebar .nav-list li { margin: 0 !important; padding: 0 !important; }
#sidebar .nav-list li > a { padding: 8px !important; gap: 10px; }
#sidebar #searchBar { margin: 0 0 18px !important; }

/* Home category rows: 22px panel padding, 16px vertical, 16px icon gap */
.collection-category .category-list { padding: 0 22px !important; }
.category-list .category { padding: 16px 0 !important; margin: 0 !important; column-gap: 16px !important; }
.category-list .category > * { margin: 0 !important; }
@media (max-width: 767px) {
  .contentWrapper .articleList > li,
.contentWrapper .popArticles > li,
#serp-results > li,
.related ul > li { margin: 0 16px !important; }
  .contentWrapper .articleList > li > a,
.contentWrapper .popArticles > li > a,
#serp-results > li > a,
.related ul > li > a { padding: 14px 0 !important; }
  .collection-category .category-list { padding: 0 16px !important; }
  .category-list .category { padding: 14px 0 !important; column-gap: 14px !important; }
}


/* ---------- Category page: sort control on the "Articles" row ---------- */
#categoryHead {
  display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important; position: relative;
}
#categoryHead > h1 { grid-column: 1 / -1 !important; order: 1 !important; float: none !important; }
#categoryHead > .descrip, #categoryHead > p { grid-column: 1 / -1 !important; order: 2 !important; float: none !important; }
#categoryHead::before { order: 3 !important; grid-column: 1 !important; }
#categoryHead .sort, .contentWrapper .sort, #main-content .sort {
  order: 4 !important; grid-column: 2 !important; justify-self: end;
  position: static !important; float: none !important; inset: auto !important;
  margin: 0 !important; padding: 0 !important; width: auto !important; height: auto !important; text-align: right;
}
/* If the sort sits outside #categoryHead, lay out the wrapper instead */
.contentWrapper:has(> .sort):has(> #categoryHead) {
  display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
}
.contentWrapper:has(> .sort):has(> #categoryHead) > * { grid-column: 1 / -1; order: 5; }
.contentWrapper:has(> .sort):has(> #categoryHead) > #categoryHead { order: 1; display: block !important; margin-bottom: 0 !important; }
.contentWrapper:has(> .sort):has(> #categoryHead) > #categoryHead::before { content: none !important; display: none !important; }
.contentWrapper:has(> .sort):has(> #categoryHead)::before {
  content: "Articles" !important; display: block !important; order: 2; grid-column: 1;
  font-family: var(--ik-head); font-weight: 600; font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ik-saltbox);
}
.contentWrapper:has(> .sort):has(> #categoryHead) > .sort { order: 3 !important; grid-column: 2 !important; }
.contentWrapper:has(> .sort):has(> #categoryHead) > .articleList { margin-top: 12px !important; }
/* Select: 36px, 13.5px text, 10px radius — matches the design */
#categoryHead .sort select, .contentWrapper .sort select, #main-content .sort select {
  width: auto !important; min-width: 160px; height: 36px !important; line-height: 34px !important;
  padding: 0 34px 0 14px !important; margin: 0 !important; box-sizing: border-box !important;
  font-family: var(--ik-body) !important; font-size: 13.5px !important; color: var(--ik-tropaz) !important;
  background: #fff url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%232A5C8B%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%209l6%206%206-6%22%2F%3E%3C%2Fsvg%3E") no-repeat right 12px center / 14px 14px !important;
  -webkit-appearance: none !important; appearance: none !important;
  border: 1px solid rgba(112,106,114,.38) !important; border-radius: 10px !important; box-shadow: none !important;
  cursor: pointer;
}
#main-content .sort select:hover { border-color: var(--ik-tropaz) !important; }
@media (max-width: 767px) {
  #categoryHead .sort select, .contentWrapper .sort select, #main-content .sort select { min-width: 0; height: 40px !important; }
}


/* ---------- Home: "Can't find what you need?" contact block (inserted by contact-block script) ---------- */
.ik-contact {
  display: block !important; width: 100% !important; max-width: 1200px; align-self: stretch; flex: none;
  margin: 8px auto 56px; padding: 0 40px; box-sizing: border-box; text-align: left;
}
.ik-contact-inner { width: 100%; box-sizing: border-box; }
.ik-contact-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  background: var(--ik-cararra); border-radius: 16px; padding: 22px 26px;
}
.ik-contact-text { display: flex; flex-direction: column; gap: 2px; }
.ik-contact-title { font-family: var(--ik-head); font-weight: 600; font-size: 17px; line-height: 1.3; color: var(--ik-tropaz); }
.ik-contact-sub { font-family: var(--ik-body); font-size: 14px; line-height: 1.5; color: var(--ik-tropaz); }
.ik-contact-btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 22px; box-sizing: border-box;
  background: var(--ik-tropaz); color: #fff !important; border-radius: 10px; text-decoration: none !important;
  font-family: var(--ik-head); font-weight: 600; font-size: 14px;
  transition: background-color .12s ease, transform .08s ease;
}
.ik-contact-btn:hover, .ik-contact-btn:focus { background: #24507A; color: #fff !important; }
.ik-contact-btn:active { transform: scale(.98); }
@media (max-width: 767px) {
  .ik-contact { padding: 0 16px; margin: 28px auto 32px; }
  .ik-contact-inner { flex-direction: column; align-items: stretch; padding: 20px; gap: 14px; }
  .ik-contact-btn { width: 100%; }
}

/* =====================================================================
   Tablet & phone
   ===================================================================== */
@media (max-width: 979px) {
  #contentArea > .row-fluid { gap: 40px; }
  #sidebar { width: 240px !important; }
}

@media (max-width: 767px) {
  /* Help Scout's responsive base adds 20px side padding to body; make the hero full-bleed */
  body { padding-left: 0 !important; padding-right: 0 !important; }
  #mainNav, .navbar-fixed-top, .navbar-static-top { margin-left: 0 !important; margin-right: 0 !important; }
  #docsSearch { margin-left: 0 !important; margin-right: 0 !important; width: auto !important; }
  #mainNav .container-fluid { padding: 0 16px; }
  #mainNav .navbar-inner { min-height: 60px; }
  #mainNav .brand { padding: 20px 0; }
  #mainNav .brand img { height: 20px; }
  #mainNav .btn-navbar { display: flex; margin-top: 8px; }
  #mainNav .nav-collapse .nav { flex-direction: column; gap: 2px; padding: 4px 0 16px; }
  #mainNav .nav-collapse .nav > li > a {
    display: flex; align-items: center; min-height: 48px;
    padding: 0 14px !important; border: 0 !important; border-radius: 10px;
    font-size: 15px;
  }
  #mainNav .nav-collapse .nav > li.active > a { background: rgba(255,255,255,.14) !important; }
  #mainNav li#contact { display: none; }
  #mainNav li#contactMobile { display: block; }

  #docsSearch { padding: 32px 20px 40px; margin-bottom: 28px; }
  #docsSearch h1 { font-size: 32px; letter-spacing: -.4px; margin-bottom: 20px; }
  #docsSearch #searchBar { height: 52px; border-radius: 14px; }
  #docsSearch #searchBar .search-query { height: 52px; font-size: 15px; padding-left: 46px; background-position: 16px center; background-size: 18px 18px; }
  #docsSearch #searchBar button { display: none; }

  *:has(> .collection-category) { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-left: 16px; padding-right: 16px; }
  .collection-category { margin-bottom: 0 !important; }
  .collection-category .category-list { padding: 0 16px; }
  .category-list .category { grid-template-columns: 44px minmax(0, 1fr) 16px; column-gap: 14px; padding: 14px 0 !important; }
  .category-list .category::before { width: 44px; height: 44px; background-size: 20px 20px; }
  .category-list .category h3 { font-size: 15px; }
  .category-list .category p:not(.article-count) { font-size: 13px; }

  #contentArea { padding: 24px 20px 40px; }
  #contentArea > .row-fluid { flex-direction: column; gap: 32px; }
  #sidebar { width: 100% !important; padding: 16px; }
  #sidebar #searchBar { display: none; }

  :is(#categoryHead, .contentWrapper) > h1 { font-size: 26px; letter-spacing: -.4px; gap: 14px; }
  :is(#categoryHead, .contentWrapper) > h1::before { width: 48px; height: 48px; border-radius: 12px; background-size: 22px 22px; }
  .contentWrapper .descrip { font-size: 15px; }
  .contentWrapper .articleList, .contentWrapper .popArticles, #serp-results, .related ul { padding: 0 16px; }
  .contentWrapper .articleList > li > a, .contentWrapper .popArticles > li > a { font-size: 15px; }

  #fullArticle { font-size: 15px; }
  #fullArticle h1.title, #fullArticle .title { font-size: 28px; letter-spacing: -.4px; }
  #fullArticle .title + p { font-size: 16px; }
  #fullArticle h2 { font-size: 19px; margin-top: 32px; }
  #fullArticle ol > li { padding-left: 38px; }
  #fullArticle ol > li::before { width: 26px; height: 26px; font-size: 12px; }
  #fullArticle [class^="callout"] { padding: 16px 18px; font-size: 14.5px; border-radius: 14px; }

  .articleRatings { flex-direction: column; align-items: stretch; text-align: center; padding: 18px; }
  .articleRatings-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .articleFoot { flex-direction: column; gap: 4px; }

  footer { padding: 8px 20px 28px !important; }
  footer p { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}