/* /upkeep.html - building upkeep brackets (upkeep.js runs the calculator and motion). Sits on rank-pages + site-fx. */
.uk-page {
  --uk-b1: #5fe39a;
  --uk-b2: #c7e35f;
  --uk-b3: #ffb347;
  --uk-b4: #ff5c48;
  --uk-card: linear-gradient(180deg, var(--rk-panel-2), var(--rk-panel));
}
.uk-page .b1 { --c: var(--uk-b1); }
.uk-page .b2 { --c: var(--uk-b2); }
.uk-page .b3 { --c: var(--uk-b3); }
.uk-page .b4 { --c: var(--uk-b4); }
.st-hidden-uk { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* hero: without the art the hero keeps its own gradient */
.uk-hero { background: radial-gradient(900px 380px at 75% 20%, rgba(230, 200, 74, 0.16), transparent 70%), linear-gradient(180deg, #14120b, #07080d); }
.uk-crest-steps rect { transform-box: fill-box; transform-origin: bottom; }
.uk-anim .uk-crest-steps rect { animation: uk-rise 1.1s ease-out both; }
.uk-anim .uk-crest-steps rect:nth-child(2) { animation-delay: 0.12s; }
.uk-anim .uk-crest-steps rect:nth-child(3) { animation-delay: 0.24s; }
.uk-anim .uk-crest-steps rect:nth-child(4) { animation-delay: 0.36s; }
@keyframes uk-rise { from { transform: scaleY(0.25); } to { transform: none; } }

.uk-body { padding-top: 2.2rem; padding-bottom: 3rem; }
.uk-body > * { min-width: 0; }

/* which servers */
.uk-servers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; margin: 0 0 2.6rem; }
.uk-server { display: flex; align-items: center; gap: 0.85rem; padding: 0.95rem 1.1rem; border-radius: 14px; background: var(--uk-card); border: 1px solid var(--line); min-width: 0; }
.uk-server.is-tiered { border-color: rgba(255, 179, 71, 0.5); background: linear-gradient(120deg, rgba(255, 179, 71, 0.14), rgba(255, 92, 72, 0.05) 60%, transparent), var(--uk-card); }
.uk-server-ico { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 12px; display: grid; place-items: center; background: rgba(95, 227, 154, 0.12); color: var(--uk-b1); }
.uk-server.is-tiered .uk-server-ico { background: rgba(255, 179, 71, 0.15); color: var(--uk-b3); }
.uk-server-ico svg, .uk-step-ico svg, .uk-why-ico svg, .uk-callout-ico svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.uk-server-text { display: flex; flex-direction: column; min-width: 0; }
.uk-server-text b { font-family: "Cinzel", serif; font-size: 1.15rem; color: var(--text); }
.uk-server-text small { color: var(--muted); font-size: 0.88rem; }

/* sections */
.uk-section { margin: 0 0 3rem; scroll-margin-top: 90px; }
.uk-kicker { margin: 0 0 0.3rem; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: var(--rk-accent); }
.uk-h2 { margin: 0 0 1rem; font-family: "Cinzel", serif; font-size: clamp(1.4rem, 2.6vw, 1.9rem); color: var(--text); }
.uk-h3 { margin: 2rem 0 0.4rem; font-family: "Cinzel", serif; font-size: 1.25rem; color: var(--text); }
.uk-lead { margin: 0 0 1.1rem; max-width: 760px; color: #cfd5e3; line-height: 1.6; }
.uk-lead b { color: var(--text); }
.uk-note { margin: 0.9rem 0 0; max-width: 760px; color: var(--muted); font-size: 0.9rem; line-height: 1.55; }
.uk-note a { color: var(--rk-accent-bright); }

/* steps */
.uk-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; counter-reset: uk; }
.uk-steps li { position: relative; padding: 1.2rem 1.2rem 1.1rem; border-radius: 14px; background: var(--uk-card); border: 1px solid var(--line); counter-increment: uk; min-width: 0; }
.uk-steps li::after { content: counter(uk); position: absolute; top: 0.8rem; right: 1rem; font-family: "Cinzel", serif; font-size: 2rem; font-weight: 800; color: rgba(230, 200, 74, 0.18); }
.uk-step-ico { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; margin: 0 0 0.7rem; border-radius: 12px; background: var(--rk-accent-dim); color: var(--rk-accent-bright); }
.uk-steps b { display: block; margin: 0 0 0.35rem; font-size: 1.05rem; color: var(--text); }
.uk-steps p { margin: 0; color: #c3c9d8; line-height: 1.55; font-size: 0.95rem; }
.uk-callout { display: flex; gap: 0.9rem; align-items: flex-start; margin: 1.1rem 0 0; padding: 1rem 1.2rem; border-radius: 14px; border: 1px solid var(--rk-accent-line); background: linear-gradient(120deg, rgba(230, 200, 74, 0.13), rgba(230, 200, 74, 0.03) 70%); }
.uk-callout-ico { flex: none; color: var(--rk-accent-bright); margin-top: 0.1rem; }
.uk-callout p { margin: 0; color: #d7dbe6; line-height: 1.55; }
.uk-callout b { color: var(--text); }

/* bracket illustrations (Web Visuals); a missing image leaves the caption card */
.uk-tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.9rem; margin: 0 0 1.4rem; }
.uk-tier { margin: 0; border-radius: 14px; overflow: hidden; background: #07080d; border: 1px solid var(--line); border-bottom: 3px solid var(--c); min-width: 0; }
.uk-tier img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.uk-tier figcaption { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.6rem 0.8rem 0.7rem; }
.uk-tier figcaption b { font-family: "Cinzel", serif; color: var(--c); }
.uk-tier figcaption span { color: #c3c9d8; font-size: 0.9rem; }

/* bracket ladders */
.uk-ladders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.uk-ladder { padding: 1.1rem 1.2rem; border-radius: 14px; background: var(--uk-card); border: 1px solid var(--line); min-width: 0; }
.uk-ladder.is-tiered { border-color: rgba(255, 179, 71, 0.4); }
.uk-ladder h3 { margin: 0 0 0.8rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.6rem; font-family: "Cinzel", serif; font-size: 1.1rem; color: var(--text); }
.uk-ladder h3 small { font-family: "Inter", sans-serif; font-size: 0.82rem; font-weight: 500; color: var(--muted); }
.uk-dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--uk-b1); align-self: center; }
.uk-ladder.is-tiered .uk-dot { background: var(--uk-b3); }
.uk-ladder-table { width: 100%; border-collapse: collapse; }
.uk-ladder-table td:last-child { width: 100%; }
.uk-ladder-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.uk-ladder-table th, .uk-ladder-table td { padding: 0.45rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); vertical-align: middle; }
.uk-ladder-table tr:last-child th, .uk-ladder-table tr:last-child td { border-bottom: 0; }
.uk-ladder-table th { min-width: 6.4rem; white-space: nowrap; padding-right: 0.8rem; text-align: left; font-weight: 600; color: #d7dbe6; font-size: 0.92rem; }
.uk-ladder-table td.num { min-width: 4.2rem; white-space: nowrap; text-align: right; padding-right: 0.8rem; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--c, var(--text)); }
.uk-ladder-table tr:nth-child(1) td.num { color: var(--uk-b1); }
.uk-ladder-table tr:nth-child(2) td.num { color: var(--uk-b2); }
.uk-ladder-table tr:nth-child(3) td.num { color: var(--uk-b3); }
.uk-ladder-table tr:nth-child(4) td.num { color: var(--uk-b4); }
.uk-rung { display: block; height: 12px; width: var(--w); min-width: 4px; border-radius: 99px; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 70%, transparent), var(--c)); box-shadow: 0 0 14px color-mix(in srgb, var(--c) 35%, transparent); }
.uk-anim .uk-rung { width: 4px; transition: width 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }
.uk-anim .uk-rung.is-filled { width: var(--w); }

