/* ============================================================
   protectOS · estilos do produto (MAGU Design System v1)
   Depende de /assets/css/tokens.css + main.css + components.css + tool.css.
   Só tokens. Sem gradiente de marca, sem hover que levanta, sem emoji.
   Vale para index.html (.po) e termos.html (.po-doc).
   ============================================================ */

.po, .po-doc {
  --po-ok: #3fd68a;                                  /* verde fixo de significado */
  --po-warn-soft: color-mix(in srgb, var(--warn) 12%, transparent);
  --po-warn-line: color-mix(in srgb, var(--warn) 32%, transparent);
  --po-core-line: color-mix(in srgb, var(--core) 45%, transparent);
  --po-sunk: color-mix(in srgb, var(--bg) 60%, transparent);
}

/* ── layout ────────────────────────────────────────────────── */
.po-section { margin: 0 0 56px; }
.po-section:target { scroll-margin-top: calc(var(--bar-h) + 24px); }

.po-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: -28px 0 48px; }
@media (max-width: 480px) { .po-actions .btn { flex: 1 1 100%; } }

.po-head { max-width: 40em; margin-bottom: 22px; }
.po-head h2 {
  font-family: var(--f-display);
  font-size: var(--t-h2);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.08;
  text-wrap: balance;
  margin: 0 0 8px;
}
.po-head p { color: var(--text-2); font-size: var(--t-md); line-height: 1.5; text-wrap: pretty; margin: 0; }

/* grades: 1 → 2 → 3 colunas (mobile-first) */
.po-grid { display: grid; grid-template-columns: 1fr; gap: 14px; list-style: none; padding: 0; margin: 0; }
@media (min-width: 641px) { .po-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1081px) { .po-grid--3 { grid-template-columns: repeat(3, 1fr); } }

.po .card, .po-doc .card { padding: 22px; border-radius: var(--r-bento); display: block; }
.po .card h3 {
  font-size: var(--t-md);
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0 0 6px;
}
.po .card p { color: var(--text-2); font-size: var(--t-sm); line-height: 1.55; text-wrap: pretty; margin: 0; }

/* ícones de traço inline (mesma gramática do ui-icons.svg) */
.po .ic, .po-doc .ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ── números ───────────────────────────────────────────────── */
.po .card.po-stat { display: flex; flex-direction: column; gap: 4px; }
.po-stat strong { font-family: var(--f-display); font-size: var(--t-xl); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.po-stat span { color: var(--text-2); font-size: var(--t-sm); line-height: 1.45; }

/* ── passos ────────────────────────────────────────────────── */
.po-steps li { display: block; }
.po-num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 10px;
  border-radius: var(--r-sm);
  background: var(--core-soft); color: var(--core-hi);
  font-family: var(--f-mono); font-size: var(--t-sm); font-weight: 600;
  margin-bottom: 14px;
}

/* ── cobertura ─────────────────────────────────────────────── */
.po-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  background: var(--core-soft); color: var(--core-hi);
  margin-bottom: 14px;
}

/* ── planos ────────────────────────────────────────────────── */
.po-plans { align-items: start; }
.po .card.po-plan { display: flex; flex-direction: column; gap: 0; position: relative; }
.po-plan > .chip { align-self: flex-start; margin-bottom: 12px; }
.po-plan h3 { font-size: var(--t-lg); }
.po-plan-desc { min-height: 2.6em; margin-bottom: 18px !important; }
.po-plan.is-featured { border-color: var(--po-core-line); box-shadow: 0 0 0 1px var(--po-core-line) inset; }

