/* ==========================================================================
   DarkSpaceDepot — SPACE Mall pages
   Path: MITD/v5/sites/dsd-home/assets/dsd/css/mall.css

   Loaded AFTER section.css, and only by /space-mall.php, /scrolls.php and
   /open-a-store.php (see 'extra_css' in each content file).

   WHY A SECOND SHEET RATHER THAN MORE OF section.css. Everything below is used
   by three pages and by nothing else: carousels, a finder bar, numbered steps, a
   wallet panel and a gold accent. Putting it in section.css would hand Launch,
   Travel, Explore and Build about 11KB they never render, and -- the part that
   actually matters -- it would put every future mall change inside the file the
   four live section pages depend on. Two sheets means a mistake here cannot take
   those four pages down.

   Tokens, reset, masthead, buttons, hero, rail, banner and footer all come from
   section.css. This file only adds.
   ========================================================================== */

:root {
  /* The Scrolls gold. It is a CURRENCY colour, not a brand colour: it marks
     Scrolls and the actions that get you Scrolls, and it appears nowhere else.
     The violet-to-blue primary still owns the platform's own actions, which is
     why both exist rather than one replacing the other. */
  --gold:      #E8B44C;
  --gold-2:    #F6D98A;
  --gold-deep: #A9741B;
  --gold-hair: rgba(232, 180, 76, .34);
  --gold-soft: rgba(232, 180, 76, .12);

  /* One spacing value for the gaps between cards, steps and columns, because
     the connector lines between steps are drawn INTO this gap and have to be
     exactly as long as it is. */
  --mgap: clamp(14px, 1.6vw, 22px);
}

/* --------------------------------------------------------------------------
   Band frame
   -------------------------------------------------------------------------- */
/* Top padding only. Each band opens its own gap, which means a band can be
   added, removed or reordered in a content file without anything underneath it
   needing to know. */
.mband { padding: clamp(36px, 5vw, 72px) var(--gut) 0; }

/* The last band has nothing below it but the closing banner, which is
   full-bleed art and brings no gutter of its own at the top. A margin here
   rather than :last-of-type on .mband -- the banner is a <section> too, so
   :last-of-type would never match a band. */
.mband + .banner { margin-top: clamp(36px, 5vw, 72px); }

/* The worlds strip and the finder are one control surface in the concept art,
   so they sit closer together than two unrelated bands would. */
.mband--worlds + .mband--finder { padding-top: clamp(16px, 2vw, 24px); }

/* A centred heading for the bands that make an argument rather than list a
   shelf. The rail (from section.css) is still used where the band IS a shelf. */
.mhead { max-width: 56ch; margin-inline: auto; text-align: center; }
.mhead__title {
  font-size: clamp(22px, 2.6vw, 36px); font-weight: 700; font-stretch: 104%;
  line-height: 1.08; letter-spacing: -.02em; text-transform: uppercase;
}
.mhead__title span { display: block; }
.mhead__lede { margin-top: clamp(12px, 1.4vw, 18px); }
.mhead__lede span {
  display: block;
  font-size: clamp(12.5px, 1vw, 14.5px); line-height: 1.8;
  color: rgba(232, 238, 246, .8);
}

.mband__act { display: flex; justify-content: center; margin-top: clamp(24px, 3vw, 36px); }

/* --------------------------------------------------------------------------
   Gold button
   -------------------------------------------------------------------------- */
.btn--gold {
  border-color: transparent;
  background-image: linear-gradient(100deg, var(--gold-deep), var(--gold-2));
  color: #1A1204;
  font-weight: 700;
}
.btn--gold:hover { box-shadow: 0 0 26px rgba(232, 180, 76, .4); border-color: transparent; }

/* ==========================================================================
   Scroller — one behaviour, two kinds of content

   Native overflow scrolling with snap points, not a JS carousel. It works with
   a trackpad, a touch screen and a scroll wheel before any script loads, the
   track is a real list so Tab reaches every item, and if mall.js fails to load
   the only thing lost is two arrow buttons.
   ========================================================================== */
