/* /voice/how-it-works only: The Call v2's "anatomy of one answer" (AX-MOCK-012, call2/direction.css §4, §20, §25).
   The hero with the shared sample-call player, five acts (find, check, decide, record, improve) with their trades,
   the coverage dial and the close. No ribbon, no WebGL, no pinned scroll. Loaded after voice-marketing.css and
   home-motion.css: the shell, the Voice tokens (The Call v2's white in light, the Voice dark set in dark) and the
   player come from there. Rules are prefixed hw-; paragraph and heading rules carry .voice-marketing so they outrank
   its `.voice-marketing p { margin-top: 0 }`. */

/* ---------- Page tokens: the few colours the Voice set doesn't have ---------- */
.voice-marketing {
  --hw-shadow-lg: 0 1px 2px rgba(0, 0, 0, .3), 0 40px 90px -30px rgba(0, 0, 0, .7);
  --hw-warn: #fb923c; --hw-warn-soft: rgba(251, 146, 60, .1); --hw-warn-line: rgba(251, 146, 60, .38);
  --hw-cell: rgba(255, 255, 255, .08); --hw-over: #86c7ff; --hw-over-2: rgba(134, 199, 255, .22);
  --hw-slate: #8594ab; --hw-dash: rgba(255, 255, 255, .2);
}
[data-theme="light"] .voice-marketing {
  --hw-shadow-lg: 0 1px 2px rgba(16, 24, 40, .04), 0 36px 80px -28px rgba(16, 24, 40, .26);
  --hw-warn: #b54708; --hw-warn-soft: rgba(181, 71, 8, .07); --hw-warn-line: rgba(181, 71, 8, .3);
  --hw-cell: #e8ecf2; --hw-over: #3b6cf6; --hw-over-2: #d3ddfa;
  --hw-slate: #6b778a; --hw-dash: #b8c1ce;
}

/* ---------- Hero: the promise, then the call ---------- */
.voice-marketing .vm-hero.hw-hero { padding: 136px 0 clamp(56px, 7vw, 96px); overflow: visible; background: var(--bg); }
.voice-marketing .hw-hero .hw-eyebrow { margin: 0 0 22px; font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); }
.voice-marketing .hw-hero h1 { max-width: 17ch; margin: 0 auto 22px; font-size: clamp(46px, 7.2vw, 102px); font-weight: 650; line-height: .97; letter-spacing: -.058em; text-wrap: balance; }
.voice-marketing .hw-hero h1 span { display: block; color: var(--blue); text-wrap: balance; }
.voice-marketing .hw-hero .hw-hero-deck { max-width: 44ch; margin: 0 auto; font-size: clamp(18px, 1.7vw, 22px); line-height: 1.5; letter-spacing: -.012em; color: var(--muted); text-wrap: pretty; }
.voice-marketing .hw-hero .hero-actions { margin-top: 34px; gap: 14px 26px; }
.hw-hero-object { max-width: 1120px; margin-top: clamp(40px, 4.6vw, 64px); }
/* The shared player at the shell's width. Its .hm wrapper scopes the player's tokens; here it draws no box of its own. */
.voice-page .hw-player.hm { background: none; overflow: visible; }
.hw-player .hm-player { width: 100%; margin: 0; padding: 28px 32px 22px; border-radius: 24px; box-shadow: var(--hw-shadow-lg); }

