:root {
  --bg:#0d1117; --card:#161b22; --border:#30363d; --text:#e6edf3;
  --muted:#8b949e; --green:#3fb950; --purple:#a371f7; --orange:#d29922;
  --red:#f85149; --accent:#58a6ff; --radius:12px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg);color:var(--text);line-height:1.6;min-height:100vh}

.container{max-width:960px;margin:0 auto;padding:2rem 1rem}
/* Hero */

.hero{text-align:center;padding:2rem 0 1rem}

.hero h1{font-size:2.2rem;font-weight:800;background:linear-gradient(135deg,var(--green),var(--accent));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent}

.hero p{color:var(--muted);font-size:1.05rem;margin-top:0.5rem}

.badge-row{display:flex;justify-content:center;gap:0.75rem;margin-top:1rem;flex-wrap:wrap}

.badge{background:rgba(88,166,255,0.1);border:1px solid rgba(88,166,255,0.2);
  padding:0.3rem 0.8rem;border-radius:20px;font-size:0.8rem;color:var(--accent)}
/* Cards */

.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:1.5rem;margin-bottom:1.5rem}

.card h2{font-size:1.05rem;margin-bottom:1rem;display:flex;align-items:center;gap:0.5rem}
/* Textareas */
textarea{width:100%;min-height:120px;padding:0.8rem;background:#0d1117;
  border:1px solid var(--border);border-radius:8px;color:var(--text);
  font-family:"SF Mono",Consolas,monospace;font-size:0.85rem;resize:vertical}
textarea:focus{outline:none;border-color:var(--accent)}
/* Buttons */

.btn{display:inline-flex;align-items:center;gap:0.4rem;padding:0.65rem 1.5rem;
  border:none;border-radius:8px;font-weight:600;font-size:0.9rem;cursor:pointer;transition:all 0.2s}

