/* Trigger Engage blog — shares the landing page's design system */
@font-face{font-family:'Instrument Sans';src:url('../assets/fonts/instrument-sans-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url('../assets/fonts/instrument-sans-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url('../assets/fonts/instrument-sans-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

:root{
  --ground:#070b14; --ground-2:#090f1c;
  --panel:#0d1424; --panel-2:#111a2e;
  --line:rgba(148,163,184,.12); --line-2:rgba(148,163,184,.18);
  --ink:#e9eef7; --muted:#95a5bd; --faint:#5f6f8a;
  --emerald:#34d399; --emerald-bright:#5ff0bd;
  --violet:#a78bfa; --gold:#fcd34d; --rose:#fb7185;
  --radius:16px;
  --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
  --sans:'Instrument Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:rgba(52,211,153,.28)}
:focus-visible{outline:2px solid var(--emerald);outline-offset:3px;border-radius:6px}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}

/* nav (matches the landing page) */
header.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);background:rgba(7,11,20,.72);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:24px;height:66px}
.brand{display:flex;align-items:center;gap:11px;font-weight:600;letter-spacing:-.01em}
.mark{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-weight:600;font-size:14px;color:#04120b;background:linear-gradient(160deg,var(--emerald-bright),var(--emerald));box-shadow:0 6px 18px -8px rgba(52,211,153,.7)}
.nav-links{display:flex;gap:26px;margin-left:14px}
.nav-links a{font-size:14.5px;color:var(--muted);transition:color .18s}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--ink)}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:12px}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;border-radius:12px;padding:11px 18px;cursor:pointer;border:1px solid transparent;transition:transform .15s ease,background .2s,border-color .2s,box-shadow .2s;white-space:nowrap}
.btn svg{width:17px;height:17px}
.btn-primary{background:linear-gradient(180deg,var(--emerald-bright),var(--emerald));color:#04120b;box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 10px 30px -12px rgba(52,211,153,.7)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{background:rgba(148,163,184,.06);border-color:var(--line-2);color:var(--ink)}
.btn-ghost:hover{background:rgba(148,163,184,.12);transform:translateY(-2px)}
@media(max-width:720px){.nav-links{display:none}}

.eyebrow{font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--emerald)}
.grad{background:linear-gradient(100deg,var(--emerald-bright),var(--emerald) 55%,var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent}

/* blog index */
.blog-hero{padding:64px 0 24px}
.blog-hero h1{font-size:clamp(34px,5vw,52px);font-weight:600;letter-spacing:-.02em;margin:14px 0 0;text-wrap:balance}
.blog-hero p{color:var(--muted);font-size:19px;margin-top:16px;max-width:60ch}
.post-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;padding:24px 0 88px}
@media(max-width:760px){.post-grid{grid-template-columns:1fr}}
.post-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(180deg,var(--panel),var(--ground-2));padding:26px;transition:transform .2s,border-color .2s}
.post-card:hover{transform:translateY(-4px);border-color:var(--line-2)}
.post-card .cat{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--violet)}
.post-card.e .cat{color:var(--emerald)}
.post-card h2{font-size:22px;font-weight:600;letter-spacing:-.01em;margin:12px 0 0;line-height:1.2;text-wrap:balance}
.post-card p{color:var(--muted);font-size:15px;margin-top:10px}
.post-card .meta{margin-top:auto;padding-top:18px;font-size:13px;color:var(--faint);display:flex;gap:10px;align-items:center}
.post-card .arrow{color:var(--emerald);font-weight:600;font-size:14px;margin-top:16px;display:inline-flex;gap:6px;align-items:center}
.featured{grid-column:1 / -1;display:grid;grid-template-columns:1.1fr .9fr;gap:0;overflow:hidden}
.featured .art{display:flex;flex-direction:column;justify-content:center;padding:36px}
.featured .art h2{font-size:clamp(24px,3vw,30px)}
.featured .side{border-left:1px solid var(--line);background:var(--ground-2);display:grid;place-items:center;padding:28px}
.featured .side .num{font-size:clamp(56px,9vw,96px);font-weight:600;color:var(--emerald);opacity:.9;line-height:1;letter-spacing:-.03em}
@media(max-width:760px){.featured{grid-template-columns:1fr}.featured .side{border-left:0;border-top:1px solid var(--line)}}

