/* ===================================================================
   FLOWTRIG — case-article.css   (Inner case-study / blog template)
   Uses global tokens + tokens.css gradients.
   =================================================================== */
.ca-page > section{ padding:clamp(30px,4vw,56px) 0; }

/* breadcrumb + title head */
.ca-head{ padding-top:clamp(34px,4vw,56px); }
.ca-bc{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--tx-mute); }
.ca-bc a{ color:var(--tx-mute); } .ca-bc a:hover{ color:var(--neon); }
.ca-bc svg{ width:13px; height:13px; opacity:.6; }
.ca-tag{ display:inline-flex; align-items:center; gap:7px; margin-top:18px; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--neon); background:var(--green-soft); border:1px solid rgba(43,232,129,.2); padding:6px 12px; border-radius:999px; }
.ca-head h1{ font-family:var(--font-d); font-weight:600; letter-spacing:-.03em; font-size:clamp(30px,4.4vw,52px); line-height:1.08; margin:16px 0 0; max-width:none; }
.ca-sub{ font-size:clamp(15px,1.4vw,18px); color:var(--tx-soft); line-height:1.6; margin-top:14px; max-width:none; }
.ca-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:20px; font-size:13px; color:var(--tx-mute); }
.ca-meta .who{ display:flex; align-items:center; gap:9px; }
.ca-meta .who .av{ width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:#fff; }
.ca-meta .who b{ color:var(--tx); font-weight:600; }
.ca-meta .dot{ width:4px; height:4px; border-radius:50%; background:var(--tx-mute); }
.ca-meta .mi{ display:inline-flex; align-items:center; gap:6px; }
.ca-meta .mi svg{ width:14px; height:14px; }

/* banner */
.ca-banner{ position:relative; height:clamp(220px,32vw,400px); border-radius:24px; overflow:hidden; display:flex; align-items:flex-end; padding:26px; margin-top:24px; }
.ca-banner::after{ content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.16) 1px, transparent 1.4px); background-size:22px 22px; -webkit-mask-image:radial-gradient(circle at 75% 15%, #000, transparent 72%); mask-image:radial-gradient(circle at 75% 15%, #000, transparent 72%); opacity:.55; }
.ca-banner.g1{ background:linear-gradient(150deg,#0E7C42,#19A85B 60%,#2BE881); }
.ca-banner .blogo{ position:relative; z-index:1; display:flex; align-items:center; gap:11px; color:#fff; font-family:var(--font-d); font-weight:700; font-size:24px; }
.ca-banner .blogo .mk{ width:42px; height:42px; border-radius:11px; background:rgba(255,255,255,.18); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; }
.ca-banner .blogo .mk svg{ width:22px; height:22px; color:#fff; }
.ca-banner .bk{ position:absolute; top:24px; right:26px; z-index:1; text-align:right; color:#fff; }
.ca-banner .bk .v{ font-family:var(--font-d); font-weight:700; font-size:clamp(30px,4vw,46px); line-height:1; }
.ca-banner .bk .l{ font-size:11px; opacity:.85; letter-spacing:.04em; }

/* layout: article + sidebar */
.ca-layout{ display:flex; gap:clamp(28px,3.5vw,56px); align-items:flex-start; }
@media(max-width:920px){ .ca-layout{ flex-direction:column; } .ca-side{ width:100%; position:static !important; } }
.ca-article{ flex:1 1 0%; min-width:0; }
.ca-side{ flex:0 0 290px; position:sticky; top:96px; display:flex; flex-direction:column; gap:14px; }

/* article prose */
.ca-article h2{ font-family:var(--font-d); font-weight:600; font-size:clamp(22px,2.4vw,30px); letter-spacing:-.02em; margin:34px 0 0; scroll-margin-top:90px; }
.ca-article h2:first-child{ margin-top:0; }
.ca-article h3{ font-family:var(--font-d); font-weight:600; font-size:18px; margin:24px 0 0; }
.ca-article p{ font-size:15.5px; line-height:1.75; color:var(--tx-soft); margin-top:14px; }
.ca-article p strong{ color:var(--tx); }
.ca-article a.inline{ color:var(--neon); text-decoration:underline; }

/* lead paragraph */
.ca-lead{ font-size:18px !important; line-height:1.7 !important; color:var(--tx) !important; font-family:var(--font-d); font-weight:500; }

/* stat blocks inside article */
.ca-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:24px; }
@media(max-width:560px){ .ca-stats{ grid-template-columns:1fr; } }
.ca-stat{ border:1px solid var(--line); border-radius:16px; background:var(--surface); padding:18px; }
.ca-stat .v{ font-family:var(--font-d); font-weight:600; font-size:30px; letter-spacing:-.02em; color:var(--neon-dim); }
.ca-stat .l{ font-size:12.5px; color:var(--tx-mute); margin-top:4px; line-height:1.4; }

/* icon callout blocks */
.ca-block{ display:flex; gap:14px; align-items:flex-start; border:1px solid var(--line); border-radius:16px; background:var(--surface); padding:18px; margin-top:16px; }
.ca-block .bi{ width:42px; height:42px; flex:0 0 42px; border-radius:12px; background:var(--green-soft); border:1px solid rgba(43,232,129,.2); color:var(--neon); display:flex; align-items:center; justify-content:center; }
.ca-block .bi svg{ width:21px; height:21px; }
.ca-block .bt b{ font-size:15px; font-weight:600; }
.ca-block .bt p{ margin-top:5px; font-size:13.5px; }

/* checklist */
.ca-checks{ list-style:none; padding:0; margin:16px 0 0; display:flex; flex-direction:column; gap:10px; }
.ca-checks li{ display:flex; gap:11px; align-items:flex-start; font-size:14.5px; color:var(--tx-soft); line-height:1.55; }
.ca-checks li .ck{ width:20px; height:20px; flex:0 0 20px; border-radius:50%; background:var(--green-soft); color:var(--neon); display:inline-flex; align-items:center; justify-content:center; margin-top:2px; }
.ca-checks li .ck svg{ width:11px; height:11px; }

/* pull quote */
.ca-quote{ border-left:3px solid var(--neon); padding:6px 0 6px 22px; margin:28px 0 0; }
.ca-quote q{ font-family:var(--font-d); font-weight:500; font-size:clamp(19px,2.2vw,25px); line-height:1.4; letter-spacing:-.01em; color:var(--tx); }
.ca-quote .qa{ display:flex; align-items:center; gap:10px; margin-top:14px; }
.ca-quote .qa .av{ width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:#fff; }
.ca-quote .qa .nm{ font-size:13.5px; font-weight:600; } .ca-quote .qa .rl{ font-size:12px; color:var(--tx-mute); }

/* image placeholder inside article */
.ca-figure{ border:1px solid var(--line); border-radius:16px; overflow:hidden; margin-top:22px; }
.ca-figure .ph{ aspect-ratio:16/8; background:linear-gradient(135deg,var(--surface-2),var(--surface-3)); display:flex; align-items:center; justify-content:center; color:var(--tx-mute); font-size:12.5px; gap:8px; }
.ca-figure .ph svg{ width:18px; height:18px; }
.ca-figure figcaption{ font-size:12px; color:var(--tx-mute); padding:10px 14px; border-top:1px solid var(--line-2); }

/* ---- sidebar widgets ---- */
.ca-w{ border:1px solid var(--line); border-radius:18px; background:var(--surface); padding:18px; }
.ca-w .wh{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--tx-mute); margin-bottom:13px; }
/* author card */
.ca-author{ text-align:center; }
.ca-author .av{ width:66px; height:66px; border-radius:50%; margin:0 auto 12px; display:flex; align-items:center; justify-content:center; font-family:var(--font-d); font-size:24px; font-weight:700; color:#fff; }
.ca-author .nm{ font-weight:600; font-size:15px; } .ca-author .rl{ font-size:12.5px; color:var(--tx-mute); margin-top:2px; }
.ca-author p{ font-size:12.5px; color:var(--tx-soft); margin-top:10px; line-height:1.5; }
.ca-social{ display:flex; gap:8px; justify-content:center; margin-top:14px; }
.ca-social a{ width:34px; height:34px; border-radius:9px; border:1px solid var(--line); background:var(--surface-2); color:var(--tx-soft); display:flex; align-items:center; justify-content:center; transition:all .15s; }
.ca-social a:hover{ background:var(--g-a160); color:#fff; border-color:transparent; transform:translateY(-2px); }
.ca-social a svg{ width:16px; height:16px; }
/* services list */
.ca-serv{ display:flex; flex-direction:column; gap:8px; }
.ca-serv a{ display:flex; align-items:center; gap:11px; padding:10px; border-radius:11px; transition:background .15s; }
.ca-serv a:hover{ background:var(--surface-2); }
.ca-serv a .si{ width:32px; height:32px; flex:0 0 32px; border-radius:9px; display:flex; align-items:center; justify-content:center; }
.ca-serv a .si svg{ width:17px; height:17px; }
.ca-serv a .st{ font-size:13.5px; font-weight:600; } .ca-serv a .ss{ font-size:11px; color:var(--tx-mute); }
.ca-serv a .go{ margin-left:auto; color:var(--tx-mute); }
.ca-serv a .go svg{ width:14px; height:14px; }
/* sidebar cta */
.ca-cta{ position:relative; overflow:hidden; border:1px solid rgba(43,232,129,.28); border-radius:18px; padding:20px; background:radial-gradient(130% 100% at 100% 0%, color-mix(in oklab,var(--neon) 14%, var(--surface)), var(--surface) 65%); }
.ca-cta h4{ font-family:var(--font-d); font-weight:600; font-size:17px; }
.ca-cta p{ font-size:12.5px; color:var(--tx-soft); margin-top:7px; line-height:1.5; }
.ca-cta .btn{ width:100%; justify-content:center; margin-top:13px; }

/* next/prev + related */
.ca-related{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media(max-width:820px){ .ca-related{ grid-template-columns:1fr; } }