/* =====================================================================
   Omni Desk — 2026 design system (md-files/WEBSITE_REDESIGN_2026.md)
   Loaded only in the preview (header.php adds html.od26). Every rule is
   scoped to html.od26, so the current site cannot be affected.
   Dark, quiet, one accent. No gradients, glows or decorative motion.
   ===================================================================== */

html.od26 {
  --bg:        #0b0c0f;
  --bg-alt:    #0f1115;
  --surface:   #13161b;
  --surface-2: #181b22;
  --line:      rgba(255, 255, 255, .08);
  --line-2:    rgba(255, 255, 255, .16);
  --text:      #ecedef;
  --muted:     #a3a8b2;
  --faint:     #6f7580;
  --accent:    #f7213c;
  --accent-hi: #ff3a53;
  --radius:    10px;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --main-font: var(--sans);
  --base-font: var(--sans);
  background: var(--bg);
}

/* ---------- Base ---------- */
html.od26 body { background: var(--bg); color: var(--muted); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
html.od26 h1, html.od26 h2, html.od26 h3, html.od26 h4, html.od26 h5, html.od26 h6,
html.od26 .main-font { font-family: var(--sans); color: var(--text); letter-spacing: -0.015em; }
html.od26 ::selection { background: rgba(247, 33, 60, .35); color: #fff; }
html.od26 #loading { display: none !important; }                 /* page shows at once, no spinner */
/* Scroll-in animation: the theme's own WOW.js + animate.css, unchanged — text and
   screenshots slide in from opposite sides, as on the current site (user, 2026-11-12). */
html.od26 .h26-row .h26-shot { transition: transform .35s cubic-bezier(.2, .7, .2, 1), border-color .35s; }
html.od26 .h26-row .h26-shot:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, .24); }

