/* glasshood.ai — the public site (REQ-GHA-018 clauses 1 and 14): as neat and tidy as
   9robots.ai, in 9robots.ai's blue and orange, which are also the colours of GlassHood's logo. Plain CSS, no build
   step. The masthead and footer block below is shared word for word with
   architecture/styles.css, so the architecture page carries the same masthead and footer;
   a test keeps the two equal. */

@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/lato-400.woff2) format('woff2')}
@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;
  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 ====
   architecture/styles.css carries this block word for word; a test keeps them equal. */
.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}
/* 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}
.pd-hidden-until-reveal{display:none}
.pd-page.revealed .pd-hidden-until-reveal{display:block;padding-bottom:96px}
.pd-page.revealed .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:64px}
  .pd-page.revealed .pd-hidden-until-reveal{padding-bottom:64px}
  .page{padding-top:40px;padding-bottom:64px}
}
@media (max-width:600px){
  .form-row{grid-template-columns:1fr}
}