/* AA Info - Review Methodology - aawebsites.co.uk */
:root{
  --primary:#475569; --secondary:#334155; --accent:#0891b2;
  --bg:#ffffff; --surface:#f8fafc; --surface-alt:#e2e8f0;
  --text:#0f172a; --muted:#64748b; --border:#cbd5e1;
  --row-alt:#f8fafc; --radius:7px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--text); line-height:1.65; font-size:16px;
}
img,svg{max-width:100%; height:auto; display:block}
a{color:var(--accent); text-decoration:underline; text-underline-offset:2px}
a:hover{color:var(--secondary)}
.container{width:100%; max-width:960px; margin:0 auto; padding:0 20px}

/* Header */
header.site{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);
  color:#fff; box-shadow:0 2px 10px rgba(15,23,42,0.12);
}
header.site .container{display:flex; align-items:center; justify-content:space-between; padding:12px 20px; flex-wrap:wrap; gap:12px}
.brand{display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none; font-weight:700; font-size:1.15rem}
.brand img{width:36px; height:36px}
nav.primary ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px}
nav.primary a{
  display:inline-block; padding:8px 12px; color:#fff; text-decoration:none;
  border-radius:var(--radius); font-size:.94rem; font-weight:500;
}
nav.primary a:hover{background:rgba(255,255,255,0.14); color:#fff}

/* Hero */
.hero{
  background:linear-gradient(135deg,var(--primary) 0%,var(--accent) 100%);
  color:#fff; padding:56px 20px 44px;
}
.hero .container{max-width:960px}
.hero h1{font-size:2rem; margin:0 0 12px; line-height:1.22; letter-spacing:-.01em}
.hero .byline{color:rgba(255,255,255,.92); margin:0 0 14px; font-size:.92rem}
.hero .byline strong{color:#fff}
.hero .lede p{margin:.4rem 0; font-size:1.05rem; color:rgba(255,255,255,.95)}
.hero .cta{margin-top:22px; display:flex; gap:10px; flex-wrap:wrap}
.btn{
  display:inline-block; padding:11px 20px; border-radius:var(--radius);
  background:#fff; color:var(--secondary); text-decoration:none; font-weight:600;
  border:2px solid #fff; transition:all .18s;
}
.btn:hover{background:transparent; color:#fff}
.btn.ghost{background:transparent; color:#fff}
.btn.ghost:hover{background:#fff; color:var(--secondary)}

/* Main */
main{padding:36px 0 20px}
main .container{max-width:820px}
h2{
  font-size:1.5rem; margin:2.2rem 0 .9rem; line-height:1.28; color:var(--secondary);
  padding:.5rem .8rem; border-left:4px solid var(--accent);
  background:var(--surface); border-radius:0 var(--radius) var(--radius) 0;
}
h3{font-size:1.15rem; margin:1.4rem 0 .5rem; color:var(--secondary)}
p{margin:.6rem 0}
strong{color:var(--secondary)}

/* ToC */
nav.toc{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:16px 20px; margin:24px 0;
}
nav.toc h2{background:none; border:none; padding:0; margin:0 0 8px; font-size:1.1rem; color:var(--secondary)}
nav.toc ol{margin:.4rem 0 0 1.2rem; padding:0; columns:2; column-gap:22px}
nav.toc li{margin:.24rem 0; break-inside:avoid}
nav.toc a{color:var(--secondary)}
@media (max-width:640px){nav.toc ol{columns:1}}

/* Lists */
main ul{list-style:none; padding-left:0; margin:.8rem 0}
main ul li{position:relative; padding:.28rem 0 .28rem 1.5rem}
main ul li::before{content:"›"; position:absolute; left:.25rem; top:.28rem; color:var(--accent); font-weight:700; font-size:1.15rem}
main ol{counter-reset:cnt; list-style:none; padding-left:0; margin:.9rem 0}
main ol li{counter-increment:cnt; position:relative; padding:.28rem 0 .28rem 2.4rem; margin:.35rem 0}
main ol li::before{
  content:counter(cnt); position:absolute; left:0; top:.15rem;
  width:1.7rem; height:1.7rem; border-radius:50%;
  background:var(--accent); color:#fff; text-align:center; line-height:1.7rem;
  font-weight:700; font-size:.86rem;
}

/* Table */
.table-wrap{overflow-x:auto; margin:1.2rem 0; border:1px solid var(--border); border-radius:var(--radius)}
table{width:100%; border-collapse:collapse; font-size:.94rem}
th,td{padding:10px 12px; text-align:left; border-bottom:1px solid var(--border)}
thead th{
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  color:#fff; font-weight:600; letter-spacing:.01em;
}
tbody tr:nth-child(even){background:var(--row-alt)}
tbody tr:last-child td{border-bottom:none}

/* Details / FAQ */
details{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  margin:.5rem 0; padding:0;
}
details summary{
  cursor:pointer; padding:12px 44px 12px 14px; font-weight:600; color:var(--secondary);
  position:relative; list-style:none;
}
details summary::-webkit-details-marker{display:none}
details summary::after{
  content:"▼"; position:absolute; right:14px; top:14px; color:var(--accent);
  transition:transform .18s; font-size:.85rem;
}
details[open] summary::after{transform:rotate(180deg)}
details .body{padding:0 14px 14px}

/* Callouts */
.callout{
  background:var(--surface-alt); border-left:4px solid var(--accent);
  padding:14px 18px; border-radius:0 var(--radius) var(--radius) 0; margin:1rem 0;
}
.callout.warn{background:#fff7ed; border-left-color:#c2410c}
.callout strong{display:block; margin-bottom:.3rem; color:var(--secondary)}

/* Author box */
.author-box{
  background:linear-gradient(135deg,var(--surface) 0%,var(--surface-alt) 100%);
  border:1px solid var(--border); border-radius:var(--radius);
  padding:20px; margin:32px 0 12px; display:flex; gap:16px; align-items:flex-start;
}
.author-box img{width:64px; height:64px; border-radius:50%; border:2px solid var(--accent); flex-shrink:0}
.author-box h3{margin:.1rem 0 .35rem; font-size:1.08rem}
.author-box p{margin:.2rem 0; font-size:.92rem; color:var(--muted)}
.author-box .role{color:var(--accent); font-weight:600}

/* Figure */
figure{margin:1.2rem 0; text-align:center}
figure svg{margin:0 auto; max-width:640px; width:100%}
figcaption{font-size:.86rem; color:var(--muted); margin-top:.35rem}

/* Footer */
footer.site{
  background:var(--secondary); color:#cbd5e1; margin-top:48px;
  padding:32px 20px 20px;
}
footer.site .container{max-width:960px}
footer.site a{color:#e2e8f0}
footer.site .cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:24px; margin-bottom:24px}
footer.site h3{color:#fff; margin:0 0 8px; font-size:1rem}
footer.site ul{list-style:none; padding:0; margin:0}
footer.site ul li{margin:.28rem 0}
footer.site .fine{border-top:1px solid rgba(255,255,255,.14); padding-top:14px; font-size:.86rem; color:#94a3b8}

/* Utility */
.disclosure{font-size:.86rem; color:var(--muted); font-style:italic; margin:.4rem 0 0}
.warn-block{background:#fff7ed; border:1px solid #fed7aa; border-radius:var(--radius); padding:14px 18px; margin:1rem 0; font-size:.94rem}
.warn-block strong{color:#9a3412}

@media (min-width:700px){
  .hero h1{font-size:2.4rem}
  h2{font-size:1.7rem}
}
@media (min-width:980px){
  main{padding:44px 0 24px}
  .hero{padding:72px 20px 60px}
}

/* a11y additions */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--primary);color:#fff;padding:10px 16px;border-radius:4px;z-index:1000;text-decoration:none;font-weight:700}
.skip-link:focus{left:12px;top:12px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}}