/* cai-identity v1.4 */
/*
 * CaptchaAI native design identity ("CAI").
 * Canonical source of the new design line first shipped on /home-v3 and /recaptcha-v2-final.
 * Every rule is scoped under the .cai root class, so this file is inert on legacy pages.
 * A CMS section opts in by self-rooting as: <section class="cai sec [soft] [pad-*]">…</section>
 * Authoring rules live in docs/CAI-DESIGN-GUIDE.md — its version header must match line 1 of this file.
 */

/* Cairo heavy title weights (800/900). The global chrome only loads Cairo 400-700 from Google Fonts,
   so the variable face (700-1000, Latin) is self-declared from the same gstatic host. */
@font-face{ font-family:'CairoTitle'; font-style:normal; font-weight:700 1000; font-display:swap;
  src:url(https://fonts.gstatic.com/s/cairo/v31/SLXVc1nY6HkvangtZmpQdkhzfH5lkSscRiyS.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* ── Root: design tokens + base typography. Applied per-section (each band is its own .cai root). ── */
.cai{ --red:#ff001e; --red-soft:#fff1f2; --ink:#0b1b2a; --muted:#5b6470; --line:#e7e9ee;
  --soft:#f8f9fb; --dark:#0b0c10; --dark2:#101218;
  font-family:'Cairo',system-ui,-apple-system,'Segoe UI',sans-serif; color:var(--ink); line-height:1.65; background:#fff; }

/* UNIFIED SHAPE: sharp edges everywhere. Square = the identity. */
.cai *, .cai *::before, .cai *::after{ border-radius:0 !important; }

/* !important is required: the legacy chrome sets `.content-section * { font-family:Cairo !important }`
   (public/css/sections-font-fix.css), which would force headings back onto Cairo max-weight 700. */
.cai h1,.cai h2,.cai h3,.cai h4{ font-family:'CairoTitle','Cairo',system-ui,-apple-system,'Segoe UI',sans-serif !important; font-weight:800 !important; letter-spacing:-.01em; color:var(--ink); }
.cai h1,.cai h2{ font-weight:900 !important; }

/* ── Section band rhythm. Default padding + explicit modifiers (roots must not carry inline padding). ── */
.cai.sec{ padding:4.75rem 0; }
.cai.sec.pad-xs{ padding:3rem 0; }
.cai.sec.pad-sm{ padding:3.25rem 0; }
.cai.sec.pad-md{ padding:4.25rem 0; }
.cai.sec.pad-lg{ padding:5.5rem 0; }
.cai.sec.pad-xl{ padding:7rem 0; }
.cai.soft{ background:var(--soft); }

/* eyebrow kicker — branded lead-in with a short red tick */
.cai .eyebrow{ display:inline-flex; align-items:center; gap:.55rem; text-transform:uppercase; letter-spacing:.14em; font-size:.78rem; font-weight:700; color:var(--red); }
.cai .eyebrow::before{ content:""; width:1.6rem; height:2px; background:var(--red); display:inline-block; }
.cai .text-red{ color:var(--red)!important; }
.cai .muted{ color:var(--muted); }
.cai .lead{ font-size:1.16rem; }
.cai .note{ font-size:.92rem; color:var(--muted); }

/* buttons — red primary + black-fill outline secondary.
   The --bs-btn-* variables are required: Bootstrap's base .btn :hover/:focus/:active rules win on
   specificity and would otherwise flip the button to a transparent bg with white text on click. */
.cai .btn-cai{
  --bs-btn-color:#fff; --bs-btn-bg:var(--red); --bs-btn-border-color:var(--red);
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#e60019; --bs-btn-hover-border-color:#e60019;
  --bs-btn-active-color:#fff; --bs-btn-active-bg:#d60018; --bs-btn-active-border-color:#d60018;
  --bs-btn-focus-shadow-rgb:255,0,30; --bs-btn-disabled-color:#fff; --bs-btn-disabled-bg:var(--red); --bs-btn-disabled-border-color:var(--red);
  background:var(--red); border:1px solid var(--red); color:#fff; font-weight:700; padding:.85rem 1.7rem; }
.cai .btn-cai:hover, .cai .btn-cai:focus, .cai .btn-cai:active{ background:var(--bs-btn-hover-bg, #e60019); border-color:var(--bs-btn-hover-bg, #e60019); color:#fff; }
.cai .btn-out{
  --bs-btn-color:var(--ink); --bs-btn-bg:#fff; --bs-btn-border-color:var(--ink);
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg:var(--ink); --bs-btn-hover-border-color:var(--ink);
  --bs-btn-active-color:#fff; --bs-btn-active-bg:var(--ink); --bs-btn-active-border-color:var(--ink);
  --bs-btn-focus-shadow-rgb:11,27,42;
  border:1px solid var(--ink); color:var(--ink); font-weight:700; padding:.8rem 1.5rem; background:#fff; }
.cai .btn-out:hover, .cai .btn-out:focus, .cai .btn-out:active{ background:var(--ink); border-color:var(--ink); color:#fff; }
.cai .btn-lg-cai{ padding:1rem 2.1rem; font-size:1.05rem; }

/* hero washes — default light red-soft; .wash-deep adds the radial glow (home hero) */
.cai.hero-wash{ background:linear-gradient(180deg, var(--red-soft) 0%, #fff 78%); }
.cai.hero-wash.wash-deep{ background:radial-gradient(1100px 480px at 50% -6%, rgba(255,0,30,.13), transparent 60%), linear-gradient(180deg, var(--red-soft) 0%, #fff 92%); }
.cai.cta-full{ background:linear-gradient(180deg, var(--red-soft) 0%, #fff 100%); border-top:1px solid var(--line); }

/* chips */
.cai .chip{ display:inline-flex; align-items:center; gap:.45rem; border:1px solid var(--line); background:#fff;
  padding:.45rem .9rem; font-size:.9rem; font-weight:600; color:var(--ink); }
.cai .chip i{ color:var(--red); font-size:1.05rem; }
.cai .chip i.la-infinity{ font-size:.8rem; }

/* breadcrumb */
.cai .crumb{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; font-size:.82rem; font-weight:600; margin-bottom:1.2rem; }
.cai .crumb a{ color:var(--muted); text-decoration:none; }
.cai .crumb a:hover{ color:var(--red); }
.cai .crumb .sep{ color:#b8bdc7; }
.cai .crumb .cur{ color:var(--ink); }

/* reusable CAPTCHA-logo strip — uniform boxes so square icons + illustrations look consistent */
.cai .hlogos-lead{ text-align:center; font-weight:700; color:var(--ink); font-size:1.08rem; }
.cai .hlogos{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.7rem; }
.cai .hlogos a{ display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; border:1px solid var(--line); background:#fff; transition:.14s; }
.cai .hlogos a:hover{ border-color:var(--red); box-shadow:0 0 0 1px var(--red); transform:translateY(-2px); }
.cai .hlogos img{ max-width:34px; max-height:34px; width:auto; height:auto; object-fit:contain; }

/* framed screenshot */
.cai .shot{ display:inline-block; border:1px solid var(--line); background:#fff; padding:.6rem; box-shadow:0 24px 60px rgba(11,27,42,.10); max-width:100%; }
.cai .shot img{ display:block; width:100%; height:auto; }
.cai .shot-ext{ border:1px solid var(--line); background:#fff; padding:.6rem; box-shadow:0 24px 60px rgba(11,27,42,.12); }
.cai .shot-ext img{ display:block; width:100%; height:auto; }

/* stat band (5-up grid) */
.cai .statband{ display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line); border:1px solid var(--line); box-shadow:0 16px 40px rgba(11,27,42,.06); }
.cai .statband .s{ background:#fff; padding:1.55rem 1rem; text-align:center; }
.cai .statband .sv{ font-family:'CairoTitle','Cairo',sans-serif !important; font-weight:900; font-size:1.55rem; color:var(--ink); line-height:1.05; }
.cai .statband .sv .inf{ font-size:2.4rem; line-height:.6; display:inline-block; vertical-align:-.14em; }
.cai .statband .sl{ font-size:.78rem; color:var(--muted); font-weight:600; margin-top:.3rem; }

/* stat cards (red top-edge) */
.cai .statcard{ background:#fff; border:1px solid var(--line); padding:1.5rem 1.1rem 1.35rem; height:100%;
  text-align:center; position:relative; overflow:hidden; transition:.15s; }
.cai .statcard::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg, var(--red), #ff5a6e); }
.cai .statcard:hover{ transform:translateY(-3px); box-shadow:0 16px 38px rgba(11,27,42,.09); border-color:#f2c9cd; }
.cai .statcard .badge2{ width:3rem; height:3rem; background:var(--red-soft); color:var(--red);
  display:inline-flex; align-items:center; justify-content:center; font-size:1.35rem; margin-bottom:.7rem; }
.cai .statcard .num{ font-size:2rem; font-weight:800; color:var(--ink); line-height:1.05; letter-spacing:-.02em; }
.cai .statcard .num small{ font-size:1rem; font-weight:700; color:var(--muted); letter-spacing:0; }
.cai .statcard .cap{ font-size:.9rem; color:var(--muted); font-weight:600; margin-top:.3rem; }

/* value-prop cards (red top-edge) */
.cai .vp{ border:1px solid var(--line); border-top:3px solid var(--red); background:#fff; padding:1.9rem 1.7rem; height:100%; transition:.14s; }
.cai .vp:hover{ box-shadow:0 16px 38px rgba(11,27,42,.08); transform:translateY(-3px); }
.cai .vp .ico{ font-size:2rem; color:var(--red); }
.cai .vp h3{ font-size:1.2rem; margin:.7rem 0 .5rem; }

/* use-case cards */
.cai .uc{ border:1px solid var(--line); background:#fff; padding:1.5rem; height:100%; transition:.14s; }
.cai .uc:hover{ border-color:var(--red); box-shadow:0 14px 32px rgba(11,27,42,.07); transform:translateY(-3px); }
.cai .uc .ico{ font-size:1.7rem; color:var(--red); }
.cai .uc h3{ font-size:1.05rem; margin:.55rem 0 .3rem; }

/* generic cards + numbered steps */
.cai .card2{ border:1px solid var(--line); padding:1.3rem; height:100%; background:#fff; transition:.12s; }
.cai .card2:hover{ border-color:var(--red); box-shadow:0 0 0 1px var(--red), 0 12px 30px rgba(11,27,42,.06); transform:translateY(-2px); }
.cai .card2 .ico{ font-size:1.6rem; color:var(--red); }
.cai .card2 h3{ font-size:1.08rem; margin:.6rem 0 .35rem; }
.cai .step{ border:1px solid var(--line); border-top:3px solid var(--red); padding:1.2rem; height:100%; background:#fff; }
.cai .step .n{ width:2rem; height:2rem; background:var(--red); color:#fff; font-weight:800;
  display:inline-flex; align-items:center; justify-content:center; margin-bottom:.6rem; }

/* CAPTCHA-type cards (image fills frame, labeled metrics, two links) */
.cai .tcard{ display:flex; flex-direction:column; border:1px solid var(--line); background:#fff; height:100%; overflow:hidden; transition:.14s; width:100%; }
.cai .tcard:hover{ border-color:var(--red); box-shadow:0 14px 32px rgba(11,27,42,.09); transform:translateY(-3px); }
/* No fixed frame ratio: the artwork sets its own height and fills the card width,
   which reads better than letterboxing icons of very different proportions. */
.cai .tcard .tc-img{ background:var(--soft); overflow:hidden; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:center; }
.cai .tcard .tc-img img{ width:100%; height:auto; object-fit:contain; display:block; }
.cai .tcard .tc-body{ padding:1rem 1.1rem 1.1rem; display:flex; flex-direction:column; flex:1; }
.cai .tcard .tc-head{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.cai .tcard .tc-nm{ font-weight:800; font-size:1rem; line-height:1.15; }
.cai .tcard .tc-badge{ background:var(--red); color:#fff; font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em; padding:.16rem .45rem; }
.cai .tcard .tc-desc{ font-size:.85rem; color:var(--muted); margin:.45rem 0 0; line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cai .tcard .tc-stats{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); margin:.85rem 0 .95rem; }
.cai .tcard .tc-stat{ background:var(--soft); padding:.5rem .4rem; text-align:center; }
.cai .tcard .tc-stat .tv{ display:block; font-weight:800; color:var(--ink); font-size:1rem; line-height:1.1; }
.cai .tcard .tc-stat.ok .tv{ color:var(--red); }
.cai .tcard .tc-stat .tl{ display:block; font-size:.68rem; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.06em; margin-top:.15rem; }
.cai .tcard .tc-metric{ font-size:.82rem; color:var(--muted); font-weight:600; margin:.5rem 0 .85rem; }
.cai .tcard .tc-metric b{ color:var(--ink); }
.cai .tcard .tc-metric .ok{ color:var(--red); }
.cai .tcard .tc-links{ margin-top:auto; display:flex; gap:1.1rem; padding-top:.15rem; border-top:1px solid var(--line); }
.cai .tcard .tc-links a{ font-size:.82rem; font-weight:700; color:var(--red); text-decoration:none; display:inline-flex; align-items:center; gap:.28rem; padding-top:.6rem; }
.cai .tcard .tc-links a:hover{ text-decoration:underline; }
.cai .tcard .tc-links a i{ font-size:.9rem; }

/* ── CODE PANEL — black zone with tabs + copy ── */
.cai .codebox{ border:1px solid rgba(255,255,255,.08); overflow:hidden; background:linear-gradient(180deg, var(--dark2), var(--dark)); box-shadow:0 18px 50px rgba(10,10,10,.28); }
.cai .tabs{ display:flex; gap:.25rem; padding:.45rem .5rem 0; background:rgba(255,255,255,.03); border-bottom:1px solid rgba(255,255,255,.08); flex-wrap:wrap; }
.cai .tab{ border:1px solid transparent; border-bottom:0; background:transparent; color:#9aa0ad; font-weight:700; font-size:.85rem; padding:.5rem .9rem; cursor:pointer; font-family:inherit; }
.cai .tab.active{ background:var(--dark); color:#fff; border-color:rgba(255,255,255,.1); box-shadow:0 2px 0 0 var(--red) inset; }
.cai .panelwrap{ position:relative; }
.cai .panel{ display:none; }
.cai .panel.active{ display:block; }
.cai pre{ margin:0; padding:1.1rem 1.2rem; overflow:auto; color:#e8eaee; font-size:.86rem; line-height:1.65; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; background:transparent; }
.cai pre .cmt{ color:#6b7280; }
.cai pre .str{ color:var(--red); }
.cai pre .kw{ color:#5eead4; font-weight:600; }
.cai .copy{ position:absolute; top:.55rem; right:.55rem; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06); color:#c8ccd4; padding:.3rem .6rem; font-size:.78rem; font-weight:700; cursor:pointer; font-family:inherit; }
.cai .copy:hover{ color:#fff; border-color:var(--red); }

/* ── PRICING — billing-cycle toggle + plan cards ── */
.cai .seg{ display:inline-flex; border:1px solid var(--line); background:#fff; overflow:hidden; }
.cai .seg button{ border:0; background:#fff; padding:.6rem 1.2rem; font-weight:700; font-size:.9rem; color:var(--muted); cursor:pointer; font-family:inherit; border-right:1px solid var(--line); }
.cai .seg button:last-child{ border-right:0; }
.cai .seg button.active{ background:var(--ink); color:#fff; }
.cai .cycle-group{ display:none; }
.cai .cycle-group.active{ display:block; }
.cai .pcard{ position:relative; border:1px solid var(--line); background:#fff; padding:2.4rem 1.7rem 2rem; text-align:center; height:100%; transition:.14s; }
.cai .pcard:hover{ box-shadow:0 18px 40px rgba(11,27,42,.09); transform:translateY(-4px); border-color:#d9dde4; }
.cai .pcard-name{ text-transform:uppercase; letter-spacing:.08em; font-size:.82rem; font-weight:800; color:var(--muted); }
.cai .pcard-price{ font-family:'CairoTitle','Cairo',sans-serif !important; font-weight:900; font-size:2.5rem; color:var(--ink); line-height:1; margin:.6rem 0 .1rem; }
.cai .pcard-price small{ font-size:.9rem; color:var(--muted); font-weight:700; }
.cai .pcard-threads{ font-size:.92rem; color:var(--ink); font-weight:700; }
.cai .pcard-unlim{ display:inline-flex; align-items:center; gap:.4rem; font-size:.84rem; font-weight:700; color:var(--red); margin:.8rem 0 1.3rem; }
.cai .pcard-unlim i{ font-size:1.15rem; }
.cai .pcard .btn{ width:100%; padding:.7rem; }
.cai .pcard.feat{ border:2px solid var(--red); box-shadow:0 22px 46px rgba(255,0,30,.13); }
.cai .pcard .pribbon{ position:absolute; top:0; left:50%; transform:translateX(-50%); background:var(--red); color:#fff; font-size:.64rem; font-weight:800; padding:.22rem .85rem; text-transform:uppercase; letter-spacing:.07em; }

/* compact plan cards (red top-edge variant) */
.cai .plan{ position:relative; overflow:hidden; padding-top:1.6rem; }
.cai .plan::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg, var(--red), #ff5a6e); }
.cai .plan .pname{ text-transform:uppercase; letter-spacing:.08em; font-size:.8rem; font-weight:700; color:var(--red); }
.cai .plan .price{ font-size:2rem; font-weight:800; color:var(--ink); letter-spacing:-.02em; line-height:1.05; margin:.15rem 0 .2rem; }
.cai .plan .price small{ font-size:.95rem; font-weight:700; color:var(--muted); }
.cai .plan .pmeta{ font-size:.85rem; color:var(--muted); font-weight:600; }
.cai .plan.feat{ border-color:var(--red); box-shadow:0 14px 34px rgba(255,0,30,.10); }
.cai .plan .tag{ position:absolute; top:.6rem; right:.6rem; background:var(--red); color:#fff; font-size:.68rem;
  font-weight:700; padding:.18rem .5rem; letter-spacing:.04em; }
.cai .plan .plist{ list-style:none; padding:0; margin:.7rem 0 0; text-align:left; border-top:1px solid var(--line); padding-top:.7rem; }
.cai .plan .plist li{ font-size:.86rem; color:var(--muted); padding:.26rem 0; display:flex; gap:.5rem; align-items:flex-start; }
.cai .plan .plist li i{ color:var(--red); margin-top:.15rem; font-size:1rem; }

/* integration paths */
.cai .ipath{ border:1px solid var(--line); background:#fff; padding:2rem 1.9rem; height:100%; }
.cai .ipath.direct{ border-top:3px solid var(--red); }
.cai .ipath h3{ font-size:1.18rem; margin-bottom:1rem; display:flex; align-items:center; gap:.6rem; }
.cai .ipath h3 i{ color:var(--red); }
.cai .ipath .opt{ display:flex; gap:.9rem; padding:.95rem .5rem; border-top:1px solid var(--line); text-decoration:none; color:inherit; transition:.12s; }
.cai .ipath a.opt:hover{ background:var(--soft); }
.cai .ipath a.opt:hover b{ color:var(--red); }
.cai .ipath .opt .oi{ flex:0 0 2.4rem; width:2.4rem; height:2.4rem; background:var(--red-soft); color:var(--red); display:inline-flex; align-items:center; justify-content:center; font-size:1.2rem; }
.cai .ipath .opt b{ display:block; color:var(--ink); font-size:.98rem; }
.cai .ipath .opt b i{ font-size:.72rem; color:var(--muted); margin-left:.2rem; }
.cai .ipath .opt span{ font-size:.88rem; color:var(--muted); }

/* integration badge strip */
.cai .badge-line{ display:flex; flex-wrap:wrap; gap:1.2rem 2rem; align-items:center; justify-content:center; border:1px solid var(--line); background:#fff; padding:1.1rem 1.25rem; }
.cai .badge-line span{ display:inline-flex; align-items:center; gap:.5rem; color:var(--muted); font-weight:600; font-size:.92rem; }
.cai .badge-line i{ font-size:1.35rem; color:var(--ink); }

/* why-us box + checklist + thread visual */
.cai .wbox{ border:1px solid var(--line); border-top:3px solid var(--red); background:#fff; padding:1.9rem; }
.cai .wlist{ list-style:none; padding:0; margin:0; }
.cai .wlist li{ display:flex; gap:.75rem; padding:.75rem 0; border-top:1px solid var(--line); font-size:.95rem; color:var(--muted); }
.cai .wlist li:first-child{ border-top:0; }
.cai .wlist li i{ color:var(--red); font-size:1.25rem; margin-top:.05rem; }
.cai .wlist li b{ color:var(--ink); }
.cai .thread-viz{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin:1.2rem 0; }
.cai .thread-viz .th{ border:1px solid var(--line); background:var(--soft); padding:.5rem .8rem; font-size:.82rem; font-weight:700; color:var(--ink); display:inline-flex; align-items:center; gap:.4rem; }
.cai .thread-viz .th i{ color:var(--red); }
.cai .thread-viz .arw{ color:var(--muted); }

/* effective-cost tiles */
.cai .ctile{ border:1px solid var(--line); background:#fff; padding:1.5rem 1.1rem; text-align:center; height:100%; }
.cai .ctile .v{ font-size:.82rem; color:var(--muted); font-weight:700; }
.cai .ctile .c{ font-size:1.7rem; font-weight:800; color:var(--ink); letter-spacing:-.01em; line-height:1.1; margin-top:.2rem; }
.cai .ctile .c small{ font-size:.8rem; color:var(--muted); font-weight:700; }
.cai .ctile.best{ border-color:var(--red); box-shadow:0 0 0 1px var(--red); }
.cai .ctile.best .c{ color:var(--red); }
.cai .ctile .tagb{ display:inline-block; margin-top:.45rem; font-size:.66rem; font-weight:800; color:var(--red); text-transform:uppercase; letter-spacing:.06em; }

/* ── tables (square) + comparison ── */
.cai table{ width:100%; border-collapse:separate; border-spacing:0; border:1px solid var(--line); overflow:hidden; background:#fff; }
.cai th,.cai td{ padding:.85rem 1rem; text-align:left; border-bottom:1px solid var(--line); vertical-align:top; }
.cai th .thico{ display:inline-flex; align-items:center; gap:10px; }
.cai th .thico img{ width:26px; height:26px; object-fit:contain; }
.cai thead th{ background:var(--soft); color:var(--ink); font-weight:700; }
.cai tbody tr:last-child td{ border-bottom:0; }
.cai th.hl{ background:var(--red-soft); color:var(--red); }
.cai td.hl{ background:var(--red-soft); color:var(--ink); font-weight:600; }
.cai .cmp td, .cai .cmp th{ text-align:center; padding:1.05rem 1.15rem; }
.cai .cmp td:first-child, .cai .cmp th:first-child{ text-align:left; }
.cai .cmp thead th.hl{ background:var(--ink); color:#fff; }
.cai .cmp td.hl .note{ color:var(--muted); font-weight:600; }
.cai hr.soft{ border:0; border-top:1px solid var(--line); opacity:1; }
.cai .tw{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.cai .tw > table{ min-width:520px; }

/* "At a glance" spec panel */
.cai .specpanel{ display:flex; flex-wrap:wrap; border:1px solid var(--line); background:#fff; overflow:hidden; box-shadow:0 12px 34px rgba(11,27,42,.05); }
.cai .specpanel .sp-id{ display:flex; align-items:center; gap:.85rem; padding:1.2rem 1.35rem; background:var(--soft); border-right:1px solid var(--line); flex:1 1 240px; }
.cai .specpanel .sp-id img{ width:42px; height:42px; object-fit:contain; }
.cai .specpanel .sp-id .nm{ font-weight:800; color:var(--ink); font-size:1.08rem; line-height:1.15; }
.cai .specpanel .sp-id .sub{ font-size:.8rem; color:var(--muted); font-weight:600; }
.cai .specpanel .sp-stats{ flex:3 1 480px; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); }
.cai .specpanel .sp-cell{ background:#fff; padding:1.2rem 1rem; text-align:center; }
.cai .specpanel .sp-val{ font-weight:800; color:var(--ink); font-size:1.28rem; line-height:1.05; letter-spacing:-.01em; }
.cai .specpanel .sp-val.red{ color:var(--red); }
.cai .specpanel .sp-val small{ font-size:.78rem; font-weight:700; color:var(--muted); }
.cai .specpanel .sp-lab{ font-size:.78rem; color:var(--muted); font-weight:600; margin-top:.3rem; }
.cai .specpanel .star{ color:var(--red); font-weight:700; }

/* related links */
.cai .rel{ border:1px solid var(--line); padding:1rem 1.1rem; background:#fff; text-decoration:none; color:var(--ink); display:block; height:100%; transition:.12s; }
.cai .rel:hover{ border-color:var(--red); box-shadow:0 0 0 1px var(--red); transform:translateY(-2px); }
.cai .rel .nm{ font-weight:700; }
.cai .rel i{ color:var(--red); }

/* ── FAQ (native <details>) ──
   Questions are real headings (<h3> inside <summary>) so they enter the document outline and
   the accessibility tree; the heading is reset to summary-sized text visually. */
.cai details{ border:1px solid var(--line); padding:0 1.3rem; background:#fff; margin-bottom:.8rem; }
.cai details summary{ cursor:pointer; font-weight:700; padding:1.15rem 0; list-style:none; display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; }
.cai details summary h3{ font-family:'Cairo',system-ui,-apple-system,'Segoe UI',sans-serif !important; font-size:1rem !important; font-weight:700 !important; line-height:1.5; margin:0; letter-spacing:0; }
.cai details summary::-webkit-details-marker{ display:none; }
.cai details summary::after{ content:"\f107"; font-family:"Line Awesome Free"; font-weight:900; color:var(--red); transition:.15s; }
.cai details[open] summary::after{ transform:rotate(180deg); }
.cai details .body{ padding:0 0 1.15rem; color:var(--muted); }
.cai .faq-more{ display:inline-flex; align-items:center; gap:.3rem; font-weight:700; color:var(--red); margin-top:.4rem; }

/* inline code */
.cai code{ background:var(--soft); border:1px solid var(--line); padding:.05rem .35rem; color:var(--ink); font-size:.9em; }

/* ── COST CALCULATOR (rendered by sections/cost-calculator-cai.blade.php) ── */
.cai .chipset{ display:flex; flex-wrap:wrap; gap:.5rem; }
.cai .chipset .chip{ cursor:pointer; user-select:none; transition:.12s; }
.cai .chipset .chip:hover{ border-color:var(--red); }
.cai .chipset .chip.active{ background:var(--ink); border-color:var(--ink); color:#fff; }
.cai .chipset .chip.active i{ color:#fff; }
.cai .ucard{ border:1px solid var(--line); background:#fff; padding:1rem; height:100%; cursor:pointer; transition:.12s; text-align:left; width:100%; font-family:inherit; }
.cai .ucard:hover{ border-color:var(--red); }
.cai .ucard.active{ border-color:var(--red); box-shadow:0 0 0 1px var(--red); }
.cai .ucard .un{ font-weight:800; color:var(--ink); font-size:.98rem; }
.cai .ucard .ud{ font-size:.82rem; color:var(--muted); }
.cai .ucard .uv{ font-weight:700; color:var(--red); font-size:.85rem; margin-top:.35rem; }
.cai .calc-card{ border:1px solid var(--line); background:#fff; padding:1.6rem; height:100%; }
.cai .calc-field{ margin-bottom:1.15rem; }
.cai .calc-field label{ display:block; font-weight:700; color:var(--ink); font-size:.9rem; margin-bottom:.35rem; }
.cai .calc-field .help{ font-size:.8rem; color:var(--muted); margin-top:.3rem; }
.cai .calc-input{ display:flex; align-items:stretch; border:1px solid var(--line); background:#fff; }
.cai .calc-input .fix{ display:inline-flex; align-items:center; padding:0 .7rem; background:var(--soft); border-right:1px solid var(--line); color:var(--muted); font-weight:700; font-size:.85rem; }
.cai .calc-input .fix.suf{ border-right:0; border-left:1px solid var(--line); }
.cai .calc-input input{ border:0; padding:.65rem .8rem; font-family:inherit; font-weight:700; color:var(--ink); width:100%; min-width:0; background:transparent; }
.cai .calc-input input:focus{ outline:2px solid var(--red); outline-offset:-2px; }
.cai input[type="range"]{ width:100%; accent-color:var(--red); }
.cai .calc-pane{ background:linear-gradient(180deg, var(--dark2), var(--dark)); color:#e8eaee; padding:1.75rem; height:100%; border:1px solid rgba(255,255,255,.08); }
.cai .calc-pane .pane-lab{ font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; font-weight:700; color:#9aa0ad; }
.cai .calc-pane .big-num{ font-family:'CairoTitle','Cairo',sans-serif !important; font-weight:900; font-size:3rem; line-height:1.05; color:#fff; margin:.35rem 0 .1rem; }
.cai .calc-pane .big-sub{ font-size:.9rem; color:#9aa0ad; }
.cai .calc-pane .prow{ display:flex; justify-content:space-between; gap:1rem; padding:.6rem 0; border-top:1px solid rgba(255,255,255,.1); font-size:.9rem; }
.cai .calc-pane .prow span:first-child{ color:#9aa0ad; }
.cai .calc-pane .prow b{ color:#fff; font-weight:700; }
.cai .calc-pane .verdict{ display:inline-block; font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; padding:.22rem .6rem; background:var(--red); color:#fff; }
.cai .calc-pane .verdict.wait{ background:#a16207; }
.cai .calc-pane .btn-cai{ width:100%; text-align:center; }
.cai .calc-note{ font-size:.82rem; color:#9aa0ad; border-top:1px solid rgba(255,255,255,.1); padding-top:.75rem; margin-top:.75rem; }
.cai .chart-wrap{ border:1px solid var(--line); background:#fff; padding:1.25rem; }
.cai .chart-wrap svg{ display:block; width:100%; height:auto; }
.cai .legend{ display:flex; flex-wrap:wrap; gap:1.2rem; font-size:.82rem; color:var(--muted); font-weight:600; }
.cai .legend i{ display:inline-block; width:14px; height:3px; margin-right:.35rem; vertical-align:middle; }

/* payment-method strip (brand marks, not brand names) */
.cai .paylist{ display:inline-flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.55rem; vertical-align:middle; }
.cai .paylist .paylist-label{ border:0; background:none; padding:0; min-width:0; height:auto; font-size:.9rem; font-weight:700; color:var(--muted); }
.cai .paylist span{ display:inline-flex; align-items:center; justify-content:center; min-width:2.6rem; height:1.75rem; padding:0 .4rem; border:1px solid var(--line); background:#fff; color:var(--ink); }
.cai .paylist i{ font-size:1.25rem; line-height:1; }

/* Bootstrap tooltips are auto-initialised site-wide (public/js/bootstrap-tooltips.js);
   square them off so they match the identity wherever a CAI section triggers one. */
.tooltip .tooltip-inner{ border-radius:0 !important; background:var(--ink, #0b1b2a); font-family:'Cairo',system-ui,sans-serif; font-size:.82rem; font-weight:600; }
.tooltip .tooltip-arrow::before{ border-top-color:var(--ink, #0b1b2a); border-bottom-color:var(--ink, #0b1b2a); }

/* sticky CTA bar */
.cai .sticky-cta{ position:fixed; left:0; right:0; bottom:0; z-index:1030; background:#fff; border-top:2px solid var(--red); box-shadow:0 -10px 34px rgba(11,27,42,.12); padding:.7rem 0; transform:translateY(130%); transition:transform .25s ease; }
.cai .sticky-cta.show{ transform:translateY(0); }
.cai .sticky-cta .sc-txt{ font-weight:600; color:var(--ink); font-size:.95rem; }

/* ── global UX polish ── */
.cai [id]{ scroll-margin-top:84px; }
.cai img{ max-width:100%; height:auto; }
.cai a:focus-visible, .cai button:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }
.cai.sec > .container > .text-center > h2{ letter-spacing:-.015em; }

@media (max-width:767px){
  .cai .statband{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:575px){
  .cai.sec{ padding:3.25rem 0; }
  .cai.sec.pad-lg{ padding:3.75rem 0; }
  .cai h1.display-3{ font-size:2.2rem; }
  .cai h1.display-5{ font-size:2rem; }
  .cai .statcard .num{ font-size:1.7rem; }
  .cai .sticky-cta .sc-txt{ display:none; }
  .cai .specpanel .sp-id{ border-right:0; border-bottom:1px solid var(--line); flex-basis:100%; }
  .cai .specpanel .sp-stats{ grid-template-columns:repeat(2,1fr); }
}