/* TCG 2027 R4: production layout safeguards. Loaded AFTER administrator theme CSS. */
:root{--tcg-navy:#071321;--tcg-white:#f7fcff;--tcg-mint:#50e9d0}
.site-header{position:sticky!important;top:0!important;z-index:10050!important;background:#071321!important;box-shadow:0 8px 24px rgba(2,12,27,.16)}
.site-header .brand,.site-header .brand:visited{display:inline-flex!important;align-items:center!important;gap:clamp(8px,1.2vw,14px);color:var(--tcg-white)!important;opacity:1!important;min-width:0}
.site-header .brand .brand-name,.site-header .brand .brand-name:visited{display:inline!important;opacity:1!important;visibility:visible!important;color:#f7fcff!important;-webkit-text-fill-color:#f7fcff!important;text-shadow:none!important;font-weight:800!important;letter-spacing:-.045em!important;line-height:1.2!important;max-width:100%;background:none!important}
.site-header .brand .tcg-mark{flex-shrink:0!important;display:block;object-fit:contain}
.site-header .nav{min-width:0}
.site-header a:focus-visible,.site-header button:focus-visible{outline:3px solid #50e9d0!important;outline-offset:3px}
html{scroll-padding-top:100px}section[id]{scroll-margin-top:100px}
/* Clean, denser cards on every page rather than only the original homepage. */
.custom-grid,.category-grid,.product-grid,.news-grid,.tcg-path-grid{min-width:0}
.custom-grid>* ,.category-grid>*,.product-grid>*,.news-grid>*{min-width:0}
.info-card,.custom-product,.tcg-path-card{transition:transform .27s ease,box-shadow .27s ease,border-color .27s ease}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.info-card:hover,.custom-product:hover,.tcg-path-card:hover{transform:translateY(-4px);border-color:#9dddd3;box-shadow:0 18px 40px rgba(9,34,60,.1)}}
/* Visible above-the-fold animation: no JavaScript or scroll required. */
@keyframes tcg-hero-arrive{from{opacity:.15;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes tcg-glow{0%,100%{filter:drop-shadow(0 4px 10px rgba(70,220,194,.07))}50%{filter:drop-shadow(0 12px 26px rgba(70,220,194,.2))}}
@keyframes tcg-sheen{0%{transform:translateX(-130%) rotate(12deg)}100%{transform:translateX(400%) rotate(12deg)}}
@media(prefers-reduced-motion:no-preference){.hero>div:first-child{animation:tcg-hero-arrive .8s cubic-bezier(.2,.7,.2,1) both}.hero-visual{animation:tcg-glow 4.5s ease-in-out infinite}.hero-visual>div:last-child{animation:tcg-hero-arrive 1s .12s both;isolation:isolate}.site-section .btn-primary,.hero .btn-primary{position:relative;overflow:hidden}.hero .btn-primary::after{content:'';position:absolute;inset:-40%;width:35%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);transform:translateX(-130%) rotate(12deg);animation:tcg-sheen 6.5s 1.6s infinite;pointer-events:none}}
/* Keep all text and illustrations within their containing cards */
body{max-width:100%;overflow-x:clip}.site-section .container{min-width:0}
.info-card p,.info-card h3,.product-detail p,.product-detail h3{overflow-wrap:break-word}
.info-card a,.product-detail a{max-width:100%}
@media(max-width:1080px){
 .site-header .nav-links{display:none!important}
 .site-header .mobile-menu-button{display:inline-flex!important;justify-content:center;align-items:center;flex:0 0 auto;min-height:44px;min-width:44px;margin-left:auto}
 .site-header .nav-links.is-open{display:flex!important;position:absolute;left:0;right:0;top:calc(100% - 1px);flex-direction:column;align-items:stretch;max-height:calc(100dvh - 90px);overflow-y:auto;background:#0a2032;box-shadow:0 15px 32px rgba(0,0,0,.3);border:1px solid #294759;border-radius:0 0 15px 15px;z-index:10055;padding:12px 15px}
 .site-header .nav-links.is-open a{display:flex;align-items:center;min-height:44px;font-size:14px!important;padding:10px!important}
 .site-header .nav-actions{display:none!important}
}
@media(max-width:760px){
 html{scroll-padding-top:80px}section[id]{scroll-margin-top:80px}
 .container{width:calc(100% - 28px)!important;max-width:650px!important}
 .site-header .nav{height:auto!important;min-height:66px!important;gap:8px!important;padding:10px 0!important;flex-wrap:nowrap!important}
 .site-header .brand{flex:0 1 auto!important;width:auto!important;max-width:calc(100% - 62px)!important;white-space:normal!important}
 .site-header .brand .brand-name{font-size:clamp(13px,3.6vw,19px)!important;line-height:1.2!important;white-space:normal!important;overflow-wrap:normal!important}
 .site-header .brand .tcg-mark{width:clamp(47px,14vw,67px)!important;height:32px!important}
 .announcement{font-size:11px!important;line-height:1.5}
 .site-section{padding:clamp(31px,6.5vw,50px) 0!important}
 .site-section h2{font-size:clamp(24px,5.8vw,34px)!important;line-height:1.2}
 /* Category tiles specifically: original deployment shows giant single-column boxes. */
 .category-tiles.custom-grid,.custom-grid.category-tiles,.free-tool-tiles.custom-grid,.custom-grid.free-tool-tiles,.ecosystem-tiles.custom-grid,.custom-grid.ecosystem-tiles,.product-tiles.custom-grid,.custom-grid.product-tiles,.tcg-path-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
 .category-tiles .info-card,.free-tool-tiles .info-card,.ecosystem-tiles .info-card{padding:13px 12px!important;min-height:0!important;border-radius:14px!important}
 .category-tiles .info-card>div:first-child{font-size:24px!important;line-height:1.2}
 .category-tiles .info-card h3,.free-tool-tiles .info-card h3,.ecosystem-tiles .info-card h3{font-size:clamp(13px,3.3vw,17px)!important;line-height:1.32!important;margin:7px 0 5px!important;letter-spacing:-.25px}
 .category-tiles .info-card p,.free-tool-tiles .info-card p,.ecosystem-tiles .info-card p{font-size:clamp(11px,2.75vw,13px)!important;line-height:1.43!important;margin:0!important;min-height:0!important}
 .free-tool-tiles .info-card{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
 .free-tool-tiles .info-card .btn-primary{font-size:11px!important;padding:9px!important;line-height:1.3!important;width:100%;text-align:center;margin-top:auto}
 .product-tiles .custom-product{min-width:0!important;display:flex;flex-direction:column}
 .product-tiles .product-art{aspect-ratio:1.32!important;min-height:0!important}
 .product-tiles .product-detail{padding:11px!important;flex:1;min-width:0}
 .product-tiles .product-title{font-size:clamp(13px,3.4vw,17px)!important;margin:4px 0!important;line-height:1.35!important}
 .product-tiles .product-summary{min-height:0!important;font-size:11px!important;line-height:1.5!important}
 .product-tiles .price{font-size:18px!important}
 .product-tiles .btn-primary{font-size:11px!important;padding:10px 7px!important;width:100%;text-align:center}
 .tcg-path-card{padding:13px!important;min-height:0!important}
 .tcg-path-card h3{font-size:14px!important;line-height:1.3}
 .tcg-path-card p,.tcg-path-card a{font-size:11px!important;line-height:1.5}
 .hero{padding:32px 0 38px!important;min-height:0!important;display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:15px!important}
 .hero h1{font-size:clamp(32px,8vw,48px)!important;line-height:1.13!important;letter-spacing:-1.4px!important}
 .hero-visual{height:auto!important;min-height:0!important;margin:0 auto!important;width:100%!important;max-width:540px!important;transform:none!important}
 .hero-visual>div:last-child{width:100%!important;transform:none!important;padding:clamp(15px,4vw,26px)!important}
 .hero-stat-tiles{gap:7px!important}.hero-stat-tiles>div{padding:11px 3px!important;font-size:9px!important}
 .automation-layout{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:20px!important}
 .ad-panel{display:grid!important;grid-template-columns:minmax(0,1fr)!important;min-height:0!important;padding:25px 20px!important}
 .ad-art{display:none!important}
 .news-tiles.custom-grid,.custom-grid.news-tiles{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
 .news-tiles .info-card{padding:13px!important}
 .news-tiles .info-card h3,.news-tiles .info-card h2{font-size:14px!important;line-height:1.4!important}
 .news-tiles .info-card p{font-size:11px!important;line-height:1.5!important}
 .module-top .container{display:flex;flex-wrap:wrap;gap:12px}
 .site-footer .container>div:first-child{flex-direction:column!important;gap:15px!important}
}
@media(max-width:360px){
 .container{width:calc(100% - 20px)!important}
 .category-tiles.custom-grid,.custom-grid.category-tiles,.free-tool-tiles.custom-grid,.custom-grid.free-tool-tiles,.product-tiles.custom-grid,.custom-grid.product-tiles,.tcg-path-grid{gap:8px!important}
 .category-tiles .info-card,.free-tool-tiles .info-card{padding:10px!important}
 .site-header .brand .brand-name{font-size:12.5px!important}
 .news-tiles.custom-grid,.custom-grid.news-tiles{grid-template-columns:minmax(0,1fr)!important}
}
@media(min-width:761px) and (max-width:1080px){
 .category-tiles.custom-grid,.free-tool-tiles.custom-grid,.product-tiles.custom-grid,.news-tiles.custom-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(prefers-reduced-motion:reduce){.hero>div,.hero-visual,.hero-visual>div,.hero .btn-primary::after{animation:none!important;transition:none!important}}

/* Scroll reveal must never reserve large blank areas while waiting for JS. */
.tcg-js .tcg-reveal{opacity:1!important;transform:none!important}
@media(prefers-reduced-motion:no-preference){.tcg-path-card{animation:tcg-hero-arrive .65s ease-out both}.tcg-path-card:nth-child(2){animation-delay:.10s}.tcg-path-card:nth-child(3){animation-delay:.2s}.tcg-path-card:nth-child(4){animation-delay:.3s}}