/* The community drop. Layout only: every colour, face and control comes from vg.css. */

/* --- hero ---------------------------------------------------------------------------------------- */

/* The pitch reads across a comfortable measure and the three figures run full width beneath it.
   They were beside it at first, which squeezed each one into a 132px column: a ten-digit supply is
   the single most persuasive thing on this page and it was rendering as "1,000,000,". A number too
   narrow to finish is worse than no number. */
.ad-hero { padding: 56px 0 20px; }
.ad-hero-say { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; max-width: 68ch; }
.ad-hero-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
/* The separator in a rune name is part of the name, not punctuation between words, so it is dimmed
   rather than removed: the ticker reads as one thing while the words stay legible. */
.ad-dot { color: var(--accent); opacity: .55; padding: 0 .04em; }
.ad-claims { grid-template-columns: repeat(3, 1fr); margin-top: 34px; }
.ad-claims .vg-num { font-size: clamp(21px, 2.5vw, 30px); }

/* --- the checker ----------------------------------------------------------------------------------- */

.ad-check { padding: 20px 0 0; }
.ad-check-head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; max-width: 62ch; }

.ad-form { display: flex; flex-direction: column; gap: 16px; }
.ad-connect { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ad-connect .vg-small { margin: 0; }
.ad-connect.hidden, .ad-or.hidden { display: none; }

/* A rule with the word sitting in it, so the paste field reads as the fallback it is rather than as
   a second, equal option. */
.ad-or { display: flex; align-items: center; gap: 14px; color: var(--dim); }
.ad-or::before, .ad-or::after { content: ''; flex: 1; height: 1px; background: var(--hair); }
.ad-or span { font: 400 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }

.ad-input { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.ad-input .vg-field { flex: 1 1 260px; min-width: 0; }
.ad-input .vg-input { font-family: var(--mono); font-size: 13px; }
.ad-input .vg-btn { padding: 11px 22px; }

/* --- the answer -------------------------------------------------------------------------------------- */

.ad-out { margin-top: 22px; display: flex; flex-direction: column; gap: 14px; }

.ad-verdict {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center;
  padding: 26px 28px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card);
}
.ad-verdict.is-in { border-color: rgba(56, 211, 159, .42); }
.ad-verdict-say { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ad-verdict-say h3 { margin: 0; font: 700 25px/1.1 var(--display); letter-spacing: -.025em; }
.ad-verdict-say p { margin: 0; }
.ad-who { font: 400 11.5px/1 var(--mono); color: var(--dim); word-break: break-all; }

/* A percentage, not a coin count. What an address finally holds is the supply over every share
   that exists, which falls each time somebody else qualifies; this figure only ever rises. */
.ad-meter { text-align: right; }
.ad-meter b {
  display: block; font: 700 38px/1 var(--mono); letter-spacing: -.04em;
  font-variant-numeric: tabular-nums; color: var(--accent);
}
.ad-meter.none b { color: var(--dim); }
.ad-meter span { display: block; margin-top: 6px; font-size: 11.5px; color: var(--muted); }
.ad-verdict.is-full .ad-meter b { color: var(--ok); }

/* Spans both columns, under the sentence and the figure it belongs to. */
.ad-bar { grid-column: 1 / -1; }

/* --- the four actions ----------------------------------------------------------------------------------- */

.ad-acts { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.ad-act {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 16px; align-items: center;
  padding: 15px 20px; background: var(--card);
}
.ad-act-mark {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line2); color: var(--dim); font: 700 11px/1 var(--mono);
}
/* Part way there reads as a running count in the accent; finished reads as a tick in the ok
   colour. A tick on one Alpha out of three would claim something half done was finished. */
.ad-act.done .ad-act-mark { border-color: var(--accent); background: rgba(76, 194, 241, .13); color: var(--accent); }
.ad-act.full .ad-act-mark { border-color: var(--ok); background: rgba(56, 211, 159, .13); color: var(--ok); }
.ad-act-say { min-width: 0; }
.ad-act-say b { display: block; font: 600 14px/1.3 var(--sans); color: var(--muted); }
.ad-act.done .ad-act-say b { color: var(--txt); }
.ad-act-say span { display: block; margin-top: 3px; font: 400 11.5px/1.4 var(--mono); color: var(--dim); }
/* Every row short of its ceiling carries the way to top it up, whether it has been started or not.
   A checker that only tells you no is a dead end, and one that stops offering at the first mint is
   a dead end for anybody two thirds of the way through. Only a finished row loses its button, and
   it loses it by not being rendered rather than by being hidden. */
.ad-act-go { padding: 7px 14px; font-size: 12px; white-space: nowrap; }

.ad-totals { display: flex; flex-wrap: wrap; gap: 22px; padding: 0 4px; }
.ad-totals div { display: flex; align-items: baseline; gap: 7px; }
.ad-totals b { font: 600 13px/1 var(--mono); color: var(--txt); font-variant-numeric: tabular-nums; }
.ad-totals span { font-size: 12px; color: var(--dim); }

/* --- what it is for ------------------------------------------------------------------------------------ */

/* The one section on the page with no numbers in it, so it is allowed to look different from the
   cards above and below it. The motif sits behind the type at low opacity rather than as a border
   treatment: a rule down the side would have read as another card. */
.ad-why {
  position: relative; overflow: hidden;
  margin-top: 64px; padding: 46px 44px;
  border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card);
}
.ad-why-grid {
  position: absolute; inset: 0; opacity: .35; pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 26px 26px;
  /* Faded out towards the text so the grid frames the panel instead of sitting under the reading. */
  -webkit-mask-image: radial-gradient(120% 90% at 12% 0%, #000 0%, transparent 62%);
  mask-image: radial-gradient(120% 90% at 12% 0%, #000 0%, transparent 62%);
}
.ad-why-in {
  position: relative;
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 52px; align-items: start;
}
.ad-why-say { display: flex; flex-direction: column; gap: 16px; }
.ad-why-say .vg-d2 { text-wrap: balance; }
.ad-why-nos { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 2px; }
.ad-why-body { display: flex; flex-direction: column; gap: 15px; }
/* The closing line gets the display face and a rule above it, because it is the point of the
   section rather than another paragraph of it. */
.ad-why-last {
  margin: 6px 0 0; padding-top: 18px; border-top: 1px solid var(--hair);
  font: 500 16px/1.5 var(--display); letter-spacing: -.012em; color: var(--txt);
}

/* --- how it works ------------------------------------------------------------------------------------------ */

.ad-rules {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .8fr);
  gap: 48px; align-items: start; padding: 64px 0 12px;
}
.ad-rules-say { display: flex; flex-direction: column; gap: 14px; }
.ad-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ad-steps li {
  display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 15px; align-items: start;
  padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card);
}
.ad-steps b { display: block; font: 600 14px/1.3 var(--sans); margin-bottom: 4px; }
.ad-steps p { margin: 0; }
/* Numbered because these really are a sequence: nothing is sent before a snapshot, and no snapshot
   counts an action that has not happened. */
.ad-step-n {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg2); border: 1px solid var(--line2);
  font: 700 11px/1 var(--mono); color: var(--accent);
}

/* --- the promises ------------------------------------------------------------------------------------------- */

.ad-claims-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1px;
  margin-top: 56px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden;
}
.ad-claim { background: var(--card); padding: 22px 24px; display: flex; flex-direction: column; gap: 9px; }
.ad-claim .vg-d4 { color: var(--txt); }
.ad-claim p { margin: 0; }

/* --- phone -------------------------------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .ad-hero { padding: 34px 0 12px; }
  .ad-why { padding: 32px 26px; margin-top: 48px; }
  .ad-why-in { grid-template-columns: 1fr; gap: 26px; }
  .ad-rules { grid-template-columns: 1fr; gap: 28px; padding-top: 48px; }
}

@media (max-width: 620px) {
  .ad-claims { grid-template-columns: 1fr; }
  .ad-verdict { grid-template-columns: 1fr; gap: 18px; }
  .ad-meter { text-align: left; }
  /* The action rows lose their trailing button to a second line rather than squeezing the label. */
  .ad-act { grid-template-columns: 26px minmax(0, 1fr); }
  .ad-act-go { grid-column: 2; justify-self: start; }
  .ad-input .vg-btn { width: 100%; }
}