.scroller__track {
  display: flex; gap: var(--mgap);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 2px;
  /* Room for the focus ring, which would otherwise be clipped by the scroll
     container on the first and last item. */
  padding: 4px 2px 10px;
  scrollbar-width: none;
}
.scroller__track::-webkit-scrollbar { display: none; }
.scroller__track > * { scroll-snap-align: start; }

.scroller__nav { display: flex; gap: 8px; flex: 0 0 auto; }
.scroller__btn {
  display: grid; place-items: center; width: 32px; height: 32px;
  border: 1px solid var(--hairline); border-radius: 50%;
  color: rgba(232, 238, 246, .82);
  transition: border-color .25s var(--ease), background-color .25s var(--ease),
              opacity .25s var(--ease);
}
.scroller__btn .i { width: 15px; height: 15px; }
.scroller__btn:hover { border-color: var(--beacon); background: rgba(79, 168, 255, .12); }
/* Set by mall.js when the track is already at that end. Kept visible rather
   than removed so the control row does not change width mid-scroll. */
.scroller__btn.is-spent { opacity: .3; pointer-events: none; }

/* ==========================================================================
   Worlds strip
   ========================================================================== */
.worlds { align-items: stretch; }
.worlds__item { flex: 0 0 clamp(150px, 15vw, 196px); display: flex; }

/* A thumbnail, not a pill. A world's name alone asks someone to already know
   what Umbra is; the picture answers that before they click. */
.worldcard {
  display: flex; flex-direction: column; gap: 10px; width: 100%;
  padding: 10px 10px 14px; border-radius: 14px;
  border: 1px solid var(--hairline-lo);
  background: linear-gradient(150deg, rgba(20, 32, 54, .5), rgba(8, 12, 20, .8));
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.worldcard:hover { border-color: rgba(79, 168, 255, .45); }

.worldcard__media { display: block; border-radius: 9px; overflow: hidden; }
.worldcard__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.worldcard.is-empty .worldcard__media {
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(70% 70% at 36% 30%, rgba(122, 92, 255, .32), transparent 70%),
    linear-gradient(140deg, #101B2E, #060A12);
}

.worldcard__label {
  display: block; padding-inline: 4px;
  font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(232, 238, 246, .88);
}
.worldcard__note {
  display: block; padding-inline: 4px; margin-top: -4px;
  font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ash-dim);
}
.worldcard.is-current { border-color: var(--beacon); }
.worldcard.is-current .worldcard__label { color: var(--ice); }
/* An inert card should look reachable-but-not-yet, not broken. */
.worldcard[aria-disabled="true"] .worldcard__label { color: rgba(232, 238, 246, .62); }

/* ==========================================================================
   Finder
   ========================================================================== */
.finder {
  display: flex; align-items: center; gap: clamp(10px, 1.4vw, 18px);
  padding: 10px 10px 10px 18px;
  border: 1px solid var(--hairline-lo); border-radius: 999px;
  background: linear-gradient(140deg, rgba(20, 32, 54, .5), rgba(8, 12, 20, .85));
}
.finder .i { flex: 0 0 auto; width: 17px; height: 17px; color: var(--ash); }

.finder__search { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; }
.finder__input {
  flex: 1 1 auto; min-width: 0;
  padding: 10px 0; border: 0; background: none; color: var(--ice);
  font: inherit; font-size: 13px;
}
.finder__input::placeholder { color: var(--ash-dim); }
.finder__input:focus { outline: none; }
/* The ring goes on the pill, not on a borderless input sitting inside it. */
.finder:focus-within { border-color: var(--beacon); }

.finder__filters {
  display: flex; align-items: center; gap: 10px; flex: 0 1 auto; min-width: 0;
  padding-left: clamp(10px, 1.4vw, 18px);
  border-left: 1px solid var(--hairline-lo);
}
.finder__select {
  min-width: 0;
  padding: 9px 12px; border: 1px solid var(--hairline-lo); border-radius: 999px;
  background: rgba(4, 6, 11, .6); color: rgba(232, 238, 246, .86);
  font: inherit; font-size: 10px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  appearance: none; cursor: pointer;
}
.finder__select:hover { border-color: rgba(79, 168, 255, .4); }
.finder__go { flex: 0 0 auto; padding: 13px 22px; }

/* Disabled until there is an index behind it. Dimmed, not hidden: the bar is
   part of what the mall will be, and showing it greyed says "coming" where
   hiding it says nothing at all. */
.finder.is-pending { opacity: .62; }
.finder.is-pending .finder__input,
.finder.is-pending .finder__select,
.finder.is-pending .finder__go { cursor: not-allowed; }

.finder__note {
  margin-top: 12px; padding-left: 18px;
  font-size: 10px; letter-spacing: .1em; color: var(--ash-dim);
}

/* ==========================================================================
   Store cards
   ========================================================================== */
.scards { align-items: stretch; }

.scard {
  display: flex; flex-direction: column;
  flex: 0 0 clamp(236px, 23vw, 310px);
  border: 1px solid var(--hairline-lo); border-radius: 14px;
  background: linear-gradient(165deg, rgba(20, 32, 54, .5), rgba(8, 12, 20, .8));
  overflow: hidden;
  transition: border-color .3s var(--ease);
}
.scard:hover { border-color: rgba(79, 168, 255, .4); }

.scard__media { position: relative; display: block; }
.scard__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.scard.is-empty .scard__media {
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(72% 72% at 34% 30%, rgba(122, 92, 255, .3), transparent 70%),
    linear-gradient(140deg, #101B2E, #060A12);
}
/* The world sits ON the image, because it is a property of the place rather
   than of the shop's name -- and it reads as a location label there. */
.scard__world {
  position: absolute; left: 12px; bottom: 12px;
  padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--hairline);
  background: rgba(4, 6, 11, .72); backdrop-filter: blur(6px);
  font-size: 8.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--beacon);
}

