/* ==========================================================================
   Fees & Limits page
   --------------------------------------------------------------------------
   Scoped to .page-fees-and-limits. Section headings use the site-wide
   `.section-title > .title` pattern from main.css.

   Cards share the surface, border, radius and shadow recipe used on the
   features and media pages, so the three read as one system.
   ========================================================================== */

.page-fees-and-limits .fees-section {
  position: relative;
  z-index: 1;
}

/* --- Intro and section headers ------------------------------------------ */

.page-fees-and-limits .fees-intro,
.page-fees-and-limits .fees-block-header {
  max-width: 900px;
  margin: 0 auto var(--space-xl);
  text-align: center;
}

.page-fees-and-limits .section-desc {
  margin: 0 auto;
  max-width: var(--measure);
  color: var(--color-default);
  font-size: var(--text-lg);
  line-height: var(--leading-body);
}

.page-fees-and-limits .section-desc strong {
  color: var(--color-primary);
  font-weight: 600;
}

/* --- Shared card surface ------------------------------------------------ */

.page-fees-and-limits .fee-card,
.page-fees-and-limits .premium-card,
.page-fees-and-limits .standout-card {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--gradient-surface);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.28),
    0 12px 28px rgba(0, 0, 0, 0.3);
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base),
    background var(--transition-base);
}

.page-fees-and-limits .fee-card:hover,
.page-fees-and-limits .premium-card:hover,
.page-fees-and-limits .standout-card:hover {
  transform: translateY(-6px);
  border-color: var(--color-primary-line);
  background: var(--gradient-surface-hover);
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.32),
    0 24px 48px rgba(0, 0, 0, 0.42),
    var(--shadow-primary);
}

/* --- Shared artwork stage -----------------------------------------------
   The renders are cropped tight to their subject and differ in aspect
   (280×270, 197×280, 205×280 …), so each sits in a fixed-height stage and is
   sized by `max-height`. That is what keeps a row of them optically level —
   matching widths instead would leave the tall ones towering.

   No chip or tile behind them: these are lit 3D objects, and a bordered
   square would fight the lighting. A soft radial pool grounds them instead.
   ------------------------------------------------------------------------ */

.page-fees-and-limits .fee-card__stage,
.page-fees-and-limits .premium-card__stage,
.page-fees-and-limits .standout-card__stage {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  /* Never let the copy beside it squeeze the render out of shape. */
  flex: 0 0 auto;
}

/* The floor pool is centred on the stage rather than pinned left, so it stays
   under the render whatever width that render happens to be — the seven differ
   in aspect and so in rendered width. */
.page-fees-and-limits .fee-card__stage::before,
.page-fees-and-limits .premium-card__stage::before,
.page-fees-and-limits .standout-card__stage::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 86%;
  height: 15px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(
    ellipse,
    rgba(255, 166, 8, 0.34),
    rgba(255, 166, 8, 0) 70%
  );
  filter: blur(5px);
  transition:
    width var(--transition-base),
    opacity var(--transition-base);
}

.page-fees-and-limits .fee-card__art,
.page-fees-and-limits .premium-card__art,
.page-fees-and-limits .standout-card__art {
  position: relative;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.5));
  transition: transform var(--transition-slow);
}

.page-fees-and-limits .fee-card:hover .fee-card__art,
.page-fees-and-limits .premium-card:hover .premium-card__art,
.page-fees-and-limits .standout-card:hover .standout-card__art {
  transform: translateY(-4px) scale(1.06);
}

.page-fees-and-limits .fee-card:hover .fee-card__stage::before,
.page-fees-and-limits .premium-card:hover .premium-card__stage::before,
.page-fees-and-limits .standout-card:hover .standout-card__stage::before {
  width: 100%;
  opacity: 0.8;
}

/* Fixed stage widths, so the renders sit on a common vertical line down the
   right edge of a row of cards instead of each starting wherever its own
   aspect ratio happens to put it. */
.page-fees-and-limits .fee-card__stage {
  width: 104px;
  height: 96px;
}

.page-fees-and-limits .standout-card__stage {
  width: 96px;
  height: 88px;
}

/* Premium keeps the artwork above its copy, so its stage stays left-aligned
   and needs no width of its own. */
.page-fees-and-limits .premium-card__stage {
  height: 128px;
  justify-content: flex-start;
  margin-bottom: 18px;
}

.page-fees-and-limits .premium-card__stage::before {
  left: 0;
  width: 124px;
  transform: none;
}

.page-fees-and-limits .premium-card:hover .premium-card__stage::before {
  width: 144px;
}

