/* ==========================================================================
   AGN website look — brand theme
   ==========================================================================
   Palette, type and components matching hs.agn.tech. Drop this in, link it,
   and use the topbar / footer partials next to it.

   Two departures from the marketing site, both deliberate, both about
   contrast on screens people read rather than scroll past:

     - Accent TEXT is --series-1 #9A6512, a deeper gold. The site's own
       #BC822D is 3.3:1 on white; #9A6512 clears 4.5:1 as text AND as a fill
       under white text, so one token does every accent job.
     - Fills in --brand-gold carry near-black text, not the site's white
       (7.4:1 rather than 2.3:1). The gold is what reads as AGN; the text
       colour on top of it is not doing brand work.

   Light-only, because hs.agn.tech is. A dark variant would mean anyone whose
   OS prefers dark never sees the brand theme at all.
   ========================================================================== */

/* AGN palette, matching hs.agn.tech and agn-hubspot-web: white ground,
   near-black text, brand gold #DE9D34 on CTAs. Accent TEXT uses the deeper
   --series-1 #9A6512, which clears 4.5:1 on white where the site's own
   #BC822D manages 3.3:1; gold fills carry near-black text rather than the
   site's white, for the same reason. Light-only, because hs.agn.tech is -
   a dark variant here would mean most people never see the brand theme. */
:root{
  --surface-1:#f6f6f4; --card-bg:#fff;
  --text-primary:#1a1a1a; --text-secondary:#4a4a48; --text-muted:#767472;
  --gridline:#e6e5e1; --brand-gold:#de9d34; --brand-gold-dim:#f0d9ad;
  --series-1:#9a6512; --series-1-wash:rgba(154,101,18,.10);
  --status-good:#1f7a3d; --status-warning:#a76a08; --status-critical:#c0392b;
  --border:rgba(26,26,26,0.12); --shadow-soft:0 5px 10px 0 rgba(154,161,177,.10);
  --warn-bg:#fdf3ef; --warn-border:#e6ccc4; --warn-text:#8a4b32;
}
*{box-sizing:border-box}
body{font-family:Inter,-apple-system,Segoe UI,Roboto,sans-serif;margin:0;
  background:var(--surface-1);color:var(--text-primary);-webkit-font-smoothing:antialiased}
/* hs.agn.tech's binary-digit backdrop, on the pages an outsider sees.
   The source PNG is OPAQUE white with faint grey digits, so painting it
   directly would replace this app's warm off-white ground with pure white -
   and the cards, which are white with a hairline border, would lose their
   edge against it. background-blend-mode:multiply solves that without
   touching the image: white multiplies to the ground colour underneath
   (leaving it exactly as it was) and only the grey digits darken it.
   Position 50% 50% and cover match hs.agn.tech exactly. `fixed` is ours,
   not theirs: their pattern sits on one tall hero row, while these pages are
   short, and a scrolling backdrop on a short page just slides the crop
   around. Fixed keeps it still and shows the same crop.
   Browsers without blend-mode support fall back to the flat ground, which
   is what the page looked like yesterday - so nothing breaks. */
body.binary-bg{background-image:url("/bg-binary.png");
  background-size:cover;background-position:50% 50%;
  background-repeat:no-repeat;background-attachment:fixed;
  background-blend-mode:multiply}
