/* Kraftallians produktsida på nordicextern.se/kraftallians/.
   Bygger på /styles.css och använder samma färger, typsnitt och mått.
   Inga inline-stilar eller skript, eftersom webbplatsens säkerhetspolicy inte tillåter det. */

.nav-links a[aria-current="page"] { color: var(--accent-dark); }
.nav-panel a[aria-current="page"] { color: var(--accent-dark); }

/* Hero */
.ka-hero { padding-bottom: clamp(40px, 7vh, 80px); }
.ka-hero h1 { max-width: none; }
.ka-hero .lead-title { max-width: 30ch; }
.ka-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 36px; }
.ka-btn { font-size: 16px; padding: 14px 22px; }
.ka-secondary {
  font-weight: 800; font-size: 16px; letter-spacing: -0.01em;
  border-bottom: 2px solid var(--accent); padding: 4px 0;
}
.ka-note { margin-top: 20px; font-size: 14px; line-height: 1.6; color: var(--muted-2); max-width: 46ch; }

/* Skärmbild */
.ka-shot { margin-top: clamp(8px, 2vh, 24px); }
.ka-shot img {
  width: 100%; height: auto;
  border: 1px solid color-mix(in srgb, #201e1d 18%, transparent);
  box-shadow: 0 24px 60px -28px rgba(32, 30, 29, .35);
  background: #fff;
}
.ka-shot figcaption { margin-top: 14px; font-size: 13px; line-height: 1.6; color: var(--muted-2); }

/* Funktioner: tre kolumner på bred skärm */
.ka-features { padding-bottom: clamp(56px, 9vh, 110px); }
.ka-features .sit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 64px; row-gap: 56px; }
.ka-features .sit-grid h3 { font-size: clamp(21px, 1.9vw, 26px); }
.ka-features .sit-grid p { max-width: 36ch; }
@supports (grid-template-rows: subgrid) {
  .ka-features .sit-grid > div { row-gap: 14px; }
}
@media (max-width: 1024px) {
  .ka-features .sit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
}
@media (max-width: 780px) {
  .ka-features .sit-grid { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .ka-features .sit-grid > div > p { margin-top: 12px; }
}

/* Behöver din uppmärksamhet */
.ka-attention { padding: clamp(56px, 10vh, 120px) 0; border-top: 2px solid var(--divider); }
.ka-attention h2 { font-size: clamp(28px, 3.6vw, 46px); line-height: 1.08; letter-spacing: -0.03em; max-width: 16ch; }
.ka-attention-intro .body-text { margin-top: 28px; }
.ka-list { margin-top: 0; max-width: 52ch; }
@media (max-width: 900px) { .ka-list { margin-top: 40px; } }

/* Bra att veta */
.ka-facts { padding: clamp(56px, 10vh, 120px) 0; border-top: 2px solid var(--divider); }
.ka-facts h2 { font-size: clamp(28px, 3.6vw, 46px); line-height: 1.08; letter-spacing: -0.03em; max-width: 18ch; }
.ka-facts-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 64px; margin-top: clamp(32px, 5vh, 56px);
}
.ka-facts-grid h3 { font-size: 19px; line-height: 1.3; letter-spacing: -0.01em; }
.ka-facts-grid .body-text { margin-top: 12px; font-size: 15.5px; line-height: 27px; }
@media (max-width: 900px) { .ka-facts-grid { grid-template-columns: minmax(0, 1fr); } }

/* Avslutande uppmaning */
.ka-cta .contact-row .body-text + .body-text { margin-top: 12px; }
.ka-btn-end { margin-top: 28px; }

/* Systemutveckling efter behov */
.ka-system { padding: clamp(56px, 10vh, 120px) 0; border-top: 2px solid var(--divider); }
.ka-system h2 { font-size: clamp(28px, 3.6vw, 46px); line-height: 1.08; letter-spacing: -0.03em; max-width: 16ch; }
.ka-system .split .body-text { margin-top: 8px; }
@media (max-width: 900px) { .ka-system .split .body-text { margin-top: 24px; } }
.ka-sys-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 48px; margin-top: clamp(40px, 7vh, 72px);
}
.ka-sys-grid > div {
  display: grid; grid-template-columns: 40px 1fr; gap: 4px 10px;
  padding: 18px 0; border-top: 2px solid var(--divider); min-width: 0;
}
.ka-num { font-weight: 800; font-size: 15px; color: var(--accent-dark); font-feature-settings: "tnum"; padding-top: 2px; }
.ka-sys-grid h3 { font-size: 18px; line-height: 1.3; letter-spacing: -0.01em; }
.ka-sys-grid p { grid-column: 2; font-size: 15px; line-height: 26px; color: var(--muted-2); }
.ka-sys-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; margin-top: 40px; padding-top: 28px; border-top: 2px solid var(--divider); }
.ka-sys-cta .body-text { max-width: 52ch; }
@media (max-width: 1024px) { .ka-sys-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 780px) { .ka-sys-grid { grid-template-columns: minmax(0, 1fr); } }