/* batchguard.9robots.ai, the public BatchGuard site (REQ-BG-005): the same structure, masthead,
   footer, fonts and look as glasshood.ai and testrobin.ai, in 9robots.ai's blue and orange.
   Plain CSS, no build step. */

@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:block;
  src:url(/assets/fonts/lato-400.woff2) format('woff2')}
@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:block;
  src:url(/assets/fonts/lato-700.woff2) format('woff2')}

:root{
  --blue:#0c41cd; --navy:#000055;
  /* 9robots.ai's orange (REQ-GHA-018 clause 14, amended 2026-11-05), which is also the orange
     tile in GlassHood's logo. */
  --orange:#e75a1e;
  --bg:#ffffff; --text:#1a1a2e; --sub:#555555; --nav-sub:#6b7280;
  --border:#e0e2e8; --muted:#f0f1f4;
  --max:1120px; --site-max:1120px; --masthead-h:96px;
}
@media (max-width:900px){:root{--masthead-h:84px}}
@media (max-width:768px){:root{--masthead-h:72px}}

*{box-sizing:border-box}
html{overflow-y:scroll}
body{margin:0;background:var(--bg);color:var(--text);font-family:'Lato',sans-serif;
  font-size:16px;line-height:1.6;min-height:100vh;display:flex;flex-direction:column;
  overflow-x:clip;-webkit-font-smoothing:antialiased}
main{flex:1}
a{color:var(--navy);text-decoration:none}
a:hover{text-decoration:underline}
/* Attribution is in the contact form's footnote, as Google's terms allow. */
.grecaptcha-badge{visibility:hidden!important}

/* ==== masthead and footer: start ====
   The same block as glasshood.ai's; with BatchGuard's logo (the one 9robots.ai uses). */
.nav{background:#fff;background-image:linear-gradient(to left,var(--border),transparent 95%);
  background-size:100% 1px;background-position:bottom;background-repeat:no-repeat}
.nav-in{max-width:var(--site-max);margin:0 auto;padding:0 24px;height:var(--masthead-h);
  display:flex;align-items:center}
.nav-logo{display:block;flex-shrink:0}
.nav-logo:hover{text-decoration:none}
/* The logo is as tall as 9robots.ai's: 43 px, and 39 px below 768 px. Its image is cut so the
   icon and the word have 9robots.ai's proportions and fill the same share of the height. It is
   always shown at full strength, here and in the footer: never faded, not changed when pointed at. */
.nav-logo img{display:block;height:43px;width:auto}
@media (max-width:767px){.nav-logo img{height:39px}}
.nav-links{display:flex;align-items:center;gap:24px;margin-left:auto}
.nav-links a{padding:6px 12px 4px;border-bottom:2px solid transparent;color:var(--nav-sub);
  font-size:16px;font-weight:500;white-space:nowrap;text-decoration:none;transition:color .15s ease}
.nav-links a:hover{color:var(--orange);text-decoration:none}
.nav-links a[aria-current="page"]{color:var(--blue);border-bottom-color:var(--blue)}
.nav-app{display:flex;align-items:center;gap:16px;margin-left:28px;flex-shrink:0}
.nav-open{display:inline-block;padding:8px 18px;border:1px solid rgba(0,0,0,.12);border-radius:12px;
  color:var(--sub);font-size:16px;font-weight:500;white-space:nowrap;text-decoration:none;
  transition:border-color .15s ease,color .15s ease,background .15s ease,box-shadow .15s ease}
.nav-open:hover{background:var(--blue);border-color:var(--blue);color:#fff;
  box-shadow:0 4px 16px rgba(0,0,0,.12);text-decoration:none}
.nav-links a:focus-visible,.nav-open:focus-visible,.nav-logo:focus-visible,.site-footer-link:focus-visible{
  outline:2px solid var(--navy);outline-offset:2px}
.page-title{margin:0 0 16px;font-size:28px;line-height:1.25;font-weight:700;color:var(--blue)}
.footer{margin:0;padding:0;border-top:1px solid var(--border);background:var(--muted);
  font-size:16px;line-height:1.6;color:var(--sub)}
.site-footer-row{max-width:var(--site-max);margin:0 auto;padding:40px 24px;display:flex;
  align-items:center;justify-content:space-between;gap:24px}
