/* Shared components for offers A and B */
.lede-lg { font-size: 21px; color: var(--muted); max-width: 36ch; }
.note { color: var(--muted); font-size: 15px; }

/* Resize widget */
.stage-wrap { display: grid; gap: 14px; }
.stage {
  position: relative; height: clamp(300px, 38vw, 470px);
  border-radius: 10px; border: 1px solid var(--line);
  background-color: var(--check-a);
  background-image: conic-gradient(var(--check-b) 25%, transparent 0 50%, var(--check-b) 0 75%, transparent 0);
  background-size: 22px 22px;
  display: grid; place-items: center; overflow: hidden; touch-action: none;
}
.frame {
  position: relative; width: 300px; height: 200px;
  transition: width .55s cubic-bezier(.2,.8,.2,1), height .55s cubic-bezier(.2,.8,.2,1);
  outline: 2px solid var(--green); box-shadow: 0 18px 40px -18px rgba(10, 30, 20, .45);
}
.frame.dragging { transition: none; }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame .h { position: absolute; width: 12px; height: 12px; background: var(--paper); border: 2px solid var(--green); border-radius: 2px; }
.h.tl { left: -7px; top: -7px; } .h.tr { right: -7px; top: -7px; } .h.bl { left: -7px; bottom: -7px; }
.h.br { right: -9px; bottom: -9px; width: 18px; height: 18px; cursor: nwse-resize; background: var(--green); }
.h.tm { left: calc(50% - 6px); top: -7px; } .h.bm { left: calc(50% - 6px); bottom: -7px; }
.h.ml { top: calc(50% - 6px); left: -7px; } .h.mr { top: calc(50% - 6px); right: -7px; }
.dim {
  position: absolute; left: 50%; top: -38px; transform: translateX(-50%);
  background: var(--green); color: var(--on-green); white-space: nowrap;
  font: 700 17px/1 var(--display); letter-spacing: .02em; padding: 6px 10px; border-radius: 4px;
  font-variant-numeric: tabular-nums;
}
.frame.crop .dim { background: var(--ink); color: var(--canvas); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font: 600 14px/1 var(--body); padding: 9px 12px; border-radius: 999px; cursor: pointer; border: 1px solid var(--line); background: var(--paper); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--canvas); border-color: var(--ink); }

/* Client strip */
.clients { padding-block: 30px; border-block: 1px solid var(--line); }
.clients .wrap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px 34px; }
.clients .lbl { color: var(--muted); font-size: 15px; width: 100%; }
.clients b { font: 700 25px/1 var(--display); letter-spacing: .01em; opacity: .78; white-space: nowrap; }

/* Transformation steps */
.path { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); counter-reset: s; }
.path li { counter-increment: s; display: grid; gap: 10px; align-content: start; padding: 26px 28px 30px 0; border-top: 2px solid var(--ink); }
.path li + li { padding-left: 28px; border-left: 1px solid var(--line); }
.path li::before { content: counter(s); font: 800 44px/1 var(--display); color: var(--green-ink); }
.path h3 { font-size: 30px; }
.path p { color: var(--muted); }
@media (max-width: 820px) { .path { grid-template-columns: 1fr; } .path li + li { padding-left: 0; border-left: 0; } }

/* Media rows */
.show { display: grid; gap: 80px; }
.show-row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 48px; align-items: center; }
.show-row.flip { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
.show-row.flip .show-media { order: 2; }
.show-media > img, .show-media > video { border-radius: 10px; border: 1px solid var(--line); max-height: 560px; width: auto; max-width: 100%; margin-inline: auto; }
.show-text { display: grid; gap: 12px; align-content: start; }
.show-text p { color: var(--muted); font-size: 18px; }
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-items: start; }
.posts img { border-radius: 6px; }
.posts img:nth-child(2) { margin-top: 36px; }
@media (max-width: 860px) {
  .show-row, .show-row.flip { grid-template-columns: 1fr; gap: 20px; }
  .show-row.flip .show-media { order: 0; }
}

/* PSD flat / layers toggle */
.ba { display: grid; gap: 12px; }
.ba-view { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: #13171c; aspect-ratio: 1400 / 845; }
.ba-view img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .35s; }
.ba-view img.layers { opacity: 0; }
.ba-view.on img.layers { opacity: 1; }
.ba-view.on img.flat { opacity: 0; }

/* Animation pair */
.anim { display: grid; grid-template-columns: 2fr 3fr; gap: 16px; }
.anim figure { margin: 0; display: grid; gap: 8px; grid-template-rows: 1fr auto; }
.anim video { width: 100%; height: 100%; min-height: 0; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); background: #0f1a24; }
.anim figcaption { font-size: 14px; color: var(--muted); }
@media (max-width: 700px) { .anim { grid-template-columns: 1fr; } }

/* Plugin screenshot */
.plugin-shot { max-height: 540px; width: auto; margin-inline: auto; border-radius: 8px; box-shadow: 0 24px 50px -24px rgba(0,0,0,.5); }

/* Industries */
.who { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid var(--ink); }
.who div { padding: 22px 24px 8px 0; display: grid; gap: 8px; align-content: start; }
.who div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.who p { color: var(--muted); }
@media (max-width: 760px) { .who { grid-template-columns: 1fr; } .who div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); } }

/* Guides */
.guides { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.guides a { display: grid; gap: 10px; padding: 24px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; color: var(--ink); text-decoration: none; }
.guides a:hover { border-color: var(--green-ink); }
.guides small { color: var(--muted); font-size: 14px; }
.guides b { font: 600 24px/1.1 var(--display); }
@media (max-width: 860px) { .guides { grid-template-columns: 1fr; } }

/* Final CTA */
.final { background: var(--ink); color: var(--canvas); margin-inline: -20px; padding-inline: 20px; }
.final .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.final h2 { color: var(--canvas); }
.final p { color: color-mix(in srgb, var(--canvas) 70%, transparent); font-size: 19px; margin-top: 16px; max-width: 34ch; }
.final form, .final .booked { display: grid; gap: 14px; }
.final label { display: grid; gap: 6px; font-size: 15px; font-weight: 500; }
.final input, .final select {
  font: 400 17px var(--body); padding: 13px 14px; border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--canvas) 30%, transparent);
  background: color-mix(in srgb, var(--canvas) 8%, transparent); color: var(--canvas);
}
.final select option { color: #13211b; }
.slots { display: flex; flex-wrap: wrap; gap: 8px; }
.slots button { font: 600 15px var(--body); padding: 10px 14px; border-radius: 6px; border: 1px solid var(--green); background: transparent; color: var(--canvas); cursor: pointer; }
.slots button:hover { background: var(--green); color: var(--on-green); }
@media (max-width: 860px) { .final .wrap { grid-template-columns: 1fr; gap: 32px; } }

@media (prefers-reduced-motion: reduce) { .ba-view img, .frame { transition: none; } }