/* ===== section: header ===== */
/* ==========================================================================
   HEADER. All rules scoped under .tgh. Tokens come from the theme.
   ========================================================================== */
.tgh{position:sticky;top:0;z-index:900;width:100%;color:var(--tg-ink);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
.tgh *,.tgh *::before,.tgh *::after{box-sizing:border-box}
/* :where() keeps this reset at zero specificity for the element part. As a
   plain `.tgh a` it outranks .tg-btn-primary and the green CTA renders with
   near-black inherited ink instead of white. */
.tgh :where(a){color:inherit;text-decoration:none}
/* :where() keeps the reset at zero specificity for the element part, so a
   component class like .tgh-nav-link can still set its own type and padding.
   Without it this rule outranks them and buttons in the header render at the
   inherited size with no padding. */
.tgh :where(button){margin:0;padding:0;border:0;font:inherit;cursor:pointer;background:none;color:inherit}
.tgh svg{display:block}

/* Topbar */
.tgh-topbar{position:relative;max-height:38px;overflow:hidden;opacity:1;transform:translateY(0);
  color:#fff;
  background:
    radial-gradient(circle at 17% -150%,rgba(52,211,153,.65),transparent 33%),
    radial-gradient(circle at 83% 170%,rgba(16,185,129,.30),transparent 35%),
    linear-gradient(110deg,#064e3b 0%,var(--tg-green-deep) 45%,var(--tg-green-dark) 100%);
  transition:max-height .32s var(--tg-ease),opacity .22s ease,transform .32s var(--tg-ease)}
.tgh-topbar::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:30px 30px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
.tgh.is-scrolled .tgh-topbar{max-height:0;opacity:0;transform:translateY(-100%);pointer-events:none}
.tgh-topbar-inner{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:9px;
  height:38px;font-size:12.5px;padding:0 20px}
.tgh-topbar-inner svg{width:15px;height:15px;flex:none}
.tgh-topbar-inner span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Bar */
.tgh-main{background:rgba(255,255,255,.92);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--tg-border);transition:box-shadow .22s var(--tg-ease)}
.tgh.is-scrolled .tgh-main{box-shadow:0 8px 26px rgba(6,95,70,.06)}
.tgh-container{position:relative;width:min(100% - 40px,var(--tg-container));margin-inline:auto;
  display:flex;align-items:center;gap:22px;height:72px}

/* Logo */
.tgh-logo{display:flex;align-items:center;gap:11px;flex:none}
.tgh-logo-mark{width:42px;height:42px;flex:none;border-radius:13px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--tg-green-light),var(--tg-green-deep));
  box-shadow:var(--tg-shadow-brand)}
.tgh-logo-mark svg{width:22px;height:22px}
.tgh-logo-name{display:block;font-family:"Sora",sans-serif;font-size:19px;font-weight:700;
  letter-spacing:-.03em;color:var(--tg-ink);line-height:1.15}
.tgh-logo-name strong{font-weight:800;color:var(--tg-green-deep)}
.tgh-logo-tag{display:block;font-size:10.5px;color:var(--tg-muted-light);margin-top:1px}

/* Nav */
.tgh-nav{flex:1;min-width:0}
.tgh-nav-list{display:flex;align-items:center;gap:3px;margin:0;padding:0;list-style:none}
.tgh-nav-item{position:relative}
/* Scoped with .tgh so it outranks the button typography GeneratePress
   injects inline as `button:not(.menu-toggle){font-size:18px;font-weight:bold}`.
   That rule is more specific than a lone class, so the mega trigger rendered
   18px bold while the sibling links stayed 14px/600. */
.tgh .tgh-nav-link{display:inline-flex;align-items:center;gap:5px;padding:9px 14px;border-radius:var(--tg-r-xs);
  font-size:14px;font-weight:600;color:var(--tg-text);white-space:nowrap;
  transition:background .18s ease,color .18s ease}
.tgh-nav-link svg{width:15px;height:15px;transition:transform .22s var(--tg-ease)}
.tgh-nav-link:hover{background:var(--tg-soft);color:var(--tg-green-deep)}
.tgh-nav-link.is-active{background:var(--tg-soft);color:var(--tg-green-deep)}

/* Mega menu: CSS only.
   The panel is anchored to .tgh-container rather than to its trigger. Centring
   a 1060px panel on a trigger that sits ~365px from the left pushed its first
   column off the left edge of the viewport, so the panel now shares the
   container's gutters and can never overflow. */
.tgh-has-mega{position:static}
.tgh-mega{position:absolute;top:calc(100% + 14px);left:0;right:0;margin-inline:auto;
  transform:translateY(-6px);
  width:auto;max-width:1060px;padding:20px;border:1px solid var(--tg-border);border-radius:var(--tg-r-lg);
  background:#fff;box-shadow:0 24px 54px rgba(6,95,70,.13);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s var(--tg-ease),transform .24s var(--tg-ease),visibility .24s}
/* The pointer has to cross from the trigger down to the panel without the menu
   closing. The li is static so its box ends at the button, and the real gap is
   the button's bottom to the panel top, which is larger than the panel's own
   offset. So the bridge hangs off the trigger and covers the whole run; the
   strip above the panel is kept as well for diagonal travel to a far column. */
.tgh-mega-trigger{position:relative}
.tgh-mega-trigger::after{content:"";position:absolute;top:100%;left:0;right:0;height:28px}
.tgh-mega::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.tgh-has-mega:hover .tgh-mega,
.tgh-has-mega:focus-within .tgh-mega{opacity:1;visibility:visible;pointer-events:auto;
  transform:translateY(0)}
.tgh-has-mega:hover .tgh-mega-trigger svg,
.tgh-has-mega:focus-within .tgh-mega-trigger svg{transform:rotate(180deg)}

.tgh-mega-head{display:flex;align-items:center;gap:12px;padding-bottom:16px;margin-bottom:16px;
  border-bottom:1px solid var(--tg-border-light)}
.tgh-mega-head strong{display:block;font-family:"Sora",sans-serif;font-size:15px;font-weight:700;color:var(--tg-ink)}
.tgh-mega-head small{display:block;font-size:12.5px;color:var(--tg-muted);margin-top:1px}
.tgh-mega-count{margin:0 0 0 auto}
.tgh-mega-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.tgh-mega-link{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:var(--tg-r-sm);
  transition:background .18s ease}
.tgh-mega-link:hover{background:var(--tg-soft)}
.tgh-mega-link .tg-icon-chip{width:36px;height:36px;border-radius:10px}
.tgh-mega-link .tg-icon-chip svg{width:17px;height:17px}
.tgh-mega-link strong{display:block;font-size:13.5px;font-weight:650;color:var(--tg-ink)}
.tgh-mega-link small{display:block;font-size:11.5px;color:var(--tg-muted);margin-top:1px}
.tgh-mega-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-top:15px;margin-top:15px;border-top:1px solid var(--tg-border-light);
  font-size:12.5px;color:var(--tg-muted)}
.tgh-mega-foot a{display:inline-flex;align-items:center;gap:5px;color:var(--tg-green-deep);font-weight:650}
.tgh-mega-foot svg{width:14px;height:14px}

/* Actions */
.tgh-actions{display:flex;align-items:center;gap:10px;flex:none;margin-left:auto}
.tgh-count{display:flex;align-items:center;gap:8px;padding:6px 13px 6px 7px;
  border:1px solid var(--tg-border);border-radius:var(--tg-r-pill);background:#fff}
.tgh-count-icon{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--tg-green-light),var(--tg-green-dark))}
.tgh-count-icon svg{width:15px;height:15px}
.tgh-count-copy strong{display:block;font-size:12.5px;font-weight:800;color:var(--tg-ink);line-height:1.1}
.tgh-count-copy small{display:block;font-size:8.5px;font-weight:700;letter-spacing:.10em;
  text-transform:uppercase;color:var(--tg-muted-light)}
.tgh-search{width:210px;margin:0}
.tgh-search-field{padding:4px 4px 4px 14px}
.tgh-search-field .tg-search-input{height:34px;font-size:13px}
/* The header search field is only 210px wide, but the results dropdown must
   not be: at field width the result cards wrap into a ~1400px-tall tower that
   covers the whole hero. Give the dropdown its own width, open it leftward
   from the field's right edge so it never runs off-screen, and keep each
   card's title and description to a single truncated line. */
.tgh-search .tg-search-results{width:340px;left:auto;right:0;max-height:70vh;overflow-y:auto}
.tgh-search .tg-search-item strong,
.tgh-search .tg-search-item span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tgh-cta{min-height:40px;padding:0 17px;font-size:13.5px}
.tgh-cta svg{width:15px;height:15px}

/* Burger */
.tgh-burger{display:none;width:42px;height:42px;border-radius:var(--tg-r-sm);
  border:1px solid var(--tg-border);background:#fff;
  flex-direction:column;align-items:center;justify-content:center;gap:4px}
.tgh-burger span{display:block;width:17px;height:2px;border-radius:2px;background:var(--tg-ink);
  transition:transform .24s var(--tg-ease),opacity .18s ease}
.tgh-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.tgh-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.tgh-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Drawer */
.tgh-drawer{display:none;border-bottom:1px solid var(--tg-border);background:#fff;
  box-shadow:0 18px 34px rgba(6,95,70,.08)}
.tgh-drawer.is-open{display:block}
.tgh-drawer-inner{width:min(100% - 40px,var(--tg-container));margin-inline:auto;
  display:flex;flex-direction:column;gap:2px;padding:14px 0 20px}
