/* ---------------------------------------------------------------------------
   SITE LAYER — layout and components.

   This file references ONLY semantic roles (--ink, --bg, --accent, ...) and
   never a --ucsd-* brand color. Swapping themes must not require touching it.
--------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;                 /* brand: digital body 12–16px */
  line-height: var(--ucsd-body-leading, 1.4);
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { color: var(--accent-hover); }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.u-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Local-preview banner. Never shipped: the layout only emits it outside
   production builds. */
.devbar {
  margin: 0;
  padding: var(--space-3) var(--page-pad);
  background: var(--highlight);
  color: var(--highlight-ink);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
}

.wrap {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-pad);
}

/* --- type scale ----------------------------------------------------------
   Hierarchy transcribed from the brand brief. Sizes are an extrapolation
   (the brand publishes no modular scale); case, tracking and leading are not.
------------------------------------------------------------------------- */

.display {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: var(--ucsd-h1-leading, 0.85);
  font-size: clamp(2.75rem, 10vw, 6.5rem);
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}

.eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ucsd-h3-tracking, 0.08em);
  line-height: var(--ucsd-h3-leading, 1.3);
  font-size: clamp(1rem, 1.7vw, 1.25rem);
  color: var(--accent);
  margin: 0 0 var(--space-3);
}

.section-title {
  font-family: var(--font-sans);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: var(--ucsd-h2-tracking, 0.175em);
  line-height: var(--ucsd-h2-leading, 1.6);
  font-size: 0.9375rem;
  margin: 0;
  color: var(--ink);
}

/* Long-form copy. Leading is raised above the brand's 140% because these are
   multi-line paragraphs, not headline or caption text. Deliberate deviation. */
.prose { max-width: var(--measure); line-height: 1.55; }
.prose p { margin: 0 0 var(--space-4); }

/* --- masthead ------------------------------------------------------------
   Brand rule for web: site name left, campus logo right.
------------------------------------------------------------------------- */
.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  padding-block: var(--space-4);
  border-bottom: var(--rule-weight) solid var(--rule);
}
.masthead__name {
  font-family: var(--font-sans);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  color: var(--muted);
  text-decoration: none;
  max-width: 30ch;
  line-height: 1.5;
}
.masthead__name:hover { color: var(--ink); }
.masthead__logo {
  /* Brand: min width 125px on digital, clear space >= 1 cap height. */
  width: 150px;
  min-width: 125px;
  padding: 0.5em;
  flex: none;
}

/* --- subpage heading ------------------------------------------------------ */
.page-title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 0.9;
  font-size: clamp(2.25rem, 6vw, 3.75rem);
  margin: 0 0 var(--space-4);
  color: var(--ink);
  text-wrap: balance;
}
.page-lead {
  font-size: clamp(1.0625rem, 1.9vw, 1.25rem);
  line-height: 1.45;
  max-width: var(--measure);
  margin: 0 0 var(--space-7);
  text-wrap: pretty;
}

/* --- map figures ---------------------------------------------------------- */
.figure { margin: 0 0 var(--space-6); }
.figure img {
  display: block;
  width: 100%;
  height: auto;
  border: var(--rule-weight) solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--surface-sunk);
}
.figure figcaption {
  margin-top: var(--space-3);
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--muted);
}
.map-credit { font-size: 0.8125rem; color: var(--muted); margin: var(--space-7) 0 0; }

/* --- long-form inside .prose --------------------------------------------- */
.prose h3 {
  font-size: 1.1875rem;
  line-height: 1.3;
  margin: var(--space-6) 0 var(--space-3);
  color: var(--ink);
}
.prose ol, .prose ul { padding-left: 1.25rem; margin: 0 0 var(--space-4); }
.prose li { margin-bottom: var(--space-2); }
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--space-5);
  font-size: 0.9375rem;
}
.prose th, .prose td {
  text-align: left;
  padding: var(--space-3) var(--space-3) var(--space-3) 0;
  border-bottom: var(--rule-weight) solid var(--rule);
  vertical-align: top;
}
.prose th { font-weight: 700; }
.prose code {
  font-size: 0.9375em;
  background: var(--surface-sunk);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
}
/* Wide content must scroll inside itself, never the page. */
.prose { overflow-x: auto; }

