/* P35b: ICS join page, section CHIA SE (#jn-story). Built from Figma 471:3951 (1440 frame).
   Desktop/tablet (>=992): composition in container units of #jn-story (cqw = 1% of section width),
   so the decor scales with the section. Phone/tablet-portrait (<=991): text full width, card 87.5%,
   decor attached to heading block and card corners with clamp() sizes.
   Specificity: legacy rule `html body #jn-story > [id^="jn-deco-"]` is !important; decor overrides use
   `html body #jn-story > #id` (two ids + element chain) and !important. Card (#jn-form) overrides use
   `html body #jn-story #jn-form#jn-form#jn-form#jn-form` + !important because the legacy
   `html body #jn-story #jn-form#jn-form#jn-form { width: min(44rem,87.5%) !important }` rule sets width at all widths. */
#jn-story { container-type: inline-size; position: relative; }
@media (min-width: 992px) {
  #jn-story { padding-top: 6rem; }
  #jn-story #jn-story-in { text-align: center; position: relative; z-index: 1; }
  #jn-story #jn-story-h { text-align: center; }
  #jn-story #jn-story-p1,
  #jn-story #jn-story-p2 { max-width: min(44.45cqw, 40rem); margin-inline: auto; text-align: center; }
  html body #jn-story #jn-form#jn-form#jn-form#jn-form { margin: 3.5rem auto 0 !important; position: relative; z-index: var(--z-form, 3); width: min(max(49cqw, 36rem), 44.1rem) !important; max-width: 100% !important; }
  html body #jn-story > #jn-deco-sig,
  html body #jn-story > #jn-deco-mail,
  html body #jn-story > #jn-deco-collab,
  html body #jn-story > #jn-deco-i1,
  html body #jn-story > #jn-deco-i2 { position: absolute !important; display: block !important; inset: auto !important; margin: 0 !important; pointer-events: none !important; z-index: var(--z-deco, 1); max-width: none; height: auto !important; }
  html body #jn-story > #jn-deco-sig    { left: 12.5cqw !important;  top: 22.2cqw !important;  width: 10.4cqw !important; }
  html body #jn-story > #jn-deco-mail   { left: 82.3cqw !important;  top: 44.4cqw !important;  width: 11.5cqw !important; }
  html body #jn-story > #jn-deco-collab { left: 6.25cqw !important;  top: 65.8cqw !important;  width: 9.2cqw !important; }
  html body #jn-story > #jn-deco-i1     { left: 23.96cqw !important; top: 56.6cqw !important;  width: 4.9cqw !important; }
  html body #jn-story > #jn-deco-i2     { left: 72.6cqw !important;  top: 26.2cqw !important;  width: 4.9cqw !important; }
  html body #jn-story > #jn-deco-i1, html body #jn-story > #jn-deco-i2 { z-index: var(--z-deco, 1) !important; }
}
@media (max-width: 991px) {
  #jn-story { padding-top: 4rem; padding-bottom: 4rem; }
  #jn-story #jn-story-in { text-align: center; position: relative; z-index: 1; }
  #jn-story #jn-story-h { text-align: center; }
  #jn-story #jn-story-p1,
  #jn-story #jn-story-p2 { width: 100%; max-width: 40rem; margin-inline: auto; text-align: center; }
  html body #jn-story #jn-form#jn-form#jn-form#jn-form { margin: 2.5rem auto 0 !important; position: relative; z-index: var(--z-form, 3); width: 87.5% !important; max-width: 44rem !important; }
  html body #jn-story > #jn-deco-sig,
  html body #jn-story > #jn-deco-mail,
  html body #jn-story > #jn-deco-collab,
  html body #jn-story > #jn-deco-i1,
  html body #jn-story > #jn-deco-i2 { position: absolute !important; display: block !important; inset: auto !important; margin: 0 !important; pointer-events: none !important; z-index: var(--z-deco, 1); max-width: none; height: auto !important; }
  html body #jn-story > #jn-deco-sig    { left: max(20px, 4cqw) !important; top: 3cqw !important;  width: clamp(64px, 12cqw, 110px) !important; }
  html body #jn-story > #jn-deco-mail   { right: 20px !important; top: 150cqw !important; width: clamp(64px, 10cqw, 96px) !important; }
  html body #jn-story > #jn-deco-collab { left: 20px !important;  top: 158cqw !important; width: clamp(56px, 8cqw, 90px) !important; }
  html body #jn-story > #jn-deco-i1     { left: max(20px, 2cqw) !important;  top: 56cqw !important;  width: clamp(36px, 5cqw, 48px) !important; }
  html body #jn-story > #jn-deco-i2     { right: 20px !important; top: 47cqw !important;  width: clamp(40px, 6cqw, 56px) !important; }
  html body #jn-story > #jn-deco-i1, html body #jn-story > #jn-deco-i2, html body #jn-story > #jn-deco-mail, html body #jn-story > #jn-deco-collab { z-index: var(--z-deco, 1) !important; }
}
@media (max-width: 599px) {
  html body #jn-story > #jn-deco-collab { display: none !important; }
  html body #jn-story > #jn-deco-sig    { top: 2cqw !important; width: clamp(56px, 16cqw, 80px) !important; }
  html body #jn-story > #jn-deco-mail   { top: 348cqw !important; right: max(20px, 4cqw) !important; width: clamp(56px, 16cqw, 72px) !important; }
  html body #jn-story > #jn-deco-i1     { left: max(16px, 1.5cqw) !important; top: 150cqw !important; width: clamp(24px, 7cqw, 32px) !important; }
  html body #jn-story > #jn-deco-i2     { right: max(20px, 4cqw) !important; top: 109cqw !important; width: clamp(36px, 10cqw, 48px) !important; }
}