/*
 * Tanur Graphics global color architecture
 * Version 6.25.00
 *
 * This file owns color, surfaces, borders, shadows, and the ambient canvas.
 * It intentionally does not set font-family, font-size, or line-height.
 */
:root{
  color-scheme:light;

  /* Canvas and surfaces */
  --tgp-canvas:#f8fbff;
  --tgp-canvas-alt:#f2f7fd;
  --tgp-surface:#ffffff;
  --tgp-surface-soft:#f3f7fc;
  --tgp-surface-blue:#edf5ff;
  --tgp-surface-blue-strong:#e2efff;
  --tgp-surface-dark:#0d172b;
  --tgp-surface-dark-raised:#13254a;
  --tgp-surface-dark-soft:#1d2d49;

  /* Text */
  --tgp-heading:#0a1730;
  --tgp-text:#24364f;
  --tgp-text-muted:#526782;
  --tgp-text-subtle:#70839b;
  --tgp-pure-white:#ffffff;
  --tgp-text-inverse:#ffffff;
  --tgp-text-inverse-body:#e9f0f9;
  --tgp-text-inverse-muted:#c7d5e7;

  /* Brand and state */
  --tgp-primary:#2563eb;
  --tgp-primary-strong:#1d4ed8;
  --tgp-secondary:#0ea5a4;
  --tgp-secondary-strong:#0f766e;
  --tgp-link:#1552d3;
  --tgp-link-hover:#0f766e;
  --tgp-success:#15803d;
  --tgp-danger:#b42318;

  /* Lines and depth */
  --tgp-border:#d8e3f0;
  --tgp-border-strong:#bfd4ed;
  --tgp-border-dark:rgba(255,255,255,.18);
  --tgp-focus:rgba(37,99,235,.22);
  --tgp-shadow:0 12px 34px rgba(22,60,115,.09);
  --tgp-card-shadow:var(--tgp-shadow);
  --tgp-shadow-hover:0 22px 52px rgba(22,60,115,.15);
  --tgp-shadow-dark:0 20px 54px rgba(7,18,43,.24);
  --tgp-card-shadow-hover:var(--tgp-shadow-hover);
  --tgp-border-blue:var(--tgp-border-strong);
  --tgp-card:var(--tgp-surface);

  /* Gradients */
  --tgp-gradient-brand:linear-gradient(135deg,var(--tgp-primary),var(--tgp-secondary));
  --tgp-gradient-brand-hover:linear-gradient(135deg,var(--tgp-primary-strong),var(--tgp-secondary-strong));
  --tgp-gradient-card:linear-gradient(145deg,rgba(255,255,255,.99),rgba(238,246,255,.98));
  --tgp-gradient-dark:linear-gradient(145deg,var(--tgp-surface-dark),var(--tgp-surface-dark-raised));

  /* Ambient pointer */
  --tgp-pointer-x:74%;
  --tgp-pointer-y:14%;

  /* Default inherited surface contract */
  --tgp-local-heading:var(--tgp-heading);
  --tgp-local-text:var(--tgp-text);
  --tgp-local-muted:var(--tgp-text-muted);
  --tgp-local-link:var(--tgp-link);
  --tgp-local-link-hover:var(--tgp-link-hover);

  /* Stable aliases for legacy theme components */
  --bg:var(--tgp-canvas);
  --bg2:var(--tgp-surface);
  --bg3:var(--tgp-surface-soft);
  --bg4:var(--tgp-surface-blue);
  --purple:var(--tgp-primary);
  --purple-light:var(--tgp-primary);
  --purple-dark:var(--tgp-primary-strong);
  --blue:var(--tgp-primary);
  --blue-light:var(--tgp-primary-strong);
  --grad:var(--tgp-gradient-brand);
  --grad-hover:var(--tgp-gradient-brand-hover);
  --grad-text:linear-gradient(135deg,var(--tgp-heading),var(--tgp-primary));
  /* Legacy theme CSS used --white as its primary text token. Keep that
     compatibility on light surfaces; dark surfaces override it below. */
  --white:var(--tgp-heading);
  --gray:var(--tgp-text-subtle);
  --gray-light:var(--tgp-text-muted);
  --border:var(--tgp-border-strong);
  --border-light:var(--tgp-border);
  --shadow:var(--tgp-shadow);
  --shadow-purple:0 14px 36px rgba(37,99,235,.17);
}

