/* Horzono's page. Built from scratch, not mirrored, to look like the live
 * /apps/horzono, which Adam is happiest with of all the pages.
 *
 * Type is the site's own and is not restated here: the page uses plain h1,
 * h2 and p, and the site's stylesheet sizes them exactly as it sizes them on
 * live (102.4px, 59.2px and 19.456px at 1440). What this file adds is the
 * layout and the colour, and the colour is only this page's: black and white,
 * as live is, with live's 18px radius on every picture and video in a box
 * and on the privacy card (see "pictures" below).
 *
 * The layout is Squarespace's fluid engine, reimplemented from the rules in
 * the recovered page's own style blocks rather than fitted to screenshots:
 *
 *   768 and up  24 columns inside a container of min(1500px, 100vw - 2 x 4vw),
 *               an outer column of 4vw less the gap either side, 11px gaps,
 *               and rows no shorter than 2.15% of the container.
 *   below 768   8 columns, a 6vw gutter, 11px gaps, rows no shorter than 24px.
 *
 * Rows are minmax(that, auto), so a block whose words need more room makes its
 * rows taller, exactly as on live. Each block carries its two grid-areas as
 * --d and --m, row/column/row/column with the outer column as column 1, and
 * each grid its two row counts as --rows and --rows-m (build_horzono.py).
 *
 * Section heights are Squarespace's too, from the site's stylesheet: small,
 * medium and large sections are at least 33, 66 and 100vh tall, with 3.3, 6.6
 * and 10vmax above and below their grid, and their content centred.
 *
 * Everything is scoped under .hz-page (on <body>) or .hz (on the content).
 */

.hz-page {
  --hz-ink: #fff;
  --hz-bg: #000;
  --hz-card: rgb(46, 46, 46);
  --hz-line: rgba(255, 255, 255, 0.18);
  --hz-radius: 18px;
  /* the header floats over the hero, as it does on live; horzono.js measures
     it twice, as it is (--hz-header) and with the announcement bar shown
     (--hz-header-bar), and these are its heights with the bar when the
     script does not run, which is also when the bar cannot be dismissed */
  --hz-header-bar: 126px;
  --hz-header: var(--hz-header-bar);
  color-scheme: dark;
}

@media (min-width: 768px) {
  .hz-page { --hz-header-bar: 171px; }
}

@media (min-width: 1024px) {
  .hz-page { --hz-header-bar: 154px; }
}

@media (min-width: 1440px) {
  .hz-page { --hz-header-bar: 193px; }
}

html:has(body.hz-page),
body.hz-page,
.hz-page #siteWrapper,
.hz-page #page {
  background-color: var(--hz-bg);
}

/* the header runs on the site's own black theme (build_horzono.py sets it);
   over the hero it must be see-through, as it is on live */
.hz-page .header .header-background {
  background-color: transparent !important;
}

.hz-page .header-menu .header-menu-bg {
  background-color: var(--hz-bg) !important;
}

.hz {
  color: var(--hz-ink);
}

.hz-page .hz h1,
.hz-page .hz h2,
.hz-page .hz h3,
.hz-page .hz p,
.hz-page .hz li {
  color: var(--hz-ink);
}

.hz-page .hz a {
  color: inherit;
}

/* ------------------------------------------------------------------ sections */

/* No overflow clipping here: the zoomed backgrounds are clipped by .hz-bg
   itself. */
