/* ============================================================
   agentic.css — page-scoped styles for
   /produktova-prioritizace-s-agentni-ai/ (EN + CS).
   Loaded only by that page via $cssExtra; deliberately NOT part of
   the site-wide bundle, because nothing else uses these blocks.
   Holds: install command card, the terminal replay and its prototype
   preview, the task list, the autonomous run, the work split, and the
   fast/slow thinking flow diagram.
   Lifted out of sections.css verbatim — it was the tail of that file,
   so loading it directly after sections.css preserves cascade order.
   ============================================================ */

/* ============================================================
   AGENTIC AI COMMAND CENTRE (produktova page)
   centred head → install command card → animated terminal + task
   list → "work split" (machine vs human)
   ============================================================ */
.agentic__head .lead + .lead { margin-top: 16px; }

/* ---- Command card (tabs + copyable command lines) ---- */
.cmd { max-width: 900px; margin: clamp(32px, 4vw, 48px) auto 0; background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-panel); box-shadow: var(--shadow-card); overflow: hidden; }
.cmd__tabs { display: flex; gap: 4px; padding: 10px 12px; border-bottom: 1px solid var(--c-border); }
.cmd__tab { padding: 8px 16px; border-radius: 10px; font-family: inherit; font-size: var(--fs-sm); font-weight: 700; color: var(--c-text); transition: background var(--ease), color var(--ease); }
.cmd__tab:hover { color: var(--c-primary); }
.cmd__tab[aria-selected="true"] { background: var(--surface-band); color: var(--c-primary); }
.cmd__panel { padding: 18px clamp(14px, 1.8vw, 22px) 20px; }
.cmd__panel[hidden] { display: none; }
.cmd__line { display: flex; align-items: center; gap: 10px; }
.cmd__line + .cmd__line { margin-top: 6px; }
.cmd__code { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 14px; line-height: 1.6; color: var(--c-text-strong); white-space: pre; overflow-x: auto; padding: 6px 2px; scrollbar-width: thin; }
.cmd__prompt { color: var(--c-primary-soft); user-select: none; }
.cmd__copy { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: var(--c-text); transition: background var(--ease), color var(--ease); }
.cmd__copy:hover { background: var(--surface-band); color: var(--c-primary); }
.cmd__copy svg { width: 17px; height: 17px; }
.cmd__copy .cmd__done { display: none; color: var(--c-success); }
.cmd__copy.is-copied .cmd__idle { display: none; }
.cmd__copy.is-copied .cmd__done { display: block; }
.cmd__note { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--c-border); font-size: var(--fs-sm); color: var(--c-text); line-height: 1.6; }
.cmd__note code { font-family: var(--font-mono); font-size: .92em; color: var(--c-text-strong); background: var(--surface-band-50); padding: 2px 6px; border-radius: 6px; }
.cmd__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 36px; margin-top: 22px; }

/* ---- Terminal + task list ---- */
/* the terminal keeps a classic window proportion; the task column sits at its own height beside it */
.agentic__demo { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: clamp(24px, 3vw, 40px); align-items: start; margin-top: clamp(40px, 5vw, 68px); }
/* the terminal column: the window plus the note that says the replay is an example */
.agentic__terminalcol { min-width: 0; }
/* typeset like .source-note — italic, small, same ink; left-aligned under the window */
.terminal__disclaimer { margin-top: 12px; font-style: italic; font-size: var(--fs-sm); color: var(--c-text); line-height: 1.5; }

