:root {
  --accent: #16856b;
  --accent-dark: #116b56;
  --text: #edf3f0;
  --muted: #9aa9a2;
  --border: #34383d;
  --soft: #25292e;
  --white: #1b1e23;
  --success: #16856b;
  --danger: #b42318;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--text); background: #111317; font-size: 14px; line-height: 1.45; }
button, input, select, textarea { font: inherit; }
.app-shell { width: 100%; max-width: 720px; padding: 20px 14px 36px; margin: 0 auto; }
.demo-card { background: var(--white); border: 1px solid var(--border); border-radius: 18px; padding: 22px; box-shadow: 0 12px 36px rgba(0,0,0,.22); }
.card-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom: 22px; }
.eyebrow { color: var(--accent); letter-spacing: .12em; font-size: 10px; font-weight: 750; margin: 0 0 5px; }
h1 { font-size: 21px; line-height: 1.25; letter-spacing: -.025em; margin: 0; font-weight: 700; }
.subtitle { margin: 7px 0 0; color: var(--muted); font-size: 13px; }
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap: 8px; margin-bottom: 25px; }
.step-indicator { min-width:0; color:var(--muted); font-size:11px; }
.step-indicator span { display:block; height:4px; border-radius:99px; background:#34383d; margin-bottom:7px; }
.step-indicator.active span, .step-indicator.done span { background:var(--accent); }
.step-indicator.active { color:var(--text); font-weight:650; }
.step-indicator small { font-size:11px; }
h2 { margin: 0 0 6px; font-size: 17px; letter-spacing: -.015em; }
.muted { color:var(--muted); margin:0 0 18px; font-size:13px; }
label { display:block; font-size:12px; font-weight:650; margin: 14px 0 6px; }
select, textarea { width:100%; border:1px solid #3a3f46; border-radius:9px; padding:11px 12px; color:var(--text); background:#202329; outline:none; }
select:focus, textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(22,133,107,.1); }
textarea { resize:vertical; min-height:65px; }
button { border:0; border-radius:9px; min-height:42px; padding:11px 15px; cursor:pointer; font-weight:650; transition:background .15s ease, opacity .15s ease; }
button:disabled { cursor:not-allowed; opacity:.45; }
.primary { background:var(--accent); color:#f5faf7; }
.primary:hover:not(:disabled) { background:var(--accent-dark); }
.secondary { background:#202329; color:var(--text); border:1px solid var(--border); }
.full-width { width:100%; margin-top:10px; }
#lead-form .primary { width:100%; margin-top:20px; display:flex; align-items:center; justify-content:center; gap:8px; }
.fine-print { color:#9ba1a9; font-size:11px; margin:12px 0 0; }
.hidden { display:none !important; }
.button-row { display:flex; gap:9px; margin-top:20px; }
.button-row > button { flex:1; }
.status-list { display:grid; gap:9px; margin-top:18px; }
.status-row { display:grid; grid-template-columns:30px minmax(0,1fr) auto; gap:10px; align-items:center; border:1px solid var(--border); border-radius:11px; padding:12px; }
.status-icon { width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:var(--soft); color:var(--muted); font-size:12px; font-weight:700; }
.status-row strong { display:block; font-size:12px; }
.status-row p { color:var(--muted); font-size:11px; margin:3px 0 0; }
.status-state { font-size:10px; color:var(--muted); white-space:nowrap; }
.status-row.success { border-color:#3b6658; background:#202b29; }
.status-row.success .status-icon { color:#f5faf7; background:var(--accent); }
.status-row.success .status-state { color:var(--accent); font-weight:700; }
.status-row.error { border-color:#f2c7c4; background:#fffafa; }
.status-row.error .status-state { color:var(--danger); }
.preview-panel { border:1px solid var(--border); border-radius:12px; overflow:hidden; margin:14px 0; }
.preview-title { display:flex; align-items:center; gap:10px; padding:12px; border-bottom:1px solid var(--border); }
.service-icon { width:30px; height:30px; display:grid; place-items:center; background:var(--soft); color:var(--accent); border-radius:8px; font-size:17px; }
.preview-title strong, .preview-title small { display:block; }
.preview-title strong { font-size:12px; }
.preview-title small { font-size:11px; color:var(--muted); margin-top:2px; }
.success-pill { margin-left:auto; color:var(--accent); background:#202b29; padding:4px 7px; border-radius:99px; font-size:10px; white-space:nowrap; }
.table-scroll { overflow-x:auto; }
table { width:100%; border-collapse:collapse; min-width:480px; font-size:11px; }
th, td { text-align:left; padding:9px 10px; border-bottom:1px solid #34383d; white-space:nowrap; max-width:180px; overflow:hidden; text-overflow:ellipsis; }
th { background:#24282e; color:var(--muted); font-weight:650; }
tbody tr:last-child td { border-bottom:0; }
.result-mark { width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background:#202b29; color:var(--accent); font-size:22px; font-weight:700; margin-bottom:15px; }
.result-summary { background:var(--soft); border:1px solid var(--border); border-radius:11px; padding:4px 13px; margin:16px 0; }
.result-summary p { display:flex; gap:12px; justify-content:space-between; border-bottom:1px solid #34383d; padding:9px 0; margin:0; font-size:12px; }
.result-summary p:last-child { border-bottom:0; }
.result-summary span { color:var(--muted); }
.result-summary strong { text-align:right; font-weight:650; overflow-wrap:anywhere; }
.small { font-size:11px; margin:8px 0 0; }
.card-footer { border-top:1px solid #34383d; margin-top:23px; padding-top:13px; display:flex; justify-content:space-between; gap:10px; color:#9aa19c; font-size:10px; }
.notice { border-radius:9px; background:#fff7e8; color:#8a5700; padding:10px 12px; font-size:12px; margin:-8px 0 16px; }
.notice.error { background:#fff0ef; color:var(--danger); }
@media (max-width:520px) {
  .app-shell { padding:10px 8px 24px; }
  .demo-card { padding:17px 14px; border-radius:15px; }
  h1 { font-size:19px; }
  .steps { gap:5px; }
  .step-indicator small { font-size:10px; }
  .status-row { grid-template-columns:28px minmax(0,1fr); }
  .status-state { grid-column:2; }
  .card-footer { font-size:9px; }
}

/* Dark case overview screen */
.case-card {
  background: #1b1e23;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 12px 36px rgba(0,0,0,.22);
  margin-bottom: 18px;
}
.case-kicker, .section-index { color: #70c6aa; letter-spacing: .09em; font-size: 10px; line-height: 1.5; font-weight: 750; margin: 0 0 9px; }
.case-card h1 { font-size: clamp(23px, 5vw, 30px); max-width: 600px; }
.case-lead { color: #b9c8c1; font-size: 14px; line-height: 1.65; margin: 13px 0 18px; }
.case-meta { display: flex; gap: 14px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--border); }
.meta-label { color: var(--muted); font-size: 10px; letter-spacing: .08em; min-width: 76px; }
.case-meta strong { font-size: 12px; font-weight: 600; }
.flow-visual { display: flex; align-items: center; justify-content: space-between; gap: 7px; margin: 18px 0 22px; padding: 14px 10px; border: 1px solid #34383d; border-radius: 13px; background: #202329; }
.flow-node { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; min-width: 0; }
.flow-node-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #8ce0c2; background: #252b2b; font-size: 18px; }
.flow-node strong { font-size: 10px; }
.flow-node small { color: var(--muted); font-size: 9px; }
.flow-arrow { color: #70c6aa; font-size: 17px; }
.case-section { border-top: 1px solid var(--border); padding-top: 17px; margin-top: 19px; }
.case-section h2 { margin-bottom: 8px; }
.case-section > p:not(.section-index) { color: #c0ccc6; font-size: 12px; line-height: 1.65; }
.how-row { display: grid; grid-template-columns: 29px 1fr; gap: 10px; padding: 11px 0; border-bottom: 1px solid #34383d; }
.how-row:last-child { border-bottom: 0; }
.how-row > span { color: #70c6aa; font-size: 11px; font-weight: 750; padding-top: 1px; }
.how-row strong { font-size: 12px; }
.how-row p { color: var(--muted); font-size: 11px; line-height: 1.55; margin: 4px 0 0; }
.demo-points p { margin: 9px 0; }
.case-start { width: 100%; margin-top: 20px; min-height: 48px; }
.roadmap-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0; }
.roadmap-tags span { border: 1px solid #3a3f46; background: #25292f; color: #c7cbd1; border-radius: 7px; padding: 6px 8px; font-size: 10px; }
.card-footer { display:flex; justify-content:space-between; gap:10px; color:var(--muted); font-size:10px; margin-top:24px; padding-top:15px; border-top:1px solid var(--border); }
.demo-card .card-footer { margin-top: 25px; }
@media (max-width: 420px) {
  .case-card, .demo-card { padding: 17px; }
  .flow-visual { padding: 12px 6px; gap: 4px; }
  .flow-node strong { font-size: 9px; }
  .flow-node small { font-size: 8px; }
  .meta-label { min-width: 64px; }
}

/* SPEKTER palette refresh — visual-only overrides; structure and functionality unchanged */
:root {
  --accent: #B7A078;
  --accent-dark: #A69B8B;
  --text: #E9E5DE;
  --muted: #B4AEA4;
  --border: #414044;
  --soft: #292A2D;
  --white: #1D1D1F;
  --success: #647D83;
  --danger: #C77D76;
}
body { color: var(--text); background: #171719; }
.demo-card, .case-card { background: #1D1D1F; border-color: #414044; }
.eyebrow, .case-kicker, .section-index { color: #B7A078; }
.case-lead, .case-section > p:not(.section-index) { color: #C9C2B8; }
.case-meta, .case-section, .how-row, .card-footer { border-color: #414044; }
.flow-visual { border-color: #414044; background: #222326; }
.flow-node-icon { color: #B7A078; background: #292A2D; }
.flow-arrow, .how-row > span { color: #B7A078; }
.roadmap-tags span { border-color: #414044; background: #292A2D; color: #E9E5DE; }
.primary { background: #B7A078; color: #171719; }
.primary:hover:not(:disabled) { background: #C4AE8C; }
.secondary { background: #222326; color: #E9E5DE; border-color: #414044; }
.fine-print { color: #A69B8B; }

/* Match the interactive demo palette exactly */
.case-lead,
.case-section > p:not(.section-index),
.how-row p { color: var(--muted); }

/* Keep descriptive copy in case blocks the same size as the intro description */
.case-section > p:not(.section-index),
.how-row p { font-size: 14px; line-height: 1.65; }
.case-kicker, .section-index, .flow-arrow, .how-row > span { color: var(--accent); }
.flow-node-icon { color: var(--accent); background: var(--soft); }
.flow-visual { border-color: var(--border); background: #222326; }
.roadmap-tags span { border-color: var(--border); background: var(--soft); color: var(--text); }
.case-card { background: var(--white); border-color: var(--border); }
.case-meta, .case-section, .how-row, .card-footer { border-color: var(--border); }
.card-footer { color: var(--muted); }

/* Exact interactive-demo theme for case steps 2, 3 and 4 */
:root {
  --accent: #B7A078 !important;
  --accent-dark: #A69B8B !important;
  --text: #E9E5DE !important;
  --muted: #B4AEA4 !important;
  --border: #414044 !important;
  --soft: #292A2D !important;
  --white: #1D1D1F !important;
  --success: #647D83 !important;
  --danger: #C77D76 !important;
}
body { background: #171719 !important; color: #E9E5DE !important; }
.case-card, .demo-card { background: #1D1D1F !important; border-color: #414044 !important; }
.case-kicker, .section-index, .flow-arrow, .how-row > span { color: #B7A078 !important; }
.case-lead, .case-section > p:not(.section-index), .how-row p { color: #B4AEA4 !important; }
.flow-visual { background: #222326 !important; border-color: #414044 !important; }
.flow-node-icon { color: #B7A078 !important; background: #292A2D !important; }
.roadmap-tags span { background: #292A2D !important; border-color: #414044 !important; color: #E9E5DE !important; }
.case-meta, .case-section, .how-row, .card-footer { border-color: #414044 !important; }
.card-footer { color: #B4AEA4 !important; }
.primary { background: #B7A078 !important; color: #171719 !important; }
.primary:hover:not(:disabled) { background: #C4AE8C !important; }
.secondary { background: #222326 !important; color: #E9E5DE !important; border-color: #414044 !important; }
.fine-print { color: #A69B8B !important; }
/* Step 2: processing states */
.status-row { border-color: #414044 !important; background: #1D1D1F !important; color: #E9E5DE !important; }
.status-icon { background: #292A2D !important; color: #B4AEA4 !important; }
.status-row.success { border-color: #52686D !important; background: #22282A !important; }
.status-row.success .status-icon { background: #647D83 !important; color: #F4F0E8 !important; }
.status-row.success .status-state { color: #9BAFB1 !important; }
.status-row.error { border-color: #69403D !important; background: #2A2020 !important; }
.status-row.error .status-state { color: #E2A09A !important; }
/* Step 3: storage previews */
.preview-panel { background: #1D1D1F !important; border-color: #414044 !important; }
.preview-title { border-color: #414044 !important; }
.service-icon { background: #292A2D !important; color: #B7A078 !important; }
.success-pill { color: #B6C5C4 !important; background: #293235 !important; }
th { background: #292A2D !important; color: #B4AEA4 !important; }
th, td { border-bottom-color: #414044 !important; color: #E9E5DE !important; }
/* Step 4: completion summary */
.result-mark { background: #293235 !important; color: #B6C5C4 !important; }
.result-summary { background: #222326 !important; border-color: #414044 !important; }
.result-summary p { border-bottom-color: #414044 !important; }
.result-summary span { color: #B4AEA4 !important; }
.notice { background: #302B23 !important; color: #D9BE91 !important; }
.notice.error { background: #2A2020 !important; color: #E2A09A !important; }
select, textarea, input[type="tel"] { background: #222326 !important; color: #E9E5DE !important; border-color: #414044 !important; }
.messenger-phone-form { margin-top: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 11px; background: #202329; }
.messenger-phone-form label { margin-top: 0; }
.messenger-phone-form input { width: 100%; border: 1px solid #414044; border-radius: 9px; padding: 11px 12px; outline: none; }
.messenger-phone-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(22,133,107,.1); }
.messenger-phone-form .primary { width: 100%; margin-top: 12px; }
.messenger-phone-form .fine-print { line-height: 1.5; }
select option { background: #222326 !important; color: #E9E5DE !important; }

/* Step 4: messenger-style preview popup */
.messenger-demo-note { margin: 9px 0 16px; line-height: 1.5; }
.messenger-preview-popup {
  position: fixed;
  z-index: 1000;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  width: min(370px, calc(100vw - 32px));
  max-height: min(78vh, 620px);
  overflow-y: auto;
  border: 1px solid #414044;
  border-radius: 16px;
  background: #1D1D1F;
  color: #E9E5DE;
  box-shadow: 0 18px 55px rgba(0,0,0,.42);
  animation: messenger-popup-in .18s ease-out;
}
.messenger-popup-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 55px 14px 15px;
  border-bottom: 1px solid #414044;
  background: #222326;
  border-radius: 16px 16px 0 0;
}
.messenger-popup-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
  background: #B7A078;
  color: #171719;
  font-weight: 750;
}
.messenger-popup-heading { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 3px; }
.messenger-popup-heading small { color: #A69B8B; font-size: 12px; }
.messenger-popup-close {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: #414044;
  color: #E9E5DE;
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
}

.messenger-popup-body { padding: 15px; }
.messenger-popup-message {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 13px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.messenger-popup-message p {
  margin: 0;
  white-space: pre-wrap;
}
@keyframes messenger-popup-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .messenger-preview-popup { animation: none; }
}

/* Lead-01 case study evidence sections — aligned with the Ukrainian case */
.workflow-image { display:block; width:100%; height:auto; margin-top:14px; border:1px solid var(--border); border-radius:12px; background:#222326; }
.ux-flow-figure { margin:14px 0 18px; }
.ux-flow-image { display:block; width:100%; height:auto; border:1px solid var(--border); border-radius:12px; background:#222326; }
.ux-flow-figure figcaption { margin-top:7px; color:var(--muted); font-size:11px; line-height:1.5; }
.feature-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:12px; }
.feature-item { min-width:0; padding:13px; border:1px solid var(--border); border-radius:11px; background:var(--soft); }
.feature-item strong { display:block; font-size:12px; line-height:1.45; }
.feature-item p { color:var(--muted); font-size:14px; line-height:1.65; margin:7px 0 0; }
.evidence-carousel { display:grid; grid-auto-columns:minmax(82%,1fr); grid-auto-flow:column; gap:12px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; padding:3px 2px 12px; margin:12px -2px 0; scrollbar-width:thin; scrollbar-color:var(--accent) var(--soft); }
.evidence-slide { min-width:0; margin:0; overflow:hidden; scroll-snap-align:start; border:1px solid var(--border); border-radius:12px; background:var(--soft); }
.evidence-slide img { display:block; width:100%; height:230px; object-fit:contain; background:#171719; }
.evidence-slide figcaption { display:flex; flex-direction:column; gap:3px; padding:11px 12px 13px; }
.evidence-slide figcaption strong { font-size:12px; }
.evidence-slide figcaption span { color:var(--muted); font-size:11px; }
.carousel-hint { color:var(--muted); font-size:11px !important; margin-top:7px; }
.notification-image { display:block; max-width:100%; max-height:520px; object-fit:contain; object-position:left top; margin:12px auto 0 0; border:1px solid var(--border); border-radius:12px; }
.ux-flow-image, .workflow-image, .evidence-slide img, .notification-image { cursor:zoom-in; }
.ux-flow-image:focus-visible, .workflow-image:focus-visible, .evidence-slide img:focus-visible, .notification-image:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.image-lightbox { position:fixed; inset:0; z-index:9999; display:grid; place-items:center; padding:clamp(12px,3vw,36px); background:rgba(8,8,10,.88); backdrop-filter:blur(8px); opacity:0; visibility:hidden; transition:opacity .18s ease, visibility .18s ease; }
.image-lightbox.is-open { opacity:1; visibility:visible; }
.image-lightbox img { display:block; max-width:min(96vw,1600px); max-height:88vh; width:auto; height:auto; object-fit:contain; border:1px solid #414044; border-radius:10px; box-shadow:0 24px 90px rgba(0,0,0,.5); cursor:zoom-out; }
.image-lightbox-close { position:absolute; top:max(12px,env(safe-area-inset-top)); right:max(12px,env(safe-area-inset-right)); display:grid; place-items:center; width:44px; height:44px; padding:0; border-radius:50%; color:#E9E5DE; background:transparent; font-size:25px; line-height:1; cursor:pointer; }
.image-lightbox-caption { position:absolute; bottom:max(12px,env(safe-area-inset-bottom)); left:16px; right:16px; text-align:center; color:#E9E5DE; font-size:12px; pointer-events:none; }
body.lightbox-open { overflow:hidden; }
@media (min-width:620px) { .evidence-carousel { grid-auto-columns:88%; } .evidence-slide img { height:300px; } }
@media (max-width:520px) { .feature-grid { grid-template-columns:1fr; } .evidence-carousel { grid-auto-columns:94%; } .evidence-slide img { height:220px; } }
@media (prefers-reduced-motion:reduce) { .image-lightbox { transition:none; } }

/* Image viewer: viewport-fixed toolbar, independent from image dimensions */
.image-lightbox{position:fixed!important;inset:0!important;display:block!important;padding:0!important;overflow:hidden!important}
.image-lightbox .image-viewer-toolbar{position:fixed!important;top:0!important;left:0!important;right:0!important;width:100%!important;height:76px!important;min-height:76px!important;box-sizing:border-box!important;display:flex!important;align-items:center!important;justify-content:center!important;flex-wrap:nowrap!important;z-index:10002!important;padding:10px 64px!important;background:rgba(29,29,31,.96)!important;border-bottom:1px solid #414044!important}
.image-lightbox .image-viewer-toolbar .image-lightbox-close{position:fixed!important;top:12px!important;right:12px!important}
.image-lightbox .image-viewer-stage{position:absolute!important;top:76px!important;left:0!important;right:0!important;bottom:32px!important;width:100%!important;height:calc(100% - 108px)!important;min-height:0!important;flex:none!important;box-sizing:border-box!important}
.image-lightbox .image-viewer-stage img{max-height:none!important;max-width:none!important}
@media(max-width:520px){.image-lightbox .image-viewer-toolbar{height:68px!important;min-height:68px!important;padding:8px 50px 8px 8px!important}.image-lightbox .image-viewer-toolbar .image-lightbox-close{top:8px!important;right:5px!important}.image-lightbox .image-viewer-stage{top:68px!important;height:calc(100% - 96px)!important;bottom:28px!important}}


/* Synced complete working image viewer from case/web */
/* Full-screen zoomable image viewer */
.image-lightbox{display:flex!important;flex-direction:column;padding:0!important;background:rgba(8,8,10,.97)!important;overflow:hidden}.image-lightbox:not(.is-open){opacity:0;visibility:hidden;pointer-events:none}.image-viewer-toolbar{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;width:100%;padding:max(10px,env(safe-area-inset-top)) 60px 10px 10px;background:#1D1D1F;border-bottom:1px solid #414044}.image-viewer-toolbar button{min-width:40px;min-height:38px;padding:7px 12px;border:1px solid #414044;border-radius:8px;background:#292A2D;color:#E9E5DE}.image-viewer-toolbar .image-lightbox-close{position:absolute;top:8px;right:10px;width:40px;height:40px;min-width:40px;padding:0;font-size:26px}.image-zoom-level{min-width:48px;color:#B4AEA4;text-align:center;font-size:12px}.image-viewer-stage{position:relative;flex:1;min-height:0;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;touch-action:none}.image-viewer-stage img{display:block;flex:none;max-width:none!important;max-height:none!important;width:auto!important;height:auto!important;transform-origin:center center;border:0!important;border-radius:0!important;box-shadow:none!important;user-select:none;-webkit-user-drag:none}.image-viewer-stage .image-lightbox-caption{bottom:8px;left:12px;right:12px;background:rgba(20,20,22,.78);padding:4px 8px;border-radius:6px}@media(max-width:520px){.image-viewer-toolbar{gap:5px;padding-left:5px;padding-right:52px}.image-viewer-toolbar button{min-width:32px;padding:6px 8px;font-size:12px}.image-viewer-toolbar .image-lightbox-close{right:5px}}
/* Refined image viewer toolbar spacing */
.image-viewer-toolbar{gap:10px!important}.image-viewer-toolbar button[data-z=out],.image-viewer-toolbar button[data-z=in]{min-width:32px!important;width:32px!important;height:32px!important;min-height:32px!important;padding:4px!important}.image-viewer-toolbar button[data-z=fit]{margin-left:10px!important}

/* Viewer sizing and drag behavior fixes */
.image-viewer-stage img{touch-action:none!important;max-width:none!important;max-height:none!important}.image-viewer-toolbar{gap:10px!important}.image-viewer-toolbar [data-z=fit]{margin-left:10px!important}.image-viewer-toolbar [data-z=out],.image-viewer-toolbar [data-z=in]{min-width:32px!important;width:32px!important;height:32px!important;min-height:32px!important;padding:4px!important}

/* Final toolbar alignment: 10px gaps and uniform control height */
.image-viewer-toolbar{gap:10px!important}.image-viewer-toolbar .image-zoom-level{margin:0 0!important;min-width:48px!important}.image-viewer-toolbar [data-z=out],.image-viewer-toolbar [data-z=in],.image-viewer-toolbar [data-z=fit]{height:32px!important;min-height:32px!important;box-sizing:border-box!important}.image-viewer-toolbar [data-z=fit]{margin-left:0!important;padding:4px 12px!important}

/* Requested image viewer toolbar layout */
.image-viewer-toolbar{display:flex!important;align-items:center!important;gap:5px!important}

/* Toolbar layout explicitly requested */
.image-viewer-toolbar{display:flex!important;align-items:center!important;gap:5px!important}

/* Image viewer interaction cursor and touch panning */
.image-viewer-stage,.image-viewer-stage img{touch-action:none!important}.image-viewer-stage img{user-select:none;-webkit-user-drag:none}


/* Synced zoomable viewer controls from UA case viewer */
/* Image viewer: viewport-fixed toolbar, independent from image dimensions */
.image-lightbox{position:fixed!important;inset:0!important;display:block!important;padding:0!important;overflow:hidden!important}
.image-lightbox .image-viewer-toolbar{position:fixed!important;top:0!important;left:0!important;right:0!important;width:100%!important;height:76px!important;min-height:76px!important;box-sizing:border-box!important;display:flex!important;align-items:center!important;justify-content:center!important;flex-wrap:nowrap!important;z-index:10002!important;padding:10px 64px!important;background:rgba(29,29,31,.96)!important;border-bottom:1px solid #414044!important}
.image-lightbox .image-viewer-toolbar .image-lightbox-close{position:fixed!important;top:12px!important;right:12px!important}
.image-lightbox .image-viewer-stage{position:absolute!important;top:76px!important;left:0!important;right:0!important;bottom:32px!important;width:100%!important;height:calc(100% - 108px)!important;min-height:0!important;flex:none!important;box-sizing:border-box!important}
.image-lightbox .image-viewer-stage img{max-height:none!important;max-width:none!important}
@media(max-width:520px){.image-lightbox .image-viewer-toolbar{height:68px!important;min-height:68px!important;padding:8px 50px 8px 8px!important}.image-lightbox .image-viewer-toolbar .image-lightbox-close{top:8px!important;right:5px!important}.image-lightbox .image-viewer-stage{top:68px!important;height:calc(100% - 96px)!important;bottom:28px!important}}

/* SPEKTER pricing badge — single-line case heading */
.case-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 12px;
  min-width: 0;
}
.case-heading-row .eyebrow {
  margin: 0;
  min-width: 0;
}
.price-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  white-space: nowrap;
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 5px 10px;
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .01em;
}
@media (max-width: 420px) {
  .case-heading-row { gap: 8px; }
  .case-heading-row .eyebrow { font-size: 9px; letter-spacing: .1em; }
  .price-badge { padding: 4px 8px; font-size: 10px; }
}