/* QualiSpace site theme v4 — navy + mint. Linked on every page (except blog posts and campaign pages). */
/* QualiSpace v2 site theme — interaction states and breakpoints. Base styles are inline on each page. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&display=swap');
:root { --color-accent: #14795a; --color-accent-500: #14795a; --color-accent-600: #0f6349; --color-accent-700: #0b4d39; --font-body: "Archivo", system-ui, sans-serif; --font-heading: "Archivo", system-ui, sans-serif; }
html, body { overflow-x: clip; background: #ffffff !important; }
body { margin: 0; color: #16201c; font-family: "Archivo", system-ui, sans-serif; -webkit-font-smoothing: antialiased; text-wrap: pretty; }
a { color: #0f6349; } a:hover { color: #0b4d39; }
a.plain { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid #14795a; outline-offset: 2px; }
summary::-webkit-details-marker { display: none; }
[data-mega] { display: none; }
[data-nav-item]:hover > [data-mega], [data-nav-item]:focus-within > [data-mega] { display: block; }
[data-nav-item]:hover > a, [data-nav-item]:focus-within > a { color: #0f6349 !important; box-shadow: inset 0 -2px 0 #14795a; }
[data-tabpane][hidden] { display: none !important; }
[data-tabbtn]:last-child { border-right: 0 !important; }
[data-tabbtn][aria-selected="true"] { background: #ffffff !important; color: #0b4d39 !important; box-shadow: inset 0 2px 0 #14795a; }
details[data-faq][open] [data-chev] { transform: rotate(180deg); }
#qs-results a, [data-mobile-results] a { display: block; padding: 9px 10px; font-size: 14px; color: #16201c; }
#qs-results a:hover, [data-mobile-results] a:hover { background: #e8f3ef; color: #0b4d39; }
#qs-results p, [data-mobile-results] p { margin: 0; padding: 9px 10px; font-size: 14px; color: #46514c; }
@media (max-width: 1280px) { [data-mainnav] [data-nav-item] > a { padding: 0 9px !important; font-size: 14px !important; } [data-search] label { width: 160px !important; } }
@media (max-width: 1180px) { [data-hdr-cta] { display: none !important; } }
@media (max-width: 1080px) { [data-util] { display: none !important; } }
@media (max-width: 980px) {
  [data-plans] { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px !important; margin: 0 -32px; padding: 0 32px 8px; }
  [data-plans] > [data-plan] { flex: 0 0 78%; scroll-snap-align: start; }
  [style*="grid-template-columns: 1fr 1fr;"], [style*="grid-template-columns: 1fr auto;"][style*="gap: 32px"] { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 700px) {
  [data-wrap] { padding-left: 20px !important; padding-right: 20px !important; }
  [data-plans] { margin: 0 -20px; padding: 0 20px 8px; }
  [data-plans] > [data-plan] { flex-basis: 86%; }
  section [data-wrap] { padding-top: 44px !important; padding-bottom: 44px !important; }
  [data-util-lead] { display: none; }
  [data-mbar] { display: block !important; }
  body:has([data-mbar]) footer { padding-bottom: 68px; }
  [role="tablist"] { overflow-x: auto; }
  [data-tabbtn] { flex: 0 0 auto !important; padding: 0 14px !important; }
  [data-tabpane] > div { grid-template-columns: minmax(0, 1fr) !important; }
  h1 { font-size: 32px !important; line-height: 1.12 !important; }
  h2 { font-size: 24px !important; }
  #qs-cookie { left: 0 !important; right: 0 !important; bottom: 0 !important; }
  #qs-cookie button { flex: 1 1 0; }
}
[data-ruled][style*="gap: 1px"] { gap: 0 !important; background: #ffffff !important; border-width: 1px 0 0 1px !important; }
[data-ruled][style*="gap: 1px"] > * { border-right: 1px solid #dde3e0; border-bottom: 1px solid #dde3e0; }
/* v3 visual layer */
[data-htab][aria-selected="true"] { background: transparent !important; color: #16201c !important; box-shadow: inset 0 -3px 0 #14795a !important; }
[data-vert][aria-selected="true"] { background: #e8f3ef !important; color: #0b4d39 !important; box-shadow: inset 3px 0 0 #14795a !important; }
[data-rv] { transition: opacity 0.7s cubic-bezier(0.2,0.7,0.2,1), transform 0.7s cubic-bezier(0.2,0.7,0.2,1); }
[data-rv="wait"] { opacity: 0; transform: translateY(18px); }
@media (prefers-reduced-motion: no-preference) {
  [data-vis-media] { animation: qsSettle 2.6s cubic-bezier(0.2,0.7,0.2,1) both; }
  [data-pulse] { animation: qsPulse 4s cubic-bezier(0.45,0,0.55,1) infinite; }
  [data-live] { animation: qsLive 2.4s ease-in-out infinite; }
}
@keyframes qsSettle { from { transform: scale(1.06); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes qsPulse { 0% { left: 0; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: calc(100% - 7px); opacity: 0; } }
@keyframes qsLive { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (max-width: 1180px) {
  [data-split] > div:last-child { padding-left: 40px !important; }
}
@media (max-width: 980px) {
  [data-split] { grid-template-columns: minmax(0, 1fr) !important; min-height: 0 !important; }
  [data-split-media] { min-height: 320px !important; }
  [data-split] > div:last-child { padding: 48px 32px !important; max-width: none !important; }
  [data-hero-media] { width: 100% !important; }
  [data-hero-scrim] { background: linear-gradient(90deg, rgba(15,26,22,0.92) 0%, rgba(15,26,22,0.7) 100%) !important; }
  [data-stats][style*="display: grid"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [data-stats] > div { padding-left: 0 !important; padding-right: 20px !important; border-left: 0 !important; border-top: 1px solid rgba(255,255,255,0.14); }
  [data-ind][style*="display: grid"] { grid-template-columns: 220px minmax(0, 1fr) !important; }
  [data-flow-line] { display: none; }
  [style*="grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px"] > div { padding-left: 0 !important; padding-right: 0 !important; border-left: 0 !important; }
}
@media (max-width: 700px) {
  [data-stats][style*="display: grid"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [data-stats] p:first-child { font-size: 22px !important; }
  [data-logos][style*="display: grid"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  [data-logos] > div { height: 64px !important; padding: 8px !important; }
  [data-ind] [role="tablist"] { display: none !important; }
  [data-ind] [data-tabpane][hidden] { display: block !important; }
  [data-ind] [data-tabpane] { padding: 22px 20px !important; border-bottom: 1px solid #dde3e0; }
  [data-ind] [data-tabpane] h3 { font-size: 20px !important; }
  [data-ind] [data-tabpane] p { font-size: 15px !important; }
  [data-ind] [data-tabpane] a > span:last-child { display: none !important; }
  [data-htab] { padding: 0 14px !important; font-size: 14px !important; }
  [data-split] > div:last-child { padding: 40px 20px !important; }
  [data-split-media] { min-height: 240px !important; }
  section[data-screen-label="Hero"] [data-wrap]:first-of-type { padding-top: 56px !important; padding-bottom: 48px !important; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

header[data-dark] [data-nav-item]:hover > a, header[data-dark] [data-nav-item]:focus-within > a { color: #4cf6af !important; box-shadow: inset 0 -2px 0 #4cf6af !important; }
header[data-dark] input::placeholder { color: #9fb0cc; }
[data-mega] { border-radius: 0 0 20px 20px; border-bottom: 0 !important; box-shadow: 0 30px 60px rgba(0,29,79,0.18) !important; }
a { color: #0a8a5f; } a:hover { color: #001d4f; }
:focus-visible { outline: 2px solid #4cf6af !important; outline-offset: 2px; }
[data-pill][aria-selected="true"] { background: #ffffff !important; color: #001d4f !important; box-shadow: 0 6px 16px rgba(0,29,79,0.10) !important; }
[data-vpill][aria-selected="true"] { background: #001d4f !important; color: #ffffff !important; box-shadow: none !important; }
[data-vpill][aria-selected="true"] svg { opacity: 1 !important; color: #4cf6af; }
[data-vpill]:hover { background: #f4fdfc; }
#qs-cookie { border-radius: 18px; border-top: 1px solid #d9e3f5 !important; }
#qs-cookie button { border-radius: 10px; }
@media (prefers-reduced-motion: no-preference) {
  [data-float] { animation: qsBob 7s ease-in-out infinite; }
  [data-led] { animation: qsLed 2.8s ease-in-out infinite; }
  [data-spin] { animation: qsSpin 24s linear infinite; }
  [data-rack] [data-unit] { transition: transform 0.4s; }
}
@keyframes qsBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes qsLed { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes qsSpin { to { transform: rotate(360deg); } }
@media (max-width: 1180px) {
  section[data-screen-label="Hero"] h1 { font-size: 54px !important; }
  [data-rack] { width: 300px !important; }
}
@media (max-width: 980px) {
  [data-hero-grid] { grid-template-columns: minmax(0, 1fr) !important; padding-top: 64px !important; }
  [data-hero-art] { height: 420px !important; max-width: 520px; margin: 0 auto; width: 100%; }
  [data-stats][style*="display: grid"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [data-stats] > div { border-top: 1px solid rgba(255,255,255,0.10) !important; }
  [data-ind][style*="display: grid"] { grid-template-columns: minmax(0, 1fr) !important; }
  [data-ind] [role="tablist"] { flex-direction: row !important; flex-wrap: wrap; border-radius: 20px !important; }
  [data-ind] [role="tablist"] > button { height: 40px !important; }
  [data-ind] [role="tablist"] > button svg { display: none; }
  [data-orbit] { display: none; }
  [data-two][style*="display: grid"] { grid-template-columns: minmax(0, 1fr) !important; gap: 40px !important; }
  section[data-screen-label="CTA"] [data-wrap] { grid-template-columns: minmax(0, 1fr) !important; }
  [data-pills] { overflow-x: auto; max-width: 100%; }
}
@media (max-width: 700px) {
  [data-hero-grid] { padding-top: 48px !important; padding-bottom: 32px !important; }
  section[data-screen-label="Hero"] h1 { font-size: 38px !important; line-height: 1.08 !important; }
  h2 { font-size: 28px !important; }
  [data-hero-art] { height: 340px !important; transform: scale(0.82); transform-origin: center top; margin-bottom: -40px !important; }
  [data-stats][style*="display: grid"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  [data-stats] > div { padding: 16px !important; }
  [data-stats] p:first-child { font-size: 20px !important; }
  [data-stats] p + p { font-size: 13px !important; }
  [data-pill] { padding: 0 14px !important; font-size: 14px !important; }
  [data-tabpane] > div[style*="display: grid"] { grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; }
  [data-planbtns][style*="display: grid"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [data-logos][style*="display: grid"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  [data-ind] [data-tabpane] { padding: 32px 24px !important; }
  [data-ind] [data-tabpane] h3 { font-size: 26px !important; }
  [data-ind] [data-tabpane] a { min-height: 0 !important; }
  [data-ind] [role="tablist"] { display: flex !important; }
  [data-ind] [data-tabpane][hidden] { display: none !important; }
  section[data-screen-label="Security operations"] figure { padding: 24px !important; }
  a[style*="height: 52px"] { width: 100%; justify-content: center; box-sizing: border-box; }
}

/* ---- inner pages (restyles existing page markup) ---- */
:root:root { --color-accent: #0a8a5f; --color-accent-500: #0a8a5f; --color-accent-600: #001d4f; --color-accent-700: #001d4f; --color-accent-400: #3fcf94; --color-accent-300: #9fe9c8; --color-accent-200: #d9faec; --color-accent-100: #e6fbf1; --color-accent-text: #0a8a5f; --color-accent-hover: #001d4f; --color-divider: #d9e3f5; --color-text: #1d2433; --color-bg: #ffffff; --color-surface: #f4fdfc; --color-neutral-900: #001d4f; --color-neutral-700: #1c2f55; --color-neutral-500: #8a9bb8; --color-neutral-300: #cfd8e6; --font-heading: "Archivo", system-ui, sans-serif; --font-body: "Archivo", system-ui, sans-serif; --font-heading-weight: 700; --radius-md: 12px; }
html, body { background: #ffffff !important; }
h1, h2 { font-family: 'Marcellus', Georgia, serif !important; font-weight: 400 !important; text-transform: uppercase; letter-spacing: 0.01em !important; margin-left: 0 !important; }
h1[style*="clamp("] { font-size: clamp(36px, 4.2vw, 58px) !important; line-height: 1.06 !important; }
h2[style*="clamp(34px"], h2[style*="clamp(32px"], h2[style*="clamp(30px"] { font-size: clamp(28px, 2.8vw, 40px) !important; line-height: 1.12 !important; margin-bottom: 28px !important; }
h2[style*="clamp(38px"], h2[style*="clamp(40px"], h2[style*="clamp(36px"] { font-size: clamp(30px, 3.2vw, 46px) !important; line-height: 1.1 !important; }
h2[style*="clamp(22px"], h2[style*="clamp(24px"] { font-size: clamp(22px, 2vw, 28px) !important; line-height: 1.15 !important; }
[data-nav-item] > a::after { content: none !important; }
.btn { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 24px !important; border-radius: 12px !important; font-weight: 700 !important; font-size: 15px !important; text-decoration: none !important; border: 1px solid transparent; box-sizing: border-box; transition: filter 0.2s, box-shadow 0.2s, background 0.2s, border-color 0.2s; }
.btn-primary { background: linear-gradient(90deg, #4cf6af, #7ff5c4) !important; color: #001d4f !important; border-color: transparent !important; box-shadow: 0 10px 26px rgba(76,246,175,0.25); }
.btn-primary:hover { filter: brightness(1.05); box-shadow: 0 14px 32px rgba(76,246,175,0.38); color: #001d4f !important; }
.btn-secondary { background: #ffffff !important; color: #001d4f !important; border: 1px solid #b9c8e6 !important; }
.btn-secondary:hover { border-color: #001d4f !important; background: #f4fdfc !important; }
[data-phero] .btn-secondary, [data-dark-sec] .btn-secondary { background: transparent !important; color: #ffffff !important; border-color: rgba(255,255,255,0.4) !important; }
[data-phero] .btn-secondary:hover, [data-dark-sec] .btn-secondary:hover { background: rgba(255,255,255,0.08) !important; border-color: #ffffff !important; }
[data-phero] h1, [data-phero] h2, [data-dark-sec] h2, [data-dark-sec] h3 { color: #ffffff !important; }
[data-phero] p, [data-dark-sec] p, [data-dark-sec] li { color: #e8eefb; }
[data-phero] p[style*="text-transform: uppercase"], [data-dark-sec] p[style*="text-transform: uppercase"] { color: #8fdaf7 !important; }
[data-phero] nav[aria-label="Breadcrumb"] { color: #9fb0cc !important; margin-bottom: 28px !important; }
[data-phero] nav[aria-label="Breadcrumb"] a { color: #cfd8e6 !important; }
[data-phero] nav[aria-label="Breadcrumb"] a:hover { color: #4cf6af !important; }
[data-phero] nav[aria-label="Breadcrumb"] span[style] { color: #ffffff !important; }
[data-phero] a:not(.btn):not(.plain) { color: #4cf6af; }
[data-dark-sec] a:not(.btn):not(.plain) { color: #4cf6af; }
[data-phero] [style*="color: var(--color-text)"], [data-dark-sec] [style*="color: var(--color-text)"] { color: #ffffff !important; }
[data-phero] [style*="color-mix(in srgb, var(--color-text)"], [data-dark-sec] [style*="color-mix(in srgb, var(--color-text)"] { color: #cfd8e6 !important; }
[data-phero] [data-card], [data-dark-sec] [data-card] { background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.12) !important; color: #ffffff; }
[data-phero] strong, [data-dark-sec] strong { color: #ffffff !important; }
[data-card] { transition: box-shadow 0.25s, border-color 0.25s, transform 0.25s; }
a[data-card]:hover, [data-card]:has(> h3 > a):hover { box-shadow: 0 18px 40px rgba(0,29,79,0.10) !important; border-color: #bfe6f1 !important; }
[data-acc][open] { box-shadow: 0 12px 30px rgba(0,29,79,0.08); border-color: #bfe6f1 !important; }
.input, input[type="text"], input[type="email"], input[type="tel"], textarea, select { border-radius: 10px !important; }
.grayscale, .grayscale img { filter: none !important; }
img[style*="grayscale"] { filter: none !important; }
table.table, .table { border-radius: 16px; overflow: hidden; }
#qs-cookie { border-radius: 18px !important; }
@media (prefers-reduced-motion: no-preference) { [data-phero-art] [data-spin] { animation: qsSpin 24s linear infinite; } }
@media (max-width: 1180px) { [data-phero-art] { width: 280px !important; height: 280px !important; margin-top: -140px !important; opacity: 0.8; } [data-phero-copy] { max-width: 58% !important; } }
@media (max-width: 980px) { [data-phero-art] { display: none !important; } [data-phero-copy] { max-width: none !important; } }
@media (max-width: 700px) { section[data-phero] > [data-wrap] { padding: 32px 20px 56px !important; } [data-card] { padding: 20px !important; border-radius: 18px !important; } }
h3 a:not(.btn), h4 a:not(.btn) { color: inherit; text-decoration: none; }
h3 a:not(.btn):hover, h4 a:not(.btn):hover { color: #0a8a5f; }
[data-dark-sec] h3 a:not(.btn):hover, [data-phero] h3 a:not(.btn):hover { color: #4cf6af; }
@media (max-width: 1080px) { [data-hdr-right] { margin-left: auto !important; } }
/* blog */
article h2, .post-body h2, .post-body h3, .post-body h4 { font-family: "Archivo", system-ui, sans-serif !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: -0.01em !important; }
article h2[style*="font-size: 26px"] { font-size: 22px !important; line-height: 1.3 !important; }
.post-body { max-width: 760px; margin: 0 auto; }
.post-body a { color: #0a8a5f; }
.post-body img { max-width: 100%; height: auto; border-radius: 16px; }
.post-body blockquote { margin: 28px 0; padding: 18px 24px; border-radius: 16px; background: #f4fdfc; border: 1px solid #d6efe6; }
.post-body pre, .post-body code { background: #eef3fb; border-radius: 8px; }
[data-phero] + section img[style*="max-height: 520px"] { border-radius: 24px; border: 0 !important; box-shadow: 0 24px 48px rgba(0,29,79,0.12); }
@media (max-width: 1080px) { header nav[data-mainnav] { display: none !important; } [data-burger] { display: inline-flex !important; } }
@media (min-width: 1081px) and (max-width: 1240px) { [data-mainnav] [data-nav-item] > a { padding: 0 7px !important; font-size: 14px !important; } }
/* tighter section rhythm */
@media (min-width: 701px) {
  section:not([data-screen-label="Hero"]):not([data-phero]) > div[style*="max-width: 1280px"] { padding-top: 64px !important; padding-bottom: 64px !important; }
  section:not([data-screen-label="Hero"]):not([data-phero]) > div[style*="max-width: 1280px"] h2 + p[style*="margin: 14px"] { margin-bottom: 0; }
  section[data-screen-label="Product discovery"] > div { padding-top: 48px !important; padding-bottom: 40px !important; }
  section[data-screen-label="Infrastructure"] > div { padding-top: 40px !important; }
  section[data-screen-label="Customers"] > div { padding-top: 48px !important; padding-bottom: 56px !important; }
  [data-phero] > [data-wrap] { padding-bottom: 64px !important; }
}
@media (max-width: 700px) { [data-ind-focus] { grid-template-columns: minmax(0, 1fr) !important; } }

/* hero images */
[data-wrap]:has(> [data-phero-img]) > [data-phero-copy] { max-width: 54% !important; }
@media (max-width: 980px) {
  [data-phero-img] { position: relative !important; right: auto !important; top: auto !important; transform: none !important; width: 100% !important; max-width: 560px !important; margin-top: 40px; }
  [data-wrap]:has(> [data-phero-img]) > [data-phero-copy] { max-width: none !important; }
}

/* plan comparison tables: top-aligned, even columns, no uppercase in rich headers */
.table thead th:has(> span) { vertical-align: top !important; text-transform: none !important; letter-spacing: normal !important; color: var(--color-text) !important; font-size: inherit !important; }
.table thead th:has(> span) > span:first-child { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.02em; }
.table thead th > span[style*="font-size: 14px"] { max-width: none !important; min-height: 10.5em; }
.table thead th:has(> span) > span:first-child { font-size: clamp(17px, 1.6vw, 22px) !important; overflow-wrap: anywhere; }
.table:has(thead th > span) { table-layout: fixed; }
.table:has(thead th > span) thead th:first-child { width: 16%; }

/* site-wide table alignment */
th[scope="row"] { text-align: left !important; }
table td, table th { text-wrap: wrap; }
.table { table-layout: fixed; }
.table thead th:first-child { width: 16%; }
.table td, .table th { vertical-align: top; }
.table thead th { vertical-align: bottom; }
