/* ==========================================================================
   SouthEast IT — Buyer's Guide article system
   Brand tokens taken from the SEIT Design System (navy / magenta / cyan, Roboto).
   Scoped to .entry-content so nothing here can leak into the rest of the site.
   ========================================================================== */

.entry-content {
  --seit-ink:      #002A3A;
  --seit-ink-deep: #02141D;
  --seit-magenta:  #D0006F;
  --seit-cyan:     #3EB1C8;
  --seit-grey:     #F2F2F2;
  --seit-muted:    #59747E;
  --seit-line:     #DFE4E6;
  --seit-radius:   4px;
}

/* --- Shared type -------------------------------------------------------- */

.entry-content .seit-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--seit-cyan);
  margin: 0 0 .5rem;
  line-height: 1.4;
}

.entry-content .seit-lede {
  font-size: clamp(17px, 1.05rem + .25vw, 20px);
  line-height: 1.65;
  color: var(--seit-ink);
}

/* Section headings get a short magenta rule above them. */
.entry-content .seit-rule {
  position: relative;
  padding-top: 1.35rem;
  margin-top: 3.25rem;
}
.entry-content .seit-rule::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 48px; height: 3px;
  background: var(--seit-magenta);
}

/* --- 1. Direct answer card (AEO snippet target) ------------------------- */

.entry-content .seit-answer {
  background: var(--seit-ink);
  color: #fff;
  padding: clamp(1.6rem, 4vw, 2.6rem);
  border-radius: var(--seit-radius);
  border-left: 5px solid var(--seit-magenta);
  margin: 2rem 0 2.5rem;
}
.entry-content .seit-answer .seit-eyebrow { color: var(--seit-cyan); }
.entry-content .seit-answer p {
  color: #EAF1F4;
  font-size: clamp(16px, 1rem + .3vw, 19px);
  line-height: 1.7;
  margin: 0 0 1rem;
}
.entry-content .seit-answer p:last-child { margin-bottom: 0; }
.entry-content .seit-answer strong { color: #fff; }

/* --- 2. Stat strip ------------------------------------------------------ */

.entry-content .seit-stats {
  border-top: 1px solid var(--seit-line);
  border-bottom: 1px solid var(--seit-line);
  padding: 1.6rem 0;
  margin: 2.5rem 0;
  gap: 1.25rem;
}
.entry-content .seit-stats .wp-block-column { padding: 0 .25rem; }
.entry-content .seit-stat-n {
  display: block;
  font-size: clamp(26px, 1.4rem + 1.1vw, 34px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--seit-ink);
  font-variant-numeric: tabular-nums;
  margin: 0 0 .25rem;
}
.entry-content .seit-stat-l {
  display: block;
  font-size: 13px;
  line-height: 1.45;
  color: var(--seit-muted);
  margin: 0;
}

/* --- 3. Table of contents ---------------------------------------------- */

.entry-content .seit-toc {
  background: var(--seit-grey);
  border-radius: var(--seit-radius);
  padding: clamp(1.4rem, 3vw, 2rem) clamp(1.4rem, 3vw, 2.2rem);
  margin: 2.5rem 0 3rem;
}
.entry-content .seit-toc .seit-eyebrow { color: var(--seit-ink); }
.entry-content .seit-toc ol {
  counter-reset: seittoc;
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 2.25rem;
}
.entry-content .seit-toc li {
  counter-increment: seittoc;
  position: relative;
  padding-left: 2.1rem;
  margin: 0 0 .7rem;
  break-inside: avoid;
  font-size: 15px;
  line-height: 1.5;
}
.entry-content .seit-toc li::before {
  content: counter(seittoc, decimal-leading-zero);
  position: absolute;
  left: 0; top: .1em;
  font-size: 12px;
  font-weight: 700;
  color: var(--seit-magenta);
  font-variant-numeric: tabular-nums;
}
.entry-content .seit-toc a {
  color: var(--seit-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.entry-content .seit-toc a:hover {
  color: var(--seit-magenta);
  border-bottom-color: var(--seit-magenta);
}

/* --- 4. Criterion blocks ------------------------------------------------ */

.entry-content .seit-crit {
  border-top: 1px solid var(--seit-line);
  padding-top: 2.25rem;
  margin-top: 3rem;
}
.entry-content .seit-crit-no {
  font-size: clamp(40px, 2rem + 2.4vw, 60px);
  font-weight: 700;
  line-height: .9;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--seit-cyan);
  font-variant-numeric: tabular-nums;
  margin: 0 0 .4rem;
  display: block;
}

/* Ask-this box */
.entry-content .seit-ask {
  background: #fff;
  border: 1px solid var(--seit-line);
  border-left: 4px solid var(--seit-cyan);
  border-radius: var(--seit-radius);
  padding: 1.25rem 1.4rem;
  margin: 1.75rem 0;
}
.entry-content .seit-ask p { margin: 0; font-size: 15.5px; line-height: 1.65; }
.entry-content .seit-ask .seit-eyebrow { margin-bottom: .35rem; }

/* Good / red-flag pair */
.entry-content .seit-verdict { gap: 1.25rem; margin: 1.75rem 0 0; }
.entry-content .seit-good,
.entry-content .seit-bad {
  border-radius: var(--seit-radius);
  padding: 1.2rem 1.35rem;
  height: 100%;
}
.entry-content .seit-good { background: rgba(62,177,200,.08); border-top: 3px solid var(--seit-cyan); }
.entry-content .seit-bad  { background: rgba(208,0,111,.06);  border-top: 3px solid var(--seit-magenta); }
.entry-content .seit-good .seit-eyebrow { color: #1F7D91; }
.entry-content .seit-bad  .seit-eyebrow { color: var(--seit-magenta); }
.entry-content .seit-good p,
.entry-content .seit-bad p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--seit-ink); }

/* --- 5. Checklists ------------------------------------------------------ */

.entry-content .seit-check { list-style: none; margin: 1.5rem 0; padding: 0; }
.entry-content .seit-check li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: .85rem;
  line-height: 1.6;
}
.entry-content .seit-check li::before {
  content: "";
  position: absolute;
  left: 0; top: .42em;
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 2.5px solid var(--seit-magenta);
}

