/* ============================================================
   Support v3 — Hubb.church brand design system  (v20)
   Templates: AA Support v3 Home (83155) + Content (83156).
   One CSS file + one JS file (js/support.js). No frameworks.
   v20: numbered onboarding step rows get a soft ~0.5s hover fade
   (background, border, colour) instead of the snappy .18s tile
   default, plus a gentle grey -> lilac shift on the step number.
   v19: numbered onboarding steps — pages whose article carries a
   .sv3-order-listing marker render the listing as numbered rows
   (01, 02, ...) with a grey step number on the right of each row.
   v18: category listings split by destination — subgroup links
   (/Groups/) render as square tiles (.sv3-cattilegrid, same as
   homepage tiles incl. accent cycling); guide links (/Articles/)
   render as full-width rows (.sv3-cattiles, icon left).
   v17: category listing rows added (js/support.js rebuild).
   v16: on-brand colour + type pass per the Hubb Brand Guide.
   - Nunito Sans everywhere (was Inter); headings 800/900.
   - Neutrals retinted to the slate/lilac family; Slate #2C2C54
     for headings and all dark panels (hero, CTA, side card).
   - Hubb Purple #5F5CA7 for CTAs and links, Purple Dark
     #4E4B8F hover states, Yellow #FFCC0D for pill buttons on
     dark panels. Eyebrows in purple.
   - Topic-tile icons cycle the brand section-tile accents:
     Purple / Teal / Peach / Blush / Sky.
   Layout, spacing and motion unchanged from v15.
   v15: borderless article tables unless a header row exists.
   v14: hide the "site by Hubb.Church" footer badge.
   v12: motion pass (entrances, staggered reveals, view
   transitions), all respecting prefers-reduced-motion.
   ============================================================ */

