/* ==========================================================================
   pages.css — NTWeb 2026 Deep Command
   Estilos específicos de páginas não cobertos por components.css:
   - Cart (lista de itens + summary lateral)
   - Configure Product (2 colunas: form + resumo)
   - Billing cycles grid, Addons, Config options
   - Alerts (success/warn/error)
   - Knowledge base (busca, categorias, artigos)
   - Error state, generic
   ========================================================================== */

.nt-hero.nt-home-bg {
  min-height: calc(100vh - var(--nav-height, 64px) - var(--services-menu-height, 48px));
  display: grid;
  align-items: center;
  border-bottom: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.72) 52%, rgba(255, 255, 255, 0.84) 100%),
    url("../images/background-home-20260426-v2.avif") center top / cover no-repeat;
}

/* Home: remove a linha superior da faixa "promessa nt" */
.nt-cta-final.nt-cta-final--soft {
  border-top: 0;
}

/* Home: aproxima a seção seguinte do hero para a transição ficar mais limpa */
.nt-home-bg + .nt-section--soft {
  padding-top: var(--space-10) !important;
}

/* Home: remove a linha entre a CTA final e o footer */
body:has(.nt-hero.nt-home-bg) .nt-footer {
  border-top: 0;
}

.nt-page-bg {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.80) 0%, rgba(255, 255, 255, 0.74) 52%, rgba(255, 255, 255, 0.86) 100%),
    url("../images/background.png") center top / cover no-repeat;
}

.nt-page-bg .nt-card,
.nt-page-bg .card,
.nt-page-bg .panel,
.nt-page-bg .cart-sidebar,
.nt-page-bg .view-cart-items,
.nt-page-bg .order-summary {
  background: rgba(255, 255, 255, 0.92);
}

.nt-page-bg #order-standard_cart {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-8) var(--container-pad) var(--space-16);
}

.nt-page-bg #order-standard_cart > .row {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
  margin: 0;
}

.nt-page-bg #order-standard_cart .cart-body > .row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space-8);
  align-items: start;
  margin: 0;
}

.nt-page-bg #order-standard_cart .panel,
.nt-page-bg #order-standard_cart .card,
.nt-page-bg #order-standard_cart .order-summary,
.nt-page-bg #order-standard_cart .view-cart-items,
.nt-page-bg #order-standard_cart .view-cart-tabs .tab-content,
.nt-page-bg #order-standard_cart .view-cart-items-header {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-md);
}

.nt-page-bg #order-standard_cart .card-header,
.nt-page-bg #order-standard_cart .panel-heading {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.88);
}

.nt-page-bg #order-standard_cart .panel-title,
.nt-page-bg #order-standard_cart .panel-title a,
.nt-page-bg #order-standard_cart .header-lined h1,
.nt-page-bg #order-standard_cart .font-size-36,
.nt-page-bg #order-standard_cart .font-size-30 {
  color: var(--text-1);
}

.nt-page-bg #order-standard_cart .header-lined {
  margin-bottom: var(--space-6);
}

.nt-page-bg #order-standard_cart .header-lined h1 {
  margin: 0;
  font-size: clamp(2rem, 3vw, 3rem);
}

.nt-page-bg #order-standard_cart .list-group,
.nt-page-bg #order-standard_cart .panel-body,
.nt-page-bg #order-standard_cart .summary-container,
.nt-page-bg #order-standard_cart .view-cart-tabs .tab-content,
.nt-page-bg #order-standard_cart .view-cart-items,
.nt-page-bg #order-standard_cart .view-cart-items-header {
  padding: var(--space-4);
}

.nt-page-bg #order-standard_cart .list-group-item,
.nt-page-bg #order-standard_cart .list-group-item-action {
  display: block;
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text-2);
  text-decoration: none;
}

.nt-page-bg #order-standard_cart .list-group-item-action:hover,
.nt-page-bg #order-standard_cart .list-group-item-action.active {
  background: var(--accent-soft);
  color: var(--accent);
}

.nt-page-bg #order-standard_cart .view-cart-items-header {
  margin-bottom: var(--space-3);
  background: rgba(255, 255, 255, 0.96);
}

.nt-page-bg #order-standard_cart .view-cart-empty {
  padding: var(--space-8) var(--space-4);
  text-align: center;
  color: var(--text-2);
}

.nt-page-bg #order-standard_cart .nav-tabs {
  display: flex;
  gap: var(--space-2);
  padding: 0;
  margin: 0 0 var(--space-3);
  list-style: none;
  border: 0;
}

.nt-page-bg #order-standard_cart .nav-tabs .nav-link {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-2);
  background: rgba(255, 255, 255, 0.7);
}

.nt-page-bg #order-standard_cart .nav-tabs .nav-link.active {
  color: var(--accent);
  border-color: var(--accent-border);
  background: rgba(255, 255, 255, 0.96);
}

.nt-page-bg #order-standard_cart .form-control,
.nt-page-bg #order-standard_cart .custom-select,
.nt-page-bg #order-standard_cart .field {
  width: 100%;
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-1);
}

.nt-page-bg #order-standard_cart .btn {
  border-radius: var(--radius-sm);
}

.nt-page-bg #order-standard_cart .btn-default,
.nt-page-bg #order-standard_cart .btn-link {
  color: var(--text-2);
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid var(--border);
}

.nt-page-bg #order-standard_cart .btn-success,
.nt-page-bg #order-standard_cart .btn-primary {
  color: var(--accent-contrast);
  background: var(--accent);
  border: 1px solid var(--accent);
}

.nt-page-bg #order-standard_cart .btn.disabled,
.nt-page-bg #order-standard_cart .btn[disabled] {
  opacity: 0.55;
}

.nt-page-bg #order-standard_cart .order-summary h2 {
  margin: 0;
  padding: var(--space-5);
  border-bottom: 1px solid var(--border);
}

.nt-page-bg #order-standard_cart .summary-container {
  display: grid;
  gap: var(--space-3);
}

.nt-page-bg #order-standard_cart .subtotal,
.nt-page-bg #order-standard_cart .recurring-totals,
.nt-page-bg #order-standard_cart .total-due-today {
  color: var(--text-2);
}

.nt-page-bg #order-standard_cart .total-due-today .amt {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw, 2.75rem);
  line-height: 1;
  color: var(--text-1);
}

.nt-page-bg #order-standard_cart .modal.fade {
  display: none !important;
}

.nt-page-bg #order-standard_cart .modal.fade.show {
  display: block !important;
}

.nt-page-bg #order-standard_cart .product-recommendation.clonable,
.nt-page-bg #order-standard_cart .product-recommendation.hidden,
.nt-page-bg #order-standard_cart .w-hidden.hidden {
  display: none !important;
}

.nt-auth-bg {
  position: relative;
  min-height: calc(100vh - var(--nav-height, 64px));
  padding: var(--space-16) 0;
  isolation: isolate;
  overflow: hidden;
  color: var(--text-1);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.80) 0%, rgba(255, 255, 255, 0.74) 52%, rgba(255, 255, 255, 0.86) 100%),
    url("../images/background.png") center top / cover no-repeat;
}

.nt-auth-bg > .nt-container {
  position: relative;
  z-index: 1;
}

.nt-auth-bg .nt-card,
.nt-auth-bg .nt-auth-card {
  color: var(--text-1);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(10px);
}

.nt-auth-bg .nt-auth-layout {
  max-width: 960px;
  margin: 0 auto;
}

.nt-auth-bg .nt-auth-card {
  padding: var(--space-8);
  border-radius: var(--radius-md);
}

.nt-auth-bg .nt-section-header__title,
.nt-auth-bg .nt-form-section__title {
  color: var(--text-1);
}

.nt-auth-bg h1,
.nt-auth-bg h2,
.nt-auth-bg h3 {
  color: var(--text-1);
}

.nt-auth-bg .nt-section-header__lead,
.nt-auth-bg .nt-auth-alt {
  color: var(--text-2);
}

.nt-auth-bg .nt-checkbox,
.nt-auth-bg .nt-checkbox-wrapper {
  color: var(--text-2);
}

.nt-auth-bg .nt-register-form {
  display: grid;
  gap: var(--space-5);
}

.nt-auth-bg .nt-form-section {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
  margin: 0;
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.62);
}

.nt-auth-bg .nt-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.nt-auth-bg .nt-form-group {
  display: grid;
  gap: var(--space-2);
}

.nt-auth-bg .nt-form-label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-3);
}

.nt-auth-bg .nt-input,
.nt-auth-bg .nt-select,
.nt-auth-bg .nt-textarea {
  background-color: var(--surface);
  border-color: var(--border);
  color: var(--text-1);
}

.nt-auth-bg .nt-input:focus,
.nt-auth-bg .nt-select:focus,
.nt-auth-bg .nt-textarea:focus {
  background-color: var(--card);
  border-color: var(--accent);
}

.nt-auth-bg .nt-select option {
  color: var(--text-1);
}

.nt-auth-bg .nt-auth-alt a,
.nt-auth-bg .nt-checkbox-label a {
  color: var(--accent);
}

@media (max-width: 720px) {
  .nt-auth-bg {
    min-height: calc(100vh - var(--nav-height, 64px));
    padding: var(--space-10) 0;
    background-position: center top;
  }

  .nt-auth-bg .nt-auth-card {
    padding: var(--space-5);
  }

  .nt-auth-bg .nt-form-row {
    grid-template-columns: 1fr;
  }
}

.nt-alert {
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--text-1);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  margin-bottom: var(--space-4);
}
.nt-alert--success {
  border-left-color: var(--green);
  background: color-mix(in oklch, var(--green) 8%, var(--surface-2));
}
.nt-alert--warning {
  border-left-color: var(--amber);
  background: color-mix(in oklch, var(--amber) 8%, var(--surface-2));
}
.nt-alert--error {
  border-left-color: var(--red, oklch(62% 0.22 25));
  background: color-mix(in oklch, var(--red, oklch(62% 0.22 25)) 8%, var(--surface-2));
}
.nt-alert--info {
  border-left-color: var(--accent);
  background: var(--accent-soft);
}

/* ==========================================================================
   2. Error State (página inteira)
   ========================================================================== */
.nt-error-state {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-10);
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  max-width: 640px;
  margin: 0 auto;
}
.nt-error-state .nt-label-mono {
  color: var(--red, oklch(62% 0.22 25));
}

/* ==========================================================================
   3. Cart
   ========================================================================== */
.nt-cart-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--space-8);
  align-items: start;
}

.nt-cart-items {
  display: grid;
  gap: var(--space-3);
}

.nt-cart-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-translucent);
  align-items: start;
}
.nt-cart-item__info { min-width: 0; }
.nt-cart-item__name {
  font-size: var(--fs-h5);
  font-weight: 600;
  color: var(--text-1);
  margin: 0 0 var(--space-2);
}
.nt-cart-item__cycle,
.nt-cart-item__domain {
  font-size: var(--fs-small);
  color: var(--text-2);
  margin: var(--space-1) 0;
}
.nt-cart-item__config {
  list-style: none;
  padding: var(--space-2) 0 0;
  margin: var(--space-2) 0 0;
  border-top: 1px solid var(--border);
  font-size: var(--fs-small);
  color: var(--text-2);
  display: grid;
  gap: var(--space-1);
}
.nt-cart-item__price {
  font-family: var(--font-mono);
  font-size: var(--fs-h5);
  font-weight: 600;
  color: var(--text-1);
  white-space: nowrap;
}
.nt-cart-item__remove {
  font-size: var(--fs-small);
  color: var(--text-3);
  padding: var(--space-1) var(--space-2);
}
.nt-cart-item__remove:hover { color: var(--red, oklch(62% 0.22 25)); }

/* Summary lateral */
.nt-cart-summary {
  position: sticky;
  top: var(--space-6);
  padding: var(--space-6);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-lg);
  background: var(--surface-translucent);
}
.nt-cart-summary__title {
  font-size: var(--fs-h5);
  font-weight: 600;
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}
.nt-cart-summary__lines {
  display: grid;
  gap: var(--space-2);
  margin: 0;
}
.nt-cart-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--fs-body);
}
.nt-cart-summary__row dt { color: var(--text-2); font-weight: 400; }
.nt-cart-summary__row dd { margin: 0; font-family: var(--font-mono); color: var(--text-1); }
.nt-cart-summary__discount dd { color: var(--green); }
.nt-cart-summary__total {
  padding-top: var(--space-3);
  margin-top: var(--space-3);
  border-top: 1px solid var(--border);
  font-size: var(--fs-h5);
  font-weight: 600;
}
.nt-cart-summary__total dd { color: var(--accent); }

.nt-cart-promo {
  margin-top: var(--space-6);
  padding: var(--space-5);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}
.nt-cart-promo .nt-form-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2);
}

.nt-cart-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
  flex-wrap: wrap;
}

/* ==========================================================================
   4. Configure Product (cart.php?a=confproduct)
   ========================================================================== */
.nt-hero--product { padding: var(--space-10) 0 var(--space-6); }

.nt-confprod-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-8);
  align-items: start;
}

.nt-confprod-form {
  display: grid;
  gap: var(--space-8);
}
.nt-confprod-section-title {
  font-size: var(--fs-h5);
  font-weight: 600;
  color: var(--text-1);
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
  width: 100%;
}
.nt-confprod-cycles,
.nt-confprod-options,
.nt-confprod-addons,
.nt-confprod-domain {
  border: 0;
  padding: 0;
  margin: 0;
}

/* Cycle cards (radio visual) */
.nt-cycles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-3);
}
.nt-cycle-card {
  position: relative;
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out);
}
.nt-cycle-card:hover { border-color: var(--border-bright); }
.nt-cycle-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.nt-cycle-card:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.nt-cycle-card__name {
  font-size: var(--fs-small);
  color: var(--text-2);
  font-weight: 500;
}
.nt-cycle-card__price {
  font-family: var(--font-mono);
  font-size: var(--fs-h5);
  font-weight: 600;
  color: var(--text-1);
}
.nt-cycle-card__badge {
  position: absolute;
  top: -8px;
  right: var(--space-3);
}

/* Config options (qty/qty/dropdown/textbox/yesno) */
.nt-confprod-option {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.nt-confprod-option:last-child { margin-bottom: 0; }

/* Addons */
.nt-addon-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  cursor: pointer;
  margin-bottom: var(--space-3);
  align-items: start;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.nt-addon-card:hover { border-color: var(--border-bright); }
.nt-addon-card:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.nt-addon-card__info { min-width: 0; }
.nt-addon-card__name {
  display: block;
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: var(--space-1);
}
.nt-addon-card__desc {
  font-size: var(--fs-small);
  color: var(--text-2);
  margin: 0;
  line-height: var(--lh-tight);
}
.nt-addon-card__price {
  font-family: var(--font-mono);
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--text-1);
  white-space: nowrap;
  text-align: right;
}

/* Resumo lateral do configure product (sticky) */
.nt-confprod-summary {
  position: sticky;
  top: var(--space-6);
  padding: var(--space-6);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-lg);
  background: var(--surface);
  display: grid;
  gap: var(--space-4);
}

/* Checkbox wrapper (YesNo option, promo, tos) */
.nt-checkbox-wrapper {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  cursor: pointer;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-out);
}
.nt-checkbox-wrapper:hover { border-color: var(--border-bright); }
.nt-checkbox-wrapper .nt-checkbox { margin-top: 2px; flex-shrink: 0; }
.nt-checkbox-label { font-size: var(--fs-body); color: var(--text-1); line-height: var(--lh-body); }

