/* Dark is the base and light lives in the media query, matching app/guides.py -
     the other content pages - rather than landing.html, which is the other way round.
     branding.js overwrites bg/panel/border/text/muted/accent at runtime; everything
     below derives from those, so the page follows the admin theme either way. Before
     this, the page had no light palette at all and rendered dark until branding.js
     resolved, on a site that is otherwise light by day. */
  :root {
    --bg: #0f1115; --panel: #181b22; --panel-2: #1f232c; --border: #2a2f3a; --text: #e7eaf0;
    --muted: #9aa3b2; --accent: #4f8cff; --good: #57ab5a; --warn: #d4a72c; --bad: #e5534b;
    --header-bg: rgba(15,17,21,.84); --tint: rgba(255,255,255,.02);
    --shadow: 0 20px 50px rgba(0,0,0,.45);
  }
  @media (prefers-color-scheme: light) {
    :root {
      --bg: #f5f7fb; --panel: #ffffff; --panel-2: #eef2f7; --border: #dde1e8; --text: #1a1d24;
      --muted: #5b6472; --accent: #3b6fe0; --good: #268042; --warn: #94690f; --bad: #cb4036;
      --header-bg: rgba(255,255,255,.86); --tint: rgba(20,26,40,.022);
      --shadow: 0 18px 44px rgba(20,26,40,.10);
    }
  }
  /* Accent as small text fails 4.5:1 in light mode on every admin theme, so labels use
     a darkened derivative. Graphics keep the raw accent - they only need 3:1. */
  :root { --accent-text: var(--accent); }
  @media (prefers-color-scheme: light) {
    @supports (color: color-mix(in srgb, red, blue)) {
      :root { --accent-text: color-mix(in srgb, var(--accent) 70%, #000); }
    }
  }
  :root { --accent-2: #7c4dd6; }
  @supports (color: color-mix(in oklab, red, blue)) {
    :root { --accent-2: color-mix(in oklab, var(--accent) 58%, #8b5cf6); }
  }
  :root {
    --accent-08: color-mix(in srgb, var(--accent) 8%, transparent);
    --accent-12: color-mix(in srgb, var(--accent) 12%, transparent);
    --accent-20: color-mix(in srgb, var(--accent) 20%, transparent);
    --accent-30: color-mix(in srgb, var(--accent) 30%, transparent);
    --accent2-14: color-mix(in srgb, var(--accent-2) 14%, transparent);
    --accent2-32: color-mix(in srgb, var(--accent-2) 32%, transparent);
    --good-14: color-mix(in srgb, var(--good) 14%, transparent);
    --good-30: color-mix(in srgb, var(--good) 30%, transparent);
    --warn-14: color-mix(in srgb, var(--warn) 14%, transparent);
    --warn-30: color-mix(in srgb, var(--warn) 30%, transparent);
    --bad-12: color-mix(in srgb, var(--bad) 12%, transparent);
    --bad-30: color-mix(in srgb, var(--bad) 30%, transparent);
  }
  * { box-sizing: border-box; }
  [hidden] { display: none !important; }
  body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden;
         font: 16px/1.7 -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text);
         position: relative; }
  /* Decorative wash behind the top of the page. */
  body::before {
    content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 100%; max-width: 1100px; height: 480px; pointer-events: none; z-index: 0;
    background:
      radial-gradient(ellipse 42% 46% at 26% 32%, var(--accent2-14), transparent 70%),
      radial-gradient(ellipse 46% 50% at 74% 26%, var(--accent-20), transparent 72%);
  }
  a { color: var(--accent-text); }
  .wrap { max-width: 760px; margin: 0 auto; padding: 34px 20px 80px; flex: 1; display: flex; flex-direction: column; width: 100%;
          position: relative; z-index: 1; }

  .crumbs { font-size: 13.5px; color: var(--muted); margin-bottom: 14px; }
  .crumbs a { color: var(--muted); }
  h1 { font-size: 30px; line-height: 1.25; margin: 0 0 8px; text-wrap: balance; }
  .updated { color: var(--muted); font-size: 14px; margin-bottom: 8px; }
  .lead { font-size: 17px; color: var(--muted); margin: 18px 0 36px; max-width: 62ch; }
  .eyebrow {
    /* .wrap is a flex column, so an inline-flex child still stretches without this. */
    display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; margin-bottom: 18px;
    padding: 6px 14px; border-radius: 100px; font-size: 13px; font-weight: 600;
    background: var(--accent-12); border: 1px solid var(--accent-30); color: var(--accent-text);
  }
  .eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px var(--good-14); }

  h2.group {
    font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--accent-text);
    font-weight: 700; margin: 44px 0 18px; padding-top: 20px; border-top: 1px solid var(--border);
    display: flex; align-items: center; gap: 11px;
  }
  h2.group .g-ico {
    width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-12); border: 1px solid var(--accent-30); color: var(--accent);
  }
  /* Each group gets its own hue so the five sections are distinguishable at a glance.
     nth-of-type counts h2 siblings in document order - h1 is a different element type so
     the five groups are 1..5 today, but inserting another h2 between them reshuffles the
     colours. */
  h2.group:nth-of-type(2) .g-ico { background: var(--accent2-14); border-color: var(--accent2-32); color: var(--accent-2); }
  h2.group:nth-of-type(3) .g-ico { background: var(--good-14); border-color: var(--good-30); color: var(--good); }
  h2.group:nth-of-type(4) .g-ico { background: var(--warn-14); border-color: var(--warn-30); color: var(--warn); }
  h2.group:nth-of-type(5) .g-ico { background: var(--bad-12); border-color: var(--bad-30); color: var(--bad); }
  h2.group .g-pts {
    margin-left: auto; font-size: 11.5px; letter-spacing: .04em; font-weight: 600;
    color: var(--muted); border: 1px solid var(--border); border-radius: 100px;
    padding: 3px 11px; text-transform: none; white-space: nowrap;
  }

  .check { position: relative; overflow: hidden;
           background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
           padding: 18px 20px; margin-bottom: 14px;
           transition: border-color .15s ease, transform .15s ease; }
  .check:hover { border-color: var(--accent-30); transform: translateY(-1px); }
  /* How much this one check costs a site that fails it, relative to the heaviest
     check on the list (HTTPS, 15). The number itself is already printed beside it -
     the bar just makes the ranking visible without reading all fifteen. */
  .weight { height: 4px; border-radius: 100px; background: var(--panel-2); overflow: hidden; margin: 0 0 12px; }
  .weight i { display: block; height: 100%; border-radius: 100px;
              background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
  .check.sev-high .weight i { background: linear-gradient(90deg, var(--bad), var(--warn)); }
  .check.sev-mid .weight i { background: linear-gradient(90deg, var(--warn), var(--accent)); }
  .check .row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
  .check h3 { font-size: 16px; margin: 0; }
  .check .pts { font-size: 12px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .check p { margin: 6px 0; color: var(--text); font-size: 14.5px; }
  .check p.why { color: var(--muted); }
  .check p.fix { border-left: 2px solid var(--accent); padding-left: 12px; margin-top: 10px; }
  .check p.fix strong { color: var(--accent); }
  /* The download offer. Two columns so the artwork carries the "it is a real form"
     message that a line of copy would have to make the reader take on trust. */
  .grab {
    position: relative; overflow: hidden;
    display: grid; grid-template-columns: 1fr minmax(0, 210px); gap: 26px; align-items: center;
    background: linear-gradient(135deg, var(--accent-12), var(--accent2-14));
    border: 1px solid var(--accent-30); border-radius: 16px;
    padding: 28px 30px; margin: 30px 0 40px; scroll-margin-top: 78px;
  }
  .grab::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
      linear-gradient(var(--accent-12) 1px, transparent 1px),
      linear-gradient(90deg, var(--accent-12) 1px, transparent 1px);
    background-size: 40px 40px;
    -webkit-mask-image: radial-gradient(ellipse 60% 70% at 40% 50%, transparent 24%, #000 94%);
    mask-image: radial-gradient(ellipse 60% 70% at 40% 50%, transparent 24%, #000 94%);
  }
  .grab > * { position: relative; }
  .grab .tag { display: inline-flex; align-items: center; gap: 7px; font-size: 12px;
               font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
               color: var(--accent-text); margin-bottom: 10px; }
  .grab h2 { font-size: 24px; margin: 0 0 8px; line-height: 1.2; letter-spacing: -.01em;
             border: 0; padding: 0; text-transform: none; color: var(--text);
             display: block; letter-spacing: -.01em; }
  .grab p { color: var(--muted); margin: 0 0 16px; font-size: 15px; }
  .grab ul { list-style: none; margin: 0 0 20px; padding: 0; }
  .grab li { display: flex; gap: 9px; align-items: flex-start; font-size: 14px;
             color: var(--text); padding: 3px 0; }
  .grab li svg { flex-shrink: 0; margin-top: 3px; color: var(--good); }
  .grab .note { font-size: 12.5px; color: var(--muted); margin: 12px 0 0; }
  .grab .sheet { width: 100%; height: auto; display: block;
                 filter: drop-shadow(0 12px 28px rgba(0,0,0,.18)); }
  @media (max-width: 720px) {
    .grab { grid-template-columns: 1fr; padding: 24px 20px; }
    .grab .art { display: none; }
  }

  .cta-box {
    position: relative; overflow: hidden; text-align: center;
    background: linear-gradient(135deg, var(--accent-12), var(--accent2-14));
    border: 1px solid var(--accent-30); border-radius: 14px; padding: 30px 24px; margin: 48px 0;
  }
  .cta-box::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
      linear-gradient(var(--accent-12) 1px, transparent 1px),
      linear-gradient(90deg, var(--accent-12) 1px, transparent 1px);
    background-size: 42px 42px;
    -webkit-mask-image: radial-gradient(ellipse 56% 64% at 50% 50%, transparent 30%, #000 92%);
    mask-image: radial-gradient(ellipse 56% 64% at 50% 50%, transparent 30%, #000 92%);
  }
  .cta-box > * { position: relative; }
  .cta-box p { color: var(--muted); margin: 0 0 16px; }
  .btn { display: inline-block; padding: 13px 28px; border-radius: 9px; font-weight: 600;
         text-decoration: none; color: #fff;
         background: linear-gradient(135deg, var(--accent), var(--accent-2));
         box-shadow: 0 8px 22px var(--accent-30);
         transition: transform .15s ease, box-shadow .15s ease; }
  .btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px var(--accent-30); }
  /* <main> holds everything above the footer; a flex column like .wrap, so the page lays
     out exactly as it did when these were .wrap's own children. */
  main#main { display: flex; flex-direction: column; }
  footer { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border); color: var(--muted); font-size: 13px; }
  footer a { color: var(--muted); margin-right: 12px; }