html{background:var(--tgp-canvas)}
body{
  position:relative;
  color:var(--tgp-local-text);
  background-color:var(--tgp-canvas);
  background-image:
    radial-gradient(circle at var(--tgp-pointer-x) var(--tgp-pointer-y),rgba(37,99,235,.085),transparent 30rem),
    radial-gradient(circle at calc(var(--tgp-pointer-x) - 38%) calc(var(--tgp-pointer-y) + 44%),rgba(14,165,164,.06),transparent 32rem),
    linear-gradient(145deg,var(--tgp-canvas),var(--tgp-canvas-alt));
  background-size:auto,auto,auto;
  background-attachment:fixed;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background-image:
    radial-gradient(circle,rgba(69,112,174,.16) 1.05px,transparent 1.35px),
    radial-gradient(circle,rgba(37,99,235,.07) .9px,transparent 1.25px);
  background-size:18px 18px,18px 18px;
  background-position:0 0,9px 9px;
  opacity:.95;
}
body::after{
  content:"";
  position:fixed;
  z-index:-1;
  pointer-events:none;
  width:42rem;
  height:42rem;
  left:var(--tgp-pointer-x);
  top:var(--tgp-pointer-y);
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.76),rgba(219,234,254,.18) 40%,transparent 72%);
}
#page,.site,.site-wrapper,.site-content,.content-area,.site-main,main,.entry-content{background:transparent}

/* Header */
.site-header,#masthead,#masthead.scrolled{
  --tgp-local-heading:var(--tgp-heading);
  --tgp-local-text:var(--tgp-text);
  --tgp-local-muted:var(--tgp-text-muted);
  background:rgba(255,255,255,.96)!important;
  border-color:var(--tgp-border)!important;
  color:var(--tgp-local-text)!important;
  -webkit-backdrop-filter:blur(16px) saturate(135%);
  backdrop-filter:blur(16px) saturate(135%);
}
.site-header :where(.main-navigation a,.header-cart){color:var(--tgp-local-muted)!important;-webkit-text-fill-color:currentColor!important}
.site-header :where(.main-navigation a:hover,.main-navigation .current-menu-item>a,.main-navigation .current_page_item>a){color:var(--tgp-local-heading)!important;background:var(--tgp-surface-blue)!important}

/*
 * Surface variables are inherited by every child. This is the core rule that
 * prevents a light-page fix from damaging a dark card, and vice versa.
 */
[data-tgp-surface="light"],.tgp-light-surface,.tgp-light-card{
  --tgp-local-heading:var(--tgp-heading);
  --tgp-local-text:var(--tgp-text);
  --tgp-local-muted:var(--tgp-text-muted);
  --tgp-local-link:var(--tgp-link);
  --tgp-local-link-hover:var(--tgp-link-hover);
  --white:var(--tgp-heading);
  --gray:var(--tgp-text-subtle);
  --gray-light:var(--tgp-text-muted);
  --border:var(--tgp-border-strong);
  --border-light:var(--tgp-border);
  color:var(--tgp-local-text)!important;
}
[data-tgp-surface="dark"],.tgp-dark-surface,.tgp-dark-card,.dark-card,.dark-section,.section-dark,.bg-dark,.has-black-background-color,
.site-footer,#colophon,.port-overlay,.tanusolo-seo-cta,.tgp-dark-breadcrumb-bar,.tgp-auth-hero,.tgp-account-hero{
  --tgp-local-heading:var(--tgp-text-inverse);
  --tgp-local-text:var(--tgp-text-inverse-body);
  --tgp-local-muted:var(--tgp-text-inverse-muted);
  --tgp-local-link:#c9ddff;
  --tgp-local-link-hover:#ffffff;
  --white:var(--tgp-text-inverse);
  --gray:var(--tgp-text-inverse-muted);
  --gray-light:var(--tgp-text-inverse-body);
  --border:var(--tgp-border-dark);
  --border-light:var(--tgp-border-dark);
  color:var(--tgp-local-text)!important;
}
.tgp-dark-card,.tgp-dark-surface{background:var(--tgp-gradient-dark)!important;border-color:var(--tgp-border-dark)!important;box-shadow:var(--tgp-shadow-dark)}