/* ---------- The acts: copy beside (or above) a stage ---------- */
.hw-act { padding: clamp(64px, 8vw, 108px) 0; border-top: 1px solid var(--line-soft); background: var(--bg); }
.voice-marketing .hw-act.vm-light { background: var(--band); }
.hw-act-grid { display: grid; grid-template-columns: minmax(300px, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.hw-act.is-wide .hw-act-grid { grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 4vw, 48px); }
.hw-act-copy { min-width: 0; }
.voice-marketing .hw-kicker { margin: 0 0 16px; font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.voice-marketing .hw-kicker .hs-status { margin-left: 10px; }
.voice-marketing .hw-act-copy h2 { margin: 0 0 16px; font-size: clamp(32px, 3.9vw, 52px); font-weight: 650; line-height: 1.02; letter-spacing: -.05em; text-wrap: balance; }
.voice-marketing .hw-deck { max-width: 52ch; margin: 0; font-size: 18px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }

/* The trade: what the design choice costs, and what it buys */
.voice-marketing .hw-trade { display: grid; gap: 5px; max-width: 58ch; margin: 26px 0 0; padding: 2px 0 2px 18px; border-left: 2px solid var(--blue); font-size: 15px; line-height: 1.5; color: var(--muted); }
.hw-trade b { font-size: 15px; font-weight: 650; letter-spacing: -.01em; color: var(--text); }
.hw-trade em { display: inline-block; min-width: 46px; margin-right: 4px; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
:lang(es) .hw-trade em { min-width: 70px; }
.hw-trade .is-cost { color: var(--muted-2); }
.hw-trade .is-buy { color: var(--blue); }

.hw-stage { min-width: 0; margin: 0; }
.voice-marketing .hw-stamp { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 10.5px; font-weight: 620; letter-spacing: .07em; line-height: 1.5; text-transform: uppercase; color: var(--muted-2); }
.hw-stamp::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--muted-2); }

/* Shared stage pieces */
.hw-card { padding: 18px 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }
.hw-k { display: block; margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); }
.hw-chip { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--blue-line); background: var(--blue-soft); color: var(--blue); font-size: 13.5px; font-weight: 620; line-height: 1.35; }
.hw-chip.is-context { border-color: var(--line); background: transparent; color: var(--muted); }
.hw-chip.is-mint { border-color: var(--mint-line); background: var(--mint-soft); color: var(--mint); }

