/* =========================================================
   MIBET BLOG — Global article stylesheet  r20 (2026-10)

   SCOPE
   - The theme (news-detail.css) styles base tags (H1–H3, P…).
     This file styles in-article components only, mostly scoped to
     .single-blog-content; !important is used where theme rules win otherwise.
   - Body column 840px. Table min-widths (600 / 760) fit inside it on desktop.
   - Older components (.toc, .table-wrapper, .h4-play, .video-box, .img4,
     flat FAQ) are kept for existing posts; new articles use the .mibet-
     equivalent where one exists. The inquiry modal is a site component.

   TOKENS
   - Brand green #82bc24 · green text/hover #60911a · dark #2c2d30
   - Tints: #fcfdfc card · #f2f6ee table head · #f4f8ee hover/open
     · #f6faf0 emphasis cell · #f7faf1 TOC hover · #e6ebdf grid gaps
   - Text: #1a202c Quick Answer · #2c2d30 headings · #4a5568 body
     · #718096 secondary/captions · #a0aec0 icons only (too light for text)
   - Hairlines #e2e8f0 / #e5e7eb, radius 8px, no shadows (modal excepted).

   LAYOUT RULES
   - Standalone cards: full border + radius (hero, TOC, criteria box;
     the engineer tip uses a left rule).
   - Parallel grids: outer frame + 1px gaps (compare / mechanism grid,
     datastrip, loadpath, relation, figure-set).
   - Layout containers: no border or background (section, media-row, photo-pair).
   - Two colours only. No warning colour; weight comes from label text and position.
   - Reserved symbols: arrow marks → .mibet-loadpath;
     ✓ → .mibet-criteria-box; × ÷ = → .mibet-relation.
     No arrows inside SVGs; brand green on one element class per diagram.

   PER-ARTICLE LIMITS
   - Engineer tips ≤ 4 · criteria box 1 · relation 1 · loadpath 1
     (.lp-end-focus: last cell only) · .mibet-term 3–4
   - .col-focus, .col-favor + .col-review: tables of ≤ 5 rows only
   - figure-set: one 3-column + one .fs-2, not in adjacent H2s
   - media-row 1–2, not in adjacent sections · photo-pair 1 · legal note 1

   EDITOR (TinyMCE)
   - Strips dl/dt/dd, aside, script and empty inline elements:
     use div + span, draw swatches with pseudo-elements.
   - SVG colours as presentation attributes; role="img" + <title> + <desc>.
   - <caption> is hidden unless it has .table-caption; introduce tables
     in the preceding paragraph.
   - Run-in heads use .mibet-lead-in, not <strong>.

   SPECIFICITY
   - Modifiers that change grid columns (.lp-5 / .lp-7 / .lp-8, .fs-2)
     outrank base rules, so mobile overrides must repeat them.
     .lp-7 also needs grid-column reset to auto at 768px.
   - Background-only modifiers (.lp-end-focus) need no breakpoint repeats.

   BREAKPOINTS 1024 / 768 / 600 / 480
   - Swipe hint: .table-wide at ≤ 768px, all tables at ≤ 600px,
     off for .table-narrow and .table-fit.
   - Focus ring: outline 2px rgba(130,188,36,.45) on :focus-visible.
   - prefers-reduced-motion turns off decorative transitions.

   CHANGED DEFAULTS (rollback value in brackets)
   - .mibet-divider margin 20px 0 18px [20px 0 0]
   - thead th vertical-align middle [bottom]
   - .faq / .srcs border-radius 8px [12px]
   - caption display:none, opt-in .table-caption [hide :empty only];
     older posts with caption text need the class
   - Focus rings unified to outline .45 [TOC: box-shadow 0 0 0 2px
     rgba(130,188,36,.35); FAQ: box-shadow inset 0 0 0 2px #82bc24]
   - .mibet-figure img: hairline border [was a shadow]

   HISTORY
   - r1–r18 (2026-08 to 2026-10): components added and fixed; the detailed
     Chinese changelog was retired in r19.
   - r19: comment-only cleanup. No selector or value changed.
   - r20: legend aliases .lg-rail / .lg-clamp added to existing rules (no new values).
   ========================================================= */


