/* generated by tools/articles/sync.mjs from content/articles/the-quiet-power-of-constraints/: this page's windows (lib/windows.mjs), the video poster's mask and its hoisted style="" rules: do not edit */
/* xa-hero: "The quiet power of constraints" (notch-left) */
#xa-hero .xa-window { --xa-v: phone; aspect-ratio: 8 / 10; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 1000' preserveAspectRatio='none'%3E%3Cpath d='M0 41.37C0 26.89 0 19.65 2.82 14.12C5.3 9.25 9.25 5.3 14.12 2.82C19.65 0 26.89 0 41.37 0L758.63 0C773.11 0 780.35 0 785.88 2.82C790.75 5.3 794.7 9.25 797.18 14.12C800 19.65 800 26.89 800 41.37L800 958.63C800 973.11 800 980.35 797.18 985.88C794.7 990.75 790.75 994.7 785.88 997.18C780.35 1000 773.11 1000 758.63 1000L714.34 1000C678.64 1000 649.7 971.06 649.7 935.35L649.7 764.44C649.7 728.74 620.75 699.8 585.05 699.8L64.65 699.8C28.94 699.8 0 670.85 0 635.15Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 1000' preserveAspectRatio='none'%3E%3Cpath d='M0 41.37C0 26.89 0 19.65 2.82 14.12C5.3 9.25 9.25 5.3 14.12 2.82C19.65 0 26.89 0 41.37 0L758.63 0C773.11 0 780.35 0 785.88 2.82C790.75 5.3 794.7 9.25 797.18 14.12C800 19.65 800 26.89 800 41.37L800 958.63C800 973.11 800 980.35 797.18 985.88C794.7 990.75 790.75 994.7 785.88 997.18C780.35 1000 773.11 1000 758.63 1000L714.34 1000C678.64 1000 649.7 971.06 649.7 935.35L649.7 764.44C649.7 728.74 620.75 699.8 585.05 699.8L64.65 699.8C28.94 699.8 0 670.85 0 635.15Z'/%3E%3C/svg%3E"); }
#xa-hero .xa-win__title { --m: calc(100cqi / 8); --fs: min(max(calc(var(--m) * 0.787), 1.672rem), calc(var(--m) * 1.027)); top: calc(var(--m) * 9.5 - var(--fs) * 1.703); left: 0; right: auto; text-align: left; }
#xa-hero .xa-win__title br.xa-br { display: none; } #xa-hero .xa-win__title br.xa-br--phone { display: inline; }
#xa-hero .xa-win__caption { display: none; }
#xa-hero .xa-window img { object-position: 75.1% 50.0%; }
@container xa-win (min-width: 620px) {
  #xa-hero .xa-window { --xa-v: mid; aspect-ratio: 26 / 12; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2600 1200' preserveAspectRatio='none'%3E%3Cpath d='M0 41.37C0 26.89 0 19.65 2.82 14.12C5.3 9.25 9.25 5.3 14.12 2.82C19.65 0 26.89 0 41.37 0L2558.63 0C2573.11 0 2580.35 0 2585.88 2.82C2590.75 5.3 2594.7 9.25 2597.18 14.12C2600 19.65 2600 26.89 2600 41.37L2600 1158.63C2600 1173.11 2600 1180.35 2597.18 1185.88C2594.7 1190.75 2590.75 1194.7 2585.88 1197.18C2580.35 1200 2573.11 1200 2558.63 1200L1615.06 1200C1579.36 1200 1550.41 1171.06 1550.41 1135.35L1550.41 764.44C1550.41 728.74 1521.47 699.8 1485.77 699.8L64.65 699.8C28.94 699.8 0 670.85 0 635.15Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2600 1200' preserveAspectRatio='none'%3E%3Cpath d='M0 41.37C0 26.89 0 19.65 2.82 14.12C5.3 9.25 9.25 5.3 14.12 2.82C19.65 0 26.89 0 41.37 0L2558.63 0C2573.11 0 2580.35 0 2585.88 2.82C2590.75 5.3 2594.7 9.25 2597.18 14.12C2600 19.65 2600 26.89 2600 41.37L2600 1158.63C2600 1173.11 2600 1180.35 2597.18 1185.88C2594.7 1190.75 2590.75 1194.7 2585.88 1197.18C2580.35 1200 2573.11 1200 2558.63 1200L1615.06 1200C1579.36 1200 1550.41 1171.06 1550.41 1135.35L1550.41 764.44C1550.41 728.74 1521.47 699.8 1485.77 699.8L64.65 699.8C28.94 699.8 0 670.85 0 635.15Z'/%3E%3C/svg%3E"); }
  #xa-hero .xa-win__title { --m: calc(100cqi / 26); --fs: min(max(calc(var(--m) * 1.962), 2.5rem), calc(var(--m) * 3.493)); top: calc(var(--m) * 11.38 - var(--fs) * 1.703); left: 0; right: auto; text-align: left; }
  #xa-hero .xa-win__title br.xa-br { display: none; } #xa-hero .xa-win__title br.xa-br--mid { display: inline; }
  #xa-hero .xa-win__caption { display: none; }
  #xa-hero .xa-window img { object-position: 50.0% 100.0%; }
}
@container xa-win (min-width: 1100px) {
  #xa-hero .xa-window { --xa-v: wide; aspect-ratio: 26 / 12; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2600 1200' preserveAspectRatio='none'%3E%3Cpath d='M0 41.37C0 26.89 0 19.65 2.82 14.12C5.3 9.25 9.25 5.3 14.12 2.82C19.65 0 26.89 0 41.37 0L2558.63 0C2573.11 0 2580.35 0 2585.88 2.82C2590.75 5.3 2594.7 9.25 2597.18 14.12C2600 19.65 2600 26.89 2600 41.37L2600 1158.63C2600 1173.11 2600 1180.35 2597.18 1185.88C2594.7 1190.75 2590.75 1194.7 2585.88 1197.18C2580.35 1200 2573.11 1200 2558.63 1200L2215.06 1200C2179.36 1200 2150.41 1171.06 2150.41 1135.35L2150.41 964.85C2150.41 929.15 2121.47 900.2 2085.77 900.2L1615.06 900.2C1579.36 900.2 1550.41 871.26 1550.41 835.56L1550.41 764.44C1550.41 728.74 1521.47 699.8 1485.77 699.8L64.65 699.8C28.94 699.8 0 670.85 0 635.15Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2600 1200' preserveAspectRatio='none'%3E%3Cpath d='M0 41.37C0 26.89 0 19.65 2.82 14.12C5.3 9.25 9.25 5.3 14.12 2.82C19.65 0 26.89 0 41.37 0L2558.63 0C2573.11 0 2580.35 0 2585.88 2.82C2590.75 5.3 2594.7 9.25 2597.18 14.12C2600 19.65 2600 26.89 2600 41.37L2600 1158.63C2600 1173.11 2600 1180.35 2597.18 1185.88C2594.7 1190.75 2590.75 1194.7 2585.88 1197.18C2580.35 1200 2573.11 1200 2558.63 1200L2215.06 1200C2179.36 1200 2150.41 1171.06 2150.41 1135.35L2150.41 964.85C2150.41 929.15 2121.47 900.2 2085.77 900.2L1615.06 900.2C1579.36 900.2 1550.41 871.26 1550.41 835.56L1550.41 764.44C1550.41 728.74 1521.47 699.8 1485.77 699.8L64.65 699.8C28.94 699.8 0 670.85 0 635.15Z'/%3E%3C/svg%3E"); }
  #xa-hero .xa-win__title { --m: calc(100cqi / 26); --fs: min(max(calc(var(--m) * 1.962), 2.5rem), calc(var(--m) * 3.493)); top: calc(var(--m) * 11.38 - var(--fs) * 1.703); left: 0; right: auto; text-align: left; }
  #xa-hero .xa-win__title br.xa-br { display: none; } #xa-hero .xa-win__title br.xa-br--wide { display: inline; }
  #xa-hero .xa-win__caption { display: block; --m: calc(100cqi / 26); position: absolute; left: calc(var(--m) * 16.25); top: calc(var(--m) * 9.75); width: calc(var(--m) * 4.5); margin: 0; }
  #xa-hero .xa-window img { object-position: 50.0% 100.0%; }
}
.xa-head--hero .xa-hero__after { display: block; }
@container xa-hf (min-width: 620px) {
  .xa-head--hero .xa-hero__after { display: block; }
}
@container xa-hf (min-width: 1100px) {
  .xa-head--hero .xa-hero__after { display: none; }
}