/* Tool behaviour on the clean site. Never loaded by /go, /hr/go or /tool/all. */
/* Popup after download: the site's real dialog, same on the Vizura and the Portal stylesheet */
#tc-pop{max-height:calc(100dvh - 16px);overflow:auto;scrollbar-width:none}
#tc-pop .gatecard{position:relative;isolation:isolate;overflow:hidden;border-radius:24px;padding:clamp(28px,5vw,44px);text-align:center;display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:10px;background:#15131f}
#tc-pop .gatecard>canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
#tc-pop .tc-pop__ask,#tc-pop .ok{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:10px;width:100%;min-width:0}
#tc-pop .ok .h3{padding-inline:32px}
#tc-pop [hidden]{display:none!important}
#tc-pop .tc-pop__ok{margin:0;padding-right:0;font-size:17px;line-height:1.3;font-weight:600;color:var(--chalk,#F3F5F0)}
#tc-pop .h3{margin:0;font-weight:500;font-size:clamp(27px,4vw,36px);line-height:1.14;letter-spacing:-.025em;padding-bottom:.08em;text-wrap:balance}
#tc-pop .lead{margin:0;font-size:clamp(16px,1.5vw,18px);line-height:1.42;max-width:27em;color:var(--chalk,#F3F5F0);text-wrap:pretty}
#tc-pop .gate{display:grid;gap:10px;width:min(460px,100%);margin:6px 0 0}
#tc-pop .gate input:not(.hp){width:100%;min-height:54px;font:inherit;font-size:17px;text-align:center;border-radius:999px;padding:12px 22px;background:rgba(11,12,11,.72);border:1px solid rgba(243,245,240,.35);color:var(--chalk,#F3F5F0)}
#tc-pop .gate input:not(.hp):focus{outline:0;border-color:var(--chalk,#F3F5F0)}
#tc-pop .gate input::placeholder{color:rgba(243,245,240,.72)}
#tc-pop .gate .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
#tc-pop .gate .btn{width:100%;min-height:56px;padding-inline:14px;white-space:normal;line-height:1.2;background:#fff;color:#0B0C0B;box-shadow:none}
#tc-pop .gate .btn:hover{background:#fff}
#tc-pop .fnote{margin:0;font-size:15px;line-height:1.35;color:var(--chalk,#F3F5F0)}
#tc-pop .fnote:empty{display:none}
#tc-pop .fine{margin:0;font-size:15px;line-height:1.4;color:var(--chalk,#F3F5F0)}
#tc-pop .tl{color:var(--chalk,#F3F5F0);text-decoration:underline;text-underline-offset:3px}
#tc-pop .tc-pop__no{all:unset;cursor:pointer;font-size:15px;line-height:1.3;padding:8px 14px;color:var(--chalk,#F3F5F0);text-decoration:underline;text-underline-offset:3px}
#tc-pop .tc-pop__no:focus-visible{outline:2px solid var(--chalk,#F3F5F0);border-radius:8px}
#tc-pop .x{all:unset;cursor:pointer;position:absolute;right:12px;top:12px;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:rgba(11,12,11,.6);color:var(--chalk,#F3F5F0);font-size:20px;line-height:1;z-index:4}
#tc-pop .x:focus-visible{outline:2px solid var(--chalk,#F3F5F0)}
@media(max-width:480px){#tc-pop .gatecard{padding:24px 16px 14px;gap:6px}#tc-pop .tc-pop__ask{gap:8px}#tc-pop .tc-pop__ok{padding-inline:40px;font-size:15px}#tc-pop .h3{font-size:25px}#tc-pop .lead{font-size:15px}#tc-pop .ok .h3{font-size:23px;padding-inline:26px}#tc-pop .gate .btn{font-size:16px}#tc-pop .x{right:8px;top:8px;width:32px;height:32px;font-size:17px}}

@media(max-width:960px){
  /* the preview stays on screen, it never goes under the nav */
  /* grid gives a sticky item only its own row, flex lets it travel the whole tool */
  .studio{display:flex!important;flex-direction:column}
  .studio>.stage,.studio>.panel{width:100%}
  .studio .stage{position:sticky!important;top:58px!important;z-index:30}
  .studio .panel .grp{justify-items:stretch}
  .studio .panel .grp>*{min-width:0}
  .studio .panel .chips,.studio .panel .ths{flex-wrap:nowrap!important;overflow-x:auto;justify-content:flex-start!important;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scroll-padding-inline:14px;margin-inline:-14px;padding-inline:14px;max-width:none;width:calc(100% + 28px);box-sizing:border-box}
  .studio .panel .chips::-webkit-scrollbar,.studio .panel .ths::-webkit-scrollbar{display:none}
  .studio .panel .chip,.studio .panel .th{flex:none;scroll-snap-align:start}
  .studio .panel{gap:10px}
  .studio .panel .tc-seg button{padding:10px 6px;font-size:14px}
  .studio .panel .grp>label,.studio .panel .grp>.lbl{font-size:14px}
  .studio .panel .btn{min-height:50px}
  .studio .stage canvas.art{max-height:36svh}
  .studio .stage .bnw canvas.art{max-height:none}
  /* logo clear space and email signature: preview on top and on screen, controls under it, actions last */
  .ftool{display:flex!important;flex-direction:column}
  .ftool>.fts{display:contents}
  .ftool>.fts>.ftview,.ftool>.fts>.ftsig{order:-1;position:sticky!important;top:58px;z-index:30;box-shadow:0 12px 30px -14px rgba(0,0,0,.9)}
  .ftool>.fts>.ftview img{max-height:36svh}
  .ftool>.fts>.ftsig{max-height:36svh;overflow:auto;border-radius:16px}
  .ftool>.ftp{order:1}
  .ftool>.fts>.ftnav,.ftool>.fts>.ftsample{order:2;margin:0}
  .ftool>.fts>.ftacts{order:3;background:var(--wall,#161816);border-radius:24px;padding:16px}
  .tc-pinned.ftsig{max-height:none!important}
  .tc-pinned.ftsig iframe{width:100%;height:var(--tc-h)!important}
  .tc-pinned.ftview img{max-height:var(--tc-h)!important}
  /* while typing */
  .tc-pinned,.studio .stage.tc-pinned{position:fixed!important;top:var(--tc-top,0px)!important;left:0;right:0;z-index:60!important;margin:0!important;border-radius:0 0 16px 16px!important;display:grid!important;place-items:center;padding:8px!important;background:rgba(18,20,18,.97)!important;transform:none!important;opacity:1!important;overflow:hidden}
  .tc-pinned canvas.art{height:var(--tc-h)!important;width:auto!important;max-width:100%!important;max-height:var(--tc-h)!important;object-fit:contain}
  .tc-pinned .bnw{width:100%}
  .tc-pinned .bnw canvas.art{height:auto!important;width:100%!important}
  .tc-pinned .logostage{height:var(--tc-h)!important;aspect-ratio:auto!important;width:100%}
  html.tc-typing-on .nav,html.tc-typing-on #mbar,html.tc-typing-on .cl-mbar,html.tc-typing-on .vzc{display:none!important}
}
/* photo thumbs stay on one row, no orphan on a second line */
@media(min-width:961px){
  .studio .panel .ths{flex-wrap:nowrap;gap:6px}
  .studio .panel .ths .th{flex:0 1 50px;width:auto;height:auto;min-width:0;aspect-ratio:1}
  .studio .panel .ths .th img{width:100%;height:100%}
}