/* /autopilot: the yellow opening, then one pinned run (commands on the charcoal at left, what each does and the app on the
   yellow at right), then the promises on the charcoal and the close on the yellow. Flat fields, square corners, Switzer,
   the system mono for literal values. Without the script, or with reduced motion, or on a phone, every step stays stacked
   with its own screenshot, so nothing depends on the pin. */

.ap-page main { position: relative; z-index: 1; flex: 1; width: 100%; }
.ap-visually { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ap-page code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }

/* ---------- opening ---------- */
.ap-hero { position: relative; min-height: calc(100svh - 56px); padding: clamp(56px, 12vh, 140px) var(--m) 40px; display: flex; flex-direction: column; justify-content: center; gap: 40px; color: var(--dark); }
.ap-kicker { display: inline-flex; align-items: center; gap: 12px; align-self: flex-start; margin: 0; padding: 10px 16px; background: var(--dark); color: #fff; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.02em; }
.ap-kicker__lamp { width: 9px; height: 9px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 10px 3px rgba(255, 233, 39, 0.8); animation: nav-ap-lamp 1.6s ease-in-out infinite; }
.ap-h1 { margin: 0 0 0 -0.04em; max-width: 14em; font-size: clamp(2.9rem, 1rem + 7.2vw, 8rem); font-weight: 700; line-height: 0.92; letter-spacing: -0.045em; }
.ap-h1__b { display: block; }
.ap-hero__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px 56px; border-top: 3px solid var(--dark); padding-top: 28px; }
.ap-lede { margin: 0; max-width: 38ch; font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); line-height: 1.38; }
.ap-hero__go { display: flex; flex-direction: column; gap: 12px; max-width: 30ch; }
.ap-btn { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; min-height: 56px; padding: 0 28px; background: var(--dark); color: #fff; font-size: 1.125rem; font-weight: 600; text-decoration: none; transition: background 200ms ease, color 200ms ease, transform 120ms ease; }
.ap-btn:hover { background: #fff; color: var(--dark); }
.ap-btn:active { transform: scale(0.97); }
.ap-btn:focus-visible { outline: 3px solid var(--dark); outline-offset: 3px; }
.ap-fine { margin: 0; font-size: 0.9375rem; line-height: 1.45; color: var(--y-muted, #665e18); }
.ap-scrollcue { margin: 0; display: inline-flex; align-items: center; gap: 12px; font-size: 0.9375rem; font-weight: 600; }
.ap-scrollcue__arrow { width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); animation: ap-nudge 1.6s ease-in-out infinite; }
@keyframes ap-nudge { 0%, 100% { translate: 0 -3px; } 50% { translate: 0 3px; } }

/* ---------- the run, stacked (phones, no script, reduced motion) ---------- */
.ap-run { background: var(--dark); color: #fff; }
.ap-left, .ap-sentinels { display: none; }
.ap-right { padding: 64px var(--m) 24px; }
.ap-steps { list-style: none; margin: 0 auto; padding: 0; max-width: 46rem; display: flex; flex-direction: column; gap: 72px; }
.ap-step__cmd { display: flex; align-items: baseline; gap: 14px; margin: 0 0 18px; color: var(--yellow); font-size: 0.875rem; }
.ap-step__cmd span { font-weight: 700; font-variant-numeric: tabular-nums; }
.ap-step__cmd code { color: #cfcfcf; overflow-wrap: anywhere; }
.ap-step__h { margin: 0; max-width: 16em; font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.6rem); font-weight: 700; line-height: 1; letter-spacing: -0.035em; }
.ap-step__p { margin: 18px 0 0; max-width: 40ch; font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); line-height: 1.5; color: #d6d6d6; }

/* ---------- the run, pinned: wide screens with the script and motion ---------- */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .ap-js .ap-track { position: relative; height: calc(8 * 85svh + 100svh); }
  .ap-js .ap-stage { position: sticky; top: 56px; height: calc(100svh - 56px); min-height: 600px; display: grid; grid-template-columns: 5fr 7fr; overflow: hidden; }

  /* left: the run log on the charcoal; done steps tick, the current one lights, the rest wait */
  .ap-js .ap-left { display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 40px clamp(20px, 3vw, 48px); background: var(--dark); border-right: 1px solid #262626; }
  .ap-js .ap-left__head { display: flex; justify-content: space-between; align-items: baseline; margin: 0; padding-bottom: 14px; border-bottom: 1px solid #2c2c2c; color: #9a9a9a; font-size: 0.875rem; }
  .ap-js .ap-left__head b { color: #fff; }
  .ap-js .ap-left__count { color: var(--yellow); font-weight: 700; font-variant-numeric: tabular-nums; }
  .ap-js .ap-cmds { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
  .ap-js .ap-cmd { position: relative; display: grid; grid-template-columns: 18px 26px 1fr; grid-template-rows: auto 0fr; column-gap: 10px; align-items: center;
    padding: 11px 14px 11px 14px; color: #6f6f6f; transition: color 300ms ease, background 300ms ease, grid-template-rows 450ms cubic-bezier(.2,.8,.2,1); }
  .ap-js .ap-cmd__n { font-size: 0.8125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
  .ap-js .ap-cmd__t { font-size: clamp(0.98rem, 0.8rem + 0.35vw, 1.1875rem); font-weight: 600; letter-spacing: -0.01em; }
  .ap-js .ap-cmd__c { grid-column: 3; grid-row: 2; overflow: hidden; min-height: 0; color: var(--yellow); font-size: 0.8125rem; opacity: 0; transition: opacity 300ms ease 120ms, padding 300ms ease; }
  .ap-js .ap-cmd__ic { position: relative; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 2px #444; transition: background 300ms ease, box-shadow 300ms ease; }
  .ap-js .ap-cmd__bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--yellow); transform: scaleX(0); transform-origin: 0 50%; }
  .ap-js .ap-cmd.is-done { color: #b8b8b8; }
  .ap-js .ap-cmd.is-done .ap-cmd__ic { background: var(--yellow); box-shadow: none; }
  .ap-js .ap-cmd.is-done .ap-cmd__ic::after { content: ""; position: absolute; left: 5.5px; top: 2.5px; width: 4px; height: 8px; border: solid var(--dark); border-width: 0 2px 2px 0; transform: rotate(45deg); }
  .ap-js .ap-cmd.is-now { color: #fff; background: #1d1d1d; grid-template-rows: auto 1fr; }
  .ap-js .ap-cmd.is-now .ap-cmd__c { opacity: 1; padding-top: 6px; }
  .ap-js .ap-cmd.is-now .ap-cmd__ic { animation: ap-pulse 1.4s ease-in-out infinite; }
  .ap-js .ap-cmd.is-now .ap-cmd__bar { animation: ap-fill 1.6s cubic-bezier(.4,0,.2,1) forwards; }
  .ap-js .ap-cmd.is-now::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--yellow); }

  /* right: the yellow field; the step's words swap above one app window that pans to the step */
  .ap-js .ap-right { position: relative; padding: 0; background: var(--yellow); color: var(--dark); display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
  .ap-js .ap-steps { flex: none; display: grid; max-width: none; margin: 0; padding: clamp(24px, 5svh, 64px) clamp(24px, 3.4vw, 56px) clamp(18px, 3svh, 32px); }
  /* every step sits in the same grid cell, so the words' area is as tall as the longest step and the window gets the rest */
  .ap-js .ap-step { grid-area: 1 / 1; min-width: 0;
    opacity: 0; visibility: hidden; transform: translateY(26px); transition: opacity 320ms ease, transform 520ms cubic-bezier(.2,.8,.2,1), visibility 0s linear 320ms; }
  .ap-js .ap-step.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 420ms ease 140ms, transform 700ms cubic-bezier(.2,.8,.2,1) 100ms, visibility 0s; }
  .ap-js .ap-step__cmd { color: var(--dark); margin-bottom: 14px; }
  .ap-js .ap-step__cmd code { color: var(--y-muted, #665e18); }
  .ap-js .ap-step__h { font-size: clamp(1.6rem, min(0.5rem + 2.6vw, 5.4svh), 3.5rem); max-width: 15em; }
  .ap-js .ap-step__p { color: var(--dark); margin-top: clamp(8px, 1.6svh, 14px); max-width: 56ch; font-size: clamp(0.95rem, min(0.85rem + 0.3vw, 2.3svh), 1.1875rem); }

  /* one sentinel per step down the track: the script lights the step whose sentinel crosses the middle */
  .ap-js .ap-sentinels { display: block; position: absolute; left: 0; top: 50svh; width: 1px; height: calc(8 * 85svh); pointer-events: none; }
  .ap-js .ap-sentinels i { display: block; height: 12.5%; }
}
@keyframes ap-fill { to { transform: scaleX(1); } }
@keyframes ap-pulse { 0%, 100% { box-shadow: inset 0 0 0 2px var(--yellow), 0 0 6px 1px rgba(255, 233, 39, 0.3); } 50% { box-shadow: inset 0 0 0 2px var(--yellow), 0 0 16px 4px rgba(255, 233, 39, 0.6); } }
@keyframes ap-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ap-scrollcue__arrow, .ap-kicker__lamp { animation: none; } }

/* ---------- promises ---------- */
.ap-never { padding: clamp(72px, 12vh, 140px) var(--m); background: #191919; color: #fff; }
.ap-never__h { margin: 0 0 40px; font-size: clamp(2.125rem, 1.2rem + 3.2vw, 4.5rem); font-weight: 700; line-height: 1; letter-spacing: -0.035em; }
.ap-never__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); border-top: 3px solid var(--yellow); }
.ap-never__list li { padding: 24px 24px 28px 0; font-size: 1.0625rem; line-height: 1.5; color: #cfcfcf; }
.ap-never__list b { display: block; margin-bottom: 8px; color: var(--yellow); font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); letter-spacing: -0.015em; }
.ap-never__note { margin: 32px 0 0; color: #8a8a8a; font-size: 0.875rem; }

/* ---------- close ---------- */
.ap-close { padding: clamp(80px, 14vh, 160px) var(--m); color: var(--dark); }
.ap-close__h { margin: 0 0 0 -0.04em; font-size: clamp(2.75rem, 1rem + 6.4vw, 7rem); font-weight: 700; line-height: 0.92; letter-spacing: -0.045em; }
.ap-close__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 32px 56px; margin-top: 36px; padding-top: 28px; border-top: 3px solid var(--dark); }
.ap-close__p { margin: 0; max-width: 44ch; font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); line-height: 1.5; }
.ap-close__p a { color: var(--dark); }
.ap-close__go { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.ap-link { color: var(--dark); font-weight: 600; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.3em; text-decoration-color: rgba(17, 17, 17, 0.35); }
.ap-link:hover { text-decoration-color: var(--dark); }

@media (max-width: 899px) {
  .ap-hero { min-height: 0; padding-top: 56px; }
}

/* ---------- the cards: the app's own panels rebuilt in HTML, as in the feature videos (marketing/feature-videos) ----------
   App colours from mac/Sources/ServerPatcher/Theme.swift. Stacked, every card shows its finished state; pinned,
   autopilot.js plays each part as the scroll moves through the step: [data-at] parts appear, [data-run] rows go
   waiting, running, done. */
.apc { --c-bg: #141417; --c-raised: #1A1A1D; --c-border: #38383F; --c-text: #F7F7F8; --c-muted: #B0B0B8; --c-faint: #83838D;
  --c-ok: #4CC36B; --c-bad: #FF6B5B;
  margin-top: 28px; padding: 22px 24px; border: 1.5px solid var(--c-border); border-radius: 20px; background: var(--c-bg); color: var(--c-text);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 15px; line-height: 1.4; letter-spacing: 0;
  box-shadow: 0 30px 80px -24px rgba(0, 0, 0, 0.55), 0 6px 18px rgba(0, 0, 0, 0.18); max-width: 40rem; }
.apc p { margin: 0; }
.apc code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.86em; color: var(--c-faint); }
.apc__h { font-size: 1.35em; font-weight: 600; }
.apc__sub { color: var(--c-muted); margin-top: 2px !important; }
.apc__sec, .apc__lab { margin-top: 14px !important; font-size: 0.78em; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-muted); }
.apc__lab:first-child { margin-top: 0 !important; }
.apc__it { display: flex; gap: 11px; align-items: flex-start; margin-top: 10px; }
.apc__it--s { margin-top: 7px; align-items: center; }
.apc__it b, .apc__rs b, .apc__app b { display: block; font-weight: 600; }
.apc__it i, .apc__rs i, .apc__app i, .apc__safe i { display: block; font-style: normal; color: var(--c-muted); font-size: 0.88em; margin-top: 2px; }
.apc__ic { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.apc__foot { margin-top: 14px !important; color: var(--c-faint); font-size: 0.86em; }
.apc__out { color: var(--c-ok) !important; }
.apc__out--line { margin-top: 14px !important; font-weight: 600; }

/* a run row and its checks: the status mark is a ring (waiting), a turning yellow arc (running) or a green tick (done) */
.apc__rs { display: flex; gap: 12px; align-items: flex-start; }
.apc__checks { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 9px; }
.apc__checks li { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.apc__checks li code { margin-left: auto; }
.apc__st { position: relative; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--c-ok); align-self: center; }
.apc__st::after { content: ""; position: absolute; left: 6px; top: 3.2px; width: 4px; height: 8px; border: solid #0A0A0B; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.apc__rs .apc__st { width: 22px; height: 22px; margin-top: 1px; align-self: flex-start; }
.apc__rs .apc__st::after { left: 7.5px; top: 4px; width: 5px; height: 10px; }
[data-st="w"] > .apc__st { background: none; box-shadow: inset 0 0 0 2px #55555C; }
[data-st="w"] > .apc__st::after, [data-st="r"] > .apc__st::after { display: none; }
[data-st="r"] > .apc__st { background: none; box-shadow: inset 0 0 0 2.5px #3A3A40; }
[data-st="r"] > .apc__st::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2.5px solid transparent; border-top-color: #FFE927; border-right-color: #FFE927; animation: ap-spin 0.8s linear infinite; }
[data-st="w"] { color: var(--c-faint); }
.apc__rs[data-st="w"] .apc__out, .apc__rs[data-st="r"] .apc__out { visibility: hidden; }
.apc__checks code, .apc__out, .apc__st { transition: color 200ms ease, background 200ms ease, box-shadow 200ms ease; }

/* image refresh: old and new side by side */
.apc__img { display: grid; grid-template-columns: 1fr 28px 1fr; align-items: center; gap: 8px; margin-top: 12px; }
.apc__ver { padding: 10px 12px; border: 1px solid var(--c-border); border-radius: 12px; background: var(--c-raised); min-width: 0; }
.apc__ver span { display: block; font-size: 0.74em; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-faint); }
.apc__ver code { display: block; color: var(--c-text); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apc__ver i { display: block; font-style: normal; color: var(--c-muted); font-size: 0.82em; margin-top: 2px; }
.apc__ver--new { border-color: rgba(76, 195, 107, 0.55); }
.apc__arrow { height: 2px; background: #FFE927; position: relative; }
.apc__arrow::after { content: ""; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left: 7px solid #FFE927; border-right: 0; }

/* Coolify app row */
.apc__app { display: flex; gap: 11px; align-items: flex-start; margin-top: 14px; padding: 10px 12px; border: 1px solid var(--c-border); border-radius: 12px; background: var(--c-raised); }
.apc__dot { flex: none; width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--c-ok); box-shadow: 0 0 0 3px rgba(76, 195, 107, 0.2); }

/* ports: the tag flips when its moment comes */
.apc__ports { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.apc__port { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--c-border); border-radius: 12px; background: var(--c-raised); }
.apc__port code { color: var(--c-text); font-size: 1em; min-width: 3.4em; }
.apc__port > span { color: var(--c-muted); }
.apc__tag { margin-left: auto; font-style: normal; font-size: 0.82em; font-weight: 600; padding: 3px 10px; border-radius: 999px; color: #FFB3AA; background: rgba(255, 107, 91, 0.14); }
.apc__tag--ok { color: #9BE3AE; background: rgba(76, 195, 107, 0.14); }
.apc__tag .is-b { display: none; }
.apc__port.is-on .apc__tag .is-a { display: none; }
.apc__port.is-on .apc__tag .is-b { display: inline; }
.apc__port--x.is-on { border-color: rgba(255, 233, 39, 0.5); }
.apc__port--x.is-on code { text-decoration: line-through; text-decoration-color: var(--c-bad); }
.apc__port--x.is-on .apc__tag { color: #111; background: #FFE927; }

/* safe mode and its countdown */
.apc__safe { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--c-border); border-radius: 12px; background: var(--c-raised); }
.apc__safe b { font-weight: 600; }
.apc__count { margin-left: auto; padding: 6px 12px; border: 1px solid var(--c-border); border-radius: 10px; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }

/* the reboot question */
.apc__ask { margin-top: 16px; padding: 16px 18px; border: 1.5px solid #6E6420; border-radius: 16px; background: #22200F; }
.apc__ask b { display: flex; gap: 10px; align-items: center; font-weight: 600; }
.apc__ask p { color: var(--c-muted); margin-top: 8px !important; }
.apc__btns { display: flex; justify-content: flex-end; gap: 8px; }
.apc__pb { padding: 6px 14px; border-radius: 9px; border: 1.5px solid var(--c-border); background: var(--c-raised); color: var(--c-text); font-weight: 600; }
.apc__pb--go { background: #FFE927; border-color: #FFE927; color: #111; }

/* the agent's terminal */
.apc--term .apc__ln { margin-top: 8px !important; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.88em; color: var(--c-text); }
.apc__pr { color: #FFE927; }
.apc__ln--o { color: var(--c-muted) !important; padding-left: 1.2em; }
.apc__ln--x { color: #FFB3AA !important; padding-left: 1.2em; }

/* pinned: parts wait for their moment (a short rise), and the reboot button breathes once it is asked */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .ap-js .apc { max-width: 44rem; margin-top: clamp(14px, 2.6svh, 28px); font-size: clamp(12.5px, min(1.9svh, 1.15vw), 17px); padding: clamp(14px, 2.2svh, 22px) clamp(16px, 2.4svh, 24px); }
  /* parts not reached yet wait dimmed, never invisible, so a card is never an empty box */
  .ap-js .apc [data-at] { opacity: 0.22; transform: translateY(4px); transition: opacity 320ms ease, transform 420ms cubic-bezier(.2,.8,.2,1); }
  .ap-js .apc [data-at].is-on, .ap-js .apc .apc__port[data-at] { opacity: 1; transform: none; }
  .ap-js .apc__ask.is-on .apc__pb--go { animation: ap-ask 1.6s ease-in-out infinite; }
}
@keyframes ap-ask { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 233, 39, 0.0); } 50% { box-shadow: 0 0 0 5px rgba(255, 233, 39, 0.28); } }
@media (max-width: 899px) { .apc { padding: 16px 16px; font-size: 14px; } .apc__checks li code { margin-left: 28px; flex-basis: 100%; } }

/* the bouncing halftone (autopilot.js): dark dots flying around the whole yellow panel, under the words */
.ap-dots { display: none; }
@media (min-width: 900px) {
  .ap-js.ap-dots-on .ap-dots { display: block; position: absolute; top: 0; right: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
  .ap-js .ap-steps { position: relative; z-index: 1; }
}