/* the value-creation panel runs a touch wider; height is unchanged */
html body main#main>section.vc-sec>.wrap.wide.vc-in{max-width:1500px!important}
html body main#main>section.vc-sec{padding-left:clamp(14px,1.8vw,40px)!important;padding-right:clamp(14px,1.8vw,40px)!important}


/* the rotating use-case labels always fit their column */
.pe-uses-list li{font-size:clamp(24px,2.7vw,40px)!important;line-height:1.42!important;white-space:nowrap!important;overflow:visible!important}
.pe-uses-r{height:calc(5 * 1.42 * clamp(24px,2.7vw,40px))!important;overflow:hidden!important}
.pe-uses-in{grid-template-columns:minmax(0,.32fr) minmax(0,.68fr)!important}
@media(max-width:900px){
  .pe-uses-list li{font-size:clamp(20px,4.2vw,26px)!important}
  .pe-uses-r{height:calc(5 * 1.42 * clamp(20px,4.2vw,26px))!important}
}


.fd-k{font-family:var(--f-ui)!important;font-size:11.5px!important;font-weight:500!important;letter-spacing:.22em!important;text-transform:uppercase!important;color:rgba(247,245,242,.5)!important;margin-bottom:clamp(14px,1.4vw,20px)!important}
.fd-head>div:first-child{min-width:0}


@media(max-width:700px){
  /* ---- page gutters and rhythm ---- */
  html body #main>section,html body #main>header{padding-left:0!important;padding-right:0!important}
  html body #main .wrap,html body #main .wrap.wide{max-width:100%!important;width:100%!important;
    padding-left:20px!important;padding-right:20px!important;box-sizing:border-box!important;margin:0 auto!important}
  html body #main>section{overflow-x:hidden!important}

  /* ---- hero: nothing bleeds off, the shot scales ---- */
  html body header.pghero.pehero h1{font-size:clamp(30px,8.4vw,40px)!important;line-height:1.08!important;letter-spacing:-.02em!important;white-space:normal!important;max-width:none!important}
  html body header.pghero.pehero p,html body header.pghero.pehero .lede{font-size:16px!important;line-height:1.6!important;max-width:none!important}
  html body .pehero .dispw,html body .pehero .disp,html body .dispw,html body .disp{width:100%!important;max-width:100%!important;box-sizing:border-box!important}
  html body .disp{padding:8px!important;border-radius:16px!important}
  html body .disp::after{inset:6px!important;border-radius:10px!important}

  /* ---- foundation head + tiles ---- */
  html body .fd-head{display:block!important;margin-bottom:34px!important}
  html body .fd-h{font-size:clamp(27px,7.6vw,34px)!important;line-height:1.12!important;max-width:none!important}
  html body .fd-head .ld-sub,html body .fd-sub{margin-top:16px!important;max-width:none!important;font-size:15.5px!important}
  html body .fd-grid{grid-template-columns:1fr!important;gap:26px!important}
  html body .fd-card{padding:20px 0 18px 20px!important}
  html body .fd-card h3{margin:26px 0 12px!important;font-size:19px!important}
  html body .fd-card p{font-size:14.5px!important;max-width:none!important}

  /* ---- the stack diagram: fits the screen, labels inside ---- */
  html body .st-grid,html body .stk-grid{grid-template-columns:1fr!important;gap:24px!important}
  html body .solshot,html body .ss-vis .solshot{width:100%!important;max-width:100%!important;height:auto!important;aspect-ratio:auto!important}
  html body .pe-stack,html body .pe-stack-vis,html body .stkwrap{width:100%!important;max-width:100%!important;overflow:hidden!important}
  html body .pe-stack-vis svg,html body .stkwrap svg{width:100%!important;height:auto!important}
  html body .stk-col,html body .pe-layers{width:100%!important;max-width:100%!important}
  html body .pe-layers .pl-row,html body .stk-row{white-space:normal!important}
  html body .pe-layers .pl-row span,html body .stk-row span{font-size:13px!important;white-space:normal!important;text-align:center!important}

  /* ---- rotating use cases ---- */
  html body .pe-uses{height:auto!important;padding:56px 0 48px!important}
  html body .pe-uses-in{grid-template-columns:1fr!important;gap:18px!important;padding-top:0!important}
  html body .pe-uses-l{text-align:left!important;padding-right:0!important}
  html body .pe-uses-list li{font-size:20px!important;line-height:1.5!important;white-space:normal!important;text-align:left!important}
  html body .pe-uses-r{height:calc(5 * 1.5 * 20px)!important;margin-left:0!important}

  /* ---- panels, cards and tables never overflow ---- */
  html body .pq-triad,html body .peb-grid,html body .pe-cta,html body .secgrid,html body .pq-roles{grid-template-columns:1fr!important;gap:18px!important}
  html body .pq-h,html body .ld-h,html body .lsec{font-size:clamp(26px,7.4vw,33px)!important;line-height:1.14!important;max-width:none!important}
  html body .pq-sub,html body .ld-sub,html body .lsub{font-size:15.5px!important;max-width:none!important}
  html body table,html body .pe-table{display:block!important;width:100%!important;overflow-x:auto!important}
  html body img,html body svg{max-width:100%!important}
  /* the workspace mock sits inside the gutters */
  html body .vc-sec .vc-in,html body .vc-grid{grid-template-columns:1fr!important;gap:22px!important}
  html body .vc-shot,html body .vc-lap,html body .vc-app,html body .vc-bar,html body .vc-detail{
    width:100%!important;max-width:100%!important;margin-left:0!important;margin-right:0!important;
    transform:none!important;left:auto!important;right:auto!important;box-sizing:border-box!important}
  html body .vc-shot{overflow:hidden!important;border-radius:16px!important}
  html body .vc-detail{position:static!important;margin-top:14px!important}
  /* the floating talk-to-us pill stops covering the composer */
  html body .motion-try,html body #salesPill{bottom:10px!important;right:10px!important;transform:scale(.88);transform-origin:bottom right}
}