/* Voice-to-Text Work Updates (v2) — page-specific styles only.
 *
 * Everything reusable (type scale, cards, dark panels, badges, rule grids,
 * buttons) comes from shared.css. What is left here is either a one-off
 * composition this page invents (the hero device frame, the translate row,
 * the output card) or a value that is genuinely tuned to this page's content.
 *
 * All selectors are scoped to .static-page--voice-to-text-work-updates so
 * nothing can leak into the home or integrations pages.
 */

/* ── Surfaces ──────────────────────────────────────────────────────────────
   Two off-white surfaces alternate with plain white down the page, and a
   hairline marks each change of surface. The values are a hair warmer than
   slate-50 so they read as paper rather than as grey. */
.static-page--voice-to-text-work-updates .vt-surface-soft {
    background: #FBFDFC;
}
.static-page--voice-to-text-work-updates .vt-hairline-top {
    border-top: 1px solid #EEF2F1;
}

/* ── Hero ──────────────────────────────────────────────────────────────────
   Two large, very soft radial washes — teal from the top-left, blue from the
   top-right — over the warm off-white. They give the hero depth without a
   hard-edged band, and they fade out well above the metric strip so the strip
   sits on flat colour. */
.static-page--voice-to-text-work-updates .vt-hero {
    background:
        radial-gradient(1100px 520px at 12% -12%, #E8F3F1 0%, transparent 62%),
        radial-gradient(900px 460px at 92% 4%, var(--sp-brand-blue-tint) 0%, transparent 60%),
        #FBFDFC;
    padding-bottom: var(--sp-space-6);
}

/* The live dot in the hero eyebrow. Purely decorative — hidden from AT via
   aria-hidden in the markup — and it respects reduced-motion. */
.static-page--voice-to-text-work-updates .vt-pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sp-brand-teal);
    flex-shrink: 0;
    animation: vtPulse 1.8s ease-in-out infinite;
}
@keyframes vtPulse {
    0%, 100% { opacity: 0.35; }
    50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .static-page--voice-to-text-work-updates .vt-pulse-dot { animation: none; opacity: 1; }
}

/* Trust line under the hero CTAs. A <ul> for meaning; the middot separators
   are drawn with ::before, so no separator glyph is in the text, and the
   alt-text form of `content` keeps screen readers from announcing them.

   NO LINE STARTS OR ENDS WITH A DOT. Every item, the first included, carries
   its dot at its own start, and every item is pulled left by a negative margin
   exactly the width of that dot and the space after it; the column gap is
   widened by the same amount, so where items share a line the spacing is what
   it always was (item, space, dot, space, item). Whichever item the wrap puts
   first on a line therefore has its dot hanging outside the list's left edge,
   where overflow:hidden clips it, and because dots precede items none can
   trail at a line's end. Wrapping is decided on the same widths as before, so
   the line still reads as one row wherever it fits. Pure CSS: nothing to rerun
   on resize or after the web font loads. */
.static-page--voice-to-text-work-updates .vt-trust-line {
    --vt-trust-space: 1.25rem;  /* either side of a dot */
    --vt-trust-dot: 0.27em;     /* the dot's own box, one middot wide */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem calc(var(--vt-trust-dot) + 2 * var(--vt-trust-space));
    overflow: hidden;
    list-style: none;
    margin: 2.5rem 0 0;
    padding: 1.6rem 0 0;
    border-top: 1px solid #E7EEEC;
    font-size: 0.85rem;
    color: var(--sp-ink-faint);
}
.static-page--voice-to-text-work-updates .vt-trust-line li {
    display: flex;
    align-items: center;
    margin: 0 0 0 calc(-1 * (var(--vt-trust-dot) + var(--vt-trust-space)));
}
.static-page--voice-to-text-work-updates .vt-trust-line li::before {
    content: "·";
    content: "·" / "";
    flex: none;
    width: var(--vt-trust-dot);
    margin-right: var(--vt-trust-space);
    text-align: center;
    color: #CFDAD7;
}

/* Hero figure: the phone screenshot in a deep-teal bezel, over a soft radial
   halo. The halo is a separate absolutely-positioned element rather than a
   background on the frame so it can bleed past the frame's rounded corners. */
