/* passrule.com — the information site. Batch 034 (B65) built it; Batch 035 (B66 — `HUMAN DECISION`, Steven, Oct 4) restyles it
   to the dark look he approved: black header, opening, footer, Safety panel and families box, with white and light-gray bands
   between; Archivo headlines; the light logo on black. Bright green ONLY on Staff Sign-In ("no bright-green text on black").
   Plain CSS, no framework. Every style lives here: the Content-Security-Policy allows no inline style. ⛔ No blue (PassRule's
   rule). The words are the live page's, unchanged. */

/* Self-hosted fonts (SIL Open Font License 1.1 — fonts/LICENSE-*.txt). Nothing is fetched from another site. */
@font-face { font-family: 'Atkinson Hyperlegible Next'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/atkinson-hyperlegible-next-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Atkinson Hyperlegible Next'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/atkinson-hyperlegible-next-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Atkinson Hyperlegible Next'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/atkinson-hyperlegible-next-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/archivo-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/archivo-latin-800-normal.woff2') format('woff2'); }

/* Every text pair below is WCAG AA or better (checked Oct 4): gray #b8b8bd on black 9.0:1, soft gray #c4c4c9 10.2:1, #e6e6e6
   14.2:1, the caption #cfcfcf 11.4:1, pale green #b7f0c8 on deep green 7.1:1, white on deep green 9.1:1, black on bright green
   6.3:1, deep green on white 9.1:1 and on the light band 8.3:1. No colour needed nudging. */
:root {
  --black: #17181a;
  --text: #1a1a1a;
  --gray-1: #333333;
  --gray-2: #4a4a4a;
  --on-black: #e6e6e6;
  --label-on-black: #b8b8bd;
  --soft: #c4c4c9;
  --caption: #cfcfcf;
  --line: #d4d4d4;
  --band: #f4f4f2;
  --white: #ffffff;
  --deep: #14532d;        /* deep green: labels, links, icons, For Students, the email button */
  --deep-hover: #0b3a1f;
  --pale-green: #b7f0c8;  /* the For Students label */
  --bright: #03B23F;      /* ONLY Staff Sign-In */
  --yes-tint: #d6eadc;
  --over: #b42318;        /* a pass that ran over */
  --display: 'Archivo', 'Atkinson Hyperlegible Next', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--white); color: var(--text); font-family: 'Atkinson Hyperlegible Next', system-ui, sans-serif; font-size: 18px; line-height: 1.55; }
img { max-width: 100%; }
a { color: var(--deep); }
a:hover { color: var(--deep-hover); }
p { margin: 0; }
h1, h2 { font-family: var(--display); }
h3 { font-family: 'Atkinson Hyperlegible Next', system-ui, sans-serif; font-weight: 700; }
.wrap { max-width: 1180px; margin: 0 auto; }

/* THE FOCUS RING, visible on black and on white (Batch 035): deep green on the light sections (9.1:1 on white), white on the
   black ones (17.8:1), 3 px, offset so it never touches the control it rings. */
:focus-visible { outline: 3px solid var(--deep); outline-offset: 3px; border-radius: 4px; }
.site-head :focus-visible, .hero :focus-visible, .panel-black :focus-visible, .side :focus-visible, .site-foot :focus-visible { outline-color: var(--white); }

