/* ==========================================================================
   promotions.css
   The 100% Bonus Account page (/bonus-account). Ported from
   update/stage6/Promotions.

   LOAD css/about.css FIRST — it carries the --ab-* tokens and the shared
   editorial kit (hero, section shell, heads, eyebrows, buttons, closing band,
   note). This file adds only what that kit has no equivalent of.

   TWO CONVENTIONS RUN THROUGH EVERY BLOCK BELOW, and both are compliance
   requirements rather than styling preferences:

   1. CASH AND CREDIT ARE NEVER STYLED ALIKE. Client money uses the page's ink
      colour; Bonus Credit uses gold and carries a "Promotional Credit" tag
      wherever a figure appears. A reader must never be able to mistake one for
      the other at a glance — that is the entire point of the equation, the
      ledger and the withdrawal flow.

   2. QUALIFIERS ARE PART OF THE COMPONENT. .pm-sim__cap, .pm-spec__note,
      .pm-tl__warn and .pm-hero__micro are not footnotes that can be trimmed to
      tighten a layout. Each one qualifies the figures directly above it.

   PROPORTIONS FOLLOW THE STAGE6 SOURCE. The source is deliberately varied —
   an open two-column benefit list, a raised calculator panel, a narrow
   centred ledger, a dotted timeline rail, a bordered risk callout. An earlier
   pass flattened all of these into one uniform bordered matrix, which is not
   the intended structure. Where a component below is a bordered grid it is
   because the source made it one.

   Grid rules that ARE matrices use the technique documented in css/about.css:
   container draws border-top + border-left, cells draw border-right +
   border-bottom, so a short last row is absent rather than filled.
   ========================================================================== */

/* The source's second raised surface (#13223A), one step above --ab-panel.
   Used for the ledger total row and the calculator input. about.css has no
   equivalent, so it is defined here rather than borrowed from a component. */
:root {
  --pm-panel-2: #13223a;
}

html[data-bs-theme='light'] {
  --pm-panel-2: #f1f3f7;
}

/* --------------------------------------------------------------------------
   1. Hero additions
   -------------------------------------------------------------------------- */
.pm-hero__micro {
  max-width: 560px;
  margin: 20px 0 0;
  font-size: 0.78rem;
  color: var(--ab-ink-muted);
}

/* Deposit + Bonus Credit = trading equity, stated as an equation because the
   relationship is the product. It is a hairline-topped band rather than a box:
   the third term is separated by a rule of its own because it is capacity, NOT
   money the client owns — .pm-eq__note under it says so and stays. */
.pm-equation {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1.2fr;
  align-items: center;
  margin-top: 60px;
  padding-top: 44px;
  border-top: 1px solid var(--ab-line);
}

.pm-eq__term {
  padding: 0 30px;
}

.pm-eq__term:first-child {
  padding-left: 0;
}

.rtl .pm-eq__term:first-child {
  padding-left: 30px;
  padding-right: 0;
}

.pm-eq__val {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  line-height: 1.05;
  color: var(--ab-ink);
  font-variant-numeric: tabular-nums;
}

/* Gold is reserved for credit. Client money stays ink. */
.pm-eq__val.is-bonus {
  color: var(--ab-gold);
}

.pm-eq__k {
  margin-top: 14px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ab-ink-muted);
}

.pm-eq__tag {
  display: inline-block;
  margin-top: 10px;
  padding: 3px 9px;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--ab-line);
  color: var(--ab-platinum);
}

.pm-eq__tag.is-credit {
  color: var(--ab-gold);
}

.pm-eq__op {
  font-size: 2rem;
  line-height: 1;
  text-align: center;
  color: var(--ab-gold);
}

/* The equity term is fenced off by a rule. It is the one term that is not a
   sum of money the client holds. */
.pm-eq__equity-wrap {
  border-left: 1px solid var(--ab-line);
  padding-left: 34px;
}

.rtl .pm-eq__equity-wrap {
  border-left: 0;
  border-right: 1px solid var(--ab-line);
  padding-left: 30px;
  padding-right: 34px;
}