/* ==========================================================================
   5. Knowledge base
   ========================================================================== */
.nt-kb-search {
  max-width: 640px;
  margin: 0 auto var(--space-10);
}
.nt-kb-search__input-group {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2);
}

.nt-kb-category {
  padding: 0;
  transition: border-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.nt-kb-category:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.nt-kb-category__link {
  display: block;
  padding: var(--space-5);
  text-decoration: none;
  color: inherit;
}
.nt-kb-category__name {
  font-size: var(--fs-h5);
  font-weight: 600;
  color: var(--text-1);
  margin: 0 0 var(--space-2);
}

.nt-kb-articles__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-2);
}
.nt-kb-article {
  border-bottom: 1px solid var(--border);
}
.nt-kb-article:last-child { border-bottom: 0; }
.nt-kb-article__link {
  display: block;
  padding: var(--space-4) 0;
  text-decoration: none;
  color: inherit;
  transition: padding-left var(--duration-fast) var(--ease-out);
}
.nt-kb-article__link:hover {
  padding-left: var(--space-2);
}
.nt-kb-article__title {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--text-1);
  margin: 0 0 var(--space-1);
}
.nt-kb-article__summary {
  font-size: var(--fs-small);
  color: var(--text-2);
  margin: 0;
  line-height: var(--lh-body);
}

/* ==========================================================================
   Tickets — supporttickets.tpl + clientareatickets.tpl
   ========================================================================== */
.nt-tickets-list { display: grid; gap: var(--space-2); }

.nt-ticket-item { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); transition: border-color var(--duration-base) var(--ease-out); }
.nt-ticket-item:hover { border-color: var(--accent-border); }
.nt-ticket-item__link { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); text-decoration: none; color: inherit; }
.nt-ticket-item__id { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-3); white-space: nowrap; }
.nt-ticket-item__info { min-width: 0; }
.nt-ticket-item__subject { font-weight: 500; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nt-ticket-item__meta { display: flex; gap: var(--space-2); align-items: center; }
.nt-ticket-item__dates { font-size: var(--text-xs); color: var(--text-3); display: flex; flex-direction: column; gap: var(--space-1); text-align: right; }

.nt-tickets-grid { display: grid; gap: var(--space-3); }
.nt-ticket-row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); text-decoration: none; color: inherit; transition: border-color var(--duration-base) var(--ease-out); }
.nt-ticket-row:hover { border-color: var(--accent-border); }
.nt-ticket-row__id { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-3); white-space: nowrap; }
.nt-ticket-row__main { min-width: 0; display: grid; gap: var(--space-1); }
.nt-ticket-row__subject { font-weight: 500; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nt-ticket-row__dept { font-size: var(--text-xs); color: var(--text-3); }
.nt-ticket-row__date { font-size: var(--text-xs); color: var(--text-3); white-space: nowrap; }

/* ==========================================================================
   Service item — clientareaproducts.tpl (/clientarea.php?action=services)
   Mesmo padrão de .nt-ticket-row / .nt-domain-row
   ========================================================================== */
.nt-services-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: var(--space-4);
  margin: 0 0 var(--space-6);
}

.nt-services-filter {
  display: grid;
  gap: var(--space-2);
  width: min(100%, 280px);
}

.nt-services-filter .nt-select {
  width: 100%;
}

.nt-services-list {
  display: grid;
  gap: var(--space-3);
}

.nt-service-item {
  display: grid;
  grid-template-columns: minmax(220px, 1.15fr) minmax(360px, 1.55fr) auto;
  align-items: stretch;
  gap: 0;
  min-height: 136px;
  overflow: hidden;
  background: var(--card-translucent);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}
.nt-service-item:hover {
  border-color: var(--accent-border);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.nt-service-item__info {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: var(--space-1);
  padding: var(--space-5) var(--space-6);
  border-right: 1px solid var(--border);
}
.nt-service-item__group {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.nt-service-item__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-1);
  line-height: 1.15;
  text-transform: uppercase;
  word-break: break-word;
}
.nt-service-item__domain {
  font-size: var(--text-xs);
  color: var(--text-2);
  margin: 0;
  word-break: break-word;
}

.nt-service-item__details {
  min-width: 0;
  display: grid;
  align-content: center;
  padding: var(--space-5) var(--space-6);
}
.nt-service-item__details dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0;
}
.nt-service-item__row {
  display: grid;
  align-content: start;
  gap: var(--space-1);
  min-width: 0;
  padding: var(--space-3);
  background: var(--void);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.nt-service-item__row dt {
  font-size: var(--text-xs);
  color: var(--text-3);
  font-weight: 600;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.nt-service-item__row dd {
  margin: 0;
  font-size: var(--text-md);
  color: var(--text-1);
  font-weight: 600;
  word-break: break-word;
}
.nt-service-item__row dd .nt-badge { font-size: var(--text-xs); }

.nt-service-item__actions {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-5) var(--space-6);
  border-left: 1px solid var(--border);
  background: color-mix(in srgb, var(--accent) 4%, var(--card));
}

.nt-service-item__actions .nt-btn {
  width: 100%;
  min-width: 136px;
}

@media (max-width: 1100px) {
  .nt-service-item {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .nt-service-item__info,
  .nt-service-item__details,
  .nt-service-item__actions {
    border: 0;
  }
  .nt-service-item__info,
  .nt-service-item__details {
    border-bottom: 1px solid var(--border);
  }
  .nt-service-item__actions {
    align-items: flex-start;
  }
}
@media (max-width: 560px) {
  .nt-services-toolbar {
    align-items: stretch;
  }
  .nt-services-filter {
    width: 100%;
  }
  .nt-service-item__details dl {
    grid-template-columns: 1fr;
  }
  .nt-service-item__info,
  .nt-service-item__details,
  .nt-service-item__actions {
    padding: var(--space-4);
  }
  .nt-service-item__actions .nt-btn {
    width: 100%;
  }
}

.nt-page-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-8); }
.nt-page-header__title { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); text-transform: uppercase; letter-spacing: 0.02em; margin: var(--space-2) 0 0; }
.nt-filter-bar { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-8); padding: var(--space-4); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); }
.nt-filter-bar .nt-field { flex: 1; min-width: 180px; }
.nt-filter-bar .nt-field--submit { flex: 0 0 auto; align-self: flex-end; }
.nt-pagination { display: flex; justify-content: center; gap: var(--space-2); margin-top: var(--space-8); flex-wrap: wrap; }
.nt-pagination[hidden] { display: none; }
.nt-pagination__btn { font-family: var(--font-mono); font-size: var(--text-sm); padding: var(--space-2) var(--space-3); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-2); cursor: pointer; transition: all var(--duration-base) var(--ease-out); min-width: 40px; }
.nt-pagination__btn:hover:not(:disabled):not([aria-current="page"]) { border-color: var(--accent-border); color: var(--text-1); }
.nt-pagination__btn[aria-current="page"] { background: var(--accent); color: var(--accent-on); border-color: var(--accent); cursor: default; }
.nt-pagination__btn:disabled { opacity: 0.4; cursor: not-allowed; }
.nt-pagination__btn--toggle { margin-left: var(--space-4); border-style: dashed; }
@media (max-width: 600px) { .nt-pagination__btn--toggle { margin-left: 0; flex-basis: 100%; text-align: center; } }
.nt-service-item[data-filter-hidden], .nt-service-item[data-page-hidden] { display: none !important; }

/* ==========================================================================
   Empty state — supporttickets.tpl (.nt-empty); clientarea usa .nt-empty-state
   ========================================================================== */
.nt-empty { display: grid; place-items: center; gap: var(--space-4); text-align: center; padding: var(--space-16) var(--space-4); }
.nt-empty__icon { width: 48px; height: 48px; color: var(--text-3); }
.nt-empty__title { font-family: var(--font-display); font-size: var(--text-xl); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-1); margin: 0; }
.nt-empty__body { font-size: var(--text-sm); color: var(--text-2); max-width: 40ch; margin: 0; line-height: var(--lh-body); }

/* ==========================================================================
   Faturas — clientareainvoices.tpl
   ========================================================================== */
.nt-invoices-filter { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); flex-wrap: wrap; }
.nt-invoices-list { display: grid; gap: var(--space-2); }
.nt-invoice-item { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); transition: border-color var(--duration-base) var(--ease-out); }
.nt-invoice-item:hover { border-color: var(--accent-border); }
.nt-invoice-item__link { display: grid; grid-template-columns: auto 1fr 1fr auto auto; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); text-decoration: none; color: inherit; }
.nt-invoice-item__id { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-3); }
.nt-invoice-item__date { font-size: var(--text-sm); color: var(--text-2); }
.nt-invoice-item__duedate { font-size: var(--text-sm); color: var(--text-2); }
.nt-invoice-item__total { font-family: var(--font-mono); font-weight: 600; color: var(--text-1); }

/* ==========================================================================
   Anúncios — announcements.tpl
   ========================================================================== */
.nt-announcements-list { display: grid; gap: var(--space-6); }
.nt-announcement { padding: var(--space-6); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); }
.nt-announcement__header { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); }
.nt-announcement__date { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-3); text-transform: uppercase; letter-spacing: 0.1em; }
.nt-announcement__title { font-family: var(--font-display); font-size: var(--text-xl); text-transform: uppercase; letter-spacing: 0.02em; margin: 0; }
.nt-announcement__title a { color: var(--text-1); text-decoration: none; }
.nt-announcement__title a:hover { color: var(--accent); }
.nt-announcement__summary { color: var(--text-2); line-height: var(--lh-body); margin: 0 0 var(--space-4); }

/* ==========================================================================
   Status badges — .nt-badge.nt-status--{status}
   ========================================================================== */
.nt-status--active,
.nt-status--paid    { background: color-mix(in srgb, var(--green) 15%, transparent); color: var(--green); border-color: color-mix(in srgb, var(--green) 30%, transparent); }
.nt-status--suspended,
.nt-status--cancelled,
.nt-status--closed  { background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); border-color: color-mix(in srgb, var(--red) 25%, transparent); }
.nt-status--pending,
.nt-status--unpaid,
.nt-status--open    { background: color-mix(in srgb, var(--amber) 15%, transparent); color: var(--amber); border-color: color-mix(in srgb, var(--amber) 30%, transparent); }
.nt-status--answered { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.nt-status--customer-reply,
.nt-status--in-progress { background: color-mix(in srgb, #00bcd4 15%, transparent); color: #00bcd4; border-color: color-mix(in srgb, #00bcd4 30%, transparent); }

/* PT-BR aliases — ticket statuses renomeados pelo admin do WHMCS NTWeb */
.nt-status--aberto      { background: color-mix(in srgb, var(--amber) 15%, transparent); color: var(--amber); border-color: color-mix(in srgb, var(--amber) 30%, transparent); }
.nt-status--respondido  { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.nt-status--encerrado,
.nt-status--fechado     { background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); border-color: color-mix(in srgb, var(--red) 25%, transparent); }
.nt-status--em-andamento,
.nt-status--em-progresso,
.nt-status--resposta-do-cliente { background: color-mix(in srgb, #00bcd4 15%, transparent); color: #00bcd4; border-color: color-mix(in srgb, #00bcd4 30%, transparent); }

/* sr-only utility */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width: 1024px) {
  .nt-page-bg #order-standard_cart > .row,
  .nt-page-bg #order-standard_cart .cart-body > .row,
  .nt-cart-layout,
  .nt-confprod-layout {
    grid-template-columns: 1fr;
  }
  .nt-cart-summary,
  .nt-confprod-summary {
    position: static;
  }
}

@media (max-width: 640px) {
  .nt-cart-item {
    grid-template-columns: 1fr;
  }
  .nt-cart-item__price,
  .nt-cart-item__remove {
    justify-self: start;
  }
  .nt-cart-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .nt-cart-actions > * { width: 100%; text-align: center; }
  .nt-addon-card {
    grid-template-columns: auto 1fr;
  }
  .nt-addon-card__price {
    grid-column: 2;
    text-align: left;
  }
}

/* ==========================================================================
    Utilities — text, sections
    ========================================================================== */

.nt-text-center {
  text-align: center;
}

.nt-title--lg {
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
  font-weight: 700;
  color: var(--text-1);
  margin-top: var(--space-2);
  line-height: var(--lh-tight);
}

.nt-title--md {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw + 0.8rem, 2.25rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-1);
  margin: 0;
  text-wrap: balance;
}

.nt-lead {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--text-2);
  line-height: var(--lh-body);
  margin: 0;
  text-wrap: pretty;
  max-width: 60ch;
}

.nt-section--soft {
  background: var(--surface-translucent);
  padding: var(--space-16) 0;
}

.nt-container--sm {
  max-width: 760px;
  margin-inline: auto;
  padding: 0 var(--container-pad);
}

/* ==========================================================================
    Trust / Diferenciais section (homepage)
    ========================================================================== */

.nt-trust {
  padding: var(--space-20) 0;
  background: var(--surface);
}
.nt-trust__header {
  text-align: center;
  margin-bottom: var(--space-12);
}
.nt-trust__title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
  font-weight: 700;
  color: var(--text-1);
  margin-top: var(--space-2);
  line-height: var(--lh-tight);
}
.nt-trust__title em {
  color: var(--accent);
  font-style: normal;
}
.nt-trust__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}
@media (max-width: 640px) {
  .nt-trust__grid { grid-template-columns: 1fr; }
}

/* Diferencial card */
.nt-diferencial {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
.nt-diferencial:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.nt-diferencial__icon {
  font-size: var(--text-xl);
  color: var(--accent);
  line-height: 1;
}
.nt-diferencial__title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-1);
  margin: 0;
}
.nt-diferencial__desc {
  font-size: var(--text-xs);
  color: var(--text-2);
  line-height: var(--lh-loose);
  margin: 0;
}
/* Datacenter card — spans full grid width */
.nt-diferencial--datacenter {
  grid-column: 1 / -1;
}
.nt-diferencial__dc-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.nt-diferencial__flag {
  font-size: var(--text-2xl);
  line-height: 1;
}

/* ==========================================================================
   12. Product Landing — Plan Cards (.nt-section--plans, .nt-grid--plans,
       .nt-card-plan)
   ========================================================================== */

/* Section wrapper — deep background to lift the cards */
.nt-section--plans {
  background: var(--deep-translucent);
  padding: var(--space-20) 0;
}

/* Responsive grid: fill available space, min 240 px per card */
.nt-grid--plans {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-12);
}

/* Individual plan card */
.nt-card-plan {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--card-translucent);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
}

.nt-card-plan:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
}

/* Featured / "Mais popular" variant */
.nt-card-plan--featured {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 4%, var(--card));
  position: relative;
}

.nt-card-plan--featured::before {
  content: "Mais popular";
  position: absolute;
  top: calc(-1 * var(--space-3));
  left: var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-contrast);
  background: var(--accent);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  line-height: 1.4;
}

/* Plan name */
.nt-card-plan__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-1);
  margin: 0;
  line-height: var(--lh-tight);
}

/* Summary — grows to fill remaining space before price */
.nt-card-plan__summary {
  font-size: var(--text-xs);
  color: var(--text-2);
  line-height: var(--lh-body);
  margin: 0;
  flex-grow: 1;
}

/* Price block — always pinned above the CTA */
.nt-card-plan__price-block {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  margin-top: auto;
}

.nt-card-plan__amount {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--text-1);
  line-height: 1;
}

.nt-card-plan__cycle {
  font-size: var(--text-xs);
  color: var(--text-3);
  line-height: 1;
}

