/* Propozycja prezentacji katalogów, 20.10.2026.
   Inspiracja: przestrzeń, wspólne ramy i pola ilustracji Firecrawl / Mobbin.
   General Sans, rama 1240 px, #FE4A23 i proste boxy: decyzje Dealyo.
   Arkusz nie dociera do dokumentów iframe ani plików do pobrania.
   Sekwencje i sterowanie ruchem pozostają w źródłowych arkuszach. */

:is(.catalog-components, .catalog-assets, .templates-catalog) .catalog-hero {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 48px;
  padding-block: 76px 64px;
  background: #fff;
}
:is(.catalog-components, .catalog-assets, .templates-catalog) .catalog-hero-copy {
  width: 100%;
  max-width: 880px;
  text-align: center;
}
:is(.catalog-components, .catalog-assets, .templates-catalog) .catalog-hero-copy > :is(.ds-label, .catalog-label) {
  display: block;
  margin: 0 0 25px;
  font-size: 12px;
  line-height: 18px;
}
:is(.catalog-components, .catalog-assets, .templates-catalog) .catalog-hero h1 {
  max-width: 880px;
  margin: 0 auto;
  font-size: clamp(48px, 5.8vw, 72px);
  line-height: 1.04;
  letter-spacing: -.045em;
  word-spacing: .04em;
}
:is(.catalog-components, .catalog-assets, .templates-catalog) .catalog-hero-copy > :is(p:not(.catalog-label), .catalog-lead) {
  max-width: 58ch;
  margin: 24px auto 28px;
  font-size: 17px;
  line-height: 27px;
}
.catalog-components .catalog-actions { justify-content: center; }
:is(.catalog-components, .catalog-assets, .templates-catalog) .spm-hero-field {
  background: #fff;
}
:is(.catalog-components, .catalog-assets, .templates-catalog) .spm-hero-field::before {
  content: "";
  position: absolute;
  top: 50px;
  right: 34px;
  width: 6px;
  height: 6px;
  background: #e7e7e7;
  box-shadow: -12px 12px #ededed, 0 12px #e7e7e7, -24px 24px #f1f1f1,
    -12px 24px #ededed, 0 24px #e7e7e7, -12px 36px #f1f1f1,
    0 36px #ededed, 0 48px #f1f1f1;
}
:is(.catalog-components, .catalog-assets, .templates-catalog) .spm-hero-field::after {
  background: linear-gradient(0deg, #fafafa, transparent 12%);
}
:is(.catalog-components, .catalog-assets, .templates-catalog) .spm-hero-cross { color: #d7d7d7; }

/* The hero plates show the material itself, with one quiet shared frame. */
.catalog-components .catalog-package {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1fr);
  gap: 12px 42px;
  width: min(100%, 800px);
  padding: 27px 32px;
  text-align: left;
}
.catalog-components .catalog-package .catalog-plate-top { grid-column: 1; }
.catalog-components .catalog-package h2 { grid-column: 1; margin: 8px 0; font-size: 34px; line-height: 37px; }
.catalog-components .catalog-package dl { grid-column: 2; grid-row: 1 / 4; align-self: center; }
.catalog-components .catalog-package dl > div { padding-block: 14px; }
.catalog-components .catalog-package dl > div:first-child { border-top: 0; }
.catalog-components .catalog-package dd { font-size: 14px; line-height: 22px; }
.catalog-components .catalog-plate-note { grid-column: 1; margin: 0; font-size: 11px; line-height: 18px; }
.catalog-assets .catalog-identity {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  width: min(100%, 800px);
  text-align: left;
}
.catalog-assets .catalog-identity-logo { min-height: 218px; padding: 25px 30px 37px; }
.catalog-assets .catalog-identity-logo > img { width: min(290px, 100%); }
.catalog-assets .catalog-identity-bottom { border-top: 0; border-left: 1px solid var(--dealyo-line); }
.catalog-assets .catalog-identity-bottom > div { min-height: 218px; padding: 28px 23px; }
.catalog-assets .catalog-identity-bottom .ds-label { font-size: 11px; line-height: 18px; }
.templates-catalog .catalog-hero .catalog-link { margin-top: 0; }
.templates-catalog .catalog-selection {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(100%, 800px);
  padding: 0;
  border: 1px solid var(--dealyo-line);
  text-align: left;
  background: #fff;
}
.templates-catalog .catalog-selection > .catalog-label {
  grid-column: 1 / -1;
  margin: 0;
  padding: 15px 24px;
  border-bottom: 1px solid var(--dealyo-line);
  font-size: 11px;
  line-height: 18px;
}
.templates-catalog .catalog-selection > a { border: 0; padding: 25px 24px; gap: 16px; }
.templates-catalog .catalog-selection > a:last-child { border-left: 1px solid var(--dealyo-line); }
.templates-catalog .catalog-selection small { font-size: 14px; line-height: 22px; }

/* Large centered section openings and two illustrations in a single grid. */
:is(.catalog-components, .catalog-assets, .templates-catalog) .spm-demo {
  padding-block: 76px 40px;
  background: #fafafa;
}
:is(.catalog-components, .catalog-assets, .templates-catalog) .spm-demo-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-content: stretch;
  justify-items: center;
  gap: 22px;
  margin: 0 0 22px;
  text-align: center;
}
:is(.catalog-components, .catalog-assets, .templates-catalog) .spm-demo-top > div { width: 100%; }
:is(.catalog-components, .catalog-assets, .templates-catalog) .spm-demo h2 {
  margin-top: 22px;
  font-size: clamp(36px, 4.3vw, 52px);
  line-height: 1.08;
  letter-spacing: -.04em;
  word-spacing: .04em;
}
:is(.catalog-components, .catalog-assets, .templates-catalog) .spm-demo-intro {
  max-width: 62ch;
  margin: 0 auto 40px;
  text-align: center;
  font-size: 16px;
  line-height: 26px;
}
:is(.catalog-components, .catalog-assets, .templates-catalog) .spm-grid { gap: 0; align-items: stretch; }
:is(.catalog-components, .catalog-assets, .templates-catalog) .spm-card { aspect-ratio: auto; }
:is(.catalog-components, .catalog-assets, .templates-catalog) .spm-card + .spm-card { border-left: 0; }
:is(.catalog-components, .catalog-assets, .templates-catalog) .spm-card-head {
  min-height: 65px;
  padding: 20px 26px;
  border-bottom: 1px solid var(--dealyo-line);
  flex-wrap: wrap;
  gap: 5px 16px;
}
:is(.catalog-components, .catalog-assets, .templates-catalog) .spm-card-head > :is(.spm-card-index, .spm-kicker) {
  font-size: 12px;
  line-height: 18px;
}
:is(.catalog-components, .catalog-assets, .templates-catalog) .spm-scene {
  margin-top: 0;
  min-height: 400px;
  flex: none;
  background: #fafafa;
}
:is(.catalog-components, .catalog-assets, .templates-catalog) .spm-pv-grid { opacity: .45; }
:is(.catalog-components, .catalog-assets, .templates-catalog) .spm-pv-orbits { opacity: .3; }
:is(.catalog-components, .catalog-assets, .templates-catalog) .spm-card figcaption {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: 29px 30px 28px;
  border-top: 1px solid var(--dealyo-line);
}
:is(.catalog-components, .catalog-assets, .templates-catalog) .spm-card h3 {
  max-width: 25ch;
  margin-bottom: 14px;
  font-size: 28px;
  line-height: 32px;
}
:is(.catalog-components, .catalog-assets, .templates-catalog) .spm-card p { font-size: 15px; line-height: 24px; }
:is(.catalog-components, .catalog-assets, .templates-catalog) .spm-card-link { margin-top: auto; padding-top: 21px; }
:is(.catalog-components, .catalog-assets, .templates-catalog) .spm-demo-note {
  max-width: 95ch;
  margin: 24px 0 0;
  font-size: 11px;
  line-height: 19px;
}
.catalog-assets .spma-scene { min-height: 450px; }
.catalog-assets .spma-stage { width: min(340px, calc(100% - 40px)); }
.catalog-assets .spma-paper { min-height: 218px; padding: 22px; box-shadow: none; }
.catalog-assets .spma-scene .spma-heading { font-size: 28px; line-height: 30px; }
.catalog-assets .spma-scene .spma-body { font-size: 14px; line-height: 21px; }
.templates-catalog .tpr-scene { min-height: 510px; padding: 30px 24px; }
.templates-catalog .tpr-process { max-width: 360px; }
.templates-catalog :is(.tpr-observations, .tpr-report-sheet, .tpr-page) { box-shadow: none; }

