/* Project 2027 Shared Stylesheet */

:root {
  --ink:#0b1320;
  --muted:#596273;
  --accent:#b22222;
  --bg:#ffffff;
  --call:#1e5adb;
  --rule:#e6e9ef;
  --highlight:#f9ecec;
}

*{box-sizing:border-box}

body {
  margin:0;
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
}

header {
  background:var(--accent);
  color:#fff;
  padding:1.5rem;
  text-align:center;
}

header h1 {
  margin:0;
  font-size:1.9rem;
  letter-spacing:.2px;
}

header p {
  margin:.3rem 0 0;
  font-size:1rem;
  font-weight:500;
  opacity:.95;
}

main {
  max-width:900px;
  margin:0 auto;
  padding:2rem 1rem;
}

h2 {
  margin:1.6rem 0 .6rem;
  font-size:1.5rem;
  color:var(--accent);
}

h3 {
  margin:1.2rem 0 .4rem;
  font-size:1.2rem;
  color:var(--call);
}

p { margin:.6rem 0; }

ul { margin:.4rem 0 .9rem 1.4rem; }
li+li { margin-top:.35rem; }

.lead { font-size:1.08rem; color:var(--muted); }

.intro p { font-size:1.05rem; }

.toc {
  background:var(--highlight);
  padding:1rem;
  border-radius:8px;
  margin:1.5rem 0;
}

.toc h3 { margin:.2rem 0 .6rem; }
.toc ul { margin:.2rem 0 0 1rem; }

.guarantees li {
  margin:.6rem 0;
  padding:.5rem .65rem;
  border-left:4px solid var(--accent);
  background:#fff9f9;
  border-radius:4px;
}

.priority-list {
  counter-reset:priority;
  margin:0 0 1.5rem 0;
  padding:0;
  list-style:none;
}
.priority-list li {
  background:#f7f8fc;
  border:1px solid var(--rule);
  border-radius:8px;
  padding:1rem;
  margin-bottom:1rem;
}
.priority-list h3 { margin:.2rem 0 .4rem; color:var(--accent); font-size:1.25rem; }
.priority-list p { margin:0; color:var(--muted); }

.cta {
  display:inline-block;
  margin:1.2rem 0;
  padding:.8rem 1.2rem;
  background:var(--call);
  color:#fff;
  font-weight:600;
  border-radius:6px;
  text-decoration:none;
}
.cta:hover { background:#1749b5; }

.grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1rem;
  margin:1.5rem 0;
}

.audience {
  display:block;
  text-align:center;
  padding:1rem;
  background:var(--highlight);
  color:var(--accent);
  font-weight:600;
  border-radius:6px;
  text-decoration:none;
  border:1px solid var(--rule);
}
.audience:hover { background:#f3dcdc; }

.badge-section {
  background:#fdf6f6;
  border:1px solid var(--rule);
  border-radius:10px;
  padding:1.5rem;
  margin:2rem 0;
}
.badge-gallery {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1.2rem;
  margin:1rem 0 1.25rem;
}
.badge-option {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-decoration:none;
  padding:.4rem;
  border-radius:8px;
  transition:transform .15s ease, box-shadow .15s ease;
}
.badge-option img {
  width:180px;
  max-width:38vw;
  height:auto;
  display:block;
}
.badge-option span {
  margin-top:.4rem;
  font-size:.9rem;
  color:var(--muted);
  font-weight:600;
  letter-spacing:.2px;
}
.badge-option:hover,
.badge-option:focus {
  transform:translateY(-4px);
  box-shadow:0 10px 22px rgba(11,19,32,.12);
}
.badge-snippet-label { font-weight:600; margin:.6rem 0 .2rem; }
.badge-snippet {
  background:#111827;
  color:#f1f5f9;
  padding:.9rem;
  border-radius:6px;
  overflow-x:auto;
  font-size:.9rem;
  white-space:pre;
}
.badge-snippet code {
  font-family:SFMono-Regular,Consolas,"Liberation Mono",Menlo,monospace;
}

.format-note {
  display:block;
  font-size:.88rem;
  color:var(--muted);
  margin-top:.15rem;
}
.format-note a{color:var(--accent);}

footer {
  margin-top:2rem;
  padding:1rem;
  text-align:center;
  border-top:1px solid var(--rule);
  color:var(--muted);
  font-size:.95rem;
}

a { color:var(--call); text-decoration:none; }
a:hover { text-decoration:underline; }

@media (max-width:640px){
  header h1{font-size:1.6rem}
  main{padding:1.4rem .9rem}
  h2{font-size:1.35rem}
  h3{font-size:1.1rem}
  .priority-list h3{font-size:1.15rem}
}

@media print{
  header{color:#000;background:#fff;border-bottom:1px solid var(--rule)}
  a{color:inherit;text-decoration:none}
  .toc{background:none;border:1px solid var(--rule)}
  .badge-section{background:#fff}
}