:root {
  /* ---------- COLOR ---------- */
  --paper: #fff; /* */
  --paper-deep: #f1f7fa;
  --paper-shadow: #d6d9da;

  /* Neutral spine — near-monochrome, slightly cool */
  --ink:           #15171A;   /* primary text, headings */
  --slate:         #4A4E57;   /* secondary text */
  --mute:          #8A8F99;   /* tertiary text, placeholders, captions */
  --hairline:      #E6E7EA;   /* 1px borders, dividers */
  --hairline-soft: #F0F0F2;   /* very faint internal rules */
  --surface:       #FFFFFF;   /* default page bg */
  --surface-subtle:#F6F6F7;   /* cards, code blocks, table headers */
  --surface-sunken:#EEEEF0;   /* deeper subtle, eg disabled */

  /* Accent — engineering blue. Used for primary buttons,
     links, focus rings, selected tree rows. ONE accent. */
  --accent: #2b7ca3;
  --accent-deep: #6b1f15;
  --accent-soft: #b8463a;

  /* --accent:        #2356C9; */
  --accent-hover:  #1E48A8;   /* ~6% darker in OKLCH-L */
  --accent-press:  #173887;
  --accent-tint:   #EAF0FB;   /* 8% accent over white */
  --accent-ring:   rgba(35, 86, 201, 0.32);

  /* Risk / semantic palette — used in matrices, FMEA severity,
     event status, action priority. Not for decoration. */
  --risk-low:        #1B8754;   /* green  */
  --risk-low-tint:   #E6F4ED;
  --risk-medium:     #C7841A;   /* amber  */
  --risk-medium-tint:#FBF1DE;
  --risk-high:       #C43C1F;   /* red    */
  --risk-high-tint:  #FAE6E1;
  --risk-info:       #5B6CC2;   /* blue (info / neutral high-prio) */
  --risk-info-tint:  #ECEEF8;

  /* ---------- TYPE FAMILIES ---------- */
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", "Menlo",
               "Consolas", monospace;
  /* Reserved for editorial. Currently same as sans (no serif in brand). */
  --font-display: var(--font-sans);
}


body { font-family: var(--font-sans), sans-serif; color: var(--ink); margin-top: 0px; font-size: 15.5px; background-color: white; }
p { text-align: justify; margin-bottom: 1em }


.footer {
	margin-top: 3rem;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	background-color: var(--surface-subtle);
	padding: 2rem 0;
	text-align: center;
}

