/* FooPixel pixel theme · public site
   Loaded after /styles.css and each page's own stylesheet, with /themes/fonts/fonts.css.
   It restyles the existing shared classes only, so page markup, scripts and hooks stay as they are.
   Controls keep their shared class names; see docs/dashboard-ui.md ("Pixel themes"). */

:root {
  --deep: #040a14;
  --panel-2: #0a1526;
  --dash: rgba(152, 183, 238, 0.34);
  --a: #2e68ff;
  --b: #35ceff;
  --blue: #2e68ff; /* also themes the tool web components, which read these */
  --cyan: #35ceff;
  --hi: #35ceff;
  --grad: linear-gradient(90deg, var(--a), var(--b));
  --warn: #ffc15e;
  --bad: #ff7a8a;
  --ok: #50e3a4;
  --display: "FX Pixel", ui-monospace, monospace;
  --led: "Doto", ui-monospace, monospace;
  --body: "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-family: var(--body);
  /* legal and changelog pages read these */
  --legal-ink: var(--ink);
  --legal-muted: var(--muted);
  --legal-faint: var(--faint);
  --legal-night: var(--night);
  --legal-cyan: var(--hi);
  --legal-blue: var(--blue);
}
body { font-family: var(--body); -webkit-font-smoothing: antialiased; }
/* a pixel grid and the brand glow replace the old noise texture */
body::before {
  opacity: 1;
  background:
    radial-gradient(980px 640px at 92% -10%, rgba(46, 104, 255, 0.2), transparent 70%),
    radial-gradient(760px 600px at -10% 45%, rgba(53, 206, 255, 0.08), transparent 70%),
    linear-gradient(rgba(120, 160, 255, 0.045) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(120, 160, 255, 0.045) 1px, transparent 1px) 0 0 / 28px 28px;
}
/* CRT scanlines over everything, ignoring the pointer */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 2147482000; pointer-events: none; opacity: 0.45;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.16) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 50% 45%, transparent 62%, rgba(0, 0, 0, 0.38));
}
:focus-visible { outline-color: var(--hi); }
code, pre, kbd, samp { font-family: var(--mono); }

/* ================= type ================= */
h1, h2 { font-family: var(--display); font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.6rem, 5.4vw, 5rem); line-height: 0.98; }
h2 { font-size: clamp(2.1rem, 4.2vw, 3.8rem); line-height: 1; }
h1 em, h2 em, .legal-title em {
  color: transparent; background: var(--grad); -webkit-background-clip: text; background-clip: text;
  text-shadow: none; filter: drop-shadow(0 0 22px rgba(53, 206, 255, 0.3));
}
.kicker, .legal-kicker, .eyebrow {
  display: flex; align-items: center; gap: 10px;
  color: var(--hi); font-family: var(--mono); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.2em;
}
.kicker::before, .legal-kicker::before {
  content: ""; flex: 0 0 10px; width: 10px; height: 10px; margin-right: 8px;
  background: var(--grad); box-shadow: 14px -6px 0 -2px var(--b);
}

/* ================= header ================= */
.site-header {
  position: sticky; top: 0; z-index: 30; isolation: isolate;
  min-height: 74px; border-bottom: 0;
}
.site-header::before { /* full-width bar behind the page-width header */
  content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw; z-index: -1;
  border-bottom: 1px solid var(--line); background: rgba(7, 16, 31, 0.86);
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
}
.brand-name { font-family: var(--display); font-size: 1.55rem; font-weight: 700; letter-spacing: 0; }
.site-nav { gap: 8px; font-family: var(--body); font-size: 0.95rem; font-weight: 600; letter-spacing: 0; }
.site-nav a:not(.nav-cta):not(.nav-sign-in) { padding: 9px 12px; border-radius: 9px; }
.site-nav a:not(.nav-cta):not(.nav-sign-in):hover { background: rgba(255, 255, 255, 0.05); }
.site-nav [aria-current="page"] { color: var(--ink); }
.site-nav .nav-sign-in {
  min-height: 42px; margin-left: 8px; padding: 0 16px; border: 1px solid var(--line); border-radius: 100px;
  display: inline-flex; align-items: center; color: var(--ink);
}
.site-nav .nav-sign-in:hover { border-color: rgba(211, 226, 255, 0.4); }
.site-nav .nav-cta {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 18px;
  border-color: transparent; border-radius: 100px; color: #fff; background: var(--grad); background-origin: border-box;
  box-shadow: 0 10px 30px -10px rgba(53, 206, 255, 0.7);
}
.site-nav .nav-cta:hover { box-shadow: 0 14px 40px -8px rgba(53, 206, 255, 0.85); }
.menu-button { width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.03); }
.menu-button svg { width: 28px; height: 28px; margin: auto; display: block; }

/* ================= buttons ================= */
.button {
  gap: 10px; min-height: 48px; padding: 0 22px;
  border-radius: 100px; font-family: var(--body); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.01em;
  background-origin: border-box;
}
/* the gradient starts under the transparent border (border-box), or its far end repeats
   into the border and shows as a bright sliver on the left edge */