.scard__body { display: block; padding: 16px 18px 10px; }
.scard__name {
  display: block;
  font-size: 14px; font-weight: 600; letter-spacing: .05em;
}
.scard__lines { display: block; margin-top: 8px; }
.scard__line {
  display: block;
  font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase;
  line-height: 1.7; color: rgba(232, 238, 246, .72);
}

.scard__foot { display: block; padding: 0 18px 18px; margin-top: auto; }
.scard__go {
  display: inline-flex; align-items: center; gap: 10px; padding-bottom: 8px;
  border-bottom: 1px solid var(--hairline);
  font-size: 9.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.scard__go .i { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.scard__go:hover { border-color: var(--beacon); color: var(--beacon); }
.scard__go:hover .i { transform: translateX(4px); }
.scard__go[aria-disabled="true"] { color: var(--ash-dim); border-color: var(--hairline-lo); }

/* ==========================================================================
   Feature row with descriptions

   NOT .hfeat. That row lives inside a 620px hero column and holds a two-word
   label; this one is full width and holds a sentence. The count comes from the
   content file through --feat-n so a fifth item needs no CSS edit.
   ========================================================================== */
.feats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));   /* fallback */
  grid-template-columns: repeat(var(--feat-n, 4), minmax(0, 1fr));
  gap: var(--mgap);
  margin-top: clamp(26px, 3vw, 40px);
}
.feat {
  display: flex; flex-direction: column; gap: 12px;
  padding: clamp(18px, 2vw, 26px);
  border: 1px solid var(--hairline-lo); border-radius: 14px;
  background: linear-gradient(165deg, rgba(20, 32, 54, .38), rgba(8, 12, 20, .72));
}
.feat__icon { display: block; color: var(--beacon); }
.feat__icon .i { width: 26px; height: 26px; stroke-width: 1.1; }
.feat__title {
  display: block;
  font-size: 11px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; line-height: 1.5;
}
.feat__text {
  display: block;
  font-size: 12px; line-height: 1.75; color: rgba(232, 238, 246, .76);
}