/* ---------- Header ---------- */
html.od26 #header .wsmainfull,
html.od26 #header .wsmobileheader { background: rgba(11, 12, 15, .92) !important; backdrop-filter: saturate(140%) blur(8px); -webkit-backdrop-filter: saturate(140%) blur(8px); border-bottom: 1px solid var(--line); box-shadow: none !important; }
html.od26 .od26-wordmark { display: inline-flex; align-items: center; gap: 9px; color: var(--text); font-family: var(--sans); font-weight: 600; font-size: 19px; letter-spacing: -0.02em; line-height: 1; }
html.od26 .od26-wordmark img { width: 14px; height: auto; display: block; }
/* logo: the original "omni Business Suites" image (user, 2026-11-12) */
html.od26 .wsmenu > .wsmenu-list > li > a { font-family: var(--sans); font-weight: 500; font-size: 15px !important; color: var(--muted) !important; letter-spacing: 0; }
html.od26 .wsmenu > .wsmenu-list > li > a:hover,
html.od26 .wsmenu > .wsmenu-list > li:hover > a { color: var(--text) !important; }
html.od26 .wsmenu > .wsmenu-list > li > a.btn { margin-top: 22.6px !important; color: #fff !important; background: var(--accent) !important; border: 0 !important; border-radius: 8px; font-weight: 600; font-size: 14px !important; padding: 9px 16px !important; line-height: 1.2 !important; box-shadow: none !important; }
html.od26 .wsmenu > .wsmenu-list > li > a.btn:hover { background: var(--accent-hi) !important; }
html.od26 .wsmenu > .wsmenu-list > li > a.btn .anim-txt + .anim-txt { display: none; }
html.od26 .wsmenu > .wsmenu-list > li > a.btn .btn-text { display: inline; }
@media (min-width: 992px) {
  html.od26 .wsmenu > .wsmenu-list > li > ul.sub-menu,
  html.od26 .wsmenu > .wsmenu-list > li > .wsmegamenu { background: var(--surface-2) !important; border: 1px solid var(--line-2) !important; border-radius: var(--radius); box-shadow: 0 16px 40px rgba(0, 0, 0, .45) !important; padding: 8px !important; }
  html.od26 .wsmenu > .wsmenu-list > li:nth-child(3) > ul.sub-menu { padding: 24px !important; }
  html.od26 .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a,
  html.od26 .wsmenu > .wsmenu-list > li:nth-child(3) > ul.sub-menu li a { color: var(--muted) !important; font-size: 14px !important; border-radius: 6px; padding: 8px 12px !important; display: block; }
  html.od26 .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a:hover,
  html.od26 .wsmenu > .wsmenu-list > li:nth-child(3) > ul.sub-menu li a:hover { color: var(--text) !important; background: rgba(255, 255, 255, .05) !important; }
  html.od26 .wsmenu > .wsmenu-list > li:nth-child(3) > ul.sub-menu h6 { color: var(--faint) !important; margin: 0 0 8px 12px !important; }
}
html.od26 .od-lang-menu { background: var(--surface-2); border-color: var(--line-2); box-shadow: 0 16px 40px rgba(0, 0, 0, .45); }
html.od26 .od-lang-item { color: var(--muted); }
html.od26 .od-lang-item:hover, html.od26 .od-lang-item:focus-visible { background: rgba(255, 255, 255, .06); color: var(--text); }
html.od26 .od-lang-item[aria-selected="true"] { color: var(--text); }
html.od26 .od-lang-item[aria-selected="true"]::after { color: var(--accent); }
@media (max-width: 991.98px) {
  html.od26 .wsmenu > .wsmenu-list { background: var(--bg-alt) !important; }
  html.od26 .wsmenu > .wsmenu-list > li > a { border-color: var(--line) !important; }
  html.od26 .wsmenu > .wsmenu-list > li > ul.sub-menu { background: var(--surface) !important; }
  html.od26 .wsmenu > .wsmenu-list > li > a.btn { margin: 16px 20px !important; display: block; text-align: center; padding: 12px 16px !important; }
}

/* ---------- Layout primitives (homepage) ---------- */
html.od26 .h26 { padding-top: 80px; }
html.od26 .h26-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
html.od26 .h26-sec { padding: 112px 0; border-top: 1px solid var(--line); }
html.od26 .h26-sec-alt { background: var(--bg-alt); }
html.od26 .h26 h2 { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.15; font-weight: 600; letter-spacing: -0.025em; margin: 0 0 16px; max-width: 22ch; }
html.od26 .h26 h3 { font-size: 17px; line-height: 1.35; font-weight: 600; margin: 0 0 8px; letter-spacing: -0.01em; }
html.od26 .h26-p { font-size: 17px; line-height: 1.65; color: var(--muted); max-width: 60ch; margin: 0 0 20px; }
html.od26 .h26-head { margin-bottom: 48px; }
html.od26 .h26-head h2 { max-width: none; }
html.od26 .h26-link { color: var(--text); font-weight: 500; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; }
html.od26 .h26-link:hover { text-decoration-color: var(--text); color: var(--text); }
html.od26 .h26-split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
html.od26 .h26-split-top { align-items: start; }

/* ---------- Buttons ---------- */
html.od26 .h26-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
html.od26 .h26-cta-center { justify-content: center; }
html.od26 .h26-btn { display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 22px; border-radius: 8px; font-size: 15px; font-weight: 600; text-decoration: none; transition: background-color .15s, border-color .15s, color .15s; }
html.od26 .h26-btn-primary { background: var(--accent); color: #fff; }
html.od26 .h26-btn-primary:hover { background: var(--accent-hi); color: #fff; }
html.od26 .h26-btn-ghost { color: var(--text); border: 1px solid var(--line-2); }
html.od26 .h26-btn-ghost:hover { border-color: var(--text); color: var(--text); }
html.od26 .h26-btn:focus-visible, html.od26 .h26-card:focus-visible, html.od26 .h26-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- Hero ---------- */
html.od26 .h26-hero { padding: 96px 0 0; }
html.od26 .h26-hero-copy { max-width: 720px; }
/* hero: copy left, featured-apps panel right (Zoho-style) */
html.od26 .h26-hero-top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
html.od26 .h26-hero-top .h26-hero h1, html.od26 .h26-hero-top h1 { font-size: clamp(40px, 4.6vw, 60px); }
html.od26 .h26-apps { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 28px 28px 22px; }
html.od26 .h26-apps-title { text-align: center; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text); margin: 0 0 26px; }
html.od26 .h26-apps-title::after { content: ""; display: block; width: 28px; height: 2px; background: var(--accent); margin: 10px auto 0; }
html.od26 .h26-apps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
html.od26 .h26-app { display: flex; gap: 14px; align-items: flex-start; padding: 14px 12px; border-radius: 10px; text-decoration: none; transition: background-color .2s; }
html.od26 .h26-app:hover { background: rgba(255, 255, 255, .04); }
html.od26 .h26-app-ico { flex: 0 0 28px; margin-top: 2px; }
html.od26 .h26-app-txt { display: flex; flex-direction: column; gap: 4px; }
html.od26 .h26-app-name { font-size: 18px; font-weight: 500; color: var(--text); letter-spacing: -0.01em; line-height: 1.25; }
html.od26 .h26-app-desc { font-size: 14px; line-height: 1.5; color: var(--muted); }
html.od26 .h26-app:hover .h26-app-name { color: #fff; }
html.od26 .h26-apps-all { display: block; text-align: center; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text); text-decoration: none; }
html.od26 .h26-apps-all:hover { color: var(--accent-hi); }
@media (max-width: 991.98px) {
  html.od26 .h26-hero-top { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 575.98px) {
  html.od26 .h26-apps { padding: 22px 14px 16px; }
  html.od26 .h26-apps-grid { grid-template-columns: 1fr; }
}
html.od26 .h26-kicker { font-family: var(--mono); font-size: 13px; color: var(--faint); margin: 0 0 20px; letter-spacing: 0; }
html.od26 .h26-hero h1 { font-size: clamp(40px, 5.6vw, 68px); line-height: 1.04; font-weight: 600; letter-spacing: -0.035em; margin: 0 0 24px; }
html.od26 .h26-lede { font-size: 19px; line-height: 1.6; color: var(--muted); max-width: 58ch; margin: 0; }
html.od26 .h26-note { font-size: 14px; color: var(--faint); margin: 14px 0 0; }
html.od26 .h26-shot { margin: 0; border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; background: var(--surface); }
html.od26 .h26-shot img { display: block; width: 100%; height: auto; }
html.od26 .h26-hero-shot { margin-top: 72px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; max-height: 560px; }
html.od26 .h26-hero-shot img { object-fit: cover; object-position: top left; }

/* ---------- Proof strip ---------- */
html.od26 .h26-proof { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-alt); }
html.od26 .h26-proof-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
html.od26 .h26-stat { padding: 32px 24px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
html.od26 .h26-stat:first-child { border-left: 0; padding-left: 0; }
html.od26 .h26-stat-n { font-family: var(--mono); font-size: 26px; font-weight: 500; color: var(--text); letter-spacing: -0.02em; }
html.od26 .h26-stat-l { font-size: 14px; color: var(--muted); }
/* countries strip — overlapping round flags, the visitor's own first when known */
html.od26 .h26-flags { display: flex; align-items: center; min-height: 1.2em; padding-left: 6px; }
html.od26 .h26-flags img { width: 26px; height: 26px; border-radius: 50%; margin-left: -3px; box-shadow: 0 0 0 2px var(--bg-alt); transition: transform .2s ease; position: relative; }
html.od26 .h26-flags img:hover { transform: translateY(-3px); z-index: 1; }
html.od26 .cur-opt img { width: 16px; height: 16px; border-radius: 50%; vertical-align: -3px; margin-right: 6px; }

/* ---------- Channels ---------- */
html.od26 .h26-channels { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
html.od26 .h26-channels li { padding: 18px 20px; font-size: 15px; color: var(--text); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); }
html.od26 .h26-channels li:nth-child(3n) { border-right: 0; }
html.od26 .h26-channels li:nth-last-child(-n+3) { border-bottom: 0; }

/* ---------- Product cards ---------- */
html.od26 .h26-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
html.od26 .h26-card, html.od26 .h26-fact { display: flex; flex-direction: column; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); text-decoration: none; transition: border-color .15s, background-color .15s; }
html.od26 .h26-card:hover { border-color: var(--line-2); background: var(--surface-2); }
html.od26 .h26-card p, html.od26 .h26-fact p { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0; flex-grow: 1; }
html.od26 .h26-ico { color: var(--text); margin-bottom: 20px; display: inline-flex; }
html.od26 .h26-more { margin-top: 20px; font-size: 14px; font-weight: 500; color: var(--text); }
html.od26 .h26-card:hover .h26-more { color: var(--accent-hi); }

/* ---------- Feature rows ---------- */
html.od26 .h26-row { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }
html.od26 .h26-row + .h26-row { margin-top: 112px; }
html.od26 .h26-row-flip { grid-template-columns: 7fr 5fr; }
html.od26 .h26-row-flip .h26-row-copy { order: 2; }
html.od26 .h26-ticks { list-style: none; margin: 8px 0 0; padding: 0; }
html.od26 .h26-ticks li { position: relative; padding: 10px 0 10px 28px; border-top: 1px solid var(--line); color: var(--text); font-size: 15px; }
html.od26 .h26-ticks li:last-child { border-bottom: 1px solid var(--line); }
html.od26 .h26-ticks li::before { content: ""; position: absolute; left: 2px; top: 17px; width: 12px; height: 7px; border-left: 1.6px solid var(--accent); border-bottom: 1.6px solid var(--accent); transform: rotate(-45deg); }

/* ---------- FAQ ---------- */
html.od26 .h26-faq details { border-top: 1px solid var(--line); }
html.od26 .h26-faq details:last-child { border-bottom: 1px solid var(--line); }
html.od26 .h26-faq summary { list-style: none; cursor: pointer; padding: 20px 36px 20px 0; position: relative; color: var(--text); font-weight: 500; font-size: 16px; }
html.od26 .h26-faq summary::-webkit-details-marker { display: none; }
html.od26 .h26-faq summary::after { content: ""; position: absolute; right: 6px; top: 26px; width: 9px; height: 9px; border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted); transform: rotate(45deg); transition: transform .15s; }
html.od26 .h26-faq details[open] summary::after { transform: rotate(-135deg); top: 30px; }
html.od26 .h26-faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
html.od26 .h26-faq-a { padding: 0 36px 20px 0; font-size: 15px; line-height: 1.65; }
html.od26 .h26-faq-a p:last-child { margin-bottom: 0; }
html.od26 .h26-faq-a a { color: var(--text); text-decoration: underline; }

/* ---------- Final CTA ---------- */
html.od26 .h26-end { padding: 120px 0; border-top: 1px solid var(--line); text-align: center; }
html.od26 .h26-end h2 { margin-left: auto; margin-right: auto; max-width: none; }
html.od26 .h26-end .h26-p { margin-left: auto; margin-right: auto; }

/* ---------- One page grid: header, content and footer share the same edges ---------- */
@media (min-width: 992px) {
  html.od26 #header .wsmainwp { max-width: 1200px !important; width: 100% !important; padding: 0 24px !important; margin: 0 auto !important; }
}
html.od26 .footer .container-xxl { max-width: 1200px; padding-left: 24px; padding-right: 24px; }

/* ---------- Footer ---------- */
html.od26 .footer { background: var(--bg-alt) !important; border-top: 1px solid var(--line); padding-top: 72px !important; }
html.od26 .footer, html.od26 .footer p, html.od26 .footer li, html.od26 .footer a { color: var(--muted); font-family: var(--sans); }
html.od26 .footer a:hover { color: var(--text); }
html.od26 .footer h6, html.od26 .footer .footer-links h6, html.od26 .footer .main-font { color: var(--text) !important; font-size: 14px !important; font-weight: 600; letter-spacing: 0; text-transform: none; }
html.od26 .footer .footer-info p { font-size: 15px; max-width: 34ch; margin-top: 16px; }
html.od26 .footer .bottom-footer { border-top: 1px solid var(--line) !important; margin-top: 48px; padding-top: 20px; }
html.od26 .footer hr, html.od26 .footer .divider { display: none; }
html.od26 .footer .footer-links li, html.od26 .footer .footer-links li p, html.od26 .footer .footer-links a { font-size: 14px !important; line-height: 1.5 !important; }
html.od26 .footer .footer-links li { margin-bottom: 10px; }
html.od26 .footer .bottom-footer p, html.od26 .footer .bottom-footer a { font-size: 13px !important; color: var(--faint); }
html.od26 .footer .od-lang-select { background: var(--surface); color: var(--muted); border: 1px solid var(--line-2); border-radius: 6px; padding: 4px 8px; }
html.od26 .footer .od-lang-select { border-color: var(--line-2); }

/* =====================================================================
   PRODUCT PAGES (product-2026.inc.php: /books, /sign, /hr-payroll)
   Hero = centred copy, then the screenshot with floating product cards
   drifting behind it over a faint arc (zoho.com/books pattern).
   ===================================================================== */
html.od26 .p26-hero { padding: 88px 0 0; overflow: hidden; }
html.od26 .p26-hero-copy { text-align: center; }
html.od26 .p26-hero-copy h1 { font-size: clamp(38px, 5vw, 62px); line-height: 1.06; font-weight: 600; letter-spacing: -0.035em; margin: 0 auto 22px; max-width: 18ch; }
html.od26 .p26-hero-copy .h26-lede { margin: 0 auto; max-width: 62ch; }
html.od26 .p26-stage { position: relative; max-width: 1440px; margin: 64px auto 0; padding: 0 24px; }
html.od26 .p26-arc { position: absolute; left: 50%; top: -70px; width: 1500px; height: 1500px; margin-left: -750px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 120px rgba(255, 255, 255, .012); pointer-events: none; }
html.od26 .p26-shot { position: relative; z-index: 2; max-width: 900px; margin: 0 auto; border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0;
  box-shadow: 0 -20px 80px rgba(0, 0, 0, .45); }
html.od26 .p26-card { position: absolute; z-index: 1; width: 230px; padding: 16px 18px; border-radius: 12px; background: rgba(24, 27, 34, .82);
  border: 1px solid var(--line-2); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; flex-direction: column; gap: 4px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35); animation: p26Drift 9s ease-in-out infinite; }