/* 01 · Find: what was said, what it heard, and the approved sources, the two that answer lit */
.hw-find { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px; align-items: start; }
.hw-find-in { display: grid; gap: 14px; }
.voice-marketing .hw-said p { margin: 0; font-size: 19px; line-height: 1.45; letter-spacing: -.01em; color: var(--text); }
.hw-heard { position: relative; padding: 16px 20px; border: 1px dashed var(--blue-line); border-radius: 18px; background: var(--surface); }
.hw-heard::before { content: "↓"; position: absolute; top: -22px; left: 26px; font-weight: 700; color: var(--blue); }
.hw-heard div { display: flex; flex-wrap: wrap; gap: 8px; }
.hw-srcs ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hw-srcs li { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline; padding: 12px 14px; border-radius: 12px; color: var(--muted-2); }
.hw-srcs code { grid-column: 1; font-family: var(--mono); font-size: 13px; color: var(--muted-2); overflow-wrap: anywhere; }
.hw-srcs li > span { grid-column: 1; font-size: 14.5px; line-height: 1.45; }
.hw-srcs li.is-hit code, .hw-srcs li.is-hit > span { color: var(--text); }
.hw-glow { position: absolute; inset: 0; z-index: -1; border-radius: 12px; border-left: 3px solid var(--blue); background: var(--blue-soft); }
.hw-hit { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.voice-marketing .hw-oos { display: flex; gap: 10px; align-items: baseline; margin: 10px 0 0; padding: 12px 14px 0; border-top: 1px solid var(--line-soft); font-size: 14px; color: var(--muted-2); }
.hw-oos > span { flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.hw-oos .hw-oos-t { flex: 1 1 auto; font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; text-decoration: line-through; text-decoration-color: var(--muted-2); }

/* 02 · Check: each line held to its page; the line no page supports is struck */
.hw-check { display: grid; gap: 16px; }
.hw-draft-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 14px; }
.hw-draft-head .hw-k.is-note { font-weight: 600; letter-spacing: .08em; text-transform: none; font-size: 12px; }
.hw-draft ol { list-style: none; margin: 0; padding: 0; }
.hw-draft li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.hw-draft li:last-child { padding-bottom: 2px; border-bottom: 0; }
.hw-clause { position: relative; font-size: 17px; line-height: 1.5; letter-spacing: -.01em; color: var(--text); }
.hw-draft li.is-cut .hw-clause { color: var(--muted-2); }
.hw-strike { position: absolute; left: -2px; right: -2px; top: 55%; height: 2px; border-radius: 2px; background: var(--hw-warn); }
.hw-src { padding: 3px 9px; border-radius: 8px; font-family: var(--mono); font-size: 12.5px; white-space: nowrap; }
.hw-src code { font: inherit; }
.hw-src.is-ok { border: 1px solid var(--mint-line); background: var(--mint-soft); color: var(--mint); }
.hw-src.is-no { border: 1px solid var(--hw-warn-line); background: var(--hw-warn-soft); color: var(--hw-warn); }
.hw-spoken { border-color: var(--blue-line); }
.voice-marketing .hw-spoken p { margin: 0 0 14px; font-size: 18px; line-height: 1.5; letter-spacing: -.01em; color: var(--text); }

/* 03 · Decide: three outcomes, and guessing, which is not one of them */
.hw-decide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hw-out { display: grid; align-content: start; gap: 8px; padding: 18px 18px 16px; border: 1px solid var(--line); border-top-width: 3px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.hw-out-k { display: inline-flex; align-items: baseline; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .14em; line-height: 1.45; text-transform: uppercase; }
.hw-out-k i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.hw-out b { font-size: 16.5px; font-weight: 620; letter-spacing: -.015em; color: var(--text); }
.voice-marketing .hw-out p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.hw-out.is-answered { border-top-color: var(--mint); }
.hw-out.is-answered .hw-out-k { color: var(--mint); }
.hw-out.is-declined { border-top-color: var(--hw-warn); }
.hw-out.is-declined .hw-out-k { color: var(--hw-warn); }
.hw-out.is-handed { border-top-color: var(--blue); }
.hw-out.is-handed .hw-out-k { color: var(--blue); }
.hw-out.is-never { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 14px 18px; border: 1px dashed var(--hw-dash); border-radius: 14px; background: transparent; box-shadow: none; }
.hw-out.is-never .hw-out-k { align-items: center; color: var(--muted-2); text-decoration: line-through; }
.voice-marketing .hw-out.is-never p { font-size: 16px; font-weight: 600; letter-spacing: -.015em; color: var(--text); }

/* 04 · Record: the summary after the call (Coming) */
.hw-summary { padding: 0; overflow: hidden; }
.hw-summary-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; padding: 18px 22px; border-bottom: 1px solid var(--line-soft); }
.hw-summary-head b { display: block; font-size: 17px; font-weight: 650; letter-spacing: -.015em; color: var(--text); }
.hw-summary-head div > span { display: block; margin-top: 3px; font-family: var(--mono); font-size: 12px; color: var(--muted-2); }
.hw-summary dl { margin: 0; padding: 6px 22px; }
.hw-summary dl > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--line-soft); }
.hw-summary dl > div:last-child { border-bottom: 0; }
.hw-summary dt { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.hw-summary .is-answered dt { color: var(--mint); }
.hw-summary .is-declined dt { color: var(--hw-warn); }
.hw-summary .is-handed dt { color: var(--blue); }
.hw-summary dd { margin: 0; font-size: 15.5px; color: var(--text); }
.hw-summary dd small { display: block; margin-top: 3px; font-family: var(--mono); font-size: 12.5px; color: var(--muted-2); }
.hw-summary dd small code { font: inherit; }
.voice-marketing .hw-summary-foot { margin: 0; padding: 14px 22px 16px; border-top: 1px solid var(--line-soft); background: var(--surface-soft); font-size: 14px; color: var(--muted); }

/* 05 · Improve: one answer, three states */
.hw-rev { padding: 0; overflow: hidden; }
.hw-rev-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; padding: 16px 22px; border-bottom: 1px solid var(--line-soft); background: var(--surface-soft); }
.hw-rev-head b { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text); }
.hw-rev-head span { font-size: 13px; color: var(--muted-2); }
.hw-rev ol { list-style: none; margin: 0; padding: 8px 22px 12px; }
.hw-fix { position: relative; display: grid; grid-template-columns: minmax(150px, 190px) minmax(0, 1fr) auto; align-items: baseline; gap: 16px; padding: 16px 0 16px 22px; border-bottom: 1px solid var(--line-soft); }
.hw-fix:last-child { border-bottom: 0; }
.hw-fix::before { content: ""; position: absolute; left: 4px; top: 22px; width: 9px; height: 9px; border: 2px solid var(--muted-2); border-radius: 50%; background: var(--surface); }
.hw-fix::after { content: ""; position: absolute; left: 8px; top: 35px; bottom: -22px; width: 1px; background: var(--line); }
.hw-fix:last-child::after { content: none; }
.hw-fix .hw-k { margin: 0; }
.voice-marketing .hw-fix p { margin: 0; font-size: 16.5px; line-height: 1.5; letter-spacing: -.01em; color: var(--text); }
.hw-fix .hw-chip { justify-self: start; }
.hw-fix.is-stale p { color: var(--muted-2); text-decoration: line-through; text-decoration-color: var(--hw-warn); }
.hw-fix.is-stale .hw-chip { border-color: var(--hw-warn-line); background: var(--hw-warn-soft); color: var(--hw-warn); }
.hw-fix.is-signed::before { border-color: var(--mint); }
.hw-fix.is-signed .hw-chip { border-color: var(--mint-line); background: var(--mint-soft); color: var(--mint); }
.hw-fix.is-live::before { border-color: var(--blue); background: var(--blue); }
.voice-marketing .hw-fix.is-live p { font-weight: 600; }

