* {
  font-optical-sizing: auto;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@view-transition {
  navigation: auto;
}

@font-face {
  font-family: "DM Sans";
  src:
    local("DM Sans"),
    url("../fonts/dm-sans-v17-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "DM Sans";
  src:
    local("DM Sans"),
    url("../fonts/dm-sans-v17-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: bold;
}

@font-face {
  font-family: "DM Sans";
  src:
    local("DM Sans"),
    url("../fonts/dm-sans-v17-latin-900.woff2") format("woff2");
  font-weight: 900;
  font-style: bold;
}

html,
body {
  padding: 0;
  margin: 0;
}

html {
  scroll-behavior: smooth;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;

  font-size: 16px;


  --border-radius-rounded: 0.25rem;
  --border-radius-blocklink: 0.5rem;
  --inner-width: 70rem;
  --readable-line-length: 40rem;

  --font-size-h1: 1.8rem;
  --font-size-h2: 1.6rem;
  --font-size-h3: 1.42rem;
  --font-size-h4: 1.27rem;
  --font-size-h5: 1.13rem;
  --font-size-h6: 1rem;
}

@media (min-width: 480px) {
  html {
    --font-size-h1: 3.05rem;
    --font-size-h2: 2.44rem;
    --font-size-h3: 1.95rem;
    --font-size-h4: 1.56rem;
    --font-size-h5: 1.25rem;
    --font-size-h6: 1rem;
  }
}

body {
  min-height: 100vh;
  width: 100%;
  font-family: "DM Sans", sans-serif;
  font-weight: false;
  line-height: 1.4;
}

p {
  font-size: 1em;
  margin: 0 0 1em 0;

  &:last-child {
    margin-bottom: 0;
  }
}

h1,
h2,
h3,
h4,
h5 {
  font-family: "DM Sans", sans-serif;
  font-weight: 400;
  font-variation-settings: "wght" 400;
  line-height: 1.15;
  margin: 0 0 0.5em 0;
}

h1 {
  font-family: "DM Sans", sans-serif;
  font-weight: 400;
  font-variation-settings: "wght" 400;
  margin-top: 0;
  font-size: var(--font-size-h1);
}

h2 {
  font-size: var(--font-size-h2);
}

h3 {
  font-size: var(--font-size-h3);
}

h4 {
  font-size: var(--font-size-h4);
}

h5 {
  font-size: var(--font-size-h5);
}

h6 {
  font-size: var(--font-size-h6);
}

.text-caption {
  font-size: 0.8em;
}

small,
.text-small {
  font-size: 0.64em;
}

a {
  color: var(--link-text-color);
  text-decoration: none;
  cursor: pointer;
}

@media (hover: hover) {
  a:hover {
    color: var(--link-text-hover-color);
    text-decoration: underline;
  }
}

/* Selected text */
::selection,
::target-text {
  background-color: var(--color-butter-50);
}

body {
  /* Opaque colours */
  --color-candyfloss: rgb(255, 173, 222);
  --color-lilac: rgb(231, 186, 250);
  --color-lavender: rgb(173, 191, 253);
  --color-swimmingpool: rgb(145, 235, 235);
  --color-mint: rgb(149, 240, 197);
  --color-lime: rgb(210, 242, 155);
  --color-butter: rgb(255, 227, 117);
  --color-apricot: rgb(255, 196, 140);
  --color-black: rgb(0, 0, 0);
  --color-smoke: rgb(234, 236, 235);

  /* Transparent colours */
  --color-candyfloss-25: rgba(255, 173, 222, 0.25);
  --color-lilac-25: rgba(231, 186, 250, 0.25);
  --color-lavender-25: rgba(173, 191, 253, 0.25);
  --color-swimmingpool-25: rgba(145, 235, 235, 0.25);
  --color-mint-25: rgba(149, 240, 197, 0.25);
  --color-lime-25: rgba(210, 242, 155, 0.25);
  --color-butter-25: rgba(255, 227, 117, 0.25);
  --color-apricot-25: rgba(255, 196, 140, 0.25);

  --color-butter-50: rgba(255, 227, 117, 0.5);

  /* Opaque gradients */
  --gradient-candyfloss-lilac: linear-gradient(0deg,
      var(--color-candyfloss) 0%,
      var(--color-candyfloss) 10%,
      var(--color-lilac) 90%,
      var(--color-lilac) 100%);
  --gradient-lilac-lavender: linear-gradient(0deg,
      var(--color-lilac) 0%,
      var(--color-lilac) 10%,
      var(--color-lavender) 90%,
      var(--color-lavender) 100%);
  --gradient-lavender-swimmingpool: linear-gradient(0deg,
      var(--color-lavender) 0%,
      var(--color-lavender) 10%,
      var(--color-swimmingpool) 90%,
      var(--color-swimmingpool) 100%);
  --gradient-swimmingpool-mint: linear-gradient(0deg,
      var(--color-swimmingpool) 0%,
      var(--color-swimmingpool) 10%,
      var(--color-mint) 90%,
      var(--color-mint) 100%);
  --gradient-mint-lime: linear-gradient(0deg,
      var(--color-mint) 0%,
      var(--color-mint) 10%,
      var(--color-lime) 90%,
      var(--color-lime) 100%);
  --gradient-lime-butter: linear-gradient(0deg,
      var(--color-lime) 0%,
      var(--color-lime) 10%,
      var(--color-butter) 90%,
      var(--color-butter) 100%);
  --gradient-butter-apricot: linear-gradient(0deg,
      var(--color-butter) 0%,
      var(--color-butter) 10%,
      var(--color-apricot) 90%,
      var(--color-apricot) 100%);
  --gradient-apricot-candyfloss: linear-gradient(0deg,
      var(--color-apricot) 0%,
      var(--color-apricot) 10%,
      var(--color-candyfloss) 90%,
      var(--color-candyfloss) 100%);

  --gradient-all: repeating-linear-gradient(150deg,
        var(--color-candyfloss),
        var(--color-lilac) 50vh,
        var(--color-lavender) 100vh,
        var(--color-swimmingpool) 150vh,
        var(--color-mint) 200vh,
        var(--color-lime) 250vh,
        var(--color-butter) 300vh,
        var(--color-apricot) 350vh,
        var(--color-candyfloss) 400vh);

  /* Transparent gradients */
  --gradient-candyfloss-lilac-25: linear-gradient(0deg,
      var(--color-candyfloss-25) 0%,
      var(--color-candyfloss-25) 10%,
      var(--color-lilac-25) 90%,
      var(--color-lilac-25) 100%);
  --gradient-lilac-lavender-25: linear-gradient(0deg,
      var(--color-lilac-25) 0%,
      var(--color-lilac-25) 10%,
      var(--color-lavender-25) 90%,
      var(--color-lavender-25) 100%);
  --gradient-lavender-swimmingpool-25: linear-gradient(0deg,
      var(--color-lavender-25) 0%,
      var(--color-lavender-25) 10%,
      var(--color-swimmingpool-25) 90%,
      var(--color-swimmingpool-25) 100%);
  --gradient-swimmingpool-mint-25: linear-gradient(0deg,
      var(--color-swimmingpool-25) 0%,
      var(--color-swimmingpool-25) 10%,
      var(--color-mint-25) 90%,
      var(--color-mint-25) 100%);
  --gradient-mint-lime-25: linear-gradient(0deg,
      var(--color-mint-25) 0%,
      var(--color-mint-25) 10%,
      var(--color-lime-25) 90%,
      var(--color-lime-25) 100%);
  --gradient-lime-butter-25: linear-gradient(0deg,
      var(--color-lime-25) 0%,
      var(--color-lime-25) 10%,
      var(--color-butter-25) 90%,
      var(--color-butter-25) 100%);
  --gradient-butter-apricot-25: linear-gradient(0deg,
      var(--color-butter-25) 0%,
      var(--color-butter-25) 10%,
      var(--color-apricot-25) 90%,
      var(--color-apricot-25) 100%);
  --gradient-apricot-candyfloss-25: linear-gradient(0deg,
      var(--color-apricot-25) 0%,
      var(--color-apricot-25) 10%,
      var(--color-candyfloss-25) 90%,
      var(--color-candyfloss-25) 100%);

  /* Derived colours */
  --panel-bg: rgba(255, 255, 255, 0.2);
  --panel-dark-bg: rgba(0, 0, 0, 0.05);
  --panel-shadow: 0 0 0.125em rgba(255, 255, 255, 0.2);
  --panel-dark-shadow: 0 0 0.125em rgba(0, 0, 0, 0.05);
  --body-text-color: black;
  --radial-glow-color: rgba(255, 255, 255, 1.0);
  --cta-border-color: rgba(0, 0, 0, 0.25);
  --cta-background-color: rgba(255, 255, 255, 0.125);
  --cta-shadow-color: rgba(255, 255, 255, 0.4);
  --cta-text-color: rgba(0, 0, 0, 0.6);
  --input-border-color: rgba(0, 0, 0, 0.05);
  --input-background-color: rgba(0, 0, 0, 0.25);
  --input-shadow-color: rgba(0, 0, 0, 0.1);
  --input-text-color: rgba(0, 0, 0, 0.6);
  --link-text-color: color-mix(in hsl, var(--color-lavender) 40%, black 60%);
  --link-text-hover-color: color-mix(in hsl, var(--color-lavender) 60%, black 40%);
  --callout-shadow-color: rgba(255, 255, 255, 0.2);
  --callout-background-color: var(--panel-bg);
  --callout-text-color: var(--body-text-color);
  --application-background-color: rgba(255, 255, 255, 0.25);
  --identity-background-color: rgba(255, 255, 255, 0.25);
  --application-plus-identity-color: rgba(255, 255, 255, 0.375);

  background-color: var(--color-candyfloss);
  background: var(--gradient-all);
  color: var(--body-text-color);
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

@media screen and (prefers-color-scheme: dark) {
  body {
    /* TODO: make these new base colours, not renamed */
    --color-candyfloss: hsl(324, 80%, 34%);
    --color-lilac: hsl(282, 66%, 35%);
    --color-lavender: hsl(227, 75%, 34%);
    --color-swimmingpool: hsl(180, 49%, 25%);
    --color-mint: hsl(152, 55%, 26%);
    --color-lime: hsl(82, 57%, 28%);
    --color-butter: hsl(48, 80%, 23%);
    --color-apricot: hsl(29, 80%, 27%);
    --color-black: rgb(0, 0, 0);
    --color-smoke: hsl(150, 5%, 82%);

    --panel-bg: rgba(255, 255, 255, 0.1);
    --panel-dark-bg: rgba(0, 0, 0, 0.05);
    --panel-shadow: 0 0 0.125em rgba(255, 255, 255, 0.1);
    --panel-dark-shadow: 0 0 0.125em rgba(0, 0, 0, 0.025);
    --body-text-color: var(--color-smoke);
    --radial-glow-color: rgba(255, 255, 255, 0.4);
    --cta-border-color: rgba(255, 255, 255, 0.25);
    --cta-background-color: rgba(255, 255, 255, 0.125);
    --cta-shadow-color: rgba(0, 0, 0, 0.4);
    --cta-text-color: rgba(255, 255, 255, 0.6);
    --input-border-color: rgba(255, 255, 255, 0.45);
    --input-background-color: rgba(0, 0, 0, 0.25);
    --input-shadow-color: rgba(0, 0, 0, 0.1);
    --input-text-color: rgba(255, 255, 255, 1.0);
    --callout-shadow-color: rgba(0, 0, 0, 0.05);
    --callout-background-color: var(--panel-bg);
    --callout-text-color: var(--body-text-color);
    --application-background-color: rgba(255, 255, 255, 0.125);
    --identity-background-color: rgba(255, 255, 255, 0.125);
    --application-plus-identity-color: rgba(255, 255, 255, 0.1875);

    --link-text-color: color-mix(in hsl, var(--color-lavender) 40%, white 60%);
    --link-text-hover-color: color-mix(in hsl, var(--color-lavender) 60%, white 40%);
  }
}

.form-item {
  margin-bottom: 1em;

  label {
    font-size: var(--font-size-h5);
    font-weight: 400;
  }

  .description {
    text-align: right;
  }
}

.form-item--error-message,
.mauticform-errormsg {
  background-color: var(--color-apricot);
  border-radius: 0 0 var(--border-radius-rounded) var(--border-radius-rounded);
  padding: 0 1em;
}

label {
  display: block;
  margin-bottom: 0.25em;
}

input[type="date"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
textarea,
select {
  background-color: var(--input-background-color);
  border-radius: var(--border-radius-rounded);
  border: solid 0.125rem var(--input-border-color);
  box-shadow: inset 0 0.125rem 0.25rem var(--input-shadow-color);
  color: var(--input-text-color);
  display: block;
  font-size: 1rem;
  margin: 0;
  padding: 0.5rem 1rem;

  &.error {
    border-color: var(--color-apricot);
  }
}

input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"],
input[type="week"],
textarea {
  width: 100%;
}

select {
  width: auto;
  max-width: 100%;
  appearance: base-select;
  /* TODO: box-shadow not inset */
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);

  &.error {
    border-color: var(--color-apricot);
  }
}

button,
.button,
input[type="submit"] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius-rounded);
  line-height: 1;
  margin-block-end: 1em;
  width: 100%;
  font-size: var(--font-size-h5);
  text-align: center;
  background-color: rgba(255, 255, 255, 0.6);
  border: 0.125rem solid transparent;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(0.5em);
  appearance: none;
}

@media (hover: hover) {

  button:hover,
  .button:hover {
    color: var(--body-text-color);
    text-decoration: none;
    background-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
  }
}

/* Use .columns and .column when we want to do alyout within a content block. Otherwise use semantic classes. */
.columns {
  word-wrap: break-word;
  gap: 2em;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  flex-direction: row;
}

.column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  overflow: visible;
  flex-basis: 16rem;
  flex-grow: 1;
  min-width: 16rem;
}

.dialog-off-canvas-main-canvas {
  flex-basis: 100vh;
  display: flex;
  flex-direction: column;
}

.region {
  position: relative;
}

.region--above-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  .menu--account {
    position: absolute;
    top: 1em;
    right: 1em;
    left: auto;
  }
}

