/* Rules page: account-size switch, the three rules, the max loss chart, per-phase number tiles. */
.rz-head { padding-bottom: 24px; }
.rz-head .lead { font-size: 19px; }
.rz-sec { padding: 72px 0; }
.rz-kicker { color: #8fe3b4; font: 700 12px/1 var(--body), sans-serif; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 14px; }
.rz-h2 { font: 600 clamp(30px, 3.6vw, 46px)/1.08 var(--head); letter-spacing: -0.035em; color: #fff; margin: 0 0 28px; }
.rz-lead { max-width: 760px; color: #a6bdb0; font-size: 18px; line-height: 1.6; margin: -12px 0 28px; }
.rz-lead b { color: #fff; }
[data-k] { font-style: normal; }

/* Size switch: sticks under the nav so the numbers always have a label. */
.rz-size-bar { padding: 4px 0 8px; }
.rz-numhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
.rz-numhead .rz-h2 { margin-bottom: 0; }
.rz-size-sm { margin: 0; }
.rz-size-sm button { min-width: 96px; padding: 9px 14px; font-size: 16px; }
.rz-size { display: flex; justify-content: center; gap: 8px; margin: 0 auto; width: fit-content; padding: 6px; border-radius: 16px; background: #102219; border: 1px solid rgba(143, 227, 180,.28); box-shadow: 0 18px 40px -18px rgba(0,0,0,.9); }
.rz-size button { min-width: 128px; padding: 12px 22px; border: 0; border-radius: 11px; background: none; color: #a6bdb0; font: 600 20px/1 var(--head); letter-spacing: -0.02em; cursor: pointer; transition: background .2s, color .2s; }
.rz-size button small { display: block; margin-top: 6px; font: 600 11px/1 var(--body), sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #87a294; }
.rz-size button[aria-selected="true"] { background: #8ef0d0; color: #0d1b15; }
.rz-size button[aria-selected="true"] small { color: rgba(4,32,26,.68); }
.rz-size button:focus-visible { outline: 2px solid #8fe3b4; outline-offset: 2px; }

/* The three rules. */
.rz-big3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.rz-card { --c: #8fe3b4; position: relative; overflow: hidden; padding: 30px 28px 28px; border-radius: 22px; background: radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--c) 14%, transparent), transparent 60%), linear-gradient(180deg, #17301f, #0b1a14); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); }
.rz-card.pass { --c: #3ddc97; }
.rz-card.fail { --c: #ff5a5f; }
.rz-badge { display: inline-flex; align-items: center; gap: 10px; color: var(--c); font: 700 14px/1 var(--body), sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.rz-badge span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--c); color: #0a1a14; font-size: 15px; letter-spacing: 0; }
.rz-hero { margin-top: 26px; color: #a6bdb0; font: 500 22px/1.15 var(--head); letter-spacing: -0.02em; }
.rz-hero b { display: block; margin-top: 6px; color: #fff; font: 600 clamp(40px, 4.2vw, 58px)/1 var(--head); letter-spacing: -0.04em; }
.rz-card.pass .rz-hero b { color: #7cf0c4; }
.rz-card.fail .rz-hero b { color: #ff8a8d; }
.rz-card.paid .rz-hero b { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rz-sub { margin-top: 14px; color: #a6bdb0; font-size: 16px; line-height: 1.55; }
.rz-checks, .rz-chips { list-style: none; margin: 22px 0 0; padding: 20px 0 0; border-top: 1px solid rgba(255,255,255,.08); display: grid; gap: 12px; }
.rz-checks li { position: relative; padding-left: 30px; color: #cfe0d6; font-size: 16px; }
.rz-checks li::before { content: '✓'; position: absolute; left: 0; top: -1px; display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--c); font: 700 12px/1 sans-serif; }
.rz-checks b { color: #fff; }
.rz-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rz-chips li { padding: 8px 12px; border-radius: 999px; background: rgba(47,211,107,.1); color: #7cf0c4; font-size: 14px; font-weight: 600; }

/* Max loss chart. */
.rz-chart-card { padding: 24px 24px 16px; border-radius: 20px; background: #0e211a; border: 1px solid rgba(255,255,255,.07); }
.rz-chart { display: block; width: 100%; height: auto; font-family: var(--body), sans-serif; }
.rz-legend { display: flex; gap: 22px; justify-content: center; margin-top: 6px; color: #a6bdb0; font-size: 14px; }
.rz-legend span::before { content: ''; display: inline-block; width: 18px; height: 3px; margin-right: 8px; vertical-align: middle; border-radius: 2px; }
.rz-legend .g::before { background: #3ddc97; }
.rz-legend .r::before { background: repeating-linear-gradient(90deg, #ff5a5f 0 6px, transparent 6px 10px); }
.rz-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 16px; }
.rz-st { padding: 18px 20px; border-radius: 16px; background: #102219; border: 1px solid rgba(255,255,255,.07); }
.rz-st .when { color: #87a294; font: 600 12px/1 var(--body), sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.rz-st .bal { margin-top: 10px; font: 600 26px/1 var(--head); color: #fff; letter-spacing: -0.02em; }
.rz-st .bal.up { color: #7cf0c4; }
.rz-st .bal.dn { color: #ff8a8d; }
.rz-st .ln { display: inline-block; margin-top: 10px; padding: 5px 10px; border-radius: 8px; background: rgba(255,90,95,.12); color: #ffb0b2; font-size: 14px; }
.rz-st .ln b { color: #fff; }
.rz-st p { margin-top: 10px; color: #a6bdb0; font-size: 14.5px; line-height: 1.5; }
.rz-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 14px; }
.rz-facts div { padding: 16px 20px; border-radius: 14px; background: rgba(143, 227, 180,.05); border: 1px solid rgba(143, 227, 180,.2); color: #a6bdb0; font-size: 15px; line-height: 1.5; }
.rz-facts b { display: block; color: #8fe3b4; margin-bottom: 3px; }

/* Per-phase number tiles. */
.rz-phases { display: grid; gap: 22px; }
.rz-phase { --c: #87a294; display: grid; grid-template-columns: 260px 1fr; gap: 28px; padding: 28px; border-radius: 22px; background: #0e211a; border: 1px solid rgba(255,255,255,.08); }
.rz-phase.gold { --c: #8fe3b4; border-color: rgba(143, 227, 180,.3); }
.rz-phase.instant { --c: #6fd79b; border-color: rgba(124,184,255,.28); }
.rz-phase header h3 { margin: 10px 0 8px; color: #fff; font: 600 30px/1.05 var(--head); letter-spacing: -0.03em; }
.rz-phase header p { color: #a6bdb0; font-size: 16px; line-height: 1.5; }
.rz-step-no { display: inline-block; padding: 6px 11px; border-radius: 999px; background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); font: 700 12px/1 var(--body), sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.rz-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0; }
.rz-tiles > div { padding: 16px 18px; border-radius: 14px; background: #17301f; border: 1px solid rgba(255,255,255,.06); }
.rz-tiles dt { color: #87a294; font: 600 11.5px/1.2 var(--body), sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.rz-tiles dd { margin: 10px 0 0; color: #fff; font: 600 30px/1 var(--head); letter-spacing: -0.03em; }
.rz-tiles dd small { margin-left: 4px; color: #87a294; font-size: 14px; font-weight: 500; letter-spacing: 0; }
.rz-tiles dd.txt { font-size: 20px; line-height: 1.2; }
.rz-tiles p { margin-top: 8px; color: #87a294; font-size: 13.5px; line-height: 1.4; }
.rz-tiles .bad dd { color: #ff8a8d; }
.rz-tiles .good dd, .rz-tiles .ok dd { color: #7cf0c4; }

/* Every trade. */
.rz-trade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.rz-trade div { padding: 22px; border-radius: 18px; background: #0e211a; border: 1px solid rgba(255,255,255,.07); }
.rz-trade b { display: block; color: #fff; font: 600 34px/1 var(--head); letter-spacing: -0.03em; }
.rz-trade span { display: block; margin-top: 10px; color: #a6bdb0; font-size: 15px; line-height: 1.45; }

/* All sizes table (collapsed) and conduct. */
.rz-all { border: 1px solid rgba(255,255,255,.1); border-radius: 18px; background: #091511; }
.rz-all > summary { cursor: pointer; padding: 20px 24px; color: #fff; font: 600 18px/1.2 var(--head); list-style: none; }
.rz-all > summary::after { content: '+'; float: right; color: #8fe3b4; font-size: 22px; }
.rz-all[open] > summary::after { content: '−'; }
.rz-table-wrap { overflow-x: auto; padding: 0 12px 12px; }
.rz-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.rz-table th, .rz-table td { padding: 13px 16px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.06); color: #eaf6ee; font-size: 15px; }
.rz-table th { color: #fff; font: 600 17px/1 var(--head); }
.rz-table td:first-child { color: #a6bdb0; }
.rz-table td:not(:first-child) { font-family: var(--mono); }
.rz-table tr.grp td { padding-top: 20px; color: #8fe3b4; font: 700 12px/1 var(--body), sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.rz-conduct { padding: 32px; border-radius: 22px; background: linear-gradient(180deg, rgba(255,90,95,.07), transparent 70%), #0e211a; border: 1px solid rgba(255,90,95,.3); }
.rz-conduct h2 { color: #fff; font: 600 30px/1.1 var(--head); letter-spacing: -0.03em; }
.rz-conduct p { margin-top: 10px; color: #a6bdb0; font-size: 16px; }
.rz-conduct ul { list-style: none; margin: 20px 0 6px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.rz-conduct li { position: relative; padding-left: 30px; color: #eaf6ee; font-size: 15.5px; line-height: 1.45; }
.rz-conduct li::before { content: '✕'; position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; background: rgba(255,90,95,.16); color: #ff8a8d; font: 700 12px/1 sans-serif; }

@media (max-width: 1100px) {
  .rz-big3 { grid-template-columns: 1fr; }
  .rz-phase { grid-template-columns: 1fr; gap: 18px; }
  .rz-tiles, .rz-trade { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .rz-sec { padding: 52px 0; }
  .rz-steps { grid-template-columns: 1fr 1fr; }
  .rz-facts, .rz-conduct ul { grid-template-columns: 1fr; }
  .rz-size button { min-width: 0; flex: 1; padding: 11px 10px; font-size: 17px; }
  .rz-size { width: 100%; }
  .rz-phase, .rz-conduct { padding: 20px; }
  .rz-tiles dd { font-size: 26px; }
}
@media (max-width: 420px) {
  .rz-steps { grid-template-columns: 1fr; }
}

/* Ethena skin */
.card, .panel, .tile, .box { border-radius: 22px; }
h1, h2, h3 { font-weight: 400; letter-spacing: -0.03em; }