/* --- masthead nav --------------------------------------------------------- */
.masthead__nav {
  display: flex;
  gap: var(--space-5);
  margin-left: auto;
  margin-right: var(--space-5);
}
.masthead__nav a {
  font-family: var(--font-sans);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.6875rem;
  text-decoration: none;
  color: var(--accent);
  white-space: nowrap;
}
.masthead__nav a:hover { color: var(--ink); text-decoration: underline; }

/* --- hero ---------------------------------------------------------------- */
.hero { padding-block: clamp(var(--space-7), 8vw, var(--space-9)) var(--space-7); }
.hero__tagline {
  font-size: clamp(1.125rem, 2.2vw, 1.5rem);
  line-height: 1.4;
  color: var(--muted);
  max-width: 46ch;
  margin: var(--space-5) 0 0;
  text-wrap: pretty;
}

/* Body copy under the tagline. Leading is above the brand's 140% because these
   are multi-line paragraphs rather than headline or caption text. */
.intro {
  margin: var(--space-6) 0 0;
  max-width: var(--measure);
  font-size: 1.0625rem;
  line-height: 1.55;
  text-wrap: pretty;
}
.intro p { margin: 0 0 var(--space-4); }
.intro p:last-child { margin-bottom: 0; }

/* --- logistics ---------------------------------------------------------- */
/* A light panel rather than the navy band: the page reads as one continuous
   light surface, and the only solid blocks left are the two primary buttons
   below, which is where the eye should go. Sunk grey is barely off the page
   background, so the hairline rule is what actually draws the box. */
.logistics {
  margin-block: var(--space-7);
  background: var(--surface-sunk);
  color: var(--ink);
  border: var(--rule-weight) solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6) var(--space-6);
}
.logistics__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-5);
}

/* The four calls to action, on the page below the logistics box rather than
   inside it.

   A grid rather than a flex row: equal columns line the four up and give them a
   common height, which a fit-content flex row cannot. auto-fit means the count
   falls to 3, 2 and 1 on its own as the page narrows, with no extra breakpoints.
   The row carries the pull-up against the band's bottom margin. */
.board-ctas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--space-3);
  margin-top: calc(var(--space-7) * -1 + var(--space-5));
}

/* One button inside running text: a single constrained column instead of the
   four-across grid, and no pull-up, because there is no band above it here. */
.board-ctas--single {
  grid-template-columns: minmax(12rem, 20rem);
  margin-top: var(--space-5);
}

.board-cta {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--band);
  color: var(--band-ink);
  text-decoration: none;
  font-family: var(--font-sans);
  line-height: 1.35;
  transition: background-color 120ms ease, color 120ms ease;
}
.board-cta__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
.board-cta__label { font-weight: 700; font-size: 0.875rem; letter-spacing: 0.01em; }
.board-cta__arrow { transition: transform 120ms ease; }
.board-cta:hover .board-cta__arrow { transform: translateX(3px); }

/* Names the audience without competing with the action. */
.board-cta__who { font-size: 0.75rem; font-weight: 500; color: var(--band-muted); }

.board-cta:hover { background: var(--accent); color: var(--surface); }
.board-cta:hover .board-cta__who { color: var(--surface); }

/* The question board card holds two destinations -- the domain-scoped board for
   UCSD accounts and the anonymous read-only view for everyone else -- so the box
   itself is a div, not a link. The two links sit where the __who line sits on
   the other cards; they wrap to two lines in a narrow column, which the row
   absorbs without growing, because its height is set by the taller cards.

   Because the box is not clickable, it must not inherit the fill-on-hover that
   signals "this whole card is a link"; the links inside light up instead. */
.board-cta--split:hover { background: var(--band); color: var(--band-ink); }
.board-cta--split:hover .board-cta__arrow { transform: none; }

/* Set exactly like the __who line these sit in place of -- same size, weight and
   colour -- so the card matches its neighbours. The trailing arrow is what marks
   them as destinations; hover brightens them to the card's full-contrast ink. */