.static-page--voice-to-text-work-updates .vt-hero-figure {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.static-page--voice-to-text-work-updates .vt-hero-figure__glow {
    position: absolute;
    bottom: 0;
    width: min(420px, 100%);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, #D9ECE8 0%, transparent 68%);
    pointer-events: none;
}
/* Stage for the shared Voice Updates animation (shared.css §10). The component
   fills its container, so the container is what sets the hero scale. No fixed
   aspect ratio: the home page gives the component a square and its card is
   `align-self: stretch`, which here left the card taller than its content with
   dead white below the Save row. Sizing the stage to content and centring the
   card fixes that without touching the shared component. */
.static-page--voice-to-text-work-updates .vt-voice-stage {
    position: relative;
    width: 100%;
    max-width: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.static-page--voice-to-text-work-updates .vt-voice-stage .voice {
    height: auto;
}
.static-page--voice-to-text-work-updates .vt-voice-stage .voice__card {
    align-self: center;
}

/* ── Metric strip ──────────────────────────────────────────────────────── */
.static-page--voice-to-text-work-updates .vt-metric__value {
    font-size: clamp(2rem, 3.2vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--sp-brand-teal);
    margin-bottom: 0.6rem;
}
.static-page--voice-to-text-work-updates .vt-metric__label {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--sp-ink-muted);
    max-width: 12rem;
}

/* ── Dark band: copy left, photo card right ───────────────────────────────
   The photo card sits in the right column of a two-column split, capped at
   520px so the photograph stays card-sized; stacked, the shared split rules
   place it under the heading and it recentres. */
.static-page--voice-to-text-work-updates .vt-input-card {
    width: 100%;
    max-width: 520px;
    margin-left: auto;
}
@media (max-width: 1023.98px) {
    .static-page--voice-to-text-work-updates .vt-input-card {
        margin-inline: auto;
    }
}

/* The three steps on the left of the dark band, the same rule rows the
   alerts, summaries, MCP and security pages use in theirs. */
.static-page--voice-to-text-work-updates .vt-band-rule {
    padding-left: 1rem;
    border-left: 2px solid rgba(134, 207, 196, 0.45);
}
.static-page--voice-to-text-work-updates .vt-band-rule__name {
    font-family: var(--sp-font-display);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.35;
    color: #ffffff;
    margin: 0 0 0.3rem;
}
.static-page--voice-to-text-work-updates .vt-band-rule__text {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--sp-ink-on-dark);
    margin: 0;
}

/* Input card: the photograph on a white surface. The brand rules require a
   white ground for generated artwork regardless of the panel it sits on. */
.static-page--voice-to-text-work-updates .vt-input-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 1.9rem 1.9rem 1.6rem;
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.7);
}
/* The photo variant carries its own white gutters, so its outer edge blends into
   the card. The small radius keeps its corners from fighting the card's. */
.static-page--voice-to-text-work-updates .vt-input-card img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
}

/* ── Live transcript line ──────────────────────────────────────────────────
   Sits under the illustration where the language-code pills used to. body.js
   types one phrase at a time and cycles; this file owns the resting shape, so
   the layout is correct before the script runs and stays correct if it never
   does.

   The reserved height is the whole trick. A line whose height depends on the
   characters currently typed makes the card grow and shrink on every keystroke
   and shoves the section below it up and down. So the container is given the
   height of exactly one line up front and the text is painted into that fixed
   box. --vt-type-size is declared here rather than inlined so the size and the
   reserved height can never drift apart. */
.static-page--voice-to-text-work-updates .vt-typing {
    --vt-type-size: 0.9rem;
    --vt-type-leading: 1.6;
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px solid #EEF2F1;
}

/* Pre-JS and no-JS state: the five phrases as a plain list. Not styled as
   pills — a pill holding a whole sentence reads as a broken tag rather than
   as a quiet fallback. */
.static-page--voice-to-text-work-updates .vt-typing__source {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--vt-type-size);
    line-height: var(--vt-type-leading);
    color: var(--sp-ink-soft);
}

/* Once body.js takes over it sets .is-live, which clips the source list out of
   sight while leaving it in the accessibility tree and in the page's text. The
   clip-rect technique rather than display:none precisely because display:none
   would take it out of both. */
