/* HoldCRM login (core bundle component jT): same tokens, type and motion as the landing (site.css). */
.hl{
  --tinta:#0E1B26;--elo:#0F8B7E;--elo-forte:#0A6B61;--elo-claro:#2EC4B0;--papel:#F4F6F5;--nevoa:#E3EBE9;--ardosia:#56656F;
  --display:'Sora',ui-sans-serif,system-ui,sans-serif;--texto:'Instrument Sans',ui-sans-serif,system-ui,sans-serif;--mono:'IBM Plex Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  min-height:100dvh;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);background:var(--papel);color:var(--tinta);font:400 16px/1.6 var(--texto);-webkit-font-smoothing:antialiased
}
.hl *{box-sizing:border-box}
.hl :focus-visible{outline:2px solid var(--elo-claro);outline-offset:3px}

/* ink side */
.hl-lado{position:relative;overflow:hidden;background:var(--tinta);color:var(--papel);display:flex;flex-direction:column;padding:40px clamp(28px,5vw,72px)}
.hl-trama{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='56'%3E%3Cg fill='none' stroke='%232EC4B0' stroke-opacity='.16' stroke-width='2'%3E%3Crect x='6' y='8' width='56' height='20' rx='10'/%3E%3Crect x='54' y='36' width='56' height='20' rx='10'/%3E%3Crect x='-42' y='36' width='56' height='20' rx='10'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image:radial-gradient(ellipse at 70% 30%,#000 10%,transparent 70%);mask-image:radial-gradient(ellipse at 70% 30%,#000 10%,transparent 70%)}
.hl-luz{position:absolute;width:900px;height:900px;left:30%;top:-420px;transform:translateX(-50%);background:radial-gradient(circle,rgba(46,196,176,.20),rgba(46,196,176,0) 62%);pointer-events:none}
.hl-lado>*:not(.hl-trama):not(.hl-luz){position:relative}
.hl-marca img{height:32px;width:auto;display:block}
.hl-meio{margin:auto 0;padding:56px 0}
.hl-sobre{font:500 13px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--elo-claro);margin:0 0 22px}
.hl-titulo{font:700 clamp(44px,5.6vw,84px)/.98 var(--display);letter-spacing:-.055em;margin:0;max-width:11ch}
.hl-titulo span{color:var(--elo-claro)}
.hl-sub{margin:24px 0 0;max-width:46ch;font-size:clamp(16px,1.3vw,18px);color:rgba(238,243,241,.74)}
/* feature boxes: the landing's .card, on ink */
.hl-lista{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:680px}
.hl-lista li{display:grid;align-content:start;gap:8px;padding:20px 18px 22px;border-radius:18px;background:rgba(238,243,241,.04);box-shadow:inset 0 0 0 1px rgba(238,243,241,.10);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:transform .4s var(--ease),box-shadow .4s,background-color .4s}
.hl-lista li:hover{transform:translateY(-4px);background:rgba(46,196,176,.07);box-shadow:inset 0 0 0 1px rgba(46,196,176,.35),0 24px 50px -28px rgba(0,0,0,.6)}
.hl-lista .n{justify-self:start;font:500 11px/1 var(--mono);letter-spacing:.12em;color:var(--elo-claro);background:rgba(46,196,176,.14);padding:6px 9px;border-radius:999px;margin-bottom:6px}
.hl-lista b{font:600 17px/1.25 var(--display);letter-spacing:-.02em}
.hl-lista span:last-child{font-size:14px;line-height:1.5;color:rgba(238,243,241,.62)}
@media (max-width:1180px){ /* narrow desktop: stacked compact boxes, badge beside the text */
  .hl-lista{grid-template-columns:minmax(0,1fr);gap:10px;max-width:460px;margin-top:32px}
  .hl-lista li{grid-template-columns:auto 1fr;gap:2px 14px;padding:14px 16px}
  .hl-lista .n{grid-row:span 2;align-self:start;margin:2px 0 0}
  .hl-lista b{font-size:15px}
  .hl-lista span:last-child{font-size:13px}
}
.hl-copy{font:400 13px var(--texto);color:rgba(238,243,241,.5);margin:0}

/* paper side */
.hl-form-lado{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:40px 20px}
.hl-cartao{width:100%;max-width:420px;background:#fff;border-radius:24px;padding:36px 32px;box-shadow:0 1px 0 rgba(14,27,38,.04),0 30px 60px -30px rgba(14,27,38,.28);border:1px solid rgba(14,27,38,.08)}
.hl-cartao h2{font:700 30px/1.1 var(--display);letter-spacing:-.04em;margin:0 0 8px}
.hl-cartao>p.hl-ajuda{margin:0 0 26px;color:var(--ardosia);font-size:15px}
.hl-campo{display:grid;gap:8px;margin-bottom:16px}
.hl-campo label{font:600 14px var(--display);letter-spacing:-.01em}
.hl-entrada{position:relative}
.hl-entrada input{width:100%;height:50px;border-radius:14px;border:1.5px solid var(--nevoa);background:var(--papel);padding:0 16px;font:400 16px var(--texto);color:var(--tinta);outline:none;transition:border-color .2s,box-shadow .2s,background-color .2s}
.hl-entrada input::placeholder{color:#93A0A8}
.hl-entrada input:focus{border-color:var(--elo);background:#fff;box-shadow:0 0 0 4px rgba(15,139,126,.14)}
.hl-entrada input:disabled{opacity:.6}
.hl-entrada input.com-olho{padding-right:48px}
.hl-olho{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:38px;height:38px;border:0;background:transparent;border-radius:10px;color:var(--ardosia);display:grid;place-items:center;cursor:pointer}
.hl-olho:hover{color:var(--tinta);background:var(--nevoa)}
.hl-olho svg{width:18px;height:18px}
.hl-linha{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 24px;font-size:14px}
.hl-linha label{display:flex;align-items:center;gap:8px;color:var(--ardosia);cursor:pointer;user-select:none}
.hl-linha input{width:16px;height:16px;accent-color:var(--elo)}
.hl-link{border:0;background:none;padding:0;font:600 14px var(--texto);color:var(--elo-forte);cursor:pointer;text-decoration:none}
.hl-link:hover{text-decoration:underline}
.hl-botao{width:100%;height:54px;border:0;border-radius:999px;background:var(--elo-claro);color:var(--tinta);font:600 16px/1 var(--display);letter-spacing:-.01em;display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s}
.hl-botao:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 30px -8px rgba(46,196,176,.65)}
.hl-botao:disabled{opacity:.7;cursor:default}
.hl-botao svg{width:18px;height:18px}
.hl-nota{margin:24px 0 0;padding-top:20px;border-top:1px solid var(--nevoa);text-align:center;font-size:14px;color:var(--ardosia)}
.hl-voltar{font:500 14px var(--texto);color:var(--ardosia);text-decoration:none}
.hl-voltar:hover{color:var(--tinta)}

/* entrance, same easing as the landing reveals */
@media (prefers-reduced-motion:no-preference){
  .hl-sobe{animation:hl-sobe .9s var(--ease) both;animation-delay:calc(.1s + var(--i,0)*.1s)}
  @keyframes hl-sobe{from{opacity:0;transform:translateY(18px);filter:blur(6px)}}
}

/* phone/tablet: ink band on top, form below */
/* the PWA install card (core bundle) covers the form; it shows again inside the app */
body:has(.hl) .fixed.bottom-4.left-4.right-4{display:none}

/* phone/tablet: ink page, compact header, the form rises as a paper sheet */
/* phone/tablet: only the logo and the form; the ink page with the link pattern shows around it */
@media (max-width:960px){
  .hl{position:relative;overflow:hidden;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;align-content:center;padding:calc(76px + env(safe-area-inset-top,0px)) 0 76px;background:var(--tinta)} /* form centered: equal ink above and below, logo sits in the top margin */
  .hl-lado{position:static;padding:0} /* static: the pattern and glow cover the whole page */
  .hl-trama{-webkit-mask-image:none;mask-image:none;opacity:.4}
  .hl-luz{top:auto;bottom:-520px;left:50%}
  .hl>.hl-lado>.hl-marca{position:absolute;top:calc(24px + env(safe-area-inset-top,0px));left:20px}
  .hl-marca img{height:28px}
  .hl-meio,.hl-copy{display:none}
  .hl-form-lado{position:relative;justify-content:flex-start;gap:20px;background:var(--papel);border-radius:0;padding:30px 20px 28px}
  .hl-cartao{max-width:480px;padding:0;background:none;border:0;box-shadow:none;border-radius:0}
  .hl-cartao h2{font-size:28px}
  .hl-cartao>p.hl-ajuda{margin-bottom:22px}
}

/* "ou entre com" Google / Microsoft / Apple / Facebook / LinkedIn (core bundle component LoginSocialHC).
   Only the providers the platform turned on show up; up to 2 show their name, 3+ become a row of icons. */
.hl-social{margin-top:22px}
.hl-social-ou{display:flex;align-items:center;gap:12px;margin:0 0 14px;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#93A0A8}
.hl-social-ou::before,.hl-social-ou::after{content:"";flex:1;height:1px;background:var(--nevoa)}
.hl-social-botoes{display:grid;grid-template-columns:repeat(var(--n,1),minmax(0,1fr));gap:10px}
.hl-social-botao{position:relative;height:50px;border-radius:14px;border:1.5px solid var(--nevoa);background:#fff;display:flex;align-items:center;justify-content:center;gap:10px;font:600 15px/1 var(--display);letter-spacing:-.01em;color:var(--tinta);text-decoration:none;transition:transform .25s var(--ease),border-color .2s,box-shadow .25s}
.hl-social-botao:hover{border-color:var(--elo);transform:translateY(-2px);box-shadow:0 10px 24px -14px rgba(14,27,38,.4)}
.hl-social-botao img{width:20px;height:20px;flex:none}
.hl-social-botoes.so-icones .hl-social-botao span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}