.page {
  flex-basis: 100vh;
  justify-content: space-between;
  display: flex;
  flex-direction: column;

  main {
    flex-grow: 1;

    .region--content section:last-of-type {
      /* We pad this instead of main because it might have a background colour, and we don't want to leave a gap before the footer */
      padding-bottom: 8rem;
    }
  }
}
/* Special cases for page padding where we want the last item to sit directly above the footer */
.path-frontpage .page main {
  padding-bottom: 0;
}

.region>section,
.page>header,
.page>footer {
  padding: 2rem 2rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  gap: 1rem;

  .actions {
    justify-content: flex-end;
  }
}
.page>footer {
  padding: 4rem 2rem 2rem 2rem;
}

@media (min-width: 480px) {

  .region>section,
  .page>header,
  .page>footer {
    padding: 2rem 4rem 2rem 4rem;
    gap: 2rem;
  }
}

@media (min-width: 1280px) {

  .region>section,
  .page>header,
  .page>footer {
    padding: 4rem 8rem 4rem 8rem;
    gap: 4rem;
  }
}

.page>header {
  padding-bottom: 1em;
  min-height: 20vh;
  background: transparent;
  background-image: url(../images/bg_hero.png);
  background-size: 100% 100%;
  padding: 2rem 2rem 1rem 2rem;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;

  .hero-inner {
    flex-grow: 1;
    flex-shrink: 0;
    display: flex;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    .region--header {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }
  }

  .tagline {
    font-size: var(--font-size-h3);
    line-height: 1.4;
    margin: 0 2rem 0 0;
  }

  h1 {
    margin: 0;
    font-size: 1rem;

    >a {
      display: block;
    }
  }

  img {
    margin: 1rem 0 1rem -1rem;
    max-width: 40rem;
    filter: drop-shadow(0 0 0.125em rgba(255, 255, 255, 0.5)) drop-shadow(0 0 0.25em rgba(255, 255, 255, 0.5));
  }
}
@media screen and (prefers-color-scheme: dark) {
  .page>header {
    background-image: url(../images/bg_hero_dark.png);

    img {
      filter: drop-shadow(0 0 0.125em rgba(0, 0, 0, 0.25)) drop-shadow(0 0 0.25em rgba(0, 0, 0, 0.25));
    }
  }
}