/* calculator */
.uk-calc { padding: 1.3rem 1.4rem; border-radius: 16px; border: 1px solid var(--rk-accent-line); background: radial-gradient(600px 220px at 10% 0%, rgba(230, 200, 74, 0.1), transparent 70%), var(--uk-card); }
.uk-calc-label { display: block; margin: 0 0 0.6rem; font-weight: 600; color: #d7dbe6; }
.uk-calc-label b { color: var(--rk-accent-bright); font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.uk-calc-row { display: flex; align-items: center; gap: 1rem; }
.uk-range { flex: 1; min-width: 0; height: 32px; accent-color: var(--rk-accent); cursor: pointer; }
.uk-range:focus-visible { outline: 2px solid var(--rk-accent-bright); outline-offset: 4px; border-radius: 6px; }
.uk-num input { width: 6.5rem; min-height: 44px; padding: 0.4rem 0.6rem; font: 600 1rem "Inter", sans-serif; color: var(--text); background: #0e111a; border: 1px solid var(--line); border-radius: 10px; text-align: right; font-variant-numeric: tabular-nums; }
.uk-num input:focus { outline: none; border-color: var(--rk-accent); box-shadow: 0 0 0 3px var(--rk-accent-dim); }
.uk-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.8rem 0 0; color: var(--muted); font-size: 0.9rem; }
.uk-chip { min-height: 36px; padding: 0 0.85rem; border-radius: 99px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); color: #d7dbe6; font: 600 0.88rem "Inter", sans-serif; cursor: pointer; }
.uk-chip:hover, .uk-chip:focus-visible { border-color: var(--rk-accent-line); color: var(--rk-accent-bright); outline: none; }
.uk-calc-out { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; margin: 1.2rem 0 0; }
.uk-result { padding: 0.9rem 1rem; border-radius: 12px; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--line); min-width: 0; }
.uk-result.is-tiered { border-color: rgba(255, 179, 71, 0.35); }
.uk-result-label { display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.uk-result-value { display: block; margin: 0.25rem 0 0.6rem; font-family: "Cinzel", serif; font-size: 2rem; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; }
.uk-result.is-default .uk-result-value { color: var(--uk-b1); }
.uk-result.is-tiered .uk-result-value { color: var(--uk-b3); }
.uk-result.is-diff small { display: block; margin-top: 0.35rem; color: var(--muted); font-size: 0.88rem; }
.uk-seg { display: flex; height: 12px; border-radius: 99px; overflow: hidden; background: rgba(255, 255, 255, 0.06); }
.uk-seg i { display: block; flex: 0 0 auto; flex-basis: 0; background: var(--c); transition: flex-grow 0.25s ease; }
.uk-seg i[hidden] { display: none; }
.uk-seg i + i { box-shadow: inset 2px 0 0 rgba(7, 8, 13, 0.7); }
.uk-diff { font-weight: 700; font-variant-numeric: tabular-nums; }
.uk-result .uk-diff { display: block; margin: 0.25rem 0 0; font-family: "Cinzel", serif; font-size: 1.6rem; line-height: 1.15; }
.uk-diff.is-up { color: #ff8b78; }
.uk-diff.is-down { color: var(--uk-b1); }
.uk-diff.is-same { color: #d7dbe6; }
.uk-calc-key { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; margin: 0.9rem 0 0; color: var(--muted); font-size: 0.85rem; }
.uk-calc-key span { display: inline-flex; align-items: center; gap: 0.35rem; }
.uk-calc-key i { width: 0.8rem; height: 0.8rem; border-radius: 3px; background: var(--c); }

/* worked example */
.uk-work { max-width: 640px; margin: 0 0 1rem; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--uk-card); }
.uk-work-row { display: grid; grid-template-columns: minmax(0, 8rem) minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 0.75rem 1.1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.uk-work-row:last-child { border-bottom: 0; }
.uk-work-b { font-weight: 700; color: var(--c, var(--text)); }
.uk-work-x { color: #c3c9d8; }
.uk-work-eq { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text); }
.uk-work-row.is-total { background: rgba(230, 200, 74, 0.08); border-top: 2px solid var(--rk-accent-line); }
.uk-work-row.is-total .uk-work-b { font-family: "Cinzel", serif; color: var(--rk-accent-bright); }
.uk-work-row.is-total .uk-work-eq { font-family: "Cinzel", serif; font-size: 1.5rem; color: var(--uk-b3); }

/* tables (analytics rules: two-line headers, numbers right, no packed cells) */
.uk-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--uk-card); }
.uk-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.uk-table th, .uk-table td { padding: 0.7rem 0.9rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05); text-align: left; white-space: nowrap; }
.uk-table tbody tr:last-child th, .uk-table tbody tr:last-child td { border-bottom: 0; }
.uk-table thead th { vertical-align: bottom; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); background: rgba(255, 255, 255, 0.03); }
.uk-table thead th small { display: block; margin-top: 0.15rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em; text-transform: none; color: #77809a; }
.uk-table tbody th { font-weight: 700; color: var(--text); }
.uk-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* why */
.uk-why { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.uk-why-card { padding: 1.1rem 1.15rem; border-radius: 14px; background: var(--uk-card); border: 1px solid var(--line); min-width: 0; }
.uk-why-ico { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; margin: 0 0 0.7rem; border-radius: 12px; background: rgba(255, 92, 72, 0.12); color: #ff8b78; }
.uk-why-card b { display: block; margin: 0 0 0.35rem; color: var(--text); }
.uk-why-card p { margin: 0; color: #c3c9d8; line-height: 1.55; font-size: 0.95rem; }

@media (max-width: 1000px) {
  .uk-why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uk-calc-out { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uk-result.is-diff { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .uk-servers, .uk-steps, .uk-ladders { grid-template-columns: minmax(0, 1fr); }
  .uk-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .uk-why, .uk-calc-out { grid-template-columns: minmax(0, 1fr); }
  .uk-calc { padding: 1.1rem; }
  .uk-calc-row { flex-wrap: wrap; }
  .uk-range { flex-basis: 100%; }
  .uk-work-row { grid-template-columns: minmax(0, 1fr) auto; gap: 0.2rem 0.8rem; }
  .uk-work-x { grid-column: 1; grid-row: 2; font-size: 0.88rem; }
  .uk-work-eq { grid-row: 1 / span 2; grid-column: 2; }
  /* the two tables become one card per base */
  .uk-table-wrap { overflow: visible; border: 0; background: none; }
  .uk-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .uk-table, .uk-table tbody, .uk-table tr, .uk-table th, .uk-table td { display: block; width: 100%; }
  .uk-table tr { margin: 0 0 0.7rem; padding: 0.7rem 0.9rem; border: 1px solid var(--line); border-radius: 12px; background: var(--uk-card); }
  .uk-table tbody th { padding: 0 0 0.35rem; border: 0; font-family: "Cinzel", serif; }
  .uk-table td { display: flex; justify-content: space-between; gap: 1rem; padding: 0.25rem 0; border: 0; white-space: normal; }
  .uk-table td::before { content: attr(data-label); color: var(--muted); font-size: 0.88rem; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .uk-anim .uk-rung { transition: none; width: var(--w); }
  .uk-seg i { transition: none; }
  .uk-anim .uk-crest-steps rect { animation: none; }
}