/* ---------- style.css (AccessHero - accessiBe inspired) ---------- */

/* Variables / Theme */
:root{
  --brand: #0066FF;
  --accent: #00C2B8;
  --bg: #FFFFFF;
  --muted-bg: #F7F9FC;
  --text: #0B0B0B;
  --muted: #556170;
  --card: #FFFFFF;
  --radius: 12px;
  --shadow: 0 8px 30px rgba(3, 15, 30, 0.08);
  --focus: 3px solid rgba(0,102,255,0.18);
  --max-width: 1200px;
}

/* Reset & base */
* { box-sizing: border-box; }
html,body { height:100%; }
body{
  margin:0;
  font-family:Inter, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--muted-bg);
  color: var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  font-size:16px;
}

/* Skip link */
.skip-link{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;height:1px;
  overflow:hidden;
}
.skip-link:focus{
  left:16px; top:16px;
  width:auto;height:auto;
  padding:10px 14px;
  background:var(--brand); color:#fff; border-radius:6px;
  z-index:10000;
}

/* Container */
.container{ max-width:var(--max-width); margin:0 auto; padding:0 20px; }

/* Navbar */
.header{
  background:var(--bg);
  border-bottom:1px solid #E6EEF8;
  position:sticky; top:0; z-index:60;
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:16px 0;
}
.logo{ font-weight:800; font-size:1.4rem; color:var(--text); text-decoration:none; display:inline-flex; align-items:center; gap:8px; }
.logo .mark{ display:inline-block; width:36px; height:36px; border-radius:8px; background:linear-gradient(135deg,var(--brand),var(--accent)); box-shadow:0 4px 12px rgba(0,102,255,0.12); }
.nav{ display:flex; gap:12px; align-items:center; }
.nav a{ color:var(--text); padding:8px 10px; border-radius:8px; font-weight:600; text-decoration:none; }
.nav a[aria-current="page"]{ color:var(--brand); }
.nav a:focus, .nav a:hover{ background:rgba(0,102,255,0.06); outline:none; }

/* Primary CTA */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 18px; border-radius:10px; cursor:pointer; border:none; font-weight:700;
}
.btn-primary{ background:linear-gradient(90deg,var(--brand),var(--accent)); color:#fff; box-shadow:0 8px 20px rgba(3,15,30,0.08); }
.btn-secondary{ background:#fff; color:var(--brand); border:2px solid rgba(0,102,255,0.06); }
.btn:focus{ outline:var(--focus); outline-offset:3px; }

/* Hero */
.hero{
  background: linear-gradient(120deg, rgba(0,102,255,0.95), rgba(0,194,184,0.9));
  color:#fff;
  padding:88px 0 64px;
}
.hero .hero-inner{ display:flex; gap:40px; align-items:center; justify-content:space-between; }
.hero .left{ flex:1; }
.hero h1{ margin:0 0 12px; font-size:clamp(2rem,4.5vw,3.25rem); line-height:1.05; font-weight:800; }
.hero p{ margin:0 0 20px; color:rgba(255,255,255,0.9); font-size:1.0625rem; max-width:68ch; }
.hero .hero-actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* Hero visual */
.hero-art{ flex:1; max-width:520px; display:flex; justify-content:center; align-items:center; }
.hero-art .card{
  width:100%; border-radius:16px; padding:18px; background:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  box-shadow:0 10px 30px rgba(0,0,0,0.12); color:#fff;
}

/* Sections */
.section{ padding:72px 0; background:var(--muted-bg); }
.section.white{ background:var(--bg); }

/* Grid utilities */
.grid{ display:grid; gap:24px; }
.grid.cols-3{ grid-template-columns: repeat(3, 1fr); }
.grid.cols-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width:960px){ .grid.cols-3{ grid-template-columns: repeat(2, 1fr); } .grid.cols-4{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width:680px){ .grid.cols-3, .grid.cols-4{ grid-template-columns: 1fr; } .hero .hero-inner{ flex-direction:column; } }

/* Card (features/pricing) */
.card{
  background:var(--card);
  border-radius: var(--radius);
  padding:28px;
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
  transition: transform .22s ease, box-shadow .22s ease;
}
.card:hover{ transform:translateY(-6px); box-shadow: 0 18px 40px rgba(3,15,30,0.12); }
.card .icon{ width:56px; height:56px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; font-size:20px; margin-bottom:12px; background:linear-gradient(135deg,var(--brand),var(--accent)); color:#fff; }

/* Pricing Card Titles - match home page style */
.plan-title {
  font-size: 1.5rem;               /* slightly larger than normal text */
  font-weight: 800;                /* bold, like hero titles */
  margin-bottom: 8px;              /* spacing below the title */
  background: linear-gradient(135deg, var(--brand), var(--accent)); /* gradient text like home page */
  -webkit-background-clip: text;   /* make gradient apply to text */
  -webkit-text-fill-color: transparent; /* hide original text color */
}

/* Pricing specifics */
.pricing-grid{ display:grid; gap:24px; grid-template-columns: repeat(3, 1fr); }
@media (max-width:960px){ .pricing-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width:680px){ .pricing-grid{ grid-template-columns: 1fr; } }
.pricing-card{ padding:28px; min-height:280px; display:flex; flex-direction:column; justify-content:space-between; border:1px solid #EEF6FF; }
.pricing-card.recommended{ border-top:4px solid var(--brand); transform:translateY(-4px); box-shadow:0 20px 40px rgba(0,102,255,0.08); }
.price{ font-size:2rem; font-weight:800; color:var(--brand); margin:14px 0; }

/* PayPal wrapper */
.paypal-wrap{ display:inline-block; border-radius:10px; padding:4px; background:linear-gradient(90deg,var(--brand),var(--accent)); }
.paypal-wrap iframe{ border-radius:8px !important; }

/* Forms */
.form{ background:var(--bg); padding:24px; border-radius:12px; box-shadow:var(--shadow); }
.form label{ display:block; margin-bottom:8px; font-weight:600; color:var(--text); }
.input, textarea, select{ width:100%; padding:12px 14px; border-radius:10px; border:1px solid #E6EEF8; font-size:1rem; margin-bottom:14px; }
.input:focus, textarea:focus, select:focus{ outline:var(--focus); outline-offset:2px; }
 /* ----------------------
       Minimal Accessibility Fixes
       - WCAG 2 AA contrast
       - Heading order
       - Landmark usage
    ---------------------- */

    /* Ensure body text is high contrast */
    body.pricing-page,
    body.pricing-page p,
    body.pricing-page h1,
    body.pricing-page h2,
    body.pricing-page h3,
    body.pricing-page p1,
    body.pricing-page .price,
    body.pricing-page .plan-title {
      color: #222; /* dark gray for readability */
    }

    /* Hero section contrast */
    .hero {
      background-color: #f9f9f9; /* subtle light background */
      color: #222;
      text-align: center;
      padding: 3rem 1rem;
    }

    .hero h1 {
      font-size: 2.5rem;
    }

    .hero p1 {
      display: block; /* replace <p1> with proper block display */
      font-size: 1.2rem;
      color: #222;
    }

    /* Cards */
   /* Plan card text */
.pricing-card,
.pricing-card p,
.pricing-card .price,
.pricing-card .plan-title {
  color: #222; /* dark enough for WCAG AA */
}.pricing-card .price {
      font-weight: bold;
      font-size: 1.5rem;
      color: #111;
    }

    /* Ensure buttons are high contrast (PayPal is mostly compliant) */
    .paypal-button-container {
      margin-top: 1rem;
    }

    /* Heading order fix: wrap main content in <main> landmark */
    main.section.white h2 {
      margin-top: 0;
      font-size: 2rem;
      color: #222;
    }

   /* Buttons focus state (keyboard users) */
button:focus,
a:focus {
  outline: 3px solid #ffbf47;
  outline-offset: 2px;
}

    
/* Scanner / second block styling */
.scan-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid #E6EEF8;
  padding: 32px 28px;
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.scan-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(3,15,30,0.12);
}
.scan-card form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 18px;
}
.scan-card input[type="url"],
.scan-card input[type="text"] {
  flex: 1;
  min-width: 240px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid #E6EEF8;
  font-size: 1rem;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.02);
  transition: border-color .2s ease;
}
.scan-card input:focus {
  border-color: var(--brand);
  outline: var(--focus);
  outline-offset: 2px;
}
.scan-card .btn-primary {
  padding: 14px 22px;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--brand), var(--accent));
  color: #fff;
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(3,15,30,0.08);
  transition: box-shadow .2s ease, transform .2s ease;
}
.scan-card .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0,102,255,0.15);
}