/* article */
.article{max-width:760px;margin:0 auto;padding:0 24px}
.breadcrumb{padding:34px 0 0;font-size:13.5px;color:var(--faint)}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--ink)}
.article-head{padding:22px 0 8px;border-bottom:1px solid var(--line);margin-bottom:36px}
.article-head .kicker{font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--violet)}
.article-head h1{font-size:clamp(30px,4.6vw,46px);font-weight:600;letter-spacing:-.02em;line-height:1.1;margin:14px 0 0;text-wrap:balance}
.article-head .meta{margin:18px 0 24px;font-size:14px;color:var(--faint);display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.article-head .meta .dot{width:4px;height:4px;border-radius:50%;background:var(--line-2)}

.prose{font-size:18px;line-height:1.72;color:#d7deec}
.prose > p:first-of-type{font-size:20px;color:var(--ink);line-height:1.6}
.prose p{margin:0 0 22px}
.prose h2{font-size:clamp(24px,3.2vw,30px);font-weight:600;letter-spacing:-.015em;color:var(--ink);margin:44px 0 14px;line-height:1.2;text-wrap:balance;scroll-margin-top:84px}
.prose h3{font-size:20px;font-weight:600;color:var(--ink);margin:32px 0 10px}
.prose a{color:var(--emerald);text-decoration:none;border-bottom:1px solid rgba(52,211,153,.35);transition:border-color .15s}
.prose a:hover{border-color:var(--emerald)}
.prose strong{color:var(--ink);font-weight:600}
.prose ul,.prose ol{margin:0 0 22px;padding-left:24px}
.prose li{margin:8px 0}
.prose li::marker{color:var(--emerald)}
.prose blockquote{margin:26px 0;padding:4px 0 4px 22px;border-left:3px solid var(--emerald);color:var(--muted);font-size:19px}
.prose hr{border:0;height:1px;background:var(--line-2);margin:40px 0}
.prose code{font-family:var(--mono);font-size:.86em;background:rgba(148,163,184,.12);padding:2px 6px;border-radius:6px;color:var(--emerald-bright)}
.prose pre{margin:0 0 24px;padding:18px 20px;background:#060a12;border:1px solid var(--line-2);border-radius:12px;overflow-x:auto;font-family:var(--mono);font-size:14px;line-height:1.7}
.prose pre code{background:none;padding:0;color:#d7deec;font-size:14px}
.prose .c-cm{color:var(--faint)} .prose .c-str{color:var(--emerald-bright)} .prose .c-fn{color:#7dd3fc} .prose .c-key{color:var(--violet)}
.prose table{width:100%;border-collapse:collapse;margin:0 0 26px;font-size:15px;display:block;overflow-x:auto}
.prose th,.prose td{padding:12px 14px;border:1px solid var(--line);text-align:left;vertical-align:top}
.prose thead th{background:var(--ground-2);color:var(--faint);font-size:12.5px;letter-spacing:.03em;text-transform:uppercase;font-weight:600}
.prose td:first-child{color:var(--ink)}

.callout{border:1px solid var(--line-2);background:linear-gradient(180deg,rgba(52,211,153,.05),var(--panel));border-radius:14px;padding:20px 22px;margin:28px 0;font-size:16px;color:var(--muted)}
.callout strong{color:var(--emerald)}

.cta-box{border:1px solid rgba(52,211,153,.3);border-radius:18px;background:radial-gradient(600px 240px at 50% -40%,rgba(52,211,153,.12),transparent 60%),linear-gradient(180deg,var(--panel),var(--ground-2));padding:32px;margin:44px 0;text-align:center}
.cta-box h3{font-size:24px;font-weight:600;letter-spacing:-.01em;margin:0}
.cta-box p{color:var(--muted);margin:12px auto 22px;max-width:48ch;font-size:16px}
.cta-box .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* faq */
.faq details{border:1px solid var(--line);border-radius:12px;background:var(--panel);margin-bottom:10px;overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:16px 20px;font-weight:500;font-size:16.5px;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq details[open] summary{border-bottom:1px solid var(--line)}
.faq .a{padding:16px 20px;color:var(--muted);font-size:15.5px}

/* related + share */
.related{margin:56px 0;padding-top:36px;border-top:1px solid var(--line)}
.related h2{font-size:20px;font-weight:600;margin:0 0 18px}
.related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(max-width:640px){.related-grid{grid-template-columns:1fr}}
.related-grid a{border:1px solid var(--line);border-radius:12px;padding:18px;background:var(--panel);transition:.2s}
.related-grid a:hover{border-color:var(--line-2);transform:translateY(-3px)}
.related-grid .cat{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--violet)}
.related-grid strong{display:block;margin-top:8px;color:var(--ink);font-weight:600;font-size:16px;line-height:1.3}

/* footer */
footer.site{border-top:1px solid var(--line);background:var(--ground-2);padding:44px 0 36px;margin-top:40px}
.foot{display:flex;flex-wrap:wrap;gap:18px 40px;align-items:center;justify-content:space-between}
.foot .links{display:flex;gap:22px;flex-wrap:wrap}
.foot a{color:var(--muted);font-size:14px}
.foot a:hover{color:var(--ink)}
.foot .copy{color:var(--faint);font-size:13px}

/* article figures / screenshots */
.post-fig{margin:30px 0;border:1px solid var(--line-2);border-radius:16px;overflow:hidden;background:var(--panel);box-shadow:0 30px 70px -45px rgba(0,0,0,.9)}
.post-fig img{width:100%;height:auto;display:block}
.post-fig figcaption{padding:12px 18px;font-size:13.5px;color:var(--faint);border-top:1px solid var(--line);background:var(--ground-2)}
.prose > .post-fig:first-child,.prose .post-fig{scroll-margin-top:84px}
.prose .signoff{margin-top:34px;font-size:18px;font-weight:600;color:var(--emerald);font-style:italic}
.featured .side .pull{font-size:clamp(20px,2.4vw,26px);font-weight:600;color:var(--emerald);line-height:1.28;letter-spacing:-.015em;text-align:center;max-width:340px;text-wrap:balance}

/* --- author byline link + author archive pages --- */
.meta .author-link{color:var(--muted);border-bottom:1px solid rgba(148,163,184,.28);transition:color .15s,border-color .15s}
.meta .author-link:hover{color:var(--ink);border-color:var(--muted)}
.author-hero{display:flex;gap:28px;align-items:center;padding:40px 0 30px;border-bottom:1px solid var(--line)}
.author-avatar{width:92px;height:92px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;font-size:40px;font-weight:600;color:#061710;letter-spacing:-.02em;background:linear-gradient(150deg,#7af7ca,#34d399 52%,#18b981);box-shadow:0 22px 50px -24px rgba(52,211,153,.55)}
.author-avatar.sq{border-radius:24px;font-size:34px}
.author-id .eyebrow{color:var(--violet)}
.author-id h1{font-size:clamp(28px,4.2vw,42px);font-weight:600;letter-spacing:-.02em;margin:8px 0 0;line-height:1.1;text-wrap:balance}
.author-role{color:var(--muted);font-size:15.5px;margin-top:8px}
.author-bio{color:var(--muted);font-size:17.5px;line-height:1.65;max-width:70ch;margin:20px 0 0}
.author-social{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.author-social a{font-size:13.5px;color:var(--muted);border:1px solid var(--line-2);border-radius:999px;padding:8px 15px;display:inline-flex;gap:7px;align-items:center;transition:color .15s,border-color .15s}
.author-social a:hover{color:var(--ink);border-color:var(--muted)}
.posts-label{font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);padding:40px 0 0}
@media(max-width:640px){.author-hero{flex-direction:column;text-align:center;align-items:center}.author-social{justify-content:center}.author-bio{margin-inline:auto}}
.author-card{display:flex;gap:18px;align-items:center;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(180deg,var(--panel),var(--ground-2));padding:24px;transition:transform .2s,border-color .2s}
.author-card:hover{transform:translateY(-4px);border-color:var(--line-2)}
.author-card .av{width:60px;height:60px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;font-size:24px;font-weight:600;color:#061710;background:linear-gradient(150deg,#7af7ca,#34d399 52%,#18b981)}
.author-card .av.sq{border-radius:16px;font-size:20px}
.author-card h2{font-size:19px;font-weight:600;margin:0}
.author-card h2{color:var(--ink)}
.author-card:hover h2{color:var(--emerald)}
.author-card .r{color:var(--muted);font-size:14px;margin-top:3px}
.author-card .c{color:var(--faint);font-size:12.5px;margin-top:7px}