.hz-sec {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.hz-sec--small { min-height: 33vh; }
.hz-sec--medium { min-height: 66vh; }
.hz-sec--large { min-height: 100vh; }

.hz-in {
  position: relative;
  z-index: 1;
  width: 100%;
}

.hz-sec--small > .hz-in { padding-block: 3.3vmax; }
.hz-sec--medium > .hz-in { padding-block: 6.6vmax; }
.hz-sec--large > .hz-in { padding-block: 10vmax; }

/* The hero is one window tall whenever the window can hold it: the header,
   the grid, and the site's small section padding (3.3vmax) above and below
   the grid at the least. The content is then centred in the window below
   the header. A window too short for that grows the hero to fit instead, as
   every section does. Live's large section kept 10vmax above and below, so
   at 1440x900 its hero was 993px and the badge sat on the fold; this is a
   departure Adam asked for (2026-09-24).
   svh, the height with the browser's bars showing, so that the hero does
   not change height as a phone's bars come and go; vh where svh is not
   known. */
.hz-sec.hz-hero {
  padding-top: var(--hz-header);
  min-height: 100vh;
  min-height: 100svh;
}

.hz-sec.hz-hero > .hz-in {
  padding-block: 3.3vmax;
}

/* a section's picture behind everything, cropped like live's background */
.hz-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hz-bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(var(--zoom, 1));
}

.hz-shade {
  position: absolute;
  inset: 0;
  background: #000;
}

/* ------------------------------------------------------------------ the grid */

.hz-grid {
  --gap: 11px;
  --gutter: calc(6vw - var(--gap));
  --cell: calc((1500px - var(--gap) * 7) / 8);
  display: grid;
  grid-template-columns:
    minmax(var(--gutter), 1fr) repeat(8, minmax(0, var(--cell))) minmax(var(--gutter), 1fr);
  grid-template-rows: repeat(var(--rows-m), minmax(24px, auto));
  gap: var(--gap);
  overflow-x: clip;
}

.hz-grid--tight {
  --gap: 0px;
}

@media (min-width: 768px) {
  .hz-grid {
    --gutter: calc(4vw - var(--gap));
    --cell: calc((1500px - var(--gap) * 23) / 24);
    --container: min(1500px, calc(100vw - 8vw));
    grid-template-columns:
      minmax(var(--gutter), 1fr) repeat(24, minmax(0, var(--cell))) minmax(var(--gutter), 1fr);
    grid-template-rows: repeat(var(--rows), minmax(calc(var(--container) * 0.0215), auto));
  }
}

.hz-b {
  grid-area: var(--m);
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

@media (min-width: 768px) {
  .hz-b { grid-area: var(--d); }
}

.hz-v-start { justify-content: flex-start; }
.hz-v-center { justify-content: center; }

.hz-t > :first-child { margin-top: 0; }
.hz-t > :last-child { margin-bottom: 0; }

.hz-center { text-align: center; }

/* ------------------------------------------------------------------ pictures */

/* Every picture and video in a box has the same rounded corners: live's
   18px, a fixed length at every width, as live's intro pictures had (their
   .fluid-image-container, measured at 1440, 1024 and 390). That is the
   intro pictures, the feature rows' slots, stills and videos alike, and the
   gallery squares. The box clips, so the corners are the box's, never a
   device's: a picture's device sits inside it or runs off its bottom edge.
   clip-path as well as overflow, because Safari does not always clip a
   <video> (or its poster) to a rounded overflow box; the picture itself is
   rounded too, for the same reason. What is not a picture in a box keeps
   its own shape: the full-bleed bands' backgrounds (the hero, the iPad and
   Duo band, iCloud, the closing band) are sections and stay square, and so
   are the devices drawn on them; the App Store badge and the icon are their
   own shapes. */
.hz-b--cover,
.hz-media,
.hz-square {
  overflow: hidden;
  border-radius: var(--hz-radius);
  clip-path: inset(0 round var(--hz-radius));
}

.hz-b--cover > img,
.hz-media > img,
.hz-media > video,
.hz-square > img {
  border-radius: inherit;
}

/* a picture filling its block, like live's "cover" image blocks */
.hz-b--cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* a picture drawn whole inside its block, like live's "contain" blocks: the
   block's size comes from the grid alone, and the picture fits inside it */
.hz-b--fit {
  container-type: size;
  align-items: center;
}

.hz-b--fit > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* The App Store badge is one size at every width: the height of the site's
   primary button, 59px, and so 177px wide (Apple's badge is 3:1; the 360x120
   file is its 2x). On live it filled its block, which made it 30px tall at
   768 and 330px wide in a 760px window. It stays centred under the title.
   At 768 and up the hero's badge hangs from its block's top edge, so it sits
   as far under the subtitle as live's did (80, 40 and 30px at 1440, 1024 and
   768) and grows downward; below 768 its block is 144px tall and the badge
   keeps live's centre in it. The closing band's badge is centred in its
   block at every width, as live's was. */
