/* Batch announcement bar + batch panel — The Align. */

.batch-bar {
  position: relative;
  z-index: 120;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 16px;
  padding: 9px 18px;
  background: var(--ink, #151221);
  color: #E4E1EA;
  font-size: .78rem;
  text-align: center;
}
.batch-bar b { color: #fff; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .68rem; }
.batch-bar .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--violet, #6A3FE0); }
.batch-bar a { color: #CFC4FF; font-weight: 600; text-underline-offset: 3px; }
.batch-bar a:hover { color: #fff; }

/* ---- batch panel ---- */
.batch { background: var(--white, #fff); }
.batch-panel {
  display: grid;
  overflow: hidden;
  margin-top: 34px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--cream, #F4F1EA);
  grid-template-columns: 1.15fr .85fr;
}
.batch-main { padding: clamp(26px, 4vw, 44px); }
.batch-kicker { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 14px; color: var(--violet-dark, #5324C4); font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.batch-kicker i { width: 7px; height: 7px; border-radius: 50%; background: var(--violet, #6A3FE0); }
.batch-main h3 { margin: 0 0 10px; font-size: clamp(1.7rem, 3.2vw, 2.5rem); font-weight: 500; letter-spacing: -.04em; line-height: 1.05; }
.batch-main > p { max-width: 46ch; margin: 0 0 22px; color: var(--ink-soft); font-size: .95rem; }

.batch-facts { display: grid; margin: 0; gap: 0; }
/* [hidden] only sets display:none at UA specificity, so any display rule
   below beats it. Restore it explicitly for the rows we hide from JS. */
.batch-facts div[hidden], .batch-progress[hidden] { display: none !important; }
.batch-facts div { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 13px 0; border-top: 1px solid var(--line); }
.batch-facts dt { color: var(--muted, #6E6858); font-size: .8rem; }
.batch-facts dd { margin: 0; font-size: .93rem; font-weight: 600; font-variant-numeric: tabular-nums; }

.batch-progress { margin-top: 20px; }
.batch-progress .track { position: relative; height: 6px; overflow: hidden; border-radius: 999px; background: rgba(21,18,33,.1); }
.batch-progress .track i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 999px; background: var(--violet, #6A3FE0); transition: width .8s cubic-bezier(.22,1,.36,1); }
.batch-progress p { margin: 9px 0 0; color: var(--muted, #6E6858); font-size: .78rem; }

.batch-side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(26px, 4vw, 44px);
  border-left: 1px solid var(--line);
  background: var(--white, #fff);
}
.batch-price { display: flex; align-items: baseline; gap: 10px; }
.batch-price strong { font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 500; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.batch-price s { color: var(--muted, #6E6858); font-size: .95rem; }
.batch-side .pre-note { margin: 14px 0 20px; padding: 11px 13px; border-radius: 11px; background: rgba(106,63,224,.07); color: var(--violet-dark, #5324C4); font-size: .78rem; font-weight: 600; line-height: 1.45; }
.batch-side .after { margin: 12px 0 0; color: var(--muted, #6E6858); font-size: .76rem; text-align: center; }

@media (max-width: 860px) {
  .batch-panel { grid-template-columns: 1fr; }
  .batch-side { border-top: 1px solid var(--line); border-left: 0; }
  .batch-bar { font-size: .74rem; padding: 8px 14px; }
}