@import url('https://fonts.googleapis.com/css2?family=Holtwood+One+SC&display=swap');
/* Tela de planos. Mesma paleta azul da agenda, fundo branco, sem textura. */
:root{
  /* Nenhuma cor nova: tudo aponta para a paleta que o sistema já usava. */
  /* Nenhuma cor nova: cada token aponta para a paleta que o sistema já usava.
     O valor depois da vírgula é o mesmo dessa paleta, para a página de preços
     funcionar sozinha, sem o styles.css carregado ao lado. */
  --plan-deep:var(--primary-dark,#0c6078);
  --plan-brand:#146b80;                  /* azul da navegação lateral e do cabeçalho */
  --plan-action:var(--primary,#147f9b);
  --plan-tint:#edf7f9;                   /* tom claro já usado na opção marcada do cadastro */
  --plan-line:var(--line,#dfe9ee);
  --plan-ink:var(--ink,#243c4c);
  --plan-body:var(--muted,#73838f);
  --plan-muted:var(--muted,#73838f);
  --plan-paper:#fff;
}

.plans{background:var(--plan-paper);display:grid;gap:clamp(12px,2vh,18px);justify-items:center}
.plans-head{display:grid;gap:clamp(5px,.9vh,9px);justify-items:center;text-align:center;max-width:620px}
.plans-eyebrow{background:var(--plan-tint);color:var(--plan-action);border-radius:999px;padding:4px 13px;font:650 10px/1 'Segoe UI',sans-serif;letter-spacing:1.6px}
.plans-head h2{margin:0;font-size:clamp(21px,2.6vh,27px);line-height:1.18;letter-spacing:-.9px;color:var(--plan-ink);font-weight:600;text-wrap:balance}
.plans-head p{margin:0;font-size:13px;line-height:1.55;color:var(--plan-muted);max-width:52ch}

/* Os dois seletores: ciclo de cobrança e tipo de conta. */
.plans-switches{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center}
.plan-save{flex-basis:100%;text-align:center}
.plan-switch{display:inline-flex;background:var(--plan-tint);border:1px solid var(--plan-line);border-radius:999px;padding:3px;gap:3px}
.plan-switch button{border:0;background:transparent;color:var(--plan-body);border-radius:999px;padding:7px 17px;font:600 13px 'Segoe UI',sans-serif;cursor:pointer;display:inline-flex;align-items:center;gap:8px;line-height:1.3;transition:background .15s,color .15s}
.plan-switch button:hover{color:var(--plan-deep)}
.plan-switch button[aria-pressed="true"]{background:var(--plan-brand);color:#fff;box-shadow:0 2px 8px #146b8033}
.plan-switch button svg{width:16px;height:16px;flex:none}
.plan-switch .plan-switch-sub{display:block;font-size:10px;font-weight:400;opacity:.78;margin-top:1px}
.plan-switch button:focus-visible{outline:2px solid var(--plan-action);outline-offset:2px}
.plan-save{font-size:11px;color:var(--plan-action);font-weight:600}

/* Cartões. */
.plans-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;width:100%;max-width:1020px;align-items:start}
.plan-card{position:relative;background:var(--plan-paper);border:1px solid var(--plan-line);border-radius:14px;padding:18px 18px;display:grid;gap:clamp(9px,1.4vh,13px);align-content:start;min-width:0;box-shadow:0 2px 14px #1a53650a;transition:border-color .15s,box-shadow .15s,transform .15s}
.plan-card:hover{border-color:#9ec6d2;box-shadow:0 8px 24px #1a536514}
.plan-card.selected{border-color:var(--plan-action);box-shadow:0 0 0 2px #147e9726,0 8px 24px #1a536518}
.plan-card.featured{border-color:var(--plan-brand);padding-top:40px}
.plan-flag{position:absolute;inset:0 0 auto 0;background:var(--plan-brand);color:#fff;border-radius:13px 13px 0 0;padding:6px;font:650 11px 'Segoe UI',sans-serif;display:flex;align-items:center;justify-content:center;gap:7px}
.plan-flag svg{width:14px;height:14px}

.plan-top{display:flex;align-items:center;gap:11px;min-width:0}
.plan-mark{width:36px;height:36px;border-radius:10px;background:var(--plan-tint);color:var(--plan-action);display:grid;place-items:center;flex:none}
.plan-mark svg{width:18px;height:18px}
.plan-name{min-width:0}
.plan-name strong{display:block;font-size:15.5px;color:var(--plan-ink);letter-spacing:-.3px}
.plan-name span{display:block;font-size:11px;line-height:1.4;color:var(--plan-muted);margin-top:2px}

.plan-price{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.plan-price strong{font-size:clamp(22px,3.1vh,27px);letter-spacing:-1.2px;color:var(--plan-deep);font-variant-numeric:tabular-nums}
.plan-price span{font-size:13px;color:var(--plan-muted)}
.plan-price-note{font-size:10.5px;color:var(--plan-action);font-weight:600;margin:-7px 0 0}
.plan-price-note:empty{display:none}

.plan-features{list-style:none;margin:0;padding:0;display:grid;gap:clamp(4px,.75vh,7px)}
.plan-features li{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--plan-body);line-height:1.4}
.plan-features li.off{color:var(--plan-muted)}
.plan-tick{width:17px;height:17px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--plan-tint);color:var(--plan-action);font-size:11px;font-weight:700}
.plan-features li.off .plan-tick{background:#f1f4f6;color:#aab9c2}

.plan-choose{width:100%;border-radius:8px;min-height:38px;padding:9px 14px;font:600 12.5px 'Segoe UI',sans-serif;cursor:pointer;border:1px solid var(--plan-action);background:var(--plan-paper);color:var(--plan-action);transition:background .15s,color .15s}
.plan-choose:hover{background:var(--plan-tint)}
.plan-card.featured .plan-choose,.plan-card.selected .plan-choose{background:var(--plan-action);color:#fff}
.plan-card.featured .plan-choose:hover,.plan-card.selected .plan-choose:hover{background:var(--plan-brand)}
.plan-choose:focus-visible{outline:2px solid var(--plan-action);outline-offset:2px}
.plan-choose[disabled]{opacity:.6;cursor:default}

.plans-footnote{font-size:11px;color:var(--plan-muted);text-align:center;max-width:62ch;line-height:1.5;margin:0}
.plans-message{font-size:12px;color:var(--plan-body);text-align:center;line-height:1.6;min-height:1px}

@media(max-width:900px){
  .plans-grid{grid-template-columns:1fr;max-width:420px}
  .plan-card.featured{padding-top:46px}
  .plans-head h2{font-size:25px}
}
@media(max-width:460px){
  .plans{gap:20px}
  .plan-switch button{padding:8px 14px;font-size:12px}
  .plan-card{padding:20px 18px}
  .plan-price strong{font-size:27px}
}

/* Escolha da forma de pagamento, exibida depois que o plano é escolhido. */
.billing-methods{display:grid;gap:12px;justify-items:center;margin-top:4px;padding-top:22px;border-top:1px solid var(--plan-line);width:100%;max-width:1020px}
.billing-methods-head{display:grid;gap:3px;justify-items:center;text-align:center}
.billing-methods-head strong{font-size:15px;color:var(--plan-ink)}
.billing-methods-head span{font-size:12px;color:var(--plan-muted)}
.billing-methods-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.billing-methods-row .plan-choose{width:auto;min-width:168px}
.billing-methods-row .plan-choose.primary{background:var(--plan-action);color:#fff}
.billing-methods-row .plan-choose.primary:hover{background:var(--plan-brand)}
/* A tela de planos ocupa a folha inteira, sem cartão nem fundo texturizado atrás. */
.auth-plans-layout .auth-card{background:var(--plan-paper);border:0;box-shadow:none;padding:30px 24px}
.auth-plans-layout{max-width:1120px}
.auth-plans-layout .auth-actions{justify-content:center;margin-top:26px}
.auth-screen:has(.plans){background:var(--plan-paper)}
/* Na etapa de planos o indicador de etapas acompanha o alinhamento central da tela. */
.auth-plans-layout .auth-progress{justify-content:center;margin-bottom:6px}
.auth-plans-layout .auth-error,.auth-plans-layout .auth-footnote{text-align:center}

/* Topo e margens da página independente, apertados para caber em uma tela. */
.plans-topbar{padding-block:12px!important}
/* A etapa de planos dentro do cadastro também precisa caber sem rolagem. */
.auth-plans-layout{padding:14px 20px!important;min-height:0!important;align-items:start}
.auth-plans-layout .auth-card{padding:10px 18px 14px!important}
.auth-plans-layout .auth-progress{margin-bottom:2px}
.auth-plans-layout .auth-actions{margin-top:14px}
.auth-plans-layout .auth-footnote{margin:10px 0 0}
.auth-screen:has(.plans){padding-bottom:0}

/* Dentro do cadastro há o indicador de etapas e os botões Voltar/Criar conta,
   então essa tela precisa de um aperto a mais para caber sem rolagem. */
.auth-plans-layout .auth-footnote{display:none}
.auth-plans-layout .plans{gap:clamp(9px,1.5vh,14px)}
.auth-plans-layout .plans-head p{font-size:12px;line-height:1.45;max-width:60ch}
.auth-plans-layout .plans-head h2{font-size:clamp(19px,2.3vh,24px)}
.auth-plans-layout .plans-footnote{font-size:10.5px}
.auth-plans-layout .auth-progress{margin-bottom:0}
.auth-plans-layout .auth-progress span{width:22px;height:22px;font-size:10px}
.auth-plans-layout .auth-actions{margin-top:10px}
.auth-plans-layout .auth-actions button{min-height:38px;padding:9px 14px}
.auth-plans-layout .plans-message:empty{display:none}

/* Troca de ciclo ou de tipo de conta: a grade cresce em vez de pular. */
.plans-grid{transition:height .3s cubic-bezier(.4,0,.2,1)}
.plans-grid.animando{overflow:hidden}
.plan-card{transition:border-color .15s,box-shadow .15s,opacity .26s ease,transform .26s ease}
.plan-card-entrando{opacity:0;transform:translateY(7px)}
/* A frase do desconto anual aparece e some sem empurrar os cartões. */
.plan-save{min-height:17px}
.plan-price-note{min-height:14px}
.plan-price-note:empty{display:block}
@media(prefers-reduced-motion:reduce){
  .plans-grid,.plan-card{transition:none}
  .plan-card-entrando{opacity:1;transform:none}
}

/* O topo é só a entrada da página: compacto, e os preços logo abaixo. */
.plans-head{max-width:560px}
.plans-head h2{font-size:clamp(20px,2.4vh,25px)}
.plans-head p{font-size:12.5px;max-width:48ch}
.plans-eyebrow{padding:3px 11px;letter-spacing:1.4px}

/* Entrada curta: cabeçalho em uma linha e os preços logo em seguida. */
.plans{gap:clamp(10px,1.6vh,15px)}
.plans-head{gap:clamp(4px,.7vh,7px);max-width:none}
.plans-head p{max-width:none;white-space:normal}
.plan-save{min-height:16px;margin:0;line-height:1.3}

/* Marca e instituição: tipografia decorativa somente no nome LINOT. */
.linot-wordmark{font-family:'Holtwood One SC',Georgia,serif;font-size:clamp(22px,3vw,30px);font-weight:400;letter-spacing:.02em;line-height:1.3}.linot-square{font-size:23px;color:inherit;flex:none}.linot-owner{font-family:Inter,'Segoe UI',sans-serif;font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.auth-header,.brand{display:flex;align-items:center;gap:10px}.brand{min-width:0}.auth-header .linot-owner{max-width:50vw}