/* The Voluminati — silver on black.
   Monochrome only: no hue anywhere, brightness does all the work. */

:root {
  --vlm-white: #ffffff;
  --vlm-silver-hi: #f2f4f7;
  --vlm-silver: #c3c9d1;
  --vlm-steel: #8b919a;
  --vlm-graphite: #4a4e55;
  --vlm-carbon: #23262b;
  --vlm-ink: #0a0a0b;

  /* Brushed-metal sweep, reused for text, rules and borders. */
  /* Brushed metal for TEXT. --vlm-metal below drops to #4a4e55 at its midpoint,
     which reads as a sheen on a 1px hairline and as the headline fading out on
     anything that wraps to a second line — the second line lands in the trough.
     This keeps every stop light enough to read as lettering. */
  --vlm-metal-text: linear-gradient(
    100deg,
    #ffffff 0%,
    #e9edf2 16%,
    #bcc2ca 34%,
    #ffffff 52%,
    #c8ced6 72%,
    #f5f7fa 100%
  );
  --vlm-metal: linear-gradient(
    100deg,
    #ffffff 0%,
    #dfe3e8 14%,
    #8f959e 32%,
    #4a4e55 48%,
    #c9ced5 66%,
    #71767e 84%,
    #e8ecf1 100%
  );
}

/* ---------- Theme surfaces ---------- */

[data-md-color-scheme="slate"] {
  /* Tells the browser which theme to paint the controls it owns — dropdown
     popups, scrollbars, focus rings. Without it those render light against a
     dark page and the stylesheet has no say in it. */
  color-scheme: dark;
  --md-default-bg-color: #08080a;
  --md-default-fg-color: #e7eaee;
  --md-default-fg-color--light: #a7adb6;
  --md-default-fg-color--lighter: #6d737c;
  --md-default-fg-color--lightest: #2a2d33;
  --md-code-bg-color: #121317;
  --md-code-fg-color: #d9dee4;
  --md-typeset-a-color: var(--vlm-silver-hi);
  --md-accent-fg-color: var(--vlm-white);
  --md-footer-bg-color: #050506;
}

[data-md-color-scheme="default"] {
  color-scheme: light;
  --md-default-bg-color: #ffffff;
  --md-default-fg-color--lightest: #e3e6ea;
  --md-typeset-a-color: #33373d;
  --md-accent-fg-color: #08080a;
  --md-footer-bg-color: #0a0a0b;
}

/* Link colour, stated at the specificity Material forces.
   The brand is silver on black with no hue anywhere, and the two blocks above
   say so — but Material's palette ships

     [data-md-color-primary=black],…{--md-typeset-a-color:#5e8bde}

   and `primary: black` is exactly what this theme sets, so every body link came
   out indigo-blue while the rest of the block (background, accent) applied
   normally. Repeating the declaration against both attributes the body actually
   carries is what makes it stick. */
[data-md-color-scheme="slate"][data-md-color-primary="black"] {
  --md-typeset-a-color: var(--vlm-silver-hi);
}
[data-md-color-scheme="default"][data-md-color-primary="black"] {
  --md-typeset-a-color: #33373d;
}
/* Material colours its own buttons from the same variable. */
[data-md-color-primary="black"] .md-button {
  color: var(--md-typeset-a-color);
}

/* Header and sidebar read as one black slab. */
.md-header,
.md-tabs {
  background-color: var(--vlm-ink);
  border-bottom: 1px solid var(--vlm-graphite);
}

.md-header__title {
  font-weight: 700;
  letter-spacing: 0.02em;
}

.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.6rem;
  width: 1.6rem;
}

/* Links: underline on hover instead of a colour change. */
.md-typeset a {
  text-decoration-color: var(--vlm-graphite);
  text-underline-offset: 0.18em;
}

.md-typeset a:hover {
  text-decoration: underline;
  text-decoration-color: currentColor;
}

/* ---------- Hero ---------- */