/* ==========================================================================
   How it works — numbered steps

   The connector is drawn into the gap between cards by ::after. It is CSS and
   not markup for two reasons: an arrow glyph between list items gets read out
   by a screen reader, and at the breakpoint where the steps stack a horizontal
   rule has to disappear rather than rotate.
   ========================================================================== */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));   /* fallback */
  grid-template-columns: repeat(var(--step-n, 4), minmax(0, 1fr));
  gap: var(--mgap);
  margin-top: clamp(26px, 3vw, 40px);
}
.step {
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
  padding: clamp(18px, 2vw, 26px);
  border: 1px solid var(--hairline-lo); border-radius: 14px;
  background: linear-gradient(165deg, rgba(20, 32, 54, .38), rgba(8, 12, 20, .72));
}
.step:not(:last-child)::after {
  content: ""; position: absolute; z-index: 1;
  top: clamp(26px, 2.6vw, 36px); right: calc(var(--mgap) * -1);
  width: var(--mgap); height: 1px;
  background: linear-gradient(to right, var(--hairline), var(--beacon));
}
.step__index {
  font-size: 15px; font-weight: 700; font-stretch: 112%;
  letter-spacing: .06em; color: var(--beacon);
}
.step__title {
  font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.step__text { font-size: 12px; line-height: 1.75; color: rgba(232, 238, 246, .76); }

/* ==========================================================================
   Promo panel — copy over art, points beside it
   ========================================================================== */
/* THREE COLUMNS, THE MIDDLE ONE EMPTY. The art runs behind the whole panel and
   the empty column is the window it shows through. Two columns put the points
   straight over the coins, because a two-way split of a panel whose subject is
   centred leaves the subject nowhere to be. */
.promo {
  position: relative; isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .62fr) minmax(0, .94fr);
  align-items: center; gap: clamp(18px, 2.4vw, 40px);
  padding: clamp(26px, 3.4vw, 52px);
  border: 1px solid var(--hairline-lo); border-radius: 16px;
  overflow: hidden;
}
.promo__copy   { grid-column: 1; }
.promo__points { grid-column: 3; }

.promo__art { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
               object-fit: cover; object-position: 50% 50%; }
.promo.is-empty {
  background:
    radial-gradient(64% 80% at 76% 44%, rgba(122, 92, 255, .3), transparent 72%),
    linear-gradient(150deg, #0B1322, #05080F);
}
/* Dark at BOTH edges, clear through the middle. Each text column gets its own
   backing and the subject of the picture keeps the gap between them. */
.promo__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to right,
      rgba(4, 6, 11, .95) 0%,  rgba(4, 6, 11, .88) 26%,
      rgba(4, 6, 11, .34) 40%, rgba(4, 6, 11, .14) 50%,
      rgba(4, 6, 11, .34) 60%, rgba(4, 6, 11, .88) 74%,
      rgba(4, 6, 11, .95) 100%),
    linear-gradient(to top, rgba(4, 6, 11, .5) 0%, rgba(4, 6, 11, 0) 46%);
}

.promo__copy, .promo__points { position: relative; z-index: 2; }

.promo__logo {
  width: clamp(142px, 15vw, 210px); height: auto;
  margin-bottom: clamp(14px, 1.6vw, 20px);
  filter: drop-shadow(0 0 22px rgba(0, 0, 0, .6));
}

.promo__eyebrow {
  font-size: 10px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
  color: var(--accent, var(--beacon));
}
.promo__title {
  margin-top: 14px;
  font-size: clamp(22px, 2.6vw, 36px); font-weight: 700; font-stretch: 104%;
  line-height: 1.08; letter-spacing: -.02em; text-transform: uppercase;
  text-shadow: var(--lift);
}
.promo__title span { display: block; }
.promo__lede { margin-top: clamp(14px, 1.6vw, 20px); }
.promo__lede span {
  display: block;
  font-size: clamp(12.5px, 1vw, 14.5px); line-height: 1.8;
  color: rgba(232, 238, 246, .84);
  text-shadow: var(--lift);
}
.promo__copy .btn { margin-top: clamp(18px, 2.2vw, 28px); }