.site-footer-brand img{display:block;height:28px;width:auto}
.site-footer-brand p{margin:10px 0 0;font-size:14px;color:var(--nav-sub)}
.site-footer-links{display:flex;flex-wrap:wrap;gap:8px 28px}
.site-footer-link{font-size:14px;color:var(--nav-sub);text-decoration:none;transition:color .15s ease}
.site-footer-link:hover{color:var(--orange);text-decoration:none}
/* Below 768 px the logo and Log in share the first row and the page links take a
   second, so nothing is squeezed (the logo never shrinks); Log in keeps 24 px from the logo.
   From 768 px one row holds everything with at least 32 px between the logo and the links. */
@media (max-width:767px){
  .nav-in{height:auto;flex-wrap:wrap;align-items:center;row-gap:10px;padding-top:14px;padding-bottom:8px}
  .nav-logo{margin-right:24px}
  .nav-links{order:3;width:100%;gap:4px;margin-left:-10px}
  .nav-links a{padding:6px 10px 4px}
  .nav-app{flex-direction:column-reverse;align-items:flex-end;gap:4px;margin-left:auto}
  .site-footer-row{flex-direction:column;align-items:flex-start}
}
/* On phones up to 480 px Log in is a little smaller and keeps at least 12 px from the logo, so
   the logo, as tall as 9robots.ai's, and Log in share the first row from 348 px up; narrower
   phones give Log in a row of its own. */
@media (max-width:480px){
  .nav-logo{margin-right:12px}
  .nav-open{padding:6px 12px;font-size:15px}
}
/* ==== masthead and footer: end ==== */


/* ---- Page body */
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px;width:100%}

/* Buttons: an outlined button that fills with GlassHood's blue when pointed at. */
.button{display:inline-block;padding:12px 20px;border-radius:12px;border:1px solid rgba(0,0,0,.12);
  background:transparent;font:inherit;font-size:19px;font-weight:500;line-height:1.6;color:var(--sub);
  cursor:pointer;text-decoration:none;
  transition:border-color .15s ease,color .15s ease,background .15s ease,box-shadow .15s ease}
.button:hover{background:var(--blue);border-color:var(--blue);color:#fff;
  box-shadow:0 4px 16px rgba(0,0,0,.12);text-decoration:none}
.button:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.button:disabled{opacity:.5;cursor:default}
.button:disabled:hover{background:transparent;border-color:rgba(0,0,0,.12);color:var(--sub);box-shadow:none}

/* Home: the hero is built like 9robots.ai's, in its blue and orange. */
.hero{position:relative}
.hero-body{position:relative;padding-top:104px;padding-bottom:80px}
.hero-title{margin:0 0 32px;max-width:820px;font-size:clamp(32px,4vw,48px);line-height:1.15;
  font-weight:700;letter-spacing:-.02em}
.hero-title-first{color:var(--orange)}
.hero-title-rest{color:var(--blue)}
.hero-text{margin:0 0 40px;max-width:660px;font-size:19px;line-height:1.55;color:var(--sub)}
.cta{display:flex;flex-wrap:wrap;gap:12px}

/* Home: the capability cards, with icons, as on the 9robots.ai product pages. */
.features{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding-bottom:96px}
.feature{padding:24px;background:#fff;border:1px solid var(--border);border-radius:12px}
.feature-title{margin:0 0 10px;font-size:20px;line-height:1.3;font-weight:700;color:var(--text);letter-spacing:-.01em}
.feature-text{margin:0;font-size:17px;line-height:1.55;color:var(--sub)}
/* Each card opens its section below, as the architecture page's top cards do: the same pointer
   effects, and /architecture/app.js reveals the sections and scrolls to the chosen one. */
.pd-card{display:block;position:relative;overflow:hidden;color:inherit;cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.pd-card,.pd-card *{text-decoration:none!important}
.pd-card:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.06);border-color:var(--blue)}
.pd-card:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.pd-card .feature-text::after{content:"Click to read the section →";display:block;margin-top:14px;
  font-size:17px;font-weight:500;color:rgba(0,0,0,.25);transition:opacity .15s ease}
.pd-card:hover .feature-text::after{opacity:0}
.pd-card-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .18s ease;pointer-events:none;border-radius:inherit}
.pd-card:hover .pd-card-overlay{opacity:1}
.pd-card-overlay-text{display:inline-flex;align-items:center;gap:8px;background:var(--blue);color:#fff;
  padding:10px 14px;border-radius:12px;font-size:17px;font-weight:500;box-shadow:0 4px 16px rgba(0,0,0,.12);
  white-space:nowrap}