.vlm-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--vlm-graphite);
  border-radius: 14px;
  padding: 0;
  margin: 0 0 2.2rem;
  /* The banner is the hero's ground, not a block stacked above it.
     It used to sit as a full-width 3:1 <img> directly over the headline, and
     the artwork has its own tagline and t.me address burned into the left of
     it — so the page opened with two competing headlines and two Telegram
     CTAs. Anchored right, the crop keeps the mark and loses the lettering;
     the scrim carries the text side down to something a headline can sit on. */
  background:
    linear-gradient(
      90deg,
      #08080a 0%,
      rgba(8, 8, 10, 0.97) 38%,
      rgba(8, 8, 10, 0.72) 64%,
      rgba(8, 8, 10, 0.42) 100%
    ),
    radial-gradient(
      120% 140% at 50% -20%,
      rgba(255, 255, 255, 0.14) 0%,
      rgba(255, 255, 255, 0.03) 32%,
      rgba(0, 0, 0, 0) 62%
    ),
    /* `cover` on a panel this wide still pulled part of the burned-in
       "t.me/TheVoluminati" into frame, where it ghosted through the scrim
       behind the body copy. Scaling by height instead crops well past the
       lettering and leaves only the mark. */
    url("../assets/banner.webp") right center / auto 165% no-repeat,
    linear-gradient(180deg, #17181c 0%, #0a0a0b 55%, #000000 100%);
  color: #eef1f5;
}

/* Below the breakpoint the crop has no room left to be anything but noise, so
   the artwork steps back and the words get the whole panel. */
@media screen and (max-width: 59.9375em) {
  .vlm-hero {
    background:
      linear-gradient(180deg, rgba(8, 8, 10, 0.88) 0%, #08080a 62%),
      url("../assets/banner.webp") right top / auto 150% no-repeat,
      linear-gradient(180deg, #17181c 0%, #0a0a0b 55%, #000000 100%);
  }
}

/* Thin metal rule across the top edge. */
.vlm-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--vlm-metal);
  opacity: 0.7;
}

.vlm-hero h1,
.vlm-hero p {
  color: #eef1f5;
  margin: 0;
  position: relative;
}

.vlm-hero h1 {
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 2.2rem;
  line-height: 1.12;
  /* Keeps the last word off a line of its own, which the old wrap did. */
  text-wrap: balance;
  background: var(--vlm-metal-text);
  /* 100%, not 200%: at 200% the visible half of the gradient shifts with the
     element's width, so the headline's shading changed with the viewport. */
  background-size: 100% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.vlm-hero p {
  margin-top: 1rem;
  font-size: 0.92rem;
  line-height: 1.68;
  color: #b4bac2;
  max-width: 44rem;
}

.vlm-hero .vlm-kicker {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.24rem 0.8rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--vlm-graphite);
  color: var(--vlm-silver);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Hero call-to-action row. */
.vlm-hero .vlm-cta {
  margin-top: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
}

.vlm-hero .vlm-cta .md-button {
  margin: 0;
}

.vlm-hero .md-button:not(.md-button--primary) {
  color: var(--vlm-silver-hi);
  border-color: var(--vlm-steel);
}

/* A marketing hero is not a document section: no ¶ permalink. */
.vlm-hero .headerlink {
  display: none;
}

/* Markdown wraps the banner in a <p>; strip it so the image sits flush.
   max-width: none frees it from the 44rem prose cap above — the banner
   must span the hero even on layouts wider than the prose measure. */
.vlm-hero > p:first-of-type {
  margin: 0;
  line-height: 0;
  max-width: none;
}

/* The brand banner sits flush at the top of the hero. */
.vlm-banner {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border-bottom: 1px solid var(--vlm-graphite);
}

.vlm-hero-body {
  padding: 3.4rem 2.2rem 3.2rem;
  /* Wide enough that the three CTAs stay on one row — capping the panel at the
     prose width pushed the third onto a line of its own. */
  max-width: 52rem;
}

/* Prose keeps the shorter measure the panel no longer enforces. */
.vlm-hero-body > p:not(.vlm-cta) {
  max-width: 40rem;
}

@media screen and (max-width: 44.9375em) {
  .vlm-hero-body {
    padding: 1.5rem 1.3rem 1.8rem;
  }

  .vlm-hero h1 {
    font-size: 1.65rem;
  }
}

/* Page titles arrived at Material's default: large, thin and grey — lighter
   than the section headings beneath them, so on every interior page the first
   H2 out-ranked the H1 and the page read as a reference manual rather than as
   a page about something. The title needs typographic authority, not another
   box around it. */
.md-typeset h1 {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--vlm-silver-hi);
}

