/* KeenSec marketing components + motion + design-review fixes.
   Hand-authored like site.css. Uses the tokens defined in site.css :root. */

/* ============ 1. Marketing page components ============ */
.mk-hero .mk-answer { max-width: 780px; }
.mk-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.mk-updated { margin-top: 20px; font-family: var(--font-mono); font-size: 12px; color: var(--muted); letter-spacing: .02em; }
.mk-chips { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.mk-chips li { font-size: 13px; font-weight: 600; color: var(--blue-ink); background: var(--wash); border: 1px solid #dbe5ff; border-radius: 999px; padding: 6px 12px; }

.mk-section-head { max-width: 760px; margin-bottom: 36px; }
.mk-section-head h2 { font-size: clamp(30px, 3.5vw, 44px); }
.mk-intro { margin-top: 16px; font-size: 17px; color: var(--muted); line-height: 1.65; }
.mk-note { margin-top: 20px; font-size: 13px; color: var(--muted); max-width: 760px; }

.mk-glance { padding-top: 0; }
.mk-glance dl { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mk-glance dl > div { padding: 22px 20px 22px 0; }
.mk-glance dl > div + div { padding-left: 20px; border-left: 1px solid var(--line); }
.mk-glance dt { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--blue-ink); font-weight: 600; margin-bottom: 8px; }
.mk-glance dd { margin: 0; font-size: 15px; color: var(--ink); line-height: 1.5; }

.mk-split > div:first-child p { margin-top: 18px; font-size: 16.5px; }
.mk-aside-card { background: var(--wash); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.mk-aside-card h3 { font-size: 22px; margin: 10px 0 16px; }
.mk-aside-card .mono { color: var(--blue-ink); font-weight: 600; font-size: 12px; }
.mk-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mk-check li { position: relative; padding-left: 26px; font-size: 15px; color: var(--ink); }
.mk-check li::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: #e7efff; box-shadow: inset 0 0 0 1px #bcd0ff; }
.mk-check li::after { content: ""; position: absolute; left: 5px; top: 8px; width: 6px; height: 3px; border-left: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: rotate(-45deg); }
.mk-aside-card .fineprint { margin-top: 16px; font-size: 12px; color: var(--muted); }

.mk-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; counter-reset: none; }
.mk-steps li { position: relative; background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 24px; }
.mk-steps li::after { content: ""; position: absolute; top: 40px; right: -17px; width: 18px; height: 1px; background: var(--border); }
.mk-steps li:last-child::after { display: none; }
.mk-step-num { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--blue); background: var(--wash); border-radius: 6px; padding: 4px 8px; }
.mk-steps h3 { font-size: 19px; margin: 16px 0 8px; color: var(--text-heading); }
.mk-steps p { font-size: 14.5px; color: var(--text-muted); line-height: 1.6; }

.mk-table-wrap { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--bg-raised); }
.mk-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.mk-table th, .mk-table td { text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--border); vertical-align: top; line-height: 1.5; }
.mk-table thead th { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); background: var(--bg-sunken); font-weight: 600; }
.mk-table tbody th { font-weight: 600; color: var(--text-heading); width: 26%; }
.mk-table tbody tr:last-child th, .mk-table tbody tr:last-child td { border-bottom: 0; }
.mk-table td:last-child { color: var(--text); }
.mk-table thead th:last-child { color: var(--accent-ink); }

.mk-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.mk-card { display: flex; flex-direction: column; background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 24px; color: inherit; text-decoration: none; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
a.mk-card:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: var(--shadow-md, 0 14px 34px -18px rgba(23, 77, 200, .35)); }
.mk-card-tag { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--accent-ink); text-transform: uppercase; }
.mk-card h3 { font-size: 20px; margin: 10px 0 8px; color: var(--text-heading); }
.mk-card p { font-size: 14.5px; color: var(--text-muted); line-height: 1.6; flex: 1; }
.mk-card-link { margin-top: 18px; font-size: 14px; font-weight: 600; color: var(--accent-ink); display: inline-flex; align-items: center; gap: 6px; }