/* CTA button — full width inside the card */
.nt-card-plan .nt-btn {
  width: 100%;
  justify-content: center;
}

/* Responsive: single column on very small screens */
@media (max-width: 480px) {
  .nt-grid--plans {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   13. Ticket multi-step — supportticketsubmit-* + ticketfeedback
   ========================================================================== */

/* --- 13.1. Container estreito --- */
.nt-container--narrow { max-width: 760px; margin-inline: auto; }

/* --- 13.2. Grid de departamentos (stepone) --- */
.nt-dept-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-4);
}

.nt-dept-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card-translucent);
  transition: border-color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.nt-dept-card:hover {
  border-color: var(--accent-border);
  background: var(--card-hover);
  transform: translateY(-2px);
}

.nt-dept-card__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6);
  text-decoration: none;
  color: inherit;
  height: 100%;
}

.nt-dept-card__title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--text-1);
  line-height: var(--lh-tight);
}

.nt-dept-card__desc {
  font-size: var(--text-sm);
  color: var(--text-2);
  line-height: var(--lh-body);
  flex-grow: 1;
}

.nt-dept-card__cta {
  font-size: var(--text-sm);
  color: var(--accent);
  font-weight: 600;
  margin-top: var(--space-2);
  transition: transform var(--duration-fast) var(--ease-out);
}
.nt-dept-card:hover .nt-dept-card__cta { transform: translateX(4px); }

/* --- 13.3. Input file + botão (nt-attach-group) --- */
.nt-attach-group {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.nt-attach-group .nt-input--file { flex: 1; min-width: 0; }

/* --- 13.4. Sugestões KB (kbsuggestions.tpl) --- */
.nt-kb-suggestions__panel {
  padding: var(--space-5);
  background: var(--card);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-6);
}

.nt-kb-suggestions__title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-1);
  margin: 0 0 var(--space-1);
}

.nt-kb-suggestions__lead {
  font-size: var(--text-xs);
  color: var(--text-3);
  margin: 0 0 var(--space-4);
}

.nt-kb-suggestions__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-2);
}

.nt-kb-suggestions__item {
  border-top: 1px solid var(--border);
}
.nt-kb-suggestions__item:first-child { border-top: 0; }

.nt-kb-suggestions__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) 0;
  text-decoration: none;
  color: inherit;
  transition: padding-left var(--duration-fast) var(--ease-out);
}
.nt-kb-suggestions__link:hover { padding-left: var(--space-2); }

.nt-kb-suggestions__article-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-1);
}

.nt-kb-suggestions__excerpt {
  font-size: var(--text-xs);
  color: var(--text-2);
  line-height: var(--lh-body);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- 13.5. Meta grid (ticketfeedback — dl 2 colunas) --- */
.nt-meta-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-6);
  margin: 0 0 var(--space-8);
  padding: var(--space-5);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.nt-meta-grid dt {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  align-self: baseline;
}
.nt-meta-grid dd {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-1);
  margin: 0;
  align-self: baseline;
}

/* --- 13.6. Feedback staff fieldset --- */
.nt-feedback-staff {
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-8);
}
.nt-feedback-staff__legend {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  margin-bottom: var(--space-4);
  padding: 0;
}

/* --- 13.7. Rating scale 1–10 --- */
.nt-rating-scale {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.nt-rating-scale__label {
  font-size: var(--text-xs);
  color: var(--text-3);
  white-space: nowrap;
}
.nt-rating-scale__label--worst { order: -1; }
.nt-rating-scale__label--best  { order: 99; }

.nt-rating-scale__option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nt-rating-scale__option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.nt-rating-scale__option span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-2);
  transition: border-color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
.nt-rating-scale__option:hover span {
  border-color: var(--accent-border);
  color: var(--text-1);
}
.nt-rating-scale__option:has(input:checked) span {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

/* --- 13.8. Link dentro de alert --- */
.nt-alert__link { color: inherit; font-weight: 600; text-decoration: underline; }

/* --- 13.9. Botão pequeno --- */
.nt-btn--sm { padding: var(--space-2) var(--space-3); font-size: var(--text-xs); }

/* ==========================================================================
   14. Ticket detail — viewticket.tpl
   ========================================================================== */

.nt-ticket-header {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--border);
}
.nt-ticket-header__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: flex-start;
  justify-content: space-between;
}

.nt-ticket-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
}
.nt-ticket-meta > div {
  display: grid;
  gap: 2px;
}
.nt-ticket-meta dt {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-3);
}
.nt-ticket-meta dd {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-1);
  margin: 0;
}

.nt-ticket-thread {
  display: grid;
  gap: var(--space-6);
  padding: var(--space-6) 0;
}

.nt-ticket-message {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--accent);
}
.nt-ticket-message--client { border-left-color: var(--accent); }
.nt-ticket-message--admin  { border-left-color: var(--green); }

.nt-ticket-message__header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}
.nt-ticket-message__author {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-1);
}
.nt-ticket-message__date {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--text-3);
}

.nt-ticket-message__body {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-2);
  line-height: var(--lh-body);
}

.nt-ticket-reply {
  padding: var(--space-6) 0;
  border-top: 1px solid var(--border);
}

.nt-ticket-reply-form {
  display: grid;
  gap: var(--space-5);
}

.nt-ticket-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--border);
}

.nt-ticket-closed-notice {
  color: var(--text-3);
  font-size: var(--text-xs);
}

/* Attachment list inside ticket message */
.ticket-attachments {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.ticket-attachments li a {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--accent);
  text-decoration: none;
}
.ticket-attachments li a:hover { text-decoration: underline; }

/* ========================================================================
   Domains (Sprint H Batch H1)
   ======================================================================== */

.nt-domains-form {
  display: grid;
  gap: var(--space-8);
}

.nt-bulk-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-4);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  align-items: center;
}

.nt-bulk-action-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.nt-domains-table thead th {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text-1);
  background: rgba(255, 255, 255, 0.88);
  padding: var(--space-4);
  text-align: left;
}

.nt-domains-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background 200ms ease;
}

.nt-domains-table tbody tr:hover {
  background: rgba(0, 0, 0, 0.02);
}

.nt-col-checkbox {
  width: 48px;
  text-align: center;
}

.nt-col-domain {
  font-weight: 500;
}

.nt-domain-link {
  color: var(--accent);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.nt-domain-link:hover {
  text-decoration: underline;
}

.nt-domain-ssl-icon {
  display: inline-block;
  margin-left: var(--space-1);
}

.nt-date-sort {
  display: none;
}

.nt-domain-expiring {
  margin-left: var(--space-2);
  color: var(--amber, #f59e0b);
  font-weight: bold;
}

.nt-domain-tabs {
  display: flex;
  gap: var(--space-2);
  border-bottom: 2px solid var(--border);
  margin: var(--space-10) 0 var(--space-8);
  flex-wrap: wrap;
}

.nt-domain-tab {
  padding: var(--space-3) var(--space-4);
  border: none;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  font-weight: 500;
  position: relative;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 200ms ease, border-color 200ms ease;
}

.nt-domain-tab:hover {
  color: var(--accent);
}

.nt-domain-tab--active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.nt-domain-tab-panel {
  display: none;
  margin-bottom: var(--space-8);
}

.nt-domain-tab-panel--active {
  display: block;
}

.nt-email-fwd-table {
  width: 100%;
}

.nt-email-fwd-table thead th {
  padding: var(--space-4);
  font-weight: 600;
  background: rgba(255, 255, 255, 0.88);
  text-align: left;
}

.nt-email-fwd-table tbody td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
}

.nt-col-center {
  text-align: center;
  color: var(--text-2);
}

.nt-whois-tabs {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.nt-whois-tabs [role="tab"] {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.84);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  cursor: pointer;
  font-weight: 500;
  transition: all 200ms ease;
}

.nt-whois-tabs [role="tab"].is-active {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
}

.nt-whois-section {
  display: none;
}

.nt-whois-section.is-active {
  display: block;
}

.nt-addon-card {
  padding: var(--space-6);
  border-bottom: 1px solid var(--border);
  display: grid;
  gap: var(--space-6);
}

.nt-addon-card:last-child {
  border-bottom: none;
}

.nt-bulk-checkbox {
  cursor: pointer;
}

.nt-bulk-select-all {
  cursor: pointer;
}

.nt-list-group {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.nt-list-group li {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  color: var(--text-1);
}

.nt-list-group li:last-child {
  border-bottom: none;
}

/* ============================================================
   Sprint H Batch H1 fix — 18 missing classes referenced by domain templates
   Filling CSS coverage gap reported by spec reviewer
   ============================================================ */

/* nt-card BEM elements */
.nt-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-5);
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border);
}

.nt-card__body {
  display: block;
}

.nt-card__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin: var(--space-6) calc(-1 * var(--space-6)) calc(-1 * var(--space-6));
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border);
}

/* Layout wrapper */
.nt-clientarea-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* Flash messages — sistema de notificação inline */
.nt-flash {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-1);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.nt-flash--success {
  border-color: var(--green);
  color: var(--green);
  background: color-mix(in srgb, var(--green) 8%, var(--surface));
}

.nt-flash--error {
  border-color: var(--red);
  color: var(--red);
  background: color-mix(in srgb, var(--red) 8%, var(--surface));
}

/* Button variant */
.nt-btn--success {
  background: var(--green);
  color: var(--surface);
  border-color: var(--green);
}

.nt-btn--success:hover {
  background: color-mix(in srgb, var(--green) 85%, black);
  border-color: color-mix(in srgb, var(--green) 85%, black);
}

/* Domain-specific */
.nt-domain-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4);
  border-bottom: 1px solid var(--border);
  transition: background var(--duration-base) var(--ease-out);
}

.nt-domain-row:hover {
  background: var(--accent-soft);
}

.nt-domain-row:last-child {
  border-bottom: none;
}

.nt-dns-table {
  width: 100%;
  border-collapse: collapse;
}

.nt-dns-table th,
.nt-dns-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.nt-dns-table th {
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

/* Table column classes */
.nt-col-status,
.nt-col-duedate,
.nt-col-regdate,
.nt-col-autorenew {
  white-space: nowrap;
  text-align: right;
  font-size: var(--text-sm);
  color: var(--text-2);
}

.nt-col-status {
  text-align: left;
}

.nt-col-autorenew {
  font-family: var(--font-display);
}

/* Modal system */
.nt-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
}

.nt-modal[open],
.nt-modal.is-open {
  display: flex;
  align-items: center;
  justify-content: center;
}

.nt-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.nt-modal__content {
  position: relative;
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  max-width: 500px;
  width: 90%;
  box-shadow: var(--shadow-md);
  z-index: 1;
}

.nt-modal__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  background: transparent;
  border: 0;
  font-size: var(--text-2xl);
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  padding: var(--space-1);
}

.nt-modal__close:hover {
  color: var(--text-1);
}

/* ──────────────────────────────────────────────────────────────
   SECURITY HUB (clientareasecurity.tpl) — Sprint H Batch 2
   ────────────────────────────────────────────────────────────── */

.nt-security-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
  margin: var(--space-8) 0;
}

.nt-security-card {
  transition: all var(--duration-base) var(--ease-out);
  border: 2px solid var(--border);
}

.nt-security-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}

.nt-security-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--accent-soft);
  border-radius: var(--radius-md);
  color: var(--accent);
  margin-bottom: var(--space-4);
}

.nt-security-card__title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-1);
  margin: 0;
}

.nt-security-card__desc {
  font-size: var(--text-sm);
  color: var(--text-2);
  margin: var(--space-3) 0;
  line-height: 1.5;
}

/* ──────────────────────────────────────────────────────────────
   EMAILS LIST (clientareaemails.tpl) — Sprint H Batch 2
   ────────────────────────────────────────────────────────────── */

.nt-emails-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-8) 0;
}

.nt-email-row {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  transition: all var(--duration-base) var(--ease-out);
}

.nt-email-row:hover {
  border-color: var(--accent);
  background: var(--card);
}

@media (max-width: 640px) {
  .nt-email-row {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
}

.nt-email-row__date {
  font-size: var(--text-sm);
}

.nt-email-row__subject {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.nt-email-row__link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--duration-base) var(--ease-out);
}

.nt-email-row__link:hover {
  color: var(--text-1);
  text-decoration: underline;
}

.nt-email-row__attachment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--amber);
  flex-shrink: 0;
}

.nt-emails-empty {
  text-align: center;
  padding: var(--space-12) var(--space-6);
}

.nt-text-muted {
  color: var(--text-muted);
}

/* ──────────────────────────────────────────────────────────────
   EMAIL VIEW (viewemail.tpl) — Sprint H Batch 2
   ────────────────────────────────────────────────────────────── */

.nt-email-view__header {
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--border);
}

.nt-email-view__title {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text-1);
  margin: 0 0 var(--space-4) 0;
  line-height: 1.3;
  word-break: break-word;
}

.nt-email-view__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
  margin: var(--space-4) 0;
  font-size: var(--text-sm);
}

.nt-email-view__meta > div {
  display: flex;
  flex-direction: column;
}

.nt-email-view__meta dt {
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: var(--space-1);
  text-transform: uppercase;
  font-size: var(--text-xs);
  letter-spacing: 0.5px;
}

.nt-email-view__meta dd {
  color: var(--text-1);
  margin: 0;
  word-break: break-word;
}

.nt-email-view__attachments {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-bright);
}

.nt-email-view__attachments p {
  margin: 0 0 var(--space-2) 0;
}

.nt-email-view__body {
  margin: var(--space-8) 0;
  padding: var(--space-6);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  min-height: 200px;
}

.nt-email-view__body .nt-prose {
  margin: 0;
}

.nt-prose {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text-1);
  word-break: break-word;
  overflow-wrap: break-word;
}

.nt-prose h1,
.nt-prose h2,
.nt-prose h3 {
  margin: var(--space-4) 0 var(--space-2) 0;
  color: var(--text-1);
}

.nt-prose h1 { font-size: var(--text-2xl); font-weight: 700; }
.nt-prose h2 { font-size: var(--text-xl); font-weight: 700; }
.nt-prose h3 { font-size: var(--text-lg); font-weight: 600; }

.nt-prose p {
  margin: var(--space-2) 0;
}

.nt-prose a {
  color: var(--accent);
  text-decoration: none;
}

.nt-prose a:hover {
  text-decoration: underline;
}

.nt-prose ul,
.nt-prose ol {
  margin: var(--space-2) 0 var(--space-2) var(--space-4);
  padding: 0;
}

.nt-prose li {
  margin-bottom: var(--space-1);
}

.nt-prose blockquote {
  margin: var(--space-4) 0;
  padding-left: var(--space-4);
  border-left: 3px solid var(--accent-border);
  color: var(--text-2);
}

.nt-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-4) 0;
}

.nt-prose table th,
.nt-prose table td {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  text-align: left;
}

.nt-prose table th {
  background: var(--surface);
  font-weight: 600;
}

.nt-prose code {
  background: var(--surface);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.9em;
  color: var(--text-1);
}

.nt-prose pre {
  background: var(--surface);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin: var(--space-3) 0;
}

.nt-prose pre code {
  background: transparent;
  padding: 0;
  color: inherit;
}

.nt-email-view__actions {
  margin-top: var(--space-8);
  display: flex;
  gap: var(--space-3);
}

.nt-email-row__actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
}

.nt-label-mono--muted {
  opacity: 0.7;
}

/* ============================================================
   Sprint H Batch H2 fix — code reviewer feedback (CSS brace + a11y + inline)
   ============================================================ */

