/* ═══════════════════════════════════════════════════════════════
   KAIROS ERP — theme override + page-specific components
   loaded after styles.css and astromed.css
   ═══════════════════════════════════════════════════════════════ */

/* Violet, matching the app's own Midnight + Violet design system so the site
   and the product a customer opens afterwards look like the same thing. */
body.kr-body{
  --pa:       #7c5cff;
  --pa-hi:    #a78bfa;
  --pa-soft:  rgba(124,92,255,.10);
  --pa-glow:  rgba(124,92,255,.28);
}

/* ── hero mark ─────────────────────────────────────────────────── */
/* The shared orbit sizes its image at 72% width, which suits AstroMED's wide
   mark. The Kairos mark is square, so the same 72% width is also 72% tall and
   the logo swamps the rings. Sized down until its visual mass matches. */
.kr-body .orbit img{
  width:54%;
  filter: drop-shadow(0 10px 26px rgba(124,92,255,.35));
}
@media (max-width:960px){
  .kr-body .orbit img{ width:58%; }
}

/* ── module list ───────────────────────────────────────────────── */
/* A headed list, items falling underneath — not cards and not floating pills.
   Each row names the module and says what it does, because the breadth argument
   only lands if the reader can see what each piece actually is. */
.modlist{
  display:grid; grid-template-columns: repeat(2, 1fr);
  gap: 8px 56px;
}
@media (max-width:900px){ .modlist{ grid-template-columns:1fr; gap:0; } }

.mgroup{ padding: 26px 0 30px; }

.mgroup h3{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  font-size:20px; letter-spacing:-.02em; margin:0 0 4px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line, #23252f);
}
.mgroup h3 .mnum{
  font-family:'JetBrains Mono',monospace; font-weight:400;
  font-size:11px; letter-spacing:.14em; color:var(--pa); opacity:.9;
}
.mgroup h3 em{
  font-style:normal; font-weight:400;
  font-family:'JetBrains Mono',monospace;
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  opacity:.45; margin-inline-start:auto;
}

.mgroup ul{ list-style:none; margin:0; padding:0; }

.mgroup li{
  display:grid; grid-template-columns: minmax(150px, 34%) 1fr;
  gap:16px; align-items:baseline;
  padding:11px 0 11px 18px;
  position:relative;
  border-bottom:1px solid rgba(255,255,255,.045);
  transition:background .2s, padding-inline-start .2s;
}
@media (max-width:620px){
  .mgroup li{ grid-template-columns:1fr; gap:3px; }
}
.mgroup li:last-child{ border-bottom:none; }

/* The marker sits in the indent, so the items read as falling under the heading
   rather than as a flat block of text. */
.mgroup li::before{
  content:''; position:absolute;
  inset-inline-start:0; top:17px;
  width:6px; height:6px; border-radius:50%;
  background:var(--pa); opacity:.5;
  transition:opacity .2s, transform .2s;
}
.mgroup li:hover{ background:rgba(124,92,255,.045); }
.mgroup li:hover::before{ opacity:1; transform:scale(1.35); }

.mgroup li b{ font-size:14px; font-weight:600; letter-spacing:-.01em; }
.mgroup li span{ font-size:13px; line-height:1.6; opacity:.62; }

/* ── deployment triptych ───────────────────────────────────────── */
/* The three ways Kairos runs. This is the question every buyer asks first, so
   it gets its own row rather than a paragraph. */
.deploy{
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap:18px;
}
@media (max-width:900px){ .deploy{ grid-template-columns:1fr; } }

.dep{
  border:1px solid var(--line, #23252f);
  border-radius:18px; padding:24px;
  background:linear-gradient(160deg, var(--pa-soft), transparent 60%);
}
.dep .num{
  font-family:'JetBrains Mono',monospace; font-size:11px;
  letter-spacing:.14em; color:var(--pa); text-transform:uppercase;
}
.dep h3{ font-size:19px; margin:10px 0 8px; letter-spacing:-.02em; }
.dep p{ font-size:13.2px; line-height:1.7; opacity:.78; margin:0 0 14px; }
.dep ul{ list-style:none; padding:0; margin:0; }
.dep li{
  font-size:12.6px; opacity:.72; padding:5px 0 5px 18px;
  position:relative;
}
.dep li::before{
  content:'▸'; position:absolute; left:0; color:var(--pa); opacity:.8;
}

/* ── numbers strip ─────────────────────────────────────────────── */
.kpis{
  display:grid; grid-template-columns: repeat(4,1fr);
  gap:18px; text-align:center;
}
@media (max-width:820px){ .kpis{ grid-template-columns: repeat(2,1fr); } }

.kpi .n{
  display:block; font-family:'Space Grotesk',sans-serif;
  font-size:clamp(30px,4.4vw,46px); font-weight:700;
  letter-spacing:-.03em; color:var(--pa-hi);
}
.kpi .l{
  display:block; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; opacity:.6; margin-top:4px;
}

/* ── faq ───────────────────────────────────────────────────────── */
/* Native <details> so every answer is readable with JavaScript disabled and
   findable by the browser's own search. */
.faq{
  border-top:1px solid var(--line, #23252f);
}
.faq details{
  border-bottom:1px solid var(--line, #23252f);
}
.faq summary{
  display:flex; align-items:center; gap:18px;
  padding:22px 4px; cursor:pointer;
  font-size:16px; font-weight:600; letter-spacing:-.01em;
  list-style:none;
  transition:color .2s;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--pa-hi); }
.faq summary span{ flex:1; }

/* A plus that becomes a minus — cheaper than an icon and never mis-rotates. */
.faq summary i{
  position:relative; flex:0 0 auto;
  width:15px; height:15px;
}
.faq summary i::before,
.faq summary i::after{
  content:''; position:absolute; inset-inline-start:0; top:7px;
  width:15px; height:1.5px; background:var(--pa);
  transition:transform .25s ease, opacity .25s ease;
}
.faq summary i::after{ transform:rotate(90deg); }
.faq details[open] summary{ color:var(--pa-hi); }
.faq details[open] summary i::after{ transform:rotate(0deg); opacity:0; }

.faq details p{
  margin:0; padding:0 46px 26px 4px;
  font-size:14.5px; line-height:1.85; opacity:.74;
  max-width:78ch;
}
[dir="rtl"] .faq details p{ padding:0 4px 26px 46px; }

.faq-foot{
  margin-top:28px; font-size:14px; opacity:.66;
}
.faq-foot a{ color:var(--pa-hi); }