/* Sentrimax AI Content Upgrade — page components
   Palette and type are taken from the live Elementor kit so these blocks sit inside the
   existing design rather than beside it:
     primary  #141E47   accent #0C90EB   text #454545
     tints    #F0F8FF / #CDEAFF
     type     Founders Grotesk Bold (headings) / Mona Sans (body)
   Everything inherits the theme font stack by default and only falls back if the theme
   has not set one, so the plugin never fights the site's typography. */

.sx-content{
  --sx-primary:#141E47; --sx-accent:#0C90EB; --sx-text:#454545;
  --sx-tint:#F0F8FF; --sx-tint2:#CDEAFF; --sx-line:#d9e4f0; --sx-white:#fff;
  --sx-radius:10px; --sx-gap:clamp(1rem,2.5vw,1.75rem);
  color:var(--sx-text); font-size:clamp(1rem,.55vw + .92rem,1.0625rem); line-height:1.72;
  max-width:78ch; margin-inline:auto;
}
.sx-content > * + *{margin-block-start:1.05em}
.sx-content h2,.sx-content h3{
  color:var(--sx-primary); font-family:"Founders Grotesk Bold","Familjen Grotesk",inherit;
  line-height:1.2; text-wrap:balance; margin-block:1.9em .55em;
}
.sx-content h2{font-size:clamp(1.4rem,1.4vw + 1.05rem,1.85rem)}
.sx-content h3{font-size:clamp(1.12rem,.7vw + .95rem,1.3rem); margin-block-start:1.5em}
.sx-content h2:first-child,.sx-content h3:first-child{margin-block-start:0}
.sx-content a{color:var(--sx-accent); text-underline-offset:.16em; text-decoration-thickness:.06em}
.sx-content a:hover,.sx-content a:focus-visible{color:var(--sx-primary)}
.sx-content strong{color:var(--sx-primary)}
.sx-content ul,.sx-content ol{padding-inline-start:1.35em}
.sx-content li + li{margin-block-start:.4em}

/* ---- answer block: the first 40-60 words, built to be lifted ---- */
.sx-content .sx-answer{
  background:var(--sx-tint); border-left:4px solid var(--sx-accent);
  border-radius:var(--sx-radius); padding:clamp(1rem,2vw,1.4rem) clamp(1.1rem,2.2vw,1.6rem);
  font-size:1.1em; line-height:1.62; color:var(--sx-primary); font-weight:500; margin-block-end:1.6em;
}

