/* DeepMed Dictate: drawn app screens (DictateScreen.ascx), the dictate.aspx sections and the home-page
   showcase visual. Linked from dictate.aspx and index.aspx after deepmed-refined.css. Every class is dm-.
   Site containers stay flat (4px radius, no shadow); pills, large radii and the app's own colours appear
   only inside the drawings. */

/* ---------- App tokens: only inside drawings ---------- */
.dm-phone, .dm-trace-fig {
    --app-blue: #2F5FB3;
    --app-tint: #e7edf8;
    --app-line: #dde4ee;
    --app-surface: #f4f6fa;
    --app-ink: #172d40;
    --app-muted: #526372;
    --app-rec: var(--accent);
}

/* ---------- Page ---------- */
.dm-page :is(h1, h2) { text-wrap: balance; }
.dm-page section[id], .dm-page .lifecycle-section { scroll-margin-top: 52px; }
.dm-page .section-dark .section-title p { color: rgba(255, 255, 255, .78); }
.dm-caption { display: block; margin: .9rem 0 0; font-size: .8125rem; line-height: 1.45; color: var(--gray); }
.dm-caption--dark { color: #dbe7f5; }
figure.dm-fig { margin: 0; }

/* Split header: h2 left, intro right (from 992px). */
body .dm-split-head { margin-bottom: 2.75rem; }
body .dm-split-head h2 { margin: 0 0 1rem; }
body .dm-split-head p { color: var(--gray); max-width: 30rem; margin: 0; text-wrap: pretty; }
@media (min-width: 992px) {
    body .dm-split-head { display: grid; grid-template-columns: 7fr 5fr; gap: 3rem; align-items: end; }
    body .dm-split-head h2 { margin: 0; }
}

/* ---------- Hero ---------- */
.dm-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "actions" "visual" "facts"; }
.dm-hero-copy { grid-area: copy; }
.dm-hero-actions { grid-area: actions; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.dm-hero-visual { grid-area: visual; margin: 0; }
.dm-facts { grid-area: facts; }
body .dm-hero .breadcrumbs { margin: 0 0 1.25rem; font-size: .875rem; }
.dm-lockup { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.5rem; }
.dm-lockup img { width: 56px; height: 56px; border-radius: 22%; flex: none; }
.dm-lockup-text { display: flex; flex-direction: column; line-height: 1.3; }
.dm-lockup-name { font-family: 'IBM Plex Sans', sans-serif; font-weight: 600; font-size: 1.125rem; color: #172d40; }
.dm-lockup-meta { font-size: .875rem; color: var(--gray); }
body .dm-hero p.dm-lede { max-width: 34rem; text-wrap: pretty; }
body .dm-hero p.dm-hero-link { margin: 0; font-size: .95rem; color: var(--gray); align-self: center; }
.btn.btn-accent.dm-cta {
    min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
    padding: .55rem 1.25rem;
}
.btn.dm-cta:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
/* Four product facts as words, in a 2x2 grid with hairlines (an inline list wraps with a stray middot). */
.dm-facts {
    list-style: none; margin: 1.75rem 0 0; padding: 0; max-width: 34rem; border-top: 1px solid var(--border);
    display: grid; grid-template-columns: 1fr 1fr; font-size: .875rem; color: var(--gray); line-height: 1.5;
}
.dm-facts li { padding: .65rem .9rem .65rem 0; border-bottom: 1px solid var(--border); }
.dm-facts li:nth-child(even) { padding-left: .9rem; border-left: 1px solid var(--border); }
.dm-facts li:nth-last-child(-n+2) { border-bottom: 0; }
.dm-stage { position: relative; margin: 1.75rem auto 0; display: flex; justify-content: center; }
.dm-stage .dm-hero-back { display: none; }
.dm-hero-visual .dm-caption { text-align: center; }
@media (max-width: 991.98px) {
    .dm-stage .dm-hero-front { --dm-scale: .84; }
    .dm-stage .dm-hero-front .dm-screen { aspect-ratio: 9 / 15; }
    .dm-stage .dm-hero-front .dm-hide-crop { display: none; }
}
@media (min-width: 992px) {
    .dm-hero-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 480px); column-gap: 4rem;
        grid-template-areas: "copy visual" "actions visual" "facts visual";
        grid-template-rows: auto auto 1fr;
    }
    .dm-hero-visual { align-self: center; }
    .dm-facts { align-self: start; }
    .dm-stage { width: 480px; height: 600px; margin: 0; display: block; }
    .dm-stage .dm-hero-back { display: block; position: absolute; left: 0; top: 60px; z-index: 1; --dm-scale: .78; }
    .dm-stage .dm-hero-front { position: absolute; right: 0; top: 0; z-index: 2; --dm-scale: .94; }
    .dm-hero-visual .dm-caption { text-align: right; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    /* The copy column is narrow beside the phones: a tighter gap and a smaller h1 keep it to three lines. */
    .dm-hero-grid { column-gap: 2.5rem; }
    body .dm-hero h1 { font-size: clamp(2.1rem, 3.4vw, 2.5rem); }
}
@media (min-width: 1200px) {
    .dm-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); }
    .dm-stage { width: 560px; height: 660px; }
    .dm-stage .dm-hero-back { top: 70px; --dm-scale: .88; }
    .dm-stage .dm-hero-front { --dm-scale: 1.07; }
}
@media (max-width: 575.98px) {
    body .dm-hero .breadcrumbs { display: none; }
    .dm-lockup img { width: 48px; height: 48px; }
    .dm-hero-actions .dm-cta { width: 100%; }
    .dm-hero-actions .store-badges { width: 100%; }
    .dm-facts li { padding: .6rem .6rem .6rem 0; }
    .dm-facts li:nth-child(even) { padding-left: .6rem; }
}

