/* iOutlet Network Check — "Ainda faz chamadas?"
   Shares the perf-check design system: calm Apple-light, Inter (brand), hex tokens
   (audience runs old phones → no OKLCH on iOS 12). Honest, not alarmist. */
.io-nc-wrap{
  --nc-ink:#1a1c1e; --nc-muted:#5b626a; --nc-faint:#8b9098;
  --nc-bg:#ffffff; --nc-surface:#f6f7f9; --nc-line:#e6e9ed;
  --nc-green-ink:#1f6e3b; --nc-green-bg:#eef7f1; --nc-green-bd:#cfe6d6; --nc-green-dot:#2f8f4e;
  --nc-amber-ink:#875a11; --nc-amber-bg:#fdf5e8; --nc-amber-bd:#f0dcb6; --nc-amber-dot:#c08214;
  --nc-red-ink:#9a3322;   --nc-red-bg:#fbefec;   --nc-red-bd:#f0d2ca;   --nc-red-dot:#c0432f;
  --nc-gray-ink:#5b626a;  --nc-gray-bg:#f4f5f7;  --nc-gray-bd:#e3e6ea;  --nc-gray-dot:#a3a8af;
  --nc-r:14px; --nc-r-sm:10px;
  --nc-s2:.75rem; --nc-s3:1rem; --nc-s4:1.5rem; --nc-s5:2rem;
  font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  max-width:660px; margin:0 auto; padding:clamp(1.5rem,5vw,3rem) 1.15rem;
  color:var(--nc-ink); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.io-nc-wrap *{box-sizing:border-box}

.io-nc-wrap h1{font-size:clamp(1.55rem,1.25rem+1.7vw,2.15rem); line-height:1.12; letter-spacing:-.022em; font-weight:700; margin:0 0 var(--nc-s2); text-wrap:balance}
.io-nc-sub{color:var(--nc-muted); font-size:1.02rem; line-height:1.55; max-width:54ch; margin:0 0 var(--nc-s4)}

.io-nc-form{display:flex; flex-wrap:wrap; gap:.5rem; align-items:flex-end; margin:0 0 var(--nc-s4)}
.io-nc-form label{flex:1 1 100%; font-weight:600; font-size:.82rem; letter-spacing:.01em; color:var(--nc-muted)}
.io-nc-form input{flex:1 1 230px; padding:.72rem .85rem; font-size:1rem; color:var(--nc-ink); background:var(--nc-bg); border:1px solid var(--nc-line); border-radius:var(--nc-r-sm); transition:border-color .15s ease, box-shadow .15s ease}
.io-nc-form input:focus{outline:0; border-color:#1a1c1e; box-shadow:0 0 0 3px rgba(26,28,30,.08)}
.io-nc-form button{padding:.72rem 1.4rem; font-size:.98rem; font-weight:600; cursor:pointer; color:#fff; background:#1a1c1e; border:0; border-radius:var(--nc-r-sm); transition:transform .12s ease, opacity .15s ease}
.io-nc-form button:hover{opacity:.9}
.io-nc-form button:active{transform:translateY(1px)}

.io-nc-unknown{background:var(--nc-amber-bg); border:1px solid var(--nc-amber-bd); color:var(--nc-amber-ink); padding:.8rem .95rem; border-radius:var(--nc-r-sm); font-size:.95rem; margin:0 0 var(--nc-s3)}

/* Verdict — hero */
.io-nc-global{display:flex; align-items:flex-start; gap:.7rem; padding:1.05rem 1.2rem; border-radius:var(--nc-r); border:1px solid transparent; font-size:clamp(1.05rem,1rem+.5vw,1.2rem); font-weight:600; line-height:1.32; margin:0 0 var(--nc-s4)}
.io-nc-global::before{content:""; flex:0 0 auto; width:12px; height:12px; border-radius:50%; margin-top:.42em}
.io-nc-global.io-nc-green {background:var(--nc-green-bg); border-color:var(--nc-green-bd); color:var(--nc-green-ink)}
.io-nc-global.io-nc-yellow{background:var(--nc-amber-bg); border-color:var(--nc-amber-bd); color:var(--nc-amber-ink)}
.io-nc-global.io-nc-red   {background:var(--nc-red-bg);   border-color:var(--nc-red-bd);   color:var(--nc-red-ink)}
.io-nc-global.io-nc-unknown{background:var(--nc-gray-bg); border-color:var(--nc-gray-bd); color:var(--nc-gray-ink)}
.io-nc-global.io-nc-green::before {background:var(--nc-green-dot)}
.io-nc-global.io-nc-yellow::before{background:var(--nc-amber-dot)}
.io-nc-global.io-nc-red::before   {background:var(--nc-red-dot)}
.io-nc-global.io-nc-unknown::before{background:var(--nc-gray-dot)}

/* Carrier groups */
.io-nc-carrier{margin:0 0 var(--nc-s4)}
.io-nc-carrier h2{font-size:.78rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--nc-faint); margin:0 0 .35rem}
.io-nc-cat{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.65rem; padding:.6rem 0; border-top:1px solid var(--nc-line)}
.io-nc-carrier .io-nc-cat:first-of-type{border-top:0}
.io-nc-cat-label{font-weight:600; font-size:.96rem; color:var(--nc-ink)}
.io-nc-cat-status{font-size:.9rem; color:var(--nc-muted); text-align:right}
.io-nc-dot{width:9px; height:9px; border-radius:50%; flex:0 0 auto}
.io-nc-green  .io-nc-dot{background:var(--nc-green-dot)}
.io-nc-yellow .io-nc-dot{background:var(--nc-amber-dot)}
.io-nc-red    .io-nc-dot{background:var(--nc-red-dot)}
.io-nc-unknown .io-nc-dot{background:var(--nc-gray-dot)}
.io-nc-flag{margin:.1rem 0 .4rem 1.3rem; font-size:.82rem; color:var(--nc-muted)}

/* CTA */
.io-nc-cta{margin:var(--nc-s4) 0}
.io-nc-cta p{font-size:1rem; line-height:1.5; max-width:54ch; margin:0 0 var(--nc-s2)}
.io-nc-cta a{display:inline-flex; align-items:center; gap:.3rem; text-decoration:none; font-weight:600; font-size:.96rem; padding:.65rem 1.2rem; border-radius:var(--nc-r-sm); color:#fff; background:#1a1c1e; transition:background .15s ease, transform .12s ease}
.io-nc-cta a:hover{background:#000}
.io-nc-cta a:active{transform:translateY(1px)}

/* Motion — one orchestrated entrance */
@media (prefers-reduced-motion:no-preference){
  .io-nc-global,.io-nc-carrier,.io-nc-cta{animation:io-nc-rise .5s cubic-bezier(.22,.61,.36,1) both}
  .io-nc-carrier:nth-of-type(1){animation-delay:.05s}
  .io-nc-carrier:nth-of-type(2){animation-delay:.1s}
  .io-nc-carrier:nth-of-type(3){animation-delay:.14s}
  .io-nc-carrier:nth-of-type(4){animation-delay:.18s}
  .io-nc-cta{animation-delay:.22s}
}
@keyframes io-nc-rise{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}

/* Hub: intro + FAQ */
.io-nc-intro{margin:0 0 var(--nc-s4)}
.io-nc-intro h2{font-size:1.15rem; line-height:1.25; letter-spacing:-.01em; font-weight:650; margin:0 0 var(--nc-s2)}
.io-nc-intro p{color:var(--nc-muted); font-size:1rem; line-height:1.6; max-width:62ch; margin:0}
.io-nc-faq{margin:0 0 var(--nc-s4)}
.io-nc-faq-item{border-top:1px solid var(--nc-line)}
.io-nc-faq-item:last-child{border-bottom:1px solid var(--nc-line)}
.io-nc-faq-item summary{cursor:pointer; list-style:none; font-weight:600; font-size:.98rem; color:var(--nc-ink); padding:.85rem 1.6rem .85rem 0; position:relative}
.io-nc-faq-item summary::-webkit-details-marker{display:none}
.io-nc-faq-item summary::after{content:"+"; position:absolute; right:.15rem; top:.72rem; font-size:1.25rem; font-weight:400; line-height:1; color:var(--nc-faint)}
.io-nc-faq-item[open] summary::after{content:"\2013"}
.io-nc-faq-item p{margin:0 0 .95rem; color:var(--nc-muted); font-size:.94rem; line-height:1.55; max-width:62ch}

@media (max-width:430px){
  .io-nc-cat{grid-template-columns:auto 1fr; gap:.4rem .55rem}
  .io-nc-cat-status{grid-column:2; text-align:left; margin-top:-.15rem}
}