/* Section headings had no styling at all, so they arrived at Material's
   default weight — lighter than the card titles underneath them, which left
   each section looking like it began at the cards rather than at its own
   heading. A hairline gives the break something to sit on. */
.md-typeset h2 {
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--vlm-silver-hi);
  margin-top: 3rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--md-default-fg-color--lightest);
}

/* The hero owns the top of the page; the first heading after it needs no rule. */
.vlm-hero + h2,
.md-typeset .vlm-hero + h2 {
  border-top: 0;
  padding-top: 0;
}

/* The card headings and the kicker carry emoji, and emoji arrive with the
   vendor's own colour whatever the stylesheet says — the one hue left on a
   theme whose whole rule is that there is none. Desaturating the heading is
   enough: its text is already silver, so grayscale does nothing to it and
   everything to the glyph. */
.vlm-card h3,
.vlm-kicker {
  filter: grayscale(1);
}

/* ---------- Cards ---------- */

/* Every grid on this site holds exactly four cards, and auto-fit packed them
   three across with a lone orphan on the second row — which reads as a mistake
   rather than a layout. Two columns is the shape the content actually has. */
.vlm-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.6rem 0;
}

@media screen and (max-width: 59.9375em) {
  .vlm-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.vlm-card {
  position: relative;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 12px;
  padding: 1.25rem 1.35rem;
  background: var(--md-default-bg-color);
  transition: border-color 140ms ease, transform 140ms ease;
}

[data-md-color-scheme="slate"] .vlm-card {
  background: linear-gradient(180deg, #101115 0%, #0b0b0d 100%);
}

.vlm-card::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 1px;
  border-radius: 12px 12px 0 0;
  background: var(--vlm-metal);
  opacity: 0;
  transition: opacity 140ms ease;
}

.vlm-card:hover {
  border-color: var(--vlm-steel);
  transform: translateY(-2px);
}

.vlm-card:hover::before {
  opacity: 0.9;
}

.vlm-card h3 {
  margin: 0 0 0.45rem;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.vlm-card p {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.62;
  color: var(--md-default-fg-color--light);
}

/* ---------- Pricing ---------- */

.vlm-price {
  font-weight: 800;
  font-size: 1.08rem;
  letter-spacing: -0.01em;
  color: var(--vlm-ink);
}

[data-md-color-scheme="slate"] .vlm-price {
  /* The hairline gradient's dark midpoint lands inside the number: "$349"
     rendered bright to "$3" and dim to "49". Same defect the hero headline had. */
  background: var(--vlm-metal-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.vlm-best {
  display: inline-block;
  margin-left: 0.45rem;
  padding: 0.08rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--vlm-steel);
  background: rgba(255, 255, 255, 0.05);
  color: var(--vlm-steel);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  vertical-align: middle;
  -webkit-text-fill-color: currentColor;
}

/* ---------- Tables ---------- */

.vlm-compare table {
  width: 100%;
}

.vlm-compare td:not(:first-child),
.vlm-compare th:not(:first-child) {
  text-align: center;
}

.md-typeset table:not([class]) th {
  background: var(--vlm-carbon);
  color: var(--vlm-silver-hi);
  font-weight: 700;
  letter-spacing: 0.02em;
}

[data-md-color-scheme="default"] .md-typeset table:not([class]) th {
  background: #14161a;
}

/* ---------- Telegram screenshots ---------- */

.vlm-shot {
  margin: 1.6rem 0;
  text-align: center;
}

/* Markdown wraps the image in a <p>; strip its spacing. */
.vlm-shot p {
  margin: 0;
  line-height: 0;
}

.vlm-shot img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  width: 22rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 12px;
  background: #17212b;
}

.vlm-shot--narrow img {
  width: 18rem;
}

.vlm-shot figcaption,
.vlm-shot .vlm-caption {
  margin-top: 0.7rem;
  font-size: 0.68rem;
  line-height: 1.6;
  color: var(--md-default-fg-color--light);
  font-style: normal;
}

/* Two screenshots side by side on wide viewports. */
.vlm-shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.2rem;
  align-items: start;
  margin: 1.6rem 0;
}

.vlm-shots .vlm-shot {
  margin: 0;
}

.vlm-shots .vlm-shot img {
  width: 100%;
}

/* ---------- Simulated Telegram message ---------- */

.vlm-tg {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-left: 2px solid var(--vlm-steel);
  border-radius: 0 10px 10px 0;
  background: var(--md-code-bg-color);
  padding: 1rem 1.2rem;
  margin: 1.2rem 0;
  font-size: 0.76rem;
  line-height: 1.7;
}

.vlm-tg .vlm-tg-btns {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--md-default-fg-color--lightest);
  color: var(--md-default-fg-color--light);
  font-size: 0.7rem;
}