:root {
  /* Brand palette (Hubb Brand Guide) */
  --sv3-purple:       #5f5ca7;
  --sv3-purple-dark:  #4e4b8f;
  --sv3-purple-light: #a186be;
  --sv3-yellow:       #ffcc0d;
  --sv3-yellow-deep:  #edbd06;
  --sv3-teal:         #3fa399;
  --sv3-peach:        #e38a5d;
  --sv3-blush:        #c85c85;
  --sv3-sky:          #7996b8;

  /* Neutrals, retinted to the slate/lilac family */
  --sv3-gray-950: #2c2c54;
  --sv3-gray-900: #34345c;
  --sv3-gray-800: #3f3f68;
  --sv3-gray-700: #44445e;
  --sv3-gray-600: #5c5c78;
  --sv3-gray-500: #7b7b94;
  --sv3-gray-400: #9c9bb2;
  --sv3-gray-300: #d9d7e8;
  --sv3-gray-200: #e6e4ef;
  --sv3-gray-100: #eef0f7;
  --sv3-gray-50:  #f3f4f9;
  --sv3-white:    #ffffff;
  --sv3-dark:     #2c2c54;
  --sv3-radius:    12px;
  --sv3-radius-lg: 16px;
  --sv3-radius-xl: 24px;
  --sv3-shadow-sm: 0 1px 2px 0 rgb(44 44 84 / 0.06);
  --sv3-shadow-md: 0 4px 6px -1px rgb(44 44 84 / 0.08), 0 2px 4px -2px rgb(44 44 84 / 0.06);
  --sv3-shadow-lg: 0 10px 15px -3px rgb(44 44 84 / 0.09), 0 4px 6px -4px rgb(44 44 84 / 0.06);
  --sv3-font: "Nunito Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sv3-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sv3-font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--sv3-gray-700);
  background: var(--sv3-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.sv3 *, .sv3 *::before, .sv3 *::after { box-sizing: border-box; }
.sv3 img { max-width: 100%; height: auto; border: 0; }
.sv3 a { color: inherit; text-decoration: none; }
.sv3 h1, .sv3 h2, .sv3 h3 {
  margin: 0;
  color: var(--sv3-gray-950);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.sv3 p { margin: 0; }

.sv3-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Buttons ---------- */
.sv3-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition: background-color .18s var(--sv3-ease), color .18s var(--sv3-ease), border-color .18s var(--sv3-ease), transform .18s var(--sv3-ease);
  cursor: pointer;
  border: 1px solid transparent;
}
.sv3-btn svg { width: 14px; height: 14px; flex: 0 0 auto; }
.sv3-btn:active { transform: scale(0.97); }
.sv3-btn-sm { padding: 8px 16px; font-size: 13px; }
.sv3-btn-primary { background: var(--sv3-purple); }
.sv3 a.sv3-btn-primary,
.sv3 a.sv3-btn-primary:link,
.sv3 a.sv3-btn-primary:visited,
.sv3 a.sv3-btn-primary:active { color: #ffffff !important; }
.sv3 a.sv3-btn-primary:hover { background: var(--sv3-purple-dark); color: #ffffff !important; }
.sv3-btn-ghost { border-color: var(--sv3-gray-300); background: transparent; }
.sv3 a.sv3-btn-ghost,
.sv3 a.sv3-btn-ghost:link,
.sv3 a.sv3-btn-ghost:visited { color: var(--sv3-gray-700) !important; }
.sv3 a.sv3-btn-ghost:hover { background: var(--sv3-gray-100); border-color: var(--sv3-purple-light); color: var(--sv3-gray-950) !important; }
.sv3-btn-ondark { background: var(--sv3-yellow); }
.sv3 a.sv3-btn-ondark,
.sv3 a.sv3-btn-ondark:link,
.sv3 a.sv3-btn-ondark:visited { color: var(--sv3-dark) !important; }
.sv3 a.sv3-btn-ondark:hover { background: var(--sv3-yellow-deep); color: var(--sv3-dark) !important; }

/* ---------- Header ---------- */
.sv3-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--sv3-gray-200);
  transition: box-shadow .25s var(--sv3-ease);
}
.sv3-header.sv3-scrolled { box-shadow: var(--sv3-shadow-sm); }
.sv3-header-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  height: 68px;
}
.sv3-brand { display: flex; align-items: center; flex: 0 0 auto; }
.sv3-brand img, .sv3-logo img { height: 34px; width: auto; display: block; }

.sv3-nav {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.sv3-navbtn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-family: var(--sv3-font);
  font-size: 15px;
  font-weight: 700;
  color: var(--sv3-gray-950);
  white-space: nowrap;
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease;
}
.sv3-navbtn:hover { color: var(--sv3-purple); background: var(--sv3-gray-100); }
.sv3-navbtn svg { width: 13px; height: 13px; color: var(--sv3-purple); transition: transform .18s var(--sv3-ease); }
.sv3-navbtn.sv3-active { color: var(--sv3-purple); background: var(--sv3-gray-100); }
.sv3-navbtn.sv3-active svg { transform: rotate(180deg); }

.sv3-mega {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--sv3-white);
  border-bottom: 1px solid var(--sv3-gray-200);
  box-shadow: var(--sv3-shadow-lg);
  padding: 22px 0 26px;
}
.sv3-mega.sv3-open { display: block; }
.sv3-mega .sv3-topics { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.sv3-mega .sv3-topic { padding: 16px 10px; }
/* Fixed column counts on desktop so the rows balance: Help
   guides (13 items) falls 7 + 6; Getting started (9 items)
   falls 5 + 4. Scoped to desktop widths so the 2-column
   mobile menu below is untouched (the ID selectors would
   otherwise out-rank it). */
@media (min-width: 961px) {
  #sv3-mega-guides .sv3-topics { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  #sv3-mega-start .sv3-topics { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.sv3-mega-label {
  display: block;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sv3-purple);
  margin-bottom: 12px;
}

/* Mega menus ease open (JS toggles display; the inner container
   carries the entrance so display:none -> block still animates) */
.sv3-mega.sv3-open > .sv3-container {
  animation: sv3-mega-in .28s var(--sv3-ease) both;
}
@keyframes sv3-mega-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.sv3-header-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }

.sv3-nav-toggle {
  display: none;
  border: 1px solid var(--sv3-gray-300);
  background: transparent;
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
  color: var(--sv3-gray-700);
  font-family: var(--sv3-font);
  font-size: 13px;
  font-weight: 700;
}
@media (max-width: 960px) {
  .sv3-nav { display: none; }
  .sv3-nav-toggle { display: inline-flex; }
  .sv3-header.sv3-mobile-open .sv3-mega {
    display: block;
    position: static;
    box-shadow: none;
    border: 0;
    padding: 6px 0 14px;
  }
  .sv3-mega .sv3-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .sv3-header-actions .sv3-btn-ghost { display: none; }
}

