/* Battleline product site — layered on the control panel's app.css (tokens, fonts, buttons, inputs, chips). */
.m-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px var(--pad); border-bottom: 1px solid var(--line-soft); }
.m-nav nav { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.m-nav nav a { text-decoration: none; font-weight: 600; }
.m-nav form { margin: 0; }
.linkish { background: none; border: 0; padding: 0; color: var(--khaki); font-weight: 600; cursor: pointer; }
.btn.small { padding: .45em .9em; font-size: .85em; }
.m-main { max-width: 1120px; margin: 0 auto; padding: 0 var(--pad) 64px; }
.m-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 20px var(--pad); color: var(--mute); border-top: 1px solid var(--line-soft); font-size: .9em; }
.m-foot .tag { color: var(--ochre); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .8em; }

.m-hero { padding: clamp(48px, 10vw, 120px) 0 clamp(32px, 6vw, 72px); }
.m-title { margin: .15em 0 .1em; font: 800 clamp(3.2rem, 12vw, 8.5rem)/.9 var(--display); letter-spacing: .02em; color: var(--paper); }
.m-sub { max-width: 40em; font-size: clamp(1.05rem, 2vw, 1.3rem); color: var(--paper-dim); }
.m-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
.m-cta .btn { text-decoration: none; }

.m-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.m-card { padding: 22px; background: #121417b3; border: 1px solid var(--line); }
.m-card h3 { margin: 0 0 .5em; font: 700 1.5rem/1 var(--display); letter-spacing: .03em; color: var(--khaki); }
.m-card p { margin: 0; color: var(--paper-dim); }
.m-price { margin-top: 28px; padding: 18px 22px; border-left: 3px solid var(--ochre); background: #121417b3; color: var(--paper-dim); }
.m-price p { margin: 0; }

.m-auth { margin: clamp(32px, 8vw, 80px) auto 0; }
.m-sect { margin-top: 36px; padding: 22px; background: #121417c7; border: 1px solid var(--line); }
.m-sect-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.m-sect-h h2 { margin: 0; font: 700 1.7rem/1 var(--display); letter-spacing: .03em; }
.m-sect .alert:empty { display: none; }

.m-rent { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; }
.m-rent .input { width: auto; min-width: 0; flex: 1 1 200px; }
.m-rent .field-l { flex: 1 1 260px; }
.m-name { display: flex; align-items: center; gap: 6px; }
.m-name .mono { color: var(--khaki-dim); white-space: nowrap; }
.m-name .input { flex: 1 1 auto; }

.m-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.m-srv { padding: 14px 16px; border: 1px solid var(--line); background: #1f2226; }
.m-srv-h { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.m-links { display: flex; gap: 18px; margin-top: 8px; }
.m-end { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.m-confirm { display: inline-flex; gap: 6px; align-items: center; color: var(--paper-dim); font-size: .9em; }
.chip.st-active, .chip.job-done { color: var(--good); border-color: var(--good); }
.chip.st-provisioning, .chip.st-requested, .chip.st-sunsetting, .chip.job-running, .chip.job-queued { color: var(--ok); border-color: var(--ok); }
.chip.st-failed, .chip.st-lost, .chip.job-failed { color: var(--bad); border-color: var(--bad); }
.chip.st-sunset { color: var(--mute); }

.m-jobs-h { margin: 18px 0 8px; }
.m-jobs, .m-allow { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.m-jobs li, .m-allow li { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.m-jobs time { color: var(--mute); font-size: .85em; }
.m-allow form { margin: 0; }
.m-ended { margin-top: 14px; color: var(--paper-dim); }

.m-state { display: flex; gap: 10px; align-items: center; }
.m-ready p { margin: .35em 0; }
.m-secret { font-size: 1.1em; padding: .2em .5em; background: #000; color: var(--ochre-hot); user-select: all; }
.m-log { max-height: 26em; overflow: auto; margin: 16px 0 0; padding: 12px; background: #0b0c0e; border: 1px solid var(--line-soft); color: var(--paper-dim);
  font: .8em/1.45 var(--mono); white-space: pre-wrap; word-break: break-word; }

.m-table { width: 100%; border-collapse: collapse; font-size: .92em; }
.m-table th, .m-table td { padding: 7px 8px; text-align: left; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.m-table th { font: 700 .72em/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--khaki-dim); }
.m-table tr.st-sunset td { color: var(--mute); }
.m-table form { display: flex; gap: 6px; align-items: center; margin: 0; }
@media (max-width: 720px) { .m-table { display: block; overflow-x: auto; } }