/* one palette block — the whole terminal reads its colours from here */
.terminal {
  --terminal-bg-a:      #17151f;              /* near-black, a hair of purple in it */
  --terminal-bg-b:      #0a0910;
  --terminal-hairline:  rgba(255,255,255,.08);
  --terminal-text:      rgba(255,255,255,.82); /* output = white */
  --terminal-text-dim:  rgba(255,255,255,.42);
  --terminal-purple:    #ab9dff;              /* the typed command */
  --terminal-purple-lo: #8b7bff;              /* prompt glyph + caret */
  --terminal-ok:        #2bd9a4;
  display: flex; flex-direction: column;
  aspect-ratio: 17 / 9;                  /* classic terminal window proportion (~1.89:1) */
  background: linear-gradient(158deg, var(--terminal-bg-a) 0%, var(--terminal-bg-b) 62%);
  border: 1px solid var(--terminal-hairline);
  border-radius: var(--r-panel); box-shadow: var(--shadow-lg); overflow: hidden;
}
.terminal__bar { display: flex; align-items: center; gap: 8px; padding: 13px 18px; background: rgba(255,255,255,.028); border-bottom: 1px solid var(--terminal-hairline); }
.terminal__dot { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,.22); }
.terminal__dot:nth-child(1) { background: #ff6b7e; }
.terminal__dot:nth-child(2) { background: #f7b955; }
.terminal__dot:nth-child(3) { background: #16c79a; }
.terminal__name { margin-left: 10px; font-family: var(--font-mono); font-size: 12.5px; color: var(--terminal-text-dim); }
/* how much of the running task is left — JS sets the duration, hovering the terminal pauses it */
.terminal__progress { flex: none; height: 3px; background: var(--c-primary); transform: scaleX(0); transform-origin: left; }
@keyframes terminal-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .terminal__progress { display: none; } }
/* the same window doubles as the browser the prototype runs in — chrome stays, contents swap */
.terminal__name--browser, .terminal__url { display: none; }
.terminal--browser .terminal__name--terminal { display: none; }
.terminal--browser .terminal__name--browser { display: inline; }
.terminal--browser .terminal__url { display: block; margin-left: auto; background: rgba(255,255,255,.08); border-radius: 5px; padding: 3px 10px; font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,.5); }
/* the session scrolls itself as scenes accumulate — scrollbar hidden, top edge fades once scrolled */
/* height:0 + min-height keeps the accumulated output from stretching the grid row —
   the task column sets the height, the terminal scrolls inside it */
.terminal__body { flex: 1 1 auto; height: 0; min-height: 0; padding: 20px clamp(16px, 1.6vw, 24px) 24px; overflow-y: auto; scrollbar-width: none; font-family: var(--font-mono); font-size: 13.5px; line-height: 1.75; color: var(--terminal-text); }
.terminal__body::-webkit-scrollbar { display: none; }
.terminal__body.is-scrolled { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 26px); mask-image: linear-gradient(180deg, transparent 0, #000 26px); }
.terminal__scene[hidden] { display: none; }
/* the `clear` typed between tasks — .terminal__line sets display:block, which beats the UA [hidden] rule */
.terminal__clear { margin-top: 14px; }
.terminal__clear[hidden] { display: none; }

/* ---- browser mode: white page, log lines gone, only the running prototype ---- */
.terminal--browser .terminal__body { background: #fff; padding: 0; display: flex; flex-direction: column; }
.terminal--browser .terminal__body.is-scrolled { -webkit-mask-image: none; mask-image: none; }
/* .terminal.is-js keeps this above the `.is-in { display: block }` reveal rule */
.terminal.terminal--browser .terminal__scene .terminal__line:not(.terminal__preview) { display: none; }
/* the prototype fills the window instead of leaving white below it */
.terminal--browser .terminal__scene:not([hidden]) { flex: 1 1 auto; display: flex; flex-direction: column; }
.terminal--browser .terminal__preview { flex: 1 1 auto; }
.terminal--browser .terminal__view { flex: 1 1 auto; }
/* without the drawer beside it the app would stretch the whole window — keep it a centred
   column. Half the window is right at the desktop size; below that, halving leaves a column
   too narrow to read, so it holds that width until the window itself is the limit. */
.terminal--browser .terminal__app { max-width: min(100%, max(50%, 450px)); margin-inline: auto; }
/* the closing command floats in front of the page instead of scrolling away with it */
.terminal--browser .terminal__clear {
  position: sticky; bottom: 12px; z-index: 2;
  margin: -44px 14px 14px; padding: 9px 12px;
  background: rgba(10,9,16,.93); border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px; box-shadow: 0 14px 34px rgba(0,0,0,.42);
}
.terminal__line { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }
.terminal__wrap { white-space: normal; overflow-wrap: normal; }
/* thinking steps under a ✻ header — hanging bullet so wrapped lines stay aligned */
.terminal__step { position: relative; padding-left: 3ch; }
.terminal__step::before { content: "·"; position: absolute; left: 1.3ch; }
.terminal__ms { margin-left: 1ch; color: rgba(255,255,255,.28); }
/* real tool-output tables — never scroll sideways: table-layout:fixed pins the narrow
   columns in em and hands the rest to the prose column, which wraps to as many rows as it needs */
.terminal__table { margin: 12px 0; white-space: normal; }
.terminal__table table { border-collapse: collapse; width: 100%; table-layout: fixed; font-size: .86em; }
.terminal__table th, .terminal__table td { border: 1px solid rgba(255,255,255,.16); padding: 5px 8px; text-align: left; vertical-align: top; line-height: 1.5; overflow-wrap: break-word; }
.terminal__table th { color: var(--terminal-text); font-weight: 400; text-align: center; }
.terminal__table td { color: var(--terminal-text-dim); }
.terminal__table .c-num   { width: 2.6em; text-align: center; color: var(--terminal-text); }
.terminal__table .c-count { width: 5.2em; text-align: center; color: var(--terminal-text); }
.terminal__table .c-name  { width: 11em; color: var(--terminal-text); }
.terminal__table .c-text  { width: auto; }
.terminal__table em { color: var(--terminal-text-dim); font-style: italic; }
.terminal__cmd { color: var(--terminal-purple); font-weight: 600; }
.terminal__strong { color: #fff; font-weight: 600; }
.terminal__prompt { color: var(--terminal-purple-lo); }
.terminal__type { border-right: 2px solid transparent; }
.terminal__ok { color: var(--terminal-ok); }
.terminal__run { color: var(--terminal-purple); }
.terminal__dim { color: var(--terminal-text-dim); }
.terminal__fill { color: var(--terminal-purple-lo); }
/* parallel-agent tree: dim connectors, amber status dots, the task's subject in purple */
.terminal__tree { color: rgba(255,255,255,.22); }
.terminal__pt { color: var(--terminal-purple-lo); }
.terminal__arg { color: var(--terminal-purple); }
.terminal__empty { color: rgba(255,255,255,.14); }
/* a spawned agent that has reported back: its dot and label go green, same as the run above */
.terminal__agent.is-done .terminal__pt { color: var(--terminal-ok); }
.terminal__agent.is-done .terminal__state { color: var(--terminal-ok); font-weight: 600; }

/* ---- prototype preview: the app the agent builds, rendered inside the session ----
   Light Continuum Tracker UI dropped into the dark terminal. Tokens and type scale are
   restated from the ct skill's tokens.css / primitives.css so this matches the real
   prototype; sizes are scaled down to fit the panel. */
.terminal__preview {
  --p-primary: #5046e5;
  --p-hero:    #1c1a4e;
  --p-text:    #3e3255;
  --p-accent:  #292478;
  --p-muted:   #64748b;
  --p-border:  #e5e5e5;
  /* fills the window — the window's own bar is the browser chrome */
  display: flex; flex-direction: column;
  font-family: var(--font); white-space: normal; overflow-wrap: normal;
}
/* the app's real .login-glow */
/* the app's .login-glow, minus its blue bottom stop — in a short window that stop
   reads as a blue wash rising from the bottom edge, especially under the audit scrim */
.terminal__view { position: relative; display: flex; align-items: stretch; background: linear-gradient(170deg, #f2f3ff 0%, #fff 45%, #fff 100%); }
.terminal__app { flex: 1 1 auto; min-width: 0; padding: 18px 16px 20px; text-align: center; color: var(--p-text); }
.terminal__logo { height: 15px; width: auto; margin: 0 auto 14px; }
.terminal__h1 { font-size: 26px; line-height: 1.05; font-weight: 800; letter-spacing: -.02em; color: var(--p-hero); margin-bottom: 8px; }
.terminal__tagline { font-size: 10.5px; line-height: 1.5; color: var(--p-text); max-width: 24rem; margin: 0 auto; }
.terminal__tagline b { font-weight: 700; color: var(--p-accent); }
.terminal__methods { margin-top: 16px; background: rgba(80,70,229,.06); border-radius: 12px; padding: 13px; text-align: left; }
.terminal__mtitle { font-size: 11.5px; font-weight: 700; color: var(--p-text); }
.terminal__mdesc { font-size: 10.5px; line-height: 1.5; color: var(--p-text); margin: 4px 0 16px; }
.terminal__mdesc b { font-weight: 700; color: var(--p-accent); }
.terminal__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.terminal__card { position: relative; background: #fff; border-radius: 12px; padding: 12px 11px 11px; box-shadow: 0 2px 16px rgba(62,50,85,.07); }
.terminal__badge { position: absolute; top: -8px; left: 12px; display: inline-flex; align-items: center; gap: 3px; font-size: 8.5px; font-weight: 700; padding: 3px 7px; border-radius: 999px; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.terminal__badge--current { background: #d6f5e4; color: #047857; }
.terminal__badge--suggested { background: #fcefc5; color: #b45309; }
.terminal__ctitle { font-size: 11.5px; font-weight: 700; color: var(--p-text); line-height: 1.25; margin-bottom: 5px; }
.terminal__cdesc { font-size: 10px; line-height: 1.5; color: var(--p-text); }
.terminal__cta { display: inline-block; margin-top: 16px; background: var(--p-primary); color: #fff; font-size: 11.5px; font-weight: 600; line-height: 1; padding: 10px 16px; border-radius: 8px; }

/* record drawer — slides OVER the page from the right, like the app's real .drawer;
   it must not resize the screen underneath, so the intro stays identical to task 3 */
.terminal__drawer { position: absolute; z-index: 2; top: 0; right: 0; bottom: 0; width: 44%; background: #fff; border-left: 1px solid var(--p-border); padding: 14px 13px 0; text-align: left; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 100%); mask-image: linear-gradient(180deg, #000 82%, transparent 100%); }
/* the app's .drawer-overlay scrim behind it */
.terminal__preview--audit .terminal__view::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(28,26,78,.28); }
.terminal__dtitle { font-size: 13px; font-weight: 800; color: var(--p-text); }
.terminal__dsignal { font-size: 10px; line-height: 1.5; color: var(--p-text); margin-top: 1px; padding-bottom: 9px; border-bottom: 1px solid var(--p-border); }
.terminal__dpart { font-size: 11.5px; font-weight: 700; color: var(--p-text); margin: 12px 0 8px; }
.terminal__entry { position: relative; padding-left: 16px; }
.terminal__entry::before { content: ''; position: absolute; left: 3px; top: 12px; bottom: 0; width: 2px; background: var(--p-border); }
.terminal__entry::after { content: ''; position: absolute; left: 0; top: 3px; width: 8px; height: 8px; border-radius: 999px; background: var(--p-primary); border: 2px solid #fff; }
.terminal__elabel { font-size: 11.5px; font-weight: 700; color: var(--p-text); }
.terminal__etime { font-size: 10px; font-weight: 500; color: var(--p-muted); margin: 1px 0 5px; }
.terminal__blabel { font-size: 10.5px; font-weight: 700; color: var(--p-text); margin: 9px 0 4px; }
.terminal__list { padding-left: 14px; list-style: disc; }
.terminal__list li { font-size: 9.5px; line-height: 1.5; color: var(--p-text); margin-bottom: 3px; }
/* the CTA is pressed, then the scrim and drawer follow — the "click Audit" moment */
.terminal.is-js .terminal__preview--audit .terminal__drawer,
.terminal.is-js .terminal__preview--audit .terminal__view::after { opacity: 0; }
.terminal.is-js .terminal__preview--audit.is-in .terminal__cta { animation: terminal-preview-click .5s .5s ease-in-out both; }
.terminal.is-js .terminal__preview--audit.is-in .terminal__view::after { animation: terminal-preview-scrim .5s 1s ease-out both; }
.terminal.is-js .terminal__preview--audit.is-in .terminal__drawer { animation: terminal-preview-drawer .7s 1s cubic-bezier(.22,.61,.36,1) both; }
/* press-and-release, with the focus ring the real button shows */
@keyframes terminal-preview-click {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(80,70,229,0); }
  45%  { transform: scale(.94);  box-shadow: 0 0 0 6px rgba(80,70,229,.30); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(80,70,229,0); }
}
@keyframes terminal-preview-scrim  { from { opacity: 0; } to { opacity: 1; } }
@keyframes terminal-preview-drawer { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .terminal.is-js .terminal__preview--audit .terminal__drawer,
  .terminal.is-js .terminal__preview--audit .terminal__view::after { opacity: 1; }
  .terminal.is-js .terminal__preview--audit.is-in .terminal__cta,
  .terminal.is-js .terminal__preview--audit.is-in .terminal__view::after,
  .terminal.is-js .terminal__preview--audit.is-in .terminal__drawer { animation: none; }
}
@media (max-width: 520px) {
  /* the comparison is the point of the prototype — the two flows stay side by side on a
     phone, so the app trades padding and type size for the width the pair needs */
  .terminal--browser .terminal__app { padding: 14px 12px 16px; }
  .terminal__h1 { font-size: 21px; }
  .terminal__tagline { font-size: 9.5px; }
  .terminal__methods { margin-top: 13px; padding: 11px 10px; }
  .terminal__mdesc { margin-bottom: 14px; }
  .terminal__row, .terminal__preview--audit .terminal__row { gap: 7px; }
  .terminal__card { padding: 11px 9px 10px; }
  .terminal__badge { left: 9px; font-size: 8px; padding: 3px 6px; }
  .terminal__ctitle { font-size: 10.5px; }
  .terminal__cdesc { font-size: 9px; line-height: 1.45; }
  .terminal__cta { margin-top: 13px; }
  .terminal__view { display: block; }
  /* the record drawer holds a whole audit trail and is far taller than a phone window —
     scroll it instead of clipping it, and drop the fade that would eat the last line */
  .terminal__drawer {
    width: 100%; border-left: none;
    padding-bottom: 14px;
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: none; mask-image: none;
  }
}

/* animated mode (JS only) — lines fade in one by one, caret shows while typing */
/* display:none, not just opacity:0 — an unrevealed line must take no space, or the
   auto-scroll follows the (invisible) prototype block and pushes the log out of view */
.terminal.is-js .terminal__line { display: none; opacity: 0; }
.terminal.is-js .terminal__line.is-in { display: block; animation: terminal-in .5s ease-out both; }
/* the preview is a flex column, not a block — must come after the rule above, same specificity */
.terminal.is-js .terminal__preview.is-in { display: flex; }
.terminal.is-js .terminal__cmd.is-typing .terminal__type { border-right-color: var(--terminal-purple-lo); animation: terminal-caret 1s steps(1) infinite; }
@keyframes terminal-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes terminal-caret { 50% { border-right-color: transparent; } }
@media (prefers-reduced-motion: reduce) {
  .terminal.is-js .terminal__line { display: block; opacity: 1; }
  .terminal.is-js .terminal__line.is-in { animation: none; }
  .terminal.is-js .terminal__cmd.is-typing .terminal__type { animation: none; }
}

/* heading above the step list — kept in one grid cell with it */
.tsks__head { margin-bottom: 18px; }
/* h3 + body paragraph, typeset like a homepage .feature-col: the title takes
   --fs-h3 from base.css, the description sits one step down on --fs-body */
.tsks__title { font-weight: 700; color: var(--c-heading); margin-bottom: 7px; }
.tsks__desc { font-size: var(--fs-body); color: var(--c-text); }

.tsk { display: grid; gap: 10px; }
/* borderless card on the standard shadow; hover tints it the same lavender as the nav menu */
.tsk__item { background: #fff; border-radius: var(--r-card); box-shadow: var(--shadow-card); transition: background var(--ease); }
.tsk__item:hover { background: var(--surface-band); }
/* the number chip is lavender too — flip it white on hover so it keeps its shape */
.tsk__item:hover .tsk__num { background: #fff; color: var(--c-primary); }
.tsk__item:hover .tsk__btn { color: var(--c-primary); }
/* active is carried by colour alone — indigo title, filled number */
.tsk__item.is-active .tsk__btn { color: var(--c-primary); }
.tsk__btn { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 14px 16px; font-family: inherit; font-size: var(--fs-body); font-weight: 700; color: var(--c-heading); line-height: 1.3; }
/* idle number reads as ink like the title — indigo is reserved for hover and the running task */
.tsk__num { flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--surface-band); color: var(--c-heading); font-size: 12.5px; font-weight: 800; display: grid; place-items: center; transition: background var(--ease), color var(--ease); }
.tsk__item.is-active .tsk__num { background: var(--c-primary); color: #fff; }
.tsk__subs { display: grid; gap: 7px; padding: 0 16px 15px 54px; }
/* the optional step carries no number, so its sub-line aligns to the title instead */
.tsk__item--opt .tsk__subs { padding-left: 16px; }
/* the sub-line sits one step under its title, on the page's small body size */
.tsk__subs li { display: flex; align-items: flex-start; gap: 9px; font-size: var(--fs-sm); line-height: 1.45; color: var(--c-text); transition: color var(--ease); }
.tsk__tick { flex: none; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%; border: 1.5px solid var(--c-border); display: grid; place-items: center; color: transparent; transition: background var(--ease), border-color var(--ease), color var(--ease); }
.tsk__tick svg { width: 9px; height: 9px; }
.tsk__subs li.is-done { color: var(--c-text-strong); }
.tsk__subs li.is-done .tsk__tick { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }

/* ============================================================
   AUTONOMOUS RUN (produktova page, #autonomous)
   two task-sized cards — the brief in, the result out — with one
   scrollable terminal between them carrying the whole reasoning
   trail of the long-horizon run. Driven by main.js.
   ============================================================ */
/* --arun-gap lives here, not on .arun__outs: the fork is a sibling of the grid and has to
   read the same gap to put its arms on the card centres */
.arun { --arun-gap: 20px; max-width: 900px; margin: clamp(32px, 4vw, 48px) auto 0; }

/* ---- the cards: same card as a task in the list above ---- */
.arun__card { background: #fff; border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.arun__ctitle { padding: 14px 16px 0; font-size: var(--fs-body); font-weight: 700; color: var(--c-heading); line-height: 1.3; }
.arun__cdesc { padding: 6px 16px 15px; font-size: var(--fs-sm); line-height: 1.45; color: var(--c-text); }
/* the brief is one short statement — it reads better as a centred plaque than as a
   full-width bar, and it puts the stem under the middle of the run */
.arun__card--in { max-width: 480px; margin-inline: auto; text-align: center; }

/* ---- the run's own window: the same terminal, in the page's light palette,
       scrollable and never cleared. .terminal reads its colours from one variable
       block, so a light theme is mostly a matter of restating it. ---- */
.arun__terminal {
  --terminal-bg-a:      #ffffff;
  --terminal-bg-b:      #f4f5ff;
  --terminal-hairline:  var(--c-border);
  --terminal-text:      var(--c-text-strong);   /* output = ink */
  --terminal-text-dim:  var(--c-text);
  --terminal-purple:    var(--c-primary);       /* the typed command */
  --terminal-purple-lo: var(--c-primary);       /* prompt glyph + caret */
  --terminal-ok:        #009966;                /* the green that reads on white */
  aspect-ratio: 16 / 9;
  box-shadow: var(--shadow-card);
}
/* the handful of places the dark window hard-codes white */
.arun__terminal .terminal__bar { background: var(--surface-band-50); }
.arun__terminal .terminal__strong { color: var(--c-heading); }
/* on white, the dark window's faintest ink disappears — the timings keep a little more
   of it than the purely decorative tree connectors */
.arun__terminal .terminal__ms { color: rgba(80,70,229,.5); }
.arun__terminal .terminal__tree { color: var(--c-primary-soft); }
/* elapsed time of the unattended run, counted up in the title bar */
.arun__elapsed { flex: none; font-family: var(--font-mono); font-size: 11.5px; color: var(--c-primary); background: var(--surface-band); border-radius: 5px; padding: 3px 10px; font-variant-numeric: tabular-nums; }
/* how sure the run is that it moves the goal — climbs as evidence lands and audits pass.
   Same chip as the clock, but the label stays quiet and only the number carries weight. */
.arun__conf { margin-left: auto; flex: none; font-family: var(--font-mono); font-size: 11.5px; color: var(--c-text); background: var(--surface-band-50); border: 1px solid var(--c-border); border-radius: 5px; padding: 2px 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.arun__conf b { color: var(--c-primary); font-weight: 700; }
/* the whole trail stays in the buffer, so this one shows its scrollbar — you can read back */
.arun__terminal .terminal__body { scrollbar-width: thin; scrollbar-color: rgba(80,70,229,.3) transparent; }
.arun__terminal .terminal__body::-webkit-scrollbar { display: block; width: 9px; }
.arun__terminal .terminal__body::-webkit-scrollbar-track { background: transparent; }
.arun__terminal .terminal__body::-webkit-scrollbar-thumb { background: rgba(80,70,229,.28); border-radius: 5px; border: 3px solid transparent; background-clip: padding-box; }
/* ---- the session, laid out the way a Claude transcript is: the instruction in its
       own box, then a rail of events — what it thought, what it called, the subagents
       it put on the work. The rail is drawn on the wrapper, so it grows exactly as
       far as the lines revealed so far. ---- */
.arun__terminal .terminal__cmd { margin-bottom: 18px; }
.arun__terminal .tl { position: relative; padding-left: 22px; }
/* --c-border is made for white cards and vanishes on this window — the rail needs indigo */
.arun__terminal .tl::before { content: ""; position: absolute; left: 4px; top: 10px; bottom: 10px; width: 1px; background: rgba(80,70,229,.2); }

/* one event: a dot on the rail, a bold verb, a dim argument */
.arun__terminal .tl__ev { position: relative; margin-top: 14px; white-space: normal; color: var(--c-text-strong); }
.arun__terminal .tl__ev:first-child { margin-top: 0; }
.arun__terminal .tl__ev::before { content: ""; position: absolute; left: -22px; top: .58em; width: 9px; height: 9px; border-radius: 50%; background: var(--terminal-ok); }
.arun__terminal .tl__verb { font-weight: 700; color: var(--c-heading); }
.arun__terminal .tl__arg { color: var(--terminal-text-dim); }
/* a thought is not a tool call — brand-purple dot, grey text, no verb of its own */
.arun__terminal .tl__ev--think { color: var(--terminal-text-dim); }
.arun__terminal .tl__ev--think::before { background: var(--c-primary); }
.arun__terminal .tl__ev--end::before { background: var(--c-primary); }
/* the reasoning under a thought, and the results under a call */
.arun__terminal .tl__note { white-space: normal; color: var(--terminal-text-dim); padding-left: 1px; }
.arun__terminal .tl__res { position: relative; white-space: normal; color: var(--terminal-text-dim); padding-left: 22px; }
/* every result row under a call carries the hook, so a wrapped line still reads as
   output rather than as a new statement.
   Set in ::before rather than typed, so the hook never drifts when a line wraps.
   └ (U+2514), not ⎿ — the latter has no glyph in the mono stack and lands as a stray L. */
.arun__terminal .tl__res::before, .arun__terminal .tl__run::before { content: "└"; position: absolute; left: 3px; color: var(--c-primary-soft); }
/* the pass counter on an audit loop */
.arun__terminal .tl__loop { color: var(--c-primary); font-weight: 600; }
.arun__terminal .tl__loop::after { content: " · "; color: var(--terminal-text-dim); font-weight: 400; }

/* ---- spawned agents, as the skill itself prints them: Task(name) over a Running… line ---- */
.arun__terminal .tl__agent { margin-top: 12px; }
.arun__terminal .tl__sub { color: var(--c-primary); }
.arun__terminal .tl__run { position: relative; white-space: normal; padding-left: 22px; color: var(--c-text-strong); }
.arun__terminal .tl__pt { color: var(--c-primary); }   /* the "still working" dot, in brand purple */
/* an agent stops running the moment its block reports — the dot goes green and the
   label says so, so a finished session never reads as if it were still working */
.arun__terminal .tl__run.is-done .tl__pt { color: var(--terminal-ok); }
.arun__terminal .tl__run.is-done .tl__state { color: var(--terminal-ok); font-weight: 600; }
.arun__terminal .tl__stat { color: var(--terminal-text-dim); }
/* timings and token counts trail their line and never compete with it */
.arun__terminal .tl__res .terminal__ms { margin-left: 1.2ch; }
/* the cards just stand there — the session is the only thing that moves */
.arun .terminal__disclaimer { margin-top: 18px; margin-bottom: 0; }

/* the brief drops into the window on the same line the results later fan out with */
.arun__stem { width: 2px; height: 22px; margin-inline: auto; background: var(--c-primary-soft); }

/* ---- the run forks into one of two results ----
   a stem straight out of the window, then a bracket whose two ends drop onto the
   middle of each card. Two equal columns with a gap put those centres at
   25% ∓ gap/4, so the arms meet the cards instead of missing them by a few px. */
.arun__outs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--arun-gap); }
.arun__fork { position: relative; height: 38px; }
.arun__fork::before { content: ""; position: absolute; left: 50%; top: 0; margin-left: -1px; width: 2px; height: 19px; background: var(--c-primary-soft); }
/* bottom:-1px, not a fixed height: the arms overlap the cards by a hair whatever the fork's
   height is, so the line reads as landing on both of them rather than stopping just above */
.arun__fork::after { content: ""; position: absolute; left: calc(25% - var(--arun-gap) / 4); right: calc(25% - var(--arun-gap) / 4); top: 18px; bottom: -1px; border: 2px solid var(--c-primary-soft); border-bottom: none; border-radius: 9px 9px 0 0; }

.arun__out { padding: 16px 18px 18px; }
/* same pill as the pricing page's "Coming soon" (.plan-card__soon), without its icon */
.arun__obadge { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: var(--r-pill); background: var(--surface-band); color: var(--c-primary); font-weight: 700; font-size: 13px; letter-spacing: .01em; }
.arun__otitle { margin-top: 11px; font-size: var(--fs-body); font-weight: 700; color: var(--c-heading); line-height: 1.3; }
.arun__odesc { margin-top: 6px; font-size: var(--fs-sm); line-height: 1.45; color: var(--c-text); }

/* hovering the window freezes the session — that is how you stop it to read */
.arun.is-paused *, .arun.is-paused *::before, .arun.is-paused *::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .arun *, .arun *::before, .arun *::after { animation: none !important; }
}

@media (max-width: 1024px) {
  /* .terminal drops its aspect ratio at this width and takes a fixed body height instead */
  .arun__terminal { aspect-ratio: auto; }
}
@media (max-width: 768px) {
  /* the full window title needs three lines here; the session says it anyway */
  .arun__namefull { display: none; }
  /* the bar runs out of room before the chips do — the number carries the meaning */
  .arun__conflabel { display: none; }
}
@media (max-width: 640px) {
  /* the two results stay side by side on a phone: the fork only reads as a fork if both
     arms land on a card. They pay for it with a tighter gap, less padding and smaller type. */
  .arun { --arun-gap: 12px; }
  .arun__fork { height: 30px; }
  .arun__fork::before { height: 15px; }
  .arun__fork::after { top: 14px; border-radius: 7px 7px 0 0; }
  .arun__out { padding: 13px 12px 15px; }
  .arun__obadge { padding: 4px 9px; font-size: 11px; }
  .arun__otitle { margin-top: 9px; font-size: var(--fs-sm); }
  .arun__odesc { margin-top: 5px; font-size: 13px; line-height: 1.4; }
}

/* ---- Work split (machine vs human) ---- */
.worksplit { max-width: 980px; margin: clamp(48px, 6vw, 80px) auto 0; padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--c-border); }
.worksplit__head { text-align: center; }
.worksplit__head h3 { font-size: 26px; }
.worksplit__head p { margin-top: 10px; color: var(--c-text); font-size: var(--fs-body); }
/* middle column holds the handshake badge; cards still stretch to equal height */
.worksplit__grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(16px, 2vw, 26px); margin-top: clamp(26px, 3vw, 38px); }
/* 🤝 rendered from the self-hosted Noto Color Emoji subset; system emoji fonts are the fallback */
.worksplit__link { align-self: center; justify-self: center; font-family: 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif; font-size: 34px; line-height: 1; }
.worksplit__col { background: #fff; border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: clamp(24px, 2.6vw, 32px); }
.worksplit__ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 16px; }
.worksplit__ico svg { width: 24px; height: 24px; }
.worksplit__ico--machine { background: var(--surface-band); color: var(--c-primary); }
.worksplit__ico--human { background: rgba(190,194,255,.34); color: var(--c-text-strong); }
.worksplit__col h4 { font-size: 20px; color: var(--c-heading); margin-bottom: 10px; }
.worksplit__col p { color: var(--c-text); font-size: var(--fs-body); line-height: 1.6; }

@media (max-width: 1024px) {
  .agentic__demo { grid-template-columns: 1fr; }
  /* full-width on one column, 4:3 would be absurdly tall — fall back to a fixed screen */
  .terminal { aspect-ratio: auto; }
  .terminal__body { min-height: 420px; }
}
@media (max-width: 768px) {
  .worksplit__grid { grid-template-columns: 1fr; }
  .terminal__body { font-size: 12px; padding-inline: 14px; }
  .cmd__code { font-size: 12.5px; }
  /* .btn is nowrap by default — keep long labels inside a phone viewport */
  .cmd__links .btn--link { white-space: normal; text-align: center; }
}

/* ===================== FAST / SLOW THINKING FLOW DIAGRAM (produktova page) ===================== */
.flow-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; margin-top: clamp(24px, 3vw, 44px); }
.flow-wrap { position: relative; width: 100%; aspect-ratio: 1680 / 734; overflow: hidden; }
.flow { position: absolute; top: 0; left: 0; width: 1680px; height: 734px; transform-origin: top left; transform: scale(var(--flow-scale, 1)); font-family: var(--font); color: #3e3255; }
.flow__triple, .flow__section { display: contents; }   /* desktop: no box — the cards inside keep their absolute positions */

.flow__panel { position: absolute; background: #fff; border: 1px solid rgba(62,50,85,.10); border-radius: 24px; }
.flow__title { position: absolute; margin: 0; font-weight: 700; font-size: 32px; line-height: 1; color: #0f172a; letter-spacing: -.01em; }

.flow__card { position: absolute; box-sizing: border-box; background: #fff; border: 1px solid rgba(62,50,85,.10); border-radius: 16px; box-shadow: 0 2px 8px rgba(62,50,85,.07); display: flex; align-items: center; padding: 0 15.5px; }
.flow__hub  { flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; padding: 0 19px; }
.flow__ctx  { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; }

.flow__row { display: flex; align-items: center; gap: 11px; width: 100%; }
.flow__chip { flex: 0 0 auto; width: 33.5px; height: 33.5px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.flow__chip--lg { width: 37.3px; height: 37.3px; }
.flow__chip svg { width: 18.6px; height: 18.6px; display: block; }
.flow__chip img { width: 18.6px; height: 18.6px; display: block; }
.flow__chip--violet { background: rgba(142,81,255,.12); color: #7f22fe; }
.flow__chip--blue   { background: rgba(129,134,255,.18); color: #5046e5; }
.flow__chip--slate  { background: rgba(144,161,185,.15); color: #64748b; }
.flow__chip--red    { background: rgba(255,99,126,.15); color: #ec003f; }
.flow__chip--green  { background: rgba(0,212,146,.15);  color: #009966; }
.flow__chip--azure  { background: rgba(0,188,255,.15);  color: #0084d1; }
.flow__chip--yellow { background: rgba(245,158,11,.22); color: #d97706; }

.flow__txt { min-width: 0; }
.flow__eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .33px; text-transform: uppercase; line-height: 1.35; }
.flow__ctitle  { font-size: 14.9px; font-weight: 700; line-height: 1.3; }
.flow__csub    { font-size: 14.9px; font-weight: 400; line-height: 1.3; }
.flow__cnote   { font-size: 14.9px; font-weight: 400; line-height: 1.3; margin-top: 7px; }
/* the diagram has its own ink (#3e3255); keep bold text on it instead of the global navy strong */
.flow strong   { color: inherit; }
.flow__logo    { height: 22px; width: auto; display: block; margin-bottom: 2px; }
.flow__hubname, .flow__ctxname { font-size: 14.9px; font-weight: 700; line-height: 18.6px; }
.flow__hubdesc { font-size: 14.9px; font-weight: 500; line-height: 22.4px; }
.flow__ctxdesc { font-size: 14.9px; font-weight: 400; line-height: 22.4px; }

.flow__links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.flow__link { fill: none; stroke: rgba(80,70,229,.35); stroke-width: 1.5; stroke-dasharray: 5 7; animation: flow-dash 1s linear infinite; }
@keyframes flow-dash { to { stroke-dashoffset: -24; } }
@keyframes flow-dash-v { to { background-position: 0 12px; } }
@keyframes flow-arrow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@keyframes flow-travel { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: 1; } 82% { opacity: 1; } 100% { transform: translateY(36px); opacity: 0; } }
.flow__dot { fill: #5046e5; }
.flow__bubble rect { fill: #fff; stroke: rgba(80,70,229,.45); stroke-width: 1; }
.flow__bubble text { fill: #5046e5; font-family: var(--font); font-size: 10px; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .flow__link, .flow__mpath { animation: none; }
  .flow__dot, .flow__bubble, .flow__mdot, .flow__mbubble { display: none; }
}

/* ---- Flow diagram: mobile — desktop-sized cards, centered; triplets as 2-over-1; curved connectors ---- */
@media (max-width: 1024px) {
  .flow-scroll { overflow: visible; }
  .flow-wrap { aspect-ratio: auto !important; width: 100%; max-width: 100%; height: auto; overflow: visible; }
  .flow { position: relative; width: 100%; max-width: 100%; height: auto; transform: none !important; display: flex; flex-direction: column; align-items: stretch; gap: 26px; }
  .flow__panel, .flow__links { display: none; }
  /* section box ("Fast thinking" / "Slow thinking") — transparent so connectors show through */
  .flow__section { display: flex; flex-direction: column; align-items: center; gap: 40px; width: 100%; padding: 18px 14px 30px; border: 1px solid rgba(62,50,85,.12); border-radius: 22px; position: relative; z-index: 1; box-sizing: border-box; }
  /* triplet cluster: two on top, one centered below */
  .flow__triple { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 40px 12px; width: min(500px, 100%); position: relative; z-index: 1; }
  /* tighter side padding than desktop — at the standard body size the triplet cards
     are narrow enough that 16px would break "enhancements" mid-word */
  .flow__card { position: relative; z-index: 1; left: auto !important; top: auto !important; height: auto !important; min-height: 0; padding: 14px 12px; box-sizing: border-box; }
  .flow__section > .flow__card { width: min(260px, 84%) !important; }          /* single nodes: hub, context, business impact */
  .flow__triple > .flow__card { width: calc(50% - 10px) !important; }  /* triplet cards: 2 per row, 3rd centered below */
  /* slow group keeps the same 2-over-1 shape as the fast group, so the context card can fan out to all three */
  .flow__title { position: relative; z-index: 1; left: auto !important; top: auto !important; width: 100%; text-align: left; font-size: 20px; margin: 6px 0 0; overflow-wrap: anywhere; }
  .flow__hub, .flow__ctx { padding: 14px 16px; }
  .flow__row { min-width: 0; gap: 8px; align-items: flex-start; flex-direction: column; }  /* mobile: icon chip on top of the text */
  .flow__chip, .flow__chip--lg { width: 30px; height: 30px; flex: 0 0 30px; }
  .flow__chip svg, .flow__chip img { width: 16px; height: 16px; }
  .flow__txt, .flow__hubdesc, .flow__ctxdesc, .flow__ctitle, .flow__csub, .flow__cnote, .flow__eyebrow { min-width: 0; overflow-wrap: anywhere; }
  /* no step-down on mobile: the card text reads at the standard small body size
     (same as .step-card p). Titles keep the desktop relationship — same size as
     their description, set apart by weight alone. */
  .flow__ctitle, .flow__hubname, .flow__ctxname { font-size: var(--fs-sm); }
  .flow__csub, .flow__cnote, .flow__hubdesc, .flow__ctxdesc { font-size: var(--fs-sm); line-height: 1.4; }
  .flow__cnote { margin-top: 6px; }
  .flow__eyebrow { font-size: 11px; }
  .flow__logo { max-width: 100%; height: 18px; }
  /* curved connector overlay — paths are injected by main.js and sit behind the cards */
  .flow__mobile-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; overflow: visible; pointer-events: none; }
  .flow__mpath { fill: none; stroke: rgba(80,70,229,.5); stroke-width: 2; stroke-dasharray: 5 7; stroke-linecap: round; animation: flow-dash 1s linear infinite; }
  .flow__mdot { fill: #5046e5; }
  .flow__mbubble rect { fill: #fff; stroke: rgba(80,70,229,.5); stroke-width: 1; }
  .flow__mbubble text { fill: #5046e5; font-family: var(--font); font-size: 10px; font-weight: 600; }
}