/* ============================================================
   Businerds — COMMON theme (shared by all pages)
   AI & tech consultancy template. Loads after bootstrap.min.css.
   Design tokens, typography, buttons, header (navbar + mega menu
   + offcanvas), footer and reusable cards. Page-specific styles
   live in their own sheets (services.css, academy.css, …).
   ============================================================ */

:root{
  /* colours */
  --cx-ink:#222222;          /* primary text + buttons        */
  --cx-ink-2:#3a3a3a;
  --cx-muted:#6f6f6f;        /* secondary text                */
  --cx-muted-2:#9b9b9b;      /* tertiary / meta               */
  --cx-surface:#f3f3f1;      /* light-grey cards / sections   */
  --cx-surface-2:#ececea;
  --cx-soft:rgba(73,73,73,.07);   /* soft button / chip fill  */
  --cx-soft-hover:rgba(73,73,73,.13);
  --cx-line:#e7e7e3;         /* hairline dividers             */
  --cx-white:#ffffff;
  --cx-accent:#5b5bd6;       /* Businerds indigo accent       */
  --cx-black:#000000;        /* footer                        */
  --cx-footer-text:#b9b9b9;

  /* radii */
  --cx-r-xl:28px;
  --cx-r-lg:18px;
  --cx-r-md:14px;
  --cx-pill:999px;

  /* type & layout */
  --cx-font:'Geist','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --cx-maxw:1360px;             /* content container width */
  --cx-nav-h:74px;
}

/* Primary font: Geist (Google Fonts, OFL) — loaded per page in <head>. */

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  font-family:var(--cx-font);
  color:var(--cx-ink);
  background:var(--cx-white);
  font-size:.95rem;             /* ≈15.2px — tighter, more refined body */
  line-height:1.55;
  letter-spacing:normal;        /* dropped the inherited .5px tracking — cleaner */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ---------- layout helpers ---------- */
.container-cx{ width:100%; max-width:var(--cx-maxw); margin-inline:auto; padding-inline:1.5rem; }
/* wide shell for the header bar — Webflow's full-width 5% gutters capping content at 95rem */
.cx-shell{ width:100%; padding-inline:max(5%, calc((100% - 95rem) / 2)); }

/* ---------- typography ---------- */
h1,h2,h3,h4,h5{ font-weight:500; letter-spacing:normal; color:var(--cx-ink); }
h1{ font-size:clamp(2.05rem,4.4vw,2.85rem); font-weight:400; line-height:1.2; }
h2{ font-size:clamp(1.5rem,2.7vw,1.85rem); line-height:1.22; }
h3{ font-size:1.28rem; line-height:1.32; }
p{ margin-bottom:1.15rem; }
a{ color:var(--cx-ink); text-underline-offset:3px; }
.cx-muted{ color:var(--cx-muted); }
.cx-meta{ color:var(--cx-muted); font-size:.92rem; }