/* ---------- Hero ---------- */
.sv3-hero {
  background: var(--sv3-dark);
  color: var(--sv3-gray-300);
  padding: 88px 0 96px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.sv3-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to right, rgb(255 255 255 / 0.05) 1px, transparent 1px), linear-gradient(to bottom, rgb(255 255 255 / 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 40%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 40%, transparent 100%);
  pointer-events: none;
}
.sv3-hero > .sv3-container { position: relative; }
.sv3-hero h1 {
  color: var(--sv3-white);
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.sv3-hero .sv3-hero-sub {
  font-size: 17px;
  color: #b9b8d4;
  max-width: 560px;
  margin: 0 auto 44px;
  text-align: center;
}

/* Search module (type 12) restyle. */
.sv3-searchwrap { max-width: 640px; margin: 0 auto; position: relative; }
#sv3-search {
  position: relative;
  text-align: left;
  font-size: 0;
  color: transparent;
  line-height: 0;
}
#sv3-search table, #sv3-search tbody, #sv3-search tr, #sv3-search td,
#sv3-search form, #sv3-search fieldset, #sv3-search > div { display: block; border: 0; padding: 0; margin: 0; width: 100%; position: static; }
#sv3-search a, #sv3-search label, #sv3-search span, #sv3-search h1, #sv3-search h2, #sv3-search h3,
#sv3-search .smalltext, #sv3-search select, #sv3-search input[type="checkbox"], #sv3-search input[type="radio"] { display: none !important; }
#sv3-search input[type="text"], #sv3-search input[type="search"] {
  width: 100%;
  height: 60px;
  padding: 0 118px 0 56px;
  border: 1px solid #4a4a7a;
  border-radius: 999px;
  background: var(--sv3-white);
  font-family: var(--sv3-font);
  font-size: 16px;
  line-height: normal;
  color: var(--sv3-gray-900);
  outline: none;
  margin: 0;
  box-shadow: var(--sv3-shadow-lg);
  transition: box-shadow .2s var(--sv3-ease), border-color .2s var(--sv3-ease);
}
#sv3-search input[type="text"]:focus, #sv3-search input[type="search"]:focus {
  border-color: var(--sv3-purple-light);
  box-shadow: 0 0 0 4px rgb(255 204 13 / 0.25), var(--sv3-shadow-lg);
}
#sv3-search input[type="text"]::placeholder { color: var(--sv3-gray-400); }
#sv3-search input[type="submit"], #sv3-search input[type="button"], #sv3-search button {
  display: inline-block;
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  height: 48px;
  padding: 0 26px;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: var(--sv3-purple);
  color: #ffffff !important;
  font-family: var(--sv3-font);
  font-size: 14px;
  font-weight: 700;
  line-height: 48px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color .18s var(--sv3-ease);
}
#sv3-search input[type="submit"]:hover, #sv3-search input[type="button"]:hover, #sv3-search button:hover { background: var(--sv3-purple-dark); }
.sv3-search-icon {
  position: absolute;
  left: 22px;
  top: 30px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--sv3-purple-light);
  pointer-events: none;
  z-index: 2;
}

.sv3-hero-quick {
  margin-top: 24px;
  font-size: 13.5px;
  color: #8f8eb0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  justify-content: center;
  align-items: center;
}
.sv3-hero-quick a {
  color: #cfcee4;
  border: 1px solid #4a4a7a;
  border-radius: 999px;
  padding: 5px 14px;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.sv3-hero-quick a:hover { color: var(--sv3-white); border-color: var(--sv3-purple-light); background: #3a3a66; }

/* ---------- Sections ---------- */
.sv3-section { padding: 72px 0 8px; }
.sv3-section-head { max-width: 620px; margin-bottom: 36px; }
.sv3-eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sv3-purple);
  margin-bottom: 10px;
}
.sv3-section h2 { font-size: clamp(24px, 3vw, 32px); margin-bottom: 10px; }
.sv3-section-sub { font-size: 16px; color: var(--sv3-gray-500); }
.sv3-section-cta { margin-top: 28px; }
.sv3-strip { padding: 48px 0 8px; }
.sv3-strip .sv3-section-head { margin-bottom: 24px; }

/* ---------- Featured panel (Getting Started) ---------- */
.sv3-featured { padding: 56px 0 8px; }
.sv3-featured-panel {
  background: var(--sv3-gray-50);
  border: 1px solid var(--sv3-gray-200);
  border-radius: var(--sv3-radius-xl);
  padding: 40px 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.sv3-featured-panel .sv3-eyebrow { margin-bottom: 6px; }
.sv3-featured-panel h2 { font-size: clamp(20px, 2.6vw, 28px); margin-bottom: 6px; }
.sv3-featured-text { max-width: 560px; }
.sv3-featured-text .sv3-featured-desc {
  display: block;
  font-size: 15px;
  color: var(--sv3-gray-500);
  line-height: 1.6;
}
@media (max-width: 640px) {
  .sv3-featured-panel { padding: 28px 24px; }
}

/* ---------- New and noteworthy: article slider ---------- */
.sv3-newsband { padding: 72px 0 8px; overflow-x: clip; }
.sv3-news-grid {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
.sv3-news-intro .sv3-eyebrow { margin-bottom: 10px; }
.sv3-news-intro h2 { font-size: clamp(24px, 3vw, 32px); margin-bottom: 10px; }
.sv3-slider-controls { display: flex; gap: 10px; margin-top: 26px; }
.sv3-slider-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--sv3-gray-300);
  background: var(--sv3-white);
  color: var(--sv3-gray-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, opacity .15s ease, border-color .15s ease;
}
.sv3-slider-btn svg { width: 17px; height: 17px; }
.sv3-slider-btn:hover { background: var(--sv3-gray-100); color: var(--sv3-purple); border-color: var(--sv3-purple-light); }
.sv3-slider-btn:disabled { opacity: 0.35; cursor: default; background: var(--sv3-white); }

.sv3-news-viewport { position: relative; margin-right: calc(50% - 50vw); min-width: 0; }
.sv3-news-viewport::before, .sv3-news-viewport::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 56px;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
}
.sv3-news-viewport::before { left: 0; background: linear-gradient(to right, var(--sv3-white), rgb(255 255 255 / 0)); }
.sv3-news-viewport::after { right: 0; background: linear-gradient(to left, var(--sv3-white), rgb(255 255 255 / 0)); }
.sv3-news-viewport.sv3-fade-l::before { opacity: 1; }
.sv3-news-viewport.sv3-fade-r::after { opacity: 1; }