/* ---- callout / caution ---- */
.sx-callout,.sx-warn{
  border-radius:var(--sx-radius); padding:clamp(1rem,2vw,1.35rem) clamp(1.1rem,2.2vw,1.5rem);
  margin-block:1.7em; border:1px solid var(--sx-line); background:var(--sx-tint);
}
.sx-warn{background:#FFF7ED; border-color:#F5D9B0; border-left:4px solid #C2710C}
.sx-callout{border-left:4px solid var(--sx-primary)}
.sx-callout h3,.sx-warn h3{margin:0 0 .4em; font-size:1.02rem; letter-spacing:.01em}
.sx-warn h3{color:#8A4B06}
.sx-callout > :last-child,.sx-warn > :last-child{margin-block-end:0}

/* ---- tables: must scroll inside themselves, never push the page sideways ---- */
.sx-table-wrap{overflow-x:auto; margin-block:1.7em; border:1px solid var(--sx-line); border-radius:var(--sx-radius)}
.sx-content table.sx-table{border-collapse:collapse; width:100%; min-width:32rem; font-size:.95em; margin:0}
.sx-table th,.sx-table td{padding:.7rem .85rem; text-align:left; vertical-align:top; border-bottom:1px solid var(--sx-line)}
.sx-table thead th{background:var(--sx-primary); color:#fff; font-weight:600; font-size:.9em; letter-spacing:.02em}
.sx-table tbody tr:nth-child(even){background:var(--sx-tint)}
.sx-table tbody tr:last-child td{border-bottom:0}

/* ---- checklist ---- */
.sx-content ul.sx-check{list-style:none; padding-inline-start:0; margin-block:1.4em}
.sx-check li{position:relative; padding-inline-start:1.9em; margin-block-start:.55em}
.sx-check li::before{
  content:""; position:absolute; inset-inline-start:0; inset-block-start:.42em;
  width:1.05em; height:.55em; border-inline-start:2.5px solid var(--sx-accent);
  border-block-end:2.5px solid var(--sx-accent); transform:rotate(-45deg);
}

/* ---- numbered process ---- */
.sx-content ol.sx-steps{list-style:none; counter-reset:sx; padding-inline-start:0; margin-block:1.5em}
.sx-steps li{position:relative; counter-increment:sx; padding-inline-start:3rem; margin-block-start:1.05em; min-height:2.1rem}
.sx-steps li::before{
  content:counter(sx,decimal-leading-zero); position:absolute; inset-inline-start:0; inset-block-start:-.1em;
  width:2.1rem; height:2.1rem; display:grid; place-items:center; border-radius:50%;
  background:var(--sx-primary); color:#fff; font-size:.78rem; font-weight:700; letter-spacing:.02em;
}

/* ---- card grid ---- */
.sx-grid{display:grid; gap:var(--sx-gap); margin-block:1.7em;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.sx-card{background:var(--sx-white); border:1px solid var(--sx-line); border-radius:var(--sx-radius);
  padding:clamp(1rem,2vw,1.35rem)}
.sx-card h3{margin-block:0 .4em; font-size:1.02rem}
.sx-card > :last-child{margin-block-end:0}

/* ---- spec / definition list ---- */
.sx-spec{background:var(--sx-tint); border-radius:var(--sx-radius); padding:clamp(1rem,2vw,1.4rem); margin-block:1.7em}
.sx-spec dl{display:grid; grid-template-columns:minmax(7rem,auto) 1fr; gap:.5em 1.2em; margin:0}
.sx-spec dt{color:var(--sx-primary); font-weight:600; font-size:.93em}
.sx-spec dd{margin:0}
@media (max-width:30rem){.sx-spec dl{grid-template-columns:1fr; gap:.15em}
  .sx-spec dd{margin-block-end:.6em}}

/* ---- FAQ ---- */
.sx-faq{margin-block-start:2.6em}
.sx-faq > h2{margin-block-end:.7em}
.sx-faq details{border:1px solid var(--sx-line); border-radius:var(--sx-radius); margin-block-start:.6em; background:var(--sx-white)}
.sx-faq summary{cursor:pointer; padding:.85rem 1.1rem; font-weight:600; color:var(--sx-primary);
  list-style:none; display:flex; justify-content:space-between; gap:1rem; align-items:center}
.sx-faq summary::-webkit-details-marker{display:none}
.sx-faq summary::after{content:"+"; font-size:1.3em; line-height:1; color:var(--sx-accent); flex:0 0 auto}
.sx-faq details[open] summary::after{content:"\2212"}
.sx-faq details[open] summary{border-block-end:1px solid var(--sx-line)}
.sx-faq .sx-faq-a{padding:.9rem 1.1rem 1.1rem}
.sx-faq .sx-faq-a > :last-child{margin-block-end:0}
.sx-faq summary:focus-visible{outline:2px solid var(--sx-accent); outline-offset:2px}

/* ---- CTA band ---- */
.sx-cta{background:var(--sx-primary); color:#fff; border-radius:var(--sx-radius);
  padding:clamp(1.3rem,3vw,2.1rem); margin-block-start:2.4em; text-align:center}
.sx-cta p{color:#D7E3F4; margin:0 auto .95em; max-width:52ch}
.sx-cta h2{color:#fff; margin-block:0 .45em}
.sx-btn{display:inline-block; background:var(--sx-accent); color:#fff !important; text-decoration:none;
  font-weight:600; padding:.8em 1.6em; border-radius:999px; transition:background .15s ease, transform .15s ease}
.sx-btn:hover,.sx-btn:focus-visible{background:#0A7BC8; color:#fff !important; transform:translateY(-1px)}
.sx-btn:focus-visible{outline:2px solid #fff; outline-offset:3px}
.sx-cta-phones{margin-block-start:1em; font-size:.93em; color:#C3D5EC}
.sx-cta-phones a{color:#fff; text-decoration:underline}

/* ---- hub link block ---- */
.sx-related{border-block-start:2px solid var(--sx-line); margin-block-start:2.6em; padding-block-start:1.4em}
.sx-related h2{margin-block-start:0}

/* ---- breadcrumb ---- */
.sx-crumb{font-size:.88rem; color:#6b7684; margin-block-end:1.1em}
.sx-crumb a{color:#6b7684}
.sx-crumb a:hover{color:var(--sx-accent)}

@media (prefers-reduced-motion:reduce){.sx-btn{transition:none}.sx-btn:hover{transform:none}}
@media print{.sx-cta,.sx-related{display:none}.sx-faq details{border:0}}