.static-page--voice-to-text-work-updates .vt-typing.is-live .vt-typing__source {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.static-page--voice-to-text-work-updates .vt-typing__line {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin: 0;
    /* One line's worth of box, held whatever is in it — see above. */
    min-height: calc(var(--vt-type-size) * var(--vt-type-leading));
    overflow: hidden;
    font-size: var(--vt-type-size);
    line-height: var(--vt-type-leading);
    color: var(--sp-ink);
}
/* The language code keeps the tinted mono pill the old codes used, so the
   treatment survives the change — there is now one of them and it changes with
   the phrase, instead of five sitting still. flex-none and a min-width stop the
   line jumping sideways as the code changes width between two- and three-letter
   codes. */
.static-page--voice-to-text-work-updates .vt-typing__code {
    flex: none;
    min-width: 2.4rem;
    padding: 0.3rem 0.55rem;
    border-radius: 9999px;
    background: var(--sp-brand-teal-tint);
    color: var(--sp-brand-teal-dark);
    font-family: var(--sp-font-mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1;
    text-align: center;
}
/* nowrap makes the single line structural rather than a property of the current
   copy: without it the line is one line only for as long as nobody writes a
   longer phrase, and the first person who does gets a card that grows and
   shrinks mid-keystroke. overflow:hidden on the line is the backstop — if a
   phrase ever does outgrow the card it clips at the edge instead of pushing
   the layout sideways. The phrases are sized to fit at the narrowest card,
   which is the mobile one, so neither should ever fire. */
.static-page--voice-to-text-work-updates .vt-typing__text {
    min-width: 0;
    white-space: nowrap;
}
/* The caret is what reads as "someone is still speaking". It blinks only while
   the line is holding at the end of a phrase; during typing it is solid, which
   is how a real cursor behaves. */
.static-page--voice-to-text-work-updates .vt-typing__caret {
    display: inline-block;
    width: 2px;
    height: calc(var(--vt-type-size) * 1.15);
    margin-left: 1px;
    transform: translateY(2px);
    background: var(--sp-brand-teal);
}
.static-page--voice-to-text-work-updates .vt-typing.is-holding .vt-typing__caret {
    animation: vtCaret 1s steps(1, end) infinite;
}
@keyframes vtCaret {
    0%, 50%   { opacity: 1; }
    50.01%, 100% { opacity: 0; }
}

/* Below the two-column breakpoint the card is narrow enough that the longest
   phrase (the German one) would wrap and break the single-line promise. */
@media (max-width: 767px) {
    .static-page--voice-to-text-work-updates .vt-typing {
        --vt-type-size: 0.78rem;
    }
}

/* Reduced motion: same contract as the voice animation in shared.css §10 —
   stop at a resolved state, never a blank one. body.js paints the first phrase
   complete and stops, so the card still makes its point standing still. */
@media (prefers-reduced-motion: reduce) {
    .static-page--voice-to-text-work-updates .vt-typing__caret {
        animation: none;
        opacity: 1;
    }
}

/* ── What each update records: captured list ──────────────────────────────
   Six items, each with a teal tick, so the list reads as "filled in for you"
   rather than as a feature inventory. */
.static-page--voice-to-text-work-updates .vt-captured {
    list-style: none;
    margin-left: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.static-page--voice-to-text-work-updates .vt-captured li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--sp-ink-soft);
}
.static-page--voice-to-text-work-updates .vt-captured i {
    flex: none;
    margin-top: 0.3rem;
    font-size: 0.85rem;
    color: var(--sp-brand-teal);
}

/* ── Work update editor mock ───────────────────────────────────────────────
   A markup version of the app's entry modal (family B, record card). Content
   is the page's own example. Unitless line-height on the root, because the
   theme's inherited length leading would add dead space at mock type sizes. */
.static-page--voice-to-text-work-updates .vt-entry-wrap {
    width: 100%;
    max-width: 34rem;
    margin-inline: auto;
}
.static-page--voice-to-text-work-updates .vt-entry {
    --mk-pad: 1.5rem;
    background: #ffffff;
    border: 1px solid #E7EEEC;
    border-radius: 16px;
    padding: var(--mk-pad);
    line-height: 1.35;
    letter-spacing: -0.005em;
    color: var(--sp-ink);
    text-align: left;
    box-shadow: 0 1px 2px rgba(21, 41, 39, 0.05),
                0 18px 40px -26px rgba(21, 41, 39, 0.45);
}
.static-page--voice-to-text-work-updates .vt-entry__who {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 1.25rem;
}
.static-page--voice-to-text-work-updates .vt-entry__who img {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    flex: none;
}
.static-page--voice-to-text-work-updates .vt-entry__who > span {
    display: flex;
    flex-direction: column;
}
.static-page--voice-to-text-work-updates .vt-entry__name {
    font-family: var(--sp-font-display);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--sp-brand-teal);
}
.static-page--voice-to-text-work-updates .vt-entry__role {
    font-size: 0.8rem;
    color: var(--sp-ink-soft);
}
.static-page--voice-to-text-work-updates .vt-entry__dept {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--sp-ink);
}
.static-page--voice-to-text-work-updates .vt-entry__row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.9rem;
    margin-bottom: 0.9rem;
}
.static-page--voice-to-text-work-updates .vt-entry__row--title {
    grid-template-columns: 1fr 5.5rem;
}
.static-page--voice-to-text-work-updates .vt-entry__row--half {
    grid-template-columns: 1fr 1fr;
}
.static-page--voice-to-text-work-updates .vt-entry__cell {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.static-page--voice-to-text-work-updates .vt-entry__cell--end {
    align-items: flex-end;
}
.static-page--voice-to-text-work-updates .vt-entry__label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--sp-ink);
    margin-bottom: 0.3rem;
}
.static-page--voice-to-text-work-updates .vt-entry__text {
    font-size: 0.78rem;
    color: var(--sp-ink-soft);
}
.static-page--voice-to-text-work-updates .vt-entry__source {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.22rem 0.55rem;
    border: 1px solid #E6EDEB;
    border-radius: 7px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--sp-ink);
}
.static-page--voice-to-text-work-updates .vt-entry__source i {
    color: var(--sp-brand-teal);
}
.static-page--voice-to-text-work-updates .vt-entry__field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid #E6EDEB;
    border-radius: 10px;
    background: #ffffff;
    font-size: 0.76rem;
    color: var(--sp-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.static-page--voice-to-text-work-updates .vt-entry__field i {
    flex: none;
    font-size: 0.8rem;
    color: var(--sp-ink-muted);
}
.static-page--voice-to-text-work-updates .vt-entry__desc {
    margin: 0;
    padding: 0.65rem 0.75rem;
    border: 1px solid #E6EDEB;
    border-radius: 10px;
    font-size: 0.76rem;
    line-height: 1.75;
    color: var(--sp-ink);
}
.static-page--voice-to-text-work-updates .vt-entry__chip {
    display: inline-block;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    line-height: 1.5;
}
.static-page--voice-to-text-work-updates .vt-entry__chip--customer {
    background: var(--sp-brand-teal-tint);
    border: 1px solid var(--sp-brand-teal-soft);
    color: var(--sp-brand-teal-dark);
}
.static-page--voice-to-text-work-updates .vt-entry__chip--project {
    background: var(--sp-brand-blue-tint);
    border: 1px solid rgba(40, 127, 171, 0.25);
    color: var(--sp-brand-blue);
}
.static-page--voice-to-text-work-updates .vt-entry__hint {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.66rem;
    color: var(--sp-ink-muted);
}
.static-page--voice-to-text-work-updates .vt-entry__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.55rem;
    margin-top: 1.05rem;
}
.static-page--voice-to-text-work-updates .vt-entry__btn {
    padding: 0.45rem 1rem;
    border-radius: 999px;
    border: 1px solid #E6EDEB;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--sp-ink-soft);
}
.static-page--voice-to-text-work-updates .vt-entry__btn--primary {
    background: var(--sp-brand-teal);
    border-color: var(--sp-brand-teal);
    color: #ffffff;
    box-shadow: 0 6px 14px -8px rgba(32, 121, 111, 0.9);
}
@media (max-width: 479px) {
    .static-page--voice-to-text-work-updates .vt-entry {
        --mk-pad: 1.05rem;
    }
    .static-page--voice-to-text-work-updates .vt-entry__row--half {
        grid-template-columns: 1fr;
    }
}