.sv3-news-scroller {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 6px 88px 14px 6px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.sv3-news-scroller::-webkit-scrollbar { display: none; }
.sv3-news-card {
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--sv3-gray-50);
  border: 1px solid var(--sv3-gray-200);
  border-radius: var(--sv3-radius-lg);
  padding: 26px 24px;
  min-height: 200px;
  transition: border-color .2s var(--sv3-ease), transform .2s var(--sv3-ease), box-shadow .2s var(--sv3-ease), background-color .2s var(--sv3-ease);
}
.sv3-news-card:hover {
  background: var(--sv3-white);
  border-color: var(--sv3-purple-light);
  transform: translateY(-3px);
  box-shadow: var(--sv3-shadow-md);
}
.sv3-news-t {
  display: block;
  font-size: 16px;
  font-weight: 800;
  color: var(--sv3-gray-950);
  letter-spacing: -0.01em;
  line-height: 1.35;
}
.sv3-news-d {
  display: block;
  font-size: 13.5px;
  color: var(--sv3-gray-500);
  line-height: 1.55;
  flex: 1 1 auto;
}
.sv3-news-m {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding-top: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--sv3-purple);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color .3s ease;
}
.sv3-news-card:hover .sv3-news-m { text-decoration-color: var(--sv3-purple-light); }
@media (max-width: 860px) {
  .sv3-news-grid { grid-template-columns: 1fr; gap: 28px; }
  .sv3-news-viewport { margin-left: calc(50% - 50vw); }
  .sv3-news-scroller { padding-left: 24px; padding-right: 56px; }
  .sv3-news-card { flex-basis: 260px; }
}

/* No-JS fallback: the Articles List module renders as a plain list */
.sv3-news { max-width: 760px; }
#sv3-news table, #sv3-news .articles_boxout_contents { width: 100%; border-collapse: collapse; }
#sv3-news td { padding: 0; border: 0; }
#sv3-news tr.articlerow td, #sv3-news .articlerow {
  padding: 14px 0;
  border-bottom: 1px solid var(--sv3-gray-200);
  font-size: 15px;
  line-height: 1.5;
}
#sv3-news a {
  color: var(--sv3-purple);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: color .2s ease, text-decoration-color .3s ease;
}
#sv3-news a:hover { text-decoration-color: var(--sv3-purple-light); }
#sv3-news .smalltext { display: block; font-size: 13px; color: var(--sv3-gray-500); font-weight: 400; margin-top: 2px; }
#sv3-news .ArticleRss, #sv3-news img { display: none; }

/* Topic tiles */
.sv3-topics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
/* In page sections the product grid is a strict 5 across (2 rows
   of 5). The mega menus keep their own auto-fit layout. */
.sv3-section .sv3-topics { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* The Technical & account strip is 3 wide tiles across the full
   container width. */
.sv3-section .sv3-topics-wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) {
  .sv3-section .sv3-topics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sv3-section .sv3-topics-wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .sv3-section .sv3-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv3-section .sv3-topics-wide { grid-template-columns: 1fr; }
}
.sv3-topic {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  background: var(--sv3-gray-50);
  border: 1px solid transparent;
  border-radius: var(--sv3-radius);
  padding: 20px 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--sv3-gray-800);
  transition: background-color .18s var(--sv3-ease), border-color .18s var(--sv3-ease), transform .18s var(--sv3-ease), box-shadow .18s var(--sv3-ease);
}
.sv3-topics-wide .sv3-topic { padding: 28px 16px; font-size: 14.5px; gap: 10px; }
.sv3-topics-wide .sv3-topic svg { width: 24px; height: 24px; }
.sv3-topic svg { width: 22px; height: 22px; color: var(--sv3-purple); }
.sv3-topic:hover {
  background: var(--sv3-white);
  border-color: var(--sv3-purple-light);
  transform: translateY(-2px);
  box-shadow: var(--sv3-shadow-sm);
}
.sv3-topic:hover { color: var(--sv3-gray-950); }

