/* Base */
:root{
  --container: 1100px;
  --blue1: #0f519b;      /* deep */
  --blue2: #1278d4;      /* mid */
  --blue3: #0ea5e9;      /* accent */
  --text:  #0f172a;      /* slate-900 */
  --muted: #475569;      /* slate-600 */
  --border:#e5e7eb;      /* gray-200 */
  --card:  #f8fafc;      /* gray-50 */
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#fff;color:var(--text);font:16px/1.65 system-ui,-apple-system,Segoe UI,Inter,Roboto,Arial,sans-serif}
a{color:var(--blue3);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--container);margin:0 auto;padding:20px}

/* Hero (match Woo blue with subtle diagonal stripes) */
.hero{
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.15);
  padding:42px 0 46px;
  background:
    /* subtle sheen */
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0)) top,
    /* diagonal stripes */
    repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 14px, rgba(255,255,255,.03) 14px 28px),
    /* base gradient */
    linear-gradient(180deg, var(--blue2) 0%, var(--blue1) 100%);
}
.hero .crumbs{
  font-size:.95rem; color:rgba(255,255,255,.85); margin-bottom:10px;
}
.hero .crumbs a{color:rgba(255,255,255,.95)}
.hero h1{
  font-size:2.4rem; line-height:1.15; margin:0 0 6px; font-weight:800; letter-spacing:.2px;
}
.hero .subtitle{margin:0 0 12px; opacity:.95}
.hero-ctas .btn{
  display:inline-block; margin-right:10px; padding:10px 14px; border-radius:10px;
  background:#fff; color:#0f172a; text-decoration:none; font-weight:700;
}
.hero-ctas .btn.btn-ghost{
  background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.7);
}

/* Layout below hero */
.main{display:grid; grid-template-columns: 280px 1fr; gap:24px; padding-top:22px}
.toc{background:var(--card); border:1px solid var(--border); border-radius:12px; padding:16px; position:sticky; top:16px; height:fit-content}
.toc h2{margin:0 0 8px; font-size:1.05rem}
.toc ol{margin:8px 0 0 18px; padding:0}
.content section{padding:16px 0; border-bottom:1px solid var(--border)}
.content h2{margin:0 0 8px; font-size:1.35rem}
.last-updated{color:var(--muted); font-size:.95rem}
.callout{background:#fff7ed; border-left:4px solid #f59e0b; padding:10px 12px; border-radius:6px}
.footer{border-top:1px solid var(--border); color:#334155; padding-bottom:40px}

/* Responsive */
@media (max-width: 900px){
  .main{grid-template-columns: 1fr}
  .toc{position:relative; top:auto}
  .hero h1{font-size:2rem}
}