.pm-eq__note {
  margin: 8px 0 0;
  font-size: 0.68rem;
  color: var(--ab-ink-muted);
}

/* A compact strip, sized to its content — not a full-width band. */
.pm-hi {
  display: grid;
  grid-template-columns: repeat(3, auto);
  width: fit-content;
  max-width: 100%;
  margin-top: 52px;
  border: 1px solid var(--ab-line);
}

.pm-hi__cell {
  padding: 22px 34px;
  border-right: 1px solid var(--ab-line);
}

.pm-hi__cell:last-child {
  border-right: 0;
}

.rtl .pm-hi__cell {
  border-right: 0;
  border-left: 1px solid var(--ab-line);
}

.rtl .pm-hi__cell:last-child {
  border-left: 0;
}

.pm-hi__v {
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height: 1.1;
  color: var(--ab-gold);
  font-variant-numeric: tabular-nums;
}

.pm-hi__l {
  margin-top: 10px;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ab-ink-muted);
}

/* --------------------------------------------------------------------------
   2. Numbered benefits
   An open editorial list, two across, ruled rather than boxed: hairlines
   between rows and one vertical rule down the middle. There is no outer box.
   -------------------------------------------------------------------------- */
.pm-benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--ab-line);
}

.pm-benefit {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 20px;
  padding: 34px 40px 34px 0;
  border-bottom: 1px solid var(--ab-line);
}

.pm-benefit:nth-child(odd) {
  padding-right: 52px;
  border-right: 1px solid var(--ab-line);
}

.pm-benefit:nth-child(even) {
  padding-left: 52px;
}

.rtl .pm-benefit {
  padding: 34px 0 34px 40px;
}

.rtl .pm-benefit:nth-child(odd) {
  padding-right: 0;
  padding-left: 52px;
  border-right: 0;
  border-left: 1px solid var(--ab-line);
}

.rtl .pm-benefit:nth-child(even) {
  padding-left: 0;
  padding-right: 52px;
}

.pm-benefit__n {
  padding-top: 4px;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  color: var(--ab-gold);
  font-variant-numeric: tabular-nums;
}

.pm-benefit h3 {
  margin: 0 0 9px;
  font-size: 1.18rem;
  font-weight: 500;
  color: var(--ab-ink);
}

.pm-benefit p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--ab-ink-muted);
}

/* The Losable Bonus is conditional on management approval. Wherever it is
   mentioned this flag goes with it — it is never presented as automatic. */
.pm-flag {
  display: inline-block;
  margin-top: 12px;
  padding: 4px 11px;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ab-gold);
  border: 1px solid var(--ab-line);
}

/* --------------------------------------------------------------------------
   3. Capacity calculator
   Arithmetic on published values, not a quote and not an account preview. The
   caption and the cap notice are part of it.
   -------------------------------------------------------------------------- */
.pm-sim {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: center;
}

.pm-sim__controls h2 {
  margin: 0 0 16px;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 500;
  line-height: 1.16;
  color: var(--ab-ink);
}

.pm-sim__controls > p {
  margin: 0 0 28px;
  font-size: 0.94rem;
  color: var(--ab-ink-muted);
}

.pm-sim__controls .ab-eyebrow {
  display: block;
  margin-bottom: 16px;
}

.pm-sim__presets {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pm-sim__presets button {
  padding: 11px 20px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--ab-ink-muted);
  background: transparent;
  border: 1px solid var(--ab-line);
  cursor: pointer;
  transition:
    color 0.2s var(--ab-ease),
    background-color 0.2s var(--ab-ease),
    border-color 0.2s var(--ab-ease);
}

.pm-sim__presets button:hover,
.pm-sim__presets button:focus-visible {
  color: var(--ab-gold);
  border-color: var(--ab-gold);
}

.pm-sim__presets button[aria-pressed='true'] {
  color: var(--ab-base);
  background: var(--ab-gold);
  border-color: var(--ab-gold);
}

.pm-sim__custom {
  margin-top: 24px;
}

.pm-sim__custom label {
  display: block;
  margin-bottom: 9px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ab-ink-muted);
}

