/* ============================================================
   AISoltrics — Enterprise Navy Design System (v2, blueprint 1.0)
   Deep navy / charcoal, restrained electric-blue accents.
   Copyright (c) 2026 AISoltrics Technologies Inc.
   ============================================================ */
:root {
  --navy-950: #060D1A;
  --navy-900: #0A1628;
  --navy-800: #0F2038;
  --navy-700: #16304F;
  --navy-600: #1E4066;
  --blue: #2563EB;
  --blue-bright: #3B82F6;
  --gold: #C9A227;
  --blue-soft: #DBEAFE;
  --ink: #0F1B2D;
  --muted: #5B6B82;
  --muted-2: #8A97AB;
  --bg: #FFFFFF;
  --bg-soft: #F5F7FA;
  --bg-cool: #EEF2F7;
  --border: #E2E8F0;
  --border-strong: #CBD5E1;
  --danger: #DC2626;
  --radius: 12px;
  --radius-lg: 18px;
  --shadow: 0 1px 2px rgba(10, 22, 40, 0.06), 0 4px 16px rgba(10, 22, 40, 0.08);
  --shadow-lg: 0 8px 32px rgba(10, 22, 40, 0.14);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --max: 1180px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--blue-bright); outline-offset: 2px; border-radius: 4px; }