/* ---------- Buttons ---------- */

.md-typeset .md-button {
  border-radius: 8px;
  border-color: var(--vlm-steel);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.md-typeset .md-button--primary {
  background: var(--vlm-metal);
  background-size: 180% auto;
  border-color: transparent;
  color: #0a0a0b;
  transition: background-position 320ms ease;
}

.md-typeset .md-button--primary:hover {
  background-position: right center;
  color: #0a0a0b;
  border-color: transparent;
}

.md-typeset .md-button:not(.md-button--primary):hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--vlm-silver);
  color: inherit;
}

/* ---------- Admonitions: greyscale, weight carries the severity ----------
   Material ships a hue per type (green question, orange warning, …). The
   :is() lists below out-specify those per-type rules so every admonition —
   border, title tint, icon and chevron — stays monochrome. */

.md-typeset .admonition,
.md-typeset details {
  border-width: 1px;
  border-left-width: 3px;
  border-radius: 8px;
  font-size: 0.74rem;
}

.md-typeset :is(.admonition, details):is(.note, .abstract, .info, .tip, .success, .question, .warning, .failure, .danger, .bug, .example, .quote) {
  border-color: var(--vlm-graphite);
  border-left-color: var(--vlm-steel);
}

.md-typeset :is(.admonition, details):is(.note, .abstract, .info, .tip, .success, .question, .warning, .failure, .danger, .bug, .example, .quote):focus-within {
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.08);
}

.md-typeset :is(.note, .abstract, .info, .tip, .success, .question, .warning, .failure, .danger, .bug, .example, .quote) > :is(.admonition-title, summary) {
  background-color: rgba(139, 145, 154, 0.12);
}

.md-typeset :is(.note, .abstract, .info, .tip, .success, .question, .warning, .failure, .danger, .bug, .example, .quote) > :is(.admonition-title, summary)::before {
  background-color: var(--vlm-steel);
}

.md-typeset :is(.note, .abstract, .info, .tip, .success, .question, .warning, .failure, .danger, .bug, .example, .quote) > :is(.admonition-title, summary)::after {
  color: var(--vlm-steel);
}

.md-typeset .admonition.danger,
.md-typeset details.danger {
  border-left-color: var(--vlm-white);
}

