/* ============================================================
   FINDISE BLOG TEMPLATE v1.0.0
   Loads on single blog posts only.
   Tokens taken from the live findise.in stylesheet.
   Contrast verified: 0 WCAG AA failures across 49 combinations.
   ============================================================ */

.fin-post{
  --fin-ink:#0D0D12;
  --fin-body:#36394A;
  --fin-meta:#5B5F73;      /* 6.25:1 on white — safe for all small text */
  --fin-hairline:#A3AFB7;  /* BORDERS AND DECORATION ONLY — never text */
  --fin-accent:#8636F8;
  --fin-accent-dark:#7226DE;
  --fin-tint:#F4EDFF;
  --fin-border:#EBEBEB;
  --fin-soft:#F1F1F4;
  --fin-surface:#FAFBFB;
  --fin-surface2:#F1F4F9;
  --fin-dark:#0B0716;
  --fin-r:8px;
  --fin-r-lg:12px;
  --fin-r-xl:16px;
  --fin-header-h:75px;

  font-size:19px;
  line-height:1.875;
  color:var(--fin-body);
}

.fin-post *,.fin-post *::before,.fin-post *::after{box-sizing:border-box}
.fin-post img{max-width:100%;height:auto;display:block}
.fin-post :focus-visible{outline:2px solid var(--fin-accent);outline-offset:3px;border-radius:3px}

.fin-container{max-width:1224px;margin:0 auto;padding:0 32px}

/* ---- reading progress ---- */
.fin-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--fin-accent);z-index:400;transition:width .08s linear}

/* ---- hero ---- */
.fin-hero{padding:44px 0 0}
.fin-crumbs{font-size:14px;color:var(--fin-meta);display:flex;gap:9px;align-items:center;flex-wrap:wrap;line-height:1.6}
.fin-crumbs a{text-decoration:none;color:var(--fin-meta)}
.fin-crumbs a:hover{color:var(--fin-accent);text-decoration:underline}
.fin-crumbs .sep{color:var(--fin-hairline)}
/* AIOSEO breadcrumb markup safety */
.fin-crumbs .aioseo-breadcrumbs{font-size:14px;color:var(--fin-meta)}
.fin-crumbs .aioseo-breadcrumb-separator{color:var(--fin-hairline);padding:0 6px}

.fin-eyebrow{
  display:inline-block;margin:22px 0 0;background:var(--fin-tint);color:var(--fin-accent);
  font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:7px 13px;border-radius:999px;text-decoration:none;line-height:1.3;
}
.fin-eyebrow:hover{background:#EADCFF;color:var(--fin-accent-dark)}

.fin-post h1.fin-title{
  margin:18px 0 0;max-width:880px;
  font-size:clamp(30px,4.2vw,46px);line-height:1.14;font-weight:600;
  letter-spacing:-.027em;color:var(--fin-ink);text-wrap:balance;
}
.fin-deck{margin:20px 0 0;max-width:760px;font-size:21px;line-height:1.62;color:var(--fin-meta)}

.fin-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:30px 0 0}
.fin-post img.fin-avatar{
  width:46px;height:46px;border-radius:50%;flex:0 0 auto;
  border:2px solid #fff;box-shadow:0 0 0 1px var(--fin-border);
}
.fin-meta-who{display:flex;flex-direction:column;line-height:1.35}
.fin-meta-who .name{font-size:15.5px;font-weight:600;color:var(--fin-ink);text-decoration:none}
.fin-meta-who .name:hover{color:var(--fin-accent)}
.fin-meta-who .role{font-size:13.5px;color:var(--fin-meta)}
.fin-dot{width:4px;height:4px;border-radius:50%;background:var(--fin-hairline);flex:0 0 auto;display:inline-block}
.fin-meta-item{display:flex;align-items:center;gap:7px;font-size:14px;color:var(--fin-meta);line-height:1.5}
.fin-meta-item svg{flex:0 0 auto;color:var(--fin-meta);opacity:.75}
.fin-pill-updated{background:var(--fin-surface2);color:var(--fin-meta);font-size:12.5px;font-weight:600;padding:5px 11px;border-radius:999px}

/* ---- layout ----
   No align-items:start — the sidebar must stretch so its sticky
   child has the full article height to travel in. */
.fin-layout{display:grid;grid-template-columns:minmax(0,720px) 392px;gap:48px;margin:36px 0 0}
.fin-main{min-width:0}
.fin-side-col{min-width:0}