@media (min-width: 480px) {
  .page>header {
    padding: 4rem 4rem 1rem 4rem;

    .tagline {
      margin: 0;
    }

    img {
      margin-left: -2rem
    }
  }
}

@media (min-width: 1280px) {
  .page>header {
    padding: 8rem 8rem 1rem 8rem;

    img {
      margin-left: -2rem
    }
  }
}

.page>footer {
  position: relative;

  &:before {
    content: "";
    width: 8rem;
    height: 8rem;
    position: absolute;
    top: -4rem;
    left: auto;
    right: auto;
    background-image: url(../images/magnificent-star.svg);
    background-size: contain;
    filter: drop-shadow(0 0 0.125em rgba(255, 255, 255, 0.5)) drop-shadow(0 0 0.25em rgba(255, 255, 255, 0.5));
  }
}
@media screen and (prefers-color-scheme: dark) {
  .page>footer:before {
    filter: drop-shadow(0 0 0.125em rgba(0, 0, 0, 0.25)) drop-shadow(0 0 0.25em rgba(0, 0, 0, 0.25));
  }
}

.footer-inner {
  flex-grow: 1;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  .region--footer {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    >section {
      padding: 0;
    }
  }
}

@media (min-width: 480px) {
  .page>footer .footer-inner .region--footer>section {
    padding: 0;
  }
}

@media (min-width: 1280px) {
  .page>footer .footer-inner .region--footer>section {
    padding: 0;
  }
}

.section-inner,
.hero-inner,
.footer-inner {
  max-width: var(--inner-width);
  width: 100%;
}

a.cta,
.cta a,
.field--name-field-call-to-action-destination a,
.field--name-field-calls-to-action a {
  align-items: center;
  backdrop-filter: blur(0.5em);
  background-color: var(--cta-background-color);
  border-radius: var(--border-radius-blocklink);
  border: solid 0.125rem var(--cta-border-color);
  box-shadow: 0 0 1rem var(--cta-shadow-color);
  color: var(--cta-text-color);
  display: flex;
  font-family: "DM Sans", sans-serif;
  font-size: var(--font-size-h5);
  font-weight: 400;
  gap: 1em;
  justify-content: center;
  line-height: 1;
  margin: 0 0 0 auto;
  max-width: 25rem;
  padding: 1em 2em 1em 5rem;
  position: relative;
  text-decoration: none;
  width: 100%;
}

a.cta:before,
.cta a:before,
.field--name-field-call-to-action-destination a:before,
.field--name-field-calls-to-action a:before {
  content: "";
  background-image: url(../images/cta-arrow.svg);
  width: 3rem;
  aspect-ratio: calc(256/215);
  display: inline-block;
  background-size: contain;
  vertical-align: middle;
  position: absolute;
  left: 1rem;
}

@media (hover: hover) {

  a.cta:hover,
  .cta a:hover {
    background-color: rgba(0, 0, 0, 0.125);
    border-color: rgba(0, 0, 0, 0.25);
    text-decoration: none;
  }
}

.region>.block-local-tasks-block {
  background: white;
  padding: 0;

  ul {
    display: flex;
    margin: 0;
    padding: 0;

    li {
      list-style: none;
      padding: 0.5em 1em;
    }
  }
}

.region>.block-page-title-block {
  padding-bottom: 0;
}

.block-views-blockselling-points-block-1,
.block-pricing-summary,
.block-webform-tell-us-what-you-need {
  background-color: var(--panel-bg);
  box-shadow: 0 0 0.25em rgba(255, 255, 255, 0.2);
}

.page>footer {
  background-color: rgba(0, 0, 0, 0.05);
  box-shadow: 0 0 0.25em rgba(0, 0, 0, 0.05);
}

.view {
  display: flex;
  flex-direction: column;
  gap: 2rem;

  .view-header {
    /* TODO: Replace with semantic class */
    .column {
      flex-grow: 0;
    }
  }
  .view-filters {
    .button {
      font-size: var(--font-size-h6);
    }
  }

  .views-exposed-form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: end;
    gap: 1rem;

    .form-item,
    .button {
      margin: 0;
    }

    .form-actions {
      width: 100%;
    }
  }

  .view-content {
    word-wrap: break-word;
    gap: 2rem;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
  }

  .views-row {
    display: flex;
    flex-direction: column;
    overflow: visible;
    align-items: center;
    gap: 1em;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    max-width: 40ch;
  }
}

@media (min-width: 480px) {
  .view {
    .view-content {
      gap: 4rem;
      grid-template-columns: 1fr 1fr;
    }
    .views-exposed-form {
      gap: 2rem;
      justify-content: flex-end;

      .form-actions {
        width: auto;
      }
    }
  }
}
@media (min-width: 960px) {
  .view {
    .view-content {
      grid-template-columns: 1fr 1fr 1fr;
    }
  }
}