.tgh .tgh-drawer-link{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:12px 12px;border-radius:var(--tg-r-sm);font-size:15px;font-weight:600;color:var(--tg-text);
  width:100%;text-align:left}
.tgh-drawer-link:hover{background:var(--tg-soft);color:var(--tg-green-deep)}
.tgh-drawer-link svg{width:16px;height:16px;transition:transform .24s var(--tg-ease)}
.tgh-drawer-cats[aria-expanded="true"] svg{transform:rotate(180deg)}
.tgh-drawer-catlist{display:none;flex-direction:column;gap:1px;padding:4px 0 8px 12px;
  margin-left:10px;border-left:2px solid var(--tg-soft-2)}
.tgh-drawer-catlist.is-open{display:flex}
.tgh-drawer-catlist a{padding:9px 12px;border-radius:var(--tg-r-xs);font-size:14px;color:var(--tg-muted)}
.tgh-drawer-catlist a:hover{background:var(--tg-soft);color:var(--tg-green-deep)}
.tgh-drawer-cta{margin-top:10px;width:100%}

/* Responsive: the four canonical breakpoints */
@media (max-width:1050px){
  .tgh-nav,.tgh-count,.tgh-search{display:none}
  .tgh-burger{display:flex}
  .tgh-container{height:66px;gap:14px}
}
@media (max-width:760px){
  .tgh-cta{display:none}
  .tgh-topbar-inner{font-size:11.5px}
}
@media (max-width:520px){
  .tgh-logo-tag{display:none}
  .tgh-logo-name{font-size:17px}
  .tgh-container{height:60px}
}
@media (max-width:430px){
  .tgh-container,.tgh-drawer-inner{width:calc(100% - 28px)}
}
@media (prefers-reduced-motion:reduce){
  .tgh *{animation:none!important;transition:none!important}
}

/* ===== section: footer ===== */
.tgf{color:var(--tg-text);font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.tgf *,.tgf *::before,.tgf *::after{box-sizing:border-box}
/* The header and sections reset buttons; the footer did not, so
   GeneratePress's button{padding:10px 20px} survived here and squeezed
   the back-to-top icon into a 4px content box, off centre. */
.tgf :where(button){margin:0;padding:0;border:0;font:inherit;cursor:pointer;background:none;color:inherit}
.tgf a{color:inherit;text-decoration:none}
.tgf svg{display:block}
.tgf-container{width:min(100% - 40px,var(--tg-container));margin-inline:auto}

.tgf-top{padding:40px 0}
.tgf-top-inner{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap}
.tgf-top .tg-h2{margin:0 0 6px;font-size:clamp(1.3rem,2.4vw,1.8rem)}
.tgf-top p{margin:0;font-size:14.5px}

.tgf-main{padding:52px 0 40px;background:var(--tg-page-bg);border-bottom:1px solid var(--tg-border-light)}
.tgf-cols{display:grid;grid-template-columns:1.6fr repeat(4,minmax(0,1fr));gap:34px}
.tgf-logo{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.tgf-logo-mark{width:38px;height:38px;flex:none;border-radius:12px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--tg-green-light),var(--tg-green-deep));box-shadow:var(--tg-shadow-brand)}
.tgf-logo-mark svg{width:20px;height:20px}
.tgf-logo-name{font-family:"Sora",sans-serif;font-size:18px;font-weight:700;letter-spacing:-.03em;color:var(--tg-ink)}
.tgf-logo-name strong{font-weight:800;color:var(--tg-green-deep)}
.tgf-desc{margin:0 0 16px;font-size:13.5px;line-height:1.65;color:var(--tg-muted);max-width:42ch}
.tgf-pills{display:flex;flex-wrap:wrap;gap:8px}
.tgf-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;
  border:1px solid var(--tg-border);border-radius:var(--tg-r-pill);background:#fff;
  font-size:11.5px;font-weight:650;color:var(--tg-green-deep)}
.tgf-pill svg{width:12px;height:12px;flex:none}

.tgf-col-title{margin:0 0 13px;font-family:"Inter",sans-serif;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.10em;color:var(--tg-muted-light)}
.tgf-links{display:grid;gap:9px;margin:0;padding:0;list-style:none}
.tgf-links a{font-size:13.5px;color:var(--tg-muted);transition:color .18s ease,padding-left .18s var(--tg-ease)}
.tgf-links a:hover{color:var(--tg-green-deep);padding-left:3px}

.tgf-bottom{padding:18px 0;background:var(--tg-page-bg)}
.tgf-bottom-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:12.5px;color:var(--tg-muted-light)}
.tgf-bottom-links{display:flex;gap:16px}
.tgf-disclaimer{font-size:12px;color:var(--tg-muted-light);max-width:52ch}
.tgf-bottom-links a:hover{color:var(--tg-green-deep)}

.tgf-top-btn{position:fixed;right:22px;bottom:22px;z-index:800;
  width:44px;height:44px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:linear-gradient(135deg,var(--tg-green-light),var(--tg-green-dark));color:#fff;
  box-shadow:var(--tg-shadow-brand);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .22s ease,transform .22s var(--tg-ease),visibility .22s}
.tgf-top-btn.is-visible{opacity:1;visibility:visible;transform:translateY(0)}
.tgf-top-btn svg{width:19px;height:19px}

@media (max-width:1050px){.tgf-cols{grid-template-columns:1fr 1fr 1fr;gap:28px}
  .tgf-brand{grid-column:1 / -1}}
@media (max-width:760px){.tgf-cols{grid-template-columns:1fr 1fr}
  .tgf-main{padding:40px 0 32px}
  .tgf-top-inner{flex-direction:column;align-items:flex-start}}
@media (max-width:520px){.tgf-cols{grid-template-columns:1fr}
  .tgf-bottom-inner{flex-direction:column;align-items:flex-start;gap:9px}
  .tgf-top-btn{right:14px;bottom:14px}}
@media (max-width:430px){.tgf-container{width:calc(100% - 28px)}}
@media (prefers-reduced-motion:reduce){.tgf *{animation:none!important;transition:none!important}}

/* ===== section: hero ===== */
.tgv-hero{padding:78px 0 84px}
.tgv-hero-inner{text-align:center;display:flex;flex-direction:column;align-items:center}
.tgv-hero .tg-display{margin:0 0 16px;max-width:16ch}
.tgv-hero-lead{margin:0 0 28px;max-width:62ch}
.tgv-hero .tg-search{width:min(100%,600px)}
.tgv-hero-go{min-height:38px;padding:0 18px;font-size:13px;flex:none}

.tgv-d1{animation-delay:.04s}.tgv-d2{animation-delay:.10s}.tgv-d3{animation-delay:.16s}
.tgv-d4{animation-delay:.22s}.tgv-d5{animation-delay:.28s}

.tgv-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;margin:22px 0 0;padding:0;list-style:none}
.tgv-trust li{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--tg-muted)}
.tgv-trust svg{width:15px;height:15px;padding:2px;border-radius:50%;flex:none;
  background:var(--tg-soft);color:var(--tg-green-deep)}

.tgv-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:26px}
.tgv-pills a{padding:7px 15px;border:1px solid var(--tg-border);border-radius:var(--tg-r-pill);
  background:rgba(255,255,255,.85);font-size:12.5px;font-weight:600;color:var(--tg-green-deep);
  transition:border-color .22s var(--tg-ease),transform .22s var(--tg-ease)}
.tgv-pills a:hover{border-color:var(--tg-green);transform:translateY(-2px)}

@media (max-width:1050px){.tgv-hero{padding:62px 0 68px}}
@media (max-width:760px){.tgv-hero{padding:48px 0 54px}.tgv-hero .tg-display{max-width:none}}
@media (max-width:520px){.tgv-hero-go{display:none}.tgv-trust{gap:12px}}
@media (prefers-reduced-motion:reduce){.tgv-hero *{animation:none!important;transition:none!important}}

/* ===== section: card-grid ===== */
/* Soft green corner glow, revealed on hover. The card clips its overflow, so
   a circle parked past the corner reads as a quarter round wash rather than a
   floating dot. Built from the brand ramp; no new colour enters the system. */
.tg-card-featured::after {
    content: "";
    position: absolute;
    top: -40px;
    right: -40px;
    width: 108px;
    height: 108px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.22), rgba(16, 185, 129, 0) 70%);
    opacity: 0;
    transform: scale(0.82);
    pointer-events: none;
    transition: opacity var(--tg-dur-base) var(--tg-ease),
                transform var(--tg-dur-base) var(--tg-ease);
}
.tg-card-featured:hover::after,
.tg-card-featured:focus-visible::after { opacity: 1; transform: scale(1); }

.tgv-grid{padding:84px 0}
.tgv-grid .tg-card{min-height:230px}
.tgv-grid .tg-card h3{margin:14px 0 6px}
.tgv-grid .tg-card p{flex:1}
.tgv-more{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:16px;
  padding-top:13px;border-top:1px solid var(--tg-border-light);
  font-size:11.5px;font-weight:700;letter-spacing:.03em;color:var(--tg-muted)}
.tgv-more svg{width:15px;height:15px;padding:3px;border-radius:50%;flex:none;
  background:var(--tg-soft);color:var(--tg-green-deep);
  transition:transform .22s var(--tg-ease)}
.tg-card:hover .tgv-more svg{transform:translateX(3px)}

