/* Built around the work: ask Cobalt ERP Intelligence a question and read its
   answer top to bottom, as the panel in the product shows it: the answer, two
   KPIs, the records it read and the next actions, with the dock beside it. */
.v3-work-section { padding-block: 88px; background: #fff; border-bottom: 1px solid #e7e9ed; font-family: var(--v3-font); }
.v3-work-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,680px); align-items: start; gap: 72px; }
.v3-work-intro { position: sticky; top: 88px; display: grid; justify-items: start; }
.v3-work-intro .v3-eyebrow { margin-bottom: 18px !important; }
.home-v3 .v3-work-section h2 { font-family: var(--v3-font); font-size: clamp(34px,3.4vw,50px); line-height: 1.12; font-weight: 500; letter-spacing: -.035em; text-wrap: balance; }
.v3-work-intro > p:not(.v3-eyebrow) { max-width: 500px; margin-top: 20px; color: #56616b; font-size: 16px; line-height: 1.75; }
.v3-work-section .v3-example-note { margin-top: 22px; color: #5b666d; font-size: 12px; line-height: 1.6; }

:where(.v3-workbench,.v3-work-intro) :where(h3,p,ul,ol) { margin: 0; }
.v3-workbench i,.v3-workbench em { font-style: normal; }
.v3-workbench .mono { font-family: "JetBrains Mono", ui-monospace, monospace; }
.v3-workbench { min-width: 0; color: #1f2f3b; }

/* The questions: six choices in two columns. */
.v3-work-tabs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; width: min(100%,460px); margin-top: 30px; }
.v3-work-tabs button { display: flex; align-items: center; gap: 10px; min-width: 0; height: 44px; padding: 0 14px; border: 1px solid #e1e3e2; border-radius: 3px; background: #fff; color: #3c4a55; font: 600 13.5px/1.2 var(--v3-font); text-align: left; white-space: nowrap; cursor: pointer; transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.v3-work-tabs button > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.v3-work-tabs button .ms { flex: 0 0 auto; color: #5b666d; font-size: 18px; }
.v3-work-tabs button:hover { border-color: #c9d3ce; color: #182b3c; }
.v3-work-tabs button[aria-selected="true"] { border-color: #0d5b45; background: #f2f8f5; color: #0d5b45; box-shadow: inset 3px 0 #0d5b45; }
.v3-work-tabs button[aria-selected="true"] .ms { color: #0d5b45; }
.v3-work-tabs button:focus-visible { outline: 2px solid #12805c; outline-offset: 2px; }
/* Nine examples: in two columns the last one takes the whole row. */
.v3-work-tabs button:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* The window: the panel, and the dock beside it. */
.v3pw-window { display: grid; grid-template-columns: minmax(0,1fr) 76px; min-width: 0; border: 1px solid #dedede; border-radius: 4px; background: #f6faf8; overflow: hidden; box-shadow: 0 1px 2px rgb(0 0 0 / 4%), 0 36px 72px -52px rgb(0 0 0 / 30%); }
.v3pw-stage { min-width: 0; }
.v3-work-panel { display: block; height: 100%; }
.v3-work-panel:focus-visible { outline: 2px solid #12805c; outline-offset: -2px; }

/* The dock, as the product draws it: tiles with labels, the mark on top. */
.v3pw-dock { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 10px 0; border-left: 1px solid #dbe9e2; background: #f3f8f7; }
.v3pw-dock-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 66px; padding: 5px 0; border-radius: 3px; }
.v3pw-dock-tile { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #cde4dd; border-radius: 4px; background: #fff; color: #0d5b45; }
.v3pw-dock-tile .ms { font-size: 19px; }
.v3pw-dock-tile svg { width: 23px; height: 23px; fill: currentColor; }
.v3pw-dock-label { display: grid; justify-items: center; max-width: 64px; color: #1f2f3b; font-size: 10.5px; font-weight: 600; line-height: 1.2; text-align: center; }
.v3pw-dock-label kbd { margin-top: 2px; color: #5b666d; font: 500 10px/1.2 var(--v3-font); }
.v3pw-dock-item.is-brand { margin-bottom: 4px; }
.v3pw-dock-item:is(.is-brand,.is-active) .v3pw-dock-tile { border-color: #0d5b45; background: #0d5b45; color: #fff; box-shadow: 0 4px 14px rgb(13 91 69 / 32%); }
.v3pw-dock-item.is-active { background: rgb(13 91 69 / 9%); }
.v3pw-dock-item.is-active::before { content: ""; position: absolute; left: -5px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 2px 2px 0; background: #0d5b45; }
.v3pw-dock-item.is-active .v3pw-dock-label { font-weight: 700; }
.v3pw-dock-spring { flex: 1 1 auto; min-height: 10px; }

/* The Cobalt ERP Intelligence panel. */
.v3pw-ai { display: flex; flex-direction: column; height: 100%; min-width: 0; background: radial-gradient(120% 70% at 100% 0%, rgb(18 128 92 / 7%), transparent 60%), #f6faf8; }
.v3pw-ai-head { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid #dbe9e2; }
.v3pw-mark { display: block; flex: 0 0 26px; width: 26px; height: 26px; }
.v3pw-ai-head > span:not(.v3pw-head-acts) { display: grid; gap: 1px; min-width: 0; }
.v3pw-ai-head b { display: flex; align-items: center; gap: 8px; color: #182b3c; font-size: 14px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.v3pw-ai-head b > i { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border-radius: 3px; background: #e2f3ed; color: #0d5b45; font-size: 10px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.v3pw-ai-head b > i::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #12805c; }
.v3pw-ai-head small { overflow: hidden; color: #5b666d; font-size: 11.5px; white-space: nowrap; text-overflow: ellipsis; }
.v3pw-head-acts { display: flex; gap: 12px; margin-left: auto; color: #5b666d; }
.v3pw-head-acts .ms { font-size: 18px; }
.v3pw-ai-body { display: grid; flex: 1 1 auto; align-content: start; gap: 16px; padding: 18px; }
.v3pw-label { color: #5b666d; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* The exchange: the question on the right, the answer below it. */
.v3pw-turn { display: flex; gap: 10px; min-width: 0; }
.v3pw-turn.is-user { justify-content: flex-end; align-items: start; padding-left: 64px; }
.v3pw-turn.is-ai { align-items: start; padding-right: 12px; }
.v3pw-turn.is-user h3 { padding: 10px 14px; border: 1px solid #e1e6e3; border-radius: 4px; background: #fff; color: #182b3c; font-size: 14.5px; font-weight: 600; line-height: 1.45; letter-spacing: -.005em; }
.v3pw-me { display: grid; place-items: center; flex: 0 0 28px; height: 28px; margin-top: 4px; border-radius: 50%; background: #dcede6; color: #0d5b45; font-size: 10.5px; font-weight: 750; }
.v3pw-ai-mark { display: grid; place-items: center; flex: 0 0 28px; height: 28px; margin-top: 4px; border: 1px solid #d6e7de; border-radius: 50%; background: #fff; }
.v3pw-ai-mark img { display: block; width: 18px; height: 18px; }
.v3pw-reply { position: relative; flex: 1 1 auto; min-width: 0; padding: 10px 14px 12px; border: 1px solid #e1e6e3; border-radius: 4px; background: #fff; }
.v3-work-panel .v3pw-answer { color: #24343f; font-size: 14.5px; line-height: 1.6; }
.v3pw-code { white-space: nowrap; }
.v3pw-thinking { position: absolute; left: 14px; top: 12px; display: inline-flex; align-items: center; gap: 4px; color: #5b666d; font-size: 12.5px; opacity: 0; pointer-events: none; }
.v3pw-thinking i { width: 5px; height: 5px; border-radius: 50%; background: #12805c; }
.v3pw-thinking i:last-of-type { margin-right: 6px; }
.v3pw-mini { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 10px; height: 74px; margin-top: 12px; }
.v3pw-mini-col { display: grid; grid-template-rows: minmax(0,1fr) auto; gap: 5px; min-width: 0; }
.v3pw-mini-col > i { align-self: end; height: var(--h); border-radius: 2px 2px 0 0; background: #b9dccb; }
.v3pw-mini-col.is-now > i { background: #0d5b45; }
.v3pw-mini-col small { color: #5b666d; font-size: 11px; line-height: 1; text-align: center; }

/* A report asked for in plain English: the table, what can be done with it,
   and the query Cobalt wrote to build it. */
.v3pw-params { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.v3pw-params > span { padding: 2px 8px; border: 1px solid #dfe7e2; border-radius: 3px; background: #f4f8f6; color: #24343f; font-size: 11.5px; font-weight: 600; }
.v3pw-rep { display: grid; grid-template-columns: minmax(0,1fr); margin-top: 10px; border: 1px solid #e3e6e4; border-radius: 3px; overflow: hidden; }
.v3pw-rep-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 12px; border-bottom: 1px solid #e3e6e4; background: #f8f9f8; }
.v3pw-rep-title b { overflow: hidden; color: #182b3c; font-size: 12.5px; font-weight: 650; white-space: nowrap; text-overflow: ellipsis; }
.v3pw-rep-title em { flex: 0 0 auto; color: #5b666d; font-size: 11.5px; }
.v3pw-rep-row { display: grid; grid-template-columns: minmax(0,1.7fr) repeat(4,minmax(0,.8fr)); align-items: center; gap: 8px; padding: 6px 12px; border-bottom: 1px solid #f0f1f0; color: #24343f; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.v3pw-rep-row:last-child { border-bottom: 0; }
.v3pw-rep-row > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.v3pw-rep-row > span:not(:first-child) { text-align: right; }
.v3pw-rep-row > span:first-child { display: flex; align-items: center; gap: 2px; }
.v3pw-rep-row .ms { flex: 0 0 auto; margin-left: -4px; color: #5b666d; font-size: 16px; }
.v3pw-rep-row.is-head { padding-block: 6px; color: #5b666d; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.v3pw-rep-row:is(.is-open,.is-closed) { color: #182b3c; font-weight: 600; }
/* The drill-down: the lines under an open heading, indented. */
.v3pw-rep-row:is(.is-child,.is-focus) > span:first-child { padding-left: 16px; color: #3c4a55; }
.v3pw-rep-row:is(.is-child,.is-focus) { background: #fcfcfc; }
.v3pw-rep-row.is-focus { background: #fdf6ea; box-shadow: inset 2px 0 #c58a2a; }
.v3pw-rep-row.is-total { border-top: 1px solid #dfe3e1; background: #f7f8f7; color: #182b3c; font-weight: 650; }
.v3pw-rep-row .is-up { color: #0d5b45; font-weight: 600; }
.v3pw-rep-row .is-down { color: #9a3535; font-weight: 600; }
.v3pw-rep-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.v3pw-rep-acts > span { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px; border: 1px solid #e1e4e2; border-radius: 3px; background: #fff; color: #24343f; font-size: 12px; font-weight: 600; }
.v3pw-rep-acts > span:first-child { border-color: #0d5b45; background: #0d5b45; color: #fff; }
.v3pw-rep-acts .ms { font-size: 15px; }

/* What was sent with a request: a photo of a handwritten order, or an email
   passed on. Each sits above the message it came with. */
.v3pw-msg { display: grid; flex: 1 1 auto; grid-template-columns: minmax(0,1fr); justify-items: end; gap: 6px; min-width: 0; }
.v3pw-attach { display: grid; grid-template-columns: minmax(0,1fr); justify-self: stretch; justify-items: end; gap: 4px; min-width: 0; }
.v3pw-attach > small { color: #5b666d; font-size: 11px; }
.v3pw-photo { display: grid; place-items: center; width: 220px; max-width: 100%; height: 132px; border-radius: 4px; overflow: hidden; background: radial-gradient(120% 100% at 25% 15%, #d8d0bf, #a99d86); }
.v3pw-note { display: grid; align-content: start; gap: 2px; width: 82%; padding: 9px 12px 10px; overflow: hidden; background: repeating-linear-gradient(#fdfbf4 0 15px, #dfe5ee 15px 16px); box-shadow: 0 8px 16px -8px rgb(0 0 0 / 55%); color: #24407c; font: 400 12px/15px "Bradley Hand","Segoe Print","Ink Free","Noteworthy",cursive; transform: rotate(-3deg); }
.v3pw-note i { font-style: normal; white-space: nowrap; }
.v3pw-note i:first-child { font-weight: 700; }
.v3pw-mail { display: grid; gap: 3px; width: 320px; max-width: 100%; padding: 10px 12px; border: 1px solid #e1e6e3; border-radius: 4px; background: #f8faf9; text-align: left; }
.v3pw-mail-from { display: flex; align-items: center; gap: 6px; min-width: 0; color: #3c4a55; font-size: 12px; }
.v3pw-mail-from .ms { color: #2b5298; font-size: 15px; }
.v3pw-mail-from b { color: #182b3c; font-weight: 650; }
.v3pw-mail-from em { margin-left: auto; color: #5b666d; font-size: 11px; font-style: normal; white-space: nowrap; }
.v3pw-mail-subject { color: #182b3c; font-size: 12.5px; font-weight: 650; }
.v3pw-mail-body { color: #3c4a55; font-size: 12px; line-height: 1.5; }

/* A document drafted from what was sent: its lines, totals and anything that
   still needs a person. */
.v3pw-draft { display: grid; grid-template-columns: minmax(0,1fr); margin-top: 10px; border: 1px solid #e3e6e4; border-radius: 3px; overflow: hidden; }
.v3pw-draft-head { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid #e3e6e4; background: #f8f9f8; }
.v3pw-draft-ic { display: grid; place-items: center; flex: 0 0 28px; height: 28px; border-radius: 3px; background: #e6f1ec; color: #0d5b45; }
.v3pw-draft-ic .ms { font-size: 17px; }
.v3pw-draft-title { display: grid; flex: 1 1 auto; min-width: 0; }
.v3pw-draft-title > * { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.v3pw-draft-title b { color: #182b3c; font-size: 12.5px; font-weight: 650; }
.v3pw-draft-title small { color: #5b666d; font-size: 11.5px; }
.v3pw-draft-chip { flex: 0 0 auto; padding: 2px 7px; border-radius: 3px; background: #e2e9f6; color: #2b5298; font-size: 11px; font-weight: 650; white-space: nowrap; }
.v3pw-draft-chip.is-amber { background: #fbf0dc; color: #8a5a12; }
.v3pw-draft-row { display: grid; grid-template-columns: minmax(0,1fr) 40px 52px 70px; align-items: center; gap: 8px; padding: 7px 12px; border-bottom: 1px solid #f0f1f0; color: #24343f; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.v3pw-draft-row > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.v3pw-draft-row > span:not(:first-child) { text-align: right; }
.v3pw-draft-row > span:first-child { display: flex; align-items: center; gap: 8px; }
.v3pw-draft-row > span:first-child > span:not(.mono) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.v3pw-draft-row .mono { flex: 0 0 auto; color: #0d5b45; font-size: 11.5px; font-weight: 600; }
.v3pw-draft-row.is-head { padding-block: 6px; color: #5b666d; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.v3pw-draft-row.is-check { background: #fdf6ea; box-shadow: inset 2px 0 #c58a2a; }
.v3pw-check { display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto; margin-left: auto; padding: 1px 6px 1px 4px; border-radius: 3px; background: #fbe7c2; color: #7a4d0c; font-size: 11px; font-style: normal; font-weight: 650; }
.v3pw-check .ms { font-size: 13px; }
.v3pw-draft-total { display: flex; justify-content: space-between; gap: 12px; padding: 6px 12px; color: #3c4a55; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.v3pw-draft-total b { font-weight: 600; }
.v3pw-draft-total.is-grand { border-top: 1px solid #dfe3e1; background: #f7f8f7; color: #182b3c; font-weight: 650; }
.v3pw-draft-note { display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-top: 1px solid #f0f1f0; color: #3c4a55; font-size: 12px; }
.v3pw-draft-note .ms { color: #0d5b45; font-size: 15px; }

/* Two KPIs, each with the two things that moved it most. */
.v3pw-kpis { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.v3pw-kpi { --sc: #12805c; min-width: 0; padding: 12px 14px; border: 1px solid #dde7e2; border-radius: 4px; background: radial-gradient(120% 100% at 100% 0%, color-mix(in srgb, var(--sc) 8%, transparent), transparent 60%), #fff; }
.v3pw-kpi.is-attention { --sc: #b0731a; }
.v3pw-kpi.is-risk { --sc: #9a3535; }
.v3-workbench .v3pw-kpi-value { display: flex; align-items: baseline; gap: 7px; margin-top: 3px; }
.v3pw-kpi-value b { color: #182b3c; font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.v3pw-kpi-value span { color: #0d5b45; font-size: 12px; font-weight: 700; }
.v3pw-kpi.is-attention .v3pw-kpi-value span { color: #8a5a12; }
.v3pw-kpi.is-risk .v3pw-kpi-value span { color: #9a3535; }
.v3pw-bar { display: block; height: 4px; margin: 8px 0; border-radius: 2px; background: #e9eeeb; overflow: hidden; }
.v3pw-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--sc); transform-origin: left; }
.v3pw-kpi-why { overflow: hidden; color: #4f5b62; font-size: 11.5px; white-space: nowrap; text-overflow: ellipsis; }

/* The records it read, and what happens next. */
.v3pw-sect-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #5b666d; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.v3pw-sect-head > span { display: inline-flex; align-items: center; gap: 6px; }
.v3pw-sect-head .ms { font-size: 14px; }
.v3pw-sect-head em { color: #5b666d; font-size: 11.5px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.v3pw-docs { display: grid; gap: 6px; margin-top: 8px; padding: 0; list-style: none; }
.v3pw-doc { display: grid; grid-template-columns: 30px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid #e3e3e3; border-radius: 4px; background: #fff; }
.v3pw-doc-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 3px; }
.v3pw-doc-ic .ms { font-size: 16px; }
.v3pw-doc-ic.is-green { background: #e2f3ed; color: #0d5b45; }
.v3pw-doc-ic.is-blue { background: #e6eef8; color: #2b5298; }
.v3pw-doc-ic.is-amber { background: #fbf0dc; color: #8a5a12; }
.v3pw-doc-body { display: grid; min-width: 0; }
.v3pw-doc-body b { overflow: hidden; color: #1f2f3b; font-size: 12.5px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.v3pw-doc-body small { overflow: hidden; color: #5b666d; font-size: 11.5px; white-space: nowrap; text-overflow: ellipsis; }
.v3pw-read { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border: 1px solid #cfe3d9; border-radius: 3px; background: #f4faf7; color: #0d5b45; font-size: 11px; font-weight: 650; }
.v3pw-read .ms { font-size: 12px; }
.v3pw-opts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: 8px; padding: 0; list-style: none; }
.v3pw-opt { display: flex; align-items: center; gap: 8px; min-width: 0; height: 48px; padding: 0 12px; border: 1px solid #e1e4e2; border-radius: 4px; background: #fff; color: #182b3c; }
.v3pw-opt > .ms:first-child { flex: 0 0 auto; color: #0d5b45; font-size: 18px; }
.v3pw-opt b { flex: 1 1 auto; min-width: 0; overflow: hidden; font-size: 12.5px; font-weight: 650; white-space: nowrap; text-overflow: ellipsis; }
.v3pw-opt-go { flex: 0 0 auto; color: #5b666d; font-size: 16px; }
/* The recommended action leads, in the brand green. */
.v3pw-opt.is-primary { border-color: #0d5b45; background: #f4faf7; color: #0d5b45; }
.v3pw-opt.is-primary .v3pw-opt-go { color: #0d5b45; }
.v3pw-composer { padding: 12px 18px 14px; border-top: 1px solid #dbe9e2; }
.v3-workbench .v3pw-composer-input { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; padding: 7px 7px 7px 12px; border: 1px solid #cfe3d9; border-radius: 4px; background: #fff; color: #5b666d; font-size: 13px; }
.v3pw-composer-input > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.v3pw-composer-input > i { display: grid; flex: 0 0 auto; place-items: center; width: 28px; height: 28px; border-radius: 3px; background: #e2f3ed; color: #0d5b45; }
.v3pw-composer-input .ms { font-size: 17px; }

/* Answering: the question lands, Cobalt reads, then the answer and its
   evidence arrive in order, top to bottom. */
@keyframes pwRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pwFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pwBar { from { transform: scaleX(0); } to { transform: none; } }
@keyframes pwPop { 0% { opacity: 0; transform: scale(.6); } 70% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: none; } }
@keyframes pwThink { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pwDot { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.v3-work-panel.is-reading .v3pw-turn.is-user { animation: pwRise .45s cubic-bezier(.22,1,.36,1) both; }
.v3-work-panel.is-reading .v3pw-turn.is-ai { animation: pwRise .45s cubic-bezier(.22,1,.36,1) .3s both; }
.v3-work-panel.is-reading .v3pw-thinking { animation: pwThink .9s linear .35s both; }
.v3-work-panel.is-reading .v3pw-thinking i { animation: pwDot .6s ease-in-out .35s 2 both; }
.v3-work-panel.is-reading .v3pw-thinking i:nth-child(2) { animation-delay: .5s; }
.v3-work-panel.is-reading .v3pw-thinking i:nth-child(3) { animation-delay: .65s; }
.v3-work-panel.is-reading :is(.v3pw-answer,.v3pw-mini) { animation: pwFade .55s ease 1.2s both; }
.v3-work-panel.is-reading .v3pw-params { animation: pwFade .35s ease 1.25s both; }
.v3-work-panel.is-reading .v3pw-rep { animation: pwFade .3s ease 1.35s both; }
.v3-work-panel.is-reading .v3pw-rep-row { animation: pwFade .35s ease 1.45s both; }
.v3-work-panel.is-reading .v3pw-rep-title { animation: pwFade .35s ease 1.4s both; }
.v3-work-panel.is-reading .v3pw-rep-acts { animation: pwRise .45s cubic-bezier(.22,1,.36,1) 1.8s both; }
.v3-work-panel.is-reading .v3pw-draft { animation: pwFade .35s ease 1.35s both; }
.v3-work-panel.is-reading .v3pw-draft-row.is-check { animation: pwFade .35s ease 1.6s both; }
.v3-work-panel.is-reading .v3pw-kpi { animation: pwRise .6s cubic-bezier(.3,.06,.3,1) both; }
.v3-work-panel.is-reading .v3pw-kpi:nth-child(1) { animation-delay: 1.5s; }
.v3-work-panel.is-reading .v3pw-kpi:nth-child(2) { animation-delay: 1.6s; }
.v3-work-panel.is-reading .v3pw-bar > i { animation: pwBar .9s cubic-bezier(.22,1,.36,1) 1.75s both; }
.v3-work-panel.is-reading .v3pw-sect { animation: pwFade .4s ease both; }
.v3-work-panel.is-reading .v3pw-sect.is-records { animation-delay: 1.85s; }
.v3-work-panel.is-reading .v3pw-doc { animation: pwRise .45s cubic-bezier(.22,1,.36,1) both; }
.v3-work-panel.is-reading .v3pw-doc:nth-child(1) { animation-delay: 1.95s; }
.v3-work-panel.is-reading .v3pw-doc:nth-child(2) { animation-delay: 2.08s; }
.v3-work-panel.is-reading .v3pw-read { animation: pwPop .4s ease both; }
.v3-work-panel.is-reading .v3pw-doc:nth-child(1) .v3pw-read { animation-delay: 2.25s; }
.v3-work-panel.is-reading .v3pw-doc:nth-child(2) .v3pw-read { animation-delay: 2.38s; }
.v3-work-panel.is-reading .v3pw-sect.is-steps { animation-delay: 2.45s; }
.v3-work-panel.is-reading .v3pw-opt { animation: pwRise .45s cubic-bezier(.22,1,.36,1) both; }
.v3-work-panel.is-reading .v3pw-opt:nth-child(1) { animation-delay: 2.55s; }
.v3-work-panel.is-reading .v3pw-opt:nth-child(2) { animation-delay: 2.65s; }
.v3-work-panel.is-reading .v3pw-opt:nth-child(3) { animation-delay: 2.75s; }

/* Without script every question and answer stays readable, one after another. */
.home-v3:not(.v3-enhanced) .v3-work-panel + .v3-work-panel { border-top: 1px solid #dbe9e2; }

@media (min-width: 1344px) {
  .v3-work-tabs { grid-template-columns: repeat(3,minmax(0,1fr)); width: min(100%,600px); }
  .v3-work-tabs button:last-child:nth-child(odd) { grid-column: auto; }
}
@media (max-width: 1180px) {
  .v3-work-layout { grid-template-columns: minmax(0,1fr) minmax(0,600px); gap: 48px; }
}
@media (max-width: 1000px) {
  .v3-work-layout { grid-template-columns: minmax(0,1fr); gap: 32px; }
  .v3-work-intro { position: static; }
  .v3-work-intro > p:not(.v3-eyebrow) { max-width: 620px; }
  .v3-work-tabs { grid-template-columns: repeat(3,minmax(0,1fr)); width: min(100%,640px); }
  .v3-work-tabs button:last-child:nth-child(odd) { grid-column: auto; }
  .v3-workbench { width: min(100%,680px); }
}
@media (max-width: 800px) {
  .v3-work-section { padding-block: 60px; }
}
@media (max-width: 640px) {
  /* On a phone the nine examples sit in one row you swipe along, like the
     cards above, rather than a grid five rows deep. */
  .v3-work-tabs { display: flex; gap: 8px; justify-self: stretch; width: auto; min-width: 0; margin-inline: calc(var(--gutter) / -2); padding: 2px calc(var(--gutter) / 2) 4px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: calc(var(--gutter) / 2); scrollbar-width: none; }
  .v3-work-tabs::-webkit-scrollbar { display: none; }
  .v3-work-tabs button { flex: 0 0 auto; scroll-snap-align: start; }
  .v3pw-window { grid-template-columns: minmax(0,1fr); }
  .v3pw-dock,.v3pw-head-acts { display: none; }
  .v3pw-ai-head,.v3pw-ai-body { padding-inline: 12px; }
  .v3pw-turn.is-user { padding-left: 24px; }
  .v3pw-turn.is-ai { padding-right: 0; }
  .v3pw-rep-row { grid-template-columns: minmax(0,1.5fr) repeat(2,minmax(0,1fr)); gap: 8px; padding-inline: 10px; font-size: 12.5px; }
  .v3pw-rep-row > span:is(:nth-child(3),:nth-child(5)) { display: none; }
  .v3pw-rep-row > span:first-child { white-space: normal; }
  .v3pw-draft-row { grid-template-columns: minmax(0,1fr) 36px 66px; gap: 8px; padding-inline: 10px; }
  .v3pw-draft-row > span:nth-child(3) { display: none; }
  .v3pw-draft-row > span:first-child > span:not(.mono) { display: none; }
  /* The panel keeps the question, the answer and its figures. The records it
     read, the suggested actions and the composer step aside, as do the
     chips of what Cobalt read, the report's export buttons and the lines
     under each heading; the line being explained stays. */
  .v3pw-sect.is-records,.v3pw-sect.is-steps,.v3pw-composer,.v3pw-params,.v3pw-rep-acts,.v3pw-rep-row.is-child { display: none; }
  .v3pw-ai-body { gap: 14px; padding-block: 16px; }
  .v3pw-photo { width: 184px; height: 108px; }
  .v3pw-note { padding: 7px 10px 8px; font-size: 10.5px; line-height: 13px; background: repeating-linear-gradient(#fdfbf4 0 13px, #dfe5ee 13px 14px); }
}
@media (max-width: 480px) {
  .v3pw-kpi { padding: 11px 12px; }
  .v3pw-kpi-why { white-space: normal; }
}
@media (max-width: 340px) {
  .v3pw-kpis { grid-template-columns: minmax(0,1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .v3-workbench *,.v3-work-tabs button,.v3-work-panel.is-reading * { transition: none !important; animation: none !important; }
}