.board-cta__links {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-4);
  font-size: 0.75rem;
  font-weight: 500;
}
.board-cta__link {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1);
  color: var(--band-muted);
  text-decoration: none;
}
.board-cta__link:hover { color: var(--band-ink); }
.board-cta__link:hover .board-cta__arrow { transform: translateX(3px); }

/* Secondary — outlined, so four buttons do not all shout at once. */
.board-cta--quiet {
  background: transparent;
  color: var(--band);
  box-shadow: inset 0 0 0 var(--rule-weight) var(--rule-strong);
}
.board-cta--quiet .board-cta__who { color: var(--muted); }
.board-cta--quiet:hover { background: var(--band); color: var(--band-ink); }
.board-cta--quiet:hover .board-cta__who { color: var(--band-muted); }

/* Cross-link between the two directions pages. */
.page-aside {
  margin: var(--space-7) 0 0;
  padding-top: var(--space-5);
  border-top: var(--rule-weight) solid var(--rule);
  color: var(--muted);
}
.logistics__label {
  font-family: var(--font-sans);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.6875rem;
  color: var(--accent);
  margin: 0 0 var(--space-1);
}
.logistics__value { margin: 0; font-size: 1.0625rem; line-height: 1.35; }
/* A rule about the room, not part of the address -- stepped back so the venue
   still reads first. Muted on sunk grey is 5.09:1, AA. */
.logistics__value .note {
  display: inline-block;
  margin-top: var(--space-2);
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--muted);
}

/* TSS section IDs — the string students actually type into the enrollment
   system, so they get the accent color to be findable at a glance.
   Blue on sunk grey is 6.13:1, AA. */
.sid {
  display: inline-block;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  font-weight: 500;
  font-size: 0.9375rem;
  white-space: nowrap;
}

/* --- section head -------------------------------------------------------- */
.section {
  padding-block: var(--space-7);
  border-top: var(--rule-weight) solid var(--rule);
}
.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}
.section__note {
  margin: var(--space-3) 0 var(--space-6);
  color: var(--muted);
  max-width: var(--measure);
  line-height: 1.5;
}

/* --- schedule ------------------------------------------------------------ */
.schedule { list-style: none; margin: 0; padding: 0; }

.talk {
  display: grid;
  grid-template-columns: 9.75rem 1fr;
  gap: var(--space-5);
  padding-block: var(--space-5);
  border-top: var(--rule-weight) solid var(--rule);
}
.talk:last-child { border-bottom: var(--rule-weight) solid var(--rule); }

.talk__when { display: flex; flex-direction: column; gap: var(--space-1); }
.talk__week {
  font-family: var(--font-sans);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.625rem;
  color: var(--muted);
}
.talk__date {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.05;
  font-size: 1.5rem;
  color: var(--ink);
}
.talk__time { font-size: 0.875rem; color: var(--muted); line-height: 1.35; }

.talk__body { min-width: 0; }

.talk__title {
  font-size: 1.25rem;
  line-height: 1.3;
  font-weight: 700;
  margin: 0 0 var(--space-2);
  text-wrap: pretty;
}
.talk__title a { text-decoration: none; }
.talk__title a:hover { text-decoration: underline; }

.talk__tba {
  font-size: 1.125rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.35;
}

.talk__speakers { list-style: none; margin: 0 0 var(--space-3); padding: 0; }

/* Speaker rows put the text first and the portrait after it, so the source
   order stays name-then-bio for a screen reader while row-reverse floats the
   face to the right edge beside the prose. Speakers without a photo simply
   get the full measure -- nothing to align against on this side. */
.talk__speaker {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  justify-content: flex-end;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  line-height: 1.35;
}
.talk__speaker-text { flex: 1 1 auto; min-width: 0; }

.talk__avatar {
  flex: 0 0 auto;
  width: 6.5rem;
  height: 6.5rem;
  border-radius: var(--radius-md, 0.5rem);
  object-fit: cover;
  background: var(--bg);
  margin-top: 0.1875rem;   /* optical: line the top of the frame up with the name */
}

/* Local preview only: a found likeness nobody has approved yet. The ring is
   deliberately loud -- it should be obvious at a glance which faces are not
   cleared, because production drops them entirely. */
