/* Tive Support (support.tiveapp.com): a plain, text-first knowledge base. Brand colors from ~/Code/Tive/brand/tokens; Onest is the brand body font. */
:root {
  --text: #141a26; --text-2: #465568; --muted: #64728c; --line: #e6eaf0; --soft: #f7f8fa;
  --link: #0369a1; --link-hover: #025582;
  --font: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.kb { margin: 0; background: #fff; color: var(--text); font: 16px/1.65 var(--font); -webkit-font-smoothing: antialiased; }
.kb h1, .kb h2, .kb h3 { font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; margin: 0; }
.kb a { color: var(--link); text-decoration: none; }
.kb a:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 3px; }
.kb img { max-width: 100%; height: auto; }
.kb :focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 4px; }
.kb-wrap { max-width: 1040px; margin: 0 auto; padding: 0 24px; }
.kb-narrow { max-width: 720px; }
.kb-skip { position: absolute; left: -999px; } .kb-skip:focus { left: 12px; top: 12px; background: #fff; padding: 6px 10px; }

/* header */
.kb-top { border-bottom: 1px solid var(--line); background: #fff; }
.kb-top-in { display: flex; align-items: center; height: 60px; }
.kb-brand { display: flex; align-items: center; gap: 10px; color: var(--text) !important; text-decoration: none !important; }
.kb-brand span { font-weight: 500; color: var(--text-2); padding-left: 10px; border-left: 1px solid var(--line); line-height: 20px; }
.kb-nav { margin-left: auto; display: flex; align-items: center; gap: 20px; font-size: 15px; }
.kb-nav a { color: var(--text-2); } .kb-nav a[aria-current] { color: var(--text); font-weight: 500; }
.kb-nav-search { border: 1px solid var(--line); background: #fff; color: var(--muted); font: 15px var(--font); padding: 5px 8px 5px 12px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; gap: 24px; }
.kb-nav-search:hover { border-color: #cfd6df; }
.kb-nav-search kbd { font: 12px var(--font); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; }

/* home */
.kb-intro { padding: 64px 0 40px; text-align: center; }
.kb-intro h1 { font-size: 34px; }
.kb-sub { color: var(--text-2); font-size: 17px; margin: 8px 0 0; }
.kb-search { position: relative; margin: 28px auto 0; max-width: 560px; text-align: left; }
.kb-search input, .kb-palette input { width: 100%; font: 16px var(--font); color: var(--text); padding: 12px 16px; border: 1px solid #d5dbe3; border-radius: 8px; background: #fff; }
.kb-search input:focus, .kb-palette input:focus { outline: none; border-color: var(--link); box-shadow: 0 0 0 3px rgba(3,105,161,.12); }
.kb-topics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 48px; border-top: 1px solid var(--line); padding: 40px 0 8px; }
.kb-topic h2 { font-size: 17px; margin-bottom: 10px; }
.kb-topic h2 a { color: var(--text); }
.kb-topic ul { list-style: none; margin: 0; padding: 0; }
.kb-topic li { margin: 0 0 6px; font-size: 15px; line-height: 1.45; }
.kb-all { display: inline-block; margin-top: 6px; font-size: 14px; font-weight: 500; }
.kb-contact-line { margin: 56px 0 0; padding: 20px 0; border-top: 1px solid var(--line); color: var(--text-2); text-align: center; }
.kb-contact-line p { margin: 0; }

/* search results */
.kb-results { list-style: none; margin: 0; padding: 4px; }
.kb-results-inline { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 6px); background: #fff; border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(20,26,38,.08); max-height: 420px; overflow: auto; }
.kb-results li a { display: block; padding: 10px 12px; border-radius: 6px; color: var(--text) !important; text-decoration: none !important; }
.kb-results li a strong { font-weight: 500; }
.kb-results li a .kb-res-topic { display: block; font-size: 13px; color: var(--muted); }
.kb-results li a small { display: none; }
.kb-results li[aria-selected="true"] a, .kb-results li a:hover { background: var(--soft); }
.kb-results mark { background: none; color: inherit; font-weight: 600; }
.kb-results li.kb-results-empty { padding: 10px 12px; color: var(--muted); font-size: 15px; }
.kb-results li.kb-results-empty a { display: inline; padding: 0; color: var(--link) !important; }
.kb-palette { position: fixed; inset: 0; z-index: 50; background: rgba(20,26,38,.35); display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; }
.kb-palette[hidden] { display: none; }
.kb-palette-card { width: 100%; max-width: 560px; background: #fff; border-radius: 10px; padding: 8px; box-shadow: 0 16px 48px rgba(20,26,38,.2); }
.kb-palette .kb-results { max-height: 50vh; overflow: auto; }

/* article */
.kb-doc { display: grid; grid-template-columns: 220px minmax(0, 720px); gap: 56px; padding-top: 40px; justify-content: center; }
.kb-side { position: sticky; top: 24px; align-self: start; font-size: 14px; grid-column: 1; grid-row: 1; }
.kb-side-h { font-weight: 600; margin: 0 0 8px; } .kb-side-h a { color: var(--text); }
.kb-side ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.kb-side li a { display: block; padding: 5px 0 5px 14px; margin-left: -1px; border-left: 1px solid transparent; color: var(--text-2); line-height: 1.4; }
.kb-side li a:hover { color: var(--text); text-decoration: none; }
.kb-side li a[aria-current] { color: var(--text); font-weight: 500; border-left-color: var(--text); }
.kb-article { min-width: 0; grid-column: 2; grid-row: 1; }
.kb-crumbs { display: flex; gap: 8px; font-size: 14px; color: var(--muted); margin-bottom: 12px; }
.kb-crumbs a { color: var(--muted); }
.kb-article h1, .kb-page h1 { font-size: 30px; }
.kb-meta { color: var(--muted); font-size: 14px; margin: 6px 0 28px; }
.kb-video { margin: 0 0 28px; }
.kb-video-poster, .kb-video iframe { display: block; position: relative; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; border-radius: 8px; overflow: hidden; background: #000; cursor: pointer; }
.kb-video-poster img { width: 100%; height: 100%; object-fit: cover; }
.kb-play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(20,26,38,.75); }
.kb-play::after { content: ""; position: absolute; left: 26px; top: 20px; border-style: solid; border-width: 12px 0 12px 19px; border-color: transparent transparent transparent #fff; }
.kb-video-poster:hover .kb-play { background: rgba(20,26,38,.9); }
.kb-video figcaption { margin-top: 8px; color: var(--muted); font-size: 14px; }
.kb-body { font-size: 16.5px; line-height: 1.7; }
.kb-body > :first-child { margin-top: 0; }
.kb-body h2 { font-size: 21px; margin: 36px 0 10px; } .kb-body h3 { font-size: 18px; margin: 28px 0 8px; }
.kb-body p, .kb-body ul, .kb-body ol { margin: 0 0 16px; } .kb-body li { margin: 4px 0; } .kb-body ul, .kb-body ol { padding-left: 22px; }
.kb-body a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(3,105,161,.35); }
.kb-body strong { font-weight: 600; }
.kb-body figure { margin: 24px 0; } .kb-body figcaption { color: var(--muted); font-size: 14px; margin-top: 6px; }
.kb-body img { border: 1px solid var(--line); border-radius: 8px; cursor: zoom-in; max-height: 560px; width: auto; display: block; }
.kb-body code { font-size: 14px; background: var(--soft); padding: 1px 5px; border-radius: 4px; }
.kb-body blockquote { margin: 16px 0; padding: 2px 16px; border-left: 3px solid var(--line); color: var(--text-2); }
.kb-body table { width: 100%; border-collapse: collapse; font-size: 15px; } .kb-body th, .kb-body td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.kb-helpful { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 44px 0 0; padding-top: 20px; border-top: 1px solid var(--line); font-size: 15px; color: var(--text-2); }
.kb-helpful button { font: 14px var(--font); color: var(--text); background: #fff; border: 1px solid #d5dbe3; border-radius: 6px; padding: 4px 14px; cursor: pointer; }
.kb-helpful button:hover { border-color: var(--text-2); } .kb-helpful button[aria-pressed="true"] { border-color: var(--text); font-weight: 500; }
.kb-helpful button:disabled { cursor: default; }
.kb-helpful [hidden] { display: none; }
.kb-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; }
.kb-pager a { display: block; padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px; color: var(--text) !important; font-weight: 500; font-size: 15px; text-decoration: none !important; }
.kb-pager a:hover { border-color: #cfd6df; } .kb-pager small { display: block; color: var(--muted); font-weight: 400; font-size: 13px; }
.kb-pager-next { text-align: right; grid-column: 2; }
.kb-lightbox { position: fixed; inset: 0; z-index: 60; background: rgba(20,26,38,.85); display: grid; place-items: center; padding: 24px; cursor: zoom-out; }
.kb-lightbox[hidden] { display: none; } .kb-lightbox img { max-height: 92vh; max-width: 96vw; border-radius: 6px; }

/* topic and contact pages */
.kb-page { padding-top: 40px; }
.kb-list { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--line); }
.kb-list li { padding: 16px 0; border-bottom: 1px solid var(--line); }
.kb-list li > a { font-weight: 500; font-size: 17px; }
.kb-list p { margin: 4px 0 0; color: var(--text-2); font-size: 15px; }
.kb-form { margin-top: 28px; }
.kb-field { display: block; margin-bottom: 18px; } .kb-field > span { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; } .kb-field em { font-style: normal; color: var(--muted); font-weight: 400; }
.kb-field input, .kb-field textarea, .kb-field select { width: 100%; font: 16px var(--font); color: var(--text); padding: 10px 12px; border: 1px solid #d5dbe3; border-radius: 8px; background: #fff; }
.kb-field select { appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2364728c' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center; }
.kb-field input:focus, .kb-field textarea:focus, .kb-field select:focus { outline: none; border-color: var(--link); box-shadow: 0 0 0 3px rgba(3,105,161,.12); }
.kb-field .bad, .kb-field input.bad, .kb-field textarea.bad, .kb-field select.bad { border-color: #b3261e; }
.kb-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.kb-hp { position: absolute; left: -9999px; }
.kb-note { color: var(--muted); font-size: 14px; }
.kb-form-error { color: #b3261e; font-size: 15px; }
.kb-btn { font: 500 15px var(--font); color: #fff; background: var(--text); border: 0; border-radius: 8px; padding: 11px 20px; cursor: pointer; }
.kb-btn:hover { background: #2a3344; } .kb-btn:disabled { opacity: .6; cursor: default; }
.kb-sent { margin-top: 28px; padding: 24px; border: 1px solid var(--line); border-radius: 8px; } .kb-sent h2 { font-size: 20px; margin-bottom: 6px; } .kb-sent p { margin: 6px 0 0; color: var(--text-2); }
.kb-sent:focus { outline: none; }

/* footer */
.kb-foot { margin-top: 96px; border-top: 1px solid var(--line); padding: 24px 0 40px; font-size: 14px; color: var(--muted); }
.kb-foot-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; }
.kb-foot nav { display: flex; flex-wrap: wrap; gap: 8px 20px; } .kb-foot a { color: var(--muted); }

@media (max-width: 900px) {
  .kb-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kb-doc { grid-template-columns: 1fr; gap: 0; }
  .kb-article { grid-column: 1; grid-row: 1; }
  .kb-side { position: static; grid-column: 1; grid-row: 2; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); }
}
@media (max-width: 600px) {
  .kb-wrap { padding: 0 16px; }
  .kb-intro { padding: 40px 0 28px; } .kb-intro h1 { font-size: 28px; }
  .kb-topics { grid-template-columns: 1fr; gap: 32px; }
  .kb-nav-search { gap: 0; } .kb-nav-search kbd { display: none; }
  .kb-article h1, .kb-page h1 { font-size: 25px; }
  .kb-row2, .kb-pager { grid-template-columns: 1fr; } .kb-pager-next { grid-column: 1; text-align: left; }
}

/* ---- balance (Bryce, October 8, 2026: "too plain, I liked the boxes") ---- */
:root { --sky-pale: #e8f4fe; --sky-deep: #0369a1; --card-line: #e3e8ef; }
.kb-ico { display: inline-block; width: 1.2em; height: 1.2em; flex: none; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.kb-intro { background: var(--soft); border-bottom: 1px solid var(--line); padding: 56px 0 48px; }
.kb-intro h1 { font-size: 34px; }
.kb-search .kb-search-ico { position: absolute; left: 16px; top: 15px; color: var(--muted); font-size: 17px; pointer-events: none; }
.kb-search input { padding-left: 44px; height: 50px; border-radius: 10px; box-shadow: 0 1px 2px rgba(20,26,38,.04); }
.kb-section { padding-top: 40px; }
.kb-h2 { font-size: 19px; margin-bottom: 14px; }
.kb-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.kb-card { display: flex; flex-direction: column; gap: 4px; padding: 22px; background: #fff; border: 1px solid var(--card-line); border-radius: 12px; color: var(--text) !important; text-decoration: none !important;
  transition: border-color .15s, box-shadow .15s, transform .15s; }
.kb-card:hover { border-color: #b9dcf2; box-shadow: 0 6px 18px rgba(20,26,38,.07); transform: translateY(-2px); }
.kb-card-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--sky-pale); color: var(--sky-deep); font-size: 20px; margin-bottom: 10px; flex: none; }
.kb-card-name { font-weight: 600; font-size: 17px; }
.kb-card-desc { color: var(--text-2); font-size: 14.5px; line-height: 1.5; flex: 1; }
.kb-card-count { color: var(--muted); font-size: 13px; margin-top: 8px; }
.kb-popular { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kb-pop, .kb-boxlist a { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: #fff; border: 1px solid var(--card-line); border-radius: 10px; color: var(--text) !important; text-decoration: none !important; transition: border-color .15s, background .15s; }
.kb-pop > span:first-child { flex: 1; font-weight: 500; font-size: 15px; }
.kb-pop:hover, .kb-boxlist a:hover { border-color: #b9dcf2; background: #fbfdff; }
.kb-arrow { color: var(--muted); font-size: 15px; transition: transform .15s, color .15s; }
.kb-pop:hover .kb-arrow, .kb-boxlist a:hover .kb-arrow { transform: translateX(3px); color: var(--sky-deep); }
.kb-help-box { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 28px; border: 1px solid var(--card-line); border-radius: 12px; background: var(--soft); }
.kb-help-box .kb-h2 { margin: 0 0 4px; } .kb-help-box p { margin: 0; color: var(--text-2); }
.kb-btn { text-decoration: none !important; display: inline-block; }
a.kb-btn, a.kb-btn:hover { color: #fff !important; }
.kb-topic-head { display: flex; align-items: center; gap: 14px; }
.kb-topic-head .kb-card-ico { margin: 0; }
.kb-boxlist { display: grid; gap: 10px; margin-top: 28px; }
.kb-boxlist a > span:first-child { flex: 1; display: grid; gap: 2px; }
.kb-boxlist strong { font-weight: 500; font-size: 16px; } .kb-boxlist small { color: var(--text-2); font-size: 14px; line-height: 1.45; }
.kb-box { border: 1px solid var(--card-line); border-radius: 12px; padding: 24px; background: #fff; }
.kb-helpful.kb-box { padding: 16px 20px; border-top: 1px solid var(--card-line); background: var(--soft); }
.kb-video-poster, .kb-video iframe { border-radius: 12px; }
.kb-body img { border-radius: 10px; }
@media (max-width: 900px) { .kb-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .kb-cards, .kb-popular { grid-template-columns: 1fr; }
  .kb-intro { padding: 36px 0 32px; } .kb-intro h1 { font-size: 27px; }
  .kb-help-box { flex-direction: column; align-items: flex-start; }
}

/* featured box */
.kb-spot { position: relative; border: 1px solid var(--card-line); border-radius: 14px; background: #fff; padding: 22px; }
.kb-spot-label { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
.kb-slide { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.kb-slide[hidden] { display: none; }
.kb-slide.on { animation: kb-fadein .45s ease; }
@keyframes kb-fadein { from { opacity: 0; } to { opacity: 1; } }
.kb-slide-video .kb-video-poster, .kb-slide-video iframe { display: block; position: relative; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; border-radius: 10px; overflow: hidden; background: #000; cursor: pointer; }
.kb-slide-video img { width: 100%; height: 100%; object-fit: cover; }
.kb-slide-topic { margin: 0 0 6px; font-size: 13px; color: var(--sky-deep); font-weight: 500; }
.kb-slide-text h3 { font-size: 22px; line-height: 1.3; margin: 0 0 10px; }
.kb-slide-text h3 a { color: var(--text); }
.kb-slide-sum { color: var(--text-2); font-size: 15px; margin: 0 0 14px; }
.kb-slide-more { font-weight: 500; font-size: 15px; }
.kb-spot-nav { display: flex; align-items: center; gap: 10px; justify-content: flex-end; margin-top: 14px; }
.kb-spot-nav > button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--card-line); background: #fff; color: var(--text); font-size: 18px; line-height: 1; cursor: pointer; }
.kb-spot-nav > button:hover { border-color: #b9dcf2; }
.kb-dots { display: flex; gap: 6px; }
.kb-dots button { width: 7px; height: 7px; padding: 0; border-radius: 50%; border: 0; background: #cfd6df; cursor: pointer; transition: width .2s, background .2s; }
.kb-dots button[aria-current] { width: 20px; border-radius: 4px; background: var(--text); }
@media (max-width: 760px) { .kb-slide { grid-template-columns: 1fr; gap: 16px; } .kb-spot { padding: 16px; } }
@media (prefers-reduced-motion: reduce) { .kb-slide.on { animation: none; } }

/* header lockup: logo at 76px (brand minimum is 60px) with clear space; "Support" is a separate label, not a lockup */
.kb-brand { gap: 14px; }
.kb-brand img { width: 62px; height: auto; display: block; } /* brand minimum is 60px (Bryce, October 9, 2026: 76px was too big) */
.kb-brand .kb-brand-label { border: 0; padding: 0; font-size: 16px; font-weight: 500; color: var(--text-2); line-height: 1; padding-top: 5px; }

/* hero: icon shortcuts and faint brand icons in the band */
.kb-intro { position: relative; overflow: hidden; }
.kb-intro > .kb-wrap { position: relative; z-index: 1; }
.kb-shortcuts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.kb-shortcuts a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; background: #fff; border: 1px solid var(--card-line); border-radius: 999px;
  color: var(--text) !important; font-size: 14.5px; font-weight: 500; text-decoration: none !important; transition: border-color .15s, box-shadow .15s, transform .15s; }
.kb-shortcuts a:hover { border-color: #b9dcf2; box-shadow: 0 4px 12px rgba(20,26,38,.06); transform: translateY(-1px); }
.kb-shortcut-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--sky-pale); color: var(--sky-deep); font-size: 15px; }


/* hero: the brand icon pattern fades in from the corners, as in ~/Code/Tive/brand/card-templates/08-centered.html (pale tile, ~10% opacity,
   masked); the text sits in the clear middle, never on the pattern */
.kb-intro { position: relative; overflow: hidden; background: linear-gradient(180deg, #f5fbff 0%, #ffffff 100%); border-bottom: 1px solid var(--line); padding: 72px 0 56px; }
.kb-intro-pattern { position: absolute; inset: 0; pointer-events: none; background: url(img/tive-pattern-pale.svg) repeat; background-size: 520px; opacity: .55;
  -webkit-mask-image: radial-gradient(ellipse 38% 90% at 0% 0%, #000 0%, rgba(0,0,0,.4) 45%, transparent 75%), radial-gradient(ellipse 38% 90% at 100% 0%, #000 0%, rgba(0,0,0,.4) 45%, transparent 75%);
          mask-image: radial-gradient(ellipse 38% 90% at 0% 0%, #000 0%, rgba(0,0,0,.4) 45%, transparent 75%), radial-gradient(ellipse 38% 90% at 100% 0%, #000 0%, rgba(0,0,0,.4) 45%, transparent 75%); }
.kb-intro > .kb-wrap { position: relative; z-index: 1; }
.kb-intro-panel { background: none; border: 0; box-shadow: none; padding: 0; }
.kb-intro h1 { font-size: 38px; letter-spacing: -0.025em; }
.kb-intro .kb-sub { max-width: 540px; margin: 10px auto 0; font-size: 17px; }
.kb-intro .kb-search { max-width: 600px; margin-top: 30px; }
.kb-intro .kb-search input { height: 54px; border-radius: 12px; box-shadow: 0 2px 4px rgba(20,26,38,.04), 0 10px 30px rgba(3,105,161,.08); border-color: #d9e2ec; }
.kb-intro .kb-narrow { max-width: 900px; }
.kb-shortcuts { gap: 8px; margin-top: 24px; }
.kb-shortcuts a { font-size: 14px; padding: 5px 12px 5px 5px; background: rgba(255,255,255,.9); }
.kb-shortcut-ico { width: 28px; height: 28px; }
@media (max-width: 760px) { .kb-intro-pattern { opacity: .35; } }
@media (max-width: 600px) { .kb-intro { padding: 40px 0 32px; } .kb-intro h1 { font-size: 28px; } }

/* home: what's new, start here, groups */
.kb-new { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding: 10px 16px; border: 1px solid var(--card-line); border-radius: 10px; background: #fff;
  color: var(--text) !important; text-decoration: none !important; font-size: 15px; transition: border-color .15s; }
.kb-new:hover { border-color: #b9dcf2; }
.kb-new > span:nth-child(2) { flex: 1; font-weight: 500; }
.kb-new-tag { font-size: 12px; font-weight: 600; letter-spacing: .03em; padding: 2px 9px; border-radius: 999px; background: var(--sky-pale); color: var(--sky-deep); }
.kb-new:hover .kb-arrow { transform: translateX(3px); color: var(--sky-deep); }
.kb-start { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; counter-reset: none; }
.kb-start a { display: flex; gap: 14px; align-items: flex-start; height: 100%; padding: 18px; border: 1px solid var(--card-line); border-radius: 12px; background: #fff;
  color: var(--text) !important; text-decoration: none !important; transition: border-color .15s, box-shadow .15s, transform .15s; }
.kb-start a:hover { border-color: #b9dcf2; box-shadow: 0 6px 18px rgba(20,26,38,.07); transform: translateY(-2px); }
.kb-start-n { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--text); color: #fff; font-weight: 600; font-size: 15px; }
.kb-start strong { display: block; font-weight: 600; font-size: 16px; } .kb-start small { display: block; color: var(--text-2); font-size: 14px; line-height: 1.45; margin-top: 2px; }
.kb-cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kb-biz { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: center; padding: 24px; border: 1px solid var(--card-line); border-radius: 12px; background: #fff; }
.kb-biz-head { display: flex; gap: 14px; align-items: flex-start; } .kb-biz-head .kb-card-ico { margin: 0; }
.kb-biz-head .kb-card-name { color: var(--text) !important; } .kb-biz-head p { margin: 4px 0 0; }
.kb-biz-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.kb-biz-list a { display: block; padding: 10px 14px; border-radius: 8px; background: var(--soft); color: var(--text) !important; font-weight: 500; font-size: 15px; text-decoration: none !important; }
.kb-biz-list a:hover { background: var(--sky-pale); }
.kb-help-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px !important; font-size: 14px; }
@media (max-width: 900px) { .kb-cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kb-start { grid-template-columns: 1fr; } .kb-biz { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .kb-cards-4 { grid-template-columns: 1fr; } }
.kb-btn { white-space: nowrap; } .kb-biz-title { margin: 0; } .kb-biz-title a { color: var(--text) !important; }

/* article: on this page, related, contact opt-in */
.kb-toc { margin: 0 0 28px; padding: 16px 20px; border: 1px solid var(--card-line); border-radius: 12px; background: var(--soft); }
.kb-toc p { margin: 0 0 6px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.kb-toc ol { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 15px; }
.kb-body h2[id], .kb-body h3[id] { scroll-margin-top: 20px; }
.kb-related { margin-top: 40px; }
.kb-related .kb-boxlist { margin-top: 0; }
.kb-check-line { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 18px; font-size: 15px; color: var(--text-2); cursor: pointer; }
.kb-check-line input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--sky-deep); flex: none; }

/* article body: numbered steps and centered screenshots */
.kb-body ol.kb-steps { list-style: none; counter-reset: step; padding-left: 0; margin: 20px 0 24px; display: grid; gap: 18px; }
.kb-body ol.kb-steps > li { counter-increment: step; position: relative; padding-left: 44px; margin: 0; }
.kb-body ol.kb-steps > li::before { content: counter(step); position: absolute; left: 0; top: 1px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--sky-pale); color: var(--sky-deep); font-weight: 600; font-size: 14px; display: grid; place-items: center; }
.kb-body ol.kb-steps > li > p:first-child { margin-top: 0; }
.kb-body figure { text-align: center; }
.kb-body figure img, .kb-body p > img:only-child { margin: 0 auto; }
.kb-body img { max-height: 520px; box-shadow: 0 6px 20px rgba(20,26,38,.07); }
.kb-body figcaption { text-align: center; }
.kb-body ol.kb-steps figure { margin: 14px 0 6px; }

/* ---- article page (October 8, 2026): topic chip, ASL tag, copy link, next step, "what was missing", phone screenshots ---- */
.kb-topic-chip { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 4px 12px 4px 4px; border: 1px solid var(--card-line); border-radius: 999px;
  color: var(--text-2) !important; font-size: 13.5px; font-weight: 500; text-decoration: none !important; background: #fff; }
.kb-topic-chip .kb-ico { width: 24px; height: 24px; padding: 4px; border-radius: 50%; background: var(--sky-pale); color: var(--sky-deep); -webkit-mask: none; mask: none; position: relative; }
.kb-topic-chip .kb-ico::after { content: ""; position: absolute; inset: 5px; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.kb-topic-chip:hover { border-color: #b9dcf2; color: var(--text) !important; }
.kb-article h1 { font-size: 32px; letter-spacing: -0.02em; }
.kb-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; color: var(--muted); font-size: 14px; margin: 10px 0 26px; }
.kb-meta-asl { display: inline-flex; align-items: center; gap: 6px; color: var(--sky-deep); font-weight: 500; }
.kb-meta-asl .kb-ico { font-size: 16px; }
.kb-copy { margin-left: auto; font: 13px var(--font); color: var(--text-2); background: #fff; border: 1px solid var(--card-line); border-radius: 6px; padding: 3px 10px; cursor: pointer; }
.kb-copy:hover { border-color: #b9dcf2; } .kb-copy.done { color: #0a7a43; border-color: #a7d7bb; }
.kb-video-tag { position: absolute; left: 14px; top: 14px; padding: 4px 10px; border-radius: 6px; background: rgba(20,26,38,.78); color: #fff; font-size: 13px; font-weight: 500; }
/* screenshots: phone screenshots at phone width on a soft panel; wide ones full width */
.kb-body figure, .kb-body p > img:only-child { display: block; }
.kb-body img.is-phone { max-width: 300px; max-height: none; width: 100%; margin: 0 auto; box-shadow: 0 8px 24px rgba(20,26,38,.10); }
.kb-body figure:has(img.is-phone) { background: var(--soft); border-radius: 12px; padding: 22px 16px 14px; text-align: center; }
.kb-body img.is-wide { width: 100%; max-height: none; }
/* next step */
.kb-next { display: flex; align-items: center; gap: 16px; margin: 36px 0 0; padding: 18px 20px; border-radius: 12px; background: var(--text); color: #fff !important; text-decoration: none !important; transition: transform .15s, box-shadow .15s; }
.kb-next:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(20,26,38,.18); }
.kb-next > span:first-child { flex: 1; display: grid; gap: 2px; } .kb-next small { color: #9fdcff; font-size: 13px; } .kb-next strong { font-weight: 600; font-size: 17px; }
.kb-next .kb-arrow { color: #fff; }
/* "did this answer your question?" */
.kb-helpful.kb-box { display: block; margin-top: 28px; }
.kb-helpful-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.kb-helpful-row .kb-helpful-q { margin-right: 6px; }
.kb-helpful > p, .kb-helpful > form { margin: 12px 0 0; }
.kb-helpful label { display: block; font-size: 14px; color: var(--text-2); margin-bottom: 6px; }
.kb-helpful textarea { width: 100%; font: 15px/1.5 var(--font); color: var(--text); padding: 10px 12px; border: 1px solid #d5dbe3; border-radius: 8px; background: #fff; }
.kb-helpful textarea:focus { outline: none; border-color: var(--link); box-shadow: 0 0 0 3px rgba(3,105,161,.12); }
.kb-helpful-actions { display: flex; align-items: center; gap: 16px; margin-top: 10px; font-size: 14px; }
.kb-helpful-actions .kb-btn { padding: 8px 16px; font-size: 14px; }
.kb-prev { margin: 24px 0 0; font-size: 14px; } .kb-prev a { color: var(--muted); }
/* sidebar contact card */
.kb-side-contact { display: grid; gap: 4px; margin-top: 24px; padding: 16px; border: 1px solid var(--card-line); border-radius: 12px; background: var(--soft); color: var(--text) !important; text-decoration: none !important; font-size: 14px; line-height: 1.45; }
.kb-side-contact strong { font-weight: 600; } .kb-side-contact span { color: var(--text-2); }
.kb-side-contact:hover { border-color: #b9dcf2; }
@media (max-width: 900px) { .kb-copy { margin-left: 0; } }
.kb-helpful .kb-btn { background: var(--text); color: #fff; border: 0; } .kb-helpful .kb-btn:hover { background: #2a3344; }

/* header search: widens on focus, results drop down under it (October 9, 2026: no popup) */
.kb-hsearch { position: relative; display: flex; align-items: center; }
.kb-hsearch input { width: 200px; height: 36px; padding: 0 34px 0 34px; font: 15px var(--font); color: var(--text); background: var(--soft); border: 1px solid var(--card-line); border-radius: 8px;
  transition: width .25s ease, background .2s, border-color .2s, box-shadow .2s; }
.kb-hsearch input::placeholder { color: var(--muted); }
.kb-hsearch input:focus { width: 380px; outline: none; background: #fff; border-color: var(--link); box-shadow: 0 0 0 3px rgba(3,105,161,.12); }
.kb-hsearch-ico { position: absolute; left: 11px; color: var(--muted); font-size: 15px; pointer-events: none; }
.kb-hsearch kbd { position: absolute; right: 9px; font: 12px var(--font); color: var(--muted); border: 1px solid var(--card-line); border-radius: 4px; padding: 0 5px; background: #fff; pointer-events: none; }
.kb-hsearch input:focus ~ kbd, .kb-hsearch input:not(:placeholder-shown) ~ kbd { display: none; }
.kb-hsearch-results { left: auto; right: 0; width: 420px; max-width: calc(100vw - 32px); top: calc(100% + 8px); z-index: 30; }
.kb-hsearch input::-webkit-search-cancel-button { margin-right: -24px; }
@media (max-width: 600px) {
  .kb-nav { gap: 12px; }
  .kb-hsearch input { width: 40px; padding: 0 0 0 34px; cursor: pointer; }
  .kb-hsearch input::placeholder { color: transparent; }
  .kb-hsearch kbd { display: none; }
  .kb-hsearch input:focus, .kb-hsearch input:not(:placeholder-shown) { width: calc(100vw - 150px); cursor: text; }
  .kb-hsearch input:focus::placeholder { color: var(--muted); }
  .kb-hsearch-results { width: calc(100vw - 32px); right: -60px; }
}
.kb-emergency { margin: 16px 0 0; font-size: 14px; color: var(--muted); }

/* callout boxes (October 9, 2026): written in Helpdesk as "Tip:", "Note:", "Good to know:", "Important:" or "Looking for ...?" paragraphs */
.kb-body .kb-callout { margin: 22px 0; padding: 14px 18px 14px 50px; border-radius: 10px; position: relative; border: 1px solid; }
.kb-body .kb-callout p { margin: 0; } .kb-body .kb-callout p + p { margin-top: 2px; }
.kb-body .kb-callout::before { content: ""; position: absolute; left: 16px; top: 15px; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--ci) center / contain no-repeat; mask: var(--ci) center / contain no-repeat; }
.kb-callout-label { font-size: 13px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.kb-callout-tip { background: #f0f9ff; border-color: #c5e9fe; --ci: url(icons/fast.svg); } .kb-callout-tip::before, .kb-callout-tip .kb-callout-label { color: #0369a1; }
.kb-callout-note { background: var(--soft); border-color: var(--card-line); --ci: url(icons/notification.svg); } .kb-callout-note::before, .kb-callout-note .kb-callout-label { color: #465568; }
.kb-callout-important { background: #fff8eb; border-color: #f5d9a8; --ci: url(icons/emergency.svg); } .kb-callout-important::before, .kb-callout-important .kb-callout-label { color: #b45309; }
.kb-callout-link { background: #fff; border-color: var(--card-line); --ci: url(icons/arrow.svg); } .kb-callout-link::before { color: var(--sky-deep); }
.kb-callout-link a { font-weight: 500; }

/* footer: social channels (all @thetiveapp, confirmed October 9, 2026), links, copyright */
.kb-foot-in { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 16px 32px; }
.kb-social { display: flex; gap: 8px; }
.kb-social a { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--card-line); color: var(--text-2) !important; text-decoration: none !important; font-size: 16px; transition: color .15s, border-color .15s, background .15s; }
.kb-social a:hover { color: var(--sky-deep) !important; border-color: #b9dcf2; background: var(--sky-pale); }
.kb-foot-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 20px; }
.kb-copyright { grid-column: 1 / -1; margin: 4px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
@media (max-width: 700px) { .kb-foot-in { grid-template-columns: 1fr; } .kb-foot-links { justify-content: flex-start; } }

/* email signature generator (moved from WordPress, October 9, 2026) */
.kb-esg .esg-grid { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 24px; }
.kb-esg .esg-card { min-width: 0; }
@media (max-width: 860px) { .kb-esg .esg-grid { grid-template-columns: 1fr; } }