.pm-sim__field {
  display: flex;
  align-items: stretch;
  max-width: 280px;
  background: var(--pm-panel-2);
  border: 1px solid var(--ab-line);
}

.pm-sim__field .cur {
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-size: 0.9rem;
  color: var(--ab-ink-muted);
  border-right: 1px solid var(--ab-line);
}

.rtl .pm-sim__field .cur {
  border-right: 0;
  border-left: 1px solid var(--ab-line);
}

.pm-sim__field input {
  flex: 1 1 auto;
  min-width: 0;
  height: 52px;
  padding: 0 16px;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  color: var(--ab-ink);
  background: transparent;
  border: 0;
}

.pm-sim__field input:focus-visible {
  outline: 2px solid var(--ab-gold);
  outline-offset: -2px;
}

.pm-sim__note {
  margin: 18px 0 0;
  font-size: 0.72rem;
  color: var(--ab-ink-muted);
}

/* A raised panel, so the worked figures read as a readout rather than as body
   copy on the page ground. */
.pm-sim__viz {
  padding: 40px;
  background: var(--ab-panel);
  border: 1px solid var(--ab-line);
}

.pm-sim__line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--ab-line);
}

.pm-sim__line:first-child {
  padding-top: 0;
}

.pm-sim__line .lab {
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ab-ink-muted);
}

.pm-sim__line .tag {
  display: block;
  margin-top: 5px;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ab-ink-quiet);
}

.pm-sim__line .amt {
  flex-shrink: 0;
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  line-height: 1.1;
  color: var(--ab-ink);
  font-variant-numeric: tabular-nums;
}

.pm-sim__line.is-bonus .amt,
.pm-sim__line.is-bonus .tag {
  color: var(--ab-gold);
}

/* The total is ruled off in gold above, not merely spaced — it is the sum the
   whole panel exists to state. */
.pm-sim__line.is-equity {
  margin-top: 6px;
  padding-top: 24px;
  padding-bottom: 0;
  border-bottom: 0;
  border-top: 2px solid var(--ab-gold);
}

.pm-sim__line.is-equity .amt {
  font-size: clamp(1.6rem, 3.2vw, 2rem);
}

.pm-sim__cap {
  margin: 20px 0 0;
  font-size: 0.72rem;
  color: var(--ab-ink-muted);
}

/* Shown by js/bonus-calc.js only when the entered deposit exceeds the maximum
   Bonus Credit. Hidden is the default state, not a styling accident. */
.pm-sim__capped {
  margin-top: 14px;
  padding: 12px 16px;
  font-size: 0.78rem;
  color: var(--ab-platinum);
  border: 1px solid var(--ab-line);
  border-left: 2px solid var(--ab-gold);
}

.rtl .pm-sim__capped,
.rtl .pm-tl__warn {
  border-left: 1px solid var(--ab-line);
  border-right: 2px solid var(--ab-gold);
}

.pm-sim__capped[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   4. Accumulation ledger
   A narrow centred statement, not a full-width table. The measure is what
   makes two deposits and a total read as one running account.
   -------------------------------------------------------------------------- */
.pm-ledger {
  max-width: 820px;
  margin: 0 auto;
  background: var(--ab-panel);
  border: 1px solid var(--ab-line);
}

.pm-ledger__row,
.pm-ledger__total {
  display: grid;
  grid-template-columns: 120px 1fr 1fr;
  gap: 20px;
  align-items: center;
}

.pm-ledger__row {
  padding: 24px 32px;
  border-bottom: 1px solid var(--ab-line);
}

.pm-ledger__total {
  padding: 28px 32px;
  background: var(--pm-panel-2);
}

.pm-ledger__row .dep-label {
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  color: var(--ab-gold);
}

.pm-ledger__total .dep-label {
  font-size: 1.05rem;
  color: var(--ab-ink);
}

.pm-ledger .k {
  margin-bottom: 5px;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ab-ink-muted);
}

.pm-ledger .v {
  font-size: 1.2rem;
  color: var(--ab-ink);
  font-variant-numeric: tabular-nums;
}