/* ---------- Sub-nav ---------- */
.dm-subnav { position: sticky; top: var(--dm-nav-h, 86px); z-index: 1020; background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--border); }
.dm-subnav > .container { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center; }
.dm-subnav-links { position: relative; display: flex; gap: .25rem; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.dm-subnav-links::-webkit-scrollbar { display: none; }
.dm-subnav-links a {
    display: inline-flex; align-items: center; min-height: 48px; padding: 0 .8rem; white-space: nowrap;
    font-size: .9rem; font-weight: 500; color: #172d40; text-decoration: none; border-bottom: 2px solid transparent;
}
.dm-subnav-links a:hover { color: var(--primary); }
.dm-subnav-links a[aria-current="true"] { color: var(--primary); border-bottom-color: var(--primary); }
.dm-subnav .dm-subnav-links a:focus-visible { outline: 3px solid var(--primary); outline-offset: -3px; }
.dm-subnav-cta {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 .5rem;
    font-size: .875rem; font-weight: 600; color: var(--accent); white-space: nowrap; text-decoration: none;
}
.dm-subnav-cta:hover { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 4px; }
.dm-subnav a.dm-subnav-cta:focus-visible { outline: 3px solid var(--primary); outline-offset: -3px; }
@media (min-width: 992px) {
    /* The first link's text lines up with the section content, not its padding. */
    .dm-subnav-links { margin-left: -.8rem; }
}
@media (max-width: 991.98px) {
    .dm-subnav-links { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
}
@media (max-width: 575.98px) {
    .dm-subnav-links a { min-height: 44px; padding: 0 .65rem; }
}

/* ---------- #how: four screens ---------- */
.dm-steps-wrap:focus-visible, .dm-papers-wrap:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.dm-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem; }
.dm-steps > li { display: flex; flex-direction: column; min-width: 0; }
.dm-steps .dm-fig { display: flex; flex-direction: column; align-items: center; }
.dm-steps .dm-caption { text-align: center; margin-top: .6rem; }
.dm-step-text { margin-top: 1.5rem; }
.dm-step-num { display: block; font-family: 'IBM Plex Sans', sans-serif; font-weight: 600; font-size: .875rem; color: var(--primary); }
.dm-step-num::before { content: ""; display: block; width: 24px; height: 2px; background: var(--primary); margin-bottom: .6rem; }
body .dm-steps h3, body .dm-mode h3, body .dm-checks h3 { margin: .35rem 0 .5rem; }
body .dm-steps p { font-size: 1rem; color: var(--gray); margin: 0; line-height: 1.65; }
.dm-rail-hint { display: none; font-size: .875rem; color: var(--gray); margin: 0 0 .75rem; }
@media (min-width: 1200px) {
    .dm-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .dm-steps .dm-device { --dm-scale: .86; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .dm-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
    .dm-steps .dm-device { --dm-scale: .74; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .dm-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem 2rem; }
    .dm-steps .dm-device { --dm-scale: .8; }
}
@media (max-width: 767.98px) {
    .dm-rail-hint { display: block; }
    .dm-steps-wrap { overflow-x: auto; margin: 0 -12px; padding: 0 12px 12px; scroll-snap-type: x mandatory; scroll-padding-inline: 12px; }
    .dm-steps-wrap:focus-visible { outline-offset: -3px; }
    .dm-steps { grid-auto-flow: column; grid-auto-columns: min(80vw, 340px); width: max-content; gap: 1.25rem; }
    .dm-steps > li { scroll-snap-align: start; }
    .dm-steps .dm-device { --dm-scale: .8; }
}
.dm-hood { max-width: 46rem; margin-top: 2.5rem; border-top: 1px solid var(--border); }
.dm-hood summary {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 48px;
    font-size: 1rem; font-weight: 600; color: var(--secondary); cursor: pointer; list-style: none;
}
.dm-hood summary::-webkit-details-marker { display: none; }
.dm-hood summary::after { content: "+"; font-family: 'IBM Plex Sans', sans-serif; font-size: 1.4rem; font-weight: 500; line-height: 1; color: var(--primary); }
.dm-hood[open] summary::after { content: "\2212"; }
.dm-hood summary:hover { color: var(--primary); }
.dm-hood summary:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.dm-hood .tick-list { margin: .25rem 0 1rem; }

/* ---------- #review: the trace ---------- */
.dm-trace-fig { margin: 0; }
.dm-trace { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.dm-trace-panel { background: #fff; border: 1px solid var(--border); border-radius: 4px; padding: 1.25rem; display: flex; flex-direction: column; min-width: 0; }
.dm-trace-k { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .85rem; font-size: .8125rem; font-weight: 600; color: var(--primary); }
.dm-trace-k b { font-family: 'IBM Plex Sans', sans-serif; font-weight: 600; color: var(--gray); }
.dm-trace-link { position: relative; height: 2rem; }
.dm-trace-link::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 2px; border-left: 2px solid #2F5FB3; margin-left: -1px; }
.dm-trace-link::after { content: ""; position: absolute; left: calc(50% - 6px); bottom: -1px; border: 6px solid transparent; border-top: 8px solid #2F5FB3; border-bottom: 0; }
.dm-trace-note { margin-top: auto; padding-top: .85rem; border-top: 1px solid var(--border); font-size: .92rem; color: var(--gray); line-height: 1.6; }
.dm-app { font-size: 13px; line-height: 1.45; color: var(--app-ink); margin-bottom: 1rem; }
.dm-app-h { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--app-muted); margin: 0 0 6px; }
.dm-app-line { margin: 0 0 7px; }
.dm-app .dm-hl { background: var(--app-tint); box-shadow: inset 3px 0 var(--app-blue); border-radius: 4px; padding: 6px 8px; }
.dm-app .dm-nd { color: var(--app-muted); font-style: italic; border-bottom: 1px dashed #94a3b8; }
.dm-app .dm-kv { margin: 0; }
.dm-app .dm-kv dt { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--app-muted); }
.dm-app .dm-kv dd { margin: 2px 0 10px; }
.dm-app .dm-quote { background: var(--app-surface); box-shadow: inset 3px 0 var(--app-blue); padding: 6px 8px; border-radius: 4px; font-style: italic; }
.dm-app-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--app-blue); color: var(--app-blue); border-radius: 8px; padding: 5px 12px; font-weight: 600; font-size: 12.5px; background: #fff; }
.dm-tx { display: grid; grid-template-columns: 44px 1fr; gap: 8px; padding: 6px 0; border-bottom: 1px solid #eef2f7; }
.dm-tx-t { font-family: 'IBM Plex Sans', sans-serif; font-weight: 600; color: var(--app-muted); font-size: 12px; }
.dm-tx--on .dm-tx-t { color: var(--app-blue); }
.dm-app mark { background: #fde9a8; color: #172d40; padding: 0 2px; border-radius: 2px; }
.dm-wave { display: flex; align-items: center; gap: 2px; width: 118px; height: 30px; margin: 12px 0 8px; position: relative; }
.dm-wave span { width: 3px; flex: none; border-radius: 2px; background: #c7d3ea; height: 50%; }
.dm-wave span:nth-child(-n+16) { background: var(--app-blue); }
.dm-wave span:nth-child(6n+1) { height: 40%; } .dm-wave span:nth-child(6n+2) { height: 75%; }
.dm-wave span:nth-child(6n+3) { height: 55%; } .dm-wave span:nth-child(6n+4) { height: 95%; }
.dm-wave span:nth-child(6n+5) { height: 62%; } .dm-wave span:nth-child(6n) { height: 32%; }
.dm-wave span:nth-child(7n) { height: 85%; } .dm-wave span:nth-child(11n) { height: 25%; }
.dm-wave i { position: absolute; left: 66%; top: -3px; bottom: -3px; width: 2px; background: #0f172a; }
.dm-playing { font-size: 12.5px; font-weight: 600; color: var(--app-blue); }
@media (min-width: 992px) {
    .dm-trace { grid-template-columns: 1fr 3rem 1fr 3rem 1fr; }
    .dm-trace-link { height: auto; }
    .dm-trace-link::before { left: 0; right: 2px; top: 50%; bottom: auto; border-left: 0; border-top: 2px solid #2F5FB3; margin: -1px 0 0; }
    .dm-trace-link::after { left: auto; right: -1px; top: calc(50% - 6px); bottom: auto; border: 6px solid transparent; border-left: 8px solid #2F5FB3; border-right: 0; }
}
.dm-removed {
    margin-top: 1rem; border: 1px dashed #aab9c2; border-radius: 4px; padding: 1rem 1.25rem;
    background: repeating-linear-gradient(135deg, #fafbfc 0 8px, #f3f6f8 8px 16px);
    display: grid; gap: .85rem;
}
.dm-removed-label b { display: block; font-family: 'IBM Plex Sans', sans-serif; font-weight: 600; color: var(--secondary); font-size: 1rem; }
.dm-removed-label span { font-size: .875rem; color: var(--gray); }
.dm-removed-item { font-size: .95rem; min-width: 0; }
.dm-removed-item s { display: block; color: #526372; text-decoration-color: #8a1730; text-decoration-thickness: 1.5px; }
.dm-removed-why { display: block; margin-top: .2rem; font-size: .8125rem; font-weight: 600; color: #8a1730; }
@media (min-width: 992px) {
    .dm-removed { grid-template-columns: 14rem 1fr 1fr; gap: 2rem; align-items: center; }
}
.dm-checks { margin-top: 3rem; }
.dm-checks .tick-list li { break-inside: avoid; }
@media (min-width: 768px) {
    .dm-checks .tick-list { columns: 2; column-gap: 3rem; }
}
/* ---------- #modes ---------- */
.dm-mode { background: #fff; border: 1px solid var(--border); border-radius: 4px; padding: 2rem; display: flex; flex-direction: column; height: 100%; transition: border-color .2s; }
.dm-mode:hover { border-color: #aab9c2; }
body .dm-mode h3 { margin-top: 0; }
body .dm-mode > p { color: var(--gray); margin: 0; }
@media (max-width: 575.98px) { .dm-mode { padding: 1.25rem; } }

/* ---------- #documents: paper thumbnails ---------- */
.dm-papers { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.dm-papers > li { min-width: 0; }
.dm-papers figure { margin: 0; }
.dm-paper { aspect-ratio: 4 / 5; background: #fff; border: 1px solid #d8e1e7; border-radius: 4px; padding: 14px; position: relative; overflow: hidden; font-size: 9.5px; line-height: 1.3; }
.dm-paper-t { font-family: 'IBM Plex Sans', sans-serif; font-weight: 600; font-size: 11.5px; color: #172d40; margin-bottom: 8px; padding-right: 40px; }
.dm-paper-tag { position: absolute; top: 12px; right: 10px; font-size: 8px; font-weight: 700; letter-spacing: .1em; color: #8a1730; border: 1px solid #f3b5c0; border-radius: 2px; padding: 1px 4px; line-height: 1.4; }
.dm-paper-s { font-weight: 700; font-size: 8px; letter-spacing: .06em; text-transform: uppercase; color: #526372; margin: 7px 0 3px; }
.dm-paper .dm-bar { display: block; height: 4px; border-radius: 2px; background: #dfe5ec; margin: 3px 0; width: 100%; }
.dm-paper .dm-bar.w90 { width: 90%; } .dm-paper .dm-bar.w75 { width: 75%; }
.dm-paper .dm-bar.w60 { width: 60%; } .dm-paper .dm-bar.w45 { width: 45%; }
.dm-paper .dm-bar.thick { height: 6px; margin: 6px 0; }
.dm-paper .dm-bar--gap { margin-top: 10px; }
.dm-paper-s--gap { margin-top: 12px; }
.dm-paper-nd { display: block; font-style: italic; color: #526372; font-size: 8.5px; }
body .dm-papers h3 { font-size: 1rem; margin: .85rem 0 .25rem; line-height: 1.35; }
body .dm-papers figcaption p { font-size: .875rem; color: var(--gray); margin: 0; line-height: 1.55; }
@media (min-width: 1200px) { .dm-papers { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 992px) and (max-width: 1199.98px) { .dm-papers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } .dm-paper { aspect-ratio: 5 / 4; } }
@media (max-width: 991.98px) {
    .dm-papers-wrap { overflow-x: auto; margin: 0 -12px; padding: 0 12px 8px; scroll-snap-type: x mandatory; scroll-padding-inline: 12px; }
    .dm-papers-wrap:focus-visible { outline-offset: -3px; }
    .dm-papers { grid-auto-flow: column; grid-auto-columns: min(calc((100vw - 40px) / 2.2), 230px); width: max-content; gap: 1rem; }
    .dm-papers > li { scroll-snap-align: start; }
}
.dm-exports { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.dm-exports-label { font-size: .875rem; font-weight: 600; color: var(--secondary); }
.dm-files { display: inline-flex; flex-wrap: wrap; gap: .5rem; }
.dm-file { position: relative; display: inline-block; background: #fff; border: 1px solid var(--border); border-radius: 4px; font-size: .8125rem; font-weight: 600; color: var(--secondary); padding: .2rem 1rem .2rem .6rem; }
.dm-file::after { content: ""; position: absolute; top: -1px; right: -1px; border-style: solid; border-width: 0 8px 8px 0; border-color: transparent var(--light) #c9d4de transparent; }
.dm-exports-note { font-size: .9rem; color: var(--gray); }
.dm-support { margin: 1rem 0 0; font-size: .9rem; color: var(--gray); max-width: 46rem; }

/* ---------- #app: on the ward, your organisation, patient data (dark band) ---------- */
.dm-groups { display: grid; gap: 2.5rem; }
@media (min-width: 992px) { .dm-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; } }
body .dm-group-h { font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #a8ccef; margin: 0 0 1rem; }
.dm-spec-dark { margin: 0; display: grid; gap: 1.1rem; }
.dm-spec-dark > div { border-top: 1px solid rgba(255, 255, 255, .18); padding-top: .9rem; }
.dm-spec-dark dt { font-family: 'IBM Plex Sans', sans-serif; font-weight: 600; font-size: 1.05rem; color: #fff; margin: 0 0 .25rem; }
.dm-spec-dark dd { margin: 0; font-size: .9rem; line-height: 1.6; color: rgba(255, 255, 255, .78); }
@media (min-width: 576px) and (max-width: 991.98px) { .dm-spec-dark { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 2rem; } }

/* ---------- #download ---------- */
.dm-get { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; background: #fff; border: 1px solid var(--border); border-radius: 4px; padding: 2.5rem; align-items: center; }
.dm-get-id { display: flex; gap: 1.25rem; align-items: flex-start; }
.dm-get-id img { width: 64px; height: 64px; border-radius: 22%; flex: none; }
body .dm-get h2 { font-size: clamp(1.6rem, 2.4vw, 2rem); margin: 0 0 .5rem; }
body .dm-get-id p { font-size: 1rem; color: var(--gray); margin: 0; max-width: 32rem; }
.dm-get-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.dm-get-link { margin: 0; font-size: .95rem; color: var(--gray); }
@media (min-width: 992px) { .dm-get { grid-template-columns: 1.15fr 1fr; gap: 2rem 3rem; } }
@media (max-width: 575.98px) {
    .dm-get { padding: 1.5rem; }
    .dm-get-id img { width: 48px; height: 48px; }
    .dm-get-actions, .dm-get-actions .store-badges { width: 100%; }
    .dm-get-actions .dm-cta { width: 100%; }
}

/* ---------- Device kit (DictateScreen.ascx) ---------- */
.dm-device { --dm-scale: 1; position: relative; margin: 0; }
.dm-s-90 { --dm-scale: .9; } /* home showcase; dictate.aspx sets its scales per section below */
.dm-phone {
    width: calc(300px * var(--dm-scale)); font-size: calc(12px * var(--dm-scale)); box-sizing: border-box;
    padding: .7em; border-radius: 3.6em; background: #0b0f19;
    box-shadow: 0 1.2em 2.6em -1.6em rgba(15, 23, 42, .55);
}
.dm-screen {
    position: relative; aspect-ratio: 9 / 18.6; overflow: hidden; border-radius: 2.9em;
    background: #f4f6fa; color: #172d40; line-height: 1.35; text-align: left; font-family: 'Inter', sans-serif; font-weight: 400;
    letter-spacing: 0;
}
.dm-device--crop .dm-screen { aspect-ratio: 9 / 15; }
.dm-device--crop .dm-hide-crop { display: none; }
.dm-screen b { font-weight: 600; }
.dm-status { display: flex; justify-content: space-between; align-items: center; height: 2.3em; padding: 0 1.7em; background: var(--app-blue); color: #fff; font-size: .82em; font-weight: 600; }
.dm-status i { display: inline-block; width: 1.9em; height: .85em; border: 1px solid rgba(255, 255, 255, .8); border-radius: .25em; position: relative; }
.dm-status i::after { content: ""; position: absolute; inset: .12em .5em .12em .12em; background: #fff; border-radius: .1em; }
.dm-appbar { display: flex; align-items: center; gap: .55em; padding: .35em 1.2em .85em; background: var(--app-blue); color: #fff; font-weight: 600; font-size: 1.08em; white-space: nowrap; }
.dm-back { font-weight: 400; opacity: .9; }
.dm-sub { margin-left: auto; font-weight: 400; font-size: .72em; opacity: .92; }
.dm-appbar .dm-chip { margin-left: auto; }
.dm-pt { padding: .55em 1.2em .6em; background: var(--app-tint); border-bottom: 1px solid #d2dcee; }
.dm-pt b { display: block; font-size: .95em; color: #0f172a; }
.dm-pt span { font-size: .78em; color: var(--app-muted); }
.dm-tabs { display: flex; gap: 1.05em; padding: 0 1.2em; background: #fff; border-bottom: 1px solid var(--app-line); font-size: .8em; white-space: nowrap; overflow: hidden; }
.dm-tabs span { padding: .8em 0 .7em; color: var(--app-muted); }
.dm-tabs .dm-on { color: var(--app-blue); font-weight: 600; box-shadow: inset 0 -2px var(--app-blue); }
.dm-body { padding: .9em 1.2em; }
.dm-h { margin: .2em 0 .45em; font-size: .68em; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--app-muted); }
.dm-h--gap { margin-top: .9em; }
.dm-line { font-size: .86em; margin: 0 0 .5em; color: #172d40; }
.dm-screen .dm-hl { background: var(--app-tint); box-shadow: inset 3px 0 var(--app-blue); border-radius: .3em; padding: .4em .55em; }
.dm-screen .dm-nd { color: var(--app-muted); font-style: italic; border-bottom: 1px dashed #94a3b8; }
.dm-chip { display: inline-flex; align-items: center; gap: .35em; padding: .18em .65em; border-radius: 999px; font-size: .7em; font-weight: 600; line-height: 1.3; white-space: nowrap; }
.dm-chip--rec { background: #fff1e6; color: var(--accent-dark); }
.dm-chip--rec::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: var(--app-rec); }
.dm-chip--draft { background: #fff; color: #1f3f7a; }
.dm-chip--warn { background: #fef3c7; color: #6b4a00; box-shadow: inset 0 0 0 1px #f2c94c; }
.dm-chip--crit { background: #fde7ea; color: #8a1730; box-shadow: inset 0 0 0 1px #f3b5c0; }
.dm-chip--info { background: var(--app-tint); color: #1f4a94; }
.dm-chips { display: flex; gap: .4em; flex-wrap: wrap; }
.dm-sheet { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 1.5em 1.5em 0 0; box-shadow: 0 -.5em 1.8em rgba(15, 23, 42, .2); padding: .6em 1.2em 1.3em; }
.dm-grip { width: 3em; height: .32em; border-radius: 1em; background: #cbd5e1; margin: 0 auto .75em; }
.dm-sheet-t { font-weight: 600; font-size: 1.02em; color: #0f172a; margin-bottom: .55em; }
.dm-screen .dm-kv { margin: 0 0 .7em; }
.dm-screen .dm-kv dt { font-size: .64em; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--app-muted); }
.dm-screen .dm-kv dd { margin: .1em 0 .5em; font-size: .84em; }
.dm-screen .dm-quote { background: var(--app-surface); box-shadow: inset 3px 0 var(--app-blue); padding: .45em .6em; font-style: italic; border-radius: .3em; }
.dm-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4em; padding: .6em 1em; border-radius: .65em; font-size: .84em; font-weight: 600; border: 1px solid var(--app-blue); color: var(--app-blue); background: #fff; white-space: nowrap; }
.dm-btn--pri { background: var(--app-blue); color: #fff; }
.dm-btn--rec { background: var(--app-rec); border-color: var(--app-rec); color: #fff; font-size: 1.2em; font-weight: 700; padding: .65em 1em; margin-top: .9em; }
.dm-btn--block { display: flex; width: 100%; box-sizing: border-box; }
.dm-btn--sm { padding: .45em .85em; margin-top: .55em; }
.dm-btnrow { display: flex; gap: .5em; margin-top: .6em; }
.dm-rec { padding: 1.2em; text-align: center; }
.dm-timer { font-family: 'IBM Plex Sans', sans-serif; font-size: 3.3em; font-weight: 600; letter-spacing: -.02em; color: #0f172a; margin: .25em 0 .05em; line-height: 1.2; }
.dm-meter { display: flex; justify-content: center; align-items: flex-end; gap: .25em; height: 3.4em; margin: .4em 0 .3em; }
.dm-meter span { width: .42em; border-radius: .25em; background: var(--app-blue); transform-origin: bottom; }
.dm-meter span:nth-child(1) { height: 30%; } .dm-meter span:nth-child(2) { height: 55%; } .dm-meter span:nth-child(3) { height: 80%; }
.dm-meter span:nth-child(4) { height: 45%; } .dm-meter span:nth-child(5) { height: 95%; } .dm-meter span:nth-child(6) { height: 65%; }
.dm-meter span:nth-child(7) { height: 85%; } .dm-meter span:nth-child(8) { height: 40%; } .dm-meter span:nth-child(9) { height: 70%; }
.dm-meter span:nth-child(10) { height: 100%; } .dm-meter span:nth-child(11) { height: 60%; } .dm-meter span:nth-child(12) { height: 35%; }
.dm-meter span:nth-child(13) { height: 75%; }
/* The level meter moves for a few seconds after load, then settles on its static heights (WCAG 2.2.2). */
@media (prefers-reduced-motion: no-preference) {
    .dm-meter span { animation: dm-level 1.1s ease-in-out 5 alternate both; }
    .dm-meter span:nth-child(3n) { animation-duration: .8s; }
    .dm-meter span:nth-child(3n+1) { animation-duration: 1.35s; animation-delay: -.4s; }
    .dm-meter span:nth-child(4n) { animation-delay: -.7s; }
    @keyframes dm-level { from { transform: scaleY(.45); } to { transform: scaleY(1); } }
}
.dm-small { font-size: .74em; color: var(--app-muted); }
.dm-ctrls { display: flex; justify-content: center; align-items: center; gap: 1.1em; margin-top: 1.2em; }
.dm-ctrl { width: 4.2em; height: 4.2em; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1px solid #c9d4e8; color: var(--app-blue); font-size: .8em; font-weight: 600; }
.dm-ctrl--main { width: 6.4em; height: 6.4em; background: var(--app-blue); border-color: var(--app-blue); color: #fff; font-size: .9em; }
.dm-card { background: #fff; border: 1px solid var(--app-line); border-radius: .9em; padding: .75em .85em; margin-bottom: .7em; }
.dm-card--note { margin: 1.2em 0 0; text-align: left; font-size: .76em; color: var(--app-muted); padding: .7em .85em; }
.dm-card--note b { color: #172d40; }
.dm-card--crit { box-shadow: inset 3px 0 #b4233c; }
.dm-card--warn { box-shadow: inset 3px 0 #d4a20b; }
.dm-card--blue { box-shadow: inset 3px 0 var(--app-blue); }
.dm-card-name { font-size: .86em; color: #0f172a; }
.dm-card-t { font-weight: 600; font-size: .88em; color: #0f172a; margin: .4em 0 .2em; }
.dm-card-d { font-size: .76em; color: var(--app-muted); }
.dm-card-d--ink { color: #172d40; font-size: .8em; }
.dm-banner { display: flex; gap: .5em; align-items: flex-start; padding: .6em .8em; border-radius: .7em; font-size: .76em; margin-bottom: .7em; }
.dm-banner--crit { background: #fde7ea; color: #8a1730; }
.dm-banner--info { background: var(--app-tint); color: #1f3f7a; }
.dm-kvrow { display: flex; justify-content: space-between; gap: .5em; font-size: .8em; padding: .32em 0; border-bottom: 1px solid #eef2f7; }
.dm-kvrow:last-of-type { border-bottom: 0; }
.dm-kvrow span:first-child { color: var(--app-muted); }
.dm-check { display: flex; gap: .55em; align-items: flex-start; font-size: .82em; margin: .5em 0; }
.dm-box { flex: none; width: 1.25em; height: 1.25em; border-radius: .3em; background: var(--app-blue); color: #fff; display: grid; place-items: center; font-size: .85em; font-weight: 700; }
.dm-segctl { display: flex; border: 1px solid var(--app-blue); border-radius: .65em; overflow: hidden; font-size: .8em; font-weight: 600; }
.dm-segctl span { flex: 1; text-align: center; padding: .5em 0; color: var(--app-blue); }
.dm-segctl .dm-on { background: var(--app-blue); color: #fff; }
.dm-field { display: flex; justify-content: space-between; align-items: center; background: #fff; border: 1px solid var(--app-line); border-radius: .6em; padding: .5em .75em; font-size: .82em; margin-top: .55em; }
.dm-field small { display: block; font-size: .8em; color: var(--app-muted); }
.dm-progress { height: .35em; border-radius: 1em; background: #e2e8f0; overflow: hidden; margin: .45em 0; }
.dm-progress i { display: block; height: 100%; background: var(--app-blue); }
.dm-p100 { width: 100%; } .dm-p62 { width: 62%; }
.dm-spread { display: flex; justify-content: space-between; align-items: center; gap: .5em; }
.dm-spread--gap { margin-top: .45em; }
.dm-link { font-size: .74em; color: var(--app-blue); font-weight: 600; }
.dm-input { border: 1.5px solid var(--app-blue); border-radius: .55em; padding: .45em .7em; font-size: .95em; letter-spacing: .12em; background: #fff; font-family: 'IBM Plex Sans', sans-serif; }
.dm-okline { color: #1f3f7a; font-size: .78em; font-weight: 600; margin: .35em 0 0; }
.dm-bars { flex: 1; padding-top: .2em; }
.dm-bars i { display: block; height: .5em; border-radius: .25em; background: #d5dde7; margin: .1em 0 .4em; }
.dm-w100 { width: 100%; } .dm-w80 { width: 80%; } .dm-w55 { width: 55%; }
.dm-screen--approval .dm-btn--block { margin-top: .7em; }
.dm-tags { display: flex; gap: .4em; margin-top: .6em; }
.dm-tags span { font-size: .7em; font-weight: 600; padding: .25em .6em; border: 1px solid #c9d4e8; border-radius: .4em; color: var(--app-muted); background: #fff; }
.dm-hello { font-family: 'IBM Plex Sans', sans-serif; font-weight: 600; font-size: 1.05em; color: #0f172a; margin: .2em 0 .6em; }
.dm-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .5em; margin-bottom: .9em; }
.dm-tiles span { background: #fff; border: 1px solid var(--app-line); border-radius: .8em; padding: .5em .7em; font-size: .74em; color: var(--app-muted); }
.dm-tiles b { display: block; font-family: 'IBM Plex Sans', sans-serif; font-size: 1.7em; color: var(--app-blue); line-height: 1.15; }
.dm-listrow { display: flex; justify-content: space-between; align-items: center; gap: .5em; background: #fff; border: 1px solid var(--app-line); border-radius: .8em; padding: .55em .7em; margin-bottom: .45em; font-size: .78em; }
.dm-listrow .dm-chip { font-size: .86em; }
.dm-listrow b { color: #0f172a; }

/* ---------- Home showcase (index.aspx #dictate) ---------- */
#dictate.product-showcase { align-items: flex-start; }
#dictate .product-image.dm-showcase-visual {
    height: auto; min-width: 0; padding: 2.5rem 2rem 2rem; display: grid; justify-items: center; align-self: start;
    border-radius: 4px; background: var(--base-gradient) !important; border: 0;
}
#dictate .product-image.dm-showcase-visual::before { display: none; }
#dictate .dm-showcase-visual .dm-caption { margin-top: 1rem; text-align: center; }
.dm-mark-sm { display: block; width: 40px; height: 40px; border-radius: 22%; margin-bottom: 1rem; }
#dictate .dm-showcase-badges { margin-top: 1.25rem; }
@media (max-width: 768px) {
    #dictate .product-image.dm-showcase-visual { padding: 1.5rem; }
    #dictate .dm-showcase-visual .dm-device { --dm-scale: .74; }
}