@media (prefers-reduced-motion: reduce) {
  .page-fees-and-limits .fee-card:hover .fee-card__art,
  .page-fees-and-limits .premium-card:hover .premium-card__art,
  .page-fees-and-limits .standout-card:hover .standout-card__art {
    transform: none;
  }
}

/* --- Fee cards ---------------------------------------------------------- */

.page-fees-and-limits .fee-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--space-md);
  align-items: stretch;
}

.page-fees-and-limits .fee-card {
  display: flex;
  flex-direction: column;
  padding: 34px 32px;
}

/* Title and rate to the left, render to the right, baselines settled by the
   render sitting on the bottom of its stage next to the rate figure. */
.page-fees-and-limits .fee-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

/* Fill the row rather than shrink to fit. Left to size itself, the block ran
   155px against one title and 228px against another, so the rate qualifier
   wrapped differently on each card in the row. */
.page-fees-and-limits .fee-card__headings {
  flex: 1 1 auto;
  min-width: 0;
}

.page-fees-and-limits .fee-card__title {
  margin: 0 0 6px;
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--leading-tight);
  color: var(--color-heading);
}

/* The number is the reason the page exists, so it is set at display size and
   given the brand colour rather than being one clause of a bulleted line. */
/* Stacked, not inline: beside the artwork the row is roughly 230px wide, and
   a 44px figure plus its qualifier on one line would wrap raggedly. */
.page-fees-and-limits .fee-card__rate {
  margin: 0;
}

.page-fees-and-limits .fee-card__figure {
  display: block;
  font-family: var(--font-heading);
  font-size: 44px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-primary);
}

.page-fees-and-limits .fee-card__qualifier {
  display: block;
  margin-top: 2px;
  font-size: var(--text-sm);
  line-height: var(--leading-tight);
  color: var(--color-muted);
}

.page-fees-and-limits .fee-card__desc {
  margin: 0 0 var(--space-md);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-default);
}

/* The worked example is supporting detail, so it sits in its own tray at the
   foot of the card instead of competing with the copy above it. `margin-top:
   auto` keeps those trays aligned across a row of uneven cards. */
.page-fees-and-limits .fee-card__example {
  margin: auto 0 0;
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
  font-size: var(--text-sm);
  line-height: var(--leading-tight);
  color: var(--color-default);
}

.page-fees-and-limits .fee-card__example-label {
  display: block;
  margin-bottom: 4px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-faint);
}

.page-fees-and-limits .fee-card__note {
  display: flex;
  gap: 8px;
  margin: 12px 0 0;
  font-size: var(--text-xs);
  line-height: var(--leading-tight);
  color: var(--color-muted);
}

.page-fees-and-limits .fee-card__note i {
  margin-top: 2px;
  color: var(--color-primary);
}

/* --- Premium membership -------------------------------------------------
   A tier rather than a charge, so it sits below the fee grid with its own
   amber-tinted surface and reads as an offer.
   ------------------------------------------------------------------------ */

.page-fees-and-limits .premium-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-md);
  padding: 38px 36px;
  border-color: var(--color-primary-line);
  background:
    radial-gradient(circle at 12% 0%, var(--color-primary-soft), transparent 55%),
    var(--gradient-surface);
}

.page-fees-and-limits .premium-card__title {
  margin: 0 0 10px;
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--color-heading);
}

.page-fees-and-limits .premium-card__desc {
  margin: 0;
  max-width: 46ch;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-default);
}

.page-fees-and-limits .premium-card__benefits {
  display: grid;
  align-content: center;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A check mark belongs on a benefit. It used to sit against every fee and
   worked example too, where it read as an endorsement of the charge. */
.page-fees-and-limits .premium-card__benefits li {
  position: relative;
  padding-left: 32px;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-default);
}

.page-fees-and-limits .premium-card__benefits li::before {
  content: "\f00c";
  font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 4px;
  font-size: 12px;
  color: var(--color-primary);
}

.page-fees-and-limits .premium-card__benefits strong {
  display: block;
  font-weight: 600;
  color: var(--color-heading);
}

/* --- Limits table ------------------------------------------------------- */

.page-fees-and-limits .limits-table-wrap {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--gradient-surface);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.28),
    0 12px 28px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.page-fees-and-limits .limits-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.page-fees-and-limits .limits-table thead th {
  padding: 18px 26px;
  border-bottom: 1px solid var(--color-border-strong);
  background: rgba(255, 255, 255, 0.03);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  white-space: nowrap;
}

.page-fees-and-limits .limits-table tbody th {
  padding: 16px 26px;
  font-size: var(--text-base);
  font-weight: 500;
  line-height: var(--leading-tight);
  color: var(--color-default);
}

