/* iOutlet App Check — "Aguenta o WhatsApp?"
   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-ac-wrap{
  --ac-ink:#1a1c1e; --ac-muted:#5b626a; --ac-faint:#8b9098;
  --ac-bg:#ffffff; --ac-surface:#f6f7f9; --ac-line:#e6e9ed;
  --ac-green-ink:#1f6e3b; --ac-green-bg:#eef7f1; --ac-green-bd:#cfe6d6; --ac-green-dot:#2f8f4e;
  --ac-amber-ink:#875a11; --ac-amber-bg:#fdf5e8; --ac-amber-bd:#f0dcb6; --ac-amber-dot:#c08214;
  --ac-red-ink:#9a3322;   --ac-red-bg:#fbefec;   --ac-red-bd:#f0d2ca;   --ac-red-dot:#c0432f;
  --ac-gray-ink:#5b626a;  --ac-gray-bg:#f4f5f7;  --ac-gray-bd:#e3e6ea;  --ac-gray-dot:#a3a8af;
  --ac-r:14px; --ac-r-sm:10px;
  --ac-s2:.75rem; --ac-s3:1rem; --ac-s4:1.5rem; --ac-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(--ac-ink); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.io-ac-wrap *{box-sizing:border-box}

.io-ac-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(--ac-s2); text-wrap:balance}
.io-ac-sub{color:var(--ac-muted); font-size:1.02rem; line-height:1.55; max-width:54ch; margin:0 0 var(--ac-s4)}

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

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

/* Verdict — hero */
.io-ac-global{display:flex; align-items:flex-start; gap:.7rem; padding:1.05rem 1.2rem; border-radius:var(--ac-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(--ac-s2)}
.io-ac-global::before{content:""; flex:0 0 auto; width:12px; height:12px; border-radius:50%; margin-top:.42em}
.io-ac-global.io-ac-green {background:var(--ac-green-bg); border-color:var(--ac-green-bd); color:var(--ac-green-ink)}
.io-ac-global.io-ac-yellow{background:var(--ac-amber-bg); border-color:var(--ac-amber-bd); color:var(--ac-amber-ink)}
.io-ac-global.io-ac-red   {background:var(--ac-red-bg);   border-color:var(--ac-red-bd);   color:var(--ac-red-ink)}
.io-ac-global.io-ac-unknown{background:var(--ac-gray-bg); border-color:var(--ac-gray-bd); color:var(--ac-gray-ink)}
.io-ac-global.io-ac-green::before {background:var(--ac-green-dot)}
.io-ac-global.io-ac-yellow::before{background:var(--ac-amber-dot)}
.io-ac-global.io-ac-red::before   {background:var(--ac-red-dot)}
.io-ac-global.io-ac-unknown::before{background:var(--ac-gray-dot)}

.io-ac-assumed{color:var(--ac-muted); font-size:.9rem; margin:0 0 var(--ac-s3)}

/* App list */
.io-ac-apps{list-style:none; padding:0; margin:0 0 var(--ac-s3)}
.io-ac-app{display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem .6rem; padding:.7rem 0; border-top:1px solid var(--ac-line)}
.io-ac-apps .io-ac-app:last-child{border-bottom:1px solid var(--ac-line)}
.io-ac-dot{width:9px; height:9px; border-radius:50%; flex:0 0 auto; position:relative; top:.46em}
.io-ac-green  .io-ac-dot{background:var(--ac-green-dot)}
.io-ac-yellow .io-ac-dot{background:var(--ac-amber-dot)}
.io-ac-red    .io-ac-dot{background:var(--ac-red-dot)}
.io-ac-unknown .io-ac-dot{background:var(--ac-gray-dot)}
.io-ac-app-name{font-weight:600; font-size:.96rem; color:var(--ac-ink)}
.io-ac-app-msg{font-size:.9rem; color:var(--ac-muted)}
.io-ac-app-verified{flex-basis:100%; padding-left:1.3rem; color:var(--ac-faint); font-size:.78rem}

/* CTA */
.io-ac-cta{margin:var(--ac-s4) 0}
.io-ac-cta p{font-size:1rem; line-height:1.5; max-width:54ch; margin:0 0 var(--ac-s2)}
.io-ac-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(--ac-r-sm); color:#fff; background:#1a1c1e; transition:background .15s ease, transform .12s ease}
.io-ac-cta a:hover{background:#000}
.io-ac-cta a:active{transform:translateY(1px)}

/* Motion — one orchestrated entrance */
@media (prefers-reduced-motion:no-preference){
  .io-ac-global,.io-ac-assumed,.io-ac-apps,.io-ac-cta{animation:io-ac-rise .5s cubic-bezier(.22,.61,.36,1) both}
  .io-ac-assumed{animation-delay:.05s}
  .io-ac-apps{animation-delay:.1s}
  .io-ac-cta{animation-delay:.16s}
}
@keyframes io-ac-rise{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}

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