/* ---------- Diagrams (hand-drawn inline SVG) ---------- */

:root {
  --vlm-dia-box: #ffffff;
  --vlm-dia-panel: #f4f5f7;
  --vlm-dia-stroke: #9aa0a8;
  --vlm-dia-text: #1a1c20;
  --vlm-dia-muted: #6d737c;
}

[data-md-color-scheme="slate"] {
  --vlm-dia-box: #16181d;
  --vlm-dia-panel: #101116;
  --vlm-dia-stroke: #565b63;
  --vlm-dia-text: #e7eaee;
  --vlm-dia-muted: #949aa3;
}

/* Narrow screens scroll the diagram rather than shrinking its text away. */
.vlm-dia-wrap {
  overflow-x: auto;
  margin: 1.8rem 0;
  padding-bottom: 0.3rem;
}

.vlm-dia {
  display: block;
  width: 100%;
  min-width: 32rem;
  height: auto;
}

.vlm-dia text {
  font-family: inherit;
  font-size: 13px;
  fill: var(--vlm-dia-text);
}

.vlm-dia .d-box {
  fill: var(--vlm-dia-box);
  stroke: var(--vlm-dia-stroke);
  stroke-width: 1.2;
}

.vlm-dia .d-panel {
  fill: var(--vlm-dia-panel);
  stroke: var(--vlm-dia-stroke);
  stroke-width: 1.2;
}

.vlm-dia .d-title {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.15em;
  fill: var(--vlm-dia-muted);
}

.vlm-dia .d-label {
  font-size: 11.5px;
  fill: var(--vlm-dia-muted);
}

.vlm-dia .d-edge {
  fill: none;
  stroke: var(--vlm-dia-stroke);
  stroke-width: 1.4;
}

.vlm-dia .d-arrow {
  fill: var(--vlm-dia-stroke);
}

.vlm-dia .d-bound {
  stroke: var(--vlm-dia-muted);
  stroke-width: 1.2;
  stroke-dasharray: 5 5;
  opacity: 0.8;
}

.vlm-dia .d-blocked {
  stroke: var(--vlm-dia-muted);
  stroke-width: 1.4;
  stroke-dasharray: 4 4;
  fill: none;
}

.vlm-dia .d-x {
  stroke: var(--vlm-dia-text);
  stroke-width: 1.8;
  stroke-linecap: round;
}

/* Knocks the boundary line out from behind edge labels. */
.vlm-dia .d-labelbg {
  fill: var(--md-default-bg-color);
}

/* Call history — cards first, table never. */
#calls-controls{display:flex;flex-wrap:wrap;gap:.5rem;margin:.8rem 0}
#calls-controls input,#calls-controls select{flex:1;min-width:0;padding:.5rem .6rem;border-radius:8px;border:1px solid var(--md-default-fg-color--lightest);background:var(--md-default-bg-color);color:var(--md-default-fg-color)}
/* The dropdown popup is painted by the browser, not by this stylesheet, so the
   option colours have to be stated outright: inheriting the page's light-on-dark
   text put pale labels on the popup's white ground and made them unreadable. */
#calls-controls select option{background:var(--md-default-bg-color);color:var(--md-default-fg-color)}
.call-card{display:block;border:1px solid var(--md-default-fg-color--lightest);border-radius:10px;padding:.7rem .85rem;margin:.5rem 0;text-decoration:none!important;color:inherit!important}
.call-card:hover{border-color:var(--md-accent-fg-color)}
.cc-head{display:flex;align-items:baseline;gap:.5rem}
.cc-x{font-weight:700;font-variant-numeric:tabular-nums}
.cc-t{font-weight:600}
.cc-tag{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;border:1px solid currentColor;border-radius:99px;padding:.05rem .4rem;opacity:.75}
.cc-rug{opacity:.6}
.cc-line{font-variant-numeric:tabular-nums;margin-top:.15rem}
.cc-now{opacity:.7}
.cc-meta{font-size:.78rem;opacity:.6;margin-top:.2rem}
#calls-more{width:100%;padding:.6rem;margin-top:.8rem;border-radius:8px;border:1px solid var(--md-default-fg-color--lightest);background:transparent;color:inherit;cursor:pointer}

