/*
 * Mosaic: a page laid out as a mosaic of rounded tiles, like the product page of a good app company. This file holds the
 * frame (the floating header tile, the phone menu, the footer of tiles, the announcement, breadcrumbs, the page not
 * found), the three blocks the theme draws itself (the bento opening, the article, the divider) and the way each kind of
 * kit section is laid out as a cluster of tiles. The look of the kit's parts inside the tiles is in kit-theme.css.
 *
 * Sections are composed from the marks includes/tiles.php writes on each block: data-block="<type>", and
 * data-mosaic="bento" on the blocks whose items form a bento grid (a big tile beside small ones, sized by how many items
 * there are). A module's section (its type starts with x_) keeps its module's own arrangement; it only wears the tiles.
 *
 * Colours come only from the palette's twelve tokens (palettes/*.css, or a website's own colours): --background,
 * --surface, --surface-alt, --primary, --primary-alt, --accent, --accent-ink, --on-accent, --on-primary,
 * --text-primary, --text-secondary, --border. A text colour is only ever set on a fill its colour contract keeps
 * readable (cms/cms/core/data/theme-colour-tokens.json): text-primary, text-secondary and accent-ink on background,
 * surface and surface-alt; on-primary on primary and primary-alt; on-accent on accent. theme-colour-pairs.test.mjs
 * reads every rule here that sets both a background and a colour and fails for any other pair. The soft tints of the
 * tiles are the surface with a little of the accent mixed in (--mosaic-wash) and surface-alt; texts on them keep the
 * page's text colours, and the browser check (verify-theme-readability.mjs) measures them. A dark palette is just other
 * values for the same tokens: nothing here asks whether the page is dark.
 *
 * Type comes from the layout: --font-heading, --font-body, --mosaic-heading-weight and --mosaic-body-strong (the
 * heaviest weights the font palette loads). Never write a font-weight number other than 400 here.
 */

/* ------------------------------------------------------------------ Tokens */

/* :where(:root) has no weight: the layout's inline values, the palette and a website's own colours always win over these
   defaults, wherever this file is linked. A plain :root rule here would override them (Loom drew every website in its
   fallback colours that way until 4.x). */
