/*
 * TopAIgents visual QA refinements, 2026-11.
 * Audit targets: small copy, visual clutter, cramped mobile scenario selector,
 * integration diagram legibility, contact contrast, and section rhythm.
 * Keeps original logo's ink splash and the warm white / vermilion / charcoal palette.
 */

/* Hero: give the real workflow room, without sticker-like elements obscuring it. */
.hero{gap:42px;min-height:730px;padding-top:82px}
.hero-stage{overflow:hidden;border:1px solid rgba(255,255,255,.12);box-shadow:0 22px 62px rgba(30,23,30,.16)}
.stage-topline{font-size:10px}
.stage-active{font-size:10px}
.incoming-row strong{font-size:15px}
.speaker-label{font-size:10px;letter-spacing:1px}
.bubble{font-size:14px;line-height:1.58}
.stage-divider{font-size:10px}
.stage-confirmation{font-size:12px}
.stage-bottomline{font-size:10px}
.hero-proof{font-size:13px}
.hero-desc{color:#595458}

/* Case studies must read as designed illustrations, not anonymous tiles. */
.case-top{font-size:11px;opacity:.86}
.case-bottom p{font-size:15px;color:#554e53;line-height:1.68}
.case-card-dark .case-bottom p{color:#dfced2}
.case-card{min-height:480px}
.case-bottom h3{margin-bottom:12px}

/* Execution trace: actionable information should not require zooming. */
.work-panel-label,.panel-counter,.display-head{font-size:11px}
.workflow-tab{font-size:16px}
.workflow-side-note p{font-size:13px}
.workflow-callout h3{font-size:19px}
.workflow-callout small{font-size:11px}
.step-main small{font-size:10px}
.step-main h4{font-size:16px;margin:2px 0 5px}
.step-main p{font-size:14px;line-height:1.56}
.execution-step{padding:13px 0 17px}
.display-outcome strong{font-size:14px;line-height:1.45}
.workflow-disclaimer{font-size:12px;line-height:1.55;margin-top:18px}

/* Integration diagram: make cards understandable without squinting. */
.connected-graphic{height:525px}
.satellite{min-width:188px;padding:16px 17px}
.satellite-symbol{width:40px;height:40px}
.satellite strong{font-size:14px;line-height:1.32}
.satellite small{font-size:11px;line-height:1.38;color:#746b70}
.graphic-caption{font-size:10px;color:#8f777e}

/* Form: stronger text contrast, clearer touch targets, legible disclosures. */
.form-field label{font-size:13px}
.form-field input,.form-field select,.form-field textarea{font-size:15px;color:#292327;background:#fff;border-color:#d7ced1}
.form-field input::placeholder,.form-field textarea::placeholder{color:#766b71;opacity:1}
.form-field select{min-height:49px}
.form-privacy{font-size:12px;color:#71676d}
.form-privacy a{color:#43373c}
.form-feedback{font-size:14px}
.footer-links a{font-size:14px}
.footer-bottom{font-size:12px}
.faq-list summary{line-height:1.45}

@media(max-width:1150px){
  .hero{gap:28px}
  .satellite{min-width:168px;padding:13px 14px}
  .satellite strong{font-size:13px}
  .satellite small{font-size:10.5px}
}

@media(max-width:920px){
  .hero{min-height:unset;max-width:740px;padding-top:66px}
  .hero-stage{overflow:hidden}
  .connected-graphic{height:500px}
  .workflow-tab{font-size:14px}
  .step-main p{font-size:13px}
}

/* Mobile: make the workflow selector a comfortable, readable list.
 * Each scenario is a full-width tap target, not a 3-column miniature card.
 */
@media(max-width:640px){
  .hero{gap:31px;padding-top:46px;padding-bottom:68px}
  .hero h1{margin-top:22px}
  .hero-desc{font-size:16px;line-height:1.66}
  .hero-proof{font-size:11px}
  .stage-topline,.stage-bottomline{padding:15px 14px}
  .stage-topline{font-size:9px}
  .stage-active{font-size:8px}
  .stage-content{padding:18px 14px}
  .incoming-row strong{font-size:13px}
  .stage-dialogue{padding:16px 14px}
  .speaker-label{font-size:10px}
  .bubble{font-size:12.5px;line-height:1.55}
  .stage-divider{font-size:9px}
  .stage-result .result-text strong{font-size:13px}
  .stage-confirmation{font-size:11px;gap:8px;padding:12px}
  .stage-confirmation>span:nth-last-child(2){display:none}
  .stage-bottomline{font-size:8px;letter-spacing:.6px}
  .hero-bottom{font-size:8px}
  .signal-section{padding-top:65px}
  .signal-inner{margin-bottom:46px}

  .workflow-section{padding:72px 0 74px}
  .workflow-side-top{padding:17px 19px}
  .workflow-tabs{display:flex;flex-direction:column;gap:7px;padding:14px}
  .workflow-tab{display:flex;min-height:56px;flex-direction:row;align-items:center;justify-content:flex-start;gap:13px;padding:12px 15px;font-size:14px;line-height:1.25}
  .workflow-tab .tab-number{font-size:11px;min-width:20px}
  .workflow-tab .tab-arrow{display:block;margin-left:auto;font-size:16px}
  .workflow-tab .tab-arrow .tg-icon{width:23px;height:20px}
  .workflow-display{padding:0 17px 22px}
  .display-head{font-size:9px}
  .display-badge{font-size:9px}
  .workflow-callout{margin:21px 0 18px;padding:15px}
  .workflow-callout h3{font-size:16px}
  .execution-step{gap:12px;padding:13px 0}
  .step-main small{font-size:10px}
  .step-main h4{font-size:14px}
  .step-main p{font-size:12.5px;line-height:1.55}
  .display-outcome strong{font-size:12px}
  .workflow-disclaimer{font-size:11px}

  .cases-section{padding-top:72px;padding-bottom:80px}
  .case-card{min-height:402px}
  .case-top{font-size:10px;opacity:.84}
  .case-bottom p{font-size:14px}

  .connected-section{padding:76px 0 72px}
  .connected-layout{gap:34px}
  .connected-graphic{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:auto auto auto auto;
    align-items:center;
    justify-items:stretch;
    gap:13px;
    position:relative;
    width:100%;
    height:auto;
    min-height:0;
    padding:12px 0 0;
    margin:0 auto;
  }
  .connected-graphic::before{content:"";position:absolute;top:60px;bottom:96px;left:50%;border-left:1px dashed #d9c6ca;z-index:0}
  .connected-graphic .connector-orbit{display:none}
  .connected-graphic .center-agent{
    grid-column:1/-1;grid-row:2;justify-self:center;
    width:150px;height:150px;min-width:0;position:relative;
    margin:9px 0 14px;
  }
  .connected-graphic .satellite{
    position:relative;
    top:auto!important;bottom:auto!important;left:auto!important;right:auto!important;
    transform:none!important;
    min-width:0;width:100%;min-height:81px;
    padding:14px 10px;
    border-radius:13px;
  }
  .connected-graphic .satellite-phone{grid-column:1;grid-row:1}
  .connected-graphic .satellite-cal{grid-column:2;grid-row:1}
  .connected-graphic .satellite-crm{grid-column:1;grid-row:3}
  .connected-graphic .satellite-msg{grid-column:2;grid-row:3}
  .connected-graphic .satellite-symbol{float:left;width:32px;height:32px;margin-right:8px}
  .connected-graphic .satellite strong{font-size:12px;line-height:1.3;white-space:normal;padding-top:2px}
  .connected-graphic .satellite small{font-size:10px;line-height:1.35;white-space:normal;color:#62595e}
  .connected-graphic .graphic-caption{
    grid-column:1/-1;grid-row:4;
    position:relative;bottom:auto;left:auto;
    text-align:center;font-size:10px;letter-spacing:1.2px;
    margin-top:10px;
  }

  .manifesto-section{padding:73px 0 63px}
  .contact-section{padding:78px 0}
  .contact-form{padding:26px 20px 23px}
  .form-field input,.form-field select,.form-field textarea{font-size:16px}
  .faq-section{padding-bottom:82px}
  .faq-list summary{font-size:15px}
  .site-footer{padding-top:55px}
}

@media(max-width:390px){
  .connected-graphic{gap:9px}
  .connected-graphic .satellite{padding:11px 8px;min-height:85px}
  .connected-graphic .satellite-symbol{width:26px;height:28px;margin-right:5px}
  .connected-graphic .satellite strong{font-size:11px}
  .connected-graphic .satellite small{font-size:9.5px}
  .stage-active{font-size:7.5px}
  .stage-confirmation{font-size:10.5px}
}

/* The connection tiles should read as real system labels, not tiny captions
   floating in mostly blank cards. Keep icon and BOTH lines as one unit. */
.satellite{display:flex;align-items:center;gap:9px}
.satellite-symbol{float:none;margin:0;flex:0 0 40px}
.satellite-copy{display:flex;flex-direction:column;justify-content:center;gap:3px;min-width:0}
.satellite-copy strong{font-size:13px;line-height:1.28;white-space:normal}
.satellite-copy small{display:block;font-size:11px;line-height:1.35;white-space:normal;color:#6c5c64;opacity:1}
@media(max-width:640px){
  .connected-graphic .satellite{display:flex;align-items:center;gap:7px;padding:13px 10px}
  .connected-graphic .satellite-symbol{float:none;flex:0 0 32px;width:32px;height:32px;margin:0}
  .connected-graphic .satellite-copy{gap:4px;min-width:0}
  .connected-graphic .satellite-copy strong{font-size:12px;line-height:1.25}
  .connected-graphic .satellite-copy small{display:block;font-size:10.5px;line-height:1.3;color:#645a60}
}
@media(max-width:390px){
  .connected-graphic .satellite{padding:12px 8px;gap:5px}
  .connected-graphic .satellite-symbol{flex-basis:28px;width:28px;height:28px}
  .connected-graphic .satellite-copy strong{font-size:11.5px}
  .connected-graphic .satellite-copy small{font-size:10px}
}