/* ── Schedule rows ─────────────────────────────────────────────────────── */
.static-page--voice-to-text-work-updates .vt-schedule-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: #FBFDFC;
    border: 1px solid #E7EEEC;
    border-radius: 12px;
    padding: 0.9rem 1.1rem;
}
.static-page--voice-to-text-work-updates .vt-schedule-row__team {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--sp-ink);
}
.static-page--voice-to-text-work-updates .vt-schedule-row__when {
    font-family: var(--sp-font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sp-brand-teal);
    white-space: nowrap;
}

/* Below the width where a role name and its schedule share a line, the
   schedule drops under the name rather than squeezing it onto two lines. */
@media (max-width: 479px) {
    .static-page--voice-to-text-work-updates .vt-schedule-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
    }
    .static-page--voice-to-text-work-updates .vt-schedule-row__when {
        text-align: left;
    }
}

/* When the list is narrower than the longest row needs on one line (about
   416px: "Software developer" beside "MONTHLY · 2ND THU · 5:00 PM"), which the
   copy column is at the narrow end of the desktop layout, that one row wrapped
   its name and stood taller than the other two. A container query on the list,
   rather than a viewport width, stacks all three rows together whenever the
   longest cannot fit, in the same stacked form phones get below 480px, so the
   rows always match each other. */
.static-page--voice-to-text-work-updates .vt-schedule-list {
    container-type: inline-size;
}
@container (max-width: 26.5rem) {
    .static-page--voice-to-text-work-updates .vt-schedule-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
    }
    .static-page--voice-to-text-work-updates .vt-schedule-row__when {
        text-align: left;
    }
}

/* ── Prompt & cadence configuration mock ───────────────────────────────────
   The graphic for "Role-based prompts & scheduled cadences", built as markup
   rather than as a PNG or a generated image. It is a UI mock made almost
   entirely of small type, which is exactly what raster and generative output
   handle worst: text stays sharp at any pixel density, uses the real brand
   font and the real teal, and is edited by changing a word.

   Scale. A mock has to read as a screen seen at a distance, not as a control
   panel the visitor could click, so everything is set from --mk-pad and the
   small type sizes below rather than from the page's body scale. Retune the
   whole thing by changing --mk-pad and the four font sizes together.

   Layout: the panels stack in normal flow — the list at 82% width on the left,
   the dialog at 64% on the right — and the dialog is pulled up by a negative
   margin so it clips the list's lower-right corner. The widths summing past
   100% is what creates the horizontal overlap.

   Why the overlap is safe to make this deep: at these widths the dialog's left
   edge lands to the right of every label, role name and empty-state line in
   the panel behind it, so vertical overlap can only ever reach whitespace and
   right-hand values. The pull-up is therefore free to be sized for the
   composition, and is set to clear the trailing role group — the one with no
   update types, and so no frequency values to lose. Adding a fourth role that
   does have frequencies would mean reducing it.

   Below 560px the pull-up is dropped and they simply stack. */
