/* ByteSweep CLI: cli.html and its two demo pages. Loaded only by them, after v6.css. Terminals stay
   dark in both themes; everything else uses the site's tokens. */
.srv { --term: #080a26; --term-2: #151a4a; --term-line: #2b3270; --term-text: #d6d9f5; --term-dim: #a9afdc; --full: #ff5d6c; --warnc: #ffc35c; --free: #4fe0b6; }
.v6 main.srv h2 { max-width: 21em; margin: 0; text-align: left; font-size: clamp(28px, 4.2vw, 46px); line-height: 1.12; letter-spacing: -.03em; }
.srv code { font-family: var(--mono); font-size: .92em; }
.srv .srv-sub { margin-top: 16px; max-width: 38em; color: var(--muted); }
.srv .cli-sec { padding: clamp(56px, 8vw, 104px) 0; }
.srv .term .p, .srv .mini .p { color: #e9ebff; } .srv .term .g, .srv .mini .g { color: var(--free); } .srv .term .r, .srv .term-win .r { color: var(--full); }
.srv .term .y, .srv .term-win .y { color: var(--warnc); } .srv .term .d { color: #8f96c0; }

/* hero: the claim, then the proof, three real terminals side by side */
.srv .cli-hero { padding: clamp(40px, 6vw, 80px) 0 clamp(40px, 5vw, 64px); background: var(--midnight); color: #e9ebff; overflow: hidden; }
.v6 main.srv .cli-hero h1 { margin: 0; max-width: 12em; font: 500 clamp(38px, 6.4vw, 84px)/1.02 var(--display); letter-spacing: -.045em; color: #fff; }
.srv .cli-lead { margin-top: 24px; max-width: 36em; font: 400 clamp(18px, 2.1vw, 23px)/1.45 var(--font); color: #c9cdf3; }
.srv .cli-lead code { color: #fff; }
.srv .cli-get { margin-top: 32px; max-width: 46em; }
.srv .cli-install { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 10px 12px 10px 16px; border: 1px solid var(--term-line); border-radius: 9px; background: var(--term); color: var(--term-text); }
.srv .cli-install code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; font-size: 15px; scrollbar-width: none; }
.srv .cli-install button { flex: none; min-height: 40px; padding: 7px 14px; border: 1px solid #454c8e; border-radius: 6px; background: none; color: inherit; font: 400 14px var(--font); cursor: pointer; }
.srv .cli-install button:hover { background: var(--term-2); }
.srv .cli-get-note { margin-top: 14px; color: var(--term-dim); font-size: 15px; }
.v6 main.srv .cli-get-note a { color: #e9ebff; }

.srv .cli-wins { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; width: min(1360px, calc(100% - 32px)); margin: clamp(44px, 6vw, 72px) auto 0; }
.srv .term-win { margin: 0; min-width: 0; border-radius: 10px; overflow: hidden; box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .7); }
.srv .term-win figcaption { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; font: 400 13px var(--font); }
.srv .term-win pre { margin: 0; min-height: 13.5em; padding: 14px 14px 18px; border: 0; font: 400 13px/1.55 var(--mono); white-space: pre-wrap; overflow: hidden; }
.srv .term-win .c { display: inline-block; width: .55em; height: 1.05em; margin-bottom: -.2em; background: currentColor; }
/* macOS: light title bar, three dots, the name centred */
.srv .term-win.mac figcaption { background: #2b2b2e; color: #b9b9be; }
.srv .term-win.mac i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
.srv .term-win.mac i + i { background: #febc2e; } .srv .term-win.mac i + i + i { background: #28c840; }
.srv .term-win.mac span { flex: 1; margin-right: 50px; text-align: center; }
.srv .term-win.mac pre { background: #1e1e20; color: #e6e6e6; }
/* Windows: square corners, name on the left, three controls on the right */
.srv .term-win.windows { border-radius: 6px; }
.srv .term-win.windows figcaption { padding-right: 0; background: #1f1f1f; color: #d0d0d0; }
.srv .term-win.windows span { flex: 1; }
.srv .term-win.windows b { width: 40px; text-align: center; font-weight: 400; color: #9a9a9a; }
.srv .term-win.windows pre { background: #0c0c0c; color: #cccccc; font-family: "Cascadia Mono", Consolas, var(--mono); }
.srv .term-win.windows .p { color: #f2f2f2; }
/* Linux over SSH: the site's own terminal colours */
.srv .term-win.linux figcaption { background: #20265e; color: var(--term-dim); justify-content: center; }
.srv .term-win.linux pre { background: var(--term); color: var(--term-text); }
.srv .term-win .p { color: #fff; } .srv .term-win .g { color: #4fe0b6; }
.srv .cli-wins-cap { margin: 18px auto 0; color: var(--term-dim); font-size: 15px; }

/* three steps: a real sequence, so it is numbered */
.srv .cli-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin: 44px 0 0; padding: 0; list-style: none; counter-reset: step; }
.srv .cli-steps li { counter-increment: step; display: flex; flex-direction: column; }
.v6 main.srv .cli-steps h3 { margin: 0 0 10px; font-size: 21px; }
.v6 main.srv .cli-steps h3::before { content: counter(step); display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: 10px; border-radius: 50%; background: var(--ink); color: var(--bg); font: 600 15px var(--font); vertical-align: 2px; }
.srv .cli-steps p { margin: 0 0 18px; color: var(--muted); }
.srv .mini { margin: auto 0 0; padding: 14px 16px; border: 0; border-radius: 9px; background: var(--term); color: var(--term-text); font: 400 13px/1.55 var(--mono); white-space: pre; overflow-x: auto; }

/* systems */
.srv .cli-systems { background: var(--subtle); border-block: 1px solid var(--line); }
.srv .sys-table { margin-top: 40px; border-top: 1px solid var(--line-2); }
.srv .sys-row { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 4fr) minmax(0, 3fr) minmax(0, 1.4fr); gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.srv .sys-head { padding: 12px 0; color: var(--muted); font-size: 15px; }
.srv .sys-row b { font: 500 19px/1.35 var(--display); color: var(--ink); }
.srv .sys-row span { color: var(--muted); }
.srv .sys-row:not(.sys-head) span:last-child { color: var(--ink); }
.srv .cli-never { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 48px; margin: 40px 0 0; padding: 0; list-style: none; max-width: 64em; }
.srv .cli-never li { color: var(--muted); }
.srv .cli-never b { color: var(--ink); font-weight: 600; }

/* the app */
.srv .tube { margin-top: clamp(36px, 6vw, 64px); border: 1px solid var(--term-line); border-bottom: 0; border-radius: 12px 12px 0 0; background: var(--term); overflow: hidden; }
.srv .meter { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--term-line); font: 400 14px var(--mono); color: var(--term-dim); }
.srv .meter .track { flex: 1; height: 8px; border-radius: 2px; background: #20265e; overflow: hidden; }
.srv .meter i { display: block; height: 100%; width: 100%; background: var(--full); transition: width 1.1s cubic-bezier(.16,1,.3,1), background .6s; }
.srv .meter[data-ok] i { background: var(--free); }
.srv .meter b { font-weight: 400; color: #e9ebff; white-space: nowrap; }
.srv .srv-tabs { display: flex; overflow-x: auto; border-bottom: 1px solid var(--term-line); scrollbar-width: none; }
.srv .srv-tabs button { flex: none; min-height: 44px; padding: 11px 18px; border: 0; border-right: 1px solid var(--term-line); background: none; color: var(--term-dim); font: 400 14px var(--mono); cursor: pointer; }
.srv .srv-tabs button:hover { color: #e9ebff; }
.srv .srv-tabs button[aria-selected=true] { background: var(--term-2); color: #e9ebff; }
.srv .term { margin: 0; padding: 20px 18px 28px; min-height: 25.5em; background: none; border: 0; color: var(--term-text); font: 400 14px/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.srv .term .p { color: #e9ebff; } .srv .term .g { color: var(--free); } .srv .term .r { color: var(--full); } .srv .term .y { color: var(--warnc); } .srv .term .d { color: #8f96c0; }
.srv .cursor { display: inline-block; width: .6em; height: 1.1em; margin-bottom: -.2em; background: #e9ebff; }
.srv .app .tube { margin-top: 40px; border-bottom: 1px solid var(--term-line); border-radius: 12px; }
.srv .app .term { min-height: 21em; white-space: pre; overflow-x: auto; overflow-wrap: normal; }

/* the recorded app: a real 100 x 30 terminal, scrolled sideways on a phone rather than squeezed */
.srv .cli-appwin { width: max-content; max-width: 100%; margin: 40px auto 0; border: 1px solid var(--term-line); border-radius: 12px; background: #0c0c0c; overflow: hidden; box-shadow: 0 30px 70px -40px rgba(8, 10, 38, .6); }
.srv .cli-appwin .srv-tabs { background: var(--term); }
.srv .cli-appscroll { overflow-x: auto; }
.srv .cli-appscreen { display: block; width: max-content; margin: 0 auto; padding: 14px 16px 16px; border: 0; background: none; color: #d0d0d0;
  font: 400 13px/1.17 ui-monospace, SFMono-Regular, Menlo, Consolas, "DejaVu Sans Mono", monospace; white-space: pre; font-variant-ligatures: none; }
.srv .cli-appcap { margin-top: 12px; text-align: center; color: var(--muted); font-size: 15px; }

/* three more answers: one band each, the recorded screen beside what it does */
.srv .cli-more { border-top: 1px solid var(--line); }
.srv .cli-band { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 56px); align-items: center; margin-top: clamp(44px, 6vw, 72px); }
.srv .cli-band:nth-of-type(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
.srv .cli-band:nth-of-type(even) .cli-band-text { order: 2; }
.v6 main.srv .cli-band h3 { margin: 0; font: 500 clamp(22px, 2.4vw, 28px)/1.2 var(--display); letter-spacing: -.02em; color: var(--ink); }
.srv .cli-band-text > p { margin: 12px 0 0; color: var(--muted); }
.srv .cli-band ul { margin: 16px 0 0; padding: 0 0 0 1.1em; color: var(--ink); }
.srv .cli-band li + li { margin-top: 6px; }
.srv .cli-band-cmd { margin: 20px 0 0; padding: 12px 14px; border: 0; border-radius: 9px; background: var(--term); color: var(--term-text); font: 400 13.5px/1.6 var(--mono); white-space: pre; overflow-x: auto; }
.srv .cli-band-cmd code { font-size: inherit; }
.srv .cli-band-shot { min-width: 0; margin: 0; border: 1px solid var(--term-line); border-radius: 12px; background: #0c0c0c; overflow: hidden; box-shadow: 0 30px 70px -40px rgba(8, 10, 38, .6); }
.srv .cli-band-shot .cli-appscreen { font-size: 10.5px; }
.srv .cli-more .cli-appcap { margin-top: 28px; }

/* scripts and servers */
.srv .cli-uses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 40px; margin: 44px 0 0; }
.srv .cli-uses div { display: flex; flex-direction: column; }
.srv .cli-uses dt { font: 500 20px var(--display); color: var(--ink); }
.srv .cli-uses dd { margin: 8px 0 0; color: var(--muted); }
.srv .cli-uses dd:last-child { margin-top: auto; padding-top: 12px; }
.srv .cli-uses dd code { display: block; padding: 10px 12px; border-radius: 7px; background: var(--term); color: var(--term-text); font-size: 13.5px; white-space: nowrap; overflow-x: auto; }

/* every command */
.srv .cli-cmds { margin: 40px 0 0; border-top: 1px solid var(--line); }
.srv .cli-cmds > div { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); gap: 8px 40px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.srv .cli-cmds dt { font: 500 19px/1.4 var(--display); color: var(--ink); }
.srv .cli-cmds dd { margin: 0; }
.srv .cli-cmds ul { list-style: none; margin: 0; padding: 0; }
.srv .cli-cmds li { display: grid; grid-template-columns: 12em minmax(0, 1fr); gap: 16px; padding: 3px 0; }
.srv .cli-cmds li code { color: var(--ink); white-space: nowrap; }
.srv .cli-cmds li span:last-child { color: var(--muted); }

/* plans */
.srv .srv-pricing { border-top: 1px solid var(--line); }
.srv .srv-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.srv .srv-plan { display: flex; flex-direction: column; padding: 26px 24px; border: 1px solid var(--card-line); border-radius: 16px; background: var(--card); }
.v6 main.srv .srv-plan h3 { margin: 0; font-size: 20px; }
.srv .srv-plan .srv-for { color: var(--muted); }
.srv .amount { margin: 18px 0 2px; font: 400 clamp(46px, 5.4vw, 64px)/1 var(--display); letter-spacing: -.04em; color: var(--ink); }
.srv .srv-plan .once { color: var(--muted); font-size: 15px; }
.srv .srv-buy { width: 100%; margin-top: 22px; }
.srv button.srv-buy[disabled] { min-height: 58px; padding: 14px 28px; border: 1px dashed var(--line-2); border-radius: 16px; background: var(--subtle); color: var(--muted); font: 600 17px var(--font); cursor: not-allowed; }
.srv .terms { margin-top: 18px; max-width: 46em; color: var(--muted); }
.srv .srv-table { width: 100%; margin-top: 48px; border-collapse: collapse; }
.srv .srv-table th, .srv .srv-table td { padding: 12px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-weight: 400; }
.srv .srv-table thead th { font-weight: 600; color: var(--ink); }
.srv .srv-table td + td, .srv .srv-table th + th { padding-left: 20px; }
.srv .srv-install { display: flex; align-items: center; gap: 12px; margin-top: 40px; padding: 12px 14px; border-radius: 9px; background: var(--term); color: var(--term-text); }
.srv .srv-install code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; font-size: 15px; }
.srv .srv-install button { flex: none; min-height: 40px; padding: 7px 12px; border: 1px solid #454c8e; border-radius: 6px; background: none; color: inherit; font: 400 14px var(--font); cursor: pointer; }
.srv .srv-note { margin-top: 12px; color: var(--muted); font-size: 15px; }

/* questions */
.srv .srv-faq { margin-top: 44px; }
.srv .srv-faq details { border-bottom: 1px solid var(--line); }
.srv .srv-faq details:first-child { border-top: 1px solid var(--line); }
.srv .srv-faq summary { padding: 17px 0; font: 500 19px var(--display); color: var(--ink); cursor: pointer; }
.srv .srv-faq details p { margin: 0 0 20px; max-width: 38em; color: var(--muted); }
.srv .sample { margin-top: 32px; color: var(--muted); font-size: 15px; }

@media (max-width: 980px) {
  .srv .cli-wins { grid-template-columns: repeat(3, 82%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; width: 100%; padding-inline: 16px; scroll-padding-inline: 16px; }
  .srv .term-win { scroll-snap-align: start; }
  .srv .cli-steps, .srv .cli-uses { grid-template-columns: minmax(0, 1fr); }
  .srv .cli-band, .srv .cli-band:nth-of-type(even) { grid-template-columns: minmax(0, 1fr); }
  .srv .cli-band:nth-of-type(even) .cli-band-text { order: 0; }
  .srv .cli-band-shot .cli-appscreen { font-size: 11px; }
  .srv .sys-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .srv .sys-head { display: none; }
  .srv .sys-row span::before { display: block; margin-top: 6px; color: var(--muted); font-size: 13px; font-weight: 600; }
  .srv .sys-row span:nth-child(2)::before { content: "Finds and cleans"; }
  .srv .sys-row span:nth-child(3)::before { content: "Never touches"; }
  .srv .sys-row span:nth-child(4)::before { content: "Runs jobs with"; }
}
@media (max-width: 760px) {
  .srv .cli-cmds > div, .srv .srv-plans, .srv .cli-never { grid-template-columns: minmax(0, 1fr); }
  .srv .cli-cmds li { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 6px 0; }
  .srv .term { font-size: 12.5px; }
  .srv .cli-appscreen { font-size: 11px; }
  .srv-demo .wrap { padding-inline: 16px; }
}
@media (prefers-reduced-motion: reduce) { .srv .term-win .c { display: none; } }