/* ---------- buttons ---------- */
.cx-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  border:0; border-radius:var(--cx-pill);
  font-size:.92rem; font-weight:450; line-height:1.2;
  padding:.62rem 1.55rem; text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .15s ease, background-color .15s ease, opacity .15s ease;
}
.cx-btn:active{ transform:translateY(1px); }
.cx-btn-ink{ background:var(--cx-ink); color:#fff; }
.cx-btn-ink:hover{ background:#000; color:#fff; }
.cx-btn-soft{ background:var(--cx-soft); color:var(--cx-ink); }
.cx-btn-soft:hover{ background:var(--cx-soft-hover); color:var(--cx-ink); }
.cx-btn-lg{ padding:.85rem 2rem; font-size:1rem; }
.cx-btn-block{ width:100%; }

/* ============================================================
   HEADER / NAVBAR
   ============================================================ */
.cx-nav{
  position:sticky; top:0; z-index:1050;
  background:#fff;
  min-height:var(--cx-nav-h);
  padding-block:.5rem;
  border-bottom:1px solid var(--cx-line);
  transition:background-color .3s ease, border-color .3s ease, box-shadow .3s ease, padding .25s ease;
}
/* "scrolled" shrink — slightly smaller bar + menu type once you scroll (matches Circula) */
.cx-nav.is-scrolled{ padding-block:.3rem; }
.cx-nav.is-scrolled .cx-brand{ font-size:1.2rem; }
.cx-nav.is-scrolled .cx-menu .nav-link,
.cx-nav.is-scrolled .cx-lang,
.cx-nav.is-scrolled .cx-login{ font-size:.86rem; }
.cx-brand{ display:flex; align-items:center; gap:.5rem; font-weight:600; font-size:1.3rem; letter-spacing:-.02em; color:var(--cx-ink)!important; text-decoration:none; transition:color .3s ease, font-size .25s ease; }
.cx-dot{ width:13px; height:13px; border-radius:50%; background:var(--cx-ink); display:inline-block; transition:background-color .3s ease; }
.cx-brand-sub{ font-weight:400; color:var(--cx-muted); transition:color .3s ease; }

/* top-level nav links — left-aligned: sits right after the logo (margin pushes
   the actions to the far right via the .me-auto utility on the <ul>) */
.cx-menu{ gap:.1rem; align-items:center; margin-left:2.5rem; }
.cx-menu .nav-link{
  color:var(--cx-ink); font-size:.9rem; padding:.5rem .9rem; border-radius:var(--cx-pill);
  display:inline-flex; align-items:center; gap:.35rem; transition:background .15s, color .3s, font-size .25s; cursor:pointer;
  background:none; border:0; font-family:inherit;
}
.cx-menu .nav-item:hover > .nav-link,
.cx-menu .nav-link:hover,
.cx-menu .nav-link:focus-visible{ background:rgba(0,0,0,.05); color:var(--cx-ink); }
.cx-caret{ font-size:.66rem; transition:transform .2s ease; }
.cx-menu .nav-item:hover .cx-caret{ transform:rotate(180deg); }

.cx-nav-actions{ display:flex; align-items:center; gap:1.15rem; }
.cx-lang,.cx-login{ color:var(--cx-ink); text-decoration:none; font-size:.9rem; display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap; transition:color .3s, opacity .15s, font-size .25s; }
.cx-lang:hover,.cx-login:hover{ opacity:.65; color:var(--cx-ink); }
.navbar-toggler{ border:0; padding:.25rem .4rem; font-size:1.6rem; line-height:1; color:var(--cx-ink); transition:color .3s; }
.navbar-toggler:focus{ box-shadow:none; }

/* ---------- OVERLAY variant — transparent over a dark hero, solidifies on scroll (common.js) ---------- */
.cx-nav--overlay{ position:fixed; left:0; right:0; top:0; background:transparent; border-bottom-color:transparent; }
.cx-nav--overlay .cx-brand,
.cx-nav--overlay .cx-menu .nav-link,
.cx-nav--overlay .cx-lang,
.cx-nav--overlay .cx-login,
.cx-nav--overlay .navbar-toggler{ color:#fff; }
.cx-nav--overlay .cx-brand{ color:#fff!important; }
.cx-nav--overlay .cx-dot{ background:#fff; }
.cx-nav--overlay .cx-brand-sub{ color:rgba(255,255,255,.72); }
.cx-nav--overlay .cx-menu .nav-item:hover > .nav-link,
.cx-nav--overlay .cx-menu .nav-link:hover{ background:rgba(255,255,255,.14); color:#fff; }
.cx-nav--overlay .cx-btn-ink{ background:rgba(255,255,255,.16); color:#fff; }
.cx-nav--overlay .cx-btn-ink:hover{ background:rgba(255,255,255,.28); color:#fff; }
/* solid state once scrolled past the hero */
.cx-nav--overlay.is-scrolled{ background:#fff; border-bottom-color:var(--cx-line); box-shadow:0 6px 24px rgba(0,0,0,.06); }
.cx-nav--overlay.is-scrolled .cx-brand,
.cx-nav--overlay.is-scrolled .cx-menu .nav-link,
.cx-nav--overlay.is-scrolled .cx-lang,
.cx-nav--overlay.is-scrolled .cx-login,
.cx-nav--overlay.is-scrolled .navbar-toggler{ color:var(--cx-ink); }
.cx-nav--overlay.is-scrolled .cx-brand{ color:var(--cx-ink)!important; }
.cx-nav--overlay.is-scrolled .cx-dot{ background:var(--cx-ink); }
.cx-nav--overlay.is-scrolled .cx-brand-sub{ color:var(--cx-muted); }
.cx-nav--overlay.is-scrolled .cx-btn-ink{ background:var(--cx-ink); color:#fff; }

/* The mega panel is always light → keep its content dark even when the nav is in
   the transparent overlay (dark-hero) state, where .nav-link / .cx-btn-ink turn white. */
.cx-nav--overlay .cx-mega .cx-mega-cat .nav-link{ color:var(--cx-ink); }
.cx-nav--overlay .cx-mega .cx-mega-cat .nav-link:hover{ background:rgba(255,255,255,.55); color:var(--cx-ink); }
.cx-nav--overlay .cx-mega .cx-btn-ink{ background:var(--cx-ink); color:#fff; }
.cx-nav--overlay .cx-mega .cx-btn-ink:hover{ background:#000; color:#fff; }

/* ---------- dropdown panels: hover / focus (desktop only) ---------- */
@media (min-width:1200px){
  .cx-menu .dropdown-menu{ display:block; margin:0; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .18s ease, visibility .18s ease; }
  .cx-menu .nav-item:hover > .dropdown-menu{ opacity:1; visibility:visible; pointer-events:auto; }
  /* invisible hover-bridge: spans the full gap between the menu button and the panel
     (button bottom → panel top ≈ 17px) so moving onto the mega is one unbroken hover */
  .cx-menu .dropdown-menu::before{ content:""; position:absolute; inset:-22px 0 auto 0; height:22px; }
  body:has(.cx-has-mega:hover) .cx-mega-backdrop{ opacity:1; visibility:visible; }
}

/* ---------- mega menu (full-width) ---------- */
.cx-has-mega{ position:static; }
.cx-menu .cx-mega{
  position:absolute; top:100%; left:0; right:0;
  border:0; padding:0; background:var(--cx-surface);
  border-top:1px solid var(--cx-line); box-shadow:0 32px 60px rgba(0,0,0,.13);
}
/* full-width mega: the panel spans edge-to-edge, content stays in the container */
.cx-mega-wrap{ max-width:var(--cx-maxw); margin-inline:auto; padding:2rem 1.5rem 2.25rem; }
.cx-mega-col h6{ font-size:.74rem; text-transform:uppercase; letter-spacing:.12em; color:var(--cx-muted); font-weight:600; margin-bottom:1rem; }
.cx-mega-col a{ display:block; color:var(--cx-ink); text-decoration:none; padding:.42rem 0; font-size:.98rem; transition:color .15s; }
.cx-mega-col a:hover{ color:var(--cx-accent); }
.cx-mega-cat .nav-link{ width:100%; text-align:left; border-radius:var(--cx-r-md); padding:.8rem 1rem; color:var(--cx-ink); display:flex; gap:.8rem; align-items:flex-start; background:transparent; transition:background .15s, box-shadow .15s; }
.cx-mega-cat .nav-link:hover{ background:rgba(255,255,255,.55); }
.cx-mega-cat .nav-link.active{ background:#fff; box-shadow:0 6px 20px rgba(0,0,0,.06); }
.cx-mega-cat .nav-link i{ font-size:1.2rem; margin-top:.15rem; flex:none; }
.cx-mega-cat .t{ display:block; font-weight:500; font-size:1rem; line-height:1.2; }
.cx-mega-cat .d{ display:block; font-size:.83rem; color:var(--cx-muted); margin-top:.2rem; line-height:1.35; }
.cx-mega-links{ display:flex; flex-direction:column; gap:.65rem; }
.cx-mega-link{ display:flex; align-items:center; gap:.8rem; background:#fff; border-radius:var(--cx-r-md); padding:.8rem 1rem; text-decoration:none; color:var(--cx-ink); transition:transform .15s ease, box-shadow .15s ease; }
.cx-mega-link__ic{ font-size:1.3rem; color:var(--cx-ink); flex:none; line-height:1; }
.cx-mega-link__txt{ flex:1 1 auto; min-width:0; }
.cx-mega-link .t{ display:block; font-weight:500; font-size:1rem; line-height:1.3; }
.cx-mega-link .d{ display:block; font-size:.84rem; line-height:1.3; color:var(--cx-muted); margin-top:.05rem; }
.cx-mega-link:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.08); color:var(--cx-ink); }
.cx-mega-link .arr{ width:34px; height:34px; border-radius:50%; background:var(--cx-soft); display:inline-flex; align-items:center; justify-content:center; font-size:.8rem; flex:none; }
.cx-mega-feat{ background:#fff; border-radius:var(--cx-r-lg); overflow:hidden; height:100%; display:flex; flex-direction:column; }
.cx-mega-feat img{ width:100%; height:150px; object-fit:cover; }
.cx-mega-feat .body{ padding:1.2rem 1.35rem 1.45rem; display:flex; flex-direction:column; height:100%; }
.cx-mega-feat h5{ font-size:1.1rem; line-height:1.28; margin-bottom:.55rem; }
.cx-mega-feat p{ font-size:.88rem; color:var(--cx-muted); margin-bottom:1.1rem; }
.cx-mega-feat .cx-btn{ margin-top:auto; align-self:flex-start; }
/* feature-card actions: the section button + the "Topics" button, side by side. */
.cx-mega-feat__cta{ margin-top:auto; display:flex; flex-wrap:wrap; gap:.5rem; }
.cx-mega-feat__cta .cx-btn{ margin-top:0; align-self:auto; }
/* mega tuning: left category pills spaced like the middle links (.65rem),
   crisper link tracking (match the rest of the nav), and the featured card
   sized to the height of 5 middle link rows (5×4.25rem + 4×.65rem gaps). */
.cx-mega-cat{ gap:.65rem; }
.cx-mega-cat .d{ letter-spacing:normal; }
.cx-mega-link{ letter-spacing:normal; }
.cx-mega-feat{ height:calc(5 * 4.14rem + 4 * .65rem); }
/* left categories + middle links share the column height and centre their items,
   so both columns line up no matter how many entries each tab has */
.cx-mega-cat{ height:100%; justify-content:center; }
.cx-mega .tab-content,
.cx-mega .tab-pane{ height:100%; }
.cx-mega-links{ height:100%; justify-content:center; }

/* simple dropdowns */
.cx-menu .nav-item.dropdown:not(.cx-has-mega){ position:relative; }
.cx-menu .cx-drop{ position:absolute; top:100%; left:0; border:0; border-radius:var(--cx-r-lg); padding:.6rem; min-width:260px; background:#fff; box-shadow:0 20px 44px rgba(0,0,0,.12); }
.cx-drop .dropdown-item{ border-radius:var(--cx-r-md); padding:.7rem .9rem; font-size:.97rem; color:var(--cx-ink); display:flex; align-items:center; gap:.6rem; }
.cx-drop .dropdown-item:hover{ background:var(--cx-soft); }
.cx-drop .dropdown-item i{ color:var(--cx-muted); }
.cx-mega-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.25); opacity:0; visibility:hidden; transition:opacity .25s ease; z-index:1040; }

/* ---------- mobile offcanvas ---------- */
.cx-offcanvas{ width:min(88vw,380px); }
.cx-offcanvas .offcanvas-header{ padding:1.1rem 1.25rem; }
.cx-offcanvas .accordion-button{ font-weight:500; font-size:1.05rem; padding:1rem .25rem; box-shadow:none; color:var(--cx-ink); background:transparent; }
.cx-offcanvas .accordion-button:not(.collapsed){ color:var(--cx-ink); background:transparent; }
.cx-offcanvas .accordion-button:focus{ box-shadow:none; }
.cx-offcanvas .accordion-item{ border:0; border-bottom:1px solid var(--cx-line); background:transparent; }
.cx-offcanvas .accordion-body{ padding:.25rem 0 1rem; }
.cx-offcanvas .cx-m-link,.cx-offcanvas .cx-m-plain{ display:block; padding:.55rem .25rem; color:var(--cx-ink-2); text-decoration:none; font-size:.98rem; }
.cx-offcanvas .cx-m-link:hover,.cx-offcanvas .cx-m-plain:hover{ color:var(--cx-ink); }
.cx-offcanvas .cx-m-plain{ font-weight:500; color:var(--cx-ink); border-bottom:1px solid var(--cx-line); }
/* mobile 3-level: L1 = accordion item, L2 = grey category label, L3 = links beneath */
.cx-offcanvas .cx-m-cat{ font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--cx-muted); font-weight:600; margin:1.15rem 0 .15rem .25rem; }
.cx-offcanvas .accordion-body > .cx-m-cat:first-child{ margin-top:.35rem; }
.cx-offcanvas .accordion-body .cx-m-link{ padding-left:.9rem; }

/* ============================================================
   POST CARD — reusable across blog grids
   ============================================================ */
.cx-card{ display:flex; flex-direction:column; text-decoration:none; color:var(--cx-ink); height:100%; }
.cx-card-media{ position:relative; border-radius:var(--cx-r-lg); overflow:hidden; aspect-ratio:16/11; margin-bottom:1.1rem; background:var(--cx-surface); }
.cx-card-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.cx-card:hover .cx-card-media img{ transform:scale(1.04); }
.cx-card-tags{ position:absolute; left:.85rem; bottom:.85rem; display:flex; flex-wrap:wrap; gap:.4rem; }
.cx-tag{ background:rgba(20,20,20,.55); color:#fff; font-size:.78rem; padding:.3rem .8rem; border-radius:var(--cx-pill); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.cx-tag--accent{ background:rgba(91,91,214,.92); }   /* indigo badge — e.g. Academy vs Article */
.cx-card h3{ font-size:1.3rem; line-height:1.28; margin-bottom:.9rem; transition:opacity .15s; }
.cx-card:hover h3{ opacity:.6; }
.cx-card .date{ color:var(--cx-muted); font-size:.85rem; margin-top:auto; }
.cx-card .date i{ font-size:.9rem; margin-right:.3rem; }

/* ============================================================
   TAG SYSTEM — clickable topic tags shared across content types
   (blog articles, academy articles & programs). Distinct from the
   on-image .cx-tag category badge above. Markup:
     <div class="cx-tags"><span class="cx-tags__label">Tags</span>
       <a class="cx-tag-link" href="tag.php">AI</a> … </div>
   ============================================================ */
.cx-tags{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
.cx-tags__label{ font-size:.82rem; font-weight:500; color:var(--cx-muted); margin-right:.2rem; }
.cx-tag-link{ display:inline-flex; align-items:center; gap:.3rem; font-size:.82rem; line-height:1; color:var(--cx-ink-2); background:var(--cx-soft); border:1px solid var(--cx-line); border-radius:var(--cx-pill); padding:.42rem .82rem; text-decoration:none; white-space:nowrap; transition:background .15s, color .15s, border-color .15s; }
.cx-tag-link::before{ content:"#"; color:var(--cx-muted); font-weight:600; }
.cx-tag-link:hover{ background:var(--cx-accent); border-color:var(--cx-accent); color:#fff; }
.cx-tag-link:hover::before{ color:rgba(255,255,255,.72); }
.cx-tags--cloud{ gap:.55rem; }
/* keep tag chips clean if ever nested inside .cx-prose */
.cx-prose .cx-tag-link{ color:var(--cx-ink-2); text-decoration:none; }
.cx-prose .cx-tag-link:hover{ color:#fff; }

/* ============================================================
   REFERENCES / bibliography — reusable content element for articles
   & academy lessons. Markup:
   <ol class="cx-refs">
     <li><span class="cx-refs__src">Source</span> — <em class="cx-refs__title">Title</em>
       <a class="cx-refs__url" href="…">https://…</a></li>
   </ol>
   (selectors are `ol.cx-refs …` so they also win inside .cx-prose)
   ============================================================ */
ol.cx-refs{ list-style:none; counter-reset:cxref; margin:1.5rem 0; padding:0; }
ol.cx-refs li{ counter-increment:cxref; position:relative; margin:0; padding:.9rem 0 .9rem 2.6rem; border-top:1px solid var(--cx-line); color:var(--cx-ink); font-size:.95rem; line-height:1.5; }
ol.cx-refs li:last-child{ border-bottom:1px solid var(--cx-line); }
ol.cx-refs li::before{ content:counter(cxref) "."; position:absolute; left:0; top:.9rem; width:2rem; color:var(--cx-muted); font-weight:500; font-variant-numeric:tabular-nums; }
.cx-refs__src{ font-weight:500; color:var(--cx-ink); }
.cx-refs__title{ font-style:italic; }
ol.cx-refs .cx-refs__url{ display:block; margin-top:.2rem; color:var(--cx-accent); text-decoration:none; font-size:.85rem; overflow-wrap:anywhere; word-break:break-word; }
ol.cx-refs .cx-refs__url:hover{ text-decoration:underline; }

/* ============================================================
   ARTICLE / LESSON CONTENT ELEMENTS (reusable in .cx-prose & academy)
   ============================================================ */

/* reading-progress bar (JS-driven, common.js) */
.cx-readbar{ position:fixed; top:0; left:0; height:3px; width:0; background:var(--cx-accent); z-index:1100; transition:width .08s linear; }

/* callout / admonition box */
.cx-callout{ display:flex; gap:.85rem; padding:1.05rem 1.2rem; border-radius:var(--cx-r-md); background:var(--cx-soft); border-left:3px solid var(--cx-accent); margin:1.7rem 0; }
.cx-callout > i{ font-size:1.15rem; color:var(--cx-accent); flex:none; margin-top:.15rem; }
.cx-callout__body{ flex:1 1 auto; min-width:0; }
.cx-callout__body > :last-child{ margin-bottom:0; }
.cx-callout__title{ display:block; font-weight:600; color:var(--cx-ink); margin-bottom:.15rem; }
.cx-callout--tip{ background:#e9f6f0; border-left-color:#15936b; } .cx-callout--tip > i{ color:#15936b; }
.cx-callout--warning{ background:#fbf3e2; border-left-color:#c98a05; } .cx-callout--warning > i{ color:#c98a05; }
.cx-callout--key{ background:var(--cx-soft); border-left-color:var(--cx-ink); } .cx-callout--key > i{ color:var(--cx-ink); }

/* code block (with copy button — common.js) */
.cx-code{ background:#1b1b22; border-radius:var(--cx-r-md); overflow:hidden; margin:1.7rem 0; }
.cx-code__bar{ display:flex; align-items:center; justify-content:space-between; padding:.45rem .55rem .45rem 1rem; background:rgba(255,255,255,.04); border-bottom:1px solid rgba(255,255,255,.08); }
.cx-code__lang{ font-size:.76rem; color:#9aa1ad; letter-spacing:.02em; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
.cx-code__copy{ background:none; border:0; color:#c7ccd4; font-size:.78rem; display:inline-flex; align-items:center; gap:.4rem; cursor:pointer; padding:.25rem .55rem; border-radius:6px; transition:background .15s, color .15s; }
.cx-code__copy:hover{ color:#fff; background:rgba(255,255,255,.1); }
.cx-code pre{ margin:0; padding:1rem 1.1rem; overflow-x:auto; }
.cx-code code{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.85rem; line-height:1.65; color:#e6e8ec; }

/* figure with caption */
.cx-figure{ margin:1.9rem 0; }
.cx-figure img{ width:100%; border-radius:var(--cx-r-md); display:block; }
.cx-figure figcaption{ margin-top:.65rem; font-size:.85rem; color:var(--cx-muted); text-align:center; line-height:1.5; }

/* table */
.cx-table-wrap{ overflow-x:auto; margin:1.7rem 0; border:1px solid var(--cx-line); border-radius:var(--cx-r-md); }
.cx-table{ width:100%; border-collapse:collapse; font-size:.92rem; }
.cx-table th, .cx-table td{ padding:.7rem 1rem; text-align:left; border-bottom:1px solid var(--cx-line); vertical-align:top; }
.cx-table thead th{ background:var(--cx-soft); font-weight:600; color:var(--cx-ink); white-space:nowrap; }
.cx-table tbody tr:last-child td{ border-bottom:0; }

/* pros & cons */
.cx-proscons{ display:flex; flex-wrap:wrap; gap:1rem; margin:1.7rem 0; }
.cx-proscons__col{ flex:1 1 240px; border:1px solid var(--cx-line); border-radius:var(--cx-r-md); padding:1.1rem 1.25rem; }
.cx-proscons__col h4{ display:flex; align-items:center; gap:.5rem; font-size:1rem; margin:0 0 .75rem; }
.cx-proscons__item{ display:flex; gap:.55rem; align-items:flex-start; font-size:.93rem; color:var(--cx-ink-2); margin-bottom:.55rem; }
.cx-proscons__item:last-child{ margin-bottom:0; }
.cx-proscons__item i{ margin-top:.15rem; flex:none; }
.cx-proscons__col--pro h4, .cx-proscons__col--pro .cx-proscons__item i{ color:#15936b; }
.cx-proscons__col--con h4, .cx-proscons__col--con .cx-proscons__item i{ color:#c0392b; }

/* quiz / knowledge-check (reveal on click — common.js) */
.cx-quiz{ border:1px solid var(--cx-line); border-radius:var(--cx-r-lg); padding:1.4rem 1.5rem; margin:1.9rem 0; background:#fff; }
.cx-quiz__tag{ font-size:.74rem; text-transform:uppercase; letter-spacing:.08em; color:var(--cx-accent); font-weight:600; }
.cx-quiz__q{ font-weight:500; font-size:1.08rem; margin:.35rem 0 1rem; }
.cx-quiz__options{ display:flex; flex-direction:column; gap:.55rem; }
.cx-quiz__opt{ text-align:left; background:var(--cx-soft); border:1px solid transparent; border-radius:var(--cx-r-md); padding:.7rem 1rem; font:inherit; font-size:.95rem; color:var(--cx-ink); cursor:pointer; display:flex; align-items:center; gap:.65rem; transition:background .15s, border-color .15s; }
.cx-quiz__opt::before{ content:""; width:17px; height:17px; border-radius:50%; border:2px solid var(--cx-muted); flex:none; transition:border-color .15s, background .15s; }
.cx-quiz__opt:hover{ background:var(--cx-soft-hover); }
.cx-quiz.answered .cx-quiz__opt{ cursor:default; }
.cx-quiz__opt.is-correct{ background:#e9f6f0; border-color:#15936b; } .cx-quiz__opt.is-correct::before{ border-color:#15936b; background:#15936b; box-shadow:inset 0 0 0 2px #fff; }
.cx-quiz__opt.is-wrong{ background:#fbeae8; border-color:#c0392b; } .cx-quiz__opt.is-wrong::before{ border-color:#c0392b; }
.cx-quiz__feedback{ margin-top:1rem; padding-top:.9rem; border-top:1px solid var(--cx-line); font-size:.93rem; color:var(--cx-ink-2); }

/* downloadable resource card */
.cx-download{ display:flex; align-items:center; gap:1rem; padding:1rem 1.2rem; border:1px solid var(--cx-line); border-radius:var(--cx-r-md); text-decoration:none; color:var(--cx-ink); margin:1.7rem 0; transition:border-color .15s, transform .15s; }
.cx-download:hover{ border-color:var(--cx-accent); transform:translateY(-1px); }
.cx-download__ic{ width:42px; height:42px; border-radius:11px; background:var(--cx-soft); display:flex; align-items:center; justify-content:center; font-size:1.2rem; color:var(--cx-accent); flex:none; }
.cx-download__txt{ flex:1 1 auto; min-width:0; }
.cx-download__txt .t{ display:block; font-weight:500; }
.cx-download__txt .d{ display:block; font-size:.83rem; color:var(--cx-muted); }
.cx-download__arr{ color:var(--cx-muted); flex:none; font-size:1.1rem; }

/* prev / next lesson navigation */
.cx-lessonnav{ display:flex; gap:1rem; margin:2.5rem 0 0; }
.cx-lessonnav a{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:.25rem; padding:1rem 1.2rem; border:1px solid var(--cx-line); border-radius:var(--cx-r-md); text-decoration:none; color:var(--cx-ink); transition:border-color .15s; }
.cx-lessonnav a:hover{ border-color:var(--cx-accent); }
.cx-lessonnav a.is-next{ text-align:right; align-items:flex-end; }
.cx-lessonnav .dir{ font-size:.8rem; color:var(--cx-muted); display:inline-flex; align-items:center; gap:.35rem; }
.cx-lessonnav .t{ font-weight:500; line-height:1.3; }
@media (max-width:575.98px){ .cx-lessonnav{ flex-direction:column; } }

/* mobile inline TOC (native <details>) */
.cx-toc-m{ border:1px solid var(--cx-line); border-radius:var(--cx-r-md); padding:.2rem 1rem; margin-bottom:1.6rem; }
.cx-toc-m summary{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.75rem 0; font-weight:500; cursor:pointer; list-style:none; }
.cx-toc-m summary::-webkit-details-marker{ display:none; }
.cx-toc-m summary i{ transition:transform .2s ease; color:var(--cx-muted); }
.cx-toc-m[open] summary i{ transform:rotate(180deg); }
.cx-toc-m nav{ padding:.1rem 0 .7rem; }
.cx-toc-m .nav-link{ display:block; padding:.4rem 0; font-size:.92rem; color:var(--cx-ink-2); text-decoration:none; }
.cx-toc-m .nav-link:hover{ color:var(--cx-ink); }

/* keep link-based elements styled even inside .cx-prose (which underlines <a>) */
.cx-prose .cx-download, .cx-prose .cx-lessonnav a{ color:var(--cx-ink); text-decoration:none; }

/* ============================================================
   FOOTER
   ============================================================ */
.cx-footer{ background:var(--cx-black); color:#fff; padding-top:4rem; }
.cx-footer .cx-brand{ color:#fff!important; }
.cx-footer .cx-dot{ background:#fff; }
.cx-footer .cx-brand-sub{ color:#8c8c8c; }
.cx-foot-tag{ color:var(--cx-footer-text); font-size:.95rem; max-width:30ch; margin-top:1rem; }
.cx-foot-col h6{ color:#fff; font-size:.95rem; font-weight:500; margin-bottom:1.1rem; }
.cx-foot-col ul{ list-style:none; padding:0; margin:0; }
.cx-foot-col li{ margin-bottom:.7rem; }
.cx-foot-col a{ color:var(--cx-footer-text); text-decoration:none; font-size:.92rem; transition:color .15s; }
.cx-foot-col a:hover{ color:#fff; }
.cx-foot-social{ display:flex; gap:.7rem; margin-top:1.4rem; }
.cx-foot-social a{ width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.08); color:#fff; display:inline-flex; align-items:center; justify-content:center; text-decoration:none; transition:background .15s; }
.cx-foot-social a:hover{ background:rgba(255,255,255,.2); }
.cx-foot-disclaimer{ color:#7a7a7a; font-size:.8rem; text-align:center; max-width:760px; margin:3rem auto 0; line-height:1.6; }
.cx-foot-bottom{ border-top:1px solid rgba(255,255,255,.1); margin-top:2.5rem; padding-block:1.6rem; }
.cx-foot-bottom a,.cx-foot-bottom span{ color:var(--cx-footer-text); text-decoration:none; font-size:.88rem; }
.cx-foot-bottom a:hover{ color:#fff; }

/* ============================================================
   SHARED RESPONSIVE (header)
   ============================================================ */
@media (max-width:1199.98px){
  .cx-nav-actions{ gap:.8rem; }
}