@charset "utf-8";
/* CSS Document */
:root{
  --navy:#1E3A8A; --blue:#2563EB; --slate:#1F2937; --line:#E5E7EB; --bg:#fff;
}
*{box-sizing:border-box} body{margin:0;font:16px/1.6 Inter,system-ui,Segoe UI,Arial;color:var(--slate);background:#fff}
.wrap{max-width:980px;margin:0 auto;padding:20px}
nav{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-bottom:1px solid var(--line)}
.brand{font-weight:700;color:var(--navy);text-decoration:none}
.links a{margin-left:14px;text-decoration:none;color:var(--slate)}
.hero{padding:40px 0}
h1{font-size:32px;line-height:1.2;color:var(--navy);margin:0 0 10px}
h2{color:var(--navy)}
.btn{display:inline-block;background:var(--navy);color:#fff;text-decoration:none;padding:10px 14px;border-radius:8px;font-weight:600}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--slate)}
.card{border:1px solid var(--line);border-radius:12px;padding:20px;margin:20px 0}
.grid{display:grid;gap:16px}
@media(min-width:800px){.grid.cols-3{grid-template-columns:repeat(3,1fr)} .grid.cols-2{grid-template-columns:repeat(2,1fr)}}
label{display:block;font-weight:600;margin:10px 0 4px}
input,select,textarea{width:100%;padding:8px;border:1px solid var(--line);border-radius:8px}
small.note{color:#6B7280}
footer{border-top:1px solid var(--line);margin-top:40px}

/* Verify accordion */
.acc { border:1px solid #E5E7EB; border-radius:12px; padding:.75rem 1rem; margin:.75rem 0; }
.acc > summary { cursor:pointer; outline:none; }
.acc[open] { background:#FAFAFB; }
.code { background:#0B1020; color:#E6EDF3; padding:.5rem .75rem; border-radius:8px; overflow:auto; }
.verifier { display:grid; gap:.5rem; margin-top:.5rem; max-width:640px; }
.verifier input[type="file"] { padding:.4rem; border:1px solid #E5E7EB; border-radius:8px; background:#fff; }
.verifier input[type="text"], .verifier input:not([type]) { width:100%; padding:.5rem .6rem; border:1px solid #E5E7EB; border-radius:8px; }
.hash-out { display:block; margin-top:.5rem; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; }
.hash-out.ok { color:#065F46; }     /* green-ish */
.hash-out.bad { color:#991B1B; }    /* red-ish */

/* --- Nav dropdowns --- */
header .links { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }

/* container */
.dropdown { position: relative; }

/* trigger button looks like a link */
.dropbtn {
  background: transparent;
  border: none;
  font: inherit;
  color: inherit;
  padding: 8px 10px;
  cursor: pointer;
}
.dropbtn:focus { outline: 2px solid #2563EB; outline-offset: 2px; border-radius: 6px; }
.caret { margin-left: 4px; font-size: 0.9em; opacity: .8; }

/* menu panel */
.dropdown .menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  margin-top: 6px;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  display: none; /* hidden by default */
  z-index: 50;
}

/* show on hover/focus for desktop/keyboard */
.dropdown:hover .menu,
.dropdown:focus-within .menu {
  display: block;
}

/* menu items */
.dropdown .menu a {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  color: #1F2937;
  text-decoration: none;
  white-space: nowrap;
}
.dropdown .menu a:hover,
.dropdown .menu a:focus {
  background: #F3F4F6;
}

/* If your header has a dark background, invert the panel as needed:
header { background:#0a1a47; }
.dropdown .menu { background:#0b1f5b; border-color:#203677; }
.dropdown .menu a { color:#e6ecff; }
.dropdown .menu a:hover { background:#0a1a47; }
*/
.has-sub { position: relative; display: inline-flex; align-items: center; gap:.25rem; }
.has-sub .sub-toggle { background:transparent; border:0; cursor:pointer; font-size:0.9rem; line-height:1; }
.has-sub .sub { position:absolute; top:100%; left:0; min-width:220px; padding:.5rem 0; margin:0; list-style:none;
  background:#fff; border:1px solid #E5E7EB; border-radius:.5rem; box-shadow:0 8px 24px rgba(0,0,0,.08); display:none; }
.has-sub .sub a { display:block; padding:.5rem .75rem; }
.has-sub:hover .sub { display:block; }            /* desktop hover */
.has-sub:focus-within .sub { display:block; }    /* keyboard */
@media (max-width: 800px) {
  .has-sub .sub { position:static; border:0; box-shadow:none; display:none; }
  .has-sub[aria-expanded="true"] .sub,
  .has-sub.open .sub { display:block; }
}
/* make the dropdown node space like a link */
header .links .has-sub { margin-left:14px; position:relative; display:inline-flex; align-items:center; gap:.25rem; }
.has-sub .sub { z-index:1000; margin-top:6px; }
.has-sub .sub-toggle { cursor:pointer; }


/* keep the panel above everything & remove hover “gap” glitches */
.has-sub .sub { z-index: 1000; margin-top: 6px; }

/* optional: show a pointer on the caret button */
.has-sub .sub-toggle { cursor: pointer; }

/* Receipts block: keep the image aligned with the H2 (top) */
#receipts { align-items: start; }           /* override any center alignment from .grid */
#receipts figure { margin: 0; align-self: start; }
#receipts img { display:block; width:100%; height:auto; }

/* (nice-to-have) set a sensible right column width on wide screens */
@media (min-width: 880px) {
  #receipts { grid-template-columns: 1fr minmax(320px, 460px); }
}

/* Mobile: stack image above text if you prefer */
@media (max-width: 700px) {
  #receipts { grid-template-columns: 1fr; }
  #receipts figure { order: -1; margin-bottom: 12px; }
}

/* Inline spinner for primary button */
.btn { position: relative; display: inline-flex; align-items: center; }
.btn .spinner {
  width: 16px; height: 16px;
  border: 2px solid transparent;
  border-top-color: #fff; border-right-color: #fff;
  border-radius: 50%;
  margin-left: 8px; display: none;
  animation: pw7spin .8s linear infinite;
}
.btn[aria-busy="true"] .spinner { display: inline-block; }
.btn[aria-busy="true"] .btn-label { opacity: .9; }

@keyframes pw7spin { to { transform: rotate(360deg); } }

/* Add once to /css/pw7.css */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap; /* prevent line breaks */
  border: 0;
}
/* add to pw7.css */
#covenant { border-left: 4px solid #2563EB; padding-left: 14px; }
#covenant h3 { margin-top: 0; }

/* Market target pills — centered and tidy */
.market-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;     /* centers on all sizes */
  gap: .5rem .75rem;            /* row gap / column gap */
  margin: 12px 0 20px;
}

/* Optional: give each pill a consistent hit area */
.market-links .btn-ghost {
  min-width: 12ch;
  text-align: center;
}

/* If you prefer a slightly tighter desktop look only */
@media (min-width: 900px) {
  .market-links { gap: .5rem 1rem; }
}