.po-price { display: flex; align-items: baseline; gap: 4px; margin: 0 0 18px !important; color: var(--text) !important; }
.po-price-value { font-family: var(--f-display); font-size: 2.1rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.po-price-period { color: var(--text-2); font-size: var(--t-sm); }

.po-features { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.po-features li {
  position: relative; padding-left: 26px;
  font-size: var(--t-sm); line-height: 1.45; color: var(--text-2);
}
.po-features li::before {
  content: ""; position: absolute; left: 0; top: .3em;
  width: 16px; height: 16px; border-radius: 50%;
  background-repeat: no-repeat; background-position: center; background-size: 10px 10px;
}
.po-features .is-on::before {
  background-color: color-mix(in srgb, var(--po-ok) 18%, transparent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233fd68a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E");
}
.po-features .is-off { color: var(--text-3); }
.po-features .is-off::before {
  background-color: color-mix(in srgb, var(--text-3) 14%, transparent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a9a' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E");
}
.po .btn-block { width: 100%; }

/* ── aviso e chamada ───────────────────────────────────────── */
.po-notice { border-color: var(--po-warn-line); background: var(--po-warn-soft); }
.po-notice .chip { margin-bottom: 10px; }
.po-notice h2 { font-size: var(--t-lg); font-weight: 700; letter-spacing: -.02em; margin: 0 0 8px; text-wrap: balance; }
.po-notice p { color: var(--text-2); font-size: var(--t-sm); line-height: 1.6; text-wrap: pretty; margin: 0; }
.po-notice a { color: var(--core); }

.po-cta { text-align: center; padding: 44px 24px; }
.po-cta h2 { font-family: var(--f-display); font-size: var(--t-h2); font-weight: 700; letter-spacing: -.03em; line-height: 1.08; text-wrap: balance; margin: 0 0 10px; }
.po-cta p { color: var(--text-2); max-width: 36em; margin: 0 auto 22px !important; font-size: var(--t-md) !important; text-wrap: pretty; }

/* ── termos (documento) ────────────────────────────────────── */
.po-doc { max-width: 820px; margin: 0 auto; }
.po-doc .t-hero p { max-width: 40em; }
.po-doc-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: -24px 0 28px; list-style: none; padding: 0; }
.po-doc-meta li { font-size: var(--t-xs); color: var(--text-3); padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r-pill); }
.po-doc-meta strong { color: var(--text-2); font-weight: 600; }

.po-toc { margin-bottom: 20px; }
.po-toc h2 { font-size: var(--t-sm); font-weight: 600; color: var(--text-2); margin: 0 0 10px; }
.po-toc ol { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 4px 18px; }
@media (min-width: 641px) { .po-toc ol { grid-template-columns: 1fr 1fr; } }
.po-toc a { display: flex; gap: 10px; align-items: baseline; min-height: 36px; font-size: var(--t-sm); color: var(--text-2); text-decoration: none; }
.po-toc a:hover, .po-toc a:focus-visible { color: var(--core); }
.po-toc a:focus-visible { outline: 2px solid var(--core); outline-offset: 2px; border-radius: var(--r-xs); }
.po-toc .n { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--text-3); }

.po-clause { margin-bottom: 14px; scroll-margin-top: calc(var(--bar-h) + 24px); }
.po-clause .n { display: block; font-family: var(--f-mono); font-size: var(--t-xs); color: var(--core-hi); margin-bottom: 6px; }
.po-clause h2 { font-size: var(--t-lg); font-weight: 700; letter-spacing: -.02em; margin: 0 0 10px; text-wrap: balance; }
.po-clause p, .po-clause li { color: var(--text-2); font-size: var(--t-sm); line-height: 1.6; text-wrap: pretty; }
.po-clause p { margin: 0 0 10px; }
.po-clause p:last-child { margin-bottom: 0; }
.po-clause ul { margin: 0 0 10px; padding-left: 18px; }
.po-clause ul:last-child { margin-bottom: 0; }
.po-clause li + li { margin-top: 5px; }
.po-clause strong { color: var(--text); font-weight: 600; }
.po-clause h4 { font-size: var(--t-sm); font-weight: 700; margin: 14px 0 6px; }

.po-box { padding: 12px 14px; border-radius: var(--r-sm); border: 1px solid var(--line); margin: 0 0 10px; }
.po-box p { margin: 0; }
.po-box--ok { border-color: color-mix(in srgb, var(--po-ok) 32%, transparent); background: color-mix(in srgb, var(--po-ok) 9%, transparent); }
.po-box--warn { border-color: var(--po-warn-line); background: var(--po-warn-soft); }

.po-sign { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 28px; }
@media (min-width: 641px) { .po-sign { grid-template-columns: 1fr 1fr; } }
.po-sign .card { border-radius: var(--r); }
.po-sign .k { display: block; font-size: var(--t-xs); color: var(--text-3); margin-bottom: 6px; }
.po-sign .v { display: block; font-size: var(--t-md); font-weight: 700; letter-spacing: -.02em; }
.po-sign .r { display: block; font-size: var(--t-xs); color: var(--text-2); line-height: 1.5; margin-top: 4px; }
.po-sign .d { display: block; font-size: var(--t-xs); color: var(--text-3); margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); }