/* Deployment page. Builds on product.css (paper hero, switch, app window) and platform.css (timed entrances, Clava window). */
.dh-hero { padding-inline: 0; }
.dh-hero .hosting-strip { margin-top: 56px; }

/* Where documents are processed: a zone on a dotted canvas, with the setup's specs below */
.cw-dep { height: 540px; }
.dm-body { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.dm { display: flex; flex: 1; align-items: center; gap: 0; padding: 30px 28px; background: radial-gradient(circle, #dfe3dc 1px, transparent 1.2px) 0 0 / 16px 16px; }
.dm-zone { position: relative; flex: 1; min-width: 0; padding: 34px 22px 26px; border: 1.5px dashed rgb(53 85 65 / .45); border-radius: 14px; background: rgb(255 255 255 / .7); }
.dm-label { position: absolute; left: 16px; top: -11px; padding: 2px 10px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11.5px; font-weight: 600; }
.dm-flow { display: flex; align-items: center; }
.dm-col { display: grid; flex: 1 1 0; gap: 10px; min-width: 0; }
.dm-flow > .dm-node { flex: 1 1 0; }
.dm-node { display: grid; gap: 3px; min-width: 0; padding: 12px 14px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 8px 20px rgb(24 38 30 / .06); }
.dm-node b { font-weight: 600; }
.dm-node small { color: var(--muted); font-size: 11.5px; line-height: 1.35; }
.dm-core { box-shadow: 0 0 0 1.5px var(--accent), 0 10px 24px rgb(24 38 30 / .1); }
.dm-core b { font: 500 17px/1.1 "Bodoni Moda", Georgia, serif; }
.dm-off { background: #f3f4f1; box-shadow: 0 0 0 1px var(--line); color: var(--muted); }
.dm-off b { color: var(--muted); }

/* Links draw in, then a document travels along them */
.dm-link { position: relative; flex: none; width: 36px; height: 2px; background: var(--accent); transform-origin: left; }
.dm-link::after { content: ""; position: absolute; left: 0; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); opacity: 0; }
@media (scripting: enabled) { .play:not(.is-live) .dm-link { transform: scaleX(0); } }
.play.is-live .dm-link { animation: fc-grow .5s cubic-bezier(.4,0,.2,1) calc(var(--d) * 1ms) both; }
.play.is-live .dm-link:not(.dm-cut)::after { animation: dm-packet 1.2s ease-in-out calc(var(--d) * 1ms + 500ms) 3; }
@keyframes dm-packet { 0% { left: 0; opacity: 0; } 15%, 85% { opacity: 1; } 100% { left: calc(100% - 8px); opacity: 0; } }
/* Outside the zone: a cut link to models the documents never reach */
.dm-out { position: relative; display: flex; align-items: center; flex: none; width: 230px; }
.dm-cut { width: auto; flex: 1 0 40px; background: repeating-linear-gradient(90deg, #b9c2b5 0 5px, transparent 5px 10px); }
.dm-cut::before { content: "×"; position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--line); color: var(--amber); font-size: 13px; font-weight: 600; line-height: 1; }
.dm-never { position: absolute; left: 0; top: -30px; color: var(--amber); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.dm-out .dm-node { width: 150px; }
.dm-src { flex: none; width: 150px; }

.dm-spec { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 22px; margin: 0; padding: 6px 22px 14px; border-top: 1px solid var(--line); background: var(--soft); font-size: 12.5px; }
.dm-spec div { padding: 10px 0; border-top: 1px solid var(--line); }
.dm-spec div:nth-child(-n+3) { border-top: 0; }
.dm-spec dt { color: var(--muted); font-size: 11.5px; font-weight: 600; }
.dm-spec dd { margin: 3px 0 0; line-height: 1.45; }

/* A client's questionnaire, with Clava's answers */
.dq { --line: #e7e9e4; padding-block: 136px 0; }
.dq-doc { margin-top: 52px; padding: 28px 32px 12px; }
.dq-list { margin: 0; padding: 0; list-style: none; }
.dq-list li { display: grid; grid-template-columns: 44px minmax(0, 5fr) minmax(0, 6fr); gap: 20px; padding: 18px 0; border-top: 1px solid var(--line); }
.dq-list span { color: var(--muted); font-variant-numeric: tabular-nums; }
.dq-list b { font: 400 19px/1.3 "Libre Caslon Display", Georgia, serif; }
.dq-list p { color: #3d463f; font-size: 14.5px; line-height: 1.55; }
.dq + .dp-steps { padding-top: 120px; }

@media (max-width: 1100px) {
  .cw-dep { height: auto; }
  .dm-spec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dm-spec div:nth-child(3) { border-top: 1px solid var(--line); }
}
@media (max-width: 900px) {
  .dm { flex-direction: column; align-items: stretch; gap: 20px; padding: 28px 16px 20px; }
  .dm-flow { flex-direction: column; align-items: stretch; }
  .dm-link { flex: none; width: 2px; height: 22px; margin-left: 24px; }
  .play.is-live .dm-link { animation-name: fc-fade; }
  .dm-link::after, .dm-cut::before { display: none; }
  .dm-out { width: auto; flex-direction: column; align-items: stretch; }
  .dm-cut { height: 22px; width: 2px; background: repeating-linear-gradient(180deg, #b9c2b5 0 4px, transparent 4px 8px); }
  .dm-never { position: static; margin: -18px 0 6px 36px; }
  .dm-out .dm-node, .dm-src { width: auto; }
  .dq-list li { grid-template-columns: 32px minmax(0, 1fr); }
  .dq-list p { grid-column: 2; }
}
@media (max-width: 560px) {
  .dm-spec { grid-template-columns: 1fr; }
  .dm-spec div:nth-child(2) { border-top: 1px solid var(--line); }
  .dm-flow > .dm-node, .dm-col { flex: none; }
  .dq { padding-top: 88px; }
  .dq-doc { padding: 20px 18px 6px; }
  .dq-list b { font-size: 17px; }
}