/* Brand section-tile accents: icons cycle Purple / Teal / Peach /
   Blush / Sky across each grid (per the brand guide's
   "section-tile accents" palette). */
.sv3-topics .sv3-topic:nth-child(5n+1) svg { color: var(--sv3-purple); }
.sv3-topics .sv3-topic:nth-child(5n+2) svg { color: var(--sv3-teal); }
.sv3-topics .sv3-topic:nth-child(5n+3) svg { color: var(--sv3-peach); }
.sv3-topics .sv3-topic:nth-child(5n+4) svg { color: var(--sv3-blush); }
.sv3-topics .sv3-topic:nth-child(5n)   svg { color: var(--sv3-sky); }

/* ---------- Content page (article + sidebar) ---------- */
.sv3-crumbbar { padding: 20px 0 0; font-size: 13px; color: var(--sv3-gray-400); }
#sv3-crumbs a {
  color: var(--sv3-gray-500);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: color .2s ease, text-decoration-color .3s ease;
}
#sv3-crumbs a:hover { color: var(--sv3-purple); text-decoration-color: var(--sv3-purple-light); }
#sv3-crumbs table, #sv3-crumbs tbody, #sv3-crumbs tr, #sv3-crumbs td { display: inline; border: 0; padding: 0; margin: 0; }
#sv3-crumbs img { display: none; }

.sv3-page { padding: 28px 0 80px; }
.sv3-page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 60px;
  align-items: start;
}
@media (max-width: 900px) {
  .sv3-page-grid { grid-template-columns: 1fr; gap: 44px; }
}

/* Article typography */
.sv3-article { max-width: 860px; font-size: 16.5px; line-height: 1.75; color: var(--sv3-gray-700); }
.sv3-article h1 {
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 0 0 14px;
}
.sv3-article h2 {
  font-size: 21px;
  font-weight: 600;
  color: var(--sv3-gray-500);
  letter-spacing: -0.01em;
  line-height: 1.4;
  margin: 0 0 20px;
}
.sv3-article h3 {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.015em;
  margin: 34px 0 12px;
}
.sv3-article h4 { font-size: 16.5px; font-weight: 800; margin: 28px 0 10px; color: var(--sv3-gray-950); }
.sv3-article p { margin: 0 0 16px; }
.sv3-article hr {
  border: 0;
  border-top: 1px solid var(--sv3-gray-200);
  margin: 34px 0;
}
.sv3-article img {
  display: block;
  border-radius: var(--sv3-radius);
  margin: 22px 0;
}
.sv3-article a {
  color: var(--sv3-purple);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--sv3-gray-300);
  transition: text-decoration-color .3s ease, color .2s ease;
}
.sv3-article a:hover { color: var(--sv3-purple-dark); text-decoration-color: var(--sv3-purple-light); }
.sv3-article strong, .sv3-article b { color: var(--sv3-gray-950); font-weight: 700; }
.sv3-article ul, .sv3-article ol { margin: 0 0 18px; padding-left: 24px; }
.sv3-article li { margin: 0 0 7px; }
.sv3-article blockquote {
  margin: 26px 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--sv3-purple-light);
  color: var(--sv3-gray-600);
  font-size: 17px;
}

/* Tables. Hubb renders group/article listing feeds as plain
   tables with no header row, so by default tables inside the
   article area are completely line-free (no borders, no box).
   Only tables with a real header row (th) — i.e. genuine data
   tables authored in guides — get the bordered look. */
.sv3-article table { width: 100%; border-collapse: collapse; margin: 12px 0; border: 0; }
.sv3-article th, .sv3-article td {
  border: 0;
  background: transparent;
  padding: 8px 14px 8px 0;
  text-align: left;
  vertical-align: top;
}
.sv3-article table:has(th) { margin: 22px 0; font-size: 14.5px; }
.sv3-article table:has(th) th,
.sv3-article table:has(th) td { border: 1px solid var(--sv3-gray-200); padding: 10px 12px; }
.sv3-article th { background: var(--sv3-gray-50); color: var(--sv3-gray-950); font-weight: 700; }

