:root {
  --black: #070707;
  --white: #f2f2f0;
  --soft: #151515;
  --gray: #a3a3a0;
  --line: #343434;
  --max: 1160px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--black); color: var(--white); font-family: Georgia, 'Times New Roman', serif; }
a { color: inherit; text-decoration: none; }
.container { margin: 0 auto; max-width: var(--max); width: calc(100% - 64px); }
.site-header { background: var(--black); border-bottom: 1px solid var(--line); }
.nav-wrap { align-items: center; display: flex; justify-content: space-between; min-height: 78px; }
.brand { align-items: center; display: flex; font: bold 12px Arial, sans-serif; gap: 10px; letter-spacing: .12em; }
.brand-mark { align-items: center; background: var(--black); color: var(--white); display: inline-flex; font-size: 10px; height: 30px; justify-content: center; letter-spacing: 0; width: 30px; }
.nav-links { display: flex; gap: 28px; font: 11px Arial, sans-serif; text-transform: uppercase; }
.nav-links a { border-bottom: 1px solid transparent; padding: 7px 0; }
.nav-links a:hover, .nav-links a.active { border-color: var(--white); }
.nav-button, .button { border: 1px solid var(--white); display: inline-block; font: bold 11px Arial, sans-serif; letter-spacing: .07em; padding: 13px 17px; text-transform: uppercase; }
.nav-button:hover, .button-dark { background: var(--white); color: var(--black); }
.button-dark:hover { background: transparent; color: var(--white); }
.kicker { font: bold 10px Arial, sans-serif; letter-spacing: .16em; margin: 0; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(52px, 8vw, 102px); font-weight: 400; letter-spacing: -.06em; line-height: .89; margin: 23px 0 29px; max-width: 730px; }
h2 { font-size: clamp(40px, 5.5vw, 70px); font-weight: 400; letter-spacing: -.055em; line-height: .92; margin: 14px 0 0; }
h3 { font-size: 35px; font-weight: 400; letter-spacing: -.04em; }
.lede { color: var(--gray); font: 15px/1.75 Arial, sans-serif; max-width: 500px; }
.home-hero { display: block; padding-bottom: 120px; padding-top: 120px; }
.home-hero .hero-copy { max-width: 780px; }
.button-row { align-items: center; display: flex; gap: 24px; margin-top: 34px; }
.text-link { border-bottom: 1px solid var(--black); font: bold 11px Arial, sans-serif; letter-spacing: .04em; padding-bottom: 4px; text-transform: uppercase; }
.text-link span { font-size: 18px; font-weight: normal; margin-left: 5px; }
.hero-frame { background: var(--black); color: var(--white); min-height: 405px; padding: 25px; position: relative; }
.hero-frame:after { border: 1px solid #444; content: ''; inset: 16px; position: absolute; }
.frame-label { font: 10px Arial, sans-serif; letter-spacing: .15em; position: relative; z-index: 1; }
.frame-title { bottom: 85px; font-size: 62px; letter-spacing: -.07em; line-height: .82; position: absolute; z-index: 1; }
.frame-title strong { font-weight: 400; margin-left: 45px; }
.frame-bottom { bottom: 25px; display: flex; font: 9px Arial, sans-serif; justify-content: space-between; left: 25px; letter-spacing: .12em; position: absolute; right: 25px; z-index: 1; }
.intro-band { background: var(--soft); border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); padding: 82px 0; }
.split-heading { display: grid; gap: 25px 7%; grid-template-columns: .42fr 1fr 1fr; }
.split-heading h2 { grid-column: 2; }
.split-heading > p:last-child { color: var(--gray); font: 13px/1.7 Arial, sans-serif; grid-column: 3; margin: 0; }
.service-preview { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); padding-bottom: 110px; padding-top: 110px; }
.preview-card { background: #101010; border: 1px solid var(--line); min-height: 350px; padding: 28px; position: relative; }
.preview-card:hover { background: var(--white); color: var(--black); }
.card-number { font: 11px Arial, sans-serif; }
.preview-card h3 { margin: 102px 0 13px; }
.preview-card p { color: var(--gray); font: 13px/1.7 Arial, sans-serif; max-width: 300px; }
.preview-card:hover p { color: var(--gray); }
.card-arrow { bottom: 26px; font: 27px Georgia, serif; position: absolute; right: 28px; }
.page-hero { border-bottom: 1px solid var(--line); padding: 105px 0 85px; }
.page-hero h1 { max-width: 780px; }
.page-hero .lede { margin-bottom: 0; }
.content-section { padding: 90px 0; }
.service-list { border-top: 1px solid var(--line); }
.service-row { display: grid; gap: 30px; grid-template-columns: 70px 1fr 1fr 120px; padding: 30px 0; border-bottom: 1px solid var(--line); }
.service-row .number { font: 11px Arial, sans-serif; }
.service-row h2 { font-size: 37px; margin: 0; }
.service-row p, .service-row ul { color: var(--gray); font: 13px/1.7 Arial, sans-serif; margin: 0; }
.service-row ul { list-style: none; padding: 0; }
.service-row li:before { content: '+ '; color: var(--white); }
.row-price { font-size: 22px; text-align: right; }
.row-price small { color: var(--gray); display: block; font: 10px Arial, sans-serif; margin-top: 5px; }
.dark-band { background: var(--black); color: var(--white); }
.dark-band .kicker { color: #c6c6c6; }
.dark-band .lede, .dark-band .muted { color: #bdbdbd; }
.payment-message { background: #242424; border-left: 2px solid var(--white); color: #d0d0d0; font: 12px/1.6 Arial, sans-serif; margin-top: 30px; padding: 14px; }
.staff-state { background: #101010; border: 1px solid var(--line); max-width: 620px; padding: 36px; }
.staff-state h2 { font-size: 42px; margin-bottom: 18px; }
.staff-error { border-left: 2px solid var(--white); color: #d0d0d0; font: 12px/1.6 Arial, sans-serif; margin-top: 24px; padding-left: 12px; }
.staff-login-form { display: grid; gap: 9px; margin-top: 26px; max-width: 390px; }
.staff-login-form label { color: #c6c6c4; font: bold 10px Arial, sans-serif; letter-spacing: .08em; margin-top: 8px; text-transform: uppercase; }
.staff-login-form input { background: #070707; border: 1px solid #555; color: var(--white); font: 14px Arial, sans-serif; padding: 13px; }
.staff-login-form button { cursor: pointer; margin-top: 12px; }
.staff-dashboard { display: grid; gap: 28px; grid-template-columns: 230px minmax(0, 1fr); }
.staff-sidebar { align-self: start; background: #101010; border: 1px solid var(--line); min-height: 590px; padding: 22px 14px; position: sticky; top: 24px; }
.staff-sidebar > .kicker { padding: 0 10px; }
.dashboard-nav { display: grid; gap: 4px; margin-top: 22px; }
.dashboard-nav button { background: transparent; border: 0; color: var(--gray); cursor: pointer; font: 12px Arial, sans-serif; padding: 12px 10px; text-align: left; }
.dashboard-nav button:hover, .dashboard-nav button.active { background: #252525; color: var(--white); }
.sidebar-logout { margin-top: 32px; width: 100%; }
.dashboard-main { min-width: 0; }
.dashboard-section { background: #101010; border: 1px solid var(--line); min-height: 520px; padding: 30px; }
.dashboard-section > h2 { font-size: 42px; margin-bottom: 20px; }
.dashboard-welcome, .section-note { color: var(--gray); font: 13px/1.7 Arial, sans-serif; }
.dashboard-form { display: grid; gap: 10px; grid-template-columns: 1fr 1fr auto; margin: 24px 0; }
.dashboard-form input, .dashboard-form textarea, .dashboard-form select, .user-row input { background: #070707; border: 1px solid #555; color: var(--white); font: 12px Arial, sans-serif; min-width: 0; padding: 12px; }
.dashboard-form textarea { min-height: 100px; resize: vertical; }
.dashboard-form button { cursor: pointer; }
.dashboard-form-stacked { grid-template-columns: 1fr; max-width: 720px; }
.invoice-form-row { display: grid; gap: 10px; grid-template-columns: 1fr 100px 130px; }
.dashboard-metrics { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); margin-top: 25px; }
.dashboard-metric, .dashboard-record { background: #080808; border: 1px solid var(--line); padding: 18px; }
.dashboard-metric strong { display: block; font: 28px Arial, sans-serif; margin-top: 12px; }
.dashboard-metric span, .dashboard-record-meta { color: var(--gray); font: 11px/1.6 Arial, sans-serif; }
.dashboard-recent, .dashboard-record-list { display: grid; gap: 12px; margin-top: 24px; }
.dashboard-record h3 { margin-bottom: 8px; }
.dashboard-record p { color: #c9c9c7; font: 12px/1.7 Arial, sans-serif; white-space: pre-wrap; }
.dashboard-record-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.dashboard-record-actions button, .dashboard-record-actions select { cursor: pointer; }
.dashboard-record-actions select { background: #070707; border: 1px solid #555; color: var(--white); padding: 9px; }
.dashboard-record-actions .button { padding: 9px 12px; }
.record-notes { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 12px; }
.record-notes p { font-size: 11px; margin: 7px 0; }
.record-link { color: var(--white); font: 11px Arial, sans-serif; }
.user-create-form { display: grid; gap: 10px; grid-template-columns: 1fr 1fr auto; margin: 24px 0; }
.user-create-form input { background: #070707; border: 1px solid #555; color: var(--white); font: 12px Arial, sans-serif; min-width: 0; padding: 12px; }
.user-create-form button, .user-row button { cursor: pointer; }
.user-list { border-top: 1px solid var(--line); margin-top: 22px; }
.user-row { border-bottom: 1px solid var(--line); display: grid; gap: 10px; grid-template-columns: minmax(120px, 1fr) minmax(150px, 1fr) auto auto; margin: 0; padding: 16px 0; }
.user-row .button { padding: 10px 12px; }
.user-permissions { border: 1px solid var(--line); grid-column: 1 / -1; padding: 12px; }
.user-permissions summary { color: var(--gray); cursor: pointer; font: 11px Arial, sans-serif; }
.permission-list { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 13px; }
.permission-list label { align-items: center; color: var(--gray); display: flex; font: 11px Arial, sans-serif; gap: 8px; }
.permission-list input { accent-color: var(--white); min-width: 0; padding: 0; }
.user-password-note { color: var(--gray); font: 10px Arial, sans-serif; grid-column: 1 / -1; }
.team-panel { border-top: 1px solid var(--line); margin-top: 36px; padding-top: 24px; }
.team-panel h3 { font-size: 28px; margin: 10px 0 18px; }
.team-list { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.team-member { background: #080808; border: 1px solid var(--line); display: grid; gap: 7px; padding: 13px; }
.team-member strong { font: 12px Arial, sans-serif; }
.team-member > span { color: var(--gray); font: 11px/1.5 Arial, sans-serif; }
.team-executive { color: var(--gray); font: 9px Arial, sans-serif; letter-spacing: .12em; margin-left: 8px; }
.role-check-group { border: 1px solid var(--line); grid-column: 1 / -1; margin: 0; padding: 12px; }
.role-check-group legend { color: var(--gray); font: bold 10px Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.role-check-list { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.role-check-list label { align-items: center; color: var(--gray); display: flex; font: 11px Arial, sans-serif; gap: 7px; }
.role-check-list input { accent-color: var(--white); }
.role-management { border-top: 1px solid var(--line); margin-top: 28px; padding-top: 24px; }
.role-management h3 { font-size: 28px; margin: 10px 0; }
.role-list { border-top: 1px solid var(--line); }
.role-row { align-items: center; border-bottom: 1px solid var(--line); display: flex; font: 12px Arial, sans-serif; justify-content: space-between; padding: 12px 0; }
.role-row button { cursor: pointer; padding: 8px 10px; }
.document-rank-field { align-items: center; color: var(--gray); display: flex; flex-wrap: wrap; font: 11px Arial, sans-serif; gap: 10px; }
.document-rank-select { background: #070707; border: 1px solid #555; color: var(--white); font: 12px Arial, sans-serif; min-width: 180px; padding: 10px; }
.staff-toolbar { align-items: end; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding-bottom: 24px; }
.staff-toolbar h2 { font-size: 48px; }
.document-list { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); margin-top: 24px; }
.document-card { background: #101010; border: 1px solid var(--line); padding: 28px; }
.document-card h3 { margin: 35px 0 12px; }
.document-card > p:not(.kicker) { color: var(--gray); font: 13px/1.7 Arial, sans-serif; }
.document-card summary { border-top: 1px solid var(--line); cursor: pointer; font: bold 11px Arial, sans-serif; letter-spacing: .05em; margin-top: 24px; padding-top: 15px; text-transform: uppercase; }
.document-body { color: #c9c9c7; font: 13px/1.8 Arial, sans-serif; margin-top: 18px; }
.markdown-help { color: var(--gray); font: 11px/1.7 Arial, sans-serif; margin: 0; }
.markdown-help code, .markdown-content code { background: #202020; color: #e5e5e2; font: 11px/1.6 monospace; padding: 2px 5px; }
.markdown-preview-wrap { background: #080808; border: 1px solid var(--line); padding: 16px; }
.markdown-preview-wrap > .kicker { margin-bottom: 12px; }
.markdown-content { color: #d1d1cf; font: 13px/1.8 Arial, sans-serif; overflow-wrap: anywhere; }
.markdown-content > :first-child { margin-top: 0; }
.markdown-content > :last-child { margin-bottom: 0; }
.markdown-content h1, .markdown-content h2, .markdown-content h3 { color: var(--white); font-family: Georgia, 'Times New Roman', serif; font-weight: 400; letter-spacing: -.035em; line-height: 1.15; margin: 24px 0 10px; max-width: none; }
.markdown-content h1 { font-size: 32px; }
.markdown-content h2 { font-size: 25px; }
.markdown-content h3 { font-size: 19px; }
.markdown-content p, .markdown-content ul, .markdown-content ol, .markdown-content blockquote, .markdown-content pre { margin: 0 0 14px; }
.markdown-content ul, .markdown-content ol { padding-left: 24px; }
.markdown-content blockquote { border-left: 2px solid #777; color: #aaa; padding-left: 14px; }
.markdown-content pre { background: #080808; border: 1px solid var(--line); overflow: auto; padding: 14px; white-space: pre-wrap; }
.markdown-content pre code { background: none; padding: 0; }
.markdown-content a { border-bottom: 1px solid #777; }
.markdown-spoiler { background: #aaa; border-radius: 2px; color: transparent; cursor: pointer; }
.markdown-spoiler:hover, .markdown-spoiler:focus { color: #080808; }
.community-document-list, .community-document-admin-list { display: grid; gap: 18px; }
.community-document { background: #101010; border: 1px solid var(--line); padding: 30px; }
.community-document h2 { font-size: 38px; margin: 12px 0 22px; }
.community-document-updated { border-top: 1px solid var(--line); color: var(--gray); font: 10px Arial, sans-serif; margin: 24px 0 0; padding-top: 14px; }
.community-document-admin-card { background: #080808; border: 1px solid var(--line); padding: 20px; }
.community-document-admin-heading { align-items: center; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; margin-bottom: 20px; padding-bottom: 16px; }
.community-document-admin-heading h3 { font-size: 25px; margin: 8px 0 0; }
.community-document-admin-heading .dashboard-record-actions { margin: 0; }
.community-document-edit-form { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 20px; }
.transcript-panel { border-top: 1px solid var(--line); margin-top: 70px; padding-top: 30px; }
.transcript-count { color: var(--gray); font: 11px Arial, sans-serif; }
.transcript-list { display: grid; gap: 16px; margin-top: 24px; }
.transcript-card { background: #101010; border: 1px solid var(--line); padding: 24px; }
.transcript-card h3 { margin: 18px 0 8px; }
.transcript-card p:not(.kicker) { color: var(--gray); font: 12px/1.6 Arial, sans-serif; }
.transcript-card summary { border-top: 1px solid var(--line); cursor: pointer; font: bold 11px Arial, sans-serif; letter-spacing: .05em; margin-top: 20px; padding-top: 15px; text-transform: uppercase; }
.transcript-body { color: #c9c9c7; font: 13px/1.8 Arial, sans-serif; margin-top: 18px; max-height: 420px; overflow: auto; }
.empty-state { border: 1px solid var(--line); color: var(--gray); font: 12px Arial, sans-serif; padding: 20px; }
.admin-panel { border-top: 1px solid var(--line); margin-top: 70px; padding-top: 30px; }
.gamepass-panel { border-top: 1px solid var(--line); margin-top: 60px; padding-top: 30px; }
.gamepass-list { border-top: 1px solid var(--line); margin-top: 22px; }
.gamepass-row { align-items: center; border-bottom: 1px solid var(--line); display: grid; gap: 10px; grid-template-columns: .7fr 1fr 1.4fr 90px auto; padding: 15px 0; }
.gamepass-row small { color: var(--gray); display: block; font: 11px Arial, sans-serif; margin-top: 5px; }
.gamepass-row input { background: #070707; border: 1px solid #555; color: var(--white); font: 12px Arial, sans-serif; min-width: 0; padding: 11px; }
.gamepass-row button { cursor: pointer; padding: 10px 12px; }
.gamepass-row .gamepass-sale-action { grid-column: 2 / -1; justify-self: start; }
.gamepass-sale-option { align-items: center; color: var(--gray); display: flex; font: 12px Arial, sans-serif; gap: 8px; }
.gamepass-sale-option input { accent-color: var(--white); }
.status { border: 1px solid #aaa; color: white; font-size: 10px; padding: 5px 7px; text-align: center; }
.payment-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); margin-top: 50px; }
.payment-card { background: #101010; border: 1px solid var(--line); display: flex; flex-direction: column; min-height: 270px; padding: 26px; }
.payment-card h2 { font-size: 37px; margin: 48px 0 12px; }
.payment-card p { color: var(--gray); font: 13px/1.7 Arial, sans-serif; }
.payment-card .button { margin-top: auto; text-align: center; }
.payment-note { border-top: 1px solid var(--line); color: var(--gray); font: 12px/1.7 Arial, sans-serif; margin-top: 50px; padding-top: 20px; }
.site-footer { background: var(--black); color: var(--white); padding: 25px 0; }
.footer-wrap { display: flex; font: 10px Arial, sans-serif; justify-content: space-between; letter-spacing: .08em; text-transform: uppercase; }
.footer-wrap span:nth-child(2) { color: #aaa; letter-spacing: 0; text-transform: none; }
@media (max-width: 760px) {
  .container { width: calc(100% - 34px); }
  .nav-wrap { gap: 18px; flex-wrap: wrap; padding: 17px 0; }
  .nav-links { gap: 14px; order: 3; overflow: auto; width: 100%; }
  .nav-button { margin-left: auto; }
  .home-hero { grid-template-columns: 1fr; gap: 48px; padding-bottom: 75px; padding-top: 75px; }
  .hero-frame { min-height: 300px; }
  .frame-title { font-size: 48px; }
  .split-heading, .service-preview, .payment-grid { grid-template-columns: 1fr; }
  .split-heading { gap: 20px; }
  .split-heading h2, .split-heading > p:last-child { grid-column: auto; }
  .service-preview { padding-bottom: 75px; padding-top: 75px; }
  .preview-card { min-height: 280px; }
  .preview-card h3 { margin-top: 70px; }
  .page-hero { padding: 70px 0 60px; }
  .content-section { padding: 60px 0; }
  .service-row { gap: 13px; grid-template-columns: 35px 1fr; }
  .service-row p, .service-row ul, .row-price { grid-column: 2; text-align: left; }
  .service-row h2 { font-size: 30px; }
  .footer-wrap { align-items: flex-start; flex-direction: column; gap: 12px; }
  .staff-toolbar { align-items: flex-start; flex-direction: column; gap: 20px; }
  .document-list { grid-template-columns: 1fr; }
  .staff-dashboard { grid-template-columns: 1fr; }
  .staff-sidebar { min-height: 0; padding: 14px; position: static; }
  .dashboard-nav { display: flex; flex-wrap: nowrap; margin-top: 12px; overflow-x: auto; }
  .dashboard-nav button { flex: 0 0 auto; }
  .sidebar-logout { margin-top: 12px; width: auto; }
  .dashboard-section { padding: 22px 16px; }
  .dashboard-section > h2 { font-size: 34px; }
  .dashboard-form, .user-create-form, .user-row { grid-template-columns: 1fr 1fr; }
  .dashboard-form button, .dashboard-form-stacked, .user-password-note { grid-column: 1 / -1; }
  .dashboard-form.dashboard-form-stacked { grid-template-columns: 1fr; }
  .team-list { grid-template-columns: 1fr; }
  .community-document { padding: 22px 17px; }
  .community-document h2 { font-size: 32px; }
  .invoice-form-row { grid-template-columns: 1fr 1fr; }
  .permission-list { grid-template-columns: 1fr; }
  .gamepass-row { align-items: stretch; grid-template-columns: 1fr 1fr; }
  .gamepass-row > div, .gamepass-row .gamepass-description { grid-column: 1 / -1; }
  .gamepass-row .gamepass-sale-action { grid-column: 1 / -1; }
}