/* The search box takes a full row of its own; the three selects share the next
   one. Three selects beside a search field ran past the container edge and
   clipped the last one. */
#calls-search{flex:1 0 100%}
.calls-selects{display:flex;gap:.4rem;flex:1 0 100%}
.calls-selects select{flex:1;min-width:0}
@media(max-width:520px){.calls-selects{flex-wrap:wrap}.calls-selects select{flex:1 1 45%}}

/* ---------- The screening dimensions, on a phone ---------- */

/* Thirteen rows across three columns is fine on a desktop and an endurance
   test on a phone: every cell crushes to two-to-four word fragments about five
   lines tall, and the table alone buries the rug guard, the honest limits and
   what screening cannot do below it. The other tables on the site were checked
   at this width and read fine — the two-column ones on Exit rules, the short
   three-column one on Pricing — so this is scoped to the table that fails
   rather than applied to all of them. Same content, stacked. */
@media screen and (max-width: 59.9375em) {
  .vlm-dimensions .md-typeset__table,
  .vlm-dimensions table:not([class]) {
    display: block;
    width: 100%;
    border: 0;
    overflow: visible;
  }

  .vlm-dimensions thead {
    display: none;
  }

  .vlm-dimensions tbody,
  .vlm-dimensions tr,
  .vlm-dimensions td {
    display: block;
    width: auto;
  }

  .md-typeset .vlm-dimensions table:not([class]) tr {
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 10px;
    padding: 0.7rem 0.85rem;
    margin: 0.45rem 0;
  }

  /* Material's own cell borders out-specify a bare `td` rule and kept drawing
     rules across the inside of every card. */
  .md-typeset .vlm-dimensions table:not([class]) td {
    border: 0;
    padding: 0;
    background: none;
  }

  /* The dimension name leads the row, the way it leads the column. */
  .md-typeset .vlm-dimensions table:not([class]) td:first-child {
    font-size: 0.85rem;
  }

  /* The header row is hidden, so each value states which column it came from —
     otherwise two unlabelled sentences per card is a guessing game. */
  .vlm-dimensions td:nth-child(2)::before {
    content: "Checks";
  }

  .vlm-dimensions td:nth-child(3)::before {
    content: "Protects against";
  }

  .vlm-dimensions td:nth-child(2)::before,
  .vlm-dimensions td:nth-child(3)::before {
    display: block;
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--vlm-steel);
    margin-top: 0.45rem;
  }

  /* The rows carry the type size down; the page has thirteen of them. */
  .md-typeset .vlm-dimensions table:not([class]) td:nth-child(2),
  .md-typeset .vlm-dimensions table:not([class]) td:nth-child(3) {
    font-size: 0.76rem;
    line-height: 1.5;
  }
}

/* ---------- Homepage proof strip ---------- */

/* Hidden until it has real rows in it. The homepage should never flash an
   empty panel, and if the API is unreachable the script removes the whole
   thing rather than leaving a broken frame under the hero. */
#calls-preview {
  display: none;
  margin: 0 0 2.4rem;
}

#calls-preview.is-loaded {
  display: block;
}

#calls-preview .cp-head {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vlm-steel);
  margin: 0 0 0.6rem;
}

#calls-preview .cp-row {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 9px;
  margin-bottom: 0.4rem;
  text-decoration: none !important;
  color: inherit !important;
}

#calls-preview .cp-row:hover {
  border-color: var(--vlm-steel);
}

#calls-preview .cp-x {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 3.4rem;
}

#calls-preview .cp-t {
  font-weight: 600;
}

/* The market caps are the evidence, not the decoration — but they are the part
   that has to give way first on a narrow screen. */