.container { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.section { padding: 88px 0; }
.section.alt { background: var(--bg-soft); }
.section.navy { background: var(--navy-900); color: #EAF0F8; }
.section.navy h2, .section.navy h3 { color: #fff; }
.section.navy p { color: #B9C6DA; }

h1, h2, h3, h4 { line-height: 1.22; letter-spacing: -0.02em; color: var(--navy-900); font-weight: 700; }
h1 { font-size: clamp(1.95rem, 3.4vw, 2.6rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 2.4vw, 1.85rem); margin-bottom: 0.7rem; }
h3 { font-size: 1.2rem; margin-bottom: 0.5rem; }
p.lead, .lead { font-size: 1.15rem; color: var(--muted); max-width: 720px; }

.kicker {
  display: inline-block; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue);
  margin-bottom: 0.9rem;
}
.section-head { max-width: 760px; margin-bottom: 3rem; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p { color: var(--muted); font-size: 1.08rem; }

/* ---------- Header / nav ---------- */
/* 2026-10-20 (CEO order): header compacted — 60px bar, 34px logo,
   spacing audited onto a 0.25rem rhythm; stacked gap+margin before the
   CTA removed; anchor scroll offsets and the mobile nav offset follow
   the 16px height reduction. */
.site-header {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.header-inner { display: flex; align-items: center; gap: 2rem; height: 76px; }
.brand { display: flex; align-items: center; gap: 0.7rem; }
.brand:hover { text-decoration: none; }
.brand img { height: 54px; width: auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-size: 1.35rem; font-weight: 800; color: var(--navy-900); letter-spacing: -0.02em; }
.brand-name .ai { color: var(--blue); }
.brand-tag { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-2); }
.nav { display: flex; align-items: center; gap: 1.5rem; margin-left: auto; }
.nav-list { display: flex; align-items: center; gap: 0.25rem; list-style: none; }
.nav-item { position: relative; }
.nav-link {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.5rem 0.625rem; font-weight: 500; font-size: 0.95rem; color: var(--ink);
  border-radius: 8px; white-space: nowrap;
}
.nav-link:hover { color: var(--blue); background: var(--bg-soft); text-decoration: none; }
.nav-link[aria-current="page"] { color: var(--blue); font-weight: 600; }
/* 2026-10-21 (CEO order): the current Home link alone takes the base
   nav ink, not the current-page blue. */
.nav-link[href="/"][aria-current="page"] { color: var(--ink); }
.caret {
  width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; opacity: 0.6;
}
.dropdown {
  display: none; position: absolute; top: 100%; left: 0; min-width: 250px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(10, 22, 40, 0.08), 0 2px 8px rgba(10, 22, 40, 0.04);
  padding: 0.5rem; list-style: none; z-index: 1001;
}
.nav-item:hover .dropdown, .nav-item:focus-within .dropdown { display: block; }
.dropdown a { display: block; padding: 0.5rem 0.75rem; border-radius: 8px; color: var(--ink); font-size: 0.875rem; font-weight: 400; }
.dropdown a:hover { background: var(--bg-soft); color: var(--blue); text-decoration: none; }
.nav-toggle { display: none; background: none; border: 1px solid var(--border); border-radius: 8px; font-size: 1.3rem; padding: 0.25rem 0.75rem; cursor: pointer; color: var(--navy-900); }

/* ---------- Buttons ----------
   CEO order 2026-10-16: EVERY button on the website takes the shipped
   tab-grid button format (PR #18, .page-nav-grid a below) — a rich
   blue gradient fill (deep --navy-700 into --blue, brightening toward
   --blue-bright), a 2px gold (--gold #C9A227) border framing every
   button at rest, white semibold text, and a soft drop shadow; hover
   brightens the gradient, deepens the shadow, and lifts the button
   1px. The format applies to ALL variants alike (primary, ghost,
   light, outline-light, gold, secondary), so no button on any page
   renders pale or outline-only. Geometry (padding, font size) is
   unchanged; the gold frame replaces the old 1px transparent border.
   (.btn-gold and .btn-secondary were previously used in markup with
   no rules defined — they are defined here for the first time.) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.85rem 1.7rem; border-radius: 10px; font-weight: 600; font-size: 1rem;
  border: 2px solid var(--gold); cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  text-align: center;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary, .btn-ghost, .btn-light, .btn-outline-light, .btn-gold, .btn-secondary {
  background: linear-gradient(135deg, var(--navy-700) 0%, var(--blue) 58%, var(--blue-bright) 125%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(10, 22, 40, 0.22), 0 2px 6px rgba(37, 99, 235, 0.30);
}
.btn-primary:hover, .btn-ghost:hover, .btn-light:hover, .btn-outline-light:hover, .btn-gold:hover, .btn-secondary:hover {
  background: linear-gradient(135deg, var(--navy-600) 0%, var(--blue-bright) 55%, #60A5FA 125%);
  color: #fff;
  box-shadow: 0 8px 22px rgba(10, 22, 40, 0.26), 0 4px 10px rgba(37, 99, 235, 0.38);
}
.btn-sm { padding: 0.6rem 1.15rem; font-size: 0.9rem; }
.btn:disabled { opacity: 0.6; cursor: wait; transform: none; }

/* ---------- Hero (light blue-to-purple wash) ----------
   CEO FINAL DECISION 2026-10-17: the page-top hero band on EVERY
   screen changes from dark navy blue to the attached light format —
   a horizontal wash, near-white at the left running through pale
   blue into a blue-lavender ground at the right, deepened by three
   layered radial washes (a purple glow top-right, a sky-blue
   deepening at the top-right corner, a periwinkle wave bottom-
   right). The SAME background stack and the same dark-on-light
   text treatment apply to .hero (home) and .page-hero (every
   inner page) below, so all screens share one format; no text,
   content, or layout changes — color treatment only. Values are
   exactly those of the approved home-page proof variant
   (home-color-3-blue-to-purple-light). Hero text: headings solid
   var(--navy-900) #0A1628 with the accent word kept in the site
   blue gradient (.grad), sub/lead #475569, eyebrow/kicker gold-
   dark #9A7B1C / var(--blue). NOT changed: the white top nav, the
   navy closing .cta-band, the dark .svc-panel section panels,
   and the footer stay navy by design. */
.hero {
  background:
    radial-gradient(820px 420px at 96% 115%, rgba(123,140,252,0.28) 0%, rgba(123,140,252,0) 65%),
    radial-gradient(900px 520px at 88% -10%, rgba(167,139,219,0.38) 0%, rgba(167,139,219,0) 62%),
    radial-gradient(760px 480px at 100% 0%, rgba(110,168,248,0.35) 0%, rgba(110,168,248,0) 60%),
    linear-gradient(90deg, #FFFFFF 0%, #F3F7FE 30%, #DCE9FB 62%, #B7C6F4 100%);
  color: #0A1628; padding: 72px 0 64px; position: relative; overflow: hidden;
}
.hero-grid { display: grid; grid-template-columns: 1fr; }
.hero .container { position: relative; z-index: 1; }
.home-hero-art { position: absolute; top: 0; right: 0; height: 100%; width: 58%; max-width: 920px; object-fit: cover; object-position: center right; pointer-events: none; -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0, #000 150px); mask-image: linear-gradient(to right, rgba(0,0,0,0) 0, #000 150px); }
@media (max-width: 720px) { .home-hero-art { width: 100%; opacity: 0.25; object-position: center right; -webkit-mask-image: none; mask-image: none; } }
.hero-copy { max-width: 780px; }
.hero .kicker { color: var(--blue); }
.hero h1 { color: #0A1628; margin-bottom: 1.2rem; }
.hero-sub { color: #475569; font-size: 1.12rem; max-width: 560px; margin-bottom: 2rem; }
.hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.hero-support { color: #5B6B82; font-size: 0.95rem; }
.hero-support a { color: #2563EB; font-weight: 600; }
.hero-micro { display: flex; gap: 1.4rem; flex-wrap: wrap; margin-top: 1.8rem; font-size: 0.85rem; color: #5B6B82; }
.hero-micro span { display: inline-flex; align-items: center; gap: 0.45rem; }
.hero-micro svg { flex: none; }
.grad { background: linear-gradient(100deg, var(--blue-bright), #60A5FA); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-logo img { width: 72px; border-radius: 14px; margin-bottom: 1rem; }
.hero-tagline { font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; color: #9A7B1C; margin-bottom: 1rem; font-weight: 700; }

/* ---------- Cards / grids ---------- */
.grid { display: grid; gap: 1.5rem; }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 1.8rem; box-shadow: var(--shadow); transition: transform 0.18s ease, box-shadow 0.18s ease;
  display: flex; flex-direction: column; gap: 0.7rem;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card h3, .card h2 { font-size: 1.12rem; margin-bottom: 0.5rem; }
.card h3 a, .card h2 a { color: var(--navy-900); }
.card h3 a:hover, .card h2 a:hover { color: var(--blue); }
.card p { color: var(--muted); font-size: 0.96rem; flex: 1; }
.card .card-link { font-weight: 600; font-size: 0.95rem; margin-top: 0.4rem; }
.card-icon {
  width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: var(--blue-soft); color: var(--blue); margin-bottom: 0.4rem;
}
.card-icon svg { width: 24px; height: 24px; }
.section.navy .card { background: var(--navy-800); border-color: var(--navy-700); }
.section.navy .card h3 a, .section.navy .card h3, .section.navy .card h2 a, .section.navy .card h2 { color: #fff; }
.section.navy .card p { color: #B9C6DA; }

/* ---------- Trust strip ---------- */
.trust-strip { border-bottom: 1px solid var(--border); background: #fff; padding: 2.2rem 0; }
.trust-items { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.trust-item { display: flex; gap: 0.9rem; align-items: flex-start; max-width: 320px; }
.trust-item svg { flex: none; width: 30px; height: 30px; color: var(--blue); margin-top: 2px; }
.trust-item strong { display: block; color: var(--navy-900); font-size: 0.98rem; }
.trust-item span { color: var(--muted); font-size: 0.9rem; }

/* ---------- Delivery steps ---------- */
.steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; counter-reset: step; }
.step, .steps li {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.4rem 1.1rem; text-align: center; position: relative; list-style: none;
}
.step::before, .steps li::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  display: block; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; color: var(--blue); margin-bottom: 0.5rem;
}
.step strong, .steps li strong { display: block; color: var(--navy-900); margin-bottom: 0.3rem; font-size: 0.98rem; }
.step span, .steps li span { font-size: 0.86rem; color: var(--muted); }

/* ---------- Flow steps (button-pill model for prose pages) ---------- */
.flow-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem 0.4rem; list-style: none; margin: 1.1rem 0 1.3rem !important; padding: 0; counter-reset: fs; }
.flow-steps li {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: #fff; border: 1.5px solid var(--navy-900); border-radius: 999px;
  padding: 0.42rem 0.95rem 0.42rem 0.45rem; font-weight: 700; font-size: 0.92rem; color: var(--navy-900);
  box-shadow: 0 1px 3px rgba(10, 25, 47, 0.10); white-space: nowrap;
}
.flow-steps li::before {
  counter-increment: fs; content: counter(fs, decimal-leading-zero);
  background: var(--blue); color: #fff; border-radius: 999px;
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; padding: 0.18rem 0.42rem;
}
.flow-steps li:not(:last-child)::after { content: "\2192"; color: var(--blue); font-weight: 800; margin-left: 0.55rem; }

/* ---------- Fact tiles + image captions (About) ---------- */
.fact { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.2rem; }
.fact-label { display: block; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); margin-bottom: 0.35rem; }
.fact-value { font-weight: 700; color: var(--navy-900); font-size: 0.97rem; line-height: 1.45; }
.img-caption { text-align: center; color: var(--muted); font-size: 0.85rem; margin: 0.6rem 0 0; }
.section.navy .step { background: var(--navy-800); border-color: var(--navy-700); }
.section.navy .step strong { color: #fff; }
.section.navy .step span { color: #B9C6DA; }

/* ---------- Page hero / prose ---------- */
.page-hero {
  background:
    radial-gradient(820px 420px at 96% 115%, rgba(123,140,252,0.28) 0%, rgba(123,140,252,0) 65%),
    radial-gradient(900px 520px at 88% -10%, rgba(167,139,219,0.38) 0%, rgba(167,139,219,0) 62%),
    radial-gradient(760px 480px at 100% 0%, rgba(110,168,248,0.35) 0%, rgba(110,168,248,0) 60%),
    linear-gradient(90deg, #FFFFFF 0%, #F3F7FE 30%, #DCE9FB 62%, #B7C6F4 100%);
  color: #0A1628; padding: 72px 0 64px;
}
.page-hero h1 { color: #0A1628; margin: 0.8rem 0 1rem; }
.page-hero .lead { color: #475569; }
.breadcrumb { font-size: 0.88rem; color: #5B6B82; }
.breadcrumb a { color: #2563EB; }
.prose { max-width: 780px; }
.prose h2 { margin: 2.2rem 0 0.8rem; font-size: 1.45rem; }
.prose h3 { margin: 1.6rem 0 0.5rem; }
.prose p { margin-bottom: 1.1rem; color: #33415C; font-size: 1.0625rem; }
.prose ul, .prose ol { margin: 0 0 1.2rem 1.4rem; color: #33415C; }
.prose li { margin-bottom: 0.45rem; }
.prose img { border-radius: var(--radius); margin: 1.5rem 0; }
.workflow-chain {
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.2rem 1.4rem; font-size: 0.95rem; color: var(--navy-800); margin: 1.2rem 0; line-height: 2;
}
.cap-list { list-style: none; margin-left: 0 !important; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1.5rem; }
.cap-list li { padding-left: 1.6rem; position: relative; }
.cap-list li::before { content: "✓"; position: absolute; left: 0; color: var(--blue); font-weight: 700; }
.related-box { background: var(--blue-soft); border-radius: var(--radius); padding: 1.4rem 1.6rem; margin-top: 2rem; }
.related-box h3 { font-size: 1.05rem; }
.related-box ul { margin: 0.5rem 0 0 1.2rem; }

/* ---------- Anchored one-page sections (services + solutions, 2026-10-14) ---------- */
.anchor-block { border-top: 1px solid var(--border); padding: 3.2rem 0; scroll-margin-top: 96px; }
.anchor-block:first-child { border-top: none; padding-top: 0; }
.anchor-block:last-child { padding-bottom: 0; }
/* Services only (CEO order 2026-10-20 ~22:13 IST): the hairline above
   each anchored service section is removed on the Services page. The
   shared .anchor-block rule above is untouched, so Solutions keeps its
   dividers. Padding is unchanged on Services — the 3.2rem section rhythm
   stands; the :first-child companion's border-top:none is subsumed by
   this rule for Services (its padding-top:0 still applies). */
.services-page .anchor-block { border-top: none; }
.jump-nav { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.jump-nav .pill { text-decoration: none; }
.jump-nav .pill:hover { background: var(--blue); color: #fff; }

/* Intro navigation grids (Services + Solutions, 2026-10-15).
   v1 was flat blue text rows with a gold tick; the CEO found them pale
   (2026-10-15 revision): the links are now filled buttons — a rich blue
   gradient echoing the logo (deep --navy-700 into --blue, brightening
   toward --blue-bright), white semibold labels, and a 2px gold (--gold
   #C9A227) border framing every button at rest. Depth comes from a soft
   drop shadow; hover/focus brightens the gradient, deepens the shadow,
   and lifts the button 1px. Arrows removed (CEO order, 2026-10-15). */
.page-nav-grid { display: grid; gap: 0.75rem; }
.services-nav-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.solutions-nav-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.page-nav-grid a {
  display: flex; align-items: center;
  padding: 0.875rem 1rem; border: 2px solid var(--gold); border-radius: 10px;
  background: linear-gradient(135deg, var(--navy-700) 0%, var(--blue) 58%, var(--blue-bright) 125%);
  color: #fff; font-size: 0.875rem; font-weight: 600; line-height: 1.4;
  box-shadow: 0 4px 14px rgba(10, 22, 40, 0.22), 0 2px 6px rgba(37, 99, 235, 0.30);
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.page-nav-grid a:hover, .page-nav-grid a:focus-visible {
  color: #fff; text-decoration: none;
  background: linear-gradient(135deg, var(--navy-600) 0%, var(--blue-bright) 55%, #60A5FA 125%);
  box-shadow: 0 8px 22px rgba(10, 22, 40, 0.26), 0 4px 10px rgba(37, 99, 235, 0.38);
  transform: translateY(-1px);
}
@media (max-width: 900px) {
  .services-nav-grid, .solutions-nav-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .services-nav-grid, .solutions-nav-grid { grid-template-columns: 1fr; }
}

/* Services/Solutions review typography (page-scoped, 2026-10-15).
   The hero-lead override (1.125rem) was removed in the 2026-10-21
   unification (C8): the global .lead size (1.15rem) now governs the
   Services and Solutions heroes like every other page. */
.page-intro-head .kicker { font-size: 0.75rem; font-weight: 600; }
.page-intro-head h2 { font-size: 1.85rem; font-weight: 600; }
.page-intro-head p { font-size: 1rem; }
.services-page .svc-eyebrow, .solutions-page .svc-eyebrow { font-size: 0.75rem; font-weight: 600; }
.services-page .svc-text .lead, .solutions-page .svc-text .lead { font-size: 1rem; }

/* Integrations page review (page-scoped, 2026-10-15). Visual table from the
   CEO-shared review: section headings 27px semibold, descriptions 16px muted
   navy-gray, card headings 19px semibold, card descriptions 15px/1.6, card
   borders very light gray-blue on white, 64px between major blocks. Family
   cards sit on a 6-column track (three over two, equal heights); the
   process steps read as connected stages, not clickable pills; cards carry
   consistent blue line icons. Family copy carries no absolute claims.
   2026-10-21 unification: section padding levelled 4rem -> 5.5rem (the
   88px site standard, C9), and the scoped heading sizes (H2 1.6875rem,
   card H3 1.1875rem) were removed so the global heading scale governs
   this page like every other (C7). The review's other values stand. */
.integrations-page main .section { padding-top: 5.5rem; padding-bottom: 5.5rem; }
.integrations-page .section-head { margin-bottom: 2.4rem; }
.integrations-page .section-head p { font-size: 1rem; }
.integrations-page .int-desc { font-size: 1.0625rem; color: var(--muted); line-height: 1.65; }
.integrations-page .int-block { margin-top: 4rem; }
.integrations-page .why-card { border-color: #E6EDF5; padding: 1.5rem 1.6rem 1.35rem; }
.integrations-page .why-card h3 { margin-bottom: 0.5rem; }
.integrations-page .why-card p { font-size: 0.9375rem; line-height: 1.6; }
.integrations-page .card-icon { display: inline-flex; color: var(--blue); margin-bottom: 0.8rem; }
.integrations-page .card-icon svg { width: 26px; height: 26px; }
.integrations-page .int-families-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.5rem; }
.integrations-page .int-families-grid .why-card { grid-column: span 2; }
.integrations-page .int-families-grid .why-card:nth-child(4),
.integrations-page .int-families-grid .why-card:nth-child(5) { grid-column: span 3; }
.integrations-page .int-steps { position: relative; margin-top: 2.1rem; }
/* Connector line on the block wrapper (a ::before on the grid container
   itself can be mis-placed as a grid item by some renderers): a 2px
   gradient rule spanning the first-to-last step centers. */
.integrations-page .int-steps::before {
  content: ""; position: absolute; top: 1.3rem; left: 12.5%; right: 12.5%; height: 2px;
  background: linear-gradient(90deg, #BFD3F5, var(--blue) 18%, var(--blue) 82%, #BFD3F5);
  border-radius: 2px;
}
.integrations-page .flow-steps {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 2.75rem;
  position: relative; margin: 0 !important;
}
.integrations-page .flow-steps li {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.7rem;
  background: transparent; border: none; border-radius: 0; box-shadow: none;
  padding: 0; white-space: normal; font-weight: 600; font-size: 0.98rem; position: relative;
}
.integrations-page .flow-steps li::before {
  counter-increment: fs; content: counter(fs, decimal-leading-zero);
  display: flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; padding: 0; border-radius: 50%;
  background: #fff; border: 2px solid var(--blue); color: var(--blue);
  font-size: 0.85rem; font-weight: 800; letter-spacing: 0.05em; position: relative; z-index: 1;
}
.integrations-page .flow-steps li:not(:last-child)::after {
  content: "\2192"; position: absolute; top: 0.62rem; right: -1.85rem; margin: 0;
  color: var(--gold); font-size: 1.05rem; font-weight: 700;
}
@media (max-width: 900px) {
  .integrations-page .int-families-grid .why-card,
  .integrations-page .int-families-grid .why-card:nth-child(4),
  .integrations-page .int-families-grid .why-card:nth-child(5) { grid-column: span 6; }
  .integrations-page .flow-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.8rem 2.75rem; }
  .integrations-page .int-steps::before,
  .integrations-page .flow-steps li:not(:last-child)::after { display: none; }
}
@media (max-width: 560px) {
  .integrations-page .flow-steps { grid-template-columns: 1fr; }
}

/* ---------- Section rows, eyebrows + crafted panels (2026-10-14) ---------- */
.svc-eyebrow { display: block; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #8C6D1F; margin-bottom: 0.55rem; }
/* Section rows are flex, not grid, and the columns use fixed calc()
   bases rather than grow shares. The pair must always read as one
   composed row that fills the standard content width: text takes 55%
   of the row, the panel 45%, beside a single 36px gutter — text
   right ⇔ panel left, text left ⇔ panel right, with no empty space
   beside either. Alternation is flex-direction, so the DOM order —
   text first — stays the reading order on every row.
   Why not grid: the earlier grid version's fr tracks were sized to
   content by the print renderer, stranding the text as a narrow
   ribbon and floating the panel at the far edge with a void between.
   Why not flex grow shares: the print renderer double-counts the
   panel's horizontal padding + border (48px + 2px = 50px) when it
   distributes free space to growing items, under-filling the row by
   exactly that much and stranding the dead 50px at the row's end (or
   between the columns in flipped rows). A fixed calc basis — share
   of the row minus half the gutter — never enters that distribution
   path and sizes identically in browsers and in print.
   The panel additionally sizes by content-box with its basis reduced
   by that same 50px: in flipped (row-reverse) rows the print renderer
   displaces the panel by its phantom padding + border when placing
   it, so the panel's basis must describe its content box and let the
   real padding + border (2 x 24px + 2 x 1px = 50px, see .svc-panel)
   bring the outer box to exactly 45% - 18px. If the panel's padding
   or border ever changes, change the 68px here by the same amount. */
.svc-row { display: flex; gap: 36px; align-items: flex-start; }
.svc-row.flip { flex-direction: row-reverse; }
.svc-text { flex: 0 0 calc(55% - 18px); min-width: 0; }
.svc-row .svc-panel { box-sizing: content-box; flex: 0 0 calc(45% - 68px); min-width: 0; }
.svc-text .pill { margin-bottom: 0.6rem; }
/* Deliverables inside a section row read as a single checklist column;
   the two-column cap-list is only for full-width contexts. */
.svc-text .cap-list { grid-template-columns: 1fr; }
.svc-panel {
  position: sticky; top: 100px;
  background: linear-gradient(165deg, var(--navy-800) 0%, var(--navy-950) 100%);
  border: 1px solid var(--navy-700); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); color: #C7D3E6;
  padding: 1.45rem 1.5rem 1.1rem; font-size: 0.92rem;
}
.svc-panel-head { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.9rem; }
.p-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; border-top: 1px solid rgba(255, 255, 255, 0.09); }
.p-label { color: #9FB0C9; }
.p-name { color: #fff; font-weight: 600; }
.p-value { font-weight: 700; color: #fff; white-space: nowrap; }
.p-rank { color: var(--gold); font-weight: 800; margin-right: 0.5rem; }
.p-chips { display: flex; gap: 0.35rem; flex-wrap: wrap; justify-content: flex-end; }
.p-chip { display: inline-block; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; padding: 0.24rem 0.6rem; border-radius: 999px; background: rgba(59, 130, 246, 0.16); color: #A9C8FF; border: 1px solid rgba(59, 130, 246, 0.4); white-space: nowrap; }
.p-chip.gold { background: rgba(201, 162, 39, 0.14); color: #E8CD7A; border-color: rgba(201, 162, 39, 0.45); }
.p-chip.green { background: rgba(34, 197, 94, 0.14); color: #8FE3AE; border-color: rgba(34, 197, 94, 0.4); }
.p-chip.grey { background: rgba(255, 255, 255, 0.07); color: #9FB0C9; border-color: rgba(255, 255, 255, 0.18); }
.p-chip.sm { font-size: 0.62rem; padding: 0.18rem 0.5rem; }
.p-metric { padding: 0.55rem 0; border-top: 1px solid rgba(255, 255, 255, 0.09); }
.p-metric-top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; color: #9FB0C9; }
.p-metric-top strong { color: #fff; font-size: 1.05rem; }
.p-bar { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, 0.12); margin-top: 0.45rem; overflow: hidden; }
.p-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--blue-bright), var(--gold)); }
.p-chart { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; padding: 0.7rem 0.8rem 0.4rem; margin-bottom: 0.5rem; }
.p-chart svg { width: 100%; height: auto; display: block; }
.p-query { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 10px; padding: 0.75rem 0.9rem; color: #fff; font-weight: 600; margin-bottom: 0.5rem; }
.p-query .p-q { display: inline-block; background: var(--blue); color: #fff; font-size: 0.68rem; font-weight: 800; border-radius: 6px; padding: 0.14rem 0.45rem; margin-right: 0.55rem; vertical-align: 2px; }
.p-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-bottom: 0.6rem; }
.p-flow .p-stage { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.16); color: #EAF0F8; font-weight: 600; font-size: 0.82rem; padding: 0.4rem 0.7rem; border-radius: 8px; }
.p-flow .p-arrow { color: var(--gold); font-weight: 800; }
.svc-panel-tag { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid rgba(255, 255, 255, 0.09); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #7488A5; text-align: right; }
@media (max-width: 900px) {
  .svc-row, .svc-row.flip { flex-direction: column; align-items: stretch; gap: 1.6rem; }
  .svc-text, .svc-row .svc-panel { flex: none; }
  .svc-panel { position: static; order: -1; }
}

/* ---------- How we work — step cards (2026-10-14) ---------- */
.step-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin: 1.4rem 0 1.2rem; }
.step-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem 1.4rem; box-shadow: var(--shadow); }
.step-card .step-num { display: block; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.14em; color: var(--blue); margin-bottom: 0.55rem; }
.step-card h3 { font-size: 1.08rem; margin-bottom: 0.45rem; }
.step-card p { color: var(--muted); font-size: 0.95rem; }
@media (max-width: 1024px) { .step-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .step-cards { grid-template-columns: 1fr; } }

/* ---------- Forms ---------- */
/* Form card: levelled to the form family's current language in the
   2026-10-21 unification (C3) — radius 22px, border #BCD3F6, padding
   2.4rem, matching the Contact review's form card. */
.form-card { background: #fff; border: 1px solid #BCD3F6; border-radius: 22px; box-shadow: var(--shadow-lg); padding: 2.4rem; max-width: 860px; margin: 0 auto; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; }
.field { display: flex; flex-direction: column; }
.field.full { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: 0.92rem; margin-bottom: 0.45rem; color: var(--navy-900); }
/* Careers phone capture: country-code select + national number, one row.
   The select is enhanced by main.js into .cs-wrap; both shapes are sized. */
.phone-row { display: flex; gap: 0.6rem; }
.phone-row > select, .phone-row > .cs-wrap { flex: 0 1 11.5rem; min-width: 0; }
.phone-row > input { flex: 1 1 auto; min-width: 0; }
.field label .req { color: var(--danger); margin-left: 2px; }
.field input, .field select, .field textarea {
  padding: 0.8rem 1rem; border: 1px solid var(--border-strong); border-radius: 10px;
  font-size: 1rem; font-family: inherit; background: #fff; color: var(--ink); width: 100%;
}
/* Select text parity (CEO order 2026-10-19): a <select> does not inherit the
   page font like inputs do — engines substitute their own small control font
   (~13px) for the control and its drop-down list. Pin the select and its
   options to the inputs' exact size: 1rem (16px). */
.field select, .field select option { font-size: 1rem; }
.field textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted-2); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16); outline: none; }
.field .hint { font-size: 0.82rem; color: var(--muted-2); margin-top: 0.4rem; }
.error-msg { display: none; color: var(--danger); font-size: 0.85rem; margin-top: 0.4rem; font-weight: 500; }
.field-error { border-color: var(--danger) !important; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.14) !important; }

/* Custom dropdown for form selects (CEO order 2026-10-19): macOS draws a
   native <select>'s opened list itself, at a small system size, and ignores
   the page's font-size — the closed control was cured at 1rem by PR #36 but
   the opened list stayed small. The native select stays in the DOM as the
   single source of truth (same id/name/options/values); only when JS runs
   does main.js retire it visually (never display:none) inside .cs-wrap and
   render this custom control, whose list is real page text at 1rem on
   every system. Without JS the native select remains fully usable. */
.field select.cs-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.cs-wrap { position: relative; }
.cs-btn { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; width: 100%; padding: 0.8rem 1rem; border: 1px solid var(--border-strong); border-radius: 10px; font-size: 1rem; font-family: inherit; background: #fff; color: var(--ink); cursor: pointer; text-align: left; }
.cs-btn:focus-visible { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16); outline: none; }
.cs-btn:disabled { cursor: default; opacity: 0.6; }
.cs-btn .cs-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-chevron { flex: none; display: inline-flex; color: var(--muted-2, #667085); transition: transform 0.15s ease; }
.cs-wrap.open .cs-chevron { transform: rotate(180deg); }
.cs-list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 80; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 32px rgba(10, 22, 40, 0.08), 0 2px 8px rgba(10, 22, 40, 0.04); max-height: 260px; overflow-y: auto; padding: 0.35rem; }
.cs-list[hidden] { display: none; }
.cs-item { padding: 0.6rem 0.75rem; border-radius: 7px; font-size: 1rem; line-height: 1.35; color: var(--ink); cursor: pointer; }
.cs-item:hover, .cs-item.active { background: #EEF4FE; }
.cs-item.selected { font-weight: 600; color: var(--blue); }
.cs-item.disabled { color: var(--muted-2, #667085); cursor: default; }
.cs-item.disabled:hover, .cs-item.disabled.active { background: transparent; }
/* Error parity: main.js mirrors the paired select's .field-error onto the
   wrap as .cs-error, so the invalid-submit state looks exactly as before. */
.cs-wrap.cs-error .cs-btn { border-color: var(--danger) !important; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.14) !important; }
.consent-row { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.9rem; color: var(--muted); }
.consent-row input { margin-top: 0.3rem; width: 18px; height: 18px; accent-color: var(--blue); flex: none; }
.form-thanks { display: none; text-align: center; padding: 2rem 1rem; }
.form-thanks h3 { font-size: 1.4rem; margin-bottom: 0.7rem; }
.check-icon { width: 60px; height: 60px; border-radius: 50%; background: #DCFCE7; color: #15803D; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1.2rem; }

/* demo slot picker */
.slot-picker { display: flex; flex-direction: column; gap: 0.8rem; max-height: 300px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; padding: 1rem; background: var(--bg-soft); }
.slot-day { font-weight: 700; font-size: 0.92rem; color: var(--navy-900); margin-top: 0.3rem; }
.slot-day .hint { font-weight: 400; color: var(--muted-2); font-size: 0.8rem; }
.slot-times { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.4rem; }
.slot-btn { padding: 0.5rem 0.9rem; border: 1px solid var(--border-strong); border-radius: 9px; background: #fff; color: var(--ink); font-size: 0.88rem; cursor: pointer; transition: all 0.12s ease; }
.slot-btn:hover { border-color: var(--blue); color: var(--blue); }
.slot-btn.selected { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; }

/* ---------- Showcase / visuals ---------- */
.showcase-frame { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: #fff; }
.showcase-frame img { width: 100%; }
.diagram { background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem; text-align: center; }
.diagram svg { max-width: 100%; height: auto; }

/* ---------- CTA band ---------- */
/* 2026-10-20 (CEO order): the closing band takes the light treatment of the
   Services "Start a conversation" box (.related-box) — blue-soft ground,
   navy heading, ink paragraph, left-aligned — replacing the dark navy band. */
.cta-band { background: var(--blue-soft); color: var(--ink); border-radius: var(--radius); padding: 4rem 3rem; text-align: left; position: relative; overflow: hidden; }
.cta-band h2 { color: var(--navy-900); margin-bottom: 0.8rem; }
.cta-band p { color: var(--ink); margin: 0 0 2rem; font-size: 1.08rem; }
.cta-band .hero-ctas { justify-content: flex-start; margin-bottom: 0; }

/* ---------- Footer ---------- */
/* 2026-10-20 (CEO order): footer compacted — top padding 72px -> 40px,
   logo chip 248px -> 176px, grid gaps/padding tightened, the address
   paragraph's dead bottom margin removed; spacing on a 0.25rem rhythm. */
.site-footer { background: var(--navy-950); color: #B9C6DA; padding: 40px 0 0; font-size: 0.94rem; }
.footer-grid { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1.6rem; padding-bottom: 1.6rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0.5rem 2.25rem; padding-top: 0.75rem; }
.footer-links a { color: #B9C6DA; font-weight: 600; }
.footer-links a:hover { color: #fff; text-decoration: none; }
/* Storefront row (founder order 2026-10-25): one extra footer row under the
   main links — Gumroad / Payhip / Buy Me a Coffee / Ko-fi. */
.footer-stores { align-items: center; border-top: 1px solid rgba(185,198,218,.18); margin-top: .5rem; padding-top: 1rem; padding-bottom: 1.25rem; }
.footer-stores-label { color: #8FA1BC; font-weight: 600; }
.footer-brand img { width: 176px; max-width: 100%; height: auto; background: #fff; padding: 8px 12px; border-radius: 12px; margin-bottom: 0.8rem; }
.footer-brand p { margin-bottom: 0; font-size: 0.9rem; }
.footer-address { font-size: 0.86rem; color: #8FA1BC; }
.footer-col h3, .footer-col h4 { color: #fff; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 1rem; }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 0.55rem; }
.footer-col a { color: #B9C6DA; }
.footer-col a:hover { color: #fff; text-decoration: none; }
.footer-bottom { border-top: 1px solid var(--navy-700); padding: 1rem 0; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: 0.85rem; color: #8FA1BC; }

/* ---------- Chat widget ---------- */
#ai-chat-root { position: fixed; right: 22px; bottom: 22px; z-index: 9999; font-family: var(--font); }
#ai-chat-fab { width: 58px; height: 58px; border-radius: 50%; border: none; cursor: pointer; background: linear-gradient(135deg, var(--navy-800), var(--blue)); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(37, 99, 235, 0.45); transition: transform 0.15s ease; }
#ai-chat-fab:hover { transform: scale(1.07); }
#ai-chat-panel { position: absolute; right: 0; bottom: 70px; width: 340px; max-height: 480px; display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--border-strong); border-radius: 14px; box-shadow: var(--shadow-lg); }
#ai-chat-panel[hidden] { display: none; }
#ai-chat-head { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1rem; background: linear-gradient(135deg, var(--navy-900), var(--blue)); color: #fff; font-size: 0.95rem; }
#ai-chat-close { background: none; border: none; color: #fff; font-size: 1.4rem; cursor: pointer; line-height: 1; }
#ai-chat-msgs { padding: 1rem; overflow-y: auto; display: flex; flex-direction: column; gap: 0.6rem; min-height: 220px; max-height: 340px; }
.ai-msg { max-width: 85%; padding: 0.6rem 0.85rem; border-radius: 12px; font-size: 0.9rem; line-height: 1.45; }
.ai-bot { background: var(--bg-soft); color: var(--ink); align-self: flex-start; border: 1px solid var(--border); }
.ai-user { background: var(--blue); color: #fff; align-self: flex-end; }
#ai-chat-inputrow { display: flex; gap: 0.5rem; padding: 0.75rem; border-top: 1px solid var(--border); }
#ai-chat-input { flex: 1; padding: 0.6rem 0.8rem; border: 1px solid var(--border-strong); border-radius: 9px; font-size: 0.9rem; }
#ai-chat-send { padding: 0.6rem 1rem; border: none; border-radius: 9px; background: var(--blue); color: #fff; font-weight: 600; cursor: pointer; }

/* ---------- Misc ---------- */
.pill { display: inline-block; font-size: 0.78rem; font-weight: 600; padding: 0.3rem 0.8rem; border-radius: 999px; background: var(--blue-soft); color: var(--blue); }
.pill.prototype { background: #FEF3C7; color: #92400E; }

/* Copyright (c) 2026 AISoltrics Technologies Inc. All rights reserved. */
/* ---------- Homepage blueprint sections ---------- */
.hero-eyebrow { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.18em; color: #9A7B1C; text-transform: uppercase; margin-bottom: 1.2rem; }
.hero-micro { margin-top: 1.2rem; font-size: 0.95rem; }
.hero-micro a { color: #2563EB; text-decoration: underline; text-underline-offset: 3px; }
.flow-diagram { display: flex; align-items: center; justify-content: center; gap: 0.6rem; flex-wrap: wrap; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: var(--radius-lg); padding: 2rem 1.5rem; }
.flow-node { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: #fff; font-weight: 600; font-size: 0.9rem; padding: 0.8rem 1.2rem; border-radius: 10px; }
.flow-arrow { color: var(--blue); font-size: 1.4rem; font-weight: 700; }
.flow-diagram.light { background: var(--bg-soft); border-color: var(--border); }
.flow-diagram.light .flow-node { background: #fff; border-color: var(--border); color: var(--navy-900); }
.trust-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.trust-list li strong { display: block; font-size: 1rem; color: var(--navy-900); margin-bottom: 0.25rem; }
.trust-list li span { font-size: 0.88rem; color: var(--muted); }
.why-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.8rem; }
.why-card h3 { margin-bottom: 0.6rem; color: var(--navy-900); }
.section-alt { background: var(--bg-soft); }
@media (max-width: 900px) { .trust-list { grid-template-columns: repeat(2, 1fr); } }
.article-meta { font-size: 0.86rem; color: var(--muted-2); display: flex; gap: 1rem; flex-wrap: wrap; }
.faq details { border: 1px solid var(--border); border-radius: 10px; padding: 1.1rem 1.3rem; margin-bottom: 0.8rem; background: #fff; }
.faq summary { font-weight: 600; cursor: pointer; color: var(--navy-900); }
.faq p { margin-top: 0.7rem; color: var(--muted); }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--navy-900); color: #fff; padding: 0.7rem 1.2rem; z-index: 2000; border-radius: 0 0 8px 0; }
.skip-link:focus { left: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { gap: 1.5rem; }
  .hero-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .brand img { height: 46px; }
  .nav-toggle { display: block; margin-left: auto; }
  .nav {
    display: none; position: absolute; top: 76px; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--border); box-shadow: var(--shadow-lg);
    flex-direction: column; align-items: stretch; padding: 1rem 1.5rem 1.25rem; gap: 0;
  }
  .nav.open { display: flex; }
  .nav-list { flex-direction: column; align-items: stretch; }
  .nav-link { display: block; padding: 0.75rem 0.5rem; }
  .dropdown { position: static; display: block; box-shadow: none; border: none; border-left: 3px solid var(--border); border-radius: 0; margin: 0 0 0.5rem 0.5rem; padding: 0.25rem 0 0.25rem 0.5rem; }
  .nav-cta { margin: 0.75rem 0 0; }
  .nav-cta .btn { width: 100%; }
  .section { padding: 60px 0; }
  .grid.cols-3, .grid.cols-2 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { flex-direction: column; gap: 1.25rem; }
  .footer-links { padding-top: 0; }
  .form-grid { grid-template-columns: 1fr; }
  .form-card { padding: 1.6rem; }
  .cta-band { padding: 2.6rem 1.4rem; }
  .cap-list { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  #ai-chat-panel { width: calc(100vw - 44px); }
  .steps { grid-template-columns: 1fr; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* touch-opened dropdown state */
.nav-item.dd-open .dropdown { display: block; }

/* ---------- Job listings ---------- */
.job-list { max-width: 1000px; margin: 0 auto 2.5rem; padding: 0 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.job-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: box-shadow 0.2s; }
.job-card:hover { box-shadow: var(--shadow-lg); }
.job-card summary { list-style: none; cursor: pointer; padding: 1.4rem 1.6rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.job-card summary::-webkit-details-marker { display: none; }
.job-card summary:hover .job-title { color: var(--blue); }
.job-title { font-weight: 700; font-size: 1.1rem; color: var(--navy-900); flex: 1 1 220px; }
.job-meta { font-size: 0.86rem; color: var(--muted); flex: 2 1 280px; }
.job-cta { font-size: 0.86rem; font-weight: 700; color: var(--blue); border: 1px solid var(--blue); border-radius: 999px; padding: 0.35rem 1rem; white-space: nowrap; }
.job-card[open] .job-cta { background: var(--blue); color: #fff; }
.job-body { padding: 0 1.6rem 1.6rem; border-top: 1px solid var(--border); padding-top: 1.4rem; }
.job-body h3 { font-size: 1rem; margin: 1.2rem 0 0.5rem; color: var(--navy-900); }
.job-body ul { margin: 0 0 0.8rem 1.3rem; color: #33415C; }
.job-body li { margin-bottom: 0.4rem; }
.job-body .apply-btn { margin-top: 1rem; }
@media (max-width: 640px) {
  .job-card summary { flex-direction: column; align-items: flex-start; }
}

/* ---------- Candidate account ---------- */
.acct-switch { color: var(--muted); margin-top: 0.75rem; }
.acct-error { color: var(--danger); font-weight: 600; margin-top: 1rem; text-align: center; }
.acct-ok { color: #2e7d32; font-weight: 600; margin-top: 1rem; text-align: center; }
.acct-divider { border: none; border-top: 1px solid var(--border); margin: 2rem 0; }
/* ---------- Micro flow chains (cards) ---------- */
.micro-flow { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; font-size: 0.78rem; font-weight: 700; color: var(--navy-800); margin-top: 0.7rem; }
.micro-flow span { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 999px; padding: 0.22rem 0.6rem; }
.micro-flow i { color: var(--blue); font-style: normal; }

/* ---------- Insights page cards — OPTION 09 format v3 (page-scoped, 2026-10-16) ----------
   CEO revision: v1 applied OPTION 09 colors only and was NOT approved;
   the CEO ordered the cards rebuilt into the OPTION 09 card's EXACT
   format. Revision 2 (CEO order, 2026-10-16): the v2 gradient titles
   (background-clip:text) printed in the proof as huge solid gradient
   boxes and were ordered removed — titles are now SOLID deep navy
   (var(--navy-900), the standard card-title navy); and the tick badges
   were ordered from a flat gold gradient to SHINY LIGHT GOLDEN-BROWN
   BALLS — a radial-gradient sphere (highlight #F8E7B8 top-left, body
   #E3C078 / #D9AE5F, rim #B0823C) with inset shine shading.
   v3.1 tweak (CEO order, 2026-10-16, after viewing the cards live on
   staging — "make the yellow balls little shiny golden color"): the
   badge palette shifted a little richer toward true gold — highlight
   #FBE9B7, body #E8BC55 / #DFAA3C, rim #9E741F — with the inset shine
   strengthened so the glossy-ball read holds.
   v3.2 tweak (CEO order, 2026-10-16, after viewing the v3.1 specimen —
   "can u darken the yellow ball more and make it golden shiny.. not
   too much dark"): the palette deepened one clear step — highlight
   #FBE9B7 kept bright but narrowed, body #DFAA3C / #C9962E, rim
   #86650F — unmistakably golden and glossy at 30px, medium depth,
   not bronze and not dark.
   Structure per card: pale blue-gradient ground (#FBFDFF ->
   #EEF4FE), light-blue border (#BCD3F6), 22px radius, soft shadow,
   generous padding; top row with the bright-blue uppercase category
   eyebrow (date beside it, muted gray) and a pale-blue CIRCULAR
   medallion (#E3EDFC, 64px) holding a blue line icon per category;
   large bold solid-navy title; slate-lavender
   excerpt (#667085); TWO feature rows — glossy light golden-brown
   ball badge with a navy check beside blue medium
   text — whose phrases are drawn from each article's own headings
   and lists; bright-blue bold "Read article ->" link bottom-left.
   Cards sit in a 2-column grid (1 column on mobile) with equal-height
   rows. Scoped to .insights-page (insights index only) so no other
   page's cards change. The cards are display:block here (not the
   base .card flex column): their children stack identically, and
   block flow keeps the card rendering correct in engines that
   mis-measure nested flex columns — the same parity fix the
   industries cards carry.
   Size step-up (CEO order, 2026-10-17): the same readability-tuned
   step as the Industries block above — padding 2rem -> 2.4rem,
   title 1.55rem -> 1.65rem, excerpt 1rem -> 1.06rem, medallion
   64px -> 72px (icon 32px -> 36px), tick badges 30px -> 34px
   (glyph 15px -> 17px, row text 1.02rem -> 1.08rem, row gap
   0.65rem -> 0.75rem); the dedicated card grid's gap steps
   1.5rem -> 1.75rem.
   2026-10-21 unification: card padding levelled to the fmt standard
   (2.4rem -> 1.8rem; mobile 1.9rem -> 1.8rem, C5) and the grid gap
   levelled back to the site standard 1.5rem (C9). The step's title,
   body, medallion and tick sizes stay as ordered.
   Unlinking + colour fix (CEO order, 2026-10-21): the article cards
   are no longer whole-card anchors — the card is now an <article>
   container and only the "Read article" card-link at its foot is a
   link, so the title, body and tick points are plain text. With the
   points unlinked, their blue read as a link (the Industries ruling
   of the same day), so .ins-ticks li now takes the site's black ink
   (var(--navy-900) #0A1628). The gold tick balls are unchanged. */
.insights-page .card-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; align-items: stretch;
}
.insights-page .card {
  display: block;
  background: linear-gradient(180deg, #FBFDFF 0%, #EEF4FE 100%);
  border: 1px solid #BCD3F6;
  border-radius: 22px;
  padding: 1.8rem;
  box-shadow: 0 1px 2px rgba(10, 22, 40, 0.04), 0 6px 18px rgba(37, 99, 235, 0.06);
}
.insights-page .card:hover {
  box-shadow: 0 2px 4px rgba(10, 22, 40, 0.05), 0 12px 30px rgba(37, 99, 235, 0.13);
}
.insights-page .ins-top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  margin-bottom: 1.1rem;
}
.insights-page .card .meta-row {
  display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap;
  margin: 0; padding-top: 0.35rem;
  color: #667085; font-size: 0.88rem;
}
.insights-page .card .cat {
  color: var(--blue); text-transform: uppercase; font-weight: 600;
  letter-spacing: 0.07em; font-size: 0.8rem;
}
.insights-page .ins-medal {
  flex: none; width: 72px; height: 72px; border-radius: 50%;
  background: #E3EDFC; color: var(--blue);
  display: flex; align-items: center; justify-content: center;
}
.insights-page .ins-medal svg { width: 36px; height: 36px; }
.insights-page .card h3 {
  font-size: 1.65rem; line-height: 1.25; margin-bottom: 0.7rem;
  color: var(--navy-900);
}
.insights-page .card p {
  color: #667085; font-size: 1.06rem; line-height: 1.6; flex: none; margin-bottom: 1.1rem;
}
.insights-page .ins-ticks {
  list-style: none; margin: 0 0 1.25rem; padding: 0;
  display: flex; flex-direction: column; gap: 0.75rem;
}
.insights-page .ins-ticks li {
  display: flex; align-items: center; gap: 0.7rem;
  color: var(--navy-900); font-weight: 500; font-size: 1.08rem;
}
.insights-page .ins-tick {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #FFF3D6 0%, #FBE9B7 18%, #EFC65C 36%, #DFAA3C 55%, #C9962E 76%, #86650F 100%);
  box-shadow: inset 0 -2px 4px rgba(101, 66, 6, 0.45), inset 0 2px 3px rgba(255, 250, 230, 0.78), 0 1px 3px rgba(10, 22, 40, 0.18);
  display: inline-flex; align-items: center; justify-content: center;
}
.insights-page .ins-tick svg { width: 17px; height: 17px; }
.insights-page .card .card-link {
  display: block; color: var(--blue); font-weight: 700; font-size: 1rem;
}
.insights-page .card .card-link span { font-weight: 800; }
@media (max-width: 720px) {
  .insights-page .card-grid { grid-template-columns: 1fr; }
  .insights-page .card { padding: 1.8rem; }
  .insights-page .card h3 { font-size: 1.5rem; }
}

/* ---------- Industries page — OPTION 09 card format (page-scoped) ----------
   History: the 2026-10-15 review build gave the six industry cards a
   short gold dash, a square icon chip beside the title, gold flat check
   marks, and a hairline above the Explore link. CEO order 2026-10-16:
   "now the same card format has to be used for all options industries
   tab" — the six cards are rebuilt into the SAME card format as the
   finished Insights cards (OPTION 09, .insights-page block below):
   pale blue-gradient ground (#FBFDFF -> #EEF4FE), light-blue border
   (#BCD3F6), 22px radius, the same soft shadow, solid navy title
   (var(--navy-900)), a 64px pale-blue circular medallion (#E3EDFC) at
   the top right holding the industry's blue line icon, the review's
   description, and checklist items as tick rows whose badge is the
   final v3.2 glossy golden ball (the exact radial-gradient and inset
   shine values of .insights-page .ins-tick; navy #14264C check) beside
   blue text.
   Adaptations for this page (no category eyebrow or date exists here):
   the industry title sits on the top row's left with the medallion at
   its right; each card carries its full three-item capability list as
   stacked tick rows. Untouched by the conversion: the hero, the
   security banner (soft blue ground), and the one common Discuss Your
   Needs button for the page. Removal (CEO order, 2026-10-21): the
   hero's gold accent bar (under the lead) and the security banner's
   small gold dash (above its heading) are deleted — the small
   decorative gold lines above titles / after paragraphs are removed
   site-wide; the two rules stood where the dated notes below sit.
   Colour fix (CEO order, 2026-10-21): the tick-row text is no longer
   blue — blue reads as a link and visitors tried to click the points;
   the points are plain text, so .ind-ticks li now takes the site's
   black ink (var(--navy-900) #0A1628). The gold balls are unchanged.
   Follow-ups (CEO orders, 2026-10-16, after the first checklist proof
   was not approved): the checklist items are set in Title Case; the
   six Explore links and the hairline above each are REMOVED (they all
   pointed at the same contact form — the one Discuss Your Needs
   button suffices), so every card ends at its tick rows; and the
   Discuss Your Needs button takes the shipped tab-grid button
   treatment (PR #18) — carried first by a page-scoped rule here, now
   by the global .btn rules (the CEO extended the format to every
   button on the site later the same day; see the Buttons section).
   Cards are display:block (not the base .card flex column) — the same
   render-parity reason recorded on the insights cards.
   Size step-up (CEO order, 2026-10-17, tuned for readability over
   mechanical proportion): padding 2rem -> 2.4rem, title 1.55rem ->
   1.65rem, body 1rem -> 1.06rem, medallion 64px -> 72px (icon 32px
   -> 36px), tick badges 30px -> 34px (glyph 15px -> 17px, row text
   1.02rem -> 1.08rem, row gap 0.65rem -> 0.75rem so the taller rows
   keep their air). The same step lands on the Insights block and on
   .fmt-card / .fmt-card-lite so the whole card family stays one
   family.
   2026-10-21 unification (C5): card padding alone was levelled back
   to the fmt standard (2.4rem -> 1.8rem; mobile 1.9rem -> 1.8rem) so
   every content card on the site shares one padding. The step's
   title, body, medallion and tick sizes stay as ordered. */
/* Gold accent bar under the hero lead removed 2026-10-21 (CEO order —
   see the Industries block note above). */
.industries-page .ind-card {
  display: block;
  background: linear-gradient(180deg, #FBFDFF 0%, #EEF4FE 100%);
  border: 1px solid #BCD3F6;
  border-radius: 22px;
  padding: 1.8rem;
  box-shadow: 0 1px 2px rgba(10, 22, 40, 0.04), 0 6px 18px rgba(37, 99, 235, 0.06);
}
.industries-page .ind-card:hover {
  box-shadow: 0 2px 4px rgba(10, 22, 40, 0.05), 0 12px 30px rgba(37, 99, 235, 0.13);
}
.industries-page .ind-top {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-bottom: 1.1rem;
}
.industries-page .ind-top h2 {
  flex: 1; margin: 0; font-size: 1.65rem; line-height: 1.25;
  color: var(--navy-900);
}
.industries-page .ind-medal {
  flex: none; width: 72px; height: 72px; border-radius: 50%;
  background: #E3EDFC; color: var(--blue);
  display: flex; align-items: center; justify-content: center;
}
.industries-page .ind-medal svg { width: 36px; height: 36px; }
.industries-page .ind-card p {
  color: #667085; font-size: 1.06rem; line-height: 1.6; margin-bottom: 1.1rem;
}
.industries-page .ind-ticks {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.75rem;
}
.industries-page .ind-ticks li {
  display: flex; align-items: center; gap: 0.7rem;
  color: var(--navy-900); font-weight: 500; font-size: 1.08rem;
}
.industries-page .ind-tick {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #FFF3D6 0%, #FBE9B7 18%, #EFC65C 36%, #DFAA3C 55%, #C9962E 76%, #86650F 100%);
  box-shadow: inset 0 -2px 4px rgba(101, 66, 6, 0.45), inset 0 2px 3px rgba(255, 250, 230, 0.78), 0 1px 3px rgba(10, 22, 40, 0.18);
  display: inline-flex; align-items: center; justify-content: center;
}
.industries-page .ind-tick svg { width: 17px; height: 17px; }
.industries-page .ind-cta-row { display: flex; justify-content: center; margin-top: 2.2rem; }
/* Discuss Your Needs button: the shipped tab-grid button treatment
   (PR #18, .page-nav-grid a above) — CEO order 2026-10-16. The
   page-scoped override that first carried it here was REMOVED later
   the same day when the CEO ordered the format onto EVERY button:
   the global .btn rules (Buttons section above) now carry the exact
   same values, so this button (a plain .btn.btn-primary) is styled
   by the global rules and needs no override. */
/* Gold dash above the security heading removed 2026-10-21 (CEO order —
   see the Industries block note above). */
@media (max-width: 720px) {
  .industries-page .ind-card { padding: 1.8rem; }
  .industries-page .ind-top h2 { font-size: 1.5rem; }
}

/* ---------- Site-wide card format — the Industries/Insights pattern
   on every other page (CEO order, 2026-10-16) ----------
   The CEO verified the Industries and Insights pages in the finished
   OPTION 09 card format and ordered: "the white plain cards which
   are present in home page or others should be in the format we used
   in Industries/Insights pages. The cards should contain respective
   icon." Converted cards carry .fmt-card: pale blue-gradient ground
   (#FBFDFF -> #EEF4FE), 1px solid #BCD3F6 border, 22px radius, the
   same soft shadow, solid navy (var(--navy-900)) titles, #667085 body
   text, and a 64px pale-blue (#E3EDFC) circular medallion at the
   card's top right holding a blue line icon matched to the card's
   subject. The medallion is a .card-medal span inserted as the card's
   first child; where a card already carried an icon element
   (.card-icon — Integrations, Use Cases index), that element itself
   is restyled into the medallion so no card shows two icons. Titles
   reserve the medallion's width so no heading runs beneath it. Card
   content, grids, and links are unchanged — a format conversion, not
   a rewrite. The Industries and Insights pages are NOT converted
   (verified by the CEO as finished) and no rule here reaches them:
   every selector is gated on .fmt-card, which those pages never use.
   The dark-navy crafted .svc-panel section panels are designed
   panels, not plain cards, and are likewise untouched.
   Size step-up (CEO order, 2026-10-17): this block declares no
   padding or title/body sizes of its own (they inherit from the
   base .card / .why-card rules), so the step lands on what the
   block owns — the medallion 64px -> 72px (icon 32px -> 36px),
   the title's medallion reserve 5.25rem -> 5.9rem, and the
   heading min-height 64px -> 72px, keeping the anti-underlap
   relation (heading block at least the medallion's height) exact.
   .fmt-card-lite below mirrors every one of these values. */
.fmt-card {
  position: relative;
  background: linear-gradient(180deg, #FBFDFF 0%, #EEF4FE 100%);
  border: 1px solid #BCD3F6;
  border-radius: 22px;
  box-shadow: 0 1px 2px rgba(10, 22, 40, 0.04), 0 6px 18px rgba(37, 99, 235, 0.06);
}
.card.fmt-card:hover, .why-card.fmt-card:hover {
  box-shadow: 0 2px 4px rgba(10, 22, 40, 0.05), 0 12px 30px rgba(37, 99, 235, 0.13);
}
.fmt-card h2, .fmt-card h3 { color: var(--navy-900); padding-right: 5.9rem; }
/* The heading block is at least the medallion's height, so body text
   always starts BELOW the medallion — exactly as on the Industries /
   Insights cards, where the description begins under the title row.
   Without this, a one-line title lets the first body lines run the
   full width of the card and disappear beneath the disc. */
.fmt-card h2, .fmt-card h3 { min-height: 72px; }
.fmt-card p { color: #667085; }
.card-medal {
  position: absolute; top: 1.55rem; right: 1.55rem;
  width: 72px; height: 72px; border-radius: 50%;
  background: #E3EDFC; color: var(--blue);
  display: flex; align-items: center; justify-content: center;
}
.card-medal svg { width: 36px; height: 36px; }
.fmt-card .card-icon {
  position: absolute; top: 1.55rem; right: 1.55rem;
  width: 72px; height: 72px; border-radius: 50%;
  background: #E3EDFC; color: var(--blue);
  display: flex; align-items: center; justify-content: center; margin: 0;
}
.fmt-card .card-icon svg { width: 36px; height: 36px; }
/* About — Company Structure fact tiles: the format's SURFACE only.
   These compact label/value data tiles carry no medallion: at the
   format's 64px the medallion would crowd out the data the tile
   exists to show. */
.fact.fmt-fact {
  background: linear-gradient(180deg, #FBFDFF 0%, #EEF4FE 100%);
  border-color: #BCD3F6; border-radius: 22px;
  box-shadow: 0 1px 2px rgba(10, 22, 40, 0.04), 0 6px 18px rgba(37, 99, 235, 0.06);
}
/* ---------- Card format, LITE dress — the density revision
   (CEO order, 2026-10-16) ----------
   With every plain card converted, the CEO judged the full
   pale-blue dress "bulky" where cards stack in long runs, and
   delegated the density call. The densest groups therefore wear
   the LITE dress: identical geometry, the same 1px #BCD3F6 border
   and 22px radius, the same medallion icon, navy titles and
   #667085 body text — but a plain WHITE ground (no gradient) and
   a quieter shadow, so a wall of cards reads as structure rather
   than colour, and the fully-dressed groups regain their emphasis.
   Groups in the lite dress: Home "Why AISoltrics" (4) and the
   About strip (2); the Use Cases index's 13 linked guide cards
   (its 3 pilot-metric cards keep .fmt-card); Mission's 4
   test-question cards (its 4 pillar cards keep .fmt-card);
   Integrations' 4 principle cards (its 5 family cards keep
   .fmt-card). Every other converted group keeps .fmt-card. */
.fmt-card-lite {
  position: relative;
  background: #FFFFFF;
  border: 1px solid #BCD3F6;
  border-radius: 22px;
  box-shadow: 0 1px 2px rgba(10, 22, 40, 0.03), 0 3px 10px rgba(37, 99, 235, 0.035);
}
.card.fmt-card-lite:hover, .why-card.fmt-card-lite:hover {
  box-shadow: 0 1px 3px rgba(10, 22, 40, 0.04), 0 8px 20px rgba(37, 99, 235, 0.08);
}
.fmt-card-lite h2, .fmt-card-lite h3 { color: var(--navy-900); padding-right: 5.9rem; }
.fmt-card-lite h2, .fmt-card-lite h3 { min-height: 72px; }
.fmt-card-lite p { color: #667085; }
.fmt-card-lite .card-icon {
  position: absolute; top: 1.55rem; right: 1.55rem;
  width: 72px; height: 72px; border-radius: 50%;
  background: #E3EDFC; color: var(--blue);
  display: flex; align-items: center; justify-content: center; margin: 0;
}
.fmt-card-lite .card-icon svg { width: 36px; height: 36px; }
@media (max-width: 720px) {
  .card-medal, .fmt-card .card-icon, .fmt-card-lite .card-icon { top: 1.3rem; right: 1.3rem; }
}

/* ---------- Card grid — the standard listing grid (2026-10-21
   unification, C1) ----------
   A global .card-grid rule at last: display:grid, two columns, the
   standard 1.5rem gap — the treatment the site's other card grids
   use. Until now the only .card-grid rules in this file were scoped
   to .insights-page, so the Use Cases index's container had no rule
   at all and its 13 guide cards stacked flush as plain blocks (the
   same root cause cured on Home's Featured Work stack in PR #28).
   The other two .card-grid uses keep their behaviour: the Insights
   grids stay governed by their higher-specificity .insights-page
   rules, and Home's .featured-grid stack keeps its single column
   via the explicit template on its own rule below. */
.card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
@media (max-width: 720px) {
  .card-grid { grid-template-columns: 1fr; }
}

/* ---------- Home — Featured Work card stack (CEO order, 2026-10-17) ----------
   The section's .card-grid container carries no global rule (the only
   .card-grid rules in this file are scoped to .insights-page), so on
   Home the three .fmt-card prototypes stacked as plain blocks with no
   gap between them. This scoped rule gives the stack the site's
   standard card-grid treatment — display:grid with the base .grid
   gap of 1.5rem, the same value the card sections neighbouring it
   on this page use. Scoped to .featured-grid so no other page's or
   section's spacing changes. The explicit 1fr template (added in the
   2026-10-21 unification) pins this stack to its single column now
   that a global .card-grid rule exists. */
.featured-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }


/* ---------- Home — Featured Work heading links (CEO order, 2026-10-17) ----------
   The three prototype cards are no longer whole-card links: the card
   is a plain <article> and only its bold heading navigates, to the
   destination the card itself used to carry. The heading link's
   colour already comes from the base card rules (.card h3 a is navy
   at rest, blue on hover; the global anchor reset keeps it
   underline-free at rest). This scoped rule adds the underline on
   hover/focus so the one link on each card reads as a link when it
   is used. Scoped to .featured-grid so no other card's heading
   changes. */
.featured-grid .fmt-card h3 a:hover,
.featured-grid .fmt-card h3 a:focus-visible { text-decoration: underline; }

/* ---------- Home — Why AISoltrics SHINY GOLD dress (CEO order, 2026-10-18) ----------
   The CEO supplied a new reference card — a THIN, BRIGHT, luminous
   metallic gold frame with strong highlights (pale gold light along
   the top edge, rich gold through the middle, deeper gold only at
   the far corners), a pale blue-white interior easing from white at
   the top to a faint cool blue at the bottom, navy title, slate
   body, a pale-blue medallion holding a DARK line icon, and a soft
   neutral shadow — and ordered the Home page's four "Why
   AISoltrics" cards (Security-first, Enterprise architecture,
   Responsible AI, Measurable outcomes) restyled from the 2026-10-17
   black-gold treatment into this shiny gold model, text unchanged.
   There is NO black hairline anywhere in this treatment. The frame
   is pure CSS layering: a pale blue-white padding-box layer over a
   bright metallic gold border-box gradient, carried on a 3px
   transparent border; the soft drop shadow and a faint warm glow
   ride in the box-shadow. The medallion keeps the family #E3EDFC
   disc; only its icon stroke sits at var(--navy-900). Every
   selector is gated on .fmt-card-blackgold, which only those four
   cards carry — no other card on any page can change. */
.fmt-card-blackgold {
  position: relative;
  background:
    linear-gradient(180deg, #FFFFFF 0%, #F4F9FE 68%, #EDF4FC 100%) padding-box,
    linear-gradient(135deg, #A87408 0%, #F7CE46 24%, #FFE97A 42%, #F2B705 60%, #FFF3A0 80%, #B97F06 100%) border-box;
  border: 3px solid transparent;
  border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 2px 6px rgba(10, 22, 40, 0.06), 0 14px 30px rgba(10, 22, 40, 0.10), 0 4px 18px rgba(185, 127, 6, 0.12);
}
.why-card.fmt-card-blackgold:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 3px 8px rgba(10, 22, 40, 0.08), 0 22px 44px rgba(10, 22, 40, 0.14), 0 6px 22px rgba(185, 127, 6, 0.16);
}
.fmt-card-blackgold h2, .fmt-card-blackgold h3 { color: var(--navy-900); padding-right: 5.9rem; }
.fmt-card-blackgold h2, .fmt-card-blackgold h3 { min-height: 72px; }
.fmt-card-blackgold p { color: #667085; }
.fmt-card-blackgold .card-medal { color: var(--navy-900); }

/* ---------- Home — How We Deliver steps, LIGHT PURPLE SHINY dress (CEO order, 2026-10-17) ----------
   The CEO supplied a screenshot of the Home page's six delivery step
   cards (01 Discover … 06 Optimize) in their plain white dress and
   ordered them "in light purple shiny cards", text unchanged. The
   gloss is pure CSS layering — a white sheen across the top over a
   pale lavender ground — no images. The radius stays the step cards'
   own var(--radius), inherited from the base .steps li rule, so the
   row's geometry does not move; only the surface (ground, sheen,
   border, shadow) changes, plus the step number's color — it takes a
   purple tone (#7C5CFC) to belong to the new dress. Every selector is
   gated on #how-we-deliver, a section id that exists only on the Home
   page (and the .steps list markup is used nowhere else in the site)
   — no other page's cards can change. */
#how-we-deliver .steps li {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0) 46%),
    radial-gradient(130% 105% at 50% -30%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(165deg, #F4EFFF 0%, #E9E1FD 55%, #DCCFFB 100%);
  border: 1px solid #C4B0F2;
  box-shadow: 0 10px 24px rgba(124, 92, 252, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
#how-we-deliver .steps li::before { color: #7C5CFC; }

/* ---------- Featured Work — ARROW-RIBBON workflow strips (CEO revision order, 2026-10-18) ----------
   The CEO reviewed the interlocking-chevron strips built on
   2026-10-17 and ordered them changed to "arrow model", supplying a
   new reference: ONE flat horizontal band per workflow, divided into
   EQUAL straight-edged segments — vertical hairline separators, no
   arrow points, no notches, no overlap. The band's ground is light
   blue with a flowing WAVE shading: pale at the top, a diagonal sweep
   of light across each segment, deepening to mid-blue toward the
   bottom and a touch more toward the right of the strip. The band is
   a framed ribbon — slightly rounded corners, a pale blue hairline
   border, a soft shadow. Badges, icons and labels are exactly as the
   chevron build left them: the .chev-* class names are kept, so the
   markup, the 13 step labels and the 13 badge SVGs are
   byte-identical — this revision is stylesheet-only. The interlock
   geometry is gone: no clip-path, no negative margins, no
   drop-shadow filter. Every selector stays gated on .featured-grid,
   the Featured Work section's own grid, so no other card or page can
   take this dress; the generic .micro-flow rules above stay as they
   were. */
.featured-grid .chev-flow {
  display: flex;
  margin-top: 1.1rem;
  border: 1px solid #C9DDF6;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.10);
}
.featured-grid .chev-step {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.05rem 0.6rem 1rem;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0.42) 52%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(160deg, rgba(126, 178, 246, 0) 52%, rgba(126, 178, 246, 0.32) 100%),
    linear-gradient(180deg, #F6FBFE 0%, #E0EEFC 100%);
}
/* Segment separators: a two-tone vertical hairline — a white light
   line at the boundary with a faint blue companion just inside the
   segment — so the divisions read over both the pale top and the
   deeper bottom of the wave. */
.featured-grid .chev-step + .chev-step {
  border-left: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: inset 1px 0 0 rgba(148, 184, 238, 0.30);
}
/* The wave deepens a touch from segment to segment, as the model's
   right side deepens: the same three layers each time, with a deeper
   base and a stronger bottom sweep on every step to the right. */
.featured-grid .chev-step:nth-child(2) {
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0.42) 52%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(160deg, rgba(126, 178, 246, 0) 52%, rgba(126, 178, 246, 0.36) 100%),
    linear-gradient(180deg, #F4FAFE 0%, #D9EAFB 100%);
}
.featured-grid .chev-step:nth-child(3) {
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0.42) 52%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(160deg, rgba(126, 178, 246, 0) 52%, rgba(126, 178, 246, 0.40) 100%),
    linear-gradient(180deg, #F1F8FE 0%, #D2E5FB 100%);
}
.featured-grid .chev-step:nth-child(4) {
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0.42) 52%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(160deg, rgba(126, 178, 246, 0) 52%, rgba(126, 178, 246, 0.44) 100%),
    linear-gradient(180deg, #EEF6FE 0%, #CBE1FA 100%);
}
.featured-grid .chev-step:nth-child(5) {
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0.42) 52%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(160deg, rgba(126, 178, 246, 0) 52%, rgba(126, 178, 246, 0.48) 100%),
    linear-gradient(180deg, #EBF4FE 0%, #C4DDF9 100%);
}
.featured-grid .chev-badge {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.35);
}
.featured-grid .chev-badge svg { width: 21px; height: 21px; }
.featured-grid .chev-label {
  margin-top: 0.5rem;
  font-weight: 600;
  color: var(--navy-900);
  font-size: 0.94rem;
  line-height: 1.3;
}
/* Narrow screens: the band wraps into two rows inside the same
   frame; row-start segments drop their left hairline and later rows
   take a top hairline instead, so the divisions stay clean and no
   label can overflow or clip. */
@media (max-width: 720px) {
  .featured-grid .chev-flow { flex-wrap: wrap; }
  .featured-grid .chev-step {
    flex: 1 1 42%;
    padding: 0.85rem 0.5rem 0.8rem;
  }
  .featured-grid .chev-step:nth-child(odd) { border-left: none; box-shadow: none; }
  .featured-grid .chev-step:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, 0.65); }
}

/* ---------- Contact cards row (CEO order, 2026-10-18) ----------
   The Phone and Office cards below the contact form were removed;
   the lone Email card centers in its row at the width one card held
   in the former 3-column row (row max-width 860px, 1.5rem gaps ->
   (860 - 48) / 3 = 270px = 16.9rem), so no void stands beside it. */
.contact-cards { display: flex; justify-content: center; margin-top: 3rem; }
.contact-cards .card { flex: 0 1 16.9rem; }

/* ---------- Book-a-demo submit spacing (CEO order, 2026-10-19) ----------
   The Submit button sat tight under the privacy note. A clear gap now
   separates them. Scoped to #demoForm only — no other form shares this
   rule, so no other form's button spacing changes. */
#demoForm .center { margin-top: 1.25rem; }

/* ---------- Contact page, Variant B (CEO order 2026-10-19, external review verbatim) ----------
   Page-scoped (.contact-review on the contact page body). Two-column layout:
   information panel left, soft-blue form card right (site .fmt-card surface
   values), single-column fields. Submit has NO gold frame — a thin gold
   bottom edge is the sole gold accent on this page's button. */
.contact-review .cr-layout { display: grid; grid-template-columns: minmax(0, 1fr) 600px; gap: 3rem; align-items: stretch; }
.contact-review .cr-panel {
  background: linear-gradient(180deg, #FBFDFF 0%, #EEF4FE 100%);
  border: 1px solid #BCD3F6; border-radius: 22px;
  padding: 2.4rem; display: flex; flex-direction: column; justify-content: center;
}
.contact-review .cr-panel h2 { font-size: 1.55rem; margin-bottom: 0.8rem; }
.contact-review .cr-panel > p { color: var(--muted); font-size: 1.02rem; margin-bottom: 2.4rem; }
.contact-review .cr-rows { list-style: none; display: flex; flex-direction: column; gap: 1.7rem; }
.contact-review .cr-rows li { display: flex; gap: 1rem; align-items: flex-start; }
.contact-review .cr-ico {
  flex: none; width: 44px; height: 44px; border-radius: 12px;
  background: #E3EDFC; color: var(--blue);
  display: flex; align-items: center; justify-content: center;
}
.contact-review .cr-ico svg { width: 22px; height: 22px; }
.contact-review .cr-row-text { display: flex; flex-direction: column; gap: 0.15rem; padding-top: 0.1rem; }
.contact-review .cr-row-text strong { color: var(--navy-900); font-size: 1rem; }
.contact-review .cr-row-text > span { color: var(--muted); font-size: 0.92rem; }
.contact-review .cr-form-card {
  background: linear-gradient(180deg, #FBFDFF 0%, #EEF4FE 100%);
  border: 1px solid #BCD3F6; border-radius: 22px;
  box-shadow: 0 1px 2px rgba(10, 22, 40, 0.04), 0 6px 18px rgba(37, 99, 235, 0.06);
  padding: 2.4rem;
}
.contact-review .cr-form-title { font-size: 1.35rem; margin-bottom: 1.6rem; }
.contact-review .cr-fields { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-bottom: 1.5rem; }
.contact-review .cr-after { text-align: center; color: var(--muted); font-size: 0.92rem; margin-top: 1rem; }
@media (max-width: 1024px) { .contact-review .cr-layout { grid-template-columns: 1fr; } }

/* Review-verbatim submit — blue gradient, NO gold frame,
   a thin gold bottom edge as the sole gold accent. */
.contact-review .cr-btn-b { border-color: transparent; box-shadow: inset 0 -3px 0 var(--gold), 0 4px 14px rgba(10, 22, 40, 0.22), 0 2px 6px rgba(37, 99, 235, 0.30); }
.contact-review .cr-btn-b:hover { box-shadow: inset 0 -3px 0 var(--gold), 0 8px 22px rgba(10, 22, 40, 0.26), 0 4px 10px rgba(37, 99, 235, 0.38); }

/* ---------- Careers page review (CEO order 2026-10-19, external review applied) ----------
   Page-scoped (.careers-review on the careers page body). Wording lives in
   the page; these rules are the review's visual refinements only: slightly
   larger description text, more air between the two prose sections, the
   bottom dashed gate box more compact with a lighter border. Buttons keep
   the global blue-gradient + gold-frame standard — unchanged. */
/* Prose size: this page's scoped 1.0625rem step was removed in the
   2026-10-21 unification (C4) — .prose is now 1.0625rem globally. */
.careers-review .prose h2#apply { margin-top: 3.6rem; }
.careers-review #accountSection > p { font-size: 1.0625rem; }

/* ---------- About page design pass (CEO orders 2026-10-20, external review parts 7–10) ----------
   Page-scoped (.about-review on the about page body). Hero rebuilt
   2026-10-20 ~16:05 IST to the CEO-supplied design: real text (eyebrow
   "About Us", gradient-accented H1, new lead) with the design's
   globe/network artwork cropped text-free from its right portion
   (assets/img/about-hero-art.jpg, decorative only) — replacing the
   inline SVG network decoration of the earlier design pass; prose
   stepped up to ~17px; consistent section spacing; the tail restructured
   out of the old navy band into distinct light sections — Our Leadership,
   Our Core Values (five compact cards), Trust & Security — closing with
   the slim "Let's Build Together" CTA band. Capability cards get slightly
   more padding; their descriptions already stretch (flex) so the links
   align along each row. */
.about-review .page-hero { position: relative; overflow: hidden; }
.about-review .page-hero .container { position: relative; z-index: 1; }
.about-review .about-hero-art { position: absolute; top: 0; right: 0; height: 100%; width: 58%; max-width: 920px; object-fit: cover; object-position: center right; pointer-events: none; -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0, #000 150px); mask-image: linear-gradient(to right, rgba(0,0,0,0) 0, #000 150px); }
.about-review .page-hero h1 { max-width: 660px; }
.about-review .page-hero .lead { max-width: 620px; }
@media (max-width: 720px) { .about-review .about-hero-art { width: 100%; opacity: 0.25; object-position: center right; -webkit-mask-image: none; mask-image: none; } .about-review .page-hero h1, .about-review .page-hero .lead { max-width: none; } }
/* Prose size: this page's scoped 1.0625rem step was removed in the
   2026-10-21 unification (C4) — .prose is now 1.0625rem globally.
   Card padding levelled 2.3rem -> the fmt standard 1.8rem (C6), and
   the values grid gap (1.25rem -> 1.5rem) and value-card radius
   (18px -> 22px) levelled to the site standards (C9). */
.about-review .section .prose:not(:first-child) { margin-top: 2.5rem; }
.about-review .grid.cols-2 .fmt-card, .about-review .grid.cols-2 .fmt-card-blackgold { padding: 1.8rem; }
.about-review .values-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.5rem; margin-top: 1.5rem; }
.about-review .value-card { background: linear-gradient(180deg, #FBFDFF 0%, #EEF4FE 100%); border: 1px solid #BCD3F6; border-radius: 22px; padding: 1.6rem 1.1rem 1.4rem; text-align: center; box-shadow: 0 1px 2px rgba(10, 22, 40, 0.04), 0 6px 18px rgba(37, 99, 235, 0.06); }
.about-review .value-ico { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0 auto 0.8rem; color: var(--blue); }
.about-review .value-ico svg { width: 30px; height: 30px; }
.about-review .value-card h3 { color: var(--navy-900); font-size: 1.02rem; margin-bottom: 0.45rem; }
.about-review .value-card p { color: #667085; font-size: 0.92rem; }
@media (max-width: 720px) { .about-review .values-grid { grid-template-columns: repeat(2, 1fr); } }
/* Tail-to-cards revision (CEO order 2026-10-20 ~15:35 IST): the Our
   Leadership and Trust & Security text blocks take the card treatment
   too — each sits in a full-width .fmt-card under its section heading,
   with a family .card-medal (people for Leadership, shield for Trust &
   Security). The card sits OUTSIDE .prose so it spans the container;
   the paragraph rules below reproduce the prose step (17px, 1.1rem
   rhythm) inside it, and the first paragraph keeps the family's 5.9rem
   medallion reserve so no line runs beneath the disc. */
.about-review .tail-card { padding: 1.8rem; margin-top: 1.5rem; }
.about-review .tail-card p { font-size: 1.0625rem; margin-bottom: 1.1rem; }
.about-review .tail-card p:first-of-type { padding-right: 5.9rem; }
.about-review .tail-card p:last-child { margin-bottom: 0; }