/* Featured tile inverts onto the brand gradient */
.tgv-feat{background:linear-gradient(135deg,var(--tg-green-dark),var(--tg-green-deep));
  border-color:transparent;box-shadow:var(--tg-shadow-brand);--tg-heading:#fff}
.tgv-feat .tgv-more{color:#fff}
.tgv-feat p{color:rgba(255,255,255,.82)}
.tgv-feat .tgv-more{border-top-color:rgba(255,255,255,.18)}
.tgv-feat .tgv-more svg{background:rgba(255,255,255,.14);color:#fff}
.tgv-feat .tg-icon-chip{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.20);color:#fff;box-shadow:none}

.tgv-grid-foot{display:flex;justify-content:center;margin-top:34px}

@media (max-width:1050px){.tgv-grid{padding:68px 0}}
@media (max-width:760px){.tgv-grid{padding:52px 0}}
@media (max-width:520px){.tgv-grid{padding:40px 0}}
@media (prefers-reduced-motion:reduce){.tgv-grid *{animation:none!important;transition:none!important}}

/* ===== section: process ===== */
.tgv-proc{padding:84px 0}
.tgv-proc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;
  margin:0;padding:0;list-style:none;counter-reset:none}
.tgv-step{position:relative;padding:24px 22px 22px;
  border:1px solid var(--tg-border-light);border-radius:var(--tg-r-md);
  background:rgba(255,255,255,.94);box-shadow:var(--tg-shadow-card);
  transition:transform var(--tg-dur-base) var(--tg-ease),box-shadow var(--tg-dur-base) var(--tg-ease)}
.tgv-step:hover{transform:translateY(-4px);box-shadow:var(--tg-shadow-hover)}
/* Connector between steps. Hidden on the last one and on small screens. */
.tgv-step::after{content:"";position:absolute;top:50px;right:-18px;width:18px;height:1px;
  background:linear-gradient(90deg,var(--tg-border-green),transparent)}
.tgv-step-last::after{display:none}
.tgv-step-num{position:absolute;top:-11px;left:22px;
  min-width:26px;height:26px;padding:0 8px;border-radius:var(--tg-r-pill);
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--tg-green-light),var(--tg-green-dark));color:#fff;
  font-size:12px;font-weight:800;box-shadow:var(--tg-shadow-brand)}
.tgv-step h3{margin:14px 0 6px}
.tgv-step p{margin:0}

@media (max-width:1050px){
  .tgv-proc{padding:68px 0}
  .tgv-proc-grid{grid-template-columns:1fr}
  .tgv-step::after{display:none}
}
@media (max-width:760px){.tgv-proc{padding:52px 0}}
@media (prefers-reduced-motion:reduce){.tgv-proc *{animation:none!important;transition:none!important}}

/* ===== section: cta-band ===== */
.tgv-cta{padding:74px 0}
.tgv-cta-inner{position:relative;z-index:1;text-align:center;display:flex;flex-direction:column;align-items:center}
.tgv-cta .tg-h2{margin:0 0 12px;max-width:20ch}
.tgv-cta p{margin:0;max-width:56ch;font-size:15.5px;line-height:1.65}
.tgv-cta-eyebrow{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);color:#fff;
  backdrop-filter:blur(10px)}
.tgv-cta-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:26px}
@media (max-width:760px){.tgv-cta{padding:54px 0}}
@media (max-width:520px){.tgv-cta{padding:44px 0}.tgv-cta-actions{width:100%}}
@media (prefers-reduced-motion:reduce){.tgv-cta *{animation:none!important;transition:none!important}}

/* ===== section: faq ===== */
.tgv-faq{padding:84px 0}
.tgv-faq-wrap{max-width:820px}
.tgv-faq-note{margin:24px 0 0;text-align:center;font-size:13.5px;color:var(--tg-muted)}
.tgv-faq-note a{color:var(--tg-green-deep);font-weight:650}
@media (max-width:1050px){.tgv-faq{padding:68px 0}}
@media (max-width:760px){.tgv-faq{padding:52px 0}}
@media (prefers-reduced-motion:reduce){.tgv-faq *{animation:none!important;transition:none!important}}/* ==========================================================================
   Invest Marathi: site layer
   Blog surfaces, tool pages, and the tool-widget component library.
   Loads after tokens, the Devanagari layer and components.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Neutralise the GeneratePress shell.
   Do not fight the parent theme rule by rule. Strip its containers, then
   build inside them.
   -------------------------------------------------------------------------- */
body.tg-surface #page,
body.tg-surface #content,
body.tg-surface .site-content,
body.tg-surface .content-area,
body.tg-surface .inside-article {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

body.tg-surface .site-content { display: block; }

body.tg-surface .widget-area,
body.tg-surface #right-sidebar,
body.tg-surface #left-sidebar,
body.tg-surface .entry-meta,
body.tg-surface .post-navigation { display: none; }

/* GeneratePress adds its own top spacing above the header. */
body.tg-surface .site-header { display: none; }

/* --------------------------------------------------------------------------
   2. Blog surfaces
   -------------------------------------------------------------------------- */
.im-blog {
    padding: 64px 0 84px;
}
.im-blog-head {
    max-width: 760px;
    margin: 0 auto 40px;
    text-align: center;
}
.im-blog-head h1 { margin: 0 0 12px; }
.im-blog-head p  { margin: 0; color: var(--tg-muted); font-size: 15.5px; }

.im-post-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--tg-border-light);
    border-radius: var(--tg-r-md);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--tg-shadow-card);
    transition: transform var(--tg-dur-base) var(--tg-ease),
                border-color var(--tg-dur-base) var(--tg-ease),
                box-shadow var(--tg-dur-base) var(--tg-ease);
}
.im-post-card:hover {
    transform: translateY(-4px);
    border-color: var(--tg-border-green);
    box-shadow: var(--tg-shadow-hover);
}
.im-post-thumb {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--tg-soft);
}
.im-post-thumb img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform .45s var(--tg-ease);
}
.im-post-card:hover .im-post-thumb img { transform: scale(1.04); }
.im-post-body { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; }
.im-post-cat {
    align-self: flex-start;
    padding: 4px 10px;
    margin-bottom: 10px;
    border-radius: var(--tg-r-pill);
    background: var(--tg-soft);
    color: var(--tg-green-deep);
    font-size: 11px;
    font-weight: 700;
}
/* The card title is an h2 in the blog listing but an h3 on the home page,
   where the section already owns the h2, so both carry the same styling. */
.im-post-body h2,
.im-post-body h3 { margin: 0 0 8px; font-size: 1.05rem; line-height: 1.45; }
.im-post-body h2 a,
.im-post-body h3 a { color: var(--tg-ink); }
.im-post-card:hover .im-post-body h2 a,
.im-post-card:hover .im-post-body h3 a { color: var(--tg-green-deep); }
/* Cards are title-first and compact; the meta row takes the leftover space
   that the excerpt used to fill. */
.im-post-body h2, .im-post-body h3 { flex: 1; }
.im-post-meta {
    display: flex; align-items: center; gap: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--tg-border-light);
    color: var(--tg-muted-light); font-size: 12px;
}
.im-post-meta span + span::before { content: "·"; margin-right: 10px; }

.im-pagination {
    display: flex; justify-content: center; gap: 8px;
    margin-top: 40px;
}
.im-pagination .page-numbers {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; height: 40px; padding: 0 12px;
    border: 1px solid var(--tg-border); border-radius: var(--tg-r-sm);
    background: #fff; color: var(--tg-text); font-size: 14px; font-weight: 600;
    transition: border-color .2s var(--tg-ease), color .2s var(--tg-ease);
}
.im-pagination .page-numbers:hover { border-color: var(--tg-green); color: var(--tg-green-deep); }
.im-pagination .page-numbers.current {
    background: var(--tg-green); border-color: var(--tg-green); color: #fff;
}

/* Single post: content column plus sticky sidebar, the canonical blog-single
   layout for this system. Collapses to one column at 1050. */
.im-single {
    position: relative;
    padding: 48px 0 84px;
    /* .tg-ground clips with overflow:hidden, which makes this a scroll
       container and silently disables position:sticky in the sidebar.
       overflow:clip clips the same way without creating one. The grid overlay
       is height-capped below, so there is nothing else to contain. */
    overflow: clip;
}
/* tg-grid-bg uses inset:0, so it fills its section and the mask fades across
   that whole height. That is one screen on a hero, but a long article makes it
   thousands of pixels tall and the grid ends up behind the body text. Cap it to
   the masthead band so the fade lands where the design system intends. */
.im-single .tg-grid-bg { bottom: auto; height: 460px; }

.im-single-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 40px;
    align-items: start;
}
.im-single-main { min-width: 0; }
/* The sticky child needs a containing block as tall as the article to travel
   through. align-items:start would size this column to its content instead. */
.im-single-side { align-self: stretch; }

.im-single-head { margin: 0 0 28px; }
.im-single-cat {
    display: inline-flex; align-items: center; gap: 7px;
    margin-bottom: 16px;
    transition: border-color var(--tg-dur-fast) var(--tg-ease), color var(--tg-dur-fast) var(--tg-ease);
}
.im-single-cat:hover { border-color: var(--tg-border-green); color: var(--tg-green-dark); }

.im-single-title {
    margin: 0 0 14px;
    font-family: "Sora", sans-serif;
    font-size: clamp(1.75rem, 3.4vw, 2.6rem);
    font-weight: 800;
    line-height: 1.14;
    letter-spacing: -0.035em;
    color: var(--tg-ink);
}
.im-single-dek {
    max-width: 62ch; margin: 0 0 20px;
    color: var(--tg-muted); font-size: 1rem; line-height: 1.65;
}