#calls-preview .cp-mc {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-size: 0.8rem;
  color: var(--md-default-fg-color--light);
}

@media screen and (max-width: 29.9375em) {
  #calls-preview .cp-mc {
    display: none;
  }
}

/* The denominator sits under the ranked rows, not above them: a reader who
   reads the multiples has to pass the hit rate to reach the link. */
#calls-preview .cp-stat {
  margin: 0.6rem 0 0;
  font-size: 0.78rem;
  color: var(--md-default-fg-color--light);
}

#calls-preview .cp-more {
  margin: 0.7rem 0 0;
  font-size: 0.82rem;
}

/* Call history table (pre-rendered by hooks/calls_data.py, enhanced by
   calls.js). Four columns: ticker, peak, current value, age. */
.calls-table-wrap{overflow-x:auto;margin:.6rem 0}
.md-typeset table.calls-table{display:table;width:100%;font-size:.78rem;border-collapse:collapse}
.md-typeset .calls-table th{white-space:nowrap;font-weight:600;opacity:.75}
.md-typeset .calls-table td{white-space:nowrap;vertical-align:baseline;font-variant-numeric:tabular-nums}
.calls-table .ct-ticker a{font-family:var(--md-code-font-family);font-weight:600}
.calls-table .ct-peak{font-weight:700}
.calls-table .ct-now{opacity:.55;font-size:.92em}
.calls-table .ct-now-label{font-size:.85em;letter-spacing:.04em;text-transform:uppercase}
.calls-table .ct-age{opacity:.6}
#calls-more-wrap[hidden]{display:none}

/* Phones: four columns still do not fit, so each row becomes a two-line card.
   Line 1: ticker, peak. Line 2: current value, age. Same DOM, CSS only, so
   pre-rendered and fetched rows behave identically. */
@media(max-width:44.9375em){
  .calls-table-wrap{overflow:visible}
  .md-typeset table.calls-table,.calls-table tbody{display:block;width:100%;font-size:.8rem}
  .calls-table thead{display:none}
  .calls-table tr{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"ticker peak" "now age";column-gap:.5rem;row-gap:.1rem;align-items:baseline;padding:.55rem 0;border-bottom:1px solid var(--md-default-fg-color--lightest)}
  .md-typeset .calls-table td{display:block;padding:0;border:0;white-space:nowrap}
  .calls-table .ct-ticker{grid-area:ticker;font-size:.9rem;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .calls-table .ct-peak-cell{grid-area:peak;text-align:right}
  /* "x282" alone is ambiguous once the header row is hidden. */
  .calls-table .ct-peak-cell::before{content:"peak ";font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;opacity:.55;font-weight:400}
  .calls-table .ct-now-cell{grid-area:now;font-size:.76rem;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .calls-table .ct-age{grid-area:age;font-size:.76rem;text-align:right}
}

/* Homepage hit-rate block. Plain and unadorned on purpose: the number is
   unflattering enough to be believed, and dressing it up would undo that. */
.vlm-hitrate{border-top:1px solid var(--md-default-fg-color--lightest);border-bottom:1px solid var(--md-default-fg-color--lightest);padding:.9rem 0;margin:1.2rem 0}
.vlm-hitrate .vlm-hitrate-line{font-size:1.25rem;margin:0 0 .3rem;font-variant-numeric:tabular-nums}
.vlm-hitrate .vlm-hitrate-def{margin:0;font-size:.82rem;opacity:.75}

/* Site-wide quiet CTA (overrides/partials/cta.html). Typographic, not a banner. */
.vlm-cta-foot{margin:2.4rem 0 .5rem;padding-top:1rem;border-top:1px solid var(--md-default-fg-color--lightest);font-size:.85rem;opacity:.85}
.vlm-cta-foot p{margin:0 0 .5rem}
.vlm-cta-foot .vlm-cta-links a{margin-right:1.2rem;font-weight:600}