.btn-primary{background:var(--green);color:#000}

.btn-primary:hover{opacity:0.85}

.btn-primary:disabled{opacity:0.4;cursor:not-allowed}

.btn-secondary{background:var(--border);color:var(--text)}

.btn-pro{background:linear-gradient(135deg,var(--purple),#f778ba);color:#fff}

.btn-row{display:flex;gap:0.75rem;flex-wrap:wrap;margin-top:1rem}
/* Score */
/* Results */

.result-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem}
/* Mobile: tablets & small screens */

@media(max-width:768px){
  .container{padding:1.2rem 0.8rem}
  .hero h1{font-size:1.6rem}
  .hero p{font-size:0.9rem}
  .card{padding:1rem}
  .btn{font-size:0.82rem;padding:0.55rem 1rem}
  .license-input{flex-direction:column}
  .license-input input{width:100%}
}
/* Mobile: phones */

@media(max-width:480px){
  .container{padding:0.8rem 0.5rem}
  .hero h1{font-size:1.3rem}
  .hero{padding:1rem 0 0.5rem}
  .badge{font-size:0.7rem;padding:0.2rem 0.5rem}
  .result-grid{grid-template-columns:1fr}
  textarea{min-height:100px;font-size:0.78rem}
  .btn-row{flex-direction:column}
  .btn-row .btn{width:100%;justify-content:center}
  .score-circle{width:80px;height:80px;font-size:1.5rem}
  .stat{padding:0.5rem}
  .stat .num{font-size:1.2rem}
  .pro-gate{padding:1.2rem}
  footer{padding:1rem 0}
}

.stat{text-align:center;padding:1rem}

.stat .num{font-size:1.5rem;font-weight:700}

.stat .label{font-size:0.8rem;color:var(--muted);margin-top:0.25rem}

.stat.green .num{color:var(--green)}

.stat.purple .num{color:var(--purple)}

.stat.orange .num{color:var(--orange)}

.stat.red .num{color:var(--red)}

.keyword-tag{display:inline-block;padding:0.2rem 0.6rem;border-radius:20px;
  font-size:0.78rem;margin:0.15rem}

.tag-match{background:rgba(63,185,80,0.15);color:var(--green)}

.tag-miss{background:rgba(248,81,73,0.15);color:var(--red)}

.suggestion{padding:0.5rem 0;border-bottom:1px solid var(--border);font-size:0.88rem}

.suggestion:last-child{border-bottom:none}

.suggestion .icon{margin-right:0.5rem}
/* Pro gate */

.pro-gate{text-align:center;padding:2rem;
  background:linear-gradient(135deg,rgba(163,113,247,0.1),rgba(247,120,186,0.1));
  border:1px solid rgba(163,113,247,0.3);border-radius:var(--radius)}

.pro-gate h3{font-size:1.3rem;margin-bottom:0.5rem}

.pro-gate p{color:var(--muted);margin-bottom:1rem}

.checks-used{font-size:0.92rem;color:var(--muted);margin-top:0.5rem;font-weight:500}
/* Footer */
footer{text-align:center;color:var(--muted);font-size:0.8rem;
  padding:2rem 0;border-top:1px solid var(--border);margin-top:2rem}
footer a{color:var(--accent);text-decoration:none}

.toast{position:fixed;bottom:2rem;right:2rem;background:var(--green);color:#000;
  padding:0.75rem 1.25rem;border-radius:8px;font-weight:600;display:none;z-index:100}

.locked-section { position: relative; overflow: hidden; }

.locked-section .blur-overlay { position: absolute; inset:0; backdrop-filter: blur(6px); 
  background: rgba(13,17,23,0.5); z-index:2; border-radius: var(--radius);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:0.5rem; }

.locked-section .blur-overlay span { font-size:0.85rem; color:var(--muted); }

.locked-section .blur-content { filter: blur(4px); user-select:none; }

.license-input { display:flex; gap:0.5rem; align-items:center; flex-wrap:wrap; }

.license-input input { flex:1; min-width:180px; padding:0.5rem 0.8rem; background:#0d1117;
  border:1px solid var(--border); border-radius:8px; color:var(--text); font-family:monospace; 
  font-size:0.9rem; text-transform:uppercase; letter-spacing:1px; }

.license-input input:focus { outline:none; border-color:var(--purple); }

.license-input button { padding:0.5rem 1rem; background:var(--purple); color:#fff; 
  border:none; border-radius:8px; font-weight:600; cursor:pointer; font-size:0.85rem; }

.pro-badge { display:inline-block; background:linear-gradient(135deg,var(--purple),#f778ba); 
  color:#fff; padding:0.2rem 0.6rem; border-radius:4px; font-size:0.7rem; font-weight:700; 
  letter-spacing:0.5px; margin-left:0.5rem; }
/* ============================================================
   Print styles é–?clean report for saving/sharing
   ============================================================ */

@media print {
  body { background:#fff; color:#000; font-size:11pt; }
  .container { max-width:100%; padding:0; }
  .hero { padding:0.5rem 0; }
  .hero h1 { -webkit-text-fill-color:#000; font-size:1.5rem; }
  .hero p, .badge-row, .btn-row, footer, .pro-gate, .toast,
  #input-card, #pro-gate, .checks-used, .blur-overlay,
  .license-input, #paypal-button-container, script { display:none !important; }
  .card { background:#fff; border:1px solid #ccc; break-inside:avoid; padding:1rem; }
  .score-circle { border-color:#000; color:#000; }
  .keyword-tag { border:1px solid #ccc; }
  .tag-match { background:#e8f5e9; color:#2e7d32; }
  .tag-miss { background:#ffebee; color:#c62828; }
  .locked-section .blur-content { filter:none; }
  #results-card { display:block !important; }
  .stat .num { font-size:1.2rem; }
  @page { margin:1cm; }
}
/* ============================================================
   Copy button styles
   ============================================================ */

.copy-btn { background:var(--border); color:var(--text); border:none; 
  padding:0.35rem 0.75rem; border-radius:6px; cursor:pointer; 
  font-size:0.78rem; transition:all 0.15s; }

.copy-btn:hover { background:var(--accent); color:#fff; }

.copy-btn.copied { background:var(--green); color:#000; }
/* Toast animation */

.toast { transition:opacity 0.3s, transform 0.3s; transform:translateY(10px); }

.toast.show { display:block; opacity:1; transform:translateY(0); }
/* Smooth card appearance */

.card { transition:border-color 0.2s; }

#results-card { animation:fadeIn 0.3s ease; }

@keyframes fadeIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
/* Loading dots animation */

#loading-dots::after{content:"";animation:dots 1.2s steps(4,infinite)}

@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}100%{content:""}}
/* SVG score ring */

.score-ring{display:block;margin:0 auto}
/* Pulse CTA animation */

@keyframes pulse-cta {
  0%, 100% { box-shadow: 0 0 0 0 rgba(163,113,247,0.4); }
  50% { box-shadow: 0 0 0 8px rgba(163,113,247,0); }
}

#paypal-button-container { border-radius: 8px; }
/* Dark scrollbar */
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--muted)}
/* Smooth page load */
body{animation:fadeIn 0.3s ease}
/* Pro badge */

.pro-badge{display:inline-block;background:linear-gradient(135deg,var(--purple),#f778ba);color:#fff;padding:0.15rem 0.5rem;border-radius:10px;font-size:0.7rem;font-weight:700;vertical-align:middle}
/* Better textarea focus */
textarea:focus{box-shadow:0 0 0 2px rgba(88,166,255,0.2)}
/* License input */

.license-input{display:flex;gap:0.5rem;align-items:center;margin-top:0.75rem}

.license-input input{flex:1;padding:0.5rem 0.8rem;background:#0d1117;border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:0.85rem}

.license-input input:focus{outline:none;border-color:var(--purple)}
/* Report preview in pro-gate */

.report-preview{text-align:left;background:rgba(0,0,0,0.3);border-radius:8px;padding:0.75rem;margin:0.75rem 0;font-size:0.78rem}

.report-preview .kw{display:inline-block;padding:0.15rem 0.4rem;margin:0.1rem;border-radius:12px;font-size:0.7rem}

.report-preview .kw.req{background:rgba(63,185,80,0.2);color:var(--green)}

.report-preview .kw.nice{background:rgba(210,153,34,0.2);color:var(--orange)}
/* Mobile fixes */
/* === Payment/* === Payment section: PayPal + QR codes === */

#paypal-button-container { border-radius: 8px; min-height: 45px; padding: 0.25rem; }

#paypal-button-container iframe { border-radius: 6px; }

.payment-qr { transition: transform 0.2s; }

.payment-qr:hover { transform: scale(1.05); }

@media (max-width: 700px) {
  #paypal-button-container { min-width: 100%; }
}
/* === Format checks section === */

#format-checks h2 { font-size: 1rem; margin-bottom: 0.75rem; }
/* === Free checks warning badge === */

.checks-used { font-size:0.8rem; color:var(--muted); margin-top:0.5rem }
/* === Mobile refinements === */

@media(max-width:480px){
  .trust-stats { flex-direction: column; gap: 0.4rem; text-align: center; }
  .trust-stats span { justify-content: center; }
  .stat { padding: 0.6rem 0.3rem; }
  .stat .num { font-size: 1.1rem; }
  .stat .label { font-size: 0.68rem; }
  #input-card textarea { min-height: 140px; }
  #input-card .btn { padding: 0.7rem 1rem; }
}

@media(max-width:360px){
  .hero h1 { font-size: 1.15rem; }
  .card { padding: 0.8rem; }
  .badge { font-size: 0.65rem; padding: 0.15rem 0.4rem; }
}
/* Onboarding steps */

.steps-row { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

.step-item { flex: 1; min-width: 140px; max-width: 200px; }

.step-icon { font-size: 1.5rem; }

.step-title { font-weight: 700; font-size: 0.9rem; margin: 0.3rem 0; }

.step-desc { font-size: 0.75rem; color: var(--muted); }
/* Trust stats */

.trust-stats { display: flex; justify-content: center; gap: 1.5rem; margin: 1rem 0; flex-wrap: wrap; font-size: 0.78rem; color: var(--muted); }

.trust-stats strong { color: var(--text); }

@media(max-width:480px){
  .steps-row { flex-direction: column; align-items: center; }
  .step-item { max-width: 100%; }
  .trust-stats { flex-direction: column; gap: 0.3rem; text-align: center; }
}

@keyframes spin { to { transform: rotate(360deg); } }
/* Mobile responsiveness fixes */
img { max-width: 100%; height: auto; }
body { min-width: 320px; overflow-x: hidden; }
button, a.btn, .btn, [role="button"], input[type="submit"], input[type="button"] { min-height: 44px; }
textarea, input[type="text"], input[type="email"], input[type="url"] { word-break: break-word; }
pre, code { word-break: break-all; overflow-wrap: break-word; white-space: pre-wrap; }

@media (max-width: 480px) {
  h1 { font-size: 1.5rem !important; }
  h2 { font-size: 1.2rem !important; }
  .container { padding: 0.75rem !important; }
  table { font-size: 0.7rem !important; }
  .pro-gate { padding: 1rem !important; }
}
/* Accessibility improvements (Loop 21) */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
:focus:not(:focus-visible) { outline: none; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

.skip-link:focus { top: 0; }
[aria-hidden="true"] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

.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; }
/* === Mobile touch improvements (Round 3) === */

@media (max-width: 768px) {
  .container { padding: 1rem 0.6rem; }
  .hero h1 { font-size: 1.5rem; }
  .btn { padding: 0.6rem 1rem; font-size: 0.85rem; min-height: 44px; }
  .pro-gate { padding: 1.25rem; }
  .card { padding: 1rem; }
  textarea { font-size: 16px; }  /* Prevent iOS zoom on focus */
  .result-grid { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  table { font-size: 0.75rem; }
  .payment-qr img { width: 100px; height: 100px; }
  .hero-section h1 { font-size: 1.8rem; }
}

@media (max-width: 480px) {
  .hero h1 { font-size: 1.25rem; }
  .hero p { font-size: 0.85rem; }
  .result-grid { grid-template-columns: 1fr; }
  .btn-row { flex-direction: column; }
  .btn-row .btn { width: 100%; }
  .score-circle { width: 80px; height: 80px; font-size: 1.5rem; }
  .stat .num { font-size: 1.2rem; }
  .pro-gate { padding: 1rem; border-radius: 8px; }
  .hero-section { padding: 1rem 0; }
  .hero-section h1 { font-size: 1.4rem; }
  .hero-cta { width: 100%; text-align: center; }
  .payment-qr img { width: 90px; height: 90px; }
  .cross-tools { padding: 0.75rem; }
}
/* Touch-friendly: larger tap targets */
button, .btn, a.btn, [role="button"] { min-height: 44px; min-width: 44px; cursor: pointer; }
/* Smooth scrolling for anchor links */
html { scroll-behavior: smooth; }
/* Print styles */

@media print {
  body { background: #fff; color: #000; }
  .pro-gate, .btn, footer, nav, .badge-row { display: none; }
  .card { border: 1px solid #ccc; background: #fff; }
}

@media(max-width:768px){
  .container{padding:1rem 0.75rem}
  .hero-section h1{font-size:1.8rem}
  .hero-section .hero-sub{font-size:1rem}
  .grid{grid-template-columns:1fr}
  .testimonial-row{grid-template-columns:1fr}
  .blog-preview{grid-template-columns:1fr}
  .hero-section{padding:1.5rem 0 1rem}
  .trust-strip{gap:1rem;font-size:0.75rem}
  .section-title{font-size:1.2rem;margin:2rem 0 1rem}
  header nav{flex-wrap:wrap;gap:0.5rem;justify-content:center}
  header nav a{font-size:0.8rem;padding:0.3rem 0.6rem}
  footer{font-size:0.7rem;padding:1.5rem 0}
  .card{padding:1rem}
  .card .icon{font-size:1.5rem}
  .card h2{font-size:0.95rem}
  .card p{font-size:0.75rem}
  .pricing-grid{grid-template-columns:1fr}
  .compare-table{font-size:0.75rem}
  .compare-table th,.compare-table td{padding:0.5rem}
  table{display:block;overflow-x:auto}
  h1{font-size:1.6rem}
  h2{font-size:1.2rem}
  h3{font-size:1rem}
  .text-lg{font-size:1rem}
  .score-ring{width:100px;height:100px}
  .score-ring svg{width:100px;height:100px}
  .score-ring .score-text{font-size:1.5rem}
  .payment-row{flex-direction:column;align-items:center}
  .modal-content{width:95%;margin:1rem;padding:1rem}
  .two-col{grid-template-columns:1fr}
  .three-col{grid-template-columns:1fr}
  .wiz-role-grid{grid-template-columns:1fr}
  .onboard-btns{flex-direction:column}
  #onboarding-tooltip{max-width:90vw;padding:1rem}
}
@media(max-width:480px){
  .hero-section h1{font-size:1.5rem}
  .hero-cta{padding:0.6rem 1.5rem;font-size:0.9rem}
  .card{padding:0.8rem}
  .tag{font-size:0.65rem}
  table{font-size:0.7rem}
  .badge-share-row{flex-direction:column;gap:0.5rem}
}

/* Mobile nav hamburger */
.mobile-nav-toggle{display:none;background:none;border:none;color:var(--text);font-size:1.5rem;cursor:pointer;padding:0.25rem}
@media(max-width:768px){
  .mobile-nav-toggle{display:block}
  .desktop-nav{display:none;flex-direction:column;width:100%;text-align:center;padding-top:0.5rem}
  .desktop-nav.show{display:flex}
}


/* === R4: Mobile responsive nav === */
@media (max-width: 768px) {
  .nav-links { display: none; flex-direction: column; width: 100%; background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem; margin-top: 0.5rem; }
  .nav-links.show { display: flex; }
  .nav-links a { display: block; padding: 0.5rem; border-bottom: 1px solid var(--border); font-size: 0.85rem; }
  .nav-links a:last-child { border-bottom: none; }
  .hamburger { display: inline-block !important; background: none; border: 1px solid var(--border); color: var(--text); font-size: 1.2rem; padding: 0.3rem 0.6rem; border-radius: 6px; cursor: pointer; }
  .steps-row { flex-direction: column; }
  textarea { font-size: 0.85rem !important; }
  .badge-row { flex-wrap: wrap; gap: 0.3rem; }
  .payment-row { flex-direction: column; align-items: center; }
  .payment-col { max-width: 100% !important; }
}
@media (min-width: 769px) {
  .hamburger { display: none !important; }
  .nav-links { display: flex !important; }
}

/* === Mobile refinements: extra-small screens === */
@media (max-width: 380px) {
  .pro-gate .payment-col { padding: 0.4rem !important; }
  .pro-gate h3 { font-size: 0.9rem !important; }
  .blur-cta .unlock-btn { font-size: 0.85rem !important; padding: 0.5rem 1.2rem !important; width: 100% !important; text-align: center !important; display: block !important; }
  .payment-qr { padding: 0.5rem !important; }
  #paypal-button-container { min-width: 100% !important; }
  .pro-gate .license-input { flex-direction: column !important; gap: 0.4rem !important; }
  .pro-gate .license-input input { width: 100% !important; }
}

/* === Blur overlay: ensure CTA is prominent on mobile === */
@media (max-width: 480px) {
  .blur-overlay-wrap .blur-cta { padding: 0.6rem !important; }
  .blur-overlay-wrap .blur-cta p { font-size: 0.82rem !important; margin-bottom: 0.5rem !important; }
  .blur-overlay-wrap .blur-cta .unlock-btn { font-size: 0.9rem !important; padding: 0.5rem 1.5rem !important; }
}

/* === Payment: QR codes stack cleanly on mobile === */
@media (max-width: 500px) {
  .payment-row { gap: 0.5rem !important; }
  .payment-col { min-width: 100% !important; max-width: 100% !important; }
  .payment-qr img { width: 120px !important; height: 120px !important; }
}

/* Loading state for buttons */
.btn.loading {
  pointer-events: none;
  opacity: 0.7;
  position: relative;
  color: transparent !important;
}
.btn.loading::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(255,255,255,0.2);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btn-spin 0.6s linear infinite;
}
@keyframes btn-spin {
  to { transform: rotate(360deg); }
}