.im-single-meta {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    padding-top: 18px;
    border-top: 1px solid var(--tg-border-light);
    color: var(--tg-muted-light); font-size: 13px;
}
.im-single-byline { display: inline-flex; align-items: center; gap: 9px; color: var(--tg-text); font-weight: 600; }
.im-mark {
    display: grid;
    place-items: center;
    flex: none;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tg-green-light), var(--tg-green-deep));
    color: #fff;
    box-shadow: var(--tg-shadow-brand);
}
.im-mark svg { width: 54%; height: 54%; }
.im-mark-sm { width: 30px; height: 30px; }
.im-mark-lg { width: 56px; height: 56px; }
.im-single-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--tg-border-green); }

.im-single-thumb {
    margin: 0 0 32px;
    border-radius: var(--tg-r-md); overflow: hidden;
    border: 1px solid var(--tg-border-light); box-shadow: var(--tg-shadow-card);
}
.im-single-thumb img { width: 100%; display: block; }

.im-article { max-width: 74ch; }
.im-single-note { margin-top: 32px; }

.im-author {
    display: flex; align-items: flex-start; gap: 18px;
    margin: 40px 0 0; padding: 22px;
    border: 1px solid var(--tg-border-light); border-radius: var(--tg-r-md);
    background: rgba(255, 255, 255, 0.94); box-shadow: var(--tg-shadow-card);
}

.im-author-label { display: block; margin-bottom: 6px; color: var(--tg-muted-light); }
.im-author h2 { margin: 0 0 6px; font-family: "Sora", sans-serif; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; color: var(--tg-ink); }
.im-author p  { margin: 0; color: var(--tg-muted); font-size: 13.5px; line-height: 1.7; }

/* Sidebar */
.im-side-sticky {
    position: sticky; top: 96px;
    display: flex; flex-direction: column; gap: 16px;
    /* With the contents list in here the column can outgrow the viewport, and
       a sticky element taller than the screen strands its lower half. */
    max-height: calc(100vh - 112px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}
.im-side-sticky::-webkit-scrollbar { width: 6px; }
.im-side-sticky::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--tg-border-green); }

.im-side-card {
    padding: 20px;
    border: 1px solid var(--tg-border-light); border-radius: var(--tg-r-md);
    background: rgba(255, 255, 255, 0.94); box-shadow: var(--tg-shadow-card);
}
.im-side-head {
    display: flex; align-items: center; gap: 11px;
    padding-bottom: 14px; margin-bottom: 14px;
    border-bottom: 1px solid var(--tg-border-light);
}
.im-side-head .tg-icon-chip { width: 36px; height: 36px; border-radius: 10px; flex: none; }
.im-side-head .tg-icon-chip svg { width: 17px; height: 17px; }
.im-side-head strong { display: block; font-family: "Sora", sans-serif; font-size: 14px; font-weight: 700; letter-spacing: -0.02em; color: var(--tg-ink); }
.im-side-head small  { display: block; margin-top: 2px; font-size: 11.5px; color: var(--tg-muted-light); }

.im-side-tools { list-style: none; margin: 0; padding: 0; }
.im-side-tools a {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 11px; border-radius: var(--tg-r-sm);
    transition: background var(--tg-dur-fast) var(--tg-ease);
}
.im-side-tools a:hover { background: var(--tg-soft); }
.im-side-tools strong { display: block; font-size: 13.5px; font-weight: 650; color: var(--tg-ink); }
.im-side-tools small  { display: block; margin-top: 2px; font-size: 11.5px; color: var(--tg-muted); line-height: 1.5; }
.im-side-tools svg    { width: 15px; height: 15px; flex: none; color: var(--tg-muted-light); }
.im-side-tools a:hover svg { color: var(--tg-green-deep); }
.im-side-cta { width: 100%; margin-top: 14px; }
.im-side-cta svg { width: 15px; height: 15px; }

.im-side-topics { display: flex; flex-wrap: wrap; gap: 7px; }
.im-side-topics a {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 12px;
    border: 1px solid var(--tg-border); border-radius: var(--tg-r-pill);
    background: #fff; color: var(--tg-text); font-size: 12.5px; font-weight: 600;
    transition: border-color var(--tg-dur-fast) var(--tg-ease), color var(--tg-dur-fast) var(--tg-ease), background var(--tg-dur-fast) var(--tg-ease);
}
.im-side-topics a:hover { border-color: var(--tg-border-green); color: var(--tg-green-deep); background: var(--tg-soft); }
.im-side-topics a.is-active { border-color: var(--tg-green); background: var(--tg-soft); color: var(--tg-green-deep); }
.im-side-topics span { color: var(--tg-muted-light); font-size: 11px; font-weight: 700; }

.im-related-head { margin-bottom: 24px; }

/* --------------------------------------------------------------------------
   3. Tool pages
   -------------------------------------------------------------------------- */
.imt-archive { padding: 64px 0 84px; }
.imt-archive-search { margin: 0 auto 36px; }
.imt-empty { text-align: center; color: var(--tg-muted); }

