/* ============================================================================
   Global Data — Blog / Resources styles (hub + single post). SELF-CONTAINED.
   Same token system as solutions.css. Pairs with blog.js.
   Markup scoped under .gdblog, prefix bl-.
   ============================================================================ */
.gdblog{
  --p:#13ec80; --p-dark:#0eb561;
  --green:#047857; --green-700:#065f46; --green-soft:#ecfdf5; --green-line:#a7f3d0;
  --ink:#0f172a; --body:#475569; --muted:#64748b; --faint:#94a3b8;
  --line:#e2e8f0; --line-soft:#eef2f7; --surface:#ffffff; --surface-2:#f8fafc; --surface-3:#f1f5f9;
  --deep:#06281a;
}
.gdblog .material-symbols-outlined{ font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
  width:1em; height:1em; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; flex:none; line-height:1; }
html{ scroll-behavior:smooth; }
body{ font-family:'Manrope',sans-serif; background:#f1f5f9; color:#0f172a; }
.material-symbols-outlined{ font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24; }

.gdblog .pt-badge{ display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--green-700); background:var(--green-soft); padding:7px 14px; border-radius:100px; border:1px solid var(--green-line); }
.gdblog .pt-dot{ width:7px; height:7px; border-radius:50%; background:var(--p); box-shadow:0 0 0 0 rgba(19,236,128,.55); animation:pt-pulse 1.8s infinite; }
@keyframes pt-pulse{ 0%{box-shadow:0 0 0 0 rgba(19,236,128,.55)} 70%{box-shadow:0 0 0 7px rgba(19,236,128,0)} 100%{box-shadow:0 0 0 0 rgba(19,236,128,0)} }
.gdblog .pt-hero-mesh{ background-color:#fff;
  background-image:radial-gradient(circle at top left,rgba(19,236,128,.16),transparent 48%),radial-gradient(circle at 12% 8%,rgba(4,120,87,.08),transparent 40%); }
.mesh-gradient{ background-image:radial-gradient(at 0% 0%,rgba(19,236,128,.06) 0,transparent 50%),radial-gradient(at 100% 100%,rgba(4,120,87,.04) 0,transparent 50%); }
.gdblog .pt-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  font-family:inherit; font-weight:700; font-size:14.5px; line-height:1; border:1px solid transparent; border-radius:12px;
  padding:13px 22px; transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s,background .2s,color .2s; white-space:nowrap; text-decoration:none; }