/* ---------- Going live: the dial, on the band ---------- */
.voice-marketing .hw-dial { padding: clamp(56px, 6.6vw, 92px) 0; border-top: 1px solid var(--line-soft); }
.voice-marketing .hw-dial-head h2 { max-width: 22ch; margin: 0 0 20px; font-size: clamp(34px, 4.5vw, 60px); font-weight: 650; line-height: 1.02; letter-spacing: -.05em; text-wrap: balance; }
.voice-marketing .hw-dial-head h2 span { display: block; color: var(--hw-slate); text-wrap: balance; }
.voice-marketing .hw-dial-head .hw-deck { max-width: 60ch; }
.hw-dial-grid { list-style: none; margin: clamp(28px, 3.4vw, 44px) 0 26px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.hw-dial-grid li { min-width: 0; padding: 22px 22px 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); }
.hw-step { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--blue-line); border-radius: 50%; background: var(--blue-soft); font-size: 12px; font-weight: 700; color: var(--blue); }
.voice-marketing .hw-dial-grid h3 { margin: 12px 0 0; font-size: 19px; font-weight: 650; line-height: 1.3; letter-spacing: -.02em; }
.voice-marketing .hw-dial-grid p { margin: 12px 0 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.voice-marketing .hw-small { margin: 14px 0 0; font-size: 12.5px; color: var(--muted-2); }

/* A week as 7 rows of 24 hours. The day and hour labels are drawn here, in the page's language. */
.hw-week { display: grid; grid-template-columns: 14px repeat(24, minmax(0, 1fr)); gap: 2px; margin: 16px 0 4px; }
.hw-week i { aspect-ratio: 1; border-radius: 2px; background: var(--hw-cell); }
.hw-week i.on { background: var(--blue); }
.hw-week i.over { background: repeating-linear-gradient(135deg, var(--hw-over) 0 2px, var(--hw-over-2) 2px 4px); }
.hw-week-d { align-self: center; font-size: 9.5px; font-weight: 700; line-height: 1; color: var(--muted-2); }
.hw-week-d:nth-of-type(1)::before { content: "M"; }
.hw-week-d:nth-of-type(2)::before { content: "T"; }
.hw-week-d:nth-of-type(3)::before { content: "W"; }
.hw-week-d:nth-of-type(4)::before { content: "T"; }
.hw-week-d:nth-of-type(5)::before { content: "F"; }
.hw-week-d:nth-of-type(6)::before { content: "S"; }
.hw-week-d:nth-of-type(7)::before { content: "S"; }
:lang(es) .hw-week-d:nth-of-type(1)::before { content: "L"; }
:lang(es) .hw-week-d:nth-of-type(2)::before { content: "M"; }
:lang(es) .hw-week-d:nth-of-type(3)::before { content: "X"; }
:lang(es) .hw-week-d:nth-of-type(4)::before { content: "J"; }
:lang(es) .hw-week-d:nth-of-type(5)::before { content: "V"; }
:lang(es) .hw-week-d:nth-of-type(6)::before { content: "S"; }
:lang(es) .hw-week-d:nth-of-type(7)::before { content: "D"; }
.hw-week-t { display: grid; grid-template-columns: repeat(4, 1fr); padding-left: 16px; font-family: var(--mono); font-size: 10px; color: var(--muted-2); }
.hw-week-t span:nth-child(1)::before { content: "12a"; }
.hw-week-t span:nth-child(2)::before { content: "6a"; }
.hw-week-t span:nth-child(3)::before { content: "12p"; }
.hw-week-t span:nth-child(4)::before { content: "6p"; }
:lang(es) .hw-week-t span:nth-child(1)::before { content: "0 h"; }
:lang(es) .hw-week-t span:nth-child(2)::before { content: "6 h"; }
:lang(es) .hw-week-t span:nth-child(3)::before { content: "12 h"; }
:lang(es) .hw-week-t span:nth-child(4)::before { content: "18 h"; }

/* ---------- The close: the headline, the two doors, one line; no ribbon art ---------- */
.voice-marketing .vm-closing.hw-closing { padding: clamp(80px, 9vw, 128px) 0 clamp(64px, 7vw, 96px); border-top: 1px solid var(--line); background: var(--bg); }
.voice-marketing .vm-closing.hw-closing::before { content: none; }
.voice-marketing .vm-closing.hw-closing h2 { max-width: 24ch; margin: 0 auto; font-size: clamp(40px, 5.2vw, 72px); font-weight: 650; line-height: 1; letter-spacing: -.055em; text-wrap: balance; }
.voice-marketing .hw-closing .hero-actions { margin-top: 38px; gap: 14px 26px; }
.voice-marketing .vm-closing.hw-closing .hw-closing-line { margin: 26px 0 0; font-size: 15px; color: var(--muted); }

/* ---------- Each stage plays once as it comes into view ----------
   site.js adds .is-in to .reveal; a part with data-hw-in arrives at its place (--d) in reading order, and the struck
   line draws after its row. Opacity and a short rise only, so nothing moves the layout. Without script, or with
   reduced motion, every part is already there. */
.js .reveal [data-hw-in] { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .7s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--d, 0) * 110ms); }
.js .reveal.is-in [data-hw-in] { opacity: 1; transform: none; }
.js .reveal .hw-strike { transform: scaleX(0); transform-origin: left center; transition: transform .45s ease .75s; }
.js .reveal.is-in .hw-strike { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal [data-hw-in], .js .reveal .hw-strike { opacity: 1; transform: none; transition: none; }
}