/* --- 6. Photo bands (core/cover) ---------------------------------------- */

.entry-content .seit-band {
  border-radius: var(--seit-radius);
  overflow: hidden;
  margin: 3rem 0;
}
.entry-content .seit-band .wp-block-cover__inner-container { max-width: 760px; }
.entry-content .seit-band p { color: #fff; }
.entry-content .seit-band .seit-eyebrow { color: var(--seit-cyan); }
.entry-content .seit-band .seit-quote {
  font-size: clamp(20px, 1.15rem + .9vw, 30px);
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: -.01em;
  margin: 0;
  color: #fff;
}
.entry-content .seit-band .seit-attrib {
  font-size: 13.5px;
  color: #B9CCD4;
  margin: 1rem 0 0;
  font-weight: 400;
}

/* --- 7. Comparison table ------------------------------------------------ */

.entry-content .seit-table { margin: 2rem 0 2.5rem; }
.entry-content .seit-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  background: #fff;
}
.entry-content .seit-table thead th {
  background: var(--seit-ink);
  color: #fff;
  text-align: left;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .95rem 1rem;
  border: none;
}
.entry-content .seit-table tbody td {
  padding: .95rem 1rem;
  border: none;
  border-bottom: 1px solid var(--seit-line);
  vertical-align: top;
  line-height: 1.55;
  color: var(--seit-ink);
}
.entry-content .seit-table tbody tr:nth-child(odd) td { background: #FAFBFC; }
.entry-content .seit-table tbody td:first-child {
  font-weight: 700;
  color: var(--seit-ink);
  width: 24%;
}
.entry-content .seit-table tbody td:last-child { color: var(--seit-magenta); }
.entry-content .seit-table figcaption {
  font-size: 13px;
  color: var(--seit-muted);
  margin-top: .75rem;
}

/* --- 8. Pricing cards --------------------------------------------------- */

.entry-content .seit-plans { gap: 1rem; margin: 2rem 0 1rem; }
.entry-content .seit-plan {
  border: 1px solid var(--seit-line);
  border-radius: var(--seit-radius);
  padding: 1.5rem 1.4rem;
  height: 100%;
  background: #fff;
}
.entry-content .seit-plan--feature {
  background: var(--seit-ink);
  border-color: var(--seit-ink);
}
.entry-content .seit-plan--feature .seit-plan-n,
.entry-content .seit-plan--feature .seit-plan-p { color: #fff; }
.entry-content .seit-plan--feature .seit-plan-d { color: #B9CCD4; }
.entry-content .seit-plan--feature .seit-eyebrow { color: var(--seit-cyan); }
.entry-content .seit-plan-n {
  font-size: 13px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--seit-muted); margin: 0 0 .6rem;
}
.entry-content .seit-plan-p {
  font-size: clamp(28px, 1.5rem + 1.2vw, 36px);
  font-weight: 700; line-height: 1; color: var(--seit-ink);
  font-variant-numeric: tabular-nums; margin: 0 0 .15rem;
}
.entry-content .seit-plan-p span { font-size: 14px; font-weight: 400; color: var(--seit-muted); }
.entry-content .seit-plan--feature .seit-plan-p span { color: #8FAEB9; }
.entry-content .seit-plan-d { font-size: 14px; line-height: 1.55; color: var(--seit-muted); margin: .75rem 0 0; }

/* --- 9. Citable facts panel (GEO) --------------------------------------- */

.entry-content .seit-facts {
  background: var(--seit-ink-deep);
  border-radius: var(--seit-radius);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  margin: 3rem 0;
}
.entry-content .seit-facts h2,
.entry-content .seit-facts h3 { color: #fff; margin-top: 0; }
.entry-content .seit-facts p { color: #C7D6DC; line-height: 1.7; }
.entry-content .seit-facts strong { color: #fff; }
.entry-content .seit-facts a { color: var(--seit-cyan); }
.entry-content .seit-facts .seit-check li { color: #C7D6DC; }
.entry-content .seit-facts .seit-check li::before { border-color: var(--seit-cyan); }

/* --- 10. FAQ (Rank Math block) ------------------------------------------ */

.entry-content .seit-faq .rank-math-list-item {
  border-bottom: 1px solid var(--seit-line);
  padding: 1.35rem 0;
  margin: 0;
}
.entry-content .seit-faq .rank-math-list-item:first-child { border-top: 1px solid var(--seit-line); }
.entry-content .seit-faq .rank-math-question {
  font-size: clamp(17px, 1rem + .25vw, 19px);
  font-weight: 700;
  color: var(--seit-ink);
  margin: 0 0 .55rem;
  line-height: 1.4;
}
.entry-content .seit-faq .rank-math-answer p {
  margin: 0 0 .75rem;
  color: #2E4A55;
  line-height: 1.7;
  font-size: 15.5px;
}
.entry-content .seit-faq .rank-math-answer p:last-child { margin-bottom: 0; }

/* --- 11. CTA band ------------------------------------------------------- */

.entry-content .seit-cta {
  background: var(--seit-ink);
  border-radius: var(--seit-radius);
  padding: clamp(1.9rem, 4vw, 3rem);
  margin: 3rem 0 2rem;
  position: relative;
  overflow: hidden;
}
.entry-content .seit-cta::after {
  content: "";
  position: absolute;
  right: -70px; bottom: -70px;
  width: 230px; height: 230px;
  background: var(--seit-magenta);
  opacity: .16;
  transform: rotate(45deg);
}
.entry-content .seit-cta h2,
.entry-content .seit-cta h3 { color: #fff; margin-top: 0; position: relative; z-index: 1; }
.entry-content .seit-cta p { color: #C7D6DC; position: relative; z-index: 1; }
.entry-content .seit-cta .wp-block-buttons { position: relative; z-index: 1; margin-top: 1.5rem; }
.entry-content .seit-cta .wp-block-button__link {
  background: var(--seit-magenta);
  color: #fff;
  border-radius: var(--seit-radius);
  font-weight: 700;
  font-size: 15px;
  padding: .9rem 1.75rem;
  border: none;
}
.entry-content .seit-cta .wp-block-button__link:hover { background: #B00060; color: #fff; }
.entry-content .seit-cta .is-style-outline .wp-block-button__link {
  background: transparent;
  border: 1.5px solid var(--seit-cyan);
  color: var(--seit-cyan);
}
.entry-content .seit-cta .is-style-outline .wp-block-button__link:hover {
  background: var(--seit-cyan);
  color: var(--seit-ink);
}

/* --- 12. Author / reviewer line (E-E-A-T) ------------------------------- */

.entry-content .seit-author {
  border-top: 1px solid var(--seit-line);
  border-bottom: 1px solid var(--seit-line);
  padding: 1.1rem 0;
  margin: 2rem 0 2.5rem;
}
.entry-content .seit-author p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--seit-muted);
}
.entry-content .seit-author strong { color: var(--seit-ink); }

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 781px) {
  .entry-content .seit-toc ol { columns: 1; }
  .entry-content .seit-stats { text-align: left; }
  .entry-content .seit-table { overflow-x: auto; }
  .entry-content .seit-table table { min-width: 560px; }
  .entry-content .seit-band .wp-block-cover__inner-container { max-width: 100%; }
}

/* --- 13. Inline figures ------------------------------------------------- */

.entry-content .seit-figure { margin: 2.25rem 0; }
.entry-content .seit-figure img {
  border-radius: var(--seit-radius);
  display: block;
  width: 100%;
  height: auto;
}
.entry-content .seit-figure figcaption {
  font-size: 13px;
  line-height: 1.55;
  color: var(--seit-muted);
  margin-top: .75rem;
  padding-left: .9rem;
  border-left: 2px solid var(--seit-cyan);
  text-align: left;
}

/* Fallback: if -webkit-text-stroke is unsupported the numeral would vanish. */
@supports not (-webkit-text-stroke: 1px red) {
  .entry-content .seit-crit-no { color: var(--seit-cyan); }
}

/* ==========================================================================
   14. Checklist article components
   ========================================================================== */

/* At-a-glance checklist summary card */
.entry-content .seit-summary {
  border: 1px solid var(--seit-line);
  border-top: 4px solid var(--seit-magenta);
  border-radius: var(--seit-radius);
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
  margin: 2.5rem 0 3rem;
  background: #fff;
}
.entry-content .seit-summary ol {
  counter-reset: seitsum;
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 2.5rem;
}
.entry-content .seit-summary li {
  counter-increment: seitsum;
  position: relative;
  padding-left: 2.4rem;
  margin: 0 0 .85rem;
  break-inside: avoid;
  font-size: 15px;
  line-height: 1.5;
  color: var(--seit-ink);
}
.entry-content .seit-summary li::before {
  content: "";
  position: absolute;
  left: 0; top: .12em;
  width: 17px; height: 17px;
  border: 2px solid var(--seit-cyan);
  border-radius: 3px;
}
.entry-content .seit-summary li::after {
  content: counter(seitsum);
  position: absolute;
  left: 0; top: .12em;
  width: 17px; height: 17px;
  font-size: 10px;
  font-weight: 700;
  color: var(--seit-cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}
.entry-content .seit-summary a { color: var(--seit-ink); text-decoration: none; border-bottom: 1px solid transparent; }
.entry-content .seit-summary a:hover { color: var(--seit-magenta); border-bottom-color: var(--seit-magenta); }

/* Per-item direct answer (the AEO snippet target under each question) */
.entry-content .seit-sa {
  border-left: 4px solid var(--seit-cyan);
  background: rgba(62,177,200,.06);
  border-radius: 0 var(--seit-radius) var(--seit-radius) 0;
  padding: 1.05rem 1.35rem;
  margin: 1.35rem 0 1.5rem;
}
.entry-content .seit-sa p {
  margin: 0;
  font-size: clamp(16px, 1rem + .15vw, 17.5px);
  line-height: 1.62;
  color: var(--seit-ink);
  font-weight: 500;
}
.entry-content .seit-sa strong { font-weight: 700; }

/* Essential Eight reference strip */
.entry-content .seit-e8 {
  border: 1px dashed var(--seit-cyan);
  border-radius: var(--seit-radius);
  padding: 1.1rem 1.35rem;
  margin: 1.75rem 0;
  background: #FBFDFE;
}
.entry-content .seit-e8 p { margin: 0; font-size: 14.5px; line-height: 1.62; color: #2E4A55; }
.entry-content .seit-e8 .seit-eyebrow { color: #1F7D91; margin-bottom: .35rem; }

/* Download / resource card */
.entry-content .seit-dl {
  background: var(--seit-grey);
  border-radius: var(--seit-radius);
  padding: clamp(1.5rem, 3.5vw, 2.1rem);
  margin: 2.5rem 0;
  border-left: 5px solid var(--seit-magenta);
}
.entry-content .seit-dl h3 { margin: 0 0 .5rem; color: var(--seit-ink); font-size: 20px; }
.entry-content .seit-dl p { margin: 0 0 1.1rem; color: var(--seit-muted); font-size: 15px; line-height: 1.6; }
.entry-content .seit-dl .wp-block-button__link {
  background: var(--seit-ink);
  color: #fff;
  border-radius: var(--seit-radius);
  font-weight: 700;
  font-size: 14.5px;
  padding: .8rem 1.5rem;
  border: none;
}
.entry-content .seit-dl .wp-block-button__link:hover { background: var(--seit-magenta); color: #fff; }

/* Risk-level pill inside a heading row */
.entry-content .seit-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .3rem .65rem;
  border-radius: 100px;
  margin-bottom: .6rem;
}
.entry-content .seit-pill--must { background: var(--seit-magenta); color: #fff; }
.entry-content .seit-pill--should { background: var(--seit-cyan); color: #00323B; }

@media (max-width: 781px) {
  .entry-content .seit-summary ol { columns: 1; }
}

/* ==========================================================================
   15. Pipeline / process flow
   ========================================================================== */

.entry-content .seit-flow {
  border: 1px solid var(--seit-line);
  border-radius: var(--seit-radius);
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
  margin: 2.5rem 0 3rem;
  background: #fff;
  counter-reset: seitflow;
}
.entry-content .seit-flow > .seit-eyebrow { color: var(--seit-ink); }

.entry-content .seit-step {
  counter-increment: seitflow;
  position: relative;
  padding-left: 3.4rem;
  padding-bottom: 1.6rem;
}
.entry-content .seit-step:last-of-type { padding-bottom: 0; }

/* the connecting spine */
.entry-content .seit-step::before {
  content: "";
  position: absolute;
  left: 13px; top: 30px; bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--seit-cyan), rgba(62,177,200,.25));
}
.entry-content .seit-step:last-of-type::before { display: none; }

/* the numbered node */
.entry-content .seit-step::after {
  content: counter(seitflow);
  position: absolute;
  left: 0; top: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--seit-ink);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}
/* steps a human owns are flagged magenta */
.entry-content .seit-step--human::after { background: var(--seit-magenta); }

.entry-content .seit-step h4,
.entry-content .seit-step .seit-step-t {
  font-size: 16.5px;
  font-weight: 700;
  color: var(--seit-ink);
  margin: .25rem 0 .4rem;
  line-height: 1.35;
}
.entry-content .seit-step p { margin: 0; font-size: 15px; line-height: 1.6; color: #2E4A55; }
.entry-content .seit-step .seit-who {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .22rem .55rem;
  border-radius: 100px;
  margin-bottom: .45rem;
}
.entry-content .seit-who--ai    { background: rgba(62,177,200,.16); color: #14636F; }
.entry-content .seit-who--human { background: rgba(208,0,111,.1);  color: var(--seit-magenta); }

/* Two-column "what AI does / what it never does" */
.entry-content .seit-split { gap: 1.25rem; margin: 2rem 0; }
.entry-content .seit-does,
.entry-content .seit-never {
  border-radius: var(--seit-radius);
  padding: 1.35rem 1.5rem;
  height: 100%;
}
.entry-content .seit-does  { background: rgba(62,177,200,.08); border-top: 3px solid var(--seit-cyan); }
.entry-content .seit-never { background: var(--seit-ink); border-top: 3px solid var(--seit-magenta); }
.entry-content .seit-does .seit-eyebrow  { color: #14636F; }
.entry-content .seit-never .seit-eyebrow { color: var(--seit-cyan); }
.entry-content .seit-never p,
.entry-content .seit-never li { color: #C7D6DC; }
.entry-content .seit-does li,
.entry-content .seit-never li { font-size: 14.5px; line-height: 1.55; margin-bottom: .6rem; }
.entry-content .seit-does ul,
.entry-content .seit-never ul { margin: 0; padding-left: 1.1rem; }
.entry-content .seit-never strong { color: #fff; }

@media (max-width: 781px) {
  .entry-content .seit-step { padding-left: 2.9rem; }
}

/* ==========================================================================
   16. Automation case cards (trigger → middle step → human decision)
   ========================================================================== */

.entry-content .seit-case {
  border: 1px solid var(--seit-line);
  border-radius: var(--seit-radius);
  overflow: hidden;
  margin: 2.25rem 0 2.75rem;
  background: #fff;
}
.entry-content .seit-case > .wp-block-group__inner-container > *:not(.seit-tmh) { padding-inline: clamp(1.4rem,3vw,1.9rem); }
.entry-content .seit-case > .wp-block-group__inner-container > *:first-child { padding-top: clamp(1.4rem,3vw,1.8rem); }

.entry-content .seit-case .seit-case-industry {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--seit-magenta);
  margin: 0 0 .5rem;
}
.entry-content .seit-case .seit-case-t {
  font-size: clamp(19px, 1.1rem + .35vw, 22px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--seit-ink);
  margin: 0 0 .75rem;
}
.entry-content .seit-case p { color: #2E4A55; line-height: 1.65; }

/* the three-part strip */
.entry-content .seit-tmh {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--seit-line);
  border-top: 1px solid var(--seit-line);
  margin-top: 1.5rem;
}
.entry-content .seit-tmh > .wp-block-column {
  background: #FAFBFC;
  padding: 1.15rem clamp(1rem,2.2vw,1.3rem);
  margin: 0 !important;
}
.entry-content .seit-tmh .seit-tmh-l {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 0 0 .4rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.entry-content .seit-tmh-l--trigger { color: var(--seit-muted); }
.entry-content .seit-tmh-l--ai      { color: #14636F; }
.entry-content .seit-tmh-l--human   { color: var(--seit-magenta); }
.entry-content .seit-tmh p:not(.seit-tmh-l) {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--seit-ink);
}
/* the human column is the one that matters — mark it */
.entry-content .seit-tmh > .wp-block-column:last-child { background: #fff; box-shadow: inset 3px 0 0 var(--seit-magenta); }

/* Before / after time strip */
.entry-content .seit-ba {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
  margin: 1.1rem 0 0;
  font-size: 14px;
}
.entry-content .seit-ba-item {
  padding: .35rem .8rem;
  border-radius: 100px;
  font-weight: 700;
  font-size: 12.5px;
}
.entry-content .seit-ba-before { background: var(--seit-grey); color: var(--seit-muted); text-decoration: line-through; }
.entry-content .seit-ba-after  { background: rgba(62,177,200,.16); color: #14636F; }

/* Not-a-chatbot contrast row */
.entry-content .seit-vs { gap: 1.25rem; margin: 2rem 0; }
.entry-content .seit-vs-a,
.entry-content .seit-vs-b { border-radius: var(--seit-radius); padding: 1.35rem 1.5rem; height: 100%; }
.entry-content .seit-vs-a { background: var(--seit-grey); }
.entry-content .seit-vs-b { background: var(--seit-ink); }
.entry-content .seit-vs-a .seit-eyebrow { color: var(--seit-muted); }
.entry-content .seit-vs-b .seit-eyebrow { color: var(--seit-cyan); }
.entry-content .seit-vs-a p { color: #2E4A55; margin: 0; font-size: 15px; line-height: 1.6; }
.entry-content .seit-vs-b p { color: #C7D6DC; margin: 0; font-size: 15px; line-height: 1.6; }
.entry-content .seit-vs-b strong { color: #fff; }

@media (max-width: 781px) {
  .entry-content .seit-tmh { grid-template-columns: 1fr; }
  .entry-content .seit-tmh > .wp-block-column:last-child { box-shadow: inset 0 3px 0 var(--seit-magenta); }
}

/* ==========================================================================
   20. Feedback pass (Sept 2026) - readability of the pipeline, the
   does/never pair, card body sizes, and the mid-article CTA.
   ========================================================================== */

/* --- 20a. "What the AI does / never does" ------------------------------- */
/* The dark navy panel opposite a light tint was hard to scan. Both sides now
   follow the light-tint pattern used by .seit-verdict, which reads better. */
.entry-content .seit-never {
  background: rgba(208,0,111,.06);
  border-top: 3px solid var(--seit-magenta);
}
.entry-content .seit-never .seit-eyebrow { color: var(--seit-magenta); }
.entry-content .seit-never p,
.entry-content .seit-never li { color: var(--seit-ink); }
.entry-content .seit-never strong { color: var(--seit-ink); }

/* Swap the bullet for a marker that carries the meaning of each column. */
.entry-content .seit-does ul,
.entry-content .seit-never ul { list-style: none; padding-left: 0; }
.entry-content .seit-does li,
.entry-content .seit-never li { position: relative; padding-left: 1.7rem; }
.entry-content .seit-does li::before,
.entry-content .seit-never li::before {
  position: absolute;
  left: 0; top: 0;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.55;
}
.entry-content .seit-does li::before  { content: "\2713"; color: #14636F; }
.entry-content .seit-never li::before { content: "\2715"; color: var(--seit-magenta); }

/* --- 20b. Pipeline steps ------------------------------------------------ */
/* Each step becomes a tinted card with a left accent, and the AI / Human
   badge is a solid fill so the actor is readable at a glance. */
.entry-content .seit-step {
  background: rgba(62,177,200,.07);
  border-left: 3px solid var(--seit-cyan);
  border-radius: var(--seit-radius);
  padding: 1.15rem 1.35rem 1.15rem 3.6rem;
  margin-bottom: 1rem;
}
.entry-content .seit-step:last-of-type { padding-bottom: 1.15rem; margin-bottom: 0; }
.entry-content .seit-step--human {
  background: rgba(208,0,111,.05);
  border-left-color: var(--seit-magenta);
}

/* The card edge replaces the connecting spine. */
.entry-content .seit-step::before { display: none; }

.entry-content .seit-step::after {
  left: 1.1rem; top: 1.15rem;
  width: 26px; height: 26px;
}

.entry-content .seit-step .seit-who {
  font-size: 11.5px;
  padding: .26rem .7rem;
  letter-spacing: .12em;
}
.entry-content .seit-who--ai    { background: var(--seit-cyan);    color: var(--seit-ink); }
.entry-content .seit-who--human { background: var(--seit-magenta); color: #fff; }

.entry-content .seit-step .seit-step-t {
  font-size: 17px;
  color: var(--seit-ink);
  margin: .3rem 0 .45rem;
}

@media (max-width: 781px) {
  .entry-content .seit-step { padding-left: 3.2rem; }
  .entry-content .seit-step::after { left: .85rem; }
}

/* --- 20c. One body size across card components -------------------------- */
.entry-content .seit-step p,
.entry-content .seit-good p,
.entry-content .seit-bad p,
.entry-content .seit-ask p,
.entry-content .seit-does li,
.entry-content .seit-never li {
  font-size: 15.5px;
  line-height: 1.62;
}

/* --- 20d. Mid-article CTA ----------------------------------------------- */
/* Same treatment as the closing CTA, sized to sit inside the article flow. */
.entry-content .seit-cta--mid {
  padding: clamp(1.6rem, 3.2vw, 2.25rem);
  margin: 2.75rem 0;
}
.entry-content .seit-cta--mid h3 {
  font-size: clamp(20px, 1.1rem + .6vw, 25px);
  line-height: 1.3;
  margin-bottom: .6rem;
}
.entry-content .seit-cta--mid p { margin-bottom: 0; font-size: 16px; line-height: 1.6; }
.entry-content .seit-cta--mid .wp-block-buttons { margin-top: 1.25rem; }

/* ==========================================================================
   2026-10-01 - Elementor container support
   The article components were built for Gutenberg markup. These rules give
   the same components an Elementor equivalent so a post built with native
   Elementor containers looks identical to the Gutenberg guides.
   Still scoped to .entry-content, and every selector still requires a
   .seit-* class, so no untagged post is affected.
   ========================================================================== */

/* Elementor wraps each container in .e-con > .e-con-inner. Neutralise the
   default padding so our component padding is the only padding. */
.entry-content .seit-answer.e-con,
.entry-content .seit-cta.e-con,
.entry-content .seit-author.e-con,
.entry-content .seit-stats.e-con,
.entry-content .seit-verdict.e-con,
.entry-content .seit-does.e-con,
.entry-content .seit-never.e-con,
.entry-content .seit-step.e-con,
.entry-content .seit-summary.e-con,
.entry-content .seit-facts.e-con { --padding-block-start: 0; --padding-block-end: 0; --padding-inline-start: 0; --padding-inline-end: 0; }

.entry-content .seit-answer.e-con > .e-con-inner,
.entry-content .seit-cta.e-con > .e-con-inner,
.entry-content .seit-author.e-con > .e-con-inner,
.entry-content .seit-verdict.e-con > .e-con-inner,
.entry-content .seit-does.e-con > .e-con-inner,
.entry-content .seit-never.e-con > .e-con-inner,
.entry-content .seit-step.e-con > .e-con-inner,
.entry-content .seit-summary.e-con > .e-con-inner,
.entry-content .seit-facts.e-con > .e-con-inner { padding: 0; width: 100%; }

/* Elementor widgets carry their own bottom margin. Inside our cards the
   component spacing should win. */
.entry-content .seit-answer .elementor-widget:last-child,
.entry-content .seit-cta .elementor-widget:last-child,
.entry-content .seit-verdict .elementor-widget:last-child,
.entry-content .seit-does .elementor-widget:last-child,
.entry-content .seit-never .elementor-widget:last-child,
.entry-content .seit-step .elementor-widget:last-child { margin-bottom: 0; }

/* --- Stat strip --------------------------------------------------------- */
/* Gutenberg used .wp-block-column children; Elementor uses nested .e-con. */
.entry-content .seit-stats.e-con > .e-con-inner { gap: 1.25rem; }
.entry-content .seit-stats .e-con > .e-con-inner > .elementor-element { padding: 0 .25rem; }
.entry-content .seit-stats .elementor-widget { margin-bottom: 0; }

/* --- Section rule above an Elementor heading ---------------------------- */
.entry-content .elementor-widget-heading.seit-rule { padding-top: 1.35rem; margin-top: 3.25rem; position: relative; }
.entry-content .elementor-widget-heading.seit-rule::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 48px; height: 3px;
  background: var(--seit-magenta);
}
.entry-content .elementor-widget-heading.seit-rule .elementor-heading-title { margin-top: 0; }

/* --- CTA buttons -------------------------------------------------------- */
.entry-content .seit-cta .elementor-button,
.entry-content .seit-dl .elementor-button {
  background-color: var(--seit-magenta);
  color: #fff;
  border-radius: var(--seit-radius);
  font-weight: 700;
  font-size: 15px;
  padding: .9rem 1.75rem;
  border: none;
  position: relative;
  z-index: 1;
}
.entry-content .seit-cta .elementor-button:hover,
.entry-content .seit-cta .elementor-button:focus,
.entry-content .seit-dl .elementor-button:hover,
.entry-content .seit-dl .elementor-button:focus { background-color: #B00060; color: #fff; }

.entry-content .seit-cta .seit-btn-outline .elementor-button {
  background-color: transparent;
  border: 1.5px solid var(--seit-cyan);
  color: var(--seit-cyan);
}
.entry-content .seit-cta .seit-btn-outline .elementor-button:hover,
.entry-content .seit-cta .seit-btn-outline .elementor-button:focus {
  background-color: var(--seit-cyan);
  color: var(--seit-ink);
}
/* Keep the button row above the decorative magenta corner. */
.entry-content .seit-cta .elementor-widget-button { position: relative; z-index: 1; margin-top: 1.5rem; }
.entry-content .seit-cta--mid .elementor-widget-button { margin-top: 1.25rem; }

/* Elementor buttons sit in their own widget, so the heading and paragraph
   inside a CTA need the same stacking context the Gutenberg version had. */
.entry-content .seit-cta .elementor-widget-heading,
.entry-content .seit-cta .elementor-widget-text-editor { position: relative; z-index: 1; }

/* --- Comparison panels -------------------------------------------------- */
/* Two light tinted panels side by side, each with its own accent border. */
.entry-content .seit-cmp.e-con > .e-con-inner { gap: 1.25rem; align-items: stretch; }
.entry-content .seit-cmp .seit-does,
.entry-content .seit-cmp .seit-never { border-radius: var(--seit-radius); padding: 1.35rem 1.5rem; }

/* --- Image band --------------------------------------------------------- */
.entry-content .seit-band.e-con > .e-con-inner { max-width: 760px; }

/* --- Figures and captions ----------------------------------------------- */
.entry-content .seit-figure .elementor-image figcaption,
.entry-content .seit-figure figcaption {
  font-size: 13px;
  line-height: 1.5;
  color: var(--seit-muted);
  margin-top: .6rem;
  text-align: left;
}
.entry-content .seit-figure img { border-radius: var(--seit-radius); display: block; }

/* --- FAQ (Elementor equivalent of the Rank Math block) ------------------ */
.entry-content .seit-faq-el { margin: 2.5rem 0 1rem; }
.entry-content .seit-faq-el .seit-faq-q {
  font-size: clamp(17px, 1rem + .25vw, 19px);
  font-weight: 700;
  color: var(--seit-ink);
  margin: 0 0 .5rem;
  line-height: 1.4;
}
.entry-content .seit-faq-el .seit-faq-a {
  margin: 0;
  color: var(--seit-ink);
  line-height: 1.7;
}
.entry-content .seit-faq-el .seit-faq-item {
  border-top: 1px solid var(--seit-line);
  padding: 1.35rem 0;
}
.entry-content .seit-faq-el .seit-faq-item:last-child { border-bottom: 1px solid var(--seit-line); }

/* --- Mobile ------------------------------------------------------------- */
@media (max-width: 781px) {
  .entry-content .seit-cmp.e-con > .e-con-inner { gap: 1rem; }
  .entry-content .seit-band.e-con > .e-con-inner { max-width: 100%; }
  .entry-content .seit-stats.e-con > .e-con-inner { gap: 1rem; }
}

/* --- 2026-10-01b - Elementor refinements after visual review ------------ */
/* The stat strip labels are short phrases, not numerals, so size them to sit
   on one or two lines instead of inheriting the large numeral scale. */
.entry-content .seit-stats .seit-stat-n {
  font-size: clamp(17px, 1rem + .35vw, 20px);
  line-height: 1.25;
  text-wrap: balance;
}
.entry-content .seit-stats.e-con > .e-con-inner > .e-con,
.entry-content .seit-stats.e-con > .e-con > .e-con-inner { flex: 1 1 190px; min-width: 0; }
.entry-content .seit-stats p { margin: 0; }

/* Long CTA headings were clipping against the decorative corner. */
.entry-content .seit-cta .elementor-heading-title {
  font-size: clamp(21px, 1.15rem + .8vw, 28px);
  line-height: 1.25;
  text-wrap: balance;
}
.entry-content .seit-cta--mid .elementor-heading-title {
  font-size: clamp(19px, 1.05rem + .6vw, 24px);
}

/* Keep step cards readable: the eyebrow is the step title. */
.entry-content .seit-step .seit-eyebrow { margin-bottom: .4rem; }
.entry-content .seit-step p:last-child { margin-bottom: 0; }

/* Figure captions inherit Elementor's centred caption; match the guide style. */
.entry-content .seit-figure .widget-image-caption {
  font-size: 13px;
  line-height: 1.5;
  color: var(--seit-muted);
  margin-top: .6rem;
  text-align: left;
  border-left: 3px solid var(--seit-cyan);
  padding-left: .7rem;
}

/* --- 2026-10-01c - Elementor article width ------------------------------ */
/* Gutenberg blocks centre because .entry-content is-layout-constrained reads
   Blocksy's --theme-block-max-width. Elementor containers do not; they use
   their own --container-max-width from the kit, which is 1140px and wider
   than the narrow article column. Point boxed containers at the theme value
   so an Elementor article lines up with a Gutenberg one.
   Scoped to .seit-article so no other Elementor post is affected. */
/* Constrain the CONTAINER, not just its inner wrapper. The container is what
   paints the background, border and padding, so limiting only .e-con-inner
   left the navy panel bleeding the full content width while its text was
   constrained. */
.entry-content .seit-article.e-con {
  max-width: var(--theme-block-max-width, 750px);
  margin-inline: auto;
  width: 100%;
}
/* The inner wrapper then fills the already constrained container. */
.entry-content .seit-article.e-con > .e-con-inner {
  max-width: none;
  width: 100%;
  margin-inline: 0;
}
/* Nested containers (comparison columns, stat cells) must fill their parent,
   not re-apply the article width. */
.entry-content .seit-article .e-con .e-con > .e-con-inner,
.entry-content .seit-cmp > .e-con-inner > .e-con > .e-con-inner,
.entry-content .seit-stats > .e-con-inner > .e-con > .e-con-inner {
  max-width: none;
}

/* --- 2026-10-01d - paragraph rhythm inside Elementor text widgets ------- */
/* Elementor's text-editor widget resets paragraph margins, so consecutive
   paragraphs inside one widget ran together. Restore the article rhythm. */
.entry-content .seit-article .elementor-widget-text-editor p { margin: 0 0 1.15rem; }
.entry-content .seit-article .elementor-widget-text-editor p:last-child { margin-bottom: 0; }
.entry-content .seit-article .elementor-widget-text-editor ul,
.entry-content .seit-article .elementor-widget-text-editor ol { margin: 0 0 1.15rem; padding-left: 1.3rem; }
.entry-content .seit-article .elementor-widget-text-editor li { margin-bottom: .5rem; line-height: 1.65; }
.entry-content .seit-article .elementor-widget-text-editor li:last-child { margin-bottom: 0; }

/* The comparison lists use their own markers, so keep padding off there. */
.entry-content .seit-does .elementor-widget-text-editor ul,
.entry-content .seit-never .elementor-widget-text-editor ul { padding-left: 0; }

/* Vertical rhythm between top-level article blocks. */
.entry-content .seit-article.e-con { margin-bottom: 1.6rem; }
.entry-content .seit-article.seit-rule { margin-bottom: .4rem; }

/* --- 2026-10-01e - stat strip grid -------------------------------------- */
/* Four items will not sit on one line inside the narrow article column, and
   a 3 + 1 wrap looks accidental. Use an explicit 2 x 2 grid, dropping to a
   single column on small screens. */
.entry-content .seit-stats.e-con > .e-con-inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 2rem;
  align-items: start;
}
.entry-content .seit-stats.e-con > .e-con-inner > .e-con { width: auto; }
@media (max-width: 600px) {
  .entry-content .seit-stats.e-con > .e-con-inner { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* --- 2026-10-01f - comparison panel layout ------------------------------ */
/* Do not depend on Elementor's per-post flex settings for this component.
   The two panels are a pair and should sit side by side on desktop. */
.entry-content .seit-cmp.e-con > .e-con-inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: stretch;
}
.entry-content .seit-cmp > .e-con-inner > .e-con {
  width: auto;
  border-radius: var(--seit-radius);
  padding: 1.35rem 1.5rem;
}
/* Tinted panels with their own accent edge, light on both sides. */
.entry-content .seit-cmp .seit-does {
  background: rgba(62,177,200,.08);
  border-top: 3px solid var(--seit-cyan);
}
.entry-content .seit-cmp .seit-never {
  background: rgba(208,0,111,.06);
  border-top: 3px solid var(--seit-magenta);
}
.entry-content .seit-cmp .seit-does .seit-eyebrow { color: #14636F; }
.entry-content .seit-cmp .seit-never .seit-eyebrow { color: var(--seit-magenta); }
@media (max-width: 680px) {
  .entry-content .seit-cmp.e-con > .e-con-inner { grid-template-columns: 1fr; }
}

/* --- 2026-10-01g - comparison markers ----------------------------------- */
/* In this article both columns list legitimate questions, so a tick against a
   cross would read as good versus bad. Use a neutral marker per side, keeping
   each column's accent colour so the two are still distinguishable. */
.entry-content .seit-cmp .seit-never li::before { content: "\25B8"; color: var(--seit-magenta); }
.entry-content .seit-cmp .seit-does li::before  { content: "\25B8"; color: #14636F; }

/* ==========================================================================
   2026-10-02 - Numbered sections and at-a-glance list in Elementor articles
   ========================================================================== */
.entry-content .seit-article.seit-crit.e-con { border-top: 1px solid var(--seit-line); padding-top: 2.25rem; margin-top: 3rem; margin-bottom: .4rem; }
.entry-content .seit-article .elementor-widget-text-editor p.seit-crit-no { margin: 0 0 .4rem; }
.entry-content .seit-crit .elementor-widget-heading .elementor-heading-title { margin-top: 0; }
.entry-content .seit-crit [id] { scroll-margin-top: 110px; }
.entry-content .seit-summary .seit-eyebrow { margin-top: 0; }

/* ==========================================================================
   2026-10-02 - Inline links inside CTA bands, and the three column table
   ========================================================================== */

/* An inline <a> inside a navy CTA band inherited the default dark link colour,
   which is close to unreadable on the navy background. The button has its own
   styling already; this is only for links written into the CTA paragraph.
   Applies to both the closing CTA and the mid-article variant. */
.entry-content .seit-cta p a {
  color: var(--seit-cyan);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.entry-content .seit-cta p a:hover,
.entry-content .seit-cta p a:focus {
  color: #fff;
}

/* The comparison table rule colours td:last-child magenta, which reads well on
   a two column table where the last cell is the answer. On a three column
   comparison both data columns are equal in weight, so the magenta made the
   right hand column look like the recommended one. Keep the ink colour on both
   and let the header row carry the distinction instead. */
.entry-content .seit-table table.seit-table--3col tbody td:last-child {
  color: var(--seit-ink);
}

/* A note card. Same tinted panel and accent edge as a step, but it is not part
   of a numbered sequence, so suppress the flow counter and reclaim the space
   the numeral reserved. Use for standalone callouts; keep plain .seit-step for
   real process flows. */
.entry-content .seit-step--note { padding-left: 1.35rem; }
.entry-content .seit-step--note::after { content: none; }
.entry-content .seit-step--note::before { display: none; }
@media (max-width: 781px) {
  .entry-content .seit-step--note { padding-left: 1.2rem; }
}


/* ==========================================================================
   2026-10-02b - step flow numbering in Elementor articles
   ========================================================================== */

/* Elementor has no .seit-flow parent, so the seitflow counter runs across every
   step on the page. A second flow would start at 6. Add seit-flow-start to the
   numbered heading container before a flow to restart the count at 1.
   Opt-in class, so no existing post changes. */
.entry-content .seit-article.seit-flow-start { counter-reset: seitflow; }
