/* ====================================================================
   Finclar · shared site stylesheet
   Used by all multi-page subpages (audit, gst, vcfo, nri, etc.)
   Income Tax e-Portal aesthetic — keep var names consistent with
   index.html / pricing.html so layout fragments are interchangeable.
   ==================================================================== */

:root{
  --saffron:#FF9933;
  --green:#138808;
  --navy:#0B3B8C;
  --navy-dark:#072766;
  --navy-deep:#041A4C;
  --blue:#1F4FB7;
  --blue-soft:#E8EFFB;
  --teal:#0E7C7B;
  --orange:#FF6B00;
  --orange-dark:#D95400;
  --gold:#FFB400;
  --ink:#1A2233;
  --ink-2:#384154;
  --muted:#6B7587;
  --line:#D9DEE8;
  --line-soft:#E9ECF3;
  --bg:#F4F6FB;
  --surface:#FFFFFF;
  --surface-2:#F8FAFD;
  --success:#0E8A4F;
  --danger:#C0392B;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --head:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Monaco,Consolas,monospace;
  --shadow-sm:0 1px 3px rgba(11,59,140,0.04),0 1px 2px rgba(0,0,0,0.02);
  --shadow:0 4px 16px rgba(11,59,140,0.06),0 2px 4px rgba(0,0,0,0.03);
  --shadow-lg:0 20px 48px rgba(11,59,140,0.10),0 8px 16px rgba(0,0,0,0.04);
}

/* ===== Dark mode — three-state: light / dark / OS-default ========
   - data-theme="dark" on <html>  → force dark theme
   - data-theme="light" on <html> → force light theme
   - data-theme missing/empty/"auto" → follow OS prefers-color-scheme
   Pages with extensive inline <style> blocks (index.html, toolkit.html,
   pricing.html, compliance-calendar.html, client/index.html,
   portal-tour.html) keep their light theme — finclar-tag.js skips
   the toggle there. */

/* OS dark-mode default — applies when no explicit data-theme is set.
   This eliminates flash-of-light-theme for visitors who prefer dark
   at OS level (since site.css loads before finclar-tag.js executes). */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --navy:#6B9DFF;
    --navy-dark:#4A7FDD;
    --navy-deep:#3261C0;
    --blue:#5C8AE0;
    --blue-soft:#1A2738;
    --teal:#22C1BD;
    --orange:#FF8A33;
    --orange-dark:#E37020;
    --gold:#FFCB47;
    --ink:#E8EBF2;
    --ink-2:#B8C0D0;
    --muted:#7E8AA0;
    --line:#2A3447;
    --line-soft:#1F2738;
    --bg:#0E1422;
    --surface:#161E2E;
    --surface-2:#1A2334;
    --success:#22C674;
    --danger:#F36B5C;
    --shadow-sm:0 1px 3px rgba(0,0,0,0.4),0 1px 2px rgba(0,0,0,0.3);
    --shadow:0 4px 16px rgba(0,0,0,0.4),0 2px 4px rgba(0,0,0,0.25);
    --shadow-lg:0 20px 48px rgba(0,0,0,0.55),0 8px 16px rgba(0,0,0,0.3);
  }
}

/* Explicit user choice via [data-theme="dark"] — overrides OS preference */
:root[data-theme="dark"]{
  --navy:#6B9DFF;
  --navy-dark:#4A7FDD;
  --navy-deep:#3261C0;
  --blue:#5C8AE0;
  --blue-soft:#1A2738;
  --teal:#22C1BD;
  --orange:#FF8A33;
  --orange-dark:#E37020;
  --gold:#FFCB47;
  --ink:#E8EBF2;
  --ink-2:#B8C0D0;
  --muted:#7E8AA0;
  --line:#2A3447;
  --line-soft:#1F2738;
  --bg:#0E1422;
  --surface:#161E2E;
  --surface-2:#1A2334;
  --success:#22C674;
  --danger:#F36B5C;
  --shadow-sm:0 1px 3px rgba(0,0,0,0.4),0 1px 2px rgba(0,0,0,0.3);
  --shadow:0 4px 16px rgba(0,0,0,0.4),0 2px 4px rgba(0,0,0,0.25);
  --shadow-lg:0 20px 48px rgba(0,0,0,0.55),0 8px 16px rgba(0,0,0,0.3);
}

/* Dark-mode-specific tweaks: invert default white backgrounds on
   common cards / surfaces that use literal #fff. */
