/* FF-LOCK EDDM_INDICIA_PLACE_20261011. Teaching images keep their own height. */
.eip-shell { color: #17314e; max-width: 980px; margin: 0 auto 28px; }
.eip-kicker { margin: 0 0 6px; color: #24598f; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.eip-hero-figure { margin: 0 0 16px; }
.eip-banner { border-radius: 16px; overflow: hidden; background: #edf5ff; }
.eip-banner .banner-image { display: block; width: 100%; height: auto; }
.eip-hero-figure figcaption { margin-top: 8px; font-size: .88rem; color: #536b80; }
.eip-table-wrap { overflow-x: auto; margin: 8px 0 16px; }
.eip-guide table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.eip-guide caption { caption-side: top; text-align: left; font-weight: 700; margin-bottom: 8px; color: #17314e; }
.eip-guide th, .eip-guide td { border-bottom: 1px solid #d7e3f0; padding: 8px 10px; text-align: left; vertical-align: top; }
.eip-guide th { color: #17314e; }
.eip-steps { margin: 0 0 8px; padding-left: 1.2rem; line-height: 1.55; color: #334155; }
.eip-guide { background: #fff; border: 1px solid #d7e3f0; border-radius: 16px; padding: 14px 16px 8px; margin: 0 0 16px; }
.eip-guide h2 { margin: 8px 0 10px; font-size: 1.15rem; color: #17314e; }
.eip-lead, .eip-help, .eip-faq p { line-height: 1.6; color: #334155; }
.eip-updated { color: #64748b; font-size: .9rem; }
.eip-teach { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 18px 0 22px; }
.eip-teach figure { margin: 0; background: #fff; border: 1px solid #d7e3f0; border-radius: 16px; padding: 12px; }
.eip-teach img { display: block; width: auto; max-width: 100%; height: auto; margin: 0 auto; background:
  linear-gradient(45deg, #f8fafc 25%, transparent 25%),
  linear-gradient(-45deg, #f8fafc 25%, transparent 25%),
  linear-gradient(45deg, transparent 75%, #f8fafc 75%),
  linear-gradient(-45deg, transparent 75%, #f8fafc 75%);
  background-size: 16px 16px; background-color: #fff; }
.eip-teach figcaption { margin-top: 8px; font-size: .88rem; color: #536b80; }
.eip-layout { display: grid; gap: 14px; margin-top: 16px; }
@media (min-width: 860px) { .eip-layout { grid-template-columns: 1fr 1fr; } }
.eip-card, .eip-stage-wrap { background: #fff; border: 1px solid #d7e3f0; border-radius: 16px; padding: 14px 16px 16px; }
.eip-card h2, .eip-stage-wrap h2, .eip-faq h2 { margin: 0 0 10px; font-size: 1.15rem; color: #17314e; }
.eip-stage-wrap { margin-top: 14px; }
.eip-drop { display: grid; gap: 4px; border: 1.5px dashed #24598f; border-radius: 14px; padding: 16px; text-align: center; background: #f4f8fd; cursor: pointer; }
.eip-drop input, .eip-own input { display: block; margin: 8px auto 0; }
.eip-drop small, .eip-note, .eip-status, .eip-file { color: #536b80; font-size: .88rem; }
.eip-field { display: grid; gap: 4px; margin-top: 10px; font-weight: 700; font-size: .92rem; }
.eip-field input, .eip-field select { font: inherit; font-weight: 500; padding: 6px 8px; border: 1px solid #c8d8e8; border-radius: 8px; }
.eip-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 8px; }
.eip-preset { border: 1px solid #d7e3f0; border-radius: 12px; background: #fff; padding: 6px; cursor: pointer; text-align: left; }
.eip-preset.is-on { border-color: #24598f; box-shadow: 0 0 0 2px #d6e6f8; }
.eip-preset img { display: block; width: 100%; height: 72px; object-fit: contain; background: #f8fafc; }
.eip-preset span { display: block; margin-top: 4px; font-size: .75rem; line-height: 1.25; color: #17314e; }
.eip-own { display: block; margin-top: 10px; font-weight: 700; font-size: .92rem; }
.eip-count { margin: 10px 0 0; font-weight: 800; color: #17314e; }
.eip-marks { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.eip-marks li { display: flex; gap: 6px; align-items: center; }
.eip-marks button { border-radius: 10px; border: 1px solid #d7e3f0; background: #fff; color: #17314e; font-weight: 700; padding: 6px 10px; cursor: pointer; }
.eip-marks li.is-on button:first-child { border-color: #24598f; box-shadow: 0 0 0 2px #d6e6f8; }
.eip-marks .eip-remove { margin-left: auto; color: #9a3412; }
.eip-nudge { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.eip-nudge button, .eip-alt, .eip-go { border-radius: 10px; border: 1px solid #24598f; background: #fff; color: #17314e; font-weight: 700; padding: 8px 12px; cursor: pointer; }
.eip-go { background: #24598f; color: #fff; }
.eip-go:disabled, .eip-alt:disabled { opacity: .45; cursor: not-allowed; }
.eip-stage { position: relative; margin-top: 8px; background: #eef4fb; border-radius: 14px; min-height: 180px; overflow: auto; }
.eip-stage canvas { display: none; width: auto; max-width: 100%; max-height: 560px; height: auto; cursor: grab; }
.eip-stage.is-live canvas { display: block; margin: 0 auto; }
@keyframes eip-arrive {
  0% { opacity: 0; transform: translateY(32px) scale(0.94); }
  100% { opacity: 1; transform: none; }
}
.eip-stage.eip-arrive { box-shadow: 0 0 0 3px #24598f; }
.eip-stage.eip-arrive canvas { animation: eip-arrive 0.62s cubic-bezier(.16, 1, .3, 1); }
@media (prefers-reduced-motion: reduce) {
  .eip-stage.eip-arrive canvas { animation: none; }
}
.eip-empty { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 16px; text-align: center; color: #536b80; }
.eip-stage.is-live .eip-empty { display: none; }
.eip-export { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.eip-faq { margin-top: 22px; }
.eip-faq details { border-top: 1px solid #d7e3f0; padding: 12px 0; }
.eip-faq summary { cursor: pointer; font-weight: 800; }
.eip-faq summary:focus { outline: 3px solid #b24b00; outline-offset: 3px; }