.imt-single { padding: 44px 0 80px; }
.imt-crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; color: var(--tg-muted-light); font-size: 13px; }
.imt-crumbs a { color: var(--tg-muted); }
.imt-crumbs a:hover { color: var(--tg-green-deep); }
.imt-head { max-width: 760px; margin: 0 0 26px; }
.imt-head .tg-display { margin: 0 0 10px; font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.imt-draft-note {
    padding: 10px 14px; margin-bottom: 18px;
    border-left: 3px solid #d97706; border-radius: 0 9px 9px 0;
    background: #fffbeb; color: #b45309; font-size: 13.5px;
}
.imt-stage {
    padding: 8px;
    border: 1px solid var(--tg-border-light); border-radius: var(--tg-r-lg);
    background: rgba(255, 255, 255, 0.94); box-shadow: var(--tg-shadow-card);
}
.imt-prose { max-width: 760px; margin: 40px 0 0; }
.imt-disclaimer {
    max-width: 760px; margin: 28px 0 0; padding: 13px 16px;
    border-left: 3px solid var(--tg-border-green); border-radius: 0 9px 9px 0;
    background: var(--tg-soft); color: var(--tg-green-deep);
    font-size: 13px; line-height: 1.8;
}
.imt-related { margin-top: 56px; }
.imt-related .tg-h2 { margin-bottom: 22px; font-size: 1.4rem; }

/* --------------------------------------------------------------------------
   4. Tool widget components.
   A tool uses these classes and ships no CSS of its own. Scoped to
   .toolsuite-tool-container so a tool can never restyle the page.
   -------------------------------------------------------------------------- */
.toolsuite-tool-container {
    --ts-primary: var(--tg-green);
    --ts-accent:  var(--tg-green-light);
    width: 100%;
    padding: 10px;
    color: var(--tg-ink);
    line-height: 1.6;
}
.toolsuite-tool-container * { box-sizing: border-box; }

.toolsuite-tool-container .ts-workspace { display: grid; grid-template-columns: 330px 1fr; gap: 18px; }

.toolsuite-tool-container .ts-card,
.toolsuite-tool-container .ts-panel {
    padding: 20px;
    border: 1px solid var(--tg-border-light);
    border-radius: var(--tg-r-sm);
    background: #fff;
}
.toolsuite-tool-container .ts-card-title {
    margin-bottom: 14px;
    font-size: 14px; font-weight: 700; color: var(--tg-ink);
}

.toolsuite-tool-container .ts-label {
    display: block; margin-bottom: 6px;
    font-size: 12px; font-weight: 700; color: var(--tg-muted);
}
.toolsuite-tool-container .ts-input,
.toolsuite-tool-container .ts-select,
.toolsuite-tool-container input[type="number"],
.toolsuite-tool-container input[type="text"],
.toolsuite-tool-container select {
    width: 100%; height: 46px; padding: 0 14px; margin-bottom: 14px;
    border: 1px solid var(--tg-border); border-radius: 10px;
    background: var(--tg-soft-3); color: var(--tg-ink);
    font-family: inherit; font-size: 14px; font-weight: 500;
    outline: none;
    transition: border-color .15s var(--tg-ease), box-shadow .15s var(--tg-ease), background .15s var(--tg-ease);
}
.toolsuite-tool-container .ts-input:focus,
.toolsuite-tool-container input:focus,
.toolsuite-tool-container select:focus {
    border-color: var(--tg-green);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

.toolsuite-tool-container .ts-actions-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.toolsuite-tool-container .ts-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 0 20px;
    border: 1px solid transparent; border-radius: var(--tg-r-pill);
    font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
    transition: transform .2s var(--tg-ease), box-shadow .2s var(--tg-ease);
}
.toolsuite-tool-container .ts-btn:hover { transform: translateY(-2px); }
.toolsuite-tool-container .ts-btn-primary {
    background: linear-gradient(120deg, var(--tg-green-light), var(--tg-green-dark));
    color: #fff; box-shadow: var(--tg-shadow-brand);
}
.toolsuite-tool-container .ts-btn-outline {
    background: #fff; border-color: var(--tg-border); color: var(--tg-text);
}
.toolsuite-tool-container .ts-btn-outline:hover { border-color: var(--tg-green); color: var(--tg-green-deep); }

.toolsuite-tool-container .ts-kpi-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px; margin-bottom: 18px;
}
.toolsuite-tool-container .ts-kpi-card {
    padding: 15px 17px;
    border: 1px solid var(--tg-border-light); border-radius: var(--tg-r-sm);
    background: linear-gradient(180deg, #fff, var(--tg-soft-3));
}
.toolsuite-tool-container .ts-kpi-label {
    margin-bottom: 6px;
    font-size: 12px; font-weight: 700; color: var(--tg-muted);
}
.toolsuite-tool-container .ts-kpi-value {
    font-size: 22px; font-weight: 800; color: var(--tg-ink);
    font-variant-numeric: tabular-nums;
}

.toolsuite-tool-container .ts-table-wrapper {
    overflow: auto; max-height: 340px;
    border: 1px solid var(--tg-border-light); border-radius: var(--tg-r-sm);
    background: #fff;
}
.toolsuite-tool-container table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.toolsuite-tool-container th {
    position: sticky; top: 0;
    padding: 11px 14px; text-align: right;
    background: var(--tg-soft-3); color: var(--tg-muted);
    font-size: 12px; font-weight: 700;
    border-bottom: 1px solid var(--tg-border);
}
.toolsuite-tool-container th:first-child,
.toolsuite-tool-container td:first-child { text-align: left; }
.toolsuite-tool-container td {
    padding: 10px 14px; text-align: right;
    border-bottom: 1px solid var(--tg-border-light);
    font-variant-numeric: tabular-nums;
}
.toolsuite-tool-container tr:last-child td { border-bottom: 0; }
.toolsuite-tool-container tr:hover td { background: var(--tg-soft-3); }

.toolsuite-tool-container .ts-notice {
    padding: 12px 16px; margin: 12px 0;
    border-left: 4px solid; border-radius: 0 10px 10px 0;
    font-size: 13.5px;
}
.toolsuite-tool-container .ts-notice.success { background: #f0fdf4; border-color: #16a34a; color: #15803d; }
.toolsuite-tool-container .ts-notice.error   { background: #fef2f2; border-color: #dc2626; color: #b91c1c; }
.toolsuite-tool-container .ts-notice.warning { background: #fffbeb; border-color: #d97706; color: #b45309; }

/* --------------------------------------------------------------------------
   5. Responsive: the four canonical breakpoints
   -------------------------------------------------------------------------- */
@media (max-width: 1050px) {
    .toolsuite-tool-container .ts-workspace { grid-template-columns: 1fr; }
    /* One column. display:contents lifts the sidebar cards into the grid so
       the contents list can sit above the article, where it is still useful,
       while the calculators and topics stay below it. */
    .im-single-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .im-single-side, .im-side-sticky { display: contents; }
    .im-single-main { order: 2; }
    .im-side-toc { order: 1; }
    .im-side-card:not(.im-side-toc) { order: 3; }
    .im-side-toc .im-toc-list { max-height: none; }
    .im-article { max-width: none; }
}
@media (max-width: 760px) {
    .im-blog, .imt-archive { padding: 44px 0 60px; }
    .im-blog-head { text-align: left; }
    .im-single { padding: 36px 0 64px; }
    .im-single-thumb { margin-bottom: 26px; }
    .im-side-card { margin-bottom: 0; }
}
@media (max-width: 520px) {
    .imt-stage { padding: 4px; }
    .toolsuite-tool-container { padding: 4px; }
    .toolsuite-tool-container .ts-kpi-grid { grid-template-columns: 1fr 1fr; }
    .im-author { flex-direction: column; }
    .im-single-meta { gap: 8px; font-size: 12.5px; }
    .im-single-dek { font-size: 0.9375rem; }
    .im-side-card { padding: 17px; }
}
@media (max-width: 430px) {
    .im-mark-sm { width: 26px; height: 26px; }
    .im-side-topics a { font-size: 12px; padding: 5px 10px; }
}

@media (prefers-reduced-motion: reduce) {
    body.tg-surface *,
    .toolsuite-tool-container * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* --------------------------------------------------------------------------
   6. Wrappers that carry no visual style of their own but must not be inline,
      because their children are block level.
   -------------------------------------------------------------------------- */
.tgh-logo-copy { display: block; min-width: 0; }

.im-tool { width: 100%; }
.im-tool-body { width: 100%; min-width: 0; }

/* ===== section: post content enhancements ===== */
/* Table of contents and in-post FAQ. Both replace plugins; the FAQ reuses
   the .tg-faq-* component so posts and the homepage share one accordion. */
/* Contents list. Lives in the sidebar so it stays in view while the article
   scrolls; a very long list scrolls inside its own card rather than pushing
   the calculators off the screen. */
.im-side-toc .im-toc-list {
    list-style: none;
    margin: 0; padding: 0;
    max-height: 46vh; overflow-y: auto;
    overscroll-behavior: contain;
}
.im-toc-item { margin: 0; }
.im-toc-item a {
    display: block;
    padding: 7px 10px 7px 12px;
    border-left: 2px solid transparent;
    border-radius: 0 var(--tg-r-xs) var(--tg-r-xs) 0;
    color: var(--tg-muted); font-size: 13px; line-height: 1.5;
    transition: color var(--tg-dur-fast) var(--tg-ease),
                background var(--tg-dur-fast) var(--tg-ease),
                border-color var(--tg-dur-fast) var(--tg-ease);
}
.im-toc-item a:hover {
    border-left-color: var(--tg-green);
    background: var(--tg-soft);
    color: var(--tg-green-deep);
}
.im-toc-item.is-h2 > a { font-weight: 600; color: var(--tg-text); }
.im-toc-item.is-h3 > a { padding-left: 24px; font-size: 12.5px; }

/* Anchor targets sit under the sticky header without this. */
.im-article :is(h2, h3)[id] { scroll-margin-top: 96px; }

.im-post-faq { margin: 28px 0; }

/* Media inside the article. Post images arrive from the editor with no styling
   at all, so they need the card radius to sit with the rest of the system, and
   a width cap so a full-size upload cannot break the column. */
.tg-prose img {
    max-width: 100%; height: auto;
    border-radius: var(--tg-r-md);
    box-shadow: var(--tg-shadow-card);
    transition: transform var(--tg-dur-base) var(--tg-ease),
                box-shadow var(--tg-dur-base) var(--tg-ease);
}
/* Same lift a card gets, so an image in the body reads as part of the system
   rather than a raw upload dropped into the text. */
.tg-prose img:hover {
    transform: translateY(-3px);
    box-shadow: var(--tg-shadow-hover);
}
.tg-prose figure { margin: 24px 0; }
.tg-prose figure img { display: block; margin-inline: auto; }
.tg-prose p > img,
.tg-prose p > a > img { display: block; margin: 20px auto; }
.tg-prose figcaption {
    margin-top: 9px;
    color: var(--tg-muted-light); font-size: 12.5px; line-height: 1.6; text-align: center;
}
.tg-prose iframe {
    max-width: 100%;
    border-radius: var(--tg-r-md);
}
/* A wide table would otherwise widen the whole column on a narrow screen. */
.tg-prose .wp-block-table { overflow-x: auto; }
.tg-prose table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tg-prose th, .tg-prose td {
    padding: 10px 13px; text-align: left;
    border: 1px solid var(--tg-border-light);
}
.tg-prose th { background: var(--tg-soft-3); color: var(--tg-ink); font-weight: 700; }

/* ===== section: link decoration ===== */
/* GeneratePress injects `a:hover, a:focus { text-decoration: underline }`.
   Underlining every nav item, card title, tool link and button on hover reads
   as broken chrome, so it is switched off across the site. Two classes here to
   outrank that element-plus-pseudo-class rule. */
.tgh a:hover, .tgh a:focus,
.tgf a:hover, .tgf a:focus,
.tg-section a:hover, .tg-section a:focus,
.im-single a:hover, .im-single a:focus { text-decoration: none; }

/* Body copy is the exception: a link inside an article stays underlined,
   which is the readable and accessible default. */
/* Links in body copy carry no rule at rest and grow one from the left on
   hover. The underline is a background gradient rather than a transitioned
   text-decoration-color: Chrome updates the computed colour on that property
   but does not repaint it, so the line never actually appeared. box-decoration
   -break makes each line box of a wrapped link carry its own underline. */
.tg-prose a {
    text-decoration: none;
    padding-bottom: 1px;
    background-image: linear-gradient(var(--tg-green), var(--tg-green));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 2px;
    -webkit-box-decoration-break: clone;
            box-decoration-break: clone;
    transition: background-size 0.3s var(--tg-ease), color 0.2s var(--tg-ease);
}
.tg-prose a:hover,
.tg-prose a:focus-visible {
    background-size: 100% 2px;
    color: var(--tg-green);
}

/* A link wrapping an image or a button is not body text, so it gets no rule. */
.tg-prose a:has(> img),
.tg-prose a:has(> figure),
.tg-prose a.tg-btn,
.tg-prose .wp-block-button a {
    background-image: none;
    padding-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
    .tg-prose a { transition: none; }
}

/* ===== section: standalone pages ===== */
/* Shared shell for About, Contact and Guest Post so the three read as one
   family rather than three one-off layouts. */
.im-page-hero { position: relative; padding: 62px 0 46px; overflow: clip; }
.im-page-hero .tg-grid-bg { bottom: auto; height: 420px; }
.im-page-hero-inner { max-width: 780px; }

.im-page-title {
    margin: 16px 0 16px;
    font-family: "Sora", sans-serif;
    font-size: clamp(1.9rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.038em;
    color: var(--tg-ink);
}
.im-page-lead { max-width: 62ch; margin: 0 0 26px; }

.im-page-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 34px; }

.im-page-facts {
    display: flex; flex-wrap: wrap; gap: 10px;
    margin: 0; padding: 0; list-style: none;
}
.im-page-facts li {
    padding: 12px 18px;
    border: 1px solid var(--tg-border-light); border-radius: var(--tg-r-sm);
    background: rgba(255, 255, 255, 0.94); box-shadow: var(--tg-shadow-card);
}
.im-page-facts strong {
    display: block;
    font-family: "Sora", sans-serif; font-size: 17px; font-weight: 800;
    letter-spacing: -0.02em; color: var(--tg-green-deep);
}
.im-page-facts small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--tg-muted-light); }

.im-page-band { padding: 34px 0; }
.im-page-band:last-of-type { padding-bottom: 72px; }
.im-page-prose { max-width: 74ch; margin-inline: auto; }

/* Mission statement: one large pulled quote, no card chrome competing with it. */
.im-mission {
    max-width: 860px; margin-inline: auto; padding: 30px 34px;
    border: 1px solid var(--tg-border-light); border-left: 3px solid var(--tg-green);
    border-radius: var(--tg-r-md);
    background: var(--tg-soft-3);
}
.im-mission-label { display: block; margin-bottom: 10px; color: var(--tg-muted-light); }
.im-mission p {
    margin: 0;
    font-family: "Sora", sans-serif; font-size: clamp(1.05rem, 1.8vw, 1.35rem);
    font-weight: 600; line-height: 1.55; letter-spacing: -0.02em; color: var(--tg-ink);
}

/* Numbered requirement rows */
.im-rules-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.im-rule {
    display: flex; align-items: flex-start; gap: 16px;
    padding: 20px 22px;
    border: 1px solid var(--tg-border-light); border-radius: var(--tg-r-md);
    background: rgba(255, 255, 255, 0.94); box-shadow: var(--tg-shadow-card);
    transition: transform var(--tg-dur-base) var(--tg-ease),
                border-color var(--tg-dur-base) var(--tg-ease),
                box-shadow var(--tg-dur-base) var(--tg-ease);
}
.im-rule:hover { transform: translateY(-4px); border-color: var(--tg-border-green); box-shadow: var(--tg-shadow-hover); }
.im-rule-num {
    flex: none;
    font-family: "Sora", sans-serif; font-size: 19px; font-weight: 800;
    letter-spacing: -0.02em; color: var(--tg-soft-2);
}
.im-rule h3 { margin: 0 0 6px; font-family: "Sora", sans-serif; font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; color: var(--tg-ink); }
.im-rule p  { margin: 0; color: var(--tg-muted); font-size: 13.5px; line-height: 1.7; }

/* Three step process */
.im-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.im-step {
    position: relative; padding: 24px 22px;
    border: 1px solid var(--tg-border-light); border-radius: var(--tg-r-md);
    background: rgba(255, 255, 255, 0.94); box-shadow: var(--tg-shadow-card);
}
.im-step-num {
    display: grid; place-items: center;
    width: 34px; height: 34px; margin-bottom: 14px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tg-green-light), var(--tg-green-dark));
    color: #fff; font-size: 14px; font-weight: 800;
}
.im-step h3 { margin: 0 0 7px; font-family: "Sora", sans-serif; font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; color: var(--tg-ink); }
.im-step p  { margin: 0; color: var(--tg-muted); font-size: 13.5px; line-height: 1.7; }

/* Contact: value line on a card, and the two column helper block */
.im-contact-value {
    display: block; margin-top: 12px; padding-top: 12px;
    border-top: 1px solid var(--tg-border-light);
    color: var(--tg-green-deep); font-size: 13px; font-weight: 650; word-break: break-word;
}
.im-two-col { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 34px; align-items: start; }
.im-col-head { margin-bottom: 18px; }
.im-col-head .tg-h2 { margin: 12px 0 0; }

.im-check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.im-check-list li {
    display: flex; align-items: flex-start; gap: 11px;
    padding: 13px 16px;
    border: 1px solid var(--tg-border-light); border-radius: var(--tg-r-sm);
    background: rgba(255, 255, 255, 0.94);
    color: var(--tg-text); font-size: 14px; line-height: 1.65;
}
.im-check-list svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--tg-green); }