.promo__points { display: grid; gap: clamp(14px, 1.6vw, 20px); }
.ppoint { display: flex; align-items: flex-start; gap: 14px; }
.ppoint__icon { flex: 0 0 auto; color: var(--accent, var(--beacon)); }
.ppoint__icon .i { width: 22px; height: 22px; stroke-width: 1.15; }
.ppoint__body { display: block; min-width: 0; }
/* The points sit on artwork, not on a surface, so they carry the same lift the
   hero copy does. The veil darkens this edge; the shadow is what survives a
   bright detail the veil did not anticipate. */
.ppoint__title {
  display: block;
  font-size: 10.5px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase;
  text-shadow: var(--lift);
}
.ppoint__text {
  display: block; margin-top: 5px;
  font-size: 12px; line-height: 1.7; color: rgba(232, 238, 246, .8);
  text-shadow: var(--lift);
}

/* The accent is set on the panel, so it cannot leak into the page around it.
   Everything inside reads var(--accent) and nothing names a colour. */
.promo.is-gold { --accent: var(--gold); border-color: var(--gold-hair); }
.promo.is-gold.is-empty {
  background:
    radial-gradient(64% 80% at 76% 44%, rgba(232, 180, 76, .26), transparent 72%),
    linear-gradient(150deg, #16110A, #06070C);
}

/* ==========================================================================
   Scrolls wallet panel
   ========================================================================== */
/* An art panel like every other band on these pages: full-bleed render, a veil
   weighted to the side the copy is on, copy over the top. It used to be a CSS
   phone frame; that only reads right with a flat UI screenshot inside it, and
   there is no wallet screen to screenshot yet. */
.wallet {
  position: relative; isolation: isolate;
  display: flex; align-items: center;
  min-height: clamp(360px, 36vw, 520px);
  padding: clamp(26px, 3.4vw, 52px);
  border: 1px solid var(--gold-hair); border-radius: 16px;
  overflow: hidden;
}
.wallet__art { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
                object-fit: cover; object-position: 68% 50%; }
.wallet.is-empty {
  background:
    radial-gradient(64% 86% at 76% 48%, rgba(232, 180, 76, .26), transparent 72%),
    linear-gradient(150deg, #16110A, #06070C);
}
.wallet__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to right, rgba(4, 6, 11, .94) 0%, rgba(4, 6, 11, .82) 34%,
                              rgba(4, 6, 11, .34) 62%, rgba(4, 6, 11, .08) 100%),
    linear-gradient(to top,   rgba(4, 6, 11, .66) 0%, rgba(4, 6, 11, 0) 44%);
}

.wallet__copy { position: relative; z-index: 2; max-width: 540px; }

.wallet__title {
  font-size: clamp(22px, 2.6vw, 34px); font-weight: 700; font-stretch: 104%;
  line-height: 1.08; letter-spacing: -.02em; text-transform: uppercase;
}
.wallet__title span { display: block; }
.wallet__title { text-shadow: var(--lift); }
.wallet__lede { margin-top: clamp(12px, 1.4vw, 18px); }
.wallet__lede span {
  display: block;
  font-size: clamp(12.5px, 1vw, 14.5px); line-height: 1.8;
  color: rgba(232, 238, 246, .86);
  text-shadow: var(--lift);
}

.wallet__card {
  margin-top: clamp(20px, 2.4vw, 30px);
  padding: clamp(18px, 2vw, 26px);
  border: 1px solid var(--gold-hair); border-radius: 14px;
  /* Opaque enough to hold a number legibly whatever the render does behind it,
     and blurred so it reads as a panel resting on the artwork rather than a
     hole punched through it. */
  background: linear-gradient(160deg, rgba(40, 30, 12, .76), rgba(4, 6, 11, .86));
  backdrop-filter: blur(10px);
}
/* Said out loud, in the panel, not only in a code comment. A figure in the
   place a real balance will sit has to label itself. */
.wallet__eg {
  font-size: 9px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold);
}
.wallet__amount { display: flex; align-items: baseline; gap: 12px; margin-top: 10px; }
.wallet__figure {
  font-size: clamp(38px, 4.6vw, 60px); font-weight: 800; font-stretch: 106%;
  line-height: 1; letter-spacing: -.03em;
  color: var(--gold-2);
}
.wallet__unit {
  font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ash);
}