a { color: #366088; }
a.no-u { text-decoration: none; }
a:hover { color: #777; }
:target { color: red !important }

img { max-width: 100%; height: auto; display: block; }
img.icon { display:inline; width:18px; height:18px; }
img.icon-sm { display:inline; width:15px; height:15px; margin-bottom: 3px}
img.icon-big { display:inline; width:30px; height:30px; }

/* Headers */
h1, h2,h3,h4,h5,h6 { font-family: var(--font-sans), sans-serif; font-weight: 600; color: #333; margin-bottom: 1rem; }

h5 { font-size: 1rem; }
h4 { font-size: 1rem; }
h3 { font-size: 1.5rem; }
h2 { font-size: 24px; }
h1 { font-size: 36px;}
.title { font-family: var(--font-sans), sans-serif; font-size: 3.0rem; font-weight: 400; color: #333; margin-bottom: 1.5rem; }

hr {border-top: 2px solid #999; margin:0; padding: 0; }

/* Tables */
.hrow, .table, .hcol { 
    nborder-top: 1px solid #ddd; 
    border-bottom: 1px solid #ddd; 
    border-collapse: collapse; 
    border-spacing: 0px; 
    display: table;
    max-width: 100%;
    margin: 2rem 1rem;
    vertical-align: top;
}

.hrow th { color: #4176a9 }

thead { font-weight: bold; border-bottom: 2px solid #333}
thead td { border-bottom: solid 1px #666; }
.hrow tr { display: table-row; vertical-align: inherit; border-color: inherit; }
.hrow th, td { border-top: 0; border-bottom: 1px solid #ccc; padding: 0.5rem }

.bg-dark {
    background-color: #152b45!important;
}

.navbar { box-shadow: 0 2px 3px #111; transition: top 0.25s ease; }

.btn-primary {
    color: #fff;
    background-color: #4074ad;
    border-color: #4074ad;
}

.medblue0 {
	background: #366088;
}

.medblue1 {
	background: #668db8;
}

.medblue2 {
	background: #93aec5;
}

.medblue3 {
	background: #b6ccdb;
}

.hero {
	background: #234266 ;
    background: linear-gradient(135deg, #234266 0%, #1a314d 100%);
}

.herow {
	color: #333;
	background-color: white;
	padding: 5rem 0 2rem 0;
}

.hero2 {
	color: white;
	background: #668db8;
	padding: 1%;
    /*  background: rgb(56,138,181); */
  background: linear-gradient(150deg, rgba(56,138,181,1) 0%, rgba(4,53,88,1) 100%);
}

.hero button {
	background: #366088;
}

.hero h1 {
	color: white;
}

.hero p {
	font-size: 1.2em;
}

.list-dir {
	color: #369;
	font-size: 1.2em;
}

.btn-light {
	border: 1px solid #ddd;
	background-color: white;
}

.btn-success {
	background-color: #668db8;
	border-color: #668db8;
}

.btn-success:hover {
    background-color: #93aec5;
}

.table {
	border-bottom: 1px solid #ddd;
}

.bg-light {
    background-color: #d7dde0; /* #fff!important; */
}

.nav-hr {
	border-top: 1px solid #bdbdbd;
}

.breadcrumb a { color: white; }

.breadcrumb {
	background: #444; 
	padding-top: 10px!important; 
	padding: 12px; 
	border-bottom: 1px solid #ddd;
	margin-bottom: 0px;
	font-size: 16px;
	color: #eee;
	ntext-shadow: 1px 1px 1px white;
	border-radius: 0;
}

p.quote {
    margin: 1rem 0;
    padding: 1rem;
    background: var(--paper-deep);
    border-left: 3px solid var(--accent);
}

pre {
    margin: 1rem 0;
    padding: 0.5rem;
    background: var(--surface-subtle);
    border: 1px solid var(--paper-shadow);
    border-radius: 6px; 
}

.slides {
 box-shadow: 2px 2px 10px #000;
 margin: 0;
 width: 100%;		   	/* responsive */
 padding-bottom: 45%; 	/* what is this for ??? */
 overflow: hidden;    	/* if images after resizing exceed x or y, don't show that part.
			  	   Images that are smaller than the .slides div in x oy y are a
                        problem */
 position: relative;  	/* needed by position:absolute later */
}


.slides img {
 position: absolute;  	/* all images at the same overlapping position */
 opacity: 1;			/* default: totally transparent */
 width: 100%;			/* responsive */
 height: auto;		/* fit x, hope resized image fills y */
}


.slides img:first-child {
}


.slides img:last-child {
}

/* ── Documentation pages ─────────────────────────────────────────── */

.doc-sidebar {
    border-radius-bottom-right: 6px;
    padding: 2rem 0.8rem;
    position: sticky;
    top: 70px;
    font-size: 0.88rem;
    border-right: 1px solid #ddd;
}

@media (min-width: 992px) {
    .doc-sidebar {
        min-height: 100vh;
    }
}

.doc-sidebar .doc-title {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #333;
    padding: 0.2rem 0.6rem 0.6rem 0.6rem;
    margin-bottom: 0.2rem;
}

.doc-sidebar .doc-section {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #999;
    padding: 0.8rem 0.6rem 0.3rem 0.6rem;
    display: block;
}

.doc-sidebar a {
    display: block;
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    color: #366088;
    text-decoration: none;
    line-height: 1.4;
}

.doc-sidebar a:hover {
    background: #f0f4f8;
    color: #2a4a6a;
}

.doc-content {
    background: white;
    border-radius: 6px;
    padding: 1.5rem 0;
    min-height: 60vh;
}

@media (min-width: 992px) {
    .doc-content {
        padding: 2rem 5rem;
    }
}

.prices-steps li {
	margin-bottom: 1rem;
}

.prices-steps {
	padding:0;
}

.feature-contact {
	margin: 2rem;
	padding: 2rem;
	background-color: white;
}

.features {
	background: #e0e5ea;
}

/* Feature grid */
.feature-tile {
  background: #f8f9fa;
  border-radius: 6px;
  padding: 1.4rem 1.5rem;
  height: 100%;
  border: 1px solid #E6E7EA;
}
.feature-tile h3 {
  font-size: 1rem;
  font-weight: 600;
  color: #2a4a6a;
  margin: 0.6rem 0 0.4rem 0;
}
.feature-tile p {
  font-size: 0.9rem;
  color: #555;
  margin: 0;
  text-align: left;
}

.feature-tile a {
	color: #2a4a6a;
	text-decoration: none;
}

.feature-header {
	margin-bottom: 0.1rem;
}

.feature-dot {
	color: #8eb4cb;
}


.feature-title {
	color: black;
	font-size: 1.2rem;
	font-family: 'IBM Plex Sans', sans-serif;
	font-weight: 600;
}

h2.section-head {
	font-weight: 600;
	font-size: 2rem;
	color: black;
}

h1.section-head {
	font-weight: 600;
	font-size: 3rem;
	color: black;
}

.pricing-cta {
  border-radius: 12px;
  border: 1px solid #E6E7EA;
  padding: 56px 48px;
  gap: 32px;
  background:
    radial-gradient(ellipse 80% 60% at 100% 0%, rgba(35,86,201,0.05), transparent),
    #fff;
}

.pricing-cta p {
  font-size: 16px;
  color: #4A4E57;
  margin: 0 0 24px 0;
  max-width: 1480px;
  line-height: 1.55;
}
.pricing-card {
  border: 1px solid #E6E7EA;
  border-radius: 10px;
  padding: 24px;
  background: #F6F6F7;
}

.card-top {
	border-top: 3px solid #8cb3bc;
}


.pricing-card .label {
  font-size: 1.3rem;
  font-weight: 700;
  color: black;
}
.pricing-card .sublabel {
  font-size: 1rem;
  font-weight: 400;
  color: #666;
}
.pricing-card .amount {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.pricing-card .price {
  font-size: 44px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #15171A;
}
.pricing-card .amount .unit { color: #8A8F99 ; font-size: 14px; }
.pricing-card ul { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-direction: column; gap: 6px; }
.pricing-card ul li { font-size: 13.5px; color: #4A4E57; display: flex; align-items: flex-start; gap: 8px; }
.pricing-card ul li svg { color: #2356C9; margin-top: 2px; flex-shrink: 0; }

.faq-title {
	margin-bottom:0.5rem;
	font-weight:bold;
	
}

.faq-text {
	font-family: var(--font-sans);
	font-weight:400;
	color: #666;
}

.code-block {
	border: 1px solid var(--hairline);
	background-color: #fcfcfc;
	border-radius: 6px;
	padding: 1rem;
}

.card-email {
	font-weight: 600;
	font-size: 1.15rem;
}