/* Semantic text always resolves through the nearest surface variables. */
.site-main,.entry-content,.woocommerce,.site-footer{color:var(--tgp-local-text)!important}
:is(.site-main,.entry-content,.woocommerce,.site-footer) :where(h1,h2,h3,h4,h5,h6){
  color:var(--tgp-local-heading)!important;
  -webkit-text-fill-color:currentColor!important;
  text-shadow:none!important;
}
:is(.site-main,.entry-content,.woocommerce,.site-footer) :where(p,li,dd,dt,figcaption,blockquote,summary,label){
  color:var(--tgp-local-text)!important;
  -webkit-text-fill-color:currentColor!important;
}
:is(.site-main,.entry-content,.woocommerce,.site-footer) :where(.section-title,.hero-title,.site-title-text,.sc-title,.blog-title,.widget-title,.product-title,.spc-title,.founder-name,.vc-title,.tl-title,.dpb-title,.port-title,.port-meta-title){
  color:var(--tgp-local-heading)!important;
  -webkit-text-fill-color:currentColor!important;
}
:is(.site-main,.entry-content,.woocommerce,.site-footer) :where(.section-sub,.hero-desc,.blog-excerpt,.widget p,.port-meta-cat,.product-short-description){
  color:var(--tgp-local-muted)!important;
  -webkit-text-fill-color:currentColor!important;
}

:is(.site-main,.entry-content,.woocommerce,.site-footer) :where(small,.muted,.text-muted,.section-sub,.hero-desc,.entry-meta,.post-meta,.blog-meta-row){
  color:var(--tgp-local-muted)!important;
  -webkit-text-fill-color:currentColor!important;
}
:is(.site-main,.entry-content,.woocommerce,.site-footer) a:not(.btn):not(.button):not([class*="button"]){color:var(--tgp-local-link)!important}
:is(.site-main,.entry-content,.woocommerce,.site-footer) a:not(.btn):not(.button):not([class*="button"]):hover{color:var(--tgp-local-link-hover)!important}

/* Dark surfaces: override stale editor colors without a specificity trap. */
:is([data-tgp-surface="dark"],.tgp-dark-surface,.tgp-dark-card,.dark-card,.dark-section,.section-dark,.bg-dark,.has-black-background-color,.site-footer,.port-overlay,.tanusolo-seo-cta,.tgp-dark-breadcrumb-bar,.tgp-auth-hero,.tgp-account-hero)
:where(h1,h2,h3,h4,h5,h6,strong,b,p,li,span,small,dd,dt,figcaption,blockquote,summary,label):where(:not(.btn):not(.button):not([class*="button"])){
  color:var(--tgp-local-text)!important;
  -webkit-text-fill-color:currentColor!important;
}
:is([data-tgp-surface="dark"],.tgp-dark-surface,.tgp-dark-card,.dark-card,.dark-section,.section-dark,.bg-dark,.has-black-background-color,.site-footer,.port-overlay,.tanusolo-seo-cta,.tgp-dark-breadcrumb-bar,.tgp-auth-hero,.tgp-account-hero)
:where(h1,h2,h3,h4,h5,h6,strong,b){color:var(--tgp-local-heading)!important}

/* Light cards nested inside dark areas reset the inherited contract. */
:is([data-tgp-surface="dark"],.tgp-dark-surface,.tgp-dark-card,.dark-card,.dark-section,.section-dark,.bg-dark,.site-footer,.tanusolo-seo-cta,.tgp-auth-hero,.tgp-account-hero)
:is([data-tgp-surface="light"],.tgp-light-card,.tgp-auth-card,.app-store-btn,.tanusolo-seo-secondary){
  --tgp-local-heading:var(--tgp-heading);
  --tgp-local-text:var(--tgp-text);
  --tgp-local-muted:var(--tgp-text-muted);
  --tgp-local-link:var(--tgp-link);
  --tgp-local-link-hover:var(--tgp-link-hover);
  --white:var(--tgp-heading);
  --gray:var(--tgp-text-subtle);
  --gray-light:var(--tgp-text-muted);
  --border:var(--tgp-border-strong);
  --border-light:var(--tgp-border);
  color:var(--tgp-local-text)!important;
  background:var(--tgp-surface)!important;
  border-color:var(--tgp-border)!important;
}
:is([data-tgp-surface="dark"],.tgp-dark-surface,.tgp-dark-card,.dark-card,.dark-section,.section-dark,.bg-dark,.site-footer,.tanusolo-seo-cta,.tgp-auth-hero,.tgp-account-hero)
:is([data-tgp-surface="light"],.tgp-light-card,.tgp-auth-card,.app-store-btn,.tanusolo-seo-secondary)
:where(h1,h2,h3,h4,h5,h6,strong,b,p,li,span,small,label){
  color:var(--tgp-local-text)!important;
  -webkit-text-fill-color:currentColor!important;
}