.button-primary {
  border-color: transparent; color: #fff; background: var(--grad); background-origin: border-box;
  box-shadow: 0 10px 30px -10px rgba(53, 206, 255, 0.7);
}
.button-primary:hover, .button-primary:focus-visible {
  border-color: transparent; background: var(--grad); background-origin: border-box;
  box-shadow: 0 14px 40px -8px rgba(53, 206, 255, 0.85); filter: brightness(1.08);
}
.button-quiet, .button-secondary { color: var(--ink); background: rgba(255, 255, 255, 0.03); }
.button-secondary { border-color: rgba(211, 226, 255, 0.22); background: #152640; }
.button-destructive { border-color: rgba(255, 122, 138, 0.45); color: #ffc9d0; background: #2c1623; }
.button.button-icon { padding: 0; }
.button-icon svg { stroke-linecap: square; stroke-linejoin: miter; }
.button[aria-busy="true"] { cursor: progress; }
/* plan CTAs keep their compact padding so labels wrap by word in narrow comparison columns */
.button-plan { padding: 10px 14px; line-height: 1.2; }
@media (max-width: 760px) { .allowances .button-plan { min-height: 44px; padding: 8px 6px; font-size: 0.78rem; } }
.result-button, .account-sign-in, .account-actions button:not(.account-sign-in), .connection-revoke, .asset-view, .asset-delete {
  min-height: 36px; padding: 0 14px; border-radius: 100px; font-family: var(--body); font-size: 0.82rem; font-weight: 700;
  background: rgba(255, 255, 255, 0.03);
}
.text-link { align-self: flex-start; width: fit-content; gap: 10px; font-family: var(--body); font-size: 0.95rem; border-bottom: 2px solid var(--b); }
.text-link:hover, .text-link:focus-visible { color: var(--hi); }

/* ================= homepage ================= */
.agent-home .hero { min-height: 0; background: none; }
.agent-home .hero-grid { min-height: 0; padding-block: 84px 64px; gap: 56px; }
.agent-home h1 { max-width: none; margin-bottom: 26px; font-size: clamp(2.6rem, 4.6vw, 4.6rem); }
.agent-home h1 em { display: block; margin-top: 0.08em; }
@media (min-width: 761px) { .agent-home h1 em { white-space: nowrap; } }
.agent-home .hero h1 { text-shadow: 0.035em 0 0 rgba(46, 104, 255, 0.9), -0.03em 0 0 rgba(53, 206, 255, 0.7), 0 0 60px rgba(53, 206, 255, 0.3); }
.agent-home .hero h1 em { text-shadow: none; }
.hero-intro { max-width: 48ch; font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.6; }
.agent-copy-button[data-state="copied"] { box-shadow: 0 0 0 3px rgba(53, 206, 255, 0.25), 0 14px 40px -8px rgba(53, 206, 255, 0.9); }
.hero-actions { gap: 14px; margin-top: 34px; }
/* upload limits: a centred line of facts under the hero, not buttons */
.agent-home .support-note {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 0;
  width: var(--page); margin: 0 auto; padding: 0 0 30px; list-style: none;
  color: var(--muted); font: 600 13px/1.4 var(--mono); letter-spacing: 0.04em;
}
.agent-home .support-note li { display: inline-flex; align-items: center; }
.agent-home .support-note li + li::before {
  content: ""; width: 6px; height: 6px; margin: 0 18px; background: var(--b); box-shadow: 0 0 8px rgba(53, 206, 255, 0.7);
}
.agent-home .support-note li:first-child { color: var(--ink); }
.agent-home .support-note b { margin-left: 0.4em; color: var(--hi); font-weight: 700; } /* flex items drop the space before it */

.hero-terminal {
  border-radius: 18px; background: var(--deep);
  box-shadow: 0 40px 100px -40px rgba(0, 0, 0, 0.9), inset 0 1px rgba(255, 255, 255, 0.05);
}
.terminal-bar, .terminal-links { font-family: var(--mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; color: var(--faint); }
.terminal-links { letter-spacing: 0.02em; }
.terminal-links a { color: var(--hi); }
.terminal-links a:hover { text-decoration: underline; }
.window-dots i { width: 10px; height: 10px; border-radius: 0; background: var(--faint); }
.window-dots i:nth-child(1) { background: var(--a); }
.window-dots i:nth-child(2) { background: var(--b); }
.window-dots i:nth-child(3) { background: var(--faint); }
.code-block { border-radius: 14px; color: #c9d6ee; background: var(--deep); font-family: var(--mono); line-height: 1.78; }
.hero-terminal .code-block { font-size: 0.84rem; }
.hero-terminal .code-block::after { /* blinking block cursor */
  content: ""; display: inline-block; width: 0.62em; height: 1.1em; margin-left: 3px; vertical-align: -0.18em;
  background: var(--b); box-shadow: 0 0 12px var(--b); animation: px-blink 1s steps(2) infinite;
}
.code-muted { color: var(--faint); font-style: italic; }
.code-purple { color: var(--b); font-weight: 700; }
.code-green { color: #9fc0ff; }

.agent-workflow { border-top: 0; padding-block: clamp(70px, 9vw, 130px) clamp(50px, 6vw, 90px); }
.workflow-grid { align-items: end; gap: 34px; }
.workflow-step h2 { margin-bottom: 26px; font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1.05; letter-spacing: -0.01em; }
.workflow-step h2 span { display: block; color: transparent; background: var(--grad); -webkit-background-clip: text; background-clip: text; font-family: var(--display); }
.workflow-terminal, .workflow-browser {
  height: clamp(250px, 20vw, 290px); border: 1px solid var(--line); border-radius: 16px; background: var(--deep);
  box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.8);
}
.workflow-terminal { padding: 18px 22px; font: 500 clamp(0.85rem, 1.1vw, 1rem)/1.8 var(--mono); }
.workflow-terminal > .window-dots { display: flex; margin: -4px -22px 18px; padding: 0 22px 14px; border-bottom: 1px solid var(--line); }
.workflow-terminal p { margin-bottom: 4px; }
.workflow-terminal p:last-child { color: var(--hi); }
.workflow-terminal p.typing::after {
  content: ""; display: inline-block; width: 0.6em; height: 1.05em; margin-left: 3px; vertical-align: -0.15em;
  background: var(--b); animation: px-blink 0.8s steps(2) infinite;
}
.workflow-arrow { align-self: center; height: auto; font-size: 0; color: transparent; }
.workflow-arrow::before { /* a 9 by 7 pixel arrow */
  content: ""; display: block; width: 7px; height: 7px;
  box-shadow: 35px 0 var(--b), 35px 7px var(--b), 42px 7px var(--b), 35px 14px var(--b), 42px 14px var(--b), 49px 14px var(--b), 0 21px var(--b), 7px 21px var(--b), 14px 21px var(--b), 21px 21px var(--b), 28px 21px var(--b), 35px 21px var(--b), 42px 21px var(--b), 49px 21px var(--b), 56px 21px var(--b), 35px 28px var(--b), 42px 28px var(--b), 49px 28px var(--b), 35px 35px var(--b), 42px 35px var(--b), 35px 42px var(--b);
  filter: drop-shadow(0 0 10px rgba(53, 206, 255, 0.7)); animation: px-nudge 1.1s steps(3) infinite;
}
.workflow-arrow { display: block; width: 63px; height: 49px; min-height: 0; }
.browser-bar { height: 50px; gap: 14px; }
.browser-address { flex: 1; padding: 6px 12px; border: 1px solid var(--line); border-radius: 100px; font-family: var(--mono); font-size: 0.74rem; font-weight: 600; }
.browser-preview {
  position: relative; height: calc(100% - 50px);
  background: repeating-conic-gradient(#0d1a2e 0% 25%, #0a1424 0% 50%) 0 0 / 22px 22px;
}
.browser-preview img { width: auto; height: clamp(96px, 9vw, 140px); filter: drop-shadow(0 18px 40px rgba(53, 206, 255, 0.4)); animation: px-float 4.5s ease-in-out infinite; }
.agent-home .section-intro { margin-bottom: clamp(40px, 4vw, 60px); }
.workflow-note { max-width: 70ch; margin-top: clamp(34px, 3.5vw, 50px); color: var(--muted); font-size: 1rem; line-height: 1.6; }

/* uploader, styled as an arcade cabinet */
.humans-uploader h2 { font-size: clamp(2.1rem, 4.2vw, 3.8rem); }
.uploader-panel {
  border-color: var(--line); border-radius: 24px;
  background: linear-gradient(180deg, #0b182b, #070f1d); background-origin: border-box;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.06), 0 50px 110px -50px rgba(0, 0, 0, 0.9), 0 0 0 6px rgba(12, 26, 45, 0.6);
}
.panel-topline { font-family: var(--mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; }
.panel-status { text-transform: uppercase; }
.panel-status i, .expiry-dot { width: 9px; height: 9px; border-radius: 0; box-shadow: 0 0 10px var(--hi); }
.panel-status i[data-state="error"] { background: var(--bad); box-shadow: 0 0 10px var(--bad); }
.expiry-dot { background: var(--warn); box-shadow: 0 0 10px var(--warn); animation: px-blink 1.2s steps(2) infinite; }
.upload-zone { border: 1.5px dashed rgba(152, 183, 238, 0.4); border-radius: 16px; background: rgba(8, 21, 39, 0.9); }
.upload-zone:hover, .upload-zone:focus-visible, .upload-zone.is-dragging { border-color: var(--hi); background: rgba(13, 32, 58, 0.9); }
.empty-upload { gap: 14px; color: var(--muted); font-size: 0.9rem; }
.empty-upload strong { font-family: var(--display); font-size: clamp(1.3rem, 2.4vw, 1.75rem); font-weight: 700; line-height: 1.15; }
.upload-symbol { width: 64px; height: 64px; border: 1.5px solid var(--dash); color: var(--hi); font-family: var(--display); font-size: 1.8rem; }
.preview-image { border: 1px solid var(--line); border-radius: 12px; background: repeating-conic-gradient(#0d1a2e 0% 25%, #0a1424 0% 50%) 0 0 / 18px 18px; }
.preview-meta strong { font-family: var(--display); font-size: 1.4rem; }
.preview-meta span { font-family: var(--mono); font-size: 0.85rem; }
.upload-help { font-size: 0.85rem; }
.stats-row { gap: 12px; align-items: stretch; padding-top: 18px; }
.stats-row > div:not(.stats-arrow) { flex: 1; gap: 10px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--deep); }
.stats-row span, .result-label { color: var(--faint); font-family: var(--mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; }
.stats-row strong { color: var(--hi); font: 900 1.9rem/1 var(--led); text-shadow: 0 0 16px rgba(53, 206, 255, 0.55); font-variant-numeric: tabular-nums; }
.stats-arrow { align-self: center; color: var(--b); font-family: var(--display); font-size: 1.6rem; }
.progress-label { font-family: var(--mono); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.progress-track { height: 16px; border: 1px solid var(--line); border-radius: 4px; background: var(--deep); }
.progress-track span {
  border-radius: 0;
  background: repeating-linear-gradient(90deg, transparent 0 11px, var(--deep) 11px 14px), var(--grad);
  box-shadow: 0 0 12px rgba(53, 206, 255, 0.45);
}
.result-url code {
  margin-top: 10px; padding: 16px 18px; border: 1px solid rgba(53, 206, 255, 0.5); border-radius: 12px; background: var(--deep);
  box-shadow: 0 0 30px -10px rgba(53, 206, 255, 0.6), inset 0 0 20px rgba(53, 206, 255, 0.06);
  font-family: var(--mono); font-size: clamp(0.85rem, 1.5vw, 1.05rem); font-weight: 700;
}
.expiry-note, .claim-note { font-size: 0.9rem; }
.error-area { padding: 16px 18px; border: 1px solid rgba(255, 122, 138, 0.45); border-radius: 14px; background: rgba(255, 122, 138, 0.06); }
.error-area strong { color: #ffd0d6; font-family: var(--display); font-size: 1.25rem; }
.agreement { font-size: 0.85rem; }
.account-summary, .account-panel { font-size: 0.85rem; }
.account-summary strong { font-size: 0.9rem; }
.account-lifecycle { border-left-color: var(--warn); }

/* upload queue */
.upload-queue { padding: 0; border: 1px solid var(--line); border-radius: 12px; background: #081426; }
.uploader-panel .upload-queue { border: 0; border-radius: 0; }
.upload-queue-heading { padding: 12px 14px; border-bottom: 1px solid var(--line); }
.upload-queue h2 { font: 700 17px/1 var(--display); }
.upload-queue-count { font: 700 11px/1.2 var(--mono); }
.upload-queue-note { margin: 12px 14px; }
.upload-queue ul { margin: 0; }
.upload-queue li, .upload-queue li:last-child { gap: 12px; padding: 10px 14px; border-top: 0; border-bottom: 1px solid var(--line); }
.upload-queue li.has-thumbnail { grid-template-columns: 38px minmax(0, 1fr) auto; }
.upload-queue li[data-state="processing"] { box-shadow: inset 3px 0 0 var(--b); }
.upload-queue-thumbnail, .upload-queue-thumb { display: block; width: 38px; height: 38px; }
.upload-queue-thumb { border: 1px solid var(--line); border-radius: 6px; background: repeating-conic-gradient(#10203a 0% 25%, #0a1628 0% 50%) 0 0 / 10px 10px; }
.upload-queue-meta { gap: 3px; }
.upload-queue-meta-heading { gap: 8px; }
.upload-queue strong, .upload-queue-name { font: 600 14px/1.3 var(--body); }
.upload-queue-name-input { min-height: 34px; border: 2px solid #1d3150; border-radius: 7px; background: var(--deep); font-family: var(--mono); }
.upload-queue-name-input:focus-visible { border-color: var(--b); outline: 0; box-shadow: 0 0 0 3px rgba(53, 206, 255, 0.2); }
.upload-queue-meta > .upload-queue-detail { display: inline-flex; align-items: center; gap: 8px; font: 600 12px/1.3 var(--mono); }
.upload-queue [data-state="processing"] .upload-queue-detail::before {
  content: ""; flex: 0 0 5px; width: 5px; height: 5px; margin-right: 16px; background: currentColor;
  box-shadow: 8px 0 color-mix(in srgb, currentColor 30%, transparent), 16px 0 color-mix(in srgb, currentColor 30%, transparent);
  animation: px-status-busy 0.9s steps(1) infinite;
}
.upload-queue [data-state="ready"] .upload-queue-detail::before { content: "✓"; font: 700 12px/1 var(--mono); }
.upload-queue [data-state="ready"] .upload-queue-detail { color: var(--ok); }
.upload-queue [data-state="failed"] .upload-queue-detail, .upload-queue [data-state="expired"] .upload-queue-detail { color: var(--bad); }
.upload-queue [data-state="waiting"] .upload-queue-detail { color: var(--warn); }

/* humans optional: the anonymous → account path as two nodes and a pixel track */
.human-section { background: rgba(12, 26, 45, 0.55); }
.human-inner { padding-block: clamp(80px, 10vw, 150px); }
.faq-section { padding-block: clamp(80px, 10vw, 150px) clamp(60px, 7vw, 110px); }
.humans-uploader { padding-block: clamp(80px, 10vw, 150px); }
.human-inner h2 { font-size: clamp(2.1rem, 4.2vw, 3.8rem); }
.human-copy > p { max-width: none; font-size: 1.05rem; }
.boundary-line { gap: 18px; margin: 34px 0; font-family: var(--mono); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; }
.boundary-line > span:not(.boundary-arrow) { padding: 14px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--deep); color: var(--muted); }
.boundary-line > span:last-child { border-color: rgba(53, 206, 255, 0.55); color: var(--hi); box-shadow: 0 0 36px -12px rgba(53, 206, 255, 0.7); }
.boundary-arrow { position: relative; flex: 1; min-width: 60px; height: 10px; font-size: 0; background: repeating-linear-gradient(90deg, var(--dash) 0 10px, transparent 10px 16px); }
.boundary-arrow::after { content: ""; position: absolute; top: 0; left: 0; width: 10px; height: 10px; background: var(--b); box-shadow: 0 0 12px var(--b); animation: px-travel 2.4s steps(14) infinite; }

/* FAQ, site-wide */
/* every FAQ on the site (homepage, pricing, tool pages) uses the same cards */
.faq-list, .tool-faq { display: grid; gap: 14px; border-top: 0; }
.tool-faq > h2 { margin: 0 0 12px; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.05; }
.faq-list details, .tool-faq details { margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 16px; background: rgba(12, 26, 45, 0.7); }
.tool-faq details:last-child { border-bottom: 1px solid var(--line); }
.faq-list details[open], .tool-faq details[open] { border-color: rgba(53, 206, 255, 0.5); background: rgba(13, 30, 52, 0.85); }
.faq-list summary, .tool-faq summary { padding: 22px 24px; font-family: var(--display); font-size: clamp(1.05rem, 1.6vw, 1.3rem); font-weight: 700; line-height: 1.3; }
.tool-faq summary:hover { color: inherit; }
/* keep the +/− beside the question when it wraps */
.faq-list summary, .tool-faq summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.faq-list summary::after, .tool-faq summary::after { flex: 0 0 20px; float: none; margin: 2px 0 0; }
summary::after {
  content: ""; float: right; width: 20px; height: 20px; margin: 2px 0 0 16px;
  background:
    linear-gradient(var(--hi), var(--hi)) center / 20px 4px no-repeat,
    linear-gradient(var(--hi), var(--hi)) center / 4px 20px no-repeat;
}
details[open] > summary::after { content: ""; background: linear-gradient(var(--hi), var(--hi)) center / 20px 4px no-repeat; }
.faq-list details p, .tool-faq details p { margin: 0; padding: 0 24px 22px; font-size: 1rem; }

/* the two "more" sections at the foot of the homepage */
.agent-home .tools-intro {
  max-width: none; margin-bottom: clamp(24px, 3vw, 40px); padding: clamp(28px, 3vw, 44px);
  border: 1.5px dashed var(--dash); border-radius: 22px; background: rgba(12, 26, 45, 0.8);
  transition: border-color 0.2s ease;
}
.agent-home .tools-intro:hover { border-color: var(--hi); }
.agent-home .tools-intro h2 { font-family: var(--display); font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.05; }

/* ================= footer ================= */
.site-footer { padding: 120px 0 60px; border-top: 1px solid var(--line); color: var(--faint); background: transparent; }
.footer-inner { gap: 16px; }
.footer-brand { width: 180px; height: 180px; display: grid; place-items: center; border-radius: 28px; }
.footer-brand img { width: 74%; height: 74%; filter: drop-shadow(0 20px 50px rgba(53, 206, 255, 0.45)); }
.site-footer .footer-name { margin: 0; color: var(--ink); font: 700 clamp(3.2rem, 8vw, 6.5rem)/0.9 var(--display); text-shadow: 0.035em 0 0 rgba(46, 104, 255, 0.9), -0.03em 0 0 rgba(53, 206, 255, 0.7); }
.site-footer p { color: var(--muted); font-size: 1.05rem; letter-spacing: 0; }
.site-footer nav { max-width: 900px; margin-top: 18px; }
.site-footer nav a { color: var(--muted); font-size: 0.92rem; font-weight: 600; text-decoration: none; }
.site-footer nav a:hover, .site-footer nav a:focus-visible { color: var(--ink); }
.site-footer nav a[aria-label^="FooPixel v"] { color: var(--hi); font-family: var(--mono); }

/* ================= site-wide controls ================= */
.site-field { border: 2px solid #1d3150; border-radius: 7px; background: var(--deep); box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.45); caret-color: var(--b); }
.site-field:focus-visible { outline: 0; border-color: var(--b); box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.45), 0 0 0 3px rgba(53, 206, 255, 0.2); }
.site-switch-track { border: 2px solid #1d3150; border-radius: 8px; background: #bcd4ff; }
.site-switch-thumb { width: 18px; height: 18px; border-radius: 5px; transition-timing-function: steps(4); }
.site-switch-thumb svg { width: 14px; height: 14px; }
.site-switch input:checked + .site-switch-track { background: var(--deep); }
.site-switch input:checked + .site-switch-track .site-switch-thumb { background: #13233b; color: var(--b); }
.visibility-pill {
  gap: 6px; min-height: 22px; padding: 0 8px; border-radius: 4px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
.visibility-pill::before { content: ""; flex: 0 0 6px; width: 6px; height: 6px; border: 1.5px solid currentColor; }
.visibility-pill[data-visibility="public"] { border-color: rgba(53, 206, 255, 0.45); color: var(--hi); background: rgba(53, 206, 255, 0.12); }
.visibility-pill[data-visibility="public"]::before { background: currentColor; }
.visibility-pill[data-visibility="private"] { border-color: var(--line); color: var(--muted); background: rgba(255, 255, 255, 0.05); }
.site-tooltip-trigger { text-decoration: underline dotted var(--hi); text-decoration-thickness: 2px; }
.site-tooltip-content { border: 2px solid var(--b); border-radius: 6px; background: #0f1f36; box-shadow: 4px 4px 0 var(--deep); font-size: 0.88rem; }
.site-choice-button[aria-pressed="true"] { border-color: var(--choice-b, var(--b)); transform: translateY(1px); box-shadow: 0 0 18px -6px var(--choice-b, var(--b)); }
.site-choice-button[aria-pressed="true"]::after { content: "✓"; color: var(--choice-b, var(--b)); font: 800 0.8rem/1 var(--mono); }
.site-choice-swatch { border-radius: 3px; }
.site-demo-zone { border: 1.5px dashed var(--dash); background: rgba(8, 21, 39, 0.9); }
.site-demo-zone:hover, .site-demo-zone:focus-visible { border-color: var(--hi); }
.site-action-status { font-size: 14px; }
.site-action-status::before {
  content: ""; flex: 0 0 5px; width: 5px; height: 5px; margin-right: 16px;
  color: var(--hi); background: currentColor;
  box-shadow: 8px 0 color-mix(in srgb, currentColor 30%, transparent), 16px 0 color-mix(in srgb, currentColor 30%, transparent);
  animation: px-status-busy 0.9s steps(1) infinite;
}
.site-action-status[data-tone="error"] { color: #ffc9d0; }
.site-action-status[data-tone="error"]::before {
  content: "!"; display: inline-grid; place-items: center; flex-basis: 18px; width: 18px; height: 18px; margin-right: 0;
  border-radius: 3px; color: var(--night); background: var(--bad); box-shadow: none;
  font: 800 12px/1 var(--mono); animation: none;
}
.site-action-status-compact { font: 600 12.5px/1.3 var(--mono); letter-spacing: 0; color: var(--muted); }
.site-action-status-compact::before,
.site-action-status-compact[data-tone="error"]::before {
  content: ""; flex-basis: 8px; width: 8px; height: 8px; margin-right: 0; border-radius: 0;
  background: var(--hi); box-shadow: 0 0 8px var(--hi); animation: px-blink 1.1s steps(2) infinite;
}
.site-action-status-compact[data-tone="error"]::before { background: var(--bad); box-shadow: 0 0 8px var(--bad); }
.copy-status { font-family: var(--mono); }

/* ================= tools, guides, docs, about ================= */
.breadcrumbs { font-family: var(--mono); font-size: 0.78rem; font-weight: 600; }
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--hi); }
.tool-heading h1, .catalog-heading h1 { font-size: clamp(2.2rem, 4.4vw, 3.8rem); line-height: 1.02; letter-spacing: -0.01em; }
.tool-heading .tool-promise, .catalog-heading .catalog-promise { font-family: var(--mono); font-size: 0.82rem; }
.tool-content h2, .tools-intro h2, .tool-directory h2, .credits-heading h2 { font-family: var(--display); letter-spacing: -0.005em; }
.tool-content h3 { font-family: var(--display); font-size: 1.15rem; }
.tool-content p, .tool-content li, .tools-intro p { font-size: 1rem; }
.tool-content aside { border-left: 1px dashed var(--dash); }
.tool-content th { color: var(--faint); font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; }
.tool-content code { color: var(--hi); }
.tool-next { font-family: var(--mono); font-size: 0.85rem; }
.catalog-nav a { font-weight: 600; }
.catalog-nav a > span { font-family: var(--mono); border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); }
.tool-directory > a { padding-inline: 12px; border-radius: 10px; }
.tool-directory strong { font-family: var(--display); font-size: 1.15rem; }
.tool-directory--cards .tool-card {
  border: 1.5px dashed var(--dash); border-radius: 18px; background: rgba(12, 26, 45, 0.85);
  box-shadow: 0 3px 0 #03070e;
}
.tool-directory--cards .tool-card:hover, .tool-directory--cards .tool-card:focus-visible { border-color: var(--hi); background: rgba(14, 32, 56, 0.95); }
.tool-card-icon { width: 46px; height: 46px; border-radius: 10px; color: var(--b); background: var(--deep); border-color: var(--line); filter: drop-shadow(0 0 8px rgba(53, 206, 255, 0.35)); }
.tool-card-icon svg { stroke-linecap: square; stroke-linejoin: miter; }
.tool-directory--cards .tool-card h3 { font-family: var(--display); font-size: 1.2rem; font-weight: 700; letter-spacing: 0; }
.tool-card-footer { font-family: var(--mono); font-size: 0.72rem; }
.tool-card-action { color: var(--hi); font-weight: 700; }
.catalog-hosting { border-top-style: dashed; }
.tool-byline { font-family: var(--mono); font-size: 0.8rem; }
.library-import { border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); }
.library-import button { min-height: 34px; padding: 0 14px; border: 1px solid var(--line); border-radius: 100px; background: rgba(255, 255, 255, 0.04); font-family: var(--body); font-weight: 700; }
.library-import button:hover { border-color: var(--hi); }

/* ================= legal and changelog ================= */
.legal-title { font-family: var(--display); font-size: clamp(2.4rem, 5vw, 4.6rem); font-weight: 700; letter-spacing: -0.01em; line-height: 0.98; }
.legal-lede { font-size: 1.1rem; }
.legal-meta { font-family: var(--mono); font-size: 0.8rem; }
.legal-copy h2 { font-family: var(--display); font-size: 1.55rem; letter-spacing: 0; }
.legal-copy h3 { font-family: var(--display); font-size: 1.1rem; }
.legal-copy code { color: var(--hi); }
.legal-note { border-left: 3px solid var(--b); border-radius: 0 12px 12px 0; background: rgba(53, 206, 255, 0.07); }
.legal-toc p { font-family: var(--mono); }
.legal-toc a:hover, .legal-toc a:focus-visible { color: var(--hi); }

/* ================= pricing ================= */
.pricing-hero h1 { font-size: clamp(1.8rem, 5vw, 4.4rem); white-space: normal; }
.plan-strip { gap: 20px; border-block: 0; }
.plan { border: 1px solid var(--line); border-radius: 20px; background: rgba(12, 26, 45, 0.75); }
.plan:first-child { border-left: 1px solid var(--line); }
.plan.pro { border-color: rgba(53, 206, 255, 0.55); background: rgba(14, 32, 56, 0.9); box-shadow: 0 0 0 1px rgba(53, 206, 255, 0.25), 0 30px 80px -30px rgba(53, 206, 255, 0.45); }
.plan .audience { font-family: var(--mono); font-size: 0.72rem; font-weight: 700; }
.plan h2 { font-size: 1.7rem; }
.price { color: var(--ink); font: 900 3.2rem/1 var(--led); letter-spacing: 0; text-shadow: 0 0 18px rgba(53, 206, 255, 0.35); }
.plan.pro .price { color: var(--hi); }
.price small { font-family: var(--body); }
.comparison-heading h2 { font-family: var(--display); }
.allowances thead th { font-family: var(--display); font-size: 1rem; }
.allowances .group th { font-family: var(--mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; }
.allowances td { font-family: var(--mono); font-weight: 600; }
.allowances td small { font-family: var(--body); font-weight: 400; }
.credit-rates dd, .credit-packs td { font-family: var(--mono); }
.table-notes { font-size: 0.82rem; }
@media (max-width: 760px) { .plan-strip { gap: 14px; } .plan { border-top: 1px solid var(--line); } }

/* ================= batch ================= */
.batch-intro h1 { font-size: clamp(2.3rem, 4.8vw, 4.2rem); letter-spacing: -0.01em; }
.batch-topline { font-family: var(--mono); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; }
.batch-picker { border: 1.5px dashed rgba(152, 183, 238, 0.4); border-radius: 16px; background: rgba(8, 21, 39, 0.9); }
.batch-picker:focus-visible, .batch-picker:hover { border-color: var(--hi); background: rgba(13, 32, 58, 0.9); }
.batch-picker strong { font-family: var(--display); font-size: 1.5rem; }
.batch-summary { gap: 12px; border-block: 0; }
.batch-summary div { border: 1px solid var(--line); border-radius: 12px; background: var(--deep); }
.batch-summary div:last-child { border: 1px solid var(--line); }
.batch-summary span { font-family: var(--mono); }
.batch-summary strong { color: var(--hi); font: 900 1.7rem/1 var(--led); text-shadow: 0 0 14px rgba(53, 206, 255, 0.5); }
.batch-preflight h2 { font-family: var(--display); }
.batch-item [data-item-state] { font-family: var(--mono); }
.batch-error { color: var(--bad); }

/* ================= 404 ================= */
.not-found h1 { font-size: clamp(3rem, 8vw, 7rem); text-shadow: 0.035em 0 0 rgba(46, 104, 255, 0.9), -0.03em 0 0 rgba(53, 206, 255, 0.7); }

/* ================= motion ================= */
@keyframes px-blink { 50% { opacity: 0.2; } }
@keyframes px-status-busy {
  0%, 100% { background: currentColor; box-shadow: 8px 0 color-mix(in srgb, currentColor 30%, transparent), 16px 0 color-mix(in srgb, currentColor 30%, transparent); }
  33% { background: color-mix(in srgb, currentColor 30%, transparent); box-shadow: 8px 0 currentColor, 16px 0 color-mix(in srgb, currentColor 30%, transparent); }
  66% { background: color-mix(in srgb, currentColor 30%, transparent); box-shadow: 8px 0 color-mix(in srgb, currentColor 30%, transparent), 16px 0 currentColor; }
}
@keyframes px-float { 50% { transform: translateY(-10px) rotate(-1.5deg); } }
@keyframes px-nudge { 50% { transform: translateX(8px); } }
@keyframes px-travel { to { left: calc(100% - 10px); } }
@keyframes px-drop { to { top: calc(100% - 10px); } }
@media (prefers-reduced-motion: reduce) {
  .upload-queue [data-state="processing"] .upload-queue-detail::before { animation: none; }
  .site-action-status::before, .site-action-status[data-tone]::before { animation: none; }
  .hero-terminal .code-block::after, .workflow-arrow::before, .browser-preview img, .boundary-arrow::after, .expiry-dot, .workflow-terminal p.typing::after { animation: none; }
}

/* ================= narrow screens ================= */
@media (max-width: 600px) {
  .upload-queue li.has-thumbnail { grid-template-columns: 38px minmax(0, 1fr); }
  .upload-queue li.has-thumbnail .upload-queue-actions { grid-column: 2; }
}
@media (max-width: 960px) {
  .agent-home .hero-grid { gap: 40px; }
  .workflow-grid { grid-template-columns: minmax(0, 1fr); }
  .workflow-arrow { justify-self: center; transform: rotate(90deg); }
}
@media (max-width: 760px) {
  .site-header { min-height: 64px; }
  body .site-header .site-nav { top: 70px; border-radius: 18px; background: rgba(7, 16, 31, 0.97); }
  body .site-header .site-nav.is-open { gap: 6px; }
  .site-nav .nav-sign-in, .site-nav .nav-cta { justify-content: center; margin: 4px 0 0; }
  .stats-row > div:not(.stats-arrow) { flex-basis: calc(50% - 6px); }
  .boundary-line { flex-direction: column; align-items: stretch; }
  .boundary-arrow { flex: 0 0 40px; width: 10px; min-width: 0; height: 40px; align-self: center; background: repeating-linear-gradient(180deg, var(--dash) 0 10px, transparent 10px 16px); }
  .boundary-arrow::after { animation-name: px-drop; }
  .agent-home .tools-intro { padding: 24px; }
}
@media (max-width: 560px) {
  .agent-home .support-note { font-size: 12px; }
  .agent-home .support-note li + li::before { margin: 0 12px; }
}
@media (max-width: 620px) {
  .agent-home .hero h1 { font-size: clamp(2.3rem, 11.5vw, 3.4rem); }
  .hero-terminal .code-block { font-size: 0.72rem; }
  .site-footer { padding: 90px 0 48px; }
  .footer-brand { width: 140px; height: 140px; }
}

/* ================= image editor =================
   The shared editor (tools/runtime/image-editor.css) opens on the free tools and in the
   dashboard, so it is themed here once: a pixel window, key buttons that press down, a
   gradient Save and small windows for its popovers. It stays full-screen without a frame on phones. */
.fp-editor-dialog {
  border-color: rgba(53, 206, 255, 0.45); border-radius: 14px; background: #0a1628;
  box-shadow: 6px 6px 0 var(--deep), 0 24px 80px rgba(0, 0, 0, 0.6); font-family: var(--body);
}
.fp-editor-dialog::backdrop { background: rgba(3, 7, 14, 0.74); backdrop-filter: blur(2px); }
.fp-editor-toolbar { background: rgba(7, 16, 31, 0.94); }
.fp-editor-title { font: 700 18px/1 var(--display); letter-spacing: 0; }
.fp-editor-toolbar button, .fp-editor-popover button, .fp-editor-navigation button, .fp-editor-help > button,
.fp-editor-help-panel button, .fp-editor-exit-confirm button, .fp-editor-dialog .fp-editor-save, .fp-editor-dialog .fp-editor-close {
  border-color: rgba(211, 226, 255, 0.22); border-radius: 7px; background: #13233b; box-shadow: 0 3px 0 #03070e;
  font-family: var(--body); font-weight: 700;
  transition: transform 0.06s ease, box-shadow 0.06s ease, border-color 0.15s ease, background-color 0.15s ease, filter 0.15s ease;
}
.fp-editor-dialog button:hover:not(:disabled), .fp-editor-dialog .fp-editor-close:hover:not(:disabled) { border-color: rgba(53, 206, 255, 0.55); background: #182b47; }
.fp-editor-dialog button:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 #03070e; }
.fp-editor-dialog button[aria-pressed="true"] {
  border-color: rgba(53, 206, 255, 0.55); background: rgba(53, 206, 255, 0.12); color: var(--hi);
  transform: translateY(2px); box-shadow: 0 1px 0 #03070e;
}
.fp-editor-dialog button:disabled { opacity: 0.5; border-style: dashed; box-shadow: none; transform: none; }
.fp-editor-dialog .fp-editor-close::before, .fp-editor-dialog .fp-editor-close::after { border-radius: 0; }
.fp-editor-dialog .fp-editor-save, .fp-editor-dialog .fp-editor-save:hover:not(:disabled) {
  border-color: transparent; background: linear-gradient(180deg, #3f7dff, #2e68ff); color: #fff;
  box-shadow: 0 3px 0 #173a93, 0 5px 22px rgba(0, 0, 0, 0.6);
}
.fp-editor-dialog .fp-editor-save:hover:not(:disabled) { filter: brightness(1.12); }
.fp-editor-dialog .fp-editor-save:disabled { border-color: rgba(255, 255, 255, 0.35); }
.fp-editor-popover, .fp-editor-help-panel, .fp-editor-exit-confirm {
  border-color: rgba(53, 206, 255, 0.45); border-radius: 12px; background: #0a1628;
  box-shadow: 5px 5px 0 var(--deep), 0 12px 30px rgba(0, 0, 0, 0.6);
}
.fp-editor-popover label { font-family: var(--mono); letter-spacing: 0.04em; }
.fp-editor-popover input, .fp-editor-popover select { border-radius: 7px; background: var(--deep); font-family: var(--mono); }
.fp-editor-popover input:focus-visible, .fp-editor-popover select:focus-visible { border-color: var(--hi); outline-offset: 0; }
.fp-editor-popover output, .fp-editor-navigation button { font-family: var(--mono); }
@media (max-width: 600px), (max-width: 900px) and (max-height: 500px) {
  .fp-editor-dialog { border-radius: 0; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fp-editor-dialog button { transition: none; }
}