.im-response-row { display: block; }
.im-response-row strong { display: block; font-size: 13.5px; font-weight: 650; color: var(--tg-ink); }
.im-response-row small  { display: block; margin-top: 2px; font-size: 12px; color: var(--tg-muted); }
.im-side-tools li:has(.im-response-row) { padding: 10px 11px; }

/* Closing band */
.im-page-cta { padding: 20px 0 78px; }
.im-page-cta .tg-band { display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap; }
.im-page-cta .tg-h2 { margin: 0 0 8px; }
.im-page-cta p { margin: 0; opacity: .85; }
.im-page-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 1050px) {
    .im-two-col { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
    .im-page-hero { padding: 44px 0 34px; }
    .im-rules-grid { grid-template-columns: minmax(0, 1fr); }
    .im-steps { grid-template-columns: minmax(0, 1fr); }
    .im-page-cta .tg-band { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 520px) {
    .im-page-facts { gap: 8px; }
    .im-page-facts li { padding: 10px 14px; }
    .im-mission { padding: 22px 20px; }
    .im-page-actions .tg-btn { width: 100%; }
}

/* GeneratePress prints a page's featured image as a full bleed banner above
   the content, from a code path that exposes no filter and whose action GP
   Premium re-registers during its own setup. These templates draw their own
   hero, so the banner only repeats the title. */
/* Every page draws its own banner inside the container, so GeneratePress's
   full bleed strip is always redundant. Hidden site wide rather than per
   template, which also covers pages created later. */
.page-header-image,
.featured-image.page-header-image { display: none; }

/* ===== section: button state overrides ===== */
/* GeneratePress injects `button:hover` and `button:focus` with a near black
   background. That is more specific than a single class, so every button in
   the chrome went dark on hover and stayed dark after a click. Each component
   restates its own background for all three states. */
.tgh .tgh-nav-link,
.tgh .tgh-nav-link:link { background: none; }
.tgh .tgh-nav-link:hover,
.tgh .tgh-nav-link:focus,
.tgh .tgh-nav-link:active,
.tgh .tgh-nav-link:focus-visible { background: var(--tg-soft); color: var(--tg-green-deep); }
/* The mega stays open while the trigger holds focus, so the trigger keeps the
   open look rather than reverting mid interaction. */
.tgh .tgh-has-mega:hover .tgh-mega-trigger,
.tgh .tgh-has-mega:focus-within .tgh-mega-trigger { background: var(--tg-soft); color: var(--tg-green-deep); }

.tgh .tgh-burger,
.tgh .tgh-burger:hover,
.tgh .tgh-burger:focus,
.tgh .tgh-burger:active,
.tgh .tgh-burger:focus-visible { background: #fff; color: var(--tg-ink); }
.tgh .tgh-burger:hover { border-color: var(--tg-border-green); }
.tgh .tgh-burger span { background: var(--tg-ink); }

.tgh .tgh-drawer-link,
.tgh .tgh-drawer-link:focus { background: none; }
.tgh .tgh-drawer-link:hover,
.tgh .tgh-drawer-link:active,
.tgh .tgh-drawer-link:focus-visible { background: var(--tg-soft); color: var(--tg-green-deep); }

.tg-faq-list .tg-faq-question,
.tg-faq-list .tg-faq-question:hover,
.tg-faq-list .tg-faq-question:focus,
.tg-faq-list .tg-faq-question:active { background: transparent; }

.tgf .tgf-top-btn,
.tgf .tgf-top-btn:hover,
.tgf .tgf-top-btn:focus,
.tgf .tgf-top-btn:active {
    background: linear-gradient(135deg, var(--tg-green-light), var(--tg-green-dark));
    color: #fff;
}

/* ===== section: universal page ===== */
/* The default for any page with no template chosen, so a page added later
   still lands in the site's design: centred, no sidebar, framed banner. */
.im-universal { position: relative; padding: 44px 0 78px; overflow: clip; }
.im-universal .tg-grid-bg { bottom: auto; height: 420px; }
.im-universal .tg-container { max-width: 880px; }

.im-universal-head { margin: 0 0 26px; text-align: center; }
.im-universal .im-page-title { margin: 0 0 14px; }
.im-universal .im-page-lead { margin-inline: auto; }
.im-universal-meta {
    display: flex; justify-content: center; gap: 10px;
    padding-top: 16px;
    border-top: 1px solid var(--tg-border-light);
    color: var(--tg-muted-light); font-size: 12.5px;
}

/* The banner is framed and rounded like every other surface, instead of the
   raw edge to edge image the parent theme prints. */
.im-universal-banner {
    margin: 0 0 32px;
    border: 1px solid var(--tg-border-light); border-radius: var(--tg-r-md);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--tg-shadow-card);
    overflow: hidden;
}
.im-universal-banner img { display: block; width: 100%; height: auto; border-radius: 0; box-shadow: none; }
.im-universal-banner img:hover { transform: none; box-shadow: none; }
.im-universal-banner figcaption {
    padding: 11px 16px;
    border-top: 1px solid var(--tg-border-light);
    color: var(--tg-muted-light); font-size: 12.5px; text-align: center;
}

.im-universal-body { max-width: none; }
.im-universal-body > :first-child { margin-top: 0; }

.im-page-links { margin-top: 24px; font-size: 14px; color: var(--tg-muted); }

.im-universal-children { margin-top: 44px; }
.im-universal-children .tg-h3 { margin: 0 0 16px; }
.im-child-list { display: grid; gap: 8px; }
.im-child-list a {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 17px;
    border: 1px solid var(--tg-border-light); border-radius: var(--tg-r-sm);
    background: rgba(255, 255, 255, 0.94);
    color: var(--tg-text); font-size: 14.5px; font-weight: 600;
    transition: border-color var(--tg-dur-fast) var(--tg-ease),
                background var(--tg-dur-fast) var(--tg-ease),
                color var(--tg-dur-fast) var(--tg-ease);
}
.im-child-list a:hover { border-color: var(--tg-border-green); background: var(--tg-soft); color: var(--tg-green-deep); }
.im-child-list svg { width: 16px; height: 16px; flex: none; }

@media (max-width: 760px) {
    .im-universal { padding: 32px 0 60px; }
    .im-universal-head { text-align: left; }
    .im-universal-meta { justify-content: flex-start; }
}

/* ===== section: mobile section strip ===== */
/* One horizontally scrollable rail under the header, mobile only. The full nav
   is hidden below 1050px, so this keeps the sections reachable with a swipe
   instead of a drawer trip. Desktop never sees it.

   The labels are plain text rather than pills: a bordered chip is a card, and a
   row of cards inside a bar that already sits under another bar reads heavy and
   eats vertical space. State is carried by weight, colour and a rule under the
   active item, which is quieter and shorter. */
.tgh-strip { display: none; }

@media (max-width: 1050px) {
    .tgh-strip {
        display: block;
        position: relative;
        /* No border-top: the header bar above already draws one, and two
           hairlines together read as a seam. */
        border-bottom: 1px solid var(--tg-border);
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(14px);
    }
    /* A fade on the trailing edge signals there is more to swipe to. */
    .tgh-strip::after {
        content: "";
        position: absolute; top: 0; right: 0; bottom: 0;
        width: 26px; pointer-events: none;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.96));
    }
    .tgh-strip-track {
        display: flex; align-items: stretch; gap: 20px;
        padding-inline: 20px 34px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        /* Without this the snapport is the padding box, so an item snaps flush
           to the screen edge and eats the gutter entirely. */
        scroll-padding-inline: 20px 34px;
    }
    .tgh-strip-track::-webkit-scrollbar { display: none; }

    .tgh-strip-link {
        position: relative;
        flex: none;
        scroll-snap-align: start;
        display: inline-flex; align-items: center; gap: 6px;
        padding: 11px 0;
        color: var(--tg-muted);
        font-size: 13px; font-weight: 600; white-space: nowrap;
        transition: color var(--tg-dur-fast) var(--tg-ease);
    }
    /* The indicator sits on the strip's own bottom hairline. */
    .tgh-strip-link::after {
        content: "";
        position: absolute; left: 0; right: 0; bottom: -1px;
        height: 2px; border-radius: 2px 2px 0 0;
        background: transparent;
        transition: background var(--tg-dur-fast) var(--tg-ease);
    }
    .tgh-strip-link:hover,
    .tgh-strip-link:focus-visible { color: var(--tg-green-deep); }
    .tgh-strip-link.is-active { color: var(--tg-green-deep); font-weight: 700; }
    .tgh-strip-link.is-active::after {
        background: linear-gradient(90deg, var(--tg-green-light), var(--tg-green-dark));
    }

    /* Muted by default so the labels stay the primary signal, full strength
       on the current section. */
    .tgh-strip-icon {
        width: 15px; height: 15px;
        flex: none;
        opacity: 0.62;
        transition: opacity var(--tg-dur-fast) var(--tg-ease);
    }
    .tgh-strip-link:hover .tgh-strip-icon,
    .tgh-strip-link:focus-visible .tgh-strip-icon { opacity: 1; }
    .tgh-strip-link.is-active .tgh-strip-icon { opacity: 1; }
}
@media (max-width: 430px) {
    .tgh-strip-track {
        padding-inline: 14px 28px;
        scroll-padding-inline: 14px 28px;
        gap: 16px;
    }
    .tgh-strip-link { font-size: 12.5px; padding: 10px 0; gap: 5px; }
    .tgh-strip-icon { width: 14px; height: 14px; }
}