.sv3-article iframe { max-width: 100%; border: 0; border-radius: var(--sv3-radius); margin: 22px 0; }
.sv3-article .smalltext { font-size: 13px; color: var(--sv3-gray-500); }
.sv3-article pre, .sv3-article code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 14px;
  background: var(--sv3-gray-50);
  border: 1px solid var(--sv3-gray-200);
  border-radius: 8px;
}
.sv3-article code { padding: 2px 6px; }
.sv3-article pre { padding: 16px 18px; overflow-x: auto; margin: 22px 0; }
.sv3-article pre code { border: 0; background: transparent; padding: 0; }

/* Listing feeds (Articles List markup) — keep these rules as a
   belt-and-braces layer on top of the header-row heuristic. */
.sv3-article table.articles_boxout_contents,
.sv3-article table[class*="boxout"] { border: 0; margin: 6px 0; font-size: 16px; }
.sv3-article table.articles_boxout_contents th,
.sv3-article table.articles_boxout_contents td,
.sv3-article table[class*="boxout"] th,
.sv3-article table[class*="boxout"] td { border: 0 !important; background: transparent; padding: 8px 12px 8px 0; }
.sv3-article tr.articlerow .smalltext { display: block; margin-top: 2px; }
.sv3-article .ArticleRss { display: none; }

/* Category listings (v18): js/support.js rebuilds embedded
   Article List output. Subgroup links (/Groups/) become square
   tiles in .sv3-cattilegrid (which also carries .sv3-topics for
   the homepage tile look + accent cycling); guide links
   (/Articles/) become full-width rows in .sv3-cattiles. */
.sv3-article .sv3-cattilegrid {
  margin: 10px 0 28px;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.sv3-article .sv3-cattilegrid a.sv3-topic {
  text-decoration: none;
  color: var(--sv3-gray-800);
  font-weight: 600;
  padding: 22px 12px;
}
.sv3-article .sv3-cattilegrid a.sv3-topic:hover { color: var(--sv3-gray-950); }

.sv3-cattiles {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 0 28px;
}
.sv3-article .sv3-cattiles a.sv3-topic {
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  text-align: left;
  gap: 14px;
  padding: 16px 20px;
  width: 100%;
  font-size: 14.5px;
  text-decoration: none;
  color: var(--sv3-gray-800);
  font-weight: 600;
}
.sv3-article .sv3-cattiles a.sv3-topic:hover { color: var(--sv3-gray-950); transform: none; }
.sv3-article .sv3-cattiles a.sv3-topic svg { width: 21px; height: 21px; flex: 0 0 auto; }

/* Numbered onboarding steps (v19): when the article carries a
   .sv3-order-listing marker, js/support.js renders the listing as
   full-width rows (.sv3-cattiles.sv3-numbered) with a big grey
   step number (01, 02, ...) pushed to the right of each row.
   v20: these rows get a soft ~0.5s hover fade instead of the
   snappy .18s tile default, and the step number eases grey ->
   lilac on hover for a friendly, unhurried feel. */
.sv3-article .sv3-order-listing { display: none; }
.sv3-article .sv3-cattiles.sv3-numbered a.sv3-topic {
  padding-right: 22px;
  transition: background-color .5s var(--sv3-ease), border-color .5s var(--sv3-ease), color .5s var(--sv3-ease), box-shadow .5s var(--sv3-ease);
}
.sv3-stepnum {
  margin-left: auto;
  padding-left: 16px;
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  color: var(--sv3-gray-300);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
  transition: color .5s var(--sv3-ease);
}
.sv3-article .sv3-cattiles.sv3-numbered a.sv3-topic:hover .sv3-stepnum { color: var(--sv3-purple-light); }

/* Hide raw tag output on articles (JS also catches text variants) */
.sv3-article .articletags, .sv3-article .ArticleTags, .sv3-article .article-tags, .sv3-article .tags { display: none; }

/* Sidebar */
.sv3-aside { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 900px) { .sv3-aside { position: static; } }
.sv3-sidecard {
  border: 1px solid var(--sv3-gray-200);
  border-radius: var(--sv3-radius-lg);
  padding: 20px 22px;
  background: var(--sv3-white);
}
.sv3-sidecard-dark { background: var(--sv3-dark); border-color: var(--sv3-dark); }
.sv3-sidecard-tint { background: var(--sv3-gray-50); }
.sv3-sidecard .sv3-side-t {
  display: block;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--sv3-gray-950);
  margin-bottom: 5px;
}
.sv3-sidecard-dark .sv3-side-t { color: var(--sv3-white); }
.sv3-sidecard .sv3-side-d {
  display: block;
  font-size: 13px;
  line-height: 1.55;
  color: var(--sv3-gray-500);
  margin-bottom: 13px;
}
.sv3-sidecard-dark .sv3-side-d { color: #b9b8d4; }
.sv3-side-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sv3-purple);
  margin-bottom: 8px;
}
.sv3-sidelist { display: block; }
.sv3-sidelist a {
  display: block;
  padding: 9px 0;
  border-top: 1px solid var(--sv3-gray-200);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--sv3-gray-700);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: color .2s ease, text-decoration-color .35s ease;
}
.sv3-sidelist a:first-child { border-top: 0; padding-top: 0; }
.sv3-sidelist a:hover { color: var(--sv3-purple); text-decoration-color: var(--sv3-purple-light); }
.sv3-sidelist .sv3-side-date { display: block; font-size: 11.5px; font-weight: 400; color: var(--sv3-gray-400); margin-top: 1px; text-decoration: none; }