.mk-evidence-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.mk-evidence-item { background: var(--dark); color: #dbe4f7; border-radius: var(--radius); padding: 26px 22px; border: 1px solid var(--dark-border); }
.mk-evidence-item .mono { color: #93c5fd; font-size: 12px; font-weight: 600; }
.mk-evidence-item h3 { color: #fff; font-size: 19px; margin: 12px 0 8px; }
.mk-evidence-item p { color: #b6c2da; font-size: 14.5px; line-height: 1.6; }

.mk-callout { border-left: 3px solid var(--blue); background: var(--wash); border-radius: 0 var(--radius) var(--radius) 0; padding: 28px 32px; max-width: 900px; }
.mk-callout .mono { color: var(--blue-ink); font-size: 12px; font-weight: 600; }
.mk-callout p { margin-top: 10px; font-size: 18px; color: var(--ink); line-height: 1.6; }

/* Sample lure mock-ups */
.mk-lure-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.mk-lure { position: relative; margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 20px 20px 18px; box-shadow: 0 18px 40px -26px rgba(7, 13, 24, .35); }
.mk-sample-tag { position: absolute; top: -10px; right: 14px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; background: #fff7e6; color: #92400e; border: 1px solid #fcd9a4; border-radius: 999px; padding: 2px 10px; }
.mk-lure-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.mk-lure-app { font-size: 13px; font-weight: 700; color: var(--ink-heading); display: inline-flex; gap: 6px; align-items: center; }
.mk-lure-time { font-size: 12px; color: var(--muted); font-family: var(--font-mono); }
.mk-lure-from { margin-top: 12px; font-size: 13px; color: var(--muted); }
.mk-lure-title { margin-top: 6px; font-size: 16px; font-weight: 700; color: var(--ink-heading); }
.mk-lure-body { margin-top: 6px; font-size: 14.5px; color: var(--ink); line-height: 1.55; background: #f3f6fb; border-radius: 12px; padding: 12px 14px; }
.mk-lure--whatsapp .mk-lure-body { background: #e7f8ee; }
.mk-lure--teams .mk-lure-body { background: #eef0fb; }
.mk-lure--slack .mk-lure-body { background: #f5eef8; }
.mk-lure--voice .mk-lure-body { background: #0c1527; color: #dbe4f7; }
.mk-lure--browser .mk-lure-body { background: #2a0d12; color: #ffd9de; font-family: var(--font-mono); font-size: 13px; }
.mk-lure-action { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 700; color: #fff; background: var(--blue); border-radius: 8px; padding: 7px 12px; }
.mk-lure-tells { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px dashed var(--line); display: flex; flex-wrap: wrap; gap: 6px; }
.mk-lure-tells li { font-size: 12px; font-weight: 600; color: #9a3412; background: #fff1eb; border-radius: 6px; padding: 3px 8px; }
.mk-lure figcaption { margin-top: 12px; font-size: 12.5px; color: var(--muted); }

/* ============ 2. Homepage additions ============ */
.channel-map { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 36px; }
.channel-tile { display: flex; flex-direction: column; gap: 6px; padding: 22px 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-raised); color: inherit; text-decoration: none; transition: transform .25s ease, border-color .25s ease; }
.channel-tile:hover { transform: translateY(-3px); border-color: var(--border-strong); }
.channel-tile .ct-kind { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--blue-ink); text-transform: uppercase; letter-spacing: .06em; }
.channel-tile strong { font-size: 18px; color: var(--text-heading); }
.channel-tile span:last-child { font-size: 14px; color: var(--text-muted); line-height: 1.5; }
.attack-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; list-style: none; padding: 0; }
.attack-strip a { display: inline-block; font-size: 13.5px; font-weight: 600; color: var(--text); background: var(--bg-sunken); border: 1px solid var(--border); border-radius: 999px; padding: 7px 14px; text-decoration: none; }
.attack-strip a:hover { border-color: var(--blue); color: var(--accent-ink); }
.pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
.pillar { border-top: 2px solid var(--blue); padding-top: 20px; }
.pillar .mono { color: var(--blue-ink); font-size: 12px; font-weight: 600; }
.pillar h3 { font-size: 21px; margin: 10px 0 8px; color: var(--text-heading); }
.pillar p { font-size: 14.5px; color: var(--text-muted); line-height: 1.6; }
.pillar a { display: inline-flex; gap: 6px; align-items: center; margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--accent-ink); }

/* ============ 3. Motion (progressive enhancement) ============ */
html.js-motion [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 70ms); }
html.js-motion [data-reveal].is-visible { opacity: 1; transform: none; }
html.js-motion .dash-feed-list .feed-item { opacity: 0; transform: translateX(12px); transition: opacity .5s ease, transform .5s ease; }
html.js-motion .dash-feed-list.is-streaming .feed-item { opacity: 1; transform: none; }
html.js-motion .dash-feed-list.is-streaming .feed-item:nth-child(2) { transition-delay: .6s; }
html.js-motion .dash-feed-list.is-streaming .feed-item:nth-child(3) { transition-delay: 1.2s; }
html.js-motion .stat-bar-fill { transform-origin: left; transform: scaleX(0); transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
html.js-motion .is-counted .stat-bar-fill { transform: scaleX(1); }
#stage-panel { transition: opacity .25s ease; }
#stage-panel.is-switching { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  html.js-motion [data-reveal], html.js-motion .dash-feed-list .feed-item, html.js-motion .stat-bar-fill { opacity: 1 !important; transform: none !important; transition: none !important; }
  #stage-panel { transition: none; }
  .mk-card, .channel-tile { transition: none; }
}

/* ============ 4. Design-review fixes ============ */
/* Hero eyebrow + badge strip on small screens */
@media (max-width: 640px) {
  .hero-telemetry-badge { padding: 6px 12px; }
  .hero-telemetry-badge .hero-category { font-size: 12px; letter-spacing: .02em; line-height: 1.4; }
}
/* Mobile menu: solid panel so page text doesn't show through */
@media (max-width: 960px) {
  #main-nav.open { background: var(--bg); box-shadow: 0 24px 40px -20px var(--shadow-color); }
}
/* Dashboard mock fits on phones */
@media (max-width: 760px) {
  .dash-feed-card, .dash-ai-card, .dash-ai-panel, .dash-explain-card { min-width: 0; max-width: 100%; }
  .dash-feed-list, .feed-item { min-width: 0; }
  .feed-item { flex-wrap: wrap; }
  .feed-info { min-width: 0; flex: 1 1 60%; }
  .feed-info strong, .feed-info p { white-space: normal; overflow-wrap: anywhere; }
  .dash-body, .dash-main-grid, .dash-lower-grid { grid-template-columns: 1fr !important; }
}
/* Walkthrough: tabs wrap into a 2x2 grid on phones; stable panel height */
@media (max-width: 760px) {
  .journey-tabs { display: grid !important; grid-template-columns: 1fr 1fr; overflow: visible !important; gap: 8px; }
  .journey-tabs button { min-width: 0 !important; white-space: normal; }
  .wb-badge { display: none; }
}
@media (min-width: 761px) { #stage-panel { min-height: 540px; } }
/* Tables inside content pages stack on phones */
@media (max-width: 760px) {
  .mk-table thead { display: none; }
  .mk-table, .mk-table tbody, .mk-table tr, .mk-table th, .mk-table td { display: block; width: 100% !important; }
  .mk-table tr { padding: 14px 18px; border-bottom: 1px solid var(--line); }
  .mk-table tbody th, .mk-table td { border: 0; padding: 4px 0; }
  .mk-table td::before { content: attr(data-label); display: block; font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
  .channel-table thead { display: none; }
  .channel-table, .channel-table tbody, .channel-table tr, .channel-table td, .channel-table th { display: block; width: 100%; }
  .channel-table tr { padding: 14px 0; border-bottom: 1px solid var(--line); }
}
/* Footer: legal column joins the top row */
@media (min-width: 1025px) {
  .footer-top { grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)) !important; }
}
/* /ai/ badge row spacing */
.ai-badges-section { padding-bottom: 24px; margin-bottom: 24px; }
/* Client logos: one grey, matched optical height */
.client-logo-img { filter: grayscale(1) contrast(1.1) brightness(.85); opacity: .8; height: 30px !important; max-height: 30px; width: auto !important; max-width: 118px; object-fit: contain; }
.client-logo-img.logo-muthoot, .client-logo-img.logo-basic { height: 34px !important; max-height: 34px; }
.client-logo-item:hover .client-logo-img { opacity: 1; }
.pillars-section { padding-top: 24px; padding-bottom: 96px; }
.channel-map + .attack-strip { margin-bottom: 8px; }
.footer-positioning { margin-top: 14px; font-size: 14px; color: #94a3b8; max-width: 280px; line-height: 1.55; }

/* Responsive grids for new components */
@media (max-width: 1024px) {
  .mk-glance dl, .mk-evidence-grid, .channel-map, .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-glance dl > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .mk-glance dl > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .mk-cards, .mk-lure-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-steps li::after { display: none; }
}
@media (max-width: 640px) {
  .mk-glance dl, .mk-evidence-grid, .mk-cards, .mk-lure-grid, .channel-map, .pillars { grid-template-columns: 1fr; }
  .mk-glance dl > div, .mk-glance dl > div + div { padding: 16px 0; border-left: 0; }
  .mk-glance dl > div + div { border-top: 1px solid var(--line); }
  .mk-hero-actions .button { width: 100%; justify-content: center; }
  .mk-callout { padding: 22px; }
}

/* Sections whose padding shorthand wiped the page gutter (affects existing pages too) */
.section.faq-section, .section.product-directory, .section.demo-layout, .section.company-story, .section.connected-next { padding-left: var(--space); padding-right: var(--space); }
.mk-hero-actions .button-ghost { padding: 13px 24px; }
/* Homepage H1: keep "Attackers don't stop at email." on one line on desktop */
.brand-hero h1 { max-width: 1180px; }
@media (min-width: 1100px) { .brand-hero h1 { font-size: clamp(52px, 4.6vw, 72px); } }
/* Phones: shorten the illustrative dashboard */
@media (max-width: 640px) {
  .dash-stat-card:nth-of-type(n+2), .dash-feed-list .feed-item:nth-child(3), .dash-window-bar .dash-search-fake { display: none; }
  .dash-feed-card, .dash-feed-list { min-height: 0 !important; height: auto !important; }
  .showcase-pills { display: none; }
}
/* Vertical rhythm for marketing sections (.section only sets horizontal gutters) */
.mk-rows, .mk-steps-section, .mk-table-section, .mk-cards-section, .mk-lures-section, .mk-evidence { padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(48px, 6vw, 80px); }
.mk-glance { padding-bottom: clamp(24px, 3vw, 40px); }
.mk-callout { margin: clamp(32px, 4vw, 56px) auto; }
.mk-lures-section .mk-lure-grid { padding-top: 10px; }
.mk-hero h1 { max-width: 1060px; }
@media (max-width: 640px) { .mk-hero h1 br, .inner-hero h1 br { display: none; } }
.mk-lure-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); display: inline-block; }
.mk-lure--whatsapp .mk-lure-dot { background: #25a55f; }
.mk-lure--sms .mk-lure-dot, .mk-lure--rcs .mk-lure-dot { background: #64748b; }
.mk-lure--voice .mk-lure-dot, .mk-lure--browser .mk-lure-dot { background: #e11d48; }
.mk-lure--teams .mk-lure-dot { background: #5b5fc7; }
.mk-lure--slack .mk-lure-dot { background: #7c3aed; }
/* Homepage: KeenSec AI capability links */
.ai-capabilities { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 26px 0 28px; }
.ai-capabilities a { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-raised); text-decoration: none; transition: border-color .2s ease, transform .2s ease; }
.ai-capabilities a:hover { border-color: var(--blue); transform: translateY(-2px); }
.ai-capabilities strong { font-size: 15px; color: var(--text-heading); }
.ai-capabilities span { font-size: 13.5px; color: var(--text-muted); line-height: 1.45; }
@media (max-width: 640px) { .ai-capabilities { grid-template-columns: 1fr; } }
/* Six top-level menus: tighten spacing on laptop widths */
@media (min-width: 961px) and (max-width: 1240px) { #main-nav { gap: 18px !important; } #main-nav .nav-group > a, #main-nav > a:not(.button) { font-size: 14px; } }
/* Homepage USP overview + proof chips */
.usp-card { display: block; text-decoration: none; color: inherit; transition: transform .2s ease; }
.usp-card:hover { transform: translateY(-3px); }
.usp-card:hover h3 { color: var(--blue); }
.usp-more { display: inline-flex; gap: 6px; align-items: center; margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--accent-ink); }
.proof-chips { list-style: none; padding: 0; margin: 18px 0 26px; display: flex; flex-wrap: wrap; gap: 8px; }
.proof-chips li { font-size: 13px; font-weight: 600; color: var(--blue-ink); background: var(--bg-raised); border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; }
[id^="usp-"] { scroll-margin-top: 90px; }

/* ============ 5. Homepage polish (taste pass, 24 Sep) ============ */
/* Headlines wrap evenly; paragraphs avoid orphans */
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
/* One message per section header: stack headline and body instead of splitting them */
.usp-overview .connection-intro, #usp-channels .connection-intro, #usp-report .story-band-heading { display: block !important; max-width: 780px; }
.usp-overview .connection-intro > p, #usp-channels .connection-intro > p { margin-top: 18px; max-width: 62ch; }
#usp-report .story-band-heading > div + div { margin-top: 18px; max-width: 62ch; }
#usp-report .illustration-label { display: inline-block; margin-top: 12px; font-size: 13px; color: #93a4c7; }
/* Tactile feedback and visible focus on every interactive element */
.button, .button-ghost, .button-secondary, .mk-card, .channel-tile, .usp-card, .resource-card, .ai-capabilities a { will-change: auto; }
.button:active, .button-ghost:active, .button-secondary:active, .button-header:active { transform: translateY(1px) scale(0.98); }
a:focus-visible, button:focus-visible, summary:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
/* Channel grid: give the grid rhythm instead of eight identical white tiles */
.channel-map .channel-tile:nth-child(4) { background: linear-gradient(160deg, #eef3ff 0%, #ffffff 70%); border-color: #d6e2ff; }
:root[data-theme="dark"] .channel-map .channel-tile:nth-child(4) {
  background: linear-gradient(160deg, #17243e 0%, var(--bg-raised) 70%);
  border-color: rgba(51, 113, 255, 0.3);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .channel-map .channel-tile:nth-child(4) {
    background: linear-gradient(160deg, #17243e 0%, var(--bg-raised) 70%);
    border-color: rgba(51, 113, 255, 0.3);
  }
}
.channel-map .channel-tile:nth-child(8) { background: var(--dark); border-color: var(--dark-border); }
.channel-map .channel-tile:nth-child(8) strong { color: #fff; }
.channel-map .channel-tile:nth-child(8) span:last-child { color: #b6c2da; }
.channel-map .channel-tile:nth-child(8) .ct-kind { color: #93c5fd; }
/* Tinted, single-direction shadows */
.channel-tile:hover, .usp-card:hover, .ai-capabilities a:hover { box-shadow: 0 14px 30px -20px rgba(23, 77, 200, .45); }
/* Taste pre-flight fixes (24 Sep) */
/* Hero credential pills (credPills in ui.mjs), shared by the homepage and Trust. */
.cred-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 32px auto 0; padding: 0; list-style: none; }
.cred-pill { display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px 10px 16px; background: var(--bg-raised); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--border-strong); border-radius: 999px; box-shadow: var(--shadow-sm); font-size: 14px; font-weight: 700; letter-spacing: -0.01em; color: var(--text-heading); }
.cred-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; box-sizing: border-box; }
.cred-dot.ready { background: var(--bg-surface); border: 2px solid var(--accent); }
.cred-dot.live { background: #10b981; box-shadow: 0 0 10px rgba(16, 185, 129, 0.6); }
@media (max-width: 640px) {
  .cred-pills { flex-direction: column; align-items: stretch; }
  .cred-pill { border-radius: 16px; }
}
/* Hero: headline paints instantly (LCP); supporting elements rise in once, in sequence */
@media (prefers-reduced-motion: no-preference) {
  .brand-hero .hero-summary, .brand-hero .brand-hero-actions, .brand-hero .cred-pills { animation: ks-rise .7s cubic-bezier(.16,1,.3,1) both; }
  .brand-hero .hero-summary { animation-delay: .08s; }
  .brand-hero .brand-hero-actions { animation-delay: .18s; }
  .brand-hero .cred-pills { animation-delay: .28s; }
}
@keyframes ks-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.clients-footer-proof .proof-dot { display: none; }
.clients-footer-proof { gap: 22px; }

/* ============ 6. Site-wide taste pass (24 Sep) ============ */
/* Section labels: keep the page's first label (hero), the closing CTA label and the homepage "Why KeenSec".
   Every other section speaks through its headline alone. */
main section:not(:first-of-type):not(.closing):not(.usp-overview) .eyebrow { display: none; }
/* No decorative dots before labels, badges or captions (dots inside illustrative consoles stay) */
.eyebrow-dot, .badge-pulse-glow, .pulse-green { display: none !important; }
/* One gradient headline on the whole site: the homepage hero. Inner pages use the solid accent. */
body[data-page="inner"] main h1 .text-gradient { background: none !important; -webkit-text-fill-color: var(--blue) !important; color: var(--blue) !important; }
body[data-page="inner"] main h1 ~ * .status-indicator-dot, .trust-ft-status .status-indicator-dot { display: none; }
/* Numbered step pills read as "Step 01/02"; the verb headline already carries the order */
.mk-step-num { display: none; }
.mk-steps h3 { margin-top: 0; }
/* Hub card grids: vary the tiles so a grid is never a wall of identical white cards */
.mk-cards .mk-card:nth-child(5n+1) { background: linear-gradient(160deg, #eef3ff 0%, #ffffff 72%); border-color: #d6e2ff; }
:root[data-theme="dark"] .mk-cards .mk-card:nth-child(5n+1) { background: linear-gradient(160deg, #17243e 0%, var(--bg-raised) 72%); border-color: rgba(51, 113, 255, 0.3); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mk-cards .mk-card:nth-child(5n+1) { background: linear-gradient(160deg, #17243e 0%, var(--bg-raised) 72%); border-color: rgba(51, 113, 255, 0.3); }
}
.mk-cards .mk-card:nth-child(7n+4) { background: var(--dark); border-color: var(--dark-border); }
.mk-cards .mk-card:nth-child(7n+4) h3 { color: #fff; }
.mk-cards .mk-card:nth-child(7n+4) p { color: #b6c2da; }
.mk-cards .mk-card:nth-child(7n+4) .mk-card-tag, .mk-cards .mk-card:nth-child(7n+4) .mk-card-link { color: #93c5fd; }
/* Inner-page heroes: supporting text rises in after the headline paints */
@media (prefers-reduced-motion: no-preference) {
  .inner-hero .lead, .inner-hero .mk-hero-actions, .inner-hero .mk-chips { animation: ks-rise .7s cubic-bezier(.16,1,.3,1) both; }
  .inner-hero .mk-hero-actions, .inner-hero .mk-chips { animation-delay: .14s; }
}

/* ============ 7. /ai/ page taste pass ============ */
/* Lifecycle: 4-column grid (4 + 3, last step spans two) with readable text instead of 7 cramped columns */
.ai-lifecycle-wrap { overflow: visible; padding: 4px 0 0; }
.ai-lifecycle-steps { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; min-width: 0 !important; }
.ai-lifecycle-steps .ai-lstep { min-width: 0 !important; flex: none !important; padding: 22px 20px; }
.ai-lifecycle-steps .ai-lstep:last-child { grid-column: span 2; }
.ai-lstep h4 { font-size: 17px; }
.ai-lstep p { font-size: 14px; line-height: 1.55; }
.ai-lstep-num { font-size: 12px; letter-spacing: .06em; }
.ai-lstep-role { font-size: 12px; }
@media (max-width: 1024px) { .ai-lifecycle-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ai-lifecycle-steps .ai-lstep:last-child { grid-column: span 2; } }
@media (max-width: 640px) { .ai-lifecycle-steps { grid-template-columns: 1fr; } .ai-lifecycle-steps .ai-lstep:last-child { grid-column: auto; } }
/* Hero on /ai/: buttons sit under the lead */
.inner-hero .mk-hero-actions { margin-top: 28px; }
/* Capability grid: two accent tiles so six cards are not six identical white boxes */
.ai-family-grid .ai-family-card:nth-child(1) { background: linear-gradient(160deg, #eef3ff 0%, #ffffff 72%); border-color: #d6e2ff; }
:root[data-theme="dark"] .ai-family-grid .ai-family-card:nth-child(1) { background: linear-gradient(160deg, #17243e 0%, var(--bg-raised) 72%); border-color: rgba(51, 113, 255, 0.3); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ai-family-grid .ai-family-card:nth-child(1) { background: linear-gradient(160deg, #17243e 0%, var(--bg-raised) 72%); border-color: rgba(51, 113, 255, 0.3); }
}
.ai-family-grid .ai-family-card:nth-child(4) { background: var(--dark); border-color: var(--dark-border); }
.ai-family-grid .ai-family-card:nth-child(4) h3 { color: #fff; }
.ai-family-grid .ai-family-card:nth-child(4) p { color: #b6c2da; }
.ai-family-grid .ai-family-card:nth-child(4) .ai-family-num { color: #93c5fd; }

/* ============ 8. /ai/ declutter: lifecycle as a visual loop ============ */
.ai-loop { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); position: relative; }
.ai-loop::before { content: ""; position: absolute; left: 7%; right: 7%; top: 11px; height: 2px; background: linear-gradient(90deg, var(--line), #bfd0ff 50%, var(--line)); }
.ai-loop-step { position: relative; display: flex; justify-content: center; text-align: center; }
.ai-loop-step > a, .ai-loop-step { font-size: 15px; font-weight: 600; color: var(--muted); letter-spacing: -0.01em; }
.ai-loop-step > a { display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--blue); text-decoration: none; border-radius: 10px; padding: 0 6px 6px; transition: transform .2s ease, color .2s ease; }
.ai-loop-step:not(.is-ai) { flex-direction: column; align-items: center; gap: 14px; padding: 0 6px 6px; }
.ai-loop-dot { width: 24px; height: 24px; border-radius: 50%; background: var(--bg-raised); border: 2px solid var(--border); position: relative; z-index: 1; box-sizing: border-box; }
.ai-loop-step.is-ai .ai-loop-dot { background: var(--blue); border-color: var(--blue); box-shadow: 0 0 0 6px rgba(51, 113, 255, .12); }
.ai-loop-step > a:hover { transform: translateY(-2px); }
.ai-loop-step > a:active { transform: translateY(0) scale(.98); }
.ai-loop-step > a:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.ai-loop-legend { display: flex; gap: 22px; margin: 36px 0 0; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.ai-loop-legend span { display: inline-flex; align-items: center; gap: 8px; }
.ai-loop-legend span::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--border); background: var(--bg-raised); }
.ai-loop-legend span.is-ai::before { background: var(--blue); border-color: var(--blue); }
@media (max-width: 760px) {
  .ai-loop { grid-template-columns: 1fr; gap: 18px; padding-left: 4px; }
  .ai-loop::before { left: 15px; right: auto; top: 12px; bottom: 12px; width: 2px; height: auto; background: var(--line); }
  .ai-loop-step, .ai-loop-step > a, .ai-loop-step:not(.is-ai) { justify-content: flex-start; flex-direction: row; text-align: left; padding: 0; }
}
/* Capability cards: title + one line, more air */
.ai-product-family .ai-family-card { padding: 28px 26px; gap: 8px; }
.ai-product-family .ai-family-card h3 { margin-top: 0; }
.ai-product-family .ai-family-card p { font-size: 15px; }
.ai-product-family { padding-top: 96px; }
.ai-product-family .ai-family-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
.ai-product-family .ai-family-card h3 { font-size: 17px; }
@media (max-width: 1024px) { .ai-product-family .ai-family-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ai-product-family .ai-family-grid { grid-template-columns: 1fr; } }

/* ============ 9. /ai/ spacing rhythm + closing panel ============ */
:root { --rhythm: clamp(64px, 8vw, 112px); }
/* Hero and its trust points read as one block */
.inner-hero:has(+ .ai-badges-section) { padding-bottom: 36px; }
.section.ai-badges-section { padding-top: 0; padding-bottom: 0; margin: 0; }
/* Every section after that gets the same breathing room */
.section.ai-lifecycle-section { padding-top: var(--rhythm); }
.ai-lifecycle-section .section-sub { margin-top: 16px; font-size: 17px; max-width: 60ch; }
.ai-loop { margin-top: 56px; }
.ai-lifecycle-section + .capture-section { padding-top: var(--rhythm); padding-bottom: 0; }
.section.ai-product-family { padding-top: var(--rhythm); padding-bottom: 0; }
.ai-product-family .ai-family-grid { margin: 40px 0 0; }
.ai-product-family + .faq-section { padding-top: var(--rhythm); padding-bottom: var(--rhythm); }
/* Capability cards: one calm surface, first card tinted as the entry point */
.ai-family-grid .ai-family-card:nth-child(4) { background: var(--bg-raised); border-color: var(--border); }
.ai-family-grid .ai-family-card:nth-child(4) h3 { color: var(--text-heading); }
.ai-family-grid .ai-family-card:nth-child(4) p { color: var(--text-muted); }
.ai-product-family .ai-family-card h3 { margin-bottom: 0; line-height: 1.3; }
.ai-product-family .ai-family-card p { margin: 0; line-height: 1.55; }
/* Closing panel: contained, rounded, heading left and actions right */
.section.connected-next { background: none; border: 0; margin: 0 auto; padding-top: 0; padding-bottom: var(--rhythm); }
.connected-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 32px; padding: clamp(36px, 5vw, 64px); border-radius: 24px; background: radial-gradient(120% 140% at 0% 0%, #eaf1ff 0%, #f5f8ff 55%, #ffffff 100%); border: 1px solid #dce7fa; }
:root[data-theme="dark"] .connected-inner {
  background: radial-gradient(120% 140% at 0% 0%, #17243e 0%, var(--bg-raised) 55%, var(--bg-surface) 100%);
  border-color: rgba(51, 113, 255, 0.3);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .connected-inner {
    background: radial-gradient(120% 140% at 0% 0%, #17243e 0%, var(--bg-raised) 55%, var(--bg-surface) 100%);
    border-color: rgba(51, 113, 255, 0.3);
  }
}
.connected-inner h2 { font-size: clamp(28px, 3vw, 40px); margin: 0; text-wrap: balance; }
.connected-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.connected-actions .button-ghost { padding: 13px 24px; }
@media (max-width: 760px) { .connected-inner { grid-template-columns: 1fr; } .connected-actions { flex-direction: column; } .connected-actions a { justify-content: center; width: 100%; } }
/* Badge row back inside the content column */
.section.ai-badges-section { max-width: 1360px; margin-left: auto; margin-right: auto; }
/* Breadcrumb sits close to the page title on every inner page */
.breadcrumbs + .inner-hero, .breadcrumbs + .section.inner-hero { padding-top: clamp(28px, 3.5vw, 48px); }
/* Loop: dots and labels start on the content edge; the line runs first dot to last dot */
@media (min-width: 761px) {
  .ai-loop::before { left: 12px; right: calc(100% / 7 - 12px); }
  .ai-loop-step, .ai-loop-step > a, .ai-loop-step:not(.is-ai) { justify-content: flex-start; align-items: flex-start; text-align: left; padding-left: 0; padding-right: 0; }
}
/* The screenshot illustrates the loop, so it sits with it */
.ai-lifecycle-section + .capture-section { padding-top: 56px; }
@media (min-width: 761px) {
  /* 6 equal gaps across the full width: first dot on the left edge, last dot on the right edge */
  .ai-loop { grid-template-columns: repeat(6, calc((100% - 24px) / 6)) 24px; }
  .ai-loop::before { left: 12px; right: 12px; }
  .ai-loop-step { min-width: 0; white-space: nowrap; }
  .ai-loop-step:last-child, .ai-loop-step:last-child > a { align-items: flex-end; text-align: right; }
}

/* ============ 10. One motion language on every page (homepage is the reference) ============ */
/* Inner heroes use the homepage hero sequence: lead .08s, actions .18s, trust row .28s */
@media (prefers-reduced-motion: no-preference) {
  .inner-hero .lead { animation-delay: .08s; }
  .inner-hero .mk-hero-actions { animation-delay: .18s; }
  .inner-hero .mk-chips, .inner-hero + .ai-badges-section .ai-hero-badges { animation: ks-rise .7s cubic-bezier(.16,1,.3,1) .28s both; }
  .article-header .lead, .article-header .article-meta { animation: ks-rise .7s cubic-bezier(.16,1,.3,1) both; }
  .article-header .lead { animation-delay: .08s; }
  .article-header .article-meta { animation-delay: .18s; }
}
html.js-motion [data-reveal="in"] { opacity: 1; transform: none; }

/* ============ 11. One vertical rhythm on every page ============ */
/* Every top-level section owns the same padding above and below, so content-to-content gaps are 2 x --sec-y
   everywhere. Full-width colour bands apply it to their inner wrapper; boxed callouts use it as outer margin. */
:root { --sec-y: clamp(48px, 6vw, 88px); }
main :where(section.section:not(section section):not(.breadcrumbs):not(.brand-hero):not(.inner-hero):not(.mk-callout)) { padding-top: var(--sec-y) !important; padding-bottom: var(--sec-y) !important; margin-top: 0 !important; margin-bottom: 0 !important; }
main .story-band, main .change-band { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; }
main .story-band-inner, main .change-inner { padding-top: var(--sec-y) !important; padding-bottom: var(--sec-y) !important; }
main .section.mk-callout { margin-top: var(--sec-y) !important; margin-bottom: var(--sec-y) !important; padding-top: clamp(28px, 3vw, 40px) !important; padding-bottom: clamp(28px, 3vw, 40px) !important; }
/* Heroes end on the same rhythm */
main .brand-hero, main .inner-hero { padding-bottom: var(--sec-y) !important; }
/* Rows that belong to the hero sit tight under it instead of starting a new section */
main .inner-hero:has(+ .ai-badges-section) { padding-bottom: 36px !important; }
main .section.ai-badges-section { padding-top: 0 !important; }
main .brand-hero:has(+ .home-clients-section) { padding-bottom: 40px !important; }
main .section.home-clients-section { padding-top: 0 !important; }
/* A product frame that illustrates the section above it stays with that section */
main .section.ai-lifecycle-section + .capture-section, main .section.channel-section + .capture-section { padding-top: 0 !important; }
main .inner-hero:has(+ .mk-glance) { padding-bottom: 40px !important; }
main .section.mk-glance { padding-top: 0 !important; }
/* Section padding is the only source of vertical gap: no stray outer margins on first/last blocks */
main .capture-section > .product-screenshot-frame { margin-top: 0 !important; }
main section.section > .availability:last-child { margin-bottom: 0 !important; }

/* ============ 12. Homepage card behaviour on every page ============ */
.ks-card-link { transition: transform .25s cubic-bezier(.2,.7,.2,1), border-color .25s ease, box-shadow .25s ease; }
.ks-card-link:hover { transform: translateY(-3px); border-color: #bcd0ff; box-shadow: 0 14px 30px -20px rgba(23, 77, 200, .45); }
.ks-card-link:hover h3, .ks-card-link:hover h4, .ks-card-link:hover strong { color: var(--blue); }
.ks-card-link:active { transform: translateY(-1px) scale(.99); }
.ks-card-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .ks-card-link, .ks-card-link:hover { transform: none; } }

/* ============ 13. Liquid scroll + softer reveal ============ */
/* Reveal: longer expo-out ease so cards settle in rather than snap; same 70ms stagger as the homepage */
html.js-motion [data-reveal] { transform: translateY(22px); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--i, 0) * 70ms); }
html.js-motion [data-reveal].is-visible, html.js-motion [data-reveal="in"] { opacity: 1; transform: none; }
/* Solutions rows: headline and its paragraph need air */
.solution-list article h2 { margin-bottom: 16px; }
.solution-list article h2 + p { margin-top: 0; }
@media (max-width: 640px) { .content-rows article { grid-template-columns: 1fr; gap: 8px; } }

/* ============ 14. Homepage card hover on every card surface ============ */
/* Non-link cards get the same tinted border and shadow with a smaller lift, so they respond without pretending to be links */
.ks-card-lift { transition: transform .25s cubic-bezier(.2,.7,.2,1), border-color .25s ease, box-shadow .25s ease; }
.ks-card-lift:hover { transform: translateY(-2px); border-color: #bcd0ff; box-shadow: 0 14px 30px -20px rgba(23, 77, 200, .45); }
@media (prefers-reduced-motion: reduce) { .ks-card-lift, .ks-card-lift:hover { transform: none; } }
.story-band .ks-card-lift:hover, .story-band .ks-card-link:hover, .story-band-dark .ks-card-lift:hover { border-color: rgba(147, 197, 253, .45); box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .6); }
/* Shared hover wins over page-specific hover styles so every card responds the same way */
main .ks-card-lift:hover, main .ks-card-link:hover { border-color: #bcd0ff !important; box-shadow: 0 14px 30px -20px rgba(23, 77, 200, .45) !important; }
main .story-band .ks-card-lift:hover, main .story-band .ks-card-link:hover { border-color: rgba(147, 197, 253, .45) !important; box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .6) !important; }
html.ks-arming [data-reveal] { transition: none !important; }

/* ============ 15. Partner program ============ */
/* Header: secondary partner button beside Book a demo */
.button-header-partner { display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px; font-size: 13px; font-weight: 600; border-radius: 8px; border: 1px solid #cfdcfb; background: #fff; color: var(--blue-ink) !important; white-space: nowrap; transition: border-color .2s ease, background-color .2s ease, transform .2s ease; }
.button-header-partner:hover { border-color: var(--blue); background: #f5f8ff; }
.button-header-partner:active { transform: translateY(1px) scale(.98); }
.button-header-partner[aria-current="page"] { border-color: var(--blue); background: #eef3ff; }
.button-header-partner .lbl-short { display: none; }
@media (min-width: 961px) and (max-width: 1119px) { .site-header .brand img { width: 138px; height: auto; } .header-container { gap: 14px; } #main-nav { gap: 10px !important; } #main-nav a, .nav-group > a { white-space: nowrap; font-size: 13.5px; } .button-header-partner { padding: 8px 12px; } .button-header-partner .lbl-long { display: none; } .button-header-partner .lbl-short { display: inline; } }

:root[data-theme="dark"] .button-header-partner,
:root[data-theme="dark"] #main-nav > a.button-header-partner.button-header-partner {
  background: var(--bg-raised);
  border-color: var(--border-strong);
  color: var(--text-heading) !important;
}
:root[data-theme="dark"] .button-header-partner:hover,
:root[data-theme="dark"] #main-nav > a.button-header-partner.button-header-partner:hover {
  background: var(--bg-sunken);
  border-color: var(--accent);
  color: var(--accent-ink) !important;
}
:root[data-theme="dark"] .button-header-partner[aria-current="page"] {
  border-color: var(--accent);
  background: rgba(51, 113, 255, 0.15);
  color: var(--accent-ink) !important;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .button-header-partner,
  :root:not([data-theme="light"]) #main-nav > a.button-header-partner.button-header-partner {
    background: var(--bg-raised);
    border-color: var(--border-strong);
    color: var(--text-heading) !important;
  }
  :root:not([data-theme="light"]) .button-header-partner:hover,
  :root:not([data-theme="light"]) #main-nav > a.button-header-partner.button-header-partner:hover {
    background: var(--bg-sunken);
    border-color: var(--accent);
    color: var(--accent-ink) !important;
  }
  :root:not([data-theme="light"]) .button-header-partner[aria-current="page"] {
    border-color: var(--accent);
    background: rgba(51, 113, 255, 0.15);
    color: var(--accent-ink) !important;
  }
}

/* Section heads on the partner page */
.partner-why .mk-section-head p, .partner-who .mk-section-head p { margin-top: 12px; max-width: 46ch; }
.partner-card h3, .partner-step h3 { font-size: 18px; margin: 0 0 8px; color: var(--text-heading); }
.partner-card p, .partner-step p { font-size: 15px; line-height: 1.6; margin: 0; color: var(--text-muted); }
.partner-card { padding: 26px 24px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-raised); }

/* Why partner: 3 x 2, the AI card leads */
.partner-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.partner-grid .partner-card:first-child { background: linear-gradient(160deg, #eef3ff 0%, #ffffff 72%); border-color: #d6e2ff; }
:root[data-theme="dark"] .partner-grid .partner-card:first-child { background: linear-gradient(160deg, #17243e 0%, var(--bg-raised) 72%); border-color: rgba(51, 113, 255, 0.3); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .partner-grid .partner-card:first-child { background: linear-gradient(160deg, #17243e 0%, var(--bg-raised) 72%); border-color: rgba(51, 113, 255, 0.3); }
}

/* Who it is for: heading left, list right */
.partner-split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.partner-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.partner-list li { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--border); }
.partner-list strong { color: var(--text-heading); font-size: 17px; }
.partner-list span { color: var(--text-muted); font-size: 15px; line-height: 1.6; }

/* Opportunity: 2 wide + 3 */
.partner-opp-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.partner-opp-grid .partner-card { grid-column: span 2; }
.partner-opp-grid .partner-card:nth-child(-n+2) { grid-column: span 3; }

/* How it works: four steps on one connected line */
.partner-steps { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: pstep; }
.partner-step { position: relative; padding: 52px 24px 26px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-raised); counter-increment: pstep; }
.partner-step::before { content: counter(pstep); position: absolute; top: 20px; left: 24px; width: 24px; height: 24px; border-radius: 50%; background: var(--blue); color: #fff; font: 600 12px/24px var(--font-mono); text-align: center; }
.partner-step:last-child { background: linear-gradient(160deg, #eef3ff 0%, #ffffff 72%); border-color: #d6e2ff; }
:root[data-theme="dark"] .partner-step:last-child { background: linear-gradient(160deg, #17243e 0%, var(--bg-raised) 72%); border-color: rgba(51, 113, 255, 0.3); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .partner-step:last-child { background: linear-gradient(160deg, #17243e 0%, var(--bg-raised) 72%); border-color: rgba(51, 113, 255, 0.3); }
}

/* Application */
.partner-apply-lead { font-size: 17px; margin: 16px 0 28px; max-width: 42ch; }
.partner-apply .demo-note { margin-top: 0; }
.partner-services { border: 0; margin: 18px 0 0; padding: 0; min-width: 0; }
.partner-services legend { font-size: 13.5px; font-weight: 600; color: var(--text-heading); margin-bottom: 8px; padding: 0; }
.partner-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.partner-chip { display: inline-flex; margin: 0; font-weight: 500; cursor: pointer; }
.partner-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; padding: 0; }
.partner-chip span { display: inline-flex; align-items: center; padding: 8px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-raised); font-size: 13.5px; color: var(--text); transition: border-color .15s ease, background-color .15s ease, color .15s ease; }
.partner-chip:hover span { border-color: var(--blue); }
.partner-chip input:checked + span { background: var(--blue); border-color: var(--blue); color: #fff; }
.partner-chip input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.partner-form textarea { resize: vertical; min-height: 110px; }
.partner-form [aria-invalid="true"] { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, .12); }
.field-error { margin: 6px 0 0; font-size: 13px; color: #b91c1c; }
.form-feedback { margin-top: 18px; padding: 14px 18px; border-radius: 8px; font-size: 13.5px; line-height: 1.55; }
.form-feedback.is-pending { background: #eff4ff; border: 1px solid #cfdcfb; color: #1e3a8a; }
.form-feedback.is-success { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }
.form-feedback.is-error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.partner-copy { display: inline; margin-left: 4px; padding: 0; border: 0; background: none; color: var(--blue-ink); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }

@media (max-width: 1024px) {
  .partner-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .partner-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .partner-split { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .partner-grid, .partner-steps, .partner-opp-grid { grid-template-columns: 1fr; }
  .partner-opp-grid .partner-card, .partner-opp-grid .partner-card:nth-child(-n+2) { grid-column: auto; }
  .partner-list li { grid-template-columns: 1fr; gap: 4px; }
}

/* Homepage partner section */
.home-partners-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; padding: clamp(36px, 5vw, 64px); border: 1px solid #dce7fa; border-radius: 24px; background-color: #f5f8ff; background-image: radial-gradient(120% 140% at 0% 0%, #eaf1ff 0%, #f5f8ff 55%, #ffffff 100%); }
.home-partners-inner h2 { font-size: clamp(28px, 3vw, 42px); margin: 0 0 14px; text-wrap: balance; }
.home-partners-inner p { font-size: 16px; max-width: 46ch; margin: 0 0 24px; }
.home-partners-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.home-partners-points li { display: grid; gap: 4px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.home-partners-points strong { color: var(--ink-heading); font-size: 16px; }
.home-partners-points span { color: var(--muted); font-size: 14.5px; line-height: 1.55; }
@media (max-width: 860px) { .home-partners-inner { grid-template-columns: 1fr; } }
@media (min-width: 961px) and (max-width: 1023px) { #main-nav { gap: 7px !important; } .button-header { padding: 9px 14px; } .button-header .btn-arrow { display: none; } }
/* Beats site.css "#main-nav > a:not(.button)" (link padding and current-page underline) */
#main-nav > a.button-header-partner.button-header-partner { padding: 8px 16px; flex: none; color: var(--blue-ink); }
#main-nav > a.button-header-partner.button-header-partner::after { display: none; }
@media (min-width: 961px) and (max-width: 1119px) { #main-nav > a.button-header-partner.button-header-partner { padding: 8px 12px; } }
@media (max-width: 960px) { #main-nav > a.button-header-partner.button-header-partner { justify-content: center; padding: 12px 16px; } }

/* ============ 16. Line-art accents (replaces the full-page grid) ============ */
/* Thin wave and contour line art placed in chosen sections only, faded at the edges. The page itself stays white. */
:root { --deco-waves: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 520' preserveAspectRatio='none' fill='none' stroke='%233371ff' stroke-width='1' stroke-opacity='.32'%3E%3Cpath d='M-20 21.6 L0 30.0 L20 38.4 L40 46.4 L60 53.9 L80 60.5 L100 66.1 L120 70.3 L140 73.3 L160 74.8 L180 74.9 L200 73.8 L220 71.5 L240 68.2 L260 64.2 L280 59.7 L300 54.9 L320 50.1 L340 45.5 L360 41.4 L380 37.8 L400 34.8 L420 32.6 L440 31.1 L460 30.2 L480 29.8 L500 29.8 L520 30.0 L540 30.2 L560 30.2 L580 29.9 L600 29.1 L620 27.7 L640 25.6 L660 22.8 L680 19.3 L700 15.2 L720 10.7 L740 5.9 L760 1.2 L780 -3.4 L800 -7.6 L820 -11.0 L840 -13.5 L860 -14.8 L880 -14.9 L900 -13.6 L920 -11.0 L940 -6.9 L960 -1.6 L980 4.9 L1000 12.2 L1020 20.2 L1040 28.5 L1060 36.9 L1080 45.1 L1100 52.7 L1120 59.5 L1140 65.2 L1160 69.7 L1180 72.9 L1200 74.6 L1220 75.0'/%3E%3Cpath d='M-20 42.0 L0 50.2 L20 58.6 L40 66.9 L60 74.9 L80 82.1 L100 88.4 L120 93.5 L140 97.3 L160 99.6 L180 100.4 L200 99.7 L220 97.7 L240 94.3 L260 89.9 L280 84.7 L300 78.9 L320 72.7 L340 66.6 L360 60.7 L380 55.2 L400 50.3 L420 46.2 L440 42.9 L460 40.4 L480 38.8 L500 37.8 L520 37.5 L540 37.5 L560 37.8 L580 38.2 L600 38.4 L620 38.3 L640 37.7 L660 36.7 L680 35.0 L700 32.8 L720 30.0 L740 26.9 L760 23.5 L780 20.1 L800 16.8 L820 13.9 L840 11.7 L860 10.3 L880 9.9 L900 10.7 L920 12.7 L940 16.0 L960 20.6 L980 26.3 L1000 33.1 L1020 40.6 L1040 48.8 L1060 57.1 L1080 65.5 L1100 73.5 L1120 80.9 L1140 87.4 L1160 92.7 L1180 96.8 L1200 99.3 L1220 100.4'/%3E%3Cpath d='M-20 64.3 L0 71.8 L20 79.7 L40 87.7 L60 95.6 L80 102.9 L100 109.6 L120 115.2 L140 119.5 L160 122.5 L180 123.9 L200 123.7 L220 122.0 L240 118.9 L260 114.4 L280 108.8 L300 102.3 L320 95.3 L340 87.9 L360 80.5 L380 73.4 L400 66.8 L420 60.9 L440 55.9 L460 51.9 L480 48.8 L500 46.7 L520 45.6 L540 45.3 L560 45.6 L580 46.3 L600 47.4 L620 48.4 L640 49.4 L660 50.1 L680 50.3 L700 50.1 L720 49.4 L740 48.2 L760 46.7 L780 44.8 L800 42.8 L820 40.9 L840 39.3 L860 38.1 L880 37.7 L900 38.1 L920 39.5 L940 42.1 L960 45.7 L980 50.5 L1000 56.3 L1020 63.0 L1040 70.4 L1060 78.3 L1080 86.3 L1100 94.2 L1120 101.7 L1140 108.5 L1160 114.3 L1180 118.9 L1200 122.1 L1220 123.8'/%3E%3Cpath d='M-20 88.6 L0 94.9 L20 101.8 L40 109.0 L60 116.2 L80 123.2 L100 129.6 L120 135.3 L140 139.9 L160 143.2 L180 145.1 L200 145.4 L220 144.2 L240 141.3 L260 137.0 L280 131.4 L300 124.7 L320 117.2 L340 109.0 L360 100.7 L380 92.3 L400 84.3 L420 76.9 L440 70.4 L460 64.8 L480 60.4 L500 57.2 L520 55.1 L540 54.2 L560 54.3 L580 55.2 L600 56.8 L620 58.9 L640 61.1 L660 63.4 L680 65.6 L700 67.4 L720 68.9 L740 69.8 L760 70.3 L780 70.3 L800 70.0 L820 69.4 L840 68.7 L860 68.2 L880 68.0 L900 68.3 L920 69.3 L940 71.1 L960 73.8 L980 77.5 L1000 82.1 L1020 87.5 L1040 93.8 L1060 100.5 L1080 107.7 L1100 114.9 L1120 122.0 L1140 128.5 L1160 134.4 L1180 139.2 L1200 142.7 L1220 144.9'/%3E%3Cpath d='M-20 114.9 L0 119.7 L20 125.1 L40 130.9 L60 137.0 L80 143.0 L100 148.8 L120 154.0 L140 158.4 L160 161.8 L180 163.9 L200 164.6 L220 163.8 L240 161.4 L260 157.5 L280 152.2 L300 145.6 L320 138.0 L340 129.6 L360 120.7 L380 111.6 L400 102.7 L420 94.2 L440 86.4 L460 79.6 L480 74.0 L500 69.6 L520 66.6 L540 65.0 L560 64.7 L580 65.6 L600 67.5 L620 70.2 L640 73.6 L660 77.3 L680 81.2 L700 84.9 L720 88.5 L740 91.6 L760 94.2 L780 96.3 L800 97.9 L820 98.9 L840 99.6 L860 100.0 L880 100.4 L900 100.8 L920 101.5 L940 102.7 L960 104.5 L980 106.9 L1000 110.2 L1020 114.1 L1040 118.8 L1060 124.1 L1080 129.9 L1100 135.9 L1120 142.0 L1140 147.8 L1160 153.2 L1180 157.7 L1200 161.3 L1220 163.6'/%3E%3Cpath d='M-20 143.1 L0 146.2 L20 149.8 L40 153.8 L60 158.2 L80 162.8 L100 167.4 L120 171.7 L140 175.4 L160 178.4 L180 180.4 L200 181.3 L220 180.8 L240 178.9 L260 175.5 L280 170.7 L300 164.6 L320 157.4 L340 149.2 L360 140.3 L380 131.0 L400 121.7 L420 112.6 L440 104.0 L460 96.3 L480 89.8 L500 84.5 L520 80.6 L540 78.3 L560 77.5 L580 78.1 L600 80.1 L620 83.3 L640 87.4 L660 92.2 L680 97.5 L700 103.0 L720 108.5 L740 113.7 L760 118.4 L780 122.6 L800 126.2 L820 129.0 L840 131.2 L860 132.8 L880 134.0 L900 134.9 L920 135.6 L940 136.3 L960 137.2 L980 138.5 L1000 140.3 L1020 142.7 L1040 145.6 L1060 149.1 L1080 153.1 L1100 157.5 L1120 162.0 L1140 166.6 L1160 171.0 L1180 174.8 L1200 178.0 L1220 180.2'/%3E%3Cpath d='M-20 173.0 L0 174.1 L20 175.6 L40 177.7 L60 180.1 L80 182.8 L100 185.7 L120 188.6 L140 191.2 L160 193.5 L180 195.0 L200 195.7 L220 195.4 L240 193.9 L260 191.1 L280 187.0 L300 181.6 L320 175.1 L340 167.5 L360 159.2 L380 150.2 L400 141.1 L420 131.9 L440 123.1 L460 115.0 L480 107.9 L500 102.0 L520 97.5 L540 94.5 L560 93.2 L580 93.5 L600 95.4 L620 98.7 L640 103.3 L660 108.9 L680 115.2 L700 122.1 L720 129.2 L740 136.2 L760 142.9 L780 149.1 L800 154.6 L820 159.2 L840 163.1 L860 166.1 L880 168.2 L900 169.7 L920 170.6 L940 171.2 L960 171.5 L980 171.7 L1000 172.1 L1020 172.8 L1040 173.9 L1060 175.3 L1080 177.3 L1100 179.6 L1120 182.3 L1140 185.2 L1160 188.1 L1180 190.8 L1200 193.1 L1220 194.8'/%3E%3Cpath d='M-20 203.9 L0 203.1 L20 202.6 L40 202.4 L60 202.6 L80 203.2 L100 204.0 L120 205.1 L140 206.3 L160 207.3 L180 208.1 L200 208.3 L220 207.9 L240 206.6 L260 204.3 L280 201.0 L300 196.6 L320 191.0 L340 184.5 L360 177.1 L380 169.1 L400 160.6 L420 152.0 L440 143.6 L460 135.6 L480 128.4 L500 122.3 L520 117.4 L540 114.1 L560 112.3 L580 112.2 L600 113.9 L620 117.1 L640 121.8 L660 127.8 L680 134.8 L700 142.7 L720 150.9 L740 159.4 L760 167.7 L780 175.6 L800 182.8 L820 189.3 L840 194.7 L860 199.1 L880 202.4 L900 204.7 L920 206.0 L940 206.5 L960 206.4 L980 205.8 L1000 205.0 L1020 204.1 L1040 203.3 L1060 202.7 L1080 202.4 L1100 202.5 L1120 203.0 L1140 203.9 L1160 204.9 L1180 206.1 L1200 207.2 L1220 208.0'/%3E%3Cpath d='M-20 235.5 L0 232.9 L20 230.3 L40 227.9 L60 225.8 L80 224.0 L100 222.7 L120 221.7 L140 221.0 L160 220.5 L180 220.1 L200 219.6 L220 218.8 L240 217.6 L260 215.7 L280 213.1 L300 209.6 L320 205.3 L340 200.1 L360 194.1 L380 187.4 L400 180.2 L420 172.7 L440 165.2 L460 157.9 L480 151.2 L500 145.3 L520 140.5 L540 137.0 L560 135.0 L580 134.6 L600 135.9 L620 138.9 L640 143.5 L660 149.6 L680 156.9 L700 165.2 L720 174.2 L740 183.6 L760 193.0 L780 202.2 L800 210.9 L820 218.8 L840 225.7 L860 231.4 L880 235.8 L900 239.0 L920 240.9 L940 241.6 L960 241.2 L980 240.0 L1000 238.2 L1020 235.9 L1040 233.3 L1060 230.8 L1080 228.3 L1100 226.1 L1120 224.3 L1140 222.9 L1160 221.8 L1180 221.1 L1200 220.6 L1220 220.2'/%3E%3Cpath d='M-20 266.9 L0 262.8 L20 258.4 L40 253.9 L60 249.5 L80 245.4 L100 241.7 L120 238.6 L140 235.9 L160 233.6 L180 231.8 L200 230.3 L220 228.8 L240 227.4 L260 225.8 L280 223.8 L300 221.3 L320 218.2 L340 214.5 L360 210.1 L380 205.1 L400 199.6 L420 193.7 L440 187.6 L460 181.6 L480 175.9 L500 170.8 L520 166.4 L540 163.2 L560 161.2 L580 160.7 L600 161.8 L620 164.5 L640 168.7 L660 174.5 L680 181.7 L700 190.0 L720 199.2 L740 209.0 L760 219.1 L780 229.1 L800 238.8 L820 247.7 L840 255.7 L860 262.5 L880 268.0 L900 272.0 L920 274.5 L940 275.5 L960 275.2 L980 273.6 L1000 271.0 L1020 267.6 L1040 263.5 L1060 259.2 L1080 254.7 L1100 250.2 L1120 246.1 L1140 242.4 L1160 239.1 L1180 236.3 L1200 234.0 L1220 232.1'/%3E%3Cpath d='M-20 297.6 L0 292.2 L20 286.3 L40 280.0 L60 273.6 L80 267.3 L100 261.4 L120 256.0 L140 251.3 L160 247.2 L180 243.7 L200 240.9 L220 238.7 L240 236.8 L260 235.2 L280 233.6 L300 232.0 L320 230.2 L340 228.0 L360 225.5 L380 222.4 L400 218.9 L420 215.0 L440 210.8 L460 206.6 L480 202.4 L500 198.5 L520 195.1 L540 192.5 L560 190.9 L580 190.5 L600 191.4 L620 193.8 L640 197.6 L660 202.9 L680 209.6 L700 217.5 L720 226.4 L740 236.1 L760 246.2 L780 256.5 L800 266.6 L820 276.1 L840 284.7 L860 292.3 L880 298.5 L900 303.2 L920 306.3 L940 307.7 L960 307.5 L980 305.8 L1000 302.7 L1020 298.4 L1040 293.2 L1060 287.3 L1080 281.1 L1100 274.7 L1120 268.4 L1140 262.4 L1160 256.9 L1180 252.0 L1200 247.8 L1220 244.3'/%3E%3Cpath d='M-20 326.8 L0 320.6 L20 313.5 L40 305.7 L60 297.7 L80 289.6 L100 281.7 L120 274.3 L140 267.5 L160 261.6 L180 256.5 L200 252.3 L220 249.0 L240 246.6 L260 244.8 L280 243.5 L300 242.6 L320 241.9 L340 241.3 L360 240.5 L380 239.5 L400 238.2 L420 236.6 L440 234.7 L460 232.5 L480 230.3 L500 228.0 L520 226.1 L540 224.5 L560 223.6 L580 223.6 L600 224.5 L620 226.7 L640 230.1 L660 234.7 L680 240.7 L700 247.8 L720 256.0 L740 265.0 L760 274.6 L780 284.5 L800 294.3 L820 303.9 L840 312.7 L860 320.6 L880 327.2 L900 332.3 L920 335.8 L940 337.6 L960 337.6 L980 335.9 L1000 332.5 L1020 327.8 L1040 321.7 L1060 314.8 L1080 307.1 L1100 299.1 L1120 291.0 L1140 283.0 L1160 275.5 L1180 268.6 L1200 262.5 L1220 257.3'/%3E%3Cpath d='M-20 354.0 L0 347.3 L20 339.5 L40 330.8 L60 321.5 L80 311.9 L100 302.5 L120 293.4 L140 284.9 L160 277.2 L180 270.6 L200 265.1 L220 260.7 L240 257.5 L260 255.4 L280 254.2 L300 253.9 L320 254.1 L340 254.8 L360 255.8 L380 256.8 L400 257.7 L420 258.5 L440 259.0 L460 259.3 L480 259.3 L500 259.1 L520 258.9 L540 258.8 L560 258.9 L580 259.6 L600 260.8 L620 262.8 L640 265.8 L660 269.8 L680 274.8 L700 280.9 L720 287.9 L740 295.8 L760 304.3 L780 313.3 L800 322.3 L820 331.3 L840 339.7 L860 347.3 L880 353.9 L900 359.1 L920 362.8 L940 364.8 L960 365.0 L980 363.4 L1000 360.0 L1020 355.0 L1040 348.6 L1060 340.9 L1080 332.3 L1100 323.1 L1120 313.6 L1140 304.1 L1160 294.9 L1180 286.3 L1200 278.5 L1220 271.7'/%3E%3Cpath d='M-20 378.8 L0 372.0 L20 363.9 L40 354.6 L60 344.7 L80 334.2 L100 323.6 L120 313.3 L140 303.5 L160 294.5 L180 286.5 L200 279.8 L220 274.4 L240 270.4 L260 267.9 L280 266.6 L300 266.6 L320 267.6 L340 269.4 L360 271.9 L380 274.8 L400 277.9 L420 281.0 L440 284.0 L460 286.7 L480 289.2 L500 291.3 L520 293.1 L540 294.7 L560 296.2 L580 297.8 L600 299.6 L620 301.7 L640 304.4 L660 307.7 L680 311.7 L700 316.6 L720 322.2 L740 328.6 L760 335.6 L780 343.0 L800 350.7 L820 358.4 L840 365.8 L860 372.7 L880 378.7 L900 383.6 L920 387.2 L940 389.2 L960 389.5 L980 388.0 L1000 384.7 L1020 379.8 L1040 373.3 L1060 365.4 L1080 356.3 L1100 346.4 L1120 336.0 L1140 325.5 L1160 315.1 L1180 305.1 L1200 296.0 L1220 287.8'/%3E%3Cpath d='M-20 400.8 L0 394.2 L20 386.2 L40 377.0 L60 366.9 L80 356.1 L100 345.0 L120 333.9 L140 323.3 L160 313.4 L180 304.5 L200 296.8 L220 290.6 L240 285.9 L260 282.9 L280 281.4 L300 281.6 L320 283.1 L340 285.8 L360 289.5 L380 294.0 L400 299.1 L420 304.3 L440 309.7 L460 314.9 L480 319.7 L500 324.2 L520 328.2 L540 331.7 L560 334.8 L580 337.6 L600 340.1 L620 342.6 L640 345.1 L660 347.8 L680 350.9 L700 354.4 L720 358.5 L740 363.1 L760 368.2 L780 373.7 L800 379.6 L820 385.5 L840 391.4 L860 397.0 L880 401.9 L900 406.0 L920 409.0 L940 410.7 L960 411.0 L980 409.6 L1000 406.5 L1020 401.8 L1040 395.5 L1060 387.7 L1080 378.7 L1100 368.7 L1120 358.0 L1140 346.9 L1160 335.8 L1180 325.1 L1200 315.0 L1220 305.9'/%3E%3Cpath d='M-20 420.0 L0 413.9 L20 406.4 L40 397.6 L60 387.9 L80 377.3 L100 366.3 L120 355.2 L140 344.4 L160 334.1 L180 324.6 L200 316.4 L220 309.6 L240 304.5 L260 301.1 L280 299.4 L300 299.6 L320 301.4 L340 304.7 L360 309.4 L380 315.2 L400 321.8 L420 328.9 L440 336.3 L460 343.7 L480 350.9 L500 357.7 L520 363.8 L540 369.3 L560 374.1 L580 378.2 L600 381.7 L620 384.6 L640 387.2 L660 389.5 L680 391.7 L700 393.9 L720 396.4 L740 399.0 L760 402.0 L780 405.4 L800 409.0 L820 412.8 L840 416.6 L860 420.3 L880 423.7 L900 426.6 L920 428.7 L940 429.8 L960 429.7 L980 428.2 L1000 425.3 L1020 420.9 L1040 415.1 L1060 407.8 L1080 399.2 L1100 389.6 L1120 379.2 L1140 368.3 L1160 357.2 L1180 346.2 L1200 335.8 L1220 326.2'/%3E%3Cpath d='M-20 436.6 L0 431.1 L20 424.4 L40 416.4 L60 407.5 L80 397.8 L100 387.5 L120 377.0 L140 366.5 L160 356.4 L180 347.1 L200 338.8 L220 331.9 L240 326.5 L260 322.8 L280 321.1 L300 321.2 L320 323.1 L340 326.8 L360 332.1 L380 338.8 L400 346.6 L420 355.2 L440 364.3 L460 373.5 L480 382.7 L500 391.4 L520 399.6 L540 407.0 L560 413.5 L580 418.9 L600 423.5 L620 427.0 L640 429.8 L660 431.8 L680 433.3 L700 434.4 L720 435.2 L740 436.0 L760 436.8 L780 437.7 L800 438.9 L820 440.2 L840 441.7 L860 443.2 L880 444.6 L900 445.8 L920 446.5 L940 446.6 L960 446.0 L980 444.3 L1000 441.5 L1020 437.4 L1040 432.2 L1060 425.6 L1080 417.9 L1100 409.1 L1120 399.5 L1140 389.3 L1160 378.8 L1180 368.3 L1200 358.1 L1220 348.7'/%3E%3Cpath d='M-20 450.9 L0 446.1 L20 440.3 L40 433.5 L60 425.9 L80 417.4 L100 408.4 L120 399.0 L140 389.6 L160 380.4 L180 371.7 L200 364.0 L220 357.3 L240 352.1 L260 348.5 L280 346.7 L300 346.8 L320 348.8 L340 352.7 L360 358.3 L380 365.5 L400 374.0 L420 383.5 L440 393.8 L460 404.4 L480 415.1 L500 425.5 L520 435.3 L540 444.3 L560 452.3 L580 459.1 L600 464.7 L620 469.0 L640 472.0 L660 473.9 L680 474.9 L700 474.9 L720 474.3 L740 473.3 L760 472.0 L780 470.5 L800 469.1 L820 467.8 L840 466.7 L860 465.7 L880 464.9 L900 464.0 L920 463.1 L940 461.9 L960 460.4 L980 458.2 L1000 455.4 L1020 451.7 L1040 447.0 L1060 441.4 L1080 434.8 L1100 427.3 L1120 418.9 L1140 410.0 L1160 400.7 L1180 391.2 L1200 382.0 L1220 373.2'/%3E%3C/svg%3E"); --deco-contours: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600' fill='none' stroke='%233371ff' stroke-width='1' stroke-opacity='.3'%3E%3Cpath d='M331.1 300.0 L332.5 302.5 L333.4 305.1 L333.6 307.8 L333.1 310.5 L331.7 312.9 L329.8 314.9 L327.3 316.6 L324.6 317.9 L321.7 318.9 L319.0 319.7 L316.3 320.3 L313.9 320.9 L311.5 321.5 L309.3 322.2 L307.0 322.9 L304.7 323.4 L302.4 323.8 L300.0 323.9 L297.6 323.8 L295.3 323.4 L293.0 322.9 L290.7 322.2 L288.5 321.5 L286.1 320.9 L283.7 320.3 L281.0 319.7 L278.3 318.9 L275.4 317.9 L272.7 316.6 L270.2 314.9 L268.3 312.9 L266.9 310.5 L266.4 307.8 L266.6 305.1 L267.5 302.5 L268.9 300.0 L270.6 297.8 L272.3 295.7 L273.8 293.9 L275.1 292.1 L276.2 290.3 L277.0 288.4 L277.7 286.4 L278.4 284.3 L279.5 282.1 L280.8 280.1 L282.5 278.3 L284.6 276.8 L286.9 275.6 L289.5 274.8 L292.1 274.4 L294.8 274.1 L297.4 274.0 L300.0 274.0 L302.6 274.0 L305.2 274.1 L307.9 274.4 L310.5 274.8 L313.1 275.6 L315.4 276.8 L317.5 278.3 L319.2 280.1 L320.5 282.1 L321.6 284.3 L322.3 286.4 L323.0 288.4 L323.8 290.3 L324.9 292.1 L326.2 293.9 L327.7 295.7 L329.4 297.8 L331.1 300.0Z'/%3E%3Cpath d='M360.5 300.0 L362.6 304.8 L363.8 309.8 L363.8 314.9 L362.4 319.7 L359.5 324.1 L355.4 327.8 L350.4 330.7 L344.9 332.8 L339.3 334.2 L333.9 335.1 L329.0 336.0 L324.5 337.0 L320.5 338.2 L316.7 339.9 L312.9 341.8 L308.9 343.9 L304.6 345.8 L300.0 347.4 L295.1 348.4 L290.1 348.7 L285.1 348.4 L280.1 347.5 L275.3 346.1 L270.5 344.4 L265.8 342.5 L261.0 340.4 L256.2 338.1 L251.5 335.4 L247.1 332.2 L243.2 328.5 L240.1 324.3 L238.2 319.6 L237.6 314.5 L238.3 309.5 L240.2 304.5 L243.0 300.0 L246.3 295.9 L249.6 292.3 L252.5 288.9 L254.9 285.7 L256.5 282.4 L257.7 278.8 L258.5 274.7 L259.4 270.4 L260.7 265.8 L262.7 261.4 L265.6 257.3 L269.3 253.8 L273.8 251.2 L278.9 249.5 L284.2 248.7 L289.6 248.5 L294.9 248.9 L300.0 249.6 L305.0 250.3 L309.9 251.1 L314.8 252.0 L319.7 253.0 L324.5 254.4 L329.1 256.2 L333.3 258.6 L337.1 261.5 L340.3 265.0 L342.9 268.7 L345.0 272.6 L346.8 276.5 L348.5 280.3 L350.4 284.0 L352.6 287.7 L355.2 291.5 L357.9 295.6 L360.5 300.0Z'/%3E%3Cpath d='M388.0 300.0 L390.1 306.9 L391.2 314.0 L390.8 321.1 L388.6 328.0 L384.5 334.3 L378.7 339.5 L371.7 343.7 L363.9 346.7 L356.0 348.7 L348.5 350.2 L341.6 351.6 L335.4 353.4 L329.9 355.8 L324.7 358.9 L319.4 362.8 L313.6 367.1 L307.2 371.3 L300.0 374.9 L292.2 377.5 L284.0 378.8 L275.8 378.6 L267.8 377.0 L260.3 374.1 L253.3 370.4 L246.9 366.0 L240.9 361.2 L235.3 356.3 L230.0 351.0 L225.2 345.5 L220.9 339.7 L217.6 333.4 L215.4 326.8 L214.6 319.9 L215.3 313.0 L217.4 306.3 L220.6 300.0 L224.4 294.2 L228.3 289.0 L231.7 284.1 L234.4 279.2 L236.2 274.1 L237.2 268.5 L237.8 262.2 L238.6 255.2 L240.1 247.9 L242.7 240.6 L246.7 233.9 L252.3 228.2 L259.2 223.9 L267.1 221.3 L275.5 220.4 L283.9 220.8 L292.2 222.3 L300.0 224.4 L307.4 226.7 L314.4 228.9 L321.3 231.0 L328.1 232.9 L335.0 234.8 L341.8 237.1 L348.4 239.9 L354.5 243.5 L360.0 247.8 L364.7 252.8 L368.6 258.2 L371.8 264.0 L374.5 269.8 L377.0 275.6 L379.6 281.5 L382.4 287.4 L385.2 293.5 L388.0 300.0Z'/%3E%3Cpath d='M414.2 300.0 L415.8 308.8 L416.4 317.9 L415.6 326.9 L413.0 335.8 L408.3 343.9 L401.7 351.0 L393.4 356.9 L384.2 361.4 L374.6 364.8 L365.2 367.5 L356.4 370.0 L348.4 372.9 L341.1 376.7 L334.1 381.4 L326.8 387.1 L318.9 393.4 L310.0 399.5 L300.0 404.8 L289.1 408.6 L277.6 410.3 L266.2 409.6 L255.4 406.5 L245.6 401.4 L237.1 394.7 L229.9 387.0 L223.8 378.9 L218.6 370.8 L213.9 362.9 L209.5 355.1 L205.3 347.5 L201.6 339.9 L198.5 332.1 L196.5 324.1 L195.6 316.0 L196.1 307.9 L197.7 300.0 L200.2 292.4 L203.2 285.2 L206.0 278.1 L208.4 271.0 L210.1 263.6 L211.3 255.5 L212.3 246.6 L213.7 237.0 L216.1 227.0 L220.1 217.2 L226.0 208.2 L234.0 200.7 L243.8 195.3 L254.9 192.3 L266.7 191.8 L278.4 193.5 L289.6 196.8 L300.0 201.1 L309.5 205.6 L318.3 209.7 L326.7 213.2 L335.1 216.1 L343.7 218.5 L352.6 220.8 L361.7 223.4 L370.5 226.9 L378.9 231.4 L386.3 237.0 L392.6 243.6 L397.6 251.0 L401.6 258.8 L404.7 266.9 L407.3 275.0 L409.7 283.2 L412.1 291.5 L414.2 300.0Z'/%3E%3Cpath d='M441.5 300.0 L441.9 310.8 L441.5 321.7 L440.1 332.6 L437.1 343.4 L432.2 353.6 L425.2 362.9 L416.5 370.9 L406.3 377.5 L395.3 382.9 L384.2 387.2 L373.4 391.2 L363.2 395.3 L353.6 400.0 L344.3 405.8 L334.7 412.5 L324.3 419.7 L312.8 426.9 L300.0 432.9 L286.2 437.0 L271.9 438.5 L257.8 436.8 L244.7 432.0 L233.3 424.5 L223.8 414.8 L216.2 404.0 L210.4 392.8 L205.8 381.9 L201.7 371.8 L197.5 362.4 L192.9 353.8 L187.8 345.5 L182.6 337.2 L177.5 328.5 L173.1 319.5 L170.0 309.9 L168.3 300.0 L168.1 290.0 L169.1 279.9 L171.1 270.0 L173.6 260.0 L176.3 249.8 L179.0 239.3 L182.1 228.2 L185.9 216.7 L190.9 205.1 L197.6 193.9 L206.4 183.8 L217.4 175.6 L230.3 170.0 L244.5 167.4 L259.3 167.9 L273.9 171.1 L287.5 176.2 L300.0 182.5 L311.2 189.0 L321.3 194.8 L331.0 199.3 L340.8 202.6 L351.1 204.7 L362.2 206.3 L374.1 208.0 L386.2 210.6 L398.2 214.6 L409.2 220.3 L418.7 227.7 L426.3 236.6 L432.0 246.5 L435.8 257.0 L438.3 267.8 L439.8 278.6 L440.8 289.3 L441.5 300.0Z'/%3E%3Cpath d='M469.8 300.0 L467.7 312.8 L465.4 325.4 L462.7 337.9 L459.1 350.4 L454.1 362.5 L447.3 373.9 L438.5 384.3 L428.0 393.4 L416.2 401.0 L403.7 407.4 L390.9 412.9 L378.4 418.1 L366.2 423.5 L354.2 429.6 L342.0 436.4 L329.1 443.6 L315.2 450.7 L300.0 456.7 L283.8 460.6 L267.2 461.6 L250.9 459.2 L235.9 453.2 L222.8 444.0 L212.1 432.4 L203.9 419.4 L197.7 406.0 L192.9 393.1 L188.5 381.4 L183.5 370.9 L177.5 361.5 L170.0 352.7 L161.4 343.9 L152.2 334.4 L143.4 324.0 L135.7 312.5 L130.2 300.0 L127.2 286.9 L126.8 273.5 L128.9 260.1 L133.0 247.2 L138.6 234.5 L145.1 222.3 L152.5 210.2 L160.5 198.2 L169.6 186.6 L180.1 175.7 L192.1 166.0 L205.9 158.3 L221.2 153.0 L237.6 150.8 L254.3 151.7 L270.7 155.3 L286.0 161.1 L300.0 168.0 L312.6 174.9 L324.2 180.9 L335.3 185.3 L346.9 188.0 L359.5 189.1 L373.5 189.4 L388.8 189.7 L405.0 191.2 L421.3 194.6 L436.5 200.4 L449.8 208.8 L460.3 219.5 L467.6 232.0 L471.9 245.6 L473.5 259.6 L473.2 273.4 L471.8 286.9 L469.8 300.0Z'/%3E%3Cpath d='M494.3 300.0 L488.7 314.4 L483.8 328.2 L479.5 341.8 L475.4 355.5 L470.7 369.2 L464.9 382.8 L457.2 395.7 L447.4 407.6 L435.8 418.1 L422.6 427.0 L408.4 434.6 L393.7 441.2 L379.0 447.3 L364.2 453.3 L349.2 459.7 L333.7 466.2 L317.4 472.6 L300.0 478.0 L281.7 481.5 L263.0 482.3 L244.6 479.7 L227.4 473.3 L212.3 463.6 L199.7 451.1 L189.8 436.9 L182.1 422.1 L176.0 407.8 L170.2 394.7 L163.7 383.0 L155.6 372.5 L145.5 362.7 L133.6 352.7 L120.7 341.8 L107.9 329.5 L96.7 315.5 L88.3 300.0 L83.7 283.5 L83.4 266.8 L87.1 250.4 L94.5 235.0 L104.6 220.8 L116.5 207.9 L129.3 196.1 L142.6 185.2 L156.2 175.0 L170.2 165.4 L184.7 156.8 L200.1 149.5 L216.4 144.1 L233.4 140.9 L250.8 140.3 L268.0 142.2 L284.5 146.0 L300.0 151.0 L314.5 156.3 L328.2 160.8 L341.9 164.0 L356.3 165.5 L372.0 165.7 L389.5 165.1 L408.7 165.0 L429.0 166.3 L449.4 170.1 L468.4 177.1 L484.8 187.5 L497.4 200.9 L505.5 216.7 L509.2 233.8 L508.8 251.4 L505.4 268.5 L500.2 284.8 L494.3 300.0Z'/%3E%3Cpath d='M510.4 300.0 L501.6 315.3 L494.6 329.8 L489.5 344.1 L485.9 358.8 L482.9 374.2 L479.4 390.1 L474.2 406.1 L466.6 421.6 L456.2 435.9 L443.2 448.4 L428.0 459.0 L411.3 467.6 L393.7 474.7 L375.7 480.7 L357.4 486.2 L338.8 491.5 L319.8 496.3 L300.0 500.4 L279.6 503.1 L258.8 503.4 L238.2 500.6 L218.6 494.4 L200.9 484.8 L185.7 472.2 L173.2 457.5 L163.2 441.8 L154.9 426.2 L147.2 411.5 L139.0 398.1 L129.2 385.8 L117.3 374.1 L103.4 362.2 L88.4 349.3 L73.5 334.7 L60.4 318.2 L50.8 300.0 L46.0 280.7 L46.7 261.2 L52.9 242.4 L64.0 225.3 L78.8 210.3 L95.9 197.5 L114.0 186.7 L131.8 177.3 L149.0 168.7 L165.3 160.4 L181.0 152.3 L196.6 144.3 L212.6 136.9 L229.1 130.7 L246.4 126.2 L264.2 123.6 L282.2 123.1 L300.0 124.1 L317.5 126.2 L334.7 128.6 L352.2 130.7 L370.3 132.1 L389.6 132.9 L410.5 133.6 L432.8 135.1 L455.9 138.4 L478.7 144.6 L499.6 154.3 L517.3 167.7 L530.2 184.4 L537.7 203.6 L539.5 224.2 L536.3 244.9 L529.3 264.8 L520.1 283.3 L510.4 300.0Z'/%3E%3Cpath d='M520.1 300.0 L510.3 316.0 L503.1 331.1 L499.1 346.4 L497.7 362.6 L497.7 380.2 L497.7 399.2 L495.9 419.3 L491.0 439.4 L482.2 458.4 L469.3 475.4 L452.6 489.6 L433.2 500.6 L411.8 508.6 L389.6 514.1 L367.1 517.8 L344.7 520.5 L322.4 522.5 L300.0 523.9 L277.4 524.4 L254.7 523.4 L232.2 520.1 L210.4 514.0 L190.2 504.8 L172.1 492.6 L156.7 478.0 L143.8 461.9 L132.9 445.3 L123.2 429.0 L113.5 413.6 L102.7 399.1 L90.2 385.1 L75.8 371.0 L60.3 355.8 L44.9 339.1 L31.4 320.4 L21.6 300.0 L17.1 278.5 L18.8 256.9 L26.8 236.3 L40.6 217.9 L58.8 202.2 L79.6 189.3 L101.2 179.0 L122.2 170.3 L141.7 162.3 L159.2 154.1 L175.2 145.0 L190.3 134.8 L205.6 123.9 L221.7 113.0 L239.3 102.9 L258.3 94.5 L278.7 88.6 L300.0 85.3 L321.7 84.6 L343.4 85.8 L365.2 88.5 L387.0 92.0 L409.3 96.2 L432.2 101.0 L455.5 106.9 L479.0 114.6 L501.5 124.8 L521.9 138.1 L538.7 154.7 L550.5 174.2 L556.7 195.9 L556.9 218.7 L551.8 241.3 L542.7 262.8 L531.5 282.4 L520.1 300.0Z'/%3E%3Cpath d='M533.8 300.0 L526.0 317.2 L521.1 333.9 L519.7 351.2 L521.1 370.0 L524.1 390.9 L526.9 413.9 L527.5 438.5 L524.0 463.4 L515.3 487.2 L501.1 508.4 L481.6 525.5 L458.1 538.1 L431.8 545.8 L404.4 549.4 L377.0 549.8 L350.3 548.1 L324.7 545.6 L300.0 542.8 L275.9 540.0 L252.0 536.9 L228.2 532.9 L204.9 527.2 L182.5 519.2 L161.6 508.4 L142.9 495.1 L126.6 479.7 L112.5 463.0 L100.2 445.8 L88.7 428.7 L76.9 412.0 L64.2 395.6 L50.1 379.1 L35.2 361.7 L20.3 342.9 L7.2 322.3 L-2.5 300.0 L-7.0 276.6 L-5.1 253.2 L3.4 230.9 L18.2 210.8 L37.9 193.7 L60.6 179.8 L84.3 168.7 L107.2 159.4 L128.2 150.6 L146.8 141.3 L163.3 130.3 L178.7 117.2 L194.1 102.4 L210.7 86.7 L229.5 71.4 L250.9 57.9 L274.6 47.5 L300.0 41.2 L326.2 39.1 L352.5 41.2 L378.0 46.8 L402.6 54.9 L426.2 64.7 L449.0 75.7 L471.0 87.6 L492.4 100.6 L512.6 115.1 L530.8 131.6 L546.0 150.2 L557.0 171.0 L563.2 193.3 L564.1 216.4 L560.3 239.4 L552.8 261.2 L543.3 281.5 L533.8 300.0Z'/%3E%3Cpath d='M563.7 300.0 L559.8 319.8 L557.9 339.5 L558.4 360.2 L561.0 382.6 L564.5 407.2 L567.1 434.1 L566.7 462.4 L561.6 490.9 L550.4 517.7 L532.7 541.1 L508.9 559.4 L480.3 571.5 L448.8 577.4 L416.2 577.6 L384.3 573.4 L354.1 566.6 L326.0 558.9 L300.0 551.6 L275.3 545.6 L251.1 541.0 L226.9 537.2 L202.4 533.2 L177.7 528.0 L153.5 520.6 L130.6 510.4 L109.6 497.3 L90.9 481.8 L74.6 464.4 L60.2 446.0 L46.8 427.1 L33.7 408.0 L20.4 388.5 L6.7 368.3 L-6.7 347.0 L-18.7 324.2 L-27.6 300.0 L-31.8 274.8 L-30.1 249.4 L-21.8 225.0 L-7.2 202.8 L12.7 183.5 L36.1 167.5 L61.1 154.5 L85.6 143.6 L108.4 133.4 L128.7 122.5 L146.7 109.7 L163.5 94.4 L180.3 76.8 L198.6 57.8 L219.6 39.0 L243.7 22.3 L270.8 9.4 L300.0 1.7 L330.2 0.1 L359.9 4.4 L388.1 14.0 L414.1 27.5 L437.5 43.5 L458.8 60.8 L478.3 78.5 L496.7 96.2 L514.1 113.8 L530.5 131.8 L545.3 150.6 L557.8 170.6 L567.0 191.7 L572.4 213.8 L574.0 236.2 L572.3 258.3 L568.4 279.6 L563.7 300.0Z'/%3E%3C/svg%3E"); }
.brand-hero, .inner-hero, .branded-workspace, .faq-section, .change-band, .demo-layout { position: relative; isolation: isolate; }
.home-partners-inner, .connected-inner { position: relative; isolation: isolate; overflow: hidden; }
.brand-hero::before, .inner-hero::before, .branded-workspace::before, .faq-section::before, .change-band::before, .demo-layout::before,
.home-partners-inner::before, .connected-inner::before { content: ""; position: absolute; z-index: -1; pointer-events: none; background-repeat: no-repeat; background-size: 100% 100%; }
/* Homepage-style centred hero: waves sweep behind, cleared out around the headline */
.brand-hero::before { inset: 4% -6vw 0; background-image: var(--deco-waves); opacity: .9;
  -webkit-mask-image: radial-gradient(52% 62% at 50% 42%, transparent 30%, #000 78%); mask-image: radial-gradient(52% 62% at 50% 42%, transparent 30%, #000 78%); }
/* Left-aligned inner heroes: waves drift in from the right */
.inner-hero::before { top: 6%; bottom: 0; right: -8vw; width: min(64vw, 980px); background-image: var(--deco-waves);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%, #000 80%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 45%, #000 80%, transparent 100%); }
/* Branded workspace: contour rings behind the illustration */
.branded-workspace::before { right: -6vw; top: 50%; width: min(52vw, 720px); aspect-ratio: 1; transform: translateY(-50%); background-image: var(--deco-contours);
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%); mask-image: radial-gradient(closest-side, #000 55%, transparent 100%); }
/* FAQ: a small contour patch behind the heading */
.faq-section::before { left: -8vw; top: 8%; width: min(40vw, 520px); aspect-ratio: 1; background-image: var(--deco-contours); opacity: .7;
  -webkit-mask-image: radial-gradient(closest-side, #000 40%, transparent 100%); mask-image: radial-gradient(closest-side, #000 40%, transparent 100%); }
/* Light-blue proof band: faint waves across */
.change-band::before { inset: 0; background-image: var(--deco-waves); opacity: .55;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); }
/* Demo and partner application: contours behind the left column */
.demo-layout::before { left: -10vw; top: 0; width: min(46vw, 620px); aspect-ratio: 1; background-image: var(--deco-contours); opacity: .6;
  -webkit-mask-image: radial-gradient(closest-side, #000 45%, transparent 100%); mask-image: radial-gradient(closest-side, #000 45%, transparent 100%); }
/* Tinted panels: waves tucked into the right-hand corner */
.home-partners-inner::before, .connected-inner::before { right: -4%; bottom: -10%; width: 62%; height: 120%; background-image: var(--deco-waves); opacity: .75;
  -webkit-mask-image: linear-gradient(115deg, transparent 20%, #000 70%); mask-image: linear-gradient(115deg, transparent 20%, #000 70%); }
@media (max-width: 760px) {
  .inner-hero::before { width: 120vw; right: -40vw; opacity: .6; }
  .branded-workspace::before, .faq-section::before, .demo-layout::before { width: 90vw; }
}
/* Page wrappers that painted solid white let the texture through */
.ss-page, .ra-page, .ag-page, .hri-page, .ri-page, .gov-page, .resources-page, .trust-page { background: transparent !important; }

/* ============ 17. Branded workspace ============ */
.bw-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.bw-copy h2 { margin: 0; text-wrap: balance; }
.bw-lead { font-size: 17px; margin: 16px 0 0; max-width: 48ch; }
.bw-lead strong { color: var(--blue-ink); font-family: var(--font-mono); font-weight: 600; font-size: .92em; }
.bw-points { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--line); }
.bw-points li { display: grid; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.bw-points strong { color: var(--ink-heading); font-size: 15.5px; }
.bw-points span { color: var(--muted); font-size: 14.5px; line-height: 1.55; }

/* Illustrated browser: tenant colours live only inside the mock */
.bw-visual { position: relative; padding: 8px 0 8px 8px; }
.bw-browser { --t: #0f766e; --t-soft: #e6f4f2; position: relative; border-radius: 16px; background: #fff; border: 1px solid #dbe3f0; box-shadow: 0 30px 60px -30px rgba(15, 31, 70, .35), 0 2px 6px rgba(15, 31, 70, .06); overflow: hidden; }
.bw-browser.tenant-b { --t: #b45309; --t-soft: #fbf1e4; }
.bw-bar { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: #f5f7fb; border-bottom: 1px solid #e4e9f2; }
.bw-dots { display: inline-flex; gap: 6px; }
.bw-dots i { width: 9px; height: 9px; border-radius: 50%; background: #d5dbe6; }
.bw-url { display: inline-flex; align-items: center; gap: 7px; flex: 1; max-width: 300px; padding: 6px 12px; border-radius: 8px; background: #fff; border: 1px solid #e1e7f1; font: 500 13px/1.2 var(--font-mono); color: #64748b; }
.bw-url svg { color: #16a34a; flex: none; }
.bw-url b { color: var(--ink-heading); font-weight: 600; }
.bw-app { display: grid; grid-template-columns: 132px minmax(0, 1fr); min-height: 250px; }
.bw-side { display: flex; flex-direction: column; gap: 10px; padding: 16px 14px; background: var(--t); color: #fff; }
.bw-logo { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: rgba(255, 255, 255, .95); color: var(--t); font-weight: 800; font-size: 15px; }
.bw-name { font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.bw-side i { display: block; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .28); }
.bw-side i:nth-of-type(1) { width: 80%; background: rgba(255, 255, 255, .6); }
.bw-side i:nth-of-type(2) { width: 65%; } .bw-side i:nth-of-type(3) { width: 72%; } .bw-side i:nth-of-type(4) { width: 55%; }
.bw-main { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.bw-hello { font-size: 11.5px; color: #94a3b8; }
.bw-title { font-weight: 700; font-size: 15px; color: var(--ink-heading); }
.bw-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 4px; }
.bw-tiles span { height: 54px; border-radius: 10px; background: var(--t-soft); border: 1px solid color-mix(in srgb, var(--t) 18%, transparent); }
.bw-tiles span:first-child { background: var(--t); opacity: .9; }
.bw-rows { display: grid; gap: 7px; margin-top: 6px; }
.bw-rows i { height: 8px; border-radius: 4px; background: #eef2f7; }
.bw-rows i:nth-child(2) { width: 82%; } .bw-rows i:nth-child(3) { width: 64%; }

/* Partner version: two customer workspaces, one behind the other */
.is-partner .bw-visual { padding: 0 0 44px 44px; }
.bw-back { position: absolute; top: 0; right: 44px; left: 0; opacity: .9; transform: translate(-6px, -4px) scale(.96); transform-origin: top left; filter: saturate(.9); }
.is-partner .tenant-a { margin-top: 44px; }
@media (prefers-reduced-motion: no-preference) {
  html.js-motion .branded-workspace .tenant-a { transition: transform .5s cubic-bezier(.2,.7,.2,1); }
  .branded-workspace .bw-visual:hover .tenant-a { transform: translateY(-4px); }
}
@media (max-width: 900px) {
  .bw-inner { grid-template-columns: 1fr; }
  .bw-visual { padding-left: 0; }
  .is-partner .bw-visual { padding: 0 0 0 20px; }
}
@media (max-width: 520px) {
  .bw-app { grid-template-columns: 96px minmax(0, 1fr); min-height: 210px; }
  .bw-url { font-size: 11.5px; }
}
.bw-host { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Line-art refinements: fade hero waves top and bottom (no hard edges); keep contours off body text */
.brand-hero::before {
  opacity: .45;
  /* Span the full screen width, edge to edge (the hero itself is capped at 1360px). The clear area behind
     the headline keeps its size (about 800px radius, as before). html/body use overflow-x: clip, so no scrollbar. */
  inset: 4% auto 0 50%;
  width: 100vw;
  transform: translateX(-50%);
  -webkit-mask-image: radial-gradient(min(56%, 800px) 62% at 50% 42%, transparent 30%, #000 78%), linear-gradient(180deg, transparent 0%, #000 22%, #000 70%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(min(56%, 800px) 62% at 50% 42%, transparent 30%, #000 78%), linear-gradient(180deg, transparent 0%, #000 22%, #000 70%, transparent 100%);
  mask-composite: intersect;
}
/* Hero pattern (owner's choice, 25 Sep 2026): a fine dot grid. It tiles instead of stretching, so it looks
   the same on every screen size and reaches the edges. Replaces the wave line-art everywhere it was used. */
:root { --deco-dots: radial-gradient(circle, rgba(51, 113, 255, .55) 1.2px, transparent 1.8px); }
.brand-hero::before, .inner-hero::before, .change-band::before, .home-partners-inner::before, .connected-inner::before, .tile-trust::before {
  background-image: var(--deco-dots) !important; background-size: 24px 24px !important; background-repeat: repeat !important; background-position: center top !important; }
/* Dark pages make the blue lines stand out more: keep them fainter there. */
:root[data-theme="dark"] .brand-hero::before { opacity: .3; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand-hero::before { opacity: .3; } }
.inner-hero::before {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%, #000 80%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 25%, #000 70%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 45%, #000 80%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 25%, #000 70%, transparent 100%);
  mask-composite: intersect;
}
.demo-layout::before { left: -22vw; top: 18%; opacity: .45; }
.faq-section::before { left: -16vw; opacity: .55; }
/* Decorations bleed to the edge of the screen but never create sideways scrolling */
html { overflow-x: clip; }
.brand-hero, .inner-hero, .branded-workspace, .faq-section, .change-band, .demo-layout { overflow-x: clip; overflow-clip-margin: 0; }
@media (min-width: 1361px) { .brand-hero, .inner-hero, .branded-workspace, .faq-section, .demo-layout { overflow-x: visible; } }

/* ============ 18. Pricing, quote and contact ============ */
.pricing-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.pricing-grid .partner-card:first-child { background: linear-gradient(160deg, #eef3ff 0%, #ffffff 72%); border-color: #d6e2ff; }
:root[data-theme="dark"] .pricing-grid .partner-card:first-child { background: linear-gradient(160deg, #17243e 0%, var(--bg-raised) 72%); border-color: rgba(51, 113, 255, 0.3); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pricing-grid .partner-card:first-child { background: linear-gradient(160deg, #17243e 0%, var(--bg-raised) 72%); border-color: rgba(51, 113, 255, 0.3); }
}
.pricing-platform .mk-section-head p { margin-top: 12px; max-width: 40ch; }
.pricing-list li { display: block; padding: 0; }
.pricing-list a { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 24px; padding: 20px 0; text-decoration: none; color: inherit; transition: padding-left .25s ease; }
.pricing-list a:hover { padding-left: 6px; }
.pricing-list a:hover strong { color: var(--blue); }
.quote-steps { list-style: none; padding: 0; margin: 24px 0 28px; counter-reset: qs; }
.quote-steps li { position: relative; padding: 14px 0 14px 44px; counter-increment: qs; }
.quote-steps li::before { content: counter(qs); position: absolute; left: 0; top: 16px; width: 26px; height: 26px; border-radius: 50%; background: var(--blue); color: #fff; font: 600 12px/26px var(--font-mono); text-align: center; }
.quote-steps h3 { font-size: 18px; margin: 0 0 4px; }
.quote-steps p { font-size: 14.5px; margin: 0; }
.demo-note a, .inner-hero .lead a, .partner-apply-lead a { color: var(--blue-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.contact-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.contact-card { position: relative; display: grid; gap: 6px; padding: 24px 22px 44px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-raised); color: inherit; text-decoration: none; }
.contact-card strong { color: var(--text-heading); font-size: 17px; }
.contact-card span { color: var(--text-muted); font-size: 14.5px; line-height: 1.55; }
.contact-card .contact-go { position: absolute; left: 22px; bottom: 18px; color: var(--accent); }
.contact-email { display: inline-block; margin-top: 8px; font: 600 clamp(22px, 2.4vw, 30px)/1.2 var(--font-sans); color: var(--blue); text-decoration: none; border-bottom: 2px solid #cfdcfb; padding-bottom: 4px; }
.contact-email:hover { border-color: var(--blue); }
.footer-email { display: inline-block; margin-top: 14px; color: #93c5fd; font-weight: 600; text-decoration: none; }
.footer-email:hover { color: #fff; }
.form-feedback:empty { display: none; }
.form-feedback a { color: inherit; font-weight: 600; text-decoration: underline; }
@media (max-width: 1024px) { .pricing-grid, .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .pricing-grid, .contact-grid { grid-template-columns: 1fr; }
  .pricing-list a { grid-template-columns: 1fr; gap: 4px; }
}

/* ============ 19. Contact page ============ */
/* Hero: copy and email on the left, the form on the right (visible without scrolling) */
.contact-hero { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.contact-hero-copy { padding-top: 8px; }
.contact-hero .lead { max-width: 34ch; }
.contact-mail { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.contact-mail .contact-email { margin-top: 0; }
.contact-copy { padding: 8px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-raised); color: var(--accent-ink); font: 600 13px/1 var(--font-sans); cursor: pointer; transition: border-color .2s ease, background-color .2s ease, transform .2s ease; }
.contact-copy:hover { border-color: var(--blue); background: var(--bg-sunken); }
.contact-copy:active { transform: translateY(1px) scale(.98); }
.contact-copy.is-done { border-color: #16a34a; color: #15803d; background: #f0fdf4; }
.contact-form { padding: clamp(28px, 3vw, 40px); box-shadow: var(--shadow-lg, 0 30px 60px -36px rgba(23, 57, 140, .35)); background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); }
.contact-form h2 { font-size: 24px; margin: 0 0 4px; color: var(--text-heading); }
.contact-topics { margin: 16px 0 4px; }
.contact-topics .partner-chip input:checked + span { box-shadow: 0 6px 16px -8px rgba(51, 113, 255, .7); }

/* Routes: asymmetric bento, exactly four cells */
.contact-routes h2 { margin: 0 0 32px; }
.contact-bento { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 16px; }
.contact-tile { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 8px; min-height: 176px; padding: 26px 26px 24px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-raised); color: inherit; text-decoration: none; }
.contact-tile strong { font-size: 19px; color: var(--text-heading); }
.contact-tile span { font-size: 15px; line-height: 1.55; color: var(--text-muted); max-width: 38ch; }
.contact-tile .tile-go { margin-top: auto; padding-top: 14px; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--accent-ink); }
.tile-demo { grid-row: span 2; min-height: 368px; background: linear-gradient(160deg, #0b1630 0%, #12254d 100%); border-color: #1d2f57; }
.tile-demo strong { color: #fff; font-size: clamp(24px, 2.4vw, 32px); }
.tile-demo span { color: #b6c2da; font-size: 16px; }
.tile-demo .tile-go { color: #93c5fd; }
.tile-demo::before { content: ""; position: absolute; z-index: -1; right: -18%; bottom: -30%; width: 110%; aspect-ratio: 1; background: var(--deco-contours) no-repeat center / contain; opacity: .55; filter: brightness(1.8); -webkit-mask-image: radial-gradient(closest-side, #000 50%, transparent 100%); mask-image: radial-gradient(closest-side, #000 50%, transparent 100%); }
.tile-quote { grid-column: span 2; background: linear-gradient(160deg, #eef3ff 0%, #ffffff 70%); border-color: #d6e2ff; }
:root[data-theme="dark"] .tile-quote { background: linear-gradient(160deg, #17243e 0%, var(--bg-raised) 70%); border-color: rgba(51, 113, 255, 0.3); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tile-quote { background: linear-gradient(160deg, #17243e 0%, var(--bg-raised) 70%); border-color: rgba(51, 113, 255, 0.3); }
}
.tile-trust::before { content: ""; position: absolute; z-index: -1; right: -20%; bottom: -40%; width: 90%; height: 100%; background: var(--deco-waves) no-repeat center / 100% 100%; opacity: .6; -webkit-mask-image: linear-gradient(120deg, transparent 30%, #000 80%); mask-image: linear-gradient(120deg, transparent 30%, #000 80%); }
.contact-tile { transition: transform .25s cubic-bezier(.2,.7,.2,1), border-color .25s ease, box-shadow .25s ease; }
.contact-tile:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: 0 14px 30px -20px rgba(23, 77, 200, .45); }
.tile-demo:hover { border-color: #3a5b9e; box-shadow: 0 22px 44px -24px rgba(11, 22, 48, .7); }
.contact-tile:hover .tile-go svg { transform: translate(2px, -2px); }
.contact-tile .tile-go svg { transition: transform .25s ease; }
.contact-tile:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* What happens next: three steps on one line */
.contact-next h2 { margin: 0 0 40px; }
.contact-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; position: relative; }
.contact-steps::before { content: ""; position: absolute; top: 11px; left: 12px; right: 12px; height: 2px; background: linear-gradient(90deg, var(--blue), #bfd0ff); }
.contact-steps li { position: relative; display: grid; gap: 6px; padding-top: 40px; }
.contact-steps li::before { content: ""; position: absolute; top: 0; left: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--bg-raised); border: 2px solid var(--blue); box-sizing: border-box; }
.contact-steps li:first-child::before { background: var(--blue); box-shadow: 0 0 0 6px rgba(51, 113, 255, .12); }
.contact-steps strong { font-size: 18px; color: var(--text-heading); }
.contact-steps span { font-size: 15px; color: var(--text-muted); line-height: 1.55; max-width: 32ch; }

@media (max-width: 1024px) {
  .contact-hero { grid-template-columns: 1fr; }
  .contact-hero .lead { max-width: 52ch; }
  .contact-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile-demo { grid-row: auto; grid-column: span 2; min-height: 240px; }
  .tile-quote { grid-column: span 2; }
}
@media (max-width: 640px) {
  .contact-bento { grid-template-columns: 1fr; }
  .tile-demo, .tile-quote { grid-column: auto; }
  .contact-steps { grid-template-columns: 1fr; gap: 20px; padding-left: 40px; }
  .contact-steps::before { top: 12px; bottom: 12px; left: 11px; right: auto; width: 2px; height: auto; }
  .contact-steps li { padding-top: 0; }
  .contact-steps li::before { left: -40px; }
}
.contact-hero { align-items: center; }
.contact-hero h1 { font-size: clamp(40px, 4.4vw, 64px); white-space: nowrap; }
.contact-steps li { align-content: start; }
@media (max-width: 420px) { .contact-hero h1 { white-space: normal; } }

/* ============ 20. Form controls: one focus ring, custom dropdowns ============ */
/* Fields had the browser focus outline AND a soft ring, which drew a double border. Keep one: blue border + soft ring. */
input:not([type="checkbox"]):not([type="radio"]):focus-visible, textarea:focus-visible, select:focus-visible { outline: none; }
input:not([type="checkbox"]):not([type="radio"]):focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(51, 113, 255, .16); }

.ks-select { position: relative; }
.ks-native { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; pointer-events: none; }
.ks-select-trigger { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-raised); color: var(--text); font: 500 15px/1.3 var(--font-sans); text-align: left; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.ks-select-trigger:hover { border-color: var(--border-strong); }
.ks-select-trigger:focus-visible, .ks-select.is-open .ks-select-trigger { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(51, 113, 255, .16); }
.ks-select-trigger.is-placeholder .ks-select-value { color: var(--text-muted); font-weight: 400; }
.ks-select-value { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ks-select-chev { flex: none; color: var(--blue); transition: transform .2s ease; }
.ks-select.is-open .ks-select-chev { transform: rotate(180deg); }
.ks-select:has(.ks-native[aria-invalid="true"]) .ks-select-trigger { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, .12); }
.ks-select-pop { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; right: 0; padding: 6px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-raised); box-shadow: var(--shadow-md, 0 24px 48px -20px rgba(15, 31, 70, .35), 0 2px 6px rgba(15, 31, 70, .06)); transform-origin: top; animation: ks-pop .16s cubic-bezier(.2,.7,.2,1); }
.ks-select.opens-up .ks-select-pop { top: auto; bottom: calc(100% + 6px); transform-origin: bottom; }
@keyframes ks-pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.ks-select-search { width: 100%; min-height: 40px; margin: 0 0 6px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; background: var(--bg-sunken); color: var(--text); }
.ks-select-list { list-style: none; margin: 0; padding: 0; max-height: 264px; overflow-y: auto; overscroll-behavior: contain; }
.ks-select-list [role="option"] { position: relative; padding: 9px 12px 9px 34px; border-radius: 8px; font-size: 14.5px; color: var(--text); cursor: pointer; }
.ks-select-list [role="option"].is-active { background: var(--bg-sunken); color: var(--accent-ink); }
.ks-select-list [role="option"][aria-selected="true"] { font-weight: 600; color: var(--accent-ink); }
.ks-select-list [role="option"][aria-selected="true"]::before { content: ""; position: absolute; left: 12px; top: 50%; width: 12px; height: 12px; transform: translateY(-50%); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%233371ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.ks-select-empty { padding: 10px 12px; font-size: 14px; color: var(--text-muted); }
@media (prefers-reduced-motion: reduce) { .ks-select-pop { animation: none; } .ks-select-chev { transition: none; } }

/* ============ 21. Regulator strip + two-factor pricing ============ */
.reg-inner { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.reg-copy h2 { margin: 0 0 12px; text-wrap: balance; }
.reg-copy p { margin: 0 0 18px; max-width: 42ch; }
.reg-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.reg-list a { display: inline-flex; align-items: center; padding: 10px 16px; border: 1px solid #d6e2ff; border-radius: 999px; background: #fff; color: var(--ink-heading); font: 600 14px/1 var(--font-sans); text-decoration: none; transition: border-color .2s ease, background-color .2s ease, color .2s ease, transform .2s ease; }
.reg-list li:nth-child(-n+4) a { background: #eef3ff; }
.reg-list a:hover { border-color: var(--blue); color: var(--blue-ink); transform: translateY(-2px); }
.reg-list a:active { transform: translateY(0) scale(.98); }
.pricing-grid.pricing-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; }
@media (max-width: 900px) { .reg-inner { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .pricing-grid.pricing-grid-2 { grid-template-columns: 1fr; } }

/* ============ 22. LMS: learn by doing ============ */
.lms-contrast { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 16px; align-items: stretch; }
.lms-contrast ol { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.lms-tag { font: 600 12px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; }
.lms-old { padding: 28px; border: 1px dashed #cbd5e1; border-radius: var(--radius); background: #f8fafc; color: #475569; }
.lms-old .lms-tag { color: #475569; }
.lms-old li { font-size: 20px; font-weight: 600; text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: #cbd5e1; }
:root[data-theme="dark"] .lms-old { border-color: var(--border); background: var(--bg-sunken); color: var(--text-muted); }
:root[data-theme="dark"] .lms-old .lms-tag { color: var(--text-muted); }
:root[data-theme="dark"] .lms-old li { text-decoration-color: var(--border-strong); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lms-old { border-color: var(--border); background: var(--bg-sunken); color: var(--text-muted); }
  :root:not([data-theme="light"]) .lms-old .lms-tag { color: var(--text-muted); }
  :root:not([data-theme="light"]) .lms-old li { text-decoration-color: var(--border-strong); }
}
.lms-new { padding: 28px 32px; border-radius: var(--radius); background: linear-gradient(160deg, #0b1630 0%, #12254d 100%); color: #fff; position: relative; isolation: isolate; overflow: hidden; }
.lms-new::before { content: ""; position: absolute; z-index: -1; right: -10%; top: -40%; width: 70%; aspect-ratio: 1; background: var(--deco-contours) no-repeat center / contain; opacity: .45; filter: brightness(1.8); }
.lms-new .lms-tag { color: #93c5fd; }
.lms-new li { font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; letter-spacing: -.02em; }
.lms-new p { color: #b6c2da; margin: 18px 0 0; max-width: 44ch; }

.lms-try h2 { margin: 0; }
.lms-try-lead { margin: 12px 0 28px; }
.lms-demo { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.lms-stage { padding: 24px; border: 1px solid #dbe3f0; border-radius: 20px; background: linear-gradient(180deg, #f5f8ff, #fff 60%); min-height: 420px; display: flex; flex-direction: column; gap: 18px; }
:root[data-theme="dark"] .lms-stage { background: var(--bg-raised); border-color: var(--border); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lms-stage { background: var(--bg-raised); border-color: var(--border); }
}
.lms-screen { min-height: 230px; }
.lms-mail, .lms-login, .lms-outcome { border: 1px solid var(--border); border-radius: 14px; background: var(--bg-surface); padding: 18px 20px; box-shadow: 0 14px 30px -22px rgba(15, 31, 70, .35); animation: lms-in .35s cubic-bezier(.2,.7,.2,1); }
@keyframes lms-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.lms-mail-head { display: flex; justify-content: space-between; font: 500 12px/1 var(--font-mono); color: var(--text-muted); margin-bottom: 12px; }
.lms-from { margin: 0; font-size: 14.5px; color: var(--text); }
.lms-from span { color: var(--text-muted); }
.lms-subj { margin: 8px 0 6px; font-weight: 700; color: var(--text-heading); font-size: 16px; }
.lms-body { margin: 0 0 14px; font-size: 14.5px; color: var(--text); }
.lms-fakebtn { display: inline-block; padding: 8px 14px; border-radius: 8px; background: #1d4ed8; color: #fff; font-size: 13px; font-weight: 600; }
.lms-flag { background: #fef3c7; color: #92400e !important; border-radius: 4px; padding: 1px 4px; box-shadow: 0 0 0 2px #fcd34d; }
.lms-note { margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; background: #ecfdf5; color: #065f46; font-size: 14px; }
.lms-url { padding: 8px 12px; margin: -4px -6px 14px; border-radius: 8px; background: var(--bg-sunken); font: 500 13px/1.2 var(--font-mono); color: var(--text-muted); }
.lms-login-card { display: grid; gap: 8px; max-width: 280px; margin: 0 auto; text-align: center; }
.lms-login-card span:not(.lms-fakebtn) { font-size: 13.5px; color: var(--text-muted); }
.lms-login-card i { display: block; height: 36px; border: 1px solid var(--border); border-radius: 8px; }
.lms-outcome.is-unsafe { border-color: #fecaca; background: #fff7f7; }
.lms-outcome.is-safe { border-color: #a7f3d0; background: #f3fdf8; }
.lms-outcome strong { font-size: 18px; color: var(--text-heading); }
.lms-outcome p { margin: 6px 0 0; color: var(--text-muted); }
.lms-live-chain { list-style: none; margin: 0; padding: 8px 0; display: grid; gap: 10px; }
.lms-live-chain li { padding: 12px 16px; border-radius: 10px; border: 1px solid #fecaca; background: var(--bg-surface); color: #f87171; font-weight: 600; opacity: .15; transform: translateX(-6px); transition: opacity .3s ease, transform .3s ease; }
.lms-live-chain li.is-on { opacity: 1; transform: none; }
.lms-choices { display: flex; flex-wrap: wrap; gap: 10px; }
.lms-choice { padding: 11px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-raised); color: var(--text-heading); font: 600 14.5px/1.2 var(--font-sans); cursor: pointer; transition: border-color .2s ease, background-color .2s ease, transform .2s ease; }
.lms-choice:hover { border-color: var(--blue); background: var(--bg-sunken); transform: translateY(-2px); }
.lms-choice:active { transform: translateY(0) scale(.98); }
.lms-choice:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.lms-guide { padding: 16px 18px; border-radius: 14px; background: #0b1630; color: #dbe5f7; animation: lms-in .35s cubic-bezier(.2,.7,.2,1); }
.lms-guide-title { display: block; font: 600 12px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: #93c5fd; margin-bottom: 10px; }
.lms-guide dl { margin: 0; display: grid; gap: 10px; }
.lms-guide dt { font-weight: 700; color: #fff; font-size: 14px; }
.lms-guide dd { margin: 2px 0 0; font-size: 14px; color: #b6c2da; }
.lms-track { padding: 20px; border: 1px solid var(--border); border-radius: 20px; background: var(--bg-raised); position: sticky; top: 100px; }
.lms-track-title { display: block; font-weight: 700; color: var(--text-heading); margin-bottom: 14px; }
.lms-track dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lms-track dl > div { padding: 12px; border-radius: 12px; background: var(--bg-sunken); }
.lms-track dt { font-size: 12.5px; color: var(--text-muted); }
.lms-track dd { margin: 4px 0 0; font: 700 26px/1 var(--font-sans); color: var(--text-heading); font-variant-numeric: tabular-nums; }
.lms-track dd.is-bump { animation: lms-bump .4s ease; }
@keyframes lms-bump { 50% { transform: scale(1.18); color: var(--blue); } }
.lms-log { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; }
.lms-log li { padding: 7px 10px 7px 26px; border-radius: 8px; background: var(--bg-sunken); position: relative; color: var(--text); }
.lms-log li::before { content: ""; position: absolute; left: 10px; top: 50%; width: 8px; height: 8px; border-radius: 50%; transform: translateY(-50%); background: #94a3b8; }
.lms-log li.is-safe::before { background: #16a34a; } .lms-log li.is-unsafe::before { background: #dc2626; } .lms-log li.is-risky::before { background: #f59e0b; }
.lms-restart { width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-raised); font: 600 13.5px/1 var(--font-sans); color: var(--text-heading); cursor: pointer; }
.lms-restart:hover { border-color: var(--blue); }

.lms-chains h2 { margin: 0; }
.lms-sub { margin: 12px 0 28px; }
.lms-chain { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 0; }
.lms-chain li { position: relative; padding: 10px 26px 10px 14px; font-size: 14.5px; font-weight: 600; color: var(--text-heading); background: var(--bg-raised); border: 1px solid var(--border); border-radius: 10px; margin-right: 22px; }
.lms-chain li:not(:last-child)::after { content: ""; position: absolute; right: -18px; top: 50%; width: 12px; height: 2px; background: var(--border); }
.lms-chain li:nth-child(n+4) { border-color: #fecaca; background: #fff7f7; color: #991b1b; }
:root[data-theme="dark"] .lms-outcome.is-unsafe { border-color: rgba(239, 68, 68, 0.3); background: rgba(239, 68, 68, 0.12); }
:root[data-theme="dark"] .lms-outcome.is-safe { border-color: rgba(16, 185, 129, 0.3); background: rgba(16, 185, 129, 0.12); }
:root[data-theme="dark"] .lms-chain li:nth-child(n+4) { border-color: rgba(239, 68, 68, 0.3); background: rgba(239, 68, 68, 0.12); color: #fca5a5; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lms-outcome.is-unsafe { border-color: rgba(239, 68, 68, 0.3); background: rgba(239, 68, 68, 0.12); }
  :root:not([data-theme="light"]) .lms-outcome.is-safe { border-color: rgba(16, 185, 129, 0.3); background: rgba(16, 185, 129, 0.12); }
  :root:not([data-theme="light"]) .lms-chain li:nth-child(n+4) { border-color: rgba(239, 68, 68, 0.3); background: rgba(239, 68, 68, 0.12); color: #fca5a5; }
}
.lms-chain li.is-end { background: #991b1b; border-color: #991b1b; color: #fff; }
.lms-pause { margin: 22px 0 0; max-width: 70ch; }

.lms-topics h2 { margin: 0 0 32px; }
.lms-topic-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.lms-topic { padding: 22px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-raised); }
.lms-topic:nth-child(1) { background: linear-gradient(160deg, #eef3ff 0%, #ffffff 72%); border-color: #d6e2ff; }
:root[data-theme="dark"] .lms-topic:nth-child(1) { background: linear-gradient(160deg, #17243e 0%, var(--bg-raised) 72%); border-color: rgba(51, 113, 255, 0.3); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lms-topic:nth-child(1) { background: linear-gradient(160deg, #17243e 0%, var(--bg-raised) 72%); border-color: rgba(51, 113, 255, 0.3); }
}
.lms-topic:nth-child(8) { background: #0b1630; border-color: #1d2f57; }
.lms-topic:nth-child(8) h3 { color: #fff; } .lms-topic:nth-child(8) p { color: #b6c2da; }
.lms-topic h3 { font-size: 17px; margin: 0 0 6px; }
.lms-topic p { font-size: 14.5px; margin: 0; line-height: 1.55; }

.lms-measure-inner { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.lms-measure h2 { margin: 0 0 24px; }
.lms-complete { display: inline-grid; gap: 4px; padding: 20px 24px; border: 1px dashed #cbd5e1; border-radius: var(--radius); color: #475569; }
.lms-complete strong { font-size: 44px; line-height: 1; text-decoration: line-through; text-decoration-thickness: 3px; color: #64748b; }
.lms-complete em { font-style: normal; font-size: 14px; }
:root[data-theme="dark"] .lms-complete { border-color: var(--border); color: var(--text-muted); }
:root[data-theme="dark"] .lms-complete strong { color: var(--text-muted); text-decoration-color: var(--border-strong); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lms-complete { border-color: var(--border); color: var(--text-muted); }
  :root:not([data-theme="light"]) .lms-complete strong { color: var(--text-muted); text-decoration-color: var(--border-strong); }
}
.lms-metrics { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lms-metrics li { display: grid; gap: 4px; padding: 16px 18px; border-radius: 12px; background: var(--bg-sunken); border: 1px solid var(--border); }
.lms-metrics li:last-child { grid-column: span 2; background: var(--bg-raised); }
.lms-metrics strong { color: var(--text-heading); font-size: 15.5px; }
.lms-metrics span { font-size: 14px; color: var(--text-muted); }

.lms-brand-inner { padding: clamp(32px, 5vw, 56px); border-radius: 24px; border: 1px solid #dce7fa; background: radial-gradient(120% 140% at 0% 0%, #eaf1ff 0%, #f5f8ff 55%, #ffffff 100%); }
:root[data-theme="dark"] .lms-brand-inner {
  background: radial-gradient(120% 140% at 0% 0%, #17243e 0%, var(--bg-raised) 55%, var(--bg-surface) 100%);
  border-color: rgba(51, 113, 255, 0.3);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lms-brand-inner {
    background: radial-gradient(120% 140% at 0% 0%, #17243e 0%, var(--bg-raised) 55%, var(--bg-surface) 100%);
    border-color: rgba(51, 113, 255, 0.3);
  }
}
.lms-brand-inner h2 { margin: 0 0 14px; }
.lms-brand-inner p { max-width: 70ch; margin: 0; }

@media (max-width: 1024px) {
  .lms-demo, .lms-measure-inner { grid-template-columns: 1fr; }
  .lms-track { position: static; }
  .lms-topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .lms-contrast { grid-template-columns: 1fr; }
  .lms-topic-grid, .lms-metrics { grid-template-columns: 1fr; }
  .lms-metrics li:last-child { grid-column: auto; }
  .lms-stage { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) { .lms-mail, .lms-login, .lms-outcome, .lms-guide { animation: none; } .lms-track dd.is-bump { animation: none; } }
.lms-stage { min-height: 0; }
.lms-screen { min-height: 200px; }

/* ============ 23. Homepage: learn by doing (embedded Spot the Signal lab) ============ */
.pillars { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1200px) { .pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pillars { grid-template-columns: 1fr; } }
.home-lab-head { max-width: 760px; margin-bottom: 32px; }
.home-lab-head h2 { margin: 0 0 14px; }
.home-lab-head p { font-size: 17px; margin: 0; }
.home-lab-frame { position: relative; height: clamp(640px, 82vh, 780px); border: 1px solid var(--border); border-radius: 22px; overflow: hidden; background: var(--bg-sunken); box-shadow: 0 40px 80px -48px var(--shadow-color), 0 2px 6px var(--shadow-color); }
.home-lab-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.home-lab-links { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 20px; }
.home-lab-launch { display: none; }
.lms-more { margin: 20px 0 0; }
@media (max-width: 700px) {
  .home-lab-frame { display: none; }
  .home-lab-launch { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 8px; padding: 26px 22px; border-radius: 18px; background: linear-gradient(160deg, #0b1630 0%, #12254d 100%); color: #fff; text-decoration: none; }
  .home-lab-launch::before { content: ""; position: absolute; z-index: -1; right: -30%; bottom: -40%; width: 110%; aspect-ratio: 1; background: var(--deco-contours) no-repeat center / contain; opacity: .5; filter: brightness(1.8); }
  .home-lab-launch strong { font-size: 24px; }
  .home-lab-launch span { color: #b6c2da; font-size: 15px; line-height: 1.55; }
  .home-lab-launch .home-lab-go { margin-top: 8px; color: #93c5fd; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
  .home-lab-links { gap: 16px; }
}
/* Five strengths: links sit on one line whatever the text length */
.pillars .usp-card { display: flex; flex-direction: column; }
.pillars .usp-card .usp-more { margin-top: auto; padding-top: 12px; }
/* Lab frame follows the exercise's own height (set by motion.js); starting height before the first message */
.home-lab-frame { height: 640px; transition: height .3s cubic-bezier(.2,.7,.2,1); }
@media (prefers-reduced-motion: reduce) { .home-lab-frame { transition: none; } }
.home-lab-head { margin-bottom: 24px; }
.home-lab-head h2 { font-size: clamp(30px, 3.2vw, 44px); margin-bottom: 10px; }
.home-lab-head p { font-size: 16px; }

/* ============ 24. Product heroes: copy + product frame ============ */
.inner-hero.has-shot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(36px, 5vw, 72px); align-items: center; }
.inner-hero.has-shot h1 { font-size: clamp(36px, 3.7vw, 56px); max-width: 15ch; }
.inner-hero.has-shot .lead { font-size: 17.5px; max-width: 52ch; }
.inner-hero.has-shot::before { opacity: .55; }
.hero-shot { position: relative; padding: 10px 0 34px 26px; font-family: var(--font-sans); }
.hs-browser { box-shadow: 0 40px 80px -40px rgba(15, 31, 70, .42), 0 2px 8px rgba(15, 31, 70, .06); }
.hs-browser .bw-url { max-width: none; min-width: 0; overflow: hidden; white-space: nowrap; }
.hs-browser .bw-host { overflow: hidden; text-overflow: ellipsis; }
.hs-browser > img { display: block; width: 100%; height: auto; }
.hs-sample { flex: none; font: 600 10px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: #94a3b8; }
.hs-app { display: flex; flex-direction: column; gap: 14px; padding: 20px 22px 22px; min-height: 300px; color: var(--ink); font-size: 13px; line-height: 1.45; }
.hs-app small, .hs-float small { display: block; color: #8491a7; font-size: 11.5px; }
.hs-kicker { font: 600 10px/1.2 var(--font-mono) !important; letter-spacing: .08em; color: var(--blue-ink) !important; margin-bottom: 4px; }
.hs-title { display: block; font-size: 16px; font-weight: 700; color: var(--ink-heading); letter-spacing: -.01em; }
.hs-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.hs-pill { display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 4px 9px; border-radius: 999px; background: #eef2f8; color: #475569; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.hs-pill.ok { background: #e7f6ee; color: #15803d; } .hs-pill.warn { background: #fdf3e2; color: #b45309; } .hs-pill.bad { background: #fdecec; color: #b91c1c; }
.hs-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
.hs-dot.ok { background: #16a34a; } .hs-dot.warn { background: #f59e0b; } .hs-dot.bad { background: #dc2626; }
.hs-bar { display: block; height: 8px; border-radius: 99px; background: #edf1f7; overflow: hidden; }
.hs-bar i { display: block; height: 100%; border-radius: inherit; background: var(--blue); }
.hs-bar.thin { height: 5px; }
.hs-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; color: #64748b; font-size: 12px; }
.hs-meta b { color: var(--ink-heading); font-weight: 600; }
.hs-progress { display: grid; gap: 7px; padding: 12px 14px; border: 1px solid #e6ebf3; border-radius: 12px; background: #fafcff; }
.hs-progress-top { display: flex; justify-content: space-between; font-size: 12px; color: #64748b; }
.hs-progress-top b { color: var(--ink-heading); }
.hs-list { display: grid; }
.hs-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid #eef2f7; }
.hs-av { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 9px; background: #e8efff; color: var(--blue-ink); font-size: 11px; font-weight: 700; }
.hs-av.lg { width: 38px; height: 38px; border-radius: 11px; font-size: 13px; }
.hs-who { flex: 1; min-width: 0; } .hs-who b { display: block; font-size: 13px; color: var(--ink-heading); }
.hs-note { display: flex; align-items: center; gap: 8px; color: #64748b; font-size: 12px; }
.hs-btn { display: inline-flex; align-items: center; padding: 7px 12px; border-radius: 8px; border: 1px solid #dbe3f0; background: #fff; font-size: 12px; font-weight: 600; color: var(--ink-heading); }
.hs-btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.hs-float { position: absolute; z-index: 2; background: #fff; border: 1px solid #e1e7f1; border-radius: 14px; box-shadow: 0 24px 48px -24px rgba(15, 31, 70, .45), 0 2px 6px rgba(15, 31, 70, .06); font-size: 12.5px; }
.hs-toast { left: 0; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 12px 16px; }
.hs-toast b { display: block; color: var(--ink-heading); font-size: 13px; }
/* Simulations */
.hs-channels { display: flex; flex-wrap: wrap; gap: 6px; }
.hs-channels span { padding: 5px 10px; border-radius: 8px; border: 1px solid #e3e9f2; color: #94a3b8; font-size: 12px; font-weight: 600; }
.hs-channels span.on { background: #eef3ff; border-color: #cddcff; color: var(--blue-ink); }
.hs-funnel { display: grid; gap: 9px; }
.hs-fn { display: grid; grid-template-columns: 96px minmax(0, 1fr) 36px; align-items: center; gap: 10px; font-size: 12px; color: #475569; }
.hs-fn b { text-align: right; color: var(--ink-heading); font-variant-numeric: tabular-nums; }
.hs-fn.good .hs-bar i { background: #16a34a; } .hs-fn.bad .hs-bar i { background: #dc2626; }
.hs-chat { left: 0; bottom: 0; width: 230px; padding: 12px 14px 10px; background: #f0fdf4; border-color: #cdebd8; }
.hs-chat-app { display: block; font: 600 10px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: #15803d; margin-bottom: 6px; }
.hs-chat p { margin: 0; color: var(--ink); font-size: 12.5px; line-height: 1.45; }
.hs-chat-time { display: block; text-align: right; color: #94a3b8; font-size: 10.5px; margin-top: 4px; }
/* Reporter */
.hs-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 14px; }
.hs-mail, .hs-scene { display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1px solid #e6ebf3; border-radius: 12px; background: #fafcff; }
.hs-mail i, .hs-scene i { display: block; height: 7px; border-radius: 4px; background: #e8edf5; } .hs-mail i.short, .hs-scene i.short { width: 60%; }
.hs-from { font: 500 11.5px/1.3 var(--font-mono); color: #64748b; overflow-wrap: anywhere; }
.hs-from mark { background: #fdecec; color: #b91c1c; border-radius: 4px; padding: 1px 3px; }
.hs-verdict ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; }
.hs-verdict li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-top: 1px solid #eef2f7; font-size: 12px; color: #64748b; }
.hs-verdict li b { color: var(--ink-heading); text-align: right; } .hs-verdict li b.bad { color: #b91c1c; } .hs-verdict li b.warn { color: #b45309; }
.hs-bad { display: block; color: #b91c1c; font-size: 15px; font-weight: 700; }
.hs-actions { display: flex; gap: 8px; }
.hs-report { left: 0; bottom: 0; display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; padding: 11px 16px 11px 11px; }
.hs-report-icon { grid-row: span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--blue); color: #fff; font-weight: 800; }
.hs-report b { color: var(--ink-heading); font-size: 13px; }
/* AI Studio */
.hs-brief { padding: 12px 14px; border-radius: 12px; background: #f4f7ff; border: 1px solid #dbe5ff; }
.hs-brief p { margin: 0; color: var(--ink); font-size: 13px; }
.hs-outputs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.hs-out { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding: 12px; border: 1px solid #e6ebf3; border-radius: 12px; }
.hs-out small { font: 600 10px/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--blue-ink); }
.hs-out b { font-size: 12.5px; color: var(--ink-heading); line-height: 1.35; flex: 1; }
.hs-review { display: flex; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid #eef2f7; }
.hs-review > span:first-child { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; font-weight: 600; color: #b45309; font-size: 12.5px; }
/* LMS */
.hs-player-top { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 10px; font-size: 12px; color: #64748b; }
.hs-player-top .hs-bar { grid-column: 1 / -1; }
.hs-brand { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: #0f766e; color: #fff; font-weight: 800; font-size: 13px; }
.hs-choices { display: grid; gap: 7px; }
.hs-choices span { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid #e3e9f2; border-radius: 10px; font-weight: 600; font-size: 12.5px; color: var(--ink-heading); }
.hs-choices span.picked { border-color: #9dc3ff; background: #eef4ff; color: var(--blue-ink); }
.hs-track { left: 0; bottom: 0; width: 200px; padding: 12px 14px; display: grid; gap: 6px; }
.hs-track div { display: flex; justify-content: space-between; gap: 8px; color: #64748b; font-size: 12px; }
.hs-track b { color: var(--ink-heading); font-variant-numeric: tabular-nums; }
/* Awareness */
.hs-banner { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 10px; background: #fff8eb; border: 1px solid #f6e1b5; color: #92400e; font-size: 12.5px; font-weight: 600; }
.hs-lesson { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: 14px; }
.hs-mini { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding: 14px; border: 1px solid #e6ebf3; border-radius: 12px; background: #fafcff; }
.hs-mini strong { font-size: 13.5px; color: var(--ink-heading); }
.hs-mark { position: relative; padding: 3px 8px 3px 22px; border-radius: 6px; background: #fdecec; color: #b91c1c; font-size: 11.5px; font-weight: 600; }
.hs-mark::before { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 12px; height: 12px; border-radius: 50%; background: #dc2626; color: #fff; font-size: 8px; font-weight: 800; }
.hs-mark.n1::before { content: "1"; } .hs-mark.n2::before { content: "2"; } .hs-mark.n3::before { content: "3"; }
.hs-signs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: s; }
.hs-signs li { display: grid; gap: 1px; padding-left: 26px; position: relative; counter-increment: s; }
.hs-signs li::before { content: counter(s); position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #eef3ff; color: var(--blue-ink); font-size: 10.5px; font-weight: 700; }
.hs-signs b { font-size: 12.5px; color: var(--ink-heading); } .hs-signs span { font-size: 12px; color: #64748b; }
/* Human risk */
.hs-heat { display: grid; grid-template-columns: 82px repeat(5, minmax(0, 1fr)); gap: 5px; align-items: center; }
.hs-heat small { text-align: center; font-size: 10.5px; }
.hs-heat small.hs-team { text-align: left; color: var(--ink); font-size: 12px; font-weight: 600; }
.hs-heat i { display: block; height: 24px; border-radius: 6px; }
.hs-heat i.l1 { background: #e8efff; } .hs-heat i.l2 { background: #a9c3ff; } .hs-heat i.l3 { background: #3371ff; }
.hs-trend { display: grid; gap: 6px; }
.hs-trend svg { width: 100%; height: 48px; display: block; }
.hs-trend .area { fill: rgba(51, 113, 255, .1); } .hs-trend .line { fill: none; stroke: var(--blue); stroke-width: 2; vector-effect: non-scaling-stroke; }
.hs-insight { left: 0; bottom: 0; width: 250px; padding: 12px 14px; background: #0c1527; border-color: #1c2a45; }
.hs-insight .hs-kicker { color: #93c5fd !important; }
.hs-insight p { margin: 0; color: #dbe5f5; font-size: 12.5px; line-height: 1.45; }
/* Platform: one record per person */
.hs-person { display: flex; align-items: center; gap: 10px; }
.hs-timeline { list-style: none; margin: 0; padding: 0; display: grid; position: relative; }
.hs-timeline::before { content: ""; position: absolute; left: 3.5px; top: 14px; bottom: 14px; width: 1px; background: #e2e8f0; }
.hs-timeline li { position: relative; display: grid; grid-template-columns: 8px 84px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; }
.hs-timeline li small { font: 600 10px/1.2 var(--font-mono); letter-spacing: .06em; color: #8491a7; }
.hs-timeline li b { font-size: 12.5px; color: var(--ink-heading); font-weight: 600; min-width: 0; }
.hs-timeline em { font-style: normal; font-size: 12px; font-weight: 600; white-space: nowrap; } .hs-timeline em.ok { color: #15803d; } .hs-timeline em.bad { color: #b91c1c; }
/* Motion: the frame rises in with the hero sequence */
@media (prefers-reduced-motion: no-preference) {
  .hero-shot .hs-browser { animation: ks-rise .8s cubic-bezier(.16,1,.3,1) .16s both; }
  .hero-shot .hs-float { animation: ks-rise .7s cubic-bezier(.16,1,.3,1) .42s both; }
}
@media (max-width: 1100px) {
  .inner-hero.has-shot { grid-template-columns: minmax(0, 1fr); }
  .inner-hero.has-shot h1 { max-width: 18ch; }
  .hero-shot { max-width: 640px; }
}
@media (max-width: 640px) {
  .hero-shot { padding: 0 0 28px; }
  .hs-app { padding: 16px; min-height: 0; }
  .hs-sample-more { display: none; }
  .hs-float { left: auto !important; right: 8px; max-width: 78%; }
  .hs-split, .hs-lesson { grid-template-columns: minmax(0, 1fr); }
  .hs-outputs { grid-template-columns: minmax(0, 1fr); }
  .hs-out { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .hs-timeline li { grid-template-columns: 8px minmax(0, 1fr) auto; }
  .hs-timeline li small { display: none; }
  .hs-heat { grid-template-columns: 70px repeat(5, minmax(0, 1fr)); }
}
/* Floating cards hang off the frame's lower-left corner: 24px over its empty bottom padding, the rest below it */
.hero-shot { --fpad: 40px; padding-bottom: var(--fpad); }
.hero-shot.hsf-simulations, .hero-shot.hsf-risk { --fpad: 96px; }
.hero-shot.hsf-lms { --fpad: 110px; }
.hero-shot.hsf-platform { --fpad: 60px; }
.hs-app { padding-bottom: 36px; }
.hs-float { top: calc(100% - var(--fpad) - 24px); bottom: auto !important; }
.inner-hero.has-shot h1 { max-width: 16ch; text-wrap: balance; }
.inner-hero.has-shot h1 br { display: none; }
.hs-legend { display: flex; align-items: center; gap: 5px; margin-top: -4px; }
.hs-legend small { font-size: 10.5px; } .hs-legend small:first-child { margin-right: 4px; }
.hs-legend i { width: 18px; height: 8px; border-radius: 3px; } .hs-legend i.l1 { background: #e8efff; } .hs-legend i.l2 { background: #a9c3ff; } .hs-legend i.l3 { background: #3371ff; }
@media (max-width: 640px) { .hs-float { top: auto; bottom: 0 !important; } .hero-shot { padding-bottom: 0; } .hs-float { position: relative; left: auto !important; right: auto; margin: -20px 0 0 12px; max-width: calc(100% - 24px); } }

/* ============ 25. Hero visuals for every page: extra product frames + sample lures ============ */
.hero-shot.hsf-ai, .hero-shot.hsf-evidence, .hero-shot.hsf-company { --fpad: 64px; }
.hs-mono { font-family: var(--font-mono) !important; font-size: 10px !important; }
.hs-feed { list-style: none; margin: 0; padding: 0; display: grid; }
.hs-feed li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid #eef2f7; }
.hs-feed em { font-style: normal; font-size: 12px; font-weight: 600; white-space: nowrap; } .hs-feed em.ok { color: #15803d; } .hs-feed em.warn { color: #b45309; } .hs-feed em.bad { color: #b91c1c; }
.hs-checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
.hs-checks li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-heading); }
.hs-checks svg { flex: none; width: 16px; height: 16px; padding: 3px; border-radius: 50%; background: #e7f6ee; color: #15803d; }
.hs-quote { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 12px; background: #f4f7ff; border: 1px solid #dbe5ff; font-size: 12px; color: #64748b; }
.hs-quote b { padding: 4px 9px; border-radius: 8px; background: #fff; border: 1px solid #dbe5ff; color: var(--blue-ink); font-size: 12px; }
.hs-av.hs-t1 { background: #0f766e; color: #fff; } .hs-av.hs-t2 { background: #b45309; color: #fff; } .hs-av.hs-t3 { background: #7c3aed; color: #fff; } .hs-av.hs-t4 { background: #be123c; color: #fff; }
.hs-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.hs-flow li { display: grid; grid-template-columns: 26px 78px minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid #eef2f7; }
.hs-flow b { font-size: 12.5px; color: var(--ink-heading); } .hs-flow small { font-size: 12px !important; color: #64748b !important; }
.hs-step { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #eef3ff; color: var(--blue-ink); font-size: 11px; font-weight: 700; }
.hs-signs-card { left: 0; width: 250px; padding: 13px 15px; }
.hs-signs-card ol { margin: 4px 0 0; padding: 0; list-style: none; counter-reset: t; display: grid; gap: 7px; }
.hs-signs-card li { position: relative; padding-left: 24px; counter-increment: t; color: var(--ink); font-size: 12.5px; line-height: 1.4; }
.hs-signs-card li::before { content: counter(t); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: #fdecec; color: #b91c1c; font-size: 10px; font-weight: 700; }
.hsf-lure .hs-signs-card .hs-kicker { color: #b91c1c !important; }

/* Desktop lures: the frame is the employee's app, not KeenSec */
.hero-shot.is-desk { --fpad: 72px; }
.ls-app { min-height: 280px; padding: 0 !important; gap: 0 !important; }
.ls-bad-url { color: #b91c1c !important; font-weight: 600; }
.ls-av { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: #e2e8f0; color: #334155; font-size: 11px; font-weight: 700; }
.ls-mail, .ls-chat { display: grid; grid-template-columns: 54px minmax(0, 1fr); min-height: 280px; }
.ls-mail-side, .ls-chat-side { display: flex; flex-direction: column; gap: 10px; padding: 18px 14px; background: #f5f7fb; border-right: 1px solid #e8edf5; }
.ls-mail-side i, .ls-chat-side i { display: block; height: 24px; border-radius: 7px; background: #e5eaf2; }
.ls-mail-side i.on { background: #dbe6ff; }
.ls-chat-side { background: #1f2a44; border-color: #1f2a44; } .ls-chat-side i { background: rgba(255,255,255,.14); border-radius: 50%; width: 26px; height: 26px; }
.ls-mailbody { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; padding: 20px 22px 40px; min-width: 0; }
.ls-mailbody strong, .ls-login strong, .ls-msg strong { font-size: 16px; color: var(--ink-heading); line-height: 1.3; }
.ls-mailbody p, .ls-msg p, .ls-login p { margin: 0; font-size: 13px; line-height: 1.55; color: #334155; }
.ls-from { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font: 500 11.5px/1.35 var(--font-mono); color: #64748b; overflow-wrap: anywhere; }
.ls-from small { margin-left: auto; font-family: var(--font-sans); }
.ls-cta { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 8px; background: #2563eb; color: #fff; font-size: 12.5px; font-weight: 600; }
.ls-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 8px; border: 1px solid #dbe3f0; background: #f8fafc; font-size: 12px; font-weight: 600; color: var(--ink-heading); }
.ls-qr { display: block; width: 104px; height: 104px; padding: 6px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; }
.ls-chat-main { padding: 20px 22px 40px; }
.ls-msg { display: flex; gap: 11px; } .ls-msg > div { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.ls-msg-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.ls-msg-head b { color: var(--ink-heading); } .ls-msg-head small { color: #94a3b8; font-size: 11px; }
.ls-msg-head em { font-style: normal; padding: 2px 7px; border-radius: 5px; background: #fdf3e2; color: #b45309; font-size: 10.5px; font-weight: 700; }
.ls-cal { display: grid; grid-template-columns: 86px minmax(0, 1fr); min-height: 280px; }
.ls-cal-date { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; padding: 22px 8px; background: #f5f7fb; border-right: 1px solid #e8edf5; text-align: center; }
.ls-cal-date b { font-size: 15px; color: var(--ink-heading); line-height: 1.2; } .ls-cal-date small { font-size: 11px; color: #64748b; }
.ls-cal-date small:first-child { font: 600 10px/1 var(--font-mono); letter-spacing: .08em; color: var(--blue-ink); }
.ls-rsvp { display: flex; gap: 6px; } .ls-rsvp span { padding: 5px 10px; border-radius: 7px; border: 1px solid #e2e8f0; font-size: 11.5px; font-weight: 600; color: #475569; }
.ls-login { display: flex; flex-direction: column; gap: 9px; width: min(320px, 100%); margin: 26px auto 40px; padding: 22px; border: 1px solid #e2e8f0; border-radius: 14px; box-shadow: 0 10px 30px -18px rgba(15,31,70,.3); }
.ls-field { display: block; padding: 9px 11px; border: 1px solid #dbe3f0; border-radius: 8px; font: normal 12px/1 var(--font-mono); color: #94a3b8; }
.ls-login .ls-cta { justify-content: center; }
.ls-ransom { display: flex; flex-direction: column; align-items: center; gap: 12px; min-height: 280px; padding: 30px 26px 44px; background: #1a0b0e; color: #fecaca; text-align: center; }
.ls-ransom strong { font-size: 17px; letter-spacing: .02em; color: #fff; } .ls-ransom p { margin: 0; max-width: 40ch; font-size: 13px; line-height: 1.55; color: #fca5a5; }
.ls-lock { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #dc2626; color: #fff; } .ls-lock svg { width: 20px; height: 20px; }
.ls-ransom .ls-cta { background: #dc2626; }

/* Phone lures */
.hero-shot.is-phone { display: flex; justify-content: flex-end; padding: 10px 24px 24px 0; }
.hero-shot.is-phone .hs-float { top: auto; bottom: 56px !important; left: 0; }
.ls-phone { position: relative; width: 300px; min-height: 470px; padding: 36px 14px 18px; border-radius: 40px; background: #fff; border: 9px solid #0f172a; box-shadow: 0 40px 80px -40px rgba(15,31,70,.5); display: flex; flex-direction: column; }
.ls-notch { position: absolute; top: 9px; left: 50%; width: 84px; height: 20px; transform: translateX(-50%); border-radius: 12px; background: #0f172a; }
.ls-phead { display: flex; align-items: center; gap: 10px; padding: 4px 4px 12px; border-bottom: 1px solid #eef2f7; }
.ls-phead b { display: block; font-size: 13px; color: var(--ink-heading); line-height: 1.25; } .ls-phead small { font-size: 11px; color: #64748b; }
.ls-thread { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; padding: 16px 2px 4px; }
.ls-bubble { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; max-width: 94%; padding: 12px 13px 8px; border-radius: 16px 16px 16px 4px; background: #eef1f6; }
.ls-bubble strong { font-size: 13.5px; color: var(--ink-heading); line-height: 1.3; } .ls-bubble p { margin: 0; font-size: 13px; line-height: 1.5; color: #1e293b; overflow-wrap: anywhere; }
.ls-bubble time { align-self: flex-end; font-size: 10.5px; color: #94a3b8; }
.ls-whatsapp .ls-thread { background: #efeae2; margin: 0 -14px -18px; padding: 16px 12px 18px; border-radius: 0 0 31px 31px; }
.ls-whatsapp .ls-bubble { background: #fff; } .ls-whatsapp .ls-av { background: #d1fae5; color: #047857; }
.ls-rcs .ls-bubble { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; box-shadow: 0 6px 18px -12px rgba(15,31,70,.35); } .ls-rcs .ls-cta { align-self: stretch; justify-content: center; }
.ls-call { align-items: center; background: #0f172a; color: #e2e8f0; text-align: center; }
.ls-call-state { margin-top: 12px; font-size: 11.5px; color: #94a3b8; }
.ls-call-av { display: grid; place-items: center; width: 64px; height: 64px; margin-top: 18px; border-radius: 50%; background: #1e293b; font-weight: 700; font-size: 20px; }
.ls-call-from { margin-top: 10px; font-size: 14px; color: #fff; line-height: 1.35; padding: 0 10px; }
.ls-transcript { margin: 18px 4px 0; padding: 12px 13px; border-radius: 14px; background: rgba(255,255,255,.08); text-align: left; }
.ls-transcript strong { display: block; font-size: 13px; color: #fff; margin-bottom: 5px; } .ls-transcript p { margin: 0; font-size: 12.5px; line-height: 1.5; color: #cbd5e1; }
.ls-call-btns { display: flex; gap: 70px; margin-top: auto; padding-top: 20px; }
.ls-call-btns i { width: 48px; height: 48px; border-radius: 50%; } .ls-call-btns .end { background: #dc2626; } .ls-call-btns .ok { background: #16a34a; }
.ls-poster { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 300px; padding: 26px 24px 30px; border-radius: 6px; background: #fffbea; border: 1px solid #f1e3a6; box-shadow: 0 30px 60px -34px rgba(15,31,70,.45); text-align: center; transform: rotate(1.5deg); }
.ls-poster > small { font: 700 11px/1 var(--font-mono); letter-spacing: .14em; color: #92400e; } .ls-poster strong { font-size: 18px; color: var(--ink-heading); } .ls-poster p { margin: 0; font-size: 13px; color: #334155; }
.ls-poster .ls-qr { width: 132px; height: 132px; } .ls-poster .hs-sample { margin-top: 4px; }
/* Channel hubs: inbox with a phone on top */
.hero-shot.is-multi { padding: 10px 0 40px 0; }
.is-multi .ls-desk { width: 86%; }
.is-multi .ls-phone { position: absolute; right: 0; bottom: 0; width: 230px; min-height: 340px; border-width: 7px; border-radius: 32px; padding: 30px 10px 12px; }
@media (prefers-reduced-motion: no-preference) {
  .hero-shot .ls-phone, .hero-shot .ls-poster { animation: ks-rise .8s cubic-bezier(.16,1,.3,1) .16s both; }
  .is-multi .ls-phone { animation-delay: .34s; }
}
@media (max-width: 1100px) { .hero-shot.is-phone { justify-content: center; padding-right: 0; } .hero-shot.is-phone .hs-float { left: 0; } }
@media (max-width: 640px) {
  .hero-shot.is-phone { flex-direction: column; align-items: center; }
  .hero-shot.is-phone .hs-float { position: relative; bottom: auto !important; margin: -30px 0 0; }
  .ls-phone { width: min(300px, 100%); }
  .ls-mail, .ls-chat { grid-template-columns: minmax(0, 1fr); } .ls-mail-side, .ls-chat-side { display: none; }
  .ls-cal { grid-template-columns: 70px minmax(0, 1fr); }
  .hs-checks { grid-template-columns: minmax(0, 1fr); }
  .hs-flow li { grid-template-columns: 26px minmax(0, 1fr); } .hs-flow small { grid-column: 2; }
  .is-multi .ls-desk { width: 100%; } .is-multi .ls-phone { position: relative; margin: -60px 0 0 auto; width: 210px; }
  .hero-shot.is-multi { display: flex; flex-direction: column; padding-bottom: 0; }
}
.ls-phone:not(.ls-call) { min-height: 420px; }
.ls-compose { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.ls-compose span { flex: 1; padding: 9px 13px; border-radius: 999px; background: #f1f5f9; color: #94a3b8; font-size: 12px; }
.ls-compose i { width: 32px; height: 32px; border-radius: 50%; background: #cbd5e1; }
.ls-whatsapp .ls-thread { margin-bottom: 0; border-radius: 0; } .ls-whatsapp .ls-compose i { background: #25a55f; }
.is-multi .ls-phone:not(.ls-call) { min-height: 340px; }
/* Floating cards sit in normal flow, pulled up over the frame's corner, so the hero always makes room for them */
.hero-shot:not(.is-phone) { padding-bottom: 0; }
.hero-shot:not(.is-phone) > .hs-float { position: relative; top: auto !important; bottom: auto !important; left: auto !important; right: auto; width: fit-content; max-width: 280px; margin: -26px 0 0 -26px; }
.hero-shot.is-multi > .hs-float { margin-left: 0; }
@media (max-width: 640px) { .hero-shot:not(.is-phone) > .hs-float { margin: -20px 0 0 12px; max-width: calc(100% - 24px); } }
/* Form spam trap: kept out of sight and out of the tab order */
.ks-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-address { margin-top: 28px; font-style: normal; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.contact-address .mono { display: block; margin-bottom: 6px; font-size: 11px; letter-spacing: .08em; color: var(--blue-ink); }

/* ============ 26. Wide product panels (capture sections) ============ */
.product-panel { margin: 0 auto; max-width: 1080px; font-family: var(--font-sans); }
.product-panel > img { display: block; width: 100%; height: auto; border-radius: 16px; border: 1px solid #dbe3f0; }
.product-panel figcaption { margin-top: 16px; text-align: center; color: var(--muted); font-size: 15px; line-height: 1.55; }
.product-panel figcaption b { color: var(--ink-heading); }
.pp-app { background: #f6f8fc; gap: 16px !important; padding: 22px !important; min-height: 0 !important; }
.pp-grid { display: grid; gap: 16px; }
.pp-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pp-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pp-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pp-list-detail { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.pp-lesson { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.pp-card { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 18px; border-radius: 14px; background: #fff; border: 1px solid #e3e9f2; min-width: 0; }
.pp-card > .hs-pill { align-self: flex-start; }
.pp-flush { padding: 0; gap: 0; overflow: hidden; }
.pp-p { margin: 0; font-size: 13px; line-height: 1.55; color: #334155; }
.pp-tr { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid #eef2f7; }
.pp-tr span:first-child { min-width: 0; } .pp-tr b { display: block; font-size: 13px; color: var(--ink-heading); } .pp-tr small { font-size: 11.5px; color: #8491a7; }
.pp-tr.pp-th { border-top: 0; background: #f8fafc; font: 600 10px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: #8491a7; }
.pp-tr.is-sel { background: #eef4ff; box-shadow: inset 3px 0 0 var(--blue); }
.pp-mail { padding: 0 !important; }
.pp-cov { display: grid; gap: 12px; }
.pp-cov > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: center; gap: 12px; }
.pp-cov b { display: block; font-size: 13px; color: var(--ink-heading); } .pp-cov small { font-size: 11.5px; color: #8491a7; }
.pp-chart { width: 100%; height: 130px; } .pp-chart path { fill: none; stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.pp-chart .g1 { stroke: var(--blue); } .pp-chart .g2 { stroke: #f59e0b; }
.pp-legend { display: flex; gap: 18px; font-size: 12px; color: #64748b; } .pp-legend i { display: inline-block; width: 14px; height: 3px; margin-right: 6px; vertical-align: middle; border-radius: 2px; } .pp-legend .g1 { background: var(--blue); } .pp-legend .g2 { background: #f59e0b; }
.pp-flow { display: grid; gap: 10px; }
.pp-flow > div { display: grid; grid-template-columns: 10px minmax(0, 150px) 16px minmax(0, 1fr); align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: #f8fafc; font-size: 12.5px; color: #334155; }
.pp-flow b { color: var(--ink-heading); } .pp-arrow { color: #94a3b8; }
.pp-mini { width: 120px; flex: none; }
.pp-hub { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto; gap: 14px; }
.pp-core { grid-column: 1 / -1; display: grid; justify-items: center; gap: 4px; padding: 20px; border-radius: 14px; background: #0c1527; color: #dbe5f5; text-align: center; }
.pp-core strong { font-size: 20px; color: #fff; } .pp-core span { font-size: 13px; color: #b6c2da; } .pp-core .hs-kicker { color: #93c5fd !important; }
.pp-node { display: grid; gap: 3px; padding: 14px 16px; border-radius: 12px; background: #fff; border: 1px solid #e3e9f2; }
.pp-node b { font-size: 13.5px; color: var(--ink-heading); } .pp-node small { font-size: 12px; color: #64748b; }
.pp-record { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border-radius: 12px; border: 1px dashed #b9cdf5; background: #f4f7ff; color: var(--blue-ink); font-size: 13px; font-weight: 600; }
.pp-io { display: grid; gap: 2px; font-size: 13px; color: var(--ink-heading); font-weight: 600; } .pp-io em { font-style: normal; font: 600 10px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: #8491a7; }
.pp-foot { padding: 0 2px; }
.pp-bubble { padding: 12px 14px; border-radius: 14px 14px 14px 4px; background: #f1f5f9; }
.pp-bubble strong { display: block; font-size: 13.5px; color: var(--ink-heading); margin-bottom: 4px; } .pp-bubble p { margin: 0; font-size: 13px; line-height: 1.5; color: #334155; }
.pp-bubble mark, .pp-tag mark { background: #fdecec; color: #b91c1c; border-radius: 4px; padding: 0 3px; }
.pp-tag { font-size: 12px; color: #64748b; }
.pp-login { margin: 0 !important; width: 100% !important; box-shadow: none !important; padding: 16px !important; }
.pp-log { display: grid; }
.pp-log > div { display: grid; grid-template-columns: 44px 130px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-top: 1px solid #eef2f7; font-size: 12.5px; color: #475569; }
.pp-log small { font: 500 11px/1.4 var(--font-mono); color: #8491a7; } .pp-log b { color: var(--ink-heading); }
@media (max-width: 960px) { .pp-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pp-3, .pp-2, .pp-list-detail, .pp-lesson { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .pp-app { padding: 14px !important; } .pp-4, .pp-hub { grid-template-columns: minmax(0, 1fr); }
  .pp-cov > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .pp-flow > div { grid-template-columns: 10px minmax(0, 1fr); } .pp-flow .pp-arrow { display: none; } .pp-flow > div > span:last-child { grid-column: 2; }
  .pp-log > div { grid-template-columns: 44px minmax(0, 1fr); } .pp-log span { grid-column: 2; }
  .pp-mini { width: 80px; }
}

/* ============ 27. Primary sources on regulation pages ============ */
.mk-source-list { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; counter-reset: src; border-top: 1px solid var(--line); }
.mk-source-list li { position: relative; display: grid; gap: 4px; padding: 16px 0 16px 36px; border-bottom: 1px solid var(--line); counter-increment: src; }
.mk-source-list li::before { content: counter(src, decimal-leading-zero); position: absolute; left: 0; top: 18px; font: 600 11px/1 var(--font-mono); color: var(--blue-ink); }
.mk-source-list a { color: var(--ink-heading); font-weight: 600; font-size: 15px; line-height: 1.4; text-decoration: underline; text-decoration-color: #c7d6f5; text-underline-offset: 3px; overflow-wrap: anywhere; }
.mk-source-list a:hover { text-decoration-color: var(--blue); }
.mk-source-list span { color: var(--muted); font-size: 13.5px; line-height: 1.5; }
@media (max-width: 760px) { .mk-source-list { grid-template-columns: minmax(0, 1fr); } }

/* Credential rows size to however many credentials are shown (the SOC 2 badge can be switched off in ui.mjs) */
@media (min-width: 1101px) { .home-trust-badges-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }

/* ============ 28. Footer: brand + contact column, link columns, quiet legal bar ============ */
.site-footer .footer-top > div:first-child { display: flex; flex-direction: column; align-items: flex-start; }
.site-footer .footer-top > div:first-child .footer-positioning { margin-top: 20px; font-size: 15px; line-height: 1.6; letter-spacing: 0; color: #94a3b8; max-width: 30ch; }
.footer-contact { display: grid; gap: 18px; margin: 28px 0 0; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.08); width: 100%; max-width: 280px; }
.footer-contact div { display: grid; gap: 6px; }
.footer-contact dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #94a3b8; }
.footer-contact dd { margin: 0; }
.footer-contact address { font-style: normal; font-size: 14px; line-height: 1.6; color: #cbd5e1; }
.site-footer .footer-top .footer-contact .footer-email { display: inline; margin: 0; font-size: 14px; color: #93c5fd; font-weight: 600; }
.site-footer .footer-top .footer-contact .footer-email:hover { color: #fff !important; transform: none; }
.footer-bottom { font-size: 13px; }
.footer-copy { color: #94a3b8; }
.footer-legal { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 24px; }
.footer-legal a { color: #94a3b8; transition: color .15s ease; }
.footer-legal a:hover { color: #fff; }
.footer-legal .back-to-top { margin-left: 8px; padding-left: 24px; border-left: 1px solid rgba(255, 255, 255, 0.12); }
@media (max-width: 640px) {
  .footer-bottom { flex-direction: column; align-items: flex-start !important; text-align: left !important; gap: 14px; }
  .footer-legal { gap: 10px 20px; }
  .footer-legal .back-to-top { margin-left: 0; padding-left: 0; border-left: 0; width: 100%; }
}
@media (max-width: 640px) {
  .site-footer .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 36px 20px; }
  .site-footer .footer-top > div:first-child { grid-column: 1 / -1; }
  .site-footer .footer-top a:not(.brand) { font-size: 13.5px; margin: 9px 0; }
}
@media (min-width: 641px) and (max-width: 1024px) {
  .site-footer .footer-top { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 40px 24px; }
  .site-footer .footer-top > div:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; align-items: start; }
  .site-footer .footer-top > div:first-child .footer-contact { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
}
@media (min-width: 641px) and (max-width: 1024px) {
  .site-footer .footer-top > div:first-child .footer-contact { border-top: 0; padding-top: 0; }
  .site-footer .footer-top > div:first-child .footer-positioning { margin-top: 16px; }
}

/* ============ 29. Consent: cookie banner, settings dialog, form consent ============ */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ks-consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 900; display: flex; justify-content: center; pointer-events: none; }
.ks-consent-inner { pointer-events: auto; width: min(1080px, 100%); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 28px; align-items: center; padding: 18px 22px; background: #0c1527; color: #dbe5f5; border: 1px solid #1f2d49; border-radius: 16px; box-shadow: 0 24px 60px -24px rgba(7, 13, 24, .6); }
.ks-consent-title { margin: 0 0 4px; font-size: 15px; letter-spacing: -.01em; color: #fff; }
.ks-consent-copy p { margin: 0; font-size: 13.5px; line-height: 1.55; color: #b6c2da; max-width: 72ch; }
.ks-consent-copy a { color: #93c5fd; text-decoration: underline; text-underline-offset: 2px; }
.ks-consent-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ks-c-btn { min-width: 104px; padding: 10px 18px; border-radius: 10px; border: 1px solid #3a4c70; background: #16223a; color: #fff; font: 600 14px/1 var(--font-sans); cursor: pointer; transition: background .15s, border-color .15s; }
.ks-c-btn:hover { background: #1f2f4f; border-color: #5b76a8; }
.ks-c-btn:focus-visible, .ks-c-link:focus-visible, .footer-cookie-btn:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }
.ks-c-link { background: none; border: 0; padding: 10px 6px; color: #93c5fd; font: 600 14px/1 var(--font-sans); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ks-consent-modal { position: fixed; inset: 0; z-index: 950; display: grid; place-items: center; padding: 16px; background: rgba(7, 13, 24, .55); }
.ks-consent-dialog { width: min(560px, 100%); max-height: calc(100dvh - 32px); overflow: auto; padding: 26px; background: var(--bg-raised); color: var(--text); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 30px 80px -30px rgba(7, 13, 24, .6); }
.ks-consent-dialog h2 { margin: 0 0 8px; font-size: 20px; letter-spacing: -.02em; color: var(--text-heading); }
.ks-consent-dialog > p { margin: 0 0 16px; font-size: 14px; line-height: 1.55; color: var(--text-muted); }
.ks-c-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--border); }
.ks-c-row strong { display: block; font-size: 14.5px; color: var(--text-heading); }
.ks-c-row span:not(.ks-c-track):not(.ks-c-fixed) { display: block; margin-top: 3px; font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.ks-c-fixed { font: 600 11px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--success); }
.ks-c-switch { position: relative; display: inline-flex; cursor: pointer; }
.ks-c-switch input { position: absolute; opacity: 0; width: 44px; height: 26px; margin: 0; cursor: pointer; }
.ks-c-track { width: 44px; height: 26px; border-radius: 999px; background: var(--border-input); position: relative; transition: background .15s; }
.ks-c-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .15s; }
.ks-c-switch input:checked + .ks-c-track { background: var(--blue); }
.ks-c-switch input:checked + .ks-c-track::after { transform: translateX(18px); }
.ks-c-switch input:focus-visible + .ks-c-track { outline: 3px solid #93c5fd; outline-offset: 2px; }
.ks-c-foot { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; padding-top: 16px; border-top: 1px solid var(--border); }
.ks-consent-dialog .ks-c-btn { background: var(--bg-surface); color: var(--text-heading); border: 1px solid var(--border); }
.ks-consent-dialog .ks-c-btn:hover { background: var(--bg-sunken); }
.footer-cookie-btn { background: none; border: 0; padding: 0; color: #94a3b8; font: inherit; cursor: pointer; transition: color .15s; }
.footer-cookie-btn:hover { color: #fff; }
.form-consent { display: grid; gap: 10px; margin: 16px 0 14px; }
.consent-notice { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--text-muted); }
.consent-notice a { color: var(--accent-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.consent-check { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; margin: 0 !important; font-size: 13px; font-weight: 400; line-height: 1.5; color: var(--text-muted); cursor: pointer; }
.consent-check strong { font-weight: 600; color: var(--text-heading); }
.consent-check input { width: 16px; height: 16px; min-height: 0; padding: 0; margin: 2px 0 0; accent-color: var(--blue); cursor: pointer; }
.form-captcha { margin: 0 0 14px; }
@media (max-width: 760px) {
  .ks-consent { left: 10px; right: 10px; bottom: 10px; }
  .ks-consent-inner { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .ks-consent-actions .ks-c-btn { flex: 1; }
}
.ks-c-switch input { z-index: 1; }
.ks-c-track { pointer-events: none; }
.ks-consent-modal { z-index: 2000; }
.ks-consent { z-index: 1500; }

/* Footer social links. Placeholders (no URL yet) are shown greyed and aren't links. */
.footer-social { display: flex; gap: 10px; margin-top: 22px; }
.footer-social-link { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.1); color: #cbd5e1; transition: color .2s, border-color .2s, background-color .2s; }
.site-footer .footer-top a.footer-social-link { display: inline-grid; place-items: center; margin: 0; padding: 0; }
.site-footer .footer-top a.footer-social-link:hover { color: #fff !important; border-color: rgba(147, 197, 253, 0.5); background: rgba(255, 255, 255, 0.04); transform: none; }
.footer-social-link.is-placeholder { opacity: .35; cursor: default; }


/* Dark-mode contrast fixes: homepage/trust proof strip, trust-card links, resource filter chips. */
:root[data-theme="dark"] .clients-footer-proof, :root[data-theme="dark"] .clients-footer-proof .proof-pill { color: var(--text-muted); }
:root[data-theme="dark"] .ht-badge-link { color: var(--accent-ink); }
:root[data-theme="dark"] .filter-buttons button:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
:root[data-theme="dark"] .filter-buttons button[aria-pressed="true"] { background: var(--text-heading); border-color: var(--text-heading); color: var(--bg); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .clients-footer-proof, :root:not([data-theme="light"]) .clients-footer-proof .proof-pill { color: var(--text-muted); }
  :root:not([data-theme="light"]) .ht-badge-link { color: var(--accent-ink); }
  :root:not([data-theme="light"]) .filter-buttons button:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
  :root:not([data-theme="light"]) .filter-buttons button[aria-pressed="true"] { background: var(--text-heading); border-color: var(--text-heading); color: var(--bg); }
}


/* Header breathing room: at least 32px between the logo and the first menu item at every desktop width.
   Tightens the menu spacing slightly where the full menu only just fits. */
@media (min-width: 961px) { .header-container { gap: 32px; } }
@media (min-width: 961px) and (max-width: 1023px) { #main-nav { gap: 5px !important; } }
@media (min-width: 1024px) and (max-width: 1119px) { #main-nav { gap: 8px !important; } }
@media (min-width: 1120px) and (max-width: 1240px) { #main-nav { gap: 14px !important; } }
@media (min-width: 1241px) and (max-width: 1340px) { #main-nav { gap: 24px !important; } }

/* Cookie banner in dark mode: lift it off the dark page and footer. Reject and Accept stay identical
   (equal weight). Light mode keeps the original banner. */
:root[data-theme="dark"] .ks-consent-inner { background: var(--bg-raised); border-color: rgba(255, 255, 255, 0.18); box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45), 0 24px 60px -24px rgba(0, 0, 0, 0.6); }
:root[data-theme="dark"] .ks-consent .ks-c-btn { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.28); color: #fff; }
:root[data-theme="dark"] .ks-consent .ks-c-btn:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.4); }
:root[data-theme="dark"] .ks-consent .ks-c-link { color: var(--accent-ink); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ks-consent-inner { background: var(--bg-raised); border-color: rgba(255, 255, 255, 0.18); box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45), 0 24px 60px -24px rgba(0, 0, 0, 0.6); }
  :root:not([data-theme="light"]) .ks-consent .ks-c-btn { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.28); color: #fff; }
  :root:not([data-theme="light"]) .ks-consent .ks-c-btn:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.4); }
  :root:not([data-theme="light"]) .ks-consent .ks-c-link { color: var(--accent-ink); }
}

/* Homepage band: a little air between the hero dashboard and the band */
.usp-overview.band-dark { margin-top: clamp(24px, 4vw, 56px); }

/* Homepage pillars ("Why KeenSec"): real cards with inner padding, matching the other cards in dark bands.
   Before, the hover shadow drew a box with the text touching its edges. */
.usp-overview .pillars { gap: 14px; }
.usp-overview .pillar { padding: 22px 20px 20px; border: 1px solid var(--border); border-top: 2px solid rgba(122, 162, 255, 0.7); border-radius: 14px; background: rgba(255, 255, 255, 0.03); }
.usp-overview .pillar h3 { font-size: 19px; }
.usp-overview .usp-card:hover { border-color: rgba(147, 197, 253, 0.45); border-top-color: #93c5fd; box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.6); }

/* Trust page status chips on the dark band: readable text and outlines */
.band-dark .pillar-status-chip { color: #cbd5e1; border-color: rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.05); }
.band-dark .pillar-status-chip.verified { color: #6ee7b7; border-color: rgba(110, 231, 183, 0.45); background: rgba(16, 185, 129, 0.12); }
.band-dark .pillar-status-chip.ready { color: #a5c0ff; border-color: rgba(165, 192, 255, 0.55); background: rgba(122, 162, 255, 0.12); }
.usp-overview .usp-card:hover h3 { color: #93c5fd; }

/* Dark mode: hero eyebrow labels ("RBI · India", "Glossary") use the lighter link blue (brand blue is 4.4:1 on the dark page) */
:root[data-theme="dark"] .eyebrow:not(.theme-keep-light *) { color: var(--accent-ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .eyebrow:not(.theme-keep-light *) { color: var(--accent-ink); } }

/* Homepage perspectives: one lead story plus two supporting ones. Every card shares one art style:
   a dark panel with a small diagram of the article's idea, one accent, mono labels. */
.resource-card { padding: 0; overflow: hidden; }
.resource-card .rc-body { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 24px; flex: 1; }
.resource-card .rc-body h3 { margin: 0; flex-grow: 0; }
.resource-card .rc-body p { margin: 0; color: var(--text-muted); font-size: 15.5px; line-height: 1.6; max-width: 52ch; }
.resource-card .teaser-link { margin-top: auto; padding-top: 6px; }
.teaser-art { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 18px; justify-content: space-between; min-height: 200px; padding: 22px 24px; background: #0b1630; color: #e6ebf5; border-bottom: 1px solid var(--border); }
.teaser-art::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--deco-dots); background-size: 24px 24px; opacity: .22; -webkit-mask-image: linear-gradient(160deg, #000 10%, transparent 75%); mask-image: linear-gradient(160deg, #000 10%, transparent 75%); }
.ta-label { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #93b4ff; }
.teaser-art .is-on { color: #fff; }
/* lead: three-step flow */
.ta-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ta-flow li { display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; align-items: baseline; padding: 14px 16px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: rgba(255,255,255,.03); }
.ta-flow .ta-step { grid-row: span 2; font-family: var(--font-mono); font-size: 12px; color: #7f8ba3; }
.ta-flow strong { font-size: clamp(20px, 2vw, 26px); letter-spacing: -.02em; line-height: 1.2; color: #fff; }
.ta-flow li > span:last-child { font-size: 14px; color: #a9b5cc; }
.ta-flow li.is-on { border-color: rgba(51,113,255,.7); background: rgba(51,113,255,.16); }
.ta-flow li.is-on strong { color: #93b4ff; }
/* the site-wide card hover turns every <strong> blue; the diagram keeps its own colours */
.ks-card-link:hover .ta-flow strong { color: #fff; }
.ks-card-link:hover .ta-flow li.is-on strong { color: #93b4ff; }
.ta-flow li.is-on .ta-step { color: #93b4ff; }
/* measurement: four bars, one highlighted */
.ta-bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; height: 116px; max-width: 400px; align-items: end; }
.ta-bars div { display: grid; grid-template-rows: 1fr auto; gap: 8px; height: 100%; }
.ta-bars i { align-self: end; width: min(100%, 44px); height: var(--h); border-radius: 5px 5px 2px 2px; background: rgba(255,255,255,.18); }
.ta-bars .is-on i { background: #3371ff; }
.ta-bars span { font-family: var(--font-mono); font-size: 11px; color: #a9b5cc; }
.ta-bars .is-on span { color: #fff; }
/* triage: observed / inferred / action */
.ta-verdict { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; color: #c7d0e0; }
.ta-verdict li { display: grid; grid-template-columns: 76px 1fr; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 9px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.ta-verdict em { font-style: normal; font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: #7f8ba3; }
.ta-verdict li.is-on { border-color: rgba(51,113,255,.7); background: rgba(51,113,255,.16); }
.ta-verdict li.is-on em { color: #93b4ff; }
@media (min-width: 1025px) {
  .resource-teasers { grid-template-columns: 1.3fr 1fr; gap: 28px; }
  .resource-teasers .rc-lead { grid-row: span 2; }
  .rc-lead .teaser-art { flex: 1; justify-content: flex-start; gap: 22px; padding: 28px; }
  .rc-lead .rc-body { flex: 0 0 auto; padding: 26px 28px 28px; }
  .rc-lead h3 { font-size: 24px; letter-spacing: -.02em; }
  .rc-lead .ta-flow { flex: 1; grid-auto-rows: 1fr; gap: 12px; }
  .rc-lead .ta-flow li { align-content: center; padding: 18px 20px; }
}
:root[data-theme="dark"] .teaser-art { background: #0d1a36; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .teaser-art { background: #0d1a36; } }

/* Contour rings retired (25 Sep 2026): every decorated panel now uses the same dot grid as the
   "Deliver KeenSec to your customers" card, fading in from one corner. */
.branded-workspace::before, .faq-section::before, .demo-layout::before, .tile-demo::before, .lms-new::before, .home-lab-launch::before {
  inset: 0 !important; width: auto !important; height: auto !important; aspect-ratio: auto !important; transform: none !important; filter: none !important;
  background: var(--deco-dots) !important; background-size: 24px 24px !important; background-position: center top !important; }
/* Light sections: dots gather on the side the decoration sat on before */
/* Branded workspace sits right under the dotted proof band on the homepage: keep it plain so the dots don't repeat */
.branded-workspace::before { display: none; }
.faq-section::before, .demo-layout::before { opacity: .6; -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 38%); mask-image: linear-gradient(90deg, #000 0%, transparent 38%); }
/* Dark tiles: fainter, same corner fade as the partner card */
.tile-demo::before, .lms-new::before, .home-lab-launch::before { opacity: .35; -webkit-mask-image: linear-gradient(115deg, transparent 20%, #000 70%); mask-image: linear-gradient(115deg, transparent 20%, #000 70%); }
:root[data-theme="dark"] .faq-section::before, :root[data-theme="dark"] .demo-layout::before { opacity: .35; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .faq-section::before, :root:not([data-theme="light"]) .demo-layout::before { opacity: .35; } }