/* The visual tools page concept (/tools-visual): dark like the Bold homepage, no white blocks. A live demo stage, then
   the workspaces as simple alternating feature rows. */
.page-tools-visual main { overflow-x: clip; }
.tv-hero { padding: calc(var(--nav-h) + 56px) 0 28px; }
.tv-hero h1 { font-size: clamp(3.4rem, 7vw, 6rem); font-weight: 700; line-height: 1; letter-spacing: -.05em; color: #fff; margin: 10px 0 18px; }
.tv-hero h1 em { font-style: normal; color: var(--orange); }
.tv-sub { font-size: 1.3rem; font-weight: 500; color: #e3e9ee; }
.tv-h2 { font-size: clamp(2.2rem, 3.6vw, 3.2rem) !important; font-weight: 700; color: #fff; margin-bottom: 40px !important; }

/* The picker: nine tools, each a picture and a name */
.tv-stage-band { padding: 24px 0 72px; }
.tv-picker { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 10px; margin-bottom: 22px; }
.tv-pick { display: flex; flex-direction: column; gap: 8px; padding: 6px 6px 10px; border: 2px solid #ffffff26; border-radius: 16px; background: #ffffff0a; color: #fff;
  font: 700 .95rem var(--sans); text-align: center; cursor: pointer; transition: border-color .2s, background .2s, transform .15s; }
.tv-pick img { width: 100%; aspect-ratio: 8 / 5; object-fit: cover; border-radius: 10px; background: #1a2530; }
.tv-pick:hover { border-color: var(--orange); transform: translateY(-2px); }
.tv-pick[aria-pressed="true"] { border-color: var(--orange); background: var(--orange); color: #140b00; }
.tv-pick:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.tv-stage { min-height: 560px; border-radius: 24px; border: 1px solid #ffffff26; background: #0d141a; padding: 18px; overflow: hidden; }
.tv-stage > .demo { margin: 0; }
.tv-loading { display: grid; place-items: center; min-height: 520px; margin: 0; font-size: 1.15rem; font-weight: 600; color: #c9d3da; text-align: center; }
.tv-loading a { color: var(--orange); }
.tv-stage-foot { margin: 16px 4px 0; text-align: right; }
.tv-stage-foot a { color: #fff; font-weight: 700; font-size: 1.05rem; text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* Workspaces: a picture one side, a title, a line and a few tool names the other */
.tv-ws-band { padding: 72px 0 88px; background: #10191f; border-top: 1px solid var(--alt-rule); }
.tv-row { display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: center; padding: 36px 0; }
.tv-row--flip .tv-pic { order: 2; }
.tv-pic { display: block; aspect-ratio: 4 / 3; border-radius: 24px; overflow: hidden; background: #0b1218; border: 1px solid #ffffff1f; }
.tv-pic img { width: 100%; height: 100%; object-fit: contain; padding: 16px; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.tv-pic:hover img { transform: scale(1.04); }
.page-tools-visual .tv-copy h3 { font-size: clamp(2.2rem, 3.6vw, 3.2rem); font-weight: 700; letter-spacing: -.04em; margin-bottom: 8px; }
.tv-copy h3 a { color: #fff; text-decoration: none; }
.tv-copy h3 a:hover { color: var(--orange); }
.tv-line { font-size: 1.3rem; font-weight: 600; color: #fff; margin-bottom: 14px; }
.tv-names { font-size: 1.05rem; font-weight: 500; line-height: 1.6; color: #c9d3da; margin-bottom: 22px; }

@media (max-width: 1000px) {
  .tv-picker { display: flex; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; }
  .tv-pick { flex: 0 0 132px; scroll-snap-align: start; }
  .tv-row { grid-template-columns: 1fr; gap: 24px; }
  .tv-row--flip .tv-pic { order: 0; }
}
@media (prefers-reduced-motion: reduce) { .tv-pick, .tv-pic img { transition: none; } }

/* The demo's note: a short invitation in a pill at the top of the picture, instead of small capitals along the bottom.
   The demos hide it on the first touch, and the full controls stay in the panel beside the picture. */
.tv-stage .demo__note.tv-hint { left: 50%; right: auto; top: 18px; bottom: auto; transform: translateX(-50%); padding: 9px 18px; border-radius: 999px;
  background: #0b1014cc; border: 1px solid #ffffff2e; backdrop-filter: blur(8px);
  font: 600 1rem/1.2 var(--sans); letter-spacing: 0; text-transform: none; color: #fff; white-space: nowrap; }
.tv-stage .demo__note.tv-hint::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: var(--orange);
  box-shadow: 0 0 10px var(--orange); vertical-align: 1px; }
.tv-stage .demo__note.tv-hint { transition: opacity .35s; }
.tv-stage .demo__note.tv-hint--gone { opacity: 0; }

/* The label above the headline is a proper feature: a pill with the section name in a solid orange tag, and a line that says what's here */
.tv-badge { display: inline-flex; align-items: center; gap: 14px; margin: 0 0 8px; padding: 8px 22px 8px 8px; border-radius: 999px; background: #ffffff12; border: 1px solid #ffffff2e;
  font-size: 1.15rem; font-weight: 600; color: #fff; }
.tv-badge b { padding: 8px 20px; border-radius: 999px; background: var(--orange); color: #140b00; font-size: 1.3rem; font-weight: 700; letter-spacing: -.01em; }

/* A plain list of every tool page, so each one is a click from here */
.tv-all { padding: 56px 0 24px; background: #0b1014; border-top: 1px solid var(--alt-rule); }
.tv-all-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.tv-all-list a { display: inline-block; padding: 9px 18px; border-radius: 999px; border: 1px solid #ffffff2e; color: #fff; font-weight: 600; font-size: 1.02rem; text-decoration: none; transition: border-color .2s, background .2s; }
.tv-all-list a:hover { border-color: var(--orange); background: #ff83001a; }

/* Workspace rows without pictures (James, 2026-10-12). */
.tv-row.tv-row--plain { grid-template-columns: 1fr; gap: 0; padding: 30px 0; border-top: 1px solid #ffffff14; }
.tv-row.tv-row--plain:first-of-type { border-top: 0; }
/* The open beta strip runs along the foot of "Try them on your own scans" (James, 2026-10-13). */
.page-tools-visual .alt-finale:has(.hb-promo-strip) { padding-bottom: 0; }
.page-tools-visual .alt-finale:has(.hb-promo-strip) > .wrap { padding-bottom: 110px; }
@media (max-width: 700px) { .page-tools-visual .alt-finale:has(.hb-promo-strip) > .wrap { padding-bottom: 64px; } }
/* Every workspace: the rows alternate, left then right, so the list reads as a set of separate blocks rather than
   one long column (James, 2026-10-13). Phones keep them all on the left. */
@media (min-width: 761px) {
  .tv-ws-band .tv-row--plain .tv-copy { max-width: 640px; }
  .tv-ws-band .tv-row--plain:nth-of-type(even) .tv-copy { margin-left: auto; text-align: right; }
}
/* "Every workspace page": the heading and its row of links centred on the page, phones included (James, 2026-10-13). */
.tv-all .tv-h2 { text-align: center; }
.tv-all-list { justify-content: center; }
/* Every workspace: each row centred on the page, laptops and phones alike (James, 2026-10-13: centre rather than
   left or right); this replaces the alternating left/right rows above. */
.tv-ws-band .tv-h2 { text-align: center; }
.tv-ws-band .tv-row--plain .tv-copy, .tv-ws-band .tv-row--plain:nth-of-type(even) .tv-copy { max-width: 760px; margin: 0 auto; text-align: center; }