.nt-email-body-frame {
  width: 100%;
  min-height: 400px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--surface);
}

.nt-email-view__attachments-list {
  list-style: none;
  padding: 0;
  margin: var(--space-2) 0 0 0;
}

.nt-email-view__attachments-list li {
  padding: var(--space-1) 0;
}

/* Override max-width in email view (was inline 720px) */
.nt-section > .nt-container--narrow {
  max-width: 720px;
}

.nt-emails-empty .nt-card__body {
  text-align: center;
  padding: var(--space-12) var(--space-6);
}

/* ============================================================
   Sprint H Batch H3 — invoice-payment.tpl + invoicepdf.tpl + viewinvoice.tpl REWRITE
   Classes for payment gateway selector, invoice display, totals breakdown
   ============================================================ */

/* invoice-payment.tpl — Payment gateway selector + total */
.nt-invoice-payment {
  display: grid;
  gap: var(--space-6);
}

.nt-invoice-payment__header {
  display: grid;
  gap: var(--space-2);
}

.nt-payment-gateway-selector {
  display: grid;
  gap: var(--space-3);
}

.nt-payment-gateway-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-out);
}

.nt-payment-gateway-option:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.nt-payment-gateway-option__input {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.nt-payment-gateway-option__label {
  flex: 1;
  color: var(--text-1);
  font-weight: 500;
  cursor: pointer;
}

.nt-payment-gateway-option__input:checked ~ .nt-payment-gateway-option__label {
  color: var(--accent);
}

.nt-payment-gateway-option__input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.nt-invoice-payment__total {
  display: grid;
  gap: var(--space-1);
}

.nt-payment-remote-input {
  margin: var(--space-4) 0;
}

.nt-payment-remote-input__frame {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.nt-payment-actions__text,
.nt-payment-actions__wait {
  display: inline;
}

.nt-payment-actions__wait.w-hidden {
  display: none !important;
}

/* ==========================================================================
   viewinvoice.tpl — Hero card (3-col, nt-service-item-inspired)
   ========================================================================== */
.nt-invoice-hero {
  display: grid;
  grid-template-columns: minmax(240px, 1.15fr) minmax(280px, 1.45fr) auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  min-height: 160px;
  margin-bottom: var(--space-6);
  transition: border-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}
.nt-invoice-hero:hover {
  border-color: var(--accent-border);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.nt-invoice-hero__info {
  display: grid;
  align-content: center;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-6);
  border-right: 1px solid var(--border);
  min-width: 0;
}
.nt-invoice-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
}
.nt-invoice-hero__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-1);
  margin: 0;
  word-break: break-word;
  line-height: 1.05;
  display: inline-block;
  padding-bottom: var(--space-2);
  border-bottom: 3px solid var(--accent);
}
.nt-invoice-hero__sub {
  font-size: var(--text-xs);
  color: var(--text-2);
  margin: 0;
}
.nt-invoice-hero__breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-2xs);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  margin-top: var(--space-1);
  flex-wrap: wrap;
}
.nt-invoice-hero__breadcrumb a {
  color: var(--text-3);
  text-decoration: none;
  transition: color var(--duration-base) var(--ease-out);
}
.nt-invoice-hero__breadcrumb a:hover { color: var(--accent); }
.nt-invoice-hero__breadcrumb [aria-hidden] { color: var(--border); }
.nt-invoice-hero__details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  align-content: center;
  padding: var(--space-5) var(--space-6);
  margin: 0;
}
.nt-invoice-hero__row {
  display: grid;
  align-content: start;
  gap: var(--space-1);
  padding: var(--space-3);
  background: var(--void);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  min-width: 0;
}
.nt-invoice-hero__row dt {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  margin: 0;
}
.nt-invoice-hero__row dd {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--text-1);
  margin: 0;
  word-break: break-word;
}
.nt-invoice-hero__amount {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-1);
}
.nt-invoice-hero__row dd .nt-badge { font-size: var(--text-xs); }

/* Modifier: row do Total destacado com accent NTWeb */
.nt-invoice-hero__row--total {
  background: color-mix(in srgb, var(--accent) 8%, var(--card));
  border: 1px solid var(--accent-border);
  border-left-width: 4px;
}
.nt-invoice-hero__row--total dt {
  color: var(--accent) !important;
}
.nt-invoice-hero__row--total .nt-invoice-hero__amount {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--accent);
  letter-spacing: 0.02em;
}
.nt-invoice-hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  justify-content: center;
  padding: var(--space-5) var(--space-6);
  border-left: 1px solid var(--border);
  min-width: 180px;
}
.nt-invoice-hero__actions .nt-btn { width: 100%; white-space: nowrap; }

/* Sections after hero (cards) */
.nt-invoice-section { margin-top: var(--space-5); }
.nt-invoice-section .nt-card__head {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.nt-invoice-section .nt-card__title {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-3);
  margin: 0;
}
.nt-card__body--flush { padding: 0; }
.nt-card__body--flush > .nt-table-wrap > .nt-table { border: 0; border-radius: 0; }
.nt-table__total > th,
.nt-table__total > td {
  font-weight: 700;
  font-size: var(--text-md);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

/* Items table polish — header preto NTWeb + zebra rows + numeros tabulares */
.nt-invoice-section .nt-table thead th {
  background: var(--text-1);
  color: var(--card);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}
.nt-invoice-section .nt-table tbody tr:nth-child(even) td {
  background: var(--void);
}
.nt-invoice-section .nt-table td:last-child,
.nt-invoice-section .nt-table th:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.nt-invoice-section .nt-table tfoot td,
.nt-invoice-section .nt-table tfoot th {
  font-variant-numeric: tabular-nums;
}

/* Status aliases for invoice-specific states (Paid/Unpaid/Cancelled already in pages.css ~1010) */
.nt-status--overdue {
  background: color-mix(in srgb, var(--red) 12%, transparent);
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 25%, transparent);
}
.nt-status--refunded {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 25%, transparent);
}
.nt-status--collections {
  background: color-mix(in srgb, var(--red) 12%, transparent);
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 25%, transparent);
}
.nt-status--draft {
  background: color-mix(in srgb, var(--text-3) 10%, transparent);
  color: var(--text-3);
  border-color: color-mix(in srgb, var(--text-3) 25%, transparent);
}

/* Mobile collapse */
@media (max-width: 1024px) {
  .nt-invoice-hero { grid-template-columns: 1fr; }
  .nt-invoice-hero__info {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .nt-invoice-hero__actions {
    border-left: none;
    border-top: 1px solid var(--border);
    flex-direction: row;
    flex-wrap: wrap;
    min-width: 0;
  }
  .nt-invoice-hero__actions .nt-btn { flex: 1 1 auto; min-width: 120px; }
}
@media (max-width: 560px) {
  .nt-invoice-hero__details { grid-template-columns: 1fr; }
  .nt-invoice-hero__info,
  .nt-invoice-hero__details,
  .nt-invoice-hero__actions { padding: var(--space-4); }
  .nt-invoice-hero__title { font-size: var(--text-xl); }
}

/* viewinvoice.tpl — Invoice header + timeline + items + totals (legacy classes — kept for safety) */
.nt-invoice-page__breadcrumb {
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.nt-invoice-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-6);
  align-items: end;
  margin-bottom: var(--space-10);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--border);
}

.nt-invoice-header__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: var(--space-2) 0 0;
  color: var(--text-1);
}

.nt-invoice-header__meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: var(--space-2) 0 0;
}

.nt-invoice-header__total {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 700;
  line-height: 1;
  color: var(--text-1);
  margin-top: var(--space-1);
}

.nt-invoice-unpaid {
  margin-bottom: var(--space-8);
}

.nt-invoice-timeline-section {
  margin-bottom: var(--space-10);
}

.nt-invoice-timeline-section__title {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-3);
  margin: 0 0 var(--space-4);
}

.nt-invoice-items-section {
  margin-bottom: var(--space-8);
}

.nt-invoice-items-section__title {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-3);
  margin: 0 0 var(--space-4);
}

.nt-invoice-notes {
  margin-bottom: var(--space-8);
}

.nt-invoice-credit-section {
  margin-bottom: var(--space-8);
}

.nt-invoice-credit-section .nt-card__header {
  background: rgba(40, 167, 69, 0.08);
  border-bottom: 1px solid var(--green);
}

.nt-invoice-credit-section .nt-card__title {
  color: var(--green);
}

.nt-invoice-credit-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-3);
  align-items: end;
}

@media (max-width: 640px) {
  .nt-invoice-credit-form {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .nt-invoice-credit-form button {
    width: 100%;
  }
}

.nt-invoice-transactions-section {
  margin-bottom: var(--space-8);
}

.nt-invoice-transactions-section__title {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-3);
  margin: 0 0 var(--space-4);
}

.nt-invoice-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Ensure invoice table styling consistency */
.nt-table {
  width: 100%;
  border-collapse: collapse;
}

.nt-table thead {
  background: rgba(0, 0, 0, 0.02);
  border-bottom: 1px solid var(--border);
}

.nt-table thead th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-weight: 600;
  color: var(--text-2);
  font-size: var(--text-sm);
}

.nt-table tbody td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  color: var(--text-1);
}

.nt-table tbody tr:last-child td {
  border-bottom: none;
}

.nt-table th.num,
.nt-table td.num {
  text-align: right;
}

.nt-table td.mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.nt-table tfoot tr {
  background: rgba(0, 0, 0, 0.02);
  border-top: 1px solid var(--border);
}

.nt-table tfoot td {
  padding: var(--space-4) var(--space-4);
  font-weight: 500;
  color: var(--text-2);
}

/* Card accent variant */
.nt-card--accent {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.02);
}

.nt-card--accent .nt-card__header {
  border-bottom-color: var(--accent);
}

/* Form input styling */
.nt-form-input {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-1);
  font-family: inherit;
  font-size: var(--text-base);
  transition: border-color var(--duration-base) var(--ease-out);
}

.nt-form-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
}

.nt-form-input::placeholder {
  color: var(--text-3);
}

/* Prose variants */
.nt-prose--muted {
  color: var(--text-3);
}

/* Container max-width inline helper (legacy, use .nt-container--narrow) */
.nt-max-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* Margin utilities */
.nt-m-bottom-6 {
  margin-bottom: var(--space-6);
}

.nt-m-bottom-8 {
  margin-bottom: var(--space-8);
}

.nt-mt-6 {
  margin-top: var(--space-6);
}

.nt-m-bottom-4 {
  margin-bottom: var(--space-4);
}

/* ============================================================
   Sprint H Batch H4 finisher — 4 missing classes
   ============================================================ */

.nt-flash--warning {
  border-color: var(--amber);
  color: var(--amber);
  background: color-mix(in srgb, var(--amber) 8%, var(--surface));
}

.nt-form-help {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-2);
  line-height: 1.5;
}

.nt-label-mono--danger {
  color: var(--red);
}

/* End Sprint H Batch H4 */

.nt-mt-4 {
  margin-top: var(--space-4);
}

/* Utility classes */
.w-hidden {
  display: none !important;
}

/* ========================================================================== */
/* Sprint H Batch H4 — KB + announcement + addfunds + cancel */
/* ========================================================================== */

/* Announcement single view */
.nt-announcement-single {
  margin: 0;
}

.nt-announcement-single__header {
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--border);
}

.nt-announcement-single__title {
  margin: 0 0 var(--space-3) 0;
  font-size: var(--text-3xl);
  font-weight: 600;
  color: var(--text-1);
  line-height: 1.2;
}

.nt-announcement-single__meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.nt-announcement-single__date {
  font-size: var(--text-sm);
  color: var(--text-2);
}

.nt-announcement-single__body {
  margin-bottom: var(--space-8);
  font-size: var(--text-base);
  line-height: 1.6;
}

.nt-announcement-actions {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}

.nt-announcement-actions--bottom {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}

.nt-announcement-social-fb {
  margin: var(--space-8) 0;
  padding: var(--space-6) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.nt-announcement-social-fb__recommend,
.nt-announcement-social-fb__comments {
  margin: var(--space-4) 0;
}

/* Knowledge base category grid */
.nt-kb-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}

.nt-kb-category-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  transition: all var(--duration-base) var(--ease-out);
}

.nt-kb-category-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}

.nt-kb-category-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.nt-kb-category-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.nt-kb-category-card__title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-1);
  line-height: 1.3;
}

.nt-kb-category-card__description {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-2);
  line-height: 1.5;
}

.nt-kb-category-card__edit {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-2xs);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out);
}

.nt-kb-category-card:hover .nt-kb-category-card__edit {
  opacity: 1;
}

/* Knowledge base article list */
.nt-kb-articles-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--border);
}

.nt-kb-article-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4);
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--duration-base) var(--ease-out);
}

.nt-kb-article-item:last-child {
  border-bottom: none;
}

.nt-kb-article-item:hover {
  background-color: rgba(var(--accent-rgb), 0.03);
}

.nt-kb-article-item__content {
  flex: 1;
  min-width: 0;
}

.nt-kb-article-item__title {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-1);
  line-height: 1.3;
}

.nt-kb-article-item__excerpt {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-2);
  line-height: 1.4;
}

.nt-kb-article-item__edit {
  align-self: center;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-2xs);
  white-space: nowrap;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out);
}

.nt-kb-article-item:hover .nt-kb-article-item__edit {
  opacity: 1;
}

/* Knowledge base article single */
.nt-kb-article {
  margin: 0;
}

.nt-kb-article__header {
  margin-bottom: var(--space-6);
}

.nt-kb-article__title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

.nt-kb-article__title {
  margin: 0;
  font-size: var(--text-3xl);
  font-weight: 600;
  color: var(--text-1);
  line-height: 1.2;
}

.nt-kb-article__meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  font-size: var(--text-sm);
  color: var(--text-2);
}

.nt-kb-article__tags {
  display: inline-flex;
  gap: var(--space-2);
}

.nt-kb-article__useful {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.nt-kb-article__content {
  margin-bottom: var(--space-8);
}

.nt-kb-article__rating {
  margin-bottom: var(--space-8);
}

.nt-kb-article__rating-form {
  display: flex;
  gap: var(--space-4);
}

.nt-kb-article__rating-buttons {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.nt-kb-article__related {
  margin-bottom: var(--space-8);
}

.nt-kb-search {
  margin-bottom: var(--space-6);
}

.nt-input-group {
  display: flex;
  gap: var(--space-2);
}

.nt-input-group .nt-input {
  flex: 1;
}

/* Add funds form */
.nt-addfunds-form {
  margin-bottom: var(--space-8);
}

.nt-addfunds-info {
  margin-bottom: var(--space-6);
}

.nt-addfunds-amount-input {
  position: relative;
}

.nt-addfunds-amount-input .nt-input {
  font-size: var(--text-lg);
  font-weight: 500;
}

/* Cancel request form */
.nt-cancel-form {
  margin-bottom: var(--space-8);
}

.nt-cancel-warning {
  border-color: var(--amber);
  background: rgba(#fbbf24, 0.05);
}

.nt-cancel-warning .nt-card__header {
  border-bottom-color: var(--amber);
  color: var(--amber);
}

.nt-cancel-type-selector {
  margin-bottom: var(--space-6);
}

/* Form check (checkbox/radio) */
.nt-form-check {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  user-select: none;
  font-size: var(--text-base);
  color: var(--text-1);
}

.nt-form-check__input {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: var(--accent);
}

.nt-form-check__label {
  display: inline;
  cursor: pointer;
}

/* Table compact variant */
.nt-table--compact {
  margin: 0;
}

.nt-table--compact th,
.nt-table--compact td {
  padding: var(--space-2) var(--space-3);
}

.nt-table__label {
  text-align: left;
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
}

.nt-table__value {
  text-align: right;
  color: var(--text-1);
}

/* Select element styling */
.nt-select {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-1);
  font-family: inherit;
  font-size: var(--text-base);
  transition: border-color var(--duration-base) var(--ease-out);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M1 4l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  padding-right: var(--space-10);
}

.nt-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
}

.nt-select:disabled {
  background-color: var(--border);
  color: var(--text-3);
  cursor: not-allowed;
}

/* Textarea styling */
.nt-textarea {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-1);
  font-family: inherit;
  font-size: var(--text-base);
  line-height: 1.5;
  transition: border-color var(--duration-base) var(--ease-out);
  resize: vertical;
}