.static-page--voice-to-text-work-updates .vt-config {
    --mk-pad: 1.05rem;
    --mk-radius: 14px;
    display: flex;
    flex-direction: column;
    /* Capped and centred: between the one-column breakpoint and the desktop
       two-column layout the section is full width, and an uncapped mock
       stretches its fields into thin, sparse rows that stop reading as a
       screen. */
    max-width: 33rem;
    margin-inline: auto;
    letter-spacing: -0.005em;
    /* Real interfaces are dense. Left to inherit, the page's ~1.9 body
       line-height nearly double-spaces 11px UI text and adds ~200px of empty
       leading down the mock — the single biggest reason it read as oversized
       rather than as a screen. Prose inside it overrides this locally. */
    line-height: 1.35;
}
.static-page--voice-to-text-work-updates .vt-config__panel {
    background: #ffffff;
    border: 1px solid #E9EFEE;
    border-radius: var(--mk-radius);
    padding: var(--mk-pad);
    /* Two shadows: a tight one to hold the edge against white, and a wide
       diffuse one for lift. One shadow doing both jobs is either too hard at
       the edge or too weak underneath. */
    box-shadow:
        0 1px 2px rgba(21, 41, 39, 0.05),
        0 18px 40px -26px rgba(21, 41, 39, 0.45);
}
.static-page--voice-to-text-work-updates .vt-config__panel--types {
    width: 82%;
    align-self: flex-start;
    padding-bottom: calc(var(--mk-pad) + 0.35rem);
}
.static-page--voice-to-text-work-updates .vt-config__panel--prompt {
    width: 64%;
    align-self: flex-end;
    /* Sized to stop just below the last row that carries a frequency value.
       Everything under that point is the trailing empty role, whose text is
       short enough to sit left of this panel's edge — so this is the deepest
       overlap available without hiding data. */
    margin-top: -6rem;
    /* In front, and with a deeper shadow, so the stacking order reads as
       depth rather than as two panels that happen to collide. */
    position: relative;
    z-index: 1;
    box-shadow:
        0 1px 2px rgba(21, 41, 39, 0.06),
        0 26px 54px -24px rgba(21, 41, 39, 0.5);
}

/* Shared panel header: name on the left, context chip on the right. */
.static-page--voice-to-text-work-updates .vt-config__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.95rem;
}
.static-page--voice-to-text-work-updates .vt-config__title {
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--sp-ink);
}
.static-page--voice-to-text-work-updates .vt-config__role {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    padding: 0.22rem 0.5rem;
    border: 1px solid var(--sp-brand-teal-soft);
    border-radius: 999px;
    background: var(--sp-brand-teal-tint);
    font-size: 0.63rem;
    font-weight: 700;
    color: var(--sp-brand-teal);
    white-space: nowrap;
}
.static-page--voice-to-text-work-updates .vt-config__role i {
    font-size: 0.82rem;
}
.static-page--voice-to-text-work-updates .vt-config__role .vt-config__caret {
    font-size: 0.62rem;
    opacity: 0.55;
}
/* Role groups. Each role owns its own list of update types and its own
   frequencies, separated by a hairline the way the real settings screen
   separates one role card from the next. The active role — the one the front
   panel is editing — takes the teal, so the eye can follow role name to role
   chip across the two panels. */
.static-page--voice-to-text-work-updates .vt-role + .vt-role {
    margin-top: 0.95rem;
    padding-top: 0.95rem;
    border-top: 1px solid #EFF4F3;
}
.static-page--voice-to-text-work-updates .vt-role__name {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.5rem 0.55rem;
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--sp-ink);
}
/* A tinted disc per role. It costs no height — it sits inside the name's own
   line — and it gives each group a fixed anchor point, so the three groups
   read as three roles at a glance instead of as one long list. The row icons
   below share its width, which is what keeps every label on one left edge. */
.static-page--voice-to-text-work-updates .vt-role__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 50%;
    background: var(--sp-brand-teal-tint);
    font-size: 0.92rem;
    color: var(--sp-brand-teal);
}
.static-page--voice-to-text-work-updates .vt-role.is-active .vt-role__name {
    color: var(--sp-brand-teal);
}
.static-page--voice-to-text-work-updates .vt-role__empty {
    margin: 0 0 0.2rem 2.5rem;
    font-size: 0.72rem;
    font-style: italic;
    color: var(--sp-ink-faint);
}

/* Row furniture: a type icon on the left at the role disc's width so labels
   line up, and a caret on the right. The caret is honest — in the real screen
   every one of these rows opens the panel shown in front. */