/* Footer */
.footer{ background: #071634; color:#fff; padding:40px 0; text-align:center; }
.footer a{ color:rgba(255,255,255,0.9); text-decoration:none; }

/* Utilities */
.text-center{ text-align:center; }
.kv{ display:flex; gap:16px; align-items:center; justify-content:center; }
.small{ font-size:.9rem; color:var(--muted); }

/* Accessibility */
:focus{ outline:none; }
:focus-visible{ outline:var(--focus); outline-offset:3px; }

/* small screens */
@media (max-width:560px){
  .nav{ display:none; } /* keep simple for now */
  .hero .hero-inner{ padding:0 8px; }
  .scan-card form{ flex-direction: column; }
}

/* --- Scan Page Styling --- */
.scan-section {
  padding: 4rem 2rem;
  background: #f9fbfc;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.scan-section .card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
  width: 100%;
  max-width: 1200px;
}

.scan-card, .results-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  padding: 2rem;
  transition: transform 0.2s ease;
}

.scan-card:hover, .results-card:hover {
  transform: translateY(-5px);
}

.scan-input {
  width: 100%;
  padding: 0.8rem 1rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.primary-btn {
  background: #007bff;
  color: #fff;
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.2s ease;
}

.primary-btn:hover {
  background: #0056cc;
}

.results-content {
  min-height: 150px;
  font-size: 0.95rem;
}

.grade-box {
  background: #eef6ff;
  border-left: 6px solid #007bff;
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.grade {
  font-weight: bold;
  font-size: 1.4rem;
}

.grade.A { color: #2ecc71; }
.grade.B { color: #27ae60; }
.grade.C { color: #f1c40f; }
.grade.D { color: #e67e22; }
.grade.F { color: #e74c3c; }

.violations-list {
  list-style: none;
  padding: 0;
  margin-top: 1rem;
}

.violations-list li {
  background: #f8f9fa;
  margin-bottom: 0.6rem;
  padding: 0.8rem 1rem;
  border-radius: 6px;
  line-height: 1.4;
}
/* --- Scan Page Enhancements --- */
.scan-section {
  padding: 4rem 2rem;
  background: #f9fbfc;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
  width: 100%;
  max-width: 1200px;
}

.scan-card, .results-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  padding: 2rem;
  transition: transform 0.25s ease;
}

.scan-card:hover, .results-card:hover {
  transform: translateY(-5px);
}

.scan-input {
  width: 100%;
  padding: 0.8rem 1rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.primary-btn {
  background: #007bff;
  color: #fff;
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.2s ease, transform 0.2s ease;
}

.primary-btn:hover {
  background: #0056cc;
  transform: scale(1.03);
}

.grade-box {
  background: #eef6ff;
  border-left: 6px solid #007bff;
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.grade {
  font-weight: bold;
  font-size: 1.4rem;
}
.grade.A { color: #2ecc71; }
.grade.B { color: #27ae60; }
.grade.C { color: #f1c40f; }
.grade.D { color: #e67e22; }
.grade.F { color: #e74c3c; }

.violations-list {
  list-style: none;
  padding: 0;
  margin-top: 1rem;
}
.violations-list li {
  background: #f8f9fa;
  margin-bottom: 0.6rem;
  padding: 0.8rem 1rem;
  border-radius: 6px;
  line-height: 1.4;
}

/* Animation for results fade-in */
.results-card {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.results-card.show {
  opacity: 1;
  transform: translateY(0);
}
/* ----------------------------
   Auth Page (Login / Signup)
-----------------------------*/
.auth-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3rem 1rem;
}

.auth-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  max-width: 420px;
  width: 100%;
  padding: 2.5rem 2rem;
  text-align: center;
}

.auth-title {
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  color: var(--text-primary, #111);
}

.auth-card input {
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 1rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 1rem;
}

.auth-card input:focus {
  border-color: #007bff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,123,255,0.15);
}

.auth-card button {
  width: 100%;
  padding: 12px;
  font-size: 1rem;
  border-radius: 8px;
  margin-top: 0.5rem;
}

.switch-auth {
  margin-top: 1rem;
  font-size: 0.95rem;
}

.switch-auth a {
  color: #007bff;
  text-decoration: none;
  font-weight: 500;
}

.switch-auth a:hover {
  text-decoration: underline;
}

.login-message {
  margin-top: 1rem;
  font-size: 0.9rem;
}
/* ============================
   Auth & Contact Page Cards
   Match header gradient (static)
============================ */
.auth-card,
.contact-card,
.feature-card.free, /* login/signup/scan boxes */
.feature-card.starter {
  background: linear-gradient(135deg, var(--brand), var(--accent)); /* matches header gradient */
  color: #fff !important;
  border: none;
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
  border-radius: 18px;
  padding: 40px 30px;
}

/* Inputs inside gradient cards */
.auth-card input,
.contact-card input,
.contact-card textarea,
.feature-card.free input,
.feature-card.free textarea {
  background: #fff;
  color: #333;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 1rem;
  width: 100%;
  margin-bottom: 15px;
}

.auth-card input::placeholder,
.contact-card input::placeholder,
.contact-card textarea::placeholder {
  color: #666;
}

/* Buttons over rainbow background */
.auth-card button,
.contact-card button {
  background-color: #000;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 12px 20px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.3s ease;
}

.auth-card button:hover,
.contact-card button:hover {
  background-color: #333;
}

 /* ----------------------
       Accessibility tweaks
       - Keep layout & colors
       - WCAG AA compliant
    ---------------------- */

    body.scan-page {
      background-color: #fff; /* white page background */
      color: #222; /* high contrast dark text */
    }

    /* Hero section */
    .hero {
      background-color: #f9f9f9; /* subtle light background */
      color: #222;
      text-align: center;
      padding: 3rem 1rem;
    }

    .hero h1 {
      font-size: 2.5rem;
      text-shadow: 0 0 2px rgba(0,0,0,0.2); /* improve light text contrast */
    }

    .hero p {
      font-size: 1.2rem;
      line-height: 1.5;
      color: #333;
    }

    /* Scan card and results */
    .card {
      background-color: #fff; /* keep white */
      color: #222; /* high contrast text */
      border-radius: 12px;
      padding: 2rem;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      margin-bottom: 2rem;
    }

    .scan-section {
      display: flex;
      flex-wrap: wrap;
      gap: 2rem;
      justify-content: center;
      padding: 3rem 1rem;
    }

    .scan-card, .results-card {
      flex: 1 1 400px;
      max-width: 500px;
    }

    input.scan-input {
      width: 100%;
      padding: 0.75rem 1rem;
      font-size: 1rem;
      margin-top: 1rem;
      border: 1px solid #ccc;
      border-radius: 6px;
      color: #222;
      background-color: #fff;
    }

    input.scan-input::placeholder {
      color: #555; /* readable placeholder */
      opacity: 1;
    }

    /* Buttons */
    .primary-btn {
      background-color: #005fcc;
      color: #fff;
      border: none;
      padding: 0.75rem 1.5rem;
      font-size: 1rem;
      border-radius: 6px;
      cursor: pointer;
      margin-top: 1rem;
    }

    .primary-btn:hover,
    .primary-btn:focus {
      background-color: #004bb5;
      outline: 3px solid #ffbf47; /* visible focus */
      outline-offset: 2px;
    }

    /* Results section */
    .results-card[aria-live] {
      min-height: 200px;
    }

    .results-content p {
      color: #222;
    }

    .violations-list li {
      margin-bottom: 0.5rem;
      color: #222;
    }

    .grade-box h3, .grade-box p {
      color: #222;
    }

    /* Responsive layout */
    @media (max-width: 768px) {
      .scan-section {
        flex-direction: column;
        align-items: center;
      }
    }
/* ==========================================
   ACCESSHERO – WCAG 2 AA Contrast Fixes
   (Tiny adjustments, visually identical)
   ========================================== */

   body, p, .pricing-card p, .plan-description, .footer p {
    color: #333 !important; /* slightly darker text */
  }
  
  h1, h2, h3, .plan-title {
    color: #111 !important; /* stronger headline contrast */
  }
  
  .primary-btn, .pricing-card button {
    color: #fff !important;
    background-color: #0066cc !important; /* passes contrast on white */
  }
  
  .secondary-btn {
    color: #fff !important;
    background-color: #555 !important;
  }
  
  .pricing-card {
    background-color: #ffffff !important;
    border: 1px solid #e0e0e0;
  }
  
  /* Primary buttons – WCAG 2 AA compliant */
.primary-btn, .pricing-card button {
  color: #ffffff !important;
  background-color: #1a5fd1 !important; /* slightly darker than original brand blue */
  border: none;
  transition: background-color 0.2s ease;
}

.primary-btn:hover, .pricing-card button:hover {
  background-color: #154ba0 !important; /* hover effect */
}
.footer {
  background-color: #f8f8f8 !important; /* light grey background */
  color: #333 !important;              /* keeps the dark text for readability */
}
/* Consistent header styling for pricing page */
.pricing-page h1 {
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; /* same as home/scan */
  font-weight: 700;
  font-size: 3rem;   /* adjust to match your home page hero size */
  line-height: 1.2;
  color: #1a1a1a;    /* ensures WCAG contrast */
  margin-bottom: 1rem;
}

/* Footer contrast fix */
.footer p {
  color: #fff; /* light text on dark background */
}

/* Hero h1 font-size & contrast */
.pricing-page h1 {
  font-size: 3rem; /* match home/scan pages */
  color: #111;
}

/* Card price & titles contrast check */
.pricing-card .price,
.pricing-card .plan-title {
  color: #111; /* ensures high contrast on white background */
}

/* Gradient Hero */
.hero.gradient {
  background: linear-gradient(135deg, #0070f3 0%, #00d1ff 100%);
  color: #fff;
  padding: 4rem 1rem;
}

.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.hero p {
  font-size: 1.2rem;
}

/* Scan Section */
.scan-grid {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

.scan-card {
  background-color: #fefefe;
  border-radius: 12px;
  padding: 2rem;
  width: 350px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.scan-card input {
  width: 100%;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 1rem;
}

.scan-card button.btn-primary {
  padding: 0.75rem 1.5rem;
  background-color: #0070f3;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s;
}

.scan-card button.btn-primary:hover {
  background-color: #005bb5;
}

/* Floating Response */
.floating-response {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 6px;
  background-color: #fff3cd;
  color: #856404;
  font-weight: bold;
  display: inline-block;
  transition: opacity 0.3s;
  opacity: 0;
}

.floating-response.active {
  opacity: 1;
}

/* Header */
header.header {
  background-color: #fff;
  padding: 1rem 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header .logo {
  font-size: 1.5rem;
  font-weight: bold;
  color: #111;
  text-decoration: none;
}

.header .nav a {
  margin-left: 1.5rem;
  font-size: 1rem;
  color: #111;
  text-decoration: none;
  transition: color 0.2s;
}

.header .nav a:hover,
.header .nav a:focus {
  color: #0070f3;
}

/* Footer */
.footer {
  text-align: center;
  padding: 2rem 1rem;
  background-color: #111;
  color: #fff;
}

/* Accessibility focus outline */
a:focus,
button:focus,
input:focus {
  outline: 3px solid #ffbf47;
  outline-offset: 2px;
}
/* Gradient Hero */
.hero.gradient {
  background: linear-gradient(135deg, #0070f3 0%, #00d1ff 100%);
  color: #fff;
  padding: 4rem 1rem;
  text-align: center;
}

.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.hero p {
  font-size: 1.2rem;
}

/* Scan Layout: Two Columns */
.scan-layout {
  display: flex;
  gap: 2rem;
  justify-content: center;
  margin-top: 2rem;
  flex-wrap: wrap;
}

/* Left: Input */
.scan-input {
  flex: 1;
  min-width: 280px;
  max-width: 400px;
  background-color: #fefefe;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  text-align: center;
}

.scan-input input {
  width: 100%;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 1rem;
}

.scan-input button.btn-primary {
  padding: 0.75rem 1.5rem;
  background-color: #0070f3;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s;
}

.scan-input button.btn-primary:hover {
  background-color: #005bb5;
}

/* Right: Floating Result */
.scan-result {
  flex: 1;
  min-width: 280px;
  max-width: 500px;
  background-color: #fff3cd;
  color: #856404;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  font-weight: bold;
}

.floating-grade {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.floating-issues ul {
  list-style: inside disc;
  padding-left: 0;
}

.floating-issues li {
  margin-bottom: 0.5rem;
}

/* Header */
header.header {
  background-color: #fff;
  padding: 1rem 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header .logo {
  font-size: 1.5rem;
  font-weight: bold;
  color: #111;
  text-decoration: none;
}

.header .nav a {
  margin-left: 1.5rem;
  font-size: 1rem;
  color: #111;
  text-decoration: none;
}

.header .nav a:hover,
.header .nav a:focus {
  color: #0070f3;
}

/* Footer */
.footer {
  text-align: center;
  padding: 2rem 1rem;
  background-color: #111;
  color: #fff;
}

/* Accessibility focus outline */
a:focus,
button:focus,
input:focus {
  outline: 3px solid #ffbf47;
  outline-offset: 2px;
}
/* Right: Floating Result — match left box */
.scan-result {
  flex: 1;
  min-width: 280px;
  max-width: 500px;
  background-color: #fefefe;      /* same as left box */
  color: #111;                     /* dark text for contrast */
  padding: 2rem;
  border-radius: 12px;             /* same rounded corners */
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* same shadow */
  font-weight: normal;             /* match left box text weight */
}

/* Keep grade and issues nicely styled */
.floating-grade {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.floating-issues ul {
  list-style: inside disc;
  padding-left: 0;
}

.floating-issues li {
  margin-bottom: 0.5rem;
  font-size: 1rem;
}
/* Grade Text Color Coding */
.floating-grade {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

/* Specific grades */
.grade-A, .grade-A-plus { color: #28a745; }       /* Green */
.grade-B { color: #8bc34a; }                     /* Light Green */
.grade-C { color: #ffc107; }                     /* Yellow */
.grade-D { color: #fd7e14; }                     /* Orange */
.grade-F { color: #dc3545; }                     /* Red */
/* Floating scan result box */
.scan-result {
  position: fixed;
  top: 20%;
  right: -400px; /* hidden initially offscreen */
  width: 350px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  padding: 1.5rem;
  transition: right 0.5s ease-in-out, opacity 0.5s ease-in-out;
  opacity: 0;
  z-index: 9999;
}

/* Show class triggers slide in */
.scan-result.show {
  right: 20px;
  opacity: 1;
}

/* Grade styling */
.floating-grade {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

.grade-A, .grade-A-plus { color: #28a745; }   /* Green */
.grade-B { color: #8bc34a; }                 /* Light Green */
.grade-C { color: #ffc107; }                 /* Yellow */
.grade-D { color: #fd7e14; }                 /* Orange */
.grade-F { color: #dc3545; }                 /* Red */

/* Issue list */
.floating-issues ul {
  padding-left: 1rem;
  margin: 0;
}

.floating-issues li {
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}
/* Fixed grade badge in bottom right */
.grade-badge {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #fff;
  padding: 1rem 1.5rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  max-width: 350px;
  z-index: 1000;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s ease-out;
}

/* Show badge */
.grade-badge:not([hidden]) {
  opacity: 1;
  transform: translateY(0);
}

/* Grade colors */
.grade-A .floating-grade { color: #2ecc71; }
.grade-B .floating-grade { color: #27ae60; }
.grade-C .floating-grade { color: #f1c40f; }
.grade-D .floating-grade { color: #e67e22; }
.grade-F .floating-grade { color: #e74c3c; }

.floating-issues ul {
  padding-left: 1rem;
  margin: 0.5rem 0 0 0;
}

.floating-issues li {
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}
/* Scan Page Layout */
.scan-section {
  display: flex;
  justify-content: flex-start;
  gap: 2rem;
  flex-wrap: wrap;
}

/* Scan Box */
.scan-box {
  background-color: #fefefe;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  width: 350px;
}

.scan-box h2 {
  margin-bottom: 1rem;
  font-size: 1.5rem;
  color: #111;
}

.scan-box input {
  width: 100%;
  padding: 0.75rem;
  margin-bottom: 1rem;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 1rem;
}

.scan-box button {
  width: 100%;
  padding: 0.75rem;
  background-color: #0070f3;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
}

.scan-box button:hover {
  background-color: #005bb5;
}

.scan-status {
  margin-top: 0.5rem;
  font-weight: bold;
  color: #111;
}

/* Fixed grade badge in bottom right */
.grade-badge {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #fff;
  padding: 1rem 1.5rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  max-width: 350px;
  z-index: 1000;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s ease-out;
}

/* Show badge */
.grade-badge:not([hidden]) {
  opacity: 1;
  transform: translateY(0);
}

/* Grade colors */
.grade-A .floating-grade { color: #2ecc71; }
.grade-B .floating-grade { color: #27ae60; }
.grade-C .floating-grade { color: #f1c40f; }
.grade-D .floating-grade { color: #e67e22; }
.grade-F .floating-grade { color: #e74c3c; }

.floating-issues ul {
  padding-left: 1rem;
  margin: 0.5rem 0 0 0;
}

.floating-issues li {
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}
/* Scan page matches home page look */
.hero {
  background-color: #f9f9f9;
  color: #111;
  text-align: center;
  padding: 3rem 1rem;
}

.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.hero p {
  font-size: 1.2rem;
}

/* Side-by-side layout for scan and grade */
.scan-layout {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 2rem;
  margin-top: 2rem;
}

/* Scan card (left) */
.scan-card {
  background-color: #fff;
  color: #111;
  border-radius: 12px;
  padding: 2rem;
  width: 400px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  top: 200px; /* aligned with scan box */
  left: 80px;
}


.scan-card input {
  width: 100%;
  padding: 0.75rem;
  margin: 1rem 0;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 1rem;
}

.scan-card button {
  padding: 0.75rem 1rem;
  background-color: #0070f3;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
}

.scan-card button:hover {
  background-color: #005bb5;
}

.scan-status {
  margin-top: 1rem;
  font-weight: bold;
  color: #111;
}



.grade-badge:not([hidden]) {
  opacity: 1;
  transform: translateY(0);
}

/* Grade colors */
.grade-A .floating-grade { color: #2ecc71; font-weight: bold; }
.grade-B .floating-grade { color: #27ae60; font-weight: bold; }
.grade-C .floating-grade { color: #f1c40f; font-weight: bold; }
.grade-D .floating-grade { color: #e67e22; font-weight: bold; }
.grade-F .floating-grade { color: #e74c3c; font-weight: bold; }

.floating-issues ul {
  padding-left: 1rem;
  margin-top: 0.5rem;
}

.floating-issues li {
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

/* Scan card (left) */
.scan-card {
  background-color: #fff;
  color: #111;
  border-radius: 12px;
  padding: 2rem;
  width: 400px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);

}
/* Hero */
.hero {
  background-color: #f9f9f9;
  color: #111;
  text-align: center;
  padding: 3rem 1rem;
}

.hero h1 { font-size: 2.5rem; margin-bottom: 1rem; }
.hero p { font-size: 1.2rem; }

/* Scan layout side-by-side */
.scan-layout {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 2rem;
  margin-top: 2rem;
}

/* Scan card (left) */
.scan-card, .grade-card {
  background-color: #fff;
  color: #111;
  border-radius: 12px;
  padding: 2rem;
  width: 400px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.scan-card input {
  width: 100%;
  padding: 0.75rem;
  margin: 1rem 0;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 1rem;
}

.scan-card button {
  padding: 0.75rem 1rem;
  background-color: #0070f3;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
}

.scan-card button:hover {
  background-color: #005bb5;
}

.scan-status {
  margin-top: 1rem;
  font-weight: bold;
}

/* Grade card */
.grade-card ul {
  padding-left: 1rem;
  margin-top: 0.5rem;
}

.grade-card li {
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

/* Grade colors */
.grade-A { border-left: 6px solid #2ecc71; }
.grade-B { border-left: 6px solid #27ae60; }
.grade-C { border-left: 6px solid #f1c40f; }
.grade-D { border-left: 6px solid #e67e22; }
.grade-F { border-left: 6px solid #e74c3c; }
/* Scan Layout - side by side */
.scan-layout {
  display: flex;
  justify-content: space-between; /* left/right alignment */
  align-items: flex-start;
  gap: 2rem;
  max-width: 1000px;
  margin: 2rem auto;
}

/* Scan and Grade Cards */
.scan-card, .grade-card {
  background-color: #fff;
  color: #111;
  border-radius: 12px;
  padding: 2rem;
  width: 400px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Grade Badge */
.grade-badge {
  font-size: 2rem;
  font-weight: bold;
  color: #fff;
  text-align: center;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
}

/* Status Text */
.scan-status {
  margin-top: 1rem;
  font-weight: bold;
}

/* Input & Button */
.scan-card input[type="text"] {
  width: 100%;
  padding: 0.75rem;
  margin-bottom: 1rem;
  font-size: 1rem;
  border-radius: 8px;
  border: 1px solid #ccc;
}

.scan-card button {
  width: 100%;
  padding: 0.75rem;
  font-size: 1rem;
  border: none;
  border-radius: 8px;
  background-color: #0070f3;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s;
}

.scan-card button:hover {
  background-color: #005bb5;
}
 /* --- Container Layout --- */
    .scan-page-container {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      padding: 2rem;
      max-width: 1200px;
      margin: 0 auto;
      gap: 2rem;
    }

    /* --- Scan Box --- */
    .scan-box {
      flex: 1;
      background-color: #fff;
      border-radius: 12px;
      padding: 2rem;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .scan-box input {
      padding: 0.75rem 1rem;
      font-size: 1rem;
      border-radius: 6px;
      border: 1px solid #ccc;
      width: 100%;
    }

    .scan-box button {
      padding: 0.75rem 1rem;
      font-size: 1rem;
      border-radius: 6px;
      border: none;
      background-color: #0070f3;
      color: #fff;
      cursor: pointer;
      transition: background 0.2s;
    }

    .scan-box button:hover {
      background-color: #005bb5;
    }

    /* --- Grade Box --- */
    .grade-box {
      width: 220px;
      min-height: 120px;
      background-color: #fff;
      border-radius: 12px;
      padding: 1rem;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      text-align: center;
      display: none; /* hidden until scan completes */
      flex-shrink: 0;
    }

    .grade-box h3 {
      margin-bottom: 1rem;
    }

    .grade-badge {
      font-size: 2rem;
      font-weight: bold;
      border-radius: 8px;
      padding: 0.5rem 1rem;
      color: #fff;
      display: inline-block;
      margin-bottom: 0.5rem;
    }

    .grade-details {
      font-size: 0.9rem;
      color: #111;
      text-align: left;
      max-height: 180px;
      overflow-y: auto;
    }

    /* --- Status --- */
    .status {
      margin-top: 1rem;
      font-weight: bold;
      color: #111;
    }

    /* --- Color-coded grades --- */
    .grade-A { background-color: #28a745; } /* Green */
    .grade-B { background-color: #8bc34a; } /* Light Green */
    .grade-C { background-color: #ffc107; } /* Yellow */
    .grade-D { background-color: #fd7e14; } /* Orange */
    .grade-F { background-color: #dc3545; } /* Red */

    /* Responsive */
    @media (max-width: 768px) {
      .scan-page-container {
        flex-direction: column;
        align-items: stretch;
      }

      .grade-box {
        width: 100%;
        margin-top: 1rem;
      }
    }
    /* =================================
   PRICING PAGE — MATCH HOME PAGE
   Gradient cards + vibrant theme
================================== */

/* Pricing section background matches home page */
body.pricing-page .section.white {
  background: var(--muted-bg);
}

/* Pricing cards match home page feature cards */
.pricing-card {
  background: linear-gradient(135deg, var(--brand), var(--accent)) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  border-radius: 18px;
  padding: 32px 28px;
  transition: transform .22s ease, box-shadow .22s ease;
}

/* Hover effect identical to home page cards */
.pricing-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.18);
}

/* Pricing plan title – gradient text removed (replace with white) */
.pricing-card .plan-title {
  background: none !important;
  -webkit-text-fill-color: #fff !important;
  color: #fff !important;
}

/* Price text white */
.pricing-card .price {
  color: #fff !important;
  font-weight: 900;
}

/* List items become bright & readable */
.pricing-card ul li {
  color: #fff !important;
  opacity: 0.95;
  margin-bottom: 6px;
  font-size: 1rem;
}

/* Recommended plan — bright border */
.pricing-card.recommended {
  border-top: 4px solid #ffffff !important;
}

/* Buttons on pricing page */
body.pricing-page .btn-primary {
  background: #000 !important;
  color: #fff !important;
  border-radius: 12px;
  padding: 14px 20px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}

body.pricing-page .btn-primary:hover {
  background: #222 !important;
  transform: translateY(-2px);
}
/* -------------------------
   PRICING HERO
-------------------------- */
.pricing-hero {
  text-align: center;
  padding: 60px 20px;
  background: #ffffff;
}

.pricing-hero h1 {
  font-size: 2.5rem;
  margin-bottom: 15px;
}

.pricing-hero p {
  font-size: 1.2rem;
  color: #333;
}

/* -------------------------
   PRICING CARDS
-------------------------- */
.pricing-cards {
  padding: 60px 20px;
  background: #f1f4ff;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 25px;
  width: 90%;
  max-width: 1100px;
  margin: 0 auto;
}

.card {
  background: #ffffff;
  border-radius: 12px;
  padding: 25px;
  text-align: center;
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
  border: 1px solid #e0e2eb;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card.featured {
  border: 2px solid #4d9cff;
  transform: scale(1.05);
}

.card h2 {
  font-size: 1.6rem;
  margin-bottom: 10px;
  color: #222;
}

.card .price {
  font-size: 2rem;
  margin-bottom: 20px;
  color: #4d9cff;
}

.card .price span {
  font-size: 1rem;
  color: #555;
}

.card ul {
  list-style: none;
  margin-bottom: 25px;
}

.card ul li {
  margin: 10px 0;
  color: #333;
}

.card .cta-button {
  display: inline-block;
  padding: 12px 24px;
  background: #4d9cff;
  color: white;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
}

.card .cta-button:hover {
  background: #2877ff;
}
/* Center the login/signup cards */
.auth-section {
  display: flex;
  justify-content: center; /* centers horizontally */
  align-items: center;     /* centers vertically if parent has height */
  min-height: 60vh;        /* makes it vertically centered-ish */
}

.auth-card {
  max-width: 400px;        /* keeps the form a reasonable width */
  width: 100%;
  padding: 2rem;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.pricing-powered-by {
  color: #000;        /* Full contrast */
  opacity: 0.65;      /* Soft modern look */
  font-size: 0.85rem; /* Optional: keeps it subtle but readable */
}
/* Header */
.header {
  background-color: #0059c9; /* darker blue for contrast */
  color: white;
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 1rem 0;
  box-shadow: 0 3px 12px rgba(0,0,0,0.15); /* subtle shadow for depth */
  transition: background-color 0.3s;
}

.header:hover {
  background-color: #0047a8; /* slightly darker on hover */
}

.header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header .logo {
  font-size: 1.8rem;
  font-weight: bold;
  color: white;
  text-decoration: none;
}

.header .nav a {
  color: white;
  font-weight: 600;
  margin-left: 1.5rem;
  text-decoration: none;
  transition: color 0.3s;
}

.header .nav a:hover {
  color: #00c6ff; /* cyan highlight on hover */
}

.header #auth-links a {
  margin-left: 1rem;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  background-color: rgba(255, 255, 255, 0.1);
  transition: background-color 0.3s, color 0.3s;
}

.header #auth-links a:hover {
  background-color: #ffffff;
  color: #0059c9;
}

.header #logout-form button.logout-button {
  background-color: #ffffff;
  color: #0059c9;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}

.header #logout-form button.logout-button:hover {
  background-color: #00c6ff;
  color: white;
}
.header {
  background-color: #0059c9 !important; /* solid dark blue */
  color: white;
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 1rem 0;
  box-shadow: 0 3px 12px rgba(0,0,0,0.15); /* subtle shadow */
}

.header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header .logo {
  font-size: 1.8rem;
  font-weight: bold;
  color: white;
  text-decoration: none;
}

.header .nav a {
  color: white;  /* ensures links are always visible */
  font-weight: 600;
  margin-left: 1.5rem;
  text-decoration: none;
  transition: color 0.3s;
}

.header .nav a:hover {
  color: #00c6ff; /* hover highlight */
}

.header #auth-links a {
  margin-left: 1rem;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  background-color: rgba(255, 255, 255, 0.1);
  color: white; /* always visible */
  transition: background-color 0.3s, color 0.3s;
}

.header #auth-links a:hover {
  background-color: #ffffff;
  color: #0059c9;
}

.header #logout-form button.logout-button {
  background-color: #ffffff;
  color: #0059c9;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}

.header #logout-form button.logout-button:hover {
  background-color: #00c6ff;
  color: white;
}
/* ---------- Header Styles ---------- */
.header {
  background: linear-gradient(135deg, #0066FF, #00C2B8);
  color: #fff;
  padding: 1rem 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-size: 1.75rem;
  font-weight: bold;
  text-decoration: none;
  color: #fff;
}

.logo .mark {
  display: inline-block;
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  margin-right: 0.5rem;
}

.nav a {
  color: #fff;
  text-decoration: none;
  margin-left: 2rem;
  font-weight: 600;
  position: relative;
}

.nav a:focus,
.nav a:hover {
  outline: 3px solid #ffbf47; /* High contrast focus for ADA */
  outline-offset: 2px;
  color: #fff;
}

.logout-button {
  background: transparent;
  border: 2px solid #fff;
  border-radius: 8px;
  color: #fff;
  font-weight: 600;
  padding: 0.25rem 0.75rem;
  margin-left: 2rem;
  cursor: pointer;
}

.logout-button:focus,
.logout-button:hover {
  background: rgba(255,255,255,0.1);
  outline: 3px solid #ffbf47;
  outline-offset: 2px;
}

/* Responsive Nav */
@media (max-width: 768px) {
  .header-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .nav {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
  }

  .nav a,
  .logout-button {
    margin-left: 0;
    margin-bottom: 0.5rem;
  }
}
/* Remove default body margin */
body {
  margin: 0;
  font-family: 'Arial', sans-serif;
}

/* Header adjustments */
.header {
  background: linear-gradient(135deg, #0066FF, #00C2B8);
  color: #fff;
  padding: 1rem 0; /* can reduce if too tall */
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  margin-bottom: 0; /* ensure no gap */
}

/* Container inside header */
.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem; /* horizontal padding only */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Ensure main title hugs header */
main h1, main .page-title {
  margin-top: 0; /* remove any default spacing */
}
/* Reset and body */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Arial', sans-serif;
  background-color: #FFFFFF;
  color: #0B0B0B;
}

/* Header */
.header {
  background: linear-gradient(135deg, #0066FF, #00C2B8); /* AccessHero style */
  color: #FFFFFF;
  padding: 1rem 0;
  margin-bottom: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header .logo {
  font-weight: bold;
  font-size: 1.5rem;
  text-decoration: none;
  color: #FFFFFF;
}

.nav a {
  margin-left: 1.5rem;
  text-decoration: none;
  color: #FFFFFF;
  font-weight: 500;
}

.nav a:hover,
.nav a:focus {
  text-decoration: underline;
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
}

/* Logout button */
.logout-button {
  background: #FFFFFF;
  color: #0066FF;
  border: none;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
}

.logout-button:hover,
.logout-button:focus {
  background: #E6E6E6;
  outline: 2px solid #0066FF;
}

/* Main Title flush with header */
.page-title {
  margin-top: 0;
  padding: 1rem 2rem;
  font-size: 2rem;
}

/* Optional paragraph styling */
main p {
  padding: 0 2rem;
  margin-top: 0.5rem;
  color: #556170;
}
body.pricing-page .hero {
  padding: 0px 0; /* MUCH smaller, no giant gap */
  background-color: #f9f9f9; /* if you want */
}

body.pricing-page .section {
  padding-top: 0px;
}
body.signup-page .hero {
  padding: 80px 0; /* MUCH smaller, no giant gap */
  background-color: #f9f9f9; /* if you want */
}

body.signup-page .section {
  padding-top: 0px;
}
body.login-page .hero {
  padding: 80px 0; /* MUCH smaller, no giant gap */
  background-color: #f9f9f9; /* if you want */
}

body.login-page .section {
  padding-top: 0px;
}

.header {
  height: 110px; /* keep header height fixed */
  display: flex;
  align-items: center; /* vertically center all header content */
  padding: 0 20px;     /* optional horizontal padding */
}

.header .logo {
  display: flex;
  align-items: center; /* vertically center logo and text */
}

.header .logo img {
  height: 80px;       /* slightly smaller than header to reduce top space */
  width: auto;        /* keep aspect ratio */
  object-fit: contain;
}

.header .logo span {
  margin-left: 10px;  /* if you have text next to logo */
  line-height: 1;     /* remove extra line spacing */
}

.monthly-price {
  color: #333;          /* change this to any color you want */
  font-weight: auto;
  font-size: 1.2rem;    /* controls size of monthly price */
}

.old-price {
  text-decoration: line-through;
  color: #333;          /* greyed out original annual price */
  margin-right: 6px;
}

.new-price {
  font-weight: bold;
  color: #333;       /* highlight discounted annual price */
}

.savings {
  color: #333;       /* green savings text */
  font-size: 1.2rem;    /* make "Save $24" bigger */
  font-weight: bold;
  margin-left: 4px;
  white-space: nowrap; /* prevents line break */
}
.plan-features li {
  font-size: 1.1rem;   /* increase size (default is ~1rem) */
  line-height: 1.5;    /* add spacing for readability */
  color: #333;         /* adjust text color if needed */
  font-weight: 500;    /* make it slightly bolder */
}

.paypal-button-container iframe {
  background: #ffffff9e !important;
  border-radius: 10px;
  padding: 1px;
}