.nt-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
}

.nt-textarea::placeholder {
  color: var(--text-3);
}

/* Button size variants */
.nt-btn--sm {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
}

/* Flash / Alert variants */
.nt-flash__list {
  margin: 0;
  padding-left: var(--space-5);
}

.nt-flash__list li {
  margin: var(--space-2) 0;
}

/* Section header styling */
.nt-section-header {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
}

.nt-section-header__title {
  margin: 0;
  font-size: var(--text-3xl);
  font-weight: 600;
  color: var(--text-1);
  line-height: 1.2;
}

/* Default button */
.nt-btn--default {
  background: var(--surface);
  color: var(--text-1);
  border: 1px solid var(--border);
}

.nt-btn--default:hover {
  background: var(--border);
  border-color: var(--text-2);
}

/* ========================================================================== */
/* QUOTES — List, Single View, PDF ========================================== */
/* ========================================================================== */

/* Quotes List (clientareaquotes.tpl) */
.nt-quotes-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.nt-quote-row {
  display: grid;
  grid-template-columns: 60px 1fr 150px 150px 100px 80px;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
}

.nt-quote-row:hover {
  background: var(--bg);
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.nt-quote-row__link {
  display: contents;
}

.nt-quote-row__id {
  color: var(--text-1);
  font-weight: 600;
  font-family: var(--family-mono);
  font-size: var(--text-sm);
}

.nt-quote-row__subject {
  color: var(--text-1);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nt-quote-row__date,
.nt-quote-row__valid {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--text-sm);
}

.nt-quote-row__date .nt-label-mono,
.nt-quote-row__valid .nt-label-mono {
  color: var(--text-2);
  font-size: var(--text-xs);
}

.nt-quote-row__date span:last-child,
.nt-quote-row__valid span:last-child {
  color: var(--text-1);
}

.nt-quote-row__download {
  display: flex;
  justify-content: flex-end;
}

/* Quote Single View (viewquote.tpl) */
.nt-quote-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-4);
  align-items: start;
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}

.nt-quote-header__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.nt-quote-header__num {
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--text-1);
  margin: 0;
}

.nt-quote-header__subject {
  color: var(--text-2);
  font-size: var(--text-lg);
  margin: 0;
}

.nt-quote-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.nt-quote-meta-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.nt-quote-meta-item .nt-label-mono--small {
  color: var(--text-2);
  font-size: var(--text-xs);
  font-weight: 500;
}

.nt-quote-meta-item p {
  color: var(--text-1);
  font-weight: 500;
  margin: 0;
}

/* Quote items table */
.nt-quote-items-table {
  display: grid;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.nt-quote-items-table__header {
  display: grid;
  grid-template-columns: 1fr 60px 100px 100px 100px;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border-bottom: 2px solid var(--border);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text-1);
}

.nt-quote-items-table__row {
  display: grid;
  grid-template-columns: 1fr 60px 100px 100px 100px;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  align-items: center;
  font-size: var(--text-sm);
  color: var(--text-1);
}

.nt-quote-items-table__row:last-child {
  border-bottom: none;
}

.nt-col--quantity,
.nt-col--unitprice,
.nt-col--discount,
.nt-col--total {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Quote totals table */
.nt-quote-totals-table {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.nt-quote-totals-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-4);
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  color: var(--text-1);
  border-bottom: 1px solid var(--border);
}

.nt-quote-totals-row:last-child {
  border-bottom: none;
}

.nt-quote-totals-row--highlight {
  padding: var(--space-3) 0;
  font-size: var(--text-lg);
  font-weight: 600;
  border-top: 2px solid var(--border);
  border-bottom: none;
  color: var(--text-1);
}

.nt-quote-totals-value {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* Quote customer/admin notes */
.nt-quote-customer-notes,
.nt-quote-admin-notes {
  margin-bottom: var(--space-3);
}

.nt-quote-customer-notes:last-child,
.nt-quote-admin-notes:last-child {
  margin-bottom: 0;
}

.nt-quote-customer-notes h4,
.nt-quote-admin-notes h4 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-2);
}

.nt-quote-customer-notes p,
.nt-quote-admin-notes p {
  margin: 0;
  color: var(--text-1);
  line-height: 1.6;
}

.nt-quote-proposal {
  margin-bottom: var(--space-4);
  border-left: 4px solid var(--amber);
}

/* Quote actions */
.nt-quote-actions {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.nt-quote-actions__primary {
  display: flex;
  gap: var(--space-2);
}

.nt-quote-actions__secondary {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
}

.nt-quote-actions__download {
  display: contents;
}

.nt-quote-actions__download form {
  display: contents;
}

/* Button size variants */
.nt-btn--small {
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  height: auto;
}

/* Table column helpers */
.nt-col--description {
  flex: 1;
}

.nt-col--quantity,
.nt-col--unitprice,
.nt-col--discount,
.nt-col--total {
  flex-shrink: 0;
}

/* Modal structure */
.nt-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1050;
  padding: var(--space-4);
}

.nt-modal.fade {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.nt-modal.show {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
}

.nt-modal__dialog {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.nt-modal__content {
  display: flex;
  flex-direction: column;
}

.nt-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  border-bottom: 1px solid var(--border);
}

.nt-modal__title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-1);
  margin: 0;
}

.nt-modal__close {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--text-2);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
}

.nt-modal__close:hover {
  color: var(--text-1);
}

.nt-modal__close svg {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}

.nt-modal__body {
  padding: var(--space-4);
  flex: 1;
}

.nt-modal__body p {
  margin-bottom: var(--space-3);
}

.nt-modal__body p:last-child {
  margin-bottom: 0;
}

.nt-modal__footer {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  padding: var(--space-4);
  border-top: 1px solid var(--border);
  background: var(--bg);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .nt-kb-cat-grid {
    grid-template-columns: 1fr;
  }

  .nt-announcement-single__title {
    font-size: var(--text-2xl);
  }

  .nt-kb-article__title {
    font-size: var(--text-2xl);
  }

  .nt-kb-article__title-row {
    flex-direction: column;
  }

  .nt-input-group {
    flex-direction: column;
  }

  .nt-form-actions {
    flex-direction: column;
  }

  .nt-form-actions .nt-btn {
    width: 100%;
  }

  .nt-kb-article-item {
    padding: var(--space-3);
  }

  .nt-kb-article-item__edit {
    opacity: 1;
  }
}

/* Sprint H Batch H5 — productdetails WHMCS 8 FLAT rewrite + productusagebilling sub-tab */

/* Flash message content wrapper */
.nt-flash__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.nt-flash__content p {
  margin: 0;
}

/* Badge variants (success, warning, danger, outline) */
.nt-badge--success {
  background: rgba(var(--green-rgb, 34, 197, 94), 0.1);
  color: var(--green, #22c55e);
  border-color: var(--green, #22c55e);
}

.nt-badge--warning {
  background: rgba(var(--amber-rgb, 251, 191, 36), 0.1);
  color: var(--amber, #fbbf24);
  border-color: var(--amber, #fbbf24);
}

.nt-badge--danger {
  background: rgba(var(--red-rgb, 239, 68, 68), 0.1);
  color: var(--red, #ef4444);
  border-color: var(--red, #ef4444);
}

.nt-badge--outline {
  background: transparent;
  color: var(--text-2);
  border-color: var(--border);
}

/* Product page wrapper */
.nt-product-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* Product header: name, group, status badge */
.nt-product-header {
  padding: var(--space-6);
  border-bottom: 1px solid var(--border);
}

.nt-product-header__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.nt-product-header__title {
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--text-1);
  margin: 0;
}

.nt-product-header__group {
  font-size: var(--text-sm);
  color: var(--text-2);
  margin: 0;
}

.nt-product-header__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.nt-product-status-badge {
  font-weight: 500;
}

/* Product overview grid */
.nt-product-overview {
  margin-bottom: var(--space-6);
}

.nt-product-overview__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-6);
}

.nt-product-overview__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.nt-product-overview__label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-2);
}

.nt-product-overview__label--warning {
  color: var(--amber);
}

.nt-product-overview__value {
  font-size: var(--text-base);
  color: var(--text-1);
}

/* Product action buttons */
.nt-product-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: var(--space-6) 0;
}

.nt-product-actions .nt-btn {
  flex: 0 1 auto;
}

/* Product tabs navigation */
.nt-product-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  gap: 0;
  margin: var(--space-6) 0 0 0;
}

.nt-product-tab {
  flex: 0 1 auto;
  padding: var(--space-4) var(--space-5);
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--text-2);
  font-size: var(--text-base);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-out);
  position: relative;
  top: 1px;
}

.nt-product-tab:hover {
  color: var(--text-1);
  background: rgba(var(--accent-rgb), 0.05);
}

.nt-product-tab--active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Product tab content */
.nt-product-tabs-content {
  margin-top: var(--space-6);
}

.nt-product-tab-content {
  display: none;
}

.nt-product-tab-content--active {
  display: block;
}

/* Configurable options & custom fields tables */
.nt-product-configoptions-table,
.nt-product-customfields-table {
  width: 100%;
}

/* Product addons */
.nt-product-addons {
  margin-top: var(--space-8);
}

.nt-product-addons__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-6);
}

.nt-product-addon-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.nt-product-addon-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.nt-product-addon-card__title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-1);
  margin: 0;
  flex: 1;
}

.nt-product-addon-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.nt-product-addon-card__footer {
  border-top: 1px solid var(--border);
  padding-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Product downloads */
.nt-product-downloads {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-6);
}

.nt-product-download-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: var(--surface);
}

.nt-product-download-card__title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-1);
  margin: 0 0 var(--space-2) 0;
}

.nt-product-download-card__desc {
  font-size: var(--text-sm);
  color: var(--text-2);
  margin: 0 0 var(--space-4) 0;
}

/* Product module client area */
.nt-product-moduleclientarea {
  margin: var(--space-6) 0;
}

.nt-product-modulemenu {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* Product notes */
.nt-product-notes {
  margin-top: var(--space-8);
}

/* Product usage & billing (sub-tab) */
.nt-product-usage {
  margin: var(--space-6) 0;
}

.nt-product-usage__table-wrapper {
  overflow-x: auto;
  margin: var(--space-6) 0;
}

.nt-product-usage__table {
  width: 100%;
  border-collapse: collapse;
}

.nt-product-usage__col-metric {
  text-align: left;
  width: 30%;
}

.nt-product-usage__col-usage {
  text-align: center;
  width: 20%;
}

.nt-product-usage__col-pricing {
  text-align: center;
  width: 30%;
}

.nt-product-usage__col-updated {
  text-align: right;
  width: 20%;
}

.nt-product-usage__row {
  border-bottom: 1px solid var(--border);
}

.nt-product-usage__row:last-child {
  border-bottom: none;
}

.nt-product-usage__cell {
  padding: var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-1);
}

.nt-product-usage__cell--value {
  text-align: center;
  font-weight: 500;
}

.nt-product-usage__cell--muted {
  color: var(--text-2);
}

.nt-product-usage__metric-name {
  display: block;
  font-weight: 500;
  color: var(--text-1);
}

.nt-product-usage__pricing-modal {
  margin-top: var(--space-2);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .nt-product-header {
    padding: var(--space-4);
  }

  .nt-product-header__title {
    font-size: var(--text-2xl);
  }

  .nt-product-overview__grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .nt-product-tabs {
    flex-wrap: wrap;
  }

  .nt-product-tab {
    flex: 1 1 auto;
    padding: var(--space-3) var(--space-2);
    font-size: var(--text-sm);
  }

  .nt-product-addons__list {
    grid-template-columns: 1fr;
  }

  .nt-product-downloads {
    grid-template-columns: 1fr;
  }

  .nt-product-actions {
    flex-direction: column;
  }

  .nt-product-actions .nt-btn {
    width: 100%;
  }

  .nt-product-usage__col-metric,
  .nt-product-usage__col-usage,
  .nt-product-usage__col-pricing,
  .nt-product-usage__col-updated {
    width: auto;
  }

  /* Quotes list responsive */
  .nt-quotes-list {
    gap: var(--space-2);
  }

  .nt-quote-row {
    grid-template-columns: 1fr;
  }

  .nt-quote-row__id,
  .nt-quote-row__subject,
  .nt-quote-row__date,
  .nt-quote-row__valid {
    display: none;
  }

  .nt-quote-row__link {
    flex-direction: column;
  }

  .nt-quote-items-table {
    display: flex;
    flex-direction: column;
  }

  .nt-quote-items-table__header {
    display: none;
  }

  .nt-quote-items-table__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    padding: var(--space-2) 0;
  }

  .nt-quote-meta-grid {
    grid-template-columns: 1fr;
  }

  .nt-quote-totals-table {
    max-width: 100%;
  }

  .nt-quote-actions {
    flex-direction: column;
  }

  .nt-quote-actions__primary,
  .nt-quote-actions__secondary {
    width: 100%;
  }

  .nt-quote-actions__secondary {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
}

/* Sprint H Batch H7 — upgrades + affiliates */

/* Containers */
.nt-upgrade-container,
.nt-affiliates-container,
.nt-affiliates-signup-container {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: var(--space-6);
  padding: var(--space-6);
}

.nt-page-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Mobile (<1024px): collapse 1fr + reorder main first / sidebar bottom + reset sticky.
   Mesmo padrão de .nt-clientarea-layout (gotcha 17 do CLAUDE.md). */
@media (max-width: 1024px) {
  .nt-upgrade-container,
  .nt-affiliates-container,
  .nt-affiliates-signup-container {
    grid-template-columns: 1fr;
  }
  .nt-upgrade-container > .nt-page-content,
  .nt-affiliates-container > .nt-page-content,
  .nt-affiliates-signup-container > .nt-page-content { order: 1; }
  .nt-upgrade-container > .nt-sidebar,
  .nt-affiliates-container > .nt-sidebar,
  .nt-affiliates-signup-container > .nt-sidebar { order: 2; }
  /* Reset sticky — selector composto vence base de components.css (specificity 0,2,0). */
  .nt-upgrade-container > .nt-sidebar,
  .nt-affiliates-container > .nt-sidebar,
  .nt-affiliates-signup-container > .nt-sidebar {
    position: static; top: auto; max-height: none; overflow-y: visible;
  }
}

/* Upgrade stepper */
.nt-upgrade-stepper {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  position: relative;
}

.nt-upgrade-stepper::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--border);
  z-index: -1;
  transform: translateY(-50%);
}

.nt-upgrade-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  position: relative;
  z-index: 1;
}

.nt-upgrade-step__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--border);
  color: var(--text-2);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
}

.nt-upgrade-step--active .nt-upgrade-step__number {
  background: var(--accent);
  color: white;
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.1);
}

.nt-upgrade-step--complete .nt-upgrade-step__number {
  background: var(--green);
  color: white;
}