/* Shared light card family */
.site-main :where(
  .blog-card,.widget,.portfolio-archive-panel,.port-meta-row,.service-page-card,.service-card,.value-card,.founder-card,
  .testi-card,.pricing-card,.process-step,.cta-box,.product-summary-card,.product-gallery-card,.product-gallery-main,
  .tgp-auth-card,.tgp-support-panel,.tgp-recent-orders,.tgp-dashboard-welcome,.tgp-dashboard-card,.tgp-ticket-card,
  .woocommerce div.product .summary,.woocommerce div.product .woocommerce-tabs,.woocommerce ul.products li.product,
  .tanusolo-seo-grid article,.tanusolo-seo-section,.tanusolo-faq-list details
):not([data-tgp-surface="dark"]):not(.tgp-dark-card){
  --tgp-local-heading:var(--tgp-heading);
  --tgp-local-text:var(--tgp-text);
  --tgp-local-muted:var(--tgp-text-muted);
  background:var(--tgp-gradient-card)!important;
  border-color:var(--tgp-border-strong)!important;
  box-shadow:var(--tgp-shadow);
  color:var(--tgp-local-text)!important;
}
.site-main :where(.blog-card,.service-page-card,.service-card,.value-card,.testi-card,.pricing-card,.process-step,.port-item,.tgp-dashboard-card,.woocommerce ul.products li.product){transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.site-main :where(.blog-card,.service-page-card,.service-card,.value-card,.testi-card,.pricing-card,.process-step,.port-item,.tgp-dashboard-card,.woocommerce ul.products li.product):hover{border-color:var(--tgp-primary)!important;box-shadow:var(--tgp-shadow-hover);transform:translateY(-3px)}

/* Account hero is an actual dark surface, not pale blue with white text. */
.tgp-auth-hero,.tgp-account-hero{
  background:var(--tgp-gradient-dark)!important;
  border-color:var(--tgp-border-dark)!important;
  box-shadow:var(--tgp-shadow-dark)!important;
}
.tgp-auth-hero :where(h1,h2,h3),.tgp-account-hero :where(h1,h2,h3){color:var(--tgp-text-inverse)!important}
.tgp-auth-hero :where(p,li),.tgp-account-hero :where(p,li){color:var(--tgp-text-inverse-body)!important}
.tgp-auth-points span,.tgp-account-quick a{background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.2)!important;color:var(--tgp-text-inverse-body)!important}