.wallet__rows { display: grid; gap: 0; margin-top: clamp(16px, 2vw, 22px); }
.wallet__rows li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 11px 0; border-top: 1px solid var(--hairline-lo);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
}
.wallet__row-label { color: var(--ash); }
.wallet__row-value { color: rgba(232, 238, 246, .92); text-align: right; }

.wallet__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(18px, 2.2vw, 26px); }
.wallet__note {
  margin-top: 14px; max-width: 48ch;
  font-size: 10px; line-height: 1.7; letter-spacing: .06em;
  color: rgba(232, 238, 246, .6);
  text-shadow: var(--lift);
}

/* ==========================================================================
   Bring your business — pitch over art, four pillars under it
   ========================================================================== */
.pcta {
  position: relative; isolation: isolate;
  padding: clamp(30px, 4vw, 60px) clamp(24px, 3vw, 48px);
  border: 1px solid var(--hairline-lo); border-radius: 16px;
  overflow: hidden;
}
.pcta__art { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
              object-fit: cover; object-position: 50% 42%; }
.pcta.is-empty {
  background:
    radial-gradient(70% 80% at 50% 10%, rgba(79, 168, 255, .24), transparent 70%),
    linear-gradient(160deg, #0A1322, #05070D);
}
/* Dark where the words are, clear where the picture is. A single flat wash over
   the whole panel was the first attempt, and it did the worst of both: the
   artwork went muddy AND the centred heading still had a tree behind it.

   So the veil is weighted to the top band (behind the pitch) and the bottom
   band (behind the pillars), with a readable window across the middle, and a
   soft ellipse sits under the heading itself to hold it clear of whatever
   detail the render puts there. */
.pcta__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(74% 46% at 50% 16%, rgba(4, 6, 11, .82), rgba(4, 6, 11, 0) 76%),
    linear-gradient(to bottom,
      rgba(4, 6, 11, .9) 0%,  rgba(4, 6, 11, .62) 26%,
      rgba(4, 6, 11, .3) 50%, rgba(4, 6, 11, .68) 74%,
      rgba(4, 6, 11, .9) 100%);
}

.pcta__copy {
  position: relative; z-index: 2;
  max-width: 56ch; margin-inline: auto; text-align: center;
}
.pcta__title {
  font-size: clamp(23px, 2.8vw, 38px); font-weight: 700; font-stretch: 104%;
  line-height: 1.06; letter-spacing: -.02em; text-transform: uppercase;
  text-shadow: var(--lift);
}
.pcta__title span { display: block; }
.pcta__lede { margin-top: clamp(14px, 1.6vw, 20px); }
.pcta__lede span {
  display: block;
  font-size: clamp(12.5px, 1vw, 14.5px); line-height: 1.8;
  color: rgba(232, 238, 246, .86);
  text-shadow: var(--lift);
}
.pcta__ctas {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
  margin-top: clamp(20px, 2.4vw, 30px);
}

/* The pillars are a bar resting ON the artwork, not four captions floating over
   it. Its own surface, blurred, so every one of the four reads the same however
   bright the picture is underneath that column. */
.pcta__pillars {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--mgap);
  margin-top: clamp(28px, 3.6vw, 50px);
  padding: clamp(22px, 2.6vw, 32px) clamp(18px, 2.2vw, 30px);
  border: 1px solid var(--hairline-lo); border-radius: 14px;
  background: rgba(4, 6, 11, .62);
  backdrop-filter: blur(14px);
}
.bpillar { display: flex; flex-direction: column; align-items: center; gap: 10px;
           text-align: center; }
.bpillar__icon { color: var(--beacon); }
.bpillar__icon .i { width: 26px; height: 26px; stroke-width: 1.05; }
.bpillar__title {
  font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
}
.bpillar__text {
  max-width: 24ch;
  font-size: 11.5px; line-height: 1.7; color: rgba(232, 238, 246, .76);
}

/* ==========================================================================
   Hero mark

   A page whose subject has a mark of its own leads with it. The <h1> underneath
   is still the heading -- a page whose only <h1> is an image reads as untitled.
   ========================================================================== */