/* Skip link: off screen until focused, then on top (white on black, its ring white). */
.skip { position: absolute; left: 16px; top: -100px; z-index: 10; background: var(--white); color: var(--black); padding: 12px 18px; border-radius: 8px; font-weight: 700; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; box-shadow: 0 0 0 2px var(--black); }
.skip:focus { top: 12px; color: var(--black); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 14px 24px; border-radius: 8px; font-weight: 700; text-decoration: none; }
.btn-white { background: var(--white); color: var(--black); }
.btn-white:hover { background: #e6e6e6; color: var(--black); }
.btn-outline { color: var(--white); border: 2px solid var(--white); }
.btn-outline:hover { color: var(--white); background: rgba(255, 255, 255, 0.08); }
.btn-deep { background: var(--deep); color: var(--white); }
.btn-deep:hover { background: var(--deep-hover); color: var(--white); }
.btn-bright { background: var(--bright); color: var(--black); min-height: 44px; padding: 11px 20px; }
.btn-bright:hover { background: #02a038; color: var(--black); }

/* Header: black, the light logo, white links; Staff Sign-In the one bright green. */
.site-head { background: var(--black); color: var(--white); }
.site-head .wrap { padding: 20px 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: inline-flex; align-items: center; min-height: 44px; }
.brand img { height: 40px; width: auto; display: block; }
.menu { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; font-size: 17px; }
.menu a:not(.btn) { color: var(--white); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; padding: 0 4px; }
.menu a:not(.btn):hover { color: var(--white); text-decoration: underline; }

/* Labels (uppercase, small): deep green on white and the light band. */
.eyebrow { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--deep); letter-spacing: 0.06em; text-transform: uppercase; }

/* The opening: black. */
.hero { background: var(--black); color: var(--white); padding: 56px 24px 88px; }
.hero .wrap { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; }
.hero-text { flex: 999 1 520px; min-width: 0; }
.eyebrow-hero { margin: 0 0 16px; color: var(--label-on-black); }
.hero h1 { margin: 0 0 24px; font-weight: 800; font-size: clamp(38px, 3.6vw + 18px, 60px); line-height: 1.05; letter-spacing: -0.01em; }
.hero h1 .accent { color: var(--soft); }
.lead { margin: 0 0 32px; font-size: 21px; color: var(--on-black); max-width: 620px; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-art { flex: 1 1 360px; min-width: 0; max-width: 440px; }
.hero-art figure { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.screen { background: var(--white); color: var(--text); border-radius: 16px; padding: 28px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); }
.screen-label { margin: 0 0 18px; font-size: 14px; font-weight: 700; color: var(--gray-2); letter-spacing: 0.06em; text-transform: uppercase; }
.who { display: flex; gap: 16px; align-items: center; margin-bottom: 20px; }
.avatar { width: 64px; height: 64px; border-radius: 50%; background: #f0f0f0; display: flex; align-items: center; justify-content: center; flex: none; }
.who-name { font-weight: 700; font-size: 22px; }
.who-sub { color: var(--gray-2); }
.yes { background: var(--deep); color: var(--white); font-weight: 700; text-align: center; padding: 14px; border-radius: 10px; }
.screen-note { margin: 12px 0 0; text-align: center; font-size: 15px; color: var(--gray-2); }
.cards-2 { display: flex; flex-wrap: wrap; gap: 12px; }
.mini { flex: 1 1 190px; background: var(--white); color: var(--text); border-radius: 14px; padding: 12px 16px; display: flex; align-items: center; gap: 12px; }
.mini-over { border: 2px solid var(--over); padding: 10px 14px; }
.ring { width: 36px; height: 36px; border-radius: 50%; border: 4px solid var(--deep); border-right-color: var(--yes-tint); flex: none; }
.mini-title { font-weight: 700; font-size: 16px; }
.mini-left { font-size: 15px; color: var(--deep); font-weight: 700; }
.mini-over-words { font-size: 15px; color: var(--over); font-weight: 700; }
.hero-art figcaption { font-size: 14px; color: var(--caption); }

/* Sections */
.band { padding: 88px 24px; }
.band-gray { background: var(--band); }
.band-tight-top { padding-top: 0; }
.h2 { margin: 0 0 12px; font-weight: 800; font-size: clamp(30px, 2.2vw + 18px, 42px); line-height: 1.1; }
.h2-40 { font-size: clamp(30px, 2.2vw + 18px, 42px); }
.intro { margin: 0 0 44px; font-size: 20px; color: var(--gray-2); max-width: 720px; }

/* How It Works: white, cards with a thin gray border, deep-green icons. */
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 24px; }
.card { border: 1px solid var(--line); border-radius: 14px; padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.icon { display: flex; }
.card h3 { margin: 0; font-size: 21px; }
.card p { color: var(--gray-1); }

/* Safety (black) and For Students (deep green), side by side on white. */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 24px; }
.panel { border-radius: 16px; padding: 44px; display: flex; flex-direction: column; gap: 16px; }
.panel-black { background: var(--black); color: var(--white); }
.panel-green { background: var(--deep); color: var(--white); }
.panel .eyebrow { margin: 0; }
.panel-black .eyebrow { color: var(--label-on-black); }
.panel-green .eyebrow { color: var(--pale-green); }
.panel h2 { margin: 0; font-weight: 800; font-size: clamp(26px, 1.4vw + 18px, 34px); line-height: 1.1; }
.panel ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.panel-black ul { color: var(--on-black); }

/* Built With a School: the light band. */
.split { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.split-head { flex: 1 1 380px; min-width: 0; }
.split-head .h2 { margin: 0; }
.split-body { flex: 999 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 18px; font-size: 19px; }

/* For Families: white; the questions box black, its links white and underlined. */
.families { display: flex; flex-wrap: wrap; gap: 48px; }
.families-main { flex: 999 1 520px; min-width: 0; }
.families-main .h2 { margin-bottom: 20px; }
.families-main ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 12px; font-size: 19px; }
.side { flex: 1 1 320px; min-width: 0; background: var(--black); color: var(--white); border-radius: 16px; padding: 32px; align-self: flex-start; }
.side h3 { margin: 0 0 12px; font-size: 22px; }
.side p { margin: 0 0 22px; color: var(--on-black); }
.links { display: flex; flex-direction: column; gap: 4px; }
.links a { font-weight: 700; color: var(--white); text-decoration: underline; min-height: 44px; display: inline-flex; align-items: center; align-self: flex-start; }
.links a:hover { color: var(--on-black); }

/* Accessible and Private by Design: the light band with white cards; deep-green links. */
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 24px; margin-top: 36px; }
.tile { background: var(--white); border-radius: 14px; padding: 28px; display: flex; flex-direction: column; gap: 8px; }
.tile h3 { margin: 0; font-size: 20px; }
.tile p { color: var(--gray-1); }
.more { font-weight: 700; color: var(--deep); min-height: 44px; display: inline-flex; align-items: center; align-self: flex-start; }

/* For Other Schools: white, centred; the email button deep green. */
.cta { max-width: 820px; margin: 0 auto; text-align: center; }
.cta .h2 { margin: 0 0 18px; }
.cta p.say { margin: 0 auto 28px; font-size: 20px; color: var(--gray-1); }

/* Footer: black, the light logo, white links. */
.site-foot { background: var(--black); color: var(--on-black); padding: 48px 24px; }
.site-foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 28px; align-items: flex-start; }
.foot-brand { display: flex; flex-direction: column; gap: 10px; }
.foot-brand img { height: 32px; width: auto; display: block; align-self: flex-start; }
.foot-brand p { font-size: 16px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 0 26px; font-size: 16px; }
.foot-links a { color: var(--white); min-height: 44px; display: inline-flex; align-items: center; }
.foot-links a:hover { color: var(--on-black); }

/* The 404 page */
.lost { padding: 96px 24px; text-align: center; }
.lost .h2 { margin-bottom: 16px; }
.lost p { margin: 0 0 28px; color: var(--gray-2); font-size: 20px; }

/* A phone: the panels breathe less; everything else wraps by itself (flex-wrap, auto-fit grids). */
@media (max-width: 640px) {
  .hero { padding: 40px 20px 64px; }
  .band { padding: 64px 20px; }
  .band-tight-top { padding-top: 0; }
  .panel { padding: 32px 24px; }
  .side { padding: 28px 24px; }
  .lead { font-size: 19px; }
  .site-head .wrap { padding: 14px 20px; }
}