.view-selling-points {
  .views-row {
    .block-content--type-selling-point .block-content__content {
      display: flex;
      flex-direction: column;
      gap: 1rem;

      .field--name-field-selling-point-image {
        flex-grow: 0;
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        background: radial-gradient(circle closest-side at center, var(--radial-glow-color), transparent);
        margin-bottom: 1rem;

        img {
          display: block;
          width: 100%;
          max-width: 12rem;
          height: auto;
        }
      }
      /* TODO: can I make this a proper h2? */
      .field--name-field-title {
        font-family: "DM Sans", sans-serif;
        font-weight: 400;
        font-variation-settings: "wght" 400;
        line-height: 1.15;
        margin: 0;
        font-size: var(--font-size-h3);
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
      }
    }



    .field--name-field-blurb {
      flex-grow: 1;
    }

    .cta,
    .cta a {
      width: 100%;
    }
  }
}
@media (min-width: 480px) {
  .view-selling-points {
    .views-row {
      .block-content--type-selling-point .block-content__content {
        .field--name-field-selling-point-image {
          margin-bottom: 0;

          img {
            max-width: none;
          }
        }
        .field--name-field-title {
          min-height: 2.5em;
        }
      }
    }
  }
}

.view-applications,
.view-featured-applications,
.view-application-navigation {
  gap: 2rem;

  .view-header {

    p {
      max-width: var(--readable-line-length);
    }
  }

  .view-content {
    /* Room for logos on small screens */
    margin: 0 0 0 1.25rem;
  }

  .views-row {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
  }

  .views-field-application {
    height: 100%;
  }

  .application {
    border-radius: var(--border-radius-blocklink);
    padding: 0;
    background-color: var(--application-background-color);
    gap: 0;
    flex-basis: 16rem;
    width: 100%;
    justify-content: flex-start;
    display: block;
    color: black;
    font-weight: 400;
    height: 100%;


    .image {
      width: 100%;

      img {
        border-radius: 0.5rem 0.5rem 0 0;
        background: gray;
        width: 100%;
        height: auto;
        aspect-ratio: 1.78;
        object-fit: cover;
        line-height: 0;
        display: block;
      }
    }

    /* Hack to group fields */
    .identity {
      background-color: var(--identity-background-color);
      color: var(--body-text-color);
      width: 100%;
      padding: 1rem 1rem 1rem 3.5rem;
      position: relative;
      margin-bottom: 0;
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      h3 {
        font-family: "DM Sans", sans-serif;
        font-weight: 400;
        font-variation-settings: "wght" 400;
        line-height: 1.15;
        margin: 0;
        font-size: var(--font-size-h3);
      }

      p {
        padding: 0;
        margin: 0;
      }
    }

    .blurb {
      width: 100%;
      padding: 1em 0;
      margin: 0;
      flex-shrink: 1;
      flex-basis: 100%;
      color: var(--body-text-color);
    }

    .application-logo {
      position: absolute;
      left: -2.5rem;
      top: calc(50% - 2.5rem);
      background-color: rgba(255, 255, 255, 0.5);
      border-radius: 9999px;
      padding: 0.5rem;
      width: 5rem;
      height: 5rem;
      box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.2);

      >img {
        width: 4em;
        height: 4em;
        position: absolute;
      }
    }

    p {
      padding: 0 2em 0 2em;
    }
  }

  .view-footer {
    .field {
      padding: 1rem 0;
    }

    a {
      font-size: var(--font-size-h5);
      font-weight: 400;
    }

    a:before {
      content: "";
      background-image: url(../images/cta-arrow.svg);
      width: 3rem;
      aspect-ratio: calc(256/215);
      display: inline-block;
      margin-right: 1em;
      background-size: contain;
      vertical-align: middle;
    }
  }

  @media (hover: hover) {
    a.application:hover {
      background-color: rgba(0, 0, 0, 0.125);
      border-color: rgba(0, 0, 0, 0.25);
      text-decoration: none;
    }
  }
}
@media (min-width: 480px) {
  .view-applications,
  .view-featured-applications {
    gap: 4rem;

    .view-content {
      margin: 0;
    }

    .application {
      .identity {
        h3 {
          margin-bottom: 0.5rem;
        }
      }
    }
  }
}
.view-applications {
  display: grid;
  align-items: stretch;
  gap: 4rem;

  .view-header,
  .view-footer {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  >.field {
    flex-grow: 1;
    flex-basis: 100%;
    flex-shrink: 1;
  }
}
@media (min-width: 480px) {
  .view-applications {
    display: grid;
    grid-template-columns: 1fr 1fr;

    .view-header {
      grid-column-start: 1;
      grid-column-end: 2;

      grid-template-columns: 1fr;
    }
    .view-filters {
      grid-column-start: 2;
      grid-column-end: 3;
    }
    .view-content {
      grid-column-start: 1;
      grid-column-end: 3;
    }
    .view-footer {
      grid-column-start: 1;
      grid-column-end: 3;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
    }
  }
}

@media (min-width: 960px) {
  .view-applications {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;

    .view-header {
      grid-column-start: 1;
      grid-column-end: 3;

      grid-template-columns: 1fr;
    }
    .view-filters {
      grid-column-start: 3;
      grid-column-end: 4;
    }
    .view-content {
      grid-column-start: 1;
      grid-column-end: 4;
    }
    .view-footer {
      grid-column-start: 1;
      grid-column-end: 4;

      grid-template-columns: 1fr 1fr 1fr;
    }
  }
}

.view-featured-applications,
.view-application-navigation {

  /* Ensure that we don't get a space below the identity with a different background colour where a blurb would be, because we're not using the blurb in the featured applications view. */
  .application {
    background-color: var(--application-plus-identity-color);

    .identity {
      background-color: transparent;
    }
  }
}
.view-featured-applications {
  .view-footer {
    display: flex;
    justify-content: flex-end;
    gap: 2rem;
    align-items: flex-start;
  }
}
.view-application-navigation {
  .view-content {
    gap: 1rem 2rem;
    grid-template-columns: 1fr 1fr;
  }

  .application {
    h4 {
      margin: 0;
      font-size: var(--font-size-h6)
    }
    .application-logo {
      left: -1.25rem;
      top: calc(50% - 1.25rem);
      padding: 0.25rem;
      width: 2.5rem;
      height: 2.55rem;
      box-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.2);

      >img {
        width: 2em;
        height: 2em;
        position: absolute;
      }
    }
    .identity {
      padding: 0.5rem 0.5rem 0.5rem 1.75rem;
    }
  }
}
@media (min-width: 600px) {
  .view-application-navigation {
    .view-content {
      grid-template-columns: 1fr 1fr 1fr;
    }
  }
}
@media (min-width: 960px) {
  .view-application-navigation {
    .view-content {
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    }
  }
}