.hz-badge {
  display: block;
  flex: none;
  width: 177px;
  height: 59px;
}

@media (min-width: 768px) {
  .hz-b--badge-top { justify-content: flex-start; }
}

.hz-badge img {
  display: block;
  width: 100%;
  height: 100%;
}

/* ------------------------------------------------------------------ features */

/* a feature row's 3:4 slot, rounded like every picture (above) */
.hz-media {
  width: 100%;
  aspect-ratio: 3 / 4;
  background: #111;
}

.hz-media img,
.hz-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A feature row's words, heading and paragraphs as one block over the
   picture's rows, both centred in them, so the words' centre is the
   picture's (build_horzono.py); Privacy's words on its card the same way. Between the heading and the paragraphs, the
   page's heading-to-paragraph step: a row and its two gaps, as in the iPad
   and Duo band. Below 768 the pair steps aside, its two blocks take the
   areas live gave them, and the picture hangs from its block's top as on
   live. */
@media (min-width: 768px) {
  .hz-b--words {
    gap: calc(var(--container) * 0.0215 + 2 * var(--gap));
  }
  .hz-feature .hz-b--media {
    justify-content: center;
  }
}

@media (max-width: 767px) {
  .hz-b--words {
    display: contents;
  }
}

/* "Also in Horzono 3": one line per thing, three columns wide */
.hz-page .hz ul.hz-also {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 2rem;
}

@media (min-width: 768px) {
  .hz-page .hz ul.hz-also { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .hz-page .hz ul.hz-also { grid-template-columns: repeat(3, 1fr); }
}

.hz-page .hz ul.hz-also li {
  margin: 0;
  padding: 0.85rem 0;
  border-top: 1px solid var(--hz-line);
  line-height: var(--body-font-line-height, 1.6);
}

/* a hyphenated word kept on one line ("one-time" split at its hyphen at 390) */
.hz-page .hz .hz-nowrap {
  white-space: nowrap;
}

.hz-plus {
  display: inline-block;
  margin-left: 0.25em;
  padding: 0 0.4em;
  border: 1px solid currentColor;
  border-radius: 5px;
  font-size: 0.75em;
  line-height: 1.5;
  vertical-align: 0.1em;
}

/* A shortcut in running text, "⌃⌥J", as keycaps: one small key per <kbd>,
   the site's 5px radius, a faint fill and a 1px shade under each, no "+".
   The glyphs are in the paragraph's own face (the site's stylesheet sets kbd
   in the browser's monospace otherwise); IBM Plex Mono has no ⌃ or ⌥, so the
   system supplies those two. Every key is at least as wide as it is tall, so
   the three come out one width. The key sits on the text's baseline and is
   shorter than the line, so the paragraph's line spacing does not move. */
.hz-page .hz kbd.hz-keys {
  font: inherit;
  white-space: nowrap;
}

.hz-page .hz kbd.hz-keys > kbd {
  display: inline-block;
  box-sizing: border-box;
  min-width: 1.6em;
  margin-left: 0.2em;
  padding: 0 0.3em;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.24);
  font-family: inherit;
  font-size: 0.8em;
  font-weight: inherit;
  line-height: 1.5;
  text-align: center;
}

.hz-page .hz kbd.hz-keys > kbd:first-child {
  margin-left: 0;
}

/* what a screen reader says in place of the glyphs, and never drawn (the
   site's .sr-only is scoped to product lists, so this page has its own) */