html.od26 .p26-card-k { font-size: 12px; color: var(--faint); font-family: var(--mono); }
html.od26 .p26-card-v { font-size: 20px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
html.od26 .p26-card-s { font-size: 13px; color: var(--muted); }
html.od26 .p26-card b { font-weight: 600; }
html.od26 .p26-card .is-ok { color: #4ade80; }
html.od26 .p26-card .is-warn { color: #fbbf24; }
html.od26 .p26-card-1 { left: 16px;  top: 30px;  animation-delay: 0s; }
html.od26 .p26-card-2 { left: 56px;  top: 214px; animation-delay: -3s; animation-duration: 11s; }
html.od26 .p26-card-3 { right: 16px; top: 64px;  animation-delay: -1.5s; animation-duration: 10s; }
html.od26 .p26-card-4 { right: 56px; top: 250px; animation-delay: -5s; }
/* edge cards sit half behind the screenshot and fade toward the page edge */
html.od26 .p26-card-1, html.od26 .p26-card-2 { -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.45), #000 30%); mask-image: linear-gradient(90deg, rgba(0,0,0,.45), #000 30%); }
html.od26 .p26-card-3, html.od26 .p26-card-4 { -webkit-mask-image: linear-gradient(270deg, rgba(0,0,0,.45), #000 30%); mask-image: linear-gradient(270deg, rgba(0,0,0,.45), #000 30%); }
@keyframes p26Drift { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -14px, 0); } }
@media (max-width: 1359.98px) { html.od26 .p26-card { width: 200px; } html.od26 .p26-card-1, html.od26 .p26-card-3 { top: 20px; } }
@media (max-width: 1199.98px) { html.od26 .p26-card { display: none; } }
@media (max-width: 575.98px) { html.od26 .p26-hero { padding-top: 56px; } html.od26 .p26-stage { margin-top: 40px; padding: 0 16px; } }
@media (prefers-reduced-motion: reduce) { html.od26 .p26-card { animation: none; } }

/* pricing block */
html.od26 .p26-price { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
html.od26 .p26-price-card { background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px; padding: 32px; }
html.od26 .p26-price-from { margin: 0; font-size: 14px; color: var(--muted); }
html.od26 .p26-price-n { margin: 2px 0 16px; font-family: var(--mono); font-size: 34px; font-weight: 500; color: var(--text); letter-spacing: -0.02em; }
html.od26 .p26-price-n span { font-family: var(--sans); font-size: 15px; color: var(--muted); letter-spacing: 0; }
html.od26 .p26-price-card .h26-cta { margin-top: 24px; }
@media (max-width: 991.98px) { html.od26 .p26-price { grid-template-columns: 1fr; gap: 32px; } }

/* =====================================================================
   INNER PAGES — the theme's shared components, restyled once for every page
   (features, solutions, resources, contact, demo, pricing…). Animations are
   the theme's own WOW.js classes, untouched.
   ===================================================================== */

/* the dark theme pulls its colours from these variables — point them at ours */
html.od26 body.theme--dark {
  --dark-theme-bg: #0b0c0f;
  --cloud: #0f1115; --ghost: #0b0c0f; --oxford: #0f1115; --lavender: #13161b;
  --light-grey: #13161b; --white-smoke: #13161b; --sand: #13161b; --ink: #0b0c0f;
  --form-control: #13161b;
  --grey: rgba(255, 255, 255, .08); --silver: rgba(255, 255, 255, .12); --smoke: rgba(255, 255, 255, .08);
  --text-color: #a3a8b2; --header-link: #a3a8b2;
}
html.od26 .theme--dark .bg--white { background-color: var(--surface); }
html.od26 .theme--dark .gr--cloud, html.od26 .theme--dark .gr--lightgrey, html.od26 .theme--dark .gr--whitesmoke { background-image: none; }
html.od26 .bg--cloud, html.od26 .bg--ghost, html.od26 .bg--oxford { background-color: var(--bg-alt) !important; }
html.od26 .x-border, html.od26 .border-ghost { border-color: var(--line) !important; }

/* body copy */
html.od26 .division p, html.od26 .division li { color: var(--muted); }
html.od26 .division h2, html.od26 .division h3, html.od26 .division h4, html.od26 .division h5,
html.od26 .division .fs-54, html.od26 .division .fs-58, html.od26 .division .fs-48 { letter-spacing: -0.025em; font-weight: 600; }
html.od26 .division h6, html.od26 .division .fs-22, html.od26 .division .fs-23 { color: var(--text); letter-spacing: -0.01em; }

/* hero banners: no purple photo, flat dark with a hairline */
html.od26 .inner-page-hero { background-image: none !important; background-color: var(--bg) !important; border-bottom: 1px solid var(--line); }
html.od26 .inner-page-hero.pattern-02::before, html.od26 .inner-page-hero::after { display: none !important; }

/* small red-bar section labels → quiet mono labels */
html.od26 .module-subtitle { font-family: var(--mono); font-size: 13px !important; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--faint) !important; }
html.od26 .subtitle-lined { padding-left: 0 !important; border-left: 0 !important; }
html.od26 .subtitle-lined::before, html.od26 .subtitle-lined::after { display: none !important; }

/* buttons */
html.od26 .division .btn, html.od26 .footer .btn { font-family: var(--sans); font-weight: 600; border-radius: 8px !important; letter-spacing: 0; box-shadow: none !important; }
html.od26 .btn--blue, html.od26 .btn--theme { background-color: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }
html.od26 .btn--blue:hover, html.od26 .hover--blue:hover { background-color: var(--accent-hi) !important; border-color: var(--accent-hi) !important; color: #fff !important; }
html.od26 .btn--tra-black, html.od26 .btn--tra-white, html.od26 .btn--tra-grey { background: transparent !important; border: 1px solid var(--line-2) !important; color: var(--text) !important; }
html.od26 .btn--tra-black:hover, html.od26 .btn--tra-white:hover, html.od26 .btn--tra-grey:hover,
html.od26 .hover--black:hover, html.od26 .hover--tra-black:hover { background: transparent !important; border-color: var(--text) !important; color: var(--text) !important; }

/* cards / feature boxes */
html.od26 .fbox-1, html.od26 .fbox-2, html.od26 .fbox-3, html.od26 .fbox-4, html.od26 .fbox-5,
html.od26 .fbox-6, html.od26 .fbox-7, html.od26 .fbox-8, html.od26 .fbox-9, html.od26 .cbox-1,
html.od26 .pricing-3-table, html.od26 .addon-tile {
  background-color: var(--surface) !important; border: 1px solid var(--line) !important; box-shadow: none !important;
  border-radius: 12px !important; transition: border-color .2s, background-color .2s;
}
html.od26 .fbox-1:hover, html.od26 .fbox-2:hover, html.od26 .fbox-3:hover, html.od26 .fbox-5:hover,
html.od26 .fbox-9:hover, html.od26 .pricing-3-table:hover, html.od26 .addon-tile:hover { border-color: var(--line-2) !important; background-color: var(--surface-2) !important; }
html.od26 .fbox-3-img, html.od26 .fbox-2-img, html.od26 .fbox-1-img, html.od26 .img-block .bg--cloud { background-color: var(--bg-alt) !important; border-radius: 8px; }
html.od26 .fbox-ico [class^="flaticon-"]:before, html.od26 .fbox-ico span { color: var(--text) !important; }
html.od26 .fbox-txt p { font-size: 15px; line-height: 1.6; }

/* screenshots in content blocks */
html.od26 .img-block img.img-fluid { border-radius: 10px; }

/* numbered / ticked lists */
html.od26 .simple-list li p, html.od26 .txt-block li p { color: var(--muted); }

/* statistics */
html.od26 .statistic-number { font-family: var(--mono); font-weight: 500; letter-spacing: -0.02em; color: var(--text); }

/* social logo strip: quiet until hovered */
html.od26 .loop_carousel_left img, html.od26 .brands-section img { filter: grayscale(1) brightness(1.5); opacity: .6; transition: filter .25s, opacity .25s; }
html.od26 .loop_carousel_left img:hover, html.od26 .brands-section img:hover { filter: none; opacity: 1; }

/* call-to-action banners: was a purple photo box */
html.od26 .banner-1-wrapper, html.od26 .banner-2-wrapper, html.od26 .banner-3-wrapper,
html.od26 .banner-5-wrapper, html.od26 .banner-section .bg--purple { background-color: var(--surface) !important; border: 1px solid var(--line-2); border-radius: 14px !important; overflow: hidden; }
html.od26 .banner-overlay { background-image: none !important; background-color: transparent !important; }
html.od26 .banner-section h2, html.od26 .banner-section .fs-48 { color: var(--text) !important; }
html.od26 .banner-section p { color: var(--muted) !important; }

/* FAQ accordions */
html.od26 .accordion-item { border-color: var(--line) !important; background: transparent !important; }
html.od26 .accordion-thumb h5, html.od26 .accordion-thumb h6, html.od26 .accordion-thumb .main-font { color: var(--text) !important; font-weight: 500; }
html.od26 .accordion-panel p { color: var(--muted); }

/* forms (contact, book a demo, partners) */
html.od26 .form-control, html.od26 .form-select, html.od26 textarea.form-control, html.od26 .division select, html.od26 .division input[type="text"],
html.od26 .division input[type="email"], html.od26 .division input[type="tel"], html.od26 .division input[type="datetime-local"] {
  background-color: var(--surface) !important; border: 1px solid var(--line-2) !important; color: var(--text) !important;
  border-radius: 8px !important; box-shadow: none !important; font-family: var(--sans);
}
html.od26 .form-control::placeholder { color: var(--faint) !important; }
html.od26 .form-control:focus, html.od26 .form-select:focus, html.od26 .division select:focus { border-color: var(--text) !important; outline: none; }

/* tables (pricing comparison, support plans) */
html.od26 .division table th, html.od26 .division table td { border-color: var(--line) !important; }
html.od26 .division table thead th { color: var(--text); }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
  html.od26 .h26 { padding-top: 64px; }
  html.od26 .h26-sec { padding: 80px 0; }
  html.od26 .h26-hero { padding-top: 56px; }
  html.od26 .h26-split, html.od26 .h26-row { grid-template-columns: 1fr; gap: 40px; }
  html.od26 .h26-row-flip { grid-template-columns: 1fr; }
  html.od26 .h26-row-flip .h26-row-copy { order: 0; }
  html.od26 .h26-row + .h26-row { margin-top: 80px; }
  html.od26 .h26-grid { grid-template-columns: 1fr 1fr; }
  html.od26 .h26-hero-shot { margin-top: 48px; }
}
@media (max-width: 575.98px) {
  html.od26 .h26-wrap { padding: 0 16px; }
  html.od26 .h26-sec { padding: 64px 0; }
  html.od26 .h26-hero h1 { font-size: 38px; }
  html.od26 .h26-lede { font-size: 17px; }
  html.od26 .h26-cta .h26-btn { flex: 1 1 100%; }
  html.od26 .h26-grid { grid-template-columns: 1fr; }
  html.od26 .h26-channels { grid-template-columns: 1fr 1fr; }
  html.od26 .h26-channels li:nth-child(3n) { border-right: 1px solid var(--line); }
  html.od26 .h26-channels li:nth-child(2n) { border-right: 0; }
  html.od26 .h26-channels li:nth-last-child(-n+3) { border-bottom: 1px solid var(--line); }
  html.od26 .h26-channels li:nth-last-child(-n+2) { border-bottom: 0; }
  html.od26 .h26-proof-row { grid-template-columns: 1fr 1fr; }
  html.od26 .h26-stat { padding: 24px 16px; border-left: 0; border-top: 1px solid var(--line); }
  html.od26 .h26-stat:nth-child(-n+2) { border-top: 0; }
  html.od26 .h26-stat:first-child { padding-left: 16px; }
  html.od26 .h26-stat-n { font-size: 22px; }
  html.od26 .h26-end { padding: 80px 0; }
}
@media (prefers-reduced-motion: reduce) {
  html.od26 * { transition: none !important; }
  html.od26 .animate__animated { animation: none !important; }
  html.od26 .wow { visibility: visible !important; }
}

/* PRICING CARDS — boss 2026-11-12: price was too big, "/user/month" wrapped under
   and overlapped it. Smaller figure, period kept on the same line. */
html.od26 .pricing-3-table .price .price1,
html.od26 .pricing-3-table .price .price2 { white-space: nowrap; }
html.od26 .pricing-3-table .price span { font-size: 2.6rem; letter-spacing: -0.03em; }
html.od26 .pricing-3-table .price sup { font-size: 1.5rem; top: -0.75em; right: 1px; }
html.od26 .pricing-3-table .price sup.validity { font-size: 1rem; top: 0; color: var(--muted); }
html.od26 .pricing-3-table .price p { white-space: normal; }
@media (max-width: 1199px) {
  html.od26 .pricing-3-table .price span { font-size: 2.25rem; }
  html.od26 .pricing-3-table .price sup { font-size: 1.3rem; }
}