/* [Legacy] .toc — old Table of Contents, kept for older posts */
.toc{
  max-width:400px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  overflow:hidden;
  box-shadow:none;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"PingFang SC","Microsoft Yahei",Arial,sans-serif;
  counter-reset: toc;
  margin-top: 4px;
  margin-bottom: 20px;
}
.toc .toc-title{
  display:flex; align-items:center;
  padding:8px 12px;
  font-size:14px; color:#64748b;
  border-bottom:1px solid #e5e7eb;
}
.toc .toc-title > * + *{ margin-left:8px; }
.toc .toc-icon{
  width:14px; height:14px; border:2px solid #94a3b8; border-radius:3px; position:relative;
}
.toc .toc-icon::after{
  content:""; position:absolute; inset:2px;
  border-top:2px solid #94a3b8; border-left:2px solid #94a3b8;
  border-right:0; border-bottom:0; border-radius:2px;
}
.toc .toc-list,
.toc nav{
  display:block;
  font-size:0;
}
.toc .toc-item{
  display:block;
  padding:8px 12px;
  text-decoration:none;
  color:#111827;
  border-top:1px solid #e5e7eb;
  line-height:1.28;
  background:#fff;
  font-size:14px;
}
.toc .toc-text{
  position:relative;
  display:inline;
  line-height:1.28;
}
.toc .toc-text::before{
  counter-increment: toc;
  content: counter(toc) ". ";
  margin-right:.25em; opacity:.9;
}
.toc .toc-arrow{ width:14px; height:14px; opacity:.65; font-size:14px; line-height:14px; }
.toc .toc-arrow::before{ content:"→"; display:inline-block; }
.toc .toc-item:hover,
.toc .toc-item:focus{ background:#f4f8ee; outline:none; }
.toc .toc-item:focus-visible{
  box-shadow:inset 0 0 0 2px #82bc24;
  border-color:rgba(130,188,36,.35);
}
@media (max-width:640px){
  .toc{ max-width:100%; }
}


/* Anchor offset for the sticky site header */
h2[id],
h3[id]{
  scroll-margin-top: clamp(72px, 6vw, 110px);
}


/* FAQ accordion (.faq) */
.faq-section .faq-h2{
  margin:3px 0 25px;
  font-size:28px;
  line-height:1.3;
  font-weight:700;
}

.faq{
  width:100%;
  max-width:none;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:8px;
  overflow:hidden;
  box-shadow:none;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"PingFang SC","Microsoft Yahei",Arial,sans-serif;
  margin:0 0 20px;
}
.faq .faq-list{ display:block; }
.faq .faq-item{ border-top:1px solid #e5e7eb; }
.faq .faq-item:first-child{ border-top:none; }

/* Question row (h3) */
.faq .faq-q{
  display:flex; align-items:center;
  padding:12px 16px;
  cursor:pointer; user-select:none;
  outline:0; color:#111827;
  margin:0;
  font-size:16px; line-height:1.35;
  font-weight:500;
  white-space:normal;
}
.faq .faq-q:hover{ background:#f7faf1; }
/* Keyboard focus only (:focus-visible); the open state comes from .is-open.
   .faq-q is an <h3> and can't take focus. Keyboard access belongs in the FAQ
   script (a <button> inside the h3), not role="button" on the heading. */
.faq .faq-q:focus-visible{
  outline:2px solid rgba(130,188,36,.45);
  outline-offset:-2px;
  background:#f4f8ee;
}
.faq .is-open > .faq-q{ background:#f4f8ee; transition:background .15s ease; }

/* Number / question text / +− mark */
.faq .faq-num{ width:18px; margin-right:6px; font-weight:700; color:#82bc24; flex:0 0 auto; }
.faq .faq-text{ flex:1 1 auto; min-width:0; }
.faq .faq-arrow{
  width:16px; height:16px; text-align:right;
  opacity:.7; font-weight:600; flex:0 0 auto;
}
.faq .faq-arrow::before{ content:"+"; line-height:16px; font-size:18px; }
.faq .is-open > .faq-q .faq-arrow::before{ content:"\2212"; }

/* Answer panel */
.faq .faq-a{
  display:none;
  box-sizing:border-box;
  padding:4px 20px 16px 40px;
  background:#fcfdfc;
  color:#374151;
  font-size:14.5px; line-height:1.75;
  overflow:visible;
}
.faq .is-open > .faq-a{ display:block; }
.faq .faq-a, .faq .faq-a *{
  white-space:normal !important;
  overflow-wrap:break-word !important;
  word-wrap:break-word !important;
  max-width:100% !important;
}
.faq .faq-a p{ margin:0 0 12px; display:block; }
.faq .faq-a p:last-child{ margin-bottom:0; }
.faq .faq-a strong{ color:#2c2d30; }
.faq .faq-a .mibet-lead-in{ color:#2c2d30; }

/* Bullet list inside answers: .mibet-bullet-list dots at answer size.
   The theme sets list-style disc !important on .faq .faq-a ul li (0,3,2);
   this rule (0,4,1) overrides it. */
.single-blog-content .faq .faq-a .mibet-bullet-list{
  margin:0 0 12px 0 !important;
  padding-left:0.2em !important;
}
.single-blog-content .faq .faq-a .mibet-bullet-list:last-child{
  margin-bottom:0 !important;
}
.single-blog-content .faq .faq-a .mibet-bullet-list li{
  list-style:none !important;
  list-style-type:none !important;
  font-size:14.5px;
  line-height:1.75;
  color:#374151;
  margin-bottom:6px !important;
}
.single-blog-content .faq .faq-a .mibet-bullet-list li:last-child{
  margin-bottom:0 !important;
}
.faq .faq-a .mibet-bullet-list li::before{
  top:1px !important;
}

@media (max-width:640px){
.faq .faq-q{
    display:block !important;
    position:relative;
    padding:12px 34px 12px 38px;
    line-height:1.35;
  }
.faq .faq-num{
    position:absolute; left:16px; top:12px;
    width:auto; margin:0;
  }
.faq .faq-arrow{
    position:absolute; right:14px; top:14px;
  }
.faq .faq-text{
    display:block; min-width:0;
    white-space:normal !important;
    word-wrap:break-word; overflow-wrap:break-word;
  }
.faq .faq-a{ padding-left:38px; padding-right:20px; }
}


/* [Legacy] .table-wrapper — mobile horizontal scroll, kept */
.table-wrapper {
  width: 100%;
  margin-bottom: 2em;
  overflow-x: hidden;
}
.table-wrapper table {
  width: 100%;
  border-collapse: collapse;
}
.table-wrapper th,
.table-wrapper td {
  padding: 12px 15px;
  text-align: left;
  border: 1px solid #e0e0e0;
  vertical-align: top;
}
.table-wrapper thead th {
  background-color: #f5f5f5;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-left: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
  }
  .table-wrapper table {
    min-width: 774px;
  }
  .table-wrapper::-webkit-scrollbar { height: 8px; }
  .table-wrapper::-webkit-scrollbar-track { background: #f1f1f1; }
  .table-wrapper::-webkit-scrollbar-thumb { background: #bbb; }
}


/* [Legacy] .h4-play — play icon before H4, kept */
.h4-play{
  display:inline-flex; align-items:center; gap:8px;
  margin:12px 0 8px;
}
.h4-play::before{
  content:"";
  display:inline-block;
  width:0; height:0;
  border-style:solid;
  border-width:7px 0 7px 11px;
  border-color:transparent transparent transparent #10b981;
  transform:translateY(1px);
}


/* [Legacy] .video-box — in-article video, kept */
.video-box{
  width:100%;
  max-width:840px;
  margin:12px 0;
  position:relative !important;
}
.video-aspect{
  position:relative !important;
  isolation:isolate;
  height:0;
  padding-bottom:56.25%;
  aspect-ratio:16 / 9;
  background:#f8fafc;
  border:1px solid #e5e7eb;
  border-radius:8px;
  overflow:hidden;
}
.video-aspect > video,
.video-aspect > iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  border:0;
  background:#000;
}
.overlay-layer{
  position:absolute !important;
  inset:0 !important;
  z-index:5 !important;
  pointer-events:none;
}
.overlay-play{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%, -50%);
  pointer-events:auto;
  width:72px; height:72px;
  border-radius:999px; border:0;
  cursor:pointer;
  background:rgba(16,185,129,.92);
  box-shadow:0 6px 18px rgba(16,185,129,.35);
  display:flex; align-items:center; justify-content:center;
  transition:transform .2s ease, opacity .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.overlay-play::before{
  content:"";
  display:block;
  border-style:solid;
  border-width:12px 0 12px 20px;
  border-color:transparent transparent transparent #fff;
  margin-left:4px;
}
.overlay-play:hover,
.overlay-play:focus{
  transform:translate(-50%, -50%) scale(1.06);
}
.video-aspect.is-playing .overlay-play{
  opacity:0; pointer-events:none;
}
@media (max-width:480px){
.overlay-play{ width:60px; height:60px; }
.overlay-play::before{ border-width:10px 0 10px 16px; }
}
.video-aspect > video::-webkit-media-controls-start-playback-button,
.video-aspect > video::-webkit-media-controls-overlay-play-button{
  display: none !important;
}


/* [Legacy] .img4 — two-image grid for older posts; new posts use .mibet-photo-pair */
.img4{
  font-size:0;
  margin:12px 0;
}
.img4 .img4-item{
  display:inline-block; vertical-align:top;
  width:49.5%;
  box-sizing:border-box;
  padding:0 8px 16px;
  margin:0;
}
.img4 img{
  display:block; width:100%; height:auto;
  border:1px solid #e5e7eb; border-radius:6px;
  background:#fff;
}
.img4 figcaption{
  text-align:center;
  margin-top:6px;
  font-size:14px; line-height:1.6;
  color:#374151;
}
@media (max-width:640px){
.img4 .img4-item{
    width:100%;
    padding:0 0 14px;
  }
}


/* Article Sources (.srcs) — collapsible reference list */
.srcs{
  background:#f6f8f7;
  border:1px solid #e5e7eb;
  border-radius:8px;
  box-shadow:none;
  margin:16px 0;
  overflow:hidden;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"PingFang SC","Microsoft Yahei",Arial,sans-serif;
}
.srcs-toggle{
  width:100%;
  display:flex; align-items:center; justify-content:initial;
  padding:16px 18px;
  background:transparent;
  border:0; cursor:pointer; text-align:left;
  color:#111827; font-size:18px; line-height:1.3;
  transition:background .15s ease;
}
.srcs-toggle:hover{ background:#f7faf1; }
/* Keyboard focus ring, same as TOC and FAQ */
.srcs-toggle:focus-visible{
  outline: 2px solid rgba(130,188,36,.45);
  outline-offset: -2px;
  background:#f7faf1;
}
.srcs-title{ margin-right:12px; font-weight:600; }
.srcs-arrow{
  margin-left:auto;
  position:relative; width:24px; height:24px; flex:0 0 auto;
  border:1.5px solid #94a3b8; border-radius:50%;
  color:#111827; opacity:.85; transition:transform .2s ease, opacity .2s ease;
}
.srcs-arrow::after{
  content:""; position:absolute; left:50%; top:50%;
  width:8px; height:8px; margin:-6px 0 0 -4px;
  border:2px solid currentColor; border-left:0; border-top:0;
  transform:rotate(45deg);
}
.srcs.is-open .srcs-arrow{ transform:rotate(180deg); }
.srcs-body{
  display:none;
  padding:14px 18px 16px;
  border-top:1px solid #e5e7eb;
  background:#f5fcf7;
}
.srcs.is-open .srcs-body{ display:block; }
.srcs,
.srcs *{
  box-sizing: border-box;
}
.srcs-intro{
  margin: 0 0 12px;
  color: #4a5568;
  font-size: 13.5px;
  line-height: 1.7;
}
.single-blog-content .srcs-list{
  margin: 0 !important;
  padding-left: 0 !important;
  list-style: none !important;
  list-style-type: none !important;
}
.single-blog-content .srcs-list li{
  list-style: none !important;
  list-style-type: none !important;
  background: none !important;
  position: relative !important;
  padding-left: 18px !important;
  margin: 0 0 10px 0 !important;
  color: #374151;
  font-size: 13.5px;
  line-height: 1.6;
  white-space: normal !important;
  overflow-wrap: break-word;
  word-break: normal;
  max-width: 100%;
}
.single-blog-content .srcs-list li:last-child{
  margin-bottom: 0 !important;
}
.srcs-list li::before{
  content: "" !important;
  position: absolute !important;
  left: 2px !important;
  top: 8px !important;
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  background-color: #82bc24 !important;
}
.single-blog-content .srcs-list a{
  display: inline;
  color: #374151;
  text-decoration: none !important;
  border-bottom: 1px dotted transparent;
  overflow-wrap: break-word;
  word-break: normal;
  transition: color .15s ease, border-color .15s ease;
}
.single-blog-content .srcs-list a:hover{
  color: #60911a;
  text-decoration: none !important;
  border-bottom-color: #82bc24;
}

@media (max-width:640px){
  .srcs-toggle{ padding:14px 14px; font-size:16px; }
  .srcs-body{ padding:12px 16px 14px; }
  .single-blog-content .srcs-list li{ font-size: 13px; }
}


/* [Legacy] Inquiry-success modal — the only element with a shadow (layering cue) */
#modal-inquiry-success.md-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: auto;
}
.md-show ~ .md-overlay {
    opacity: 1;
    visibility: visible;
    transition: all 0.3s;
}
#modal-inquiry-success .md-content {
    background: #ffffff;
    color: #333333;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    max-width: 500px;
    width: 90vw;
    padding: 20px 30px;
    box-sizing: border-box;
}
#modal-inquiry-success h3 {
    font-size: 24px;
    font-weight: 600;
    text-align: center;
    margin-top: 15px;
    margin-bottom: 15px;
}
#modal-inquiry-success p {
    font-size: 16px;
    line-height: 1.6;
    text-align: center;
    margin-bottom: 30px;
}
#modal-inquiry-success #inquiry-success-ok {
    background-color: #00a651 !important;
    font-size: 16px;
    padding: 12px 50px;
    border-radius: 5px;
    transition: background-color 0.3s;
    display: block;
    margin: 0 auto;
    border: none;
    cursor: pointer;
}
#modal-inquiry-success #inquiry-success-ok:hover {
    background-color: #008742 !important;
}


/* ==================== Mibet Blog core components ==================== */

/* Semantic section wrapper: no spacing, only shields against theme section styles */
.single-blog-content .mibet-section{
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}

/* Reset theme list styles inside components */
.mibet-hero-box ul,
.mibet-toc ul,
.mibet-mechanism-grid ul,
.mibet-criteria-box ul {
    list-style: none !important;
    list-style-type: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.mibet-hero-box ul li,
.mibet-toc ul li {
    list-style: none !important;
    list-style-type: none !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 1. Hero box: Quick Answer (+ optional Key Takeaways) */
.mibet-hero-box {
    background-color: #fcfdfc;
    border: 1px solid #e1e8da;
    border-radius: 8px;
    padding: 24px 28px;
    margin: 32px 0;
    box-shadow: none;
}
.mibet-quick-answer {
    margin-bottom: 20px;
}
/* .qa-only: Quick Answer without Key Takeaways */
.mibet-hero-box.qa-only .mibet-quick-answer {
    margin-bottom: 0;
}
.mibet-qa-badge {
    display: inline-block;
    background-color: #f0f6e9;
    color: #70a120;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}
.mibet-qa-text {
    font-size: 17px;
    font-weight: 500;
    line-height: 1.6;
    color: #1a202c;
    margin: 0;
}
/* Divider between Quick Answer and Key Takeaways */
.mibet-divider {
    border: 0;
    border-top: 1px solid #e9edf0;
    margin: 20px 0 18px 0;
}
.mibet-key-takeaways .takeaways-title {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #2c2d30;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
}
.single-blog-content .mibet-key-takeaways ul{
    padding-left: 1.0em;
}
.single-blog-content .mibet-key-takeaways ul li {
    list-style-type: none !important;
    position: relative !important;
    padding-left: 20px !important;
    margin-bottom: 14px !important;
    font-size: 15px;
    line-height: 1.6;
    color: #4a5568;
}
.mibet-key-takeaways ul li::before {
    content: "•" !important;
    position: absolute !important;
    left: 2px !important;
    top: -1px !important;
    color: #82bc24 !important;
    font-size: 20px !important;
    line-height: 1 !important;
}
.mibet-key-takeaways ul li strong { color: #2c2d30; }


/* 2. Table of Contents: native <details>/<summary>, no JS;
   numbering comes from a CSS counter */
.mibet-toc {
    border: 1px solid #e2e8f0;
    background-color: #fcfdfc;
    border-radius: 8px;
    padding: 16px 18px 14px 18px;
    margin: 32px 0;
}
.mibet-toc summary {
    list-style: none !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #2c2d30;
    cursor: pointer;
    outline: none;
}
.mibet-toc summary::-webkit-details-marker {
    display: none !important;
}
/* Icon button, collapsed (grey) */
.mibet-toc summary::after {
    content: "";
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='2.4' width='2.6' height='2.6' rx='.6' fill='%23a0aec0'/%3E%3Crect x='5.8' y='3' width='9.2' height='1.5' rx='.75' fill='%23a0aec0'/%3E%3Crect x='1' y='6.7' width='2.6' height='2.6' rx='.6' fill='%23a0aec0'/%3E%3Crect x='5.8' y='7.3' width='9.2' height='1.5' rx='.75' fill='%23a0aec0'/%3E%3Crect x='1' y='11' width='2.6' height='2.6' rx='.6' fill='%23a0aec0'/%3E%3Crect x='5.8' y='11.6' width='9.2' height='1.5' rx='.75' fill='%23a0aec0'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.mibet-toc summary:hover::after {
    border-color: #cbd5e1;
}
/* Icon button, open (green) */
.mibet-toc[open] summary::after {
    background-color: #f4f8ee;
    border-color: #dbe6c8;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='2.4' width='2.6' height='2.6' rx='.6' fill='%2382bc24'/%3E%3Crect x='5.8' y='3' width='9.2' height='1.5' rx='.75' fill='%2382bc24'/%3E%3Crect x='1' y='6.7' width='2.6' height='2.6' rx='.6' fill='%2382bc24'/%3E%3Crect x='5.8' y='7.3' width='9.2' height='1.5' rx='.75' fill='%2382bc24'/%3E%3Crect x='1' y='11' width='2.6' height='2.6' rx='.6' fill='%2382bc24'/%3E%3Crect x='5.8' y='11.6' width='9.2' height='1.5' rx='.75' fill='%2382bc24'/%3E%3C/svg%3E");
}
/* Ring offset outward: the summary is a text line with no background block */
.mibet-toc summary:focus-visible {
    outline: 2px solid rgba(130,188,36,.45);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Single column, so long and short entries don't misalign */
.single-blog-content .mibet-toc-list {
    counter-reset: mibet-toc;
    column-count: 1;
    margin: 12px 0 0 0 !important;
    padding-left: 0 !important;
    border-top: 1px solid #eef2ea;
}
.single-blog-content .mibet-toc-list li {
    list-style-type: none !important;
    position: relative !important;
    padding: 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid #eef2ea;
}
.mibet-toc-list li:last-child {
    border-bottom: none;
}
/* Green bar that grows on hover */
.mibet-toc-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    background-color: #82bc24;
    border-radius: 2px;
    transition: height 0.2s ease;
    z-index: 1;
}
.mibet-toc-list li:hover::before {
    height: 56%;
}
.mibet-toc-list li a {
    display: block;
    padding: 10px 12px 10px 34px;
    color: #4a5568;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.5;
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease;
}
/* Auto numbering */
.mibet-toc-list li a::before {
    counter-increment: mibet-toc;
    content: counter(mibet-toc);
    position: absolute;
    left: 13px;
    top: 10px;
    color: #82bc24;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
}
.mibet-toc-list li a:hover {
    color: #2c2d30;
    background-color: #f7faf1;
}
.mibet-toc-list li a:focus-visible {
    color: #2c2d30;
    background-color: #f7faf1;
    outline: 2px solid rgba(130,188,36,.45);
    outline-offset: -2px;
}

/* 3. Engineer note family (Engineer's / Scope / Layout / Data Note ...):
   one style, the label text tells them apart; no warning-colour variant.
   Budget: ≤ 4 per article. A single .tip-content is fine. */
.mibet-engineer-tip {
    background-color: #fcfdfc;
    border-left: 2px solid #cbd5e1;
    padding: 18px 22px;
    margin: 28px 0;
    border-radius: 0 4px 4px 0;
}
.tip-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #82bc24;
    background: none !important;
    padding: 0 !important;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 8px;
}
.tip-label::before {
    content: "› ";
    font-size: 15px;
    font-weight: 900;
}
.tip-content {
    font-size: 14px;
    line-height: 1.7;
    color: #4a5568;
    font-style: italic;
    margin: 0 !important;
}
.tip-content + .tip-content { margin-top: 12px !important; }

/* 3a. .tip-upright: upright text for notes of two or more sentences
   with tool names or parameters.
   <div class="mibet-engineer-tip tip-upright"><span class="tip-label">…</span>
   <p class="tip-content">…</p></div>
   The second rule clears any float/width the theme gives <aside>. */
.mibet-engineer-tip.tip-upright .tip-content {
    font-style: normal;
}
.single-blog-content aside.mibet-engineer-tip {
    display: block;
    float: none;
    width: auto;
}

/* 4. Inline marks: standard badge, metric */
.mibet-badge-standard {
    background-color: #f2f6ee;
    color: #60911a;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.85em;
    font-weight: 600;
    display: inline-block;
    margin: 0 2px;
}
.mibet-metric {
    border-bottom: 1.5px dashed #82bc24;
    padding-bottom: 1px;
    color: #2c2d30;
    font-weight: 600;
}

/* 4a. .mibet-term: marks the sentence where a term is first defined.
   Lighter than .mibet-metric (grey dotted, no green). Once per term,
   never combined with <em>. Budget 3–4 per article. */
.mibet-term {
    font-weight: 600;
    color: #2c2d30;
    border-bottom: 1px dotted #a0aec0;
    padding-bottom: 1px;
}

/* 4b. .mibet-formula: inline formula, no wrapping, tabular numbers.
   sup/sub get line-height 0 and are shifted with position/top, so they
   don't make the line taller. Scoped to .single-blog-content: all body
   sup/sub benefit. Don't combine with .mibet-metric / .mibet-term.
   "=" here is body text, not a .mibet-relation symbol. */
.single-blog-content .mibet-formula {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.single-blog-content sup,
.single-blog-content sub {
    font-size: 72%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
.single-blog-content sup {
    top: -0.48em;
}
.single-blog-content sub {
    bottom: -0.22em;
}

/* 4c. .mibet-formula-block: 1–3 related display formulas.
   <div class="mibet-formula-block"><p><span class="mibet-formula">lhs =</span>
   <span class="mibet-formula">rhs</span></p></div>
   The space between the two spans is the only break point; a wrapped
   line gets a hanging indent. No card, background or left rule (the left
   rule belongs to the engineer tip). In-sentence formulas stay inline;
   don't repeat a relation already shown in .mibet-relation. */
.single-blog-content .mibet-formula-block {
    margin: 16px 0 22px 0 !important;
    padding: 0 0 0 18px !important;
    border: 0;
    background: none;
}
.single-blog-content .mibet-formula-block p {
    margin: 0 0 6px 0 !important;
    padding-left: 1.2em;
    text-indent: -1.2em;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.6;
    color: #2c2d30;
    text-align: left;
    font-variant-numeric: tabular-nums;
}
.single-blog-content .mibet-formula-block p:last-child {
    margin-bottom: 0 !important;
}

/* 5. Tables: bordered container (hairline + 8px radius) with horizontal scroll */
.mibet-table-container {
    width: 100%;
    overflow-x: auto;
    margin: 20px 0;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    -webkit-overflow-scrolling: touch;
}
.mibet-custom-table {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 14px;
    text-align: left;
    color: #4a5568;
}
/* Clear theme margins on <table> (they show as white bands inside the border) */
.single-blog-content .mibet-table-container > .mibet-custom-table,
.single-blog-content .mibet-table-container .mibet-custom-table {
    margin: 0 !important;
}
/* .table-wide: 4+ columns */
.mibet-custom-table.table-wide {
    min-width: 760px;
}
/* .table-narrow: 2 columns, readable at 320px, no forced scroll */
.mibet-custom-table.table-narrow {
    min-width: 0;
}
/* .table-numeric (with .table-narrow): 2–4-row numeric tables;
   value cells don't wrap. Not for long text columns.
   The row-header minimum is lifted at ≤ 600px. */
.mibet-custom-table.table-numeric td {
    white-space: nowrap;
}

/* .table-fit: ≤ 3 columns of short phrases (about 60 characters per cell)
   that must stay side by side on phones; no min-width, no swipe hint.
   Set column widths inline on thead th. Longer 3-column tables keep
   the default scroll. */
.mibet-custom-table.table-fit {
    min-width: 0;
}
.mibet-custom-table.table-fit th,
.mibet-custom-table.table-fit td {
    overflow-wrap: break-word;
    -webkit-hyphens: manual;
    hyphens: manual;
}
/* Header cells vertically centred */
.mibet-custom-table thead th {
    background-color: #f2f6ee;
    color: #2c2d30;
    font-weight: 700;
    letter-spacing: 0.2px;
    padding: 13px 18px;
    border: none;
    border-bottom: 2px solid #82bc24;
    vertical-align: middle;
}
.mibet-custom-table td {
    padding: 14px 18px;
    border-bottom: 1px solid #e2e8f0;
    line-height: 1.5;
    vertical-align: middle;
}
/* Tabular numbers for value columns */
.mibet-custom-table td,
.mibet-custom-table tbody th {
    font-variant-numeric: tabular-nums;
}
.mibet-custom-table tbody tr:nth-child(even) {
    background-color: #fafbfa;
}
.mibet-custom-table tbody tr:hover {
    background-color: #f4f8ee;
}
/* Last row: no bottom border (the container draws it) */
.mibet-custom-table tbody tr:last-child td,
.mibet-custom-table tbody tr:last-child th {
    border-bottom: 0;
}

/* <caption> is hidden by default; add .table-caption to show it.
   New articles introduce the table in the preceding paragraph instead. */
.mibet-custom-table caption {
    display: none;
}
.mibet-custom-table caption.table-caption {
    display: table-caption;
    caption-side: top;
    text-align: left;
    font-size: 15px;
    font-weight: 700;
    color: #2c2d30;
    padding: 14px 18px 12px 18px;
    background-color: #ffffff;
    border-bottom: 1px solid #eef2ea;
}

/* 5a. Row-header column (<th scope="row"> or td.col-rowhead) */
.mibet-custom-table tbody th,
.mibet-custom-table td.col-rowhead {
    background-color: #f6f8f4;
    color: #2c2d30;
    font-weight: 600;
    text-align: left;
    padding: 14px 18px;
    border: none;
    border-bottom: 1px solid #e2e8f0;
    line-height: 1.5;
    vertical-align: middle;
}
.mibet-custom-table tbody tr:nth-child(even) th,
.mibet-custom-table tbody tr:nth-child(even) td.col-rowhead {
    background-color: #f2f5ef;
}
.mibet-custom-table tbody tr:hover th,
.mibet-custom-table tbody tr:hover td.col-rowhead {
    background-color: #eef3e8;
}


/* 5a-2. .th-sub: second line in a row header for grade, standard or model
   numbers only. <th scope="row">Name <span class="th-sub">ASTM A123</span></th>
   Keep the space before the span so extracted text doesn't merge. No brackets. */
.mibet-custom-table th .th-sub {
    display: block;
    margin-top: 3px;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: 0;
    color: #718096;
    font-variant-numeric: tabular-nums;
}

/* 5b. .col-focus: highlights the conclusion/limit column. Tables of ≤ 5 rows.
   Not for side-by-side option comparisons (reads as a recommendation)
   or 2-column tables. */
.mibet-custom-table thead th.col-focus {
    background-color: #e4eed3;
}
.mibet-custom-table td.col-focus {
    background-color: #f6faf0;
    color: #2c2d30;
    font-weight: 600;
}
.mibet-custom-table tbody tr:nth-child(even) td.col-focus { background-color: #f1f7e6; }
.mibet-custom-table tbody tr:hover td.col-focus { background-color: #eaf3d9; }

/* 5c. .row-focus: conclusion row */
.mibet-custom-table tbody tr.row-focus,
.mibet-custom-table tbody tr.row-focus:nth-child(even) {
    background-color: #f4f8ee;
}
.mibet-custom-table tbody tr.row-focus td,
.mibet-custom-table tbody tr.row-focus th {
    border-bottom-color: #dbe6c8;
}
.mibet-custom-table tbody tr.row-focus:hover { background-color: #eaf3d9; }

/* 5d. .col-fpv: target-solution column in comparison tables */
.mibet-custom-table thead th.col-fpv {
    background-color: #dfebc8;
    color: #2c2d30;
}
.mibet-custom-table td.col-fpv {
    background-color: #f6faf0;
    color: #2c2d30;
}
.mibet-custom-table tbody tr:nth-child(even) td.col-fpv { background-color: #f1f7e6; }
.mibet-custom-table tbody tr:hover td.col-fpv { background-color: #eaf3d9; }

/* 5e. .col-neutral: "needs further study" column */
.mibet-custom-table thead th.col-neutral {
    background-color: #f0f1f2;
    color: #4a5568;
    border-bottom-color: #cbd5e1;
}
.mibet-custom-table td.col-neutral {
    background-color: #fafbfc;
    color: #718096;
}
.mibet-custom-table tbody tr:nth-child(even) td.col-neutral { background-color: #f6f7f8; }
.mibet-custom-table tbody tr:hover td.col-neutral { background-color: #f1f2f4; }

/* 5e-2. .col-favor / .col-review: paired columns in condition → judgement
   tables. Colour shows meaning, not preference: same text colour, no bold.
   Always paired; ≤ 5 rows; not for option comparisons. */
.mibet-custom-table thead th.col-favor {
    background-color: #e4eed3;
}
.mibet-custom-table td.col-favor {
    background-color: #f6faf0;
}
.mibet-custom-table tbody tr:nth-child(even) td.col-favor { background-color: #f1f7e6; }
.mibet-custom-table tbody tr:hover td.col-favor { background-color: #eaf3d9; }
.mibet-custom-table thead th.col-review {
    background-color: #f0f1f2;
    border-bottom-color: #cbd5e1;
}
.mibet-custom-table td.col-review {
    background-color: #fafbfc;
}
.mibet-custom-table tbody tr:nth-child(even) td.col-review { background-color: #f6f7f8; }
.mibet-custom-table tbody tr:hover td.col-review { background-color: #f1f2f4; }

/* 5f. tr.row-group: group rows for long tables.
   <tr class="row-group"><th colspan="N" scope="colgroup">Group name</th></tr>
   Only when the group name carries information and the table is long:
   group rows break column consistency, and some extractors then read
   the table as irregular. [colspan] lifts specificity above row headers
   and zebra rows. */
.mibet-custom-table tbody tr.row-group th[colspan] {
    background-color: #f2f6ee;
    color: #60911a;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    line-height: 1.4;
    padding: 9px 18px;
    border: none;
    border-bottom: 1px solid #dbe6c8;
    vertical-align: middle;
}
.mibet-custom-table tbody tr.row-group:hover th[colspan] {
    background-color: #f2f6ee;
}
/* Group rows are not data rows: no hover cue */
.mibet-custom-table tbody tr.row-group {
    cursor: default;
}

/* 5g. .mibet-verdict: per-cell verdict tags (v-fit / v-case / v-alt).
   <td><span class="mibet-verdict v-fit">…</span></td>
   Don't add .col-focus to the same column. */
.mibet-verdict {
    display: inline-block;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.2px;
    padding: 3px 9px;
    border: 1px solid transparent;
    border-radius: 4px;
    white-space: nowrap;
    font-variant-numeric: normal;
}
.mibet-verdict.v-fit {
    background-color: #f2f6ee;
    color: #60911a;
    border-color: #e4eed3;
}
.mibet-verdict.v-case {
    background-color: #f0f1f2;
    color: #4a5568;
    border-color: #e2e8f0;
}
.mibet-verdict.v-alt {
    background-color: #ffffff;
    color: #718096;
    border-color: #cbd5e1;
}

/* 6. Parallel grids: comparison cards + mechanism cards
   .mibet-compare-grid / .mibet-compare-card are aliases of
   .mibet-geo-comparison / .mibet-geo-card (geo for regional US/EU contrasts,
   compare for neutral ones); never both on one element.
   Both cards contrast the same dimension; a third option goes in the prose
   after the grid. Keep citations inside the card. Don't repeat the card tag
   in the card's first sentence. */
.mibet-geo-comparison,
.mibet-compare-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background-color: #e6ebdf;
    border: 1px solid #e6ebdf;
    border-radius: 8px;
    overflow: hidden;
    margin: 28px 0;
}
.mibet-geo-card,
.mibet-compare-card {
    background: #fcfdfc;
    border: 0;
    border-radius: 0;
    padding: 20px 22px;
}
.mibet-geo-card .card-tag,
.mibet-compare-card .card-tag {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    color: #2c2d30;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.35;
}
.mibet-geo-card p,
.mibet-compare-card p {
    font-size: 13.5px;
    line-height: 1.6;
    color: #4a5568;
    margin: 0 !important;
}
.mibet-geo-card p + p,
.mibet-compare-card p + p {
    margin-top: 10px !important;
}
/* Odd last card spans the full row (no #e6ebdf gap showing) */
.mibet-geo-comparison > .mibet-geo-card:last-child:nth-child(odd),
.mibet-compare-grid > .mibet-compare-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

/* 7. .mibet-datastrip: measured or code values pulled out for scanning and
   extraction. div + span only. Always followed by a .ds-note with conditions
   and source. 4 cells ≈ 209px; .ds-3 ≈ 280px (use it when labels exceed
   6 words). No categorical values (exposure class, C1–CX). Paired values
   under conditions go in .table-numeric. Skip it when the article has no
   traceable numbers. */
.single-blog-content .mibet-datastrip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background-color: #e6ebdf;
    border: 1px solid #e6ebdf;
    border-radius: 8px;
    overflow: hidden;
    margin: 28px 0 0 0;
    padding: 0;
}
/* .ds-3: three cells */
.single-blog-content .mibet-datastrip.ds-3 {
    grid-template-columns: repeat(3, 1fr);
}
.single-blog-content .mibet-datastrip .ds-item {
    display: block;
    background-color: #fcfdfc;
    padding: 18px 18px 16px;
    margin: 0;
}
.single-blog-content .mibet-datastrip .ds-value {
    display: block;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.15;
    color: #2c2d30;
    margin: 0 0 7px 0;
    padding: 0;
    font-variant-numeric: tabular-nums;
}
.single-blog-content .mibet-datastrip .ds-unit {
    font-size: 15px;
    font-weight: 600;
    margin-left: 1px;
    color: #4a5568;
}
/* .ds-cap: qualifier before the value (min. / max. / up to / approx.) */
.single-blog-content .mibet-datastrip .ds-cap {
    display: inline-block;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    color: #82bc24;
    margin-right: 5px;
    vertical-align: 4px;
    letter-spacing: 0.3px;
}
/* .ds-alt: second unit or equivalent; the primary unit stays in .ds-value */
.single-blog-content .mibet-datastrip .ds-alt {
    display: block;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    color: #a0aec0;
    margin: 0 0 7px 0;
    padding: 0;
    font-variant-numeric: tabular-nums;
}
/* Tighter gap under the value when .ds-alt follows */
.single-blog-content .mibet-datastrip .ds-value + .ds-alt {
    margin-top: -2px;
}
.single-blog-content .mibet-datastrip .ds-label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.45;
    color: #718096;
    margin: 0;
    padding: 0;
}

/* With .ds-alt present: column flex, labels pinned to the bottom so they
   align across cells. Without :has() support it degrades gracefully. */
.single-blog-content .mibet-datastrip:has(.ds-alt) .ds-item {
    display: flex;
    flex-direction: column;
}
.single-blog-content .mibet-datastrip:has(.ds-alt) .ds-label {
    margin-top: auto;
}

/* .ds-note: block footnote for datastrip, relation and tables — conditions,
   assumptions, source, or "derived/example value". Directly below its block only. */
.single-blog-content .ds-note {
    font-size: 12.5px;
    line-height: 1.65;
    color: #718096;
    font-style: italic;
    margin: 10px 0 28px 0 !important;
}

/* Table source line (.ds-note right after a table): −12px collapses with the
   20px container margin to an 8px gap. One line, source or data condition only. */
.single-blog-content .mibet-table-container + .ds-note {
    margin-top: -12px !important;
}
.single-blog-content .mibet-table-container + .ds-note a {
    color: #4a5568;
    text-decoration: none !important;
    border-bottom: 1px dotted #a0aec0;
    transition: color .15s ease, border-color .15s ease;
}
.single-blog-content .mibet-table-container + .ds-note a:hover {
    color: #60911a;
    border-bottom-color: #82bc24;
}

/* 8. .mibet-criteria-box: threshold criteria ("holds when…"). One per article.
   Needs real threshold values, at least 3, without writing new content;
   otherwise keep them in prose with .mibet-metric. Lists of documents or
   inputs use .mibet-bullet-list. ✓ is reserved for this component. */
.mibet-criteria-box {
    background-color: #fcfdfc;
    border: 1px solid #e1e8da;
    border-radius: 8px;
    padding: 22px 26px;
    margin: 28px 0;
}
.mibet-criteria-box .criteria-title {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #82bc24;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 8px;
}
.single-blog-content .mibet-criteria-box .criteria-intro {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.55;
    color: #2c2d30;
    margin: 0 0 14px 0 !important;
}
.single-blog-content .criteria-list {
    padding-left: 0 !important;
    margin: 0 !important;
}
.single-blog-content .criteria-list li {
    list-style-type: none !important;
    position: relative !important;
    padding-left: 28px !important;
    margin: 0 0 11px 0 !important;
    font-size: 14.5px;
    line-height: 1.6;
    color: #4a5568;
}
.single-blog-content .criteria-list li:last-child {
    margin-bottom: 0 !important;
}
.criteria-list li::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid #82bc24;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* 9. .mibet-mechanism-grid: 3 columns (.cols-2 for longer text, 2×2 for 4).
   .mech-num only for real sequences. Each card needs a sentence the article
   already contains. Skip it if a matching set of H3s follows. */
.mibet-mechanism-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background-color: #e6ebdf;
    border: 1px solid #e6ebdf;
    border-radius: 8px;
    overflow: hidden;
    margin: 28px 0;
}
.mibet-mechanism-grid.cols-2 {
    grid-template-columns: repeat(2, 1fr);
}
/* .cols-2: odd last card spans the full row */
.mibet-mechanism-grid.cols-2 > .mibet-mechanism-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}
.mibet-mechanism-card {
    background: #fcfdfc;
    border: 0;
    border-radius: 0;
    padding: 18px 20px 20px;
}
.mibet-mechanism-card .mech-num {
    display: block;
    font-size: 13px;
    font-weight: 800;
    color: #82bc24;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}
.mibet-mechanism-card .mech-title {
    display: block;
    font-size: 14.5px;
    font-weight: 700;
    color: #2c2d30;
    margin-bottom: 6px;
    line-height: 1.35;
}
.mibet-mechanism-card .mech-desc {
    font-size: 13px;
    line-height: 1.6;
    color: #4a5568;
    margin: 0 !important;
}

/* 9a. .mibet-loadpath: force path only. Time order and workflows use
   .mibet-ordered-list. <ol class="mibet-loadpath"><li>…</li></ol>
   Arrow marks are reserved for this component. Up to 6 segments on one row
   (≈ 139px each; .lp-5 ≈ 167px), labels 2–3 words. 7 → .lp-7,
   8 → .lp-8 (4 columns, two rows). */
.single-blog-content .mibet-loadpath {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1px;
    background-color: #e6ebdf;
    border: 1px solid #e6ebdf;
    border-radius: 8px;
    overflow: hidden;
    margin: 24px 0 28px 0 !important;
    padding: 0 !important;
    list-style: none !important;
    list-style-type: none !important;
    counter-reset: none;
}
/* .lp-5: (0,3,0) beats the base rule, so repeat it in the mobile override. */
.single-blog-content .mibet-loadpath.lp-5 {
    grid-template-columns: repeat(5, 1fr);
}
/* .lp-7: 4 + 3, last cell spans 2. Cell 4 sits at the wrap: no arrow,
   no reserved right padding. Same mobile trap as .lp-5, plus grid-column
   must be reset to auto at 768px. */
.single-blog-content .mibet-loadpath.lp-7 {
    grid-template-columns: repeat(4, 1fr);
}
.single-blog-content .mibet-loadpath.lp-7 li:last-child {
    grid-column: span 2;
}
.single-blog-content .mibet-loadpath.lp-7 li:nth-child(4) {
    padding-right: 14px !important;
}
.single-blog-content .mibet-loadpath.lp-7 li:nth-child(4)::after {
    content: none;
}
/* .lp-8: 4 × 2. Cell 4: no arrow on desktop, arrow restored in the
   mobile single column (768px). */
.single-blog-content .mibet-loadpath.lp-8 {
    grid-template-columns: repeat(4, 1fr);
}
.single-blog-content .mibet-loadpath.lp-8 li:nth-child(4) {
    padding-right: 14px !important;
}
.single-blog-content .mibet-loadpath.lp-8 li:nth-child(4)::after {
    content: none;
}
.single-blog-content .mibet-loadpath li {
    list-style-type: none !important;
    background: #fcfdfc !important;
    position: relative !important;
    display: flex;
    align-items: center;
    margin: 0 !important;
    padding: 16px 14px !important;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    color: #2c2d30;
}
.single-blog-content .mibet-loadpath li:not(:last-child) {
    padding-right: 26px !important;
}
/* Remove theme bullets */
.single-blog-content .mibet-loadpath li::before {
    content: none !important;
}
/* Arrow mark pointing to the next segment */
.mibet-loadpath li:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 9px;
    top: 50%;
    width: 6px;
    height: 6px;
    border: solid #82bc24;
    border-width: 1.5px 1.5px 0 0;
    transform: translateY(-50%) rotate(45deg);
}
/* .lp-end-focus: tints the last cell (#f6faf0) when the chain ends where the
   article's topic begins. Last cell only. Needs !important to beat the base
   background !important; background-only, so no breakpoint repeats. */
.single-blog-content .mibet-loadpath.lp-end-focus li:last-child {
    background: #f6faf0 !important;
}

/* 9b. .mibet-relation: one "factor × factor = result" (or ÷) per article.
   <div class="mibet-relation rel-noted">
     <div class="rel-item"><span class="rel-term">…</span><span class="rel-note">…</span></div>
     <div class="rel-op">&times;</div> … <div class="rel-item rel-result">…</div>
   </div>
   <p class="ds-note">Assumptions, source, plain-text formula (M = F x h)</p>
   Operators × ÷ = only. Constants go in .rel-note or the footnote, not a cell.
   Don't use it without a .ds-note giving assumptions and source, or when a
   diagram or formula already shows the relation. 840px: cells ≈ 250px;
   .rel-term ≤ 3 words. */
.mibet-relation {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 1px;
    background-color: #e6ebdf;
    border: 1px solid #e6ebdf;
    border-radius: 8px;
    overflow: hidden;
    margin: 28px 0;
}
/* .rel-noted: zero bottom margin so the .ds-note sits tight. margin-bottom only
   (not the shorthand), so the mobile margin shorthand can't undo it. */
.mibet-relation.rel-noted {
    margin-bottom: 0;
}
.mibet-relation .rel-item {
    background-color: #fcfdfc;
    padding: 18px 20px 20px;
}
.mibet-relation .rel-item.rel-result {
    background-color: #f6faf0;
}
.mibet-relation .rel-term {
    display: block;
    font-size: 14.5px;
    font-weight: 700;
    color: #2c2d30;
    line-height: 1.35;
    margin-bottom: 6px;
}
.mibet-relation .rel-note {
    display: block;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.5;
    color: #718096;
}
/* Operator column: a narrow connector, not a fourth card */
.mibet-relation .rel-op {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    padding: 0 12px;
    background-color: #f6f8f4;
    color: #82bc24;
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: normal;
}

/* 10. .mibet-ordered-list: real sequences only (steps, check order, priority).
   Parallel items use .mibet-bullet-list; force paths use .mibet-loadpath.
   Run-in heads use .mibet-lead-in. The ol reset hides the theme's numbering. */
.single-blog-content .mibet-ordered-list {
    list-style: none !important;
    list-style-type: none !important;
    padding-left: 0 !important;
    margin: 20px 0 !important;
    counter-reset: mibet-counter;
}
.single-blog-content .mibet-ordered-list li {
    list-style-type: none !important;
    background: none !important;
    position: relative;
    padding-left: 32px !important;
    margin-bottom: 16px !important;
    font-size: 15px;
    line-height: 1.6;
    color: #4a5568;
}
.single-blog-content .mibet-ordered-list li:last-child {
    margin-bottom: 0 !important;
}
.mibet-ordered-list li::before {
    counter-increment: mibet-counter;
    content: counter(mibet-counter) "." !important;
    position: absolute;
    left: 0;
    top: 0;
    color: #82bc24;
    font-weight: 800;
    font-size: 16px;
    background: none !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
}

/* 10a. .ol-compact: one-line steps, gap 16 → 10px. Not for multi-line items
   or items with lead-ins. The last-child reset is repeated (same specificity). */
.single-blog-content .mibet-ordered-list.ol-compact li {
    margin-bottom: 10px !important;
}
.single-blog-content .mibet-ordered-list.ol-compact li:last-child {
    margin-bottom: 0 !important;
}

/* 11. .mibet-bullet-list: body bullet list (green dots) */
.single-blog-content .mibet-bullet-list { padding-left: 1.0em; margin: 18px 0; }
.single-blog-content .mibet-bullet-list li {
    list-style-type: none !important;
    position: relative !important;
    padding-left: 20px !important;
    margin-bottom: 12px !important;
    font-size: 15px;
    line-height: 1.65;
    color: #4a5568;
}
.mibet-bullet-list li::before {
    content: "•" !important;
    position: absolute !important;
    left: 2px !important;
    top: -1px !important;
    color: #82bc24 !important;
    font-size: 20px !important;
    line-height: 1 !important;
}
.mibet-bullet-list li strong { color: #2c2d30; }

/* 12. .mibet-cta-block: mid-article call-out. The end-of-article CTA uses
   plain paragraphs. */
.mibet-cta-block {
    background: #f7faf1;
    border: 1px solid #e1e8da;
    border-left: 3px solid #82bc24;
    border-radius: 0 8px 8px 0;
    padding: 22px 26px;
    margin: 24px 0;
}
.mibet-cta-block p { margin: 0 0 12px 0; }
.mibet-cta-block p:last-child { margin-bottom: 0; }

/* 13. Figures: figure / figcaption */
.single-blog-content .mibet-figure {
    margin: 32px 0;
}
.single-blog-content .mibet-figure img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    box-shadow: none;
}
.single-blog-content .mibet-figure figcaption {
    text-align: center;
    font-size: 13.5px;
    color: #718096;
    margin-top: 12px;
    font-style: italic;
    line-height: 1.6;
}

/* 13a. .mibet-media-row: body text + side figure (layout container).
   <div class="mibet-media-row"><figure class="media-figure">img|svg + figcaption</figure>
   <div class="media-text"><p>…</p></div></div>
   Figure first in the DOM: it floats right at 40% (≈ 336px) and the text wraps.
   flow-root contains the float; never give .media-text overflow or flow-root.
   ≤ 768px: stacks, figure after text.
   Limits: 1–2 per article, not in adjacent sections; one image; at least two
   paragraphs beside it; left-aligned text, no justify or hyphenation. */
.single-blog-content .mibet-media-row {
    display: flow-root;
    margin: 0 0 28px 0;
}
.single-blog-content .mibet-media-row .media-text p {
    text-align: left;
    -webkit-hyphens: manual;
    hyphens: manual;
}
.single-blog-content .mibet-media-row .media-text > :first-child {
    margin-top: 0 !important;
}
.single-blog-content .mibet-media-row .media-text > :last-child {
    margin-bottom: 0 !important;
}
.single-blog-content .mibet-media-row .media-figure {
    float: right;
    width: 40%;
    margin: 4px 0 14px 28px;
    padding: 0;
}
.single-blog-content .mibet-media-row .media-figure img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: none;
}
.single-blog-content .mibet-media-row .media-figure figcaption {
    text-align: left;
    font-size: 12.5px;
    line-height: 1.55;
    color: #718096;
    font-style: italic;
    margin-top: 10px;
}

/* 13b. .mibet-diagram: inline SVG sizing and frame (hairline, 8px, #fcfdfc).
   In the markup: presentation attributes only; lines #2c2d30 / #4a5568,
   guides #a0aec0, fills #e2e8f0 / #eef3e8, #82bc24 on one element class;
   dimension lines end in ticks, never arrows; no ✓ × ÷ =;
   role="img" + <title> + <desc>, or aria-label on <svg> if <title> is stripped. */
.single-blog-content .mibet-diagram {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
    background-color: #fcfdfc;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: visible;
}

/* 13c. .mibet-figure-diagram + .diagram-scroll: full-width horizontal drawings.
   <figure class="mibet-figure mibet-figure-diagram"><div class="diagram-scroll">
   <svg class="mibet-diagram">…</svg></div><figcaption>…</figcaption></figure>
   ≤ 600px: the SVG keeps a 600px min-width and scrolls, with the table-style
   swipe hint. Tall or square images go in .mibet-media-row instead. */
.single-blog-content .mibet-figure-diagram .diagram-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

/* 13d. .mibet-figure-set: three side-by-side schematics (parallel grid).
   <figure class="mibet-figure mibet-figure-set"><div class="fs-grid">
   <div class="fs-item"><svg class="fs-svg">…</svg><span class="fs-name">…</span></div>
   …</div><figcaption>…</figcaption></figure>
   Names in HTML so they don't shrink. Stays three columns on phones: draw
   for ≈ 100px cells (thick lines, no text). SVG conventions as 13b.
   Limits: one 3-column set + one .fs-2 per article, not in adjacent H2s,
   different purposes; one dimension, names ≤ 3 words, no sentences in cells. */
.single-blog-content .mibet-figure-set .fs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background-color: #e6ebdf;
    border: 1px solid #e6ebdf;
    border-radius: 8px;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.single-blog-content .mibet-figure-set .fs-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background-color: #fcfdfc;
    padding: 22px 16px 16px;
    margin: 0;
    min-width: 0;
}
.single-blog-content .mibet-figure-set .fs-svg {
    display: block;
    width: 100%;
    max-width: 240px;
    height: auto;
    border: 0;
    background: none;
    overflow: visible;
}
.single-blog-content .mibet-figure-set .fs-name {
    display: block;
    margin-top: 12px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
    color: #2c2d30;
    text-align: center;
}

/* 13e. .fs-2: two cells — two states of one object, or one relation at two
   scales. Same viewBox and coordinates in both SVGs. ≈ 420px per cell.
   Stacks at ≤ 600px. Names ≤ 3 words. */
.single-blog-content .mibet-figure-set.fs-2 .fs-grid {
    grid-template-columns: repeat(2, 1fr);
}
.single-blog-content .mibet-figure-set.fs-2 .fs-item {
    padding: 20px 18px 16px;
}
.single-blog-content .mibet-figure-set.fs-2 .fs-svg {
    max-width: 400px;
}

/* 13f. .fs-legend: HTML legend after .fs-grid, before figcaption, only when
   colour or shape carries meaning.
   <ul class="fs-legend"><li class="lg-zone">…</li> …
   <li class="lg-dim"><span class="lg-key">A</span> …</li></ul>
   Swatches drawn by li::before, same colours as the SVG. One phrase per item.
   Generic aliases: .lg-rail = .lg-short (grey bar), .lg-clamp = .lg-mid (dark square). */
.single-blog-content .mibet-figure-set .fs-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 20px;
    margin: 14px 0 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
    list-style-type: none !important;
}
.single-blog-content .mibet-figure-set .fs-legend li {
    list-style: none !important;
    list-style-type: none !important;
    background: none !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 0 0 24px !important;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.5;
    color: #4a5568;
}
.single-blog-content .mibet-figure-set .fs-legend li::before {
    content: "" !important;
    position: absolute !important;
    left: 0;
    top: 50%;
    width: 16px;
    height: 6px;
    transform: translateY(-50%);
    box-sizing: border-box;
    border-radius: 1px;
}
.single-blog-content .mibet-figure-set .fs-legend li.lg-zone::before {
    background-color: #82bc24;
}
.single-blog-content .mibet-figure-set .fs-legend li.lg-short::before,
.single-blog-content .mibet-figure-set .fs-legend li.lg-rail::before {
    background-color: #cbd5e1;
}
.single-blog-content .mibet-figure-set .fs-legend li.lg-frame::before {
    height: 2px;
    background-color: #4a5568;
    border-radius: 0;
}
.single-blog-content .mibet-figure-set .fs-legend li.lg-end::before {
    left: 2px;
    width: 12px;
    height: 13px;
    background-color: #ffffff;
    border: 2px solid #2c2d30;
    border-radius: 2px;
}
.single-blog-content .mibet-figure-set .fs-legend li.lg-mid::before,
.single-blog-content .mibet-figure-set .fs-legend li.lg-clamp::before {
    left: 2px;
    width: 12px;
    height: 13px;
    background-color: #2c2d30;
    border-radius: 2px;
}
.single-blog-content .mibet-figure-set .fs-legend li.lg-dim::before {
    content: none !important;
}
.single-blog-content .mibet-figure-set .fs-legend .lg-key {
    position: absolute;
    left: 3px;
    top: 0;
    font-weight: 700;
    color: #2c2d30;
}

/* 13g. .mibet-photo-pair: two product photos compared side by side,
   each with its own caption.
   <div class="mibet-photo-pair"><figure class="pp-item"><img><figcaption>…
   </figcaption></figure> × 2</div>
   Max 680px, centred; 4:3 crop (upload 800 × 600). Separately framed images,
   not a gap grid. One per article. Stacks at ≤ 480px. */
.single-blog-content .mibet-photo-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    max-width: 680px;
    margin: 28px auto;
    padding: 0;
}
.single-blog-content .mibet-photo-pair .pp-item {
    margin: 0;
    padding: 0;
    min-width: 0;
}
.single-blog-content .mibet-photo-pair .pp-item img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background-color: #fcfdfc;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: none;
}
.single-blog-content .mibet-photo-pair figcaption {
    text-align: center;
    font-size: 13.5px;
    line-height: 1.55;
    color: #718096;
    font-style: italic;
    margin-top: 10px;
}

/* 14. [Unbuilt] flat FAQ divider. .faq-flat-item / .faq-flat-q have no base
   styles; use the .faq accordion. */
.mibet-faq-flat-section {
    margin-top: 48px;
    padding-top: 1px;
    border-top: 2px solid #f0f6e9;
}

/* 15. .mibet-lead-in: run-in head (list items, card layers,
   "Illustrative example:"); replaces <strong> in body text */
.mibet-lead-in {
    font-weight: 700;
    color: #2c2d30;
}

/* 16. .mibet-legal-note: trademark / disclaimer line, the last line of the page
   after Article Sources. One per article, upright text. */
.single-blog-content .mibet-legal-note {
    margin: 24px 0 0 0 !important;
    padding: 14px 0 0 0;
    border-top: 1px solid #eef2ea;
    font-size: 12.5px;
    line-height: 1.65;
    color: #718096;
    font-style: normal;
}


/* ==================== Responsive ==================== */
@media screen and (max-width: 1024px) {
    .single-blog-content .mibet-datastrip {
        grid-template-columns: repeat(2, 1fr);
    }
    .single-blog-content .mibet-datastrip.ds-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    /* Mechanism grid: 3 → 2 columns */
    .mibet-mechanism-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    /* Odd last card spans the row */
    .mibet-mechanism-grid > .mibet-mechanism-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
    /* Load path keeps its row layout; tighter padding and type */
    .single-blog-content .mibet-loadpath li {
        padding: 14px 11px !important;
        font-size: 12px;
    }
    .single-blog-content .mibet-loadpath li:not(:last-child) {
        padding-right: 22px !important;
    }
    /* Cell 4 of .lp-7 / .lp-8: right padding follows this breakpoint */
    .single-blog-content .mibet-loadpath.lp-7 li:nth-child(4),
    .single-blog-content .mibet-loadpath.lp-8 li:nth-child(4) {
        padding-right: 11px !important;
    }
    .mibet-loadpath li:not(:last-child)::after {
        right: 7px;
    }
    /* Relation stays on one row; tighter padding */
    .mibet-relation .rel-item {
        padding: 16px 16px 18px;
    }
    .mibet-relation .rel-term {
        font-size: 14px;
    }
    .mibet-relation .rel-note {
        font-size: 12px;
    }
    .mibet-relation .rel-op {
        min-width: 34px;
        padding: 0 9px;
        font-size: 16px;
    }
    /* Media row keeps the wrap; smaller gap */
    .single-blog-content .mibet-media-row .media-figure {
        margin-left: 22px;
    }
}

@media screen and (max-width: 768px) {
    .mibet-hero-box {
        padding: 20px;
        margin: 24px 0;
    }
    .mibet-qa-text {
        font-size: 15.5px;
    }
    .mibet-key-takeaways ul li {
        font-size: 14px;
        margin-bottom: 10px !important;
    }

    /* TOC: tighter padding */
    .mibet-toc {
        padding: 14px 14px 12px 14px;
        margin: 24px 0;
    }
    .single-blog-content .mibet-toc-list {
        margin-top: 10px !important;
    }
    .mibet-toc-list li a {
        font-size: 14px;
        padding: 9px 8px 9px 32px;
    }
    .mibet-toc-list li a::before {
        left: 11px;
        top: 9px;
    }
    .mibet-toc summary {
        font-size: 14.5px;
    }
    .mibet-toc summary::after {
        width: 30px;
        height: 30px;
    }

    .mibet-engineer-tip {
        padding: 18px 20px;
        margin: 24px 0;
    }
    .tip-content {
        font-size: 13.5px;
    }

    /* Swipe hint: appearance declared here; on for .table-wide only
       (min-width 760 already scrolls at 601–768px) */
    .mibet-table-container::after {
        content: none;
        display: block;
        position: sticky;
        left: 0;
        text-align: right;
        font-size: 11px;
        color: #a0aec0;
        padding: 6px 12px 7px;
        border-top: 1px solid #eef2ea;
        font-style: italic;
    }
    .mibet-table-container:has(.table-wide)::after {
        content: "Swipe ↔ to view full table";
    }

    /* Parallel grids go to one column; the 1px gaps stay, so the set reads as one unit */
    .mibet-geo-comparison,
    .mibet-compare-grid {
        grid-template-columns: 1fr;
        gap: 1px;
        margin: 24px 0;
    }
    .mibet-geo-card,
    .mibet-compare-card {
        padding: 18px 18px 20px;
    }
    .mibet-mechanism-grid,
    .mibet-mechanism-grid.cols-2 {
        grid-template-columns: 1fr;
        gap: 1px;
        margin: 24px 0;
    }

    /* .ds-3: one column (two would leave an empty #e6ebdf cell) */
    .single-blog-content .mibet-datastrip.ds-3 {
        grid-template-columns: 1fr;
    }
    .single-blog-content .mibet-datastrip .ds-value {
        font-size: 23px;
    }
    /* One column: bottom-aligned labels no longer needed */
    .single-blog-content .mibet-datastrip:has(.ds-alt) .ds-item {
        display: block;
    }
    .single-blog-content .mibet-datastrip:has(.ds-alt) .ds-label {
        margin-top: 0;
    }

    /* Load path becomes a vertical chain; arrows rotate 90°.
       .lp-5 / .lp-7 / .lp-8 must be repeated here; .lp-end-focus needs nothing. */
    .single-blog-content .mibet-loadpath,
    .single-blog-content .mibet-loadpath.lp-5,
    .single-blog-content .mibet-loadpath.lp-7,
    .single-blog-content .mibet-loadpath.lp-8 {
        grid-template-columns: 1fr;
        margin: 20px 0 24px 0 !important;
    }
    /* .lp-7: reset span 2 to auto, or an implicit second track doubles the last row */
    .single-blog-content .mibet-loadpath.lp-7 li:last-child {
        grid-column: auto;
    }
    .single-blog-content .mibet-loadpath li {
        padding: 13px 16px 23px !important;
        font-size: 13.5px;
    }
    .single-blog-content .mibet-loadpath li:not(:last-child) {
        padding-right: 16px !important;
    }
    .single-blog-content .mibet-loadpath li:last-child {
        padding-bottom: 13px !important;
    }
    /* .lp-7 / .lp-8 cell 4: arrow and padding restored (next segment is below) */
    .single-blog-content .mibet-loadpath.lp-7 li:nth-child(4),
    .single-blog-content .mibet-loadpath.lp-8 li:nth-child(4) {
        padding-right: 16px !important;
    }
    .single-blog-content .mibet-loadpath.lp-7 li:nth-child(4)::after,
    .single-blog-content .mibet-loadpath.lp-8 li:nth-child(4)::after {
        content: "";
    }
    .mibet-loadpath li:not(:last-child)::after {
        right: auto;
        left: 50%;
        top: auto;
        bottom: 8px;
        transform: translateX(-50%) rotate(135deg);
    }

    /* Relation stacks into five rows; operators become a narrow band.
       .rel-noted still wins on margin-bottom. */
    .mibet-relation {
        grid-template-columns: 1fr;
        margin: 24px 0;
    }
    .mibet-relation .rel-item {
        padding: 16px 18px 18px;
    }
    .mibet-relation .rel-term {
        font-size: 14.5px;
    }
    .mibet-relation .rel-note {
        font-size: 12.5px;
    }
    .mibet-relation .rel-op {
        min-width: 0;
        padding: 7px 0;
        font-size: 16px;
    }

    /* Media row stacks: no float, figure after text, max 440px centred */
    .single-blog-content .mibet-media-row {
        display: flex;
        flex-direction: column;
        gap: 18px;
        margin: 0 0 24px 0;
    }
    .single-blog-content .mibet-media-row .media-figure {
        float: none;
        order: 2;
        width: 100%;
        max-width: 440px;
        margin: 0 auto;
    }

    .mibet-criteria-box {
        padding: 20px;
    }
    .single-blog-content .criteria-list li {
        font-size: 14px;
    }
    .single-blog-content .mibet-ordered-list li {
        padding-left: 24px !important;
        font-size: 14px;
    }
    .mibet-ordered-list li::before {
        font-size: 15px;
    }
    .mibet-bullet-list li {
        font-size: 14px;
    }
    .mibet-cta-block {
        padding: 20px;
    }
    .mibet-faq-flat-section {
        margin-top: 32px;
        padding-top: 1px;
    }
    .single-blog-content .mibet-figure {
        margin: 24px 0;
    }
    /* Photo pair stays side by side; smaller gap */
    .single-blog-content .mibet-photo-pair {
        gap: 14px;
        margin: 24px auto;
    }
    .single-blog-content .mibet-photo-pair figcaption {
        font-size: 13px;
        margin-top: 8px;
    }
    /* Formula block: smaller indent */
    .single-blog-content .mibet-formula-block {
        padding-left: 12px !important;
    }
    .single-blog-content .mibet-formula-block p {
        font-size: 14.5px;
    }
}

@media screen and (max-width: 600px) {
    /* Swipe hint on for all tables */
    .mibet-table-container::after {
        content: "Swipe ↔ to view full table";
    }
    /* No hint for .table-narrow (it doesn't scroll) */
    .mibet-table-container:has(.table-narrow)::after {
        content: none;
    }
    /* No hint for .table-fit (it doesn't scroll) */
    .mibet-table-container:has(.table-fit)::after {
        content: none;
    }
    /* Legal note: same size as the sources list */
    .single-blog-content .mibet-legal-note {
        font-size: 12px;
        margin-top: 20px !important;
        padding-top: 12px;
    }
    .mibet-custom-table thead th,
    .mibet-custom-table tbody th,
    .mibet-custom-table td,
    .mibet-custom-table td.col-rowhead {
        padding: 10px 12px;
        font-size: 13px;
    }
    /* .th-sub: half a step smaller */
    .mibet-custom-table th .th-sub {
        font-size: 12px;
        margin-top: 2px;
    }
    /* Group rows: tighter */
    .mibet-custom-table tbody tr.row-group th[colspan] {
        padding: 8px 12px;
        font-size: 11px;
        letter-spacing: 0.6px;
    }
    /* Verdict tags: tighter, still no wrap */
    .mibet-verdict {
        font-size: 11.5px;
        padding: 2px 7px;
    }
    .mibet-custom-table caption.table-caption {
        font-size: 14px;
        padding: 12px 12px 10px 12px;
    }
    /* .table-narrow: 150px row-header minimum (group rows excluded) */
    .mibet-custom-table.table-narrow tbody th:not([colspan]) {
        min-width: 150px;
    }
    /* .table-numeric: no row-header minimum; (0,4,2) also beats the 480px rule */
    .mibet-custom-table.table-narrow.table-numeric tbody th:not([colspan]) {
        min-width: 0;
    }
    /* .table-fit: 2px less padding */
    .mibet-custom-table.table-fit thead th,
    .mibet-custom-table.table-fit tbody th,
    .mibet-custom-table.table-fit td {
        padding: 10px 10px;
    }
    /* Comparison card tag: a little more line height when it wraps */
    .mibet-geo-card .card-tag,
    .mibet-compare-card .card-tag {
        font-size: 12.5px;
        letter-spacing: 0.4px;
    }
    /* Full-width diagram: 600px min-width, horizontal scroll, hint without top rule */
    .single-blog-content .mibet-figure-diagram .diagram-scroll .mibet-diagram {
        min-width: 600px;
    }
    .single-blog-content .mibet-figure-diagram .diagram-scroll::after {
        content: "Swipe ↔ to view full diagram";
        display: block;
        position: sticky;
        left: 0;
        text-align: right;
        font-size: 11px;
        color: #a0aec0;
        padding: 6px 12px 0;
        font-style: italic;
    }
    /* Figure set stays three columns; tighter padding and names */
    .single-blog-content .mibet-figure-set .fs-item {
        padding: 16px 10px 12px;
    }
    .single-blog-content .mibet-figure-set .fs-name {
        margin-top: 9px;
        font-size: 12.5px;
    }
    /* .fs-2 stacks; (0,4,0) also covers the 480px breakpoint */
    .single-blog-content .mibet-figure-set.fs-2 .fs-grid {
        grid-template-columns: 1fr;
    }
    .single-blog-content .mibet-figure-set.fs-2 .fs-item {
        padding: 18px 14px 14px;
    }
    .single-blog-content .mibet-figure-set.fs-2 .fs-name {
        margin-top: 10px;
        font-size: 13px;
        line-height: 1.35;
    }
    /* Legend: one left-aligned column */
    .single-blog-content .mibet-figure-set .fs-legend {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        justify-items: start;
        gap: 4px;
        margin-top: 12px !important;
        padding: 0 4px !important;
    }
    .single-blog-content .mibet-figure-set .fs-legend li {
        font-size: 12px;
    }
}

@media screen and (max-width: 480px) {
    .mibet-datastrip .ds-item {
        padding: 14px 14px 13px;
    }
    .single-blog-content .mibet-datastrip .ds-value {
        font-size: 21px;
    }
    .single-blog-content .mibet-datastrip .ds-alt {
        font-size: 11.5px;
    }
    .single-blog-content .mibet-datastrip .ds-label {
        font-size: 12px;
    }
    .mibet-geo-card,
    .mibet-compare-card,
    .mibet-mechanism-card {
        padding: 16px 16px 18px;
    }
    .mibet-relation .rel-item {
        padding: 14px 16px 16px;
    }
    .mibet-relation .rel-term {
        font-size: 14px;
    }
    .single-blog-content .mibet-loadpath li {
        padding: 12px 14px 21px !important;
        font-size: 13px;
    }
    .single-blog-content .mibet-loadpath li:last-child {
        padding-bottom: 12px !important;
    }
    /* Cell 4 of .lp-7 / .lp-8: right padding follows this breakpoint */
    .single-blog-content .mibet-loadpath.lp-7 li:nth-child(4),
    .single-blog-content .mibet-loadpath.lp-8 li:nth-child(4) {
        padding-right: 14px !important;
    }
    /* .table-narrow: 130px row-header minimum */
    .mibet-custom-table.table-narrow tbody th:not([colspan]) {
        min-width: 130px;
    }
    /* .table-fit: half-step smaller text and padding */
    .mibet-custom-table.table-fit thead th,
    .mibet-custom-table.table-fit tbody th,
    .mibet-custom-table.table-fit td {
        padding: 9px 8px;
        font-size: 12.5px;
    }
    /* Photo pair stacks; max 400px each */
    .single-blog-content .mibet-photo-pair {
        grid-template-columns: minmax(0, 400px);
        justify-content: center;
        gap: 18px;
    }
    /* Figure set cells ≈ 95–140px; names may wrap */
    .single-blog-content .mibet-figure-set .fs-item {
        padding: 14px 6px 11px;
    }
    .single-blog-content .mibet-figure-set .fs-name {
        margin-top: 8px;
        font-size: 12px;
        line-height: 1.3;
    }
    /* [Unbuilt] flat FAQ rules — no matching elements yet */
    .faq-flat-item {
        padding: 14px;
    }
    .faq-flat-q .faq-num {
        font-size: 16px;
    }
}


/* Reduced motion: decorative hover/open transitions off; layout unchanged */
@media (prefers-reduced-motion: reduce) {
    .toc .toc-item,
    .faq .is-open > .faq-q,
    .srcs-toggle,
    .srcs-arrow,
    .single-blog-content .srcs-list a,
    .mibet-toc summary::after,
    .mibet-toc-list li::before,
    .mibet-toc-list li a,
    .overlay-play,
    #modal-inquiry-success #inquiry-success-ok,
    .md-show ~ .md-overlay {
        transition: none !important;
    }
}