@media (max-width:720px){
  /* Fixed attachment is expensive to scroll on mobile and the pattern is
     mostly off-canvas at that width anyway. */
  body.binary-bg{background-attachment:scroll}
}
h1,h2,h3,legend,th,.eyebrow{font-family:Rubik,Inter,-apple-system,Segoe UI,Roboto,sans-serif}
.wrap{max-width:980px;margin:0 auto;padding:16px 20px 60px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
/* The site's header: white, no border, one soft shadow. The logo art has no
   alpha channel, so it only sits cleanly on white - keep it there. */
.topbar{position:sticky;top:0;background:#fff;padding:12px 24px;display:flex;
  justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;
  z-index:10;box-shadow:var(--shadow-soft)}
.topbar .brand{display:flex;align-items:baseline;gap:10px;text-decoration:none;color:inherit}
.topbar .brand img{height:34px;width:auto;display:block}
.topbar .brand .app{font-family:Rubik,Inter,sans-serif;font-size:15px;font-weight:500;
  color:var(--text-secondary);letter-spacing:.01em;padding-left:10px;
  border-left:1px solid var(--border);align-self:center;line-height:1.6}
.topbar .tag{font-size:12px;color:var(--text-secondary)}
/* The AGN mark doubles as a menu on the public page. <details> rather than
   scripted state: it is keyboard-operable and works with JS off, and this is
   the one page an outsider lands on. */
.brandmenu{position:relative}
.brandmenu>summary{list-style:none;cursor:pointer;display:flex;
  align-items:baseline;gap:10px;color:inherit}
.brandmenu>summary::-webkit-details-marker{display:none}
.brandmenu>summary::marker{content:""}
.brandmenu>summary:focus-visible{outline:2px solid var(--series-1);outline-offset:3px}
.brandmenu .caret{font-size:10px;color:var(--text-muted);align-self:center}
.brandmenu[open] .caret{color:var(--series-1)}
/* Right-hand menus open toward the left edge, or they run off the page. */
.brandmenu.right>summary{display:flex;align-items:center;gap:6px}
.brandmenu.right .menu{left:auto;right:0}
.brandmenu .menu{position:absolute;left:0;top:calc(100% + 10px);z-index:20;
  min-width:210px;background:var(--card-bg);border:1px solid var(--border);
  border-radius:8px;box-shadow:0 8px 20px rgba(26,26,26,.12);padding:6px}
.brandmenu .menu a{display:block;padding:9px 12px;border-radius:5px;
  font-size:13px;font-weight:600;color:var(--text-primary);text-decoration:none}
.brandmenu .menu a:hover{background:var(--series-1-wash);color:var(--series-1);
  text-decoration:none}
.brandmenu .menu .sub{display:block;padding:2px 12px 8px;font-size:11px;
  color:var(--text-muted);font-weight:400}
.topbar .userbar{display:flex;align-items:center;gap:12px}
.topbar .userbar button{padding:6px 12px;font-size:11px}
header{margin:18px 0 4px}
.eyebrow{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--text-muted);font-weight:700;margin-bottom:6px}
h1{font-size:24px;margin:0 0 6px;font-weight:700;letter-spacing:-.01em}
h2{font-size:16px;margin:0 0 8px;font-weight:600;letter-spacing:-.01em}
p{margin:0 0 10px;line-height:1.55;font-size:14px;color:var(--text-secondary)}
.lede{font-size:14px;max-width:70ch}
a{color:var(--series-1)}
a:hover{text-decoration:underline}
.card{background:var(--card-bg);border:1px solid var(--border);border-radius:10px;
  padding:18px 20px;margin:16px 0;box-shadow:var(--shadow-soft)}
label{display:block;font-size:13px;font-weight:600;margin:0 0 12px}
label .hint{display:block;font-weight:400}
.hint{font-size:12px;color:var(--text-muted);margin-top:3px;line-height:1.5}
input[type=text],input[type=password],input[type=email]{width:100%;padding:9px 11px;
  border:1px solid var(--border);border-radius:8px;font:inherit;font-size:14px;
  margin-top:5px;background:var(--card-bg);color:var(--text-primary)}
input[type=text]:focus,input[type=password]:focus,input[type=email]:focus{
  outline:none;border-color:var(--brand-gold);box-shadow:0 0 0 3px var(--series-1-wash)}
input:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--series-1);outline-offset:2px}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
fieldset{border:1px solid var(--border);border-radius:8px;padding:12px 14px;margin:0 0 14px}
legend{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);
  font-weight:700;padding:0 6px}