/* Catalog boxes retain complete outlines; spacing gives their contents hierarchy. */
.catalog-components .catalog-directory { padding-block: 68px 40px; }
.catalog-components .catalog-section-heading { gap: 40px; margin-bottom: 32px; }
.catalog-components .component-nav { gap: 0; }
.catalog-components .catalog-nav-group + .catalog-nav-group { border-left: 0; }
.catalog-components .catalog-nav-group summary { min-height: 166px; padding: 25px; }
.catalog-components .catalog-nav-description { font-size: 14px; line-height: 22px; }
.catalog-components .catalog-specimens { gap: 40px; }
.catalog-components .catalog-component-head { padding: 35px 34px 30px; gap: 0 48px; }
.catalog-components .catalog-component-head > .ds-label { margin-bottom: 24px; font-size: 12px; line-height: 18px; }
.catalog-components .catalog-component-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: none; margin-top: 28px; }
.catalog-components .component-note { font-size: 13px; line-height: 22px; }
.catalog-components .catalog-preview-label { padding: 14px 25px; background: #fafafa; }
.catalog-components .catalog-preview-label .ds-label { font-size: 11px; line-height: 18px; }
.catalog-assets .asset-jump { gap: 0; margin-block: 40px 26px; }
.catalog-assets .asset-jump > a { min-height: 135px; padding: 25px; }
.catalog-assets .asset-jump > a + a { border-left: 0; }
.catalog-assets .asset-jump .ds-label { font-size: 11px; line-height: 18px; }
.catalog-assets .asset-jump strong { font-size: 23px; line-height: 28px; }
.catalog-assets .asset-section-head { margin-bottom: 35px; }
.catalog-assets .asset-grid { gap: 24px; }
.catalog-assets .asset-body { padding: 29px 27px 30px; }
.catalog-assets .asset-body h3 { font-size: 26px; line-height: 30px; }
.catalog-assets .asset-preview--logo { min-height: 260px; }
.catalog-assets .asset-preview--font { padding: 30px; min-height: 335px; }
.catalog-assets .asset-filename { margin-bottom: 24px; font-size: 11px; line-height: 19px; }
.catalog-assets .asset-meta dd { font-size: 14px; line-height: 23px; }
.templates-catalog .catalog-templates { padding-block: 42px 76px; }
.templates-catalog .catalog-template + .catalog-template { margin-top: 40px; }
.templates-catalog .catalog-template-copy { padding: 38px 32px; }
.templates-catalog .catalog-template-copy h2 { font-size: 40px; line-height: 43px; }
.templates-catalog .catalog-template-copy > p:not(.catalog-label) { font-size: 15px; line-height: 25px; }
.templates-catalog .catalog-template-top { min-height: 58px; padding-inline: 27px; }
.templates-catalog .catalog-template-top .catalog-label { font-size: 11px; line-height: 18px; }

@media (max-width: 991px) {
  :is(.catalog-components, .catalog-assets, .templates-catalog) .catalog-hero { padding-block: 60px 50px; }
  :is(.catalog-components, .catalog-assets, .templates-catalog) .spm-demo { padding-block: 60px 34px; }
  :is(.catalog-components, .catalog-assets, .templates-catalog) .spm-card-head { padding-inline: 22px; }
  :is(.catalog-components, .catalog-assets, .templates-catalog) .spm-card figcaption { padding-inline: 24px; }
  .catalog-components .catalog-component-head { padding-inline: 28px; }
  .catalog-assets .asset-jump { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-assets .asset-jump > a:nth-child(3) { border-left: 1px solid var(--dealyo-line); }
  .catalog-assets .asset-jump > a:nth-child(n + 3) { border-top: 0; }
}

@media (max-width: 768px) {
  :is(.catalog-components, .catalog-assets, .templates-catalog) .catalog-hero { gap: 36px; padding-block: 50px 40px; }
  :is(.catalog-components, .catalog-assets, .templates-catalog) .catalog-hero-copy > :is(.ds-label, .catalog-label) { margin-bottom: 22px; }
  :is(.catalog-components, .catalog-assets, .templates-catalog) .catalog-hero h1 { font-size: clamp(38px, 7vw, 54px); line-height: 1.08; }
  :is(.catalog-components, .catalog-assets, .templates-catalog) .catalog-hero-copy > :is(p:not(.catalog-label), .catalog-lead) { font-size: 16px; line-height: 25px; margin-block: 22px 25px; }
  .catalog-components .catalog-actions { gap: 12px 20px; }
  .catalog-components .catalog-package { padding: 24px; gap: 14px 25px; }
  .catalog-components .catalog-package h2 { font-size: 30px; line-height: 33px; }
  .catalog-components .catalog-package dd { font-size: 16px; line-height: 24px; }
  .catalog-components .catalog-plate-note { font-size: 12px; line-height: 18px; }
  .catalog-assets .catalog-identity { grid-template-columns: 1fr 1fr; }
  .catalog-assets .catalog-identity-logo { padding-inline: 24px; min-height: 200px; }
  .catalog-assets .catalog-identity-bottom > div { min-height: 200px; padding-inline: 18px; }
  .catalog-assets .catalog-identity-bottom .ds-label { font-size: 12px; }
  .catalog-assets .catalog-identity-color > span:first-child { font-size: 14px; line-height: 20px; }
  .templates-catalog .catalog-selection > a { gap: 12px; padding: 22px 18px; }
  .templates-catalog .catalog-selection small { font-size: 16px; line-height: 24px; }
  :is(.catalog-components, .catalog-assets, .templates-catalog) .spm-demo { padding-block: 48px 30px; }
  :is(.catalog-components, .catalog-assets, .templates-catalog) .spm-demo-top { gap: 20px; }
  :is(.catalog-components, .catalog-assets, .templates-catalog) .spm-demo h2 { font-size: clamp(32px, 5.5vw, 42px); line-height: 1.1; }
  :is(.catalog-components, .catalog-assets, .templates-catalog) .spm-demo-intro { margin-bottom: 28px; line-height: 24px; }
  :is(.catalog-components, .catalog-assets, .templates-catalog) .spm-grid { grid-template-columns: minmax(0, 1fr); }
  :is(.catalog-components, .catalog-assets, .templates-catalog) .spm-card + .spm-card { border-left: 1px solid var(--dealyo-line); border-top: 0; }
  :is(.catalog-components, .catalog-assets, .templates-catalog) .spm-card-head > :is(.spm-card-index, .spm-kicker) { font-size: 12px; line-height: 18px; }
  :is(.catalog-components, .catalog-assets, .templates-catalog) .spm-scene { min-height: 350px; }
  :is(.catalog-components, .catalog-assets, .templates-catalog) .spm-card h3 { font-size: 27px; line-height: 31px; }
  :is(.catalog-components, .catalog-assets, .templates-catalog) .spm-card p { font-size: 16px; line-height: 24px; }
  :is(.catalog-components, .catalog-assets, .templates-catalog) .spm-card-link { font-size: 16px; line-height: 24px; }
  :is(.catalog-components, .catalog-assets, .templates-catalog) .spm-demo-note { font-size: 12px; line-height: 20px; }
  .catalog-assets .spma-scene { min-height: 428px; }
  .templates-catalog .tpr-scene { min-height: 490px; padding-inline: 22px; }
  .catalog-components .catalog-directory { padding-block: 46px 30px; }
  .catalog-components .catalog-section-heading { gap: 22px; }
  .catalog-components .component-nav { grid-template-columns: minmax(0, 1fr); }
  .catalog-components .catalog-nav-group + .catalog-nav-group { border-left: 1px solid var(--dealyo-line); border-top: 0; }
  .catalog-components .catalog-nav-group summary { min-height: 148px; }
  .catalog-components .catalog-nav-description { font-size: 16px; line-height: 24px; }
  .catalog-components .catalog-specimens { gap: 28px; }
  .catalog-components .catalog-component-head { padding: 28px 24px; }
  .catalog-components .catalog-component-notes { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 22px; }
  .catalog-components .component-note { font-size: 16px; line-height: 24px; }
  .catalog-components .catalog-preview-label { padding-inline: 20px; }
  .catalog-assets .asset-jump > a { min-height: 135px; padding: 23px 20px; }
  .catalog-assets .asset-jump strong { font-size: 21px; line-height: 26px; }
  .catalog-assets .asset-grid { gap: 24px; }
  .catalog-assets .asset-body { padding: 27px 23px 28px; }
  .catalog-assets .asset-meta dd { font-size: 16px; line-height: 24px; }
  .catalog-assets .asset-filename { font-size: 12px; line-height: 19px; }
  .templates-catalog .catalog-template-copy { padding: 30px 24px; }
  .templates-catalog .catalog-template-copy h2 { font-size: 35px; line-height: 38px; }
  .templates-catalog .catalog-template-copy > p:not(.catalog-label) { font-size: 16px; line-height: 25px; }
}

@media (max-width: 540px) {
  :is(.catalog-components, .catalog-assets, .templates-catalog) .catalog-hero-copy { text-align: left; }
  :is(.catalog-components, .catalog-assets, .templates-catalog) .catalog-hero h1 { font-size: clamp(35px, 9.8vw, 49px); }
  :is(.catalog-components, .catalog-assets, .templates-catalog) .catalog-hero-copy > :is(p:not(.catalog-label), .catalog-lead) { margin-inline: 0; }
  .catalog-components .catalog-actions { justify-content: flex-start; }
  .catalog-components .catalog-package { display: block; }
  .catalog-components .catalog-package h2 { margin-block: 22px; }
  .catalog-components .catalog-package dl > div:first-child { border-top: 1px solid var(--dealyo-line); }
  .catalog-components .catalog-plate-note { margin-top: 16px; }
  .catalog-assets .catalog-identity { grid-template-columns: minmax(0, 1fr); }
  .catalog-assets .catalog-identity-logo { min-height: 190px; padding: 24px 25px 32px; }
  .catalog-assets .catalog-identity-bottom { border-left: 0; border-top: 1px solid var(--dealyo-line); }
  .catalog-assets .catalog-identity-bottom > div { min-height: 155px; padding: 25px; }
  .catalog-assets .catalog-identity-color > span:first-child { font-size: 17px; }
  .templates-catalog .catalog-selection { grid-template-columns: minmax(0, 1fr); }
  .templates-catalog .catalog-selection > a { padding: 23px; }
  .templates-catalog .catalog-selection > a:last-child { border-left: 0; border-top: 1px solid var(--dealyo-line); }
  :is(.catalog-components, .catalog-assets, .templates-catalog) .spm-demo-top { justify-items: start; text-align: left; }
  :is(.catalog-components, .catalog-assets, .templates-catalog) .spm-demo-intro { text-align: left; }
  :is(.catalog-components, .catalog-assets, .templates-catalog) .spm-card-head { padding-inline: 20px; }
  :is(.catalog-components, .catalog-assets, .templates-catalog) .spm-card figcaption { padding: 26px 22px; }
  .catalog-assets .asset-jump { grid-template-columns: minmax(0, 1fr); }
  .catalog-assets .asset-jump > a { min-height: 116px; }
  .catalog-assets .asset-jump > a + a { border-left: 1px solid var(--dealyo-line); border-top: 0; }
  .catalog-assets .spma-stage { width: min(340px, calc(100% - 28px)); }
  .templates-catalog .tpr-scene { padding-inline: 15px; }
}

@media (max-width: 359px) {
  :is(.catalog-components, .catalog-assets, .templates-catalog) .catalog-hero h1 { font-size: 34px; }
  :is(.catalog-components, .catalog-assets, .templates-catalog) .spm-card-head { padding-inline: 16px; }
  :is(.catalog-components, .catalog-assets, .templates-catalog) .spm-card figcaption { padding-inline: 19px; }
  .catalog-components .catalog-component-head { padding-inline: 19px; }
  .catalog-assets .spma-paper { padding-inline: 17px; }
  .catalog-assets .spma-scene .spma-heading { font-size: 26px; line-height: 29px; }
  .templates-catalog .tpr-scene { padding-inline: 12px; }
}