.lhero__logo {
  width: clamp(190px, 24vw, 330px); height: auto;
  margin-bottom: clamp(14px, 1.8vw, 24px);
  /* The mark sits on artwork, so it gets the same lift the headline does --
     as a drop-shadow, because text-shadow does nothing for an image. */
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, .6))
          drop-shadow(0 0 34px rgba(0, 0, 0, .5))
          drop-shadow(0 0 80px rgba(0, 0, 0, .38));
}

/* ==========================================================================
   Page accents
   ========================================================================== */
/* Scrolls is a gold page. The eyebrow index, the feature icons and the step
   numbers follow the currency rather than the platform, because on this page
   every one of them is talking about Scrolls. */
body.dsd-scrolls .eyebrow__index,
body.dsd-scrolls .feat__icon,
body.dsd-scrolls .step__index,
body.dsd-scrolls .rail__strap { color: var(--gold); }
body.dsd-scrolls .step:not(:last-child)::after {
  background: linear-gradient(to right, var(--hairline), var(--gold));
}
body.dsd-scrolls .feat { border-color: var(--gold-soft); }

/* The mark carries the name now, so the headline is the line UNDER the name and
   steps down a size to say so. It also has to fit: at the section-page size
   "ONE CURRENCY." needed about 610px of the 620px copy column and broke across
   two lines, which turned a two-line headline into three. Wider column, smaller
   type, and the eyebrow goes gold with the rest of the page. */
body.dsd-scrolls .lhero__copy { max-width: 720px; }
body.dsd-scrolls .lhero__title {
  margin-top: 14px;
  font-size: clamp(32px, 4.3vw, 58px);
}
body.dsd-scrolls .lhero__lede { max-width: 48ch; }

/* ==========================================================================
   Responsive

   Breakpoints match section.css so the whole page changes shape at once: a
   masthead that collapses at 860px while a band below it holds four columns
   until 760 reads as two pages stapled together.
   ========================================================================== */
@media (max-width: 1100px) {
  .feats, .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The connector points at the card to its right. In a two-column grid every
     second step has nothing to its right, so the rule is dropped rather than
     left pointing into the gutter. */
  .step:not(:last-child)::after { display: none; }
  /* The empty middle column only works while there is width to spare. Below
     this the panel stacks, and the art becomes a backdrop to both blocks rather
     than something framed between them. */
  .promo { grid-template-columns: minmax(0, 1fr); }
  .promo__copy, .promo__points { grid-column: 1; }
  .pcta__pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  /* The finder stops being a pill. Three filters and a search field cannot
     share one line at this width, and a select squeezed to 60px is not a
     control -- it is a decoration that happens to be focusable. */
  .finder {
    display: grid; grid-template-columns: minmax(0, 1fr);
    gap: 12px; padding: 14px; border-radius: 16px;
  }
  .finder__filters {
    flex-wrap: wrap; padding-left: 0; padding-top: 12px;
    border-left: 0; border-top: 1px solid var(--hairline-lo);
  }
  .finder__select { flex: 1 1 auto; }
  .finder__go { justify-content: center; }
  .finder__note { padding-left: 0; }

  /* Stacked, the copy and the points cover the whole panel, so a left-right
     veil has nothing left to protect. Darken the lot instead. */
  .promo__veil,
  .wallet__veil {
    background:
      linear-gradient(to bottom, rgba(4, 6, 11, .82) 0%, rgba(4, 6, 11, .9) 60%,
                                 rgba(4, 6, 11, .96) 100%);
  }
  .wallet { min-height: 0; }
  .wallet__copy { max-width: none; }
}

@media (max-width: 620px) {
  .feats, .steps { grid-template-columns: minmax(0, 1fr); }
  .pcta__pillars { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  /* Left-aligned, still a column. Turning the pillar into a row would put the
     title and the sentence side by side as well -- they are siblings of the
     icon, not children of a body wrapper. */
  .bpillar { align-items: flex-start; text-align: left; }
  .bpillar__text { max-width: none; }
  .scard { flex: 0 0 min(78vw, 300px); }
  .wallet__amount { flex-direction: column; align-items: flex-start; gap: 6px; }
}