.opts{display:flex;flex-wrap:wrap;gap:8px 20px}
.opt{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:400;margin:0}
.opt input{width:auto;margin:0}
/* hs.agn.tech's CTA shape: 3px corners, 12px/700, .36px tracking. */
button{font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.36px;
  border:1px solid transparent;border-radius:3px;padding:10px 20px;cursor:pointer;
  background:var(--brand-gold);border-color:var(--brand-gold);color:#1a1a1a}
button:hover:not([disabled]){background:#c98a26;border-color:#c98a26}
button.ghost{background:transparent;color:var(--text-secondary);border-color:var(--border)}
button.ghost:hover:not([disabled]){border-color:var(--brand-gold);color:var(--series-1);background:transparent}
button.danger{background:transparent;color:var(--status-critical);border-color:var(--status-critical)}
button.danger:hover:not([disabled]){background:var(--status-critical);color:#fff}
button[disabled]{opacity:.5;cursor:not-allowed}
.actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px}
.note{border-radius:8px;padding:11px 13px;font-size:13px;margin:12px 0;
  background:var(--surface-1);border:1px solid var(--border);color:var(--text-secondary)}
.note p{font-size:13px;margin:0 0 6px}
.note p:last-child{margin-bottom:0}
.note .nt{display:block;font-weight:700;font-size:12px;margin-bottom:5px;color:var(--text-primary)}
.note-gap{background:var(--series-1-wash);border-color:var(--brand-gold-dim)}
.note-gap .nt{color:var(--series-1)}
.note-warn{background:var(--warn-bg);border-color:var(--warn-border);color:var(--warn-text)}
.note-warn .nt{color:var(--warn-text)}
.note-acc{background:var(--card-bg)}
.note-acc .nt{color:var(--text-primary)}
.meta{font-size:12px;color:var(--text-muted);margin-bottom:10px}
details{margin:10px 0}
summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--text-secondary)}
summary:hover{color:var(--series-1)}
.tw{overflow-x:auto;margin-top:8px}
table{width:100%;border-collapse:collapse;font-size:13px;min-width:520px}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.03em;
  color:var(--text-muted);font-weight:700;padding:6px 8px;border-bottom:2px solid var(--gridline)}
td{padding:7px 8px;border-bottom:1px solid var(--gridline);vertical-align:top}
.err{color:var(--status-critical);font-size:13px;font-weight:600}
.hidden{display:none !important}
/* Site footer, rebuilt from hs.agn.tech's own: same content, structure and
   colours, our markup and tokens. Measured off the live site rather than
   guessed - background rgb(30,30,30), white text, 18px/700 column headings
   with no uppercasing, 14px links.

   The mark here is logo-footer.svg, AGN's transparent gold-and-white
   artwork. logo.png (used in the top bar) is dark art on an OPAQUE white
   ground - the source PNG has no alpha - so it would sit in a white box on
   this background. Two grounds, two assets. */
.sitefooter{background:#1e1e1e;color:#fff;margin-top:48px;padding:44px 20px 26px}
.sitefooter .inner{max-width:980px;margin:0 auto;display:grid;
  grid-template-columns:minmax(240px,1.4fr) repeat(3,minmax(130px,1fr));gap:30px}
.sitefooter .about img{height:52px;width:auto;display:block;margin-bottom:14px}
.sitefooter .tagline{font-size:14px;color:#fff;margin:0 0 16px;max-width:32ch;
  line-height:1.5}
.sitefooter h3{font-family:Rubik,Inter,sans-serif;font-size:18px;
  color:#fff;font-weight:700;margin:0 0 12px;letter-spacing:0;
  text-transform:none}
.sitefooter ul{list-style:none;margin:0;padding:0}
.sitefooter li{margin:0 0 9px}
.sitefooter a{font-size:14px;color:#fff;text-decoration:none}
.sitefooter a:hover{color:var(--brand-gold);text-decoration:underline}
.sitefooter .social a{display:inline-flex;align-items:center;gap:7px}
.sitefooter .social svg{width:18px;height:18px;fill:#fff}
.sitefooter .social a:hover svg{fill:var(--brand-gold)}
.sitefooter .legal{max-width:980px;margin:30px auto 0;padding-top:18px;
  border-top:1px solid rgba(255,255,255,.16);font-size:14px;color:#fff}
@media (max-width:720px){
  .sitefooter .inner{grid-template-columns:1fr;gap:24px}
}