.page-fees-and-limits .limits-table tbody td {
  padding: 16px 26px;
  font-size: var(--text-base);
  font-weight: 600;
  line-height: var(--leading-tight);
  color: var(--color-heading);
  white-space: nowrap;
}

.page-fees-and-limits .limits-table tbody tr:not(:last-child) th,
.page-fees-and-limits .limits-table tbody tr:not(:last-child) td {
  border-bottom: 1px solid var(--color-border);
}

/* Zebra striping does the work a border alone cannot across a wide row. */
.page-fees-and-limits .limits-table tbody tr:nth-child(even) th,
.page-fees-and-limits .limits-table tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.015);
}

.page-fees-and-limits .limits-table tbody tr {
  transition: background var(--transition-fast);
}

.page-fees-and-limits .limits-table tbody tr:hover th,
.page-fees-and-limits .limits-table tbody tr:hover td {
  background: rgba(255, 166, 8, 0.06);
}

/* --- Why we stand out --------------------------------------------------- */

.page-fees-and-limits .standout-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--space-md);
  align-items: stretch;
}

/* Only a heading and two lines of copy here, so the whole card splits into
   two columns with the render centred against the text. */
.page-fees-and-limits .standout-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 32px 30px;
}

.page-fees-and-limits .standout-card__body {
  flex: 1 1 auto;
  min-width: 0;
}

.page-fees-and-limits .standout-card__title {
  margin: 0 0 8px;
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--leading-tight);
  color: var(--color-heading);
}

.page-fees-and-limits .standout-card__text {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-default);
}

/* --- Narrow screens ----------------------------------------------------- */

@media (max-width: 991px) {
  .page-fees-and-limits .premium-card {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  /* The renders stay on the right at every width — only smaller. This starts
     at 991 rather than 767 because the grid drops to two-up well before the
     phone breakpoint, and a 336px card beside a full-size stage left the copy
     just 150px wide. */
  .page-fees-and-limits .fee-card__stage {
    width: 88px;
    height: 82px;
  }

  .page-fees-and-limits .standout-card__stage {
    width: 78px;
    height: 74px;
  }
}

/* Below this the three-column table no longer fits any phone, so each row
   becomes its own stacked block. The `data-label` attributes on the cells
   carry the column headings down with them. */
@media (max-width: 767px) {
  .page-fees-and-limits .fees-intro,
  .page-fees-and-limits .fees-block-header {
    margin-bottom: var(--space-lg);
  }

  .page-fees-and-limits .section-desc {
    font-size: var(--text-base);
  }

  .page-fees-and-limits .fee-card,
  .page-fees-and-limits .standout-card {
    padding: 28px 22px;
    border-radius: var(--radius-md);
  }

  .page-fees-and-limits .premium-card {
    padding: 30px 22px;
    border-radius: var(--radius-md);
  }

  .page-fees-and-limits .fee-card__figure {
    font-size: 38px;
  }

  .page-fees-and-limits .standout-card {
    padding: 26px 22px;
  }

  .page-fees-and-limits .limits-table-wrap {
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    overflow: visible;
  }

  .page-fees-and-limits .limits-table thead {
    /* Visually gone, still announced to screen readers via the scope/headers
       relationship — the visible labels come from data-label below. */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .page-fees-and-limits .limits-table,
  .page-fees-and-limits .limits-table tbody,
  .page-fees-and-limits .limits-table tr,
  .page-fees-and-limits .limits-table th,
  .page-fees-and-limits .limits-table td {
    display: block;
    width: auto;
  }

  .page-fees-and-limits .limits-table tbody tr {
    margin-bottom: var(--space-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--gradient-surface);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.24);
    overflow: hidden;
  }

  .page-fees-and-limits .limits-table tbody th {
    padding: 14px 18px 10px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-heading);
  }

  .page-fees-and-limits .limits-table tbody td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: 9px 18px;
    font-size: var(--text-sm);
    white-space: normal;
  }

  .page-fees-and-limits .limits-table tbody td::before {
    content: attr(data-label);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-faint);
  }

  .page-fees-and-limits .limits-table tbody tr td:last-child {
    padding-bottom: 14px;
  }

  /* The desktop striping and row borders would land on the wrong boxes now. */
  .page-fees-and-limits .limits-table tbody tr:not(:last-child) th,
  .page-fees-and-limits .limits-table tbody tr:not(:last-child) td,
  .page-fees-and-limits .limits-table tbody tr:nth-child(even) th,
  .page-fees-and-limits .limits-table tbody tr:nth-child(even) td {
    border-bottom: 0;
    background: none;
  }

  .page-fees-and-limits .limits-table tbody tr:hover th,
  .page-fees-and-limits .limits-table tbody tr:hover td {
    background: none;
  }
}