.pm-ledger__total .v {
  font-size: 1.35rem;
}

.pm-ledger .v.is-bonus {
  color: var(--ab-gold);
}

/* Centred and set apart: the equity line is the outcome of the rows above it,
   not another row. */
.pm-ledger__equity {
  padding: 26px;
  text-align: center;
  border-top: 1px solid var(--ab-line);
}

.pm-ledger__equity .k {
  margin: 0;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
}

.pm-ledger__equity .v {
  margin-top: 8px;
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  color: var(--ab-ink);
}

/* Sits under the ledger and the withdrawal flow, on the same measure as the
   block it qualifies. */
.pm-note {
  max-width: 820px;
  margin: 18px auto 0;
  font-size: 0.76rem;
  color: var(--ab-ink-muted);
}

/* --------------------------------------------------------------------------
   5. Is / is not
   The single most load-bearing section on the page. Both columns ship
   together; neither is decorative.
   -------------------------------------------------------------------------- */
.pm-isnot {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--ab-line);
}

.pm-isnot__col {
  padding: 44px;
}

.pm-isnot__col:first-child {
  border-right: 1px solid var(--ab-line);
}

.rtl .pm-isnot__col:first-child {
  border-right: 0;
  border-left: 1px solid var(--ab-line);
}

.pm-isnot__col h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 26px;
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--ab-ink);
}

.pm-isnot__col .mk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border: 1px solid var(--ab-line);
}

.pm-isnot__col .mk svg {
  width: 14px;
  height: 14px;
}

.pm-isnot__col.is-yes .mk {
  color: var(--ab-gold);
}

.pm-isnot__col.is-no .mk {
  color: var(--ab-ink-muted);
}

.pm-isnot__col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pm-isnot__col li {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 14px 0;
  font-size: 0.92rem;
  color: var(--ab-ink-muted);
  border-bottom: 1px solid var(--ab-line);
}

.pm-isnot__col li:last-child {
  border-bottom: 0;
}

.pm-isnot__col li svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 4px;
}

.pm-isnot__col.is-yes li svg {
  color: var(--ab-gold);
}

.pm-isnot__col.is-no li svg {
  color: var(--ab-ink-quiet);
}

/* Gold, because this qualifier is what keeps "can be consumed through trading
   losses" from reading as unconditional. */
.pm-isnot__col .cond {
  display: block;
  margin-top: 5px;
  font-size: 0.72rem;
  color: var(--ab-gold);
}

/* --------------------------------------------------------------------------
   6. Withdrawal walk-through
   -------------------------------------------------------------------------- */

/* The governing rule, stated once and large, above the worked example that
   demonstrates it. */
.pm-wd__rule {
  max-width: 820px;
  margin: 0 auto 48px;
  padding: 32px 40px;
  text-align: center;
  font-size: clamp(1.1rem, 2.2vw, 1.45rem);
  line-height: 1.4;
  color: var(--ab-ink);
  background: var(--ab-panel);
  border: 1px solid var(--ab-line);
  border-top: 2px solid var(--ab-gold);
}

.pm-wd__flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
}

.pm-wd__state {
  padding: 30px 28px;
  background: var(--ab-panel);
  border: 1px solid var(--ab-line);
}

.pm-wd__state h4 {
  margin: 0 0 20px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ab-gold);
}

.pm-wd__state .row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  font-size: 0.84rem;
  border-bottom: 1px solid var(--ab-line);
}

.pm-wd__state .row:last-child {
  border-bottom: 0;
}

.pm-wd__state .row .k {
  color: var(--ab-ink-muted);
}

.pm-wd__state .row .v {
  color: var(--ab-ink);
  font-variant-numeric: tabular-nums;
}

.pm-wd__state .row .v.is-bonus {
  color: var(--ab-gold);
}

.pm-wd__act {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 20px;
  text-align: center;
}

.pm-wd__act .t {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ab-ink-muted);
}

.pm-wd__act .a {
  font-size: 1.05rem;
  color: var(--ab-ink);
  font-variant-numeric: tabular-nums;
}