/* ==========================================================================
   BATCH: TL;DR, in-article contents, premium bullets, latest-posts widget,
   mobile search sheet, mobile footer. Appended so the existing cascade is
   untouched and everything here can be reverted as one block.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TL;DR standfirst
   -------------------------------------------------------------------------- */
.im-single-dek {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 18px;
    padding: 14px 16px;
    border: 1px solid var(--tg-border-light);
    border-left: 3px solid var(--tg-green);
    border-radius: 0 var(--tg-r-sm) var(--tg-r-sm) 0;
    background: var(--tg-soft-3);
    color: var(--tg-text);
    font-size: 15.5px;
    line-height: 1.75;
}
.im-dek-tag {
    flex: none;
    margin-top: 2px;
    padding: 2px 8px;
    border-radius: var(--tg-r-pill);
    background: var(--tg-green-deep);
    color: #fff;
    font-family: "Mukta", sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   2. Premium bullets
   The marker is drawn, not typed, so it can carry the brand and animate.
   -------------------------------------------------------------------------- */
.tg-prose ul { list-style: none; margin: 0 0 20px; padding: 0; }
.tg-prose ul > li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 11px;
}
/* Soft ring, so the dot sits on a tinted disc rather than floating. */
.tg-prose ul > li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0.72em;
    width: 16px; height: 16px;
    margin-top: -8px;
    border-radius: 50%;
    background: var(--tg-soft);
    transition: transform 0.28s var(--tg-ease), background 0.28s var(--tg-ease);
}
.tg-prose ul > li::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 0.72em;
    width: 6px; height: 6px;
    margin-top: -3px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tg-green-light), var(--tg-green-dark));
    transition: transform 0.28s var(--tg-ease);
}
.tg-prose ul > li:hover::before { transform: scale(1.18); background: var(--tg-soft-2); }
.tg-prose ul > li:hover::after  { transform: scale(1.25); }

/* Numbered lists get the same disc treatment with the real number inside. */
.tg-prose ol { list-style: none; counter-reset: im-ol; margin: 0 0 20px; padding: 0; }
.tg-prose ol > li {
    position: relative;
    counter-increment: im-ol;
    padding-left: 34px;
    margin-bottom: 11px;
}
.tg-prose ol > li::before {
    content: counter(im-ol);
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 22px; height: 22px;
    margin-top: -11px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--tg-soft);
    color: var(--tg-green-deep);
    font-family: "Mukta", sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    transition: transform 0.28s var(--tg-ease), background 0.28s var(--tg-ease), color 0.28s var(--tg-ease);
}
.tg-prose ol > li:hover::before {
    transform: scale(1.1);
    background: linear-gradient(135deg, var(--tg-green-light), var(--tg-green-dark));
    color: #fff;
}
.tg-prose li > ul,
.tg-prose li > ol { margin: 10px 0 0; }

/* --------------------------------------------------------------------------
   3. Latest posts widget
   -------------------------------------------------------------------------- */