.gdblog .pt-btn .material-symbols-outlined{ font-size:18px; }
.gdblog .pt-btn-primary{ background:var(--p); color:#06281a; box-shadow:0 8px 22px -8px rgba(19,236,128,.6); }
.gdblog .pt-btn-primary:hover{ background:var(--p-dark); transform:translateY(-2px); box-shadow:0 14px 30px -8px rgba(19,236,128,.7); }
.gdblog .pt-btn-ghost{ background:rgba(255,255,255,.85); border-color:var(--line); color:var(--green-700); }
.gdblog .pt-btn-ghost:hover{ background:#fff; transform:translateY(-2px); box-shadow:0 4px 20px -2px rgba(15,23,42,.06); }
.gdblog .pt-btn-on-dark{ background:#fff; color:#06281a; }
.gdblog .pt-btn-on-dark:hover{ background:var(--p); transform:translateY(-2px); }
.gdblog a{ color:inherit; }
.gdblog .bl-link{ color:var(--green-700); font-weight:700; text-decoration:underline; text-decoration-color:rgba(19,236,128,.4); text-underline-offset:2px; }
.gdblog .bl-link:hover{ color:var(--green); }
.gdblog .pt-reveal{ transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
html.pt-anim .gdblog .pt-reveal:not(.in){ opacity:0; transform:translateY(24px); }
.gdblog .pt-reveal.in{ opacity:1; transform:none; }
.gdblog .pt-reveal.d1{ transition-delay:.08s } .gdblog .pt-reveal.d2{ transition-delay:.16s } .gdblog .pt-reveal.d3{ transition-delay:.24s }

/* ============================================================================
   HUB: filter bar (search + category chips)
   ============================================================================ */
.gdblog .bl-filter{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; }
.gdblog .bl-search{ display:flex; align-items:center; gap:9px; flex:1 1 260px; max-width:380px; background:#fff; border:1px solid var(--line);
  border-radius:12px; padding:11px 15px; transition:border-color .2s, box-shadow .2s; }
.gdblog .bl-search:focus-within{ border-color:var(--green-line); box-shadow:0 0 0 3px rgba(19,236,128,.15); }
.gdblog .bl-search .material-symbols-outlined{ font-size:19px; color:var(--faint); }
.gdblog .bl-search input{ border:none; outline:none; background:transparent; font-family:inherit; font-size:14px; font-weight:600; color:var(--ink); width:100%; }
.gdblog .bl-search input::placeholder{ color:var(--faint); font-weight:500; }
.gdblog .bl-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.gdblog .bl-chip{ display:inline-flex; align-items:center; gap:6px; font-family:inherit; font-size:13px; font-weight:700; color:var(--body);
  background:#fff; border:1px solid var(--line); border-radius:100px; padding:9px 16px; cursor:pointer; transition:.2s; text-decoration:none; }
.gdblog .bl-chip:hover{ border-color:var(--green-line); color:var(--green-700); }
.gdblog .bl-chip.on{ background:var(--deep); border-color:var(--deep); color:#fff; }
.gdblog .bl-chip .n{ font-size:11px; font-weight:800; color:var(--faint); }
.gdblog .bl-chip.on .n{ color:var(--p); }
.gdblog .bl-empty{ border:1px dashed var(--line); border-radius:16px; padding:40px; text-align:center; color:var(--muted); font-weight:600; font-size:14.5px; }

/* ============================================================================
   HUB: featured + post cards
   ============================================================================ */
.gdblog .bl-cat{ display:inline-flex; align-items:center; font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--green-700); background:var(--green-soft); border:1px solid var(--green-line); border-radius:100px; padding:4px 11px; }
.gdblog .bl-featured{ display:grid; grid-template-columns:1fr; background:#fff; border:1px solid var(--line); border-radius:20px; overflow:hidden;
  text-decoration:none; box-shadow:0 2px 10px -4px rgba(15,23,42,.06); transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
@media (min-width:1024px){ .gdblog .bl-featured{ grid-template-columns:1.15fr 1fr; } }
.gdblog .bl-featured:hover{ transform:translateY(-3px); border-color:var(--green-line); box-shadow:0 18px 40px -16px rgba(15,23,42,.2); }
.gdblog .bl-featured .img{ position:relative; min-height:240px; background:var(--surface-3); }
.gdblog .bl-featured .img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.gdblog .bl-featured .txt{ padding:32px 34px; display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.gdblog .bl-featured h2{ font-size:24px; font-weight:800; color:var(--ink); line-height:1.25; letter-spacing:-.01em; }
.gdblog .bl-featured p{ font-size:14.5px; color:var(--body); line-height:1.65; }
.gdblog .bl-card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; height:100%;
  text-decoration:none; box-shadow:0 2px 10px -4px rgba(15,23,42,.06); transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.gdblog .bl-card:hover{ transform:translateY(-4px); border-color:var(--green-line); box-shadow:0 18px 40px -16px rgba(15,23,42,.2); }
.gdblog .bl-card .img{ position:relative; aspect-ratio:16/9; background:var(--surface-3); }
.gdblog .bl-card .img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.gdblog .bl-card .txt{ padding:20px 22px 22px; display:flex; flex-direction:column; align-items:flex-start; gap:10px; flex:1; }
.gdblog .bl-card h3{ font-size:16px; font-weight:800; color:var(--ink); line-height:1.35; }
.gdblog .bl-card p{ font-size:13.5px; color:var(--body); line-height:1.6; }
.gdblog .bl-meta{ display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; color:var(--muted); }
.gdblog .bl-meta .material-symbols-outlined{ font-size:15px; color:var(--faint); }
.gdblog .bl-card .go,.gdblog .bl-featured .go{ display:inline-flex; align-items:center; gap:6px; margin-top:auto; padding-top:6px; font-size:13px; font-weight:800; color:var(--green-700); }
.gdblog .bl-card .go .material-symbols-outlined,.gdblog .bl-featured .go .material-symbols-outlined{ font-size:16px; transition:transform .25s ease; }
.gdblog .bl-card:hover .go .material-symbols-outlined,.gdblog .bl-featured:hover .go .material-symbols-outlined{ transform:translateX(4px); }
.gdblog .bl-grid{ display:grid; grid-template-columns:1fr; gap:24px; }
@media (min-width:768px){ .gdblog .bl-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .gdblog .bl-grid{ grid-template-columns:repeat(3,1fr); } }

/* ---- pagination ---- */
.gdblog .bl-pages{ display:flex; align-items:center; justify-content:center; gap:8px; }
.gdblog .bl-page{ min-width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; padding:0 12px; border-radius:11px;
  font-size:13.5px; font-weight:800; color:var(--body); background:#fff; border:1px solid var(--line); text-decoration:none; transition:.2s; }
.gdblog .bl-page:hover{ border-color:var(--green-line); color:var(--green-700); }
.gdblog .bl-page.on{ background:var(--deep); border-color:var(--deep); color:#fff; }
.gdblog .bl-page .material-symbols-outlined{ font-size:17px; }

/* ---- subscribe band ---- */
.gdblog .bl-sub{ background:var(--deep); border-radius:24px; padding:40px; color:#fff; position:relative; overflow:hidden; }
.gdblog .bl-sub::before{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 85% 10%,rgba(19,236,128,.22),transparent 45%); }
.gdblog .bl-sub > *{ position:relative; }
.gdblog .bl-sub h2{ font-size:25px; font-weight:800; letter-spacing:-.01em; line-height:1.25; }
.gdblog .bl-sub p{ font-size:14.5px; color:rgba(255,255,255,.75); line-height:1.6; }
/* Gravity Forms (id 2) inside the dark subscribe band — tame the default
   markup: hide the GF heading (the band already has its own h2) and the
   anti-spam honeypot, stack fields, and give the button the pt-btn look. */
.gdblog .bl-sub .gform_wrapper{ margin:0; }
.gdblog .bl-sub .gform_heading,
.gdblog .bl-sub .gform_validation_container,
.gdblog .bl-sub .gfield--type-honeypot{ display:none !important; }
.gdblog .bl-sub form{ display:grid; gap:14px; margin:0; }
.gdblog .bl-sub .gform_fields{ display:grid; gap:14px; grid-template-columns:1fr; }
.gdblog .bl-sub .gfield_label{ font-size:12.5px; font-weight:700; color:rgba(255,255,255,.75); margin-bottom:6px; display:block; }
.gdblog .bl-sub .hidden_label .gfield_label,
.gdblog .bl-sub .gfield_visibility_hidden{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.gdblog .bl-sub .gfield_required{ color:var(--p); }
.gdblog .bl-sub input,
.gdblog .bl-sub textarea{ width:100%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22); border-radius:12px;
  padding:13px 16px; font-family:inherit; font-size:14px; font-weight:600; color:#fff; outline:none; transition:border-color .2s; }
.gdblog .bl-sub input::placeholder,
.gdblog .bl-sub textarea::placeholder{ color:rgba(255,255,255,.45); }
.gdblog .bl-sub input:focus,
.gdblog .bl-sub textarea:focus{ border-color:var(--p); }
.gdblog .bl-sub .gform_footer{ margin:0; padding:0; }
.gdblog .bl-sub .gform_footer button,
.gdblog .bl-sub .gform_footer input[type="submit"]{ display:inline-flex; align-items:center; justify-content:center;
  background:var(--p); color:var(--deep); border:none; border-radius:12px; padding:13px 26px; width:auto;
  font-family:inherit; font-weight:700; font-size:14.5px; line-height:1; cursor:pointer;
  box-shadow:0 8px 22px -8px rgba(19,236,128,.6); transition:transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s, background .2s; }
.gdblog .bl-sub .gform_footer button:hover,
.gdblog .bl-sub .gform_footer input[type="submit"]:hover{ background:var(--p-dark); transform:translateY(-2px); box-shadow:0 14px 30px -8px rgba(19,236,128,.7); }
.gdblog .bl-sub .gfield_validation_message,
.gdblog .bl-sub .validation_message{ color:#fecaca; font-size:12.5px; margin-top:6px; font-weight:600; }
.gdblog .bl-sub .gform_confirmation_message{ color:#fff; font-size:15px; font-weight:600; }

/* ============================================================================
   SINGLE: article layout + TOC
   ============================================================================ */
.gdblog .bl-hero-img{ position:relative; border-radius:20px; overflow:hidden; aspect-ratio:21/9; background:var(--surface-3); border:1px solid var(--line); }
.gdblog .bl-hero-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.gdblog .bl-byline{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 20px; font-size:13px; font-weight:700; color:var(--muted); }
.gdblog .bl-byline span{ display:inline-flex; align-items:center; gap:7px; }
.gdblog .bl-byline .material-symbols-outlined{ font-size:17px; color:var(--faint); }

/* TOC card (sticky on desktop) */
.gdblog .bl-toc{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px; }
.gdblog .bl-toc .t{ display:flex; align-items:center; gap:8px; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; }
.gdblog .bl-toc .t .material-symbols-outlined{ font-size:16px; color:var(--green); }
.gdblog .bl-toc ol{ display:flex; flex-direction:column; counter-reset:toc; }
.gdblog .bl-toc a{ position:relative; display:flex; gap:10px; padding:8px 10px 8px 12px; border-left:2px solid var(--line-soft); font-size:13px; font-weight:600;
  color:var(--body); line-height:1.4; text-decoration:none; transition:.2s; counter-increment:toc; }
.gdblog .bl-toc a::before{ content:counter(toc,decimal-leading-zero); font-size:10.5px; font-weight:800; color:var(--faint); margin-top:2px; font-variant-numeric:tabular-nums; }
.gdblog .bl-toc a:hover{ color:var(--green-700); border-left-color:var(--green-line); }
.gdblog .bl-toc a.on{ color:var(--green-700); border-left-color:var(--p); background:var(--green-soft); }
.gdblog .bl-toc a.on::before{ color:var(--green); }
.gdblog .bl-toc-progress{ height:3px; border-radius:100px; background:var(--line-soft); margin-bottom:16px; overflow:hidden; }
.gdblog .bl-toc-progress i{ display:block; height:100%; width:0%; background:var(--p); }

/* article typography */
.gdblog .bl-article{ background:#fff; border:1px solid var(--line); border-radius:20px; padding:36px 34px; }
@media (min-width:768px){ .gdblog .bl-article{ padding:48px 56px; } }
.gdblog .bl-article > * + *{ margin-top:18px; }
.gdblog .bl-article p{ font-size:16px; color:var(--body); line-height:1.75; text-wrap:pretty; }
.gdblog .bl-article h2{ font-size:26px; font-weight:800; color:var(--ink); letter-spacing:-.015em; line-height:1.25; margin-top:44px; scroll-margin-top:96px; }
.gdblog .bl-article h2:first-child{ margin-top:0; }
.gdblog .bl-article h3{ font-size:19px; font-weight:800; color:var(--ink); margin-top:30px; }
/* Lists stay block-level: editors nest lists and mix <strong> labels with body
   text inside one <li>, so the item must never become a flex row (that lays the
   label, the text and the nested list out as side-by-side columns). Markers are
   drawn with an absolutely positioned ::before instead. */
.gdblog .bl-article ul,.gdblog .bl-article ol{ padding-left:4px; }
.gdblog .bl-article li{ font-size:15.5px; color:var(--body); line-height:1.7; }
.gdblog .bl-article li + li{ margin-top:10px; }
.gdblog .bl-article li > ul,.gdblog .bl-article li > ol{ margin-top:10px; }
.gdblog .bl-article ul{ list-style:none; }
.gdblog .bl-article ul > li{ position:relative; padding-left:30px; }
.gdblog .bl-article ul > li::before{ content:"check_circle"; font-family:'Material Symbols Outlined'; font-size:19px;
  color:var(--green); position:absolute; left:0; top:0; line-height:1.7; }
/* nested bullets get a quieter marker so deep lists don't read as a wall of ticks */
.gdblog .bl-article li ul > li{ padding-left:20px; }
.gdblog .bl-article li ul > li::before{ content:""; width:6px; height:6px; border-radius:50%;
  background:var(--green-line); border:1px solid var(--green); top:.65em; }
.gdblog .bl-article ol{ list-style:decimal; padding-left:24px; }
.gdblog .bl-article ol > li{ padding-left:6px; }
.gdblog .bl-article ol > li::marker{ font-weight:800; color:var(--ink); }
.gdblog .bl-article li ol{ list-style:lower-alpha; padding-left:20px; }
/* editors leave a trailing <br> before nested lists / at the end of an item */
.gdblog .bl-article li > br:last-child{ display:none; }
.gdblog .bl-article li > br:has(+ ul),.gdblog .bl-article li > br:has(+ ol){ display:none; }
.gdblog .bl-article strong{ color:var(--ink); font-weight:800; }
.gdblog .bl-article a{ color:var(--green-700); font-weight:700; text-decoration:underline; text-decoration-color:rgba(19,236,128,.4); text-underline-offset:2px; }
.gdblog .bl-article a:hover{ color:var(--green); }
.gdblog .bl-article table{ width:100%; border-collapse:collapse; font-size:14px; line-height:1.55; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.gdblog .bl-article thead th{ text-align:left; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  background:var(--surface-2); padding:12px 16px; border-bottom:1px solid var(--line); }
.gdblog .bl-article tbody td{ padding:14px 16px; border-bottom:1px solid var(--line-soft); color:var(--body); vertical-align:top; }
.gdblog .bl-article tbody tr:last-child td{ border-bottom:none; }
.gdblog .bl-article tbody td:first-child{ font-weight:800; color:var(--ink); }
.gdblog .bl-table-wrap{ overflow-x:auto; border-radius:12px; }
.gdblog .bl-callout{ display:flex; gap:14px; background:var(--green-soft); border:1px solid var(--green-line); border-radius:14px; padding:20px 22px; }
.gdblog .bl-callout .material-symbols-outlined{ font-size:21px; color:var(--green); margin-top:2px; }
.gdblog .bl-callout p{ font-size:14.5px; }

/* share + related */
.gdblog .bl-share{ display:flex; align-items:center; gap:10px; }
.gdblog .bl-share a{ width:40px; height:40px; border-radius:11px; display:inline-flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--line); color:var(--body); transition:.2s; text-decoration:none; font-size:13px; font-weight:800; }
.gdblog .bl-share a:hover{ border-color:var(--green-line); color:var(--green-700); transform:translateY(-2px); }