/* Registry-driven platform experiences: category identity, previews, next steps and guided journeys. */
.theme-data { --experience: #1766d8; --experience-soft: #eaf2ff; --experience-deep: #104d9f; }
.theme-image { --experience: #7549c8; --experience-soft: #f0eaff; --experience-deep: #56339c; }
.theme-document { --experience: #3656ad; --experience-soft: #ebefff; --experience-deep: #273f86; }
.theme-assurance { --experience: #08765e; --experience-soft: #e5f7f1; --experience-deep: #075744; }
.theme-property { --experience: #a65e00; --experience-soft: #fff2d8; --experience-deep: #784400; }

.platform-tool-icon.theme-data,
.theme-data > .platform-tool-icon { background: linear-gradient(145deg, #1766d8, #104d9f); }
.platform-tool-icon.theme-image,
.theme-image > .platform-tool-icon { background: linear-gradient(145deg, #8a58df, #5b36a5); }
.platform-tool-icon.theme-document,
.theme-document > .platform-tool-icon { background: linear-gradient(145deg, #4969c2, #273f86); }
.platform-tool-icon.theme-assurance,
.theme-assurance > .platform-tool-icon { background: linear-gradient(145deg, #159b7d, #075744); }
.platform-tool-icon.theme-property,
.theme-property > .platform-tool-icon { background: linear-gradient(145deg, #c87a13, #784400); }

.finder-result { border-left: 4px solid var(--experience, #1766d8); }
.home-tool-card,
.platform-tool-card { position: relative; overflow: hidden; }
.home-tool-card::before,
.platform-tool-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: var(--experience, #1766d8);
}
.home-tool-card .eyebrow { color: var(--experience-deep, var(--blue-2)); }
.platform-tool-card-head > span:last-child { display: grid; justify-items: end; gap: 4px; text-align: right; }
.tool-family { color: var(--experience-deep, var(--blue-2)); font-size: .67rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.platform-tool-fit { border-left: 3px solid var(--experience, var(--blue)); background: var(--experience-soft, #f1f5fb); }
.platform-tool-fit span { color: var(--experience-deep, var(--blue)); }

.tool-result-preview { padding: 26px 0; color: var(--ink); background: var(--experience-soft, #edf4ff); border-bottom: 1px solid color-mix(in srgb, var(--experience, #1766d8) 25%, #d4dfef); }
.result-preview-inner { display: grid; grid-template-columns: minmax(280px, 1.15fr) minmax(390px, 1fr) auto; align-items: center; gap: 28px; }
.result-preview-copy h2 { max-width: 660px; margin: 5px 0 7px; font-size: clamp(1.35rem, 2.4vw, 2.05rem); letter-spacing: -.035em; }
.result-preview-copy p:last-child { margin: 0; color: #53647c; }
.tool-result-preview .eyebrow { margin-bottom: 5px; color: var(--experience-deep, var(--blue-2)); }
.tool-result-preview dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; }
.tool-result-preview dl div { min-width: 0; padding: 12px; background: rgb(255 255 255 / 78%); border: 1px solid color-mix(in srgb, var(--experience, #1766d8) 22%, #fff); border-radius: 12px; }
.tool-result-preview dt { color: #61718a; font-size: .7rem; font-weight: 800; }
.tool-result-preview dd { margin: 5px 0 0; overflow-wrap: anywhere; color: var(--experience-deep, var(--ink)); font-size: .98rem; font-weight: 900; }
.tool-result-preview .button { white-space: nowrap; border-color: color-mix(in srgb, var(--experience, #1766d8) 35%, #bfcce0); }

.result-preview-inner.has-visual { grid-template-columns: minmax(280px, 1.1fr) minmax(230px, .75fr) minmax(300px, .95fr); }
.result-preview-facts { display: grid; gap: 10px; }
.result-preview-facts dl { grid-template-columns: repeat(3, 1fr); }
.result-preview-facts .button { justify-self: start; }
.result-preview-visual { min-width: 0; }
.preview-mock { max-width: 340px; margin-inline: auto; padding: 14px; background: #fff; border: 1px solid color-mix(in srgb, var(--experience, #1766d8) 24%, #dfe7f3); border-radius: 14px; box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--experience, #1766d8) 45%, transparent); }
.preview-mock .mock-head { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #e6ecf5; }
.preview-mock .mock-head strong { overflow: hidden; color: var(--experience-deep, #273f86); font-size: .72rem; font-weight: 900; letter-spacing: .02em; text-overflow: ellipsis; white-space: nowrap; }
.preview-mock .mock-foot { margin-top: 10px; padding-top: 9px; border-top: 1px dashed color-mix(in srgb, var(--experience, #1766d8) 30%, #dfe7f3); color: #5a6a83; font-size: .68rem; font-weight: 800; }
.mock-dot { flex: 0 0 auto; width: 9px; height: 9px; background: var(--experience, #1766d8); border-radius: 50%; }
.preview-mock i { display: block; background: #e8eef7; border-radius: 4px; }
.mock-row { display: grid; grid-template-columns: 1.15fr .85fr auto; align-items: center; gap: 8px; padding: 6px 0; }
.mock-row i { height: 8px; }
.mock-row i:first-child { background: #dbe4f0; }
.mock-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; padding: 2px 7px; border-radius: 999px; font-size: .62rem; font-style: normal; font-weight: 900; }
.mock-up { color: #9c1f1f; background: #fdecec; }
.mock-down { color: #0d6b46; background: #e4f6ee; }
.mock-new { color: #104d9f; background: #e8f0fd; }
.mock-flat { color: #5a6a83; background: #eef2f8; }
.mock-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.mock-tiles .mock-tile { aspect-ratio: 1; border-radius: 7px; background: linear-gradient(140deg, #cdbcf2, #9c7fe0); }
.mock-tiles .mock-tile:nth-child(2n) { background: linear-gradient(140deg, #b9c9ec, #7d97d6); }
.mock-tiles .mock-tile:nth-child(3n) { background: linear-gradient(140deg, #d9c6ea, #b18fd6); }

.mkvariants { display: flex; align-items: center; gap: 6px; }
.mkvariants .mkimg-real { flex: 1; min-width: 0; }
.mkvariants .mkimg-real svg { display: block; width: 100%; height: auto; border-radius: 6px; overflow: hidden; }
.mkvariants .mkarrow { flex: 0 0 auto; color: var(--experience-deep, #56339c); font-size: .85rem; font-style: normal; font-weight: 900; }
.mkimg-label { display: block; margin-top: 3px; color: var(--experience-deep, #56339c); font-size: .58rem; font-weight: 900; text-align: center; letter-spacing: .03em; text-transform: uppercase; }

.mkwm-split { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.mkwm-before, .mkwm-after { position: relative; }
.mkwm-before svg, .mkwm-after svg { display: block; width: 100%; height: auto; border-radius: 8px; border: 1px solid #dce5f2; }
.mkwm-divider { display: grid; place-items: center; width: 28px; height: 28px; color: var(--experience-deep, #56339c); background: var(--experience-soft, #f0eaff); border-radius: 50%; font-size: .8rem; font-weight: 900; }
.mkwm-tag { display: block; margin-top: 4px; color: var(--experience-deep, #56339c); font-size: .6rem; font-weight: 900; text-align: center; letter-spacing: .03em; text-transform: uppercase; }
.mock-finding { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 6px 0; }
.mock-finding i { height: 8px; }
.mock-finding small { color: var(--experience-deep, #075744); font-size: .68rem; font-weight: 900; }
.mock-priority { width: 10px; height: 10px; border-radius: 50%; }
.mock-urgent { background: #d84343; }
.mock-important { background: #dd9012; }
.mock-ok { background: #16a06d; }
.mock-lines { display: grid; gap: 8px; }
.mock-lines i { height: 8px; }
.mock-lines i:nth-child(2) { width: 88%; }
.mock-lines i:nth-child(3) { width: 70%; background: color-mix(in srgb, var(--experience, #3656ad) 26%, #e8eef7); }
.mock-lines i:nth-child(5) { width: 82%; }
.mock-lines i:last-child { width: 58%; }
.mock-total { color: var(--experience-deep, #784400); }

.next-step-card { display: grid; grid-template-columns: auto 1fr; align-content: start; gap: 7px 14px; border-top: 4px solid var(--experience, var(--blue)) !important; }
.next-step-card .next-step-stage,
.next-step-card h3,
.next-step-card > p:last-of-type,
.next-step-card a { grid-column: 1 / -1; }
.next-step-card .next-step-stage { margin: 8px 0 0; color: var(--experience-deep, var(--blue-2)); font-size: .75rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.next-step-card h3 { margin-top: 8px; }
.next-step-card .platform-tool-icon { width: 36px; height: 36px; flex-basis: 36px; }

.guide-journey { display: grid; grid-template-columns: minmax(250px, .8fr) minmax(420px, 1.35fr) auto; align-items: center; gap: 28px; margin-top: 56px; margin-bottom: 4px; padding: 28px; background: var(--experience-soft, #edf4ff); border: 1px solid color-mix(in srgb, var(--experience, #1766d8) 24%, #d7e2f1); border-radius: 20px; }
.guide-journey h2 { margin: 8px 0 0; font-size: clamp(1.45rem, 2.7vw, 2.25rem); letter-spacing: -.04em; }
.guide-journey .eyebrow { color: var(--experience-deep, var(--blue-2)); }
.guide-journey ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; padding: 0; list-style: none; }
.guide-journey li { min-width: 0; padding: 13px; background: rgb(255 255 255 / 82%); border-radius: 12px; }
.guide-journey li strong,
.guide-journey li span { display: block; }
.guide-journey li strong { color: var(--experience-deep, var(--ink)); font-size: .75rem; }
.guide-journey li span { margin-top: 5px; color: #53647c; font-size: .77rem; line-height: 1.45; }
.guide-journey .button { min-width: 190px; }

.expand-list-button { display: none; width: 100%; min-height: 46px; margin-top: 14px; color: var(--blue-2); background: #fff; border: 1px solid #b9c9df; border-radius: 11px; font: inherit; font-weight: 850; cursor: pointer; }

@media (max-width: 1100px) {
    .result-preview-inner { grid-template-columns: 1fr 1fr; }
    .result-preview-inner.has-visual { grid-template-columns: 1fr 1fr; }
    .result-preview-inner.has-visual .result-preview-facts { grid-column: 1 / -1; }
    .tool-result-preview .button { grid-column: 1 / -1; width: fit-content; }
    .result-preview-facts .button { grid-column: auto; }
    .guide-journey { grid-template-columns: 1fr; }
    .guide-journey .button { width: fit-content; }
}

@media (max-width: 680px) {
    .result-preview-inner { grid-template-columns: 1fr; gap: 16px; }
    .result-preview-inner.has-visual { grid-template-columns: 1fr; }
    .preview-mock { max-width: 100%; }
    .result-preview-facts .button { width: 100%; }
    .tool-result-preview { padding-block: 22px; }
    .tool-result-preview dl { grid-template-columns: 1fr 1fr 1fr; }
    .tool-result-preview dl div { padding: 10px 8px; }
    .tool-result-preview dt { font-size: .65rem; }
    .tool-result-preview dd { font-size: .84rem; }
    .tool-result-preview .button { width: 100%; }
    .guide-journey { margin-top: 34px; padding: 20px 16px; }
    .guide-journey ol { grid-template-columns: 1fr; }
    .guide-journey .button { width: 100%; }
    .expand-list-button { display: block; }
    .progressive-ready { align-items: stretch; }
    .platform-tool-card-head { align-items: flex-start; }
}

@media (max-width: 340px) {
    .tool-result-preview dl { grid-template-columns: 1fr; }
}

.io-flow { display: flex; align-items: center; gap: 7px; margin-top: 14px; font-size: .7rem; font-weight: 800; }
.io-flow span { overflow: hidden; padding: 6px 9px; color: var(--experience-deep, #1c4e9e); background: var(--experience-soft, #eef4fd); border-radius: 8px; text-overflow: ellipsis; white-space: nowrap; }
.io-flow em { flex: 0 0 auto; color: #9aa9c2; font-style: normal; font-weight: 900; }
.io-flow b { flex: 0 0 auto; color: #61718a; font-size: .62rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.card-visual { margin-top: 16px; }
.card-visual .preview-mock { max-width: none; padding: 12px; border-radius: 12px; box-shadow: none; transition: transform .25s ease; }
.card-visual .mock-row, .card-visual .mock-finding { padding: 4px 0; }
.home-tool-card .card-visual { grid-column: 1 / -1; }
.home-tool-card:hover .preview-mock, .platform-tool-card:hover .preview-mock { transform: translateY(-3px) rotate(-.5deg); }
.platform-tool-card .card-visual + .platform-tool-fit { margin-top: 14px; }

.mk { font-size: .66rem; }
.mk .mkrow { display: flex; align-items: center; gap: 8px; padding: 5px 0; }
.mk .mkrow b { flex: 0 0 auto; color: #33415c; font-size: .6rem; font-weight: 800; }
.mk .mkrow span { flex: 1; overflow: hidden; color: #5a6a83; white-space: nowrap; text-overflow: ellipsis; }
.mk .mock-chip { padding: 2px 6px; font-size: .55rem; white-space: nowrap; }
.mkcheck { display: flex; align-items: center; gap: 7px; padding: 5px 0; color: #3f5171; font-size: .62rem; font-weight: 700; }
.mkcheck b { margin-left: auto; color: #22314d; font-weight: 900; }
.mkaudio{display:grid;grid-template-columns:54px 1fr;align-items:center;gap:10px}.mkaudio-cover{display:grid;width:54px;aspect-ratio:1;place-items:center;color:#fff;background:linear-gradient(145deg,#146fff,#071b52);border-radius:9px;font-size:1.35rem}.mkaudio-wave{display:flex;height:54px;align-items:center;gap:4px}.mkaudio-wave i{width:6px;height:34%;background:#146fff;border-radius:9px}.mkaudio-wave i:nth-child(2),.mkaudio-wave i:nth-child(6){height:72%}.mkaudio-wave i:nth-child(3),.mkaudio-wave i:nth-child(5){height:48%}.mkaudio-wave i:nth-child(4){height:92%}
.mkbars { display: grid; gap: 7px; margin: 4px 0 8px; }
.mkbar { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 8px; color: #61718a; font-size: .58rem; font-weight: 800; }
.mkbar i { display: block; height: 10px; border-radius: 5px; background: linear-gradient(90deg, var(--experience, #1766d8), color-mix(in srgb, var(--experience, #1766d8) 45%, #fff)); }
.mkbar b { color: #22314d; }
.mkok { padding: 6px 8px; color: #0d6b46; background: #e4f6ee; border-radius: 8px; font-size: .58rem; font-weight: 850; }
.mkpages { display: flex; gap: 7px; margin: 2px 0 7px; }
.mkpages i { position: relative; flex: 1; aspect-ratio: 3 / 4; display: grid; place-items: center; color: #8fa0bb; background: #fff; border: 1px solid #d9e2f0; border-radius: 6px; box-shadow: 0 3px 8px rgb(15 40 90 / 6%); font-size: .7rem; font-style: normal; font-weight: 900; }
.mkpages i u { position: absolute; right: 3px; bottom: 3px; left: 3px; overflow: hidden; color: var(--experience-deep, #273f86); font-size: .46rem; font-weight: 900; text-align: center; text-decoration: none; white-space: nowrap; }
.mkpages .mkghost { border-style: dashed; opacity: .45; font-size: .5rem; }
.mkvariants { display: flex; align-items: center; gap: 7px; margin: 2px 0 7px; }
.mkvariants em { flex: 0 0 auto; color: #9aa9c2; font-style: normal; font-weight: 900; }
.mkvariants .mkimg { position: relative; flex: 1; aspect-ratio: 1; display: grid; place-items: end center; overflow: hidden; padding-bottom: 3px; color: #fff; background: linear-gradient(140deg, #b9a5ec, #7e5fc9); border-radius: 8px; font-size: .5rem; font-style: normal; font-weight: 900; }
.mkimg.mkfit::before { content: ""; position: absolute; inset: 9px 4px; background: rgb(255 255 255 / 30%); border-radius: 3px; }
.mkimg.mkpad::before { content: ""; position: absolute; inset: 7px; background: rgb(255 255 255 / 30%); border-radius: 3px; }
.mkimg.mkcrop::before { content: ""; position: absolute; inset: 0; background: linear-gradient(140deg, rgb(255 255 255 / 25%), transparent 60%); }
.mkwm .mock-tile { position: relative; }
.mkwm .mock-tile u { position: absolute; right: 4px; bottom: 2px; color: rgb(255 255 255 / 88%); font-size: .58rem; font-weight: 900; text-decoration: none; }
.mkscore { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; margin: 2px 0 4px; }
.mk .mkring { position: relative; width: 50px; height: 50px; display: grid; place-items: center; flex: 0 0 auto; background: conic-gradient(var(--experience, #08765e) calc(var(--pct, 62) * 1%), #e3ebe8 0); border-radius: 50%; font-style: normal; }
.mkring::before { content: ""; position: absolute; inset: 6px; background: #fff; border-radius: 50%; }
.mkring > i { position: relative; color: #22314d; font-size: .78rem; font-style: normal; font-weight: 900; }
.mkxml { display: grid; gap: 5px; font-family: ui-monospace, Consolas, monospace; font-size: .56rem; }
.mkxml span { overflow: hidden; color: #5a6a83; text-overflow: ellipsis; white-space: nowrap; }
.mkxml .mkerr { color: #9c1f1f; font-weight: 700; }
.mkxml .mkerr::before { content: "✗ "; font-weight: 900; }
.mkxml .mkfix { color: #0d6b46; font-weight: 800; }
.mkdiff { display: grid; gap: 6px; color: #44536e; font-size: .62rem; }
.mkdiff p { margin: 0; }
.mkdiff del { padding: 0 3px; color: #9c1f1f; background: #fdecec; border-radius: 3px; }
.mkdiff ins { padding: 0 3px; color: #0d6b46; background: #e4f6ee; border-radius: 3px; text-decoration: none; }
.mkmove { color: #6140bb; font-weight: 750; }
.mkredact p { display: flex; align-items: center; gap: 7px; margin: 0 0 7px; color: #5a6a83; font-size: .62rem; }
.mkblack { display: inline-block; width: 64px; height: 10px; background: #101826; border-radius: 3px; }
.mkblack.mkwide { width: 112px; }
.mkline { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; color: #5a6a83; font-size: .62rem; }
.mkline b { color: #33415c; }
.mkline.mktotal { margin-top: 2px; padding-top: 7px; border-top: 1px solid #e2e9f4; font-weight: 900; }
.mkline.mktotal span { color: #22314d; }