.nt-upgrade-step__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-2);
}

.nt-upgrade-step--active .nt-upgrade-step__label {
  color: var(--accent);
}

.nt-upgrade-step--complete .nt-upgrade-step__label {
  color: var(--green);
}

/* Upgrade plans grid */
.nt-upgrade-plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
  margin: var(--space-4) 0;
}

.nt-upgrade-plan-card {
  display: flex;
  flex-direction: column;
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all 200ms ease;
}

.nt-upgrade-plan-card:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.nt-upgrade-plan-card--current {
  border-color: var(--green);
  background: rgba(var(--green-rgb), 0.02);
}

.nt-upgrade-plan-card--selected {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.02);
}

.nt-upgrade-plan-card__header {
  padding: var(--space-4);
  border-bottom: 1px solid var(--border);
}

.nt-upgrade-plan-card__name {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  margin: 0 0 var(--space-2) 0;
}

.nt-upgrade-plan-card__body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}

.nt-upgrade-plan-card__price {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--accent);
  margin: 0;
}

.nt-upgrade-plan-card__features {
  list-style: none;
  padding: 0;
  margin: 0;
  gap: var(--space-2);
  display: flex;
  flex-direction: column;
}

/* Upgrade summary table */
.nt-upgrade-summary-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-4) 0;
}

.nt-upgrade-summary-table__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
  align-items: center;
}

.nt-upgrade-summary-table__label {
  font-weight: var(--weight-medium);
}

.nt-upgrade-summary-table__current,
.nt-upgrade-summary-table__new {
  font-size: var(--text-sm);
}

.nt-upgrade-summary-table__total-row,
.nt-upgrade-summary-table__discount-row,
.nt-upgrade-summary-table__tax-row {
  background: var(--surface);
  font-weight: var(--weight-medium);
}

.nt-upgrade-summary-table__grand-total-row {
  background: var(--surface);
  border-top: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
}

.nt-upgrade-prorata-row {
  padding: var(--space-4);
  background: var(--surface);
  border-left: 4px solid var(--amber);
  border-radius: var(--radius-md);
  margin: var(--space-4) 0;
}

.nt-upgrade-confirm-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin: var(--space-4) 0;
}

.nt-upgrade-confirm-row__col {
  display: flex;
  flex-direction: column;
}

.nt-upgrade-change-arrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Affiliate stats grid */
.nt-affiliate-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.nt-affiliate-stat {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  transition: all 200ms ease;
}

.nt-affiliate-stat:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.nt-affiliate-stat__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: white;
  flex-shrink: 0;
}

.nt-affiliate-stat__icon .nt-icon {
  width: 24px;
  height: 24px;
  stroke: currentColor;
}

.nt-affiliate-stat__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.nt-affiliate-stat__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
}

.nt-affiliate-stat__value {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--accent);
  margin: 0;
}

/* Affiliate link box */
.nt-affiliate-link-box {
  display: flex;
  gap: var(--space-2);
  align-items: stretch;
}

.nt-affiliate-link-box__url {
  flex: 1;
  font-family: var(--family-mono);
  font-size: var(--text-sm);
}

.nt-affiliate-link-box__copy-btn {
  flex-shrink: 0;
}

/* Affiliate commissions table */
.nt-affiliate-commissions-table {
  width: 100%;
  border-collapse: collapse;
}

.nt-affiliate-commissions-table thead {
  background: var(--surface);
  border-bottom: 2px solid var(--border);
}

.nt-affiliate-commissions-table th {
  padding: var(--space-3);
  text-align: left;
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-2);
}

.nt-affiliate-commissions-table td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--border);
}

.nt-affiliate-commissions-table tbody tr:hover {
  background: var(--surface);
}

/* Affiliate withdrawals */
.nt-affiliate-withdrawals {
  margin: var(--space-6) 0;
}

/* Affiliate signup form */
@media (min-width: 1025px) {
  .nt-affiliates-signup-container {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-6);
  }
}

.nt-form-label-checkbox,
.nt-form-label-radio {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-size: var(--text-sm);
  margin: var(--space-2) 0;
}

.nt-form-label-checkbox input,
.nt-form-label-radio input {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.nt-form-group-radios {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.nt-form-group-inline {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.nt-input-group {
  display: flex;
  gap: 0;
}

.nt-input-group .nt-input {
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  border-right: 0;
}

.nt-input-group .nt-btn {
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  flex-shrink: 0;
}

.nt-table-container {
  overflow-x: auto;
}

.nt-text-center {
  text-align: center;
}

.nt-text-right {
  text-align: right;
}

.nt-text-muted {
  color: var(--text-2);
}

.nt-lead {
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--text-1);
}

.nt-prose-list {
  list-style: disc;
  padding-left: var(--space-6);
  margin: var(--space-3) 0;
}

.nt-prose-list li {
  margin: var(--space-2) 0;
  line-height: 1.6;
}

.nt-code-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  overflow-x: auto;
  font-family: var(--family-mono);
  font-size: var(--text-xs);
  line-height: 1.5;
  margin: var(--space-4) 0;
}

.nt-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}

.nt-alert {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border-left: 4px solid;
  margin: var(--space-4) 0;
}

.nt-alert--warning {
  background: rgba(var(--amber-rgb), 0.05);
  border-left-color: var(--amber);
  color: var(--amber);
}

.nt-alert--error {
  background: rgba(var(--red-rgb), 0.05);
  border-left-color: var(--red);
  color: var(--red);
}

/* Responsive — upgrades and affiliates */
@media (max-width: 768px) {
  .nt-upgrade-stepper {
    gap: var(--space-2);
    padding: var(--space-3);
  }

  .nt-upgrade-step {
    gap: var(--space-1);
  }

  .nt-upgrade-step__number {
    width: 36px;
    height: 36px;
    font-size: var(--text-xs);
  }

  .nt-upgrade-step__label {
    font-size: 10px;
    line-height: 1.2;
  }

  .nt-upgrade-plans-grid {
    grid-template-columns: 1fr;
  }

  .nt-upgrade-confirm-row {
    grid-template-columns: 1fr;
  }

  .nt-affiliate-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .nt-affiliate-link-box {
    flex-direction: column;
  }

  .nt-affiliate-link-box__url,
  .nt-affiliate-link-box__copy-btn {
    width: 100%;
  }

  .nt-upgrade-summary-table__row {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .nt-affiliates-signup-container {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   14. Aplicativos page — Hero, Terminal, Template Library, Compare,
       Plans toggle, CTA. Page-scoped via .nt-hero--apps and section
       classes. Reuses existing .nt-card-plan and .nt-section-header tokens.
   ========================================================================== */

/* Hero — apps variant */
.nt-hero--apps {
  padding: var(--space-20) 0 var(--space-12);
}

.nt-hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--space-12);
  align-items: center;
}

@media (max-width: 960px) {
  .nt-hero__grid {
    grid-template-columns: 1fr;
  }
}

.nt-hero__content {
  text-align: left;
}

.nt-hero__meta {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: var(--space-6) 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-2);
}

.nt-hero__meta li {
  margin: 0;
}

/* Terminal */
.nt-terminal {
  background: #0E0E10;
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  color: #E8E8E8;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  box-shadow: 0 30px 60px -25px color-mix(in srgb, var(--accent) 25%, transparent), 0 12px 24px -12px rgba(0,0,0,.3);
  position: relative;
}

.nt-terminal__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid #222;
}

.nt-terminal__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #666;
}

.nt-terminal__dot[data-color="red"] {
  background: #FF5F56;
}

.nt-terminal__dot[data-color="amber"] {
  background: #FFBD2E;
}

.nt-terminal__dot[data-color="green"] {
  background: #27C93F;
}

.nt-terminal__title {
  margin-left: auto;
  color: #666;
  font-size: var(--text-2xs);
  user-select: none;
}

.nt-terminal__row {
  display: flex;
  gap: var(--space-2);
  padding: 2px 0;
}

.nt-terminal__prompt {
  color: var(--accent);
  user-select: none;
}

.nt-terminal__cmd {
  color: #F1F1F1;
}

.nt-terminal__out {
  color: #8A8A8A;
  padding-left: var(--space-5);
}

.nt-terminal__out--ok {
  color: #22C55E;
}

/* Template Library — Toolbar */
.nt-tpl-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-8) 0 var(--space-5);
  flex-wrap: wrap;
}

.nt-tpl-tabs {
  display: inline-flex;
  padding: 4px;
  background: var(--deep);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.nt-tpl-tab {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-3);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.nt-tpl-tab.is-active {
  background: var(--card);
  color: var(--text-1);
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 0 0 1px var(--border);
}

.nt-tpl-tab__count {
  color: var(--text-3);
  font-weight: 500;
  font-size: var(--text-2xs);
  margin-left: var(--space-2);
}

.nt-tpl-profile {
  display: flex;
  gap: var(--space-2);
  padding: 4px;
  background: var(--card);
  border-radius: var(--radius-md);
}

.nt-tpl-profile__btn {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-3);
  font-weight: 600;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
}

.nt-tpl-profile__btn.is-active {
  background: var(--text-1);
  color: var(--card);
}

/* Template Library — Filters */
.nt-tpl-filters {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-7);
  flex-wrap: wrap;
  align-items: center;
}

.nt-tpl-chip {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  font-weight: 500;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  color: var(--text-2);
  background: var(--card);
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-out);
}

.nt-tpl-chip:hover {
  border-color: var(--text-3);
}

.nt-tpl-chip.is-active {
  background: var(--text-1);
  color: var(--card);
  border-color: var(--text-1);
}

.nt-tpl-chip__count {
  opacity: .6;
  font-size: var(--text-2xs);
  font-weight: 400;
  margin-left: var(--space-1);
}

.nt-tpl-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  min-width: 240px;
  margin-left: auto;
}

.nt-tpl-search input {
  border: none;
  outline: none;
  font-size: var(--text-sm);
  flex: 1;
  background: transparent;
  color: var(--text-1);
}

.nt-tpl-search input::placeholder {
  color: var(--text-3);
}

/* Template Library — Grid */
.nt-tpl-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

@media (max-width: 960px) {
  .nt-tpl-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .nt-tpl-grid {
    grid-template-columns: 1fr;
  }
}

.nt-tpl-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: all .15s ease;
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 180px;
}

.nt-tpl-card:hover {
  border-color: var(--text-3);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.nt-tpl-card[hidden] {
  display: none;
}

.nt-tpl-card__logo {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  font-size: var(--text-xl);
  font-weight: 800;
  font-family: var(--font-mono);
  color: #FFF;
  letter-spacing: -0.04em;
}

.nt-tpl-card__logo-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.nt-tpl-card__name {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-1);
}

.nt-tpl-card__desc {
  font-size: var(--text-xs);
  color: var(--text-3);
  margin: 0;
  line-height: 1.45;
  flex-grow: 1;
}

.nt-tpl-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  font-size: var(--text-2xs);
  color: var(--text-3);
}

.nt-tpl-card__version {
  font-family: var(--font-mono);
}

.nt-tpl-card__cta {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.nt-tpl-card--featured {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 8%, transparent);
}

.nt-tpl-card__badge {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  text-transform: uppercase;
}

.nt-tpl-empty {
  grid-column: 1 / -1;
  padding: var(--space-10);
  text-align: center;
  color: var(--text-3);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
}

/* Compare — Grid */
.nt-compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: stretch;
}

@media (max-width: 960px) {
  .nt-compare-grid {
    grid-template-columns: 1fr;
  }
}

.nt-compare-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0;
  background: var(--card);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  box-shadow: var(--shadow-sm);
}

.nt-compare-card--kvm {
  background: var(--card);
  color: var(--text-1);
  border-color: var(--border);
}

.nt-compare-card__badge {
  display: inline-block;
  width: fit-content;
  margin: var(--space-6) var(--space-6) 0;
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
}

.nt-compare-card--kvm .nt-compare-card__badge {
  background: var(--text-1);
  color: var(--surface);
}

.nt-compare-card h3 {
  margin: var(--space-4) var(--space-6) var(--space-1);
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: 0;
  color: var(--text-1);
  text-transform: uppercase;
}

.nt-compare-card__tag {
  color: var(--text-2);
  font-size: var(--text-md);
  margin: 0 var(--space-6) var(--space-5);
}

.nt-compare-card--kvm .nt-compare-card__tag {
  color: var(--text-2);
}

.nt-compare-card__list {
  list-style: none;
  padding: 0 var(--space-6);
  margin: 0 0 var(--space-6);
  display: grid;
  gap: var(--space-3);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text-2);
}

.nt-compare-card__list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2);
}

.nt-compare-card__list li::before {
  content: "✓";
  color: var(--green);
  font-weight: 700;
}

.nt-compare-card--kvm .nt-compare-card__list li::before {
  color: var(--green);
}

.nt-compare-card__from {
  font-size: var(--text-sm);
  color: var(--text-2);
  padding: var(--space-5) var(--space-6);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  justify-content: space-between;
  background: var(--void);
}

.nt-compare-card--kvm .nt-compare-card__from {
  border-top-color: var(--border);
  color: var(--text-2);
}

.nt-compare-card__from strong {
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--text-1);
}

.nt-compare-card--kvm .nt-compare-card__from strong {
  color: var(--text-1);
}

.nt-compare-card__from small {
  font-size: var(--text-2xs);
  color: var(--text-3);
  font-weight: 500;
  margin-left: 2px;
}

/* Plans — Toggle */
.nt-plans-toggle {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-7);
  gap: 0;
}

.nt-plans-toggle__btn {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-3);
  background: var(--bg-2);
  border: 1px solid var(--border);
  cursor: pointer;
}

.nt-plans-toggle__btn:first-child {
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.nt-plans-toggle__btn:last-child {
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  border-left: none;
}

.nt-plans-toggle__btn.is-active {
  background: var(--text-1);
  color: var(--card);
  border-color: var(--text-1);
}

/* Plans — Grids (reuse .nt-card-plan) */
.nt-plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.nt-plans-grid[hidden] {
  display: none;
}

/* CTA Section */
.nt-section--cta {
  background: var(--bg-2);
  text-align: center;
}

.nt-section--cta h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: var(--text-1);
  margin: 0 0 var(--space-6);
}

/* ============================================================================
   Landing pages de venda — componentes genéricos (Internet/Hospedagem/Cloud/
   Telefonia/Segurança seguem o mesmo padrão visual)
   ============================================================================ */

/* Hero variant para landings (espaçoso, com grid 2-col) */
.nt-hero--landing {
  padding: var(--space-16) 0 var(--space-12);
  background: var(--accent-soft);
}
.nt-hero--landing .nt-hero__title {
  font-size: clamp(1.75rem, 4vw, var(--text-4xl));
  margin-bottom: var(--space-4);
}
.nt-hero--landing .nt-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--space-10);
  align-items: center;
}
@media (max-width: 900px) {
  .nt-hero--landing .nt-hero__grid { grid-template-columns: 1fr; }
}

.nt-hero__product-logo {
  display: block;
  height: clamp(56px, 9vw, 88px);
  width: auto;
  aspect-ratio: 99 / 49;
  max-width: min(280px, 60%);
  margin: 0 0 var(--space-3);
  object-fit: contain;
  animation: nt-hero-logo-in 600ms var(--ease-out) both;
}

@keyframes nt-hero-logo-in {
  from { opacity: 0; transform: scale(1.05); }
  to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .nt-hero__product-logo { animation: none; }
}