/* ---------- CTA panel ---------- */
.sv3-cta { padding: 72px 0 88px; }
.sv3-cta-panel {
  background: var(--sv3-dark);
  border-radius: var(--sv3-radius-xl);
  padding: 56px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.sv3-cta-panel h2 { color: var(--sv3-white); font-size: clamp(22px, 3vw, 30px); margin-bottom: 8px; }
.sv3-cta-panel p { color: #b9b8d4; font-size: 15px; max-width: 460px; }
.sv3-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Footer ---------- */
.sv3-footer {
  border-top: 1px solid var(--sv3-gray-200);
  padding: 56px 0 40px;
  font-size: 14px;
  color: var(--sv3-gray-500);
}
.sv3-sfgrid {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr 1fr;
  gap: 48px;
}
.sv3-sfh {
  display: block;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--sv3-gray-950);
  margin: 0 0 14px;
}
.sv3-sfgrid ul { list-style: none; margin: 0; padding: 0; }
.sv3-sfgrid li { margin: 0 0 9px; font-size: 14px; }
.sv3-sfgrid a {
  color: var(--sv3-gray-500);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: color .2s ease, text-decoration-color .3s ease;
}
.sv3-sfgrid a:hover { color: var(--sv3-purple); text-decoration-color: var(--sv3-purple-light); }
.sv3-sfbrand img { max-height: 30px; width: auto; margin-bottom: 18px; }
.sv3-sfbrand p { margin: 0 0 8px; font-size: 14px; line-height: 1.6; }
.sv3-sfbrand .sv3-sfcontact { display: inline-block; margin-top: 8px; font-weight: 600; color: var(--sv3-gray-700); }
.sv3-sfbrand .sv3-sfcontact:hover { color: var(--sv3-purple); }
@media (max-width: 900px) {
  .sv3-sfgrid { grid-template-columns: 1fr 1fr; gap: 36px 28px; }
}
@media (max-width: 540px) {
  .sv3-sfgrid { grid-template-columns: 1fr; }
}

.sv3-salesfooter { max-width: 760px; }
.sv3-salesfooter p { margin: 0 0 10px; font-size: 14px; line-height: 1.7; }
.sv3-salesfooter a { color: var(--sv3-gray-500); }
.sv3-salesfooter a:hover { color: var(--sv3-purple); }
.sv3-salesfooter img { max-height: 30px; width: auto; }
.sv3-salesfooter table, .sv3-salesfooter tbody, .sv3-salesfooter tr, .sv3-salesfooter td { display: block; border: 0; padding: 0; }

.sv3-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-top: 1px solid var(--sv3-gray-200);
  margin-top: 44px;
  padding-top: 24px;
  font-size: 13.5px;
}
.sv3-footerbar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 0; }
.sv3-footerbar a {
  display: inline-block;
  margin-left: 18px;
  color: var(--sv3-gray-500);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: color .2s ease, text-decoration-color .3s ease;
}
.sv3-footerbar a:first-child { margin-left: 0; }
.sv3-footerbar a:hover { color: var(--sv3-purple); text-decoration-color: var(--sv3-purple-light); }
.sv3-footerbar ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }

/* Hide the "site by Hubb.Church" badge the Footer Bar module
   emits: the logo image itself, plus whatever wraps it (link,
   list item or span) so the "site by" text disappears with it. */
.sv3-footerbar img { display: none !important; }
.sv3-footerbar a:has(img),
.sv3-footerbar li:has(img),
.sv3-footerbar span:has(img),
.sv3-footerbar div:has(> img) { display: none !important; }

/* ============================================================
   Motion (v12)
   Shared keyframes, page-load entrances, staggered reveals and
   cross-document view transitions. Everything is gated behind
   prefers-reduced-motion: no-preference (or neutralised in the
   reduce block further down).
   ============================================================ */