.hz-page .hz .hz-spoken {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------------------------ iCloud */

/* The words' column, eight of the grid's columns wide, as a length: the
   width both bands give their words, whose blocks span the whole band. */
.hz-page {
  --hz-words: calc((min(1500px, 92vw) - 253px) / 24 * 8 + 77px);
}

/* From 768 up the words sit under the iPhone and are centred on it (Adam,
   2026-09-24), lines still ranged left. The iPhone is in the picture, which
   is drawn like a cover background, 1.1x about its focal point, so its
   centre in the band is 50.0041% of the band's width plus 1.1 times the
   cover scale times its distance from the picture's focal column: the scale
   is the band's width over 2500 or, where the band is narrower than the
   picture's shape, its height over 1625, and that height is taken to be the
   section's 66vh. That is exact except where the band is taller because
   its words need it and still narrower than the picture, which happens only
   from 768 to about 880 in a short window; there the words sit up to 5% of
   the width left of centre. --hz-phone-x is the iPhone's centre in picture
   px, checked by compose_horzono.py. Where centring would put the words
   past the page's right margin (4vw), they stop at it. */
@media (min-width: 768px) {
  .hz-icloud {
    --hz-phone-x: 1850;
    container-type: inline-size;
  }
  .hz-icloud .hz-t {
    width: var(--hz-words);
    margin-left: min(
      calc(100cqw * 0.500041 + 1.1 * max(100cqw / 2500, 66vh / 1625)
        * (var(--hz-phone-x) - 1250.1025) - var(--hz-words) / 2),
      calc(96cqw - var(--hz-words)));
  }
}

/* Below 768 live kept the picture behind the section and squeezed the words
   into a 166px column beside the Mac. Here the picture comes out from behind
   and sits above the words at the full width instead: not all of it, which
   would draw the popover 52px wide, but the cut round the popover and the
   iPhone's list that compose_horzono.py measures and checks against the
   --hz-icloud-cut below (x0 y0 x1 y1 of the 2500x1625 picture). */
@media (max-width: 767px) {
  .hz-icloud {
    --hz-icloud-cut: 570 0 2204 1266;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
  }
  .hz-icloud .hz-bg {
    position: relative;
    inset: auto;
    aspect-ratio: 1634 / 1266;
  }
  .hz-icloud .hz-bg img {
    position: absolute;
    max-width: none;
    width: calc(100% * 2500 / 1634);
    height: auto;
    left: calc(-100% * 570 / 1634);
    top: 0;
    transform: none;
  }
}

/* ------------------------------------------------------------------ iPad and Duo */

/* "Made for iPad and iPhone Duo" is a band the width of the window like the
   iCloud one: devices.jpg, the iPad alone, behind it and running off its
   left edge; the open iPhone Duo (duo.jpg) on the right, the grid's last
   row, so the band ends on it and its foot runs off; and above it the words,
   the heading level with the iPad's top, their lines ranged left.

   From 768 up the words' block stands in the middle of the space between
   the iPad's right edge and the band's (Adam, 2026-09-24: as far from the
   iPad as from the edge of the screen), and the Duo is centred on the words
   (variant A), so it moves with them. Both blocks run to the band's right
   edge, and each is pushed off it by half that space less half its own
   width. --hz-ipad-right is the iPad's right edge in picture px; the space
   right of it is 52.8% of the band and the Duo 36.9%, so the Duo clears
   the iPad at every width.

   From 768 up the picture is drawn at the band's width from its top-left
   corner and never scaled past that, the band is at least the picture's
   height (and taller where the words and the Duo need it), and the Duo is drawn at the same scale (100cqw is the band's
   width), so both devices keep their real relative size at every width.
   The iPad stands 50 picture px above the middle of the picture's margins,
   and the heading with it (Adam, 2026-09-24), so the band keeps its height
   and the Duo its place on the band's bottom edge: the row between the
   words and the Duo takes up whatever height the iPad adds, and is at least
   the heading-to-paragraph step plus that lift. Below 768 it stacks: a cut
   round the iPad (x0 y0 x1 y1 of the picture; it starts above the picture,
   where the page's black continues it, so the iPad keeps the same margin
   above and below), the words, then the Duo at the column's width.
   compose_horzono.py writes both pictures and checks every number here
   against this file. */
.hz-b--duo {
  justify-content: flex-end;
}

.hz-b--duo > img {
  display: block;
  align-self: flex-end;
  max-width: none;
  width: 100%;
  height: auto;
}

@media (min-width: 768px) {
  .hz-devices {
    --hz-ipad-right: 1358.2;
    min-height: auto;
    align-items: stretch;
    container-type: inline-size;
  }
  /* at least the picture's height: a strut, because aspect-ratio would hold
     the band to it even where the words and the Duo need more */
  .hz-devices::before {
    content: "";
    flex: none;
    width: 0;
    padding-top: calc(100% * 1370 / 2880);
  }
  .hz-devices > .hz-in {
    display: flex;
    flex-direction: column;
    padding-top: calc(100% * 60 / 2880);
    padding-bottom: 0;
  }
  .hz-devices .hz-grid {
    flex: 1 0 auto;
    grid-template-rows:
      auto calc(var(--container) * 0.0215) auto
      minmax(calc(var(--container) * 0.0215 + 100cqw * 50 / 2880), 1fr) auto;
  }
  .hz-devices .hz-bg img {
    height: auto;
  }
  .hz-b--duo > img {
    width: calc(100cqw * 1063 / 2880);
    margin-right: calc((100cqw * (2880 - var(--hz-ipad-right)) / 2880
      - 100cqw * 1063 / 2880) / 2);
  }
  .hz-devices .hz-t {
    width: var(--hz-words);
    margin-left: auto;
    margin-right: calc((100cqw * (2880 - var(--hz-ipad-right)) / 2880
      - var(--hz-words)) / 2);
  }
}

@media (max-width: 767px) {
  .hz-devices {
    --hz-ipad-cut: 0 -50 1498 1320;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
  }
  .hz-devices > .hz-in {
    padding-bottom: 0;
  }
  .hz-devices .hz-bg {
    position: relative;
    inset: auto;
    aspect-ratio: 1498 / 1370;
  }
  .hz-devices .hz-bg img {
    position: absolute;
    max-width: none;
    width: calc(100% * 2880 / 1498);
    height: auto;
    left: 0;
    top: calc(100% * 50 / 1370);
    transform: none;
  }
}

/* ------------------------------------------------------------------ privacy */

/* More air than live's medium section, at Adam's request: the site's one
   large section padding, which is the header's height with the announcement
   bar shown (193.016px at 1440, the value the runtime froze into every first
   section), so it follows the header at every width as horzono.js measures
   it, and stays where it is when the bar is dismissed. */
.hz-privacy > .hz-in { padding-block: var(--hz-header-bar); }

.hz-b--card {
  background: var(--hz-card);
  border-radius: var(--hz-radius);
}

.hz-check {
  display: block;
  width: min(100cqw, 100cqh);
  height: min(100cqw, 100cqh);
  color: rgb(0, 89, 255);
}

/* ------------------------------------------------------------------ gallery */

/* Squarespace's strips gallery at gutter 100 and row height 500, with the
   rules read out of its packer (gallery-strips.<hash>.js) when the mirror
   still had this page: the gutter is quartered per breakpoint (576, 768,
   992) and floored at 25, and two squares share a row from 869px, where the
   wrapper rounds to 800 and the row test is 1000 > 1000. The padding is the
   site gutter, 4vw, or 6vw below 768. */
.hz-gallery {
  padding: 6vw;
}

@media (min-width: 768px) {
  .hz-gallery { padding: 4vw; }
}

.hz-strips {
  display: flex;
  flex-direction: column;
  gap: 25px;
  max-width: 1500px;
  margin-inline: auto;
}

.hz-square {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  margin: 0;
  aspect-ratio: 1;
}

.hz-square img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 577px) {
  .hz-strips { gap: 50px; }
}