:root[data-theme="dark"] body{background:var(--bg);color:var(--ink)}
:root[data-theme="dark"] .utility-bar,
:root[data-theme="dark"] .site-header,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .quick-tile,
:root[data-theme="dark"] .related-card,
:root[data-theme="dark"] .post-card,
:root[data-theme="dark"] .ph-card,
:root[data-theme="dark"] .faq-list,
:root[data-theme="dark"] .err-links,
:root[data-theme="dark"] .info-card,
:root[data-theme="dark"] .case-card,
:root[data-theme="dark"] .case-row,
:root[data-theme="dark"] .auth-step,
:root[data-theme="dark"] .feature,
:root[data-theme="dark"] .stack-pill,
:root[data-theme="dark"] .pricing-card,
:root[data-theme="dark"] .tab-card,
:root[data-theme="dark"] .feat-pill,
:root[data-theme="dark"] .brief-card,
:root[data-theme="dark"] .article-prose .callout,
:root[data-theme="dark"] .article-prose code,
:root[data-theme="dark"] .ix-toc,
:root[data-theme="dark"] .ix-tool-cta,
:root[data-theme="dark"] .ix-nav-card,
:root[data-theme="dark"] .author-bio,
:root[data-theme="dark"] .release,
:root[data-theme="dark"] .topic-cluster{background:var(--surface) !important;color:var(--ink)}
:root[data-theme="dark"] .article-prose pre{background:#0a0f1c !important;color:#e4e4e7}
:root[data-theme="dark"] .related-card .label{color:var(--orange)}
:root[data-theme="dark"] .article-prose a{color:var(--orange)}
:root[data-theme="dark"] .article-prose th{background:var(--navy);color:#fff}
:root[data-theme="dark"] .ph-card.featured{background:linear-gradient(135deg,var(--surface-2),var(--surface)) !important}
:root[data-theme="dark"] img{filter:brightness(.95) contrast(1.02)}
:root[data-theme="dark"] .tricolor{opacity:0.75}

/* The dark-mode toggle button itself */
.cm-darkmode-btn{appearance:none;background:transparent;border:1px solid currentColor;color:var(--ink-2);font:inherit;font-size:11.5px;padding:3px 9px;border-radius:14px;cursor:pointer;transition:all .15s;margin-left:8px;font-family:inherit;line-height:1.2}
.cm-darkmode-btn:hover{background:var(--ink-2);color:var(--bg)}
:root[data-theme="dark"] .cm-darkmode-btn{color:var(--gold);border-color:var(--gold)}
:root[data-theme="dark"] .cm-darkmode-btn:hover{background:var(--gold);color:var(--bg)}
@media (max-width:760px){.cm-darkmode-btn{font-size:11px;padding:2px 7px}}
@media print{.cm-darkmode-btn{display:none !important}}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"kern","ss01","cv11";letter-spacing:-0.003em;min-height:100vh;overflow-x:hidden}
a{color:var(--navy);text-decoration:none;transition:color .15s}
a:hover{color:var(--orange)}
button{font-family:inherit;cursor:pointer;border:none;background:none}
img{max-width:100%;display:block}
h1,h2,h3,h4,h5,h6{font-family:var(--head);font-weight:600;color:var(--ink);letter-spacing:-0.022em;line-height:1.1}
h1{font-weight:700;letter-spacing:-0.03em}
h2{font-weight:650;letter-spacing:-0.025em}
h3{font-weight:600;letter-spacing:-0.022em}
h4,h5,h6{font-weight:600;letter-spacing:-0.018em}
.container{max-width:1240px;margin:0 auto;padding:0 24px}

/* Accessibility */
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:4px}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:10px 16px;z-index:200;font-weight:700;border-radius:0 0 6px 0}
.skip-link:focus{left:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* ===== Tricolor strip ===== */
.tricolor{height:6px;display:flex}
.tricolor span{flex:1}
.tricolor span:nth-child(1){background:var(--saffron)}
.tricolor span:nth-child(2){background:#fff;position:relative}
.tricolor span:nth-child(2)::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--navy);transform:translate(-50%,-50%)}
.tricolor span:nth-child(3){background:var(--green)}