.pm-wd__act .arw {
  font-size: 1.6rem;
  line-height: 1;
  color: var(--ab-gold);
}

.rtl .pm-wd__act .arw {
  display: inline-block;
  transform: scaleX(-1);
}

/* --------------------------------------------------------------------------
   7. Losable bonus
   -------------------------------------------------------------------------- */
.pm-losable {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: 48px;
  align-items: center;
}

.pm-losable__body h2 {
  margin: 16px 0 18px;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 500;
  line-height: 1.16;
  color: var(--ab-ink);
}

.pm-losable__body p {
  margin: 0 0 14px;
  font-size: 0.95rem;
  color: var(--ab-ink-muted);
}

.pm-losable__status {
  padding: 38px;
  text-align: center;
  background: var(--ab-panel);
  border: 1px solid var(--ab-line);
}

/* Gold-outlined, unlike every other tag on the page, because this one states a
   condition rather than a label. */
.pm-losable__status .badge {
  display: inline-block;
  margin-bottom: 22px;
  padding: 8px 18px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ab-gold);
  background: transparent;
  border: 1px solid var(--ab-gold);
  border-radius: 0;
}

.pm-losable__status .title {
  margin-bottom: 8px;
  font-size: 1.5rem;
  color: var(--ab-ink);
}

.pm-losable__status .cond {
  font-size: 0.82rem;
  color: var(--ab-ink-muted);
}

.pm-losable__status .divider {
  height: 1px;
  margin: 24px 0;
  background: var(--ab-line);
}

.pm-losable__status .activation {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ab-gold);
}

/* --------------------------------------------------------------------------
   8. Specification matrix
   -------------------------------------------------------------------------- */
.pm-spec {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--ab-line);
  border-left: 1px solid var(--ab-line);
}

.rtl .pm-spec {
  border-left: 0;
  border-right: 1px solid var(--ab-line);
}

.pm-spec__cell {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 18px 30px;
  border-right: 1px solid var(--ab-line);
  border-bottom: 1px solid var(--ab-line);
}

.rtl .pm-spec__cell {
  border-right: 0;
  border-left: 1px solid var(--ab-line);
}

.pm-spec__cell .k {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ab-ink-muted);
}

.pm-spec__cell .v {
  flex-shrink: 0;
  text-align: right;
  font-size: 1rem;
  color: var(--ab-ink);
  font-variant-numeric: tabular-nums;
}

.rtl .pm-spec__cell .v {
  text-align: left;
}

.pm-spec__cell .v.is-gold {
  color: var(--ab-gold);
}

.pm-spec__note {
  max-width: 940px;
  margin: 20px 0 0;
  font-size: 0.76rem;
  color: var(--ab-ink-muted);
}

/* --------------------------------------------------------------------------
   9. Bonus period timeline
   A dotted rail, not a row of boxes: one hairline runs behind all four nodes
   and each node hangs a gold dot on it. Reading it as a sequence is the point.
   -------------------------------------------------------------------------- */
.pm-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 8px;
}

.pm-timeline::before {
  content: '';
  position: absolute;
  top: 7px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--ab-line);
}

.pm-tl__node {
  position: relative;
  padding: 32px 20px 0 0;
}

.pm-tl__node::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ab-gold);
}

.rtl .pm-tl__node {
  padding: 32px 0 0 20px;
}

.rtl .pm-tl__node::before {
  left: auto;
  right: 0;
}

.pm-tl__node .d {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ab-gold);
}

.pm-tl__node h3 {
  margin: 10px 0 8px;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ab-ink);
}

.pm-tl__node p {
  margin: 0;
  padding-right: 16px;
  font-size: 0.85rem;
  color: var(--ab-ink-muted);
}

.rtl .pm-tl__node p {
  padding-right: 0;
  padding-left: 16px;
}

/* Credit removal can trigger a margin call. This warning belongs to the
   timeline above it. */
.pm-tl__warn {
  margin-top: 36px;
  padding: 18px 24px;
  font-size: 0.84rem;
  color: var(--ab-platinum);
  background: var(--ab-panel);
  border: 1px solid var(--ab-line);
  border-left: 2px solid var(--ab-gold);
}

