/* ==========================================================================
   CAPVIUM — Home (01_home). Page-specific composition on top of capvium.css.
   ========================================================================== */

/* ── Hero ────────────────────────────────────────────────────────────────── */
/* The connected-decisions graph hero (PR #199–#201) re-seated on the navy band.
   DOM ids (#capvium-graph-hero / #capvium-graph-copy), the copy and the CTAs are
   unchanged — graph-hero.js drives the copy's opacity and needs both ids intact. */
.cv-hero {
  position: relative;
  background: var(--surface-dark);
  color: var(--ink-on-dark);
  border-bottom: 1px solid var(--rule-on-dark);
  overflow: hidden;
  /* Column so the canvas and the CTA row divide the viewport between them
     rather than the buttons pushing the hero past a screen height. */
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - var(--nav-h));
}
.cv-hero-graph {
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  min-height: 440px;
  container-type: inline-size;
}
#capvium-graph-hero { position: absolute; inset: 0; }
#capvium-graph-hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Copy column sits over the left of the frame; the graph owns the right.
   Percentages mirror graph-hero.js's MARGIN/COPY_W so the two stay in step. */
/* The lede column holds the copy and the CTAs together. The copy keeps its own
   element because graph-hero.js drives #capvium-graph-copy's opacity; the CTAs
   sit outside it so they stay visible and clickable throughout the loop, and
   clear of the chain captions the animation draws along the bottom. */
