/* TechScales frontend architecture layer.
   Purpose: one responsive source of truth loaded after legacy CSS.
   It fixes root causes from competing historical cascades: duplicate header
   offsets, hero padding systems, card dimensions, grids, and z-index layering.
   Scope: frontend structure only. No content, routing, forms, data, or provider
   behavior is changed here. */

:root{
  --ts-header-desktop:82px;
  --ts-mobile-header:172px;
  --ts-page-gutter:clamp(16px,4vw,44px);
  --ts-container:1420px;
  --ts-container-narrow:920px;
  --ts-space-hero-mobile:clamp(50px,12vw,60px);
  --ts-space-hero-tablet:clamp(34px,5vw,52px);
  --ts-space-hero-desktop:clamp(112px,7vw,136px);
  --ts-section-mobile:clamp(42px,10vw,56px);
  --ts-section-tablet:clamp(56px,8vw,78px);
  --ts-section-desktop:clamp(72px,6vw,104px);
  --ts-card-pad-mobile:clamp(12px,3.4vw,16px);
  --ts-card-pad-desktop:clamp(18px,1.8vw,24px);
  --ts-card-radius:18px;
  --ts-card-border:1px solid rgba(101,211,227,.15);
  --ts-card-bg:linear-gradient(145deg,rgba(15,29,44,.86),rgba(7,15,26,.94));
  --ts-card-shadow:0 18px 44px rgba(0,0,0,.22);
  --ts-grid-gap:clamp(12px,1.8vw,20px);
  --ts-layer-background:0;
  --ts-layer-overlay:1;
  --ts-layer-visual:2;
  --ts-layer-content:3;
}

/* Owner QA round: production visual and interaction stabilization */
.demo-agent-grid{align-items:stretch}
.demo-agent-card{display:flex;flex-direction:column;gap:14px}
.demo-visual{position:relative;min-height:170px;border:1px solid rgba(96,235,255,.22);border-radius:24px;background:radial-gradient(circle at 25% 20%,rgba(73,231,255,.2),transparent 28%),linear-gradient(145deg,rgba(5,23,34,.94),rgba(2,8,17,.98));overflow:hidden;isolation:isolate}
.demo-visual::before{content:"";position:absolute;inset:14px;border:1px solid rgba(117,244,255,.12);border-radius:18px}
.demo-pulse{position:absolute;width:9px;height:9px;border-radius:50%;background:#62f6ff;box-shadow:0 0 22px #62f6ff;animation:tsPulse 2.8s ease-in-out infinite}.demo-pulse.p1{left:20%;top:24%}.demo-pulse.p2{right:18%;bottom:22%;animation-delay:1.2s}
.demo-message,.demo-ai-core,.demo-call,.handoff,.voice-answer,.booking-state{position:absolute;border:1px solid rgba(122,237,255,.2);background:rgba(2,16,26,.72);backdrop-filter:blur(10px);border-radius:14px;color:#dffbff;font-size:12px;font-weight:700;padding:8px 10px}.demo-message{left:16px;top:20px;animation:tsSlideIn 4.2s ease-in-out infinite}.demo-ai-core{left:50%;top:48%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-size:18px;color:#06131b;background:#75f4ff;box-shadow:0 0 45px rgba(72,238,255,.42)}.demo-cards{position:absolute;right:14px;top:18px;display:grid;gap:7px}.demo-cards i,.lead-fields i{display:block;border-radius:10px;background:rgba(84,223,255,.12);border:1px solid rgba(91,226,255,.2);padding:6px 9px;font-style:normal;font-size:11px;color:#b8eef5;animation:tsFadeRise 3.8s ease-in-out infinite}.demo-cards i:nth-child(2){animation-delay:.35s}.demo-cards i:nth-child(3){animation-delay:.7s}.demo-call{right:18px;bottom:18px}
.chat-dot{position:absolute;left:20px;top:28px;width:36px;height:24px;border-radius:14px;background:#62f6ff;box-shadow:0 0 24px rgba(98,246,255,.45);animation:tsSlideIn 3.5s infinite}.chat-line{position:absolute;left:68px;height:10px;border-radius:999px;background:rgba(188,246,255,.5);animation:tsTyping 3.5s infinite}.chat-line.one{top:30px;width:48%}.chat-line.two{top:50px;width:34%;animation-delay:.2s}.lead-fields{position:absolute;left:18px;bottom:18px;display:flex;gap:6px;flex-wrap:wrap}.handoff{right:18px;bottom:18px}
.wave{position:absolute;left:18px;right:18px;top:36px;height:58px;display:flex;align-items:center;justify-content:center;gap:8px}.wave i{width:8px;border-radius:999px;background:linear-gradient(#78f6ff,#238dff);animation:tsWave 1.15s ease-in-out infinite}.wave i:nth-child(1){height:24px}.wave i:nth-child(2){height:48px;animation-delay:.1s}.wave i:nth-child(3){height:34px;animation-delay:.2s}.wave i:nth-child(4){height:56px;animation-delay:.3s}.wave i:nth-child(5){height:28px;animation-delay:.4s}.transcript-line{position:absolute;left:20px;right:20px;top:108px;height:12px;border-radius:999px;background:linear-gradient(90deg,rgba(115,244,255,.7),rgba(115,244,255,.08));animation:tsTyping 2.8s infinite}.voice-answer{left:18px;bottom:18px}.booking-state{right:18px;bottom:18px}
.demo-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:auto}.demo-actions .text-link{justify-content:flex-start;min-height:40px}
.partner-system-map{position:relative;margin:24px 0 22px;min-height:320px;border:1px solid rgba(92,232,255,.18);border-radius:30px;background:radial-gradient(circle at 50% 50%,rgba(80,235,255,.16),transparent 30%),linear-gradient(145deg,rgba(3,18,28,.94),rgba(2,7,15,.98));overflow:hidden}.partner-system-map svg{position:absolute;inset:0;width:100%;height:100%}.partner-path{fill:none;stroke:url(#partnerLine);stroke-width:1.4;stroke-dasharray:8 10;opacity:.55;animation:tsDash 8s linear infinite}.partner-map-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;width:150px;height:150px;border-radius:50%;display:grid;place-items:center;text-align:center;border:1px solid rgba(114,246,255,.5);background:rgba(3,20,30,.82);box-shadow:0 0 70px rgba(67,226,255,.22)}.partner-map-core strong{font-size:20px}.partner-map-core span{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:#8eefff}
.partner-node{position:absolute;z-index:2;border:1px solid rgba(124,238,255,.24);background:rgba(7,26,38,.78);border-radius:999px;padding:9px 13px;font-size:12px;font-weight:800;color:#dffbff;box-shadow:0 0 22px rgba(67,226,255,.1);animation:tsFloat 4.8s ease-in-out infinite}.node-1{left:8%;top:12%}.node-2{left:36%;top:8%;animation-delay:.2s}.node-3{right:14%;top:14%;animation-delay:.4s}.node-4{left:10%;top:46%;animation-delay:.6s}.node-5{right:8%;top:48%;animation-delay:.8s}.node-6{left:18%;bottom:13%;animation-delay:1s}.node-7{left:43%;bottom:9%;animation-delay:1.2s}.node-8{right:17%;bottom:15%;animation-delay:1.4s}.node-9{right:37%;top:29%;animation-delay:1.6s}
.partner-data-stream i{position:absolute;width:6px;height:6px;border-radius:50%;background:#62f6ff;box-shadow:0 0 18px #62f6ff;animation:tsOrbitDot 6s linear infinite}.partner-data-stream i:nth-child(1){left:18%;top:24%}.partner-data-stream i:nth-child(2){right:22%;top:36%;animation-delay:1s}.partner-data-stream i:nth-child(3){left:34%;bottom:18%;animation-delay:2s}.partner-data-stream i:nth-child(4){right:32%;bottom:26%;animation-delay:3s}
.delivery-flow-visual{position:relative;margin:20px 0 26px;padding:26px;border:1px solid rgba(100,230,255,.18);border-radius:28px;background:linear-gradient(145deg,rgba(6,23,35,.92),rgba(2,8,16,.96));display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;overflow:hidden}.delivery-flow-line{position:absolute;left:40px;right:40px;top:50%;height:2px;background:rgba(114,238,255,.18)}.delivery-flow-line i{display:block;width:22%;height:100%;background:#63efff;box-shadow:0 0 20px #63efff;animation:tsFlowLine 5.5s ease-in-out infinite}.delivery-flow-stage{position:relative;z-index:1;min-height:130px;border:1px solid rgba(115,237,255,.18);border-radius:18px;background:rgba(4,18,29,.86);padding:16px;display:grid;align-content:center;gap:6px}.delivery-flow-stage span{color:#6ff4ff;font-weight:900}.delivery-flow-stage strong{font-size:16px}.delivery-flow-stage small{color:#a8bdc8}.delivery-flow-output{position:relative;z-index:1;grid-column:1/-1;justify-self:center;border-radius:999px;background:rgba(99,239,255,.14);border:1px solid rgba(99,239,255,.32);padding:10px 18px;color:#dffcff;font-weight:900}
.planner-structured-response{display:grid;gap:14px}.planner-structured-response h4{margin:0 0 5px;color:#7df6ff;font-size:12px;text-transform:uppercase;letter-spacing:.12em}.planner-structured-response p{margin:0}.planner-structured-response ul{margin:0;padding-left:18px;display:grid;gap:6px}.planner-module-chips{display:flex;flex-wrap:wrap;gap:7px}.planner-module-chips span{border:1px solid rgba(117,239,255,.22);border-radius:999px;padding:6px 10px;background:rgba(94,226,255,.08);font-size:12px}.consultant-shell{width:min(100%,1120px);margin-inline:auto}.consultant-body{min-height:420px}.chat-stream{min-height:390px;max-height:58dvh;overflow-y:auto;overflow-x:hidden}.consultant-compose textarea{min-height:46px;max-height:120px}
.services-mega,.industries-mega,.ai-agents-mega,.workflows-mega{left:50%!important;right:auto!important;transform:translateX(-50%)!important;width:min(1180px,calc(100vw - 32px))!important;max-width:calc(100vw - 32px)!important;max-height:min(72vh,680px);overflow-y:auto;overflow-x:hidden;padding:18px!important;z-index:1005}.services-mega-grid,.ai-mega-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important;gap:14px!important}.menu-service,.ai-mega-card{min-width:0}.menu-subservice{word-break:normal;overflow-wrap:anywhere}
.language-suggestion-sheet{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:1400;width:min(520px,calc(100vw - 28px));border:1px solid rgba(110,239,255,.28);border-radius:20px;background:rgba(4,16,26,.96);box-shadow:0 24px 80px rgba(0,0,0,.45);padding:16px;color:#e8fbff}.language-suggestion-sheet p{margin:0 0 12px}.language-suggestion-sheet div{display:flex;gap:8px;flex-wrap:wrap}.language-suggestion-sheet button,.footer-language-select select{border:1px solid rgba(110,239,255,.24);background:rgba(90,226,255,.08);color:#e8fbff;border-radius:999px;padding:8px 12px}.footer-language-select{margin-top:12px;display:grid;gap:6px}
.voice-recommendations [data-voice-recommendations]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.voice-recommendations label{min-height:44px;border:1px solid rgba(119,239,255,.18);border-radius:14px;background:rgba(91,224,255,.07);padding:10px 12px;cursor:pointer;display:flex;align-items:center;gap:10px}.voice-recommendations input{flex:0 0 auto}.modal-card,.system-modal{max-width:min(1050px,calc(100vw - 28px));max-height:90dvh;overflow-y:auto;overflow-x:hidden}
@keyframes tsPulse{0%,100%{transform:scale(.8);opacity:.55}50%{transform:scale(1.25);opacity:1}}@keyframes tsSlideIn{0%,100%{transform:translateY(0);opacity:.75}50%{transform:translateY(8px);opacity:1}}@keyframes tsFadeRise{0%,100%{transform:translateY(8px);opacity:.45}45%,70%{transform:translateY(0);opacity:1}}@keyframes tsTyping{0%{transform:scaleX(.25);transform-origin:left;opacity:.45}45%,100%{transform:scaleX(1);transform-origin:left;opacity:1}}@keyframes tsWave{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1)}}@keyframes tsDash{to{stroke-dashoffset:-120}}@keyframes tsFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes tsOrbitDot{0%,100%{transform:translate(0,0);opacity:.45}50%{transform:translate(34px,-18px);opacity:1}}@keyframes tsFlowLine{0%{transform:translateX(0);width:12%}45%{width:55%}100%{transform:translateX(360%);width:12%}}
@media (max-width:700px){.demo-actions{grid-template-columns:1fr}.partner-system-map{min-height:430px}.partner-node{font-size:11px;padding:7px 10px}.node-1{left:5%;top:8%}.node-2{left:42%;top:5%}.node-3{right:5%;top:17%}.node-4{left:4%;top:38%}.node-5{right:4%;top:39%}.node-6{left:5%;bottom:20%}.node-7{left:36%;bottom:9%}.node-8{right:5%;bottom:18%}.node-9{right:25%;top:28%}.delivery-flow-visual{grid-template-columns:1fr;padding:16px}.delivery-flow-line{display:none}.delivery-flow-stage{min-height:auto}.consultant-body{min-height:65dvh}.chat-stream{min-height:48dvh;max-height:58dvh}.voice-recommendations [data-voice-recommendations]{grid-template-columns:1fr}.services-mega,.industries-mega,.ai-agents-mega,.workflows-mega{display:none!important}}
@media (prefers-reduced-motion:reduce){.demo-pulse,.demo-cards i,.chat-dot,.chat-line,.wave i,.transcript-line,.partner-path,.partner-node,.partner-data-stream i,.delivery-flow-line i{animation:none!important}}

/* Owner review: workflow/AI demo/forms/language refinements */
.language-select-label{
  display:inline-flex;
  align-items:center;
}
.language-select-label select{
  min-height:34px;
  border:1px solid rgba(101,211,227,.28);
  border-radius:12px;
  background:rgba(7,15,25,.72);
  color:var(--text,#eef7fb);
  padding:0 28px 0 10px;
  font:inherit;
  font-size:.82rem;
}
.nav-actions .language-select-label select{
  max-width:112px;
}
@media (min-width:1081px){
  #site-header .nav-wrap{
    width:min(calc(100% - 32px),1460px);
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:clamp(14px,1.8vw,28px);
  }
  #site-header .brand{
    width:clamp(128px,10vw,156px);
  }
  #site-header .desktop-nav{
    margin:0;
    justify-content:center;
    gap:clamp(10px,1.05vw,17px);
    min-width:0;
  }
  #site-header .desktop-nav a,
  #site-header .desktop-nav button,
  #site-header .desktop-nav .services-directory-link,
  #site-header .desktop-nav .industries-directory-link,
  #site-header .desktop-nav .ai-directory-link{
    white-space:nowrap;
    font-size:clamp(10px,.78vw,12px);
  }
  #site-header .nav-actions{
    justify-self:end;
    margin:0;
    gap:8px;
    flex-wrap:nowrap;
    min-width:max-content;
  }
  #site-header .nav-actions .btn,
  #site-header .nav-actions .nav-ai,
  #site-header .nav-actions .my-system-control{
    min-height:36px;
    padding:7px 10px;
    font-size:11px;
  }
  #site-header .nav-actions .language-select-label select{
    max-width:96px;
    min-height:34px;
  }
}

/* Owner QA final cascade guard */
.services-mega,.industries-mega,.ai-agents-mega,.workflows-mega{
  position:fixed!important;
  left:50%!important;
  right:auto!important;
  top:calc(var(--ts-header-desktop,82px) + 10px)!important;
  transform:translate(-50%,-8px)!important;
  width:min(1400px,calc(100vw - 48px))!important;
  max-width:calc(100vw - 48px)!important;
  max-height:calc(100dvh - var(--ts-header-desktop,82px) - 28px)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  z-index:1005!important;
}
.services-menu-wrap.open>.services-mega,
.industries-menu-wrap.open>.industries-mega,
.ai-menu-wrap.open>.ai-agents-mega,
.workflows-menu-wrap.open>.workflows-mega{
  transform:translate(-50%,0)!important;
}
@media (max-width:700px){
  .services-mega,.industries-mega,.ai-agents-mega,.workflows-mega{display:none!important}
}
.mobile-secondary-nav .language-select-label{
  grid-column:1/-1;
}
.mobile-secondary-nav .language-select-label select{
  width:100%;
}
.workflows-mega .services-mega-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.workflows-mega .menu-subservice{
  line-height:1.25;
}
.homepage-live-demos .agent-card,
.ai-agent-demos .agent-card,
.workflow-grid .agent-card{
  min-height:auto;
}
.workflow-card-actions,
.form-end{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
}
.workflow-card-actions button{
  border:1px solid rgba(101,211,227,.24);
  border-radius:999px;
  background:rgba(12,29,44,.72);
  color:var(--text,#eef7fb);
  padding:.62rem .85rem;
  cursor:pointer;
}
.workflow-card-actions button:hover,
.workflow-card-actions button:focus-visible{
  border-color:rgba(101,211,227,.64);
  box-shadow:0 0 0 3px rgba(101,211,227,.12);
}
.form-attachment-preview{
  margin:.45rem 0 .8rem;
}
.voice-reply-form{
  display:grid;
  gap:8px;
  margin:12px 0;
  padding:12px;
  border:1px solid rgba(101,211,227,.18);
  border-radius:14px;
  background:rgba(6,20,31,.74);
}
.voice-reply-form label{
  color:#b8cad6;
  font-size:.9rem;
  font-weight:700;
}
.voice-reply-form textarea{
  width:100%;
  min-height:82px;
  resize:vertical;
  border:1px solid rgba(101,211,227,.24);
  border-radius:10px;
  background:#071823;
  color:#eef8fb;
  padding:10px 12px;
}
.voice-reply-form>div{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.voice-reply-form button{
  min-height:40px;
  padding:8px 12px;
  border:1px solid #326c79;
  border-radius:9px;
  background:#0a202b;
  color:#c8f3f6;
  cursor:pointer;
}
.voice-recommendations label{
  justify-content:flex-start;
  text-align:left;
}
.voice-recommendations input{
  flex:0 0 auto;
}
.booking-intake .btn-secondary{
  margin-left:.35rem;
}
.ai-agent-request .request-layout,
.workflow-request .request-layout{
  align-items:start;
}
@media (max-width:760px){
  .workflows-mega .services-mega-grid{
    grid-template-columns:1fr;
  }
  .homepage-live-demos .agent-grid,
  .ai-agent-demos .agent-grid,
  .workflow-grid{
    gap:12px;
  }
  .workflow-card-actions button{
    width:100%;
    justify-content:center;
  }
  .booking-intake .btn-secondary{
    margin-left:0;
  }
}

/* Owner Review #4 production stabilization: dropdown parity, unique page motion,
   compact scale, contact/booking field clarity and Planner attachment chips. */
.services-menu-wrap,
.industries-menu-wrap,
.ai-menu-wrap{
  position:relative;
  display:inline-flex!important;
  align-items:center;
  gap:4px;
}
.services-directory-link,
.industries-directory-link,
.ai-directory-link{
  display:inline-flex!important;
  align-items:center;
  min-height:38px;
  padding:0 2px;
  color:#b6c0cd;
  font-size:12px;
  font-weight:700;
}
.services-trigger,
.industries-trigger,
.ai-trigger{
  display:grid!important;
  place-items:center;
  width:28px!important;
  height:28px!important;
  min-height:28px!important;
  padding:0!important;
  border:1px solid rgba(101,211,227,.24)!important;
  border-radius:9px!important;
  background:rgba(255,255,255,.025)!important;
  color:#98edf4!important;
  cursor:pointer;
  transition:border-color .18s ease,background-color .18s ease,transform .18s ease!important;
}
.services-trigger span,
.industries-trigger span,
.ai-trigger span{
  font-size:10px!important;
  line-height:1!important;
  transform:translateY(-1px);
}
.services-menu-wrap.open .services-trigger,
.industries-menu-wrap.open .industries-trigger,
.ai-menu-wrap.open .ai-trigger,
.services-trigger:hover,
.industries-trigger:hover,
.ai-trigger:hover,
.services-trigger:focus-visible,
.industries-trigger:focus-visible,
.ai-trigger:focus-visible{
  border-color:rgba(101,211,227,.68)!important;
  background:rgba(46,196,214,.09)!important;
}
.services-menu-wrap.open .services-trigger span,
.industries-menu-wrap.open .industries-trigger span,
.ai-menu-wrap.open .ai-trigger span{
  transform:rotate(180deg);
}
.services-mega,
.industries-mega,
.ai-agents-mega{
  position:absolute;
  left:50%;
  top:calc(100% + 18px);
  z-index:80;
  width:min(1040px,calc(100vw - 40px));
  padding:16px;
  border:1px solid rgba(101,211,227,.22);
  border-radius:18px;
  background:rgba(7,15,25,.98);
  box-shadow:0 28px 80px rgba(0,0,0,.5);
  backdrop-filter:blur(22px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate(-50%,-8px);
  transition:opacity .22s ease,visibility .22s ease,transform .22s ease!important;
}
.services-menu-wrap.open>.services-mega,
.industries-menu-wrap.open>.industries-mega,
.ai-menu-wrap.open>.ai-agents-mega{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:translate(-50%,0)!important;
}
.ai-mega-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.ai-menu-link{
  display:grid!important;
  gap:8px;
  min-height:86px;
  padding:14px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;
  background:linear-gradient(145deg,rgba(22,38,56,.72),rgba(8,17,28,.88));
}
.ai-menu-link span{
  color:#60dbe7;
  font-family:var(--font-primary);
  font-size:10px;
}
.ai-menu-link strong{
  color:#e8f7fb;
  font-size:14px;
}
.ai-menu-link svg{
  width:14px;
}
.ai-mega-foot{
  display:flex;
  justify-content:space-between;
  gap:18px;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.08);
}
.ai-mega-foot a,
.ai-mega-foot button{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:34px;
  border:0;
  background:none;
  color:#9ee9ef;
  font-size:13px;
  cursor:pointer;
}
main .page-hero:not([data-page-hero]),
main .industry-directory-hero,
main .industry-detail-hero{
  min-height:auto!important;
  padding-top:clamp(128px,10vw,166px)!important;
  padding-bottom:clamp(56px,5.8vw,82px)!important;
}
main .hero:not([data-page-hero]){
  min-height:auto!important;
  padding-top:clamp(132px,10vw,160px)!important;
  padding-bottom:clamp(50px,5vw,72px)!important;
}
main .section{
  padding-top:clamp(46px,5vw,76px)!important;
  padding-bottom:clamp(46px,5vw,76px)!important;
}
main .page-hero+.section,
main .industry-directory-hero+.section,
main .industry-detail-hero+.section{
  padding-top:clamp(36px,4vw,58px)!important;
}
main .capability-panel,
main .service-feature,
main .services-hub-preview,
main .home-industry-card,
main .industry-card,
main .project-card,
main .agent-card,
main .hub-service-card,
main .system-library-card,
main .related-industry-card,
main .contact-form,
main .process-deliverables article{
  padding:clamp(16px,1.45vw,24px)!important;
}
main .service-feature{
  padding-block:clamp(34px,4vw,54px)!important;
}
main .capability-panels,
main .agent-grid,
main .project-grid,
main .featured-industry-grid,
main .hub-service-grid{
  gap:clamp(10px,1vw,16px)!important;
}
main .deliver-hero:before,
main .about-hero:before,
main .contact-hero:before,
main .industries-hero:before{
  content:"";
  position:absolute;
  right:clamp(32px,7vw,120px);
  top:clamp(112px,11vw,160px);
  width:clamp(220px,28vw,420px);
  height:clamp(190px,23vw,330px);
  border:1px solid rgba(93,220,232,.22);
  border-radius:28px;
  background:
    radial-gradient(circle at 26% 28%,rgba(82,229,235,.26),transparent 24%),
    linear-gradient(135deg,rgba(13,48,68,.72),rgba(4,13,24,.78));
  opacity:.92;
  pointer-events:none;
  animation:ownerHeroFloat 7s ease-in-out infinite;
}
main .deliver-hero:before{clip-path:polygon(10% 8%,90% 0,100% 74%,22% 100%,0 42%);animation-name:ownerHeroDrift}
main .about-hero:before{border-radius:34% 66% 46% 54%;animation-name:ownerHeroPulse}
main .contact-hero:before{border-radius:22px;background:linear-gradient(135deg,rgba(23,70,91,.82),rgba(7,20,33,.88)),radial-gradient(circle at 80% 20%,rgba(94,230,237,.34),transparent 32%)}
main .industries-hero:before{background:radial-gradient(circle at 50% 50%,rgba(69,213,224,.24),transparent 50%),linear-gradient(90deg,rgba(9,34,51,.9),rgba(4,12,23,.82))}
main .ai-agent-hero .ai-hero-fallback,
main .ai-agent-hero .ai-hero-video,
main .work-hero .work-hero-fallback{
  opacity:.9!important;
  transform:none!important;
  clip-path:none!important;
}
main .work-hero .work-display{
  animation:ownerWorkOrbit 6s ease-in-out infinite!important;
}
main .work-hero .work-display:nth-of-type(2){animation-delay:.35s!important}
main .work-hero .work-display:nth-of-type(3){animation-delay:.7s!important}
main .work-hero .work-display:nth-of-type(4){animation-delay:1.05s!important}
main .ai-agent-hero .flow-node{
  animation:ownerHeroPulse 3.4s ease-in-out infinite!important;
}
main .ai-agent-hero .voice-entry{
  animation:ownerHeroFloat 5s ease-in-out infinite!important;
}
main .ai-agent-hero .faq-list,
main .faq-list{
  max-width:min(100% - 32px,980px);
  margin-left:auto;
  margin-right:auto;
}
.contact-aside a span svg,
.contact-aside button span svg{
  width:18px;
  height:18px;
}
.contact-aside a,
.contact-aside button{
  min-width:0;
}
.contact-aside strong{
  overflow-wrap:anywhere;
}
.booking-intake{
  margin:14px 0 8px;
  padding:14px;
  border:1px solid rgba(91,213,226,.18);
  border-radius:14px;
  background:rgba(5,18,29,.6);
}
.booking-intake select,
.booking-intake input{
  width:100%;
  min-height:42px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px;
  background:#06121d;
  color:#fff;
}
.planner-attachment-preview{
  grid-column:1/-1;
  width:100%;
}
.planner-attachment-preview[hidden]{
  display:none!important;
}
.planner-attachment-chip-card,
.planner-message-attachment{
  display:flex;
  align-items:center;
  gap:10px;
  max-width:min(100%,420px);
  margin-top:8px;
  padding:9px 10px;
  border:1px solid rgba(94,221,231,.24);
  border-radius:13px;
  background:rgba(8,24,36,.92);
  color:#dff8fb;
}
.planner-attachment-thumb,
.planner-message-attachment>span{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  flex:0 0 40px;
  border:1px solid rgba(94,221,231,.22);
  border-radius:10px;
  background:rgba(46,196,214,.08);
  color:#91edf4;
  font-size:10px;
  font-weight:800;
}
.planner-attachment-chip-card div,
.planner-message-attachment div{
  min-width:0;
}
.planner-attachment-chip-card strong,
.planner-message-attachment strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.planner-attachment-chip-card small,
.planner-message-attachment small{
  color:#8fa7b5;
  font-size:11px;
}
.planner-attachment-chip-card button{
  width:28px;
  height:28px;
  margin-left:auto;
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  background:rgba(255,255,255,.03);
  color:#dff8fb;
  cursor:pointer;
}
main .process-deliverables .eyebrow{
  white-space:nowrap;
  font-size:clamp(9px,1.8vw,11px)!important;
  letter-spacing:.08em!important;
}
@keyframes ownerHeroFloat{50%{transform:translate3d(0,-12px,0) scale(1.018)}}
@keyframes ownerHeroDrift{50%{transform:translate3d(-10px,8px,0) rotate(2deg)}}
@keyframes ownerHeroPulse{50%{transform:scale(1.045);filter:drop-shadow(0 0 18px rgba(76,221,231,.22))}}
@keyframes ownerWorkOrbit{0%,100%{transform:translate3d(0,0,0) rotate(0deg)}50%{transform:translate3d(8px,-10px,0) rotate(2deg)}}
@media(max-width:1180px){
  .desktop-nav{gap:14px!important}
  .services-mega,.industries-mega,.ai-agents-mega{width:min(940px,calc(100vw - 26px))}
  .ai-mega-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:1080px){
  .services-mega,.industries-mega,.ai-agents-mega{display:none!important}
  main .services-hero:before,
  main .deliver-hero:before,
  main .about-hero:before,
  main .contact-hero:before,
  main .industries-hero:before{
    position:absolute;
    display:block;
    inset:auto clamp(16px,5vw,34px) clamp(22px,7vw,42px) auto;
    width:clamp(126px,38vw,220px);
    height:clamp(108px,31vw,190px);
    margin:0;
    z-index:0;
    opacity:.38;
  }
  main .services-hero>.container,
  main .deliver-hero>.container,
  main .about-hero>.container,
  main .contact-hero>.container,
  main .industries-hero>.container{position:relative;z-index:2}
}
@media(max-width:760px){
  main .hero:not([data-page-hero]){
    padding-top:calc(var(--mobile-direct-header-height,138px) + 18px)!important;
    padding-bottom:36px!important;
  }
  main .page-hero:not([data-page-hero]),
  main .industry-directory-hero,
  main .industry-detail-hero{
    padding-top:calc(var(--mobile-direct-header-height,138px) + 24px)!important;
    padding-bottom:36px!important;
  }
  main .hero .eyebrow,
  main .page-hero .eyebrow{
    margin-top:0!important;
  }
  main .section{
    padding-top:38px!important;
    padding-bottom:38px!important;
  }
  main .capability-panel,
  main .service-feature,
  main .services-hub-preview,
  main .home-industry-card,
  main .industry-card,
  main .project-card,
  main .agent-card,
  main .hub-service-card,
  main .system-library-card,
  main .related-industry-card,
  main .contact-form,
  main .process-deliverables article{
    padding:14px!important;
  }
  main .service-feature,
  main .services-hub-preview{
    gap:14px!important;
  }
  .mobile-primary-nav button[data-mobile-mega]{
    position:relative;
    z-index:3;
    pointer-events:auto!important;
  }
  .mobile-primary-nav button[data-mobile-mega]::after{
    content:" ▼";
    font-size:9px;
    color:#75dce6;
  }
  .mobile-primary-nav button[data-mobile-mega].active::after{
    content:" ▲";
  }
  .mobile-mega-panel{
    z-index:95!important;
  }
  .planner-attachment-chip-card{
    max-width:100%;
  }
  .contact-requirement-form .form-grid,
  .booking-intake .form-grid{
    grid-template-columns:1fr!important;
  }
  main .process-deliverables .eyebrow{
    white-space:nowrap!important;
    font-size:9px!important;
  }
}
@media(prefers-reduced-motion:reduce){
  main .services-hero:before,
  main .deliver-hero:before,
  main .about-hero:before,
  main .contact-hero:before,
  main .industries-hero:before,
  main .work-hero .work-display,
  main .ai-agent-hero .flow-node,
  main .ai-agent-hero .voice-entry{
    animation:none!important;
  }
}

html{
  scroll-padding-top:calc(var(--ts-mobile-header) + 14px)!important;
}

html,
body{
  width:100%!important;
  max-width:100%!important;
  overflow-x:hidden!important;
}

body{
  min-width:0!important;
}

main,
#app{
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
}

/* Containers: one width model across every route. */
main .container,
main .narrow,
main .hero-grid,
main .page-hero .container,
main .service-detail-hero .container,
main .industry-directory-hero .container,
main .industry-detail-hero .container,
main .system-detail-hero .container,
main .agent-detail-hero .container,
main .work-hero .container,
main .system-hero-grid,
main .request-layout,
main .contact-layout,
main .contact-grid{
  width:min(var(--ts-container),calc(100% - (var(--ts-page-gutter) * 2)))!important;
  max-width:var(--ts-container)!important;
  min-width:0!important;
  margin-inline:auto!important;
  padding-inline:0!important;
}

main .narrow,
main .section-heading.centered,
main .section-heading:not(.split){
  max-width:min(var(--ts-container-narrow),calc(100% - (var(--ts-page-gutter) * 2)))!important;
}

/* Header: sticky mobile header participates in layout; heroes must not add it again. */
@media(max-width:1080px){
  #site-header{
    position:sticky!important;
    top:0!important;
    z-index:1000!important;
    width:100%!important;
    height:auto!important;
    min-height:calc(58px + env(safe-area-inset-top,0px))!important;
    max-height:none!important;
    overflow:visible!important;
    background:rgba(8,13,22,.97)!important;
    border-bottom:1px solid rgba(101,211,227,.16)!important;
    backdrop-filter:blur(18px)!important;
  }

  #site-header>.nav-wrap,
  .menu-toggle,
  .mobile-menu,
  .mobile-menu-backdrop{
    display:none!important;
  }

  .mobile-direct-header{
    display:block!important;
    position:relative!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    overflow:visible!important;
  }

  .mobile-direct-top,
  .mobile-navigation-drawer{
    width:min(calc(100% - 24px),420px)!important;
    margin-inline:auto!important;
    padding-inline:0!important;
  }

  .mobile-direct-top{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:8px!important;
    min-height:48px!important;
  }

  .mobile-direct-brand{
    width:clamp(72px,20vw,88px)!important;
    max-width:88px!important;
  }

  .mobile-direct-brand img{
    width:100%!important;
    height:auto!important;
    max-height:40px!important;
    object-fit:contain!important;
  }

  .mobile-direct-ai,
  .mobile-direct-system{
    min-width:0!important;
    min-height:36px!important;
    max-height:38px!important;
    padding:7px 8px!important;
    border-radius:10px!important;
    white-space:nowrap!important;
  }

  .mobile-direct-ai{
    width:44px!important;
    flex:0 0 44px!important;
    padding-inline:0!important;
    margin-left:auto!important;
  }

  .mobile-direct-system{
    width:100%!important;
    flex:0 0 min(118px,27vw)!important;
    max-width:118px!important;
    font-size:clamp(10.5px,2.7vw,12px)!important;
  }

  .mobile-direct-system b,
  .mobile-system-count,
  .mobile-direct-system-count{
    min-width:20px!important;
    height:20px!important;
    padding-inline:5px!important;
    flex:0 0 auto!important;
  }

  .mobile-nav-toggle{
    display:inline-grid!important;
    place-items:center!important;
    flex:0 0 38px!important;
    width:38px!important;
    height:38px!important;
    border:1px solid rgba(93,213,226,.28)!important;
    border-radius:10px!important;
    background:rgba(6,18,28,.72)!important;
    color:#e8fbff!important;
    cursor:pointer!important;
    gap:4px!important;
  }

  .mobile-nav-toggle span{
    display:block!important;
    width:16px!important;
    height:1.5px!important;
    border-radius:999px!important;
    background:currentColor!important;
  }

  .mobile-navigation-drawer{
    position:fixed!important;
    left:12px!important;
    right:12px!important;
    top:calc(var(--mobile-direct-header-height,58px) + env(safe-area-inset-top,0px) + 8px)!important;
    z-index:1250!important;
    display:none!important;
    max-height:calc(100dvh - var(--mobile-direct-header-height,58px) - env(safe-area-inset-top,0px) - 22px)!important;
    overflow:auto!important;
    overscroll-behavior:contain!important;
    padding:12px!important;
    border:1px solid rgba(93,213,226,.22)!important;
    border-radius:18px!important;
    background:linear-gradient(180deg,rgba(8,17,28,.98),rgba(5,12,21,.98))!important;
    box-shadow:0 24px 70px rgba(0,0,0,.48)!important;
    backdrop-filter:blur(18px)!important;
  }

  body.mobile-nav-open .mobile-navigation-drawer{
    display:block!important;
  }

  .mobile-primary-nav{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    align-items:stretch!important;
    width:100%!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
  }

  .mobile-primary-nav>a,
  .mobile-primary-nav>button{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    width:100%!important;
    min-width:0!important;
    min-height:42px!important;
    padding:10px 12px!important;
    border-radius:12px!important;
    font-size:13px!important;
    line-height:1.2!important;
    white-space:normal!important;
    text-align:left!important;
    overflow:visible!important;
    border:1px solid rgba(255,255,255,.09)!important;
    background:rgba(255,255,255,.026)!important;
    color:#dcebf2!important;
  }

  .mobile-primary-nav::after{
    content:none!important;
    display:none!important;
  }

  .mobile-secondary-nav{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    align-items:center!important;
    width:100%!important;
    min-height:0!important;
    margin-top:10px!important;
    overflow:visible!important;
  }

  .mobile-secondary-nav a,
  .mobile-secondary-nav button{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-width:0!important;
    min-height:42px!important;
    padding:10px 12px!important;
    border-radius:12px!important;
    font-size:13px!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }

  .mobile-mega-overlay{
    display:none!important;
  }

  .mobile-mega-panel{
    position:static!important;
    inset:auto!important;
    width:100%!important;
    max-width:none!important;
    max-height:min(46dvh,430px)!important;
    margin-top:8px!important;
  }
}

@media(max-width:380px){
  :root{--ts-mobile-header:178px}

  .mobile-primary-nav{
    gap:6px!important;
  }

  .mobile-primary-nav>a,
  .mobile-primary-nav>button{
    min-height:40px!important;
    font-size:12px!important;
  }
}

@media(max-width:520px){
  .mobile-direct-top,
  .mobile-navigation-drawer{
    width:min(366px,calc(100% - 24px))!important;
    max-width:calc(100% - 24px)!important;
    margin-left:12px!important;
    margin-right:auto!important;
  }
}

@media(min-width:1081px){
  html{
    scroll-padding-top:calc(var(--ts-header-desktop) + 18px)!important;
  }

  #site-header{
    height:var(--ts-header-desktop)!important;
    min-height:var(--ts-header-desktop)!important;
    overflow:visible!important;
  }

  .mobile-direct-header,
  .mobile-mega-overlay,
  .mobile-mega-panel{
    display:none!important;
  }
}

/* Hero system: all page heroes use the same structure and no hidden reserved height. */
main .hero:not([data-page-hero]),
main .page-hero:not([data-page-hero]),
main .service-detail-hero,
main .industry-directory-hero,
main .industry-detail-hero,
main .system-detail-hero,
main .agent-detail-hero,
main .work-hero,
main .ai-agent-hero{
  position:relative!important;
  isolation:isolate!important;
  width:100%!important;
  min-height:auto!important;
  overflow:hidden!important;
  border-bottom:1px solid rgba(101,211,227,.12)!important;
}

main .ai-agent-hero{
  display:block!important;
  align-items:initial!important;
  justify-content:initial!important;
}

main .ai-agent-hero>.container{
  margin-top:0!important;
  padding-top:0!important;
  transform:none!important;
}

main .ai-hero-video{
  position:absolute!important;
  inset:0!important;
  z-index:var(--ts-layer-background)!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  opacity:.45!important;
  pointer-events:none!important;
}

main .ai-hero-fallback{
  top:0!important;
  opacity:.38!important;
}

main .hero:not([data-page-hero]),
main .page-hero:not([data-page-hero]),
main .service-detail-hero,
main .industry-directory-hero,
main .industry-detail-hero,
main .system-detail-hero,
main .agent-detail-hero,
main .work-hero,
main .ai-agent-hero{
  padding-top:var(--ts-space-hero-mobile)!important;
  padding-bottom:clamp(34px,8vw,48px)!important;
}

main .hero>.container,
main .page-hero:not([data-page-hero])>.container,
main .service-detail-hero>.container,
main .industry-directory-hero>.container,
main .industry-detail-hero>.container,
main .system-detail-hero>.container,
main .agent-detail-hero>.container,
main .work-hero>.container,
main .hero-grid,
main .system-hero-grid,
main .industry-hero-grid{
  position:relative!important;
  z-index:var(--ts-layer-content)!important;
}

main .hero-atmosphere,
main .page-grid,
main .ai-hero-fallback,
main .work-hero-fallback,
main .hero-vignette,
main .perspective-grid,
main .cta-grid{
  position:absolute!important;
  inset:0!important;
  z-index:var(--ts-layer-background)!important;
  pointer-events:none!important;
  min-height:0!important;
}

main .hero:after,
main .page-hero:after,
main .service-detail-hero:after,
main .industry-directory-hero:after,
main .industry-detail-hero:after,
main .system-detail-hero:after,
main .agent-detail-hero:after,
main .work-hero:after,
main .ai-agent-hero:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:var(--ts-layer-overlay);
  pointer-events:none;
  background:linear-gradient(180deg,rgba(4,10,18,.78),rgba(4,10,18,.38) 38%,rgba(4,10,18,.88));
}

main .hero-visual,
main .system-visual,
main .system-hero-visual,
main .work-hero-visual,
main .agent-glyph,
main .cap-panel-orbit{
  position:relative!important;
  z-index:var(--ts-layer-visual)!important;
}

main .hero-copy,
main .hero-copy>*,
main .page-hero .container>*,
main .service-detail-hero .container>*,
main .industry-directory-hero .container>*,
main .industry-detail-hero .container>*,
main .system-detail-hero .container>*,
main .agent-detail-hero .container>*,
main .work-hero .container>*{
  position:relative!important;
  z-index:var(--ts-layer-content)!important;
}

main .hero-grid,
main .system-hero-grid,
main .industry-hero-grid,
main .service-detail-grid,
main .request-layout,
main .contact-layout{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:clamp(18px,4.5vw,28px)!important;
  align-items:start!important;
}

main .eyebrow,
main .ts-eyebrow,
main .section-eyebrow{
  margin:0!important;
  min-width:0!important;
  max-width:100%!important;
  white-space:normal!important;
  overflow-wrap:normal!important;
}

main .hero h1,
main .home-hero-title,
main .ts-hero-heading,
main .page-hero h1,
main .service-detail-hero h1,
main .industry-directory-hero h1,
main .industry-detail-hero h1,
main .system-detail-hero h1,
main .agent-detail-hero h1,
main .work-hero h1{
  max-width:100%!important;
  margin:clamp(12px,3.4vw,18px) 0!important;
  line-height:1.04!important;
  text-wrap:balance;
  overflow-wrap:break-word!important;
  word-break:normal!important;
  white-space:normal!important;
}

main .hero-lead,
main .home-hero-description,
main .page-hero p,
main .service-detail-hero p,
main .industry-directory-hero p,
main .industry-detail-hero p,
main .system-detail-hero p,
main .agent-detail-hero p,
main .work-hero p{
  max-width:min(100%,48ch)!important;
  line-height:1.55!important;
  overflow-wrap:break-word!important;
  word-break:normal!important;
  white-space:normal!important;
}

@media(max-width:520px){
  main .eyebrow,
  main .ts-eyebrow{
    display:flex!important;
    align-items:flex-start!important;
    flex-wrap:wrap!important;
    width:100%!important;
    max-width:calc(100vw - 40px)!important;
    height:auto!important;
    min-height:0!important;
    gap:8px!important;
    overflow:visible!important;
    white-space:normal!important;
    line-height:1.35!important;
    text-wrap:balance;
  }

  main .eyebrow>span,
  main .ts-eyebrow>span{
    flex:0 0 24px!important;
    margin-top:.62em!important;
  }

  main .hero h1,
  main .home-hero-title,
  main .ts-hero-heading,
  main .page-hero h1,
  main .service-detail-hero h1,
  main .industry-directory-hero h1,
  main .industry-detail-hero h1,
  main .system-detail-hero h1,
  main .agent-detail-hero h1,
  main .work-hero h1{
    max-inline-size:calc(100vw - 40px)!important;
    width:100%!important;
    font-size:clamp(36px,10.2vw,44px)!important;
    letter-spacing:-.045em!important;
    white-space:normal!important;
  }

  main .hero-lead,
  main .home-hero-description,
  main .page-hero p,
  main .service-detail-hero p,
  main .industry-directory-hero p,
  main .industry-detail-hero p,
  main .system-detail-hero p,
  main .agent-detail-hero p,
  main .work-hero p{
    max-inline-size:calc(100vw - 40px)!important;
    white-space:normal!important;
  }
}

main .hero-actions,
main .page-hero .hero-actions,
main .service-detail-hero .hero-actions,
main .industry-detail-hero .hero-actions,
main .system-detail-hero .hero-actions,
main .agent-detail-hero .hero-actions,
main .work-hero .hero-actions{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:10px!important;
  width:100%!important;
  margin-top:clamp(18px,4.4vw,24px)!important;
}

main .hero-actions .btn,
main .hero-actions .text-btn,
main .page-hero .btn,
main .service-detail-hero .btn,
main .industry-detail-hero .btn,
main .system-detail-hero .btn,
main .agent-detail-hero .btn,
main .work-hero .btn{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
}

main .trust-line{
  margin-top:clamp(18px,4vw,28px)!important;
  gap:8px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  flex-wrap:nowrap!important;
  scrollbar-width:none!important;
}

main .trust-line::-webkit-scrollbar{
  display:none!important;
}

main .trust-line span{
  flex:0 0 auto!important;
}

main .system-visual{
  width:100%!important;
  max-width:100%!important;
  height:clamp(260px,72vw,340px)!important;
  max-height:340px!important;
}

@media(min-width:768px){
  main .hero:not([data-page-hero]),
  main .page-hero:not([data-page-hero]),
  main .service-detail-hero,
  main .industry-directory-hero,
  main .industry-detail-hero,
  main .system-detail-hero,
  main .agent-detail-hero,
  main .work-hero,
  main .ai-agent-hero{
    padding-top:var(--ts-space-hero-tablet)!important;
    padding-bottom:clamp(46px,6vw,64px)!important;
  }

  main .hero-grid,
  main .system-hero-grid,
  main .industry-hero-grid{
    grid-template-columns:minmax(0,1fr) minmax(300px,.82fr)!important;
    align-items:center!important;
  }

  main .hero-actions,
  main .page-hero .hero-actions,
  main .service-detail-hero .hero-actions,
  main .industry-detail-hero .hero-actions,
  main .system-detail-hero .hero-actions,
  main .agent-detail-hero .hero-actions,
  main .work-hero .hero-actions{
    display:flex!important;
    flex-wrap:wrap!important;
    width:auto!important;
  }

  main .hero-actions .btn,
  main .hero-actions .text-btn,
  main .page-hero .btn,
  main .service-detail-hero .btn,
  main .industry-detail-hero .btn,
  main .system-detail-hero .btn,
  main .agent-detail-hero .btn,
  main .work-hero .btn{
    width:auto!important;
  }

  main .system-visual{
    height:clamp(320px,42vw,460px)!important;
    max-height:480px!important;
  }
}

@media(min-width:1081px){
  main .hero:not([data-page-hero]),
  main .page-hero:not([data-page-hero]),
  main .service-detail-hero,
  main .industry-directory-hero,
  main .industry-detail-hero,
  main .system-detail-hero,
  main .agent-detail-hero,
  main .work-hero,
  main .ai-agent-hero{
    padding-top:var(--ts-space-hero-desktop)!important;
    padding-bottom:clamp(54px,5vw,78px)!important;
  }

  main .hero-grid,
  main .system-hero-grid,
  main .industry-hero-grid{
    grid-template-columns:minmax(0,.98fr) minmax(420px,1.02fr)!important;
    gap:clamp(34px,4vw,58px)!important;
  }

  main .system-visual{
    height:clamp(360px,30vw,500px)!important;
    max-height:520px!important;
  }
}

/* Sections and grids: one compact scale. */
main .section,
main .consultant-section,
main .capabilities,
main .journey,
main .work-preview,
main .founder-preview,
main .services-directory,
main .hub-support,
main .connected-detail,
main .service-faq,
main .service-request{
  padding-block:var(--ts-section-mobile)!important;
}

main .section-heading{
  margin-bottom:clamp(20px,5vw,30px)!important;
}

main .section-heading h2{
  margin:clamp(10px,2vw,16px) 0!important;
}

main .capability-panels,
main .featured-industry-grid,
main .industry-directory-grid,
main .project-grid,
main .portfolio-full,
main .values-grid,
main .control-grid,
main .agent-grid,
main .hub-service-grid,
main .system-library-grid,
main .connected-system-groups,
main .related-industry-grid,
main .scenario-grid,
main .use-case-grid,
main .system-connection-grid,
main .subsector-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))!important;
  gap:var(--ts-grid-gap)!important;
  align-items:stretch!important;
}

main .capability-panel,
main .home-industry-card,
main .industry-card,
main .project-card,
main .agent-card,
main .hub-service-card,
main .system-library-card,
main .scenario-grid article,
main .related-industry-card,
main .service-detail-grid article,
main .use-case-grid article,
main .system-connection-grid article,
main .values-grid article,
main .control-grid article,
main .contact-aside>a,
main .contact-aside>button{
  min-width:0!important;
  min-height:0!important;
  height:auto!important;
  max-height:none!important;
  padding:var(--ts-card-pad-mobile)!important;
  border:var(--ts-card-border)!important;
  border-radius:var(--ts-card-radius)!important;
  background:var(--ts-card-bg)!important;
  box-shadow:none!important;
}

main .capability-panel,
main .agent-card,
main .hub-service-card,
main .system-library-card,
main .project-card{
  display:flex!important;
  flex-direction:column!important;
}

main .cap-panel-orbit,
main .agent-glyph{
  width:clamp(52px,14vw,68px)!important;
  height:clamp(52px,14vw,68px)!important;
  margin:clamp(8px,2.8vw,14px) 0!important;
}

main .capability-panel h3,
main .agent-card h3,
main .hub-service-card h3,
main .system-library-card h3,
main .project-copy h3,
main .industry-card h3,
main .home-industry-card h3{
  margin-block:clamp(7px,2vw,12px)!important;
  line-height:1.22!important;
}

main .capability-panel p,
main .agent-card p,
main .hub-service-card p,
main .system-library-card p,
main .project-copy p,
main .industry-card p,
main .home-industry-card p{
  margin-bottom:clamp(8px,2vw,12px)!important;
  line-height:1.43!important;
}

main .home-industry-card .industry-picture,
main .industry-card .industry-picture,
main .related-industry-picture,
main .process-media-card,
main .process-media-fallback,
main .project-art,
main .project-media{
  width:100%!important;
  height:auto!important;
  max-height:clamp(132px,34vw,190px)!important;
  aspect-ratio:16/10!important;
  overflow:hidden!important;
}

main .project-copy{
  padding:var(--ts-card-pad-mobile)!important;
}

@media(min-width:768px){
  main .section,
  main .consultant-section,
  main .capabilities,
  main .journey,
  main .work-preview,
  main .founder-preview,
  main .services-directory,
  main .hub-support,
  main .connected-detail,
  main .service-faq,
  main .service-request{
    padding-block:var(--ts-section-tablet)!important;
  }

  main .capability-panels,
  main .featured-industry-grid,
  main .industry-directory-grid,
  main .project-grid,
  main .portfolio-full,
  main .values-grid,
  main .control-grid,
  main .agent-grid,
  main .hub-service-grid,
  main .system-library-grid,
  main .connected-system-groups,
  main .related-industry-grid,
  main .scenario-grid,
  main .use-case-grid,
  main .system-connection-grid,
  main .subsector-grid{
    grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))!important;
  }
}

@media(min-width:1081px){
  main .section,
  main .consultant-section,
  main .capabilities,
  main .journey,
  main .work-preview,
  main .founder-preview,
  main .services-directory,
  main .hub-support,
  main .connected-detail,
  main .service-faq,
  main .service-request{
    padding-block:var(--ts-section-desktop)!important;
  }

  main .capability-panel,
  main .home-industry-card,
  main .industry-card,
  main .project-card,
  main .agent-card,
  main .hub-service-card,
  main .system-library-card,
  main .scenario-grid article,
  main .related-industry-card,
  main .service-detail-grid article,
  main .use-case-grid article,
  main .system-connection-grid article,
  main .values-grid article,
  main .control-grid article{
    padding:var(--ts-card-pad-desktop)!important;
  }

  main .capability-panels{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
  }

  main .agent-grid,
  main .hub-service-grid,
  main .project-grid,
  main .portfolio-full,
  main .scenario-grid,
  main .use-case-grid,
  main .system-connection-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }

  main .featured-industry-grid,
  main .industry-directory-grid,
  main .system-library-grid,
  main .connected-system-groups{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }

  main .home-industry-card .industry-picture,
  main .industry-card .industry-picture,
  main .related-industry-picture,
  main .process-media-card,
  main .process-media-fallback{
    max-height:210px!important;
  }

  main .project-art,
  main .project-media{
    max-height:220px!important;
  }
}

@media(min-width:1081px) and (max-width:1279px){
  main .capability-panels,
  main .featured-industry-grid,
  main .industry-directory-grid,
  main .system-library-grid,
  main .connected-system-groups,
  main .agent-grid,
  main .hub-service-grid,
  main .project-grid,
  main .portfolio-full{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

/* Booking fallback: visitor-facing only; technical details stay server/admin side. */
.booking-fallback-copy,
.booking-choices{
  position:relative!important;
  z-index:1!important;
}

.booking-choices a{
  min-width:0!important;
}

/* Motion contract: animation layers can transform, but never reserve layout height. */
@media(prefers-reduced-motion:no-preference){
  .glow,
  .system-visual .visual-grid,
  .orbit-a,
  .orbit-b,
  .node i,
  .status-dot,
  .visual-caption i,
  .journey-step i,
  .process-step i:after,
  .service-diagram i:nth-child(3),
  .agent-glyph b,
  .data-line,
  .project-signal,
  .work-display,
  .office-screen{
    will-change:transform,opacity;
  }
}

@media(prefers-reduced-motion:reduce){
  .reveal,
  .project-card,
  .industry-card,
  .home-industry-card,
  .related-industry-card,
  .hub-service-card,
  .agent-card,
  .capability-panel,
  .system-library-card,
  .services-mega,
  .industries-mega,
  .mobile-mega-panel{
    transition:none!important;
  }

  .reveal{
    opacity:1!important;
    transform:none!important;
  }
}

/* Owner final targeted fixes: inner hero visuals must be separate from text. */
:root{
  --ts-space-hero-mobile:clamp(24px,7vw,38px);
}

main .page-hero:not([data-page-hero]){
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:clamp(18px,5vw,28px)!important;
  padding-top:var(--ts-space-hero-mobile)!important;
  padding-inline:var(--ts-page-gutter)!important;
}

main .page-hero:not([data-page-hero])>.container{
  order:1!important;
  width:100%!important;
  max-width:780px!important;
  margin-inline:0!important;
  padding:clamp(20px,5vw,34px)!important;
  border:1px solid rgba(101,211,227,.14)!important;
  border-radius:24px!important;
  background:linear-gradient(145deg,rgba(6,14,24,.96),rgba(8,18,30,.9))!important;
  box-shadow:0 22px 60px rgba(0,0,0,.28)!important;
  backdrop-filter:blur(16px)!important;
}

main .page-hero .page-grid,
main .page-hero .ai-hero-fallback,
main .page-hero .work-hero-fallback,
main .page-hero .ai-hero-video{
  order:2!important;
  position:relative!important;
  inset:auto!important;
  display:block!important;
  width:100%!important;
  min-height:clamp(190px,52vw,300px)!important;
  height:clamp(190px,52vw,300px)!important;
  margin:0!important;
  border:1px solid rgba(101,211,227,.13)!important;
  border-radius:24px!important;
  overflow:hidden!important;
  opacity:.72!important;
  mask-image:none!important;
}

main .page-hero .ai-hero-video{
  object-fit:cover!important;
  opacity:.34!important;
}

main .ai-agent-hero .page-grid,
main .ai-agent-hero .ai-hero-video,
main .work-hero .page-grid{
  display:none!important;
}

main .page-hero:after{
  background:linear-gradient(180deg,rgba(4,10,18,.3),rgba(4,10,18,.7))!important;
}

main .page-hero .flow-node,
main .page-hero .voice-entry,
main .page-hero .work-display{
  transform:scale(.72)!important;
}

main .planner-attachment-chip{
  display:inline-flex!important;
  width:max-content!important;
  max-width:100%!important;
  margin-top:8px!important;
  padding:6px 9px!important;
  border:1px solid rgba(101,211,227,.22)!important;
  border-radius:999px!important;
  background:rgba(46,196,214,.08)!important;
  color:#a8eef5!important;
  overflow-wrap:anywhere!important;
}

main .consent-banner{
  left:auto!important;
  right:clamp(10px,3vw,18px)!important;
  bottom:calc(10px + env(safe-area-inset-bottom))!important;
  width:min(360px,calc(100vw - 24px))!important;
  max-width:360px!important;
  padding:12px!important;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:8px!important;
  border-radius:16px!important;
  background:rgba(7,16,27,.94)!important;
  box-shadow:0 14px 40px rgba(0,0,0,.34)!important;
  backdrop-filter:blur(14px)!important;
}

main .consent-banner p{
  grid-column:1/-1!important;
  margin:0!important;
  font-size:11px!important;
  line-height:1.35!important;
}

main .consent-banner button{
  min-height:34px!important;
  padding:8px 10px!important;
  font-size:11px!important;
}

@media(max-width:520px){
  main .page-hero:not([data-page-hero]){
    gap:18px!important;
    padding-top:clamp(24px,7vw,36px)!important;
  }

  main .page-hero:not([data-page-hero])>.container{
    padding:20px 16px!important;
    border-radius:20px!important;
  }

  main .page-hero .page-grid,
  main .page-hero .ai-hero-fallback,
  main .page-hero .work-hero-fallback,
  main .page-hero .ai-hero-video{
    min-height:220px!important;
    height:220px!important;
  }
}

@media(min-width:1081px){
  main .page-hero:not([data-page-hero]){
    grid-template-columns:minmax(0,820px) minmax(380px,560px)!important;
    align-items:center!important;
    justify-content:center!important;
    gap:clamp(34px,4vw,58px)!important;
    padding-top:var(--ts-space-hero-desktop)!important;
    padding-inline:var(--ts-page-gutter)!important;
  }

  main .page-hero:not([data-page-hero])>.container{
    width:100%!important;
    max-width:820px!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
  }

  main .page-hero .page-grid,
  main .page-hero .ai-hero-fallback,
  main .page-hero .work-hero-fallback,
  main .page-hero .ai-hero-video{
    min-height:clamp(320px,28vw,430px)!important;
    height:clamp(320px,28vw,430px)!important;
    max-width:560px!important;
    justify-self:stretch!important;
  }
}

/* Owner partial approval fixes: mobile header tap reliability, brighter separated
   hero visuals, compact cards/spacing and no empty post-hero gaps. */
:root{
  --ts-space-hero-mobile:clamp(28px,7vw,38px);
  --ts-space-hero-tablet:clamp(28px,4vw,44px);
  --ts-space-hero-desktop:clamp(82px,5.6vw,108px);
  --ts-section-mobile:clamp(30px,7.6vw,44px);
  --ts-section-tablet:clamp(42px,6vw,60px);
  --ts-section-desktop:clamp(56px,4.8vw,82px);
  --ts-card-pad-mobile:clamp(10px,2.8vw,14px);
  --ts-card-pad-desktop:clamp(14px,1.35vw,20px);
  --ts-grid-gap:clamp(10px,1.35vw,16px);
}

@media(max-width:1080px){
  main{
    --ts-main-hero-pad:clamp(48px,6vw,70px);
  }

  #site-header,
  .mobile-direct-header{
    position:sticky!important;
    z-index:1200!important;
    pointer-events:auto!important;
  }

  .mobile-primary-nav,
  .mobile-primary-nav>a,
  .mobile-primary-nav>button{
    position:relative!important;
    z-index:1210!important;
    pointer-events:auto!important;
    touch-action:manipulation!important;
  }

  body.mobile-mega-open #site-header{
    overflow:visible!important;
  }

  .mobile-mega-overlay{
    z-index:1090!important;
    top:var(--ts-mobile-header)!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  .mobile-mega-panel{
    z-index:1100!important;
  }

  body.mobile-mega-open .mobile-mega-overlay{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  #site-header{
    min-height:calc(var(--mobile-direct-header-height,206px) + env(safe-area-inset-top,0px))!important;
    overflow:visible!important;
  }

  .mobile-direct-header{
    display:grid!important;
    grid-template-rows:auto auto auto!important;
    gap:7px!important;
    padding:calc(env(safe-area-inset-top,0px) + 8px) 12px 10px!important;
    overflow:visible!important;
  }

  .mobile-direct-top{
    display:grid!important;
    grid-template-columns:minmax(90px,1fr) auto auto!important;
    align-items:center!important;
    gap:8px!important;
    min-height:46px!important;
    padding:0!important;
  }

  .mobile-direct-brand img{
    width:90px!important;
    max-width:28vw!important;
    height:auto!important;
  }

  .mobile-primary-nav{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:7px!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
    white-space:normal!important;
  }

  .mobile-primary-nav>a,
  .mobile-primary-nav>button{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    min-width:0!important;
    min-height:40px!important;
    padding:7px 6px!important;
    border-radius:10px!important;
    white-space:normal!important;
    overflow:visible!important;
    text-align:center!important;
    font-size:clamp(10px,2.9vw,12.5px)!important;
    line-height:1.08!important;
  }

  .mobile-primary-nav>a:nth-child(-n+5),
  .mobile-primary-nav>button:nth-child(-n+5){
    flex:0 0 calc((100% - 28px) / 5)!important;
    max-width:calc((100% - 28px) / 5)!important;
  }

  .mobile-primary-nav>a:nth-child(n+6),
  .mobile-primary-nav>button:nth-child(n+6){
    flex:0 0 calc((100% - 21px) / 4)!important;
    max-width:calc((100% - 21px) / 4)!important;
  }

  .mobile-secondary-nav{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)!important;
    gap:9px!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
  }

  .mobile-secondary-nav>a,
  .mobile-secondary-nav>button{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    min-width:0!important;
    min-height:40px!important;
    padding:8px 10px!important;
    text-align:center!important;
    font-size:clamp(11px,3vw,13px)!important;
    line-height:1.1!important;
  }

  .mobile-nav-toggle,
  .mobile-navigation-drawer{
    display:none!important;
  }

  .mobile-mega-panel{
    top:calc(var(--mobile-direct-header-height,206px) + env(safe-area-inset-top,0px) + 8px)!important;
    left:12px!important;
    right:12px!important;
    display:none!important;
    width:auto!important;
    max-width:none!important;
    max-height:calc(100dvh - var(--mobile-direct-header-height,206px) - env(safe-area-inset-top,0px) - 22px)!important;
    overflow:auto!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  .mobile-mega-panel.open{
    display:block!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  main .services-hub-preview:not(.expanded) .services-link-list .system-link-row:nth-of-type(n+10){
    display:none!important;
  }
}

main .hero:not([data-page-hero]),
main .page-hero:not([data-page-hero]),
main .service-detail-hero,
main .industry-directory-hero,
main .industry-detail-hero,
main .system-detail-hero,
main .agent-detail-hero,
main .work-hero,
main .ai-agent-hero{
  min-height:auto!important;
  padding-bottom:clamp(24px,5vw,52px)!important;
}

main .hero:not([data-page-hero]){
  padding-top:var(--ts-space-hero-mobile)!important;
}

main .hero .eyebrow,
main .hero-copy,
main .page-hero:not([data-page-hero])>.container,
main .service-detail-hero>.container,
main .industry-directory-hero>.container,
main .industry-detail-hero>.container,
main .agent-detail-hero>.container,
main .work-hero>.container{
  position:relative!important;
  z-index:4!important;
}

main .hero-atmosphere,
main .hero-vignette,
main .page-grid,
main .ai-hero-fallback,
main .work-hero-fallback,
main .system-visual,
main .hero-visual{
  opacity:.96!important;
  filter:saturate(1.12) contrast(1.08) brightness(1.08)!important;
}

main .page-hero:after,
main .service-detail-hero:after,
main .industry-directory-hero:after,
main .industry-detail-hero:after,
main .agent-detail-hero:after,
main .work-hero:after{
  background:linear-gradient(180deg,rgba(4,10,18,.18),rgba(4,10,18,.48))!important;
}

main .page-hero .page-grid,
main .page-hero .ai-hero-fallback,
main .page-hero .work-hero-fallback,
main .page-hero .ai-hero-video{
  min-height:clamp(160px,42vw,230px)!important;
  height:clamp(160px,42vw,230px)!important;
  opacity:.94!important;
}

main .page-hero .page-grid{
  background:
    radial-gradient(circle at 72% 34%,rgba(76,225,240,.22),transparent 24%),
    radial-gradient(circle at 28% 72%,rgba(76,225,240,.16),transparent 28%),
    linear-gradient(rgba(84,218,236,.14) 1px,transparent 1px),
    linear-gradient(90deg,rgba(84,218,236,.14) 1px,transparent 1px),
    linear-gradient(145deg,rgba(6,18,30,.96),rgba(4,11,20,.9))!important;
  background-size:auto,auto,42px 42px,42px 42px,auto!important;
}

main .page-hero .page-grid:before{
  content:""!important;
  position:absolute!important;
  inset:18% 18% 16% 18%!important;
  border:1px solid rgba(105,230,240,.34)!important;
  border-radius:999px!important;
  box-shadow:0 0 42px rgba(70,214,228,.16),inset 0 0 34px rgba(70,214,228,.08)!important;
  animation:spin 28s linear infinite!important;
}

main .page-hero .page-grid:after{
  content:""!important;
  position:absolute!important;
  left:18%!important;
  top:54%!important;
  width:64%!important;
  height:1px!important;
  background:linear-gradient(90deg,transparent,rgba(93,230,241,.86),transparent)!important;
  box-shadow:0 0 22px rgba(93,230,241,.42)!important;
  animation:pulse 2.8s ease-in-out infinite!important;
}

main .page-hero .ai-hero-video{
  opacity:.72!important;
}

main .section{
  padding-block:var(--ts-section-mobile)!important;
}

main .page-hero + .section,
main .service-detail-hero + .section,
main .industry-directory-hero + .section,
main .industry-detail-hero + .section,
main .agent-detail-hero + .section,
main .work-hero + .section{
  padding-top:clamp(20px,5.4vw,34px)!important;
}

main .industry-directory-hero{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
}

main .industry-directory-hero>.container{
  position:relative!important;
  z-index:3!important;
}

main .industry-directory-hero:before{
  content:""!important;
  position:absolute!important;
  z-index:1!important;
  pointer-events:none!important;
  border:1px solid rgba(101,211,227,.16)!important;
  border-radius:24px!important;
  background:
    radial-gradient(circle at 70% 34%,rgba(76,225,240,.24),transparent 24%),
    radial-gradient(circle at 30% 70%,rgba(76,225,240,.14),transparent 30%),
    linear-gradient(rgba(84,218,236,.13) 1px,transparent 1px),
    linear-gradient(90deg,rgba(84,218,236,.13) 1px,transparent 1px),
    linear-gradient(145deg,rgba(6,18,30,.9),rgba(4,11,20,.86))!important;
  background-size:auto,auto,42px 42px,42px 42px,auto!important;
  box-shadow:inset 0 0 46px rgba(70,214,228,.08),0 22px 60px rgba(0,0,0,.26)!important;
  opacity:.94!important;
  animation:tsGridDrift 18s linear infinite alternate!important;
}

main .capability-panels,
main .project-grid,
main .featured-industry-grid,
main .industry-directory-grid,
main .service-stack,
main .services-link-list,
main .contact-grid{
  gap:var(--ts-grid-gap)!important;
}

main .capability-panel,
main .service-feature,
main .services-hub-preview,
main .home-industry-card,
main .industry-card,
main .project-card,
main .agent-card,
main .hub-service-card,
main .system-library-card,
main .related-industry-card{
  min-height:auto!important;
  padding:var(--ts-card-pad-mobile)!important;
}

main .capability-panel p,
main .service-feature p,
main .services-hub-preview p,
main .home-industry-card p,
main .industry-card p,
main .project-card p,
main .agent-card p,
main .hub-service-card p,
main .system-library-card p{
  margin-bottom:clamp(8px,2vw,12px)!important;
}

main .service-feature,
main .services-hub-preview{
  grid-template-columns:minmax(0,1fr)!important;
  gap:clamp(12px,2.8vw,18px)!important;
}

main .service-diagram{
  min-height:clamp(150px,28vw,220px)!important;
}

@media(max-width:520px){
  main .hero:not([data-page-hero]){
    padding-top:clamp(26px,7vw,36px)!important;
    padding-bottom:28px!important;
  }

  main .hero-grid{
    gap:14px!important;
  }

  main .hero-visual,
  main .system-visual{
    min-height:250px!important;
    height:250px!important;
    max-height:250px!important;
  }

  main .page-hero:not([data-page-hero]){
    gap:14px!important;
    padding-top:clamp(24px,6.5vw,34px)!important;
    padding-bottom:26px!important;
  }

  main .page-hero:not([data-page-hero])>.container{
    padding:16px 14px!important;
  }

  main .page-hero .page-grid,
  main .page-hero .ai-hero-fallback,
  main .page-hero .work-hero-fallback,
  main .page-hero .ai-hero-video{
    min-height:170px!important;
    height:170px!important;
  }

  main .industry-directory-hero{
    padding-bottom:210px!important;
  }

  main .industry-directory-hero:before{
    left:var(--ts-page-gutter)!important;
    right:var(--ts-page-gutter)!important;
    bottom:26px!important;
    height:170px!important;
  }

  main .capability-panels,
  main .project-grid,
  main .featured-industry-grid,
  main .industry-directory-grid{
    grid-template-columns:1fr!important;
  }

  main .service-feature,
  main .services-hub-preview,
  main .capability-panel,
  main .home-industry-card,
  main .industry-card,
  main .project-card{
    padding:12px!important;
  }
}

@media(min-width:1081px){
  main .hero:not([data-page-hero]){
    padding-top:var(--ts-space-hero-desktop)!important;
    padding-bottom:clamp(44px,4vw,68px)!important;
  }

  main .page-hero:not([data-page-hero]),
  main .service-detail-hero,
  main .industry-directory-hero,
  main .industry-detail-hero,
  main .agent-detail-hero,
  main .work-hero{
    padding-top:var(--ts-space-hero-desktop)!important;
    padding-bottom:clamp(42px,4vw,64px)!important;
  }

  main .section{
    padding-block:var(--ts-section-desktop)!important;
  }

  main .page-hero:not([data-page-hero]){
    grid-template-columns:minmax(0,clamp(720px,58vw,860px)) minmax(300px,clamp(360px,30vw,520px))!important;
  }

  main .page-hero .page-grid,
  main .page-hero .ai-hero-fallback,
  main .page-hero .work-hero-fallback,
  main .page-hero .ai-hero-video{
    min-height:clamp(280px,23vw,360px)!important;
    height:clamp(280px,23vw,360px)!important;
  }

  main .industry-directory-hero>.container{
    max-width:760px!important;
    margin-left:var(--ts-page-gutter)!important;
    margin-right:auto!important;
  }

  main .industry-directory-hero:before{
    top:clamp(122px,9vw,150px)!important;
    right:var(--ts-page-gutter)!important;
    width:min(500px,36vw)!important;
    height:clamp(280px,23vw,360px)!important;
  }

  main .capability-panels{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
  }

  main .service-feature,
  main .services-hub-preview{
    grid-template-columns:minmax(0,1.05fr) minmax(220px,.95fr)!important;
  }

  main .capability-panel,
  main .service-feature,
  main .services-hub-preview,
  main .home-industry-card,
  main .industry-card,
  main .project-card,
  main .agent-card,
  main .hub-service-card,
  main .system-library-card,
  main .related-industry-card{
    padding:var(--ts-card-pad-desktop)!important;
  }
}

/* Owner QA bottom guard: these must win after all density layers. */
main .planner-structured-response{display:grid!important;gap:14px!important}
.services-mega,.industries-mega,.ai-agents-mega,.workflows-mega{
  position:fixed!important;
  left:50%!important;
  right:auto!important;
  top:calc(var(--ts-header-desktop,82px) + 10px)!important;
  transform:translate(-50%,-8px)!important;
  width:min(1180px,calc(100vw - 32px))!important;
  max-width:calc(100vw - 32px)!important;
  max-height:calc(100dvh - var(--ts-header-desktop,82px) - 28px)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  z-index:1005!important;
}
.services-menu-wrap.open>.services-mega,
.industries-menu-wrap.open>.industries-mega,
.ai-menu-wrap.open>.ai-agents-mega,
.workflows-menu-wrap.open>.workflows-mega{
  transform:translate(-50%,0)!important;
}
@media (max-width:700px){
  .services-mega,.industries-mega,.ai-agents-mega,.workflows-mega{display:none!important}
}
.system-modal .voice-recommendations,
.system-modal .voice-recommendations *{min-width:0!important;max-width:100%!important;box-sizing:border-box!important}
.system-modal .voice-recommendations [data-voice-recommendations]{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))!important}
.system-modal .voice-recommendations label{white-space:normal!important;overflow-wrap:anywhere!important}
.system-modal .voice-recommendations input[type="checkbox"]{width:18px!important;max-width:18px!important;height:18px!important;flex:0 0 18px!important}

/* Final construction: compact corrected sections without changing approved content. */
.services-mega-grid,.industries-mega-grid,.ai-mega-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:14px!important}
.workflows-mega .services-mega-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important}
.services-mega .menu-service,.industries-mega .menu-service,.workflows-mega .menu-service{min-width:0!important;padding:14px!important;overflow-wrap:anywhere!important}
.services-mega .menu-service strong,.industries-mega .menu-service strong,.workflows-mega .menu-service strong{font-size:clamp(14px,1vw,16px)!important;line-height:1.28!important}
.services-mega .menu-subservice,.industries-mega .menu-subservice,.workflows-mega .menu-subservice{font-size:clamp(12px,.9vw,14px)!important;line-height:1.35!important;white-space:normal!important}
.homepage-live-demos{padding-block:clamp(54px,6vw,82px)!important}
.homepage-live-demos .demo-agent-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.homepage-live-demos .demo-agent-card{min-height:0!important;padding:clamp(18px,1.5vw,22px)!important;gap:12px!important}
.homepage-live-demos .demo-visual{min-height:clamp(145px,13vw,178px)!important}
.partner-system-map{min-height:clamp(300px,28vw,390px)!important}
.capability-panel{min-height:0!important}
.service-feature{padding-block:clamp(34px,4vw,54px)!important}
.service-diagram{width:clamp(150px,16vw,210px)!important;height:clamp(150px,16vw,210px)!important}
.agent-card{min-height:0!important}
.ai-agent-request+.dark-band .agent-card,.ai-agent-demos .agent-card,.workflow-grid .agent-card{padding:clamp(18px,1.6vw,22px)!important}
.workflow-recommendation-form textarea{min-height:110px}
.workflow-recommendation-output{display:grid;gap:18px;margin-top:22px}
.workflow-summary{padding:18px;border:1px solid rgba(91,226,255,.2);border-radius:18px;background:rgba(5,18,30,.72)}
.workflow-summary p{margin:8px 0;color:#aec2cf}
.workflow-recommendation-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.workflow-recommendation-card{display:grid;gap:10px;padding:18px;border:1px solid rgba(91,226,255,.18);border-radius:18px;background:linear-gradient(145deg,rgba(10,25,38,.88),rgba(5,12,22,.94))}
.workflow-recommendation-card>span{color:#65d8e6;font-family:var(--font-primary);font-size:10px}
.workflow-recommendation-card h3{margin:0;font-size:clamp(18px,1.5vw,22px)}
.workflow-recommendation-card p,.workflow-recommendation-card li{margin:0;color:#a5b8c6;font-size:13px;line-height:1.5}
.workflow-recommendation-card ul{margin:0;padding-left:18px}
.workflow-card-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:4px}
.workflow-card-actions .text-link{justify-content:flex-start;min-height:38px}
@media(max-width:700px){
  .homepage-live-demos .demo-agent-grid{grid-template-columns:1fr!important}
  .homepage-live-demos .demo-agent-card{padding:18px!important}
  .homepage-live-demos .demo-visual{min-height:165px!important}
  .partner-system-map{min-height:340px!important}
  .workflow-card-actions{grid-template-columns:1fr}
}

/* Final master lock: shared desktop mega-menu, planner and compact card corrections. */
@media (min-width:1081px){
  .services-mega,
  .industries-mega,
  .ai-agents-mega,
  .workflows-mega{
    width:min(1480px,calc(100vw - 40px))!important;
    max-width:calc(100vw - 40px)!important;
    padding:18px!important;
    overflow-x:clip!important;
    overflow-y:auto!important;
    box-sizing:border-box!important;
  }
  .services-mega *,
  .industries-mega *,
  .ai-agents-mega *,
  .workflows-mega *{
    min-width:0!important;
    box-sizing:border-box!important;
  }
  .services-mega-grid,
  .industries-mega-grid,
  .ai-mega-grid,
  .workflows-mega .services-mega-grid{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:14px!important;
    align-items:stretch!important;
    width:100%!important;
  }
  .services-mega .menu-service,
  .industries-mega .menu-service,
  .industries-mega .industry-menu-card,
  .workflows-mega .menu-service,
  .ai-agents-mega .ai-mega-card{
    height:100%!important;
    padding:14px!important;
    display:flex!important;
    flex-direction:column!important;
    gap:10px!important;
    overflow:visible!important;
  }
  .services-mega .menu-service>a:first-child,
  .industries-mega .menu-service>a:first-child,
  .industries-mega .industry-menu-heading,
  .workflows-mega .menu-service>a:first-child,
  .ai-agents-mega .ai-mega-card>a:first-child{
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr)!important;
    gap:8px!important;
    align-items:start!important;
  }
  .services-mega strong,
  .industries-mega strong,
  .ai-agents-mega strong,
  .workflows-mega strong{
    display:block!important;
    white-space:normal!important;
    overflow-wrap:break-word!important;
    word-break:normal!important;
    line-height:1.25!important;
    max-width:100%!important;
  }
  .services-mega .menu-subservice,
  .industries-mega .menu-subservice,
  .industries-mega .industry-menu-link,
  .workflows-mega .menu-subservice,
  .ai-agents-mega .menu-subservice{
    display:block!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    word-break:break-word!important;
    max-width:100%!important;
    line-height:1.28!important;
  }
  .services-mega .menu-subservice svg,
  .industries-mega .menu-subservice svg,
  .industries-mega .industry-menu-link svg,
  .workflows-mega .menu-subservice svg,
  .ai-agents-mega .menu-subservice svg{
    display:none!important;
  }
  .services-mega-foot{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:10px 24px!important;
    overflow:visible!important;
    width:100%!important;
  }
  .services-mega-foot a,
  .services-mega-foot button{
    flex:0 1 auto!important;
    white-space:normal!important;
  }
}
main .message,
main .planner-structured-response,
main .planner-structured-response *{
  max-width:100%!important;
  overflow-wrap:anywhere!important;
}
.homepage-live-demos .demo-agent-card{
  justify-content:space-between!important;
}
.homepage-live-demos .demo-actions{
  margin-top:auto!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
}
.homepage-live-demos .demo-actions .text-link{
  min-height:36px!important;
  justify-content:flex-start!important;
}
.partner-system-map{
  min-height:clamp(260px,23vw,340px)!important;
}
.partner-map-core{
  width:clamp(104px,10vw,132px)!important;
  height:clamp(104px,10vw,132px)!important;
  padding:12px!important;
}
.partner-map-core strong{
  font-size:clamp(15px,1.2vw,18px)!important;
  line-height:1.05!important;
}
.partner-map-core span{
  display:block!important;
  max-width:82px!important;
  margin:auto!important;
  line-height:1.25!important;
  overflow-wrap:break-word!important;
}
.workflow-recommendation-grid{
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  align-items:stretch!important;
}
.workflow-recommendation-card{
  height:100%!important;
  padding:14px!important;
  gap:8px!important;
}
.workflow-recommendation-card ul{
  display:grid!important;
  gap:4px!important;
}
.workflow-card-actions{
  margin-top:auto!important;
}
@media (max-width:1080px) and (min-width:701px){
  .workflow-recommendation-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}

  main .premium-founder .premium-founder-grid{
    display:flex!important;
    flex-direction:column!important;
  }

  main .premium-founder .founder-media-approved{
    order:1!important;
    display:flex!important;
    flex-direction:column!important;
    gap:10px!important;
  }

  main .premium-founder .founder-media-approved figcaption{
    order:-1!important;
    position:static!important;
    margin:0!important;
  }

  main .premium-founder .founder-interactive{
    order:2!important;
  }
}
@media(max-width:700px){
  .homepage-live-demos .demo-actions,
  .workflow-card-actions,
  .workflow-recommendation-grid{
    grid-template-columns:1fr!important;
  }
  .partner-system-map{min-height:300px!important}
}

/* Final memory/security release: scoped main-content density refinement.
   Header, footer, fixed controls and modals are intentionally excluded. */
main{
  --ts-main-max:1054px;
  --ts-main-wide:1156px;
  --ts-main-gutter:40px;
  --ts-main-section:clamp(48px,4.1vw,70px);
  --ts-main-hero-pad:clamp(72px,5vw,92px);
  --ts-main-card-pad:clamp(13px,1.15vw,18px);
  --ts-main-grid-gap:clamp(10px,1.1vw,15px);
}
main .container,
main .narrow{
  width:min(calc(100% - var(--ts-main-gutter)),var(--ts-main-max))!important;
}
main .hero>.container,
main .page-hero:not([data-page-hero])>.container,
main .service-detail-hero>.container,
main .industry-directory-hero>.container,
main .industry-detail-hero>.container,
main .agent-detail-hero>.container,
main .work-hero>.container,
main .section-heading.split{
  width:min(calc(100% - var(--ts-main-gutter)),var(--ts-main-wide))!important;
  max-width:var(--ts-main-wide)!important;
}
main .section,
main .consultant-section,
main .capabilities,
main .journey,
main .work-preview,
main .founder-preview,
main .services-directory,
main .hub-support,
main .connected-detail,
main .service-faq,
main .service-request{
  padding-block:var(--ts-main-section)!important;
}
main .hero:not([data-page-hero]),
main .page-hero:not([data-page-hero]),
main .service-detail-hero,
main .industry-directory-hero,
main .industry-detail-hero,
main .system-detail-hero,
main .agent-detail-hero,
main .work-hero,
main .ai-agent-hero{
  padding-top:var(--ts-main-hero-pad)!important;
  padding-bottom:clamp(36px,3.5vw,58px)!important;
}
main .hero:not([data-page-hero]){
  min-height:min(760px,calc(100dvh - 20px))!important;
}
main h1{
  font-size:clamp(44px,5.25vw,78px)!important;
}
main h2{
  font-size:clamp(32px,3.55vw,54px)!important;
}
main h3{
  font-size:clamp(19px,1.7vw,22px)!important;
}
main .hero-lead,
main .lead,
main .section-heading>p,
main .section-heading.split p{
  font-size:clamp(16px,1.25vw,18px)!important;
  line-height:1.58!important;
}
main .hero-grid,
main .service-detail-grid,
main .founder-grid,
main .why-grid,
main .contact-grid{
  gap:clamp(28px,4vw,52px)!important;
}
main .capability-panels,
main .project-grid,
main .featured-industry-grid,
main .industry-directory-grid,
main .service-stack,
main .services-link-list,
main .contact-grid,
main .agent-grid,
main .hub-service-grid,
main .system-library-grid,
main .connected-system-groups,
main .related-industry-grid,
main .scenario-grid,
main .use-case-grid,
main .system-connection-grid,
main .subsector-grid{
  gap:var(--ts-main-grid-gap)!important;
}
main .business-card,
main .capability-panel,
main .service-feature,
main .services-hub-preview,
main .home-industry-card,
main .industry-card,
main .project-card,
main .agent-card,
main .hub-service-card,
main .system-library-card,
main .related-industry-card,
main .service-detail-grid article,
main .scenario-grid article,
main .use-case-grid article,
main .system-connection-grid article,
main .values-grid article,
main .control-grid article{
  padding:var(--ts-main-card-pad)!important;
}
main .system-visual,
main .hero-visual{
  max-height:clamp(320px,34vw,435px)!important;
}
main .system-visual{
  height:clamp(320px,34vw,435px)!important;
}
main .project-art,
main .project-media,
main .industry-picture,
main .related-industry-picture,
main .process-media-card,
main .process-media-fallback{
  min-height:clamp(140px,15vw,230px)!important;
  height:auto!important;
}
main .trust-line{
  margin-top:clamp(26px,3vw,40px)!important;
}
main .hero-actions{
  margin-top:clamp(22px,2.4vw,28px)!important;
}

@media(min-width:1081px){
  main .industry-directory-hero{
    padding-top:clamp(18px,1.8vw,28px)!important;
  }

  main .industry-directory .container,
  main .section>.container:has(.portfolio-full),
  main .portfolio-full{
    width:min(1540px,calc(100% - 48px))!important;
    max-width:1540px!important;
    margin-inline:auto!important;
  }

  main .industry-directory-grid{
    grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))!important;
    align-items:stretch!important;
  }

  main .portfolio-full{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:clamp(12px,1.2vw,16px)!important;
  }

  main .portfolio-full .project-card{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    height:auto!important;
  }

  main .portfolio-full .project-copy{
    padding:clamp(14px,1.2vw,18px)!important;
  }

  main .portfolio-full .project-media,
  main .portfolio-full .project-art{
    min-height:clamp(138px,12vw,190px)!important;
    max-height:210px!important;
    aspect-ratio:16/10!important;
  }

  main .services-directory .container{
    width:min(1460px,calc(100% - 56px))!important;
    max-width:1460px!important;
  }

  main .services-hub-preview{
    grid-template-columns:1fr!important;
    gap:clamp(12px,1.1vw,16px)!important;
    padding:clamp(16px,1.25vw,20px)!important;
    align-items:center!important;
    justify-items:center!important;
    text-align:center!important;
  }

  main .services-hub-copy,
  main .services-hub-copy h2,
  main .services-hub-copy h2 a,
  main .services-hub-copy p{
    text-align:center!important;
    margin-inline:auto!important;
  }

  main .services-hub-copy .eyebrow,
  main .services-hub-actions{
    justify-content:center!important;
  }

  main .services-hub-preview .services-link-list,
  main .services-hub-preview .system-link-row,
  main .services-hub-preview .system-link-row>a,
  main .services-hub-preview .system-link-row>button{
    text-align:center!important;
    justify-content:center!important;
    align-items:center!important;
  }

  main .services-hub-preview .services-link-list{
    width:min(100%,920px)!important;
    margin-inline:auto!important;
  }

  main .services-hub-preview .service-diagram{
    width:clamp(132px,12vw,174px)!important;
    height:clamp(132px,12vw,174px)!important;
    min-height:clamp(132px,12vw,174px)!important;
    margin-inline:auto!important;
  }

  main .services-link-list{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }

  main .services-link-list .system-link-row{
    min-width:0!important;
  }

  main .services-hub-preview:not(.expanded) .services-link-list .system-link-row:nth-of-type(n+14){
    display:none!important;
  }

  main .services-hub-preview>.add-system-action{
    display:none!important;
  }

  main .services-link-list a{
    min-height:42px!important;
    padding:9px 11px!important;
  }

  main .ai-agent-hero + .section .container{
    width:min(1460px,calc(100% - 48px))!important;
    max-width:1460px!important;
  }

  main .ai-agent-hero + .section .hub-service-grid{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    align-items:stretch!important;
  }

  main .ai-agent-hero + .section .hub-service-card{
    width:100%!important;
    min-width:0!important;
  }

  main .workflow-discovery .container,
  main .capabilities .container,
  main .work-preview .container,
  main .home-industries .container{
    width:min(1460px,calc(100% - 48px))!important;
    max-width:1460px!important;
  }

  main .workflow-discovery .system-library-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    align-items:stretch!important;
  }

  main .workflow-discovery .workflow-card{
    width:100%!important;
    min-width:0!important;
    padding:clamp(16px,1.35vw,20px)!important;
  }

  main .workflow-discovery .workflow-card img{
    min-height:clamp(150px,14vw,210px)!important;
    height:clamp(150px,14vw,210px)!important;
    object-fit:cover!important;
  }

  main .homepage-live-demos .demo-agent-card{
    padding:clamp(12px,1vw,15px)!important;
    gap:8px!important;
  }

  main .homepage-live-demos .demo-visual,
  main .homepage-live-demos .demo-agent-card>[role="img"]{
    min-height:clamp(96px,8vw,126px)!important;
    height:clamp(96px,8vw,126px)!important;
  }

  main .capabilities .partner-system-map{
    min-height:clamp(210px,17vw,270px)!important;
    height:clamp(210px,17vw,270px)!important;
  }

  main .capabilities .capability-panels{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    align-items:stretch!important;
  }

  main .capabilities .capability-panel{
    grid-column:auto!important;
    min-width:0!important;
    min-height:0!important;
    padding:clamp(12px,1vw,16px)!important;
    gap:clamp(7px,.8vw,10px)!important;
  }

  main .capabilities .capability-panel:nth-child(4),
  main .capabilities .capability-panel:last-child{
    grid-column:auto!important;
  }

  main .capabilities .cap-panel-orbit{
    width:clamp(50px,4.2vw,62px)!important;
    height:clamp(50px,4.2vw,62px)!important;
    margin:0!important;
  }

  main .capabilities .cap-direct-links{
    gap:6px!important;
  }

  main .capabilities .capability-option-row{
    min-height:38px!important;
  }

  main .capabilities .capability-option-row>a{
    min-height:34px!important;
    padding-block:5px!important;
  }

  main .capabilities .cap-panel-top{
    min-height:0!important;
  }

  main .home-industries .featured-industry-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    align-items:stretch!important;
  }

  main .work-preview .project-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    align-items:stretch!important;
  }

  main .work-preview .project-card{
    min-height:0!important;
  }

  main .work-preview .project-media,
  main .work-preview .project-art{
    min-height:clamp(118px,9vw,152px)!important;
    max-height:168px!important;
  }
}

@media(max-width:700px){
  main{
    --ts-main-gutter:28px;
    --ts-main-section:clamp(30px,7vw,42px);
    --ts-main-hero-pad:clamp(78px,20vw,96px);
    --ts-main-card-pad:clamp(11px,3vw,14px);
  }
  main h1{font-size:clamp(38px,11vw,54px)!important}
  main h2{font-size:clamp(28px,8.5vw,42px)!important}
  main .hero:not([data-page-hero]),
  main .page-hero:not([data-page-hero]),
  main .service-detail-hero,
  main .industry-directory-hero,
  main .industry-detail-hero,
  main .system-detail-hero,
  main .agent-detail-hero,
  main .work-hero,
  main .ai-agent-hero{
    min-height:0!important;
    padding-bottom:clamp(24px,7vw,38px)!important;
  }
  main .system-visual,
  main .hero-visual{
    height:clamp(260px,74vw,330px)!important;
    max-height:330px!important;
  }
  main .project-art,
  main .project-media,
  main .industry-picture,
  main .related-industry-picture{
    min-height:clamp(130px,42vw,190px)!important;
  }

  #site-header{
    min-height:calc(var(--mobile-direct-header-height,206px) + env(safe-area-inset-top,0px))!important;
    overflow:visible!important;
  }

  .mobile-direct-header{
    display:grid!important;
    grid-template-rows:auto auto auto!important;
    gap:7px!important;
    min-height:0!important;
    padding:calc(env(safe-area-inset-top,0px) + 8px) 12px 10px!important;
    overflow:visible!important;
  }

  .mobile-direct-top{
    display:grid!important;
    grid-template-columns:minmax(90px,1fr) auto auto!important;
    align-items:center!important;
    gap:8px!important;
    min-height:46px!important;
    padding:0!important;
  }

  .mobile-direct-brand img{
    width:90px!important;
    max-width:28vw!important;
    height:auto!important;
  }

  .mobile-direct-ai,
  .mobile-direct-system{
    min-height:40px!important;
    padding:8px 11px!important;
    font-size:13px!important;
    line-height:1.1!important;
    white-space:nowrap!important;
  }

  .mobile-primary-nav{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:7px!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
    white-space:normal!important;
  }

  .mobile-primary-nav>a,
  .mobile-primary-nav>button{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    min-width:0!important;
    min-height:40px!important;
    padding:7px 6px!important;
    border-radius:10px!important;
    white-space:normal!important;
    overflow:visible!important;
    text-align:center!important;
    font-size:clamp(10px,2.9vw,12.5px)!important;
    line-height:1.08!important;
    letter-spacing:-.01em!important;
  }

  .mobile-primary-nav>a:nth-child(-n+5),
  .mobile-primary-nav>button:nth-child(-n+5){
    flex:0 0 calc((100% - 28px) / 5)!important;
    max-width:calc((100% - 28px) / 5)!important;
  }

  .mobile-primary-nav>a:nth-child(n+6),
  .mobile-primary-nav>button:nth-child(n+6){
    flex:0 0 calc((100% - 21px) / 4)!important;
    max-width:calc((100% - 21px) / 4)!important;
  }

  .mobile-secondary-nav{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)!important;
    gap:9px!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
  }

  .mobile-secondary-nav>a,
  .mobile-secondary-nav>button{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    min-width:0!important;
    min-height:40px!important;
    padding:8px 10px!important;
    white-space:normal!important;
    overflow:visible!important;
    text-align:center!important;
    font-size:clamp(11px,3vw,13px)!important;
    line-height:1.1!important;
  }

  .mobile-nav-toggle,
  .mobile-navigation-drawer{
    display:none!important;
  }

  .mobile-mega-panel{
    position:fixed!important;
    top:calc(var(--mobile-direct-header-height,206px) + env(safe-area-inset-top,0px) + 8px)!important;
    left:12px!important;
    right:12px!important;
    width:auto!important;
    max-width:none!important;
    max-height:calc(100dvh - var(--mobile-direct-header-height,206px) - env(safe-area-inset-top,0px) - 22px)!important;
    overflow:auto!important;
  }

  .mobile-mega-overlay{
    display:block!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  body.mobile-mega-open .mobile-mega-overlay{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  main .services-hub-preview{
    height:auto!important;
    min-height:0!important;
    overflow:hidden!important;
    padding:14px!important;
  }

  main .services-hub-preview>.add-system-action{
    display:none!important;
  }

  main .services-hub-copy,
  main .services-hub-copy h2,
  main .services-hub-copy h2 a,
  main .services-hub-copy p,
  main .services-link-list a{
    max-width:100%!important;
    overflow-wrap:anywhere!important;
  }

  main .services-link-list{
    grid-template-columns:1fr!important;
    gap:7px!important;
  }

  main .services-link-list .system-link-row{
    min-height:44px!important;
  }

  main .services-hub-preview:not(.expanded) .services-link-list .system-link-row:nth-of-type(n+9){
    display:none!important;
  }

  main .services-link-list .system-link-row>a,
  main .services-link-list .system-link-row>.add-system-action{
    min-height:40px!important;
    padding-block:7px!important;
  }

  main .services-hub-preview:not(.expanded) .services-link-list .system-link-row:nth-of-type(n+10){
    display:none!important;
  }

  main .homepage-live-demos .demo-agent-card{
    padding:14px!important;
    gap:9px!important;
    min-height:0!important;
  }

  main .homepage-live-demos .demo-visual,
  main .homepage-live-demos .demo-agent-card>[role="img"]{
    min-height:132px!important;
    height:132px!important;
  }

  main .capabilities .partner-system-map{
    min-height:300px!important;
    height:300px!important;
    margin-block:12px 16px!important;
  }

  main .homepage-live-demos .demo-actions{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
  }

  main .homepage-live-demos .demo-actions .text-link{
    min-height:34px!important;
    padding:7px 8px!important;
  }

  main .premium-founder .premium-founder-grid{
    display:flex!important;
    flex-direction:column!important;
  }

  main .premium-founder .founder-media-approved{
    order:1!important;
    display:flex!important;
    flex-direction:column!important;
    gap:10px!important;
  }

  main .premium-founder .founder-media-approved figcaption{
    order:-1!important;
    position:static!important;
    margin:0!important;
  }

  main .premium-founder .founder-interactive{
    order:2!important;
  }

  main .industry-directory-hero{
    padding-top:clamp(24px,6.5vw,34px)!important;
    padding-bottom:clamp(28px,7vw,42px)!important;
  }

  main .industry-directory-hero>.container{
    padding:16px 14px!important;
  }

  main .industry-directory-hero:before{
    height:clamp(132px,36vw,160px)!important;
    bottom:clamp(18px,5vw,24px)!important;
    opacity:.34!important;
  }
}

/* Final UI corrective pass: scoped hero-card, nav containment and home section sizing only. */
@media (min-width:1081px){
  main .homepage-live-demos{
    padding-block:clamp(40px,4vw,58px)!important;
  }

  main .homepage-live-demos .demo-agent-card{
    min-height:clamp(330px,34vw,390px)!important;
    padding:clamp(12px,1vw,15px)!important;
    gap:8px!important;
  }

  main .homepage-live-demos .demo-agent-card>[role="img"]{
    min-height:clamp(88px,7vw,112px)!important;
    height:clamp(88px,7vw,112px)!important;
  }
}

@media (max-width:700px){
  .mobile-direct-top{
    grid-template-columns:minmax(78px,88px) minmax(92px,1fr) minmax(122px,132px)!important;
    gap:7px!important;
  }

  .mobile-direct-ai,
  .mobile-direct-system{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:5px!important;
    width:auto!important;
    flex:initial!important;
    min-width:0!important;
    max-width:100%!important;
    overflow:hidden!important;
    text-align:center!important;
  }

  .mobile-direct-ai{
    padding-inline:8px!important;
    font-size:12px!important;
  }

  .mobile-direct-system{
    padding-inline:8px!important;
    font-size:12px!important;
  }

  .mobile-direct-ai .status-dot{
    flex:0 0 7px!important;
  }

  main .hero:not([data-page-hero]),
  main .industry-directory-hero{
    padding-top:clamp(18px,5vw,28px)!important;
    padding-bottom:clamp(24px,6vw,36px)!important;
  }

  main .hero>.container,
  main .industry-directory-hero>.container{
    position:relative!important;
    z-index:1!important;
    width:min(calc(100% - 24px),690px)!important;
    max-width:690px!important;
    margin-inline:auto!important;
    padding:clamp(22px,6vw,30px) clamp(16px,5vw,24px)!important;
    border:1px solid rgba(84,178,200,.22)!important;
    border-radius:22px!important;
    background:linear-gradient(145deg,rgba(8,23,36,.88),rgba(5,12,21,.94))!important;
    box-shadow:0 18px 70px rgba(0,0,0,.26),inset 0 0 70px rgba(46,196,214,.045)!important;
    overflow:hidden!important;
  }

  main .hero>.container::before,
  main .industry-directory-hero>.container::before{
    content:""!important;
    position:absolute!important;
    inset:auto -18% -18% 18%!important;
    height:clamp(120px,34vw,170px)!important;
    border:1px solid rgba(84,218,232,.14)!important;
    border-radius:42% 58% 45% 55%!important;
    background:radial-gradient(circle at 35% 35%,rgba(65,225,238,.16),transparent 62%)!important;
    transform:rotate(9deg)!important;
    pointer-events:none!important;
  }

  main .hero>.container>*,
  main .industry-directory-hero>.container>*{
    position:relative!important;
    z-index:1!important;
  }

  main .hero .hero-actions,
  main .industry-directory-hero .hero-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    width:100%!important;
  }

  main .hero .hero-actions .btn,
  main .hero .hero-actions button,
  main .industry-directory-hero .hero-actions .btn,
  main .industry-directory-hero .hero-actions button{
    width:100%!important;
    justify-content:center!important;
  }

  main .hero .hero-visual{
    width:100%!important;
    margin-top:clamp(22px,7vw,32px)!important;
  }

  main .hero .system-visual{
    width:100%!important;
    height:clamp(240px,64vw,300px)!important;
    max-height:300px!important;
  }

  main .hero .hero-input{
    margin-top:clamp(18px,5vw,24px)!important;
  }

  main .industry-directory-hero:before{
    display:none!important;
  }

  main .industry-directory-hero>.container::after{
    content:""!important;
    display:block!important;
    position:relative!important;
    z-index:1!important;
    min-height:clamp(118px,30vw,150px)!important;
    margin-top:clamp(18px,5vw,24px)!important;
    border:1px solid rgba(84,178,200,.16)!important;
    border-radius:18px!important;
    background:
      linear-gradient(rgba(82,210,228,.08) 1px,transparent 1px),
      linear-gradient(90deg,rgba(82,210,228,.08) 1px,transparent 1px),
      radial-gradient(circle at 30% 35%,rgba(82,226,236,.16),transparent 34%),
      rgba(5,16,27,.62)!important;
    background-size:28px 28px,28px 28px,auto,auto!important;
    transform:rotate(3deg)!important;
    pointer-events:none!important;
  }

  main .capabilities .partner-system-map{
    width:100%!important;
    min-height:clamp(260px,68vw,315px)!important;
    height:clamp(260px,68vw,315px)!important;
    margin-inline:auto!important;
    overflow:visible!important;
  }

  main .capabilities .partner-system-map svg{
    inset:9% 9%!important;
    width:82%!important;
    height:82%!important;
  }

  main .capabilities .partner-node{
    font-size:clamp(9px,2.6vw,11px)!important;
    padding:6px 9px!important;
    max-width:88px!important;
    text-align:center!important;
    white-space:normal!important;
    line-height:1.15!important;
  }

  main .capabilities .node-1{left:7%!important;top:13%!important}
  main .capabilities .node-2{left:35%!important;top:6%!important}
  main .capabilities .node-3{right:4%!important;top:18%!important}
  main .capabilities .node-4{left:7%!important;top:43%!important}
  main .capabilities .node-5{right:4%!important;top:44%!important}
  main .capabilities .node-6{left:5%!important;bottom:18%!important}
  main .capabilities .node-7{left:34%!important;bottom:10%!important}
  main .capabilities .node-8{right:5%!important;bottom:18%!important}
  main .capabilities .node-9{right:31%!important;top:30%!important}
}

@media (max-width:374px){
  .mobile-direct-top{
    grid-template-columns:minmax(72px,80px) minmax(88px,1fr) minmax(116px,126px)!important;
    gap:6px!important;
  }

  .mobile-direct-brand img{
    width:80px!important;
    max-width:23vw!important;
  }

  .mobile-direct-ai,
  .mobile-direct-system{
    font-size:11.5px!important;
    padding-inline:7px!important;
  }
}

/* Final UI fixes + multilingual Planner: scoped to mobile Home hero, desktop live-demo cards and Planner language UI. */
.planner-language-select {
  align-items: center;
  border: 1px solid rgba(101, 226, 238, 0.22);
  border-radius: 999px;
  color: rgba(224, 246, 255, 0.78);
  display: inline-flex;
  font-size: 0.74rem;
  gap: 8px;
  line-height: 1;
  padding: 6px 8px 6px 12px;
}

.planner-language-select select {
  appearance: none;
  background: rgba(4, 18, 29, 0.88);
  border: 1px solid rgba(101, 226, 238, 0.2);
  border-radius: 999px;
  color: rgba(238, 253, 255, 0.94);
  font: inherit;
  min-height: 28px;
  padding: 4px 24px 4px 10px;
}

.message[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

.message[dir="rtl"] .bubble {
  text-align: right;
}

.message[dir="rtl"] ul,
.message[dir="rtl"] ol {
  padding-left: 0;
  padding-right: 1.1rem;
}

@media (min-width: 1081px) {
  main .homepage-live-demos .demo-agent-card {
    gap: 7px !important;
    min-height: clamp(300px, 28vw, 350px) !important;
    padding: clamp(10px, 0.85vw, 13px) !important;
  }

  main .homepage-live-demos .demo-agent-card > [role="img"] {
    height: clamp(76px, 6vw, 96px) !important;
    min-height: clamp(76px, 6vw, 96px) !important;
  }

  main .homepage-live-demos .demo-agent-card .demo-actions {
    gap: 8px !important;
    margin-top: auto !important;
  }
}

@media (max-width: 700px) {
  main .hero > .container.hero-grid {
    gap: clamp(12px, 3.6vw, 18px) !important;
    min-height: 0 !important;
    padding-block: clamp(18px, 5vw, 24px) !important;
  }

  main .hero .hero-copy {
    display: grid !important;
    gap: clamp(12px, 3.2vw, 16px) !important;
  }

  main .hero .hero-copy,
  main .hero .hero-copy *,
  main .hero .hero-visual,
  main .hero .hero-visual *,
  main .hero .hero-actions,
  main .hero .trust-line,
  main .hero .visual-caption {
    filter: none !important;
    opacity: 1 !important;
  }

  main .hero .hero-actions,
  main .hero .trust-line {
    margin-top: 0 !important;
  }

  main .hero .hero-visual {
    margin-top: clamp(8px, 2.5vw, 12px) !important;
  }

  main .hero .system-visual {
    height: clamp(170px, 48vw, 218px) !important;
    max-height: 218px !important;
    min-height: 170px !important;
  }

  main .hero .visual-caption {
    margin-top: 6px !important;
  }

  main .hero .hero-input {
    display: none !important;
  }

  .planner-language-select {
    font-size: 0.7rem;
    padding: 5px 7px 5px 10px;
  }

  .planner-language-select select {
    min-height: 26px;
    padding-block: 3px;
  }
}

/* Tools hub + Free QR Code Generator V1 */
.tools-hero .hero-card,
.qr-hero .hero-card {
  position: relative;
  overflow: hidden;
}

.tools-breadcrumbs {
  align-items: center;
  color: rgba(207, 232, 240, 0.72);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.9rem;
  gap: 8px;
  margin-bottom: clamp(18px, 3vw, 30px);
}

.tools-breadcrumbs a {
  color: #83e9f2;
  text-decoration: none;
}

.tools-grid,
.qr-layout {
  display: grid;
  gap: clamp(18px, 2.4vw, 28px);
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
}

.tool-card,
.tools-coming,
.qr-generator-card,
.qr-preview-card,
.plan-card,
.qr-guide-grid article {
  background: linear-gradient(145deg, rgba(10, 25, 41, 0.94), rgba(5, 17, 29, 0.86));
  border: 1px solid rgba(92, 221, 238, 0.18);
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22);
  padding: clamp(18px, 2vw, 28px);
}

.tool-badge {
  background: rgba(88, 232, 242, 0.12);
  border: 1px solid rgba(88, 232, 242, 0.28);
  border-radius: 999px;
  color: #93f4fb;
  display: inline-flex;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
  padding: 7px 10px;
  text-transform: uppercase;
}

.tool-card ul,
.plan-card ul {
  color: rgba(219, 236, 244, 0.82);
  display: grid;
  gap: 8px;
  margin: 18px 0;
  padding-left: 18px;
}

.coming-tool-list {
  display: grid;
  gap: 10px;
  margin: 20px 0;
}

.coming-tool-list span {
  align-items: center;
  border: 1px solid rgba(92, 221, 238, 0.16);
  border-radius: 16px;
  display: flex;
  justify-content: space-between;
  padding: 12px 14px;
}

.coming-tool-list small {
  color: #83e9f2;
}

.tools-ad-slot[hidden] {
  display: none !important;
}

.qr-generator-card,
.qr-preview-card {
  align-self: start;
}

.qr-step {
  display: grid;
  gap: 14px;
  margin-bottom: 22px;
}

.qr-step > span {
  color: #65e2ee;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.qr-type-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.qr-type-grid label {
  cursor: pointer;
}

.qr-type-grid input {
  position: absolute;
  opacity: 0;
}

.qr-type-grid span {
  border: 1px solid rgba(101, 226, 238, 0.2);
  border-radius: 999px;
  color: rgba(225, 242, 248, 0.82);
  display: inline-flex;
  min-height: 42px;
  padding: 10px 14px;
}

.qr-type-grid input:checked + span,
.qr-type-grid span:focus-within {
  background: rgba(70, 213, 232, 0.16);
  border-color: rgba(101, 226, 238, 0.58);
  color: #efffff;
}

.qr-fields,
.qr-control-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.qr-fields label,
.qr-control-grid label {
  color: rgba(224, 240, 247, 0.84);
  display: grid;
  font-weight: 700;
  gap: 8px;
}

.qr-fields input,
.qr-fields textarea,
.qr-fields select,
.qr-control-grid input,
.qr-control-grid textarea,
.qr-control-grid select {
  background: rgba(5, 17, 29, 0.9);
  border: 1px solid rgba(101, 226, 238, 0.18);
  border-radius: 14px;
  color: #f2fbff;
  font: inherit;
  min-height: 46px;
  padding: 11px 12px;
  width: 100%;
}

.qr-fields textarea,
.qr-control-grid textarea {
  resize: vertical;
}

.qr-check {
  align-content: center;
  grid-template-columns: auto 1fr;
}

.qr-check input {
  min-height: auto;
  width: auto;
}

.qr-actions,
.qr-downloads {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.qr-status {
  color: #9eeef6;
  min-height: 1.4em;
}

.qr-preview-box {
  align-items: center;
  background:
    radial-gradient(circle at 50% 42%, rgba(79, 225, 238, 0.18), transparent 42%),
    rgba(4, 15, 26, 0.86);
  border: 1px solid rgba(101, 226, 238, 0.2);
  border-radius: 22px;
  display: flex;
  justify-content: center;
  margin: 18px 0;
  min-height: clamp(240px, 28vw, 360px);
  overflow: hidden;
  padding: clamp(14px, 2vw, 24px);
}

.qr-preview-box img {
  background: white;
  border-radius: 16px;
  display: block;
  height: auto;
  max-height: min(340px, 72vw);
  max-width: 100%;
}

.qr-encoded {
  color: rgba(211, 231, 238, 0.7);
  font-size: 0.86rem;
  overflow-wrap: anywhere;
}

.qr-privacy-note {
  border-top: 1px solid rgba(101, 226, 238, 0.16);
  color: rgba(220, 237, 244, 0.78);
  margin-top: 18px;
  padding-top: 16px;
}

.qr-guide-grid,
.plan-grid {
  display: grid;
  gap: clamp(14px, 2vw, 22px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.qr-guide-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.plan-card {
  display: flex;
  flex-direction: column;
}

.plan-card .btn {
  margin-top: auto;
}

@media (max-width: 1080px) {
  .tools-grid,
  .qr-layout,
  .qr-guide-grid,
  .plan-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .tools-hero-card {
    padding: clamp(22px, 6vw, 30px) !important;
  }

  .tools-grid,
  .qr-layout,
  .qr-fields,
  .qr-control-grid,
  .qr-guide-grid,
  .plan-grid {
    grid-template-columns: 1fr;
  }

  .qr-generator-card,
  .qr-preview-card,
  .tool-card,
  .tools-coming,
  .plan-card,
  .qr-guide-grid article {
    border-radius: 20px;
    padding: 18px;
  }

  .qr-type-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .qr-type-grid span,
  .qr-actions .btn,
  .qr-downloads .btn {
    justify-content: center;
    text-align: center;
    width: 100%;
  }

  .qr-preview-box {
    min-height: 230px;
    padding: 14px;
  }

  .qr-actions,
  .qr-downloads {
    display: grid;
  }
}

/* WP-07T: authoritative Planner chat layout, composer, attachments and rich output. */
main .consultant-section .consultant-shell,
main #techscales-planner-ai[data-planner-section] .consultant-shell {
  display: flex !important;
  flex-direction: column !important;
  width: min(100%, 1120px) !important;
  max-width: 1120px !important;
  height: clamp(620px, 68dvh, 720px) !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 220px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

main .consultant-section .consultant-top,
main .consultant-section .planner-interest-bar,
main .consultant-section .planner-contact-wrap,
main .consultant-section .consultant-footer {
  flex: 0 0 auto !important;
}

main .consultant-section .consultant-body,
main #techscales-planner-ai[data-planner-section] .consultant-body {
  display: flex !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: hidden !important;
}

main .consultant-section .chat-stream,
main #techscales-planner-ai[data-planner-section] .chat-stream {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  padding: clamp(18px, 2vw, 26px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior-y: auto !important;
  scroll-behavior: auto;
  scrollbar-gutter: stable;
  box-sizing: border-box !important;
}

main .consultant-section .voice-panel {
  display: flex !important;
  flex: 0 0 auto !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: 100% !important;
  padding: 14px 18px 12px !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

main .consultant-section .voice-panel[hidden] {
  display: none !important;
}

/* WP-07AD: one bounded Voice Stage owner. The normal composer stays out of Voice mode unless Type Message is explicitly selected. */
main .consultant-section .consultant-body.voice-active{display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr)!important;min-height:0!important;overflow:hidden!important}
main .consultant-section .consultant-body.voice-active .chat-stream{display:none!important}
main .consultant-section .consultant-body.voice-active .voice-panel{display:grid!important;grid-template-rows:auto minmax(116px,1fr) auto!important;align-items:stretch!important;justify-items:stretch!important;gap:12px!important;min-height:0!important;height:100%!important;padding:16px 20px!important;overflow:hidden!important}
main .consultant-section .consultant-body.voice-active .planner-voice-stage-head{display:grid!important;justify-items:center!important;gap:8px!important;min-width:0!important}
main .consultant-section .consultant-body.voice-active .planner-voice-live{min-height:116px!important;max-height:none!important;overflow-y:auto!important;overflow-x:hidden!important;align-content:center!important;align-self:stretch!important;width:min(100%,760px)!important;margin:0 auto!important;padding:4px 6px!important;scrollbar-width:thin!important}
main .consultant-section .consultant-body.voice-active .planner-voice-actions{position:static!important;display:flex!important;align-items:center!important;justify-content:center!important;flex-wrap:nowrap!important;gap:10px!important;min-width:0!important;padding:8px 0 0!important;background:none!important}
main .consultant-section .consultant-body.voice-active .planner-voice-actions .btn{min-width:96px!important;min-height:40px!important;white-space:nowrap!important}
main .consultant-section .consultant-body.voice-active.voice-typing{grid-template-rows:minmax(0,1fr)!important}
main .consultant-section .consultant-body.voice-active.voice-typing + .consultant-compose{display:grid!important;position:relative!important;inset:auto!important;width:100%!important;z-index:3!important;border-top:1px solid rgba(98,246,255,.18)!important;border-radius:0!important}

main .consultant-section .planner-voice-mic {
  width: auto !important;
  min-width: 168px !important;
  height: 42px !important;
  display: inline-grid !important;
  grid-template-columns: 20px auto !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 0 16px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(98,246,255,.34) !important;
  background: linear-gradient(180deg, rgba(98,246,255,.15), rgba(8,18,28,.86)) !important;
  color: #dffcff !important;
  cursor: pointer !important;
  box-shadow: 0 0 0 1px rgba(98,246,255,.06), 0 8px 24px rgba(0,0,0,.16) !important;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

main .consultant-section .planner-voice-mic:hover:not(:disabled) {
  transform: translateY(-1px) scale(1.02) !important;
  border-color: rgba(98,246,255,.62) !important;
}

main .consultant-section .planner-voice-mic svg {
  width: 20px !important;
  height: 20px !important;
}

main .consultant-section .voice-panel[data-voice-state="listening"] .planner-voice-mic {
  border-color: rgba(98,246,255,.86) !important;
  box-shadow: 0 0 0 4px rgba(98,246,255,.06), 0 0 20px rgba(98,246,255,.16) !important;
  animation: plannerVoicePulse 1.25s ease-in-out infinite !important;
}

@keyframes plannerVoicePulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.055); }
}

main .consultant-section .planner-voice-prompt {
  color: #f4feff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

main .consultant-section .planner-voice-hint {
  max-width: 720px !important;
  margin: 0 !important;
  color: rgba(230,245,248,.72) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

main .consultant-section .voice-panel .voice-orb {
  flex: 0 0 auto !important;
  width: 82px !important;
  height: 82px !important;
  margin: 2px auto 4px !important;
}

main .consultant-section .voice-panel h3 {
  margin: 0 !important;
  font-size: clamp(18px, 2vw, 23px) !important;
}

main .consultant-section .voice-panel > p {
  max-width: 620px !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

main .consultant-section .planner-voice-status {
  width: min(100%, 620px) !important;
  min-height: 38px !important;
  display: grid !important;
  place-items: center !important;
  padding: 8px 12px !important;
  border: 1px solid rgba(98,246,255,.16) !important;
  border-radius: 12px !important;
  background: rgba(98,246,255,.06) !important;
  color: #c7f7fb !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

main .consultant-section .voice-panel[data-voice-state="starting"] .planner-voice-status,
main .consultant-section .voice-panel[data-voice-state="listening"] .planner-voice-status,
main .consultant-section .voice-panel[data-voice-state="thinking"] .planner-voice-status,
main .consultant-section .voice-panel[data-voice-state="speaking"] .planner-voice-status {
  border-color: rgba(98,246,255,.4) !important;
  background: rgba(98,246,255,.11) !important;
}

main .consultant-section .planner-voice-mic {
  flex: 0 0 auto !important;
  margin: 0 !important;
}

main .consultant-section .planner-voice-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  margin-top: 2px !important;
}

main .consultant-section .planner-voice-actions [hidden] {
  display: none !important;
}

main .consultant-section .planner-voice-mic[hidden] {
  display: none !important;
}

main .consultant-section .planner-voice-orb{position:relative;width:104px;height:104px;display:grid;place-items:center;border-radius:50%;overflow:hidden;background:radial-gradient(circle,rgba(99,246,255,.21),rgba(8,18,28,.78) 66%);box-shadow:0 0 0 6px rgba(98,246,255,.05),0 0 26px rgba(98,246,255,.16)}
main .consultant-section .planner-voice-orb img{width:58px;height:58px;object-fit:contain;position:relative;z-index:2}
main .consultant-section .planner-voice-orb span{position:absolute;inset:8px;border:1px solid rgba(98,246,255,.38);border-radius:50%;opacity:0}
main .consultant-section .voice-panel[data-voice-state="listening"] .planner-voice-orb span,main .consultant-section .voice-panel[data-voice-state="speaking"] .planner-voice-orb span{animation:plannerVoiceRing 1.55s ease-out infinite}
main .consultant-section .voice-panel[data-voice-state="listening"] .planner-voice-orb span:nth-child(3),main .consultant-section .voice-panel[data-voice-state="speaking"] .planner-voice-orb span:nth-child(3){animation-delay:.38s}
main .consultant-section .voice-panel[data-voice-state="listening"] .planner-voice-orb span:nth-child(4),main .consultant-section .voice-panel[data-voice-state="speaking"] .planner-voice-orb span:nth-child(4){animation-delay:.76s}
@keyframes plannerVoiceRing{0%{transform:scale(.72);opacity:.72}100%{transform:scale(1.08);opacity:0}}
main .consultant-section .planner-voice-stage-head{display:grid;place-items:center;gap:6px}
main .consultant-section .planner-voice-live{min-height:116px;overflow-y:auto;overflow-x:hidden;display:grid;align-content:center;gap:10px;width:min(100%,760px);margin:0 auto}
main .consultant-section .planner-voice-transcript,main .consultant-section .planner-voice-response{display:none;padding:12px 14px;border-radius:12px;color:#e8fdff;background:rgba(98,246,255,.08);font-size:14px;line-height:1.55;overflow-wrap:anywhere;white-space:pre-wrap;text-align:left;max-height:156px;overflow-y:auto}main .consultant-section .planner-voice-transcript:empty,main .consultant-section .planner-voice-response:empty{display:none!important}main .consultant-section .planner-voice-transcript[dir="rtl"],main .consultant-section .planner-voice-response[dir="rtl"]{direction:rtl;text-align:right}
main .consultant-section .voice-panel[data-voice-state="listening"] .planner-voice-transcript,main .consultant-section .voice-panel[data-voice-state="thinking"] .planner-voice-transcript{display:block}
main .consultant-section .voice-panel[data-voice-state="speaking"] .planner-voice-response,main .consultant-section .voice-panel[data-voice-state="paused"] .planner-voice-response{display:block}
main .consultant-section .voice-panel[data-voice-state="thinking"] .planner-voice-orb,main .consultant-section .voice-panel[data-voice-state="speaking"] .planner-voice-orb{animation:plannerVoicePulse 1.25s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){main .consultant-section .planner-voice-orb,main .consultant-section .planner-voice-orb span{animation:none!important}}
@media (max-width:700px){main .consultant-section .planner-voice-orb{width:82px;height:82px}main .consultant-section .planner-voice-orb img{width:48px;height:48px}main .consultant-section .consultant-body.voice-active .voice-panel{padding:12px!important;grid-template-rows:auto minmax(100px,1fr) auto!important}main .consultant-section .consultant-body.voice-active .planner-voice-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%!important}main .consultant-section .consultant-body.voice-active .planner-voice-actions .btn{min-width:0!important;width:100%!important}}

main .consultant-section .consultant-compose,
main #techscales-planner-ai[data-planner-section] .consultant-compose {
  position: relative !important;
  inset: auto !important;
  z-index: 3 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto auto !important;
  align-items: end !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 12px 14px !important;
  box-sizing: border-box !important;
  background: linear-gradient(180deg, rgba(8,17,27,.98), rgba(4,10,17,1)) !important;
  border-top: 1px solid rgba(94,221,231,.14);
}

main .consultant-section .consultant-compose[hidden],
main #techscales-planner-ai[data-planner-section] .consultant-compose[hidden] {
  display: none !important;
}

main .consultant-section .planner-attachment-preview {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  max-height: none !important;
  margin: 0 0 2px !important;
  overflow: visible !important;
}

main .consultant-section .planner-attachment-preview[hidden] {
  display: none !important;
}

main .consultant-section .planner-attachment-chip-card {
  width: min(100%, 560px) !important;
  max-width: 100% !important;
  margin: 0 !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
}

main .consultant-section .planner-attachment-thumb {
  width: 46px !important;
  height: 46px !important;
  flex: 0 0 46px !important;
  object-fit: cover !important;
  border-radius: 10px !important;
}

main .consultant-section .planner-attachment-chip-card > div,
main .consultant-section .planner-message-attachment > div {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

main .consultant-section .planner-attachment-chip-card strong,
main .consultant-section .planner-message-attachment strong {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

main .consultant-section .planner-attachment-chip-card small,
main .consultant-section .planner-message-attachment small {
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

main .consultant-section .planner-file-input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

main .consultant-section .planner-upload-status {
  grid-column: 1 / -1 !important;
  min-height: 0 !important;
  margin: 0 !important;
  color: #9edfe7 !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  overflow-wrap: anywhere !important;
}

main .consultant-section .consultant-compose textarea,
main #techscales-planner-ai[data-planner-section] .consultant-compose textarea {
  grid-column: 1 !important;
  min-width: 0 !important;
  width: 100% !important;
  min-height: 52px !important;
  max-height: 160px !important;
  margin: 0 !important;
  resize: none !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
}

main .consultant-section .compose-tool,
main .consultant-section .send-btn {
  flex: 0 0 auto !important;
  align-self: end !important;
}

main .consultant-section .planner-upload-button {
  pointer-events: auto !important;
  cursor: pointer !important;
}

main .consultant-section .compose-tool.is-disabled,
main .consultant-section .tool-btn.is-disabled {
  opacity: .66 !important;
  cursor: not-allowed !important;
}

main .consultant-section .planner-stop-icon {
  display: block !important;
  width: 11px !important;
  height: 11px !important;
  border-radius: 2px !important;
  background: currentColor !important;
}

main .consultant-section .planner-assistant-avatar,
main .consultant-section .planner-brand-mark {
  display: grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  overflow: hidden !important;
}

main .consultant-section .planner-assistant-avatar {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
}

main .consultant-section .planner-brand-mark {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
}

main .consultant-section .planner-assistant-avatar img,
main .consultant-section .planner-brand-mark img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

main .consultant-section .message,
main .consultant-section .message > div,
main .consultant-section .message p,
main .consultant-section .planner-message-attachment,
main .consultant-section .planner-message-attachment > div {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

main .consultant-section .message.user {
  margin-left: auto !important;
  max-width: min(82%, 820px) !important;
}

main .consultant-section .message.assistant {
  max-width: min(94%, 1040px) !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

main .consultant-section .message.assistant p,
main .consultant-section .message.assistant li,
main .consultant-section .message.assistant blockquote {
  font-size: 15.5px !important;
  line-height: 1.6 !important;
}

main .consultant-section .message.assistant h1 {
  margin: .8em 0 .4em !important;
  font-size: 24px !important;
}
main .consultant-section .message.assistant h2 {
  margin: .75em 0 .4em !important;
  font-size: 21px !important;
}
main .consultant-section .message.assistant h3 {
  margin: .7em 0 .35em !important;
  font-size: 18px !important;
}
main .consultant-section .message.assistant h4,
main .consultant-section .message.assistant h5,
main .consultant-section .message.assistant h6 {
  margin: .65em 0 .3em !important;
  font-size: 16px !important;
}

main .consultant-section .message.assistant strong {
  color: #f4fdff !important;
  font-weight: 700 !important;
}

main .consultant-section .message.assistant p {
  margin: .45em 0 !important;
}

main .consultant-section .message.assistant > div > :first-child {
  margin-top: 0 !important;
}

main .consultant-section .message.assistant > div > :last-child {
  margin-bottom: 0 !important;
}

main .consultant-section .message.assistant ul,
main .consultant-section .message.assistant ol {
  margin: .45em 0 !important;
  padding-left: 1.35em !important;
}

main .consultant-section .message.assistant pre {
  max-width: 100% !important;
  overflow-x: auto !important;
  padding: 12px !important;
  border-radius: 10px !important;
  background: #071520 !important;
}

main .consultant-section .planner-table-wrap {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
}

main .consultant-section .planner-table-wrap table {
  display: table !important;
  width: max-content !important;
  min-width: min(100%, 560px) !important;
  max-width: none !important;
  border-collapse: collapse !important;
  font-size: 13px !important;
}

main .consultant-section .planner-table-wrap th,
main .consultant-section .planner-table-wrap td {
  padding: 7px 8px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  vertical-align: top !important;
}

main .consultant-section .planner-table-wrap th {
  background: rgba(98,246,255,.12) !important;
  font-weight: 700 !important;
}

main .consultant-section .planner-chart {
  width: 100% !important;
  max-width: 680px !important;
  margin: 12px 0 !important;
  padding: 10px !important;
  border: 1px solid rgba(98,246,255,.18) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

main .consultant-section .planner-chart svg {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

main .consultant-section .planner-message-attachment {
  width: min(100%, 560px) !important;
  max-width: 100% !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
}

main .consultant-section .planner-rich-attachment img {
  width: 54px !important;
  height: 54px !important;
  flex: 0 0 54px !important;
  object-fit: cover !important;
  border-radius: 10px !important;
}

main .consultant-section .planner-message-actions {
  display: flex !important;
  gap: 10px !important;
  margin-top: 8px !important;
}

main .consultant-section .planner-message-actions button {
  border: 0 !important;
  background: transparent !important;
  color: #9eeef5 !important;
  padding: 0 !important;
  font: inherit !important;
  cursor: pointer !important;
}

main .consultant-section .jump-latest {
  z-index: 4 !important;
}

@media (max-width: 1080px) {
  main .consultant-section .consultant-shell,
  main #techscales-planner-ai[data-planner-section] .consultant-shell {
    width: min(100%, calc(100vw - 28px)) !important;
    height: min(72dvh, 680px) !important;
    max-height: calc(100dvh - 150px) !important;
  }

  main .consultant-section .message.user {
    max-width: 88% !important;
  }

  main .consultant-section .message.assistant {
    max-width: 96% !important;
  }
}

@media (max-width: 700px) {
  main .consultant-section .consultant-shell,
  main #techscales-planner-ai[data-planner-section] .consultant-shell {
    width: calc(100vw - 20px) !important;
    height: min(72dvh, 620px) !important;
    max-height: calc(100dvh - 92px) !important;
    border-radius: 16px !important;
  }

  main .consultant-section .chat-stream,
  main #techscales-planner-ai[data-planner-section] .chat-stream {
    padding: 14px !important;
    scrollbar-gutter: auto;
  }

  main .consultant-section .consultant-compose,
  main #techscales-planner-ai[data-planner-section] .consultant-compose {
    grid-template-columns: minmax(0, 1fr) auto auto auto !important;
    gap: 6px !important;
    padding: 10px !important;
  }

  main .consultant-section .consultant-compose textarea,
  main #techscales-planner-ai[data-planner-section] .consultant-compose textarea {
    min-height: 50px !important;
    max-height: 128px !important;
  }

  main .consultant-section .compose-tool,
  main .consultant-section .send-btn {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
  }

  main .consultant-section .planner-attachment-chip-card,
  main .consultant-section .planner-message-attachment,
  main .consultant-section .message.user,
  main .consultant-section .message.assistant {
    width: 100% !important;
    max-width: 100% !important;
  }

  main .consultant-section .planner-assistant-avatar {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
  }

  main .consultant-section .message.assistant h1 { font-size: 21px !important; }
  main .consultant-section .message.assistant h2 { font-size: 19px !important; }
  main .consultant-section .message.assistant h3 { font-size: 17px !important; }
}

/* Final Planner Voice Stage: content-sized rows prevent the empty middle band while preserving a bounded history area. */
main .consultant-section .consultant-body.voice-active .voice-panel {
  grid-template-rows: auto minmax(0, auto) auto !important;
  align-content: center !important;
  justify-content: center !important;
  gap: clamp(20px, 3vw, 40px) !important;
  height: auto !important;
  padding-block: clamp(18px, 3vh, 30px) !important;
}

main .consultant-section .consultant-body.voice-active .planner-voice-live {
  min-height: 0 !important;
  max-height: min(28dvh, 180px) !important;
  align-self: center !important;
}

main .consultant-section .consultant-body.voice-active .planner-voice-actions {
  padding-top: 0 !important;
}

@media (max-width: 700px) {
  main .consultant-section .consultant-body.voice-active .voice-panel {
    grid-template-rows: auto minmax(0, auto) auto !important;
    gap: clamp(18px, 5vw, 28px) !important;
    padding: 18px 12px !important;
  }

  main .consultant-section .consultant-body.voice-active .planner-voice-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  main .consultant-section .consultant-body.voice-active .planner-voice-actions .btn {
    width: auto !important;
  }
}

@media (max-height: 640px) and (min-width: 701px) {
  main .consultant-section .consultant-shell,
  main #techscales-planner-ai[data-planner-section] .consultant-shell {
    height: 620px !important;
    max-height: none !important;
  }
}

/* Final production geometry: one normal-flow Planner layout and deterministic home diagrams. */
main .consultant-section .consultant-shell{height:auto!important;max-height:none!important;min-height:0!important;overflow:visible!important}
main .consultant-section .consultant-top{display:grid!important;grid-template-columns:clamp(34px,5vw,48px) minmax(0,1fr) auto!important;align-items:center!important;gap:clamp(8px,1.5vw,16px)!important;min-height:0!important;padding:clamp(12px,2vw,18px)!important}
main .consultant-section .consultant-id{display:contents!important}
main .consultant-section .consultant-top{height:auto!important;min-height:0!important;align-items:start!important}
main .consultant-section .consultant-id>.ai-mark{display:block!important;width:clamp(34px,5vw,48px)!important;height:clamp(34px,5vw,48px)!important;aspect-ratio:1!important;min-width:0!important;min-height:0!important;align-self:center!important;transform:none!important;margin:0!important}
main .consultant-section .consultant-id>div{min-width:0!important}
main .consultant-section .consultant-tabs{justify-self:end!important;align-self:center!important;white-space:nowrap!important}
main .consultant-section .planner-contact-wrap{position:static!important;margin:0!important;min-height:0!important}
main .consultant-section .consultant-body{flex:none!important;min-height:0!important;height:auto!important;overflow:visible!important}
main .consultant-section .consultant-body.voice-active{display:block!important;overflow:visible!important}
main .consultant-section .consultant-body.voice-active .voice-panel{display:grid!important;grid-template-rows:auto auto auto!important;justify-items:center!important;align-content:start!important;gap:clamp(16px,3vw,28px)!important;height:auto!important;min-height:0!important;padding:clamp(20px,4vw,34px) clamp(12px,3vw,28px)!important;overflow:visible!important}
main .consultant-section .planner-voice-stage-head{display:grid!important;grid-template-rows:auto auto!important;justify-items:center!important;gap:clamp(12px,2vw,24px)!important;width:min(100%,620px)!important}
main .consultant-section .planner-voice-orb{width:clamp(72px,15vw,104px)!important;height:clamp(72px,15vw,104px)!important;aspect-ratio:1!important;position:relative!important;transform:none!important;margin:0!important}
main .consultant-section .planner-voice-status{min-height:44px!important;width:min(100%,620px)!important;margin:0!important}
main .consultant-section .consultant-body.voice-active .planner-voice-live{width:min(100%,760px)!important;min-height:0!important;max-height:180px!important;margin:0!important;align-self:center!important}
main .consultant-section .consultant-body.voice-active .planner-voice-actions{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;align-items:stretch!important;justify-items:stretch!important;width:min(100%,620px)!important;gap:clamp(8px,1.7vw,14px)!important;margin:0!important;padding:0!important}
main .consultant-section .consultant-body.voice-active .planner-voice-actions button{min-width:0!important;min-height:44px!important;height:clamp(44px,5vw,50px)!important;padding-inline:clamp(7px,1.5vw,14px)!important;font-size:clamp(11px,1.8vw,14px)!important;white-space:normal!important;transform:none!important}
main .consultant-section .planner-voice-mic{width:100%!important;grid-template-columns:auto minmax(0,1fr)!important}
main .consultant-section .consultant-footer{position:static!important;margin:0!important;padding:clamp(12px,2vw,18px)!important;min-height:0!important}
main .homepage-live-demos{position:static!important;margin:clamp(36px,7vw,76px) 0 0!important;padding-top:0!important}
main .homepage-live-demos .section-heading .eyebrow{display:flex!important;align-items:flex-start!important;gap:8px!important;overflow:visible!important;transform:none!important}
main .homepage-live-demos .section-heading .eyebrow span{flex:0 0 auto!important;margin-top:.55em!important}
main .homepage-live-demos .demo-visual{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-template-rows:repeat(3,minmax(0,1fr))!important;align-items:center!important;justify-items:center!important;gap:6px!important;overflow:hidden!important}
main .homepage-live-demos .planner-demo-visual .demo-message,main .homepage-live-demos .planner-demo-visual .demo-ai-core,main .homepage-live-demos .planner-demo-visual .demo-cards,main .homepage-live-demos .planner-demo-visual .demo-call,main .homepage-live-demos .messaging-demo-visual .chat-dot,main .homepage-live-demos .messaging-demo-visual .chat-line,main .homepage-live-demos .messaging-demo-visual .lead-fields,main .homepage-live-demos .messaging-demo-visual .handoff,main .homepage-live-demos .voice-demo-visual .wave,main .homepage-live-demos .voice-demo-visual .transcript-line,main .homepage-live-demos .voice-demo-visual .voice-answer,main .homepage-live-demos .voice-demo-visual .booking-state{position:static!important;inset:auto!important;margin:0!important;max-width:100%!important}
main .homepage-live-demos .planner-demo-visual .demo-message{grid-column:1/-1}main .homepage-live-demos .planner-demo-visual .demo-ai-core{grid-column:1/-1}main .homepage-live-demos .planner-demo-visual .demo-cards{grid-column:1/-1;display:flex!important;flex-wrap:wrap!important;justify-content:center!important}main .homepage-live-demos .planner-demo-visual .demo-call{grid-column:1/-1}
main .homepage-live-demos .messaging-demo-visual .chat-dot{grid-column:1}.homepage-live-demos .messaging-demo-visual .chat-line{width:100%!important}.homepage-live-demos .messaging-demo-visual .lead-fields{grid-column:1/-1;display:flex!important;flex-wrap:wrap!important;justify-content:center!important}.homepage-live-demos .messaging-demo-visual .handoff{grid-column:1/-1}
main .homepage-live-demos .voice-demo-visual .wave{grid-column:1/-1}.homepage-live-demos .voice-demo-visual .transcript-line{grid-column:1/-1;width:80%!important}.homepage-live-demos .voice-demo-visual .voice-answer,main .homepage-live-demos .voice-demo-visual .booking-state{grid-column:span 1}
main .partner-system-map{height:auto!important;min-height:clamp(300px,48vw,420px)!important;overflow:hidden!important}
main .partner-system-map>.partner-system-svg{position:static!important;display:block!important;width:100%!important;height:auto!important;aspect-ratio:12/7!important}
main .partner-system-svg .partner-path{fill:none!important;stroke:url(#partnerLine)!important;stroke-width:2!important;stroke-dasharray:9 12!important;animation:tsDash 7s linear infinite!important}
main .partner-system-svg .partner-map-core,main .partner-system-svg .partner-node{position:static!important;transform:none!important;animation:none!important}
main .partner-system-svg .partner-map-core circle{fill:rgba(3,20,30,.92);stroke:rgba(114,246,255,.6);stroke-width:1.5}.partner-system-svg .partner-map-core text,.partner-system-svg .partner-node text{fill:#e5fdff;text-anchor:middle;font-family:inherit;font-weight:800}.partner-system-svg .partner-core-subtitle{fill:#8eefff!important;font-size:9px;letter-spacing:1px}.partner-system-svg .partner-node rect{fill:rgba(7,26,38,.92);stroke:rgba(124,238,255,.34);stroke-width:1}.partner-system-svg .partner-node text{font-size:12px}
main .hero .hero-eyebrow{display:flex!important;align-items:center!important;flex-wrap:wrap!important;gap:clamp(4px,.8vw,9px)!important;line-height:1.45!important;overflow:visible!important}main .hero .hero-eyebrow>b{white-space:nowrap!important;font:inherit!important}main .hero .hero-eyebrow>i{font-style:normal!important;flex:0 0 auto!important}
@media(max-width:700px){main .consultant-section .consultant-top{grid-template-columns:34px minmax(0,1fr) auto!important;gap:8px!important}main .consultant-section .consultant-tabs button{padding-inline:8px!important;font-size:12px!important}main .consultant-section .consultant-id strong{font-size:13px!important}main .consultant-section .consultant-id small{font-size:10px!important}main .consultant-section .consultant-body.voice-active .planner-voice-actions{gap:7px!important}main .consultant-section .consultant-footer{display:grid!important;gap:8px!important}.partner-system-svg .partner-node text{font-size:10px}.partner-system-svg .partner-node rect{width:84px}.partner-system-svg .partner-map-core text{font-size:16px}}

/* Approved V7 homepage donor styles.  These restore donor-owned visual
   components without changing the current Planner/Voice cascade. */
main .homepage-live-demos{position:relative!important;margin:0!important;padding-block:clamp(54px,6vw,82px)!important}
main .homepage-live-demos .demo-visual{display:block!important;min-height:clamp(145px,13vw,178px)!important}
main .homepage-live-demos .planner-demo-visual .demo-message,main .homepage-live-demos .planner-demo-visual .demo-ai-core,main .homepage-live-demos .planner-demo-visual .demo-cards,main .homepage-live-demos .planner-demo-visual .demo-call,main .homepage-live-demos .messaging-demo-visual .chat-dot,main .homepage-live-demos .messaging-demo-visual .chat-line,main .homepage-live-demos .messaging-demo-visual .lead-fields,main .homepage-live-demos .messaging-demo-visual .handoff,main .homepage-live-demos .voice-demo-visual .wave,main .homepage-live-demos .voice-demo-visual .transcript-line,main .homepage-live-demos .voice-demo-visual .voice-answer,main .homepage-live-demos .voice-demo-visual .booking-state{position:absolute!important;inset:auto!important;margin:0!important}
main .homepage-live-demos .planner-demo-visual .demo-message{left:16px!important;top:20px!important}main .homepage-live-demos .planner-demo-visual .demo-ai-core{left:50%!important;top:48%!important;transform:translate(-50%,-50%)!important}main .homepage-live-demos .planner-demo-visual .demo-cards{right:14px!important;top:18px!important;display:grid!important}main .homepage-live-demos .planner-demo-visual .demo-call{right:18px!important;bottom:18px!important}main .homepage-live-demos .messaging-demo-visual .chat-dot{left:20px!important;top:28px!important}main .homepage-live-demos .messaging-demo-visual .chat-line.one{left:68px!important;top:30px!important}main .homepage-live-demos .messaging-demo-visual .chat-line.two{left:68px!important;top:50px!important}main .homepage-live-demos .messaging-demo-visual .lead-fields{left:18px!important;bottom:18px!important;display:flex!important}main .homepage-live-demos .messaging-demo-visual .handoff{right:18px!important;bottom:18px!important}main .homepage-live-demos .voice-demo-visual .wave{left:18px!important;right:18px!important;top:36px!important;display:flex!important}main .homepage-live-demos .voice-demo-visual .transcript-line{left:20px!important;right:20px!important;top:108px!important}main .homepage-live-demos .voice-demo-visual .voice-answer{left:18px!important;bottom:18px!important}main .homepage-live-demos .voice-demo-visual .booking-state{right:18px!important;bottom:18px!important}
main .partner-system-map{position:relative!important;width:100%!important;min-height:350px!important;isolation:isolate!important;overflow:hidden!important}
main .partner-system-map>svg{position:absolute!important;inset:0!important;display:block!important;width:100%!important;height:100%!important;pointer-events:none!important;z-index:1!important}
main .partner-system-map .partner-map-core{position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;z-index:4!important}
main .partner-system-map .partner-node{position:absolute!important;right:auto!important;bottom:auto!important;margin:0!important;translate:none!important;transform:translate(-50%,-50%)!important;animation:none!important;transition:none!important;z-index:3!important;white-space:nowrap!important}
main .partner-system-map .partner-path{fill:none!important;stroke:url(#partnerLine)!important;stroke-width:.42!important;vector-effect:non-scaling-stroke!important;stroke-linecap:round!important;stroke-linejoin:round!important;stroke-dasharray:6 10!important;opacity:.48!important;animation:tsPartnerLineDash 9s linear infinite!important}
main .partner-system-map .partner-data-stream{position:absolute!important;inset:0!important;z-index:2!important;pointer-events:none!important}
@keyframes tsPartnerLineDash{from{stroke-dashoffset:0}to{stroke-dashoffset:-128}}
@media screen and (max-width:700px){main .partner-system-map .partner-map-core{width:112px!important;height:112px!important}main .partner-system-map .partner-node{padding:6px 8px!important;font-size:9.5px!important}main .partner-system-map .node-1{left:14%!important;top:17%!important}main .partner-system-map .node-2{left:45%!important;top:10%!important}main .partner-system-map .node-3{left:86%!important;top:20%!important}main .partner-system-map .node-4{left:14%!important;top:50%!important}main .partner-system-map .node-5{left:85%!important;top:51%!important}main .partner-system-map .node-6{left:13%!important;top:79%!important}main .partner-system-map .node-7{left:34%!important;top:88%!important}main .partner-system-map .node-8{left:84%!important;top:79%!important}main .partner-system-map .node-9{left:76%!important;top:31%!important}}
@media screen and (min-width:701px) and (max-width:1080px){main .partner-system-map .partner-map-core{width:132px!important;height:132px!important}main .partner-system-map .partner-node{padding:7px 10px!important;font-size:10.5px!important}main .partner-system-map .node-1{left:11%!important;top:18%!important}main .partner-system-map .node-2{left:39%!important;top:12%!important}main .partner-system-map .node-3{left:88%!important;top:20%!important}main .partner-system-map .node-4{left:11%!important;top:50%!important}main .partner-system-map .node-5{left:89%!important;top:51%!important}main .partner-system-map .node-6{left:17%!important;top:80%!important}main .partner-system-map .node-7{left:31%!important;top:88%!important}main .partner-system-map .node-8{left:85%!important;top:80%!important}main .partner-system-map .node-9{left:74%!important;top:30%!important}}
@media screen and (min-width:1081px){main .partner-system-map .partner-map-core{width:148px!important;height:148px!important}main .partner-system-map .partner-node{padding:8px 12px!important;font-size:11.5px!important}main .partner-system-map .node-1{left:9%!important;top:18%!important}main .partner-system-map .node-2{left:39%!important;top:12%!important}main .partner-system-map .node-3{left:89%!important;top:19%!important}main .partner-system-map .node-4{left:9%!important;top:50%!important}main .partner-system-map .node-5{left:91%!important;top:51%!important}main .partner-system-map .node-6{left:18%!important;top:81%!important}main .partner-system-map .node-7{left:31%!important;top:88%!important}main .partner-system-map .node-8{left:87%!important;top:81%!important}main .partner-system-map .node-9{left:73%!important;top:30%!important}}
@media(prefers-reduced-motion:reduce){main .partner-system-svg .partner-path{animation:none!important}}

/* Approved donor responsive homepage layer: phone and tablet only. */
@media screen and (max-width:1080px){
  :root{--ts-final-mobile-header:146px}
  #site-header{position:sticky!important;inset:auto!important;top:0!important;z-index:1800!important;width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important}
  #site-header>.nav-wrap,#site-header .desktop-nav,#site-header .nav-actions{display:none!important}
  #site-header .mobile-direct-header{display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:34px 66px 32px!important;gap:4px!important;width:100%!important;min-width:0!important;height:144px!important;min-height:144px!important;margin:0!important;padding:4px 8px!important;overflow:visible!important;background:#050c15!important}
  #site-header .mobile-direct-top{display:grid!important;grid-template-columns:clamp(82px,14vw,108px) minmax(0,1fr) clamp(104px,18vw,132px)!important;align-items:center!important;gap:4px!important;width:100%!important;min-width:0!important;height:34px!important;min-height:34px!important;margin:0!important;padding:0!important}
  #site-header .mobile-direct-brand,#site-header .mobile-direct-brand img{display:block!important;width:100%!important;max-width:108px!important;height:34px!important;min-height:34px!important;object-fit:contain!important;object-position:left center!important;margin:0!important;padding:0!important}
  #site-header .mobile-direct-ai,#site-header .mobile-direct-system{display:flex!important;align-items:center!important;justify-content:center!important;gap:4px!important;width:100%!important;min-width:0!important;max-width:none!important;height:34px!important;min-height:34px!important;max-height:34px!important;margin:0!important;padding:0 6px!important;overflow:hidden!important;color:#dcebf1!important;background:#071521!important;border:1px solid rgba(91,202,220,.28)!important;border-radius:8px!important;font-size:clamp(9px,1.25vw,12px)!important;font-weight:700!important;line-height:1!important;white-space:nowrap!important}
  #site-header .mobile-direct-system-count{display:inline-grid!important;place-items:center!important;flex:0 0 18px!important;width:18px!important;min-width:18px!important;height:18px!important;padding:0!important}
  #site-header .mobile-primary-nav-shell{display:block!important;position:relative!important;width:100%!important;min-width:0!important;height:66px!important;min-height:66px!important;margin:0!important;padding:0!important;overflow:visible!important;background:transparent!important;border:0!important;box-shadow:none!important}
  #site-header .mobile-primary-nav-shell::before,#site-header .mobile-primary-nav-shell::after{content:none!important;display:none!important}
  #site-header .mobile-primary-nav{display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr))!important;grid-template-rows:31px 31px!important;grid-auto-flow:row!important;gap:4px!important;width:100%!important;min-width:0!important;height:66px!important;min-height:66px!important;margin:0!important;padding:0!important;overflow:visible!important;transform:none!important}
  #site-header .mobile-primary-nav>:nth-child(-n+6){grid-column:span 2!important;grid-row:1!important}#site-header .mobile-primary-nav>:nth-child(n+7):nth-child(-n+10){grid-column:span 3!important;grid-row:2!important}
  #site-header .mobile-primary-nav>a,#site-header .mobile-primary-nav>button{position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;min-width:0!important;max-width:none!important;height:31px!important;min-height:31px!important;max-height:31px!important;margin:0!important;padding:0 4px!important;overflow:hidden!important;color:#d6e3e9!important;background:#081521!important;border:1px solid rgba(91,202,220,.24)!important;border-radius:8px!important;box-shadow:none!important;font-size:clamp(8px,1.12vw,11px)!important;font-weight:700!important;line-height:1.05!important;text-align:center!important;white-space:normal!important;word-break:normal!important;overflow-wrap:normal!important;hyphens:none!important}
  #site-header .mobile-primary-nav>button[data-mobile-mega]{padding-left:3px!important;padding-right:17px!important}#site-header .mobile-primary-nav>button[data-mobile-mega]::after{content:"▼"!important;position:absolute!important;right:5px!important;top:50%!important;transform:translateY(-50%)!important;color:#58e7f4!important;background:transparent!important;border:0!important;font-size:8px!important;line-height:1!important;pointer-events:none!important;opacity:1!important;visibility:visible!important}#site-header .mobile-primary-nav>button[data-mobile-mega].active::after{transform:translateY(-50%) rotate(180deg)!important}#site-header .mobile-primary-nav [aria-current="page"],#site-header .mobile-primary-nav .active{color:#f1fbff!important;background:rgba(46,196,214,.10)!important;border-color:#2ec4d6!important}
  #site-header .mobile-secondary-nav{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:32px!important;gap:4px!important;width:100%!important;min-width:0!important;height:32px!important;min-height:32px!important;margin:0!important;padding:0!important;overflow:visible!important}#site-header .mobile-secondary-nav .language-select-label{display:none!important}#site-header .mobile-secondary-nav>a,#site-header .mobile-secondary-nav>button{grid-row:1!important;display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;min-width:0!important;max-width:none!important;height:32px!important;min-height:32px!important;max-height:32px!important;margin:0!important;padding:0 7px!important;overflow:hidden!important;border-radius:8px!important;box-shadow:none!important;font-size:clamp(9px,1.18vw,12px)!important;font-weight:700!important;line-height:1!important;text-align:center!important;white-space:nowrap!important}#site-header .mobile-secondary-nav>a{grid-column:1!important;color:#d8edf3!important;background:#081521!important;border:1px solid rgba(89,211,225,.30)!important}#site-header .mobile-secondary-nav>button{grid-column:2!important;color:#04131b!important;background:linear-gradient(135deg,#42c6d7,#1e9fc6)!important;border:1px solid #4bd5e3!important}
  #site-header .mobile-mega-panel{position:fixed!important;left:8px!important;right:8px!important;top:calc(var(--ts-final-mobile-header) + 4px)!important;z-index:1900!important;display:none!important;width:auto!important;max-width:none!important;max-height:calc(100dvh - var(--ts-final-mobile-header) - 12px)!important;overflow:auto!important}#site-header .mobile-mega-panel.open{display:block!important}#site-header .mobile-mega-overlay{position:fixed!important;inset:var(--ts-final-mobile-header) 0 0!important;z-index:1850!important;display:none!important}body.mobile-mega-open #site-header .mobile-mega-overlay{display:block!important}
  main#app{padding-top:0!important;margin-top:0!important}main#app>#home-hero:first-child{margin-top:0!important;padding-top:24px!important;min-height:auto!important}main#app>#home-hero:first-child>.hero-grid{align-items:start!important;padding-top:0!important}
}

/* Authoritative public Hero + page-shell geometry.
   One card, one breadcrumb, one copy region and one visual root. */
:root{
  --ts-page-max:1440px;
  --ts-public-gutter:12px;
  --ts-hero-top-gap:16px;
  --ts-hero-inline:20px;
  --ts-hero-block:24px;
  --ts-hero-breadcrumb-gap:18px;
  --ts-hero-eyebrow-gap:18px;
  --ts-hero-title-gap:18px;
  --ts-hero-actions-gap:24px;
}
@media screen and (min-width:701px) and (max-width:1080px){
  :root{--ts-public-gutter:20px;--ts-hero-inline:28px;--ts-hero-block:30px}
}
@media screen and (min-width:1081px){
  :root{--ts-public-gutter:32px;--ts-hero-inline:64px;--ts-hero-block:48px}
}

main#app.has-canonical-hero{padding-top:0!important}

/* Shared outer page boundary for major public sections. */
main#app>.section:not(.consultant-section)>.container:not(.narrow),
main#app>section.section:not(.consultant-section)>.container:not(.narrow),
main#app>.section:not(.consultant-section)>.request-layout,
main#app>.section:not(.consultant-section)>.contact-layout{
  width:min(calc(100% - (var(--ts-public-gutter) * 2)),var(--ts-page-max))!important;
  max-width:var(--ts-page-max)!important;
  margin-inline:auto!important;
}

main#app>[data-page-hero="true"]{
  position:relative!important;
  isolation:isolate!important;
  box-sizing:border-box!important;
  width:min(calc(100% - (var(--ts-public-gutter) * 2)),var(--ts-page-max))!important;
  max-width:var(--ts-page-max)!important;
  min-width:0!important;
  min-height:0!important;
  height:auto!important;
  margin:var(--ts-hero-top-gap) auto 0!important;
  padding:var(--ts-hero-block) var(--ts-hero-inline)!important;
  overflow:hidden!important;
  opacity:1!important;
  visibility:visible!important;
  filter:none!important;
  transform:none!important;
  border:1px solid rgba(103,211,227,.25)!important;
  border-radius:24px!important;
  background:linear-gradient(135deg,rgba(8,25,38,.98),rgba(5,14,25,.96))!important;
  box-shadow:0 22px 64px rgba(0,0,0,.22)!important;
}
@media screen and (min-width:1081px){
  main#app>[data-page-hero="true"]{
    margin-top:calc(var(--ts-header-desktop) + var(--ts-hero-top-gap))!important;
  }
}

/* The outer Hero is the only page-level card. */
main#app>[data-page-hero="true"]::before,
main#app>[data-page-hero="true"]::after,
main#app>[data-page-hero="true"]>[data-hero-body="true"]::before,
main#app>[data-page-hero="true"]>[data-hero-body="true"]::after,
main#app>[data-page-hero="true"] [data-hero-copy="true"]::before,
main#app>[data-page-hero="true"] [data-hero-copy="true"]::after{
  content:none!important;
  display:none!important;
}
main#app>[data-page-hero="true"]>[data-hero-body="true"],
main#app>[data-page-hero="true"]>[data-hero-body="true"].container,
main#app>[data-page-hero="true"]>[data-hero-body="true"].hero-card,
main#app>[data-page-hero="true"] [data-hero-copy="true"]{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  min-height:0!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  overflow:visible!important;
  transform:none!important;
}

/* Breadcrumb is always first inside the single Hero card. */
main#app>[data-page-hero="true"]>[data-hero-breadcrumb]{
  position:static!important;
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  gap:8px!important;
  width:100%!important;
  min-width:0!important;
  margin:0 0 var(--ts-hero-breadcrumb-gap)!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  color:rgba(207,232,240,.76)!important;
  font-size:12px!important;
  line-height:1.4!important;
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
}
main#app>[data-page-hero="true"]>[data-hero-breadcrumb] a{color:#83e9f2!important;text-decoration:none!important}
main#app>[data-page-hero="true"]>[data-hero-breadcrumb] a:hover,
main#app>[data-page-hero="true"]>[data-hero-breadcrumb] a:focus-visible{text-decoration:underline!important}
main#app>[data-page-hero="true"]>[data-hero-breadcrumb] [aria-current="page"]{color:#fff!important}
main#app>[data-page-hero="true"]>[data-hero-breadcrumb] .breadcrumb-separator{color:#5f7d89!important}

/* One body.  Mobile/tablet stack; desktop uses one stable copy/visual grid. */
main#app>[data-page-hero="true"]>[data-hero-body="true"]{
  position:relative!important;
  z-index:1!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:auto!important;
  align-items:start!important;
  gap:24px!important;
}
main#app>[data-page-hero="true"] [data-hero-copy="true"]{
  position:relative!important;
  z-index:2!important;
  grid-column:1!important;
  grid-row:auto!important;
}
main#app>[data-page-hero="true"] [data-hero-copy="true"] .eyebrow{
  position:static!important;
  display:flex!important;
  align-items:flex-start!important;
  width:fit-content!important;
  max-width:100%!important;
  min-width:0!important;
  margin:0 0 var(--ts-hero-eyebrow-gap)!important;
  padding:0!important;
  opacity:1!important;
  visibility:visible!important;
  filter:none!important;
  transform:none!important;
}
main#app>[data-page-hero="true"] [data-hero-copy="true"] .eyebrow>span{flex:0 0 auto!important;margin-top:.55em!important}
main#app>[data-page-hero="true"] h1{
  position:static!important;
  display:block!important;
  width:auto!important;
  max-width:760px!important;
  min-width:0!important;
  margin:0 0 var(--ts-hero-title-gap)!important;
  padding:0!important;
  opacity:1!important;
  visibility:visible!important;
  filter:none!important;
  transform:none!important;
  overflow:visible!important;
  overflow-wrap:anywhere!important;
}
main#app>[data-page-hero="true"] [data-hero-copy="true"]>p,
main#app>[data-page-hero="true"] [data-hero-copy="true"]>.hero-lead{
  max-width:720px!important;
  min-width:0!important;
  margin:0!important;
  opacity:1!important;
  visibility:visible!important;
  filter:none!important;
  transform:none!important;
  overflow-wrap:anywhere!important;
}
main#app>[data-page-hero="true"] [data-hero-copy="true"] .hero-actions{
  position:static!important;
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  gap:10px!important;
  width:100%!important;
  max-width:720px!important;
  min-width:0!important;
  margin:var(--ts-hero-actions-gap) 0 0!important;
  padding:0!important;
  opacity:1!important;
  visibility:visible!important;
  filter:none!important;
  transform:none!important;
}
main#app>[data-page-hero="true"] .reveal,
main#app>[data-page-hero="true"] .reveal.visible{
  opacity:1!important;
  visibility:visible!important;
  filter:none!important;
  transform:none!important;
}

/* One visual root only; transparent safe-zone, never another card. */
main#app>[data-page-hero="true"] [data-hero-visual-root="true"]{
  position:relative!important;
  inset:auto!important;
  z-index:1!important;
  grid-column:1!important;
  grid-row:auto!important;
  order:2!important;
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  min-height:clamp(200px,48vw,300px)!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  opacity:1!important;
  visibility:visible!important;
  filter:none!important;
  transform:none!important;
  background:transparent!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
main#app>[data-page-hero="true"] [data-hero-visual-root="true"].hero-visual{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important}
main#app>[data-page-hero="true"] [data-hero-visual-root="true"] .system-visual{
  width:100%!important;
  height:auto!important;
  min-height:clamp(260px,68vw,430px)!important;
  aspect-ratio:1/1!important;
  margin:0!important;
}

@media screen and (max-width:700px){
  main#app>[data-page-hero="true"] [data-hero-copy="true"] .hero-actions{display:grid!important;grid-template-columns:1fr!important}
  main#app>[data-page-hero="true"] [data-hero-copy="true"] .hero-actions .btn,
  main#app>[data-page-hero="true"] [data-hero-copy="true"] .hero-actions .text-btn{width:100%!important;justify-content:center!important;min-width:0!important}
}
@media screen and (min-width:1081px){
  main#app>[data-page-hero="true"][data-hero-visual="present"]>[data-hero-body="true"]{
    grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr)!important;
    align-items:center!important;
    column-gap:clamp(32px,4vw,64px)!important;
    row-gap:24px!important;
  }
  main#app>[data-page-hero="true"] [data-hero-copy="true"]{grid-column:1!important;grid-row:1!important}
  main#app>[data-page-hero="true"] [data-hero-visual-root="true"]{
    grid-column:2!important;
    grid-row:1!important;
    order:initial!important;
    min-height:320px!important;
  }
  main#app>[data-page-hero="true"] [data-hero-visual-root="true"] .system-visual{
    min-height:360px!important;
    max-height:460px!important;
    aspect-ratio:1/1!important;
  }
}

/* Distinct route-specific Hero diagrams. One canonical DOM root survives every breakpoint. */
.hero-diagram{position:relative;color:#8debf3;overflow:hidden;background:transparent;border:0;box-shadow:none;outline:0;border-radius:0;isolation:isolate}
.hero-diagram svg{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible}
.hero-diagram text{fill:#e9fbff;font-family:var(--font-primary,Inter,Arial,sans-serif);font-size:12px;font-weight:800;letter-spacing:.08em;text-anchor:middle;dominant-baseline:middle}
.hero-diagram .hd-sub{fill:#86cdd6;font-size:9px;font-weight:700;letter-spacing:.12em}
.hero-diagram .hd-caption{fill:#78bdc7;font-size:9px;letter-spacing:.14em}
.hero-diagram .hd-wire,.hero-diagram .hd-flow-track,.hero-diagram .hd-creative-flow,.hero-diagram .hd-faq-flow,.hero-diagram .hd-founder-flow,.hero-diagram .hd-delivery-path{fill:none;stroke:rgba(116,226,238,.42);stroke-width:1.6}
.hero-diagram .hd-wire-live{stroke-dasharray:8 11;animation:hdWireTravel 7s linear infinite}
.hero-diagram .hd-node rect,.hero-diagram .hd-capability rect,.hero-diagram .hd-channel rect,.hero-diagram .hd-pillar rect{fill:rgba(5,22,34,.82);stroke:rgba(115,230,240,.38);stroke-width:1.1}
.hero-diagram .hd-signal{fill:#72eef6;filter:drop-shadow(0 0 8px rgba(114,238,246,.9));animation:hdSignalPulse 2.8s ease-in-out infinite}
.hero-diagram .hd-delay-1{animation-delay:.8s}.hero-diagram .hd-delay-2{animation-delay:1.6s}
.hero-diagram .hd-motion-dot{fill:#7af3fb;filter:drop-shadow(0 0 9px rgba(122,243,251,.95))}

/* TS_SECTION_DIAGRAM_RULE_V1_GLOBAL — purposeful, secondary section motion */
main#app>section.section[data-section-diagram="fallback"] .section-context-diagram{
  display:block;
  position:relative;
  width:min(100%,760px);
  height:clamp(92px,12vw,132px);
  margin:clamp(28px,4vw,52px) auto 0;
  color:#85edf4;
  overflow:hidden;
  opacity:.88;
  pointer-events:none;
}
.section-context-diagram svg{display:block;width:100%;height:100%;overflow:visible}
.section-context-diagram .scd-track{fill:none;stroke:rgba(125,231,241,.20);stroke-width:1.4}
.section-context-diagram .scd-track-live{fill:none;stroke:rgba(125,231,241,.70);stroke-width:1.75;stroke-dasharray:7 11;animation:sectionDiagramTravel 6.8s linear infinite}
.section-context-diagram .scd-node rect{fill:rgba(7,27,41,.72);stroke:rgba(125,231,241,.5);stroke-width:1.2}
.section-context-diagram .scd-node circle,.section-context-diagram .scd-node path{fill:none;stroke:#86edf5;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.section-context-diagram .scd-node-core rect{fill:rgba(19,78,92,.38);stroke:rgba(160,241,182,.7)}
.section-context-diagram .scd-signal{fill:#b1f7fb;filter:drop-shadow(0 0 7px rgba(151,244,251,.9))}
.section-context-diagram .scd-label{fill:#8acbd3;font-family:var(--font-primary,Inter,Arial,sans-serif);font-size:10px;font-weight:800;letter-spacing:.18em;text-anchor:middle}
@keyframes sectionDiagramTravel{to{stroke-dashoffset:-108}}
@media (max-width:1080px){
  main#app>section.section[data-section-diagram="fallback"] .section-context-diagram{width:min(100%,560px);height:92px;margin-top:28px}
  .section-context-diagram .scd-track-live{animation-duration:8.5s}
  .section-context-diagram .scd-label{font-size:9px}
}
@media (prefers-reduced-motion:reduce){.section-context-diagram .scd-track-live{animation:none!important}}

/* Home — eight business systems orbit one TechScales hub. */
.home-system-map::before{content:"";position:absolute;inset:7% 8%;background:radial-gradient(circle at 50% 50%,rgba(74,226,240,.11),transparent 34%),repeating-radial-gradient(circle at 50% 50%,rgba(99,220,232,.055) 0 1px,transparent 1px 34px);pointer-events:none}
.home-system-map .hd-orbit{fill:none;stroke:rgba(108,222,234,.22);stroke-width:1}.home-system-map .hd-orbit-b{stroke-dasharray:4 10;animation:hdOrbitDash 13s linear infinite}
.home-system-map .hd-home-core circle{fill:rgba(7,31,44,.92);stroke:rgba(119,237,246,.7);stroke-width:1.4;filter:drop-shadow(0 0 22px rgba(86,231,242,.18))}
.home-system-map .hd-home-core text:first-of-type{font-size:13px}.home-system-map .hd-home-node rect{animation:hdNodeEdge 3.8s ease-in-out infinite}.home-system-map .hd-home-node:nth-of-type(even) rect{animation-delay:.7s}

/* Services — five capability systems feed one service architecture. */
.services-network::before{content:"";position:absolute;inset:10% 14%;background:linear-gradient(135deg,transparent 48%,rgba(87,219,233,.06) 49% 51%,transparent 52%),linear-gradient(45deg,transparent 48%,rgba(87,219,233,.04) 49% 51%,transparent 52%);pointer-events:none}
.services-network .hd-architecture-ring{fill:none;stroke:rgba(106,224,235,.23);stroke-width:1.2;stroke-dasharray:10 12;animation:hdWireTravel 10s linear infinite}
.services-network .hd-service-core rect{fill:rgba(7,31,44,.88);stroke:rgba(125,236,245,.64);stroke-width:1.3;filter:drop-shadow(0 0 24px rgba(84,230,242,.16))}
.services-network .hd-service-core text{font-size:14px}.services-network .hd-capability rect{animation:hdNodeEdge 4.2s ease-in-out infinite}.services-network .hd-capability:nth-of-type(2n) rect{animation-delay:.9s}

/* Workflows — actual left-to-right state movement with data packets. */
.workflow-map::before{content:"";position:absolute;left:5%;right:5%;top:49%;height:1px;background:linear-gradient(90deg,transparent,rgba(103,232,242,.2),transparent);pointer-events:none}
.workflow-map .hd-flow-track{stroke-width:2.2}.workflow-map .hd-flow-track-soft{stroke:rgba(90,184,198,.14);stroke-dasharray:3 9}
.workflow-map .hd-stage rect{fill:rgba(5,21,33,.88);stroke:rgba(112,227,238,.36);stroke-width:1.1}.workflow-map .hd-stage circle,.workflow-map .hd-stage path,.workflow-map .hd-stage ellipse{fill:none;stroke:#79eaf3;stroke-width:1.6}
.workflow-map .hd-stage text{font-size:11px}.workflow-map .hd-flow-status rect{fill:rgba(31,105,122,.13);stroke:rgba(113,228,239,.3)}.workflow-map .hd-flow-status text{fill:#a6edf2;font-size:9px}
.workflow-map .hd-motion-dot-secondary{fill:#4abdd0;opacity:.7}

/* AI Agents — central intelligence with six bounded destinations and explicit handoff. */
.agent-network::before{content:"";position:absolute;inset:4%;background:radial-gradient(circle at 50% 50%,rgba(80,228,241,.12),transparent 28%);pointer-events:none}
.agent-network .hd-agent-ring{fill:none;stroke:rgba(102,221,233,.24);stroke-width:1}.agent-network .hd-agent-ring-outer{stroke-dasharray:3 10;animation:hdOrbitDash 15s linear infinite}
.agent-network .hd-agent-core circle{fill:rgba(8,35,49,.9);stroke:rgba(123,239,247,.7);stroke-width:1.4;filter:drop-shadow(0 0 28px rgba(79,228,241,.18))}.agent-network .hd-agent-core path{fill:none;stroke:#79eaf3;stroke-width:1.5}.agent-network .hd-agent-core text{font-size:11px}
.agent-network .hd-agent-human rect{fill:rgba(16,36,43,.94);stroke:rgba(223,241,244,.48)}.agent-network .hd-agent-human text:first-of-type{fill:#f3fbfc}

/* Industries — multiple sectors share the same AI / automation / digital backbone. */
.industry-network::before{content:"";position:absolute;inset:8%;background-image:linear-gradient(rgba(99,217,229,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(99,217,229,.045) 1px,transparent 1px);background-size:30px 30px;mask-image:radial-gradient(circle,#000 38%,transparent 78%);pointer-events:none}
.industry-network .hd-industry-backbone{fill:none;stroke:rgba(116,230,240,.24);stroke-width:4;stroke-linecap:round}
.industry-network .hd-infra-stack>rect:first-child{fill:rgba(6,27,40,.92);stroke:rgba(115,232,242,.58);stroke-width:1.3}.industry-network .hd-infra-stack>rect:not(:first-child){fill:rgba(55,187,205,.08);stroke:rgba(106,222,233,.24)}.industry-network .hd-infra-stack text{font-size:10px}
.industry-network .hd-industry-node rect{animation:hdNodeEdge 4.6s ease-in-out infinite}.industry-network .hd-industry-node:nth-of-type(odd) rect{animation-delay:1s}

/* Tools — a utility workspace, not an orbit diagram. */
.tools-network::before{content:"";position:absolute;inset:8% 6%;background:linear-gradient(120deg,rgba(67,217,233,.04),transparent 34%,rgba(67,217,233,.03));pointer-events:none}
.tools-network .hd-workspace rect{fill:rgba(4,18,29,.88);stroke:rgba(108,226,237,.32);stroke-width:1.2}.tools-network .hd-workspace path{stroke:rgba(108,226,237,.18)}.tools-network .hd-workspace circle{fill:#5bdce9;opacity:.55}
.tools-network .hd-tools-sidebar rect{fill:rgba(59,188,205,.09);stroke:rgba(105,221,233,.2)}.tools-network .hd-tools-sidebar path{fill:none;stroke:#75e7ef;stroke-width:1.3}
.tools-network .hd-tool-card rect{fill:rgba(7,30,43,.92);stroke:rgba(110,226,237,.29);stroke-width:1}.tools-network .hd-tool-card path,.tools-network .hd-tool-card circle{fill:none;stroke:#75e7ef;stroke-width:1.4}.tools-network .hd-tool-card>rect{animation:hdToolActivity 4.4s ease-in-out infinite}.tools-network .hd-tool-card:nth-of-type(odd)>rect{animation-delay:.9s}
.tools-network .hd-tools-cursor path{fill:#72edf5;stroke:#dffcff;stroke-width:1;filter:drop-shadow(0 0 8px rgba(114,237,245,.48));animation:hdCursorPulse 2.8s ease-in-out infinite}

/* QR — matrix, finder patterns, scanner and generate/scan/connect flow. */
.qr-network::before{content:"";position:absolute;inset:9%;background:radial-gradient(circle at 28% 50%,rgba(77,229,240,.08),transparent 30%);pointer-events:none}
.qr-network .hd-qr-panel>rect:first-child{fill:rgba(5,23,35,.9);stroke:rgba(107,227,238,.38);stroke-width:1.2}.qr-network .hd-qr-panel>rect:last-child{fill:rgba(224,252,253,.96);stroke:rgba(255,255,255,.7)}
.qr-network .hd-qr-matrix rect{fill:#08202b}.qr-network .hd-qr-matrix .hd-qr-cut{fill:#e3fcfd}
.qr-network .hd-scanner{animation:hdScanner 3.5s ease-in-out infinite}.qr-network .hd-scanner rect{fill:#55edf5;filter:drop-shadow(0 0 7px rgba(85,237,245,.8))}.qr-network .hd-scanner circle{fill:#dffeff}
.qr-network .hd-qr-route{fill:none;stroke:rgba(111,229,239,.18);stroke-width:1}.qr-network .hd-qr-step circle{fill:rgba(7,31,43,.9);stroke:rgba(117,234,244,.52);stroke-width:1.2}.qr-network .hd-qr-step text{font-size:11px;text-anchor:start}.qr-network .hd-qr-step text:first-of-type{text-anchor:middle}.qr-network .hd-qr-step .hd-sub{font-size:8px}.qr-network .hd-qr-arrow{fill:none;stroke:rgba(113,229,239,.55);stroke-width:1.4;stroke-dasharray:5 6;animation:hdWireTravel 4s linear infinite}

/* Work — projects, analytics and outcome visibility in one dashboard. */
.work-network::before{content:"";position:absolute;inset:7%;background:linear-gradient(180deg,rgba(79,226,239,.04),transparent 48%);pointer-events:none}
.work-network .hd-dashboard rect{fill:rgba(4,18,29,.9);stroke:rgba(109,226,237,.32);stroke-width:1.2}.work-network .hd-dashboard path{stroke:rgba(110,226,237,.16)}.work-network .hd-dashboard text{text-anchor:start;fill:#9cebf1;font-size:9px}.work-network .hd-dashboard circle{fill:#5edfea;opacity:.5}
.work-network .hd-metric-card rect,.work-network .hd-chart rect{fill:rgba(7,30,43,.9);stroke:rgba(108,223,234,.24)}.work-network .hd-metric-card text{text-anchor:start}.work-network .hd-metric{font-size:22px;letter-spacing:0}.work-network .hd-metric-card path{fill:none;stroke:#76eaf2;stroke-width:1.8}
.work-network .hd-outcome-ring circle:first-child{fill:rgba(7,30,43,.92);stroke:rgba(110,226,237,.22)}.work-network .hd-outcome-progress{fill:none;stroke:#70e9f2;stroke-width:7;stroke-dasharray:210 75;transform:rotate(-90deg);transform-origin:center;animation:hdOutcomeRing 4.8s ease-in-out infinite}.work-network .hd-outcome-ring text{font-size:9px}
.work-network .hd-chart-grid{fill:none;stroke:rgba(101,214,226,.1);stroke-width:1}.work-network .hd-chart-line{fill:none;stroke:#72e8f1;stroke-width:2.4;stroke-dasharray:300;stroke-dashoffset:300;animation:hdChartDraw 5s ease-in-out infinite}.work-network .hd-chart circle{fill:#b9fbff}.work-network .hd-bars rect{fill:rgba(91,218,232,.32);stroke:#66dce7;animation:hdBarPulse 3.8s ease-in-out infinite}.work-network .hd-bars rect:nth-child(2){animation-delay:.4s}.work-network .hd-bars rect:nth-child(3){animation-delay:.8s}

/* Delivery — five approved stages on one controlled path. */
.delivery-network::after{content:"";position:absolute;left:7%;right:7%;top:18%;bottom:18%;background:radial-gradient(circle at 50% 50%,rgba(75,224,238,.07),transparent 55%);pointer-events:none}
.delivery-network .hd-delivery-path{stroke-width:2.3;stroke-dasharray:9 10;animation:hdWireTravel 7.5s linear infinite}.delivery-network .hd-delivery-node circle{fill:rgba(6,28,41,.94);stroke:rgba(117,233,243,.52);stroke-width:1.3}.delivery-network .hd-delivery-node text:first-of-type{font-size:13px}.delivery-network .hd-delivery-node text:last-of-type{font-size:9px;fill:#9ee9ee}.delivery-network .hd-delivery-gate rect{fill:rgba(39,130,147,.1);stroke:rgba(110,225,235,.26)}.delivery-network .hd-delivery-gate text{fill:#a7edf1;font-size:9px}

/* Contact — channel-specific communication hub. */
.contact-network::before{content:"";position:absolute;inset:6%;background:radial-gradient(circle at 50% 50%,rgba(74,227,239,.1),transparent 31%);pointer-events:none}
.contact-network .hd-contact-pulse{fill:none;stroke:rgba(106,224,235,.23);stroke-width:1;animation:hdContactPulse 3.6s ease-out infinite}.contact-network .hd-contact-pulse-b{animation-delay:1.2s}
.contact-network .hd-contact-core circle{fill:rgba(7,31,44,.92);stroke:rgba(120,236,245,.68);stroke-width:1.4}.contact-network .hd-contact-core path{fill:none;stroke:#7aeaf2;stroke-width:1.5}.contact-network .hd-contact-core text{font-size:10px}.contact-network .hd-channel rect{animation:hdNodeEdge 4.1s ease-in-out infinite}.contact-network .hd-channel:nth-of-type(odd) rect{animation-delay:.8s}

/* Virtual Ads — production pipeline from concept through campaign adaptation. */
.virtual-ads-network::before{content:"";position:absolute;left:4%;right:4%;top:48%;height:1px;background:linear-gradient(90deg,transparent,rgba(101,226,237,.18),transparent);pointer-events:none}
.virtual-ads-network .hd-creative-flow{stroke-width:2}.virtual-ads-network .hd-creative-card rect{fill:rgba(5,22,34,.9);stroke:rgba(110,226,237,.31);stroke-width:1.1}.virtual-ads-network .hd-creative-card path,.virtual-ads-network .hd-creative-card circle{fill:none;stroke:#76e8f1;stroke-width:1.4}.virtual-ads-network .hd-creative-card text{font-size:10px}.virtual-ads-network .hd-creative-feature rect{stroke:rgba(132,242,249,.58);filter:drop-shadow(0 0 20px rgba(78,226,239,.12))}

/* About — four disciplines interlock around one operating system. */
.about-network::before{content:"";position:absolute;inset:8%;background:conic-gradient(from 45deg at 50% 50%,rgba(67,218,233,.05),transparent 18%,rgba(67,218,233,.04) 34%,transparent 52%,rgba(67,218,233,.05) 72%,transparent 90%);pointer-events:none}
.about-network .hd-about-cross{fill:none;stroke:rgba(105,222,233,.22);stroke-width:1.3;stroke-dasharray:6 10;animation:hdWireTravel 8s linear infinite}.about-network .hd-about-ring{fill:none;stroke:rgba(106,223,234,.23);stroke-width:1}.about-network .hd-about-core rect{fill:rgba(7,31,44,.92);stroke:rgba(119,235,244,.65);stroke-width:1.4}.about-network .hd-about-core text{font-size:11px}.about-network .hd-pillar rect{animation:hdNodeEdge 4.4s ease-in-out infinite}.about-network .hd-pillar:nth-of-type(even) rect{animation-delay:.9s}

/* Founder Vision — founder-led direction moves through Creative, AI and Growth onto infrastructure. */
.founder-network::before{content:"";position:absolute;inset:8%;background:linear-gradient(90deg,rgba(70,224,237,.05),transparent 38%,rgba(70,224,237,.035));pointer-events:none}
.founder-network .hd-founder-source circle{fill:rgba(7,31,44,.94);stroke:rgba(125,238,246,.7);stroke-width:1.4;filter:drop-shadow(0 0 24px rgba(80,227,239,.15))}.founder-network .hd-founder-source text{font-size:11px}.founder-network .hd-founder-flow{stroke-width:2}.founder-network .hd-founder-step rect{fill:rgba(5,22,34,.9);stroke:rgba(110,226,237,.34);stroke-width:1.1}.founder-network .hd-founder-step text{font-size:10px}.founder-network .hd-founder-infra rect{fill:rgba(44,147,163,.08);stroke:rgba(109,224,235,.3)}.founder-network .hd-founder-infra text{font-size:10px}.founder-network .hd-founder-support{fill:none;stroke:rgba(109,224,235,.24);stroke-width:1.2;stroke-dasharray:5 7}

/* FAQ — question enters approved knowledge and exits as an answer. */
.faq-network::before{content:"";position:absolute;inset:10% 6%;background:radial-gradient(circle at 50% 50%,rgba(77,226,239,.08),transparent 42%);pointer-events:none}
.faq-network .hd-faq-flow{stroke-width:2;stroke-dasharray:8 11;animation:hdWireTravel 6s linear infinite}.faq-network .hd-question path:first-child,.faq-network .hd-answer path:first-child{fill:rgba(5,22,34,.92);stroke:rgba(112,228,239,.38);stroke-width:1.2}.faq-network .hd-question text:first-of-type{fill:#7bf0f7;font-size:40px;letter-spacing:0}.faq-network .hd-answer path:last-of-type{fill:none;stroke:#8ef3f8;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.faq-network .hd-knowledge rect{fill:rgba(7,31,44,.92);stroke:rgba(112,228,239,.35)}.faq-network .hd-knowledge path{fill:none;stroke:rgba(125,234,243,.5);stroke-width:1.3}.faq-network .hd-knowledge text{font-size:9px}

@keyframes hdWireTravel{to{stroke-dashoffset:-140}}
@keyframes hdOrbitDash{to{stroke-dashoffset:-120}}
@keyframes hdSignalPulse{0%,100%{opacity:.35;filter:drop-shadow(0 0 3px rgba(114,238,246,.45))}50%{opacity:1;filter:drop-shadow(0 0 11px rgba(114,238,246,1))}}
@keyframes hdNodeEdge{0%,100%{stroke-opacity:.32;fill-opacity:.82}50%{stroke-opacity:.82;fill-opacity:1}}
@keyframes hdToolActivity{0%,100%{stroke-opacity:.28}45%,70%{stroke-opacity:.75}}
@keyframes hdCursorPulse{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes hdScanner{0%,100%{transform:translateY(0)}50%{transform:translateY(195px)}}
@keyframes hdOutcomeRing{0%,100%{stroke-dasharray:165 120}50%{stroke-dasharray:235 50}}
@keyframes hdChartDraw{0%{stroke-dashoffset:300;opacity:.4}48%,85%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-40;opacity:.6}}
@keyframes hdBarPulse{0%,100%{fill-opacity:.3}50%{fill-opacity:.8}}
@keyframes hdContactPulse{0%{opacity:.7;transform:scale(.92);transform-origin:center}100%{opacity:0;transform:scale(1.18);transform-origin:center}}

@media screen and (max-width:700px){
  main#app>[data-page-hero="true"]>[data-hero-body="true"]{gap:18px!important}
  main#app>[data-page-hero="true"] [data-hero-visual-root="true"]{
    display:grid!important;
    place-items:center!important;
    align-self:start!important;
    width:100%!important;
    min-height:clamp(208px,56vw,244px)!important;
    overflow:hidden!important;
  }
  main#app>[data-page-hero="true"] [data-hero-visual-root="true"]>.hero-diagram{
    width:100%!important;
    max-width:100%!important;
    min-height:clamp(208px,56vw,244px)!important;
    height:auto!important;
    aspect-ratio:12 / 7!important;
    margin:0 auto!important;
    overflow:hidden!important;
  }
  main#app>[data-page-hero="true"] [data-hero-visual-root="true"]>.hero-diagram svg{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    overflow:hidden!important;
  }
  .hero-diagram text{font-size:11px}.hero-diagram .hd-sub,.hero-diagram .hd-caption{font-size:8px}
}

@media (prefers-reduced-motion:reduce){
  .hero-diagram .hd-wire-live,.hero-diagram .hd-orbit-b,.hero-diagram .hd-signal,.hero-diagram .hd-node rect,.hero-diagram .hd-capability rect,.hero-diagram .hd-channel rect,.hero-diagram .hd-pillar rect,.hero-diagram .hd-tool-card>rect,.hero-diagram .hd-tools-cursor path,.hero-diagram .hd-scanner,.hero-diagram .hd-outcome-progress,.hero-diagram .hd-chart-line,.hero-diagram .hd-bars rect,.hero-diagram .hd-delivery-path,.hero-diagram .hd-contact-pulse,.hero-diagram .hd-about-cross,.hero-diagram .hd-faq-flow{animation:none!important}
  .hero-diagram .hd-motion-dot{opacity:.72}
}

/* Folder A approved HOME MOBILE FINAL FIX — practical minimum through 700px. */
@media screen and (max-width:700px){
  #site-header .mobile-primary-nav-shell{width:100%!important;max-width:100%!important;overflow:visible!important;mask-image:none!important;-webkit-mask-image:none!important}
  #site-header .mobile-primary-nav{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;grid-auto-flow:row!important;grid-auto-columns:unset!important;width:100%!important;max-width:100%!important;min-width:0!important;gap:7px!important;margin:0!important;padding:0!important;overflow:visible!important;scroll-snap-type:none!important;transform:none!important}
  #site-header .mobile-primary-nav>*{grid-column:auto!important;grid-row:auto!important;display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;min-width:0!important;max-width:100%!important;height:46px!important;min-height:46px!important;margin:0!important;padding:4px 3px!important;box-sizing:border-box!important;white-space:normal!important;text-align:center!important;line-height:1.05!important;font-size:clamp(9px,2.3vw,12px)!important;transform:none!important}
  main#app>section.hero:first-child{position:relative!important;top:auto!important;margin-top:0!important;margin-block-start:0!important;padding-top:20px!important;opacity:1!important;visibility:visible!important;filter:none!important;transform:none!important;overflow:hidden!important}
  main#app>section.hero:first-child::before,main#app>section.hero:first-child::after,main#app>section.hero:first-child .hero-grid::before,main#app>section.hero:first-child .hero-grid::after{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
  main#app>section.hero:first-child .hero-grid,main#app>section.hero:first-child .hero-copy,main#app>section.hero:first-child .hero-copy *,main#app>section.hero:first-child .hero-actions,main#app>section.hero:first-child .hero-actions *,main#app>section.hero:first-child .hero-input{opacity:1!important;visibility:visible!important;filter:none!important;mix-blend-mode:normal!important}
  main#app>section.hero:first-child .hero-copy.reveal,main#app>section.hero:first-child .hero-copy.reveal.visible,main#app>section.hero:first-child .hero-grid.reveal,main#app>section.hero:first-child .hero-grid.reveal.visible{opacity:1!important;visibility:visible!important;filter:none!important;transform:none!important}
  main#app>section.hero:first-child .eyebrow,main#app>section.hero:first-child .ts-eyebrow{position:relative!important;top:auto!important;margin-top:0!important;margin-bottom:18px!important;padding-top:0!important;opacity:1!important;visibility:visible!important;filter:none!important;color:#65d3e3!important;-webkit-text-fill-color:#65d3e3!important;transform:none!important;z-index:5!important}
  main#app>section.hero:first-child h1,main#app>section.hero:first-child h1 *,main#app>section.hero:first-child .hero-lead{opacity:1!important;visibility:visible!important;filter:none!important}
}

/* Preserve Folder A source order: its final compact header layer follows the
   mobile hero lock and is authoritative only for header geometry. */
@media screen and (max-width:700px){
  #site-header .mobile-direct-header{grid-template-rows:34px 66px 32px!important;gap:4px!important;padding:4px 8px!important;height:144px!important;min-height:144px!important}
  #site-header .mobile-direct-top{grid-template-columns:clamp(82px,14vw,108px) minmax(0,1fr) clamp(104px,18vw,132px)!important;gap:4px!important;height:34px!important;min-height:34px!important}
  #site-header .mobile-direct-brand,#site-header .mobile-direct-brand img{max-width:108px!important;height:34px!important;min-height:34px!important}
  #site-header .mobile-direct-ai,#site-header .mobile-direct-system{height:34px!important;min-height:34px!important;max-height:34px!important;padding:0 6px!important;font-size:clamp(9px,1.25vw,12px)!important}
  #site-header .mobile-primary-nav{grid-template-columns:repeat(12,minmax(0,1fr))!important;grid-template-rows:31px 31px!important;grid-auto-flow:row!important;gap:4px!important;height:66px!important;min-height:66px!important}
  #site-header .mobile-primary-nav>:nth-child(-n+6){grid-column:span 2!important;grid-row:1!important}#site-header .mobile-primary-nav>:nth-child(n+7):nth-child(-n+10){grid-column:span 3!important;grid-row:2!important}
  #site-header .mobile-primary-nav>a,#site-header .mobile-primary-nav>button{height:31px!important;min-height:31px!important;max-height:31px!important;padding:0 4px!important;font-size:clamp(8px,1.12vw,11px)!important;font-weight:700!important}
  #site-header .mobile-secondary-nav{grid-template-rows:32px!important;gap:4px!important;height:32px!important;min-height:32px!important}#site-header .mobile-secondary-nav>a,#site-header .mobile-secondary-nav>button{height:32px!important;min-height:32px!important;max-height:32px!important;padding:0 7px!important;font-size:clamp(9px,1.18vw,12px)!important;font-weight:700!important}
  main#app>#home-hero:first-child{padding-top:24px!important;min-height:auto!important}main#app>#home-hero:first-child>.hero-grid{align-items:start!important;padding-top:0!important}
}

/* Recovered Hero/Header contract: original visual DOM stays untouched. */
@media screen and (min-width:1081px){
  :root{--ts-header-desktop:124px;--ts-header-action-height:44px;--ts-header-action-gap:8px;--ts-header-talk-width:116px;--ts-header-system-width:128px;--ts-header-booking-width:184px}
  html{scroll-padding-top:142px!important}
  #site-header{height:124px!important;min-height:124px!important;padding:10px 16px!important;box-sizing:border-box!important}
  #site-header .nav-wrap{width:min(100%,1460px)!important;height:100%!important;display:grid!important;grid-template-columns:minmax(146px,1fr) auto!important;grid-template-rows:44px 42px!important;grid-template-areas:"brand actions" "nav nav"!important;align-items:center!important;column-gap:16px!important;row-gap:8px!important}
  #site-header .brand{grid-area:brand!important;width:146px!important;height:44px!important;display:flex!important;align-items:center!important}
  #site-header .nav-actions{grid-area:actions!important;justify-self:end!important;display:flex!important;align-items:center!important;gap:var(--ts-header-action-gap)!important;height:44px!important;margin:0!important;min-width:max-content!important}
  #site-header .nav-actions .nav-ai,#site-header .nav-actions .my-system-control,#site-header .nav-actions [data-action="booking"]{height:var(--ts-header-action-height)!important;min-height:var(--ts-header-action-height)!important;box-sizing:border-box!important;padding:0 12px!important;border-radius:12px!important;font-size:11px!important;line-height:1!important;white-space:nowrap!important}
  #site-header .nav-actions .nav-ai{width:var(--ts-header-talk-width)!important}
  #site-header .nav-actions .my-system-control{width:var(--ts-header-system-width)!important}
  #site-header .nav-actions [data-action="booking"]{width:var(--ts-header-booking-width)!important}
  #site-header .nav-actions .nav-linkedin{width:34px!important;height:44px!important;display:grid!important;place-items:center!important}
  #site-header .desktop-nav{grid-area:nav!important;width:100%!important;height:42px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:clamp(6px,.72vw,14px)!important;min-width:0!important;white-space:nowrap!important}
  #site-header .desktop-nav a,#site-header .desktop-nav button{font-size:clamp(10px,.72vw,12px)!important}
}

/* TechScales Hero R4 — diagram typography clarity only.
   No Hero shell, copy, breadcrumb, CTA, width, breakpoint, or safe-zone geometry changes. */
main#app>[data-page-hero="true"] [data-hero-diagram] text{
  fill:#d7e9ed!important;
  font-weight:600!important;
  letter-spacing:.03em!important;
  text-shadow:none!important;
  filter:none!important;
  opacity:.94!important;
  paint-order:normal!important;
}
main#app>[data-page-hero="true"] [data-hero-diagram] .hd-sub{
  fill:#8fb5bd!important;
  font-weight:500!important;
  letter-spacing:.04em!important;
  opacity:.9!important;
}
main#app>[data-page-hero="true"] [data-hero-diagram] .hd-caption{
  fill:#7fa8b0!important;
  font-weight:500!important;
  letter-spacing:.055em!important;
  opacity:.88!important;
}
main#app>[data-page-hero="true"] [data-hero-diagram] .hd-core text:not(.hd-sub),
main#app>[data-page-hero="true"] [data-hero-diagram] .hd-service-core text:not(.hd-sub),
main#app>[data-page-hero="true"] [data-hero-diagram] .hd-agent-core text:not(.hd-sub),
main#app>[data-page-hero="true"] [data-hero-diagram] .hd-contact-core text:not(.hd-sub),
main#app>[data-page-hero="true"] [data-hero-diagram] .hd-about-core text:not(.hd-sub){
  fill:#dceff2!important;
  font-weight:650!important;
}
@media screen and (max-width:700px){
  main#app>[data-page-hero="true"] [data-hero-diagram] text{
    font-size:16px!important;
    font-weight:600!important;
    letter-spacing:.008em!important;
  }
  main#app>[data-page-hero="true"] [data-hero-diagram] .hd-sub,
  main#app>[data-page-hero="true"] [data-hero-diagram] .hd-caption{
    font-size:11.5px!important;
    font-weight:500!important;
    letter-spacing:.012em!important;
  }
}


/* TechScales Hero R5 — final diagram text clarity correction.
   Typography/paint only: no Hero geometry or route layout changes. */
main#app>[data-page-hero="true"] [data-hero-diagram] text{
  font-family:"Segoe UI",Arial,sans-serif!important;
  font-weight:400!important;
  fill:#b6cbd0!important;
  letter-spacing:0!important;
  stroke:none!important;
  stroke-width:0!important;
  text-shadow:none!important;
  filter:none!important;
  opacity:.88!important;
  paint-order:normal!important;
  text-rendering:geometricPrecision!important;
}
main#app>[data-page-hero="true"] [data-hero-diagram] .hd-sub{
  font-weight:400!important;
  fill:#78979e!important;
  letter-spacing:.015em!important;
  opacity:.82!important;
}
main#app>[data-page-hero="true"] [data-hero-diagram] .hd-caption{
  font-weight:400!important;
  fill:#719097!important;
  letter-spacing:.025em!important;
  opacity:.8!important;
}
main#app>[data-page-hero="true"] [data-hero-diagram] .hd-core text:not(.hd-sub),
main#app>[data-page-hero="true"] [data-hero-diagram] .hd-home-core text:not(.hd-sub),
main#app>[data-page-hero="true"] [data-hero-diagram] .hd-service-core text:not(.hd-sub),
main#app>[data-page-hero="true"] [data-hero-diagram] .hd-agent-core text:not(.hd-sub),
main#app>[data-page-hero="true"] [data-hero-diagram] .hd-contact-core text:not(.hd-sub),
main#app>[data-page-hero="true"] [data-hero-diagram] .hd-about-core text:not(.hd-sub){
  fill:#c5dadd!important;
  font-weight:500!important;
  opacity:.9!important;
}
main#app>[data-page-hero="true"] [data-hero-diagram] .hd-home-core circle,
main#app>[data-page-hero="true"] [data-hero-diagram] .hd-service-core rect,
main#app>[data-page-hero="true"] [data-hero-diagram] .hd-agent-core circle,
main#app>[data-page-hero="true"] [data-hero-diagram] .hd-tools-cursor path,
main#app>[data-page-hero="true"] [data-hero-diagram] .hd-scanner rect,
main#app>[data-page-hero="true"] [data-hero-diagram] .hd-creative-feature rect,
main#app>[data-page-hero="true"] [data-hero-diagram] .hd-founder-source circle{
  filter:none!important;
}
main#app>[data-page-hero="true"] [data-hero-diagram] .hd-signal,
main#app>[data-page-hero="true"] [data-hero-diagram] .hd-motion-dot{
  filter:none!important;
  opacity:.76!important;
}
@media screen and (max-width:700px){
  main#app>[data-page-hero="true"] [data-hero-diagram] text{font-weight:400!important;opacity:.9!important}
  main#app>[data-page-hero="true"] [data-hero-diagram] .hd-sub,
  main#app>[data-page-hero="true"] [data-hero-diagram] .hd-caption{font-weight:400!important;opacity:.84!important}
}

/* R5 floating WhatsApp live-agent UI. */
#ts-whatsapp-agent{position:fixed;right:18px;bottom:18px;z-index:2100;font-family:var(--font-primary,Inter,"Segoe UI",Arial,sans-serif)}
#ts-whatsapp-agent *{box-sizing:border-box}
.ts-wa-fab{display:flex;align-items:center;gap:9px;min-height:52px;padding:0 16px;border:1px solid rgba(60,220,125,.46);border-radius:999px;background:#0f8f4f;color:#fff;box-shadow:0 12px 34px rgba(0,0,0,.32);font:600 13px/1 var(--font-primary,Inter,"Segoe UI",Arial,sans-serif);cursor:pointer}
.ts-wa-fab svg,.ts-wa-brand svg{width:22px;height:22px;fill:currentColor}.ts-wa-fab i{width:7px;height:7px;border-radius:50%;background:#8ff0b6}
.ts-wa-panel{position:absolute;right:0;bottom:64px;width:min(390px,calc(100vw - 28px));max-height:min(640px,calc(100dvh - 100px));overflow:hidden;border:1px solid rgba(92,218,151,.28);border-radius:20px;background:#07131d;color:#e8f4f1;box-shadow:0 28px 80px rgba(0,0,0,.5)}
.ts-wa-panel[hidden]{display:none!important}.ts-wa-panel>header{display:grid;grid-template-columns:38px minmax(0,1fr) 34px;align-items:center;gap:10px;padding:14px 14px 12px;border-bottom:1px solid rgba(255,255,255,.08);background:linear-gradient(135deg,rgba(15,143,79,.18),rgba(7,19,29,.98))}.ts-wa-brand{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#0f8f4f;color:#fff}.ts-wa-panel header strong{display:block;font-size:14px}.ts-wa-panel header small{display:flex;align-items:center;gap:6px;margin-top:4px;color:#9cb5b0;font-size:10px}.ts-wa-panel header small i{width:6px;height:6px;border-radius:50%;background:#52d78e}.ts-wa-close{width:34px;height:34px;border:0;background:transparent;color:#b8c9c6;font-size:24px;cursor:pointer}.ts-wa-stream{display:grid;gap:9px;max-height:240px;overflow:auto;padding:14px;background:linear-gradient(rgba(9,27,35,.96),rgba(5,18,27,.98))}.ts-wa-msg{max-width:88%;padding:9px 11px;border-radius:13px;font-size:12px;line-height:1.45}.ts-wa-msg p{margin:0}.ts-wa-msg.assistant{justify-self:start;background:#102731;border:1px solid rgba(104,216,159,.13);color:#dbeae7}.ts-wa-msg.user{justify-self:end;background:#0f7044;color:#fff}.ts-wa-msg.is-thinking p{display:flex;gap:4px}.ts-wa-msg.is-thinking span{width:5px;height:5px;border-radius:50%;background:#9bd7bd;animation:tsWaDot 1s infinite}.ts-wa-msg.is-thinking span:nth-child(2){animation-delay:.15s}.ts-wa-msg.is-thinking span:nth-child(3){animation-delay:.3s}.ts-wa-chips{display:flex;gap:6px;padding:10px 12px 0;overflow-x:auto}.ts-wa-chips button{flex:0 0 auto;min-height:32px;padding:6px 9px;border:1px solid rgba(91,209,145,.18);border-radius:999px;background:rgba(72,174,121,.08);color:#bfe0d1;font-size:10px;cursor:pointer}.ts-wa-compose{display:grid;grid-template-columns:minmax(0,1fr) 42px;gap:7px;padding:10px 12px}.ts-wa-compose textarea{width:100%;min-height:42px;max-height:92px;resize:none;border:1px solid rgba(255,255,255,.11);border-radius:12px;background:#0a1b25;color:#eef7f4;padding:10px 11px;font:400 13px/1.35 var(--font-primary,Inter,"Segoe UI",Arial,sans-serif);outline:none}.ts-wa-compose textarea:focus{border-color:rgba(73,207,135,.55)}.ts-wa-compose button{display:grid;place-items:center;width:42px;height:42px;border:0;border-radius:12px;background:#0f8f4f;color:#fff;cursor:pointer}.ts-wa-compose button svg{width:18px}.ts-wa-lead{border-top:1px solid rgba(255,255,255,.07)}.ts-wa-lead summary{padding:11px 13px;color:#b8d7ca;font-size:11px;font-weight:600;cursor:pointer}.ts-wa-lead-form{display:grid;gap:8px;padding:0 12px 12px}.ts-wa-fields{display:grid;grid-template-columns:1fr 1fr;gap:7px}.ts-wa-lead-form label{display:grid;gap:4px;color:#9db4ae;font-size:9px}.ts-wa-lead-form input,.ts-wa-lead-form textarea{width:100%;min-width:0;border:1px solid rgba(255,255,255,.1);border-radius:9px;background:#0a1b25;color:#eef7f4;padding:8px;font:400 11px/1.35 var(--font-primary,Inter,"Segoe UI",Arial,sans-serif)}.ts-wa-consent{display:flex!important;grid-template-columns:none!important;align-items:flex-start;gap:7px!important}.ts-wa-consent input{width:15px;height:15px;flex:0 0 15px;margin-top:1px}.ts-wa-lead-submit{min-height:38px;border:0;border-radius:10px;background:#0f8f4f;color:#fff;font-weight:600;cursor:pointer}.ts-wa-status{color:#9db4ae;font-size:10px;line-height:1.35}.ts-wa-result{display:grid;gap:6px;padding:9px;border:1px solid rgba(91,209,145,.18);border-radius:10px;background:rgba(72,174,121,.07);font-size:10px}.ts-wa-result a,.ts-wa-direct{color:#94e7b8;text-decoration:none}.ts-wa-direct{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 13px;border-top:1px solid rgba(255,255,255,.07);font-size:11px;font-weight:600}.ts-wa-direct svg{width:16px}
@keyframes tsWaDot{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}
@media screen and (max-width:700px){#ts-whatsapp-agent{right:12px;bottom:12px}.ts-wa-fab{width:52px;padding:0;justify-content:center}.ts-wa-fab span,.ts-wa-fab i{display:none}.ts-wa-panel{right:0;bottom:60px;width:min(366px,calc(100vw - 24px));max-height:calc(100dvh - 84px)}.ts-wa-fields{grid-template-columns:1fr}.ts-wa-stream{max-height:210px}}
@media (prefers-reduced-motion:reduce){.ts-wa-msg.is-thinking span{animation:none!important}}


/* TechScales R6 — final Hero diagram paint/readability + responsive CTA continuity.
   Does not change the approved outer Hero boundary, breadcrumb, copy position or desktop grid. */
main#app>[data-page-hero="true"] [data-hero-diagram] text{
  font-family:Arial,"Segoe UI",sans-serif!important;
  font-size:13px!important;
  font-weight:400!important;
  fill:#94aeb4!important;
  letter-spacing:0!important;
  stroke:none!important;
  stroke-width:0!important;
  text-shadow:none!important;
  filter:none!important;
  opacity:1!important;
  paint-order:normal!important;
  text-rendering:optimizeLegibility!important;
}
main#app>[data-page-hero="true"] [data-hero-diagram] .hd-sub{
  font-size:9.5px!important;
  font-weight:400!important;
  fill:#748f96!important;
  letter-spacing:.008em!important;
  opacity:1!important;
}
main#app>[data-page-hero="true"] [data-hero-diagram] .hd-caption{
  font-size:9.5px!important;
  font-weight:400!important;
  fill:#708a91!important;
  letter-spacing:.012em!important;
  opacity:1!important;
}
main#app>[data-page-hero="true"] [data-hero-diagram] .hd-core text:not(.hd-sub),
main#app>[data-page-hero="true"] [data-hero-diagram] .hd-home-core text:not(.hd-sub),
main#app>[data-page-hero="true"] [data-hero-diagram] .hd-service-core text:not(.hd-sub),
main#app>[data-page-hero="true"] [data-hero-diagram] .hd-agent-core text:not(.hd-sub),
main#app>[data-page-hero="true"] [data-hero-diagram] .hd-contact-core text:not(.hd-sub),
main#app>[data-page-hero="true"] [data-hero-diagram] .hd-about-core text:not(.hd-sub){fill:#a9bdc2!important;font-weight:400!important}
main#app>[data-page-hero="true"] [data-hero-diagram] .hd-signal,
main#app>[data-page-hero="true"] [data-hero-diagram] .hd-motion-dot,
main#app>[data-page-hero="true"] [data-hero-diagram] .hd-motion-dot-secondary{
  r:3px!important;
  fill:#4f9da7!important;
  opacity:.34!important;
  filter:none!important;
}
main#app>[data-page-hero="true"] [data-hero-diagram] .hd-node rect,
main#app>[data-page-hero="true"] [data-hero-diagram] .hd-capability rect,
main#app>[data-page-hero="true"] [data-hero-diagram] .hd-channel rect,
main#app>[data-page-hero="true"] [data-hero-diagram] .hd-pillar rect{
  animation-name:hdNodeEdgeR6!important;
  animation-duration:5.2s!important;
}
@keyframes hdNodeEdgeR6{0%,100%{stroke-opacity:.25;fill-opacity:.84}50%{stroke-opacity:.52;fill-opacity:.9}}
main#app>[data-page-hero="true"] [data-hero-diagram]::before,
main#app>[data-page-hero="true"] [data-hero-diagram]::after{filter:none!important}
main#app>[data-page-hero="true"] .services-network .hd-service-core rect,
main#app>[data-page-hero="true"] .home-system-map .hd-home-core circle,
main#app>[data-page-hero="true"] .agent-network .hd-agent-core circle,
main#app>[data-page-hero="true"] .founder-network .hd-founder-source circle,
main#app>[data-page-hero="true"] .virtual-ads-network .hd-creative-feature rect{filter:none!important}
main#app>[data-page-hero="true"] .delivery-network svg{transform:scale(1.08);transform-origin:50% 50%}
main#app>[data-page-hero="true"] .work-network svg{transform:scale(1.06);transform-origin:50% 50%}
main#app>[data-page-hero="true"] .contact-network svg{transform:scale(1.06);transform-origin:50% 50%}
main#app>[data-page-hero="true"] .services-network svg{transform:scale(1.025);transform-origin:50% 50%}
@media screen and (max-width:700px){
  main#app>[data-page-hero="true"] [data-hero-diagram] text{font-size:14px!important}
  main#app>[data-page-hero="true"] [data-hero-diagram] .hd-sub,
  main#app>[data-page-hero="true"] [data-hero-diagram] .hd-caption{font-size:10.5px!important}
  main#app>[data-page-hero="true"] .delivery-network svg,
  main#app>[data-page-hero="true"] .work-network svg,
  main#app>[data-page-hero="true"] .contact-network svg,
  main#app>[data-page-hero="true"] .services-network svg{transform:scale(1.02)}
}
/* Remove the 700/701 CTA cliff. Keep narrow Hero actions readable until there is enough inline room. */
@media screen and (min-width:701px) and (max-width:860px){
  main#app>[data-page-hero="true"] [data-hero-copy="true"] .hero-actions{display:grid!important;grid-template-columns:1fr!important;max-width:520px!important;gap:9px!important}
  main#app>[data-page-hero="true"] [data-hero-copy="true"] .hero-actions .btn,
  main#app>[data-page-hero="true"] [data-hero-copy="true"] .hero-actions .text-btn,
  main#app>[data-page-hero="true"] [data-hero-copy="true"] .hero-actions button{width:100%!important;min-width:0!important;max-width:100%!important;justify-content:center!important;white-space:normal!important}
}
@media screen and (min-width:861px) and (max-width:1080px){
  main#app>[data-page-hero="true"] [data-hero-copy="true"] .hero-actions{display:flex!important;flex-wrap:wrap!important}
  main#app>[data-page-hero="true"] [data-hero-copy="true"] .hero-actions .btn,
  main#app>[data-page-hero="true"] [data-hero-copy="true"] .hero-actions .text-btn,
  main#app>[data-page-hero="true"] [data-hero-copy="true"] .hero-actions button{width:auto!important;max-width:100%!important;white-space:nowrap!important}
}

/* TechScales R6 — compact, single-scroll WhatsApp agent. */
#ts-whatsapp-agent{position:fixed!important;right:18px!important;bottom:max(18px,env(safe-area-inset-bottom,0px))!important;z-index:2100!important;pointer-events:none!important;font-family:var(--font-primary,Inter,"Segoe UI",Arial,sans-serif)!important}
#ts-whatsapp-agent *{box-sizing:border-box}
.ts-wa-fab{pointer-events:auto!important;display:grid!important;place-items:center!important;width:50px!important;height:50px!important;min-width:50px!important;min-height:50px!important;padding:0!important;border:1px solid rgba(72,221,138,.52)!important;border-radius:50%!important;background:#128c4d!important;color:#fff!important;box-shadow:0 10px 28px rgba(0,0,0,.3)!important;cursor:pointer!important;transition:opacity .16s ease,transform .16s ease,visibility .16s ease!important}
.ts-wa-fab svg{width:23px!important;height:23px!important;fill:currentColor!important}.ts-wa-fab:hover{transform:translateY(-2px)!important}
#ts-whatsapp-agent.is-open .ts-wa-fab{opacity:0!important;visibility:hidden!important;pointer-events:none!important;transform:scale(.9)!important}
.ts-wa-panel{pointer-events:auto!important;position:fixed!important;right:18px!important;bottom:max(18px,env(safe-area-inset-bottom,0px))!important;display:flex!important;flex-direction:column!important;width:min(360px,calc(100vw - 32px))!important;max-height:min(548px,calc(100dvh - 36px))!important;overflow:hidden!important;border:1px solid rgba(92,218,151,.26)!important;border-radius:18px!important;background:#07131d!important;color:#e8f4f1!important;box-shadow:0 24px 70px rgba(0,0,0,.46)!important}
.ts-wa-panel[hidden]{display:none!important}
.ts-wa-panel>header{flex:0 0 auto!important;display:grid!important;grid-template-columns:36px minmax(0,1fr) 32px!important;align-items:center!important;gap:9px!important;padding:12px!important;border-bottom:1px solid rgba(255,255,255,.075)!important;background:linear-gradient(135deg,rgba(18,140,77,.15),rgba(7,19,29,.98))!important}
.ts-wa-brand{display:grid!important;place-items:center!important;width:36px!important;height:36px!important;border-radius:50%!important;background:#128c4d!important;color:#fff!important}.ts-wa-brand svg{width:20px!important;height:20px!important;fill:currentColor!important}.ts-wa-panel header strong{display:block!important;font-size:13px!important;font-weight:650!important}.ts-wa-panel header small{display:flex!important;align-items:center!important;gap:5px!important;margin-top:3px!important;color:#9cb5b0!important;font-size:9.5px!important}.ts-wa-panel header small i{width:5px!important;height:5px!important;border-radius:50%!important;background:#52d78e!important}.ts-wa-close{width:32px!important;height:32px!important;border:0!important;background:transparent!important;color:#b8c9c6!important;font-size:22px!important;cursor:pointer!important}
.ts-wa-body{min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important;scrollbar-width:thin!important}
.ts-wa-stream{display:grid!important;gap:9px!important;padding:12px 12px 5px!important;overflow:visible!important;background:linear-gradient(rgba(9,27,35,.96),rgba(5,18,27,.98))!important}
.ts-wa-msg{max-width:88%!important;padding:9px 10px!important;border-radius:13px!important;font-size:11.5px!important;line-height:1.45!important;overflow-wrap:anywhere!important}.ts-wa-msg p{margin:0!important}.ts-wa-msg.assistant{justify-self:start!important;background:#102731!important;border:1px solid rgba(104,216,159,.11)!important;color:#d9e7e4!important}.ts-wa-msg.user{justify-self:end!important;background:#0e7043!important;color:#fff!important}.ts-wa-msg.is-thinking p{display:flex!important;gap:4px!important}.ts-wa-msg.is-thinking span{width:5px!important;height:5px!important;border-radius:50%!important;background:#9bd7bd!important;animation:tsWaDot 1s infinite!important}.ts-wa-msg.is-thinking span:nth-child(2){animation-delay:.15s!important}.ts-wa-msg.is-thinking span:nth-child(3){animation-delay:.3s!important}
.ts-wa-msg-actions{display:flex!important;flex-wrap:wrap!important;gap:6px!important;margin-top:8px!important}.ts-wa-msg-actions button,.ts-wa-msg-actions a{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:28px!important;padding:5px 8px!important;border:1px solid rgba(92,211,147,.22)!important;border-radius:8px!important;background:rgba(47,143,91,.11)!important;color:#aee0c5!important;text-decoration:none!important;font:600 9.5px/1.15 var(--font-primary,Inter,"Segoe UI",Arial,sans-serif)!important;cursor:pointer!important}
.ts-wa-chips{display:flex!important;flex-wrap:wrap!important;gap:6px!important;padding:9px 12px 2px!important;overflow:visible!important}.ts-wa-chips button{flex:0 1 auto!important;min-width:0!important;min-height:29px!important;padding:5px 8px!important;border:1px solid rgba(91,209,145,.17)!important;border-radius:8px!important;background:rgba(72,174,121,.07)!important;color:#b9d8cb!important;font-size:9.5px!important;white-space:normal!important;cursor:pointer!important}
.ts-wa-compose{display:grid!important;grid-template-columns:minmax(0,1fr) 40px!important;gap:7px!important;padding:9px 12px!important}.ts-wa-compose textarea{width:100%!important;min-height:40px!important;max-height:82px!important;resize:none!important;border:1px solid rgba(255,255,255,.1)!important;border-radius:11px!important;background:#0a1b25!important;color:#eef7f4!important;padding:9px 10px!important;font:400 12px/1.35 var(--font-primary,Inter,"Segoe UI",Arial,sans-serif)!important;outline:none!important}.ts-wa-compose textarea:focus{border-color:rgba(73,207,135,.48)!important}.ts-wa-compose button{display:grid!important;place-items:center!important;width:40px!important;height:40px!important;border:0!important;border-radius:11px!important;background:#128c4d!important;color:#fff!important;cursor:pointer!important}.ts-wa-compose button svg{width:17px!important}
.ts-wa-lead,.ts-wa-booking{border-top:1px solid rgba(255,255,255,.065)!important}.ts-wa-lead summary,.ts-wa-booking summary{padding:10px 12px!important;color:#b5d0c5!important;font-size:10.5px!important;font-weight:600!important;cursor:pointer!important;list-style-position:inside!important}.ts-wa-lead-form,.ts-wa-booking-form{display:grid!important;gap:8px!important;padding:1px 12px 12px!important}.ts-wa-fields{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important}.ts-wa-lead-form label,.ts-wa-booking-form label{display:grid!important;gap:4px!important;color:#97aea8!important;font-size:9px!important}.ts-wa-lead-form input,.ts-wa-lead-form textarea,.ts-wa-booking-form input,.ts-wa-booking-form textarea,.ts-wa-booking-form select{width:100%!important;min-width:0!important;border:1px solid rgba(255,255,255,.095)!important;border-radius:8px!important;background:#0a1b25!important;color:#edf6f3!important;padding:7px 8px!important;font:400 10.5px/1.35 var(--font-primary,Inter,"Segoe UI",Arial,sans-serif)!important}.ts-wa-consent{display:flex!important;align-items:flex-start!important;gap:7px!important}.ts-wa-consent input{width:14px!important;height:14px!important;flex:0 0 14px!important;margin-top:1px!important}.ts-wa-lead-submit,.ts-wa-booking-submit{min-height:36px!important;border:0!important;border-radius:9px!important;background:#128c4d!important;color:#fff!important;font-weight:600!important;cursor:pointer!important}.ts-wa-status,.ts-wa-booking-status{color:#9db4ae!important;font-size:9.5px!important;line-height:1.35!important}.ts-wa-result,.ts-wa-booking-result{display:grid!important;gap:5px!important;padding:8px!important;border:1px solid rgba(91,209,145,.17)!important;border-radius:9px!important;background:rgba(72,174,121,.06)!important;font-size:9.5px!important}.ts-wa-result[hidden],.ts-wa-booking-result[hidden]{display:none!important}.ts-wa-result a,.ts-wa-booking-result a,.ts-wa-direct{color:#93dfb3!important;text-decoration:none!important}.ts-wa-direct{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;padding:9px 12px!important;border-top:1px solid rgba(255,255,255,.065)!important;font-size:10px!important;font-weight:600!important}.ts-wa-direct svg{width:15px!important}
@media screen and (max-width:1080px){#ts-whatsapp-agent{right:12px!important;bottom:max(12px,env(safe-area-inset-bottom,0px))!important}.ts-wa-fab{width:46px!important;height:46px!important;min-width:46px!important;min-height:46px!important}.ts-wa-panel{right:10px!important;bottom:max(10px,env(safe-area-inset-bottom,0px))!important;width:min(348px,calc(100vw - 20px))!important;max-height:min(520px,calc(100dvh - 20px))!important}}
@media screen and (max-width:700px){#ts-whatsapp-agent{right:10px!important;bottom:max(10px,env(safe-area-inset-bottom,0px))!important}.ts-wa-fab{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important}.ts-wa-panel{left:8px!important;right:8px!important;bottom:max(8px,env(safe-area-inset-bottom,0px))!important;width:auto!important;max-height:min(68dvh,560px)!important;border-radius:16px!important}.ts-wa-fields{grid-template-columns:1fr!important}.ts-wa-msg{max-width:92%!important}.ts-wa-chips button{font-size:9px!important}.ts-wa-panel>header{padding:10px 11px!important}}
@media (prefers-reduced-motion:reduce){.ts-wa-msg.is-thinking span{animation:none!important}.ts-wa-fab{transition:none!important}}


/* ==========================================================================\n   TECHSCALES R7 — FINAL VISUAL + WHATSAPP AGENT CORRECTION LAYER\n   Scope: diagram internals/readability, responsive CTA continuity, mobile menu\n   opacity, Planner icon treatment, and one coherent WhatsApp agent layout.\n   Outer approved Hero geometry remains untouched.\n   ========================================================================== */

/* Official transparent brand assets: never paint an image background. */
#site-header .brand img,#site-header .mobile-direct-brand img,#site-footer .footer-brand .brand img{background:transparent!important;box-shadow:none!important;border:0!important;object-fit:contain!important}
main .consultant-section .planner-brand-mark,main .consultant-section .planner-assistant-avatar{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;overflow:visible!important}
main .consultant-section .planner-brand-mark img,main .consultant-section .planner-assistant-avatar img,main .consultant-section .planner-voice-orb img{background:transparent!important;filter:none!important;object-fit:contain!important}
main .consultant-section .planner-brand-mark img{width:31px!important;height:31px!important}
main .consultant-section .planner-assistant-avatar img{width:32px!important;height:32px!important}

/* Crisp diagram text: enough contrast to read, but no glow/bold bloom. */
main#app>[data-page-hero="true"] [data-hero-diagram] text{font-family:Inter,"Segoe UI",Arial,sans-serif!important;font-size:13.5px!important;font-weight:500!important;fill:#b7cbd0!important;letter-spacing:.005em!important;stroke:none!important;stroke-width:0!important;text-shadow:none!important;filter:none!important;opacity:1!important;paint-order:normal!important;text-rendering:geometricPrecision!important}
main#app>[data-page-hero="true"] [data-hero-diagram] .hd-sub{font-size:10px!important;font-weight:450!important;fill:#89a6ad!important;letter-spacing:.006em!important}
main#app>[data-page-hero="true"] [data-hero-diagram] .hd-caption{font-size:10px!important;font-weight:450!important;fill:#829fa6!important;letter-spacing:.008em!important}
main#app>[data-page-hero="true"] [data-hero-diagram] .hd-core text:not(.hd-sub),main#app>[data-page-hero="true"] [data-hero-diagram] .hd-home-core text:not(.hd-sub),main#app>[data-page-hero="true"] [data-hero-diagram] .hd-service-core text:not(.hd-sub),main#app>[data-page-hero="true"] [data-hero-diagram] .hd-agent-core text:not(.hd-sub),main#app>[data-page-hero="true"] [data-hero-diagram] .hd-contact-core text:not(.hd-sub),main#app>[data-page-hero="true"] [data-hero-diagram] .hd-about-core text:not(.hd-sub){fill:#c6d9dd!important;font-weight:550!important}
main#app>[data-page-hero="true"] [data-hero-diagram] .hd-signal,main#app>[data-page-hero="true"] [data-hero-diagram] .hd-motion-dot,main#app>[data-page-hero="true"] [data-hero-diagram] .hd-motion-dot-secondary{r:2.35px!important;fill:#69b9c2!important;opacity:.25!important;filter:none!important;box-shadow:none!important}
main#app>[data-page-hero="true"] [data-hero-diagram] .hd-wire-live{stroke-opacity:.52!important}
main#app>[data-page-hero="true"] [data-hero-diagram] .hd-node rect,main#app>[data-page-hero="true"] [data-hero-diagram] .hd-capability rect,main#app>[data-page-hero="true"] [data-hero-diagram] .hd-channel rect,main#app>[data-page-hero="true"] [data-hero-diagram] .hd-pillar rect{animation:none!important;stroke-opacity:.45!important;fill-opacity:.88!important}

/* Normalize visual presence by scaling only the SVG artwork inside the existing safe-zone. */
main#app>[data-page-hero="true"] [data-hero-diagram="contact"] svg{transform:scale(1.14)!important;transform-origin:50% 50%!important}
main#app>[data-page-hero="true"] [data-hero-diagram="delivery"] svg{transform:scale(1.13)!important;transform-origin:50% 50%!important}
main#app>[data-page-hero="true"] [data-hero-diagram="work"] svg{transform:scale(1.09)!important;transform-origin:50% 50%!important}
main#app>[data-page-hero="true"] [data-hero-diagram="services"] svg{transform:scale(1.06)!important;transform-origin:50% 50%!important}
main#app>[data-page-hero="true"] [data-hero-diagram="ai-agents"] svg{transform:scale(1.055)!important;transform-origin:50% 50%!important}

/* 701–860px: two readable CTA columns instead of one very tall stack or tiny columns. */
@media screen and (min-width:701px) and (max-width:860px){
  main#app>[data-page-hero="true"] [data-hero-copy="true"] .hero-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;max-width:560px!important;gap:8px!important}
  main#app>[data-page-hero="true"] [data-hero-copy="true"] .hero-actions .btn,main#app>[data-page-hero="true"] [data-hero-copy="true"] .hero-actions .text-btn,main#app>[data-page-hero="true"] [data-hero-copy="true"] .hero-actions button{width:100%!important;min-width:0!important;max-width:none!important;min-height:42px!important;padding:8px 11px!important;justify-content:center!important;white-space:normal!important;font-size:12px!important;line-height:1.22!important}
}
@media screen and (max-width:700px){
  main#app>[data-page-hero="true"] [data-hero-diagram] text{font-size:15px!important;font-weight:500!important}
  main#app>[data-page-hero="true"] [data-hero-diagram] .hd-sub,main#app>[data-page-hero="true"] [data-hero-diagram] .hd-caption{font-size:11.5px!important;font-weight:450!important}
  main#app>[data-page-hero="true"] [data-hero-diagram="contact"] svg,main#app>[data-page-hero="true"] [data-hero-diagram="delivery"] svg{transform:scale(1.11)!important}
  main#app>[data-page-hero="true"] [data-hero-diagram="work"] svg,main#app>[data-page-hero="true"] [data-hero-diagram="services"] svg,main#app>[data-page-hero="true"] [data-hero-diagram="ai-agents"] svg{transform:scale(1.06)!important}
  main#app>[data-page-hero="true"] [data-hero-copy="true"] .hero-actions{gap:7px!important}
  main#app>[data-page-hero="true"] [data-hero-copy="true"] .hero-actions .btn,main#app>[data-page-hero="true"] [data-hero-copy="true"] .hero-actions .text-btn,main#app>[data-page-hero="true"] [data-hero-copy="true"] .hero-actions button{min-height:41px!important}
}

/* Mobile mega menu must be opaque enough that Hero copy does not bleed through. */
@media screen and (max-width:1080px){
  #site-header .mobile-mega-panel{background:#07111b!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:0 18px 46px rgba(0,0,0,.48)!important}
  body.mobile-mega-open #ts-whatsapp-agent .ts-wa-fab,#site-header.menu-open~#ts-whatsapp-agent .ts-wa-fab{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
}

/* R7 WhatsApp agent — fixed shell, one scrollable transcript, fixed composer. */
#ts-whatsapp-agent{position:fixed!important;right:18px!important;bottom:max(18px,env(safe-area-inset-bottom,0px))!important;z-index:2100!important;pointer-events:none!important;font-family:var(--font-primary,Inter,"Segoe UI",Arial,sans-serif)!important}
#ts-whatsapp-agent *{box-sizing:border-box!important}
.ts-wa-fab{pointer-events:auto!important;display:grid!important;place-items:center!important;width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important;padding:0!important;border:1px solid rgba(72,221,138,.46)!important;border-radius:50%!important;background:#128c4d!important;color:#fff!important;box-shadow:0 9px 24px rgba(0,0,0,.28)!important;cursor:pointer!important;transition:opacity .16s ease,transform .16s ease,visibility .16s ease!important}
.ts-wa-fab svg{width:22px!important;height:22px!important;fill:currentColor!important}
#ts-whatsapp-agent.is-open .ts-wa-fab,#ts-whatsapp-agent.is-suppressed .ts-wa-fab{opacity:0!important;visibility:hidden!important;pointer-events:none!important;transform:scale(.9)!important}
.ts-wa-panel{pointer-events:auto!important;position:fixed!important;right:18px!important;bottom:max(18px,env(safe-area-inset-bottom,0px))!important;display:flex!important;flex-direction:column!important;width:min(374px,calc(100vw - 32px))!important;height:min(580px,calc(100dvh - 36px))!important;max-height:min(580px,calc(100dvh - 36px))!important;overflow:hidden!important;border:1px solid rgba(92,218,151,.24)!important;border-radius:18px!important;background:#07131d!important;color:#e8f4f1!important;box-shadow:0 24px 70px rgba(0,0,0,.48)!important}
.ts-wa-panel[hidden]{display:none!important}
.ts-wa-panel>header{flex:0 0 auto!important;display:grid!important;grid-template-columns:36px minmax(0,1fr) 32px!important;align-items:center!important;gap:9px!important;padding:11px 12px!important;border-bottom:1px solid rgba(255,255,255,.075)!important;background:linear-gradient(135deg,rgba(18,140,77,.16),#07131d 70%)!important}
.ts-wa-brand{display:grid!important;place-items:center!important;width:36px!important;height:36px!important;border-radius:50%!important;background:#128c4d!important;color:#fff!important}.ts-wa-brand svg{width:20px!important;height:20px!important;fill:currentColor!important}.ts-wa-panel header strong{display:block!important;font-size:13px!important;font-weight:650!important}.ts-wa-panel header small{display:flex!important;align-items:center!important;gap:5px!important;margin-top:3px!important;color:#9cb5b0!important;font-size:9.5px!important}.ts-wa-panel header small i{width:5px!important;height:5px!important;border-radius:50%!important;background:#52d78e!important}.ts-wa-close{width:32px!important;height:32px!important;border:0!important;background:transparent!important;color:#b8c9c6!important;font-size:22px!important;cursor:pointer!important}
.ts-wa-main{flex:1 1 auto!important;min-height:0!important;display:grid!important;grid-template-rows:minmax(0,1fr) auto!important;overflow:hidden!important}
.ts-wa-transcript{min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important;scrollbar-width:thin!important;display:flex!important;flex-direction:column!important;gap:9px!important;padding:12px!important;background:linear-gradient(rgba(9,27,35,.97),rgba(5,18,27,.99))!important}
.ts-wa-msg{flex:0 0 auto!important;max-width:88%!important;padding:9px 10px!important;border-radius:13px!important;font-size:11.5px!important;line-height:1.45!important;overflow-wrap:anywhere!important;position:static!important;transform:none!important}.ts-wa-msg p{margin:0!important}.ts-wa-msg.assistant{align-self:flex-start!important;background:#102731!important;border:1px solid rgba(104,216,159,.11)!important;color:#d9e7e4!important}.ts-wa-msg.user{align-self:flex-end!important;background:#0e7043!important;color:#fff!important}.ts-wa-msg.is-thinking{opacity:.65!important}
.ts-wa-msg-actions{display:flex!important;flex-wrap:wrap!important;gap:6px!important;margin-top:8px!important}.ts-wa-msg-actions button,.ts-wa-msg-actions a{position:static!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:30px!important;padding:5px 8px!important;border:1px solid rgba(92,211,147,.22)!important;border-radius:8px!important;background:rgba(47,143,91,.11)!important;color:#aee0c5!important;text-decoration:none!important;font:600 9.5px/1.2 var(--font-primary,Inter,"Segoe UI",Arial,sans-serif)!important;cursor:pointer!important}
.ts-wa-composer{flex:0 0 auto!important;position:static!important;display:grid!important;grid-template-columns:minmax(0,1fr) 40px!important;gap:7px!important;padding:9px 10px!important;border-top:1px solid rgba(255,255,255,.075)!important;background:#07131d!important;z-index:2!important}.ts-wa-composer textarea{width:100%!important;min-height:42px!important;max-height:86px!important;resize:none!important;border:1px solid rgba(255,255,255,.11)!important;border-radius:11px!important;background:#0a1b25!important;color:#eef7f4!important;padding:9px 10px!important;font:400 12px/1.35 var(--font-primary,Inter,"Segoe UI",Arial,sans-serif)!important;outline:none!important}.ts-wa-composer textarea:focus{border-color:rgba(73,207,135,.5)!important}.ts-wa-composer button{position:static!important;display:grid!important;place-items:center!important;width:40px!important;height:42px!important;border:0!important;border-radius:11px!important;background:#128c4d!important;color:#fff!important;cursor:pointer!important}.ts-wa-composer button svg{width:17px!important}
.ts-wa-flow-card{flex:0 0 auto!important;position:static!important;display:block!important;width:100%!important;margin:2px 0!important;padding:10px!important;border:1px solid rgba(86,195,139,.19)!important;border-radius:12px!important;background:#0a1d27!important;color:#dceae6!important;z-index:auto!important}.ts-wa-flow-card form{display:grid!important;gap:8px!important;margin:0!important}.ts-wa-flow-kicker{margin-bottom:6px!important;color:#7ebf9c!important;font-size:9px!important;font-weight:700!important;letter-spacing:.08em!important;text-transform:uppercase!important}.ts-wa-flow-card strong{display:block!important;margin-bottom:5px!important;font-size:12px!important}.ts-wa-flow-card p{margin:5px 0!important;font-size:10.5px!important;line-height:1.4!important;color:#afc4bf!important}.ts-wa-flow-card label{display:grid!important;gap:5px!important;color:#a8beb8!important;font-size:9.5px!important}.ts-wa-flow-card input,.ts-wa-flow-card textarea,.ts-wa-flow-card select{position:static!important;width:100%!important;min-width:0!important;min-height:38px!important;border:1px solid rgba(255,255,255,.11)!important;border-radius:8px!important;background:#071720!important;color:#eef7f4!important;padding:8px 9px!important;font:400 11px/1.35 var(--font-primary,Inter,"Segoe UI",Arial,sans-serif)!important}.ts-wa-flow-card textarea{min-height:72px!important;resize:vertical!important}.ts-wa-flow-card select{appearance:auto!important}.ts-wa-check{display:flex!important;align-items:flex-start!important;gap:7px!important;font-size:10px!important;line-height:1.35!important;color:#b5c9c4!important}.ts-wa-check input{flex:0 0 15px!important;width:15px!important;height:15px!important;min-height:15px!important;margin-top:1px!important;padding:0!important}.ts-wa-flow-actions{display:flex!important;flex-wrap:wrap!important;gap:7px!important;margin-top:2px!important}.ts-wa-flow-actions button,.ts-wa-flow-actions a{position:static!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:34px!important;padding:7px 10px!important;border:1px solid rgba(85,204,139,.25)!important;border-radius:8px!important;background:#128c4d!important;color:#fff!important;text-decoration:none!important;font:600 10px/1.2 var(--font-primary,Inter,"Segoe UI",Arial,sans-serif)!important;cursor:pointer!important}.ts-wa-flow-actions button+button,.ts-wa-flow-actions a{background:rgba(60,135,95,.09)!important;color:#acd7c0!important}.ts-wa-flow-note,.ts-wa-flow-status{display:block!important;color:#9eb5af!important;font-size:9.5px!important;line-height:1.35!important}

@media screen and (max-width:1080px){#ts-whatsapp-agent{right:12px!important;bottom:max(12px,env(safe-area-inset-bottom,0px))!important}.ts-wa-panel{right:10px!important;bottom:max(10px,env(safe-area-inset-bottom,0px))!important;width:min(360px,calc(100vw - 20px))!important;height:min(560px,calc(100dvh - 20px))!important;max-height:min(560px,calc(100dvh - 20px))!important}}
@media screen and (max-width:700px){#ts-whatsapp-agent{right:9px!important;bottom:max(9px,env(safe-area-inset-bottom,0px))!important}.ts-wa-fab{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important}.ts-wa-panel{left:8px!important;right:8px!important;bottom:max(8px,env(safe-area-inset-bottom,0px))!important;width:auto!important;height:min(76svh,590px)!important;max-height:min(76svh,590px)!important;border-radius:16px!important}.ts-wa-panel>header{padding:10px!important}.ts-wa-msg{max-width:94%!important;font-size:11.5px!important}.ts-wa-transcript{padding:10px!important}.ts-wa-composer{padding:8px!important}.ts-wa-flow-actions>*{flex:1 1 130px!important;min-height:40px!important}}
@media (prefers-reduced-motion:reduce){.ts-wa-fab{transition:none!important}}


/* ==========================================================================
   TECHSCALES R8 — TWO-FAMILY RESPONSIVE HERO + DIAGRAM FIT + AGENT SHELL
   Authoritative responsive contract:
     A) 0–1080px
     B) 1081px and above
   No intermediate R8 breakpoint is permitted.
   ========================================================================== */

/* Shared invariants across both families. */
#site-header .brand img,#site-header .mobile-direct-brand img,#site-footer .footer-brand .brand img{
  background:transparent!important;border:0!important;box-shadow:none!important;object-fit:contain!important;
}
main#app>[data-page-hero="true"]{overflow:hidden!important}
main#app>[data-page-hero="true"]>[data-hero-breadcrumb],
main#app>[data-page-hero="true"]>[data-hero-body="true"],
main#app>[data-page-hero="true"] [data-hero-copy="true"]{min-width:0!important}
main#app>[data-page-hero="true"] [data-hero-copy="true"] .hero-eyebrow b,
main#app>[data-page-hero="true"] [data-hero-copy="true"] .hero-eyebrow i{font:inherit!important;color:inherit!important;font-style:normal!important}
main#app>[data-page-hero="true"] [data-hero-visual-root="true"],
main#app>[data-page-hero="true"] [data-hero-diagram]{overflow:hidden!important}
main#app>[data-page-hero="true"] [data-hero-diagram] svg{
  inset:0!important;width:100%!important;height:100%!important;overflow:hidden!important;transform:none!important;transform-origin:50% 50%!important;
}
main#app>[data-page-hero="true"] [data-hero-diagram] text{
  font-family:Inter,"Segoe UI",Arial,sans-serif!important;font-weight:560!important;fill:#c4d7dc!important;letter-spacing:0!important;stroke:none!important;filter:none!important;text-shadow:none!important;opacity:1!important;text-rendering:geometricPrecision!important;
}
main#app>[data-page-hero="true"] [data-hero-diagram] .hd-sub,
main#app>[data-page-hero="true"] [data-hero-diagram] .hd-caption{font-weight:500!important;fill:#91adb4!important;letter-spacing:.004em!important}
main#app>[data-page-hero="true"] [data-hero-diagram] .hd-signal,
main#app>[data-page-hero="true"] [data-hero-diagram] .hd-motion-dot,
main#app>[data-page-hero="true"] [data-hero-diagram] .hd-motion-dot-secondary{fill:#70c8d1!important;opacity:.32!important;filter:none!important}
main#app>[data-page-hero="true"] [data-hero-diagram] .hd-node rect,
main#app>[data-page-hero="true"] [data-hero-diagram] .hd-capability rect,
main#app>[data-page-hero="true"] [data-hero-diagram] .hd-channel rect,
main#app>[data-page-hero="true"] [data-hero-diagram] .hd-pillar rect{animation:none!important;stroke-opacity:.48!important;fill-opacity:.9!important}

/* A) One unified phone + tablet family: 0–1080px. */
@media screen and (max-width:1080px){
  :root{
    --ts-public-gutter:clamp(10px,2.2vw,20px)!important;
    --ts-hero-top-gap:12px!important;
    --ts-hero-inline:clamp(16px,4vw,32px)!important;
    --ts-hero-block:clamp(22px,4vw,32px)!important;
    --ts-hero-breadcrumb-gap:14px!important;
    --ts-hero-eyebrow-gap:13px!important;
    --ts-hero-title-gap:14px!important;
    --ts-hero-actions-gap:18px!important;
  }
  main#app>[data-page-hero="true"]{
    width:min(calc(100% - (var(--ts-public-gutter) * 2)),var(--ts-page-max))!important;
    margin:var(--ts-hero-top-gap) auto 0!important;
    padding:var(--ts-hero-block) var(--ts-hero-inline)!important;
    border-radius:20px!important;
  }
  main#app>[data-page-hero="true"]>[data-hero-breadcrumb]{
    margin:0 0 var(--ts-hero-breadcrumb-gap)!important;font-size:clamp(10px,1.45vw,12px)!important;line-height:1.35!important;
  }
  main#app>[data-page-hero="true"]>[data-hero-body="true"]{
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto!important;align-items:start!important;gap:clamp(18px,3vw,26px)!important;
  }
  main#app>[data-page-hero="true"] [data-hero-copy="true"]{grid-column:1!important;grid-row:auto!important;width:100%!important;max-width:none!important}
  main#app>[data-page-hero="true"] [data-hero-copy="true"] .eyebrow{
    margin:0 0 var(--ts-hero-eyebrow-gap)!important;font-size:clamp(9.5px,1.45vw,12px)!important;line-height:1.35!important;letter-spacing:.12em!important;
  }
  main#app>[data-page-hero="true"] h1{
    width:100%!important;max-width:850px!important;margin:0 0 var(--ts-hero-title-gap)!important;font-size:clamp(34px,7vw,62px)!important;line-height:.99!important;letter-spacing:-.035em!important;
  }
  main#app>[data-page-hero="true"] [data-hero-copy="true"]>p,
  main#app>[data-page-hero="true"] [data-hero-copy="true"]>.hero-lead{
    width:100%!important;max-width:760px!important;margin:0!important;font-size:clamp(14px,2vw,17px)!important;line-height:1.52!important;
  }
  main#app>[data-page-hero="true"] [data-hero-copy="true"] .hero-actions{
    display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))!important;width:100%!important;max-width:680px!important;gap:8px!important;margin-top:var(--ts-hero-actions-gap)!important;
  }
  main#app>[data-page-hero="true"] [data-hero-copy="true"] .hero-actions .btn,
  main#app>[data-page-hero="true"] [data-hero-copy="true"] .hero-actions .text-btn,
  main#app>[data-page-hero="true"] [data-hero-copy="true"] .hero-actions button{
    width:100%!important;min-width:0!important;max-width:none!important;min-height:42px!important;padding:8px 11px!important;justify-content:center!important;white-space:normal!important;font-size:12px!important;line-height:1.22!important;
  }
  main#app>[data-page-hero="true"] .trust-line{display:flex!important;flex-wrap:wrap!important;gap:7px 12px!important;margin-top:16px!important;font-size:10px!important}
  main#app>[data-page-hero="true"] [data-hero-visual-root="true"]{
    grid-column:1!important;grid-row:auto!important;display:grid!important;place-items:center!important;width:100%!important;min-width:0!important;min-height:clamp(220px,52vw,360px)!important;height:auto!important;max-height:380px!important;margin:0!important;align-self:start!important;
  }
  main#app>[data-page-hero="true"] [data-hero-visual-root="true"]>.hero-diagram{
    position:relative!important;width:100%!important;max-width:760px!important;min-height:clamp(220px,52vw,360px)!important;height:auto!important;aspect-ratio:12/7!important;margin:0 auto!important;
  }
  main#app>[data-page-hero="true"] [data-hero-diagram] text{font-size:clamp(8.8px,1.38vw,12px)!important}
  main#app>[data-page-hero="true"] [data-hero-diagram] .hd-sub,
  main#app>[data-page-hero="true"] [data-hero-diagram] .hd-caption{font-size:clamp(7.3px,1.04vw,9.2px)!important}

  /* Same compact WhatsApp shell across every 0–1080 viewport. */
  #ts-whatsapp-agent{right:10px!important;bottom:max(10px,env(safe-area-inset-bottom,0px))!important}
  .ts-wa-fab{width:46px!important;height:46px!important;min-width:46px!important;min-height:46px!important}
  .ts-wa-panel{
    left:auto!important;right:10px!important;bottom:max(10px,env(safe-area-inset-bottom,0px))!important;width:min(390px,calc(100vw - 20px))!important;height:min(70dvh,600px)!important;max-height:min(70dvh,600px)!important;border-radius:16px!important;
  }
  .ts-wa-panel>header{padding:10px 11px!important}
  .ts-wa-transcript{padding:10px!important}
  .ts-wa-msg{max-width:93%!important;font-size:11.5px!important}
  .ts-wa-composer{padding:8px!important}
  .ts-wa-flow-actions>*{flex:1 1 136px!important;min-height:40px!important}
  #site-header .mobile-mega-panel{background:#07111b!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
}

/* B) One unified desktop family: 1081px and above. */
@media screen and (min-width:1081px){
  :root{
    --ts-public-gutter:32px!important;
    --ts-hero-top-gap:16px!important;
    --ts-hero-inline:64px!important;
    --ts-hero-block:48px!important;
    --ts-hero-breadcrumb-gap:18px!important;
    --ts-hero-eyebrow-gap:18px!important;
    --ts-hero-title-gap:18px!important;
    --ts-hero-actions-gap:24px!important;
  }
  main#app>[data-page-hero="true"]{margin-top:calc(var(--ts-header-desktop) + var(--ts-hero-top-gap))!important;padding:var(--ts-hero-block) var(--ts-hero-inline)!important}
  main#app>[data-page-hero="true"]>[data-hero-body="true"]{
    display:grid!important;grid-template-columns:minmax(0,1fr) minmax(420px,.86fr)!important;grid-template-rows:auto!important;align-items:center!important;gap:clamp(42px,5vw,78px)!important;
  }
  main#app>[data-page-hero="true"] [data-hero-copy="true"]{grid-column:1!important;grid-row:1!important}
  main#app>[data-page-hero="true"] h1{max-width:760px!important;font-size:clamp(56px,5.2vw,78px)!important;line-height:.98!important}
  main#app>[data-page-hero="true"] [data-hero-copy="true"]>p,
  main#app>[data-page-hero="true"] [data-hero-copy="true"]>.hero-lead{max-width:690px!important;font-size:17px!important;line-height:1.55!important}
  main#app>[data-page-hero="true"] [data-hero-copy="true"] .hero-actions{display:flex!important;flex-wrap:wrap!important;gap:10px!important;margin-top:var(--ts-hero-actions-gap)!important}
  main#app>[data-page-hero="true"] [data-hero-visual-root="true"]{grid-column:2!important;grid-row:1!important;width:100%!important;min-height:360px!important;display:grid!important;place-items:center!important}
  main#app>[data-page-hero="true"] [data-hero-visual-root="true"]>.hero-diagram{position:relative!important;width:100%!important;max-width:720px!important;min-height:360px!important;aspect-ratio:12/7!important;margin:0!important}
  main#app>[data-page-hero="true"] [data-hero-diagram] text{font-size:12px!important}
  main#app>[data-page-hero="true"] [data-hero-diagram] .hd-sub,
  main#app>[data-page-hero="true"] [data-hero-diagram] .hd-caption{font-size:9px!important}

  #ts-whatsapp-agent{right:18px!important;bottom:max(18px,env(safe-area-inset-bottom,0px))!important}
  .ts-wa-panel{left:auto!important;right:18px!important;bottom:max(18px,env(safe-area-inset-bottom,0px))!important;width:374px!important;height:min(580px,calc(100dvh - 36px))!important;max-height:min(580px,calc(100dvh - 36px))!important}
}


/* ==========================================================================
   TECHSCALES R9 - FINAL FRONTEND CORRECTION
   Authoritative width families only:
     A) 0-1080px
     B) 1081px+
   ========================================================================== */

/* Exact owner logo: transparent image only; no donor box/background. */
#site-header .brand,#site-header .mobile-direct-brand{background:transparent!important;border:0!important;box-shadow:none!important;overflow:visible!important}
#site-header .brand img,#site-header .mobile-direct-brand img,#site-footer .footer-brand .brand img{display:block!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;object-position:left center!important;background:transparent!important;border:0!important;box-shadow:none!important;filter:none!important}

/* Home diagram stays entirely inside the visual safe zone instead of clipping its outer orbit. */
main#app>[data-page-hero="true"] [data-hero-diagram="home"]{overflow:hidden!important;padding:0!important}
main#app>[data-page-hero="true"] [data-hero-diagram="home"]::before{inset:11% 10%!important}
main#app>[data-page-hero="true"] [data-hero-diagram="home"]>svg{inset:5.5% 4.5%!important;width:91%!important;height:89%!important;overflow:visible!important}

/* Diagram labels: inline R9 fitting owns final font size and labels may not paint outside their SVG viewport. */
main#app>[data-page-hero="true"] [data-hero-diagram] text[data-r9-fit]{max-width:100%!important}
main#app>[data-page-hero="true"] [data-hero-diagram] svg{overflow:visible!important}
main#app>[data-page-hero="true"] [data-hero-visual-root="true"]{overflow:hidden!important}

/* Tools uses the same split label + dropdown trigger pattern as other directory menus. */
#site-header .tools-menu-wrap{position:relative!important;display:flex!important;align-items:center!important;gap:2px!important}
#site-header .tools-menu-wrap .tools-mega{width:min(520px,calc(100vw - 32px))!important;max-width:520px!important;padding:16px!important}
#site-header .tools-mega-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:16px!important;padding:0 2px 12px!important;border-bottom:1px solid rgba(93,218,232,.14)!important}
#site-header .tools-mega-head strong{font-size:13px!important}.tools-mega-head a{font-size:11px!important;color:#7ce7f2!important}
#site-header .tools-mega-grid,.mobile-tools-grid{display:grid!important;grid-template-columns:1fr!important;gap:7px!important;padding-top:12px!important}
#site-header .tools-menu-item{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;min-height:42px!important;padding:9px 11px!important;border:1px solid rgba(102,221,234,.13)!important;border-radius:11px!important;background:rgba(8,27,39,.64)!important;color:#dbeef2!important;text-decoration:none!important}
#site-header .tools-menu-item.is-coming{opacity:.72!important;cursor:default!important}
#site-header .tool-launch-status{flex:0 0 auto!important;font-size:9px!important;line-height:1!important;text-transform:uppercase!important;letter-spacing:.08em!important;padding:5px 7px!important;border-radius:999px!important;border:1px solid rgba(159,178,184,.22)!important;color:#9fb2b8!important}
#site-header .tool-launch-status.is-new{color:#76eef5!important;border-color:rgba(83,226,239,.34)!important;background:rgba(31,178,194,.11)!important}

/* Live AI Demos: reserve the visual row and keep copy/actions in normal flow. */
main .homepage-live-demos .demo-agent-grid{align-items:stretch!important}
main .homepage-live-demos .demo-agent-card{display:grid!important;grid-template-rows:minmax(178px,auto) auto minmax(48px,auto) auto!important;align-content:start!important;gap:12px!important;min-height:0!important;height:100%!important;overflow:visible!important}
main .homepage-live-demos .demo-agent-card>.demo-visual-shell{position:relative!important;display:block!important;width:100%!important;height:190px!important;min-height:190px!important;overflow:hidden!important;border-radius:22px!important;isolation:isolate!important}
main .homepage-live-demos .demo-agent-card>.demo-visual-shell>.demo-visual{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;margin:0!important}
main .homepage-live-demos .demo-agent-card>h3,main .homepage-live-demos .demo-agent-card>p,main .homepage-live-demos .demo-agent-card>.demo-actions{position:relative!important;inset:auto!important;z-index:3!important;transform:none!important;opacity:1!important;visibility:visible!important;overflow:visible!important;margin:0!important;color:inherit!important}
main .homepage-live-demos .demo-agent-card>h3{font-size:clamp(20px,1.65vw,27px)!important;line-height:1.15!important;color:#f1f7f9!important}
main .homepage-live-demos .demo-agent-card>p{min-height:48px!important;font-size:13px!important;line-height:1.45!important;color:#a9bec5!important}
main .homepage-live-demos .demo-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;margin-top:4px!important}
main .homepage-live-demos .demo-actions .text-link{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;min-height:42px!important;width:100%!important;padding:9px 10px!important;white-space:normal!important;line-height:1.2!important}

/* One Connected Partner: clean SVG map; Workflows is right of Automation and owns a directed live path. */
main .partner-system-map-r9{min-height:0!important;height:auto!important;aspect-ratio:1000/360!important;padding:0!important;overflow:hidden!important;background:radial-gradient(circle at 50% 50%,rgba(64,216,231,.13),transparent 27%),linear-gradient(145deg,rgba(3,18,28,.94),rgba(2,7,15,.98))!important}
main .partner-system-map-r9 .r9-partner-svg{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;display:block!important;overflow:visible!important}
main .partner-system-map-r9 .r9-partner-path,main .partner-system-map-r9 .r9-workflow-wave{fill:none!important;stroke:url(#r9PartnerLine)!important;stroke-width:1.35!important;stroke-dasharray:7 10!important;opacity:.54!important}
main .partner-system-map-r9 .r9-workflow-wave{stroke:#66eaf4!important;stroke-width:2!important;stroke-dasharray:3 8!important;opacity:.76!important}
main .partner-system-map-r9 .r9-workflow-signal{fill:#7cf4fb!important;filter:url(#r9PartnerGlow)!important}
main .partner-system-map-r9 .r9-partner-core circle{fill:rgba(4,25,37,.94)!important;stroke:rgba(112,236,246,.58)!important;stroke-width:1.2!important}
main .partner-system-map-r9 .r9-partner-core text{text-anchor:middle!important;fill:#d9f7fa!important;font-size:18px!important;font-weight:750!important}
main .partner-system-map-r9 .r9-partner-core .r9-core-sub{font-size:9px!important;letter-spacing:.11em!important;fill:#75e8f2!important}
main .partner-system-map-r9 .r9-partner-node rect{fill:rgba(7,26,38,.9)!important;stroke:rgba(124,238,255,.28)!important;stroke-width:1!important}
main .partner-system-map-r9 .r9-partner-node text{text-anchor:middle!important;fill:#dffbff!important;font-size:12px!important;font-weight:720!important}
main .partner-system-map-r9 .r9-partner-node.is-workflow rect{stroke:rgba(105,239,249,.58)!important;fill:rgba(6,37,49,.96)!important}

/* Clean, clear WhatsApp FAB. */
.ts-wa-fab{width:52px!important;height:52px!important;min-width:52px!important;min-height:52px!important;border:2px solid rgba(255,255,255,.88)!important;background:#16b861!important;color:#fff!important;box-shadow:0 7px 18px rgba(0,0,0,.24),inset 0 0 0 1px rgba(7,106,51,.32)!important}
.ts-wa-fab svg{width:25px!important;height:25px!important;display:block!important;fill:#fff!important}
.ts-wa-fab:hover{transform:translateY(-1px) scale(1.02)!important;background:#13ad5a!important}

/* A) Unified 0-1080px system. No R9 intermediate breakpoint. */
@media screen and (max-width:1080px){
  main#app>#home-hero.is-home-hero[data-page-hero="true"]{width:min(calc(100% - (var(--ts-public-gutter) * 2)),var(--ts-page-max))!important;margin:var(--ts-hero-top-gap) auto 0!important;padding:var(--ts-hero-block) var(--ts-hero-inline)!important;min-height:auto!important;border-radius:20px!important}
  main#app>#home-hero.is-home-hero[data-page-hero="true"]>[data-hero-body="true"]{display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto!important;align-items:start!important;gap:clamp(18px,3vw,26px)!important;padding:0!important;margin:0!important;min-height:0!important}
  main#app>#home-hero.is-home-hero[data-page-hero="true"]>[data-hero-breadcrumb]{margin:0 0 var(--ts-hero-breadcrumb-gap)!important;padding:0!important;position:static!important;transform:none!important}
  main#app>#home-hero.is-home-hero[data-page-hero="true"] [data-hero-copy="true"] .hero-eyebrow,main#app>#home-hero.is-home-hero[data-page-hero="true"] [data-hero-copy="true"]>.eyebrow{display:flex!important;align-items:center!important;position:static!important;top:auto!important;transform:none!important;margin:0 0 var(--ts-hero-eyebrow-gap)!important;padding:0!important;min-height:0!important}
  main#app>#home-hero.is-home-hero[data-page-hero="true"] [data-hero-copy="true"]{padding:0!important;margin:0!important;position:static!important;transform:none!important}
  main#app>#home-hero.is-home-hero[data-page-hero="true"] [data-hero-visual-root="true"]{margin-top:2px!important;max-height:none!important;min-height:clamp(228px,52vw,360px)!important}
  main#app>#home-hero.is-home-hero[data-page-hero="true"] [data-hero-diagram="home"]{min-height:clamp(228px,52vw,360px)!important}
  #site-header .mobile-direct-brand{width:clamp(112px,20vw,142px)!important;max-width:142px!important;height:38px!important;min-height:38px!important}
  #site-header .mobile-direct-brand img{width:100%!important;max-width:100%!important;height:100%!important;min-height:0!important}
  main .homepage-live-demos .demo-agent-card>.demo-visual-shell{height:clamp(170px,30vw,200px)!important;min-height:clamp(170px,30vw,200px)!important}
  main .homepage-live-demos .demo-agent-card{grid-template-rows:auto auto auto auto!important}
  main .partner-system-map-r9{aspect-ratio:1000/430!important;min-height:300px!important}
  #site-header .tools-mobile-panel .tools-menu-item{min-height:44px!important}
  .ts-wa-fab{width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important}.ts-wa-fab svg{width:24px!important;height:24px!important}
}

/* B) Unified 1081px+ desktop system. */
@media screen and (min-width:1081px){
  #site-header .brand{width:172px!important;height:48px!important}
  #site-header .brand img{width:100%!important;height:100%!important}
  main#app>#home-hero.is-home-hero[data-page-hero="true"] [data-hero-diagram="home"]>svg{inset:5% 4%!important;width:92%!important;height:90%!important}
  main .homepage-live-demos .demo-agent-card>.demo-visual-shell{height:190px!important;min-height:190px!important}
  main .partner-system-map-r9{min-height:350px!important}
}


/* ==========================================================================
   TS-R9-1A-FAB-ONLY-2026-08-23
   ISOLATED SCOPE: floating WhatsApp trigger only.
   No Hero, header, footer, page, section, container or responsive geometry.
   ========================================================================== */
.ts-wa-fab{
  width:54px!important;
  height:54px!important;
  min-width:54px!important;
  min-height:54px!important;
  padding:0!important;
  border:1px solid rgba(255,255,255,.72)!important;
  border-radius:50%!important;
  background:#25D366!important;
  color:#fff!important;
  box-shadow:0 4px 12px rgba(0,0,0,.24)!important;
  filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  opacity:1;
}
.ts-wa-fab .ts-wa-brand-glyph,.ts-wa-fab svg{
  display:block!important;
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  min-height:30px!important;
  color:#fff!important;
  fill:#fff!important;
  stroke:none!important;
  filter:none!important;
  opacity:1!important;
  transform:none!important;
}
.ts-wa-fab .ts-wa-brand-glyph path,.ts-wa-fab svg path{fill:#fff!important;filter:none!important}
.ts-wa-fab:hover{background:#20C65A!important;transform:translateY(-1px)!important;box-shadow:0 6px 14px rgba(0,0,0,.26)!important}

/* ============================================================
   TS-R9-1B-FAB-AUTHORITATIVE-2026-08-23
   Floating WhatsApp button ONLY.
   No website geometry, Hero, header, footer or section changes.
   ============================================================ */

html body #ts-whatsapp-agent{
  position:fixed!important;
  right:20px!important;
  bottom:max(20px,env(safe-area-inset-bottom,0px))!important;
  z-index:9999!important;
  pointer-events:none!important;
}

html body #ts-whatsapp-agent > .ts-wa-fab{
  pointer-events:auto!important;
  display:grid!important;
  place-items:center!important;

  width:58px!important;
  height:58px!important;
  min-width:58px!important;
  min-height:58px!important;
  max-width:58px!important;
  max-height:58px!important;

  padding:0!important;
  margin:0!important;

  border:3px solid #ffffff!important;
  border-radius:999px!important;

  background:#25D366!important;
  background-image:none!important;

  color:#ffffff!important;

  box-shadow:
    0 5px 14px rgba(0,0,0,.28)!important;

  filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;

  opacity:1!important;
  visibility:visible!important;

  transform:none!important;
  isolation:isolate!important;

  cursor:pointer!important;
}

html body #ts-whatsapp-agent > .ts-wa-fab svg{
  display:block!important;

  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  min-height:30px!important;

  margin:0!important;
  padding:0!important;

  fill:#ffffff!important;
  color:#ffffff!important;

  opacity:1!important;
  visibility:visible!important;

  filter:none!important;
  transform:none!important;

  shape-rendering:geometricPrecision!important;
  text-rendering:geometricPrecision!important;
}

html body #ts-whatsapp-agent > .ts-wa-fab svg path{
  fill:#ffffff!important;
  stroke:none!important;
  filter:none!important;
  opacity:1!important;
}

/* Old Hero/is-suppressed state must NOT hide the FAB. */
html body #ts-whatsapp-agent.is-suppressed:not(.is-open) > .ts-wa-fab{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:none!important;
}

/* Legitimate hiding states remain intact. */
html body #ts-whatsapp-agent.is-open > .ts-wa-fab,
html body.mobile-mega-open #ts-whatsapp-agent > .ts-wa-fab,
html body #site-header.menu-open ~ #ts-whatsapp-agent > .ts-wa-fab{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

/* Hover remains clean, without glow. */
html body #ts-whatsapp-agent > .ts-wa-fab:hover{
  background:#20C65A!important;
  transform:translateY(-2px)!important;
  box-shadow:0 6px 16px rgba(0,0,0,.30)!important;
}

/* Same component, slightly smaller only for 0-1080. */
@media screen and (max-width:1080px){
  html body #ts-whatsapp-agent{
    right:12px!important;
    bottom:max(12px,env(safe-area-inset-bottom,0px))!important;
  }

  html body #ts-whatsapp-agent > .ts-wa-fab{
    width:54px!important;
    height:54px!important;
    min-width:54px!important;
    min-height:54px!important;
    max-width:54px!important;
    max-height:54px!important;
  }

  html body #ts-whatsapp-agent > .ts-wa-fab svg{
    width:28px!important;
    height:28px!important;
    min-width:28px!important;
    min-height:28px!important;
  }
}

/* TechScales STAGE-UI-01 - screenshot-scoped staging corrections. */

/* Connected Partner:
   enlarge only internal SVG presentation/readability.
   Outer section/card geometry remains untouched. */
main .partner-system-map-r9 .r9-partner-core text{
  font-size:20px!important;
  font-weight:650!important;
  text-rendering:geometricPrecision!important;
  paint-order:normal!important;
  stroke:none!important;
  text-shadow:none!important;
  filter:none!important;
}

main .partner-system-map-r9 .r9-partner-core .r9-core-sub{
  font-size:10px!important;
  font-weight:550!important;
  letter-spacing:.09em!important;
}

main .partner-system-map-r9 .r9-partner-node text{
  font-size:13.5px!important;
  font-weight:600!important;
  text-rendering:geometricPrecision!important;
  paint-order:normal!important;
  stroke:none!important;
  text-shadow:none!important;
  filter:none!important;
}

/* 0-1080 header:
   one stable top row, no logo/Talk-to-AI collision and no vertical drift. */
@media screen and (max-width:1080px){

  html body #site-header .mobile-direct-top{
    display:grid!important;
    grid-template-columns:
      minmax(92px,142px)
      minmax(84px,104px)
      minmax(84px,104px)
      38px!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:6px!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
  }

  html body #site-header .mobile-direct-brand{
    grid-column:1!important;
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:142px!important;
    height:34px!important;
    min-height:34px!important;
    max-height:34px!important;
    margin:0!important;
    padding:0!important;
    position:static!important;
    inset:auto!important;
    align-self:center!important;
    justify-self:start!important;
    transform:none!important;
    overflow:hidden!important;
  }

  html body #site-header .mobile-direct-brand img{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    height:34px!important;
    min-height:34px!important;
    max-height:34px!important;
    object-fit:contain!important;
    object-position:left center!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
  }

  html body #site-header .mobile-direct-ai{
    grid-column:2!important;
    width:100%!important;
    min-width:0!important;
    max-width:104px!important;
    height:34px!important;
    min-height:34px!important;
    max-height:34px!important;
    margin:0!important;
    padding:0 5px!important;
    position:static!important;
    inset:auto!important;
    align-self:center!important;
    justify-self:center!important;
    transform:none!important;
    white-space:nowrap!important;
    font-size:10px!important;
    line-height:1!important;
    box-sizing:border-box!important;
  }

  html body #site-header .mobile-direct-system{
    grid-column:3!important;
    width:100%!important;
    min-width:0!important;
    max-width:104px!important;
    height:34px!important;
    min-height:34px!important;
    max-height:34px!important;
    margin:0!important;
    padding:0 5px!important;
    position:static!important;
    inset:auto!important;
    align-self:center!important;
    justify-self:center!important;
    transform:none!important;
    white-space:nowrap!important;
    font-size:10px!important;
    line-height:1!important;
    box-sizing:border-box!important;
  }

  html body #site-header .mobile-direct-ai .status-dot{
    flex:0 0 6px!important;
    width:6px!important;
    min-width:6px!important;
    height:6px!important;
    margin:0!important;
  }

  html body #site-header .mobile-nav-toggle{
    grid-column:4!important;
    width:38px!important;
    min-width:38px!important;
    max-width:38px!important;
    height:34px!important;
    min-height:34px!important;
    max-height:34px!important;
    margin:0!important;
    padding:0!important;
    position:static!important;
    inset:auto!important;
    align-self:center!important;
    justify-self:end!important;
    transform:none!important;
    box-sizing:border-box!important;
  }

  /* Compact WhatsApp FAB for the full 0-1080 responsive family. */
  html body #ts-whatsapp-agent{
    right:10px!important;
    bottom:max(10px,env(safe-area-inset-bottom,0px))!important;
  }

  html body #ts-whatsapp-agent > .ts-wa-fab{
    width:46px!important;
    min-width:46px!important;
    max-width:46px!important;
    height:46px!important;
    min-height:46px!important;
    max-height:46px!important;
    padding:0!important;
    border-width:1px!important;
    box-sizing:border-box!important;
  }

  html body #ts-whatsapp-agent > .ts-wa-fab svg{
    width:23px!important;
    min-width:23px!important;
    max-width:23px!important;
    height:23px!important;
    min-height:23px!important;
    max-height:23px!important;
  }
}

/* Narrow phones keep the same composition, only scaled down. */
@media screen and (max-width:700px){

  html body #site-header .mobile-direct-top{
    grid-template-columns:
      minmax(78px,96px)
      minmax(64px,82px)
      minmax(64px,82px)
      34px!important;
    gap:4px!important;
  }

  html body #site-header .mobile-direct-brand{
    max-width:96px!important;
    height:32px!important;
    min-height:32px!important;
    max-height:32px!important;
  }

  html body #site-header .mobile-direct-brand img{
    height:32px!important;
    min-height:32px!important;
    max-height:32px!important;
  }

  html body #site-header .mobile-direct-ai,
  html body #site-header .mobile-direct-system{
    max-width:82px!important;
    height:32px!important;
    min-height:32px!important;
    max-height:32px!important;
    padding:0 4px!important;
    font-size:9px!important;
  }

  html body #site-header .mobile-nav-toggle{
    width:34px!important;
    min-width:34px!important;
    max-width:34px!important;
    height:32px!important;
    min-height:32px!important;
    max-height:32px!important;
  }

  html body #ts-whatsapp-agent{
    right:9px!important;
    bottom:max(9px,env(safe-area-inset-bottom,0px))!important;
  }

  html body #ts-whatsapp-agent > .ts-wa-fab{
    width:44px!important;
    min-width:44px!important;
    max-width:44px!important;
    height:44px!important;
    min-height:44px!important;
    max-height:44px!important;
  }

  html body #ts-whatsapp-agent > .ts-wa-fab svg{
    width:22px!important;
    min-width:22px!important;
    max-width:22px!important;
    height:22px!important;
    min-height:22px!important;
    max-height:22px!important;
  }
}

/* TechScales STAGE-UI-03B - outward Connected Partner network. */

/* Internal Connected Partner SVG only.
   Outer card width, height, aspect ratio, padding and section spacing remain owned
   by the existing approved frontend geometry. */

main .partner-system-map-r9 .r9-partner-svg{
  display:block!important;
  width:100%!important;
  height:100%!important;
  overflow:visible!important;
}

main .partner-system-map-r9 .r9-partner-path{
  fill:none!important;
  stroke:url(#r9PartnerLine)!important;
  stroke-width:1.5!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  stroke-dasharray:7 9!important;
  opacity:.84!important;
  vector-effect:non-scaling-stroke!important;
}

main .partner-system-map-r9 .r9-partner-path.is-workflow{
  stroke:#79f6ff!important;
  stroke-width:1.9!important;
  opacity:1!important;
}

main .partner-system-map-r9 .r9-partner-endpoint{
  fill:#bdfcff!important;
  stroke:#6ff4ff!important;
  stroke-width:1.1!important;
  opacity:1!important;
  filter:url(#r9PartnerSignalGlow)!important;
  pointer-events:none!important;
}

main .partner-system-map-r9 .r9-partner-signal{
  fill:#ecfeff!important;
  stroke:#67f2ff!important;
  stroke-width:1!important;
  opacity:1!important;
  filter:url(#r9PartnerSignalGlow)!important;
  pointer-events:none!important;
}

main .partner-system-map-r9 .r9-partner-core circle{
  fill:#071923!important;
  stroke:#55e4ef!important;
  stroke-width:1.4!important;
}

main .partner-system-map-r9 .r9-partner-core text{
  font-size:20px!important;
  font-weight:650!important;
  stroke:none!important;
  text-shadow:none!important;
  filter:none!important;
}

main .partner-system-map-r9 .r9-partner-core .r9-core-sub{
  font-size:9.5px!important;
  font-weight:600!important;
  letter-spacing:.09em!important;
}

main .partner-system-map-r9 .r9-partner-node rect{
  fill:#071923!important;
  stroke:rgba(89,225,238,.52)!important;
  stroke-width:1!important;
}

main .partner-system-map-r9 .r9-partner-node text{
  fill:#e4fbff!important;
  font-size:13px!important;
  font-weight:620!important;
  text-anchor:middle!important;
  stroke:none!important;
  text-shadow:none!important;
  filter:none!important;
  paint-order:normal!important;
}

main .partner-system-map-r9 .r9-partner-node.is-workflow rect{
  fill:#082832!important;
  stroke:#72f3fc!important;
  stroke-width:1.3!important;
}

@media (prefers-reduced-motion:reduce){
  main .partner-system-map-r9 .r9-partner-signal{
    display:none!important;
  }
}

/* TechScales STAGE-UI-03C - defeat legacy 82-percent SVG compression. */

/*
  The legacy responsive/frontend rule applies:
      inset: 9% 9%
      width: 82%
  to capability-map SVGs.

  This selector is deliberately more specific and applies ONLY to the
  approved Connected Partner R9 component.
*/
html body main .capabilities
.partner-system-map.partner-system-map-r9
> svg.r9-partner-svg{
  position:absolute!important;
  inset:0!important;
  top:0!important;
  right:0!important;
  bottom:0!important;
  left:0!important;

  width:100%!important;
  min-width:100%!important;
  max-width:100%!important;

  height:100%!important;
  min-height:100%!important;
  max-height:100%!important;

  margin:0!important;
  padding:0!important;

  transform:none!important;
  transform-origin:center center!important;

  overflow:visible!important;
}

/* TS_PARTNER_NETWORK_V10_COMPLETE_REBUILD */

/*
  FINAL Connected Partner internal visual system.

  Important:
  - Outer .partner-system-map geometry is NOT changed.
  - No r9 classes are used.
  - No gradient stroke is used.
  - No stationary endpoint circles exist.
*/

html body main .capabilities
.partner-system-map.ts-partner-network-v10
> svg.ts-partner-svg-v10{
  position:absolute!important;

  inset:0!important;
  top:0!important;
  right:0!important;
  bottom:0!important;
  left:0!important;

  display:block!important;

  width:100%!important;
  min-width:100%!important;
  max-width:100%!important;

  height:100%!important;
  min-height:100%!important;
  max-height:100%!important;

  margin:0!important;
  padding:0!important;

  transform:none!important;

  overflow:visible!important;
}

/* ALL NINE LINES ARE EXACTLY THE SAME */
html body main .capabilities
.ts-partner-network-v10
.ts-partner-line-v10{
  fill:none!important;

  stroke:#2ec4d6!important;
  stroke-opacity:.58!important;
  stroke-width:1.45!important;

  stroke-linecap:round!important;
  stroke-linejoin:round!important;

  stroke-dasharray:6 8!important;

  vector-effect:non-scaling-stroke!important;

  filter:
    drop-shadow(
      0 0 2px
      rgba(46,196,214,.28)
    )!important;
}

/* EXACTLY ONE MOVING DOT PER LINE */
html body main .capabilities
.ts-partner-network-v10
.ts-partner-signal-v10{
  fill:#f5f7fa!important;

  stroke:#2ec4d6!important;
  stroke-width:1.2!important;

  opacity:1!important;

  filter:url(#tsPartnerDotGlowV10)!important;

  pointer-events:none!important;
}

/* ALL NINE NODE PILLS ARE VISUALLY EQUAL */
html body main .capabilities
.ts-partner-network-v10
.ts-partner-node-v10 rect{
  fill:#071923!important;

  stroke:rgba(46,196,214,.58)!important;
  stroke-width:1!important;

  vector-effect:non-scaling-stroke!important;
}

html body main .capabilities
.ts-partner-network-v10
.ts-partner-node-v10 text{
  fill:#eafcff!important;

  font-size:13px!important;
  font-weight:600!important;

  text-anchor:middle!important;

  stroke:none!important;
  text-shadow:none!important;
  filter:none!important;

  paint-order:normal!important;
  text-rendering:geometricPrecision!important;

  pointer-events:none!important;
}

/* TECHSCALES HUB */
html body main .capabilities
.ts-partner-network-v10
.ts-partner-core-v10
[data-ts-partner-core-circle-v10]{
  fill:#071923!important;

  stroke:#55e6f0!important;
  stroke-width:1.45!important;

  filter:url(#tsPartnerCoreGlowV10)!important;
}

/* ADVANCED BUT SUBTLE CORE PULSE */
html body main .capabilities
.ts-partner-network-v10
.ts-partner-core-pulse-v10{
  fill:none!important;

  stroke:#2ec4d6!important;
  stroke-width:1!important;

  opacity:.18;

  transform-box:fill-box!important;
  transform-origin:center!important;

  animation:
    tsPartnerCorePulseV10
    2.8s
    ease-out
    infinite!important;
}

@keyframes tsPartnerCorePulseV10{
  0%{
    opacity:.28;
    transform:scale(.88);
  }

  65%{
    opacity:.06;
    transform:scale(1.18);
  }

  100%{
    opacity:0;
    transform:scale(1.24);
  }
}

html body main .capabilities
.ts-partner-network-v10
.ts-partner-core-v10
[data-ts-partner-core-title-v10]{
  fill:#f5f7fa!important;

  font-size:20px!important;
  font-weight:650!important;

  text-anchor:middle!important;

  stroke:none!important;
  text-shadow:none!important;
  filter:none!important;
}

html body main .capabilities
.ts-partner-network-v10
.ts-partner-core-sub-v10{
  fill:#66dce8!important;

  font-size:9.5px!important;
  font-weight:600!important;

  letter-spacing:.09em!important;
  text-anchor:middle!important;

  stroke:none!important;
  text-shadow:none!important;
  filter:none!important;
}

@media (prefers-reduced-motion:reduce){

  html body main .capabilities
  .ts-partner-network-v10
  .ts-partner-core-pulse-v10{
    animation:none!important;
    opacity:.10!important;
  }
}

/* TS_HOME_HERO_V13_UNIFIED_0_1920_COMPLETE_ORBITS */

/*
  HOME HERO VISUAL LOCK

  One diagram rule from 0px through 1920px.
  There is intentionally NO Home-Hero-specific media query here.

  On physically narrow screens it scales proportionally to fit the
  available width, but its geometry, aspect ratio, SVG inset and
  internal composition never switch at a breakpoint.
*/

html body main#app
#home-hero.is-home-hero
[data-hero-visual-root="true"]{
  min-height:0!important;
  height:auto!important;
  max-height:none!important;

  display:grid!important;
  place-items:center!important;

  overflow:visible!important;
}

html body main#app
#home-hero.is-home-hero
[data-hero-diagram="home"]{
  position:relative!important;

  width:min(100%,640px)!important;
  max-width:640px!important;

  height:auto!important;
  min-height:0!important;
  max-height:none!important;

  aspect-ratio:12 / 7!important;

  margin:0 auto!important;
  padding:0!important;

  overflow:visible!important;

  box-sizing:border-box!important;
}

/*
  Remove the legacy repeating-radial orbit generator.
  V13's actual SVG circles now own every visible orbit.
*/
html body main#app
#home-hero.is-home-hero
[data-hero-diagram="home"]::before{
  content:""!important;

  position:absolute!important;
  inset:0!important;

  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(46,196,214,.075) 0,
      rgba(46,196,214,.035) 28%,
      transparent 56%
    )!important;

  pointer-events:none!important;
}

/*
  Override every previous 0-1080 / 1081+ SVG inset rule.
*/
html body main#app
#home-hero.is-home-hero
[data-hero-diagram="home"]
> svg.ts-home-hero-svg-v13{
  position:absolute!important;

  inset:0!important;
  top:0!important;
  right:0!important;
  bottom:0!important;
  left:0!important;

  display:block!important;

  width:100%!important;
  min-width:100%!important;
  max-width:100%!important;

  height:100%!important;
  min-height:100%!important;
  max-height:100%!important;

  margin:0!important;
  padding:0!important;

  transform:none!important;
  transform-origin:50% 50%!important;

  overflow:visible!important;
}

/* COMPLETE ORBIT CIRCLES */
html body main#app
#home-hero.is-home-hero
.ts-home-orbit-v13{
  fill:none!important;

  stroke:#2ec4d6!important;

  vector-effect:non-scaling-stroke!important;

  transform-origin:360px 210px!important;
}

html body main#app
#home-hero.is-home-hero
.ts-home-orbit-outer-v13{
  stroke-width:1!important;
  stroke-opacity:.18!important;
}

html body main#app
#home-hero.is-home-hero
.ts-home-orbit-mid-v13{
  stroke-width:1!important;
  stroke-opacity:.31!important;
  stroke-dasharray:5 10!important;
}

html body main#app
#home-hero.is-home-hero
.ts-home-orbit-main-v13{
  stroke:#76edf6!important;
  stroke-width:1.55!important;
  stroke-opacity:.92!important;

  filter:
    drop-shadow(
      0 0 4px
      rgba(46,196,214,.16)
    )!important;
}

/* Eight equal spokes */
html body main#app
#home-hero.is-home-hero
.ts-home-spokes-v13 path{
  fill:none!important;

  stroke:#2ec4d6!important;
  stroke-width:1!important;
  stroke-opacity:.30!important;

  stroke-dasharray:6 9!important;

  vector-effect:non-scaling-stroke!important;
}

/* Clean advanced central halo */
html body main#app
#home-hero.is-home-hero
.ts-home-halo-v13{
  opacity:.88!important;
}

/* Preserve current restrained TechScales core treatment */
html body main#app
#home-hero.is-home-hero
.ts-home-core-v13 circle{
  fill:#071f2c!important;

  stroke:#55e4ef!important;
  stroke-width:1.35!important;

  filter:
    url(#homeCoreGlowFilterV13)!important;
}

html body main#app
#home-hero.is-home-hero
.ts-home-core-v13 text{
  text-anchor:middle!important;

  stroke:none!important;
  text-shadow:none!important;
}

html body main#app
#home-hero.is-home-hero
.ts-home-core-v13 text:not(.hd-sub){
  fill:#c8dade!important;

  font-size:12px!important;
  font-weight:550!important;
}

html body main#app
#home-hero.is-home-hero
.ts-home-core-v13 .hd-sub{
  fill:#72cfd9!important;

  font-size:8.5px!important;
  font-weight:550!important;

  letter-spacing:.035em!important;
}

/* Same node treatment at every viewport width. */
html body main#app
#home-hero.is-home-hero
[data-hero-diagram="home"]
.hd-home-node rect{
  vector-effect:non-scaling-stroke!important;
}

/*
  V13 geometry is intentionally NOT redefined under
  1080px, 700px, 1024px, 1081px, 1440px or 1920px.
*/

/* TS_GLOBAL_ZOOM_V2_0_1080_1081_NORMALIZATION */

/*
  TechScales global responsive contract.

  Browser zoom remains enabled and accessible.

  Layout family:
      0-1080px = responsive/mobile-tablet
      1081px+   = desktop

  Purpose:
      prevent document-width expansion and competing
      responsive-family switching while browser zoom changes
      the effective CSS viewport.

  Locked Home Hero / Connected Partner internals are not
  redefined by this block.
*/

html,
body{
  width:100%;
  max-width:100%;
  min-width:0;

  margin-left:0;
  margin-right:0;

  overflow-x:hidden;

  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

#app,
main#app{
  width:100%;
  max-width:100%;
  min-width:0;

  box-sizing:border-box;

  overflow-x:hidden;
}

main#app > section,
main#app > .section{
  max-width:100%;
  min-width:0;

  box-sizing:border-box;
}

main#app > section > .container,
main#app > .section > .container,
main#app > section > .request-layout,
main#app > section > .contact-layout{
  min-width:0;

  box-sizing:border-box;
}

img,
video,
canvas{
  max-width:100%;
}

@supports (overflow:clip){
  html,
  body,
  #app,
  main#app{
    overflow-x:clip;
  }
}

/* TS_GEOMETRY_DENSITY_V2_COHERENT_85 */

/*
   Deterministic component geometry only.
   No body/document zoom.
   No JavaScript sizing.
   No general HTML typography changes.
   No TechScales logo-size changes.
*/

:root{
  --ts-geo-section-y:clamp(27px,3vw,43px);
  --ts-geo-grid-gap:clamp(9px,.85vw,12px);
  --ts-geo-card-gap:clamp(8px,.75vw,11px);
  --ts-geo-card-pad:clamp(12px,1vw,16px);
  --ts-geo-control-desktop:40px;
  --ts-geo-control-mobile:42px;
}


/* ==========================================================
   GLOBAL STRUCTURAL DENSITY
   ========================================================== */

main#app > section.section:not(.consultant-section),
main#app > .section:not(.consultant-section){
  padding-top:var(--ts-geo-section-y)!important;
  padding-bottom:var(--ts-geo-section-y)!important;
}

main#app :where(
  .agent-grid,
  .workflow-grid,
  .services-grid,
  .service-grid,
  .industry-grid,
  .industries-grid,
  .portfolio-grid,
  .portfolio-full,
  .work-grid,
  .tools-grid,
  .tool-grid,
  .capability-grid,
  .capabilities-grid,
  .metrics-grid,
  .demo-grid,
  .services-mega-grid,
  .ai-mega-grid
){
  gap:var(--ts-geo-grid-gap)!important;
}

main#app :where(
  .agent-card,
  .demo-agent-card,
  .workflow-recommendation-card,
  .service-card,
  .industry-card,
  .portfolio-card,
  .work-card,
  .tool-card,
  .metric-card,
  .capability-card
){
  min-height:0!important;
  height:auto!important;
  padding:var(--ts-geo-card-pad)!important;
  gap:var(--ts-geo-card-gap)!important;
  box-sizing:border-box!important;
}


/* ==========================================================
   HOME AGENT CARDS
   ========================================================== */

main .homepage-live-demos .demo-agent-card{
  min-height:0!important;
  height:auto!important;
  align-self:start!important;
}

main .homepage-live-demos :where(
  .planner-demo-visual,
  .messaging-demo-visual,
  .voice-demo-visual
){
  min-height:0!important;
  height:200px!important;
  max-height:200px!important;
  overflow:hidden!important;
}


/* ==========================================================
   DESKTOP 1081+
   ========================================================== */

@media screen and (min-width:1081px){

  main#app > .section:not(.consultant-section) > .container:not(.narrow),
  main#app > section.section:not(.consultant-section) > .container:not(.narrow),
  main#app > .section:not(.consultant-section) > .request-layout,
  main#app > section.section:not(.consultant-section) > .request-layout,
  main#app > .section:not(.consultant-section) > .contact-layout,
  main#app > section.section:not(.consultant-section) > .contact-layout{
    width:85%!important;
    max-width:1320px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    min-width:0!important;
  }

  main#app > #home-hero:first-child,
  main#app > [data-page-hero="true"]{
    width:85%!important;
    max-width:1450px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  /* TS_UI_PASS1A_DESKTOP_HEADER_HOME_TRUST_V1
     Desktop family only.
     Preserve navigation, Hero DOM, content and mobile contract.
  */

  #site-header{
    height:82px!important;
    min-height:82px!important;
    padding:4px 12px!important;
    box-sizing:border-box!important;
  }

  #site-header .nav-wrap{
    grid-template-rows:34px 32px!important;
    row-gap:4px!important;
  }

  #site-header .brand{
    height:34px!important;
    min-height:34px!important;
  }

  #site-header .brand img{
    width:auto!important;
    height:34px!important;
    max-height:34px!important;
    object-fit:contain!important;
  }

  #site-header .desktop-nav{
    height:32px!important;
    min-height:32px!important;
    gap:clamp(6px,.62vw,10px)!important;
  }

  #site-header .nav-actions{
    height:34px!important;
    min-height:34px!important;
    gap:6px!important;
  }

  #site-header .nav-actions .nav-ai,
  #site-header .nav-actions .my-system-control,
  #site-header .nav-actions [data-action="booking"]{
    height:34px!important;
    min-height:34px!important;
    max-height:34px!important;
    padding:0 9px!important;
    border-radius:9px!important;
  }

  #site-header .nav-actions .nav-linkedin{
    width:32px!important;
    height:34px!important;
    min-height:34px!important;
  }

  html{
    scroll-padding-top:94px!important;
  }

  main#app > #home-hero .trust-line{
    margin-top:14px!important;
    gap:8px 14px!important;
    font-size:11px!important;
    line-height:1.25!important;
    color:#9fb9c3!important;
    opacity:1!important;
  }

  main#app > #home-hero .trust-line span{
    color:#9fb9c3!important;
    opacity:.92!important;
  }

  #site-footer > .container,
  .site-footer > .container,
  body > footer > .container{
    width:85%!important;
    max-width:1320px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}


/* ==========================================================
   MOBILE / TABLET HEADER 0-1080
   ========================================================== */

@media screen and (max-width:1080px){

  #site-header{
    --ts-final-mobile-header:124px!important;
    height:124px!important;
    min-height:124px!important;
    max-height:124px!important;
  }

  #site-header .mobile-direct-header{
    grid-template-rows:30px 58px 28px!important;
    gap:2px!important;
    height:124px!important;
    min-height:124px!important;
    max-height:124px!important;
    padding:2px 6px!important;
  }

  #site-header .mobile-direct-top{
    height:30px!important;
    min-height:30px!important;
    max-height:30px!important;
    gap:3px!important;
  }

  #site-header .mobile-direct-ai,
  #site-header .mobile-direct-system{
    height:30px!important;
    min-height:30px!important;
    max-height:30px!important;
    padding-left:5px!important;
    padding-right:5px!important;
  }

  #site-header .mobile-primary-nav-shell{
    height:58px!important;
    min-height:58px!important;
  }

  #site-header .mobile-primary-nav{
    grid-template-rows:28px 28px!important;
    height:58px!important;
    min-height:58px!important;
    gap:2px!important;
  }

  #site-header .mobile-primary-nav > a,
  #site-header .mobile-primary-nav > button{
    height:28px!important;
    min-height:28px!important;
    max-height:28px!important;
    padding-top:0!important;
    padding-bottom:0!important;
  }

  #site-header .mobile-secondary-nav{
    grid-template-rows:28px!important;
    height:28px!important;
    min-height:28px!important;
    gap:3px!important;
  }

  #site-header .mobile-secondary-nav > a,
  #site-header .mobile-secondary-nav > button{
    height:28px!important;
    min-height:28px!important;
    max-height:28px!important;
    padding-top:0!important;
    padding-bottom:0!important;
  }

  #site-header .mobile-mega-panel{
    top:128px!important;
    left:6px!important;
    right:6px!important;
    max-height:calc(100dvh - 136px)!important;
  }

  #site-header .mobile-mega-overlay{
    inset:124px 0 0!important;
  }
}


/* ==========================================================
   HERO OUTER GEOMETRY
   ========================================================== */

main#app > #home-hero:first-child{
  padding-top:16px!important;
  padding-bottom:16px!important;
}

main#app > [data-page-hero="true"]{
  padding-top:14px!important;
  padding-bottom:14px!important;
}

main#app > #home-hero:first-child > .hero-grid,
main#app > [data-page-hero="true"] > [data-hero-body="true"]{
  gap:clamp(12px,1.2vw,17px)!important;
}

main#app > #home-hero:first-child .hero-actions,
main#app > [data-page-hero="true"] [data-hero-copy="true"] .hero-actions{
  gap:7px!important;
}


/* ==========================================================
   APPROVED HERO SVG GEOMETRY
   ========================================================== */

main#app > #home-hero:first-child .hero-diagram svg,
main#app > #home-hero:first-child .system-visual svg,
main#app > [data-page-hero="true"] [data-hero-diagram] svg{
  transform:scale(.85)!important;
  transform-origin:50% 50%!important;
}

/*
   Keep SVG label visual size approximately unchanged.
*/

main#app > #home-hero:first-child .hero-diagram svg text,
main#app > #home-hero:first-child .system-visual svg text,
main#app > [data-page-hero="true"] [data-hero-diagram] svg text{
  transform:scale(1.1764705882352942)!important;
  transform-box:fill-box!important;
  transform-origin:center!important;
}

@media screen and (min-width:1081px){

  main#app > #home-hero:first-child :where(.hero-visual,.system-visual),
  main#app > [data-page-hero="true"] [data-hero-visual-root="true"]{
    margin-top:-22px!important;
    margin-bottom:-22px!important;
  }
}

@media screen and (max-width:1080px){

  main#app > #home-hero:first-child :where(.hero-visual,.system-visual),
  main#app > [data-page-hero="true"] [data-hero-visual-root="true"]{
    margin-top:-14px!important;
    margin-bottom:-14px!important;
  }
}


/* ==========================================================
   HERO CTA GRID
   ========================================================== */

@media screen and (min-width:701px) and (max-width:1080px){

  main#app > #home-hero:first-child .hero-actions,
  main#app > [data-page-hero="true"] [data-hero-copy="true"] .hero-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
  }

  main#app > #home-hero:first-child .hero-actions > :first-child,
  main#app > [data-page-hero="true"]
  [data-hero-copy="true"] .hero-actions > :first-child{
    grid-column:1 / -1!important;
  }

  main#app > #home-hero:first-child
  .hero-actions > :last-child:nth-child(even),

  main#app > [data-page-hero="true"]
  [data-hero-copy="true"]
  .hero-actions > :last-child:nth-child(even){
    grid-column:1 / -1!important;
  }
}

@media screen and (max-width:700px){

  main#app > #home-hero:first-child .hero-actions,
  main#app > [data-page-hero="true"] [data-hero-copy="true"] .hero-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:6px!important;
  }

  main#app > #home-hero:first-child .hero-actions > *,
  main#app > [data-page-hero="true"] [data-hero-copy="true"] .hero-actions > *{
    grid-column:1!important;
    width:100%!important;
  }
}


/* ==========================================================
   CONNECTED PARTNER V12
   ========================================================== */

main .partner-system-map{
  margin-left:auto!important;
  margin-right:auto!important;
  margin-top:18px!important;
  margin-bottom:18px!important;
  border-radius:24px!important;
}

@media screen and (max-width:700px){

  main .partner-system-map{
    width:90%!important;
    max-width:90%!important;
    min-height:332px!important;
  }

  main .partner-system-map .partner-map-core{
    width:95px!important;
    height:95px!important;
  }

  main .partner-system-map .partner-node{
    padding:5px 7px!important;
  }
}

@media screen and (min-width:701px) and (max-width:1080px){

  main .partner-system-map{
    width:88%!important;
    max-width:88%!important;
    min-height:306px!important;
  }

  main .partner-system-map .partner-map-core{
    width:112px!important;
    height:112px!important;
  }

  main .partner-system-map .partner-node{
    padding:6px 8px!important;
  }
}

@media screen and (min-width:1081px){

  main .partner-system-map{
    width:85%!important;
    max-width:85%!important;
    min-height:272px!important;
  }

  main .partner-system-map .partner-map-core{
    width:126px!important;
    height:126px!important;
  }

  main .partner-system-map .partner-node{
    padding:7px 10px!important;
  }
}


/* ==========================================================
   MEDIA / WORKFLOW VISUALS
   ========================================================== */

main#app :where(
  .industry-card,
  .portfolio-card,
  .work-card
) img{
  max-height:190px!important;
  object-fit:cover!important;
}

main#app .workflow-grid :where(
  .system-visual,
  .workflow-visual,
  .delivery-flow-visual
){
  min-height:190px!important;
  max-height:220px!important;
}

main#app :where(.tool-visual,.tools-visual){
  min-height:0!important;
  max-height:240px!important;
}

@media screen and (min-width:701px) and (max-width:1080px){

  main .homepage-live-demos :where(
    .planner-demo-visual,
    .messaging-demo-visual,
    .voice-demo-visual
  ){
    height:185px!important;
    max-height:185px!important;
  }

  main#app .workflow-grid :where(
    .system-visual,
    .workflow-visual,
    .delivery-flow-visual
  ){
    min-height:175px!important;
    max-height:200px!important;
  }
}

@media screen and (max-width:700px){

  main .homepage-live-demos :where(
    .planner-demo-visual,
    .messaging-demo-visual,
    .voice-demo-visual
  ){
    height:170px!important;
    max-height:170px!important;
  }

  main#app .workflow-grid :where(
    .system-visual,
    .workflow-visual,
    .delivery-flow-visual
  ){
    min-height:165px!important;
    max-height:190px!important;
  }

  main#app :where(
    .industry-card,
    .portfolio-card,
    .work-card
  ) img{
    max-height:160px!important;
  }

  main#app :where(.tool-visual,.tools-visual){
    max-height:205px!important;
  }
}


/* ==========================================================
   FORMS / BUTTONS
   ========================================================== */

main#app :where(
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea
){
  min-width:0!important;
  padding:7px 9px!important;
  box-sizing:border-box!important;
}

main#app :where(
  input:not([type="checkbox"]):not([type="radio"]),
  select
){
  min-height:var(--ts-geo-control-desktop)!important;
}

main#app textarea{
  min-height:82px!important;
}

main#app :where(
  .btn,
  .text-btn,
  .workflow-card-actions button,
  .form-end button,
  .demo-actions button
){
  min-height:var(--ts-geo-control-desktop)!important;
  padding-left:9px!important;
  padding-right:9px!important;
  box-sizing:border-box!important;
}

@media screen and (max-width:1080px){

  main#app :where(
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    .btn,
    .text-btn,
    .workflow-card-actions button,
    .form-end button,
    .demo-actions button
  ){
    min-height:var(--ts-geo-control-mobile)!important;
  }
}


/* ==========================================================
   MEGA MENUS
   ========================================================== */

:where(
  .services-mega,
  .industries-mega,
  .ai-agents-mega,
  .workflows-mega
){
  padding:14px!important;
}

:where(
  .services-mega .menu-service,
  .industries-mega .menu-service,
  .workflows-mega .menu-service,
  .ai-agents-mega .ai-mega-card
){
  min-height:0!important;
  padding:11px!important;
}


/* ==========================================================
   WHATSAPP FAB FOOTPRINT
   ========================================================== */

@media screen and (min-width:701px) and (max-width:1080px){

  #ts-whatsapp-agent{
    right:8px!important;
    bottom:max(8px,env(safe-area-inset-bottom,0px))!important;
  }

  #ts-whatsapp-agent .ts-wa-fab{
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    min-height:44px!important;
    padding:0!important;
  }
}

@media screen and (max-width:700px){

  #ts-whatsapp-agent{
    right:6px!important;
    bottom:max(6px,env(safe-area-inset-bottom,0px))!important;
  }

  #ts-whatsapp-agent .ts-wa-fab{
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    min-height:40px!important;
    padding:0!important;
    border-radius:12px!important;
  }

  main#app{
    padding-bottom:52px!important;
  }
}


/* ==========================================================
   FOOTER
   ========================================================== */

#site-footer,
.site-footer,
body > footer{
  padding-top:clamp(21px,2.1vw,30px)!important;
  padding-bottom:clamp(21px,2.1vw,30px)!important;
}

#site-footer :where(.container,.footer-grid),
.site-footer :where(.container,.footer-grid),
body > footer :where(.container,.footer-grid){
  gap:clamp(10px,1vw,15px)!important;
}


/* ==========================================================
   RESPONSIVE CONTENT WIDTH
   ========================================================== */

@media screen and (min-width:701px) and (max-width:1080px){

  main#app > .section:not(.consultant-section) > .container:not(.narrow),
  main#app > section.section:not(.consultant-section) > .container:not(.narrow),
  main#app > .section:not(.consultant-section) > .request-layout,
  main#app > section.section:not(.consultant-section) > .request-layout,
  main#app > .section:not(.consultant-section) > .contact-layout,
  main#app > section.section:not(.consultant-section) > .contact-layout{
    width:94%!important;
    max-width:94%!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  main#app > #home-hero:first-child,
  main#app > [data-page-hero="true"]{
    width:96%!important;
    max-width:96%!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}

@media screen and (max-width:700px){

  main#app > .section:not(.consultant-section) > .container:not(.narrow),
  main#app > section.section:not(.consultant-section) > .container:not(.narrow),
  main#app > .section:not(.consultant-section) > .request-layout,
  main#app > section.section:not(.consultant-section) > .request-layout,
  main#app > .section:not(.consultant-section) > .contact-layout,
  main#app > section.section:not(.consultant-section) > .contact-layout{
    width:calc(100% - 14px)!important;
    max-width:calc(100% - 14px)!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  main#app > #home-hero:first-child,
  main#app > [data-page-hero="true"]{
    width:calc(100% - 10px)!important;
    max-width:calc(100% - 10px)!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}


/* ==========================================================
   WIDTH SAFETY
   ========================================================== */

main#app,
main#app > section,
main#app > .section,
main#app :where(
  .container,
  .request-layout,
  .contact-layout
){
  min-width:0!important;
  box-sizing:border-box!important;
}

main#app img,
main#app video,
main#app canvas{
  max-width:100%;
}

/* TS_HERO_UNIFIED_V1_ALL_WIDTHS_ANIMATIONS */

/*
   TECHSCALES HERO CONTRACT — UNIFIED V1

   Permanent responsive rules:

   1. One Hero-title sizing formula from 0px upward.
   2. Same Hero-title hierarchy/position rule on both sides
      of the 1080 / 1081 architecture boundary.
   3. No desktop-only title scaling.
   4. No desktop-only animation-root display override.
   5. No zero-height animation-root override.
   6. Hero animation systems remain active at every width.
   7. Responsive header remains unchanged except logo geometry.
   8. V13 / V12 content architecture remains unchanged.
*/


:root{
  --ts-unified-hero-title-size:
    clamp(36px,4.8vw,60px);

  --ts-unified-hero-title-width:
    850px;

  --ts-unified-hero-breadcrumb-gap:
    10px;

  --ts-unified-hero-eyebrow-gap:
    12px;

  --ts-unified-hero-title-gap:
    14px;
}


/* ==========================================================
   A. ALL-WIDTH HERO TITLE CONTRACT
   ========================================================== */

main#app > #home-hero:first-child h1,
main#app > section.hero:first-child h1,
main#app > [data-page-hero="true"] h1{
  position:relative!important;

  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;

  width:100%!important;
  max-width:var(--ts-unified-hero-title-width)!important;

  margin-top:0!important;
  margin-right:0!important;
  margin-bottom:var(--ts-unified-hero-title-gap)!important;
  margin-left:0!important;

  font-size:var(--ts-unified-hero-title-size)!important;
  line-height:.99!important;
  letter-spacing:-.035em!important;

  text-wrap:balance!important;

  word-break:normal!important;
  overflow-wrap:normal!important;

  transform:none!important;
}


/* ==========================================================
   B. ALL-WIDTH HERO HIERARCHY POSITION
   ========================================================== */

main#app > [data-page-hero="true"]
> [data-hero-breadcrumb]{
  margin-bottom:
    var(--ts-unified-hero-breadcrumb-gap)!important;
}


main#app > #home-hero:first-child :where(
  .eyebrow,
  .ts-eyebrow
),

main#app > [data-page-hero="true"]
[data-hero-copy="true"] :where(
  .eyebrow,
  .ts-eyebrow
){
  margin-top:0!important;

  margin-bottom:
    var(--ts-unified-hero-eyebrow-gap)!important;
}


/*
   Keep Hero copy itself source-driven.
   Only eliminate breakpoint-specific accidental offsetting.
*/

main#app > #home-hero:first-child .hero-copy,
main#app > [data-page-hero="true"]
[data-hero-copy="true"]{
  position:relative!important;

  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;

  transform:none!important;
}


/* ==========================================================
   C. HERO ANIMATION VISIBILITY — ALL WIDTHS
   ========================================================== */

/*
   Do NOT redefine these animation roots as flex containers.
   Do NOT force min-height:0.

   Their original per-page geometry therefore remains active.
*/

main#app > #home-hero:first-child :where(
  .hero-visual,
  .system-visual,
  .hero-diagram
),

main#app > [data-page-hero="true"]
[data-hero-visual-root="true"],

main#app > [data-page-hero="true"]
[data-hero-visual-root="true"] :where(
  .system-visual,
  .hero-diagram
){
  opacity:1!important;
  visibility:visible!important;

  filter:none!important;
}


/*
   Keep SVG canvases visible without changing their native
   display/layout contract.
*/

main#app > #home-hero:first-child :where(
  .hero-diagram,
  .system-visual
) svg,

main#app > [data-page-hero="true"]
[data-hero-diagram] svg{
  opacity:1!important;
  visibility:visible!important;
}


/*
   Any existing CSS animation attached to SVG descendants stays
   running at every viewport width.
*/

main#app > #home-hero:first-child :where(
  .hero-diagram,
  .system-visual
) svg *,

main#app > [data-page-hero="true"]
[data-hero-diagram] svg *{
  animation-play-state:running!important;
}


/* ==========================================================
   D. 0-1080 RESPONSIVE HEADER — LOGO ONLY
   ========================================================== */

@media screen and (max-width:1080px){

  /*
     Keep:
       124px header
       top row
       primary navigation
       secondary navigation
       all current responsive geometry

     Change:
       official TechScales logo visual only
  */

  #site-header .mobile-direct-top img,
  #site-header .mobile-direct-top [class*="logo"] img,
  #site-header .mobile-direct-top [class*="brand"] img,
  #site-header .mobile-direct-top > a:first-child img{
    width:auto!important;

    height:29px!important;
    max-height:29px!important;

    max-width:170px!important;

    object-fit:contain!important;
    object-position:left center!important;

    flex:0 0 auto!important;
  }


  #site-header .mobile-direct-top > a:first-child svg,
  #site-header .mobile-direct-top [class*="logo"] svg,
  #site-header .mobile-direct-top [class*="brand"] svg{
    width:auto!important;

    height:29px!important;
    max-height:29px!important;

    max-width:170px!important;

    flex:0 0 auto!important;
  }


  #site-header .mobile-direct-top > a:first-child{
    display:flex!important;

    align-items:center!important;
    justify-content:flex-start!important;

    min-width:0!important;

    overflow:visible!important;
  }
}


/* ==========================================================
   E. 1081+ HERO CANVAS CONTINUITY
   ========================================================== */

@media screen and (min-width:1081px){

  /*
     At 1080 V2 uses approximately 96% width.

     1081+ therefore uses viewport - 40px instead of the former
     85% width rule.

     This removes the one-pixel architecture shrink.
  */

  main#app > #home-hero:first-child,
  main#app > [data-page-hero="true"]{
    width:min(
      1480px,
      calc(100vw - 40px)
    )!important;

    max-width:calc(
      100vw - 40px
    )!important;

    margin-left:auto!important;
    margin-right:auto!important;
  }
}


/* ==========================================================
   F. IMPORTANT — NO DESKTOP VISUAL-ROOT GEOMETRY OVERRIDE
   ========================================================== */

/*
   Intentionally absent:

     display:flex on Hero visual root
     min-height:0 on Hero visual root
     height:auto on Hero animation root
     desktop negative margins
     desktop animation transforms

   The original page-specific animation geometry remains
   responsible for its own visual canvas.
*/

/* TS_TOOLS_UX_CSS_V1_0_1920
   Visitor-first Tools hub.
   Does not alter the global Hero contract or any non-Tools page.
*/


/* ==========================================================
   TOOLS HERO — USE THE EXISTING CANONICAL ANIMATION
   ========================================================== */

main#app > [data-page-hero="true"]
[data-hero-diagram="tools"]{
  opacity:1!important;
  visibility:visible!important;
}

main#app > [data-page-hero="true"]
[data-hero-diagram="tools"] .hd-tool-card > rect{
  animation:
    hdToolActivity 4.1s ease-in-out infinite!important;

  animation-play-state:running!important;
}

main#app > [data-page-hero="true"]
[data-hero-diagram="tools"] .hd-tool-card:nth-of-type(odd) > rect{
  animation-delay:.85s!important;
}

main#app > [data-page-hero="true"]
[data-hero-diagram="tools"] .hd-tools-cursor path{
  animation:
    hdCursorPulse 2.4s ease-in-out infinite!important;

  animation-play-state:running!important;
}

main#app > [data-page-hero="true"]
[data-hero-diagram="tools"] .hd-workspace circle{
  animation:
    tsToolsWindowDot 2.8s ease-in-out infinite!important;
}

main#app > [data-page-hero="true"]
[data-hero-diagram="tools"] .hd-workspace circle:nth-of-type(2){
  animation-delay:.45s!important;
}

main#app > [data-page-hero="true"]
[data-hero-diagram="tools"] .hd-workspace circle:nth-of-type(3){
  animation-delay:.9s!important;
}

@keyframes tsToolsWindowDot{
  0%,100%{
    opacity:.36;
  }

  50%{
    opacity:.92;
  }
}


/* ==========================================================
   TOOLS HUB — CONTROLLED CONTENT CANVAS
   ========================================================== */

main#app .tools-hub-section{
  padding-top:clamp(24px,3vw,38px)!important;
  padding-bottom:clamp(24px,3vw,38px)!important;
}

main#app .tools-hub-section > .tools-hub-shell{
  width:min(
    1220px,
    calc(100vw - 40px)
  )!important;

  max-width:1220px!important;

  margin-left:auto!important;
  margin-right:auto!important;

  min-width:0!important;
}


/* ==========================================================
   TOOLS INTRO
   ========================================================== */

main#app .tools-hub-head{
  display:grid!important;

  grid-template-columns:
    minmax(0,1fr)
    minmax(260px,.62fr)!important;

  align-items:end!important;

  gap:clamp(16px,2vw,28px)!important;

  margin:0 0 clamp(18px,2.2vw,28px)!important;
}

main#app .tools-hub-head > *{
  min-width:0!important;
}

main#app .tools-hub-head h2{
  max-width:700px!important;

  margin:0!important;

  font-size:clamp(28px,3vw,40px)!important;
  line-height:1.05!important;
}

main#app .tools-hub-head > p{
  max-width:560px!important;

  margin:0!important;

  line-height:1.55!important;
}


/* ==========================================================
   LIVE TOOL VS ROADMAP HIERARCHY
   ========================================================== */

main#app .tools-hub-section .tools-grid{
  display:grid!important;

  grid-template-columns:
    minmax(0,1.4fr)
    minmax(280px,.6fr)!important;

  align-items:start!important;

  gap:clamp(14px,1.6vw,20px)!important;
}

main#app .tools-hub-section :where(
  .featured-tool,
  .tools-coming
){
  width:100%!important;

  min-width:0!important;
  min-height:0!important;

  height:auto!important;

  align-self:start!important;

  box-sizing:border-box!important;
}


/* ==========================================================
   LIVE TOOL CARD
   ========================================================== */

main#app .tools-hub-section .featured-tool{
  padding:clamp(17px,1.7vw,23px)!important;

  border-radius:20px!important;

  border-color:rgba(114,214,228,.46)!important;

  background:linear-gradient(142deg,rgba(10,41,55,.96),rgba(5,20,31,.94))!important;

  box-shadow:0 18px 46px rgba(0,0,0,.24),0 0 0 1px rgba(114,214,228,.08),0 0 36px rgba(62,207,222,.10)!important;
}

main#app .tools-hub-section .tool-card-top{
  display:flex!important;

  align-items:center!important;
  justify-content:space-between!important;

  gap:12px!important;

  margin-bottom:12px!important;
}

main#app .tools-hub-section .tool-card-top .tool-badge{
  margin:0!important;
}

main#app .tools-hub-section .tool-card-top .agent-glyph{
  flex:0 0 auto!important;

  width:42px!important;
  height:42px!important;

  display:grid!important;
  place-items:center!important;
}

main#app .tools-hub-section .featured-tool h3{
  max-width:680px!important;

  margin:0 0 10px!important;

  font-size:clamp(25px,2.3vw,32px)!important;
  line-height:1.08!important;
}

main#app .tools-hub-section .featured-tool .tool-title-highlight{
  color:#72d6e4!important;
  font-style:normal!important;
  text-shadow:0 0 22px rgba(114,214,228,.20)!important;
}

main#app .tools-hub-section .featured-tool-layout{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(170px,.34fr)!important;
  align-items:center!important;
  gap:clamp(14px,2vw,26px)!important;
}

main#app .tools-hub-section .featured-tool-copy{min-width:0!important}

main#app .tools-hub-section .qr-feature-diagram{
  width:100%!important;
  max-width:230px!important;
  height:150px!important;
  justify-self:end!important;
  color:#72d6e4!important;
  pointer-events:none!important;
}

main#app .tools-hub-section .qr-feature-diagram svg{display:block!important;width:100%!important;height:100%!important;overflow:visible!important}
main#app .tools-hub-section .qr-feature-diagram .qfd-cell{fill:rgba(114,214,228,.84);animation:qfdCellPulse 3.6s ease-in-out infinite}
main#app .tools-hub-section .qr-feature-diagram .qfd-cell-1{animation-delay:.45s}.qr-feature-diagram .qfd-cell-2{animation-delay:.9s}.qr-feature-diagram .qfd-cell-3{animation-delay:1.35s}
main#app .tools-hub-section .qr-feature-diagram .qfd-flow{fill:none;stroke:rgba(114,214,228,.24);stroke-width:1.5}
main#app .tools-hub-section .qr-feature-diagram .qfd-flow-live{fill:none;stroke:#72d6e4;stroke-width:1.8;stroke-dasharray:7 10;animation:qfdFlowTravel 4.8s linear infinite}
main#app .tools-hub-section .qr-feature-diagram .qfd-scan-ring{fill:rgba(114,214,228,.08);stroke:rgba(114,214,228,.58);stroke-width:1.5;animation:qfdScanPulse 2.8s ease-in-out infinite}
main#app .tools-hub-section .qr-feature-diagram .qfd-scan-line{fill:none;stroke:#baf4fa;stroke-width:2;stroke-linecap:round;animation:qfdScanLine 2.8s ease-in-out infinite}
main#app .tools-hub-section .qr-feature-diagram .qfd-signal{fill:#d9fbff;filter:drop-shadow(0 0 6px rgba(114,214,228,.9))}
main#app .tools-hub-section .qr-feature-diagram text{fill:#91dfe9;font-family:var(--font-primary,Inter,Arial,sans-serif);font-size:8px;font-weight:800;letter-spacing:.08em;text-anchor:middle}
@keyframes qfdCellPulse{0%,100%{opacity:.42}50%{opacity:1}}
@keyframes qfdFlowTravel{to{stroke-dashoffset:-68}}
@keyframes qfdScanPulse{0%,100%{opacity:.5;transform:scale(.92);transform-origin:198px 92px}50%{opacity:1;transform:scale(1);transform-origin:198px 92px}}
@keyframes qfdScanLine{0%,100%{opacity:.32;transform:translateY(-20px)}50%{opacity:1;transform:translateY(20px)}}

main#app .tools-hub-section .tool-summary{
  max-width:720px!important;

  margin:0!important;

  line-height:1.55!important;
}


/* ==========================================================
   BENEFITS — SCANNABLE, NOT A LONG BULLET BLOCK
   ========================================================== */

main#app .tools-hub-section .tool-benefits{
  display:grid!important;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(150px,1fr)
    )!important;

  gap:8px!important;

  margin:16px 0!important;

  padding:0!important;

  list-style:none!important;
}

main#app .tools-hub-section .tool-benefits li{
  min-width:0!important;

  margin:0!important;

  padding:9px 11px!important;

  border:1px solid rgba(92,221,238,.14)!important;
  border-radius:12px!important;

  background:rgba(73,202,219,.045)!important;
}


/* ==========================================================
   LIVE TOOL ACTION
   ========================================================== */

main#app .tools-hub-section .tool-card-actions{
  display:flex!important;

  align-items:center!important;

  flex-wrap:wrap!important;

  gap:10px!important;

  margin-top:4px!important;
}

main#app .tools-hub-section .tool-availability{
  display:inline-flex!important;

  align-items:center!important;

  min-height:32px!important;

  padding:5px 9px!important;

  border-radius:999px!important;

  color:#9beaf1!important;

  background:rgba(77,212,226,.07)!important;
  border:1px solid rgba(77,212,226,.16)!important;
}


/* ==========================================================
   ROADMAP — SECONDARY VISUAL WEIGHT
   ========================================================== */

main#app .tools-hub-section .tools-coming{
  padding:clamp(14px,1.35vw,18px)!important;

  border-radius:18px!important;

  background:
    linear-gradient(
      145deg,
      rgba(8,22,35,.88),
      rgba(5,16,27,.78)
    )!important;
}

main#app .tools-hub-section .tools-coming .eyebrow{
  margin-bottom:9px!important;
}

main#app .tools-hub-section .tools-coming h3{
  margin:0 0 12px!important;

  font-size:clamp(20px,1.8vw,26px)!important;
  line-height:1.12!important;
}

main#app .tools-hub-section .coming-tool-list{
  display:grid!important;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(190px,1fr)
    )!important;

  gap:8px!important;

  margin:12px 0!important;
}

main#app .tools-hub-section .coming-tool-list > span{
  display:flex!important;

  align-items:center!important;
  justify-content:space-between!important;

  gap:8px!important;

  min-height:42px!important;

  padding:8px 10px!important;

  border-radius:11px!important;

  box-sizing:border-box!important;
}

main#app .tools-hub-section .coming-tool-list strong{
  min-width:0!important;
}

main#app .tools-hub-section .coming-tool-list small{
  flex:0 0 auto!important;

  white-space:nowrap!important;
}

main#app .tools-hub-section .tools-roadmap-note{
  margin:12px 0 0!important;

  opacity:.82!important;

  line-height:1.5!important;
}


/* ==========================================================
   COMPACT TRUST STRIP — REPLACES OVERSIZED DARK BAND
   ========================================================== */

main#app .tools-trust-section{
  padding-top:8px!important;
  padding-bottom:clamp(24px,3vw,36px)!important;
}

main#app .tools-trust-strip{
  width:min(
    1220px,
    calc(100vw - 40px)
  )!important;

  max-width:1220px!important;

  margin:0 auto!important;

  display:grid!important;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(190px,1fr)
    )!important;

  gap:8px!important;
}

main#app .tools-trust-strip > div{
  min-width:0!important;

  padding:12px 14px!important;

  border:1px solid rgba(92,221,238,.12)!important;
  border-radius:14px!important;

  background:rgba(7,22,34,.72)!important;
}

main#app .tools-trust-strip strong,
main#app .tools-trust-strip span{
  display:block!important;
}

main#app .tools-trust-strip strong{
  margin-bottom:4px!important;
}

main#app .tools-trust-strip span{
  opacity:.78!important;

  line-height:1.45!important;
}


/* ==========================================================
   0-1080 — SIMPLE SINGLE-COLUMN TOOLS EXPERIENCE
   ========================================================== */

@media screen and (max-width:1080px){

  main#app .tools-hub-section > .tools-hub-shell,
  main#app .tools-trust-strip{
    width:min(
      calc(100% - 20px),
      1220px
    )!important;

    max-width:calc(100% - 20px)!important;
  }

  main#app .tools-hub-head{
    grid-template-columns:
      minmax(0,1fr)!important;

    align-items:start!important;

    gap:10px!important;
  }

  main#app .tools-hub-head > p{
    max-width:720px!important;
  }

  main#app .tools-hub-section .tools-grid{
    grid-template-columns:
      minmax(0,1fr)!important;

    gap:12px!important;
  }

  main#app .tools-hub-section .featured-tool,
  main#app .tools-hub-section .tools-coming{
    max-width:100%!important;
  }

  main#app .tools-hub-section .featured-tool-layout{
    grid-template-columns:minmax(0,1fr)!important;
    gap:10px!important;
  }

  main#app .tools-hub-section .qr-feature-diagram{
    max-width:300px!important;
    height:132px!important;
    justify-self:center!important;
  }

  main#app .tools-hub-section .tool-card-actions .btn{
    min-width:0!important;
  }
}


/* ==========================================================
   1081+ — PREVENT OVERSIZED DESKTOP TOOLS CARDS
   ========================================================== */

@media screen and (min-width:1081px){

  main#app .tools-hub-section > .tools-hub-shell,
  main#app .tools-trust-strip{
    width:min(
      1220px,
      calc(100vw - 48px)
    )!important;

    max-width:1220px!important;
  }

  main#app .tools-hub-section .featured-tool{
    max-width:100%!important;
  }

  main#app .tools-hub-section .tools-coming{
    max-width:390px!important;

    justify-self:end!important;
  }
}


/* ==========================================================
   ACCESSIBILITY — RESPECT USER REDUCED-MOTION PREFERENCE
   ========================================================== */

@media (prefers-reduced-motion:reduce){

  main#app > [data-page-hero="true"]
  [data-hero-diagram="tools"] .hd-tool-card > rect,

  main#app > [data-page-hero="true"]
  [data-hero-diagram="tools"] .hd-tools-cursor path,

  main#app > [data-page-hero="true"]
  [data-hero-diagram="tools"] .hd-workspace circle{
    animation:none!important;
  }

  main#app .tools-hub-section .qr-feature-diagram .qfd-cell,
  main#app .tools-hub-section .qr-feature-diagram .qfd-flow-live,
  main#app .tools-hub-section .qr-feature-diagram .qfd-scan-ring,
  main#app .tools-hub-section .qr-feature-diagram .qfd-scan-line{animation:none!important}
}

/* TS_QR_LAYOUT_V2_TWO_RANGE_PRO */

/*
   QR-LAYOUT-02

   EXACT RESPONSIVE ARCHITECTURE

   RANGE A:
     0px - 1080px

   RANGE B:
     1081px+

   Goals:
     - no giant parent builder card
     - no empty card height
     - no forced equal heights
     - no stretched action buttons
     - no sticky collisions
     - no line/label/button overlap
     - no horizontal overflow
     - compact professional workflow
*/


/* ==========================================================
   SHARED QR SAFETY
   ========================================================== */

main#app .qr-workspace-section,
main#app .qr-workspace-section *,
main#app .qr-help-section,
main#app .qr-help-section *,
main#app .qr-managed-section,
main#app .qr-managed-section *{
  box-sizing:border-box!important;
}

main#app .qr-workspace-section :where(
  .qr-workspace-shell,
  .qr-layout-v2,
  .qr-builder-panel,
  .qr-step-card,
  .qr-generate-step,
  .qr-preview-compact,
  .qr-fields,
  .qr-control-grid,
  .qr-actions-v2
){
  min-width:0!important;
}

main#app .qr-workspace-section :where(
  input,
  select,
  textarea,
  button,
  .btn
){
  max-width:100%!important;
}


/*
   IMPORTANT:
   Remove the giant card around the three real QR steps.

   The individual steps remain the visual cards.
*/

main#app .qr-workspace-section .qr-builder-panel{
  display:grid!important;

  align-content:start!important;
  align-items:start!important;

  min-height:0!important;
  height:auto!important;

  margin:0!important;
  padding:0!important;

  gap:10px!important;

  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;

  overflow:visible!important;
}


/* Never let legacy .qr-step margins create large spaces. */

main#app .qr-workspace-section .qr-step{
  min-height:0!important;
  height:auto!important;

  margin:0!important;

  align-content:start!important;
}


/* The actual three step cards. */

main#app .qr-workspace-section :where(
  .qr-step-card,
  .qr-generate-step
){
  display:block!important;

  min-height:0!important;
  height:auto!important;

  margin:0!important;

  padding:12px!important;

  border:1px solid rgba(95,222,238,.12)!important;
  border-radius:14px!important;

  background:rgba(6,21,33,.58)!important;

  overflow:visible!important;
}


/* Step heading = compact, predictable. */

main#app .qr-workspace-section .qr-step-heading{
  display:flex!important;

  align-items:flex-start!important;

  gap:9px!important;

  margin:0 0 10px!important;
}

main#app .qr-workspace-section .qr-step-heading > span{
  flex:0 0 28px!important;

  width:28px!important;
  height:28px!important;

  display:grid!important;
  place-items:center!important;

  margin:0!important;
  padding:0!important;

  border-radius:8px!important;
}

main#app .qr-workspace-section .qr-step-heading > div{
  flex:1 1 auto!important;

  min-width:0!important;
}

main#app .qr-workspace-section .qr-step-heading h3{
  margin:0 0 2px!important;

  font-size:20px!important;
  line-height:1.15!important;
}

main#app .qr-workspace-section .qr-step-heading p{
  margin:0!important;

  line-height:1.4!important;
}


/* QR type choices stay compact. */

main#app .qr-workspace-section .qr-type-grid{
  gap:6px!important;

  margin:0!important;
}

main#app .qr-workspace-section .qr-type-grid label{
  min-width:0!important;

  margin:0!important;
}

main#app .qr-workspace-section .qr-type-grid span{
  display:flex!important;

  align-items:center!important;
  justify-content:center!important;

  min-height:34px!important;

  margin:0!important;

  padding:5px 8px!important;

  border-radius:9px!important;

  line-height:1.2!important;

  text-align:center!important;

  white-space:normal!important;
}


/* Input field area. */

main#app .qr-workspace-section .qr-fields{
  align-items:start!important;

  margin:9px 0 0!important;
}


/*
   A single field (URL/text/etc.) should NOT occupy only half
   the card and leave the other half visually blank.
*/

main#app .qr-workspace-section .qr-fields > :only-child{
  grid-column:1 / -1!important;

  width:100%!important;
  max-width:620px!important;
}


/* Labels. */

main#app .qr-workspace-section :where(
  .qr-fields,
  .qr-control-grid
) label{
  min-width:0!important;

  margin:0!important;

  gap:4px!important;

  line-height:1.3!important;
}


/* Inputs. */

main#app .qr-workspace-section :where(
  .qr-fields,
  .qr-control-grid
) :where(
  input:not([type="checkbox"]):not([type="color"]),
  select,
  textarea
){
  width:100%!important;

  min-height:38px!important;
  height:auto!important;

  margin:0!important;

  padding:6px 9px!important;

  border-radius:9px!important;
}


/* Color inputs must not create huge blank strips. */

main#app .qr-workspace-section
input[type="color"]{
  width:100%!important;

  min-height:38px!important;
  height:38px!important;

  padding:3px!important;

  border-radius:9px!important;
}


/* Advanced settings. */

main#app .qr-workspace-section .qr-advanced-options{
  margin:9px 0 0!important;

  padding:0!important;

  border-radius:10px!important;
}

main#app .qr-workspace-section
.qr-advanced-options > summary{
  min-height:38px!important;

  display:flex!important;

  align-items:center!important;

  margin:0!important;

  padding:7px 10px!important;

  line-height:1.3!important;
}

main#app .qr-workspace-section
.qr-advanced-options[open]{
  padding-bottom:9px!important;
}

main#app .qr-workspace-section
.qr-details-help{
  margin:0 10px 8px!important;

  line-height:1.4!important;
}

main#app .qr-workspace-section
.qr-control-advanced-grid{
  margin:0 10px!important;
}


/* Generate card must never inherit a large min-height. */

main#app .qr-workspace-section .qr-generate-step{
  min-height:0!important;
  height:auto!important;

  padding-bottom:12px!important;
}


/* Natural-size buttons. */

main#app .qr-workspace-section .qr-actions-v2{
  display:flex!important;

  align-items:center!important;
  justify-content:flex-start!important;

  flex-wrap:wrap!important;

  gap:6px!important;

  width:100%!important;

  margin:0!important;
}

main#app .qr-workspace-section
.qr-actions-v2 .btn{
  flex:0 0 auto!important;

  width:auto!important;
  max-width:100%!important;

  min-width:0!important;
  min-height:38px!important;

  margin:0!important;

  padding:7px 12px!important;
}

main#app .qr-workspace-section
.qr-actions-v2 .btn:first-child{
  min-width:180px!important;

  justify-content:center!important;
}

main#app .qr-workspace-section .qr-status{
  min-height:0!important;

  margin:7px 0 0!important;

  line-height:1.35!important;
}

main#app .qr-workspace-section
.qr-status:empty{
  display:none!important;
}


/* Preview card. */

main#app .qr-workspace-section .qr-preview-compact{
  align-self:start!important;

  min-height:0!important;
  height:auto!important;

  margin:0!important;

  padding:12px!important;

  border-radius:14px!important;

  overflow:hidden!important;
}


/*
   No sticky movement.
   It caused unnecessary positional behaviour while scrolling.
*/

main#app .qr-workspace-section
.qr-preview-compact{
  position:static!important;

  top:auto!important;
  bottom:auto!important;
}


/* Preview header. */

main#app .qr-workspace-section .qr-preview-heading{
  display:flex!important;

  align-items:flex-start!important;
  justify-content:space-between!important;

  gap:8px!important;

  margin:0 0 8px!important;
}

main#app .qr-workspace-section
.qr-preview-heading > *{
  min-width:0!important;
}

main#app .qr-workspace-section
.qr-preview-heading h3{
  margin:2px 0 0!important;

  font-size:19px!important;
  line-height:1.15!important;
}

main#app .qr-workspace-section
.qr-preview-status{
  flex:0 0 auto!important;

  margin:0!important;

  padding:4px 7px!important;

  white-space:nowrap!important;
}


/* Smaller preview. */

main#app .qr-workspace-section
.qr-preview-box{
  display:flex!important;

  align-items:center!important;
  justify-content:center!important;

  width:100%!important;

  min-height:180px!important;
  height:180px!important;
  max-height:180px!important;

  margin:8px 0!important;

  padding:9px!important;

  border-radius:11px!important;

  overflow:hidden!important;
}

main#app .qr-workspace-section
.qr-preview-box img{
  display:block!important;

  width:auto!important;
  height:auto!important;

  max-width:164px!important;
  max-height:164px!important;

  margin:auto!important;

  border-radius:7px!important;
}


/* Encoded value. */

main#app .qr-workspace-section
.qr-encoded{
  max-height:48px!important;

  margin:6px 0!important;

  overflow:auto!important;

  line-height:1.35!important;
}


/* Download buttons should not create unnecessary full-width bars. */

main#app .qr-workspace-section
.qr-download-primary{
  display:flex!important;

  justify-content:flex-start!important;

  margin-top:7px!important;
}

main#app .qr-workspace-section
.qr-download-primary .btn{
  width:auto!important;

  min-width:150px!important;

  min-height:38px!important;

  margin:0!important;

  padding:7px 12px!important;
}


/* Collapsed extra areas. */

main#app .qr-workspace-section :where(
  .qr-more-downloads,
  .qr-privacy-compact
){
  margin:7px 0 0!important;

  padding:0!important;

  border-radius:10px!important;
}

main#app .qr-workspace-section :where(
  .qr-more-downloads,
  .qr-privacy-compact
) > summary{
  min-height:36px!important;

  display:flex!important;

  align-items:center!important;

  padding:6px 9px!important;

  line-height:1.3!important;
}

main#app .qr-workspace-section
.qr-more-downloads .qr-downloads{
  display:flex!important;

  flex-wrap:wrap!important;

  gap:5px!important;

  padding:0 8px 8px!important;
}

main#app .qr-workspace-section
.qr-more-downloads .btn{
  flex:0 0 auto!important;

  width:auto!important;

  min-width:0!important;
  min-height:36px!important;

  padding:6px 9px!important;
}


/* ==========================================================
   RULE A — 0 THROUGH 1080PX
   ========================================================== */

@media screen and (max-width:1080px){

  main#app .qr-workspace-section{
    padding-top:18px!important;
    padding-bottom:26px!important;
  }

  main#app .qr-workspace-shell{
    width:calc(100% - 16px)!important;

    max-width:760px!important;

    margin-left:auto!important;
    margin-right:auto!important;
  }

  main#app .qr-workspace-intro{
    display:grid!important;

    grid-template-columns:1fr!important;

    align-items:start!important;

    gap:8px!important;

    margin:0 0 12px!important;
  }

  main#app .qr-flow-strip{
    display:flex!important;

    justify-content:flex-start!important;

    flex-wrap:wrap!important;

    gap:5px!important;

    margin:0!important;
  }

  main#app .qr-flow-strip span{
    min-height:30px!important;

    padding:4px 7px!important;
  }

  /*
     Entire working area is one column.
  */

  main#app .qr-layout-v2{
    display:grid!important;

    grid-template-columns:minmax(0,1fr)!important;

    align-items:start!important;

    gap:10px!important;
  }

  /*
     Types use available room without extra mini-breakpoints.
  */

  main#app .qr-workspace-section .qr-type-grid{
    display:grid!important;

    grid-template-columns:
      repeat(
        auto-fit,
        minmax(105px,1fr)
      )!important;
  }

  /*
     Input/control grids automatically use one or multiple
     columns only when enough physical room exists.
  */

  main#app .qr-workspace-section .qr-fields,
  main#app .qr-workspace-section .qr-control-basic,
  main#app .qr-workspace-section .qr-control-advanced-grid{
    display:grid!important;

    grid-template-columns:
      repeat(
        auto-fit,
        minmax(210px,1fr)
      )!important;

    gap:7px!important;
  }

  main#app .qr-workspace-section
  .qr-control-advanced-grid{
    margin:0 8px!important;
  }

  /*
     Buttons wrap naturally.
     Never force giant 100% width buttons.
  */

  main#app .qr-workspace-section
  .qr-actions-v2{
    gap:5px!important;
  }

  main#app .qr-workspace-section
  .qr-actions-v2 .btn:first-child{
    min-width:150px!important;
  }

  /*
     Preview simply follows the builder.
  */

  main#app .qr-workspace-section
  .qr-preview-compact{
    width:100%!important;

    max-width:100%!important;

    justify-self:stretch!important;
  }

  main#app .qr-workspace-section
  .qr-preview-box{
    min-height:170px!important;
    height:170px!important;
    max-height:170px!important;
  }

  main#app .qr-workspace-section
  .qr-preview-box img{
    max-width:154px!important;
    max-height:154px!important;
  }

  /*
     Help / managed content remains inside viewport.
  */

  main#app .qr-help-shell,
  main#app .qr-managed-callout{
    width:calc(100% - 16px)!important;

    max-width:760px!important;

    margin-left:auto!important;
    margin-right:auto!important;
  }

  main#app .qr-help-grid{
    display:grid!important;

    grid-template-columns:
      repeat(
        auto-fit,
        minmax(220px,1fr)
      )!important;

    gap:7px!important;
  }

  main#app .qr-managed-callout{
    grid-template-columns:1fr!important;

    align-items:start!important;

    gap:10px!important;
  }

  main#app .qr-managed-callout .btn{
    width:auto!important;

    justify-self:start!important;
  }
}


/* ==========================================================
   RULE B — 1081PX AND ABOVE
   ========================================================== */

@media screen and (min-width:1081px){

  main#app .qr-workspace-section{
    padding-top:20px!important;
    padding-bottom:30px!important;
  }

  /*
     Cap the complete application workspace.

     It should NOT keep growing with 1440 / 1600 / 1920.
  */

  main#app .qr-workspace-shell{
    width:min(
      1080px,
      calc(100vw - 48px)
    )!important;

    max-width:1080px!important;

    margin-left:auto!important;
    margin-right:auto!important;
  }

  main#app .qr-workspace-intro{
    display:grid!important;

    grid-template-columns:
      minmax(0,1fr)
      auto!important;

    align-items:end!important;

    gap:16px!important;

    margin:0 0 12px!important;
  }

  main#app .qr-flow-strip{
    justify-content:flex-end!important;

    gap:5px!important;
  }

  main#app .qr-flow-strip span{
    min-height:30px!important;

    padding:4px 7px!important;
  }

  /*
     Professional application split.

     Builder is dominant.
     Preview is useful but secondary.
  */

  main#app .qr-layout-v2{
    display:grid!important;

    grid-template-columns:
      minmax(0,748px)
      minmax(0,318px)!important;

    align-items:start!important;

    gap:14px!important;
  }

  /*
     Four QR types per row where practical.
  */

  main#app .qr-workspace-section
  .qr-type-grid{
    display:grid!important;

    grid-template-columns:
      repeat(4,minmax(0,1fr))!important;
  }

  /*
     Two useful field columns.

     Single-field states still span using :only-child above.
  */

  main#app .qr-workspace-section .qr-fields,
  main#app .qr-workspace-section .qr-control-basic,
  main#app .qr-workspace-section .qr-control-advanced-grid{
    display:grid!important;

    grid-template-columns:
      repeat(2,minmax(0,1fr))!important;

    gap:7px!important;
  }

  /*
     Actions remain left aligned.
     No 1fr Generate button.
  */

  main#app .qr-workspace-section
  .qr-actions-v2{
    display:flex!important;

    justify-content:flex-start!important;

    flex-wrap:wrap!important;

    gap:6px!important;
  }

  main#app .qr-workspace-section
  .qr-actions-v2 .btn:first-child{
    min-width:185px!important;
  }

  /*
     Preview must NEVER stretch to builder height.
  */

  main#app .qr-workspace-section
  .qr-preview-compact{
    width:318px!important;

    max-width:318px!important;

    justify-self:end!important;

    align-self:start!important;
  }

  /*
     Supporting content uses same professional width.
  */

  main#app .qr-help-shell,
  main#app .qr-managed-callout{
    width:min(
      1080px,
      calc(100vw - 48px)
    )!important;

    max-width:1080px!important;

    margin-left:auto!important;
    margin-right:auto!important;
  }

  main#app .qr-help-grid{
    display:grid!important;

    grid-template-columns:
      repeat(2,minmax(0,1fr))!important;

    gap:7px!important;
  }

  main#app .qr-managed-callout{
    grid-template-columns:
      minmax(0,1fr)
      auto!important;

    align-items:center!important;

    gap:14px!important;
  }

  main#app .qr-managed-callout .btn{
    width:auto!important;
  }
}


/* ==========================================================
   ACCESSIBILITY
   ========================================================== */

@media (prefers-reduced-motion:reduce){

  main#app > [data-page-hero="true"]
  [data-hero-diagram="qr"] .hd-scanner,

  main#app > [data-page-hero="true"]
  [data-hero-diagram="qr"] .hd-qr-arrow{
    animation:none!important;
  }
}

/* TS_HERO_TITLE_HIGHLIGHT_CSS_V1_GLOBAL
   PERMANENT GLOBAL HERO TITLE ACCENT + DELIVERY PARITY

   Existing and future canonical Hero H1:
     white primary text
     one cyan editorial accent phrase

   How We Deliver:
     must use the same canonical Hero H1 geometry as other pages.
*/


/* ==========================================================
   GLOBAL HERO ACCENT
   ========================================================== */

main#app > [data-page-hero="true"] h1 em,
main#app > [data-page-hero="true"] h1 [data-hero-highlight="true"],
main#app > #home-hero h1 em,
main#app > #home-hero h1 [data-hero-highlight="true"]{
  color:#72d6e4!important;

  -webkit-text-fill-color:#72d6e4!important;

  font-style:normal!important;
  font-weight:inherit!important;

  text-decoration:none!important;

  opacity:1!important;

  filter:none!important;

  text-shadow:none!important;
}


/*
   Keep every non-highlighted Hero title word on the
   existing canonical white.
*/

main#app > [data-page-hero="true"] h1,
main#app > #home-hero h1{
  color:#f5f7fa!important;

  -webkit-text-fill-color:#f5f7fa!important;
}


/* ==========================================================
   HOW WE DELIVER — REMOVE OLD ROUTE-SPECIFIC HERO DECORATION
   ========================================================== */

/*
   Historical .deliver-hero::before geometry predates the
   canonical animated deliveryHeroDiagram.

   It must not alter the modern canonical Hero card.
*/

main#app > .deliver-hero[data-page-hero="true"]::before,
main#app > .deliver-hero[data-page-hero="true"]::after{
  content:none!important;

  display:none!important;

  width:0!important;
  height:0!important;

  opacity:0!important;

  animation:none!important;

  pointer-events:none!important;
}


/* ==========================================================
   HOW WE DELIVER — CANONICAL HERO TITLE PARITY
   ========================================================== */

main#app > .deliver-hero[data-page-hero="true"] h1{
  position:relative!important;

  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;

  width:100%!important;

  max-width:
    var(--ts-unified-hero-title-width)!important;

  margin-top:0!important;

  margin-right:0!important;

  margin-bottom:
    var(--ts-unified-hero-title-gap)!important;

  margin-left:0!important;

  font-size:
    var(--ts-unified-hero-title-size)!important;

  line-height:.99!important;

  letter-spacing:-.035em!important;

  text-wrap:balance!important;

  word-break:normal!important;

  overflow-wrap:normal!important;

  transform:none!important;
}


/*
   The delivery card/body is content-driven,
   exactly like the other canonical page Heroes.
*/

main#app > .deliver-hero[data-page-hero="true"]{
  min-height:0!important;

  height:auto!important;
}

main#app > .deliver-hero[data-page-hero="true"]
> [data-hero-body="true"]{
  min-height:0!important;

  height:auto!important;

  align-items:center!important;
}

main#app > .deliver-hero[data-page-hero="true"]
[data-hero-copy="true"]{
  position:relative!important;

  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;

  min-width:0!important;

  transform:none!important;
}


/*
   Do not alter the delivery animation.
   Its canonical visual root remains source-controlled.
*/

main#app > .deliver-hero[data-page-hero="true"]
[data-hero-visual-root="true"],
main#app > .deliver-hero[data-page-hero="true"]
[data-hero-diagram="delivery"]{
  opacity:1!important;

  visibility:visible!important;
}


/* ==========================================================
   RESPONSIVE FAMILY A — 0 THROUGH 1080PX
   ========================================================== */

@media screen and (max-width:1080px){

  /*
     No special How-We-Deliver typography.
     It inherits the same unified Hero title formula.
  */

  main#app > .deliver-hero[data-page-hero="true"] h1{
    font-size:
      var(--ts-unified-hero-title-size)!important;

    max-width:
      var(--ts-unified-hero-title-width)!important;
  }

  main#app > .deliver-hero[data-page-hero="true"]
  [data-hero-visual-root="true"]{
    min-width:0!important;

    max-width:100%!important;
  }
}


/* ==========================================================
   RESPONSIVE FAMILY B — 1081PX AND ABOVE
   ========================================================== */

@media screen and (min-width:1081px){

  /*
     Same title typography and hierarchy.
     Only normal desktop layout behaviour changes through the
     already-approved global Hero system.
  */

  main#app > .deliver-hero[data-page-hero="true"] h1{
    font-size:
      var(--ts-unified-hero-title-size)!important;

    max-width:
      var(--ts-unified-hero-title-width)!important;
  }

  main#app > .deliver-hero[data-page-hero="true"]
  > [data-hero-body="true"]{
    align-items:center!important;
  }
}

/* ==========================================================
   TS_HOME_LIVE_AI_COMPACT_V1
   Scope: homepage Live AI cards ONLY.
   No other site component is affected.
   ========================================================== */

main .homepage-live-demos .demo-agent-grid{
  align-items:start!important;
  grid-auto-rows:auto!important;
}

main .homepage-live-demos .demo-agent-card{
  height:auto!important;
  min-height:0!important;
  max-height:none!important;

  align-self:start!important;
  align-content:start!important;
  justify-content:start!important;

  grid-template-rows:auto auto auto auto!important;

  padding:16px!important;
  gap:8px!important;
}

main .homepage-live-demos .demo-agent-card>h3{
  margin:0!important;
}

main .homepage-live-demos .demo-agent-card>p{
  height:auto!important;
  min-height:0!important;
  margin:0!important;
}

/* Remove the old large spacer before the four actions. */
main .homepage-live-demos .demo-actions{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;

  margin-top:4px!important;
  gap:8px!important;

  align-items:stretch!important;
}

/* Exactly 2 buttons on first row + 2 beneath. */
main .homepage-live-demos .demo-actions .text-link{
  width:100%!important;
  min-width:0!important;
  min-height:38px!important;

  padding:8px 10px!important;
  margin:0!important;

  justify-content:space-between!important;
}

/* Keep the existing AI demo artwork/design untouched. */
main .homepage-live-demos .demo-agent-card>.demo-visual-shell{
  margin-bottom:2px!important;
}


/* ==========================================================
   TS_PUBLIC_VISUAL_FAMILY_CONTRACT_V1

   HARD PUBLIC VISUAL CONTRACT

   FAMILY A: 0px - 1080px
   FAMILY B: 1081px - 1920px

   Within one family:
   - same component topology
   - same content order
   - same button placement
   - same image placement/aspect strategy
   - same controls/settings placement
   - no responsive zoom
   - no overlap
   - no unintended overflow

   Individual sections will inherit this contract when their
   approved geometry is edited. This block does NOT redesign
   existing components by itself.
   ========================================================== */

main#app,
main#app *,
main#app *::before,
main#app *::after{
  box-sizing:border-box;
}

html,
body{
  max-width:100%;
  overflow-x:hidden;
}

main#app{
  width:100%;
  max-width:100%;
  overflow-x:clip;
}

main#app img,
main#app picture,
main#app video,
main#app canvas,
main#app svg{
  max-width:100%;
}

/* ----------------------------------------------------------
   FAMILY A — 0 THROUGH 1080
   SAME VISUAL SYSTEM AT EVERY PIXEL
   ---------------------------------------------------------- */

@media screen and (max-width:1080px){
  main#app{
    --ts-public-family:A;

    --ts-family-page-gutter:
      clamp(14px,2.6vw,28px);

    --ts-family-section-gap:
      clamp(20px,3vw,34px);

    --ts-family-card-gap:
      clamp(8px,1.35vw,14px);

    --ts-family-card-padding:
      clamp(12px,1.7vw,18px);

    --ts-family-control-height:
      clamp(36px,4vw,42px);
  }
}

/* ----------------------------------------------------------
   FAMILY B — 1081 THROUGH 1920
   SAME VISUAL SYSTEM AT EVERY PIXEL
   ---------------------------------------------------------- */

@media screen and (min-width:1081px) and (max-width:1920px){
  main#app{
    --ts-public-family:B;

    --ts-family-page-gutter:
      clamp(28px,2.2vw,44px);

    --ts-family-section-gap:
      clamp(28px,2.4vw,46px);

    --ts-family-card-gap:
      clamp(10px,1vw,17px);

    --ts-family-card-padding:
      clamp(14px,1vw,20px);

    --ts-family-control-height:
      clamp(38px,2.4vw,44px);
  }
}


/* ==========================================================
   TS_HOME_LIVE_AI_TWO_FAMILY_FINAL_V2

   EXACT CONTRACT

   0-1080:
     ONE COLUMN
     SAME CARD ORDER
     SAME VISUAL PLACEMENT
     SAME 2x2 ACTION PLACEMENT

   1081-1920:
     THREE COLUMNS
     SAME CARD ORDER
     SAME 2x2 ACTION PLACEMENT

   NO 700 / 701 / 760 / 768 / 900 / 1024 TOPOLOGY CHANGE.
   ========================================================== */


/* ----------------------------------------------------------
   FAMILY A — 0 THROUGH 1080
   ---------------------------------------------------------- */

@media screen and (max-width:1080px){

  main#app .homepage-live-demos .demo-agent-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-auto-columns:unset!important;
    grid-auto-flow:row!important;

    align-items:start!important;
    align-content:start!important;

    gap:clamp(10px,1.5vw,14px)!important;
  }


  main#app .homepage-live-demos .demo-agent-card{
    display:grid!important;

    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto auto auto auto!important;

    width:100%!important;
    max-width:100%!important;

    height:auto!important;
    min-height:0!important;
    max-height:none!important;

    align-self:start!important;
    align-content:start!important;
    justify-content:start!important;

    padding:clamp(12px,1.7vw,16px)!important;
    gap:8px!important;
  }


  main#app .homepage-live-demos
  .demo-agent-card > .demo-visual-shell{
    position:relative!important;

    width:100%!important;

    height:clamp(150px,24vw,190px)!important;
    min-height:clamp(150px,24vw,190px)!important;
    max-height:190px!important;

    margin:0 0 2px!important;

    overflow:hidden!important;
  }


  main#app .homepage-live-demos
  .demo-agent-card > .demo-visual-shell > .demo-visual{
    position:absolute!important;
    inset:0!important;

    width:100%!important;
    height:100%!important;

    min-height:0!important;
    max-height:none!important;

    margin:0!important;
  }


  main#app .homepage-live-demos .demo-agent-card > h3{
    min-height:0!important;
    height:auto!important;
    margin:0!important;
  }


  main#app .homepage-live-demos .demo-agent-card > p{
    min-height:0!important;
    height:auto!important;
    margin:0!important;
  }


  /*
     HARD BUTTON LOCK:
     2 on row one
     2 on row two
     at EVERY width from 0 through 1080.
  */

  main#app .homepage-live-demos .demo-actions{
    display:grid!important;

    grid-template-columns:
      repeat(2,minmax(0,1fr))!important;

    grid-auto-flow:row!important;

    width:100%!important;

    margin:4px 0 0!important;
    padding:0!important;

    gap:8px!important;

    align-items:stretch!important;
    align-self:start!important;
  }


  main#app .homepage-live-demos
  .demo-actions .text-link{
    display:flex!important;

    width:100%!important;
    min-width:0!important;
    max-width:100%!important;

    min-height:38px!important;
    height:auto!important;

    margin:0!important;
    padding:8px 10px!important;

    align-items:center!important;
    justify-content:space-between!important;

    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }
}


/* ----------------------------------------------------------
   FAMILY B — 1081 THROUGH 1920
   ---------------------------------------------------------- */

@media screen and (min-width:1081px) and (max-width:1920px){

  main#app .homepage-live-demos .demo-agent-grid{
    display:grid!important;

    grid-template-columns:
      repeat(3,minmax(0,1fr))!important;

    grid-auto-flow:row!important;

    align-items:start!important;
    align-content:start!important;

    gap:clamp(12px,1vw,18px)!important;
  }


  main#app .homepage-live-demos .demo-agent-card{
    display:grid!important;

    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto auto auto auto!important;

    width:100%!important;

    height:auto!important;
    min-height:0!important;
    max-height:none!important;

    align-self:start!important;
    align-content:start!important;
    justify-content:start!important;

    padding:clamp(14px,1vw,18px)!important;
    gap:8px!important;
  }


  main#app .homepage-live-demos
  .demo-agent-card > .demo-visual-shell{
    position:relative!important;

    width:100%!important;

    height:clamp(160px,11vw,190px)!important;
    min-height:clamp(160px,11vw,190px)!important;
    max-height:190px!important;

    margin:0 0 2px!important;

    overflow:hidden!important;
  }


  main#app .homepage-live-demos
  .demo-agent-card > .demo-visual-shell > .demo-visual{
    position:absolute!important;
    inset:0!important;

    width:100%!important;
    height:100%!important;

    min-height:0!important;

    margin:0!important;
  }


  main#app .homepage-live-demos .demo-agent-card > h3,
  main#app .homepage-live-demos .demo-agent-card > p{
    min-height:0!important;
    height:auto!important;
    margin:0!important;
  }


  main#app .homepage-live-demos .demo-actions{
    display:grid!important;

    grid-template-columns:
      repeat(2,minmax(0,1fr))!important;

    grid-auto-flow:row!important;

    width:100%!important;

    margin:4px 0 0!important;
    padding:0!important;

    gap:8px!important;

    align-items:stretch!important;
  }


  main#app .homepage-live-demos
  .demo-actions .text-link{
    width:100%!important;
    min-width:0!important;

    min-height:38px!important;
    height:auto!important;

    margin:0!important;
    padding:8px 10px!important;

    justify-content:space-between!important;
  }
}


/* ==========================================================
   TS_PREMIUM_FOUNDER_TWO_FAMILY_COMPACT_V2

   APPROVAL TARGET

   FAMILY A
   0px - 1080px
   = one identical Founder topology

   FAMILY B
   1081px - 1920px
   = one identical Founder topology

   HARD IMAGE RULE
   - stable 5:6 ratio
   - maximum approved desktop visual = ~517 x 620
   - no object-fit crop changes
   - no zoom illusion
   - no transform scaling
   - no width-dependent crop

   SCOPE
   Founder section only.
   ========================================================== */


/* ==========================================================
   SHARED FOUNDER DENSITY
   ========================================================== */

main#app .premium-founder{
  height:auto!important;
  min-height:0!important;
}

main#app .premium-founder .premium-founder-grid{
  min-height:0!important;
  align-items:center!important;
}

main#app .premium-founder .founder-interactive{
  min-width:0!important;
  min-height:0!important;
}


/* ----------------------------------------------------------
   FOUNDER COPY
   ---------------------------------------------------------- */

main#app .premium-founder .founder-interactive > p{
  margin-top:5px!important;
  margin-bottom:0!important;
}


/* ----------------------------------------------------------
   SIX FOUNDER CARDS
   Keep existing 2-column card topology.
   Reduce unnecessary card bulk only.
   ---------------------------------------------------------- */

main#app .premium-founder .founder-option-grid{
  display:grid!important;

  grid-template-columns:
    repeat(2,minmax(0,1fr))!important;

  margin-top:10px!important;

  gap:6px!important;
}

main#app .premium-founder .founder-option{
  height:auto!important;
  min-height:0!important;
  max-height:none!important;

  align-self:start!important;
}

main#app .premium-founder .founder-option button{
  height:auto!important;
  min-height:0!important;

  padding:7px 9px!important;

  line-height:1.2!important;
}

main#app .premium-founder .founder-option button > span{
  margin-right:7px!important;
}

main#app .premium-founder .founder-option small{
  margin-top:2px!important;

  line-height:1.25!important;
}

main#app .premium-founder .founder-option > a{
  padding:
    0 9px 6px!important;

  line-height:1.2!important;
}


/* ----------------------------------------------------------
   ACTIVE VISION / PREVIEW CARD
   ---------------------------------------------------------- */

main#app .premium-founder .founder-preview-panel{
  height:auto!important;
  min-height:0!important;
  max-height:none!important;

  margin-top:7px!important;

  padding:
    9px 10px!important;
}

main#app .premium-founder .founder-preview-panel p{
  margin:
    3px 0!important;
}


/* ----------------------------------------------------------
   FOUNDER ACTIONS
   ---------------------------------------------------------- */

main#app .premium-founder .founder-actions{
  margin-top:8px!important;

  gap:6px!important;
}


/* ==========================================================
   STABLE FOUNDER IMAGE GEOMETRY
   ========================================================== */

/*
   HTML source declares the Founder image as 1000 x 1200.
   Therefore natural visual ratio = 5 / 6.

   At maximum:
   516.667px wide
   620px high

   This preserves the previous approved maximum image size
   without changing crop while viewport width changes.
*/

main#app .premium-founder .founder-media-approved{
  position:relative!important;

  width:min(100%,516.667px)!important;
  max-width:516.667px!important;

  height:auto!important;
  max-height:none!important;

  aspect-ratio:5 / 6!important;

  margin:0!important;

  overflow:hidden!important;

  justify-self:center!important;
  align-self:center!important;
}


/*
   CRITICAL:
   remove old forced 620px image-height crop behavior.

   At 516.667px wide the resulting proportional height
   remains 620px.

   At smaller available widths it scales proportionally,
   preserving exactly the same framing.
*/

main#app .premium-founder
.founder-media-approved picture{
  display:block!important;

  width:100%!important;
  height:100%!important;

  aspect-ratio:5 / 6!important;
}

main#app .premium-founder
.founder-media-approved img{
  display:block!important;

  width:100%!important;
  height:100%!important;

  max-width:100%!important;
  max-height:100%!important;

  aspect-ratio:5 / 6!important;

  object-fit:contain!important;
  object-position:50% 50%!important;

  transform:none!important;
  scale:none!important;

  margin:0!important;
}


/* ==========================================================
   FAMILY A — 0 THROUGH 1080
   ========================================================== */

@media screen and (max-width:1080px){

  main#app .premium-founder{
    padding-top:
      clamp(18px,2.2vw,24px)!important;

    padding-bottom:
      clamp(18px,2.2vw,24px)!important;
  }


  /*
     Exactly one topology for every width 0-1080.
  */

  main#app .premium-founder .premium-founder-grid{
    display:flex!important;
    flex-direction:column!important;

    width:100%!important;

    gap:
      clamp(10px,1.5vw,14px)!important;
  }


  /*
     Preserve one identical Family-A order.
  */

  main#app .premium-founder .founder-media-approved{
    order:1!important;
  }

  main#app .premium-founder .founder-interactive{
    order:2!important;
  }


  /*
     Image remains centered and proportional.

     No 390 / 520 / 700 / 760 / 900 / 1024
     crop or size rule.
  */

  main#app .premium-founder .founder-media-approved{
    width:min(
      calc(100% - 24px),
      516.667px
    )!important;

    max-width:516.667px!important;

    aspect-ratio:5 / 6!important;
  }


  /*
     Keep current Family-A caption arrangement without
     changing the image box itself.
  */

  main#app .premium-founder
  .founder-media-approved figcaption{
    order:-1!important;

    position:static!important;

    margin:0 0 6px!important;
  }
}


/* ==========================================================
   FAMILY B — 1081 THROUGH 1920
   ========================================================== */

@media screen and (min-width:1081px) and (max-width:1920px){

  main#app .premium-founder{
    padding-top:
      clamp(22px,1.7vw,30px)!important;

    padding-bottom:
      clamp(22px,1.7vw,30px)!important;
  }


  /*
     One desktop layout from 1081 through 1920.
  */

  main#app .premium-founder .premium-founder-grid{
    display:grid!important;

    grid-template-columns:
      minmax(0,1fr)
      minmax(0,516.667px)!important;

    gap:
      clamp(18px,1.6vw,24px)!important;

    align-items:center!important;
  }


  main#app .premium-founder .founder-interactive{
    grid-column:1!important;
    grid-row:1!important;

    order:initial!important;
  }


  main#app .premium-founder .founder-media-approved{
    grid-column:2!important;
    grid-row:1!important;

    order:initial!important;

    width:min(
      100%,
      516.667px
    )!important;

    max-width:516.667px!important;

    aspect-ratio:5 / 6!important;

    justify-self:end!important;
  }


  /*
     Caption remains overlayed on desktop as designed.
     Its geometry no longer changes the actual image crop.
  */

  main#app .premium-founder
  .founder-media-approved figcaption{
    position:absolute!important;

    left:15px!important;
    right:15px!important;
    bottom:15px!important;

    margin:0!important;
  }
}


/* ==========================================================
   TS_HOME_PROCESS_TWO_FAMILY_COMPACT_ANIMATED_V1

   SCOPE:
   Homepage "How TechScales Works" section ONLY.

   FOUNDER:
   APPROVED / FROZEN / UNTOUCHED.

   FAMILY A:
   0px - 1080px = ONE topology

   FAMILY B:
   1081px - 1920px = ONE topology
   ========================================================== */


/* ==========================================================
   SHARED COMPACT GEOMETRY
   ========================================================== */

main#app .homepage-process{
  height:auto!important;
  min-height:0!important;
}

main#app .homepage-process .homepage-process-head{
  min-height:0!important;
}

main#app .homepage-process .homepage-process-head h2{
  margin-top:8px!important;
  margin-bottom:0!important;
}

main#app .homepage-process .homepage-process-head > p{
  margin-top:0!important;
  margin-bottom:0!important;
}


/* ----------------------------------------------------------
   PROCESS CARDS
   ---------------------------------------------------------- */

main#app .homepage-process .homepage-process-track{
  align-items:start!important;
}

main#app .homepage-process .homepage-process-track article{
  position:relative!important;

  height:auto!important;
  min-height:0!important;
  max-height:none!important;

  align-self:start!important;

  transition:
    transform .24s ease,
    border-color .24s ease,
    box-shadow .24s ease!important;
}

main#app .homepage-process .homepage-process-track article:hover,
main#app .homepage-process .homepage-process-track article:focus{
  transform:translateY(-4px)!important;

  border-color:rgba(46,196,214,.46)!important;

  box-shadow:
    0 12px 28px rgba(0,0,0,.16),
    0 0 24px rgba(46,196,214,.055)!important;
}


/* Step number */

main#app .homepage-process
.homepage-process-track article > span{
  display:block!important;

  margin:0!important;
}


/* ----------------------------------------------------------
   ICON CONTAINER
   ---------------------------------------------------------- */

main#app .homepage-process
.homepage-process-track article > i{
  position:relative!important;

  display:grid!important;
  place-items:center!important;

  overflow:hidden!important;

  margin:
    12px 0 10px!important;

  isolation:isolate!important;

  transition:
    border-color .24s ease,
    box-shadow .24s ease,
    transform .24s ease!important;

  animation:
    tsProcessIconGlow 3.2s ease-in-out infinite!important;
}


/* moving light inside every icon box */

main#app .homepage-process
.homepage-process-track article > i::before{
  content:"";

  position:absolute;
  inset:-45%;

  z-index:-1;

  background:
    radial-gradient(
      circle,
      rgba(74,222,236,.18) 0%,
      rgba(46,196,214,.07) 34%,
      transparent 67%
    );

  animation:
    tsProcessIconAura 3.8s ease-in-out infinite!important;
}


/* SVG itself moves */

main#app .homepage-process
.homepage-process-track article > i svg{
  position:relative!important;
  z-index:1!important;

  transform-origin:center!important;

  animation:
    tsProcessIconMotion 2.8s ease-in-out infinite!important;

  filter:
    drop-shadow(0 0 5px rgba(93,226,239,.16));
}


/* Different timing on every process step */

main#app .homepage-process
.homepage-process-track article:nth-child(1) > i,
main#app .homepage-process
.homepage-process-track article:nth-child(1) > i::before,
main#app .homepage-process
.homepage-process-track article:nth-child(1) > i svg{
  animation-delay:0s!important;
}

main#app .homepage-process
.homepage-process-track article:nth-child(2) > i,
main#app .homepage-process
.homepage-process-track article:nth-child(2) > i::before,
main#app .homepage-process
.homepage-process-track article:nth-child(2) > i svg{
  animation-delay:.22s!important;
}

main#app .homepage-process
.homepage-process-track article:nth-child(3) > i,
main#app .homepage-process
.homepage-process-track article:nth-child(3) > i::before,
main#app .homepage-process
.homepage-process-track article:nth-child(3) > i svg{
  animation-delay:.44s!important;
}

main#app .homepage-process
.homepage-process-track article:nth-child(4) > i,
main#app .homepage-process
.homepage-process-track article:nth-child(4) > i::before,
main#app .homepage-process
.homepage-process-track article:nth-child(4) > i svg{
  animation-delay:.66s!important;
}

main#app .homepage-process
.homepage-process-track article:nth-child(5) > i,
main#app .homepage-process
.homepage-process-track article:nth-child(5) > i::before,
main#app .homepage-process
.homepage-process-track article:nth-child(5) > i svg{
  animation-delay:.88s!important;
}


/* Extra response on hover */

main#app .homepage-process
.homepage-process-track article:hover > i,
main#app .homepage-process
.homepage-process-track article:focus > i{
  transform:translateY(-2px)!important;

  border-color:rgba(77,215,229,.48)!important;

  box-shadow:
    0 0 20px rgba(46,196,214,.12)!important;
}


/* ----------------------------------------------------------
   CARD TEXT
   ---------------------------------------------------------- */

main#app .homepage-process .homepage-process-track h3{
  margin:
    0 0 5px!important;
}

main#app .homepage-process .homepage-process-track p{
  margin:0!important;

  line-height:1.55!important;
}


/* ----------------------------------------------------------
   ACTIONS
   ---------------------------------------------------------- */

main#app .homepage-process .homepage-process-actions{
  gap:8px!important;
}


/* ==========================================================
   FAMILY A
   0 THROUGH 1080
   ========================================================== */

@media screen and (max-width:1080px){

  main#app .homepage-process{
    padding-top:
      clamp(20px,2.8vw,30px)!important;

    padding-bottom:
      clamp(20px,2.8vw,30px)!important;
  }


  /*
     ONE heading topology for ALL 0-1080.
     Removes old 760 layout change.
  */

  main#app .homepage-process .homepage-process-head{
    display:grid!important;

    grid-template-columns:
      minmax(0,1fr)!important;

    gap:
      clamp(8px,1.5vw,12px)!important;

    margin-bottom:
      clamp(14px,2vw,20px)!important;
  }


  /*
     ONE card topology throughout Family A.
     Overrides old 3-column and <=760 changes.
  */

  main#app .homepage-process .homepage-process-track{
    display:grid!important;

    grid-template-columns:
      minmax(0,1fr)!important;

    gap:
      clamp(7px,1.2vw,10px)!important;
  }


  main#app .homepage-process
  .homepage-process-track article{
    width:100%!important;

    min-height:0!important;

    padding:
      clamp(12px,1.8vw,16px)!important;
  }


  main#app .homepage-process
  .homepage-process-track article > i{
    width:
      clamp(38px,5vw,42px)!important;

    height:
      clamp(38px,5vw,42px)!important;
  }


  main#app .homepage-process
  .homepage-process-track article > i svg{
    width:
      clamp(17px,2.4vw,20px)!important;

    height:
      clamp(17px,2.4vw,20px)!important;
  }


  /*
     Connector is not useful in stacked Family A.
  */

  main#app .homepage-process
  .homepage-process-track article > b{
    display:none!important;
  }


  /*
     Same button placement throughout Family A.
  */

  main#app .homepage-process .homepage-process-actions{
    display:grid!important;

    grid-template-columns:
      minmax(0,1fr)!important;

    width:100%!important;

    margin-top:
      clamp(12px,1.8vw,18px)!important;
  }

  main#app .homepage-process
  .homepage-process-actions > *{
    width:100%!important;
  }
}


/* ==========================================================
   FAMILY B
   1081 THROUGH 1920
   ========================================================== */

@media screen and (min-width:1081px) and (max-width:1920px){

  main#app .homepage-process{
    /*
       Significantly lower than the previous large section.
    */

    padding-top:
      clamp(24px,2vw,34px)!important;

    padding-bottom:
      clamp(24px,2vw,34px)!important;
  }


  /*
     Existing desktop composition retained:
     title/copy side by side.
  */

  main#app .homepage-process .homepage-process-head{
    display:grid!important;

    grid-template-columns:
      minmax(0,1.25fr)
      minmax(0,.75fr)!important;

    gap:
      clamp(28px,3vw,48px)!important;

    align-items:end!important;

    margin-bottom:
      clamp(18px,1.7vw,24px)!important;
  }


  /*
     Existing 5-card desktop row retained.
  */

  main#app .homepage-process .homepage-process-track{
    display:grid!important;

    grid-template-columns:
      repeat(5,minmax(0,1fr))!important;

    gap:
      clamp(8px,.8vw,12px)!important;
  }


  /*
     BEFORE:
       min-height 245px
       padding 22px

     AFTER:
       content-driven
       compact padding
  */

  main#app .homepage-process
  .homepage-process-track article{
    min-height:0!important;

    padding:
      clamp(13px,1vw,16px)!important;
  }


  main#app .homepage-process
  .homepage-process-track article > i{
    width:
      clamp(40px,2.8vw,44px)!important;

    height:
      clamp(40px,2.8vw,44px)!important;
  }


  main#app .homepage-process
  .homepage-process-track article > i svg{
    width:
      clamp(18px,1.4vw,20px)!important;

    height:
      clamp(18px,1.4vw,20px)!important;
  }


  /*
     Keep desktop process connectors.
  */

  main#app .homepage-process
  .homepage-process-track article > b{
    display:block!important;

    top:46%!important;
  }


  /*
     Animated traveling signal along every connector.
  */

  main#app .homepage-process
  .homepage-process-track article > b::after{
    content:"";

    position:absolute;

    top:-2px;
    left:0;

    width:5px;
    height:5px;

    border-radius:50%;

    background:#6be5ef;

    box-shadow:
      0 0 8px rgba(107,229,239,.65);

    animation:
      tsProcessConnectorPulse 2.2s linear infinite;
  }


  main#app .homepage-process
  .homepage-process-track article:nth-child(2) > b::after{
    animation-delay:.35s;
  }

  main#app .homepage-process
  .homepage-process-track article:nth-child(3) > b::after{
    animation-delay:.7s;
  }

  main#app .homepage-process
  .homepage-process-track article:nth-child(4) > b::after{
    animation-delay:1.05s;
  }


  main#app .homepage-process .homepage-process-actions{
    display:flex!important;

    flex-direction:row!important;
    flex-wrap:wrap!important;

    justify-content:center!important;

    margin-top:
      clamp(14px,1.4vw,20px)!important;
  }
}


/* ==========================================================
   ANIMATION KEYFRAMES
   ========================================================== */

@keyframes tsProcessIconMotion{
  0%,
  100%{
    transform:translateY(0) rotate(0deg);
  }

  45%{
    transform:translateY(-3px) rotate(-2deg);
  }

  70%{
    transform:translateY(-1px) rotate(2deg);
  }
}

@keyframes tsProcessIconGlow{
  0%,
  100%{
    box-shadow:
      0 0 0 rgba(46,196,214,0);
  }

  50%{
    box-shadow:
      0 0 18px rgba(46,196,214,.105);
  }
}

@keyframes tsProcessIconAura{
  0%,
  100%{
    opacity:.35;
    transform:translate3d(-4%,4%,0);
  }

  50%{
    opacity:1;
    transform:translate3d(5%,-4%,0);
  }
}

@keyframes tsProcessConnectorPulse{
  from{
    left:0;
    opacity:0;
  }

  20%{
    opacity:1;
  }

  80%{
    opacity:1;
  }

  to{
    left:calc(100% - 5px);
    opacity:0;
  }
}


/* ==========================================================
   ACCESSIBILITY
   ========================================================== */

@media (prefers-reduced-motion:reduce){

  main#app .homepage-process
  .homepage-process-track article > i,

  main#app .homepage-process
  .homepage-process-track article > i::before,

  main#app .homepage-process
  .homepage-process-track article > i svg,

  main#app .homepage-process
  .homepage-process-track article > b::after{
    animation:none!important;
  }

  main#app .homepage-process
  .homepage-process-track article:hover,

  main#app .homepage-process
  .homepage-process-track article:focus{
    transform:none!important;
  }
}


/* ==========================================================
   TS_HOME_WHY_TECHSCALES_TWO_FAMILY_PRO_V1

   SCOPE:
   Home page — Why TechScales ONLY.

   0-1080:
   one consistent stacked topology

   1081-1920:
   one consistent professional two-column topology

   NO content changes.
   NO Founder changes.
   NO Process changes.
   NO other section changes.
   ========================================================== */


/* ==========================================================
   SHARED SECTION GEOMETRY
   ========================================================== */

main#app .why{
  position:relative!important;

  height:auto!important;
  min-height:0!important;

  overflow:hidden!important;
}

main#app .why .why-grid{
  min-height:0!important;

  align-items:start!important;
}


/* ----------------------------------------------------------
   LEFT INTRO
   ---------------------------------------------------------- */

main#app .why .section-heading{
  min-width:0!important;
  min-height:0!important;
}

main#app .why .section-heading h2{
  margin-top:12px!important;
  margin-bottom:12px!important;
}

main#app .why .section-heading > p{
  max-width:560px!important;

  margin-top:0!important;
  margin-bottom:16px!important;
}


/* ==========================================================
   PRINCIPLE CARDS
   ========================================================== */

main#app .why .principles{
  display:grid!important;

  min-width:0!important;
  min-height:0!important;

  border-top:0!important;
}

main#app .why .principle{
  position:relative!important;

  display:grid!important;

  grid-template-columns:
    auto minmax(0,1fr)!important;

  align-items:start!important;

  height:auto!important;
  min-height:0!important;
  max-height:none!important;

  margin:0!important;

  overflow:hidden!important;

  border:
    1px solid rgba(84,144,166,.22)!important;

  border-radius:16px!important;

  background:
    linear-gradient(
      145deg,
      rgba(14,25,39,.88),
      rgba(8,15,25,.94)
    )!important;

  box-shadow:
    0 8px 28px rgba(0,0,0,.08)!important;

  transition:
    transform .24s ease,
    border-color .24s ease,
    box-shadow .24s ease,
    background .24s ease!important;
}


/* animated cyan edge */

main#app .why .principle::before{
  content:"";

  position:absolute;

  top:0;
  left:-45%;

  width:42%;
  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(91,222,234,.9),
      transparent
    );

  opacity:.62;

  animation:
    tsWhyCardSweep 4.6s ease-in-out infinite;
}


/* subtle interior glow */

main#app .why .principle::after{
  content:"";

  position:absolute;

  width:120px;
  height:120px;

  right:-70px;
  bottom:-80px;

  border-radius:50%;

  pointer-events:none;

  background:
    radial-gradient(
      circle,
      rgba(46,196,214,.10),
      transparent 70%
    );

  opacity:.55;

  transition:
    opacity .25s ease,
    transform .25s ease!important;
}


main#app .why .principle:hover,
main#app .why .principle:focus-within{
  transform:translateY(-4px)!important;

  border-color:
    rgba(80,210,224,.45)!important;

  box-shadow:
    0 14px 34px rgba(0,0,0,.15),
    0 0 24px rgba(46,196,214,.055)!important;
}

main#app .why .principle:hover::after,
main#app .why .principle:focus-within::after{
  opacity:1;

  transform:
    translate(-8px,-8px) scale(1.08);
}


/* ----------------------------------------------------------
   NUMBER
   ---------------------------------------------------------- */

main#app .why .principle > span{
  position:relative!important;
  z-index:1!important;

  display:grid!important;
  place-items:center!important;

  flex:none!important;

  margin:0!important;

  border:
    1px solid rgba(71,194,208,.26)!important;

  border-radius:10px!important;

  color:#70d8e4!important;

  background:
    rgba(11,29,40,.8)!important;

  font-weight:700!important;
  letter-spacing:.05em!important;

  animation:
    tsWhyNumberPulse 3.4s ease-in-out infinite!important;
}


/* ----------------------------------------------------------
   COPY
   ---------------------------------------------------------- */

main#app .why .principle > div{
  position:relative!important;
  z-index:1!important;

  min-width:0!important;
}

main#app .why .principle h3{
  margin:
    0 0 5px!important;

  line-height:1.22!important;
}

main#app .why .principle p{
  margin:0!important;

  line-height:1.52!important;
}


/* ----------------------------------------------------------
   STAGGER ANIMATION
   ---------------------------------------------------------- */

main#app .why .principle:nth-child(1)::before,
main#app .why .principle:nth-child(1) > span{
  animation-delay:0s!important;
}

main#app .why .principle:nth-child(2)::before,
main#app .why .principle:nth-child(2) > span{
  animation-delay:.35s!important;
}

main#app .why .principle:nth-child(3)::before,
main#app .why .principle:nth-child(3) > span{
  animation-delay:.7s!important;
}

main#app .why .principle:nth-child(4)::before,
main#app .why .principle:nth-child(4) > span{
  animation-delay:1.05s!important;
}


/* ==========================================================
   FAMILY A
   0 THROUGH 1080
   ========================================================== */

@media screen and (max-width:1080px){

  main#app .why{
    padding-top:
      clamp(20px,2.8vw,30px)!important;

    padding-bottom:
      clamp(20px,2.8vw,30px)!important;
  }


  /*
     ONE topology throughout 0-1080.
     Intro first, four principle cards beneath.
  */

  main#app .why .why-grid{
    display:grid!important;

    grid-template-columns:
      minmax(0,1fr)!important;

    gap:
      clamp(14px,2vw,20px)!important;
  }


  main#app .why .principles{
    grid-template-columns:
      minmax(0,1fr)!important;

    gap:
      clamp(8px,1.4vw,12px)!important;
  }


  main#app .why .principle{
    grid-template-columns:
      clamp(38px,5vw,44px)
      minmax(0,1fr)!important;

    gap:
      clamp(10px,1.5vw,13px)!important;

    padding:
      clamp(12px,1.8vw,16px)!important;
  }


  main#app .why .principle > span{
    width:
      clamp(38px,5vw,44px)!important;

    height:
      clamp(38px,5vw,44px)!important;

    font-size:
      clamp(9px,1.2vw,11px)!important;
  }
}


/* ==========================================================
   FAMILY B
   1081 THROUGH 1920
   ========================================================== */

@media screen and (min-width:1081px) and (max-width:1920px){

  main#app .why{
    padding-top:
      clamp(26px,2vw,36px)!important;

    padding-bottom:
      clamp(26px,2vw,36px)!important;
  }


  /*
     Professional desktop composition:
     left introduction + right 2x2 cards.
  */

  main#app .why .why-grid{
    display:grid!important;

    grid-template-columns:
      minmax(280px,.72fr)
      minmax(0,1.28fr)!important;

    gap:
      clamp(28px,3.2vw,48px)!important;

    align-items:start!important;
  }


  main#app .why .principles{
    grid-template-columns:
      repeat(2,minmax(0,1fr))!important;

    gap:
      clamp(10px,1vw,14px)!important;
  }


  main#app .why .principle{
    grid-template-columns:
      42px minmax(0,1fr)!important;

    gap:
      clamp(10px,.9vw,13px)!important;

    padding:
      clamp(14px,1.1vw,18px)!important;
  }


  main#app .why .principle > span{
    width:42px!important;
    height:42px!important;

    font-size:10px!important;
  }
}


/* ==========================================================
   ANIMATION
   ========================================================== */

@keyframes tsWhyCardSweep{

  0%{
    left:-45%;
    opacity:0;
  }

  18%{
    opacity:.7;
  }

  58%{
    opacity:.7;
  }

  76%,
  100%{
    left:105%;
    opacity:0;
  }
}


@keyframes tsWhyNumberPulse{

  0%,
  100%{
    box-shadow:
      0 0 0 rgba(46,196,214,0);

    border-color:
      rgba(71,194,208,.26);
  }

  50%{
    box-shadow:
      0 0 16px rgba(46,196,214,.10);

    border-color:
      rgba(83,215,228,.43);
  }
}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion:reduce){

  main#app .why .principle,
  main#app .why .principle::before,
  main#app .why .principle::after,
  main#app .why .principle > span{
    animation:none!important;
    transition:none!important;
  }

  main#app .why .principle:hover,
  main#app .why .principle:focus-within{
    transform:none!important;
  }
}


/* ==========================================================
   TS_SERVICES_CAPABILITY_FLOW_PRO_V1

   SCOPE:
   /services -> .services-directory -> CAPABILITY FLOW ONLY

   MOTION:
   input activate
   -> clean signal sweep
   -> capability core activate
   -> output confirm
   -> reset

   NO geometry changes.
   NO section placement changes.
   NO other fallback diagram changes.
   ========================================================== */


/* ----------------------------------------------------------
   KEEP THE EXISTING SIZE + POSITION.
   Improve visual clarity only.
   ---------------------------------------------------------- */

main#app
.services-directory[data-section-diagram="fallback"]
.section-context-diagram{
  opacity:1!important;

  color:#86edf5!important;
}


/* precise SVG rendering */

main#app
.services-directory[data-section-diagram="fallback"]
.section-context-diagram svg{
  shape-rendering:geometricPrecision!important;
  text-rendering:geometricPrecision!important;
}


/* ==========================================================
   TRACK
   ========================================================== */

/*
   Stable underlying route.
   No blinking or movement.
*/

main#app
.services-directory[data-section-diagram="fallback"]
.section-context-diagram .scd-track{
  stroke:
    rgba(111,205,216,.28)!important;

  stroke-width:
    1.35!important;

  stroke-linecap:
    round!important;
}


/*
   Replace the current continuously moving dashed line with
   ONE clean travelling signal segment.
*/

main#app
.services-directory[data-section-diagram="fallback"]
.section-context-diagram .scd-track-live{
  stroke:
    #78e9f2!important;

  stroke-width:
    2.15!important;

  stroke-linecap:
    round!important;

  stroke-dasharray:
    64 384!important;

  animation:
    tsCapabilityFlowSignal 4.8s
    cubic-bezier(.42,0,.20,1)
    infinite!important;

  filter:
    drop-shadow(
      0 0 5px rgba(91,222,234,.38)
    )!important;
}


/* ==========================================================
   LEFT INPUT NODE
   ========================================================== */

main#app
.services-directory[data-section-diagram="fallback"]
.section-context-diagram
.scd-node:first-of-type rect{
  animation:
    tsCapabilityInputNode 4.8s
    ease-in-out
    infinite!important;
}

main#app
.services-directory[data-section-diagram="fallback"]
.section-context-diagram
.scd-node:first-of-type circle{
  animation:
    tsCapabilityInputIcon 4.8s
    ease-in-out
    infinite!important;
}


/* ==========================================================
   CENTER CAPABILITY CORE
   ========================================================== */

main#app
.services-directory[data-section-diagram="fallback"]
.section-context-diagram
.scd-node-core rect{
  fill:
    rgba(14,61,73,.42)!important;

  stroke:
    rgba(115,222,190,.64)!important;

  animation:
    tsCapabilityCoreNode 4.8s
    ease-in-out
    infinite!important;
}


/*
   Keep center artwork stationary.
   No zoom / rotation / bounce.
*/

main#app
.services-directory[data-section-diagram="fallback"]
.section-context-diagram
.scd-node-core path,

main#app
.services-directory[data-section-diagram="fallback"]
.section-context-diagram
.scd-node-core circle{
  transform:none!important;
}


/* ==========================================================
   RIGHT OUTPUT NODE
   ========================================================== */

main#app
.services-directory[data-section-diagram="fallback"]
.section-context-diagram
.scd-node:last-of-type rect{
  animation:
    tsCapabilityOutputNode 4.8s
    ease-in-out
    infinite!important;
}

main#app
.services-directory[data-section-diagram="fallback"]
.section-context-diagram
.scd-node:last-of-type path{
  animation:
    tsCapabilityOutputIcon 4.8s
    ease-in-out
    infinite!important;
}


/* ==========================================================
   EXISTING SIGNAL DOT
   Make it a restrained confirmation pulse.
   ========================================================== */

main#app
.services-directory[data-section-diagram="fallback"]
.section-context-diagram .scd-signal{
  fill:#d4fbfd!important;

  opacity:.36;

  filter:
    drop-shadow(
      0 0 6px rgba(116,238,246,.58)
    )!important;

  animation:
    tsCapabilitySignalPulse 4.8s
    ease-in-out
    infinite!important;
}


/* ==========================================================
   LABEL — KEEP CLEAR AND STATIONARY
   ========================================================== */

main#app
.services-directory[data-section-diagram="fallback"]
.section-context-diagram .scd-label{
  fill:#91dce4!important;

  opacity:1!important;

  font-weight:800!important;

  letter-spacing:.12em!important;

  filter:none!important;

  transform:none!important;

  animation:none!important;
}


/* ==========================================================
   MOTION SEQUENCE
   ========================================================== */


/*
   One bright segment runs left -> right once per cycle.
*/

@keyframes tsCapabilityFlowSignal{

  0%,
  8%{
    stroke-dashoffset:
      448;

    opacity:0;
  }

  14%{
    opacity:1;
  }

  68%{
    opacity:1;
  }

  76%,
  100%{
    stroke-dashoffset:
      -64;

    opacity:0;
  }
}


/*
   Step 1 — input confirms briefly.
*/

@keyframes tsCapabilityInputNode{

  0%,
  7%,
  28%,
  100%{
    stroke:
      rgba(125,231,241,.50);

    fill:
      rgba(7,27,41,.72);

    filter:none;
  }

  12%,
  20%{
    stroke:
      rgba(121,236,244,.92);

    fill:
      rgba(11,47,60,.88);

    filter:
      drop-shadow(
        0 0 8px rgba(83,219,230,.22)
      );
  }
}


@keyframes tsCapabilityInputIcon{

  0%,
  7%,
  28%,
  100%{
    stroke:#86edf5;

    opacity:.72;
  }

  12%,
  20%{
    stroke:#d9fcfe;

    opacity:1;
  }
}


/*
   Step 2 — central capability core activates as signal arrives.
*/

@keyframes tsCapabilityCoreNode{

  0%,
  28%,
  64%,
  100%{
    stroke:
      rgba(115,222,190,.64);

    fill:
      rgba(14,61,73,.42);

    filter:none;
  }

  38%,
  54%{
    stroke:
      rgba(142,239,207,.96);

    fill:
      rgba(21,83,91,.68);

    filter:
      drop-shadow(
        0 0 11px rgba(113,229,196,.22)
      );
  }
}


/*
   Step 3 — output activates after the core.
*/

@keyframes tsCapabilityOutputNode{

  0%,
  54%,
  88%,
  100%{
    stroke:
      rgba(125,231,241,.50);

    fill:
      rgba(7,27,41,.72);

    filter:none;
  }

  65%,
  78%{
    stroke:
      rgba(121,236,244,.92);

    fill:
      rgba(11,47,60,.88);

    filter:
      drop-shadow(
        0 0 8px rgba(83,219,230,.22)
      );
  }
}


@keyframes tsCapabilityOutputIcon{

  0%,
  54%,
  88%,
  100%{
    stroke:#86edf5;

    opacity:.72;
  }

  65%,
  78%{
    stroke:#e2fdff;

    opacity:1;
  }
}


/*
   Very small signal confirmation only.
   No moving / bouncing dot.
*/

@keyframes tsCapabilitySignalPulse{

  0%,
  25%,
  70%,
  100%{
    opacity:.25;
  }

  40%,
  55%{
    opacity:1;
  }
}


/* ==========================================================
   ACCESSIBILITY
   ========================================================== */

@media (prefers-reduced-motion:reduce){

  main#app
  .services-directory[data-section-diagram="fallback"]
  .section-context-diagram
  .scd-track-live,

  main#app
  .services-directory[data-section-diagram="fallback"]
  .section-context-diagram
  .scd-node rect,

  main#app
  .services-directory[data-section-diagram="fallback"]
  .section-context-diagram
  .scd-node circle,

  main#app
  .services-directory[data-section-diagram="fallback"]
  .section-context-diagram
  .scd-node path,

  main#app
  .services-directory[data-section-diagram="fallback"]
  .section-context-diagram
  .scd-node-core rect,

  main#app
  .services-directory[data-section-diagram="fallback"]
  .section-context-diagram
  .scd-signal{
    animation:none!important;
  }


  main#app
  .services-directory[data-section-diagram="fallback"]
  .section-context-diagram
  .scd-track-live{
    stroke-dasharray:none!important;
    opacity:.58!important;
  }
}


/* ==========================================================
   TS_SERVICES_CAPABILITY_FLOW_PRO_V2

   Dedicated Services Capability Flow.

   Same component geometry at every width.
   The existing parent container controls physical size.

   No zoom.
   No bounce.
   No rotation.
   No continuous dashed-line motion.
   ========================================================== */


/* ----------------------------------------------------------
   BASE VISUAL
   ---------------------------------------------------------- */

main#app
.services-directory
.services-capability-flow-pro{
  opacity:1!important;
}

main#app
.services-directory
.services-capability-flow-pro svg{
  display:block;

  width:100%;
  height:100%;

  shape-rendering:geometricPrecision;
  text-rendering:geometricPrecision;
}


/* ----------------------------------------------------------
   STATIC RAILS
   ---------------------------------------------------------- */

main#app
.services-directory
.services-capability-flow-pro
.cap-pro-rail{
  fill:none;

  stroke:rgba(92,194,207,.34);
  stroke-width:1.5;

  stroke-linecap:round;
}


/* ----------------------------------------------------------
   INPUT / OUTPUT SHELLS
   ---------------------------------------------------------- */

main#app
.services-directory
.services-capability-flow-pro
.cap-pro-input rect,

main#app
.services-directory
.services-capability-flow-pro
.cap-pro-output rect{
  fill:rgba(6,24,36,.94);

  stroke:rgba(93,205,218,.46);
  stroke-width:1.3;

  transition:none;
}


/* input symbol */

main#app
.services-directory
.services-capability-flow-pro
.cap-pro-input circle{
  fill:rgba(9,39,51,.95);

  stroke:#74e3ec;
  stroke-width:1.5;
}

main#app
.services-directory
.services-capability-flow-pro
.cap-pro-input-mark{
  fill:none;

  stroke:#83edf4;
  stroke-width:1.4;

  stroke-linecap:round;
}


/* output arrow */

main#app
.services-directory
.services-capability-flow-pro
.cap-pro-output-arrow{
  fill:none;

  stroke:#83edf4;
  stroke-width:1.8;

  stroke-linecap:round;
  stroke-linejoin:round;
}


/* ----------------------------------------------------------
   CORE
   ---------------------------------------------------------- */

main#app
.services-directory
.services-capability-flow-pro
.cap-pro-core-shell{
  fill:rgba(7,30,43,.98);

  stroke:rgba(103,220,230,.54);
  stroke-width:1.4;
}

main#app
.services-directory
.services-capability-flow-pro
.cap-pro-core-inner{
  fill:rgba(12,48,61,.78);

  stroke:rgba(103,220,230,.22);
  stroke-width:1;
}

main#app
.services-directory
.services-capability-flow-pro
.cap-pro-core-symbol{
  fill:none;

  stroke:rgba(140,236,243,.78);
  stroke-width:1.5;

  stroke-linecap:round;
}

main#app
.services-directory
.services-capability-flow-pro
.cap-pro-core-status{
  fill:#71e3ed;

  opacity:.42;
}


/* ----------------------------------------------------------
   MOVING SIGNALS
   ---------------------------------------------------------- */

main#app
.services-directory
.services-capability-flow-pro
.cap-pro-packet{
  fill:#d6fcff;

  opacity:0;

  filter:
    drop-shadow(
      0 0 6px rgba(106,236,245,.75)
    );
}


/*
   Signal 1:
   input -> system core
*/

main#app
.services-directory
.services-capability-flow-pro
.cap-pro-packet-in{
  animation:
    tsCapProPacketIn
    5.2s
    cubic-bezier(.42,0,.22,1)
    infinite;
}


/*
   Signal 2:
   system core -> output
*/

main#app
.services-directory
.services-capability-flow-pro
.cap-pro-packet-out{
  animation:
    tsCapProPacketOut
    5.2s
    cubic-bezier(.42,0,.22,1)
    infinite;
}


/* ----------------------------------------------------------
   SEQUENTIAL NODE ACTIVATION
   ---------------------------------------------------------- */

main#app
.services-directory
.services-capability-flow-pro
.cap-pro-input rect{
  animation:
    tsCapProInput
    5.2s
    ease-in-out
    infinite;
}

main#app
.services-directory
.services-capability-flow-pro
.cap-pro-core-shell{
  animation:
    tsCapProCore
    5.2s
    ease-in-out
    infinite;
}

main#app
.services-directory
.services-capability-flow-pro
.cap-pro-core-status{
  animation:
    tsCapProStatus
    5.2s
    ease-in-out
    infinite;
}

main#app
.services-directory
.services-capability-flow-pro
.cap-pro-status-b{
  animation-delay:.08s;
}

main#app
.services-directory
.services-capability-flow-pro
.cap-pro-status-c{
  animation-delay:.16s;
}

main#app
.services-directory
.services-capability-flow-pro
.cap-pro-output rect{
  animation:
    tsCapProOutput
    5.2s
    ease-in-out
    infinite;
}


/* ----------------------------------------------------------
   LABEL
   ---------------------------------------------------------- */

main#app
.services-directory
.services-capability-flow-pro
.cap-pro-label{
  fill:#8bd7df;

  font-family:
    var(--font-primary,Inter,Arial,sans-serif);

  font-size:10px;
  font-weight:800;

  letter-spacing:.15em;

  text-anchor:middle;

  opacity:.95;

  animation:none!important;
  filter:none!important;
}


/* ==========================================================
   MOTION TIMELINE
   ========================================================== */


/* input activation */

@keyframes tsCapProInput{

  0%,
  4%,
  23%,
  100%{
    stroke:rgba(93,205,218,.46);
    fill:rgba(6,24,36,.94);
    filter:none;
  }

  8%,
  16%{
    stroke:rgba(116,235,244,.92);
    fill:rgba(9,43,55,.98);

    filter:
      drop-shadow(
        0 0 7px rgba(82,214,225,.20)
      );
  }
}


/* first packet */

@keyframes tsCapProPacketIn{

  0%,
  12%{
    transform:translateX(0);
    opacity:0;
  }

  16%{
    opacity:1;
  }

  36%{
    transform:translateX(106px);
    opacity:1;
  }

  40%,
  100%{
    transform:translateX(106px);
    opacity:0;
  }
}


/* core activation */

@keyframes tsCapProCore{

  0%,
  31%,
  61%,
  100%{
    stroke:rgba(103,220,230,.54);
    fill:rgba(7,30,43,.98);
    filter:none;
  }

  39%,
  53%{
    stroke:rgba(127,237,244,.94);
    fill:rgba(10,48,60,.98);

    filter:
      drop-shadow(
        0 0 10px rgba(82,219,231,.18)
      );
  }
}


@keyframes tsCapProStatus{

  0%,
  34%,
  61%,
  100%{
    opacity:.34;
  }

  40%,
  54%{
    opacity:1;
  }
}


/* second packet */

@keyframes tsCapProPacketOut{

  0%,
  52%{
    transform:translateX(0);
    opacity:0;
  }

  57%{
    opacity:1;
  }

  76%{
    transform:translateX(106px);
    opacity:1;
  }

  80%,
  100%{
    transform:translateX(106px);
    opacity:0;
  }
}


/* output confirmation */

@keyframes tsCapProOutput{

  0%,
  71%,
  92%,
  100%{
    stroke:rgba(93,205,218,.46);
    fill:rgba(6,24,36,.94);
    filter:none;
  }

  78%,
  87%{
    stroke:rgba(116,235,244,.92);
    fill:rgba(9,43,55,.98);

    filter:
      drop-shadow(
        0 0 7px rgba(82,214,225,.20)
      );
  }
}


/* ==========================================================
   ACCESSIBILITY
   ========================================================== */

@media (prefers-reduced-motion:reduce){

  main#app
  .services-directory
  .services-capability-flow-pro
  *{
    animation:none!important;
  }

  main#app
  .services-directory
  .services-capability-flow-pro
  .cap-pro-packet{
    display:none;
  }
}


/* ==========================================================
   TS_CAPABILITY_FLOW_LABEL_VISIBILITY_V1

   SCOPE:
   "CAPABILITY FLOW" text ONLY.

   No SVG geometry changes.
   No animation changes.
   No responsive changes.
   ========================================================== */

main#app
.services-directory
.services-capability-flow-pro
.cap-pro-label{

  /* Before: 10px */
  font-size:15px!important;

  font-weight:900!important;

  /* tighter tracking improves legibility */
  letter-spacing:.08em!important;

  /* brighter text */
  fill:#d7fbff!important;

  opacity:1!important;

  /*
     Very fine edge definition.
     This is not a glow and does not blur the text.
  */
  stroke:rgba(117,231,240,.28)!important;
  stroke-width:.18px!important;

  paint-order:stroke fill!important;

  filter:
    drop-shadow(
      0 1px 1px rgba(0,0,0,.72)
    )!important;

  animation:none!important;
  transform:none!important;
}


/* ==========================================================
   TS_AI_AGENTS_CARD_COMPACT_ACTION_ROW_V1

   SCOPE:
   AI Agents / service-hub cards ONLY.

   CHANGES:
   - remove stretched card height
   - content-driven height
   - remove dead vertical space
   - Ask Planner AI + My System on one horizontal row
   - keep View details attached to service content

   NO grid-count change.
   NO route change.
   NO content change.
   NO icon change.
   ========================================================== */


/* ==========================================================
   SHARED — BOTH RESPONSIVE FAMILIES
   ========================================================== */


/*
   GRID:
   cards must not stretch to the tallest item in the row.
*/

main#app
.service-hub-page
.hub-service-grid{
  align-items:start!important;
  align-content:start!important;

  grid-auto-rows:max-content!important;
}


/*
   CARD:
   content determines actual card height.
*/

main#app
.service-hub-page
.hub-service-card{
  display:grid!important;

  grid-template-columns:
    minmax(0,1fr)
    auto!important;

  grid-template-rows:
    auto
    auto!important;

  align-content:start!important;
  align-items:end!important;

  align-self:start!important;

  width:100%!important;

  height:auto!important;
  min-height:0!important;
  max-height:none!important;

  padding:12px!important;

  column-gap:8px!important;
  row-gap:8px!important;
}


/* ==========================================================
   MAIN SERVICE CONTENT
   ========================================================== */

main#app
.service-hub-page
.hub-service-card
> .hub-service-main{
  grid-column:1 / -1!important;
  grid-row:1!important;

  display:flex!important;

  align-items:flex-start!important;

  min-height:0!important;
  height:auto!important;

  margin:0!important;
  padding:0!important;

  gap:10px!important;
}


/* icon remains same visual type, only removes wasted box space */

main#app
.service-hub-page
.hub-service-card
> .hub-service-main
> span{
  flex:0 0 34px!important;

  width:34px!important;
  height:34px!important;

  min-width:34px!important;
  min-height:34px!important;

  margin:0!important;
}


/* content column */

main#app
.service-hub-page
.hub-service-card
> .hub-service-main
> div{
  min-width:0!important;

  display:flex!important;
  flex-direction:column!important;

  align-items:flex-start!important;
}


/* title */

main#app
.service-hub-page
.hub-service-card h3{
  margin:
    0 0 5px!important;

  min-height:0!important;
  height:auto!important;

  line-height:1.18!important;
}


/*
   Summary:
   keep the card compact and prevent one long description
   from making the whole grid row enormous.
*/

main#app
.service-hub-page
.hub-service-card p{
  margin:
    0 0 6px!important;

  min-height:0!important;
  height:auto!important;

  line-height:1.38!important;

  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:4!important;

  overflow:hidden!important;
}


/* View details stays directly after description */

main#app
.service-hub-page
.hub-service-main strong{
  display:inline-flex!important;

  align-items:center!important;

  width:auto!important;

  min-height:0!important;

  margin:
    1px 0 0!important;

  padding:0!important;

  gap:5px!important;

  align-self:flex-start!important;
}


/* ==========================================================
   ACTION ROW
   ========================================================== */


/*
   Ask Planner AI = LEFT
*/

main#app
.service-hub-page
.hub-service-card
> button[data-action="planner"]{
  grid-column:1!important;
  grid-row:2!important;

  justify-self:start!important;
  align-self:center!important;

  width:auto!important;

  height:auto!important;
  min-height:32px!important;

  margin:0!important;

  padding:
    6px 8px!important;

  white-space:nowrap!important;
}


/*
   + My System = RIGHT
*/

main#app
.service-hub-page
.hub-service-card
> .add-system-action,

main#app
.service-hub-page
.hub-service-card
> button[data-system-add]{
  grid-column:2!important;
  grid-row:2!important;

  justify-self:end!important;
  align-self:center!important;

  width:auto!important;

  height:auto!important;
  min-height:32px!important;

  margin:0!important;

  padding:
    6px 9px!important;

  white-space:nowrap!important;
}


/*
   Prevent any inherited push-to-bottom rules.
*/

main#app
.service-hub-page
.hub-service-card
> button{
  margin-top:0!important;
  margin-bottom:0!important;
}


/* ==========================================================
   FAMILY A — 0 THROUGH 1080
   ========================================================== */

@media screen and (max-width:1080px){

  /*
     Do NOT change existing AI Agents grid topology.
     Only compact its cards.
  */

  main#app
  .service-hub-page
  .hub-service-card{
    padding:
      clamp(10px,1.7vw,12px)!important;

    row-gap:
      clamp(6px,1vw,8px)!important;
  }


  /*
     Button placement remains identical at every width
     inside Family A:
       Ask Planner AI | + My System
  */

  main#app
  .service-hub-page
  .hub-service-card
  > button[data-action="planner"],

  main#app
  .service-hub-page
  .hub-service-card
  > .add-system-action,

  main#app
  .service-hub-page
  .hub-service-card
  > button[data-system-add]{
    min-height:30px!important;

    padding:
      5px 7px!important;

    font-size:
      clamp(10.5px,1.45vw,11.5px)!important;
  }
}


/* ==========================================================
   FAMILY B — 1081 THROUGH 1920
   ========================================================== */

@media screen and (min-width:1081px) and (max-width:1920px){

  /*
     Existing desktop card/grid positions stay unchanged.
  */

  main#app
  .service-hub-page
  .hub-service-card{
    padding:
      clamp(11px,.8vw,13px)!important;

    row-gap:
      clamp(7px,.6vw,9px)!important;
  }


  /*
     One fixed action topology through entire desktop family.
  */

  main#app
  .service-hub-page
  .hub-service-card
  > button[data-action="planner"],

  main#app
  .service-hub-page
  .hub-service-card
  > .add-system-action,

  main#app
  .service-hub-page
  .hub-service-card
  > button[data-system-add]{
    min-height:31px!important;

    padding:
      5px 8px!important;

    font-size:
      clamp(11px,.7vw,12px)!important;
  }
}


/* ==========================================================
   TS_HUB_SUPPORT_PRO_LAYOUT_V1

   SCOPE:
   Service-hub support area ONLY.

   FIX:
   - eliminate empty third desktop column
   - two cards use full available container width
   - FAQ aligns to exactly the same container
   - controlled section spacing
   - same topology throughout each responsive family

   AI AGENT SERVICE CARDS = FROZEN / UNTOUCHED.
   ========================================================== */


/* ==========================================================
   SHARED
   ========================================================== */

main#app .hub-support{
  height:auto!important;
  min-height:0!important;
}


/*
   The cards already live inside .container.
   Ensure that container remains centered and owns the
   complete support-card width.
*/

main#app
.hub-support
> .system-connection-grid{
  width:
    min(
      var(--ts-container),
      calc(
        100% -
        (var(--ts-page-gutter) * 2)
      )
    )!important;

  max-width:
    var(--ts-container)!important;

  min-width:0!important;

  margin-inline:auto!important;

  align-items:stretch!important;
  align-content:start!important;
}


/*
   IMPORTANT:
   hub-faq is outside the .container in the existing markup.

   Give it the exact SAME container geometry so both blocks
   have matching left and right edges.
*/

main#app
.hub-support
> .hub-faq{
  width:
    min(
      var(--ts-container),
      calc(
        100% -
        (var(--ts-page-gutter) * 2)
      )
    )!important;

  max-width:
    var(--ts-container)!important;

  min-width:0!important;

  margin-inline:auto!important;
}


/* ----------------------------------------------------------
   SUPPORT CARDS
   ---------------------------------------------------------- */

main#app
.hub-support
> .system-connection-grid
> article{
  display:flex!important;
  flex-direction:column!important;

  width:100%!important;

  height:auto!important;
  min-height:0!important;
  max-height:none!important;

  align-self:stretch!important;
}


/*
   Keep each existing CTA aligned professionally at the
   bottom of its card without changing the actual action.
*/

main#app
.hub-support
> .system-connection-grid
> article
> :is(a.btn,button.btn){
  width:100%!important;

  margin-top:auto!important;
}


/* ----------------------------------------------------------
   FAQ
   ---------------------------------------------------------- */

main#app
.hub-support
> .hub-faq
.faq-item{
  width:100%!important;

  margin:0!important;
}

main#app
.hub-support
> .hub-faq
.faq-item
> button{
  width:100%!important;

  min-width:0!important;
}


/* ==========================================================
   FAMILY A
   0 THROUGH 1080
   ========================================================== */

@media screen and (max-width:1080px){

  main#app .hub-support{
    padding-top:
      clamp(18px,2.6vw,26px)!important;

    padding-bottom:
      clamp(18px,2.6vw,26px)!important;
  }


  /*
     ONE consistent Family-A topology:
     card
     card
     FAQ
  */

  main#app
  .hub-support
  > .system-connection-grid{
    display:grid!important;

    grid-template-columns:
      minmax(0,1fr)!important;

    gap:
      clamp(8px,1.4vw,12px)!important;
  }


  main#app
  .hub-support
  > .hub-faq{
    margin-top:
      clamp(12px,1.8vw,18px)!important;
  }
}


/* ==========================================================
   FAMILY B
   1081 THROUGH 1920
   ========================================================== */

@media screen and (min-width:1081px) and (max-width:1920px){

  main#app .hub-support{
    padding-top:
      clamp(22px,1.7vw,30px)!important;

    padding-bottom:
      clamp(22px,1.7vw,30px)!important;
  }


  /*
     EXACT FIX FOR CURRENT SCREENSHOT:

     BEFORE:
     3 grid columns + only 2 cards
     = empty third column.

     AFTER:
     exactly 2 equal columns.
  */

  main#app
  .hub-support
  > .system-connection-grid{
    display:grid!important;

    grid-template-columns:
      repeat(2,minmax(0,1fr))!important;

    gap:
      clamp(12px,1.2vw,18px)!important;
  }


  /*
     FAQ sits directly beneath the same two-card container
     and shares exactly the same horizontal boundaries.
  */

  main#app
  .hub-support
  > .hub-faq{
    margin-top:
      clamp(18px,1.5vw,24px)!important;
  }
}

/* ==========================================================
   TS_SERVICES_PASS1_DESKTOP_CLARITY_SPACING_V1

   SCOPE:
   /services desktop family ONLY via Services-owned classes.

   CHANGES:
   - improve Service Architecture diagram clarity
   - reduce Hero -> first service hub dead space

   NO content / DOM / mobile / Home / AI Agents / SEO changes.
   ========================================================== */

@media screen and (min-width:1081px) and (max-width:1920px){

  /* --------------------------------------------------------
     SERVICES HERO — architecture visual clarity
     -------------------------------------------------------- */

  main#app >
  .services-hero[data-page-hero="true"]
  .services-network{
    opacity:1!important;
  }

  main#app >
  .services-hero[data-page-hero="true"]
  .services-network svg{
    transform:scale(1.07)!important;
    transform-origin:50% 50%!important;
  }

  main#app >
  .services-hero[data-page-hero="true"]
  .services-network text{
    fill:#d4e8ec!important;
    opacity:1!important;
    font-weight:600!important;
  }

  main#app >
  .services-hero[data-page-hero="true"]
  .services-network .hd-sub,
  main#app >
  .services-hero[data-page-hero="true"]
  .services-network .hd-caption{
    fill:#94c4cc!important;
    opacity:.96!important;
    font-weight:500!important;
  }

  main#app >
  .services-hero[data-page-hero="true"]
  .services-network .hd-service-core text:not(.hd-sub){
    fill:#d7eaed!important;
    opacity:1!important;
    font-weight:600!important;
  }

  main#app >
  .services-hero[data-page-hero="true"]
  .services-network :is(
    .hd-wire,
    .hd-wire-live,
    .hd-orbit-a,
    .hd-orbit-b
  ){
    opacity:.72!important;
  }

  main#app >
  .services-hero[data-page-hero="true"]
  .services-network :is(
    .hd-node rect,
    .hd-capability rect,
    .hd-channel rect,
    .hd-pillar rect,
    .hd-service-core rect
  ){
    stroke-opacity:.68!important;
  }

  main#app >
  .services-hero[data-page-hero="true"]
  .services-network :is(
    .hd-signal,
    .hd-motion-dot,
    .hd-motion-dot-secondary
  ){
    opacity:.72!important;
  }


  /* --------------------------------------------------------
     HERO -> FIRST SERVICES DIRECTORY TRANSITION
     -------------------------------------------------------- */

  main#app >
  .services-hero[data-page-hero="true"]{
    margin-bottom:0!important;
  }

  main#app >
  .services-hero[data-page-hero="true"] +
  .services-directory{
    padding-top:clamp(24px,1.7vw,32px)!important;
    margin-top:0!important;
  }
}
/* ==========================================================
   TS_AI_AGENTS_PASS1_DESKTOP_ACTIONS_DIAGRAM_V1

   SCOPE:
   AI Agents hero desktop family ONLY.

   CHANGES:
   - strategic 2 + utility 3 CTA hierarchy
   - improve AI Core diagram clarity
   - preserve Hero geometry and content

   NO Home / Services / mobile / SEO changes.
   ========================================================== */

@media screen and (min-width:1081px) and (max-width:1920px){

  /* --------------------------------------------------------
     CTA HIERARCHY

     ROW 1:
     Analyse | Book

     ROW 2:
     Voice | Messaging | Add to My System
     -------------------------------------------------------- */

  main#app >
  .ai-agent-hero[data-page-hero="true"]
  [data-hero-copy="true"]
  .hero-actions{
    display:grid!important;
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    width:100%!important;
    max-width:760px!important;
    gap:8px!important;
    align-items:stretch!important;
  }


  main#app >
  .ai-agent-hero[data-page-hero="true"]
  [data-hero-copy="true"]
  .hero-actions > :nth-child(1),

  main#app >
  .ai-agent-hero[data-page-hero="true"]
  [data-hero-copy="true"]
  .hero-actions > :nth-child(2){
    grid-column:span 3!important;
  }


  main#app >
  .ai-agent-hero[data-page-hero="true"]
  [data-hero-copy="true"]
  .hero-actions > :nth-child(3),

  main#app >
  .ai-agent-hero[data-page-hero="true"]
  [data-hero-copy="true"]
  .hero-actions > :nth-child(4),

  main#app >
  .ai-agent-hero[data-page-hero="true"]
  [data-hero-copy="true"]
  .hero-actions > :nth-child(5){
    grid-column:span 2!important;
  }


  main#app >
  .ai-agent-hero[data-page-hero="true"]
  [data-hero-copy="true"]
  .hero-actions :is(
    .btn,
    .text-btn,
    button
  ){
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    min-height:42px!important;
    height:auto!important;
    margin:0!important;
    padding:8px 10px!important;
    justify-content:center!important;
    white-space:normal!important;
    line-height:1.2!important;
  }


  /* --------------------------------------------------------
     AI CORE DIAGRAM
     -------------------------------------------------------- */

  main#app >
  .ai-agent-hero[data-page-hero="true"]
  [data-hero-diagram="ai-agents"]{
    opacity:1!important;
  }


  main#app >
  .ai-agent-hero[data-page-hero="true"]
  [data-hero-diagram="ai-agents"] svg{
    transform:scale(1.10)!important;
    transform-origin:50% 50%!important;
  }


  main#app >
  .ai-agent-hero[data-page-hero="true"]
  [data-hero-diagram="ai-agents"] text{
    fill:#d4e8ec!important;
    opacity:1!important;
    font-weight:600!important;
  }


  main#app >
  .ai-agent-hero[data-page-hero="true"]
  [data-hero-diagram="ai-agents"] :is(
    .hd-sub,
    .hd-caption
  ){
    fill:#94c4cc!important;
    opacity:.96!important;
    font-weight:500!important;
  }


  main#app >
  .ai-agent-hero[data-page-hero="true"]
  [data-hero-diagram="ai-agents"]
  .hd-agent-core text:not(.hd-sub){
    fill:#d7eaed!important;
    opacity:1!important;
    font-weight:600!important;
  }


  main#app >
  .ai-agent-hero[data-page-hero="true"]
  [data-hero-diagram="ai-agents"]
  :is(
    .hd-node rect,
    .hd-capability rect,
    .hd-channel rect,
    .hd-agent-core circle
  ){
    stroke-opacity:.68!important;
  }


  main#app >
  .ai-agent-hero[data-page-hero="true"]
  [data-hero-diagram="ai-agents"]
  :is(
    .hd-signal,
    .hd-motion-dot,
    .hd-motion-dot-secondary
  ){
    opacity:.72!important;
  }
}

/* ==========================================================
   TS_HOME_LIVE_AI_WHY_SOURCE_AWARE_V8

   HOME ONLY:
   - Live AI Demos
   - Why TechScales

   Locks:
   - preserve animations
   - preserve original text
   - preserve original section DOM
   - no duplicate labels
   - no FAQ changes
   - no SEO/depth V6 changes
   ========================================================== */


/* ==========================================================
   LIVE AI DEMOS — SECTION
   ========================================================== */

main#app #live-agent-demos{
  height:auto!important;
  min-height:0!important;

  padding-top:
    clamp(28px,3vw,42px)!important;

  padding-bottom:
    clamp(28px,3vw,42px)!important;

  overflow:hidden!important;
}

main#app #live-agent-demos
.section-heading{
  margin-bottom:
    clamp(18px,2vw,24px)!important;
}

main#app #live-agent-demos
.demo-agent-grid{
  align-items:stretch!important;
  grid-auto-rows:auto!important;

  gap:
    clamp(10px,1vw,14px)!important;
}


/* ==========================================================
   LIVE AI — CARDS
   ========================================================== */

main#app #live-agent-demos
.demo-agent-card{
  display:grid!important;

  grid-template-columns:
    minmax(0,1fr)!important;

  grid-template-rows:
    auto auto minmax(34px,auto) auto!important;

  width:100%!important;
  min-width:0!important;

  height:100%!important;
  min-height:0!important;
  max-height:none!important;

  align-self:stretch!important;
  align-content:start!important;

  margin:0!important;

  padding:
    clamp(11px,.9vw,14px)!important;

  gap:6px!important;

  overflow:hidden!important;
}

main#app #live-agent-demos
.demo-agent-card > h3{
  min-height:0!important;

  margin:2px 0 2px!important;

  font-size:
    clamp(17px,1.25vw,20px)!important;

  line-height:1.16!important;
}

main#app #live-agent-demos
.demo-agent-card > p{
  min-height:34px!important;
  height:auto!important;

  margin:0!important;

  font-size:12px!important;
  line-height:1.42!important;
}


/* ==========================================================
   LIVE AI — VISUAL SHELL
   ========================================================== */

main#app #live-agent-demos
.demo-visual-shell{
  position:relative!important;

  width:100%!important;

  height:
    clamp(170px,10.5vw,184px)!important;

  min-height:
    clamp(170px,10.5vw,184px)!important;

  max-height:184px!important;

  margin:0 0 4px!important;

  overflow:hidden!important;

  isolation:isolate!important;
}

main#app #live-agent-demos
.demo-visual-shell > .demo-visual{
  position:absolute!important;

  inset:6px!important;

  width:
    calc(100% - 12px)!important;

  height:
    calc(100% - 12px)!important;

  min-height:0!important;
  max-height:none!important;

  margin:0!important;

  overflow:hidden!important;
}


/* ==========================================================
   LIVE AI — ORIGINAL LABEL LAYER
   ========================================================== */

main#app #live-agent-demos
.ts-demo-label-layer-v8{
  position:absolute!important;

  inset:0!important;

  z-index:30!important;

  width:100%!important;
  height:100%!important;

  margin:0!important;
  padding:0!important;

  pointer-events:none!important;

  overflow:hidden!important;
}

main#app #live-agent-demos
[data-ts-demo-label-v8]{
  position:absolute!important;

  display:inline-flex!important;

  align-items:center!important;
  justify-content:center!important;

  width:auto!important;
  min-width:0!important;

  max-width:
    calc(100% - 20px)!important;

  height:auto!important;
  min-height:25px!important;
  max-height:none!important;

  margin:0!important;

  padding:5px 9px!important;

  border:
    1px solid
    rgba(46,196,214,.27)!important;

  border-radius:8px!important;

  background:
    rgba(6,18,29,.94)!important;

  color:#F5F7FA!important;

  box-shadow:none!important;

  font-size:9px!important;
  font-weight:650!important;
  line-height:1!important;

  white-space:nowrap!important;

  overflow:hidden!important;
  text-overflow:ellipsis!important;

  opacity:1!important;
  visibility:visible!important;

  transform:none!important;
  translate:none!important;

  animation:none!important;
  transition:none!important;
}


/* ==========================================================
   PLANNER LABEL POSITIONS
   ========================================================== */

main#app #live-agent-demos
[data-demo-type="planner"]
[data-ts-demo-label-v8="requirement"]{
  top:12px!important;
  left:12px!important;

  right:auto!important;
  bottom:auto!important;
}

main#app #live-agent-demos
[data-demo-type="planner"]
[data-ts-demo-label-v8="service"]{
  top:12px!important;
  right:12px!important;

  left:auto!important;
  bottom:auto!important;
}

main#app #live-agent-demos
[data-demo-type="planner"]
[data-ts-demo-label-v8="workflow"]{
  top:46px!important;
  right:12px!important;

  left:auto!important;
  bottom:auto!important;
}

main#app #live-agent-demos
[data-demo-type="planner"]
[data-ts-demo-label-v8="system"]{
  top:80px!important;
  right:12px!important;

  left:auto!important;
  bottom:auto!important;
}

main#app #live-agent-demos
[data-demo-type="planner"]
[data-ts-demo-label-v8="strategy"]{
  right:12px!important;
  bottom:12px!important;

  top:auto!important;
  left:auto!important;
}


/* ==========================================================
   MESSAGING LABEL POSITIONS
   ========================================================== */

main#app #live-agent-demos
[data-demo-type="messaging"]
[data-ts-demo-label-v8="name"]{
  left:12px!important;
  bottom:12px!important;

  top:auto!important;
  right:auto!important;
}

main#app #live-agent-demos
[data-demo-type="messaging"]
[data-ts-demo-label-v8="need"]{
  left:67px!important;
  bottom:12px!important;

  top:auto!important;
  right:auto!important;
}

main#app #live-agent-demos
[data-demo-type="messaging"]
[data-ts-demo-label-v8="route"]{
  left:119px!important;
  bottom:12px!important;

  top:auto!important;
  right:auto!important;
}

main#app #live-agent-demos
[data-demo-type="messaging"]
[data-ts-demo-label-v8="handoff"]{
  right:12px!important;
  bottom:12px!important;

  top:auto!important;
  left:auto!important;
}


/* ==========================================================
   VOICE LABEL POSITIONS
   ========================================================== */

main#app #live-agent-demos
[data-demo-type="voice"]
[data-ts-demo-label-v8="response"]{
  left:12px!important;
  bottom:12px!important;

  top:auto!important;
  right:auto!important;
}

main#app #live-agent-demos
[data-demo-type="voice"]
[data-ts-demo-label-v8="transfer"]{
  right:12px!important;
  bottom:12px!important;

  top:auto!important;
  left:auto!important;
}


/* ==========================================================
   LIVE AI — ACTION GRID
   ========================================================== */

main#app #live-agent-demos
.demo-actions{
  display:grid!important;

  grid-template-columns:
    repeat(2,minmax(0,1fr))!important;

  width:100%!important;

  margin:4px 0 0!important;
  padding:0!important;

  gap:6px!important;

  align-items:stretch!important;
}

main#app #live-agent-demos
.demo-actions .text-link{
  display:flex!important;

  width:100%!important;
  min-width:0!important;

  min-height:34px!important;
  height:auto!important;

  margin:0!important;
  padding:7px 9px!important;

  align-items:center!important;
  justify-content:space-between!important;

  font-size:11px!important;
  line-height:1.15!important;

  white-space:normal!important;
}


/* ==========================================================
   WHY TECHSCALES — SECTION
   ========================================================== */

main#app #why-techscales,
main#app .why{
  height:auto!important;
  min-height:0!important;

  padding-top:
    clamp(28px,3vw,40px)!important;

  padding-bottom:
    clamp(28px,3vw,40px)!important;
}

main#app #why-techscales .why-grid,
main#app .why .why-grid{
  display:grid!important;

  grid-template-columns:
    minmax(260px,.70fr)
    minmax(0,1.30fr)!important;

  gap:
    clamp(26px,3vw,42px)!important;

  align-items:center!important;

  min-height:0!important;
}


/* ==========================================================
   WHY — COPY
   ========================================================== */

main#app #why-techscales
.section-heading,
main#app .why
.section-heading{
  min-height:0!important;

  margin:0!important;
  padding:0!important;
}

main#app #why-techscales
.section-heading h2,
main#app .why
.section-heading h2{
  max-width:450px!important;

  margin:10px 0 10px!important;

  font-size:
    clamp(31px,2.7vw,40px)!important;

  line-height:1.05!important;
}

main#app #why-techscales
.section-heading > p,
main#app .why
.section-heading > p{
  max-width:430px!important;

  margin:0 0 14px!important;

  font-size:13.5px!important;
  line-height:1.52!important;
}


/* ==========================================================
   WHY — PRINCIPLE GRID
   ========================================================== */

main#app #why-techscales
.principles,
main#app .why
.principles{
  display:grid!important;

  grid-template-columns:
    repeat(2,minmax(0,1fr))!important;

  grid-auto-rows:auto!important;

  width:100%!important;

  gap:9px!important;

  margin:0!important;
  padding:0!important;
}

main#app #why-techscales
.principle,
main#app .why
.principle{
  display:grid!important;

  grid-template-columns:
    38px minmax(0,1fr)!important;

  gap:10px!important;

  align-items:start!important;

  width:100%!important;
  min-width:0!important;

  min-height:94px!important;

  height:auto!important;
  max-height:none!important;

  margin:0!important;
  padding:12px!important;

  border-radius:12px!important;

  overflow:hidden!important;
}

main#app #why-techscales
.principle > span,
main#app .why
.principle > span{
  display:flex!important;

  align-items:center!important;
  justify-content:center!important;

  width:34px!important;
  height:34px!important;

  min-width:34px!important;
  min-height:34px!important;

  margin:0!important;
  padding:0!important;

  font-size:9px!important;
  line-height:1!important;
}

main#app #why-techscales
.principle h3,
main#app .why
.principle h3{
  margin:0 0 4px!important;

  font-size:15px!important;
  line-height:1.23!important;
}

main#app #why-techscales
.principle p,
main#app .why
.principle p{
  margin:0!important;

  font-size:12px!important;
  line-height:1.42!important;
}


/* ==========================================================
   LAPTOP / TABLET
   ========================================================== */

@media(max-width:1080px){

  main#app #live-agent-demos
  .demo-agent-card{
    max-width:760px!important;

    margin-inline:auto!important;

    height:auto!important;
  }

  main#app #live-agent-demos
  .demo-visual-shell{
    height:180px!important;
    min-height:180px!important;
    max-height:180px!important;
  }

  main#app #live-agent-demos
  .demo-agent-card > p{
    min-height:0!important;
  }

  main#app #why-techscales .why-grid,
  main#app .why .why-grid{
    grid-template-columns:
      1fr!important;

    gap:18px!important;

    align-items:start!important;
  }

  main#app #why-techscales
  .section-heading,
  main#app .why
  .section-heading{
    max-width:620px!important;
  }

  main#app #why-techscales
  .section-heading h2,
  main#app .why
  .section-heading h2{
    max-width:590px!important;
  }
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:640px){

  main#app #live-agent-demos{
    padding-top:22px!important;
    padding-bottom:22px!important;
  }

  main#app #live-agent-demos
  .demo-agent-card{
    padding:10px!important;

    gap:5px!important;
  }

  main#app #live-agent-demos
  .demo-visual-shell{
    height:154px!important;
    min-height:154px!important;
    max-height:154px!important;
  }

  main#app #live-agent-demos
  [data-ts-demo-label-v8]{
    min-height:22px!important;

    padding:4px 7px!important;

    border-radius:7px!important;

    font-size:7.8px!important;
  }


  /* Planner */

  main#app #live-agent-demos
  [data-demo-type="planner"]
  [data-ts-demo-label-v8="requirement"]{
    top:9px!important;
    left:9px!important;
  }

  main#app #live-agent-demos
  [data-demo-type="planner"]
  [data-ts-demo-label-v8="service"]{
    top:9px!important;
    right:9px!important;
  }

  main#app #live-agent-demos
  [data-demo-type="planner"]
  [data-ts-demo-label-v8="workflow"]{
    top:38px!important;
    right:9px!important;
  }

  main#app #live-agent-demos
  [data-demo-type="planner"]
  [data-ts-demo-label-v8="system"]{
    top:67px!important;
    right:9px!important;
  }

  main#app #live-agent-demos
  [data-demo-type="planner"]
  [data-ts-demo-label-v8="strategy"]{
    right:9px!important;
    bottom:9px!important;
  }


  /* Messaging */

  main#app #live-agent-demos
  [data-demo-type="messaging"]
  [data-ts-demo-label-v8="name"]{
    left:9px!important;
    bottom:9px!important;
  }

  main#app #live-agent-demos
  [data-demo-type="messaging"]
  [data-ts-demo-label-v8="need"]{
    left:53px!important;
    bottom:9px!important;
  }

  main#app #live-agent-demos
  [data-demo-type="messaging"]
  [data-ts-demo-label-v8="route"]{
    left:96px!important;
    bottom:9px!important;
  }

  main#app #live-agent-demos
  [data-demo-type="messaging"]
  [data-ts-demo-label-v8="handoff"]{
    right:9px!important;
    bottom:9px!important;
  }


  /* Voice */

  main#app #live-agent-demos
  [data-demo-type="voice"]
  [data-ts-demo-label-v8="response"]{
    left:9px!important;
    bottom:9px!important;
  }

  main#app #live-agent-demos
  [data-demo-type="voice"]
  [data-ts-demo-label-v8="transfer"]{
    right:9px!important;
    bottom:9px!important;
  }


  /* Actions */

  main#app #live-agent-demos
  .demo-actions{
    gap:5px!important;
  }

  main#app #live-agent-demos
  .demo-actions .text-link{
    min-height:32px!important;

    padding:6px 7px!important;

    font-size:10px!important;
  }


  /* Why TechScales */

  main#app #why-techscales,
  main#app .why{
    padding-top:22px!important;
    padding-bottom:22px!important;
  }

  main#app #why-techscales
  .section-heading h2,
  main#app .why
  .section-heading h2{
    font-size:26px!important;
  }

  main#app #why-techscales
  .principles,
  main#app .why
  .principles{
    grid-template-columns:
      1fr!important;

    gap:7px!important;
  }

  main#app #why-techscales
  .principle,
  main#app .why
  .principle{
    grid-template-columns:
      32px minmax(0,1fr)!important;

    min-height:0!important;

    gap:8px!important;

    padding:10px!important;
  }

  main#app #why-techscales
  .principle > span,
  main#app .why
  .principle > span{
    width:30px!important;
    height:30px!important;

    min-width:30px!important;
    min-height:30px!important;

    font-size:8px!important;
  }

  main#app #why-techscales
  .principle h3,
  main#app .why
  .principle h3{
    font-size:13.5px!important;
  }

  main#app #why-techscales
  .principle p,
  main#app .why
  .principle p{
    font-size:11.25px!important;
  }
}


/* ==========================================================
   320PX SAFETY
   ========================================================== */

@media(max-width:380px){

  main#app #live-agent-demos
  .demo-visual-shell{
    height:146px!important;
    min-height:146px!important;
    max-height:146px!important;
  }

  main#app #live-agent-demos
  .demo-actions .text-link{
    font-size:9.5px!important;

    padding-left:6px!important;
    padding-right:6px!important;
  }
}

/* ==========================================================
   TS_HOME_LIVE_AI_FINAL_V9_CSS

   Scope:
   HOME > LIVE AI DEMOS ONLY

   Why TechScales is intentionally NOT included.
   ========================================================== */


/* ==========================================================
   STABILISE ALL V8/V9 LABELS
   ========================================================== */

main#app
#live-agent-demos
.ts-demo-label-layer-v8{
  z-index:40!important;

  overflow:hidden!important;

  pointer-events:none!important;
}

main#app
#live-agent-demos
[data-ts-demo-label-v8],
main#app
#live-agent-demos
[data-ts-demo-label-v8] *{
  opacity:1!important;

  visibility:visible!important;

  display:inline-flex!important;

  align-items:center!important;
  justify-content:center!important;

  transform:none!important;
  translate:none!important;
  scale:none!important;
  rotate:none!important;

  filter:none!important;

  clip-path:none!important;

  animation:none!important;
  transition:none!important;

  text-indent:0!important;

  color:#F5F7FA!important;
}

main#app
#live-agent-demos
[data-ts-demo-label-v8]{
  position:absolute!important;

  width:auto!important;
  min-width:0!important;

  max-width:
    calc(100% - 20px)!important;

  height:auto!important;

  min-height:25px!important;

  margin:0!important;

  padding:5px 9px!important;

  border:
    1px solid
    rgba(46,196,214,.32)!important;

  border-radius:8px!important;

  background:
    rgba(6,18,29,.96)!important;

  box-shadow:none!important;

  font-size:9px!important;
  font-weight:650!important;
  line-height:1!important;

  letter-spacing:0!important;

  white-space:nowrap!important;

  overflow:hidden!important;
  text-overflow:ellipsis!important;
}


/* ==========================================================
   PLANNER
   ========================================================== */

main#app
#live-agent-demos
[data-demo-type="planner"]
[data-ts-demo-label-v8="requirement"]{
  top:12px!important;
  left:12px!important;

  right:auto!important;
  bottom:auto!important;
}

main#app
#live-agent-demos
[data-demo-type="planner"]
[data-ts-demo-label-v8="service"]{
  top:12px!important;
  right:12px!important;

  left:auto!important;
  bottom:auto!important;
}

main#app
#live-agent-demos
[data-demo-type="planner"]
[data-ts-demo-label-v8="workflow"]{
  top:46px!important;
  right:12px!important;

  left:auto!important;
  bottom:auto!important;
}

main#app
#live-agent-demos
[data-demo-type="planner"]
[data-ts-demo-label-v8="system"]{
  top:80px!important;
  right:12px!important;

  left:auto!important;
  bottom:auto!important;
}

main#app
#live-agent-demos
[data-demo-type="planner"]
[data-ts-demo-label-v8="strategy"]{
  right:12px!important;
  bottom:12px!important;

  top:auto!important;
  left:auto!important;
}


/* ==========================================================
   MESSAGING
   ========================================================== */

main#app
#live-agent-demos
[data-demo-type="messaging"]
[data-ts-demo-label-v8="name"]{
  left:12px!important;
  bottom:12px!important;

  top:auto!important;
  right:auto!important;
}

main#app
#live-agent-demos
[data-demo-type="messaging"]
[data-ts-demo-label-v8="need"]{
  left:67px!important;
  bottom:12px!important;

  top:auto!important;
  right:auto!important;
}

main#app
#live-agent-demos
[data-demo-type="messaging"]
[data-ts-demo-label-v8="route"]{
  left:119px!important;
  bottom:12px!important;

  top:auto!important;
  right:auto!important;
}

main#app
#live-agent-demos
[data-demo-type="messaging"]
[data-ts-demo-label-v8="handoff"]{
  right:12px!important;
  bottom:12px!important;

  top:auto!important;
  left:auto!important;
}


/* ==========================================================
   VOICE
   ========================================================== */

main#app
#live-agent-demos
[data-demo-type="voice"]
[data-ts-demo-label-v8="response"]{
  left:12px!important;
  bottom:12px!important;

  top:auto!important;
  right:auto!important;
}

main#app
#live-agent-demos
[data-demo-type="voice"]
[data-ts-demo-label-v8="transfer"]{
  right:12px!important;
  bottom:12px!important;

  top:auto!important;
  left:auto!important;
}


/* ==========================================================
   DO NOT LET INTERNAL ANIMATION COVER LABELS
   ========================================================== */

main#app
#live-agent-demos
.demo-visual-shell{
  isolation:isolate!important;

  overflow:hidden!important;
}

main#app
#live-agent-demos
.demo-visual-shell
> :not(.ts-demo-label-layer-v8){
  z-index:auto!important;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:640px){

  main#app
  #live-agent-demos
  [data-ts-demo-label-v8]{
    min-height:22px!important;

    padding:4px 7px!important;

    border-radius:7px!important;

    font-size:7.8px!important;
  }


  /* Planner */

  main#app
  #live-agent-demos
  [data-demo-type="planner"]
  [data-ts-demo-label-v8="requirement"]{
    top:9px!important;
    left:9px!important;
  }

  main#app
  #live-agent-demos
  [data-demo-type="planner"]
  [data-ts-demo-label-v8="service"]{
    top:9px!important;
    right:9px!important;
  }

  main#app
  #live-agent-demos
  [data-demo-type="planner"]
  [data-ts-demo-label-v8="workflow"]{
    top:38px!important;
    right:9px!important;
  }

  main#app
  #live-agent-demos
  [data-demo-type="planner"]
  [data-ts-demo-label-v8="system"]{
    top:67px!important;
    right:9px!important;
  }

  main#app
  #live-agent-demos
  [data-demo-type="planner"]
  [data-ts-demo-label-v8="strategy"]{
    right:9px!important;
    bottom:9px!important;
  }


  /* Messaging */

  main#app
  #live-agent-demos
  [data-demo-type="messaging"]
  [data-ts-demo-label-v8="name"]{
    left:9px!important;
    bottom:9px!important;
  }

  main#app
  #live-agent-demos
  [data-demo-type="messaging"]
  [data-ts-demo-label-v8="need"]{
    left:53px!important;
    bottom:9px!important;
  }

  main#app
  #live-agent-demos
  [data-demo-type="messaging"]
  [data-ts-demo-label-v8="route"]{
    left:96px!important;
    bottom:9px!important;
  }

  main#app
  #live-agent-demos
  [data-demo-type="messaging"]
  [data-ts-demo-label-v8="handoff"]{
    right:9px!important;
    bottom:9px!important;
  }


  /* Voice */

  main#app
  #live-agent-demos
  [data-demo-type="voice"]
  [data-ts-demo-label-v8="response"]{
    left:9px!important;
    bottom:9px!important;
  }

  main#app
  #live-agent-demos
  [data-demo-type="voice"]
  [data-ts-demo-label-v8="transfer"]{
    right:9px!important;
    bottom:9px!important;
  }
}


/* ==========================================================
   320PX
   ========================================================== */

@media(max-width:380px){

  main#app
  #live-agent-demos
  [data-ts-demo-label-v8]{
    min-height:20px!important;

    padding:4px 6px!important;

    font-size:7.2px!important;
  }

  main#app
  #live-agent-demos
  [data-demo-type="planner"]
  [data-ts-demo-label-v8="requirement"]{
    max-width:128px!important;
  }

  main#app
  #live-agent-demos
  [data-demo-type="messaging"]
  [data-ts-demo-label-v8="handoff"]{
    max-width:90px!important;
  }

  main#app
  #live-agent-demos
  [data-demo-type="voice"]
  [data-ts-demo-label-v8="transfer"]{
    max-width:105px!important;
  }
}

/* ==========================================================
   TS_HOME_LIVE_AI_SOURCE_V10_CSS

   STRICT SCOPE:
   #live-agent-demos ONLY

   Why TechScales intentionally untouched.
   ========================================================== */


/* ==========================================================
   SHELL
   ========================================================== */

main#app
#live-agent-demos
.demo-visual-shell.ts-live-ai-shell-v10{
  position:relative!important;

  width:100%!important;

  height:
    clamp(170px,10.5vw,184px)!important;

  min-height:
    clamp(170px,10.5vw,184px)!important;

  max-height:184px!important;

  margin:0 0 4px!important;

  overflow:hidden!important;

  isolation:isolate!important;
}

main#app
#live-agent-demos
.ts-live-ai-v10{
  position:absolute!important;

  inset:6px!important;

  display:block!important;

  box-sizing:border-box!important;

  width:
    calc(100% - 12px)!important;

  height:
    calc(100% - 12px)!important;

  min-width:0!important;
  min-height:0!important;

  border:
    1px solid
    rgba(46,196,214,.30)!important;

  border-radius:15px!important;

  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(46,196,214,.075),
      transparent 43%
    ),
    linear-gradient(
      145deg,
      rgba(5,18,28,.98),
      rgba(5,13,23,.98)
    )!important;

  overflow:hidden!important;

  contain:layout paint!important;
}

main#app
#live-agent-demos
.ts-live-ai-v10,
main#app
#live-agent-demos
.ts-live-ai-v10 *{
  box-sizing:border-box!important;
}


/* ==========================================================
   SUBTLE BACKGROUND
   ========================================================== */

main#app
#live-agent-demos
.ts-v10-grid-glow{
  position:absolute!important;

  inset:0!important;

  display:block!important;

  pointer-events:none!important;

  background-image:
    linear-gradient(
      rgba(46,196,214,.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(46,196,214,.035) 1px,
      transparent 1px
    )!important;

  background-size:
    26px 26px!important;

  mask-image:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.65),
      transparent
    )!important;

  opacity:.6!important;
}


/* ==========================================================
   UNIVERSAL LABEL
   ========================================================== */

main#app
#live-agent-demos
.ts-v10-label{
  position:relative!important;

  display:inline-flex!important;

  align-items:center!important;
  justify-content:center!important;

  width:auto!important;
  min-width:0!important;

  min-height:27px!important;

  margin:0!important;

  padding:
    5px 9px!important;

  border:
    1px solid
    rgba(46,196,214,.28)!important;

  border-radius:8px!important;

  background:
    rgba(7,24,36,.96)!important;

  color:#F5F7FA!important;

  box-shadow:
    inset 0 0 16px
    rgba(46,196,214,.025)!important;

  font-size:
    9px!important;

  font-weight:
    650!important;

  line-height:
    1!important;

  letter-spacing:
    0!important;

  white-space:
    nowrap!important;

  opacity:
    1!important;

  visibility:
    visible!important;

  transform:
    none!important;

  animation:
    none!important;

  transition:
    none!important;
}


/* ==========================================================
   PLANNER
   ========================================================== */

main#app
#live-agent-demos
.ts-live-ai-v10-planner{
  position:absolute!important;
}

main#app
#live-agent-demos
.ts-v10-planner-requirement{
  position:absolute!important;

  top:12px!important;
  left:12px!important;

  z-index:5!important;
}

main#app
#live-agent-demos
.ts-v10-planner-stack{
  position:absolute!important;

  top:12px!important;
  right:12px!important;

  z-index:5!important;

  display:flex!important;
  flex-direction:column!important;

  align-items:stretch!important;

  gap:6px!important;

  width:
    clamp(68px,20%,88px)!important;
}

main#app
#live-agent-demos
.ts-v10-planner-stack
.ts-v10-label{
  width:100%!important;

  justify-content:flex-start!important;
}

main#app
#live-agent-demos
.ts-v10-system-label{
  border-color:
    rgba(46,196,214,.58)!important;

  color:
    #7AE6F0!important;

  background:
    rgba(7,34,47,.98)!important;
}

main#app
#live-agent-demos
.ts-v10-planner-strategy{
  position:absolute!important;

  right:12px!important;
  bottom:12px!important;

  z-index:5!important;
}

main#app
#live-agent-demos
.ts-v10-planner-core{
  position:absolute!important;

  left:46%!important;
  top:57%!important;

  z-index:4!important;

  width:60px!important;
  height:60px!important;

  transform:
    translate(-50%,-50%)!important;

  display:flex!important;

  align-items:center!important;
  justify-content:center!important;
}

main#app
#live-agent-demos
.ts-v10-planner-core
strong{
  position:relative!important;

  z-index:4!important;

  display:flex!important;

  align-items:center!important;
  justify-content:center!important;

  width:43px!important;
  height:43px!important;

  border-radius:
    50%!important;

  background:
    linear-gradient(
      135deg,
      #2EC4D6,
      #6BE7EF
    )!important;

  color:
    #06131D!important;

  font-size:
    14px!important;

  font-weight:
    800!important;

  line-height:
    1!important;

  box-shadow:
    0 0 24px
    rgba(46,196,214,.20)!important;
}

main#app
#live-agent-demos
.ts-v10-core-ring{
  position:absolute!important;

  left:50%!important;
  top:50%!important;

  border:
    1px solid
    rgba(46,196,214,.32)!important;

  border-radius:
    50%!important;

  transform:
    translate(-50%,-50%)!important;

  pointer-events:none!important;
}

main#app
#live-agent-demos
.ts-v10-core-ring-a{
  width:54px!important;
  height:54px!important;

  animation:
    tsV10PlannerRing 2.8s
    ease-in-out infinite!important;
}

main#app
#live-agent-demos
.ts-v10-core-ring-b{
  width:68px!important;
  height:68px!important;

  opacity:.40!important;

  animation:
    tsV10PlannerRing 2.8s
    ease-in-out infinite
    .45s!important;
}

main#app
#live-agent-demos
.ts-v10-core-pulse{
  position:absolute!important;

  right:4px!important;
  top:8px!important;

  z-index:5!important;

  width:6px!important;
  height:6px!important;

  border-radius:
    50%!important;

  background:
    #62E7EE!important;

  box-shadow:
    0 0 12px
    rgba(98,231,238,.75)!important;

  animation:
    tsV10Dot 1.8s
    ease-in-out infinite!important;
}

main#app
#live-agent-demos
.ts-v10-planner-link{
  position:absolute!important;

  z-index:2!important;

  display:block!important;

  height:1px!important;

  background:
    linear-gradient(
      90deg,
      rgba(46,196,214,.06),
      rgba(46,196,214,.42),
      rgba(46,196,214,.08)
    )!important;

  transform-origin:
    left center!important;
}

main#app
#live-agent-demos
.ts-v10-planner-link-a{
  left:48%!important;
  top:54%!important;

  width:31%!important;

  transform:
    rotate(-17deg)!important;
}

main#app
#live-agent-demos
.ts-v10-planner-link-b{
  left:48%!important;
  top:59%!important;

  width:29%!important;

  transform:
    rotate(17deg)!important;
}


/* ==========================================================
   MESSAGING
   ========================================================== */

main#app
#live-agent-demos
.ts-v10-message-head{
  position:absolute!important;

  top:18px!important;
  left:18px!important;
  right:18px!important;

  display:flex!important;

  align-items:center!important;

  gap:12px!important;
}

main#app
#live-agent-demos
.ts-v10-message-avatar{
  flex:
    0 0 auto!important;

  width:31px!important;
  height:23px!important;

  border-radius:
    12px!important;

  background:
    linear-gradient(
      135deg,
      #2EC4D6,
      #66E1EB
    )!important;

  box-shadow:
    0 0 20px
    rgba(46,196,214,.14)!important;

  animation:
    tsV10MessagePulse
    2.4s ease-in-out infinite!important;
}

main#app
#live-agent-demos
.ts-v10-message-lines{
  flex:
    1 1 auto!important;

  min-width:0!important;

  display:flex!important;

  flex-direction:column!important;

  gap:7px!important;
}

main#app
#live-agent-demos
.ts-v10-message-lines
i{
  display:block!important;

  height:7px!important;

  border-radius:
    20px!important;

  background:
    linear-gradient(
      90deg,
      rgba(129,204,215,.82),
      rgba(129,204,215,.23)
    )!important;
}

main#app
#live-agent-demos
.ts-v10-message-lines
i:first-child{
  width:92%!important;
}

main#app
#live-agent-demos
.ts-v10-message-lines
i:last-child{
  width:72%!important;
}

main#app
#live-agent-demos
.ts-v10-message-flow{
  position:absolute!important;

  left:18px!important;
  right:18px!important;

  top:72px!important;

  height:30px!important;

  display:flex!important;

  align-items:center!important;

  gap:6px!important;
}

main#app
#live-agent-demos
.ts-v10-message-flow
span{
  display:block!important;

  height:3px!important;

  border-radius:
    10px!important;

  background:
    rgba(46,196,214,.17)!important;

  overflow:hidden!important;
}

main#app
#live-agent-demos
.ts-v10-message-flow
span:nth-child(1){
  width:26%!important;
}

main#app
#live-agent-demos
.ts-v10-message-flow
span:nth-child(2){
  width:39%!important;
}

main#app
#live-agent-demos
.ts-v10-message-flow
span:nth-child(3){
  flex:1!important;
}

main#app
#live-agent-demos
.ts-v10-message-flow
span::after{
  content:""!important;

  display:block!important;

  width:42%!important;
  height:100%!important;

  border-radius:inherit!important;

  background:
    linear-gradient(
      90deg,
      transparent,
      #55D9E4,
      transparent
    )!important;

  animation:
    tsV10MessageFlow
    2.6s linear infinite!important;
}

main#app
#live-agent-demos
.ts-v10-message-footer{
  position:absolute!important;

  left:12px!important;
  right:12px!important;
  bottom:12px!important;

  z-index:5!important;

  display:flex!important;

  align-items:center!important;

  gap:5px!important;

  min-width:0!important;
}

main#app
#live-agent-demos
.ts-v10-handoff{
  margin-left:auto!important;
}


/* ==========================================================
   VOICE / CALLING
   ========================================================== */

main#app
#live-agent-demos
.ts-v10-voice-status{
  position:absolute!important;

  left:18px!important;
  top:18px!important;

  width:7px!important;
  height:7px!important;

  border-radius:
    50%!important;

  background:
    #43CBD8!important;

  box-shadow:
    0 0 14px
    rgba(67,203,216,.58)!important;

  animation:
    tsV10Dot
    1.8s ease-in-out infinite!important;
}

main#app
#live-agent-demos
.ts-v10-voice-wave{
  position:absolute!important;

  left:50%!important;
  top:47%!important;

  transform:
    translate(-50%,-50%)!important;

  display:flex!important;

  align-items:center!important;
  justify-content:center!important;

  gap:6px!important;

  height:50px!important;
}

main#app
#live-agent-demos
.ts-v10-voice-wave
i{
  display:block!important;

  width:6px!important;

  border-radius:
    10px!important;

  background:
    linear-gradient(
      to bottom,
      #74EEF5,
      #2795EF
    )!important;

  box-shadow:
    0 0 12px
    rgba(46,196,214,.12)!important;

  transform-origin:
    center center!important;

  animation:
    tsV10VoiceWave
    1.25s ease-in-out infinite!important;
}

main#app
#live-agent-demos
.ts-v10-voice-wave
i:nth-child(1){
  height:19px!important;
  animation-delay:0s!important;
}

main#app
#live-agent-demos
.ts-v10-voice-wave
i:nth-child(2){
  height:34px!important;
  animation-delay:.12s!important;
}

main#app
#live-agent-demos
.ts-v10-voice-wave
i:nth-child(3){
  height:25px!important;
  animation-delay:.24s!important;
}

main#app
#live-agent-demos
.ts-v10-voice-wave
i:nth-child(4){
  height:39px!important;
  animation-delay:.36s!important;
}

main#app
#live-agent-demos
.ts-v10-voice-wave
i:nth-child(5){
  height:22px!important;
  animation-delay:.48s!important;
}

main#app
#live-agent-demos
.ts-v10-voice-track{
  position:absolute!important;

  left:18px!important;
  right:18px!important;
  bottom:50px!important;

  height:3px!important;

  border-radius:
    10px!important;

  background:
    rgba(46,196,214,.14)!important;

  overflow:hidden!important;
}

main#app
#live-agent-demos
.ts-v10-voice-track
span{
  display:block!important;

  width:34%!important;
  height:100%!important;

  border-radius:inherit!important;

  background:
    linear-gradient(
      90deg,
      transparent,
      #49D3DF,
      transparent
    )!important;

  animation:
    tsV10VoiceTrack
    2.7s linear infinite!important;
}

main#app
#live-agent-demos
.ts-v10-voice-footer{
  position:absolute!important;

  left:12px!important;
  right:12px!important;
  bottom:12px!important;

  z-index:5!important;

  display:flex!important;

  align-items:center!important;
  justify-content:space-between!important;

  gap:8px!important;
}


/* ==========================================================
   ANIMATION
   ========================================================== */

@keyframes tsV10PlannerRing{
  0%,
  100%{
    opacity:.30;
    scale:.90;
  }

  50%{
    opacity:.82;
    scale:1.05;
  }
}

@keyframes tsV10Dot{
  0%,
  100%{
    opacity:.45;
  }

  50%{
    opacity:1;
  }
}

@keyframes tsV10MessagePulse{
  0%,
  100%{
    transform:scale(.96);
  }

  50%{
    transform:scale(1.04);
  }
}

@keyframes tsV10MessageFlow{
  from{
    transform:translateX(-120%);
  }

  to{
    transform:translateX(300%);
  }
}

@keyframes tsV10VoiceWave{
  0%,
  100%{
    transform:scaleY(.60);
    opacity:.72;
  }

  50%{
    transform:scaleY(1.12);
    opacity:1;
  }
}

@keyframes tsV10VoiceTrack{
  from{
    transform:translateX(-120%);
  }

  to{
    transform:translateX(330%);
  }
}


/* ==========================================================
   TABLET
   ========================================================== */

@media(max-width:1080px){

  main#app
  #live-agent-demos
  .demo-visual-shell.ts-live-ai-shell-v10{
    height:180px!important;
    min-height:180px!important;
    max-height:180px!important;
  }
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:640px){

  main#app
  #live-agent-demos
  .demo-visual-shell.ts-live-ai-shell-v10{
    height:154px!important;
    min-height:154px!important;
    max-height:154px!important;
  }

  main#app
  #live-agent-demos
  .ts-live-ai-v10{
    inset:5px!important;

    width:
      calc(100% - 10px)!important;

    height:
      calc(100% - 10px)!important;

    border-radius:12px!important;
  }

  main#app
  #live-agent-demos
  .ts-v10-label{
    min-height:22px!important;

    padding:
      4px 7px!important;

    border-radius:7px!important;

    font-size:
      7.6px!important;
  }

  main#app
  #live-agent-demos
  .ts-v10-planner-requirement{
    top:9px!important;
    left:9px!important;
  }

  main#app
  #live-agent-demos
  .ts-v10-planner-stack{
    top:9px!important;
    right:9px!important;

    gap:5px!important;

    width:65px!important;
  }

  main#app
  #live-agent-demos
  .ts-v10-planner-strategy{
    right:9px!important;
    bottom:9px!important;
  }

  main#app
  #live-agent-demos
  .ts-v10-planner-core{
    left:43%!important;
    top:57%!important;

    width:52px!important;
    height:52px!important;
  }

  main#app
  #live-agent-demos
  .ts-v10-planner-core
  strong{
    width:37px!important;
    height:37px!important;

    font-size:12px!important;
  }

  main#app
  #live-agent-demos
  .ts-v10-core-ring-a{
    width:47px!important;
    height:47px!important;
  }

  main#app
  #live-agent-demos
  .ts-v10-core-ring-b{
    width:58px!important;
    height:58px!important;
  }

  main#app
  #live-agent-demos
  .ts-v10-message-head{
    top:13px!important;
    left:13px!important;
    right:13px!important;

    gap:9px!important;
  }

  main#app
  #live-agent-demos
  .ts-v10-message-avatar{
    width:28px!important;
    height:20px!important;
  }

  main#app
  #live-agent-demos
  .ts-v10-message-flow{
    left:13px!important;
    right:13px!important;
    top:61px!important;
  }

  main#app
  #live-agent-demos
  .ts-v10-message-footer{
    left:9px!important;
    right:9px!important;
    bottom:9px!important;

    gap:4px!important;
  }

  main#app
  #live-agent-demos
  .ts-v10-voice-status{
    left:13px!important;
    top:13px!important;
  }

  main#app
  #live-agent-demos
  .ts-v10-voice-wave{
    top:45%!important;

    gap:5px!important;
  }

  main#app
  #live-agent-demos
  .ts-v10-voice-track{
    left:13px!important;
    right:13px!important;
    bottom:42px!important;
  }

  main#app
  #live-agent-demos
  .ts-v10-voice-footer{
    left:9px!important;
    right:9px!important;
    bottom:9px!important;
  }
}


/* ==========================================================
   320PX SAFETY
   ========================================================== */

@media(max-width:380px){

  main#app
  #live-agent-demos
  .demo-visual-shell.ts-live-ai-shell-v10{
    height:146px!important;
    min-height:146px!important;
    max-height:146px!important;
  }

  main#app
  #live-agent-demos
  .ts-v10-label{
    min-height:20px!important;

    padding:
      4px 6px!important;

    font-size:
      6.8px!important;
  }

  main#app
  #live-agent-demos
  .ts-v10-planner-stack{
    width:60px!important;
  }

  main#app
  #live-agent-demos
  .ts-v10-planner-requirement{
    max-width:120px!important;
  }

  main#app
  #live-agent-demos
  .ts-v10-message-footer{
    gap:3px!important;
  }

  main#app
  #live-agent-demos
  .ts-v10-handoff{
    padding-left:5px!important;
    padding-right:5px!important;
  }
}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media(prefers-reduced-motion:reduce){

  main#app
  #live-agent-demos
  .ts-live-ai-v10 *{
    animation:
      none!important;

    transition:
      none!important;
  }
}

/* TS_CONNECTED_PARTNER_TEXT_BOUNDARY_V39B
   Text containment only.
   No geometry, sizing, positioning or animation changes.
*/

/* Keep center-circle contents inside the existing circle */
.partner-system-map .partner-map-core{
  overflow:hidden!important;
}

/* Keep both existing center labels inside that circle */
.partner-system-map .partner-map-core strong,
.partner-system-map .partner-map-core span{
  overflow:hidden!important;
  text-overflow:clip!important;
}

/* Preserve existing wrapping behavior for the small center subtitle */
.partner-system-map .partner-map-core span{
  overflow-wrap:break-word!important;
  word-break:normal!important;
}

/* Keep every existing module label inside its own existing pill */
.partner-system-map .partner-node{
  overflow:hidden!important;
  text-overflow:clip!important;
}

/* ============================================================
   TS_CONNECTED_PARTNER_TEXT_LOCK_V41

   ONE CONNECTED PARTNER — TEXT BOUNDARY ONLY

   Existing map geometry remains untouched.
   Existing circle dimensions remain untouched.
   Existing node positions remain untouched.
   Existing paths/animations remain untouched.
   ============================================================ */

/*
 * CENTER CIRCLE
 *
 * Use the EXISTING circle as a size container.
 * This does not resize the circle.
 */
#connected-partner .partner-system-map .partner-map-core{
  overflow:hidden!important;

  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;

  gap:2px!important;

  container-type:inline-size;
}

/*
 * "TechScales"
 *
 * Font is proportional to the EXISTING circle width.
 * Same formula at every viewport pixel.
 */
#connected-partner .partner-system-map .partner-map-core strong{
  display:block!important;
  flex:0 0 auto!important;

  max-inline-size:84cqi!important;

  margin:0!important;

  text-align:center!important;
  white-space:nowrap!important;

  overflow:hidden!important;
  text-overflow:clip!important;

  font-size:clamp(8px,13cqi,18px)!important;
  line-height:1!important;
}

/*
 * "CONNECTED PARTNER"
 *
 * Same circle-relative system.
 */
#connected-partner .partner-system-map .partner-map-core span{
  display:block!important;
  flex:0 0 auto!important;

  max-inline-size:82cqi!important;

  margin:0!important;

  text-align:center!important;
  white-space:nowrap!important;

  overflow:hidden!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  text-overflow:clip!important;

  font-size:clamp(4px,6cqi,9px)!important;
  line-height:1!important;
}

/*
 * EVERY OUTER LABEL
 *
 * Keep existing pills and existing positions.
 * Text is simply not allowed outside its own pill.
 */
#connected-partner .partner-system-map .partner-node{
  overflow:hidden!important;

  white-space:nowrap!important;
  text-overflow:clip!important;

  text-align:center!important;
}

/*
 * No viewport breakpoint exists here.
 * The exact same containment rule operates at every pixel.
 */

/* ============================================================
   TS_CONNECTED_PARTNER_CIRCLE_CLEARANCE_V42

   Increase ONLY the Connected Partner center circle.

   Existing text size stays unchanged.
   Existing content box stays unchanged.
   Add 5px clearance around the existing content.
   Same rule at every viewport width.
   ============================================================ */

#connected-partner .partner-system-map .partner-map-core{
  box-sizing:content-box!important;
  padding:5px!important;
}

/* No breakpoint overrides. */

/* ============================================================
   TS_CONNECTED_PARTNER_SINGLE_RULE_0_1920_V44

   ONE IDENTICAL CENTER-TEXT RULE FROM 0PX THROUGH 1920PX.

   Reference = existing approved 1081+ behavior.

   NO:
   - mobile-specific font rule
   - tablet-specific font rule
   - JavaScript autofit
   - breakpoint switch
   - circle resize
   - node modification
   - path modification
   - animation modification
   ============================================================ */

#connected-partner .partner-system-map .partner-map-core{
  container-type:inline-size!important;
}

/*
 * TECHSCALES
 *
 * Existing 1081+ proportional target = 13cqi.
 * Existing desktop maximum = 18px.
 *
 * Removed only the former 8px minimum floor.
 */
#connected-partner .partner-system-map .partner-map-core strong{
  max-inline-size:84cqi!important;

  font-size:min(13cqi,18px)!important;

  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:clip!important;
}

/*
 * CONNECTED PARTNER
 *
 * Existing 1081+ proportional target = 6cqi.
 * Existing desktop maximum = 9px.
 *
 * Removed only the former 4px minimum floor.
 */
#connected-partner .partner-system-map .partner-map-core span{
  max-inline-size:82cqi!important;

  font-size:min(6cqi,9px)!important;

  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:clip!important;
}

/*
 * NO MEDIA QUERY.
 * SAME RULE AT 0, 390, 450, 700, 1080, 1081, 1440 AND 1920.
 */
/* TS_PARTNER_GLOBAL_SIZE_1081_RULE_V48
   Partner map 0-1080 now uses the same base height cascade as 1081+.
   No node, text, path, signal, circle or animation rules changed. */

/* ============================================================
   TS_PARTNER_ONE_GEOMETRY_0_1920_V51

   ONE physical animation proportion from 0px to 1920px.

   Reference:
   logical geometry = 1051 × 360

   Existing parent controls available width.
   Height follows the same 1051:360 ratio at every viewport.
   ============================================================ */

#connected-partner .partner-system-map.ts-partner-network-v10{
  aspect-ratio:1051 / 360!important;
  height:auto!important;
  min-height:0!important;
}

#connected-partner .partner-system-map.ts-partner-network-v10
.ts-partner-svg-v10{
  display:block!important;
  width:100%!important;
  height:100%!important;
}

/* ============================================================
   TS_GLOBAL_FIXED_HEADER_0_1920_V53

   Keep the existing TechScales header permanently visible
   while scrolling upward or downward.

   ONE rule for every viewport width.

   Header design, dimensions, content and navigation remain
   unchanged.

   The spacer height is measured from the actual rendered
   header by V53 JavaScript.
   ============================================================ */

#site-header{
  position:fixed!important;

  top:0!important;
  left:0!important;
  right:0!important;

  width:100%!important;

  z-index:1800!important;

  transform:none!important;
  translate:none!important;

  visibility:visible!important;
  opacity:1!important;
}

#ts-fixed-header-spacer-v53{
  display:block!important;

  width:100%!important;
  height:var(--ts-fixed-header-height-v53,0px)!important;

  margin:0!important;
  padding:0!important;
  border:0!important;

  flex:0 0 auto!important;

  visibility:hidden!important;
  pointer-events:none!important;
}

/* ============================================================
   TS_HEADER_FLUID_HEIGHT_0_1080_V55

   ONE continuous vertical rule.

   Less viewport width = less header height.
   More viewport width = more header height.

   1081px+ remains completely untouched.
   ============================================================ */

@media screen and (max-width:1080px){

  :root{
    --ts-mobile-v55-top:
      calc(31.846154px + 0.384615vw);

    --ts-mobile-v55-nav:
      calc(29.846154px + 0.384615vw);

    --ts-mobile-v55-gap:
      calc(2.923077px + 0.192308vw);

    --ts-mobile-v55-pad:
      calc(3.923077px + 0.192308vw);

    --ts-mobile-v55-total:
      calc(138px + 2.5vw);

    --mobile-public-header-height:
      var(--ts-mobile-v55-total)!important;

    --mobile-header-height:
      var(--ts-mobile-v55-total)!important;

    --mobile-direct-header-height:
      var(--ts-mobile-v55-total)!important;
  }

  #site-header{
    height:
      var(--ts-mobile-v55-total)!important;

    min-height:
      var(--ts-mobile-v55-total)!important;

    max-height:
      var(--ts-mobile-v55-total)!important;
  }

  #site-header .mobile-direct-header{
    grid-template-rows:
      var(--ts-mobile-v55-top)
      auto
      var(--ts-mobile-v55-nav)!important;

    row-gap:
      var(--ts-mobile-v55-gap)!important;

    padding-top:
      var(--ts-mobile-v55-pad)!important;

    padding-bottom:
      var(--ts-mobile-v55-pad)!important;

    height:
      var(--ts-mobile-v55-total)!important;

    min-height:
      var(--ts-mobile-v55-total)!important;

    max-height:
      var(--ts-mobile-v55-total)!important;
  }

  #site-header .mobile-direct-top{
    height:
      var(--ts-mobile-v55-top)!important;

    min-height:
      var(--ts-mobile-v55-top)!important;

    max-height:
      var(--ts-mobile-v55-top)!important;
  }

  #site-header .mobile-direct-brand,
  #site-header .mobile-direct-brand img{
    height:
      var(--ts-mobile-v55-top)!important;

    min-height:
      var(--ts-mobile-v55-top)!important;

    max-height:
      var(--ts-mobile-v55-top)!important;
  }

  #site-header .mobile-direct-ai,
  #site-header .mobile-direct-system{
    height:
      var(--ts-mobile-v55-top)!important;

    min-height:
      var(--ts-mobile-v55-top)!important;

    max-height:
      var(--ts-mobile-v55-top)!important;
  }

  #site-header .mobile-primary-nav,
  #site-header .mobile-primary-nav-shell{
    grid-auto-rows:
      var(--ts-mobile-v55-nav)!important;

    row-gap:
      var(--ts-mobile-v55-gap)!important;

    height:auto!important;
    min-height:0!important;
    max-height:none!important;
  }

  #site-header .mobile-primary-nav>a,
  #site-header .mobile-primary-nav>button{
    height:
      var(--ts-mobile-v55-nav)!important;

    min-height:
      var(--ts-mobile-v55-nav)!important;

    max-height:
      var(--ts-mobile-v55-nav)!important;
  }

  #site-header .mobile-secondary-nav{
    grid-auto-rows:
      var(--ts-mobile-v55-nav)!important;

    height:
      var(--ts-mobile-v55-nav)!important;

    min-height:
      var(--ts-mobile-v55-nav)!important;

    max-height:
      var(--ts-mobile-v55-nav)!important;
  }

  #site-header .mobile-secondary-nav>a,
  #site-header .mobile-secondary-nav>button{
    height:
      var(--ts-mobile-v55-nav)!important;

    min-height:
      var(--ts-mobile-v55-nav)!important;

    max-height:
      var(--ts-mobile-v55-nav)!important;
  }
}

/* ============================================================
   TS_WORKFLOW_RECOMMENDER_COMPACT_V56

   Scope:
   /workflows -> #workflow-recommendations ONLY.

   Reduce vertical footprint while preserving all content,
   widths, typography, columns and functionality.
   ============================================================ */

#workflow-recommendations{
  min-height:0!important;
  height:auto!important;

  padding-top:30px!important;
  padding-bottom:30px!important;

  overflow:visible!important;
}

#workflow-recommendations > .container.request-layout{
  gap:14px!important;
  min-height:0!important;
  height:auto!important;
}

#workflow-recommendations .eyebrow{
  margin-bottom:8px!important;
}

#workflow-recommendations h2{
  margin-top:0!important;
  margin-bottom:10px!important;
}

#workflow-recommendations
  > .container.request-layout
  > div:first-child
  > p{
  margin-top:0!important;
  margin-bottom:12px!important;
}

#workflow-recommendations .workflow-recommendation-form{
  min-height:0!important;
  height:auto!important;

  display:grid!important;
  gap:12px!important;

  overflow:visible!important;
}

#workflow-recommendations
  .workflow-recommendation-form
  .form-grid{
  row-gap:12px!important;
  column-gap:16px!important;

  align-items:start!important;

  min-height:0!important;
}

#workflow-recommendations
  .workflow-recommendation-form
  label{
  min-width:0!important;
  gap:6px!important;
}

#workflow-recommendations
  .workflow-recommendation-form
  textarea{
  box-sizing:border-box!important;

  min-height:84px!important;
  height:84px!important;
  max-height:none!important;

  resize:vertical!important;
  overflow:auto!important;
}

#workflow-recommendations
  .workflow-recommendation-form
  input,
#workflow-recommendations
  .workflow-recommendation-form
  select{
  box-sizing:border-box!important;

  min-height:40px!important;
  height:40px!important;
  max-height:40px!important;
}

#workflow-recommendations .form-end{
  margin-top:0!important;
  gap:8px!important;

  min-height:0!important;
  height:auto!important;

  overflow:visible!important;
}

#workflow-recommendations .form-end .btn{
  min-height:40px!important;
  height:40px!important;

  padding-top:7px!important;
  padding-bottom:7px!important;

  box-sizing:border-box!important;
}

#workflow-recommendations
  .workflow-recommendation-output{
  margin-top:14px!important;
}

/*
 * Narrow screens:
 * only slightly reduce vertical whitespace.
 * Existing column behavior remains untouched.
 */
@media screen and (max-width:700px){

  #workflow-recommendations{
    padding-top:24px!important;
    padding-bottom:24px!important;
  }

  #workflow-recommendations
    .workflow-recommendation-form
    textarea{
    min-height:80px!important;
    height:80px!important;
  }

  #workflow-recommendations
    > .container.request-layout{
    gap:12px!important;
  }
}

/* ============================================================
   TS_INDUSTRY_DIRECTORY_CARD_HEIGHT_V61

   TARGET:
   /industries -> #industry-directory -> .industry-card

   PURPOSE:
   Reduce overall industry-card height only.

   UNCHANGED:
   - text sizes
   - text content
   - card width
   - grid columns
   - image object-fit
   - image crop positioning
   - colors
   - borders
   - buttons
   - links
   - interactions
   - other pages
   ============================================================ */

/*
 * Prevent every card in a row from stretching vertically
 * to match the tallest card.
 */
#industry-directory .industry-directory-grid{
    align-items:start!important;
}

/*
 * Content-driven card height.
 * Reduce vertical padding only.
 */
#industry-directory .industry-card{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    align-self:start!important;

    padding-block:10px!important;
}

/*
 * Reduce unused space underneath the card's linked content.
 */
#industry-directory .industry-card > a{
    height:auto!important;
    min-height:0!important;
    padding-bottom:8px!important;
}

/*
 * Category label spacing only.
 */
#industry-directory .industry-card > a > span{
    margin-top:8px!important;
    margin-bottom:0!important;
}

/*
 * Heading spacing only.
 * Typography remains unchanged.
 */
#industry-directory .industry-card h3{
    margin-top:6px!important;
    margin-bottom:6px!important;
}

/*
 * Remove forced paragraph height.
 * Full text stays visible.
 */
#industry-directory .industry-card p{
    min-height:0!important;
    height:auto!important;
    max-height:none!important;

    margin-top:0!important;
    margin-bottom:8px!important;

    overflow:visible!important;
}

/*
 * Reduce only vertical space under the existing direct action.
 */
#industry-directory .industry-card > button{
    margin-top:0!important;
    margin-bottom:10px!important;
}

/*
 * Desktop:
 * remove only the global forced media minimum-height.
 *
 * Existing aspect ratio and image object-fit rules remain
 * untouched, so this introduces no new crop/stretch behavior.
 */
@media (min-width:1024px){
    #industry-directory .industry-card .industry-picture{
        min-height:0!important;
        height:auto!important;
    }
}

/* ============================================================
   TS_INDUSTRY_EQUAL_CARD_HEIGHT_V62

   /industries directory cards ONLY.

   Every industry card uses the same natural required height.

   No fixed card px height.
   No clipping.
   No typography change.
   No image change.
   No width change.
   ============================================================ */

#industry-directory .industry-directory-grid{
    grid-auto-rows:1fr!important;
    align-items:stretch!important;
}

#industry-directory .industry-card{
    height:100%!important;
    min-height:0!important;
    max-height:none!important;

    align-self:stretch!important;
}

/* ============================================================
   TS_ABOUT_WHY_WE_EXIST_COMPACT_V64

   /about WHY WE EXIST manifesto card ONLY.

   Reduce unnecessary vertical height without changing
   typography, width, content, border, background or layout.
   ============================================================ */

main#app .manifesto{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;

    padding-top:38px!important;
    padding-bottom:38px!important;

    overflow:visible!important;
}

main#app .manifesto > p{
    margin-top:18px!important;
    margin-bottom:0!important;
}

/*
 * Smaller screens:
 * same principle, slightly tighter vertical space.
 * Text sizing remains untouched.
 */
@media screen and (max-width:760px){

    main#app .manifesto{
        padding-top:28px!important;
        padding-bottom:28px!important;
    }

    main#app .manifesto > p{
        margin-top:14px!important;
        margin-bottom:0!important;
    }
}

/* ==========================================================
   TS_FREE_UTM_BUILDER_V1_20260916
   Free UTM Builder + multi-live-tool hub
   ========================================================== */

main#app .tools-hub-section .tools-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}

main#app .tools-hub-section .tools-coming{
  grid-column:1/-1!important;
}

main#app .tools-hub-section .utm-featured-tool{
  min-height:100%!important;
}

main#app .utm-featured-layout{
  grid-template-columns:minmax(0,1fr) minmax(150px,.36fr)!important;
}

main#app .utm-feature-points{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin:16px 0 20px;
}

main#app .utm-feature-points span{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:6px 10px;
  border:1px solid rgba(46,196,214,.23);
  border-radius:999px;
  background:rgba(46,196,214,.06);
  color:rgba(245,247,250,.84);
  font-size:.78rem;
  line-height:1.2;
}

main#app .utm-feature-diagram{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:7px;
  width:100%;
  max-width:215px;
  min-height:168px;
  justify-self:end;
  padding:14px;
  border:1px solid rgba(46,196,214,.22);
  border-radius:16px;
  background:
    radial-gradient(
      circle at 50% 25%,
      rgba(46,196,214,.11),
      transparent 55%
    ),
    rgba(4,18,29,.66);
}

main#app .utm-feature-diagram span,
main#app .utm-feature-diagram strong{
  display:block;
  padding:7px 9px;
  border:1px solid rgba(46,196,214,.18);
  border-radius:8px;
  background:rgba(11,15,25,.72);
  color:#F5F7FA;
  font-size:.72rem;
  line-height:1.1;
  text-align:center;
}

main#app .utm-feature-diagram strong{
  border-color:rgba(46,196,214,.5);
  color:#83e9f2;
}

main#app .utm-feature-diagram i{
  color:#83e9f2;
  font-style:normal;
  text-align:center;
}

main#app .utm-workspace-section{
  padding-top:clamp(56px,7vw,86px);
}

main#app .utm-workspace-shell{
  width:min(1220px,calc(100vw - 40px));
}

main#app .utm-workspace-intro{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:30px;
  margin-bottom:28px;
}

main#app .utm-workspace-intro h2{
  margin:8px 0 10px;
  max-width:760px;
}

main#app .utm-workspace-intro p{
  max-width:760px;
  margin:0;
  color:rgba(245,247,250,.72);
}

main#app .utm-free-note{
  display:flex;
  flex-direction:column;
  gap:5px;
  max-width:360px;
  padding:14px 16px;
  border:1px solid rgba(46,196,214,.25);
  border-radius:14px;
  background:rgba(46,196,214,.055);
}

main#app .utm-free-note strong{
  color:#83e9f2;
}

main#app .utm-free-note span{
  color:rgba(245,247,250,.66);
  font-size:.82rem;
}

main#app .utm-layout{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);
  align-items:start;
  gap:clamp(20px,2.5vw,30px);
}

main#app .utm-builder-card,
main#app .utm-result-card{
  min-width:0;
  padding:clamp(20px,2.2vw,28px);
  border:1px solid rgba(46,196,214,.22);
  border-radius:22px;
  background:
    linear-gradient(
      145deg,
      rgba(10,25,41,.95),
      rgba(5,17,29,.9)
    );
  box-shadow:
    0 22px 55px rgba(0,0,0,.22),
    0 0 0 1px rgba(46,196,214,.035);
}

main#app .utm-result-card{
  position:sticky;
  top:118px;
}

main#app .utm-card-heading{
  display:flex;
  align-items:flex-start;
  gap:13px;
  margin-bottom:22px;
}

main#app .utm-card-heading h3{
  margin:0 0 4px;
  font-size:clamp(1.2rem,1.6vw,1.5rem);
}

main#app .utm-card-heading p{
  margin:0;
  color:rgba(245,247,250,.62);
  font-size:.9rem;
}

main#app .utm-step-number{
  display:grid;
  place-items:center;
  flex:0 0 38px;
  width:38px;
  height:38px;
  border:1px solid rgba(46,196,214,.34);
  border-radius:11px;
  background:rgba(46,196,214,.075);
  color:#83e9f2;
  font-size:.78rem;
  font-weight:800;
}

main#app .utm-field{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:7px;
}

main#app .utm-field>span{
  color:#F5F7FA;
  font-size:.88rem;
  font-weight:700;
}

main#app .utm-field>span b{
  margin-left:5px;
  color:#83e9f2;
  font-size:.67rem;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
}

main#app .utm-field input{
  width:100%;
  min-width:0;
  height:48px;
  box-sizing:border-box;
  padding:0 13px;
  border:1px solid rgba(245,247,250,.13);
  border-radius:11px;
  outline:none;
  background:rgba(3,13,22,.7);
  color:#F5F7FA;
  font:inherit;
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}

main#app .utm-field input::placeholder{
  color:rgba(245,247,250,.34);
}

main#app .utm-field input:focus{
  border-color:rgba(46,196,214,.68);
  background:rgba(4,18,29,.9);
  box-shadow:0 0 0 3px rgba(46,196,214,.09);
}

main#app .utm-field small{
  color:rgba(245,247,250,.48);
  font-size:.75rem;
  line-height:1.4;
}

main#app .utm-field-wide{
  margin-bottom:18px;
}

main#app .utm-field-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:17px 15px;
}

main#app .utm-builder-actions,
main#app .utm-result-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:9px;
  margin-top:23px;
}

main#app .utm-text-button{
  min-height:42px;
  padding:6px 9px;
  border:0;
  background:transparent;
  color:rgba(245,247,250,.65);
  cursor:pointer;
  font:inherit;
  font-size:.84rem;
}

main#app .utm-text-button:hover{
  color:#83e9f2;
}

main#app .utm-status{
  min-height:22px;
  margin:15px 0 0;
  color:rgba(245,247,250,.66);
  font-size:.82rem;
}

main#app .utm-result-preview{
  overflow:hidden;
  border:1px solid rgba(46,196,214,.17);
  border-radius:14px;
  background:rgba(2,11,19,.62);
}

main#app .utm-result-label{
  display:block;
  padding:10px 13px;
  border-bottom:1px solid rgba(46,196,214,.13);
  color:#83e9f2;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}

main#app [data-utm-output]{
  display:block;
  width:100%;
  min-height:174px;
  resize:vertical;
  box-sizing:border-box;
  padding:14px;
  border:0;
  outline:0;
  background:transparent;
  color:#F5F7FA;
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;
  font-size:.79rem;
  line-height:1.55;
  overflow-wrap:anywhere;
}

main#app .utm-result-actions .is-disabled{
  opacity:.42;
  pointer-events:none;
}

main#app .utm-parameter-preview{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:18px;
}

main#app .utm-parameter-preview span{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:3px;
  max-width:100%;
  padding:8px 10px;
  border:1px solid rgba(46,196,214,.15);
  border-radius:9px;
  background:rgba(46,196,214,.04);
  color:rgba(245,247,250,.72);
  font-size:.74rem;
  overflow-wrap:anywhere;
}

main#app .utm-parameter-preview span b{
  color:#83e9f2;
  font-size:.65rem;
}

main#app .utm-privacy-note{
  margin-top:20px;
  padding-top:17px;
  border-top:1px solid rgba(245,247,250,.08);
}

main#app .utm-privacy-note strong{
  color:#F5F7FA;
}

main#app .utm-privacy-note p{
  margin:5px 0 0;
  color:rgba(245,247,250,.52);
  font-size:.78rem;
  line-height:1.5;
}

main#app .utm-guide-section{
  padding-top:clamp(58px,7vw,86px);
}

main#app .utm-guide-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin-top:26px;
}

main#app .utm-guide-grid article{
  min-width:0;
  padding:18px;
  border:1px solid rgba(46,196,214,.16);
  border-radius:16px;
  background:rgba(5,17,29,.62);
}

main#app .utm-guide-grid strong{
  display:block;
  margin-bottom:10px;
  color:#83e9f2;
}

main#app .utm-guide-grid code{
  display:block;
  margin-bottom:12px;
  color:#F5F7FA;
  font-size:.75rem;
  overflow-wrap:anywhere;
}

main#app .utm-guide-grid p{
  margin:0;
  color:rgba(245,247,250,.58);
  font-size:.82rem;
  line-height:1.55;
}

main#app .utm-faq-section{
  padding-top:clamp(54px,7vw,80px);
}

@media (max-width:980px){

  main#app .tools-hub-section .tools-grid{
    grid-template-columns:1fr!important;
  }

  main#app .tools-hub-section .tools-coming{
    grid-column:auto!important;
  }

  main#app .utm-layout{
    grid-template-columns:1fr;
  }

  main#app .utm-result-card{
    position:relative;
    top:auto;
  }

  main#app .utm-guide-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:700px){

  main#app .utm-workspace-shell{
    width:min(100% - 28px,1220px);
  }

  main#app .utm-workspace-intro{
    grid-template-columns:1fr;
    align-items:start;
    gap:16px;
  }

  main#app .utm-free-note{
    max-width:none;
  }

  main#app .utm-builder-card,
  main#app .utm-result-card{
    padding:18px;
    border-radius:18px;
  }

  main#app .utm-field-grid{
    grid-template-columns:1fr;
  }

  main#app .utm-guide-grid{
    grid-template-columns:1fr;
  }

  main#app .utm-builder-actions,
  main#app .utm-result-actions{
    align-items:stretch;
    flex-direction:column;
  }

  main#app .utm-builder-actions .btn,
  main#app .utm-result-actions .btn{
    width:100%;
    justify-content:center;
  }

  main#app .utm-text-button{
    width:100%;
  }

  main#app .utm-featured-layout{
    grid-template-columns:1fr!important;
  }

  main#app .utm-feature-diagram{
    max-width:none;
    justify-self:stretch;
  }
}

@media (prefers-reduced-motion:reduce){

  main#app .utm-field input{
    transition:none;
  }
}

/* ==========================================================
   TS_FREE_AI_AGENT_BUILDER_PHASE1_20260916
   ========================================================== */

main#app .tools-hub-section .tools-grid{
  grid-template-columns:
    repeat(3,minmax(0,1fr))!important;
}

main#app .agent-builder-featured-tool{
  min-height:100%!important;
}

main#app .agent-builder-featured-layout{
  grid-template-columns:
    minmax(0,1fr)
    minmax(150px,.36fr)!important;
}

main#app .agent-builder-feature-points{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin:16px 0 20px;
}

main#app .agent-builder-feature-points span{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:6px 10px;
  border:1px solid rgba(46,196,214,.23);
  border-radius:999px;
  background:rgba(46,196,214,.06);
  color:rgba(245,247,250,.84);
  font-size:.76rem;
}

main#app .agent-builder-feature-diagram{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:100%;
  max-width:205px;
  min-height:190px;
  justify-self:end;
  padding:16px;
  border:1px solid rgba(46,196,214,.22);
  border-radius:18px;
  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(46,196,214,.13),
      transparent 56%
    ),
    rgba(4,18,29,.7);
}

main#app .agent-builder-feature-diagram>span,
main#app .agent-builder-feature-diagram>strong{
  display:grid;
  place-items:center;
  min-height:38px;
  width:100%;
  padding:7px;
  box-sizing:border-box;
  border:1px solid rgba(46,196,214,.2);
  border-radius:9px;
  color:#F5F7FA;
  font-size:.73rem;
  text-align:center;
}

main#app .agent-builder-feature-diagram>strong{
  border-color:rgba(46,196,214,.58);
  color:#83e9f2;
}

main#app .agent-builder-feature-diagram>i{
  display:block;
  width:1px;
  height:15px;
  background:rgba(46,196,214,.5);
}

main#app .agent-builder-feature-diagram>div{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:4px;
  width:100%;
}

main#app .agent-builder-feature-diagram>div b{
  display:grid;
  place-items:center;
  min-width:0;
  min-height:30px;
  border:1px solid rgba(46,196,214,.17);
  border-radius:7px;
  color:rgba(245,247,250,.72);
  font-size:.62rem;
}

main#app .agent-builder-section{
  padding-top:clamp(56px,7vw,88px);
}

main#app .agent-builder-container{
  width:min(1280px,calc(100vw - 40px));
}

main#app .agent-builder-intro{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:30px;
  align-items:end;
  margin-bottom:28px;
}

main#app .agent-builder-intro h2{
  margin:8px 0 10px;
}

main#app .agent-builder-intro p{
  max-width:760px;
  margin:0;
  color:rgba(245,247,250,.68);
}

main#app .agent-builder-free-note{
  display:flex;
  flex-direction:column;
  gap:5px;
  max-width:360px;
  padding:15px 17px;
  border:1px solid rgba(46,196,214,.26);
  border-radius:15px;
  background:rgba(46,196,214,.055);
}

main#app .agent-builder-free-note strong{
  color:#83e9f2;
}

main#app .agent-builder-free-note span{
  color:#F5F7FA;
  font-size:.84rem;
}

main#app .agent-builder-free-note small{
  color:rgba(245,247,250,.53);
  line-height:1.4;
}

main#app .agent-builder-layout{
  display:grid;
  grid-template-columns:
    minmax(0,1.1fr)
    minmax(390px,.9fr);
  gap:24px;
  align-items:start;
}

main#app .agent-builder-form,
main#app .agent-builder-output{
  min-width:0;
  padding:clamp(20px,2.2vw,28px);
  border:1px solid rgba(46,196,214,.21);
  border-radius:22px;
  background:
    linear-gradient(
      145deg,
      rgba(10,25,41,.95),
      rgba(5,17,29,.9)
    );
  box-shadow:
    0 22px 55px rgba(0,0,0,.2),
    0 0 0 1px rgba(46,196,214,.03);
}

main#app .agent-builder-output{
  position:sticky;
  top:112px;
  max-height:calc(100vh - 132px);
  overflow:auto;
}

main#app .agent-builder-form-head{
  display:flex;
  align-items:flex-start;
  gap:13px;
  margin-bottom:22px;
}

main#app .agent-builder-form-head>span{
  display:grid;
  place-items:center;
  flex:0 0 38px;
  width:38px;
  height:38px;
  border:1px solid rgba(46,196,214,.34);
  border-radius:11px;
  background:rgba(46,196,214,.075);
  color:#83e9f2;
  font-size:.77rem;
  font-weight:800;
}

main#app .agent-builder-form-head h3{
  margin:0 0 5px;
  font-size:clamp(1.2rem,1.6vw,1.5rem);
}

main#app .agent-builder-form-head p{
  margin:0;
  color:rgba(245,247,250,.58);
  font-size:.86rem;
}

main#app .agent-builder-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}

main#app .agent-builder-field{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:7px;
}

main#app .agent-builder-field>span{
  color:#F5F7FA;
  font-size:.87rem;
  font-weight:700;
}

main#app .agent-builder-field input[type="text"],
main#app .agent-builder-field input[type="url"],
main#app .agent-builder-field select,
main#app .agent-builder-field textarea{
  width:100%;
  min-width:0;
  box-sizing:border-box;
  border:1px solid rgba(245,247,250,.13);
  border-radius:11px;
  outline:none;
  background:rgba(3,13,22,.7);
  color:#F5F7FA;
  font:inherit;
}

main#app .agent-builder-field input[type="text"],
main#app .agent-builder-field input[type="url"],
main#app .agent-builder-field select{
  height:48px;
  padding:0 13px;
}

main#app .agent-builder-field textarea{
  padding:12px 13px;
  resize:vertical;
  line-height:1.5;
}

main#app .agent-builder-field input:focus,
main#app .agent-builder-field select:focus,
main#app .agent-builder-field textarea:focus{
  border-color:rgba(46,196,214,.68);
  box-shadow:0 0 0 3px rgba(46,196,214,.09);
}

main#app .agent-builder-field option{
  background:#0B0F19;
  color:#F5F7FA;
}

main#app .agent-builder-wide{
  margin-top:17px;
}

main#app .agent-builder-choice-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
}

main#app .agent-builder-choice{
  display:flex;
  gap:10px;
  align-items:flex-start;
  min-width:0;
  padding:12px;
  border:1px solid rgba(245,247,250,.1);
  border-radius:12px;
  background:rgba(3,13,22,.48);
  cursor:pointer;
}

main#app .agent-builder-choice:has(input:checked){
  border-color:rgba(46,196,214,.48);
  background:rgba(46,196,214,.065);
}

main#app .agent-builder-choice input{
  margin-top:3px;
  accent-color:#2EC4D6;
}

main#app .agent-builder-choice span{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:4px;
}

main#app .agent-builder-choice strong{
  color:#F5F7FA;
  font-size:.82rem;
}

main#app .agent-builder-choice small{
  color:rgba(245,247,250,.5);
  font-size:.71rem;
  line-height:1.4;
}

main#app .agent-builder-mini-grid{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}

main#app .agent-builder-mini-choice{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 10px;
  border:1px solid rgba(245,247,250,.1);
  border-radius:999px;
  background:rgba(3,13,22,.5);
  cursor:pointer;
}

main#app .agent-builder-mini-choice:has(input:checked){
  border-color:rgba(46,196,214,.42);
  background:rgba(46,196,214,.06);
}

main#app .agent-builder-mini-choice input{
  accent-color:#2EC4D6;
}

main#app .agent-builder-mini-choice span{
  color:rgba(245,247,250,.76);
  font-size:.74rem;
}

main#app .agent-provider-status{
  display:grid;
  grid-template-columns:auto auto;
  gap:3px 10px;
  margin-top:18px;
  padding:13px 14px;
  border:1px solid rgba(46,196,214,.19);
  border-radius:12px;
  background:rgba(46,196,214,.045);
}

main#app .agent-provider-status strong{
  color:#F5F7FA;
}

main#app .agent-provider-status span{
  justify-self:end;
  color:#83e9f2;
  font-size:.67rem;
  font-weight:800;
  letter-spacing:.05em;
}

main#app .agent-provider-status p{
  grid-column:1/-1;
  margin:4px 0 0;
  color:rgba(245,247,250,.53);
  font-size:.76rem;
  line-height:1.45;
}

main#app .agent-builder-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:9px;
  margin-top:22px;
}

main#app .agent-builder-reset{
  min-height:42px;
  padding:6px 9px;
  border:0;
  background:transparent;
  color:rgba(245,247,250,.6);
  cursor:pointer;
  font:inherit;
}

main#app .agent-builder-reset:hover{
  color:#83e9f2;
}

main#app .agent-builder-status{
  min-height:22px;
  margin:14px 0 0;
  color:rgba(245,247,250,.62);
  font-size:.79rem;
}

main#app .agent-output-block{
  margin-top:15px;
  overflow:hidden;
  border:1px solid rgba(46,196,214,.16);
  border-radius:14px;
  background:rgba(2,11,19,.62);
}

main#app .agent-output-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-bottom:1px solid rgba(46,196,214,.12);
}

main#app .agent-output-title strong{
  color:#83e9f2;
  font-size:.75rem;
  letter-spacing:.04em;
}

main#app .agent-output-title>div{
  display:flex;
  gap:5px;
}

main#app .agent-output-title button{
  padding:5px 8px;
  border:1px solid rgba(46,196,214,.2);
  border-radius:7px;
  background:rgba(46,196,214,.05);
  color:#F5F7FA;
  cursor:pointer;
  font:inherit;
  font-size:.68rem;
}

main#app [data-agent-prompt],
main#app [data-agent-install]{
  display:block;
  width:100%;
  box-sizing:border-box;
  padding:13px;
  resize:vertical;
  border:0;
  outline:0;
  background:transparent;
  color:#F5F7FA;
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;
  font-size:.74rem;
  line-height:1.5;
}

main#app [data-agent-json]{
  max-height:310px;
  overflow:auto;
  margin:0;
  padding:13px;
  color:rgba(245,247,250,.8);
  font-size:.71rem;
  line-height:1.5;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

main#app .agent-install-warning{
  display:block;
  padding:0 13px 13px;
  color:rgba(245,247,250,.43);
  line-height:1.4;
}

main#app .agent-sandbox-section{
  padding-top:clamp(62px,7vw,90px);
}

main#app .agent-sandbox-layout{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(420px,1.2fr);
  gap:clamp(28px,5vw,70px);
  align-items:center;
}

main#app .agent-sandbox-actions{
  margin-top:20px;
}

main#app .agent-sandbox-card{
  min-width:0;
  overflow:hidden;
  border:1px solid rgba(46,196,214,.22);
  border-radius:20px;
  background:
    linear-gradient(
      145deg,
      rgba(10,25,41,.95),
      rgba(5,17,29,.92)
    );
  box-shadow:0 25px 65px rgba(0,0,0,.24);
}

main#app .agent-sandbox-head{
  display:flex;
  align-items:center;
  gap:11px;
  padding:14px 16px;
  border-bottom:1px solid rgba(46,196,214,.14);
}

main#app .agent-sandbox-avatar{
  display:grid;
  place-items:center;
  flex:0 0 38px;
  width:38px;
  height:38px;
  border:1px solid rgba(46,196,214,.42);
  border-radius:12px;
  background:rgba(46,196,214,.08);
  color:#83e9f2;
  font-size:.72rem;
  font-weight:800;
}

main#app .agent-sandbox-head>div{
  display:flex;
  min-width:0;
  flex-direction:column;
}

main#app .agent-sandbox-head strong{
  color:#F5F7FA;
}

main#app .agent-sandbox-head small{
  color:rgba(245,247,250,.5);
}

main#app .agent-sandbox-head>i{
  width:8px;
  height:8px;
  margin-left:auto;
  border-radius:50%;
  background:#2EC4D6;
  box-shadow:0 0 12px rgba(46,196,214,.8);
}

main#app .agent-sandbox-messages{
  min-height:280px;
  max-height:390px;
  overflow:auto;
  padding:17px;
}

main#app .agent-preview-message{
  display:flex;
  align-items:flex-start;
  gap:9px;
  max-width:88%;
  margin-bottom:12px;
}

main#app .agent-preview-message.user{
  flex-direction:row-reverse;
  margin-left:auto;
}

main#app .agent-preview-message span{
  display:grid;
  place-items:center;
  flex:0 0 30px;
  width:30px;
  height:30px;
  border:1px solid rgba(46,196,214,.22);
  border-radius:9px;
  color:#83e9f2;
  font-size:.58rem;
  font-weight:800;
}

main#app .agent-preview-message p{
  margin:0;
  padding:10px 12px;
  border:1px solid rgba(245,247,250,.08);
  border-radius:12px;
  background:rgba(245,247,250,.045);
  color:rgba(245,247,250,.78);
  font-size:.82rem;
  line-height:1.5;
}

main#app .agent-preview-message.user p{
  border-color:rgba(46,196,214,.2);
  background:rgba(46,196,214,.07);
}

main#app .agent-sandbox-compose{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  padding:12px;
  border-top:1px solid rgba(46,196,214,.13);
}

main#app .agent-sandbox-compose input{
  min-width:0;
  height:44px;
  padding:0 12px;
  border:1px solid rgba(245,247,250,.12);
  border-radius:10px;
  outline:0;
  background:rgba(3,13,22,.7);
  color:#F5F7FA;
  font:inherit;
}

main#app .agent-sandbox-compose input:focus{
  border-color:rgba(46,196,214,.55);
}

main#app .agent-sandbox-compose button{
  display:grid;
  place-items:center;
  width:44px;
  border:1px solid rgba(46,196,214,.45);
  border-radius:10px;
  background:rgba(46,196,214,.1);
  color:#83e9f2;
  cursor:pointer;
}

main#app .agent-sandbox-compose button svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
}

main#app .agent-integrations-section,
main#app .agent-provider-section,
main#app .agent-pricing-section{
  padding-top:clamp(64px,7vw,92px);
}

main#app .agent-integration-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-top:28px;
}

main#app .agent-integration-card{
  min-width:0;
  padding:20px;
  border:1px solid rgba(46,196,214,.16);
  border-radius:17px;
  background:rgba(5,17,29,.62);
}

main#app .agent-integration-card>span{
  color:#83e9f2;
  font-size:.72rem;
  font-weight:800;
}

main#app .agent-integration-card h3{
  margin:10px 0 8px;
}

main#app .agent-integration-card p{
  margin:0;
  color:rgba(245,247,250,.57);
  font-size:.83rem;
  line-height:1.55;
}

main#app .agent-provider-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:11px;
  margin-top:28px;
}

main#app .agent-provider-card{
  min-width:0;
  padding:17px;
  border:1px solid rgba(46,196,214,.15);
  border-radius:15px;
  background:rgba(5,17,29,.6);
}

main#app .agent-provider-card>span{
  color:#83e9f2;
  font-size:.61rem;
  font-weight:800;
  letter-spacing:.06em;
}

main#app .agent-provider-card h3{
  margin:9px 0 8px;
  font-size:1rem;
}

main#app .agent-provider-card p{
  margin:0;
  color:rgba(245,247,250,.52);
  font-size:.75rem;
  line-height:1.5;
}

main#app .agent-plan-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-top:28px;
}

main#app .agent-plan-card{
  position:relative;
  min-width:0;
  padding:23px;
  border:1px solid rgba(46,196,214,.16);
  border-radius:19px;
  background:rgba(5,17,29,.66);
}

main#app .agent-plan-card.is-current{
  border-color:rgba(46,196,214,.48);
  box-shadow:0 0 0 1px rgba(46,196,214,.07);
}

main#app .agent-plan-badge{
  display:inline-flex;
  padding:6px 9px;
  border:1px solid rgba(46,196,214,.25);
  border-radius:999px;
  color:#83e9f2;
  font-size:.61rem;
  font-weight:800;
  letter-spacing:.06em;
}

main#app .agent-plan-card h3{
  margin:17px 0 9px;
}

main#app .agent-plan-card>strong{
  display:flex;
  align-items:baseline;
  gap:5px;
  color:#F5F7FA;
  font-size:2rem;
}

main#app .agent-plan-card>strong small{
  color:rgba(245,247,250,.48);
  font-size:.7rem;
  font-weight:500;
}

main#app .agent-plan-card>p{
  min-height:44px;
  color:rgba(245,247,250,.58);
  font-size:.82rem;
  line-height:1.5;
}

main#app .agent-plan-card ul{
  margin:18px 0 0;
  padding:0;
  list-style:none;
}

main#app .agent-plan-card li{
  position:relative;
  margin-top:9px;
  padding-left:17px;
  color:rgba(245,247,250,.7);
  font-size:.78rem;
  line-height:1.45;
}

main#app .agent-plan-card li::before{
  content:"";
  position:absolute;
  left:0;
  top:.55em;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#2EC4D6;
}

@media (max-width:1179px){

  main#app .tools-hub-section .tools-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr))!important;
  }

  main#app .agent-provider-grid{
    grid-template-columns:
      repeat(3,minmax(0,1fr));
  }
}

@media (max-width:980px){

  main#app .tools-hub-section .tools-grid{
    grid-template-columns:1fr!important;
  }

  main#app .agent-builder-layout{
    grid-template-columns:1fr;
  }

  main#app .agent-builder-output{
    position:relative;
    top:auto;
    max-height:none;
  }

  main#app .agent-sandbox-layout{
    grid-template-columns:1fr;
  }

  main#app .agent-integration-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  main#app .agent-plan-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:700px){

  main#app .agent-builder-container{
    width:min(
      100% - 28px,
      1280px
    );
  }

  main#app .agent-builder-intro{
    grid-template-columns:1fr;
    align-items:start;
    gap:16px;
  }

  main#app .agent-builder-free-note{
    max-width:none;
  }

  main#app .agent-builder-form,
  main#app .agent-builder-output{
    padding:18px;
    border-radius:18px;
  }

  main#app .agent-builder-grid,
  main#app .agent-builder-choice-grid,
  main#app .agent-integration-grid,
  main#app .agent-provider-grid{
    grid-template-columns:1fr;
  }

  main#app .agent-builder-actions{
    align-items:stretch;
    flex-direction:column;
  }

  main#app .agent-builder-actions .btn,
  main#app .agent-builder-reset{
    width:100%;
    justify-content:center;
  }

  main#app .agent-builder-featured-layout{
    grid-template-columns:1fr!important;
  }

  main#app .agent-builder-feature-diagram{
    max-width:none;
    justify-self:stretch;
  }

  main#app .agent-sandbox-messages{
    min-height:240px;
  }
}
\n
/* TS_AGENT_BUILDER_RUNTIME_WIRING_CSS_V1 */
main#app .agent-runtime-field-note{
  min-height:48px;
  display:flex;
  align-items:center;
  box-sizing:border-box;
  padding:9px 12px;
  border:1px solid rgba(245,247,250,.13);
  border-radius:11px;
  background:rgba(3,13,22,.7);
  color:rgba(245,247,250,.68);
  font-size:.76rem;
  line-height:1.4;
}

main#app .agent-runtime-console{
  margin:0 0 15px;
  padding:14px;
  border:1px solid rgba(46,196,214,.2);
  border-radius:14px;
  background:rgba(46,196,214,.045);
}

main#app .agent-runtime-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

main#app .agent-runtime-head strong{
  color:#F5F7FA;
  font-size:.83rem;
}

main#app .agent-runtime-head span{
  color:#83e9f2;
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.05em;
  text-align:right;
}

main#app .agent-runtime-console>p{
  margin:8px 0 13px;
  color:rgba(245,247,250,.58);
  font-size:.76rem;
  line-height:1.45;
}

main#app .agent-runtime-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

main#app .agent-runtime-grid .agent-builder-field>span{
  font-size:.73rem;
}

main#app .agent-runtime-grid input,
main#app .agent-runtime-grid select{
  height:42px!important;
  padding:0 10px!important;
  font-size:.76rem!important;
}

main#app .agent-runtime-project-field{
  grid-column:1/-1;
}

main#app .agent-runtime-metrics{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-top:12px;
}

main#app .agent-runtime-metrics>span{
  min-width:0;
  padding:9px 10px;
  border:1px solid rgba(245,247,250,.08);
  border-radius:10px;
  background:rgba(3,13,22,.42);
  color:rgba(245,247,250,.5);
  font-size:.66rem;
}

main#app .agent-runtime-metrics strong{
  display:block;
  margin-top:3px;
  overflow:hidden;
  color:#F5F7FA;
  font-size:.72rem;
  text-overflow:ellipsis;
  white-space:nowrap;
}

main#app .agent-runtime-actions{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:12px;
}

main#app .agent-runtime-actions button{
  min-height:36px;
  padding:6px 10px;
  border:1px solid rgba(46,196,214,.22);
  border-radius:8px;
  background:rgba(46,196,214,.06);
  color:#F5F7FA;
  cursor:pointer;
  font:inherit;
  font-size:.69rem;
}

main#app .agent-runtime-actions button:disabled{
  opacity:.42;
  cursor:not-allowed;
}

main#app .agent-runtime-security-note{
  display:block;
  margin-top:11px;
  color:rgba(245,247,250,.43);
  font-size:.67rem;
  line-height:1.45;
}

@media (max-width:700px){
  main#app .agent-runtime-grid,
  main#app .agent-runtime-metrics{
    grid-template-columns:1fr;
  }

  main#app .agent-runtime-project-field{
    grid-column:auto;
  }

  main#app .agent-runtime-actions{
    flex-direction:column;
  }

  main#app .agent-runtime-actions button{
    width:100%;
  }
}
/* TS_QR_BARCODE_V2_STYLES_20260919 */
.ts-qr-v2-section{padding-top:clamp(34px,5vw,68px)}
.ts-qr-v2-intro{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:24px;align-items:end;margin-bottom:24px}
.ts-qr-v2-intro h2,.ts-code-managed-note h2{margin:.45rem 0 .75rem}
.ts-qr-v2-intro p,.ts-code-managed-note p{max-width:820px;color:rgba(230,241,247,.78)}
.ts-qr-v2-policy{display:grid;gap:8px;padding:18px 20px;border:1px solid rgba(46,196,214,.22);border-radius:18px;background:linear-gradient(145deg,rgba(11,31,48,.92),rgba(7,19,32,.88));box-shadow:0 18px 50px rgba(0,0,0,.2)}
.ts-qr-v2-policy strong{color:#f5f7fa}
.ts-qr-v2-policy span{color:rgba(226,239,246,.78);line-height:1.55}
.ts-code-toolbar{display:grid;grid-template-columns:minmax(280px,1fr) auto;gap:18px;align-items:end;margin:18px 0 14px;padding:18px;border:1px solid rgba(46,196,214,.15);border-radius:20px;background:rgba(7,20,34,.72)}
.ts-code-search{display:grid;gap:8px;font-weight:700;color:#eef7fa}
.ts-code-search input{width:100%;min-height:46px;border:1px solid rgba(83,205,222,.25);border-radius:13px;background:rgba(4,15,27,.92);color:#f5f7fa;padding:0 14px;outline:none}
.ts-code-search input:focus{border-color:rgba(46,196,214,.7);box-shadow:0 0 0 3px rgba(46,196,214,.1)}
.ts-code-toolbar p{margin:0;color:rgba(221,238,244,.74);font-size:.92rem}
.ts-code-filters{display:flex;gap:9px;overflow-x:auto;padding:3px 1px 12px;scrollbar-width:thin}
.ts-code-filter{flex:0 0 auto;border:1px solid rgba(69,196,213,.2);border-radius:999px;background:rgba(8,24,39,.82);color:rgba(232,244,248,.82);padding:9px 13px;font:inherit;font-size:.84rem;font-weight:750;cursor:pointer}
.ts-code-filter:hover,.ts-code-filter.active{border-color:rgba(46,196,214,.68);background:rgba(27,111,169,.28);color:#fff}
.ts-code-load-status{margin:0 0 18px;color:rgba(215,235,242,.68);font-size:.9rem}
.ts-code-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start}
.ts-code-card{min-width:0;border:1px solid rgba(77,205,222,.17);border-radius:22px;background:linear-gradient(145deg,rgba(10,28,45,.95),rgba(5,16,29,.92));box-shadow:0 20px 58px rgba(0,0,0,.2);overflow:hidden}
.ts-code-card[hidden]{display:none!important}
.ts-code-card-head{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:18px}
.ts-code-card-head h3{margin:5px 0 0;font-size:1rem;line-height:1.25;color:#f5f7fa}
.ts-code-category{display:block;color:#76dce8;font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.ts-code-configure{flex:0 0 auto;min-width:98px!important;padding-inline:12px!important}
.ts-code-card-panel{border-top:1px solid rgba(77,205,222,.13);padding:18px}
.ts-code-card-panel[hidden]{display:none!important}
.ts-code-card form{display:grid;gap:12px}
.ts-code-module{border:1px solid rgba(86,202,218,.13);border-radius:16px;background:rgba(3,14,25,.52);padding:14px}
details.ts-code-module>summary{cursor:pointer;font-weight:800;color:#eaf6f9;list-style:none}
details.ts-code-module>summary::-webkit-details-marker{display:none}
details.ts-code-module>summary:after{content:"+";float:right;color:#75dce8}
details.ts-code-module[open]>summary:after{content:"–"}
details.ts-code-module[open]>summary{margin-bottom:14px}
.ts-code-module h4{margin:0 0 12px;color:#eff9fb;font-size:.86rem;text-transform:uppercase;letter-spacing:.05em}
.ts-code-input-grid,.ts-code-module-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.ts-code-field{display:grid;gap:6px;min-width:0;color:rgba(231,244,248,.82);font-size:.78rem;font-weight:700}
.ts-code-field input,.ts-code-field textarea,.ts-code-field select{width:100%;min-width:0;border:1px solid rgba(79,199,217,.19);border-radius:11px;background:rgba(5,17,29,.95);color:#f5f7fa;padding:10px 11px;font:inherit;outline:none}
.ts-code-field textarea{resize:vertical;line-height:1.45}
.ts-code-field input:focus,.ts-code-field textarea:focus,.ts-code-field select:focus{border-color:rgba(46,196,214,.65);box-shadow:0 0 0 2px rgba(46,196,214,.08)}
.ts-code-span-2{grid-column:1/-1}
.ts-code-check{display:flex;gap:8px;align-items:center;color:rgba(229,242,247,.8);font-size:.78rem}
.ts-code-check input{accent-color:#2ec4d6}
.ts-code-help{color:rgba(209,230,238,.6);line-height:1.5}
.ts-code-actions{display:flex;gap:9px;flex-wrap:wrap}
.ts-code-status{min-height:1.35em;margin:0;color:#87e3ed;font-size:.78rem;line-height:1.45}
.ts-code-result{display:grid;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid rgba(73,195,213,.13)}
.ts-code-preview{display:grid;place-items:center;min-height:150px;border:1px dashed rgba(83,205,222,.24);border-radius:15px;background:#fff;padding:14px;overflow:auto;color:#29414e;text-align:center}
.ts-code-preview>img{max-width:100%;max-height:240px;object-fit:contain}
.ts-code-batch-preview{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ts-code-batch-preview figure{margin:0;display:grid;gap:3px;place-items:center}
.ts-code-batch-preview img{max-width:100%;max-height:90px;object-fit:contain}
.ts-code-batch-preview figcaption{font-size:.7rem;color:#384d57}
.ts-code-result-meta{margin:0;color:rgba(218,236,242,.67);font-size:.74rem;line-height:1.45}
.ts-code-downloads{display:flex;gap:7px;flex-wrap:wrap}
.ts-code-downloads .btn{min-width:0!important;padding:8px 10px!important;font-size:.75rem!important}
.ts-code-downloads .btn:disabled{opacity:.42;cursor:not-allowed}
.ts-code-policy-panel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:34px}
.ts-code-policy-panel article{padding:20px;border:1px solid rgba(73,199,216,.16);border-radius:20px;background:rgba(8,24,39,.72)}
.ts-code-policy-panel h3{margin:0 0 8px;color:#f5f7fa;font-size:1rem}
.ts-code-policy-panel p{margin:0;color:rgba(219,237,243,.72);line-height:1.6;font-size:.9rem}
.ts-code-managed-note{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:24px;padding:24px;border:1px solid rgba(212,175,55,.2);border-radius:22px;background:linear-gradient(135deg,rgba(16,31,45,.88),rgba(10,22,35,.82))}
.ts-code-managed-note .btn{flex:0 0 auto}
.ts-code-load-error{grid-column:1/-1;padding:22px;border:1px solid rgba(255,120,120,.3);border-radius:18px;background:rgba(80,20,20,.18);color:#ffdede}
@media(max-width:1120px){.ts-code-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ts-qr-v2-intro{grid-template-columns:1fr}.ts-code-policy-panel{grid-template-columns:1fr 1fr}.ts-code-policy-panel article:last-child{grid-column:1/-1}}
@media(max-width:720px){.ts-code-toolbar{grid-template-columns:1fr}.ts-code-grid{grid-template-columns:1fr}.ts-code-card-head{align-items:flex-start}.ts-code-input-grid,.ts-code-module-grid{grid-template-columns:1fr}.ts-code-span-2{grid-column:auto}.ts-code-policy-panel{grid-template-columns:1fr}.ts-code-policy-panel article:last-child{grid-column:auto}.ts-code-managed-note{display:grid}.ts-code-managed-note .btn{width:100%}.ts-code-downloads .btn{flex:1 1 calc(50% - 7px)}}

.ts-qr-content-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
@media(max-width:720px){.ts-qr-content-fields{grid-template-columns:1fr}}

/* TS_QR_BARCODE_V2_EASY_ACCESS_STYLES_20260920 */
.ts-qr-v2-easy{margin:0 0 22px;padding:20px;border:1px solid rgba(46,196,214,.15);border-radius:20px;background:rgba(7,20,34,.72)}
.ts-qr-v2-easy-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:end;margin-bottom:16px}
.ts-qr-v2-easy-head h3{margin:.4rem 0 .4rem;font-size:clamp(1.35rem,2vw,1.8rem)}
.ts-qr-v2-easy-head p{margin:0;color:rgba(221,238,244,.72)}
.ts-qr-v2-quick-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.ts-qr-v2-quick-grid button{min-height:120px;padding:15px;text-align:left;color:#f5f7fa;border:1px solid rgba(77,205,222,.17);border-radius:15px;background:linear-gradient(145deg,rgba(10,28,45,.95),rgba(5,16,29,.92));cursor:pointer}
.ts-qr-v2-quick-grid button:hover{border-color:rgba(46,196,214,.62);transform:translateY(-2px)}
.ts-qr-v2-quick-grid strong,.ts-qr-v2-quick-grid span{display:block}
.ts-qr-v2-quick-grid strong{font-size:.92rem;margin-bottom:7px}
.ts-qr-v2-quick-grid span{color:rgba(221,238,244,.67);font-size:.78rem;line-height:1.45}
.ts-qr-v2-mode-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
.ts-qr-v2-mode-row article{padding:12px 14px;border:1px solid rgba(77,205,222,.13);border-radius:13px;background:rgba(3,14,25,.48)}
.ts-qr-v2-mode-row strong,.ts-qr-v2-mode-row span{display:block}
.ts-qr-v2-mode-row strong{color:#76dce8;margin-bottom:5px}
.ts-qr-v2-mode-row span{color:rgba(221,238,244,.68);font-size:.75rem;line-height:1.45}
.ts-qr-v2-region-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:16px 0 12px}
.ts-qr-v2-region-row>span{margin-right:3px;color:#eef7fa;font-size:.8rem;font-weight:800}
.ts-qr-v2-region-row button{padding:8px 11px;border:1px solid rgba(69,196,213,.2);border-radius:999px;background:rgba(8,24,39,.82);color:rgba(232,244,248,.82);font:inherit;font-size:.76rem;font-weight:750;cursor:pointer}
.ts-qr-v2-region-row button.active{border-color:rgba(46,196,214,.68);background:rgba(27,111,169,.28);color:#fff}
.ts-qr-v2-easy-search{margin:0 0 12px}
.ts-qr-v2-easy-search label{display:grid;gap:6px;color:#eef7fa;font-size:.78rem;font-weight:700}
.ts-qr-v2-easy-search input{width:100%;min-height:42px;padding:0 12px;border:1px solid rgba(83,205,222,.25);border-radius:11px;background:rgba(4,15,27,.92);color:#f5f7fa;outline:none}
.ts-qr-v2-wizard{display:grid;grid-template-columns:minmax(170px,.8fr) 1fr 1fr auto;gap:10px;align-items:end;margin:0 0 14px;padding:12px;border:1px solid rgba(77,205,222,.13);border-radius:14px;background:rgba(3,14,25,.48)}
.ts-qr-v2-wizard>div strong,.ts-qr-v2-wizard>div span{display:block}
.ts-qr-v2-wizard>div span{margin-top:4px;color:rgba(221,238,244,.64);font-size:.73rem}
.ts-qr-v2-wizard label{display:grid;gap:5px;color:rgba(231,244,248,.82);font-size:.73rem;font-weight:700}
.ts-qr-v2-wizard select{min-height:39px;border:1px solid rgba(79,199,217,.19);border-radius:10px;background:rgba(5,17,29,.95);color:#f5f7fa;padding:0 9px}
.ts-qr-v2-wizard-result{margin:-2px 0 14px;padding:12px 14px;border:1px solid rgba(46,196,214,.18);border-radius:12px;background:rgba(46,196,214,.05)}
.ts-qr-v2-wizard-result ol{margin:6px 0 0;padding-left:21px;color:rgba(231,244,248,.78)}
.ts-qr-v2-results-head{display:flex;justify-content:space-between;align-items:center;margin:6px 0 10px}
.ts-qr-v2-results-head strong,.ts-qr-v2-results-head span{display:block}
.ts-qr-v2-results-head span{margin-top:2px;color:rgba(221,238,244,.6);font-size:.72rem}
.ts-qr-v2-result-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ts-qr-v2-result-card{display:flex;flex-direction:column;min-width:0;padding:14px;border:1px solid rgba(77,205,222,.17);border-radius:15px;background:linear-gradient(145deg,rgba(10,28,45,.95),rgba(5,16,29,.92))}
.ts-qr-v2-result-title{display:flex;justify-content:space-between;gap:10px;align-items:start}
.ts-qr-v2-result-title span{display:block;color:#76dce8;font-size:.62rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.ts-qr-v2-result-title h4{margin:4px 0 0;color:#f5f7fa;font-size:.92rem}
.ts-qr-v2-result-title>b{max-width:145px;color:#76dce8;font-size:.62rem;text-align:right}
.ts-qr-v2-result-card dl{display:grid;gap:6px;margin:11px 0}
.ts-qr-v2-result-card dl>div{padding:7px 8px;border-radius:8px;background:rgba(3,14,25,.48)}
.ts-qr-v2-result-card dt{color:rgba(209,230,238,.52);font-size:.57rem;font-weight:800;text-transform:uppercase}
.ts-qr-v2-result-card dd{margin:2px 0 0;color:rgba(235,245,248,.82);font-size:.69rem;line-height:1.4}
.ts-qr-v2-result-actions{margin-top:auto}
.ts-qr-v2-result-actions .btn{min-width:0!important;padding:7px 10px!important;font-size:.7rem!important}
.ts-qr-v2-more{margin-top:11px;padding:0;border:0;background:transparent;color:#76dce8;font:inherit;font-size:.76rem;font-weight:800;cursor:pointer}
.ts-qr-v2-other-results{margin-top:10px}
.ts-qr-v2-easy-info{margin-top:12px;padding:12px 14px;border:1px solid rgba(46,196,214,.22);border-radius:12px;background:rgba(46,196,214,.06)}
.ts-qr-v2-easy-info strong,.ts-qr-v2-easy-info span{display:block}
.ts-qr-v2-easy-info span{margin-top:4px;color:rgba(231,244,248,.72);font-size:.76rem;line-height:1.5}
.ts-code-step-result-title{margin:0;color:#eff9fb;font-size:.86rem;text-transform:uppercase;letter-spacing:.05em}
@media(max-width:1180px){.ts-qr-v2-quick-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.ts-qr-v2-result-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ts-qr-v2-wizard{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.ts-qr-v2-easy-head,.ts-qr-v2-mode-row,.ts-qr-v2-result-grid,.ts-qr-v2-wizard{grid-template-columns:1fr}.ts-qr-v2-quick-grid{grid-template-columns:1fr}.ts-qr-v2-easy-head .btn{justify-self:start}}
/* /TS_QR_BARCODE_V2_EASY_ACCESS_STYLES_20260920 */