.nt-hero__visual {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glow);
}
.nt-hero-stat {
  text-align: center;
  padding: var(--space-3) var(--space-2);
}
.nt-hero-stat__value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--accent);
}
.nt-hero-stat__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-3);
  margin-top: var(--space-1);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Trust seals — grid 4-col → 2-col tablet → 1-col mobile */
.nt-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}
@media (max-width: 1024px) { .nt-trust-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .nt-trust-grid { grid-template-columns: 1fr; } }
.nt-trust-card {
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-align: left;
}
.nt-trust-card__icon {
  display: inline-flex;
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  margin-bottom: var(--space-3);
}
.nt-trust-card__icon::before {
  content: "";
  display: block;
  width: 20px; height: 20px;
  margin: auto;
  background: var(--accent);
  -webkit-mask: radial-gradient(circle, currentColor 40%, transparent 41%);
          mask: radial-gradient(circle, currentColor 40%, transparent 41%);
  align-self: center;
}
.nt-trust-card__label {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  margin: 0 0 var(--space-2);
}
.nt-trust-card__caption { color: var(--text-2); margin: 0; font-size: var(--text-sm); }

/* Plans (landing variant) — reusa nt-card-plan existente, adiciona specs/features */
.nt-plans-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 768px) { .nt-plans-grid--two { grid-template-columns: 1fr; } }

/* Plans tab toggle */
.nt-plans-tabs {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--border);
}

.nt-plans-tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-3) var(--space-5);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  transition: color var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
}

.nt-plans-tab:hover { color: var(--text-1); }

.nt-plans-tab.is-active {
  color: var(--accent-on-light, var(--accent));
  border-bottom-color: var(--accent);
}

.nt-plans-tab__sub {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--text-3);
}

.nt-plans-tab.is-active .nt-plans-tab__sub { color: var(--text-2); }

/* Flex grid — auto-fill para 4 cards */
.nt-plans-grid--flex {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

@media (max-width: 600px) {
  .nt-plans-tabs { flex-direction: column; gap: 0; }
  .nt-plans-tab { border-bottom: none; border-left: 2px solid transparent; padding-left: var(--space-4); }
  .nt-plans-tab.is-active { border-left-color: var(--accent); border-bottom-color: transparent; }
}
.nt-card-plan__tag {
  color: var(--text-3);
  font-size: var(--text-sm);
  margin: 0 0 var(--space-4);
}
.nt-card-plan__specs {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-2);
}
.nt-card-plan__specs strong {
  color: var(--text-1);
  font-weight: 600;
}
.nt-card-plan__features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4);
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-2);
}
.nt-card-plan__features li::before {
  content: "✓ ";
  color: var(--green);
  font-weight: 700;
  margin-right: var(--space-1);
}
.nt-card-plan__badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
}

/* Profiles (sub-seção movel — 4 cards horizontais) */
.nt-profiles-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}
@media (max-width: 1024px) { .nt-profiles-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .nt-profiles-grid { grid-template-columns: 1fr; } }
.nt-profile-card {
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.nt-profile-card__icon {
  display: block;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--accent-soft);
  margin-bottom: var(--space-3);
}
.nt-profile-card__title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  margin: 0 0 var(--space-2);
}

/* Bullets list horizontal */
.nt-bullets-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  list-style: none;
  padding: var(--space-4);
  margin: 0 0 var(--space-8);
  background: var(--accent-soft);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--text-2);
}
.nt-bullets-list li::before { content: "→ "; color: var(--accent-on-light, var(--accent)); font-weight: 700; }

/* FAQ (HTML5 details/summary, sem JS) */
.nt-faq { max-width: 880px; margin: 0 auto; }
.nt-faq__item {
  border-bottom: 1px solid var(--border);
  padding: var(--space-4) 0;
}
.nt-faq__question {
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-1);
  list-style: none;
  position: relative;
  padding-right: var(--space-8);
}
.nt-faq__question::-webkit-details-marker { display: none; }
.nt-faq__question::after {
  content: "+";
  position: absolute;
  right: 0; top: 0;
  font-size: var(--text-xl);
  color: var(--accent);
  transition: transform var(--duration-fast) var(--ease-out);
}
.nt-faq__item[open] .nt-faq__question::after {
  content: "−";
  transform: rotate(0deg);
}
.nt-faq__answer {
  padding-top: var(--space-3);
  color: var(--text-2);
}
.nt-faq__answer p { margin: 0 0 var(--space-2); }

/* Cross-sell (2-3 cards horizontais com accent customizado por marca) */
.nt-crosssell-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-5);
}
.nt-crosssell-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--cs-accent, var(--accent));
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--text-1);
  transition: transform var(--duration-fast) var(--ease-out);
}
.nt-crosssell-card:hover { transform: translateY(-2px); }
.nt-crosssell-card__label {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  margin: 0 0 var(--space-2);
  color: var(--cs-accent, var(--accent));
}
.nt-crosssell-card__tagline {
  margin: 0 0 var(--space-3);
  color: var(--text-2);
  font-size: var(--text-sm);
}
.nt-crosssell-card__arrow {
  margin-top: auto;
  color: var(--cs-accent, var(--accent));
  font-size: var(--text-xl);
  font-weight: 700;
}

/* Section header center variant */
.nt-section-header--center { text-align: center; max-width: 720px; margin-inline: auto; }
.nt-section-header__lead {
  color: var(--text-2);
  font-size: var(--text-md);
  margin-top: var(--space-2);
}

/* CTA final variant existente — só garante padding */
.nt-section--cta { padding: var(--space-12) 0; text-align: center; background: var(--accent-soft); }
.nt-section--cta h2 { font-size: var(--text-3xl); margin-bottom: var(--space-3); }
.nt-section--cta p { max-width: 600px; margin-inline: auto; margin-bottom: var(--space-6); color: var(--text-2); }

/* ============================================================================
   /internet.php — landing NT-Fiber + NT-Movel (sub-seção #movel)
   ============================================================================ */
.nt-hero--internet { /* hero específico — pode usar gradient/imagem */ }

.nt-hero__coverage-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--accent-border);
  background: var(--accent-soft);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}
.nt-hero__coverage-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
@media (max-width: 960px) {
  .nt-hero__coverage-embed { aspect-ratio: 16 / 10; max-height: 360px; }
}

.nt-coverage-facade { display: block; padding: 0; cursor: pointer; }
.nt-coverage-facade__cta {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-8);
  background: linear-gradient(135deg, var(--accent-soft) 0%, transparent 60%), var(--surface);
  border: 0;
  cursor: pointer;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  transition: background var(--duration-fast) var(--ease-out);
}
.nt-coverage-facade__cta:hover,
.nt-coverage-facade__cta:focus-visible {
  background: linear-gradient(135deg, var(--accent-soft) 0%, var(--accent-soft) 100%), var(--surface);
  outline: 2px solid var(--accent-border);
  outline-offset: -4px;
}
.nt-coverage-facade__bg {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 30% 40%, var(--accent-glow) 0, transparent 8%),
    radial-gradient(circle at 70% 55%, var(--accent-glow) 0, transparent 8%),
    radial-gradient(circle at 50% 70%, var(--accent-glow) 0, transparent 8%);
  opacity: .6;
  pointer-events: none;
}
.nt-coverage-facade__label {
  position: relative;
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--accent-on-light, var(--accent));
}
.nt-coverage-facade__hint {
  position: relative;
  font-size: var(--text-2xs);
  color: var(--text-3);
  letter-spacing: .08em;
  text-transform: none;
}

.nt-trust-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .nt-trust-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .nt-trust-grid { grid-template-columns: 1fr; } }
.nt-trust-card { border: 1px solid var(--border); padding: var(--space-5); border-radius: var(--radius-md); background: var(--surface); }
.nt-trust-card__icon { display: inline-block; width: 36px; height: 36px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-3); font-weight: 700; }
.nt-trust-card__label { font-family: var(--font-display); font-size: var(--text-md); color: var(--text-1); margin: 0 0 var(--space-2); }
.nt-trust-card__caption { font-size: var(--text-sm); color: var(--text-2); margin: 0; }

.nt-plans-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(2, 1fr); margin-top: var(--space-8); }
@media (max-width: 768px) { .nt-plans-grid { grid-template-columns: 1fr; } }
.nt-card-plan { display: flex; flex-direction: column; border: 1px solid var(--border); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--surface); }
.nt-card-plan--featured { border: 2px solid var(--accent); position: relative; }
.nt-card-plan--featured::before { content: 'DESTAQUE'; position: absolute; top: -12px; left: var(--space-4); background: var(--accent); color: white; padding: 2px var(--space-2); font-size: var(--text-xs); font-weight: 700; border-radius: 3px; letter-spacing: .05em; }
.nt-card-plan__name { font-family: var(--font-display); font-size: var(--text-xl); margin: 0 0 var(--space-1); }
.nt-card-plan__tagline { font-size: var(--text-sm); color: var(--text-2); margin: 0 0 var(--space-3); }
.nt-card-plan__specs { padding: var(--space-3) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin: var(--space-3) 0; font-size: var(--text-sm); }
.nt-card-plan__specs > div { padding: var(--space-1) 0; }
.nt-card-plan__spec-label { color: var(--text-2); }
.nt-card-plan__features { list-style: none; padding: 0; margin: var(--space-3) 0; flex-grow: 1; }
.nt-card-plan__features li { padding: var(--space-1) 0; font-size: var(--text-sm); color: var(--text-2); position: relative; padding-left: var(--space-5); }
.nt-card-plan__features li::before { content: '✓'; position: absolute; left: 0; color: var(--accent-on-light, var(--accent)); font-weight: 700; }
.nt-card-plan__price-block { padding: var(--space-3) 0; margin: var(--space-3) 0 0 0; border-top: 1px solid var(--border); }
.nt-card-plan__price { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--accent-on-light, var(--accent)); font-weight: 700; }
.nt-card-plan__cycle { font-size: var(--text-sm); color: var(--text-2); }

.nt-movel-profiles-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(4, 1fr); margin-bottom: var(--space-8); }
@media (max-width: 1024px) { .nt-movel-profiles-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .nt-movel-profiles-grid { grid-template-columns: 1fr; } }
.nt-movel-profile { background: var(--surface); border: 1px solid var(--border); padding: var(--space-4); border-radius: var(--radius-md); }
.nt-movel-profile__title { font-family: var(--font-display); font-size: var(--text-lg); margin: 0 0 var(--space-2); }
.nt-movel-profile__description { font-size: var(--text-sm); color: var(--text-2); margin: 0; }
.nt-movel-equipment { list-style: disc; padding-left: var(--space-5); color: var(--text-2); margin-bottom: var(--space-6); }

.nt-faq { max-width: 820px; margin-inline: auto; }
.nt-faq__item { border-bottom: 1px solid var(--border); padding: var(--space-3) 0; }
.nt-faq__question { font-family: var(--font-display); font-size: var(--text-md); color: var(--text-1); cursor: pointer; padding: var(--space-2) 0; list-style: none; }
.nt-faq__question::-webkit-details-marker { display: none; }
.nt-faq__question::after { content: '+'; float: right; color: var(--accent); transition: transform var(--duration-fast); font-weight: 700; }
details[open] .nt-faq__question::after { content: '−'; }
.nt-faq__answer { padding: var(--space-3) 0; color: var(--text-2); font-size: var(--text-sm); line-height: 1.6; }
.nt-faq__answer p { margin: var(--space-2) 0; }
.nt-faq__answer strong { color: var(--text-1); }

/* ============================================================================
   /seguranca.php — landing BackupOn (backup em nuvem com retenção imutável)
   ============================================================================ */
.nt-hero--seguranca { /* hero específico para seguranca */ }

.nt-backup-stat-block { display: grid; gap: var(--space-3); grid-template-columns: repeat(3, 1fr); margin-top: var(--space-6); }
@media (max-width: 1024px) { .nt-backup-stat-block { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .nt-backup-stat-block { grid-template-columns: 1fr; } }
.nt-backup-stat-block__item { background: var(--accent-soft); border: 1px solid var(--accent-border); padding: var(--space-4); border-radius: var(--radius-md); text-align: center; }
.nt-backup-stat-block__item-value { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--accent-on-light, var(--accent)); font-weight: 700; }
.nt-backup-stat-block__item-label { font-size: var(--text-xs); color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; margin-top: var(--space-2); }

.nt-usecase-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(3, 1fr); margin-top: var(--space-6); }
@media (max-width: 1024px) { .nt-usecase-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .nt-usecase-grid { grid-template-columns: 1fr; } }
.nt-usecase-card { background: var(--surface); border: 1px solid var(--border); padding: var(--space-5); border-radius: var(--radius-md); }
.nt-usecase-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--accent-soft); color: var(--accent); border-radius: 50%; font-weight: 700; font-size: var(--text-lg); margin-bottom: var(--space-3); }
.nt-usecase-card__title { font-family: var(--font-display); font-size: var(--text-lg); color: var(--text-1); margin: 0 0 var(--space-2); }
.nt-usecase-card__desc { font-size: var(--text-sm); color: var(--text-2); margin: 0; line-height: 1.5; }

.nt-card-plan__specs { padding: var(--space-3) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin: var(--space-3) 0; font-size: var(--text-sm); list-style: none; }
.nt-card-plan__specs > li { padding: var(--space-1) 0; color: var(--text-2); }
.nt-card-plan__specs > li > span { color: var(--text-3); display: inline-block; min-width: 80px; }
.nt-card-plan__specs > li > strong { color: var(--text-1); font-weight: 700; }

/* ============================================================
   Compactação dos cards de plano nas landings (2026-04-26)
   Escopado em `.nt-plans-grid` para não vazar pra homepage
   (que usa `.nt-grid--plans`). Reduz padding/margin/gap em
   ~12-15% na altura. Verificação: hospedagem.php, internet.php,
   seguranca.php, cloud.php, telefonia.php, aplicativos.php.
   ============================================================ */
.nt-plans-grid .nt-card-plan { gap: var(--space-2); padding: var(--space-5); }
.nt-plans-grid .nt-card-plan__tagline { margin: 0 0 var(--space-2); }
.nt-plans-grid .nt-card-plan__specs { padding: var(--space-2) 0; margin: var(--space-2) 0; gap: var(--space-1); }
.nt-plans-grid .nt-card-plan__specs > div,
.nt-plans-grid .nt-card-plan__specs > li { padding-block: 2px; }
.nt-plans-grid .nt-card-plan__features { margin: var(--space-2) 0; gap: var(--space-1); }
.nt-plans-grid .nt-card-plan__features li { padding-block: 2px; }
.nt-plans-grid .nt-card-plan__price-block { padding: var(--space-2) 0; margin: var(--space-2) 0 0 0; }


/* ============================================================
   IMPRESSAO — fatura, viewticket, qualquer pagina clientarea
   Esconde chrome (nav, footer, sidebar, acoes, breadcrumb, alerts)
   Forca layout single-column legivel em A4
   Adicionado 2026-04-26: print stylesheet ausente fazia window.print()
   capturar a pagina inteira incluindo lista de produtos do footer
   ============================================================ */
.nt-print-only { display: none; }