@keyframes sv3-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes sv3-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------- Page-load entrance ---------- */
@media (prefers-reduced-motion: no-preference) {

  /* Home hero: headline, subline, search and quick links rise
     in sequence; the grid backdrop fades up behind them. */
  .sv3-hero::before         { animation: sv3-fade .9s ease both .1s; }
  .sv3-hero h1              { animation: sv3-rise .6s var(--sv3-ease) both .05s; }
  .sv3-hero .sv3-hero-sub   { animation: sv3-rise .6s var(--sv3-ease) both .13s; }
  .sv3-hero .sv3-searchwrap { animation: sv3-rise .6s var(--sv3-ease) both .21s; }
  .sv3-hero .sv3-hero-quick { animation: sv3-rise .6s var(--sv3-ease) both .29s; }

  /* Content page: breadcrumb fades, article rises, then the
     three sidebar cards follow one after another. */
  .sv3-crumbbar             { animation: sv3-fade .5s ease both .04s; }
  .sv3-article              { animation: sv3-rise .55s var(--sv3-ease) both .08s; }
  .sv3-aside .sv3-sidecard  { animation: sv3-rise .55s var(--sv3-ease) both .16s; }
  .sv3-aside .sv3-sidecard:nth-child(2) { animation-delay: .24s; }
  .sv3-aside .sv3-sidecard:nth-child(3) { animation-delay: .32s; }
}

/* ---------- Cross-page transitions (View Transitions API) ----------
   Progressive enhancement: browsers that support cross-document
   view transitions get a soft crossfade between support pages
   while the sticky header holds perfectly still. Everyone else
   gets a normal navigation. */
@view-transition { navigation: auto; }
.sv3-header { view-transition-name: sv3-header; }
::view-transition-old(root) { animation-duration: .2s; }
::view-transition-new(root) { animation-duration: .3s; }

/* ---------- Reveal on scroll ---------- */
html.sv3-js .sv3-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s var(--sv3-ease), transform .6s var(--sv3-ease);
}
html.sv3-js .sv3-reveal.sv3-in { opacity: 1; transform: none; }

/* Topic grids: the tiles carry the motion instead, cascading in
   left-to-right; the grid itself only fades. */
html.sv3-js .sv3-topics.sv3-reveal { transform: none; }
html.sv3-js .sv3-topics.sv3-reveal .sv3-topic { opacity: 0; }
html.sv3-js .sv3-topics.sv3-reveal.sv3-in .sv3-topic {
  opacity: 1;
  animation: sv3-rise .55s var(--sv3-ease) backwards;
}
html.sv3-js .sv3-topics.sv3-reveal.sv3-in .sv3-topic:nth-child(2)  { animation-delay: .05s; }
html.sv3-js .sv3-topics.sv3-reveal.sv3-in .sv3-topic:nth-child(3)  { animation-delay: .1s; }
html.sv3-js .sv3-topics.sv3-reveal.sv3-in .sv3-topic:nth-child(4)  { animation-delay: .15s; }
html.sv3-js .sv3-topics.sv3-reveal.sv3-in .sv3-topic:nth-child(5)  { animation-delay: .2s; }
html.sv3-js .sv3-topics.sv3-reveal.sv3-in .sv3-topic:nth-child(6)  { animation-delay: .25s; }
html.sv3-js .sv3-topics.sv3-reveal.sv3-in .sv3-topic:nth-child(7)  { animation-delay: .3s; }
html.sv3-js .sv3-topics.sv3-reveal.sv3-in .sv3-topic:nth-child(8)  { animation-delay: .35s; }
html.sv3-js .sv3-topics.sv3-reveal.sv3-in .sv3-topic:nth-child(9)  { animation-delay: .4s; }
html.sv3-js .sv3-topics.sv3-reveal.sv3-in .sv3-topic:nth-child(10) { animation-delay: .45s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.sv3-js .sv3-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  html.sv3-js .sv3-topics.sv3-reveal .sv3-topic { opacity: 1 !important; animation: none !important; }
  .sv3-mega.sv3-open > .sv3-container { animation: none !important; }
  .sv3-card, .sv3-topic, .sv3-btn, .sv3-navbtn svg, .sv3-news-card { transition: none !important; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* ---------- Small screens ---------- */
@media (max-width: 640px) {
  .sv3-hero { padding: 60px 0 68px; }
  .sv3-section { padding: 52px 0 4px; }
  .sv3-newsband { padding: 52px 0 4px; }
  .sv3-cta-panel { padding: 36px 24px; }
  .sv3-salesfooter { max-width: none; }
  #sv3-search input[type="text"], #sv3-search input[type="search"] { padding-right: 78px; padding-left: 48px; }
  #sv3-search input[type="submit"], #sv3-search input[type="button"], #sv3-search button { padding: 0 16px; font-size: 13px; }
  .sv3-search-icon { left: 18px; }
}