.talk__avatar--unapproved {
  outline: 2px dashed var(--accent);
  outline-offset: 2px;
  opacity: 0.85;
}

@media (max-width: 34rem) {
  /* Below this the portrait and a readable line length stop fitting side by
     side, so the face drops to a modest disc ahead of the name again. */
  .talk__speaker { flex-direction: row; gap: var(--space-3); }
  .talk__avatar { width: 3rem; height: 3rem; border-radius: 50%; }
}
.talk__speaker-name { font-weight: 700; }
.talk__speaker-meta { color: var(--muted); }

/* The internship line: one line of fact between the name and the bio, so it
   reads a step more prominent than the bio prose that follows it. */
.talk__speaker-internship {
  display: block;
  font-size: 0.9375rem;
  line-height: 1.5;
  margin-top: var(--space-1);
  max-width: var(--measure);
}

.talk__speaker-bio {
  display: block;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.5;
  margin-top: var(--space-1);
  max-width: var(--measure);
}

/* The speaker's own links, under their name.

   Set at the size of the meta line rather than body copy: these are a way to
   follow someone up afterwards, not part of reading the schedule, and a row of
   full-size underlined links next to every name would compete with the talk
   titles. Flex-wrap because the count is not ours to choose -- we asked for
   "any links you'd like students to have", so one speaker sends one and
   another sends four. */
.talk__links {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  margin-top: var(--space-1);
  font-size: 0.875rem;
}
.talk__link {
  color: var(--accent);
  text-decoration: none;
  border-bottom: var(--rule-weight) solid var(--rule-strong);
}
.talk__link:hover {
  color: var(--accent-hover);
  border-bottom-color: currentColor;
}

/* Proposed but not yet agreed to, so production drops it entirely and this
   only ever shows in local preview. Dashed, like an unapproved portrait, and
   for the same reason: what is not cleared should be obvious at a glance. */
.talk__link--unapproved {
  color: var(--muted);
  border-bottom-style: dashed;
}
.talk__abstract { margin: var(--space-3) 0 0; line-height: 1.55; max-width: var(--measure); }
/* When the abstract leads, it sits directly under the title and the speaker
   block follows it, so it needs its own breathing room below. */
.talk__abstract--lead { margin: var(--space-3) 0 var(--space-5); }
/* Single-talk day: the name sits alone under the title, so it carries no
   portrait and no trailing gap -- the abstract follows immediately. The
   portrait reappears beside the bio below, where there is text to balance it. */
.talk__speaker--byline { margin-bottom: 0; }
.talk__speaker--biocard { margin: var(--space-4) 0 0; }
.talk__bio-label {
  font-weight: 700;
  color: var(--ink);
}

/* --- resource pills ------------------------------------------------------ */
.pills { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0 0; padding: 0; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border-radius: var(--radius-pill);
  border: var(--rule-weight) solid var(--accent);
  padding: 0.3125rem var(--space-4);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  color: var(--accent);
  background: transparent;
}
.pill:hover { background: var(--accent); color: var(--surface); border-color: var(--accent); }

/* --- status chips -------------------------------------------------------- */
.chip {
  display: inline-block;
  border-radius: var(--radius-pill);
  padding: 0.1875rem var(--space-3);
  font-family: var(--font-sans);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.625rem;
  line-height: 1.6;
  vertical-align: 0.15em;
  margin-left: var(--space-2);
}
.chip--next { background: var(--highlight); color: var(--highlight-ink); }
.chip--tentative {
  background: transparent;
  color: var(--muted);
  border: var(--rule-weight) solid var(--rule);
}
.chip--cancelled { background: var(--surface-sunk); color: var(--muted); border: var(--rule-weight) solid var(--rule); }

/* Past talks recede but stay fully legible — dimming is applied to the date
   column only, never to body text, so contrast ratios are preserved. */
.talk.is-past .talk__date,
.talk.is-past .talk__week { opacity: 0.55; }