.cv-hero-lede {
  position: absolute;
  left: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  /* 12% of the graph box, but never closer to the top than the credential bar
     needs. At 1440 the 12% wins and the headline does not move at all; on a
     short hero (e.g. 980x640, where 12% is only 57px) the floor takes over and
     stops the bar overlapping the headline. Bar bottom maxes out near 74px. */
  top: max(12%, 84px);
  width: min(42%, 620px);
  z-index: 2;
}
.cv-hero-copy { pointer-events: none; }
.cv-hero-copy h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(38px, 4.6cqw, 74px);
  line-height: 1.03;
  letter-spacing: -0.025em;
  color: var(--white);
  margin: 0 0 clamp(16px, 1.8cqw, 28px);
}
.cv-hero-copy h1 .accent { color: var(--accent-soft); }
.cv-hero-copy p {
  font-size: clamp(15px, 1.35cqw, 21px);
  line-height: 1.42;
  color: var(--muted-on-dark);
  margin: 0;
  max-width: 34em;
}
/* Its own band under the canvas, aligned to the page container. */
.cv-hero-actions {
  flex: 0 0 auto;
  padding: clamp(20px, 2.6vh, 36px) 0 clamp(28px, 4vh, 56px);
  border-top: 1px solid var(--rule-on-dark);
  background: var(--surface-dark);
}
.cv-hero-actions .cv-container {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

@media (max-width: 860px) {
  .cv-hero { min-height: 0; display: block; }
  .cv-hero-graph {
    min-height: 0;
    display: flex; flex-direction: column;
  }
  .cv-hero-lede {
    position: static; width: auto; padding: 40px var(--gutter) 8px; order: -1;
  }
  .cv-hero-copy { pointer-events: auto; }
  .cv-hero-copy h1 { font-size: 36px; }
  .cv-hero-copy br { display: none; }
  .cv-hero-copy p { font-size: 16px; }
  .cv-hero-actions { padding: 24px 0 36px; }
  #capvium-graph-hero { position: relative; inset: auto; width: 100%; aspect-ratio: 4 / 3; }
}

/* Landscape phones and any short viewport. The 4/3 graph box is taller than the
   screen there (829px wide gives a 622px box on a 390px-tall display), which put
   the animation and its captions below the fold and left a dark void. Height is
   capped to the viewport instead, and the copy tightens to match. */
@media (max-width: 1024px) and (max-height: 620px) {
  .cv-hero-lede { padding: 16px var(--gutter) 4px; }
  .cv-hero-copy h1 { font-size: clamp(22px, 4.4vw, 30px); margin-bottom: 8px; }
  .cv-hero-copy p { font-size: 14px; line-height: 1.35; }
  #capvium-graph-hero { aspect-ratio: auto; height: min(56svh, 290px); }
  .cv-hero-actions { padding: 12px 0 18px; }
  .cv-hero-actions .cv-container { gap: 10px; }
}

/* ── "Every project. Every dollar. Every decision." ──────────────────────── */
.cv-promise { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.cv-promise-h { font-family: var(--display); font-size: clamp(24px, 2.5vw, 34px); font-weight: 600; letter-spacing: -0.02em; margin: 0; }
.cv-promise-h .dot { color: var(--accent-soft); margin: 0 10px; }
.cv-promise p { margin: 0; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.6; color: var(--muted-on-dark); }
.cv-promise p b { color: var(--white); font-weight: 600; }
@media (max-width: 860px) { .cv-promise { grid-template-columns: minmax(0, 1fr); } }

/* ── Membership credential (hero) ────────────────────────────────────────────
   NVIDIA's badge ships with its own light plate baked in and there is no public
   reversed version, so the plate is not something to hide — it is the object.
   An earlier pass dropped that light card inside a filled gold pill, which put
   two competing surfaces against each other. Here the card sits on a dark glass
   plate, which is a relationship rather than a collision, and gold appears only
   as a 3px leading edge and the label. One palette: navy ground, one light card,
   gold accent.

   Square-ish 4px corners, not a 999px pill — a capsule reads as a marketing
   chip, a bordered plate with an accent edge reads as a credential.

   ABSOLUTE above 860px, which is the whole point: an earlier version sat inside
   .cv-hero-lede and pushed the headline down 60px. Out of flow it occupies empty
   space and the headline does not move.

   SIBLING of .cv-hero-lede, never a child, for three reasons that each bite on
   their own: graph-hero.js copyInkRight() walks every text node inside
   #capvium-graph-copy and sizes the graph off the rightmost ink; .cv-hero-copy
   is pointer-events:none above 860px; and the animation drives that element's
   opacity on its loop, so a child would fade in and out with it.

   Below 860px the hero stacks, so it returns to normal flow at order:-2. */
.cv-hero-credential {
  position: absolute;
  z-index: 3;
  top: clamp(10px, 1.4cqw, 16px);
  left: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  display: inline-flex; align-items: center;
  margin: 0; padding: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
  border: 1px solid rgba(255,255,255,.12);
  border-left: 3px solid #D4A53C;
  border-radius: 4px;
  box-shadow: 0 6px 22px rgba(0,0,0,.28);
  backdrop-filter: blur(3px);
}
/* Height-driven, so a replacement badge from the portal drops in at whatever
   aspect ratio it has without a CSS change. Sized generously because NVIDIA's
   file carries a 32px clear-space margin on a 280px canvas — the visible plate
   is only 77% of the box, so 52px of box is ~40px of actual badge. */
.cv-hero-credential-badge {
  height: clamp(40px, 3.8cqw, 52px); width: auto; display: block; flex: 0 0 auto;
  margin: 6px 0 6px 10px;
}
.cv-hero-credential-text {
  display: flex; align-items: center; align-self: stretch;
  margin-left: 14px; padding: 0 18px 0 14px;
  border-left: 1px solid rgba(255,255,255,.13);
  font-family: var(--body); font-size: clamp(10px, 0.78cqw, 11.5px);
  font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: #E3BE6A; line-height: 1; white-space: nowrap;
}

@media (max-width: 860px) {
  .cv-hero-credential {
    position: static; order: -2; align-self: flex-start;
    margin: 18px var(--gutter) 0;
  }
  .cv-hero-credential-badge { height: 42px; margin: 5px 0 5px 9px; }
  .cv-hero-credential-text { font-size: 10px; margin-left: 12px; padding: 0 14px 0 12px; }
}
/* Landscape phones give the hero almost no height, so this has to be cheap. */
@media (max-width: 1024px) and (max-height: 620px) {
  .cv-hero-credential { margin: 10px var(--gutter) 0; }
  .cv-hero-credential-badge { height: 30px; margin: 4px 0 4px 7px; }
  .cv-hero-credential-text { font-size: 9.5px; letter-spacing: 0.12em; margin-left: 10px; padding: 0 11px 0 9px; }
}
@media (prefers-reduced-motion: no-preference) {
  .cv-hero-credential { animation: cvCredIn 620ms cubic-bezier(.16,1,.3,1) both 240ms; }
  @keyframes cvCredIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
}

/* ── Pipeline band ───────────────────────────────────────────────────────── */
.cv-pipeline {
  position: relative; padding: clamp(28px, 4vw, 56px) 0;
  background: var(--surface-dark-2);
  border-top: 1px solid var(--rule-on-dark); border-bottom: 1px solid var(--rule-on-dark);
  overflow: hidden;
}
.cv-pipeline-steps {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: clamp(10px, 2vw, 26px);
  font-family: var(--display); font-weight: 700;
  font-size: clamp(20px, 3.1vw, 48px); letter-spacing: 0.01em; color: var(--white);
  text-transform: uppercase;
}
.cv-pipeline-steps .sep { color: var(--accent-soft); font-weight: 400; }

/* ── Product mock: portfolio table + allocation + risk meter ─────────────── */
.cv-mock {
  background: var(--white); border: 1px solid var(--rule);
  font-family: var(--body);
}
.cv-dark .cv-mock { background: var(--surface-dark-2); border-color: var(--rule-on-dark); }
.cv-mock-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 18px 20px; border-bottom: 1px solid var(--rule);
  font-size: 12px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink);
}
.cv-dark .cv-mock-head { border-bottom-color: var(--rule-on-dark); color: var(--white); }
.cv-mock-head span { font-size: 11px; font-weight: 500; letter-spacing: 0.04em; text-transform: none; color: var(--muted); }