@media (min-width: 769px) {
  .hz-strips { gap: 75px; }
}

@media (min-width: 869px) {
  .hz-strips {
    flex-direction: row;
    align-items: flex-start;
  }
  .hz-square {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }
}

@media (min-width: 993px) {
  .hz-strips { gap: 100px; }
}

/* ------------------------------------------------------------------ footer */

/* The closing band and the footer are one section: the wallpaper lies
   behind both (build_horzono.py puts it on the wrapper), and the footer's
   wordmark and icons are the white they are everywhere on this page. White
   on the wallpaper under live's 11% shade measured 2.8:1 at worst at 1440,
   so the shade stays 11% over the badge and deepens to 30% at the foot,
   which puts the wordmark and every icon at 3.9:1 or more from 768 to 1920
   (the lightest 5% of the wallpaper under each, from the file, in P3).
   Below 768 the band has always shown the wallpaper's whole height, which
   would put the footer on its bright green (1.7:1); there it is drawn 1.5x
   from its top edge instead, which leaves the sky, the red and the dark
   green, the footer on the green at 7:1 and the badge on the red. */
.hz-closing {
  position: relative;
}

.hz-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgb(0 0 0 / 0.11) 50%, rgb(0 0 0 / 0.3));
}

@media (max-width: 767px) {
  .hz-closing .hz-bg img {
    transform: scale(1.5);
    transform-origin: 51.6% 0;
  }
}