.view-team-members {
  .view-content {
    grid-template-columns: 1fr;

    >h3 {
        grid-column-start: 1;
        grid-column-end: 2;
      }
  }

  h3 {
    flex-basis: 100%;
  }

  .views-row {
    flex-basis: 30rem;
    justify-content: flex-start;
    align-items: center;
  }

  .views-field-field-image {
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 9999px;
    padding: 0.5em;
    width: 20rem;
    height: 20rem;
    overflow: hidden;
    aspect-ratio: 1;
    flex-shrink: 0;

    img {
      mix-blend-mode: multiply;
      width: 100%;
      height: 100%;
      border-radius: 9999px;
    }
  }

  /* TODO: actually just render as h3 */
  .views-field-field-name-of-person {
    font-family: "DM Sans", sans-serif;
    font-weight: 400;
    font-variation-settings: "wght" 400;
    line-height: 1.15;
    margin: 0 0 0.5em 0;
    font-size: var(--font-size-h4);
  }
}
@media (min-width: 960px) {
  .view-team-members {
    .view-content {
      grid-template-columns: 1fr 1fr;
      >h3 {
        grid-column-start: 1;
        grid-column-end: 3;
      }
    }
  }
}

.view-partner-companies {
  .view-content {
    grid-template-columns: 1fr;

    >h3 {
      grid-column-start: 1;
      grid-column-end: 2;
    }
  }

  .views-row {
    flex-basis: 30rem;
    display: flex
  }

  .block-content {
    height: 100%;
  }

  .partner_company {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: space-between;
    height: 100%;
    align-items: center;
  }

  .logo {
    width: 20rem;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;

    img {
      width: 100%;
      height: auto;
    }
  }
}
@media (min-width: 960px) {
  .view-partner-companies {
    .view-content {
      grid-template-columns: 1fr 1fr 1fr;

      >h3 {
        grid-column-start: 1;
        grid-column-end: 4;
      }
    }
  }
}

.block-type_testimonial {
  .block__content {
    display: flex;
    gap: 2rem;
    justify-content: flex-start;

    .field--name-field-image {
      background-color: rgba(255, 255, 255, 0.5);
      border-radius: 9999px;
      /*border: solid 0.5em rgba(255,255,255,0.1);*/
      padding: 0.5em;
      width: 10rem;
      height: 10rem;
      overflow: hidden;
      aspect-ratio: 1;
      flex-shrink: 0;

      img {
        mix-blend-mode: multiply;
        width: 100%;
        height: 100%;
        border-radius: 9999px;
      }
    }

    .testimonial {
      margin: 0;
      font-size: var(--font-size-h3);
      font-style: italic;
      font-variation-settings: "ital" 0.5;
      font-synthesis: none;
      display: flex;
      flex-direction: column;
      justify-content: center;

      p {
        margin: 0 0 1rem 0;
      }

      footer {
        font-style: normal;
        font-size: 1rem;
        padding-inline-start: 4rem;
      }
    }
  }
}

.block-pricing-summary {
  .section-inner {
    word-wrap: break-word;
    gap: 2em;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-direction: row;
  }

  /* TODO: Replace with semantic class */
  .column {
    flex-basis: 16rem;
    flex-grow: 0;
    min-width: 16rem;
  }

  .column.actions {
    justify-content: flex-end;
  }

  .price {
    font-size: var(--font-size-h4);
    padding: 1rem;
    justify-content: flex-start;
    gap: 0;

    p {
      margin: 0;
    }

    .amount {
      font-size: 8rem;
      filter: drop-shadow(0 0 0.125em rgba(255, 255, 255, 0.75)) drop-shadow(0 0 0.25em rgba(255, 255, 255, 0.75)) drop-shadow(0 0 0.5em rgba(255, 255, 255, 0.75)) drop-shadow(0 0 1em rgba(255, 255, 255, 0.75)) drop-shadow(0 0 2em rgba(255, 255, 255, 0.75));
      font-weight: 100;

      .currency {
        font-size: 2rem;
      }
    }

    .context {
      align-self: flex-end;
    }

    .regardless {
      font-weight: 200;
      font-style: italic;
      margin-top: 2rem;
    }
  }
}

.block-webform-block,
.path-webform {
  .block__content form {
    gap: 2rem;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    flex-direction: row;
    margin: 0;

    >.form-item,
    >fieldset,
    >.form-actions {
      overflow: visible;
      display: flex;
      flex-direction: column;
      overflow: visible;
      flex-basis: 16rem;
      flex-grow: 1;
      flex-shrink: 1;
      align-items: center;
      gap: 1em;
      justify-content: space-between;
      align-items: stretch;
      width: 100%;
      max-width: 40ch;
    }

    >.form-type-processed-text {
      display: block;
    }

    fieldset {
      border: none;
      padding: 0;
    }

    .form-actions {
      margin-top: 0;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }

    /* TODO: It would be better not to render this. We use inline form errors. */
    div[data-drupal-messages] {
      display: none;
    }
  }
}
@media (min-width: 480px) {
  .block-webform-block,
  .path-webform {
    .form-actions {
        margin-top: 3rem;
    }
  }
}

.path-webform {
  .block__content form {
    justify-content: space-between;
  }
}

.messages {
  margin: 1rem 0 0 1rem;
  background-color: var(--panel-bg);
  border-radius: var(--border-radius-rounded);
  box-shadow: var(--panel-shadow);
  padding: 0.5em;
}

.block-menu {
  .menu {
    gap: 0;
    justify-content: space-around;
    margin: 0;
    max-width: var(--inner-width);
    overflow: hidden;
    padding: 0;
    display: flex;
    flex-wrap: wrap;

    .menu__item {
      list-style: none;
      flex-grow: 1;
    }
  }
}

.menu--main,
.menu--footer {
  width: 100%;
  flex-grow: 0;
  flex-shrink: 0;
  display: flex;
  justify-content: space-around;
  padding: 0;
}

.menu--main,
.menu--account {
  .menu {
    background-color: var(--panel-bg);
    border-radius: var(--border-radius-rounded);
    box-shadow: 0 0 0.125em rgba(255, 255, 255, 0.5);

    .menu__item {
      a {
        border-radius: 0;
        display: block;
        border-bottom: solid 0.5em transparent;
        padding: 1em 2em 0.5em 2em;
        color: var(--body-text-color);
        font-weight: 400;
      }

      a.is-active {
        background-color: rgba(0, 0, 0, 0.05);
      }
    }

    @media (hover: hover) {
      li a:hover {
        color: var(--body-text-color);
        border-bottom: solid 0.5em var(--body-text-color);
        text-decoration: none;
        background-color: rgba(0, 0, 0, 0.02);
      }

      li:nth-child(8n + 1) a:hover {
        border-color: var(--color-swimmingpool);
      }

      li:nth-child(8n + 2) a:hover {
        border-color: var(--color-apricot);
      }

      li:nth-child(8n + 3) a:hover {

        border-color: var(--color-mint);
      }

      li:nth-child(8n + 4) a:hover {
        border-color: var(--color-lilac);
      }

      li:nth-child(8n + 5) a:hover {
        border-color: var(--color-lime);
      }

      li:nth-child(8n + 6) a:hover {
        border-color: var(--color-candyfloss);
      }

      li:nth-child(8n + 7) a:hover {
        border-color: var(--color-butter);
      }

      li:nth-child(8n + 0) a:hover {
        border-color: var(--color-lavender);
      }


    }
  }
}

.menu--main {
  display: none;
  margin-top: 2rem;

  .menu {
    flex-wrap: nowrap;
    min-width: 50%;

    .menu__item {
      flex-basis: 20rem;

      a {
        text-align: center;
      }
    }
  }
}
@media (min-width: 480px) {
  .menu--main {
    display: block;
  }
}