/* Sections are visible on load; the cards scroll to them. */
.pd-hidden-until-reveal{display:block;padding-bottom:96px}
.features{padding-bottom:24px}
.home-detail{padding-top:28px;padding-bottom:28px;scroll-margin-top:24px}
.home-detail h2{margin:0 0 14px;font-size:22px;line-height:1.3;font-weight:700;color:var(--blue);letter-spacing:-.01em}
.home-detail p{margin:0;max-width:760px;font-size:19px;line-height:1.55;color:var(--sub)}
/* How it works holds parts, each under its own heading, and ends with the button to the architecture page. */
.home-detail h3{margin:22px 0 6px;font-size:18px;line-height:1.35;font-weight:700;color:var(--navy)}
.home-detail h2 + h3{margin-top:0}
/* How it works lists the deck's points (REQ-GHA-018, fifth amendment of 2026-11-07); the same rules as testrobin.ai's. */
.home-detail ul{margin:0;padding-left:24px;max-width:760px;list-style:disc}
.home-detail li{font-size:19px;line-height:1.55;color:var(--sub)}
.home-detail li + li{margin-top:8px}
.home-detail-cta{margin-top:26px}

/* Contact and the not-found page */
.page{padding-top:64px;padding-bottom:96px}
.page-lead{margin:0 0 32px;max-width:760px;font-size:19px;line-height:1.55;color:var(--sub)}

/* The contact form: a label above each field, required fields marked, name and email
   side by side where there is room. */
.form{display:flex;flex-direction:column;gap:20px;max-width:640px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-field{display:flex;flex-direction:column}
.form-label{display:block;margin-bottom:8px;font-size:19px;font-weight:500;color:var(--text)}
.form-label-required::after{content:" *";color:var(--orange)}
.field{width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:8px;background:#fff;
  font:inherit;font-size:19px;line-height:1.4;color:var(--text);outline:none;transition:border-color .15s ease}
.field:focus{border-color:var(--blue)}
textarea.field{resize:vertical;min-height:120px}
.form-help{margin:0;font-size:17px;line-height:1.55;color:var(--sub)}
.form-help-mark{color:var(--orange)}
.form .button{align-self:flex-start}
.form-status{margin:0 0 8px;font-size:17px;color:var(--sub)}
.form-status:empty{margin:0}
.form-note{margin:0;font-size:13px;line-height:1.5;color:var(--nav-sub)}
.form-note a{color:inherit;text-decoration:underline}
.form-note a:hover{color:var(--orange)}

@media (max-width:900px){
  .features{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:767px){
  .hero-body{padding-top:56px;padding-bottom:48px}
  .hero-text{margin-bottom:32px}
  .features{padding-bottom:24px}
  .pd-hidden-until-reveal{padding-bottom:64px}
  .page{padding-top:40px;padding-bottom:64px}
}
@media (max-width:600px){
  .form-row{grid-template-columns:1fr}
}

/* Architecture page: the flow as numbered steps, and short notes on what is and is not claimed. */
.flow{list-style:none;counter-reset:step;margin:0;padding:0;max-width:760px}
.flow li{counter-increment:step;position:relative;padding:0 0 0 48px;font-size:19px;line-height:1.55;color:var(--sub)}
.flow li + li{margin-top:16px}
.flow li::before{content:counter(step);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;
  background:var(--blue);color:#fff;font-size:16px;font-weight:700;line-height:32px;text-align:center}
.flow strong{color:var(--text)}

/* Login: the live demo first, then the form, which has no backend in phase 1. */
.login{display:grid;grid-template-columns:1fr 1fr;gap:32px;max-width:960px}
.login-box{padding:28px;border:1px solid var(--border);border-radius:12px;background:#fff}
.login-box h2{margin:0 0 12px;font-size:22px;line-height:1.3;color:var(--blue)}
.login-box p{margin:0 0 20px;font-size:17px;line-height:1.55;color:var(--sub)}
.button-primary{background:var(--blue);border-color:var(--blue);color:#fff}
.login .form{gap:16px}
@media (max-width:767px){.login{grid-template-columns:1fr}}