/* --- footer -------------------------------------------------------------- */
.footer {
  border-top: var(--rule-weight) solid var(--rule);
  padding-block: var(--space-7) var(--space-8);
  margin-top: var(--space-6);
}
.footer__logos {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

/* Equal-height cells so every divider is the same length regardless of how
   tall the mark inside it is. The rule between the UC San Diego lockup and the
   partner marks is the brand's co-branding divider; the rest repeat it so four
   marks of different shapes read as a row rather than a jumble. */
.footer__logo {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 88px;
}
.footer__logo + .footer__logo { padding-left: var(--space-5); }
/* The rule is a pseudo-element at a fixed height rather than a border on the
   cell, so a taller cell (the Launch AI lockup) doesn't get a longer divider. */
.footer__logo + .footer__logo::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: var(--rule-weight);
  height: 88px;
  background: var(--rule);
}

/* Caption set as live text rather than baked into the badge, so it stays sharp
   at any zoom and is readable by screen readers and search. Sized and colored
   to read as part of the mark above it. */
.footer__lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}
.footer__lockup-line {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.6875rem;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-align: center;
  white-space: nowrap;
}

.footer__logo-cse { width: 260px; min-width: 125px; }
.footer__logo-launch { height: 88px; width: auto; display: block; }
.footer__logo-alumni { width: 185px; display: block; }
/* The consortium logo ships as opaque RGB with no alpha, so on any non-white
   theme it would render as a bare white rectangle. Putting it on an explicit
   white card makes that deliberate instead of accidental, and works on every
   theme. Replace with a transparent asset and this rule can go. */
.footer__logo-partner {
  width: 190px;
  display: block;
  background: #FFFFFF;
  padding: var(--space-3);
  border-radius: var(--radius-md);
}
.footer__text { color: var(--muted); max-width: var(--measure); line-height: 1.5; margin: 0 0 var(--space-3); }
.footer__contact { margin: 0; line-height: 1.5; }

/* --- narrow screens ------------------------------------------------------ */
@media (max-width: 40rem) {
  .masthead__nav { margin-left: 0; margin-right: 0; order: 3; width: 100%; }
  .talk { grid-template-columns: 1fr; gap: var(--space-3); }
  .talk__when { flex-direction: row; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
  .talk__date { font-size: 1.25rem; }
  .logistics { padding: var(--space-5); }
  /* auto-fit already collapses to one column here; nothing to override. */
}

/* The logo row fits on one line down to about 1024px. Below that it wraps, and
   a divider stranded at the start of a wrapped line reads as a mistake -- so the
   dividers come off at exactly the width where wrapping starts, not at the
   phone breakpoint. */
@media (max-width: 64rem) {
  .footer__logo + .footer__logo { padding-left: 0; }
  .footer__logo + .footer__logo::before { display: none; }
  .footer__logo { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* --- print --------------------------------------------------------------- */
@media print {
  .masthead__logo, .pill { color: #000; }
  body { background: #fff; color: #000; }
  .footer__logos { display: none; }
}

/* --- notification sign-up (/notifications/) ------------------------------- */
.is-hidden { display: none !important; }

.notice {
  margin: var(--space-5) 0 0;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border: var(--rule-weight) solid var(--rule);
  background: var(--surface-sunk);
  max-width: var(--measure);
  line-height: 1.5;
  font-size: 0.9375rem;
}
.notice--ok  { border-left: 4px solid var(--ucsd-green); }
.notice--bad { border-left: 4px solid var(--ucsd-orange); }

.signup {
  margin: var(--space-5) 0 0;
  padding: var(--space-5) var(--space-6) var(--space-6);
  background: var(--surface-sunk);
  border: var(--rule-weight) solid var(--rule);
  border-radius: var(--radius-lg);
  max-width: var(--measure);
}
.signup__lead {
  margin: 0 0 var(--space-5);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ink);
}
.signup__lead:last-child { margin-bottom: 0; }

/* The action button, matching .board-cta but filled with the accent. */
.signup__action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--surface);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color 120ms ease;
}
.signup__action:hover { background: var(--accent-hover); }
.signup__action:disabled { opacity: 0.6; cursor: progress; }

.signup__action--quiet {
  background: transparent;
  color: var(--accent);
  box-shadow: inset 0 0 0 var(--rule-weight) var(--accent);
}
.signup__action--quiet:hover { background: var(--accent); color: var(--surface); }