/* ---------- Narrower screens ---------- */
@media (max-width: 1050px) {
  .hw-act-grid, .hw-find { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .voice-marketing .vm-hero.hw-hero { padding-top: 112px; }
  .voice-marketing .hw-hero h1 { font-size: clamp(40px, 11.4vw, 60px); line-height: 1; letter-spacing: -.052em; }
  .voice-marketing .hw-hero .hw-hero-deck { font-size: 17.5px; }
  .voice-marketing .hw-hero .hero-actions { gap: 10px 18px; }
  .hw-player .hm-player { padding: 18px 16px 14px; border-radius: 18px; }
  .voice-marketing .hw-said p { font-size: 17px; }
  .hw-decide, .hw-dial-grid { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
  .hw-fix { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .hw-summary dl > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .voice-marketing .hw-dial-head h2 { max-width: none; font-size: clamp(30px, 8.4vw, 40px); }
  .voice-marketing .vm-closing.hw-closing h2 { font-size: clamp(34px, 9.6vw, 48px); }
}
/* The narrowest phones: a source's label goes under its text, and "Not in scope" above its list. */
@media (max-width: 360px) {
  .hw-srcs li { grid-template-columns: minmax(0, 1fr); }
  .hw-hit { grid-column: 1; grid-row: auto; margin-top: 4px; }
  .voice-marketing .hw-oos { flex-direction: column; gap: 4px; }
}