/* ===== Utility bar ===== */
.utility-bar{background:#fff;border-bottom:1px solid var(--line);font-size:12px;color:var(--ink-2);letter-spacing:-0.003em}
.utility-inner{display:flex;align-items:center;justify-content:space-between;height:34px;gap:18px;flex-wrap:wrap}
.utility-bar .gov{font-weight:600}
.utility-right{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.utility-right a{color:var(--ink-2);font-weight:500}
.utility-right .sep{color:var(--line)}

/* ===== Header (logo strip) ===== */
.site-header{background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow-sm);position:sticky;top:0;z-index:60}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:24px}
.brand{display:flex;align-items:center;gap:14px}
.brand-mark{width:50px;height:50px;border-radius:12px;background:#FAFBF7 url("/assets/finclar-logo.svg") center/82% no-repeat;display:flex;align-items:center;justify-content:center;color:transparent;font-weight:900;font-size:22px;box-shadow:var(--shadow-sm);border:1px solid var(--line);position:relative;flex-shrink:0;overflow:hidden}
.brand-mark::before{content:none}
.brand-text .b-name{font-weight:900;font-size:22px;color:var(--navy);line-height:1}
.brand-text .b-sub{font-size:12px;color:var(--ink-2);margin-top:4px}
.brand-text .b-icai{display:inline-block;margin-top:4px;font-size:10px;font-weight:700;color:var(--teal);letter-spacing:0.08em;text-transform:uppercase}
.header-cta{display:flex;gap:10px}

/* ===== Primary navigation ===== */
.primary-nav{background:var(--navy);box-shadow:var(--shadow)}
.nav-inner{display:flex;align-items:center;flex-wrap:wrap}
.nav-inner a{color:#fff;padding:14px 18px;font-size:14px;font-weight:600;border-right:1px solid rgba(255,255,255,0.08);transition:background .15s}
.nav-inner a:hover,.nav-inner a.active{background:var(--navy-dark);color:#fff}
.nav-inner a.cta-nav{margin-left:auto;background:var(--orange);border-right:none}
.nav-inner a.cta-nav:hover{background:var(--orange-dark)}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 22px;border-radius:980px;font-size:14px;font-weight:500;letter-spacing:-0.005em;transition:all .18s cubic-bezier(.4,0,.2,1);border:1px solid transparent;white-space:nowrap;text-decoration:none;line-height:1.2}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.btn-primary{background:var(--orange);color:#fff;font-weight:600}
.btn-primary:hover{background:var(--orange-dark);color:#fff}
.btn-outline{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn-outline:hover{background:var(--navy);color:#fff}
.btn-navy{background:var(--navy);color:#fff;font-weight:600}
.btn-navy:hover{background:var(--navy-dark);color:#fff}
.btn-ghost{background:transparent;color:var(--navy);border-color:transparent}
.btn-ghost:hover{background:var(--blue-soft);color:var(--navy-dark)}
.btn-sm{padding:7px 14px;font-size:12.5px}
.btn-lg{padding:14px 28px;font-size:15px;font-weight:500}

/* ===== Hero (gradient navy) ===== */
.hero{background:linear-gradient(180deg,var(--navy-deep) 0%,var(--navy) 100%);color:#fff;padding:80px 0 88px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 30%,rgba(255,180,0,0.18),transparent 50%);pointer-events:none}
.hero > .container{position:relative;z-index:1}
.hero .eyebrow{display:inline-block;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.16);padding:6px 16px;border-radius:980px;font-size:12px;font-weight:500;letter-spacing:0.04em;text-transform:none;color:var(--gold);margin-bottom:24px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.hero h1{font-size:clamp(34px,5vw,64px);line-height:1.05;color:#fff;font-weight:700;margin-bottom:18px;letter-spacing:-0.035em}
.hero h1 .accent{color:var(--gold)}
.hero p.sub{font-size:19px;color:rgba(255,255,255,0.78);max-width:720px;line-height:1.55;margin-bottom:28px;font-weight:400;letter-spacing:-0.005em}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap}
.hero-cta .btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,0.4)}
.hero-cta .btn-outline:hover{background:#fff;color:var(--navy)}

/* Hero with side card */
.hero-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:32px;align-items:center}
.hero-side{background:#fff;color:var(--ink);border-radius:18px;box-shadow:var(--shadow-lg);overflow:hidden}
.hero-side .hs-head{padding:14px 18px;background:linear-gradient(90deg,var(--navy),var(--blue));color:#fff;display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:700}
.hero-side .hs-body{padding:18px}
.hero-side .hs-row{display:flex;justify-content:space-between;padding:8px 0;font-size:13px;border-bottom:1px dashed var(--line);gap:14px}
.hero-side .hs-row:last-child{border:none}
.hero-side .hs-row .k{color:var(--ink-2)}
.hero-side .hs-row .v{font-weight:700;color:var(--navy);text-align:right}
.hero-side .hs-foot{background:var(--surface-2);padding:10px 18px;font-size:11.5px;color:var(--muted);text-align:center}

/* ===== Section conventions ===== */
section{padding:60px 0}
.sec-head{text-align:center;max-width:780px;margin:0 auto 40px}
.sec-kicker{display:inline-block;font-size:12.5px;font-weight:500;color:var(--orange-dark);text-transform:none;letter-spacing:0.01em;margin-bottom:12px;padding:5px 14px;background:#FFF1E0;border-radius:980px}
.sec-title{font-size:clamp(28px,3.4vw,44px);font-weight:650;line-height:1.1;margin-bottom:14px;letter-spacing:-0.028em}
.sec-title .accent{color:var(--navy)}
.sec-sub{font-size:15.5px;color:var(--ink-2);line-height:1.6}

/* ===== Generic 3-col tile grid ===== */
.tile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tile{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px;transition:all .25s cubic-bezier(.4,0,.2,1);position:relative;border-top:3px solid var(--navy)}
.tile.c2{border-top-color:var(--teal)}
.tile.c3{border-top-color:var(--orange)}
.tile.c4{border-top-color:var(--gold)}
.tile.c5{border-top-color:#7B1FA2}
.tile.c6{border-top-color:var(--green)}
.tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.tile-icon{width:48px;height:48px;border-radius:12px;background:var(--blue-soft);color:var(--navy);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:16px;font-weight:600}
.tile.c2 .tile-icon{background:#E0F2F1;color:var(--teal)}
.tile.c3 .tile-icon{background:#FFF1E0;color:var(--orange-dark)}
.tile.c4 .tile-icon{background:#FFF7E0;color:#B68900}
.tile.c5 .tile-icon{background:#F3E5F5;color:#7B1FA2}
.tile.c6 .tile-icon{background:#E5F5EC;color:var(--green)}
.tile h3{font-size:17px;font-weight:800;margin-bottom:8px}
.tile p{font-size:13.5px;color:var(--ink-2);line-height:1.55}
.tile ul{margin-top:10px;padding-left:0;list-style:none;font-size:13px;color:var(--ink-2)}
.tile ul li{padding:4px 0 4px 18px;position:relative;line-height:1.5}
.tile ul li::before{content:"✓";color:var(--success);font-weight:900;position:absolute;left:0;top:4px}

/* ===== Process steps ===== */
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.process-step{padding:28px 22px;border-right:1px solid var(--line);position:relative;transition:background .15s}
.process-step:last-child{border-right:none}
.process-step:hover{background:var(--surface-2)}
.process-step .step-num{width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:14px;margin-bottom:14px}
.process-step h3,.process-step h4{font-size:16px;font-weight:800;margin-bottom:6px}
.process-step p{font-size:13px;color:var(--ink-2);line-height:1.55}

/* ===== Use-case mini cards ===== */
.usecase-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.usecase{background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:22px;border-left:4px solid var(--orange)}
.usecase .role{display:inline-block;font-size:10.5px;font-weight:800;color:var(--orange);background:#FFF1E0;padding:3px 9px;border-radius:3px;letter-spacing:0.06em;text-transform:uppercase;margin-bottom:10px}
.usecase h3,.usecase h4{font-size:15px;font-weight:800;margin-bottom:6px}
.usecase p{font-size:13.5px;color:var(--ink-2);line-height:1.55}

/* ===== Verdict callout ===== */
.verdict{padding:14px 18px;border-radius:6px;background:var(--blue-soft);border:1px solid var(--navy);border-left:4px solid var(--navy);font-size:13.5px;display:flex;gap:12px;align-items:flex-start;line-height:1.55;color:var(--ink)}
.verdict .ic{width:24px;height:24px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-weight:900;font-size:13px}
.verdict.warn{background:#FCE7E5;border-color:var(--danger);border-left-color:var(--danger);color:#7B1F1A}
.verdict.warn .ic{background:var(--danger)}
.verdict.ok{background:#E5F5EC;border-color:var(--success);border-left-color:var(--success);color:#0B5C36}
.verdict.ok .ic{background:var(--success)}

/* ===== FAQ accordion ===== */
.faq-list{max-width:880px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item:last-child{border-bottom:none}
.faq-item summary{padding:18px 22px;display:flex;justify-content:space-between;align-items:center;gap:18px;cursor:pointer;list-style:none;transition:background .15s}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{background:var(--surface-2)}
.faq-item summary h3,.faq-item summary h4{font-size:15px;font-weight:700;margin:0}
.faq-item summary .faq-toggle{width:26px;height:26px;border-radius:50%;background:var(--blue-soft);color:var(--navy);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:14px;flex-shrink:0;transition:all .25s}
.faq-item[open] summary .faq-toggle{background:var(--orange);color:#fff;transform:rotate(45deg)}
.faq-item .faq-a{padding:0 22px 20px;color:var(--ink-2);font-size:14px;line-height:1.6}

/* ===== Pricing-hint strip ===== */
.pricing-hint{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px}
.ph-card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:18px;transition:all .15s}
.ph-card.featured{border:2px solid var(--orange);box-shadow:0 8px 24px rgba(255,107,0,0.12)}
.ph-card .ph-tier{font-size:12px;font-weight:800;color:var(--navy);letter-spacing:0.04em;text-transform:uppercase;margin-bottom:6px}
.ph-card .ph-price{font-family:var(--head);font-size:24px;font-weight:900;color:var(--ink);line-height:1.1}
.ph-card .ph-price .cur{font-size:14px;color:var(--orange);vertical-align:super;margin-right:2px}
.ph-card .ph-price .per{font-size:11.5px;color:var(--muted);font-weight:500;margin-left:4px}
.ph-card p{font-size:12.5px;color:var(--ink-2);margin-top:6px;line-height:1.5}

/* ===== Trust strip ===== */
.trust-strip{padding:36px 0;text-align:center;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust-strip .label{font-size:11px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.trust-strip .items{display:flex;justify-content:center;align-items:center;gap:32px;flex-wrap:wrap;color:var(--ink);font-weight:600;font-size:14px}
.trust-strip .items > div{display:flex;align-items:center;gap:8px}
.trust-strip .items .ic{width:30px;height:30px;border-radius:6px;background:var(--blue-soft);color:var(--navy);display:flex;align-items:center;justify-content:center;font-weight:800}

/* ===== CTA band ===== */
.cta-band{background:linear-gradient(135deg,var(--navy-deep),var(--navy));color:#fff;padding:48px 0;text-align:center;position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 50%,rgba(255,180,0,0.18),transparent 60%);pointer-events:none}
.cta-band > .container{position:relative;z-index:1}
.cta-band h2{color:#fff;font-size:clamp(28px,3.2vw,42px);font-weight:650;margin-bottom:12px;letter-spacing:-0.028em;line-height:1.1}
.cta-band h2 .accent{color:var(--gold)}
.cta-band p{color:rgba(255,255,255,0.85);max-width:640px;margin:0 auto 20px}
.cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.cta-btns .btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,0.4)}
.cta-btns .btn-outline:hover{background:#fff;color:var(--navy)}

/* ===== Footer ===== */
footer{background:var(--navy-deep);color:rgba(255,255,255,0.85);padding:40px 0}
.foot-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;font-size:13px;color:rgba(255,255,255,0.7)}
.foot-inner a{color:#fff;font-weight:600}
.foot-inner a:hover{color:var(--gold)}

/* ===== WhatsApp FAB ===== */
.wa-fab{position:fixed;right:22px;bottom:22px;z-index:90;display:inline-flex;align-items:center;gap:10px;padding:12px 18px 12px 14px;border-radius:100px;background:#25D366;color:#fff;font-weight:700;font-size:13.5px;box-shadow:0 14px 36px rgba(37,211,102,0.4);transition:all .2s;text-decoration:none}
.wa-fab:hover{transform:translateY(-2px);box-shadow:0 20px 50px rgba(37,211,102,0.55);color:#fff}
.wa-fab .wa-ic{width:28px;height:28px;border-radius:50%;background:#fff;color:#25D366;display:flex;align-items:center;justify-content:center;font-weight:900}

/* ===== Responsive ===== */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:24px}
  .tile-grid,.usecase-grid,.pricing-hint{grid-template-columns:1fr 1fr;gap:16px}
  .process-grid{grid-template-columns:1fr 1fr}
  .process-step{border-right:none;border-bottom:1px solid var(--line)}
  .process-step:nth-child(odd){border-right:1px solid var(--line)}
  .trust-strip .items{gap:18px}
  .header-cta .btn-sm:not(.always-show){display:none}
}
@media (max-width:640px){
  .container{padding:0 18px}
  .hero{padding:42px 0 52px}
  section{padding:44px 0}
  .tile-grid,.usecase-grid,.pricing-hint,.process-grid{grid-template-columns:1fr}
  .process-step{border-right:none !important;border-bottom:1px solid var(--line)}
  .process-step:last-child{border-bottom:none}
  .utility-bar{display:none}
}

/* ============ Insight-extras (TOC, share, prev/next nav) ============ */
/* Injected by /assets/insight-extras.js on /insights/<slug>.html pages */

.ix-toc{background:var(--surface-2);border:1px solid var(--line);border-left:3px solid var(--orange);border-radius:8px;padding:18px 22px;margin:0 0 32px;max-width:760px;margin-left:auto;margin-right:auto}
.ix-toc-title{font-size:11px;font-weight:800;color:var(--orange);letter-spacing:0.1em;text-transform:uppercase;margin-bottom:10px}
.ix-toc-list{margin:0;padding-left:22px;color:var(--ink-2);font-size:14px;line-height:1.65}
.ix-toc-list li{margin-bottom:4px}
.ix-toc-list a{color:var(--ink);text-decoration:none;border-bottom:1px dashed transparent;transition:all .12s}
.ix-toc-list a:hover{color:var(--orange);border-bottom-color:var(--orange)}

.ix-share{display:flex;gap:8px;align-items:center;margin-top:18px;flex-wrap:wrap}
.ix-share-label{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:0.03em;margin-right:4px}
.ix-sb{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:#fff;border:1px solid var(--line);color:var(--ink-2);text-decoration:none;font-size:13px;font-weight:800;font-family:var(--head);transition:all .15s;cursor:pointer;line-height:1}
.ix-sb:hover{background:var(--navy);color:#fff;border-color:var(--navy);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.ix-sb.ok{background:var(--success);color:#fff;border-color:var(--success)}

.ix-nav{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:36px 0 28px}
.ix-nav-card{display:flex;flex-direction:column;gap:6px;padding:18px 20px;background:#fff;border:1px solid var(--line);border-radius:10px;text-decoration:none;color:var(--ink);transition:all .15s;border-left:3px solid var(--line)}
.ix-nav-card:hover{border-color:var(--navy);border-left-color:var(--orange);transform:translateY(-2px);box-shadow:var(--shadow)}
.ix-nav-prev{border-left-color:var(--blue-soft)}
.ix-nav-next{text-align:right;border-left:none;border-right:3px solid var(--blue-soft)}
.ix-nav-next:hover{border-right-color:var(--orange)}
.ix-nav-dir{font-size:11px;font-weight:800;color:var(--muted);letter-spacing:0.08em;text-transform:uppercase}
.ix-nav-title{font-size:15px;font-weight:700;color:var(--ink);line-height:1.35;letter-spacing:-0.01em}

.ix-author-link{display:inline-block;margin-top:8px;font-size:12px;font-weight:700;color:var(--orange);text-decoration:none;border-bottom:1px dashed var(--orange);transition:all .12s}
.ix-author-link:hover{color:var(--orange-dark);border-bottom-style:solid}

/* Live deadline countdown pill (finclar-tag.js, fetched from
   /assets/deadlines.json) — sits at the left of .utility-right.
   Auto-hides if no deadline within 30 days. */
.cm-deadline-pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;background:var(--blue-soft);color:var(--navy);border-radius:14px;font-size:11.5px;font-weight:700;text-decoration:none;line-height:1.2;transition:all .15s;border:1px solid transparent;letter-spacing:-0.005em;margin-right:6px}
.cm-deadline-pill:hover{background:var(--navy);color:#fff;transform:translateY(-1px);box-shadow:0 4px 10px rgba(11,59,140,0.18)}
.cm-deadline-pill .cm-dl-ic{font-size:13px;line-height:1}
.cm-deadline-pill .cm-dl-name{font-weight:700;white-space:nowrap}
.cm-deadline-pill .cm-dl-when{font-weight:500;opacity:0.85;white-space:nowrap}
.cm-deadline-pill.cm-dl-gst{background:#E0F2F1;color:var(--teal)}
.cm-deadline-pill.cm-dl-gst:hover{background:var(--teal);color:#fff}
.cm-deadline-pill.cm-dl-tds{background:#FFF1E0;color:var(--orange-dark)}
.cm-deadline-pill.cm-dl-tds:hover{background:var(--orange);color:#fff}
.cm-deadline-pill.cm-dl-itr{background:#FFF7E0;color:#8a5800}
.cm-deadline-pill.cm-dl-itr:hover{background:var(--gold);color:var(--navy-deep)}
.cm-deadline-pill.cm-dl-roc{background:#F3E5F5;color:#7B1FA2}
.cm-deadline-pill.cm-dl-roc:hover{background:#7B1FA2;color:#fff}
.cm-deadline-pill.cm-dl-audit{background:#FCE7E5;color:var(--danger)}
.cm-deadline-pill.cm-dl-audit:hover{background:var(--danger);color:#fff}
:root[data-theme="dark"] .cm-deadline-pill{background:var(--surface);color:var(--ink-2);border-color:var(--line)}
:root[data-theme="dark"] .cm-deadline-pill:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
@media (max-width:840px){
  .cm-deadline-pill .cm-dl-when{display:none}
  .cm-deadline-pill .cm-dl-name{max-width:140px;overflow:hidden;text-overflow:ellipsis}
}
@media (max-width:560px){
  .cm-deadline-pill .cm-dl-name{max-width:100px}
}
@media print{.cm-deadline-pill{display:none !important}}

/* Section-glossary popover — wraps § references on insight pages with
   hover/focus tooltips. Lazy-loaded via /assets/sections.json. */
.cm-sec{display:inline;color:var(--navy);font-weight:600;border-bottom:1px dotted var(--navy);cursor:help;transition:color .15s}
.cm-sec:hover,.cm-sec:focus{color:var(--orange);border-bottom-color:var(--orange);outline:none}
.cm-sec:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:2px}
.cm-sec-tip{max-width:320px;min-width:240px;background:#fff;border:1px solid var(--line);border-left:3px solid var(--navy);border-radius:6px;padding:12px 14px;font-size:13px;line-height:1.45;color:var(--ink);box-shadow:0 14px 32px rgba(11,59,140,0.18),0 4px 8px rgba(0,0,0,0.06);font-family:var(--sans);letter-spacing:-0.005em}
.cm-sec-tip-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:6px;flex-wrap:wrap}
.cm-sec-tip-head strong{color:var(--navy-deep);font-size:13.5px;font-weight:800;letter-spacing:-0.01em}
.cm-sec-tip-act{font-size:10.5px;color:var(--muted);font-weight:600;letter-spacing:0.04em;text-transform:uppercase;flex-shrink:0}
.cm-sec-tip-body{color:var(--ink-2);font-size:13px;line-height:1.55;margin-bottom:8px}
.cm-sec-tip-link{display:inline-block;font-size:11.5px;font-weight:700;color:var(--orange);text-decoration:none;border-bottom:1px dashed var(--orange);letter-spacing:0.02em}
.cm-sec-tip-link:hover{color:var(--orange-dark);border-bottom-style:solid}
:root[data-theme="dark"] .cm-sec-tip{background:var(--surface);color:var(--ink);border-color:var(--line);box-shadow:0 14px 32px rgba(0,0,0,0.6)}
@media (max-width:560px){
  .cm-sec-tip{max-width:calc(100vw - 24px);min-width:auto;font-size:12.5px}
}
@media print{
  .cm-sec{border-bottom:none !important;color:var(--ink) !important;font-weight:600}
  .cm-sec-tip{display:none !important}
}

/* Auto-injected breadcrumb (finclar-tag.js reads JSON-LD BreadcrumbList).
   Sits below the primary nav on every non-home page with valid schema. */
.cm-breadcrumb{background:var(--surface-2);border-bottom:1px solid var(--line);font-size:12.5px;line-height:1.45}
.cm-breadcrumb-inner{padding:8px 0}
.cm-breadcrumb ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.cm-breadcrumb li{display:inline-flex;align-items:center;color:var(--muted)}
.cm-breadcrumb li:not(:last-child)::after{content:"›";margin-left:6px;color:var(--muted);font-size:14px;line-height:1}
.cm-breadcrumb a{color:var(--ink-2);text-decoration:none;border-bottom:1px dashed transparent;transition:all .12s}
.cm-breadcrumb a:hover{color:var(--navy);border-bottom-color:var(--navy)}
.cm-breadcrumb [aria-current="page"]{color:var(--ink);font-weight:600}
:root[data-theme="dark"] .cm-breadcrumb{background:var(--surface);border-bottom-color:var(--line)}
@media print{.cm-breadcrumb{display:none !important}}

/* "Was this useful?" feedback widget — injected by insight-extras.js
   between the prev/next nav and the author-bio block. */
.ix-fb{margin:24px 0;padding:18px 22px;background:var(--surface-2);border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:8px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ix-fb-title{font-size:14px;font-weight:700;color:var(--ink);letter-spacing:-0.005em}
.ix-fb-btns{display:flex;gap:8px;flex-wrap:wrap}
.ix-fb-btn{appearance:none;background:#fff;border:1px solid var(--line);color:var(--ink);font:inherit;font-size:13px;font-weight:600;padding:8px 14px;border-radius:6px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:all .15s;line-height:1.2}
.ix-fb-btn:hover{background:var(--blue-soft);border-color:var(--navy);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.ix-fb-btn:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.ix-fb-btn .ix-fb-ic{font-size:16px;line-height:1}
.ix-fb-msg{font-size:14px;color:var(--ink-2);line-height:1.55;flex:1;min-width:200px}
.ix-fb-msg strong{color:var(--ink);font-weight:700}
.ix-fb-mail{color:var(--orange);font-weight:700;text-decoration:none;border-bottom:1px dashed var(--orange);margin-left:6px;white-space:nowrap}
.ix-fb-mail:hover{color:var(--orange-dark);border-bottom-style:solid}
:root[data-theme="dark"] .ix-fb-btn{background:var(--surface);color:var(--ink)}
:root[data-theme="dark"] .ix-fb-btn:hover{background:var(--blue-soft)}
@media (max-width:560px){.ix-fb{flex-direction:column;align-items:flex-start}}
@media print{.ix-fb{display:none !important}}

/* Calculator-recommendation CTA — injected by insight-extras.js
   between the article prose and the prev/next nav. */
.ix-tool-cta{margin:36px 0 24px;background:linear-gradient(135deg,#FFF7E0 0%,#fff 60%);border:1px solid #F3DDB0;border-left:4px solid var(--gold);border-radius:10px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,0.03)}
.ix-tool-cta-inner{display:grid;grid-template-columns:48px 1fr auto;gap:18px;align-items:center;padding:18px 22px}
.ix-tool-cta-ic{width:48px;height:48px;border-radius:50%;background:var(--gold);color:var(--navy-deep);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:900;flex-shrink:0}
.ix-tool-cta-body{min-width:0}
.ix-tool-cta-kicker{font-size:10.5px;font-weight:800;color:#8a5800;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:4px}
.ix-tool-cta-title{font-size:15.5px;font-weight:800;color:var(--ink);line-height:1.35;letter-spacing:-0.01em;margin-bottom:4px}
.ix-tool-cta-sub{font-size:13px;color:var(--ink-2);line-height:1.5}
.ix-tool-cta-btn{display:inline-flex;align-items:center;gap:6px;padding:10px 18px;background:var(--navy);color:#fff !important;border-radius:6px;font-size:13.5px;font-weight:700;text-decoration:none;letter-spacing:0.01em;transition:all .15s;border:1px solid var(--navy);white-space:nowrap}
.ix-tool-cta-btn:hover{background:var(--orange);border-color:var(--orange);transform:translateY(-1px);box-shadow:0 6px 16px rgba(255,107,0,0.25)}
@media (max-width:560px){
  .ix-tool-cta-inner{grid-template-columns:1fr;text-align:left;gap:12px;padding:18px}
  .ix-tool-cta-ic{width:40px;height:40px;font-size:18px}
  .ix-tool-cta-btn{justify-self:start}
}

@media (max-width:640px){
  .ix-nav{grid-template-columns:1fr}
  .ix-nav-next{text-align:left;border-right:none;border-left:3px solid var(--blue-soft)}
}

/* Reading progress bar (insights only — set by insight-extras.js) */
#ix-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:100;background:transparent;pointer-events:none}
#ix-progress .ix-progress-fill{height:100%;width:0;background:linear-gradient(90deg,var(--orange),var(--gold));transition:width .08s ease-out;box-shadow:0 0 8px rgba(255,107,0,0.4)}
.ix-rt{font-weight:600}

/* Hover lift effect on inline-styled brief cards across service pages */
a[style*="border-top:3px solid"]:not(.btn):hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(11,59,140,0.10);border-color:var(--navy) !important}
a[style*="border-top:3px solid"]:not(.btn){transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}

/* "More from this author" section + scroll-to-top button */
.ix-more{max-width:760px;margin:48px auto 28px;padding:24px;background:linear-gradient(180deg,#FAFBF7,#fff);border:1px solid var(--line);border-radius:14px}
.ix-more-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;margin-bottom:16px}
.ix-more-eyebrow{display:inline-block;font-size:11px;font-weight:800;color:var(--orange);letter-spacing:0.08em;text-transform:uppercase}
.ix-more-title{font-size:20px;font-weight:800;color:var(--ink);letter-spacing:-0.02em;flex:1;margin:0}
.ix-more-all{font-size:13px;font-weight:700;color:var(--orange);text-decoration:none;border-bottom:1px dashed var(--orange)}
.ix-more-all:hover{color:var(--orange-dark);border-bottom-style:solid}
.ix-more-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.ix-more-card{display:flex;flex-direction:column;gap:8px;padding:14px 16px;background:#fff;border:1px solid var(--line);border-left:3px solid var(--orange);border-radius:8px;text-decoration:none;color:var(--ink);transition:all .15s}
.ix-more-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--navy);border-left-color:var(--navy)}
.ix-more-card-tag{font-size:10px;font-weight:800;color:var(--muted);letter-spacing:0.08em;text-transform:uppercase}
.ix-more-card-title{font-size:14.5px;font-weight:700;line-height:1.35;color:var(--ink);letter-spacing:-0.01em;flex:1}
.ix-more-card-cta{margin-top:auto;font-size:12px;font-weight:700;color:var(--orange)}

#ix-totop{position:fixed;bottom:90px;right:18px;width:42px;height:42px;border-radius:50%;background:var(--navy);color:#fff;font-size:18px;font-weight:700;border:none;cursor:pointer;z-index:90;box-shadow:0 8px 24px rgba(11,59,140,0.25);opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .18s, transform .18s, background .15s}
#ix-totop:hover{background:var(--orange)}
#ix-totop.show{opacity:1;pointer-events:auto;transform:translateY(0)}
@media (max-width:640px){
  #ix-totop{bottom:78px;right:12px;width:38px;height:38px;font-size:16px}
}

/* QoL polish layer */
/* TOC anchors — give H2s a scroll-margin so the sticky nav doesn't cover them */
.article-prose h2[id]{scroll-margin-top:96px}
/* Make the WhatsApp FAB hide its label on tablets so it doesn't crowd the bottom-right corner */
@media (max-width:760px){
  .wa-fab span:not(.wa-ic){display:none}
  .wa-fab{padding:12px 14px;border-radius:50%}
}
/* Subtle bottom-of-page rule before footer to break density */
main + footer{border-top:1px solid var(--line)}
/* Focus polish for keyboard navigation across the share row + buttons */
.ix-sb:focus-visible{outline-offset:3px}
/* Smoother table-of-contents indent for nested ordered list  */
.ix-toc-list{counter-reset:tocli}
.ix-toc-list li{position:relative;counter-increment:tocli}
/* ===== Print stylesheet — ink-saving, readable, every-page ====== */
@media print{
  /* Hide all interactive / decorative chrome */
  #ix-progress,.ix-toc,.ix-share,.ix-nav,.ix-more,.ix-tool-cta,#ix-totop,.wa-fab,
  .utility-bar,.primary-nav,.site-header,.skip-link,.tricolor,footer,
  .author-bio .ac-cta,.cta-band,.hero-ctas,.hero-cta,.header-cta,
  .cp-backdrop,.cp-trigger-fab,#finclar-sw-update,#finclar-dpdp-banner,
  form,.contact-card,.subscribe,.next-grid,
  iframe{display:none !important}

  /* Strip site-wide colors + backgrounds (saves toner on every printer) */
  *,*::before,*::after{
    background:transparent !important;
    background-image:none !important;
    background-color:transparent !important;
    box-shadow:none !important;
    text-shadow:none !important;
    color:#000 !important;
    border-color:#ccc !important;
  }

  /* Page-level rules */
  html,body{background:#fff !important;color:#000 !important}
  body{font:11pt/1.5 Georgia,serif !important;margin:0}
  .container{max-width:none !important;padding:0 !important}
  section,.section,.section-alt{padding:12pt 0 !important;background:none !important;border:none !important;break-inside:auto}

  /* Hero — strip the gradient, keep heading visible in black */
  .hero,.hero::before,.hero::after,
  .authors-hero,.authors-hero::before,
  .topics-hero,.topics-hero::before,
  .tools-hero,.cta-band,.principal-hero{background:none !important}
  .hero h1,.hero h2,.hero .sub,.hero .eyebrow,
  .authors-hero h1,.topics-hero h1{color:#000 !important;text-shadow:none !important}
  .hero-eyebrow,.eyebrow,.kicker,.sec-kicker{display:inline-block;border:1pt solid #888;padding:1pt 6pt;font-size:8pt;letter-spacing:0.04em;text-transform:uppercase}

  /* Headings: prevent orphans */
  h1,h2,h3,h4,h5,h6{break-after:avoid;page-break-after:avoid;color:#000 !important}
  h2{font-size:16pt;margin-top:18pt}
  h3{font-size:13pt;margin-top:12pt}
  .article-prose h2,.article-prose h3,.article-prose h4{break-after:avoid;page-break-after:avoid}

  /* Tables: avoid breaks, keep header row visible */
  table{break-inside:avoid;page-break-inside:avoid;border-collapse:collapse;width:100%}
  th,td{border:0.5pt solid #888 !important;padding:3pt 6pt !important}
  thead{display:table-header-group}

  /* Links: print the URL after the link text for non-finclar.in destinations */
  a{color:#000 !important;text-decoration:none !important;border-bottom:none !important;font-weight:600}
  a[href^="http"]:not([href*="finclar.in"])::after{
    content:" (" attr(href) ")";font-size:9pt;font-weight:normal;color:#555 !important;word-break:break-all
  }
  a[href^="mailto:"]::after,a[href^="tel:"]::after{content:""}

  /* Insight-specific carry-over */
  .article-wrap{padding:0;max-width:none}
  .article-prose p,.article-prose li{orphans:3;widows:3}

  /* Page-break utility classes */
  .page-break{break-before:page;page-break-before:always}

  /* Reset positioned elements so they don't overlap */
  .hero-panel,.hero-side,.principal-photo{position:static !important}

  /* Print-only attribution footer — printed at end of every page */
  body::after{
    content:"Printed from finclar.in · CA S. A. Abdul Rahim, Principal · +91 99402 78603 · inamul@finclartax.com";
    display:block;
    margin-top:24pt;
    padding-top:8pt;
    border-top:0.5pt solid #888;
    font-size:9pt;
    color:#555 !important;
    text-align:center
  }
}

/* ===== Respect prefers-reduced-motion (WCAG 2.1 AA) =====
   Users on macOS / iOS / Android / Win11 may set 'reduce motion'
   at OS level. Honour that by neutralising all animations,
   transitions, hover lifts and smooth-scroll. Functional UI still
   works — just no decoration motion. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* Hover transforms can be vestibular triggers — neutralise */
  .btn:hover,
  .li-card:hover,
  .sl-card:hover,
  .post-card:hover,
  .related-card:hover,
  .ac-brief:hover,
  .brief-card:hover,
  .tab-card:hover,
  .feature:hover,
  .case-row:hover,
  .feat-pill:hover {
    transform: none !important;
  }
  /* Pulse animations on hero dots / WhatsApp FAB icons */
  .dot,
  .pulse .d,
  .hero-eyebrow .dot {
    animation: none !important;
  }
}
