.workspace {
  --ink: #17202a;
  --muted: #66717d;
  --line: #d9dfe5;
  --soft: #f3f6f8;
  --navy: #071521;
  --red: #e31b23;
  --blue: #1260a8;
  --radius: 16px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  line-height: normal;
  background: #e9eef2;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
.workspace button, .workspace input, .workspace textarea, .workspace select { font: inherit; }

.topbar {
  min-height: 76px;
  padding: 12px clamp(20px, 4vw, 54px);
  background: var(--navy);
  display: flex;
  align-items: center;
  gap: 28px;
  color: #fff;
  border-bottom: 3px solid var(--red);
}
.topbar img { width: 220px; max-height: 54px; object-fit: contain; }
.topbar div { margin-left: auto; text-align: right; display: grid; gap: 2px; }
.topbar span { color: #bec9d2; font-size: .88rem; }

.workspace { display: grid; grid-template-columns: minmax(340px, 470px) minmax(520px, 1fr); min-height: calc(100vh - 79px); }
.editor { background: #fff; padding: clamp(24px, 4vw, 44px); overflow: auto; }
.preview-panel { padding: clamp(24px, 4vw, 44px); min-width: 0; }
.workspace .eyebrow { margin: 0 0 7px; font-size: .76rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--red); }
.editor h1 { font-size: clamp(1.8rem, 3vw, 2.45rem); line-height: 1.07; margin: 0 0 12px; letter-spacing: -.035em; }
.intro > p:last-child { color: var(--muted); line-height: 1.6; margin-bottom: 28px; }

.editor fieldset { padding: 0; border: 0; margin: 0 0 26px; }
.editor legend { font-weight: 800; margin-bottom: 10px; }
.preset-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.preset-card { position: relative; border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; cursor: pointer; text-align: center; background: #fff; }
.preset-card:last-child { grid-column: 1 / -1; }
.preset-card.active { border-color: var(--red); box-shadow: 0 0 0 2px rgba(227,27,35,.1); background: #fff9f9; }
.preset-card input, .color-choice input { position: absolute; opacity: 0; pointer-events: none; }
.preset-card span { font-weight: 800; }
.custom-row { display: grid; grid-template-columns: 1.35fr .65fr; gap: 16px; }
.check-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.check-grid label { display: flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 9px; padding: 9px 10px; cursor: pointer; }
.check-grid input { width: 17px; height: 17px; margin: 0; }
.camera-style-picker { margin-top: 14px; }
.picker-label { display: block; margin-bottom: 8px; font-size: .84rem; font-weight: 850; }
.camera-style-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.camera-style-card { position: relative; min-width: 0; display: grid; justify-items: center; gap: 4px; padding: 7px 5px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; background: #fff; text-align: center; }
.camera-style-card:hover { border-color: #919ca7; }
.camera-style-card.active { border-color: var(--red); box-shadow: 0 0 0 2px rgba(227,27,35,.1); background: #fff9f9; }
.camera-style-card input { position: absolute; opacity: 0; pointer-events: none; }
.camera-style-card img { width: 48px; height: 48px; object-fit: contain; }
.camera-style-card span { font-size: .74rem; font-weight: 850; line-height: 1.1; }
.camera-style-card small { color: var(--muted); font-size: .63rem; line-height: 1.1; }
.field-hint { margin: 9px 0 0; color: var(--muted); font-size: .75rem; line-height: 1.4; }
.color-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.color-choice { position: relative; border: 2px solid; border-radius: 9px; padding: 9px 6px; text-align: center; cursor: pointer; }
.color-choice.red { border-color: var(--red); }
.color-choice.blue { border-color: var(--blue); }
.color-choice.active { color: #fff; }
.color-choice.red.active { background: var(--red); }
.color-choice.blue.active { background: var(--blue); }
.sign-text-fields { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 18px 0; margin-bottom: 24px; }
.format-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.format-card { border: 1px solid var(--line); border-radius: 12px; padding: 13px; cursor: pointer; display: grid; gap: 4px; transition: .18s ease; background: #fff; }
.format-card:hover { border-color: #919ca7; transform: translateY(-1px); }
.format-card.active { border-color: var(--red); box-shadow: 0 0 0 2px rgba(227,27,35,.1); background: #fff9f9; }
.format-card input { position: absolute; opacity: 0; pointer-events: none; }
.format-name { font-weight: 800; }
.format-card small { color: var(--muted); }

.fields { display: grid; gap: 15px; }
.editor label { font-weight: 750; font-size: .9rem; }
:where(.editor) input, :where(.editor) textarea, :where(.editor) select { width: 100%; margin-top: 7px; border: 1px solid #bdc6ce; border-radius: 9px; padding: 11px 12px; color: var(--ink); background: #fff; line-height: 1.35; }
:where(.editor) textarea { resize: vertical; }
.rights-editor textarea { min-height: 250px; font-size: .82rem; line-height: 1.45; }
.rights-editor .field-hint { display: block; font-weight: 500; }
:where(.editor) input:focus, :where(.editor) textarea:focus, :where(.editor) select:focus { outline: 3px solid rgba(18,96,168,.16); border-color: var(--blue); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.notice { padding: 15px; background: #edf5fb; border-left: 4px solid var(--blue); border-radius: 8px; line-height: 1.45; }
.notice p { margin: 5px 0 0; color: #46525d; }
.consent-row { display: flex; gap: 10px; margin-top: 20px; color: #4e5a66; font-weight: 500; line-height: 1.45; }
.consent-row input { width: 18px; height: 18px; margin: 2px 0 0; flex: 0 0 auto; }
.actions { display: flex; gap: 10px; margin-top: 18px; }
.workspace .button { border: 0; border-radius: 10px; padding: 12px 15px; font-weight: 800; cursor: pointer; }
.workspace .button.primary { color: #fff; background: var(--red); }
.workspace .button.secondary { color: var(--navy); background: #e8edf1; }
.workspace .button:hover { filter: brightness(.95); }
.microcopy { font-size: .78rem; color: var(--muted); line-height: 1.5; }
.status { min-height: 24px; font-size: .88rem; font-weight: 750; color: var(--blue); }

.preview-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.preview-heading h2 { margin: 0; font-size: 1.2rem; }
.preview-badge { border: 1px solid #c2cbd3; border-radius: 999px; padding: 6px 10px; font-size: .72rem; font-weight: 800; color: #4b5660; background: rgba(255,255,255,.55); }
.sheet-wrap { display: flex; align-items: flex-start; justify-content: center; min-height: 700px; }
.sign { --accent: var(--red); --u: 4.8px; position: relative; overflow: hidden; background: white; color: #0d151c; box-shadow: 0 18px 50px rgba(7,21,33,.2); border: calc(.7 * var(--u)) solid var(--accent); }
.sign.accent-red { --accent: var(--red); }
.sign.accent-blue { --accent: var(--blue); }
.sign-a4 { width: min(100%, 650px); aspect-ratio: 210/297; padding: calc(4 * var(--u)); display: flex; flex-direction: column; }
.watermark { position: absolute; z-index: 0; left: 9%; top: 34%; width: 82%; opacity: .09; transform: rotate(-18deg); transform-origin: center; pointer-events: none; }
.sign-alert { position: relative; display: grid; grid-template-columns: calc(25 * var(--u)) 1fr; align-items: center; gap: calc(4 * var(--u)); border-bottom: calc(.75 * var(--u)) solid var(--accent); padding-bottom: calc(3 * var(--u)); flex: 0 0 auto; }
.symbol-cluster { display: grid; grid-template-columns: 1fr; gap: calc(1 * var(--u)); align-items: center; }
.symbol-cluster.count-2 { grid-template-columns: repeat(2, 1fr); }
.symbol-cluster.count-3 { grid-template-columns: repeat(2, 1fr); }
.symbol-cluster.count-3 .symbol-tile:last-child { grid-column: 1 / -1; width: 48%; justify-self: center; }
.symbol-tile svg, .symbol-tile img { display: block; width: 100%; height: auto; }
.camera-icon { aspect-ratio: 1; }
.camera-icon img { aspect-ratio: 1; object-fit: contain; }
.sign-kicker { font-size: calc(1.75 * var(--u)); font-weight: 900; letter-spacing: .19em; color: var(--accent); margin: 0 0 calc(.8 * var(--u)); }
.sign-alert h2 { font-size: calc(5.6 * var(--u)); line-height: .94; letter-spacing: -.025em; margin: 0; }
.sign-alert h2 span { display: block; white-space: nowrap; }
.recording { margin: calc(1.5 * var(--u)) 0 0; font-size: calc(2.15 * var(--u)); font-weight: 750; }
.fog-warning { position: relative; display: none; margin-top: calc(1.8 * var(--u)); padding: calc(1.25 * var(--u)) calc(1.6 * var(--u)); border: calc(.35 * var(--u)) solid #17202a; border-radius: calc(.8 * var(--u)); background: #ffd928; color: #071521; }
.sign.has-fog .fog-warning { display: block; }
.fog-warning strong { display: flex; align-items: baseline; gap: calc(.9 * var(--u)); font-size: calc(1.55 * var(--u)); line-height: 1.1; letter-spacing: .045em; }
.fog-warning strong span { color: var(--red); font-size: calc(1.7 * var(--u)); letter-spacing: .12em; }
.fog-warning p { margin: calc(.55 * var(--u)) 0 0; font-size: calc(1.18 * var(--u)); line-height: 1.3; font-weight: 700; }
.legal-content { position: relative; display: flex; flex-direction: column; gap: calc(1.35 * var(--u)); padding: calc(2.3 * var(--u)) 0; min-height: 0; flex: 1 1 auto; }
.legal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(1.35 * var(--u)); }
.legal-block { border: 1px solid #cbd3da; border-radius: calc(.9 * var(--u)); padding: calc(1.35 * var(--u)) calc(1.55 * var(--u)); background: rgba(255,255,255,.91); }
.legal-block span { display: block; text-transform: uppercase; font-size: calc(1.05 * var(--u)); font-weight: 900; letter-spacing: .08em; color: #526472; margin-bottom: calc(.35 * var(--u)); }
.legal-block strong, .legal-block p { font-size: calc(1.62 * var(--u)); line-height: 1.27; overflow-wrap: anywhere; }
.legal-block p { margin: calc(.25 * var(--u)) 0 0; }
.legal-block.info { border-color: var(--blue); }
.rights-smallprint { padding-top: calc(.8 * var(--u)); border-top: calc(.2 * var(--u)) solid #7d8790; }
.rights-smallprint > span { display: block; margin-bottom: calc(.55 * var(--u)); text-transform: uppercase; font-size: calc(1.02 * var(--u)); font-weight: 900; letter-spacing: .08em; color: #364652; }
.rights-smallprint p { margin: 0; column-count: 3; column-gap: calc(1.8 * var(--u)); column-rule: calc(.12 * var(--u)) solid #cbd3da; white-space: pre-line; font-size: calc(1.05 * var(--u)); line-height: 1.25; text-align: left; hyphens: auto; overflow-wrap: anywhere; }
.brand-footer { position: relative; display: grid; grid-template-columns: calc(20 * var(--u)) 1fr calc(10 * var(--u)); gap: calc(2.2 * var(--u)); align-items: center; border-top: calc(.3 * var(--u)) solid #17202a; padding-top: calc(1.7 * var(--u)); flex: 0 0 auto; }
.brand-footer img { width: 100%; }
.brand-footer div { display: grid; gap: calc(.2 * var(--u)); min-width: 0; font-size: calc(1.16 * var(--u)); line-height: 1.22; overflow-wrap: anywhere; }
.qr-link { display: grid; gap: calc(.25 * var(--u)); color: #17202a; text-decoration: none; text-align: center; font-size: calc(.85 * var(--u)); font-weight: 900; }
.qr-link img { width: 100%; image-rendering: pixelated; }
.service-line { position: relative; text-align: center; font-size: calc(.86 * var(--u)); font-weight: 750; margin: calc(1.2 * var(--u)) 0 0; color: #4e5a64; }
.sign.no-video .legal-content { display: none; }
.sign-a4.no-video .sign-alert { margin: auto 0; }
.sign.fog-only .sign-alert { grid-template-columns: 1fr; text-align: center; margin: 0; }
.sign.fog-only .sign-copy { display: none; }
.sign.fog-only .symbol-cluster { width: min(68%, calc(62 * var(--u))); margin: 0 auto; }

.sign-sticker { display: grid; grid-template-rows: 1fr auto; align-items: stretch; padding: calc(5 * var(--u)); border: calc(.75 * var(--u)) solid var(--accent); }
.sign-sticker.square { width: min(100%, 480px); aspect-ratio: 1; }
.sign-sticker.small { width: min(100%, 600px); aspect-ratio: 3/2; }
.sign-sticker.large { width: min(100%, 650px); aspect-ratio: 4/3; }
.sign-sticker .sign-alert { width: 100%; align-self: center; grid-template-columns: calc(28 * var(--u)) 1fr; gap: calc(4 * var(--u)); border: 0; padding: 0; text-align: left; }
.sign-sticker.square .sign-alert { grid-template-columns: 1fr; gap: calc(2.5 * var(--u)); text-align: center; }
.sign-sticker.square .symbol-cluster { width: calc(42 * var(--u)); margin: 0 auto; }
.sign-sticker .recording { display: none; }
.sign-sticker .legal-content { display: none; }
.sign-sticker .fog-warning { margin: calc(1.4 * var(--u)) 0; padding: calc(1.4 * var(--u)) calc(1.7 * var(--u)); }
.sign-sticker .fog-warning strong { flex-direction: column; align-items: flex-start; gap: calc(.25 * var(--u)); font-size: calc(2 * var(--u)); }
.sign-sticker .fog-warning strong span { font-size: calc(2.3 * var(--u)); }
.sign-sticker .fog-warning p { font-size: calc(1.6 * var(--u)); line-height: 1.27; }
.sign-sticker.square.has-fog .symbol-cluster { width: calc(35 * var(--u)); }
.sign-sticker.square.has-fog .sign-alert h2 { font-size: calc(5.2 * var(--u)); }
.sign-sticker.fog-only .symbol-cluster, .sign-sticker.square.fog-only .symbol-cluster { width: min(72%, calc(60 * var(--u))); }
.sign-sticker .watermark { left: 8%; top: 27%; width: 84%; opacity: .13; }
.sign-sticker.small .watermark, .sign-sticker.large .watermark { left: 12%; top: 24%; width: 76%; opacity: .115; }
.sign-sticker .sign-kicker { font-size: calc(2.2 * var(--u)); margin-bottom: calc(1 * var(--u)); }
.sign-sticker .sign-alert h2 { font-size: calc(5.25 * var(--u)); line-height: .95; }
.sign-sticker.square .sign-alert h2 { font-size: calc(6.25 * var(--u)); }
.sign-sticker .brand-footer { width: 100%; padding-top: calc(2.2 * var(--u)); grid-template-columns: calc(22 * var(--u)) 1fr calc(14 * var(--u)); gap: calc(2 * var(--u)); text-align: left; }
.sign-sticker .brand-footer div { font-size: calc(1.45 * var(--u)); line-height: 1.2; }
.sign-sticker.square .brand-footer div { font-size: calc(1.55 * var(--u)); }
.sign-sticker.square .brand-footer { grid-template-columns: calc(20 * var(--u)) 1fr calc(18 * var(--u)); }
.sign-sticker .qr-link { font-size: calc(1.05 * var(--u)); }
.sign-sticker .service-line { display: none; }

/* Fixed print proportions: the optional fog note gets its own row. */
[hidden] { display: none !important; }
.topbar nav a { color: #fff; }
.brand-footer .brand-compact { display: none; }
.sign-sticker { padding: calc(3.5 * var(--u)); grid-template-rows: minmax(0, 1fr) auto; gap: calc(1.5 * var(--u)); }
.sign-sticker.has-fog { grid-template-rows: minmax(0, 1fr) auto auto; }
.sign-sticker > * { min-width: 0; min-height: 0; }
.sign-sticker .watermark { display: none; }
.sign-sticker .brand-footer { grid-template-columns: calc(22 * var(--u)) minmax(0,1fr) calc(17 * var(--u)); gap: calc(2 * var(--u)); padding-top: calc(1.5 * var(--u)); align-self: end; }
.sign-sticker .brand-footer .brand-details { display: none; }
.sign-sticker .brand-footer .brand-compact { display: grid; font-size: calc(1.9 * var(--u)); line-height: 1.25; gap: calc(.6 * var(--u)); overflow-wrap: normal; }
.sign-sticker .brand-compact strong { font-size: calc(2.2 * var(--u)); }
.sign-sticker .brand-compact span:last-child { font-size: calc(1.55 * var(--u)); overflow-wrap: anywhere; }
.sign-sticker .qr-link { padding: calc(.7 * var(--u)); background: #fff; }
.sign-sticker .qr-link span { display: none; }
.sign-sticker .sign-alert { grid-template-columns: calc(40 * var(--u)) minmax(0,1fr); gap: calc(2 * var(--u)); }
.sign-sticker .symbol-cluster { width: 100%; }
.sign-sticker .symbol-cluster.count-3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
.sign-sticker .symbol-cluster.count-3 .symbol-tile:last-child { grid-column: auto; width: 100%; }
.sign-sticker .sign-alert h2 { font-size: calc(4.5 * var(--u)); line-height: 1.03; }
.sign-sticker .sign-alert h2 span { white-space: normal; overflow-wrap: anywhere; }
.sign-sticker.square .sign-alert { grid-template-columns: minmax(0,1fr); gap: calc(1.5 * var(--u)); }
.sign-sticker.square .symbol-cluster { width: calc(44 * var(--u)); }
.sign-sticker.square .symbol-cluster.count-2 { width: calc(76 * var(--u)); }
.sign-sticker.square .symbol-cluster.count-3 { width: calc(88 * var(--u)); }
.sign-sticker.square .sign-alert h2 { font-size: calc(5.3 * var(--u)); }
.sign-sticker.square .sign-kicker { font-size: calc(2.7 * var(--u)); margin-bottom: calc(.5 * var(--u)); }
.sign-sticker.square.has-fog .symbol-cluster.count-2 { width: calc(64 * var(--u)); }
.sign-sticker.square.has-fog .sign-alert h2 { font-size: calc(4.7 * var(--u)); }
.sign-sticker.square.fog-only .symbol-cluster { width: calc(60 * var(--u)); }
.sign-sticker.fog-only .sign-alert { grid-template-columns: 1fr; }
.sign-sticker.fog-only:not(.square) .symbol-cluster { width: calc(37 * var(--u)); }
.sign-sticker .fog-warning { margin: 0; padding: calc(1.1 * var(--u)); }
.sign-sticker .fog-warning strong { display: none; }
.sign-sticker .fog-warning p { margin: 0; font-size: calc(2 * var(--u)); line-height: 1.2; }
.sign-a4 .symbol-cluster.count-2 { grid-template-columns: 1fr; }
.sign-a4 .symbol-cluster.count-3 { grid-template-columns: 1fr; }
.sign-a4 .symbol-cluster.count-3 .symbol-tile:last-child { grid-column: auto; width: 100%; }
.sign-a4 .sign-alert { grid-template-columns: calc(20 * var(--u)) minmax(0,1fr); }
.sign-a4.no-video .sign-alert { grid-template-columns: calc(38 * var(--u)) minmax(0,1fr); }
.sign-a4.no-video.fog-only .sign-alert { grid-template-columns: 1fr; }

@media (max-width: 980px) {
  .workspace { grid-template-columns: 1fr; }
  .preview-panel { border-top: 1px solid #ccd4da; }
  .sheet-wrap { min-height: 0; }
}
@media (max-width: 560px) {
  .topbar { gap: 10px; padding: 10px 16px; }
  .topbar img { width: 165px; }
  .topbar div { display: none; }
  .format-grid, .field-row, .custom-row { grid-template-columns: 1fr; }
  .actions { flex-direction: column; }
  .camera-style-options { grid-template-columns: repeat(3, 1fr); }
}

@media print {
  html, body { width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #fff; }
  .topbar, .editor, .preview-heading { display: none !important; }
  .workspace, .preview-panel, .sheet-wrap { display: block !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important; overflow: hidden !important; }
  .sign { position: fixed !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; box-shadow: none !important; border: calc(.7 * var(--u)) solid var(--accent) !important; break-inside: avoid !important; page-break-inside: avoid !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  @page { margin: 0; size: A4 portrait; }
}

.sign-a5 { aspect-ratio: 148 / 210; }

/* Preserve the complete business identity on every format. */
.sign-sticker .brand-footer { grid-template-columns: calc(21 * var(--u)) minmax(0,1fr) calc(17 * var(--u)); gap: calc(1.5 * var(--u)); }
.sign-sticker .brand-footer .brand-compact { display: none; }
.sign-sticker .brand-footer .brand-details { display: grid; font-size: calc(1.55 * var(--u)); line-height: 1.25; gap: calc(.4 * var(--u)); overflow-wrap: anywhere; }
.sign-sticker .brand-details strong { font-size: calc(1.65 * var(--u)); }
.sign-sticker .qr-link span { display: block; font-size: calc(1 * var(--u)); }
.sign-sticker .service-line { display: block; margin: 0; font-size: calc(1.3 * var(--u)); line-height: 1.3; }
.sign-sticker { grid-template-rows: minmax(0,1fr) auto auto; gap: calc(1 * var(--u)); }
.sign-sticker.has-fog { grid-template-rows: minmax(0,1fr) auto auto auto; }
.sign-sticker.square.fog-only .symbol-cluster { width: calc(54 * var(--u)); }
.sign-sticker.square.has-fog .symbol-cluster.count-2 { width: calc(58 * var(--u)); }
.sign-sticker.fog-only:not(.square) .symbol-cluster { width: calc(30 * var(--u)); }
/* Keep the complete service list on one horizontal line. */
.sign .service-line { white-space: nowrap; overflow-wrap: normal; font-size: calc(.86 * var(--u)); letter-spacing: -.015em; }
/* Align the complete identity block and reserve more space for pictograms. */
.sign .brand-footer { align-items: start; gap: calc(1.2 * var(--u)); padding-top: calc(1 * var(--u)); }
.sign .brand-footer > img { align-self: center; }
.sign .brand-footer .qr-link { padding: 0; align-self: start; }
.sign .brand-footer .brand-details { text-align: left; }
.sign .service-line { text-align: left; }
.sign-a4 { padding-bottom: calc(2.5 * var(--u)); }
.sign-a4 .brand-footer { margin-top: auto; }
.sign-sticker { padding-bottom: calc(2 * var(--u)); gap: calc(.8 * var(--u)); }
.sign-sticker .brand-footer { grid-template-columns: calc(19 * var(--u)) minmax(0,1fr) calc(14.5 * var(--u)); gap: calc(1.2 * var(--u)); padding-top: calc(1 * var(--u)); align-items: start; }
.sign-sticker .sign-alert { grid-template-columns: calc(44 * var(--u)) minmax(0,1fr); }
.sign-sticker.square .sign-alert { grid-template-columns: minmax(0,1fr); gap: calc(1 * var(--u)); }
.sign-sticker.square .sign-alert h2 { font-size: calc(4.6 * var(--u)); line-height: 1.03; }
.sign-sticker.square.has-fog .sign-alert h2 { font-size: calc(4.2 * var(--u)); }
.sign-sticker.square .symbol-cluster { width: calc(48 * var(--u)); }
.sign-sticker.square .symbol-cluster.count-2 { width: calc(82 * var(--u)); }
.sign-sticker.square.has-fog .symbol-cluster.count-2 { width: calc(66 * var(--u)); }
.sign-sticker.square.fog-only .symbol-cluster { width: calc(59 * var(--u)); }
.sign-sticker.fog-only .sign-alert { grid-template-columns: 1fr; }
.sign-sticker.fog-only:not(.square) .symbol-cluster { width: calc(34 * var(--u)); }
.sign-sticker.small.fog-only .symbol-cluster { width: calc(30 * var(--u)); }
/* Final footer arrangement: QR left, complete contact details centre, logo right. */
.sign .brand-footer { grid-template-columns: calc(12 * var(--u)) minmax(0,1fr) calc(20 * var(--u)); column-gap: calc(1.5 * var(--u)); align-items: center; padding-top: calc(.8 * var(--u)); }
.sign .brand-footer > .qr-link { grid-column: 1; grid-row: 1; width: 100%; align-self: center; padding: 0; }
.sign .brand-footer > .brand-details { grid-column: 2; grid-row: 1; text-align: center; align-self: center; }
.sign .brand-footer > img { grid-column: 3; grid-row: 1; align-self: center; }
.sign .service-line { text-align: center; margin-top: calc(.5 * var(--u)); }
.sign-sticker { padding-bottom: calc(1.5 * var(--u)); gap: calc(.5 * var(--u)); }
.sign-a4 { padding-bottom: calc(2 * var(--u)); }
.sign-a4 .brand-footer { margin-top: auto; }
.sign.sign-sticker .brand-footer { grid-template-columns: calc(12 * var(--u)) minmax(0,1fr) calc(20 * var(--u)); column-gap: calc(1.5 * var(--u)); align-items: center; }
/* Explicit footer geometry, shared by square and rectangular formats. */
.sign .brand-footer,
.sign.sign-sticker .brand-footer {
  grid-template-columns: calc(9 * var(--u)) minmax(0, 1fr) calc(20 * var(--u));
  align-items: start;
}
.sign .brand-footer > .qr-link {
  width: calc(9 * var(--u));
  align-self: start;
  padding: 0;
}
.sign .brand-footer > .qr-link img { width: 100%; height: auto; }
.sign .brand-footer > .brand-details,
.sign .brand-footer > img { align-self: start; margin-top: 0; }

/* Give alarm/video pictograms priority over the two-line standard headline. */
.sign-sticker.square:not(.has-fog) .symbol-cluster.count-1 { width: calc(61 * var(--u)); }
.sign-sticker.square:not(.has-fog) .symbol-cluster.count-2 { width: calc(90 * var(--u)); gap: calc(2 * var(--u)); }
.sign-sticker.square:not(.has-fog) .sign-alert h2 { font-size: calc(4.3 * var(--u)); line-height: 1.04; }
.sign-sticker.square:not(.has-fog) .sign-kicker { font-size: calc(2.4 * var(--u)); margin-bottom: calc(.6 * var(--u)); }
.sign-sticker.square:not(.has-fog) .sign-alert { gap: calc(1.2 * var(--u)); }

/* One continuous headline; the JS fit uses relative units for screen and print. */
.sign-sticker .sign-alert h2 { white-space: nowrap; overflow-wrap: normal; }
.sign-sticker .sign-alert h2 span { display: inline; white-space: nowrap; overflow-wrap: normal; }
.sign-sticker .sign-alert h2 span + span::before { content: " "; }
.sign-sticker.square:not(.has-fog) .symbol-cluster.count-1 { width: calc(67 * var(--u)); }
.sign-sticker.square:not(.has-fog) .symbol-cluster.count-2 { width: calc(91 * var(--u)); }
.sign-sticker.square.has-fog .symbol-cluster.count-2 { width: calc(74 * var(--u)); }
/* Centre contact details vertically between the divider and service list. */
.sign .brand-footer > .brand-details {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.sign.sign-sticker .brand-footer > .brand-details {
  display: flex;
  align-self: stretch;
}

.sign .brand-footer .brand-details { gap: calc(.28 * var(--u)); line-height: 1.25; }
.sign .brand-details > strong { margin-bottom: calc(.4 * var(--u)); }
.sign .brand-details .contact-row b { font-weight: 750; }
.sign .brand-details .contact-scope { font-size: .9em; color: #394650; }

/* Compact contact block while retaining every business detail. */
.sign .brand-footer .brand-details { gap: calc(.12 * var(--u)); line-height: 1.1; }
.sign .brand-details > strong { margin-bottom: calc(.15 * var(--u)); }
.sign .brand-details .contact-scope { font-size: .85em; }

.preset-card:has(input:disabled), .check-grid label:has(input:disabled) { opacity: .45; cursor: not-allowed; }

/* Shared website design for controls; printed artwork retains its own palette. */
.workspace .editor { --red: #e21d38; --muted: #607483; --line: #d8e1e7; line-height: 1.5; }
.editor .intro { padding-bottom: 12px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.editor .intro a { color: #a7132b; text-decoration: underline; text-underline-offset: 3px; }
.editor .button { border-radius: 999px; font-weight: 750; }
:where(.editor) input:focus-visible, :where(.editor) textarea:focus-visible, :where(.editor) select:focus-visible { outline: 3px solid #e21d3826; border-color: #e21d38; }
.editor :is(.preset-card,.format-card,.camera-style-card):has(input:focus-visible) { outline: 3px solid #e21d3850; outline-offset: 2px; }
.sign h2 { hyphens: none; }
@media print {
  .site-header, .skip-link { display: none !important; }
}

@media screen {
  body[data-page="signConfigurator"] > .workspace { padding-top: 84px; }
  .format-card { position: relative; }
}

@media print {
  body[data-page="signConfigurator"] > .site-footer, body[data-page="signConfigurator"] > .cookie-banner, body[data-page="signConfigurator"] > .modal { display: none !important; }
}

.camera-style-card:has(input:disabled) { opacity: .55; cursor: not-allowed; }