/* --------------------------------------------------------------------------
   10. Fair use
   The prohibited practices are a ruled list in two columns, not a cloud of
   pills — thirteen equally weighted items that have to be read, not scanned.
   -------------------------------------------------------------------------- */
.pm-fair {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 48px;
  align-items: start;
}

.pm-fair__intro h2 {
  margin: 16px 0 16px;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 500;
  line-height: 1.16;
  color: var(--ab-ink);
}

.pm-fair__intro p {
  margin: 0 0 20px;
  font-size: 0.94rem;
  color: var(--ab-ink-muted);
}

.pm-fair__list {
  columns: 2;
  column-gap: 36px;
}

.pm-fair__list .it {
  display: flex;
  gap: 10px;
  break-inside: avoid;
  padding: 10px 0;
  font-size: 0.86rem;
  color: var(--ab-ink-muted);
  border-bottom: 1px solid var(--ab-line);
}

.pm-fair__list .it::before {
  content: '—';
  flex-shrink: 0;
  color: var(--ab-gold);
}

/* --------------------------------------------------------------------------
   11. Risk
   A bordered callout with a gold rule down its edge. The risk statement is not
   body copy on the page ground — it is set apart deliberately.
   -------------------------------------------------------------------------- */
.pm-risk {
  padding: 40px 44px;
  background: var(--ab-panel);
  border: 1px solid var(--ab-line);
  border-left: 2px solid var(--ab-gold);
}

.rtl .pm-risk {
  border-left: 1px solid var(--ab-line);
  border-right: 2px solid var(--ab-gold);
}

.pm-risk h2 {
  margin: 0 0 18px;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 500;
  line-height: 1.16;
  color: var(--ab-ink);
}

.pm-risk > p {
  max-width: 820px;
  margin: 0 0 14px;
  font-size: 0.96rem;
  color: var(--ab-platinum);
}

.pm-risk__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 24px;
  border-top: 1px solid var(--ab-line);
  border-left: 1px solid var(--ab-line);
}

.rtl .pm-risk__grid {
  border-left: 0;
  border-right: 1px solid var(--ab-line);
}

.pm-risk__cell {
  padding: 22px 20px;
  text-align: center;
  border-right: 1px solid var(--ab-line);
  border-bottom: 1px solid var(--ab-line);
}

.rtl .pm-risk__cell {
  border-right: 0;
  border-left: 1px solid var(--ab-line);
}

.pm-risk__cell .x {
  display: block;
  font-size: 1.1rem;
  color: var(--ab-gold);
}

.pm-risk__cell p {
  margin: 10px 0 0;
  font-size: 0.8rem;
  color: var(--ab-ink-muted);
}

.pm-risk__foot {
  max-width: 820px;
  margin: 22px 0 0;
  font-size: 0.86rem;
  color: var(--ab-ink-muted);
}

/* --------------------------------------------------------------------------
   12. FAQ
   Bootstrap's accordion, re-tokenised. The markup and behaviour are Bootstrap's
   so the page ships no accordion JS of its own.
   -------------------------------------------------------------------------- */
.pm-faq {
  max-width: 860px;
  margin: 0 auto;
  --bs-accordion-bg: transparent;
  --bs-accordion-border-color: var(--ab-line);
  --bs-accordion-border-radius: 0;
  --bs-accordion-inner-border-radius: 0;
  --bs-accordion-btn-color: var(--ab-ink);
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-active-color: var(--ab-gold);
  --bs-accordion-active-bg: transparent;
  --bs-accordion-body-color: var(--ab-ink-muted);
  --bs-accordion-btn-padding-y: 1.2rem;
  --bs-accordion-body-padding-y: 0.25rem;
}

.pm-faq .accordion-button {
  font-size: 1.05rem;
  color: var(--ab-ink);
}

.pm-faq .accordion-button:not(.collapsed) {
  color: var(--ab-gold);
  box-shadow: none;
}

