:root{
  --text:#0f172a; --border:#e5e7eb; --muted:#6b7280;
  --bg:#ffffff; --shadow:0 8px 30px rgba(0,0,0,.06)
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto}
.container{max-width:1040px;margin:0 auto;padding:24px}
.header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-bottom:10px;padding:8px 12px}
.brand{display:flex;align-items:center;gap:10px;justify-content:flex-start;margin-left:8px}
.brand img{height:56px;width:auto;display:block;margin:0}
.nav{display:flex;gap:18px;justify-content:flex-end;flex-wrap:wrap;margin-left:auto}
.nav a{text-decoration:none;color:#111827;font-weight:600}
.hero{display:flex;flex-direction:column;gap:14px;align-items:center}
.card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:var(--shadow);width:100%;max-width:880px}
.h1{font-size:28px;margin:0;text-align:center}
.subtagline{margin-top:6px;font-size:18px;line-height:1.3;color:#111827;font-weight:600;text-align:center}
.stack{display:flex;flex-direction:column;gap:10px;align-items:center}
.row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.input{border:1px solid var(--border);border-radius:12px;padding:12px;width:100%;max-width:520px}
.actions{display:flex;gap:10px;justify-content:center}
.btn{background:#2563eb;color:#fff;border:none;border-radius:12px;padding:10px 16px;font-weight:700;cursor:pointer}
.btn.ghost{background:#f3f4f6;color:#111827}
.kpis{display:flex;gap:10px;justify-content:center;margin:6px 0 12px;flex-wrap:wrap}
.kpi{background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px 14px;box-shadow:var(--shadow);text-align:center;min-width:120px}
.kpi .num{font-size:20px;font-weight:800}
.kpi .label{font-size:12px;color:var(--muted)}
.cta .box{text-align:center}
.result .grade{font-size:42px;margin:8px 0;text-align:center}
.badge{display:inline-flex;align-items:center;gap:6px;border-radius:999px;border:1px solid var(--border);padding:6px 10px;background:#f8fafc;font-weight:700;font-size:12px}
.badge.green{background:#ecfdf5;border-color:#bbf7d0;color:#065f46}
.badge.amber{background:#fffbeb;border-color:#fde68a;color:#92400e}
.badge.red{background:#fef2f2;border-color:#fecaca;color:#7f1d1d}
.tag{display:inline-flex;border:1px solid var(--border);border-radius:999px;padding:4px 8px;font-size:12px;margin-right:6px}
.scorebar{width:100%;height:12px;background:#f3f4f6;border-radius:999px;overflow:hidden;margin:6px 0 4px}
.scorebar .fill{height:100%;width:0%;background:linear-gradient(90deg,#2563eb,#22c55e)}
.table{width:100%;border-collapse:collapse;margin-top:8px}
.table th,.table td{border-bottom:1px solid var(--border);padding:8px;text-align:left}
.alert{margin-top:10px;font-size:12px;color:#374151;background:#f9fafb;border:1px solid var(--border);padding:10px;border-radius:10px}

/* Storytelling */
.story{max-width:880px;margin:8px auto 24px;display:flex;flex-direction:column;gap:14px}
.timeline{position:relative;padding-left:22px;display:flex;flex-direction:column;gap:14px}
.timeline:before{content:"";position:absolute;left:8px;top:0;bottom:0;width:2px;background:linear-gradient(180deg,#e5e7eb,#c7d2fe)}
.step{position:relative;background:#ffffff;border:1px solid var(--border);border-radius:14px;padding:16px;box-shadow:var(--shadow)}
.step:before{content:attr(data-step);position:absolute;left:-14px;top:14px;background:#2563eb;color:#fff;font-weight:800;border-radius:999px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(37,99,235,.35)}
.step h3{margin:0 0 6px;font-size:18px}
.badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;justify-content:center}
.badges .b{background:#f1f5f9;border:1px solid var(--border);border-radius:999px;padding:6px 10px;font-weight:700;font-size:12px}

/* v23 UI polish: uniform inputs & spacing */
.input{
  width:100%;
  max-width:520px;
  height:44px;
  padding:0 12px;
  margin:0;
  font-size:16px;
}
.row .input{
  flex:1;
  min-width:260px; /* keeps City/State equal and consistent */
  max-width:520px;
}

.site-footer {
  margin-top: 60px;
  padding: 20px;
  background: #f9fafb;
  color: #374151;
  text-align: center;
  font-size: 14px;
}
.site-footer a {
  color: #2563eb;
  margin: 0 8px;
  text-decoration: none;
}
.legal-section {
  padding: 40px 20px;
  max-width: 900px;
  margin: 0 auto;
  font-size: 15px;
  line-height: 1.6;
}


/* Mobile optimization */
@media (max-width: 640px){
  html { -webkit-text-size-adjust: 100%; }
  .container{ padding:16px; }
  .header{ flex-direction: column; align-items:center; gap:10px; padding:10px 0; }
  .brand{ margin-left:0; justify-content:center; }
  .brand img{ height:48px; max-width: 100%; object-fit: contain; }
  .nav{ justify-content:center; gap:14px; }
  .card{ padding:14px; margin:0 auto; }
  .h1{ font-size:24px; text-align:center; }
  .subtagline{ font-size:16px; text-align:center; }
  .stack{ align-items:center; }
  .row{ flex-direction: column; gap:10px; width:100%; }
  .input{ max-width:100%; min-width:0; width:100%; }
  .actions{ flex-direction: column; width:100%; }
  .actions .btn{ width:100%; }
  .kpis{ gap:8px; }
  .kpi{ min-width:120px; }
  .result .grade{ font-size:36px; }
}
/* iOS Safari input appearance */
input[type="text"], input[type="search"], input[type="tel"], input[type="email"]{
  -webkit-appearance: none;
  appearance: none;
  border-radius: 10px;
}

/* Accent text color matches logo "Grader" */
.accent-text {
  color: #007BFF; /* Replace with actual logo accent color if different */
  font-weight: 700;
}


/* Header centering fixes */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 20px;
}
.header-inner img {
  display: block;
  margin: 0 auto;
}

/* Responsive mobile header */
@media (max-width: 640px) {
  .header-inner {
    flex-direction: column;
    text-align: center;
  }
  .header-inner nav {
    margin-top: 10px;
  }
  .header-inner img {
    margin: 0 auto;
    max-width: 90%;
    height: auto;
  }
}

/* v28 mobile header centering */

@media (max-width: 640px){
  .header{ flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 10px 0; }
  .brand{ width: 100%; display:flex; justify-content: center; margin-left: 0 !important; }
  .brand img{ height: 48px; max-width: 100%; object-fit: contain; margin: 0 auto; }
  .nav{ width: 100%; display:flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-left: 0 !important; }
}