/*
Theme Name: INDATA
Theme URI: https://weareindata.com
Author: INDATA
Author URI: https://weareindata.com
Description: A lightweight, block-based (Full Site Editing) theme for INDATA — the fully managed, fully integrated B2B ecommerce platform for industrial manufacturers, distributors, and wholesalers. Hand-built with native WordPress blocks, theme.json, and zero frameworks or jQuery. Square-cornered industrial aesthetic, navy/blue/mint palette, fully responsive.
Version: 3.7.17
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: indata
Tags: full-site-editing, block-patterns, blog, business, e-commerce, custom-logo, custom-menu, editor-style, featured-images, threaded-comments, translation-ready
*/

/* ============================================================
   DESIGN TOKENS
   These mirror the theme.json palette so the supplemental CSS
   and the editor stay in sync with the global design system.
   ============================================================ */
:root {
  --navy: #0C2C4C; --navy-dark: #091F35; --blue: #1F74EB; --blue-dark: #1A63C8;
  --blue-light: #4D93F0; --blue-pale: #EBF2FD; --white: #fff; --surface: #F6FAFD;
  --sky: #EEF4FB; --border: #E1E9EF; --body: #5D5B77; --gray: #5F7184;
  --mint: #3DD68C; --mint-pale: #D4F5E3; --emerald: #179A5B;
  --maxw: 1200px;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
/* Offset in-page anchor jumps so the target clears the sticky header (72px). */
#why-indata { scroll-margin-top: 88px; }
body {
  margin: 0; max-width: 100%; overflow-x: clip;
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--body); background: var(--white); line-height: 1.6; font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { color: var(--navy); font-weight: 800; line-height: 1.1; letter-spacing: -.01em; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

/* Layout helper: a centred, padded inner wrapper used inside section groups. */
.container { max-width: var(--maxw); margin-inline: auto; padding-inline: 28px; width: 100%; }

/* Sections built as <group tagName=section>. Neutralise default block gap so our
   own spacing rules drive the rhythm, and zero out core constrained padding. */
.wp-site-blocks > main { overflow-x: clip; }
.indata-section { padding-block: 78px; }
.indata-section.is-tight { padding-block: 56px; }

.blue { color: var(--blue); }
.mono { font-family: var(--mono); }

/* Eyebrow label */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin: 0;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: currentColor; }

.section-head { margin-bottom: 6px; }
.section-head h2 { font-size: clamp(28px, 4vw, 38px); max-width: 680px; margin: 14px 0 0; }
.section-head p { max-width: 640px; margin: 8px 0 0; }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 8px; top: 8px; background: #fff; padding: 8px 14px; z-index: 9999; }

/* ============================================================
   BUTTONS  (core/button block, variant classes on the wrapper)
   ============================================================ */
.wp-block-button__link {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px;
  padding: 13px 24px; border: 2px solid var(--blue); background: var(--blue); color: #fff;
  border-radius: 0; transition: all .18s; white-space: nowrap; line-height: 1.2;
}
.wp-block-button__link:hover { background: var(--blue-dark); border-color: var(--blue-dark); color: #fff; }
.wp-block-button.is-outline .wp-block-button__link { background: #fff; color: var(--navy); border-color: var(--border); }
.wp-block-button.is-outline .wp-block-button__link:hover { border-color: var(--blue); color: var(--blue); background: #fff; }
.wp-block-button.is-white .wp-block-button__link { background: #fff; color: var(--blue); border-color: #fff; }
.wp-block-button.is-white .wp-block-button__link:hover { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.wp-block-button.is-ghost .wp-block-button__link { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.wp-block-button.is-ghost .wp-block-button__link:hover { background: rgba(255,255,255,.1); color: #fff; }
.wp-block-button.has-arrow .wp-block-button__link::after { content: "\2192"; font-weight: 600; transition: transform .18s; }
.wp-block-button.has-arrow .wp-block-button__link:hover::after { transform: translateX(3px); }
.wp-block-button.has-arrow-down .wp-block-button__link::after { content: "\2193"; font-weight: 600; transition: transform .18s; }
.wp-block-button.has-arrow-down .wp-block-button__link:hover::after { transform: translateY(3px); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ============================================================
   HEADER  (click-to-open mega-menu navigation)
   ============================================================ */
/* FSE wraps the header part in a .wp-block-template-part box that is only as
   tall as the header itself, which traps position:sticky (nowhere to slide).
   Collapsing that wrapper lets the sticky header pin to the page scroll root. */
.wp-site-blocks > .wp-block-template-part:first-child { display: contents; }
.site-header {
  position: sticky; top: 0; z-index: 100; background: var(--navy);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.nav { display: flex; align-items: center; height: 72px; gap: 28px; }
.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand a { display: flex; align-items: center; }
.brand img, .brand .custom-logo { height: 30px; width: auto; display: block; }

.nav-menu { display: flex; align-items: center; gap: 2px; margin: 0 0 0 6px; padding: 0; list-style: none; }
.nav-menu > li { position: relative; }
.nav-menu > li > a, .nav-menu > li > button {
  display: flex; align-items: center; gap: 5px; font-size: 14.5px; font-weight: 500; color: rgba(255,255,255,.82);
  padding: 8px 12px; transition: .15s; background: none; border: 0; cursor: pointer; font-family: inherit;
}
.nav-menu > li > a:hover, .nav-menu > li > button:hover,
.nav-menu > li.is-open > .nav-top { background: rgba(255,255,255,.08); color: #fff; text-decoration: none; }
/* Contact Us — primary CTA styled as a blue button in the nav. */
.nav-menu > li.nav-cta-item { margin-left: 6px; }
.nav-menu > li.nav-cta-item > a { background: var(--blue); color: #fff; font-weight: 600; padding: 9px 18px; }
.nav-menu > li.nav-cta-item > a:hover { background: var(--blue-dark); color: #fff; }
.chev {
  width: 7px; height: 7px; border-right: 2px solid rgba(255,255,255,.55); border-bottom: 2px solid rgba(255,255,255,.55);
  transform: rotate(45deg); margin-top: -3px; transition: transform .2s, margin .2s;
}
.nav-menu > li.is-open .chev { transform: rotate(-135deg); margin-top: 2px; }

.nav-cta { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.nav-cta .nav-signin { display: inline-flex; align-items: center; gap: 7px; color: rgba(255,255,255,.85); font-weight: 600; font-size: 14px; text-decoration: none; transition: color .15s; }
.nav-cta .nav-signin:hover { color: #fff; text-decoration: none; }
.nav-cta .nav-signin svg { width: 16px; height: 16px; flex-shrink: 0; }
.nav-login { display: none; }
.nav-cta .btn {
  display: inline-flex; align-items: center; justify-content: center; padding: 9px 18px;
  font-size: 13.5px; font-weight: 600; border: 1px solid transparent; transition: .15s; cursor: pointer;
}
.nav-cta .btn-blue { background: var(--blue); color: #fff; border-color: var(--blue); }
.nav-cta .btn-blue:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
.nav-cta .btn-outline { background: transparent; color: rgba(255,255,255,.9); border-color: rgba(255,255,255,.35); }
.nav-cta .btn-outline:hover { border-color: #fff; color: #fff; }

/* Mega panel — opened on click (.is-open); :focus-within keeps it usable by keyboard. */
.mega {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 460px; background: #fff;
  border: 1px solid var(--border); box-shadow: 0 14px 34px rgba(12,44,76,.16); padding: 18px 0 14px;
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: .18s; pointer-events: none; z-index: 50;
}
/* Mega panel — JS drives open/close via .is-open (true click-to-open/close). */
.nav-menu > li.is-open .mega { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
/* No-JS fallback only: hover/focus reveals the panel when scripting is off. */
html:not(.js) .nav-menu > li:hover .mega,
html:not(.js) .nav-menu > li:focus-within .mega { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
html:not(.js) .nav-menu > li:hover .chev,
html:not(.js) .nav-menu > li:focus-within .chev { transform: rotate(-135deg); margin-top: 2px; }
.mega-head {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
  color: var(--gray); padding: 0 24px 12px; margin-bottom: 8px; border-bottom: 1px solid var(--border);
}
.mega-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 2px 6px; padding: 0 12px; }
.mega-link { display: block; padding: 9px 12px; transition: background .12s; }
.mega-link:hover { background: var(--surface); text-decoration: none; }
.mega-link .t { display: block; font-size: 13.5px; font-weight: 600; color: var(--navy); margin-bottom: 2px; }
.mega-link .d { display: block; font-size: 11.5px; color: var(--body); line-height: 1.4; }
.mega-foot { padding: 12px 24px 0; margin: 10px 12px 0; border-top: 1px solid var(--border); }
.mega-foot a { font-size: 12.5px; font-weight: 600; color: var(--blue); }
.mega-foot a:hover { color: var(--blue-dark); text-decoration: none; }

.nav-toggle {
  display: none; position: relative; margin-left: auto; width: 44px; height: 44px;
  background: none; border: 0; border-radius: 8px; padding: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: background .15s;
}
.nav-toggle:hover { background: rgba(255,255,255,.12); }
.nav-toggle:active { background: rgba(255,255,255,.18); }
.nav-toggle:focus { outline: none; }
.nav-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.nav-toggle span, .nav-toggle::before, .nav-toggle::after {
  content: ""; position: absolute; left: 11px; right: 11px; height: 2px; background: #fff;
  border-radius: 2px; transition: transform .22s, top .22s, bottom .22s, opacity .15s;
}
.nav-toggle span { top: 50%; margin-top: -1px; }
.nav-toggle::before { top: 14px; }
.nav-toggle::after { bottom: 14px; }
.site-header.open .nav-toggle span { opacity: 0; }
.site-header.open .nav-toggle::before { top: 50%; margin-top: -1px; transform: rotate(45deg); }
.site-header.open .nav-toggle::after { bottom: auto; top: 50%; margin-top: -1px; transform: rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; background: var(--wp--preset--gradient--hero, linear-gradient(160deg,#fff 0%,var(--blue-pale) 55%,#fff 100%));
  border-bottom: 1px solid var(--border); overflow: hidden;
}
.hero .container { padding-top: 70px; padding-bottom: 80px; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 54px; align-items: center; }
.hero-copy > * { margin-block: 0; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--border);
  box-shadow: 0 4px 14px rgba(12,44,76,.06); padding: 6px 14px 6px 6px; font-size: 12.5px; color: var(--body);
}
.hero-badge .pill { background: rgba(31,116,235,.1); color: var(--blue); font-weight: 600; padding: 3px 10px; font-size: 11px; }
.hero h1 { font-size: clamp(34px,5vw,60px); margin: 18px 0 0; letter-spacing: -.02em; }
.hero .lead { font-size: 18px; max-width: 560px; margin: 22px 0 0; }
.hero .lead b, .hero .lead strong { font-weight: 800; color: var(--blue); }
.hero-acts { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.hero-acts .wp-block-button__link { min-width: 190px; justify-content: center; }
.hero-trust { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 26px; font-size: 13px; color: var(--body); }
.hero-trust span { display: inline-flex; align-items: center; gap: 7px; }
.hero-trust svg { width: 15px; height: 15px; color: var(--blue); }
.hero-figure { position: relative; margin: 0; }
.hero-img-wrap { position: relative; overflow: hidden; border: 1px solid var(--border); box-shadow: 0 22px 50px rgba(12,44,76,.16); margin: 0; }
.hero-img-wrap img { width: 100%; aspect-ratio: 16/12; object-fit: cover; display: block; }
.chip {
  position: absolute; background: #fff; border: 1px solid var(--border); box-shadow: 0 10px 26px rgba(12,44,76,.14);
  padding: 10px 13px; font-size: 11px; z-index: 2;
}
.chip .t { font-weight: 700; color: var(--navy); }
.chip .s { color: var(--gray); font-family: var(--mono); font-size: 10px; margin-top: 2px; }
.chip-tl { top: -16px; left: -18px; }
.chip-br { bottom: -16px; right: -14px; }

/* ============================================================
   TRUST SCROLLER (CSS marquee)
   ============================================================ */
.scroller { padding: 46px 0 30px; text-align: center; border-bottom: 1px solid var(--border); }
.scroller-head { font-size: 12px; font-family: var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--gray); margin: 0 0 26px; }
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image: linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.marquee-track { display: flex; gap: 56px; width: max-content; animation: indata-scroll 32s linear infinite; }
.marquee-track span { font-size: 17px; font-weight: 700; color: var(--gray); white-space: nowrap; }
@keyframes indata-scroll { to { transform: translateX(-50%); } }
.marquee:hover .marquee-track { animation-play-state: paused; }

/* ============================================================
   METRICS
   ============================================================ */
.metrics { border-bottom: 1px solid var(--border); }
.metrics-grid { display: grid; grid-template-columns: repeat(4,1fr); }
/* Our custom grids space themselves with `gap`. WordPress treats these groups
   as flow layout and injects margin-block-start on every child except the
   first, which made the first cell sit higher than the rest — cancel it. */
.metrics-grid > *, .pillars-grid > *, .pricing-grid > *, .bento > *, .tour-grid > * { margin-block: 0 !important; }
.metric { text-align: center; padding: 38px 18px; border-left: 1px solid var(--border); }
.metric:first-child { border-left: none; }
.metric .n { font-size: 42px; font-weight: 800; color: var(--navy); line-height: 1; font-variant-numeric: tabular-nums; margin: 0; }
.metric .l { font-size: 13px; font-weight: 700; color: var(--navy); margin: 10px 0 0; }
.metric .s { font-size: 11.5px; color: var(--gray); font-family: var(--mono); margin: 5px 0 0; }

/* ============================================================
   PILLARS
   ============================================================ */
.pillars-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 44px; }
.pillar { background: var(--surface); border: 1px solid var(--border); padding: 30px; transition: .25s; }
.pillar:hover { box-shadow: 0 16px 38px rgba(12,44,76,.1); transform: translateY(-3px); }
.pillar h3 { font-size: 21px; margin: 0 0 10px; }
.pillar p { font-size: 14.5px; margin: 0; }
.pillar img { width: 100%; height: 160px; object-fit: cover; margin-top: 20px; border: 1px solid var(--border); }

/* ============================================================
   PRODUCT TOUR
   ============================================================ */
.tour { background: var(--sky); }
.tour-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; margin-top: 40px; }
.tour-tabs { display: flex; flex-direction: column; gap: 8px; }
.tour-tab {
  text-align: left; padding: 18px 22px; cursor: pointer; font: inherit;
  background: rgba(255,255,255,.55);
  border: 1px solid var(--border); border-left: 3px solid transparent;
  transition: background .2s, border-color .2s, box-shadow .2s, transform .2s;
}
.tour-tab .tt { display: block; font-size: 16px; font-weight: 700; color: #5a6b7b; transition: color .2s; }
.tour-tab .tb { display: block; font-size: 14.5px; color: var(--body); max-width: 34rem; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .3s, opacity .3s, margin .3s; }
.tour-tab:hover {
  background: #fff; border-left-color: var(--blue-light);
  box-shadow: 0 6px 18px rgba(12,44,76,.08); transform: translateX(2px);
}
.tour-tab:hover .tt { color: var(--navy); }
.tour-tab:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.tour-tab[aria-selected="true"] {
  border-left-color: var(--mint); background: #fff;
  box-shadow: 0 8px 24px rgba(12,44,76,.09); transform: none;
}
.tour-tab[aria-selected="true"] .tt { color: var(--navy); }
.tour-tab[aria-selected="true"] .tb { max-height: 240px; opacity: 1; margin-top: 10px; }
.tour-visual { position: relative; min-height: 410px; }
.mock { position: absolute; top: 0; left: 0; right: 0; background: #fff; border: 1px solid var(--border); box-shadow: 0 20px 50px rgba(12,44,76,.15); overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .45s ease, transform .45s ease, visibility .45s; pointer-events: none; }
.mock.is-active { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.mock-bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; border-bottom: 1px solid var(--border); background: #fff; }
.mock-bar i { width: 9px; height: 9px; background: var(--border); display: block; }
.mock-bar .mt { flex: 1; text-align: center; font-family: var(--mono); font-size: 11px; color: var(--gray); }

/* Product tour — scroll-pinned tabs. JS adds .tour--pinned (desktop + motion-OK)
   and sets .tour-scroll height inline; otherwise the section stays in normal
   flow and the tabs work on click. */
.tour-scroll { position: relative; }
@media (min-width: 901px) {
  .tour--pinned .tour-sticky {
    position: sticky; top: 72px; min-height: calc(100vh - 72px);
    display: flex; flex-direction: column; justify-content: center;
  }
  .tour--pinned .section-head { margin-bottom: 4px; }
}

/* ============================================================
   BENTO (core/cover image cards)
   ============================================================ */
.bento { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 48px; }
/* Cover card internals — defined locally so the bento never depends on the
   exact core cover stylesheet (also keeps the editor + preview faithful). */
.bento-card.wp-block-cover {
  position: relative; display: flex; min-height: 300px; border: 1px solid var(--border);
  box-shadow: 0 10px 30px rgba(12,44,76,.08); overflow: hidden;
  align-items: flex-end; justify-content: flex-start; padding: 30px;
}
.bento-card.wp-block-cover .wp-block-cover__image-background {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: 0; transition: transform .6s ease;
}
.bento-card.wp-block-cover:hover .wp-block-cover__image-background { transform: scale(1.05); }
.bento-card.wp-block-cover .wp-block-cover__background {
  position: absolute; inset: 0; z-index: 1; opacity: 1;
  background: linear-gradient(180deg, rgba(9,31,53,.20) 0%, rgba(9,31,53,.55) 55%, rgba(9,31,53,.85) 100%);
}
.bento-card .wp-block-cover__inner-container { position: relative; z-index: 2; width: 100%; max-width: 36rem; }
.bento-card h3 { color: #fff; font-size: 22px; margin: 0; }
.bento-card p { color: rgba(255,255,255,.86); font-size: 14.5px; margin: 8px 0 0; }

/* ============================================================
   COMPARISON
   ============================================================ */
.compare { background: var(--sky); padding: 72px 0; }
.compare-panel { position: relative; overflow: hidden; background: var(--navy-dark); color: #fff; padding: 48px 40px; }
.compare-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px; }
.compare-top h2 { color: #fff; font-size: clamp(26px,3.5vw,36px); max-width: 560px; margin: 12px 0 0; }
.compare .eyebrow { color: var(--blue-light); }
.alt-to { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; font-family: var(--mono); color: rgba(255,255,255,.6); }
.alt-to b { color: rgba(255,255,255,.82); font-weight: 600; }
.alt-to .amp { opacity: .6; }
.compare-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 28px; }
.compare-tabs .lab { font-size: 11px; font-family: var(--mono); text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.6); }
.ctab {
  display: flex; align-items: center; gap: 9px; padding: 0 18px; height: 44px; font-size: 13.5px; font-weight: 600;
  border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.06); color: rgba(255,255,255,.8); transition: .2s; cursor: pointer; font-family: inherit;
}
.ctab svg { width: 15px; height: 15px; }
.ctab:hover { background: rgba(255,255,255,.12); color: #fff; }
.ctab[aria-selected="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.compare-body { display: none; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; margin-top: 30px; }
.compare-body.is-active { display: grid; }
.compare-body h3 { color: #fff; font-size: clamp(22px,3vw,26px); margin: 0; }
.compare-body .compare-intro p { color: rgba(255,255,255,.65); font-size: 16px; margin: 14px 0 0; }
.compare-media { margin: 0; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); }
.compare-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   PRICING
   ============================================================ */
.pricing-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 44px; align-items: stretch; }
.plan { border: 1px solid var(--border); background: #fff; padding: 32px 28px; display: flex; flex-direction: column; }
.plan.feat { background: var(--navy); color: #fff; border-color: var(--navy); }
.plan .badge { align-self: flex-start; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--blue); background: var(--blue-pale); padding: 4px 10px; margin-bottom: 14px; }
.plan.feat .badge { color: #fff; background: rgba(255,255,255,.15); }
.plan h3 { font-size: 20px; margin: 0; } .plan.feat h3 { color: #fff; }
.plan .price { font-size: 40px; font-weight: 800; color: var(--navy); margin: 10px 0 4px; line-height: 1; }
.plan.feat .price { color: #fff; }
.plan .per { font-size: 13px; color: var(--gray); margin: 0; }
.plan .feature-list { margin: 22px 0; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.plan .feature-list p { display: flex; gap: 10px; font-size: 14px; align-items: flex-start; margin: 0; }
.plan .feature-list svg { width: 16px; height: 16px; color: var(--emerald); flex-shrink: 0; margin-top: 3px; }
.plan.feat .feature-list p { color: rgba(255,255,255,.85); } .plan.feat .feature-list svg { color: var(--mint); }
.plan .wp-block-button, .plan .wp-block-buttons { width: 100%; }
.plan .wp-block-button__link { width: 100%; justify-content: center; }

/* ============================================================
   CTA
   ============================================================ */
.cta-box { background: linear-gradient(135deg, rgba(12,44,76,.92) 0%, rgba(31,116,235,.80) 100%), url('assets/img/hero.webp'); background-size: cover; background-position: center; color: #fff; padding: 56px 32px; text-align: center; }
.cta-box h2 { color: #fff; font-size: clamp(26px,3.5vw,34px); margin: 0 0 12px; }
.cta-box p { color: rgba(255,255,255,.9); max-width: 540px; margin: 0 auto 26px; font-size: 16px; }
.cta-acts { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cta-acts .wp-block-button__link { min-width: 240px; justify-content: center; }

/* ============================================================
   INSIDE PAGES — DETAIL + OVERVIEW
   ============================================================ */
.page-hero { background: var(--surface); border-bottom: 1px solid var(--border); padding: 64px 0; }
.page-hero .grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 54px; align-items: center; }
.page-hero h1 { font-size: clamp(30px,4.5vw,46px); margin: 16px 0 6px; }
.page-hero .tag { font-size: 21px; font-weight: 600; color: var(--blue); margin: 0 0 16px; }
.page-hero .lead { font-size: 17px; max-width: 560px; margin: 0 0 26px; }
.page-hero .pic { position: relative; overflow: hidden; border: 1px solid var(--border); box-shadow: 0 18px 40px rgba(12,44,76,.14); margin: 0; }
.page-hero .pic img { width: 100%; aspect-ratio: 16/12; object-fit: cover; display: block; }
.caps-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; margin-top: 34px; }
.cap { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid var(--border); padding: 20px 22px; }
.cap i { flex-shrink: 0; width: 26px; height: 26px; background: var(--mint-pale); display: grid; place-items: center; margin-top: 1px; }
.cap i svg { width: 14px; height: 14px; color: var(--emerald); }
.cap p { font-size: 14.5px; color: var(--navy); font-weight: 500; margin: 0; }
.band { background: var(--navy); color: #fff; padding: 54px 0; }
.band .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.band h2 { color: #fff; font-size: 30px; margin: 0 0 12px; }
.band p { color: rgba(255,255,255,.7); margin: 0; }
.band .stats { display: flex; gap: 38px; flex-wrap: wrap; }
.band .stat .n { font-size: 38px; font-weight: 800; color: #fff; margin: 0; }
.band .stat .l { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.55); margin: 0; }

.ov-hero { background: linear-gradient(rgba(9,31,53,.88), rgba(12,44,76,.93)), url('assets/img/pillar-integrations.webp'); background-size: cover; background-position: center; color: #fff; padding: 74px 0; text-align: center; }
.ov-hero .eyebrow { color: var(--blue-light); }
.ov-hero .eyebrow::before { display: none; }
.ov-hero h1 { color: #fff; font-size: clamp(32px,5vw,48px); margin: 16px 0 14px; }
.ov-hero p { color: rgba(255,255,255,.72); max-width: 620px; margin: 0 auto; font-size: 18px; }
.ov-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; margin: 58px 0; }
.ov-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); overflow: hidden; transition: .22s; height: 100%; }
.ov-card:hover { box-shadow: 0 16px 36px rgba(12,44,76,.13); transform: translateY(-3px); border-color: rgba(31,116,235,.35); }
.ov-card img { width: 100%; height: 172px; object-fit: cover; }
.ov-card .b { padding: 22px 24px; }
.ov-card h3 { font-size: 20px; margin: 0 0 4px; }
.ov-card .t { color: var(--blue); font-weight: 600; font-size: 14px; margin: 0 0 8px; }
.ov-card .b > p { font-size: 14px; margin: 0; }
.ov-card .more { color: var(--blue); font-weight: 600; font-size: 13.5px; margin-top: 12px; display: inline-block; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--navy-dark); color: rgba(255,255,255,.6); padding: 56px 0 28px; font-size: 14px; }
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 30px; padding-bottom: 30px; border-bottom: 1px solid rgba(255,255,255,.08); }
.site-footer .footer-logo { display: inline-block; margin-bottom: 18px; }
.site-footer .footer-logo img { display: block; width: 150px; height: auto; }
/* Logo links: no harsh focus box on mouse click; keep a clean keyboard ring. */
.custom-logo-link:focus, .brand a:focus { outline: none; }
.custom-logo-link:focus-visible, .brand a:focus-visible { outline: 2px solid rgba(255,255,255,.7); outline-offset: 3px; border-radius: 2px; }
.site-footer p { margin: 14px 0 16px; max-width: 280px; }
.site-footer h5 { color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: .1em; margin: 0 0 14px; font-weight: 700; }
.site-footer a { color: rgba(255,255,255,.6); display: block; padding: 5px 0; transition: .15s; }
.site-footer a:hover { color: #fff; }
.site-footer .addr { line-height: 1.7; font-family: var(--mono); font-size: 12.5px; margin: 0; }
.footer-bottom { padding-top: 22px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 12.5px; color: rgba(255,255,255,.6); }
.footer-bottom p { margin: 0; }
.footer-links p { margin: 0; }
.footer-col, .footer-brand { min-width: 0; }

/* ============================================================
   GENERIC PROSE (default page / posts / 404 / search)
   ============================================================ */
.prose { max-width: 820px; margin: 0 auto; padding: 64px 28px; }
.prose h1 { font-size: 36px; margin-bottom: 20px; }
.prose h2 { font-size: 28px; margin: 28px 0 12px; }
.prose p { margin-bottom: 16px; }
.prose a { color: var(--blue); }
.prose ul { list-style: disc; padding-left: 22px; margin-bottom: 16px; }
.prose li { margin-bottom: 6px; }

/* ============================================================
   SCROLL REVEAL (progressive enhancement, class-based)
   Content is fully visible without JS; .js hides then reveals.
   ============================================================ */
.js .is-reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.js .is-reveal.is-visible { opacity: 1; transform: none; }
.is-reveal.delay-1 { transition-delay: .08s; }
.is-reveal.delay-2 { transition-delay: .16s; }
.is-reveal.delay-3 { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .is-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .marquee-track { animation: none !important; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* Navigation collapses to a hamburger before the menu gets cramped. */
@media (max-width: 900px) {
  .nav-menu, .nav-cta { display: none; }
  .nav-toggle { display: block; }
  .site-header.open .nav-menu {
    display: flex; position: absolute; top: 100%; left: 0; right: 0; background: #fff;
    flex-direction: column; align-items: stretch; padding: 6px 0 14px; gap: 0; margin: 0;
    border-top: 1px solid rgba(255,255,255,.08); box-shadow: 0 24px 48px rgba(12,44,76,.18);
    max-height: calc(100dvh - 72px); overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  .site-header.open .nav-menu > li { border-bottom: 1px solid var(--surface); }
  .site-header.open .nav-menu > li:last-child { border-bottom: 0; }
  .site-header.open .nav-menu > li > a,
  .site-header.open .nav-menu > li > .nav-top {
    width: 100%; min-height: 52px; padding: 14px 20px; color: var(--navy);
    font-size: 16px; font-weight: 600; background: none;
  }
  .site-header.open .nav-menu > li > .nav-top { justify-content: space-between; }
  .site-header.open .nav-menu > li.is-open > .nav-top { color: var(--blue); }
  .site-header.open .chev { border-right-color: var(--gray); border-bottom-color: var(--gray); }
  .site-header.open .nav-menu > li.is-open .chev { border-right-color: var(--blue); border-bottom-color: var(--blue); }
  /* Accordion: submenus stay collapsed until their section is tapped open. */
  .site-header.open .mega { display: none; }
  .site-header.open .nav-menu > li.is-open .mega {
    display: block; position: static; opacity: 1; visibility: visible; transform: none;
    pointer-events: auto; box-shadow: none; border: 0; min-width: 0; margin: 0;
    background: var(--surface); padding: 4px 0 10px;
  }
  .site-header.open .mega-head {
    padding: 10px 20px 4px; font-size: 11px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--gray);
  }
  .site-header.open .mega-grid { grid-template-columns: 1fr; padding: 0; gap: 0; }
  .site-header.open .mega-link { padding: 11px 20px 11px 28px; }
  .site-header.open .mega-link .t { font-size: 15px; }
  .site-header.open .mega-link .d { font-size: 12.5px; }
  .site-header.open .mega-foot { padding: 10px 20px 4px 28px; }
  /* Log in — visible on mobile, but a plain menu item: it inherits the standard
     item styling above (navy text, no background), same as Product Catalogs etc. */
  .nav-login { display: block; }
  /* Contact Us — primary CTA, full-width blue button in the open mobile menu. */
  .site-header.open .nav-menu > li.nav-cta-item { border-bottom: 0; margin-left: 0; padding: 14px 20px 6px; }
  .site-header.open .nav-menu > li.nav-cta-item > a {
    display: block; min-height: 0; text-align: center; background: var(--blue); color: #fff;
    padding: 14px; font-weight: 600; font-size: 15px;
  }
  .site-header.open .nav-menu > li.nav-cta-item > a:hover { background: var(--blue-dark); color: #fff; }
}
@media (max-width: 980px) {
  .hero-grid, .tour-grid, .compare-body, .band .grid, .page-hero .grid { grid-template-columns: 1fr; }
  .hero-figure, .page-hero .pic { order: -1; }
  .pillars-grid, .pricing-grid { grid-template-columns: 1fr; }
  .bento, .caps-grid, .ov-grid { grid-template-columns: 1fr; }
  .metrics-grid { grid-template-columns: 1fr 1fr; }
  .metric:nth-child(3) { border-left: none; }
  .compare-media { aspect-ratio: 16 / 10; }
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .hero .container { padding-top: 48px; padding-bottom: 56px; }
  .hero h1 { font-size: clamp(26px, 7vw, 36px); }
  .page-hero h1, .ov-hero h1 { font-size: clamp(26px, 7vw, 38px); }
  .metric { padding: 28px 14px; }
  .compare-panel { padding: 32px 22px; }
  .compare-top { flex-direction: column; align-items: flex-start; }
  .compare-tabs { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .compare-tabs .lab { margin-bottom: 2px; }
  .ctab { width: 100%; }
  .container { padding-inline: 20px; }
  .footer-top { grid-template-columns: 1fr; gap: 22px; }
  .footer-bottom { justify-content: flex-start; }
}

/* Mobile CTA buttons: equal side-by-side on small screens, then full-width
   stacked on phones. Overrides the desktop min-width floors so buttons fill
   the row instead of sitting narrow with dead space (home + inner pages). */
@media (max-width: 900px) {
  .hero-acts .wp-block-button,
  .cta-acts .wp-block-button { flex: 1 1 0; min-width: 0; }
  .hero-acts .wp-block-button__link,
  .cta-acts .wp-block-button__link { width: 100%; min-width: 0; }
}
@media (max-width: 520px) {
  .hero-acts, .cta-acts { flex-direction: column; align-items: stretch; }
  .hero-acts .wp-block-button,
  .cta-acts .wp-block-button { flex: 0 0 auto; width: 100%; }
}

/* Mobile product tour: JS moves each mock beneath its tab and adds
   .tour-grid--stacked. Render the active mock in normal flow under the selected
   tab (and hide the now-empty visual column + the non-active mocks). */
@media (max-width: 900px) {
  .tour-grid--stacked .tour-visual { display: none; }
  .tour-grid--stacked .mock { position: static; opacity: 1; visibility: visible; transform: none; pointer-events: auto; margin-top: 4px; box-shadow: 0 12px 30px rgba(12,44,76,.12); }
  .tour-grid--stacked .mock:not(.is-active) { display: none; }
}

/* ============================================================
   EDITOR-ONLY ADJUSTMENTS  (kept minimal)
   ============================================================ */
.editor-styles-wrapper .indata-section { padding-block: 40px; }

/* ============================================================
   FORMS  (contact form, search, comments, and any plugin forms)
   Styles native + common plugin markup so forms look on-brand.
   ============================================================ */
.prose form, .page-hero form, .indata-section form { max-width: 720px; }
input[type="text"], input[type="email"], input[type="url"], input[type="tel"],
input[type="password"], input[type="search"], input[type="number"], input[type="date"],
select, textarea, .wp-block-search__input {
  width: 100%; font: inherit; font-size: 15px; color: var(--navy);
  background: #fff; border: 1px solid var(--border); border-radius: 0;
  padding: 11px 14px; transition: border-color .15s, box-shadow .15s; margin: 0;
}
input:focus, select:focus, textarea:focus, .wp-block-search__input:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(31,116,235,.15);
}
textarea { min-height: 130px; resize: vertical; }
label { display: inline-block; font-size: 13.5px; font-weight: 600; color: var(--navy); margin-bottom: 6px; }
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--blue); margin-right: 8px; }
::placeholder { color: var(--gray); opacity: 1; }
fieldset { border: 1px solid var(--border); padding: 16px; margin: 0 0 16px; }
legend { font-weight: 700; color: var(--navy); padding: 0 6px; }
/* Generic submit / form buttons → brand blue, square */
button[type="submit"], input[type="submit"], input[type="button"], input[type="reset"], .button, .wp-element-button {
  font: inherit; font-weight: 600; font-size: 15px; cursor: pointer;
  background: var(--blue); color: #fff; border: 1px solid var(--blue); border-radius: 0;
  padding: 12px 24px; transition: background .15s, border-color .15s;
}
button[type="submit"]:hover, input[type="submit"]:hover, .button:hover, .wp-element-button:hover {
  background: var(--blue-dark); border-color: var(--blue-dark); color: #fff;
}
/* Required markers, validation, and common Gravity/CF7/WPForms wrappers */
.gfield, .wpforms-field, .wpcf7-form-control-wrap, .frm_form_field { margin-bottom: 18px; }
.gform_wrapper .gform_required_legend { display: none; }
.gfield_required, .required, .wpcf7-not-valid-tip { color: var(--red, #D63C3C); }
.gform_wrapper .gform_fields { display: grid; gap: 18px; }
.gform_wrapper .gfield input, .gform_wrapper .gfield select, .gform_wrapper .gfield textarea { width: 100%; }
.gform_confirmation_message, .wpforms-confirmation-container-full {
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--mint); padding: 18px 20px;
}

/* ============================================================
   TABLES  (generic content tables)
   ============================================================ */
.prose table, .indata-section table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 14.5px; }
.prose th, .prose td, table.shop_table th, table.shop_table td { border: 1px solid var(--border); padding: 12px 14px; text-align: left; }
.prose th, table.shop_table th { background: var(--surface); color: var(--navy); font-weight: 700; }

/* ============================================================
   WOOCOMMERCE  (my-account, shop/products, cart, checkout, single)
   Scoped, on-brand styling so commerce pages match the theme.
   ============================================================ */
.woocommerce, .woocommerce-page { color: var(--body); }
.woocommerce .woocommerce-breadcrumb { font-size: 13px; color: var(--gray); margin-bottom: 22px; }

/* Buttons */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt {
  background: var(--blue); color: #fff; border-radius: 0; font-weight: 600; padding: 12px 22px; border: 1px solid var(--blue);
  text-transform: none; letter-spacing: 0;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover { background: var(--blue-dark); border-color: var(--blue-dark); }

/* Notices */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews {
  border-top: 3px solid var(--blue); background: var(--surface); border-radius: 0; padding: 14px 18px 14px 20px; color: var(--navy);
}
.woocommerce-error { border-top-color: var(--red, #D63C3C); }
.woocommerce-message { border-top-color: var(--mint); }

/* Product grid (shop / products archive) */
.woocommerce ul.products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin: 0; padding: 0; list-style: none; }
.woocommerce ul.products li.product { width: auto !important; margin: 0 !important; float: none !important;
  background: #fff; border: 1px solid var(--border); padding: 16px; transition: box-shadow .2s, transform .2s; }
.woocommerce ul.products li.product:hover { box-shadow: 0 16px 36px rgba(12,44,76,.12); transform: translateY(-3px); }
.woocommerce ul.products li.product img { margin-bottom: 12px; border: 1px solid var(--border); }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 15px; font-weight: 700; color: var(--navy); padding: 0; }
.woocommerce ul.products li.product .price { color: var(--navy); font-weight: 700; }
.woocommerce ul.products li.product .price del { color: var(--gray); font-weight: 400; }
.woocommerce .star-rating span { color: var(--blue); }
.woocommerce .woocommerce-result-count { color: var(--gray); font-size: 13.5px; }
.woocommerce .woocommerce-ordering select { width: auto; display: inline-block; }

/* Single product */
.woocommerce div.product .product_title { color: var(--navy); }
.woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--navy); font-weight: 800; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { border-bottom-color: #fff; }
.woocommerce span.onsale { background: var(--mint); color: var(--navy-dark); border-radius: 0; font-weight: 700; }

/* Account page — navigation as tabs + tables */
.woocommerce-account .woocommerce { display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: start; }
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); }
.woocommerce-account .woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--border); }
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child { border-bottom: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: 12px 16px; color: var(--navy); font-weight: 500; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: var(--surface); color: var(--blue); }
.woocommerce-account .woocommerce-MyAccount-content { min-width: 0; }
/* Login / register forms */
.woocommerce form.login, .woocommerce form.register, .woocommerce-account .woocommerce form { border: 1px solid var(--border); border-radius: 0; padding: 26px; }
.woocommerce form .form-row { margin-bottom: 16px; }
.woocommerce-form-login__rememberme { font-weight: 400; }

/* Cart & checkout tables */
.woocommerce table.shop_table { border: 1px solid var(--border); border-radius: 0; border-collapse: collapse; }
.woocommerce table.cart img { width: 56px; border: 1px solid var(--border); }
.woocommerce .cart-collaterals .cart_totals, .woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order { border: 1px solid var(--border); padding: 20px; }
.woocommerce #payment, .woocommerce-checkout #payment { background: var(--surface); border-radius: 0; }
.woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--border); }

@media (max-width: 900px) {
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }
  .woocommerce-account .woocommerce { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 520px) {
  .woocommerce ul.products { grid-template-columns: 1fr; }
}

/* ============================================================
   CPT ARCHIVE GRID  (industry/service archives via Query Loop)
   ============================================================ */
ul.wp-block-post-template.ov-grid { list-style: none; margin: 58px 0; padding: 0; gap: 22px; }
.ov-card .wp-block-post-featured-image { margin: 0; }
.ov-card .wp-block-post-featured-image img { width: 100%; height: 172px; object-fit: cover; display: block; }
.ov-card .wp-block-post-title { font-size: 20px; margin: 0 0 6px; }
.ov-card .wp-block-post-title a { color: var(--navy); }
.ov-card .wp-block-post-title a:hover { color: var(--blue); }
.ov-card .wp-block-post-excerpt { margin: 0; font-size: 14px; }
.ov-card .wp-block-post-excerpt__more-link { color: var(--blue); font-weight: 600; font-size: 13.5px; display: inline-block; margin-top: 12px; }
.post-hero-img { margin-bottom: 24px; }
.post-hero-img img, .prose .wp-block-post-featured-image img { width: 100%; border: 1px solid var(--border); }

/* ============================================================
   GENERATED INNER PAGES — supporting bits
   ============================================================ */
/* Breadcrumb on detail pages */
.crumb { font-size: 12.5px; font-weight: 600; letter-spacing: .02em; color: var(--gray); margin-bottom: 14px; text-transform: none; }
.crumb a { color: var(--blue); }
.crumb a:hover { text-decoration: underline; }

/* Marketing 4-up grid */
.mk-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .mk-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .mk-grid { grid-template-columns: 1fr; } }

/* Narrow container (FAQ) */
.container.narrow { max-width: 820px; }

/* FAQ list */
.faq-section { background: var(--surface); }
.faq { background: #fff; border: 1px solid var(--border); border-left: 3px solid var(--blue); padding: 22px 24px; margin-top: 14px; }
.faq h3 { font-size: 17px; margin: 0 0 8px; color: var(--navy); }
.faq p { margin: 0; font-size: 14.5px; }

/* ============================================================
   REDESIGN INNER-PAGE COMPONENTS
   (industry/service detail, marketing, catalog, pricing)
   ============================================================ */
.indata-section.is-alt { background: var(--surface); }
.hero-copy .crumb span { color: var(--gray); margin: 0 4px; }
.big-p { font-size: 19px; color: var(--navy); max-width: 760px; line-height: 1.55; }
.section-title { font-size: clamp(26px,3.2vw,34px); margin: 14px 0 6px; }
.section-sub { font-size: 16px; color: var(--body); max-width: 660px; margin: 0; }

/* Capability / pillar cards */
.cap-cards { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; margin-top: 36px; }
.feature-card { background: #fff; border: 1px solid var(--border); border-top: 3px solid var(--blue); padding: 26px 24px; transition: box-shadow .2s, transform .2s; }
.feature-card:hover { box-shadow: 0 14px 32px rgba(12,44,76,.10); transform: translateY(-2px); }
.feature-card h3 { font-size: 18px; color: var(--navy); margin: 0 0 8px; }
.feature-card p { font-size: 14.5px; margin: 0; }

/* Checklist (Built-for bullets) */
.checklist { list-style: none; margin: 24px 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; color: var(--navy); font-weight: 500; }
.checklist li svg { width: 22px; height: 22px; color: var(--emerald); background: var(--mint-pale); padding: 4px; flex-shrink: 0; }

/* CTA note under buttons */
.cta-box p.cta-note { color: rgba(255,255,255,.82); font-size: 13.5px; margin: 30px auto 0; }

/* Button variants used by builders */
.wp-block-button.is-blue .wp-block-button__link { background: var(--blue); color: #fff; border-color: var(--blue); }
.wp-block-button.is-blue .wp-block-button__link:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
.wp-block-button.is-outline-white .wp-block-button__link { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.wp-block-button.is-outline-white .wp-block-button__link:hover { background: rgba(255,255,255,.12); color: #fff; }

/* Pricing page (li-based plans) */
.plan .plan-name { font-size: 18px; font-weight: 700; color: var(--navy); }
.plan.is-featured { background: var(--navy); border-color: var(--navy); color: #fff; }
.plan.is-featured .plan-name { color: #fff; }
.plan-price { display: flex; align-items: baseline; gap: 4px; margin: 12px 0 2px; }
.plan-price .amt { font-size: 40px; font-weight: 800; color: var(--navy); line-height: 1; }
.plan.is-featured .plan-price .amt { color: #fff; }
.plan-price .per { font-size: 14px; color: var(--gray); }
.plan.is-featured .plan-price .per { color: rgba(255,255,255,.6); }
.plan-note { font-size: 12.5px; color: var(--gray); margin: 0 0 6px; }
.plan.is-featured .plan-note { color: rgba(255,255,255,.6); }
.plan .feature-list { list-style: none; margin: 20px 0; padding: 0; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.plan .feature-list li { display: flex; gap: 10px; font-size: 14px; align-items: flex-start; color: var(--navy); }
.plan .feature-list li svg { width: 16px; height: 16px; color: var(--emerald); flex-shrink: 0; margin-top: 3px; }
.plan.is-featured .feature-list li { color: rgba(255,255,255,.85); }
.plan.is-featured .feature-list li svg { color: var(--mint); }
.plan a.wp-element-button { display: block; width: 100%; text-align: center; }
.plan a.is-blue { background: var(--blue); color: #fff; border: 1px solid var(--blue); }
.plan a.is-blue:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
.plan a.is-outline { background: #fff; color: var(--navy); border: 1px solid var(--border); }
.plan a.is-outline:hover { border-color: var(--blue); color: var(--blue); }
.plan.is-featured a.is-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }

/* FAQ accordions */
.faq-accordion { margin-top: 26px; }
.faq-accordion .faq-item { background: #fff; border: 1px solid var(--border); margin-bottom: 10px; }
.faq-accordion .faq-item summary { cursor: pointer; padding: 16px 20px; font-weight: 600; color: var(--navy); list-style: none; }
.faq-accordion .faq-item summary::-webkit-details-marker { display: none; }
.faq-accordion .faq-item[open] summary { border-bottom: 1px solid var(--border); }
.faq-accordion .faq-item p { margin: 0; padding: 14px 20px; font-size: 14.5px; }

@media (max-width: 900px) {
  .cap-cards { grid-template-columns: 1fr; }
}

/* Vendor partner tiles (Product Catalogs page) */
.eyebrow.has-top-gap { margin-top: 56px; }
.vendor-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-top: 28px; }
.vendor-card { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--border); padding: 13px 15px; text-decoration: none; cursor: pointer; transition: border-color .18s, box-shadow .18s; }
.vendor-card:hover { border-color: var(--blue-light); box-shadow: 0 6px 18px rgba(31,116,235,.10); }
.vendor-monogram { width: 38px; height: 38px; flex-shrink: 0; display: grid; place-items: center; background: #E8EDF2; color: #6E8092; font-weight: 700; font-size: 12.5px; letter-spacing: .03em; transition: background .18s, color .18s; }
.vendor-card:hover .vendor-monogram { background: var(--blue-pale); color: var(--blue); }
.vendor-name { font-size: 13.5px; font-weight: 500; color: var(--navy); line-height: 1.25; transition: color .18s; }
.vendor-card:hover .vendor-name { color: var(--blue); }
@media (max-width: 900px) { .vendor-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 540px) { .vendor-grid { grid-template-columns: 1fr; } }
.vendor-inquiry-note { background: var(--blue-pale); border: 1px solid #CFE0FB; border-left: 3px solid var(--blue); color: var(--navy); padding: 14px 18px; margin: 0 0 22px; font-size: 14.5px; }
.vendor-inquiry-note strong { color: var(--blue); }

/* "Built for X" section — mobile-first: stacks by default, two columns >=981px.
   Base MUST stay single-column. A two-column base here would beat the responsive
   collapse in the 980px block above (equal specificity falls to source order, and
   this rule lives later in the file). That cascade clobber was the mobile bug. */
.indata-section .grid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
.indata-section .grid .pic { position: relative; overflow: hidden; border: 1px solid var(--border); box-shadow: 0 18px 40px rgba(12,44,76,.14); margin: 0; justify-self: stretch; width: 100%; }
@media (min-width: 981px) {
  .indata-section .grid { grid-template-columns: 1.05fr .95fr; gap: 54px; }
  .indata-section .grid .pic { justify-self: end; }
}
.indata-section .grid .pic img { width: 100%; aspect-ratio: 16/12; object-fit: cover; display: block; }

/* Contact page form (live fields) */
.ov-address { font-size: 14px; color: rgba(255,255,255,.7); margin-top: 10px; }
.contact-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: start; }
.contact-info h2 { font-size: 22px; margin: 0 0 14px; }
.contact-info p { font-size: 15px; color: var(--body); margin: 0 0 14px; }
.contact-info .ci-phone { font-weight: 700; color: var(--navy); font-size: 17px; }
.contact-form { max-width: none; width: 100%; }
.indata-section .contact-form { max-width: none; }
.contact-form .req { color: var(--blue); font-weight: 700; }
.contact-form .cf-group { border: 0; padding: 0; margin: 0; }
.contact-form .cf-group legend { font-size: 13px; font-weight: 600; color: var(--navy); padding: 0; margin-bottom: 6px; }
.contact-form .cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.contact-form .cf-field { margin: 0 0 18px; }
.contact-form label { display: block; font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 6px; }
.contact-form input, .contact-form textarea, .contact-form select { width: 100%; padding: 12px 14px; border: 1px solid var(--border); background: #fff; font: inherit; font-size: 14.5px; color: var(--navy); border-radius: 0; }
.contact-form select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238FA4B5' d='M6 8L0 0h12z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-pale); }
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form .cf-consent label { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 14px; color: var(--body); line-height: 1.5; }
.contact-form .cf-consent input { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.contact-form .cf-consent a { color: var(--blue); text-decoration: underline; }
.contact-form .cf-actions { margin: 6px 0 0; }
.contact-form button.is-blue { background: var(--blue); color: #fff; border: 1px solid var(--blue); padding: 13px 32px; font-weight: 600; font-size: 14.5px; cursor: pointer; transition: background .15s; }
.contact-form button.is-blue:hover { background: var(--blue-dark); }
.cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf-note { padding: 14px 18px; margin: 0 0 22px; font-size: 14.5px; border: 1px solid; }
.cf-note.cf-ok { background: var(--mint-pale); border-color: #9FE3C0; color: #0E7043; }
.cf-note.cf-err { background: #FDECEC; border-color: #F5C2C2; color: #C0392B; }
@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 680px) {
  .contact-form .cf-row { grid-template-columns: 1fr; gap: 0; }
}