.static-page--voice-to-text-work-updates .vt-item__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.55rem;
    font-size: 0.92rem;
    color: var(--sp-ink-muted);
}
.static-page--voice-to-text-work-updates .vt-item__label {
    flex: 1 1 auto;
    min-width: 0;
}
.static-page--voice-to-text-work-updates .vt-item__caret {
    flex: none;
    font-size: 0.7rem;
    color: #CBD8D5;
}
.static-page--voice-to-text-work-updates .vt-config__item.is-selected .vt-item__icon,
.static-page--voice-to-text-work-updates .vt-config__item.is-selected .vt-item__caret {
    color: var(--sp-brand-teal);
}

/* Frequency, not a checkbox: it is the value that actually differs between
   roles, so it is what the right-hand column has to carry. "Progress update"
   appears twice in the list on two different frequencies for exactly this
   reason. */
.static-page--voice-to-text-work-updates .vt-freq {
    font-size: 0.74rem;
    color: var(--sp-ink-soft);
    white-space: nowrap;
}
/* Teal is reserved for the row the front panel is editing. Colouring every
   frequency put five identical accents in competition and flattened the one
   link the composition exists to show. */
.static-page--voice-to-text-work-updates .vt-config__item.is-selected .vt-freq {
    color: var(--sp-brand-teal);
    font-weight: 600;
}

/* Update-type list. The selected row is tinted and bar-marked because it is
   the one the prompt panel in front is configuring — that link is the whole
   reason the two panels are shown together. */
.static-page--voice-to-text-work-updates .vt-config__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.static-page--voice-to-text-work-updates .vt-config__list > li + li {
    border-top: 1px solid #F2F6F5;
}
.static-page--voice-to-text-work-updates .vt-config__item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.52rem 0.55rem;
    font-size: 0.74rem;
    font-weight: 500;
    color: var(--sp-ink-soft);
}
.static-page--voice-to-text-work-updates .vt-config__item.is-selected {
    /* Bleeds to the panel's inner edges by cancelling its padding, while the
       inline padding is added back so the label stays on the shared left edge
       with every other row. No left bar: it was a second signal doing the same
       job as the tint, and at this size two signals on one row read as noise. */
    margin-inline: calc(-1 * var(--mk-pad));
    padding-inline: calc(var(--mk-pad) + 0.55rem);
    background: var(--sp-brand-teal-tint);
    font-weight: 700;
    color: var(--sp-ink);
}
/* Prompt panel fields. Teal appears at three weights and nothing else is
   coloured: tinted for "on" states, solid for the one action. */
.static-page--voice-to-text-work-updates .vt-config__prompt {
    margin: 0 0 0.9rem;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--sp-brand-teal-soft);
    border-radius: 10px;
    background: #ffffff;
    /* A soft ring rather than a plain box: this field is the one being edited,
       which is what the Save button at the foot is there to commit. */
    box-shadow: 0 0 0 3px rgba(32, 121, 111, 0.07);
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--sp-ink-soft);
}
/* Bold sentence case, not mono uppercase. The mono treatment was mine; both
   the concept render and the real settings screen label these fields as plain
   bold words, and once the frequency values read as words too, a tracked
   all-caps micro-label is the only thing in the mock speaking a different
   language. */
.static-page--voice-to-text-work-updates .vt-config__label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--sp-ink);
}
.static-page--voice-to-text-work-updates .vt-config__time {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.85rem;
}
.static-page--voice-to-text-work-updates .vt-time-field {
    min-width: 1.95rem;
    padding: 0.3rem 0.4rem;
    border: 1px solid #E6EDEB;
    border-radius: 7px;
    background: #ffffff;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--sp-ink);
}
.static-page--voice-to-text-work-updates .vt-time-sep {
    font-weight: 700;
    color: var(--sp-ink-faint);
}
.static-page--voice-to-text-work-updates .vt-meridiem {
    display: inline-flex;
    margin-left: 0.25rem;
    border: 1px solid #E6EDEB;
    border-radius: 7px;
    overflow: hidden;
}
.static-page--voice-to-text-work-updates .vt-meridiem b {
    padding: 0.3rem 0.4rem;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--sp-ink-muted);
}
.static-page--voice-to-text-work-updates .vt-meridiem b.is-on {
    background: var(--sp-brand-teal);
    color: #ffffff;
}
/* Seven equal columns filling the row. A selected day is solid teal with a
   white tick rather than a pale tint: at this size the tick is what reads as
   "chosen" from across the page, and the tint alone did not. */