.menu--footer {
  margin: 0 0 4rem 0;

  .menu--level-1 {
    width: 100%;
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
  }

  .menu__link--level-1 {
    font-family: "DM Sans", sans-serif;
    font-weight: 400;
    font-variation-settings: "wght" 400;
    line-height: 1.15;
    margin: 0 0 1em 0;
    font-size: var(--font-size-h5);
    display: block;
    padding: 0;
  }

  .menu--level-2 {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    padding: 0 0 0 1em;
  }
}
@media (min-width: 480px) {
  .menu--footer {
    .menu--level-1 {
      gap: 4rem;
      grid-template-columns: 1fr 1fr;
    }
    .menu__link--level-1 {
      padding: 0;
    }
    .menu--level-2 {
      padding: 0;
    }
  }
}
@media (min-width: 960px) {
  .menu--footer {
    .menu--level-1 {
      grid-template-columns: 1fr 1fr 1fr;
    }
  }
}

.menu--account {
  .hamburger {
    display: block;
    padding: 0;

    .menu {
      background-color: white;
      box-shadow: var(--panel-shadow);
      border-radius: var(--border-radius-rounded);
      z-index: 1;
    }

    input[type="checkbox"] {
      display: none;
    }

    input[type="checkbox"]:not(:checked)~ul {
      display: none;
    }

    input[type="checkbox"]:checked~label {
      background-color: rgba(0, 0, 0, 0.1);
      box-shadow: 0 0 0.25em rgba(0, 0, 0, 0.1);
    }

    label {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 3em;
      height: 3em;
      background-color: var(--panel-bg);
      box-shadow: var(--panel-shadow);
      border-radius: var(--border-radius-rounded);
      margin-bottom: 0.5em;
      cursor: pointer;

      picture,
      img {
        width: 2em;
        height: 2em;
        max-width: 2em;
        max-height: 2em;
      }
    }

    ul {
      display: flex;
      flex-direction: column;
      position: absolute;
      right: 0;
      margin: 0;
      top: auto;
      padding: 0;
      min-width: 10em;
      width: auto;
      gap: 0;

      li {
        padding: 0;
        width: 100%;
        min-height: 44px;
        display: flex;
        align-items: center;

        a {
          display: block;
          text-align: left;
          width: 100%;
        }
      }
    }

    .menu__item--nolink span {
      display: none;
    }
  }
}
@media (min-width: 480px) {
  .menu--account {
    .hamburger {
      .menu {
        background-color: var(--panel-bg);
      }
    }
  }
}

.block-type_spacer .section-inner {
  .block__content {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .field--name-field-spacer-image {
    width: 50%;
    max-width: 8rem;
  }

  img {
    width: 100%;
  }
}

.block-mautic-form---wed-like-to-hear-from-you {
  background: transparent;
  background-image: url(../images/bg_form.png);
  background-size: 100% 100%;
}

.block-mautic-form---wed-like-to-hear-from-you,
#mauticform_wrapper_wedliketohearfromyou {

  form {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  label {
    font-size: var(--font-size-h5);
    font-weight: 400;
  }

  .mauticform-innerform {
    width: 100%;
  }

  .mauticform-page-wrapper {
    /* Unfortunately, Mautic applies an inline style on submit forcing this to be block. */
    display: grid !important;
    grid-template-columns: 100%;
    grid-template-rows: auto auto auto auto auto;
    gap: 1em;
  }

  .mauticform-row {
    grid-column: 1;
    grid-row: 1;
  }

  .mauticform-row.blurb {
    grid-column: 1;
    grid-row: 2;
  }

  .mauticform-row.country {
    grid-column: 1;
    grid-row: 3;
  }

  .mauticform-row.email {
    grid-column: 1;
    grid-row: 4;
  }

  .mauticform-row.phone {
    grid-column: 1;
    grid-row: 5;
  }

  .mauticform-row.url {
    grid-column: 1;
    grid-row: 6;
  }

  .mauticform-row.body {
    grid-column: 1;
    grid-row: 7;
  }

  .mauticform-row.submit {
    grid-column: 1;
    grid-row: 8;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    button {
      margin-bottom: 0;
    }
  }

  .mauticform-error,
  .mauticform-message {
    order: 1;
    margin-top: 1rem;
    text-align: center;
  }

  .mauticform-message {
    font-family: "DM Sans", sans-serif;
    font-weight: 400;
    font-variation-settings: "wght" 400;
    line-height: 1.15;
    margin: 0;
    font-size: var(--font-size-h3);
  }

  .mauticform-error {
    background-color: var(--color-apricot);
    border-radius: 0 0 var(--border-radius-rounded) var(--border-radius-rounded);
    padding: 0 1em;
  }
}

@media (min-width: 640px) {
  .block-mautic-form---wed-like-to-hear-from-you,
  #mauticform_wrapper_wedliketohearfromyou {

    .mauticform-page-wrapper {
      /* Unfortunately, Mautic applies an inline style on submit forcing this to be block. */
      grid-template-columns: 1fr 1fr;
    }

    .mauticform-row {
      grid-column: 2;
      grid-row: 1;
      min-width: 16rem;
    }

    .mauticform-row.blurb {
      grid-column: 1;
      grid-row: 1 / span 5;
    }

    .mauticform-row.country {
      grid-column: 2;
      grid-row: 1;
    }

    .mauticform-row.email {
      grid-column: 2;
      grid-row: 2;
    }

    .mauticform-row.phone {
      grid-column: 2;
      grid-row: 3;
    }

    .mauticform-row.url {
      grid-column: 2;
      grid-row: 4;
    }

    .mauticform-row.body {
      grid-column: 2;
      grid-row: 5;
    }

    .mauticform-row.submit {
      grid-column: 2;
      grid-row: 6;
    }

  }
}


/* Pages */
.path-user {
  main {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    padding: 4rem;
  }

  .region--content {
    align-items: center;
    background-color: var(--panel-bg);
    border-radius: var(--border-radius-rounded);
    box-shadow: var(--panel-shadow);
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 30rem;
    padding: 4rem;
    width: 100%;

    >section {
      padding: 0;
    }
  }
}

.callout,
.block-content--type-callout {
  background-color: var(--panel-bg);
  border-radius: var(--border-radius-rounded);
  box-shadow: var(--panel-shadow);
  padding: 2rem;
}
.block-content--beta-testing {
  background: var(--panel-dark-bg);
  box-shadow: var(--panel-dark-shadow);
  overflow: hidden;
  position: relative;

  &:before {
    content: "\03b2";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    font-size: 12rem;
    color: rgba(0, 0, 0, 0.1);
    font-weight: 900;
    text-align: center;
    z-index: -1;
    line-height: 12rem;
  }
}
@media (min-width: 480px) {
  .block-content--beta-testing {
    &:before {
      font-size: 25rem;
      line-height: 22rem;
    }
  }
}

.block-content--type-callout {
  .block-content__content {
    height: 100%;
  }
  .field-group {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;

    .field--name-body {
      flex-grow: 1;
    }

    .field--name-field-call-to-action-destination {
      flex-grow: 0;
    }
  }
}