.pm-faq .accordion-button:focus-visible {
  outline: 2px solid var(--ab-gold);
  outline-offset: -2px;
}

.pm-faq .accordion-body {
  font-size: 0.92rem;
  color: var(--ab-ink-muted);
}

/* --------------------------------------------------------------------------
   13. Closing disclosure
   -------------------------------------------------------------------------- */
.pm-disclosure {
  max-width: 940px;
  margin: 34px auto 0;
  padding-top: 22px;
  font-size: 0.76rem;
  color: var(--ab-ink-muted);
  border-top: 1px solid var(--ab-line);
}

.pm-disclosure p {
  margin: 0;
}

/* --------------------------------------------------------------------------
   14. Responsive
   The source's own breakpoints, mapped onto Bootstrap's. Each one collapses a
   structure rather than merely narrowing it: the equation drops its equity
   rule to a full-width row, the timeline loses its rail, the withdrawal flow
   turns its arrows through 90 degrees.
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .pm-equation {
    grid-template-columns: 1fr auto 1fr;
    gap: 24px 0;
  }

  .pm-eq__equity-wrap,
  .rtl .pm-eq__equity-wrap {
    grid-column: 1 / -1;
    margin-top: 8px;
    padding: 28px 0 0;
    border-left: 0;
    border-right: 0;
    border-top: 1px solid var(--ab-line);
  }

  .pm-sim,
  .pm-losable,
  .pm-fair {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .pm-risk__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pm-timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 0;
  }

  .pm-timeline::before {
    display: none;
  }

  .pm-tl__node {
    padding: 0 20px 0 22px;
  }

  .rtl .pm-tl__node {
    padding: 0 22px 0 20px;
  }

  .pm-tl__node::before {
    top: 7px;
  }
}

@media (max-width: 991.98px) {
  .pm-benefits {
    grid-template-columns: 1fr;
  }

  .pm-benefit,
  .pm-benefit:nth-child(odd),
  .pm-benefit:nth-child(even),
  .rtl .pm-benefit,
  .rtl .pm-benefit:nth-child(odd),
  .rtl .pm-benefit:nth-child(even) {
    padding: 26px 0;
    border-right: 0;
    border-left: 0;
  }

  .pm-isnot {
    grid-template-columns: 1fr;
  }

  .pm-isnot__col:first-child,
  .rtl .pm-isnot__col:first-child {
    border-right: 0;
    border-left: 0;
    border-bottom: 1px solid var(--ab-line);
  }

  .pm-isnot__col {
    padding: 34px 30px;
  }

  /* Three states with the two actions between them, in reading order. */
  .pm-wd__flow {
    grid-template-columns: 1fr;
  }

  .pm-wd__act {
    flex-direction: row;
    padding: 18px 0;
  }

  .pm-wd__act .arw,
  .rtl .pm-wd__act .arw {
    transform: rotate(90deg);
  }

  .pm-spec {
    grid-template-columns: 1fr;
  }

  .pm-hi {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .pm-hi__cell,
  .rtl .pm-hi__cell {
    border-right: 0;
    border-left: 0;
    border-bottom: 1px solid var(--ab-line);
  }

  .pm-hi__cell:last-child {
    border-bottom: 0;
  }

  .pm-fair__list {
    columns: 1;
  }

  .pm-risk {
    padding: 32px 28px;
  }

  .pm-ledger__row,
  .pm-ledger__total {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .pm-ledger__row,
  .pm-ledger__total,
  .pm-ledger__equity {
    padding: 22px 24px;
  }

  .pm-wd__rule {
    padding: 24px 26px;
  }
}

@media (max-width: 767.98px) {
  .pm-equation {
    grid-template-columns: 1fr;
  }

  .pm-eq__term,
  .pm-eq__term:first-child,
  .rtl .pm-eq__term,
  .rtl .pm-eq__term:first-child {
    padding-left: 0;
    padding-right: 0;
  }

  .pm-eq__op {
    padding: 10px 0;
  }

  .pm-risk__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pm-timeline {
    grid-template-columns: 1fr;
  }

  .pm-sim__viz {
    padding: 28px 24px;
  }
}