/* Improving / interactive service map. The document owns the only scrollbar;
   where the screen can hold the story, this component is sticky inside a tall
   stage from the first layout — see the story rules below. */
.imp.imp-system {
  position: relative;
  padding: 0;
  margin-top: 72px;
  color: #f7f2ff;
  isolation: isolate;
}
.ims-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(540px, 1fr);
  row-gap: 18px;
  min-height: 760px;
  padding: 46px 54px 32px;
  overflow: hidden;
  border-radius: 32px;
  background: radial-gradient(ellipse at 50% 60%, #633490 0%, #40265e 40%, #281c3d 80%);
  border: 1px solid #a67bce33;
  margin: 0 24px;
}
.ims-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background-image: radial-gradient(#d9b2ff 0.7px, transparent .7px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse at center, #000, transparent 72%);
}
.ims-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; position: relative; z-index: 2; }
.imp-system .ims-eyebrow { display: flex; align-items: center; gap: 9px; font-size: 10px; line-height: 18px; letter-spacing: .16em; color: #d7bdea; margin-bottom: 17px; }
.ims-eyebrow > span { width: 5px; height: 5px; border-radius: 50%; background: #d6b0ff; box-shadow: 0 0 12px #be7bff; }
.imp-system .ims-heading h2 { font-size: clamp(35px, 3.5vw, 60px); letter-spacing: -.055em; line-height: 1.08; font-weight: 400; }
.ims-heading h2 > span { color: #d7b6ef; }
.ims-intro { padding-top: 24px; }
.imp-system .ims-intro p { font-size: 14px; line-height: 1.65; color: #d1c3df; }
.ims-hint { display: flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 10px; color: #b9a3ce; }
.ims-hint svg { width: 18px; height: 18px; }
.ims-map { position: relative; width: 100%; min-width: 0; max-width: 1350px; margin: 0 auto; min-height: 460px; }
.ims-orbit { position: absolute; pointer-events: none; left: 50%; top: 48%; transform: translate(-50%, -50%); border: 1px solid #d7bcf314; border-radius: 50%; }
.ims-orbit--outer { width: 850px; height: 430px; }
.ims-orbit--inner { width: 630px; height: 330px; border-style: dashed; opacity: .6; }
.ims-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ims-link-path { fill: none; stroke: #b895d93b; stroke-width: 1; }
.ims-links [data-active] .ims-link-path { stroke: #ddbcff; }
.ims-links g { transition: opacity 200ms ease; }
.ims-signal { fill: #f0dbff; opacity: 0; filter: drop-shadow(0 0 5px #e4b6ff); }
.ims-nodes { position: absolute; inset: 0; }
.ims-node { position: absolute; display: flex; align-items: center; gap: 15px; width: 240px; min-height: 78px; padding: 10px 12px; border: 1px solid transparent; border-radius: 14px; text-align: left; font: inherit; color: inherit; background: transparent; cursor: pointer; z-index: 2; transition: background 200ms ease, border-color 200ms ease; }
.ims-node[data-topic="flow"] { left: 1%; top: 8%; }
.ims-node[data-topic="offline"] { left: 0; top: 40%; }
.ims-node[data-topic="social"] { left: 4%; top: 73%; }
.ims-node[data-topic="devices"] { right: 1%; top: 8%; }
.ims-node[data-topic="content"] { right: 0; top: 40%; }
.ims-node[data-topic="structure"] { right: 4%; top: 73%; }
@media (min-width: 1100px) {
  .ims-node:is([data-topic="flow"], [data-topic="offline"], [data-topic="social"]) {
    flex-direction: row-reverse;
    text-align: right;
  }
}
.ims-node-icon { flex: 0 0 46px; width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid #b39ac659; border-radius: 50%; color: #d2b8e8; background: #35234d; transition: color 200ms ease, background 200ms ease, border-color 200ms ease; }
.ims-node-icon svg { width: 23px; height: 23px; }
.ims-node-copy { display: flex; flex-direction: column; gap: 5px; }
.ims-node-number { font-size: 8px; letter-spacing: .14em; color: #bda3d3; }
.ims-node-copy strong { font-size: 16px; font-weight: 400; letter-spacing: -.025em; }
.ims-node-copy > span:last-child { font-size: 10px; color: #c4aed8; white-space: nowrap; }
.ims-node[aria-pressed="true"] { background: #c99aef0a; border-color: #c99aef2e; }
.ims-node[aria-pressed="true"] .ims-node-icon { --ims-node-fill: #ead8ff; background: #ead8ff; color: #4f2c6a; border-color: #f5eaff; box-shadow: 0 0 0 6px #e2b4ff0b, 0 0 28px #c892ff2b; }
.imp-system button:focus-visible { outline: 2px solid #f0d7ff; outline-offset: 5px; }
.ims-core { position: absolute; top: 46%; left: 50%; width: 430px; transform: translate(-50%, -50%); background: #f4eff9; color: #33213f; border: 1px solid #fbf6ff; border-radius: 17px; box-shadow: 0 32px 100px #10011f66, 0 0 0 7px #ebc6ff0a; z-index: 3; }
.ims-corebar { display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-bottom: 1px solid #41245514; }
.ims-core-brand { display: flex; align-items: center; gap: 6px; font-size: 9px; font-weight: 600; letter-spacing: .06em; }
.ims-core-brand > span:last-child { color: #846991; font-size: 7px; letter-spacing: .08em; font-weight: 400; }
.ims-brand-mark { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; color: #f5edfb; background: #70498b; font: italic 19px Georgia, serif; }
.ims-demo-label { margin-left: auto; font-size: 6px; color: #7e688c; letter-spacing: .12em; }
.ims-window-dots { letter-spacing: 2px; font-size: 10px; color: #a48bb3; }
#ims-demo { position: relative; min-height: 300px; padding: 22px 27px 20px; }
.ims-demo-eyebrow { display: block; font-size: 8px; line-height: 14px; letter-spacing: .12em; color: #8a679a; margin-bottom: 9px; }
.imp-system .ims-demo-title { font-size: 28px; line-height: 1.08; font-weight: 400; letter-spacing: -.04em; margin-bottom: 9px; }
.imp-system .ims-demo-copy { font-size: 11px; line-height: 1.65; color: #806d8b; margin-bottom: 16px; max-width: 340px; }
.ims-demo-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 0; border-top: 1px solid #4b305618; font-size: 11px; color: #583a6c; }
.ims-demo-row > :last-child { color: #8a7299; }
.ims-demo-options { display: flex; gap: 7px; margin: 6px 0 13px; }
.ims-demo-option { flex: 1; padding: 9px 8px; border-radius: 7px; border: 1px solid #53326429; background: transparent; font: 10px Inter, sans-serif; color: #6a4c7b; cursor: pointer; transition: background 160ms ease, color 160ms ease; }
.ims-demo-option[aria-pressed="true"] { background: #e2d2ed; border-color: #936cab; color: #51336b; }
.ims-demo-primary { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; border: 0; border-radius: 8px; background: #694081; color: #fff3ff; padding: 12px 14px; font: 11px Inter, sans-serif; cursor: pointer; transition: transform 160ms var(--imp-ease-out), background 160ms ease; }
.ims-demo-secondary { border: 0; padding: 8px 0; background: none; color: #6b427f; font: 10px Inter, sans-serif; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.ims-demo-primary:active, .ims-demo-option:active { transform: scale(.97); }
.ims-demo-primary:disabled { opacity: .5; cursor: default; transform: none; }
.ims-demo-tile > span:not(.ims-demo-icon) { display: block; }
.ims-demo-tile + .ims-demo-title { margin-top: 13px; }
.ims-demo-post + .ims-demo-primary, .ims-demo-tile + .ims-demo-primary { margin-top: 12px; }
.ims-demo-art + .ims-demo-title { margin-top: 13px; }
.ims-demo-primary + .ims-demo-copy { margin-top: 10px; margin-bottom: 0; font-size: 9px; }
.ims-core .ims-demo-primary:focus-visible, .ims-core .ims-demo-option:focus-visible, .ims-core .ims-demo-secondary:focus-visible { outline-color: #684086; outline-offset: 3px; }
.ims-demo-check { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 15px; border-radius: 50%; background: #e4d8ed; color: #6f4c83; font-size: 20px; }
.ims-demo-icon { display: grid; place-items: center; width: 36px; height: 36px; background: #e5d7ed; color: #78528e; border-radius: 9px; font-size: 18px; }
.ims-demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 10px 0 14px; }
.ims-demo-tile { padding: 12px; background: #e9dfef; border: 1px solid #8b66a012; border-radius: 8px; font-size: 10px; line-height: 1.5; color: #715482; }
.ims-demo-tile strong { display: block; font-size: 11px; font-weight: 500; margin-bottom: 5px; }
.ims-demo-grid[data-layout="clutter"] { grid-template-columns: 1.2fr 1fr 1fr; align-items: center; }
.ims-demo-grid[data-layout="clutter"] .ims-demo-tile:nth-child(2n) { transform: translateY(7px); background: #e0d9e8; }
.ims-demo-lines { display: grid; gap: 7px; padding: 9px 0; }
.ims-demo-lines > span { display: block; height: 4px; border-radius: 5px; background: #d7c8e2; }
.ims-demo-lines > span:last-child { width: 65%; }
.ims-demo-art { position: relative; display: grid; place-items: center; min-height: 90px; overflow: hidden; background: #dac6e7; color: #624579; border-radius: 9px; font-family: Georgia, serif; font-size: 24px; line-height: 1.05; }
.ims-demo-art::before, .ims-demo-art::after { content: ""; position: absolute; border: 1px solid #7043853d; border-radius: 50%; width: 140px; height: 140px; right: -35px; bottom: -97px; pointer-events: none; }
.ims-demo-art::after { width: 110px; height: 110px; right: -20px; bottom: -82px; }
.ims-demo-art > * { position: relative; z-index: 1; }
.ims-demo-art > span:first-child { width: 58px; height: 100px; position: absolute; left: 28%; bottom: -35px; background: #9b73b8; border-radius: 50% 50% 0 0; transform: rotate(-25deg); }
.ims-demo-art > span:nth-child(2) { width: 62px; height: 115px; position: absolute; left: 44%; bottom: -40px; background: #b596c8; border: 1px solid #f5e7ff80; border-radius: 50% 50% 0 0; transform: rotate(27deg); }
.ims-demo-art > span:last-child { width: 42px; height: 70px; position: absolute; left: 59%; bottom: -20px; border: 1px solid #75538c80; border-radius: 50% 50% 0 0; transform: rotate(15deg); }
.ims-demo-post { border: 1px solid #8562972b; padding: 8px; border-radius: 10px; }
.ims-demo-post .ims-demo-art { min-height: 102px; }
.ims-demo-device { margin: 9px auto 12px; padding: 12px; border: 1px solid #8b69a244; border-radius: 9px; background: #e8dcee; max-width: 100%; }
.ims-demo-device[data-device="desktop"] { width: 100%; }
.ims-demo-device[data-device="tablet"] { width: 230px; }
.ims-demo-device[data-device="mobile"] { width: 145px; border-radius: 16px; padding: 12px 9px; }
.ims-demo-device .ims-demo-title { font-size: 19px; }
.ims-demo-device .ims-demo-copy { font-size: 9px; margin-bottom: 8px; }
.ims-demo-device .ims-demo-art { min-height: 52px; font-size: 17px; }
.ims-demo-device .ims-demo-primary { padding: 8px; font-size: 8px; }
.ims-corefoot { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid #48235b0c; padding: 11px 18px; font-size: 7px; color: #8e759b; }
.ims-corefoot > span:first-child { display: flex; align-items: center; gap: 6px; }
.ims-corefoot i { width: 4px; height: 4px; border-radius: 50%; background: #9b71b1; }
.ims-corefoot > span:last-child { font-size: 6px; letter-spacing: .1em; }
.ims-satellite { position: absolute; display: flex; align-items: center; gap: 11px; top: calc(46% + 107px); left: calc(50% + 115px); width: 214px; padding: 16px; border: 1px solid #dcbef455; border-radius: 12px; background: #4e3368; color: #f6ebff; box-shadow: 0 15px 40px #1c062e40; z-index: 4; pointer-events: none; }
.ims-satellite-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid #cfafef59; flex-shrink: 0; color: #e5c5ff; }
#ims-satellite-title { display: block; font-size: 10px; line-height: 1.4; }
.imp-system #ims-satellite-body { color: #d0b7e4; font-size: 8px; line-height: 1.5; margin-top: 4px; }
.ims-view { position: absolute; left: 50%; bottom: 5px; transform: translateX(-50%); display: flex; gap: 4px; padding: 4px; border: 1px solid #d3b4ea33; border-radius: 30px; background: #24133266; z-index: 4; }
.ims-view button { border: 0; border-radius: 24px; background: transparent; color: #c6afd9; font: 10px Inter, sans-serif; padding: 10px 15px; cursor: pointer; transition: background 200ms ease, color 200ms ease; white-space: nowrap; }
.ims-view button[aria-pressed="true"] { background: #ddc4ed; color: #4a2d62; }
.ims-view button span { margin-left: 8px; }
.ims-footer { position: relative; display: flex; justify-content: space-between; gap: 30px; align-items: center; padding-top: 26px; margin-top: 16px; border-top: 1px solid #caace52b; z-index: 2; }
.ims-scroll-count { padding-top: 3px; color: #d3bedf; font-size: 10px; line-height: 1; letter-spacing: .1em; white-space: nowrap; opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity 200ms var(--imp-ease-out), transform 200ms var(--imp-ease-out); }
.imp-stage.is-system-story .ims-scroll-count { opacity: 1; transform: translateY(0); }
@media (hover: hover) and (pointer: fine) {
  .ims-node:hover { background: #d3a6f413; border-color: #dfbaff29; }
  .ims-node:hover .ims-node-icon { border-color: #e3c8f4; color: #f5eaff; }
  .ims-node[aria-pressed="true"]:hover .ims-node-icon { color: #4f2c6a; }
  .ims-demo-primary:hover { background: #7a4b95; }
  .ims-demo-option:hover { background: #e8d9f1; }
  .ims-view button:hover { color: #f5e8ff; }
  .ims-view button[aria-pressed="true"]:hover { color: #3a214f; }
}
/* The story geometry hangs on the class alone. The class is not a scroll event
   any more: js/home-improving-system.js sets it once, from the screen (width,
   large-viewport height, reduced motion), and changes it only when the screen
   changes. So the stage is 420vh from the first layout, the pin comes from
   geometry, and the document height never moves under the reader (Alexa,
   20.09.2026). The conditions are deliberately not repeated here as a media
   query: on a phone `min-height` follows the browser bar, and a query that
   stops matching in the middle of the story would collapse the stage.
   Stage and panel are both made of `vh` — one unit, or the share of the way
   read by the script would drift. */
.imp-stage.is-system-story { position: relative; height: 420vh; margin-top: 72px; }
.imp-stage.is-system-story > .imp-system { position: sticky; top: 0; height: 100vh; margin-top: 0; }
.is-system-story .ims-panel { height: 100%; min-height: 0; margin: 0; border-radius: 0; border: 0; }
.is-system-story .ims-scroll-count { display: block; }
@media (min-width: 1100px) and (min-height: 760px) and (prefers-reduced-motion: no-preference) {
  .is-system-story .ims-panel { grid-template-rows: auto minmax(540px, 1fr); }
  .is-system-story .ims-map { min-height: 390px; }
}
@media (min-width: 1100px) and (max-height: 820px) {
  .ims-panel { padding-top: 30px; padding-bottom: 23px; }
  .imp-system .ims-heading h2 { font-size: 40px; }
  .imp-system .ims-eyebrow { margin-bottom: 10px; }
  .ims-intro { padding-top: 0; }
  .ims-intro .ims-hint { margin-top: 8px; }
  .ims-footer { padding-top: 17px; margin-top: 9px; }
  .ims-core { width: 410px; }
  #ims-demo { min-height: 275px; padding-top: 18px; padding-bottom: 15px; }
  .imp-system .ims-demo-title { font-size: 25px; }
  .ims-satellite { top: calc(46% + 105px); }
  .ims-node[data-topic="social"], .ims-node[data-topic="structure"] { top: 72%; }
}
@media (min-width: 1100px) and (max-width: 1349.98px) {
  .ims-panel { padding-left: 34px; padding-right: 34px; }
  .ims-node { width: 198px; gap: 10px; padding: 10px 7px; }
  .ims-node-icon { width: 39px; height: 39px; flex-basis: 39px; }
  .ims-node-copy strong { font-size: 14px; }
  .ims-node-copy > span:last-child { font-size: 9px; }
  .ims-core { width: 375px; }
  .ims-satellite { left: calc(50% + 85px); width: 190px; }
}
@media (max-width: 1099.98px) {
  .ims-panel { grid-template-rows: auto 1fr; padding: 35px 28px 25px; margin: 0 16px; min-height: 0; }
  .ims-heading h2 > span { display: inline; }
  .ims-intro { padding-top: 12px; }
  .ims-intro p br { display: none; }
  .ims-intro { max-width: 225px; }
  .ims-map { min-height: 655px; padding-top: 26px; display: flex; flex-direction: column; align-items: center; }
  .ims-nodes { position: relative; width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
  .ims-node { position: static; width: 100%; min-height: 78px; gap: 10px; padding: 9px; border-color: #caa8e124; background: #2b193426; }
  .ims-node-icon { width: 34px; height: 34px; flex-basis: 34px; }
  .ims-node-icon svg { width: 19px; height: 19px; }
  .ims-node-copy strong { font-size: 13px; }
  .ims-node-copy > span:last-child { display: none; }
  .ims-node-number { font-size: 7px; }
  .ims-links { display: none; }
  .ims-orbit { top: 68%; }
  .ims-core { position: relative; top: auto; left: auto; transform: none; width: 430px; max-width: 100%; margin-top: 34px; }
  .ims-satellite { top: auto; bottom: 67px; left: calc(50% + 112px); }
  .ims-view { bottom: 0; }
  .ims-footer { margin-top: 24px; }
}
@media (max-width: 719.98px) {
  .imp.imp-system { margin-top: 48px; }
  .ims-panel { margin: 0 8px; padding: 28px 12px 22px; border-radius: 22px; min-height: 0; }
  .ims-heading { display: block; }
  .imp-system .ims-heading h2 { font-size: clamp(30px, 7vw, 46px); }
  .imp-system .ims-eyebrow { font-size: 8px; margin-bottom: 12px; }
  .ims-intro { max-width: 100%; padding-top: 18px; }
  .imp-system .ims-intro p { font-size: 12px; max-width: 320px; }
  .ims-hint { font-size: 9px; margin-top: 12px; }
  .ims-map { min-height: 0; padding: 25px 0 0; gap: 0; }
  .ims-nodes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .ims-node { min-width: 0; min-height: 67px; padding: 8px; gap: 8px; border-radius: 10px; }
  .ims-node-copy { gap: 4px; }
  .ims-node-copy strong { font-size: 12px; }
  .ims-node-icon { width: 30px; height: 30px; flex-basis: 30px; }
  .ims-node-number { font-size: 6px; letter-spacing: .1em; }
  .ims-core { margin-top: 24px; border-radius: 13px; }
  .ims-corebar { padding: 11px 13px; gap: 6px; }
  .ims-core-brand { font-size: 8px; }
  .ims-core-brand > span:last-child { display: none; }
  .ims-demo-label { font-size: 5px; }
  #ims-demo { padding: 22px 20px; min-height: 300px; }
  .imp-system .ims-demo-title { font-size: 26px; }
  .ims-satellite { position: relative; top: auto; bottom: auto; left: auto; width: calc(100% - 28px); margin-top: -5px; border-radius: 0 0 11px 11px; padding: 12px 15px; box-shadow: none; z-index: 2; }
  #ims-satellite-title { font-size: 10px; }
  .imp-system #ims-satellite-body { font-size: 9px; }
  .ims-view { position: relative; bottom: auto; left: auto; transform: none; margin-top: 20px; }
  .ims-orbit { width: 540px; height: 390px; top: 55%; }
  .ims-orbit--inner { width: 430px; height: 300px; }
  .ims-footer { display: block; margin-top: 25px; padding-top: 22px; }
  .ims-scroll-count { display: none; }
}
@media (max-width: 374.98px) {
  .ims-panel { padding-left: 14px; padding-right: 14px; }
  .ims-node-copy strong { font-size: 11px; }
  .ims-node-icon { width: 26px; height: 26px; flex-basis: 26px; }
  .ims-node { gap: 6px; padding: 7px; }
  #ims-demo { padding-left: 17px; padding-right: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .ims-panel { clip-path: none !important; }
  .ims-signal { display: none; }
  .imp-system *, .imp-system *::before, .imp-system *::after { animation: none !important; transition-duration: 0ms !important; }
}

/* Compare belongs to the interface toolbar. The explanation is docked beneath
   the whole interface, so variable demo content cannot be covered by it. */
.ims-corebar .ims-view { position: static; margin: 0 0 0 auto; transform: none; border: 1px solid #9d7bad24; background: #e7dbef; padding: 3px; gap: 0; }
.ims-corebar .ims-view button { padding: 6px 10px; font-size: 8px; color: #8a7299; }
.ims-corebar .ims-view button[aria-pressed="true"] { background: #fcf8ff; color: #5c3875; box-shadow: 0 1px 4px #60427614; }
.ims-corebar .ims-view button span { margin-left: 5px; }
.ims-satellite { left: 50%; transform: translateX(-50%); width: 290px; padding: 11px 15px; box-shadow: 0 12px 40px #1c062e30; }
@media (max-width: 1099.98px) {
  .ims-satellite { position: relative; top: auto; bottom: auto; left: auto; transform: none; width: 320px; max-width: 100%; margin-top: 16px; }
  .ims-map { padding-bottom: 8px; }
}

/* Service explanations: motion changes the meaning-bearing elements in place. */
.ims-intro { max-width: 315px; }
.ims-node-copy > span:last-child { white-space: normal; line-height: 1.4; }
.ims-node-number { font-size: 7px; letter-spacing: .09em; line-height: 1.4; }
.ims-node-copy strong { line-height: 1.25; }
.imp-system .ims-demo-title { font-size: 24px; line-height: 1.16; }
.imp-system .ims-demo-eyebrow { font-size: 8px; margin-bottom: 7px; }
#ims-demo { min-height: 330px; padding: 22px 24px 17px; }
.ims-study { position: relative; height: 162px; margin: 13px 0 12px; color: #624579; }
.ims-focus-controls { display: flex; gap: 4px; }
.ims-focus-controls button { flex: 1; min-width: 0; border: 1px solid #87699d30; border-radius: 5px; padding: 7px 4px; background: transparent; color: #816a92; font: 9px/1.2 Inter, sans-serif; cursor: pointer; }
.ims-focus-controls button[aria-pressed="true"] { background: #e2d3ed; color: #57386c; border-color: #a489b7; }
.ims-focus-controls button:focus-visible, .ims-screen:focus-visible { outline-color: #785094; outline-offset: 3px; }
.imp-system .ims-focus-note { min-height: 34px; margin-top: 10px; color: #766181; font-size: 10px; line-height: 1.55; }
.ims-study [data-piece], .ims-hardware, .ims-layout, .ims-layout > *, .ims-layout-text i, .ims-format-art, .ims-format-art strong, .ims-bridge-link span, .ims-copy-long, .ims-copy-short { transition: transform 600ms var(--imp-ease-out), opacity 600ms var(--imp-ease-out), background 240ms ease, color 240ms ease, border-color 240ms ease; }
.imp-system[data-ims-instant="true"] .ims-study * { transition-duration: 0ms; }
.ims-route { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.ims-route svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: translateY(-10px); }
.ims-route svg path { fill: none; stroke-width: 1.4; }
.ims-route-detour { stroke: #a996b6; stroke-dasharray: 3 4; transition: opacity 350ms ease; }
.ims-route-direct { stroke: #9460b4; transition: opacity 350ms ease; }
.ims-route-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; flex: 1; font-size: 9px; }
.ims-route-step > span { display: grid; place-items: center; width: 37px; height: 37px; border: 1px solid #bd9dd0; border-radius: 11px; background: #f4eff9; font-size: 10px; }
.ims-route-step strong { font-weight: 400; }
.ims-route-step[data-selected] > span { background: #72528b; border-color: #72528b; color: #fff; }
.ims-route-friction { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); font-size: 8px; white-space: nowrap; color: #9b869f; transition: opacity 240ms ease; }
[data-view="before"] .ims-route-step:nth-of-type(2) { transform: translateY(25px); }
[data-view="before"] .ims-route-step:nth-of-type(3) { transform: translateY(-24px); }
[data-view="before"] .ims-route-direct, [data-view="after"] .ims-route-detour, [data-view="after"] .ims-route-friction { opacity: 0; }
.ims-bridge { display: grid; grid-template-columns: 1fr 60px 1fr; align-items: center; gap: 6px; }
.ims-touchpoint { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.ims-touchpoint > strong { font-size: 11px; font-weight: 400; min-height: 27px; }
.ims-touchpoint > span:last-child { font-size: 7px; letter-spacing: .15em; color: #a08aaf; }
.ims-paper-icon, .ims-digital-icon { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; width: 63px; height: 76px; padding: 11px; border: 1px solid #b193c5; background: #e5d7ef; box-shadow: 3px 4px #d2bedf; border-radius: 3px; }
.ims-paper-icon i, .ims-digital-icon i { height: 4px; width: 100%; background: #b598c9; border-radius: 2px; }
.ims-paper-icon i:last-child, .ims-digital-icon i:last-child { width: 60%; }
.ims-digital-icon { width: 82px; height: 62px; border-radius: 5px; padding-top: 20px; background: #f4eff9; }
.ims-digital-icon::before { content: ''; position: absolute; top: 10px; left: 11px; right: 11px; height: 2px; background: #d9c9e3; }
.ims-bridge-link { position: relative; height: 1px; background: #be9fcf33; }
.ims-bridge-link span { position: absolute; inset: 0; background: #9460b4; transform-origin: left; }
.ims-bridge-link i { position: absolute; right: 0; top: -6px; font-size: 10px; font-style: normal; color: #9165af; }
[data-view="before"] .ims-bridge-link span { transform: scaleX(.15); opacity: .25; }
.ims-formats { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ims-format { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.ims-format > span { font-size: 8px; color: #9a80ac; }
.ims-format-art { position: relative; display: flex; flex-direction: column; justify-content: space-between; width: 100%; height: 95px; border-radius: 4px; padding: 10px; background: #d7bce9; color: #694684; overflow: hidden; }
.ims-format:nth-child(2) { flex: .72; }
.ims-format:nth-child(2) .ims-format-art { height: 136px; }
.ims-format:nth-child(3) .ims-format-art { height: 70px; }
.ims-format-brand { font-size: 5px; letter-spacing: .1em; position: relative; z-index: 1; }
.ims-format-art strong { position: relative; font: 34px/1 Georgia, serif; z-index: 1; }
.ims-format-art i { position: absolute; right: -23px; bottom: -20px; width: 80px; height: 80px; border: 1px solid #a278bd; border-radius: 50%; }
.ims-format[data-selected] .ims-format-art { outline: 2px solid #976eb1; outline-offset: 3px; }
[data-view="before"] .ims-format:nth-child(2) .ims-format-art { background: #dbd7b4; color: #7d795c; transform: rotate(5deg); }
[data-view="before"] .ims-format:nth-child(2) strong { font-family: monospace; }
[data-view="before"] .ims-format:nth-child(3) .ims-format-art { background: #c4d3d9; color: #496276; transform: rotate(-5deg); }
[data-view="before"] .ims-format:nth-child(3) strong { font: italic 28px Georgia, serif; }
.ims-device-set { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; }
.ims-screen { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 9px; width: 48%; height: 136px; border: 0; background: none; padding: 0; color: #8b729b; font: inherit; cursor: pointer; }
.ims-screen[data-screen="Tablet"] { width: 30%; }
.ims-screen[data-screen="Mobile"] { width: 20%; }
.ims-screen-label { font-size: 9px; }
.ims-hardware { display: flex; flex-direction: column; gap: 7px; width: 100%; height: 100px; border: 1px solid #bda1cd; border-radius: 6px; padding: 7px; background: #fcf8ff; box-shadow: 0 4px 10px #ac87c21a; }
.ims-screen[data-screen="Tablet"] .ims-hardware { height: 119px; }
.ims-screen[data-screen="Mobile"] .ims-hardware { height: 127px; border-radius: 11px; padding: 7px 5px; }
.ims-screen[aria-pressed="true"] .ims-hardware { border-color: #7c5596; box-shadow: 0 0 0 3px #b693cc26; }
.ims-screen-top { display: flex; gap: 3px; }
.ims-screen-top i { display: block; width: 3px; height: 3px; border-radius: 50%; background: #c6add5; }
.ims-layout { display: grid; grid-template-columns: 1.1fr 1fr; grid-template-rows: 10px 1fr 10px; gap: 5px; flex: 1; }
.ims-layout-head { grid-column: 1 / -1; border-radius: 3px; background: #d0b5e2; }
.ims-layout-media { background: #e5d6ef; border-radius: 2px; }
.ims-layout-text { display: flex; flex-direction: column; gap: 5px; padding-top: 4px; }
.ims-layout-text i { display: block; height: 3px; width: 100%; background: #d9c5e6; border-radius: 2px; }
.ims-layout-text i:last-child { width: 65%; }
.ims-layout-action { grid-column: 1 / -1; width: 55%; border-radius: 3px; background: #9870b4; }
.ims-screen[data-screen="Tablet"] .ims-layout, .ims-screen[data-screen="Mobile"] .ims-layout { grid-template-columns: 1fr; grid-template-rows: 9px 28px 1fr 11px; }
.ims-screen[data-screen="Mobile"] .ims-layout-action { width: 100%; }
.ims-loading-order { position: absolute; bottom: -1px; left: 0; right: 0; display: flex; justify-content: center; gap: 10px; font-size: 8px; opacity: 0; transition: opacity 200ms ease; }
.ims-loading-order i { font-style: normal; color: #ad88c4; }
#ims-demo[data-focus="1"] .ims-loading-order { opacity: 1; }
#ims-demo[data-focus="1"] .ims-layout-media { opacity: .35; }
#ims-demo[data-focus="1"] .ims-layout-head, #ims-demo[data-focus="1"] .ims-layout-text i { background: #9c77b4; }
#ims-demo[data-focus="2"] .ims-layout-action { outline: 3px solid #bea0d84d; outline-offset: 2px; }
[data-view="before"] #ims-demo[data-focus="1"] .ims-layout-media { opacity: 1; background: #d4c1e1; }
[data-view="before"] #ims-demo[data-focus="1"] .ims-layout-head,
[data-view="before"] #ims-demo[data-focus="1"] .ims-layout-text i { background: #d4c1e1; }
[data-view="before"] #ims-demo[data-focus="2"] .ims-layout-action { outline-color: transparent; transform: scale(.68); transform-origin: left; opacity: .6; }
[data-view="before"] .ims-screen[data-screen="Tablet"] .ims-layout, [data-view="before"] .ims-screen[data-screen="Mobile"] .ims-layout { grid-template-columns: 1.1fr 1fr; grid-template-rows: 5px 21px 5px; transform: translateY(14px); }
[data-view="before"] .ims-screen[data-screen="Mobile"] .ims-layout-action { width: 35%; }
.ims-copy-study { height: 182px; }
.ims-copy-long, .ims-copy-short { position: absolute; inset: 0; padding: 13px 15px; border: 1px solid #bfa4ce40; border-radius: 6px; }
.ims-copy-label { display: block; font-size: 6px; line-height: 1.5; color: #a28ab1; letter-spacing: .1em; margin-bottom: 10px; }
.imp-system .ims-copy-long p { font-size: 10px; line-height: 1.7; color: #9b87a6; }
.ims-copy-short strong { display: block; font-size: 21px; font-weight: 400; line-height: 1.12; letter-spacing: -.03em; color: #624378; margin-bottom: 11px; }
.imp-system .ims-copy-short p { font-size: 10px; line-height: 1.65; color: #866b97; }
.ims-copy-study mark { background: transparent; color: inherit; }
.ims-copy-study mark[data-selected] { background: #ddcaec; color: #68447f; border-radius: 2px; }
[data-view="after"] .ims-copy-long, [data-view="before"] .ims-copy-short { opacity: 0; transform: translateY(8px); pointer-events: none; }
.ims-architecture { display: grid; place-items: center; }
.ims-structure-page { position: relative; width: 240px; max-width: 100%; height: 160px; border: 1px solid #be9cce66; background: #fcf8ff; border-radius: 6px; overflow: hidden; }
.ims-structure-block { position: absolute; left: 15px; right: 15px; height: 33px; top: 14px; padding: 7px 9px; border-radius: 3px; background: #ede2f3; border: 1px solid transparent; font-size: 9px; color: #86649b; }
.ims-structure-block i { display: block; width: 50%; height: 3px; margin-top: 4px; border-radius: 3px; background: #d8c5e4; }
.ims-structure-block[data-piece="1"] { transform: translateY(47px); }
.ims-structure-block[data-piece="2"] { transform: translateY(94px); background: #79528f; color: #f3e8fb; }
.ims-structure-block[data-piece="2"] i { display: none; }
.ims-structure-block[data-piece="3"], .ims-structure-block[data-piece="4"], .ims-structure-block[data-piece="5"] { opacity: 0; transform: translateX(30px); }
.ims-structure-block[data-selected] { border-color: #a77bbf; }
[data-view="before"] .ims-structure-block { width: 87px; height: 32px; padding: 7px; background: #ece3f1; color: #9b86a8; border-color: #d9c8e2; }
[data-view="before"] .ims-structure-block[data-piece="0"] { transform: translate(0,42px); }
[data-view="before"] .ims-structure-block[data-piece="1"] { transform: translate(110px,92px); }
[data-view="before"] .ims-structure-block[data-piece="2"] { transform: translate(0,92px); }
[data-view="before"] .ims-structure-block[data-piece="3"] { opacity: 1; transform: translate(110px,0); }
[data-view="before"] .ims-structure-block[data-piece="4"] { opacity: 1; transform: translate(0,0); }
[data-view="before"] .ims-structure-block[data-piece="5"] { opacity: 1; transform: translate(110px,42px); }
@media (hover: hover) and (pointer: fine) {
  .ims-focus-controls button:hover { background: #e9dff0; color: #64477a; }
  .ims-screen:hover .ims-hardware { border-color: #916ca9; }
}
@media (max-width: 1349.98px) {
  .ims-node-copy strong { font-size: 13px; }
  .ims-node-number { font-size: 6px; }
  .imp-system .ims-demo-title { font-size: 21px; }
  #ims-demo { padding-left: 18px; padding-right: 18px; }
  .ims-intro { max-width: 270px; }
}
@media (max-width: 719.98px) {
  .ims-intro { max-width: 100%; }
  .ims-node-copy strong { font-size: 11px; }
  .ims-node-number { font-size: 5px; }
  .ims-study { height: 150px; }
  .ims-device-set { gap: 9px; }
  .ims-copy-study { height: 200px; }
  .imp-system .ims-copy-long p { font-size: 9px; }
  .ims-focus-controls button { font-size: 8px; }
  #ims-demo { min-height: 330px; }
  .ims-bridge { grid-template-columns: 1fr 30px 1fr; }
}
@media (max-width: 719.98px) {
  .ims-satellite { width: calc(100% - 24px); margin-top: 0; border-radius: 0 0 12px 12px; }
  .ims-corebar { gap: 4px; }
  .ims-corebar .ims-view button { padding: 6px 8px; }
}

/* The upper-right corner stays empty in manual mode. Scroll mode earns one
   quiet counter there; all selected-topic meaning remains beside the map. */
.ims-center { position: absolute; top: 50%; left: 50%; width: 430px; transform: translate(-50%, -50%); z-index: 3; }
.ims-center > .ims-core { position: relative; top: auto; left: auto; width: 100%; margin: 0; transform: none; }
.ims-center > .ims-satellite { position: relative; top: auto; bottom: auto; left: auto; width: 290px; max-width: 100%; margin: 14px auto 0; transform: none; }
@media (min-width: 1100px) {
  .ims-orbit { top: 50%; }
  .ims-nodes { display: grid; grid-template-columns: 240px minmax(0,1fr) 240px; grid-template-rows: repeat(3,minmax(0,1fr)); align-items: center; padding: 12px 0; }
  .ims-map .ims-node { position: relative; inset: auto; }
  .ims-node[data-topic="flow"] { grid-area: 1 / 1; }
  .ims-node[data-topic="offline"] { grid-area: 2 / 1; }
  .ims-node[data-topic="social"] { grid-area: 3 / 1; }
  .ims-node[data-topic="devices"] { grid-area: 1 / 3; }
  .ims-node[data-topic="content"] { grid-area: 2 / 3; }
  .ims-node[data-topic="structure"] { grid-area: 3 / 3; }
}
@media (min-width: 1100px) and (max-height: 820px) {
  .ims-center { width: 410px; }
}
@media (min-width: 1100px) and (max-width: 1349.98px) {
  .ims-center { width: 375px; }
  .ims-nodes { grid-template-columns: 198px minmax(0,1fr) 198px; }
}
@media (max-width: 1099.98px) {
  .ims-center { position: relative; top: auto; left: auto; transform: none; max-width: 100%; margin-top: 30px; }
  .ims-center > .ims-satellite { width: 320px; }
  .ims-map { min-height: 0; padding-top: 8px; }
}
@media (max-width: 719.98px) {
  .ims-panel { row-gap: 10px; }
  .ims-center { margin-top: 24px; }
  .ims-center > .ims-satellite { width: calc(100% - 24px); margin-top: 0; }
}

/* Social media: the explanation and the work share one canvas. The three
   previews are the controls; selection brings the actual format forward. */
.ims-center > .ims-satellite[hidden] { display: none; }
.imp-system .ims-social-description { margin: 11px 0 0; color: #786185; font-size: 11px; line-height: 1.65; max-width: 35em; }
.ims-social-scene { height: 304px; margin: 22px 0 3px; isolation: isolate; }
.ims-social-piece { position: absolute; padding: 0; border: 0; background: none; color: #705c7e; text-align: left; font: inherit; cursor: pointer; transform-origin: 50% 55%; transition: transform 250ms var(--imp-ease-out); }
.ims-social-piece--website { width: 70%; top: 0; left: 0; transform: translateY(4px) scale(.93); transform-origin: left top; }
.ims-social-piece--post { width: 44%; top: 80px; left: 25%; transform: translateY(8px) rotate(-4deg) scale(.93); }
.ims-social-piece--story { width: 28%; top: 21px; right: 0; transform: translateY(4px) rotate(4deg) scale(.93); transform-origin: right top; }
.ims-social-piece[aria-pressed="true"] { z-index: 3; transform: translateY(0) rotate(0) scale(1); }
.ims-social-label { display: flex; align-items: center; justify-content: space-between; padding: 0 3px 7px; color: #907a9e; font: 8px/1.2 Inter, sans-serif; letter-spacing: .05em; }
.ims-social-label > span { font-size: 11px; }
.ims-social-piece--post .ims-social-label { position: absolute; top: calc(100% + 7px); left: 0; right: 0; padding-bottom: 0; }
.ims-social-piece[aria-pressed="true"] .ims-social-label { color: #4c2c62; }
.ims-social-frame { display: block; overflow: hidden; border: 1px solid #77588c32; border-radius: 7px; background: #fbf8fc; box-shadow: 0 10px 24px #33134514; transition: border-color 160ms ease, box-shadow 160ms ease; }
.ims-social-piece[aria-pressed="true"] .ims-social-frame { border-color: #9267af; box-shadow: 0 15px 26px #33134526; }
.ims-social-chrome { display: flex; align-items: center; height: 19px; padding: 0 7px; gap: 3px; font: 5px/1 Inter, sans-serif; color: #9f8eaa; }
.ims-social-chrome > i { width: 2px; height: 2px; border-radius: 50%; background: #c6b7cf; }
.ims-social-chrome > span { margin-left: 5px; }
.ims-social-chrome > b { margin-left: auto; font-weight: 400; letter-spacing: 1px; }
.ims-social-piece:not(.ims-social-piece--website) .ims-social-chrome > i { width: 8px; height: 8px; border-radius: 50%; background: #c2a0db; }
.ims-social-art { display: block; position: relative; overflow: hidden; background: #e0cced; color: #422652; height: 145px; padding: 14px; transition: background 240ms ease, color 240ms ease; }
.ims-social-piece--website .ims-social-art { height: 140px; }
.ims-social-wordmark { position: relative; z-index: 1; display: block; font: 600 8px/1 Inter, sans-serif; letter-spacing: -.05em; }
.ims-social-wordmark > span { margin-left: 2px; font-size: 5px; vertical-align: top; }
.ims-social-headline { position: relative; z-index: 1; display: block; margin-top: 17px; font: 500 23px/.98 Inter, sans-serif; letter-spacing: -.065em; }
.ims-social-motif { position: absolute; width: 102px; height: 102px; top: 25px; right: -15px; color: #b28bca; transform: rotate(0); transition: transform 250ms var(--imp-ease-out), color 240ms ease; }
.ims-social-signoff { position: relative; z-index: 1; display: block; margin-top: 14px; font: 5px/1.5 Inter, sans-serif; letter-spacing: .01em; }
.ims-social-piece--post .ims-social-art { height: 160px; padding: 13px; background: #4d2f61; color: #f3eaf9; }
.ims-social-piece--post .ims-social-headline { margin-top: 23px; font-size: 24px; }
.ims-social-piece--post .ims-social-motif { top: 69px; right: -26px; width: 116px; height: 116px; color: #81589b; }
.ims-social-piece--post .ims-social-signoff { margin-top: 12px; }
.ims-social-reactions { display: flex; align-items: center; gap: 7px; padding: 3px 8px; height: 21px; font: 13px/1 Inter, sans-serif; color: #8c769a; }
.ims-social-reactions > i { width: 5px; height: 7px; border: 1px solid currentColor; margin-left: auto; }
.ims-social-piece--story .ims-social-art { height: 211px; padding: 12px 10px; background: #d4b9e5; }
.ims-social-piece--story .ims-social-headline { margin-top: 29px; font-size: 20px; }
.ims-social-piece--story .ims-social-motif { width: 115px; height: 115px; top: 115px; right: -13px; color: #a37dbc; }
.ims-social-piece--story .ims-social-signoff { margin-top: 14px; font-size: 4px; }
.ims-social-piece[aria-pressed="true"] .ims-social-motif { transform: rotate(22.5deg); }
.ims-social-piece:focus-visible { outline-color: #785094; outline-offset: 4px; border-radius: 7px; }
[data-view="before"] .ims-social-piece--post .ims-social-art { background: #e8d3ba; color: #735037; }
[data-view="before"] .ims-social-piece--post .ims-social-wordmark { font-family: Georgia, serif; letter-spacing: .08em; }
[data-view="before"] .ims-social-piece--post .ims-social-headline { font-family: Georgia, serif; font-style: italic; letter-spacing: -.04em; }
[data-view="before"] .ims-social-piece--post .ims-social-motif { color: #bf9470; transform: rotate(45deg) scale(.8); }
[data-view="before"] .ims-social-piece--story .ims-social-art { background: #c9dce4; color: #365a68; }
[data-view="before"] .ims-social-piece--story .ims-social-wordmark { font-family: monospace; letter-spacing: .04em; }
[data-view="before"] .ims-social-piece--story .ims-social-headline { font-family: monospace; font-size: 16px; line-height: 1.2; letter-spacing: -.055em; }
[data-view="before"] .ims-social-piece--story .ims-social-motif { color: #7b9da8; transform: rotate(-30deg) scale(.7); }
@media (hover: hover) and (pointer: fine) {
  .ims-social-piece:hover .ims-social-frame { border-color: #795592; }
}
@media (max-width: 1349.98px) {
  .ims-social-piece--website .ims-social-headline { font-size: 22px; }
  .ims-social-piece--post .ims-social-headline { font-size: 21px; }
  .ims-social-piece--story .ims-social-headline { font-size: 18px; }
}
@media (max-width: 719.98px) {
  .ims-social-scene { height: 284px; }
  .ims-social-piece--website { width: 74%; }
  .ims-social-piece--post { width: 49%; left: 19%; }
  .ims-social-piece--story { width: 31%; }
  .ims-social-piece--post .ims-social-art { height: 141px; }
  .ims-social-piece--story .ims-social-art { height: 190px; padding-left: 8px; padding-right: 8px; }
  .ims-social-piece--story .ims-social-headline { font-size: 16px; }
  .ims-social-piece--story .ims-social-wordmark { font-size: 7px; }
  [data-view="before"] .ims-social-piece--story .ims-social-headline { font-size: 14px; }
}
@media (max-width: 359.98px) {
  .ims-social-piece--story .ims-social-headline { font-size: 14px; }
  [data-view="before"] .ims-social-piece--story .ims-social-headline { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .ims-social-piece, .ims-social-motif { transition-duration: 0ms; }
}

/* Readable type: keep categories at 10px at every width, give the content
   room to grow, and remove repeated captions from the central interface. */
.ims-node { width: 280px; min-height: 110px; gap: 14px; }
.ims-node-copy { min-width: 0; gap: 7px; }
.ims-node-number { font-size: 10px; line-height: 1.4; letter-spacing: .045em; color: #d3bedf; }
.ims-node-copy strong { font-size: 18px; line-height: 1.25; }
.ims-node-copy > span:last-child { font-size: 12px; line-height: 1.5; color: #d4c1e4; }
.ims-center { width: 470px; }
.ims-corebar { padding: 14px 20px; }
.ims-core-brand { font-size: 11px; }
.ims-core-brand > span:last-child { display: none; }
.ims-corebar .ims-view button { font-size: 11px; padding: 8px 11px; color: #6f587c; }
.ims-corebar .ims-view button[aria-pressed="true"] { color: #4c2c61; }
.ims-corefoot, .ims-center > .ims-satellite { display: none; }
.imp-system .ims-demo-eyebrow { display: none; }
.imp-system .ims-demo-title { font-size: 28px; line-height: 1.16; margin-bottom: 14px; }
.ims-focus-controls { gap: 6px; }
.ims-focus-controls button { font-size: 11px; line-height: 1.3; min-height: 36px; padding: 9px 5px; color: #6f557e; }
.imp-system .ims-focus-note { min-height: 36px; font-size: 12px; line-height: 1.5; color: #6d527c; margin-top: 12px; }
.ims-screen-label { font-size: 11px; color: #705680; }
.ims-loading-order, .ims-route-friction { font-size: 10px; color: #755b83; }
.ims-route-step { min-width: 0; font-size: 11px; text-align: center; }
.ims-route-step > span { font-size: 12px; }
.ims-touchpoint > strong { font-size: 13px; line-height: 1.35; }
.ims-touchpoint > span:last-child { font-size: 10px; letter-spacing: .08em; color: #785e87; }
.ims-copy-study { display: grid; height: auto; min-height: 210px; }
.ims-copy-long, .ims-copy-short { position: relative; inset: auto; grid-area: 1 / 1; }
.ims-copy-label { font-size: 10px; line-height: 1.4; letter-spacing: .045em; color: #80638e; }
.imp-system .ims-copy-long p, .imp-system .ims-copy-short p { font-size: 12px; line-height: 1.6; color: #765c85; }
.ims-copy-short strong { font-size: 24px; }
.ims-structure-block { font-size: 11px; }
[data-view="before"] .ims-structure-block { height: 36px; padding: 5px 7px; line-height: 1.2; }
[data-view="before"] .ims-structure-block i { display: none; }
.ims-social-label { font-size: 11px; color: #795e87; }
.imp-system .ims-social-description { font-size: 13px; line-height: 1.55; color: #71557f; }
@media (min-width: 1100px) {
  .ims-nodes { grid-template-columns: 280px minmax(0, 1fr) 280px; }
}
@media (min-width: 1100px) and (max-width: 1349.98px) {
  .ims-node { width: 250px; gap: 12px; }
  .ims-node-copy strong { font-size: 17px; }
  .ims-nodes { grid-template-columns: 250px minmax(0, 1fr) 250px; }
  .ims-center { width: 420px; }
  .imp-system .ims-demo-title { font-size: 26px; }
}
@media (max-width: 1099.98px) {
  .ims-node { width: 100%; min-height: 100px; gap: 12px; padding: 12px; }
  .ims-node-copy strong { font-size: 16px; }
  .imp-system .ims-demo-title { font-size: 26px; }
}
@media (min-width: 720px) and (max-width: 899.98px) {
  .ims-nodes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 719.98px) {
  .imp-system .ims-eyebrow { font-size: 10px; letter-spacing: .1em; }
  .ims-node { display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: center; gap: 8px; min-height: 110px; padding: 10px; }
  .ims-node-copy { display: contents; }
  .ims-node-number { grid-column: 1 / -1; grid-row: 1; min-height: 28px; }
  .ims-node-icon { grid-column: 1; grid-row: 2; }
  .ims-node-copy strong { grid-column: 2; grid-row: 2; font-size: 14px; }
  .imp-system .ims-demo-title { font-size: 24px; }
  .ims-corebar { padding: 12px; }
  .ims-corebar .ims-view button { padding: 8px; }
  .ims-route-step { font-size: 10px; }
  .ims-focus-controls { gap: 4px; }
  .ims-focus-controls button { padding-left: 3px; padding-right: 3px; }
}
@media (max-width: 359.98px) {
  .ims-nodes { grid-template-columns: minmax(0, 1fr); }
  .ims-node { display: flex; min-height: 90px; gap: 12px; }
  .ims-node-copy { display: flex; }
  .ims-node-number { min-height: 0; }
  .ims-node-copy strong { font-size: 16px; }
}

/* Tablet / compact desktop: the explanation is a horizontal, full-width
   presentation card instead of a narrow desktop card scaled down. */
@media (min-width: 640px) and (max-width: 1099.98px) {
  .ims-center { width: 100%; max-width: none; }
  .ims-center > .ims-core { width: 100%; }
  #ims-demo {
    display: grid;
    grid-template-columns: minmax(170px, .78fr) minmax(0, 1.5fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    column-gap: clamp(18px, 3vw, 30px);
    row-gap: 12px;
    min-height: 340px;
    padding: 24px;
  }
  .ims-service-heading { grid-column: 1; grid-row: 1; min-width: 0; }
  #ims-demo > .ims-study { grid-column: 2; grid-row: 1 / span 3; align-self: center; width: 100%; margin: 0; }
  #ims-demo > .ims-focus-controls { grid-column: 1; grid-row: 2; flex-direction: column; }
  #ims-demo > .ims-focus-note { grid-column: 1; grid-row: 3; align-self: start; margin-top: 0; }
  .ims-focus-controls button { min-height: 34px; }
}

/* On the same compact canvases the scroll version becomes a real fixed
   presentation: compact index above, wide changing canvas below.

   The three parts — heading, index, canvas — stand together as one stack in
   the middle of the screen (Alexa, 20.09.2026: «сверху и снизу марджин 64
   минимум, 72, чтобы она больше к центру… по центру какая-то пустота»). The
   panel used to hand every spare pixel to the map row and pin the canvas to
   its bottom, so the spare height gathered between the index and the canvas —
   398 px on 834×1194. Now the first and the last rows of the panel are the
   only flexible ones: the spare height splits into two equal fields, above
   and below, and the gap under the index (12) stays smaller than the gap
   above it (18). The fields have a floor instead of a fixed size on purpose:
   a fixed 72 on a screen that cannot hold it would cut the canvas, and a cut
   is the worse failure. */
@media (min-width: 640px) and (max-width: 1099.98px) and (min-height: 760px) and (prefers-reduced-motion: no-preference) {
  .is-system-story .ims-panel {
    grid-template-rows: minmax(24px, 1fr) auto auto minmax(24px, 1fr);
    row-gap: 0;
    padding: 0 clamp(20px, 3vw, 32px);
  }
  .is-system-story .ims-heading { grid-row: 2; display: flex; }
  .is-system-story .ims-heading h2 { font-size: clamp(34px, 5.8vw, 44px); }
  .is-system-story .ims-map {
    grid-row: 3;
    display: grid;
    grid-template-rows: auto auto;
    align-items: start;
    min-height: 0;
    padding: 18px 0 0;
  }
  .is-system-story .ims-nodes { align-self: start; gap: 6px; }
  .is-system-story .ims-node {
    min-height: 58px;
    padding: 7px 9px;
    gap: 9px;
  }
  .is-system-story .ims-node-icon { width: 32px; height: 32px; flex-basis: 32px; }
  .is-system-story .ims-node-number { min-height: 0; font-size: 8px; }
  .is-system-story .ims-node-copy strong { font-size: 14px; }
  .is-system-story .ims-center {
    align-self: start;
    display: block;
    min-height: 0;
    margin-top: 12px;
  }
  .is-system-story .ims-center > .ims-core {
    display: block;
    height: auto;
    min-height: 0;
  }
  /* 352, not 340: the social canvas is 12 px taller than the other five, and
     a stack that is centred re-centres with it — the title and the index
     stepped 6 px on that topic. One height for all six keeps them still. */
  .is-system-story #ims-demo { height: auto; min-height: 352px; overflow: hidden; }
  /* The panel is as tall as the large viewport; what the reader sees while
     the browser bar is out is shorter. The last row gives that difference
     back, so the stack is centred in — and never cut by — the visible area. */
  @supports (height: 100dvh) {
    .is-system-story .ims-panel {
      grid-template-rows: minmax(24px, 1fr) auto auto minmax(24px, 1fr) calc(100lvh - 100dvh);
    }
  }
}

/* Narrow browser / phone-sized viewport: keep the same presentation rather
   than silently falling back to a long static section.

   Same stack, same two equal fields as on the tablet above. The height
   condition is gone from the query on purpose: the class already says the
   large viewport can hold the story, and on a phone `min-height` follows the
   browser bar — a query that stops matching in the middle of the pin would
   drop this layout inside a box that stays viewport-tall.

   The counter leaves the heading row and stands on the eyebrow line. Beside
   the title it took 62 px of the measure, so on 393 the title broke into four
   lines instead of two — and into three on topic 01, because «01» is narrower
   than «02»: everything under the title moved by 30 px between topics.

   The fields are paid for by the inner gaps, never by the content: no type
   size and no element changes here. Against the previous values — eyebrow
   8 → 6, heading to index 14 → 12, index rows 52 → 45 with gap 5 → 4, index
   to canvas 9 → 8, canvas bar 10 → 8, canvas padding 16 → 12, study margins
   10 → 6, title 14 → 10, note 12 → 8. On 393 that takes the fields from 41
   to 64 inside a 735 px visible area. An index row stays a 45 px target.

   Two canvases are taller than the rest and are left that way — their height
   is content. The copy study only loses its empty reserve (min-height 210 →
   its own text). The social scene keeps 28 px under it: its post stands lower
   than the scene box, and with less room the canvas cut its caption.

   Air given back (Alexa, 20.09.2026, on 393×852): «the cards lack height,
   you squashed them together, 32 between the two blocks, the gap to the six
   cards bigger too». On that screen the two free fields hold 122.7 each and
   the index was living on 45 — the compression above was paid for by the
   content, not by the fields. So the four numbers are taken back out of the
   fields, but only as far as a screen can pay: `--ims-air` is the phone's own
   height, full 20 from 730 up, nothing at 680 and below, where the panel has
   no field left to give — measured: the tallest topic («content») stops being
   able to pay for the full 20 under 730, and under 680 it has nothing at all,
   so a small phone keeps exactly the layout it has today. `svh` and not `vh`/`dvh` on purpose — it is the
   height with the browser bar shown, so the value cannot change while the bar
   collapses in the middle of the pin. At full air: index row 45 → 53 with its
   own padding 4 → 6.5, the gap between rows 4 → 6, the heading to the index
   12 → 22, the index to the canvas 8 → 32. Worst topic («content», the
   tallest canvas) keeps 15 px of field at a 735 px visible area — the floor
   of the query is 12. */
@media (min-width: 360px) and (max-width: 639.98px) and (prefers-reduced-motion: no-preference) {
  .is-system-story .ims-panel {
    /* Alexa, 20.09.2026: «сверху снизу должен быть больше отступ, по центру
       меньше». Until now it was the other way round — the outer fields were
       rubber with a floor of 12 and the inner gap was nailed to 32, so on a
       short screen the fields collapsed and the gap survived. The floor is
       20 wherever the screen can pay for it and still 12 where it cannot. */
    --ims-air: clamp(0px, (100svh - 680px) * 0.4, 20px);
    /* What is left over once a phone is taller than the shortest one this
       layout was measured on. It buys height for the index cards and the
       canvas — the two things she asked to grow — and it is 0 on a small
       phone, so nothing there changes. */
    --ims-lift: clamp(0px, (100svh - 740px) * 0.5, 60px);
    --ims-field: minmax(max(calc(12px + var(--ims-air) * 0.4), env(safe-area-inset-top, 0px)), 1fr);
    --ims-field-end: minmax(max(calc(12px + var(--ims-air) * 0.4), env(safe-area-inset-bottom, 0px)), 1fr);
    /* 20.09.2026, вторым заходом. Иконка и оба зазора в карточке были
       привязаны к --ims-lift, а он ноль, пока svh меньше 740. У настоящего
       iPhone с видимой адресной строкой svh 734 — то есть ровно то, на что
       она показывала («костяки»), не менялось вообще. Теперь это плоские
       числа: они не зависят от высоты экрана и платятся из полей, у которых
       на 734 есть 43 px запаса. --ims-lift остался только надбавкой к высоте
       карточки на длинном экране. */
    --ims-ico: 32px;
    grid-template-rows: var(--ims-field) auto auto var(--ims-field-end);
    row-gap: 0;
    padding: 0 12px;
  }
  .is-system-story .ims-heading { grid-row: 2; display: block; position: relative; }
  .is-system-story .ims-heading > div:first-child { min-width: 0; }
  .is-system-story .ims-heading h2 { font-size: clamp(29px, 7.5vw, 36px); line-height: 1.02; }
  .is-system-story .ims-eyebrow { margin-bottom: 6px; padding-right: 64px; font-size: 8px; line-height: 14px; }
  .is-system-story .ims-map {
    grid-row: 3;
    display: grid;
    grid-template-rows: auto auto;
    align-items: start;
    min-height: 0;
    padding: calc(12px + var(--ims-air) / 2) 0 0;
  }
  .is-system-story .ims-nodes { align-self: start; gap: calc(4px + var(--ims-air) / 10); }
  /* Alexa, 20.09.2026: «сейчас они как-то низкие… слева текст с номером и с
     заголовком прижат к иконке и к основному полотну текста». Height, inner
     fields and both gaps grow with the screen. `align-content: center` is not
     decoration: without it the extra height falls into the gap under the
     number instead of into the fields. */
  .is-system-story .ims-node {
    display: grid;
    grid-template-columns: var(--ims-ico) minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: center;
    min-height: calc(45px + var(--ims-air) * 0.4 + var(--ims-lift) * 0.3);
    padding: calc(5px + var(--ims-air) / 8) 12px;
    gap: 7px 10px;
  }
  .is-system-story .ims-node-copy { display: contents; }
  .is-system-story .ims-node-number {
    grid-column: 1 / -1;
    grid-row: 1;
    min-height: 0;
    font-size: 6px;
    line-height: 1.15;
  }
  .is-system-story .ims-node-icon {
    grid-column: 1;
    grid-row: 2;
    width: var(--ims-ico);
    height: var(--ims-ico);
    flex-basis: var(--ims-ico);
  }
  .is-system-story .ims-node-copy strong {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    font-size: 11px;
    line-height: 1.15;
  }
  .is-system-story .ims-center {
    align-self: start;
    display: block;
    width: 100%;
    min-height: 0;
    margin-top: calc(8px + var(--ims-air) * 0.6);
  }
  .is-system-story .ims-center > .ims-core { width: 100%; margin: 0; }
  .is-system-story .ims-corebar { padding: 8px 12px; }
  .is-system-story #ims-demo {
    display: block;
    height: auto;
    /* Пол, а не высота. Поднятый пол давал 42 px пустого белого внизу холста
       на пяти темах из шести — холст растёт по своему содержимому, а
       освободившаяся высота уходит в поля сверху и снизу, как она и просила. */
    min-height: 280px;
    padding: 10px;
    overflow: hidden;
  }
  .is-system-story .ims-demo-title { margin-bottom: 8px; }
  .is-system-story .ims-study { margin: 4px 0; }
  .is-system-story .ims-copy-study { min-height: 0; }
  .is-system-story .ims-focus-note { margin-top: 8px; }
  /* Тема 03 — единственная, которую резало на самом деле: подпись «Post ↗»
     уходила на 226 при сцене 190. Первый заход растил сцену через --ims-lift,
     то есть чинил только телефон со спрятанной адресной строкой, а платить за
     рост на коротком экране нечем. Поэтому ужата сама композиция: макеты
     подняты и укорочены, подпись возвращается внутрь при прежней сцене 190.
     Декоративные лепестки за холст выходят по-прежнему — это бликующая
     графика мокапа, её обрезка задумана. */
  .is-system-story .ims-social-scene { height: calc(190px + var(--ims-lift) * 0.6); margin-bottom: 16px; }
  .is-system-story .ims-social-piece--website .ims-social-art { height: 86px; }
  .is-system-story .ims-social-piece--post { top: 34px; }
  .is-system-story .ims-social-piece--post .ims-social-art { height: 92px; }
  .is-system-story .ims-social-piece--story .ims-social-art { height: 120px; }
  .is-system-story .ims-scroll-count { position: absolute; top: 0; right: 0; display: block; padding-top: 0; line-height: 14px; }
  /* See the tablet block: the last row is the part of the large viewport the
     browser bar is standing on right now. */
  @supports (height: 100svh) {
    .is-system-story .ims-panel {
      grid-template-rows: var(--ims-field) auto auto var(--ims-field-end) calc(100lvh - 100svh);
    }
  }
}

@media (min-width: 360px) and (max-width: 639.98px) {
  .ims-center { width: 100%; }
  #ims-demo { padding-left: 12px; padding-right: 12px; }
}