.block-legal-statements {
  text-align: left;
  font-size: 0.75rem;
  color: rgba(0, 0, 0, 0.4);

  p {
    margin: 0;
  }

  .field--name-body {
    display: flex;
    justify-content: space-between;

    p {
      flex-basis: 40ch;
      flex-grow: 0;
    }
  }
}

/* Link for accessibility, skipping past header content */
.skip-to-main-content-link {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: 1em;
  margin-top: 1rem;
  background-color: var(--panel-bg);
  color: var(--body-text-color);
  opacity: 0;
}

/* When the link receives focus (e.g., when a keyboard user tabs to it), it is repositioned horizontally to the centre of the screen. */
.skip-to-main-content-link:focus {
  left: 50%;
  transform: translateX(-50%);
  opacity: 1;
}

.region>section.block-webform-tell-us-what-you-need {
  background-image: url(../images/bg_form.png);
  background-size: 100% 100%;
  padding-bottom: 4rem;
}
@media screen and (prefers-color-scheme: dark) {
  .region>section.block-webform-tell-us-what-you-need {
    background-image: url(../images/bg_form_dark.png);
  }
}
@media (min-width: 480px) {
  .region>section.block-webform-tell-us-what-you-need {
    padding-bottom: 2rem;
  }
}

.webform-submission-beta-testing-form {
  position: relative;
}

.webform-submission-beta-testing-form:before {
  content: "\03b2";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  font-size: 38rem;
  color: rgba(0, 0, 0, 0.1);
  font-weight: 900;
  text-align: center;
  z-index: -1;
  line-height: 24rem;
}

/* Webform modal */
.ui-widget.ui-dialog.webform-confirmation-modal {
  outline: solid 0.5rem rgba(0, 0, 0, 0.4);
  border: none;
  background: none;
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: var(--border-radius-rounded);
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
  padding: 1rem 2rem;
  position: relative;

  .ui-dialog-titlebar {
    background-color: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    position: static;
  }

  .ui-dialog-title {
    float: left;
    margin: 0;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ui-dialog-titlebar-close {
    width: 2rem;
    height: 2rem;
    top: -1rem;
    right: -1rem;
    border-radius: 9999px;
    margin: 0;
    padding: 0;
  }

  .ui-dialog-content {
    padding: 0;
  }
}

/* Application page */

body.page-node-type-application {
  .hero {
    padding-top: 0;
  }

  .page>header {
    min-height: 2rem;

    img {
      max-width: 20rem;
      margin-top: 1rem;
      margin-bottom: 0;
      margin-right: 4rem;
    }
  }

  .menu--main {
    margin-top: 0;
  }

  .page {
    /* Default accent color, which will be replaced by a field value for the application in a style attribute */
    --application-color: transparent;
    --application-color-light: hsl(from var(--application-color) h 100% 80%);
  }

  /* Give the hero a background graident based on a colour from the application's logo */
  .hero {
    background: linear-gradient(180deg,
        transparent,
        color-mix(in oklab, var(--application-color-light), transparent 30%));
  }

  /* Laptop image showing a preview screenshot of the app */
  .application-preview-wrapper {
    position: relative;
    height: 330px;
    pointer-events: none;

    .application-preview {
      position: absolute;
      right: auto;
      bottom: 2rem;
      top: auto;
      left: auto;
      padding: 0;

      .application-preview-image-frame {
        width: 320px;
        aspect-ratio: 1.55;
        background-image:
          url(../images/laptop-frame.svg),
          radial-gradient(circle closest-side at center, white, transparent);
        background-size: contain;
        background-repeat: no-repeat;
        position: relative;
        opacity: 1;
        max-width: 100%;

        /* Note relative units here, so screenshot stays positioned even if the frame is resized */
        img {
          filter: none;
          /* TODO: filter above should be just for the logo */
          max-width: none;
          margin: 0;
          width: 73%;
          /* Fit screenshot to space for screen in laptop frame */
          position: absolute;
          left: 13.5%;
          top: 4%;
          bottom: auto;
          right: auto;
          border-radius: 4px;
          border: solid 2px black;
          aspect-ratio: 1.6;
        }
      }
    }
  }

  .application-identity {
    background-color: rgba(255, 255, 255, 0.25);
    padding-top: 0;
    box-shadow: 0 0 0.25rem color-mix(in oklab, var(--application-color-light), transparent 80%);
    padding: 0 2rem 0 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    gap: 1rem;
  }

  @media (min-width: 480px) {
    .application-identity {
      padding: 0 4rem 0 4rem;
      gap: 2rem;
    }
  }

  @media (min-width: 1280px) {
    .application-identity {
      padding: 0 8rem 0 8rem;
      gap: 4rem;
    }
  }


  .application-identity-inner {
    max-width: var(--inner-width);
    width: 100%;
    display: flex;
    justify-content: flex-start;
    gap: 1rem;
    align-items: center;
    position: relative;
    margin-bottom: 0;
    padding: 1rem 0;

    .application-logo {
      background-color: rgba(255, 255, 255, 0.5);
      border-radius: 9999px;
      padding: 0.5rem;
      width: 5rem;
      height: 5rem;
      min-width: 5rem;
      min-height: 5rem;
      box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.2);
      margin: -2.5rem 0 -2.5rem -1rem;

      >img {
        width: 4em;
        height: 4em;
        position: absolute;
      }
    }

    .application-name {
      p {
        margin: 0;
        font-size: 1.2rem;
      }
    }

    h1 {
      margin: 0;
    }

  }

  .node--type-application {
    padding: 3rem 0 8rem 0;
  }
  /* Overall layout for application content */
  .node--type-application .node__content {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 2rem 2rem;

    .field-group-body {
      grid-column-start: 1;
      grid-column-end: 2;
    }

    .field-group-meta {
      grid-column-start: 1;
      grid-column-end: 2;
    }

    .field-group-pricing {
      grid-column-start: 1;
      grid-column-end: 2;
    }
  }

  .field-group-body {
    display: flex;
    gap: 4rem;
    flex-direction: column;
  }

  .field-group-meta {
    background-color: var(--panel-bg);
    border-radius: var(--border-radius-rounded);
    box-shadow: var(--panel-shadow);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;

    .field {
      margin-bottom: 2rem;
    }

    .field--name-field-calls-to-action {
      flex-grow: 1;
      display: flex;
      justify-content: flex-end;
      gap: 1rem;
      flex-direction: column;
      margin-bottom: 0;
    }

    .field__label {
      font-weight: bold;
    }
  }

  .field-group-pricing {
    background-color: rgba(0, 0, 0, 0.05);
    box-shadow: 0 0 0.25em rgba(0, 0, 0, 0.05);
    padding: 1rem 2rem 2rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;

    h3 {
      margin: 0;
    }
  }

  .field--name-field-blurb {
    font-size: 1.2rem;
  }

  .field--name-field-application-features {
    display: flex;
    flex-direction: column;
    gap: 4rem;
  }
}
@media (min-width: 480px) {
  body.page-node-type-application {
    .application-preview-wrapper {
      .application-preview {
        bottom: 0;
        width: 100%;
        height: 500px;

        .application-preview-image-frame {
          width: 420px;
          height: auto;
          position: absolute;
          left: 50%;
          right: auto;
          top: auto;
          bottom: 0;
          transform: translate(-50%, 0);
        }
      }
    }
  }

  .application-identity-inner {
    height: 7rem;

    .application-logo {
      width: 8rem;
      height: 8rem;
      min-width: 8rem;
      min-height: 8rem;
      margin: -2.5rem 0 -2.5rem -0.5rem;

      >img {
        width: 7em;
        height: 7em;
      }
    }
  }
}

