:root {
  color-scheme: light;
  --brand-black: #1e120d;
  --brand-blue-900: #00338f;
  --brand-blue-800: #003c8a;
  --brand-blue-600: #006db4;
  --brand-blue-500: #007dc1;
  --brand-cyan: #0293d2;
  --brand-sky: #a6d1e9;
  --brand-gold-700: #a0722b;
  --brand-gold-500: #c99a38;
  --brand-slate-700: #396479;
  --brand-slate-400: #889dae;
  --ink: var(--brand-blue-900);
  --ink-soft: var(--brand-blue-800);
  --ocean: var(--brand-blue-600);
  --cyan: var(--brand-cyan);
  --cyan-deep: var(--brand-blue-500);
  --blue: var(--brand-blue-800);
  --amber: var(--brand-gold-500);
  --paper: #ffffff;
  --paper-deep: color-mix(in srgb, var(--brand-sky) 25%, #ffffff);
  --white: #ffffff;
  --muted: var(--brand-slate-700);
  --line: rgba(0, 60, 138, 0.15);
  --line-dark: rgba(255, 255, 255, 0.14);
  --shadow: 0 30px 80px rgba(0, 51, 143, 0.14);
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --shell: min(1440px, calc(100vw - 80px));
  font-family: Inter, "Avenir Next", Avenir, "Segoe UI", Helvetica, Arial, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

body.is-demo {
  overflow: hidden;
  background: var(--paper-deep);
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  color: inherit;
}

svg {
  display: block;
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 1000;
  padding: 10px 14px;
  color: var(--white);
  background: var(--ink);
  border-radius: 6px;
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: translateY(0);
}

.icon {
  display: inline-flex;
  width: 1.15em;
  height: 1.15em;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.section-shell {
  width: var(--shell);
  margin-inline: auto;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--ocean);
  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.17em;
  line-height: 1.4;
}

.eyebrow > span {
  width: 27px;
  height: 2px;
  background: var(--cyan-deep);
}

.eyebrow--light {
  color: var(--brand-sky);
}

.eyebrow--light > span {
  background: var(--brand-sky);
}

.button {
  display: inline-flex;
  min-height: 52px;
  padding: 0 22px;
  align-items: center;
  justify-content: center;
  gap: 13px;
  border: 1px solid transparent;
  border-radius: 7px;
  font-size: 0.88rem;
  font-weight: 750;
  line-height: 1;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, color 180ms ease, background 180ms ease, border-color 180ms ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button:focus-visible,
.text-link:focus-visible,
.site-nav a:focus-visible,
.chapter-card:focus-visible,
.demo-sidebar a:focus-visible,
.step-nav a:focus-visible,
.assist-question:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(2, 147, 210, 0.42);
  outline-offset: 3px;
}

.button--primary {
  color: var(--white);
  background: var(--brand-blue-600);
  box-shadow: 0 14px 35px rgba(0, 109, 180, 0.23);
}

.button--primary:hover {
  background: var(--brand-blue-800);
  box-shadow: 0 18px 40px rgba(0, 60, 138, 0.3);
}

.button--disabled,
.button--disabled:hover,
.button:disabled {
  color: var(--muted);
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.5);
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.78;
  transform: none;
}

.button--ghost {
  color: var(--ink);
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.25);
}

.button--ghost:hover {
  border-color: rgba(0, 51, 143, 0.34);
  background: rgba(255, 255, 255, 0.64);
}

.button--ink {
  color: var(--white);
  background: var(--ink);
}

.button--ink:hover {
  background: var(--ink-soft);
}

.button--paper {
  color: var(--ink);
  background: var(--paper);
}

.button--small {
  min-height: 42px;
  padding-inline: 17px;
  font-size: 0.78rem;
}

.button--full {
  width: 100%;
}

.icon-button {
  display: inline-flex;
  width: 42px;
  height: 42px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}

.brand {
  --brand-logo-width: 145px;
  --brand-logo-height: 62px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
}

.brand__official {
  position: relative;
  display: block;
  overflow: hidden;
  width: var(--brand-logo-width);
  height: var(--brand-logo-height);
  flex: 0 0 auto;
}

.brand__official img {
  position: absolute;
  top: -10px;
  left: 0;
  width: var(--brand-logo-width);
  max-width: none;
  height: auto;
}

.brand__showcase {
  color: var(--brand-blue-800);
  font-size: 0.52rem;
  font-weight: 850;
  letter-spacing: 0.13em;
}

.brand--inverse .brand__showcase {
  color: var(--white);
}

.brand--inverse .brand__official img {
  filter: brightness(0) invert(1);
}

.brand--compact {
  --brand-logo-width: 103px;
  --brand-logo-height: 48px;
  gap: 6px;
}

.brand--compact .brand__official img {
  top: -7px;
}

.brand--compact .brand__showcase {
  font-size: 0.43rem;
}

.site-header {
  position: relative;
  z-index: 100;
  display: grid;
  width: var(--shell);
  height: 82px;
  margin-inline: auto;
  grid-template-columns: minmax(205px, 1fr) auto minmax(205px, 1fr);
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.site-header__brand {
  justify-self: start;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 34px;
}

.site-nav a,
.text-link {
  position: relative;
  color: #304b57;
  font-size: 0.78rem;
  font-weight: 700;
}

.text-link {
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.site-nav a::after {
  position: absolute;
  right: 0;
  bottom: -11px;
  left: 0;
  height: 2px;
  background: var(--cyan-deep);
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 160ms ease;
}

.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.site-header__actions {
  display: flex;
  justify-self: end;
  align-items: center;
  gap: 22px;
}

.language-selector {
  display: inline-flex;
  min-width: 76px;
  height: 34px;
  padding: 3px 5px 3px 3px;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(0, 51, 143, 0.16);
  border-radius: 18px;
}

.language-selector > span {
  display: inline-flex;
  width: 27px;
  height: 27px;
  align-items: center;
  justify-content: center;
  color: var(--white);
  background: var(--brand-blue-900);
  border-radius: 50%;
  font-size: 0.48rem;
  font-weight: 850;
  letter-spacing: 0.05em;
}

.language-selector select {
  min-width: 0;
  max-width: 70px;
  color: var(--brand-blue-900);
  background: transparent;
  border: 0;
  outline: 0;
  font: inherit;
  font-size: 0.58rem;
  font-weight: 750;
  cursor: pointer;
}

.language-selector:focus-within {
  border-color: var(--cyan-deep);
  box-shadow: 0 0 0 3px rgba(2, 147, 210, 0.14);
}

.site-header__session {
  max-width: 190px;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.55rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-header__menu {
  display: none;
}

.hero {
  position: relative;
  display: grid;
  min-height: 700px;
  padding: 84px 0 96px;
  grid-template-columns: minmax(420px, 0.88fr) minmax(600px, 1.12fr);
  align-items: center;
  gap: 65px;
}

.hero::before {
  position: absolute;
  z-index: -1;
  top: -82px;
  right: -40px;
  width: 580px;
  height: 580px;
  border: 1px solid rgba(0, 60, 138, 0.08);
  border-radius: 50%;
  content: "";
}

.hero__copy h1 {
  max-width: 680px;
  margin: 24px 0 28px;
  font-size: clamp(3.7rem, 5.2vw, 6.2rem);
  font-weight: 620;
  letter-spacing: -0.065em;
  line-height: 0.94;
}

.hero__copy h1 em {
  color: var(--ocean);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
}

.hero__lead {
  max-width: 600px;
  margin: 0;
  color: #47616b;
  font-size: 1.13rem;
  line-height: 1.65;
}

.hero__actions {
  display: flex;
  margin-top: 36px;
  gap: 12px;
}

.hero__note {
  display: flex;
  max-width: 535px;
  margin-top: 42px;
  padding-top: 24px;
  align-items: center;
  gap: 14px;
  border-top: 1px solid var(--line);
}

.hero__note p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

.hero__note strong {
  color: var(--ink);
}

.mini-orb,
.assist-orb {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--brand-blue-900);
  background: var(--brand-sky);
  border-radius: 50%;
}

.mini-orb .icon,
.assist-orb .icon {
  width: 18px;
  height: 18px;
}

.journey-visual {
  position: relative;
  overflow: hidden;
  min-height: 530px;
  color: var(--white);
  background: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.journey-visual::after {
  position: absolute;
  top: -100px;
  right: -110px;
  width: 370px;
  height: 370px;
  background: radial-gradient(circle, rgba(2, 147, 210, 0.19), transparent 68%);
  content: "";
  pointer-events: none;
}

.journey-visual__top,
.journey-visual__footer {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 58px;
  padding: 0 24px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line-dark);
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.journey-visual__top > span:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
}

.journey-visual__top i {
  width: 7px;
  height: 7px;
  background: #70e294;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(112, 226, 148, 0.09);
}

.live-chip {
  padding: 6px 9px;
  color: var(--brand-sky);
  border: 1px solid rgba(2, 147, 210, 0.25);
  border-radius: 100px;
}

.journey-visual__canvas {
  position: relative;
  height: 410px;
  background-image: linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 34px 34px;
}

.glass-sheet {
  position: absolute;
  border: 1px solid rgba(2, 147, 210, 0.16);
  background: linear-gradient(145deg, rgba(2, 147, 210, 0.05), rgba(255, 255, 255, 0.01));
  transform: skewY(-7deg);
}

.glass-sheet--one {
  top: 45px;
  right: 52px;
  width: 210px;
  height: 275px;
}

.glass-sheet--two {
  top: 67px;
  right: 80px;
  width: 210px;
  height: 275px;
}

.journey-line {
  position: absolute;
  top: 105px;
  left: 12%;
  width: 72%;
  height: 165px;
  border-bottom: 1px solid rgba(2, 147, 210, 0.28);
  border-left: 1px solid rgba(2, 147, 210, 0.28);
  transform: skewY(-13deg);
}

.journey-line::after {
  position: absolute;
  right: -3px;
  bottom: -4px;
  width: 7px;
  height: 7px;
  background: var(--amber);
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(201, 154, 56, 0.1);
  content: "";
}

.journey-node {
  position: absolute;
  z-index: 3;
  display: grid;
  width: 108px;
  padding: 14px;
  gap: 3px;
  background: rgba(0, 60, 138, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 10px;
  backdrop-filter: blur(10px);
}

.journey-node > span {
  color: var(--brand-sky);
  font-size: 0.6rem;
  font-weight: 800;
}

.journey-node strong {
  font-size: 0.79rem;
}

.journey-node small {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.58rem;
}

.journey-node--1 { top: 61px; left: 6%; }
.journey-node--2 { top: 110px; left: 26%; }
.journey-node--3 { top: 160px; left: 46%; }
.journey-node--4 { top: 211px; left: 66%; }
.journey-node--5 { top: 260px; left: 80%; }

.assist-float {
  position: absolute;
  z-index: 4;
  bottom: 22px;
  left: 25px;
  display: flex;
  width: min(370px, calc(100% - 50px));
  padding: 13px;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 12px;
  backdrop-filter: blur(12px);
}

.assist-float small {
  display: block;
  margin-bottom: 4px;
  color: var(--brand-sky);
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.assist-float strong {
  display: block;
  font-size: 0.7rem;
  line-height: 1.35;
}

.journey-visual__footer {
  min-height: 61px;
  border-top: 1px solid var(--line-dark);
  border-bottom: 0;
}

.journey-visual__footer span {
  display: grid;
  gap: 3px;
}

.journey-visual__footer b {
  color: var(--white);
  font-size: 0.63rem;
}

.metric-strip {
  display: grid;
  width: 100%;
  min-height: 160px;
  padding-inline: max(40px, calc((100vw - 1440px) / 2));
  grid-template-columns: repeat(4, 1fr) 1.25fr;
  color: var(--white);
  background: var(--ink);
}

.metric-strip > div,
.metric-strip > p {
  display: flex;
  margin: 0;
  padding: 30px 35px;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid var(--line-dark);
}

.metric-strip strong {
  font-size: 2.2rem;
  font-weight: 600;
  letter-spacing: -0.04em;
}

.metric-strip span,
.metric-strip p {
  color: var(--brand-sky);
  font-size: 0.69rem;
  line-height: 1.45;
}

.metric-strip p {
  border-right: 0;
  font-size: 0.78rem;
  text-transform: uppercase;
}

.metric-strip p strong {
  color: var(--white);
  font-size: inherit;
  letter-spacing: 0;
}

.value-section {
  padding-block: 140px;
}

.section-heading--split {
  display: grid;
  margin-bottom: 70px;
  grid-template-columns: 1.15fr 0.65fr;
  align-items: end;
  gap: 110px;
}

.section-heading h2 {
  max-width: 850px;
  margin: 20px 0 0;
  font-size: clamp(2.5rem, 4.4vw, 4.8rem);
  font-weight: 570;
  letter-spacing: -0.055em;
  line-height: 1;
}

.section-heading--split > p,
.section-heading--light > p {
  margin: 0;
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.72;
}

.feature-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 0.8fr;
  gap: 14px;
}

.feature-card {
  position: relative;
  display: flex;
  overflow: hidden;
  min-height: 410px;
  padding: 32px;
  flex-direction: column;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(0, 51, 143, 0.08);
  border-radius: var(--radius-md);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 50px rgba(0, 51, 143, 0.08);
}

.feature-card--large {
  min-height: 620px;
  grid-row: span 2;
}

.feature-card--wide {
  min-height: 195px;
  grid-column: span 2;
  flex-direction: row;
  align-items: end;
  gap: 40px;
}

.feature-card__number {
  position: absolute;
  top: 24px;
  right: 25px;
  color: #617278;
  font-family: Georgia, serif;
  font-size: 0.75rem;
}

.feature-card small {
  color: #006783;
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0.14em;
}

.feature-card h3 {
  max-width: 410px;
  margin: 10px 0 10px;
  font-size: 1.42rem;
  font-weight: 650;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

.feature-card p {
  max-width: 420px;
  margin: 0;
  color: var(--muted);
  font-size: 0.81rem;
  line-height: 1.6;
}

.feature-card__visual {
  position: relative;
  align-self: center;
}

.feature-card__visual--document {
  width: 76%;
  height: 285px;
}

.doc-sheet {
  position: absolute;
  inset: 0 20px 0 0;
  display: grid;
  padding: 52px 35px;
  gap: 18px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 18px 21px 0 #dfe7e4;
  transform: rotate(-3deg);
}

.doc-sheet::before {
  width: 52px;
  height: 7px;
  background: var(--cyan-deep);
  content: "";
}

.doc-sheet i {
  height: 5px;
  background: #dbe2df;
  border-radius: 10px;
}

.doc-sheet i:nth-child(2) { width: 80%; }
.doc-sheet i:nth-child(3) { width: 62%; }

.doc-sheet span {
  align-self: end;
  height: 65px;
  border-top: 1px solid #dbe2df;
  border-bottom: 1px solid #dbe2df;
}

.doc-chip {
  position: absolute;
  right: -10px;
  bottom: 34px;
  padding: 12px 15px;
  color: var(--white);
  background: var(--ink);
  border-radius: 7px;
  font-size: 0.62rem;
  font-weight: 700;
  box-shadow: var(--shadow);
}

.feature-card__visual--plan {
  display: grid;
  width: 82%;
  height: 145px;
  margin-top: 36px;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  gap: 8px;
  border-bottom: 1px solid var(--line);
}

.feature-card__visual--plan i {
  height: 45%;
  background: rgba(0, 125, 193, 0.18);
  border-top: 3px solid var(--cyan-deep);
}

.feature-card__visual--plan i:nth-child(2) { height: 85%; background: rgba(0, 60, 138, 0.17); border-color: var(--blue); }
.feature-card__visual--plan i:nth-child(3) { height: 64%; }

.feature-card__visual--plan b {
  position: absolute;
  top: 20px;
  left: 16%;
  width: 68%;
  border-top: 1px dashed rgba(0, 51, 143, 0.35);
}

.feature-card__visual--trace {
  display: grid;
  width: 82%;
  height: 145px;
  margin-top: 36px;
  grid-template-columns: 1fr 0.8fr;
  grid-template-rows: 1fr 0.65fr;
  gap: 5px;
  border: 7px solid #cfdad6;
  background: #cfdad6;
}

.feature-card__visual--trace div {
  background: linear-gradient(135deg, rgba(2, 147, 210, 0.45), rgba(0, 60, 138, 0.13));
}

.feature-card__visual--trace div:first-child { grid-row: span 2; }

.feature-card__visual--trace span {
  position: absolute;
  bottom: 15px;
  left: 20px;
  width: 13px;
  height: 13px;
  background: var(--amber);
  border: 3px solid var(--white);
  border-radius: 50%;
}

.mini-chart {
  display: flex;
  width: 300px;
  height: 100px;
  padding: 5px 0 0;
  align-items: end;
  gap: 10px;
  border-bottom: 1px solid var(--line);
}

.mini-chart span {
  width: 24px;
  background: linear-gradient(var(--cyan), var(--cyan-deep));
  border-radius: 4px 4px 0 0;
}

.chapters-section {
  padding: 135px 0 110px;
  color: var(--white);
  background: var(--ink);
}

.section-heading--light {
  display: grid;
  max-width: 900px;
  margin-bottom: 70px;
  grid-template-columns: 1fr 0.56fr;
  align-items: end;
  column-gap: 90px;
}

.section-heading--light .eyebrow,
.section-heading--light h2 {
  grid-column: 1;
}

.section-heading--light .eyebrow {
  color: var(--brand-sky);
}

.section-heading--light .eyebrow > span {
  background: var(--brand-sky);
}

.section-heading--light > p {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: end;
  color: rgba(255, 255, 255, 0.75);
}

.chapter-showcase {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line-dark);
  border-left: 1px solid var(--line-dark);
}

.chapter-card {
  position: relative;
  display: flex;
  min-height: 330px;
  padding: 30px;
  flex-direction: column;
  border-right: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  transition: background 180ms ease;
}

.chapter-card:hover {
  background: rgba(255, 255, 255, 0.055);
}

.chapter-card__number {
  position: absolute;
  top: 25px;
  right: 28px;
  color: #9aabb0;
  font-family: Georgia, serif;
  font-size: 0.85rem;
}

.chapter-card > small {
  margin-top: 66px;
  color: var(--brand-sky);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.chapter-card h3 {
  max-width: 330px;
  margin: 12px 0 13px;
  font-size: 1.5rem;
  font-weight: 580;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

.chapter-card p {
  max-width: 380px;
  margin: 0;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.78rem;
  line-height: 1.6;
}

.chapter-card__link {
  display: flex;
  margin-top: auto;
  align-items: center;
  justify-content: space-between;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.72rem;
  font-weight: 700;
}

.chapter-card__link .icon {
  color: var(--brand-sky);
}

.flow-index {
  display: grid;
  margin-top: 60px;
  grid-template-columns: repeat(12, 1fr);
}

.flow-index span {
  position: relative;
  display: grid;
  min-width: 0;
  padding-top: 22px;
  color: #9aabb0;
  font-size: 0.58rem;
  text-align: center;
}

.flow-index span::before {
  position: absolute;
  top: 5px;
  right: 0;
  left: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.16);
  content: "";
}

.flow-index span::after {
  position: absolute;
  top: 2px;
  left: calc(50% - 3px);
  width: 7px;
  height: 7px;
  background: #53646a;
  border-radius: 50%;
  content: "";
}

.flow-index span.is-active {
  color: var(--white);
}

.flow-index span.is-active::after {
  background: var(--cyan);
  box-shadow: 0 0 0 5px rgba(2, 147, 210, 0.1);
}

.flow-index b {
  margin-bottom: 4px;
  font-size: 0.64rem;
}

.assist-section {
  display: grid;
  min-height: 730px;
  padding-block: 125px;
  grid-template-columns: 1fr 0.8fr;
  align-items: center;
  gap: 110px;
}

.assist-section__visual {
  position: relative;
  height: 500px;
  overflow: hidden;
  background: linear-gradient(145deg, #0b2d3a, #06171f);
  border-radius: var(--radius-lg);
}

.assist-halo {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid rgba(2, 147, 210, 0.18);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.assist-halo--one { width: 270px; height: 270px; }
.assist-halo--two { width: 430px; height: 430px; border-style: dashed; }

.assist-core {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  width: 82px;
  height: 82px;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  background: var(--cyan);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(2, 147, 210, 0.07), 0 0 70px rgba(2, 147, 210, 0.25);
  transform: translate(-50%, -50%);
}

.assist-core .icon { width: 31px; height: 31px; }

.assist-hero-mascot {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 270px;
  filter: drop-shadow(0 22px 30px rgba(0, 0, 0, 0.2));
  transform: translate(-50%, -48%);
  animation: mascot-float 3.8s ease-in-out infinite;
}

.mascot-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.mascot-eye {
  fill: var(--brand-blue-800);
  transform-box: fill-box;
  transform-origin: center;
  animation: mascot-blink 6s infinite;
}

.mascot-mouth,
.mascot-wink {
  fill: none;
  stroke: var(--brand-blue-800);
  stroke-width: 6;
  stroke-linecap: round;
}

.mascot-leg,
.mascot-limb {
  fill: none;
  stroke: var(--brand-blue-900);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mascot-foot,
.mascot-hand {
  fill: none;
  stroke: var(--brand-cyan);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mascot-pen,
.mascot-pointer {
  transform-box: fill-box;
  transform-origin: left bottom;
}

.mascot-pen {
  animation: mascot-pen-gesture 2.4s ease-in-out infinite;
}

.mascot-pointer {
  animation: mascot-pointer-tap 2s ease-in-out infinite;
}

.mascot-pen__body {
  fill: none;
  stroke: var(--brand-blue-800);
  stroke-width: 8;
  stroke-linecap: round;
}

.mascot-pen__cap {
  fill: none;
  stroke: var(--brand-cyan);
  stroke-width: 4;
  stroke-linecap: round;
}

.mascot-pen__tip {
  fill: none;
  stroke: var(--brand-gold-500);
  stroke-width: 6;
  stroke-linecap: round;
}

.mascot-pointer__ring {
  fill: none;
  stroke: var(--brand-gold-500);
  stroke-width: 3;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: mascot-tap-ring 2s ease-out infinite;
}

.mascot-pointer__dot {
  fill: var(--brand-gold-500);
}

.mascot-computer__screen {
  fill: var(--brand-blue-900);
  stroke: var(--brand-cyan);
  stroke-width: 5;
}

.mascot-computer__base {
  fill: var(--brand-sky);
  stroke: var(--brand-blue-900);
  stroke-width: 4;
  stroke-linejoin: round;
}

.mascot-computer__mark {
  fill: none;
  stroke: var(--white);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: mascot-screen-glow 2.4s ease-in-out infinite;
}

.mascot-scanner {
  transform-box: fill-box;
  transform-origin: left bottom;
  animation: mascot-scanner-move 2.8s ease-in-out infinite;
}

.mascot-scanner__head {
  fill: var(--brand-blue-800);
  stroke: var(--brand-cyan);
  stroke-width: 5;
  stroke-linejoin: round;
}

.mascot-scanner__handle {
  fill: var(--brand-sky);
  stroke: var(--brand-blue-900);
  stroke-width: 5;
  stroke-linejoin: round;
}

.mascot-scanner__beam {
  fill: none;
  stroke: var(--brand-gold-500);
  stroke-width: 3;
  stroke-linecap: round;
  animation: mascot-scan-beam 1.4s ease-in-out infinite;
}

.mascot-steering {
  transform-box: fill-box;
  transform-origin: center;
  animation: mascot-steer 2.7s ease-in-out infinite;
}

.mascot-steering__wheel {
  fill: #fff;
  stroke: var(--brand-blue-800);
  stroke-width: 9;
}

.mascot-steering__hub {
  fill: var(--brand-cyan);
  stroke: var(--brand-blue-900);
  stroke-width: 5;
}

.mascot-steering__spoke {
  fill: none;
  stroke: var(--brand-blue-800);
  stroke-width: 6;
  stroke-linecap: round;
}

.assist-message {
  position: absolute;
  display: grid;
  width: 225px;
  padding: 14px 16px;
  gap: 5px;
  color: var(--white);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 10px;
  backdrop-filter: blur(10px);
}

.assist-message small {
  color: var(--brand-sky);
  font-size: 0.53rem;
  font-weight: 800;
  letter-spacing: 0.13em;
}

.assist-message strong {
  font-size: 0.7rem;
  line-height: 1.4;
}

.assist-message--one { top: 55px; left: 40px; }
.assist-message--two { top: 123px; right: 27px; }
.assist-message--three { right: 82px; bottom: 45px; }

.assist-section__copy h2 {
  max-width: 580px;
  margin: 22px 0 25px;
  font-size: clamp(2.6rem, 4.2vw, 4.6rem);
  font-weight: 570;
  letter-spacing: -0.055em;
  line-height: 0.98;
}

.assist-section__copy > p {
  max-width: 600px;
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.75;
}

.check-list {
  display: grid;
  margin: 32px 0;
  padding: 0;
  gap: 13px;
  list-style: none;
}

.check-list li {
  display: flex;
  align-items: center;
  gap: 11px;
  color: #294650;
  font-size: 0.82rem;
  font-weight: 650;
}

.check-list .icon {
  width: 19px;
  height: 19px;
  padding: 3px;
  color: var(--ocean);
  background: rgba(2, 147, 210, 0.18);
  border-radius: 50%;
}

.text-cta {
  display: inline-flex;
  padding-bottom: 7px;
  align-items: center;
  gap: 25px;
  border-bottom: 1px solid var(--ink);
  font-size: 0.77rem;
  font-weight: 800;
}

.text-cta--light {
  color: var(--white);
  border-bottom-color: rgba(255, 255, 255, 0.65);
}

.company-bridge {
  display: grid;
  padding: 120px 0;
  grid-template-columns: minmax(0, 0.9fr) minmax(480px, 1.1fr);
  align-items: center;
  gap: 100px;
}

.company-bridge__copy h2 {
  max-width: 700px;
  margin: 21px 0 20px;
  font-size: clamp(2.8rem, 4.5vw, 5rem);
  font-weight: 570;
  letter-spacing: -0.06em;
  line-height: 0.96;
}

.company-bridge__copy > p {
  max-width: 610px;
  margin: 0;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.75;
}

.company-bridge__actions {
  display: flex;
  margin-top: 32px;
  align-items: center;
  gap: 28px;
}

.company-bridge__facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.company-bridge__facts article {
  display: flex;
  min-height: 250px;
  padding: 28px;
  flex-direction: column;
  justify-content: flex-end;
  gap: 9px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.company-bridge__facts strong {
  color: var(--brand-blue-600);
  font-family: Georgia, serif;
  font-size: clamp(1.8rem, 2.5vw, 2.8rem);
  font-weight: 500;
  letter-spacing: -0.045em;
}

.company-bridge__facts span {
  color: var(--muted);
  font-size: 0.67rem;
  font-weight: 700;
  line-height: 1.5;
}

.access-banner {
  display: grid;
  margin-bottom: 95px;
  padding: 75px;
  grid-template-columns: 1fr 0.65fr;
  align-items: end;
  gap: 100px;
  color: var(--white);
  background: var(--ocean);
  border-radius: var(--radius-lg);
}

.corporate-preview {
  display: grid;
  padding: 25px 0 125px;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 90px;
}

.corporate-preview__intro h2 {
  max-width: 620px;
  margin: 20px 0 22px;
  font-size: clamp(2.4rem, 4vw, 4.2rem);
  font-weight: 570;
  letter-spacing: -0.055em;
  line-height: 1;
}

.corporate-preview__intro p {
  max-width: 570px;
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.72;
}

.corporate-preview__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.corporate-preview__cards article {
  position: relative;
  display: flex;
  min-height: 370px;
  padding: 30px;
  flex-direction: column;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.corporate-preview__cards article > span {
  position: absolute;
  top: 26px;
  right: 28px;
  color: #617278;
  font-family: Georgia, serif;
  font-size: 0.68rem;
}

.corporate-preview__cards small {
  margin-top: 75px;
  color: #006783;
  font-size: 0.59rem;
  font-weight: 850;
  letter-spacing: 0.14em;
}

.corporate-preview__cards h3 {
  max-width: 330px;
  margin: 12px 0 14px;
  font-size: 1.38rem;
  font-weight: 620;
  letter-spacing: -0.035em;
  line-height: 1.12;
}

.corporate-preview__cards p {
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.62;
}

.corporate-preview__cards b {
  margin-top: auto;
  color: #5b7078;
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.access-banner h2 {
  max-width: 760px;
  margin: 20px 0 0;
  font-size: clamp(2.5rem, 4.4vw, 4.8rem);
  font-weight: 560;
  letter-spacing: -0.055em;
  line-height: 0.99;
}

.access-banner .eyebrow--light {
  color: var(--white);
}

.access-banner .eyebrow--light > span {
  background: var(--white);
}

.access-banner p {
  margin: 0 0 25px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9rem;
  line-height: 1.65;
}

.site-footer {
  padding: 80px max(40px, calc((100vw - 1440px) / 2)) 28px;
  color: var(--white);
  background: var(--ink);
}

.site-footer__top {
  display: grid;
  padding-bottom: 70px;
  grid-template-columns: 0.82fr 1.18fr;
  border-bottom: 1px solid var(--line-dark);
}

.site-footer__top > div:first-child p {
  max-width: 370px;
  margin: 24px 0 0;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.78rem;
  line-height: 1.6;
}

.site-footer__links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 38px;
}

.site-footer__links > div {
  display: grid;
  align-content: start;
  gap: 11px;
}

.site-footer__links span {
  margin-bottom: 7px;
  color: var(--brand-sky);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.site-footer__links a,
.site-footer__links button {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.77rem;
}

.site-footer__links button {
  width: fit-content;
  padding: 0;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.site-footer__links a:hover,
.site-footer__links button:hover {
  color: var(--white);
}

.site-footer__bottom {
  display: flex;
  padding-top: 25px;
  justify-content: space-between;
  color: #9aabb0;
  font-size: 0.6rem;
}

/* Web corporativa */
.corporate-page {
  background: var(--paper);
}

.about-hero {
  display: grid;
  min-height: 650px;
  padding: 80px 0 95px;
  grid-template-columns: minmax(480px, 0.95fr) minmax(460px, 1.05fr);
  align-items: center;
  gap: 90px;
}

.about-hero__copy h1,
.contact-hero h1,
.blog-hero h1 {
  margin: 22px 0 24px;
  font-size: clamp(3.8rem, 6.6vw, 7.5rem);
  font-weight: 560;
  letter-spacing: -0.07em;
  line-height: 0.9;
}

.about-hero__copy h1 em {
  color: var(--brand-blue-600);
  font-family: Georgia, serif;
  font-weight: 400;
}

.about-hero__copy > p,
.contact-hero > div > p,
.blog-hero > p {
  max-width: 650px;
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.75;
}

.about-hero__visual {
  position: relative;
  overflow: hidden;
  min-height: 455px;
  background: linear-gradient(145deg, var(--brand-blue-900), var(--brand-blue-600));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.about-hero__visual::before {
  position: absolute;
  top: -120px;
  right: -80px;
  width: 390px;
  height: 390px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  content: '';
}

.about-year {
  position: absolute;
  z-index: 3;
  right: 55px;
  bottom: 48px;
  display: grid;
  color: var(--white);
}

.about-year small {
  color: var(--brand-sky);
  font-size: 0.58rem;
  font-weight: 850;
  letter-spacing: 0.16em;
}

.about-year strong {
  margin-left: -7px;
  font-family: Georgia, serif;
  font-size: clamp(5rem, 8vw, 8rem);
  font-weight: 400;
  letter-spacing: -0.08em;
  line-height: 0.95;
}

.about-year span {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.about-glass {
  position: absolute;
  width: 250px;
  height: 340px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(166, 209, 233, 0.08);
  box-shadow: inset 0 0 38px rgba(255, 255, 255, 0.08);
}

.about-glass--one { top: 43px; left: 55px; transform: rotate(-11deg); }
.about-glass--two { top: 72px; left: 110px; transform: rotate(4deg); }

.origin-section {
  padding: 110px 0;
  color: var(--white);
  background: var(--brand-blue-900);
}

.origin-section__grid {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 75px 110px;
}

.origin-section h2 {
  max-width: 560px;
  margin: 20px 0 0;
  font-size: clamp(2.8rem, 4.5vw, 5rem);
  font-weight: 560;
  letter-spacing: -0.06em;
  line-height: 0.96;
}

.origin-section__story {
  display: grid;
  align-content: start;
  gap: 21px;
}

.origin-section__story p {
  max-width: 690px;
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.95rem;
  line-height: 1.8;
}

.origin-section__milestones {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line-dark);
  border-left: 1px solid var(--line-dark);
}

.origin-section__milestones article {
  display: grid;
  min-height: 230px;
  padding: 28px;
  align-content: end;
  gap: 9px;
  border-right: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}

.origin-section__milestones span { align-self: start; color: var(--brand-sky); font-family: Georgia, serif; font-size: 0.66rem; }
.origin-section__milestones strong { font-size: 1.3rem; }
.origin-section__milestones p { max-width: 320px; margin: 0; color: rgba(255, 255, 255, 0.64); font-size: 0.72rem; line-height: 1.6; }

.experience-section {
  display: grid;
  padding: 125px 0;
  grid-template-columns: 1fr 0.88fr;
  align-items: center;
  gap: 110px;
}

.experience-section__copy h2 {
  max-width: 700px;
  margin: 20px 0 22px;
  font-size: clamp(2.9rem, 4.7vw, 5.2rem);
  font-weight: 560;
  letter-spacing: -0.06em;
  line-height: 0.95;
}

.experience-section__story { display: grid; max-width: 680px; gap: 18px; }
.experience-section__story p { margin: 0; color: var(--muted); font-size: 0.93rem; line-height: 1.78; }
.experience-tags { display: flex; margin-top: 30px; flex-wrap: wrap; gap: 8px; }
.experience-tags span { padding: 8px 12px; color: var(--brand-blue-800); background: rgba(166, 209, 233, 0.22); border: 1px solid rgba(0, 60, 138, 0.12); border-radius: 100px; font-size: 0.59rem; font-weight: 750; }

.experience-section blockquote {
  position: relative;
  margin: 0;
  padding: 55px;
  color: var(--white);
  background: var(--brand-blue-600);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.experience-section blockquote > span { position: absolute; top: 17px; left: 28px; color: rgba(255, 255, 255, 0.18); font-family: Georgia, serif; font-size: 7rem; line-height: 1; }
.experience-section blockquote > p { position: relative; margin: 20px 0 45px; font-family: Georgia, serif; font-size: clamp(1.7rem, 2.7vw, 2.7rem); line-height: 1.25; }
.experience-section blockquote footer { display: grid; gap: 3px; }
.experience-section blockquote footer strong { font-size: 0.72rem; }
.experience-section blockquote footer small { color: rgba(255, 255, 255, 0.67); font-size: 0.55rem; }

.about-cta {
  display: grid;
  margin-bottom: 100px;
  padding: 65px 72px;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 60px;
  color: var(--white);
  background: linear-gradient(125deg, var(--brand-blue-900), var(--brand-blue-600));
  border-radius: var(--radius-lg);
}

.about-cta small { color: var(--brand-sky); font-size: 0.58rem; font-weight: 850; letter-spacing: 0.15em; }
.about-cta h2 { max-width: 700px; margin: 13px 0 0; font-size: clamp(2.2rem, 3.8vw, 4rem); font-weight: 560; letter-spacing: -0.055em; line-height: 1; }
.about-cta > div:last-child { display: flex; align-items: center; gap: 28px; }

.contact-hero,
.blog-hero {
  display: grid;
  min-height: 440px;
  padding: 80px 0 90px;
  grid-template-columns: 1fr 0.72fr;
  align-items: end;
  gap: 100px;
}

.contact-hero h1,
.blog-hero h1 { max-width: 850px; }

.contact-hero__email {
  display: grid;
  min-height: 125px;
  padding: 27px;
  grid-template-columns: 35px 1fr 24px;
  align-items: center;
  gap: 17px;
  color: var(--white);
  background: var(--brand-blue-600);
  border-radius: var(--radius-md);
  box-shadow: 0 25px 60px rgba(0, 109, 180, 0.2);
}

.contact-hero__email > .icon:first-child { width: 28px; height: 28px; color: var(--brand-sky); }
.contact-hero__email > span { display: grid; min-width: 0; gap: 5px; }
.contact-hero__email small { color: var(--brand-sky); font-size: 0.5rem; font-weight: 850; letter-spacing: 0.13em; }
.contact-hero__email strong { overflow: hidden; font-size: 0.83rem; text-overflow: ellipsis; }

.contact-body {
  display: grid;
  padding: 0 0 120px;
  grid-template-columns: 0.78fr 1.22fr;
  align-items: start;
  gap: 90px;
}

.contact-offices > .eyebrow { margin-bottom: 35px; }
.contact-offices article { display: grid; min-height: 170px; padding: 25px 0; grid-template-columns: 55px 1fr; border-top: 1px solid var(--line); }
.contact-offices article:last-of-type { border-bottom: 1px solid var(--line); }
.contact-offices__number { color: var(--brand-blue-600); font-family: Georgia, serif; font-size: 0.7rem; }
.contact-offices article small { color: var(--brand-blue-600); font-size: 0.54rem; font-weight: 850; letter-spacing: 0.13em; }
.contact-offices article h2 { margin: 9px 0 7px; font-size: 1.45rem; font-weight: 620; letter-spacing: -0.035em; }
.contact-offices article p { margin: 0 0 20px; color: var(--muted); font-size: 0.7rem; }
.contact-offices article a { display: inline-flex; align-items: center; gap: 8px; color: var(--brand-blue-600); font-size: 0.7rem; font-weight: 800; }
.contact-offices__note { display: flex; margin-top: 30px; padding: 22px; align-items: center; gap: 15px; background: var(--paper-deep); border-radius: 10px; }
.contact-offices__note > .icon { width: 25px; height: 25px; color: var(--brand-blue-600); }
.contact-offices__note p { display: grid; margin: 0; gap: 3px; color: var(--muted); font-size: 0.59rem; line-height: 1.45; }
.contact-offices__note strong { color: var(--ink); font-size: 0.64rem; }

.contact-form-card {
  min-height: 660px;
  padding: clamp(35px, 5vw, 68px);
  background: #f7fafb;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 28px 70px rgba(0, 51, 143, 0.08);
}

.contact-form { display: grid; gap: 18px; }
.contact-form__heading { margin-bottom: 8px; }
.contact-form__heading small { color: var(--brand-blue-600); font-size: 0.54rem; font-weight: 850; letter-spacing: 0.14em; }
.contact-form__heading h2 { margin: 11px 0 7px; font-size: clamp(2rem, 3vw, 3.1rem); font-weight: 590; letter-spacing: -0.05em; }
.contact-form__heading p { margin: 0; color: var(--muted); font-size: 0.7rem; }
.contact-form__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
.contact-form > label:not(.check-field):not(.contact-form__trap),
.contact-form__row label { display: grid; gap: 7px; color: #36515c; font-size: 0.61rem; font-weight: 750; }
.contact-form label > span { color: var(--muted); font-size: 0.5rem; font-weight: 500; }
.contact-form input,
.contact-form select,
.contact-form textarea { width: 100%; padding: 0 14px; color: var(--ink); background: var(--white); border: 1px solid rgba(0, 51, 143, 0.18); border-radius: 7px; font-size: 0.72rem; }
.contact-form input,
.contact-form select { height: 49px; }
.contact-form textarea { min-height: 135px; padding-block: 13px; resize: vertical; line-height: 1.55; }
.contact-form .check-field a,
.access-form .check-field a { color: var(--brand-blue-600); text-decoration: underline; text-underline-offset: 2px; }
.contact-form > .button { justify-self: start; min-width: 205px; }
.contact-form .form-foot { justify-content: flex-start; }
.contact-form__trap { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; }

.contact-success { display: flex; min-height: 530px; align-items: flex-start; justify-content: center; flex-direction: column; }
.contact-success > span { display: flex; width: 58px; height: 58px; margin-bottom: 30px; align-items: center; justify-content: center; color: var(--white); background: var(--brand-cyan); border-radius: 50%; box-shadow: 0 0 0 15px rgba(2, 147, 210, 0.1); }
.contact-success > small { color: var(--brand-blue-600); font-size: 0.55rem; font-weight: 850; letter-spacing: 0.14em; }
.contact-success h2 { margin: 13px 0 13px; font-size: clamp(2.8rem, 4vw, 4.4rem); font-weight: 570; letter-spacing: -0.06em; line-height: 0.95; }
.contact-success p { max-width: 560px; margin: 0 0 32px; color: var(--muted); font-size: 0.85rem; line-height: 1.7; }

.blog-hero { min-height: 400px; }
.blog-hero > p { padding-bottom: 10px; }
.blog-featured { display: grid; padding-bottom: 90px; grid-template-columns: 1.2fr 0.9fr 0.9fr; gap: 18px; }

.blog-card {
  display: grid;
  overflow: hidden;
  min-width: 0;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.blog-card:hover { transform: translateY(-5px); box-shadow: 0 22px 55px rgba(0, 51, 143, 0.12); }
.blog-card__visual { position: relative; overflow: hidden; min-height: 180px; background: linear-gradient(145deg, var(--brand-blue-900), var(--brand-blue-600)); }
.blog-card--cyan .blog-card__visual { background: linear-gradient(145deg, var(--brand-blue-600), var(--brand-cyan)); }
.blog-card--gold .blog-card__visual { background: linear-gradient(145deg, #76501b, var(--brand-gold-500)); }
.blog-card--slate .blog-card__visual { background: linear-gradient(145deg, #294d5e, var(--brand-slate-700)); }
.blog-card__visual span { position: absolute; top: -70px; right: -25px; width: 210px; height: 210px; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 50%; }
.blog-card__visual i { position: absolute; right: 60px; bottom: -90px; width: 190px; height: 230px; border: 1px solid rgba(255, 255, 255, 0.32); background: rgba(255, 255, 255, 0.07); transform: rotate(20deg); }
.blog-card__visual b { position: absolute; right: 22px; bottom: 18px; color: rgba(255, 255, 255, 0.85); font-size: 0.54rem; letter-spacing: 0.13em; text-transform: uppercase; }
.blog-card__visual--image img { width: 100%; height: 100%; min-height: inherit; object-fit: cover; transition: transform 450ms ease; }
.blog-card:hover .blog-card__visual--image img { transform: scale(1.025); }
.blog-card__visual--image::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0, 30, 73, 0.72)); content: ''; }
.blog-card__visual--image b { z-index: 1; }
.blog-card--featured:first-child .blog-card__visual { min-height: 250px; }
.blog-card__body { display: flex; min-height: 310px; padding: 27px; flex-direction: column; }
.blog-card__body > div { display: flex; justify-content: space-between; gap: 14px; color: var(--muted); font-size: 0.51rem; font-weight: 700; text-transform: uppercase; }
.blog-card__body > div span { color: var(--brand-blue-600); }
.blog-card__body h2 { margin: 18px 0 13px; font-size: clamp(1.35rem, 2vw, 2rem); font-weight: 620; letter-spacing: -0.04em; line-height: 1.08; }
.blog-card__body p { margin: 0; color: var(--muted); font-size: 0.7rem; line-height: 1.65; }
.blog-card__body > strong { display: flex; margin-top: auto; padding-top: 25px; align-items: center; justify-content: space-between; color: var(--brand-blue-600); font-size: 0.63rem; }

.blog-archive { padding: 90px 0 125px; border-top: 1px solid var(--line); }
.blog-archive__heading { display: grid; margin-bottom: 42px; grid-template-columns: 1fr auto; align-items: end; }
.blog-archive__heading .eyebrow { grid-column: 1 / -1; }
.blog-archive__heading h2 { margin: 15px 0 0; font-size: clamp(2.6rem, 4vw, 4.4rem); font-weight: 570; letter-spacing: -0.055em; }
.blog-archive__heading > span { padding-bottom: 7px; color: var(--muted); font-size: 0.62rem; font-weight: 750; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.blog-notice { margin-bottom: 35px; padding: 15px 18px; color: #795118; background: rgba(201, 154, 56, 0.13); border: 1px solid rgba(160, 114, 43, 0.2); border-radius: 8px; font-size: 0.7rem; }

.article-hero { padding: 75px 0 100px; color: var(--white); background: radial-gradient(circle at 85% 15%, rgba(2, 147, 210, 0.3), transparent 30%), var(--brand-blue-900); }
.article-back { display: inline-flex; margin-bottom: 75px; align-items: center; gap: 9px; color: rgba(255, 255, 255, 0.68); font-size: 0.64rem; font-weight: 750; }
.article-hero__meta { display: flex; gap: 13px; color: var(--brand-sky); font-size: 0.58rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.article-hero__meta span::after { margin-left: 13px; content: '·'; }
.article-hero h1 { max-width: 1050px; margin: 22px 0 25px; font-size: clamp(3.5rem, 6.5vw, 7rem); font-weight: 560; letter-spacing: -0.068em; line-height: 0.93; }
.article-hero p { max-width: 800px; margin: 0; color: rgba(255, 255, 255, 0.74); font-size: 1rem; line-height: 1.7; }
.article-layout { display: grid; padding: 95px 0 130px; grid-template-columns: 100px minmax(0, 1fr) 320px; align-items: start; gap: 65px; }
.article-layout__mark { display: grid; justify-items: center; gap: 15px; color: var(--brand-blue-600); font-family: Georgia, serif; font-size: 1.1rem; }
.article-layout__mark i { width: 1px; height: 130px; background: var(--line); }
.article-layout__content h2 { max-width: 700px; margin: 19px 0 25px; font-size: clamp(2.4rem, 4vw, 4rem); font-weight: 570; letter-spacing: -0.055em; line-height: 1; }
.article-layout__content p { max-width: 750px; margin: 0 0 20px; color: var(--muted); font-size: 0.9rem; line-height: 1.8; }
.article-layout__content .article-paragraph--center { text-align: center; }
.article-layout__content .article-paragraph--right { text-align: right; }
.article-layout__content .article-paragraph--justify { text-align: justify; text-justify: inter-word; }
.article-layout__content .article-paragraph strong { color: var(--ink); font-weight: 750; }
.article-layout__content .article-paragraph em { color: color-mix(in srgb, var(--muted) 84%, var(--brand-blue-600)); }
.article-layout__content .button { margin-top: 17px; }
.article-figure { max-width: 820px; margin: 34px 0 38px; }
.article-figure img { display: block; width: 100%; border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow); }
.article-figure figcaption { margin-top: 10px; color: var(--muted); font-size: 0.56rem; line-height: 1.5; }
.article-layout > aside { display: grid; padding: 30px; gap: 14px; color: var(--white); background: var(--brand-blue-600); border-radius: var(--radius-md); }
.article-layout > aside small { color: var(--brand-sky); font-size: 0.5rem; font-weight: 850; letter-spacing: 0.12em; }
.article-layout > aside strong { font-size: 1.25rem; line-height: 1.25; }
.article-layout > aside a { display: flex; margin-top: 15px; padding-top: 18px; align-items: center; justify-content: space-between; border-top: 1px solid rgba(255, 255, 255, 0.2); font-size: 0.62rem; font-weight: 800; }

/* Documentación legal */
.legal-hero {
  padding: 82px 0 86px;
  color: var(--white);
  background: radial-gradient(circle at 82% 15%, rgba(2, 147, 210, 0.32), transparent 30%), var(--brand-blue-900);
}

.legal-hero h1 {
  max-width: 980px;
  margin: 22px 0 22px;
  font-size: clamp(3.7rem, 6.2vw, 6.8rem);
  font-weight: 560;
  letter-spacing: -0.065em;
  line-height: 0.92;
}

.legal-hero p {
  max-width: 760px;
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.94rem;
  line-height: 1.72;
}

.legal-hero__meta {
  display: flex;
  margin-top: 34px;
  flex-wrap: wrap;
  gap: 9px;
}

.legal-hero__meta span {
  padding: 7px 10px;
  color: var(--white);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 100px;
  font-size: 0.53rem;
  font-weight: 780;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.legal-layout {
  display: grid;
  padding: 90px 0 125px;
  grid-template-columns: 250px minmax(0, 820px);
  align-items: start;
  justify-content: space-between;
  gap: 90px;
}

.legal-navigation {
  position: sticky;
  top: 115px;
  display: grid;
  border-top: 1px solid var(--line);
}

.legal-navigation > small {
  padding: 19px 0 13px;
  color: var(--brand-blue-600);
  font-size: 0.53rem;
  font-weight: 850;
  letter-spacing: 0.14em;
}

.legal-navigation > a {
  display: grid;
  min-height: 52px;
  padding: 13px 8px;
  grid-template-columns: 29px 1fr;
  align-items: center;
  color: var(--muted);
  border-top: 1px solid var(--line);
  font-size: 0.68rem;
  font-weight: 720;
}

.legal-navigation > a span { color: #99aab0; font-family: Georgia, serif; font-size: 0.56rem; }
.legal-navigation > a[aria-current="page"] { color: var(--brand-blue-600); background: rgba(166, 209, 233, 0.16); }
.legal-navigation > a[aria-current="page"] span { color: var(--brand-cyan); }

.legal-navigation > button {
  display: flex;
  margin-top: 17px;
  padding: 13px 0;
  align-items: center;
  gap: 8px;
  color: var(--brand-blue-600);
  background: transparent;
  border: 0;
  font-size: 0.61rem;
  font-weight: 800;
  cursor: pointer;
}

.legal-navigation > button .icon { width: 17px; height: 17px; }
.legal-document { min-width: 0; }

.legal-review-note {
  display: grid;
  margin-bottom: 58px;
  padding: 22px 24px;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 15px;
  color: #6d4c1d;
  background: rgba(201, 154, 56, 0.12);
  border: 1px solid rgba(174, 105, 19, 0.2);
  border-radius: 10px;
}

.legal-review-note > .icon { width: 27px; height: 27px; }
.legal-review-note > div { display: grid; gap: 4px; }
.legal-review-note strong { font-size: 0.7rem; }
.legal-review-note span { color: #856b45; font-size: 0.62rem; line-height: 1.55; }

.legal-document > section {
  padding: 0 0 48px;
  margin-bottom: 48px;
  border-bottom: 1px solid var(--line);
}

.legal-document > section:last-child { margin-bottom: 0; }
.legal-document h2 { margin: 0 0 22px; color: var(--brand-blue-900); font-size: clamp(1.65rem, 2.8vw, 2.45rem); font-weight: 600; letter-spacing: -0.045em; }
.legal-document p { margin: 0 0 18px; color: var(--muted); font-size: 0.84rem; line-height: 1.82; }
.legal-document p:last-child { margin-bottom: 0; }
.legal-document a { color: var(--brand-blue-600); font-weight: 750; text-decoration: underline; text-underline-offset: 3px; }
.legal-document ul { display: grid; margin: 0; padding: 0 0 0 21px; gap: 12px; color: var(--muted); font-size: 0.82rem; line-height: 1.72; }
.legal-document li::marker { color: var(--brand-cyan); }
.legal-document li strong { color: var(--ink); }

.legal-data-list { display: grid; margin: 30px 0 0; border-top: 1px solid var(--line); }
.legal-data-list > div { display: grid; min-height: 62px; padding: 15px 0; grid-template-columns: 155px 1fr; align-items: center; gap: 25px; border-bottom: 1px solid var(--line); }
.legal-data-list dt { color: var(--brand-blue-600); font-size: 0.58rem; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; }
.legal-data-list dd { margin: 0; color: var(--ink); font-size: 0.74rem; line-height: 1.55; }

.legal-purpose-grid { display: grid; margin: 28px 0; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.legal-purpose-grid article { display: grid; min-height: 210px; padding: 25px; align-content: start; gap: 12px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.legal-purpose-grid strong { color: var(--ink); font-size: 0.84rem; }
.legal-purpose-grid p { margin: 0; font-size: 0.7rem; line-height: 1.65; }
.legal-purpose-grid small { margin-top: auto; color: var(--brand-blue-600); font-size: 0.54rem; font-weight: 800; line-height: 1.5; }

.legal-document .legal-callout {
  padding: 17px 19px;
  color: #6c5939;
  background: rgba(201, 154, 56, 0.1);
  border-left: 3px solid var(--brand-gold-500);
  font-size: 0.68rem;
  line-height: 1.65;
}

.legal-version { margin-top: 29px !important; color: #819399 !important; font-size: 0.61rem !important; }
.legal-version strong { color: var(--brand-blue-600); }

.legal-cookie-table { margin: 28px 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.legal-cookie-table > div { display: grid; min-height: 76px; grid-template-columns: 1.05fr 2fr 0.9fr 0.7fr; }
.legal-cookie-table > div > * { display: flex; min-width: 0; margin: 0; padding: 14px; align-items: center; color: var(--muted); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 0.61rem; line-height: 1.45; overflow-wrap: anywhere; }
.legal-cookie-table > div > code { color: var(--brand-blue-900); background: rgba(166, 209, 233, 0.13); font-size: 0.57rem; }
.legal-cookie-table > div > strong { color: var(--brand-blue-600); font-size: 0.56rem; }
.legal-cookie-table .legal-cookie-table__head { min-height: 42px; }
.legal-cookie-table__head span { color: var(--ink); background: var(--paper-deep); font-size: 0.53rem; font-weight: 850; letter-spacing: 0.07em; text-transform: uppercase; }

.cookie-inline-preferences { display: flex; margin-top: 28px; padding: 22px; align-items: center; justify-content: space-between; gap: 24px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; }
.cookie-inline-preferences > div { display: grid; gap: 6px; }
.cookie-inline-preferences small { color: var(--brand-blue-600); font-size: 0.51rem; font-weight: 850; letter-spacing: 0.11em; }
.cookie-inline-preferences strong { color: var(--ink); font-size: 0.8rem; }
.cookie-inline-preferences .button { flex: 0 0 auto; text-decoration: none; }

/* Preferencias de cookies */
.cookie-banner {
  position: fixed;
  z-index: 1000;
  right: 24px;
  bottom: 24px;
  left: 24px;
  display: grid;
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px 26px;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 35px;
  color: var(--white);
  background: rgba(5, 33, 47, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 15px;
  box-shadow: 0 24px 80px rgba(0, 25, 41, 0.35);
  backdrop-filter: blur(15px);
}

.cookie-banner > div:first-child { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 5px 14px; }
.cookie-banner small { color: var(--brand-sky); font-size: 0.5rem; font-weight: 850; letter-spacing: 0.12em; }
.cookie-banner strong { font-size: 0.85rem; }
.cookie-banner p { grid-column: 1 / -1; margin: 3px 0 0; color: rgba(255, 255, 255, 0.68); font-size: 0.63rem; line-height: 1.55; }
.cookie-banner a { grid-column: 1 / -1; width: fit-content; color: var(--brand-sky); font-size: 0.57rem; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.cookie-banner__actions { display: flex; gap: 8px; }
.cookie-banner .button { min-height: 42px; padding: 11px 16px; font-size: 0.58rem; white-space: nowrap; }
.cookie-banner .button--ghost { color: var(--white); border-color: rgba(255, 255, 255, 0.24); }

.cookie-dialog-backdrop {
  position: fixed;
  z-index: 1100;
  inset: 0;
  display: grid;
  padding: 24px;
  place-items: center;
  background: rgba(2, 20, 29, 0.72);
  backdrop-filter: blur(8px);
}

.cookie-dialog {
  position: relative;
  overflow: auto;
  width: min(680px, 100%);
  max-height: min(820px, calc(100vh - 48px));
  padding: 42px;
  color: var(--ink);
  background: var(--paper);
  border-radius: 20px;
  box-shadow: 0 30px 100px rgba(0, 25, 41, 0.42);
  outline: none;
}

.cookie-dialog__close { position: absolute; top: 20px; right: 20px; display: grid; width: 38px; height: 38px; padding: 0; place-items: center; color: var(--brand-blue-900); background: transparent; border: 1px solid var(--line); border-radius: 50%; cursor: pointer; }
.cookie-dialog__close .icon { width: 17px; height: 17px; }
.cookie-dialog h2 { margin: 18px 0 13px; font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 590; letter-spacing: -0.055em; }
.cookie-dialog > p { max-width: 580px; margin: 0 0 28px; color: var(--muted); font-size: 0.73rem; line-height: 1.65; }

.cookie-option { display: grid; min-height: 92px; padding: 18px 0; grid-template-columns: 1fr auto; align-items: center; gap: 25px; border-top: 1px solid var(--line); }
.cookie-option > div { display: grid; gap: 5px; }
.cookie-option strong { color: var(--ink); font-size: 0.75rem; }
.cookie-option span { color: var(--muted); font-size: 0.6rem; line-height: 1.5; }
.cookie-option__status { padding: 6px 9px; color: var(--brand-blue-600) !important; background: rgba(166, 209, 233, 0.22); border-radius: 100px; font-size: 0.5rem !important; font-weight: 800; white-space: nowrap; }

.cookie-option--toggle { position: relative; padding-right: 62px; cursor: pointer; }
.cookie-option--toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cookie-option--toggle > i { position: absolute; right: 0; width: 48px; height: 27px; background: #bac7cb; border-radius: 100px; transition: background 160ms ease; }
.cookie-option--toggle > i::after { position: absolute; top: 4px; left: 4px; width: 19px; height: 19px; background: var(--white); border-radius: 50%; box-shadow: 0 2px 6px rgba(0, 25, 41, 0.2); content: ''; transition: transform 160ms ease; }
.cookie-option--toggle input:checked + i { background: var(--brand-blue-600); }
.cookie-option--toggle input:checked + i::after { transform: translateX(21px); }
.cookie-option--toggle input:focus-visible + i { outline: 3px solid rgba(2, 147, 210, 0.3); outline-offset: 3px; }

.cookie-dialog .cookie-dialog__demo-note { margin: 0; padding: 16px 0; color: #597078; border-top: 1px solid var(--line); font-size: 0.61rem; }
.cookie-dialog__demo-note a,
.cookie-dialog__policy { color: var(--brand-blue-600); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.cookie-dialog__actions { display: flex; margin-top: 24px; justify-content: flex-end; gap: 10px; }
.cookie-dialog__policy { display: block; width: fit-content; margin: 20px auto 0; font-size: 0.58rem; }

.boot-screen,
.error-page {
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 18px;
}

.boot-screen p {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.boot-mark {
  display: flex;
  gap: 4px;
}

.boot-mark span {
  display: block;
  width: 17px;
  height: 42px;
  border: 2px solid var(--cyan-deep);
  animation: boot-pulse 1s infinite alternate ease-in-out;
  transform: skewY(25deg);
}

.boot-mark span:last-child {
  border-color: var(--blue);
  animation-delay: 200ms;
  transform: skewY(-25deg);
}

/* Demo */
.demo-app {
  display: grid;
  width: 100vw;
  height: 100vh;
  grid-template-columns: 238px minmax(0, 1fr);
  grid-template-rows: 68px 58px minmax(0, 1fr);
  background: var(--paper-deep);
}

.demo-topbar {
  position: relative;
  z-index: 40;
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 238px minmax(230px, 1fr) minmax(180px, 300px) auto;
  align-items: center;
  color: var(--white);
  background: var(--ink);
  border-bottom: 1px solid rgba(255, 255, 255, 0.11);
}

.demo-topbar__actions {
  display: flex;
  height: 100%;
  align-items: center;
  justify-self: end;
}

.language-selector--demo {
  min-width: 73px;
  margin-inline: 12px;
  color: var(--white);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
}

.language-selector--demo > span {
  color: var(--ink);
  background: var(--cyan);
}

.language-selector--demo select {
  max-width: 64px;
  color: var(--white);
}

.language-selector--demo select option {
  color: var(--ink);
  background: var(--white);
}

.demo-topbar__brand {
  display: flex;
  height: 100%;
  padding-inline: 23px;
  align-items: center;
  border-right: 1px solid rgba(255, 255, 255, 0.11);
}

.demo-topbar__context {
  display: grid;
  padding-inline: 24px;
  gap: 3px;
}

.demo-topbar__context span {
  color: var(--brand-sky);
  font-size: 0.5rem;
  font-weight: 850;
  letter-spacing: 0.13em;
}

.demo-topbar__context strong {
  font-size: 0.72rem;
}

.demo-progress {
  display: flex;
  padding-inline: 20px;
  align-items: center;
  gap: 12px;
}

.demo-progress > span {
  overflow: hidden;
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.13);
  border-radius: 8px;
}

.demo-progress b {
  display: block;
  height: 100%;
  background: var(--cyan);
  border-radius: inherit;
  transition: width 300ms ease;
}

.demo-progress strong {
  min-width: 40px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.58rem;
}

.demo-reset,
.demo-exit {
  display: flex;
  height: 100%;
  padding-inline: 18px;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.62);
  background: none;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.11);
  font-size: 0.63rem;
  font-weight: 700;
  cursor: pointer;
}

.demo-reset:hover,
.demo-exit:hover {
  color: var(--white);
  background: rgba(255, 255, 255, 0.04);
}

.demo-topbar__menu {
  display: none;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.2);
}

.chapter-progress {
  position: relative;
  z-index: 35;
  display: flex;
  grid-column: 1 / -1;
  grid-row: 2;
  min-width: 0;
  padding: 0 25px;
  align-items: center;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--line);
}

.chapter-progress__rail {
  position: absolute;
  top: 22px;
  right: 45px;
  left: 45px;
  overflow: hidden;
  height: 2px;
  background: rgba(0, 51, 143, 0.12);
}

.chapter-progress__rail span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--brand-blue-600), var(--brand-cyan));
  transition: width 300ms ease;
}

.chapter-progress__stages {
  position: relative;
  z-index: 1;
  display: grid;
  width: 100%;
  grid-template-columns: repeat(var(--chapter-count), minmax(42px, 1fr));
  align-items: start;
}

.chapter-progress__stages a {
  display: grid;
  min-width: 0;
  justify-items: center;
  gap: 4px;
  color: var(--brand-slate-400);
}

.chapter-progress__stages a > span {
  display: flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  color: var(--brand-slate-700);
  background: var(--white);
  border: 2px solid #d4e0e5;
  border-radius: 50%;
  font-family: Georgia, serif;
  font-size: 0.47rem;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease;
}

.chapter-progress__stages a > small {
  overflow: hidden;
  max-width: 90px;
  font-size: 0.43rem;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chapter-progress__stages a.is-complete > span {
  color: var(--white);
  background: var(--brand-blue-600);
  border-color: var(--brand-blue-600);
}

.chapter-progress__stages a.is-current {
  color: var(--brand-blue-800);
}

.chapter-progress__stages a.is-current > span {
  color: var(--white);
  background: var(--brand-cyan);
  border-color: var(--brand-cyan);
  box-shadow: 0 0 0 5px rgba(2, 147, 210, 0.12);
}

.demo-sidebar {
  position: relative;
  z-index: 30;
  display: flex;
  overflow: hidden;
  grid-column: 1;
  grid-row: 3;
  flex-direction: column;
  background: var(--white);
  border-right: 1px solid var(--line);
}

.demo-sidebar__head {
  display: flex;
  min-height: 64px;
  padding-inline: 20px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.demo-sidebar__head span {
  color: var(--ocean);
  font-size: 0.52rem;
  font-weight: 850;
  letter-spacing: 0.13em;
}

.demo-sidebar__head strong {
  color: var(--muted);
  font-size: 0.57rem;
}

.demo-sidebar nav {
  overflow: auto;
  padding: 8px;
  scrollbar-width: thin;
}

.demo-sidebar nav a {
  position: relative;
  display: grid;
  min-height: 51px;
  padding: 8px 10px;
  grid-template-columns: 28px minmax(0, 1fr) 7px;
  align-items: center;
  gap: 8px;
  color: var(--brand-slate-700);
  border-radius: 7px;
  transition: color 150ms ease, background 150ms ease;
}

.demo-sidebar nav a:hover {
  color: var(--ink);
  background: rgba(0, 51, 143, 0.045);
}

.demo-sidebar nav a.is-active {
  color: var(--ink);
  background: var(--white);
  box-shadow: 0 5px 16px rgba(0, 51, 143, 0.055);
}

.demo-sidebar nav a > span {
  color: var(--brand-slate-700);
  font-family: Georgia, serif;
  font-size: 0.62rem;
}

.demo-sidebar nav a.is-active > span {
  color: var(--brand-blue-600);
}

.demo-sidebar nav a > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.demo-sidebar nav strong {
  overflow: hidden;
  font-size: 0.67rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-sidebar nav small {
  overflow: hidden;
  color: var(--brand-slate-700);
  font-size: 0.52rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo-sidebar nav a > i {
  width: 6px;
  height: 6px;
  background: var(--cyan);
  border-radius: 50%;
}

.demo-sidebar__foot {
  display: flex;
  margin-top: auto;
  padding: 15px;
  align-items: center;
  gap: 9px;
  border-top: 1px solid var(--line);
}

.demo-sidebar__foot > span {
  display: flex;
  width: 31px;
  height: 31px;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--ocean);
  background: rgba(2, 147, 210, 0.13);
  border-radius: 50%;
}

.demo-sidebar__foot p {
  display: grid;
  margin: 0;
  color: var(--brand-slate-700);
  font-size: 0.48rem;
  line-height: 1.4;
}

.demo-sidebar__foot strong {
  color: var(--brand-blue-800);
  font-size: 0.54rem;
}

.demo-main {
  display: grid;
  overflow: hidden;
  grid-column: 2;
  grid-row: 3;
  grid-template-columns: minmax(580px, 1fr) 295px;
}

.step-content {
  overflow: auto;
  padding: 46px clamp(32px, 4.2vw, 70px) 36px;
  scrollbar-width: thin;
}

.step-heading {
  max-width: 1000px;
}

.step-heading__top {
  display: flex;
  min-height: 46px;
  margin-bottom: 13px;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.step-heading__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ocean);
  font-size: 0.55rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.step-heading__meta i {
  width: 3px;
  height: 3px;
  background: var(--brand-slate-400);
  border-radius: 50%;
}

.product-signature {
  --logo-height: 38px;
  position: relative;
  z-index: 2;
  display: inline-flex;
  width: fit-content;
  padding: 9px 13px 9px 12px;
  align-items: center;
  gap: 13px;
  background: var(--white);
  border: 1px solid rgba(0, 60, 138, 0.16);
  border-left: 3px solid var(--brand-cyan);
  border-radius: 8px;
  box-shadow: 0 9px 24px rgba(0, 51, 143, 0.07);
}

.product-signature > small {
  flex: 0 0 72px;
  max-width: 72px;
  color: var(--brand-slate-700);
  font-size: 0.46rem;
  font-weight: 850;
  letter-spacing: 0.11em;
  line-height: 1.35;
  text-transform: uppercase;
}

.product-signature__logos {
  display: flex;
  align-items: center;
  gap: 13px;
}

.product-logo {
  position: relative;
  display: block;
  overflow: hidden;
  height: var(--logo-height);
  aspect-ratio: var(--logo-aspect);
  flex: 0 0 auto;
}

.product-logo img {
  position: absolute;
  top: var(--logo-top);
  left: var(--logo-left);
  width: auto;
  max-width: none;
  height: var(--logo-source-height);
}

.product-signature--compact {
  --logo-height: 30px;
  padding: 7px 10px 7px 9px;
  gap: 10px;
  flex: 0 0 auto;
}

.product-signature--compact > small {
  flex-basis: 62px;
  max-width: 62px;
  font-size: 0.42rem;
}

.product-signature--compact .product-signature__logos {
  gap: 10px;
}

.step-heading h1 {
  max-width: 850px;
  margin: 0 0 13px;
  font-size: clamp(2.05rem, 3vw, 3.55rem);
  font-weight: 600;
  letter-spacing: -0.052em;
  line-height: 1;
}

.step-heading > p {
  max-width: 820px;
  margin: 0;
  color: var(--brand-slate-700);
  font-size: 0.83rem;
  line-height: 1.55;
}

.step-tags {
  display: flex;
  margin-top: 17px;
  gap: 7px;
}

.step-tags span {
  padding: 6px 9px;
  color: #56717a;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 0.54rem;
  font-weight: 700;
}

.step-stage {
  position: relative;
  overflow: hidden;
  max-width: 1050px;
  min-height: 420px;
  margin-top: 27px;
  background: #f9faf8;
  border: 1px solid rgba(0, 51, 143, 0.14);
  border-radius: 13px;
  box-shadow: 0 20px 50px rgba(0, 51, 143, 0.08);
}

.step-stage--capture {
  background: #e7efef;
}

.capture-media {
  position: relative;
  background: #071f35;
}

.capture-media__viewport {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #eef3f4;
}

.capture-media__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  transform: scale(1.008);
  transition: opacity 380ms ease, transform 520ms ease;
}

.capture-media__slide.is-active {
  z-index: 1;
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.capture-media__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}

.capture-media__badge {
  position: absolute;
  z-index: 4;
  top: 13px;
  left: 14px;
  padding: 6px 9px;
  color: #fff;
  background: rgba(0, 31, 65, 0.76);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 5px;
  font-size: 0.47rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  backdrop-filter: blur(8px);
}

.capture-media__arrow {
  position: absolute;
  z-index: 4;
  top: 50%;
  display: grid;
  width: 42px;
  height: 42px;
  padding: 0;
  place-items: center;
  color: #fff;
  background: rgba(0, 31, 65, 0.74);
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 50%;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background 160ms ease, transform 160ms ease;
  backdrop-filter: blur(8px);
}

.capture-media__arrow:hover,
.capture-media__arrow:focus-visible {
  background: var(--brand-blue);
  transform: translateY(-50%) scale(1.06);
}

.capture-media__arrow--previous { left: 14px; }
.capture-media__arrow--next { right: 14px; }
.capture-media__arrow .icon { width: 18px; height: 18px; }

.capture-media__footer {
  position: relative;
  z-index: 9;
  display: grid;
  min-height: 68px;
  padding: 13px 17px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 18px;
  color: #fff;
  background: linear-gradient(110deg, #001f41, #00338f);
}

.capture-media__footer > div:first-child {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.capture-media__footer small {
  color: #71d8f4;
  font-size: 0.43rem;
  font-weight: 850;
  letter-spacing: 0.1em;
}

.capture-media__footer strong {
  overflow: hidden;
  font-size: 0.66rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.capture-media__counter {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.57rem;
  font-variant-numeric: tabular-nums;
}

.capture-media__counter b {
  color: #fff;
  font-size: 0.75rem;
}

.capture-media__dots {
  display: flex;
  align-items: center;
  gap: 7px;
}

.capture-media__dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  background: rgba(255, 255, 255, 0.38);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: width 180ms ease, background 180ms ease;
}

.capture-media__dots button.is-active {
  width: 25px;
  background: #fff;
  border-radius: 100px;
}

.step-stage--capture .teacher-mascot {
  bottom: 71px;
  width: 138px;
}

.step-stage--capture .teacher-mascot-ladder {
  bottom: 50px;
}

.mascot-side-left .mock-content {
  padding-left: 155px;
}

.mascot-side-right .mock-content {
  padding-right: 155px;
}

.mascot-side-right .capture-label {
  right: auto;
  left: 15px;
}

.teacher-mascot {
  position: absolute;
  z-index: 8;
  bottom: 27px;
  width: 185px;
  pointer-events: none;
  filter: drop-shadow(0 15px 13px rgba(0, 51, 143, 0.17));
  will-change: transform, opacity;
}

.teacher-mascot--left {
  left: -4px;
}

.teacher-mascot--right {
  right: -4px;
}

.teacher-mascot--right .mascot-svg {
  transform: scaleX(-1);
  transform-origin: center;
}

.teacher-mascot .mascot-svg {
  position: relative;
  z-index: 1;
}

.teacher-mascot--entrance-side.teacher-mascot--left {
  animation: mascot-enter-left 520ms both cubic-bezier(.18, .86, .3, 1.16);
}

.teacher-mascot--entrance-side.teacher-mascot--right {
  animation: mascot-enter-right 520ms both cubic-bezier(.18, .86, .3, 1.16);
}

.teacher-mascot--entrance-rope {
  animation: mascot-enter-rope 1.45s both cubic-bezier(.2, .74, .18, 1);
}

.teacher-mascot__rope {
  position: absolute;
  z-index: 0;
  bottom: calc(100% - 12px);
  left: 38%;
  width: 3px;
  height: 470px;
  background: repeating-linear-gradient(to bottom, var(--brand-gold-700) 0 7px, var(--brand-gold-500) 7px 13px);
  border-radius: 5px;
  box-shadow: 1px 0 rgba(255, 255, 255, 0.65);
  transform-origin: bottom;
  animation: mascot-rope-release 1.75s both ease-out;
}

.teacher-mascot--right .teacher-mascot__rope {
  left: 62%;
}

.teacher-mascot__rope::after {
  position: absolute;
  right: 50%;
  bottom: -6px;
  width: 10px;
  height: 7px;
  border: 3px solid var(--brand-gold-700);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  content: '';
  transform: translateX(50%);
}

.teacher-mascot--entrance-ladder.teacher-mascot--left {
  animation: mascot-enter-ladder-left 1.55s both cubic-bezier(.2, .72, .2, 1);
}

.teacher-mascot--entrance-ladder.teacher-mascot--right {
  animation: mascot-enter-ladder-right 1.55s both cubic-bezier(.2, .72, .2, 1);
}

.teacher-mascot-ladder {
  position: absolute;
  z-index: 7;
  bottom: -18px;
  width: 70px;
  height: 220px;
  background: repeating-linear-gradient(to bottom, transparent 0 22px, rgba(160, 114, 43, 0.72) 22px 26px, transparent 26px 38px);
  border-right: 4px solid rgba(160, 114, 43, 0.8);
  border-left: 4px solid rgba(160, 114, 43, 0.8);
  border-radius: 3px;
  pointer-events: none;
  transform-origin: bottom;
  animation: mascot-ladder-visit 1.85s both ease-out;
}

.teacher-mascot-ladder--left {
  left: 45px;
  transform: rotate(-3deg);
}

.teacher-mascot-ladder--right {
  right: 45px;
  transform: rotate(3deg);
}

.teacher-mascot--left.is-leaving {
  animation: mascot-exit-left 170ms both ease-in;
}

.teacher-mascot--right.is-leaving {
  animation: mascot-exit-right 170ms both ease-in;
}

.mock-toolbar {
  display: grid;
  height: 47px;
  padding-inline: 16px;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  color: #57717b;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.mock-toolbar__window-controls {
  display: flex;
  gap: 5px;
}

.mock-toolbar__window-controls span {
  width: 7px;
  height: 7px;
  background: #d9e0de;
  border-radius: 50%;
}

.mock-toolbar__window-controls span:first-child { background: #ffb3a4; }
.mock-toolbar__window-controls span:nth-child(2) { background: #f5cf77; }
.mock-toolbar__window-controls span:nth-child(3) { background: #8edba5; }

.mock-toolbar strong {
  font-size: 0.61rem;
}

.mock-toolbar > small {
  justify-self: end;
  color: var(--brand-slate-700);
  font-size: 0.49rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.mock-toolbar--assist {
  height: 52px;
  color: #075b75;
  background: linear-gradient(90deg, #fff 0%, #f2fbfd 100%);
  border-top: 3px solid var(--brand-sky);
  box-shadow: 0 3px 12px rgba(0, 51, 143, 0.08);
}

.mock-toolbar--assist > strong {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--brand-blue-900);
  font-size: 0.68rem;
}

.mock-toolbar--assist > strong > span {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, var(--brand-sky), var(--brand-blue-600));
  border-radius: 50%;
}

.mock-toolbar--assist > strong .icon {
  width: 14px;
  height: 14px;
}

.mock-toolbar--cw {
  --logo-height: 19px;
  height: 52px;
  padding-inline: 15px;
  grid-template-columns: minmax(132px, auto) 1fr auto;
  gap: 18px;
  border-top: 3px solid #1595a8;
  box-shadow: 0 3px 12px rgba(24, 66, 88, 0.08);
}

.mock-cw-brand,
.mock-cw-user,
.mock-toolbar--cw nav {
  display: flex;
  align-items: center;
}

.mock-cw-brand {
  min-width: 0;
  gap: 4px;
}

.mock-cw-brand > b {
  color: #168ca2;
  font-size: 0.62rem;
  letter-spacing: -0.03em;
}

.mock-cw-brand > small {
  margin-left: 4px;
  color: #8a9ba6;
  font-size: 0.37rem;
  line-height: 1.15;
}

.mock-toolbar--cw nav {
  height: 100%;
  justify-content: center;
  gap: clamp(9px, 1.5vw, 19px);
}

.mock-toolbar--cw nav span {
  position: relative;
  display: flex;
  height: 100%;
  align-items: center;
  color: #5f7480;
  font-size: 0.47rem;
  font-weight: 650;
}

.mock-toolbar--cw nav span.is-active {
  color: #08778c;
  font-weight: 800;
}

.mock-toolbar--cw nav span.is-active::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  background: #1ca1b2;
  border-radius: 3px 3px 0 0;
  content: '';
}

.mock-cw-user {
  gap: 6px;
}

.mock-cw-user i {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  color: #08778c;
  background: #e9f7f8;
  border: 1px solid #c9e6e9;
  border-radius: 50%;
  font-size: 0.4rem;
  font-style: normal;
  font-weight: 850;
}

.mock-cw-user small {
  color: #5f7480;
  font-size: 0.41rem;
  font-weight: 700;
  white-space: nowrap;
}

.mock-cw-menu { display: none; }

.mock-content {
  position: relative;
  display: flex;
  min-height: 373px;
  padding: 36px 40px 52px;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(rgba(0, 51, 143, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 51, 143, 0.025) 1px, transparent 1px);
  background-size: 26px 26px;
}

.mock-content--masters {
  display: block;
  min-height: 373px;
  padding: 0 27px 48px;
  background: #f5f8fa;
}

.mock-content--assist-intro {
  min-height: 373px;
  padding: 32px 34px;
  background:
    radial-gradient(circle at 12% 16%, rgba(2, 147, 210, 0.13), transparent 31%),
    radial-gradient(circle at 92% 86%, rgba(246, 185, 48, 0.14), transparent 29%),
    linear-gradient(145deg, #f8fcfd, #eef5f7);
}

.assist-intro-visual {
  width: min(740px, 100%);
  color: #193b49;
}

.assist-intro-visual small {
  font-style: normal;
}

.assist-intro-identity {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  align-items: center;
  gap: 30px;
}

.assist-intro-identity__mark {
  position: relative;
  display: grid;
  min-height: 188px;
  padding: 28px;
  align-content: center;
  justify-items: center;
  color: #fff;
  background: linear-gradient(145deg, #0054a6, #00338f);
  border-radius: 50%;
  box-shadow: 0 22px 45px rgba(0, 51, 143, 0.24), inset 0 0 0 9px rgba(255, 255, 255, 0.08);
}

.assist-intro-identity__mark::before,
.assist-intro-identity__mark::after {
  position: absolute;
  border: 1px solid rgba(2, 147, 210, 0.34);
  border-radius: 50%;
  content: '';
}

.assist-intro-identity__mark::before { inset: -12px; }
.assist-intro-identity__mark::after { inset: -24px; opacity: 0.5; }

.assist-intro-identity__mark > span {
  display: grid;
  width: 44px;
  height: 44px;
  margin-bottom: 8px;
  place-items: center;
  color: var(--brand-gold-500);
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

.assist-intro-identity__mark .icon { width: 25px; height: 25px; }
.assist-intro-identity__mark small { color: #75ddf4; font-size: 0.48rem; font-weight: 850; letter-spacing: 0.18em; }
.assist-intro-identity__mark strong { font-family: Georgia, "Times New Roman", serif; font-size: 1.9rem; font-weight: 500; }

.assist-intro-identity__copy {
  display: grid;
  gap: 13px;
}

.assist-intro-identity__copy > small {
  color: var(--ocean);
  font-size: 0.52rem;
  font-weight: 850;
  letter-spacing: 0.12em;
}

.assist-intro-identity__copy > strong {
  max-width: 430px;
  color: var(--brand-blue-900);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.7rem, 3vw, 2.55rem);
  font-weight: 500;
  line-height: 0.98;
}

.assist-intro-identity__copy > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.assist-intro-identity__copy > div span {
  padding: 7px 10px;
  color: #48707e;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid #d4e7eb;
  border-radius: 100px;
  font-size: 0.52rem;
  font-weight: 750;
}

.assist-intro-context {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px minmax(155px, 0.44fr);
  align-items: center;
  gap: 15px;
}

.assist-intro-context > section,
.assist-intro-context > aside,
.assist-intro-conversation,
.assist-intro-control,
.assist-intro-evidence > section,
.assist-intro-evidence > aside {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #cfe3e8;
  border-radius: 11px;
  box-shadow: 0 15px 32px rgba(20, 71, 91, 0.09);
}

.assist-intro-context > section { overflow: hidden; }

.assist-intro-context > section > header {
  display: flex;
  min-height: 42px;
  padding: 0 14px;
  align-items: center;
  justify-content: space-between;
  color: var(--brand-blue-900);
  background: #eef8fa;
  border-bottom: 1px solid #d7e9ed;
  font-size: 0.5rem;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.assist-intro-context > section > header span { display: flex; align-items: center; gap: 6px; }
.assist-intro-context > section > header .icon { width: 13px; height: 13px; color: var(--ocean); }
.assist-intro-context > section > header em { color: #11804c; font-size: 0.43rem; font-style: normal; }

.assist-intro-context > section > div {
  display: grid;
  padding: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.assist-intro-context > section > div span {
  display: grid;
  min-width: 0;
  padding: 10px;
  gap: 4px;
  background: #f7fafb;
  border-left: 3px solid #41aec0;
  border-radius: 4px;
}

.assist-intro-context > section > div small { color: #8299a2; font-size: 0.4rem; font-weight: 800; letter-spacing: 0.08em; }
.assist-intro-context > section > div strong { overflow: hidden; font-size: 0.57rem; text-overflow: ellipsis; white-space: nowrap; }
.assist-intro-context > section > footer { display: flex; padding: 0 14px 13px; align-items: center; gap: 7px; color: #748b94; font-size: 0.47rem; }
.assist-intro-context > section > footer .icon { width: 13px; height: 13px; color: var(--ocean); }
.assist-intro-context > i { display: grid; place-items: center; color: var(--ocean); }
.assist-intro-context > i .icon { width: 23px; height: 23px; }

.assist-intro-context > aside {
  display: grid;
  min-height: 195px;
  padding: 21px;
  align-content: center;
  gap: 7px;
  color: #fff;
  background: linear-gradient(150deg, #0057aa, #00338f);
  border: 0;
}

.assist-intro-context > aside > span { display: grid; width: 34px; height: 34px; place-items: center; color: var(--brand-gold-500); background: rgba(255, 255, 255, 0.1); border-radius: 50%; }
.assist-intro-context > aside > span .icon { width: 19px; height: 19px; }
.assist-intro-context > aside small { color: #75ddf4; font-size: 0.43rem; font-weight: 850; letter-spacing: 0.1em; }
.assist-intro-context > aside strong { font-family: Georgia, "Times New Roman", serif; font-size: 1.48rem; font-weight: 500; line-height: 1; }
.assist-intro-context > aside p { margin: 3px 0 0; color: rgba(255, 255, 255, 0.72); font-size: 0.52rem; line-height: 1.45; }

.assist-intro-conversation {
  overflow: hidden;
  width: min(610px, 100%);
  margin: auto;
}

.assist-intro-conversation > header {
  display: grid;
  min-height: 54px;
  padding: 10px 15px;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 9px;
  background: #f2f9fb;
  border-bottom: 1px solid #d8e9ed;
}

.assist-mini-orb { display: grid; width: 32px; height: 32px; place-items: center; color: #fff; background: linear-gradient(145deg, var(--brand-sky), var(--brand-blue-600)); border-radius: 50%; }
.assist-mini-orb .icon { width: 17px; height: 17px; }
.assist-intro-conversation > header > div { display: grid; gap: 2px; }
.assist-intro-conversation > header strong { color: var(--brand-blue-900); font-size: 0.62rem; }
.assist-intro-conversation > header small { color: #8499a1; font-size: 0.43rem; }
.assist-intro-conversation > header > i { color: #148354; font-size: 0.4rem; font-style: normal; font-weight: 850; letter-spacing: 0.08em; }

.assist-chat-thread {
  display: grid;
  min-height: 190px;
  padding: 20px;
  align-content: center;
  gap: 12px;
  background: rgba(250, 253, 253, 0.92);
}

.assist-chat-thread p { display: grid; max-width: 80%; margin: 0; gap: 4px; }
.assist-chat-thread p small { font-size: 0.39rem; font-weight: 850; letter-spacing: 0.09em; }
.assist-chat-thread p span { padding: 11px 13px; border-radius: 9px; font-size: 0.57rem; line-height: 1.45; }
.assist-chat-thread .is-user { justify-self: end; text-align: right; }
.assist-chat-thread .is-user small { color: #8499a1; }
.assist-chat-thread .is-user span { color: #fff; background: #216f89; border-bottom-right-radius: 2px; text-align: left; }
.assist-chat-thread .is-assist { justify-self: start; }
.assist-chat-thread .is-assist small { color: var(--ocean); }
.assist-chat-thread .is-assist span { color: #315765; background: #e8f6f8; border-bottom-left-radius: 2px; }
.assist-intro-conversation > footer { display: grid; min-height: 51px; padding: 8px 10px 8px 15px; grid-template-columns: 1fr 34px; align-items: center; gap: 10px; border-top: 1px solid #d8e9ed; }
.assist-intro-conversation > footer > span { color: #94a6ac; font-size: 0.52rem; }
.assist-intro-conversation > footer button { display: grid; width: 32px; height: 32px; padding: 0; place-items: center; color: #fff; background: var(--brand-blue-600); border: 0; border-radius: 50%; }
.assist-intro-conversation > footer .icon { width: 15px; height: 15px; }

.assist-intro-capabilities {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
}

.assist-intro-capabilities article {
  position: relative;
  display: grid;
  min-height: 225px;
  padding: 24px 20px;
  align-content: end;
  gap: 7px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #d2e5e9;
  border-radius: 10px;
  box-shadow: 0 14px 30px rgba(20, 71, 91, 0.07);
}

.assist-intro-capabilities article::before { position: absolute; top: 0; right: 0; left: 0; height: 4px; background: var(--assist-accent); content: ''; }
.assist-intro-capabilities article > span { position: absolute; top: 23px; left: 20px; display: grid; width: 46px; height: 46px; place-items: center; color: var(--assist-accent); background: color-mix(in srgb, var(--assist-accent) 11%, white); border-radius: 50%; }
.assist-intro-capabilities article .icon { width: 23px; height: 23px; }
.assist-intro-capabilities article small { color: var(--assist-accent); font-size: 0.45rem; font-weight: 850; letter-spacing: 0.11em; }
.assist-intro-capabilities article strong { color: var(--brand-blue-900); font-family: Georgia, "Times New Roman", serif; font-size: 1.55rem; font-weight: 500; }
.assist-intro-capabilities article p { margin: 0; color: #6e8790; font-size: 0.55rem; line-height: 1.45; }
.assist-intro-capabilities .is-insight { --assist-accent: #047db1; }
.assist-intro-capabilities .is-guide { --assist-accent: #0b8f7a; }
.assist-intro-capabilities .is-execute { --assist-accent: #bf8120; }

.assist-intro-control { overflow: hidden; }
.assist-intro-control > header { display: flex; min-height: 94px; padding: 19px 21px; align-items: center; justify-content: space-between; gap: 20px; background: linear-gradient(100deg, #eef8fa, #fff); border-bottom: 1px solid #d7e8eb; }
.assist-intro-control > header > div { display: grid; gap: 4px; }
.assist-intro-control > header small { color: var(--ocean); font-size: 0.43rem; font-weight: 850; letter-spacing: 0.1em; }
.assist-intro-control > header strong { color: var(--brand-blue-900); font-size: 0.75rem; }
.assist-intro-control > header div span { color: #748991; font-size: 0.5rem; }
.assist-intro-control__status { padding: 7px 9px; color: #875916; background: #fff4d7; border: 1px solid #f0d28c; border-radius: 4px; font-size: 0.4rem; font-weight: 850; letter-spacing: 0.06em; text-align: center; }
.assist-intro-control__checks { display: grid; padding: 18px 21px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.assist-intro-control__checks span { display: flex; min-height: 53px; padding: 11px; align-items: center; gap: 7px; color: #476a77; background: #f6fafb; border: 1px solid #dfebed; border-radius: 6px; font-size: 0.5rem; font-weight: 700; }
.assist-intro-control__checks .icon { width: 14px; height: 14px; flex: 0 0 auto; color: #158052; }
.assist-intro-control > footer { display: flex; min-height: 70px; padding: 13px 21px; align-items: center; gap: 9px; background: #f8fbfc; border-top: 1px solid #dfebed; }
.assist-intro-control > footer button { min-height: 34px; padding: 8px 12px; border-radius: 5px; font-size: 0.48rem; font-weight: 800; }
.assist-intro-control > footer button.is-secondary { color: #627983; background: transparent; border: 1px solid #bfd2d7; }
.assist-intro-control > footer button.is-primary { display: flex; align-items: center; gap: 8px; color: #fff; background: var(--brand-blue-600); border: 1px solid var(--brand-blue-600); }
.assist-intro-control > footer button .icon { width: 13px; height: 13px; }
.assist-intro-control > footer small { display: flex; margin-left: auto; align-items: center; gap: 6px; color: #7a8f97; font-size: 0.45rem; }
.assist-intro-control > footer small .icon { width: 13px; height: 13px; color: var(--ocean); }

.assist-intro-evidence {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(175px, 0.88fr);
  gap: 14px;
}

.assist-intro-evidence > section { display: grid; padding: 18px; gap: 9px; }
.assist-intro-evidence > section > small { margin-bottom: 3px; color: #718a94; font-size: 0.45rem; font-weight: 850; letter-spacing: 0.1em; }
.assist-intro-evidence > section > div { display: grid; min-height: 59px; padding: 10px 11px; grid-template-columns: 28px 1fr 18px; align-items: center; gap: 9px; background: #f6fafb; border: 1px solid #dfebed; border-radius: 6px; }
.assist-intro-evidence > section > div > span { display: grid; width: 26px; height: 26px; place-items: center; color: var(--ocean); background: #e2f4f7; border-radius: 50%; font-size: 0.43rem; font-weight: 850; }
.assist-intro-evidence > section p { display: grid; margin: 0; gap: 3px; }
.assist-intro-evidence > section strong { color: #315766; font-size: 0.54rem; }
.assist-intro-evidence > section em { color: #82969d; font-size: 0.43rem; font-style: normal; }
.assist-intro-evidence > section .icon { width: 15px; height: 15px; color: #148052; }
.assist-intro-evidence > aside { display: grid; padding: 22px; align-content: center; gap: 9px; color: #fff; background: linear-gradient(150deg, #0053a4, #00338f); border: 0; }
.assist-intro-evidence > aside > span { display: flex; align-items: center; gap: 7px; color: #75ddf4; font-size: 0.43rem; font-weight: 850; letter-spacing: 0.08em; }
.assist-intro-evidence > aside > span .icon { width: 15px; height: 15px; color: var(--brand-gold-500); }
.assist-intro-evidence > aside > strong { font-family: Georgia, "Times New Roman", serif; font-size: 1.45rem; font-weight: 500; line-height: 1.05; }
.assist-intro-evidence > aside p { margin: 0; color: rgba(255, 255, 255, 0.72); font-size: 0.52rem; line-height: 1.45; }
.assist-intro-evidence > aside > small { display: flex; width: fit-content; margin-top: 5px; padding: 6px 8px; align-items: center; gap: 6px; color: #b5f4d4; background: rgba(35, 179, 108, 0.16); border: 1px solid rgba(118, 231, 172, 0.28); border-radius: 4px; font-size: 0.39rem; font-weight: 850; letter-spacing: 0.06em; }
.assist-intro-evidence > aside > small .icon { width: 12px; height: 12px; }

.assist-intro-learning { display: grid; gap: 20px; }
.assist-learning-flow { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; justify-content: center; gap: 8px; }
.assist-learning-flow::before { position: absolute; top: 50%; right: 7%; left: 7%; height: 2px; background: linear-gradient(90deg, #8bcbd6, #3aaab0, #138371); content: ''; }
.assist-learning-flow article { position: relative; z-index: 1; display: grid; width: auto; min-height: 145px; padding: 15px 10px; align-content: center; justify-items: center; gap: 8px; background: rgba(255, 255, 255, 0.96); border: 1px solid #d4e6e9; border-radius: 9px; box-shadow: 0 12px 24px rgba(20, 71, 91, 0.07); text-align: center; }
.assist-learning-flow article > span { display: grid; width: 32px; height: 32px; place-items: center; color: var(--ocean); background: #e5f5f8; border-radius: 50%; font-size: 0.47rem; font-weight: 850; }
.assist-learning-flow article strong { color: var(--brand-blue-900); font-size: 0.58rem; line-height: 1.25; }
.assist-learning-flow article small { color: #80949c; font-size: 0.44rem; line-height: 1.35; }
.assist-learning-flow > i { display: none; }
.assist-learning-flow article.is-final { color: #fff; background: linear-gradient(150deg, #0a806f, #076b60); border: 0; }
.assist-learning-flow article.is-final > span { color: #fff; background: rgba(255, 255, 255, 0.14); }
.assist-learning-flow article.is-final .icon { width: 17px; height: 17px; }
.assist-learning-flow article.is-final strong { color: #fff; }
.assist-learning-flow article.is-final small { color: rgba(255, 255, 255, 0.72); }
.assist-intro-learning > footer { display: flex; width: fit-content; margin: auto; padding: 9px 13px; align-items: center; gap: 8px; color: #2e6375; background: #fff; border: 1px solid #d4e6e9; border-radius: 100px; font-size: 0.5rem; font-weight: 750; }
.assist-intro-learning > footer .icon { width: 15px; height: 15px; color: var(--ocean); }

.mock-content--commercial-validation {
  min-height: 373px;
  padding: 25px 30px 35px;
  background:
    linear-gradient(rgba(22, 140, 162, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 140, 162, 0.025) 1px, transparent 1px),
    #f4f8fa;
  background-size: 24px 24px;
}

.commercial-validation {
  width: min(760px, 100%);
  color: #294f5d;
}

.commercial-validation *,
.commercial-validation *::before,
.commercial-validation *::after {
  box-sizing: border-box;
}

.commercial-validation small,
.commercial-validation em {
  font-style: normal;
}

.commercial-validation .icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.commercial-overview,
.commercial-confirmation,
.commercial-conditions,
.commercial-checklist,
.commercial-exposure,
.commercial-balance,
.commercial-decision,
.commercial-handoff {
  overflow: hidden;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #d6e4e8;
  border-radius: 10px;
  box-shadow: 0 16px 36px rgba(20, 71, 91, 0.08);
}

.commercial-overview > header,
.commercial-confirmation > header,
.commercial-conditions > header,
.commercial-checklist > header,
.commercial-exposure > header,
.commercial-balance > header,
.commercial-decision > header {
  display: flex;
  min-height: 64px;
  padding: 13px 17px;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  background: linear-gradient(100deg, #edf7f9, #fff);
  border-bottom: 1px solid #d9e8eb;
}

.commercial-overview > header > div,
.commercial-confirmation > header > div,
.commercial-conditions > header > div,
.commercial-checklist > header > div,
.commercial-exposure > header > div,
.commercial-balance > header > div,
.commercial-decision > header > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.commercial-overview > header small,
.commercial-confirmation > header small,
.commercial-conditions > header small,
.commercial-checklist > header small,
.commercial-exposure > header small,
.commercial-balance > header small,
.commercial-decision > header small {
  color: #14899f;
  font-size: 0.42rem;
  font-weight: 850;
  letter-spacing: 0.09em;
}

.commercial-overview > header strong,
.commercial-confirmation > header strong,
.commercial-conditions > header strong,
.commercial-checklist > header strong,
.commercial-exposure > header strong,
.commercial-balance > header strong,
.commercial-decision > header strong {
  color: var(--brand-blue-900);
  font-size: 0.72rem;
}

.commercial-overview > header div > span,
.commercial-confirmation > header div > span {
  overflow: hidden;
  color: #789098;
  font-size: 0.45rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.commercial-overview > header > em,
.commercial-confirmation > header > em,
.commercial-balance > header > em,
.commercial-decision > header > em {
  display: flex;
  padding: 6px 8px;
  align-items: center;
  gap: 5px;
  color: #16774e;
  background: #e8f7ef;
  border: 1px solid #c8e9d8;
  border-radius: 100px;
  font-size: 0.39rem;
  font-weight: 850;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.commercial-overview__flow {
  position: relative;
  display: grid;
  padding: 26px 16px 20px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
}

.commercial-overview__flow::before {
  position: absolute;
  top: 43px;
  right: 8%;
  left: 8%;
  height: 2px;
  background: #cee0e4;
  content: '';
}

.commercial-overview__flow article {
  position: relative;
  z-index: 1;
  display: grid;
  min-width: 0;
  justify-items: center;
  gap: 5px;
  text-align: center;
}

.commercial-overview__flow article > span {
  display: grid;
  width: 34px;
  height: 34px;
  margin-bottom: 3px;
  place-items: center;
  color: #7e969e;
  background: #fff;
  border: 2px solid #cbdde1;
  border-radius: 50%;
  font-size: 0.45rem;
  font-weight: 850;
}

.commercial-overview__flow article.is-complete > span {
  color: #fff;
  background: #148f79;
  border-color: #148f79;
}

.commercial-overview__flow article.is-current > span {
  color: #875916;
  background: #fff5d9;
  border-color: #e5ba59;
  box-shadow: 0 0 0 4px rgba(229, 186, 89, 0.15);
}

.commercial-overview__flow article strong { color: #345b68; font-size: 0.48rem; line-height: 1.2; }
.commercial-overview__flow article small { color: #81969d; font-size: 0.38rem; line-height: 1.3; }
.commercial-overview > footer { display: flex; min-height: 42px; padding: 8px 17px; align-items: center; justify-content: center; gap: 10px; color: #7b9097; background: #f8fbfc; border-top: 1px solid #e1eaed; font-size: 0.44rem; }
.commercial-overview > footer strong { color: var(--brand-blue-900); }
.commercial-overview > footer .icon { color: #1594aa; }

.commercial-confirmation__fields {
  display: grid;
  padding: 14px 17px 11px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.commercial-confirmation__fields label {
  display: grid;
  min-width: 0;
  padding: 9px 11px;
  gap: 4px;
  background: #f7fafb;
  border: 1px solid #e0eaed;
  border-radius: 5px;
}

.commercial-confirmation__fields label span { color: #82979e; font-size: 0.4rem; }
.commercial-confirmation__fields label strong { overflow: hidden; color: #365b68; font-size: 0.51rem; text-overflow: ellipsis; white-space: nowrap; }
.commercial-confirmation__attachment { display: grid; min-height: 67px; margin: 0 17px 16px; padding: 11px 13px; grid-template-columns: 34px 1fr 22px; align-items: center; gap: 10px; background: #edf8f4; border: 1px solid #cfe8dc; border-radius: 6px; }
.commercial-confirmation__attachment > span { display: grid; width: 32px; height: 32px; place-items: center; color: #147950; background: #fff; border-radius: 50%; }
.commercial-confirmation__attachment > div { display: grid; gap: 2px; }
.commercial-confirmation__attachment small { color: #147950; font-size: 0.37rem; font-weight: 850; letter-spacing: 0.07em; }
.commercial-confirmation__attachment strong { color: #315766; font-size: 0.53rem; }
.commercial-confirmation__attachment em { color: #82969d; font-size: 0.39rem; }
.commercial-confirmation__attachment > b { color: #147950; }

.commercial-conditions > header > span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #486f7c;
  font-size: 0.4rem;
  font-weight: 800;
}

.commercial-conditions__grid { display: grid; padding: 14px 17px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.commercial-conditions__grid article { display: grid; min-height: 70px; padding: 10px 11px; align-content: center; gap: 4px; background: #f8fafb; border: 1px solid #e1eaec; border-radius: 6px; }
.commercial-conditions__grid article.is-highlighted { background: #edf8fa; border-color: #abdbe3; box-shadow: inset 3px 0 #1c9daf; }
.commercial-conditions__grid small { color: #82959c; font-size: 0.38rem; }
.commercial-conditions__grid strong { overflow: hidden; color: #315766; font-size: 0.49rem; text-overflow: ellipsis; white-space: nowrap; }
.commercial-conditions__grid article > span { display: flex; align-items: center; gap: 4px; color: #17805a; font-size: 0.36rem; font-weight: 700; }
.commercial-conditions__grid .icon { width: 10px; height: 10px; }
.commercial-conditions > footer { display: grid; min-height: 39px; padding: 8px 17px; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; color: #83969d; background: #f8fbfc; border-top: 1px solid #e1eaed; font-size: 0.4rem; }
.commercial-conditions > footer i { height: 1px; background: #cadcdf; }
.commercial-conditions > footer strong { color: #2f6170; }

.commercial-payment { display: grid; grid-template-columns: minmax(0, 0.9fr) 34px minmax(0, 1.1fr); align-items: center; gap: 15px; }
.commercial-payment > section,
.commercial-payment > aside { display: grid; min-height: 255px; padding: 22px; align-content: center; gap: 9px; background: #fff; border: 1px solid #d7e5e8; border-radius: 9px; box-shadow: 0 15px 32px rgba(20, 71, 91, 0.08); }
.commercial-payment > section > small,
.commercial-payment > aside > small { color: #158da2; font-size: 0.41rem; font-weight: 850; letter-spacing: 0.09em; }
.commercial-payment > section > strong { margin-bottom: 4px; color: var(--brand-blue-900); font-family: Georgia, "Times New Roman", serif; font-size: 1.3rem; font-weight: 500; line-height: 1.03; }
.commercial-payment > section > div { display: flex; padding-top: 8px; justify-content: space-between; border-top: 1px solid #e4ecee; font-size: 0.47rem; }
.commercial-payment > section > div span { color: #7b9199; }
.commercial-payment > section > div b { color: #315766; }
.commercial-payment > i { color: #1998aa; }
.commercial-payment > i .icon { width: 24px; height: 24px; }
.commercial-payment > aside { color: #fff; background: linear-gradient(145deg, #075a74, #00338f); border: 0; }
.commercial-payment > aside > span { display: grid; width: 39px; height: 39px; place-items: center; color: #f4c24e; background: rgba(255,255,255,.1); border-radius: 50%; }
.commercial-payment > aside > small { color: #74d9ed; }
.commercial-payment > aside > strong { font-family: Georgia, "Times New Roman", serif; font-size: 1.22rem; font-weight: 500; line-height: 1.05; }
.commercial-payment > aside p { margin: 0; color: rgba(255,255,255,.7); font-size: 0.48rem; line-height: 1.45; }

.commercial-checklist > header > span { display: grid; width: 47px; height: 47px; place-items: center; color: #fff; background: #148f79; border-radius: 50%; font-size: 0.62rem; font-weight: 850; }
.commercial-checklist > div { display: grid; padding: 14px 17px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.commercial-checklist article { display: grid; min-height: 61px; padding: 9px 10px; grid-template-columns: 25px 1fr; align-items: center; gap: 8px; background: #f8fafb; border: 1px solid #e0e9eb; border-radius: 6px; }
.commercial-check { display: grid; width: 24px; height: 24px; place-items: center; color: #fff; background: #16805a; border-radius: 50%; }
.commercial-check .icon { width: 12px; height: 12px; }
.commercial-checklist article p { display: grid; min-width: 0; margin: 0; gap: 3px; }
.commercial-checklist article strong { color: #345b68; font-size: 0.47rem; }
.commercial-checklist article small { overflow: hidden; color: #80949b; font-size: 0.38rem; text-overflow: ellipsis; white-space: nowrap; }
.commercial-checklist > footer { display: flex; min-height: 39px; padding: 8px 17px; align-items: center; justify-content: center; gap: 7px; color: #16774e; background: #edf8f4; border-top: 1px solid #d5eadf; font-size: 0.43rem; font-weight: 750; }

.commercial-exposure > header > span { display: grid; justify-items: end; gap: 2px; }
.commercial-exposure > header > span small { color: #7f949b; font-size: 0.36rem; }
.commercial-exposure > header > span b { color: var(--brand-blue-900); font-size: 0.75rem; }
.commercial-exposure__timeline { position: relative; display: grid; padding: 20px 12px 14px; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
.commercial-exposure__timeline::before { position: absolute; top: 38px; right: 7%; left: 7%; height: 2px; background: linear-gradient(90deg, #1b9cad, #8abfc8); content: ''; }
.commercial-exposure__timeline article { position: relative; z-index: 1; display: grid; min-width: 0; justify-items: center; gap: 4px; text-align: center; }
.commercial-exposure__timeline article > span { display: grid; width: 34px; height: 34px; place-items: center; color: #45707e; background: #fff; border: 2px solid #8ec5ce; border-radius: 50%; font-size: 0.4rem; font-weight: 850; }
.commercial-exposure__timeline article.is-current > span { color: #fff; background: #148f79; border-color: #148f79; }
.commercial-exposure__timeline article > i { display: none; }
.commercial-exposure__timeline strong { margin-top: 4px; color: #365d69; font-size: 0.42rem; line-height: 1.2; }
.commercial-exposure__timeline b { color: var(--brand-blue-900); font-size: 0.53rem; }
.commercial-exposure__timeline small { color: #899ba1; font-size: 0.34rem; line-height: 1.25; }
.commercial-exposure > footer { display: flex; min-height: 42px; padding: 8px 15px; align-items: center; justify-content: center; gap: 7px; color: #52727d; background: #f5fafb; border-top: 1px solid #e0eaed; font-size: 0.41rem; }
.commercial-exposure > footer .icon { color: #16805a; }

.commercial-policy { display: grid; grid-template-columns: minmax(150px, .38fr) minmax(0, 1fr); gap: 12px; }
.commercial-policy > aside,
.commercial-policy > section { min-height: 280px; border-radius: 9px; box-shadow: 0 15px 32px rgba(20, 71, 91, 0.08); }
.commercial-policy > aside { display: grid; padding: 24px 19px; align-content: center; justify-items: center; gap: 8px; color: #fff; background: linear-gradient(150deg, #075a74, #00338f); text-align: center; }
.commercial-policy > aside > span { display: grid; width: 60px; height: 60px; place-items: center; color: #075b75; background: #dff6fa; border-radius: 50%; font-family: Georgia, "Times New Roman", serif; font-size: 1.15rem; }
.commercial-policy > aside small { color: #75daed; font-size: 0.39rem; font-weight: 850; letter-spacing: .08em; }
.commercial-policy > aside strong { font-size: 0.58rem; line-height: 1.35; }
.commercial-policy > aside em { display: flex; padding: 6px 8px; align-items: center; gap: 5px; color: #b7f1d4; background: rgba(31,180,113,.15); border: 1px solid rgba(149,232,190,.2); border-radius: 100px; font-size: .37rem; font-weight: 750; }
.commercial-policy > section { overflow: hidden; background: #fff; border: 1px solid #d6e4e8; }
.commercial-policy > section > header { display: flex; min-height: 61px; padding: 12px 15px; align-items: center; justify-content: space-between; background: #f1f8fa; border-bottom: 1px solid #dce9ec; }
.commercial-policy > section > header > div { display: grid; gap: 3px; }
.commercial-policy > section > header small { color: #14899f; font-size: .39rem; font-weight: 850; letter-spacing: .08em; }
.commercial-policy > section > header strong { color: var(--brand-blue-900); font-size: .62rem; }
.commercial-policy > section > header > span { display: grid; width: 34px; height: 27px; place-items: center; color: #315766; background: #fff; border: 1px solid #cadde1; border-radius: 5px; font-size: .43rem; font-weight: 850; }
.commercial-policy__fields { display: grid; padding: 13px 15px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.commercial-policy__fields label { display: grid; min-height: 55px; padding: 8px 10px; align-content: center; gap: 4px; background: #f8fafb; border: 1px solid #e0e9ec; border-radius: 5px; }
.commercial-policy__fields span { color: #81959c; font-size: .38rem; }
.commercial-policy__fields strong { color: #315766; font-size: .52rem; }
.commercial-policy__fields strong.is-off { width: fit-content; padding: 3px 7px; color: #16764f; background: #e7f7ef; border-radius: 100px; font-size: .39rem; }
.commercial-policy > section > footer { display: flex; min-height: 40px; padding: 8px 15px; align-items: center; justify-content: space-between; color: #81959c; background: #f8fbfc; border-top: 1px solid #e1eaed; font-size: .38rem; }
.commercial-policy > section > footer span { display: flex; align-items: center; gap: 5px; }
.commercial-policy > section > footer strong { color: #426875; }

.commercial-balance__calculation { display: grid; padding: 20px 17px 14px; grid-template-columns: repeat(7, auto); align-items: center; justify-content: space-between; gap: 7px; }
.commercial-balance__calculation article { display: grid; min-width: 0; gap: 4px; }
.commercial-balance__calculation article small { color: #82969d; font-size: .35rem; font-weight: 800; letter-spacing: .06em; }
.commercial-balance__calculation article strong { color: #315766; font-size: .66rem; white-space: nowrap; }
.commercial-balance__calculation > i { color: #9aabb0; font-size: .68rem; font-style: normal; }
.commercial-balance__calculation article.is-result { padding: 10px 12px; color: #fff; background: #087c69; border-radius: 7px; }
.commercial-balance__calculation article.is-result small { color: #bdebdc; }
.commercial-balance__calculation article.is-result strong { color: #fff; font-size: .76rem; }
.commercial-balance__bar { position: relative; height: 29px; margin: 0 17px 14px; overflow: hidden; background: #e7f0f2; border-radius: 5px; }
.commercial-balance__bar > span { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #0d826d, #25a78e); }
.commercial-balance__bar b,
.commercial-balance__bar em { position: absolute; z-index: 1; top: 50%; transform: translateY(-50%); font-size: .38rem; }
.commercial-balance__bar b { left: 9px; color: #fff; }
.commercial-balance__bar em { right: 8px; color: #446b77; }
.commercial-balance > footer { display: grid; padding: 11px 17px; grid-template-columns: repeat(3, 1fr); gap: 8px; background: #f8fbfc; border-top: 1px solid #e1eaed; }
.commercial-balance > footer span { display: grid; gap: 3px; color: #84979e; font-size: .37rem; }
.commercial-balance > footer strong { color: #315766; font-size: .48rem; }

.commercial-decision > header > span { display: grid; width: 42px; height: 42px; place-items: center; color: #fff; background: #0c806c; border-radius: 50%; }
.commercial-decision > header { grid-template-columns: 42px 1fr auto; justify-content: initial; }
.commercial-decision > header p { margin: 1px 0 0; color: #799098; font-size: .4rem; }
.commercial-decision > header > em { color: #786019; background: #fff5d9; border-color: #efdaa6; }
.commercial-decision__signals { display: grid; padding: 18px 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.commercial-decision__signals > span { display: flex; min-height: 44px; padding: 10px 12px; align-items: center; gap: 7px; color: #406875; background: #f7fafb; border: 1px solid #e0e9ec; border-radius: 5px; font-size: .45rem; font-weight: 700; }
.commercial-decision__signals .icon { color: #16805a; }
.commercial-decision > footer { display: flex; min-height: 57px; padding: 10px 20px; align-items: center; justify-content: flex-end; gap: 8px; background: #f8fbfc; border-top: 1px solid #e0e9ec; }
.commercial-decision button { min-height: 32px; padding: 7px 12px; color: #607b84; background: #fff; border: 1px solid #cbdcdf; border-radius: 5px; font-size: .42rem; font-weight: 800; }
.commercial-decision button.is-primary { display: flex; align-items: center; gap: 6px; color: #fff; background: var(--brand-blue-600); border-color: var(--brand-blue-600); }

.commercial-assist { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 12px; }
.commercial-assist > section,
.commercial-assist > aside { display: grid; min-height: 282px; padding: 20px; align-content: center; border-radius: 9px; box-shadow: 0 15px 32px rgba(20,71,91,.08); }
.commercial-assist > section { gap: 8px; color: #fff; background: linear-gradient(150deg, #075c78, #00338f); }
.commercial-assist > section > span { display: grid; width: 38px; height: 38px; place-items: center; color: #f4c24e; background: rgba(255,255,255,.1); border-radius: 50%; }
.commercial-assist > section > small { color: #76dcef; font-size: .39rem; font-weight: 850; letter-spacing: .08em; }
.commercial-assist > section > strong { font-family: Georgia, "Times New Roman", serif; font-size: 1.34rem; font-weight: 500; line-height: 1.03; }
.commercial-assist > section p { margin: 0; color: rgba(255,255,255,.75); font-size: .48rem; line-height: 1.45; }
.commercial-assist > section p b { color: #fff; }
.commercial-assist > section em { display: flex; margin-top: 4px; align-items: center; gap: 6px; color: #bee9f0; font-size: .38rem; line-height: 1.35; }
.commercial-assist > aside { gap: 7px; background: #fff; border: 1px solid #d6e4e8; }
.commercial-assist > aside > small { margin-bottom: 2px; color: #708993; font-size: .4rem; font-weight: 850; letter-spacing: .08em; }
.commercial-assist > aside article { display: grid; min-height: 48px; padding: 7px 9px; grid-template-columns: 25px 1fr 16px; align-items: center; gap: 8px; background: #f7fafb; border: 1px solid #e1eaec; border-radius: 5px; }
.commercial-assist > aside article > span { display: grid; width: 24px; height: 24px; place-items: center; color: #14899f; background: #e6f5f7; border-radius: 50%; font-size: .36rem; font-weight: 850; }
.commercial-assist > aside article p { display: grid; margin: 0; gap: 2px; }
.commercial-assist > aside article strong { color: #315766; font-size: .45rem; }
.commercial-assist > aside article small { color: #84979e; font-size: .35rem; }
.commercial-assist > aside article > .icon { color: #16805a; }

.commercial-transfer { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(185px, .75fr); gap: 12px; }
.commercial-transfer > section,
.commercial-transfer > aside { overflow: hidden; min-height: 275px; background: #fff; border: 1px solid #d6e4e8; border-radius: 9px; box-shadow: 0 15px 32px rgba(20,71,91,.08); }
.commercial-transfer > section { display: grid; align-content: center; }
.commercial-transfer > section > header,
.commercial-transfer > section > div { display: grid; padding: 10px 13px; grid-template-columns: .95fr 1.65fr .8fr .8fr; align-items: center; gap: 8px; }
.commercial-transfer > section > header { color: #7d9299; background: #f0f7f9; border-bottom: 1px solid #dbe8eb; font-size: .35rem; font-weight: 800; }
.commercial-transfer > section > div { min-height: 82px; }
.commercial-transfer > section > div strong { color: var(--brand-blue-900); font-size: .48rem; }
.commercial-transfer > section > div p { margin: 0; color: #456b77; font-size: .39rem; line-height: 1.35; }
.commercial-transfer > section > div b { color: #315766; font-size: .45rem; }
.commercial-transfer > section > div em { width: fit-content; padding: 5px 6px; color: #88601b; background: #fff4d7; border-radius: 100px; font-size: .33rem; font-weight: 850; }
.commercial-transfer > section > footer { display: flex; padding: 10px 13px; align-items: center; gap: 6px; color: #16764f; background: #edf8f4; border-top: 1px solid #d7eadd; font-size: .39rem; }
.commercial-transfer > aside { display: grid; padding: 17px; align-content: center; gap: 7px; }
.commercial-transfer > aside > small { color: #14899f; font-size: .38rem; font-weight: 850; letter-spacing: .08em; }
.commercial-transfer > aside > strong { margin-bottom: 2px; color: var(--brand-blue-900); font-size: .63rem; }
.commercial-transfer > aside > div { display: flex; padding-bottom: 6px; justify-content: space-between; border-bottom: 1px solid #e4ecee; color: #7e9299; font-size: .39rem; }
.commercial-transfer > aside > div b { color: #315766; }
.commercial-transfer > aside p { margin: 1px 0; color: #80939a; font-size: .37rem; line-height: 1.4; }
.commercial-transfer > aside button { display: flex; min-height: 34px; padding: 8px 10px; align-items: center; justify-content: space-between; color: #fff; background: var(--brand-blue-600); border: 0; border-radius: 5px; font-size: .4rem; font-weight: 800; }

.commercial-handoff { padding: 18px; }
.commercial-handoff__apps { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); align-items: center; gap: 12px; }
.commercial-handoff__apps article { display: grid; min-height: 120px; padding: 17px; align-content: center; gap: 6px; background: #f5fafb; border: 1px solid #d8e7ea; border-radius: 7px; }
.commercial-handoff__apps article.is-production { color: #fff; background: linear-gradient(145deg, #075a74, #00338f); border: 0; }
.commercial-handoff__apps article small { color: #14899f; font-size: .39rem; font-weight: 850; letter-spacing: .09em; }
.commercial-handoff__apps article strong { color: var(--brand-blue-900); font-size: .65rem; }
.commercial-handoff__apps article > span { display: flex; width: fit-content; padding: 5px 7px; align-items: center; gap: 5px; color: #16764f; background: #e6f7ee; border-radius: 100px; font-size: .35rem; font-weight: 850; }
.commercial-handoff__apps > i { display: grid; place-items: center; color: #1798aa; }
.commercial-handoff__apps > i .icon { width: 25px; height: 25px; }
.commercial-handoff__apps article.is-production small { color: #76dcef; }
.commercial-handoff__apps article.is-production strong { color: #fff; }
.commercial-handoff__apps article.is-production > span { color: #ffe29b; background: rgba(246,185,48,.15); }
.commercial-handoff__payload { display: flex; padding: 15px 0 13px; align-items: center; flex-wrap: wrap; gap: 6px; }
.commercial-handoff__payload small { margin-right: 4px; color: #728b94; font-size: .37rem; font-weight: 850; letter-spacing: .08em; }
.commercial-handoff__payload span { padding: 5px 7px; color: #426b78; background: #edf6f8; border: 1px solid #d7e8eb; border-radius: 100px; font-size: .36rem; }
.commercial-handoff > footer { display: flex; padding-top: 12px; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid #e0eaed; }
.commercial-handoff > footer > span { display: flex; align-items: center; gap: 6px; color: #16764f; font-size: .39rem; }
.commercial-handoff > footer button { display: flex; min-height: 33px; padding: 7px 11px; align-items: center; gap: 6px; color: #fff; background: var(--brand-blue-600); border: 0; border-radius: 5px; font-size: .4rem; font-weight: 800; }

.mock-toolbar--prod { border-top-color: #2c72ac; }
.mock-toolbar--prod .mock-cw-brand > b,
.mock-toolbar--prod nav span.is-active { color: #1d649c; }
.mock-toolbar--prod nav span.is-active::after { background: #2c72ac; }
.mock-toolbar--prod .mock-cw-user i { color: #1d649c; background: #e9f2fa; border-color: #c9deef; }

.mock-content--production-planning {
  min-height: 373px;
  padding: 25px 30px 35px;
  background:
    linear-gradient(rgba(29, 100, 156, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29, 100, 156, 0.025) 1px, transparent 1px),
    #f3f7fa;
  background-size: 24px 24px;
}

.production-planning {
  width: min(780px, 100%);
  color: #294f5d;
}

.production-planning *,
.production-planning *::before,
.production-planning *::after { box-sizing: border-box; }
.production-planning small,
.production-planning em,
.production-planning i { font-style: normal; }
.production-planning .icon { width: 14px; height: 14px; flex: 0 0 auto; }

.planning-overview,
.planning-selection,
.planning-validation,
.planning-workload,
.planning-waves,
.planning-formulas,
.planning-timeline,
.planning-expedition,
.planning-handoff {
  overflow: hidden;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid #d4e1e8;
  border-radius: 10px;
  box-shadow: 0 16px 36px rgba(17, 65, 99, 0.08);
}

.planning-overview > header,
.planning-selection > header,
.planning-validation > header,
.planning-workload > header,
.planning-waves > header,
.planning-formulas > header,
.planning-timeline > header,
.planning-expedition > header,
.planning-handoff > header {
  display: flex;
  min-height: 61px;
  padding: 12px 17px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: linear-gradient(100deg, #edf4fa, #fff);
  border-bottom: 1px solid #d9e5ec;
}

.planning-overview > header > div,
.planning-selection > header > div,
.planning-validation > header > div,
.planning-workload > header > div,
.planning-waves > header > div,
.planning-formulas > header > div,
.planning-timeline > header > div,
.planning-expedition > header > div,
.planning-handoff > header > div { display: grid; min-width: 0; gap: 3px; }

.production-planning header small,
.planning-horizon header small {
  color: #2874a8;
  font-size: .4rem;
  font-weight: 850;
  letter-spacing: .09em;
}

.production-planning header strong,
.planning-horizon header strong { color: var(--brand-blue-900); font-size: .68rem; }

.planning-overview > header > em,
.planning-validation > header > em,
.planning-handoff > header > em {
  display: flex;
  padding: 6px 8px;
  align-items: center;
  gap: 5px;
  color: #16764f;
  background: #e7f7ef;
  border: 1px solid #c9e8d8;
  border-radius: 100px;
  font-size: .36rem;
  font-weight: 850;
  letter-spacing: .05em;
  white-space: nowrap;
}

.planning-overview__flow {
  position: relative;
  display: grid;
  padding: 24px 15px 19px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
}

.planning-overview__flow::before {
  position: absolute;
  top: 40px;
  right: 8%;
  left: 8%;
  height: 2px;
  background: #cbdde8;
  content: '';
}

.planning-overview__flow article { position: relative; z-index: 1; display: grid; min-width: 0; justify-items: center; gap: 4px; text-align: center; }
.planning-overview__flow article > span { display: grid; width: 34px; height: 34px; margin-bottom: 3px; place-items: center; color: #52788f; background: #fff; border: 2px solid #b8d0df; border-radius: 50%; font-size: .42rem; font-weight: 850; }
.planning-overview__flow article.is-final > span { color: #fff; background: #167f68; border-color: #167f68; }
.planning-overview__flow article strong { color: #345b68; font-size: .46rem; line-height: 1.2; }
.planning-overview__flow article small { color: #81959d; font-size: .34rem; line-height: 1.25; }
.planning-overview > footer { display: flex; min-height: 43px; padding: 8px 17px; align-items: center; gap: 15px; color: #789098; background: #f7fafc; border-top: 1px solid #e0e9ee; font-size: .4rem; }
.planning-overview > footer span { display: flex; align-items: baseline; gap: 4px; }
.planning-overview > footer b { color: #315d73; font-size: .53rem; }
.planning-overview > footer strong { margin-left: auto; color: #16764f; }

.planning-horizon { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(175px, .75fr); gap: 12px; }
.planning-horizon > section,
.planning-horizon > aside { overflow: hidden; min-height: 282px; background: #fff; border: 1px solid #d4e1e8; border-radius: 9px; box-shadow: 0 15px 32px rgba(17,65,99,.08); }
.planning-horizon > section { display: grid; align-content: start; }
.planning-horizon > section > header { display: grid; min-height: 59px; padding: 12px 16px; align-content: center; gap: 3px; background: #eef5fa; border-bottom: 1px solid #dbe6ec; }
.planning-horizon__fields { display: grid; padding: 14px 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.planning-horizon__fields label { display: grid; min-height: 61px; padding: 9px 11px; align-content: center; gap: 5px; background: #f8fafb; border: 1px solid #e0e8ed; border-radius: 5px; }
.planning-horizon__fields label:last-child { grid-column: 1 / -1; }
.planning-horizon__fields span { color: #83969e; font-size: .38rem; }
.planning-horizon__fields strong { color: #31596d; font-size: .52rem; }
.planning-horizon > section > footer { display: flex; margin-top: auto; padding: 10px 16px; align-items: center; gap: 6px; color: #5f7987; background: #f7fafc; border-top: 1px solid #e2eaee; font-size: .38rem; }
.planning-horizon > section > footer .icon { color: #2874a8; }
.planning-horizon > aside { display: grid; padding: 20px; align-content: center; grid-template-columns: repeat(2, 1fr); gap: 8px; color: #fff; background: linear-gradient(150deg, #176a9f, #00338f); border: 0; }
.planning-horizon > aside > small,
.planning-horizon > aside > strong,
.planning-horizon > aside > button { grid-column: 1 / -1; }
.planning-horizon > aside > small { color: #7eddf0; font-size: .39rem; font-weight: 850; letter-spacing: .09em; }
.planning-horizon > aside > strong { margin-bottom: 3px; font-family: Georgia, 'Times New Roman', serif; font-size: 1.45rem; font-weight: 500; }
.planning-horizon > aside > div { display: grid; padding: 9px; gap: 2px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.12); border-radius: 6px; }
.planning-horizon > aside > div span { font-size: .72rem; font-weight: 850; }
.planning-horizon > aside > div small { color: rgba(255,255,255,.65); font-size: .36rem; }
.planning-horizon > aside > button { display: flex; min-height: 35px; margin-top: 3px; padding: 8px 10px; align-items: center; justify-content: space-between; color: #173e58; background: #fff; border: 0; border-radius: 5px; font-size: .39rem; font-weight: 850; }

.planning-selection > header > span,
.planning-waves > header > span,
.planning-formulas > header > span,
.planning-timeline > header > span { padding: 6px 8px; color: #205f8d; background: #e7f1f8; border-radius: 100px; font-size: .37rem; font-weight: 850; white-space: nowrap; }
.planning-selection__table { display: grid; }
.planning-selection__table > div { display: grid; min-height: 37px; padding: 6px 14px; grid-template-columns: 24px 1.2fr 1.7fr .65fr .7fr; align-items: center; gap: 8px; border-bottom: 1px solid #e5ecef; font-size: .38rem; }
.planning-selection__table > div.is-head { min-height: 29px; color: #81949c; background: #f4f8fa; font-size: .33rem; font-weight: 800; }
.planning-selection__table > div:not(.is-head):hover { background: #f7fafc; }
.planning-selection__table strong { color: var(--brand-blue-900); font-size: .4rem; }
.planning-selection__table > div > span:nth-child(3) { overflow: hidden; color: #4e6e7a; text-overflow: ellipsis; white-space: nowrap; }
.planning-selection__table b { color: #315d73; text-align: center; }
.planning-selection__table em { color: #647e8a; font-size: .35rem; }
.planning-selection__check { display: grid; width: 19px; height: 19px; place-items: center; color: #fff; background: #167f68; border-radius: 4px; }
.planning-selection__check .icon { width: 10px; height: 10px; }
.planning-selection > footer { display: flex; min-height: 43px; padding: 8px 14px; align-items: center; gap: 13px; background: #f7fafc; }
.planning-selection > footer span { color: #718994; font-size: .37rem; }
.planning-selection > footer span b { color: #315d73; }
.planning-selection > footer button { min-height: 29px; margin-left: auto; padding: 6px 10px; color: #fff; background: #236da3; border: 0; border-radius: 4px; font-size: .37rem; font-weight: 800; }

.planning-validation > div { display: grid; padding: 13px 16px; gap: 8px; }
.planning-validation > div > article { display: grid; min-height: 53px; padding: 8px 10px; grid-template-columns: 44px 1fr auto; align-items: center; gap: 10px; background: #fff9ed; border: 1px solid #ead7ad; border-radius: 6px; }
.planning-validation > div > article.is-valid { background: #eff9f4; border-color: #cae5d7; }
.planning-validation article > span { display: grid; width: 40px; height: 32px; place-items: center; color: #765b22; background: rgba(221,173,72,.17); border-radius: 5px; font-size: .36rem; font-weight: 850; }
.planning-validation article.is-valid > span { color: #fff; background: #167f68; }
.planning-validation article p { display: grid; min-width: 0; margin: 0; gap: 3px; }
.planning-validation article small { color: #81949b; font-size: .35rem; font-weight: 800; letter-spacing: .06em; }
.planning-validation article strong { overflow: hidden; color: #365c6c; font-size: .45rem; text-overflow: ellipsis; white-space: nowrap; }
.planning-validation article > b { padding: 5px 7px; color: #7d5a16; background: #fff1cf; border-radius: 100px; font-size: .32rem; }
.planning-validation article.is-valid > b { color: #16764f; background: #dff4e9; }
.planning-validation > footer { display: flex; min-height: 38px; padding: 8px 16px; align-items: center; justify-content: center; gap: 6px; color: #526f7c; background: #f6fafb; border-top: 1px solid #e0e9ed; font-size: .39rem; }
.planning-validation > footer .icon { color: #2874a8; }

.planning-ordering { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 12px; }
.planning-ordering > section,
.planning-ordering > aside { min-height: 285px; overflow: hidden; background: #fff; border: 1px solid #d4e1e8; border-radius: 9px; box-shadow: 0 15px 32px rgba(17,65,99,.08); }
.planning-ordering > section { display: grid; padding: 17px; align-content: center; gap: 8px; }
.planning-ordering > section > small { margin-bottom: 2px; color: #2874a8; font-size: .39rem; font-weight: 850; letter-spacing: .09em; }
.planning-ordering > section > div { display: grid; min-height: 58px; padding: 8px; grid-template-columns: 29px 1fr 15px; align-items: center; gap: 8px; background: #f7fafc; border: 1px solid #e0e8ed; border-radius: 6px; }
.planning-ordering > section > div > span { display: grid; width: 28px; height: 28px; place-items: center; color: #236b9d; background: #e5f1f8; border-radius: 50%; font-size: .35rem; font-weight: 850; }
.planning-ordering > section p { display: grid; margin: 0; gap: 2px; }
.planning-ordering > section strong { color: #365c6c; font-size: .44rem; }
.planning-ordering > section small { color: #83969e; font-size: .34rem; line-height: 1.3; }
.planning-ordering > section .icon { color: #167f68; }
.planning-ordering > aside { display: grid; grid-template-rows: auto 1fr auto; }
.planning-ordering > aside > header { display: flex; min-height: 53px; padding: 11px 14px; align-items: center; justify-content: space-between; background: #eef5fa; border-bottom: 1px solid #dbe6ec; }
.planning-ordering > aside > header > small { color: #2874a8; }
.planning-ordering > aside > header > strong { font-size: .54rem; }
.planning-ordering > aside > div { display: grid; padding: 10px 13px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; gap: 6px; }
.planning-ordering > aside > div span { display: flex; min-height: 33px; padding: 6px 8px; align-items: center; gap: 8px; color: #315d73; background: #f7fafc; border: 1px solid #e2e9ed; border-radius: 5px; font-size: .4rem; }
.planning-ordering > aside > div i { color: #8598a0; font-size: .32rem; }
.planning-ordering > aside > footer { padding: 9px 14px; color: #758c96; background: #f7fafc; border-top: 1px solid #e2eaee; font-size: .36rem; text-align: center; }

.planning-workload__metrics { display: grid; padding: 14px 16px 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.planning-workload__metrics article { display: grid; min-height: 63px; padding: 9px; align-content: center; gap: 3px; background: #f7fafc; border: 1px solid #e0e8ed; border-radius: 6px; text-align: center; }
.planning-workload__metrics small { color: #82959d; font-size: .33rem; font-weight: 800; letter-spacing: .06em; }
.planning-workload__metrics strong { color: var(--brand-blue-900); font-size: .7rem; }
.planning-workload__bars { display: grid; padding: 7px 16px 13px; gap: 9px; }
.planning-workload__bars > span { display: grid; grid-template-columns: 95px 1fr 70px; align-items: center; gap: 9px; }
.planning-workload__bars i { color: #5d7885; font-size: .39rem; }
.planning-workload__bars > span > b { display: block; overflow: hidden; height: 8px; background: #e4edf1; border-radius: 100px; }
.planning-workload__bars em { display: block; height: 100%; background: linear-gradient(90deg, #2b75aa, #22a3b4); border-radius: inherit; }
.planning-workload__bars strong { color: #315d73; font-size: .39rem; text-align: right; }
.planning-workload > footer { display: flex; min-height: 42px; padding: 8px 16px; align-items: center; gap: 6px; background: #f7fafc; border-top: 1px solid #e1eaee; }
.planning-workload > footer > span { padding: 4px 6px; border-radius: 100px; font-size: .31rem; font-weight: 800; }
.planning-workload > footer .is-calculated { color: #16764f; background: #e3f5eb; }
.planning-workload > footer .is-estimated { color: #23678f; background: #e5f1f8; }
.planning-workload > footer .is-missing { color: #855b17; background: #fff0cf; }
.planning-workload > footer p { margin: 0 0 0 auto; color: #738b95; font-size: .35rem; }

.planning-waves__grid { display: grid; padding: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.planning-waves__grid article { display: grid; min-width: 0; min-height: 158px; padding: 12px; align-content: center; grid-template-columns: 1fr 1fr; gap: 7px; background: #f7fafc; border: 1px solid #dfe8ec; border-radius: 7px; }
.planning-waves__grid article.is-priority { background: #eef7fa; border-color: #9bcbd7; box-shadow: inset 0 3px #2696aa; }
.planning-waves__grid article > span,
.planning-waves__grid article > strong,
.planning-waves__grid article > em { grid-column: 1 / -1; }
.planning-waves__grid article > span { color: #2874a8; font-size: .36rem; font-weight: 850; letter-spacing: .08em; }
.planning-waves__grid article > strong { overflow: hidden; color: var(--brand-blue-900); font-size: .57rem; text-overflow: ellipsis; }
.planning-waves__grid article > div { display: grid; gap: 2px; }
.planning-waves__grid article small { color: #8799a0; font-size: .32rem; }
.planning-waves__grid article b { color: #365d6d; font-size: .47rem; }
.planning-waves__grid article > em { padding-top: 6px; color: #617b87; border-top: 1px solid #e0e8ec; font-size: .36rem; }
.planning-waves > footer { display: flex; min-height: 40px; padding: 8px 16px; align-items: center; justify-content: center; gap: 18px; color: #718993; background: #f7fafc; border-top: 1px solid #e1eaee; font-size: .37rem; }
.planning-waves > footer b { color: #315d73; }

.planning-formulas > div { display: grid; padding: 11px 15px; gap: 5px; }
.planning-formulas > div article { display: grid; min-height: 42px; padding: 6px 9px; grid-template-columns: 27px 1fr auto; align-items: center; gap: 9px; background: #f8fafb; border: 1px solid #e1e9ed; border-radius: 5px; }
.planning-formulas > div article.is-selected { background: #eef8fa; border-color: #9dced8; box-shadow: inset 3px 0 #2599ab; }
.planning-formulas article > span { display: grid; width: 26px; height: 26px; place-items: center; color: #527689; background: #e6eef2; border-radius: 50%; font-size: .33rem; font-weight: 850; }
.planning-formulas article.is-selected > span { color: #fff; background: #167f68; }
.planning-formulas article p { display: grid; margin: 0; gap: 2px; }
.planning-formulas article strong { color: #365c6c; font-size: .43rem; }
.planning-formulas article small { color: #83969d; font-size: .33rem; }
.planning-formulas article > b { padding: 4px 6px; color: #5e7884; background: #edf2f4; border-radius: 100px; font-size: .3rem; }
.planning-formulas article.is-selected > b { color: #16764f; background: #ddf3e8; }
.planning-formulas > footer { display: flex; min-height: 35px; padding: 7px 15px; align-items: center; justify-content: center; gap: 7px; background: #f7fafc; border-top: 1px solid #e2eaee; }
.planning-formulas > footer span { padding: 4px 6px; color: #5d7783; background: #fff; border: 1px solid #dce6ea; border-radius: 100px; font-size: .31rem; }

.planning-strategy { overflow: hidden; background: #fff; border: 1px solid #d4e1e8; border-radius: 10px; box-shadow: 0 16px 36px rgba(17,65,99,.08); }
.planning-strategy > header { display: grid; min-height: 58px; padding: 12px 17px; align-content: center; gap: 3px; background: #eef5fa; border-bottom: 1px solid #dbe6ec; }
.planning-strategy > div { display: grid; padding: 15px 17px 17px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.planning-strategy article { position: relative; display: grid; min-height: 210px; padding: 18px; align-content: center; gap: 5px; background: #f8fafb; border: 1px solid #dfe8ec; border-radius: 7px; }
.planning-strategy article.is-selected { background: linear-gradient(145deg, #176b9f, #003d86); border: 0; }
.planning-strategy article > em { position: absolute; top: 10px; right: 10px; padding: 4px 6px; color: #627b86; background: #edf2f4; border-radius: 100px; font-size: .29rem; font-weight: 850; }
.planning-strategy article.is-selected > em { color: #c5f1dc; background: rgba(57,192,133,.17); }
.planning-strategy article > span { margin-top: 5px; color: #2874a8; font-size: .33rem; font-weight: 850; letter-spacing: .07em; }
.planning-strategy article > strong { color: #345b6b; font-size: .53rem; }
.planning-strategy article > p { margin: 0 0 5px; color: #7d9199; font-size: .36rem; line-height: 1.35; }
.planning-strategy article.is-selected > span { color: #7bdbee; }
.planning-strategy article.is-selected > strong { color: #fff; }
.planning-strategy article.is-selected > p { color: rgba(255,255,255,.68); }
.planning-strategy article > i { display: grid; width: 24px; height: 24px; margin: 1px 0; place-items: center; color: #fff; background: rgba(255,255,255,.1); border-radius: 50%; }
.planning-strategy article > div { display: flex; margin-top: 7px; flex-wrap: wrap; gap: 5px; }
.planning-strategy article > div small { padding: 5px 6px; color: #5e7884; background: #edf2f4; border-radius: 100px; font-size: .31rem; }

.planning-timeline__axis { display: flex; padding: 13px 62px 4px 100px; justify-content: space-between; color: #8a9ba2; font-size: .31rem; }
.planning-timeline__lane { display: grid; min-height: 61px; padding: 8px 14px; grid-template-columns: 74px 1fr 65px; align-items: center; gap: 10px; }
.planning-timeline__lane > strong { color: #3d6372; font-size: .37rem; }
.planning-timeline__lane > div { position: relative; display: flex; height: 27px; align-items: stretch; gap: 2px; background: #e7eef2; border-radius: 4px; }
.planning-timeline__lane i { display: grid; min-width: 22px; place-items: center; color: #fff; background: #2a75a9; border-radius: 3px; font-size: .3rem; font-weight: 850; }
.planning-timeline__lane .wave-1 { width: 10%; }
.planning-timeline__lane .wave-2 { width: 20%; }
.planning-timeline__lane .wave-3 { width: 40%; }
.planning-timeline__lane .wave-4 { width: 30%; }
.planning-timeline__lane.is-factory i { background: #16816d; }
.planning-timeline__lane.is-factory .wave-1 { margin-left: 5%; width: 18%; }
.planning-timeline__lane.is-factory .wave-2 { width: 25%; }
.planning-timeline__lane.is-factory .wave-3 { width: 35%; }
.planning-timeline__lane.is-factory .wave-4 { width: 22%; }
.planning-timeline__lane > em { color: #315d73; font-size: .36rem; text-align: right; }
.planning-timeline > footer { display: flex; min-height: 43px; padding: 9px 16px; align-items: center; justify-content: center; gap: 8px; color: #617b87; background: #f7fafc; border-top: 1px solid #e1e9ee; font-size: .36rem; }
.planning-timeline > footer > span { width: 9px; height: 9px; background: #dda832; border-radius: 50%; box-shadow: 0 0 0 4px rgba(221,168,50,.15); }
.planning-timeline > footer p { margin: 0; }
.planning-timeline > footer strong { color: #755817; }

.planning-expedition > header > span {
  display: flex;
  padding: 6px 9px;
  align-items: center;
  gap: 5px;
  color: #126c5a;
  background: #e7f7ef;
  border: 1px solid #c8e8d8;
  border-radius: 100px;
  font-size: .34rem;
  font-weight: 850;
  letter-spacing: .05em;
  white-space: nowrap;
}
.planning-expedition > header > span .icon { width: 12px; height: 12px; }
.planning-expedition__body { display: grid; min-height: 250px; grid-template-columns: minmax(185px, .72fr) minmax(0, 1.28fr); }
.planning-expedition__sequence { padding: 13px 14px; background: #f8fafb; border-right: 1px solid #dce6eb; }
.planning-expedition__sequence > small { color: #2874a8; font-size: .31rem; font-weight: 850; letter-spacing: .08em; }
.planning-expedition__criteria { display: flex; margin: 7px 0 10px; flex-wrap: wrap; gap: 4px; }
.planning-expedition__criteria span { padding: 4px 6px; color: #396577; background: #e9f2f7; border: 1px solid #d3e3ec; border-radius: 100px; font-size: .28rem; font-weight: 800; }
.planning-expedition__sequence ol { position: relative; display: grid; margin: 0; padding: 0; gap: 5px; list-style: none; }
.planning-expedition__sequence ol::before { position: absolute; top: 14px; bottom: 14px; left: 12px; width: 1px; background: #bcd2de; content: ''; }
.planning-expedition__sequence li { position: relative; display: grid; min-height: 41px; grid-template-columns: 25px 1fr; align-items: center; gap: 8px; }
.planning-expedition__sequence li > b { z-index: 1; display: grid; width: 25px; height: 25px; place-items: center; color: #fff; background: #2375a9; border: 3px solid #f8fafb; border-radius: 50%; font-size: .27rem; }
.planning-expedition__sequence li:last-child > b { background: #16816d; }
.planning-expedition__sequence li p { display: grid; margin: 0; gap: 1px; }
.planning-expedition__sequence li strong { color: #345c6b; font-size: .38rem; }
.planning-expedition__sequence li small { color: #7d919a; font-size: .29rem; line-height: 1.25; }
.planning-expedition__dock { display: grid; min-width: 0; grid-template-rows: auto 1fr auto; background: #fff; }
.planning-expedition__dock > header { display: flex; min-height: 48px; padding: 9px 12px; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid #e0e8ec; }
.planning-expedition__dock > header > div { display: grid; min-width: 0; gap: 1px; }
.planning-expedition__dock > header small { font-size: .3rem; }
.planning-expedition__dock > header strong { font-size: .49rem; }
.planning-expedition__dock > header em { padding: 4px 6px; color: #765919; background: #fff1d0; border-radius: 100px; font-size: .26rem; font-weight: 850; white-space: nowrap; }
.planning-expedition__racks { display: grid; padding: 11px 10px 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 7px; background: linear-gradient(#fbfcfd 72%, #edf1f3 72%); }
.planning-expedition__racks > article { display: grid; min-width: 0; padding: 6px 5px 7px; justify-items: center; gap: 1px; background: rgba(255,255,255,.9); border: 1px solid #dce5e9; border-radius: 6px; box-shadow: 0 5px 12px rgba(28,67,84,.06); }
.planning-expedition__rack { position: relative; width: min(108px, 100%); }
.planning-expedition__rack svg { display: block; width: 100%; height: auto; }
.planning-expedition__rack .rack-floor { fill: none; stroke: #c8d1d5; stroke-width: 1.2; }
.planning-expedition__rack .rack-frame { fill: none; stroke: #26373e; stroke-linecap: round; stroke-linejoin: round; stroke-width: 5; }
.planning-expedition__rack .rack-support { fill: none; stroke: #e0a528; stroke-linecap: round; stroke-width: 5; }
.planning-expedition__rack .rack-glass { stroke: #176579; stroke-linejoin: round; stroke-width: 1.2; }
.planning-expedition__rack .rack-glass--back { fill: #cfe9ee; fill-opacity: .75; }
.planning-expedition__rack .rack-glass--middle { fill: #8bcbd3; fill-opacity: .62; }
.planning-expedition__rack .rack-glass--front { fill: #43a8b4; fill-opacity: .56; }
.planning-expedition__rack > span { position: absolute; right: 3px; bottom: 5px; display: grid; width: 18px; height: 18px; place-items: center; color: #fff; background: #16816d; border: 2px solid #fff; border-radius: 50%; }
.planning-expedition__rack > span .icon { width: 9px; height: 9px; }
.planning-expedition__racks article.is-current .rack-glass--front { fill: #f0ad24; stroke: #9a6508; }
.planning-expedition__racks article.is-planned .rack-glass { fill: #fff; fill-opacity: .5; stroke: #81939b; stroke-dasharray: 3 2; }
.planning-expedition__racks article.is-planned .planning-expedition__rack > span { color: #55717d; background: #e9eef1; }
.planning-expedition__racks article > strong { overflow: hidden; max-width: 100%; color: var(--brand-blue-900); font-size: .34rem; text-overflow: ellipsis; white-space: nowrap; }
.planning-expedition__racks article > small { color: #387083; font-size: .27rem; font-weight: 850; }
.planning-expedition__racks article > em { color: #80939a; font-size: .24rem; }
.planning-expedition__dock > footer { display: flex; min-height: 39px; padding: 7px 9px; align-items: center; justify-content: center; gap: 5px; color: #6f858e; background: #f7fafb; border-top: 1px solid #e0e8ec; font-size: .26rem; }
.planning-expedition__dock > footer span { display: flex; align-items: center; gap: 3px; white-space: nowrap; }
.planning-expedition__dock > footer b { color: #315e70; }
.planning-expedition__dock > footer > i { display: grid; color: #2b8296; }
.planning-expedition__dock > footer .icon { width: 10px; height: 10px; }

.planning-ratification { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(190px, .8fr); gap: 12px; }
.planning-ratification > section,
.planning-ratification > aside { overflow: hidden; min-height: 294px; background: #fff; border: 1px solid #d4e1e8; border-radius: 9px; box-shadow: 0 15px 32px rgba(17,65,99,.08); }
.planning-ratification > section { display: grid; align-content: start; }
.planning-ratification > section > header { display: flex; min-height: 58px; padding: 11px 14px; align-items: center; justify-content: space-between; background: #eef5fa; border-bottom: 1px solid #dbe6ec; }
.planning-ratification > section > header > div { display: grid; gap: 3px; }
.planning-ratification > section > header > em { padding: 5px 7px; color: #765919; background: #fff0ce; border-radius: 100px; font-size: .31rem; font-weight: 850; }
.planning-ratification > section > div { display: grid; min-height: 39px; padding: 6px 12px; grid-template-columns: 21px .7fr 1fr auto; align-items: center; gap: 8px; border-bottom: 1px solid #e5ecef; }
.planning-ratification > section > div > span { display: grid; width: 19px; height: 19px; place-items: center; color: #fff; background: #167f68; border-radius: 50%; }
.planning-ratification > section > div > span .icon { width: 10px; height: 10px; }
.planning-ratification > section > div strong { color: #476a78; font-size: .38rem; }
.planning-ratification > section > div b { color: var(--brand-blue-900); font-size: .4rem; }
.planning-ratification > section > div em { padding: 4px 6px; color: #7d5b18; background: #fff1cf; border-radius: 100px; font-size: .29rem; font-weight: 850; }
.planning-ratification > section > footer { display: flex; min-height: 39px; margin-top: auto; padding: 8px 13px; align-items: center; gap: 6px; color: #516f7c; background: #f7fafc; font-size: .35rem; }
.planning-ratification > section > footer .icon { color: #2874a8; }
.planning-ratification > aside { display: grid; padding: 18px; align-content: center; gap: 8px; color: #fff; background: linear-gradient(150deg, #176a9f, #00338f); border: 0; }
.planning-ratification > aside > small { color: #7bdcee; font-size: .37rem; font-weight: 850; letter-spacing: .09em; }
.planning-ratification > aside > strong { font-family: Georgia, 'Times New Roman', serif; font-size: 1.25rem; font-weight: 500; line-height: 1.05; }
.planning-ratification > aside > p { margin: 0; color: rgba(255,255,255,.68); font-size: .39rem; line-height: 1.4; }
.planning-ratification > aside > label { display: flex; padding: 8px; align-items: center; gap: 7px; color: #d8edf4; background: rgba(255,255,255,.08); border-radius: 5px; font-size: .35rem; }
.planning-ratification > aside > label > span { display: grid; width: 18px; height: 18px; place-items: center; color: #fff; background: #16816d; border-radius: 4px; }
.planning-ratification > aside > label .icon { width: 10px; height: 10px; }
.planning-ratification > aside > button { display: flex; min-height: 34px; padding: 8px 10px; align-items: center; justify-content: space-between; color: #173f59; background: #fff; border: 0; border-radius: 5px; font-size: .38rem; font-weight: 850; }

.planning-handoff > div { display: grid; padding: 15px 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.planning-handoff > div article { display: grid; min-height: 117px; padding: 12px; grid-template-columns: 22px 1fr; align-content: center; gap: 5px 7px; background: #f7fafc; border: 1px solid #dfe8ec; border-radius: 7px; }
.planning-handoff > div article > span { display: grid; width: 21px; height: 21px; grid-row: 1 / 3; place-items: center; color: #fff; background: #167f68; border-radius: 50%; }
.planning-handoff > div article > span .icon { width: 11px; height: 11px; }
.planning-handoff > div article strong { color: var(--brand-blue-900); font-size: .52rem; }
.planning-handoff > div article small { color: #718a95; font-size: .34rem; }
.planning-handoff > div article small:nth-of-type(2) { grid-column: 2; }
.planning-handoff > div article b { grid-column: 2; color: #365d6d; font-size: .43rem; }
.planning-handoff > footer { display: flex; min-height: 57px; padding: 9px 16px; align-items: center; justify-content: space-between; gap: 12px; background: #f7fafc; border-top: 1px solid #e1e9ee; }
.planning-handoff > footer p { display: flex; margin: 0; gap: 10px; }
.planning-handoff > footer p span { color: #718994; font-size: .35rem; }
.planning-handoff > footer p b { color: #315d73; }
.planning-handoff > footer button { display: flex; min-height: 33px; padding: 7px 10px; align-items: center; gap: 7px; color: #fff; background: #236da3; border: 0; border-radius: 5px; font-size: .36rem; font-weight: 800; }

.mock-toolbar--stock-opti {
  --logo-height: 19px;
  border-top-color: #176da2;
}

.mock-toolbar--stock-opti.is-stock { border-top-color: #1595a8; }
.mock-toolbar--stock-opti:not(.is-stock, .is-prod) { border-top-color: #e1ad37; }
.mock-toolbar--stock-opti:not(.is-stock, .is-prod) nav span.is-active::after { background: #d39d28; }
.mock-toolbar--stock-opti:not(.is-stock, .is-prod) nav span.is-active { color: #8d6511; }

.mock-stock-opti-brand {
  display: flex;
  min-width: 132px;
  align-items: center;
  gap: 6px;
}

.mock-stock-opti-brand > i {
  color: #9babb1;
  font-size: .48rem;
  font-style: normal;
}

.mock-stock-opti-brand > small {
  margin-left: 2px;
  color: #8a9ba6;
  font-size: .37rem;
  line-height: 1.15;
}

.mock-content--stock-optimization {
  min-height: 373px;
  padding: 24px 30px 35px;
  background:
    linear-gradient(rgba(18, 111, 151, .027) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 111, 151, .027) 1px, transparent 1px),
    #f2f7f8;
  background-size: 24px 24px;
}

.stock-optimization {
  width: min(790px, 100%);
  color: #294f5d;
}

.stock-optimization *,
.stock-optimization *::before,
.stock-optimization *::after { box-sizing: border-box; }
.stock-optimization small,
.stock-optimization em,
.stock-optimization i { font-style: normal; }
.stock-optimization .icon { width: 14px; height: 14px; flex: 0 0 auto; }

.stock-opti-card,
.stock-opti-modes,
.stock-opti-routing,
.stock-opti-search,
.stock-opti-handoff {
  overflow: hidden;
  background: rgba(255, 255, 255, .97);
  border: 1px solid #d4e1e8;
  border-radius: 10px;
  box-shadow: 0 16px 36px rgba(17, 65, 99, .08);
}

.stock-opti-card > header,
.stock-opti-routing > header,
.stock-opti-handoff > header {
  display: flex;
  min-height: 60px;
  padding: 12px 17px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: linear-gradient(100deg, #edf6f8, #fff);
  border-bottom: 1px solid #d9e5ec;
}

.stock-opti-card > header > div,
.stock-opti-routing > header > div,
.stock-opti-handoff > header > div { display: grid; min-width: 0; gap: 3px; }
.stock-optimization header small { color: #177a95; font-size: .39rem; font-weight: 850; letter-spacing: .09em; }
.stock-optimization header strong { color: var(--brand-blue-900); font-size: .67rem; line-height: 1.2; }
.stock-opti-card > header > em,
.stock-opti-routing > header > em {
  display: flex;
  padding: 6px 8px;
  align-items: center;
  gap: 5px;
  color: #16764f;
  background: #e7f7ef;
  border: 1px solid #c9e8d8;
  border-radius: 100px;
  font-size: .34rem;
  font-weight: 850;
  white-space: nowrap;
}

.stock-opti-card > header > span {
  padding: 6px 8px;
  color: #176b87;
  background: #e7f4f7;
  border-radius: 100px;
  font-size: .35rem;
  font-weight: 850;
  white-space: nowrap;
}

.stock-opti-overview__flow {
  position: relative;
  display: grid;
  padding: 25px 15px 20px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
}

.stock-opti-overview__flow::before {
  position: absolute;
  top: 41px;
  right: 8%;
  left: 8%;
  height: 2px;
  background: #c7dce2;
  content: '';
}

.stock-opti-overview__flow article { position: relative; z-index: 1; display: grid; min-width: 0; justify-items: center; gap: 4px; text-align: center; }
.stock-opti-overview__flow article > span { display: grid; width: 34px; height: 34px; margin-bottom: 3px; place-items: center; color: #477589; background: #fff; border: 2px solid #afd0d9; border-radius: 50%; font-size: .41rem; font-weight: 850; }
.stock-opti-overview__flow article.is-final > span { color: #fff; background: #167f68; border-color: #167f68; }
.stock-opti-overview__flow article strong { color: #345b68; font-size: .44rem; line-height: 1.2; }
.stock-opti-overview__flow article small { color: #81959d; font-size: .33rem; line-height: 1.25; }
.stock-opti-overview > footer,
.stock-opti-summary > footer { display: flex; min-height: 43px; padding: 8px 17px; align-items: center; gap: 15px; color: #789098; background: #f7fafc; border-top: 1px solid #e0e9ee; font-size: .38rem; }
.stock-opti-overview > footer span,
.stock-opti-summary > footer span { display: flex; align-items: baseline; gap: 4px; }
.stock-opti-overview > footer b,
.stock-opti-summary > footer b { color: #315d73; font-size: .51rem; }
.stock-opti-overview > footer strong,
.stock-opti-summary > footer strong { margin-left: auto; color: #8a6416; }

.stock-opti-table { display: grid; }
.stock-opti-table > div { display: grid; min-height: 43px; padding: 7px 14px; align-items: center; gap: 8px; border-bottom: 1px solid #e5ecef; font-size: .37rem; }
.stock-opti-table > div.is-head { min-height: 29px; color: #81949c; background: #f4f8fa; font-size: .32rem; font-weight: 800; }
.stock-opti-table > div:last-child { border-bottom: 0; }
.stock-opti-table strong { overflow: hidden; color: var(--brand-blue-900); font-size: .4rem; text-overflow: ellipsis; white-space: nowrap; }
.stock-opti-table b { color: #315d73; }
.stock-opti-table em { width: fit-content; padding: 4px 6px; color: #276c89; background: #e8f4f7; border-radius: 100px; font-size: .31rem; font-weight: 850; }
.stock-opti-table--requirements > div { grid-template-columns: 1.65fr .45fr .9fr .42fr; }
.stock-opti-requirements > footer { display: flex; min-height: 40px; padding: 8px 14px; align-items: center; gap: 14px; color: #748b94; background: #f7fafc; font-size: .36rem; }
.stock-opti-requirements > footer b { color: #315d73; }
.stock-opti-requirements > footer strong { margin-left: auto; color: #16764f; }

.stock-opti-modes > header,
.stock-opti-search > header { display: grid; min-height: 60px; padding: 12px 17px; align-content: center; gap: 3px; background: #eef6f8; border-bottom: 1px solid #d9e5ec; }
.stock-opti-modes > div { display: grid; padding: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.stock-opti-modes article,
.stock-opti-search__depths article { position: relative; display: grid; padding: 17px; align-content: center; gap: 7px; background: #f8fafb; border: 1px solid #dfe8ec; border-radius: 7px; }
.stock-opti-modes article { min-height: 205px; }
.stock-opti-search__body { display: grid; padding: 11px 13px 13px; gap: 9px; }
.stock-opti-search__depths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.stock-opti-search__depths article { min-height: 126px; padding: 12px; align-content: end; gap: 4px; }
.stock-opti-modes article.is-connected,
.stock-opti-search__depths article.is-selected { color: #fff; background: linear-gradient(145deg, #176f96, #003d86); border: 0; }
.stock-opti-modes article > span { --logo-height: 24px; display: flex; min-height: 29px; align-items: center; }
.stock-opti-modes article > em,
.stock-opti-search__depths article > em { position: absolute; top: 8px; right: 8px; padding: 4px 6px; color: #607984; background: #edf2f4; border-radius: 100px; font-size: .26rem; font-weight: 850; }
.stock-opti-modes article.is-connected > em,
.stock-opti-search__depths article.is-selected > em { color: #c8f2dd; background: rgba(54, 192, 132, .17); }
.stock-opti-modes article > strong,
.stock-opti-search__depths article > strong { color: #31596a; font-size: .5rem; }
.stock-opti-modes article > p,
.stock-opti-search__depths article > p { margin: 0; color: #788e97; font-size: .32rem; line-height: 1.38; }
.stock-opti-modes article > footer,
.stock-opti-search__depths article > footer { display: flex; margin-top: 3px; padding-top: 6px; align-items: center; gap: 5px; color: #347086; border-top: 1px solid #dce6ea; font-size: .29rem; }
.stock-opti-modes article.is-connected > strong,
.stock-opti-search__depths article.is-selected > strong { color: #fff; }
.stock-opti-modes article.is-connected > p,
.stock-opti-search__depths article.is-selected > p { color: rgba(255, 255, 255, .7); }
.stock-opti-modes article.is-connected > footer,
.stock-opti-search__depths article.is-selected > footer { color: #c5edf3; border-color: rgba(255, 255, 255, .15); }
.stock-opti-modes article.is-connected .product-logo { filter: brightness(0) invert(1); }

.stock-opti-search__oef {
  position: relative;
  display: grid;
  min-height: 108px;
  padding: 12px 14px 34px;
  grid-template-columns: 92px minmax(0, 1fr) 105px;
  align-items: center;
  gap: 13px;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(125deg, #003d86 0%, #075f82 62%, #08778c 100%);
  border: 1px solid #006a91;
  border-radius: 8px;
  box-shadow: 0 9px 22px rgba(0, 61, 134, .13);
}

.stock-opti-search__oef-mark { position: relative; display: grid; height: 66px; place-items: center; border-right: 1px solid rgba(255, 255, 255, .18); }
.stock-opti-search__oef-mark > b { position: relative; z-index: 2; font-family: var(--font-display); font-size: 1.05rem; letter-spacing: -.06em; }
.stock-opti-search__oef-mark > span { position: absolute; inset: 5px 15px 3px 7px; }
.stock-opti-search__oef-mark i { position: absolute; display: block; width: 32px; height: 24px; border: 1px solid rgba(152, 232, 239, .64); border-radius: 45% 55% 38% 62%; transform: rotate(-18deg); }
.stock-opti-search__oef-mark i:nth-child(1) { top: 1px; left: 5px; }
.stock-opti-search__oef-mark i:nth-child(2) { right: 2px; bottom: 3px; transform: rotate(24deg); }
.stock-opti-search__oef-mark i:nth-child(3) { right: 14px; bottom: 13px; width: 45px; height: 35px; border-style: dashed; border-radius: 4px; transform: none; }
.stock-opti-search__oef-copy { display: grid; min-width: 0; gap: 3px; }
.stock-opti-search__oef-copy small { color: #8fe3eb; font-size: .28rem; font-weight: 850; letter-spacing: .08em; }
.stock-opti-search__oef-copy strong { font-size: .48rem; line-height: 1.2; }
.stock-opti-search__oef-copy p { margin: 0; color: rgba(255, 255, 255, .72); font-size: .31rem; line-height: 1.38; }
.stock-opti-search__oef-metric { display: grid; min-height: 68px; padding-left: 13px; align-content: center; border-left: 1px solid rgba(255, 255, 255, .18); }
.stock-opti-search__oef-metric small { color: #8fe3eb; font-size: .25rem; font-weight: 850; letter-spacing: .1em; }
.stock-opti-search__oef-metric strong { color: #fff; font-family: var(--font-display); font-size: .86rem; line-height: 1; }
.stock-opti-search__oef-metric span { margin-top: 4px; color: rgba(255, 255, 255, .7); font-size: .27rem; line-height: 1.25; }
.stock-opti-search__oef > footer { position: absolute; right: 14px; bottom: 8px; left: 119px; display: flex; align-items: center; gap: 5px; color: #bfeff2; font-size: .27rem; }

.stock-opti-validation > div { display: grid; padding: 12px 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.stock-opti-validation article { display: grid; min-height: 78px; padding: 9px 10px; grid-template-columns: 31px 1fr; align-items: center; gap: 8px; background: #f7fafc; border: 1px solid #dfe8ec; border-radius: 6px; }
.stock-opti-validation article > span { display: grid; width: 30px; height: 30px; place-items: center; color: #207691; background: #e5f3f6; border-radius: 50%; font-size: .34rem; font-weight: 850; }
.stock-opti-validation article p { display: grid; min-width: 0; margin: 0; gap: 3px; }
.stock-opti-validation article strong { color: #345b6a; font-size: .42rem; }
.stock-opti-validation article small { color: #81949c; font-size: .32rem; line-height: 1.25; }
.stock-opti-validation article > b { grid-column: 2; width: fit-content; margin-top: -5px; padding: 3px 5px; color: #16764f; background: #e4f5ec; border-radius: 100px; font-size: .28rem; }
.stock-opti-validation > footer,
.stock-opti-inventory > footer { display: flex; min-height: 37px; padding: 8px 15px; align-items: center; justify-content: center; gap: 6px; color: #526f7c; background: #f6fafb; border-top: 1px solid #e0e9ed; font-size: .35rem; }

.stock-opti-shortage,
.stock-opti-reservation,
.stock-opti-apply,
.stock-opti-technical { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(190px, .82fr); gap: 12px; }
.stock-opti-shortage > section,
.stock-opti-shortage > aside,
.stock-opti-reservation > section,
.stock-opti-reservation > aside,
.stock-opti-apply > section,
.stock-opti-apply > aside,
.stock-opti-technical > section,
.stock-opti-technical > aside { overflow: hidden; min-height: 290px; background: #fff; border: 1px solid #d4e1e8; border-radius: 9px; box-shadow: 0 15px 32px rgba(17, 65, 99, .08); }
.stock-opti-shortage > section { display: grid; padding: 21px; align-content: center; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; background: linear-gradient(145deg, #fffaf0, #fff); border-color: #e7d3a6; }
.stock-opti-shortage > section > span { display: grid; width: 35px; height: 35px; grid-column: 1 / -1; place-items: center; color: #fff; background: #c48a1e; border-radius: 50%; font-size: .75rem; font-weight: 850; }
.stock-opti-shortage > section > small,
.stock-opti-shortage > section > strong,
.stock-opti-shortage > section > p { grid-column: 1 / -1; }
.stock-opti-shortage > section > small { color: #9b6d18; font-size: .37rem; font-weight: 850; letter-spacing: .09em; }
.stock-opti-shortage > section > strong { color: var(--brand-blue-900); font-size: .68rem; line-height: 1.2; }
.stock-opti-shortage > section > p { margin: 0 0 4px; color: #748992; font-size: .38rem; line-height: 1.4; }
.stock-opti-shortage > section > div { display: grid; padding: 8px; gap: 3px; background: rgba(255, 255, 255, .8); border: 1px solid #eadcbf; border-radius: 5px; }
.stock-opti-shortage > section > div em { color: #8d8170; font-size: .31rem; }
.stock-opti-shortage > section > div b { color: #745318; font-size: .4rem; }
.stock-opti-shortage > aside { display: grid; padding: 19px; align-content: center; gap: 8px; }
.stock-opti-shortage > aside > small,
.stock-opti-reservation > aside > small,
.stock-opti-apply > aside > small,
.stock-opti-technical > aside > small { color: #187a94; font-size: .37rem; font-weight: 850; letter-spacing: .09em; }
.stock-opti-shortage > aside > strong { color: var(--brand-blue-900); font-size: .62rem; }
.stock-opti-shortage > aside button,
.stock-opti-reservation > aside button { display: flex; min-height: 34px; padding: 8px 10px; align-items: center; justify-content: space-between; color: #315d70; background: #eef5f8; border: 1px solid #cfe0e7; border-radius: 5px; font-size: .37rem; font-weight: 800; }
.stock-opti-shortage > aside button.is-primary,
.stock-opti-reservation > aside button { color: #fff; background: #176f9f; border-color: #176f9f; }
.stock-opti-shortage > aside p { display: flex; margin: 2px 0 0; gap: 5px; color: #758a93; font-size: .32rem; line-height: 1.35; }

.stock-opti-table--inventory > div { grid-template-columns: 1.35fr .7fr .8fr .55fr; }
.stock-opti-table--inventory span.is-ok,
.stock-opti-table--inventory span.is-warning { width: fit-content; padding: 4px 6px; color: #16764f; background: #e3f5eb; border-radius: 100px; font-size: .3rem; font-weight: 850; }
.stock-opti-table--inventory span.is-warning { color: #875f18; background: #fff0cf; }
.stock-opti-table--inventory em { color: #fff; background: #23739d; }

.stock-opti-reservation > section { display: grid; padding: 18px; align-content: center; gap: 13px; }
.stock-opti-reservation > section > header { display: grid; gap: 4px; }
.stock-opti-reservation__meter { overflow: hidden; height: 13px; background: #e2ecef; border-radius: 100px; }
.stock-opti-reservation__meter > span { display: block; height: 100%; background: linear-gradient(90deg, #1b91a7, #167f68); border-radius: inherit; }
.stock-opti-reservation__figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.stock-opti-reservation__figures > span { display: grid; padding: 9px; gap: 3px; background: #f6fafb; border: 1px solid #e0e9ed; border-radius: 5px; text-align: center; }
.stock-opti-reservation__figures small { color: #82959d; font-size: .31rem; }
.stock-opti-reservation__figures b { color: var(--brand-blue-900); font-size: .65rem; }
.stock-opti-reservation > section > footer { color: #748b94; font-size: .34rem; text-align: center; }
.stock-opti-reservation > aside { display: grid; padding: 19px; align-content: center; gap: 8px; color: #fff; background: linear-gradient(145deg, #176f96, #003d86); border: 0; }
.stock-opti-reservation > aside > small { color: #78deef; }
.stock-opti-reservation > aside > strong { font-family: Georgia, 'Times New Roman', serif; font-size: 1.12rem; font-weight: 500; line-height: 1.08; }
.stock-opti-reservation > aside > p { margin: 0; color: rgba(255, 255, 255, .69); font-size: .37rem; line-height: 1.42; }
.stock-opti-reservation > aside > label { display: flex; padding: 8px; align-items: center; gap: 6px; color: #d8edf4; background: rgba(255, 255, 255, .08); border-radius: 5px; font-size: .33rem; }
.stock-opti-reservation > aside > label span { display: grid; width: 18px; height: 18px; place-items: center; color: #fff; background: #16816d; border-radius: 4px; }
.stock-opti-reservation > aside > label .icon { width: 10px; height: 10px; }
.stock-opti-reservation > aside button { color: #17445a; background: #fff; border-color: #fff; }

.stock-opti-routing > div { display: grid; padding: 15px 17px 17px; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 11px; }
.stock-opti-routing article { position: relative; display: grid; min-height: 215px; padding: 17px; align-content: center; gap: 6px; background: #f7fafc; border: 1px solid #dce7eb; border-radius: 7px; }
.stock-opti-routing article.is-laminated { background: #fff9ed; border-color: #ead9b5; }
.stock-opti-routing article > span { position: absolute; top: 10px; right: 10px; padding: 5px 7px; color: #1b6e91; background: #e5f2f7; border-radius: 100px; font-size: .3rem; font-weight: 850; }
.stock-opti-routing article.is-laminated > span { color: #89631b; background: #fff0cf; }
.stock-opti-routing article > strong { color: var(--brand-blue-900); font-size: .55rem; }
.stock-opti-routing article > small { margin-bottom: 5px; color: #7b9098; font-size: .33rem; }
.stock-opti-routing article > div { display: flex; padding-top: 6px; justify-content: space-between; gap: 8px; border-top: 1px solid #e0e9ed; font-size: .35rem; }
.stock-opti-routing article > div i { color: #557783; }
.stock-opti-routing article > div b { color: #315d73; }
.stock-opti-routing article > footer { margin-top: 4px; padding: 6px; color: #785817; background: #fff2d8; border-radius: 4px; font-size: .32rem; text-align: center; }

.stock-opti-table--summary > div { grid-template-columns: .45fr 1.45fr .45fr .5fr .55fr; }
.stock-opti-table--summary em { color: #536f7b; background: #edf3f5; }

.stock-opti-compaction__modes {
  display: grid;
  padding: 11px 13px 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.stock-opti-compaction__modes article {
  display: grid;
  min-width: 0;
  min-height: 72px;
  padding: 8px;
  grid-template-columns: 30px 1fr;
  align-items: center;
  gap: 7px;
  background: #f7fafb;
  border: 1px solid #dfe8ec;
  border-radius: 6px;
}
.stock-opti-compaction__modes article.is-selected {
  color: #fff;
  background: linear-gradient(145deg, #176f96, #003d86);
  border-color: transparent;
  box-shadow: 0 8px 18px rgba(0, 61, 134, .16);
}
.stock-opti-compaction__modes article > span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: #27748d;
  background: #e4f2f5;
  border-radius: 50%;
  font-size: .29rem;
  font-weight: 900;
}
.stock-opti-compaction__modes article.is-selected > span { color: #07527a; background: #fff; }
.stock-opti-compaction__modes article > p { display: grid; min-width: 0; margin: 0; gap: 1px; }
.stock-opti-compaction__modes article small { color: #7c929b; font-size: .27rem; font-weight: 800; }
.stock-opti-compaction__modes article strong { color: #315d70; font-size: .38rem; line-height: 1.15; }
.stock-opti-compaction__modes article em { overflow: hidden; color: #8799a0; font-size: .25rem; text-overflow: ellipsis; white-space: nowrap; }
.stock-opti-compaction__modes article.is-selected small,
.stock-opti-compaction__modes article.is-selected em { color: rgba(255, 255, 255, .68); }
.stock-opti-compaction__modes article.is-selected strong { color: #fff; }
.stock-opti-compaction__preview {
  display: grid;
  padding: 0 13px 10px;
  grid-template-columns: minmax(0, .72fr) 22px minmax(0, 1.28fr);
  align-items: center;
  gap: 7px;
}
.stock-opti-compaction__preview > section {
  display: grid;
  min-height: 80px;
  padding: 10px 11px;
  align-content: center;
  gap: 4px;
  background: #f7fafb;
  border: 1px solid #dfe8ec;
  border-radius: 6px;
}
.stock-opti-compaction__preview > section > small { color: #177a95; font-size: .28rem; font-weight: 850; letter-spacing: .07em; }
.stock-opti-compaction__preview > section > strong { color: var(--brand-blue-900); font-size: .48rem; }
.stock-opti-compaction__preview > section > span { color: #788f98; font-size: .29rem; line-height: 1.3; }
.stock-opti-compaction__preview > i { display: grid; place-items: center; color: #248ba1; }
.stock-opti-compaction__preview > section.is-result { background: #eef8f5; border-color: #c7e4d8; }
.stock-opti-compaction__preview > section.is-result > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.stock-opti-compaction__preview > section.is-result article { display: grid; padding: 6px 7px; grid-template-columns: 1fr auto; gap: 2px 6px; background: #fff; border: 1px solid #d6e9e2; border-radius: 5px; }
.stock-opti-compaction__preview > section.is-result article b { color: #245e71; font-size: .35rem; }
.stock-opti-compaction__preview > section.is-result article em { padding: 2px 4px; color: #fff; background: #167f68; border-radius: 100px; font-size: .24rem; font-weight: 850; }
.stock-opti-compaction__preview > section.is-result article:last-child em { background: #b47c19; }
.stock-opti-compaction__preview > section.is-result article span { grid-column: 1 / -1; color: #7b9098; font-size: .26rem; }
.stock-opti-compaction > footer { display: flex; min-height: 39px; padding: 8px 14px; align-items: center; gap: 7px; color: #657f8a; background: #f7fafc; border-top: 1px solid #e0e9ee; font-size: .33rem; }
.stock-opti-compaction > footer > span { display: flex; align-items: center; gap: 5px; }
.stock-opti-compaction > footer > strong { margin-left: auto; color: #16764f; font-size: .38rem; }

.stock-opti-search__depths article > span { display: grid; width: 29px; height: 29px; margin-bottom: 3px; place-items: center; color: #1a7b95; background: #e7f4f7; border-radius: 50%; }
.stock-opti-search__depths article.is-selected > span { color: #fff; background: #16816d; }

.stock-opti-simulations__grid { display: grid; padding: 12px 15px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.stock-opti-simulations__grid article { display: grid; min-height: 69px; padding: 8px 9px; grid-template-columns: 29px 1fr; align-items: center; gap: 8px; background: #f8fafb; border: 1px solid #e1e9ed; border-radius: 5px; }
.stock-opti-simulations__grid article.is-selected { background: #eef8fa; border-color: #9dced8; box-shadow: inset 3px 0 #2599ab; }
.stock-opti-simulations__grid article > span { display: grid; width: 28px; height: 28px; place-items: center; color: #527689; background: #e6eef2; border-radius: 50%; font-size: .31rem; font-weight: 850; }
.stock-opti-simulations__grid article.is-selected > span { color: #fff; background: #167f68; }
.stock-opti-simulations__grid article p { display: grid; min-width: 0; margin: 0; gap: 2px; }
.stock-opti-simulations__grid article strong { color: #365c6c; font-size: .4rem; }
.stock-opti-simulations__grid article small { color: #83969d; font-size: .31rem; }
.stock-opti-simulations__grid article > b { grid-column: 2; width: fit-content; margin-top: -7px; padding: 3px 5px; color: #647e88; background: #edf2f4; border-radius: 100px; font-size: .27rem; }
.stock-opti-simulations > footer { display: flex; min-height: 44px; padding: 8px 15px; align-items: center; gap: 8px; background: #f7fafc; border-top: 1px solid #e1eaee; }
.stock-opti-simulations > footer strong { color: #16764f; font-size: .39rem; }
.stock-opti-simulations > footer span { color: #738b95; font-size: .34rem; }
.stock-opti-simulations > footer button,
.stock-opti-release > footer button,
.stock-opti-handoff > footer button { display: flex; min-height: 31px; margin-left: auto; padding: 7px 10px; align-items: center; gap: 6px; color: #fff; background: #23739d; border: 0; border-radius: 5px; font-size: .35rem; font-weight: 800; }

.stock-opti-apply > section,
.stock-opti-technical > section { display: grid; grid-template-rows: auto 1fr; }
.stock-opti-apply > section > header,
.stock-opti-technical > section > header { display: grid; min-height: 55px; padding: 11px 14px; align-content: center; gap: 3px; background: #eef6f8; border-bottom: 1px solid #d9e5ec; }
.stock-opti-sheet { position: relative; display: grid; min-height: 205px; margin: 15px; padding: 4px; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr) 24px; gap: 3px; background: #d4e9ee; border: 2px solid #207d96; }
.stock-opti-sheet .piece { display: grid; place-items: center; color: #315d6b; background: rgba(255, 255, 255, .82); border: 1px solid #5da9b9; font-size: .3rem; }
.stock-opti-sheet > i { display: grid; grid-column: 1 / -1; place-items: center; color: #6f8690; background: #edf4f5; font-size: .28rem; font-weight: 850; letter-spacing: .1em; }
.stock-opti-apply > aside,
.stock-opti-technical > aside { display: grid; padding: 17px; align-content: center; gap: 7px; }
.stock-opti-apply > aside > strong { margin-bottom: 2px; color: var(--brand-blue-900); font-size: .63rem; }
.stock-opti-apply > aside > div,
.stock-opti-technical > aside > div { display: flex; padding-bottom: 6px; justify-content: space-between; border-bottom: 1px solid #e3ebee; color: #768d96; font-size: .36rem; }
.stock-opti-apply > aside > div b,
.stock-opti-technical > aside > div b { color: #315d73; }
.stock-opti-apply > aside > em { display: flex; margin-top: 3px; padding: 7px; align-items: center; gap: 5px; color: #16764f; background: #e7f7ef; border-radius: 5px; font-size: .33rem; }

.stock-opti-coated-piece { position: relative; width: calc(100% - 34px); min-height: 195px; margin: 16px auto; background: linear-gradient(145deg, rgba(95, 176, 196, .22), rgba(255, 255, 255, .7)); border: 2px solid #237f98; }
.stock-opti-coated-piece > span { position: absolute; top: 11px; left: 11px; color: #176f8a; font-size: .32rem; font-weight: 850; letter-spacing: .07em; }
.stock-opti-edge-lines { position: absolute; right: 0; bottom: 0; left: 0; display: grid; height: 67px; grid-template-columns: repeat(11, 1fr); background: rgba(227, 174, 48, .23); border-top: 2px solid #c58e1d; }
.stock-opti-edge-lines i { border-right: 1px solid rgba(151, 104, 18, .42); }
.stock-opti-edge-lines i:last-child { border: 0; }
.stock-opti-coated-piece > b { position: absolute; right: 9px; bottom: 42px; color: #765719; font-size: .4rem; }
.stock-opti-coated-piece > em { position: absolute; right: 9px; bottom: 10px; color: #765719; font-size: .31rem; }
.stock-opti-technical > aside > div.is-result { padding: 8px; color: #fff; background: #167f68; border: 0; border-radius: 5px; }
.stock-opti-technical > aside > div.is-result b { color: #fff; font-size: .65rem; }
.stock-opti-technical > aside > p { display: flex; margin: 3px 0 0; gap: 5px; color: #6f8791; font-size: .31rem; line-height: 1.35; }

.stock-opti-release > header > em { color: #875f18; background: #fff1cf; border-color: #ebd5a6; }
.stock-opti-table--release > div { grid-template-columns: .45fr 1.45fr .7fr .7fr; }
.stock-opti-table--release small { color: #718b95; font-size: .32rem; }
.stock-opti-table--release em { color: #7c5b1c; background: #fff0cf; }
.stock-opti-release > footer { display: flex; min-height: 48px; padding: 8px 15px; align-items: center; gap: 9px; color: #5f7985; background: #f7fafc; border-top: 1px solid #e1eaee; font-size: .35rem; }
.stock-opti-release > footer > span { display: flex; align-items: center; gap: 5px; }

.stock-opti-handoff > header > span { display: grid; width: 37px; height: 37px; place-items: center; color: #fff; background: #167f68; border-radius: 50%; }
.stock-opti-handoff > header > span .icon { width: 20px; height: 20px; }
.stock-opti-handoff > header > div { margin-right: auto; }
.stock-opti-handoff > header > em { padding: 6px 9px; color: #16764f; background: #e6f7ee; border-radius: 100px; font-size: .34rem; font-weight: 850; }
.stock-opti-handoff__flow { display: grid; padding: 16px; grid-template-columns: 1fr 28px 1fr 28px 1fr; align-items: center; gap: 7px; }
.stock-opti-handoff__flow article { display: grid; min-height: 126px; padding: 12px; align-content: center; gap: 6px; background: #f6fafb; border: 1px solid #dce7eb; border-radius: 7px; }
.stock-opti-handoff__flow article:last-of-type { color: #fff; background: linear-gradient(145deg, #176f96, #003d86); border: 0; }
.stock-opti-handoff__flow article small { color: #177a95; font-size: .32rem; font-weight: 850; letter-spacing: .08em; }
.stock-opti-handoff__flow article strong { color: var(--brand-blue-900); font-size: .51rem; }
.stock-opti-handoff__flow article span { display: flex; width: fit-content; align-items: center; gap: 4px; color: #16764f; font-size: .31rem; }
.stock-opti-handoff__flow article:last-of-type small { color: #78deef; }
.stock-opti-handoff__flow article:last-of-type strong { color: #fff; }
.stock-opti-handoff__flow article:last-of-type span { color: #ffe09a; }
.stock-opti-handoff__flow > i { display: grid; place-items: center; color: #2392a7; }
.stock-opti-handoff > footer { display: flex; min-height: 47px; padding: 8px 15px; align-items: center; gap: 13px; color: #748b94; background: #f7fafc; border-top: 1px solid #e1eaee; font-size: .35rem; }
.stock-opti-handoff > footer b { color: #315d73; }

.mock-toolbar--cut-execution {
  --logo-height: 19px;
  border-top-color: #657881;
}

.mock-toolbar--cut-execution.is-trace {
  color: #e8f3f5;
  background: #173845;
  border-top-color: #e4ad37;
  border-bottom-color: #2b505c;
}

.mock-cut-brand,
.mock-cut-status {
  display: flex;
  align-items: center;
}

.mock-cut-brand { min-width: 135px; gap: 7px; }
.mock-cut-brand small { color: #81949c; font-size: .37rem; line-height: 1.15; }
.mock-toolbar--cut-execution.is-trace .mock-cut-brand small { color: #b6c9cf; }
.mock-toolbar--cut-execution.is-trace nav span { color: #b8cbd0; }
.mock-toolbar--cut-execution.is-trace nav span.is-active { color: #fff; }
.mock-toolbar--cut-execution.is-trace nav span.is-active::after { background: #e4ad37; }
.mock-cut-status { gap: 5px; white-space: nowrap; }
.mock-cut-status i { width: 7px; height: 7px; background: #21a87e; border-radius: 50%; box-shadow: 0 0 0 3px rgba(33, 168, 126, .13); }
.mock-cut-status small { color: #55727e; font-size: .34rem; font-weight: 850; letter-spacing: .07em; }
.mock-toolbar--cut-execution.is-trace .mock-cut-status small { color: #d0e2e6; }

.mock-content--cut-execution {
  min-height: 373px;
  padding: 24px 28px 49px;
  background-color: #edf2f3;
  background-image: linear-gradient(rgba(29, 70, 84, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(29, 70, 84, .035) 1px, transparent 1px);
}

.cut-execution { width: min(790px, 100%); color: #526d77; }
.cut-execution *, .cut-execution *::before, .cut-execution *::after { box-sizing: border-box; }
.cut-execution small, .cut-execution em, .cut-execution i { font-style: normal; }
.cut-execution .icon { width: 13px; height: 13px; flex: 0 0 auto; }
.cut-card,
.cut-trace-context,
.cut-next-material,
.cut-remote-qr,
.cut-handoff { overflow: hidden; background: #fff; border: 1px solid #d7e2e6; border-radius: 8px; box-shadow: 0 8px 24px rgba(33, 68, 80, .08); }
.cut-card > header,
.cut-next-material > header,
.cut-handoff > header { display: flex; min-height: 56px; padding: 10px 14px; align-items: center; justify-content: space-between; gap: 12px; background: #f8fafb; border-bottom: 1px solid #dde7ea; }
.cut-card > header > div,
.cut-next-material > header > div,
.cut-handoff > header > div { display: grid; gap: 3px; }
.cut-card > header small,
.cut-next-material > header small,
.cut-handoff > header small { color: #547681; font-size: .32rem; font-weight: 850; letter-spacing: .08em; }
.cut-card > header strong,
.cut-next-material > header strong,
.cut-handoff > header strong { color: #173f50; font-size: .58rem; line-height: 1.2; }
.cut-card > header > em,
.cut-handoff > header > em { padding: 5px 8px; color: #246c60; background: #e6f5f0; border: 1px solid #c9e8de; border-radius: 100px; font-size: .31rem; font-weight: 850; white-space: nowrap; }

.cut-overview__flow { position: relative; display: grid; padding: 18px 15px; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; }
.cut-overview__flow::before { position: absolute; top: 39px; right: 42px; left: 42px; height: 2px; background: #d6e3e6; content: ''; }
.cut-overview__flow article { position: relative; z-index: 1; display: grid; min-height: 112px; padding: 9px 6px; align-content: start; justify-items: center; gap: 7px; text-align: center; }
.cut-overview__flow article > span { display: grid; width: 31px; height: 31px; place-items: center; color: #2e697e; background: #e8f1f3; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #bcd1d7; font-size: .34rem; font-weight: 850; }
.cut-overview__flow article.is-final > span { color: #fff; background: #21856f; box-shadow: 0 0 0 1px #21856f; }
.cut-overview__flow article > span .icon { width: 14px; height: 14px; }
.cut-overview__flow article strong { color: #294f5e; font-size: .38rem; line-height: 1.25; }
.cut-overview__flow article small { color: #82959d; font-size: .29rem; line-height: 1.3; }
.cut-overview > footer,
.cut-multi-wave > footer { display: flex; min-height: 45px; padding: 8px 14px; align-items: center; gap: 14px; background: #f7fafb; border-top: 1px solid #e0e8eb; font-size: .34rem; }
.cut-overview > footer b,
.cut-multi-wave > footer b { color: #214d5f; }
.cut-overview > footer strong,
.cut-multi-wave > footer strong { margin-left: auto; color: #25738b; }

.cut-queue__lanes { display: grid; padding: 13px; grid-template-columns: 1.45fr 1fr; gap: 10px; }
.cut-queue__lanes > section { overflow: hidden; background: #fbfcfc; border: 1px solid #dbe5e8; border-radius: 6px; }
.cut-queue__lanes > section > header { display: grid; min-height: 54px; padding: 9px; grid-template-columns: 34px 1fr 23px; align-items: center; gap: 8px; background: #eaf3f5; }
.cut-queue__lanes > section.is-lam > header { background: #fff3d9; }
.cut-queue__lanes > section > header > span { display: grid; width: 32px; height: 32px; place-items: center; color: #fff; background: #2a758c; border-radius: 5px; font-size: .31rem; font-weight: 900; }
.cut-queue__lanes > section.is-lam > header > span { color: #684a11; background: #e8b643; }
.cut-queue__lanes > section > header > div { display: grid; gap: 2px; }
.cut-queue__lanes > section > header strong { color: #244c5b; font-size: .42rem; }
.cut-queue__lanes > section > header small { color: #728a94; font-size: .29rem; }
.cut-queue__lanes > section > header > b { display: grid; width: 22px; height: 22px; place-items: center; color: #2e7184; background: #fff; border-radius: 50%; font-size: .34rem; }
.cut-queue__lanes article { display: grid; min-height: 42px; padding: 6px 8px; grid-template-columns: 35px 1fr auto auto; align-items: center; gap: 6px; border-top: 1px solid #e2eaed; }
.cut-queue__lanes article.is-next { background: #eef9f5; box-shadow: inset 3px 0 #2c967d; }
.cut-queue__lanes article > span { color: #2a5d6e; font-size: .36rem; font-weight: 850; }
.cut-queue__lanes article strong { color: #46646e; font-size: .34rem; }
.cut-queue__lanes article small { color: #82959c; font-size: .29rem; }
.cut-queue__lanes article em { padding: 3px 5px; color: #647b83; background: #edf2f3; border-radius: 100px; font-size: .24rem; font-weight: 850; }
.cut-queue__lanes article.is-next em { color: #21735e; background: #dff2eb; }
.cut-queue__lanes section > p { display: flex; margin: 10px; padding: 8px; align-items: center; gap: 5px; color: #796026; background: #fff7e6; border-radius: 4px; font-size: .29rem; }

.cut-session-guard,
.cut-modal-scene { position: relative; display: grid; min-height: 294px; place-items: center; overflow: hidden; background: linear-gradient(145deg, #e5ecee, #d5e1e4); border-radius: 8px; }
.cut-session-guard__backdrop,
.cut-modal-scene__background { position: absolute; inset: 18px; display: grid; padding: 18px; grid-template-columns: repeat(2, 1fr); align-content: start; gap: 10px; opacity: .34; filter: blur(1px); background: #fff; border: 1px solid #cbdadd; border-radius: 7px; }
.cut-session-guard__backdrop span,
.cut-session-guard__backdrop button,
.cut-modal-scene__background span { padding: 12px; color: #315965; background: #edf4f5; border: 0; border-radius: 4px; font-size: .4rem; }
.cut-session-guard > section,
.cut-modal-scene > section { position: relative; z-index: 1; display: grid; width: min(440px, calc(100% - 30px)); padding: 19px; justify-items: center; gap: 7px; background: #fff; border-radius: 8px; box-shadow: 0 18px 45px rgba(18, 48, 58, .22); text-align: center; }
.cut-session-guard > section > span,
.cut-modal-scene > section > span { display: grid; width: 36px; height: 36px; place-items: center; color: #fff; background: #b27b1c; border-radius: 50%; }
.cut-session-guard > section > span .icon,
.cut-modal-scene > section > span .icon { width: 17px; height: 17px; }
.cut-session-guard > section small,
.cut-modal-scene > section > small { color: #8b681e; font-size: .3rem; font-weight: 900; letter-spacing: .1em; }
.cut-session-guard > section strong,
.cut-modal-scene > section > strong { color: #173f50; font-size: .65rem; }
.cut-session-guard > section p,
.cut-modal-scene > section > p { max-width: 370px; margin: 0; color: #6f858e; font-size: .34rem; line-height: 1.45; }
.cut-session-guard button,
.cut-modal-scene button,
.cut-assignment button,
.cut-next-material button,
.cut-handoff button { display: flex; min-height: 31px; padding: 7px 10px; align-items: center; justify-content: center; gap: 6px; color: #fff; background: #276f88; border: 0; border-radius: 5px; font-size: .34rem; font-weight: 800; }

.cut-machines > div { display: grid; padding: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cut-machines article { position: relative; display: grid; min-height: 207px; padding: 15px; align-content: center; gap: 6px; background: #f8fafb; border: 1px solid #dbe5e8; border-radius: 7px; }
.cut-machines article.is-selected { background: #eff8f5; border-color: #91cdbd; box-shadow: inset 3px 0 #23856e; }
.cut-machines article > span { position: absolute; top: 10px; right: 10px; display: grid; width: 27px; height: 27px; place-items: center; color: #50717c; background: #e8f0f2; border-radius: 50%; font-size: .3rem; font-weight: 850; }
.cut-machines article.is-selected > span { color: #fff; background: #25846e; }
.cut-machines article small { color: #4f7886; font-size: .3rem; font-weight: 850; letter-spacing: .07em; }
.cut-machines article strong { color: #173f50; font-size: .56rem; }
.cut-machines article p { margin: 0 0 3px; color: #7d9198; font-size: .32rem; }
.cut-machines article > div { display: flex; min-height: 29px; align-items: center; gap: 5px; }
.cut-machines article > div em { padding: 4px 6px; color: #28697d; background: #e5f0f3; border-radius: 100px; font-size: .28rem; font-weight: 850; }
.cut-machines article > div b { margin-left: auto; color: #5c747d; font-size: .31rem; }
.cut-machines article button { min-height: 29px; color: #42636f; background: #fff; border: 1px solid #cedce0; border-radius: 4px; font-size: .31rem; font-weight: 800; }
.cut-machines article.is-selected button { color: #fff; background: #25846e; border-color: #25846e; }

.cut-session { display: grid; overflow: hidden; grid-template-columns: 1fr 190px; background: #fff; border: 1px solid #d6e2e6; border-radius: 8px; box-shadow: 0 8px 24px rgba(33, 68, 80, .08); }
.cut-session > section > header { display: grid; min-height: 66px; padding: 11px 14px; grid-template-columns: 35px 1fr auto; align-items: center; gap: 9px; background: #eff8f5; border-bottom: 1px solid #d4e9e2; }
.cut-session > section > header > span { display: grid; width: 33px; height: 33px; place-items: center; color: #fff; background: #25846e; border-radius: 50%; }
.cut-session > section > header > div { display: grid; gap: 3px; }
.cut-session > section > header small { color: #3a796b; font-size: .3rem; font-weight: 850; letter-spacing: .07em; }
.cut-session > section > header strong { color: #184657; font-size: .57rem; }
.cut-session > section > header em { color: #21705d; font-size: .3rem; font-weight: 850; }
.cut-session__fields { display: grid; padding: 13px; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.cut-session__fields > span { display: grid; min-height: 51px; padding: 8px; align-content: center; gap: 3px; background: #f6f9fa; border: 1px solid #e0e8eb; border-radius: 5px; }
.cut-session__fields small { color: #80949b; font-size: .28rem; text-transform: uppercase; }
.cut-session__fields b { color: #315a69; font-size: .37rem; }
.cut-session > section > footer { display: flex; min-height: 55px; padding: 9px 14px; align-items: center; gap: 8px; background: #173f50; color: #fff; }
.cut-session > section > footer > span { color: #e9bd55; }
.cut-session > section > footer > div { display: grid; gap: 2px; }
.cut-session > section > footer small { color: #b9cdd3; font-size: .27rem; }
.cut-session > section > footer strong { font-size: .5rem; letter-spacing: .05em; }
.cut-session > section > footer em { margin-left: auto; color: #b8cad0; font-size: .28rem; }
.cut-session > aside { display: grid; padding: 15px; align-content: center; gap: 7px; background: #f7fafb; border-left: 1px solid #dce6e9; }
.cut-session > aside > small { margin-bottom: 3px; color: #627f89; font-size: .3rem; font-weight: 850; letter-spacing: .08em; }
.cut-session > aside button { min-height: 31px; color: #42646f; background: #fff; border: 1px solid #cedce0; border-radius: 4px; font-size: .31rem; font-weight: 750; }
.cut-session > aside button.is-primary { color: #fff; background: #286f88; border-color: #286f88; }

.cut-table > div { display: grid; min-height: 43px; padding: 7px 12px; align-items: center; gap: 9px; border-bottom: 1px solid #e2eaec; font-size: .33rem; }
.cut-table > div:last-child { border-bottom: 0; }
.cut-table > div.is-head { min-height: 34px; color: #69828c; background: #edf3f5; font-size: .28rem; font-weight: 850; text-transform: uppercase; }
.cut-table--assignment > div { grid-template-columns: .65fr .8fr .9fr 1.35fr; }
.cut-table--assignment strong { color: #23725f; }
.cut-assignment > footer,
.cut-next-material > footer,
.cut-handoff > footer { display: flex; min-height: 47px; padding: 8px 14px; align-items: center; gap: 8px; color: #617b85; background: #f7fafb; border-top: 1px solid #dfe8eb; font-size: .33rem; }
.cut-assignment > footer > span,
.cut-next-material > footer > span { display: flex; align-items: center; gap: 5px; }
.cut-assignment > footer button,
.cut-next-material > footer button,
.cut-handoff > footer button { margin-left: auto; }

.cut-trace-context { background: #173845; border-color: #2c5260; }
.cut-trace-context > header { display: grid; min-height: 76px; padding: 11px 14px; grid-template-columns: .7fr .8fr 1.4fr auto; align-items: center; gap: 8px; color: #fff; border-bottom: 1px solid #2f5460; }
.cut-trace-context > header > div { display: grid; gap: 3px; }
.cut-trace-context small { color: #9fb8c0; font-size: .28rem; letter-spacing: .07em; }
.cut-trace-context > header strong { font-size: .51rem; }
.cut-trace-context > header em { display: flex; align-items: center; gap: 5px; color: #86dfc2; font-size: .3rem; font-weight: 850; }
.cut-trace-context > header em i { width: 7px; height: 7px; background: #32bd8e; border-radius: 50%; }
.cut-trace-context > section { display: grid; padding: 18px; grid-template-columns: 1fr 1.35fr; gap: 15px; background: #f6fafb; }
.cut-trace-context > section > div { display: grid; padding: 13px; align-content: center; gap: 4px; background: #fff; border: 1px solid #dbe5e8; border-radius: 6px; }
.cut-trace-context > section > div strong { color: #173f50; font-size: .63rem; }
.cut-trace-context > section > div span { color: #758b94; font-size: .33rem; }
.cut-trace-context > section > aside { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.cut-trace-context > section > aside > span { display: grid; padding: 9px; align-content: center; gap: 5px; background: #eaf1f3; border-radius: 5px; }
.cut-trace-context > section > aside > span.is-active { color: #fff; background: #27778e; }
.cut-trace-context > section > aside b { color: #244f5f; font-size: .45rem; }
.cut-trace-context > section > aside > span.is-active small,
.cut-trace-context > section > aside > span.is-active b { color: #fff; }
.cut-trace-context > footer { display: flex; min-height: 40px; padding: 8px 14px; align-items: center; gap: 6px; color: #c2d5da; font-size: .32rem; }
.cut-trace-context > footer .icon { color: #69d3b2; }

.cut-trace-layout,
.cut-destinations-layout,
.cut-release-traverse { display: grid; min-height: 295px; overflow: hidden; grid-template-columns: minmax(0, 1fr) 178px; background: #fff; border: 1px solid #d5e1e4; border-radius: 8px; box-shadow: 0 8px 24px rgba(33, 68, 80, .08); }
.cut-trace-layout > section > header,
.cut-destinations-layout > section > header,
.cut-release-traverse > section > header { display: flex; min-height: 51px; padding: 9px 12px; align-items: center; justify-content: space-between; gap: 8px; background: #173845; color: #fff; }
.cut-trace-layout > section > header > div { display: grid; gap: 3px; }
.cut-trace-layout > section > header small,
.cut-destinations-layout > section > header small,
.cut-release-traverse > section > header small { color: #acc2c8; font-size: .28rem; letter-spacing: .07em; }
.cut-trace-layout > section > header strong,
.cut-destinations-layout > section > header strong,
.cut-release-traverse > section > header strong { font-size: .45rem; }
.cut-trace-layout > section > header > span { color: #e5bd5c; font-size: .32rem; }
.cut-sheet { position: relative; display: grid; min-height: 205px; margin: 13px; padding: 5px; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); gap: 4px; background: #d4e8ec; border: 2px solid #3f8496; }
.cut-sheet__pane { position: relative; display: grid; min-width: 0; place-content: center; gap: 3px; color: #2b5e6d; background: rgba(255, 255, 255, .82); border: 1px solid #73afbd; text-align: center; }
.cut-sheet__pane.is-active { background: #fff1c9; border-color: #d39a25; box-shadow: inset 0 4px #dcaa38; }
.cut-sheet__pane b { font-size: .35rem; }
.cut-sheet__pane small { font-size: .26rem; }
.cut-sheet__origin { position: absolute; z-index: 2; bottom: -7px; left: -7px; width: 13px; height: 13px; background: #fff; border: 3px solid #d09322; border-radius: 50%; }
.cut-sheet__run { position: absolute; top: -8px; left: 10px; padding: 3px 7px; color: #fff; background: #d09322; border-radius: 100px; font-size: .27rem; }
.cut-trace-layout > aside { display: grid; padding: 14px; align-content: center; gap: 9px; background: #f6f9fa; border-left: 1px solid #dce6e9; }
.cut-trace-layout > aside > small { color: #547681; font-size: .3rem; font-weight: 850; letter-spacing: .08em; }
.cut-trace-layout > aside > span { display: flex; align-items: center; gap: 7px; color: #536f79; font-size: .32rem; }
.cut-trace-layout > aside > span i { width: 13px; height: 13px; background: #edf4f5; border: 1px solid #78acb9; }
.cut-trace-layout > aside > span i.is-active { background: #fff1c9; border-color: #d39a25; }
.cut-trace-layout > aside > span i.is-done { background: #dff2e9; border-color: #54a287; }
.cut-trace-layout > aside p { display: flex; margin: 5px 0 0; gap: 5px; color: #6d838c; font-size: .29rem; line-height: 1.35; }

.cut-destinations-layout { grid-template-columns: minmax(0, 1fr) 255px; }
.cut-destinations-layout > section { display: grid; grid-template-rows: auto 1fr auto; }
.cut-destinations-layout > section > header { display: grid; align-content: center; justify-content: stretch; }
.cut-sheet--mini { min-height: 147px; margin: 10px 13px; }
.cut-destinations-layout > section > footer { display: flex; min-height: 39px; padding: 7px 12px; align-items: center; gap: 12px; color: #70858d; background: #f5f9fa; font-size: .3rem; }
.cut-destinations-layout > section > footer b { color: #265b6e; }
.cut-destinations-layout > aside { display: grid; padding: 10px; align-content: start; gap: 5px; background: #eef3f4; border-left: 1px solid #d8e3e6; }
.cut-destinations-layout > aside > header { display: flex; min-height: 29px; align-items: center; justify-content: space-between; color: #4f707b; }
.cut-destinations-layout > aside > header small { font-size: .27rem; font-weight: 850; }
.cut-destinations-layout > aside > header b { font-size: .3rem; }
.cut-destination { display: grid; min-height: 43px; padding: 6px; grid-template-columns: 24px 1fr auto; align-items: center; gap: 6px; background: #fff; border: 1px solid #dae4e7; border-radius: 4px; }
.cut-destination.is-active { border-color: #d7aa4e; box-shadow: inset 3px 0 #d49a27; }
.cut-destination > span { display: grid; width: 22px; height: 22px; place-items: center; color: #fff; background: #37778b; border-radius: 50%; font-size: .25rem; font-weight: 850; }
.cut-destination > div { display: grid; min-width: 0; gap: 2px; }
.cut-destination strong { color: #2a5666; font-size: .31rem; }
.cut-destination small { overflow: hidden; color: #7c9098; font-size: .25rem; text-overflow: ellipsis; white-space: nowrap; }
.cut-destination > b { color: #1f5264; font-size: .37rem; }
.cut-destinations-layout > aside > footer { color: #758991; font-size: .27rem; text-align: center; }

.cut-release-traverse { grid-template-columns: minmax(0, 1fr) 205px; }
.cut-release-traverse > section { display: grid; grid-template-rows: auto 1fr auto; }
.cut-release-traverse > section > header { display: grid; align-content: center; }
.cut-release-traverse .cut-sheet { min-height: 152px; margin: 10px 12px; }
.cut-release-traverse .cut-sheet.is-ready .cut-sheet__pane { background: #e9f7f1; border-color: #56a58a; }
.cut-release-traverse > section > footer { display: flex; min-height: 38px; padding: 7px 11px; align-items: center; gap: 10px; color: #347761; background: #eef8f4; font-size: .29rem; }
.cut-release-traverse > section > footer span { display: flex; align-items: center; gap: 4px; }
.cut-release-traverse > aside { display: grid; padding: 16px; align-content: center; justify-items: center; gap: 7px; color: #fff; background: #173845; text-align: center; }
.cut-f10 { display: grid; width: 64px; height: 64px; place-items: center; color: #fff; background: #29a16f; border: 4px solid #d9f4e8; border-radius: 50%; box-shadow: 0 0 0 5px rgba(41, 161, 111, .18); }
.cut-f10 small { margin-bottom: -18px; color: #fff; font-size: .32rem; font-weight: 900; }
.cut-f10 .icon { width: 23px; height: 23px; }
.cut-release-traverse > aside > strong { margin-top: 3px; font-size: .58rem; }
.cut-release-traverse > aside > p { margin: 0; color: #bbced4; font-size: .3rem; line-height: 1.35; }
.cut-release-traverse > aside > div { display: flex; width: 100%; padding-top: 5px; justify-content: space-between; border-top: 1px solid #315663; font-size: .3rem; }
.cut-release-traverse > aside > em { display: flex; margin-top: 3px; align-items: center; gap: 4px; color: #f0cb71; font-size: .27rem; }

.cut-remote-qr > header { display: flex; min-height: 59px; padding: 10px 14px; align-items: center; justify-content: space-between; gap: 12px; color: #fff; background: #173845; border-bottom: 1px solid #315965; }
.cut-remote-qr > header > div { display: grid; gap: 3px; }
.cut-remote-qr > header small { color: #a9c1c8; font-size: .29rem; font-weight: 850; letter-spacing: .08em; }
.cut-remote-qr > header strong { font-size: .55rem; line-height: 1.2; }
.cut-remote-qr > header > em { display: flex; padding: 5px 8px; align-items: center; gap: 5px; color: #8fe0c5; background: rgba(48, 157, 125, .15); border: 1px solid rgba(112, 212, 180, .32); border-radius: 100px; font-size: .28rem; font-weight: 850; white-space: nowrap; }
.cut-remote-qr > header > em i { width: 7px; height: 7px; background: #43ce9e; border-radius: 50%; box-shadow: 0 0 0 3px rgba(67, 206, 158, .12); }
.cut-remote-qr__flow { display: grid; min-height: 194px; padding: 14px; grid-template-columns: 230px 76px minmax(0, 1fr); align-items: stretch; gap: 9px; background: #f4f8f9; }
.cut-qr-command { display: grid; padding: 10px; grid-template-columns: 102px minmax(0, 1fr); align-items: center; gap: 10px; background: #fff; border: 1px solid #d5e2e5; border-radius: 6px; box-shadow: 0 5px 15px rgba(30, 67, 79, .06); }
.cut-qr-command > img { display: block; width: 100%; aspect-ratio: 1; padding: 4px; background: #fff; border: 1px solid #dbe4e7; border-radius: 4px; }
.cut-qr-command > div { display: grid; min-width: 0; align-content: center; gap: 5px; }
.cut-qr-command span { color: #527580; font-size: .27rem; font-weight: 850; letter-spacing: .08em; }
.cut-qr-command strong { color: #173f50; font-size: .46rem; line-height: 1.2; }
.cut-qr-command b { width: fit-content; padding: 4px 7px; color: #fff; background: #29a16f; border-radius: 100px; font-size: .29rem; }
.cut-qr-command small { overflow: hidden; color: #85979d; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .2rem; text-overflow: ellipsis; white-space: nowrap; }
.cut-qr-reader { position: relative; z-index: 1; display: grid; place-content: center; justify-items: center; gap: 9px; }
.cut-qr-reader__beam { position: absolute; z-index: -1; top: calc(50% - 12px); right: -17px; left: -17px; height: 2px; background: repeating-linear-gradient(90deg, rgba(224, 75, 59, .18) 0 5px, rgba(224, 75, 59, .75) 5px 10px); box-shadow: 0 0 7px rgba(224, 75, 59, .42); }
.cut-qr-reader > span { position: relative; display: block; width: 45px; height: 30px; background: #214b5a; border: 3px solid #fff; border-radius: 5px 10px 8px 5px; box-shadow: 0 0 0 1px #9ab1b9, 0 7px 15px rgba(26, 60, 72, .18); transform: rotate(-10deg); }
.cut-qr-reader > span::before { position: absolute; top: 5px; right: -6px; width: 8px; height: 14px; background: #e0b04a; border-radius: 2px; content: ''; }
.cut-qr-reader > span::after { position: absolute; top: 22px; left: 9px; width: 14px; height: 28px; background: #173845; border: 3px solid #fff; border-top: 0; border-radius: 0 0 5px 5px; box-shadow: 0 1px 0 1px #9ab1b9; content: ''; transform: skew(-8deg); }
.cut-qr-reader > span > i { position: absolute; top: 7px; left: 8px; width: 16px; height: 7px; background: #6b8791; border-radius: 2px; }
.cut-qr-reader > small { margin-top: 22px; color: #69838d; font-size: .22rem; font-weight: 850; white-space: nowrap; }
.cut-qr-result { display: grid; overflow: hidden; grid-template-rows: auto 1fr auto; background: #fff; border: 1px solid #d5e1e4; border-radius: 6px; }
.cut-qr-result > header { display: flex; min-height: 48px; padding: 8px 10px; align-items: center; justify-content: space-between; gap: 8px; background: #e8f1f3; border-bottom: 1px solid #d7e3e6; }
.cut-qr-result > header > div { display: grid; gap: 2px; }
.cut-qr-result > header small { color: #66828c; font-size: .24rem; font-weight: 850; }
.cut-qr-result > header strong { color: #173f50; font-size: .4rem; }
.cut-qr-result > header em { color: #24745f; font-size: .25rem; font-weight: 900; }
.cut-qr-result > div { display: grid; padding: 9px; align-content: center; gap: 7px; }
.cut-qr-result__active { display: grid; padding: 6px 9px; grid-template-columns: 1fr auto auto; align-items: center; gap: 7px; background: #fff5d8; border-left: 3px solid #d7a02d; border-radius: 4px; }
.cut-qr-result__active small { color: #8a712f; font-size: .22rem; font-weight: 850; }
.cut-qr-result__active b { color: #654c10; font-size: .42rem; }
.cut-qr-result__active em { padding: 3px 5px; color: #7c611e; background: #ffe8a9; border-radius: 100px; font-size: .21rem; font-weight: 850; }
.cut-qr-result__toast { display: grid; padding: 7px 8px; grid-template-columns: 25px 1fr; align-items: center; gap: 7px; color: #fff; background: #1f805f; border-radius: 5px; box-shadow: 0 5px 12px rgba(31, 128, 95, .16); }
.cut-qr-result__toast > .icon { display: grid; width: 23px; height: 23px; place-items: center; background: rgba(255, 255, 255, .15); border-radius: 50%; }
.cut-qr-result__toast > span { display: grid; gap: 2px; }
.cut-qr-result__toast small { color: #bcebd9; font-size: .21rem; font-weight: 850; letter-spacing: .05em; }
.cut-qr-result__toast strong { font-size: .31rem; }
.cut-qr-result > footer { display: flex; min-height: 32px; padding: 6px 9px; align-items: center; justify-content: space-between; gap: 7px; color: #68818a; background: #f7fafb; border-top: 1px solid #e0e8ea; font-size: .24rem; }
.cut-qr-result > footer b { color: #205f70; }
.cut-remote-qr > footer { display: flex; min-height: 47px; padding: 8px 13px; align-items: center; gap: 7px; color: #54727c; background: #fff; border-top: 1px solid #dde7ea; font-size: .28rem; }
.cut-remote-qr > footer > span { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.cut-remote-qr > footer > span b { display: grid; width: 21px; height: 21px; place-items: center; color: #fff; background: #2d7589; border-radius: 50%; font-size: .22rem; }
.cut-remote-qr > footer > i { display: flex; color: #89a1a9; }
.cut-remote-qr > footer > em { display: flex; margin-left: auto; align-items: center; gap: 4px; color: #27715f; font-size: .24rem; font-weight: 750; }

.cut-multi-wave > div { display: grid; padding: 13px; grid-template-columns: 1fr 180px; gap: 11px; }
.cut-multi-sheet { position: relative; display: grid; min-height: 175px; padding: 5px 5px 26px; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(2, 1fr); gap: 4px; background: #d7e8ec; border: 2px solid #367c91; }
.cut-multi-sheet span { display: grid; place-content: center; gap: 3px; color: #225a6d; background: #eef9fb; border: 1px solid #6ea9b8; text-align: center; }
.cut-multi-sheet span.is-wave-two { color: #785916; background: #fff3d5; border-color: #d2a33c; }
.cut-multi-sheet span b { font-size: .31rem; }
.cut-multi-sheet span small { font-size: .22rem; }
.cut-multi-sheet > i { position: absolute; right: 5px; bottom: 5px; left: 5px; display: grid; height: 17px; place-items: center; color: #fff; background: linear-gradient(90deg, #347b91 60%, #d09b2d 60%); font-size: .25rem; font-weight: 850; }
.cut-multi-wave > div > aside { display: grid; align-content: center; gap: 7px; }
.cut-multi-wave > div > aside article { display: grid; padding: 9px; gap: 3px; background: #eaf4f6; border-left: 3px solid #377f93; border-radius: 4px; }
.cut-multi-wave > div > aside article.is-wave-two { background: #fff5df; border-color: #d39c2c; }
.cut-multi-wave > div > aside span { color: #537986; font-size: .27rem; font-weight: 850; }
.cut-multi-wave > div > aside strong { color: #234f5f; font-size: .44rem; }
.cut-multi-wave > div > aside small { color: #7b9199; font-size: .28rem; }
.cut-multi-wave > div > aside p { display: flex; margin: 3px 0 0; gap: 4px; color: #657f88; font-size: .28rem; line-height: 1.35; }

.cut-next-material > header { display: grid; justify-content: stretch; }
.cut-next-material > div { display: grid; padding: 13px 16px; gap: 7px; }
.cut-next-material > div article { display: grid; min-height: 55px; padding: 8px 10px; grid-template-columns: 30px 1fr auto; align-items: center; gap: 8px; background: #f8fafb; border: 1px solid #dce6e9; border-radius: 5px; }
.cut-next-material > div article.is-done { opacity: .68; }
.cut-next-material > div article.is-next { background: #eef8f4; border-color: #9acdbd; box-shadow: inset 3px 0 #26846e; }
.cut-next-material > div article > span { display: grid; width: 27px; height: 27px; place-items: center; color: #4a707d; background: #e6eef1; border-radius: 50%; font-size: .3rem; font-weight: 850; }
.cut-next-material > div article.is-done > span { color: #fff; background: #27846e; }
.cut-next-material > div article > div { display: grid; gap: 3px; }
.cut-next-material > div strong { color: #2b5666; font-size: .39rem; }
.cut-next-material > div small { color: #7b9098; font-size: .29rem; }
.cut-next-material > div em { padding: 4px 7px; color: #657c85; background: #e9eff1; border-radius: 100px; font-size: .26rem; font-weight: 850; }
.cut-next-material > div article.is-next em { color: #20715d; background: #d9efe7; }

.cut-modal-scene__background { grid-template-columns: repeat(3, 1fr); }
.cut-modal-scene > section > div { display: grid; width: 100%; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.cut-modal-scene > section > div > span { display: grid; padding: 7px; gap: 2px; color: #456873; background: #f1f5f6; border-radius: 4px; text-align: left; }
.cut-modal-scene > section > div b { font-size: .34rem; }
.cut-modal-scene > section > div small { color: #7d9198; font-size: .26rem; }
.cut-modal-scene > section > footer { display: flex; width: 100%; margin-top: 3px; justify-content: flex-end; gap: 6px; }
.cut-modal-scene > section > footer button { color: #526d77; background: #fff; border: 1px solid #cbdadd; }
.cut-modal-scene > section > footer button.is-primary { color: #fff; background: #27738c; border-color: #27738c; }
.cut-modal-scene--complete > section > span { background: #25846e; }
.cut-modal-scene--complete > section > small { color: #28725f; }

.cut-handoff > header { display: grid; grid-template-columns: 39px 1fr auto; }
.cut-handoff > header > span { display: grid; width: 36px; height: 36px; place-items: center; color: #fff; background: #25846e; border-radius: 50%; }
.cut-handoff__metrics { display: grid; padding: 15px; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.cut-handoff__metrics article { display: grid; min-height: 76px; padding: 9px; place-content: center; gap: 3px; background: #f3f7f8; border: 1px solid #e0e8eb; border-radius: 5px; text-align: center; }
.cut-handoff__metrics strong { color: #17495b; font-family: Georgia, serif; font-size: .85rem; }
.cut-handoff__metrics span { color: #718891; font-size: .28rem; }
.cut-handoff__audit { display: grid; margin: 0 15px 15px; padding: 11px; grid-template-columns: 28px 1fr auto; align-items: center; gap: 8px; color: #fff; background: #173f50; border-radius: 5px; }
.cut-handoff__audit > span { color: #e7bb55; }
.cut-handoff__audit > div { display: grid; gap: 2px; }
.cut-handoff__audit small { color: #a9c0c7; font-size: .27rem; }
.cut-handoff__audit strong { font-size: .36rem; }
.cut-handoff__audit em { display: flex; align-items: center; gap: 4px; color: #83dbbe; font-size: .28rem; }
.cut-handoff > footer > span { line-height: 1.35; }

.mock-toolbar--special-execution { --logo-height: 19px; }
.mock-special-brand { min-width: 185px; }
.mock-special-brand > i { color: #9bb0b7; font-size: .42rem; font-style: normal; font-weight: 800; }
.mock-special-brand .product-logo + .product-logo { margin-left: -3px; }

.mock-content--special-execution {
  min-height: 373px;
  padding: 24px 28px 49px;
  background-color: #edf2f3;
  background-image: linear-gradient(rgba(29, 70, 84, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(29, 70, 84, .035) 1px, transparent 1px);
}

.special-execution { width: min(790px, 100%); color: #526d77; }
.special-execution *, .special-execution *::before, .special-execution *::after { box-sizing: border-box; }
.special-execution small, .special-execution em, .special-execution i { font-style: normal; }
.special-execution .icon { width: 13px; height: 13px; flex: 0 0 auto; }
.special-card { overflow: hidden; background: #fff; border: 1px solid #d6e2e6; border-radius: 9px; box-shadow: 0 9px 26px rgba(27, 65, 78, .09); }
.special-card > header { display: flex; min-height: 57px; padding: 10px 14px; align-items: center; justify-content: space-between; gap: 12px; background: #f7fafb; border-bottom: 1px solid #dde7ea; }
.special-card > header > div { display: grid; min-width: 0; gap: 3px; }
.special-card > header small { color: #557882; font-size: .31rem; font-weight: 900; letter-spacing: .08em; }
.special-card > header strong { color: #173f50; font-size: .58rem; line-height: 1.2; }
.special-card > header > span,
.special-card > header > em { padding: 5px 8px; color: #276d61; background: #e7f5f0; border: 1px solid #cae8de; border-radius: 100px; font-size: .29rem; font-weight: 900; white-space: nowrap; }
.special-execution button { display: flex; min-height: 31px; padding: 7px 10px; align-items: center; justify-content: center; gap: 6px; color: #fff; background: #23788e; border: 0; border-radius: 5px; font-size: .33rem; font-weight: 850; }
.special-execution kbd { padding: 4px 6px; color: #1d6e4b; background: #fff; border: 0; border-radius: 4px; box-shadow: none; font-family: inherit; font-size: .29rem; font-weight: 950; }

.special-muntin-diagram { display: block; width: 100%; height: 100%; min-height: 0; }
.special-muntin-diagram > rect:first-child { fill: #e3f0f4; stroke: #6c95a5; stroke-width: 3; }
.special-muntin-diagram__glass { fill: #fbfdfe; stroke: #c69729; stroke-width: 7; }
.special-muntin-diagram__bar { stroke: #9b7420; stroke-width: 7; stroke-linecap: square; }
.special-muntin-diagram__bar.is-active { stroke: #e64b3f; stroke-width: 13; filter: drop-shadow(0 0 4px rgba(230, 75, 63, .48)); }
.special-muntin-diagram__cross { fill: #806017; stroke: #fff; stroke-width: 2; }
.special-muntin-diagram__cross.is-active { fill: #e64b3f; stroke: #ffdc6a; stroke-width: 4; }
.special-muntin-diagram text { fill: #fff; font-size: 9px; font-weight: 900; }
.special-muntin-diagram__terminal { fill: #785914; stroke: #fff; stroke-width: 2; }
.special-muntin-diagram__terminal.is-active { fill: #e64b3f; stroke: #ffdc6a; stroke-width: 4; }

.special-overview__flow { position: relative; display: grid; padding: 19px 15px; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; }
.special-overview__flow::before { position: absolute; top: 39px; right: 43px; left: 43px; height: 2px; background: #d2e0e4; content: ''; }
.special-overview__flow article { position: relative; z-index: 1; display: grid; min-height: 111px; padding: 8px 5px; align-content: start; justify-items: center; gap: 7px; text-align: center; }
.special-overview__flow article > span { display: grid; width: 32px; height: 32px; place-items: center; color: #2d6d7f; background: #e8f2f4; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #b7cfd6; font-size: .34rem; font-weight: 900; }
.special-overview__flow article.is-final > span { color: #fff; background: #25846e; box-shadow: 0 0 0 1px #25846e; }
.special-overview__flow article strong { color: #294f5d; font-size: .38rem; }
.special-overview__flow article small { color: #80949c; font-size: .28rem; line-height: 1.3; }
.special-overview > footer { display: flex; min-height: 44px; padding: 8px 14px; align-items: center; gap: 14px; color: #708891; background: #f7fafb; border-top: 1px solid #e0e8eb; font-size: .33rem; }
.special-overview > footer b { color: #214e5f; }
.special-overview > footer strong { margin-left: auto; color: #8a6519; }

.special-queue > header > em { color: #236f5c; background: #e5f5ef; }
.special-queue__filters { display: grid; padding: 12px 14px; grid-template-columns: 1fr 1fr auto; align-items: end; gap: 8px; background: #edf4f6; }
.special-queue__filters > span { display: grid; min-height: 43px; padding: 7px 9px; align-content: center; gap: 3px; background: #fff; border: 1px solid #d4e1e5; border-radius: 5px; }
.special-queue__filters small { color: #81939a; font-size: .27rem; font-weight: 850; }
.special-queue__filters strong { color: #234f5f; font-size: .39rem; }
.special-queue__results > div { display: grid; min-height: 47px; padding: 7px 13px; grid-template-columns: 1.1fr .55fr .8fr .8fr 1fr; align-items: center; gap: 7px; border-top: 1px solid #e2eaed; font-size: .33rem; }
.special-queue__results > div.is-head { min-height: 28px; color: #768b94; background: #f8fafb; font-size: .27rem; font-weight: 850; }
.special-queue__results > div.is-selected { background: #eef8f4; box-shadow: inset 4px 0 #25846e; }
.special-queue__results strong { color: #245466; }
.special-queue__results b { color: #4b6974; }
.special-queue__results em { width: fit-content; padding: 4px 6px; color: #60747c; background: #edf1f3; border-radius: 100px; font-size: .25rem; font-weight: 850; }
.special-queue__results .is-selected em { color: #24705d; background: #dcefe8; }
.special-queue > footer { display: flex; min-height: 42px; padding: 8px 14px; align-items: center; color: #5b7882; background: #f7fafb; border-top: 1px solid #e0e8eb; font-size: .31rem; }
.special-queue > footer span { display: flex; align-items: center; gap: 5px; color: #24705d; }
.special-queue > footer strong { margin-left: auto; color: #2c5d6e; }

.special-launch { display: grid; min-height: 292px; grid-template-columns: 1.3fr 38px .85fr; align-items: stretch; }
.special-launch > i { display: grid; place-items: center; color: #28839a; }
.special-launch > section { display: grid; grid-template-rows: auto 1fr auto; }
.special-launch > section > div { display: grid; padding: 18px; grid-template-columns: repeat(2, 1fr); align-content: center; gap: 8px 15px; }
.special-launch > section > div span { color: #7c9098; font-size: .3rem; }
.special-launch > section > div b { color: #245264; font-size: .48rem; }
.special-launch > section > footer { display: flex; min-height: 43px; padding: 8px 13px; align-items: center; gap: 5px; color: #2a765f; background: #eef8f4; font-size: .31rem; }
.special-launch > aside { display: grid; padding: 19px; align-content: center; justify-items: center; gap: 7px; color: #fff; background: #173845; border-radius: 9px; text-align: center; box-shadow: 0 9px 26px rgba(27, 65, 78, .16); }
.special-launch > aside > span { display: grid; width: 92px; min-height: 37px; place-items: center; background: #fff; border-radius: 5px; }
.special-launch > aside .product-logo { width: 80px; }
.special-launch > aside small { margin-top: 4px; color: #e6bd60; font-size: .29rem; font-weight: 900; letter-spacing: .08em; }
.special-launch > aside strong { font-size: .55rem; line-height: 1.25; }
.special-launch > aside p { margin: 0; color: #b7cbd1; font-size: .3rem; line-height: 1.4; }
.special-launch > aside button { margin-top: 4px; background: #29976d; }

.special-context > header { color: #fff; background: #173845; border-color: #315663; }
.special-context > header small { color: #a9c0c7; }
.special-context > header strong { display: flex; align-items: baseline; gap: 4px; color: #fff; font-size: .75rem; }
.special-context > header strong span { color: #9eb6be; font-size: .28rem; }
.special-context > header strong em { color: #e3b74f; font-size: .64rem; font-weight: 900; }
.special-context > header > b { color: #86ddc0; font-size: .28rem; }
.special-context__progress { display: grid; min-height: 148px; grid-template-columns: 1.3fr 110px 1fr; }
.special-context__progress > section { display: grid; padding: 18px; align-content: center; gap: 4px; color: #fff; background: linear-gradient(120deg, #177f90, #22a0ae); }
.special-context__progress > section small { color: #cce9ed; }
.special-context__progress > section strong { font-size: .65rem; }
.special-context__progress > section span { color: #d9eef1; font-size: .33rem; }
.special-context__progress > article { display: grid; padding: 12px; place-content: center; justify-items: center; color: #fff; background: #168694; border-left: 1px solid rgba(255,255,255,.25); }
.special-context__progress > article small { color: #d3ecef; font-size: .27rem; font-weight: 850; }
.special-context__progress > article strong { margin-top: 5px; font-size: 1.25rem; line-height: 1; }
.special-context__progress > article em { color: #d4ecef; font-size: .48rem; }
.special-context__progress > aside { display: grid; padding: 18px; align-content: center; gap: 6px; background: #fff; }
.special-context__progress > aside small { color: #687f88; font-size: .28rem; font-weight: 850; }
.special-context__progress > aside p { height: 7px; margin: 0; overflow: hidden; background: #e5ecee; border-radius: 10px; }
.special-context__progress > aside p i { display: block; height: 100%; background: #39ad6b; }
.special-context__progress > aside span { color: #6f858e; font-size: .29rem; }
.special-context > footer { display: grid; grid-template-columns: repeat(4, 1fr); background: #f6f9fa; border-top: 1px solid #dce6e9; }
.special-context > footer > span { display: grid; min-height: 55px; padding: 9px 11px; align-content: center; gap: 3px; border-right: 1px solid #dce6e9; }
.special-context > footer > span:last-child { border-right: 0; }
.special-context > footer small { color: #7c9098; font-size: .25rem; font-weight: 850; }
.special-context > footer strong { color: #2a5868; font-size: .34rem; }

.special-preparation > header { color: #fff; background: linear-gradient(110deg, #214c59, #177f90); }
.special-preparation > header small { color: #f0c65f; }
.special-preparation > header strong { color: #fff; font-size: .8rem; }
.special-preparation > header > div > span { color: #d4e8ec; font-size: .31rem; font-weight: 850; }
.special-preparation > header > aside { display: grid; min-width: 145px; padding-left: 17px; justify-items: center; gap: 2px; border-left: 1px solid rgba(255,255,255,.28); }
.special-preparation > header > aside small { color: #b9d7dc; }
.special-preparation > header > aside strong { font-size: 1.3rem; }
.special-preparation > header > aside span { color: #d6e8eb; font-size: .27rem; }
.special-preparation__context { display: grid; grid-template-columns: repeat(4, 1fr); background: #f2f6f7; border-bottom: 1px solid #dce6e9; }
.special-preparation__context > span { display: grid; min-height: 43px; padding: 7px 10px; align-content: center; gap: 2px; border-right: 1px solid #dce6e9; }
.special-preparation__context > span:last-child { border-right: 0; }
.special-preparation__context small { color: #7a8f97; font-size: .24rem; font-weight: 850; }
.special-preparation__context strong { color: #285465; font-size: .32rem; }
.special-preparation__body { display: grid; min-height: 136px; padding: 10px 12px; grid-template-columns: 1fr 1fr; gap: 10px; }
.special-preparation__body > section { display: grid; align-content: center; gap: 5px; }
.special-preparation__body > section > small { color: #537884; font-size: .27rem; font-weight: 900; }
.special-preparation__body > section > span { display: grid; min-height: 25px; padding: 4px 7px; grid-template-columns: 31px 1fr 14px; align-items: center; gap: 6px; background: #f1f6f7; border-radius: 4px; }
.special-preparation__body > section b { color: #17768a; font-size: .4rem; }
.special-preparation__body > section strong { color: #4e6973; font-size: .3rem; }
.special-preparation__body > section .icon { color: #2f9a68; }
.special-preparation__body > article { position: relative; display: grid; min-height: 130px; grid-template-rows: 1fr auto; background: #f8fbfc; border: 1px solid #dce6e9; border-radius: 5px; }
.special-preparation__body > article svg { max-height: 110px; }
.special-preparation__body > article footer { display: flex; min-height: 25px; padding: 4px 8px; align-items: center; justify-content: space-between; color: #687f88; background: #eff4f5; font-size: .26rem; }
.special-preparation > footer { display: flex; min-height: 43px; padding: 7px 12px; align-items: center; gap: 5px; color: #5f7781; background: #173c4f; font-size: .3rem; }
.special-preparation > footer > span { display: flex; align-items: center; gap: 5px; color: #d2e3e7; }
.special-preparation > footer button { margin-left: auto; background: #29965e; }

.special-bom > div { display: grid; padding: 11px; grid-template-columns: 1.15fr .85fr; gap: 10px; }
.special-bom-table { overflow: hidden; background: #fff; border: 1px solid #d8e4e7; border-radius: 5px; }
.special-bom-table > div { display: grid; min-height: 37px; padding: 6px 8px; grid-template-columns: .85fr 1.5fr .45fr .45fr; align-items: center; gap: 6px; border-bottom: 1px solid #e4ebed; font-size: .29rem; }
.special-bom-table > div.is-head { min-height: 27px; color: #d8e6e9; background: #173c4f; font-size: .23rem; font-weight: 850; }
.special-bom-table b { color: #17778b; font-size: .26rem; }
.special-bom-table strong { color: #3f5d68; font-size: .3rem; }
.special-bom-table em { color: #147589; font-size: .4rem; font-weight: 900; text-align: center; }
.special-bom-table > div > span { text-align: center; }
.special-bom-table > footer { display: flex; min-height: 35px; padding: 6px 9px; align-items: center; justify-content: space-between; color: #27745f; background: #e9f6f0; font-size: .29rem; font-weight: 850; }
.special-bom-table > footer strong { color: #21745b; font-size: .58rem; }
.special-bom > div > article { display: grid; overflow: hidden; grid-template-rows: auto 1fr auto; background: #f8fbfc; border: 1px solid #d7e3e6; border-radius: 5px; }
.special-bom > div > article > header { display: grid; padding: 7px 9px; gap: 2px; color: #fff; background: #264752; }
.special-bom > div > article > header small { color: #b9ccd2; font-size: .25rem; font-weight: 850; }
.special-bom > div > article > header strong { font-size: .34rem; }
.special-bom > div > article svg { max-height: 176px; }
.special-bom > div > article > footer { display: grid; min-height: 40px; padding: 6px 8px; grid-template-columns: 1.3fr 1fr; gap: 5px; background: #f0f5f6; border-top: 1px solid #dce6e9; }
.special-bom > div > article > footer span { color: #768b93; font-size: .23rem; }
.special-bom > div > article > footer b { display: block; margin-top: 2px; color: #2e5968; font-size: .28rem; }

.special-pdf { display: grid; min-height: 302px; grid-template-columns: minmax(0, 1fr) 150px; gap: 10px; }
.special-pdf__browser { overflow: hidden; background: #dfe7e9; border: 1px solid #cfdadd; border-radius: 8px; box-shadow: 0 9px 26px rgba(27,65,78,.09); }
.special-pdf__browser > header { display: flex; min-height: 28px; padding: 6px 9px; align-items: center; gap: 5px; background: #2d3d44; }
.special-pdf__browser > header i { width: 6px; height: 6px; background: #d66e68; border-radius: 50%; }
.special-pdf__browser > header i:nth-child(2) { background: #d9b85d; }
.special-pdf__browser > header i:nth-child(3) { background: #66b87d; }
.special-pdf__browser > header span { overflow: hidden; margin-left: 5px; color: #c5d1d5; font-size: .24rem; text-overflow: ellipsis; white-space: nowrap; }
.special-pdf__browser > main { width: calc(100% - 40px); min-height: 268px; margin: 8px auto 0; padding: 10px 12px; background: #fff; box-shadow: 0 2px 8px rgba(29,57,68,.14); }
.special-pdf__brands { display: grid; grid-template-columns: 80px 1fr 93px; align-items: center; gap: 7px; border-bottom: 2px solid #c69a36; padding-bottom: 6px; }
.special-pdf__brands .product-logo { width: 100%; }
.special-pdf__brands > div { display: grid; justify-items: center; gap: 1px; text-align: center; }
.special-pdf__brands small { color: #8c6a1b; font-size: .21rem; font-weight: 900; }
.special-pdf__brands strong { color: #173c4f; font-size: .47rem; }
.special-pdf__brands span { color: #28778a; font-size: .22rem; }
.special-pdf__browser main > section { display: grid; margin-top: 6px; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.special-pdf__browser main > section > span { display: grid; padding: 4px; gap: 2px; background: #f1f5f6; border: 1px solid #e0e7e9; }
.special-pdf__browser main > section small { color: #7c8e95; font-size: .18rem; }
.special-pdf__browser main > section strong { color: #244e5d; font-size: .28rem; }
.special-pdf__content { display: grid; margin-top: 7px; grid-template-columns: .75fr 1.25fr; gap: 6px; }
.special-pdf__content > article { min-height: 144px; background: #f6fafb; border: 1px solid #e0e8ea; }
.special-pdf__content > article svg { max-height: 142px; }
.special-pdf__content .special-bom-table > div { min-height: 23px; padding: 3px 5px; font-size: .19rem; }
.special-pdf__content .special-bom-table > div.is-head { min-height: 20px; font-size: .17rem; }
.special-pdf__content .special-bom-table b,
.special-pdf__content .special-bom-table strong { font-size: .19rem; }
.special-pdf__content .special-bom-table em { font-size: .26rem; }
.special-pdf__content .special-bom-table > footer { min-height: 25px; padding: 3px 5px; font-size: .2rem; }
.special-pdf__content .special-bom-table > footer strong { font-size: .35rem; }
.special-pdf > aside { display: grid; padding: 18px; place-content: center; justify-items: center; gap: 6px; color: #fff; background: #173c4f; border-radius: 8px; text-align: center; }
.special-pdf > aside > span { display: grid; width: 42px; height: 42px; place-items: center; color: #fff; background: #27915f; border-radius: 50%; }
.special-pdf > aside strong { font-size: .51rem; }
.special-pdf > aside small { color: #b8cdd3; font-size: .29rem; line-height: 1.4; }

.special-start { display: grid; min-height: 297px; grid-template-columns: 1fr 125px .9fr; align-items: stretch; gap: 9px; }
.special-start > section,
.special-start > article { display: grid; padding: 13px; align-content: center; justify-items: center; gap: 5px; background: #fff; border: 1px solid #d5e1e5; border-radius: 8px; box-shadow: 0 8px 22px rgba(27,65,78,.07); text-align: center; }
.special-start > section small,
.special-start > article small { color: #537985; font-size: .27rem; font-weight: 900; }
.special-start > section strong { color: #17495a; font-size: .57rem; }
.special-start > section > span { display: flex; align-items: center; gap: 4px; color: #27745e; font-size: .28rem; }
.special-start > section svg { height: 154px; }
.special-start > div { display: grid; place-content: center; justify-items: center; gap: 9px; }
.special-start > div button { flex-direction: column; background: #27945e; }
.special-start > div > i { color: #2a8298; }
.special-start > div > small { color: #71868e; font-size: .25rem; text-align: center; }
.special-start > article > header { display: grid; justify-items: center; gap: 2px; }
.special-start > article > header strong { color: #178094; font-size: .9rem; }
.special-start > article > div { display: grid; width: 100%; padding: 15px; gap: 5px; color: #785a16; background: #fff4d6; border-left: 4px solid #d29c28; text-align: left; }
.special-start > article > div span { font-size: .25rem; font-weight: 850; }
.special-start > article > div b { font-size: .45rem; }
.special-start > article > div em { font-size: .28rem; }
.special-start > article > footer { color: #26745e; font-size: .28rem; }

.special-component__body { display: grid; min-height: 238px; grid-template-columns: .9fr 1.1fr; }
.special-component__body > section { display: grid; grid-template-rows: auto 1fr auto; border-right: 1px solid #dce6e9; }
.special-component__body > section > header { display: grid; min-height: 62px; padding: 9px 11px; grid-template-columns: 34px 1fr auto; align-items: center; gap: 8px; color: #fff; background: #264752; }
.special-component__body > section > header > b { display: grid; width: 32px; height: 32px; place-items: center; background: #d19e30; border-radius: 50%; font-size: .42rem; }
.special-component__body > section > header > div { display: grid; gap: 2px; }
.special-component__body > section > header small { color: #bfd1d6; }
.special-component__body > section > header strong { color: #fff; font-size: .42rem; }
.special-component__body > section > header aside { display: grid; padding-left: 9px; justify-items: end; gap: 2px; border-left: 1px solid #4a6872; }
.special-component__body > section > header aside small { font-size: .21rem; }
.special-component__body > section > header aside strong { color: #f2c45e; font-size: .65rem; }
.special-component__body > section > header aside em { color: #d4e1e5; font-size: .36rem; }
.special-component__body > section > div { display: grid; padding: 10px; align-content: center; gap: 6px; }
.special-component__body > section > div > span { display: grid; padding: 7px 8px; gap: 2px; background: #eef5f7; border-left: 4px solid #258b9b; }
.special-component__body > section > div small { color: #71868e; font-size: .23rem; }
.special-component__body > section > div strong { color: #244d5c; font-size: .39rem; }
.special-component__body > section > footer { padding: 8px 10px; color: #805f18; background: #fff4d8; font-size: .28rem; font-weight: 850; }
.special-component__body > article { display: grid; grid-template-rows: 1fr auto; background: #f8fbfc; }
.special-component__body > article svg { max-height: 186px; }
.special-component__body > article > footer { display: grid; padding: 6px; gap: 3px; background: #f1f5f6; border-top: 1px solid #dce6e9; }
.special-component__body > article > footer span { padding: 3px 6px; color: #71868e; font-size: .23rem; }
.special-component__body > article > footer span.is-active { color: #7f5e16; background: #fff0c8; border-radius: 3px; font-weight: 850; }

.special-confirmation-mode { overflow: hidden; background: #fff; border: 1px solid #d6e2e6; border-radius: 9px; box-shadow: 0 9px 26px rgba(27,65,78,.09); }
.special-confirmation-mode > header { display: flex; min-height: 51px; padding: 9px 13px; align-items: center; justify-content: space-between; background: #f7fafb; border-bottom: 1px solid #dce6e9; }
.special-confirmation-mode > header > div { display: grid; gap: 2px; }
.special-confirmation-mode > header small { color: #64808a; font-size: .27rem; font-weight: 850; }
.special-confirmation-mode > header strong { color: #244e5e; font-size: .42rem; }
.special-confirmation-mode > header > span { color: #25758a; font-size: .31rem; font-weight: 900; }
.special-confirmation-mode__body { display: grid; min-height: 210px; grid-template-columns: 1fr 210px; }
.special-confirmation-mode__body > section { display: grid; padding: 11px 15px; grid-template-columns: 1fr 175px; align-items: center; gap: 5px 12px; }
.special-confirmation-mode__body > section > small { color: #8b681b; font-size: .27rem; font-weight: 900; }
.special-confirmation-mode__body > section > strong { color: #214d5d; font-size: .55rem; }
.special-confirmation-mode__body > section > span { color: #6e858d; font-size: .29rem; }
.special-confirmation-mode__body > section svg { grid-column: 2; grid-row: 1 / 4; height: 180px; }
.special-confirmation-mode__body > aside { display: grid; padding: 17px; align-content: center; justify-items: center; gap: 7px; color: #fff; background: #173c4f; text-align: center; }
.special-confirmation-mode__body > aside > span { color: #b9ccd2; font-size: .27rem; font-weight: 900; letter-spacing: .09em; }
.special-unit-switch { position: relative; display: flex; width: 72px; height: 32px; padding: 0 8px 0 31px; align-items: center; justify-content: flex-end; color: #fff; background: #687b83; border: 1px solid #87999f; border-radius: 18px; }
.special-unit-switch i { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; background: #fff; border-radius: 50%; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.special-unit-switch b { font-size: .33rem; }
.special-unit-switch.is-on { padding: 0 31px 0 9px; justify-content: flex-start; background: #29935e; border-color: #65bd87; }
.special-unit-switch.is-on i { right: 3px; left: auto; }
.special-confirmation-mode__body > aside p { margin: 0; color: #bdcfd4; font-size: .29rem; line-height: 1.4; }
.special-confirmation-mode__body > aside button { margin-top: 2px; background: #29945e; }
.special-confirmation-mode > footer { display: flex; min-height: 38px; padding: 7px 12px; align-items: center; justify-content: space-between; color: #2b745f; background: #edf7f2; font-size: .29rem; }
.special-confirmation-mode > footer span { display: flex; align-items: center; gap: 4px; }

.special-qr > header { color: #fff; background: #173845; border-bottom-color: #315965; }
.special-qr > header small { color: #a9c1c8; }
.special-qr > header strong { color: #fff; }
.special-qr > header > em { display: flex; align-items: center; gap: 5px; color: #8fe0c5; background: rgba(48,157,125,.15); border-color: rgba(112,212,180,.32); }
.special-qr > header > em i { width: 7px; height: 7px; background: #43ce9e; border-radius: 50%; }
.special-qr > div { display: grid; min-height: 196px; padding: 13px; grid-template-columns: 235px 65px 1fr; align-items: center; gap: 9px; background: #f4f8f9; }
.special-qr > div > section { display: grid; padding: 10px; grid-template-columns: 105px 1fr; align-items: center; gap: 10px; background: #fff; border: 1px solid #d5e2e5; border-radius: 6px; }
.special-qr > div > section img { display: block; width: 100%; padding: 4px; border: 1px solid #dbe4e7; border-radius: 4px; }
.special-qr > div > section > span { display: grid; gap: 4px; }
.special-qr > div > section small { color: #537681; font-size: .24rem; font-weight: 850; }
.special-qr > div > section strong { color: #173f50; font-size: .39rem; }
.special-qr > div > section b { width: fit-content; padding: 4px 6px; color: #fff; background: #29965e; border-radius: 100px; font-size: .25rem; }
.special-qr__beam { position: relative; display: block; height: 2px; background: repeating-linear-gradient(90deg, rgba(224,75,59,.2) 0 5px, rgba(224,75,59,.8) 5px 10px); }
.special-qr__beam::before { position: absolute; top: -16px; left: 14px; width: 38px; height: 27px; background: #214b5a; border: 3px solid #fff; border-radius: 5px 9px 7px 5px; box-shadow: 0 0 0 1px #9ab1b9; content: ''; transform: rotate(-10deg); }
.special-qr__beam::after { position: absolute; top: 5px; left: 26px; width: 13px; height: 24px; background: #173845; border: 3px solid #fff; border-top: 0; border-radius: 0 0 5px 5px; content: ''; transform: skew(-8deg); }
.special-qr > div > article { display: grid; overflow: hidden; background: #fff; border: 1px solid #d5e1e4; border-radius: 6px; }
.special-qr > div > article > header { display: flex; min-height: 37px; padding: 7px 9px; align-items: center; justify-content: space-between; background: #e8f1f3; }
.special-qr > div > article > header span { color: #647f89; font-size: .25rem; }
.special-qr > div > article > header b { padding: 3px 6px; color: #fff; background: #28915f; border-radius: 100px; font-size: .24rem; }
.special-qr > div > article > small,
.special-qr > div > article > strong { margin: 0 9px; }
.special-qr > div > article > small { margin-top: 10px; color: #7b9098; font-size: .24rem; }
.special-qr > div > article > strong { margin-top: 3px; color: #244e5d; font-size: .43rem; }
.special-qr > div > article > em { display: flex; margin: 9px; padding: 8px; align-items: center; gap: 5px; color: #fff; background: #21805f; border-radius: 4px; font-size: .27rem; font-weight: 850; }
.special-qr > div > article > footer { padding: 6px 9px; color: #39705e; background: #edf7f2; font-size: .27rem; }
.special-qr > footer { display: flex; min-height: 44px; padding: 8px 12px; align-items: center; gap: 7px; color: #58747e; background: #fff; border-top: 1px solid #dce6e9; font-size: .27rem; }
.special-qr > footer > span { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.special-qr > footer > span b { display: grid; width: 21px; height: 21px; place-items: center; color: #fff; background: #2d7589; border-radius: 50%; font-size: .22rem; }
.special-qr > footer > i { color: #89a1a9; }
.special-qr > footer > em { display: flex; margin-left: auto; align-items: center; gap: 4px; color: #26715d; font-size: .24rem; font-weight: 750; }

.special-next-design > div { display: grid; min-height: 197px; padding: 18px; grid-template-columns: 1fr 46px 1fr; align-items: center; gap: 8px; }
.special-next-design > div > i { display: grid; place-items: center; color: #2b8197; }
.special-next-design > div > article { display: grid; min-height: 153px; padding: 13px; align-content: center; gap: 5px; background: #f3f7f8; border: 1px solid #dbe5e8; border-radius: 6px; }
.special-next-design > div > article > span { display: grid; width: 31px; height: 31px; place-items: center; color: #fff; background: #287c91; border-radius: 50%; font-size: .35rem; font-weight: 900; }
.special-next-design > div > article.is-complete { opacity: .72; }
.special-next-design > div > article.is-complete > span { background: #27846e; }
.special-next-design > div > article.is-active { background: #eef8f4; border-color: #94cbb9; box-shadow: inset 4px 0 #27846e; }
.special-next-design article small { color: #68828c; font-size: .28rem; font-weight: 850; }
.special-next-design article strong { color: #224e5f; font-size: .5rem; }
.special-next-design article b { color: #52707a; font-size: .31rem; }
.special-next-design article em { width: fit-content; padding: 4px 6px; color: #256e5a; background: #dcefe8; border-radius: 100px; font-size: .24rem; font-weight: 850; }
.special-next-design > footer { display: flex; min-height: 44px; padding: 7px 12px; align-items: center; gap: 5px; color: #5d7881; background: #f7fafb; border-top: 1px solid #dfe8eb; font-size: .29rem; }
.special-next-design > footer span { display: flex; align-items: center; gap: 4px; }
.special-next-design > footer button { margin-left: auto; }

.special-next-wave { position: relative; display: grid; min-height: 302px; place-items: center; overflow: hidden; background: linear-gradient(145deg, #e5ecee, #d4e0e3); border-radius: 8px; }
.special-next-wave__background { position: absolute; inset: 17px; display: grid; padding: 17px; grid-template-columns: repeat(3, 1fr); align-content: start; gap: 8px; opacity: .34; filter: blur(1px); background: #fff; border: 1px solid #cbdadd; border-radius: 7px; }
.special-next-wave__background > * { padding: 11px; color: #315965; background: #edf4f5; border-radius: 4px; font-size: .34rem; }
.special-next-wave > section { position: relative; z-index: 1; display: grid; width: min(500px, calc(100% - 28px)); padding: 17px; gap: 8px; background: #fff; border-radius: 8px; box-shadow: 0 18px 45px rgba(18,48,58,.22); }
.special-next-wave > section > header { display: grid; grid-template-columns: 35px 1fr; align-items: center; gap: 8px; }
.special-next-wave > section > header > span { display: grid; width: 34px; height: 34px; place-items: center; color: #fff; background: #27778e; border-radius: 50%; }
.special-next-wave > section > header > div { display: grid; gap: 2px; }
.special-next-wave > section > header small { color: #337286; font-size: .28rem; font-weight: 900; }
.special-next-wave > section > header strong { color: #173f50; font-size: .61rem; }
.special-next-wave > section > p,
.special-next-wave > section > em { margin: 0; color: #70858d; font-size: .31rem; }
.special-next-wave > section > article { display: grid; padding: 10px; grid-template-columns: 37px 1fr; align-items: center; gap: 8px; background: #eaf5f7; border-left: 4px solid #1a91a2; border-radius: 5px; }
.special-next-wave > section > article > span { display: grid; width: 34px; height: 34px; place-items: center; color: #fff; background: #1d8597; border-radius: 50%; font-size: .35rem; font-weight: 900; }
.special-next-wave > section > article > div { display: grid; gap: 2px; }
.special-next-wave > section > article small { color: #627b84; font-size: .25rem; font-weight: 850; }
.special-next-wave > section > article strong { color: #174d5b; font-size: .45rem; }
.special-next-wave > section > article b { color: #39717d; font-size: .28rem; }
.special-next-wave > section > footer { display: flex; justify-content: flex-end; gap: 6px; }
.special-next-wave > section > footer button:first-child { color: #526d77; background: #fff; border: 1px solid #cbdadd; }
.special-next-wave > section > footer button.is-primary { background: #27738c; }

.special-treated-cut { display: grid; min-height: 303px; overflow: hidden; grid-template-columns: 1fr 220px; background: #fff; border: 1px solid #d5e1e5; border-radius: 8px; box-shadow: 0 9px 26px rgba(27,65,78,.09); }
.special-treated-cut > section { display: grid; grid-template-rows: auto 1fr; }
.special-treated-cut > section > header { display: flex; min-height: 57px; padding: 9px 12px; align-items: center; justify-content: space-between; gap: 8px; color: #fff; background: #173845; }
.special-treated-cut > section > header > div { display: grid; gap: 2px; }
.special-treated-cut > section > header small { color: #adc2c8; font-size: .26rem; font-weight: 850; }
.special-treated-cut > section > header strong { font-size: .44rem; }
.special-treated-cut > section > header em { display: flex; align-items: center; gap: 4px; color: #83d9bd; font-size: .25rem; font-weight: 850; }
.special-treated-cut__sheet { position: relative; min-height: 245px; background: #e8f1f3; }
.special-treated-cut__sheet svg { display: block; width: 100%; height: 100%; }
.special-treated-cut__sheet pattern line { stroke: #df463e; stroke-width: 5; }
.special-treated-cut__pane { fill: rgba(255,255,255,.88); stroke: #347f92; stroke-width: 4; }
.special-treated-cut__edge { fill: url(#special-edge-hatch); opacity: .9; }
.special-treated-cut__inner { fill: rgba(255,255,255,.35); stroke: #e0554d; stroke-width: 2; stroke-dasharray: 5 4; }
.special-treated-cut__sheet > span { position: absolute; padding: 4px 6px; border-radius: 3px; font-size: .24rem; font-weight: 850; }
.special-treated-cut__sheet > span.is-coating { top: 10px; left: 10px; color: #fff; background: #a9751c; }
.special-treated-cut__sheet > span.is-offset { right: 10px; bottom: 41px; color: #1e687e; background: #dcecf0; }
.special-treated-cut__sheet > span.is-edge { right: 10px; bottom: 13px; color: #9a302c; background: #fde5e3; }
.special-treated-cut > aside { display: grid; grid-template-rows: auto auto 1fr auto; background: #f7fafb; border-left: 1px solid #d9e4e7; }
.special-treated-cut > aside > header { display: grid; padding: 12px; gap: 2px; background: #edf4f5; border-bottom: 1px solid #d9e4e7; }
.special-treated-cut > aside > header small { color: #6e858e; font-size: .25rem; font-weight: 850; }
.special-treated-cut > aside > header strong { color: #9c392e; font-size: .61rem; }
.special-treated-cut > aside > div { display: grid; grid-template-columns: repeat(3, 1fr); }
.special-treated-cut > aside > div > span { display: grid; min-height: 54px; padding: 7px; align-content: center; gap: 3px; border-right: 1px solid #dce6e9; }
.special-treated-cut > aside > div > span:last-child { border-right: 0; }
.special-treated-cut > aside > div small { color: #7d9198; font-size: .2rem; }
.special-treated-cut > aside > div b { color: #285566; font-size: .33rem; }
.special-treated-cut > aside > article { position: relative; display: flex; padding: 17px 13px; align-items: flex-end; justify-content: center; gap: 4px; }
.special-treated-cut > aside > article i { display: block; width: 9px; height: calc(34px + var(--pass) * 3px); background: rgba(219,66,58,calc(.25 + var(--pass) * .045)); border-radius: 2px 2px 0 0; }
.special-treated-cut > aside > article span,
.special-treated-cut > aside > article b { position: absolute; bottom: 4px; color: #8c4640; font-size: .23rem; }
.special-treated-cut > aside > article span { left: 16px; }
.special-treated-cut > aside > article b { right: 16px; }
.special-treated-cut > aside > footer { display: flex; min-height: 41px; padding: 8px 10px; align-items: center; gap: 4px; color: #8d3c35; background: #fdebea; border-top: 1px solid #efcfcc; font-size: .26rem; line-height: 1.35; }

.special-washer > header { color: #fff; background: #173845; border-bottom-color: #315663; }
.special-washer > header small { color: #abc1c8; }
.special-washer > header strong { color: #fff; }
.special-washer > header > em { display: flex; align-items: center; gap: 4px; color: #26705d; background: #dff1ea; }
.special-washer > div { display: grid; min-height: 215px; grid-template-columns: .8fr 1.1fr .75fr; }
.special-washer > div > section { display: grid; padding: 12px; grid-template-rows: auto 1fr auto; border-right: 1px solid #dce6e9; }
.special-washer > div > section > header { display: grid; gap: 2px; }
.special-washer > div > section > header span { color: #557985; font-size: .26rem; font-weight: 850; }
.special-washer > div > section > header strong { color: #234e5e; font-size: .42rem; }
.special-washer__pane { position: relative; width: 125px; height: 92px; margin: auto; background: linear-gradient(135deg, rgba(125,197,216,.28), rgba(255,255,255,.75)); border: 4px solid #4d8fa0; box-shadow: inset 0 0 0 3px #fff; transform: perspective(280px) rotateY(-10deg); }
.special-washer__pane i { position: absolute; inset: 6px; border: 2px dashed #d29b2b; }
.special-washer__pane span,
.special-washer__pane b { position: absolute; right: 6px; left: 6px; text-align: center; }
.special-washer__pane span { top: 25px; color: #936b17; font-size: .28rem; }
.special-washer__pane b { top: 43px; color: #76540e; font-size: .37rem; }
.special-washer > div > section > footer { color: #28735e; font-size: .27rem; }
.special-washer > div > article { display: grid; padding: 18px; align-content: center; justify-items: center; gap: 7px; color: #fff; background: linear-gradient(135deg, #197f90, #1a9aa5); text-align: center; }
.special-washer > div > article small { color: #d1edf0; font-size: .27rem; font-weight: 850; }
.special-washer > div > article strong { font-size: .65rem; line-height: 1.25; }
.special-washer > div > article span { color: #d4edf0; font-size: .29rem; }
.special-washer > div > article button { margin-top: 3px; background: #278b5b; }
.special-washer > div > aside { display: grid; padding: 14px; align-content: center; justify-items: center; gap: 5px; background: #fff4dc; text-align: center; }
.special-washer > div > aside > span { color: #a57921; }
.special-washer > div > aside strong { color: #80611c; font-size: .31rem; }
.special-washer > div > aside b { padding: 4px 7px; color: #a13631; background: #fde5e3; border-radius: 100px; font-size: .27rem; }
.special-washer > div > aside p { margin: 0; color: #816b38; font-size: .28rem; line-height: 1.4; }
.special-washer > footer { display: flex; min-height: 43px; padding: 8px 12px; align-items: center; gap: 8px; color: #627b84; background: #f7fafb; border-top: 1px solid #dce6e9; font-size: .28rem; }
.special-washer > footer span { display: flex; align-items: center; gap: 4px; }
.special-washer > footer strong { margin-left: auto; color: #2f5d6d; }

.mock-toolbar--rework { --logo-height: 18px; }
.mock-toolbar--rework .mock-cut-status.is-alert i { background: #e34d43; box-shadow: 0 0 0 3px rgba(227, 77, 67, .13); }
.mock-rework-brand { min-width: 185px; }
.mock-rework-brand > i { color: #95aab2; font-size: .36rem; font-style: normal; font-weight: 900; }
.mock-rework-brand .product-logo + i,
.mock-rework-brand i + .product-logo { margin-left: -3px; }

.mock-content--breakage-rework {
  min-height: 373px;
  padding: 24px 28px 49px;
  background-color: #edf2f3;
  background-image: linear-gradient(rgba(29, 70, 84, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(29, 70, 84, .035) 1px, transparent 1px);
}

.breakage-rework { width: min(790px, 100%); color: #526d77; }
.breakage-rework *, .breakage-rework *::before, .breakage-rework *::after { box-sizing: border-box; }
.breakage-rework small, .breakage-rework em, .breakage-rework i { font-style: normal; }
.breakage-rework .icon { width: 13px; height: 13px; flex: 0 0 auto; }
.breakage-rework button { display: flex; min-height: 31px; padding: 7px 10px; align-items: center; justify-content: center; gap: 6px; color: #fff; background: #23788e; border: 0; border-radius: 5px; font-size: .31rem; font-weight: 850; }
.breakage-rework button[disabled] { color: #8b999e; background: #e1e7e9; }
.breakage-rework kbd { padding: 4px 6px; color: #1d6e4b; background: #fff; border: 0; border-radius: 4px; box-shadow: none; font-family: inherit; font-size: .29rem; font-weight: 950; }
.rework-card { overflow: hidden; background: #fff; border: 1px solid #d6e2e6; border-radius: 9px; box-shadow: 0 9px 26px rgba(27, 65, 78, .09); }
.rework-card > header { display: flex; min-height: 57px; padding: 10px 14px; align-items: center; justify-content: space-between; gap: 12px; background: #f7fafb; border-bottom: 1px solid #dde7ea; }
.rework-card > header > div { display: grid; min-width: 0; gap: 3px; }
.rework-card > header small { color: #557882; font-size: .29rem; font-weight: 900; letter-spacing: .08em; }
.rework-card > header strong { color: #173f50; font-size: .56rem; line-height: 1.2; }
.rework-card > header > span,
.rework-card > header > em { padding: 5px 8px; color: #8d3d36; background: #fdebea; border: 1px solid #f0cfcc; border-radius: 100px; font-size: .27rem; font-weight: 900; white-space: nowrap; }

.rework-state-rail { position: relative; display: grid; padding: 10px 13px; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; background: #f3f7f8; border-top: 1px solid #dce6e9; }
.rework-state-rail::before { position: absolute; top: 21px; right: 32px; left: 32px; height: 2px; background: #d2dee2; content: ''; }
.rework-state-rail > span { position: relative; z-index: 1; display: grid; justify-items: center; gap: 4px; color: #87979c; text-align: center; }
.rework-state-rail i { display: grid; width: 22px; height: 22px; place-items: center; background: #e2eaec; border: 2px solid #f3f7f8; border-radius: 50%; font-size: .22rem; font-weight: 900; }
.rework-state-rail i .icon { width: 10px; height: 10px; }
.rework-state-rail b { font-size: .2rem; }
.rework-state-rail .is-done i { color: #fff; background: #26836d; }
.rework-state-rail .is-active i { color: #fff; background: #d2483f; box-shadow: 0 0 0 3px rgba(210, 72, 63, .12); }
.rework-state-rail .is-done b { color: #27715e; }
.rework-state-rail .is-active b { color: #a43d36; }

.rework-overview__flow { position: relative; display: grid; padding: 16px 14px 12px; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.rework-overview__flow::before { position: absolute; top: 35px; right: 42px; left: 42px; height: 2px; background: #d2e0e4; content: ''; }
.rework-overview__flow article { position: relative; z-index: 1; display: grid; min-height: 89px; padding: 5px; align-content: start; justify-items: center; gap: 5px; text-align: center; }
.rework-overview__flow article > span { display: grid; width: 31px; height: 31px; place-items: center; color: #2d6d7f; background: #e8f2f4; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #b7cfd6; font-size: .31rem; font-weight: 900; }
.rework-overview__flow article.is-final > span { color: #fff; background: #25846e; box-shadow: 0 0 0 1px #25846e; }
.rework-overview__flow article strong { color: #294f5d; font-size: .35rem; }
.rework-overview__flow article small { color: #80949c; font-size: .25rem; line-height: 1.3; }
.rework-overview > footer { display: flex; min-height: 38px; padding: 7px 14px; align-items: center; gap: 14px; color: #708891; background: #fff; border-top: 1px solid #e0e8eb; font-size: .29rem; }
.rework-overview > footer b { color: #a33e37; }
.rework-overview > footer strong { margin-left: auto; color: #805f18; }

.rework-context-strip { display: grid; grid-template-columns: repeat(4, 1fr); background: #edf4f6; border-bottom: 1px solid #dbe6e9; }
.rework-context-strip > span { display: grid; min-height: 49px; padding: 7px 10px; align-content: center; gap: 3px; border-right: 1px solid #d8e4e7; }
.rework-context-strip > span:last-child { border-right: 0; }
.rework-context-strip small { color: #7e9198; font-size: .22rem; font-weight: 850; }
.rework-context-strip strong { color: #285363; font-size: .33rem; }
.rework-context-strip.is-compact > span { min-height: 42px; }
.rework-report > header > em { color: #fff; background: #d14941; border-color: #d14941; }
.rework-report__row { display: grid; min-height: 122px; padding: 14px; grid-template-columns: 43px minmax(0, 1fr) auto auto; align-items: center; gap: 11px; }
.rework-report__row > span.is-marker { display: grid; width: 41px; height: 41px; place-items: center; color: #fff; background: #277d91; border-radius: 50%; font-size: .47rem; font-weight: 900; }
.rework-report__row > div { display: grid; gap: 4px; }
.rework-report__row small { color: #6b858e; font-size: .24rem; font-weight: 850; }
.rework-report__row strong { color: #244f5f; font-size: .45rem; }
.rework-report__row em { color: #738b93; font-size: .28rem; }
.rework-report__row > span.is-state { padding: 5px 7px; color: #236d5a; background: #e2f3ed; border-radius: 100px; font-size: .25rem; font-weight: 850; }
.rework-report__row button { background: #d34840; }
.rework-report > footer { display: flex; min-height: 39px; padding: 7px 13px; align-items: center; gap: 5px; color: #667f88; background: #f7fafb; border-top: 1px solid #dfe8eb; font-size: .28rem; }
.rework-report > footer span { display: flex; align-items: center; gap: 4px; }
.rework-report > footer strong { margin-left: auto; color: #2f5d6d; }

.rework-components__choices { display: grid; padding: 10px 12px; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.rework-components__choices article { display: grid; min-height: 108px; padding: 9px; grid-template-columns: 31px 1fr; align-content: start; gap: 4px 7px; background: #f6f8f9; border: 1px solid #dae4e7; border-radius: 6px; }
.rework-components__choices article.is-selected { background: #edf8f4; border-color: #7fc3aa; box-shadow: inset 3px 0 #27856e; }
.rework-components__choices article > i { display: grid; width: 29px; height: 29px; grid-row: span 2; place-items: center; color: #527581; background: #e3ecef; border-radius: 4px; font-size: .27rem; font-weight: 900; }
.rework-components__choices article.is-selected > i { color: #fff; background: #27856e; }
.rework-components__choices strong { color: #2b5361; font-size: .32rem; line-height: 1.25; }
.rework-components__choices small { color: #7d8f96; font-size: .23rem; line-height: 1.3; }
.rework-components__choices em { width: fit-content; padding: 3px 5px; grid-column: 1 / -1; color: #7f8d92; background: #e9edef; border-radius: 100px; font-size: .2rem; font-weight: 900; }
.rework-components__choices article.is-selected em { display: flex; align-items: center; gap: 3px; color: #236f5b; background: #d9eee6; }
.rework-components > footer { display: grid; padding: 9px 12px; grid-template-columns: .8fr 1.1fr auto; align-items: end; gap: 7px; background: #f7fafb; border-top: 1px solid #dfe8eb; }
.rework-components > footer label { display: grid; min-height: 39px; padding: 6px 8px; align-content: center; gap: 2px; background: #fff; border: 1px solid #d6e2e6; border-radius: 4px; }
.rework-components > footer small { color: #819399; font-size: .2rem; font-weight: 850; }
.rework-components > footer strong { color: #2d5564; font-size: .29rem; }
.rework-components > footer button { background: #27856e; }

.rework-label-scene { display: grid; min-height: 298px; grid-template-columns: 1.25fr 50px .75fr; align-items: center; gap: 10px; }
.rework-label-scene > i { display: grid; place-items: center; color: #2b8196; }
.rework-label-paper { display: grid; min-height: 280px; padding: 13px; grid-template-rows: auto 1fr auto; background: #fff; border: 1px solid #cad8dc; box-shadow: 0 10px 28px rgba(28, 65, 77, .12); }
.rework-label-paper > header { display: flex; padding-bottom: 7px; align-items: center; justify-content: space-between; color: #173f50; border-bottom: 3px solid #d34b42; }
.rework-label-paper > header strong { font-size: .55rem; }
.rework-label-paper > header > span { width: 72px; }
.rework-label-paper > div { display: grid; padding: 9px 0; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.rework-label-paper > div span { display: grid; padding: 6px; gap: 2px; background: #f2f6f7; }
.rework-label-paper small { color: #7c8e95; font-size: .22rem; }
.rework-label-paper b { color: #264f5e; font-size: .31rem; }
.rework-label-paper > footer { display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 13px; }
.rework-fake-qr { width: 72px; height: 72px; background: repeating-conic-gradient(#173845 0 25%, #fff 0 50%) 0 / 14px 14px; border: 6px solid #fff; box-shadow: 0 0 0 1px #b9c8cd; }
.rework-fake-barcode { display: grid; gap: 6px; text-align: center; }
.rework-fake-barcode > i { height: 52px; background: repeating-linear-gradient(90deg, #173845 0 2px, #fff 2px 4px, #173845 4px 7px, #fff 7px 10px); }
.rework-label-scene > aside { display: grid; padding: 17px; gap: 8px; color: #fff; background: #173f50; border-radius: 8px; }
.rework-label-scene > aside small { color: #adc3ca; font-size: .24rem; font-weight: 850; }
.rework-label-scene > aside > strong { font-size: .56rem; }
.rework-label-scene > aside > span { display: grid; gap: 2px; color: #c9dade; font-size: .26rem; }
.rework-label-scene > aside > span b { color: #f0c15c; }
.rework-label-scene > aside > em { display: flex; padding: 7px; align-items: center; gap: 4px; color: #8ce0c1; background: rgba(51, 160, 126, .14); border-radius: 4px; font-size: .24rem; }

.rework-sequence { display: grid; min-height: 300px; grid-template-columns: 1.15fr .85fr; gap: 10px; }
.rework-rack { display: grid; overflow: hidden; min-height: 235px; grid-template-rows: auto 1fr auto; background: #173845; border: 4px solid #294f5c; border-radius: 7px; box-shadow: 0 9px 25px rgba(25, 59, 70, .14); }
.rework-rack > header { display: flex; padding: 8px 10px; align-items: center; justify-content: space-between; color: #fff; border-bottom: 1px solid #41616c; }
.rework-rack > header small { color: #b3c8ce; font-size: .23rem; }
.rework-rack > header strong { font-size: .3rem; }
.rework-rack > div { display: grid; padding: 11px 11px 6px; grid-template-columns: repeat(6, 1fr); align-items: end; gap: 4px; background: linear-gradient(160deg, #e9f2f4, #cbdde1); }
.rework-rack > div > span { display: grid; height: 128px; place-content: center; justify-items: center; gap: 5px; color: #245a69; background: rgba(250, 254, 255, .82); border: 2px solid #6fa4b0; transform: skewY(-4deg); }
.rework-rack > div > span:nth-child(even) { height: 140px; }
.rework-rack > div > span.is-broken { color: #fff; background: repeating-linear-gradient(135deg, #d94d45 0 5px, #be3c36 5px 10px); border-color: #a32f2b; }
.rework-rack > div > span.is-active { color: #745613; background: #fff2cf; border-color: #d4a133; box-shadow: 0 0 0 3px rgba(212, 161, 51, .18); }
.rework-rack > div > span.is-replaced { color: #fff; background: #27836c; border-color: #1f6957; box-shadow: 0 0 0 3px rgba(39, 131, 108, .18); }
.rework-rack > div b { font-size: .3rem; }
.rework-rack > div small { font-size: .19rem; font-weight: 900; }
.rework-rack > footer { display: flex; min-height: 31px; padding: 5px 9px; align-items: center; justify-content: space-between; color: #c4d6da; font-size: .23rem; }
.rework-rack > footer em { color: #f3c45f; font-weight: 900; }
.rework-rack.is-resolved > footer em { color: #84ddbd; }
.rework-sequence > aside { display: grid; padding: 12px; align-content: center; gap: 7px; background: #fff; border: 1px solid #d6e2e6; border-radius: 7px; }
.rework-sequence > aside > header { display: grid; gap: 2px; }
.rework-sequence > aside > header small { color: #5b7b86; font-size: .23rem; font-weight: 850; }
.rework-sequence > aside > header strong { color: #244f5e; font-size: .44rem; }
.rework-sequence > aside article { display: grid; padding: 7px; grid-template-columns: 27px 1fr auto; align-items: center; gap: 7px; border-radius: 4px; }
.rework-sequence > aside article > span { display: grid; width: 26px; height: 26px; place-items: center; color: #fff; border-radius: 50%; font-size: .27rem; font-weight: 900; }
.rework-sequence > aside article > div { display: grid; gap: 2px; }
.rework-sequence > aside article small { font-size: .2rem; font-weight: 850; }
.rework-sequence > aside article b { font-size: .3rem; }
.rework-sequence > aside article em { font-size: .21rem; }
.rework-sequence > aside article.is-broken { color: #913832; background: #fdeae8; }
.rework-sequence > aside article.is-broken > span { background: #d34b43; }
.rework-sequence > aside article.is-active { color: #216b59; background: #e5f4ee; }
.rework-sequence > aside article.is-active > span { background: #27836c; }
.rework-sequence > aside > i { color: #758d95; transform: rotate(90deg); }
.rework-sequence > aside > footer { display: flex; align-items: center; gap: 4px; color: #627c85; font-size: .23rem; line-height: 1.35; }

.rework-attention { display: grid; min-height: 296px; grid-template-rows: 1fr auto; gap: 9px; }
.rework-attention > section { overflow: hidden; background: #fff; border: 1px solid #d6e2e6; border-radius: 8px; }
.rework-attention > section > header { display: flex; min-height: 48px; padding: 8px 12px; align-items: center; gap: 8px; color: #fff; background: #173f50; }
.rework-attention > section > header > span { font-size: .55rem; }
.rework-attention > section > header > div { display: grid; gap: 2px; }
.rework-attention > section > header small { color: #b4c9cf; font-size: .21rem; }
.rework-attention > section > header strong { font-size: .38rem; }
.rework-hub-grid { display: grid; padding: 12px; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rework-hub-grid article { position: relative; display: grid; min-height: 123px; padding: 13px; align-content: center; gap: 5px; background: #f4f7f8; border: 1px solid #dce5e8; border-radius: 6px; }
.rework-hub-grid article > i { color: #2c8296; font-size: .65rem; }
.rework-hub-grid article strong { color: #295362; font-size: .4rem; }
.rework-hub-grid article small { color: #7b8e95; font-size: .25rem; line-height: 1.35; }
.rework-hub-grid article.is-alert { background: #fff3f1; border-color: #e5a29d; box-shadow: inset 4px 0 #d34840; }
.rework-hub-grid article.is-alert > span { position: absolute; top: 7px; right: 7px; display: grid; width: 24px; height: 24px; place-items: center; color: #fff; background: #d34840; border-radius: 50%; font-size: .25rem; font-weight: 900; }
.rework-hub-grid article.is-alert > i { color: #c9423b; }
.rework-hub-grid article em { width: fit-content; padding: 3px 5px; color: #9c3732; background: #fbdedb; border-radius: 100px; font-size: .2rem; font-weight: 900; }
.rework-attention > aside { display: grid; padding: 9px 12px; grid-template-columns: 29px 1fr auto; align-items: center; gap: 9px; color: #fff; background: #c93f38; border-radius: 6px; }
.rework-attention > aside > span { display: grid; width: 27px; height: 27px; place-items: center; background: rgba(255,255,255,.17); border-radius: 50%; font-weight: 900; }
.rework-attention > aside > div { display: grid; gap: 2px; }
.rework-attention > aside small { color: #ffd6d2; font-size: .2rem; font-weight: 900; }
.rework-attention > aside strong { font-size: .32rem; }
.rework-attention > aside p { margin: 0; color: #ffe4e1; font-size: .23rem; }
.rework-attention > aside button { color: #a33832; background: #fff; }

.rework-queue > header button { color: #326676; background: #e7f1f3; }
.rework-queue > nav { display: flex; min-height: 40px; padding: 7px 12px 0; gap: 5px; background: #f0f5f6; border-bottom: 1px solid #dce6e9; }
.rework-queue > nav span { display: flex; padding: 7px 10px; align-items: center; gap: 5px; color: #71878f; border-radius: 4px 4px 0 0; font-size: .25rem; font-weight: 850; }
.rework-queue > nav span.is-active { color: #a33d36; background: #fff; box-shadow: inset 0 3px #d24940; }
.rework-queue > nav b { display: grid; min-width: 18px; height: 18px; padding: 0 4px; place-items: center; color: #fff; background: #d24940; border-radius: 100px; font-size: .2rem; }
.rework-table > div { display: grid; min-height: 45px; padding: 6px 11px; grid-template-columns: .85fr 1fr .45fr 1.45fr 1fr; align-items: center; gap: 6px; border-bottom: 1px solid #e2eaed; font-size: .27rem; }
.rework-table > div.is-head { min-height: 27px; color: #7b8f97; background: #f8fafb; font-size: .21rem; font-weight: 850; }
.rework-table > div.is-optimized { background: #edf7f3; }
.rework-table .is-status { width: fit-content; padding: 3px 5px; color: #973832; background: #fde4e2; border-radius: 100px; font-size: .21rem; font-weight: 850; }
.rework-table .is-optimized .is-status { color: #216b58; background: #dcefe7; }
.rework-queue > footer,
.rework-floor-load > footer { display: flex; min-height: 38px; padding: 7px 12px; align-items: center; gap: 5px; color: #657e87; background: #f7fafb; font-size: .25rem; }
.rework-queue > footer span,
.rework-floor-load > footer span { display: flex; align-items: center; gap: 4px; }
.rework-queue > footer strong { margin-left: auto; color: #315d6b; }

.rework-routes > div { display: grid; padding: 12px; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.rework-routes > div article { display: grid; min-height: 188px; padding: 11px; grid-template-rows: auto auto 1fr auto; gap: 7px; background: #f5f8f9; border: 1px solid #d8e3e6; border-radius: 6px; }
.rework-routes > div article.is-selected { background: #ecf7f3; border-color: #76bea5; box-shadow: inset 4px 0 #27836c; }
.rework-routes article > header { display: grid; grid-template-columns: 35px 1fr; align-items: center; gap: 8px; }
.rework-routes article > header > span { display: grid; width: 34px; height: 34px; place-items: center; color: #fff; background: #688089; border-radius: 50%; font-size: .43rem; font-weight: 900; }
.rework-routes article.is-selected > header > span { background: #27836c; }
.rework-routes article > header > div { display: grid; gap: 2px; }
.rework-routes article small { color: #6d858e; font-size: .21rem; font-weight: 850; }
.rework-routes article strong { color: #244f5f; font-size: .38rem; }
.rework-routes article p { margin: 0; color: #6c8189; font-size: .25rem; line-height: 1.4; }
.rework-routes article ul { display: grid; margin: 0; padding: 0; align-content: start; gap: 4px; list-style: none; color: #58737d; font-size: .24rem; }
.rework-routes article li { display: flex; align-items: center; gap: 3px; }
.rework-routes article button { width: 100%; background: #27836c; }
.rework-routes > footer { display: flex; min-height: 36px; padding: 7px 12px; align-items: center; gap: 4px; color: #647e87; background: #f7fafb; border-top: 1px solid #dfe8eb; font-size: .25rem; }

.rework-grouping > div { display: grid; padding: 12px; grid-template-columns: 1fr 40px 1fr; align-items: center; gap: 8px; }
.rework-grouping > div > i { display: grid; place-items: center; color: #2b8196; }
.rework-grouping > div article { overflow: hidden; min-height: 170px; border: 1px solid #d8e3e6; border-radius: 6px; }
.rework-grouping article > header { display: grid; min-height: 50px; padding: 7px 9px; grid-template-columns: 41px 1fr auto; align-items: center; gap: 7px; color: #fff; background: #1f7388; }
.rework-grouping article.is-lam > header { background: #725b25; }
.rework-grouping article > header > span { display: grid; width: 39px; height: 30px; place-items: center; background: rgba(255,255,255,.15); border-radius: 4px; font-size: .25rem; font-weight: 900; }
.rework-grouping article > header strong { font-size: .34rem; }
.rework-grouping article > header em { font-size: .23rem; }
.rework-grouping article > div { display: grid; min-height: 40px; padding: 6px 8px; grid-template-columns: 49px 1fr 18px; align-items: center; gap: 5px; border-bottom: 1px solid #e2e9eb; }
.rework-grouping article > div b { color: #66808a; font-size: .21rem; }
.rework-grouping article > div span { color: #2e5968; font-size: .27rem; }
.rework-grouping article > div strong { color: #1d7185; font-size: .34rem; }
.rework-grouping article > footer { display: flex; min-height: 31px; padding: 6px 8px; align-items: center; gap: 4px; color: #26705d; background: #eaf6f1; font-size: .23rem; }
.rework-grouping > footer { display: flex; min-height: 39px; padding: 7px 12px; align-items: center; gap: 4px; color: #617b84; background: #f7fafb; border-top: 1px solid #dfe8eb; font-size: .25rem; }
.rework-grouping > footer strong { margin-left: auto; color: #a33d36; }

.rework-micro { display: grid; min-height: 299px; grid-template-columns: 1fr 40px 1fr; align-items: center; gap: 8px; }
.rework-micro > i { display: grid; place-items: center; color: #2b8196; }
.rework-micro > article { overflow: hidden; background: #fff; border: 1px solid #d4e1e5; border-radius: 7px; box-shadow: 0 8px 22px rgba(27,65,78,.08); }
.rework-micro > article > header { display: flex; min-height: 51px; padding: 8px 10px; align-items: center; justify-content: space-between; color: #fff; background: #173f50; }
.rework-micro > article > header > div { display: grid; gap: 1px; }
.rework-micro > article > header small { color: #b8cbd1; font-size: .2rem; }
.rework-micro > article > header strong { font-size: .61rem; }
.rework-micro > article > header > span { padding: 4px 6px; color: #8bdabd; background: rgba(60,165,131,.15); border-radius: 100px; font-size: .21rem; font-weight: 900; }
.rework-mini-sheet { position: relative; display: grid; height: 161px; padding: 8px 8px 30px; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 4px; background: #d8e9ed; border: 3px solid #397f91; }
.rework-mini-sheet > span { display: grid; place-items: center; color: #245b6b; background: #f1fbfc; border: 1px solid #75aab7; font-size: .24rem; font-weight: 850; }
.rework-mini-sheet > span.is-priority { color: #fff; background: #d34940; border-color: #ad3731; }
.rework-mini-sheet > small { position: absolute; right: 7px; bottom: 6px; left: 7px; color: #fff; background: #c6413a; font-size: .19rem; font-weight: 900; text-align: center; }
.rework-mini-sheet.is-lam { border-color: #806825; background: #ece4ca; }
.rework-mini-sheet.is-lam > span { color: #685316; border-color: #b9a056; }
.rework-micro > article > footer { display: flex; min-height: 35px; padding: 6px 9px; align-items: center; justify-content: space-between; color: #627b84; font-size: .24rem; }
.rework-micro > article > footer b { color: #264f5e; }
.rework-micro > footer { display: flex; min-height: 37px; padding: 7px 10px; grid-column: 1 / -1; align-items: center; gap: 4px; color: #c9dcdf; background: #173f50; border-radius: 5px; font-size: .24rem; }
.rework-micro > footer strong { margin-left: auto; color: #8de0c1; }

.rework-validation__map { display: grid; min-height: 190px; padding: 12px; grid-template-columns: 1.2fr .8fr; gap: 9px; }
.rework-validation__map > section { display: grid; align-content: center; gap: 6px; }
.rework-validation__map > section > span { display: grid; min-height: 43px; padding: 6px 8px; grid-template-columns: .8fr 24px .9fr .8fr 18px; align-items: center; gap: 5px; background: #f3f7f8; border-left: 3px solid #29866e; border-radius: 4px; }
.rework-validation__map > section b,
.rework-validation__map > section strong { color: #2a5665; font-size: .27rem; }
.rework-validation__map > section em { color: #6d838b; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .22rem; }
.rework-validation__map > section .icon { color: #26806a; }
.rework-validation__map > aside { display: grid; padding: 13px; align-content: center; gap: 6px; color: #fff; background: #173f50; border-radius: 6px; }
.rework-validation__map > aside small { color: #abc1c8; font-size: .21rem; font-weight: 850; }
.rework-validation__map > aside > strong { color: #f0c15b; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .31rem; }
.rework-validation__map > aside p { margin: 0; color: #cadadd; font-size: .24rem; line-height: 1.4; }
.rework-validation__map > aside span { display: flex; align-items: center; gap: 4px; color: #8adebf; font-size: .23rem; }
.rework-validation > footer { display: flex; min-height: 42px; padding: 7px 12px; align-items: center; gap: 6px; color: #607a83; background: #f7fafb; border-top: 1px solid #dfe8eb; font-size: .25rem; }
.rework-validation > footer button { margin-left: auto; background: #27836c; }

.rework-assignment > div { display: grid; padding: 10px 12px; gap: 7px; }
.rework-assignment > div article { display: grid; min-height: 77px; padding: 8px; grid-template-columns: 42px 1.15fr 28px .85fr; align-items: center; gap: 7px; background: #f4f7f8; border: 1px solid #dbe5e8; border-radius: 5px; }
.rework-assignment > div article > span { display: grid; width: 40px; height: 40px; place-items: center; color: #fff; background: #247b8f; border-radius: 5px; font-size: .26rem; font-weight: 900; }
.rework-assignment > div article:nth-child(2) > span { background: #796225; }
.rework-assignment > div article > div,
.rework-assignment > div article > aside { display: grid; gap: 3px; }
.rework-assignment article small { color: #7d9097; font-size: .2rem; font-weight: 850; }
.rework-assignment article strong { overflow: hidden; color: #284f5e; font-size: .28rem; text-overflow: ellipsis; white-space: nowrap; }
.rework-assignment article em { color: #69818a; font-size: .23rem; }
.rework-assignment article > i { color: #2d8195; }
.rework-assignment article > aside { padding: 8px; background: #e5f4ee; border-left: 3px solid #27836c; }
.rework-assignment article > aside em { display: flex; align-items: center; gap: 3px; color: #246d59; }
.rework-assignment > footer { display: flex; min-height: 45px; padding: 7px 12px; align-items: center; gap: 4px; color: #607a83; background: #f7fafb; border-top: 1px solid #dfe8eb; font-size: .25rem; }
.rework-assignment > footer span { display: flex; align-items: center; gap: 4px; }
.rework-assignment > footer button { margin-left: auto; background: #27836c; }

.rework-floor-load > header { color: #fff; background: #173f50; border-bottom-color: #315b68; }
.rework-floor-load > header small { color: #b0c6cc; }
.rework-floor-load > header strong { color: #fff; }
.rework-floor-load > header > em { color: #8ce0c0; background: rgba(53,162,128,.14); border-color: rgba(111,207,177,.3); }
.rework-floor-load__kpis { display: grid; grid-template-columns: repeat(4, 1fr); background: #edf4f6; }
.rework-floor-load__kpis > span { display: grid; min-height: 59px; padding: 8px; place-content: center; justify-items: center; gap: 3px; border-right: 1px solid #d7e3e6; }
.rework-floor-load__kpis > span:last-child { border-right: 0; }
.rework-floor-load__kpis small { color: #748b93; font-size: .2rem; font-weight: 850; }
.rework-floor-load__kpis strong { color: #1d7184; font-size: .56rem; }
.rework-table.is-floor > div { grid-template-columns: .75fr .7fr .5fr 1fr .75fr; }
.rework-floor-load > footer button { margin-left: auto; background: #d1473f; }

.rework-cut { display: grid; min-height: 302px; overflow: hidden; grid-template-columns: 1fr 215px; background: #fff; border: 1px solid #d5e1e5; border-radius: 8px; box-shadow: 0 9px 26px rgba(27,65,78,.09); }
.rework-cut > section { display: grid; grid-template-rows: auto 1fr; }
.rework-cut > section > header { display: flex; min-height: 55px; padding: 9px 11px; align-items: center; justify-content: space-between; gap: 7px; color: #fff; background: #173f50; }
.rework-cut > section > header > div { display: grid; gap: 2px; }
.rework-cut > section > header small { color: #afc4ca; font-size: .22rem; }
.rework-cut > section > header strong { font-size: .36rem; }
.rework-cut > section > header em { color: #ffd47c; font-size: .23rem; font-weight: 900; }
.rework-cut__sheet { position: relative; display: grid; padding: 10px 10px 34px; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 4px; background: #d8e9ed; border: 3px solid #397f91; }
.rework-cut__sheet > span { display: grid; padding: 6px; place-content: center; gap: 3px; color: #255a6a; background: #f3fbfc; border: 1px solid #78aab6; text-align: center; }
.rework-cut__sheet > span.is-active { color: #8e342f; background: #fff0ee; border: 2px solid #d64b42; }
.rework-cut__sheet small { font-size: .21rem; font-weight: 900; }
.rework-cut__sheet b { font-size: .25rem; }
.rework-cut__sheet > i { position: absolute; right: 7px; bottom: 7px; left: 7px; padding: 5px; color: #fff; background: #d1473f; font-size: .2rem; font-weight: 900; text-align: center; }
.rework-cut > aside { display: grid; grid-template-rows: auto 1fr auto auto; background: #f7fafb; border-left: 1px solid #d8e4e7; }
.rework-cut > aside > header { display: grid; padding: 11px; gap: 3px; background: #eaf2f4; }
.rework-cut > aside > header small { color: #708890; font-size: .21rem; }
.rework-cut > aside > header strong { color: #214f5f; font-size: .5rem; }
.rework-cut > aside > header span { overflow: hidden; color: #607b85; font-size: .2rem; text-overflow: ellipsis; white-space: nowrap; }
.rework-cut > aside > div { display: grid; padding: 14px; align-content: center; justify-items: center; gap: 4px; }
.rework-cut > aside > div small { color: #718890; font-size: .21rem; }
.rework-cut > aside > div strong { color: #d14840; font-size: .85rem; }
.rework-cut > aside > div span { color: #6c828b; font-size: .23rem; text-align: center; }
.rework-cut > aside > button { margin: 0 11px; flex-direction: column; background: #27836c; }
.rework-cut > aside > footer { display: flex; min-height: 35px; padding: 7px 9px; align-items: center; justify-content: center; gap: 3px; color: #246f5b; font-size: .22rem; }

.rework-production__summary { display: grid; padding: 8px 11px; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 6px; background: #edf4f6; }
.rework-production__summary > span { display: grid; padding: 5px 7px; grid-template-columns: 1fr auto; align-items: center; gap: 5px; background: #fff; border: 1px solid #d6e2e6; border-radius: 4px; }
.rework-production__summary small { color: #748a92; font-size: .19rem; font-weight: 850; }
.rework-production__summary strong { color: #c9413a; font-size: .43rem; }
.rework-production__summary button { background: #27836c; }
.rework-production > article { margin: 9px 11px; overflow: hidden; border: 1px solid #d8e3e6; border-radius: 6px; }
.rework-production > article > header { display: grid; padding: 8px 10px; grid-template-columns: 31px 1fr auto; align-items: center; gap: 7px; background: #f3f7f8; }
.rework-production > article > header > span { display: grid; width: 29px; height: 29px; place-items: center; color: #fff; background: #287f92; border-radius: 50%; font-size: .23rem; font-weight: 900; }
.rework-production > article > header > div { display: grid; gap: 1px; }
.rework-production > article > header small { color: #728990; font-size: .19rem; }
.rework-production > article > header strong { color: #295362; font-size: .31rem; }
.rework-production > article > header em { color: #8f4741; font-size: .21rem; }
.rework-production > article > header > b { padding: 4px 6px; color: #216b57; background: #dbefe7; border-radius: 100px; font-size: .2rem; }
.rework-production > article > div { display: grid; padding: 8px 10px; grid-template-columns: 1fr 28px 1fr; align-items: center; gap: 7px; }
.rework-production > article > div > span { display: grid; padding: 6px 8px; gap: 2px; background: #f5f8f9; }
.rework-production > article > div > i { color: #2b8196; }
.rework-production > article > div small { color: #768b93; font-size: .18rem; }
.rework-production > article > div strong { color: #2b5665; font-size: .29rem; }
.rework-production > article > div em { color: #6f858d; font-size: .21rem; }
.rework-production > article > footer { padding: 6px 9px; color: #627b84; background: #edf5f6; font-size: .21rem; }
.rework-production > footer { display: flex; min-height: 39px; padding: 7px 11px; align-items: center; gap: 4px; color: #607a83; background: #f7fafb; border-top: 1px solid #dfe8eb; font-size: .23rem; }
.rework-production > footer span { display: flex; align-items: center; gap: 4px; }
.rework-production > footer button { margin-left: auto; }

.rework-closure { overflow: hidden; background: #fff; border: 1px solid #d4e1e5; border-radius: 8px; box-shadow: 0 9px 26px rgba(27,65,78,.09); }
.rework-closure > header { display: grid; min-height: 57px; padding: 9px 12px; grid-template-columns: 34px 1fr auto; align-items: center; gap: 8px; color: #fff; background: #247d67; }
.rework-closure > header > span { display: grid; width: 32px; height: 32px; place-items: center; background: rgba(255,255,255,.16); border-radius: 50%; }
.rework-closure > header > div { display: grid; gap: 2px; }
.rework-closure > header small { color: #c3ece0; font-size: .21rem; }
.rework-closure > header strong { font-size: .39rem; }
.rework-closure > header em { padding: 4px 6px; color: #1d6e59; background: #fff; border-radius: 100px; font-size: .21rem; font-weight: 900; }
.rework-closure > div { display: grid; padding: 9px; grid-template-columns: 1.2fr .8fr; gap: 8px; }
.rework-closure .rework-rack { min-height: 173px; }
.rework-closure .rework-rack > div > span { height: 79px; }
.rework-closure .rework-rack > div > span:nth-child(even) { height: 89px; }
.rework-closure > div > aside { display: grid; padding: 10px; align-content: center; grid-template-columns: repeat(2, 1fr); gap: 5px; background: #f1f7f5; border: 1px solid #d7e8e1; border-radius: 5px; }
.rework-closure > div > aside > small { grid-column: 1 / -1; color: #4e786b; font-size: .2rem; font-weight: 900; }
.rework-closure > div > aside > span { display: grid; padding: 5px; gap: 2px; background: #fff; border: 1px solid #dbe8e3; }
.rework-closure > div > aside b { color: #6b827a; font-size: .19rem; }
.rework-closure > div > aside strong { color: #236f5a; font-size: .31rem; }
.rework-closure > div > aside > em { display: flex; padding-top: 5px; grid-column: 1 / -1; align-items: center; gap: 3px; color: #226d59; font-size: .21rem; }
.rework-closure > footer { display: grid; }
.rework-closure > footer > span { padding: 7px 11px; color: #657e87; background: #f7fafb; border-top: 1px solid #dfe8eb; font-size: .23rem; }
.rework-closure > footer > span b { color: #225d4d; }

.capture-label {
  position: absolute;
  right: 15px;
  bottom: 13px;
  display: flex;
  align-items: center;
  gap: 9px;
}

.capture-label span {
  padding: 5px 8px;
  color: var(--ocean);
  background: rgba(2, 147, 210, 0.1);
  border-radius: 4px;
  font-size: 0.48rem;
  font-weight: 850;
  letter-spacing: 0.06em;
}

.capture-label small {
  color: #9ca9ad;
  font-size: 0.46rem;
}

.mock-table {
  width: min(720px, 95%);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 12px 35px rgba(0, 51, 143, 0.07);
}

.mock-table__header,
.mock-table__row {
  display: grid;
  height: 42px;
  padding-inline: 18px;
  grid-template-columns: 0.8fr 1.6fr 1fr 0.7fr 25px;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid #e8ecea;
}

.mock-table__header {
  height: 35px;
  background: #f0f4f2;
}

.mock-table__header i,
.mock-table__row i,
.mock-table__row b {
  height: 5px;
  background: #d6deda;
  border-radius: 10px;
}

.mock-table__header i:nth-child(2),
.mock-table__row i:first-of-type { width: 75%; }

.mock-table__row b { width: 50%; background: #b8c8c9; }
.mock-table__row span { color: var(--ocean); }
.mock-table__row.is-selected { background: rgba(2, 147, 210, 0.08); box-shadow: inset 3px 0 var(--cyan-deep); }
.mock-table__row.is-selected b { background: var(--cyan-deep); }

.mock-two-column {
  display: grid;
  width: min(760px, 96%);
  grid-template-columns: 1.5fr 0.75fr;
  gap: 17px;
}

.mock-form,
.mock-summary {
  padding: 24px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.mock-form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 19px;
}

.mock-form label {
  display: grid;
  gap: 7px;
  color: #75878d;
  font-size: 0.53rem;
  font-weight: 700;
}

.mock-form i {
  height: 31px;
  background: #f2f5f3;
  border: 1px solid #dde4e1;
  border-radius: 4px;
}

.mock-form label:first-child,
.mock-form .is-long { grid-column: span 2; }

.mock-summary {
  display: grid;
  align-content: start;
  gap: 13px;
}

.mock-summary > small {
  color: var(--cyan-deep);
  font-size: 0.49rem;
  font-weight: 850;
  letter-spacing: 0.12em;
}

.mock-summary > strong {
  margin-bottom: 8px;
  font-size: 0.72rem;
  line-height: 1.35;
}

.mock-summary > div {
  display: flex;
  padding-top: 10px;
  justify-content: space-between;
  border-top: 1px solid #e7ece9;
  color: #7d8d92;
  font-size: 0.51rem;
}

.mock-summary b { color: var(--ink); }
.mock-summary .status-ok { color: var(--ocean); }

.mock-product-grid {
  display: grid;
  width: min(740px, 96%);
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.mock-product-grid > div {
  position: relative;
  display: flex;
  min-height: 100px;
  padding: 18px;
  flex-direction: column;
  justify-content: end;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 7px;
}

.mock-product-grid span {
  position: absolute;
  top: 12px;
  right: 14px;
  color: #a4b0b3;
  font-family: Georgia, serif;
  font-size: 0.55rem;
}

.mock-product-grid strong {
  font-size: 0.68rem;
}

.mock-master-screen {
  width: min(920px, 100%);
  margin: 0 auto;
  padding-top: 10px;
  color: #304c5e;
}

.mock-master-breadcrumb {
  display: flex;
  margin-bottom: 6px;
  align-items: center;
  gap: 6px;
  color: #84949e;
  font-size: 0.39rem;
}

.mock-master-breadcrumb strong {
  color: #526c7a;
  font-weight: 750;
}

.mock-master-breadcrumb i {
  color: #a9b6bd;
  font-style: normal;
}

.mock-master-heading {
  display: flex;
  margin-bottom: 8px;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.mock-master-heading > div {
  display: grid;
  gap: 1px;
}

.mock-master-heading > div small {
  color: #168ca2;
  font-size: 0.37rem;
  font-weight: 850;
  letter-spacing: 0.1em;
}

.mock-master-heading > div strong {
  color: #173b56;
  font-size: 0.88rem;
  font-weight: 780;
  line-height: 1.1;
}

.mock-master-heading > div p {
  margin: 1px 0 0;
  color: #71818e;
  font-size: 0.42rem;
}

.mock-master-heading > span {
  display: inline-flex;
  padding: 5px 8px;
  align-items: center;
  gap: 5px;
  color: #18788a;
  background: #eaf7f8;
  border: 1px solid #cbe7e9;
  border-radius: 999px;
  font-size: 0.38rem;
  font-weight: 700;
  white-space: nowrap;
}

.mock-master-heading > span svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.mock-master-search {
  display: flex;
  margin-bottom: 9px;
  padding: 7px 9px;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  background: linear-gradient(125deg, #f5fbfc, #fff);
  border: 1px solid #d9e8ed;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(25, 65, 88, 0.04);
}

.mock-master-search > div {
  display: grid;
  width: min(500px, 76%);
  gap: 3px;
}

.mock-master-search > div > small {
  color: #284b60;
  font-size: 0.33rem;
  font-weight: 850;
  letter-spacing: 0.04em;
}

.mock-master-search > div > span {
  display: flex;
  height: 24px;
  padding-inline: 8px;
  align-items: center;
  gap: 7px;
  color: #8a9ba6;
  background: #fff;
  border: 1px solid #cbdde4;
  border-radius: 6px;
}

.mock-master-search > div svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: #1590a2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.mock-master-search b {
  font-size: 0.4rem;
  font-weight: 550;
}

.mock-master-search em {
  padding: 5px 8px;
  color: #247789;
  background: #e6f5f6;
  border: 1px solid #c6e4e7;
  border-radius: 999px;
  font-size: 0.37rem;
  font-style: normal;
  white-space: nowrap;
}

.mock-master-search em strong {
  color: #0c6577;
  font-size: 0.44rem;
}

.mock-master-grid--realistic {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.mock-master-card {
  position: relative;
  display: grid;
  min-height: 84px;
  padding: 9px 9px 7px;
  grid-template-columns: 31px 1fr;
  grid-template-rows: 1fr auto;
  gap: 6px 8px;
  color: #304c5e;
  background: #fff;
  border: 1px solid #e1e9ee;
  border-radius: 8px;
  box-shadow: 0 5px 14px rgba(25, 65, 88, 0.055);
}

.mock-master-card__icon {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  color: #138ca1;
  background: linear-gradient(135deg, #e7f7f8, #edf6fb);
  border-radius: 7px;
}

.mock-master-card__icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.65;
}

.mock-master-card__arrow {
  position: absolute;
  top: 8px;
  right: 9px;
  color: #1494a7;
  font-size: 0.55rem;
  font-style: normal;
}

.mock-master-card > div {
  min-width: 0;
  padding: 1px 12px 0 0;
}

.mock-master-card > div strong {
  display: block;
  margin-bottom: 2px;
  color: #304c5e;
  font-size: 0.5rem;
  font-weight: 780;
}

.mock-master-card > div p {
  margin: 0;
  color: #72818d;
  font-size: 0.36rem;
  line-height: 1.35;
}

.mock-master-card > small {
  width: fit-content;
  padding: 2px 5px;
  grid-column: 1 / -1;
  color: #08778c;
  background: #e8f5f8;
  border-radius: 999px;
  font-size: 0.31rem;
  font-weight: 750;
}

.mock-master-card--admin > small,
.mock-master-card--logistics > small {
  color: #8b651b;
  background: #fff6df;
}

.mock-master-card--production > small {
  color: #287650;
  background: #e8f6ef;
}

.mock-master-card--materials > small {
  color: #176d9c;
  background: #eaf4fb;
}

.mock-product-grid {
  grid-template-columns: repeat(4, 1fr);
}

.mock-product-grid > div {
  min-height: 180px;
  align-items: center;
  justify-content: center;
  gap: 23px;
}

.mock-product-grid > div.is-selected {
  border-color: var(--cyan-deep);
  box-shadow: inset 0 -3px var(--cyan-deep);
}

.product-icon {
  position: relative;
  display: block;
  width: 54px;
  height: 64px;
  border: 2px solid #aec4c8;
}

.product-icon--2::before,
.product-icon--2::after {
  position: absolute;
  top: 10px;
  left: -8px;
  width: 54px;
  height: 64px;
  border: 1px solid rgba(0, 125, 193, 0.4);
  content: "";
}

.product-icon--2::after { top: 19px; left: -15px; }
.product-icon--3 { border-style: dashed; border-radius: 50%; }
.product-icon--4 { border-width: 0 0 2px 2px; transform: rotate(-45deg); }

.mock-rules {
  display: grid;
  width: min(730px, 96%);
  grid-template-columns: 1fr 1fr;
  gap: 13px;
}

.mock-rule-result,
.mock-rule-list {
  display: flex;
  padding: 30px;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.mock-rule-result small {
  color: var(--ocean);
  font-size: 0.5rem;
  font-weight: 850;
  letter-spacing: 0.12em;
}

.mock-rule-result strong {
  margin: 22px 0 12px;
  font-size: 1.15rem;
}

.mock-rule-result span,
.mock-rule-list span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #668087;
  font-size: 0.58rem;
}

.mock-rule-result .icon,
.mock-rule-list .icon { color: var(--cyan-deep); }

.mock-rule-list {
  gap: 13px;
  justify-content: center;
}

.mock-tree {
  width: min(710px, 96%);
  padding: 15px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.mock-tree > div {
  display: grid;
  min-height: 48px;
  padding: 8px 12px;
  grid-template-columns: 25px 24px 1fr auto;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #e9edeb;
}

.mock-tree > div:last-child { border: 0; }
.mock-tree .level-2 { margin-left: 30px; }
.mock-tree span { color: #9aa9ac; font-family: Georgia, serif; font-size: 0.52rem; }
.mock-tree i { width: 17px; height: 22px; border: 1px solid #b9cbcd; background: rgba(2, 147, 210, 0.09); }
.mock-tree strong { font-size: 0.62rem; }
.mock-tree em { color: var(--ocean); font-size: 0.52rem; font-style: normal; }

.mock-dimensions,
.mock-shape,
.mock-muntin,
.mock-coating {
  display: grid;
  width: min(750px, 96%);
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 40px;
}

.mock-glass-drawing {
  position: relative;
  display: flex;
  height: 220px;
  align-items: center;
  justify-content: center;
}

.mock-glass-drawing > div {
  width: 255px;
  height: 165px;
  background: linear-gradient(140deg, rgba(2, 147, 210, 0.16), rgba(0, 60, 138, 0.04));
  border: 2px solid #54bacc;
  box-shadow: 10px 10px 0 rgba(0, 125, 193, 0.08);
}

.measure {
  position: absolute;
  color: var(--ocean);
  font-size: 0.54rem;
  font-weight: 750;
}

.measure--top { top: 10px; left: 50%; transform: translateX(-50%); }
.measure--side { top: 50%; left: 5px; transform: rotate(-90deg) translateY(-50%); }

.mock-dimension-fields,
.shape-fields {
  display: grid;
  gap: 8px;
}

.mock-dimension-fields span {
  display: flex;
  padding: 10px 12px;
  align-items: center;
  justify-content: space-between;
  color: #839297;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 5px;
  font-size: 0.49rem;
}

.mock-dimension-fields strong { color: var(--ink); font-size: 0.62rem; }

.mock-pricing {
  display: grid;
  width: min(730px, 96%);
  grid-template-columns: 1.25fr 0.75fr;
  gap: 12px;
}

.mock-pricing > div,
.mock-pricing aside {
  padding: 25px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.mock-pricing > div span {
  display: flex;
  padding: 10px 0;
  justify-content: space-between;
  border-bottom: 1px solid #e6ece9;
  font-size: 0.58rem;
}

.mock-pricing i { color: #77898f; font-style: normal; }
.mock-pricing aside { display: flex; flex-direction: column; justify-content: center; color: var(--white); background: var(--ink); }
.mock-pricing aside small { color: var(--brand-sky); font-size: 0.5rem; font-weight: 800; letter-spacing: 0.12em; }
.mock-pricing aside strong { margin: 13px 0 5px; font-size: 1.4rem; }
.mock-pricing aside em { color: rgba(255, 255, 255, 0.48); font-size: 0.56rem; font-style: normal; }

.mock-workflow {
  display: grid;
  width: min(800px, 98%);
  grid-template-columns: repeat(4, 1fr);
}

.mock-workflow > div {
  position: relative;
  display: grid;
  padding-top: 50px;
  text-align: center;
}

.mock-workflow > div::before {
  position: absolute;
  top: 21px;
  left: 0;
  width: 100%;
  height: 1px;
  background: #cfd9d6;
  content: "";
}

.mock-workflow span {
  position: absolute;
  z-index: 2;
  top: 7px;
  left: calc(50% - 15px);
  display: flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border: 1px solid #cfd9d6;
  border-radius: 50%;
  font-size: 0.53rem;
}

.mock-workflow .is-done span { color: var(--white); background: var(--brand-blue-600); border-color: var(--brand-blue-600); }
.mock-workflow strong { font-size: 0.55rem; }
.mock-workflow small { margin-top: 5px; color: #86969b; font-size: 0.48rem; }

.mock-timing {
  display: grid;
  width: min(740px, 96%);
  grid-template-columns: 0.65fr 1.35fr;
  gap: 14px;
}

.time-total,
.time-bars {
  display: flex;
  padding: 25px;
  flex-direction: column;
  justify-content: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.time-total small { color: var(--ocean); font-size: 0.49rem; font-weight: 850; letter-spacing: 0.1em; }
.time-total strong { margin: 13px 0 6px; font-size: 1.7rem; letter-spacing: -0.04em; }
.time-total span { color: #859499; font-size: 0.53rem; }
.time-bars { gap: 15px; }
.time-bars > span { position: relative; display: grid; grid-template-columns: 75px 1fr 48px; align-items: center; gap: 8px; }
.time-bars i, .time-bars em { color: #6f838a; font-size: 0.5rem; font-style: normal; }
.time-bars b { display: block; height: 6px; max-width: 100%; background: linear-gradient(90deg, var(--cyan), var(--cyan-deep)); border-radius: 4px; }
.time-bars em { text-align: right; }

.shape-drawing {
  position: relative;
  display: flex;
  height: 230px;
  align-items: center;
  justify-content: center;
}

.shape-drawing svg { width: 290px; fill: rgba(2, 147, 210, 0.08); stroke: var(--cyan-deep); stroke-width: 2; }
.shape-drawing span { position: absolute; color: var(--ocean); font-size: 0.49rem; font-weight: 700; }
.shape-drawing span:nth-of-type(1) { bottom: 0; left: 50%; transform: translateX(-50%); }
.shape-drawing span:nth-of-type(2) { top: 50%; left: -6px; transform: rotate(-90deg); }
.shape-fields span { display: flex; padding: 10px; justify-content: space-between; color: #788b91; background: var(--white); border: 1px solid var(--line); border-radius: 5px; font-size: 0.52rem; }
.shape-fields i { width: 45%; height: 5px; background: #dbe3e0; border-radius: 4px; }

.mock-offset {
  position: relative;
  width: min(650px, 90%);
  height: 280px;
}

.offset-pane {
  position: absolute;
  width: 350px;
  height: 210px;
  background: rgba(2, 147, 210, 0.11);
  border: 2px solid var(--cyan-deep);
}

.offset-pane--back { top: 18px; left: 50px; border-color: #7e99a1; }
.offset-pane--front { top: 44px; left: 100px; width: 350px; height: 174px; }
.offset-measure { position: absolute; top: 225px; left: 350px; color: var(--ocean); font-size: 0.56rem; font-weight: 800; }
.offset-legend { position: absolute; top: 50px; right: 0; display: grid; gap: 9px; }
.offset-legend span { display: flex; align-items: center; gap: 7px; color: #74878e; font-size: 0.49rem; }
.offset-legend i { width: 10px; height: 10px; border: 2px solid #7e99a1; }
.offset-legend span:last-child i { border-color: var(--cyan-deep); }

.mock-coating { grid-template-columns: 1fr 150px; }
.coating-piece { position: relative; width: 370px; height: 230px; color: var(--ocean); background: linear-gradient(145deg, rgba(2, 147, 210, 0.19), rgba(0, 60, 138, 0.04)); border: 2px solid var(--cyan-deep); }
.coating-piece > span { position: absolute; top: 15px; left: 16px; font-size: 0.5rem; font-weight: 850; letter-spacing: 0.08em; }
.edge { position: absolute; display: flex; align-items: center; justify-content: center; color: var(--ink); background: var(--amber); border-radius: 3px; font-size: 0.48rem; font-style: normal; font-weight: 850; }
.edge--top { top: -13px; left: calc(50% - 13px); width: 26px; height: 19px; }
.edge--bottom { bottom: -13px; left: calc(50% - 16px); width: 32px; height: 19px; }
.edge--left { top: calc(50% - 10px); left: -14px; width: 21px; height: 20px; }
.edge--right { top: calc(50% - 10px); right: -14px; width: 21px; height: 20px; }
.coating-lines { position: absolute; right: 0; bottom: 0; left: 0; display: grid; height: 72px; grid-template-columns: repeat(11, 1fr); }
.coating-lines b { border-right: 1px solid rgba(0, 60, 138, 0.4); background: rgba(0, 60, 138, 0.06); }
.mock-coating aside { display: flex; padding: 25px; flex-direction: column; color: var(--white); background: var(--ink); border-radius: 8px; }
.mock-coating aside small { color: var(--brand-sky); font-size: 0.49rem; font-weight: 800; }
.mock-coating aside strong { margin: 8px 0 16px; font-size: 1.3rem; }
.mock-coating aside span { padding-top: 13px; border-top: 1px solid var(--line-dark); color: rgba(255, 255, 255, 0.62); font-size: 0.58rem; }

.muntin-grid { position: relative; width: 260px; height: 220px; border: 7px solid #c6a874; background: rgba(2, 147, 210, 0.08); }
.muntin-grid i { position: absolute; top: 0; bottom: 0; width: 6px; background: #c6a874; }
.muntin-grid i:nth-child(1) { left: 33%; }
.muntin-grid i:nth-child(2) { left: 66%; }
.muntin-grid i:nth-child(3), .muntin-grid i:nth-child(4) { right: 0; left: 0; width: auto; height: 6px; }
.muntin-grid i:nth-child(3) { top: 33%; bottom: auto; }
.muntin-grid i:nth-child(4) { top: 66%; bottom: auto; }
.muntin-grid b { position: absolute; top: calc(33% - 3px); left: calc(33% - 3px); width: 12px; height: 12px; background: var(--amber); }
.muntin-bom { display: grid; padding: 20px; gap: 10px; background: var(--white); border: 1px solid var(--line); border-radius: 8px; }
.muntin-bom > small { color: var(--ocean); font-size: 0.49rem; font-weight: 850; letter-spacing: 0.1em; }
.muntin-bom > span { display: flex; padding-bottom: 8px; justify-content: space-between; border-bottom: 1px solid #e7ecea; font-size: 0.53rem; }
.muntin-bom i { color: #77898f; font-style: normal; }
.muntin-bom > strong { padding-top: 6px; font-size: 0.75rem; }

.mock-duplicate { display: flex; width: min(650px, 95%); align-items: center; justify-content: center; gap: 25px; }
.duplicate-card { display: grid; width: 240px; min-height: 150px; padding: 25px; align-content: center; gap: 8px; background: var(--white); border: 1px solid var(--line); border-radius: 8px; }
.duplicate-card.is-copy { border-color: var(--cyan-deep); box-shadow: inset 0 -3px var(--cyan-deep); }
.duplicate-card small { color: var(--ocean); font-size: 0.49rem; font-weight: 850; letter-spacing: 0.1em; }
.duplicate-card strong { font-size: 0.9rem; }
.duplicate-card span { color: #778b92; font-size: 0.56rem; }
.duplicate-arrow { display: flex; width: 35px; height: 35px; align-items: center; justify-content: center; color: var(--ink); background: var(--cyan); border-radius: 50%; }

.mock-manual { display: grid; width: min(700px, 96%); padding: 30px; grid-template-columns: 60px 1fr auto; align-items: center; gap: 20px; background: var(--white); border: 1px solid var(--line); border-radius: 8px; }
.manual-icon { display: flex; width: 55px; height: 55px; align-items: center; justify-content: center; color: var(--ocean); background: rgba(2, 147, 210, 0.12); border-radius: 7px; font-family: Georgia, serif; }
.mock-manual > div { display: grid; gap: 5px; }
.mock-manual small { color: var(--ocean); font-size: 0.48rem; font-weight: 850; letter-spacing: 0.1em; }
.mock-manual strong { font-size: 0.8rem; }
.mock-manual > div span { color: #788a90; font-size: 0.54rem; }
.mock-manual aside { display: grid; padding-left: 25px; gap: 7px; border-left: 1px solid var(--line); }
.mock-manual aside b { color: #789097; font-size: 0.58rem; }

.mock-action { display: grid; width: min(700px, 96%); padding: 27px; grid-template-columns: 1fr 1fr; align-items: center; gap: 25px; background: var(--white); border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 15px 40px rgba(0, 51, 143, 0.07); }
.mock-action > div { display: grid; gap: 7px; }
.mock-action small { color: var(--ocean); font-size: 0.49rem; font-weight: 850; letter-spacing: 0.1em; }
.mock-action strong { font-size: 0.8rem; line-height: 1.35; }
.mock-action > div span { color: #7b8e94; font-size: 0.55rem; }
.mock-action ul { display: grid; margin: 0; padding: 0; gap: 9px; list-style: none; }
.mock-action li { display: flex; align-items: center; gap: 7px; color: #5f777f; font-size: 0.53rem; }
.mock-action li .icon { color: var(--cyan-deep); }
.mock-action button { grid-column: 2; padding: 11px; color: var(--ink); background: var(--cyan); border: 0; border-radius: 5px; font-size: 0.57rem; font-weight: 800; }

.mock-review { display: grid; width: min(700px, 96%); grid-template-columns: 0.7fr 1.3fr; gap: 12px; }
.review-score, .review-list { display: flex; padding: 27px; flex-direction: column; justify-content: center; background: var(--white); border: 1px solid var(--line); border-radius: 8px; }
.review-score strong { color: var(--ocean); font-size: 2rem; }
.review-score span { color: #809096; font-size: 0.53rem; }
.review-list { gap: 10px; }
.review-list span { display: flex; align-items: center; gap: 7px; color: #58717a; font-size: 0.54rem; }
.review-list span .icon { color: var(--cyan-deep); }
.review-list .is-warning { padding: 9px; color: #85500e; background: rgba(201, 154, 56, 0.17); border-radius: 4px; }

.mock-audit { width: min(670px, 95%); }
.mock-audit > div { display: grid; min-height: 68px; grid-template-columns: 45px 20px 1fr; align-items: start; gap: 12px; }
.mock-audit > div > span { padding-top: 6px; color: #829398; font-family: Georgia, serif; font-size: 0.53rem; }
.mock-audit > div > i { position: relative; width: 9px; height: 9px; margin-top: 5px; background: #c1cfce; border-radius: 50%; }
.mock-audit > div > i::after { position: absolute; top: 9px; left: 4px; width: 1px; height: 59px; background: #d8e1de; content: ""; }
.mock-audit > div:last-child > i::after { display: none; }
.mock-audit > div > i.is-active { background: var(--cyan-deep); box-shadow: 0 0 0 4px rgba(2, 147, 210, 0.14); }
.mock-audit p { display: grid; margin: 0; padding: 0 0 15px; gap: 4px; }
.mock-audit strong { font-size: 0.63rem; }
.mock-audit small { color: #809197; font-size: 0.52rem; }

.mock-pdf { display: grid; width: min(620px, 95%); grid-template-columns: 1fr 0.65fr; align-items: center; gap: 30px; }
.pdf-page { display: flex; height: 260px; padding: 30px; flex-direction: column; background: var(--white); border: 1px solid var(--line); box-shadow: 12px 14px 0 #dbe3e0; transform: rotate(-2deg); }
.pdf-page > span { color: var(--cyan-deep); font-size: 0.48rem; font-weight: 900; letter-spacing: 0.1em; }
.pdf-page > strong { margin: 14px 0 24px; font-size: 0.72rem; }
.pdf-page i { width: 100%; height: 5px; margin-bottom: 12px; background: #e0e6e4; }
.pdf-page i:nth-of-type(2) { width: 82%; }
.pdf-page i:nth-of-type(3) { width: 64%; }
.pdf-page b { margin-top: auto; align-self: end; font-size: 0.8rem; }
.mock-pdf aside { display: grid; gap: 8px; }
.mock-pdf button { padding: 11px; color: #567078; background: var(--white); border: 1px solid var(--line); border-radius: 5px; font-size: 0.55rem; text-align: left; }
.mock-pdf button:first-child { color: var(--ink); border-color: var(--cyan-deep); box-shadow: inset 3px 0 var(--cyan-deep); }

.mock-confirmation { display: grid; width: min(720px, 96%); padding: 32px; grid-template-columns: 60px 1fr auto; align-items: center; gap: 20px; color: var(--white); background: var(--ink); border-radius: 10px; box-shadow: 0 18px 45px rgba(0, 51, 143, 0.14); }
.confirmation-check { display: flex; width: 52px; height: 52px; align-items: center; justify-content: center; color: var(--white); background: var(--brand-blue-600); border-radius: 50%; }
.confirmation-check .icon { width: 25px; height: 25px; }
.mock-confirmation > div { display: grid; gap: 5px; }
.mock-confirmation small { color: var(--brand-sky); font-size: 0.48rem; font-weight: 850; letter-spacing: 0.12em; }
.mock-confirmation strong { font-size: 1.05rem; }
.mock-confirmation p { margin: 0; color: var(--brand-sky); font-size: 0.55rem; }
.mock-confirmation aside { display: grid; gap: 7px; }
.mock-confirmation aside span { color: rgba(255, 255, 255, 0.66); font-size: 0.53rem; text-align: right; }

.mock-journey { display: grid; width: min(730px, 95%); grid-template-columns: repeat(4, 1fr); }
.mock-journey span { position: relative; display: grid; padding-top: 50px; text-align: center; }
.mock-journey span::before { position: absolute; top: 20px; right: 0; left: 0; height: 1px; background: #ccd8d5; content: ""; }
.mock-journey i { position: absolute; z-index: 2; top: 5px; left: calc(50% - 15px); display: flex; width: 30px; height: 30px; align-items: center; justify-content: center; background: var(--white); border: 1px solid #ccd8d5; border-radius: 50%; font-size: 0.52rem; font-style: normal; }
.mock-journey span.is-active i { color: var(--white); background: var(--brand-blue-600); border-color: var(--brand-blue-600); }
.mock-journey strong { font-size: 0.6rem; }

.step-action {
  display: grid;
  max-width: 1050px;
  margin-top: 14px;
  padding: 14px 17px;
  grid-template-columns: 105px 1fr;
  align-items: center;
  background: rgba(255, 255, 255, 0.48);
  border: 1px solid var(--line);
  border-radius: 7px;
}

.step-action span {
  color: var(--ocean);
  font-size: 0.5rem;
  font-weight: 850;
  letter-spacing: 0.1em;
}

.step-action p {
  margin: 0;
  color: #5d747c;
  font-size: 0.59rem;
  line-height: 1.45;
}

.step-nav {
  display: flex;
  max-width: 1050px;
  margin-top: 25px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.step-nav__previous {
  display: flex;
  max-width: 310px;
  align-items: center;
  gap: 12px;
  color: #657b83;
}

.step-nav__previous > span {
  display: grid;
  gap: 3px;
}

.step-nav__previous small,
.step-nav .button small {
  color: #91a0a4;
  font-size: 0.47rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.step-nav__previous strong {
  overflow: hidden;
  font-size: 0.59rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.step-nav .button {
  min-width: 185px;
  justify-content: space-between;
}

.step-nav .button > span {
  display: grid;
  gap: 4px;
  text-align: left;
}

.step-nav .button small {
  color: var(--white);
}

.step-nav .button > .step-nav__advance {
  display: flex;
  align-items: center;
  gap: 9px;
}

.step-nav__advance kbd {
  display: grid;
  min-width: 34px;
  height: 26px;
  padding-inline: 6px;
  place-items: center;
  color: var(--brand-blue-900);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-bottom-width: 3px;
  border-radius: 5px;
  box-shadow: 0 2px 0 rgba(0, 24, 68, 0.2);
  font-family: inherit;
  font-size: 0.48rem;
  font-weight: 900;
  line-height: 1;
}

.step-nav__advance .icon {
  width: 17px;
  height: 17px;
}

.assist-panel {
  display: flex;
  overflow: auto;
  padding: 28px 24px 23px;
  flex-direction: column;
  color: var(--white);
  background: linear-gradient(165deg, #003c8a, #00338f 75%);
  border-left: 1px solid rgba(255, 255, 255, 0.06);
}

.assist-panel__head {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 10px;
}

.assist-panel__head > div {
  display: grid;
}

.assist-panel__head small {
  color: var(--brand-sky);
  font-size: 0.45rem;
  font-weight: 850;
  letter-spacing: 0.13em;
}

.assist-panel__head strong {
  font-size: 0.84rem;
}

.assist-panel__head > i {
  padding: 5px 7px;
  color: #78e4a0;
  background: rgba(120, 228, 160, 0.08);
  border: 1px solid rgba(120, 228, 160, 0.17);
  border-radius: 100px;
  font-size: 0.42rem;
  font-style: normal;
  font-weight: 800;
}

.assist-mode {
  display: flex;
  margin-top: 35px;
  align-items: center;
  gap: 9px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.54rem;
}

.assist-mode span {
  padding: 5px 7px;
  color: var(--brand-sky);
  background: rgba(2, 147, 210, 0.08);
  border: 1px solid rgba(2, 147, 210, 0.14);
  border-radius: 4px;
  font-size: 0.46rem;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.assist-panel blockquote {
  margin: 19px 0 26px;
  color: rgba(255, 255, 255, 0.92);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.08rem;
  line-height: 1.55;
}

.assist-question {
  display: grid;
  width: 100%;
  padding: 13px;
  grid-template-columns: 27px 1fr 15px;
  align-items: center;
  gap: 9px;
  color: var(--white);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
}

.assist-question > span:first-child {
  display: flex;
  width: 27px;
  height: 27px;
  align-items: center;
  justify-content: center;
  color: var(--brand-blue-900);
  background: var(--brand-sky);
  border-radius: 50%;
}

.assist-question p {
  display: grid;
  margin: 0;
  gap: 4px;
  font-size: 0.56rem;
  line-height: 1.35;
}

.assist-question small {
  color: rgba(255, 255, 255, 0.39);
  font-size: 0.42rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.assist-answer {
  margin-top: 9px;
  padding: 14px;
  background: rgba(2, 147, 210, 0.07);
  border-left: 2px solid var(--cyan);
}

.assist-answer span {
  color: var(--brand-sky);
  font-size: 0.43rem;
  font-weight: 850;
  letter-spacing: 0.1em;
}

.assist-answer p {
  margin: 7px 0 0;
  color: rgba(255, 255, 255, 0.64);
  font-size: 0.52rem;
  line-height: 1.5;
}

.assist-panel__context {
  display: grid;
  margin-top: auto;
  padding-top: 22px;
  gap: 5px;
  border-top: 1px solid var(--line-dark);
}

.assist-panel__context span {
  color: var(--brand-sky);
  font-size: 0.45rem;
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.assist-panel__context strong {
  font-size: 0.57rem;
  line-height: 1.35;
}

.assist-panel__context small {
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.47rem;
}

.demo-preview {
  position: relative;
  overflow: auto;
  grid-column: 2;
  grid-row: 3;
  padding: clamp(34px, 6vh, 72px) clamp(36px, 7vw, 110px);
  background: radial-gradient(circle at 90% 0%, rgba(2, 147, 210, 0.12), transparent 34%), var(--paper-deep);
}

.demo-preview__number {
  position: absolute;
  right: 7%;
  bottom: -8%;
  color: rgba(0, 51, 143, 0.05);
  font-family: Georgia, serif;
  font-size: 30vw;
  line-height: 1;
}

.demo-preview h1 {
  position: relative;
  z-index: 2;
  max-width: 850px;
  margin: 18px 0 20px;
  font-size: clamp(3rem, min(6.2vw, 8.2vh), 6.5rem);
  font-weight: 580;
  letter-spacing: -0.065em;
  line-height: 0.92;
}

.demo-preview > p {
  position: relative;
  z-index: 2;
  max-width: 650px;
  color: #586f78;
  font-size: 1rem;
  line-height: 1.55;
}

.demo-preview > .product-signature {
  margin-top: 12px;
}

.preview-status {
  position: relative;
  z-index: 2;
  display: grid;
  width: fit-content;
  margin-top: 24px;
  padding: 12px 16px;
  gap: 5px;
  color: var(--white);
  background: var(--ink);
  border-radius: 7px;
}

.preview-status span { color: var(--brand-sky); font-size: 0.49rem; font-weight: 850; letter-spacing: 0.1em; }
.preview-status strong { font-size: 0.68rem; }
.demo-preview__actions { position: relative; z-index: 2; display: flex; margin-top: 26px; gap: 10px; }

.demo-access-gate {
  display: grid;
  overflow: auto;
  grid-column: 2;
  grid-row: 3;
  grid-template-columns: minmax(360px, 0.85fr) minmax(470px, 1.15fr);
  align-items: center;
  gap: clamp(45px, 7vw, 120px);
  padding: clamp(45px, 7vw, 110px);
  background: radial-gradient(circle at 15% 20%, rgba(2, 147, 210, 0.11), transparent 32%), var(--paper-deep);
}

.demo-access-gate__visual {
  position: relative;
  min-height: 390px;
  background: linear-gradient(145deg, var(--brand-blue-900), var(--brand-blue-600));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.demo-access-gate__orb {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: flex;
  width: 92px;
  height: 92px;
  align-items: center;
  justify-content: center;
  color: var(--white);
  background: var(--brand-cyan);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  box-shadow: 0 0 0 24px rgba(255, 255, 255, 0.08), 0 22px 50px rgba(0, 0, 0, 0.18);
  transform: translate(-50%, -50%);
}

.demo-access-gate__orb .icon { width: 34px; height: 34px; }
.demo-access-gate__glass { position: absolute; width: 190px; height: 260px; border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.045); }
.demo-access-gate__glass--one { top: 55px; left: 65px; transform: rotate(-10deg); }
.demo-access-gate__glass--two { right: 65px; bottom: 55px; transform: rotate(12deg); }
.demo-access-gate__copy h1 { max-width: 720px; margin: 21px 0 21px; font-size: clamp(3rem, 5vw, 5.5rem); font-weight: 570; letter-spacing: -0.065em; line-height: 0.94; }
.demo-access-gate__copy > p { max-width: 650px; margin: 0; color: var(--muted); font-size: 0.9rem; line-height: 1.75; }
.demo-access-gate__actions { display: flex; margin-top: 32px; gap: 10px; }
.demo-access-gate__copy > small { display: flex; margin-top: 22px; align-items: center; gap: 9px; color: var(--muted); font-size: 0.55rem; line-height: 1.5; }
.demo-access-gate__copy > small .icon { width: 18px; height: 18px; color: var(--brand-blue-600); }

/* Acceso */
.access-page {
  display: grid;
  min-height: calc(100vh - 82px);
  grid-template-columns: 1fr 1fr;
  background: var(--ink);
}

.access-intro {
  display: flex;
  padding: 95px max(55px, calc((100vw - 1440px) / 2));
  padding-right: 8vw;
  flex-direction: column;
  color: var(--white);
  background: radial-gradient(circle at 0% 20%, rgba(2, 147, 210, 0.14), transparent 40%);
}

.access-intro--compact {
  justify-content: center;
}

.access-security-list {
  display: grid;
  max-width: 570px;
  margin-top: 48px;
  gap: 0;
  border-top: 1px solid var(--line-dark);
}

.access-security-list > span {
  display: flex;
  min-height: 62px;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.78);
  border-bottom: 1px solid var(--line-dark);
  font-size: 0.65rem;
}

.access-security-list .icon {
  width: 20px;
  height: 20px;
  color: var(--brand-sky);
}

.access-intro h1,
.access-success h1 {
  max-width: 650px;
  margin: 25px 0 22px;
  font-size: clamp(3.2rem, 5.5vw, 6.3rem);
  font-weight: 570;
  letter-spacing: -0.065em;
  line-height: 0.92;
}

.access-intro > p {
  max-width: 570px;
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.95rem;
  line-height: 1.7;
}

.access-intro ol {
  display: grid;
  margin: 55px 0;
  padding: 0;
  gap: 0;
  list-style: none;
}

.access-intro li {
  display: grid;
  max-width: 570px;
  min-height: 76px;
  grid-template-columns: 45px 1fr;
  align-items: center;
  border-top: 1px solid var(--line-dark);
}

.access-intro li:last-child { border-bottom: 1px solid var(--line-dark); }
.access-intro li > span { color: var(--brand-sky); font-family: Georgia, serif; font-size: 0.68rem; }
.access-intro li > div { display: grid; gap: 4px; }
.access-intro li strong { font-size: 0.72rem; }
.access-intro li small { color: rgba(255, 255, 255, 0.75); font-size: 0.57rem; }

.access-trust {
  display: flex;
  margin-top: auto;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.75);
}

.access-trust > .icon { width: 28px; height: 28px; color: var(--brand-sky); }
.access-trust > span { display: grid; gap: 4px; font-size: 0.54rem; }
.access-trust strong { color: rgba(255, 255, 255, 0.85); font-size: 0.6rem; }

.access-form-wrap {
  position: relative;
  display: flex;
  padding: 65px clamp(35px, 6vw, 100px);
  align-items: center;
  justify-content: center;
  background: var(--paper);
}

.access-form {
  display: grid;
  width: min(510px, 100%);
  gap: 19px;
}

.prototype-badge {
  position: absolute;
  top: 105px;
  padding: 6px 9px;
  color: #7a551f;
  background: rgba(201, 154, 56, 0.16);
  border: 1px solid rgba(174, 105, 19, 0.18);
  border-radius: 100px;
  font-size: 0.47rem;
  font-weight: 850;
  letter-spacing: 0.09em;
}

.access-form > div:first-child {
  margin-bottom: 8px;
}

.access-form > div:first-child small {
  color: var(--ocean);
  font-size: 0.52rem;
  font-weight: 850;
  letter-spacing: 0.12em;
}

.access-form h2 {
  margin: 10px 0 8px;
  font-size: 2.2rem;
  font-weight: 600;
  letter-spacing: -0.045em;
}

.access-form > div:first-child p {
  margin: 0;
  color: var(--muted);
  font-size: 0.73rem;
  line-height: 1.55;
}

.access-form > label:not(.check-field),
.access-form__row > label {
  display: grid;
  gap: 7px;
  color: #36515c;
  font-size: 0.62rem;
  font-weight: 750;
}

.access-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}

.access-form input,
.access-form select,
.access-form textarea {
  width: 100%;
  height: 48px;
  padding: 0 13px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(0, 51, 143, 0.18);
  border-radius: 6px;
  font-size: 0.73rem;
}

.access-form textarea {
  height: auto;
  min-height: 105px;
  padding-block: 12px;
  resize: vertical;
  font-family: inherit;
  line-height: 1.5;
}

.field-optional {
  color: var(--muted);
  font-size: 0.52rem;
  font-weight: 500;
}

.access-form input::placeholder { color: #9aa8ab; }

.access-form button:disabled {
  opacity: 0.58;
  cursor: wait;
}

.access-form__error {
  margin: -5px 0 0;
  padding: 11px 13px;
  color: #8a2630;
  background: #fff0f1;
  border: 1px solid #efc8cb;
  border-radius: 6px;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.5;
}

.access-form__login {
  justify-self: center;
  color: var(--ocean);
  font-size: 0.62rem;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.check-field {
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: start;
  gap: 10px;
  color: #647980;
  font-size: 0.57rem;
  line-height: 1.5;
}

.check-field input {
  width: 17px;
  height: 17px;
  margin: 1px 0 0;
  accent-color: var(--ocean);
}

.form-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #7c8d92;
  font-size: 0.5rem;
}

.access-page--success {
  display: flex;
  min-height: calc(100vh - 82px);
  padding: 90px 40px;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  background: radial-gradient(circle at 50% 30%, rgba(2, 147, 210, 0.17), transparent 38%), var(--paper);
}

.access-success {
  display: flex;
  max-width: 830px;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

.access-success__icon {
  display: flex;
  width: 68px;
  height: 68px;
  margin-bottom: 25px;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  background: var(--cyan);
  border-radius: 50%;
  box-shadow: 0 0 0 18px rgba(2, 147, 210, 0.09);
}

.access-success h1 { margin-inline: auto; }
.access-success > p { max-width: 660px; margin: 0; color: var(--muted); line-height: 1.7; }
.prototype-note { display: grid; margin-top: 30px; padding: 14px 20px; gap: 4px; background: rgba(201, 154, 56, 0.13); border: 1px solid rgba(174, 105, 19, 0.17); border-radius: 7px; }
.prototype-note strong { color: #794c11; font-size: 0.62rem; }
.prototype-note span { color: #856634; font-size: 0.55rem; }
.access-success__actions { display: flex; margin-top: 35px; gap: 10px; }

.error-page {
  padding: 30px;
  text-align: center;
}

.error-page h1 { margin: 20px 0 0; font-size: 2.6rem; letter-spacing: -0.05em; }
.error-page p { max-width: 550px; margin: 0 0 15px; color: var(--muted); }

.reveal {
  animation: reveal-up 600ms both cubic-bezier(.2, .8, .2, 1);
}

.reveal--delay {
  animation-delay: 100ms;
}

@keyframes reveal-up {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes boot-pulse {
  from { opacity: 0.35; transform: skewY(25deg) translateY(3px); }
  to { opacity: 1; transform: skewY(25deg) translateY(-3px); }
}

@keyframes mascot-enter-left {
  from { opacity: 0; transform: translateX(-65px) rotate(-4deg); }
  to { opacity: 1; transform: translateX(0) rotate(0); }
}

@keyframes mascot-enter-right {
  from { opacity: 0; transform: translateX(65px) rotate(4deg); }
  to { opacity: 1; transform: translateX(0) rotate(0); }
}

@keyframes mascot-enter-rope {
  0% { opacity: 0; transform: translateY(-470px) rotate(-4deg); }
  10% { opacity: 1; }
  70% { opacity: 1; transform: translateY(11px) rotate(3deg); }
  84% { transform: translateY(-6px) rotate(-1.5deg); }
  93% { transform: translateY(3px) rotate(0.5deg); }
  100% { opacity: 1; transform: translateY(0) rotate(0); }
}

@keyframes mascot-rope-release {
  0%, 76% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes mascot-enter-ladder-left {
  0% { opacity: 0; transform: translate(-8px, 225px) rotate(-5deg); }
  14% { opacity: 1; }
  32% { transform: translate(7px, 158px) rotate(3deg); }
  49% { transform: translate(-3px, 105px) rotate(-2deg); }
  66% { transform: translate(5px, 60px) rotate(2deg); }
  82% { transform: translate(-2px, 24px) rotate(-1deg); }
  100% { opacity: 1; transform: translate(0, 0) rotate(0); }
}

@keyframes mascot-enter-ladder-right {
  0% { opacity: 0; transform: translate(8px, 225px) rotate(5deg); }
  14% { opacity: 1; }
  32% { transform: translate(-7px, 158px) rotate(-3deg); }
  49% { transform: translate(3px, 105px) rotate(2deg); }
  66% { transform: translate(-5px, 60px) rotate(-2deg); }
  82% { transform: translate(2px, 24px) rotate(1deg); }
  100% { opacity: 1; transform: translate(0, 0) rotate(0); }
}

@keyframes mascot-ladder-visit {
  0% { opacity: 0; clip-path: inset(100% 0 0); }
  12%, 72% { opacity: 1; }
  35% { clip-path: inset(0 0 0); }
  100% { opacity: 0; clip-path: inset(0 0 0); }
}

@keyframes mascot-exit-left {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(-55px); }
}

@keyframes mascot-exit-right {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(55px); }
}

@keyframes mascot-float {
  0%, 100% { transform: translate(-50%, -48%); }
  50% { transform: translate(-50%, -52%); }
}

@keyframes mascot-blink {
  0%, 46%, 50%, 100% { transform: scaleY(1); }
  48% { transform: scaleY(0.12); }
}

@keyframes mascot-pen-gesture {
  0%, 100% { transform: rotate(0deg); }
  45%, 60% { transform: rotate(-7deg); }
}

@keyframes mascot-pointer-tap {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  45%, 60% { transform: translate(4px, -4px) rotate(-2deg); }
}

@keyframes mascot-tap-ring {
  0%, 42% { opacity: 0; transform: scale(0.35); }
  52% { opacity: 0.9; }
  78%, 100% { opacity: 0; transform: scale(1.7); }
}

@keyframes mascot-screen-glow {
  0%, 100% { opacity: 0.58; }
  50% { opacity: 1; }
}

@keyframes mascot-scanner-move {
  0%, 100% { transform: rotate(0deg); }
  45%, 65% { transform: rotate(5deg); }
}

@keyframes mascot-scan-beam {
  0%, 100% { opacity: 0.18; }
  50% { opacity: 1; }
}

@keyframes mascot-steer {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}

@media (max-width: 1220px) {
  :root { --shell: min(1120px, calc(100vw - 48px)); }
  .site-header { grid-template-columns: 1fr auto 1fr; }
  .site-nav { gap: 20px; }
  .hero { min-height: auto; padding-block: 70px 85px; grid-template-columns: 0.85fr 1.15fr; gap: 35px; }
  .hero__copy h1 { font-size: clamp(3.4rem, 5.5vw, 5rem); }
  .journey-node { width: 96px; padding: 11px; }
  .journey-node--5 { left: 76%; }
  .feature-grid { grid-template-columns: 1fr 1fr; }
  .feature-card--large { grid-row: auto; }
  .feature-card--wide { grid-column: span 2; }
  .chapter-showcase { grid-template-columns: repeat(2, 1fr); }
  .assist-section { gap: 55px; }
  .company-bridge { gap: 55px; }
  .about-hero { gap: 55px; }
  .experience-section { gap: 65px; }
  .contact-body { gap: 55px; }
  .blog-featured { grid-template-columns: repeat(3, 1fr); }
  .article-layout { grid-template-columns: 70px minmax(0, 1fr) 280px; gap: 38px; }
  .demo-main { grid-template-columns: minmax(540px, 1fr) 270px; }
  .demo-access-gate { gap: 55px; padding: 55px; }
  .step-content { padding-inline: 34px; }
  .teacher-mascot { width: 160px; }
  .mascot-side-left .mock-content { padding-left: 132px; }
  .mascot-side-right .mock-content { padding-right: 132px; }
}

@media (max-width: 980px) {
  :root { --shell: calc(100vw - 36px); }
  .site-header { height: 72px; grid-template-columns: 1fr auto; }
  .site-header__menu { display: inline-flex; grid-column: 2; grid-row: 1; }
  .site-nav { position: absolute; top: 71px; right: 0; left: 0; display: none; padding: 22px; flex-direction: column; align-items: stretch; gap: 0; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 20px 35px rgba(0, 51, 143, 0.1); }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 13px; font-size: 0.86rem; }
  .site-nav a::after { display: none; }
  .site-nav .language-selector { width: 100%; height: 42px; margin-top: 12px; border-radius: 8px; }
  .site-nav .language-selector select { width: 100%; max-width: none; }
  .site-header__actions { display: none; }
  .hero { padding-block: 70px; grid-template-columns: 1fr; }
  .hero__copy { max-width: 760px; }
  .hero__visual { width: min(800px, 100%); }
  .metric-strip { padding-inline: 18px; grid-template-columns: repeat(4, 1fr); }
  .metric-strip > div { padding-inline: 18px; }
  .metric-strip > p { display: none; }
  .section-heading--split { grid-template-columns: 1fr; gap: 25px; }
  .section-heading--split > p { max-width: 660px; }
  .section-heading--light { grid-template-columns: 1fr; gap: 25px; }
  .section-heading--light > p { grid-column: 1; grid-row: auto; max-width: 620px; }
  .flow-index { overflow: auto; grid-template-columns: repeat(12, 90px); padding-bottom: 10px; }
  .assist-section { grid-template-columns: 1fr; }
  .assist-section__visual { order: 2; }
  .company-bridge { grid-template-columns: 1fr; gap: 50px; }
  .company-bridge__facts article { min-height: 190px; }
  .about-hero { min-height: auto; grid-template-columns: 1fr; }
  .about-hero__visual { min-height: 410px; }
  .origin-section__grid { grid-template-columns: 1fr; gap: 42px; }
  .origin-section__milestones { grid-column: 1; }
  .experience-section { grid-template-columns: 1fr; }
  .about-cta { grid-template-columns: 1fr; align-items: start; gap: 35px; }
  .contact-hero,
  .blog-hero { min-height: auto; grid-template-columns: 1fr; gap: 40px; }
  .contact-body { grid-template-columns: 1fr; }
  .contact-offices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 30px; }
  .contact-offices > .eyebrow,
  .contact-offices__note { grid-column: 1 / -1; }
  .blog-featured { grid-template-columns: 1fr 1fr; }
  .blog-featured .blog-card:first-child { grid-column: 1 / -1; grid-template-columns: 0.9fr 1.1fr; }
  .blog-featured .blog-card:first-child .blog-card__body { min-height: 300px; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .article-layout { grid-template-columns: 70px minmax(0, 1fr); }
  .article-layout > aside { grid-column: 2; }
  .legal-layout { grid-template-columns: 210px minmax(0, 1fr); gap: 45px; }
  .legal-purpose-grid { grid-template-columns: 1fr; }
  .corporate-preview { grid-template-columns: 1fr; gap: 45px; }
  .access-banner { padding: 55px; grid-template-columns: 1fr; gap: 30px; }
  .site-footer__top { grid-template-columns: 1fr 1fr; gap: 40px; }
  .cookie-banner { grid-template-columns: 1fr; gap: 18px; }
  .cookie-banner__actions { justify-content: flex-end; }
  .demo-app { grid-template-columns: 1fr; }
  .demo-topbar { grid-template-columns: 62px minmax(180px, 1fr) minmax(140px, 240px) auto; }
  .demo-topbar__brand { display: none; }
  .demo-topbar__menu { display: inline-flex; justify-self: center; }
  .demo-topbar__context { padding-left: 8px; }
  .demo-reset { display: none; }
  .chapter-progress { padding-inline: 12px; }
  .chapter-progress__rail { right: 23px; left: 23px; }
  .chapter-progress__stages a > small { display: none; }
  .demo-sidebar { position: fixed; top: 126px; bottom: 0; left: 0; width: 260px; transform: translateX(-105%); transition: transform 200ms ease; box-shadow: 20px 0 45px rgba(0, 51, 143, 0.16); }
  .demo-sidebar.is-open { transform: translateX(0); }
  .demo-main, .demo-preview { grid-column: 1; }
  .demo-main { grid-template-columns: minmax(0, 1fr) 275px; }
  .demo-access-gate { grid-column: 1; grid-template-columns: 0.7fr 1.3fr; }
}

.mock-toolbar--factory-monitor { border-top-color: #157c98; }
.mock-toolbar--factory-monitor .mock-monitor-brand { min-width: 172px; }
.mock-toolbar--factory-monitor .mock-monitor-brand .product-logo { --logo-height: 20px; }
.mock-toolbar--factory-monitor .mock-monitor-brand small { color: #66818b; }
.mock-toolbar--factory-monitor nav span.is-active { color: #126f88; }
.mock-toolbar--factory-monitor nav span.is-active::after { background: #1591a8; }
.mock-toolbar--factory-monitor.is-floor { border-top-color: #ca9b2c; }
.mock-toolbar--factory-monitor.is-floor nav span.is-active { color: #8c6818; }
.mock-toolbar--factory-monitor.is-floor nav span.is-active::after { background: #d5a52c; }

.mock-content--factory-monitor {
  min-height: 373px;
  padding: 23px 28px 43px;
  background:
    linear-gradient(rgba(20, 99, 120, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 99, 120, .035) 1px, transparent 1px),
    #edf3f5;
  background-size: 22px 22px;
}

.factory-monitor { width: min(800px, 100%); color: #526e78; }
.factory-monitor *, .factory-monitor *::before, .factory-monitor *::after { box-sizing: border-box; }
.factory-monitor small, .factory-monitor em, .factory-monitor i { font-style: normal; }
.factory-monitor .icon { width: 13px; height: 13px; flex: 0 0 auto; }
.factory-monitor button { display: inline-flex; min-height: 29px; padding: 6px 10px; align-items: center; justify-content: center; gap: 5px; color: #fff; background: #167a92; border: 0; border-radius: 5px; font-family: inherit; font-size: .28rem; font-weight: 900; letter-spacing: .02em; }
.monitor-card, .monitor-dialog { overflow: hidden; background: #fff; border: 1px solid #d4e1e5; border-radius: 9px; box-shadow: 0 10px 27px rgba(24, 61, 73, .1); }
.monitor-head { display: flex; min-height: 57px; padding: 10px 14px; align-items: center; justify-content: space-between; gap: 12px; background: linear-gradient(90deg, #f8fbfc, #eff6f7); border-bottom: 1px solid #dce7ea; }
.monitor-head > div { display: grid; min-width: 0; gap: 3px; }
.monitor-head small { color: #16859b; font-size: .27rem; font-weight: 900; letter-spacing: .1em; }
.monitor-head strong { color: #183f4e; font-size: .53rem; line-height: 1.18; }
.monitor-head > span { padding: 5px 8px; color: #1b6e80; background: #e5f3f5; border: 1px solid #cce3e8; border-radius: 100px; font-size: .25rem; font-weight: 900; white-space: nowrap; }
.monitor-card > footer { display: flex; min-height: 37px; padding: 7px 13px; align-items: center; gap: 11px; color: #6a848d; background: #f7fafb; border-top: 1px solid #dee8eb; font-size: .27rem; }
.monitor-card > footer span { display: flex; align-items: center; gap: 4px; }
.monitor-card > footer strong { margin-left: auto; color: #2f5b69; }
.monitor-card > footer em { color: #8b681d; font-weight: 800; }
.monitor-status { display: inline-flex; width: fit-content; padding: 4px 6px; align-items: center; gap: 4px; color: #186b7e; background: #e5f3f6; border-radius: 100px; font-size: .22rem; font-weight: 900; white-space: nowrap; }
.monitor-status i { width: 6px; height: 6px; background: currentColor; border-radius: 50%; }
.monitor-status.is-done { color: #24715e; background: #e4f3ed; }
.monitor-status.is-ready { color: #906b1c; background: #fff3d8; }
.monitor-status.is-delay { color: #a5413b; background: #fde9e7; }
.monitor-status.is-info { color: #627983; background: #edf2f4; }

.monitor-overview__views { display: grid; padding: 18px 15px; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.monitor-overview__views article { position: relative; display: grid; min-height: 155px; padding: 16px 13px 13px; align-content: end; gap: 5px; overflow: hidden; background: #f5f8f9; border: 1px solid #dbe5e8; border-radius: 7px; }
.monitor-overview__views article::before { position: absolute; top: 0; right: 0; left: 0; height: 47px; background: repeating-linear-gradient(90deg, transparent 0 18px, rgba(21, 120, 146, .09) 18px 19px), linear-gradient(135deg, #e8f3f5, #f5f8f9); content: ''; }
.monitor-overview__views article.is-active { background: #eef8f9; border-color: #70b8c4; box-shadow: inset 0 -3px #1889a0; }
.monitor-overview__views article > span { position: absolute; top: 14px; left: 13px; z-index: 1; color: #16829a; font-size: .42rem; font-weight: 950; }
.monitor-overview__views small { color: #718990; font-size: .22rem; font-weight: 900; letter-spacing: .07em; }
.monitor-overview__views strong { color: #244d5b; font-size: .48rem; }
.monitor-overview__views p { margin: 0; color: #72878e; font-size: .29rem; line-height: 1.35; }

.monitor-baseline__cards { display: grid; padding: 15px 17px 9px; grid-template-columns: 1fr 36px 1fr; align-items: center; gap: 9px; }
.monitor-baseline__cards > article { display: grid; min-height: 103px; padding: 13px; align-content: center; gap: 5px; background: #f6f9fa; border: 1px solid #dae5e8; border-radius: 7px; }
.monitor-baseline__cards > i { display: grid; place-items: center; color: #158aa0; }
.monitor-baseline__cards > i .icon { width: 22px; height: 22px; }
.monitor-baseline__cards small, .monitor-detail-cols small { color: #728b93; font-size: .23rem; font-weight: 900; letter-spacing: .08em; }
.monitor-baseline__cards strong { color: #244d5c; font-size: .48rem; }
.monitor-baseline__cards article > span { color: #7b9097; font-size: .27rem; }
.monitor-timeline { position: relative; display: flex; min-height: 82px; margin: 0 17px 13px; padding: 27px 13px 0; justify-content: space-between; border-top: 2px solid #d6e4e8; }
.monitor-timeline > span { position: relative; display: grid; gap: 2px; }
.monitor-timeline > span::before { position: absolute; top: -33px; left: 0; width: 11px; height: 11px; background: #fff; border: 3px solid #7b9ba4; border-radius: 50%; content: ''; }
.monitor-timeline > span.is-now::before { border-color: #158ca2; box-shadow: 0 0 0 4px rgba(21, 140, 162, .13); }
.monitor-timeline b { color: #315764; font-size: .33rem; }
.monitor-timeline small { color: #80949a; font-size: .2rem; font-weight: 850; }
.monitor-timeline em { position: absolute; top: 21px; left: 58%; padding: 4px 6px; color: #9a6e17; background: #fff1ce; border-radius: 4px; font-size: .23rem; font-weight: 850; transform: translateX(-50%); }

.monitor-kpis__grid { display: grid; padding: 16px 13px; grid-template-columns: 1.35fr repeat(4, 1fr); gap: 7px; }
.monitor-kpis__grid article { display: grid; min-height: 126px; padding: 11px 9px; align-content: center; gap: 6px; background: #f5f8f9; border: 1px solid #dbe5e8; border-radius: 7px; }
.monitor-kpis__grid article.is-alert { background: #fff2f0; border-color: #ecc9c5; }
.monitor-kpis__grid small { min-height: 20px; color: #718990; font-size: .21rem; font-weight: 900; letter-spacing: .05em; }
.monitor-kpis__grid strong { color: #1e5262; font-size: .87rem; line-height: 1; }
.monitor-kpis__grid sup { color: #188ba2; font-size: .37rem; }
.monitor-kpis__grid em { color: #778e96; font-size: .23rem; }
.monitor-kpis__grid article > i { height: 5px; overflow: hidden; background: #dce8eb; border-radius: 100px; }
.monitor-kpis__grid article > i b { display: block; height: 100%; background: #188ba2; border-radius: inherit; }
.monitor-spark { display: flex; width: 130px; height: 23px; align-items: end; gap: 4px; }
.monitor-spark i { flex: 1; min-height: 3px; background: #38a1b4; border-radius: 2px 2px 0 0; }

.monitor-flow__grid { display: grid; min-height: 248px; padding: 15px 12px; grid-template-columns: 1.1fr 34px 1fr 24px 1.1fr; align-items: center; gap: 6px; }
.monitor-flow__grid > div { display: grid; gap: 7px; }
.monitor-flow__grid > span { display: grid; height: 150px; align-content: space-between; justify-items: center; color: #759099; }
.monitor-flow__grid > span i { width: 100%; height: 2px; background: #c7dadd; }
.monitor-flow__grid > span b { color: #738b93; font-size: .19rem; letter-spacing: .06em; transform: rotate(-90deg); }
.monitor-flow__grid > i { display: grid; place-items: center; color: #168da3; }
.monitor-section { display: grid; min-height: 90px; padding: 10px; gap: 7px; background: #f5f8f9; border: 1px solid #dae5e8; border-left: 4px solid #188ca2; border-radius: 6px; }
.monitor-section.is-done { border-left-color: #2a8b71; }
.monitor-section.is-ready { border-left-color: #d2a12e; }
.monitor-section.is-delay { border-left-color: #cf4c43; }
.monitor-section header, .monitor-section footer { display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.monitor-section header > strong { color: #234d5b; font-size: .36rem; }
.monitor-section > div, .monitor-table article > span:nth-child(3) > i { height: 5px; overflow: hidden; background: #dce7ea; border-radius: 100px; }
.monitor-section > div span, .monitor-table article > span:nth-child(3) > i b { display: block; height: 100%; background: #1b91a7; border-radius: inherit; }
.monitor-section footer b { color: #23596a; font-size: .34rem; }
.monitor-section footer small { color: #7a9097; font-size: .2rem; text-align: right; }

.monitor-states__grid { display: grid; padding: 17px 14px; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.monitor-states__grid article { display: grid; min-height: 204px; padding: 12px 10px; align-content: start; justify-items: start; gap: 7px; background: #f5f8f9; border-top: 4px solid #1b8ba1; border-radius: 6px; }
.monitor-states__grid article.is-done { border-color: #27876f; }
.monitor-states__grid article.is-ready { border-color: #d1a12d; }
.monitor-states__grid article.is-delay { border-color: #cf4d44; }
.monitor-states__grid article > span { display: grid; width: 30px; height: 30px; place-items: center; color: #fff; background: #1b8ba1; border-radius: 50%; font-size: .36rem; font-weight: 900; }
.monitor-states__grid article.is-done > span { background: #27876f; }
.monitor-states__grid article.is-ready > span { background: #d1a12d; }
.monitor-states__grid article.is-delay > span { background: #cf4d44; }
.monitor-states__grid small { color: #748b93; font-size: .22rem; font-weight: 900; }
.monitor-states__grid strong { color: #274f5d; font-size: .34rem; }
.monitor-states__grid p { margin: 0; color: #72888f; font-size: .26rem; line-height: 1.4; }
.monitor-states__grid em { margin-top: auto; color: #587984; font-size: .23rem; font-weight: 800; }

.monitor-modal-stage, .monitor-floor-action { position: relative; display: grid; min-height: 304px; place-items: center; overflow: hidden; background: #dbe4e7; border-radius: 9px; }
.monitor-modal-stage > div:first-child { position: absolute; inset: 35px 25px; opacity: .38; filter: blur(.6px); }
.monitor-dialog { position: relative; z-index: 1; width: min(720px, calc(100% - 50px)); }
.monitor-detail-strip { display: grid; grid-template-columns: repeat(4, 1fr); background: #eef5f6; border-bottom: 1px solid #d9e5e8; }
.monitor-detail-strip > span { display: grid; min-height: 48px; padding: 7px 10px; align-content: center; gap: 3px; border-right: 1px solid #d6e3e6; }
.monitor-detail-strip > span:last-child { border-right: 0; }
.monitor-detail-strip small { color: #789097; font-size: .2rem; font-weight: 900; }
.monitor-detail-strip strong { color: #2d5967; font-size: .31rem; }
.monitor-detail-cols { display: grid; padding: 11px; grid-template-columns: 1.2fr 1fr .9fr; gap: 8px; }
.monitor-detail-cols article { display: grid; min-height: 103px; padding: 9px; align-content: start; gap: 5px; background: #f7f9fa; border: 1px solid #dce6e8; border-radius: 5px; }
.monitor-detail-cols article.is-warning { background: #fff7e4; border-color: #ead7a7; }
.monitor-detail-cols strong { color: #285260; font-size: .34rem; }
.monitor-detail-cols span, .monitor-detail-cols em { color: #718990; font-size: .24rem; }
.monitor-dialog > footer { display: flex; min-height: 40px; padding: 7px 11px; align-items: center; justify-content: flex-end; gap: 8px; background: #f5f8f9; border-top: 1px solid #dce6e9; }
.monitor-dialog > footer > span { display: flex; margin-right: auto; align-items: center; gap: 4px; color: #65818a; font-size: .25rem; }

.monitor-table { padding: 8px 11px 11px; }
.monitor-table article { display: grid; min-height: 46px; padding: 6px 7px; grid-template-columns: 35px 1.2fr 1fr auto 45px; align-items: center; gap: 8px; border-bottom: 1px solid #e2e9eb; }
.monitor-table article.is-active { background: #edf7f8; box-shadow: inset 3px 0 #178aa1; }
.monitor-table article > span:first-child b { display: grid; width: 25px; height: 25px; place-items: center; color: #297084; background: #e6f1f3; border-radius: 50%; font-size: .28rem; }
.monitor-table article > span:nth-child(2) { display: grid; gap: 2px; }
.monitor-table article > span:nth-child(2) strong { color: #28515f; font-size: .34rem; }
.monitor-table article > span:nth-child(2) small { color: #83959b; font-size: .21rem; }
.monitor-table article > span:nth-child(3) { display: grid; grid-template-columns: 1fr 27px; align-items: center; gap: 6px; color: #647f88; font-size: .23rem; }
.monitor-table button { min-height: 25px; padding: 4px 6px; font-size: .22rem; }

.monitor-alerts__grid { display: grid; padding: 12px; grid-template-columns: 1.55fr .75fr; gap: 10px; }
.monitor-alerts__grid > section, .monitor-alerts__grid > aside { display: grid; align-content: start; gap: 6px; }
.monitor-alerts__grid > section > small, .monitor-alerts__grid > aside > small { color: #718a92; font-size: .23rem; font-weight: 900; letter-spacing: .08em; }
.monitor-alerts__grid section article { display: grid; min-height: 45px; padding: 6px 7px; grid-template-columns: 45px 1fr 40px; align-items: center; gap: 7px; background: #f7f9fa; border-left: 3px solid #6d929c; border-radius: 4px; }
.monitor-alerts__grid section article.is-delay { background: #fff0ee; border-color: #cf4d44; }
.monitor-alerts__grid section article.is-ready { background: #fff8e8; border-color: #d2a12e; }
.monitor-alerts__grid section article.is-active { background: #ebf6f8; border-color: #168ba1; }
.monitor-alerts__grid section article > b { color: #6a8189; font-size: .2rem; }
.monitor-alerts__grid section article > div { display: grid; gap: 2px; }
.monitor-alerts__grid section strong { color: #2e5664; font-size: .29rem; }
.monitor-alerts__grid section span { color: #7b9097; font-size: .22rem; }
.monitor-alerts__grid section button { min-height: 23px; padding: 3px 5px; font-size: .2rem; }
.monitor-alerts__grid aside article { display: grid; min-height: 84px; padding: 9px; align-content: start; gap: 4px; background: #f4f8f9; border: 1px solid #dce6e9; border-radius: 5px; }
.monitor-alerts__grid aside article > span { color: #b1443d; font-size: .24rem; font-weight: 900; }
.monitor-alerts__grid aside strong { color: #28515f; font-size: .34rem; }
.monitor-alerts__grid aside p { margin: 0; color: #728a92; font-size: .22rem; line-height: 1.35; }

.monitor-rework__compare { display: grid; padding: 13px 55px 10px; grid-template-columns: 1fr 38px 1fr; align-items: center; gap: 10px; }
.monitor-rework__compare > article { display: grid; min-height: 105px; padding: 11px; justify-items: center; gap: 3px; background: #fff3f1; border: 1px solid #ebceca; border-radius: 7px; text-align: center; }
.monitor-rework__compare > article.is-after { background: #ebf7f2; border-color: #cce7da; }
.monitor-rework__compare > article small, .monitor-rework__compare > article span { color: #758b92; font-size: .22rem; font-weight: 850; }
.monitor-rework__compare > article strong { color: #c44941; font-size: .85rem; line-height: 1; }
.monitor-rework__compare > article.is-after strong { color: #26816b; }
.monitor-rework__compare > article em { color: #738b92; font-size: .22rem; }
.monitor-rework__compare > i { color: #178ca2; }
.monitor-rework__row { display: grid; margin: 0 13px 12px; padding: 8px 10px; grid-template-columns: 32px 1fr auto auto; align-items: center; gap: 8px; background: #f5f8f9; border: 1px solid #dce6e9; border-radius: 5px; }
.monitor-rework__row > b { display: grid; width: 29px; height: 29px; place-items: center; color: #fff; background: #cf4c43; border-radius: 50%; font-size: .23rem; }
.monitor-rework__row > div { display: grid; gap: 2px; }
.monitor-rework__row small, .monitor-rework__row em { color: #748b93; font-size: .21rem; }
.monitor-rework__row strong { color: #295361; font-size: .31rem; }

.monitor-plant__canvas { position: relative; min-height: 247px; margin: 10px 13px; overflow: hidden; background: radial-gradient(circle at center, #fff, #f1f6f7); border: 1px solid #dce7e9; border-radius: 8px; }
.monitor-plant__canvas > span { position: absolute; top: 48%; left: 50%; color: #9aabb0; font-size: .2rem; font-weight: 900; letter-spacing: .12em; transform: translate(-50%, -50%); }
.monitor-plant__canvas > article { position: absolute; z-index: 2; display: grid; width: 122px; min-height: 76px; padding: 8px; gap: 3px; background: #fff; border: 1px solid #d2e1e4; border-left: 4px solid #178ba2; border-radius: 6px; box-shadow: 0 5px 13px rgba(38, 75, 87, .09); }
.monitor-plant__canvas > article.is-cut { top: 18px; left: 18px; }
.monitor-plant__canvas > article.is-muntin { bottom: 20px; left: 41px; }
.monitor-plant__canvas > article.is-igu { top: 18px; left: 45%; }
.monitor-plant__canvas > article.is-control { right: 36px; bottom: 18px; }
.monitor-plant__canvas > article.is-pack { top: 18px; right: 18px; border-left-color: #cf4c43; }
.monitor-plant__canvas article > small { color: #17869c; font-size: .2rem; font-weight: 900; }
.monitor-plant__canvas article > strong { color: #28515f; font-size: .34rem; }
.monitor-plant__canvas article > b { color: #5a7983; font-size: .28rem; }
.monitor-plant__canvas > svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #9fc1c9; stroke-width: 5; stroke-dasharray: 7 6; }

.monitor-station__grid { display: grid; padding: 15px; grid-template-columns: 1.6fr .7fr; gap: 11px; }
.monitor-station__grid > section { display: grid; min-height: 207px; grid-template-columns: .7fr 1.6fr .7fr; align-items: center; gap: 7px; }
.monitor-station__grid > section > span { display: grid; min-height: 105px; padding: 9px 6px; align-content: center; justify-items: center; gap: 5px; background: #eef5f6; border: 1px dashed #a8c6cd; border-radius: 6px; text-align: center; }
.monitor-station__grid > section > span small { color: #6e8992; font-size: .2rem; font-weight: 900; }
.monitor-station__grid > section > span strong { color: #285361; font-size: .34rem; }
.monitor-station__grid > section > span em { color: #a16d13; font-size: .22rem; }
.monitor-station__grid > section > article { display: grid; min-height: 172px; padding: 13px; align-content: center; gap: 7px; color: #fff; background: linear-gradient(145deg, #075c74, #003b7c); border-radius: 8px; box-shadow: 0 8px 18px rgba(0, 55, 95, .18); }
.monitor-station__grid > section > article header { display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.monitor-station__grid > section > article header small { color: #82d7e4; font-size: .21rem; font-weight: 900; }
.monitor-station__grid > section > article > strong { font-size: .47rem; }
.monitor-station__grid > section > article p { margin: 0; color: #cae8ed; font-size: .27rem; }
.monitor-station__grid > section > article > i { height: 6px; overflow: hidden; background: rgba(255,255,255,.18); border-radius: 100px; }
.monitor-station__grid > section > article > i b { display: block; height: 100%; background: #53d1c2; }
.monitor-station__grid > section > article footer { color: #d4edf0; font-size: .23rem; }
.monitor-station__grid > aside { display: grid; padding: 13px; align-content: center; gap: 7px; background: #f4f8f9; border: 1px solid #d9e5e8; border-radius: 7px; }
.monitor-station__grid > aside small { color: #16859b; font-size: .22rem; font-weight: 900; }
.monitor-station__grid > aside strong { color: #285260; font-size: .4rem; }
.monitor-station__grid > aside span { color: #728991; font-size: .25rem; }

.monitor-inventory__summary { display: grid; grid-template-columns: repeat(5, 1fr); background: #f1f6f7; border-bottom: 1px solid #dce7e9; }
.monitor-inventory__summary span { display: grid; min-height: 58px; padding: 8px; align-content: center; justify-items: center; gap: 3px; border-right: 1px solid #d9e4e7; text-align: center; }
.monitor-inventory__summary small { color: #758c93; font-size: .18rem; font-weight: 900; }
.monitor-inventory__summary strong { color: #245462; font-size: .5rem; }
.monitor-inventory__racks { display: grid; min-height: 165px; padding: 13px 17px; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.monitor-rack { display: grid; padding: 8px; align-content: center; justify-items: center; gap: 3px; background: #f6f9fa; border: 1px solid #dbe5e8; border-radius: 6px; }
.monitor-rack > div { position: relative; width: 68px; height: 67px; border-bottom: 4px solid #486974; }
.monitor-rack > div > i { position: absolute; inset: 7px 13px 0; border-right: 3px solid #486974; border-left: 3px solid #486974; transform: perspective(50px) rotateX(-4deg); }
.monitor-rack > div > span { position: absolute; inset: 15px 18px 4px; display: flex; justify-content: center; gap: 2px; }
.monitor-rack > div b { width: 5px; background: linear-gradient(#b9e2e8, #6eb4c1); border: 1px solid #559ba8; transform: skewY(-5deg); }
.monitor-rack.is-empty > div b { opacity: .14; }
.monitor-rack.is-disabled { opacity: .45; filter: grayscale(1); }
.monitor-rack strong { color: #28525f; font-size: .31rem; }
.monitor-rack small { color: #788e95; font-size: .19rem; font-weight: 850; text-align: center; }

.monitor-route-scale { display: grid; padding: 10px 13px 7px; grid-template-columns: repeat(3, 1fr); }
.monitor-route-scale span { display: flex; padding: 7px 9px; align-items: center; justify-content: space-between; color: #28725f; background: #e8f5ef; font-size: .24rem; }
.monitor-route-scale span:nth-child(2) { color: #926d1d; background: #fff3d9; }
.monitor-route-scale span:nth-child(3) { color: #a6413a; background: #fdeae8; }
.monitor-route-scale small { font-size: .19rem; font-weight: 900; }
.monitor-route-list { padding: 5px 13px 13px; }
.monitor-route-list article { display: grid; min-height: 61px; padding: 7px 8px; grid-template-columns: 39px 1fr auto 45px; align-items: center; gap: 9px; border-bottom: 1px solid #e0e8ea; }
.monitor-route-list article > span { display: grid; justify-items: center; color: #526f79; }
.monitor-route-list article > span strong { font-size: .46rem; }
.monitor-route-list article > span small { font-size: .18rem; font-weight: 900; }
.monitor-route-list article > div { display: grid; gap: 3px; }
.monitor-route-list article > div small { color: #7b9097; font-size: .2rem; }
.monitor-route-list article > div strong { color: #2c5664; font-size: .29rem; }
.monitor-route-list button { min-height: 24px; padding: 4px 6px; font-size: .21rem; }

.monitor-parkings__grid { display: grid; padding: 14px 12px; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.monitor-parkings__grid > article { overflow: hidden; background: #f6f9fa; border: 1px solid #d9e5e8; border-radius: 6px; }
.monitor-parkings__grid article > header { display: flex; padding: 8px; align-items: center; justify-content: space-between; background: #edf4f5; }
.monitor-parkings__grid article > header strong { color: #28515f; font-size: .34rem; }
.monitor-parkings__grid article > div { display: grid; grid-template-columns: 1fr 1fr; }
.monitor-parkings__grid article > div span { display: grid; min-height: 105px; padding: 10px 6px; align-content: center; justify-items: center; gap: 6px; border-right: 1px dashed #bfd1d5; }
.monitor-parkings__grid article > div span:last-child { border-right: 0; }
.monitor-parkings__grid small { color: #718990; font-size: .2rem; font-weight: 900; }
.monitor-parkings__grid b { color: #295462; font-size: .34rem; }
.monitor-parkings__grid article > footer { min-height: 34px; padding: 8px; color: #6f8790; background: #fff; border-top: 1px solid #e0e8ea; font-size: .22rem; }

.monitor-floor-action { min-height: 305px; padding: 13px; grid-template-columns: 150px 1fr; gap: 12px; place-items: stretch; }
.monitor-floor-context { display: grid; padding: 11px; align-content: center; gap: 8px; color: #d8edf0; background: linear-gradient(160deg, #064f66, #173f50); border-radius: 7px; }
.monitor-floor-context > small { color: #77d0dd; font-size: .21rem; font-weight: 900; letter-spacing: .08em; }
.monitor-floor-context > span { display: grid; gap: 2px; font-size: .26rem; }
.monitor-floor-context > span b { color: #79ceda; font-size: .19rem; }
.monitor-floor-context > em { color: #f3cf75; font-size: .21rem; }
.monitor-floor-action .monitor-dialog { width: 100%; }
.monitor-movement { display: grid; padding: 14px; grid-template-columns: 1fr 32px 1fr; align-items: center; gap: 7px; }
.monitor-movement article { display: grid; min-height: 110px; padding: 11px; align-content: center; gap: 5px; background: #f4f8f9; border: 1px solid #d9e4e7; border-radius: 6px; }
.monitor-movement article:nth-of-type(2) { background: #ecf7f8; border-color: #82c2cc; box-shadow: inset 0 -3px #178ba1; }
.monitor-movement small { color: #718b93; font-size: .21rem; font-weight: 900; }
.monitor-movement strong { color: #28515f; font-size: .36rem; }
.monitor-movement article > span { color: #758c94; font-size: .23rem; }
.monitor-movement > i { display: grid; place-items: center; color: #168ba1; }
.monitor-action-checks { display: grid; padding: 0 14px 12px; grid-template-columns: repeat(2, 1fr); gap: 5px; }
.monitor-action-checks span { display: flex; padding: 5px 7px; align-items: center; gap: 4px; color: #427262; background: #edf7f3; border-radius: 4px; font-size: .22rem; }
.monitor-dialog > footer button.is-primary { background: #247d69; }

.monitor-handoff__grid { display: grid; padding: 12px; grid-template-columns: 1.65fr .75fr; gap: 10px; }
.monitor-handoff__grid > section > small, .monitor-handoff__grid > aside > small { color: #16849a; font-size: .21rem; font-weight: 900; letter-spacing: .07em; }
.monitor-handoff__grid > section > div { display: grid; margin-top: 7px; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.monitor-handoff .monitor-rack { min-height: 91px; padding: 4px; }
.monitor-handoff .monitor-rack > div { width: 48px; height: 45px; }
.monitor-handoff .monitor-rack > div > i { inset: 5px 9px 0; }
.monitor-handoff .monitor-rack > div > span { inset: 10px 12px 3px; }
.monitor-handoff .monitor-rack strong { font-size: .25rem; }
.monitor-handoff .monitor-rack small { font-size: .16rem; }
.monitor-handoff__grid > aside { display: grid; padding: 11px; align-content: center; gap: 7px; background: #f2f7f8; border: 1px solid #d8e5e8; border-radius: 7px; }
.monitor-handoff__grid > aside > strong { color: #24515f; font-size: .47rem; }
.monitor-handoff__grid > aside > span { color: #9a6c17; font-size: .25rem; font-weight: 850; }
.monitor-handoff__grid > aside p { display: grid; margin: 0; padding-left: 8px; gap: 2px; border-left: 3px solid #1c91a6; }
.monitor-handoff__grid > aside p b { color: #345c68; font-size: .27rem; }
.monitor-handoff__grid > aside p small { color: #799097; font-size: .2rem; }

.mock-toolbar--dispatch { border-top-color: #00338f; }
.mock-toolbar--dispatch .mock-dispatch-brand { min-width: 190px; }
.mock-toolbar--dispatch .mock-dispatch-brand .product-logo { --logo-height: 20px; }
.mock-toolbar--dispatch .mock-dispatch-brand small { color: #687f9a; }
.mock-toolbar--dispatch nav span.is-active { color: #00338f; }
.mock-toolbar--dispatch nav span.is-active::after { background: #00338f; }
.mock-toolbar--dispatch.is-trace { border-top-color: #d1a126; }
.mock-toolbar--dispatch.is-trace nav span.is-active { color: #8d6915; }
.mock-toolbar--dispatch.is-trace nav span.is-active::after { background: #d1a126; }
.mock-dispatch-vision { display: flex; margin-left: auto; align-items: center; gap: 5px; color: #315d78; }
.mock-dispatch-vision > i { width: 7px; height: 7px; background: #e1ad2d; border-radius: 50%; box-shadow: 0 0 0 3px #fff4d6; }
.mock-dispatch-vision small { font-size: .22rem; font-weight: 950; letter-spacing: .045em; white-space: nowrap; }

.mock-content--dispatch-planning {
  min-height: 373px;
  padding: 22px 28px 43px;
  background:
    linear-gradient(rgba(0, 51, 143, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 51, 143, .035) 1px, transparent 1px),
    #edf2f7;
  background-size: 22px 22px;
}
.dispatch-planning { width: min(800px, 100%); color: #52697c; }
.dispatch-planning *, .dispatch-planning *::before, .dispatch-planning *::after { box-sizing: border-box; }
.dispatch-planning small, .dispatch-planning em, .dispatch-planning i { font-style: normal; }
.dispatch-planning .icon { width: 13px; height: 13px; flex: 0 0 auto; }
.dispatch-planning button { display: inline-flex; min-height: 28px; padding: 6px 10px; align-items: center; justify-content: center; gap: 5px; color: #fff; background: #00338f; border: 0; border-radius: 5px; font-family: inherit; font-size: .23rem; font-weight: 900; letter-spacing: .035em; }
.dispatch-card { overflow: hidden; background: #fff; border: 1px solid #d2dce8; border-radius: 9px; box-shadow: 0 10px 27px rgba(18, 51, 91, .1); }
.dispatch-head { display: flex; min-height: 57px; padding: 10px 14px; align-items: center; justify-content: space-between; gap: 12px; background: linear-gradient(90deg, #f9fbfe, #edf3fa); border-bottom: 1px solid #dbe3ee; }
.dispatch-head > div { display: grid; min-width: 0; gap: 3px; }
.dispatch-head small { color: #0a60a8; font-size: .27rem; font-weight: 950; letter-spacing: .095em; }
.dispatch-head strong { color: #1e405e; font-size: .53rem; line-height: 1.18; }
.dispatch-head > span { padding: 5px 8px; color: #07558f; background: #e7f1fa; border: 1px solid #ccdfef; border-radius: 100px; font-size: .23rem; font-weight: 950; white-space: nowrap; }
.dispatch-card > footer { display: flex; min-height: 37px; padding: 7px 13px; align-items: center; gap: 10px; color: #6a7f91; background: #f7f9fc; border-top: 1px solid #dde5ee; font-size: .25rem; }
.dispatch-card > footer span { display: flex; align-items: center; gap: 4px; }
.dispatch-card > footer strong { margin-left: auto; color: #294f70; }
.dispatch-card > footer button { margin-left: auto; }
.dispatch-status { display: inline-flex; width: fit-content; padding: 4px 6px; align-items: center; gap: 4px; color: #176b92; background: #e7f3f8; border-radius: 100px; font-size: .2rem; font-weight: 950; white-space: nowrap; }
.dispatch-status > i { width: 6px; height: 6px; background: currentColor; border-radius: 50%; }
.dispatch-status.is-done { color: #26725f; background: #e5f3ed; }
.dispatch-status.is-ready { color: #8c6819; background: #fff2d5; }
.dispatch-status.is-warning { color: #a2433d; background: #fde9e7; }
.dispatch-status.is-active { color: #075da5; background: #e5effa; }

.dispatch-overview__flow { display: grid; padding: 20px 15px; grid-template-columns: 1fr 30px 1fr 30px 1fr; align-items: center; gap: 6px; }
.dispatch-overview__flow > article { display: grid; min-height: 165px; padding: 15px 12px; align-content: center; justify-items: start; gap: 7px; background: #f5f8fb; border: 1px solid #dae3ec; border-radius: 7px; }
.dispatch-overview__flow > article.is-handoff { background: #fff9e8; border-color: #e8c96f; box-shadow: inset 0 3px #dfac2b; }
.dispatch-overview__flow > article.is-dispatch { background: #edf5fc; border-color: #85b5dc; box-shadow: inset 0 3px #0c64aa; }
.dispatch-overview__flow > article small { color: #71869a; font-size: .2rem; font-weight: 950; letter-spacing: .06em; }
.dispatch-overview__flow > article strong { color: #244966; font-size: .47rem; }
.dispatch-overview__flow > article > span:not(.dispatch-status) { color: #6c8294; font-size: .25rem; }
.dispatch-overview__flow > i { display: grid; place-items: center; color: #0b61a6; }

.dispatch-kpis { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid #dce5ed; }
.dispatch-kpis > span { display: grid; min-height: 65px; padding: 9px 12px; align-content: center; gap: 2px; border-right: 1px solid #e1e8ef; }
.dispatch-kpis > span:last-child { border-right: 0; }
.dispatch-kpis small { color: #75899a; font-size: .18rem; font-weight: 950; }
.dispatch-kpis strong { color: #174e79; font-size: .43rem; }
.dispatch-kpis em { color: #8293a1; font-size: .2rem; }
.dispatch-table { padding: 8px 12px 10px; }
.dispatch-table > header, .dispatch-table > article { display: grid; grid-template-columns: 1.05fr 1.15fr 1.35fr .65fr; align-items: center; gap: 8px; }
.dispatch-table > header { padding: 5px 8px; color: #788c9c; font-size: .18rem; font-weight: 950; }
.dispatch-table > article { min-height: 47px; padding: 6px 8px; border-top: 1px solid #e3e9ef; }
.dispatch-table > article > span { display: grid; gap: 2px; }
.dispatch-table b { color: #31546f; font-size: .25rem; }
.dispatch-table small { color: #83939f; font-size: .17rem; }

.dispatch-certainty__cards { display: grid; padding: 18px; grid-template-columns: 1fr 48px 1fr; align-items: stretch; gap: 8px; }
.dispatch-certainty__cards > article { display: grid; min-height: 206px; padding: 13px; align-content: start; gap: 8px; background: #fff8e9; border: 1px solid #e8d39b; border-radius: 7px; }
.dispatch-certainty__cards > article.is-firm { background: #eef7f3; border-color: #9bcab9; }
.dispatch-certainty__cards article > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dispatch-certainty__cards article > header small { color: #768999; font-size: .2rem; font-weight: 950; }
.dispatch-certainty__cards article > strong { color: #244c69; font-size: .42rem; }
.dispatch-certainty__cards article > span { color: #718697; font-size: .24rem; }
.dispatch-certainty__cards article > div { display: flex; padding: 5px 7px; justify-content: space-between; background: rgba(255,255,255,.7); border-radius: 4px; font-size: .22rem; }
.dispatch-certainty__cards article > div b { color: #536f84; }
.dispatch-certainty__cards article > div em { color: #a26f15; font-weight: 900; }
.dispatch-certainty__cards .is-firm > div em { color: #28715e; }
.dispatch-certainty__cards article > footer { margin-top: auto; color: #516f83; font-size: .23rem; font-weight: 850; }
.dispatch-certainty__cards > i { display: grid; align-content: center; justify-items: center; gap: 4px; color: #0b64a9; }
.dispatch-certainty__cards > i small { color: #698398; font-size: .16rem; font-weight: 950; writing-mode: vertical-rl; }

.dispatch-provisional__rule { display: flex; margin: 13px 15px 7px; padding: 9px 12px; align-items: center; gap: 10px; color: #296650; background: #ebf6f1; border: 1px solid #b9ddcf; border-radius: 6px; }
.dispatch-provisional__rule > span { display: grid; width: 28px; height: 28px; place-items: center; background: #2c8368; border-radius: 50%; color: #fff; }
.dispatch-provisional__rule > div { display: grid; gap: 2px; }
.dispatch-provisional__rule small { font-size: .18rem; font-weight: 950; }
.dispatch-provisional__rule strong { color: #285746; font-size: .32rem; }
.dispatch-provisional__rule em { color: #658276; font-size: .2rem; }
.dispatch-provisional__rows { padding: 0 15px 12px; }
.dispatch-provisional__rows article { display: grid; min-height: 50px; padding: 7px 8px; grid-template-columns: .8fr 1.8fr auto; align-items: center; gap: 9px; border-bottom: 1px solid #e1e8ef; }
.dispatch-provisional__rows article > span:first-child { color: #244f6f; font-size: .27rem; font-weight: 900; }
.dispatch-provisional__rows article > span:nth-child(2) { display: grid; gap: 2px; }
.dispatch-provisional__rows b { color: #4f6d83; font-size: .24rem; }
.dispatch-provisional__rows small { color: #8495a2; font-size: .19rem; }

.dispatch-grouping__canvas { display: grid; padding: 15px; grid-template-columns: 1fr 40px 1.15fr; align-items: center; gap: 10px; }
.dispatch-grouping__canvas > section { display: grid; gap: 7px; }
.dispatch-grouping__canvas > section > small { color: #71889b; font-size: .19rem; font-weight: 950; letter-spacing: .07em; }
.dispatch-grouping__canvas article { display: grid; min-height: 51px; padding: 8px 10px; align-content: center; gap: 3px; background: #f4f7fa; border: 1px solid #dce4ec; border-radius: 5px; }
.dispatch-grouping__canvas article strong { color: #294f6d; font-size: .3rem; }
.dispatch-grouping__canvas article span { color: #74899a; font-size: .21rem; }
.dispatch-grouping__canvas .is-result article { min-height: 78px; background: #edf4fb; border-color: #b6d0e7; }
.dispatch-grouping__canvas .is-result article.is-north { box-shadow: inset 3px 0 #0d66aa; }
.dispatch-grouping__canvas article em { color: #668095; font-size: .2rem; }
.dispatch-grouping__canvas > i { display: grid; place-items: center; color: #0d64a7; }

.dispatch-routes__body { display: grid; padding: 12px 15px 14px; grid-template-columns: 1.35fr .8fr; gap: 16px; }
.dispatch-routes__body > section { position: relative; display: grid; gap: 4px; }
.dispatch-route-line { position: absolute; top: 20px; bottom: 20px; left: 16px; width: 2px; background: #bdd1e4; }
.dispatch-routes__body > section article { position: relative; display: grid; min-height: 43px; grid-template-columns: 33px 1fr; align-items: center; gap: 9px; }
.dispatch-routes__body > section article > span { z-index: 1; display: grid; width: 33px; height: 33px; place-items: center; color: #fff; background: #0b62a6; border: 4px solid #e8f1f8; border-radius: 50%; font-size: .2rem; font-weight: 950; }
.dispatch-routes__body > section article > div { display: grid; gap: 2px; }
.dispatch-routes__body strong { color: #2a4f6d; font-size: .27rem; }
.dispatch-routes__body small { color: #7b8f9f; font-size: .18rem; }
.dispatch-routes__body > aside { display: grid; padding: 10px; align-content: start; gap: 5px; background: #f3f7fb; border: 1px solid #d6e2ec; border-radius: 6px; }
.dispatch-routes__body > aside > small { color: #0c61a5; font-size: .18rem; font-weight: 950; }
.dispatch-routes__body > aside > span { display: grid; min-height: 34px; padding: 5px 6px; grid-template-columns: 20px 1fr auto; align-items: center; gap: 5px; background: #fff; border-radius: 4px; }
.dispatch-routes__body > aside > span b { display: grid; width: 18px; height: 18px; place-items: center; color: #fff; background: #6d88a0; border-radius: 3px; font-size: .16rem; }
.dispatch-routes__body > aside > span em { color: #9b721c; font-size: .15rem; font-weight: 950; }
.dispatch-routes__body > aside footer { color: #637d91; font-size: .18rem; }

.dispatch-proposal__cards { display: grid; padding: 17px; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.dispatch-proposal__cards > article { display: grid; min-height: 213px; padding: 12px; align-content: start; gap: 10px; background: #f5f7fa; border: 1px solid #dce3ea; border-radius: 7px; }
.dispatch-proposal__cards > article.is-selected { background: #edf5fb; border-color: #7fb3d9; box-shadow: inset 0 3px #0a64a8; }
.dispatch-proposal__cards article > header { display: grid; grid-template-columns: 25px 1fr auto; align-items: center; gap: 7px; }
.dispatch-proposal__cards article > header > span { display: grid; width: 25px; height: 25px; place-items: center; color: #fff; background: #6f879a; border-radius: 50%; font-size: .18rem; }
.dispatch-proposal__cards .is-selected > header > span { background: #0b65a9; }
.dispatch-proposal__cards header > div { display: grid; gap: 2px; }
.dispatch-proposal__cards header small { color: #73899a; font-size: .17rem; font-weight: 950; }
.dispatch-proposal__cards header strong { color: #274e6d; font-size: .29rem; }
.dispatch-proposal__cards article > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.dispatch-proposal__cards article > div span { display: grid; padding: 6px; justify-items: center; background: #fff; border-radius: 4px; }
.dispatch-proposal__cards article > div small { color: #8092a0; font-size: .15rem; font-weight: 900; }
.dispatch-proposal__cards article > div b { color: #1d5279; font-size: .34rem; }
.dispatch-proposal__cards p { margin: 0; color: #6d8394; font-size: .22rem; line-height: 1.35; }
.dispatch-proposal__cards button { margin-top: auto; }

.dispatch-vehicles__grid { display: grid; padding: 14px; grid-template-columns: 1.15fr 1fr .9fr; gap: 10px; }
.dispatch-vehicles__grid > section, .dispatch-vehicles__grid > aside, .dispatch-vehicles__grid > article { display: grid; min-height: 220px; padding: 11px; align-content: center; gap: 7px; background: #f5f8fb; border: 1px solid #dbe4ed; border-radius: 6px; }
.dispatch-vehicles__grid > section small { color: #0d61a5; font-size: .18rem; font-weight: 950; }
.dispatch-vehicles__grid > section strong { color: #294f6c; font-size: .32rem; }
.dispatch-vehicles__grid > section > span { color: #7b8e9e; font-size: .2rem; }
.dispatch-truck { position: relative; display: flex; height: 83px; padding: 7px 3px 15px; align-items: flex-end; }
.dispatch-truck__cab { position: relative; width: 38px; height: 43px; background: #0a5da0; border-radius: 9px 4px 3px 3px; }
.dispatch-truck__cab > i { position: absolute; top: 6px; right: 5px; width: 15px; height: 12px; background: #bfe0ed; border-radius: 2px; }
.dispatch-truck__cab > b { position: absolute; right: -4px; bottom: 4px; width: 8px; height: 12px; background: #0a5da0; }
.dispatch-truck__body { display: grid; width: calc(100% - 38px); height: 55px; padding: 5px; grid-template-columns: repeat(5, 1fr); gap: 3px; background: #dfe8f0; border: 2px solid #7892a8; border-radius: 2px 4px 4px 2px; }
.dispatch-truck__body > i { display: grid; min-height: 18px; place-items: center; color: #7790a4; background: #f6f9fb; border: 1px dashed #9db0c0; border-radius: 2px; font-size: .12rem; font-weight: 950; }
.dispatch-truck__body > i.is-loaded { color: #fff; background: #d2a22b; border-color: #a77b13; }
.dispatch-truck > em { position: absolute; bottom: 7px; width: 14px; height: 14px; background: #364d60; border: 3px solid #f4f7fa; border-radius: 50%; }
.dispatch-truck > em:nth-of-type(1) { left: 19px; }
.dispatch-truck > em:nth-of-type(2) { right: 16px; }
.dispatch-vehicles__grid > aside > span { display: flex; padding: 5px 6px; justify-content: space-between; gap: 6px; background: #fff; border-radius: 3px; font-size: .2rem; }
.dispatch-vehicles__grid > aside > span small { color: #6e8496; }
.dispatch-vehicles__grid > aside > span b { color: #2a506f; }
.dispatch-vehicles__grid > aside > span.is-limit { color: #fff; background: #24577e; }
.dispatch-vehicles__grid > aside > span.is-limit small, .dispatch-vehicles__grid > aside > span.is-limit b { color: inherit; }
.dispatch-vehicles__grid > aside > div { display: grid; height: 8px; margin-top: 4px; background: #dce5ec; border-radius: 100px; }
.dispatch-vehicles__grid > aside > div i { background: #2c846d; border-radius: inherit; }
.dispatch-vehicles__grid > aside > div em { margin-top: 3px; color: #718797; font-size: .16rem; }
.dispatch-vehicles__grid > article span { display: grid; min-height: 39px; grid-template-columns: 16px 1fr; align-items: center; column-gap: 5px; color: #2a7b65; border-bottom: 1px solid #e1e8ef; }
.dispatch-vehicles__grid > article span .icon { grid-row: 1 / 3; }
.dispatch-vehicles__grid > article small { color: #7b8e9d; font-size: .15rem; font-weight: 900; }
.dispatch-vehicles__grid > article strong { color: #2e546f; font-size: .22rem; }

.dispatch-calendar__grid { padding: 10px 13px 12px; }
.dispatch-calendar__grid > header, .dispatch-calendar__grid > article { display: grid; grid-template-columns: 95px repeat(5, 1fr); }
.dispatch-calendar__grid > header { padding: 4px 0; color: #7b8d9b; font-size: .17rem; font-weight: 950; }
.dispatch-calendar__grid > article { min-height: 40px; align-items: center; border-top: 1px solid #e1e8ef; }
.dispatch-calendar__grid > article > strong { color: #345972; font-size: .2rem; }
.dispatch-calendar__grid > article > div { display: grid; min-height: 28px; grid-column: 2 / 7; grid-template-columns: repeat(5, 1fr); align-items: center; background: repeating-linear-gradient(90deg, transparent 0 calc(20% - 1px), #e0e7ee calc(20% - 1px) 20%); }
.dispatch-calendar__grid > article > div span { z-index: 1; grid-column: var(--start) / span var(--span); padding: 6px; overflow: hidden; color: #fff; background: #587894; border-radius: 4px; font-size: .17rem; font-weight: 900; white-space: nowrap; }
.dispatch-calendar__grid span.is-pack { background: #367f9c; }
.dispatch-calendar__grid span.is-load { background: #d0a026; }
.dispatch-calendar__grid span.is-trip { background: #0b61a5; }
.dispatch-calendar__grid span.is-conflict { background: #b34a43; box-shadow: 0 0 0 2px #f4c1bc; }
.dispatch-calendar__grid span.is-return { background: #65788a; }
.dispatch-calendar > footer > span.is-warning { color: #a2473f; font-weight: 900; }

.dispatch-direct__body { display: grid; padding: 16px; grid-template-columns: 1.2fr 35px .85fr; align-items: center; gap: 8px; }
.dispatch-direct__body > section, .dispatch-direct__body > aside { display: grid; min-height: 207px; padding: 11px; align-content: center; gap: 8px; background: #f4f8fb; border: 1px solid #d9e4ed; border-radius: 6px; }
.dispatch-direct__body > section > small { color: #0b60a4; font-size: .18rem; font-weight: 950; }
.dispatch-direct__body > section > div { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.dispatch-direct__body > section > span { display: flex; align-items: center; gap: 4px; color: #28745f; font-size: .2rem; font-weight: 850; }
.dispatch-direct__body > i { display: grid; place-items: center; color: #0c62a6; }
.dispatch-direct__body > aside strong { color: #274e6c; font-size: .36rem; }
.dispatch-direct__body > aside > span { color: #73899a; font-size: .22rem; }
.dispatch-rack { display: grid; min-height: 84px; padding: 5px; align-content: end; justify-items: center; gap: 2px; background: #fff; border: 1px solid #d8e2eb; border-radius: 5px; }
.dispatch-rack > div { position: relative; width: 45px; height: 39px; border-bottom: 3px solid #56738a; }
.dispatch-rack > div::before, .dispatch-rack > div::after { position: absolute; bottom: 0; width: 3px; height: 42px; background: #56738a; content: ''; transform-origin: bottom; }
.dispatch-rack > div::before { left: 8px; transform: rotate(15deg); }
.dispatch-rack > div::after { right: 8px; transform: rotate(-15deg); }
.dispatch-rack > div > i { position: absolute; inset: 7px 9px 0; background: #b5dbe5; border: 1px solid #60a1b4; }
.dispatch-rack.is-warning > div > i { background: #f1d387; border-color: #c59d35; }
.dispatch-rack.is-done > div > i { background: #a9d5c4; border-color: #5b9d86; }
.dispatch-rack > div > span { position: absolute; inset: 10px 12px 2px; display: flex; gap: 1px; }
.dispatch-rack > div > span b { width: 3px; height: 100%; background: rgba(255,255,255,.8); }
.dispatch-rack > strong { color: #294f6d; font-size: .22rem; }
.dispatch-rack > small { color: #7d8f9d; font-size: .14rem; text-align: center; }

.dispatch-reorder__body { display: grid; padding: 13px; grid-template-columns: .75fr 28px .75fr 1.25fr; align-items: center; gap: 8px; }
.dispatch-reorder__body > section { display: grid; min-height: 210px; padding: 9px; align-content: center; justify-items: center; gap: 7px; background: #f5f8fb; border: 1px solid #dce4ec; border-radius: 6px; }
.dispatch-reorder__body > section > small { color: #71879a; font-size: .17rem; font-weight: 950; }
.dispatch-reorder__body > section > span { display: grid; justify-items: center; gap: 2px; }
.dispatch-reorder__body > section b { color: #2d536f; font-size: .21rem; }
.dispatch-reorder__body > section em { color: #7c8f9e; font-size: .16rem; }
.dispatch-reorder__body > i { display: grid; place-items: center; color: #0b63a7; }
.dispatch-reorder__body > aside { display: grid; min-height: 210px; padding: 13px; align-content: center; gap: 8px; color: #dcebf7; background: linear-gradient(145deg, #073d70, #0b609d); border-radius: 7px; }
.dispatch-reorder__body > aside small { color: #94c8e7; font-size: .18rem; font-weight: 950; }
.dispatch-reorder__body > aside strong { color: #fff; font-size: .37rem; }
.dispatch-reorder__body > aside > span { font-size: .2rem; }
.dispatch-reorder__body > aside > div { display: flex; padding: 6px; align-items: center; gap: 4px; color: #d8f3e9; background: rgba(255,255,255,.1); border-radius: 4px; font-size: .18rem; }
.dispatch-reorder__body > aside button { color: #183f60; background: #f1c453; }

.dispatch-reconciliation__summary { display: grid; padding: 11px 14px; grid-template-columns: 1fr 1fr 35px 1fr; align-items: stretch; gap: 7px; }
.dispatch-reconciliation__summary > span { display: grid; min-height: 57px; padding: 6px; grid-template-columns: 24px 35px 1fr; align-items: center; color: #27745f; background: #edf7f3; border-radius: 5px; }
.dispatch-reconciliation__summary > span > strong { font-size: .4rem; }
.dispatch-reconciliation__summary > span > small { font-size: .16rem; font-weight: 900; }
.dispatch-reconciliation__summary > span.is-warning { color: #a1443d; background: #fdefed; }
.dispatch-reconciliation__summary > span.is-result { display: grid; grid-template-columns: 1fr; justify-items: center; color: #fff; background: #246d5b; }
.dispatch-reconciliation__summary > span.is-result strong { font-size: .3rem; }
.dispatch-reconciliation__summary > span.is-result small { font-size: .16rem; }
.dispatch-reconciliation__summary > em { display: grid; place-items: center; color: #0b62a7; }
.dispatch-reconciliation__table { padding: 0 14px 10px; }
.dispatch-reconciliation__table > header, .dispatch-reconciliation__table > article { display: grid; min-height: 30px; padding: 4px 7px; grid-template-columns: 1fr .8fr .8fr .8fr; align-items: center; gap: 7px; }
.dispatch-reconciliation__table > header { color: #75899a; background: #eef3f7; font-size: .17rem; font-weight: 950; }
.dispatch-reconciliation__table > article { border-bottom: 1px solid #e3e9ef; font-size: .2rem; }
.dispatch-reconciliation__table article strong { color: #315570; }
.dispatch-reconciliation__table article span { color: #718696; }
.dispatch-reconciliation__table article em { color: #28745f; font-weight: 900; }
.dispatch-reconciliation__table article.is-warning { background: #fff7e7; }
.dispatch-reconciliation__table article.is-warning em { color: #a24d3c; }

.dispatch-conflicts { position: relative; min-height: 322px; }
.dispatch-conflicts__backdrop { filter: blur(1px); opacity: .38; }
.dispatch-conflicts__backdrop > div { display: grid; padding: 20px; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dispatch-conflicts__dialog { position: absolute; top: 30px; left: 50%; width: min(470px, calc(100% - 32px)); overflow: hidden; background: #fff; border: 1px solid #e0bbb7; border-radius: 8px; box-shadow: 0 18px 45px rgba(52, 31, 30, .24); transform: translateX(-50%); }
.dispatch-conflicts__dialog > header { display: flex; padding: 12px 14px; align-items: center; gap: 9px; color: #913e38; background: #fff0ee; border-bottom: 1px solid #edcfcc; }
.dispatch-conflicts__dialog > header > span { display: grid; width: 29px; height: 29px; place-items: center; color: #fff; background: #ae4640; border-radius: 50%; font-weight: 950; }
.dispatch-conflicts__dialog > header > div { display: grid; gap: 2px; }
.dispatch-conflicts__dialog header small { font-size: .17rem; font-weight: 950; }
.dispatch-conflicts__dialog header strong { color: #6f3531; font-size: .34rem; }
.dispatch-conflicts__dialog > article { display: grid; margin: 10px 13px 5px; padding: 8px 9px; grid-template-columns: 1fr auto; gap: 3px 8px; background: #fff7e8; border-left: 3px solid #d2a22b; }
.dispatch-conflicts__dialog > article b { color: #714a20; font-size: .25rem; }
.dispatch-conflicts__dialog > article span { color: #806d57; font-size: .19rem; }
.dispatch-conflicts__dialog > article em { grid-column: 2; grid-row: 1 / 3; align-self: center; }
.dispatch-conflicts__dialog > div { display: grid; padding: 5px 13px 10px; gap: 4px; }
.dispatch-conflicts__dialog > div > span { display: grid; padding: 4px 6px; grid-template-columns: 18px 1fr auto; align-items: center; gap: 5px; color: #28745f; background: #f2f8f5; font-size: .19rem; }
.dispatch-conflicts__dialog > div > span.is-warning { color: #a44740; background: #fff0ee; }
.dispatch-conflicts__dialog > div b { font-size: .2rem; }
.dispatch-conflicts__dialog > div em { font-size: .16rem; font-weight: 900; }
.dispatch-conflicts__dialog > footer { display: flex; padding: 9px 13px; align-items: center; justify-content: space-between; gap: 8px; background: #f7f9fb; border-top: 1px solid #e0e7ed; }
.dispatch-conflicts__dialog > footer small { color: #788b9a; font-size: .17rem; }

.dispatch-loading__head { display: grid; min-height: 59px; padding: 9px 12px; grid-template-columns: 1fr 1.2fr .8fr auto; align-items: center; gap: 9px; color: #dcecf5; background: linear-gradient(90deg, #063b70, #0a639e); }
.dispatch-loading__head > div { display: grid; gap: 2px; }
.dispatch-loading__head small { color: #9cc7df; font-size: .16rem; font-weight: 950; }
.dispatch-loading__head strong { color: #fff; font-size: .29rem; }
.dispatch-loading__body { display: grid; padding: 14px; grid-template-columns: 1.3fr .9fr; gap: 11px; }
.dispatch-loading__body > section { display: grid; padding: 10px; gap: 7px; background: #f4f7fa; border: 1px solid #dce4ec; border-radius: 6px; }
.dispatch-loading__body > section > small { color: #0c60a4; font-size: .18rem; font-weight: 950; }
.dispatch-loading__body > section > div:last-child { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.dispatch-loading__body > section > div:last-child span { display: grid; padding: 5px 3px; justify-items: center; gap: 2px; color: #7b8e9d; background: #fff; border: 1px solid #dce3ea; border-radius: 3px; }
.dispatch-loading__body > section > div:last-child span.is-done { color: #27735e; background: #eaf5f0; }
.dispatch-loading__body > section > div:last-child span.is-active { color: #805f16; background: #fff3d8; border-color: #dfbd67; }
.dispatch-loading__body > section > div:last-child b { font-size: .18rem; }
.dispatch-loading__body > section > div:last-child strong { font-size: .17rem; }
.dispatch-loading__body > aside { display: grid; padding: 12px; align-content: center; gap: 7px; background: #edf4fa; border: 1px solid #bdd4e7; border-radius: 6px; }
.dispatch-loading__body > aside > small { color: #0a60a6; font-size: .18rem; font-weight: 950; }
.dispatch-loading__body > aside > strong { color: #1f4d70; font-size: .5rem; }
.dispatch-loading__body > aside > span { color: #6f8597; font-size: .21rem; }
.dispatch-scan { position: relative; display: grid; min-height: 47px; padding: 7px 7px 7px 45px; align-content: center; gap: 2px; background: #fff; border-radius: 4px; }
.dispatch-scan > i { position: absolute; top: 9px; left: 9px; width: 28px; height: 28px; background: repeating-conic-gradient(#0b5d98 0 25%, transparent 0 50%) 0 0 / 8px 8px; border: 3px solid #0b5d98; box-shadow: inset 0 0 0 3px #fff; }
.dispatch-scan b { color: #27745f; font-size: .21rem; }
.dispatch-scan em { color: #7b8e9d; font-size: .16rem; }
.dispatch-loading__body > aside button { background: #d0a025; }
.dispatch-loading__body > aside footer { color: #627d91; font-size: .17rem; }

.dispatch-documents__body { display: grid; padding: 13px; grid-template-columns: 1.2fr .8fr; gap: 12px; }
.dispatch-documents__body > section { display: grid; align-content: center; gap: 6px; }
.dispatch-documents__body > section article { display: grid; min-height: 58px; padding: 7px; grid-template-columns: 26px 1fr 34px 45px; align-items: center; gap: 6px; background: #f4f7fa; border: 1px solid #dce4eb; border-radius: 5px; }
.dispatch-documents__body > section article.is-selected { background: #edf5fb; border-color: #8cb8da; }
.dispatch-documents__body > section article > span { display: grid; width: 25px; height: 25px; place-items: center; color: #fff; background: #0b63a7; border-radius: 50%; font-size: .16rem; font-weight: 950; }
.dispatch-documents__body > section article > div { display: grid; gap: 2px; }
.dispatch-documents__body > section strong { color: #28506f; font-size: .24rem; }
.dispatch-documents__body > section small { color: #7c8f9e; font-size: .17rem; }
.dispatch-documents__body > section em { color: #0a60a4; font-size: .16rem; font-weight: 950; }
.dispatch-documents__body > section button { min-height: 23px; padding: 3px 5px; font-size: .16rem; }
.dispatch-documents__body > aside { display: grid; place-items: center; background: #e8edf2; border-radius: 6px; }
.dispatch-paper { display: grid; width: 170px; min-height: 220px; padding: 12px; align-content: start; gap: 7px; background: #fff; box-shadow: 0 7px 18px rgba(35, 55, 75, .16); transform: rotate(1deg); }
.dispatch-paper > header { display: flex; padding-bottom: 5px; justify-content: space-between; border-bottom: 2px solid #0a5fa3; }
.dispatch-paper > header b { color: #075a9c; font-size: .19rem; }
.dispatch-paper > header span { color: #788b99; font-size: .12rem; }
.dispatch-paper > strong { color: #294e6b; font-size: .21rem; }
.dispatch-paper > i { padding: 3px 4px; color: #647b8e; background: #f3f6f8; font-size: .14rem; }
.dispatch-paper > footer { margin-top: auto; color: #7e8f9c; font-size: .11rem; }

.dispatch-handoff__result { display: grid; margin: 14px; padding: 11px 13px; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; color: #28745f; background: #eaf6f1; border: 1px solid #acd5c5; border-radius: 7px; }
.dispatch-handoff__result > span { display: grid; width: 36px; height: 36px; place-items: center; color: #fff; background: #2b8068; border-radius: 50%; }
.dispatch-handoff__result > div { display: grid; gap: 2px; }
.dispatch-handoff__result small { font-size: .18rem; font-weight: 950; }
.dispatch-handoff__result strong { color: #285b4c; font-size: .33rem; }
.dispatch-handoff__result em { color: #668277; font-size: .2rem; }
.dispatch-handoff__flow { display: grid; padding: 0 14px 11px; grid-template-columns: 1fr 35px 1fr; align-items: stretch; gap: 8px; }
.dispatch-handoff__flow > article { display: grid; min-height: 90px; padding: 10px; align-content: center; gap: 4px; background: #f4f7fa; border: 1px solid #dce4ec; border-radius: 6px; }
.dispatch-handoff__flow > article small { color: #0c60a4; font-size: .17rem; font-weight: 950; }
.dispatch-handoff__flow > article strong { color: #2a506d; font-size: .28rem; }
.dispatch-handoff__flow > article span { color: #768a9a; font-size: .2rem; }
.dispatch-handoff__flow > article button { width: fit-content; margin-top: 3px; }
.dispatch-handoff__flow > i { display: grid; place-items: center; color: #0b62a6; }
.dispatch-state-rail { display: grid; padding: 0 14px 11px; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.dispatch-state-rail > span { position: relative; display: grid; min-height: 35px; align-content: center; justify-items: center; gap: 2px; color: #27745f; background: #edf7f3; border-radius: 3px; }
.dispatch-state-rail > span small { font-size: .12rem; font-weight: 950; }
.dispatch-state-rail > span .icon { width: 9px; height: 9px; }

@media (max-width: 760px) {
  :root { --shell: calc(100vw - 28px); }
  .brand { --brand-logo-width: 112px; --brand-logo-height: 50px; }
  .brand__official img { top: -7px; }
  .hero { padding-top: 52px; }
  .hero__copy h1 { font-size: clamp(3.15rem, 15vw, 5rem); }
  .hero__lead { font-size: 1rem; }
  .hero__actions { align-items: stretch; flex-direction: column; }
  .hero__actions .button { width: 100%; }
  .journey-visual { min-height: 485px; border-radius: 18px; }
  .journey-visual__canvas { height: 365px; }
  .journey-node { width: 92px; }
  .journey-node--1 { top: 40px; left: 5%; }
  .journey-node--2 { top: 85px; left: 28%; }
  .journey-node--3 { top: 130px; left: 51%; }
  .journey-node--4 { top: 180px; left: 65%; }
  .journey-node--5 { display: none; }
  .journey-visual__footer span:nth-child(2) { display: none; }
  .metric-strip { min-height: auto; grid-template-columns: repeat(2, 1fr); }
  .metric-strip > div { min-height: 110px; padding: 20px; border-bottom: 1px solid var(--line-dark); }
  .metric-strip strong { font-size: 1.8rem; }
  .value-section, .assist-section { padding-block: 90px; }
  .section-heading h2, .access-banner h2 { font-size: 2.8rem; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card, .feature-card--large { min-height: 400px; }
  .feature-card--wide { min-height: 350px; grid-column: auto; flex-direction: column; align-items: stretch; }
  .mini-chart { width: 100%; }
  .chapters-section { padding-block: 90px; }
  .chapter-showcase { grid-template-columns: 1fr; }
  .chapter-card { min-height: 300px; }
  .assist-section__visual { height: 430px; }
  .assist-hero-mascot { width: 225px; }
  .assist-message { width: 190px; }
  .assist-message--one { top: 30px; left: 20px; }
  .assist-message--two { top: 105px; right: 15px; }
  .assist-message--three { right: 32px; bottom: 28px; }
  .access-banner { margin-bottom: 50px; padding: 38px 28px; }
  .company-bridge { padding-block: 85px; }
  .company-bridge__actions { align-items: stretch; flex-direction: column; }
  .company-bridge__facts { grid-template-columns: 1fr; }
  .company-bridge__facts article { min-height: 145px; }
  .about-hero { padding-block: 65px 80px; }
  .about-hero__copy h1,
  .contact-hero h1,
  .blog-hero h1 { font-size: clamp(3.2rem, 15vw, 5rem); }
  .about-hero__visual { min-height: 340px; }
  .about-year { right: 28px; bottom: 30px; }
  .about-glass { width: 165px; height: 235px; }
  .about-glass--one { top: 45px; left: 30px; }
  .about-glass--two { top: 68px; left: 68px; }
  .origin-section { padding-block: 85px; }
  .origin-section__milestones { grid-template-columns: 1fr; }
  .origin-section__milestones article { min-height: 170px; }
  .experience-section { padding-block: 90px; }
  .experience-section blockquote { padding: 42px 28px; }
  .about-cta { margin-bottom: 70px; padding: 42px 28px; }
  .about-cta > div:last-child { align-items: stretch; flex-direction: column; }
  .contact-hero,
  .blog-hero { padding-block: 65px 70px; }
  .contact-body { padding-bottom: 85px; gap: 50px; }
  .contact-offices { grid-template-columns: 1fr; }
  .contact-offices > .eyebrow,
  .contact-offices__note { grid-column: 1; }
  .contact-form-card { min-height: 0; padding: 30px 20px; border-radius: 17px; }
  .contact-form__row { grid-template-columns: 1fr; }
  .contact-form > .button { width: 100%; }
  .blog-featured { grid-template-columns: 1fr; padding-bottom: 70px; }
  .blog-featured .blog-card:first-child { grid-column: auto; grid-template-columns: 1fr; }
  .blog-archive { padding-block: 70px 90px; }
  .blog-grid { grid-template-columns: 1fr; }
  .blog-archive__heading { grid-template-columns: 1fr; }
  .blog-archive__heading > span { margin-top: 8px; }
  .article-hero { padding-block: 45px 75px; }
  .article-back { margin-bottom: 55px; }
  .article-hero h1 { font-size: clamp(3rem, 14vw, 5.3rem); }
  .article-layout { padding-block: 70px 90px; grid-template-columns: 1fr; gap: 35px; }
  .article-layout__mark { display: none; }
  .article-layout > aside { grid-column: 1; }
  .legal-hero { padding-block: 60px 65px; }
  .legal-hero h1 { font-size: clamp(3.1rem, 15vw, 5rem); }
  .legal-layout { padding-block: 55px 90px; grid-template-columns: 1fr; gap: 48px; }
  .legal-navigation { position: static; top: auto; }
  .legal-navigation > button { margin-top: 10px; }
  .legal-review-note { margin-bottom: 42px; padding: 19px; align-items: start; }
  .legal-data-list > div { grid-template-columns: 1fr; gap: 7px; }
  .legal-purpose-grid article { min-height: 180px; }
  .legal-cookie-table { display: grid; gap: 12px; border: 0; }
  .legal-cookie-table .legal-cookie-table__head { display: none; }
  .legal-cookie-table > div { display: grid; min-height: 0; padding: 16px; grid-template-columns: 1fr; gap: 8px; background: var(--white); border: 1px solid var(--line); border-radius: 9px; }
  .legal-cookie-table > div > * { display: block; padding: 0; border: 0; }
  .legal-cookie-table > div > code { padding: 7px 8px; }
  .cookie-inline-preferences { align-items: stretch; flex-direction: column; }
  .cookie-inline-preferences .button { width: 100%; }
  .corporate-preview { padding-bottom: 90px; }
  .corporate-preview__cards { grid-template-columns: 1fr; }
  .corporate-preview__cards article { min-height: 320px; }
  .site-footer { padding-inline: 25px; }
  .site-footer__top { grid-template-columns: 1fr; }
  .site-footer__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__links > div:last-child { grid-column: 1 / -1; }
  .site-footer__bottom { align-items: flex-start; flex-direction: column; gap: 8px; }
  .cookie-banner { right: 14px; bottom: 14px; left: 14px; padding: 21px; }
  .cookie-banner > div:first-child { grid-template-columns: 1fr; }
  .cookie-banner p,
  .cookie-banner a { grid-column: 1; }
  .cookie-banner__actions { align-items: stretch; flex-direction: column; }
  .cookie-banner .button { width: 100%; }
  .cookie-dialog-backdrop { padding: 12px; }
  .cookie-dialog { max-height: calc(100vh - 24px); padding: 34px 22px 25px; border-radius: 15px; }
  .cookie-dialog__close { top: 14px; right: 14px; }
  .cookie-dialog__actions { align-items: stretch; flex-direction: column-reverse; }
  .cookie-dialog__actions .button { width: 100%; }
  .demo-topbar { grid-template-columns: 55px 1fr auto; }
  .demo-progress { display: none; }
  .chapter-progress { overflow-x: auto; padding-inline: 10px; scrollbar-width: none; }
  .chapter-progress__rail { right: 21px; left: 21px; min-width: 590px; }
  .chapter-progress__stages { min-width: 610px; }
  .demo-exit { padding-inline: 12px; font-size: 0; }
  .demo-exit .icon { font-size: 0.85rem; }
  .language-selector--demo { min-width: 57px; margin-inline: 5px; }
  .language-selector--demo > span { width: 25px; height: 25px; }
  .language-selector--demo select { width: 18px; color: transparent; }
  .demo-main { display: block; overflow: auto; }
  .step-content { overflow: visible; padding: 30px 17px 28px; }
  .step-heading__top { min-height: 0; align-items: flex-start; flex-direction: column; gap: 11px; }
  .product-signature--compact { --logo-height: 27px; }
  .step-heading h1 { font-size: 2.35rem; }
  .step-tags { align-items: flex-start; flex-direction: column; }
  .step-stage { min-height: 365px; }
  .step-stage--capture { min-height: 0; }
  .capture-media__badge { top: 8px; left: 8px; font-size: 0.4rem; }
  .capture-media__arrow { width: 34px; height: 34px; }
  .capture-media__arrow--previous { left: 8px; }
  .capture-media__arrow--next { right: 8px; }
  .capture-media__footer { min-height: 61px; padding: 10px 12px; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
  .capture-media__footer strong { font-size: 0.57rem; }
  .capture-media__dots { display: none; }
  .step-stage--capture .teacher-mascot { bottom: 58px; width: 95px; }
  .step-stage--capture .teacher-mascot-ladder { bottom: 42px; }
  .mock-content { min-height: 318px; padding: 25px 17px 48px; }
  .mascot-side-left .mock-content,
  .mascot-side-right .mock-content { padding: 25px 17px 125px; }
  .mock-content--assist-intro,
  .mascot-side-left .mock-content--assist-intro,
  .mascot-side-right .mock-content--assist-intro { min-height: 390px; padding: 25px 15px 125px; }
  .teacher-mascot { bottom: 18px; width: 135px; }
  .teacher-mascot__rope { height: 410px; }
  .teacher-mascot-ladder { bottom: -30px; width: 54px; height: 175px; }
  .teacher-mascot-ladder--left { left: 10px; }
  .teacher-mascot-ladder--right { right: 10px; }
  .mock-toolbar:not(.mock-toolbar--cw) { grid-template-columns: 1fr auto; }
  .mock-toolbar:not(.mock-toolbar--cw) > strong { display: none; }
  .mock-toolbar:not(.mock-toolbar--cw) > small { grid-column: 2; }
  .mock-toolbar--assist:not(.mock-toolbar--cw) { grid-template-columns: auto 1fr auto; }
  .mock-toolbar--assist:not(.mock-toolbar--cw) > strong { display: flex; }
  .mock-toolbar--assist:not(.mock-toolbar--cw) > small { grid-column: 3; }
  .mock-toolbar--cw { grid-template-columns: 1fr auto; }
  .mock-toolbar--cw nav,
  .mock-cw-user { display: none; }
  .mock-cw-brand > small { display: none; }
  .mock-cw-menu {
    display: grid;
    width: 28px;
    height: 28px;
    padding: 6px;
    align-content: center;
    gap: 3px;
    border: 1px solid #c9e0e6;
    border-radius: 6px;
  }
  .mock-cw-menu i { height: 1px; background: #168ca2; border-radius: 2px; }
  .mock-content--masters { padding: 18px 12px 48px; }
  .mascot-side-left .mock-content--masters,
  .mascot-side-right .mock-content--masters { padding: 18px 12px 100px; }
  .mock-content--commercial-validation,
  .mascot-side-left .mock-content--commercial-validation,
  .mascot-side-right .mock-content--commercial-validation { min-height: 390px; padding: 18px 12px 125px; }
  .commercial-overview > header,
  .commercial-confirmation > header,
  .commercial-conditions > header,
  .commercial-checklist > header,
  .commercial-exposure > header,
  .commercial-balance > header { align-items: flex-start; flex-direction: column; }
  .commercial-overview__flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 8px; }
  .commercial-overview__flow::before,
  .commercial-exposure__timeline::before { display: none; }
  .commercial-overview > footer { flex-wrap: wrap; }
  .commercial-confirmation__fields,
  .commercial-conditions__grid,
  .commercial-policy__fields,
  .commercial-checklist > div,
  .commercial-decision__signals { grid-template-columns: 1fr; }
  .commercial-conditions > footer { grid-template-columns: 1fr; gap: 4px; }
  .commercial-conditions > footer i { display: none; }
  .commercial-payment,
  .commercial-policy,
  .commercial-assist,
  .commercial-transfer { grid-template-columns: 1fr; }
  .commercial-payment > i { transform: rotate(90deg); }
  .commercial-payment > section,
  .commercial-payment > aside,
  .commercial-policy > aside,
  .commercial-policy > section,
  .commercial-assist > section,
  .commercial-assist > aside,
  .commercial-transfer > section,
  .commercial-transfer > aside { min-height: 0; }
  .commercial-exposure__timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 8px; }
  .commercial-policy > aside { min-height: 165px; }
  .commercial-balance__calculation { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .commercial-balance__calculation > i { display: none; }
  .commercial-balance__calculation article.is-result { padding: 10px; }
  .commercial-balance > footer { grid-template-columns: 1fr; }
  .commercial-decision > header { grid-template-columns: 42px 1fr; align-items: center; }
  .commercial-decision > header > em { grid-column: 1 / -1; }
  .commercial-decision > footer { align-items: stretch; flex-direction: column; }
  .commercial-transfer > section > header,
  .commercial-transfer > section > div { grid-template-columns: .9fr 1.5fr .8fr; }
  .commercial-transfer > section > header span:last-child,
  .commercial-transfer > section > div em { display: none; }
  .commercial-handoff__apps { grid-template-columns: 1fr; }
  .commercial-handoff__apps > i { transform: rotate(90deg); }
  .commercial-handoff > footer { align-items: stretch; flex-direction: column; }
  .mock-content--production-planning,
  .mascot-side-left .mock-content--production-planning,
  .mascot-side-right .mock-content--production-planning { min-height: 390px; padding: 18px 12px 125px; }
  .planning-overview > header,
  .planning-selection > header,
  .planning-validation > header,
  .planning-workload > header,
  .planning-waves > header,
  .planning-formulas > header,
  .planning-timeline > header,
  .planning-expedition > header,
  .planning-handoff > header { align-items: flex-start; flex-direction: column; }
  .planning-overview__flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 8px; }
  .planning-overview__flow::before { display: none; }
  .planning-overview > footer { flex-wrap: wrap; }
  .planning-overview > footer strong { width: 100%; margin-left: 0; }
  .planning-horizon,
  .planning-ordering,
  .planning-strategy > div,
  .planning-ratification { grid-template-columns: 1fr; }
  .planning-horizon > section,
  .planning-horizon > aside,
  .planning-ordering > section,
  .planning-ordering > aside,
  .planning-strategy article,
  .planning-ratification > section,
  .planning-ratification > aside { min-height: 0; }
  .planning-horizon > aside { min-height: 190px; }
  .planning-selection__table > div { grid-template-columns: 23px 1.35fr .55fr .7fr; }
  .planning-selection__table > div > span:nth-child(3) { display: none; }
  .planning-selection__table > div.is-head span:nth-child(3) { display: none; }
  .planning-selection > footer { align-items: flex-start; flex-wrap: wrap; }
  .planning-selection > footer button { width: 100%; margin-left: 0; }
  .planning-validation > div > article { grid-template-columns: 39px 1fr; }
  .planning-validation article > b { grid-column: 2; width: fit-content; }
  .planning-workload__metrics,
  .planning-waves__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .planning-workload__bars > span { grid-template-columns: 1fr 58px; }
  .planning-workload__bars i { grid-column: 1 / -1; }
  .planning-workload > footer { align-items: flex-start; flex-wrap: wrap; }
  .planning-workload > footer p { width: 100%; margin-left: 0; }
  .planning-waves > footer { align-items: flex-start; flex-direction: column; gap: 5px; }
  .planning-formulas > footer { flex-wrap: wrap; }
  .planning-strategy article { min-height: 195px; }
  .planning-timeline__axis { padding-inline: 75px 15px; }
  .planning-timeline__lane { grid-template-columns: 55px 1fr; }
  .planning-timeline__lane > em { display: none; }
  .planning-expedition__body { grid-template-columns: 1fr; }
  .planning-expedition__sequence { border-right: 0; border-bottom: 1px solid #dce6eb; }
  .planning-expedition__sequence ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .planning-expedition__sequence ol::before { display: none; }
  .planning-expedition__dock > footer { flex-wrap: wrap; }
  .planning-handoff > div { grid-template-columns: 1fr; }
  .planning-handoff > footer { align-items: stretch; flex-direction: column; }
  .planning-handoff > footer p { flex-wrap: wrap; }
  .planning-handoff > footer button { justify-content: space-between; }
  .mock-content--stock-optimization,
  .mascot-side-left .mock-content--stock-optimization,
  .mascot-side-right .mock-content--stock-optimization { min-height: 390px; padding: 18px 12px 125px; }
  .mock-stock-opti-brand > small { display: none; }
  .stock-opti-card > header,
  .stock-opti-routing > header { align-items: flex-start; flex-direction: column; }
  .stock-opti-overview__flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 8px; }
  .stock-opti-overview__flow::before { display: none; }
  .stock-opti-overview > footer,
  .stock-opti-summary > footer,
  .stock-opti-requirements > footer { align-items: flex-start; flex-wrap: wrap; }
  .stock-opti-overview > footer strong,
  .stock-opti-summary > footer strong,
  .stock-opti-requirements > footer strong { width: 100%; margin-left: 0; }
  .stock-opti-table--requirements > div { grid-template-columns: 1.4fr .45fr .75fr; }
  .stock-opti-table--requirements > div > :last-child { display: none; }
  .stock-opti-modes > div,
  .stock-opti-search__depths,
  .stock-opti-validation > div,
  .stock-opti-routing > div,
  .stock-opti-simulations__grid { grid-template-columns: 1fr; }
  .stock-opti-modes article { min-height: 175px; }
  .stock-opti-search__depths article { min-height: 120px; }
  .stock-opti-search__oef { padding-bottom: 42px; grid-template-columns: 68px minmax(0, 1fr); }
  .stock-opti-search__oef-mark { height: 78px; }
  .stock-opti-search__oef-metric { grid-column: 1 / -1; min-height: 0; padding: 8px 0 0; grid-template-columns: auto auto minmax(0, 1fr); align-items: baseline; gap: 6px; border-top: 1px solid rgba(255, 255, 255, .18); border-left: 0; }
  .stock-opti-search__oef-metric span { margin-top: 0; }
  .stock-opti-search__oef > footer { left: 14px; }
  .stock-opti-shortage,
  .stock-opti-reservation,
  .stock-opti-apply,
  .stock-opti-technical { grid-template-columns: 1fr; }
  .stock-opti-shortage > section,
  .stock-opti-shortage > aside,
  .stock-opti-reservation > section,
  .stock-opti-reservation > aside,
  .stock-opti-apply > section,
  .stock-opti-apply > aside,
  .stock-opti-technical > section,
  .stock-opti-technical > aside { min-height: 0; }
  .stock-opti-table--inventory > div { grid-template-columns: 1.2fr .65fr .8fr; }
  .stock-opti-table--inventory > div > :last-child { display: none; }
  .stock-opti-routing article { min-height: 180px; }
  .stock-opti-table--summary > div { grid-template-columns: .5fr 1.5fr .45fr .55fr; }
  .stock-opti-table--summary > div > :last-child { display: none; }
  .stock-opti-compaction__modes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stock-opti-compaction__preview { grid-template-columns: 1fr; }
  .stock-opti-compaction__preview > i { transform: rotate(90deg); }
  .stock-opti-compaction > footer { align-items: flex-start; flex-direction: column; }
  .stock-opti-compaction > footer > strong { margin-left: 0; }
  .stock-opti-simulations > footer { align-items: flex-start; flex-wrap: wrap; }
  .stock-opti-simulations > footer button { width: 100%; margin-left: 0; justify-content: space-between; }
  .stock-opti-table--release > div { grid-template-columns: .5fr 1.5fr .8fr; }
  .stock-opti-table--release > div > :nth-child(3) { display: none; }
  .stock-opti-release > footer { align-items: stretch; flex-direction: column; }
  .stock-opti-release > footer button { width: 100%; margin-left: 0; justify-content: space-between; }
  .stock-opti-handoff > header { grid-template-columns: 38px 1fr; align-items: center; }
  .stock-opti-handoff > header > em { grid-column: 2; width: fit-content; }
  .stock-opti-handoff__flow { grid-template-columns: 1fr; }
  .stock-opti-handoff__flow > i { transform: rotate(90deg); }
  .stock-opti-handoff__flow article { min-height: 105px; }
  .stock-opti-handoff > footer { align-items: flex-start; flex-wrap: wrap; }
  .stock-opti-handoff > footer button { width: 100%; margin-left: 0; justify-content: space-between; }
  .mock-content--cut-execution,
  .mascot-side-left .mock-content--cut-execution,
  .mascot-side-right .mock-content--cut-execution { min-height: 390px; padding: 18px 12px 125px; }
  .mock-cut-brand > small,
  .mock-cut-status { display: none; }
  .cut-card > header,
  .cut-next-material > header { align-items: flex-start; flex-direction: column; }
  .cut-overview__flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 7px; }
  .cut-overview__flow::before { display: none; }
  .cut-overview > footer,
  .cut-multi-wave > footer { align-items: flex-start; flex-wrap: wrap; }
  .cut-overview > footer strong,
  .cut-multi-wave > footer strong { width: 100%; margin-left: 0; }
  .cut-queue__lanes,
  .cut-machines > div,
  .cut-session,
  .cut-trace-context > section,
  .cut-trace-layout,
  .cut-destinations-layout,
  .cut-release-traverse,
  .cut-remote-qr__flow,
  .cut-multi-wave > div { grid-template-columns: 1fr; }
  .cut-queue__lanes article { grid-template-columns: 35px 1fr auto; }
  .cut-queue__lanes article > small { display: none; }
  .cut-machines article { min-height: 180px; }
  .cut-session > aside,
  .cut-trace-layout > aside,
  .cut-destinations-layout > aside { border-top: 1px solid #dce6e9; border-left: 0; }
  .cut-session > section > footer { align-items: flex-start; flex-wrap: wrap; }
  .cut-session > section > footer em { width: 100%; margin-left: 0; }
  .cut-table--assignment > div { grid-template-columns: .55fr .7fr 1fr; }
  .cut-table--assignment > div > :last-child { display: none; }
  .cut-assignment > footer,
  .cut-next-material > footer,
  .cut-handoff > footer { align-items: stretch; flex-direction: column; }
  .cut-assignment > footer button,
  .cut-next-material > footer button,
  .cut-handoff > footer button { width: 100%; margin-left: 0; justify-content: space-between; }
  .cut-trace-context > header { grid-template-columns: repeat(2, 1fr); }
  .cut-trace-context > header > div.is-wide { grid-column: 1 / -1; }
  .cut-trace-context > header > em { position: absolute; top: 13px; right: 13px; }
  .cut-trace-context > section > aside { min-height: 95px; }
  .cut-sheet { min-height: 190px; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, 1fr); }
  .cut-sheet--mini,
  .cut-release-traverse .cut-sheet { min-height: 235px; }
  .cut-trace-layout > aside { grid-template-columns: repeat(2, 1fr); }
  .cut-trace-layout > aside > small,
  .cut-trace-layout > aside > p { grid-column: 1 / -1; }
  .cut-destinations-layout > aside { max-height: none; }
  .cut-release-traverse > aside { min-height: 260px; }
  .cut-remote-qr__flow { gap: 12px; }
  .cut-qr-command { grid-template-columns: 112px 1fr; }
  .cut-qr-reader { min-height: 72px; }
  .cut-qr-reader__beam { top: -11px; right: auto; bottom: -11px; left: 50%; width: 2px; height: auto; background: repeating-linear-gradient(180deg, rgba(224, 75, 59, .18) 0 5px, rgba(224, 75, 59, .75) 5px 10px); transform: translateX(-50%); }
  .cut-qr-reader > small { margin-top: 22px; }
  .cut-remote-qr > footer { flex-wrap: wrap; }
  .cut-remote-qr > footer > em { width: 100%; margin-left: 0; }
  .cut-multi-wave > div > aside { grid-template-columns: repeat(2, 1fr); }
  .cut-multi-wave > div > aside p { grid-column: 1 / -1; }
  .cut-next-material > div article { grid-template-columns: 30px 1fr; }
  .cut-next-material > div article > em { grid-column: 2; width: fit-content; }
  .cut-modal-scene { min-height: 400px; }
  .cut-modal-scene > section > footer { align-items: stretch; flex-direction: column; }
  .cut-modal-scene > section > footer button { width: 100%; }
  .cut-handoff > header { grid-template-columns: 38px 1fr; align-items: center; }
  .cut-handoff > header > em { grid-column: 2; width: fit-content; }
  .cut-handoff__metrics { grid-template-columns: repeat(2, 1fr); }
  .cut-handoff__metrics article:last-child { grid-column: 1 / -1; }
  .cut-handoff__audit { grid-template-columns: 28px 1fr; }
  .cut-handoff__audit > em { grid-column: 2; }
  .mock-content--special-execution,
  .mascot-side-left .mock-content--special-execution,
  .mascot-side-right .mock-content--special-execution { min-height: 390px; padding: 18px 12px 125px; }
  .mock-special-brand { min-width: 0; }
  .mock-special-brand > i,
  .mock-special-brand .product-logo:nth-of-type(2) { display: none; }
  .special-card > header { align-items: flex-start; flex-direction: column; }
  .special-overview__flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 7px; }
  .special-overview__flow::before { display: none; }
  .special-overview > footer { align-items: flex-start; flex-wrap: wrap; }
  .special-overview > footer strong { width: 100%; margin-left: 0; }
  .special-queue__filters { grid-template-columns: 1fr; }
  .special-queue__filters button { width: 100%; }
  .special-queue__results > div { grid-template-columns: 1.2fr .55fr .7fr 1fr; }
  .special-queue__results > div > :nth-child(4) { display: none; }
  .special-queue > footer { align-items: flex-start; flex-direction: column; gap: 5px; }
  .special-queue > footer strong { margin-left: 0; }
  .special-launch { grid-template-columns: 1fr; gap: 10px; }
  .special-launch > i { transform: rotate(90deg); }
  .special-launch > aside { min-height: 190px; }
  .special-context > header { align-items: center; flex-direction: row; }
  .special-context__progress { grid-template-columns: 1fr 95px; }
  .special-context__progress > aside { grid-column: 1 / -1; }
  .special-context > footer { grid-template-columns: repeat(2, 1fr); }
  .special-context > footer > span:nth-child(2) { border-right: 0; }
  .special-context > footer > span:nth-child(-n+2) { border-bottom: 1px solid #dce6e9; }
  .special-preparation > header { align-items: stretch; }
  .special-preparation > header > aside { padding: 9px 0 0; border-top: 1px solid rgba(255,255,255,.28); border-left: 0; }
  .special-preparation__context { grid-template-columns: repeat(2, 1fr); }
  .special-preparation__context > span:nth-child(2) { border-right: 0; }
  .special-preparation__context > span:nth-child(-n+2) { border-bottom: 1px solid #dce6e9; }
  .special-preparation__body { grid-template-columns: 1fr; }
  .special-preparation__body > article { min-height: 220px; }
  .special-preparation__body > article svg { max-height: 190px; }
  .special-preparation > footer { align-items: stretch; flex-direction: column; }
  .special-preparation > footer button { width: 100%; margin-left: 0; }
  .special-bom > div { grid-template-columns: 1fr; }
  .special-bom > div > article svg { min-height: 220px; }
  .special-pdf { grid-template-columns: 1fr; }
  .special-pdf > aside { min-height: 125px; }
  .special-start { grid-template-columns: 1fr; }
  .special-start > div > i { transform: rotate(90deg); }
  .special-start > article { min-height: 210px; }
  .special-component__body { grid-template-columns: 1fr; }
  .special-component__body > section { border-right: 0; border-bottom: 1px solid #dce6e9; }
  .special-component__body > article svg { min-height: 235px; }
  .special-confirmation-mode__body { grid-template-columns: 1fr; }
  .special-confirmation-mode__body > aside { min-height: 210px; }
  .special-confirmation-mode > footer { align-items: flex-start; flex-direction: column; gap: 5px; }
  .special-qr > div { grid-template-columns: 1fr; }
  .special-qr > div > section { grid-template-columns: 112px 1fr; }
  .special-qr__beam { width: 2px; height: 74px; justify-self: center; background: repeating-linear-gradient(180deg, rgba(224,75,59,.2) 0 5px, rgba(224,75,59,.8) 5px 10px); }
  .special-qr__beam::before { top: 16px; left: -17px; }
  .special-qr__beam::after { top: 37px; left: -5px; }
  .special-qr > footer { flex-wrap: wrap; }
  .special-qr > footer > em { width: 100%; margin-left: 0; }
  .special-next-design > div { grid-template-columns: 1fr; }
  .special-next-design > div > i { transform: rotate(90deg); }
  .special-next-design > footer { align-items: stretch; flex-direction: column; }
  .special-next-design > footer button { width: 100%; margin-left: 0; }
  .special-next-wave { min-height: 430px; }
  .special-next-wave > section > footer { align-items: stretch; flex-direction: column; }
  .special-next-wave > section > footer button { width: 100%; }
  .special-treated-cut { grid-template-columns: 1fr; }
  .special-treated-cut > aside { min-height: 235px; border-top: 1px solid #d9e4e7; border-left: 0; }
  .special-washer > div { grid-template-columns: 1fr; }
  .special-washer > div > section { min-height: 210px; border-right: 0; border-bottom: 1px solid #dce6e9; }
  .special-washer > div > article,
  .special-washer > div > aside { min-height: 185px; }
  .special-washer > footer { align-items: flex-start; flex-direction: column; }
  .special-washer > footer strong { margin-left: 0; }
  .mock-content--breakage-rework,
  .mascot-side-left .mock-content--breakage-rework,
  .mascot-side-right .mock-content--breakage-rework { min-height: 390px; padding: 18px 12px 125px; }
  .mock-rework-brand { min-width: 0; }
  .mock-rework-brand > i,
  .mock-rework-brand .product-logo:nth-of-type(n+2) { display: none; }
  .rework-card > header { align-items: flex-start; flex-direction: column; }
  .rework-overview__flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rework-overview__flow::before { display: none; }
  .rework-overview > footer { align-items: flex-start; flex-wrap: wrap; }
  .rework-overview > footer strong { width: 100%; margin-left: 0; }
  .rework-state-rail { overflow-x: auto; grid-template-columns: repeat(7, 72px); }
  .rework-state-rail::before { display: none; }
  .rework-context-strip,
  .rework-floor-load__kpis { grid-template-columns: repeat(2, 1fr); }
  .rework-context-strip > span:nth-child(2),
  .rework-floor-load__kpis > span:nth-child(2) { border-right: 0; }
  .rework-context-strip > span:nth-child(-n+2),
  .rework-floor-load__kpis > span:nth-child(-n+2) { border-bottom: 1px solid #d8e4e7; }
  .rework-report__row { grid-template-columns: 43px 1fr; }
  .rework-report__row > span.is-state { grid-column: 2; width: fit-content; }
  .rework-report__row button { grid-column: 1 / -1; width: 100%; }
  .rework-report > footer { align-items: flex-start; flex-direction: column; }
  .rework-report > footer strong { margin-left: 0; }
  .rework-components__choices { grid-template-columns: 1fr; }
  .rework-components > footer { grid-template-columns: 1fr; }
  .rework-components > footer button { width: 100%; }
  .rework-label-scene,
  .rework-sequence,
  .rework-validation__map,
  .rework-cut,
  .rework-closure > div { grid-template-columns: 1fr; }
  .rework-label-scene > i { transform: rotate(90deg); }
  .rework-label-scene > aside { min-height: 160px; }
  .rework-rack > div { overflow-x: auto; grid-template-columns: repeat(12, 42px); }
  .rework-sequence > aside { min-height: 225px; }
  .rework-hub-grid { grid-template-columns: 1fr; }
  .rework-attention > aside { grid-template-columns: 29px 1fr; }
  .rework-attention > aside button { grid-column: 1 / -1; width: 100%; }
  .rework-queue > nav { overflow-x: auto; }
  .rework-queue > nav span { white-space: nowrap; }
  .rework-table > div { grid-template-columns: .9fr 1.1fr .55fr 1.3fr; }
  .rework-table > div > :last-child { display: none; }
  .rework-queue > footer { align-items: flex-start; flex-direction: column; }
  .rework-queue > footer strong { margin-left: 0; }
  .rework-routes > div,
  .rework-grouping > div,
  .rework-micro { grid-template-columns: 1fr; }
  .rework-grouping > div > i,
  .rework-micro > i { transform: rotate(90deg); }
  .rework-micro > footer { grid-column: 1; align-items: flex-start; flex-direction: column; }
  .rework-micro > footer strong { margin-left: 0; }
  .rework-validation__map > aside { min-height: 165px; }
  .rework-validation > footer,
  .rework-assignment > footer,
  .rework-floor-load > footer,
  .rework-production > footer { align-items: stretch; flex-direction: column; }
  .rework-validation > footer button,
  .rework-assignment > footer button,
  .rework-floor-load > footer button,
  .rework-production > footer button { width: 100%; margin-left: 0; }
  .rework-assignment > div article { grid-template-columns: 42px 1fr; }
  .rework-assignment > div article > i { grid-column: 1 / -1; transform: rotate(90deg); }
  .rework-assignment > div article > aside { grid-column: 1 / -1; }
  .rework-table.is-floor > div { grid-template-columns: .8fr .7fr .5fr .95fr; }
  .rework-cut > aside { min-height: 230px; border-top: 1px solid #d8e4e7; border-left: 0; }
  .rework-production__summary { grid-template-columns: repeat(2, 1fr); }
  .rework-production__summary button { grid-column: 1 / -1; width: 100%; }
  .rework-production > article > header { grid-template-columns: 31px 1fr; }
  .rework-production > article > header > b { grid-column: 2; width: fit-content; }
  .rework-closure > header { grid-template-columns: 34px 1fr; }
  .rework-closure > header > em { grid-column: 2; width: fit-content; }
  .mock-master-heading > span,
  .mock-master-search > em { display: none; }
  .mock-master-search > div { width: 100%; }
  .assist-panel { min-height: 430px; overflow: visible; }
  .assist-panel blockquote { font-size: 1.25rem; }
  .step-action { grid-template-columns: 1fr; gap: 6px; }
  .step-nav__previous strong { max-width: 130px; }
  .step-nav .button { min-width: 155px; padding-inline: 15px; }
  .mock-two-column, .mock-rules, .mock-pricing, .mock-timing, .mock-dimensions, .mock-shape, .mock-muntin, .mock-coating { grid-template-columns: 1fr; gap: 15px; }
  .mock-summary { display: none; }
  .mock-form { grid-template-columns: 1fr; }
  .mock-form label:first-child, .mock-form .is-long { grid-column: auto; }
  .mock-master-grid { grid-template-columns: repeat(2, 1fr); }
  .assist-intro-identity { grid-template-columns: 1fr; justify-items: center; gap: 35px; text-align: center; }
  .assist-intro-identity__mark { width: 154px; min-height: 154px; padding: 20px; }
  .assist-intro-identity__copy > div { justify-content: center; }
  .assist-intro-context { grid-template-columns: 1fr; }
  .assist-intro-context > i { transform: rotate(90deg); }
  .assist-intro-context > aside { min-height: 150px; }
  .assist-intro-capabilities { grid-template-columns: 1fr; }
  .assist-intro-capabilities article { min-height: 150px; padding-left: 90px; align-content: center; }
  .assist-intro-capabilities article > span { top: 50%; transform: translateY(-50%); }
  .assist-intro-control > header { align-items: flex-start; flex-direction: column; gap: 10px; }
  .assist-intro-control__checks { grid-template-columns: 1fr; }
  .assist-intro-control > footer { flex-wrap: wrap; }
  .assist-intro-control > footer small { width: 100%; margin: 3px 0 0; }
  .assist-intro-evidence { grid-template-columns: 1fr; }
  .assist-learning-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .assist-learning-flow::before { display: none; }
  .assist-learning-flow article { width: auto; min-height: 125px; }
  .assist-learning-flow > i { display: none; }
  .assist-intro-learning > footer { width: 100%; justify-content: center; border-radius: 8px; text-align: center; }
  .mock-product-grid { grid-template-columns: repeat(2, 1fr); }
  .mock-product-grid > div { min-height: 110px; gap: 10px; }
  .product-icon { width: 34px; height: 40px; }
  .mock-table__header, .mock-table__row { grid-template-columns: 0.8fr 1.5fr 1fr 20px; padding-inline: 10px; gap: 8px; }
  .mock-table__header i:nth-child(4), .mock-table__row i:nth-of-type(3) { display: none; }
  .mock-workflow { grid-template-columns: repeat(2, 1fr); row-gap: 30px; }
  .mock-coating { justify-items: center; }
  .coating-piece { width: min(330px, calc(100vw - 70px)); }
  .mock-coating aside { width: 100%; }
  .mock-duplicate { flex-direction: column; }
  .duplicate-arrow { transform: rotate(90deg); }
  .mock-manual, .mock-confirmation { grid-template-columns: 55px 1fr; }
  .mock-manual aside, .mock-confirmation aside { display: none; }
  .mock-action { grid-template-columns: 1fr; }
  .mock-action button { grid-column: 1; }
  .mock-review { grid-template-columns: 1fr; }
  .mock-pdf { grid-template-columns: 1fr; }
  .mock-pdf aside { grid-template-columns: repeat(3, 1fr); }
  .demo-preview { overflow: auto; padding: 70px 24px; }
  .demo-preview .product-signature { --logo-height: 30px; max-width: 100%; }
  .demo-preview h1 { font-size: 3.5rem; }
  .demo-preview__actions { align-items: stretch; flex-direction: column; }
  .demo-access-gate { display: block; overflow: auto; padding: 45px 24px; }
  .demo-access-gate__visual { display: none; }
  .demo-access-gate__copy h1 { font-size: 3.2rem; }
  .demo-access-gate__actions { align-items: stretch; flex-direction: column; }
  .access-page { grid-template-columns: 1fr; }
  .access-intro { padding: 70px 25px; }
  .access-intro h1, .access-success h1 { font-size: 3.6rem; }
  .access-form-wrap { position: relative; padding: 90px 25px 65px; }
  .access-form__row { grid-template-columns: 1fr; }
  .prototype-badge { top: 35px; }
  .access-success__actions { width: 100%; align-items: stretch; flex-direction: column; }
}

.mock-toolbar--commercial-closing { border-top-color: #09847b; }
.mock-toolbar--commercial-closing nav span.is-active { color: #08766f; }
.mock-toolbar--commercial-closing nav span.is-active::after { background: #09847b; }
.commercial-closing-toolbar-status { display: flex; margin-left: auto; align-items: center; gap: 5px; color: #267160; }
.commercial-closing-toolbar-status > i { width: 7px; height: 7px; background: #2a8b70; border-radius: 50%; box-shadow: 0 0 0 3px #e1f4ed; }
.commercial-closing-toolbar-status small { font-size: .21rem; font-weight: 950; letter-spacing: .045em; white-space: nowrap; }
.commercial-closing-toolbar-status.is-future { color: #87631a; }
.commercial-closing-toolbar-status.is-future > i { background: #d5a32b; box-shadow: 0 0 0 3px #fff2cf; }

.mock-content--commercial-closing {
  min-height: 373px;
  padding: 22px 28px 43px;
  background:
    linear-gradient(rgba(7, 119, 110, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7, 119, 110, .035) 1px, transparent 1px),
    #edf3f4;
  background-size: 22px 22px;
}
.commercial-closing { width: min(800px, 100%); color: #526c74; }
.commercial-closing *, .commercial-closing *::before, .commercial-closing *::after { box-sizing: border-box; }
.commercial-closing small, .commercial-closing em, .commercial-closing i { font-style: normal; }
.commercial-closing .icon { width: 13px; height: 13px; flex: 0 0 auto; }
.commercial-closing button { display: inline-flex; min-height: 28px; padding: 6px 10px; align-items: center; justify-content: center; gap: 5px; color: #fff; background: #08776f; border: 0; border-radius: 5px; font-family: inherit; font-size: .23rem; font-weight: 900; letter-spacing: .035em; }
.closing-card { overflow: hidden; background: #fff; border: 1px solid #d1dfe1; border-radius: 9px; box-shadow: 0 10px 27px rgba(18, 62, 68, .1); }
.closing-head { display: flex; min-height: 57px; padding: 10px 14px; align-items: center; justify-content: space-between; gap: 12px; background: linear-gradient(90deg, #f9fcfc, #ebf5f4); border-bottom: 1px solid #d8e6e5; }
.closing-head > div { display: grid; min-width: 0; gap: 3px; }
.closing-head small { color: #08776f; font-size: .27rem; font-weight: 950; letter-spacing: .095em; }
.closing-head strong { color: #204d53; font-size: .53rem; line-height: 1.18; }
.closing-head > span { padding: 5px 8px; color: #126d67; background: #e3f3f0; border: 1px solid #c7e2de; border-radius: 100px; font-size: .23rem; font-weight: 950; white-space: nowrap; }
.closing-card > footer { display: flex; min-height: 37px; padding: 7px 13px; align-items: center; gap: 10px; color: #697f84; background: #f7faf9; border-top: 1px solid #dce7e6; font-size: .25rem; }
.closing-card > footer span { display: flex; align-items: center; gap: 4px; }
.closing-card > footer strong, .closing-card > footer button { margin-left: auto; color: #285c61; }
.closing-card > footer button { color: #fff; }
.closing-status { display: inline-flex; width: fit-content; padding: 4px 6px; align-items: center; gap: 4px; color: #176b78; background: #e7f3f5; border-radius: 100px; font-size: .2rem; font-weight: 950; white-space: nowrap; }
.closing-status > i { width: 6px; height: 6px; background: currentColor; border-radius: 50%; }
.closing-status.is-done { color: #26725f; background: #e5f3ed; }
.closing-status.is-ready { color: #8a6618; background: #fff2d5; }
.closing-status.is-warning { color: #a2433d; background: #fde9e7; }
.closing-status.is-active { color: #086b78; background: #e2f3f4; }
.closing-status.is-future { color: #86621a; background: #fff2d4; }

.closing-overview__flow { display: grid; padding: 23px 13px 18px; grid-template-columns: 1fr 23px 1fr 23px 1fr 23px 1fr 23px 1fr; align-items: center; gap: 3px; }
.closing-overview__flow > article { display: grid; min-height: 128px; padding: 11px 7px; align-content: center; justify-items: center; gap: 6px; background: #f4f8f8; border: 1px solid #d7e3e3; border-radius: 7px; text-align: center; }
.closing-overview__flow > article.is-done { box-shadow: inset 0 3px #2d826d; }
.closing-overview__flow > article.is-active { background: #eaf6f5; border-color: #94cbc5; box-shadow: inset 0 3px #08776f; }
.closing-overview__flow > article.is-ready { background: #fff9ea; border-color: #e5ce91; box-shadow: inset 0 3px #d2a32d; }
.closing-overview__flow > article.is-future { opacity: .82; border-style: dashed; }
.closing-overview__flow article > b { display: grid; width: 23px; height: 23px; place-items: center; color: #fff; background: #55777a; border-radius: 50%; font-size: .17rem; }
.closing-overview__flow article > strong { color: #244f55; font-size: .27rem; }
.closing-overview__flow article > small { color: #778c90; font-size: .17rem; line-height: 1.3; }
.closing-overview__flow > i { display: grid; place-items: center; color: #0a7a72; }
.closing-overview__legend { display: flex; padding: 0 14px 13px; justify-content: center; gap: 16px; color: #547379; font-size: .21rem; }
.closing-overview__legend span { display: flex; align-items: center; gap: 4px; }
.closing-overview__legend span.is-future { color: #88681f; }
.closing-overview__legend span.is-future i { width: 7px; height: 7px; background: #d1a42f; border-radius: 50%; }

.closing-document { display: flex; min-height: 76px; padding: 10px; align-items: center; gap: 9px; background: #f4f8f8; border: 1px solid #d5e1e2; border-radius: 6px; }
.closing-document > span { display: grid; width: 43px; height: 50px; place-items: center; color: #52767a; background: #fff; border: 1px solid #cadadb; border-radius: 3px; font-size: .14rem; font-weight: 950; writing-mode: vertical-rl; transform: rotate(180deg); }
.closing-document > div { display: grid; gap: 3px; }
.closing-document strong { color: #265359; font-size: .3rem; }
.closing-document small { color: #71898d; font-size: .18rem; }
.closing-document.is-delivery { background: #eaf6f4; border-color: #9fcfc8; }
.closing-document.is-invoice { background: #edf2fa; border-color: #afc8df; }
.closing-journey__flow { display: grid; padding: 19px 15px 13px; grid-template-columns: 1fr 63px 1fr 63px 1fr; align-items: center; gap: 5px; }
.closing-journey__flow > span { display: grid; justify-items: center; gap: 3px; color: #0b7770; text-align: center; }
.closing-journey__flow > span b { font-size: .2rem; }
.closing-journey__flow > span small { color: #819295; font-size: .13rem; }
.closing-journey__detail { display: grid; padding: 0 15px 14px; grid-template-columns: repeat(3, 1fr) auto; gap: 6px; }
.closing-journey__detail > span { display: grid; padding: 7px 8px; gap: 2px; background: #f3f7f7; border-radius: 4px; }
.closing-journey__detail small { color: #789095; font-size: .15rem; font-weight: 900; }
.closing-journey__detail b { color: #355e63; font-size: .19rem; }

.closing-selection__summary, .closing-dashboard__kpis { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid #dce7e6; }
.closing-selection__summary > span, .closing-dashboard__kpis > article { display: grid; min-height: 59px; padding: 8px 11px; align-content: center; gap: 2px; border-right: 1px solid #e0e9e8; }
.closing-selection__summary > span:last-child, .closing-dashboard__kpis > article:last-child { border-right: 0; }
.closing-selection__summary small, .closing-dashboard__kpis small { color: #758d91; font-size: .17rem; font-weight: 950; }
.closing-selection__summary strong, .closing-dashboard__kpis strong { color: #18655f; font-size: .39rem; }
.closing-table { padding: 7px 12px 10px; }
.closing-table > header, .closing-table > article { display: grid; align-items: center; gap: 7px; }
.closing-table > header { padding: 5px 6px; color: #73898d; font-size: .15rem; font-weight: 950; }
.closing-table > article { min-height: 39px; padding: 5px 6px; border-top: 1px solid #e2eaea; font-size: .2rem; }
.closing-selection__table > header, .closing-selection__table > article { grid-template-columns: 19px 1.3fr repeat(4, .75fr); }
.closing-selection__table article > span:first-child { color: #2b816b; }
.closing-selection__table strong { color: #315d62; }
.closing-selection__table b { padding: 4px; color: #176a63; background: #e6f4f1; border-radius: 3px; text-align: center; }

.closing-partial__body { display: grid; padding: 16px; grid-template-columns: 1.05fr 1.35fr; gap: 11px; }
.closing-partial__body > section { display: flex; padding: 10px; align-items: center; gap: 13px; background: #f3f8f7; border-radius: 7px; }
.closing-partial__body > section > div:last-child { display: grid; gap: 3px; }
.closing-partial__body > section small { color: #758c90; font-size: .17rem; font-weight: 900; }
.closing-partial__body > section strong { color: #24575b; font-size: .35rem; }
.closing-partial__body > section span { color: #718589; font-size: .17rem; }
.closing-ring { display: grid; width: 83px; height: 83px; flex: 0 0 auto; place-items: center; background: conic-gradient(#168078 calc(var(--value) * 1%), #d7e7e4 0); border-radius: 50%; }
.closing-ring::before { width: 63px; height: 63px; content: ''; background: #fff; border-radius: 50%; grid-area: 1 / 1; }
.closing-ring > span { z-index: 1; display: grid; justify-items: center; grid-area: 1 / 1; }
.closing-ring > span strong { font-size: .42rem; }
.closing-ring > span small { font-size: .12rem; }
.closing-partial__body > aside { display: grid; grid-template-columns: 1fr 20px 1fr 20px 1fr; align-items: center; gap: 4px; }
.closing-partial__body > aside > span { display: grid; min-height: 73px; padding: 8px; align-content: center; justify-items: center; gap: 3px; background: #f5f8f8; border-radius: 5px; }
.closing-partial__body > aside > span.is-used { color: #fff; background: #08776f; }
.closing-partial__body > aside > span.is-left { background: #fff7e2; }
.closing-partial__body > aside small { font-size: .13rem; font-weight: 950; text-align: center; }
.closing-partial__body > aside b { font-size: .42rem; }
.closing-partial__body > aside > i { color: #0a7770; }
.closing-partial__body > article { display: flex; padding: 8px 10px; grid-column: 1 / -1; align-items: center; gap: 8px; color: #26715f; background: #eaf5f1; border-radius: 5px; }
.closing-partial__body > article > div { display: grid; gap: 2px; }
.closing-partial__body > article strong { font-size: .2rem; }
.closing-partial__body > article small { font-size: .17rem; }
.closing-partial__body > article .closing-status { margin-left: auto; }

.closing-consolidation__cards, .closing-fiscal__cards { display: grid; padding: 17px; grid-template-columns: 1fr 1fr; gap: 11px; }
.closing-consolidation__cards > article { display: grid; min-height: 205px; padding: 12px; align-content: start; gap: 9px; background: #f5f8f8; border: 1px solid #dae5e5; border-radius: 7px; }
.closing-consolidation__cards > article.is-selected { background: #eaf6f3; border-color: #8fc9c1; box-shadow: inset 0 3px #08776f; }
.closing-consolidation__cards article > header { display: flex; align-items: center; gap: 8px; }
.closing-consolidation__cards article > header > span { display: grid; width: 27px; height: 27px; place-items: center; color: #fff; background: #648387; border-radius: 50%; }
.closing-consolidation__cards article > header div { display: grid; gap: 2px; }
.closing-consolidation__cards article small { color: #71898d; font-size: .16rem; font-weight: 900; }
.closing-consolidation__cards article strong { color: #2d575c; font-size: .28rem; }
.closing-consolidation__cards article > div { display: grid; grid-template-columns: 1fr 20px 1fr; align-items: center; gap: 4px; }
.closing-consolidation__cards article > div > span { display: grid; padding: 8px; justify-items: center; background: #fff; border-radius: 4px; }
.closing-consolidation__cards article > div b { color: #126e67; font-size: .38rem; }
.closing-consolidation__cards article > p { margin: 0; color: #72878b; font-size: .2rem; line-height: 1.35; }
.closing-consolidation__cards article > button { width: fit-content; margin-top: auto; }

.closing-snapshot__body { display: grid; padding: 14px; grid-template-columns: 1.15fr .85fr; gap: 11px; }
.closing-snapshot__body > section { display: grid; gap: 6px; }
.closing-snapshot__body label { display: grid; padding: 6px 9px; gap: 2px; color: #73898d; background: #f4f8f8; border: 1px solid #dce7e6; border-radius: 4px; font-size: .14rem; font-weight: 900; }
.closing-snapshot__body label strong { color: #315b60; font-size: .2rem; }
.closing-snapshot__body > section > div { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.closing-snapshot__body > aside { display: grid; padding: 10px; align-content: start; gap: 6px; background: #edf7f5; border: 1px solid #b9dbd6; border-radius: 6px; }
.closing-snapshot__body > aside > small { color: #08776f; font-size: .17rem; font-weight: 950; }
.closing-snapshot__body > aside > span { display: flex; align-items: center; gap: 6px; color: #26806a; }
.closing-snapshot__body > aside > span div { display: grid; gap: 1px; }
.closing-snapshot__body > aside > span small { color: #73898c; font-size: .14rem; }
.closing-snapshot__body > aside > span b { color: #315d61; font-size: .18rem; }
.closing-snapshot__body > aside > em { padding-top: 4px; color: #6b8386; border-top: 1px solid #cfe2df; font-size: .15rem; line-height: 1.35; }

.closing-delivery-docs__body, .closing-invoice-send__body { display: grid; padding: 13px; grid-template-columns: 1.2fr .8fr; gap: 11px; }
.closing-delivery-docs__body > section, .closing-invoice-send__body > section { display: grid; align-content: center; gap: 6px; }
.closing-delivery-docs__body > section article, .closing-invoice-send__body > section article { display: grid; min-height: 55px; padding: 7px; grid-template-columns: 22px 1fr auto auto; align-items: center; gap: 7px; background: #f4f8f8; border: 1px solid #dce6e6; border-radius: 5px; }
.closing-delivery-docs__body > section article > span, .closing-invoice-send__body > section article > span { color: #27806a; }
.closing-delivery-docs__body article > div, .closing-invoice-send__body article > div { display: grid; gap: 2px; }
.closing-delivery-docs__body article strong, .closing-invoice-send__body article strong { color: #315b60; font-size: .23rem; }
.closing-delivery-docs__body article small, .closing-invoice-send__body article small { color: #7b8f92; font-size: .16rem; }
.closing-delivery-docs__body article > b, .closing-invoice-send__body article > b { color: #557278; font-size: .18rem; }
.closing-delivery-docs__body > aside, .closing-invoice-send__body > aside { display: grid; padding: 10px; align-content: center; gap: 6px; background: #edf6f5; border-radius: 6px; }
.closing-delivery-docs__body > aside > small, .closing-invoice-send__body > aside > small { color: #08776f; font-size: .17rem; font-weight: 950; }
.closing-delivery-docs__body > aside > button { justify-content: flex-start; background: #fff; border: 1px solid #bdd7d4; color: #236660; }
.closing-delivery-docs__body > aside > div { display: grid; padding: 7px; gap: 2px; background: #fff; border-radius: 4px; }
.closing-delivery-docs__body > aside > div small { color: #7d9093; font-size: .14rem; }
.closing-delivery-docs__body > aside > div b { color: #2b5b60; font-size: .2rem; }
.closing-delivery-docs__body > aside > div span { color: #73898d; font-size: .14rem; }
.closing-delivery-docs__body > aside > button.is-send { justify-content: center; color: #fff; background: #08776f; border: 0; }

.closing-invoicing__sources { display: grid; padding: 13px; grid-template-columns: 1fr 35px 1.1fr; align-items: center; gap: 8px; }
.closing-invoicing__sources > section { display: grid; gap: 6px; }
.closing-invoicing__sources > section > small, .closing-invoicing__sources > aside > small { color: #08776f; font-size: .16rem; font-weight: 950; }
.closing-invoicing__sources > i { display: grid; place-items: center; color: #08776f; }
.closing-invoicing__sources > aside { display: grid; gap: 6px; }
.closing-invoicing__sources > aside > div { display: grid; gap: 3px; }
.closing-invoicing__sources > aside > div span, .closing-invoicing__sources > aside > div strong { display: flex; padding: 3px 6px; justify-content: space-between; color: #657e82; background: #f4f8f8; font-size: .18rem; }
.closing-invoicing__sources > aside > div strong { color: #245a5b; background: #e8f5f2; font-size: .21rem; }
.closing-invoicing__checks { display: grid; padding: 0 13px 11px; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.closing-invoicing__checks span { display: flex; padding: 6px; align-items: center; gap: 4px; color: #28705f; background: #ebf6f2; border-radius: 4px; font-size: .16rem; }

.closing-fiscal__cards > article { display: grid; min-height: 215px; padding: 11px; align-content: start; gap: 8px; background: #f5f8f8; border: 1px solid #dae5e5; border-radius: 7px; }
.closing-fiscal__cards > article.is-spain { box-shadow: inset 0 3px #bd3039; }
.closing-fiscal__cards > article.is-mexico { box-shadow: inset 0 3px #08776f; }
.closing-fiscal__cards article > header { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 8px; }
.closing-fiscal__cards article > header > span { display: grid; width: 28px; height: 28px; place-items: center; color: #fff; background: #526f74; border-radius: 50%; font-size: .17rem; font-weight: 950; }
.closing-fiscal__cards article > header > div { display: grid; gap: 1px; }
.closing-fiscal__cards article > header small { color: #788e91; font-size: .14rem; font-weight: 900; }
.closing-fiscal__cards article > header strong { color: #2b595d; font-size: .26rem; }
.closing-fiscal__qr, .closing-fiscal__seal { display: flex; min-height: 67px; padding: 7px; align-items: center; gap: 9px; background: #fff; border-radius: 5px; }
.closing-fiscal__qr > i { width: 47px; height: 47px; background: repeating-conic-gradient(#274e54 0 25%, transparent 0 50%) 0 0 / 10px 10px; border: 4px solid #274e54; box-shadow: inset 0 0 0 4px #fff; }
.closing-fiscal__qr > span, .closing-fiscal__seal > span { display: grid; gap: 2px; }
.closing-fiscal__qr small, .closing-fiscal__seal small { color: #7a8f92; font-size: .13rem; }
.closing-fiscal__qr b, .closing-fiscal__seal b { color: #2a585d; font-size: .23rem; }
.closing-fiscal__qr em, .closing-fiscal__seal em { color: #6b8386; font-size: .14rem; }
.closing-fiscal__seal > b { display: grid; width: 48px; height: 48px; place-items: center; color: #08776f; border: 3px double #08776f; border-radius: 50%; font-size: .19rem; }
.closing-fiscal__cards article > p { display: flex; margin: 0; justify-content: space-between; gap: 4px; color: #48716d; font-size: .14rem; }
.closing-fiscal__cards article > p span { display: flex; align-items: center; gap: 2px; }
.closing-fiscal__cards article > button { width: fit-content; margin-top: auto; }

.closing-invoice-send__body > section article.is-warning { background: #fff7f4; border-color: #ebc0b9; }
.closing-invoice-send__body > section article.is-warning > span { color: #a1443d; font-weight: 950; }
.closing-invoice-send__body > aside > strong { color: #2b595e; font-size: .24rem; }
.closing-invoice-send__body > aside > p { margin: 0; color: #6e8488; font-size: .18rem; line-height: 1.4; }
.closing-invoice-send__body > aside > span { display: flex; padding: 5px; gap: 5px; color: #72898d; background: #fff; border-radius: 4px; font-size: .14rem; }

.closing-activation { position: relative; min-height: 330px; }
.closing-activation__backdrop { overflow: hidden; min-height: 282px; opacity: .42; background: #fff; border: 1px solid #d4e1e1; border-radius: 8px; }
.closing-activation__backdrop > div { display: grid; padding: 14px; gap: 6px; }
.closing-activation__backdrop > div span { padding: 10px; background: #edf4f4; border-radius: 4px; font-size: .2rem; }
.closing-activation__dialog { position: absolute; top: 27px; left: 50%; overflow: hidden; width: min(520px, calc(100% - 30px)); background: #fff; border: 1px solid #bdd5d2; border-radius: 8px; box-shadow: 0 15px 38px rgba(20, 61, 65, .22); transform: translateX(-50%); }
.closing-activation__dialog > header { display: grid; padding: 11px 13px; grid-template-columns: 32px 1fr auto; align-items: center; gap: 8px; background: #eaf6f3; border-bottom: 1px solid #cae0dc; }
.closing-activation__dialog > header > span { display: grid; width: 31px; height: 31px; place-items: center; color: #fff; background: #08776f; border-radius: 50%; }
.closing-activation__dialog > header > div { display: grid; gap: 2px; }
.closing-activation__dialog > header small { color: #08776f; font-size: .15rem; font-weight: 950; }
.closing-activation__dialog > header strong { color: #28565b; font-size: .28rem; }
.closing-activation__facts { display: grid; padding: 11px 13px; grid-template-columns: 1fr 1fr; gap: 6px; }
.closing-activation__facts span { display: grid; padding: 6px 8px; gap: 2px; background: #f4f8f8; border-radius: 4px; }
.closing-activation__facts small { color: #788d91; font-size: .13rem; }
.closing-activation__facts b { color: #315b60; font-size: .19rem; }
.closing-activation__dialog > p { display: flex; margin: 0 13px 10px; padding: 7px; align-items: center; gap: 7px; color: #27715f; background: #eaf5f1; border-radius: 4px; }
.closing-activation__dialog > p span { display: grid; gap: 1px; }
.closing-activation__dialog > p strong { font-size: .18rem; }
.closing-activation__dialog > p small { font-size: .14rem; }
.closing-activation__dialog > footer { display: flex; padding: 8px 13px; justify-content: flex-end; gap: 6px; background: #f6f9f9; border-top: 1px solid #dfe8e8; }
.closing-activation__dialog > footer button:first-child { color: #526e72; background: #fff; border: 1px solid #cbdada; }

.closing-installments__timeline { display: grid; padding: 25px 18px 16px; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.closing-installments__timeline > article { position: relative; display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 8px; }
.closing-installments__timeline > article > span { z-index: 1; display: grid; width: 33px; height: 33px; place-items: center; color: #fff; background: #08776f; border-radius: 50%; font-size: .17rem; font-weight: 950; }
.closing-installments__timeline > article > div { display: grid; gap: 2px; }
.closing-installments__timeline small { color: #788d91; font-size: .14rem; font-weight: 900; }
.closing-installments__timeline strong { color: #315b60; font-size: .2rem; }
.closing-installments__timeline b { color: #08776f; font-size: .29rem; }
.closing-installments__timeline > article > i { position: absolute; top: 16px; right: -14px; width: 28px; height: 2px; background: #afd3cf; }
.closing-installments__total { display: flex; margin: 4px 18px 20px; padding: 11px; align-items: center; gap: 13px; color: #28715f; background: #eaf6f2; border: 1px solid #badcd4; border-radius: 6px; font-size: .18rem; }
.closing-installments__total > span { display: flex; align-items: center; gap: 4px; }
.closing-installments__total > strong { display: grid; margin-left: auto; color: #205f58; font-size: .35rem; text-align: right; }
.closing-installments__total > strong small { font-size: .13rem; }

.closing-dashboard__kpis > article span { color: #7b8e91; font-size: .15rem; }
.closing-dashboard__kpis > article.is-warning { box-shadow: inset 0 3px #bc5549; }
.closing-dashboard__kpis > article.is-done { box-shadow: inset 0 3px #2f846e; }
.closing-dashboard__kpis > article.is-future { opacity: .7; border-style: dashed; }
.closing-dashboard__body { display: grid; padding: 13px; grid-template-columns: 1.1fr .9fr; gap: 11px; }
.closing-dashboard__body > section, .closing-dashboard__body > aside { display: grid; padding: 9px; align-content: start; gap: 6px; background: #f4f8f8; border-radius: 6px; }
.closing-dashboard__body > section > small, .closing-dashboard__body > aside > small { color: #08776f; font-size: .16rem; font-weight: 950; }
.closing-dashboard__body > section > span { display: grid; grid-template-columns: 66px 1fr 56px; align-items: center; gap: 6px; }
.closing-dashboard__body > section b, .closing-dashboard__body > section strong { font-size: .15rem; }
.closing-dashboard__body > section > span > i { height: 7px; overflow: hidden; background: #dbe6e5; border-radius: 10px; }
.closing-dashboard__body > section > span > i em { display: block; height: 100%; background: #70aaa4; border-radius: inherit; }
.closing-dashboard__body > section > span.is-active > i em { background: #bd584c; }
.closing-dashboard__body > section > span.is-active b, .closing-dashboard__body > section > span.is-active strong { color: #9b4239; }
.closing-dashboard__body > aside > span { display: flex; padding: 5px 6px; align-items: center; justify-content: space-between; background: #fff; border-radius: 3px; }
.closing-dashboard__body > aside > span div { display: grid; gap: 1px; }
.closing-dashboard__body > aside b { color: #345e63; font-size: .16rem; }
.closing-dashboard__body > aside span small { color: #829497; font-size: .13rem; }
.closing-dashboard__body > aside strong { color: #96453e; font-size: .17rem; }

.closing-exposure__credit { display: grid; padding: 15px 18px 11px; grid-template-columns: 1fr 22px 1fr 22px 1fr; align-items: center; gap: 5px; }
.closing-exposure__credit > span { display: grid; padding: 10px; justify-items: center; gap: 2px; background: #f3f8f7; border-radius: 6px; }
.closing-exposure__credit > span.is-available { color: #fff; background: #08776f; }
.closing-exposure__credit small { font-size: .15rem; font-weight: 900; }
.closing-exposure__credit strong { font-size: .37rem; }
.closing-exposure__credit > i { color: #6b8588; font-size: .38rem; text-align: center; }
.closing-exposure__stages { display: grid; padding: 5px 18px 15px; gap: 4px; }
.closing-exposure__stages > article { display: grid; min-height: 25px; grid-template-columns: 21px 1fr 66px; align-items: center; gap: 6px; }
.closing-exposure__stages > article > span { color: #799093; font-size: .14rem; }
.closing-exposure__stages > article > div { display: grid; grid-template-columns: 80px 1fr; align-items: center; gap: 6px; }
.closing-exposure__stages small { color: #567277; font-size: .14rem; font-weight: 900; }
.closing-exposure__stages > article > div > i { height: 6px; overflow: hidden; background: #e0e9e8; border-radius: 10px; }
.closing-exposure__stages > article > div > i em { display: block; height: 100%; background: linear-gradient(90deg, #75afa9, #08776f); border-radius: inherit; }
.closing-exposure__stages strong { color: #28595e; font-size: .17rem; text-align: right; }

.closing-ledger__body { display: grid; padding: 13px; grid-template-columns: 1.35fr .65fr; gap: 10px; }
.closing-ledger__body > section { overflow: hidden; border: 1px solid #d8e4e3; border-radius: 5px; }
.closing-ledger__body > section > header, .closing-ledger__body > section > article { display: grid; grid-template-columns: .65fr 1.2fr .9fr 1fr; align-items: center; gap: 6px; }
.closing-ledger__body > section > header { padding: 6px 8px; color: #71888b; background: #edf4f4; font-size: .13rem; font-weight: 950; }
.closing-ledger__body > section > article { min-height: 43px; padding: 6px 8px; border-top: 1px solid #e1e9e9; font-size: .17rem; }
.closing-ledger__body > section > article.is-active { background: #eaf6f3; box-shadow: inset 3px 0 #08776f; }
.closing-ledger__body > section > article strong { color: #2d5a5f; }
.closing-ledger__body > section > article b, .closing-ledger__body > section > article em { text-align: right; }
.closing-ledger__body > section > article b { color: #966036; }
.closing-ledger__body > section > article em { color: #2c5e62; font-weight: 900; }
.closing-ledger__body > section > footer { display: flex; padding: 7px 8px; align-items: center; gap: 4px; color: #70868a; background: #f7f9f9; font-size: .14rem; }
.closing-ledger__body > aside { display: grid; padding: 9px; align-content: start; gap: 5px; background: #f3f8f7; border-radius: 5px; }
.closing-ledger__body > aside > small { color: #08776f; font-size: .15rem; font-weight: 950; }
.closing-ledger__body > aside > span { display: flex; padding: 4px 5px; justify-content: space-between; gap: 5px; background: #fff; border-radius: 3px; }
.closing-ledger__body > aside > span small { color: #788d90; font-size: .13rem; }
.closing-ledger__body > aside > span b { color: #315d61; font-size: .15rem; }
.closing-ledger__body > aside > button { margin-top: auto; font-size: .16rem; }

.closing-payment .closing-head { background: linear-gradient(90deg, #fffdf7, #fff4d9); }
.closing-payment .closing-head small { color: #906919; }
.closing-payment .closing-head > span { color: #89651a; background: #fff0c8; border-color: #ead092; }
.closing-payment__banner { display: grid; margin: 13px; padding: 10px 12px; grid-template-columns: 38px 1fr auto; align-items: center; gap: 9px; color: #8a6519; background: #fff5dc; border: 1px solid #e6ce90; border-radius: 6px; }
.closing-payment__banner > span { display: grid; width: 36px; height: 36px; place-items: center; color: #fff; background: #c79628; border-radius: 50%; }
.closing-payment__banner > div { display: grid; gap: 2px; }
.closing-payment__banner small { font-size: .15rem; font-weight: 950; }
.closing-payment__banner strong { color: #775714; font-size: .34rem; }
.closing-payment__banner em { color: #856e39; font-size: .17rem; }
.closing-payment__allocation { display: grid; padding: 0 13px 13px; grid-template-columns: 1.25fr 30px .75fr; align-items: center; gap: 8px; }
.closing-payment__allocation > section { display: grid; gap: 5px; }
.closing-payment__allocation > section > small { color: #8a671b; font-size: .15rem; font-weight: 950; }
.closing-payment__allocation > section > span { display: grid; padding: 6px 8px; grid-template-columns: 15px 1fr auto; align-items: center; gap: 5px; color: #2d7a65; background: #eef7f4; border-radius: 4px; }
.closing-payment__allocation > section b { color: #456d70; font-size: .16rem; }
.closing-payment__allocation > section strong { color: #235f59; font-size: .18rem; }
.closing-payment__allocation > i { display: grid; place-items: center; color: #a67a1f; }
.closing-payment__allocation > aside { display: grid; gap: 5px; }
.closing-payment__allocation > aside > span { display: flex; padding: 7px; align-items: center; justify-content: space-between; gap: 5px; background: #f4f8f8; border-radius: 4px; }
.closing-payment__allocation > aside > span.is-zero { color: #26715f; background: #e9f5f1; }
.closing-payment__allocation > aside small { font-size: .13rem; font-weight: 900; }
.closing-payment__allocation > aside b { font-size: .18rem; }

@media (max-width: 760px) {
  .mock-content--factory-monitor,
  .mascot-side-left .mock-content--factory-monitor,
  .mascot-side-right .mock-content--factory-monitor { min-height: 390px; padding: 18px 12px 125px; }
  .mock-toolbar--factory-monitor .mock-monitor-brand { min-width: 0; }
  .mock-toolbar--factory-monitor .mock-monitor-brand small { display: none; }
  .factory-monitor { width: 100%; }
  .monitor-head { align-items: flex-start; flex-direction: column; }
  .monitor-head > span { white-space: normal; }
  .monitor-card > footer { align-items: flex-start; flex-wrap: wrap; }
  .monitor-card > footer strong { width: 100%; margin-left: 0; }
  .monitor-overview__views,
  .monitor-states__grid,
  .monitor-parkings__grid { grid-template-columns: 1fr; }
  .monitor-overview__views article { min-height: 125px; }
  .monitor-baseline__cards { grid-template-columns: 1fr; }
  .monitor-baseline__cards > i { transform: rotate(90deg); }
  .monitor-timeline em { left: 50%; }
  .monitor-kpis__grid { grid-template-columns: repeat(2, 1fr); }
  .monitor-kpis__grid article:first-child { grid-column: 1 / -1; }
  .monitor-flow__grid { grid-template-columns: 1fr; }
  .monitor-flow__grid > span { height: 28px; grid-template-columns: 1fr auto 1fr; align-items: center; align-content: center; gap: 5px; }
  .monitor-flow__grid > span b { transform: none; }
  .monitor-flow__grid > i { transform: rotate(90deg); }
  .monitor-states__grid article { min-height: 145px; }
  .monitor-modal-stage { min-height: 590px; }
  .monitor-dialog { width: calc(100% - 24px); }
  .monitor-detail-strip { grid-template-columns: repeat(2, 1fr); }
  .monitor-detail-strip > span:nth-child(2) { border-right: 0; }
  .monitor-detail-cols { grid-template-columns: 1fr; }
  .monitor-dialog > footer { align-items: stretch; flex-direction: column; }
  .monitor-dialog > footer > span { margin-right: 0; }
  .monitor-table { overflow-x: auto; }
  .monitor-table article { min-width: 590px; }
  .monitor-alerts__grid,
  .monitor-station__grid,
  .monitor-handoff__grid { grid-template-columns: 1fr; }
  .monitor-rework__compare { padding-inline: 12px; grid-template-columns: 1fr; }
  .monitor-rework__compare > i { transform: rotate(90deg); }
  .monitor-rework__row { grid-template-columns: 32px 1fr; }
  .monitor-rework__row .monitor-status { grid-column: 2; }
  .monitor-rework__row button { grid-column: 1 / -1; width: 100%; }
  .monitor-plant__canvas { min-width: 620px; }
  .monitor-plant { overflow-x: auto; }
  .monitor-plant .monitor-head,
  .monitor-plant > footer { position: sticky; left: 0; width: calc(100vw - 56px); }
  .monitor-station__grid > section { grid-template-columns: 1fr; }
  .monitor-inventory__summary { grid-template-columns: repeat(2, 1fr); }
  .monitor-inventory__racks { grid-template-columns: repeat(2, 1fr); }
  .monitor-route-scale { grid-template-columns: 1fr; }
  .monitor-route-list { overflow-x: auto; }
  .monitor-route-list article { min-width: 570px; }
  .monitor-floor-action { min-height: 590px; grid-template-columns: 1fr; }
  .monitor-floor-context { min-height: 160px; }
  .monitor-movement { grid-template-columns: 1fr; }
  .monitor-movement > i { transform: rotate(90deg); }
  .monitor-action-checks { grid-template-columns: 1fr; }
  .monitor-handoff__grid > section > div { grid-template-columns: repeat(3, 1fr); }
  .mock-content--dispatch-planning,
  .mascot-side-left .mock-content--dispatch-planning,
  .mascot-side-right .mock-content--dispatch-planning { min-height: 390px; padding: 18px 12px 125px; }
  .mock-toolbar--dispatch .mock-dispatch-brand { min-width: 0; }
  .mock-toolbar--dispatch .mock-dispatch-brand small,
  .mock-dispatch-vision small { display: none; }
  .dispatch-planning { width: 100%; }
  .dispatch-head { align-items: flex-start; flex-direction: column; }
  .dispatch-head > span { white-space: normal; }
  .dispatch-card > footer { align-items: flex-start; flex-wrap: wrap; }
  .dispatch-card > footer strong { width: 100%; margin-left: 0; }
  .dispatch-overview__flow,
  .dispatch-certainty__cards,
  .dispatch-grouping__canvas,
  .dispatch-direct__body,
  .dispatch-reorder__body,
  .dispatch-handoff__flow { grid-template-columns: 1fr; }
  .dispatch-overview__flow > i,
  .dispatch-certainty__cards > i,
  .dispatch-grouping__canvas > i,
  .dispatch-direct__body > i,
  .dispatch-reorder__body > i,
  .dispatch-handoff__flow > i { transform: rotate(90deg); }
  .dispatch-certainty__cards > i small { writing-mode: initial; }
  .dispatch-kpis { grid-template-columns: repeat(2, 1fr); }
  .dispatch-table,
  .dispatch-calendar__grid { overflow-x: auto; }
  .dispatch-table > header,
  .dispatch-table > article { min-width: 620px; }
  .dispatch-provisional__rows article { grid-template-columns: 1fr auto; }
  .dispatch-provisional__rows article > span:first-child { grid-column: 1 / -1; }
  .dispatch-routes__body,
  .dispatch-proposal__cards,
  .dispatch-vehicles__grid,
  .dispatch-loading__body,
  .dispatch-documents__body { grid-template-columns: 1fr; }
  .dispatch-calendar__grid > header,
  .dispatch-calendar__grid > article { min-width: 600px; }
  .dispatch-direct__body > section > div { grid-template-columns: repeat(3, 1fr); }
  .dispatch-reconciliation__summary { grid-template-columns: 1fr 1fr; }
  .dispatch-reconciliation__summary > em { display: none; }
  .dispatch-reconciliation__table { overflow-x: auto; }
  .dispatch-reconciliation__table > header,
  .dispatch-reconciliation__table > article { min-width: 520px; }
  .dispatch-conflicts { min-height: 390px; }
  .dispatch-conflicts__dialog { top: 18px; }
  .dispatch-loading__head { grid-template-columns: repeat(2, 1fr); }
  .dispatch-loading__head .dispatch-status { justify-self: start; }
  .dispatch-documents__body > aside { min-height: 255px; }
  .dispatch-handoff__result { grid-template-columns: 38px 1fr; }
  .dispatch-handoff__result .dispatch-status { grid-column: 2; }
  .dispatch-state-rail { grid-template-columns: repeat(4, 1fr); }
  .mock-content--commercial-closing,
  .mascot-side-left .mock-content--commercial-closing,
  .mascot-side-right .mock-content--commercial-closing { min-height: 390px; padding: 18px 12px 125px; }
  .mock-toolbar--commercial-closing .mock-cw-brand small,
  .commercial-closing-toolbar-status small { display: none; }
  .commercial-closing { width: 100%; }
  .closing-head { align-items: flex-start; flex-direction: column; }
  .closing-head > span { white-space: normal; }
  .closing-card > footer { align-items: flex-start; flex-wrap: wrap; }
  .closing-card > footer strong,
  .closing-card > footer button { width: 100%; margin-left: 0; }
  .closing-overview__flow { grid-template-columns: 1fr; }
  .closing-overview__flow > i { transform: rotate(90deg); }
  .closing-overview__legend { align-items: flex-start; flex-direction: column; }
  .closing-journey__flow,
  .closing-partial__body,
  .closing-consolidation__cards,
  .closing-snapshot__body,
  .closing-delivery-docs__body,
  .closing-invoicing__sources,
  .closing-fiscal__cards,
  .closing-invoice-send__body,
  .closing-dashboard__body,
  .closing-ledger__body,
  .closing-payment__allocation { grid-template-columns: 1fr; }
  .closing-journey__flow > span,
  .closing-invoicing__sources > i,
  .closing-payment__allocation > i { transform: rotate(90deg); }
  .closing-journey__detail { grid-template-columns: 1fr 1fr; }
  .closing-journey__detail button { grid-column: 1 / -1; }
  .closing-selection__summary,
  .closing-dashboard__kpis { grid-template-columns: repeat(2, 1fr); }
  .closing-selection__table { overflow-x: auto; }
  .closing-selection__table > header,
  .closing-selection__table > article { min-width: 610px; }
  .closing-partial__body > aside { grid-template-columns: 1fr; }
  .closing-partial__body > aside > i { transform: rotate(90deg); }
  .closing-partial__body > article { grid-column: auto; flex-wrap: wrap; }
  .closing-partial__body > article .closing-status { width: 100%; margin-left: 0; }
  .closing-invoicing__checks { grid-template-columns: repeat(2, 1fr); }
  .closing-installments__timeline { grid-template-columns: 1fr; }
  .closing-installments__timeline > article > i { top: auto; right: auto; bottom: -14px; left: 16px; width: 2px; height: 28px; }
  .closing-installments__total { align-items: flex-start; flex-direction: column; }
  .closing-installments__total > strong { margin-left: 0; text-align: left; }
  .closing-exposure__credit { grid-template-columns: 1fr; }
  .closing-exposure__stages > article { grid-template-columns: 21px 1fr 66px; }
  .closing-payment__banner { grid-template-columns: 38px 1fr; }
  .closing-payment__banner .closing-status { grid-column: 2; }
  .closing-activation { min-height: 430px; }
  .closing-activation__dialog { top: 18px; }
  .closing-activation__dialog > header { grid-template-columns: 32px 1fr; }
  .closing-activation__dialog > header .closing-status { grid-column: 2; }
  .closing-activation__facts { grid-template-columns: 1fr; }
}

.mock-toolbar--analytics { border-top-color: #1595a6; }
.mock-toolbar--analytics nav span.is-active { color: #137f91; }
.mock-toolbar--analytics nav span.is-active::after { background: #1595a6; }
.mock-analytics-brand { display: flex; min-width: 123px; align-items: center; gap: 6px; }
.mock-analytics-brand .product-logo { --logo-height: 24px; }
.mock-analytics-brand small { color: #71828d; font-size: .2rem; white-space: nowrap; }
.mock-analytics-status { display: flex; margin-left: auto; align-items: center; gap: 5px; color: #197f8d; }
.mock-analytics-status > i { width: 7px; height: 7px; background: #1595a6; border-radius: 50%; box-shadow: 0 0 0 3px #e2f4f6; }
.mock-analytics-status small { font-size: .2rem; font-weight: 950; letter-spacing: .05em; white-space: nowrap; }
.mock-analytics-status.is-future { color: #87631a; }
.mock-analytics-status.is-future > i { background: #d5a32b; box-shadow: 0 0 0 3px #fff2cf; }

.mock-content--analytics-insight {
  min-height: 373px;
  padding: 22px 28px 43px;
  background:
    radial-gradient(circle at 83% 12%, rgba(25, 151, 167, .11), transparent 24%),
    linear-gradient(rgba(17, 136, 151, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 136, 151, .035) 1px, transparent 1px),
    #edf3f5;
  background-size: auto, 22px 22px, 22px 22px, auto;
}
.analytics-insight { width: min(800px, 100%); color: #516d77; }
.analytics-insight *, .analytics-insight *::before, .analytics-insight *::after { box-sizing: border-box; }
.analytics-insight small, .analytics-insight em, .analytics-insight i { font-style: normal; }
.analytics-insight .icon { width: 13px; height: 13px; flex: 0 0 auto; }
.analytics-insight button { display: inline-flex; min-height: 28px; padding: 6px 10px; align-items: center; justify-content: center; gap: 5px; color: #fff; background: #138ca0; border: 0; border-radius: 5px; font-family: inherit; font-size: .23rem; font-weight: 900; letter-spacing: .035em; }
.analytics-card { overflow: hidden; background: #fff; border: 1px solid #d1dfe4; border-radius: 9px; box-shadow: 0 10px 27px rgba(18, 59, 76, .1); }
.analytics-head { display: flex; min-height: 57px; padding: 10px 14px; align-items: center; justify-content: space-between; gap: 12px; background: linear-gradient(90deg, #f9fcfd, #eaf5f7); border-bottom: 1px solid #d5e5e8; }
.analytics-head > div { display: grid; min-width: 0; gap: 3px; }
.analytics-head small { color: #16889a; font-size: .27rem; font-weight: 950; letter-spacing: .095em; }
.analytics-head strong { color: #254f62; font-size: .53rem; line-height: 1.18; }
.analytics-head > span { padding: 5px 8px; color: #16798a; background: #e4f3f5; border: 1px solid #c5e0e4; border-radius: 100px; font-size: .22rem; font-weight: 950; white-space: nowrap; }
.analytics-card > footer { display: flex; min-height: 37px; padding: 7px 13px; align-items: center; gap: 10px; color: #697f88; background: #f7fafb; border-top: 1px solid #dce7e9; font-size: .24rem; }
.analytics-card > footer span { display: flex; align-items: center; gap: 4px; }
.analytics-card > footer strong, .analytics-card > footer button { margin-left: auto; color: #2c5c6b; }
.analytics-card > footer button { color: #fff; }
.analytics-pill { display: inline-flex; width: fit-content; padding: 4px 6px; align-items: center; gap: 4px; color: #197486; background: #e5f2f5; border-radius: 100px; font-size: .19rem; font-weight: 950; white-space: nowrap; }
.analytics-pill > i { width: 6px; height: 6px; background: currentColor; border-radius: 50%; }
.analytics-pill.is-done { color: #26725f; background: #e5f3ed; }
.analytics-pill.is-ready { color: #87631a; background: #fff2d5; }

.analytics-overview__flow { display: grid; padding: 14px; grid-template-columns: 1fr 23px .8fr 23px .85fr; align-items: center; gap: 6px; }
.analytics-overview__flow > section { display: grid; gap: 5px; }
.analytics-overview__flow > section > small { color: #16889a; font-size: .17rem; font-weight: 950; letter-spacing: .07em; }
.analytics-overview__flow > section > article { display: grid; min-height: 37px; padding: 5px 7px; grid-template-columns: 31px 1fr; align-items: center; gap: 6px; background: #f3f7f8; border: 1px solid #dce7e9; border-radius: 5px; }
.analytics-overview__flow > section > article.is-current { border-color: #93cbd2; box-shadow: inset 3px 0 #1595a6; }
.analytics-overview__flow > section > article.is-roadmap { opacity: .72; border-style: dashed; }
.analytics-overview__flow article > span { color: #168295; font-size: .14rem; font-weight: 950; }
.analytics-overview__flow article > div { display: grid; gap: 1px; }
.analytics-overview__flow article strong { color: #315865; font-size: .19rem; }
.analytics-overview__flow article small { color: #788d94; font-size: .14rem; }
.analytics-overview__flow > i { color: #16899b; }
.analytics-overview__flow > div { display: grid; min-height: 154px; padding: 12px 8px; place-items: center; align-content: center; gap: 5px; color: #fff; background: linear-gradient(150deg, #1aa1b0, #157d93 62%, #28556e); border-radius: 8px; text-align: center; }
.analytics-overview__flow > div > span { display: grid; width: 37px; height: 37px; place-items: center; background: rgba(255,255,255,.15); border-radius: 50%; }
.analytics-overview__flow > div small { font-size: .17rem; font-weight: 950; letter-spacing: .08em; }
.analytics-overview__flow > div strong { font-size: .27rem; line-height: 1.2; }
.analytics-overview__flow > div em { color: #ccebf0; font-size: .14rem; line-height: 1.3; }
.analytics-overview__flow > section.is-output article { grid-template-columns: 15px 1fr; color: #277366; background: #eef7f4; }

.analytics-kpis { display: grid; padding: 11px 13px 5px; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.analytics-kpis article { display: grid; padding: 7px 8px; gap: 2px; background: #f4f8f9; border-radius: 5px; box-shadow: inset 0 3px #9bbbc2; }
.analytics-kpis article.is-up { box-shadow: inset 0 3px #269073; }
.analytics-kpis article.is-warn { box-shadow: inset 0 3px #c3912a; }
.analytics-kpis small { color: #778d94; font-size: .14rem; font-weight: 900; }
.analytics-kpis strong { color: #2c5867; font-size: .34rem; }
.analytics-kpis span { color: #65808a; font-size: .14rem; }
.analytics-cockpit__body { display: grid; padding: 6px 13px 12px; grid-template-columns: 1.35fr .65fr; gap: 8px; }
.analytics-cockpit__body > section, .analytics-cockpit__body > aside { display: grid; padding: 8px; gap: 5px; background: #f6f9fa; border: 1px solid #e0e9eb; border-radius: 5px; }
.analytics-cockpit__body > section > small, .analytics-cockpit__body > aside > small { color: #16889a; font-size: .15rem; font-weight: 950; }
.analytics-cockpit__body > aside > span { display: grid; padding: 5px; grid-template-columns: 22px 1fr 13px; align-items: center; gap: 5px; background: #fff; border-radius: 4px; }
.analytics-cockpit__body > aside > span.is-active { background: #e9f5f6; box-shadow: inset 3px 0 #1595a6; }
.analytics-cockpit__body > aside > span > i { display: grid; width: 21px; height: 21px; place-items: center; color: #fff; background: #668996; border-radius: 50%; font-size: .13rem; }
.analytics-cockpit__body aside div { display: grid; gap: 1px; }
.analytics-cockpit__body aside b { color: #355d69; font-size: .16rem; }
.analytics-cockpit__body aside em { color: #829398; font-size: .13rem; }
.analytics-bars { display: flex; min-height: 103px; padding-top: 5px; align-items: flex-end; justify-content: space-around; gap: 5px; }
.analytics-bars > span { display: grid; width: 12%; height: 100px; grid-template-rows: 14px 1fr 14px; align-items: end; justify-items: center; gap: 2px; }
.analytics-bars small, .analytics-bars strong { font-size: .12rem; }
.analytics-bars small { color: #758a92; font-weight: 850; }
.analytics-bars strong { color: #486b77; }
.analytics-bars > span > i { display: flex; width: 64%; height: 66px; align-items: flex-end; overflow: hidden; background: #e3ecee; border-radius: 3px 3px 1px 1px; }
.analytics-bars > span > i > b { display: block; width: 100%; min-height: 1px; background: linear-gradient(#28a6b4, #157f95); border-radius: inherit; }

.analytics-desktop__assist { display: grid; margin: 11px 13px 8px; padding: 8px 10px; grid-template-columns: 30px 1fr auto; align-items: center; gap: 8px; background: linear-gradient(100deg, #ebf8f9, #fff); border: 1px solid #cde7ea; border-left: 4px solid #1595a6; border-radius: 6px; }
.analytics-desktop__assist > span { display: grid; width: 29px; height: 29px; place-items: center; color: #fff; background: #1595a6; border-radius: 50%; }
.analytics-desktop__assist > div { display: grid; gap: 1px; }
.analytics-desktop__assist strong { color: #315965; font-size: .22rem; }
.analytics-desktop__assist small { color: #72878f; font-size: .14rem; }
.analytics-desktop__grid { display: grid; padding: 0 13px 13px; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.analytics-desktop__grid article { position: relative; display: grid; min-height: 117px; padding: 10px 8px; align-content: start; gap: 6px; background: #f8fafb; border: 1px solid #dce7e9; border-radius: 6px; }
.analytics-desktop__grid article.is-active { background: #eef8f9; border-color: #a8d6dc; }
.analytics-desktop__grid article > span { display: grid; width: 31px; height: 31px; place-items: center; color: #16889a; background: #e4f3f5; border-radius: 7px; font-size: .24rem; }
.analytics-desktop__grid article > strong { color: #315966; font-size: .19rem; }
.analytics-desktop__grid article > small { color: #788d94; font-size: .14rem; line-height: 1.3; }
.analytics-desktop__grid article > i { position: absolute; top: 9px; right: 7px; color: #1595a6; }

.analytics-security { display: flex; margin: 10px 13px 0; padding: 6px 8px; align-items: center; gap: 6px; color: #1c7482; background: #e9f5f6; border-radius: 5px; font-size: .16rem; }
.analytics-conversation__body { display: grid; padding: 10px 13px 13px; gap: 7px; }
.analytics-conversation__body > section { display: grid; max-width: 73%; padding: 8px 10px; justify-self: end; gap: 3px; color: #436675; background: #edf2f4; border-radius: 8px 8px 2px 8px; }
.analytics-conversation__body > section.is-assist { justify-self: start; color: #255d68; background: #e5f5f6; border-radius: 8px 8px 8px 2px; }
.analytics-conversation__body section > span { color: #16889a; font-size: .14rem; font-weight: 950; }
.analytics-conversation__body p { margin: 0; font-size: .21rem; line-height: 1.42; }
.analytics-conversation__body section > div { display: flex; margin-top: 4px; align-items: center; gap: 8px; }
.analytics-conversation__body section > div small { color: #758b91; font-size: .13rem; }

.analytics-interpretation__grid { display: grid; padding: 12px 13px 8px; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.analytics-interpretation__grid article { display: grid; min-height: 72px; padding: 8px; gap: 3px; background: #f5f9fa; border: 1px solid #dce8ea; border-radius: 5px; }
.analytics-interpretation__grid small, .analytics-contract small { color: #16889a; font-size: .14rem; font-weight: 950; }
.analytics-interpretation__grid strong { color: #315a68; font-size: .19rem; }
.analytics-interpretation__grid em { color: #7b8f95; font-size: .13rem; }
.analytics-contract { display: grid; margin: 0 13px 8px; padding: 8px 10px; grid-template-columns: 31px 1fr auto; align-items: center; gap: 8px; color: #267363; background: #e9f5f1; border: 1px solid #c6e2d8; border-radius: 6px; }
.analytics-contract > span { display: grid; width: 30px; height: 30px; place-items: center; background: #d5ede5; border-radius: 50%; }
.analytics-contract > div { display: grid; gap: 1px; }
.analytics-contract strong { color: #2c625f; font-size: .21rem; }
.analytics-contract em { color: #718b89; font-size: .13rem; }
.analytics-interpretation__checks { display: grid; padding: 0 13px 11px; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.analytics-interpretation__checks span { display: flex; padding: 5px; align-items: center; gap: 4px; color: #287267; background: #edf7f4; border-radius: 4px; font-size: .14rem; }

.analytics-preview__body { display: grid; padding: 12px 13px; grid-template-columns: 1.4fr .6fr; gap: 9px; }
.analytics-preview__body > section, .analytics-preview__body > aside { padding: 8px; background: #f6f9fa; border: 1px solid #e0e9eb; border-radius: 6px; }
.analytics-preview__body .analytics-bars { min-height: 163px; }
.analytics-preview__body .analytics-bars > span { height: 158px; }
.analytics-preview__body .analytics-bars > span > i { height: 117px; }
.analytics-preview__body > aside { display: grid; align-content: start; gap: 7px; }
.analytics-preview__body aside > small { color: #16889a; font-size: .14rem; font-weight: 950; }
.analytics-preview__body aside > strong { color: #2f5967; font-size: .22rem; line-height: 1.25; }
.analytics-preview__body aside > p { margin: 0; color: #71858d; font-size: .15rem; line-height: 1.35; }
.analytics-preview__body aside > span { display: flex; padding: 4px 5px; align-items: center; gap: 4px; color: #287464; background: #eaf5f1; border-radius: 3px; font-size: .14rem; }

.analytics-draft__body { display: grid; padding: 12px 13px; grid-template-columns: .8fr 1.2fr; gap: 9px; }
.analytics-draft__body > section, .analytics-draft__body > aside { display: grid; padding: 9px; align-content: start; gap: 6px; background: #f5f9fa; border-radius: 6px; }
.analytics-draft__body > section > div { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.analytics-draft__body label { display: grid; padding: 6px 7px; gap: 2px; background: #fff; border: 1px solid #dce7e9; border-radius: 4px; }
.analytics-draft__body label small, .analytics-draft__body > aside > small { color: #16889a; font-size: .13rem; font-weight: 950; }
.analytics-draft__body label strong { color: #345c68; font-size: .16rem; }
.analytics-draft__body .analytics-bars { min-height: 135px; }
.analytics-draft__body .analytics-bars > span { height: 130px; }
.analytics-draft__body .analytics-bars > span > i { height: 91px; }

.analytics-dashboard__grid { display: grid; padding: 11px 13px; grid-template-columns: 1.4fr .6fr .75fr; gap: 7px; }
.analytics-dashboard__grid > article { display: grid; min-height: 201px; padding: 8px; align-content: start; gap: 5px; background: #f7fafb; border: 1px solid #dfe9eb; border-radius: 6px; }
.analytics-dashboard__grid article > header { display: flex; min-height: 26px; align-items: center; justify-content: space-between; gap: 5px; border-bottom: 1px solid #e3ebed; }
.analytics-dashboard__grid header strong { color: #315a67; font-size: .17rem; }
.analytics-dashboard__grid header span { color: #16889a; font-size: .11rem; font-weight: 900; }
.analytics-dashboard__grid .analytics-bars { min-height: 147px; }
.analytics-dashboard__grid .analytics-bars > span { height: 140px; }
.analytics-dashboard__grid .analytics-bars > span > i { height: 101px; }
.analytics-donut { position: relative; display: grid; min-height: 151px; place-items: center; }
.analytics-donut > i { position: absolute; width: 105px; height: 105px; background: conic-gradient(#1595a6 0 61%, #89c7ce 61% 79%, #d8e8ea 79%); border-radius: 50%; }
.analytics-donut > i::after { position: absolute; inset: 25px; content: ''; background: #f7fafb; border-radius: 50%; }
.analytics-donut > span { z-index: 1; display: grid; text-align: center; }
.analytics-donut b { color: #2b5a67; font-size: .3rem; }
.analytics-donut small { color: #718890; font-size: .13rem; }
.analytics-dashboard__grid > article > p { display: grid; margin: 4px 0 0; grid-template-columns: 40px 1fr 15px; align-items: center; gap: 4px; }
.analytics-dashboard__grid > article > p small, .analytics-dashboard__grid > article > p strong { font-size: .12rem; }
.analytics-dashboard__grid > article > p i { height: 5px; overflow: hidden; background: #dde9eb; border-radius: 6px; }
.analytics-dashboard__grid > article > p i b { display: block; height: 100%; background: #1595a6; }

.analytics-report__toolbar { display: flex; padding: 9px 13px 6px; gap: 4px; }
.analytics-report__toolbar span, .analytics-report__toolbar button { min-height: 24px; padding: 5px 7px; color: #667f89; background: #fff; border: 1px solid #d4e2e5; border-radius: 4px; font-size: .13rem; }
.analytics-report__toolbar button { color: #16798b; background: #edf7f8; }
.analytics-table { overflow: hidden; margin: 0 13px 7px; border: 1px solid #d8e4e7; border-radius: 5px; }
.analytics-table > header, .analytics-table > article { display: grid; grid-template-columns: .7fr .85fr 1.3fr .45fr .7fr .7fr; align-items: center; gap: 5px; }
.analytics-table > header { min-height: 25px; padding: 4px 7px; color: #687f88; background: #eaf2f4; font-size: .12rem; font-weight: 950; }
.analytics-table > article { min-height: 31px; padding: 4px 7px; border-top: 1px solid #e2eaec; font-size: .14rem; }
.analytics-table > article:nth-child(3) { background: #f0f8f9; }
.analytics-table article span:nth-last-child(-n+2) { color: #2f5d68; font-weight: 850; text-align: right; }
.analytics-report__summary { display: grid; padding: 0 13px 9px; grid-template-columns: .8fr 1fr 1fr auto; gap: 5px; }
.analytics-report__summary > span { display: grid; padding: 5px 7px; gap: 1px; background: #f4f8f9; border-radius: 4px; }
.analytics-report__summary small { color: #758a92; font-size: .12rem; }
.analytics-report__summary b { color: #315c68; font-size: .17rem; }

.analytics-export__flow { display: grid; padding: 12px 13px 8px; grid-template-columns: .9fr 25px 1.1fr; align-items: center; gap: 7px; }
.analytics-export__flow > section { display: grid; min-height: 126px; padding: 12px; align-content: center; gap: 5px; color: #fff; background: linear-gradient(145deg, #1595a6, #28576e); border-radius: 7px; }
.analytics-export__flow section small { color: #cef0f3; font-size: .14rem; font-weight: 950; }
.analytics-export__flow section strong { font-size: .27rem; }
.analytics-export__flow section span, .analytics-export__flow section em { font-size: .15rem; }
.analytics-export__flow > i { color: #16899b; }
.analytics-export__flow > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.analytics-export__flow article { display: grid; min-height: 90px; padding: 8px; align-content: center; justify-items: center; gap: 4px; background: #f2f8f9; border: 1px solid #d8e7e9; border-radius: 5px; text-align: center; }
.analytics-export__flow article b { color: #167d90; font-size: .22rem; }
.analytics-export__flow article span { color: #738890; font-size: .13rem; }
.analytics-export__flow article .icon { color: #2a7c68; }
.analytics-export__scope { display: grid; padding: 0 13px 11px; grid-template-columns: 1fr 1fr; gap: 6px; }
.analytics-export__scope > small { grid-column: 1 / -1; color: #16889a; font-size: .14rem; font-weight: 950; }
.analytics-export__scope article { display: grid; padding: 7px; grid-template-columns: 20px 1fr; align-items: center; gap: 5px; background: #f5f9fa; border: 1px solid #dce7e9; border-radius: 5px; }
.analytics-export__scope article.is-selected { background: #ebf7f8; border-color: #a5d4da; }
.analytics-export__scope article > span { color: #16899b; }
.analytics-export__scope article > div { display: grid; gap: 1px; }
.analytics-export__scope strong { color: #315a66; font-size: .16rem; }
.analytics-export__scope article small { color: #788b92; font-size: .12rem; }

.analytics-recipients__body { display: grid; padding: 12px 13px; grid-template-columns: 1fr 1fr; gap: 9px; }
.analytics-recipients__body > section, .analytics-recipients__body > aside { display: grid; align-content: start; gap: 5px; }
.analytics-recipients__body > section > small, .analytics-recipients__body > aside > small { color: #16889a; font-size: .14rem; font-weight: 950; }
.analytics-recipients__body article { display: grid; min-height: 41px; padding: 5px 7px; grid-template-columns: 27px 1fr auto; align-items: center; gap: 6px; background: #f5f9fa; border: 1px solid #e0e9eb; border-radius: 5px; }
.analytics-recipients__body article.is-active { background: #edf7f5; border-color: #afd9ce; }
.analytics-recipients__body article > span:first-child { display: grid; width: 26px; height: 26px; place-items: center; color: #fff; background: #5c8491; border-radius: 50%; font-size: .15rem; font-weight: 950; }
.analytics-recipients__body article > div { display: grid; gap: 1px; }
.analytics-recipients__body article strong { color: #335c68; font-size: .16rem; }
.analytics-recipients__body article small { color: #788d94; font-size: .12rem; }
.analytics-recipients__body aside > button { width: fit-content; margin-top: 2px; }

.analytics-schedules__summary, .analytics-history__summary { display: grid; padding: 9px 13px 7px; grid-template-columns: repeat(3, 1fr) auto; gap: 6px; }
.analytics-schedules__summary > span, .analytics-history__summary > span { display: flex; min-height: 42px; padding: 6px 8px; align-items: center; justify-content: space-between; gap: 5px; background: #f3f8f9; border-radius: 5px; }
.analytics-schedules__summary small, .analytics-history__summary small { color: #758a92; font-size: .13rem; font-weight: 900; }
.analytics-schedules__summary strong, .analytics-history__summary strong { color: #2c5a67; font-size: .25rem; }
.analytics-schedules__body { display: grid; padding: 0 13px 11px; grid-template-columns: 1.35fr .65fr; gap: 8px; }
.analytics-schedules__body > section { overflow: hidden; border: 1px solid #dbe7e9; border-radius: 5px; }
.analytics-schedules__body > section > header, .analytics-schedules__body > section > div { display: grid; grid-template-columns: repeat(7, 1fr); }
.analytics-schedules__body > section > header span { padding: 4px; color: #6c838c; background: #e9f1f3; font-size: .11rem; font-weight: 950; text-align: center; }
.analytics-schedules__body > section > div > span { position: relative; display: grid; min-height: 33px; padding: 3px; align-content: start; border-top: 1px solid #e4ecee; border-right: 1px solid #e4ecee; }
.analytics-schedules__body > section > div > span.has-event { background: #eff8f9; }
.analytics-schedules__body > section b { color: #607b84; font-size: .12rem; }
.analytics-schedules__body > section em { padding: 2px; color: #fff; background: #168da0; border-radius: 2px; font-size: .1rem; text-align: center; }
.analytics-schedules__body > aside { display: grid; padding: 8px; align-content: start; gap: 5px; background: #f5f9fa; border-radius: 5px; }
.analytics-schedules__body > aside > small { color: #16889a; font-size: .14rem; font-weight: 950; }
.analytics-schedules__body > aside > article { display: grid; padding: 6px; grid-template-columns: 31px 1fr; gap: 6px; background: #fff; border-radius: 4px; }
.analytics-schedules__body time { color: #16889a; font-size: .13rem; font-weight: 950; }
.analytics-schedules__body article > div { display: grid; gap: 1px; }
.analytics-schedules__body article strong { color: #315b67; font-size: .14rem; }
.analytics-schedules__body article span, .analytics-schedules__body aside > em { color: #7b8e94; font-size: .11rem; }

.analytics-history__summary > span.is-done { box-shadow: inset 0 3px #2a866d; }
.analytics-history__summary > span.is-warn { box-shadow: inset 0 3px #bc584b; }
.analytics-history__summary > span.is-ready { box-shadow: inset 0 3px #c4952d; }
.analytics-history__list { display: grid; padding: 0 13px 11px; gap: 4px; }
.analytics-history__list article { display: grid; min-height: 39px; padding: 5px 7px; grid-template-columns: 25px 1fr auto; align-items: center; gap: 7px; background: #f6f9fa; border-left: 3px solid #2a866d; border-radius: 4px; }
.analytics-history__list article.is-warn { background: #fff5f3; border-left-color: #bd554a; }
.analytics-history__list article > span { display: grid; width: 24px; height: 24px; place-items: center; color: #fff; background: #2a866d; border-radius: 50%; font-weight: 950; }
.analytics-history__list article.is-warn > span { background: #bd554a; }
.analytics-history__list article > div { display: grid; grid-template-columns: .8fr 1.2fr 1.2fr; align-items: center; gap: 6px; }
.analytics-history__list strong { color: #315a67; font-size: .15rem; }
.analytics-history__list small, .analytics-history__list em { color: #758a92; font-size: .12rem; }
.analytics-history__list article > b { color: #7a8d93; font-size: .12rem; }

.analytics-alert-builder__body { display: grid; padding: 12px 13px; grid-template-columns: 1fr 1fr; gap: 9px; }
.analytics-alert-builder__body > section, .analytics-alert-builder__body > aside { display: grid; padding: 9px; align-content: start; gap: 5px; background: #f6f9fa; border-radius: 6px; }
.analytics-alert-builder__body section > span { width: fit-content; color: #607983; font-size: .13rem; font-weight: 950; }
.analytics-alert-builder__body section > span.is-assist { color: #16889a; }
.analytics-alert-builder__body section > p { margin: 0 0 4px; padding: 6px 7px; color: #456774; background: #fff; border-radius: 5px; font-size: .16rem; line-height: 1.38; }
.analytics-alert-builder__body section > p.is-assist { color: #275f6a; background: #e8f6f7; }
.analytics-alert-builder__body aside > small { color: #16889a; font-size: .14rem; font-weight: 950; }
.analytics-alert-builder__body label { display: grid; padding: 5px 6px; gap: 2px; background: #fff; border: 1px solid #e0e9eb; border-radius: 4px; }
.analytics-alert-builder__body label { color: #788c93; font-size: .12rem; font-weight: 900; }
.analytics-alert-builder__body label strong { color: #315b68; font-size: .15rem; }
.analytics-alert-builder__body label em { padding: 1px 3px; color: #fff; background: #168b9d; border-radius: 3px; font-size: .11rem; }

.analytics-alert-lifecycle__rail { display: grid; padding: 22px 13px 12px; grid-template-columns: repeat(5, 1fr); gap: 9px; }
.analytics-alert-lifecycle__rail article { position: relative; display: grid; min-height: 112px; padding: 9px 7px; align-content: start; justify-items: center; gap: 5px; background: #f5f9fa; border: 1px solid #dce7e9; border-radius: 6px; text-align: center; }
.analytics-alert-lifecycle__rail article.is-warn { background: #fff4f2; border-color: #e3b9b2; }
.analytics-alert-lifecycle__rail article > time { color: #70878f; font-size: .13rem; font-weight: 900; }
.analytics-alert-lifecycle__rail article > span { z-index: 1; display: grid; width: 27px; height: 27px; place-items: center; color: #fff; background: #2c866f; border-radius: 50%; font-size: .13rem; font-weight: 950; }
.analytics-alert-lifecycle__rail article.is-warn > span { background: #bd584b; }
.analytics-alert-lifecycle__rail article.is-ready > span { background: #c39730; }
.analytics-alert-lifecycle__rail article > div { display: grid; gap: 2px; }
.analytics-alert-lifecycle__rail strong { color: #315b67; font-size: .15rem; }
.analytics-alert-lifecycle__rail small { color: #748990; font-size: .12rem; line-height: 1.3; }
.analytics-alert-lifecycle__rail article > i { position: absolute; top: 48px; right: -12px; width: 15px; height: 2px; background: #b5d0d5; }
.analytics-alert-lifecycle__facts { display: grid; padding: 0 13px 13px; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.analytics-alert-lifecycle__facts > span { display: flex; padding: 6px; align-items: center; gap: 4px; color: #5e7780; background: #f1f6f7; border-radius: 4px; font-size: .13rem; }
.analytics-alert-lifecycle__facts b { color: #315b68; }

.analytics-future .analytics-head { background: linear-gradient(90deg, #fffdf8, #fff4d9); }
.analytics-future .analytics-head small { color: #916b1c; }
.analytics-future .analytics-head > span { color: #856219; background: #fff0c9; border-color: #ead298; }
.analytics-future__lanes { display: grid; padding: 14px 13px 10px; grid-template-columns: 1fr 29px 1fr; align-items: center; gap: 7px; }
.analytics-future__lanes > section { display: grid; padding: 9px; gap: 5px; background: #f3f8f9; border-radius: 6px; }
.analytics-future__lanes > section.is-future { background: #fff8e7; border: 1px dashed #dfc27e; }
.analytics-future__lanes section > small { color: #16889a; font-size: .14rem; font-weight: 950; }
.analytics-future__lanes section.is-future > small { color: #916a1c; }
.analytics-future__lanes article { display: grid; min-height: 43px; padding: 5px 7px; grid-template-columns: 18px 1fr; align-items: center; gap: 6px; background: #fff; border-radius: 4px; }
.analytics-future__lanes article > span, .analytics-future__lanes article > .icon { color: #23846e; }
.analytics-future__lanes .is-future article > span { color: #a17a24; font-size: .21rem; }
.analytics-future__lanes article > div { display: grid; gap: 1px; }
.analytics-future__lanes strong { color: #315b68; font-size: .15rem; }
.analytics-future__lanes article span, .analytics-future__lanes article small { color: #788c93; font-size: .12rem; }
.analytics-future__lanes > i { color: #a47b24; }
.analytics-future__close { display: grid; margin: 0 13px 12px; padding: 8px 10px; grid-template-columns: 30px 1fr auto; align-items: center; gap: 8px; color: #fff; background: linear-gradient(100deg, #177f94, #27566d); border-radius: 6px; }
.analytics-future__close > span { display: grid; width: 29px; height: 29px; place-items: center; background: rgba(255,255,255,.14); border-radius: 50%; }
.analytics-future__close > div { display: grid; gap: 1px; }
.analytics-future__close small { color: #c7e9ed; font-size: .12rem; font-weight: 950; }
.analytics-future__close strong { font-size: .16rem; }
.analytics-future__close button { background: #fff; color: #176f80; }

@media (max-width: 760px) {
  .mock-content--analytics-insight,
  .mascot-side-left .mock-content--analytics-insight,
  .mascot-side-right .mock-content--analytics-insight { min-height: 390px; padding: 18px 12px 125px; }
  .mock-toolbar--analytics .mock-analytics-brand small,
  .mock-analytics-status small { display: none; }
  .analytics-insight { width: 100%; }
  .analytics-head { align-items: flex-start; flex-direction: column; }
  .analytics-head > span { white-space: normal; }
  .analytics-card > footer { align-items: flex-start; flex-wrap: wrap; }
  .analytics-card > footer strong,
  .analytics-card > footer button { width: 100%; margin-left: 0; }
  .analytics-overview__flow,
  .analytics-cockpit__body,
  .analytics-preview__body,
  .analytics-draft__body,
  .analytics-export__flow,
  .analytics-recipients__body,
  .analytics-schedules__body,
  .analytics-alert-builder__body,
  .analytics-future__lanes { grid-template-columns: 1fr; }
  .analytics-overview__flow > i,
  .analytics-export__flow > i,
  .analytics-future__lanes > i { transform: rotate(90deg); }
  .analytics-kpis,
  .analytics-interpretation__grid { grid-template-columns: repeat(2, 1fr); }
  .analytics-desktop__assist { grid-template-columns: 30px 1fr; }
  .analytics-desktop__assist .analytics-pill { grid-column: 2; }
  .analytics-desktop__grid { grid-template-columns: repeat(2, 1fr); }
  .analytics-desktop__grid article:last-child { grid-column: 1 / -1; }
  .analytics-interpretation__checks,
  .analytics-alert-lifecycle__facts { grid-template-columns: repeat(2, 1fr); }
  .analytics-contract { grid-template-columns: 31px 1fr; }
  .analytics-contract .analytics-pill { grid-column: 2; }
  .analytics-dashboard__grid { grid-template-columns: 1fr; }
  .analytics-dashboard__grid > article { min-height: 170px; }
  .analytics-report__toolbar { overflow-x: auto; }
  .analytics-report__toolbar > * { flex: 0 0 auto; }
  .analytics-table { overflow-x: auto; }
  .analytics-table > header, .analytics-table > article { min-width: 590px; }
  .analytics-report__summary { grid-template-columns: 1fr 1fr; }
  .analytics-report__summary button { grid-column: 1 / -1; }
  .analytics-export__scope { grid-template-columns: 1fr; }
  .analytics-schedules__summary, .analytics-history__summary { grid-template-columns: repeat(3, 1fr); }
  .analytics-schedules__summary button, .analytics-history__summary button { grid-column: 1 / -1; }
  .analytics-history__list article > div { grid-template-columns: 1fr; }
  .analytics-alert-lifecycle__rail { grid-template-columns: 1fr; }
  .analytics-alert-lifecycle__rail article { min-height: 75px; grid-template-columns: 45px 28px 1fr; align-items: center; justify-items: start; text-align: left; }
  .analytics-alert-lifecycle__rail article > i { top: auto; right: auto; bottom: -11px; left: 66px; width: 2px; height: 13px; }
  .analytics-future__close { grid-template-columns: 30px 1fr; }
  .analytics-future__close button { grid-column: 1 / -1; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .teacher-mascot__rope,
  .teacher-mascot-ladder {
    display: none;
  }

  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}