.static-page--voice-to-text-work-updates .vt-config__days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.26rem;
    margin-bottom: 1.05rem;
}
.static-page--voice-to-text-work-updates .vt-day {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    padding: 0.32rem 0;
    border: 1px solid #E6EDEB;
    border-radius: 7px;
    background: #ffffff;
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--sp-ink-muted);
}
.static-page--voice-to-text-work-updates .vt-day.is-on {
    background: var(--sp-brand-teal);
    border-color: var(--sp-brand-teal);
    color: #ffffff;
}
.static-page--voice-to-text-work-updates .vt-day__tick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.72rem;
    height: 0.72rem;
    border-radius: 50%;
    background: #ffffff;
    font-size: 0.44rem;
    color: var(--sp-brand-teal);
}
/* Full width on its own line. The action bar it replaces is gone: a solid
   full-width button already gives the panel the base the bar was providing,
   and the bar's height was pure cost once the dialog grew. */
.static-page--voice-to-text-work-updates .vt-config__save {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.55rem 1.05rem;
    border-radius: 8px;
    background: var(--sp-brand-teal);
    font-size: 0.72rem;
    font-weight: 700;
    color: #ffffff;
    box-shadow: 0 6px 14px -8px rgba(32, 121, 111, 0.9);
}

@media (max-width: 559px) {
    /* On a phone the title and the role chip are wider than the panel.
       Wrapping the chip onto its own line keeps "Update types" whole; letting
       the title wrap instead breaks a two-word heading across two lines. */
    .static-page--voice-to-text-work-updates .vt-config__head {
        flex-wrap: wrap;
    }
    .static-page--voice-to-text-work-updates .vt-config__title {
        white-space: nowrap;
    }
    .static-page--voice-to-text-work-updates .vt-config__panel--types,
    .static-page--voice-to-text-work-updates .vt-config__panel--prompt {
        width: 100%;
    }
    .static-page--voice-to-text-work-updates .vt-config__panel--prompt {
        margin-top: 0.85rem;
    }
}
/* ── Screenshot frame ──────────────────────────────────────────────────────
   A tinted mat around a white card around the image, so a flat product
   screenshot gains an edge and stops floating on the white section.

   Currently unused: the role-based section that carried the dashboard
   screenshot now uses .vt-config above. Kept because assets/dashboard.png is
   still a candidate for the "Compiled reports & dashboards" section, which is
   where it actually belongs. */