@media (min-width: 960px) {
  body.page-node-type-application {
    .application-preview-wrapper {
      .application-preview {
        right: -4rem;
        bottom: -5.8rem;
        top: auto;
        left: auto;
        width: 480px;

        .application-preview-image-frame {
          width: 480px;
        }
      }
    }

    .node--type-application .node__content {
      grid-template-columns: 2fr 1fr;

      .field-group-body {
        grid-column-start: 1;
        grid-column-end: 2;
      }

      .field-group-meta {
        grid-column-start: 2;
        grid-column-end: 3;
      }

      .field-group-pricing {
        grid-column-start: 1;
        grid-column-end: 3;
      }
    }
  }

  .application-identity-inner {
    height: 7rem;

    .application-logo {
      width: 8rem;
      height: 8rem;
      min-width: 8rem;
      min-height: 8rem;
      margin: -2.5rem 0 -2.5rem -0.5rem;

      >img {
        width: 7em;
        height: 7em;
      }
    }
  }
}
@media (min-width: 1280px) {
  body.page-node-type-application {
    .application-preview-wrapper {
      .application-preview {
        width: 600px;

        .application-preview-image-frame {
          width: 600px;
        }
      }
    }
  }
}


.paragraph {
  ul {
    margin-bottom: 1em;
    padding-left: 2em;
  }
}
.paragraph--type--large-paragraph {
  font-size: 1.33rem;
}
.paragraph--type--callout-paragraph {
  font-size: 1.33rem;
  background-color: var(--callout-background-color);
  box-shadow: 0 0 0.25em var(--callout-shadow-color);
  color: var(--callout-text-color);
  padding: 1rem 2rem;
}
@media (min-width: 1280px) {
  .paragraph--type--callout-paragraph {
    padding: 2rem 4rem;
  }
}
.paragraph--type--legal-list {
  counter-reset: section;

  h3:before {
    counter-increment: section;
    content: counter(section) ". ";
    margin-block-end: 0.5em;
  }

  ol {
    counter-reset: clause;
    list-style: none outside none;
    text-indent: -2em;
    padding-inline-start: 2em;
  }

  ol li {
    counter-increment: clause;
    margin-block-end: 1em;
  }

  ol li:before {
    content: counter(section) "." counters(clause, ".") ". ";
    margin-block-end: 0.5em;
  }
}
.paragraph--type--application-feature {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-start;

  .field {
    flex-basis: 100%;
    flex-grow: 1;
    flex-shrink: 1;
  }


  .field.field-group-description {
    padding-top: 0.25rem;
  }

  .field--name-field-heading {
    font-family: "DM Sans", sans-serif;
    font-weight: 400;
    font-variation-settings: "wght" 400;
    line-height: 1.15;
    margin: 0 0 1rem 0;
    font-size: var(--font-size-h4);
  }
}
@media (min-width: 480px) {
.paragraph--type--application-feature {
    .field {
      flex-basis: 2rem;
      flex-grow: 1;
      flex-shrink: 1;
    }
  }
}

/* Basic page */
.page-node-type-page {
}

.page-node-type-text-page {
  main .section-inner {
    --inner-width: var(--readable-line-length);
  }
  .block-magnificent-page-title h1 {
    margin: 0;
  }
  .block-magnificent-content {
    padding-top: 2rem;
  }
  .paragraph {
    margin-bottom: 2rem;
  }
}

.price-models {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem;

  .price-model {
    padding: 0.5rem;
    border-radius: 0.5rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* background-color: rgba(255, 255, 255, 0.25); */
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.25),
        color-mix(in oklab, rgba(255, 255, 255, 0.25), var(--application-color-light) 20%));
    box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.2);

    .price-model-header {
      padding-bottom: 1rem;
      border-top-left-radius: 0.25rem;
      border-top-right-radius: 0.25rem;
      font-weight: 900;
      font-size: 1.2rem;
      line-height: 1;
      display: flex;
      gap: 1rem;
      flex-shrink: 0;
      flex-grow: 0;
      height: 5.5rem;
      align-items: flex-end;
      background-color: transparent;

      h5 {
        margin-bottom: 0.25em;
      }
    }

    .price-model-header:before {
      content: "";
      width: 5rem;
      aspect-ratio: 1;
      display: inline-block;
      margin: 0;
      background-size: contain;
      vertical-align: middle;
    }

    .price-model-body {
      flex-grow: 1;
      background-color: rgba(255, 255, 255, 50%);
      border-top-left-radius: 0.25rem;
      border-top-right-radius: 0.25rem;
      padding: 1rem 2rem 1rem 1rem;
    }

    .price-model-footer {
      background-color: rgba(255, 255, 255, 50%);
      border-bottom-left-radius: 0.25rem;
      border-bottom-right-radius: 0.25rem;
      padding: 1rem 2rem 1rem 1rem;
    }

    .price {
      font-size: 1.2rem;
    }
  }

  .price-model--magnificent-instance {
    .price-model-header:before {
      background-image: url(../images/price_models/magnificent-instance.svg);
    }
  }

  .price-model--own-server {
    .price-model-header:before {
      background-image: url(../images/price_models/own-server.svg);
    }
  }

  .price-model--application-server {
    .price-model-header:before {
      background-image: url(../images/price_models/application-server.svg);
    }
  }
}

/* Generic fields */
.field {
  ul.field__items {
    padding-left: 1.25em;
  }
}























.field.field--name-field-screenshot {
  border-radius: 0.5rem;
  background-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.2);
  padding: 0.5rem;

  summary {
    display: block;
    cursor: zoom-in;

    &::before {
      content: '';
      backdrop-filter: none;
      transition: backdrop-filter 0.5s, background 0.2s;
      background: transparent;
    }
    > img {
      background: black;
      width: 100%;
      height: auto;
      border-radius: 0.25rem;
      display: block;
    }
  }

  &>.modal-background img {
    width: auto;
    height: auto;
    max-width: 95vw;
    max-height: 95vh;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    opacity: 0;
    transition: filter 0.3s, opacity 0.6s;
    filter: blur(6px);
    border-radius: 0.5rem;
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.2);
    padding: 0.5rem;
  }

  &[open]>.modal-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 510;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(6px);

    img {
      opacity: 1;
      filter: none;
    }
  }

  &[open]>summary {
    cursor: auto;

    &::before {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      z-index: 509;
    }
  }
}

.block-magnificent-views-block-application-navigation-block-1 {
  background-color: var(--panel-bg);
  box-shadow: var(--panel-shadow);
}

.field--name-field-project-websites {
  font-size: var(--font-size-h5);
}
.field--name-field-calls-to-action,
.field ul.field--name-field-calls-to-action {
  padding-left: 0;

  .field__item {
    list-style-type: none;
  }
}