@media print {
  /* Layout reset — esconder chrome */
  .nt-nav, .nt-footer, .nt-sidebar,
  .nt-invoice-hero__actions, .nt-invoice-hero__breadcrumb,
  .nt-invoice-hero__eyebrow,
  .nt-alert, .nt-flashmessage,
  #nt-payment, .nt-invoice-payment-form,
  .nt-invoice-credit-form,
  [data-nt-print] { display: none !important; }

  .nt-print-only { display: block !important; margin-bottom: 12pt; }

  /* Wrapper sem padding/margem cinza */
  .nt-section, .nt-container,
  .nt-clientarea-layout {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    display: block !important;
    grid-template-columns: none !important;
  }
  #main-content { width: 100% !important; max-width: 100% !important; }

  /* Cores legiveis em papel branco */
  body { background: #fff !important; color: #000 !important; font-size: 10pt; }
  .nt-card, .nt-invoice-hero, .nt-invoice-section {
    background: #fff !important;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    page-break-inside: avoid;
    margin-bottom: 12pt !important;
  }

  /* Reset tipografico — Rajdhani uppercase + letter-spacing forte quebra glifos
     em algumas impressoras/PDF (ex.: ESTADO virando celula vazia, "Julho 4q"
     no lugar de "Julho 4o"). Forcar fontes seguras (serif para headings,
     sans para corpo) garante render legivel. */
  h1, h2, h3,
  .nt-invoice-hero__title,
  .nt-card__title,
  .nt-section__title {
    font-family: Georgia, "Times New Roman", serif !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: #000 !important;
  }
  body, p, dd, dt, td, th, li, span {
    font-family: Arial, Helvetica, sans-serif !important;
    letter-spacing: 0 !important;
  }

  /* Status badge: legivel + cor preta sobre branco com border solida */
  .nt-badge {
    font-family: Arial, Helvetica, sans-serif !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    border: 1px solid #000 !important;
    padding: 2pt 8pt !important;
    color: #000 !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  /* Tabelas legiveis */
  .nt-table { border-collapse: collapse !important; width: 100% !important; }
  .nt-table th, .nt-table td { border: 1px solid #ddd !important; padding: 4pt 6pt !important; }
  .nt-table thead th { background: #f5f5f5 !important; }
  .nt-table__total th, .nt-table__total td { background: #efefef !important; font-weight: 700; }
  .nt-table-wrap { overflow: visible !important; }

  /* Hero card vira block-level com info empilhada */
  .nt-invoice-hero {
    display: block !important;
    padding: 12pt !important;
    grid-template-columns: none !important;
  }
  .nt-invoice-hero__title { font-size: 18pt !important; margin: 0 0 6pt !important; }
  .nt-invoice-hero__sub { color: #555 !important; font-size: 10pt !important; }
  .nt-invoice-hero__details { display: block !important; margin-top: 8pt !important; }
  .nt-invoice-hero__row {
    display: flex !important;
    justify-content: space-between;
    padding: 2pt 0;
    border-bottom: 1px dotted #ccc;
  }
  .nt-invoice-hero__amount { font-weight: 700 !important; font-size: 12pt !important; }

  /* Timeline simplificada (sem icones/SVG) */
  .nt-timeline { list-style: none; padding: 0 !important; }
  .nt-timeline__dot { display: none !important; }
  .nt-timeline__item { padding: 4pt 0 !important; border-bottom: 1px dotted #ddd; }
  .nt-timeline__item:last-child { border-bottom: none; }
  .nt-timeline__title { font-size: 11pt; margin: 0 0 2pt; }
  .nt-timeline__meta { font-size: 9pt; color: #666; display: block; margin-bottom: 2pt; }
  .nt-timeline__body { font-size: 9pt; margin: 0; }

  /* Headings de secao */
  .nt-card__title { font-size: 12pt !important; }

  /* Links sem underline (nao imprimir URL inline — polui descricoes) */
  a { color: #000 !important; text-decoration: none !important; }

}

@page { size: A4; margin: 15mm; }

/* ====================================================================
   Hero mockups — visual proofs (cloud / hospedagem / telefonia / segurança)
   Companions to .nt-terminal (~5019). Each landing has its own metaphor.
   ==================================================================== */

/* Cluster Dashboard — cloud.tpl (NT Cloud Datacenter Virtual) */
.nt-cluster {
  background: #0E0E10;
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  color: #E8E8E8;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  box-shadow: 0 30px 60px -25px color-mix(in srgb, var(--accent) 25%, transparent), 0 12px 24px -12px rgba(0,0,0,.3);
}

.nt-cluster__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid #222;
}

.nt-cluster__title {
  color: #F1F1F1;
  font-weight: 600;
}

.nt-cluster__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: #22C55E;
  font-size: var(--text-2xs);
}

.nt-cluster__pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22C55E;
  animation: nt-cluster-pulse 2s infinite;
}

@keyframes nt-cluster-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,.6); }
  50%      { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
}

.nt-cluster__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.nt-cluster__list li {
  display: grid;
  grid-template-columns: 8px 70px 90px 1fr 44px 70px;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 0;
}

.nt-cluster__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22C55E;
}

.nt-cluster__list b {
  color: #F1F1F1;
  font-weight: 600;
}

.nt-cluster__spec {
  color: #8A8A8A;
}

.nt-cluster__bar {
  height: 6px;
  background: #1A1A1F;
  border-radius: 999px;
  overflow: hidden;
}

.nt-cluster__bar i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
}

.nt-cluster__pct {
  color: #F1F1F1;
  text-align: right;
}

.nt-cluster__up {
  color: #666;
  font-size: var(--text-2xs);
  text-align: right;
}

.nt-cluster__foot {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid #222;
  color: #8A8A8A;
  font-size: var(--text-2xs);
}

/* Lighthouse Card — hospedagem.tpl (NT Host) */
.nt-lighthouse {
  background: var(--surface, #FFF);
  border: 1px solid color-mix(in srgb, var(--ink, #111) 8%, transparent);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: 0 30px 60px -25px color-mix(in srgb, var(--accent) 25%, transparent), 0 12px 24px -12px rgba(0,0,0,.15);
}

.nt-lighthouse__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid color-mix(in srgb, var(--ink, #111) 6%, transparent);
}

.nt-lighthouse__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ccc;
}

.nt-lighthouse__dot[data-color="red"]   { background: #FF5F56; }
.nt-lighthouse__dot[data-color="amber"] { background: #FFBD2E; }
.nt-lighthouse__dot[data-color="green"] { background: #27C93F; }

.nt-lighthouse__url {
  flex: 1;
  margin-left: var(--space-3);
  background: color-mix(in srgb, var(--ink, #111) 4%, transparent);
  border-radius: 999px;
  padding: 4px 12px;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--ink-soft, #555);
  text-align: center;
}

.nt-lighthouse__scores {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.nt-lighthouse__score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-2xs);
  color: var(--ink-soft, #555);
  text-align: center;
}

.nt-lighthouse__ring {
  position: relative;
  isolation: isolate;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: conic-gradient(#0CCE6B 0 360deg);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-base);
  color: #0CCE6B;
}

.nt-lighthouse__ring::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--surface, #FFF);
  z-index: -1;
}

.nt-lighthouse__foot {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--ink-soft, #666);
  text-align: center;
}

/* Call Flow — telefonia.tpl (NT Fone) */
.nt-callflow {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--surface, #FFF);
  border: 1px solid color-mix(in srgb, var(--ink, #111) 8%, transparent);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 60px -25px color-mix(in srgb, var(--accent) 25%, transparent), 0 12px 24px -12px rgba(0,0,0,.15);
}

.nt-callflow__step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}

.nt-callflow__step + .nt-callflow__step {
  margin-top: 18px;
}

.nt-callflow__step + .nt-callflow__step::before {
  content: '';
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 14px;
  background: color-mix(in srgb, var(--accent) 35%, transparent);
}

.nt-callflow__step + .nt-callflow__step::after {
  content: '▼';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--accent);
  font-size: 10px;
  line-height: 1;
}

.nt-callflow__step--entry {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.nt-callflow__step--answer {
  border-color: #22C55E;
  background: color-mix(in srgb, #22C55E 6%, transparent);
}

.nt-callflow__label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-soft, #666);
}

.nt-callflow__value {
  font-weight: 600;
  color: var(--ink, #111);
}

.nt-callflow__pick {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--accent);
}

.nt-callflow__meta {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--ink-soft, #555);
}

/* Vault — seguranca.tpl (BackupOn) */

/* Mobile: collapse multi-column grids that may not fit narrow viewports */
@media (max-width: 640px) {
  .nt-cluster__list li {
    grid-template-columns: 8px 1fr 60px;
    grid-template-areas:
      "dot name pct"
      ".   spec spec"
      ".   bar  bar"
      ".   up   up";
  }
  .nt-cluster__dot { grid-area: dot; }
  .nt-cluster__list b { grid-area: name; }
  .nt-cluster__spec { grid-area: spec; }
  .nt-cluster__bar { grid-area: bar; }
  .nt-cluster__pct { grid-area: pct; }
  .nt-cluster__up { grid-area: up; }
  .nt-lighthouse__scores { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
}

/* ==========================================================================
   Hero device mockup (seguranca.tpl) — replica visual hero Nextcloud
   ========================================================================== */
.nt-device-mockup {
  position: relative;
  height: 100%;
  display: block;
}

.nt-device-mockup__laptop {
  width: 89%;
  position: relative;
  margin-left: auto;
  z-index: 1;
}
.nt-device-mockup__laptop .nt-device-mockup__frame {
  position: relative;
  width: 100%;
  padding-bottom: 61%;
}
.nt-device-mockup__laptop .nt-device-mockup__shell {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center;
}
.nt-device-mockup__laptop .nt-device-mockup__screen {
  overflow: hidden;
  position: absolute;
  top: 10%;
  bottom: 14.4%;
  left: 9%;
  right: 9%;
  z-index: -1;
  box-shadow: 11px 35px 37px rgba(0, 0, 0, 0.2);
}
.nt-device-mockup__laptop .nt-device-mockup__shot {
  position: absolute;
  inset: 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.nt-device-mockup__phone {
  width: 23%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
}
.nt-device-mockup__phone .nt-device-mockup__frame {
  position: relative;
  width: 100%;
  padding-bottom: 203.477897%;
}
.nt-device-mockup__phone .nt-device-mockup__shell {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.nt-device-mockup__phone .nt-device-mockup__screen {
  overflow: hidden;
  position: absolute;
  top: 2%;
  bottom: 1.5%;
  left: 4%;
  right: 4%;
  z-index: -1;
  border-radius: 9%;
  background-color: #fff;
  box-shadow: 11px 17px 37px rgba(0, 0, 0, 0.2);
}
.nt-device-mockup__phone .nt-device-mockup__shot {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.nt-device-mockup__screen {
  position: relative;
  overflow: hidden;
}
.nt-device-mockup__shot {
  transform: translateX(100%);
  animation: nt-mockup-slide 24s infinite;
  will-change: transform;
}
.nt-device-mockup__shot--1 { animation-delay: -0.8s; }
.nt-device-mockup__shot--2 { animation-delay: 7.2s; }
.nt-device-mockup__shot--3 { animation-delay: 15.2s; }
@keyframes nt-mockup-slide {
  0%, 100% { transform: translateX(100%); }
  3.3%     { transform: translateX(0); }
  33.3%    { transform: translateX(0); }
  36.6%    { transform: translateX(-100%); }
  99.9%    { transform: translateX(-100%); }
}
/* Per-shot image-set: AVIF → WebP → JPG fallback (Task 4 2026-04-27) */
.nt-device-mockup__shot--files-desktop {
  background-image: url('../images/nextcloud-files-desktop.jpg');
  background-image: image-set(
    url('../images/nextcloud-files-desktop.avif') type('image/avif'),
    url('../images/nextcloud-files-desktop.webp') type('image/webp'),
    url('../images/nextcloud-files-desktop.jpg') type('image/jpeg')
  );
}
.nt-device-mockup__shot--talk-desktop {
  background-image: url('../images/nextcloud-talk-desktop.jpg');
  background-image: image-set(
    url('../images/nextcloud-talk-desktop.avif') type('image/avif'),
    url('../images/nextcloud-talk-desktop.webp') type('image/webp'),
    url('../images/nextcloud-talk-desktop.jpg') type('image/jpeg')
  );
}
.nt-device-mockup__shot--office-desktop {
  background-image: url('../images/nextcloud-office-desktop.jpg');
  background-image: image-set(
    url('../images/nextcloud-office-desktop.avif') type('image/avif'),
    url('../images/nextcloud-office-desktop.webp') type('image/webp'),
    url('../images/nextcloud-office-desktop.jpg') type('image/jpeg')
  );
}
.nt-device-mockup__shot--files-mobile {
  background-image: url('../images/nextcloud-files-mobile.jpg');
  background-image: image-set(
    url('../images/nextcloud-files-mobile.avif') type('image/avif'),
    url('../images/nextcloud-files-mobile.webp') type('image/webp'),
    url('../images/nextcloud-files-mobile.jpg') type('image/jpeg')
  );
}
.nt-device-mockup__shot--talk-mobile {
  background-image: url('../images/nextcloud-talk-mobile.jpg');
  background-image: image-set(
    url('../images/nextcloud-talk-mobile.avif') type('image/avif'),
    url('../images/nextcloud-talk-mobile.webp') type('image/webp'),
    url('../images/nextcloud-talk-mobile.jpg') type('image/jpeg')
  );
}
.nt-device-mockup__shot--photos-mobile {
  background-image: url('../images/nextcloud-photos-mobile.jpg');
  background-image: image-set(
    url('../images/nextcloud-photos-mobile.avif') type('image/avif'),
    url('../images/nextcloud-photos-mobile.webp') type('image/webp'),
    url('../images/nextcloud-photos-mobile.jpg') type('image/jpeg')
  );
}

@media (prefers-reduced-motion: reduce) {
  .nt-device-mockup__shot { animation: none; transform: translateX(0); }
  .nt-device-mockup__shot--2,
  .nt-device-mockup__shot--3 { display: none; }
}

@media (max-width: 768px) {
  .nt-device-mockup__phone { bottom: 0; width: 28%; }
}

/* ==========================================================================
   Tech Partner Nextcloud (seguranca.tpl secao 2.5) — discreto, centralizado
   ========================================================================== */
.nt-section--tech-partner {
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
}
.nt-tech-partner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.nt-tech-partner__logo {
  height: 28px;
  width: auto;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}
.nt-tech-partner:hover .nt-tech-partner__logo {
  opacity: 1;
}
.nt-tech-partner__text {
  margin: 0;
  font-size: var(--text-sm, 0.875rem);
  color: var(--ink-soft, #666);
  font-weight: 500;
}

/* ==========================================================================
   BackupOn (body[data-product="backupon"]) — WCAG contrast fixes (Task 7)
   #0098da accent on #fff = 4.51:1 (fails AA <14pt + AAA)
   Override to use --text-1 (dark) with accent border visual cue.
   ========================================================================== */
body[data-product="backupon"] .nt-label-mono--accent {
  color: var(--text-1);
}
body[data-product="backupon"] .nt-label-mono::before { content: none; }

body[data-product="backupon"] .nt-btn--ghost {
  color: var(--text-1);
  border-color: var(--accent);
}
body[data-product="backupon"] .nt-btn--ghost:hover {
  color: var(--text-1);
}

/* Landing icons — SVG via <img> child (substitui stub nt-icon-{slug}) */
.nt-trust-card__icon { display: inline-flex; align-items: center; justify-content: center; color: var(--accent); }
.nt-trust-card__icon::before { content: none; }
.nt-trust-card__icon > img { width: 20px; height: 20px; display: block; }

.nt-profile-card__icon { display: inline-flex; align-items: center; justify-content: center; color: var(--accent); }
.nt-profile-card__icon::before { content: none; }
.nt-profile-card__icon > img { width: 18px; height: 18px; display: block; }