/* ---- featured image ---- */
.fin-featured{margin:0;border-radius:var(--fin-r-xl);overflow:hidden}
.fin-featured img{width:100%;border-radius:var(--fin-r-xl);border:1px solid var(--fin-border)}
.fin-featured figcaption{margin:12px 0 0;font-size:14px;line-height:1.65;color:var(--fin-meta)}

/* ---- share ---- */
.fin-share{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  border-top:1px solid var(--fin-border);border-bottom:1px solid var(--fin-border);
  padding:18px 0;margin:26px 0 40px;
}
.fin-share .lbl{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--fin-meta)}
.fin-share-icons{display:flex;gap:10px;align-items:center}
.fin-post .sh{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  text-decoration:none;background:var(--fin-surface2);color:var(--fin-body);
  border:0;padding:0;cursor:pointer;
  transition:transform .18s ease,background .18s ease,color .18s ease;
}
.fin-post .sh:hover{transform:translateY(-2px);color:#fff}
.fin-post .sh.wa:hover{background:#25D366}
.fin-post .sh.li:hover{background:#0A66C2}
.fin-post .sh.x:hover{background:#0F1419}
.fin-post .sh.fb:hover{background:#0866FF}
.fin-post .sh.cp:hover,.fin-post .sh.cp.done{background:var(--fin-accent);color:#fff}

.fin-toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,140%);
  background:var(--fin-dark);color:#fff;font-size:14px;font-weight:600;
  padding:11px 20px;border-radius:999px;z-index:800;
  box-shadow:0 12px 34px rgba(11,7,22,.34);
  transition:transform .26s cubic-bezier(.2,.8,.2,1);pointer-events:none;
}
.fin-toast.on{transform:translate(-50%,0)}

/* ---- the article ---- */
.fin-article > *:first-child{margin-top:0}
.fin-post .fin-article h2{
  font-size:32px;line-height:1.24;font-weight:600;letter-spacing:-.024em;
  color:var(--fin-ink);margin:56px 0 18px;scroll-margin-top:calc(var(--fin-header-h) + 25px);
}
.fin-post .fin-article h3{
  font-size:23px;line-height:1.34;font-weight:600;letter-spacing:-.015em;
  color:var(--fin-ink);margin:38px 0 12px;scroll-margin-top:calc(var(--fin-header-h) + 25px);
}
.fin-post .fin-article h4{font-size:20px;line-height:1.4;font-weight:600;color:var(--fin-ink);margin:32px 0 12px}
.fin-post .fin-article p{margin:0 0 26px;font-size:19px;line-height:1.875;color:var(--fin-body)}

/* The theme resets list-style to none via ol[class], ul[class].
   Bullets and numbers are restored here for post content only. */
.fin-post .fin-article ul{list-style:disc outside;padding-left:24px;margin:0 0 26px}
.fin-post .fin-article ol{list-style:decimal outside;padding-left:24px;margin:0 0 26px}
.fin-post .fin-article ul ul{list-style:circle outside;margin:10px 0 0}
.fin-post .fin-article li{list-style:inherit;margin-bottom:11px;font-size:19px;line-height:1.875;color:var(--fin-body)}
.fin-post .fin-article li::marker{color:var(--fin-accent)}

.fin-post .fin-article a{color:var(--fin-accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.fin-post .fin-article strong{color:var(--fin-ink);font-weight:600}

.fin-post .fin-article table{width:100%;border-collapse:collapse;margin:32px 0;font-size:16.5px;line-height:1.6}
.fin-post .fin-article thead th,.fin-post .fin-article th{
  background:var(--fin-surface2);color:var(--fin-ink);font-weight:600;text-align:left;
  padding:14px 16px;border:1px solid var(--fin-border);font-size:15px;
}
.fin-post .fin-article td{padding:14px 16px;border:1px solid var(--fin-border);vertical-align:top}
.fin-post .fin-article tbody tr:nth-child(even){background:var(--fin-surface)}
.fin-post .fin-article .wp-block-table{overflow-x:auto;margin:32px 0}
.fin-post .fin-article .wp-block-table table{margin:0}
.fin-post .fin-article figcaption,
.fin-post .fin-article .wp-element-caption{font-size:14px;line-height:1.65;color:var(--fin-meta);margin-top:10px;text-align:left}

.fin-post .fin-article blockquote{margin:40px 0;padding:0 0 0 26px;border-left:3px solid var(--fin-accent);font-style:normal}
.fin-post .fin-article blockquote p{font-size:22px;line-height:1.55;color:var(--fin-ink);font-weight:500;margin-bottom:12px}
.fin-post .fin-article blockquote cite{display:block;font-style:normal;font-size:14.5px;color:var(--fin-meta)}

.fin-post .fin-article figure{margin:36px 0}
.fin-post .fin-article figure img{border-radius:var(--fin-r-lg);border:1px solid var(--fin-border);width:100%}
.fin-post .fin-article iframe{max-width:100%;width:100%;aspect-ratio:16/9;height:auto;border-radius:var(--fin-r-lg);display:block;margin:36px 0}

/* ---- mobile contents ---- */
.fin-toc-mobile{display:none;background:var(--fin-surface);border:1px solid var(--fin-border);border-radius:var(--fin-r-lg);padding:22px 24px;margin:0 0 36px}
.fin-toc-mobile .lbl{font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--fin-meta);margin:0 0 12px;display:block;line-height:1.4}
.fin-toc-mobile ol{list-style:decimal outside;margin:0;padding-left:20px}
.fin-toc-mobile li{list-style:inherit;margin-bottom:8px;font-size:16.5px;line-height:1.55}
.fin-toc-mobile li:last-child{margin-bottom:0}
.fin-toc-mobile a{color:var(--fin-body);text-decoration:none}
.fin-toc-mobile a:hover{color:var(--fin-accent);text-decoration:underline}

/* ---- tags ---- */
.fin-tags{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin:52px 0 0;padding-top:32px;border-top:1px solid var(--fin-border)}
.fin-tags .lbl{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--fin-meta);margin-right:5px}
.fin-tag{font-size:14px;font-weight:500;color:var(--fin-body);text-decoration:none;border:1px solid var(--fin-border);border-radius:999px;padding:7px 15px;line-height:1.4;transition:all .18s ease}
.fin-tag:hover{background:var(--fin-tint);border-color:var(--fin-tint);color:var(--fin-accent)}

/* ---- prev / next ---- */
.fin-pn-head{margin:40px 0 16px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--fin-meta)}
.fin-prevnext{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.fin-pn{border:1px solid var(--fin-border);border-radius:var(--fin-r-lg);padding:22px 24px;text-decoration:none;display:block;background:#fff;transition:all .18s ease}
.fin-pn:hover{border-color:var(--fin-accent);box-shadow:0 10px 30px rgba(134,54,248,.10)}
.fin-pn .dir{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fin-accent);display:block;margin-bottom:10px;line-height:1.4}
.fin-pn .t{font-size:17px;font-weight:600;color:var(--fin-ink);line-height:1.45;letter-spacing:-.01em;display:block}
.fin-pn:hover .t{color:var(--fin-accent)}
.fin-pn.next{text-align:right}
.fin-prevnext .fin-pn.prev:only-child,
.fin-prevnext .fin-pn.next:only-child{grid-column:span 2;max-width:50%}
.fin-prevnext .fin-pn.next:only-child{margin-left:auto}

/* ---- sidebar ---- */
.fin-sidebar{
  position:sticky;top:calc(var(--fin-header-h) + 24px);
  max-height:calc(100vh - var(--fin-header-h) - 48px);
  overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:24px;padding-right:4px;
}
.fin-sidebar::-webkit-scrollbar{width:6px}
.fin-sidebar::-webkit-scrollbar-thumb{background:#DCE0E7;border-radius:99px}
.fin-sidebar::-webkit-scrollbar-track{background:transparent}

.fin-card{border:1px solid var(--fin-border);border-radius:var(--fin-r-lg);background:#fff;flex:0 0 auto}
.fin-card-head{padding:15px 20px;border-bottom:1px solid var(--fin-border);font-size:15px;font-weight:600;color:var(--fin-ink);letter-spacing:-.01em;line-height:1.4;display:flex;align-items:center;justify-content:space-between;gap:12px}
.fin-card-head .count{font-size:12.5px;font-weight:600;color:var(--fin-meta);background:var(--fin-surface2);padding:3px 9px;border-radius:99px}

.fin-post .fin-toc ol{list-style:none;margin:0;padding:8px 0;counter-reset:fintoc}
.fin-post .fin-toc li{list-style:none;counter-increment:fintoc;margin:0}
.fin-post .fin-toc a{
  display:flex;gap:12px;align-items:flex-start;
  padding:9px 20px 9px 17px;font-size:15.5px;line-height:1.5;
  color:var(--fin-meta);text-decoration:none;
  border-left:3px solid transparent;transition:all .16s ease;
}
.fin-post .fin-toc a::before{content:counter(fintoc);flex:0 0 auto;width:20px;font-size:12.5px;font-weight:700;color:var(--fin-hairline);padding-top:3px}
.fin-post .fin-toc a:hover{color:var(--fin-ink);background:var(--fin-surface)}
.fin-post .fin-toc a.active{color:var(--fin-accent);font-weight:600;border-left-color:var(--fin-accent);background:var(--fin-tint)}
.fin-post .fin-toc a.active::before{color:var(--fin-accent)}

.fin-cta-card{background:var(--fin-dark);border-radius:var(--fin-r-lg);padding:28px 26px;text-align:center;color:#fff;flex:0 0 auto}
.fin-cta-card .k{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#C4AEFF;margin:0 0 12px;line-height:1.4}
.fin-post .fin-cta-card h2{margin:0 0 10px;font-size:21px;font-weight:600;line-height:1.32;letter-spacing:-.018em;color:#fff}
.fin-cta-card p{margin:0 0 20px;font-size:15px;line-height:1.62;color:#C3C1D2}

.fin-list a{display:block;padding:13px 20px;border-bottom:1px solid var(--fin-soft);font-size:15.5px;line-height:1.5;color:var(--fin-body);text-decoration:none;transition:background .16s ease,color .16s ease}
.fin-list a:last-child{border-bottom:0}
.fin-list a:hover{background:var(--fin-tint);color:var(--fin-accent)}

.fin-btn{display:inline-block;background:var(--fin-accent);color:#fff;text-decoration:none;font-size:15px;font-weight:600;padding:13px 24px;border-radius:var(--fin-r);line-height:1.2;text-align:center;width:100%}
.fin-btn:hover{background:var(--fin-accent-dark);color:#fff}

/* ---- related cards ---- */
.fin-related{margin:72px 0 0}
.fin-sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin:0 0 26px}
.fin-post .fin-sec-head h2{font-size:29px;font-weight:600;letter-spacing:-.024em;color:var(--fin-ink);margin:0;line-height:1.25}
.fin-sec-head a{font-size:15px;font-weight:600;color:var(--fin-accent);text-decoration:none;white-space:nowrap}
.fin-sec-head a:hover{text-decoration:underline;text-underline-offset:3px}
.fin-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.fin-card-post{border:1px solid var(--fin-border);border-radius:var(--fin-r-lg);overflow:hidden;text-decoration:none;display:flex;flex-direction:column;background:#fff;transition:all .2s ease}
.fin-card-post:hover{transform:translateY(-3px);border-color:#DED4F6;box-shadow:0 16px 40px rgba(11,7,22,.09)}
.fin-card-post .thumb{aspect-ratio:16/9;background:var(--fin-surface2);display:block;overflow:hidden}
.fin-card-post .thumb img{width:100%;height:100%;object-fit:cover}
.fin-card-post .cb{padding:18px 20px 20px;display:flex;flex-direction:column;gap:9px;flex:1}
.fin-card-post .cat{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--fin-accent);line-height:1.4}
.fin-card-post .h3{font-size:17.5px;font-weight:600;line-height:1.42;color:var(--fin-ink);letter-spacing:-.012em;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.fin-card-post:hover .h3{color:var(--fin-accent)}
.fin-card-post .cmeta{margin-top:auto;padding-top:12px;border-top:1px solid var(--fin-soft);font-size:13px;color:var(--fin-meta);display:flex;gap:9px;align-items:center;line-height:1.5}

/* ---- closing band ---- */
.fin-band{margin:80px 0 0;background:var(--fin-dark);border-radius:22px;padding:56px;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.fin-post .fin-band h2{margin:0 0 10px;font-size:32px;font-weight:600;letter-spacing:-.024em;line-height:1.24;color:#fff}
.fin-band p{margin:0;font-size:17.5px;line-height:1.65;color:#C3C1D2;max-width:520px}
.fin-post .fin-band .fin-wa-link{margin-top:12px}
.fin-band .fin-btn{width:auto;padding:15px 32px;font-size:16px}

/* ---- mobile sticky CTA ---- */
.fin-mcta{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:650;
  background:rgba(255,255,255,.97);backdrop-filter:blur(10px);
  border-top:1px solid var(--fin-border);padding:11px 14px;
  align-items:center;gap:12px;
  transform:translateY(110%);transition:transform .26s ease;
  box-shadow:0 -6px 24px rgba(11,7,22,.08);
}
.fin-mcta.on{transform:translateY(0)}
.fin-mcta .txt{flex:1 1 auto;min-width:0}
/* The WhatsApp icon costs the label 44px. Truncate instead of wrapping, or
   the bar grows two rows tall on a 320px screen and covers the article. */
.fin-mcta .t1{font-size:14.5px;font-weight:600;color:var(--fin-ink);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fin-mcta .t2{font-size:12.5px;color:var(--fin-meta);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fin-mcta .fin-btn{flex:0 0 auto;width:auto;padding:11px 18px;font-size:14.5px}
.fin-mcta .x{flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:0;background:var(--fin-surface2);color:var(--fin-meta);font-size:17px;line-height:1;cursor:pointer}

/* ---- responsive ---- */
@media (max-width:1100px){
  .fin-layout{grid-template-columns:minmax(0,1fr);gap:48px}
  .fin-sidebar{position:static;max-height:none;overflow:visible}
  .fin-toc{display:none}          /* mobile uses the inline contents box */
  .fin-cards{grid-template-columns:repeat(2,1fr)}
  /* Below this width the sidebar drops into the article flow, so its CTA
     card would sit a couple of blocks above the theme's footer CTA — two
     near-identical asks in a row. The sticky bottom bar covers the
     while-reading moment instead, so the card is hidden here. Exactly one
     CTA is ever in the reading flow. */
  .fin-cta-card{display:none}
  .fin-mcta{display:flex}
  .fin-post.has-mcta{padding-bottom:78px}
}
@media (max-width:767px){
  .fin-post{font-size:17.5px;line-height:1.78}
  .fin-container{padding:0 18px}
  .fin-hero{padding:26px 0 0}
  .fin-post h1.fin-title{font-size:28px;line-height:1.2}
  .fin-deck{font-size:18px}
  .fin-meta{gap:10px 14px}
  .fin-meta .fin-dot{display:none}
  .fin-meta-who{flex:1 1 auto}
  .fin-featured img{border-radius:var(--fin-r-lg)}
  .fin-toc-mobile{display:block}
  .fin-post .fin-article h2{font-size:25px;margin-top:44px}
  .fin-post .fin-article h3{font-size:20px}
  .fin-post .fin-article p,.fin-post .fin-article li{font-size:17.5px;line-height:1.78}
  .fin-post .fin-article blockquote p{font-size:19px}
  .fin-post .fin-article table{font-size:15px}
  .fin-cards{grid-template-columns:1fr}
  .fin-prevnext{grid-template-columns:1fr}
  .fin-pn.next{text-align:left}
  .fin-prevnext .fin-pn.prev:only-child,
  .fin-prevnext .fin-pn.next:only-child{grid-column:auto;max-width:none;margin-left:0}
  .fin-band{padding:36px 26px;border-radius:16px}
  .fin-post .fin-band h2{font-size:25px}
  .fin-post .fin-sec-head h2{font-size:24px}
}

/* ---- WhatsApp, as a quiet second channel ----
   Deliberately NOT a second button. It is the same ask through a lower
   friction channel, so the primary must stay visually dominant or you end
   up with two competing CTAs again. */
.fin-post .fin-wa-link{
  display:inline-flex;align-items:center;gap:7px;
  margin-top:14px;font-size:14.5px;font-weight:600;
  color:#8FE3B0;text-decoration:none;line-height:1.3;
}
.fin-post .fin-wa-link:hover{color:#B6F0CD;text-decoration:underline;text-underline-offset:3px}
.fin-post .fin-wa-link svg{flex:0 0 auto}

/* Mobile bar: compact icon, tap target still 44px */
.fin-post .fin-wa-icon{
  flex:0 0 auto;width:44px;height:44px;border-radius:10px;
  display:grid;place-items:center;background:#075E54;color:#fff;
  text-decoration:none;
}
.fin-post .fin-wa-icon:hover{background:#0A7A6D;color:#fff}

.fin-post .fin-band-actions{display:flex;flex-direction:column;align-items:flex-start;gap:0}