:where(:root) {
  --mosaic-width: 76rem;
  --mosaic-gutter: clamp(0.75rem, 2.6vw, 2rem);
  --mosaic-gap: clamp(0.625rem, 0.45rem + 0.6vw, 1rem);
  --mosaic-bar: 4rem;
  --mosaic-radius: 1.5rem;
  --mosaic-radius-small: 0.875rem;
  --mosaic-pad: clamp(1.25rem, 0.85rem + 1.6vw, 2.5rem);
  --mosaic-heading-weight: 800;
  --mosaic-body-strong: 600;
  --mosaic-speed: 180ms;
  --mosaic-line: color-mix(in srgb, var(--text-primary, #17161f) 8%, transparent);
  --mosaic-soft: color-mix(in srgb, var(--text-primary, #17161f) 7%, transparent);
  --mosaic-wash: color-mix(in srgb, var(--accent, #6246ea) 12%, var(--surface, #ffffff));
  --mosaic-mist: var(--surface-alt, #f7eee4);
  --mosaic-lift: 0 18px 40px -22px color-mix(in srgb, var(--text-primary, #17161f) 45%, transparent);
}

/* ------------------------------------------------------------------ Base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-padding-top: calc(var(--mosaic-head, 5rem) + 0.75rem);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--background, #f2f2ee);
  color: var(--text-primary, #17161f);
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img,
video {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--accent-ink, #5133d8);
  outline-offset: 3px;
}

.mosaic-main {
  display: block;
  min-height: 40vh;
}

.mosaic-skip-link {
  position: absolute;
  top: -5rem;
  left: 1rem;
  z-index: 100;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  background: var(--primary, #17161f);
  color: var(--on-primary, #ffffff);
  font-weight: var(--mosaic-body-strong);
  text-decoration: none;
}

.mosaic-skip-link:focus {
  top: 1rem;
}

.mosaic-icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

/* ------------------------------------------------------------------ Buttons */

/* One shape for every button: a pill. kit-theme.css gives the kit's buttons the same, and the line of this theme in
   resilience.css (--chrome-button-radius) gives it to the cookie notice and the phone action bar: theme-chrome.test.mjs
   holds the three together. A label may take two lines; it never runs out of the button. */
.mosaic-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3rem;
  max-width: 100%;
  padding: 0.7rem 1.4rem;
  border: 0;
  border-radius: 999px;
  font-family: var(--font-body, sans-serif);
  font-size: 0.9375rem;
  font-weight: var(--mosaic-body-strong);
  letter-spacing: calc(-0.005em * var(--mosaic-tight, 1));
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  overflow-wrap: break-word;
  transition: background-color var(--mosaic-speed) ease, box-shadow var(--mosaic-speed) ease;
}

/* The label is a span that may shrink: a flex item's text otherwise keeps its longest word's width and runs out of the
   button and off a phone's screen. "anywhere" breaks only a word wider than the whole button, as the kit's buttons do. */
.mosaic-button > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.mosaic-button--primary {
  background: var(--primary, #17161f);
  color: var(--on-primary, #ffffff);
}

.mosaic-button--primary:hover {
  background: var(--primary-alt, #2d2b3a);
}

.mosaic-button--accent {
  background: var(--accent, #6246ea);
  color: var(--on-accent, #ffffff);
}

/* The hover is a ring in the words' colour, not a lighter fill: a lighter fill would bring the words' contrast under
   what the colour contract promises for this pair. */
.mosaic-button--accent:hover {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--on-accent, #ffffff) 55%, transparent);
}

.mosaic-button--secondary {
  background: var(--mosaic-soft);
  color: var(--text-primary, #17161f);
}

.mosaic-button--secondary:hover {
  background: color-mix(in srgb, var(--text-primary, #17161f) 13%, transparent);
}

/* A light pill, for a button on the accent tile. */
.mosaic-button--surface {
  background: var(--surface, #ffffff);
  color: var(--text-primary, #17161f);
}

.mosaic-button--surface:hover {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--text-primary, #17161f) 30%, transparent);
}

.mosaic-button--small {
  min-height: 2.5rem;
  padding: 0.45rem 1.05rem;
  font-size: 0.875rem;
}

.mosaic-button--block {
  width: 100%;
}

/* The main button ends in a round chip with an arrow, in the button's colours turned round. It nudges forward on hover.
   The theme's own main button and the kit's (every block's main button, the forms' Send) wear the same chip; a small
   button has none. */
.mosaic-button--primary:not(.mosaic-button--small),
.kit-root .kit-button--primary:not(.kit-button--small) {
  padding-inline-end: 0.45rem;
}

.mosaic-button--primary:not(.mosaic-button--small)::after,
.kit-root .kit-button--primary:not(.kit-button--small)::after {
  content: "\2192";
  display: grid;
  flex: none;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  margin-inline-start: 0.2rem;
  border-radius: 50%;
  font-family: var(--font-body, sans-serif);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  transition: transform var(--mosaic-speed) ease;
}

.mosaic-button--primary:not(.mosaic-button--small)::after {
  background: var(--on-primary, #ffffff);
  color: var(--primary, #17161f);
}

.kit-root .kit-button--primary:not(.kit-button--small)::after {
  background: var(--kit-on-primary);
  color: var(--kit-primary);
}

.mosaic-button--primary:hover::after,
.kit-root .kit-button--primary:hover::after {
  transform: translateX(0.15rem);
}

[dir="rtl"] .mosaic-button--primary::after,
[dir="rtl"] .kit-root .kit-button--primary::after {
  content: "\2190";
}

/* ------------------------------------------------------------------ Announcement */

/* A slim rounded strip above the header, in the ink colour. id="announcement-bar" and the theme-announcement__ hooks
   keep a long message to one row on a phone (resilience.css). */
.mosaic-announcement {
  padding: 0.5rem var(--mosaic-gutter) 0;
  font-size: 0.875rem;
}

.mosaic-announcement[hidden] {
  display: none;
}

.mosaic-announcement__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem 1rem;
  max-width: var(--mosaic-width);
  margin-inline: auto;
  padding: 0.45rem 1rem;
  border-radius: 1rem;
  background: var(--primary, #17161f);
  color: var(--on-primary, #ffffff);
  text-align: center;
}

.mosaic-announcement p {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  margin: 0;
}

.mosaic-announcement__icon {
  width: 1em;
  height: 1em;
  flex: none;
}

.mosaic-announcement a {
  font-weight: var(--mosaic-body-strong);
  text-underline-offset: 0.25em;
}

.mosaic-announcement .announcement-dismiss {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
}

.mosaic-announcement svg {
  width: 0.7rem;
  height: 0.7rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

/* ------------------------------------------------------------------ Header */

/* The header is a rounded tile that floats a little below the top of the window and stays there as the page scrolls.
   Around it the page's own colour fades out, so what scrolls under the gap above the tile is hidden. */
.mosaic-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 0.625rem var(--mosaic-gutter) 0.5rem;
  background: linear-gradient(var(--background, #f2f2ee) 55%, color-mix(in srgb, var(--background, #f2f2ee) 0%, transparent));
  color: var(--text-primary, #17161f);
}

.mosaic-header__bar {
  max-width: var(--mosaic-width);
  margin-inline: auto;
  border-radius: 1.25rem;
  background: var(--surface, #ffffff);
  color: var(--text-primary, #17161f);
  box-shadow: 0 0 0 1px var(--mosaic-line), 0 12px 32px -22px color-mix(in srgb, var(--text-primary, #17161f) 40%, transparent);
}

.mosaic-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  min-height: var(--mosaic-bar);
  padding: 0.625rem 0.625rem 0.625rem clamp(1rem, 1.8vw, 1.35rem);
}

.mosaic-header__brand {
  display: inline-flex;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

/* The centred kind: the name in the middle column, the actions in the right one, so a long name never runs under them. */
.mosaic-header--centered .mosaic-header__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr);
}

.mosaic-header--centered .mosaic-header__brand {
  grid-column: 2;
  justify-self: center;
  text-align: center;
}

.mosaic-header--centered .mosaic-header__actions {
  grid-column: 3;
  justify-self: end;
}

.mosaic-header__rail {
  padding: 0.375rem 0.625rem 0.5rem;
  border-top: 1px solid var(--mosaic-line);
}

.mosaic-header__rail .mosaic-nav {
  justify-content: center;
}

.mosaic-header__actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
}

.mosaic-header__phone {
  padding-inline: 0.25rem;
  color: inherit;
  font-size: 0.9375rem;
  font-weight: var(--mosaic-body-strong);
  text-decoration: none;
  white-space: nowrap;
}

.mosaic-header__phone:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.mosaic-header__slot {
  display: flex;
  align-items: center;
}

/* The website's name. Its line height and the small padding leave room for what letters carry above and below (the
   caron of Š, the tail of Ų, the descender of g): a tighter line in a box that clips cuts them
   (theme-clipped-marks.test.mjs, with "Šilėnų Žirgynas"). The shared rule (resilience.css) keeps a long name to two
   balanced lines and the shared script sets it smaller before a word would break; this rule only sets its look. */
.mosaic-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.mosaic-brand__name {
  min-width: 0;
  /* Wide enough for a name of eighty characters on two lines: a third line makes the bar taller than its controls
     (verify-theme-stress.mjs, header-rows). */
  max-width: min(26rem, 44vw);
  padding-block: 0.1em;
  font-family: var(--font-heading, sans-serif);
  font-size: 1.1875rem;
  font-weight: var(--mosaic-heading-weight);
  letter-spacing: calc(-0.025em * var(--mosaic-tight, 1));
  line-height: 1.3;
}

/* On a wide screen the name is never clipped: a very long one takes a third line rather than losing its end. The
   shared two-line rule is a clamp, and a clamp needs a box that hides its overflow, which would cut the marks; so the
   name here is a plain block. */
.mosaic-header .mosaic-brand__name {
  display: block;
  overflow: visible;
}

/* On a phone the shared rule keeps the name to two lines (it wins there). The box clips a little past its edges, so a
   caron above the first line and a tail under the second stay whole, but not so far that the top of a third line
   shows under the second. */
@media (max-width: 39.99rem) {
  .mosaic-header .mosaic-brand__name {
    max-width: 100%;
    overflow: clip;
    overflow-clip-margin: 0.12em;
    font-size: 1.0625rem;
  }
}

.mosaic-brand:has(.mosaic-brand__logo, .brand-logo-original, .logo-mask) .mosaic-brand__name {
  font-size: 1.0625rem;
}

.mosaic-header .mosaic-brand__logo,
.mosaic-header .brand-logo-original {
  max-height: 2.5rem;
  width: auto;
}

.mosaic-header .logo-mask {
  background-color: var(--text-primary, #17161f) !important;
}

/* ------------------------------------------------------------------ Topbar */

/* The topbar kind: a slim first row inside the same tile, with the phone, the email and the social links. */
.mosaic-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 2.25rem;
  padding: 0.3rem clamp(1rem, 1.8vw, 1.35rem);
  border-bottom: 1px solid var(--mosaic-line);
  color: var(--text-secondary, #55536a);
  font-size: 0.8125rem;
}

.mosaic-topbar__contact {
  display: flex;
  gap: 1.5rem;
  min-width: 0;
}

.mosaic-topbar a {
  color: inherit;
  text-decoration: none;
}

.mosaic-topbar a:hover {
  color: var(--text-primary, #17161f);
  text-decoration: underline;
}

.mosaic-topbar__social,
.mosaic-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.mosaic-topbar__social svg,
.mosaic-footer__social svg {
  display: block;
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

@media (max-width: 63.99rem) {
  .mosaic-topbar {
    display: none;
  }
}

/* ------------------------------------------------------------------ Navigation */

/* The pages as soft pills in the middle of the tile; the page being shown is a filled pill. */
.mosaic-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.125rem;
  min-width: 0;
}

.mosaic-header--simple .mosaic-nav,
.mosaic-header--topbar .mosaic-nav {
  margin-inline: auto;
}

@media (min-width: 64rem) {
  #site-header:not(.theme-nav-compact):is(.mosaic-header--simple, .mosaic-header--topbar) .mosaic-header__actions {
    margin-left: 0;
  }
}

.mosaic-nav__item {
  position: relative;
  /* A label is allowed to wrap: resilience.js counts a wrapped label as a crowded menu and folds it into the menu
     button. Without scripts nothing folds, and a label kept on one line would run off the screen instead. */
  min-width: 0;
}

.mosaic-nav__item > a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  color: inherit;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color var(--mosaic-speed) ease;
}

.mosaic-nav__item > a:hover,
.mosaic-nav__item--parent:focus-within > a {
  background: var(--mosaic-soft);
}

.mosaic-nav__item.is-current > a {
  background: var(--mosaic-soft);
  font-weight: var(--mosaic-body-strong);
}

.mosaic-nav__caret {
  width: 0.6rem;
  height: 0.4rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.mosaic-nav__children {
  position: absolute;
  top: calc(100% + 0.375rem);
  left: 0;
  z-index: 60;
  display: grid;
  gap: 0.125rem;
  min-width: 15rem;
  max-width: calc(100vw - 2rem);
  padding: 0.4rem;
  border-radius: 1rem;
  background: var(--surface, #ffffff);
  color: var(--text-primary, #17161f);
  box-shadow: 0 0 0 1px var(--mosaic-line), 0 18px 40px -20px color-mix(in srgb, var(--text-primary, #17161f) 40%, transparent);
  visibility: hidden;
  opacity: 0;
}

/* The bridge over the small gap under the item, so the pointer can reach the pages. */
.mosaic-nav__children::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: 0.5rem;
}

.mosaic-nav__item--parent:is(:hover, :focus-within) > .mosaic-nav__children {
  visibility: visible;
  opacity: 1;
}

.mosaic-nav__children a {
  padding: 0.55rem 0.8rem;
  border-radius: 0.65rem;
  font-size: 0.9375rem;
  line-height: 1.4;
  text-decoration: none;
}

.mosaic-nav__children a:hover {
  background: var(--mosaic-soft);
}

/* The menu button: a round button with two lines that turn into a cross. Hidden on a wide screen unless resilience.js
   folds the menu into it (theme-nav-compact on #site-header, whose shared rules show it). */
.mosaic-menu-button {
  display: none;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--mosaic-soft);
  color: inherit;
  cursor: pointer;
}

.mosaic-menu-button:hover {
  background: color-mix(in srgb, var(--text-primary, #17161f) 13%, transparent);
}

.mosaic-menu-button__lines {
  display: grid;
  gap: 0.3rem;
  width: 1.1rem;
}

.mosaic-menu-button__lines i {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--mosaic-speed) ease;
}

.mosaic-menu-button[aria-expanded="true"] .mosaic-menu-button__lines i:nth-child(1) {
  transform: translateY(0.2rem) rotate(45deg);
}

.mosaic-menu-button[aria-expanded="true"] .mosaic-menu-button__lines i:nth-child(2) {
  transform: translateY(-0.2rem) rotate(-45deg);
}

/* ------------------------------------------------------------------ Phone menu */

/* A second tile under the header with every page as a row. It scrolls inside itself when the pages are many, so the
   last one is always reachable. */
.mosaic-drawer {
  position: absolute;
  top: 100%;
  right: var(--mosaic-gutter);
  left: var(--mosaic-gutter);
  max-width: var(--mosaic-width);
  margin-inline: auto;
  /* Under the whole header, whatever its height (a top line, a name on two lines): theme.js measures it
     (--mosaic-head). With the bar's own height here, the foot of a long menu lay under the window's edge and its last
     link could not be reached (verify-theme-stress.mjs, menu-unreachable). */
  max-height: calc(100dvh - var(--mosaic-head, 5rem) - 0.75rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 1.25rem;
  background: var(--surface, #ffffff);
  color: var(--text-primary, #17161f);
  box-shadow: 0 0 0 1px var(--mosaic-line), 0 24px 48px -24px color-mix(in srgb, var(--text-primary, #17161f) 45%, transparent);
}

.mosaic-drawer[hidden] {
  display: none;
}

.mosaic-drawer__inner {
  display: grid;
  gap: 0.75rem;
  padding: 0.5rem;
}

.mosaic-drawer__slot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.5rem 0.5rem 0;
}

.mosaic-drawer__nav {
  display: grid;
  gap: 0.375rem;
}

.mosaic-drawer__item {
  border-radius: 0.875rem;
  background: var(--surface-alt, #f7eee4);
  color: var(--text-primary, #17161f);
}

/* A page name in the heading face. data-fit-text (includes/chrome.php) lets the shared script set a long single word
   smaller instead of breaking it. */
.mosaic-drawer__link {
  display: block;
  padding: 0.8rem 1rem;
  font-family: var(--font-heading, sans-serif);
  font-size: 1.125rem;
  font-weight: var(--mosaic-heading-weight);
  letter-spacing: calc(-0.015em * var(--mosaic-tight, 1));
  line-height: 1.3;
  text-decoration: none;
}

.mosaic-drawer__children {
  display: grid;
  gap: 0.1rem;
  padding: 0 1rem 0.75rem;
}

.mosaic-drawer__children a {
  padding: 0.3rem 0;
  color: var(--text-secondary, #55536a);
  text-decoration: none;
}

.mosaic-drawer__footer {
  display: grid;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem 0.5rem;
}

.mosaic-drawer__contact {
  width: fit-content;
  color: var(--text-secondary, #55536a);
  text-decoration: none;
}

/* Below the desktop width the menu, the phone, the button and the slot move into the phone menu. */
@media (max-width: 63.99rem) {
  .mosaic-nav,
  .mosaic-header__rail,
  .mosaic-header__phone,
  .mosaic-header__cta,
  .mosaic-header__slot {
    display: none;
  }

  .mosaic-menu-button {
    display: inline-flex;
  }

  .mosaic-header--centered .mosaic-header__inner {
    display: flex;
  }
}

/* A phone menu left open while the window grows to a desktop is put away, unless the bar is folded. */
@media (min-width: 64rem) {
  #site-header:not(.theme-nav-compact) .mosaic-drawer {
    display: none;
  }
}

@media (max-width: 79.99rem) {
  .mosaic-header--simple .mosaic-header__phone {
    display: none;
  }
}

/* ------------------------------------------------------------------ Breadcrumbs */

/* The way back as a small rounded tile. */
.mosaic-breadcrumbs {
  max-width: calc(var(--mosaic-width) + 2 * var(--mosaic-gutter));
  margin-inline: auto;
  padding: 0.75rem var(--mosaic-gutter) 0;
}

.mosaic-breadcrumbs ol {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.5rem;
  max-width: 100%;
  margin: 0;
  padding: 0.4rem 0.95rem;
  border-radius: 0.875rem;
  background: var(--surface, #ffffff);
  color: var(--text-secondary, #55536a);
  box-shadow: inset 0 0 0 1px var(--mosaic-line);
  font-size: 0.8125rem;
  list-style: none;
}

.mosaic-breadcrumbs li {
  min-width: 0;
  overflow-wrap: anywhere;
}

.mosaic-breadcrumbs li + li::before {
  content: "/";
  margin-right: 0.5rem;
  opacity: 0.55;
}

.mosaic-breadcrumbs a {
  text-decoration: none;
}

.mosaic-breadcrumbs a:hover {
  color: var(--text-primary, #17161f);
  text-decoration: underline;
}

.mosaic-breadcrumbs [aria-current="page"] {
  color: var(--text-primary, #17161f);
  font-weight: var(--mosaic-body-strong);
}

/* ------------------------------------------------------------------ The bento opening (hero_image_split) */

/* A small mosaic: the words in a big white tile, the picture as a tall tile beside them, the selling points in a tinted
   tile and the rating as a big number on the accent tile under the words. Each tile appears only when the block has it;
   the others close up. */
.mosaic-hero {
  padding: 0.25rem var(--mosaic-gutter) var(--kit-pad-normal, clamp(2rem, 1.2rem + 2.6vw, 3.5rem));
}

.mosaic-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--mosaic-gap);
  max-width: var(--mosaic-width);
  margin-inline: auto;
}

.mosaic-hero__copy {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
  min-width: 0;
  padding: clamp(1.5rem, 0.9rem + 2.8vw, 3.75rem);
  border-radius: var(--mosaic-radius);
  background: var(--surface, #ffffff);
  color: var(--text-primary, #17161f);
  box-shadow: inset 0 0 0 1px var(--mosaic-line);
}

/* The page's heading. It sits in main, so the shared script sets it smaller before a long word would break; the sizes
   here are chosen so that ordinary words fit a tile at 320 px without it. */
.mosaic-hero__title {
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(2rem, 1.2rem + 3.4vw, 4.5rem);
  font-weight: var(--mosaic-heading-weight);
  letter-spacing: calc(-0.045em * var(--mosaic-tight, 1));
  line-height: 1.06;
  text-wrap: balance;
}

.mosaic-hero__lead {
  max-width: 36rem;
  margin: 0;
  color: var(--text-secondary, #55536a);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.55;
}

.mosaic-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
  padding-top: 0.25rem;
}

.mosaic-hero__media {
  position: relative;
  min-height: 15rem;
  margin: 0;
  overflow: hidden;
  border-radius: var(--mosaic-radius);
  background: var(--mosaic-mist);
  aspect-ratio: 4 / 3;
}

.mosaic-hero__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mosaic-hero__extras {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--mosaic-gap);
  min-width: 0;
}

.mosaic-hero__points {
  display: grid;
  align-content: center;
  gap: 0.85rem;
  margin: 0;
  padding: clamp(1.25rem, 0.9rem + 1.4vw, 2rem);
  border-radius: var(--mosaic-radius);
  background: var(--surface-alt, #f7eee4);
  color: var(--text-primary, #17161f);
  list-style: none;
}

.mosaic-hero__points li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
  font-size: 0.9688rem;
  line-height: 1.45;
}

.mosaic-hero__points li > span:last-child {
  min-width: 0;
  padding-top: 0.2rem;
}

.mosaic-hero__dot {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 0.6rem;
  background: var(--surface, #ffffff);
  color: var(--accent-ink, #5133d8);
}

.mosaic-hero__icon {
  width: 1.05rem;
  height: 1.05rem;
}

/* The rating as a big friendly number on the accent tile. */
.mosaic-hero__proof {
  display: grid;
  align-content: end;
  justify-items: start;
  gap: 0.35rem;
  min-width: 0;
  padding: clamp(1.25rem, 0.9rem + 1.4vw, 2rem);
  border-radius: var(--mosaic-radius);
  background: var(--accent, #6246ea);
  color: var(--on-accent, #ffffff);
}

.mosaic-hero__score {
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(3.25rem, 2.2rem + 3.6vw, 5.5rem);
  font-variant-numeric: lining-nums tabular-nums;
  font-weight: var(--mosaic-heading-weight);
  letter-spacing: calc(-0.05em * var(--mosaic-tight, 1));
  line-height: 1;
}

.mosaic-hero__source {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: var(--mosaic-body-strong);
  line-height: 1.35;
}

.mosaic-stars {
  display: inline-flex;
  gap: 0.15rem;
}

.mosaic-stars svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: color-mix(in srgb, currentColor 35%, transparent);
}

.mosaic-stars svg.is-full {
  fill: currentColor;
}

.mosaic-hero__trustpilot {
  margin-top: 0.35rem;
  color: inherit;
  font-weight: var(--mosaic-body-strong);
  text-underline-offset: 0.25em;
}

@media (min-width: 40rem) {
  .mosaic-hero__extras:has(> .mosaic-hero__points + .mosaic-hero__proof) {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  }
}

@media (min-width: 64rem) {
  .mosaic-hero__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .mosaic-hero__copy {
    grid-column: 1 / span 7;
    min-height: clamp(24rem, 52vh, 34rem);
  }

  .mosaic-hero__media {
    grid-column: 8 / -1;
    min-height: 24rem;
    aspect-ratio: auto;
  }

  .mosaic-hero--extras .mosaic-hero__media {
    grid-row: 1 / span 2;
  }

  .mosaic-hero__extras {
    grid-column: 1 / span 7;
  }

  .mosaic-hero--words .mosaic-hero__copy,
  .mosaic-hero--words .mosaic-hero__extras {
    grid-column: 1 / -1;
  }

  .mosaic-hero--words .mosaic-hero__copy {
    min-height: 0;
  }

  .mosaic-hero--words .mosaic-hero__title {
    max-width: 20ch;
  }
}

/* ------------------------------------------------------------------ Sections: the frame of every kit section */

/* There are no full-width bands: the kit's tinted band is the page itself, and the tiles carry the colour. */
.mosaic-main .kit-section--muted {
  background-color: transparent;
}

/* A block's own id is the target of links: it stops under the header. */
.mosaic-main [id] {
  scroll-margin-top: calc(var(--mosaic-head, 5rem) + 0.75rem);
}

/* In the stock blocks the words stand at the left, as on an app's product page; the cards below them are tiles. A
   module's section (its type starts with x_) is left as its module asked: the kit promises a module that a text it
   centres stays centred (kit-defaults.test.mjs). The invitation and the review badges stay centred: they are one tile
   or one row, read from the middle. */
.mosaic-main [data-block]:not([data-block^="x_"], [data-block="cta_section"], [data-block="review_badges"]).kit-section--align-center,
.mosaic-main [data-block]:not([data-block^="x_"], [data-block="cta_section"], [data-block="review_badges"]) :is(.kit-heading-group.kit-text--center, .kit-text-block.kit-text--center) {
  text-align: start;
}

.mosaic-main [data-block]:not([data-block^="x_"], [data-block="cta_section"], [data-block="review_badges"]) .kit-align--center {
  align-items: flex-start;
  text-align: start;
}

.mosaic-main [data-block]:not([data-block^="x_"], [data-block="cta_section"], [data-block="review_badges"]) .kit-justify--center {
  justify-content: flex-start;
}

.mosaic-main [data-block]:not([data-block^="x_"], [data-block="cta_section"], [data-block="review_badges"]) .kit-text-block.kit-text--center {
  margin-inline: 0;
}

/* The lead line under a section's heading is quieter than running text. */
.mosaic-main [data-block] > .kit-section__inner > .kit-stack > .kit-text--lead {
  max-width: 34rem;
  color: var(--kit-muted);
}

/* On a wide screen a section's heading and its lead line stand side by side above the tiles: the heading at the left,
   the lead line at the right, level with the heading's last line. */
@media (min-width: 64rem) {
  .mosaic-main [data-block]:not([data-block^="x_"], [data-block="faq"], [data-block="contact_form"], [data-block="cta_section"], [data-block^="hero_"]) > .kit-section__inner > .kit-stack:has(> .kit-heading-group + .kit-text--lead) {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: end;
    gap: var(--kit-gap-large) clamp(2rem, 4vw, 4rem);
  }

  .mosaic-main [data-block]:not([data-block^="x_"], [data-block="faq"], [data-block="contact_form"], [data-block="cta_section"], [data-block^="hero_"]) > .kit-section__inner > .kit-stack:has(> .kit-heading-group + .kit-text--lead) > * {
    grid-column: 1 / -1;
  }

  .mosaic-main [data-block]:not([data-block^="x_"], [data-block="faq"], [data-block="contact_form"], [data-block="cta_section"], [data-block^="hero_"]) > .kit-section__inner > .kit-stack:has(> .kit-heading-group + .kit-text--lead) > .kit-heading-group {
    grid-column: 1;
  }

  .mosaic-main [data-block]:not([data-block^="x_"], [data-block="faq"], [data-block="contact_form"], [data-block="cta_section"], [data-block^="hero_"]) > .kit-section__inner > .kit-stack:has(> .kit-heading-group + .kit-text--lead) > .kit-heading-group + .kit-text--lead {
    grid-column: 2;
    justify-self: end;
    width: 100%;
    max-width: 30rem;
    padding-bottom: 0.3rem;
  }

  .mosaic-main [data-block]:not([data-block^="x_"]) > .kit-section__inner > .kit-stack > .kit-heading-group {
    max-width: 52rem;
  }
}

/* A narrow section (places, a timeline, a video, questions, a form) takes the page's width on a desktop: every heading
   then starts at the same left edge, as the tiles do. The invitation and the openings keep their own width. */
@media (min-width: 64rem) {
  .mosaic-main [data-block]:not([data-block^="x_"], [data-block="cta_section"], [data-block^="hero_"]) > .kit-section__inner.kit-width--narrow {
    --kit-w: var(--kit-width-normal);
  }
}

/* ------------------------------------------------------------------ Tiles: tints and the accent tile */

/* The items of a cluster take turns in three looks: white, a wash of the accent, and the palette's second surface. The
   texts on them keep the page's own colours. */
.mosaic-main [data-block]:not([data-block^="x_"]) :where(.kit-grid, .kit-carousel__track) > :where(.kit-card, .kit-features > .kit-stack) {
  background: var(--surface, #ffffff);
}

.mosaic-main [data-block]:not([data-block^="x_"]) :where(.kit-grid, .kit-carousel__track) > .kit-card:nth-child(3n+2),
.mosaic-main [data-block]:not([data-block^="x_"]) .kit-grid.kit-features > .kit-stack:nth-child(3n+2) {
  border-color: transparent;
  background: var(--mosaic-wash);
}

.mosaic-main [data-block]:not([data-block^="x_"]) :where(.kit-grid, .kit-carousel__track) > .kit-card:nth-child(3n+3),
.mosaic-main [data-block]:not([data-block^="x_"]) .kit-grid.kit-features > .kit-stack:nth-child(3n+3) {
  border-color: transparent;
  background: var(--surface-alt, #f7eee4);
}

/* One tile of a cluster in the accent colour: the first feature, the first figure, the first quotation. Every colour
   role inside it turns, as the kit turns them in an accent band, so its texts, links and buttons read in on-accent, a
   pair the colour contract keeps. */
.mosaic-main [data-block="feature_list"]:not([data-block^="x_"]) .kit-grid.kit-features > .kit-stack:first-child,
.mosaic-main [data-block="stats_counter"]:not([data-block^="x_"]) .kit-grid > .kit-stack:first-child,
.mosaic-main [data-block="testimonials"]:not([data-block^="x_"]) .kit-carousel__track > .kit-card:first-child,
.mosaic-main [data-block="testimonials"]:not([data-block^="x_"]) .kit-grid > .kit-card:first-child {
  border-color: transparent;
  background: var(--accent, #6246ea);
  color: var(--on-accent, #ffffff);
  --kit-text: var(--on-accent, #ffffff);
  --kit-muted: var(--on-accent, #ffffff);
  --kit-surface: color-mix(in srgb, var(--on-accent, #ffffff) 10%, transparent);
  --kit-surface-alt: color-mix(in srgb, var(--on-accent, #ffffff) 14%, transparent);
  --kit-primary: var(--on-accent, #ffffff);
  --kit-primary-hover: color-mix(in srgb, var(--on-accent, #ffffff) 88%, var(--accent, #6246ea));
  --kit-on-primary: var(--accent, #6246ea);
  --kit-accent: var(--on-accent, #ffffff);
  --kit-accent-text: var(--on-accent, #ffffff);
  --kit-on-accent: var(--accent, #6246ea);
  --kit-line: color-mix(in srgb, var(--on-accent, #ffffff) 24%, transparent);
  --kit-line-strong: color-mix(in srgb, var(--on-accent, #ffffff) 48%, transparent);
  --kit-soft: color-mix(in srgb, var(--on-accent, #ffffff) 14%, transparent);
  --kit-tile-line: transparent;
  --kit-focus: var(--on-accent, #ffffff);
  --kit-star: var(--on-accent, #ffffff);
}

/* The plan a website marks stands as a tile of the ink colour: every colour inside it turns, as in a dark band. */
.mosaic-main [data-block="pricing_table"]:not([data-block^="x_"]) .kit-grid > .kit-card.kit-card--surface {
  border-color: transparent;
  background: var(--primary, #17161f);
  color: var(--on-primary, #ffffff);
  --kit-text: var(--on-primary, #ffffff);
  --kit-muted: var(--on-primary, #ffffff);
  --kit-surface: color-mix(in srgb, var(--on-primary, #ffffff) 10%, transparent);
  --kit-surface-alt: color-mix(in srgb, var(--on-primary, #ffffff) 14%, transparent);
  --kit-primary: var(--on-primary, #ffffff);
  --kit-primary-hover: color-mix(in srgb, var(--on-primary, #ffffff) 88%, var(--primary, #17161f));
  --kit-on-primary: var(--primary, #17161f);
  --kit-accent: var(--on-primary, #ffffff);
  --kit-accent-text: var(--on-primary, #ffffff);
  --kit-on-accent: var(--primary, #17161f);
  --kit-line: color-mix(in srgb, var(--on-primary, #ffffff) 24%, transparent);
  --kit-line-strong: color-mix(in srgb, var(--on-primary, #ffffff) 48%, transparent);
  --kit-soft: color-mix(in srgb, var(--on-primary, #ffffff) 14%, transparent);
  --kit-tile-line: transparent;
  --kit-focus: var(--on-primary, #ffffff);
  --kit-star: var(--on-primary, #ffffff);
}

/* ------------------------------------------------------------------ The bento grid */

/* The items of a card section, the features, the figures, the posts and a short photo gallery form a bento: tiles of
   two sizes that fit together into full rows, whatever their number. On a desktop (from 1200 px, where a row of four
   small tiles first has room for an ordinary word) the rows are a wide tile and two small ones, the wide one
   alternating sides; four items are a tall tile beside a wide one and two small ones, five a tall tile beside four
   small ones; two items are a wide and a narrower tile; a last single item takes the whole row and a last pair shares
   it. On a tablet the tiles go two to a row, wide and narrow in turn, and an odd last one takes the row. On a phone
   they stand one under another (figures and logos two to a row). No row leaves a hole. */
@media (min-width: 40rem) and (max-width: 74.99rem) {
  .mosaic-main [data-mosaic="bento"][data-block] .kit-grid.kit-balanced {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .mosaic-main [data-mosaic="bento"][data-block] .kit-grid.kit-balanced > * {
    grid-column: auto / span 6;
  }

  .mosaic-main [data-mosaic="bento"][data-block] .kit-grid.kit-balanced > :nth-child(4n+1),
  .mosaic-main [data-mosaic="bento"][data-block] .kit-grid.kit-balanced > :nth-child(4n+4) {
    grid-column: auto / span 7;
  }

  .mosaic-main [data-mosaic="bento"][data-block] .kit-grid.kit-balanced > :nth-child(4n+2),
  .mosaic-main [data-mosaic="bento"][data-block] .kit-grid.kit-balanced > :nth-child(4n+3) {
    grid-column: auto / span 5;
  }

  .mosaic-main [data-mosaic="bento"][data-block] .kit-grid.kit-balanced > :nth-child(odd):last-child {
    grid-column: auto / span 12;
  }
}

@media (min-width: 75rem) {
  .mosaic-main [data-mosaic="bento"][data-block] .kit-grid.kit-balanced {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .mosaic-main [data-mosaic="bento"][data-block] .kit-grid.kit-balanced > * {
    grid-column: auto / span 3;
  }

  .mosaic-main [data-mosaic="bento"][data-block] .kit-grid.kit-balanced > :nth-child(6n+1),
  .mosaic-main [data-mosaic="bento"][data-block] .kit-grid.kit-balanced > :nth-child(6n+6) {
    grid-column: auto / span 6;
  }

  /* The last row: one item alone takes it, a pair shares it. */
  .mosaic-main [data-mosaic="bento"][data-block] .kit-grid.kit-balanced > :nth-child(3n+1):last-child {
    grid-column: auto / span 12;
  }

  .mosaic-main [data-mosaic="bento"][data-block] .kit-grid.kit-balanced > :nth-child(3n+1):nth-last-child(2),
  .mosaic-main [data-mosaic="bento"][data-block] .kit-grid.kit-balanced > :nth-child(3n+2):last-child {
    grid-column: auto / span 6;
  }

  /* Two items: a wide tile and a narrower one. */
  .mosaic-main [data-mosaic="bento"][data-block] .kit-grid.kit-balanced > :first-child:nth-last-child(2) {
    grid-column: auto / span 7;
  }

  .mosaic-main [data-mosaic="bento"][data-block] .kit-grid.kit-balanced > :nth-child(2):last-child {
    grid-column: auto / span 5;
  }

  /* Four items: a tall tile, a wide one beside it and two small ones under that. */
  .mosaic-main [data-mosaic="bento"][data-block] .kit-grid.kit-balanced:has(> :nth-child(4):last-child) > :first-child {
    grid-row: span 2;
    grid-column: auto / span 6;
  }

  .mosaic-main [data-mosaic="bento"][data-block] .kit-grid.kit-balanced:has(> :nth-child(4):last-child) > :nth-child(2) {
    grid-column: auto / span 6;
  }

  .mosaic-main [data-mosaic="bento"][data-block] .kit-grid.kit-balanced:has(> :nth-child(4):last-child) > :nth-child(n+3) {
    grid-column: auto / span 3;
  }

  /* Five items: a tall tile beside four small ones. */
  .mosaic-main [data-mosaic="bento"][data-block] .kit-grid.kit-balanced:has(> :nth-child(5):last-child) > :first-child {
    grid-row: span 2;
    grid-column: auto / span 6;
  }

  .mosaic-main [data-mosaic="bento"][data-block] .kit-grid.kit-balanced:has(> :nth-child(5):last-child) > :nth-child(n+2) {
    grid-column: auto / span 3;
  }
}

/* Every second section of a page is the mirror image: its big tile stands at the right, so two mosaics in a row (four
   figures, then five services) do not repeat one shape. Only the big tile is placed; the others fill the free cells in
   their own order (dense), so no row leaves a hole. */
@media (min-width: 40rem) and (max-width: 74.99rem) {
  .mosaic-main > :nth-child(even) > [data-mosaic="bento"][data-block] .kit-grid.kit-balanced > :nth-child(4n+1),
  .mosaic-main > :nth-child(even) > [data-mosaic="bento"][data-block] .kit-grid.kit-balanced > :nth-child(4n+4) {
    grid-column: auto / span 5;
  }

  .mosaic-main > :nth-child(even) > [data-mosaic="bento"][data-block] .kit-grid.kit-balanced > :nth-child(4n+2),
  .mosaic-main > :nth-child(even) > [data-mosaic="bento"][data-block] .kit-grid.kit-balanced > :nth-child(4n+3) {
    grid-column: auto / span 7;
  }

  .mosaic-main > :nth-child(even) > [data-mosaic="bento"][data-block] .kit-grid.kit-balanced > :nth-child(odd):last-child {
    grid-column: auto / span 12;
  }
}

@media (min-width: 75rem) {
  .mosaic-main > :nth-child(even) > [data-mosaic="bento"][data-block] .kit-grid.kit-balanced {
    grid-auto-flow: row dense;
  }

  .mosaic-main > :nth-child(even) > [data-mosaic="bento"][data-block] .kit-grid.kit-balanced:is(:has(> :nth-child(3):last-child), :has(> :nth-child(4):last-child), :has(> :nth-child(5):last-child)) > :first-child {
    grid-column: 7 / span 6;
  }

  .mosaic-main > :nth-child(even) > [data-mosaic="bento"][data-block] .kit-grid.kit-balanced > :first-child:nth-last-child(2) {
    grid-column: 6 / span 7;
  }
}

/* On a phone an odd last figure or logo takes the whole row instead of standing alone in the middle. */
@media (max-width: 39.99rem) {
  .mosaic-main [data-mosaic="bento"][data-block] .kit-grid.kit-balanced.kit-bal-phone--2 > :nth-child(odd):last-child {
    grid-column: 1 / -1;
  }
}

/* A picture in a bento tile fills what its tile has left, so tiles of one row end on one line and a tall tile shows a
   tall picture. Its own shape returns on a phone, where each tile stands alone. */
@media (min-width: 40rem) {
  .mosaic-main [data-mosaic="bento"][data-block] .kit-grid.kit-balanced > .kit-card > .kit-card__media {
    flex: 1 1 auto;
    min-height: 11rem;
    aspect-ratio: auto;
  }

  .mosaic-main [data-mosaic="bento"][data-block] .kit-grid.kit-balanced > .kit-card > .kit-card__media img {
    position: absolute;
    inset: 0;
  }

  .mosaic-main [data-mosaic="bento"][data-block] .kit-grid.kit-balanced > .kit-card > .kit-card__media {
    position: relative;
  }

  .mosaic-main [data-mosaic="bento"][data-block] .kit-grid.kit-balanced > .kit-card:has(> .kit-card__media) > .kit-card__content {
    flex: 0 0 auto;
  }
}

/* A tile that takes a whole row lays its picture beside its words instead of over them: a picture as wide as the page
   and as tall as a small tile would be a thin strip. */
@media (min-width: 40rem) and (max-width: 74.99rem) {
  .mosaic-main [data-mosaic="bento"][data-block] .kit-grid.kit-balanced > .kit-card:has(> .kit-card__media):nth-child(odd):last-child {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .mosaic-main [data-mosaic="bento"][data-block] .kit-grid.kit-balanced > .kit-card:has(> .kit-card__media):nth-child(odd):last-child > .kit-card__media {
    min-height: 15rem;
    margin: 0.5rem;
  }

  .mosaic-main [data-mosaic="bento"][data-block] .kit-grid.kit-balanced > .kit-card:has(> .kit-card__media):nth-child(odd):last-child > .kit-card__content {
    align-self: center;
  }
}

@media (min-width: 75rem) {
  .mosaic-main [data-mosaic="bento"][data-block] .kit-grid.kit-balanced > .kit-card:has(> .kit-card__media):nth-child(3n+1):last-child {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .mosaic-main [data-mosaic="bento"][data-block] .kit-grid.kit-balanced > .kit-card:has(> .kit-card__media):nth-child(3n+1):last-child > .kit-card__media {
    min-height: 17rem;
    margin: 0.5rem;
  }

  .mosaic-main [data-mosaic="bento"][data-block] .kit-grid.kit-balanced > .kit-card:has(> .kit-card__media):nth-child(3n+1):last-child > .kit-card__content {
    align-self: center;
  }

  /* Four items: the fourth is small, not alone in its row. */
  .mosaic-main [data-mosaic="bento"][data-block] .kit-grid.kit-balanced:has(> :nth-child(4):last-child) > .kit-card:has(> .kit-card__media):last-child {
    display: flex;
  }

  .mosaic-main [data-mosaic="bento"][data-block] .kit-grid.kit-balanced:has(> :nth-child(4):last-child) > .kit-card:has(> .kit-card__media):last-child > .kit-card__media {
    min-height: 11rem;
    margin: 0.5rem 0.5rem 0;
  }

  /* The big tiles of a bento get a bigger title. */
  .mosaic-main [data-mosaic="bento"][data-block] .kit-grid.kit-balanced:is(:has(> :nth-child(4):last-child), :has(> :nth-child(5):last-child)) > .kit-card:first-child .kit-card__title {
    font-size: clamp(1.4rem, 1rem + 1vw, 1.85rem);
  }
}

/* A card without a picture in a bento keeps its icon at the top and its words at the foot, like a feature tile. */
.mosaic-main [data-mosaic="bento"][data-block] .kit-grid.kit-balanced > .kit-card:not(:has(> .kit-card__media)) > .kit-card__content:has(> .kit-card__body > .kit-icon:first-child) > .kit-card__body {
  display: contents;
}

.mosaic-main [data-mosaic="bento"][data-block] .kit-grid.kit-balanced > .kit-card:not(:has(> .kit-card__media)) > .kit-card__content > .kit-card__body > .kit-icon:first-child {
  order: -1;
  margin-bottom: 0.75rem;
}

@media (min-width: 40rem) {
  .mosaic-main [data-mosaic="bento"][data-block] .kit-grid.kit-balanced > .kit-card:not(:has(> .kit-card__media)) > .kit-card__content {
    min-height: 13rem;
  }

  .mosaic-main [data-mosaic="bento"][data-block] .kit-grid.kit-balanced > .kit-card:not(:has(> .kit-card__media)) > .kit-card__content > .kit-card__body > .kit-icon:first-child {
    margin-bottom: auto;
  }

  .mosaic-main [data-mosaic="bento"][data-block] .kit-grid.kit-balanced > .kit-card:not(:has(> .kit-card__media)) > .kit-card__content > .kit-card__title {
    margin-top: 1.25rem;
  }
}

.mosaic-main [data-mosaic="bento"][data-block] .kit-grid.kit-balanced > .kit-card:not(:has(> .kit-card__media)) > .kit-card__content > .kit-card__body > .kit-icon:first-child {
  box-sizing: content-box;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.6rem;
  border-radius: 0.8rem;
  background: color-mix(in srgb, var(--kit-text) 7%, transparent);
  color: var(--kit-text);
}

/* ------------------------------------------------------------------ Features */

/* A feature is a tile: its icon in a small rounded square at the top, its words at the foot, so a tall tile keeps its
   icon up and its words down, as the tiles of a product page do. */
.mosaic-main [data-block] .kit-grid.kit-features {
  --kit-gap: var(--kit-tile-gap, 1rem);
  gap: var(--kit-tile-gap, 1rem);
}

.mosaic-main [data-block] .kit-grid.kit-features > .kit-stack {
  gap: 0.5rem;
  padding: var(--kit-card-pad);
  border: 1px solid var(--kit-tile-line);
  border-radius: var(--kit-radius);
}

.mosaic-main [data-block] .kit-grid.kit-features > .kit-stack > .kit-icon:first-child {
  box-sizing: content-box;
  width: 1.5rem;
  height: 1.5rem;
  margin-bottom: 0.5rem;
  padding: 0.6rem;
  border-radius: 0.8rem;
  background: color-mix(in srgb, var(--kit-text) 7%, transparent);
  color: var(--kit-text);
}

@media (min-width: 40rem) {
  .mosaic-main [data-block] .kit-grid.kit-features > .kit-stack {
    min-height: 13rem;
  }

  .mosaic-main [data-block] .kit-grid.kit-features > .kit-stack > .kit-icon:first-child + * {
    margin-top: auto;
  }
}

/* ------------------------------------------------------------------ Figures */

/* A figure is a tile: its icon at the top, the number big at the foot with its label under it. The first is the accent
   tile, and the big tiles of a bento set their number larger. */
.mosaic-main [data-block="stats_counter"]:not([data-block^="x_"]) .kit-grid {
  --kit-gap: var(--kit-tile-gap, 1rem);
  gap: var(--kit-tile-gap, 1rem);
}

.mosaic-main [data-block="stats_counter"]:not([data-block^="x_"]) .kit-grid > .kit-stack {
  justify-content: flex-end;
  gap: 0.75rem;
  min-height: 10rem;
  padding: var(--kit-card-pad);
  border: 1px solid var(--kit-tile-line);
  border-radius: var(--kit-radius);
  text-align: start;
}

.mosaic-main [data-block="stats_counter"]:not([data-block^="x_"]) .kit-grid > .kit-stack:nth-child(3n+2) {
  border-color: transparent;
  background: var(--mosaic-wash);
}

.mosaic-main [data-block="stats_counter"]:not([data-block^="x_"]) .kit-grid > .kit-stack:nth-child(3n+3) {
  border-color: transparent;
  background: var(--surface-alt, #f7eee4);
}

.mosaic-main [data-block="stats_counter"]:not([data-block^="x_"]) .kit-grid > .kit-stack > .kit-icon {
  margin-bottom: auto;
  color: var(--kit-text);
}

@media (min-width: 75rem) {
  .mosaic-main [data-block="stats_counter"]:not([data-block^="x_"]) .kit-grid > .kit-stack {
    min-height: 12rem;
  }

  .mosaic-main [data-block="stats_counter"] .kit-balanced > :is(:nth-child(6n+1), :nth-child(6n+6)) .kit-stat__value,
  .mosaic-main [data-block="stats_counter"] .kit-balanced > :first-child .kit-stat__value {
    font-size: clamp(3rem, 1.5rem + 3vw, 4.75rem);
  }
}

/* ------------------------------------------------------------------ Steps and the timeline */

/* A step is a tile with its number big and friendly at the top. With an icon the icon leads and the number is a small
   label (the kit's rule: one lead mark). */
.mosaic-main [data-block="process_steps"] .kit-grid.kit-steps {
  --kit-gap: var(--kit-tile-gap, 1rem);
  gap: var(--kit-tile-gap, 1rem);
}

.mosaic-main [data-block="process_steps"] .kit-grid.kit-steps > .kit-card {
  border: 1px solid var(--kit-tile-line);
  border-radius: var(--kit-radius);
}

.mosaic-main [data-block="process_steps"] .kit-grid.kit-steps > .kit-card:nth-child(3n+2),
.mosaic-main [data-block="process_steps"] .kit-grid.kit-steps > .kit-card:nth-child(3n+3) {
  border-color: transparent;
}

.mosaic-main [data-block="process_steps"] .kit-steps .kit-card__content {
  padding: var(--kit-card-pad);
}

.mosaic-main [data-block="process_steps"] .kit-steps .kit-card__content:not(:has(> .kit-card__body > .kit-icon:first-child)) > .kit-card__eyebrow {
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--kit-accent-text);
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(2rem, 1.6rem + 1.4vw, 3rem);
  font-variant-numeric: lining-nums tabular-nums;
  font-weight: var(--mosaic-heading-weight);
  letter-spacing: calc(-0.05em * var(--mosaic-tight, 1));
  line-height: 1;
}

@media (min-width: 40rem) {
  .mosaic-main [data-block="process_steps"] .kit-steps .kit-card__content:not(:has(> .kit-card__body > .kit-icon:first-child)) > .kit-card__eyebrow {
    margin-bottom: clamp(1rem, 2vw, 2rem);
  }
}

@media (max-width: 39.99rem) {
  .mosaic-main [data-block="process_steps"] .kit-steps .kit-card__content:not(:has(> .kit-card__body > .kit-icon:first-child)) > .kit-card__eyebrow {
    font-size: 1.75rem;
  }
}

.mosaic-main [data-block="process_steps"] .kit-steps .kit-card__body > .kit-icon:first-child {
  color: var(--kit-accent-text);
}

/* The timeline: each moment a tile, its date a chip. */
.mosaic-main [data-block="timeline"] .kit-grid {
  --kit-gap: var(--kit-tile-gap, 1rem);
  gap: var(--kit-tile-gap, 1rem);
}

@media (min-width: 64rem) {
  .mosaic-main [data-block="timeline"] .kit-grid.kit-cols--1 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mosaic-main [data-block="timeline"] .kit-grid.kit-cols--1 > :nth-child(odd):last-child {
    grid-column: 1 / -1;
  }
}

.mosaic-main [data-block="timeline"] .kit-card > .kit-card__content {
  padding: var(--kit-card-pad);
}

/* ------------------------------------------------------------------ Words with a picture, two columns */

/* A words tile beside a picture tile, both as tall as the taller. The picture fills its tile; a picture the website
   asked to show whole is left whole. */
.mosaic-main :is([data-block="text_with_image"], [data-block="about_section"], [data-block="two_column_text"], [data-block="hero_form_split"], [data-block="contact_form_split"], [data-block="price_list"]) > .kit-section__inner > .kit-split,
.mosaic-main [data-block="price_list"] > .kit-section__inner > .kit-stack > .kit-split {
  align-items: stretch;
  gap: var(--kit-tile-gap, 1rem);
}

.mosaic-main :is([data-block="text_with_image"], [data-block="about_section"], [data-block="two_column_text"], [data-block="hero_form_split"], [data-block="contact_form_split"]) > .kit-section__inner > .kit-split > .kit-stack {
  justify-content: center;
  padding: var(--mosaic-pad);
  border-radius: var(--kit-radius);
  background: var(--surface, #ffffff);
  color: var(--text-primary, #17161f);
  box-shadow: inset 0 0 0 1px var(--mosaic-line);
}

.mosaic-main [data-block="text_with_image"] > .kit-section__inner > .kit-split > .kit-stack,
.mosaic-main [data-block="hero_form_split"] > .kit-section__inner > .kit-split > .kit-stack,
.mosaic-main [data-block="two_column_text"] > .kit-section__inner > .kit-split > .kit-stack + .kit-stack {
  background: var(--mosaic-wash);
  box-shadow: none;
}

.mosaic-main [data-block="about_section"] > .kit-section__inner > .kit-split > .kit-stack {
  background: var(--surface-alt, #f7eee4);
  color: var(--text-primary, #17161f);
  box-shadow: none;
}

.mosaic-main :is([data-block="text_with_image"], [data-block="about_section"]) > .kit-section__inner > .kit-split > .kit-picture:not(.kit-fit--contain) {
  min-height: clamp(16rem, 30vw, 28rem);
}

.mosaic-main :is([data-block="text_with_image"], [data-block="about_section"]) > .kit-section__inner > .kit-split > .kit-picture:not(.kit-fit--contain) img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mosaic-main :is([data-block="text_with_image"], [data-block="about_section"], [data-block="two_column_text"], [data-block="contact_form_split"]) > .kit-section__inner > .kit-split > .kit-stack .kit-heading--2,
.mosaic-main [data-block="contact_form"] > .kit-section__inner > .kit-stack > .kit-stack .kit-heading--2 {
  font-size: clamp(1.6rem, 1.15rem + 1.6vw, 2.6rem);
}

/* The opening's words stand at the top of their tile, the heading first. */
.mosaic-main [data-block="hero_form_split"] > .kit-section__inner > .kit-split > .kit-stack {
  justify-content: flex-start;
}

/* The intro of a contact block is the accent tile; the form beside it is white. */
.mosaic-main [data-block="contact_form_split"] > .kit-section__inner > .kit-split > .kit-stack {
  background: var(--accent, #6246ea);
  color: var(--on-accent, #ffffff);
  box-shadow: none;
  --kit-text: var(--on-accent, #ffffff);
  --kit-muted: var(--on-accent, #ffffff);
  --kit-accent: var(--on-accent, #ffffff);
  --kit-accent-text: var(--on-accent, #ffffff);
  --kit-on-accent: var(--accent, #6246ea);
  --kit-primary: var(--on-accent, #ffffff);
  --kit-on-primary: var(--accent, #6246ea);
  --kit-line: color-mix(in srgb, var(--on-accent, #ffffff) 24%, transparent);
  --kit-focus: var(--on-accent, #ffffff);
}

.mosaic-main :is([data-block="hero_form_split"], [data-block="contact_form_split"]) > .kit-section__inner > .kit-split > .kit-card {
  border-color: var(--kit-tile-line);
}

.mosaic-main :is([data-block="hero_form_split"], [data-block="contact_form_split"]) > .kit-section__inner > .kit-split > .kit-card > .kit-card__content {
  padding: var(--mosaic-pad);
}

/* ------------------------------------------------------------------ The enquiry form and the questions */

/* On a wide screen the enquiry form's intro is the accent tile at the left and the form a white tile at the right; the
   questions stand as tiles at the right of their heading, which stays in view. */
.mosaic-main [data-block="contact_form"] > .kit-section__inner > .kit-stack > .kit-form {
  padding: var(--mosaic-pad);
  border-radius: var(--kit-radius);
  background: var(--surface, #ffffff);
  color: var(--text-primary, #17161f);
  box-shadow: inset 0 0 0 1px var(--mosaic-line);
}

.mosaic-main [data-block="contact_form"] > .kit-section__inner > .kit-stack > .kit-stack {
  padding: var(--mosaic-pad);
  border-radius: var(--kit-radius);
  background: var(--accent, #6246ea);
  color: var(--on-accent, #ffffff);
  --kit-text: var(--on-accent, #ffffff);
  --kit-muted: var(--on-accent, #ffffff);
  --kit-accent: var(--on-accent, #ffffff);
  --kit-accent-text: var(--on-accent, #ffffff);
  --kit-on-accent: var(--accent, #6246ea);
  --kit-focus: var(--on-accent, #ffffff);
}

.mosaic-main [data-block="contact_form"] > .kit-section__inner > .kit-stack {
  gap: var(--kit-tile-gap, 1rem);
}

@media (min-width: 64rem) {
  .mosaic-main :is([data-block="contact_form"], [data-block="faq"]) > .kit-section__inner {
    --kit-w: var(--kit-width-normal);
  }

  .mosaic-main [data-block="contact_form"] > .kit-section__inner > .kit-stack {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: stretch;
  }

  .mosaic-main [data-block="contact_form"] > .kit-section__inner > .kit-stack > .kit-stack {
    justify-content: flex-end;
  }

  .mosaic-main [data-block="faq"] > .kit-section__inner > .kit-stack {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto auto 1fr;
    align-items: start;
    gap: 1rem clamp(2rem, 5vw, 5rem);
  }

  .mosaic-main [data-block="faq"] > .kit-section__inner > .kit-stack > * {
    grid-column: 1;
  }

  .mosaic-main [data-block="faq"] > .kit-section__inner > .kit-stack > .kit-accordion {
    grid-column: 2;
    grid-row: 1 / -1;
  }

  .mosaic-main [data-block="faq"] > .kit-section__inner > .kit-stack > .kit-heading-group {
    position: sticky;
    top: calc(var(--mosaic-head, 5rem) + 1.5rem);
  }
}

/* ------------------------------------------------------------------ Places, plans, quotations, people, logos */

/* The places a business serves: a cloud of pills in one tile. */
.mosaic-main [data-block="service_area"] .kit-grid {
  padding: var(--mosaic-pad);
  border-radius: var(--kit-radius);
  background: var(--surface, #ffffff);
  color: var(--text-primary, #17161f);
  box-shadow: inset 0 0 0 1px var(--mosaic-line);
}

.mosaic-main [data-block="service_area"] .kit-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.mosaic-main [data-block="service_area"] .kit-list-item {
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  max-width: 100%;
  padding: 0.45rem 0.95rem 0.45rem 0.75rem;
  border-radius: 999px;
  background: var(--mosaic-wash);
}

.mosaic-main [data-block="service_area"] .kit-list-item > :is(svg, .kit-icon) {
  width: 1rem;
  height: 1rem;
  color: var(--kit-accent-text);
}

/* Plans: tiles of one size side by side; the price is the big number. */
.mosaic-main [data-block="pricing_table"] .kit-card .kit-stat__value {
  font-size: clamp(2.25rem, 1.75rem + 1.4vw, 3rem);
}

.mosaic-main [data-block="pricing_table"] .kit-card > .kit-card__content {
  padding: var(--kit-card-pad);
}

/* A quotation tile: the words first, then the person, with their picture when there is one. */
.mosaic-main [data-block="testimonials"] .kit-card .kit-card__body > .kit-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1.25rem 0.85rem;
}

.mosaic-main [data-block="testimonials"] .kit-card .kit-quote {
  display: contents;
}

.mosaic-main [data-block="testimonials"] .kit-card .kit-quote__text {
  grid-column: 1 / -1;
  grid-row: 1;
}

.mosaic-main [data-block="testimonials"] .kit-card .kit-avatar {
  grid-column: 1;
  grid-row: 2;
}

.mosaic-main [data-block="testimonials"] .kit-card .kit-quote__author {
  grid-column: 2;
  grid-row: 2;
  margin-top: 0;
}

.mosaic-main [data-block="testimonials"] .kit-card .kit-row:not(:has(> .kit-avatar)) .kit-quote__author {
  grid-column: 1 / -1;
}

.mosaic-main [data-block="testimonials"] .kit-card > .kit-card__content {
  padding: var(--kit-card-pad);
}

/* People: a rounded-square portrait at the top of each tile, the words at the left. */
.mosaic-main [data-block="team_grid"] .kit-card .kit-avatar--large {
  width: 5.5rem;
  height: 5.5rem;
  margin-bottom: 0.5rem;
}

/* Logos and badges each sit on a small white tile. */
.mosaic-main :is([data-block="logo_strip"], [data-block="trust_badges"]) .kit-grid {
  --kit-gap: var(--kit-tile-gap, 1rem);
  gap: var(--kit-tile-gap, 1rem);
}

.mosaic-main :is([data-block="logo_strip"], [data-block="trust_badges"]) :is(.kit-grid, .kit-marquee__group) > * {
  display: grid;
  place-items: center;
  padding: clamp(0.85rem, 0.6rem + 1vw, 1.5rem);
  border-radius: 1.125rem;
  background: var(--surface, #ffffff);
  box-shadow: inset 0 0 0 1px var(--mosaic-line);
}

.mosaic-main :is([data-block="logo_strip"], [data-block="trust_badges"]) :is(.kit-grid, .kit-marquee__group) > * .kit-picture,
.mosaic-main :is([data-block="logo_strip"], [data-block="trust_badges"]) :is(.kit-grid, .kit-marquee__group) > .kit-picture {
  width: 100%;
  background: transparent;
}

.mosaic-main [data-block="accreditations"] .kit-card .kit-picture {
  background: transparent;
}

.mosaic-main [data-block="accreditations"] .kit-card .kit-picture img {
  object-position: left center;
}

.mosaic-main [data-block="review_badges"] .kit-card > .kit-card__content {
  padding: 1rem 1.35rem;
}

/* ------------------------------------------------------------------ Pictures */

/* A photo gallery with the theme's own arrangement is a bento of pictures: tiles of two sizes, a tall one among them
   when there are four or five. A gallery whose website chose a shape or a layout keeps even tiles in that shape
   (gallery-picture-shape.test.mjs). */
@media (min-width: 40rem) {
  .mosaic-main [data-block="image_gallery"][data-mosaic="bento"] .kit-balanced > .kit-picture {
    height: 100%;
    min-height: clamp(11rem, 16vw, 15rem);
    aspect-ratio: auto;
  }
}

@media (min-width: 75rem) {
  .mosaic-main [data-block="image_gallery"][data-mosaic="bento"] .kit-balanced > .kit-picture:nth-child(3n+1):last-child:not(:nth-child(4)) {
    min-height: 0;
    aspect-ratio: 21 / 9;
  }
}

.mosaic-main [data-block="image_gallery"] .kit-grid,
.mosaic-main [data-block="before_after"] .kit-grid {
  --kit-gap: var(--kit-tile-gap, 1rem);
  gap: var(--kit-tile-gap, 1rem);
}

/* A player or an outside frame stands in a tile. */
.mosaic-main [data-block="audio_player"] .kit-audio {
  padding: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
  border-radius: var(--kit-radius);
  background: var(--surface, #ffffff);
  color: var(--text-primary, #17161f);
  box-shadow: inset 0 0 0 1px var(--mosaic-line);
}

/* ------------------------------------------------------------------ Tiles of colour: openings, bands, invitations */

/* A section the kit draws as a band of colour or a photograph (an opening with a photo, a dark band, the invitation) is
   a big tile here, inset from the window's edges like every other tile. */
.mosaic-main .kit-section:is(.kit-section--inverse, .kit-section--accent, .kit-section--image),
.mosaic-main [data-block="cta_section"],
.mosaic-main [data-block="hero_slider"] {
  margin-inline: max(var(--mosaic-gutter), (100% - var(--mosaic-width)) / 2);
  border-radius: var(--mosaic-radius);
  --kit-gutter: var(--mosaic-pad);
}

.mosaic-main .kit-section:is(.kit-section--inverse, .kit-section--accent, .kit-section--image),
.mosaic-main [data-block="cta_section"] {
  margin-block: calc(var(--kit-pad-normal) * 0.5);
}

.mosaic-main [data-block="hero_slider"] {
  overflow: hidden;
  margin-block: 0.25rem calc(var(--kit-pad-normal) * 0.5);
}

/* The invitation without a photograph is the accent tile, with its own readable ink (on-accent on accent, a pair the
   colour contract keeps). The kit draws this block as a plain section, so every colour role is turned here the way the
   kit turns them in an accent band. */
.mosaic-main [data-block="cta_section"]:not(.kit-section--image) {
  background-color: var(--accent, #6246ea);
  color: var(--on-accent, #ffffff);
  --kit-section-bg: var(--accent, #6246ea);
  --kit-section-fg: var(--on-accent, #ffffff);
  --kit-text: var(--on-accent, #ffffff);
  --kit-muted: var(--on-accent, #ffffff);
  --kit-surface: color-mix(in srgb, var(--on-accent, #ffffff) 10%, transparent);
  --kit-surface-alt: color-mix(in srgb, var(--on-accent, #ffffff) 14%, transparent);
  --kit-primary: var(--on-accent, #ffffff);
  --kit-primary-hover: color-mix(in srgb, var(--on-accent, #ffffff) 88%, var(--accent, #6246ea));
  --kit-on-primary: var(--accent, #6246ea);
  --kit-accent: var(--on-accent, #ffffff);
  --kit-accent-text: var(--on-accent, #ffffff);
  --kit-on-accent: var(--accent, #6246ea);
  --kit-line: color-mix(in srgb, var(--on-accent, #ffffff) 24%, transparent);
  --kit-line-strong: color-mix(in srgb, var(--on-accent, #ffffff) 48%, transparent);
  --kit-soft: color-mix(in srgb, var(--on-accent, #ffffff) 14%, transparent);
  --kit-focus: var(--on-accent, #ffffff);
}

.mosaic-main [data-block="cta_section"] .kit-heading {
  font-size: clamp(2rem, 1.2rem + 3.2vw, 4rem);
  letter-spacing: calc(-0.04em * var(--mosaic-tight, 1));
  line-height: 1.06;
}

/* The full-width openings (a photo, a video, slides): a big photo tile, its words in a white tile at its lower left, so
   they read on any picture without a shade. On the home page the opening fills the first screen under the header. */
.mosaic-main :is([data-block="hero_fullwidth_image"], [data-block="hero_video"]).kit-section--image {
  display: flex;
  align-items: flex-end;
  min-height: clamp(26rem, 62vh, 40rem);
  padding: clamp(0.625rem, 0.4rem + 1vw, 1.25rem);
  background-image: var(--kit-section-image, none);
  --kit-gutter: 0px;
}

@media (max-width: 39.99rem) {
  .mosaic-main :is([data-block="hero_fullwidth_image"], [data-block="hero_video"]).kit-section--image {
    padding-top: clamp(9rem, 45vw, 13rem);
  }
}

.mosaic-main > .kit-root:first-child > :is([data-block="hero_fullwidth_image"], [data-block="hero_video"]).kit-section--image {
  min-height: max(26rem, min(calc(100svh - var(--mosaic-head, 5rem) - 1.25rem), 52rem));
  margin-top: 0.25rem;
}

.mosaic-main :is([data-block="hero_fullwidth_image"], [data-block="hero_video"]).kit-section--image > .kit-section__inner,
.mosaic-main [data-block="hero_slider"] .kit-slide__inner {
  position: relative;
  z-index: 1;
  width: auto;
  max-width: 40rem;
  margin: 0;
  padding: clamp(1.25rem, 0.8rem + 2vw, 2.75rem);
  border-radius: calc(var(--mosaic-radius) - 0.375rem);
  background: var(--surface, #ffffff);
  color: var(--text-primary, #17161f);
  text-align: start;
  --kit-text: var(--text-primary, #17161f);
  --kit-muted: var(--text-secondary, #55536a);
  --kit-surface: var(--surface, #ffffff);
  --kit-surface-alt: var(--surface-alt, #f7eee4);
  --kit-primary: var(--primary, #17161f);
  --kit-primary-hover: var(--primary-alt, #2d2b3a);
  --kit-on-primary: var(--on-primary, #ffffff);
  --kit-accent: var(--accent, #6246ea);
  --kit-accent-text: var(--accent-ink, #5133d8);
  --kit-on-accent: var(--on-accent, #ffffff);
  --kit-line: var(--border, #e3e2dc);
  --kit-line-strong: color-mix(in srgb, var(--text-primary, #17161f) 30%, transparent);
  --kit-soft: color-mix(in srgb, var(--accent, #6246ea) 12%, transparent);
  --kit-focus: var(--accent-ink, #5133d8);
  --kit-star: var(--accent-ink, #5133d8);
}

.mosaic-main :is([data-block="hero_fullwidth_image"], [data-block="hero_video"], [data-block="hero_slider"]) .kit-stack {
  gap: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
}

.mosaic-main :is([data-block="hero_fullwidth_image"], [data-block="hero_video"], [data-block="hero_slider"]) .kit-heading--1,
.mosaic-main :is([data-block="hero_fullwidth_image"], [data-block="hero_video"], [data-block="hero_slider"]) .kit-heading--2 {
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.5rem);
  letter-spacing: calc(-0.04em * var(--mosaic-tight, 1));
  line-height: 1.06;
}

/* The slides: each a photo tile with its words in a white tile, as the opening. */
.mosaic-main [data-block="hero_slider"] .kit-slide {
  align-items: flex-end;
  justify-content: flex-start;
  padding: clamp(0.625rem, 0.4rem + 1vw, 1.25rem) clamp(0.625rem, 0.4rem + 1vw, 1.25rem) clamp(3.5rem, 3rem + 1vw, 4.25rem);
  background-image: var(--kit-slide-image, none);
}

/* ------------------------------------------------------------------ Article body */

/* Running text on a white tile, a reading column wide. A blog post's date and author stand as chips over its title. */
.mosaic-article {
  padding: clamp(1rem, 0.6rem + 1.8vw, 2.5rem) var(--mosaic-gutter) var(--kit-pad-normal, clamp(2rem, 1.2rem + 2.6vw, 3.5rem));
}

.mosaic-article__inner {
  max-width: 50rem;
  margin-inline: auto;
}

.mosaic-article__header {
  display: grid;
  justify-items: start;
  gap: 1rem;
  margin-bottom: clamp(1.25rem, 1rem + 1vw, 2rem);
  padding-inline: clamp(0.25rem, 2vw, 1rem);
}

.mosaic-article__byline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  color: var(--text-secondary, #55536a);
  font-size: 0.8125rem;
}

.mosaic-article__byline > :is(time, span:not([aria-hidden])) {
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--surface, #ffffff);
  color: var(--text-primary, #17161f);
  box-shadow: inset 0 0 0 1px var(--mosaic-line);
}

.mosaic-article__byline > span[aria-hidden] {
  display: none;
}

.mosaic-article__header h1 {
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(2rem, 1.3rem + 2.8vw, 3.5rem);
  font-weight: var(--mosaic-heading-weight);
  letter-spacing: calc(-0.04em * var(--mosaic-tight, 1));
  line-height: 1.08;
  text-wrap: balance;
}

.mosaic-prose {
  padding: clamp(1.25rem, 0.6rem + 3vw, 3.25rem);
  border-radius: var(--mosaic-radius);
  background: var(--surface, #ffffff);
  color: var(--text-primary, #17161f);
  box-shadow: inset 0 0 0 1px var(--mosaic-line);
  line-height: 1.7;
}

.mosaic-prose > :first-child {
  margin-top: 0;
}

.mosaic-prose > :last-child {
  margin-bottom: 0;
}

.mosaic-prose :where(p, ul, ol, figure, table, blockquote, pre) {
  margin: 0 0 1.25em;
}

.mosaic-prose :where(h2, h3, h4) {
  margin: 1.8em 0 0.5em;
  font-family: var(--font-heading, sans-serif);
  font-weight: var(--mosaic-heading-weight);
  letter-spacing: calc(-0.025em * var(--mosaic-tight, 1));
  line-height: 1.22;
}

.mosaic-prose h2 {
  font-size: clamp(1.45rem, 1.25rem + 0.8vw, 1.85rem);
}

.mosaic-prose h3 {
  font-size: 1.3rem;
}

.mosaic-prose h4 {
  font-size: 1.1rem;
}

.mosaic-prose a {
  color: var(--accent-ink, #5133d8);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
}

.mosaic-prose blockquote {
  margin-inline: 0;
  padding: 1rem 1.25rem;
  border-radius: 1rem;
  background: var(--surface-alt, #f7eee4);
  color: var(--text-primary, #17161f);
}

.mosaic-prose img {
  display: block;
  border-radius: 1rem;
}

.mosaic-prose figcaption {
  margin-top: 0.5rem;
  color: var(--text-secondary, #55536a);
  font-size: 0.875rem;
}

.mosaic-prose :where(th, td) {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--mosaic-line);
  text-align: left;
}

/* A rule that sets figures to one width asks for lining figures again: font-variant-numeric replaces the inherited value. */
.mosaic-prose table {
  font-variant-numeric: lining-nums tabular-nums;
}

.mosaic-prose pre {
  overflow-x: auto;
  padding: 1rem;
  border-radius: 1rem;
  background: var(--surface-alt, #f7eee4);
  color: var(--text-primary, #17161f);
}

/* ------------------------------------------------------------------ Divider block */

.mosaic-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  max-width: calc(var(--mosaic-width) + 2 * var(--mosaic-gutter));
  margin-inline: auto;
  padding: clamp(1.25rem, 3vw, 2.25rem) var(--mosaic-gutter);
}

.mosaic-divider__line {
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--mosaic-line);
}

.mosaic-divider--dashed .mosaic-divider__line {
  height: 0;
  border-top: 2px dashed var(--mosaic-line);
  background: none;
}

/* Three small tiles: the accent, its wash and the second surface. */
.mosaic-divider--dotted span {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 0.2rem;
  background: var(--accent, #6246ea);
}

.mosaic-divider--dotted span:nth-child(2) {
  background: var(--mosaic-wash);
  box-shadow: inset 0 0 0 1px var(--mosaic-line);
}

.mosaic-divider--dotted span:nth-child(3) {
  background: var(--surface-alt, #f7eee4);
  box-shadow: inset 0 0 0 1px var(--mosaic-line);
}

/* ------------------------------------------------------------------ Footer */

/* The footer is a small mosaic on the page itself: a tile for the name, one for the pages, one for the contact
   details, and in the large footer an invitation on the accent tile. The tiles wrap into full rows on any screen. */
.mosaic-footer {
  margin-top: clamp(1rem, 0.5rem + 2vw, 2.5rem);
  padding: 0 var(--mosaic-gutter) clamp(1rem, 0.75rem + 1vw, 1.75rem);
  color: var(--text-primary, #17161f);
}

.mosaic-footer__inner {
  max-width: var(--mosaic-width);
  margin-inline: auto;
}

.mosaic-footer__tiles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mosaic-gap);
}

.mosaic-footer__tile {
  display: grid;
  flex: 1 1 12rem;
  align-content: start;
  gap: 0.5rem;
  min-width: 0;
  padding: clamp(1.25rem, 0.9rem + 1vw, 1.875rem);
  border-radius: var(--mosaic-radius);
  background: var(--surface, #ffffff);
  color: var(--text-primary, #17161f);
  box-shadow: inset 0 0 0 1px var(--mosaic-line);
}

.mosaic-footer__about {
  flex: 1.6 1 17rem;
  justify-items: start;
  gap: 0.85rem;
  background: var(--surface-alt, #f7eee4);
  color: var(--text-primary, #17161f);
  box-shadow: none;
}

.mosaic-footer__contact {
  flex: 1.3 1 15rem;
}

.mosaic-footer__closing {
  display: flex;
  flex: 3 1 26rem;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  background: var(--accent, #6246ea);
  color: var(--on-accent, #ffffff);
  box-shadow: none;
}

.mosaic-footer__brand {
  display: inline-flex;
  max-width: 100%;
  color: inherit;
  text-decoration: none;
}

.mosaic-footer .mosaic-brand__name {
  max-width: 100%;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
}

.mosaic-footer .mosaic-brand__logo,
.mosaic-footer .brand-logo-original {
  max-height: 2.75rem;
  width: auto;
}

.mosaic-footer .logo-mask {
  background-color: var(--text-primary, #17161f) !important;
}

.mosaic-footer__invite {
  max-width: 22ch;
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.75rem);
  font-weight: var(--mosaic-heading-weight);
  letter-spacing: calc(-0.04em * var(--mosaic-tight, 1));
  line-height: 1.08;
  text-wrap: balance;
}

.mosaic-footer__tagline,
.mosaic-footer__contact p:not(.mosaic-footer__title),
.mosaic-footer__copyright {
  margin: 0;
  color: var(--text-secondary, #55536a);
  font-size: 0.9375rem;
}

.mosaic-footer__title {
  margin: 0 0 0.35rem;
  color: var(--text-secondary, #55536a);
  font-size: 0.8125rem;
  font-weight: var(--mosaic-body-strong);
  line-height: 1.4;
}

.mosaic-footer__links,
.mosaic-footer__contact {
  display: grid;
  align-content: start;
  gap: 0.4rem;
  font-style: normal;
}

.mosaic-footer__links a,
.mosaic-footer__contact a,
.mosaic-footer__legal a,
.mosaic-footer__inline a {
  width: fit-content;
  max-width: 100%;
  color: var(--text-primary, #17161f);
  font-size: 0.9688rem;
  text-decoration: none;
  overflow-wrap: break-word;
}

.mosaic-footer__links a:hover,
.mosaic-footer__contact a:hover,
.mosaic-footer__legal a:hover,
.mosaic-footer__inline a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.mosaic-footer__social a {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.75rem;
  background: var(--surface, #ffffff);
  color: var(--text-primary, #17161f);
}

.mosaic-footer__social a:hover {
  box-shadow: inset 0 0 0 1px currentColor;
}

.mosaic-footer__bottom,
.mosaic-footer__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
}

.mosaic-footer__bottom {
  padding: 1.1rem clamp(0.25rem, 1.5vw, 1rem) 0;
}

.mosaic-footer__bottom .mosaic-footer__copyright,
.mosaic-footer__legal a {
  color: var(--text-secondary, #55536a);
  font-size: 0.875rem;
}

.mosaic-footer__legal,
.mosaic-footer__inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
}

.mosaic-footer__line {
  padding-block: clamp(1rem, 0.75rem + 1vw, 1.5rem);
}

/* ------------------------------------------------------------------ Page not found */

/* Two tiles: the number big on the accent tile, and the words with the way home. */
.mosaic-not-found {
  padding: clamp(1rem, 0.6rem + 1.8vw, 2.5rem) var(--mosaic-gutter) var(--kit-pad-normal, 3rem);
}

.mosaic-not-found__grid {
  display: grid;
  gap: var(--mosaic-gap);
  max-width: 64rem;
  margin-inline: auto;
}

.mosaic-not-found__number {
  display: grid;
  place-items: center;
  min-height: clamp(10rem, 30vw, 22rem);
  margin: 0;
  border-radius: var(--mosaic-radius);
  background: var(--accent, #6246ea);
  color: var(--on-accent, #ffffff);
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(5rem, 3rem + 9vw, 10rem);
  font-variant-numeric: lining-nums tabular-nums;
  font-weight: var(--mosaic-heading-weight);
  letter-spacing: calc(-0.06em * var(--mosaic-tight, 1));
  line-height: 1;
}

.mosaic-not-found__words {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 1rem;
  padding: var(--mosaic-pad);
  border-radius: var(--mosaic-radius);
  background: var(--surface, #ffffff);
  color: var(--text-primary, #17161f);
  box-shadow: inset 0 0 0 1px var(--mosaic-line);
}

.mosaic-not-found h1 {
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem);
  font-weight: var(--mosaic-heading-weight);
  letter-spacing: calc(-0.04em * var(--mosaic-tight, 1));
  line-height: 1.1;
  text-wrap: balance;
}

.mosaic-not-found__words > p {
  margin: 0;
  color: var(--text-secondary, #55536a);
}

/* The main pages as pills (the shared list centres itself with an inline style, which only an important rule outweighs). */
.mosaic-not-found .pgs-not-found-links ul {
  justify-content: flex-start !important;
  gap: 0.5rem !important;
  margin-top: 0.75rem !important;
}

.mosaic-not-found .pgs-not-found-links a {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: var(--mosaic-soft);
  font-size: 0.9375rem;
  text-decoration: none;
}

@media (min-width: 48rem) {
  .mosaic-not-found__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

/* ------------------------------------------------------------------ Form thanks */

.mosaic-form-success {
  display: grid;
  gap: 0.5rem;
  padding: 1.5rem 0;
}

.mosaic-form-success h3 {
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: 1.5rem;
  font-weight: var(--mosaic-heading-weight);
  letter-spacing: calc(-0.025em * var(--mosaic-tight, 1));
  line-height: 1.25;
}

.mosaic-form-success p {
  margin: 0;
  color: inherit;
}

/* ------------------------------------------------------------------ The phone action bar */

/* The shared bar (resilience.css) on the theme's surface, with its button. */
body .theme-action-bar {
  border-top: 1px solid var(--mosaic-line);
  background: var(--surface, #ffffff);
}

/* ------------------------------------------------------------------ Without scripts, and with less motion */

/* Without scripts the menu button does nothing, so it is hidden and the phone menu is a plain list under the bar on a
   phone: every page stays reachable (verify-theme-browser.mjs --chrome --no-js). */
@media (scripting: none) {
  .mosaic-menu-button {
    display: none !important;
  }

  .mosaic-drawer[hidden] {
    position: static;
    display: block;
    max-height: none;
    margin-top: 0.5rem;
    box-shadow: 0 0 0 1px var(--mosaic-line);
  }
}

@media (scripting: none) and (min-width: 64rem) {
  .mosaic-drawer[hidden] {
    display: none;
  }
}

/* Nothing in this theme moves for a visitor who asks for less motion. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}