/* Breadcrumbs inherit from their bar. */
.breadcrumb{color:var(--tgp-local-muted)!important}
.breadcrumb a{color:var(--tgp-local-link)!important}
.breadcrumb a:hover{color:var(--tgp-local-link-hover)!important}
.breadcrumb span:last-child{color:var(--tgp-local-text)!important}
.breadcrumb-sep{color:var(--tgp-local-muted)!important}
.tgp-dark-breadcrumb-bar{background:var(--tgp-surface-dark)!important;border-color:var(--tgp-border-dark)!important}
.tgp-dark-breadcrumb-bar .breadcrumb a{color:#b9d6ff!important}
.tgp-dark-breadcrumb-bar .breadcrumb span:last-child{color:#ffffff!important}
.tgp-portfolio-breadcrumb{
  --tgp-local-heading:var(--tgp-heading);
  --tgp-local-text:var(--tgp-text);
  --tgp-local-muted:var(--tgp-text-muted);
  --tgp-local-link:var(--tgp-link);
  --tgp-local-link-hover:var(--tgp-link-hover);
  background:rgba(255,255,255,.96)!important;
  border-color:var(--tgp-border)!important;
  color:var(--tgp-local-text)!important;
}
.tgp-portfolio-breadcrumb .breadcrumb a{color:var(--tgp-link)!important}
.tgp-portfolio-breadcrumb .breadcrumb span:last-child{color:var(--tgp-text)!important}

/* Portfolio image overlays */
.port-thumb{position:relative}
.port-overlay{
  background:linear-gradient(to top,rgba(5,13,31,.97) 0%,rgba(7,25,56,.82) 60%,rgba(7,25,56,.18) 100%)!important;
  color:var(--tgp-text-inverse-body)!important;
}
.port-overlay :where(.port-title,.port-cat,span,.btn){color:#ffffff!important;-webkit-text-fill-color:currentColor!important;text-shadow:0 1px 3px rgba(0,0,0,.62)!important}
.port-overlay .port-cat{background:rgba(37,99,235,.94)!important;border-color:rgba(255,255,255,.32)!important}

/* Blog excerpts */
.blog-excerpt{display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;color:var(--tgp-text-muted)!important;min-height:2.7em;opacity:1!important;visibility:visible!important}
.blog-card .blog-body{background:transparent!important}

/* Social Login landing page uses the same inherited surface contract. */
.tanusolo-product-page .tgp-social-login-entry{--tgp-local-heading:var(--tgp-heading);--tgp-local-text:var(--tgp-text);--tgp-local-muted:var(--tgp-text-muted)}
.tanusolo-product-page .tgp-social-login-entry [data-tgp-surface="dark"]{--tgp-local-heading:var(--tgp-text-inverse);--tgp-local-text:var(--tgp-text-inverse-body);--tgp-local-muted:var(--tgp-text-inverse-muted)}
.tanusolo-product-page .tgp-social-login-entry [data-tgp-surface="dark"] :where(h1,h2,h3,h4,h5,h6,strong,b){color:var(--tgp-text-inverse)!important}
.tanusolo-product-page .tgp-social-login-entry [data-tgp-surface="dark"] :where(p,li,span,small,label){color:var(--tgp-text-inverse-body)!important}
.tanusolo-seo-cta{background:var(--tgp-gradient-dark)!important;border-color:var(--tgp-border-dark)!important;box-shadow:var(--tgp-shadow-dark)!important}
.tanusolo-seo-primary{background:var(--tgp-gradient-brand)!important;border-color:transparent!important;color:#ffffff!important;-webkit-text-fill-color:currentColor!important}
.tanusolo-seo-secondary{background:#ffffff!important;border-color:var(--tgp-border)!important;color:var(--tgp-primary-strong)!important;-webkit-text-fill-color:currentColor!important}

/* Footer and its nested store card */
.site-footer,#colophon{background:var(--tgp-surface-dark)!important;border-color:var(--tgp-border-dark)!important}
.site-footer :where(.footer-heading,.footer-col h4,.footer-logo),#colophon :where(.footer-heading,.footer-col h4,.footer-logo){color:#ffffff!important}
.site-footer :where(.footer-brand p,.footer-links a,.footer-bottom p,.footer-bottom a),#colophon :where(.footer-brand p,.footer-links a,.footer-bottom p,.footer-bottom a){color:var(--tgp-text-inverse-muted)!important}
.site-footer .app-store-btn,#colophon .app-store-btn{
  --tgp-local-heading:var(--tgp-heading);
  --tgp-local-text:var(--tgp-text);
  --tgp-local-muted:var(--tgp-text-muted);
  background:#ffffff!important;
  border-color:rgba(255,255,255,.5)!important;
  color:var(--tgp-text)!important;
}
.site-footer .app-store-btn :where(span,strong,small),#colophon .app-store-btn :where(span,strong,small){color:var(--tgp-text)!important;-webkit-text-fill-color:currentColor!important}
.site-footer .app-store-btn .app-store-btn-label,#colophon .app-store-btn .app-store-btn-label{color:var(--tgp-text-muted)!important}
.site-footer .app-store-btn .app-store-btn-name,#colophon .app-store-btn .app-store-btn-name{color:var(--tgp-heading)!important}

/* Forms */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),select,textarea){background:var(--tgp-surface)!important;border-color:var(--tgp-border-strong)!important;color:var(--tgp-text)!important;-webkit-text-fill-color:currentColor!important}
:where(input,select,textarea)::placeholder{color:var(--tgp-text-subtle)!important;opacity:1}
:where(input,select,textarea):focus{border-color:var(--tgp-primary)!important;box-shadow:0 0 0 3px var(--tgp-focus)!important}
:where(.btn-primary,.submit-btn,.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt,button[type="submit"],input[type="submit"]){background:var(--tgp-gradient-brand)!important;border-color:transparent!important;color:#ffffff!important;-webkit-text-fill-color:currentColor!important}
:where(.btn-primary,.submit-btn,.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt,button[type="submit"],input[type="submit"]):hover{background:var(--tgp-gradient-brand-hover)!important;color:#ffffff!important}
:where(.btn-secondary,.btn-ghost,.btn-outline,.woocommerce a.button:not(.alt),.woocommerce button.button:not(.alt)){background:var(--tgp-surface)!important;border-color:var(--tgp-border-strong)!important;color:var(--tgp-heading)!important;-webkit-text-fill-color:currentColor!important}
:where(.btn,.button,button,input[type="submit"]):where(:not(.btn-secondary):not(.btn-ghost):not(.btn-outline)) :where(span,strong){color:inherit!important;-webkit-text-fill-color:currentColor!important}

/* Light page heroes */
:where(.page-hero,.portfolio-archive-hero,.tgp-template-hero,.tgp-tool-page-heading,.tgp-compact-page-heading,.tgp-dieline-page-header){
  --tgp-local-heading:var(--tgp-heading);
  --tgp-local-text:var(--tgp-text);
  --tgp-local-muted:var(--tgp-text-muted);
  background:transparent!important;
  border-color:var(--tgp-border)!important;
  color:var(--tgp-local-text)!important;
}
:where(.page-hero,.portfolio-archive-hero,.tgp-template-hero,.tgp-tool-page-heading,.tgp-compact-page-heading,.tgp-dieline-page-header) :where(h1,h2,h3){color:var(--tgp-heading)!important;-webkit-text-fill-color:currentColor!important}
:where(.page-hero,.portfolio-archive-hero,.tgp-template-hero,.tgp-tool-page-heading,.tgp-compact-page-heading,.tgp-dieline-page-header) :where(p,span){color:var(--tgp-text-muted)!important;-webkit-text-fill-color:currentColor!important}

/* Badges and notices */
:where(.tag,.badge,[class*="badge"],[class*="kicker"],[class*="eyebrow"]){color:var(--tgp-primary-strong)!important;-webkit-text-fill-color:currentColor!important}
[data-tgp-surface="dark"] :where(.tag,.badge,[class*="badge"],[class*="kicker"],[class*="eyebrow"]){color:#dbeafe!important}
:where(.woocommerce-message,.woocommerce-info,.woocommerce-error,.notice,.alert){background:var(--tgp-surface)!important;border-color:var(--tgp-border)!important;color:var(--tgp-text)!important}

::selection{background:rgba(37,99,235,.2);color:var(--tgp-heading)}
:focus-visible{outline-color:var(--tgp-primary)}
/* Final surface contract. Normal element specificity intentionally beats
   legacy component declarations that used --white as a text token. */
body :is([data-tgp-surface="dark"],.tgp-dark-surface,.tgp-dark-card,.dark-card,.dark-section,.section-dark,.bg-dark,.has-black-background-color,.site-footer,.port-overlay,.tanusolo-seo-cta,.tgp-dark-breadcrumb-bar,.tgp-auth-hero,.tgp-account-hero) :is(h1,h2,h3,h4,h5,h6,strong,b){
  color:var(--tgp-text-inverse)!important;
  -webkit-text-fill-color:currentColor!important;
}
body :is([data-tgp-surface="dark"],.tgp-dark-surface,.tgp-dark-card,.dark-card,.dark-section,.section-dark,.bg-dark,.has-black-background-color,.site-footer,.port-overlay,.tanusolo-seo-cta,.tgp-dark-breadcrumb-bar,.tgp-auth-hero,.tgp-account-hero) :is(p,li,small,label,summary,figcaption,blockquote,dd,dt){
  color:var(--tgp-text-inverse-body)!important;
  -webkit-text-fill-color:currentColor!important;
}
body :is([data-tgp-surface="dark"],.tgp-dark-surface,.tgp-dark-card,.dark-card,.dark-section,.section-dark,.bg-dark,.site-footer,.tanusolo-seo-cta,.tgp-auth-hero,.tgp-account-hero) :is([data-tgp-surface="light"],.tgp-light-card,.tgp-auth-card,.app-store-btn,.tanusolo-seo-secondary) :is(h1,h2,h3,h4,h5,h6,strong,b){
  color:var(--tgp-heading)!important;
  -webkit-text-fill-color:currentColor!important;
}
body :is([data-tgp-surface="dark"],.tgp-dark-surface,.tgp-dark-card,.dark-card,.dark-section,.section-dark,.bg-dark,.site-footer,.tanusolo-seo-cta,.tgp-auth-hero,.tgp-account-hero) :is([data-tgp-surface="light"],.tgp-light-card,.tgp-auth-card,.app-store-btn,.tanusolo-seo-secondary) :is(p,li,small,label,summary,figcaption,blockquote,dd,dt){
  color:var(--tgp-text)!important;
  -webkit-text-fill-color:currentColor!important;
}

@media(prefers-reduced-motion:reduce){body::after{display:none}}


/* Full-site dotted canvas visibility */
:where(.page-hero,.portfolio-archive-hero,.tgp-template-hero,.tgp-tool-page-heading,.tgp-compact-page-heading,.tgp-dieline-page-header,.archive-header,.blog-listing-wrap,.content-shell,.page-shell){background-color:transparent!important;}


/* Full-viewport dot canvas v6.24.00
 * The pattern belongs to the browser canvas, not to a narrow content wrapper.
 * Cards and explicit dark/light surfaces keep their own solid backgrounds.
 */
html,
body{
  min-height:100%;
  background-color:var(--tgp-canvas)!important;
}
body{
  background-image:
    radial-gradient(circle at var(--tgp-pointer-x) var(--tgp-pointer-y),rgba(37,99,235,.085),transparent 30rem),
    radial-gradient(circle at calc(var(--tgp-pointer-x) - 38%) calc(var(--tgp-pointer-y) + 44%),rgba(14,165,164,.06),transparent 32rem),
    radial-gradient(circle,rgba(69,112,174,.18) 1px,transparent 1.35px),
    linear-gradient(145deg,var(--tgp-canvas),var(--tgp-canvas-alt))!important;
  background-size:auto,auto,18px 18px,auto!important;
  background-position:center,center,0 0,center!important;
  background-attachment:fixed,fixed,fixed,fixed!important;
}
/* Avoid a second, narrow pattern layer. */
body::before{
  display:none!important;
}
/* Every structural site wrapper stays transparent so the viewport pattern
 * remains visible from edge to edge. */
#page,
.site,
.site-wrapper,
.site-content,
.content-area,
.site-main,
main,
.entry-content,
.tgp-page-shell,
.tgp-content-shell,
.tgp-social-login-entry,
.tgp-tool-page,
.tgp-portfolio-page{
  background-color:transparent!important;
  background-image:none!important;
}
/* Normal light page bands use a translucent wash instead of opaque white,
 * allowing the full-page dot matrix to continue behind the content. */
.site-main > section:not(.tgp-dark-card):not(.tgp-dark-surface):not([data-tgp-surface="dark"]),
.entry-content > section:not(.tgp-dark-card):not(.tgp-dark-surface):not([data-tgp-surface="dark"]),
.tgp-social-login-entry > section:not(.tgp-dark-card):not(.tgp-dark-surface):not([data-tgp-surface="dark"]){
  background-color:rgba(248,251,255,.76)!important;
  background-image:none!important;
}
/* Explicit cards stay clean and solid above the patterned canvas. */
.tgp-light-card,
[data-tgp-surface="light"],
.blog-card,
.widget,
.service-card,
.pricing-card,
.portfolio-archive-panel,
.product-summary-card,
.product-gallery-card,
.tgp-auth-card,
.tgp-support-panel,
.tanusolo-seo-grid article,
.tanusolo-seo-section,
.tanusolo-faq-list details{
  background:var(--tgp-gradient-card)!important;
}
@media (max-width:782px){
  body{background-size:auto,auto,16px 16px,auto!important}
}

/* ================================================================
 * Pure dotted canvas and home hero visibility reset — v6.25.00
 *
 * The dotted texture belongs to the viewport itself. Structural page
 * wrappers and normal content bands are transparent; only deliberate
 * cards, controls, dark CTAs, the header, and the footer own surfaces.
 * No typography metrics are changed here.
 * ================================================================ */
html{
  min-height:100%;
  background-color:var(--tgp-canvas)!important;
  background-image:radial-gradient(circle at 1px 1px,rgba(49,92,159,.16) 1.05px,transparent 1.15px)!important;
  background-size:18px 18px!important;
  background-position:0 0!important;
  background-attachment:fixed!important;
}
body{
  min-height:100%;
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  background-attachment:scroll!important;
}
body::before,
body::after{
  content:none!important;
  display:none!important;
  background:none!important;
}

/* Keep the dotted canvas visible through the entire public content tree. */
body :where(
  #page,.site,.site-wrapper,.site-content,.content-area,.site-main,main,
  .entry,.entry-content,.page-content,.archive-content,.blog-listing-wrap,
  .content-shell,.page-shell,.tgp-page-shell,.tgp-content-shell,
  .tgp-tool-page,.tgp-portfolio-page,.tgp-social-login-entry
){
  background-color:transparent!important;
  background-image:none!important;
}

/* Ordinary page bands do not paint white or gradient sheets over the dots.
   Components that identify themselves as cards/dark surfaces stay intact. */
body .site-main > section:not([class*="card"]):not(.cta-section):not(.app-banner):not(.tgp-dark-surface):not(.tgp-dark-card):not(.dark-section):not(.section-dark):not([data-tgp-surface="dark"]):not(.tanusolo-seo-cta):not(.tgp-auth-hero):not(.tgp-account-hero),
body .entry-content > section:not([class*="card"]):not(.cta-section):not(.app-banner):not(.tgp-dark-surface):not(.tgp-dark-card):not(.dark-section):not(.section-dark):not([data-tgp-surface="dark"]):not(.tanusolo-seo-cta):not(.tgp-auth-hero):not(.tgp-account-hero),
body.home .site-main > section:not(.cta-section):not(.app-banner){
  background-color:transparent!important;
  background-image:none!important;
}

/* Explicit structural light bands used by older templates. */
body :where(
  .hero-section,.clients-section,.services-section,.service-pricing-section,
  .portfolio-section,.process-section,.testi-section,.blog-section,
  .portfolio-archive-hero,.page-hero,.archive-header,.tgp-template-hero,
  .tgp-tool-page-heading,.tgp-compact-page-heading,.tgp-dieline-page-header
){
  background-color:transparent!important;
  background-image:none!important;
}

/* Cards are the only light elements that paint a solid local surface. */
body :where(
  .hero-card-main,.hero-float-card,.service-card,.pricing-card,.port-item,
  .blog-card,.process-step,.testi-card,.widget,.portfolio-archive-panel,
  .product-summary-card,.product-gallery-main,.product-gallery-card,
  .service-page-card,.founder-card,.value-card,.portfolio-sidebar,
  .portfolio-empty-state,.testimonial-card,.popup-box,.woocommerce-message,
  .woocommerce-info,.woocommerce-error,.woocommerce-checkout #payment,
  .woocommerce-account .woocommerce-MyAccount-navigation ul,
  .tgp-auth-card,.tgp-dashboard-card,.tgp-support-panel,
  .tanusolo-seo-section,.tanusolo-seo-grid article,.tanusolo-faq-list details,
  [data-tgp-surface="light"],.tgp-light-card
){
  background-color:var(--tgp-surface)!important;
}

/* The middle hero line previously inherited a clipped background that could
   render as a pale rectangle. Use explicit solid text and no decorative fill. */
body.home .hero-title,
body.home .hero-title .hero-title-line{
  position:relative;
  z-index:2;
  overflow:visible!important;
  background:none!important;
  background-color:transparent!important;
  background-image:none!important;
  -webkit-background-clip:border-box!important;
  background-clip:border-box!important;
  -webkit-text-fill-color:currentColor!important;
  box-shadow:none!important;
  text-shadow:none!important;
}
body.home .hero-title::before,
body.home .hero-title::after,
body.home .hero-title .hero-title-line::before,
body.home .hero-title .hero-title-line::after{
  content:none!important;
  display:none!important;
}
body.home .hero-title .hero-title-kicker{color:var(--tgp-primary)!important}
body.home .hero-title em.hero-title-line{color:var(--tgp-heading)!important}
body.home .hero-title .hero-title-result{color:var(--tgp-heading)!important}

@media(max-width:782px){
  html{background-size:16px 16px!important}
}