.hz-closing > .hz-foot {
  position: relative;
  z-index: 1;
}

/* The wordmark at the size live sets it, which is the site's own scale at a
   size value of 2, and the three icons from the shell's sprite. */
.hz-foot .hz-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 199px;
  padding-inline: 6vw;
}

@media (min-width: 768px) {
  .hz-foot .hz-wrap {
    min-height: calc(min(1500px, 92vw) * 0.0645 + 22px);
    padding-inline: 4vw;
  }
}

.hz-page .hz a.hz-foot-mark {
  font-family: var(--site-title-font-font-family, "Lily Script One"), cursive;
  font-size: calc(0.012 * min(100vh, 900px) + 1rem);
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--hz-ink);
  text-decoration: none;
}

@media (min-width: 768px), (orientation: landscape) {
  .hz-page .hz a.hz-foot-mark {
    font-size: min(calc(1.2vw + 1rem), max(calc(0.012 * 1440px + 1rem), 2rem));
  }
}

.hz-social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 14px;
}

.hz-page .hz .hz-social li {
  margin: 0;
  padding: 0;
  border: 0;
}

/* The icons are a light grey at rest and white under the pointer and on
   keyboard focus, as on every footer of the site (2026-09-24, Adam). Here
   they lie on the wallpaper, whose lightest pixels under them (the lightest
   5% in each icon's box, at 1920, 1440, 1024, 768 and 390) leave little
   room below white: #e8e8e8 keeps 3.1:1 at the worst of them, at 1024,
   where the darker greys of the other footers would not keep 3:1. */
.hz-page .hz .hz-social a {
  display: block;
  width: 24px;
  height: 24px;
  color: #e8e8e8;
  text-decoration: none;
  transition: color 0.15s ease;
}

.hz-page .hz .hz-social a:hover,
.hz-page .hz .hz-social a:focus-visible {
  color: var(--hz-ink);
}

@media (prefers-reduced-motion: reduce) {
  .hz-page .hz .hz-social a {
    transition: none;
  }
}

.hz-social svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* ------------------------------------------------------------------ hero */

/* The name never breaks. Its block is six columns of the gapless hero grid,
   176px at 768, and Barlow sets "Horzono" wider than Adobe's DIN did on
   live, which fitted. Rather than break the word, it runs past the block,
   evenly on both sides, which a centred flex item does. */
.hz-hero .hz-t:has(> h1) {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hz-page .hz-hero h1 {
  width: max-content;
  overflow-wrap: normal;
  word-break: normal;
}