.static-page--voice-to-text-work-updates .vt-shot-frame {
    background: linear-gradient(160deg, #E8F3F1, var(--sp-brand-blue-tint));
    border: 1px solid #DFEAE8;
    border-radius: 20px;
    padding: 1.85rem;
}
.static-page--voice-to-text-work-updates .vt-shot-frame__inner {
    background: #ffffff;
    border-radius: 14px;
    padding: 1rem;
    box-shadow: 0 30px 66px -40px rgba(42, 53, 71, 0.65);
}
.static-page--voice-to-text-work-updates .vt-shot-frame img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/* ── Magic-link flow caption ───────────────────────────────────────────────
   An ordered list, because it is a sequence. The arrows between steps are
   drawn with ::before so they are decoration, not content a screen reader
   reads as "down arrow". */
.static-page--voice-to-text-work-updates .vt-flow {
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: var(--sp-font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.9;
    color: var(--sp-ink-faint);
    text-align: left;
}
.static-page--voice-to-text-work-updates .vt-flow li {
    margin: 0;
}
.static-page--voice-to-text-work-updates .vt-flow li + li::before {
    content: "↓";
    display: block;
    color: #CFDAD7;
    letter-spacing: 0;
}
@media (min-width: 1024px) {
    .static-page--voice-to-text-work-updates .vt-flow { text-align: right; }
}

/* ── Connected-source chips (dark card) ──────────────────────────────────
   Each chip is a fixed 34px square holding one service's brand mark. The
   square is what makes a four-logo row read as one set: the marks themselves
   have wildly different aspect ratios and visual weights — Slack's lattice is
   airy, Trello's is a solid filled tile — so letting them sit loose in a flex
   row would give four different apparent sizes. The chip normalises them.

   The translucent white fill rather than a solid one so the chips sit *on*
   the dark card's gradient instead of punching flat holes in it. */
.static-page--voice-to-text-work-updates .vt-source-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.09);
    font-family: var(--sp-font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    color: var(--sp-ink-on-dark-accent);
}
/* 18px inside a 34px chip: the same 8px optical margin the .sp-feature-icon
   disc uses, so the two icon treatments on this page share one ratio. */
.static-page--voice-to-text-work-updates .vt-source-chip svg {
    width: 18px;
    height: 18px;
    display: block;
}
/* Trello's mark is a filled tile that reaches its own edges, where Slack and
   GitHub are open shapes with built-in breathing room. Left at the same 18px
   it reads a size larger than the other three, so it is trimmed to match by
   eye rather than by number. */
.static-page--voice-to-text-work-updates .vt-source-chip[title="Trello"] svg {
    width: 16px;
    height: 16px;
}
.static-page--voice-to-text-work-updates .vt-source-chip i {
    font-size: 1.05rem;
}
/* The dark card's link is a footer to the card, so it needs its own top gap;
   .sp-btn has no margin of its own by design. */
.static-page--voice-to-text-work-updates .vt-dark-link {
    margin-top: 1.5rem;
}

/* ── Closing statement ─────────────────────────────────────────────────────
   The one place on the page set entirely in the italic display face. It is a
   statement of position rather than a section heading, so it is a <p>: making
   it an <h2> would put a heading in the document outline that no section
   hangs off. */
.static-page--voice-to-text-work-updates .vt-statement {
    font-family: var(--sp-font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.6rem, 3vw, 2.35rem);
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: var(--sp-ink);
    max-width: 54rem;
    margin: 0 auto 1.75rem;
    text-wrap: pretty;
}
/* .sp-accent already sets the italic display face; inside the statement it
   only needs to contribute the colour shift. */
.static-page--voice-to-text-work-updates .vt-statement .sp-accent {
    font-size: inherit;
}

/* Copied from the MCP Read API page (mcp-read-api/body.css) with the page
   prefix swapped. If a third copy is needed, move it to shared.css as .sp-faq. */
/* ══ FAQ ═══════════════════════════════════════════════════════════════════
   Native <details>/<summary>. The browser supplies the open/close behaviour,
   the keyboard handling and the correct expanded/collapsed announcement, so
   there is no script and no plugin stylesheet involved, and every answer is in
   the page's text whether or not it has been opened.

   The default disclosure triangle is removed on both the standard and the
   WebKit-prefixed pseudo-element and replaced by a caret on the right, which is
   where this site's other disclosure controls put it. Removing only one of the
   two leaves a stray marker in Safari. */
.static-page--voice-to-text-work-updates .vt-faq{
    max-width: 52rem;
    margin-inline: auto;
}
.static-page--voice-to-text-work-updates .vt-faq__item{
    background: #ffffff;
    border: 1px solid #E9EFEE;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(21, 41, 39, 0.04);
}
.static-page--voice-to-text-work-updates .vt-faq__item + .vt-faq__item{
    margin-top: 0.7rem;
}
.static-page--voice-to-text-work-updates .vt-faq__item[open]{
    border-color: var(--sp-brand-teal-soft);
    box-shadow: 0 1px 2px rgba(21, 41, 39, 0.05),
                0 14px 32px -22px rgba(21, 41, 39, 0.45);
}
.static-page--voice-to-text-work-updates .vt-faq__q{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.05rem 1.3rem;
    cursor: pointer;
    list-style: none;
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.45;
    color: var(--sp-ink);
}
.static-page--voice-to-text-work-updates .vt-faq__q::-webkit-details-marker{ display: none; }
.static-page--voice-to-text-work-updates .vt-faq__q::marker{ content: ""; }
.static-page--voice-to-text-work-updates .vt-faq__item[open] .vt-faq__q{
    color: var(--sp-brand-teal-dark);
}
/* Focus is drawn on the summary itself rather than being left to the UA: the
   summary is the control, and a keyboard user needs to see where they are. */
.static-page--voice-to-text-work-updates .vt-faq__q:focus-visible{
    outline: 2px solid var(--sp-brand-teal);
    outline-offset: -2px;
    border-radius: 14px;
}
/* A tinted disc that fills solid when open, so the control reads as a control
   at a glance. It rotates rather than swapping glyph, which is one rule instead
   of two and keeps open and closed obviously the same button. */
.static-page--voice-to-text-work-updates .vt-faq__caret{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: var(--sp-brand-teal-tint);
    font-size: 0.8rem;
    color: var(--sp-brand-teal);
    transition: transform 0.2s ease, background 0.2s ease;
}
.static-page--voice-to-text-work-updates .vt-faq__item[open] .vt-faq__caret{
    transform: rotate(180deg);
    background: var(--sp-brand-teal);
    color: #ffffff;
}
.static-page--voice-to-text-work-updates .vt-faq__a{
    padding: 0 1.3rem 1.2rem;
}
.static-page--voice-to-text-work-updates .vt-faq__a p{
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--sp-ink-soft);
}
/* The one answer that carries a cross-link puts it on its own line, so it reads
   as the next thing to do rather than as a phrase inside a sentence. */
.static-page--voice-to-text-work-updates .vt-faq__link{
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.7rem;
    font-weight: 600;
    color: var(--sp-brand-teal);
    text-decoration: none;
}
.static-page--voice-to-text-work-updates .vt-faq__link:hover,
.static-page--voice-to-text-work-updates .vt-faq__link:focus-visible{
    color: var(--sp-brand-teal-dark);
    text-decoration: underline;
}
.static-page--voice-to-text-work-updates .vt-faq__link i{
    font-size: 0.85rem;
}

@media (prefers-reduced-motion: reduce) {
    .static-page--voice-to-text-work-updates .vt-faq__caret{
        transition: none;
    }
}