.im-more { margin-top: 54px; }
.im-more-head { margin-bottom: 20px; }
.im-more-head .tg-h2 { margin: 8px 0 0; font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.im-more-list {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    border: 1px solid var(--tg-border-light);
    border-radius: var(--tg-r-md);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--tg-shadow-card);
    overflow: hidden;
}
.im-more-item + .im-more-item { border-top: 1px solid var(--tg-border-light); }
.im-more-link {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 13px 16px;
    color: inherit;
    transition: background var(--tg-dur-fast) var(--tg-ease);
}
.im-more-link:hover { background: var(--tg-soft-3); }
.im-more-thumb {
    width: 62px; height: 62px;
    flex: none;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: var(--tg-r-sm);
    background: var(--tg-soft);
}
.im-more-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.im-more-num {
    color: var(--tg-green-deep);
    font-family: "Mukta", sans-serif;
    font-size: 19px; font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.im-more-copy { min-width: 0; }
.im-more-cat {
    display: inline-block;
    margin-bottom: 3px;
    color: var(--tg-green-deep);
    font-size: 10.5px; font-weight: 700;
}
.im-more-title {
    display: block;
    color: var(--tg-ink);
    font-family: "Anek Devanagari", "Mukta", sans-serif;
    font-size: 15px; font-weight: 600; line-height: 1.45;
    /* Two lines keeps every row the same height regardless of title length. */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.im-more-link:hover .im-more-title { color: var(--tg-green-deep); }
.im-more-meta {
    display: flex; align-items: center; gap: 8px;
    margin-top: 4px;
    color: var(--tg-muted-light);
    font-size: 12px;
}
.im-more-go {
    display: grid; place-items: center;
    width: 26px; height: 26px;
    flex: none;
    border-radius: 50%;
    background: var(--tg-soft);
    color: var(--tg-green-deep);
    transition: transform var(--tg-dur-fast) var(--tg-ease);
}
.im-more-go svg { width: 14px; height: 14px; }
.im-more-link:hover .im-more-go { transform: translateX(3px); }
.im-more-all { display: inline-flex; }
.im-more-all svg { width: 15px; height: 15px; }

/* --------------------------------------------------------------------------
   4. Mobile search sheet
   -------------------------------------------------------------------------- */
.tgh-iconbtn {
    display: none;
    width: 42px; height: 42px;
    align-items: center; justify-content: center;
    border: 1px solid var(--tg-border);
    border-radius: var(--tg-r-sm);
    background: #fff;
    color: var(--tg-ink);
    transition: border-color var(--tg-dur-fast) var(--tg-ease), color var(--tg-dur-fast) var(--tg-ease);
}
.tgh-iconbtn:hover { border-color: var(--tg-green); color: var(--tg-green-deep); }
.tgh-iconbtn svg { width: 18px; height: 18px; }

.im-search-sheet {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: none;
    padding: 14px;
    /* A light green frost rather than a dark scrim. The site is a light
       surface throughout, so dimming it to near black read as a borrowed
       modal from some other design. */
    background: rgba(240, 250, 245, 0.86);
    backdrop-filter: blur(12px) saturate(1.15);
}
.im-search-sheet.is-open { display: block; }
.im-search-panel {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    padding: 12px;
    border: 1px solid var(--tg-border-green);
    border-radius: var(--tg-r-lg);
    background: #fff;
    box-shadow: 0 18px 44px rgba(6, 95, 70, 0.16);
}
.im-search-bar { display: flex; align-items: center; gap: 10px; }
.im-search-bar .tg-search-field { flex: 1; min-width: 0; }
.im-search-close {
    width: 42px; height: 42px;
    flex: none;
    display: grid; place-items: center;
    border: 1px solid var(--tg-border);
    border-radius: var(--tg-r-sm);
    background: #fff;
    color: var(--tg-muted);
    cursor: pointer;
}
.im-search-close:hover { border-color: var(--tg-green); color: var(--tg-green-deep); }
.im-search-close svg { width: 18px; height: 18px; }
.im-search-panel .tg-search-results {
    position: static;
    margin-top: 10px;
    box-shadow: none;
    border-color: var(--tg-border-light);
}
.im-search-hint {
    margin: 10px 2px 2px;
    color: var(--tg-muted-light);
    font-size: 12px;
}
.tg-search-kind {
    flex: none;
    padding: 3px 9px;
    border-radius: var(--tg-r-pill);
    background: var(--tg-soft);
    color: var(--tg-green-deep);
    font-size: 10.5px; font-weight: 700;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   5. Footer icons
   -------------------------------------------------------------------------- */
.tgf-col-title { display: flex; align-items: center; gap: 7px; }
.tgf-col-icon { width: 14px; height: 14px; flex: none; color: var(--tg-green); opacity: 0.9; }
.tgf-links a { display: flex; align-items: center; gap: 9px; }
.tgf-link-icon {
    width: 14px; height: 14px;
    flex: none;
    opacity: 0.42;
    transition: opacity var(--tg-dur-fast) var(--tg-ease), transform var(--tg-dur-fast) var(--tg-ease);
}
.tgf-links a:hover .tgf-link-icon { opacity: 1; transform: translateX(1px); }

/* --------------------------------------------------------------------------
   6. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1050px) {
    /* Flattening the article makes its children grid items, so the contents
       card can sit between the header and the body instead of above the
       title, which is where a single order value on the aside put it. */
    .im-single-main { display: contents; }
    .im-single-head { order: 1; }
    .im-single-thumb { order: 2; }
    .im-side-toc { order: 3; }
    .im-article { order: 4; }
    /* .im-single-main is display:contents here, so every direct child needs an
       order or it falls to 0 and jumps above the header. */
    .im-share-block { order: 5; }
    .im-single-note { order: 6; }
    .im-author { order: 7; }
    .im-side-card:not(.im-side-toc) { order: 8; }

    .tgh-iconbtn { display: inline-flex; }
}

@media (max-width: 760px) {
    /* Four stacked columns ran to roughly a screen and a half of plain links.
       Two columns halve that and give the block a shape. */
    .tgf-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px; }
    .tgf-brand { grid-column: 1 / -1; }
    .tgf-col-title { margin-bottom: 10px; font-size: 11.5px; }
    .tgf-links { gap: 2px; }
    .tgf-links a {
        padding: 7px 0;
        font-size: 13.5px;
        line-height: 1.4;
    }
    .tgf-bottom-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        text-align: left;
    }
    .tgf-bottom-links { gap: 14px; flex-wrap: wrap; }

    .im-more-link { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; padding: 12px 13px; }
    .im-more-thumb { width: 52px; height: 52px; }
    .im-more-title { font-size: 14.5px; }
}

@media (max-width: 520px) {
    .tg-prose p, .tg-prose li { font-size: 16.5px; }
    .im-single-dek { font-size: 15px; padding: 12px 14px; }
    .im-more-go { display: none; }
    .im-more-link { grid-template-columns: 48px minmax(0, 1fr); }
    .im-more-thumb { width: 48px; height: 48px; }
}

@media (max-width: 430px) {
    /* One column again, but tight rows rather than the old airy list. */
    .tgf-cols { grid-template-columns: 1fr 1fr; gap: 22px 16px; }
    .tgf-links a { font-size: 13px; gap: 8px; }
    .im-search-sheet { padding: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .tg-prose ul > li::before,
    .tg-prose ul > li::after,
    .tg-prose ol > li::before,
    .im-more-go,
    .tgf-link-icon { transition: none !important; }
}

/* ==========================================================================
   SHARE ROWS
   Brand-neutral at rest so the row does not turn into a strip of competing
   corporate colours; each network's own colour only appears on hover.
   ========================================================================== */
.im-share { display: flex; align-items: center; gap: 10px; }
.im-share-set { display: flex; align-items: center; gap: 7px; }

.im-share-btn {
    width: 34px; height: 34px;
    display: grid; place-items: center;
    flex: none;
    padding: 0;
    border: 1px solid var(--tg-border);
    border-radius: 50%;
    background: #fff;
    color: var(--tg-muted);
    cursor: pointer;
    transition: color 0.22s var(--tg-ease),
                border-color 0.22s var(--tg-ease),
                background 0.22s var(--tg-ease),
                transform 0.22s var(--tg-ease),
                box-shadow 0.22s var(--tg-ease);
}
.im-share-btn svg { width: 16px; height: 16px; }
.im-share-btn:hover,
.im-share-btn:focus-visible {
    transform: translateY(-2px);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 8px 18px rgba(6, 95, 70, 0.16);
}
.im-share-btn.is-whatsapp:hover, .im-share-btn.is-whatsapp:focus-visible { background: #25D366; }
.im-share-btn.is-facebook:hover, .im-share-btn.is-facebook:focus-visible { background: #1877F2; }
.im-share-btn.is-x:hover,        .im-share-btn.is-x:focus-visible        { background: #0f1419; }
.im-share-btn.is-telegram:hover, .im-share-btn.is-telegram:focus-visible { background: #229ED9; }
.im-share-btn.is-copy:hover,     .im-share-btn.is-copy:focus-visible     { background: var(--tg-green); }

/* Copy swaps to a tick for a moment, so the click has an answer. */
.im-share-btn.is-copy .im-copy-done { display: none; }
.im-share-btn.is-copy.is-copied { background: var(--tg-green); border-color: transparent; color: #fff; }
.im-share-btn.is-copy.is-copied .im-copy-idle { display: none; }
.im-share-btn.is-copy.is-copied .im-copy-done { display: block; }

.im-share-label,
.im-share-title {
    color: var(--tg-muted-light);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* Inline row: pushed to the right of the byline on desktop. */
.im-share-inline { margin-left: auto; }
.im-share-inline .im-share-btn { width: 30px; height: 30px; }
.im-share-inline .im-share-btn svg { width: 14px; height: 14px; }

/* Block row after the article. */
.im-share-block {
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    max-width: 760px;
    margin: 34px 0 0;
    padding: 16px 18px;
    border: 1px solid var(--tg-border-light);
    border-radius: var(--tg-r-md);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--tg-shadow-card);
}
.im-share-block .im-share-title {
    color: var(--tg-ink);
    font-family: "Anek Devanagari", "Mukta", sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
}
.im-share-block .im-share-btn { width: 38px; height: 38px; }
.im-share-block .im-share-btn svg { width: 17px; height: 17px; }

@media (max-width: 1050px) {
    /* The byline row cannot hold the buttons at this width, so the inline row
       drops to its own full-width line directly under the meta. */
    .im-single-meta { flex-wrap: wrap; }
    .im-share-inline {
        width: 100%;
        margin: 12px 0 0;
        padding-top: 12px;
        border-top: 1px solid var(--tg-border-light);
    }
    .im-share-inline .im-share-btn { width: 34px; height: 34px; }
    .im-share-inline .im-share-btn svg { width: 16px; height: 16px; }
}

@media (max-width: 520px) {
    .im-share-block { flex-direction: column; align-items: flex-start; padding: 15px 16px; }
    .im-share-set { gap: 8px; }
    .im-share-btn { width: 36px; height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
    .im-share-btn { transition: none; }
}

/* ===== section: in-content tool callout =====
   A contextual link from a blog post to the relevant calculator. Renders
   inside .tg-prose but styled standalone so it reads as a helpful aside, not
   body copy. */
.im-inline-tool{
    display:flex;align-items:center;gap:12px;
    margin:28px 0;padding:15px 20px;
    border:1px solid var(--tg-border-light);border-left:3px solid var(--tg-green);
    border-radius:0 var(--tg-r-sm) var(--tg-r-sm) 0;
    background:var(--tg-soft-3);font-size:14.5px;line-height:1.6;color:var(--tg-text);
}
.im-inline-tool svg{width:22px;height:22px;flex:none;color:var(--tg-green)}
.im-inline-tool strong{color:var(--tg-green-deep);font-weight:700}
.im-inline-tool a{color:var(--tg-green-deep);font-weight:650;text-decoration:underline;text-underline-offset:2px}
.im-inline-tool a:hover{color:var(--tg-green-dark)}

/* ===== section: key takeaways box ===== */
/* A summary-first block at the top of a post: the core points a reader (or an
   AI answer engine) can lift without reading the whole article. */
.im-takeaways{
    margin:6px 0 30px;padding:20px 24px;
    border:1px solid var(--tg-border-light);border-left:3px solid var(--tg-green);
    border-radius:0 var(--tg-r-md) var(--tg-r-md) 0;
    background:var(--tg-soft-3);
}
.im-takeaways > strong{
    display:block;margin-bottom:12px;
    font-family:"Sora",sans-serif;font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--tg-green-deep);
}
.im-takeaways ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.im-takeaways li{color:var(--tg-text);font-size:14.5px;line-height:1.6}