.cv-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cv-table th {
  text-align: left; padding: 12px 14px; font-size: 11px; font-weight: 500;
  letter-spacing: 0.03em; color: var(--muted); border-bottom: 1px solid var(--rule);
  vertical-align: top; white-space: nowrap;
}
.cv-table th small { display: block; font-size: 10px; opacity: .8; font-weight: 400; }
.cv-table td { padding: 14px; border-bottom: 1px solid var(--rule); vertical-align: middle; color: var(--ink); }
.cv-table tr:last-child td { border-bottom: 0; }
.cv-dark .cv-table th, .cv-dark .cv-table td { border-bottom-color: var(--rule-on-dark); }
.cv-dark .cv-table td { color: var(--white); }
.cv-table .num { font-variant-numeric: tabular-nums; white-space: nowrap; }

.cv-pill {
  display: inline-block; padding: 7px 12px; min-width: 104px; text-align: center;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
}
.cv-pill--go   { background: rgba(13,137,135,.14);  color: #0A6F6D; }
.cv-pill--watch{ background: rgba(200,121,26,.14);  color: #A5620F; }
.cv-pill--stop { background: rgba(194,65,60,.14);   color: #B0332E; }
.cv-dark .cv-pill--go   { background: rgba(31,182,166,.16); color: #4FD3C4; }
.cv-dark .cv-pill--watch{ background: rgba(245,170,70,.16); color: #F5AA46; }
.cv-dark .cv-pill--stop { background: rgba(220,100,110,.16); color: #E8848C; }

.cv-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 7px; vertical-align: middle; }
.cv-dot--go { background: var(--sig-good); }
.cv-dot--watch { background: var(--sig-warn); }
.cv-dot--stop { background: var(--sig-bad); }

/* Allocation bars */
.cv-alloc { padding: 8px 20px 20px; }
.cv-alloc-row { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr) 62px 44px; align-items: center; gap: 12px; padding: 9px 0; font-size: 13px; }
.cv-alloc-track { height: 12px; background: var(--rule); position: relative; }
.cv-dark .cv-alloc-track { background: rgba(255,255,255,.09); }
.cv-alloc-fill { position: absolute; inset: 0 auto 0 0; background: var(--accent); }
.cv-alloc-fill--idle { background: #B9BDC2; }
.cv-dark .cv-alloc-fill--idle { background: #4A5260; }
.cv-alloc-row .num { font-variant-numeric: tabular-nums; text-align: right; }
.cv-alloc-row .pct { color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
@media (max-width: 700px) { .cv-alloc-row { grid-template-columns: minmax(0, 1fr) 62px; } .cv-alloc-track { grid-column: 1 / -1; order: 3; } .cv-alloc-row .pct { display: none; } }

/* Risk meter */
.cv-meter { padding: 20px; }
.cv-meter-scale { position: relative; height: 8px; background: linear-gradient(90deg, #1E9E5A 0%, #6FBF3F 22%, #E4B23A 45%, #DE7A35 65%, #C2413C 100%); }
.cv-meter-needle { position: absolute; top: -6px; bottom: -6px; width: 2px; background: var(--ink); }
.cv-dark .cv-meter-needle { background: var(--white); }
.cv-meter-flag {
  position: absolute; bottom: calc(100% + 8px); transform: translateX(-50%);
  padding: 3px 8px; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--accent); color: #fff; white-space: nowrap;
}
.cv-meter-ticks { display: flex; justify-content: space-between; margin-top: 10px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ── Product (engine) rows ───────────────────────────────────────────────── */
.cv-engine { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: 1px solid var(--rule); }
.cv-engine > * { padding: clamp(34px, 4vw, 64px) clamp(24px, 3vw, 56px); display: flex; flex-direction: column; justify-content: center; }
.cv-engine-media { background: var(--surface-alt); align-items: center; }
.cv-engine-media img, .cv-engine-media svg { display: block; width: 100%; height: auto; }
.cv-engine--flip .cv-engine-copy { order: 2; }
.cv-engine h3 { font-family: var(--display); font-size: clamp(24px, 2.3vw, 32px); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 16px; }
.cv-engine p { margin: 0 0 26px; font-size: clamp(19px, 1.9vw, 27px); line-height: 1.22; font-family: var(--display); font-weight: 400; letter-spacing: -0.02em; color: var(--ink); }
.cv-engine .cv-btn { align-self: flex-start; }
@media (max-width: 860px) {
  .cv-engine { grid-template-columns: minmax(0, 1fr); }
  .cv-engine--flip .cv-engine-copy { order: 0; }
}

/* Engine media: the four-tool stack */
.cv-toolstack { background: var(--surface-dark); padding: 30px; display: grid; gap: 12px; width: 100%; }
.cv-tool {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  background: var(--white); color: var(--ink);
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
}
.cv-tool--on { background: var(--accent); color: var(--white); }
.cv-tool svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* ── Comparison diagram (before / after) ─────────────────────────────────── */
.cv-compare { display: grid; grid-template-columns: minmax(0, 210px) minmax(0, 1fr) minmax(0, 210px); gap: clamp(16px, 2.4vw, 34px); align-items: center; background: var(--surface-dark); padding: clamp(20px, 2.6vw, 34px); }
.cv-compare-col { display: grid; gap: 12px; }
.cv-compare-item { display: flex; align-items: center; gap: 11px; padding: 13px 14px; background: rgba(255,255,255,.05); border: 1px solid var(--rule-on-dark); font-size: 12.5px; font-weight: 600; line-height: 1.25; color: var(--white); }
.cv-compare-item svg { width: 18px; height: 18px; flex: 0 0 auto; opacity: .8; }
@media (max-width: 980px) { .cv-compare { grid-template-columns: minmax(0, 1fr); } .cv-compare-mid { order: -1; } }

/* ── Insight (essay) rows ────────────────────────────────────────────────── */
.cv-essay {
  display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr) auto;
  gap: clamp(20px, 3vw, 56px); align-items: start;
  padding: clamp(30px, 3.4vw, 52px) 0; border-top: 1px solid var(--rule-on-dark);
}
.cv-essay img { display: block; width: 100%; height: auto; }
.cv-essay-h { font-family: var(--display); font-size: clamp(20px, 1.9vw, 27px); font-weight: 400; line-height: 1.24; letter-spacing: -0.02em; color: var(--muted-on-dark); margin: 0 0 22px; }
.cv-essay-h b { color: var(--white); font-weight: 600; }
.cv-essay .cv-btn { white-space: nowrap; }
@media (max-width: 980px) {
  .cv-essay { grid-template-columns: minmax(0, 1fr); }
  .cv-essay .cv-btn { justify-self: start; }
}

/* ── Steps band ──────────────────────────────────────────────────────────── */
.cv-steps { display: grid; gap: 14px; max-width: 780px; }
.cv-steps-wrap { position: relative; }
.cv-steps-glyph { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: min(38%, 400px); opacity: .5; pointer-events: none; }
@media (max-width: 980px) { .cv-steps-glyph { display: none; } }

/* ── Closing CTA ─────────────────────────────────────────────────────────── */
.cv-close-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.cv-close-cell { padding: clamp(40px, 5vw, 76px) clamp(24px, 3.4vw, 60px); display: flex; flex-direction: column; justify-content: center; }
.cv-close-cell--rule { border-left: 1px solid rgba(255,255,255,.22); }
.cv-close-h { font-family: var(--display); font-size: clamp(26px, 2.7vw, 38px); font-weight: 400; line-height: 1.22; letter-spacing: -0.02em; color: var(--white); margin: 0; }
.cv-close-form { background: var(--white); padding: clamp(22px, 2.4vw, 34px); }
.cv-close-form label { display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 10px; }
.cv-close-form input {
  width: 100%; padding: 14px 15px; font-family: var(--body); font-size: 14px;
  border: 1px solid var(--rule); background: var(--surface-alt); color: var(--ink);
}
.cv-close-form input:focus { outline: 2px solid var(--accent); outline-offset: -2px; background: var(--white); }
.cv-close-form button { width: 100%; margin-top: 14px; justify-content: space-between; }
.cv-close-photo { min-height: 300px; background: center / cover no-repeat; }
.cv-close-bighead { font-family: var(--display); font-size: clamp(32px, 3.8vw, 54px); font-weight: 700; line-height: 1.06; letter-spacing: -0.02em; color: var(--white); margin: 0 0 18px; }
.cv-close-sub { font-size: clamp(16px, 1.4vw, 20px); font-weight: 600; color: rgba(255,255,255,.92); margin: 0 0 30px; }
@media (max-width: 860px) {
  .cv-close-grid { grid-template-columns: minmax(0, 1fr); }
  .cv-close-cell--rule { border-left: 0; border-top: 1px solid rgba(255,255,255,.22); }
  .cv-close-photo { min-height: 220px; }
}

/* ── Mobile collapse for the composed home sections ── */
.cv-dash { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 22px; }
.cv-tools-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

@media (max-width: 980px) {
  .cv-dash { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .cv-tools-band { grid-template-columns: minmax(0, 1fr); }
}

/* ── Rolling strip ──────────────────────────────────────────────────────────
   A seamless marquee: the track holds the list twice and translates by exactly
   -50%, so the second copy lands where the first began. Duplicated items are
   aria-hidden so a screen reader reads the list once. Edge masks fade the
   entries in and out instead of clipping them at a hard border. */
.cv-marquee {
  background: var(--surface-dark-2);
  border-top: 1px solid var(--rule-on-dark);
  border-bottom: 1px solid var(--rule-on-dark);
  padding: clamp(26px, 3vw, 44px) 0;
  overflow: hidden;
}
.cv-marquee-label {
  margin: 0 0 clamp(18px, 2vw, 28px);
  text-align: center;
  font-family: var(--body); font-size: 12px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-on-dark);
}
.cv-marquee-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.cv-marquee-track {
  display: flex;
  width: max-content;
  align-items: center;
  animation: cvMarquee 46s linear infinite;
}
.cv-marquee:hover .cv-marquee-track { animation-play-state: paused; }
.cv-marquee-item {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 0 clamp(22px, 2.6vw, 40px);
  font-family: var(--display); font-weight: 500;
  font-size: clamp(18px, 1.9vw, 26px); letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.78); white-space: nowrap;
}
.cv-marquee-item::after {
  content: ""; width: 5px; height: 5px; margin-left: clamp(22px, 2.6vw, 40px);
  background: var(--accent-soft); transform: rotate(45deg); flex: 0 0 auto;
}

@keyframes cvMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  /* Don't animate; let the row scroll by hand instead of freezing it mid-list. */
  .cv-marquee-track { animation: none; }
  .cv-marquee-viewport { overflow-x: auto; }
}

/* ── Platform demo ─────────────────────────────────────────────────────────
   The workspace walkthrough, sitting above the pipeline band. The frame is
   the one the screenshot used and the video fills it on the same terms, so
   the section keeps its place in the scroll. */
.cv-demo {
  background: var(--surface-dark);
  padding: clamp(40px, 5vw, 84px) 0 clamp(20px, 2.6vw, 36px);
}
.cv-demo-frame {
  position: relative;
  border: 1px solid var(--rule-on-dark);
  background: var(--surface-dark-2);
  overflow: hidden;
}
.cv-demo-frame img,
.cv-demo-frame video { display: block; width: 100%; height: auto; }

/* Sound toggle. The .cv-btn language — square, uppercase, hairline rule — at a
   size that sits on the footage, bottom right, where no caption runs. Hidden
   until the script shows it. */
:root {
  --cv-sound-off: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><g fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M2.4 6.1h2.2L7.6 3.3v9.4L4.6 9.9H2.4z'/><path d='M10.6 6.2l3.2 3.6M13.8 6.2l-3.2 3.6'/></g></svg>");
  --cv-sound-on:  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><g fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M2.4 6.1h2.2L7.6 3.3v9.4L4.6 9.9H2.4z'/><path d='M10.2 5.9a3.2 3.2 0 0 1 0 4.2M12.4 3.9a6.2 6.2 0 0 1 0 8.2'/></g></svg>");
}
.cv-demo-sound {
  position: absolute;
  right: clamp(12px, 1.6vw, 22px);
  bottom: clamp(12px, 1.6vw, 22px);
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 13px;
  font-family: var(--body); font-size: 12px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(11, 18, 32, 0.66);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.cv-demo-sound:hover { background: rgba(13, 137, 135, 0.42); border-color: var(--accent); }
.cv-demo-sound[hidden] { display: none; }
.cv-demo-sound-icon {
  flex: 0 0 auto; width: 15px; height: 15px; background: currentColor;
  -webkit-mask: var(--cv-sound-off) center / contain no-repeat;
          mask: var(--cv-sound-off) center / contain no-repeat;
}
.cv-demo-sound[aria-pressed="true"] .cv-demo-sound-icon {
  -webkit-mask-image: var(--cv-sound-on);
          mask-image: var(--cv-sound-on);
}

/* Contact form status line (success / error) */
.cv-form-note { margin: 10px 0 0; font-size: 13px; line-height: 1.45; color: var(--muted); }   /* the form box is white */
.cv-form-note:empty { display: none; }
.cv-form-note.is-ok { color: var(--accent); }
.cv-form-note.is-error { color: var(--sig-bad); }