/* ============================================================
   DAY91 — masthead redesign
   Two groups (Tools, Issues) + one standing action (Subscribe).
   Additive only: nothing here overrides styles.css tokens.
   ============================================================ */

.masthead-in { gap: 1rem; }

.nav2 { display: flex; align-items: center; gap: .35rem; margin-left: auto; }

.nav2 .grp { position: relative; }

.nav2 .top,
.nav2 > a.lone {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--display); font-size: .93rem; font-weight: 500;
  color: var(--ink); text-decoration: none;
  padding: .45rem .6rem; border-radius: 8px; border: 1px solid transparent;
  background: none; cursor: pointer; line-height: 1;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.nav2 .top:hover, .nav2 > a.lone:hover,
.nav2 .grp[data-open="1"] .top { background: #EAF5EE; color: var(--signal-ink); }
.nav2 .top .car {
  width: 8px; height: 8px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-1px,-1px); opacity: .5;
  transition: transform .22s cubic-bezier(.2,.7,.2,1), opacity .2s ease;
}
.nav2 .grp[data-open="1"] .top .car { transform: rotate(-135deg) translate(-2px,-2px); opacity: 1; }

/* MCP alpha badge */
.nav2 > a.lone em.alpha {
  font-family: var(--mono); font-style: normal; font-size: .6rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--signal);
  background: #EAF5EE; padding: .08rem .28rem; border-radius: 5px; margin-left: .15rem;
}
.nav2 > a.lone:hover em.alpha { background: var(--signal); color: #fff; }

/* ---- panel ---- */
.nav2 .panel {
  position: absolute; top: calc(100% + .5rem); left: -.35rem; z-index: 60;
  min-width: 21rem; padding: .45rem;
  background: var(--paper-3); border: 1px solid var(--rule); border-radius: 12px;
  box-shadow: 0 18px 40px -18px rgba(10,87,48,.28), 0 2px 0 rgba(0,0,0,.02);
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.985);
  transform-origin: top left;
  transition: opacity .18s ease, transform .22s cubic-bezier(.2,.7,.2,1), visibility .18s;
}
.nav2 .grp[data-open="1"] .panel { opacity: 1; visibility: visible; transform: none; }

.nav2 .panel a {
  display: block; position: relative;
  padding: .55rem 1.5rem .55rem .6rem; border-radius: 9px; text-decoration: none; color: var(--ink);
  transition: background .16s ease;
}
.nav2 .panel a:hover { background: #F1F8F4; }
.nav2 .panel a .n { font-family: var(--mono); font-size: .68rem; color: var(--signal); letter-spacing: .06em; margin-right: .5rem; }
.nav2 .panel a strong { font-family: var(--display); font-size: .93rem; font-weight: 600; letter-spacing: -.01em; }
.nav2 .panel a em {
  font-family: var(--mono); font-style: normal; font-size: .62rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); margin-left: .5rem;
}
.nav2 .panel a span.d {
  display: block; margin-top: .15rem; font-size: .85rem; color: var(--muted); line-height: 1.45;
}
.nav2 .panel a .arw {
  position: absolute; top: .5rem; right: .55rem; font-style: normal; color: var(--signal);
  opacity: 0; transform: translateX(-4px); transition: all .18s ease;
}
.nav2 .panel a:hover .arw { opacity: 1; transform: none; }

.nav2 .panel .foot {
  margin: .35rem .25rem .15rem; padding-top: .5rem; border-top: 1px solid var(--rule-soft);
  font-family: var(--mono); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--faint);
}

/* ---- standing action ---- */
.nav2 .sub {
  margin-left: .4rem;
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--display); font-size: .9rem; font-weight: 600;
  background: var(--signal); color: #fff; text-decoration: none;
  padding: .5rem .85rem; border-radius: 9px; border: 1px solid var(--signal);
  transition: background .18s ease, transform .18s cubic-bezier(.2,.7,.2,1);
}
.nav2 .sub:hover { background: var(--signal-ink); color: #fff; transform: translateY(-1px); }
.nav2 .sub .pip { width: 6px; height: 6px; border-radius: 50%; background: #9FE3BE; }
@media (prefers-reduced-motion: no-preference) {
  .nav2 .sub .pip { animation: navpip 2.4s ease-in-out infinite; }
}
@keyframes navpip { 0%,100% { opacity: .45 } 50% { opacity: 1 } }

@media (max-width: 61.99rem) {
  .nav2 .panel { min-width: 17rem; left: auto; right: -.35rem; transform-origin: top right; }
  .nav2 .panel a span.d { display: none; }
}
@media (max-width: 40rem) {
  .nav2 > a.lone { display: none; }
  .nav2 .sub { padding: .45rem .65rem; font-size: .82rem; }
}

/* ---- homepage subscribe fold ---- */
.subfold {
  border: 1px solid var(--rule); border-radius: 14px; background: var(--paper-3);
  padding: 2rem 1.75rem; display: grid; gap: 1rem; position: relative; overflow: hidden;
}
.subfold::after {
  content: ""; position: absolute; inset: auto -20% -60% auto; width: 22rem; height: 22rem;
  background: radial-gradient(circle, rgba(15,122,69,.10), transparent 70%); pointer-events: none;
}
.subfold h2 { margin: 0; }
.subfold p { margin: 0; color: var(--muted); max-width: 34rem; }
.subfold .terms {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--faint);
}

/* ---- tools panel: two-column grid so all eight fit in one view ---- */
.nav2 .panel.cols {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .1rem .35rem; min-width: 38rem; padding: .5rem;
  left: auto; right: -.35rem; transform-origin: top right;
}
.nav2 .panel.cols .foot { grid-column: 1 / -1; }
.nav2 .panel.cols a {
  padding: .45rem 1.4rem .45rem .62rem; border-left: 2px solid transparent;
}
.nav2 .panel.cols a:hover { border-left-color: var(--h, var(--signal)); background: #F1F8F4; }
.nav2 .panel.cols a .n { color: var(--h, var(--signal)); }
.nav2 .panel.cols a strong { font-size: .9rem; }
.nav2 .panel.cols a span.d { font-size: .78rem; margin-top: .1rem; line-height: 1.35; }
.nav2 .panel.cols a .arw { top: .42rem; color: var(--h, var(--signal)); }

@media (max-width: 61.99rem) {
  .nav2 .panel.cols { min-width: 30rem; }
  .nav2 .panel.cols a span.d { display: none; }
}
@media (max-width: 34rem) {
  .nav2 .panel.cols { min-width: 16rem; grid-template-columns: 1fr; }
}