/* Two quiet type animations: Cobalt ERP Intelligence answering questions, and
   agentic workflows passing a task between agents to a person who decides.
   One sentence at a time, then the work itself, in one 820px column. Decorative
   motion (aria-hidden) with a text transcript beside it; reduced motion and
   no-script visitors get the first example as a still. */
.v3t-section { padding-block: 104px 92px; background: #fff; font-family: var(--v3-font); border-bottom: 1px solid #e7e9ed; }
.v3t-head { max-width: 760px; margin: 0 auto; text-align: center; }
.v3t-head .v3-eyebrow { margin-bottom: 18px !important; }
.home-v3 .v3t-head h2 { font-size: clamp(34px,3.5vw,52px); line-height: 1.12; font-weight: 500; letter-spacing: -.035em; text-wrap: balance; }
.v3t-head > p:not(.v3-eyebrow) { max-width: 600px; margin: 18px auto 0; color: #56616b; font-size: 17px; line-height: 1.75; }

.v3t-stage { position: relative; max-width: 1080px; height: clamp(520px,38vw,560px); margin: 30px auto 0; overflow: hidden; color: #182b3c; }
.v3t-scenes { position: absolute; inset: 0; }
.v3t-scene { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px 24px 56px; }
.v3t-scene :where(p) { margin: 0; }
/* Questions and tasks: the bar rests at the same height in every scene, and
   whatever comes back opens below it. */
.v3t-qa,.v3g-run { justify-content: flex-start; padding-top: clamp(28px,3.4vw,44px); }
/* Nothing is ever squeezed to fit; the stage is sized for the tallest scene. */
:is(.v3t-pill,.v3t-answer,.v3g-work) { flex-shrink: 0; }

/* The opening: the Cobalt mark's own loading cycle, played once by the stage clock. */
.v3t-cm { position: relative; display: grid; place-items: center; width: 150px; height: 150px; }
.v3t-cm-glow { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle,rgb(35 146 94 / 14%) 0%,rgb(35 146 94 / 5%) 48%,rgb(35 146 94 / 0%) 72%); }
.v3t-cm-stack { position: relative; width: 90px; height: 90px; }
.v3t-cm-stack svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform-origin: 50% 50%; }
.v3t-cm-ring { transform: rotate(-58deg); }
.v3t-cm-spark { opacity: 0; transform: scale(.3) rotate(-70deg); }

/* The close: the bar's logo, drawn as the mark, moves in to the centre and
   plays, then steps aside for the name, set on the same line; any sub-line
   sits beneath the name. Only ever shown by the animation. */
.v3t-finale { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0 16px 40px; visibility: hidden; pointer-events: none; }
.v3t-finale .v3t-cm { flex: 0 0 auto; width: 104px; height: 104px; margin: 0 -6px 0 -20px; }
.v3t-finale .v3t-cm-stack { width: 60px; height: 60px; }
.v3t-finale-words { display: grid; gap: 4px; min-width: 0; text-align: left; }
.v3t-finale-words { opacity: 0; }
.v3t-finale-name { color: #182b3c; font-size: clamp(26px,2.6vw,38px); font-weight: 600; line-height: 1.1; letter-spacing: -.03em; white-space: nowrap; }
.v3t-finale-sub { color: #56616b; font-size: clamp(15px,1.2vw,17px); line-height: 1.4; }

/* Sentences. */
.v3t-line { max-width: 860px; color: #182b3c; font-size: clamp(24px,2.3vw,34px); font-weight: 500; line-height: 1.28; letter-spacing: -.025em; text-align: center; text-wrap: balance; }
.v3t-line b { color: inherit; font-weight: 600; font-variant-numeric: tabular-nums; }
.v3t-line + .v3t-line { margin-top: -4px; }
.v3t-accent { color: #0d5b45; }
.v3t-line .v3t-key { color: #0d5b45; font-style: normal; }
.v3t-w { display: inline-block; }
.v3t-brand { gap: 14px; }
.v3t-brand-mark { display: block; width: 40px; height: 40px; }
.v3t-brand-name { color: #182b3c; font-size: clamp(30px,3vw,42px); font-weight: 600; line-height: 1.1; letter-spacing: -.03em; }
.v3t-brand-sub { color: #56616b; font-size: clamp(15px,1.2vw,17px); line-height: 1.5; }
.v3t-lockup { flex-direction: row; gap: 16px; }
.v3t-lockup img { display: block; width: 40px; height: 40px; }
.v3t-lockup span { color: #182b3c; font-size: clamp(24px,2.2vw,32px); font-weight: 600; letter-spacing: -.03em; }

/* The question bar, as the product's composer draws it. */
.v3t-pill { display: flex; align-items: center; gap: 12px; width: min(820px,100%); min-height: 54px; padding: 8px 8px 8px 14px; border: 1px solid #dcdfdd; border-radius: 4px; background: #fff; box-shadow: 0 1px 2px rgb(16 24 20 / 5%), 0 18px 36px -30px rgb(16 24 20 / 35%); }
.v3t-pill-mark { display: block; flex: 0 0 22px; width: 22px; height: 22px; }
.v3t-field { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; color: #182b3c; font-size: clamp(15px,1.25vw,17px); line-height: 1.4; white-space: nowrap; }
/* The hint is greyed well back from the words being typed. */
.v3t-placeholder { color: #8e9499; }
.v3t-caret + .v3t-placeholder { margin-left: 1px; }
.v3t-typed { overflow: hidden; text-overflow: ellipsis; }
.v3t-caret { flex: 0 0 1.5px; width: 1.5px; height: 1.2em; margin-left: 1px; background: #182b3c; opacity: 0; }
.v3t-send { display: grid; place-items: center; flex: 0 0 34px; height: 34px; border-radius: 3px; background: #f0f2f1; transition: background-color .25s ease; }
.v3t-send svg { width: 17px; height: 17px; fill: none; stroke: #5b666d; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: stroke .25s ease; }
.v3t-send.is-ready { background: #0d5b45; }
.v3t-send.is-ready svg { stroke: #fff; }
.is-typing .v3t-caret { opacity: 1; animation: v3t-blink 1.1s steps(1) infinite; }
@keyframes v3t-blink { 50% { opacity: 0; } }

/* The answer: one card. Who answered and from what, the answer, the figures
   behind it, and the recommended next step. */
.v3t-answer { width: min(820px,100%); padding: 16px 20px; overflow: hidden; border: 1px solid #dfe6e2; border-radius: 4px; background: #fff; text-align: left; box-shadow: 0 1px 2px rgb(16 24 20 / 4%), 0 24px 48px -40px rgb(16 24 20 / 30%); }
.v3t-answer-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #5b666d; font-size: 12px; line-height: 1.4; }
.v3t-answer-head > span:last-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.v3t-status { display: grid; justify-items: end; min-width: 0; }
.v3t-status > span { grid-area: 1 / 1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.v3t-reading { opacity: 0; background-image: linear-gradient(100deg, #5b666d 42%, #c3d3cb 50%, #5b666d 58%); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
.v3t-from { display: inline-flex; align-items: center; gap: 7px; color: #182b3c; font-weight: 700; white-space: nowrap; }
.v3t-from img { display: block; width: 16px; height: 16px; }
.v3t-callout { margin-top: 10px !important; color: #3c4a55; font-size: clamp(15px,1.25vw,16.5px); line-height: 1.55; }
.v3t-callout strong { color: #182b3c; font-weight: 650; }
/* A little colour, kept quiet: a tinted band for who answered, the lead in the
   answer's tone, markers that tie rows to their source, and the
   recommendation set apart. */
.v3t-answer > .v3t-answer-head { margin: -16px -20px 0; padding: 10px 20px; border-bottom: 1px solid #e3ebe7; background: linear-gradient(90deg, #edf6f1 0%, #f1f4fa 100%); }
.v3t-dot { display: inline-block; flex: 0 0 auto; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: currentColor; vertical-align: 1px; }
.v3t-tone-amber .v3t-callout strong { color: #8a5a12; }
.v3t-tone-blue .v3t-callout strong { color: #2b5298; }
.v3t-tone-green .v3t-callout strong { color: #0d5b45; }
.v3t-row .v3t-dot { width: 7px; height: 7px; }
.v3t-dot.is-green { background: #12805c; }
.v3t-dot.is-blue { background: #4a6fb8; }
.v3t-src { display: inline-flex; align-items: center; gap: 7px; }
.v3t-src .ms { font-size: 16px; }
.v3t-src.is-green .ms { color: #12805c; }
.v3t-src.is-blue .ms { color: #4a6fb8; }
.v3t-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.v3t-av { display: grid; place-items: center; flex: 0 0 28px; height: 28px; border-radius: 4px; font-size: 10px; font-style: normal; font-weight: 700; letter-spacing: .02em; }
.v3t-av.is-amber { background: #fbf0dc; color: #8a5a12; }
.v3t-av.is-blue { background: #e6eef8; color: #2b5298; }
.v3t-av.is-green { background: #e2f1ea; color: #0d5b45; }
.v3t-code { white-space: nowrap; }
.v3t-table { margin-top: 14px; }
.v3t-row { display: grid; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid #f0f1f0; color: #24343f; font-size: 13.5px; line-height: 1.35; font-variant-numeric: tabular-nums; }
.v3t-row small { display: block; margin-top: 2px; color: #5b666d; font: 500 11.5px/1.3 "JetBrains Mono", ui-monospace, monospace; }
.v3t-row-head { margin-inline: -8px; padding: 8px; border-radius: 3px; background: #f5f8f6; color: #5b666d; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.v3t-row-key > span:first-child { color: #182b3c; font-weight: 650; }
.v3t-cols-delivery { grid-template-columns: minmax(0,1.1fr) 64px minmax(0,1.5fr); }
.v3t-cols-delivery > span:nth-child(2) { font-weight: 600; text-align: right; }
.v3t-cols-delivery > span:nth-child(3) { padding-left: 24px; }
.v3t-cols-invoices { grid-template-columns: minmax(0,1.45fr) minmax(0,1.25fr) 84px 72px; }
.v3t-cols-invoices > span:nth-child(3),.v3t-cols-invoices > span:nth-child(4) { text-align: right; }
.v3t-chip { display: inline-block; padding: 2px 7px; border-radius: 3px; font-size: 11.5px; font-style: normal; font-weight: 600; }
.v3t-chip-hold { background: #fbf0dc; color: #8a5a12; }
.v3t-chip-review { background: #e6eef8; color: #2b5298; }
.v3t-chip-ready { background: #e2f1ea; color: #0d5b45; }
.v3t-next { display: flex; align-items: baseline; gap: 10px; margin-top: 14px !important; padding: 9px 12px; border-radius: 4px; background: linear-gradient(90deg, #edf6f1 0%, #f1f4fa 100%); color: #24343f; font-size: 13.5px; line-height: 1.5; }
.v3t-next > span { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; color: #0d5b45; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.v3t-next > span .ms { font-size: 14px; letter-spacing: 0; }

/* The cash chart: six weeks against the buffer. */
.v3t-chart { --plot: 128px; margin-top: 14px; }
.v3t-chart-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 22px !important; color: #5b666d; font-size: 11.5px; }
.v3t-legend { display: inline-flex; align-items: center; gap: 7px; }
.v3t-legend i { width: 18px; border-top: 1px dashed #8f9aa0; }
.v3t-plot { position: relative; display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); align-items: end; gap: 28px; height: var(--plot); }
.v3t-buffer { position: absolute; left: 0; right: 0; bottom: calc(var(--plot) * .222); z-index: 1; border-top: 1px dashed #8f9aa0; }
.v3t-bar { position: relative; min-width: 0; height: calc(var(--v) * 100%); }
.v3t-bar::before { content: ""; position: absolute; inset: 0; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, #9fd0ba 0%, #d2eadf 100%); transform: scaleY(var(--g,1)); transform-origin: 50% 100%; }
.v3t-bar b { position: absolute; left: 50%; bottom: calc(100% + 5px); transform: translateX(-50%); color: #3c4a55; font-size: 12px; font-weight: 600; opacity: var(--g,1); }
.v3t-bar-low::before { background: linear-gradient(180deg, #e3b363 0%, #f3dcb3 100%); }
.v3t-bar-low b { color: #8a5a12; }
.v3t-h148 { --v: .822; }
.v3t-h131 { --v: .728; }
.v3t-h60 { --v: .333; }
.v3t-h112 { --v: .622; }
.v3t-h139 { --v: .772; }
.v3t-h171 { --v: .95; }
.v3t-axis { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 28px; padding-top: 7px; border-top: 1px solid #dfe3e1; }
.v3t-axis em { color: #5b666d; font-size: 11px; font-style: normal; text-align: center; }

.v3t-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.v3t-toggle { position: absolute; right: 0; bottom: 0; z-index: 2; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 3px; background: #fff; color: #4f5b62; box-shadow: inset 0 0 0 1px #dedede; cursor: pointer; }
.v3t-toggle svg { width: 15px; height: 15px; }
.v3t-icon-pause path { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.v3t-icon-play path { fill: currentColor; }
.v3t-toggle:hover { color: #1f2f3b; box-shadow: inset 0 0 0 1px #b9b9b9; }
.v3t-toggle:focus-visible { outline: 3px solid #12805c; outline-offset: 3px; }
.v3t-stage:not([data-state="paused"]) .v3t-icon-play,.v3t-stage[data-state="paused"] .v3t-icon-pause { display: none; }
.v3t-foot { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 20px; text-align: center; }
.v3t-foot .v3-text-link { color: #0d5b45; font-size: 15px; }
.v3t-note { color: #5b666d; font-size: 12px; line-height: 1.6; }

/* The still: the first example, finished, nothing moving. */
.v3t-stage[data-state="static"] { height: auto; margin-top: 36px; overflow: visible; }
.v3t-stage[data-state="static"] :is(.v3t-scenes,.v3t-scene) { position: relative; padding: 0; }
.v3t-stage[data-state="static"] .v3t-scene:not(:first-child) { display: none; }
.v3t-stage[data-state="static"] :is(.v3t-placeholder,.v3t-caret) { display: none; }
.v3t-stage[data-state="static"] .v3t-scene:first-child .v3t-send { background: #0d5b45; }
.v3t-stage[data-state="static"] .v3t-scene:first-child .v3t-send svg { stroke: #fff; }
/* The animation: script shows one scene at a time and paints its frames. */
.v3t-stage:not([data-state="static"]) .v3t-scene { visibility: hidden; }
.v3t-stage:not([data-state="static"]) .v3t-scene.is-on { visibility: visible; }
.v3t-stage[data-state="paused"] .v3t-caret { animation-play-state: paused; }

@media (max-width: 900px) {
  .v3t-section { padding-block: 76px 68px; }
  .v3t-stage { height: 520px; margin-top: 24px; }
  .v3t-scene { padding: 16px 8px 52px; }
  .v3t-plot,.v3t-axis { gap: 18px; }
}
@media (max-width: 600px) {
  .v3t-head > p:not(.v3-eyebrow) { font-size: 16px; }
  .v3t-stage { height: 620px; }
  .v3t-scene { gap: 12px; padding: 12px 0 52px; }
  .v3t-pill { align-items: start; min-height: 52px; padding: 8px 8px 8px 12px; gap: 10px; }
  .v3t-pill-mark { margin-top: 8px; }
  .v3t-field { align-self: center; font-size: 16px; white-space: normal; }
  .v3t-typed { overflow: visible; }
  .v3t-answer { padding: 14px 14px 12px; }
  .v3t-answer > .v3t-answer-head { margin: -14px -14px 0; padding-inline: 14px; }
  .v3t-av { flex-basis: 24px; height: 24px; }
  .v3t-answer-head > span:last-child { display: none; }
  .v3t-row { gap: 10px; font-size: 13px; }
  .v3t-cols-delivery { grid-template-columns: minmax(0,1fr) 40px minmax(0,1.2fr); }
  .v3t-cols-delivery > span:nth-child(3) { padding-left: 8px; }
  .v3t-cols-invoices { grid-template-columns: minmax(0,1.3fr) 66px 62px; }
  .v3t-cols-invoices > span:nth-child(2) { display: none; }
  .v3t-chip { padding-inline: 6px; font-size: 11px; }
  .v3t-callout { font-size: 15px; }
  .v3t-next { font-size: 13px; }
  .v3t-chart { --plot: 112px; }
  .v3t-plot,.v3t-axis { gap: 10px; }
  .v3t-bar b { font-size: 11px; }
}
@media (max-width: 420px) {
  .v3t-finale .v3t-cm { width: 84px; height: 84px; margin: 0 -8px 0 -16px; }
  .v3t-finale .v3t-cm-stack { width: 46px; height: 46px; }
  .v3t-finale-name { font-size: 22px; }
}
@media (max-width: 360px) {
  .v3t-finale-name { font-size: 19px; }
  .v3t-line { font-size: 23px; }
  .v3t-cols-delivery { grid-template-columns: minmax(0,1fr) 34px minmax(0,1.1fr); }
  .v3t-row { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .v3t-section * { animation: none !important; transition: none !important; }
}

/* Agentic workflows: agents take the task on, one after another or several at
   once, then fold away while the finished draft opens for a person to decide. */
.v3g-section { border-top: 1px solid #e7e9ed; }
.v3g-hl { position: relative; z-index: 0; display: inline-block; padding: 0 .08em; color: #0d5b45; }
.v3g-hl::before { content: ""; position: absolute; inset: .1em -.06em .02em; z-index: -1; border-radius: .05em; background: #d9efe4; transform: scaleX(var(--hl,1)); transform-origin: 0 50%; }
.v3g-brand .v3t-brand-name { color: #182b3c; }
.v3g-lockup .v3g-hl { padding-inline: .1em; }

.v3g-work { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); align-items: start; gap: 14px; width: min(820px,100%); text-align: left; }
.v3g-plan,.v3g-draft { border: 1px solid #e1e5e3; border-radius: 4px; background: #fff; box-shadow: 0 1px 2px rgb(16 24 20 / 4%), 0 24px 48px -40px rgb(16 24 20 / 30%); }
.v3g-plan { position: relative; z-index: 1; padding: 14px 16px 10px; overflow: hidden; }
.v3g-plan-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 11px; border-bottom: 1px solid #eef1ef; }
.v3g-draft-head { display: flex; align-items: center; gap: 12px; }
.v3g-plan-head > span { color: #182b3c; font-size: 13px; font-weight: 650; }
.v3g-state { display: inline-grid; grid-template-columns: auto auto; align-items: center; justify-items: end; column-gap: 7px; color: #5b666d; font-size: 12px; font-style: normal; font-weight: 600; }
.v3g-state > span { grid-area: 1 / 2; }
.v3g-end-label { color: #0d5b45; opacity: 0; }
.v3g-state.is-complete .v3g-run-label { opacity: 0; }
.v3g-state.is-complete .v3g-end-label { opacity: 1; }
.v3g-state i { width: 7px; height: 7px; border-radius: 50%; background: #12805c; }
.v3g-steps { display: grid; grid-template-columns: minmax(0,1fr); margin: 8px 0 0; padding: 0; list-style: none; }
.v3g-step { position: relative; display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: center; gap: 13px; padding: 9px 0; }
/* Every agent has its own colour, carried by its icon wherever it appears. */
.is-green { --fg: #0d5b45; --tint: #e3f1ea; --line: #bfdfcf; --ring: 18 128 92; }
.is-blue { --fg: #2b5298; --tint: #e7eef9; --line: #c5d5ef; --ring: 74 111 184; }
.is-violet { --fg: #5d47a0; --tint: #efeafb; --line: #d8cef2; --ring: 122 98 196; }
.is-amber { --fg: #8a5a12; --tint: #fcf1dd; --line: #edd5a8; --ring: 197 138 29; }
.is-teal { --fg: #0e6874; --tint: #e1f2f4; --line: #b9dfe4; --ring: 20 132 146; }
.v3g-avatar { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--fg);
  box-shadow: 0 0 0 calc(var(--pulse, 0) * 5px) rgb(var(--ring) / calc((1 - var(--pulse, 0)) * .24)); }
.v3g-avatar::before { content: ""; position: absolute; inset: 0; border-radius: 3px; background: var(--tint); opacity: var(--done, 1); }
.v3g-avatar .ms { position: relative; }
.v3g-avatar .ms { font-size: 18px; }
.v3g-initials { font-size: 11px; font-weight: 750; letter-spacing: .02em; }
.v3g-check { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: #12805c; box-shadow: 0 0 0 2px #fff; opacity: 0; }
.v3g-check svg { width: 9px; height: 9px; fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.v3g-step-body { display: grid; gap: 2px; min-width: 0; }
.v3g-step-body b { color: #182b3c; font-size: 13.5px; font-weight: 650; line-height: 1.35; }
.v3g-status { display: grid; color: #5b666d; font-size: 12.5px; line-height: 1.4; }
.v3g-status > span { grid-area: 1 / 1; min-width: 0; }
.v3g-doing { opacity: 0; }
.v3g-done { color: #3c4a55; }
/* Working: a light passes along the status line (moved by the script). */
.v3g-step.is-working .v3g-doing { background-image: linear-gradient(100deg, #4f5b62 42%, #c3d3cb 50%, #4f5b62 58%); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
.v3g-step.is-done .v3g-check { opacity: 1; }
/* The window the agents hand over: down its side, the agents that prepared it
   and the person who decides; in it, the document. The side only appears in
   the animation; the still shows the plan and the document. */
.v3g-side { display: none; }
.v3g-tile { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 4px; background: var(--tint); color: var(--fg); }
.v3g-tile .ms { font-size: 18px; }
.v3g-tile .v3g-check { opacity: 1; }
.v3g-side-rule { width: 22px; height: 1px; background: #dfe4e1; }
.v3g-tile.v3g-person { --line: #dcb46a; --tint: #fff; --fg: #6e4a10; border-radius: 50%; }
.v3g-tile.v3g-person .v3g-check { opacity: 0; }
.v3g-stage:not([data-state="static"]) .v3g-work { display: block; position: relative; }
.v3g-stage:not([data-state="static"]) .v3g-plan { width: min(460px,100%); margin-inline: auto; transform-origin: 50% 0; }
.v3g-stage:not([data-state="static"]) .v3g-draft { position: absolute; top: 0; right: 0; left: 0; display: grid; grid-template-columns: 64px minmax(0,1fr); opacity: 0; }
.v3g-stage:not([data-state="static"]) .v3g-side { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px 0; border-right: 1px solid #eceeed; background: #f7f9f8; }
.v3g-stage:not([data-state="static"]) .v3g-tile { opacity: 0; }
.v3g-ghosts { display: none; }
.v3g-stage:not([data-state="static"]) .v3g-ghosts { display: block; position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.v3g-ghosts .v3g-tile { position: absolute; left: 0; top: 0; }
@media (min-width: 701px) {
  .v3g-stage:not([data-state="static"]) .v3g-fields { grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 28px; }
  .v3g-stage:not([data-state="static"]) .v3g-field:nth-last-child(-n+2) { border-bottom: 0; }
}

/* The handover: the finished draft, who prepared it, and the decision left to a person. */
.v3g-draft { overflow: hidden; }
.v3g-draft-head { justify-content: flex-start; padding: 14px 16px 12px; border-bottom: 1px solid #eceeed; }
.v3g-doc-ic { display: grid; place-items: center; flex: 0 0 34px; height: 34px; border-radius: 4px; background: #e8f3ee; color: #0d5b45; }
.v3g-doc-ic .ms { font-size: 18px; }
.v3g-doc-title { display: grid; flex: 1 1 auto; gap: 1px; min-width: 0; }
.v3g-doc-title b { overflow: hidden; color: #182b3c; font-size: 14px; font-weight: 650; white-space: nowrap; text-overflow: ellipsis; }
.v3g-num { color: #0d5b45; font-weight: 600; }
.v3g-doc-title small { overflow: hidden; color: #5b666d; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.v3g-chip { flex: 0 0 auto; align-self: start; padding: 2px 8px; border-radius: 3px; font-size: 11.5px; font-style: normal; font-weight: 650; white-space: nowrap; }
.v3g-chip.is-draft { background: #e6eef8; color: #2b5298; }
.v3g-chip.is-approved { background: #e2f1ea; color: #0d5b45; }
.v3g-fields { display: grid; padding: 2px 16px; }
.v3g-field { display: grid; grid-template-columns: 96px minmax(0,1fr); align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f2f3f2; font-size: 13px; line-height: 1.4; }
.v3g-field:last-child { border-bottom: 0; }
.v3g-field small { display: flex; align-items: center; gap: 6px; color: #5b666d; font-size: 12.5px; }
.v3g-field small .ms { color: #12805c; font-size: 16px; }
.v3g-field b { min-width: 0; color: #182b3c; font-weight: 600; font-variant-numeric: tabular-nums; }
.v3g-field.is-check { grid-template-columns: 118px minmax(0,1fr); }
.v3g-field.is-total b { font-size: 14px; }
.v3g-prov { display: flex; align-items: center; gap: 8px; padding: 9px 16px; border-top: 1px solid #eceeed; background: #fafbfa; color: #5b666d; font-size: 12px; }
.v3g-faces { display: flex; padding-left: 4px; }
.v3g-faces > span { display: grid; place-items: center; width: 22px; height: 22px; margin-left: -4px; border: 2px solid #fafbfa; border-radius: 4px; background: var(--tint); color: var(--fg); }
.v3g-faces .ms { font-size: 13px; }
.v3g-draft-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px 14px; border-top: 1px solid #eceeed; }
.v3g-wait { min-width: 0; color: #5b666d; font-size: 12.5px; line-height: 1.4; }
.v3g-button { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 5px; height: 32px; padding: 0 14px; border-radius: 3px; background: #12805c; color: #fff; font-size: 13px; font-weight: 650; }
.v3g-button svg { display: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.v3g-button.is-down { background: #0d5b45; }
.v3g-button.is-pressed { background: #e2f1ea; color: #0d5b45; }
.v3g-button.is-pressed svg { display: block; }

@media (max-width: 900px) {
  .v3g-stage { height: 560px; }
}
@media (max-width: 700px) {
  .v3g-stage { height: 660px; }
  .v3g-work { grid-template-columns: minmax(0,1fr); gap: 12px; }
  /* While it plays there is room for one card: the document takes the plan's place. */
  .v3g-stage:not([data-state="static"]) .v3g-plan { width: 100%; }
  .v3g-stage:not([data-state="static"]) .v3g-draft { grid-template-columns: minmax(0,1fr); }
  .v3g-stage:not([data-state="static"]) :is(.v3g-side,.v3g-ghosts) { display: none; }
}
@media (max-width: 360px) {
  .v3g-stage { height: 700px; }
  .v3g-field { grid-template-columns: 78px minmax(0,1fr); }
  .v3g-field.is-check { grid-template-columns: 104px minmax(0,1fr); }
}