/* TMS section, full-app version (draft 10/9/2026). Load AFTER cg-cov-v7.css and cg-tms-corner-c.css. Wide screens: heading and lede on
   top, the seven steps as a numbered rail, the active step's text in a caption line, then the full app at card width (in half a card it
   was unreadable), Back / Next under it. Phones and tablets keep the section's compact stepper under the app. Everything is keyed on .cgx-on (added by tmsapp.js), so with JS off
   or if the app fails to start, the old window shows. */
.cg-cov.cgx-on .cov-win,.cg-cov.cgx-on .cov-ft{display:none!important}
@media (max-width:960px){.cg-cov.cgx-on .cgx-nav{display:none!important}.cg-cov.cgx-on .cov-stp{margin-top:12px!important}}
.cg-cov.cgx-on .cov-frame{background:transparent!important;border:0!important;border-radius:14px!important;overflow:hidden}
.cg-cov.cgx-on .cgx-app{display:block;width:100%;height:auto;aspect-ratio:1166/653;border:0;background:transparent}
@media (max-width:960px){.cg-cov.cgx-on .cgx-app{aspect-ratio:628/462}}
/* phones: the app's phone layout is about 640px tall; reserve that until the app reports its height */
@media (max-width:700px){.cg-cov.cgx-on .cgx-app{aspect-ratio:auto;height:640px}}
.cg-cov.cgx-on .cgx-cap{display:none}
.cg-cov.cgx-on .cgx-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:14px;font:600 14px/1.4 Inter,system-ui,sans-serif;color:#BFD3FF}
.cg-cov.cgx-on .cgx-nav button{min-height:44px;padding:0 18px;border-radius:999px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.06);color:#fff;font:inherit;cursor:pointer;transition:background .2s ease}
.cg-cov.cgx-on .cgx-nav button:hover:not(:disabled){background:rgba(255,255,255,.14)}
.cg-cov.cgx-on .cgx-nav button:focus-visible{outline:2px solid #38BDF8;outline-offset:2px}
.cg-cov.cgx-on .cgx-nav button:disabled{opacity:.35;cursor:default}
.cg-cov.cgx-on .cgx-nav span{min-width:96px;text-align:center}
@media (min-width:961px){
  .cg-cov.cgx-on .cov-stp{display:none!important}
  /* rows: heading, lede, step rail, app (with the caption band above it), then "See every integration" under the app */
  .cg-cov.cgx-on .cov-sec .cov{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto!important;grid-template-areas:"h" "l" "c" "s" "m"!important;row-gap:0!important}
  .cg-cov.cgx-on .cov-sec .cov-head h2{max-width:820px}
  .cg-cov.cgx-on .cov-sec .cov-head .lede{max-width:760px}
  .cg-cov.cgx-on .cov-sec .cov-copy{display:contents!important}
  .cg-cov.cgx-on .cov-sec .cov-steps{grid-area:c;display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px!important;margin:28px 0 0!important;padding:6px!important;border-radius:14px;background:rgba(15,32,75,.35);border:1px solid rgba(255,255,255,.12)}
  .cg-cov.cgx-on .cov-sec .cov-steps li{margin:0!important;padding:0!important}
  .cg-cov.cgx-on .cov-sec .cov-steps button{height:100%;min-height:64px;grid-template-columns:22px minmax(0,1fr)!important;grid-template-rows:auto auto;align-content:start;gap:2px 8px!important;padding:10px 10px!important;border-radius:10px!important}
  .cg-cov.cgx-on .cov-sec .cov-steps button[aria-pressed="true"]{background:rgba(255,255,255,.14)!important;box-shadow:inset 0 0 0 1px rgba(56,189,248,.6)}
  .cg-cov.cgx-on .cov-sec .cov-steps .cs-d{display:none!important}
  .cg-cov.cgx-on .cov-sec .cov-steps .cs-t{font-size:13.5px;line-height:1.3}
  .cg-cov.cgx-on .cov-sec .cov-steps .ro{grid-column:2;justify-self:start}
  .cg-cov.cgx-on .cov-sec .cov-stage{grid-area:s;margin-top:0!important;width:100%}
  .cg-cov.cgx-on .cov-sec .cov-more{grid-area:m;justify-self:center;text-align:center;margin-top:18px!important;padding:0!important}
  /* caption band: the step's title and line sit bottom-left; the right corner stays clear for the corner Meatball (#cg-mb-tms-corner-c),
     who stands on the app's top edge at 84% across and needs about 150px of height there */
  .cg-cov.cgx-on .cgx-cap{display:flex;flex-direction:column;justify-content:flex-end;gap:4px;min-height:168px;max-width:72%;margin:0;padding:0 0 18px;font:400 16px/1.5 Inter,system-ui,sans-serif;color:#DCE6FF}
  .cg-cov.cgx-on .cgx-cap b{display:block;color:#fff;font:600 20px/1.3 var(--f-head,Inter,system-ui,sans-serif);letter-spacing:-.01em}
}
@media (min-width:961px) and (max-width:1199px){
  .cg-cov.cgx-on .cov-sec .cov-steps button{grid-template-columns:minmax(0,1fr)!important;gap:6px!important;padding:10px 8px!important}
  .cg-cov.cgx-on .cov-sec .cov-steps .cs-t{font-size:13px}
  .cg-cov.cgx-on .cov-sec .cov-steps .ro{grid-column:1}
}
/* if the app fails to start, tmsapp.js removes .cgx-on and the old window returns; hide what it added */
.cg-cov:not(.cgx-on) .cgx-app,.cg-cov:not(.cgx-on) .cgx-nav,.cg-cov:not(.cgx-on) .cgx-cap{display:none!important}